@cntrl-site/components 0.1.6-20 → 0.1.7-1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 GX Platform
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 GX Platform
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,3 @@
-# Control Components
-
+# Control Components
+
 This is custom components for control editor and public websites.

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

@@ -4,7 +4,7 @@ interface SliderProps {
     styles: SliderStyles;
     isEditor?: boolean;
 }
-export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): JSX.Element;
 type SliderItem = {
     image: {
         url: string;
@@ -21,6 +21,7 @@ type SliderControls = {
     arrowsImgUrl: string | null;
     isActive: boolean;
     color: string;
+    show: 'on hover' | 'always';
     hover: string;
     offset: Offset;
     scale: number;

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

@@ -162,6 +162,14 @@ export declare const ControlSliderComponent: {
                                     format: string;
                                 };
                             };
+                            show: {
+                                title: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: string[];
+                            };
                         };
                     };
                     pagination: {
@@ -316,6 +324,7 @@ export declare const ControlSliderComponent: {
                         scale: number;
                         color: string;
                         hover: string;
+                        show: string;
                     };
                     transition: {
                         type: string;

package/dist/Components/ImageRevealSlider/ControlImageRevealSliderComponent.d.ts

@@ -80,17 +80,6 @@ export declare const ControlImageRevealSliderComponent: {
                                     visible: boolean;
                                 };
                             };
-                            defaultCursorScale: {
-                                type: string;
-                                title: string;
-                                min: number;
-                                max: number;
-                                step: number;
-                                display: {
-                                    type: string;
-                                    visible: boolean;
-                                };
-                            };
                             hoverCursor: {
                                 type: string[];
                                 title: string;
@@ -99,17 +88,6 @@ export declare const ControlImageRevealSliderComponent: {
                                     visible: boolean;
                                 };
                             };
-                            hoverCursorScale: {
-                                type: string;
-                                title: string;
-                                min: number;
-                                max: number;
-                                step: number;
-                                display: {
-                                    type: string;
-                                    visible: boolean;
-                                };
-                            };
                         };
                     };
                     position: {
@@ -154,9 +132,7 @@ export declare const ControlImageRevealSliderComponent: {
                     cursor: {
                         cursorType: string;
                         defaultCursor: null;
-                        defaultCursorScale: number;
                         hoverCursor: null;
-                        hoverCursorScale: number;
                     };
                     position: {
                         revealPosition: string;
@@ -174,15 +150,10 @@ export declare const ControlImageRevealSliderComponent: {
                         value: boolean;
                     };
                 } | {
-                    if: ({
+                    if: {
                         name: string;
                         value: string;
-                        isNotEqual?: undefined;
-                    } | {
-                        name: string;
-                        value: null;
-                        isNotEqual: boolean;
-                    })[];
+                    }[];
                     then: {
                         name: string;
                         value: boolean;

package/dist/Components/ImageRevealSlider/ImageRevealSlider.d.ts

@@ -14,9 +14,7 @@ type ImageRevealSliderImageSize = {
 };
 type ImageRevealSliderCursor = {
     cursorType: 'system' | 'custom';
-    defaultCursorScale: number;
     defaultCursor: string | null;
-    hoverCursorScale: number;
     hoverCursor: string | null;
 };
 type ImageRevealSliderPosition = {
@@ -36,5 +34,5 @@ type ImageRevealSliderItem = {
     };
     link: string;
 };
-export declare function ImageRevealSlider({ settings, content, isEditor }: ImageRevealSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageRevealSlider({ settings, content, isEditor }: ImageRevealSliderProps): JSX.Element;
 export {};

package/dist/Components/Lightbox/Lightbox.d.ts

@@ -7,7 +7,7 @@ type LightboxGalleryProps = {
     activeEvent: 'close' | 'open';
     isEditor?: boolean;
 };
-export declare const LightboxGallery: ({ settings, content, styles, portalId, activeEvent, isEditor }: LightboxGalleryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LightboxGallery: ({ settings, content, styles, portalId, activeEvent, isEditor }: LightboxGalleryProps) => JSX.Element;
 type LightboxImage = {
     image: {
         url: string;

package/dist/components.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__mirror___brd6U{transform:translate(-50%,-50%) scaleX(-1)!important}.ControlSlider-module__arrowVertical___tBfVN.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleY(-1)!important}.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}.ImageRevealSlider-module__imageRevealSlider___UE5Ob{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.ImageRevealSlider-module__image___Qjt-e{display:block;width:100%;height:100%;object-fit:cover;position:relative;-webkit-user-select:none;user-select:none;pointer-events:none}.ImageRevealSlider-module__link___N-iLG{width:100%;height:100%;display:block}.ImageRevealSlider-module__cursor___2U03d{position:absolute;top:0;left:0;pointer-events:none}.LightBox-module__heroImage___sTxNF{width:100%;height:100%;cursor:pointer;object-fit:cover}.LightBox-module__background___rm9ml{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;width:100%;height:100%}.LightBox-module__editor___4ACaY{width:var(--cntrl-article-width)!important;margin-left:auto;margin-right:auto}.LightBox-module__contentStyle___Bgnsq{position:fixed;z-index:9999;top:0;left:0;right:0;bottom:0;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__imageStyle___tLIlB{position:relative;display:block;cursor:pointer;background-color:transparent;max-width:100%;max-height:100%;width:auto;height:auto}.LightBox-module__imgWrapper___LuFUp{position:relative;display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover}.LightBox-module__caption___b6L2I{z-index:9999;position:absolute;display:flex}.LightBox-module__captionTextInner___rCGNH{position:relative}.LightBox-module__lightboxSplide___XFuWC.splide,.LightBox-module__lightboxSplide___XFuWC .splide__track{height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;z-index:1;transform:translate(-50%,-50%);padding:0;left:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);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)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{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%)}.LightBox-module__nextArrow___zkAQN{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%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{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%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{display:flex;align-items:center;justify-content:center;pointer-events:auto}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__closeButton___g2khP{all:unset;cursor:pointer;position:absolute;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)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}@keyframes LightBox-module__lbFadeOut___MhEeN{0%{opacity:1}to{opacity:0}}.LightBox-module__fadeOut___55qBR{animation-name:LightBox-module__lbFadeOut___MhEeN!important}@keyframes LightBox-module__lbSlideOutLeft___xM4sO{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes LightBox-module__lbSlideOutRight___Jppgj{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes LightBox-module__lbSlideOutTop___pvscE{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes LightBox-module__lbSlideOutBottom___oFjPG{0%{transform:translateY(0)}to{transform:translateY(100%)}}.LightBox-module__slideOutLeft___NvU7P{animation-name:LightBox-module__lbSlideOutLeft___xM4sO!important}.LightBox-module__slideOutRight___SK7eC{animation-name:LightBox-module__lbSlideOutRight___Jppgj!important}.LightBox-module__slideOutTop___Vgg0z{animation-name:LightBox-module__lbSlideOutTop___pvscE!important}.LightBox-module__slideOutBottom___nJ0Ef{animation-name:LightBox-module__lbSlideOutBottom___oFjPG!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(.9)!important;transition:opacity var(--splide-speed, .5s) ease,transform var(--splide-speed, .5s) ease!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide.is-active .LightBox-module__scaleSlide___vZriG{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide:not(.is-active) .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}
+.ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__wrapper___sHEkd:hover .ControlSlider-module__hoverArrow___A-dOH{opacity:1!important}.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)!important}.ControlSlider-module__arrowVertical___tBfVN.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleY(-1)!important}.ControlSlider-module__hoverArrow___A-dOH{opacity:0;transition:opacity .15s ease-in-out}.ControlSlider-module__hoverArrow___A-dOH:hover{opacity: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}.ImageRevealSlider-module__imageRevealSlider___UE5Ob{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.ImageRevealSlider-module__image___Qjt-e{width:100%;height:100%;object-fit:cover;position:relative;-webkit-user-select:none;user-select:none;pointer-events:none}.ImageRevealSlider-module__link___N-iLG{width:100%;height:100%;display:block}.LightBox-module__heroImage___sTxNF{width:100%;height:100%;cursor:pointer;object-fit:cover}.LightBox-module__background___rm9ml{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;width:100%;height:100%}.LightBox-module__editor___4ACaY{width:var(--cntrl-article-width)!important;margin-left:auto;margin-right:auto}.LightBox-module__contentStyle___Bgnsq{position:fixed;z-index:9999;top:0;left:0;right:0;bottom:0;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__imageStyle___tLIlB{position:relative;display:block;cursor:pointer;background-color:transparent;max-width:100%;max-height:100%;width:auto;height:auto}.LightBox-module__imgWrapper___LuFUp{position:relative;display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover}.LightBox-module__caption___b6L2I{z-index:9999;position:absolute;display:flex}.LightBox-module__captionTextInner___rCGNH{position:relative}.LightBox-module__lightboxSplide___XFuWC.splide,.LightBox-module__lightboxSplide___XFuWC .splide__track{height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;z-index:1;transform:translate(-50%,-50%);padding:0;left:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);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)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{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%)}.LightBox-module__nextArrow___zkAQN{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%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{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%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{display:flex;align-items:center;justify-content:center;pointer-events:auto}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__closeButton___g2khP{all:unset;cursor:pointer;position:absolute;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)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}@keyframes LightBox-module__lbFadeOut___MhEeN{0%{opacity:1}to{opacity:0}}.LightBox-module__fadeOut___55qBR{animation-name:LightBox-module__lbFadeOut___MhEeN!important}@keyframes LightBox-module__lbSlideOutLeft___xM4sO{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes LightBox-module__lbSlideOutRight___Jppgj{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes LightBox-module__lbSlideOutTop___pvscE{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes LightBox-module__lbSlideOutBottom___oFjPG{0%{transform:translateY(0)}to{transform:translateY(100%)}}.LightBox-module__slideOutLeft___NvU7P{animation-name:LightBox-module__lbSlideOutLeft___xM4sO!important}.LightBox-module__slideOutRight___SK7eC{animation-name:LightBox-module__lbSlideOutRight___Jppgj!important}.LightBox-module__slideOutTop___Vgg0z{animation-name:LightBox-module__lbSlideOutTop___pvscE!important}.LightBox-module__slideOutBottom___nJ0Ef{animation-name:LightBox-module__lbSlideOutBottom___oFjPG!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(.9)!important;transition:opacity var(--splide-speed, .5s) ease,transform var(--splide-speed, .5s) ease!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide.is-active .LightBox-module__scaleSlide___vZriG{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide:not(.is-active) .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}

package/dist/index.js

@@ -6,6 +6,7 @@ const reactSplide = require("@splidejs/react-splide");
 const cn = require("classnames");
 const reactDom = require("react-dom");
 const wrapper = "ControlSlider-module__wrapper___sHEkd";
+const hoverArrow = "ControlSlider-module__hoverArrow___A-dOH";
 const sliderItem = "ControlSlider-module__sliderItem___QQSkR";
 const sliderImage = "ControlSlider-module__sliderImage___9hRl-";
 const arrow$1 = "ControlSlider-module__arrow___05ghY";
@@ -49,6 +50,7 @@ const contain$1 = "ControlSlider-module__contain___pLyq7";
 const cover$1 = "ControlSlider-module__cover___KdDat";
 const styles$3 = {
   wrapper,
+  hoverArrow,
   sliderItem,
   sliderImage,
   arrow: arrow$1,
@@ -316,7 +318,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             "div",
             {
               className: cn(styles$3.arrow, {
-                [styles$3.arrowVertical]: direction === "vert"
+                [styles$3.arrowVertical]: direction === "vert",
+                [styles$3.hoverArrow]: controls.show === "on hover"
               }),
               style: {
                 color: controls.color,
@@ -352,7 +355,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             "div",
             {
               className: cn(styles$3.arrow, styles$3.nextArrow, {
-                [styles$3.arrowVertical]: direction === "vert"
+                [styles$3.arrowVertical]: direction === "vert",
+                [styles$3.hoverArrow]: controls.show === "on hover"
               }),
               style: {
                 color: controls.color,
@@ -613,6 +617,14 @@ const ControlSliderComponent = {
                   type: "settings-color-picker",
                   format: "single"
                 }
+              },
+              show: {
+                title: "Show",
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["always", "on hover"]
               }
             }
           },
@@ -767,7 +779,8 @@ const ControlSliderComponent = {
             },
             scale: 100,
             color: "#000000",
-            hover: "#cccccc"
+            hover: "#cccccc",
+            show: "always"
           },
           transition: {
             type: "slide",
@@ -1087,85 +1100,14 @@ async function calculateImageWidthHeight(imgUrl, sizeType, customWidth, randomRa
   return { width, height, finalWidth: `${width}px` };
 }
 function ImageRevealSlider({ settings, content, isEditor }) {
-  const [divRef, setDivRef] = React.useState(null);
+  const divRef = React.useRef(null);
   const [placedImages, setPlacedImages] = React.useState([]);
   const [counter, setCounter] = React.useState(0);
   const imageIdCounter = React.useRef(0);
-  const defaultScale = 32;
-  const [cursorPos, setCursorPos] = React.useState({ x: -100, y: -100 });
-  const [cursorSize, setCursorSize] = React.useState({ w: 32, h: 32 });
-  const [customCursorImg, setCustomCursorImg] = React.useState("none");
-  const lastMousePos = React.useRef({ x: 0, y: 0 });
-  const [isInside, setIsInside] = React.useState(false);
-  React.useEffect(() => {
-    if (!divRef) return;
-    const updateCursorPosition = (clientX, clientY) => {
-      const rect = divRef.getBoundingClientRect();
-      setCursorPos({
-        x: clientX - cursorSize.w / 2 - rect.left,
-        y: clientY - cursorSize.h / 2 - rect.top
-      });
-    };
-    const mouseMove = (e) => {
-      e.stopPropagation();
-      lastMousePos.current = { x: e.clientX, y: e.clientY };
-      updateCursorPosition(e.clientX, e.clientY);
-    };
-    const handleScroll = () => {
-      if (!isInside) return;
-      updateCursorPosition(lastMousePos.current.x, lastMousePos.current.y);
-    };
-    divRef.addEventListener("mousemove", mouseMove);
-    window.addEventListener("scroll", handleScroll, true);
-    return () => {
-      divRef.removeEventListener("mousemove", mouseMove);
-      window.removeEventListener("scroll", handleScroll, true);
-    };
-  }, [divRef, cursorSize, isInside]);
-  React.useEffect(() => {
-    if (!isInside) {
-      setCustomCursorImg("none");
-      setCursorSize({ w: 0, h: 0 });
-    }
-  }, [isInside]);
+  const defaultImageCount = 1;
   const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
   const { revealPosition, visible, target } = settings.position;
-  const { cursorType, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
-  React.useEffect(() => {
-    const updateCursor = () => {
-      if (!divRef) return;
-      if (cursorType === "system") {
-        setCustomCursorImg("none");
-        setCursorSize({ w: defaultScale, h: defaultScale });
-        return;
-      }
-      const cx = cursorPos.x + cursorSize.w / 2;
-      const cy = cursorPos.y + cursorSize.h / 2;
-      const rect = divRef.getBoundingClientRect();
-      const el = document.elementFromPoint(
-        rect.left + cx,
-        rect.top + cy
-      );
-      if (el && el.closest("a")) {
-        setCustomCursorImg("none");
-        setCursorSize({ w: defaultScale, h: defaultScale });
-        return;
-      }
-      const next = isMouseOverImage(cx, cy, placedImages) || target === "area" ? { img: hoverCursor ?? "none", w: defaultScale * (hoverCursorScale || 1), h: defaultScale * (hoverCursorScale || 1) } : { img: defaultCursor ?? "none", w: defaultScale * (defaultCursorScale || 1), h: defaultScale * (defaultCursorScale || 1) };
-      setCustomCursorImg(next.img);
-      setCursorSize({ w: next.w, h: next.h });
-    };
-    updateCursor();
-  }, [
-    cursorPos,
-    cursorType,
-    target,
-    hoverCursor,
-    defaultCursor,
-    hoverCursorScale,
-    defaultCursorScale,
-    placedImages
-  ]);
+  const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
   const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
     const { width, height, finalWidth } = await calculateImageWidthHeight(
       imgData.image.url,
@@ -1194,34 +1136,34 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     };
   };
   const defaultContentUrls = React.useMemo(() => {
-    const defaultContentLength = Math.min(content.length, 1);
+    const defaultContentLength = Math.min(content.length, defaultImageCount);
     return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
   }, [content]);
   React.useEffect(() => {
-    if (!divRef || content.length === 0) return;
-    const rect = divRef.getBoundingClientRect();
+    if (!divRef.current || content.length === 0) return;
+    const rect = divRef.current.getBoundingClientRect();
     const containerWidth = rect.width;
     const containerHeight = rect.height;
     const defaultPlaced = [];
     const placeImages = async () => {
-      for (let i = 0; i < 1 && i < content.length; i++) {
+      for (let i = 0; i < defaultImageCount && i < content.length; i++) {
         const imgData = content[i];
         const newImg = await createNewImage(imgData, containerWidth, containerHeight);
         defaultPlaced.push(newImg);
       }
       setPlacedImages(defaultPlaced);
-      setCounter(1 % content.length);
+      setCounter(defaultImageCount % content.length);
     };
     placeImages();
-  }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
+  }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
   React.useEffect(() => {
     if (visible === "last One") {
       setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
     }
   }, [visible]);
   const handleClick = async (e) => {
-    if (!divRef) return;
-    const rect = divRef.getBoundingClientRect();
+    if (!divRef.current) return;
+    const rect = divRef.current.getBoundingClientRect();
     const clickX = e.clientX - rect.left;
     const clickY = e.clientY - rect.top;
     if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
@@ -1241,68 +1183,46 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
     setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref: setDivRef,
+      ref: divRef,
       onClick: handleClick,
-      onMouseEnter: () => setIsInside(true),
-      onMouseLeave: () => setIsInside(false),
       className: styles.imageRevealSlider,
-      style: { cursor: customCursorImg === "none" ? "default" : "none" },
-      children: [
-        placedImages.map((img2) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: styles.wrapper,
-            style: {
-              top: `${img2.y}px`,
-              left: `${img2.x}px`,
-              position: "absolute",
-              transform: "translate(-50%, -50%)",
-              width: img2.width ?? "auto",
-              height: "auto",
-              cursor: customCursorImg === "none" ? "default" : "none"
-            },
-            children: target === "area" && img2.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: img2.url,
-                alt: img2.name,
-                className: styles.image
-              },
-              img2.id
-            ) }) : /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: img2.url,
-                alt: img2.name,
-                className: styles.image
-              },
-              img2.id
-            )
+      style: { cursor: cursorType !== "system" && defaultCursor ? `url(${target === "area" ? hoverCursor : defaultCursor}), auto` : "default" },
+      children: placedImages.map((img2) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: styles.wrapper,
+          style: {
+            top: `${img2.y}px`,
+            left: `${img2.x}px`,
+            position: "absolute",
+            transform: "translate(-50%, -50%)",
+            width: img2.width ?? "auto",
+            height: "auto",
+            cursor: cursorType !== "system" && hoverCursor ? `url(${hoverCursor}), auto` : "default"
           },
-          img2.id
-        )),
-        isInside && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "cursor",
-            style: {
-              transform: `translate(${cursorPos.x}px, ${cursorPos.y}px)`,
-              width: cursorSize.w,
-              height: cursorSize.h,
-              backgroundImage: `url('${customCursorImg}')`,
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-              position: "absolute",
-              top: 0,
-              left: 0,
-              pointerEvents: "none"
-            }
-          }
-        )
-      ]
+          children: target === "area" && img2.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: img2.url,
+              alt: img2.name,
+              className: styles.image
+            },
+            img2.id
+          ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: img2.url,
+              alt: img2.name,
+              className: styles.image
+            },
+            img2.id
+          )
+        },
+        img2.id
+      ))
     }
   );
 }
@@ -1387,17 +1307,6 @@ const ControlImageRevealSliderComponent = {
                   visible: false
                 }
               },
