@cntrl-site/components 0.1.0-9 → 0.1.0-alpha.1

package/dist/index.js

@@ -272,7 +272,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             options: {
               arrows: false,
               speed: transition.duration ? parseInt(transition.duration) : 500,
-              autoplay: isEditor ? false : triggers.autoPlay !== null,
+              autoplay: triggers.autoPlay !== null,
               ...triggers.autoPlay !== null && {
                 interval: parseInt(triggers.autoPlay) * 1e3
               },
@@ -469,6 +469,9 @@ const ControlSliderComponent = {
       settings: {
         layoutBased: true,
         type: "object",
+        display: {
+          type: "settings-block"
+        },
         properties: {
           triggers: {
             title: "triggers",
@@ -501,9 +504,9 @@ const ControlSliderComponent = {
             }
           },
           direction: {
-            title: "direction",
             icon: "horizontal-resize",
             tooltip: "Direction",
+            title: "direction",
             type: "string",
             display: {
               type: "ratio-group"
@@ -1190,6 +1193,9 @@ const ControlImageRevealSliderComponent = {
       settings: {
         layoutBased: true,
         type: "object",
+        display: {
+          type: "settings-block"
+        },
         properties: {
           imageSize: {
             title: "IMG SIZE",
@@ -1437,27 +1443,34 @@ const ControlImageRevealSliderComponent = {
     }
   }
 };
-const backdropStyle = "LightBox-module__backdropStyle___yWDe2";
-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 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 thumbsContainer = "LightBox-module__thumbsContainer___osSma";
-const thumbItem = "LightBox-module__thumbItem___HvnF3";
-const thumbImage = "LightBox-module__thumbImage___OJ19m";
-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 backdropStyle = "Lightbox-module__backdropStyle___y7avj";
+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 = {
   backdropStyle,
   contentStyle,
@@ -1466,31 +1479,80 @@ const styles = {
   contain,
   cover,
   caption,
+  lightboxSplide,
   arrow,
   arrowVertical,
   nextArrow,
   arrowInner,
   arrowImg,
   mirror,
+  thumbsContainerVertical,
   thumbsContainer,
+  thumbsAlignStart,
+  thumbsAlignCenter,
+  thumbsAlignEnd,
   thumbItem,
   thumbImage,
+  closeButton,
   fadeIn,
   slideInLeft,
   slideInRight,
   slideInTop,
-  slideInBottom
+  slideInBottom,
+  scaleSlide
+};
+const getPositionStyles = (position, offset) => {
+  const styles2 = {};
+  const [vertical, horizontal] = position.split("-");
+  if (vertical === "top") {
+    styles2.top = "0";
+    styles2.bottom = "auto";
+  } else if (vertical === "middle") {
+    styles2.top = "50%";
+    styles2.bottom = "auto";
+  } else if (vertical === "bottom") {
+    styles2.top = "auto";
+    styles2.bottom = "0";
+  }
+  if (horizontal === "left") {
+    styles2.left = "0";
+    styles2.right = "auto";
+  } else if (horizontal === "center") {
+    styles2.left = "50%";
+    styles2.right = "auto";
+  } else if (horizontal === "right") {
+    styles2.left = "auto";
+    styles2.right = "0";
+  }
+  if (vertical === "middle" && horizontal === "center") {
+    styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
+  } else if (vertical === "middle") {
+    styles2.transform = `translate(${offset.x}px, calc(-50% + ${offset.y}px))`;
+  } else if (horizontal === "center") {
+    styles2.transform = `translate(calc(-50% + ${offset.x}px), ${offset.y}px)`;
+  } else {
+    styles2.transform = `translate(${offset.x}px, ${offset.y}px)`;
+  }
+  return styles2;
 };
-function LightboxGallery({ settings, content, styles: styles2, portalId }) {
+function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent }) {
   const [open, setOpen] = React.useState(false);
-  const { url: coverUrl } = settings.cover;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  const { url } = settings.thumbnailBlock.cover;
+  React.useEffect(() => {
+    if (activeEvent === "close") {
+      setOpen(false);
+    }
+    if (activeEvent === "open") {
+      setOpen(true);
+    }
+  }, [activeEvent]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
-        src: coverUrl,
+        src: url,
         alt: "Cover",
-        style: { width: "100%", height: "100%", cursor: "pointer" },
+        style: { width: "100%", height: "100%", cursor: "pointer", objectFit: "cover" },
         onClick: () => setOpen(true)
       }
     ),
@@ -1498,9 +1560,10 @@ function LightboxGallery({ settings, content, styles: styles2, portalId }) {
   ] });
 }
 const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId }) => {
-  var _a;
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const lightboxRef = React.useRef(null);
+  const resizeObserverRef = React.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) {
@@ -1514,12 +1577,12 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     }
   };
   const onImageClick = (e) => {
-    var _a2, _b;
-    if (settings.triggers.type === "click" && settings.triggers.switch === "image") {
+    var _a, _b;
+    if (triggers.type === "click" && triggers.switch === "image") {
       e.stopPropagation();
-      (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
+      (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
     }
-    if (settings.triggers.type === "click" && settings.triggers.switch === "50/50") {
+    if (triggers.type === "click" && triggers.switch === "50/50") {
       e.stopPropagation();
       const img2 = e.currentTarget;
       const rect = img2.getBoundingClientRect();
@@ -1528,7 +1591,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
       const imgWidth = rect.width;
       const imgHeight = rect.height;
       let dir;
-      if (settings.slider.direction === "horiz") {
+      if (slider.direction === "horiz") {
         dir = clickX < imgWidth / 2 ? "-1" : "+1";
       } else {
         dir = clickY < imgHeight / 2 ? "-1" : "+1";
@@ -1559,16 +1622,66 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
   React.useEffect(() => {
     if (isOpen) setCurrentIndex(0);
   }, [isOpen]);
+  React.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%";
+        } else {
+          img2.style.height = "100%";
+        }
+      };
+      if (img2.complete) {
+        updateImageSize();
+      } else {
+        img2.onload = updateImageSize;
+      }
+      resizeObserverRef.current = new ResizeObserver(() => {
+        updateImageSize();
+      });
+      resizeObserverRef.current.observe(container);
+      resizeObserverRef.current.observe(img2);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+    };
+  }, [isOpen, currentIndex, content]);
   const handleArrowClick = (dir) => {
-    var _a2;
-    (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(dir);
+    var _a;
+    (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
   };
-  const appearDurationMs = ((_a = settings.appear) == null ? void 0 : _a.duration) ? parseInt(settings.appear.duration) : 300;
+  const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
   const appearClass = (() => {
-    var _a2, _b;
-    if (((_a2 = settings.appear) == null ? void 0 : _a2.type) === "fade in") return styles.fadeIn;
-    if (((_b = settings.appear) == null ? void 0 : _b.type) === "slide in") {
-      switch (settings.appear.direction) {
+    if (appear.type === "fade in") return styles.fadeIn;
+    if (appear.type === "slide in") {
+      return "";
+    }
+    if (appear.type === "mix") return styles.fadeIn;
+    return styles.fadeIn;
+  })();
+  const backdropAppearClass = (() => {
+    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":
@@ -1588,18 +1701,20 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn(styles.backdropStyle, styles.fadeIn),
-        style: { backgroundColor: settings.area.color, backdropFilter: `blur(${settings.area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
+        className: cn(styles.backdropStyle, backdropAppearClass),
+        style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
         onClick: handleBackdropClick,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(styles.contentStyle, appearClass),
             style: {
-              padding: `${settings.layout.padding.top}px ${settings.layout.padding.right}px ${settings.layout.padding.bottom}px ${settings.layout.padding.left}px`,
+              padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`,
               animationDuration: `${appearDurationMs}ms`,
               animationTimingFunction: "ease",
-              animationFillMode: "both"
+              animationFillMode: "both",
+              ...appear.type === "mix" && { animationDelay: "0.5s" },
+              "--splide-speed": triggers.duration || "500ms"
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1609,55 +1724,76 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                     setCurrentIndex(splide.index);
                   },
                   ref: lightboxRef,
+                  className: styles.lightboxSplide,
                   options: {
                     arrows: false,
-                    speed: settings.triggers.duration ? parseInt(settings.triggers.duration) : 500,
-                    direction: settings.slider.direction === "horiz" || settings.slider.type === "fade" ? "ltr" : "ttb",
+                    speed: triggers.duration ? parseInt(triggers.duration) : 500,
+                    direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
                     pagination: false,
-                    drag: settings.triggers.type === "drag",
+                    drag: triggers.type === "drag",
                     perPage: 1,
                     width: "100%",
                     height: "100%",
-                    type: settings.slider.type === "fade" ? "fade" : "loop",
+                    type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
                     padding: 0,
-                    rewind: false
+                    rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
                   },
-                  children: content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.imgWrapper, onClick: handleImageWrapperClick, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "img",
-                    {
-                      className: cn(styles.imageStyle, {
-                        [styles.contain]: item.image.objectFit === "contain",
-                        [styles.cover]: item.image.objectFit === "cover"
-                      }),
-                      src: item.image.url,
-                      alt: item.image.name ?? "",
-                      onClick: onImageClick
-                    }
-                  ) }) }, index))
+                  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__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: styles.imgWrapper,
+                        onClick: handleImageWrapperClick,
+                        children: /* @__PURE__ */ jsxRuntime.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);
+                  })
                 }
               ),
