@cntrl-site/components 0.1.14 → 0.1.15

package/dist/index.mjs

@@ -1,5 +1,5 @@
 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";
@@ -11,7 +11,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 = "ControlSlider-module__arrowIcon___S4ztF";
+const arrowIcon$1 = "ControlSlider-module__arrowIcon___S4ztF";
 const arrowImg$1 = "ControlSlider-module__arrowImg___2dwJW";
 const mirror$1 = "ControlSlider-module__mirror___brd6U";
 const pagination = "ControlSlider-module__pagination___bicLF";
@@ -55,7 +55,7 @@ const styles$3 = {
   arrowVertical: arrowVertical$1,
   nextArrow: nextArrow$1,
   arrowInner: arrowInner$1,
-  arrowIcon,
+  arrowIcon: arrowIcon$1,
   arrowImg: arrowImg$1,
   mirror: mirror$1,
   pagination,
@@ -343,7 +343,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         className: cn(styles$3.arrowImg, styles$3.mirror)
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon$1, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
                   ]
                 }
               )
@@ -378,7 +378,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         className: styles$3.arrowImg
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon$1, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
                   ]
                 }
               )
@@ -450,7 +450,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
     }
   ) });
 }
-function ArrowIcon({ color, className }) {
+function ArrowIcon$1({ color, className }) {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 18", className, children: /* @__PURE__ */ jsx("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ jsx("path", { d: "M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z", id: "Shape-Copy", fill: color, transform: "translate(5, 9) rotate(-90) translate(-5, -9)" }) }) });
 }
 const ControlSliderComponent = {
@@ -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";
@@ -1630,8 +1631,10 @@ 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";
@@ -1651,6 +1654,7 @@ const slideOutTop = "LightBox-module__slideOutTop___Vgg0z";
 const slideOutBottom = "LightBox-module__slideOutBottom___nJ0Ef";
 const scaleSlide = "LightBox-module__scaleSlide___vZriG";
 const classes = {
+  hidden,
   heroImage,
   background,
   editor,
@@ -1666,8 +1670,10 @@ const classes = {
   arrowVertical,
   nextArrow,
   arrowInner,
+  arrowIcon,
   arrowImg,
   mirror,
+  thumbsWrapper,
   thumbsContainerVertical,
   thumbsContainer,
   thumbsAlignStart,
@@ -1723,8 +1729,13 @@ const getPositionStyles = (position, offset, isEditor) => {
 };
 function getDisplayedImageRect(img2) {
   const container = img2.getBoundingClientRect();
-  const containerW = container.width;
-  const containerH = container.height;
+  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 + container.left;
-  const offsetY = (containerH - renderedH) / 2 + container.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,
@@ -1841,7 +1854,7 @@ 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] = useState(false);
   const { url } = settings.thumbnailBlock.cover;
   useEffect(() => {
     if (activeEvent === "close") {
@@ -1888,8 +1901,9 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
   const animationTargetRef = useRef(null);
   const animationEndHandlerRef = useRef(null);
   const appearAnimationEndHandlerRef = useRef(null);
+  const dragStartRef = useRef(null);
+  const hasDraggedRef = useRef(false);
   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);
   useEffect(() => {
     const handleLayoutChange = () => {
@@ -1955,7 +1969,24 @@ 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) => {
+    if (hasDraggedRef.current) {
+      hasDraggedRef.current = false;
+      return;
+    }
     const currentImage = content[currentIndex];
     const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
     let clientX;
@@ -1972,7 +2003,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,8 +2029,18 @@ 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);
   };
+  const handleThumbWrapperClick = (e) => {
+    const target = e.target;
+    if (target.classList.contains(classes.thumbsWrapper) || target.classList.contains(classes.thumbsContainer)) {
+      handleImageWrapperClick(e);
+    }
+  };
   useEffect(() => {
     if (!isOpen) return;
     const onKeyDown = (event) => {
@@ -2017,6 +2067,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);
@@ -2059,7 +2110,13 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       appearAnimationEndHandlerRef.current = handleAppearAnimationEnd;
       animationTargetRef.current.addEventListener("animationend", handleAppearAnimationEnd);
     }
-    const preventScroll = (e) => e.preventDefault();
+    const preventScroll = (e) => {
+      const target = e.target;
+      if (target && (target.closest(`.${classes.thumbsWrapper}`) || target.closest(`.${classes.thumbsContainer}`))) {
+        return;
+      }
+      e.preventDefault();
+    };
     document.addEventListener("touchmove", preventScroll, { passive: false });
     return () => {
       document.body.style.overflow = originalOverflow;
@@ -2078,6 +2135,10 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
         e.stopPropagation();
         return;
       }
+      if (hasDraggedRef.current) {
+        hasDraggedRef.current = false;
+        return;
+      }
       const target = e.target;
       if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
         return;
@@ -2113,6 +2174,103 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       document.removeEventListener("touchend", handleTouchEnd);
     };
   }, [isOpen, handleClose, currentIndex, content]);
+  const needsCustomVerticalDrag = (slider.type === "scale" || slider.type === "fade") && slider.direction === "vert" && triggers.type === "drag";
+  useEffect(() => {
+    var _a, _b;
+    if (!isOpen || !needsCustomVerticalDrag || !((_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.root)) return;
+    const container = lightboxRef.current.splide.root;
+    const DRAG_THRESHOLD = 30;
+    const handleMove = (clientX, clientY) => {
+      if (dragStartRef.current) {
+        const deltaX = Math.abs(clientX - dragStartRef.current.x);
+        const deltaY = Math.abs(clientY - dragStartRef.current.y);
+        if (deltaX > 0 || deltaY > 0) {
+          hasDraggedRef.current = true;
+        }
+      }
+    };
+    const handlePointerMove = (e) => {
+      if (dragStartRef.current) {
+        e.preventDefault();
+        handleMove(e.clientX, e.clientY);
+      }
+    };
+    const handleTouchMove = (e) => {
+      if (dragStartRef.current && e.touches.length > 0) {
+        e.preventDefault();
+        handleMove(e.touches[0].clientX, e.touches[0].clientY);
+      }
+    };
+    const handleUp = (clientX, clientY) => {
+      if (!dragStartRef.current || !lightboxRef.current) {
+        dragStartRef.current = null;
+        return;
+      }
+      const deltaX = Math.abs(clientX - dragStartRef.current.x);
+      const deltaY = Math.abs(clientY - dragStartRef.current.y);
+      if (deltaY > DRAG_THRESHOLD && deltaY > deltaX) {
+        lightboxRef.current.go(clientY < dragStartRef.current.y ? "+1" : "-1");
+      }
+      dragStartRef.current = null;
+    };
+    const handlePointerUp = (e) => {
+      if (!dragStartRef.current) {
+        document.removeEventListener("pointerup", handlePointerUp);
+        document.removeEventListener("pointercancel", handlePointerUp);
+        document.removeEventListener("pointermove", handlePointerMove);
+        return;
+      }
+      handleUp(e.clientX, e.clientY);
+      document.removeEventListener("pointerup", handlePointerUp);
+      document.removeEventListener("pointercancel", handlePointerUp);
+      document.removeEventListener("pointermove", handlePointerMove);
+    };
+    const handleTouchEnd = (e) => {
+      if (!dragStartRef.current) {
+        document.removeEventListener("touchend", handleTouchEnd);
+        document.removeEventListener("touchcancel", handleTouchEnd);
+        document.removeEventListener("touchmove", handleTouchMove);
+        return;
+      }
+      if (e.changedTouches.length > 0) {
+        const touch = e.changedTouches[0];
+        handleUp(touch.clientX, touch.clientY);
+      }
+      document.removeEventListener("touchend", handleTouchEnd);
+      document.removeEventListener("touchcancel", handleTouchEnd);
+      document.removeEventListener("touchmove", handleTouchMove);
+    };
+    const handlePointerDown = (e) => {
+      dragStartRef.current = { x: e.clientX, y: e.clientY };
+      hasDraggedRef.current = false;
+      document.addEventListener("pointermove", handlePointerMove, { passive: false });
+      document.addEventListener("pointerup", handlePointerUp);
+      document.addEventListener("pointercancel", handlePointerUp);
+    };
+    const handleTouchStart = (e) => {
+      if (e.touches.length > 0) {
+        dragStartRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+        hasDraggedRef.current = false;
+        document.addEventListener("touchmove", handleTouchMove, { passive: false });
+        document.addEventListener("touchend", handleTouchEnd);
+        document.addEventListener("touchcancel", handleTouchEnd);
+      }
+    };
+    container.addEventListener("pointerdown", handlePointerDown);
+    container.addEventListener("touchstart", handleTouchStart);
+    return () => {
+      container.removeEventListener("pointerdown", handlePointerDown);
+      container.removeEventListener("touchstart", handleTouchStart);
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+      document.removeEventListener("pointercancel", handlePointerUp);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+      document.removeEventListener("touchcancel", handleTouchEnd);
+      dragStartRef.current = null;
+      hasDraggedRef.current = false;
+    };
+  }, [isOpen, needsCustomVerticalDrag, splideKey]);
   const backdropStyles = {
     backgroundColor: area.color,
     backdropFilter: `blur(${area.blur}px)`,
@@ -2120,14 +2278,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.background, isClosing ? backdropDisappearClass : backdropAppearClass, { [classes.editor]: isEditor }),
+          className: cn(classes.background, isClosing ? backdropDisappearClass : backdropAppearClass, { [classes.editor]: isEditor }, { [classes.hidden]: !isOpen }),
           style: {
             ...backdropStyles,
             ...animationFinished && !isEditor && !isClosing ? { position: "absolute" } : {}
@@ -2138,7 +2296,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
         "div",
         {
           ref: isEditor ? animationTargetRef : null,
-          className: cn(classes.contentStyle, !isClosing ? appearClass : disappearClass, { [classes.editor]: isEditor }),
+          className: cn(classes.contentStyle, !isClosing ? appearClass : disappearClass, { [classes.editor]: isEditor }, { [classes.hidden]: !isOpen }),
           style: {
             animationDuration: `${parseInt(appear.duration)}ms`,
             animationTimingFunction: "ease",
@@ -2154,15 +2312,20 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                 options: {
                   arrows: false,
                   speed: slider.duration ? parseInt(slider.duration) : 500,
-                  direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
+                  direction: (() => {
+                    const isHoriz = slider.direction === "horiz";
+                    return isHoriz || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb";
+                  })(),
                   pagination: false,
-                  drag: triggers.type === "drag",
+                  // Disable Splide's drag when we need custom vertical drag handling
+                  drag: triggers.type === "drag" && !needsCustomVerticalDrag,
                   perPage: 1,
                   width: "100%",
                   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) => {
@@ -2197,13 +2360,13 @@ 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.arrow, { [classes.arrowVertical]: slider.direction === "vert" }),
                   style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
-                  children: /* @__PURE__ */ jsx(
+                  children: /* @__PURE__ */ jsxs(
                     "button",
                     {
                       className: classes.arrowInner,
@@ -2213,15 +2376,18 @@ 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__ */ jsx(
-                        SvgImage,
-                        {
-                          url: controls.arrowsImgUrl,
-                          fill: controls.color,
-                          hoverFill: controls.hover,
-                          className: cn(classes.arrowImg, classes.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) })
+                      ]
                     }
                   )
                 }
@@ -2231,7 +2397,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__ */ jsx(
+                  children: /* @__PURE__ */ jsxs(
                     "button",
                     {
                       className: classes.arrowInner,
@@ -2241,15 +2407,18 @@ 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__ */ jsx(
-                        SvgImage,
-                        {
-                          url: controls.arrowsImgUrl,
-                          fill: controls.color,
-                          hoverFill: controls.hover,
-                          className: classes.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,130 +2428,177 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
               const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset, isEditor);
               const scaleTransform = `scale(${area.closeIconScale})`;
               const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
-              return /* @__PURE__ */ jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl }) });
+              return /* @__PURE__ */ jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl, fill: area.closeIconColor ?? "#000000", hoverFill: area.closeIconHover ?? "#cccccc" }) });
             })(),
-            imageCaption.isActive && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: classes.caption,
-                style: {
-                  ...getPositionStyles(imageCaption.alignment, imageCaption.offset, isEditor),
-                  fontFamily: fontSettings.fontFamily,
-                  fontWeight: fontSettings.fontWeight,
-                  fontStyle: fontSettings.fontStyle,
-                  width: widthSettings.sizing === "auto" ? "max-content" : scalingValue(widthSettings.width, isEditor),
-                  letterSpacing: scalingValue(letterSpacing, isEditor),
-                  wordSpacing: scalingValue(wordSpacing, isEditor),
-                  textAlign,
-                  fontSize: scalingValue(fontSizeLineHeight.fontSize, isEditor),
-                  lineHeight: scalingValue(fontSizeLineHeight.lineHeight, isEditor),
-                  textTransform: textAppearance.textTransform ?? "none",
-                  textDecoration: textAppearance.textDecoration ?? "none",
-                  fontVariant: textAppearance.fontVariant ?? "normal",
-                  color
-                },
-                onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "data-styles": "imageCaption",
-                    className: classes.captionTextInner,
-                    style: { ["--link-hover-color"]: imageCaption.hover },
-                    children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
-                  }
-                )
-              }
-            ),
-            thumbnail.isActive && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(classes.thumbsContainer, {
-                  [classes.thumbsContainerVertical]: slider.direction === "vert",
-                  [classes.thumbsAlignStart]: thumbnail.align === "start",
-                  [classes.thumbsAlignCenter]: thumbnail.align === "center",
-                  [classes.thumbsAlignEnd]: thumbnail.align === "end"
-                }),
-                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)
-                      };
+            imageCaption.isActive && lightboxStyles.imageCaption && (() => {
+              const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.imageCaption;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classes.caption,
+                  style: {
+                    ...getPositionStyles(imageCaption.alignment, imageCaption.offset, isEditor),
+                    fontFamily: fontSettings.fontFamily,
+                    fontWeight: fontSettings.fontWeight,
+                    fontStyle: fontSettings.fontStyle,
+                    width: widthSettings.sizing === "auto" ? "max-content" : scalingValue(widthSettings.width, isEditor),
+                    letterSpacing: scalingValue(letterSpacing, isEditor),
+                    wordSpacing: scalingValue(wordSpacing, isEditor),
+                    textAlign,
+                    fontSize: scalingValue(fontSizeLineHeight.fontSize, isEditor),
+                    lineHeight: scalingValue(fontSizeLineHeight.lineHeight, isEditor),
+                    textTransform: textAppearance.textTransform ?? "none",
+                    textDecoration: textAppearance.textDecoration ?? "none",
+                    fontVariant: textAppearance.fontVariant ?? "normal",
+                    color
+                  },
+                  onClick: (e) => e.stopPropagation(),
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-styles": "caption",
+                      className: classes.captionTextInner,
+                      style: { ["--link-hover-color"]: imageCaption.hover },
+                      children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
                     }
-                  };
-                  return /* @__PURE__ */ jsx(
-                    "button",
+                  )
+                }
+              );
+            })(),
+            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__ */ jsx(
+                "div",
+                {
+                  className: classes.thumbsWrapper,
+                  onClick: (e) => handleThumbWrapperClick(e),
+                  style: {
+                    position: isEditor ? "absolute" : "fixed",
+                    ...thumbsPositionStyles,
+                    ...slider.direction === "horiz" ? {
+                      maxWidth: "100vw",
+                      width: "100vw",
+                      overflowX: "auto",
+                      overflowY: "hidden"
+                    } : {
+                      maxHeight: "100vh",
+                      overflowY: "auto",
+                      overflowX: "hidden"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
                     {
-                      className: classes.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);
+                        gap: scalingValue(thumbnail.grid.gap, isEditor),
+                        justifyContent: getJustifyContent()
                       },
-                      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 }
-                              }));
+                      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.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__ */ 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}`
+                        );
+                      })
+                    }
+                  )
+                }
+              );
+            })()
           ]
         }
       )
@@ -2390,6 +2606,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 +3106,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 +3230,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 +3241,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 +3300,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 +3311,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 +3370,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 +3381,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