-              defaultCursorScale: {
-                type: "number",
-                title: "Scale",
-                min: 1,
-                max: 5,
-                step: 0.1,
-                display: {
-                  type: "range-control",
-                  visible: false
-                }
-              },
               hoverCursor: {
                 type: ["string", "null"],
                 title: "Hover",
@@ -1405,17 +1314,6 @@ const ControlImageRevealSliderComponent = {
                   type: "settings-image-input",
                   visible: false
                 }
-              },
-              hoverCursorScale: {
-                type: "number",
-                title: "Scale",
-                min: 1,
-                max: 5,
-                step: 0.1,
-                display: {
-                  type: "range-control",
-                  visible: false
-                }
               }
             }
           },
@@ -1461,9 +1359,7 @@ const ControlImageRevealSliderComponent = {
           cursor: {
             cursorType: "system",
             defaultCursor: null,
-            defaultCursorScale: 2,
-            hoverCursor: null,
-            hoverCursorScale: 2
+            hoverCursor: null
           },
           position: {
             revealPosition: "random",
@@ -1502,17 +1398,6 @@ const ControlImageRevealSliderComponent = {
               value: true
             }
           },
-          {
-            if: [
-              { name: "position.target", value: "image" },
-              { name: "cursor.cursorType", value: "custom" },
-              { name: "cursor.defaultCursor", value: null, isNotEqual: true }
-            ],
-            then: {
-              name: "properties.cursor.properties.defaultCursorScale.display.visible",
-              value: true
-            }
-          },
           {
             if: {
               name: "cursor.cursorType",
@@ -1522,16 +1407,6 @@ const ControlImageRevealSliderComponent = {
               name: "properties.cursor.properties.hoverCursor.display.visible",
               value: true
             }
-          },
-          {
-            if: [
-              { name: "cursor.cursorType", value: "custom" },
-              { name: "cursor.hoverCursor", value: null, isNotEqual: true }
-            ],
-            then: {
-              name: "properties.cursor.properties.hoverCursorScale.display.visible",
-              value: true
-            }
           }
         ]
       },