-              settings.controls.isActive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              controls.isActive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: cn(styles.arrow, { [styles.arrowVertical]: settings.slider.direction === "vert" }),
-                    style: { color: settings.controls.color, ["--arrow-hover-color"]: settings.controls.hover },
+                    className: cn(styles.arrow, { [styles.arrowVertical]: slider.direction === "vert" }),
+                    style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       "button",
                       {
                         className: styles.arrowInner,
                         style: {
-                          transform: `translate(${scalingValue(settings.controls.offset.x)}, ${scalingValue(settings.controls.offset.y * (settings.slider.direction === "horiz" ? 1 : -1))}) scale(${settings.controls.scale / 100}) rotate(${settings.slider.direction === "horiz" ? "0deg" : "90deg"})`
+                          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: settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                        children: controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
                           SvgImage,
                           {
-                            url: settings.controls.arrowsImgUrl,
-                            fill: settings.controls.color,
-                            hoverFill: settings.controls.hover,
+                            url: controls.arrowsImgUrl,
+                            fill: controls.color,
+                            hoverFill: controls.hover,
                             className: cn(styles.arrowImg, styles.mirror)
                           }
                         )
@@ -1668,25 +1804,25 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: cn(styles.arrow, styles.nextArrow, { [styles.arrowVertical]: settings.slider.direction === "vert" }),
-                    style: { color: settings.controls.color, ["--arrow-hover-color"]: settings.controls.hover },
+                    className: cn(styles.arrow, styles.nextArrow, { [styles.arrowVertical]: slider.direction === "vert" }),
+                    style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       "button",
                       {
                         className: styles.arrowInner,
                         style: {
-                          transform: `translate(${scalingValue(settings.controls.offset.x * (settings.slider.direction === "horiz" ? -1 : 1))}, ${scalingValue(settings.controls.offset.y)}) scale(${settings.controls.scale / 100}) rotate(${settings.slider.direction === "horiz" ? "0deg" : "90deg"})`
+                          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: settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                        children: controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
                           SvgImage,
                           {
-                            url: settings.controls.arrowsImgUrl,
-                            fill: settings.controls.color,
-                            hoverFill: settings.controls.hover,
+                            url: controls.arrowsImgUrl,
+                            fill: controls.color,
+                            hoverFill: controls.hover,
                             className: styles.arrowImg
                           }
                         )
@@ -1695,15 +1831,51 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                   }
                 )
               ] }),
