@cntrl-site/components 0.1.0-2 → 0.1.0-20

package/dist/index.mjs

@@ -270,7 +270,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
               },
@@ -467,6 +467,9 @@ const ControlSliderComponent = {
       settings: {
         layoutBased: true,
         type: "object",
+        display: {
+          type: "settings-block"
+        },
         properties: {
           triggers: {
             title: "triggers",
@@ -1188,6 +1191,9 @@ const ControlImageRevealSliderComponent = {
       settings: {
         layoutBased: true,
         type: "object",
+        display: {
+          type: "settings-block"
+        },
         properties: {
           imageSize: {
             title: "IMG SIZE",
@@ -1448,9 +1454,14 @@ 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 thumbImage = "LightBox-module__thumbImage___OJ19m";
+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";
@@ -1470,25 +1481,70 @@ const styles = {
   arrowInner,
   arrowImg,
   mirror,
+  thumbsContainerVertical,
   thumbsContainer,
+  thumbsAlignStart,
+  thumbsAlignCenter,
+  thumbsAlignEnd,
   thumbItem,
   thumbImage,
+  closeButton,
   fadeIn,
   slideInLeft,
   slideInRight,
   slideInTop,
   slideInBottom
 };
-function LightboxGallery({ settings, content, styles: styles2, portalId }) {
+const getPositionStyles = (position, offset) => {
+  const styles2 = {};
+  const [vertical, horizontal] = position.split("-");
+  if (vertical === "top") {
+    styles2.top = `${offset.y}px`;
+    styles2.bottom = "auto";
+  } else if (vertical === "middle") {
+    styles2.top = "50%";
+    styles2.bottom = "auto";
+  } else if (vertical === "bottom") {
+    styles2.top = "auto";
+    styles2.bottom = `${offset.y}px`;
+  }
+  if (horizontal === "left") {
+    styles2.left = `${offset.x}px`;
+    styles2.right = "auto";
+  } else if (horizontal === "center") {
+    styles2.left = "50%";
+    styles2.right = "auto";
+  } else if (horizontal === "right") {
+    styles2.left = "auto";
+    styles2.right = `${offset.x}px`;
+  }
+  if (vertical === "middle" && horizontal === "center") {
+    styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
+  } else if (vertical === "middle") {
+    styles2.transform = `translateY(calc(-50% + ${offset.y}px))`;
+  } else if (horizontal === "center") {
+    styles2.transform = `translateX(calc(-50% + ${offset.x}px))`;
+  }
+  return styles2;
+};
+function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent }) {
   const [open, setOpen] = React.useState(false);
-  const { url: coverUrl } = settings.cover;
-  return /* @__PURE__ */ jsxs("div", { children: [
+  const { url } = settings.thumbnailBlock.cover;
+  useEffect(() => {
+    if (activeEvent === "close") {
+      setOpen(false);
+    }
+    if (activeEvent === "open") {
+      setOpen(true);
+    }
+  }, [activeEvent]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ 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)
       }
     ),
@@ -1496,9 +1552,9 @@ 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 = 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) {
@@ -1512,12 +1568,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();
@@ -1526,7 +1582,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";
@@ -1558,15 +1614,14 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     if (isOpen) setCurrentIndex(0);
   }, [isOpen]);
   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") {
+      switch (appear.direction) {
         case "left":
           return styles.slideInLeft;
         case "right":
@@ -1587,17 +1642,18 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
       "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" },
+        style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
         onClick: handleBackdropClick,
         children: /* @__PURE__ */ 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",
+              "--splide-speed": triggers.duration || "500ms"
             },
             children: [
               /* @__PURE__ */ jsx(
@@ -1609,23 +1665,27 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                   ref: lightboxRef,
                   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"
+                  },
+                  style: {
+                    "--splide-speed": triggers.duration || "500ms"
                   },
                   children: content.map((item, index) => /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx("div", { className: styles.imgWrapper, onClick: handleImageWrapperClick, children: /* @__PURE__ */ jsx(
                     "img",
                     {
                       className: cn(styles.imageStyle, {
                         [styles.contain]: item.image.objectFit === "contain",
-                        [styles.cover]: item.image.objectFit === "cover"
+                        [styles.cover]: item.image.objectFit === "cover",
+                        [styles.scaleSlide]: slider.type === "scale"
                       }),
                       src: item.image.url,
                       alt: item.image.name ?? "",
@@ -1634,28 +1694,28 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                   ) }) }, index))
                 }
               ),
-              settings.controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+              controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ 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__ */ 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 / 100}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
                         },
                         onClick: (e) => {
                           handleArrowClick("-1");
                         },
-                        children: settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                        children: controls.arrowsImgUrl && /* @__PURE__ */ 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)
                           }
                         )
