@cntrl-site/components 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { Splide, SplideSlide } from "@splidejs/react-splide";
 import cn from "classnames";
 import { createPortal } from "react-dom";
@@ -563,15 +563,28 @@ const ControlSliderComponent = {
               },
               offset: {
                 type: "object",
+                title: "Offset",
                 display: {
-                  type: "offset-controls"
+                  type: "group"
                 },
                 properties: {
                   x: {
-                    type: "number"
+                    type: "number",
+                    label: "X",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   },
                   y: {
-                    type: "number"
+                    type: "number",
+                    label: "Y",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   }
                 }
               },
@@ -624,15 +637,28 @@ const ControlSliderComponent = {
               },
               offset: {
                 type: "object",
+                title: "Offset",
                 display: {
-                  type: "offset-controls"
+                  type: "group"
                 },
                 properties: {
                   x: {
-                    type: "number"
+                    type: "number",
+                    label: "X",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   },
                   y: {
-                    type: "number"
+                    type: "number",
+                    label: "Y",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   }
                 }
               },
@@ -688,14 +714,26 @@ const ControlSliderComponent = {
               offset: {
                 type: "object",
                 display: {
-                  type: "offset-controls"
+                  type: "group"
                 },
                 properties: {
                   x: {
-                    type: "number"
+                    type: "number",
+                    label: "X",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   },
                   y: {
-                    type: "number"
+                    type: "number",
+                    label: "Y",
+                    scalingEnabled: true,
+                    display: {
+                      type: "numeric-input",
+                      visible: true
+                    }
                   }
                 }
               },
@@ -1441,6 +1479,7 @@ const ControlImageRevealSliderComponent = {
     }
   }
 };
+const background = "Lightbox-module__background___wf1Ii";
 const backdropStyle = "Lightbox-module__backdropStyle___y7avj";
 const editor = "Lightbox-module__editor___Vh82D";
 const contentStyle = "Lightbox-module__contentStyle___FzFaW";
@@ -1462,15 +1501,20 @@ const thumbsAlignStart = "Lightbox-module__thumbsAlignStart___uiFIV";
 const thumbsAlignCenter = "Lightbox-module__thumbsAlignCenter___sbUPA";
 const thumbsAlignEnd = "Lightbox-module__thumbsAlignEnd___OA9N4";
 const thumbItem = "Lightbox-module__thumbItem___zROyu";
-const thumbImage = "Lightbox-module__thumbImage___xGakV";
 const closeButton = "Lightbox-module__closeButton___r3Dur";
 const fadeIn = "Lightbox-module__fadeIn___sHwRK";
 const slideInLeft = "Lightbox-module__slideInLeft___P-XRo";
 const slideInRight = "Lightbox-module__slideInRight___ZQqFi";
 const slideInTop = "Lightbox-module__slideInTop___XRKCs";
 const slideInBottom = "Lightbox-module__slideInBottom___TYOBS";
