@cntrl-site/components 0.1.0-alpha.8 → 0.1.0

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";
@@ -45,7 +45,7 @@ const bottomRightAlignment = "ControlSlider-module__bottomRightAlignment___kEwrz
 const clickOverlay = "ControlSlider-module__clickOverlay___DZA28";
 const contain$1 = "ControlSlider-module__contain___pLyq7";
 const cover$1 = "ControlSlider-module__cover___KdDat";
-const styles$4 = {
+const styles$3 = {
   wrapper,
   sliderItem,
   sliderImage,
@@ -90,14 +90,14 @@ const styles$4 = {
   cover: cover$1
 };
 const link$1 = "RichTextRenderer-module__link___BWeZ2";
-const styles$3 = {
+const styles$2 = {
   link: link$1
 };
 const RichTextRenderer = ({ content }) => {
   const getChildren = (children) => {
     return children.map((child, i) => {
       if (child.type === "link") {
-        return /* @__PURE__ */ jsx("a", { className: styles$3.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
+        return /* @__PURE__ */ jsx("a", { className: styles$2.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
       }
       return /* @__PURE__ */ jsx("span", { style: getLeafCss(child), children: child.text }, i);
     });
@@ -126,7 +126,7 @@ function scalingValue(value, isEditor = false) {
 }
 const svg = "SvgImage-module__svg___q3xE-";
 const img = "SvgImage-module__img___VsTm-";
-const styles$2 = {
+const styles$1 = {
   svg,
   img
 };
@@ -139,13 +139,13 @@ const SvgImage = ({ url, fill = "#000000", hoverFill = "#CCCCCC", className = ""
     }
   }, []);
   if (!url.endsWith(".svg") || !supportsMask) {
-    return /* @__PURE__ */ jsx("img", { src: url, alt: "", className: cn(styles$2.img, className) });
+    return /* @__PURE__ */ jsx("img", { src: url, alt: "", className: cn(styles$1.img, className) });
   }
   return /* @__PURE__ */ jsx(
     "span",
     {
       "data-supports-mask": supportsMask,
-      className: cn(styles$2.svg, className),
+      className: cn(styles$1.svg, className),
       style: {
         "--svg": `url(${url})`,
         "--fill": fill,
@@ -155,15 +155,15 @@ const SvgImage = ({ url, fill = "#000000", hoverFill = "#CCCCCC", className = ""
   );
 };
 const alignmentClassName = {
-  "top-left": styles$4.topLeftAlignment,
-  "top-center": styles$4.topCenterAlignment,
-  "top-right": styles$4.topRightAlignment,
-  "middle-left": styles$4.middleLeftAlignment,
-  "middle-center": styles$4.middleCenterAlignment,
-  "middle-right": styles$4.middleRightAlignment,
-  "bottom-left": styles$4.bottomLeftAlignment,
-  "bottom-center": styles$4.bottomCenterAlignment,
-  "bottom-right": styles$4.bottomRightAlignment
+  "top-left": styles$3.topLeftAlignment,
+  "top-center": styles$3.topCenterAlignment,
+  "top-right": styles$3.topRightAlignment,
+  "middle-left": styles$3.middleLeftAlignment,
+  "middle-center": styles$3.middleCenterAlignment,
+  "middle-right": styles$3.middleRightAlignment,
+  "bottom-left": styles$3.bottomLeftAlignment,
+  "bottom-center": styles$3.bottomCenterAlignment,
+  "bottom-right": styles$3.bottomRightAlignment
 };
 function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
   const [sliderRef, setSliderRef] = useState(null);
@@ -198,10 +198,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
     setKey((prev) => prev + 1);
     prevSliderTypeRef.current = transition.type;
   }, [transition.type]);
-  return /* @__PURE__ */ jsx("div", { className: cn(styles$4.wrapper, { [styles$4.editor]: isEditor }), ref: setWrapperRef, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: cn(styles$3.wrapper, { [styles$3.editor]: isEditor }), ref: setWrapperRef, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$4.sliderInner,
+      className: styles$3.sliderInner,
       style: {
         width: sliderDimensions ? sliderDimensions.width : "100%",
         height: sliderDimensions ? sliderDimensions.height : "100%",
@@ -211,17 +211,17 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         settings.caption.isActive && /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(styles$4.captionBlock),
+            className: cn(styles$3.captionBlock),
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$4.captionTextWrapper,
+                className: styles$3.captionTextWrapper,
                 children: content.map((item, index) => /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: cn(styles$4.captionText, alignmentClassName[caption2.alignment], {
-                      [styles$4.withPointerEvents]: index === currentSlideIndex && isEditor,
-                      [styles$4.active]: index === currentSlideIndex
+                    className: cn(styles$3.captionText, alignmentClassName[caption2.alignment], {
+                      [styles$3.withPointerEvents]: index === currentSlideIndex && isEditor,
+                      [styles$3.active]: index === currentSlideIndex
                     }),
                     style: {
                       fontFamily: fontSettings.fontFamily,
@@ -243,7 +243,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                       "div",
                       {
                         "data-styles": "caption",
-                        className: styles$4.captionTextInner,
+                        className: styles$3.captionTextInner,
                         style: {
                           "--link-hover-color": caption2.hover,
                           position: "relative",
@@ -286,17 +286,17 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             children: content.map((item, index) => /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$4.sliderItem,
+                className: styles$3.sliderItem,
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: styles$4.imgWrapper,
+                    className: styles$3.imgWrapper,
                     children: /* @__PURE__ */ jsx(
                       "img",
                       {
-                        className: cn(styles$4.sliderImage, {
-                          [styles$4.contain]: item.image.objectFit === "contain",
-                          [styles$4.cover]: item.image.objectFit === "cover"
+                        className: cn(styles$3.sliderImage, {
+                          [styles$3.contain]: item.image.objectFit === "contain",
+                          [styles$3.cover]: item.image.objectFit === "cover"
                         }),
                         src: item.image.url,
                         alt: item.image.name ?? ""
@@ -313,8 +313,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(styles$4.arrow, {
-                [styles$4.arrowVertical]: direction === "vert"
+              className: cn(styles$3.arrow, {
+                [styles$3.arrowVertical]: direction === "vert"
               }),
               style: {
                 color: controls.color,
@@ -326,7 +326,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                   onClick: () => {
                     handleArrowClick("-1");
                   },
-                  className: styles$4.arrowInner,
+                  className: styles$3.arrowInner,
                   style: {
                     transform: `translate(${scalingValue(controlsOffsetX, isEditor)}, ${scalingValue(controlsOffsetY * (direction === "horiz" ? 1 : -1), isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
                   },
@@ -337,10 +337,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         url: controls.arrowsImgUrl,
                         fill: controls.color,
                         hoverFill: controls.hover,
-                        className: cn(styles$4.arrowImg, styles$4.mirror)
+                        className: cn(styles$3.arrowImg, styles$3.mirror)
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$4.arrowIcon, styles$4.arrowImg, styles$4.mirror) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
                   ]
                 }
               )
@@ -349,8 +349,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(styles$4.arrow, styles$4.nextArrow, {
-                [styles$4.arrowVertical]: direction === "vert"
+              className: cn(styles$3.arrow, styles$3.nextArrow, {
+                [styles$3.arrowVertical]: direction === "vert"
               }),
               style: {
                 color: controls.color,
@@ -359,7 +359,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
               children: /* @__PURE__ */ jsxs(
                 "button",
                 {
-                  className: styles$4.arrowInner,
+                  className: styles$3.arrowInner,
                   onClick: () => handleArrowClick("+1"),
                   style: {
                     transform: `translate(${scalingValue(controlsOffsetX * (direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controlsOffsetY, isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
@@ -371,10 +371,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         url: controls.arrowsImgUrl,
                         fill: controls.color,
                         hoverFill: controls.hover,
-                        className: styles$4.arrowImg
+                        className: styles$3.arrowImg
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$4.arrowIcon, styles$4.arrowImg) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
                   ]
                 }
               )
@@ -384,7 +384,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         triggers.triggersList.click && /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles$4.clickOverlay,
+            className: styles$3.clickOverlay,
             onClick: () => {
               if (sliderRef) {
                 sliderRef.go("+1");
@@ -395,21 +395,21 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         pagination2.isActive && /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(styles$4.pagination, {
-              [styles$4.paginationInsideBottom]: pagination2.position === "inside-1" && direction === "horiz",
-              [styles$4.paginationInsideTop]: pagination2.position === "inside-2" && direction === "horiz",
-              [styles$4.paginationOutsideBottom]: pagination2.position === "outside-1" && direction === "horiz",
-              [styles$4.paginationOutsideTop]: pagination2.position === "outside-2" && direction === "horiz",
-              [styles$4.paginationInsideLeft]: pagination2.position === "inside-1" && direction === "vert",
-              [styles$4.paginationInsideRight]: pagination2.position === "inside-2" && direction === "vert",
-              [styles$4.paginationOutsideLeft]: pagination2.position === "outside-1" && direction === "vert",
-              [styles$4.paginationOutsideRight]: pagination2.position === "outside-2" && direction === "vert",
-              [styles$4.paginationVertical]: direction === "vert"
+            className: cn(styles$3.pagination, {
+              [styles$3.paginationInsideBottom]: pagination2.position === "inside-1" && direction === "horiz",
+              [styles$3.paginationInsideTop]: pagination2.position === "inside-2" && direction === "horiz",
+              [styles$3.paginationOutsideBottom]: pagination2.position === "outside-1" && direction === "horiz",
+              [styles$3.paginationOutsideTop]: pagination2.position === "outside-2" && direction === "horiz",
+              [styles$3.paginationInsideLeft]: pagination2.position === "inside-1" && direction === "vert",
+              [styles$3.paginationInsideRight]: pagination2.position === "inside-2" && direction === "vert",
+              [styles$3.paginationOutsideLeft]: pagination2.position === "outside-1" && direction === "vert",
+              [styles$3.paginationOutsideRight]: pagination2.position === "outside-2" && direction === "vert",
+              [styles$3.paginationVertical]: direction === "vert"
             }),
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$4.paginationInner,
+                className: styles$3.paginationInner,
                 style: {
                   backgroundColor: pagination2.colors[2],
                   transform: `scale(${pagination2.scale / 100}) translate(${scalingValue(pagination2.offset.x, isEditor)}, ${scalingValue(pagination2.offset.y, isEditor)}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
@@ -422,12 +422,12 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         sliderRef.go(index);
                       }
                     },
-                    className: cn(styles$4.paginationItem),
+                    className: cn(styles$3.paginationItem),
                     children: /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: cn(styles$4.dot, {
-                          [styles$4.activeDot]: index === currentSlideIndex
+                        className: cn(styles$3.dot, {
+                          [styles$3.activeDot]: index === currentSlideIndex
                         }),
                         style: {
                           backgroundColor: index === currentSlideIndex ? pagination2.colors[0] : pagination2.colors[1],
@@ -504,7 +504,6 @@ const ControlSliderComponent = {
           direction: {
             icon: "horizontal-resize",
             tooltip: "Direction",
-            title: "direction",
             type: "string",
             display: {
               type: "ratio-group"
@@ -563,15 +562,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 +636,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
+                    }
                   }
                 }
               },
@@ -687,20 +712,33 @@ 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
+                    }
                   }
                 }
               },
               hover: {
-                title: "hover",
+                title: "Link Hover",
                 type: "string",
                 display: {
                   type: "settings-color-picker",
@@ -1000,7 +1038,7 @@ const ControlSliderComponent = {
 const imageRevealSlider = "ImageRevealSlider-module__imageRevealSlider___UE5Ob";
 const image = "ImageRevealSlider-module__image___Qjt-e";
 const link = "ImageRevealSlider-module__link___N-iLG";
-const styles$1 = {
+const styles = {
   imageRevealSlider,
   image,
   link
@@ -1135,12 +1173,12 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     {
       ref: divRef,
       onClick: handleClick,
-      className: styles$1.imageRevealSlider,
+      className: styles.imageRevealSlider,
       style: { cursor: cursorType !== "system" && defaultCursor ? `url(${target === "area" ? hoverCursor : defaultCursor}), auto` : "default" },
       children: placedImages.map((img2) => /* @__PURE__ */ jsx(
         "div",
         {
-          className: styles$1.wrapper,
+          className: styles.wrapper,
           style: {
             top: `${img2.y}px`,
             left: `${img2.x}px`,
@@ -1150,12 +1188,12 @@ function ImageRevealSlider({ settings, content, isEditor }) {
             height: "auto",
             cursor: cursorType !== "system" && hoverCursor ? `url(${hoverCursor}), auto` : "default"
           },
-          children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles$1.link, children: /* @__PURE__ */ jsx(
+          children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
             "img",
             {
               src: img2.url,
               alt: img2.name,
-              className: styles$1.image
+              className: styles.image
             },
             img2.id
           ) }) : /* @__PURE__ */ jsx(
@@ -1163,7 +1201,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
             {
               src: img2.url,
               alt: img2.name,
-              className: styles$1.image
+              className: styles.image
             },
             img2.id
           )
@@ -1206,7 +1244,7 @@ const ControlImageRevealSliderComponent = {
                 display: {
                   type: "ratio-group"
                 },
-                enum: ["as is", "custom", "random"]
+                enum: ["as Is", "custom", "random"]
               },
               imageWidth: {
                 type: "number",
@@ -1441,39 +1479,44 @@ 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";
-const imageStyle = "Lightbox-module__imageStyle___Qb7f5";
-const imgWrapper = "Lightbox-module__imgWrapper___cdytV";
-const contain = "Lightbox-module__contain___5gATW";
-const cover = "Lightbox-module__cover___8HZy7";
-const caption = "Lightbox-module__caption___3e-22";
-const lightboxSplide = "Lightbox-module__lightboxSplide___yMC4v";
-const arrow = "Lightbox-module__arrow___s3Bn2";
-const arrowVertical = "Lightbox-module__arrowVertical___6ztxz";
-const nextArrow = "Lightbox-module__nextArrow___i23DU";
-const arrowInner = "Lightbox-module__arrowInner___Mm3xe";
-const arrowImg = "Lightbox-module__arrowImg___UxHPR";
-const mirror = "Lightbox-module__mirror___50NCE";
-const thumbsContainerVertical = "Lightbox-module__thumbsContainerVertical___lVaf-";
-const thumbsContainer = "Lightbox-module__thumbsContainer___DqOCP";
-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 scaleSlide = "Lightbox-module__scaleSlide___wS7d4";
-const styles = {
+const heroImage = "LightBox-module__heroImage___sTxNF";
+const background = "LightBox-module__background___rm9ml";
+const editor = "LightBox-module__editor___4ACaY";
+const contentStyle = "LightBox-module__contentStyle___Bgnsq";
+const imageStyle = "LightBox-module__imageStyle___tLIlB";
+const imgWrapper = "LightBox-module__imgWrapper___LuFUp";
+const contain = "LightBox-module__contain___8-yaS";
+const cover = "LightBox-module__cover___hNvOG";
+const caption = "LightBox-module__caption___b6L2I";
+const captionTextInner = "LightBox-module__captionTextInner___rCGNH";
+const lightboxSplide = "LightBox-module__lightboxSplide___XFuWC";
+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 arrowImg = "LightBox-module__arrowImg___pNV88";
+const mirror = "LightBox-module__mirror___pjeXc";
+const thumbsContainerVertical = "LightBox-module__thumbsContainerVertical___wttk5";
+const thumbsContainer = "LightBox-module__thumbsContainer___osSma";
+const thumbsAlignStart = "LightBox-module__thumbsAlignStart___MO6tY";
+const thumbsAlignCenter = "LightBox-module__thumbsAlignCenter___Q4sUx";
+const thumbsAlignEnd = "LightBox-module__thumbsAlignEnd___p4y9R";
+const thumbItem = "LightBox-module__thumbItem___HvnF3";
+const closeButton = "LightBox-module__closeButton___g2khP";
+const fadeIn = "LightBox-module__fadeIn___0m5GW";
+const slideInLeft = "LightBox-module__slideInLeft___gPYwC";
+const slideInRight = "LightBox-module__slideInRight___S-pPp";
+const slideInTop = "LightBox-module__slideInTop___DFdAj";
+const slideInBottom = "LightBox-module__slideInBottom___m27kZ";
+const fadeOut = "LightBox-module__fadeOut___55qBR";
+const slideOutLeft = "LightBox-module__slideOutLeft___NvU7P";
+const slideOutRight = "LightBox-module__slideOutRight___SK7eC";
+const slideOutTop = "LightBox-module__slideOutTop___Vgg0z";
+const slideOutBottom = "LightBox-module__slideOutBottom___nJ0Ef";
+const scaleSlide = "LightBox-module__scaleSlide___vZriG";
+const classes = {
+  heroImage,
   background,
-  backdropStyle,
   editor,
   contentStyle,
   imageStyle,
@@ -1481,6 +1524,7 @@ const styles = {
   contain,
   cover,
   caption,
+  captionTextInner,
   lightboxSplide,
   arrow,
   arrowVertical,
@@ -1494,16 +1538,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") {
@@ -1527,17 +1575,136 @@ 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 LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) {
+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 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;
+}
+function getAnimationClasses(type, direction) {
+  const appearClass = (() => {
+    if (type === "fade in") return classes.fadeIn;
+    if (type === "slide in" || type === "mix") {
+      switch (direction) {
+        case "left":
+          return classes.slideInLeft;
+        case "right":
+          return classes.slideInRight;
+        case "top":
+          return classes.slideInTop;
+        case "bottom":
+          return classes.slideInBottom;
+        default:
+          return classes.slideInRight;
+      }
+    }
+    return classes.fadeIn;
+  })();
+  const backdropAppearClass = (() => {
+    if (type === "fade in" || type === "mix") return classes.fadeIn;
+    if (type === "slide in") {
+      switch (direction) {
+        case "left":
+          return classes.slideInLeft;
+        case "right":
+          return classes.slideInRight;
+        case "top":
+          return classes.slideInTop;
+        case "bottom":
+          return classes.slideInBottom;
+        default:
+          return classes.slideInRight;
+      }
+    }
+    return classes.fadeIn;
+  })();
+  const backdropDisappearClass = (() => {
+    if (type === "fade in" || type === "mix") return classes.fadeOut;
+    if (type === "slide in") {
+      switch (direction) {
+        case "left":
+          return classes.slideOutLeft;
+        case "right":
+          return classes.slideOutRight;
+        case "top":
+          return classes.slideOutTop;
+        case "bottom":
+          return classes.slideOutBottom;
+        default:
+          return classes.slideOutRight;
+      }
+    }
+    return classes.fadeOut;
+  })();
+  const disappearClass = (() => {
+    if (type === "fade in") return classes.fadeOut;
+    if (type === "slide in" || type === "mix") {
+      switch (direction) {
+        case "left":
+          return classes.slideOutLeft;
+        case "right":
+          return classes.slideOutRight;
+        case "top":
+          return classes.slideOutTop;
+        case "bottom":
+          return classes.slideOutBottom;
+        default:
+          return classes.slideOutRight;
+      }
+    }
+    return classes.fadeOut;
+  })();
+  return { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass };
+}
+const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) => {
   const [open, setOpen] = React.useState(false);
   const { url } = settings.thumbnailBlock.cover;
   useEffect(() => {
@@ -1554,51 +1721,93 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
       {
         src: url,
         alt: "Cover",
-        style: { width: "100%", height: "100%", cursor: "pointer", objectFit: "cover" },
+        className: classes.heroImage,
         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,
+        lightboxStyles: styles2,
+        portalId,
+        isEditor
+      }
+    )
   ] });
-}
-const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId, isEditor }) => {
-  const [currentIndex, setCurrentIndex] = React.useState(0);
+};
+const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId, isEditor }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [splideKey, setSplideKey] = useState(0);
+  const [isClosing, setIsClosing] = useState(false);
+  const [animationFinished, setAnimationFinished] = useState(false);
+  const [thumbnailDimensions, setThumbnailDimensions] = useState({});
   const lightboxRef = useRef(null);
-  const resizeObserverRef = useRef(null);
+  const prevSliderTypeRef = useRef(null);
+  const imageRef = useRef(null);
+  const isClosingRef = useRef(false);
+  const animationTargetRef = useRef(null);
+  const animationEndHandlerRef = useRef(null);
+  const appearAnimationEndHandlerRef = useRef(null);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
-  const handleBackdropClick = (e) => {
-    if (!closeOnBackdropClick) return;
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-  const handleImageWrapperClick = (e) => {
-    if (!closeOnBackdropClick) return;
-    if (e.target === e.currentTarget) {
-      onClose();
+  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.caption;
+  const { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass } = getAnimationClasses(appear.type, appear.direction);
+  useEffect(() => {
+    const handleLayoutChange = () => {
+      setTimeout(() => {
+        var _a, _b;
+        (_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
+      }, 16);
+    };
+    const handleComponentContentChange = () => {
+      setSplideKey((prev) => prev + 1);
+    };
+    window.addEventListener("ArticleEditor.Layout:change", handleLayoutChange);
+    window.addEventListener("ArticleEditor.ComponentContent:change", handleComponentContentChange);
+    return () => {
+      window.removeEventListener("ArticleEditor.Layout:change", handleLayoutChange);
+      window.removeEventListener("ArticleEditor.ComponentContent:change", handleComponentContentChange);
+    };
+  }, []);
+  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 = "";
     }
-  };
-  const handleContentClick = (e) => {
-    if (!closeOnBackdropClick) return;
-    const target = e.target;
-    const isImg = target.tagName === "IMG" || target.closest("img");
-    const isButton = target.tagName === "BUTTON" || target.closest("button");
-    if (!isImg && !isButton) {
-      onClose();
+    setIsClosing(true);
+    isClosingRef.current = true;
+    const handleAnimationEnd = (e) => {
+      if (e.target === animationTargetRef.current && e.animationName) {
+        if (animationTargetRef.current && animationEndHandlerRef.current) {
+          animationTargetRef.current.removeEventListener("animationend", animationEndHandlerRef.current);
+        }
+        animationEndHandlerRef.current = null;
+        onClose();
+        setIsClosing(false);
+      }
+    };
+    if (animationTargetRef.current) {
+      animationEndHandlerRef.current = handleAnimationEnd;
+      animationTargetRef.current.addEventListener("animationend", handleAnimationEnd);
     }
-  };
-  const onImageClick = (e) => {
+  }, [onClose, area.color, isEditor]);
+  const handleTriggerClick = (img2, clientX, clientY) => {
     var _a, _b;
+    if (!img2) return;
     if (triggers.type === "click" && triggers.switch === "image") {
-      e.stopPropagation();
-      (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
-    }
-    if (triggers.type === "click" && triggers.switch === "50/50") {
-      e.stopPropagation();
-      const img2 = e.currentTarget;
+      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 rect = img2.getBoundingClientRect();
-      const clickX = e.clientX - rect.left;
-      const clickY = e.clientY - rect.top;
+      const clickX = clientX - rect.left;
+      const clickY = clientY - rect.top;
       const imgWidth = rect.width;
       const imgHeight = rect.height;
       let dir;
@@ -1610,362 +1819,431 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
       (_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
     }
   };
+  const handleImageWrapperClick = (e) => {
+    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) {
+      handleTriggerClick(imageRef.current, clientX, clientY);
+    } else {
+      handleClose();
+    }
+  };
+  const onImageClick = (e) => {
+    e.stopPropagation();
+    handleTriggerClick(e.currentTarget, e.clientX, e.clientY);
+  };
   useEffect(() => {
-    if (!isOpen || !closeOnEsc) return;
+    if (!isOpen) return;
     const onKeyDown = (event) => {
+      var _a, _b;
       if (event.key === "Escape") {
-        onClose();
+        handleClose();
         return;
       }
       if (event.key === "ArrowRight") {
         setCurrentIndex((prev) => (prev + 1) % Math.max(content.length, 1));
+        (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
         return;
       }
       if (event.key === "ArrowLeft") {
         setCurrentIndex((prev) => (prev - 1 + Math.max(content.length, 1)) % Math.max(content.length, 1));
+        (_b = lightboxRef.current) == null ? void 0 : _b.go("-1");
       }
     };
     window.addEventListener("keydown", onKeyDown);
     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);
+      setAnimationFinished(false);
+      setThumbnailDimensions({});
+    }
+    return () => {
+      if (animationTargetRef.current && animationEndHandlerRef.current) {
+        animationTargetRef.current.removeEventListener("animationend", animationEndHandlerRef.current);
+        animationEndHandlerRef.current = null;
+      }
+      setAnimationFinished(false);
+    };
   }, [isOpen]);
+  useEffect(() => {
+    if (prevSliderTypeRef.current !== null && prevSliderTypeRef.current !== slider.type) {
+      setSplideKey((prev) => prev + 1);
+    }
+    prevSliderTypeRef.current = slider.type;
+  }, [slider.type]);
   useEffect(() => {
     if (!isOpen) return;
     const originalOverflow = document.body.style.overflow;
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const colorAlpha = getColorAlpha(area.color);
     document.body.style.overflow = "hidden";
-    document.body.style.backgroundColor = area.color;
+    setAnimationFinished(false);
+    const handleAppearAnimationEnd = (e) => {
+      if (e.target === animationTargetRef.current && !isClosingRef.current && e.animationName) {
+        if (isMobile && !isEditor && colorAlpha > 0.9) {
+          document.body.style.backgroundColor = area.color;
+        }
+        setAnimationFinished(true);
+        if (animationTargetRef.current && appearAnimationEndHandlerRef.current) {
+          animationTargetRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        }
+        appearAnimationEndHandlerRef.current = null;
+      }
+    };
+    if (animationTargetRef.current) {
+      appearAnimationEndHandlerRef.current = handleAppearAnimationEnd;
+      animationTargetRef.current.addEventListener("animationend", handleAppearAnimationEnd);
+    }
     const preventScroll = (e) => e.preventDefault();
     document.addEventListener("touchmove", preventScroll, { passive: false });
     return () => {
       document.body.style.overflow = originalOverflow;
       document.removeEventListener("touchmove", preventScroll);
-      document.body.style.backgroundColor = "";
+      if (animationTargetRef.current && appearAnimationEndHandlerRef.current) {
+        animationTargetRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        appearAnimationEndHandlerRef.current = null;
+      }
+      setAnimationFinished(false);
     };
-  }, [isOpen]);
+  }, [isOpen, isEditor, area.color]);
   useEffect(() => {
     if (!isOpen) return;
-    if (resizeObserverRef.current) {
-      resizeObserverRef.current.disconnect();
-      resizeObserverRef.current = null;
-    }
-    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%";
+    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 {
-          img2.style.height = "100%";
+          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();
         }
-      };
-      if (img2.complete) {
-        updateImageSize();
-      } else {
-        img2.onload = updateImageSize;
       }
-      resizeObserverRef.current = new ResizeObserver(() => {
-        updateImageSize();
-      });
-      resizeObserverRef.current.observe(container);
-      resizeObserverRef.current.observe(img2);
-    }, 0);
+    };
+    document.addEventListener("touchend", handleTouchEnd, { passive: true });
     return () => {
-      clearTimeout(timeoutId);
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-        resizeObserverRef.current = null;
-      }
+      document.removeEventListener("touchend", handleTouchEnd);
     };
-  }, [isOpen, currentIndex, content]);
-  const handleArrowClick = (dir) => {
-    var _a;
-    (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
+  }, [isOpen, handleClose, currentIndex, content]);
+  const backdropStyles = {
+    backgroundColor: area.color,
+    backdropFilter: `blur(${area.blur}px)`,
+    animationDuration: `${parseInt(appear.duration)}ms`,
+    animationTimingFunction: "ease",
+    animationFillMode: "both"
   };
-  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;
-    if (appear.type === "slide in" || appear.type === "mix") {
-      switch (appear.direction) {
-        case "left":
-          return styles.slideInLeft;
-        case "right":
-          return styles.slideInRight;
-        case "top":
-          return styles.slideInTop;
-        case "bottom":
-          return styles.slideInBottom;
-        default:
-          return styles.slideInRight;
-      }
-    }
-    return styles.fadeIn;
-  })();
-  const backdropAppearClass = (() => {
-    if (appear.type === "fade in" || appear.type === "mix") return styles.fadeIn;
-    if (appear.type === "slide in") {
-      switch (appear.direction) {
-        case "left":
-          return styles.slideInLeft;
-        case "right":
-          return styles.slideInRight;
-        case "top":
-          return styles.slideInTop;
-        case "bottom":
-          return styles.slideInBottom;
-        default:
-          return styles.slideInRight;
-      }
-    }
-    return styles.fadeIn;
-  })();
-  if (!isOpen) return null;
+  if (!isOpen && !isClosing) return null;
   return createPortal(
     /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn(styles.background, backdropAppearClass),
-          style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${backdropDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" }
+          ref: !isEditor ? animationTargetRef : null,
+          className: cn(classes.background, isClosing ? backdropDisappearClass : backdropAppearClass, { [classes.editor]: isEditor }),
+          style: {
+            ...backdropStyles,
+            ...animationFinished && !isEditor && !isClosing ? { position: "absolute" } : {}
+          }
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn(styles.backdropStyle, { [styles.editor]: isEditor }),
-          onClick: handleBackdropClick,
-          children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(styles.contentStyle, appearClass),
-              onClick: handleContentClick,
-              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__ */ jsx(
-                    "div",
+          ref: isEditor ? animationTargetRef : null,
+          className: cn(classes.contentStyle, !isClosing ? appearClass : disappearClass, { [classes.editor]: isEditor }),
+          style: {
+            animationDuration: `${parseInt(appear.duration)}ms`,
+            animationTimingFunction: "ease",
+            animationFillMode: "both"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Splide,
+              {
+                onMove: (splide) => setCurrentIndex(splide.index),
+                ref: lightboxRef,
+                className: classes.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 },
+                children: content.map((item, index) => {
+                  const positionStyles = getPositionStyles(layout.position, layout.offset, isEditor);
+                  const padding = `${scalingValue(layout.padding.top, isEditor)} ${scalingValue(layout.padding.right, isEditor)} ${scalingValue(layout.padding.bottom, isEditor)} ${scalingValue(layout.padding.left, isEditor)}`;
+                  const imageStyle2 = slider.type === "scale" ? (() => {
+                    const { transform, ...restStyles } = positionStyles;
+                    return {
+                      ...restStyles,
+                      position: "absolute",
+                      padding,
+                      boxSizing: "border-box",
+                      "--position-transform": transform || "none"
+                    };
+                  })() : { ...positionStyles, position: "absolute", padding, boxSizing: "border-box" };
+                  return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx("div", { className: classes.imgWrapper, onClick: handleImageWrapperClick, children: /* @__PURE__ */ jsx(
+                    "img",
                     {
-                      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)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1))}) 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)
-                            }
-                          )
-                        }
-                      )
+                      ref: index === currentIndex ? imageRef : null,
+                      className: cn(classes.imageStyle, {
+                        [classes.contain]: item.image.objectFit === "contain",
+                        [classes.cover]: item.image.objectFit === "cover",
+                        [classes.scaleSlide]: slider.type === "scale"
+                      }),
+                      onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
+                      src: item.image.url,
+                      alt: item.image.name ?? "",
+                      style: { ...imageStyle2, pointerEvents: item.image.objectFit === "contain" ? "none" : "auto" }
                     }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "div",
+                  ) }) }, index);
+                })
+              },
+              splideKey
+            ),
+            controls.isActive && controls.arrowsImgUrl && /* @__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(
+                    "button",
                     {
-                      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: classes.arrowInner,
+                      style: { transform: `translate(${scalingValue(controls.offset.x, isEditor)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1), isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
+                      onClick: () => {
+                        var _a;
+                        return (_a = lightboxRef.current) == null ? void 0 : _a.go("-1");
+                      },
+                      "aria-label": "Previous",
+                      children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                        SvgImage,
                         {
-                          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
-                            }
-                          )
+                          url: controls.arrowsImgUrl,
+                          fill: controls.color,
+                          hoverFill: controls.hover,
+                          className: cn(classes.arrowImg, classes.mirror)
                         }
                       )
                     }
                   )
-                ] }),
-                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(
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(classes.arrow, classes.nextArrow, { [classes.arrowVertical]: slider.direction === "vert" }),
+                  style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
+                  children: /* @__PURE__ */ jsx(
                     "button",
                     {
-                      className: styles.closeButton,
-                      style: {
-                        ...positionStyles,
-                        transform: combinedTransform
+                      className: classes.arrowInner,
+                      style: { transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controls.offset.y, isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
+                      onClick: () => {
+                        var _a;
+                        return (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
                       },
-                      onClick: onClose,
-                      children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl })
+                      "aria-label": "Next",
+                      children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                        SvgImage,
+                        {
+                          url: controls.arrowsImgUrl,
+                          fill: controls.color,
+                          hoverFill: controls.hover,
+                          className: classes.arrowImg
+                        }
+                      )
                     }
-                  );
-                })(),
-                caption2.isActive && /* @__PURE__ */ jsx(
+                  )
+                }
+              )
+            ] }),
+            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: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl }) });
+            })(),
+            caption2.isActive && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classes.caption,
+                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
+                },
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: styles.caption,
-                    style: {
-                      ...getPositionStyles(caption2.alignment, caption2.offset),
-                      ["--link-hover-color"]: caption2.hover
-                    },
+                    "data-styles": "caption",
+                    className: classes.captionTextInner,
+                    style: { ["--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",
+                )
+              }
+            ),
+            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)
+                      };
+                    }
+                  };
+                  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) } : {},
+                        ...thumbnail.fit === "fit" ? getFitDimensions() : {},
+                        transition: isActive ? "all 0.2s ease" : "none",
+                        opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
+                        ["--thumb-hover"]: thumbnail.activeState.opacity / 100
+                      },
+                      onClick: (e) => {
+                        var _a;
+                        e.stopPropagation();
+                        setCurrentIndex(index);
+                        (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
+                      },
+                      onMouseEnter: () => {
+                        var _a;
+                        if (thumbnail.triggers === "hov") {
+                          (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "img",
                         {
-                          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",
-                                ...thumbnail.fit === "fit" && slider.direction === "horiz" ? { width: "fit-content" } : {},
-                                ...thumbnail.fit === "fit" && slider.direction === "vert" ? { height: "fit-content" } : {},
-                                ...slider.direction === "horiz" ? { height: "100%" } : {},
-                                ...slider.direction === "vert" ? { width: "100%" } : {}
-                              }
+                          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 }
+                              }));
                             }
-                          )
-                        },
-                        `${item.image.url}-${index}`
-                      );
-                    })
-                  }
-                )
-              ]
-            }
-          )
+                          },
+                          style: {
+                            objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
+                            ...thumbnail.fit === "fit" ? { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } : {},
+                            ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: "100%", height: "100%" } : {}
+                          }
+                        }
+                      )
+                    },
+                    `${item.image.name}-${index}`
+                  );
+                })
+              }
+            )
+          ]
         }
       )
     ] }),
