@cntrl-site/components 0.1.9 → 0.1.10-alpha.1

package/dist/index.mjs

@@ -3,17 +3,17 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Splide, SplideSlide } from "@splidejs/react-splide";
 import cn from "classnames";
 import { createPortal } from "react-dom";
-const wrapper = "ControlSlider-module__wrapper___sHEkd";
+const wrapper$1 = "ControlSlider-module__wrapper___sHEkd";
 const hoverArrow = "ControlSlider-module__hoverArrow___A-dOH";
 const sliderItem = "ControlSlider-module__sliderItem___QQSkR";
 const sliderImage = "ControlSlider-module__sliderImage___9hRl-";
-const arrow$1 = "ControlSlider-module__arrow___05ghY";
+const arrow$2 = "ControlSlider-module__arrow___05ghY";
 const arrowVertical$1 = "ControlSlider-module__arrowVertical___tBfVN";
-const nextArrow$1 = "ControlSlider-module__nextArrow___-30Yc";
-const arrowInner$1 = "ControlSlider-module__arrowInner___aEra3";
-const arrowIcon = "ControlSlider-module__arrowIcon___S4ztF";
-const arrowImg$1 = "ControlSlider-module__arrowImg___2dwJW";
-const mirror$1 = "ControlSlider-module__mirror___brd6U";
+const nextArrow$2 = "ControlSlider-module__nextArrow___-30Yc";
+const arrowInner$2 = "ControlSlider-module__arrowInner___aEra3";
+const arrowIcon$1 = "ControlSlider-module__arrowIcon___S4ztF";
+const arrowImg$2 = "ControlSlider-module__arrowImg___2dwJW";
+const mirror$2 = "ControlSlider-module__mirror___brd6U";
 const pagination = "ControlSlider-module__pagination___bicLF";
 const paginationInner = "ControlSlider-module__paginationInner___bT-P-";
 const paginationVertical = "ControlSlider-module__paginationVertical___zYqKw";
@@ -45,19 +45,19 @@ const bottomCenterAlignment = "ControlSlider-module__bottomCenterAlignment___c54
 const bottomRightAlignment = "ControlSlider-module__bottomRightAlignment___kEwrz";
 const clickOverlay = "ControlSlider-module__clickOverlay___DZA28";
 const contain$1 = "ControlSlider-module__contain___pLyq7";
-const cover$1 = "ControlSlider-module__cover___KdDat";
+const cover$2 = "ControlSlider-module__cover___KdDat";
 const styles$3 = {
-  wrapper,
+  wrapper: wrapper$1,
   hoverArrow,
   sliderItem,
   sliderImage,
-  arrow: arrow$1,
+  arrow: arrow$2,
   arrowVertical: arrowVertical$1,
-  nextArrow: nextArrow$1,
-  arrowInner: arrowInner$1,
-  arrowIcon,
-  arrowImg: arrowImg$1,
-  mirror: mirror$1,
+  nextArrow: nextArrow$2,
+  arrowInner: arrowInner$2,
+  arrowIcon: arrowIcon$1,
+  arrowImg: arrowImg$2,
+  mirror: mirror$2,
   pagination,
   paginationInner,
   paginationVertical,
@@ -89,7 +89,7 @@ const styles$3 = {
   bottomRightAlignment,
   clickOverlay,
   contain: contain$1,
-  cover: cover$1
+  cover: cover$2
 };
 const link$1 = "RichTextRenderer-module__link___BWeZ2";
 const styles$2 = {
@@ -343,7 +343,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         className: cn(styles$3.arrowImg, styles$3.mirror)
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon$1, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
                   ]
                 }
               )
@@ -378,7 +378,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         className: styles$3.arrowImg
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon$1, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
                   ]
                 }
               )
@@ -450,7 +450,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
     }
   ) });
 }
