@cntrl-site/components 0.0.6 → 0.1.0-1

package/dist/index.mjs

@@ -1,17 +1,18 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useMemo } from "react";
+import React, { useState, useEffect, useRef, useMemo } from "react";
 import { Splide, SplideSlide } from "@splidejs/react-splide";
 import cn from "classnames";
+import { createPortal } from "react-dom";
 const wrapper = "ControlSlider-module__wrapper___sHEkd";
 const sliderItem = "ControlSlider-module__sliderItem___QQSkR";
 const sliderImage = "ControlSlider-module__sliderImage___9hRl-";
-const arrow = "ControlSlider-module__arrow___05ghY";
-const arrowVertical = "ControlSlider-module__arrowVertical___tBfVN";
-const nextArrow = "ControlSlider-module__nextArrow___-30Yc";
-const arrowInner = "ControlSlider-module__arrowInner___aEra3";
+const arrow$1 = "ControlSlider-module__arrow___05ghY";
+const arrowVertical$1 = "ControlSlider-module__arrowVertical___tBfVN";
+const nextArrow$1 = "ControlSlider-module__nextArrow___-30Yc";
+const arrowInner$1 = "ControlSlider-module__arrowInner___aEra3";
 const arrowIcon = "ControlSlider-module__arrowIcon___S4ztF";
-const arrowImg = "ControlSlider-module__arrowImg___2dwJW";
-const mirror = "ControlSlider-module__mirror___brd6U";
+const arrowImg$1 = "ControlSlider-module__arrowImg___2dwJW";
+const mirror$1 = "ControlSlider-module__mirror___brd6U";
 const pagination = "ControlSlider-module__pagination___bicLF";
 const paginationInner = "ControlSlider-module__paginationInner___bT-P-";
 const paginationVertical = "ControlSlider-module__paginationVertical___zYqKw";
@@ -26,7 +27,7 @@ const paginationInsideLeft = "ControlSlider-module__paginationInsideLeft___yOBRZ
 const paginationInsideRight = "ControlSlider-module__paginationInsideRight___Rtt3o";
 const paginationOutsideLeft = "ControlSlider-module__paginationOutsideLeft___lahaw";
 const paginationOutsideRight = "ControlSlider-module__paginationOutsideRight___EtuQa";
-const imgWrapper = "ControlSlider-module__imgWrapper___UjEgB";
+const imgWrapper$1 = "ControlSlider-module__imgWrapper___UjEgB";
 const captionBlock = "ControlSlider-module__captionBlock___dJ6-j";
 const captionTextWrapper = "ControlSlider-module__captionTextWrapper___HFlpf";
 const captionText = "ControlSlider-module__captionText___uGBVc";
@@ -42,19 +43,19 @@ const bottomLeftAlignment = "ControlSlider-module__bottomLeftAlignment___cTP2-";
 const bottomCenterAlignment = "ControlSlider-module__bottomCenterAlignment___c54fB";
 const bottomRightAlignment = "ControlSlider-module__bottomRightAlignment___kEwrz";
 const clickOverlay = "ControlSlider-module__clickOverlay___DZA28";