@@ -1978,11 +2256,11 @@ const LightboxComponent = {
   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",
@@ -2007,7 +2285,7 @@ const LightboxComponent = {
                   url: {
                     type: "string",
                     display: {
-                      type: "settings-image-input"
+                      type: "cover-image-input"
                     }
                   }
                 }
@@ -2049,14 +2327,6 @@ const LightboxComponent = {
                       type: "direction-control"
                     },
                     enum: ["top", "left", "right", "bottom"]
-                  },
-                  repeat: {
-                    type: "string",
-                    title: "Repeat",
-                    display: {
-                      type: "ratio-group"
-                    },
-                    enum: ["close", "loop"]
                   }
                 }
               },
@@ -2080,13 +2350,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"]
                   }
                 }
               },
@@ -2109,6 +2380,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"]
                   }
                 }
               },
@@ -2163,25 +2442,20 @@ const LightboxComponent = {
                       type: "group"
                     },
                     properties: {
-                      height: {
+                      size: {
                         type: "number",
-                        label: "H",
+                        label: "Box",
+                        scalingEnabled: true,
                         display: {
                           type: "numeric-input",
                           visible: true
                         }
                       },
-                      width: {
-                        type: "number",
-                        label: "W",
-                        display: {
-                          type: "numeric-input",
-                          visible: false
-                        }
-                      },
                       gap: {
                         type: "number",
                         label: "Gap",
+                        scalingEnabled: true,
+                        min: 0,
                         display: {
                           type: "numeric-input"
                         }
@@ -2190,15 +2464,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
+                        }
                       }
                     }
                   },