@@ -1666,25 +1726,25 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                 /* @__PURE__ */ 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__ */ 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 / 100}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
                         },
                         onClick: (e) => {
                           handleArrowClick("+1");
                         },
                         "aria-label": "Next",
-                        children: settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                        children: controls.arrowsImgUrl && /* @__PURE__ */ 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
                           }
                         )
@@ -1693,15 +1753,25 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                   }
                 )
               ] }),
-              settings.area.closeIconUrl && /* @__PURE__ */ jsx("button", { className: styles.closeButton, style: { top: settings.area.closeIconOffset.y, left: settings.area.closeIconOffset.x }, onClick: onClose, children: /* @__PURE__ */ jsx(SvgImage, { url: settings.area.closeIconUrl, fill: settings.area.color }) }),
-              settings.caption.isActive && /* @__PURE__ */ jsx("div", { className: styles.caption, style: { top: settings.caption.offset.y, left: settings.caption.offset.x, color: settings.caption.color }, children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
-              settings.thumbnail.isActive && /* @__PURE__ */ jsx(
+              area.closeIconUrl && /* @__PURE__ */ jsx("button", { className: styles.closeButton, style: getPositionStyles(area.closeIconAlign, area.closeIconOffset), onClick: onClose, children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl, fill: area.color }) }),
+              caption2.isActive && /* @__PURE__ */ jsx("div", { className: styles.caption, style: { top: caption2.offset.y, left: caption2.offset.x }, children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
+              thumbnail.isActive && /* @__PURE__ */ 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;
@@ -1710,16 +1780,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 / 100 : 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__ */ jsx(
                           "img",
@@ -1727,7 +1798,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%" } : {}
+                            }
                           }
                         )
                       },
@@ -1763,218 +1838,215 @@ const LightboxComponent = {
         layoutBased: true,
         type: "object",
         properties: {
-          cover: {
-            title: "COVER",
-            icon: "image",
-            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: "hourglass-icon",
-                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: "hourglass-icon",
-                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: "pagination",
-            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: {
+                      visible: true,
+                      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: "ratio-group"
-                },
-                enum: ["top", "center", "bottom"]
-              },
               triggers: {
-                type: "string",
-                title: "Triggers",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["click", "hover"]
-              },
-              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: {
@@ -1987,278 +2059,310 @@ 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"]
-              },
-              offset: {
-                type: "object",
-                display: {
-                  type: "offset-controls"
-                },
-                properties: {
-                  x: {
-                    type: "number"
                   },
-                  y: {
-                    type: "number"
+                  activeState: {
+                    type: "object",
+                    title: "ACTIVE",
+                    display: {
+                      type: "group"
+                    },
+                    properties: {
+                      scale: {
+                        type: "number",
+                        title: "Scale",
+                        min: 0,
+                        max: 100,
+                        step: 1,
+                        display: {
+                          type: "range-control"
+                        }
+                      },
+                      opacity: {
+                        type: "number",
+                        title: "Opacity",
+                        label: "icon:opacity",
+                        min: 0,
+                        max: 100,
+                        step: 1,
+                        display: {
+                          type: "numeric-input"
+                        }
+                      }
+                    }
                   }
                 }
               },
-              padding: {
+              layout: {
+                title: "LAYOUT",
+                icon: "layout",
+                tooltip: "Layout",
                 type: "object",
-                title: "Padding",
-                display: {
-                  type: "padding-controls"
-                },
                 properties: {
-                  top: {
-                    type: "number"
-                  },
-                  right: {
-                    type: "number"
-                  },
-                  bottom: {
-                    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"]
                   },
-                  left: {
-                    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"
+                      }
+                    }
                   }
                 }
-              }
-            }
-          },
-          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: {
+              controls: {
+                title: "CONTROLS",
+                icon: "controls",
+                tooltip: "Controls",
                 type: "object",
-                display: {
-                  type: "offset-controls"
-                },
                 properties: {
-                  x: {
-                    type: "number"
+                  isActive: {
+                    type: "boolean",
+                    display: {
+                      type: "setting-toggle"
+                    }
                   },
-                  y: {
-                    type: "number"
+                  arrowsImgUrl: {
+                    type: ["string", "null"],
+                    display: {
+                      type: "settings-image-input"
+                    }
+                  },
+                  offset: {
+                    type: "object",
+                    display: {
+                      type: "offset-controls"
+                    },
+                    properties: {
+                      x: {
+                        type: "number"
+                      },
+                      y: {
+                        type: "number"
+                      }
+                    }
+                  },
+                  scale: {
+                    type: "number",
+                    title: "Scale",
+                    min: 0,
+                    max: 100,
+                    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"
+                    }
                   }
                 }
               },
-              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: "background",
-            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: {
+              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"]
+                  },
+                  closeIconOffset: {
+                    type: "object",
+                    display: {
+                      type: "offset-controls"
+                    },
+                    properties: {
+                      x: {
+                        type: "number"
+                      },
+                      y: {
+                        type: "number"
+                      }
+                    }
                   }
                 }
-              }
-            }
-          },
-          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: {
+              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"
+                    }
                   }
                 }