+const fadeOut = "Lightbox-module__fadeOut___h2fpQ";
+const slideOutLeft = "Lightbox-module__slideOutLeft___J-eMU";
+const slideOutRight = "Lightbox-module__slideOutRight___iZUQz";
+const slideOutTop = "Lightbox-module__slideOutTop___3TXF9";
+const slideOutBottom = "Lightbox-module__slideOutBottom___SB5ws";
 const scaleSlide = "Lightbox-module__scaleSlide___wS7d4";
 const styles = {
+  background,
   backdropStyle,
   editor,
   contentStyle,
@@ -1492,16 +1536,20 @@ const styles = {
   thumbsAlignCenter,
   thumbsAlignEnd,
   thumbItem,
-  thumbImage,
   closeButton,
   fadeIn,
   slideInLeft,
   slideInRight,
   slideInTop,
   slideInBottom,
+  fadeOut,
+  slideOutLeft,
+  slideOutRight,
+  slideOutTop,
+  slideOutBottom,
   scaleSlide
 };
-const getPositionStyles = (position, offset) => {
+const getPositionStyles = (position, offset, isEditor) => {
   const styles2 = {};
   const [vertical, horizontal] = position.split("-");
   if (vertical === "top") {
@@ -1525,16 +1573,41 @@ const getPositionStyles = (position, offset) => {
     styles2.right = "0";
   }
   if (vertical === "middle" && horizontal === "center") {
-    styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
+    styles2.transform = `translate(calc(-50% + ${scalingValue(offset.x, isEditor)}), calc(-50% + ${scalingValue(offset.y, isEditor)}))`;
   } else if (vertical === "middle") {
-    styles2.transform = `translate(${offset.x}px, calc(-50% + ${offset.y}px))`;
+    styles2.transform = `translate(${scalingValue(offset.x, isEditor)}, calc(-50% + ${scalingValue(offset.y, isEditor)}))`;
   } else if (horizontal === "center") {
-    styles2.transform = `translate(calc(-50% + ${offset.x}px), ${offset.y}px)`;
+    styles2.transform = `translate(calc(-50% + ${scalingValue(offset.x, isEditor)}), ${scalingValue(offset.y, isEditor)})`;
   } else {
-    styles2.transform = `translate(${offset.x}px, ${offset.y}px)`;
+    styles2.transform = `translate(${scalingValue(offset.x, isEditor)}, ${scalingValue(offset.y, isEditor)})`;
   }
   return styles2;
 };
+function getDisplayedImageRect(img2) {
+  const container = img2.getBoundingClientRect();
+  const containerW = container.width;
+  const containerH = container.height;
+  const imgW = img2.naturalWidth;
+  const imgH = img2.naturalHeight;
+  const containerRatio = containerW / containerH;
+  const imgRatio = imgW / imgH;
+  let renderedW, renderedH;
+  if (imgRatio > containerRatio) {
+    renderedW = containerW;
+    renderedH = containerW / imgRatio;
+  } else {
+    renderedH = containerH;
+    renderedW = containerH * imgRatio;
+  }
+  const offsetX = (containerW - renderedW) / 2 + container.left;
+  const offsetY = (containerH - renderedH) / 2 + container.top;
+  return {
+    x: offsetX,
+    y: offsetY,
+    width: renderedW,
+    height: renderedH
+  };
+}
 function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) {
   const [open, setOpen] = React.useState(false);
   const { url } = settings.thumbnailBlock.cover;
@@ -1556,34 +1629,147 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, portalId, isEditor })
+    /* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, styles: styles2, portalId, isEditor, activeEvent })
   ] });
 }
-const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId, isEditor }) => {
+const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings, portalId, isEditor }) => {
+  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 lightboxRef = useRef(null);
-  const resizeObserverRef = useRef(null);
+  const prevSliderTypeRef = useRef(null);
+  const imageRef = useRef(null);
+  const isClosingRef = useRef(false);
+  const contentRef = useRef(null);
+  const animationEndHandlerRef = useRef(null);
+  const appearAnimationEndHandlerRef = useRef(null);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
+  const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
+  useEffect(() => {
+    window.addEventListener("ArticleEditor.Layout:change", () => {
+      var _a, _b;
+      (_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
+    });
+    return () => {
+      window.removeEventListener("ArticleEditor.Layout:change", () => {
+        var _a, _b;
+        (_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
+      });
+    };
+  }, []);
+  const handleClose = useCallback(() => {
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const colorAlpha = getColorAlpha(area.color);
+    if (isMobile && !isEditor && colorAlpha > 0.9) {
+      document.body.style.backgroundColor = "";
+    }
+    setIsClosing(true);
+    isClosingRef.current = true;
+    const handleAnimationEnd = (e) => {
+      if (e.target === contentRef.current && e.animationName) {
+        if (contentRef.current && animationEndHandlerRef.current) {
+          contentRef.current.removeEventListener("animationend", animationEndHandlerRef.current);
+        }
+        animationEndHandlerRef.current = null;
+        onClose();
+        setIsClosing(false);
+      }
+    };
+    if (contentRef.current) {
+      animationEndHandlerRef.current = handleAnimationEnd;
+      contentRef.current.addEventListener("animationend", handleAnimationEnd);
+    }
+  }, [onClose, appearDurationMs, area.color, isEditor]);
   const handleBackdropClick = (e) => {
-    if (!closeOnBackdropClick) return;
     if (e.target === e.currentTarget) {
-      onClose();
+      handleClose();
     }
   };
   const handleImageWrapperClick = (e) => {
-    if (!closeOnBackdropClick) return;
-    if (e.target === e.currentTarget) {
-      onClose();
+    var _a, _b;
+    const currentImage = content[currentIndex];
+    const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
+    let clientX;
+    let clientY;
+    if ("changedTouches" in e && e.changedTouches.length > 0) {
+      clientX = e.changedTouches[0].clientX;
+      clientY = e.changedTouches[0].clientY;
+    } else if ("clientX" in e) {
+      clientX = e.clientX;
+      clientY = e.clientY;
+    } else {
+      return;
+    }
+    let inside;
+    if (isCover && imageRef.current) {
+      const imgRect = imageRef.current.getBoundingClientRect();
+      inside = clientX >= imgRect.left && clientX <= imgRect.right && clientY >= imgRect.top && clientY <= imgRect.bottom;
+    } else {
+      const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+      if (!rect) {
+        if (e.target === e.currentTarget) {
+          handleClose();
+        }
+        return;
+      }
+      inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
+    }
+    if (inside) {
+      if (triggers.type === "click" && triggers.switch === "image") {
+        if (triggers.repeat === "close" && currentIndex === content.length - 1) {
+          handleClose();
+        } else {
+          (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
+        }
+      } else if (triggers.type === "click" && triggers.switch === "50/50") {
+        const img2 = imageRef.current;
+        if (img2) {
+          const imgRect = img2.getBoundingClientRect();
+          const clickX = clientX - imgRect.left;
+          const clickY = clientY - imgRect.top;
+          const imgWidth = imgRect.width;
+          const imgHeight = imgRect.height;
+          let dir;
+          if (slider.direction === "horiz") {
+            dir = clickX < imgWidth / 2 ? "-1" : "+1";
+          } else {
+            dir = clickY < imgHeight / 2 ? "-1" : "+1";
+          }
+          (_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
+        }
+      }
+    } else {
+      handleClose();
+    }
+  };
+  const handleContentClick = (e) => {
+    const target = e.target;
+    const currentTarget = e.currentTarget;
+    if (target === currentTarget) {
+      handleClose();
+      return;
+    }
+    const isImg = target.tagName === "IMG" || target.closest("img");
+    const isButton = target.tagName === "BUTTON" || target.closest("button");
+    const isSplide = target.closest(".splide") || target.closest('[class*="splide"]');
+    const isCaption = target.closest(`.${styles.caption}`);
+    const isThumbnail = target.closest(`.${styles.thumbsContainer}`);
+    if (!isImg && !isButton && !isSplide && !isCaption && !isThumbnail) {
+      handleClose();
     }
   };
   const onImageClick = (e) => {
     var _a, _b;
+    e.stopPropagation();
     if (triggers.type === "click" && triggers.switch === "image") {
-      e.stopPropagation();
-      (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
+      if (triggers.repeat === "close" && currentIndex === content.length - 1) {
+        handleClose();
+      } else {
+        (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
+      }
     }
     if (triggers.type === "click" && triggers.switch === "50/50") {
-      e.stopPropagation();
       const img2 = e.currentTarget;
       const rect = img2.getBoundingClientRect();
       const clickX = e.clientX - rect.left;
@@ -1600,10 +1786,10 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     }
   };
   useEffect(() => {
-    if (!isOpen || !closeOnEsc) return;
+    if (!isOpen) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
-        onClose();
+        handleClose();
         return;
       }
       if (event.key === "ArrowRight") {
@@ -1618,58 +1804,62 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     return () => {
       window.removeEventListener("keydown", onKeyDown);
     };
-  }, [isOpen, closeOnEsc, onClose, content.length]);
+  }, [isOpen, handleClose, content.length]);
   useEffect(() => {
-    if (isOpen) setCurrentIndex(0);
+    if (isOpen) {
+      setCurrentIndex(0);
+      isClosingRef.current = false;
+      setIsClosing(false);
+    }
+    return () => {
+      if (contentRef.current && animationEndHandlerRef.current) {
+        contentRef.current.removeEventListener("animationend", animationEndHandlerRef.current);
+        animationEndHandlerRef.current = null;
+      }
+    };
   }, [isOpen]);
   useEffect(() => {
-    if (!isOpen) return;
-    if (resizeObserverRef.current) {
-      resizeObserverRef.current.disconnect();
-      resizeObserverRef.current = null;
+    if (prevSliderTypeRef.current !== null && prevSliderTypeRef.current !== slider.type) {
+      setSplideKey((prev) => prev + 1);
     }
-    const timeoutId = setTimeout(() => {
-      const activeSlide = document.querySelector(".splide__slide.is-active");
-      if (!activeSlide) return;
-      const img2 = activeSlide.querySelector("img");
-      const container = activeSlide.querySelector(`.${styles.imgWrapper}`);
-      if (!img2 || !container) return;
-      const updateImageSize = () => {
-        if (!img2.naturalWidth || !img2.naturalHeight) return;
-        const imageAspectRatio = img2.naturalWidth / img2.naturalHeight;
-        const containerWidth = container.clientWidth;
-        const containerHeight = container.clientHeight;
-        const containerAspectRatio = containerWidth / containerHeight;
-        if (imageAspectRatio > containerAspectRatio) {
-          img2.style.width = "100%";
-        } else {
-          img2.style.height = "100%";
+    prevSliderTypeRef.current = slider.type;
+  }, [slider.type]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const colorAlpha = getColorAlpha(area.color);
+    const handleAppearAnimationEnd = (e) => {
+      if (e.target === contentRef.current && !isClosingRef.current && e.animationName) {
+        if (isMobile && !isEditor && colorAlpha > 0.9) {
+          document.body.style.backgroundColor = area.color;
         }
-      };
-      if (img2.complete) {
-        updateImageSize();
-      } else {
-        img2.onload = updateImageSize;
+        if (contentRef.current && appearAnimationEndHandlerRef.current) {
+          contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        }
+        appearAnimationEndHandlerRef.current = null;
       }
-      resizeObserverRef.current = new ResizeObserver(() => {
-        updateImageSize();
-      });
-      resizeObserverRef.current.observe(container);
-      resizeObserverRef.current.observe(img2);
-    }, 0);
+    };
+    if (contentRef.current && isMobile && !isEditor && colorAlpha > 0.9) {
+      appearAnimationEndHandlerRef.current = handleAppearAnimationEnd;
+      contentRef.current.addEventListener("animationend", handleAppearAnimationEnd);
+    }
+    const preventScroll = (e) => e.preventDefault();
+    document.addEventListener("touchmove", preventScroll, { passive: false });
     return () => {
-      clearTimeout(timeoutId);
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-        resizeObserverRef.current = null;
+      document.body.style.overflow = originalOverflow;
+      document.removeEventListener("touchmove", preventScroll);
+      if (contentRef.current && appearAnimationEndHandlerRef.current) {
+        contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        appearAnimationEndHandlerRef.current = null;
       }
     };
-  }, [isOpen, currentIndex, content]);
+  }, [isOpen, area.color, isEditor]);
   const handleArrowClick = (dir) => {
     var _a;
     (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
   };
-  const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
   const backdropDurationMs = appear.type === "fade in" || appear.type === "mix" ? Math.floor(appearDurationMs * 0.7) : appearDurationMs;
   const appearClass = (() => {
     if (appear.type === "fade in") return styles.fadeIn;
@@ -1707,247 +1897,400 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     }
     return styles.fadeIn;
   })();
-  if (!isOpen) return null;
+  const backdropDisappearClass = (() => {
+    if (appear.type === "fade in" || appear.type === "mix") return styles.fadeOut;
+    if (appear.type === "slide in") {
+      switch (appear.direction) {
+        case "left":
+          return styles.slideOutLeft;
+        case "right":
+          return styles.slideOutRight;
+        case "top":
+          return styles.slideOutTop;
+        case "bottom":
+          return styles.slideOutBottom;
+        default:
+          return styles.slideOutRight;
+      }
+    }
+    return styles.fadeOut;
+  })();
+  const disappearClass = (() => {
+    if (appear.type === "fade in") return styles.fadeOut;
+    if (appear.type === "slide in" || appear.type === "mix") {
+      switch (appear.direction) {
+        case "left":
+          return styles.slideOutLeft;
+        case "right":
+          return styles.slideOutRight;
+        case "top":
+          return styles.slideOutTop;
+        case "bottom":
+          return styles.slideOutBottom;
+        default:
+          return styles.slideOutRight;
+      }
+    }
+    return styles.fadeOut;
+  })();
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleTouchEnd = (e) => {
+      if (isClosingRef.current) {
+        e.stopPropagation();
+        return;
+      }
+      if (e.touches.length === 0 && e.changedTouches.length > 0) {
+        const currentImage = content[currentIndex];
+        const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
+        const touch = e.changedTouches[0];
+        let inside;
+        if (isCover && imageRef.current) {
+          const imgRect = imageRef.current.getBoundingClientRect();
+          inside = touch.clientX >= imgRect.left && touch.clientX <= imgRect.right && touch.clientY >= imgRect.top && touch.clientY <= imgRect.bottom;
+        } else {
+          const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+          if (!rect) return;
+          inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
+        }
+        if (!inside) {
+          e.stopPropagation();
+          isClosingRef.current = true;
+          const blockNextClick = (clickEvent) => {
+            clickEvent.stopPropagation();
+            clickEvent.preventDefault();
+            document.removeEventListener("click", blockNextClick, true);
+          };
+          document.addEventListener("click", blockNextClick, true);
+          handleClose();
+        }
+      }
+    };
+    document.addEventListener("touchend", handleTouchEnd, { passive: true });
+    return () => {
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [isOpen, handleClose, currentIndex, content]);
+  if (!isOpen && !isClosing) return null;
   return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(styles.backdropStyle, backdropAppearClass, { [styles.editor]: isEditor }),
-        style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${backdropDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
-        onClick: handleBackdropClick,
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(styles.contentStyle, appearClass),
-            style: {
-              padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`,
-              animationDuration: `${appearDurationMs}ms`,
-              animationTimingFunction: "ease",
-              animationFillMode: "both",
-              ...appear.type === "mix" && { animationDelay: `${backdropDurationMs}ms` },
-              "--splide-speed": triggers.duration || "500ms"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Splide,
-                {
-                  onMove: (splide) => {
-                    setCurrentIndex(splide.index);
-                  },
-                  ref: lightboxRef,
-                  className: styles.lightboxSplide,
-                  options: {
-                    arrows: false,
-                    speed: triggers.duration ? parseInt(triggers.duration) : 500,
-                    direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
-                    pagination: false,
-                    drag: triggers.type === "drag",
-                    perPage: 1,
-                    width: "100%",
-                    height: "100%",
-                    type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
-                    padding: 0,
-                    rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
-                  },
-                  style: { "--splide-speed": triggers.duration || "500ms" },
-                  children: content.map((item, index) => {
-                    const positionStyles = getPositionStyles(layout.position, layout.offset);
-                    const imageStyle2 = slider.type === "scale" ? (() => {
-                      const { transform, ...restStyles } = positionStyles;
-                      return {
-                        ...restStyles,
-                        "--position-transform": transform || "none"
-                      };
-                    })() : positionStyles;
-                    return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: styles.imgWrapper,
-                        onClick: handleImageWrapperClick,
-                        style: {
-                          padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`
-                        },
-                        children: /* @__PURE__ */ jsx(
-                          "img",
-                          {
-                            className: cn(styles.imageStyle, {
-                              [styles.contain]: item.image.objectFit === "contain",
-                              [styles.cover]: item.image.objectFit === "cover",
-                              [styles.scaleSlide]: slider.type === "scale"
-                            }),
-                            src: item.image.url,
-                            alt: item.image.name ?? "",
-                            onClick: onImageClick,
-                            style: imageStyle2
-                          }
-                        )
-                      }
-                    ) }, index);
-                  })
-                }
-              ),
-              controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(styles.background, isClosing ? backdropDisappearClass : backdropAppearClass),
+          style: {
+            ...isEditor && { display: "none" },
+            backgroundColor: area.color,
+            backdropFilter: `blur(${area.blur}px)`,
+            animationDuration: `${appearDurationMs}ms`,
+            animationTimingFunction: "ease",
+            animationFillMode: "both"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(styles.backdropStyle, { [styles.editor]: isEditor, [isClosing ? backdropDisappearClass : backdropAppearClass]: isEditor }),
+          style: { ...isEditor && {
+            backgroundColor: area.color,
+            backdropFilter: `blur(${area.blur}px)`,
+            animationDuration: `${appearDurationMs}ms`,
+            animationTimingFunction: "ease",
+            animationFillMode: "both"
+          } },
+          onClick: handleBackdropClick,
+          onTouchEnd: handleBackdropClick,
+          onTouchStart: handleBackdropClick,
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: contentRef,
+              className: cn(styles.contentStyle, isClosing ? disappearClass : appearClass),
+              onClick: handleContentClick,
+              style: {
+                animationDuration: `${appearDurationMs}ms`,
+                animationTimingFunction: "ease",
+                animationFillMode: "both",
+                ...appear.type === "mix" && !isClosing && { animationDelay: `${backdropDurationMs / 2}ms` },
+                ...appear.type === "mix" && isClosing && { animationDelay: "0ms" }
+              },
+              children: [
                 /* @__PURE__ */ jsx(
+                  Splide,
+                  {
+                    onMove: (splide) => {
+                      setCurrentIndex(splide.index);
+                    },
+                    ref: lightboxRef,
+                    className: styles.lightboxSplide,
+                    options: {
+                      arrows: false,
+                      speed: slider.duration ? parseInt(slider.duration) : 500,
+                      direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
+                      pagination: false,
+                      drag: triggers.type === "drag",
+                      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"
+                    },
+                    style: { "--splide-speed": slider.duration || "500ms" },
+                    children: content.map((item, index) => {
+                      const positionStyles = getPositionStyles(layout.position, layout.offset, isEditor);
+                      const imageStyle2 = slider.type === "scale" ? (() => {
+                        const { transform, ...restStyles } = positionStyles;
+                        return {
+                          ...restStyles,
+                          "--position-transform": transform || "none"
+                        };
+                      })() : positionStyles;
+                      return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: styles.imgWrapper,
+                          onClick: handleImageWrapperClick,
+                          style: { padding: scalingValue(layout.padding.top, isEditor) + " " + scalingValue(layout.padding.right, isEditor) + " " + scalingValue(layout.padding.bottom, isEditor) + " " + scalingValue(layout.padding.left, isEditor) },
+                          children: /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              ref: index === currentIndex ? imageRef : null,
+                              className: cn(styles.imageStyle, {
+                                [styles.contain]: item.image.objectFit === "contain",
+                                [styles.cover]: item.image.objectFit === "cover",
+                                [styles.scaleSlide]: slider.type === "scale"
+                              }),
+                              onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
+                              src: item.image.url,
+                              alt: item.image.name ?? "",
+                              style: {
+                                ...imageStyle2,
+                                ...item.image.objectFit === "contain" ? {
+                                  pointerEvents: "none"
+                                } : {}
+                              }
+                            }
+                          )
+                        }
+                      ) }, index);
+                    })
+                  },
+                  splideKey
+                ),
+                controls.isActive && controls.arrowsImgUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(styles.arrow, { [styles.arrowVertical]: slider.direction === "vert" }),
+                      style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
+                      children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: styles.arrowInner,
+                          style: {
+                            transform: `translate(${scalingValue(controls.offset.x, isEditor)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1), isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
+                          },
+                          onClick: (e) => {
+                            handleArrowClick("-1");
+                          },
+                          children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                            SvgImage,
+                            {
+                              url: controls.arrowsImgUrl,
+                              fill: controls.color,
+                              hoverFill: controls.hover,
+                              className: cn(styles.arrowImg, styles.mirror)
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(styles.arrow, styles.nextArrow, { [styles.arrowVertical]: slider.direction === "vert" }),
+                      style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
+                      children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: styles.arrowInner,
+                          style: {
+                            transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controls.offset.y, isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
+                          },
+                          onClick: (e) => {
+                            handleArrowClick("+1");
+                          },
+                          "aria-label": "Next",
+                          children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                            SvgImage,
+                            {
+                              url: controls.arrowsImgUrl,
+                              fill: controls.color,
+                              hoverFill: controls.hover,
+                              className: styles.arrowImg
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                area.closeIconUrl && (() => {
+                  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: styles.closeButton,
+                      style: {
+                        ...positionStyles,
+                        transform: combinedTransform
+                      },
+                      onClick: handleClose,
+                      children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl })
+                    }
+                  );
+                })(),
+                caption2.isActive && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: cn(styles.arrow, { [styles.arrowVertical]: slider.direction === "vert" }),
-                    style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
+                    className: styles.caption,
+                    style: {
+                      ...getPositionStyles(caption2.alignment, caption2.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,
+                      transitionDuration: slider.duration ? `${Math.round(parseInt(slider.duration) / 2)}ms` : "500ms"
+                    },
+                    onClick: (e) => e.stopPropagation(),
                     children: /* @__PURE__ */ jsx(
-                      "button",
+                      "div",
                       {
-                        className: styles.arrowInner,
+                        "data-styles": "caption",
+                        className: styles.captionTextInner,
                         style: {
-                          transform: `translate(${scalingValue(controls.offset.x)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1))}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
-                        },
-                        onClick: (e) => {
-                          handleArrowClick("-1");
+                          "--link-hover-color": caption2.hover,
+                          position: "relative"
                         },