-function ArrowIcon({ color, className }) {
+function ArrowIcon$1({ color, className }) {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 18", className, children: /* @__PURE__ */ jsx("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ jsx("path", { d: "M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z", id: "Shape-Copy", fill: color, transform: "translate(5, 9) rotate(-90) translate(-5, -9)" }) }) });
 }
 const ControlSliderComponent = {
@@ -1622,16 +1622,16 @@ const contentStyle = "LightBox-module__contentStyle___Bgnsq";
 const imageStyle = "LightBox-module__imageStyle___tLIlB";
 const imgWrapper = "LightBox-module__imgWrapper___LuFUp";
 const contain = "LightBox-module__contain___8-yaS";
-const cover = "LightBox-module__cover___hNvOG";
-const caption = "LightBox-module__caption___b6L2I";
+const cover$1 = "LightBox-module__cover___hNvOG";
+const caption$1 = "LightBox-module__caption___b6L2I";
 const captionTextInner = "LightBox-module__captionTextInner___rCGNH";
 const lightboxSplide = "LightBox-module__lightboxSplide___XFuWC";
-const arrow = "LightBox-module__arrow___iz38X";
+const arrow$1 = "LightBox-module__arrow___iz38X";
 const arrowVertical = "LightBox-module__arrowVertical___Zfz81";
-const nextArrow = "LightBox-module__nextArrow___zkAQN";
-const arrowInner = "LightBox-module__arrowInner___p48sW";
-const arrowImg = "LightBox-module__arrowImg___pNV88";
-const mirror = "LightBox-module__mirror___pjeXc";
+const nextArrow$1 = "LightBox-module__nextArrow___zkAQN";
+const arrowInner$1 = "LightBox-module__arrowInner___p48sW";
+const arrowImg$1 = "LightBox-module__arrowImg___pNV88";
+const mirror$1 = "LightBox-module__mirror___pjeXc";
 const thumbsContainerVertical = "LightBox-module__thumbsContainerVertical___wttk5";
 const thumbsContainer = "LightBox-module__thumbsContainer___osSma";
 const thumbsAlignStart = "LightBox-module__thumbsAlignStart___MO6tY";
@@ -1650,7 +1650,7 @@ const slideOutRight = "LightBox-module__slideOutRight___SK7eC";
 const slideOutTop = "LightBox-module__slideOutTop___Vgg0z";
 const slideOutBottom = "LightBox-module__slideOutBottom___nJ0Ef";
 const scaleSlide = "LightBox-module__scaleSlide___vZriG";
-const classes = {
+const classes$1 = {
   heroImage,
   background,
   editor,
@@ -1658,16 +1658,16 @@ const classes = {
   imageStyle,
   imgWrapper,
   contain,
-  cover,
-  caption,
+  cover: cover$1,
+  caption: caption$1,
   captionTextInner,
   lightboxSplide,
-  arrow,
+  arrow: arrow$1,
   arrowVertical,
-  nextArrow,
-  arrowInner,
-  arrowImg,
-  mirror,
+  nextArrow: nextArrow$1,
+  arrowInner: arrowInner$1,
+  arrowImg: arrowImg$1,
+  mirror: mirror$1,
   thumbsContainerVertical,
   thumbsContainer,
   thumbsAlignStart,
@@ -1767,76 +1767,76 @@ function getColorAlpha(color) {
 }
 function getAnimationClasses(type, direction) {
   const appearClass = (() => {
-    if (type === "fade in") return classes.fadeIn;
+    if (type === "fade in") return classes$1.fadeIn;
     if (type === "slide in" || type === "mix") {
       switch (direction) {
         case "left":
-          return classes.slideInLeft;
+          return classes$1.slideInLeft;
         case "right":
-          return classes.slideInRight;
+          return classes$1.slideInRight;
         case "top":
-          return classes.slideInTop;
+          return classes$1.slideInTop;
         case "bottom":
-          return classes.slideInBottom;
+          return classes$1.slideInBottom;
         default:
-          return classes.slideInRight;
+          return classes$1.slideInRight;
       }
     }
-    return classes.fadeIn;
+    return classes$1.fadeIn;
   })();
   const backdropAppearClass = (() => {
-    if (type === "fade in" || type === "mix") return classes.fadeIn;
+    if (type === "fade in" || type === "mix") return classes$1.fadeIn;
     if (type === "slide in") {
       switch (direction) {
         case "left":
-          return classes.slideInLeft;
+          return classes$1.slideInLeft;
         case "right":
-          return classes.slideInRight;
+          return classes$1.slideInRight;
         case "top":
-          return classes.slideInTop;
+          return classes$1.slideInTop;
         case "bottom":
-          return classes.slideInBottom;
+          return classes$1.slideInBottom;
         default:
-          return classes.slideInRight;
+          return classes$1.slideInRight;
       }
     }
-    return classes.fadeIn;
+    return classes$1.fadeIn;
   })();
   const backdropDisappearClass = (() => {
-    if (type === "fade in" || type === "mix") return classes.fadeOut;
+    if (type === "fade in" || type === "mix") return classes$1.fadeOut;
     if (type === "slide in") {
       switch (direction) {
         case "left":
-          return classes.slideOutLeft;
+          return classes$1.slideOutLeft;
         case "right":
-          return classes.slideOutRight;
+          return classes$1.slideOutRight;
         case "top":
-          return classes.slideOutTop;
+          return classes$1.slideOutTop;
         case "bottom":
-          return classes.slideOutBottom;
+          return classes$1.slideOutBottom;
         default:
-          return classes.slideOutRight;
+          return classes$1.slideOutRight;
       }
     }
-    return classes.fadeOut;
+    return classes$1.fadeOut;
   })();
   const disappearClass = (() => {
-    if (type === "fade in") return classes.fadeOut;
+    if (type === "fade in") return classes$1.fadeOut;
     if (type === "slide in" || type === "mix") {
       switch (direction) {
         case "left":
-          return classes.slideOutLeft;
+          return classes$1.slideOutLeft;
         case "right":
-          return classes.slideOutRight;
+          return classes$1.slideOutRight;
         case "top":
-          return classes.slideOutTop;
+          return classes$1.slideOutTop;
         case "bottom":
-          return classes.slideOutBottom;
+          return classes$1.slideOutBottom;
         default:
-          return classes.slideOutRight;
+          return classes$1.slideOutRight;
       }
     }
-    return classes.fadeOut;
+    return classes$1.fadeOut;
   })();
   return { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass };
 }
@@ -1857,7 +1857,7 @@ const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeE
       {
         src: url,
         alt: "Cover",
-        className: classes.heroImage,
+        className: classes$1.heroImage,
         onClick: () => setOpen(true)
       }
     ),
@@ -2079,7 +2079,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
         return;
       }
       const target = e.target;
-      if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
+      if (target && (target.closest(`.${classes$1.thumbsContainer}`) || target.closest(`.${classes$1.thumbItem}`))) {
         return;
       }
       if (e.touches.length === 0 && e.changedTouches.length > 0) {
@@ -2127,7 +2127,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
         "div",
         {
           ref: !isEditor ? animationTargetRef : null,
-          className: cn(classes.background, isClosing ? backdropDisappearClass : backdropAppearClass, { [classes.editor]: isEditor }),
+          className: cn(classes$1.background, isClosing ? backdropDisappearClass : backdropAppearClass, { [classes$1.editor]: isEditor }),
           style: {
             ...backdropStyles,
             ...animationFinished && !isEditor && !isClosing ? { position: "absolute" } : {}
@@ -2138,7 +2138,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
         "div",
         {
           ref: isEditor ? animationTargetRef : null,
-          className: cn(classes.contentStyle, !isClosing ? appearClass : disappearClass, { [classes.editor]: isEditor }),
+          className: cn(classes$1.contentStyle, !isClosing ? appearClass : disappearClass, { [classes$1.editor]: isEditor }),
           style: {
             animationDuration: `${parseInt(appear.duration)}ms`,
             animationTimingFunction: "ease",
@@ -2150,7 +2150,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
               {
                 onMove: (splide) => setCurrentIndex(splide.index),
                 ref: lightboxRef,
-                className: classes.lightboxSplide,
+                className: classes$1.lightboxSplide,
                 options: {
                   arrows: false,
                   speed: slider.duration ? parseInt(slider.duration) : 500,
@@ -2178,14 +2178,14 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                       "--position-transform": transform || "none"
                     };
                   })() : { ...positionStyles, position: "absolute", padding, boxSizing: "border-box" };
-                  return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx("div", { className: classes.imgWrapper, onClick: handleImageWrapperClick, children: /* @__PURE__ */ jsx(
+                  return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx("div", { className: classes$1.imgWrapper, onClick: handleImageWrapperClick, children: /* @__PURE__ */ jsx(
                     "img",
                     {
                       ref: index === currentIndex ? imageRef : null,
-                      className: cn(classes.imageStyle, {
-                        [classes.contain]: item.image.objectFit === "contain",
-                        [classes.cover]: item.image.objectFit === "cover",
-                        [classes.scaleSlide]: slider.type === "scale"
+                      className: cn(classes$1.imageStyle, {
+                        [classes$1.contain]: item.image.objectFit === "contain",
+                        [classes$1.cover]: item.image.objectFit === "cover",
+                        [classes$1.scaleSlide]: slider.type === "scale"
                       }),
                       onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
                       src: item.image.url,
@@ -2201,12 +2201,12 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn(classes.arrow, { [classes.arrowVertical]: slider.direction === "vert" }),
+                  className: cn(classes$1.arrow, { [classes$1.arrowVertical]: slider.direction === "vert" }),
                   style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
                   children: /* @__PURE__ */ jsx(
                     "button",
                     {
-                      className: classes.arrowInner,
+                      className: classes$1.arrowInner,
                       style: { transform: `translate(${scalingValue(controls.offset.x, isEditor)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1), isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
                       onClick: () => {
                         var _a;
@@ -2219,7 +2219,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                           url: controls.arrowsImgUrl,
                           fill: controls.color,
                           hoverFill: controls.hover,
-                          className: cn(classes.arrowImg, classes.mirror)
+                          className: cn(classes$1.arrowImg, classes$1.mirror)
                         }
                       )
                     }
@@ -2229,12 +2229,12 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn(classes.arrow, classes.nextArrow, { [classes.arrowVertical]: slider.direction === "vert" }),
+                  className: cn(classes$1.arrow, classes$1.nextArrow, { [classes$1.arrowVertical]: slider.direction === "vert" }),
                   style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
                   children: /* @__PURE__ */ jsx(
                     "button",
                     {
-                      className: classes.arrowInner,
+                      className: classes$1.arrowInner,
                       style: { transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controls.offset.y, isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
                       onClick: () => {
                         var _a;
@@ -2247,7 +2247,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                           url: controls.arrowsImgUrl,
                           fill: controls.color,
                           hoverFill: controls.hover,
-                          className: classes.arrowImg
+                          className: classes$1.arrowImg
                         }
                       )
                     }
@@ -2259,12 +2259,12 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
               const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset, isEditor);
               const scaleTransform = `scale(${area.closeIconScale})`;
               const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
-              return /* @__PURE__ */ jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl }) });
+              return /* @__PURE__ */ jsx("button", { className: classes$1.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl }) });
             })(),
             caption2.isActive && /* @__PURE__ */ jsx(
               "div",
               {
-                className: classes.caption,
+                className: classes$1.caption,
                 style: {
                   ...getPositionStyles(caption2.alignment, caption2.offset, isEditor),
                   fontFamily: fontSettings.fontFamily,
@@ -2286,7 +2286,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                   "div",
                   {
                     "data-styles": "caption",
-                    className: classes.captionTextInner,
+                    className: classes$1.captionTextInner,
                     style: { ["--link-hover-color"]: caption2.hover },
                     children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
                   }
@@ -2296,11 +2296,11 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
             thumbnail.isActive && /* @__PURE__ */ jsx(
               "div",
               {
-                className: cn(classes.thumbsContainer, {
-                  [classes.thumbsContainerVertical]: slider.direction === "vert",
-                  [classes.thumbsAlignStart]: thumbnail.align === "start",
-                  [classes.thumbsAlignCenter]: thumbnail.align === "center",
-                  [classes.thumbsAlignEnd]: thumbnail.align === "end"
+                className: cn(classes$1.thumbsContainer, {
+                  [classes$1.thumbsContainerVertical]: slider.direction === "vert",
+                  [classes$1.thumbsAlignStart]: thumbnail.align === "start",
+                  [classes$1.thumbsAlignCenter]: thumbnail.align === "center",
+                  [classes$1.thumbsAlignEnd]: thumbnail.align === "end"
                 }),
                 style: {
                   position: isEditor ? "absolute" : "fixed",
@@ -2334,7 +2334,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                   return /* @__PURE__ */ jsx(
                     "button",
                     {
-                      className: classes.thumbItem,
+                      className: classes$1.thumbItem,
                       style: {
                         ...slider.direction === "horiz" && thumbnail.fit !== "fit" ? { height: scalingValue(activeSizeValue, isEditor) } : {},
                         ...slider.direction === "vert" && thumbnail.fit !== "fit" ? { width: scalingValue(activeSizeValue, isEditor) } : {},
@@ -3426,10 +3426,946 @@ const LightboxComponent = {
     required: ["settings", "content", "styles"]
   }
 };
+const wrapper = "Testimonials-module__wrapper___eCRwv";
+const cover = "Testimonials-module__cover___5I7Fh";
+const caption = "Testimonials-module__caption___-YQRG";
+const creds = "Testimonials-module__creds___KKvX1";
+const icon = "Testimonials-module__icon___SstqT";
+const arrow = "Testimonials-module__arrow___NO6BN";
+const nextArrow = "Testimonials-module__nextArrow___L3G-W";
+const arrowInner = "Testimonials-module__arrowInner___GSjnA";
+const arrowIcon = "Testimonials-module__arrowIcon___fw7vy";
+const arrowImg = "Testimonials-module__arrowImg___7R9fl";
+const mirror = "Testimonials-module__mirror___JkFna";
+const classes = {
+  wrapper,
+  cover,
+  caption,
+  creds,
+  icon,
+  arrow,
+  nextArrow,
+  arrowInner,
+  arrowIcon,
+  arrowImg,
+  mirror
+};
+function getAlignPosition(alignment, offset, isEditor) {
+  const styles2 = {};
+  const [vertical, horizontal] = alignment.split("-");
+  if (vertical === "top") {
+    styles2.top = "0";
+    styles2.bottom = "auto";
+  } else if (vertical === "middle") {
+    styles2.top = "50%";
+    styles2.bottom = "auto";
+  } else if (vertical === "bottom") {
+    styles2.top = "auto";
+    styles2.bottom = "0";
+  }
+  if (horizontal === "left") {
+    styles2.left = "0";
+    styles2.right = "auto";
+  } else if (horizontal === "center") {
+    styles2.left = "50%";
+    styles2.right = "auto";
+  } else if (horizontal === "right") {
+    styles2.left = "auto";
+    styles2.right = "0";
+  }
+  if (vertical === "middle" && horizontal === "center") {
+    styles2.transform = `translate(calc(-50% + ${scalingValue(offset.x, isEditor)}), calc(-50% + ${scalingValue(offset.y, isEditor)}))`;
+  } else if (vertical === "middle") {
+    styles2.transform = `translate(${scalingValue(offset.x, isEditor)}, calc(-50% + ${scalingValue(offset.y, isEditor)}))`;
+  } else if (horizontal === "center") {
+    styles2.transform = `translate(calc(-50% + ${scalingValue(offset.x, isEditor)}), ${scalingValue(offset.y, isEditor)})`;
+  } else {
+    styles2.transform = `translate(${scalingValue(offset.x, isEditor)}, ${scalingValue(offset.y, isEditor)})`;
+  }
+  return styles2;
+}
+const Testimonials = ({ settings, content, styles: styles2 }) => {
+  const sliderRef = useRef(null);
+  const { general, card, controls } = settings;
+  const { width, height } = card.dimensions;
+  const perMove = settings.general.move === "one" ? 1 : settings.general.inView || 1;
+  const perPage = settings.general.inView || 3;
+  const wrapperWidth = !settings.general.autoplay ? width * perPage + settings.card.gap * (perPage - 1) + card.borderWidth * 2 : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", display: "flex", justifyContent: settings.general.alignment }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${classes.wrapper}`,
+        style: wrapperWidth ? { width: `${scalingValue(wrapperWidth, false)}` } : void 0,
+        children: /* @__PURE__ */ jsx(
+          Splide,
+          {
+            ref: sliderRef,
+            options: {
+              type: "loop",
+              fixedWidth: width,
+              ...!settings.general.autoplay && {
+                perPage,
+                width: wrapperWidth
+              },
+              arrows: false,
+              perMove,
+              gap: settings.card.gap,
+              padding: 0,
+              autoplay: settings.general.autoplay,
+              speed: settings.general.speed,
+              interval: settings.general.autoplay ? settings.general.speed : 0,
+              rewind: true,
+              easing: "linear",
+              direction: settings.general.direction === "left" ? "ltr" : "rtl",
+              pagination: false,
+              pauseOnHover: settings.general.pause === "hover",
+              pauseOnFocus: settings.general.pause === "click"
+            },
+            children: content.map((item, index) => {
+              var _a, _b, _c, _d, _e;
+              return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsxs("div", { style: { width: `${width}px`, height: `${height}px`, borderRadius: `${settings.card.corner}px`, border: `${settings.card.borderWidth}px solid ${settings.card.borderColor}`, backgroundColor: settings.card.bgColor, overflow: "hidden", boxSizing: "border-box" }, children: [
+                /* @__PURE__ */ jsx("img", { src: (_a = item.image) == null ? void 0 : _a.url, alt: (_b = item.image) == null ? void 0 : _b.name, style: { width: "100%", height: "100%", objectFit: ((_c = item.image) == null ? void 0 : _c.objectFit) || "cover" } }),
+                /* @__PURE__ */ jsx("div", { className: classes.cover, style: { background: settings.elements.cover.gradient, borderRadius: `${settings.card.corner}px` } }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("img", { src: (_d = item.icon) == null ? void 0 : _d.url, alt: (_e = item.icon) == null ? void 0 : _e.name, className: classes.icon, style: getAlignPosition(settings.elements.icon.alignment, settings.elements.icon.offset) }),
+                  /* @__PURE__ */ jsx("div", { className: classes.caption, style: getAlignPosition(settings.elements.text.alignment, settings.elements.text.offset), children: /* @__PURE__ */ jsx(RichTextRenderer, { content: item.imageCaption }) }),
+                  /* @__PURE__ */ jsx("div", { className: classes.creds, style: getAlignPosition(settings.elements.creds.alignment, settings.elements.creds.offset), children: /* @__PURE__ */ jsx(RichTextRenderer, { content: item.creds }) })
+                ] })
+              ] }) }, index);
+            })
+          }
+        )
+      }
+    ) }),
+    controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classes.arrow,
+          style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
+          children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: classes.arrowInner,
+              style: { transform: `translate(${scalingValue(controls.offset.x, false)}, ${scalingValue(controls.offset.y, false)}) scale(${controls.scale / 100})` },
+              onClick: () => {
+                var _a;
+                return (_a = sliderRef.current) == null ? void 0 : _a.go("-1");
+              },
+              "aria-label": "Previous",
+              children: [
+                controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                  SvgImage,
+                  {
+                    url: controls.arrowsImgUrl,
+                    fill: controls.color,
+                    hoverFill: controls.hover,
+                    className: cn(classes.arrowImg, classes.mirror)
+                  }
+                ),
+                !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(classes.arrowIcon, classes.arrowImg, classes.mirror) })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(classes.arrow, classes.nextArrow),
+          style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
+          children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: classes.arrowInner,
+              style: { transform: `translate(${scalingValue(controls.offset.x * -1, false)}, ${scalingValue(controls.offset.y, false)}) scale(${controls.scale / 100})` },
+              onClick: () => {
+                var _a;
+                return (_a = sliderRef.current) == null ? void 0 : _a.go("+1");
+              },
+              "aria-label": "Next",
+              children: [
+                controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                  SvgImage,
+                  {
+                    url: controls.arrowsImgUrl,
+                    fill: controls.color,
+                    hoverFill: controls.hover,
+                    className: classes.arrowImg
+                  }
+                ),
+                !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(classes.arrowIcon, classes.arrowImg) })
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+function ArrowIcon({ color, className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 18", className, children: /* @__PURE__ */ jsx("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ jsx("path", { d: "M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z", id: "Shape-Copy", fill: color, transform: "translate(5, 9) rotate(-90) translate(-5, -9)" }) }) });
+}
+const TestimonialsComponent = {
+  element: Testimonials,
+  id: "testimonials",
+  name: "Testimonials",
+  preview: {
+    type: "video",
+    url: "https://cdn.cntrl.site/component-assets/testimonials.mp4"
+  },
+  defaultSize: {
+    width: 700,
+    height: 400
+  },
+  schema: {
+    type: "object",
+    properties: {
+      settings: {
+        layoutBased: true,
+        type: "object",
+        display: {
+          type: "settings-block"
+        },
+        properties: {
+          general: {
+            title: "general",
+            icon: "thumbnail",
+            tooltip: "General",
+            type: "object",
+            properties: {
+              autoplay: {
+                type: "boolean",
+                display: {
+                  type: "ratio-group",
+                  direction: "horizontal"
+                },
+                enum: ["on", "off"]
+              },
+              inView: {
+                type: "number",
+                title: "In View",
+                min: 1,
+                display: {
+                  type: "numeric-input"
+                }
+              },
+              alignment: {
+                type: "string",
+                title: "Align",
+                display: {
+                  type: "align-group",
+                  direction: "horizontal"
+                },
+                enum: ["start", "center", "end"]
+              },
+              move: {
+                type: "string",
+                display: {
+                  type: "ratio-group",
+                  direction: "horizontal"
+                },
+                enum: ["one", "view"]
+              },
+              speed: {
+                type: "number",
+                title: "Speed",
+                min: 100,
+                max: 1e4,
+                step: 100,
+                display: {
+                  type: "numeric-input"
+                }
+              },
+              direction: {
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["left", "right"]
+              },
+              pause: {
+                title: "Pause on",
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["hover", "click", "off"]
+              }
+            }
+          },
+          card: {
+            title: "card",
+            icon: "card",
+            tooltip: "Card",
+            type: "object",
+            properties: {
+              dimensions: {
+                type: "object",
+                title: "Size",
+                display: {
+                  type: "group"
+                },
+                properties: {
+                  width: {
+                    type: "number",
+                    label: "W",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
+                  },
+                  height: {
+                    type: "number",
+                    label: "H",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
+                  }
+                }
+              },
+              gap: {
+                type: "number",
+                title: "Gap",
+                scalingEnabled: true,
+                min: 0,
+                display: {
+                  type: "numeric-input"
+                }
+              },
+              corner: {
+                type: "number",
+                title: "Corners",
+                scalingEnabled: true,
+                min: 0,
+                display: {
+                  type: "numeric-input"
+                }
+              },
+              borders: {
+                type: "object",
+                title: "Borders",
+                display: {
+                  type: "group"
+                },
+                properties: {
+                  borderWidth: {
+                    type: "number",
+                    title: "Borders",
+                    scalingEnabled: true,
+                    min: 0,
+                    display: {
+                      type: "numeric-input"
+                    }
+                  },
+                  borderColor: {
+                    title: "Border Color",
+                    type: "string",
+                    display: {
+                      type: "settings-color-picker",
+                      format: "single"
+                    }
+                  }
+                }
+              },
+              bgColor: {
+                title: "BG color",
+                type: "string",
+                display: {
+                  type: "settings-color-picker",
+                  format: "single"
+                }
+              }
+            }
+          },
+          elements: {
+            title: "elements",
+            icon: "star",
+            tooltip: "Elements",
+            type: "object",
+            properties: {
+              text: {
+                type: "object",
+                title: "Text",
+                display: {
+                  type: "group"
+                },
+                properties: {
+                  alignment: {
+                    type: "string",
+                    display: {
+                      type: "position-selector"
+                    },
+                    enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
+                  },
+                  offset: {
+                    type: "object",
+                    title: "Offset",
+                    display: {
+                      type: "group"
+                    },
+                    properties: {
+                      x: {
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
+                      },
+                      y: {
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
+                      }
+                    }
+                  }
+                }
+              },
+              icon: {
+                type: "object",
+                title: "Icon",
+                display: {
+                  type: "group"
+                },
+                properties: {
+                  alignment: {
+                    type: "string",
+                    display: {
+                      type: "position-selector"
+                    },
+                    enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
+                  },
+                  offset: {
+                    type: "object",
+                    title: "Offset",
+                    display: {
+                      type: "group"
+                    },
+                    properties: {
+                      x: {
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
+                      },
+                      y: {
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
+                      }
+                    }
+                  },
+                  scale: {
+                    type: "number",
+                    title: "scale",
+                    min: 50,
+                    max: 600,
+                    display: {
+                      type: "range-control"
+                    }
+                  }
+                }
+              },
+              creds: {
+                type: "object",
+                title: "Credentials",
+                display: {
+                  type: "group"
+                },
+                properties: {
+                  alignment: {
+                    type: "string",
+                    display: {
+                      type: "position-selector"
+                    },
+                    enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
+                  },
+                  offset: {
+                    type: "object",
+                    title: "Offset",
+                    display: {
+                      type: "group"
+                    },
+                    properties: {
+                      x: {
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
+                      },
+                      y: {
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
+                      }
+                    }
+                  }
+                }
+              },
+              cover: {
+                type: "object",
+                title: "Cover",
+                display: {
+                  type: "group"
+                },
+                properties: {
+                  gradient: {
+                    title: "Gradient",
+                    type: "string",
+                    display: {
+                      type: "settings-color-picker",
+                      format: "gradient"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          controls: {
+            title: "controls",
+            icon: "controls",
+            tooltip: "Controls",
+            type: "object",
+            properties: {
+              isActive: {
+                type: "boolean",
+                display: {
+                  type: "setting-toggle"
+                }
+              },
+              arrowsImgUrl: {
+                type: ["string", "null"],
+                display: {
+                  type: "settings-image-input"
+                }
+              },
+              offset: {
+                type: "object",
+                title: "Offset",
+                display: {
+                  type: "group"
+                },
+                properties: {
+                  x: {
+                    type: "number",
+                    label: "X",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
+                  },
+                  y: {
+                    type: "number",
+                    label: "Y",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
+                  }
+                }
+              },
+              scale: {
+                type: "number",
+                title: "scale",
+                min: 50,
+                max: 600,
+                display: {
+                  type: "range-control"
+                }
+              },
+              color: {
+                title: "color",
+                type: "string",
+                display: {
+                  type: "settings-color-picker",
+                  format: "single"
+                }
+              },
+              hover: {
+                title: "hover",
+                type: "string",
+                display: {
+                  type: "settings-color-picker",
+                  format: "single"
+                }
+              }
+            }
+          }
+        },
+        default: {
+          general: {
+            autoplay: true,
+            inView: 3,
+            alignment: "center",
+            move: "one",
+            speed: 3e3,
+            direction: "left",
+            pause: "hover"
+          },
+          card: {
+            dimensions: {
+              width: 300,
+              height: 400
+            },
+            gap: 20,
+            corner: 10,
+            borderWidth: 0,
+            borderColor: "#000000",
+            bgColor: "#ffffff"
+          },
+          controls: {
+            isActive: false,
+            arrowsImgUrl: null,
+            offset: {
+              x: 0,
+              y: 0
+            },
+            scale: 100,
+            color: "#000000",
+            hover: "#cccccc"
+          },
+          elements: {
+            text: {
+              alignment: "bottom-center",
+              offset: {
+                x: 0,
+                y: 0
+              }
+            },
+            icon: {
+              alignment: "top-left",
+              offset: {
+                x: 0,
+                y: 0
+              },
+              scale: 100
+            },
+            creds: {
+              alignment: "bottom-center",
+              offset: {
+                x: 0,
+                y: 0
+              }
+            },
+            cover: {
+              gradient: ""
+            }
+          }
+        }
+      },
+      content: {
+        layoutBased: false,
+        type: "array",
+        settings: {
+          addItemFromFileExplorer: true,
+          defaultWidth: 500
+        },
+        items: {
+          type: "object",
+          properties: {
+            image: {
+              type: "object",
+              label: "Image",
+              display: {
+                minWidth: 58,
+                maxWidth: 108,
+                type: "media-input"
+              },
+              properties: {
+                url: {
+                  type: "string"
+                },
+                name: {
+                  type: "string"
+                },
+                objectFit: {
+                  type: "string",
+                  enum: ["cover", "contain"]
+                }
+              },
+              required: ["url", "name"]
+            },
+            icon: {
+              type: "object",
+              label: "Icon",
+              display: {
+                minWidth: 58,
+                maxWidth: 108,
+                type: "media-input"
+              },
+              properties: {
+                url: {
+                  type: "string"
+                },
+                name: {
+                  type: "string"
+                },
+                objectFit: {
+                  type: "string",
+                  enum: ["cover", "contain"]
+                }
+              },
+              required: ["url", "name"]
+            },
+            imageCaption: {
+              placeholder: "Add Caption...",
+              label: "Description",
+              display: {
+                type: "rich-text",
+                minWidth: 300,
+                maxWidth: 550
+              }
+            },
+            creds: {
+              placeholder: "Add Credentials...",
+              label: "Credentials",
+              display: {
+                type: "rich-text",
+                minWidth: 300,
+                maxWidth: 550
+              }
+            }
+          },
+          required: ["image"]
+        },
+        default: [
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/component-assets/2.jpg",
+              name: "Testimonial-1.png"
+            },
+            icon: {
+              objectFit: "cover",
+              url: "",
+              name: ""
+            },
+            imageCaption: [
+              {
+                type: "paragraph",
+                children: [{ text: "" }]
+              }
+            ],
+            creds: [
+              {
+                type: "paragraph",
+                children: [{ text: "" }]
+              }
+            ]
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/component-assets/3.jpg",
+              name: "Testimonial-2.png"
+            },
+            icon: {
+              objectFit: "cover",
+              url: "",
+              name: ""
+            },
+            imageCaption: [
+              {
+                type: "paragraph",
+                children: [{ text: "" }]
+              }
+            ],
+            creds: [
+              {
+                type: "paragraph",
+                children: [{ text: "" }]
+              }
+            ]
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/component-assets/4.jpg",
+              name: "Testimonial-3.png"
+            },
+            icon: {
+              objectFit: "cover",
+              url: "",
+              name: ""
+            },
+            imageCaption: [
+              {
+                type: "paragraph",
+                children: [{ text: "" }]
+              }
+            ],
+            creds: [
+              {
+                type: "paragraph",
+                children: [{ text: "" }]
+              }
+            ]
+          }
+        ]
+      },
+      styles: {
+        layoutBased: true,
+        type: "object",
+        properties: {
+          caption: {
+            dataName: "caption",
+            type: "object",
+            properties: {
+              fontSettings: {
+                type: "object",
+                display: {
+                  type: "font-settings"
+                },
+                properties: {
+                  fontFamily: {
+                    type: "string"
+                  },
+                  fontWeight: {
+                    type: "number"
+                  },
+                  fontStyle: {
+                    type: "string"
+                  }
+                }
+              },
+              widthSettings: {
+                display: {
+                  type: "text-width-control"
+                },
+                type: "object",
+                properties: {
+                  width: {
+                    type: "number"
+                  },
+                  sizing: {
+                    type: "string",
+                    enum: ["auto", "manual"]
+                  }
+                }
+              },
+              fontSizeLineHeight: {
+                type: "object",
+                display: {
+                  type: "font-size-line-height"
+                },
+                properties: {
+                  fontSize: {
+                    type: "number"
+                  },
+                  lineHeight: {
+                    type: "number"
+                  }
+                }
+              },
+              letterSpacing: {
+                display: {
+                  type: "letter-spacing-input"
+                },
+                type: "number"
+              },
+              wordSpacing: {
+                display: {
+                  type: "word-spacing-input"
+                },
+                type: "number"
+              },
+              textAlign: {
+                display: {
+                  type: "text-align-control"
+                },
+                type: "string",
+                enum: ["left", "center", "right"]
+              },
+              textAppearance: {
+                display: {
+                  type: "text-appearance"
+                },
+                properties: {
+                  textTransform: {
+                    type: "string",
+                    enum: ["none", "uppercase", "lowercase"]
+                  },
+                  textDecoration: {
+                    type: "string",
+                    enum: ["none", "underline"]
+                  },
+                  fontVariant: {
+                    type: "string",
+                    enum: ["normal", "small-caps"]
+                  }
+                }
+              },
+              color: {
+                display: {
+                  type: "style-panel-color-picker"
+                },
+                type: "string"
+              }
+            }
+          }
+        },
+        default: {
+          caption: {
+            widthSettings: {
+              width: 0.13,
+              sizing: "auto"
+            },
+            fontSettings: {
+              fontFamily: "Arial",
+              fontWeight: 400,
+              fontStyle: "normal"
+            },
+            fontSizeLineHeight: {
+              fontSize: 0.02,
+              lineHeight: 0.02
+            },
+            letterSpacing: 0,
+            wordSpacing: 0,
+            textAlign: "left",
+            textAppearance: {
+              textTransform: "none",
+              textDecoration: "none",
+              fontVariant: "normal"
+            },
+            color: "#000000"
+          }
+        }
+      }
+    },
+    required: ["settings", "content", "styles"]
+  }
+};
 const components = [
   ControlSliderComponent,
   ControlImageRevealSliderComponent,
-  LightboxComponent
+  LightboxComponent,
+  TestimonialsComponent
 ];
 export {
   components