@cntrl-site/sdk 1.22.9 → 1.22.12

package/dist/Components/ControlSlider/ControlSlider.d.ts

@@ -52,7 +52,11 @@ type Triggers = {
 type SliderSettings = {
     controls: SliderControls;
     pagination: SliderPagination;
-    direction: 'horizontal' | 'vertical';
+    direction: 'horiz' | 'vert';
+    transition: {
+        type: 'slide' | 'fade in';
+        duration: string;
+    };
     caption: SliderCaption;
     triggers: Triggers;
 };

package/dist/Components/ControlSlider/ControlSliderComponent.d.ts

@@ -21,6 +21,7 @@ export declare const ControlSliderComponent: {
                     triggers: {
                         name: string;
                         icon: string;
+                        tooltip: string;
                         type: string;
                         properties: {
                             triggersList: {
@@ -50,15 +51,40 @@ export declare const ControlSliderComponent: {
                     direction: {
                         name: string;
                         icon: string;
+                        tooltip: string;
                         type: string;
                         display: {
                             type: string;
                         };
                         enum: string[];
                     };
+                    transition: {
+                        name: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        properties: {
+                            type: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: string[];
+                            };
+                            duration: {
+                                type: string;
+                                label: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: string[];
+                            };
+                        };
+                    };
                     controls: {
                         name: string;
                         icon: string;
+                        tooltip: string;
                         type: string;
                         properties: {
                             isActive: {
@@ -117,6 +143,7 @@ export declare const ControlSliderComponent: {
                     pagination: {
                         name: string;
                         icon: string;
+                        tooltip: string;
                         type: string;
                         properties: {
                             isActive: {
@@ -181,6 +208,7 @@ export declare const ControlSliderComponent: {
                     caption: {
                         name: string;
                         icon: string;
+                        tooltip: string;
                         type: string;
                         properties: {
                             isActive: {
@@ -241,6 +269,10 @@ export declare const ControlSliderComponent: {
                         color: string;
                         hover: string;
                     };
+                    transition: {
+                        type: string;
+                        duration: string;
+                    };
                     pagination: {
                         isActive: boolean;
                         scale: number;

package/dist/index.js

@@ -1224,6 +1224,7 @@ const nextArrow = "ControlSlider-module__nextArrow___-30Yc";
 const arrowInner = "ControlSlider-module__arrowInner___aEra3";
 const arrowIcon = "ControlSlider-module__arrowIcon___S4ztF";
 const arrowImg = "ControlSlider-module__arrowImg___2dwJW";
+const mirror = "ControlSlider-module__mirror___brd6U";
 const pagination = "ControlSlider-module__pagination___bicLF";
 const paginationInner = "ControlSlider-module__paginationInner___bT-P-";
 const paginationVertical = "ControlSlider-module__paginationVertical___zYqKw";
@@ -1242,6 +1243,7 @@ const imgWrapper = "ControlSlider-module__imgWrapper___UjEgB";
 const captionBlock = "ControlSlider-module__captionBlock___dJ6-j";
 const captionTextWrapper = "ControlSlider-module__captionTextWrapper___HFlpf";
 const captionText = "ControlSlider-module__captionText___uGBVc";
+const active = "ControlSlider-module__active___WZK4G";
 const withPointerEvents = "ControlSlider-module__withPointerEvents___t-18M";
 const topLeftAlignment = "ControlSlider-module__topLeftAlignment___zjnGM";
 const topCenterAlignment = "ControlSlider-module__topCenterAlignment___gD1xW";
@@ -1265,6 +1267,7 @@ const styles$2 = {
   arrowInner,
   arrowIcon,
   arrowImg,
+  mirror,
   pagination,
   paginationInner,
   paginationVertical,
@@ -1283,6 +1286,7 @@ const styles$2 = {
   captionBlock,
   captionTextWrapper,
   captionText,
+  active,
   withPointerEvents,
   topLeftAlignment,
   topCenterAlignment,
@@ -1378,7 +1382,9 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
   const [sliderDimensions, setSliderDimensions] = react.useState(void 0);
   const [wrapperRef, setWrapperRef] = react.useState(null);
   const [currentSlideIndex, setCurrentSlideIndex] = react.useState(0);
-  const { direction } = settings;
+  const [key, setKey] = react.useState(0);
+  const { direction, transition, controls, pagination: pagination2, caption, triggers } = settings;
+  const prevSliderTypeRef = react.useRef(transition.type);
   const { x: controlsOffsetX, y: controlsOffsetY } = settings.controls.offset;
   const handleArrowClick = (dir) => {
     if (sliderRef) {
@@ -1398,6 +1404,11 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
     observer.observe(wrapperRef);
     return () => observer.unobserve(wrapperRef);
   }, [wrapperRef]);
+  react.useEffect(() => {
+    if (!sliderRef || prevSliderTypeRef.current === transition.type) return;
+    setKey((prev) => prev + 1);
+    prevSliderTypeRef.current = transition.type;
+  }, [transition.type]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(styles$2.wrapper, { [styles$2.editor]: isEditor }), ref: setWrapperRef, children: [
     settings.caption.isActive && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -1410,8 +1421,9 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             children: content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: cn(styles$2.captionText, alignmentClassName[settings.caption.alignment], {
-                  [styles$2.withPointerEvents]: index === currentSlideIndex && isEditor
+                className: cn(styles$2.captionText, alignmentClassName[caption.alignment], {
+                  [styles$2.withPointerEvents]: index === currentSlideIndex && isEditor,
+                  [styles$2.active]: index === currentSlideIndex
                 }),
                 style: {
                   fontFamily: fontSettings.fontFamily,
@@ -1427,7 +1439,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                   textDecoration: textAppearance.textDecoration ?? "none",
                   fontVariant: textAppearance.fontVariant ?? "normal",
                   color,
-                  opacity: index === currentSlideIndex ? 1 : 0
+                  transitionDuration: transition.duration ? `${Math.round(parseInt(transition.duration) / 2)}ms` : "500ms"
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
@@ -1435,10 +1447,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                     "data-styles": "caption",
                     className: styles$2.captionTextInner,
                     style: {
-                      "--link-hover-color": settings.caption.hover,
+                      "--link-hover-color": caption.hover,
                       position: "relative",
-                      top: scalingValue(settings.caption.offset.y, isEditor),
-                      left: scalingValue(settings.caption.offset.x, isEditor)
+                      top: scalingValue(caption.offset.y, isEditor),
+                      left: scalingValue(caption.offset.x, isEditor)
                     },
                     children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: item.imageCaption })
                   }
@@ -1459,18 +1471,19 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         ref: setSliderRef,
         options: {
           arrows: false,
-          speed: 600,
-          autoplay: isEditor ? false : settings.triggers.autoPlay !== null,
-          ...settings.triggers.autoPlay !== null && {
-            interval: parseInt(settings.triggers.autoPlay) * 1e3
+          speed: transition.duration ? parseInt(transition.duration) : 500,
+          autoplay: isEditor ? false : triggers.autoPlay !== null,
+          ...triggers.autoPlay !== null && {
+            interval: parseInt(triggers.autoPlay) * 1e3
           },
-          direction: direction === "horizontal" ? "ltr" : "ttb",
+          direction: direction === "horiz" || transition.type === "fade in" ? "ltr" : "ttb",
           pagination: false,
-          drag: settings.triggers.triggersList.drag,
+          drag: triggers.triggersList.drag,
           perPage: 1,
           width: sliderDimensions ? sliderDimensions == null ? void 0 : sliderDimensions.width : "100%",
           height: sliderDimensions ? sliderDimensions == null ? void 0 : sliderDimensions.height : "100%",
-          type: "loop"
+          type: transition.type === "fade in" ? "fade" : "loop",
+          rewind: true
         },
         children: content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -1498,18 +1511,19 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             )
           }
         ) }, index))
-      }
+      },
+      key
     ),
-    settings.controls.isActive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    controls.isActive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: cn(styles$2.arrow, {
-            [styles$2.arrowVertical]: settings.direction === "vertical"
+            [styles$2.arrowVertical]: direction === "vert"
           }),
           style: {
-            color: settings.controls.color,
-            ["--arrow-hover-color"]: settings.controls.hover
+            color: controls.color,
+            ["--arrow-hover-color"]: controls.hover
           },
           children: /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
@@ -1519,19 +1533,19 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
               },
               className: styles$2.arrowInner,
               style: {
-                transform: `translate(${scalingValue(controlsOffsetX, isEditor)}, ${scalingValue(controlsOffsetY * (direction === "horizontal" ? 1 : -1), isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horizontal" ? "180deg" : "-90deg"})`
+                transform: `translate(${scalingValue(controlsOffsetX, isEditor)}, ${scalingValue(controlsOffsetY * (direction === "horiz" ? 1 : -1), isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
               },
               children: [
-                settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
                   SvgImage,
                   {
-                    url: settings.controls.arrowsImgUrl,
-                    fill: settings.controls.color,
-                    hoverFill: settings.controls.hover,
-                    className: styles$2.arrowImg
+                    url: controls.arrowsImgUrl,
+                    fill: controls.color,
+                    hoverFill: controls.hover,
+                    className: cn(styles$2.arrowImg, styles$2.mirror)
                   }
                 ),
-                !settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: settings.controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg) })
+                !controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg, styles$2.mirror) })
               ]
             }
           )
@@ -1541,11 +1555,11 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         "div",
         {
           className: cn(styles$2.arrow, styles$2.nextArrow, {
-            [styles$2.arrowVertical]: settings.direction === "vertical"
+            [styles$2.arrowVertical]: direction === "vert"
           }),
           style: {
-            color: settings.controls.color,
-            ["--arrow-hover-color"]: settings.controls.hover
+            color: controls.color,
+            ["--arrow-hover-color"]: controls.hover
           },
           children: /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
@@ -1553,26 +1567,26 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
               className: styles$2.arrowInner,
               onClick: () => handleArrowClick("+1"),
               style: {
-                transform: `translate(${scalingValue(controlsOffsetX * (direction === "horizontal" ? -1 : 1), isEditor)}, ${scalingValue(controlsOffsetY, isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horizontal" ? "0deg" : "90deg"})`
+                transform: `translate(${scalingValue(controlsOffsetX * (direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controlsOffsetY, isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
               },
               children: [
-                settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
                   SvgImage,
                   {
-                    url: settings.controls.arrowsImgUrl,
-                    fill: settings.controls.color,
-                    hoverFill: settings.controls.hover,
+                    url: controls.arrowsImgUrl,
+                    fill: controls.color,
+                    hoverFill: controls.hover,
                     className: styles$2.arrowImg
                   }
                 ),
-                !settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: settings.controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg) })
+                !controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg) })
               ]
             }
           )
         }
       )
     ] }),
-    settings.triggers.triggersList.click && /* @__PURE__ */ jsxRuntime.jsx(
+    triggers.triggersList.click && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: styles$2.clickOverlay,
@@ -1583,27 +1597,27 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         }
       }
     ),
-    settings.pagination.isActive && /* @__PURE__ */ jsxRuntime.jsx(
+    pagination2.isActive && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: cn(styles$2.pagination, {
-          [styles$2.paginationInsideBottom]: settings.pagination.position === "inside-1" && settings.direction === "horizontal",
-          [styles$2.paginationInsideTop]: settings.pagination.position === "inside-2" && settings.direction === "horizontal",
-          [styles$2.paginationOutsideBottom]: settings.pagination.position === "outside-1" && settings.direction === "horizontal",
-          [styles$2.paginationOutsideTop]: settings.pagination.position === "outside-2" && settings.direction === "horizontal",
-          [styles$2.paginationInsideLeft]: settings.pagination.position === "inside-1" && settings.direction === "vertical",
-          [styles$2.paginationInsideRight]: settings.pagination.position === "inside-2" && settings.direction === "vertical",
-          [styles$2.paginationOutsideLeft]: settings.pagination.position === "outside-1" && settings.direction === "vertical",
-          [styles$2.paginationOutsideRight]: settings.pagination.position === "outside-2" && settings.direction === "vertical",
-          [styles$2.paginationVertical]: settings.direction === "vertical"
+          [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"
         }),
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: styles$2.paginationInner,
             style: {
-              backgroundColor: settings.pagination.colors[0],
-              transform: `scale(${settings.pagination.scale / 100}) translate(${scalingValue(settings.pagination.offset.x, isEditor)}, ${scalingValue(settings.pagination.offset.y, isEditor)}) rotate(${settings.direction === "horizontal" ? "0deg" : "90deg"})`
+              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__ */ jsxRuntime.jsx(
               "button",
@@ -1621,8 +1635,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                       [styles$2.activeDot]: index === currentSlideIndex
                     }),
                     style: {
-                      backgroundColor: settings.pagination.colors[1],
-                      ["--pagination-hover-color"]: settings.pagination.hover
+                      backgroundColor: index === currentSlideIndex ? pagination2.colors[0] : pagination2.colors[1],
+                      ["--pagination-hover-color"]: pagination2.hover
                     }
                   }
                 )
@@ -1660,6 +1674,7 @@ const ControlSliderComponent = {
           triggers: {
             name: "triggers",
             icon: "target",
+            tooltip: "Triggers",
             type: "object",
             properties: {
               triggersList: {
@@ -1689,15 +1704,40 @@ const ControlSliderComponent = {
           direction: {
             name: "direction",
             icon: "horizontal-resize",
+            tooltip: "Direction",
             type: "string",
             display: {
-              type: "direction-enum"
+              type: "ratio-group"
             },
-            enum: ["horizontal", "vertical"]
+            enum: ["horiz", "vert"]
+          },
+          transition: {
+            name: "transit",
+            icon: "transition",
+            tooltip: "Transition",
+            type: "object",
+            properties: {
+              type: {
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["slide", "fade in"]
+              },
+              duration: {
+                type: "string",
+                label: "hourglass-icon",
+                display: {
+                  type: "step-selector"
+                },
+                enum: ["100ms", "250ms", "500ms", "1000ms"]
+              }
+            }
           },
           controls: {
             name: "controls",
             icon: "controls",
+            tooltip: "Controls",
             type: "object",
             properties: {
               isActive: {
@@ -1756,6 +1796,7 @@ const ControlSliderComponent = {
           pagination: {
             name: "nav",
             icon: "pagination",
+            tooltip: "Navigation",
             type: "object",
             properties: {
               isActive: {
@@ -1818,8 +1859,9 @@ const ControlSliderComponent = {
             }
           },
           caption: {
-            name: "desc",
+            name: "Caption",
             icon: "text-icon",
+            tooltip: "Caption",
             type: "object",
             properties: {
               isActive: {
@@ -1880,6 +1922,10 @@ const ControlSliderComponent = {
             color: "#000000",
             hover: "#cccccc"
           },
+          transition: {
+            type: "slide",
+            duration: "500ms"
+          },
           pagination: {
             isActive: true,
             scale: 50,
@@ -1888,10 +1934,10 @@ const ControlSliderComponent = {
               x: 0,
               y: 0
             },
-            colors: ["#000000", "#cccccc"],
+            colors: ["#cccccc", "#cccccc", "#000000"],
             hover: "#cccccc"
           },
-          direction: "horizontal",
+          direction: "horiz",
           caption: {
             offset: {
               x: 0,

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 } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Splide, SplideSlide } from "@splidejs/react-splide";
 import cn from "classnames";
 var SectionHeightMode = /* @__PURE__ */ ((SectionHeightMode2) => {
@@ -1205,6 +1205,7 @@ const nextArrow = "ControlSlider-module__nextArrow___-30Yc";
 const arrowInner = "ControlSlider-module__arrowInner___aEra3";
 const arrowIcon = "ControlSlider-module__arrowIcon___S4ztF";
 const arrowImg = "ControlSlider-module__arrowImg___2dwJW";
+const mirror = "ControlSlider-module__mirror___brd6U";
 const pagination = "ControlSlider-module__pagination___bicLF";
 const paginationInner = "ControlSlider-module__paginationInner___bT-P-";
 const paginationVertical = "ControlSlider-module__paginationVertical___zYqKw";
@@ -1223,6 +1224,7 @@ const imgWrapper = "ControlSlider-module__imgWrapper___UjEgB";
 const captionBlock = "ControlSlider-module__captionBlock___dJ6-j";
 const captionTextWrapper = "ControlSlider-module__captionTextWrapper___HFlpf";
 const captionText = "ControlSlider-module__captionText___uGBVc";
+const active = "ControlSlider-module__active___WZK4G";
 const withPointerEvents = "ControlSlider-module__withPointerEvents___t-18M";
 const topLeftAlignment = "ControlSlider-module__topLeftAlignment___zjnGM";
 const topCenterAlignment = "ControlSlider-module__topCenterAlignment___gD1xW";
@@ -1246,6 +1248,7 @@ const styles$2 = {
   arrowInner,
   arrowIcon,
   arrowImg,
+  mirror,
   pagination,
   paginationInner,
   paginationVertical,
@@ -1264,6 +1267,7 @@ const styles$2 = {
   captionBlock,
   captionTextWrapper,
   captionText,
+  active,
   withPointerEvents,
   topLeftAlignment,
   topCenterAlignment,
@@ -1359,7 +1363,9 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
   const [sliderDimensions, setSliderDimensions] = useState(void 0);
   const [wrapperRef, setWrapperRef] = useState(null);
   const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
-  const { direction } = settings;
+  const [key, setKey] = useState(0);
+  const { direction, transition, controls, pagination: pagination2, caption, triggers } = settings;
+  const prevSliderTypeRef = useRef(transition.type);
   const { x: controlsOffsetX, y: controlsOffsetY } = settings.controls.offset;
   const handleArrowClick = (dir) => {
     if (sliderRef) {
@@ -1379,6 +1385,11 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
     observer.observe(wrapperRef);
     return () => observer.unobserve(wrapperRef);
   }, [wrapperRef]);
+  useEffect(() => {
+    if (!sliderRef || prevSliderTypeRef.current === transition.type) return;
+    setKey((prev) => prev + 1);
+    prevSliderTypeRef.current = transition.type;
+  }, [transition.type]);
   return /* @__PURE__ */ jsxs("div", { className: cn(styles$2.wrapper, { [styles$2.editor]: isEditor }), ref: setWrapperRef, children: [
     settings.caption.isActive && /* @__PURE__ */ jsx(
       "div",
@@ -1391,8 +1402,9 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             children: content.map((item, index) => /* @__PURE__ */ jsx(
               "div",
               {
-                className: cn(styles$2.captionText, alignmentClassName[settings.caption.alignment], {
-                  [styles$2.withPointerEvents]: index === currentSlideIndex && isEditor
+                className: cn(styles$2.captionText, alignmentClassName[caption.alignment], {
+                  [styles$2.withPointerEvents]: index === currentSlideIndex && isEditor,
+                  [styles$2.active]: index === currentSlideIndex
                 }),
                 style: {
                   fontFamily: fontSettings.fontFamily,
@@ -1408,7 +1420,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                   textDecoration: textAppearance.textDecoration ?? "none",
                   fontVariant: textAppearance.fontVariant ?? "normal",
                   color,
-                  opacity: index === currentSlideIndex ? 1 : 0
+                  transitionDuration: transition.duration ? `${Math.round(parseInt(transition.duration) / 2)}ms` : "500ms"
                 },
                 children: /* @__PURE__ */ jsx(
                   "div",
@@ -1416,10 +1428,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                     "data-styles": "caption",
                     className: styles$2.captionTextInner,
                     style: {
-                      "--link-hover-color": settings.caption.hover,
+                      "--link-hover-color": caption.hover,
                       position: "relative",
-                      top: scalingValue(settings.caption.offset.y, isEditor),
-                      left: scalingValue(settings.caption.offset.x, isEditor)
+                      top: scalingValue(caption.offset.y, isEditor),
+                      left: scalingValue(caption.offset.x, isEditor)
                     },
                     children: /* @__PURE__ */ jsx(RichTextRenderer, { content: item.imageCaption })
                   }
@@ -1440,18 +1452,19 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         ref: setSliderRef,
         options: {
           arrows: false,
-          speed: 600,
-          autoplay: isEditor ? false : settings.triggers.autoPlay !== null,
-          ...settings.triggers.autoPlay !== null && {
-            interval: parseInt(settings.triggers.autoPlay) * 1e3
+          speed: transition.duration ? parseInt(transition.duration) : 500,
+          autoplay: isEditor ? false : triggers.autoPlay !== null,
+          ...triggers.autoPlay !== null && {
+            interval: parseInt(triggers.autoPlay) * 1e3
           },
-          direction: direction === "horizontal" ? "ltr" : "ttb",
+          direction: direction === "horiz" || transition.type === "fade in" ? "ltr" : "ttb",
           pagination: false,
-          drag: settings.triggers.triggersList.drag,
+          drag: triggers.triggersList.drag,
           perPage: 1,
           width: sliderDimensions ? sliderDimensions == null ? void 0 : sliderDimensions.width : "100%",
           height: sliderDimensions ? sliderDimensions == null ? void 0 : sliderDimensions.height : "100%",
-          type: "loop"
+          type: transition.type === "fade in" ? "fade" : "loop",
+          rewind: true
         },
         children: content.map((item, index) => /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
           "div",
@@ -1479,18 +1492,19 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             )
           }
         ) }, index))
-      }
+      },
+      key
     ),
-    settings.controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+    controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(styles$2.arrow, {
-            [styles$2.arrowVertical]: settings.direction === "vertical"
+            [styles$2.arrowVertical]: direction === "vert"
           }),
           style: {
-            color: settings.controls.color,
-            ["--arrow-hover-color"]: settings.controls.hover
+            color: controls.color,
+            ["--arrow-hover-color"]: controls.hover
           },
           children: /* @__PURE__ */ jsxs(
             "button",
@@ -1500,19 +1514,19 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
               },
               className: styles$2.arrowInner,
               style: {
-                transform: `translate(${scalingValue(controlsOffsetX, isEditor)}, ${scalingValue(controlsOffsetY * (direction === "horizontal" ? 1 : -1), isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horizontal" ? "180deg" : "-90deg"})`
+                transform: `translate(${scalingValue(controlsOffsetX, isEditor)}, ${scalingValue(controlsOffsetY * (direction === "horiz" ? 1 : -1), isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
               },
               children: [
-                settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                controls.arrowsImgUrl && /* @__PURE__ */ jsx(
                   SvgImage,
                   {
-                    url: settings.controls.arrowsImgUrl,
-                    fill: settings.controls.color,
-                    hoverFill: settings.controls.hover,
-                    className: styles$2.arrowImg
+                    url: controls.arrowsImgUrl,
+                    fill: controls.color,
+                    hoverFill: controls.hover,
+                    className: cn(styles$2.arrowImg, styles$2.mirror)
                   }
                 ),
-                !settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: settings.controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg) })
+                !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg, styles$2.mirror) })
               ]
             }
           )
@@ -1522,11 +1536,11 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         "div",
         {
           className: cn(styles$2.arrow, styles$2.nextArrow, {
-            [styles$2.arrowVertical]: settings.direction === "vertical"
+            [styles$2.arrowVertical]: direction === "vert"
           }),
           style: {
-            color: settings.controls.color,
-            ["--arrow-hover-color"]: settings.controls.hover
+            color: controls.color,
+            ["--arrow-hover-color"]: controls.hover
           },
           children: /* @__PURE__ */ jsxs(
             "button",
@@ -1534,26 +1548,26 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
               className: styles$2.arrowInner,
               onClick: () => handleArrowClick("+1"),
               style: {
-                transform: `translate(${scalingValue(controlsOffsetX * (direction === "horizontal" ? -1 : 1), isEditor)}, ${scalingValue(controlsOffsetY, isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horizontal" ? "0deg" : "90deg"})`
+                transform: `translate(${scalingValue(controlsOffsetX * (direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controlsOffsetY, isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
               },
               children: [
-                settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                controls.arrowsImgUrl && /* @__PURE__ */ jsx(
                   SvgImage,
                   {
-                    url: settings.controls.arrowsImgUrl,
-                    fill: settings.controls.color,
-                    hoverFill: settings.controls.hover,
+                    url: controls.arrowsImgUrl,
+                    fill: controls.color,
+                    hoverFill: controls.hover,
                     className: styles$2.arrowImg
                   }
                 ),
-                !settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: settings.controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg) })
+                !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg) })
               ]
             }
           )
         }
       )
     ] }),
-    settings.triggers.triggersList.click && /* @__PURE__ */ jsx(
+    triggers.triggersList.click && /* @__PURE__ */ jsx(
       "div",
       {
         className: styles$2.clickOverlay,
@@ -1564,27 +1578,27 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
         }
       }
     ),
-    settings.pagination.isActive && /* @__PURE__ */ jsx(
+    pagination2.isActive && /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(styles$2.pagination, {
-          [styles$2.paginationInsideBottom]: settings.pagination.position === "inside-1" && settings.direction === "horizontal",
-          [styles$2.paginationInsideTop]: settings.pagination.position === "inside-2" && settings.direction === "horizontal",
-          [styles$2.paginationOutsideBottom]: settings.pagination.position === "outside-1" && settings.direction === "horizontal",
-          [styles$2.paginationOutsideTop]: settings.pagination.position === "outside-2" && settings.direction === "horizontal",
-          [styles$2.paginationInsideLeft]: settings.pagination.position === "inside-1" && settings.direction === "vertical",
-          [styles$2.paginationInsideRight]: settings.pagination.position === "inside-2" && settings.direction === "vertical",
-          [styles$2.paginationOutsideLeft]: settings.pagination.position === "outside-1" && settings.direction === "vertical",
-          [styles$2.paginationOutsideRight]: settings.pagination.position === "outside-2" && settings.direction === "vertical",
-          [styles$2.paginationVertical]: settings.direction === "vertical"
+          [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"
         }),
         children: /* @__PURE__ */ jsx(
           "div",
           {
             className: styles$2.paginationInner,
             style: {
-              backgroundColor: settings.pagination.colors[0],
-              transform: `scale(${settings.pagination.scale / 100}) translate(${scalingValue(settings.pagination.offset.x, isEditor)}, ${scalingValue(settings.pagination.offset.y, isEditor)}) rotate(${settings.direction === "horizontal" ? "0deg" : "90deg"})`
+              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(
               "button",
@@ -1602,8 +1616,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
                       [styles$2.activeDot]: index === currentSlideIndex
                     }),
                     style: {
-                      backgroundColor: settings.pagination.colors[1],
-                      ["--pagination-hover-color"]: settings.pagination.hover
+                      backgroundColor: index === currentSlideIndex ? pagination2.colors[0] : pagination2.colors[1],
+                      ["--pagination-hover-color"]: pagination2.hover
                     }
                   }
                 )
@@ -1641,6 +1655,7 @@ const ControlSliderComponent = {
           triggers: {
             name: "triggers",
             icon: "target",
+            tooltip: "Triggers",
             type: "object",
             properties: {
               triggersList: {
@@ -1670,15 +1685,40 @@ const ControlSliderComponent = {
           direction: {
             name: "direction",
             icon: "horizontal-resize",
+            tooltip: "Direction",
             type: "string",
             display: {
-              type: "direction-enum"
+              type: "ratio-group"
             },
-            enum: ["horizontal", "vertical"]
+            enum: ["horiz", "vert"]
+          },
+          transition: {
+            name: "transit",
+            icon: "transition",
+            tooltip: "Transition",
+            type: "object",
+            properties: {
+              type: {
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["slide", "fade in"]
+              },
+              duration: {
+                type: "string",
+                label: "hourglass-icon",
+                display: {
+                  type: "step-selector"
+                },
+                enum: ["100ms", "250ms", "500ms", "1000ms"]
+              }
+            }
           },
           controls: {
             name: "controls",
             icon: "controls",
+            tooltip: "Controls",
             type: "object",
             properties: {
               isActive: {
@@ -1737,6 +1777,7 @@ const ControlSliderComponent = {
           pagination: {
             name: "nav",
             icon: "pagination",
+            tooltip: "Navigation",
             type: "object",
             properties: {
               isActive: {
@@ -1799,8 +1840,9 @@ const ControlSliderComponent = {
             }
           },
           caption: {
-            name: "desc",
+            name: "Caption",
             icon: "text-icon",
+            tooltip: "Caption",
             type: "object",
             properties: {
               isActive: {
@@ -1861,6 +1903,10 @@ const ControlSliderComponent = {
             color: "#000000",
             hover: "#cccccc"
           },
+          transition: {
+            type: "slide",
+            duration: "500ms"
+          },
           pagination: {
             isActive: true,
             scale: 50,
@@ -1869,10 +1915,10 @@ const ControlSliderComponent = {
               x: 0,
               y: 0
             },
-            colors: ["#000000", "#cccccc"],
+            colors: ["#cccccc", "#cccccc", "#000000"],
             hover: "#cccccc"
           },
-          direction: "horizontal",
+          direction: "horiz",
           caption: {
             offset: {
               x: 0,

package/dist/sdk.css

@@ -1 +1 @@
-.ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__slider___R3i9-{width:100%;height:100%}.ControlSlider-module__sliderItems___1MgPL{display:flex;overflow:hidden;width:100%;height:100%;transition:transform .3s ease-in-out}.ControlSlider-module__sliderItem___QQSkR{width:100%;height:100%;display:flex;position:relative}.ControlSlider-module__sliderImage___9hRl-{width:100%;height:100%;object-fit:cover}.ControlSlider-module__arrow___05ghY{position:absolute;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;top:50%;left:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.ControlSlider-module__arrow___05ghY.ControlSlider-module__arrowVertical___tBfVN{left:50%;top:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,-50%)}.ControlSlider-module__nextArrow___-30Yc{left:unset;right:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(50%,-50%)}.ControlSlider-module__nextArrow___-30Yc.ControlSlider-module__arrowVertical___tBfVN{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,50%)}.ControlSlider-module__arrowInner___aEra3{all:unset;cursor:pointer;width:100%;height:100%}.ControlSlider-module__arrowInner___aEra3:hover .ControlSlider-module__arrowIcon___S4ztF path{fill:var(--arrow-hover-color)!important}.ControlSlider-module__arrowImg___2dwJW{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ControlSlider-module__arrowIcon___S4ztF{width:100%;height:100%}.ControlSlider-module__arrowIcon___S4ztF path{transition:fill .15s ease-in-out}.ControlSlider-module__prevIcon___v8NAK{transform:rotate(180deg)}.ControlSlider-module__pagination___bicLF{position:absolute;z-index:1;border-radius:50%}.ControlSlider-module__paginationInner___bT-P-{display:flex;gap:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);padding-top:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-bottom:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-left:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);padding-right:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);border-radius:calc(var(--is-editor, 0) * 2.3611111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.3611111111vw)}.ControlSlider-module__paginationVertical___zYqKw{flex-direction:column}.ControlSlider-module__paginationItem___nTRbk{all:unset;flex-shrink:0;position:relative;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);cursor:pointer}.ControlSlider-module__paginationItem___nTRbk:hover .ControlSlider-module__dot___p1Qun{background-color:var(--pagination-hover-color)!important}.ControlSlider-module__dot___p1Qun{border-radius:50%;scale:.5;transition:background-color .3s ease-in-out,transform .3s ease-in-out;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw)}.ControlSlider-module__activeDot___LHFaj{transform:scale(2)}.ControlSlider-module__paginationInsideBottom___R3FWn{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__paginationInsideTop___V-qb-{left:50%;transform:translate(-50%);top:0}.ControlSlider-module__paginationOutsideBottom___14w8D{left:50%;transform:translate(-50%);bottom:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideTop___SCLqB{left:50%;transform:translate(-50%);top:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideLeft___yOBRZ{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideRight___Rtt3o{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideLeft___lahaw{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__paginationOutsideRight___EtuQa{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__imgWrapper___UjEgB,.ControlSlider-module__wrapperInner___DLAWV{width:100%;height:100%}.ControlSlider-module__captionBlock___dJ6-j{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.ControlSlider-module__captionTextWrapper___HFlpf{position:relative;width:100%;height:100%}.ControlSlider-module__captionText___uGBVc{pointer-events:none;max-width:100%;transition:opacity .3s ease-in-out;position:absolute;display:inline-block;white-space:pre-wrap;overflow-wrap:break-word}.ControlSlider-module__withPointerEvents___t-18M{pointer-events:auto}.ControlSlider-module__absolute___KxmYB{position:absolute}.ControlSlider-module__topLeftAlignment___zjnGM{top:0;left:0}.ControlSlider-module__topCenterAlignment___gD1xW{top:0;left:50%;transform:translate(-50%)}.ControlSlider-module__topRightAlignment___NMapS{top:0;right:0}.ControlSlider-module__middleLeftAlignment___OnUrY{top:50%;transform:translateY(-50%);left:0}.ControlSlider-module__middleCenterAlignment___Tdkl0{top:50%;transform:translate(-50%,-50%);left:50%}.ControlSlider-module__middleRightAlignment___wEbfX{top:50%;transform:translateY(-50%);right:0}.ControlSlider-module__bottomLeftAlignment___cTP2-{bottom:0;left:0}.ControlSlider-module__bottomCenterAlignment___c54fB{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__bottomRightAlignment___kEwrz{bottom:0;right:0}.ControlSlider-module__clickOverlay___DZA28{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.ControlSlider-module__contain___pLyq7{object-fit:contain}.ControlSlider-module__cover___KdDat{object-fit:cover}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.RichTextRenderer-module__link___BWeZ2{color:inherit;cursor:pointer;pointer-events:auto;transition:color .2s ease}.RichTextRenderer-module__link___BWeZ2:hover{color:var(--link-hover-color)}.SvgImage-module__svg___q3xE-{width:100%;height:100%;color:transparent;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--fill);transition:background-color .2s;-webkit-mask:var(--svg) no-repeat center/contain;mask:var(--svg) no-repeat center/contain}.SvgImage-module__svg___q3xE-:hover{background-color:var(--hover-fill)}.SvgImage-module__img___VsTm-{width:100%;height:100%;object-fit:contain}
+.ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__slider___R3i9-{width:100%;height:100%}.ControlSlider-module__sliderItems___1MgPL{display:flex;overflow:hidden;width:100%;height:100%;transition:transform .3s ease-in-out}.ControlSlider-module__sliderItem___QQSkR{width:100%;height:100%;display:flex;position:relative}.ControlSlider-module__sliderImage___9hRl-{width:100%;height:100%;object-fit:cover}.ControlSlider-module__arrow___05ghY{position:absolute;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;top:50%;left:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.ControlSlider-module__arrow___05ghY.ControlSlider-module__arrowVertical___tBfVN{left:50%;top:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,-50%)}.ControlSlider-module__nextArrow___-30Yc{left:unset;right:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(50%,-50%)}.ControlSlider-module__nextArrow___-30Yc.ControlSlider-module__arrowVertical___tBfVN{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,50%)}.ControlSlider-module__arrowInner___aEra3{all:unset;cursor:pointer;width:100%;height:100%}.ControlSlider-module__arrowInner___aEra3:hover .ControlSlider-module__arrowIcon___S4ztF path{fill:var(--arrow-hover-color)!important}.ControlSlider-module__arrowImg___2dwJW{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ControlSlider-module__arrowIcon___S4ztF{width:100%;height:100%}.ControlSlider-module__arrowIcon___S4ztF path{transition:fill .15s ease-in-out}.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleX(-1)}.ControlSlider-module__arrowVertical___tBfVN.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleY(-1)}.ControlSlider-module__pagination___bicLF{position:absolute;z-index:1;border-radius:50%}.ControlSlider-module__paginationInner___bT-P-{display:flex;gap:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);padding-top:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-bottom:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-left:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);padding-right:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);border-radius:calc(var(--is-editor, 0) * 2.3611111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.3611111111vw)}.ControlSlider-module__paginationVertical___zYqKw{flex-direction:column}.ControlSlider-module__paginationItem___nTRbk{all:unset;flex-shrink:0;position:relative;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);cursor:pointer}.ControlSlider-module__paginationItem___nTRbk:hover .ControlSlider-module__dot___p1Qun{background-color:var(--pagination-hover-color)!important}.ControlSlider-module__dot___p1Qun{border-radius:50%;scale:.5;transition:background-color .3s ease-in-out,transform .3s ease-in-out;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw)}.ControlSlider-module__activeDot___LHFaj{transform:scale(2)}.ControlSlider-module__paginationInsideBottom___R3FWn{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__paginationInsideTop___V-qb-{left:50%;transform:translate(-50%);top:0}.ControlSlider-module__paginationOutsideBottom___14w8D{left:50%;transform:translate(-50%);bottom:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideTop___SCLqB{left:50%;transform:translate(-50%);top:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideLeft___yOBRZ{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideRight___Rtt3o{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideLeft___lahaw{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__paginationOutsideRight___EtuQa{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__imgWrapper___UjEgB,.ControlSlider-module__wrapperInner___DLAWV{width:100%;height:100%}.ControlSlider-module__captionBlock___dJ6-j{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.ControlSlider-module__captionTextWrapper___HFlpf{position:relative;width:100%;height:100%}.ControlSlider-module__captionText___uGBVc{pointer-events:none;max-width:100%;transition-property:opacity;transition-timing-function:ease-in-out;position:absolute;display:inline-block;white-space:pre-wrap;overflow-wrap:break-word;opacity:0}.ControlSlider-module__captionText___uGBVc.ControlSlider-module__active___WZK4G{opacity:1}.ControlSlider-module__withPointerEvents___t-18M{pointer-events:auto}.ControlSlider-module__absolute___KxmYB{position:absolute}.ControlSlider-module__topLeftAlignment___zjnGM{top:0;left:0}.ControlSlider-module__topCenterAlignment___gD1xW{top:0;left:50%;transform:translate(-50%)}.ControlSlider-module__topRightAlignment___NMapS{top:0;right:0}.ControlSlider-module__middleLeftAlignment___OnUrY{top:50%;transform:translateY(-50%);left:0}.ControlSlider-module__middleCenterAlignment___Tdkl0{top:50%;transform:translate(-50%,-50%);left:50%}.ControlSlider-module__middleRightAlignment___wEbfX{top:50%;transform:translateY(-50%);right:0}.ControlSlider-module__bottomLeftAlignment___cTP2-{bottom:0;left:0}.ControlSlider-module__bottomCenterAlignment___c54fB{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__bottomRightAlignment___kEwrz{bottom:0;right:0}.ControlSlider-module__clickOverlay___DZA28{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.ControlSlider-module__contain___pLyq7{object-fit:contain}.ControlSlider-module__cover___KdDat{object-fit:cover}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.RichTextRenderer-module__link___BWeZ2{color:inherit;cursor:pointer;pointer-events:auto;transition:color .2s ease}.RichTextRenderer-module__link___BWeZ2:hover{color:var(--link-hover-color)}.SvgImage-module__svg___q3xE-{width:100%;height:100%;color:transparent;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--fill);transition:background-color .2s;-webkit-mask:var(--svg) no-repeat center/contain;mask:var(--svg) no-repeat center/contain}.SvgImage-module__svg___q3xE-:hover{background-color:var(--hover-fill)}.SvgImage-module__img___VsTm-{width:100%;height:100%;object-fit:contain}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk",
-  "version": "1.22.9",
+  "version": "1.22.12",
   "description": "Generic SDK for use in public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",