@cntrl-site/components 0.1.14-alpha.4 → 0.1.14

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
+const React = require("react");
 const reactSplide = require("@splidejs/react-splide");
 const cn = require("classnames");
 const reactDom = require("react-dom");
@@ -13,7 +13,7 @@ const arrow$1 = "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$1 = "ControlSlider-module__arrowIcon___S4ztF";
+const arrowIcon = "ControlSlider-module__arrowIcon___S4ztF";
 const arrowImg$1 = "ControlSlider-module__arrowImg___2dwJW";
 const mirror$1 = "ControlSlider-module__mirror___brd6U";
 const pagination = "ControlSlider-module__pagination___bicLF";
@@ -57,7 +57,7 @@ const styles$3 = {
   arrowVertical: arrowVertical$1,
   nextArrow: nextArrow$1,
   arrowInner: arrowInner$1,
-  arrowIcon: arrowIcon$1,
+  arrowIcon,
   arrowImg: arrowImg$1,
   mirror: mirror$1,
   pagination,
@@ -135,8 +135,8 @@ const styles$1 = {
   img
 };
 const SvgImage = ({ url, fill = "#000000", hoverFill = "#CCCCCC", className = "" }) => {
-  const [supportsMask, setSupportsMask] = react.useState(true);
-  react.useEffect(() => {
+  const [supportsMask, setSupportsMask] = React.useState(true);
+  React.useEffect(() => {
     if (typeof window !== "undefined" && window.CSS) {
       const supported = CSS.supports("mask-image", 'url("")') || CSS.supports("-webkit-mask-image", 'url("")');
       setSupportsMask(supported);
@@ -170,21 +170,21 @@ const alignmentClassName = {
   "bottom-right": styles$3.bottomRightAlignment
 };
 function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
-  const [sliderRef, setSliderRef] = react.useState(null);
-  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = sliderStyles.caption;
-  const [sliderDimensions, setSliderDimensions] = react.useState(void 0);
-  const [wrapperRef, setWrapperRef] = react.useState(null);
-  const [currentSlideIndex, setCurrentSlideIndex] = react.useState(0);
-  const [key, setKey] = react.useState(0);
-  const { direction, transition, controls, pagination: pagination2, caption: caption2, triggers } = settings;
-  const prevSliderTypeRef = react.useRef(transition.type);
+  const [sliderRef, setSliderRef] = React.useState(null);
+  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = sliderStyles.imageCaption;
+  const [sliderDimensions, setSliderDimensions] = React.useState(void 0);
+  const [wrapperRef, setWrapperRef] = React.useState(null);
+  const [currentSlideIndex, setCurrentSlideIndex] = React.useState(0);
+  const [key, setKey] = React.useState(0);
+  const { direction, transition, controls, pagination: pagination2, imageCaption, triggers } = settings;
+  const prevSliderTypeRef = React.useRef(transition.type);
   const { x: controlsOffsetX, y: controlsOffsetY } = settings.controls.offset;
   const handleArrowClick = (dir) => {
     if (sliderRef) {
       sliderRef.go(dir);
     }
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!wrapperRef) return;
     const observer = new ResizeObserver((entries) => {
       if (!sliderRef) return;
@@ -197,7 +197,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
     observer.observe(wrapperRef);
     return () => observer.unobserve(wrapperRef);
   }, [wrapperRef]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!sliderRef || prevSliderTypeRef.current === transition.type) return;
     setKey((prev) => prev + 1);
     prevSliderTypeRef.current = transition.type;
@@ -212,7 +212,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         backgroundColor: transition.backgroundColor && transition.type === "fade in" ? transition.backgroundColor : "transparent"
       },
       children: [
-        settings.caption.isActive && /* @__PURE__ */ jsxRuntime.jsx(
+        settings.imageCaption.isActive && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(styles$3.captionBlock),
@@ -223,7 +223,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                 children: content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: cn(styles$3.captionText, alignmentClassName[caption2.alignment], {
+                    className: cn(styles$3.captionText, alignmentClassName[imageCaption.alignment], {
                       [styles$3.withPointerEvents]: index === currentSlideIndex && isEditor,
                       [styles$3.active]: index === currentSlideIndex
                     }),
@@ -246,13 +246,13 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
-                        "data-styles": "caption",
+                        "data-styles": "imageCaption",
                         className: styles$3.captionTextInner,
                         style: {
-                          "--link-hover-color": caption2.hover,
+                          "--link-hover-color": imageCaption.hover,
                           position: "relative",
-                          top: scalingValue(caption2.offset.y, isEditor),
-                          left: scalingValue(caption2.offset.x, isEditor)
+                          top: scalingValue(imageCaption.offset.y, isEditor),
+                          left: scalingValue(imageCaption.offset.x, isEditor)
                         },
                         children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: item.imageCaption })
                       }
@@ -345,7 +345,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         className: cn(styles$3.arrowImg, styles$3.mirror)
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon$1, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
                   ]
                 }
               )
@@ -380,7 +380,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         className: styles$3.arrowImg
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon$1, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
                   ]
                 }
               )
@@ -452,7 +452,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
     }
   ) });
 }
