@cntrl-site/components 0.1.10-alpha.3 → 0.1.10-alpha.4

package/dist/index.mjs

@@ -1,19 +1,19 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { Splide, SplideSlide } from "@splidejs/react-splide";
 import cn from "classnames";
 import { createPortal } from "react-dom";
-const wrapper$1 = "ControlSlider-module__wrapper___sHEkd";
+const wrapper = "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$2 = "ControlSlider-module__arrow___05ghY";
+const arrow$1 = "ControlSlider-module__arrow___05ghY";
 const arrowVertical$1 = "ControlSlider-module__arrowVertical___tBfVN";
-const nextArrow$2 = "ControlSlider-module__nextArrow___-30Yc";
-const arrowInner$2 = "ControlSlider-module__arrowInner___aEra3";
+const nextArrow$1 = "ControlSlider-module__nextArrow___-30Yc";
+const arrowInner$1 = "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 arrowImg$1 = "ControlSlider-module__arrowImg___2dwJW";
+const mirror$1 = "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$2 = "ControlSlider-module__cover___KdDat";
+const cover$1 = "ControlSlider-module__cover___KdDat";
 const styles$3 = {
-  wrapper: wrapper$1,
+  wrapper,
   hoverArrow,
   sliderItem,
   sliderImage,
-  arrow: arrow$2,
+  arrow: arrow$1,
   arrowVertical: arrowVertical$1,
-  nextArrow: nextArrow$2,
-  arrowInner: arrowInner$2,
+  nextArrow: nextArrow$1,
+  arrowInner: arrowInner$1,
   arrowIcon: arrowIcon$1,
-  arrowImg: arrowImg$2,
-  mirror: mirror$2,
+  arrowImg: arrowImg$1,
+  mirror: mirror$1,
   pagination,
   paginationInner,
   paginationVertical,
@@ -89,7 +89,7 @@ const styles$3 = {
   bottomRightAlignment,
   clickOverlay,
   contain: contain$1,
-  cover: cover$2
+  cover: cover$1
 };
 const link$1 = "RichTextRenderer-module__link___BWeZ2";
 const styles$2 = {
@@ -1049,12 +1049,12 @@ const ControlSliderComponent = {
   }
 };
 const imageRevealSlider = "ImageRevealSlider-module__imageRevealSlider___UE5Ob";
-const image$1 = "ImageRevealSlider-module__image___Qjt-e";
+const image = "ImageRevealSlider-module__image___Qjt-e";
 const link = "ImageRevealSlider-module__link___N-iLG";
 const cursor = "ImageRevealSlider-module__cursor___2U03d";
 const styles = {
   imageRevealSlider,
-  image: image$1,
+  image,
   link,
   cursor
 };
@@ -1615,6 +1615,7 @@ const ControlImageRevealSliderComponent = {
     }
   }
 };
+const hidden = "LightBox-module__hidden___9s-9x";
 const heroImage = "LightBox-module__heroImage___sTxNF";
 const background = "LightBox-module__background___rm9ml";
 const editor = "LightBox-module__editor___4ACaY";
@@ -1622,16 +1623,18 @@ 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$1 = "LightBox-module__cover___hNvOG";
-const caption$1 = "LightBox-module__caption___b6L2I";
+const cover = "LightBox-module__cover___hNvOG";
+const caption = "LightBox-module__caption___b6L2I";
 const captionTextInner = "LightBox-module__captionTextInner___rCGNH";
 const lightboxSplide = "LightBox-module__lightboxSplide___XFuWC";
-const arrow$1 = "LightBox-module__arrow___iz38X";
+const arrow = "LightBox-module__arrow___iz38X";
 const arrowVertical = "LightBox-module__arrowVertical___Zfz81";
-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 nextArrow = "LightBox-module__nextArrow___zkAQN";
+const arrowInner = "LightBox-module__arrowInner___p48sW";
+const arrowIcon = "LightBox-module__arrowIcon___3VaFf";
+const arrowImg = "LightBox-module__arrowImg___pNV88";
+const mirror = "LightBox-module__mirror___pjeXc";
+const thumbsWrapper = "LightBox-module__thumbsWrapper___GB-nU";
 const thumbsContainerVertical = "LightBox-module__thumbsContainerVertical___wttk5";
 const thumbsContainer = "LightBox-module__thumbsContainer___osSma";
 const thumbsAlignStart = "LightBox-module__thumbsAlignStart___MO6tY";
