@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Molecules/Slideshow/Slideshow.js

@@ -1,47 +1,34 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slideshow = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var Image_1 = require("../../Atoms/Image");
-var Button_1 = require("../../Atoms/Button");
-var hooks_2 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
-    var _b, _c;
-    var theme = _a.theme, _d = _a.slidesToShow, slidesToShow = _d === void 0 ? 1 : _d, slideWidth = _a.slideWidth, _e = _a.gap, gap = _e === void 0 ? 16 : _e, _f = _a.overlayNavigation, overlayNavigation = _f === void 0 ? false : _f, showNavigation = _a.showNavigation;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Image_1 = require("../../Atoms/Image");
+const Button_1 = require("../../Atoms/Button");
+const hooks_2 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayNavigation = false, showNavigation }) => {
     return (0, react_1.css)({
         position: 'relative',
         overflow: 'hidden',
         '.ss__slideshow__container': {
             position: 'relative',
-            width: "calc(100% - ".concat(overlayNavigation || !showNavigation ? 0 : 60, "px)"),
+            width: `calc(100% - ${overlayNavigation || !showNavigation ? 0 : 60}px)`,
             margin: 'auto',
             overflow: 'hidden',
             touchAction: 'pan-y pinch-zoom',
         },
         '.ss__slideshow__track': {
             display: 'flex',
-            width: "100%",
+            width: `100%`,
             transition: 'transform 0.3s ease-in-out',
             // Disable transition during dragging
             '&.ss__slideshow__track--dragging': {
@@ -52,24 +39,30 @@ var defaultStyles = function (_a) {
                 justifyContent: 'center',
             },
         },
-        '.ss__slideshow__slide': __assign(__assign({}, (slideWidth
-            ? {
-                maxWidth: "".concat(slideWidth, "px"),
-                minWidth: "".concat(slideWidth, "px"),
-            }
-            : {
-                maxWidth: "calc((100% - ".concat(slidesToShow * gap, "px) / ").concat(slidesToShow, ")"),
-                minWidth: "calc((100% - ".concat(slidesToShow * gap, "px) / ").concat(slidesToShow, ")"),
-            })), { marginLeft: "calc(".concat(gap, "px / 2)"), marginRight: "calc(".concat(gap, "px / 2)"), position: 'relative', 
+        '.ss__slideshow__slide': {
+            ...(slideWidth
+                ? {
+                    maxWidth: `${slideWidth}px`,
+                    minWidth: `${slideWidth}px`,
+                }
+                : {
+                    maxWidth: `calc((100% - ${slidesToShow * gap}px) / ${slidesToShow})`,
+                    minWidth: `calc((100% - ${slidesToShow * gap}px) / ${slidesToShow})`,
+                }),
+            marginLeft: `calc(${gap}px / 2)`,
+            marginRight: `calc(${gap}px / 2)`,
+            position: 'relative',
             // Prevent text selection during drag
-            userSelect: 'none', img: {
+            userSelect: 'none',
+            img: {
                 width: '100%',
                 height: '100%',
                 objectFit: 'cover',
                 display: 'block',
                 // Prevent image dragging
                 pointerEvents: 'none',
-            } }),
+            },
+        },
         '.ss__slideshow__slide--content': {
             display: 'flex',
             alignItems: 'center',
@@ -110,10 +103,10 @@ var defaultStyles = function (_a) {
                 },
             },
             '&--prev': {
-                left: "".concat(overlayNavigation ? 10 : 0, "px"),
+                left: `${overlayNavigation ? 10 : 0}px`,
             },
             '&--next': {
-                right: "".concat(overlayNavigation ? 10 : 0, "px"),
+                right: `${overlayNavigation ? 10 : 0}px`,
             },
         },
         '.ss__slideshow__pagination': {
@@ -135,7 +128,7 @@ var defaultStyles = function (_a) {
                 padding: 0,
                 '&.ss__slideshow__dot--active': {
                     opacity: '0.8',
-                    background: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#000',
+                    background: theme?.variables?.colors?.primary || '#000',
                 },
                 '&:focus-visible': {
                     outline: '-webkit-focus-ring-color auto 1px !important',
@@ -155,11 +148,10 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         treePath: globalTreePath,
         fallbackImage: '//cdn.athoscommerce.net/snap/images/fallback.png',
         autoPlay: false,
@@ -174,79 +166,109 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
         touchDragging: true,
         dragThreshold: 50,
     };
-    var props = (0, utilities_1.mergeProps)('slideshow', globalTheme, defaultProps, properties);
-    var className = props.className, slides = props.slides, fallbackImage = props.fallbackImage, autoPlay = props.autoPlay, autoPlayInterval = props.autoPlayInterval, showNavigation = props.showNavigation, showPagination = props.showPagination, loop = props.loop, alwaysShowNavigation = props.alwaysShowNavigation, slidesToShow = props.slidesToShow, slideImageAlt = props.slideImageAlt, centerInsufficientSlides = props.centerInsufficientSlides, ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, disableStyles = props.disableStyles, slideWidth = props.slideWidth, gap = props.gap, treePath = props.treePath, overlayNavigation = props.overlayNavigation, dragThreshold = props.dragThreshold;
-    var _b = (0, hooks_2.useCustomComponentOverride)('slideshow', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('slideshow', globalTheme, defaultProps, properties);
+    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, slideWidth, gap, treePath, overlayNavigation, dragThreshold, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('slideshow', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var touchDragging = props.touchDragging;
-    var subProps = {
-        Image: __assign(__assign({ 
+    let touchDragging = props.touchDragging;
+    const subProps = {
+        Image: {
             // default props
-            fallback: fallbackImage }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        NextButton: __assign(__assign({ 
+            fallback: fallbackImage,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        NextButton: {
             // default props
-            backgroundColor: overlayNavigation ? 'rgba(255, 255, 255, 0.9)' : undefined, name: 'next' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        PrevButton: __assign(__assign({ 
+            backgroundColor: overlayNavigation ? 'rgba(255, 255, 255, 0.9)' : undefined,
+            name: 'next',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        PrevButton: {
             // default props
-            backgroundColor: overlayNavigation ? 'rgba(255, 255, 255, 0.9)' : undefined, name: 'prev' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        PauseButton: __assign(__assign({ 
+            backgroundColor: overlayNavigation ? 'rgba(255, 255, 255, 0.9)' : undefined,
+            name: 'prev',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        PauseButton: {
             // default props
-            name: 'pause' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        PaginationButton: __assign(__assign({ 
+            name: 'pause',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        PaginationButton: {
             // default props
-            name: 'pagination' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        PaginationCurrentButton: __assign(__assign({ 
+            name: 'pagination',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        PaginationCurrentButton: {
             // default props
-            name: 'pagination-current' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
+            name: 'pagination-current',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
     };
     //fallback in case 0 slidesToMove is passed
-    var slidesToMove = props.slidesToMove;
+    let slidesToMove = props.slidesToMove;
     if (!slidesToMove) {
         slidesToMove = 1;
     }
-    var _c = (0, hooks_1.useState)(0), currentIndex = _c[0], setCurrentIndex = _c[1];
-    var _d = (0, hooks_1.useState)(autoPlay), isPlaying = _d[0], setIsPlaying = _d[1];
-    var _e = (0, hooks_1.useState)(0), containerWidth = _e[0], setContainerWidth = _e[1];
-    var intervalRef = (0, hooks_1.useRef)(null);
-    var slideshowRef = (0, hooks_1.useRef)(null);
-    var trackRef = (0, hooks_1.useRef)(null);
+    const [currentIndex, setCurrentIndex] = (0, hooks_1.useState)(0);
+    const [isPlaying, setIsPlaying] = (0, hooks_1.useState)(autoPlay);
+    const [containerWidth, setContainerWidth] = (0, hooks_1.useState)(0);
+    const intervalRef = (0, hooks_1.useRef)(null);
+    const slideshowRef = (0, hooks_1.useRef)(null);
+    const trackRef = (0, hooks_1.useRef)(null);
     // Track container width for slideWidth-based visible slide calculation
-    (0, hooks_1.useEffect)(function () {
-        var _a;
-        var container = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    (0, hooks_1.useEffect)(() => {
+        const container = trackRef.current?.parentElement;
         if (!container)
             return;
-        var observer = new ResizeObserver(function (entries) {
-            for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-                var entry = entries_1[_i];
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
                 setContainerWidth(entry.contentRect.width);
             }
         });
         observer.observe(container);
         setContainerWidth(container.offsetWidth);
-        return function () { return observer.disconnect(); };
+        return () => observer.disconnect();
     }, []);
     // Touch/Drag state
-    var _f = (0, hooks_1.useState)(false), isDragging = _f[0], setIsDragging = _f[1];
-    var _g = (0, hooks_1.useState)(0), startX = _g[0], setStartX = _g[1];
-    var _h = (0, hooks_1.useState)(0), currentX = _h[0], setCurrentX = _h[1];
-    var _j = (0, hooks_1.useState)(0), dragOffset = _j[0], setDragOffset = _j[1];
+    const [isDragging, setIsDragging] = (0, hooks_1.useState)(false);
+    const [startX, setStartX] = (0, hooks_1.useState)(0);
+    const [currentX, setCurrentX] = (0, hooks_1.useState)(0);
+    const [dragOffset, setDragOffset] = (0, hooks_1.useState)(0);
     // Normalize slides to SlideshowSlide format
-    var normalizedSlides = slides.map(function (slide, index) {
+    const normalizedSlides = slides.map((slide, index) => {
         if (typeof slide === 'string') {
             // String URL
             return { src: slide };
@@ -255,7 +277,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
             // This is a JSX element (has props and type properties)
             return {
                 content: slide,
-                alt: "Slide ".concat(index + 1),
+                alt: `Slide ${index + 1}`,
             };
         }
         else if (slide && typeof slide === 'object') {
@@ -266,31 +288,31 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
             // Fallback for any other type
             return {
                 content: slide,
-                alt: "Slide ".concat(index + 1),
+                alt: `Slide ${index + 1}`,
             };
         }
     });
     // slide calculations
-    var totalSlides = normalizedSlides.length;
+    const totalSlides = normalizedSlides.length;
     // When slideWidth is provided, compute how many slides fit in the container;
     // otherwise fall back to the slidesToShow prop.
     // Include gap in the calculation since each slide takes (slideWidth + gap) pixels
-    var computedSlidesToShow = slideWidth && containerWidth > 0 ? Math.max(1, Math.floor(containerWidth / (slideWidth + (gap !== null && gap !== void 0 ? gap : 0)))) : slidesToShow !== null && slidesToShow !== void 0 ? slidesToShow : 4;
-    var visibleSlides = Math.min(computedSlidesToShow, totalSlides);
-    var maxIndex = Math.max(0, totalSlides - visibleSlides);
+    const computedSlidesToShow = slideWidth && containerWidth > 0 ? Math.max(1, Math.floor(containerWidth / (slideWidth + (gap ?? 0)))) : slidesToShow ?? 4;
+    const visibleSlides = Math.min(computedSlidesToShow, totalSlides);
+    const maxIndex = Math.max(0, totalSlides - visibleSlides);
     // Calculate slide groups for pagination
-    var slideGroups = [];
-    for (var i = 0; i <= maxIndex; i += slidesToMove) {
+    const slideGroups = [];
+    for (let i = 0; i <= maxIndex; i += slidesToMove) {
         slideGroups.push(i);
     }
-    var totalDots = slideGroups.length;
-    var currentDotIndex = slideGroups.findIndex(function (groupStart) { return currentIndex >= groupStart && currentIndex < groupStart + slidesToMove; });
+    const totalDots = slideGroups.length;
+    const currentDotIndex = slideGroups.findIndex((groupStart) => currentIndex >= groupStart && currentIndex < groupStart + slidesToMove);
     // Auto-play functionality
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         if (isPlaying && normalizedSlides.length > computedSlidesToShow && !isDragging) {
-            intervalRef.current = setInterval(function () {
-                setCurrentIndex(function (prevIndex) {
-                    var nextIndex = prevIndex + slidesToMove;
+            intervalRef.current = setInterval(() => {
+                setCurrentIndex((prevIndex) => {
+                    const nextIndex = prevIndex + slidesToMove;
                     if (loop) {
                         return nextIndex > maxIndex ? 0 : nextIndex;
                     }
@@ -303,7 +325,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
                     }
                 });
             }, autoPlayInterval);
-            return function () {
+            return () => {
                 if (intervalRef.current) {
                     clearInterval(intervalRef.current);
                 }
@@ -320,7 +342,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
         touchDragging = false;
     }
     // Touch/Mouse event handlers for dragging
-    var handleDragStart = function (clientX) {
+    const handleDragStart = (clientX) => {
         if (!touchDragging)
             return;
         setIsPlaying(false);
@@ -332,21 +354,20 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
             clearInterval(intervalRef.current);
         }
     };
-    var handleDragMove = function (clientX) {
+    const handleDragMove = (clientX) => {
         if (!isDragging || !touchDragging)
             return;
         setCurrentX(clientX);
-        var diff = clientX - startX;
+        const diff = clientX - startX;
         setDragOffset(diff);
     };
-    var handleDragEnd = function () {
-        var _a, _b;
+    const handleDragEnd = () => {
         if (!isDragging || !touchDragging)
             return;
-        var diff = currentX - startX;
-        var trackContainerWidth = ((_b = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
-        var slideWidthPx = trackContainerWidth / visibleSlides;
-        var threshold = Math.min(dragThreshold, slideWidthPx * 0.3); // 30% of slide width or dragThreshold, whichever is smaller
+        const diff = currentX - startX;
+        const trackContainerWidth = trackRef.current?.parentElement?.offsetWidth || 0;
+        const slideWidthPx = trackContainerWidth / visibleSlides;
+        const threshold = Math.min(dragThreshold, slideWidthPx * 0.3); // 30% of slide width or dragThreshold, whichever is smaller
         if (Math.abs(diff) > threshold) {
             if (diff > 0 && (loop || currentIndex > 0)) {
                 // Dragged right - go to previous
@@ -361,9 +382,9 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
         setDragOffset(0);
         // Resume autoplay if it was playing
         if (isPlaying && normalizedSlides.length > computedSlidesToShow) {
-            intervalRef.current = setInterval(function () {
-                setCurrentIndex(function (prevIndex) {
-                    var nextIndex = prevIndex + slidesToMove;
+            intervalRef.current = setInterval(() => {
+                setCurrentIndex((prevIndex) => {
+                    const nextIndex = prevIndex + slidesToMove;
                     if (loop) {
                         return nextIndex > maxIndex ? 0 : nextIndex;
                     }
@@ -378,31 +399,31 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
             }, autoPlayInterval);
         }
     };
-    var handleMouseMove = function (event) {
+    const handleMouseMove = (event) => {
         handleDragMove(event.clientX);
     };
     // Add/remove mouse event listeners
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         if (isDragging && touchDragging) {
             document.addEventListener('mousemove', handleMouseMove);
             document.addEventListener('mouseup', handleDragEnd);
-            return function () {
+            return () => {
                 document.removeEventListener('mousemove', handleMouseMove);
                 document.removeEventListener('mouseup', handleDragEnd);
             };
         }
     }, [isDragging, touchDragging]);
     // Pause autoplay on hover or focus
-    var handleMouseEnter = function () {
+    const handleMouseEnter = () => {
         if (isPlaying && intervalRef.current && !isDragging) {
             clearInterval(intervalRef.current);
         }
     };
-    var handleMouseLeave = function () {
+    const handleMouseLeave = () => {
         if (isPlaying && normalizedSlides.length > computedSlidesToShow && !isDragging) {
-            intervalRef.current = setInterval(function () {
-                setCurrentIndex(function (prevIndex) {
-                    var nextIndex = prevIndex + slidesToMove;
+            intervalRef.current = setInterval(() => {
+                setCurrentIndex((prevIndex) => {
+                    const nextIndex = prevIndex + slidesToMove;
                     if (loop) {
                         return nextIndex > maxIndex ? 0 : nextIndex;
                     }
@@ -418,20 +439,20 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
         }
     };
     // Handle image click
-    var handleSlideClick = function (slide, index) {
+    const handleSlideClick = (slide, index) => {
         if (slide.onClick && !isDragging) {
             slide.onClick(slide, index);
         }
     };
     // Handle image keyboard interaction
-    var handleSlideKeyDown = function (event, slide, index) {
+    const handleSlideKeyDown = (event, slide, index) => {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             handleSlideClick(slide, index);
         }
     };
     // Keyboard navigation
-    var handleKeyDown = function (event) {
+    const handleKeyDown = (event) => {
         switch (event.key) {
             case 'ArrowLeft':
                 event.preventDefault();
@@ -460,9 +481,9 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
                 break;
         }
     };
-    var goToPrevious = function () {
-        setCurrentIndex(function (prevIndex) {
-            var newIndex;
+    const goToPrevious = () => {
+        setCurrentIndex((prevIndex) => {
+            let newIndex;
             if (loop) {
                 newIndex = prevIndex - slidesToMove < 0 ? maxIndex : prevIndex - slidesToMove;
             }
@@ -472,9 +493,9 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
             return newIndex;
         });
     };
-    var goToNext = function () {
-        setCurrentIndex(function (prevIndex) {
-            var newIndex;
+    const goToNext = () => {
+        setCurrentIndex((prevIndex) => {
+            let newIndex;
             if (loop) {
                 newIndex = prevIndex + slidesToMove > maxIndex ? 0 : prevIndex + slidesToMove;
             }
@@ -484,24 +505,24 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
             return newIndex;
         });
     };
-    var goToSlide = function (dotIndex) {
-        var targetIndex = slideGroups[dotIndex] || 0;
+    const goToSlide = (dotIndex) => {
+        const targetIndex = slideGroups[dotIndex] || 0;
         setCurrentIndex(targetIndex);
     };
-    var togglePlayPause = function () {
+    const togglePlayPause = () => {
         setIsPlaying(!isPlaying);
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     // Don't render if no slides
     if (!normalizedSlides || normalizedSlides.length === 0) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
     // Simplified transform calculation
-    var translateX;
-    var translateUnit;
+    let translateX;
+    let translateUnit;
     if (slideWidth) {
         // Fixed-width mode: translate by pixel amounts (slideWidth + gap per slide)
-        var slideStepPx = slideWidth + (gap !== null && gap !== void 0 ? gap : 0);
+        const slideStepPx = slideWidth + (gap ?? 0);
         translateX = -(currentIndex * slideStepPx);
         translateUnit = 'px';
         // Apply drag offset
@@ -511,21 +532,21 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
     }
     else {
         // Percentage mode: each slide takes an equal share of the container
-        var slidePercentage = 100 / visibleSlides;
+        const slidePercentage = 100 / visibleSlides;
         translateX = -(currentIndex * slidePercentage);
         translateUnit = '%';
         // Apply drag offset
         if (isDragging && trackRef.current) {
-            var containerWidth_1 = ((_a = trackRef.current.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
-            var dragPercentage = (dragOffset / containerWidth_1) * 100;
+            const containerWidth = trackRef.current.parentElement?.offsetWidth || 0;
+            const dragPercentage = (dragOffset / containerWidth) * 100;
             translateX += dragPercentage;
         }
     }
     // Determine if navigation should be disabled
-    var isPrevDisabled = !loop && currentIndex === 0;
-    var isNextDisabled = !loop && currentIndex >= maxIndex;
+    const isPrevDisabled = !loop && currentIndex === 0;
+    const isNextDisabled = !loop && currentIndex >= maxIndex;
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         pauseButton: {
             value: isPlaying ? 'Pause' : 'Play',
             attributes: {
@@ -534,48 +555,48 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
         },
         nextButton: {
             attributes: {
-                'aria-label': "Next slides".concat(isNextDisabled ? ' (disabled)' : ''),
+                'aria-label': `Next slides${isNextDisabled ? ' (disabled)' : ''}`,
             },
         },
         prevButton: {
             attributes: {
-                'aria-label': "Previous slides".concat(isPrevDisabled ? ' (disabled)' : ''),
+                'aria-label': `Previous slides${isPrevDisabled ? ' (disabled)' : ''}`,
             },
         },
         srInstructions: {
-            value: "Use arrow keys to navigate slides. Press spacebar to pause autoplay. Press home or end to go to first or last slide group.".concat(' ').concat(touchDragging && 'Swipe left or right to navigate on touch devices.'),
+            value: `Use arrow keys to navigate slides. Press spacebar to pause autoplay. Press home or end to go to first or last slide group.${' '}${touchDragging && 'Swipe left or right to navigate on touch devices.'}`,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_2.useLang)(lang, {
-        isPlaying: isPlaying,
-        isNextDisabled: isNextDisabled,
-        isPrevDisabled: isPrevDisabled,
-    });
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__slideshow', className), ref: slideshowRef, role: "region", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-roledescription": "slideshow", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, 
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {
+        isPlaying,
+        isNextDisabled,
+        isPrevDisabled,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__slideshow', className), ref: slideshowRef, role: "region", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-roledescription": "slideshow", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, 
             // @ts-ignore - ignore
-            onKeyDown: handleKeyDown, tabIndex: 0, children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__slideshow__sr-only" }, mergedLang.srInstructions.all)), (0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__container", children: (0, jsx_runtime_1.jsx)("div", { ref: trackRef, className: (0, classnames_1.default)('ss__slideshow__track', {
+            onKeyDown: handleKeyDown, tabIndex: 0, children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__sr-only", ...mergedLang.srInstructions.all }), (0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__container", children: (0, jsx_runtime_1.jsx)("div", { ref: trackRef, className: (0, classnames_1.default)('ss__slideshow__track', {
                             'ss__slideshow__track--dragging': isDragging,
                             'ss__slideshow__track--centered': centerInsufficientSlides && totalSlides <= computedSlidesToShow,
-                        }), style: { transform: "translateX(".concat(translateX).concat(translateUnit, ")") }, role: "group", "aria-label": "Slide group ".concat(currentIndex, " of ").concat(totalDots), 
+                        }), style: { transform: `translateX(${translateX}${translateUnit})` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, 
                         // Touch events
                         // @ts-ignore - touch events
-                        onTouchStart: touchDragging ? function (event) { return handleDragStart(event.touches[0]); } : undefined, 
+                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0]) : undefined, 
                         // @ts-ignore - touch events
                         onTouchMove: touchDragging
-                            ? function (event) {
+                            ? (event) => {
                                 if (isDragging) {
                                     event.preventDefault(); // Prevent scrolling while dragging
                                 }
-                                var touch = event.touches[0];
+                                const touch = event.touches[0];
                                 handleDragMove(touch.clientX);
                             }
                             : undefined, onTouchEnd: touchDragging ? handleDragEnd : undefined, 
                         // Mouse events (for desktop dragging)
                         // @ts-ignore - mouse events
                         onMouseDown: touchDragging
-                            ? function (event) {
+                            ? (event) => {
                                 event.preventDefault();
                                 handleDragStart(event.clientX);
                             }
@@ -585,48 +606,48 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)(function (properties) {
                         onMouseUp: touchDragging ? handleDragEnd : undefined, 
                         // Mouse events (for desktop dragging)
                         // @ts-ignore - mouse events
-                        onMouseMove: touchDragging ? handleMouseMove : undefined, children: normalizedSlides.map(function (slide, index) {
-                            var isVisible = index >= currentIndex && index < currentIndex + computedSlidesToShow;
-                            var hasClickHandler = !!slide.onClick;
-                            var hasContent = !!slide.content;
-                            var imageAlt = slide.alt || slideImageAlt || "Image ".concat(index + 1);
-                            var defaultLang = {
+                        onMouseMove: touchDragging ? handleMouseMove : undefined, children: normalizedSlides.map((slide, index) => {
+                            const isVisible = index >= currentIndex && index < currentIndex + computedSlidesToShow;
+                            const hasClickHandler = !!slide.onClick;
+                            const hasContent = !!slide.content;
+                            const imageAlt = slide.alt || slideImageAlt || `Image ${index + 1}`;
+                            const defaultLang = {
                                 slide: {
                                     attributes: {
-                                        'aria-label': hasClickHandler ? "Click to view ".concat(imageAlt) : "".concat(imageAlt, " ").concat(index + 1, " of ").concat(normalizedSlides.length),
+                                        'aria-label': hasClickHandler ? `Click to view ${imageAlt}` : `${imageAlt} ${index + 1} of ${normalizedSlides.length}`,
                                     },
                                 },
                             };
                             //deep merge with props.lang
-                            var slideLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-                            var slideLangObj = (0, hooks_2.useLang)(slideLang, {
-                                hasClickHandler: hasClickHandler,
-                                imageAlt: imageAlt,
-                                index: index,
+                            const slideLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                            const slideLangObj = (0, hooks_2.useLang)(slideLang, {
+                                hasClickHandler,
+                                imageAlt,
+                                index,
                                 slidesLength: normalizedSlides.length,
-                            });
-                            return ((0, jsx_runtime_1.jsx)("div", __assign({}, slideLangObj.slide.all, { className: (0, classnames_1.default)('ss__slideshow__slide', {
+                            }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                            return ((0, jsx_runtime_1.jsx)("div", { ...slideLangObj.slide.all, className: (0, classnames_1.default)('ss__slideshow__slide', {
                                     'ss__slideshow__slide--clickable': hasClickHandler,
                                     'ss__slideshow__slide--content': hasContent,
-                                }), role: hasClickHandler ? 'button' : hasContent ? 'presentation' : 'img', "aria-hidden": !isVisible, tabIndex: hasClickHandler && isVisible ? 0 : -1, onClick: hasClickHandler ? function () { return handleSlideClick(slide, index); } : undefined, onKeyDown: hasClickHandler ? function (e) { return handleSlideKeyDown(e, slide, index); } : undefined, children: hasContent ? slide.content : (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.Image, { src: slide.src || fallbackImage, alt: isVisible ? imageAlt : '' })) }), index));
-                        }) }) }), Boolean(alwaysShowNavigation || (showNavigation && normalizedSlides.length > computedSlidesToShow)) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--prev", children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ icon: "angle-left", className: 'ss__slideshow__prev', disabled: isPrevDisabled }, mergedLang.prevButton.all, subProps.PrevButton, { onClick: goToPrevious })) }), (0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--next", children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: 'ss__slideshow__next', icon: "angle-right", disabled: isNextDisabled }, mergedLang.nextButton.all, subProps.NextButton, { onClick: goToNext })) })] })), showPagination && totalSlides > visibleSlides && ((0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__pagination", role: "tablist", "aria-label": "Slide navigation", children: slideGroups.map(function (_, index) {
-                        var defaultLang = {
+                                }), role: hasClickHandler ? 'button' : hasContent ? 'presentation' : 'img', "aria-hidden": !isVisible, tabIndex: hasClickHandler && isVisible ? 0 : -1, onClick: hasClickHandler ? () => handleSlideClick(slide, index) : undefined, onKeyDown: hasClickHandler ? (e) => handleSlideKeyDown(e, slide, index) : undefined, children: hasContent ? slide.content : (0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.Image, src: slide.src || fallbackImage, alt: isVisible ? imageAlt : '' }) }, index));
+                        }) }) }), Boolean(alwaysShowNavigation || (showNavigation && normalizedSlides.length > computedSlidesToShow)) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--prev", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: "angle-left", className: 'ss__slideshow__prev', disabled: isPrevDisabled, ...mergedLang.prevButton.all, ...subProps.PrevButton, onClick: goToPrevious }) }), (0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__navigation ss__slideshow__navigation--next", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__slideshow__next', icon: "angle-right", disabled: isNextDisabled, ...mergedLang.nextButton.all, ...subProps.NextButton, onClick: goToNext }) })] })), showPagination && totalSlides > visibleSlides && ((0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__pagination", role: "tablist", "aria-label": "Slide navigation", children: slideGroups.map((_, index) => {
+                        const defaultLang = {
                             paginationButton: {
                                 attributes: {
-                                    'aria-label': "Go to slide group ".concat(index + 1, " of ").concat(totalDots),
+                                    'aria-label': `Go to slide group ${index + 1} of ${totalDots}`,
                                 },
                             },
                         };
                         //deep merge with props.lang
-                        var paginationLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-                        var paginationLangObj = (0, hooks_2.useLang)(paginationLang, {
-                            index: index,
-                            totalDots: totalDots,
-                        });
-                        var selected = currentDotIndex === index;
-                        var subpropsToUse = selected ? subProps.PaginationCurrentButton : subProps.PaginationButton;
-                        return ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: (0, classnames_1.default)('ss__slideshow__dot', {
+                        const paginationLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                        const paginationLangObj = (0, hooks_2.useLang)(paginationLang, {
+                            index,
+                            totalDots,
+                        }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                        const selected = currentDotIndex === index;
+                        const subpropsToUse = selected ? subProps.PaginationCurrentButton : subProps.PaginationButton;
+                        return ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: (0, classnames_1.default)('ss__slideshow__dot', {
                                 'ss__slideshow__dot--active': selected,
-                            }), onClick: function () { return goToSlide(index); }, "aria-selected": selected }, paginationLangObj.paginationButton.all, subpropsToUse, { children: (0, jsx_runtime_1.jsx)("span", { className: 'ss__slideshow__dot-inner' }) }), index));
-                    }) })), autoPlay && ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "ss__slideshow__sr-only" }, subProps.PauseButton, { onClick: togglePlayPause }, mergedLang.pauseButton.all)))] })) }));
+                            }), onClick: () => goToSlide(index), "aria-selected": selected, ...paginationLangObj.paginationButton.all, ...subpropsToUse, children: (0, jsx_runtime_1.jsx)("span", { className: 'ss__slideshow__dot-inner' }) }, index));
+                    }) })), autoPlay && ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: "ss__slideshow__sr-only", ...subProps.PauseButton, onClick: togglePlayPause, ...mergedLang.pauseButton.all }))] }) }));
 });