@telefonica/mistica 10.22.3 → 10.24.2

package/dist/carousel.js

@@ -0,0 +1,840 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.Slideshow = exports.CenteredCarousel = exports.Carousel = exports.PageBullets = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _iconChevronLeftRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-left-regular"));
+var _iconChevronRightRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-right-regular"));
+var _hooks = require("./hooks");
+var _inline = _interopRequireDefault(require("./inline"));
+var _jss = require("./jss");
+var _stack = _interopRequireDefault(require("./stack"));
+var _touchable = _interopRequireDefault(require("./touchable"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _responsiveLayout = require("./responsive-layout");
+var _themeVariantContext = require("./theme-variant-context");
+var _color = require("./utils/color");
+var _image = require("./image");
+var _dom = require("./utils/dom");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+var useBulletsStyles = (0, _jss).createUseStyles(function(theme) {
+    return {
+        bullet: _defineProperty({
+            backgroundColor: function backgroundColor(param) {
+                var isInverse = param.isInverse;
+                return isInverse ? (0, _color).applyAlpha(theme.colors.inverse, 0.5) : theme.colors.control;
+            },
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            transition: 'transform 0.3s ease-in-out, background-color 0.3s ease-in-out',
+            '&.active': {
+                backgroundColor: function backgroundColor(param) {
+                    var isInverse = param.isInverse;
+                    return isInverse ? theme.colors.inverse : theme.colors.controlActivated;
+                },
+                transform: 'scale(1.25)'
+            }
+        }, theme.mq.tabletOrSmaller, {
+            width: 4,
+            height: 4,
+            '&.active': {
+                transform: 'scale(1.5)'
+            }
+        })
+    };
+});
+var PageBullets = function PageBullets(param) {
+    var currentIndex = param.currentIndex, numPages = param.numPages, onPress = param.onPress;
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var classes = useBulletsStyles({
+        isInverse: isInverse
+    });
+    var isDesktopOrBigger = (0, _hooks).useScreenSize().isDesktopOrBigger;
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_inline.default, {
+        space: isDesktopOrBigger ? 16 : 8,
+        alignItems: "center",
+        children: Array.from({
+            length: numPages
+        }, function(_, i) {
+            /*#__PURE__*/ return (0, _jsxRuntime).jsx(_touchable.default, {
+                maybe: true,
+                onPress: isDesktopOrBigger && onPress ? function() {
+                    return onPress(i);
+                } : undefined,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: (0, _classnames).default(classes.bullet, {
+                        active: i === currentIndex
+                    })
+                })
+            }, i);
+        })
+    }));
+};
+exports.PageBullets = PageBullets;
+var hideScrollbar = {
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+        display: 'none'
+    }
+};
+var arrowButtonSize = 40;
+var arrowButtonStyle = function arrowButtonStyle(theme) {
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: arrowButtonSize,
+        height: arrowButtonSize,
+        borderRadius: '50%',
+        backgroundColor: theme.colors.backgroundContainer,
+        border: "1px solid ".concat(theme.colors.border),
+        transition: 'opacity 0.2s',
+        '&[disabled]': {
+            opacity: 0
+        },
+        // don't show carrousel arrow buttons in touch devices, just regular horizontal scroll
+        '@media (pointer: coarse)': {
+            display: 'none'
+        }
+    };
+};
+var useStyles = (0, _jss).createUseStyles(function(theme) {
+    var _obj, _obj1, _obj2;
+    return {
+        carouselContainer: {
+            position: 'relative'
+        },
+        arrowButton: _objectSpread({}, arrowButtonStyle(theme), {
+            position: 'absolute',
+            zIndex: 1,
+            top: "calc(50% - ".concat(arrowButtonSize / 2, "px)"),
+            '&.prev': (_obj = {
+                left: -arrowButtonSize / 2
+            }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
+                left: function left(param) {
+                    var sideMargin = param.sideMargin;
+                    return -sideMargin;
+                }
+            }), _defineProperty(_obj, theme.mq.largeDesktop, {
+                left: -(24 + arrowButtonSize)
+            }), _obj),
+            '&.next': (_obj1 = {
+                right: -arrowButtonSize / 2
+            }, _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
+                right: function right(param) {
+                    var sideMargin = param.sideMargin;
+                    return -sideMargin;
+                }
+            }), _defineProperty(_obj1, theme.mq.largeDesktop, {
+                right: -(24 + arrowButtonSize)
+            }), _obj1)
+        }),
+        carousel: _objectSpread({
+            display: 'flex',
+            overflowX: 'auto',
+            minWidth: '100%',
+            scrollSnapType: function scrollSnapType(param) {
+                var free = param.free;
+                return free ? 'initial' : 'x mandatory';
+            }
+        }, hideScrollbar, _defineProperty({}, theme.mq.tabletOrSmaller, {
+            margin: function margin(param) {
+                var sideMargin = param.sideMargin;
+                return "0 -".concat(sideMargin, "px");
+            },
+            '&::before, &::after': {
+                content: '""',
+                flexShrink: 0,
+                display: 'block',
+                width: function width(param) {
+                    var centered = param.centered;
+                    return centered ? '25%' : 0;
+                }
+            }
+        })),
+        item: (_obj2 = {
+            scrollSnapAlign: 'start',
+            flexShrink: 0,
+            width: function width(param) {
+                var itemsPerPageConfig = param.itemsPerPageConfig, gap = param.gap;
+                return "calc(".concat(100 / itemsPerPageConfig.desktop, "% + ").concat(gap / itemsPerPageConfig.desktop, "px)");
+            },
+            scrollMargin: function scrollMargin(param) {
+                var gap = param.gap;
+                return "-".concat(gap, "px");
+            },
+            '&:first-child': {
+                width: function width(param) {
+                    var itemsPerPageConfig = param.itemsPerPageConfig, gap = param.gap;
+                    // prettier-ignore
+                    return "calc(".concat(100 / itemsPerPageConfig.desktop, "% - ").concat(gap * (itemsPerPageConfig.desktop - 1) / itemsPerPageConfig.desktop, "px)");
+                },
+                scrollMargin: 0
+            }
+        }, _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
+            scrollSnapAlign: function scrollSnapAlign(param) {
+                var centered = param.centered;
+                return centered ? 'center' : 'start';
+            },
+            scrollMargin: function scrollMargin(param) {
+                var mobilePageOffsetConfig = param.mobilePageOffsetConfig;
+                return "".concat(mobilePageOffsetConfig.prev, "px");
+            },
+            width: function width(param) {
+                var itemsPerPageConfig = param.itemsPerPageConfig, mobilePageOffsetConfig = param.mobilePageOffsetConfig, gap = param.gap;
+                // prettier-ignore
+                return "calc(".concat(100 / itemsPerPageConfig.mobile, "% - ").concat((mobilePageOffsetConfig.next + mobilePageOffsetConfig.prev + gap) / itemsPerPageConfig.mobile, "px)");
+            },
+            '&:first-child': {
+                paddingLeft: function paddingLeft(param) {
+                    var centered = param.centered, sideMargin = param.sideMargin;
+                    return centered ? 0 : sideMargin;
+                },
+                width: function width(param) {
+                    var itemsPerPageConfig = param.itemsPerPageConfig, mobilePageOffsetConfig = param.mobilePageOffsetConfig, gap = param.gap, centered = param.centered, sideMargin = param.sideMargin;
+                    // prettier-ignore
+                    return "calc(".concat(100 / itemsPerPageConfig.mobile, "% - ").concat((mobilePageOffsetConfig.next + mobilePageOffsetConfig.prev + gap) / itemsPerPageConfig.mobile + gap - (centered ? 0 : sideMargin), "px)");
+                }
+            },
+            '&:last-child': {
+                paddingRight: function paddingRight(param) {
+                    var sideMargin = param.sideMargin;
+                    return sideMargin;
+                },
+                width: function width(param) {
+                    var itemsPerPageConfig = param.itemsPerPageConfig, mobilePageOffsetConfig = param.mobilePageOffsetConfig, gap = param.gap, centered = param.centered, sideMargin = param.sideMargin;
+                    // prettier-ignore
+                    return "calc(".concat(100 / itemsPerPageConfig.mobile, "% - ").concat((mobilePageOffsetConfig.next + mobilePageOffsetConfig.prev + gap) / itemsPerPageConfig.mobile - (centered ? 0 : sideMargin), "px)");
+                }
+            },
+            '.centered &': {
+                width: function width() {
+                    return '50%';
+                },
+                paddingLeft: function paddingLeft() {
+                    return 0;
+                },
+                paddingRight: function paddingRight() {
+                    return 0;
+                },
+                scrollSnapAlign: function scrollSnapAlign() {
+                    return 'center';
+                },
+                scrollMargin: function scrollMargin() {
+                    return 0;
+                }
+            }
+        }), _defineProperty(_obj2, '&:not(:empty) ~ &:not(:empty)', {
+            paddingLeft: function paddingLeft(param) {
+                var gap = param.gap;
+                return gap;
+            }
+        }), _defineProperty(_obj2, '&:empty', {
+            display: 'none'
+        }), _obj2),
+        bullets: {
+            display: 'flex',
+            justifyContent: 'center'
+        }
+    };
+});
+var normalizeItemsPerPage = function normalizeItemsPerPage(itemsPerPage) {
+    var defaultItemsPerPage = {
+        mobile: 1,
+        desktop: 3
+    };
+    if (!itemsPerPage) {
+        return defaultItemsPerPage;
+    }
+    if (typeof itemsPerPage === 'number') {
+        return {
+            mobile: itemsPerPage,
+            desktop: itemsPerPage
+        };
+    }
+    return _objectSpread({}, defaultItemsPerPage, itemsPerPage);
+};
+var normalizeMobilePageOffset = function normalizeMobilePageOffset(mobilePageOffset) {
+    if (typeof mobilePageOffset === 'number') {
+        return {
+            next: mobilePageOffset,
+            prev: mobilePageOffset
+        };
+    }
+    return mobilePageOffset;
+};
+var calcPagesScrollPositions = function calcPagesScrollPositions(itemsScrollPosition, numPages) {
+    if (itemsScrollPosition.length === 0) {
+        return [];
+    }
+    var itemsPerPage = Math.ceil(itemsScrollPosition.length / numPages);
+    var pagesScrollPositions = [];
+    for(var i = 0; i < itemsScrollPosition.length; i += itemsPerPage){
+        pagesScrollPositions.push(itemsScrollPosition[i]);
+    }
+    pagesScrollPositions[pagesScrollPositions.length - 1] = itemsScrollPosition[itemsScrollPosition.length - itemsPerPage];
+    return pagesScrollPositions;
+};
+var calcCurrentPageIndex = function calcCurrentPageIndex(scrollPosition, pagesScrollPositions) {
+    var middlePageScrollPositions = [];
+    for(var i = 0; i < pagesScrollPositions.length; i++){
+        if (i === 0) {
+            middlePageScrollPositions.push(pagesScrollPositions[0]);
+        } else {
+            middlePageScrollPositions.push((pagesScrollPositions[i] + pagesScrollPositions[i - 1]) / 2);
+        }
+    }
+    for(var i1 = middlePageScrollPositions.length - 1; i1 >= 0; i1--){
+        if (scrollPosition - middlePageScrollPositions[i1] >= -1) {
+            return i1;
+        }
+    }
+    return 0;
+};
+var DEFAULT_AUTOPLAY_TIME = 5000;
+var BaseCarousel = function BaseCarousel(param) {
+    var items = param.items, withBullets = param.withBullets, renderBullets = param.renderBullets, itemsPerPage = param.itemsPerPage, itemsToScroll = param.itemsToScroll, _mobilePageOffset = param.mobilePageOffset, mobilePageOffset = _mobilePageOffset === void 0 ? 16 : _mobilePageOffset, _gap = param.gap, gap = _gap === void 0 ? 8 : _gap, free = param.free, centered = param.centered, autoplay = param.autoplay, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
+    var texts = (0, _hooks).useTheme().texts;
+    var itemsPerPageConfig = normalizeItemsPerPage(itemsPerPage);
+    var mobilePageOffsetConfig = normalizeMobilePageOffset(mobilePageOffset);
+    var isDesktopOrBigger = (0, _hooks).useScreenSize().isDesktopOrBigger;
+    var sideMargin = (0, _responsiveLayout).useResonsiveLayoutMargin();
+    var classes = useStyles({
+        itemsPerPageConfig: itemsPerPageConfig,
+        mobilePageOffsetConfig: mobilePageOffsetConfig,
+        free: free,
+        gap: gap,
+        centered: centered,
+        sideMargin: sideMargin
+    });
+    var carouselRef = React.useRef(null);
+    var itemsPerPageFloor = isDesktopOrBigger ? Math.floor(itemsPerPageConfig.desktop) : Math.floor(itemsPerPageConfig.mobile);
+    var pagesCount = Math.ceil(items.length / itemsPerPageFloor);
+    var ref3 = _slicedToArray(React.useState({
+        scrollLeft: 0,
+        scrollRight: 0
+    }), 2), ref1 = ref3[0], scrollLeft1 = ref1.scrollLeft, scrollRight1 = ref1.scrollRight, setScroll = ref3[1];
+    var ref2 = _slicedToArray(React.useState([]), 2), itemScrollPositions = ref2[0], setItemScrollPositions = ref2[1];
+    var pagesScrollPositions = calcPagesScrollPositions(itemScrollPositions, pagesCount);
+    var scrollPositions = itemsToScroll ? calcPagesScrollPositions(itemScrollPositions, Math.ceil(items.length / itemsToScroll)) : pagesScrollPositions;
+    var showNextArrow = scrollRight1 !== 0;
+    var showPrevArrow = scrollLeft1 !== 0;
+    React.useLayoutEffect(function() {
+        if (carouselRef.current) {
+            var carouselEl = carouselRef.current;
+            var handleCarouselChange = function handleCarouselChange() {
+                var scrollWidth = carouselEl.scrollWidth, clientWidth = carouselEl.clientWidth;
+                var scrollLeft = Math.round(carouselEl.scrollLeft);
+                var scrollRight = Math.round(scrollWidth - (scrollLeft + clientWidth));
+                setScroll({
+                    scrollLeft: scrollLeft,
+                    scrollRight: scrollRight
+                });
+            };
+            var calcItemScrollPositions = function calcItemScrollPositions() {
+                var maxScroll = carouselEl.scrollWidth - carouselEl.clientWidth;
+                setItemScrollPositions(Array.from(carouselEl.querySelectorAll('[data-item]')).map(function(itemEl, idx) {
+                    if (idx === items.length - 1) {
+                        return maxScroll;
+                    }
+                    var offsetLeft = itemEl.offsetLeft;
+                    var scrollMargin = Number(getComputedStyle(itemEl).scrollMargin.replace('px', ''));
+                    var scrollPosition = centered && !isDesktopOrBigger ? offsetLeft - itemEl.clientWidth / 2 : offsetLeft;
+                    return Math.min(scrollPosition - scrollMargin - carouselEl.offsetLeft, maxScroll);
+                }));
+            };
+            handleCarouselChange();
+            calcItemScrollPositions();
+            carouselEl.addEventListener('scroll', handleCarouselChange);
+            var unlistenResize = (0, _dom).listenResize(carouselEl, function() {
+                handleCarouselChange();
+                calcItemScrollPositions();
+            });
+            return function() {
+                carouselEl.removeEventListener('scroll', handleCarouselChange);
+                unlistenResize();
+            };
+        }
+        return function() {};
+    }, [
+        itemsPerPageConfig.desktop,
+        itemsPerPageConfig.mobile,
+        mobilePageOffsetConfig.next,
+        mobilePageOffsetConfig.prev,
+        pagesCount,
+        gap,
+        centered,
+        isDesktopOrBigger,
+        sideMargin,
+        items.length, 
+    ]);
+    var goToPage = React.useCallback(function(pageIndex) {
+        var carouselEl = carouselRef.current;
+        if (carouselEl) {
+            var scroll = pagesScrollPositions[pageIndex];
+            carouselEl.scrollTo({
+                left: scroll,
+                behavior: 'smooth'
+            });
+        }
+    }, [
+        pagesScrollPositions
+    ]);
+    var goPrev = React.useCallback(function() {
+        var carouselEl = carouselRef.current;
+        if (carouselEl) {
+            var scrollLeft = carouselEl.scrollLeft;
+            var prevPageScrollPosition = _toConsumableArray(scrollPositions).reverse().find(function(pos) {
+                return pos - scrollLeft < -1;
+            });
+            carouselEl.scrollTo({
+                left: prevPageScrollPosition,
+                behavior: 'smooth'
+            });
+        }
+    }, [
+        scrollPositions
+    ]);
+    var goNext = React.useCallback(function() {
+        var carouselEl = carouselRef.current;
+        if (carouselEl) {
+            var scrollLeft = carouselEl.scrollLeft;
+            var nextPageScrollPosition = scrollPositions.find(function(pos) {
+                return pos - scrollLeft > 1;
+            });
+            carouselEl.scrollTo({
+                left: nextPageScrollPosition,
+                behavior: 'smooth'
+            });
+        }
+    }, [
+        scrollPositions
+    ]);
+    React.useEffect(function() {
+        if (autoplay) {
+            var time = typeof autoplay === 'boolean' ? DEFAULT_AUTOPLAY_TIME : autoplay.time;
+            var loop = typeof autoplay === 'object' && autoplay.loop;
+            var interval = setInterval(function() {
+                if (scrollRight1 !== 0) {
+                    goNext();
+                } else if (loop) {
+                    var ref;
+                    (ref = carouselRef.current) === null || ref === void 0 ? void 0 : ref.scrollTo({
+                        left: 0,
+                        behavior: 'smooth'
+                    });
+                }
+            }, time);
+            return function() {
+                return clearInterval(interval);
+            };
+        }
+    }, [
+        autoplay,
+        goNext,
+        scrollRight1
+    ]);
+    var currentPageIndex = calcCurrentPageIndex(scrollLeft1, pagesScrollPositions);
+    React.useEffect(function() {
+        if (onPageChange) {
+            var lastShownItemIndex = Math.min((currentPageIndex + 1) * itemsPerPageFloor - 1, items.length - 1);
+            var shownItemIndexes = [];
+            for(var i = 0; i < itemsPerPageFloor; i++){
+                shownItemIndexes.unshift(lastShownItemIndex - i);
+            }
+            onPageChange({
+                pageIndex: currentPageIndex,
+                shownItemIndexes: shownItemIndexes
+            });
+        }
+    }, [
+        currentPageIndex,
+        items.length,
+        itemsPerPageFloor,
+        onPageChange
+    ]);
+    var bullets = null;
+    if (renderBullets) {
+        bullets = renderBullets({
+            numPages: pagesCount,
+            currentIndex: currentPageIndex,
+            onPress: goToPage
+        });
+    } else if (withBullets) {
+        bullets = /*#__PURE__*/ (0, _jsxRuntime).jsx(PageBullets, {
+            numPages: pagesCount,
+            currentIndex: currentPageIndex,
+            onPress: goToPage
+        });
+    }
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+        space: 24,
+        dataAttributes: dataAttributes,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+                className: classes.carouselContainer,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
+                        isInverse: false,
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
+                            className: (0, _classnames).default(classes.arrowButton, 'prev'),
+                            "aria-label": texts.carouselPrevButton,
+                            onPress: goPrev,
+                            disabled: !showPrevArrow,
+                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevronLeftRegular.default, {})
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: (0, _classnames).default(classes.carousel, {
+                            centered: centered
+                        }),
+                        ref: carouselRef,
+                        children: items.map(function(item, index) {
+                            /*#__PURE__*/ return (0, _jsxRuntime).jsx("div", {
+                                className: classes.item,
+                                "data-item": true,
+                                children: item
+                            }, index);
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
+                        isInverse: false,
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
+                            className: (0, _classnames).default(classes.arrowButton, 'next'),
+                            "aria-label": texts.carouselNextButton,
+                            onPress: goNext,
+                            disabled: !showNextArrow,
+                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevronRightRegular.default, {})
+                        })
+                    })
+                ]
+            }),
+            bullets && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                className: classes.bullets,
+                children: bullets
+            })
+        ]
+    }));
+};
+var Carousel = function Carousel(props) {
+    /*#__PURE__*/ return (0, _jsxRuntime).jsx(BaseCarousel, _objectSpread({}, props));
+};
+exports.Carousel = Carousel;
+var CenteredCarousel = function CenteredCarousel(param) {
+    var items = param.items, withBullets = param.withBullets, renderBullets = param.renderBullets, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
+    /*#__PURE__*/ return (0, _jsxRuntime).jsx(BaseCarousel, {
+        items: items,
+        itemsPerPage: {
+            mobile: 1,
+            desktop: 3
+        },
+        centered: true,
+        itemsToScroll: 1,
+        mobilePageOffset: 0,
+        gap: 0,
+        withBullets: withBullets,
+        renderBullets: renderBullets,
+        onPageChange: onPageChange,
+        dataAttributes: dataAttributes
+    });
+};
+exports.CenteredCarousel = CenteredCarousel;
+var useSlideshowStyles = (0, _jss).createUseStyles(function(theme) {
+    return {
+        slideshowContainer: {
+            position: 'relative'
+        },
+        slideshow: _objectSpread({
+            display: 'flex',
+            overflowX: 'auto',
+            minWidth: '100%',
+            scrollSnapType: 'x mandatory'
+        }, hideScrollbar, _defineProperty({}, theme.mq.tabletOrSmaller, {
+            margin: function margin(param) {
+                var sideMargin = param.sideMargin;
+                return "0 -".concat(sideMargin, "px");
+            }
+        })),
+        item: {
+            width: '100%',
+            scrollSnapAlign: 'start',
+            flexShrink: 0
+        },
+        arrowButton: _objectSpread({}, arrowButtonStyle(theme), {
+            border: 'none',
+            position: 'absolute',
+            zIndex: 1,
+            top: "calc(50% - ".concat(arrowButtonSize / 2, "px)"),
+            '&.prev': _defineProperty({
+                left: 24
+            }, theme.mq.tabletOrSmaller, {
+                left: 0
+            }),
+            '&.next': _defineProperty({
+                right: 24
+            }, theme.mq.tabletOrSmaller, {
+                right: 0
+            })
+        }),
+        bullets: {
+            position: 'absolute',
+            bottom: 24,
+            display: 'flex',
+            justifyContent: 'center',
+            width: '100%'
+        }
+    };
+});
+var Slideshow = function Slideshow(param) {
+    var items = param.items, withBullets = param.withBullets, autoplay = param.autoplay, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
+    var texts = (0, _hooks).useTheme().texts;
+    var sideMargin = (0, _responsiveLayout).useResonsiveLayoutMargin();
+    var classes = useSlideshowStyles({
+        sideMargin: sideMargin
+    });
+    var carouselRef = React.useRef(null);
+    var ref5 = _slicedToArray(React.useState({
+        scrollLeft: 0,
+        scrollRight: 0
+    }), 2), ref4 = ref5[0], scrollLeft2 = ref4.scrollLeft, scrollRight2 = ref4.scrollRight, setScroll = ref5[1];
+    var goPrev = React.useCallback(function() {
+        var carouselEl = carouselRef.current;
+        if (carouselEl) {
+            carouselEl.scrollBy({
+                left: -carouselEl.clientWidth,
+                behavior: 'smooth'
+            });
+        }
+    }, []);
+    var goNext = React.useCallback(function() {
+        var carouselEl = carouselRef.current;
+        if (carouselEl) {
+            carouselEl.scrollBy({
+                left: carouselEl.clientWidth,
+                behavior: 'smooth'
+            });
+        }
+    }, []);
+    var showNextArrow = scrollRight2 !== 0;
+    var showPrevArrow = scrollLeft2 !== 0;
+    var currentIndex = carouselRef.current ? Math.floor((scrollLeft2 + carouselRef.current.clientWidth / 2) / carouselRef.current.clientWidth) : 0;
+    React.useLayoutEffect(function() {
+        var carouselEl = carouselRef.current;
+        if (carouselEl) {
+            var handleCarouselChange = function handleCarouselChange() {
+                var scrollWidth = carouselEl.scrollWidth, clientWidth = carouselEl.clientWidth;
+                var scrollLeft = Math.round(carouselEl.scrollLeft);
+                var scrollRight = Math.round(scrollWidth - (scrollLeft + clientWidth));
+                setScroll({
+                    scrollLeft: scrollLeft,
+                    scrollRight: scrollRight
+                });
+            };
+            handleCarouselChange();
+            carouselEl.addEventListener('scroll', handleCarouselChange);
+            var unlistenResize = (0, _dom).listenResize(carouselEl, handleCarouselChange);
+            return function() {
+                carouselEl.removeEventListener('scroll', handleCarouselChange);
+                unlistenResize();
+            };
+        }
+    }, [
+        items.length
+    ]);
+    React.useEffect(function() {
+        if (autoplay) {
+            var time = typeof autoplay === 'boolean' ? DEFAULT_AUTOPLAY_TIME : autoplay.time;
+            var loop = typeof autoplay === 'object' && autoplay.loop;
+            var interval = setInterval(function() {
+                if (scrollRight2 !== 0) {
+                    goNext();
+                } else if (loop) {
+                    var ref;
+                    (ref = carouselRef.current) === null || ref === void 0 ? void 0 : ref.scrollTo({
+                        left: 0,
+                        behavior: 'smooth'
+                    });
+                }
+            }, time);
+            return function() {
+                return clearInterval(interval);
+            };
+        }
+    }, [
+        autoplay,
+        goNext,
+        scrollRight2
+    ]);
+    React.useEffect(function() {
+        if (onPageChange) {
+            onPageChange(currentIndex);
+        }
+    }, [
+        currentIndex,
+        onPageChange
+    ]);
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+        className: classes.slideshowContainer
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
+                isInverse: false,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
+                    className: (0, _classnames).default(classes.arrowButton, 'prev'),
+                    "aria-label": texts.carouselPrevButton,
+                    onPress: goPrev,
+                    disabled: !showPrevArrow,
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevronLeftRegular.default, {})
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_image.DisableBorderRadiusProvider, {
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.slideshow,
+                    ref: carouselRef,
+                    children: items.map(function(item, index) {
+                        /*#__PURE__*/ return (0, _jsxRuntime).jsx("div", {
+                            className: classes.item,
+                            children: item
+                        }, index);
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
+                isInverse: false,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
+                    className: (0, _classnames).default(classes.arrowButton, 'next'),
+                    "aria-label": texts.carouselNextButton,
+                    onPress: goNext,
+                    disabled: !showNextArrow,
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevronRightRegular.default, {})
+                })
+            }),
+            withBullets && /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
+                isInverse: true,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.bullets,
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(PageBullets, {
+                        numPages: items.length,
+                        currentIndex: currentIndex
+                    })
+                })
+            })
+        ]
+    })));
+};
+exports.Slideshow = Slideshow;