@@ -2223,7 +2510,7 @@ const LightboxComponent = {
                       scale: {
                         type: "number",
                         title: "Scale",
-                        min: 0.5,
+                        min: 1,
                         max: 5,
                         step: 0.1,
                         display: {
@@ -2260,15 +2547,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
+                        }
                       }
                     }
                   },
@@ -2280,15 +2580,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"
                       }
                     }
@@ -2314,16 +2622,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
+                        }
                       }
                     }
                   },
@@ -2402,15 +2723,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
+                        }
                       }
                     }
                   }
@@ -2436,21 +2770,34 @@ 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
+                        }
                       }
                     }
                   },
                   hover: {
-                    title: "Hover",
+                    title: "Link Hover",
                     type: "string",
                     display: {
                       type: "settings-color-picker",
@@ -2463,71 +2810,208 @@ const LightboxComponent = {
           }
         },
         default: {
-          thumbnailBlock: {
-            cover: {
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png"
+          "d": {
+            thumbnailBlock: {
+              cover: {
+                url: "https://cdn.cntrl.site/component-assets/Cover.jpg"
+              }
+            },
+            lightboxBlock: {
+              appear: {
+                type: "slide in",
+                duration: "1000ms",
+                direction: "bottom"
+              },
+              triggers: {
+                type: "click",
+                switch: "image",
+                repeat: "loop"
+              },
+              slider: {
+                type: "slide",
+                direction: "vert",
+                duration: "1000ms"
+              },
+              thumbnail: {
+                isActive: true,
+                position: "middle-left",
+                fit: "fit",
+                align: "start",
+                triggers: "hov",
+                grid: {
+                  size: 0.05,
+                  gap: 0.01
+                },
+                offset: { x: 0.01, y: 0 },
+                opacity: 50,
+                activeState: {
+                  scale: 1,
+                  opacity: 100
+                }
+              },
+              layout: {
+                position: "middle-center",
+                offset: { x: 0, y: 0 },
+                padding: { top: 0.06, right: 0, bottom: 0.06, left: 0 }
+              },
+              controls: {
+                isActive: true,
+                arrowsImgUrl: null,
+                offset: { x: 0, y: 0 },
+                scale: 1,
+                color: "#000000",
+                hover: "#cccccc"
+              },
+              area: {
+                color: "rgba(28,31,34,0.9)",
+                blur: 0,
+                closeIconUrl: null,
+                closeIconAlign: "top-right",
+                closeIconOffset: { x: 0, y: 0 },
+                closeIconScale: 1
+              },
+              caption: {
+                isActive: true,
+                alignment: "middle-center",
+                offset: { x: 0, y: 0 },
+                hover: "#cccccc"
+              }
             }
           },
-          lightboxBlock: {
-            appear: {
-              type: "slide in",
-              duration: "1000ms",
-              direction: "right",
-              repeat: "close"
-            },
-            triggers: {
-              type: "click",
-              switch: "image",
-              duration: "2000ms"
-            },
-            slider: {
-              type: "fade",
-              direction: "horiz"
+          "m": {
+            thumbnailBlock: {
+              cover: {
+                url: "https://cdn.cntrl.site/component-assets/Cover.jpg"
+              }
             },
-            thumbnail: {
-              isActive: true,
-              position: "bottom-center",
-              fit: "cover",
-              align: "center",
-              triggers: "clk",
-              grid: {
-                height: 60,
-                width: 60,
-                gap: 8
-              },
-              offset: { x: 0, y: 0 },
-              opacity: 100,
-              activeState: {
+            lightboxBlock: {
+              appear: {
+                type: "fade in",
+                duration: "500ms",
+                direction: "bottom"
+              },
+              triggers: {
+                type: "click",
+                switch: "image",
+                repeat: "loop"
+              },
+              slider: {
+                type: "slide",
+                direction: "horiz",
+                duration: "1000ms"
+              },
+              thumbnail: {
+                isActive: true,
+                position: "bottom-center",
+                fit: "fit",
+                align: "start",
+                triggers: "hov",
+                grid: {
+                  size: 0.1,
+                  gap: 0.05
+                },
+                offset: { x: 0.01, y: -0.05 },
+                opacity: 50,
+                activeState: {
+                  scale: 1,
+                  opacity: 100
+                }
+              },
+              layout: {
+                position: "middle-center",
+                offset: { x: 0, y: 0 },
+                padding: { top: 0.06, right: 0.05, bottom: 0.06, left: 0.05 }
+              },
+              controls: {
+                isActive: true,
+                arrowsImgUrl: null,
+                offset: { x: 0, y: 0 },
                 scale: 1,
-                opacity: 100
+                color: "#000000",
+                hover: "#cccccc"
+              },
+              area: {
+                color: "rgba(28,31,34,0.9)",
+                blur: 0,
+                closeIconUrl: null,
+                closeIconAlign: "top-right",
+                closeIconOffset: { x: 0, y: 0 },
+                closeIconScale: 1
+              },
+              caption: {
+                isActive: true,
+                alignment: "middle-center",
+                offset: { x: 0, y: 0 },
+                hover: "#cccccc"
+              }
+            }
+          },
+          "t": {
+            thumbnailBlock: {
+              cover: {
+                url: "https://cdn.cntrl.site/component-assets/Cover.jpg"
               }
             },
-            layout: {
-              position: "middle-center",
-              offset: { x: 0, y: 0 },
-              padding: { top: 0, right: 0, bottom: 0, left: 0 }
-            },
-            controls: {
-              isActive: true,
-              arrowsImgUrl: null,
-              offset: { x: 0, y: 0 },
-              scale: 1,
-              color: "#000000",
-              hover: "#cccccc"
-            },
-            area: {
-              color: "rgba(0,0,0,0.9)",
-              blur: 0,
-              closeIconUrl: null,
-              closeIconAlign: "top-right",
-              closeIconOffset: { x: 0, y: 0 },
-              closeIconScale: 1
-            },
-            caption: {
-              isActive: true,
-              alignment: "middle-center",
-              offset: { x: 0, y: 0 },
-              hover: "#cccccc"
+            lightboxBlock: {
+              appear: {
+                type: "fade in",
+                duration: "500ms",
+                direction: "bottom"
+              },
+              triggers: {
+                type: "click",
+                switch: "image",
+                repeat: "loop"
+              },
+              slider: {
+                type: "slide",
+                direction: "vert",
+                duration: "1000ms"
+              },
+              thumbnail: {
+                isActive: true,
+                position: "middle-left",
+                fit: "fit",
+                align: "start",
+                triggers: "hov",
+                grid: {
+                  size: 0.05,
+                  gap: 0.01
+                },
+                offset: { x: 0.03, y: 0 },
+                opacity: 50,
+                activeState: {
+                  scale: 1,
+                  opacity: 100
+                }
+              },
+              layout: {
+                position: "middle-center",
+                offset: { x: 0, y: 0 },
+                padding: { top: 0.06, right: 0.1, bottom: 0.06, left: 0.1 }
+              },
+              controls: {
+                isActive: true,
+                arrowsImgUrl: null,
+                offset: { x: 0, y: 0 },
+                scale: 1,
+                color: "#000000",
+                hover: "#cccccc"
+              },
+              area: {
+                color: "rgba(28,31,34,0.9)",
+                blur: 0,
+                closeIconUrl: null,
+                closeIconAlign: "top-right",
+                closeIconOffset: { x: 0, y: 0 },
+                closeIconScale: 1
+              },
+              caption: {
+                isActive: true,
+                alignment: "middle-center",
+                offset: { x: 0, y: 0 },
+                hover: "#cccccc"
+              }
             }
           }
         },
@@ -2552,46 +3036,6 @@ const LightboxComponent = {
               value: "vertical"
             }
           },
-          {
-            if: {
-              name: "lightboxBlock.slider.direction",
-              value: "vert"
-            },
-            then: {
-              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "lightboxBlock.slider.direction",
-              value: "horiz"
-            },
-            then: {
-              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "lightboxBlock.slider.direction",
-              value: "vert"
-            },
-            then: {
-              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
-              value: false
-            }
-          },
-          {
-            if: {
-              name: "lightboxBlock.slider.direction",
-              value: "horiz"
-            },
-            then: {
-              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
-              value: false
-            }
-          },
           {
             if: {
               name: "lightboxBlock.appear.type",
@@ -2614,42 +3058,32 @@ 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"
+              name: "lightboxBlock.slider.type",
+              value: "fade"
             },
             then: {
-              name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
-              value: true
+              name: "properties.lightboxBlock.properties.slider.properties.direction.display.visible",
+              value: false
             }
           },
           {
             if: {
-              name: "lightboxBlock.triggers.type",
-              value: "drag"
+              name: "lightboxBlock.slider.type",
+              value: "scale"
             },
             then: {
-              name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
+              name: "properties.lightboxBlock.properties.slider.properties.direction.display.visible",
               value: false
             }
           },
           {
-            if: {
-              name: "lightboxBlock.triggers.type",
-              value: "drag"
-            },
+            if: [
+              { name: "lightboxBlock.triggers.type", value: "click" },
+              { name: "lightboxBlock.triggers.switch", value: "image" }
+            ],
             then: {
-              name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
-              value: false
+              name: "properties.lightboxBlock.properties.triggers.properties.repeat.display.visible",
+              value: true
             }
           }
         ]
@@ -2702,7 +3136,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: [
@@ -2715,7 +3149,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: [
@@ -2728,7 +3162,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: [