-              },
-              color: {
-                title: "Color",
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
-              },
-              hover: {
-                title: "Hover",
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
               }
             }
           }
         },
         default: {
-          cover: {
-            url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png"
-          },
-          appear: {
-            type: "slide in",
-            duration: "1000ms",
-            direction: "right",
-            repeat: "close"
-          },
-          triggers: {
-            type: "click",
-            switch: "image",
-            duration: "2000ms"
-          },
-          slider: {
-            type: "fade",
-            direction: "horiz"
+          thumbnailBlock: {
+            cover: {
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png"
+            }
           },
-          thumbnail: {
-            isActive: true,
-            position: "bottom-center",
-            fit: "cover",
-            align: "center",
-            triggers: "click",
-            grid: {
-              height: 60,
-              gap: 8
+          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,
+                gap: 8
+              },
+              offset: { x: 0, y: 0 },
+              opacity: 100,
+              activeState: {
+                scale: 100,
+                opacity: 100
+              }
+            },
+            layout: {
+              position: "middle-center",
+              offset: { x: 0, y: 0 },
+              padding: { top: 0, right: 0, bottom: 0, left: 0 }
             },
-            offset: { x: 0, y: 0 },
-            opacity: 100,
-            activeState: {
+            controls: {
+              isActive: true,
+              arrowsImgUrl: null,
+              offset: { x: 0, y: 0 },
               scale: 1,
-              opacity: 100
+              color: "#000000",
+              hover: "#cccccc"
+            },
+            area: {
+              color: "rgba(0,0,0,0.9)",
+              blur: 0,
+              closeIconUrl: null,
+              closeIconAlign: "top-right",
+              closeIconOffset: { x: 0, y: 0 }
+            },
+            caption: {
+              isActive: true,
+              alignment: "middle-center",
+              offset: { x: 0, y: 0 },
+              hover: "#cccccc"
             }
-          },
-          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: 12, y: 12 }
-          },
-          caption: {
-            alignment: "middle-center",
-            offset: { x: 0, y: 0 },
-            color: "#000000",
-            hover: "#cccccc"
           }
         },
         displayRules: [
@@ -2269,7 +2373,67 @@ const LightboxComponent = {
             },
             then: {
               value: true,
-              name: "properties.appear.properties.direction.display.visible"
+              name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible"
+            }
+          },
+          {
+            if: {
+              name: "slider.direction",
+              value: "vert"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.position.display.direction",
+              value: "vertical"
+            }
+          },
+          {
+            if: {
+              name: "triggers.type",
+              value: "drag"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "triggers.type",
+              value: "drag"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "slider.direction",
+              value: "vert"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "slider.direction",
+              value: "vert"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "appear.type",
+              value: "fade in"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
+              value: false
             }
           }
         ]
@@ -2286,9 +2450,9 @@ const LightboxComponent = {
           properties: {
             image: {
               type: "object",
+              label: "Image",
               display: {
                 type: "media-input",
-                label: "Image",
                 minWidth: 58,
                 maxWidth: 108
               },
@@ -2307,10 +2471,10 @@ const LightboxComponent = {
               required: ["url", "name"]
             },
             imageCaption: {
+              label: "Description",
+              placeholder: "Add Caption...",
               display: {
                 type: "rich-text",
-                label: "Description",
-                placeholder: "Add Caption...",
                 minWidth: 300,
                 maxWidth: 550
               }