@cntrl-site/sdk 1.23.1-11 → 1.23.1-13

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { URL } from "url";
 import { z } from "zod";
 import UAParser from "ua-parser-js";
 import * as MP4Box from "mp4box";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
 import { useState, useEffect, useRef } from "react";
 import { Splide, SplideSlide } from "@splidejs/react-splide";
 import cn from "classnames";
@@ -1310,15 +1310,31 @@ 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__ */ jsxDEV("a", { className: styles$2.link, href: child.value, target: child.target, children: getChildren(child.children) }, i, false, {
+          fileName: "H:/mom/sdk/src/Components/helpers/RichTextRenderer/RichTextRenderer.tsx",
+          lineNumber: 13,
+          columnNumber: 16
+        }, void 0);
       }
-      return /* @__PURE__ */ jsx("span", { style: getLeafCss(child), children: child.text }, i);
+      return /* @__PURE__ */ jsxDEV("span", { style: getLeafCss(child), children: child.text }, i, false, {
+        fileName: "H:/mom/sdk/src/Components/helpers/RichTextRenderer/RichTextRenderer.tsx",
+        lineNumber: 15,
+        columnNumber: 14
+      }, void 0);
     });
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: content.map((block, i) => {
+  return /* @__PURE__ */ jsxDEV(Fragment, { children: content.map((block, i) => {
     const children = block.children;
-    return /* @__PURE__ */ jsx("div", { children: getChildren(children) }, i);
-  }) });
+    return /* @__PURE__ */ jsxDEV("div", { children: getChildren(children) }, i, false, {
+      fileName: "H:/mom/sdk/src/Components/helpers/RichTextRenderer/RichTextRenderer.tsx",
+      lineNumber: 23,
+      columnNumber: 11
+    }, void 0);
+  }) }, void 0, false, {
+    fileName: "H:/mom/sdk/src/Components/helpers/RichTextRenderer/RichTextRenderer.tsx",
+    lineNumber: 19,
+    columnNumber: 5
+  }, void 0);
 };
 function getLeafCss(leaf) {
   return {
@@ -1351,9 +1367,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__ */ jsxDEV("img", { src: url, alt: "", className: cn(styles$1.img, className) }, void 0, false, {
+      fileName: "H:/mom/sdk/src/Components/helpers/SvgImage/SvgImage.tsx",
+      lineNumber: 23,
+      columnNumber: 12
+    }, void 0);
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxDEV(
     "span",
     {
       "data-supports-mask": supportsMask,
@@ -1363,7 +1383,15 @@ const SvgImage = ({ url, fill = "#000000", hoverFill = "#CCCCCC", className = ""
         "--fill": fill,
         "--hover-fill": hoverFill
       }
-    }
+    },
+    void 0,
+    false,
+    {
+      fileName: "H:/mom/sdk/src/Components/helpers/SvgImage/SvgImage.tsx",
+      lineNumber: 27,
+      columnNumber: 5
+    },
+    void 0
   );
 };
 const alignmentClassName = {
@@ -1410,19 +1438,19 @@ 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("div", { className: styles$3.sliderInner, style: {
+  return /* @__PURE__ */ jsxDEV("div", { className: cn(styles$3.wrapper, { [styles$3.editor]: isEditor }), ref: setWrapperRef, children: /* @__PURE__ */ jsxDEV("div", { className: styles$3.sliderInner, style: {
     width: sliderDimensions ? sliderDimensions.width : "100%",
     height: sliderDimensions ? sliderDimensions.height : "100%"
   }, children: [
-    settings.caption.isActive && /* @__PURE__ */ jsx(
+    settings.caption.isActive && /* @__PURE__ */ jsxDEV(
       "div",
       {
         className: cn(styles$3.captionBlock),
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxDEV(
           "div",
           {
             className: styles$3.captionTextWrapper,
-            children: content.map((item, index) => /* @__PURE__ */ jsx(
+            children: content.map((item, index) => /* @__PURE__ */ jsxDEV(
               "div",
               {
                 className: cn(styles$3.captionText, alignmentClassName[caption.alignment], {
@@ -1445,7 +1473,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                   color,
                   transitionDuration: transition.duration ? `${Math.round(parseInt(transition.duration) / 2)}ms` : "500ms"
                 },
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsxDEV(
                   "div",
                   {
                     "data-styles": "caption",
@@ -1456,17 +1484,52 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                       top: scalingValue(caption.offset.y, isEditor),
                       left: scalingValue(caption.offset.x, isEditor)
                     },
-                    children: /* @__PURE__ */ jsx(RichTextRenderer, { content: item.imageCaption })
-                  }
+                    children: /* @__PURE__ */ jsxDEV(RichTextRenderer, { content: item.imageCaption }, void 0, false, {
+                      fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+                      lineNumber: 111,
+                      columnNumber: 19
+                    }, this)
+                  },
+                  void 0,
+                  false,
+                  {
+                    fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+                    lineNumber: 101,
+                    columnNumber: 17
+                  },
+                  this
                 )
               },
-              index
+              index,
+              false,
+              {
+                fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+                lineNumber: 78,
+                columnNumber: 15
+              },
+              this
             ))
-          }
+          },
+          void 0,
+          false,
+          {
+            fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+            lineNumber: 74,
+            columnNumber: 11
+          },
+          this
         )
-      }
+      },
+      void 0,
+      false,
+      {
+        fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+        lineNumber: 71,
+        columnNumber: 9
+      },
+      this
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxDEV(
       Splide,
       {
         onMove: (e) => {
@@ -1489,15 +1552,15 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
           type: transition.type === "fade in" ? "fade" : "loop",
           rewind: true
         },
-        children: content.map((item, index) => /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
+        children: content.map((item, index) => /* @__PURE__ */ jsxDEV(SplideSlide, { children: /* @__PURE__ */ jsxDEV(
           "div",
           {
             className: styles$3.sliderItem,
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsxDEV(
               "div",
               {
                 className: styles$3.imgWrapper,
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsxDEV(
                   "img",
                   {
                     className: cn(styles$3.sliderImage, {
@@ -1506,17 +1569,52 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                     }),
                     src: item.image.url,
                     alt: item.image.name ?? ""
-                  }
+                  },
+                  void 0,
+                  false,
+                  {
+                    fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+                    lineNumber: 149,
+                    columnNumber: 17
+                  },
+                  this
                 )
-              }
+              },
+              void 0,
+              false,
+              {
+                fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+                lineNumber: 146,
+                columnNumber: 15
+              },
+              this
             )
-          }
-        ) }, index))
+          },
+          void 0,
+          false,
+          {
+            fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+            lineNumber: 143,
+            columnNumber: 13
+          },
+          this
+        ) }, index, false, {
+          fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+          lineNumber: 142,
+          columnNumber: 11
+        }, this))
       },
-      key
+      key,
+      false,
+      {
+        fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+        lineNumber: 118,
+        columnNumber: 7
+      },
+      this
     ),
-    controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
+    controls.isActive && /* @__PURE__ */ jsxDEV(Fragment, { children: [
+      /* @__PURE__ */ jsxDEV(
         "div",
         {
           className: cn(styles$3.arrow, {
@@ -1526,7 +1624,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             color: controls.color,
             ["--arrow-hover-color"]: controls.hover
           },
-          children: /* @__PURE__ */ jsxs(
+          children: /* @__PURE__ */ jsxDEV(
             "button",
             {
               onClick: () => {
@@ -1537,22 +1635,50 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                 transform: `translate(${scalingValue(controlsOffsetX, isEditor)}, ${scalingValue(controlsOffsetY * (direction === "horiz" ? 1 : -1), isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
               },
               children: [
-                controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                controls.arrowsImgUrl && /* @__PURE__ */ jsxDEV(
                   SvgImage,
                   {
                     url: controls.arrowsImgUrl,
                     fill: controls.color,
                     hoverFill: controls.hover,
                     className: cn(styles$3.arrowImg, styles$3.mirror)
-                  }
+                  },
+                  void 0,
+                  false,
+                  {
+                    fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+                    lineNumber: 182,
+                    columnNumber: 17
+                  },
+                  this
                 ),
-                !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
+                !controls.arrowsImgUrl && /* @__PURE__ */ jsxDEV(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) }, void 0, false, {
+                  fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+                  lineNumber: 190,
+                  columnNumber: 17
+                }, this)
               ]
-            }
+            },
+            void 0,
+            true,
+            {
+              fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+              lineNumber: 172,
+              columnNumber: 13
+            },
+            this
           )
-        }
+        },
+        void 0,
+        false,
+        {
+          fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+          lineNumber: 163,
+          columnNumber: 11
+        },
+        this
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxDEV(
         "div",
         {
           className: cn(styles$3.arrow, styles$3.nextArrow, {
@@ -1562,7 +1688,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             color: controls.color,
             ["--arrow-hover-color"]: controls.hover
           },
-          children: /* @__PURE__ */ jsxs(
+          children: /* @__PURE__ */ jsxDEV(
             "button",
             {
               className: styles$3.arrowInner,
@@ -1571,23 +1697,55 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                 transform: `translate(${scalingValue(controlsOffsetX * (direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controlsOffsetY, isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
               },
               children: [
-                controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                controls.arrowsImgUrl && /* @__PURE__ */ jsxDEV(
                   SvgImage,
                   {
                     url: controls.arrowsImgUrl,
                     fill: controls.color,
                     hoverFill: controls.hover,
                     className: styles$3.arrowImg
-                  }
+                  },
+                  void 0,
+                  false,
+                  {
+                    fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+                    lineNumber: 211,
+                    columnNumber: 17
+                  },
+                  this
                 ),
-                !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
+                !controls.arrowsImgUrl && /* @__PURE__ */ jsxDEV(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) }, void 0, false, {
+                  fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+                  lineNumber: 219,
+                  columnNumber: 17
+                }, this)
               ]
-            }
+            },
+            void 0,
+            true,
+            {
+              fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+              lineNumber: 203,
+              columnNumber: 13
+            },
+            this
           )
-        }
+        },
+        void 0,
+        false,
+        {
+          fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+          lineNumber: 194,
+          columnNumber: 11
+        },
+        this
       )
-    ] }),
-    triggers.triggersList.click && /* @__PURE__ */ jsx(
+    ] }, void 0, true, {
+      fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+      lineNumber: 162,
+      columnNumber: 9
+    }, this),
+    triggers.triggersList.click && /* @__PURE__ */ jsxDEV(
       "div",
       {
         className: styles$3.clickOverlay,
@@ -1596,9 +1754,17 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             sliderRef.go("+1");
           }
         }
-      }
+      },
+      void 0,
+      false,
+      {
+        fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+        lineNumber: 226,
+        columnNumber: 9
+      },
+      this
     ),
-    pagination2.isActive && /* @__PURE__ */ jsx(
+    pagination2.isActive && /* @__PURE__ */ jsxDEV(
       "div",
       {
         className: cn(styles$3.pagination, {
@@ -1612,7 +1778,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
           [styles$3.paginationOutsideRight]: pagination2.position === "outside-2" && direction === "vert",
           [styles$3.paginationVertical]: direction === "vert"
         }),
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxDEV(
           "div",
           {
             className: styles$3.paginationInner,
@@ -1620,7 +1786,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
               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"})`
             },
-            children: content.map((_, index) => /* @__PURE__ */ jsx(
+            children: content.map((_, index) => /* @__PURE__ */ jsxDEV(
               "button",
               {
                 onClick: () => {
@@ -1629,7 +1795,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                   }
                 },
                 className: cn(styles$3.paginationItem),
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsxDEV(
                   "div",
                   {
                     className: cn(styles$3.dot, {
@@ -1639,19 +1805,70 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                       backgroundColor: index === currentSlideIndex ? pagination2.colors[0] : pagination2.colors[1],
                       ["--pagination-hover-color"]: pagination2.hover
                     }
-                  }
+                  },
+                  void 0,
+                  false,
+                  {
+                    fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+                    lineNumber: 266,
+                    columnNumber: 17
+                  },
+                  this
                 )
               },
-              index
+              index,
+              false,
+              {
+                fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+                lineNumber: 257,
+                columnNumber: 15
+              },
+              this
             ))
-          }
+          },
+          void 0,
+          false,
+          {
+            fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+            lineNumber: 249,
+            columnNumber: 11
+          },
+          this
         )
-      }
+      },
+      void 0,
+      false,
+      {
+        fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+        lineNumber: 236,
+        columnNumber: 9
+      },
+      this
     )