-                        children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
-                          SvgImage,
-                          {
-                            url: controls.arrowsImgUrl,
-                            fill: controls.color,
-                            hoverFill: controls.hover,
-                            className: cn(styles.arrowImg, styles.mirror)
-                          }
-                        )
+                        children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                thumbnail.isActive && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: cn(styles.arrow, styles.nextArrow, { [styles.arrowVertical]: slider.direction === "vert" }),
-                    style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
-                    children: /* @__PURE__ */ jsx(
-                      "button",
+                    className: cn(
+                      styles.thumbsContainer,
                       {
-                        className: styles.arrowInner,
-                        style: {
-                          transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1))}, ${scalingValue(controls.offset.y)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
-                        },
-                        onClick: (e) => {
-                          handleArrowClick("+1");
-                        },
-                        "aria-label": "Next",
-                        children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
-                          SvgImage,
-                          {
-                            url: controls.arrowsImgUrl,
-                            fill: controls.color,
-                            hoverFill: controls.hover,
-                            className: styles.arrowImg
-                          }
-                        )
+                        [styles.thumbsContainerVertical]: slider.direction === "vert",
+                        [styles.thumbsAlignStart]: thumbnail.align === "start",
+                        [styles.thumbsAlignCenter]: thumbnail.align === "center",
+                        [styles.thumbsAlignEnd]: thumbnail.align === "end"
                       }