package/dist/index.mjs

@@ -4,6 +4,7 @@ import { Splide, SplideSlide } from "@splidejs/react-splide";
 import cn from "classnames";
 import { createPortal } from "react-dom";
 const wrapper = "ControlSlider-module__wrapper___sHEkd";
+const hoverArrow = "ControlSlider-module__hoverArrow___A-dOH";
 const sliderItem = "ControlSlider-module__sliderItem___QQSkR";
 const sliderImage = "ControlSlider-module__sliderImage___9hRl-";
 const arrow$1 = "ControlSlider-module__arrow___05ghY";
@@ -47,6 +48,7 @@ const contain$1 = "ControlSlider-module__contain___pLyq7";
 const cover$1 = "ControlSlider-module__cover___KdDat";
 const styles$3 = {
   wrapper,
+  hoverArrow,
   sliderItem,
   sliderImage,
   arrow: arrow$1,
@@ -314,7 +316,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             "div",
             {
               className: cn(styles$3.arrow, {
-                [styles$3.arrowVertical]: direction === "vert"
+                [styles$3.arrowVertical]: direction === "vert",
+                [styles$3.hoverArrow]: controls.show === "on hover"
               }),
               style: {
                 color: controls.color,
@@ -350,7 +353,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
             "div",
             {
               className: cn(styles$3.arrow, styles$3.nextArrow, {
-                [styles$3.arrowVertical]: direction === "vert"
+                [styles$3.arrowVertical]: direction === "vert",
+                [styles$3.hoverArrow]: controls.show === "on hover"
               }),
               style: {
                 color: controls.color,
@@ -611,6 +615,14 @@ const ControlSliderComponent = {
                   type: "settings-color-picker",
                   format: "single"
                 }
+              },
+              show: {
+                title: "Show",
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["always", "on hover"]
               }
             }
           },
@@ -765,7 +777,8 @@ const ControlSliderComponent = {
             },
             scale: 100,
             color: "#000000",
-            hover: "#cccccc"
+            hover: "#cccccc",
+            show: "always"
           },
           transition: {
             type: "slide",
@@ -1085,85 +1098,14 @@ async function calculateImageWidthHeight(imgUrl, sizeType, customWidth, randomRa
   return { width, height, finalWidth: `${width}px` };
 }
 function ImageRevealSlider({ settings, content, isEditor }) {
-  const [divRef, setDivRef] = useState(null);
+  const divRef = useRef(null);
   const [placedImages, setPlacedImages] = useState([]);
   const [counter, setCounter] = useState(0);
   const imageIdCounter = useRef(0);
-  const defaultScale = 32;
-  const [cursorPos, setCursorPos] = useState({ x: -100, y: -100 });
-  const [cursorSize, setCursorSize] = useState({ w: 32, h: 32 });
-  const [customCursorImg, setCustomCursorImg] = useState("none");
-  const lastMousePos = useRef({ x: 0, y: 0 });
-  const [isInside, setIsInside] = useState(false);
-  useEffect(() => {
-    if (!divRef) return;
-    const updateCursorPosition = (clientX, clientY) => {
-      const rect = divRef.getBoundingClientRect();
-      setCursorPos({
-        x: clientX - cursorSize.w / 2 - rect.left,
-        y: clientY - cursorSize.h / 2 - rect.top
-      });
-    };
-    const mouseMove = (e) => {
-      e.stopPropagation();
-      lastMousePos.current = { x: e.clientX, y: e.clientY };
-      updateCursorPosition(e.clientX, e.clientY);
-    };
-    const handleScroll = () => {
-      if (!isInside) return;
-      updateCursorPosition(lastMousePos.current.x, lastMousePos.current.y);
-    };
-    divRef.addEventListener("mousemove", mouseMove);
-    window.addEventListener("scroll", handleScroll, true);
-    return () => {
-      divRef.removeEventListener("mousemove", mouseMove);
-      window.removeEventListener("scroll", handleScroll, true);
-    };
-  }, [divRef, cursorSize, isInside]);
-  useEffect(() => {
-    if (!isInside) {
-      setCustomCursorImg("none");
-      setCursorSize({ w: 0, h: 0 });
-    }
-  }, [isInside]);
+  const defaultImageCount = 1;
   const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
   const { revealPosition, visible, target } = settings.position;
-  const { cursorType, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
-  useEffect(() => {
-    const updateCursor = () => {
-      if (!divRef) return;
-      if (cursorType === "system") {
-        setCustomCursorImg("none");
-        setCursorSize({ w: defaultScale, h: defaultScale });
-        return;
-      }
-      const cx = cursorPos.x + cursorSize.w / 2;
-      const cy = cursorPos.y + cursorSize.h / 2;
-      const rect = divRef.getBoundingClientRect();
-      const el = document.elementFromPoint(
-        rect.left + cx,
-        rect.top + cy
-      );
-      if (el && el.closest("a")) {
-        setCustomCursorImg("none");
-        setCursorSize({ w: defaultScale, h: defaultScale });
-        return;
-      }
-      const next = isMouseOverImage(cx, cy, placedImages) || target === "area" ? { img: hoverCursor ?? "none", w: defaultScale * (hoverCursorScale || 1), h: defaultScale * (hoverCursorScale || 1) } : { img: defaultCursor ?? "none", w: defaultScale * (defaultCursorScale || 1), h: defaultScale * (defaultCursorScale || 1) };
-      setCustomCursorImg(next.img);
-      setCursorSize({ w: next.w, h: next.h });
-    };
-    updateCursor();
-  }, [
-    cursorPos,
-    cursorType,
-    target,
-    hoverCursor,
-    defaultCursor,
-    hoverCursorScale,
-    defaultCursorScale,
-    placedImages
-  ]);
+  const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
   const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
     const { width, height, finalWidth } = await calculateImageWidthHeight(
       imgData.image.url,
@@ -1192,34 +1134,34 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     };
   };
   const defaultContentUrls = useMemo(() => {
-    const defaultContentLength = Math.min(content.length, 1);
+    const defaultContentLength = Math.min(content.length, defaultImageCount);
     return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
   }, [content]);
   useEffect(() => {
-    if (!divRef || content.length === 0) return;
-    const rect = divRef.getBoundingClientRect();
+    if (!divRef.current || content.length === 0) return;
+    const rect = divRef.current.getBoundingClientRect();
     const containerWidth = rect.width;
     const containerHeight = rect.height;
     const defaultPlaced = [];
     const placeImages = async () => {
-      for (let i = 0; i < 1 && i < content.length; i++) {
+      for (let i = 0; i < defaultImageCount && i < content.length; i++) {
         const imgData = content[i];
         const newImg = await createNewImage(imgData, containerWidth, containerHeight);
         defaultPlaced.push(newImg);
       }
       setPlacedImages(defaultPlaced);
-      setCounter(1 % content.length);
+      setCounter(defaultImageCount % content.length);
     };
     placeImages();
-  }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
+  }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
   useEffect(() => {
     if (visible === "last One") {
       setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
     }
   }, [visible]);
   const handleClick = async (e) => {
-    if (!divRef) return;
-    const rect = divRef.getBoundingClientRect();
+    if (!divRef.current) return;
+    const rect = divRef.current.getBoundingClientRect();
     const clickX = e.clientX - rect.left;
     const clickY = e.clientY - rect.top;
     if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
@@ -1239,68 +1181,46 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
     setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref: setDivRef,
+      ref: divRef,
       onClick: handleClick,
-      onMouseEnter: () => setIsInside(true),
-      onMouseLeave: () => setIsInside(false),
       className: styles.imageRevealSlider,
-      style: { cursor: customCursorImg === "none" ? "default" : "none" },
-      children: [
-        placedImages.map((img2) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: styles.wrapper,
-            style: {
-              top: `${img2.y}px`,
-              left: `${img2.x}px`,
-              position: "absolute",
-              transform: "translate(-50%, -50%)",
-              width: img2.width ?? "auto",
-              height: "auto",
-              cursor: customCursorImg === "none" ? "default" : "none"
-            },
-            children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: img2.url,
-                alt: img2.name,
-                className: styles.image
-              },
-              img2.id
-            ) }) : /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: img2.url,
-                alt: img2.name,
-                className: styles.image
-              },
-              img2.id
-            )
+      style: { cursor: cursorType !== "system" && defaultCursor ? `url(${target === "area" ? hoverCursor : defaultCursor}), auto` : "default" },
+      children: placedImages.map((img2) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.wrapper,
+          style: {
+            top: `${img2.y}px`,
+            left: `${img2.x}px`,
+            position: "absolute",
+            transform: "translate(-50%, -50%)",
+            width: img2.width ?? "auto",
+            height: "auto",
+            cursor: cursorType !== "system" && hoverCursor ? `url(${hoverCursor}), auto` : "default"
           },
-          img2.id
-        )),
-        isInside && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "cursor",
-            style: {
-              transform: `translate(${cursorPos.x}px, ${cursorPos.y}px)`,
-              width: cursorSize.w,
-              height: cursorSize.h,
-              backgroundImage: `url('${customCursorImg}')`,
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-              position: "absolute",
-              top: 0,
-              left: 0,
-              pointerEvents: "none"
-            }
-          }
-        )
-      ]
+          children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: img2.url,
+              alt: img2.name,
+              className: styles.image
+            },
+            img2.id
+          ) }) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: img2.url,
+              alt: img2.name,
+              className: styles.image
+            },
+            img2.id
+          )
+        },
+        img2.id
+      ))
     }
   );
 }