@@ -1650,7 +1653,8 @@ 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$1 = {
+const classes = {
+  hidden,
   heroImage,
   background,
   editor,
@@ -1658,16 +1662,18 @@ const classes$1 = {
   imageStyle,
   imgWrapper,
   contain,
-  cover: cover$1,
-  caption: caption$1,
+  cover,
+  caption,
   captionTextInner,
   lightboxSplide,
-  arrow: arrow$1,
+  arrow,
   arrowVertical,
-  nextArrow: nextArrow$1,
-  arrowInner: arrowInner$1,
-  arrowImg: arrowImg$1,
-  mirror: mirror$1,
+  nextArrow,
+  arrowInner,
+  arrowIcon,
+  arrowImg,
+  mirror,
+  thumbsWrapper,
   thumbsContainerVertical,
   thumbsContainer,
   thumbsAlignStart,
@@ -1722,9 +1728,14 @@ const getPositionStyles = (position, offset, isEditor) => {
   return styles2;
 };
 function getDisplayedImageRect(img2) {
-  const container2 = img2.getBoundingClientRect();
-  const containerW = container2.width;
-  const containerH = container2.height;
+  const container = img2.getBoundingClientRect();
+  const style = window.getComputedStyle(img2);
+  const paddingTop = parseFloat(style.paddingTop) || 0;
+  const paddingRight = parseFloat(style.paddingRight) || 0;
+  const paddingBottom = parseFloat(style.paddingBottom) || 0;
+  const paddingLeft = parseFloat(style.paddingLeft) || 0;
+  const containerW = Math.max(0, container.width - paddingLeft - paddingRight);
+  const containerH = Math.max(0, container.height - paddingTop - paddingBottom);
   const imgW = img2.naturalWidth;
   const imgH = img2.naturalHeight;
   const containerRatio = containerW / containerH;
@@ -1737,8 +1748,10 @@ function getDisplayedImageRect(img2) {
     renderedH = containerH;
     renderedW = containerH * imgRatio;
   }
-  const offsetX = (containerW - renderedW) / 2 + container2.left;
-  const offsetY = (containerH - renderedH) / 2 + container2.top;
+  const contentLeft = container.left + paddingLeft;
+  const contentTop = container.top + paddingTop;
+  const offsetX = (containerW - renderedW) / 2 + contentLeft;
+  const offsetY = (containerH - renderedH) / 2 + contentTop;
   return {
     x: offsetX,
     y: offsetY,
@@ -1767,81 +1780,81 @@ function getColorAlpha(color) {
 }
 function getAnimationClasses(type, direction) {
   const appearClass = (() => {
-    if (type === "fade in") return classes$1.fadeIn;
+    if (type === "fade in") return classes.fadeIn;
     if (type === "slide in" || type === "mix") {
       switch (direction) {
         case "left":
-          return classes$1.slideInLeft;
+          return classes.slideInLeft;
         case "right":
-          return classes$1.slideInRight;
+          return classes.slideInRight;
         case "top":
-          return classes$1.slideInTop;
+          return classes.slideInTop;
         case "bottom":
-          return classes$1.slideInBottom;
+          return classes.slideInBottom;
         default:
-          return classes$1.slideInRight;
+          return classes.slideInRight;
       }
     }
-    return classes$1.fadeIn;
+    return classes.fadeIn;
   })();
   const backdropAppearClass = (() => {
-    if (type === "fade in" || type === "mix") return classes$1.fadeIn;
+    if (type === "fade in" || type === "mix") return classes.fadeIn;
     if (type === "slide in") {
       switch (direction) {
         case "left":
-          return classes$1.slideInLeft;
+          return classes.slideInLeft;
         case "right":
-          return classes$1.slideInRight;
+          return classes.slideInRight;
         case "top":
-          return classes$1.slideInTop;
+          return classes.slideInTop;
         case "bottom":
-          return classes$1.slideInBottom;
+          return classes.slideInBottom;
         default:
-          return classes$1.slideInRight;
+          return classes.slideInRight;
       }
     }
-    return classes$1.fadeIn;
+    return classes.fadeIn;
   })();
   const backdropDisappearClass = (() => {
-    if (type === "fade in" || type === "mix") return classes$1.fadeOut;
+    if (type === "fade in" || type === "mix") return classes.fadeOut;
     if (type === "slide in") {
       switch (direction) {
         case "left":
-          return classes$1.slideOutLeft;
+          return classes.slideOutLeft;
         case "right":
-          return classes$1.slideOutRight;
+          return classes.slideOutRight;
         case "top":
-          return classes$1.slideOutTop;
+          return classes.slideOutTop;
         case "bottom":
-          return classes$1.slideOutBottom;
+          return classes.slideOutBottom;
         default:
-          return classes$1.slideOutRight;
+          return classes.slideOutRight;
       }
     }
-    return classes$1.fadeOut;
+    return classes.fadeOut;
   })();
   const disappearClass = (() => {
-    if (type === "fade in") return classes$1.fadeOut;
+    if (type === "fade in") return classes.fadeOut;
     if (type === "slide in" || type === "mix") {
       switch (direction) {
         case "left":
-          return classes$1.slideOutLeft;
+          return classes.slideOutLeft;
         case "right":
-          return classes$1.slideOutRight;
+          return classes.slideOutRight;
         case "top":
-          return classes$1.slideOutTop;
+          return classes.slideOutTop;
         case "bottom":
-          return classes$1.slideOutBottom;
+          return classes.slideOutBottom;
         default:
-          return classes$1.slideOutRight;
+          return classes.slideOutRight;
       }
     }
-    return classes$1.fadeOut;
+    return classes.fadeOut;
   })();
   return { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass };
 }
 const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) => {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
   const { url } = settings.thumbnailBlock.cover;
   useEffect(() => {
     if (activeEvent === "close") {
@@ -1857,7 +1870,7 @@ const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeE
       {
         src: url,
         alt: "Cover",
-        className: classes$1.heroImage,
+        className: classes.heroImage,
         onClick: () => setOpen(true)
       }
     ),
@@ -1955,6 +1968,19 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       (_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
     }
   };
+  const isClickInImagePadding = (img2, clientX, clientY) => {
+    const rect = img2.getBoundingClientRect();
+    const style = window.getComputedStyle(img2);
+    const paddingTop = parseFloat(style.paddingTop) || 0;
+    const paddingRight = parseFloat(style.paddingRight) || 0;
+    const paddingBottom = parseFloat(style.paddingBottom) || 0;
+    const paddingLeft = parseFloat(style.paddingLeft) || 0;
+    const contentLeft = rect.left + paddingLeft;
+    const contentRight = rect.right - paddingRight;
+    const contentTop = rect.top + paddingTop;
+    const contentBottom = rect.bottom - paddingBottom;
+    return clientX < contentLeft || clientX > contentRight || clientY < contentTop || clientY > contentBottom;
+  };
   const handleImageWrapperClick = (e) => {
     const currentImage = content[currentIndex];
     const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
@@ -1972,7 +1998,16 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
     let inside;
     if (isCover && imageRef.current) {
       const imgRect = imageRef.current.getBoundingClientRect();
-      inside = clientX >= imgRect.left && clientX <= imgRect.right && clientY >= imgRect.top && clientY <= imgRect.bottom;
+      const style = window.getComputedStyle(imageRef.current);
+      const paddingTop = parseFloat(style.paddingTop) || 0;
+      const paddingRight = parseFloat(style.paddingRight) || 0;
+      const paddingBottom = parseFloat(style.paddingBottom) || 0;
+      const paddingLeft = parseFloat(style.paddingLeft) || 0;
+      const contentLeft = imgRect.left + paddingLeft;
+      const contentRight = imgRect.right - paddingRight;
+      const contentTop = imgRect.top + paddingTop;
+      const contentBottom = imgRect.bottom - paddingBottom;
+      inside = clientX >= contentLeft && clientX <= contentRight && clientY >= contentTop && clientY <= contentBottom;
     } else {
       const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
       if (!rect) {
@@ -1989,6 +2024,10 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
   };
   const onImageClick = (e) => {
     e.stopPropagation();
+    if (isClickInImagePadding(e.currentTarget, e.clientX, e.clientY)) {
+      handleClose();
+      return;
+    }
     handleTriggerClick(e.currentTarget, e.clientX, e.clientY);
   };
   useEffect(() => {
@@ -2017,6 +2056,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
   useEffect(() => {
     if (isOpen) {
       setCurrentIndex(0);
+      setSplideKey((prev) => prev + 1);
       isClosingRef.current = false;
       setIsClosing(false);
       setAnimationFinished(false);
@@ -2079,7 +2119,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
         return;
       }
       const target = e.target;
-      if (target && (target.closest(`.${classes$1.thumbsContainer}`) || target.closest(`.${classes$1.thumbItem}`))) {
+      if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
         return;
       }
       if (e.touches.length === 0 && e.changedTouches.length > 0) {
@@ -2120,14 +2160,14 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
     animationTimingFunction: "ease",
     animationFillMode: "both"
   };
-  if (!isOpen && !isClosing) return null;
+  if (!document.getElementById(portalId)) return null;
   return createPortal(
     /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           ref: !isEditor ? animationTargetRef : null,
-          className: cn(classes$1.background, isClosing ? backdropDisappearClass : backdropAppearClass, { [classes$1.editor]: isEditor }),
+          className: cn(classes.background, isClosing ? backdropDisappearClass : backdropAppearClass, { [classes.editor]: isEditor }, { [classes.hidden]: !isOpen }),
           style: {
             ...backdropStyles,
             ...animationFinished && !isEditor && !isClosing ? { position: "absolute" } : {}
@@ -2138,7 +2178,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
         "div",
         {
           ref: isEditor ? animationTargetRef : null,
-          className: cn(classes$1.contentStyle, !isClosing ? appearClass : disappearClass, { [classes$1.editor]: isEditor }),
+          className: cn(classes.contentStyle, !isClosing ? appearClass : disappearClass, { [classes.editor]: isEditor }, { [classes.hidden]: !isOpen }),
           style: {
             animationDuration: `${parseInt(appear.duration)}ms`,
             animationTimingFunction: "ease",
@@ -2150,7 +2190,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
               {
                 onMove: (splide) => setCurrentIndex(splide.index),
                 ref: lightboxRef,
-                className: classes$1.lightboxSplide,
+                className: classes.lightboxSplide,
                 options: {
                   arrows: false,
                   speed: slider.duration ? parseInt(slider.duration) : 500,
@@ -2162,7 +2202,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                   height: "100%",
                   type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
                   padding: 0,
-                  rewind: (slider.type === "scale" || slider.type === "fade") && triggers.repeat === "loop"
+                  rewind: (slider.type === "scale" || slider.type === "fade") && triggers.repeat === "loop",
+                  start: 0
                 },
                 style: { "--splide-speed": slider.duration },
                 children: content.map((item, index) => {
@@ -2178,14 +2219,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$1.imgWrapper, onClick: handleImageWrapperClick, children: /* @__PURE__ */ jsx(
+                  return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx("div", { className: classes.imgWrapper, onClick: handleImageWrapperClick, children: /* @__PURE__ */ jsx(
                     "img",
                     {
                       ref: index === currentIndex ? imageRef : null,
-                      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"
+                      className: cn(classes.imageStyle, {
+                        [classes.contain]: item.image.objectFit === "contain",
+                        [classes.cover]: item.image.objectFit === "cover",
+                        [classes.scaleSlide]: slider.type === "scale"
                       }),
                       onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
                       src: item.image.url,
@@ -2197,31 +2238,34 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
               },
               splideKey
             ),
-            controls.isActive && controls.arrowsImgUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+            controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn(classes$1.arrow, { [classes$1.arrowVertical]: slider.direction === "vert" }),
+                  className: cn(classes.arrow, { [classes.arrowVertical]: slider.direction === "vert" }),
                   style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
-                  children: /* @__PURE__ */ jsx(
+                  children: /* @__PURE__ */ jsxs(
                     "button",
                     {
-                      className: classes$1.arrowInner,
+                      className: classes.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;
                         return (_a = lightboxRef.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$1.arrowImg, classes$1.mirror)
-                        }
-                      )
+                      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) })
+                      ]
                     }
                   )
                 }
@@ -2229,27 +2273,30 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn(classes$1.arrow, classes$1.nextArrow, { [classes$1.arrowVertical]: slider.direction === "vert" }),
+                  className: cn(classes.arrow, classes.nextArrow, { [classes.arrowVertical]: slider.direction === "vert" }),
                   style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
-                  children: /* @__PURE__ */ jsx(
+                  children: /* @__PURE__ */ jsxs(
                     "button",
                     {
-                      className: classes$1.arrowInner,
+                      className: classes.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;
                         return (_a = lightboxRef.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$1.arrowImg
-                        }
-                      )
+                      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) })
+                      ]
                     }
                   )
                 }
@@ -2259,12 +2306,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$1.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl }) });
+              return /* @__PURE__ */ jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl, fill: area.closeIconColor, hoverFill: area.closeIconHover }) });
             })(),
             caption2.isActive && /* @__PURE__ */ jsx(
               "div",
               {
-                className: classes$1.caption,
+                className: classes.caption,
                 style: {
                   ...getPositionStyles(caption2.alignment, caption2.offset, isEditor),
                   fontFamily: fontSettings.fontFamily,
@@ -2286,103 +2333,133 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                   "div",
                   {
                     "data-styles": "caption",
-                    className: classes$1.captionTextInner,
+                    className: classes.captionTextInner,
                     style: { ["--link-hover-color"]: caption2.hover },
                     children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
                   }
                 )
               }
             ),
-            thumbnail.isActive && /* @__PURE__ */ jsx(
-              "div",
-              {
-                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",
-                  gap: scalingValue(thumbnail.grid.gap, isEditor),
-                  ...getPositionStyles(thumbnail.position, thumbnail.offset, isEditor)
-                },
-                children: content.map((item, index) => {
-                  const isActive = index === currentIndex;
-                  const thumbDims = thumbnailDimensions[index];
-                  const baseSizeValue = thumbnail.grid.size;
-                  const activeSizeValue = baseSizeValue * (isActive ? thumbnail.activeState.scale : 1);
-                  const getFitDimensions = () => {
-                    if (thumbnail.fit !== "fit" || !thumbDims) return {};
-                    const aspectRatio = thumbDims.width / thumbDims.height;
-                    if (slider.direction === "horiz") {
-                      const heightValue = activeSizeValue;
-                      const widthValue = heightValue * aspectRatio;
-                      return {
-                        width: scalingValue(widthValue, isEditor),
-                        height: scalingValue(heightValue, isEditor)
-                      };
-                    } else {
-                      const widthValue = activeSizeValue;
-                      const heightValue = widthValue / aspectRatio;
-                      return {
-                        width: scalingValue(widthValue, isEditor),
-                        height: scalingValue(heightValue, isEditor)
-                      };
+            thumbnail.isActive && (() => {
+              const [vertical] = thumbnail.position.split("-");
+              const effectivePosition = slider.direction === "horiz" ? `${vertical}-left` : thumbnail.position;
+              const thumbsPositionStyles = getPositionStyles(effectivePosition, thumbnail.offset, isEditor);
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classes.thumbsWrapper,
+                  style: {
+                    position: isEditor ? "absolute" : "fixed",
+                    ...thumbsPositionStyles,
+                    ...slider.direction === "horiz" ? {
+                      maxWidth: "100vw",
+                      width: "100vw",
+                      overflowX: "auto",
+                      overflowY: "hidden"
+                    } : {
+                      maxHeight: "100vh",
+                      overflowY: "auto",
+                      overflowX: "hidden"
                     }
-                  };
-                  return /* @__PURE__ */ jsx(
-                    "button",
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
                     {
-                      className: classes$1.thumbItem,
+                      className: cn(classes.thumbsContainer, {
+                        [classes.thumbsContainerVertical]: slider.direction === "vert",
+                        [classes.thumbsAlignStart]: thumbnail.align === "start",
+                        [classes.thumbsAlignCenter]: thumbnail.align === "center",
+                        [classes.thumbsAlignEnd]: thumbnail.align === "end"
+                      }),
                       style: {
-                        ...slider.direction === "horiz" && thumbnail.fit !== "fit" ? { height: scalingValue(activeSizeValue, isEditor) } : {},
-                        ...slider.direction === "vert" && thumbnail.fit !== "fit" ? { width: scalingValue(activeSizeValue, isEditor) } : {},
-                        ...thumbnail.fit === "cover" ? { width: scalingValue(activeSizeValue, isEditor), height: scalingValue(activeSizeValue, isEditor) } : {},
-                        ...thumbnail.fit === "fit" ? getFitDimensions() : {},
-                        transition: isActive ? "all 0.2s ease" : "none",
-                        opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
-                        ["--thumb-hover"]: thumbnail.activeState.opacity / 100
-                      },
-                      onClick: (e) => {
-                        var _a;
-                        e.stopPropagation();
-                        setCurrentIndex(index);
-                        (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
-                      },
-                      onMouseEnter: () => {
-                        var _a;
-                        if (thumbnail.triggers === "hov") {
-                          (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
-                        }
+                        gap: scalingValue(thumbnail.grid.gap, isEditor)
                       },
-                      children: /* @__PURE__ */ jsx(
-                        "img",
-                        {
-                          src: item.image.url,
-                          alt: item.image.name ?? "",
-                          onLoad: (e) => {
-                            const img2 = e.currentTarget;
-                            if (img2.naturalWidth && img2.naturalHeight) {
-                              setThumbnailDimensions((prev) => ({
-                                ...prev,
-                                [index]: { width: img2.naturalWidth, height: img2.naturalHeight }
-                              }));
+                      children: content.map((item, index) => {
+                        const isActive = index === currentIndex;
+                        const thumbDims = thumbnailDimensions[index];
+                        const baseSizeValue = thumbnail.grid.size;
+                        const activeSizeValue = baseSizeValue * (isActive ? thumbnail.activeState.scale : 1);
+                        const getFitDimensions = () => {
+                          if (thumbnail.fit !== "fit") return {};
+                          if (!thumbDims) {
+                            if (slider.direction === "horiz") {
+                              return { height: scalingValue(activeSizeValue, isEditor) };
+                            } else {
+                              return { width: scalingValue(activeSizeValue, isEditor) };
                             }
-                          },
-                          style: {
-                            objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
-                            ...thumbnail.fit === "fit" ? { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } : {},
-                            ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: "100%", height: "100%" } : {}
                           }
-                        }
-                      )
-                    },
-                    `${item.image.name}-${index}`
-                  );
-                })
-              }
-            )
+                          const aspectRatio = thumbDims.width / thumbDims.height;
+                          if (slider.direction === "horiz") {
+                            const heightValue = activeSizeValue;
+                            const widthValue = heightValue * aspectRatio;
+                            return {
+                              width: scalingValue(widthValue, isEditor),
+                              height: scalingValue(heightValue, isEditor)
+                            };
+                          } else {
+                            const widthValue = activeSizeValue;
+                            const heightValue = widthValue / aspectRatio;
+                            return {
+                              width: scalingValue(widthValue, isEditor),
+                              height: scalingValue(heightValue, isEditor)
+                            };
+                          }
+                        };
+                        return /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            className: classes.thumbItem,
+                            style: {
+                              ...slider.direction === "horiz" && thumbnail.fit !== "fit" ? { height: scalingValue(activeSizeValue, isEditor) } : {},
+                              ...slider.direction === "vert" && thumbnail.fit !== "fit" ? { width: scalingValue(activeSizeValue, isEditor) } : {},
+                              ...thumbnail.fit === "cover" ? { width: scalingValue(activeSizeValue, isEditor), height: scalingValue(activeSizeValue, isEditor) } : {},
+                              ...getFitDimensions(),
+                              transition: isActive ? "all 0.2s ease-out" : "none",
+                              opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
+                              ["--thumb-hover"]: thumbnail.activeState.opacity / 100
+                            },
+                            onClick: (e) => {
+                              var _a;
+                              e.stopPropagation();
+                              setCurrentIndex(index);
+                              (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
+                            },
+                            onMouseEnter: () => {
+                              var _a;
+                              if (thumbnail.triggers === "hov") {
+                                (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
+                              }
+                            },
+                            children: /* @__PURE__ */ jsx(
+                              "img",
+                              {
+                                src: item.image.url,
+                                alt: item.image.name ?? "",
+                                onLoad: (e) => {
+                                  const img2 = e.currentTarget;
+                                  if (img2.naturalWidth && img2.naturalHeight) {
+                                    setThumbnailDimensions((prev) => ({
+                                      ...prev,
+                                      [index]: { width: img2.naturalWidth, height: img2.naturalHeight }
+                                    }));
+                                  }
+                                },
+                                style: {
+                                  objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
+                                  ...thumbnail.fit === "fit" ? { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } : {},
+                                  ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: "100%", height: "100%" } : {}
+                                }
+                              }
+                            )
+                          },
+                          `${item.image.name}-${index}`
+                        );
+                      })
+                    }
+                  )
+                }
+              );
+            })()
           ]
         }
       )
