@growth-angels/ds-core 1.12.10 → 1.13.0

package/dist/hooks/useReactAdaptater.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type ReactType = typeof import('react');
 type ExtendedReactType = ReactType & {
     createRoot: (container: Element | DocumentFragment) => {

package/dist/hooks/useReactAdaptater.js

@@ -1,3 +1,4 @@
+import React from 'react';
 export const useReactAdapter = () => {
     // Check if WordPress element is available (WordPress context)
     if (typeof window !== 'undefined' && window.wp?.element) {
@@ -5,5 +6,5 @@ export const useReactAdapter = () => {
     }
     // Fallback for non-WordPress environments (Storybook, tests, SSR)
     // This will bundle React only in non-WordPress builds
-    return import('react');
+    return React;
 };

package/dist/organisms/Carousel/Carousel.d.ts

@@ -1,2 +1,5 @@
 import { CarouselProps } from "./Carousel.types";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
 export declare const Carousel: (props: CarouselProps) => import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Carousel/Carousel.js

@@ -1,146 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "../../atoms/atoms";
-import { useBreakpointObserver } from "../../hooks/useBreakPointObserver";
 import { useReactAdapter } from "../../hooks/useReactAdaptater";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Pagination, A11y } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
 export const Carousel = (props) => {
-    const { children, slidesPerView = { sm: 1, md: 2, lg: 3, xl: 4 }, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = props;
-    const { useEffect, useState, useRef, Children } = useReactAdapter();
-    const trackRef = useRef(null);
-    const isNavigatingRef = useRef(false);
+    const { children, slidesPerView = { xs: 1, sm: 1, md: 2, lg: 3, xl: 4 }, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = props;
+    const { useRef, Children } = useReactAdapter();
+    const swiperRef = useRef(null);
     const slides = Children.toArray(children);
-    const calculatePages = (totalSlides = 0, slidesPerView = 0, step = 1) => {
-        return Math.max(1, Math.ceil((totalSlides - slidesPerView) / step) + 1);
-    };
-    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-    const [activeDOMIndex, setActiveDOMIndex] = useState(0);
-    const [isAtEnd, setIsAtEnd] = useState(false);
-    const [isAtStart, setIsAtStart] = useState(true);
-    const [totalPages, setTotalPages] = useState(0);
     const displayNavigation = hasNavigation;
     const displayPagination = hasPagination;
-    useEffect(() => {
-        if (loop) {
-            setIsAtStart(false);
-            setIsAtEnd(false);
-        }
-        else {
-            setIsAtStart(activeSlideIndex === 0);
-            setIsAtEnd(activeSlideIndex === totalPages - 1);
-        }
-    }, [activeSlideIndex, totalPages, loop]);
-    const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200, xl: 1400 });
-    useEffect(() => {
-        setTotalPages(calculatePages(slides.length, slidesPerView[breakpoint], 1));
-    }, [breakpoint, slidesPerView]);
-    useEffect(() => {
-        const track = trackRef.current;
-        if (!track)
-            return;
-        const handleScroll = () => {
-            if (loop) {
-                const slideWidth = track.scrollWidth / (slides.length * 3);
-                const scrollLeft = track.scrollLeft;
-                // Repositionnement infini (uniquement si pas en navigation)
-                if (!isNavigatingRef.current) {
-                    if (scrollLeft <= slideWidth * slides.length) {
-                        track.scrollLeft = scrollLeft + slideWidth * slides.length;
-                    }
-                    else if (scrollLeft >= slideWidth * slides.length * 2) {
-                        track.scrollLeft = scrollLeft - slideWidth * slides.length;
-                    }
-                }
-                const scrollPosition = track.scrollLeft + slideWidth / 2;
-                const domIndex = Math.floor(scrollPosition / slideWidth);
-                const index = domIndex % slides.length;
-                setActiveDOMIndex(domIndex);
-                setActiveSlideIndex(index);
-            }
-            else {
-                const slideWidth = track.scrollWidth / slides.length;
-                const scrollPosition = track.scrollLeft + slideWidth / 2;
-                const index = Math.floor(scrollPosition / slideWidth);
-                setActiveSlideIndex(Math.min(index, slides.length - 1));
-                setActiveDOMIndex(index);
-            }
-        };
-        track.addEventListener("scroll", handleScroll);
-        // Position initiale au milieu en mode loop
-        if (loop) {
-            setTimeout(() => {
-                const slideWidth = track.scrollWidth / (slides.length * 3);
-                track.scrollLeft = slideWidth * slides.length;
-            }, 0);
-        }
-        return () => track.removeEventListener("scroll", handleScroll);
-    }, [slides.length, loop]);
-    const style = Object.fromEntries(Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`]));
-    const goPrev = () => {
-        if (!trackRef.current)
-            return;
-        const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
-        if (activeSlideIndex === 0 && !loop)
-            return;
-        isNavigatingRef.current = true;
-        if (loop) {
-            // En mode loop, on utilise l'index DOM actuel
-            allSlides[activeDOMIndex - 1]?.scrollIntoView({
-                behavior: "smooth",
-                block: "nearest",
-                inline: "start",
-            });
-        }
-        else {
-            const nextIndex = activeSlideIndex - 1;
-            allSlides[nextIndex]?.scrollIntoView({
-                behavior: "smooth",
-                block: "nearest",
-                inline: "start",
-            });
-        }
-        setTimeout(() => {
-            isNavigatingRef.current = false;
-        }, 600);
-    };
-    const goNext = () => {
-        if (!trackRef.current)
-            return;
-        const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
-        isNavigatingRef.current = true;
-        if (loop) {
-            // En mode loop, on utilise l'index DOM actuel
-            allSlides[activeDOMIndex + 1]?.scrollIntoView({
-                behavior: "smooth",
-                block: "nearest",
-                inline: "start",
-            });
-        }
-        else {
-            const totalSlides = allSlides.length;
-            if (activeSlideIndex >= totalSlides - 1)
-                return;
-            if (isAtEnd)
-                return;
-            const nextIndex = activeSlideIndex + 1;
-            allSlides[nextIndex]?.scrollIntoView({
-                behavior: "smooth",
-                block: "nearest",
-                inline: "start",
-            });
-        }
-        setTimeout(() => {
-            isNavigatingRef.current = false;
-        }, 600);
-    };
-    const goTo = (nextIndex) => {
-        if (!trackRef.current)
-            return;
-        const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
-        slides[nextIndex]?.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-            inline: "start",
-        });
-    };
     const classes = ["ga-ds-carousel"];
     if (props.extraClassNames) {
         if (typeof props.extraClassNames === "string") {
@@ -150,19 +22,31 @@ export const Carousel = (props) => {
             classes.push(...props.extraClassNames);
         }
     }
-    return (_jsxs("div", { className: classes.join(" "), style: style, children: [navigation?.positionY === "top" && displayNavigation && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd })), _jsx("div", { className: "ga-ds-carousel__track", ref: trackRef, style: {
-                    "--ga-ds-space-between": `${spaceBetween / 10}rem`,
-                }, children: context === "wp-editor"
+    const breakpoints = {
+        0: { slidesPerView: slidesPerView.xs || slidesPerView.sm || 1 },
+        576: { slidesPerView: slidesPerView.sm || 1 },
+        992: { slidesPerView: slidesPerView.md || 2 },
+        1200: { slidesPerView: slidesPerView.lg || 3 },
+        1440: { slidesPerView: slidesPerView.xl || 4 },
+    };
+    return (_jsxs("div", { className: classes.join(" "), children: [navigation?.positionY === "top" && displayNavigation && _jsx(CarouselNavigation, {}), _jsx(Swiper, { modules: [Navigation, Pagination, A11y], spaceBetween: spaceBetween, breakpoints: breakpoints, loop: loop, navigation: displayNavigation
+                    ? {
+                        prevEl: ".ga-ds-carousel__button--prev",
+                        nextEl: ".ga-ds-carousel__button--next",
+                    }
+                    : false, pagination: displayPagination && pagination
+                    ? {
+                        clickable: pagination.clickable,
+                        el: ".ga-ds-carousel__dots",
+                        bulletClass: "ga-ds-carousel__dot",
+                        bulletActiveClass: "ga-ds-carousel__dot--active",
+                    }
+                    : false, onSwiper: (swiper) => {
+                    swiperRef.current = swiper;
+                }, className: "ga-ds-carousel__track", children: context === "wp-editor"
                     ? children
-                    : slides.map((child, index) => {
-                        return (_jsx("div", { className: `ga-ds-carousel__slide ${index === activeDOMIndex ? "ga-ds-carousel__slide--active" : ""}`, children: child }, index));
-                    }) }), _jsxs("div", { className: "ga-ds-carousel__navigation", children: [pagination && displayPagination && (_jsx(CarouselPagination, { totalPages: totalPages, activeSlideIndex: activeSlideIndex, goTo: goTo, clickable: pagination.clickable })), displayNavigation && navigation?.positionY === "bottom" && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd }))] })] }));
-};
-const CarouselNavigation = ({ goPrev, goNext, isAtStart, isAtEnd, }) => {
-    return (_jsxs("div", { className: `ga-ds-carousel__arrows`, children: [_jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--prev"], icon: "chevron-left", onClick: goPrev, disabled: isAtStart }), _jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--next"], icon: "chevron-right", onClick: goNext, disabled: isAtEnd })] }));
+                    : slides.map((child, index) => (_jsx(SwiperSlide, { className: "ga-ds-carousel__slide", children: child }, index))) }), _jsxs("div", { className: "ga-ds-carousel__navigation", children: [displayPagination && _jsx("div", { className: "ga-ds-carousel__dots" }), displayNavigation && navigation?.positionY === "bottom" && _jsx(CarouselNavigation, {})] })] }));
 };
-const CarouselPagination = ({ totalPages, activeSlideIndex, goTo, clickable, }) => {
-    return (_jsx("div", { className: "ga-ds-carousel__dots", children: Array.from({ length: totalPages }, (_, index) => index).map((_, index) => (_jsx("span", { className: `ga-ds-carousel__dot ${index === activeSlideIndex ? "ga-ds-carousel__dot--active" : ""}`, onClick: () => clickable && goTo(index), style: {
-                cursor: clickable ? "pointer" : "default",
-            } }, index))) }));
+const CarouselNavigation = () => {
+    return (_jsxs("div", { className: `ga-ds-carousel__arrows`, children: [_jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--prev"], icon: "chevron-left" }), _jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--next"], icon: "chevron-right" })] }));
 };

package/dist/organisms/Carousel/Carousel.types.d.ts

@@ -2,6 +2,7 @@ import { WordpressDefault } from "../../global.types";
 export type CarouselAttributes = {
     context?: 'wp-editor';
     slidesPerView?: {
+        xs?: number;
         sm: number;
         md: number;
         lg: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.12.10",
+  "version": "1.13.0",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,
@@ -37,7 +37,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@growth-angels/foundation": "^1.4.1"
+    "@growth-angels/foundation": "^1.4.1",
+    "swiper": "^11.1.15"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/hooks/useReactAdaptater.ts

@@ -1,3 +1,4 @@
+import React from 'react'
 // @ts-ignore - React types from window.wp.element
 type ReactType = typeof import('react')
 
@@ -27,6 +28,6 @@ export const useReactAdapter = (): ExtendedReactType => {
   
   // Fallback for non-WordPress environments (Storybook, tests, SSR)
   // This will bundle React only in non-WordPress builds
-  return import('react') as unknown as ExtendedReactType
+  return React as ExtendedReactType
 }
 

package/src/organisms/Carousel/Carousel.tsx

@@ -1,12 +1,17 @@
 import { Button } from "../../atoms/atoms"
-import { useBreakpointObserver } from "../../hooks/useBreakPointObserver"
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
 import { CarouselProps } from "./Carousel.types"
+import { Swiper, SwiperSlide } from "swiper/react"
+import { Navigation, Pagination, A11y } from "swiper/modules"
+import type { Swiper as SwiperType } from "swiper"
+import "swiper/css"
+import "swiper/css/navigation"
+import "swiper/css/pagination"
 
 export const Carousel = (props: CarouselProps) => {
   const {
     children,
-    slidesPerView = { sm: 1, md: 2, lg: 3, xl: 4 },
+    slidesPerView = { xs: 1, sm: 1, md: 2, lg: 3, xl: 4 },
     spaceBetween = 20,
     navigation,
     pagination,
@@ -15,158 +20,13 @@ export const Carousel = (props: CarouselProps) => {
     hasNavigation,
     loop = false,
   } = props
-  const { useEffect, useState, useRef, Children } = useReactAdapter()
-  const trackRef = useRef<HTMLDivElement>(null)
-  const isNavigatingRef = useRef(false)
+  const { useRef, Children } = useReactAdapter()
+  const swiperRef = useRef<SwiperType | null>(null)
   const slides = Children.toArray(children)
 
-  const calculatePages = (totalSlides = 0, slidesPerView = 0, step = 1) => {
-    return Math.max(1, Math.ceil((totalSlides - slidesPerView) / step) + 1)
-  }
-
-  const [activeSlideIndex, setActiveSlideIndex] = useState(0)
-  const [activeDOMIndex, setActiveDOMIndex] = useState(0)
-  const [isAtEnd, setIsAtEnd] = useState(false)
-  const [isAtStart, setIsAtStart] = useState(true)
-  const [totalPages, setTotalPages] = useState(0)
-
   const displayNavigation = hasNavigation
   const displayPagination = hasPagination
 
-  useEffect(() => {
-    if (loop) {
-      setIsAtStart(false)
-      setIsAtEnd(false)
-    } else {
-      setIsAtStart(activeSlideIndex === 0)
-      setIsAtEnd(activeSlideIndex === totalPages - 1)
-    }
-  }, [activeSlideIndex, totalPages, loop])
-
-  const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200, xl: 1400 })
-
-  useEffect(() => {
-    setTotalPages(calculatePages(slides.length, slidesPerView[breakpoint], 1))
-  }, [breakpoint, slidesPerView])
-
-  useEffect(() => {
-    const track = trackRef.current
-    if (!track) return
-
-    const handleScroll = () => {
-      if (loop) {
-        const slideWidth = track.scrollWidth / (slides.length * 3)
-        const scrollLeft = track.scrollLeft
-
-        // Repositionnement infini (uniquement si pas en navigation)
-        if (!isNavigatingRef.current) {
-          if (scrollLeft <= slideWidth * slides.length) {
-            track.scrollLeft = scrollLeft + slideWidth * slides.length
-          } else if (scrollLeft >= slideWidth * slides.length * 2) {
-            track.scrollLeft = scrollLeft - slideWidth * slides.length
-          }
-        }
-
-        const scrollPosition = track.scrollLeft + slideWidth / 2
-        const domIndex = Math.floor(scrollPosition / slideWidth)
-        const index = domIndex % slides.length
-        setActiveDOMIndex(domIndex)
-        setActiveSlideIndex(index)
-      } else {
-        const slideWidth = track.scrollWidth / slides.length
-        const scrollPosition = track.scrollLeft + slideWidth / 2
-        const index = Math.floor(scrollPosition / slideWidth)
-        setActiveSlideIndex(Math.min(index, slides.length - 1))
-        setActiveDOMIndex(index)
-      }
-    }
-
-    track.addEventListener("scroll", handleScroll)
-
-    // Position initiale au milieu en mode loop
-    if (loop) {
-      setTimeout(() => {
-        const slideWidth = track.scrollWidth / (slides.length * 3)
-        track.scrollLeft = slideWidth * slides.length
-      }, 0)
-    }
-
-    return () => track.removeEventListener("scroll", handleScroll)
-  }, [slides.length, loop])
-
-  const style = Object.fromEntries(
-    Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`])
-  )
-
-  const goPrev = () => {
-    if (!trackRef.current) return
-    const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
-    if (activeSlideIndex === 0 && !loop) return
-
-    isNavigatingRef.current = true
-
-    if (loop) {
-      // En mode loop, on utilise l'index DOM actuel
-      allSlides[activeDOMIndex - 1]?.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "start",
-      })
-    } else {
-      const nextIndex = activeSlideIndex - 1
-      allSlides[nextIndex]?.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "start",
-      })
-    }
-
-    setTimeout(() => {
-      isNavigatingRef.current = false
-    }, 600)
-  }
-
-  const goNext = () => {
-    if (!trackRef.current) return
-    const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
-
-    isNavigatingRef.current = true
-
-    if (loop) {
-      // En mode loop, on utilise l'index DOM actuel
-      allSlides[activeDOMIndex + 1]?.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "start",
-      })
-    } else {
-      const totalSlides = allSlides.length
-      if (activeSlideIndex >= totalSlides - 1) return
-      if (isAtEnd) return
-
-      const nextIndex = activeSlideIndex + 1
-      allSlides[nextIndex]?.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "start",
-      })
-    }
-
-    setTimeout(() => {
-      isNavigatingRef.current = false
-    }, 600)
-  }
-
-  const goTo = (nextIndex: number) => {
-    if (!trackRef.current) return
-    const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
-    slides[nextIndex]?.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest",
-      inline: "start",
-    })
-  }
-
   const classes = ["ga-ds-carousel"]
 
   if (props.extraClassNames) {
@@ -177,103 +37,68 @@ export const Carousel = (props: CarouselProps) => {
     }
   }
 