-                    )
-                  }
-                )
-              ] }),
-              area.closeIconUrl && (() => {
-                const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset);
-                const scaleTransform = `scale(${area.closeIconScale})`;
-                const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    className: styles.closeButton,
+                    ),
                     style: {
-                      ...positionStyles,
-                      transform: combinedTransform
+                      gap: `${scalingValue(thumbnail.grid.gap, isEditor)}`,
+                      ...getPositionStyles(thumbnail.position, thumbnail.offset, isEditor)
                     },
-                    onClick: onClose,
-                    children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl })
-                  }
-                );
-              })(),
-              caption2.isActive && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: styles.caption,
-                  style: {
-                    ...getPositionStyles(caption2.alignment, caption2.offset),
-                    ["--link-hover-color"]: caption2.hover
-                  },
-                  children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
-                }
-              ),
-              thumbnail.isActive && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    styles.thumbsContainer,
-                    {
-                      [styles.thumbsContainerVertical]: slider.direction === "vert",
-                      [styles.thumbsAlignStart]: thumbnail.align === "start",
-                      [styles.thumbsAlignCenter]: thumbnail.align === "center",
-                      [styles.thumbsAlignEnd]: thumbnail.align === "end"
-                    }
-                  ),
-                  style: {
-                    gap: `${thumbnail.grid.gap}px`,
-                    ...slider.direction === "horiz" ? { height: `${thumbnail.grid.height}px` } : {},
-                    ...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
-                    ...getPositionStyles(thumbnail.position, thumbnail.offset)
-                  },
-                  children: content.map((item, index) => {
-                    const isActive = index === currentIndex;
-                    return /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        className: styles.thumbItem,
-                        style: {
-                          transform: `scale(${isActive ? thumbnail.activeState.scale : 1})`,
-                          ...slider.direction === "horiz" ? { height: "100%" } : {},
-                          ...slider.direction === "vert" ? { width: "100%" } : {},
-                          opacity: isActive ? thumbnail.activeState.opacity : thumbnail.opacity,
-                          ["--thumb-hover"]: thumbnail.activeState.opacity
-                        },
-                        onClick: (e) => {
-                          var _a;
-                          e.stopPropagation();
-                          setCurrentIndex(index);
-                          (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
-                        },
-                        children: /* @__PURE__ */ jsx(
-                          "img",
-                          {
-                            src: item.image.url,
-                            alt: item.image.name ?? "",
-                            className: styles.thumbImage,
-                            style: {
-                              objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
-                              ...slider.direction === "horiz" ? { height: "100%" } : {},
-                              ...slider.direction === "vert" ? { width: "100%" } : {}
+                    children: content.map((item, index) => {
+                      const isActive = index === currentIndex;
+                      return /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: styles.thumbItem,
+                          style: {
+                            ...slider.direction === "horiz" ? { height: isActive ? `${scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.height, isEditor)}` } : {},
+                            ...slider.direction === "vert" ? { width: isActive ? `${scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.width, isEditor)}` } : {},
+                            ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? `${scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.width, isEditor)}` } : {},
+                            ...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? `${scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.height, isEditor)}` } : {},
+                            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);
                             }
-                          }
-                        )
-                      },
-                      `${item.image.url}-${index}`
-                    );
-                  })
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              src: item.image.url,
+                              alt: item.image.name ?? "",
+                              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.url}-${index}`
+                      );
+                    })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] }),
     document.getElementById(portalId)
   );
 };
+const getColorAlpha = (color) => {
+  const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
+  if (rgbaMatch) {
+    const values = rgbaMatch[1].split(",").map((v) => parseFloat(v.trim()));
+    if (values.length === 4) {
+      return values[3];
+    }
+    return 1;
+  }
+  const hexMatch = color.match(/^#([0-9a-fA-F]{8})$/);
+  if (hexMatch) {
+    const alphaHex = hexMatch[1].substring(6, 8);
+    return parseInt(alphaHex, 16) / 255;
+  }
+  if (color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
+    return 1;
+  }
+  return 1;
+};
 const LightboxComponent = {
   element: LightboxGallery,
   id: "lightbox",
   name: "Lightbox",
   preview: {
     type: "video",
-    url: "https://cdn.cntrl.site/projects/01GJ2SPDSH73MC92WW7ZA2CWBY/articles-assets/01KA24CHYZXJBZ0Q714B05A7VD.mp4"
+    url: "https://cdn.cntrl.site/component-assets/lightbox.mp4"
   },
   defaultSize: {
-    width: 400,
-    height: 400
+    width: 440,
+    height: 550
   },
   schema: {
     type: "object",
@@ -1972,7 +2315,7 @@ const LightboxComponent = {
                   url: {
                     type: "string",
                     display: {
-                      type: "settings-image-input"
+                      type: "cover-image-input"
                     }
                   }
                 }
@@ -2014,14 +2357,6 @@ const LightboxComponent = {
                       type: "direction-control"
                     },
                     enum: ["top", "left", "right", "bottom"]
-                  },
-                  repeat: {
-                    type: "string",
-                    title: "Repeat",
-                    display: {
-                      type: "ratio-group"
-                    },
-                    enum: ["close", "loop"]
                   }
                 }
               },
@@ -2045,13 +2380,14 @@ const LightboxComponent = {
                     },
                     enum: ["image", "50/50"]
                   },
-                  duration: {
+                  repeat: {
                     type: "string",
-                    label: "T",
+                    title: "Repeat",
                     display: {
-                      type: "step-selector"
+                      visible: false,
+                      type: "ratio-group"
                     },
-                    enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
+                    enum: ["close", "loop"]
                   }
                 }
               },
@@ -2074,6 +2410,14 @@ const LightboxComponent = {
                       type: "ratio-group"
                     },
                     enum: ["horiz", "vert"]
+                  },
+                  duration: {
+                    type: "string",
+                    label: "T",
+                    display: {
+                      type: "step-selector"
+                    },
+                    enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
                   }
                 }
               },
@@ -2131,13 +2475,16 @@ const LightboxComponent = {
                       height: {
                         type: "number",
                         label: "H",
+                        scalingEnabled: true,
                         display: {
-                          type: "numeric-input"
+                          type: "numeric-input",
+                          visible: true
                         }
                       },
                       width: {
                         type: "number",
                         label: "W",
+                        scalingEnabled: true,
                         display: {
                           type: "numeric-input",
                           visible: false
@@ -2146,6 +2493,7 @@ const LightboxComponent = {
                       gap: {
                         type: "number",
                         label: "Gap",
+                        scalingEnabled: true,
                         display: {
                           type: "numeric-input"
                         }
@@ -2154,15 +2502,28 @@ const LightboxComponent = {
                   },
                   offset: {
                     type: "object",
+                    title: "Offset",
                     display: {
-                      type: "offset-controls"
+                      type: "group"
                     },
                     properties: {
                       x: {
-                        type: "number"
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       },
                       y: {
-                        type: "number"
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       }
                     }
                   },
@@ -2187,7 +2548,7 @@ const LightboxComponent = {
                       scale: {
                         type: "number",
                         title: "Scale",
-                        min: 0.5,
+                        min: 1,
                         max: 5,
                         step: 0.1,
                         display: {
@@ -2224,15 +2585,28 @@ const LightboxComponent = {
                   },
                   offset: {
                     type: "object",
+                    title: "Offset",
                     display: {
-                      type: "offset-controls"
+                      type: "group"
                     },
                     properties: {
                       x: {
-                        type: "number"
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       },
                       y: {
-                        type: "number"
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       }
                     }
                   },
@@ -2244,15 +2618,23 @@ const LightboxComponent = {
                     },
                     properties: {
                       top: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       left: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       right: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       bottom: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       }
                     }
@@ -2278,16 +2660,29 @@ const LightboxComponent = {
                     }
                   },
                   offset: {
+                    title: "Offset",
                     type: "object",
                     display: {
-                      type: "offset-controls"
+                      type: "group"
                     },
                     properties: {
                       x: {
-                        type: "number"
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       },
                       y: {
-                        type: "number"
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       }
                     }
                   },
@@ -2366,15 +2761,28 @@ const LightboxComponent = {
                   },
                   closeIconOffset: {
                     type: "object",
+                    title: "Offset",
                     display: {
-                      type: "offset-controls"
+                      type: "group"
                     },
                     properties: {
                       x: {
-                        type: "number"
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       },
                       y: {
-                        type: "number"
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       }
                     }
                   }
@@ -2400,16 +2808,29 @@ const LightboxComponent = {
                     enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
                   },
                   offset: {
+                    title: "Offset",
                     type: "object",
                     display: {
-                      type: "offset-controls"
+                      type: "group"
                     },
                     properties: {
                       x: {
-                        type: "number"
+                        type: "number",
+                        label: "X",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       },
                       y: {
-                        type: "number"
+                        type: "number",
+                        label: "Y",
+                        scalingEnabled: true,
+                        display: {
+                          type: "numeric-input",
+                          visible: true
+                        }
                       }
                     }
                   },
@@ -2429,38 +2850,38 @@ const LightboxComponent = {
         default: {
           thumbnailBlock: {
             cover: {
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png"
+              url: "https://cdn.cntrl.site/component-assets/Cover.jpg"
             }
           },
           lightboxBlock: {
             appear: {
-              type: "slide in",
+              type: "fade in",
               duration: "1000ms",
-              direction: "right",
-              repeat: "close"
+              direction: "right"
             },
             triggers: {
               type: "click",
-              switch: "image",
-              duration: "2000ms"
+              switch: "50/50",
+              repeat: "loop"
             },
             slider: {
-              type: "fade",
-              direction: "horiz"
+              type: "slide",
+              direction: "horiz",
+              duration: "1000ms"
             },
             thumbnail: {
               isActive: true,
               position: "bottom-center",
-              fit: "cover",
+              fit: "fit",
               align: "center",
               triggers: "clk",
               grid: {
-                height: 60,
-                width: 60,
-                gap: 8
+                height: 0.03,
+                width: 0.03,
+                gap: 8e-3
               },
               offset: { x: 0, y: 0 },
-              opacity: 100,
+              opacity: 80,
               activeState: {
                 scale: 1,
                 opacity: 100
@@ -2469,7 +2890,7 @@ const LightboxComponent = {
             layout: {
               position: "middle-center",
               offset: { x: 0, y: 0 },
-              padding: { top: 0, right: 0, bottom: 0, left: 0 }
+              padding: { top: 0.04, right: 0, bottom: 0.04, left: 0 }
             },
             controls: {
               isActive: true,
@@ -2480,7 +2901,7 @@ const LightboxComponent = {
               hover: "#cccccc"
             },
             area: {
-              color: "rgba(0,0,0,0.9)",
+              color: "rgba(64,67,71,0.9)",
               blur: 0,
               closeIconUrl: null,
               closeIconAlign: "top-right",
@@ -2512,7 +2933,7 @@ const LightboxComponent = {
               value: "vert"
             },
             then: {
-              name: "properties.lightboxBlock.properties.thumbnail.properties.position.display.direction",
+              name: "properties.lightboxBlock.properties.thumbnail.properties.align.display.direction",
               value: "vertical"
             }
           },
@@ -2577,44 +2998,14 @@ const LightboxComponent = {
             }
           },
           {
-            if: {
-              name: "lightboxBlock.triggers.type",
-              value: "click"
-            },
-            then: {
-              name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "lightboxBlock.triggers.type",
-              value: "click"
-            },
+            if: [
+              { name: "lightboxBlock.triggers.type", value: "click" },
+              { name: "lightboxBlock.triggers.switch", value: "image" }
+            ],
             then: {
-              name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
+              name: "properties.lightboxBlock.properties.triggers.properties.repeat.display.visible",
               value: true
             }
-          },
-          {
-            if: {
-              name: "lightboxBlock.triggers.type",
-              value: "drag"
-            },
-            then: {
-              name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "lightboxBlock.triggers.type",
-              value: "drag"
-            },
-            then: {
-              name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
-              value: false
-            }
           }
         ]
       },
@@ -2666,7 +3057,7 @@ const LightboxComponent = {
           {
             image: {
               objectFit: "contain",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png",
+              url: "https://cdn.cntrl.site/component-assets/2.jpg",
               name: "Slider-1.png"
             },
             imageCaption: [
@@ -2679,7 +3070,7 @@ const LightboxComponent = {
           {
             image: {
               objectFit: "contain",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMTZA3RYMXKF0M095D6JD.png",
+              url: "https://cdn.cntrl.site/component-assets/3.jpg",
               name: "Slider-2.png"
             },
             imageCaption: [
@@ -2692,7 +3083,7 @@ const LightboxComponent = {
           {
             image: {
               objectFit: "contain",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMVSCMPVJBG2WF5KJZYHZ.png",
+              url: "https://cdn.cntrl.site/component-assets/4.jpg",
               name: "Slider-3.png"
             },
             imageCaption: [