-function ArrowIcon$1({ color, className }) {
+function ArrowIcon({ color, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 10 18", className, children: /* @__PURE__ */ jsxRuntime.jsx("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ jsxRuntime.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 = {
@@ -705,7 +705,7 @@ const ControlSliderComponent = {
               }
             }
           },
-          caption: {
+          imageCaption: {
             title: "Caption",
             icon: "text-icon",
             tooltip: "Caption",
@@ -799,7 +799,7 @@ const ControlSliderComponent = {
             hover: "#cccccc"
           },
           direction: "horiz",
-          caption: {
+          imageCaption: {
             offset: {
               x: 0,
               y: 0
@@ -922,7 +922,7 @@ const ControlSliderComponent = {
         layoutBased: true,
         type: "object",
         properties: {
-          caption: {
+          imageCaption: {
             dataName: "caption",
             type: "object",
             properties: {
@@ -1020,7 +1020,7 @@ const ControlSliderComponent = {
           }
         },
         default: {
-          caption: {
+          imageCaption: {
             widthSettings: {
               width: 0.13,
               sizing: "auto"
@@ -1102,19 +1102,19 @@ async function calculateImageWidthHeight(imgUrl, sizeType, customWidth, randomRa
   return { width, height, finalWidth: `${width}px` };
 }
 function ImageRevealSlider({ settings, content, isEditor }) {
-  const [divRef, setDivRef] = react.useState(null);
-  const [placedImages, setPlacedImages] = react.useState([]);
-  const [counter, setCounter] = react.useState(0);
-  const imageIdCounter = react.useRef(0);
-  const [cursorCenter, setCursorCenter] = react.useState({ x: 0, y: 0 });
-  const [cursorScale, setCursorScale] = react.useState(1);
-  const [customCursorImg, setCustomCursorImg] = react.useState("none");
-  const lastMousePos = react.useRef({ x: 0, y: 0 });
-  const [isInside, setIsInside] = react.useState(false);
+  const [divRef, setDivRef] = React.useState(null);
+  const [placedImages, setPlacedImages] = React.useState([]);
+  const [counter, setCounter] = React.useState(0);
+  const imageIdCounter = React.useRef(0);
+  const [cursorCenter, setCursorCenter] = React.useState({ x: 0, y: 0 });
+  const [cursorScale, setCursorScale] = React.useState(1);
+  const [customCursorImg, setCustomCursorImg] = React.useState("none");
+  const lastMousePos = React.useRef({ x: 0, y: 0 });
+  const [isInside, setIsInside] = React.useState(false);
   const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
   const { revealPosition, visible } = settings.position;
   const { cursorType, target, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!divRef) return;
     const updateCursorPosition = (clientX, clientY) => {
       const rect = divRef.getBoundingClientRect();
@@ -1165,7 +1165,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     defaultCursorScale,
     placedImages
   ]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!isInside) {
       setCustomCursorImg("none");
       setCursorScale(0);
@@ -1198,7 +1198,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       width: finalWidth
     };
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!divRef || content.length === 0) return;
     const rect = divRef.getBoundingClientRect();
     const containerWidth = rect.width;
@@ -1213,7 +1213,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     };
     placeImages();
   }, [sizeType, customWidth, randomRange, revealPosition, divRef]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (visible === "last One") {
       setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
     }
@@ -1617,7 +1617,6 @@ 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";
@@ -1633,10 +1632,8 @@ const arrow = "LightBox-module__arrow___iz38X";
 const arrowVertical = "LightBox-module__arrowVertical___Zfz81";
 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";
@@ -1656,7 +1653,6 @@ const slideOutTop = "LightBox-module__slideOutTop___Vgg0z";
 const slideOutBottom = "LightBox-module__slideOutBottom___nJ0Ef";
 const scaleSlide = "LightBox-module__scaleSlide___vZriG";
 const classes = {
-  hidden,
   heroImage,
   background,
   editor,
@@ -1672,10 +1668,8 @@ const classes = {
   arrowVertical,
   nextArrow,
   arrowInner,
-  arrowIcon,
   arrowImg,
   mirror,
-  thumbsWrapper,
   thumbsContainerVertical,
   thumbsContainer,
   thumbsAlignStart,
@@ -1731,13 +1725,8 @@ const getPositionStyles = (position, offset, isEditor) => {
 };
 function getDisplayedImageRect(img2) {
   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 containerW = container.width;
+  const containerH = container.height;
   const imgW = img2.naturalWidth;
   const imgH = img2.naturalHeight;
   const containerRatio = containerW / containerH;
@@ -1750,10 +1739,8 @@ function getDisplayedImageRect(img2) {
     renderedH = containerH;
     renderedW = containerH * imgRatio;
   }
-  const contentLeft = container.left + paddingLeft;
-  const contentTop = container.top + paddingTop;
-  const offsetX = (containerW - renderedW) / 2 + contentLeft;
-  const offsetY = (containerH - renderedH) / 2 + contentTop;
+  const offsetX = (containerW - renderedW) / 2 + container.left;
+  const offsetY = (containerH - renderedH) / 2 + container.top;
   return {
     x: offsetX,
     y: offsetY,
@@ -1856,9 +1843,9 @@ function getAnimationClasses(type, direction) {
   return { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass };
 }
 const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) => {
-  const [open, setOpen] = react.useState(false);
+  const [open, setOpen] = React.useState(false);
   const { url } = settings.thumbnailBlock.cover;
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (activeEvent === "close") {
       setOpen(false);
     }
@@ -1891,22 +1878,22 @@ const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeE
   ] });
 };
 const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId, isEditor }) => {
-  const [currentIndex, setCurrentIndex] = react.useState(0);
-  const [splideKey, setSplideKey] = react.useState(0);
-  const [isClosing, setIsClosing] = react.useState(false);
-  const [animationFinished, setAnimationFinished] = react.useState(false);
-  const [thumbnailDimensions, setThumbnailDimensions] = react.useState({});
-  const lightboxRef = react.useRef(null);
-  const prevSliderTypeRef = react.useRef(null);
-  const imageRef = react.useRef(null);
-  const isClosingRef = react.useRef(false);
-  const animationTargetRef = react.useRef(null);
-  const animationEndHandlerRef = react.useRef(null);
-  const appearAnimationEndHandlerRef = react.useRef(null);
-  const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
-  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.caption;
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const [splideKey, setSplideKey] = React.useState(0);
+  const [isClosing, setIsClosing] = React.useState(false);
+  const [animationFinished, setAnimationFinished] = React.useState(false);
+  const [thumbnailDimensions, setThumbnailDimensions] = React.useState({});
+  const lightboxRef = React.useRef(null);
+  const prevSliderTypeRef = React.useRef(null);
+  const imageRef = React.useRef(null);
+  const isClosingRef = React.useRef(false);
+  const animationTargetRef = React.useRef(null);
+  const animationEndHandlerRef = React.useRef(null);
+  const appearAnimationEndHandlerRef = React.useRef(null);
+  const { appear, triggers, slider, thumbnail, controls, area, imageCaption, layout } = settings.lightboxBlock;
+  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.imageCaption;
   const { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass } = getAnimationClasses(appear.type, appear.direction);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const handleLayoutChange = () => {
       setTimeout(() => {
         var _a, _b;
@@ -1923,7 +1910,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       window.removeEventListener("ArticleEditor.ComponentContent:change", handleComponentContentChange);
     };
   }, []);
-  const handleClose = react.useCallback(() => {
+  const handleClose = React.useCallback(() => {
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
     const colorAlpha = getColorAlpha(area.color);
     if (isMobile && !isEditor && colorAlpha > 0.9) {
@@ -1970,19 +1957,6 @@ 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";
@@ -2000,16 +1974,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
     let inside;
     if (isCover && imageRef.current) {
       const imgRect = imageRef.current.getBoundingClientRect();
-      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;
+      inside = clientX >= imgRect.left && clientX <= imgRect.right && clientY >= imgRect.top && clientY <= imgRect.bottom;
     } else {
       const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
       if (!rect) {
@@ -2026,13 +1991,9 @@ 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);
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!isOpen) return;
     const onKeyDown = (event) => {
       var _a, _b;
@@ -2055,10 +2016,9 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       window.removeEventListener("keydown", onKeyDown);
     };
   }, [isOpen, handleClose, content.length]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       setCurrentIndex(0);
-      setSplideKey((prev) => prev + 1);
       isClosingRef.current = false;
       setIsClosing(false);
       setAnimationFinished(false);
@@ -2072,13 +2032,13 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       setAnimationFinished(false);
     };
   }, [isOpen]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (prevSliderTypeRef.current !== null && prevSliderTypeRef.current !== slider.type) {
       setSplideKey((prev) => prev + 1);
     }
     prevSliderTypeRef.current = slider.type;
   }, [slider.type]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!isOpen) return;
     const originalOverflow = document.body.style.overflow;
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
@@ -2113,7 +2073,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       setAnimationFinished(false);
     };
   }, [isOpen, isEditor, area.color]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!isOpen) return;
     const handleTouchEnd = (e) => {
       if (isClosingRef.current) {
@@ -2162,14 +2122,14 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
     animationTimingFunction: "ease",
     animationFillMode: "both"
   };
-  if (!document.getElementById(portalId)) return null;
+  if (!isOpen && !isClosing) return null;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           ref: !isEditor ? animationTargetRef : null,
-          className: cn(classes.background, isClosing ? backdropDisappearClass : backdropAppearClass, { [classes.editor]: isEditor }, { [classes.hidden]: !isOpen }),
+          className: cn(classes.background, isClosing ? backdropDisappearClass : backdropAppearClass, { [classes.editor]: isEditor }),
           style: {
             ...backdropStyles,
             ...animationFinished && !isEditor && !isClosing ? { position: "absolute" } : {}
@@ -2180,7 +2140,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
         "div",
         {
           ref: isEditor ? animationTargetRef : null,
-          className: cn(classes.contentStyle, !isClosing ? appearClass : disappearClass, { [classes.editor]: isEditor }, { [classes.hidden]: !isOpen }),
+          className: cn(classes.contentStyle, !isClosing ? appearClass : disappearClass, { [classes.editor]: isEditor }),
           style: {
             animationDuration: `${parseInt(appear.duration)}ms`,
             animationTimingFunction: "ease",
@@ -2204,8 +2164,7 @@ 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",
-                  start: 0
+                  rewind: (slider.type === "scale" || slider.type === "fade") && triggers.repeat === "loop"
                 },
                 style: { "--splide-speed": slider.duration },
                 children: content.map((item, index) => {
@@ -2240,13 +2199,13 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
               },
               splideKey
             ),
-            controls.isActive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            controls.isActive && controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: cn(classes.arrow, { [classes.arrowVertical]: slider.direction === "vert" }),
                   style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
                       className: classes.arrowInner,
@@ -2256,18 +2215,15 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                         return (_a = lightboxRef.current) == null ? void 0 : _a.go("-1");
                       },
                       "aria-label": "Previous",
-                      children: [
-                        controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                          SvgImage,
-                          {
-                            url: controls.arrowsImgUrl,
-                            fill: controls.color,
-                            hoverFill: controls.hover,
-                            className: cn(classes.arrowImg, classes.mirror)
-                          }
-                        ),
-                        !controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: controls.color, className: cn(classes.arrowIcon, classes.arrowImg, classes.mirror) })
-                      ]
+                      children: controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                        SvgImage,
+                        {
+                          url: controls.arrowsImgUrl,
+                          fill: controls.color,
+                          hoverFill: controls.hover,
+                          className: cn(classes.arrowImg, classes.mirror)
+                        }
+                      )
                     }
                   )
                 }
@@ -2277,7 +2233,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                 {
                   className: cn(classes.arrow, classes.nextArrow, { [classes.arrowVertical]: slider.direction === "vert" }),
                   style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
                       className: classes.arrowInner,
@@ -2287,18 +2243,15 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                         return (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
                       },
                       "aria-label": "Next",
-                      children: [
-                        controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                          SvgImage,
-                          {
-                            url: controls.arrowsImgUrl,
-                            fill: controls.color,
-                            hoverFill: controls.hover,
-                            className: classes.arrowImg
-                          }
-                        ),
-                        !controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: controls.color, className: cn(classes.arrowIcon, classes.arrowImg) })
-                      ]
+                      children: controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                        SvgImage,
+                        {
+                          url: controls.arrowsImgUrl,
+                          fill: controls.color,
+                          hoverFill: controls.hover,
+                          className: classes.arrowImg
+                        }
+                      )
                     }
                   )
                 }