-              settings.area.closeIconUrl && /* @__PURE__ */ jsxRuntime.jsx("button", { className: styles.closeButton, style: { top: settings.area.closeIconOffset.y, left: settings.area.closeIconOffset.x }, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: settings.area.closeIconUrl, fill: settings.area.color }) }),
-              settings.caption.isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.caption, style: { top: settings.caption.offset.y, left: settings.caption.offset.x }, children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
-              settings.thumbnail.isActive && /* @__PURE__ */ jsxRuntime.jsx(
+              area.closeIconUrl && (() => {
+                const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset);
+                const scaleTransform = `scale(${area.closeIconScale})`;
+                const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    className: styles.closeButton,
+                    style: {
+                      ...positionStyles,
+                      transform: combinedTransform
+                    },
+                    onClick: onClose,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: area.closeIconUrl })
+                  }
+                );
+              })(),
+              caption2.isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: styles.caption,
+                  style: {
+                    ...getPositionStyles(caption2.alignment, caption2.offset),
+                    ["--link-hover-color"]: caption2.hover
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
+                }
+              ),
+              thumbnail.isActive && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: cn(styles.thumbsContainer),
+                  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: `${settings.thumbnail.grid.gap}px`,
-                    height: `${settings.thumbnail.grid.height}px`
+                    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;
@@ -1712,16 +1884,17 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                       {
                         className: styles.thumbItem,
                         style: {
-                          transform: `scale(${isActive ? settings.thumbnail.activeState.scale : 1})`,
-                          height: "100%",
-                          opacity: isActive ? settings.thumbnail.activeState.opacity : settings.thumbnail.opacity,
-                          ["--thumb-hover"]: settings.thumbnail.activeState.opacity
+                          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 _a2;
+                          var _a;
                           e.stopPropagation();
                           setCurrentIndex(index);
-                          (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(index);
+                          (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
                         },
                         children: /* @__PURE__ */ jsxRuntime.jsx(
                           "img",
@@ -1729,7 +1902,11 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                             src: item.image.url,
                             alt: item.image.name ?? "",
                             className: styles.thumbImage,
-                            style: { objectFit: settings.thumbnail.fit === "cover" ? "cover" : "contain" }
+                            style: {
+                              objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
+                              ...slider.direction === "horiz" ? { height: "100%" } : {},
+                              ...slider.direction === "vert" ? { width: "100%" } : {}
+                            }
                           }
                         )
                       },
@@ -1752,7 +1929,7 @@ const LightboxComponent = {
   name: "Lightbox",
   preview: {
     type: "video",
-    url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7EQ4ME6CP4KX7TJ4HPAXFEW.mp4"
+    url: "https://cdn.cntrl.site/projects/01GJ2SPDSH73MC92WW7ZA2CWBY/articles-assets/01KA24CHYZXJBZ0Q714B05A7VD.mp4"
   },
   defaultSize: {
     width: 400,
@@ -1765,219 +1942,214 @@ const LightboxComponent = {
         layoutBased: true,
         type: "object",
         properties: {
-          cover: {
-            title: "COVER",
-            icon: "cover",
-            tooltip: "Cover Image",
+          thumbnailBlock: {
+            display: {
+              type: "settings-block",
+              triggerEvent: "close"
+            },
             type: "object",
             properties: {
-              url: {
-                type: "string",
-                display: {
-                  type: "settings-image-input"
+              cover: {
+                title: "COVER",
+                icon: "cover",
+                tooltip: "Cover Image",
+                type: "object",
+                properties: {
+                  url: {
+                    type: "string",
+                    display: {
+                      type: "settings-image-input"
+                    }
+                  }
                 }
               }
             }
           },
-          appear: {
-            title: "APPEAR",
-            icon: "transition",
-            tooltip: "Appearance",
-            type: "object",
-            properties: {
-              type: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["slide in", "fade in", "mix"]
-              },
-              duration: {
-                type: "string",
-                label: "T",
-                display: {
-                  type: "step-selector"
-                },
-                enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
-              },
-              direction: {
-                type: "string",
-                title: "FROM",
-                display: {
-                  visible: false,
-                  type: "direction-control"
-                },
-                enum: ["top", "bottom", "left", "right"]
-              },
-              repeat: {
-                type: "string",
-                title: "Repeat",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["close", "loop"]
-              }
-            }
-          },
-          triggers: {
-            title: "TRIGGERS",
-            icon: "target",
-            tooltip: "Triggers",
-            type: "object",
-            properties: {
-              type: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["click", "drag", "scroll"]
-              },
-              switch: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["image", "50/50"]
-              },
-              duration: {
-                type: "string",
-                label: "T",
-                display: {
-                  type: "step-selector"
-                },
-                enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
-              }
-            }
-          },
-          slider: {
-            title: "SLIDER",
-            icon: "horizontal-resize",
-            tooltip: "Slider",
-            type: "object",
-            properties: {
-              type: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["slide", "fade", "scale"]
-              },
-              direction: {
-                type: "string",
-                display: {
-                  visible: false,
-                  type: "ratio-group"
-                },
-                enum: ["horiz", "vert"]
-              }
-            }
-          },
-          thumbnail: {
-            title: "THUMB",
-            icon: "thumbnail",
-            tooltip: "Thumbnail",
+          lightboxBlock: {
+            display: {
+              type: "settings-block",
+              triggerEvent: "open"
+            },
             type: "object",
             properties: {
-              isActive: {
-                type: "boolean",
-                display: {
-                  type: "setting-toggle"
+              appear: {
+                title: "APPEAR",
+                icon: "transition",
+                tooltip: "Appearance",
+                type: "object",
+                properties: {
+                  type: {
+                    type: "string",
+                    display: {
+                      type: "ratio-group"
+                    },
+                    enum: ["slide in", "fade in", "mix"]
+                  },
+                  duration: {
+                    type: "string",
+                    label: "T",
+                    display: {
+                      type: "step-selector"
+                    },
+                    enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
+                  },
+                  direction: {
+                    type: "string",
+                    title: "FROM",
+                    display: {
+                      type: "direction-control"
+                    },
+                    enum: ["top", "left", "right", "bottom"]
+                  },
+                  repeat: {
+                    type: "string",
+                    title: "Repeat",
+                    display: {
+                      type: "ratio-group"
+                    },
+                    enum: ["close", "loop"]
+                  }
                 }
               },
-              position: {
-                display: {
-                  type: "align-grid"
-                },
-                type: "string",
-                enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
-              },
-              fit: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["cover", "fit"]
-              },
-              align: {
-                type: "string",
-                title: "Align",
-                display: {
-                  type: "align-vertical"
-                },
-                enum: ["top", "center", "bottom"]
-              },
               triggers: {
-                type: "string",
-                title: "Triggers",
-                display: {
-                  type: "ratio-group",
-                  direction: "horizontal"
-                },
-                enum: ["clk", "hov"]
-              },
-              grid: {
+                title: "TRIGGERS",
+                icon: "target",
+                tooltip: "Triggers",
                 type: "object",
-                title: "Grid",
-                display: {
-                  type: "group"
-                },
                 properties: {
-                  height: {
-                    type: "number",
-                    label: "H",
+                  type: {
+                    type: "string",
                     display: {
-                      type: "numeric-input"
-                    }
+                      type: "ratio-group"
+                    },
+                    enum: ["click", "drag"]
                   },
-                  gap: {
-                    type: "number",
-                    label: "Gap",
+                  switch: {
+                    type: "string",
                     display: {
-                      type: "numeric-input"
-                    }
+                      type: "ratio-group"
+                    },
+                    enum: ["image", "50/50"]
+                  },
+                  duration: {
+                    type: "string",
+                    label: "T",
+                    display: {
+                      type: "step-selector"
+                    },
+                    enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
                   }
                 }
               },
-              offset: {
+              slider: {
+                title: "SLIDER",
+                icon: "horizontal-resize",
+                tooltip: "Slider",
                 type: "object",
-                display: {
-                  type: "offset-controls"
-                },
                 properties: {
-                  x: {
-                    type: "number"
+                  type: {
+                    type: "string",
+                    display: {
+                      type: "ratio-group"
+                    },
+                    enum: ["slide", "fade", "scale"]
                   },
-                  y: {
-                    type: "number"
+                  direction: {
+                    type: "string",
+                    display: {
+                      type: "ratio-group"
+                    },
+                    enum: ["horiz", "vert"]
                   }
                 }
               },
-              opacity: {
-                type: "number",
-                title: "Opacity",
-                label: "icon:opacity",
-                min: 0,
-                max: 100,
-                step: 1,
-                display: {
-                  type: "numeric-input"
-                }
-              },
-              activeState: {
+              thumbnail: {
+                title: "THUMB",
+                icon: "thumbnail",
+                tooltip: "Thumbnail",
                 type: "object",
-                title: "ACTIVE",
-                display: {
-                  type: "group"
-                },
                 properties: {
-                  scale: {
-                    type: "number",
-                    title: "Scale",
-                    min: 1,
-                    max: 2,
-                    step: 0.1,
+                  isActive: {
+                    type: "boolean",
                     display: {
-                      type: "range-control"
+                      type: "setting-toggle"
+                    }
+                  },
+                  position: {
+                    display: {
+                      type: "align-grid"
+                    },
+                    type: "string",
+                    enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
+                  },
+                  fit: {
+                    type: "string",
+                    display: {
+                      type: "ratio-group"
+                    },
+                    enum: ["cover", "fit"]
+                  },
+                  align: {
+                    type: "string",
+                    title: "Align",
+                    display: {
+                      type: "align-group",
+                      direction: "horizontal"
+                    },
+                    enum: ["start", "center", "end"]
+                  },
+                  triggers: {
+                    type: "string",
+                    title: "Triggers",
+                    display: {
+                      type: "ratio-group",
+                      direction: "horizontal"
+                    },
+                    enum: ["clk", "hov"]
+                  },
+                  grid: {
+                    type: "object",
+                    title: "Grid",
+                    display: {
+                      type: "group"
+                    },
+                    properties: {
+                      height: {
+                        type: "number",
+                        label: "H",
+                        display: {
+                          type: "numeric-input"
+                        }
+                      },
+                      width: {
+                        type: "number",
+                        label: "W",
+                        display: {
+                          type: "numeric-input",
+                          visible: false
+                        }
+                      },
+                      gap: {
+                        type: "number",
+                        label: "Gap",
+                        display: {
+                          type: "numeric-input"
+                        }
+                      }
+                    }
+                  },
+                  offset: {
+                    type: "object",
+                    display: {
+                      type: "offset-controls"
+                    },
+                    properties: {
+                      x: {
+                        type: "number"
+                      },
+                      y: {
+                        type: "number"
+                      }
                     }
                   },
                   opacity: {
@@ -1990,280 +2162,444 @@ const LightboxComponent = {
                     display: {
                       type: "numeric-input"
                     }
-                  }
-                }
-              }
-            }
-          },
-          layout: {
-            title: "LAYOUT",
-            icon: "layout",
-            tooltip: "Layout",
-            type: "object",
-            properties: {
-              position: {
-                display: {
-                  type: "align-grid"
-                },
-                type: "string",
-                enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
+                  },
+                  activeState: {
+                    type: "object",
+                    title: "ACTIVE",
+                    display: {
+                      type: "group"
+                    },
+                    properties: {
+                      scale: {
+                        type: "number",
+                        title: "Scale",
+                        min: 0.5,
+                        max: 5,
+                        step: 0.1,
+                        display: {
+                          type: "range-control"
+                        }
+                      },
+                      opacity: {
+                        type: "number",
+                        title: "Opacity",
+                        label: "icon:opacity",
+                        min: 0,
+                        max: 100,
+                        step: 1,
+                        display: {
+                          type: "numeric-input"
+                        }
+                      }
+                    }
+                  }
+                }
               },
-              offset: {
+              layout: {
+                title: "LAYOUT",
+                icon: "layout",
+                tooltip: "Layout",
                 type: "object",
-                display: {
-                  type: "offset-controls"
-                },
                 properties: {
-                  x: {
-                    type: "number"
+                  position: {
+                    display: {
+                      type: "align-grid"
+                    },
+                    type: "string",
+                    enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
                   },
-                  y: {
-                    type: "number"
+                  offset: {
+                    type: "object",
+                    display: {
+                      type: "offset-controls"
+                    },
+                    properties: {
+                      x: {
+                        type: "number"
+                      },
+                      y: {
+                        type: "number"
+                      }
+                    }
+                  },
+                  padding: {
+                    type: "object",
+                    title: "Padding",
+                    display: {
+                      type: "padding-controls"
+                    },
+                    properties: {
+                      top: {
+                        type: "number"
+                      },
+                      left: {
+                        type: "number"
+                      },
+                      right: {
+                        type: "number"
+                      },
+                      bottom: {
+                        type: "number"
+                      }
+                    }
                   }
                 }
               },
-              padding: {
+              controls: {
+                title: "CONTROLS",
+                icon: "controls",
+                tooltip: "Controls",
                 type: "object",
-                title: "Padding",
-                display: {
-                  type: "padding-controls"
-                },
                 properties: {
-                  top: {
-                    type: "number"
+                  isActive: {
+                    type: "boolean",
+                    display: {
+                      type: "setting-toggle"
+                    }
                   },
-                  right: {
-                    type: "number"
+                  arrowsImgUrl: {
+                    type: ["string", "null"],
+                    display: {
+                      type: "settings-image-input"
+                    }
                   },
-                  bottom: {
-                    type: "number"
+                  offset: {
+                    type: "object",
+                    display: {
+                      type: "offset-controls"
+                    },
+                    properties: {
+                      x: {
+                        type: "number"
+                      },
+                      y: {
+                        type: "number"
+                      }
+                    }
                   },
-                  left: {
-                    type: "number"
+                  scale: {
+                    type: "number",
+                    title: "Scale",
+                    min: 0.5,
+                    max: 5,
+                    step: 0.1,
+                    display: {
+                      type: "range-control"
+                    }
+                  },
+                  color: {
+                    title: "Color",
+                    type: "string",
+                    display: {
+                      type: "settings-color-picker",
+                      format: "single"
+                    }
+                  },
+                  hover: {
+                    title: "Hover",
+                    type: "string",
+                    display: {
+                      type: "settings-color-picker",
+                      format: "single"
+                    }
                   }
                 }
-              }
-            }
-          },
-          controls: {
-            title: "CONTROLS",
-            icon: "controls",
-            tooltip: "Controls",
-            type: "object",
-            properties: {
-              isActive: {
-                type: "boolean",
-                display: {
-                  type: "setting-toggle"
-                }
               },
-              arrowsImgUrl: {
-                type: ["string", "null"],
-                display: {
-                  type: "settings-image-input"
-                }
-              },
-              offset: {
+              area: {
+                title: "AREA",
+                icon: "area",
+                tooltip: "Area",
                 type: "object",
-                display: {
-                  type: "offset-controls"
-                },
                 properties: {
-                  x: {
-                    type: "number"
+                  color: {
+                    type: "string",
+                    display: {
+                      type: "settings-color-picker",
+                      format: "single"
+                    }
                   },
-                  y: {
-                    type: "number"
+                  blur: {
+                    type: "number",
+                    label: "icon:blur",
+                    display: {
+                      type: "numeric-input"
+                    }
+                  },
+                  closeIconUrl: {
+                    type: ["string", "null"],
+                    title: "CLOSE ICON",
+                    display: {
+                      type: "settings-image-input"
+                    }
+                  },
+                  closeIconAlign: {
+                    display: {
+                      type: "align-grid",
+                      direction: "horizontal"
+                    },
+                    type: "string",
+                    enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
+                  },
+                  closeIconScale: {
+                    type: "number",
+                    title: "Scale",
+                    min: 0.5,
+                    max: 5,
+                    step: 0.1,
+                    display: {
+                      type: "range-control"
+                    }
+                  },
+                  closeIconOffset: {
+                    type: "object",
+                    display: {
+                      type: "offset-controls"
+                    },
+                    properties: {
+                      x: {
+                        type: "number"
+                      },
+                      y: {
+                        type: "number"
+                      }
+                    }
                   }
                 }
               },
-              scale: {
-                type: "number",
-                title: "Scale",
-                min: 0,
-                max: 1,
-                display: {
-                  type: "range-control"
-                }
-              },
-              color: {
-                title: "Color",
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
-              },
-              hover: {
-                title: "Hover",
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
-              }
-            }
-          },
-          area: {
-            title: "AREA",
-            icon: "area",
-            tooltip: "Area",
-            type: "object",
-            properties: {
-              color: {
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
-              },
-              blur: {
-                type: "number",
-                label: "icon:blur",
-                display: {
-                  type: "numeric-input"
-                }
-              },
-              closeIconUrl: {
-                type: ["string", "null"],
-                title: "CLOSE ICON",
-                display: {
-                  type: "settings-image-input"
-                }
-              },
-              closeIconAlign: {
-                display: {
-                  type: "align-grid",
-                  direction: "horizontal"
-                },
-                type: "string",
-                enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
-              },
-              closeIconOffset: {
+              caption: {
+                title: "DESC",
+                icon: "text-icon",
+                tooltip: "Description",
                 type: "object",
-                display: {
-                  type: "offset-controls"
-                },
                 properties: {
-                  x: {
-                    type: "number"
+                  isActive: {
+                    type: "boolean",
+                    display: {
+                      type: "setting-toggle"
+                    }
                   },
-                  y: {
-                    type: "number"
+                  alignment: {
+                    type: "string",
+                    display: {
+                      type: "align-grid"
+                    },
+                    enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
+                  },
+                  offset: {
+                    type: "object",
+                    display: {
+                      type: "offset-controls"
+                    },
+                    properties: {
+                      x: {
+                        type: "number"
+                      },
+                      y: {
+                        type: "number"
+                      }
+                    }
+                  },
+                  hover: {
+                    title: "Hover",
+                    type: "string",
+                    display: {
+                      type: "settings-color-picker",
+                      format: "single"
+                    }
                   }
                 }
               }
             }
+          }
+        },
+        default: {
+          thumbnailBlock: {
+            cover: {
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png"
+            }
           },
-          caption: {
-            title: "DESC",
-            icon: "text-icon",
-            tooltip: "Description",
-            type: "object",
-            properties: {
-              alignment: {
-                type: "string",
-                display: {
-                  type: "align-grid"
-                },
-                enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
-              },
-              offset: {
-                type: "object",
-                display: {
-                  type: "offset-controls"
-                },
-                properties: {
-                  x: {
-                    type: "number"
-                  },
-                  y: {
-                    type: "number"
-                  }
-                }
+          lightboxBlock: {
+            appear: {
+              type: "slide in",
+              duration: "1000ms",
+              direction: "right",
+              repeat: "close"
+            },
+            triggers: {
+              type: "click",
+              switch: "image",
+              duration: "2000ms"
+            },
+            slider: {
+              type: "fade",
+              direction: "horiz"
+            },
+            thumbnail: {
+              isActive: true,
+              position: "bottom-center",
+              fit: "cover",
+              align: "center",
+              triggers: "clk",
+              grid: {
+                height: 60,
+                width: 60,
+                gap: 8
               },
-              hover: {
-                title: "Hover",
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
+              offset: { x: 0, y: 0 },
+              opacity: 100,
+              activeState: {
+                scale: 1,
+                opacity: 100
               }
+            },
+            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"
             }
           }
         },
-        default: {
-          cover: {
-            url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png"
+        displayRules: [
+          {
+            if: {
+              name: "lightboxBlock.appear.type",
+              value: "slide in"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
+              value: true
+            }
           },
-          appear: {
-            type: "slide in",
-            duration: "1000ms",
-            direction: "right",
-            repeat: "close"
+          {
+            if: {
+              name: "lightboxBlock.slider.direction",
+              value: "vert"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.position.display.direction",
+              value: "vertical"
+            }
           },
-          triggers: {
-            type: "click",
-            switch: "image",
-            duration: "2000ms"
+          {
+            if: {
+              name: "lightboxBlock.slider.direction",
+              value: "vert"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
+              value: true
+            }
           },
-          slider: {
-            type: "fade",
-            direction: "horiz"
+          {
+            if: {
+              name: "lightboxBlock.slider.direction",
+              value: "horiz"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
+              value: true
+            }
           },
-          thumbnail: {
-            isActive: true,
-            position: "bottom-center",
-            fit: "cover",
-            align: "center",
-            triggers: "click",
-            grid: {
-              height: 60,
-              gap: 8
+          {
+            if: {
+              name: "lightboxBlock.slider.direction",
+              value: "vert"
             },
-            offset: { x: 0, y: 0 },
-            opacity: 100,
-            activeState: {
-              scale: 1,
-              opacity: 100
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
+              value: false
             }
           },
-          layout: {
-            position: "middle-center",
-            offset: { x: 0, y: 0 },
-            padding: { top: 0, right: 0, bottom: 0, left: 0 }
+          {
+            if: {
+              name: "lightboxBlock.slider.direction",
+              value: "horiz"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
+              value: false
+            }
           },
-          controls: {
-            isActive: true,
-            arrowsImgUrl: null,
-            offset: { x: 0, y: 0 },
-            scale: 1,
-            color: "#000000",
-            hover: "#cccccc"
+          {
+            if: {
+              name: "lightboxBlock.appear.type",
+              value: "mix"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
+              value: true
+            }
           },
-          area: {
-            color: "rgba(0,0,0,0.9)",
-            blur: 0,
-            closeIconUrl: null,
-            closeIconAlign: "top-right",
-            closeIconOffset: { x: 0, y: 0 }
+          {
+            if: {
+              name: "lightboxBlock.appear.type",
+              value: "fade in"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
+              value: false
+            }
           },
-          caption: {
-            alignment: "middle-center",
-            offset: { x: 0, y: 0 },
-            hover: "#cccccc"
-          }
-        },
-        displayRules: [
           {
             if: {
-              name: "appear.type",
-              value: "slide in"
+              name: "lightboxBlock.triggers.type",
+              value: "click"
             },
             then: {
-              value: true,
-              name: "properties.appear.properties.direction.display.visible"
+              name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "lightboxBlock.triggers.type",
+              value: "click"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "lightboxBlock.triggers.type",
+              value: "drag"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "lightboxBlock.triggers.type",
+              value: "drag"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
+              value: false
             }
           }
         ]
@@ -2315,7 +2651,7 @@ const LightboxComponent = {
         default: [
           {
             image: {
-              objectFit: "cover",
+              objectFit: "contain",
               url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png",
               name: "Slider-1.png"
             },
@@ -2328,7 +2664,7 @@ const LightboxComponent = {
           },
           {
             image: {
-              objectFit: "cover",
+              objectFit: "contain",
               url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMTZA3RYMXKF0M095D6JD.png",
               name: "Slider-2.png"
             },
@@ -2341,7 +2677,7 @@ const LightboxComponent = {
           },
           {
             image: {
-              objectFit: "cover",
+              objectFit: "contain",
               url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMVSCMPVJBG2WF5KJZYHZ.png",
               name: "Slider-3.png"
             },