@wix/editor-react-components 1.2153.0

package/dist/site/components/Slideshow/component.js

@@ -0,0 +1,740 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { c as clsx } from "../chunks/clsx.js";
+import { M as MOVEMENT_DIRECTION, A as AUTOPLAY_STATE, s as semanticClassNames, a as slideshowDataDefaults, S as SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT } from "../chunks/Slideshow.semanticClassNames.js";
+import { B as Button } from "../chunks/Button.js";
+import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { d as directionStyles } from "../chunks/direction.module.js";
+import { useService } from "@wix/services-manager-react";
+import { d as definitionExports } from "../chunks/index2.js";
+const validateActiveSlide = (activeSlide, slidesLength) => {
+  if (activeSlide === void 0) {
+    return void 0;
+  }
+  if (slidesLength === 0) {
+    return 0;
+  }
+  if (activeSlide < 0) {
+    return 0;
+  }
+  if (activeSlide >= slidesLength) {
+    return Math.max(0, slidesLength - 1);
+  }
+  return activeSlide;
+};
+const useActiveSlideTracker = ({
+  slides,
+  activeSlide,
+  autoplay,
+  autoplayState,
+  isPaused,
+  autoplayDelay
+}) => {
+  const [activeSlideIndex, setActiveSlideIndex] = useState(() => {
+    const validated = validateActiveSlide(activeSlide, slides.length);
+    return validated !== void 0 ? validated : 0;
+  });
+  const [lastActiveSlideIndex, setLastActiveSlideIndex] = useState(-1);
+  const [movementDirection, setMovementDirection] = useState(
+    MOVEMENT_DIRECTION.FORWARD
+  );
+  const timeoutRef = useRef(null);
+  const isControlledMode = activeSlide !== void 0;
+  const prevSlideIndex = (activeSlideIndex - 1 + slides.length) % slides.length;
+  const nextSlideIndex = (activeSlideIndex + 1) % slides.length;
+  const resetTimeout = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  };
+  useEffect(() => {
+    if (activeSlide !== void 0) {
+      const validated = validateActiveSlide(activeSlide, slides.length);
+      if (validated !== void 0) {
+        setActiveSlideIndex((prev2) => {
+          if (prev2 !== validated) {
+            setLastActiveSlideIndex(prev2);
+            return validated;
+          }
+          return prev2;
+        });
+      }
+    }
+  }, [activeSlide, slides.length]);
+  const goToSlide = useCallback(
+    (i, direction) => {
+      if (isControlledMode || i === activeSlideIndex) {
+        return;
+      }
+      resetTimeout();
+      setActiveSlideIndex(i);
+      setLastActiveSlideIndex(activeSlideIndex);
+      if (direction) {
+        setMovementDirection(direction);
+      } else {
+        setMovementDirection(
+          i > activeSlideIndex ? MOVEMENT_DIRECTION.FORWARD : MOVEMENT_DIRECTION.BACKWARD
+        );
+      }
+    },
+    [isControlledMode, activeSlideIndex]
+  );
+  useEffect(() => {
+    const delayInMS = autoplayDelay * 1e3;
+    if (autoplayState === AUTOPLAY_STATE.RUNNING && !isPaused) {
+      timeoutRef.current = setTimeout(() => {
+        goToSlide(nextSlideIndex, MOVEMENT_DIRECTION.FORWARD);
+      }, delayInMS);
+    }
+    return () => resetTimeout();
+  }, [
+    autoplayState,
+    activeSlideIndex,
+    autoplayDelay,
+    slides.length,
+    autoplay,
+    goToSlide,
+    nextSlideIndex,
+    isPaused
+  ]);
+  return {
+    activeSlideIndex,
+    lastActiveSlideIndex,
+    prevSlideIndex,
+    nextSlideIndex,
+    movementDirection,
+    goToSlide
+  };
+};
+const useVisibilityProps = (props) => {
+  return useMemo(() => {
+    const shouldHide = props.isHidden || props.hidden;
+    if (shouldHide) {
+      return {
+        style: { display: "none" },
+        "aria-hidden": true
+      };
+    }
+    return {};
+  }, [props.isHidden, props.hidden]);
+};
+const slideshowContainer = "slideshowContainer__HjS5a";
+const slideshowWrapper = "slideshowWrapper__d5icE";
+const slide = "slide__r2Vp3";
+const active = "active__a4phe";
+const prevActive = "prevActive__TNbNm";
+const enterForward = "enterForward__vdVqS";
+const enterBackward = "enterBackward__ixvbv";
+const exitForward = "exitForward__qACR9";
+const exitBackward = "exitBackward__gUr-x";
+const transitionTypeSlide = "transition-type-slide__3Jkvw";
+const transitionDirectionRtl = "transition-direction-rtl__JQuxb";
+const slideInFromRight = "slideInFromRight__z4LnX";
+const slideInFromLeft = "slideInFromLeft__ZMs8O";
+const slideOutToLeft = "slideOutToLeft__3L6c3";
+const slideOutToRight = "slideOutToRight__AtwuU";
+const transitionDirectionLtr = "transition-direction-ltr__gXFCo";
+const transitionDirectionTtb = "transition-direction-ttb__ttQ-u";
+const slideInFromTop = "slideInFromTop__5PVNZ";
+const slideInFromBottom = "slideInFromBottom__Ypn-t";
+const slideOutToBottom = "slideOutToBottom__2v8F0";
+const slideOutToTop = "slideOutToTop__rssJz";
+const transitionDirectionBtt = "transition-direction-btt__DxD7X";
+const transitionTypeCrossFade = "transition-type-cross-fade__KwqMd";
+const fadeIn = "fadeIn__CsW3Y";
+const fadeOut = "fadeOut__w2xZR";
+const transitionTypeInOut = "transition-type-in-out__W25dJ";
+const buttons = "buttons__Fx7T8";
+const btnWrapper = "btnWrapper__T0ETG";
+const button = "button__y4atu";
+const prev = "prev__qz5A6";
+const rtlButtons = "rtlButtons__NjLjy";
+const slideIndicators = "slideIndicators__hkD2s";
+const modeAll = "modeAll__zeM-R";
+const indicator = "indicator__niATk";
+const distance0 = "distance0__AQG1R";
+const modeMax5 = "modeMax5__lcwad";
+const distance1 = "distance1__dz5-d";
+const distance2 = "distance2__1bx8G";
+const indicatorButton = "indicatorButton__cC3tw";
+const pauseButton = "pauseButton__Z1YBT";
+const controlsWrapper = "controlsWrapper__Hm0pN";
+const controlsWrapperContent = "controlsWrapperContent__4zh-j";
+const styles = {
+  slideshowContainer,
+  slideshowWrapper,
+  slide,
+  active,
+  prevActive,
+  enterForward,
+  enterBackward,
+  exitForward,
+  exitBackward,
+  "transition-type-slide": "transition-type-slide__3Jkvw",
+  transitionTypeSlide,
+  "transition-direction-rtl": "transition-direction-rtl__JQuxb",
+  transitionDirectionRtl,
+  slideInFromRight,
+  slideInFromLeft,
+  slideOutToLeft,
+  slideOutToRight,
+  "transition-direction-ltr": "transition-direction-ltr__gXFCo",
+  transitionDirectionLtr,
+  "transition-direction-ttb": "transition-direction-ttb__ttQ-u",
+  transitionDirectionTtb,
+  slideInFromTop,
+  slideInFromBottom,
+  slideOutToBottom,
+  slideOutToTop,
+  "transition-direction-btt": "transition-direction-btt__DxD7X",
+  transitionDirectionBtt,
+  "transition-type-cross-fade": "transition-type-cross-fade__KwqMd",
+  transitionTypeCrossFade,
+  fadeIn,
+  fadeOut,
+  "transition-type-in-out": "transition-type-in-out__W25dJ",
+  transitionTypeInOut,
+  buttons,
+  btnWrapper,
+  button,
+  prev,
+  rtlButtons,
+  slideIndicators,
+  modeAll,
+  indicator,
+  distance0,
+  modeMax5,
+  distance1,
+  distance2,
+  indicatorButton,
+  pauseButton,
+  controlsWrapper,
+  controlsWrapperContent
+};
+const NavigationButtons = ({
+  nextDisabled,
+  onNextClick,
+  prevDisabled,
+  onPrevClick,
+  parentDirection,
+  navigationButtonsProps,
+  siteDirection
+}) => {
+  var _a;
+  const direction = navigationButtonsProps == null ? void 0 : navigationButtonsProps.direction;
+  const isRTL = (direction || parentDirection || siteDirection) === "rtl";
+  const animatedIcon = (_a = navigationButtonsProps == null ? void 0 : navigationButtonsProps.elementProps) == null ? void 0 : _a.animatedIcon;
+  if (!(animatedIcon == null ? void 0 : animatedIcon.svg)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        styles.buttons,
+        { [styles.rtlButtons]: isRTL },
+        semanticClassNames.buttons
+      ),
+      ...direction && { dir: direction },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: onPrevClick,
+            className: clsx(
+              styles.button,
+              styles.prev,
+              semanticClassNames.navigationButtons
+            ),
+            disabled: prevDisabled,
+            ...navigationButtonsProps,
+            a11y: {
+              ariaLabel: "Previous"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: onNextClick,
+            className: clsx(
+              styles.button,
+              semanticClassNames.navigationButtons
+            ),
+            disabled: nextDisabled,
+            ...navigationButtonsProps,
+            a11y: {
+              ariaLabel: "Next"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+const MAX_DYNAMIC_INDICATORS_ON_EACH_SIDE = 2;
+function getDynamicIndicators(totalSlides, activeIndex) {
+  const indicators = [];
+  const minIndex = Math.max(
+    0,
+    activeIndex - MAX_DYNAMIC_INDICATORS_ON_EACH_SIDE
+  );
+  const maxIndex = Math.min(
+    totalSlides - 1,
+    activeIndex + MAX_DYNAMIC_INDICATORS_ON_EACH_SIDE
+  );
+  for (let i = minIndex; i <= maxIndex; i++) {
+    indicators.push({
+      slideIndex: i,
+      distanceFromActiveSlide: Math.abs(i - activeIndex)
+    });
+  }
+  return indicators;
+}
+function getStaticIndicators(numberOfSlides, activeSlideIndex) {
+  return Array.from({ length: numberOfSlides }, (_, i) => ({
+    slideIndex: i,
+    distanceFromActiveSlide: Math.abs(i - activeSlideIndex)
+  }));
+}
+const useSlideIndicators = ({
+  numberOfSlides,
+  activeSlideIndex,
+  indicatorMode,
+  isRTL,
+  onSlideClick
+}) => {
+  const buttonRefs = useRef(/* @__PURE__ */ new Map());
+  const wasKeyboardNavigationRef = useRef(false);
+  const indicators = useMemo(() => {
+    if (numberOfSlides === 0) {
+      return [];
+    }
+    const safeActiveIndex = Math.max(
+      0,
+      Math.min(activeSlideIndex, numberOfSlides - 1)
+    );
+    if (indicatorMode === "all") {
+      return getStaticIndicators(numberOfSlides, safeActiveIndex);
+    }
+    return getDynamicIndicators(numberOfSlides, safeActiveIndex);
+  }, [indicatorMode, numberOfSlides, activeSlideIndex]);
+  useEffect(() => {
+    var _a;
+    if (wasKeyboardNavigationRef.current) {
+      (_a = buttonRefs.current.get(activeSlideIndex)) == null ? void 0 : _a.focus();
+      wasKeyboardNavigationRef.current = false;
+    }
+  }, [activeSlideIndex]);
+  const handleArrowNavigation = useCallback(
+    (event) => {
+      const keyToDirection = {
+        ArrowLeft: isRTL ? 1 : -1,
+        ArrowRight: isRTL ? -1 : 1,
+        ArrowUp: -1,
+        ArrowDown: 1
+      };
+      const delta = keyToDirection[event.key];
+      if (!delta) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const nextIndex = (activeSlideIndex + delta + numberOfSlides) % numberOfSlides;
+      wasKeyboardNavigationRef.current = true;
+      onSlideClick(nextIndex);
+    },
+    [isRTL, numberOfSlides, activeSlideIndex, onSlideClick]
+  );
+  const registerButtonRef = useCallback(
+    (slideIndex, element) => {
+      if (element) {
+        buttonRefs.current.set(slideIndex, element);
+      } else {
+        buttonRefs.current.delete(slideIndex);
+      }
+    },
+    []
+  );
+  return { indicators, handleArrowNavigation, registerButtonRef };
+};
+const SlideIndicators = ({
+  numberOfSlides,
+  onSlideClick,
+  activeSlideIndex,
+  slideIndicatorsProps,
+  parentDirection,
+  siteDirection
+}) => {
+  const { indicatorMode = "max-5", direction } = slideIndicatorsProps || {};
+  const isRTL = (direction || parentDirection || siteDirection) === "rtl";
+  const { indicators, handleArrowNavigation, registerButtonRef } = useSlideIndicators({
+    numberOfSlides,
+    activeSlideIndex,
+    indicatorMode,
+    isRTL,
+    onSlideClick
+  });
+  if (indicators.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: clsx(
+        styles.slideIndicators,
+        {
+          [styles.modeAll]: indicatorMode === "all",
+          [styles.modeMax5]: indicatorMode === "max-5"
+        },
+        semanticClassNames.pagination
+      ),
+      ...direction && { dir: direction },
+      children: indicators.map(({ slideIndex, distanceFromActiveSlide }) => {
+        const isActive = slideIndex === activeSlideIndex;
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (element) => registerButtonRef(slideIndex, element),
+            "aria-label": `${slideIndex + 1} of ${numberOfSlides}`,
+            onClick: () => onSlideClick(slideIndex),
+            onKeyDown: handleArrowNavigation,
+            className: styles.indicatorButton,
+            ...!isActive && { tabIndex: -1 },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: clsx(
+                  styles.indicator,
+                  styles[`distance${distanceFromActiveSlide}`]
+                )
+              }
+            )
+          }
+        ) }, slideIndex);
+      })
+    }
+  );
+};
+const PlayIcon = () => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "11.5", fill: "white", stroke: "black" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9.11923 17.4383L9.11916 17.4383C8.85811 17.6003 8.5 17.4181 8.5 17.0757V6.92427C8.5 6.58188 8.85811 6.39972 9.11916 6.56171L9.1192 6.56173L17.3014 11.6379L17.3018 11.6382C17.5657 11.8015 17.5666 12.1984 17.3013 12.3631L9.11923 17.4383Z",
+            stroke: "black"
+          }
+        )
+      ]
+    }
+  );
+};
+const PauseIcon = () => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "11.5", fill: "white", stroke: "black" }),
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "7", width: "1", height: "10", rx: "0.5", fill: "black" }),
+        /* @__PURE__ */ jsx("rect", { x: "14", y: "7", width: "1", height: "10", rx: "0.5", fill: "black" })
+      ]
+    }
+  );
+};
+const PauseButton = ({
+  testId,
+  className,
+  isPaused,
+  pauseAriaLabel,
+  resumeAriaLabel,
+  ariaControls,
+  onPause = () => {
+  },
+  onResume = () => {
+  },
+  buttonRef
+}) => {
+  const handleStateChange = useMemo(
+    () => isPaused ? onResume : onPause,
+    [isPaused, onResume, onPause]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-testid": testId,
+      ref: buttonRef,
+      className: clsx(className, styles.pauseButton),
+      type: "button",
+      "aria-label": isPaused ? resumeAriaLabel : pauseAriaLabel,
+      "aria-pressed": isPaused,
+      "aria-controls": ariaControls,
+      onClick: handleStateChange,
+      children: isPaused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {})
+    }
+  );
+};
+const Slideshow = (props) => {
+  var _a, _b;
+  const {
+    id,
+    className,
+    autoplay = slideshowDataDefaults.autoplay,
+    loop = slideshowDataDefaults.loop,
+    autoplayDelay = slideshowDataDefaults.autoplayDelay,
+    pauseOnHover = slideshowDataDefaults.pauseOnHover,
+    transitionType = slideshowDataDefaults.transitionType,
+    transitionDirection = slideshowDataDefaults.transitionDirection,
+    transitionDuration = slideshowDataDefaults.transitionDuration,
+    slides = [],
+    activeSlide,
+    elementProps,
+    isHidden,
+    hidden,
+    direction,
+    showPauseButton = slideshowDataDefaults.showPauseButton,
+    rawAutoplay = true,
+    a11y,
+    onChange: onChangeCallback,
+    onPlay: onPlayCallback,
+    onPause: onPauseCallback,
+    onClick,
+    onDblClick,
+    onMouseIn,
+    onMouseOut
+  } = props;
+  const environmentService = useService(definitionExports.EnvironmentDefinition);
+  const siteDirection = environmentService.getLanguageDirection();
+  const isSlideLtrDirectionOpen = ((_a = environmentService == null ? void 0 : environmentService.isExperimentOpen) == null ? void 0 : _a.call(
+    environmentService,
+    SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT
+  )) ?? false;
+  const presetsWrapperProps = ((_b = props.wix) == null ? void 0 : _b.presetsWrapperProps) || {};
+  const visibilityProps = useVisibilityProps({ isHidden, hidden });
+  const navigationButtonsProps = elementProps == null ? void 0 : elementProps.navigationButtons;
+  const slideIndicatorsProps = elementProps == null ? void 0 : elementProps.slideIndicators;
+  const [autoplayState, setAutoplayState] = useState(
+    autoplay ? AUTOPLAY_STATE.RUNNING : AUTOPLAY_STATE.PAUSED
+  );
+  const [isPaused, setIsPaused] = useState(false);
+  const {
+    activeSlideIndex,
+    lastActiveSlideIndex,
+    nextSlideIndex,
+    prevSlideIndex,
+    movementDirection,
+    goToSlide
+  } = useActiveSlideTracker({
+    slides,
+    activeSlide,
+    autoplay,
+    autoplayState,
+    autoplayDelay,
+    isPaused
+  });
+  const prevSlideRef = useRef(activeSlideIndex);
+  useEffect(() => {
+    if (prevSlideRef.current !== activeSlideIndex) {
+      prevSlideRef.current = activeSlideIndex;
+      onChangeCallback == null ? void 0 : onChangeCallback();
+    }
+  }, [activeSlideIndex, onChangeCallback]);
+  const wasPlayingRef = useRef(autoplayState === AUTOPLAY_STATE.RUNNING);
+  useEffect(() => {
+    const isPlaying = autoplayState === AUTOPLAY_STATE.RUNNING;
+    const wasPlaying = wasPlayingRef.current;
+    wasPlayingRef.current = isPlaying;
+    if (!wasPlaying && isPlaying) {
+      onPlayCallback == null ? void 0 : onPlayCallback();
+    } else if (wasPlaying && !isPlaying) {
+      onPauseCallback == null ? void 0 : onPauseCallback();
+    }
+  }, [autoplayState, onPlayCallback, onPauseCallback]);
+  const cancelAutoplayAndGoToSlide = useCallback(
+    (i) => {
+      setAutoplayState(AUTOPLAY_STATE.CANCELLED);
+      goToSlide(i);
+    },
+    [goToSlide]
+  );
+  const goToNextSlide = useCallback(() => {
+    setAutoplayState(AUTOPLAY_STATE.CANCELLED);
+    goToSlide(nextSlideIndex, MOVEMENT_DIRECTION.FORWARD);
+  }, [goToSlide, nextSlideIndex]);
+  const goToPrevSlide = useCallback(() => {
+    setAutoplayState(AUTOPLAY_STATE.CANCELLED);
+    goToSlide(prevSlideIndex, MOVEMENT_DIRECTION.BACKWARD);
+  }, [goToSlide, prevSlideIndex]);
+  const stopAutoplay = useCallback(() => {
+    if (autoplayState === AUTOPLAY_STATE.RUNNING) {
+      setAutoplayState(AUTOPLAY_STATE.PAUSED);
+    }
+  }, [autoplayState]);
+  const resumeAutoplay = useCallback(() => {
+    if (autoplayState === AUTOPLAY_STATE.PAUSED) {
+      setAutoplayState(AUTOPLAY_STATE.RUNNING);
+    }
+  }, [autoplayState]);
+  const handleMouseEnter = useCallback(
+    (event) => {
+      stopAutoplay();
+      onMouseIn == null ? void 0 : onMouseIn(event);
+    },
+    [stopAutoplay, onMouseIn]
+  );
+  const handleMouseLeave = useCallback(
+    (event) => {
+      resumeAutoplay();
+      onMouseOut == null ? void 0 : onMouseOut(event);
+    },
+    [resumeAutoplay, onMouseOut]
+  );
+  const handleFocusEnter = useCallback(
+    (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        stopAutoplay();
+      }
+    },
+    [stopAutoplay]
+  );
+  const handleFocusLeave = useCallback(
+    (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        resumeAutoplay();
+      }
+    },
+    [resumeAutoplay]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": (a11y == null ? void 0 : a11y.ariaLabel) ?? "Slideshow",
+      className: presetWrapperStyles.presetWrapper,
+      ...presetsWrapperProps,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            className,
+            styles.slideshowContainer,
+            semanticClassNames.root,
+            directionStyles.fallbackDirection
+          ),
+          onFocus: pauseOnHover && autoplay ? handleFocusEnter : void 0,
+          onBlur: pauseOnHover && autoplay ? handleFocusLeave : void 0,
+          onClick,
+          onDoubleClick: onDblClick,
+          onMouseEnter: pauseOnHover && autoplay ? handleMouseEnter : onMouseIn,
+          onMouseLeave: pauseOnHover && autoplay ? handleMouseLeave : onMouseOut,
+          id,
+          ...visibilityProps,
+          children: [
+            /* @__PURE__ */ jsx(
+              "ul",
+              {
+                "aria-live": autoplayState !== AUTOPLAY_STATE.RUNNING || isPaused ? "polite" : "off",
+                className: styles.slideshowWrapper,
+                children: slides.map((slide2, i) => {
+                  const isActive = i === activeSlideIndex;
+                  const isPrevious = i === lastActiveSlideIndex;
+                  const shouldAnimate = lastActiveSlideIndex !== -1;
+                  return /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      ...isSlideLtrDirectionOpen && { dir: "ltr" },
+                      ...!isActive && { inert: "true" },
+                      className: clsx(
+                        styles.slide,
+                        styles[`transition-type-${transitionType}`],
+                        styles[`transition-direction-${transitionDirection}`],
+                        {
+                          [styles.active]: isActive,
+                          [styles.prevActive]: isPrevious,
+                          [styles.enterForward]: shouldAnimate && isActive && movementDirection === MOVEMENT_DIRECTION.FORWARD,
+                          [styles.enterBackward]: shouldAnimate && isActive && movementDirection === MOVEMENT_DIRECTION.BACKWARD,
+                          [styles.exitForward]: shouldAnimate && isPrevious && movementDirection === MOVEMENT_DIRECTION.FORWARD,
+                          [styles.exitBackward]: shouldAnimate && isPrevious && movementDirection === MOVEMENT_DIRECTION.BACKWARD
+                        },
+                        semanticClassNames.slide
+                      ),
+                      style: {
+                        animationDuration: `${transitionDuration}s`
+                      },
+                      children: slide2.content
+                    },
+                    i
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles.controlsWrapper,
+                ...direction && { dir: direction },
+                children: /* @__PURE__ */ jsxs("div", { className: styles.controlsWrapperContent, children: [
+                  /* @__PURE__ */ jsx(
+                    NavigationButtons,
+                    {
+                      onNextClick: goToNextSlide,
+                      onPrevClick: goToPrevSlide,
+                      nextDisabled: !loop && activeSlideIndex === slides.length - 1,
+                      prevDisabled: !loop && activeSlideIndex === 0,
+                      parentDirection: direction,
+                      siteDirection,
+                      navigationButtonsProps
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    SlideIndicators,
+                    {
+                      numberOfSlides: slides.length,
+                      onSlideClick: cancelAutoplayAndGoToSlide,
+                      activeSlideIndex,
+                      slideIndicatorsProps,
+                      parentDirection: direction,
+                      siteDirection
+                    }
+                  )
+                ] })
+              }
+            ),
+            rawAutoplay && showPauseButton && /* @__PURE__ */ jsx(
+              PauseButton,
+              {
+                isPaused,
+                onPause: () => {
+                  setIsPaused(true);
+                },
+                onResume: () => {
+                  setIsPaused(false);
+                },
+                pauseAriaLabel: "Pause Slideshow autoplay",
+                resumeAriaLabel: "Resume Slideshow autoplay",
+                className: semanticClassNames.pauseButton,
+                ariaControls: id
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Slideshow as default
+};