@@ -2308,14 +2261,14 @@ 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__ */ jsxRuntime.jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: area.closeIconUrl, fill: area.closeIconColor, hoverFill: area.closeIconHover }) });
+              return /* @__PURE__ */ jsxRuntime.jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: area.closeIconUrl }) });
             })(),
-            caption2.isActive && /* @__PURE__ */ jsxRuntime.jsx(
+            imageCaption.isActive && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: classes.caption,
                 style: {
-                  ...getPositionStyles(caption2.alignment, caption2.offset, isEditor),
+                  ...getPositionStyles(imageCaption.alignment, imageCaption.offset, isEditor),
                   fontFamily: fontSettings.fontFamily,
                   fontWeight: fontSettings.fontWeight,
                   fontStyle: fontSettings.fontStyle,
@@ -2334,147 +2287,104 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    "data-styles": "caption",
+                    "data-styles": "imageCaption",
                     className: classes.captionTextInner,
-                    style: { ["--link-hover-color"]: caption2.hover },
+                    style: { ["--link-hover-color"]: imageCaption.hover },
                     children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
                   }
                 )
               }
             ),
-            thumbnail.isActive && (() => {
-              const [vertical, horizontal] = thumbnail.position.split("-");
-              const effectivePosition = slider.direction === "horiz" ? `${vertical}-left` : thumbnail.position;
-              const thumbsPositionStyles = getPositionStyles(effectivePosition, thumbnail.offset, isEditor);
-              const getJustifyContent = () => {
-                if (slider.direction === "horiz") {
-                  if (horizontal === "left") return "flex-start";
-                  if (horizontal === "center") return "center";
-                  if (horizontal === "right") return "flex-end";
-                } else {
-                  if (vertical === "top") return "flex-start";
-                  if (vertical === "middle") return "center";
-                  if (vertical === "bottom") return "flex-end";
-                }
-                return "flex-start";
-              };
-              return /* @__PURE__ */ jsxRuntime.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"
+            thumbnail.isActive && /* @__PURE__ */ jsxRuntime.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"
+                }),
+                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)
+                      };
                     }
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
+                  };
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
                     {
-                      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: classes.thumbItem,
                       style: {
-                        gap: scalingValue(thumbnail.grid.gap, isEditor),
-                        justifyContent: getJustifyContent()
+                        ...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);
+                        }
                       },