+  const breakpoints = {
+    0: { slidesPerView: slidesPerView.xs || slidesPerView.sm || 1 },
+    576: { slidesPerView: slidesPerView.sm || 1 },
+    992: { slidesPerView: slidesPerView.md || 2 },
+    1200: { slidesPerView: slidesPerView.lg || 3 },
+    1440: { slidesPerView: slidesPerView.xl || 4 },
+  }
+
   return (
-    <div className={classes.join(" ")} style={style}>
-      {navigation?.positionY === "top" && displayNavigation && (
-        <CarouselNavigation goPrev={goPrev} goNext={goNext} isAtStart={isAtStart} isAtEnd={isAtEnd} />
-      )}
-      <div
-        className="ga-ds-carousel__track"
-        ref={trackRef}
-        style={
-          {
-            "--ga-ds-space-between": `${spaceBetween / 10}rem`,
-          } as React.CSSProperties
+    <div className={classes.join(" ")}>
+      {navigation?.positionY === "top" && displayNavigation && <CarouselNavigation />}
+
+      <Swiper
+        modules={[Navigation, Pagination, A11y]}
+        spaceBetween={spaceBetween}
+        breakpoints={breakpoints}
+        loop={loop}
+        navigation={
+          displayNavigation
+            ? {
+                prevEl: ".ga-ds-carousel__button--prev",
+                nextEl: ".ga-ds-carousel__button--next",
+              }
+            : false
+        }
+        pagination={
+          displayPagination && pagination
+            ? {
+                clickable: pagination.clickable,
+                el: ".ga-ds-carousel__dots",
+                bulletClass: "ga-ds-carousel__dot",
+                bulletActiveClass: "ga-ds-carousel__dot--active",
+              }
+            : false
         }
+        onSwiper={(swiper: SwiperType) => {
+          swiperRef.current = swiper
+        }}
+        className="ga-ds-carousel__track"
       >
         {context === "wp-editor"
           ? children
-          : slides.map((child, index) => {
-              return (
-                <div
-                  key={index}
-                  className={`ga-ds-carousel__slide ${index === activeDOMIndex ? "ga-ds-carousel__slide--active" : ""}`}
-                >
-                  {child}
-                </div>
-              )
-            })}
-      </div>
+          : slides.map((child, index) => (
+              <SwiperSlide key={index} className="ga-ds-carousel__slide">
+                {child}
+              </SwiperSlide>
+            ))}
+      </Swiper>
 
       <div className="ga-ds-carousel__navigation">
-        {pagination && displayPagination && (
-          <CarouselPagination
-            totalPages={totalPages}
-            activeSlideIndex={activeSlideIndex}
-            goTo={goTo}
-            clickable={pagination.clickable}
-          />
-        )}
-        {displayNavigation && navigation?.positionY === "bottom" && (
-          <CarouselNavigation goPrev={goPrev} goNext={goNext} isAtStart={isAtStart} isAtEnd={isAtEnd} />
-        )}
+        {displayPagination && <div className="ga-ds-carousel__dots"></div>}
+        {displayNavigation && navigation?.positionY === "bottom" && <CarouselNavigation />}
       </div>
     </div>
   )
 }
 