-  ] }) });
+  ] }, void 0, true, {
+    fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+    lineNumber: 66,
+    columnNumber: 7
+  }, this) }, void 0, false, {
+    fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+    lineNumber: 65,
+    columnNumber: 5
+  }, this);
 }
 function ArrowIcon({ color, className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 18", className, children: /* @__PURE__ */ jsx("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ jsx("path", { d: "M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z", id: "Shape-Copy", fill: color, transform: "translate(5, 9) rotate(-90) translate(-5, -9)" }) }) });
+  return /* @__PURE__ */ jsxDEV("svg", { viewBox: "0 0 10 18", className, children: /* @__PURE__ */ jsxDEV("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ jsxDEV("path", { d: "M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z", id: "Shape-Copy", fill: color, transform: "translate(5, 9) rotate(-90) translate(-5, -9)" }, void 0, false, {
+    fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+    lineNumber: 289,
+    columnNumber: 11
+  }, this) }, void 0, false, {
+    fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+    lineNumber: 288,
+    columnNumber: 7
+  }, this) }, void 0, false, {
+    fileName: "H:/mom/sdk/src/Components/ControlSlider/ControlSlider.tsx",
+    lineNumber: 287,
+    columnNumber: 5
+  }, this);
 }
 const ControlSliderComponent = {
   element: ControlSlider,
@@ -2202,112 +2419,119 @@ function isMouseOverImage(mouseX, mouseY, placedImages) {
   }
   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 revealPosition = settings.position.revealPosition;
-  const visibleType = settings.position.visible;
-  const sizeType = settings.imageSize.sizeType;
-  const customWidth = settings.imageSize.imageWidth;
-  const randomRange = settings.imageSize.randomRangeImageWidth;
-  const clickTarget = settings.position.target;
-  const defaultCursorUrl = settings.cursor.defaultCursor;
-  const hoverCursorUrl = settings.cursor.hoverCursor;
-  const cursorType = settings.cursor.cursorType;
-  const [counter, setCounter] = useState(0);
   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.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.url,
+      name: imgData.name,
+      x: adjustedX,
+      y: adjustedY,
+      width: finalWidth
+    };
+  };
   useEffect(() => {
-    if (visibleType === "lastOne") {
-      setPlacedImages(
-        (prev) => prev.length > 0 ? [prev[prev.length - 1]] : []
-      );
-    }
-  }, [visibleType]);
-  const handleMouseMove = (e) => {
-    if (!divRef.current) return;
-    if (cursorType === "system") {
-      divRef.current.style.cursor = "";
-      return;
-    }
+    if (!divRef.current || content.length === 0) return;
     const rect = divRef.current.getBoundingClientRect();
-    const mouseX = e.clientX - rect.left;
-    const mouseY = e.clientY - rect.top;
-    let isHover = false;
-    if (clickTarget === "area") {
-      isHover = true;
-    } else if (clickTarget === "image") {
-      isHover = isMouseOverImage(mouseX, mouseY, placedImages);
-    }
-    if (divRef.current) {
-      divRef.current.style.cursor = isHover ? `url(${hoverCursorUrl}), auto` : `url(${defaultCursorUrl}), auto`;
+    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].image;
+        const newImg = await createNewImage(imgData, containerWidth, containerHeight);
+        defaultPlaced.push(newImg);
+      }
+      setPlacedImages(defaultPlaced);
+      setCounter(defaultImageCount % content.length);
+    };
+    placeImages();
+  }, [content, sizeType, customWidth, randomRange]);
+  useEffect(() => {
+    if (visible === "lastOne") {
+      setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
     }
-  };
-  const handleClick = (e) => {
+  }, [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;
-    const containerWidth = rect.width;
-    const containerHeight = rect.height;
-    if (clickTarget === "image") {
-      const hit = isMouseOverImage(clickX, clickY, placedImages);
-      if (!hit) return;
-    }
-    let x;
-    let y;
+    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 = containerWidth / 2;
-      y = containerHeight / 2;
+      x = rect.width / 2;
+      y = rect.height / 2;
     } else {
-      x = Math.random() * containerWidth;
-      y = Math.random() * containerHeight;
+      x = Math.random() * rect.width;
+      y = Math.random() * rect.height;
     }
-    let finalWidth;
-    let imgWidthValue;
-    if (sizeType === "custom") {
-      finalWidth = `${customWidth}px`;
-      imgWidthValue = customWidth;
-    } else if (sizeType === "random") {
-      const rnd = Math.random() * (randomRange.max - randomRange.min) + randomRange.min;
-      finalWidth = `${rnd}px`;
-      imgWidthValue = rnd;
+    const imgData = content[counter].image;
+    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 tempImg = new Image();
-    tempImg.src = content[counter].image.url;
-    tempImg.onload = () => {
-      const imgWidth = imgWidthValue ?? tempImg.naturalWidth;
-      const imgHeight = imgWidthValue ? tempImg.naturalHeight / tempImg.naturalWidth * imgWidthValue : tempImg.naturalHeight;
-      const halfW = imgWidth / 2;
-      const halfH = imgHeight / 2;
-      const adjustedX = Math.min(Math.max(x, halfW), containerWidth - halfW);
-      let adjustedY;
-      if (imgHeight > containerHeight) {
-        adjustedY = containerHeight / 2;
-      } else {
-        adjustedY = Math.min(Math.max(y, halfH), containerHeight - halfH);
-      }
-      const newImage = {
-        id: imageIdCounter.current++,
-        url: content[counter].image.url,
-        name: content[counter].image.name,
-        x: adjustedX,
-        y: adjustedY,
-        width: finalWidth
-      };
-      setPlacedImages((prev) => {
-        if (visibleType === "all") {
-          return [...prev, newImage];
-        } else {
-          return [newImage];
-        }
-      });
-      setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
-    };
+    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(
+  return /* @__PURE__ */ jsxDEV(
     "div",
     {
       ref: divRef,
@@ -2315,7 +2539,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       onMouseEnter: handleMouseMove,
       onMouseMove: handleMouseMove,
       className: styles.imageRevealSlider,
-      children: placedImages.map((img2) => /* @__PURE__ */ jsx(
+      children: placedImages.map((img2) => /* @__PURE__ */ jsxDEV(
         "img",
         {
           src: img2.url,
@@ -2330,9 +2554,24 @@ function ImageRevealSlider({ settings, content, isEditor }) {
             height: "auto"
           }
         },
-        img2.id
+        img2.id,
+        false,
+        {
+          fileName: "H:/mom/sdk/src/Components/ImageRevealSlider/ImageRevealSlider.tsx",
+          lineNumber: 237,
+          columnNumber: 9
+        },
+        this
       ))
-    }
+    },
+    void 0,
+    false,
+    {
+      fileName: "H:/mom/sdk/src/Components/ImageRevealSlider/ImageRevealSlider.tsx",
+      lineNumber: 229,
+      columnNumber: 5
+    },
+    this
   );
 }
 const ControlImageRevealSliderComponent = {
@@ -2457,7 +2696,7 @@ const ControlImageRevealSliderComponent = {
         },
         default: {
           imageSize: {
-            sizeType: "as Is",
+            sizeType: "custom",
             imageWidth: 500,
             randomRangeImageWidth: {
               min: 100,
@@ -2550,23 +2789,51 @@ const ControlImageRevealSliderComponent = {
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01GJ2SMPPCQ7JSNGVXZ2DHWXWF/articles-assets/01JRZ15T247392621FNTTRCW9D.jpeg",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740QZCY7R9HD9KTMB6XGPJ4.jpeg",
               name: "Slider-1.jpeg"
             }
           },
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01GJ2SMPPCQ7JSNGVXZ2DHWXWF/articles-assets/01JRZ17S8TS9T62P7NKTNNEB64.jpeg",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740S36970GH347RCZ8GW6QF.jpeg",
               name: "Slider-2.jpeg"
             }
           },
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01GJ2SMPPCQ7JSNGVXZ2DHWXWF/articles-assets/01JRZ197S89RNT6RA7ZJSX3Z38.jpeg",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740RZ7VG1PWA7CRMR6TW0QS.jpeg",
               name: "Slider-3.jpeg"
             }
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740RV2XQMBWM2RZABY6AP9N.jpeg",
+              name: "Slider-4.jpeg"
+            }
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740RQ4E62FG7Y92J4AP8T0A.jpeg",
+              name: "Slider-5.jpeg"
+            }
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740RE073FS2HZX8AVP3MCR7.jpeg",
+              name: "Slider-6.jpeg"
+            }
+          },
+          {
+            image: {
+              objectFit: "cover",
+              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K740R841W216BPQR07XZN8G4.jpeg",
+              name: "Slider-7.jpeg"
+            }
           }
         ]
       }