-                      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) };
+                      children: /* @__PURE__ */ jsxRuntime.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 }
+                              }));
                             }
-                          }
-                          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__ */ jsxRuntime.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.25s 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__ */ jsxRuntime.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" ? { width: "100%", height: "100%" } : {}
-                                }
-                              }
-                            )
                           },
-                          `${item.image.name}-${index}`
-                        );
-                      })
-                    }
-                  )
-                }
-              );
-            })()
+                          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}`
+                  );
+                })
+              }
+            )
           ]
         }
       )
@@ -2482,9 +2392,6 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
     document.getElementById(portalId)
   );
 };
-function ArrowIcon({ color, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 10 18", className, children: /* @__PURE__ */ jsxRuntime.jsx("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ jsxRuntime.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",
@@ -2982,26 +2889,10 @@ 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"
-                    }
                   }
                 }
               },
-              caption: {
+              imageCaption: {
                 title: "DESC",
                 icon: "text-icon",
                 tooltip: "Description",
@@ -3106,7 +2997,7 @@ const LightboxComponent = {
                 padding: { top: 0.06, right: 0, bottom: 0.06, left: 0 }
               },
               controls: {
-                isActive: false,
+                isActive: true,
                 arrowsImgUrl: null,
                 offset: { x: 0, y: 0 },
                 scale: 1,
@@ -3117,13 +3008,11 @@ 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
               },
-              caption: {
+              imageCaption: {
                 isActive: true,
                 alignment: "middle-center",
                 offset: { x: 0, y: 0 },
@@ -3176,7 +3065,7 @@ const LightboxComponent = {
                 padding: { top: 0.06, right: 0.05, bottom: 0.06, left: 0.05 }
               },
               controls: {
-                isActive: false,
+                isActive: true,
                 arrowsImgUrl: null,
                 offset: { x: 0, y: 0 },
                 scale: 1,
@@ -3187,13 +3076,11 @@ 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
               },
-              caption: {
+              imageCaption: {
                 isActive: true,
                 alignment: "middle-center",
                 offset: { x: 0, y: 0 },
@@ -3246,7 +3133,7 @@ const LightboxComponent = {
                 padding: { top: 0.06, right: 0.1, bottom: 0.06, left: 0.1 }
               },
               controls: {
-                isActive: false,
+                isActive: true,
                 arrowsImgUrl: null,
                 offset: { x: 0, y: 0 },
                 scale: 1,
@@ -3257,13 +3144,11 @@ 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
               },
-              caption: {
+              imageCaption: {
                 isActive: true,
                 alignment: "middle-center",
                 offset: { x: 0, y: 0 },
@@ -3415,7 +3300,7 @@ const LightboxComponent = {
         layoutBased: true,
         type: "object",
         properties: {
-          caption: {
+          imageCaption: {
             dataName: "caption",
             type: "object",
             properties: {
@@ -3513,7 +3398,7 @@ const LightboxComponent = {
           }
         },
         default: {
-          caption: {
+          imageCaption: {
             widthSettings: {
               width: 0.13,
               sizing: "auto"