-const CarouselNavigation = ({
-  goPrev,
-  goNext,
-  isAtStart,
-  isAtEnd,
-}: {
-  goPrev: () => void
-  goNext: () => void
-  isAtStart: boolean
-  isAtEnd: boolean
-}) => {
+const CarouselNavigation = () => {
   return (
     <div className={`ga-ds-carousel__arrows`}>
-      <Button
-        extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--prev"]}
-        icon="chevron-left"
-        onClick={goPrev}
-        disabled={isAtStart}
-      />
-      <Button
-        extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--next"]}
-        icon="chevron-right"
-        onClick={goNext}
-        disabled={isAtEnd}
-      />
-    </div>
-  )
-}
-
-const CarouselPagination = ({
-  totalPages,
-  activeSlideIndex,
-  goTo,
-  clickable,
-}: {
-  totalPages: number
-  activeSlideIndex: number
-  goTo: (nextIndex: number) => void
-  clickable: boolean
-}) => {
-  return (
-    <div className="ga-ds-carousel__dots">
-      {Array.from({ length: totalPages }, (_, index) => index).map((_, index) => (
-        <span
-          key={index}
-          className={`ga-ds-carousel__dot ${index === activeSlideIndex ? "ga-ds-carousel__dot--active" : ""}`}
-          onClick={() => clickable && goTo(index)}
-          style={{
-            cursor: clickable ? "pointer" : "default",
-          }}
-        ></span>
-      ))}
+      <Button extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--prev"]} icon="chevron-left" />
+      <Button extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--next"]} icon="chevron-right" />
     </div>
   )
 }

package/src/organisms/Carousel/Carousel.types.ts

@@ -3,6 +3,7 @@ import { WordpressDefault } from "../../global.types"
 export type CarouselAttributes = {
   context?: 'wp-editor'
   slidesPerView?: {
+    xs?: number
     sm: number
     md: number
     lg: number