@cntrl-site/sdk 1.24.0 → 1.24.2

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { z } from "zod";
 import UAParser from "ua-parser-js";
 import * as MP4Box from "mp4box";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 import { Splide, SplideSlide } from "@splidejs/react-splide";
 import cn from "classnames";
 var SectionHeightMode = /* @__PURE__ */ ((SectionHeightMode2) => {
@@ -1303,7 +1303,7 @@ 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$2 = {
+const styles$3 = {
   wrapper,
   sliderItem,
   sliderImage,
@@ -1347,15 +1347,15 @@ const styles$2 = {
   contain,
   cover
 };
-const link = "RichTextRenderer-module__link___BWeZ2";
-const styles$1 = {
-  link
+const link$1 = "RichTextRenderer-module__link___BWeZ2";
+const styles$2 = {
+  link: link$1
 };
 const RichTextRenderer = ({ content }) => {
   const getChildren = (children) => {
     return children.map((child, i) => {
       if (child.type === "link") {
-        return /* @__PURE__ */ jsx("a", { className: styles$1.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
+        return /* @__PURE__ */ jsx("a", { className: styles$2.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
       }
       return /* @__PURE__ */ jsx("span", { style: getLeafCss(child), children: child.text }, i);
     });
@@ -1383,7 +1383,7 @@ function scalingValue(value, isEditor = false) {
 }
 const svg = "SvgImage-module__svg___q3xE-";
 const img = "SvgImage-module__img___VsTm-";
-const styles = {
+const styles$1 = {
   svg,
   img
 };
@@ -1396,13 +1396,13 @@ const SvgImage = ({ url, fill = "#000000", hoverFill = "#CCCCCC", className = ""
     }
   }, []);
   if (!url.endsWith(".svg") || !supportsMask) {
-    return /* @__PURE__ */ jsx("img", { src: url, alt: "", className: cn(styles.img, className) });
+    return /* @__PURE__ */ jsx("img", { src: url, alt: "", className: cn(styles$1.img, className) });
   }
   return /* @__PURE__ */ jsx(
     "span",
     {
       "data-supports-mask": supportsMask,
-      className: cn(styles.svg, className),
+      className: cn(styles$1.svg, className),
       style: {
         "--svg": `url(${url})`,
         "--fill": fill,
@@ -1412,15 +1412,15 @@ const SvgImage = ({ url, fill = "#000000", hoverFill = "#CCCCCC", className = ""
   );
 };
 const alignmentClassName = {
-  "top-left": styles$2.topLeftAlignment,
-  "top-center": styles$2.topCenterAlignment,
-  "top-right": styles$2.topRightAlignment,
-  "middle-left": styles$2.middleLeftAlignment,
-  "middle-center": styles$2.middleCenterAlignment,
-  "middle-right": styles$2.middleRightAlignment,
-  "bottom-left": styles$2.bottomLeftAlignment,
-  "bottom-center": styles$2.bottomCenterAlignment,
-  "bottom-right": styles$2.bottomRightAlignment
+  "top-left": styles$3.topLeftAlignment,
+  "top-center": styles$3.topCenterAlignment,
+  "top-right": styles$3.topRightAlignment,
+  "middle-left": styles$3.middleLeftAlignment,
+  "middle-center": styles$3.middleCenterAlignment,
+  "middle-right": styles$3.middleRightAlignment,
+  "bottom-left": styles$3.bottomLeftAlignment,
+  "bottom-center": styles$3.bottomCenterAlignment,
+  "bottom-right": styles$3.bottomRightAlignment
 };
 function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
   const [sliderRef, setSliderRef] = useState(null);
@@ -1455,10 +1455,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$2.wrapper, { [styles$2.editor]: isEditor }), ref: setWrapperRef, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: cn(styles$3.wrapper, { [styles$3.editor]: isEditor }), ref: setWrapperRef, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$2.sliderInner,
+      className: styles$3.sliderInner,
       style: {
         width: sliderDimensions ? sliderDimensions.width : "100%",
         height: sliderDimensions ? sliderDimensions.height : "100%",
@@ -1468,17 +1468,17 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         settings.caption.isActive && /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(styles$2.captionBlock),
+            className: cn(styles$3.captionBlock),
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$2.captionTextWrapper,
+                className: styles$3.captionTextWrapper,
                 children: content.map((item, index) => /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: cn(styles$2.captionText, alignmentClassName[caption.alignment], {
-                      [styles$2.withPointerEvents]: index === currentSlideIndex && isEditor,
-                      [styles$2.active]: index === currentSlideIndex
+                    className: cn(styles$3.captionText, alignmentClassName[caption.alignment], {
+                      [styles$3.withPointerEvents]: index === currentSlideIndex && isEditor,
+                      [styles$3.active]: index === currentSlideIndex
                     }),
                     style: {
                       fontFamily: fontSettings.fontFamily,
@@ -1500,7 +1500,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                       "div",
                       {
                         "data-styles": "caption",
-                        className: styles$2.captionTextInner,
+                        className: styles$3.captionTextInner,
                         style: {
                           "--link-hover-color": caption.hover,
                           position: "relative",
@@ -1543,17 +1543,17 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             children: content.map((item, index) => /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$2.sliderItem,
+                className: styles$3.sliderItem,
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: styles$2.imgWrapper,
+                    className: styles$3.imgWrapper,
                     children: /* @__PURE__ */ jsx(
                       "img",
                       {
-                        className: cn(styles$2.sliderImage, {
-                          [styles$2.contain]: item.image.objectFit === "contain",
-                          [styles$2.cover]: item.image.objectFit === "cover"
+                        className: cn(styles$3.sliderImage, {
+                          [styles$3.contain]: item.image.objectFit === "contain",
+                          [styles$3.cover]: item.image.objectFit === "cover"
                         }),
                         src: item.image.url,
                         alt: item.image.name ?? ""
@@ -1570,8 +1570,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(styles$2.arrow, {
-                [styles$2.arrowVertical]: direction === "vert"
+              className: cn(styles$3.arrow, {
+                [styles$3.arrowVertical]: direction === "vert"
               }),
               style: {
                 color: controls.color,
@@ -1583,7 +1583,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                   onClick: () => {
                     handleArrowClick("-1");
                   },
-                  className: styles$2.arrowInner,
+                  className: styles$3.arrowInner,
                   style: {
                     transform: `translate(${scalingValue(controlsOffsetX, isEditor)}, ${scalingValue(controlsOffsetY * (direction === "horiz" ? 1 : -1), isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
                   },
@@ -1594,10 +1594,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         url: controls.arrowsImgUrl,
                         fill: controls.color,
                         hoverFill: controls.hover,
-                        className: cn(styles$2.arrowImg, styles$2.mirror)
+                        className: cn(styles$3.arrowImg, styles$3.mirror)
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg, styles$2.mirror) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
                   ]
                 }
               )
@@ -1606,8 +1606,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(styles$2.arrow, styles$2.nextArrow, {
-                [styles$2.arrowVertical]: direction === "vert"
+              className: cn(styles$3.arrow, styles$3.nextArrow, {
+                [styles$3.arrowVertical]: direction === "vert"
               }),
               style: {
                 color: controls.color,
@@ -1616,7 +1616,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
               children: /* @__PURE__ */ jsxs(
                 "button",
                 {
-                  className: styles$2.arrowInner,
+                  className: styles$3.arrowInner,
                   onClick: () => handleArrowClick("+1"),
                   style: {
                     transform: `translate(${scalingValue(controlsOffsetX * (direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controlsOffsetY, isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
@@ -1628,10 +1628,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         url: controls.arrowsImgUrl,
                         fill: controls.color,
                         hoverFill: controls.hover,
-                        className: styles$2.arrowImg
+                        className: styles$3.arrowImg
                       }
                     ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg) })
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
                   ]
                 }
               )
@@ -1641,7 +1641,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         triggers.triggersList.click && /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles$2.clickOverlay,
+            className: styles$3.clickOverlay,
             onClick: () => {
               if (sliderRef) {
                 sliderRef.go("+1");
@@ -1652,21 +1652,21 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         pagination2.isActive && /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(styles$2.pagination, {
-              [styles$2.paginationInsideBottom]: pagination2.position === "inside-1" && direction === "horiz",
-              [styles$2.paginationInsideTop]: pagination2.position === "inside-2" && direction === "horiz",
-              [styles$2.paginationOutsideBottom]: pagination2.position === "outside-1" && direction === "horiz",
-              [styles$2.paginationOutsideTop]: pagination2.position === "outside-2" && direction === "horiz",
-              [styles$2.paginationInsideLeft]: pagination2.position === "inside-1" && direction === "vert",
-              [styles$2.paginationInsideRight]: pagination2.position === "inside-2" && direction === "vert",
-              [styles$2.paginationOutsideLeft]: pagination2.position === "outside-1" && direction === "vert",
-              [styles$2.paginationOutsideRight]: pagination2.position === "outside-2" && direction === "vert",
-              [styles$2.paginationVertical]: direction === "vert"
+            className: cn(styles$3.pagination, {
+              [styles$3.paginationInsideBottom]: pagination2.position === "inside-1" && direction === "horiz",
+              [styles$3.paginationInsideTop]: pagination2.position === "inside-2" && direction === "horiz",
+              [styles$3.paginationOutsideBottom]: pagination2.position === "outside-1" && direction === "horiz",
+              [styles$3.paginationOutsideTop]: pagination2.position === "outside-2" && direction === "horiz",
+              [styles$3.paginationInsideLeft]: pagination2.position === "inside-1" && direction === "vert",
+              [styles$3.paginationInsideRight]: pagination2.position === "inside-2" && direction === "vert",
+              [styles$3.paginationOutsideLeft]: pagination2.position === "outside-1" && direction === "vert",
+              [styles$3.paginationOutsideRight]: pagination2.position === "outside-2" && direction === "vert",
+              [styles$3.paginationVertical]: direction === "vert"
             }),
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$2.paginationInner,
+                className: styles$3.paginationInner,
                 style: {
                   backgroundColor: pagination2.colors[2],
                   transform: `scale(${pagination2.scale / 100}) translate(${scalingValue(pagination2.offset.x, isEditor)}, ${scalingValue(pagination2.offset.y, isEditor)}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
@@ -1679,12 +1679,12 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                         sliderRef.go(index);
                       }
                     },
-                    className: cn(styles$2.paginationItem),
+                    className: cn(styles$3.paginationItem),
                     children: /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: cn(styles$2.dot, {
-                          [styles$2.activeDot]: index === currentSlideIndex
+                        className: cn(styles$3.dot, {
+                          [styles$3.activeDot]: index === currentSlideIndex
                         }),
                         style: {
                           backgroundColor: index === currentSlideIndex ? pagination2.colors[0] : pagination2.colors[1],
@@ -2255,8 +2255,470 @@ const ControlSliderComponent = {
     required: ["settings", "content", "styles"]
   }
 };
+const imageRevealSlider = "ImageRevealSlider-module__imageRevealSlider___UE5Ob";
+const image = "ImageRevealSlider-module__image___Qjt-e";
+const link = "ImageRevealSlider-module__link___N-iLG";
+const styles = {
+  imageRevealSlider,
+  image,
+  link
+};
+function isMouseOverImage(mouseX, mouseY, placedImages) {
+  for (const img2 of placedImages) {
+    const imgEl = new Image();
+    imgEl.src = img2.url;
+    const imgWidth = img2.width ? Number.parseFloat(img2.width) : imgEl.naturalWidth;
+    const imgHeight = imgEl.naturalHeight / imgEl.naturalWidth * imgWidth;
+    const halfW = imgWidth / 2;
+    const halfH = imgHeight / 2;
+    if (mouseX >= img2.x - halfW && mouseX <= img2.x + halfW && mouseY >= img2.y - halfH && mouseY <= img2.y + halfH) {
+      return true;
+    }
+  }
+  return false;
+}
+function getImageSize(url) {
+  return new Promise((resolve) => {
+    const img2 = new Image();
+    img2.src = url;
+    img2.onload = () => {
+      resolve({ width: img2.naturalWidth, height: img2.naturalHeight });
+    };
+  });
+}
+async function calculateImageWidthHeight(imgUrl, sizeType, customWidth, randomRange) {
+  let width;
+  let height;
+  if (sizeType === "custom") {
+    width = customWidth;
+    const size = await getImageSize(imgUrl);
+    height = size.height / size.width * width;
+  } else if (sizeType === "random") {
+    width = Math.random() * (randomRange.max - randomRange.min) + randomRange.min;
+    const size = await getImageSize(imgUrl);
+    height = size.height / size.width * width;
+  } else {
+    const size = await getImageSize(imgUrl);
+    width = size.width;
+    height = size.height;
+  }
+  return { width, height, finalWidth: `${width}px` };
+}
+function ImageRevealSlider({ settings, content, isEditor }) {
+  const divRef = useRef(null);
+  const [placedImages, setPlacedImages] = useState([]);
+  const [counter, setCounter] = useState(0);
+  const imageIdCounter = useRef(0);
+  const defaultImageCount = 1;
+  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
+  const { revealPosition, visible, target } = settings.position;
+  const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
+  const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
+    const { width, height, finalWidth } = await calculateImageWidthHeight(
+      imgData.image.url,
+      sizeType,
+      customWidth,
+      randomRange
+    );
+    let x = position.x ?? Math.random() * containerWidth;
+    let y = position.y ?? Math.random() * containerHeight;
+    const adjustedX = Math.min(Math.max(x, width / 2), containerWidth - width / 2);
+    const adjustedY = Math.min(Math.max(y, height / 2), containerHeight - height / 2);
+    return {
+      id: imageIdCounter.current++,
+      url: imgData.image.url,
+      link: imgData.link,
+      name: imgData.image.name,
+      x: adjustedX,
+      y: adjustedY,
+      width: finalWidth
+    };
+  };
+  const defaultContentUrls = useMemo(() => {
+    const defaultContentLength = Math.min(content.length, defaultImageCount);
+    return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
+  }, [content]);
+  useEffect(() => {
+    if (!divRef.current || content.length === 0) return;
+    const rect = divRef.current.getBoundingClientRect();
+    const containerWidth = rect.width;
+    const containerHeight = rect.height;
+    const defaultPlaced = [];
+    const placeImages = async () => {
+      for (let i = 0; i < defaultImageCount && i < content.length; i++) {
+        const imgData = content[i];
+        const newImg = await createNewImage(imgData, containerWidth, containerHeight);
+        defaultPlaced.push(newImg);
+      }
+      setPlacedImages(defaultPlaced);
+      setCounter(defaultImageCount % content.length);
+    };
+    placeImages();
+  }, [defaultContentUrls, sizeType, customWidth, randomRange]);
+  useEffect(() => {
+    if (visible === "lastOne") {
+      setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
+    }
+  }, [visible]);
+  const handleClick = async (e) => {
+    if (!divRef.current) return;
+    const rect = divRef.current.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const clickY = e.clientY - rect.top;
+    if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
+    let x = 0, y = 0;
+    if (revealPosition === "onClick") {
+      x = clickX;
+      y = clickY;
+    } else if (revealPosition === "same") {
+      x = rect.width / 2;
+      y = rect.height / 2;
+    } else {
+      x = Math.random() * rect.width;
+      y = Math.random() * rect.height;
+    }
+    const imgData = content[counter];
+    const newImage = await createNewImage(imgData, rect.width, rect.height, { x, y });
+    setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
+    setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
+  };
+  const handleMouseMove = (e) => {
+    if (!divRef.current) return;
+    if (cursorType === "system") {
+      divRef.current.style.cursor = "";
+      return;
+    }
+    const rect = divRef.current.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const isHover = target === "area" || isMouseOverImage(mouseX, mouseY, placedImages);
+    divRef.current.style.cursor = isHover ? `url(${hoverCursor}), auto` : `url(${defaultCursor}), auto`;
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: divRef,
+      onClick: handleClick,
+      onMouseEnter: handleMouseMove,
+      onMouseMove: handleMouseMove,
+      className: styles.imageRevealSlider,
+      children: placedImages.map((img2) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.wrapper,
+          style: {
+            top: `${img2.y}px`,
+            left: `${img2.x}px`,
+            position: "absolute",
+            transform: "translate(-50%, -50%)",
+            width: img2.width ?? "auto",
+            height: "auto"
+          },
+          children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: img2.url,
+              alt: img2.name,
+              className: styles.image
+            },
+            img2.id
+          ) }) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: img2.url,
+              alt: img2.name,
+              className: styles.image
+            },
+            img2.id
+          )
+        }
+      ))
+    }
+  );
+}
+const ControlImageRevealSliderComponent = {
+  element: ImageRevealSlider,
+  id: "control-image-reveal",
+  name: "Image reveal",
+  preview: {
+    type: "video",
+    url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K723EY5AH8SKQFK4R31D8FPV.mp4"
+  },
+  defaultSize: {
+    width: 700,
+    height: 400
+  },
+  schema: {
+    type: "object",
+    properties: {
+      settings: {
+        layoutBased: true,
+        type: "object",
+        properties: {
+          imageSize: {
+            name: "IMG SIZE",
+            icon: "size",
+            tooltip: "IMG SIZE",
+            type: "object",
+            properties: {
+              sizeType: {
+                name: "sizeType",
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["as Is", "custom", "random"]
+              },
+              imageWidth: {
+                type: "number",
+                label: "W",
+                display: {
+                  type: "numeric-input",
+                  visible: false
+                }
+              },
+              randomRangeImageWidth: {
+                type: "object",
+                display: {
+                  type: "random-range-controls",
+                  visible: false
+                },
+                properties: {
+                  min: {
+                    type: "number"
+                  },
+                  max: {
+                    type: "number"
+                  }
+                }
+              }
+            }
+          },
+          cursor: {
+            name: "cursor",
+            icon: "cursor",
+            tooltip: "cursor",
+            type: "object",
+            properties: {
+              cursorType: {
+                name: "cursorType",
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["system", "custom"]
+              },
+              defaultCursor: {
+                type: ["string", "null"],
+                display: {
+                  type: "settings-image-input",
+                  title: "Default",
+                  visible: false
+                }
+              },
+              hoverCursor: {
+                type: ["string", "null"],
+                display: {
+                  type: "settings-image-input",
+                  title: "Hover",
+                  visible: false
+                }
+              }
+            }
+          },
+          position: {
+            name: "position",
+            icon: "transition",
+            tooltip: "Position",
+            type: "object",
+            properties: {
+              revealPosition: {
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["random", "same", "onClick"]
+              },
+              visible: {
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["all", "lastOne"]
+              },
+              target: {
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["area", "image"]
+              }
+            }
+          }
+        },
+        default: {
+          imageSize: {
+            sizeType: "custom",
+            imageWidth: 500,
+            randomRangeImageWidth: {
+              min: 100,
+              max: 1e3
+            }
+          },
+          cursor: {
+            cursorType: "system",
+            defaultCursor: null,
+            hoverCursor: null
+          },
+          position: {
+            revealPosition: "random",
+            visible: "all",
+            target: "area"
+          }
+        },
+        displayRules: [
+          {
+            if: {
+              name: "imageSize.sizeType",
+              value: "custom"
+            },
+            then: {
+              name: "properties.imageSize.properties.imageWidth.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "imageSize.sizeType",
+              value: "random"
+            },
+            then: {
+              name: "properties.imageSize.properties.randomRangeImageWidth.display.visible",
+              value: true
+            }
+          },
+          {
+            if: [
+              { name: "position.target", value: "image" },
+              { name: "cursor.cursorType", value: "custom" }
+            ],
+            then: {
+              name: "properties.cursor.properties.defaultCursor.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "cursor.cursorType",
+              value: "custom"
+            },
+            then: {
+              name: "properties.cursor.properties.hoverCursor.display.visible",
+              value: true
+            }
+          }
+        ]
+      },
+      content: {
+        layoutBased: false,
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            image: {
+              type: "object",
+              display: {
+                type: "media-input"
+              },
+              properties: {
+                url: {
+                  type: "string"
+                },
+                name: {
+                  type: "string"
+                },
+                objectFit: {
+                  type: "string",
+                  enum: ["cover", "contain"]
+                }
+              },
+              required: ["url", "name"]
+            },
+            link: {
+              type: "string",
+              display: {
+                type: "text-input",
+                placeholder: "Enter link..."
+              }
+            }
+          },
+          required: ["image"]
+        },
+        default: [
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740QZCY7R9HD9KTMB6XGPJ4.jpeg",
+              name: "Slider-1.jpeg"
+            },
+            link: ""
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740S36970GH347RCZ8GW6QF.jpeg",
+              name: "Slider-2.jpeg"
+            },
+            link: ""
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740RZ7VG1PWA7CRMR6TW0QS.jpeg",
+              name: "Slider-3.jpeg"
+            },
+            link: ""
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740RV2XQMBWM2RZABY6AP9N.jpeg",
+              name: "Slider-4.jpeg"
+            },
+            link: ""
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740RQ4E62FG7Y92J4AP8T0A.jpeg",
+              name: "Slider-5.jpeg"
+            },
+            link: ""
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740RE073FS2HZX8AVP3MCR7.jpeg",
+              name: "Slider-6.jpeg"
+            },
+            link: ""
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740R841W216BPQR07XZN8G4.jpeg",
+              name: "Slider-7.jpeg"
+            },
+            link: ""
+          }
+        ]
+      }
+    }
+  }
+};
 const components = [
-  ControlSliderComponent
+  ControlSliderComponent,
+  ControlImageRevealSliderComponent
 ];
 export {
   AnchorSide,