-const contain = "ControlSlider-module__contain___pLyq7";
-const cover = "ControlSlider-module__cover___KdDat";
-const styles$3 = {
+const contain$1 = "ControlSlider-module__contain___pLyq7";
+const cover$1 = "ControlSlider-module__cover___KdDat";
+const styles$4 = {
   wrapper,
   sliderItem,
   sliderImage,
-  arrow,
-  arrowVertical,
-  nextArrow,
-  arrowInner,
+  arrow: arrow$1,
+  arrowVertical: arrowVertical$1,
+  nextArrow: nextArrow$1,
+  arrowInner: arrowInner$1,
   arrowIcon,
-  arrowImg,
-  mirror,
+  arrowImg: arrowImg$1,
+  mirror: mirror$1,
   pagination,
   paginationInner,
   paginationVertical,
@@ -69,7 +70,7 @@ const styles$3 = {
   paginationInsideRight,
   paginationOutsideLeft,
   paginationOutsideRight,
-  imgWrapper,
+  imgWrapper: imgWrapper$1,
   captionBlock,
   captionTextWrapper,
   captionText,
@@ -85,18 +86,18 @@ const styles$3 = {
   bottomCenterAlignment,
   bottomRightAlignment,
   clickOverlay,
-  contain,
-  cover
+  contain: contain$1,
+  cover: cover$1
 };
 const link$1 = "RichTextRenderer-module__link___BWeZ2";
-const styles$2 = {
+const styles$3 = {
   link: link$1
 };
 const RichTextRenderer = ({ content }) => {
   const getChildren = (children) => {
     return children.map((child, i) => {
       if (child.type === "link") {
-        return /* @__PURE__ */ jsx("a", { className: styles$2.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
+        return /* @__PURE__ */ jsx("a", { className: styles$3.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
       }
       return /* @__PURE__ */ jsx("span", { style: getLeafCss(child), children: child.text }, i);
     });
@@ -125,7 +126,7 @@ function scalingValue(value, isEditor = false) {
 }
 const svg = "SvgImage-module__svg___q3xE-";
 const img = "SvgImage-module__img___VsTm-";
-const styles$1 = {
+const styles$2 = {
   svg,
   img
 };
@@ -138,13 +139,13 @@ const SvgImage = ({ url, fill = "#000000", hoverFill = "#CCCCCC", className = ""
     }
   }, []);
   if (!url.endsWith(".svg") || !supportsMask) {
-    return /* @__PURE__ */ jsx("img", { src: url, alt: "", className: cn(styles$1.img, className) });
+    return /* @__PURE__ */ jsx("img", { src: url, alt: "", className: cn(styles$2.img, className) });
   }
   return /* @__PURE__ */ jsx(
     "span",
     {
       "data-supports-mask": supportsMask,
-      className: cn(styles$1.svg, className),
+      className: cn(styles$2.svg, className),
       style: {
         "--svg": `url(${url})`,
         "--fill": fill,
@@ -154,15 +155,15 @@ const SvgImage = ({ url, fill = "#000000", hoverFill = "#CCCCCC", className = ""
   );
 };
 const alignmentClassName = {
-  "top-left": styles$3.topLeftAlignment,
-  "top-center": styles$3.topCenterAlignment,
-  "top-right": styles$3.topRightAlignment,
-  "middle-left": styles$3.middleLeftAlignment,
-  "middle-center": styles$3.middleCenterAlignment,
-  "middle-right": styles$3.middleRightAlignment,
-  "bottom-left": styles$3.bottomLeftAlignment,
-  "bottom-center": styles$3.bottomCenterAlignment,
-  "bottom-right": styles$3.bottomRightAlignment
+  "top-left": styles$4.topLeftAlignment,
+  "top-center": styles$4.topCenterAlignment,
+  "top-right": styles$4.topRightAlignment,
+  "middle-left": styles$4.middleLeftAlignment,
+  "middle-center": styles$4.middleCenterAlignment,
+  "middle-right": styles$4.middleRightAlignment,
+  "bottom-left": styles$4.bottomLeftAlignment,
+  "bottom-center": styles$4.bottomCenterAlignment,
+  "bottom-right": styles$4.bottomRightAlignment
 };
 function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
   const [sliderRef, setSliderRef] = useState(null);
@@ -171,7 +172,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
   const [wrapperRef, setWrapperRef] = useState(null);
   const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
   const [key, setKey] = useState(0);
-  const { direction, transition, controls, pagination: pagination2, caption, triggers } = settings;
+  const { direction, transition, controls, pagination: pagination2, caption: caption2, triggers } = settings;
   const prevSliderTypeRef = useRef(transition.type);
   const { x: controlsOffsetX, y: controlsOffsetY } = settings.controls.offset;
   const handleArrowClick = (dir) => {
@@ -197,10 +198,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
     setKey((prev) => prev + 1);
     prevSliderTypeRef.current = transition.type;
   }, [transition.type]);
-  return /* @__PURE__ */ jsx("div", { className: cn(styles$3.wrapper, { [styles$3.editor]: isEditor }), ref: setWrapperRef, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: cn(styles$4.wrapper, { [styles$4.editor]: isEditor }), ref: setWrapperRef, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$3.sliderInner,
+      className: styles$4.sliderInner,
       style: {
         width: sliderDimensions ? sliderDimensions.width : "100%",
         height: sliderDimensions ? sliderDimensions.height : "100%",
@@ -210,17 +211,17 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         settings.caption.isActive && /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(styles$3.captionBlock),
+            className: cn(styles$4.captionBlock),
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$3.captionTextWrapper,
+                className: styles$4.captionTextWrapper,
                 children: content.map((item, index) => /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: cn(styles$3.captionText, alignmentClassName[caption.alignment], {
-                      [styles$3.withPointerEvents]: index === currentSlideIndex && isEditor,
-                      [styles$3.active]: index === currentSlideIndex
+                    className: cn(styles$4.captionText, alignmentClassName[caption2.alignment], {
+                      [styles$4.withPointerEvents]: index === currentSlideIndex && isEditor,
+                      [styles$4.active]: index === currentSlideIndex
                     }),
                     style: {
                       fontFamily: fontSettings.fontFamily,
@@ -242,12 +243,12 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                       "div",
                       {
                         "data-styles": "caption",
-                        className: styles$3.captionTextInner,
+                        className: styles$4.captionTextInner,
                         style: {
-                          "--link-hover-color": caption.hover,
+                          "--link-hover-color": caption2.hover,
                           position: "relative",
-                          top: scalingValue(caption.offset.y, isEditor),
-                          left: scalingValue(caption.offset.x, isEditor)
+                          top: scalingValue(caption2.offset.y, isEditor),
+                          left: scalingValue(caption2.offset.x, isEditor)
                         },
                         children: /* @__PURE__ */ jsx(RichTextRenderer, { content: item.imageCaption })
                       }
@@ -285,17 +286,17 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             children: content.map((item, index) => /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$3.sliderItem,
+                className: styles$4.sliderItem,
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: styles$3.imgWrapper,
+                    className: styles$4.imgWrapper,
                     children: /* @__PURE__ */ jsx(
                       "img",
                       {
-                        className: cn(styles$3.sliderImage, {
-                          [styles$3.contain]: item.image.objectFit === "contain",
-                          [styles$3.cover]: item.image.objectFit === "cover"
+                        className: cn(styles$4.sliderImage, {
+                          [styles$4.contain]: item.image.objectFit === "contain",
+                          [styles$4.cover]: item.image.objectFit === "cover"
                         }),
                         src: item.image.url,
                         alt: item.image.name ?? ""
@@ -312,8 +313,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(styles$3.arrow, {
-                [styles$3.arrowVertical]: direction === "vert"
+              className: cn(styles$4.arrow, {
+                [styles$4.arrowVertical]: direction === "vert"
               }),
               style: {
                 color: controls.color,
@@ -325,7 +326,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                   onClick: () => {
                     handleArrowClick("-1");
                   },
-                  className: styles$3.arrowInner,
+                  className: styles$4.arrowInner,
                   style: {
                     transform: `translate(${scalingValue(controlsOffsetX, isEditor)}, ${scalingValue(controlsOffsetY * (direction === "horiz" ? 1 : -1), isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
                   },
@@ -336,10 +337,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         url: controls.arrowsImgUrl,
                         fill: controls.color,
                         hoverFill: controls.hover,
-                        className: cn(styles$3.arrowImg, styles$3.mirror)
+                        className: cn(styles$4.arrowImg, styles$4.mirror)
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$4.arrowIcon, styles$4.arrowImg, styles$4.mirror) })
                   ]
                 }
               )
@@ -348,8 +349,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(styles$3.arrow, styles$3.nextArrow, {
-                [styles$3.arrowVertical]: direction === "vert"
+              className: cn(styles$4.arrow, styles$4.nextArrow, {
+                [styles$4.arrowVertical]: direction === "vert"
               }),
               style: {
                 color: controls.color,
@@ -358,7 +359,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
               children: /* @__PURE__ */ jsxs(
                 "button",
                 {
-                  className: styles$3.arrowInner,
+                  className: styles$4.arrowInner,
                   onClick: () => handleArrowClick("+1"),
                   style: {
                     transform: `translate(${scalingValue(controlsOffsetX * (direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controlsOffsetY, isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
@@ -370,10 +371,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         url: controls.arrowsImgUrl,
                         fill: controls.color,
                         hoverFill: controls.hover,
-                        className: styles$3.arrowImg
+                        className: styles$4.arrowImg
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$4.arrowIcon, styles$4.arrowImg) })
                   ]
                 }
               )
@@ -383,7 +384,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         triggers.triggersList.click && /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles$3.clickOverlay,
+            className: styles$4.clickOverlay,
             onClick: () => {
               if (sliderRef) {
                 sliderRef.go("+1");
@@ -394,21 +395,21 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         pagination2.isActive && /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(styles$3.pagination, {
-              [styles$3.paginationInsideBottom]: pagination2.position === "inside-1" && direction === "horiz",
-              [styles$3.paginationInsideTop]: pagination2.position === "inside-2" && direction === "horiz",
-              [styles$3.paginationOutsideBottom]: pagination2.position === "outside-1" && direction === "horiz",
-              [styles$3.paginationOutsideTop]: pagination2.position === "outside-2" && direction === "horiz",
-              [styles$3.paginationInsideLeft]: pagination2.position === "inside-1" && direction === "vert",
-              [styles$3.paginationInsideRight]: pagination2.position === "inside-2" && direction === "vert",
-              [styles$3.paginationOutsideLeft]: pagination2.position === "outside-1" && direction === "vert",
-              [styles$3.paginationOutsideRight]: pagination2.position === "outside-2" && direction === "vert",
-              [styles$3.paginationVertical]: direction === "vert"
+            className: cn(styles$4.pagination, {
+              [styles$4.paginationInsideBottom]: pagination2.position === "inside-1" && direction === "horiz",
+              [styles$4.paginationInsideTop]: pagination2.position === "inside-2" && direction === "horiz",
+              [styles$4.paginationOutsideBottom]: pagination2.position === "outside-1" && direction === "horiz",
+              [styles$4.paginationOutsideTop]: pagination2.position === "outside-2" && direction === "horiz",
+              [styles$4.paginationInsideLeft]: pagination2.position === "inside-1" && direction === "vert",
+              [styles$4.paginationInsideRight]: pagination2.position === "inside-2" && direction === "vert",
+              [styles$4.paginationOutsideLeft]: pagination2.position === "outside-1" && direction === "vert",
+              [styles$4.paginationOutsideRight]: pagination2.position === "outside-2" && direction === "vert",
+              [styles$4.paginationVertical]: direction === "vert"
             }),
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$3.paginationInner,
+                className: styles$4.paginationInner,
                 style: {
                   backgroundColor: pagination2.colors[2],
                   transform: `scale(${pagination2.scale / 100}) translate(${scalingValue(pagination2.offset.x, isEditor)}, ${scalingValue(pagination2.offset.y, isEditor)}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
@@ -421,12 +422,12 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         sliderRef.go(index);
                       }
                     },
-                    className: cn(styles$3.paginationItem),
+                    className: cn(styles$4.paginationItem),
                     children: /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: cn(styles$3.dot, {
-                          [styles$3.activeDot]: index === currentSlideIndex
+                        className: cn(styles$4.dot, {
+                          [styles$4.activeDot]: index === currentSlideIndex
                         }),
                         style: {
                           backgroundColor: index === currentSlideIndex ? pagination2.colors[0] : pagination2.colors[1],
@@ -468,7 +469,7 @@ const ControlSliderComponent = {
         type: "object",
         properties: {
           triggers: {
-            name: "triggers",
+            title: "triggers",
             icon: "target",
             tooltip: "Triggers",
             type: "object",
@@ -498,7 +499,7 @@ const ControlSliderComponent = {
             }
           },
           direction: {
-            name: "direction",
+            title: "direction",
             icon: "horizontal-resize",
             tooltip: "Direction",
             type: "string",
@@ -508,7 +509,7 @@ const ControlSliderComponent = {
             enum: ["horiz", "vert"]
           },
           transition: {
-            name: "transit",
+            title: "transit",
             icon: "transition",
             tooltip: "Transition",
             type: "object",
@@ -522,7 +523,7 @@ const ControlSliderComponent = {
               },
               backgroundColor: {
                 type: ["string", "null"],
-                name: "BG Color",
+                title: "BG Color",
                 display: {
                   visible: false,
                   type: "settings-color-picker",
@@ -531,7 +532,7 @@ const ControlSliderComponent = {
               },
               duration: {
                 type: "string",
-                label: "hourglass-icon",
+                label: "icon:hourglass",
                 display: {
                   type: "step-selector"
                 },
@@ -540,7 +541,7 @@ const ControlSliderComponent = {
             }
           },
           controls: {
-            name: "controls",
+            title: "controls",
             icon: "controls",
             tooltip: "Controls",
             type: "object",
@@ -573,7 +574,7 @@ const ControlSliderComponent = {
               },
               scale: {
                 type: "number",
-                name: "scale",
+                title: "scale",
                 min: 50,
                 max: 600,
                 display: {
@@ -599,7 +600,7 @@ const ControlSliderComponent = {
             }
           },
           pagination: {
-            name: "nav",
+            title: "nav",
             icon: "pagination",
             tooltip: "Navigation",
             type: "object",
@@ -611,7 +612,6 @@ const ControlSliderComponent = {
                 }
               },
               position: {
-                name: "nav position",
                 display: {
                   type: "socket",
                   direction: "horizontal"
@@ -647,7 +647,7 @@ const ControlSliderComponent = {
                   type: "settings-color-picker",
                   format: "multiple"
                 },
-                name: "color",
+                title: "color",
                 type: "array",
                 items: {
                   type: "string"
@@ -664,7 +664,7 @@ const ControlSliderComponent = {
             }
           },
           caption: {
-            name: "Caption",
+            title: "Caption",
             icon: "text-icon",
             tooltip: "Caption",
             type: "object",
@@ -676,7 +676,6 @@ const ControlSliderComponent = {
                 }
               },
               alignment: {
-                name: "Alignment",
                 type: "string",
                 display: {
                   type: "align-grid"
@@ -698,7 +697,7 @@ const ControlSliderComponent = {
                 }
               },
               hover: {
-                name: "hover",
+                title: "hover",
                 type: "string",
                 display: {
                   type: "settings-color-picker",
@@ -789,11 +788,11 @@ const ControlSliderComponent = {
           properties: {
             image: {
               type: "object",
+              label: "Image",
               display: {
-                type: "media-input",
-                label: "Image",
                 minWidth: 58,
-                maxWidth: 108
+                maxWidth: 108,
+                type: "media-input"
               },
               properties: {
                 url: {
@@ -810,10 +809,10 @@ const ControlSliderComponent = {
               required: ["url", "name"]
             },
             imageCaption: {
+              placeholder: "Add Caption...",
+              label: "Description",
               display: {
                 type: "rich-text",
-                label: "Description",
-                placeholder: "Add Caption...",
                 minWidth: 300,
                 maxWidth: 550
               }
@@ -998,7 +997,7 @@ const ControlSliderComponent = {
 const imageRevealSlider = "ImageRevealSlider-module__imageRevealSlider___UE5Ob";
 const image = "ImageRevealSlider-module__image___Qjt-e";
 const link = "ImageRevealSlider-module__link___N-iLG";
-const styles = {
+const styles$1 = {
   imageRevealSlider,
   image,
   link
@@ -1133,12 +1132,12 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     {
       ref: divRef,
       onClick: handleClick,
-      className: styles.imageRevealSlider,
+      className: styles$1.imageRevealSlider,
       style: { cursor: cursorType !== "system" && defaultCursor ? `url(${target === "area" ? hoverCursor : defaultCursor}), auto` : "default" },
       children: placedImages.map((img2) => /* @__PURE__ */ jsx(
         "div",
         {
-          className: styles.wrapper,
+          className: styles$1.wrapper,
           style: {
             top: `${img2.y}px`,
             left: `${img2.x}px`,
@@ -1148,12 +1147,12 @@ function ImageRevealSlider({ settings, content, isEditor }) {
             height: "auto",
             cursor: cursorType !== "system" && hoverCursor ? `url(${hoverCursor}), auto` : "default"
           },
-          children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
+          children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles$1.link, children: /* @__PURE__ */ jsx(
             "img",
             {
               src: img2.url,
               alt: img2.name,
-              className: styles.image
+              className: styles$1.image
             },
             img2.id
           ) }) : /* @__PURE__ */ jsx(
@@ -1161,7 +1160,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
             {
               src: img2.url,
               alt: img2.name,
-              className: styles.image
+              className: styles$1.image
             },
             img2.id
           )
@@ -1191,18 +1190,17 @@ const ControlImageRevealSliderComponent = {
         type: "object",
         properties: {
           imageSize: {
-            name: "IMG SIZE",
+            title: "IMG SIZE",
             icon: "size",
             tooltip: "IMG SIZE",
             type: "object",
             properties: {
               sizeType: {
-                name: "sizeType",
                 type: "string",
                 display: {
                   type: "ratio-group"
                 },
-                enum: ["as Is", "custom", "random"]
+                enum: ["as is", "custom", "random"]
               },
               imageWidth: {
                 type: "number",
@@ -1230,13 +1228,12 @@ const ControlImageRevealSliderComponent = {
             }
           },
           cursor: {
-            name: "cursor",
+            title: "cursor",
             icon: "cursor",
             tooltip: "cursor",
             type: "object",
             properties: {
               cursorType: {
-                name: "cursorType",
                 type: "string",
                 display: {
                   type: "ratio-group"
@@ -1245,24 +1242,24 @@ const ControlImageRevealSliderComponent = {
               },
               defaultCursor: {
                 type: ["string", "null"],
+                title: "Default",
                 display: {
                   type: "settings-image-input",
-                  title: "Default",
                   visible: false
                 }
               },
               hoverCursor: {
                 type: ["string", "null"],
+                title: "Hover",
                 display: {
                   type: "settings-image-input",
-                  title: "Hover",
                   visible: false
                 }
               }
             }
           },
           position: {
-            name: "position",
+            title: "position",
             icon: "transition",
             tooltip: "Position",
             type: "object",
@@ -1438,9 +1435,1067 @@ 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 styles = {
+  backdropStyle,
+  contentStyle,
+  imageStyle,
+  imgWrapper,
+  contain,
+  cover,
+  caption,
+  arrow,
+  arrowVertical,
+  nextArrow,
+  arrowInner,
+  arrowImg,
+  mirror,
+  thumbsContainer,
+  thumbItem,
+  thumbImage,
+  fadeIn,
+  slideInLeft,
+  slideInRight,
+  slideInTop,
+  slideInBottom
+};
+function LightboxGallery({ settings, content, styles: styles2, portalId }) {
+  const [open, setOpen] = React.useState(false);
+  const { url: coverUrl } = settings.cover;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: coverUrl,
+        alt: "Cover",
+        style: { width: "100%", height: "100%", cursor: "pointer" },
+        onClick: () => setOpen(true)
+      }
+    ),
+    /* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, 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 handleBackdropClick = (e) => {
+    if (!closeOnBackdropClick) return;
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const handleImageWrapperClick = (e) => {
+    if (!closeOnBackdropClick) return;
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const onImageClick = (e) => {
+    var _a2, _b;
+    if (settings.triggers.type === "click" && settings.triggers.switch === "image") {
+      e.stopPropagation();
+      (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
+    }
+    if (settings.triggers.type === "click" && settings.triggers.switch === "50/50") {
+      e.stopPropagation();
+      const img2 = e.currentTarget;
+      const rect = img2.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const clickY = e.clientY - rect.top;
+      const imgWidth = rect.width;
+      const imgHeight = rect.height;
+      let dir;
+      if (settings.slider.direction === "horiz") {
+        dir = clickX < imgWidth / 2 ? "-1" : "+1";
+      } else {
+        dir = clickY < imgHeight / 2 ? "-1" : "+1";
+      }
+      (_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
+    }
+  };
+  useEffect(() => {
+    if (!isOpen || !closeOnEsc) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        setCurrentIndex((prev) => (prev + 1) % Math.max(content.length, 1));
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        setCurrentIndex((prev) => (prev - 1 + Math.max(content.length, 1)) % Math.max(content.length, 1));
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen, closeOnEsc, onClose, content.length]);
+  useEffect(() => {
+    if (isOpen) setCurrentIndex(0);
+  }, [isOpen]);
+  const handleArrowClick = (dir) => {
+    var _a2;
+    (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(dir);
+  };
+  const appearDurationMs = ((_a = settings.appear) == null ? void 0 : _a.duration) ? parseInt(settings.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) {
+        case "left":
+          return styles.slideInLeft;
+        case "right":
+          return styles.slideInRight;
+        case "top":
+          return styles.slideInTop;
+        case "bottom":
+          return styles.slideInBottom;
+        default:
+          return styles.slideInRight;
+      }
+    }
+    return styles.fadeIn;
+  })();
+  if (!isOpen) return null;
+  return createPortal(
+    /* @__PURE__ */ 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" },
+        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`,
+              animationDuration: `${appearDurationMs}ms`,
+              animationTimingFunction: "ease",
+              animationFillMode: "both"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Splide,
+                {
+                  onMove: (splide) => {
+                    setCurrentIndex(splide.index);
+                  },
+                  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",
+                    pagination: false,
+                    drag: settings.triggers.type === "drag",
+                    perPage: 1,
+                    width: "100%",
+                    height: "100%",
+                    type: settings.slider.type === "fade" ? "fade" : "loop",
+                    padding: 0,
+                    rewind: false
+                  },
+                  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"
+                      }),
+                      src: item.image.url,
+                      alt: item.image.name ?? "",
+                      onClick: onImageClick
+                    }
+                  ) }) }, index))
+                }
+              ),
+              settings.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 },
+                    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"})`
+                        },
+                        onClick: (e) => {
+                          handleArrowClick("-1");
+                        },
+                        children: settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                          SvgImage,
+                          {
+                            url: settings.controls.arrowsImgUrl,
+                            fill: settings.controls.color,
+                            hoverFill: settings.controls.hover,
+                            className: cn(styles.arrowImg, styles.mirror)
+                          }
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__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 },
+                    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"})`
+                        },
+                        onClick: (e) => {
+                          handleArrowClick("+1");
+                        },
+                        "aria-label": "Next",
+                        children: settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                          SvgImage,
+                          {
+                            url: settings.controls.arrowsImgUrl,
+                            fill: settings.controls.color,
+                            hoverFill: settings.controls.hover,
+                            className: styles.arrowImg
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ] }),
+              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(
+                "div",
+                {
+                  className: cn(styles.thumbsContainer),
+                  style: {
+                    gap: `${settings.thumbnail.grid.gap}px`,
+                    height: `${settings.thumbnail.grid.height}px`
+                  },
+                  children: content.map((item, index) => {
+                    const isActive = index === currentIndex;
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        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
+                        },
+                        onClick: (e) => {
+                          var _a2;
+                          e.stopPropagation();
+                          setCurrentIndex(index);
+                          (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(index);
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: item.image.url,
+                            alt: item.image.name ?? "",
+                            className: styles.thumbImage,
+                            style: { objectFit: settings.thumbnail.fit === "cover" ? "cover" : "contain" }
+                          }
+                        )
+                      },
+                      `${item.image.url}-${index}`
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    document.getElementById(portalId)
+  );
+};
+const LightboxComponent = {
+  element: LightboxGallery,
+  id: "lightbox",
+  name: "Lightbox",
+  preview: {
+    type: "video",
+    url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7EQ4ME6CP4KX7TJ4HPAXFEW.mp4"
+  },
+  defaultSize: {
+    width: 400,
+    height: 400
+  },
+  schema: {
+    type: "object",
+    properties: {
+      settings: {
+        layoutBased: true,
+        type: "object",
+        properties: {
+          cover: {
+            title: "COVER",
+            icon: "image",
+            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",
+            type: "object",
+            properties: {
+              isActive: {
+                type: "boolean",
+                display: {
+                  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: "ratio-group"
+                },
+                enum: ["top", "center", "bottom"]
+              },
+              triggers: {
+                type: "string",
+                title: "Triggers",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["click", "hover"]
+              },
+              grid: {
+                type: "object",
+                title: "Grid",
+                display: {
+                  type: "group"
+                },
+                properties: {
+                  height: {
+                    type: "number",
+                    label: "H",
+                    display: {
+                      type: "numeric-input"
+                    }
+                  },
+                  gap: {
+                    type: "number",
+                    label: "Gap",
+                    display: {
+                      type: "numeric-input"
+                    }
+                  }
+                }
+              },
+              offset: {
+                type: "object",
+                display: {
+                  type: "offset-controls"
+                },
+                properties: {
+                  x: {
+                    type: "number"
+                  },
+                  y: {
+                    type: "number"
+                  }
+                }
+              },
+              opacity: {
+                type: "number",
+                title: "Opacity",
+                label: "icon:opacity",
+                min: 0,
+                max: 100,
+                step: 1,
+                display: {
+                  type: "numeric-input"
+                }
+              },
+              activeState: {
+                type: "object",
+                title: "ACTIVE",
+                display: {
+                  type: "group"
+                },
+                properties: {
+                  scale: {
+                    type: "number",
+                    title: "Scale",
+                    min: 1,
+                    max: 2,
+                    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"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          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"
+                  }
+                }
+              },
+              padding: {
+                type: "object",
+                title: "Padding",
+                display: {
+                  type: "padding-controls"
+                },
+                properties: {
+                  top: {
+                    type: "number"
+                  },
+                  right: {
+                    type: "number"
+                  },
+                  bottom: {
+                    type: "number"
+                  },
+                  left: {
+                    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: {
+                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: "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: {
+                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: {
+                type: "object",
+                display: {
+                  type: "offset-controls"
+                },
+                properties: {
+                  x: {
+                    type: "number"
+                  },
+                  y: {
+                    type: "number"
+                  }
+                }
+              },
+              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"
+          },
+          thumbnail: {
+            isActive: true,
+            position: "bottom-center",
+            fit: "cover",
+            align: "center",
+            triggers: "click",
+            grid: {
+              height: 60,
+              gap: 8
+            },
+            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: 12, y: 12 }
+          },
+          caption: {
+            alignment: "middle-center",
+            offset: { x: 0, y: 0 },
+            color: "#000000",
+            hover: "#cccccc"
+          }
+        },
+        displayRules: [
+          {
+            if: {
+              name: "appear.type",
+              value: "slide in"
+            },
+            then: {
+              value: true,
+              name: "properties.appear.properties.direction.display.visible"
+            }
+          }
+        ]
+      },
+      content: {
+        layoutBased: false,
+        type: "array",
+        settings: {
+          addItemFromFileExplorer: true,
+          defaultWidth: 500
+        },
+        items: {
+          type: "object",
+          properties: {
+            image: {
+              type: "object",
+              display: {
+                type: "media-input",
+                label: "Image",
+                minWidth: 58,
+                maxWidth: 108
+              },
+              properties: {
+                url: {
+                  type: "string"
+                },
+                name: {
+                  type: "string"
+                },
+                objectFit: {
+                  type: "string",
+                  enum: ["cover", "contain"]
+                }
+              },
+              required: ["url", "name"]
+            },
+            imageCaption: {
+              display: {
+                type: "rich-text",
+                label: "Description",
+                placeholder: "Add Caption...",
+                minWidth: 300,
+                maxWidth: 550
+              }
+            }
+          },
+          required: ["image"]
+        },
+        default: [
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png",
+              name: "Slider-1.png"
+            },
+            imageCaption: [
+              {
+                type: "paragraph",
+                children: [{ text: "" }]
+              }
+            ]
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMTZA3RYMXKF0M095D6JD.png",
+              name: "Slider-2.png"
+            },
+            imageCaption: [
+              {
+                type: "paragraph",
+                children: [{ text: "" }]
+              }
+            ]
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMVSCMPVJBG2WF5KJZYHZ.png",
+              name: "Slider-3.png"
+            },
+            imageCaption: [
+              {
+                type: "paragraph",
+                children: [{ text: "" }]
+              }
+            ]
+          }
+        ]
+      },
+      styles: {
+        layoutBased: true,
+        type: "object",
+        properties: {
+          caption: {
+            dataName: "caption",
+            type: "object",
+            properties: {
+              fontSettings: {
+                type: "object",
+                display: {
+                  type: "font-settings"
+                },
+                properties: {
+                  fontFamily: {
+                    type: "string"
+                  },
+                  fontWeight: {
+                    type: "number"
+                  },
+                  fontStyle: {
+                    type: "string"
+                  }
+                }
+              },
+              widthSettings: {
+                display: {
+                  type: "text-width-control"
+                },
+                type: "object",
+                properties: {
+                  width: {
+                    type: "number"
+                  },
+                  sizing: {
+                    type: "string",
+                    enum: ["auto", "manual"]
+                  }
+                }
+              },
+              fontSizeLineHeight: {
+                type: "object",
+                display: {
+                  type: "font-size-line-height"
+                },
+                properties: {
+                  fontSize: {
+                    type: "number"
+                  },
+                  lineHeight: {
+                    type: "number"
+                  }
+                }
+              },
+              letterSpacing: {
+                display: {
+                  type: "letter-spacing-input"
+                },
+                type: "number"
+              },
+              wordSpacing: {
+                display: {
+                  type: "word-spacing-input"
+                },
+                type: "number"
+              },
+              textAlign: {
+                display: {
+                  type: "text-align-control"
+                },
+                type: "string",
+                enum: ["left", "center", "right", "justify"]
+              },
+              textAppearance: {
+                display: {
+                  type: "text-appearance"
+                },
+                properties: {
+                  textTransform: {
+                    type: "string",
+                    enum: ["none", "uppercase", "lowercase", "capitalize"]
+                  },
+                  textDecoration: {
+                    type: "string",
+                    enum: ["none", "underline"]
+                  },
+                  fontVariant: {
+                    type: "string",
+                    enum: ["normal", "small-caps"]
+                  }
+                }
+              },
+              color: {
+                display: {
+                  type: "style-panel-color-picker"
+                },
+                type: "string"
+              }
+            }
+          }
+        },
+        default: {
+          caption: {
+            widthSettings: {
+              width: 0.13,
+              sizing: "auto"
+            },
+            fontSettings: {
+              fontFamily: "Arial",
+              fontWeight: 400,
+              fontStyle: "normal"
+            },
+            fontSizeLineHeight: {
+              fontSize: 0.02,
+              lineHeight: 0.02
+            },
+            letterSpacing: 0,
+            wordSpacing: 0,
+            textAlign: "left",
+            textAppearance: {
+              textTransform: "none",
+              textDecoration: "none",
+              fontVariant: "normal"
+            },
+            color: "#000000"
+          }
+        }
+      }
+    },
+    required: ["settings", "content", "styles"]
+  }
+};
 const components = [
   ControlSliderComponent,
-  ControlImageRevealSliderComponent
+  ControlImageRevealSliderComponent,
+  LightboxComponent
 ];
 export {
   components