@comicrelief/component-library 8.77.3 → 8.77.4

package/dist/style.css

@@ -1 +1 @@
-@font-face{font-family:Founders-GroteskXCondensed-Bold;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.woff) format("woff");font-display:fallback}@font-face{font-family:Founders-Grotesk-Semibold;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.woff) format("woff");font-display:fallback}@font-face{font-family:Founders-Grotesk-Regular;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.woff) format("woff");font-display:fallback}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;padding:0;-webkit-font-smoothing:antialiased}h1,h2{text-transform:uppercase;font-family:Anton,Impact,sans-serif}h1,h2,h3,h4,h5,h6,p{word-break:break-word;margin:0 0 1rem}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child h6:last-child,p:last-child{margin-bottom:0}h2,h3,h4,h5,h6,p,a,button{font-family:inherit}p,a,button{margin-top:0}p+h1,p+h2{margin-top:2rem}table{border-collapse:collapse;border-spacing:0;word-break:normal}table td{padding:10px}.ls-blur-up-is-loading{visibility:hidden}.ls-blur-up-img{position:absolute;top:0;left:0;width:100%;height:100%;display:block;font-family:"blur-up: auto","object-fit: cover";-o-object-fit:cover;object-fit:cover}.ls-blur-up-img{filter:blur(10px);opacity:1;transition:opacity 1s,filter 1.5s}.ls-blur-up-img.ls-inview.ls-original-loaded{opacity:0;filter:blur(5px)}a{color:inherit}a:hover,a:focus{text-decoration:none}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:flex;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}.rsg--content-3,.rsg--content-3 div[data-preview=HeroBanner]{padding:0}.range-slider{touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;cursor:pointer;display:block;position:relative;width:100%;height:8px;background:#ddd;border-radius:4px}.range-slider[data-vertical]{height:100%;width:8px}.range-slider[data-disabled]{opacity:.5;cursor:not-allowed}.range-slider .range-slider__thumb{position:absolute;z-index:3;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);border-radius:50%;background:#2196f3}.range-slider .range-slider__thumb:focus-visible{outline:0;box-shadow:0 0 0 6px #2196f380}.range-slider[data-vertical] .range-slider__thumb{left:50%}.range-slider .range-slider__thumb[data-disabled]{z-index:2}.range-slider .range-slider__range{position:absolute;z-index:1;transform:translateY(-50%);top:50%;width:100%;height:100%;background:#51adf6}.range-slider[data-vertical] .range-slider__range{left:50%;transform:translate(-50%)}.range-slider input[type=range]{-webkit-appearance:none;pointer-events:none;position:absolute;z-index:2;top:0;left:0;width:0;height:0;background-color:transparent}.range-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none}.range-slider input[type=range]::-moz-range-thumb{width:0;height:0;border:0}.range-slider input[type=range]:focus{outline:0}.buttonBack___1mlaL,.buttonFirst___2rhFr,.buttonLast___2yuh0,.buttonNext___2mOCa,.buttonNext___3Lm3s,.dot___3c3SI{cursor:pointer}.image___xtQGH{display:block;width:100%;height:100%}.spinner___27VUp{position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);width:30px;height:30px;animation-name:spin___S3UuE;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;border:4px solid #a9a9a9;border-top-color:#000;border-radius:30px}@keyframes spin___S3UuE{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.container___2O72F{position:relative;overflow:hidden;height:100%;width:100%}.overlay___IV4qY{position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;cursor:zoom-in;transition:opacity .3s,transform .3s}.hover___MYy31,.loading___1pvNI,.zoom___3kqYk{opacity:1}.imageLoadingSpinnerContainer___3UIPD{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4}.slide___3-Nqo{position:relative;display:block;box-sizing:border-box;height:0;margin:0;list-style-type:none}.slide___3-Nqo:focus{outline:none!important}.slideHorizontal___1NzNV{float:left}[dir=rtl] .slideHorizontal___1NzNV{direction:rtl;transform:scaleX(-1)}.slideInner___2mfX9{position:absolute;top:0;left:0;width:100%;height:100%}.focusRing___1airF{position:absolute;top:5px;right:5px;bottom:5px;left:5px;pointer-events:none;outline-width:5px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.focusRing___1airF{outline-style:auto;outline-color:-webkit-focus-ring-color}}.horizontalSlider___281Ls{position:relative;overflow:hidden}.horizontalSlider___281Ls:not(.touchDisabled___2qs4y){touch-action:pan-y pinch-zoom}[dir=rtl] .horizontalSlider___281Ls{direction:ltr;transform:scaleX(-1)}.horizontalSliderTray___1L-0W{overflow:hidden;width:100%}.verticalSlider___34ZFD{position:relative;overflow:hidden}.verticalSliderTray___267D8{overflow:hidden}.verticalTray___12Key{float:left}.verticalSlideTrayWrap___2nO7o{overflow:hidden}.sliderTray___-vHFQ{display:block;list-style:none;padding:0;margin:0}.sliderAnimation___300FY{transition:transform .5s;transition-timing-function:cubic-bezier(.645,.045,.355,1);will-change:transform}.masterSpinnerContainer___1Z6hB{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4}
+@font-face{font-family:Founders-GroteskXCondensed-Bold;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.woff) format("woff");font-display:fallback}@font-face{font-family:Founders-Grotesk-Semibold;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.woff) format("woff");font-display:fallback}@font-face{font-family:Founders-Grotesk-Regular;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.woff) format("woff");font-display:fallback}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;padding:0;-webkit-font-smoothing:antialiased}h1,h2{text-transform:uppercase;font-family:Anton,Impact,sans-serif}h1,h2,h3,h4,h5,h6,p{word-break:break-word;margin:0 0 1rem}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child h6:last-child,p:last-child{margin-bottom:0}h2,h3,h4,h5,h6,p,a,button{font-family:inherit}p,a,button{margin-top:0}p+h1,p+h2{margin-top:2rem}table{border-collapse:collapse;border-spacing:0;word-break:normal}table td{padding:10px}.ls-blur-up-is-loading{visibility:hidden}.ls-blur-up-img{position:absolute;top:0;left:0;width:100%;height:100%;display:block;font-family:"blur-up: auto","object-fit: cover";-o-object-fit:cover;object-fit:cover}.ls-blur-up-img{filter:blur(10px);opacity:1;transition:opacity 1s,filter 1.5s}.ls-blur-up-img.ls-inview.ls-original-loaded{opacity:0;filter:blur(5px)}a{color:inherit}a:hover,a:focus{text-decoration:none}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:flex;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}.rsg--content-3,.rsg--content-3 div[data-preview=HeroBanner]{padding:0}.range-slider{touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;cursor:pointer;display:block;position:relative;width:100%;height:8px;background:#ddd;border-radius:4px}.range-slider[data-vertical]{height:100%;width:8px}.range-slider[data-disabled]{opacity:.5;cursor:not-allowed}.range-slider .range-slider__thumb{position:absolute;z-index:3;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);border-radius:50%;background:#2196f3}.range-slider .range-slider__thumb:focus-visible{outline:0;box-shadow:0 0 0 6px #2196f380}.range-slider[data-vertical] .range-slider__thumb{left:50%}.range-slider .range-slider__thumb[data-disabled]{z-index:2}.range-slider .range-slider__range{position:absolute;z-index:1;transform:translateY(-50%);top:50%;width:100%;height:100%;background:#51adf6}.range-slider[data-vertical] .range-slider__range{left:50%;transform:translate(-50%)}.range-slider input[type=range]{-webkit-appearance:none;pointer-events:none;position:absolute;z-index:2;top:0;left:0;width:0;height:0;background-color:transparent}.range-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none}.range-slider input[type=range]::-moz-range-thumb{width:0;height:0;border:0}.range-slider input[type=range]:focus{outline:0}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.77.3",
+  "version": "8.77.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "files": [

package/src/components/Organisms/RichtextCarousel/RichtextCarousel.js

@@ -1,11 +1,10 @@
 import React, {
-  useEffect, useState, useCallback
+  useEffect, useState
 } from 'react';
 import PropTypes from 'prop-types';
-import {
-  CarouselProvider, Slider, Slide, ButtonBack, ButtonNext
-} from 'pure-react-carousel';
-import 'pure-react-carousel/dist/react-carousel.es.css';
+
+import { Splide, SplideSlide } from '@splidejs/react-splide';
+
 import {
   CarouselWrapper, SlideCopyWrapper, HeadingCopyWrapper, Container
 } from './RichtextCarousel.style';
@@ -29,51 +28,19 @@ const RichtextCarousel = ({
     rowBackgroundColour = 'grey_light'
   }
 }) => {
-  // Defaults to mobile config:
-  const [isMobile, setIsMobile] = useState(true);
-  const [visibleSlides, setVisibleSlides] = useState(1);
-  const [totalSlides, setTotalSlides] = useState(null);
   const [theseItems, setTheseItems] = useState();
 
-  // Custom function to let us update the carousel config dynamically
-  const screenResize = useCallback(() => {
-    const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
-    const isCurrentlyMobile = window.innerWidth < breakpointValues.M;
-
-    if (screenSize !== null && (isMobile !== isCurrentlyMobile)) {
-      setIsMobile(isCurrentlyMobile);
-      setVisibleSlides(isCurrentlyMobile ? 1 : 3);
-      setTotalSlides(isCurrentlyMobile ? theseItems.length : theseItems.length + 2);
-    }
-  }, [isMobile, theseItems]);
-
   // Cache our data source, using as a flag for render logic:
   useEffect(() => {
     setTheseItems(nodes);
   }, [setTheseItems, nodes]);
 
-  useEffect(() => {
-    if (window !== 'undefined' && window.innerWidth >= breakpointValues.M) {
-      // On inital render, update carousel plugin config
-      // to suit the non-mobile layout and functionality:
-      setIsMobile(false);
-      setVisibleSlides(3);
-    }
-
-    // Hook into browser's own onresize event to call our custom wrapper function:
-    if (typeof window !== 'undefined') window.onresize = screenResize;
-  }, [screenResize]);
-
-  if (theseItems && totalSlides === null) {
-    // Reflects our two dummy/bookend slides for non-mobile/tablet views:
-    setTotalSlides(isMobile ? theseItems.length : theseItems.length + 2);
-  }
-
   return (
     <Container
       $paddingTop={paddingTop}
       $paddingBottom={paddingBottom}
       $rowBackgroundColour={rowBackgroundColour}
+      data-testid="richtext-carousel--container"
     >
 
       <CarouselWrapper
@@ -83,42 +50,52 @@ const RichtextCarousel = ({
         $tabletHeight={tabletHeight}
         $desktopHeight={desktopHeight}
         $carouselBackgroundColour={carouselBackgroundColour}
+        data-testid="richtext-carousel--wrapper"
       >
 
-        <HeadingCopyWrapper>
+        <HeadingCopyWrapper data-testid="richtext-carousel--heading">
           {headingCopy}
         </HeadingCopyWrapper>
 
         {theseItems && (
-        <CarouselProvider
-          naturalSlideWidth={50}
-          naturalSlideHeight={200}
-          totalSlides={totalSlides}
-          isPlaying={autoPlay}
-          interval={5000}
-          visibleSlides={visibleSlides}
-          infinite
-        >
-          <Slider classNameAnimation="richtext-carousel">
-
-            {/* Dummy slide for our desired non-mobile layout and functionality */}
-            {isMobile === false && (
-            <Slide index={0} key={0} />
-            )}
-
+          <Splide
+            className="richtext-carousel"
+            data-testid="richtext-carousel--splide"
+            options={{
+              speed: 1000,
+              arrows: true,
+              pagination: false,
+              drag: 'free',
+              flickPower: 50,
+              perMove: 1,
+              dragMinThreshold: { mouse: 50, touch: 50 },
+              updateOnMove: true,
+              snap: true,
+              autoplay: autoPlay,
+              focus: 'center',
+              trimSpace: false,
+              perPage: 3,
+              rewind: true,
+              breakpoints: {
+                [breakpointValues.M]: {
+                  perPage: 1
+                }
+              }
+            }}
+          >
             {Object.keys(theseItems).map((key, index) => {
-            // Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
-              const thisOffsetIndex = index + (isMobile ? 0 : 1);
+              const safeIndex = index;
 
               return (
-              // Calculate the index offset accordingly to reflect the number of slides,
-              // but use the REAL index when determining if its the last REAL slide
-                <Slide
-                  index={thisOffsetIndex}
+                // Calculate the index offset accordingly to reflect the number of slides,
+                // but use the REAL index when determining if its the last REAL slide
+                <SplideSlide
                   className={index === (theseItems.length - 1) && 'last-slide'}
-                  key={thisOffsetIndex}
+                  key={safeIndex}
+                  index={safeIndex}
+                  data-index={safeIndex}
+                  data-testid="richtext-carousel--slide"
                 >
-
                   <SlideCopyWrapper
                     className="slide-copy-wrapper"
                     $mobileHeight={mobileHeight}
@@ -126,28 +103,18 @@ const RichtextCarousel = ({
                     $desktopHeight={desktopHeight}
                     $nodeBackgroundColour={nodeBackgroundColour}
                     $nodeOutlineColour={nodeOutlineColour}
+                    data-testid="richtext-carousel--copy"
                   >
                     {theseItems[index].copy}
                   </SlideCopyWrapper>
 
-                </Slide>
+                </SplideSlide>
               );
             })}
-
-            {/* Dummy slide for our desired non-mobile layout and functionality */}
-            {isMobile === false && (
-            <Slide index={theseItems.length + 1} key="bookend-last" />
-            )}
-
-          </Slider>
-          <ButtonBack>Back</ButtonBack>
-          <ButtonNext>Next</ButtonNext>
-        </CarouselProvider>
+          </Splide>
         )}
-
       </CarouselWrapper>
     </Container>
-
   );
 };
 

package/src/components/Organisms/RichtextCarousel/RichtextCarousel.style.js

@@ -18,6 +18,13 @@ const SlideCopyWrapper = styled.div`
   position: relative;
   overflow: visible;
   word-wrap: break-word;
+  font-size: 0.9rem;
+  line-height: 0.9rem;
+
+  * {
+    font-size: inherit;
+    line-height: inherit;
+  }
 
   &:after {
     position: absolute;
@@ -41,54 +48,61 @@ const SlideCopyWrapper = styled.div`
 
 const HeadingCopyWrapper = styled.div`
   text-align: center;
+
+  * {
+    margin-top: 0;
+  }
+
+  h1, h2, h3 {
+    margin-bottom: 1.5rem;
+  }
 `;
 
 // Unfortunately having to target plugin-created markup ye olde fashioned way:
 const CarouselWrapper = styled.div`
   height: 100%;
   background: ${({ theme, $carouselBackgroundColour }) => theme.color($carouselBackgroundColour)};
-  
   max-width: 760px;
   padding: 2.5rem ${spacing('l')} 3.5rem;
   margin: 0 auto;
-
   border-radius: 20px;
   ${defaultBoxShadow()}
 
-  > div:first-child {
-    * {
-      margin-top: 0;
-    }
-
-    h1, h2, h3 {
-      margin-bottom: 1.5rem;
-    }
-  }
-
-  .carousel {
+  .splide {
     position: relative;
     margin: 0 auto;
     padding-top: ${spacing('l')};
 
-    button.carousel__back-button,
-    button.carousel__next-button {
+    // Navigation buttons:
+    .splide__arrows {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    button.splide__arrow {
       position: absolute;
       left: 0;
       top: 0;
-      width: 33% !important;
+      width: 33.3%;
       height: 100%;
-      padding: 0 !important;
+      padding: 0;
       box-shadow: none;
       text-indent: -9999px;
       background-color: transparent;
-      border: none;
+      transform: none;
+      border-radius: 0;
+      opacity: 1;
 
       &:after {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
-        width: 50%;
+        width: 100%;
         height: 100%;
         transition: opacity 0.2s linear;
         background: ${({ theme, $carouselBackgroundColour }) => css`
@@ -97,165 +111,82 @@ const CarouselWrapper = styled.div`
         `};
       }
 
-      &:hover {
-        &:after {
-          opacity: 0.5;
-        }
-      }
-
-      @media ${({ theme }) => theme.allBreakpoints('M')} {
-        width: 33.3% !important;
-        &:after {
-          width: 100%;
-        }
-      }
-    }
-
-    button.carousel__next-button {
-      left: auto;
-      right: 0;
-
-      &:before {
-        transform: translate(0, -50%) rotate(-90deg);
-      }
-
-      &:after {
+      &.splide__arrow--next {
         left: auto;
         right: 0;
 
-        background: ${({ theme, $carouselBackgroundColour }) => css`
+        &:after {
+          left: auto;
+          right: 0;
+          background: ${({ theme, $carouselBackgroundColour }) => css`
           linear-gradient(90deg, ${theme.color($carouselBackgroundColour)}00,
           ${theme.color($carouselBackgroundColour)}7a, ${theme.color($carouselBackgroundColour)});
         `};
+        }
       }
-    }
-
-    .richtext-carousel {
-      // Override default animations
-      transition: -webkit-transform ${animationSpeed}s;
-      -o-transition: transform ${animationSpeed}s;
-      transition: transform ${animationSpeed}s;
-      -webkit-transform: ${animationSpeed}s;
-      will-change: transform;
 
-      .last-slide {
-        .slide-copy-wrapper:after {
-          content: none;
+      &:hover {
+        &:after {
+          opacity: 0.5;
         }
       }
 
-      .carousel__slide {
-        // 'Mobile'
-        padding-bottom: ${props => props.$mobileHeight}px !important;
+      svg {
+        display: none;
+      }
+    }
 
+    // Carousel:
+    &.richtext-carousel {
+
+      // All sides:
+      .splide__slide {
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-direction: column;
+        height: ${props => props.$mobileHeight}px;
+
+        // No dashed 'connecting' line on the final slide
+        &.last-slide {
+          ${SlideCopyWrapper} {
+            &:after {
+              content: none !important;
+            }
+          }
+        }
+        
         // 'Tablet' (and up) tweaks for the 3-visible layout
         @media ${({ theme }) => theme.allBreakpoints('M')} {
-
-          padding-bottom: ${props => props.$tabletHeight}px !important;
-
-          // All slides:
-          .carousel__inner-slide {
-
-            // All 'SlideCopyWrapper's:
-            > div:first-child {
-              transition: transform ${animationSpeed}s ease;
-              transform-origin: center;
-              transform: scale(0.8);
-
-              &:after {
-                transition: transform ${animationSpeed}s ease,
-                width ${animationSpeed}s ease,
-                right ${animationSpeed}s ease;
-                width: 100%;
-                right: calc(-100% - 6px);
-                transform: scale(1);
-
-              }
+          height: ${props => props.$tabletHeight}px;
+
+           // All 'SlideCopyWrapper's:
+          ${SlideCopyWrapper} {
+            transition: transform ${animationSpeed}s ease;
+            transform-origin: center;
+            transform: scale(0.8);
+
+            &:after {
+              transition: transform ${animationSpeed}s ease,
+              width ${animationSpeed}s ease,
+              right ${animationSpeed}s ease;
+              width: 50%;
+              right: calc(-50% - 1px);
+              transform: scale(1);
             }
           }
 
-          // Our 'first' slide of the three:
-          &.carousel__slide--visible {
-            .carousel__inner-slide {
-              > div:first-child {
-                &:after {
-                  width: 33%;
-                  right: calc(-33% - 3px);
-                  transform: scale(1);
-                }
-              }
-            }
-
-            // 2nd and 3rd:
-            + .carousel__slide--visible {
-              .carousel__inner-slide {
-                > div:first-child {
-                  transform: scale(1);
-                  &:after {
-                    width: 33%;
-                    right: calc(-33% + 3px);
-                    transform: scale(0.8);
-                  }
-                }
-              }
-
-              // Resets the 3rd slide:
-              + .carousel__slide--visible {
-                > div > div:first-child {
-                  transform: scale(0.8);
-                  &:after {
-                    width: 50%;
-                    right: calc(-50% - 6px);
-                    transform: scale(1);
-                  }
-                }
-              }
-            }
+          // Our middle, active slide:
+          &.is-active {
+            ${SlideCopyWrapper} {
+              transform: scale(1.0);
+            } 
           }
         }
 
-        // 'Desktop'
         @media ${({ theme }) => theme.allBreakpoints('L')} {
-          padding-bottom: ${props => props.$desktopHeight}px !important;
-
-          // First
-          &.carousel__slide--visible {
-
-            // 2nd and 3rd
-            + .carousel__slide--visible {
-
-              // 3rd only
-              + .carousel__slide--visible {
-                .carousel__inner-slide {
-                  > div:first-child {
-                    &:after {
-                      right: calc(-125% - 5px);
-                      width: 125%;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-        // END OF DESKTOP
-
-        .carousel__inner-slide {
-          text-align: center;
-          display: inline-flex;
-          align-items: center;
-          justify-content: flex-start;
-          flex-direction: column;
-
-          .slide-copy-wrapper {
-            font-size: 0.9rem;
-            line-height: 0.9rem;
-
-            * {
-              font-size: inherit;
-              line-height: inherit;
-            }
-          }
+          height: ${props => props.$desktopHeight}px;
         }
       }
     }