@@ -2390,6 +2467,9 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
     document.getElementById(portalId)
   );
 };
+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 LightboxComponent = {
   element: LightboxGallery,
   id: "lightbox",
@@ -2887,6 +2967,22 @@ const LightboxComponent = {
                         }
                       }
                     }
+                  },
+                  closeIconColor: {
+                    title: "Color",
+                    type: "string",
+                    display: {
+                      type: "settings-color-picker",
+                      format: "single"
+                    }
+                  },
+                  closeIconHover: {
+                    title: "Hover",
+                    type: "string",
+                    display: {
+                      type: "settings-color-picker",
+                      format: "single"
+                    }
                   }
                 }
               },
@@ -2995,7 +3091,7 @@ const LightboxComponent = {
                 padding: { top: 0.06, right: 0, bottom: 0.06, left: 0 }
               },
               controls: {
-                isActive: true,
+                isActive: false,
                 arrowsImgUrl: null,
                 offset: { x: 0, y: 0 },
                 scale: 1,
@@ -3006,6 +3102,8 @@ const LightboxComponent = {
                 color: "rgba(28,31,34,0.9)",
                 blur: 0,
                 closeIconUrl: null,
+                closeIconColor: "#000000",
+                closeIconHover: "#cccccc",
                 closeIconAlign: "top-right",
                 closeIconOffset: { x: 0, y: 0 },
                 closeIconScale: 1
@@ -3063,7 +3161,7 @@ const LightboxComponent = {
                 padding: { top: 0.06, right: 0.05, bottom: 0.06, left: 0.05 }
               },
               controls: {
-                isActive: true,
+                isActive: false,
                 arrowsImgUrl: null,
                 offset: { x: 0, y: 0 },
                 scale: 1,
@@ -3074,6 +3172,8 @@ const LightboxComponent = {
                 color: "rgba(28,31,34,0.9)",
                 blur: 0,
                 closeIconUrl: null,
+                closeIconColor: "#000000",
+                closeIconHover: "#cccccc",
                 closeIconAlign: "top-right",
                 closeIconOffset: { x: 0, y: 0 },
                 closeIconScale: 1
@@ -3131,7 +3231,7 @@ const LightboxComponent = {
                 padding: { top: 0.06, right: 0.1, bottom: 0.06, left: 0.1 }
               },
               controls: {
-                isActive: true,
+                isActive: false,
                 arrowsImgUrl: null,
                 offset: { x: 0, y: 0 },
                 scale: 1,
@@ -3142,6 +3242,8 @@ const LightboxComponent = {
                 color: "rgba(28,31,34,0.9)",
                 blur: 0,
                 closeIconUrl: null,
+                closeIconColor: "#000000",
+                closeIconHover: "#cccccc",
                 closeIconAlign: "top-right",
                 closeIconOffset: { x: 0, y: 0 },
                 closeIconScale: 1
@@ -3426,1352 +3528,10 @@ const LightboxComponent = {
     required: ["settings", "content", "styles"]
   }
 };
-const container = "Testimonials-module__container___H14Dc";
-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 image = "Testimonials-module__image___nHD1Y";
-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 = {
-  container,
-  wrapper,
-  cover,
-  caption,
-  creds,
-  image,
-  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 parseSpeedToMs = (speed) => {
-  if (!speed) return 0;
-  const match = speed.match(/^(\d+)(ms|s)$/);
-  if (!match) return 0;
-  const value = parseInt(match[1], 10);
-  const unit = match[2];
-  return unit === "s" ? value * 1e3 : value;
-};
-const Testimonials = ({ settings, content, styles: styles2, isEditor }) => {
-  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 isAutoplay = settings.general.autoplay === "on";
-  const marqueePerMove = isAutoplay ? 1 : perMove;
-  const speedMs = isAutoplay ? settings.general.speed ? parseSpeedToMs(settings.general.speed) : 0 : 500;
-  const wrapperWidth = !isAutoplay ? scalingValue(width * perPage + settings.card.gap * (perPage - 1) + card.borders.width * 2 * perPage, isEditor ?? false) : void 0;
-  const splideKey = `${general.autoplay}-${general.inView}`;
-  useEffect(() => {
-    var _a;
-    if ((_a = sliderRef.current) == null ? void 0 : _a.splide) {
-      const splide = sliderRef.current.splide;
-      splide.options = {
-        ...splide.options,
-        autoplay: isAutoplay,
-        perPage,
-        perMove: marqueePerMove,
-        interval: isAutoplay ? speedMs || 500 : 0,
-        rewind: !isAutoplay
-      };
-      splide.refresh();
-    }
-  }, [general.autoplay, general.inView, isAutoplay, perPage, marqueePerMove, speedMs]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: classes.container, style: { justifyContent: settings.general.alignment }, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `${classes.wrapper}`,
-        style: wrapperWidth ? { width: wrapperWidth } : void 0,
-        children: /* @__PURE__ */ jsx(
-          Splide,
-          {
-            ref: sliderRef,
-            options: {
-              type: "loop",
-              fixedWidth: scalingValue(width + card.borders.width * 2, isEditor ?? false),
-              ...settings.general.autoplay === "off" && {
-                perPage,
-                width: wrapperWidth
-              },
-              arrows: false,
-              perMove: isAutoplay ? marqueePerMove : perMove,
-              gap: scalingValue(settings.card.gap, isEditor ?? false),
-              padding: 0,
-              drag: false,
-              autoplay: isAutoplay,
-              speed: speedMs,
-              // Transition duration (default to 500ms if not set)
-              interval: speedMs,
-              // Match speed for continuous marquee flow
-              rewind: !isAutoplay,
-              // Disable rewind for smooth marquee, enable for manual mode
-              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;
-              const iconPositionStyles = getAlignPosition(settings.elements.icon.alignment, settings.elements.icon.offset, isEditor);
-              return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    width: scalingValue(width, isEditor ?? false),
-                    height: scalingValue(height, isEditor ?? false),
-                    borderRadius: scalingValue(settings.card.corner, isEditor ?? false),
-                    border: `${scalingValue(settings.card.borders.width, isEditor ?? false)} solid ${settings.card.borders.color}`,
-                    overflow: "hidden",
-                    boxSizing: "border-box"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "img",
-                      {
-                        className: classes.image,
-                        src: (_a = item.image) == null ? void 0 : _a.url,
-                        alt: (_b = item.image) == null ? void 0 : _b.name,
-                        style: { objectFit: ((_c = item.image) == null ? void 0 : _c.objectFit) || "cover" }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: classes.cover,
-                        style: { background: settings.card.bgColor, borderRadius: `${scalingValue(settings.card.corner, isEditor ?? false)}` }
-                      }
-                    ),
-                    /* @__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: {
-                            ...iconPositionStyles,
-                            transform: `${iconPositionStyles.transform || ""} scale(${settings.elements.icon.scale / 100})`
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: classes.caption,
-                          style: getAlignPosition(settings.elements.text.alignment, settings.elements.text.offset, isEditor),
-                          children: /* @__PURE__ */ jsx(RichTextRenderer, { content: item.imageCaption })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: classes.creds,
-                          style: getAlignPosition(settings.elements.creds.alignment, settings.elements.creds.offset, isEditor),
-                          children: /* @__PURE__ */ jsx(RichTextRenderer, { content: item.creds })
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              ) }, index);
-            })
-          },
-          splideKey
-        )
-      }
-    ) }),
-    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, isEditor ?? false)}, ${scalingValue(controls.offset.y, isEditor ?? false)}) scale(${controls.scale / 100})` },
-              onClick: () => {
-                var _a;
-                return (_a = sliderRef.current) == null ? void 0 : _a.go(isAutoplay ? "-1" : `-${perMove}`);
-              },
-              "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, isEditor ?? false)}, ${scalingValue(controls.offset.y, isEditor ?? false)}) scale(${controls.scale / 100})` },
-              onClick: () => {
-                var _a;
-                return (_a = sliderRef.current) == null ? void 0 : _a.go(isAutoplay ? "+1" : `+${perMove}`);
-              },
-              "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: {
-            icon: "thumbnail",
-            type: "object",
-            properties: {
-              autoplay: {
-                type: "string",
-                title: "Autoplay",
-                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: "Alignment",
-                display: {
-                  type: "align-group",
-                  direction: "vertical"
-                },
-                enum: ["left", "center", "right"]
-              },
-              move: {
-                type: "string",
-                title: "Move",
-                display: {
-                  type: "ratio-group",
-                  direction: "horizontal"
-                },
-                enum: ["one", "view"]
-              },
-              speed: {
-                type: ["string", "null"],
-                title: "Speed",
-                display: {
-                  type: "step-selector"
-                },
-                enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
-              },
-              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: {
-            icon: "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,
-                label: "icon:border-radius",
-                display: {
-                  type: "numeric-input"
-                }
-              },
-              borders: {
-                type: "object",
-                title: "Borders",
-                display: {
-                  type: "group"
-                },
-                properties: {
-                  width: {
-                    type: "number",
-                    label: "icon:border-width",
-                    scalingEnabled: true,
-                    min: 0,
-                    display: {
-                      type: "numeric-input"
-                    }
-                  },
-                  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",
-            type: "object",
-            properties: {
-              elements: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["text", "icon", "caption"]
-              },
-              text: {
-                type: "object",
-                display: {
-                  type: "group"
-                },
-                properties: {
-                  alignment: {
-                    type: "string",
-                    display: {
-                      type: "align-grid",
-                      visible: true
-                    },
-                    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",
-                      visible: true
-                    },
-                    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",
-                display: {
-                  type: "group"
-                },
-                properties: {
-                  alignment: {
-                    type: "string",
-                    display: {
-                      type: "align-grid"
-                    },
-                    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",
-                      visible: false
-                    }
-                  }
-                }
-              },
-              creds: {
-                type: "object",
-                display: {
-                  type: "group"
-                },
-                properties: {
-                  alignment: {
-                    type: "string",
-                    display: {
-                      type: "align-grid"
-                    },
-                    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
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          },
-          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: "off",
-            inView: 3,
-            alignment: "center",
-            move: "one",
-            speed: "3s",
-            direction: "left",
-            pause: "off"
-          },
-          card: {
-            dimensions: {
-              width: 0.1,
-              height: 0.2
-            },
-            gap: 0.02,
-            corner: 0.01,
-            borders: {
-              width: 1e-3,
-              color: "#000000"
-            },
-            bgColor: "rgba(255, 255, 255, 0.2)"
-          },
-          controls: {
-            isActive: false,
-            arrowsImgUrl: null,
-            offset: {
-              x: 0,
-              y: 0
-            },
-            scale: 100,
-            color: "#000000",
-            hover: "#cccccc"
-          },
-          elements: {
-            elements: "text",
-            text: {
-              alignment: "middle-left",
-              offset: {
-                x: 0,
-                y: 0
-              }
-            },
-            icon: {
-              alignment: "top-left",
-              offset: {
-                x: 0,
-                y: 0
-              },
-              scale: 100
-            },
-            creds: {
-              alignment: "bottom-left",
-              offset: {
-                x: 0,
-                y: 0
-              }
-            }
-          }
-        },
-        displayRules: [
-          {
-            if: {
-              name: "general.autoplay",
-              value: "off"
-            },
-            then: {
-              name: "properties.general.properties.inView.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "general.autoplay",
-              value: "off"
-            },
-            then: {
-              name: "properties.general.properties.alignment.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "general.autoplay",
-              value: "off"
-            },
-            then: {
-              name: "properties.general.properties.move.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "general.autoplay",
-              value: "on"
-            },
-            then: {
-              name: "properties.general.properties.inView.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "general.autoplay",
-              value: "on"
-            },
-            then: {
-              name: "properties.general.properties.alignment.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "general.autoplay",
-              value: "on"
-            },
-            then: {
-              name: "properties.general.properties.move.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "general.autoplay",
-              value: "on"
-            },
-            then: {
-              name: "properties.general.properties.speed.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "general.autoplay",
-              value: "on"
-            },
-            then: {
-              name: "properties.general.properties.direction.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "general.autoplay",
-              value: "on"
-            },
-            then: {
-              name: "properties.general.properties.pause.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "general.autoplay",
-              value: "off"
-            },
-            then: {
-              name: "properties.general.properties.speed.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "general.autoplay",
-              value: "off"
-            },
-            then: {
-              name: "properties.general.properties.direction.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "general.autoplay",
-              value: "off"
-            },
-            then: {
-              name: "properties.general.properties.pause.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "text"
-            },
-            then: {
-              name: "properties.elements.properties.text.properties.alignment.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "text"
-            },
-            then: {
-              name: "properties.elements.properties.text.properties.offset.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "text"
-            },
-            then: {
-              name: "properties.elements.properties.icon.properties.alignment.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "text"
-            },
-            then: {
-              name: "properties.elements.properties.icon.properties.offset.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "text"
-            },
-            then: {
-              name: "properties.elements.properties.creds.properties.alignment.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "text"
-            },
-            then: {
-              name: "properties.elements.properties.creds.properties.offset.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "icon"
-            },
-            then: {
-              name: "properties.elements.properties.icon.properties.alignment.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "icon"
-            },
-            then: {
-              name: "properties.elements.properties.icon.properties.offset.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "icon"
-            },
-            then: {
-              name: "properties.elements.properties.text.properties.alignment.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "icon"
-            },
-            then: {
-              name: "properties.elements.properties.text.properties.offset.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "icon"
-            },
-            then: {
-              name: "properties.elements.properties.creds.properties.alignment.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "icon"
-            },
-            then: {
-              name: "properties.elements.properties.creds.properties.offset.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "caption"
-            },
-            then: {
-              name: "properties.elements.properties.creds.properties.alignment.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "caption"
-            },
-            then: {
-              name: "properties.elements.properties.creds.properties.offset.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "caption"
-            },
-            then: {
-              name: "properties.elements.properties.text.properties.alignment.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "caption"
-            },
-            then: {
-              name: "properties.elements.properties.text.properties.offset.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "caption"
-            },
-            then: {
-              name: "properties.elements.properties.icon.properties.alignment.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "caption"
-            },
-            then: {
-              name: "properties.elements.properties.icon.properties.offset.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "icon"
-            },
-            then: {
-              name: "properties.elements.properties.icon.properties.scale.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "text"
-            },
-            then: {
-              name: "properties.elements.properties.icon.properties.scale.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "elements.elements",
-              value: "caption"
-            },
-            then: {
-              name: "properties.elements.properties.icon.properties.scale.display.visible",
-              value: false
-            }
-          }
-        ]
-      },
-      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 Text...",
-              label: "Text",
-              display: {
-                type: "rich-text",
-                minWidth: 300,
-                maxWidth: 550
-              }
-            },
-            creds: {
-              placeholder: "Add Caption...",
-              label: "Caption",
-              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: "https://cdn.cntrl.site/projects/01GJ2SPNXG3V5P35ZA35YM1JTW/articles-assets/01KEXYWFPR7GB70E4YBF28T8R6.png",
-              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: "https://cdn.cntrl.site/projects/01GJ2SPNXG3V5P35ZA35YM1JTW/articles-assets/01KEXYWFPR7GB70E4YBF28T8R6.png",
-              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: "https://cdn.cntrl.site/projects/01GJ2SPNXG3V5P35ZA35YM1JTW/articles-assets/01KEXYWFPR7GB70E4YBF28T8R6.png",
-              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,
-  TestimonialsComponent
+  LightboxComponent
 ];
 export {
   components