@@ -1385,17 +1305,6 @@ const ControlImageRevealSliderComponent = {
                   visible: false
                 }
               },
-              defaultCursorScale: {
-                type: "number",
-                title: "Scale",
-                min: 1,
-                max: 5,
-                step: 0.1,
-                display: {
-                  type: "range-control",
-                  visible: false
-                }
-              },
               hoverCursor: {
                 type: ["string", "null"],
                 title: "Hover",
@@ -1403,17 +1312,6 @@ const ControlImageRevealSliderComponent = {
                   type: "settings-image-input",
                   visible: false
                 }
-              },
-              hoverCursorScale: {
-                type: "number",
-                title: "Scale",
-                min: 1,
-                max: 5,
-                step: 0.1,
-                display: {
-                  type: "range-control",
-                  visible: false
-                }
               }
             }
           },
@@ -1459,9 +1357,7 @@ const ControlImageRevealSliderComponent = {
           cursor: {
             cursorType: "system",
             defaultCursor: null,
-            defaultCursorScale: 2,
-            hoverCursor: null,
-            hoverCursorScale: 2
+            hoverCursor: null
           },
           position: {
             revealPosition: "random",
@@ -1500,17 +1396,6 @@ const ControlImageRevealSliderComponent = {
               value: true
             }
           },
-          {
-            if: [
-              { name: "position.target", value: "image" },
-              { name: "cursor.cursorType", value: "custom" },
-              { name: "cursor.defaultCursor", value: null, isNotEqual: true }
-            ],
-            then: {
-              name: "properties.cursor.properties.defaultCursorScale.display.visible",
-              value: true
-            }
-          },
           {
             if: {
               name: "cursor.cursorType",
@@ -1520,16 +1405,6 @@ const ControlImageRevealSliderComponent = {
               name: "properties.cursor.properties.hoverCursor.display.visible",
               value: true
             }
-          },
-          {
-            if: [
-              { name: "cursor.cursorType", value: "custom" },
-              { name: "cursor.hoverCursor", value: null, isNotEqual: true }
-            ],
-            then: {
-              name: "properties.cursor.properties.hoverCursorScale.display.visible",
-              value: true
-            }
           }
         ]
       },

package/dist/types/Component.d.ts

@@ -4,8 +4,8 @@ export type Component = {
     id: string;
     name: string;
     defaultSize?: {
-        width?: string | number;
-        height?: string | number;
+        width?: number | string;
+        height?: number | string;
     };
     schema: any;
     preview?: {

package/package.json

@@ -1,68 +1,68 @@
-{
-  "name": "@cntrl-site/components",
-  "version": "0.1.6-20",
-  "description": "Custom components for control editor and public websites.",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "style": "dist/components.css",
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./style/components.css": {
-      "default": "./dist/components.css"
-    }
-  },
-  "scripts": {
-    "test": "jest",
-    "dev": "vite development",
-    "prebuild": "rimraf ./dist",
-    "build": "vite build",
-    "prepublishOnly": "cross-env NODE_ENV=production npm run build"
-  },
-  "files": [
-    "dist",
-    "resources"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cntrl-site/components.git"
-  },
-  "author": "arsen@momdesign.nyc",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/cntrl-site/components/issues"
-  },
-  "homepage": "https://github.com/cntrl-site/components#readme",
-  "directories": {
-    "lib": "dist"
-  },
-  "dependencies": {
-    "@antfu/eslint-config": "^3.16.0",
-    "@splidejs/react-splide": "^0.7.12",
-    "classnames": "^2.5.1",
-    "ts-node": "^10.9.1"
-  },
-  "devDependencies": {
-    "@tsconfig/node16": "^1.0.3",
-    "@tsconfig/recommended": "^1.0.1",
-    "@types/node": "^18.11.7",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "cross-env": "^10.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rimraf": "^6.0.1",
-    "sass": "^1.86.3",
-    "typescript": "^5.2.2",
-    "vite": "^6.2.5",
-    "vite-plugin-dts": "^4.5.3"
-  }
-}
+{
+  "name": "@cntrl-site/components",
+  "version": "0.1.7-1",
+  "description": "Custom components for control editor and public websites.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "style": "dist/components.css",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./style/components.css": {
+      "default": "./dist/components.css"
+    }
+  },
+  "scripts": {
+    "test": "jest",
+    "dev": "vite development",
+    "prebuild": "rimraf ./dist",
+    "build": "vite build",
+    "prepublishOnly": "cross-env NODE_ENV=production npm run build"
+  },
+  "files": [
+    "dist",
+    "resources"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cntrl-site/components.git"
+  },
+  "author": "arsen@momdesign.nyc",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cntrl-site/components/issues"
+  },
+  "homepage": "https://github.com/cntrl-site/components#readme",
+  "directories": {
+    "lib": "dist"
+  },
+  "dependencies": {
+    "@antfu/eslint-config": "^3.16.0",
+    "@splidejs/react-splide": "^0.7.12",
+    "classnames": "^2.5.1",
+    "ts-node": "^10.9.1"
+  },
+  "devDependencies": {
+    "@tsconfig/node16": "^1.0.3",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cross-env": "^10.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^6.0.1",
+    "sass": "^1.86.3",
+    "typescript": "^5.2.2",
+    "vite": "^6.2.5",
+    "vite-plugin-dts": "^4.5.3"
+  }
+}