@cntrl-site/components 0.1.0-13 → 0.1.0-15

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

@@ -17,10 +17,10 @@ export declare const ControlSliderComponent: {
             settings: {
                 layoutBased: boolean;
                 type: string;
+                display: {
+                    type: string;
+                };
                 properties: {
-                    display: {
-                        type: string;
-                    };
                     triggers: {
                         title: string;
                         icon: string;

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

@@ -17,10 +17,10 @@ export declare const ControlImageRevealSliderComponent: {
             settings: {
                 layoutBased: boolean;
                 type: string;
+                display: {
+                    type: string;
+                };
                 properties: {
-                    display: {
-                        type: string;
-                    };
                     imageSize: {
                         title: string;
                         icon: string;

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

@@ -40,7 +40,7 @@ type Padding = {
     left: number;
 };
 type Triggers = {
-    type: 'click' | 'drag' | 'scroll';
+    type: 'click' | 'drag';
     switch: 'image' | '50/50';
     duration: string;
 };
@@ -66,10 +66,11 @@ type LightboxSettings = {
             isActive: boolean;
             position: Alignment;
             fit: 'cover' | 'fit';
-            align: 'top' | 'center' | 'bottom';
+            align: 'start' | 'center' | 'end';
             triggers: 'click' | 'hover';
             grid: {
                 height: number;
+                width: number;
                 gap: number;
             };
             offset: Offset;

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}.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__backdropStyle___yWDe2{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9999}.LightBox-module__contentStyle___Bgnsq{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__stageStyle___7C4KB{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden}.LightBox-module__imageStyle___tLIlB{display:block;cursor:pointer;background-color:transparent}.LightBox-module__sliderItem___iFlJ9{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.LightBox-module__imgWrapper___LuFUp{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden}.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;max-width:100%;max-height:100%}.LightBox-module__caption___b6L2I{position:absolute;display:flex}.LightBox-module__contentStyle___Bgnsq .splide,.LightBox-module__contentStyle___Bgnsq .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%;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)}.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__counterStyle___JFgB3{bottom:calc(var(--is-editor, 0) * .8333333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .8333333333vw);right:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);font-size:calc(var(--is-editor, 0) * .9722222222vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .9722222222vw);position:absolute;color:#fff;opacity:.85}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column}.LightBox-module__thumbsContainer___osSma{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;padding:0 12px;pointer-events:auto;bottom:calc(var(--is-editor, 0) * .8333333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .8333333333vw)}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;background:#00000026;transition:transform .1s ease,opacity .1s ease,box-shadow .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__thumbImage___OJ19m{display:block;height:100%;width:calc(var(--is-editor, 0) * 5.5555555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 5.5555555556vw)}@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}.splide--fade .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:scale(.8)!important;transition:opacity var(--splide-speed, .5s) ease,transform var(--splide-speed, .5s) ease!important}.splide--fade .splide__slide.is-active .LightBox-module__scaleSlide___vZriG{opacity:1!important;transform:scale(1)!important}.splide--fade .splide__slide:not(.is-active) .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:scale(1.2)!important}.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}@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__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}
+.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}.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__backdropStyle___yWDe2{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9999}.LightBox-module__contentStyle___Bgnsq{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__stageStyle___7C4KB{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden}.LightBox-module__imageStyle___tLIlB{display:block;cursor:pointer;background-color:transparent}.LightBox-module__sliderItem___iFlJ9{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.LightBox-module__imgWrapper___LuFUp{display:flex;justify-content:center;width:100%;height:100%;overflow:hidden}.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;max-width:100%;max-height:100%}.LightBox-module__caption___b6L2I{position:absolute;display:flex}.LightBox-module__contentStyle___Bgnsq .splide,.LightBox-module__contentStyle___Bgnsq .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%;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)}.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__counterStyle___JFgB3{bottom:calc(var(--is-editor, 0) * .8333333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .8333333333vw);right:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);font-size:calc(var(--is-editor, 0) * .9722222222vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .9722222222vw);position:absolute;color:#fff;opacity:.85}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{position:absolute;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__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignStart___MO6tY{align-items:center;justify-content:flex-start}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center;justify-content:center}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignEnd___p4y9R{align-items:center;justify-content: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__thumbImage___OJ19m{display:block;height:100%;width:calc(var(--is-editor, 0) * 5.5555555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 5.5555555556vw)}@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}.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}@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__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}

package/dist/index.js

@@ -469,10 +469,10 @@ const ControlSliderComponent = {
       settings: {
         layoutBased: true,
         type: "object",
+        display: {
+          type: "settings-block"
+        },
         properties: {
-          display: {
-            type: "settings-block"
-          },
           triggers: {
             title: "triggers",
             icon: "target",
@@ -1193,10 +1193,10 @@ const ControlImageRevealSliderComponent = {
       settings: {
         layoutBased: true,
         type: "object",
+        display: {
+          type: "settings-block"
+        },
         properties: {
-          display: {
-            type: "settings-block"
-          },
           imageSize: {
             title: "IMG SIZE",
             icon: "size",
@@ -1456,7 +1456,11 @@ const nextArrow = "LightBox-module__nextArrow___zkAQN";
 const arrowInner = "LightBox-module__arrowInner___p48sW";
 const arrowImg = "LightBox-module__arrowImg___pNV88";
 const mirror = "LightBox-module__mirror___pjeXc";
+const thumbsContainerVertical = "LightBox-module__thumbsContainerVertical___wttk5";
 const thumbsContainer = "LightBox-module__thumbsContainer___osSma";
+const thumbsAlignStart = "LightBox-module__thumbsAlignStart___MO6tY";
+const thumbsAlignCenter = "LightBox-module__thumbsAlignCenter___Q4sUx";
+const thumbsAlignEnd = "LightBox-module__thumbsAlignEnd___p4y9R";
 const thumbItem = "LightBox-module__thumbItem___HvnF3";
 const thumbImage = "LightBox-module__thumbImage___OJ19m";
 const fadeIn = "LightBox-module__fadeIn___0m5GW";
@@ -1464,7 +1468,6 @@ const slideInLeft = "LightBox-module__slideInLeft___gPYwC";
 const slideInRight = "LightBox-module__slideInRight___S-pPp";
 const slideInTop = "LightBox-module__slideInTop___DFdAj";
 const slideInBottom = "LightBox-module__slideInBottom___m27kZ";
-const scaleSlide = "LightBox-module__scaleSlide___vZriG";
 const styles = {
   backdropStyle,
   contentStyle,
@@ -1479,19 +1482,22 @@ const styles = {
   arrowInner,
   arrowImg,
   mirror,
+  thumbsContainerVertical,
   thumbsContainer,
+  thumbsAlignStart,
+  thumbsAlignCenter,
+  thumbsAlignEnd,
   thumbItem,
   thumbImage,
   fadeIn,
   slideInLeft,
   slideInRight,
   slideInTop,
-  slideInBottom,
-  scaleSlide
+  slideInBottom
 };
 function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent }) {
   const [open, setOpen] = React.useState(false);
-  const { url: coverUrl } = settings.thumbnailBlock.cover;
+  const { url } = settings.thumbnailBlock.cover;
   React.useEffect(() => {
     if (activeEvent === "close") {
       setOpen(false);
@@ -1504,9 +1510,9 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
     /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
-        src: coverUrl,
+        src: url,
         alt: "Cover",
-        style: { width: "100%", height: "100%", cursor: "pointer" },
+        style: { width: "100%", height: "100%", cursor: "pointer", objectFit: "cover" },
         onClick: () => setOpen(true)
       }
     ),
@@ -1598,6 +1604,38 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     }
     return styles.fadeIn;
   })();
+  const getThumbnailPositionStyles = (position, offset) => {
+    const styles2 = {};
+    const [vertical, horizontal] = position.split("-");
+    if (vertical === "top") {
+      styles2.top = `${offset.y}px`;
+      styles2.bottom = "auto";
+    } else if (vertical === "middle") {
+      styles2.top = "50%";
+      styles2.bottom = "auto";
+    } else if (vertical === "bottom") {
+      styles2.top = "auto";
+      styles2.bottom = `${offset.y}px`;
+    }
+    if (horizontal === "left") {
+      styles2.left = `${offset.x}px`;
+      styles2.right = "auto";
+    } else if (horizontal === "center") {
+      styles2.left = "50%";
+      styles2.right = "auto";
+    } else if (horizontal === "right") {
+      styles2.left = "auto";
+      styles2.right = `${offset.x}px`;
+    }
+    if (vertical === "middle" && horizontal === "center") {
+      styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
+    } else if (vertical === "middle") {
+      styles2.transform = `translateY(calc(-50% + ${offset.y}px))`;
+    } else if (horizontal === "center") {
+      styles2.transform = `translateX(calc(-50% + ${offset.x}px))`;
+    }
+    return styles2;
+  };
   if (!isOpen) return null;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1614,7 +1652,8 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
               padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`,
               animationDuration: `${appearDurationMs}ms`,
               animationTimingFunction: "ease",
-              animationFillMode: "both"
+              animationFillMode: "both",
+              "--splide-speed": triggers.duration || "500ms"
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1635,7 +1674,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                     height: "100%",
                     type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
                     padding: 0,
-                    rewind: false
+                    rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
                   },
                   style: {
                     "--splide-speed": triggers.duration || "500ms"
@@ -1719,10 +1758,20 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
               thumbnail.isActive && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: cn(styles.thumbsContainer),
+                  className: cn(
+                    styles.thumbsContainer,
+                    {
+                      [styles.thumbsContainerVertical]: slider.direction === "vert",
+                      [styles.thumbsAlignStart]: thumbnail.align === "start",
+                      [styles.thumbsAlignCenter]: thumbnail.align === "center",
+                      [styles.thumbsAlignEnd]: thumbnail.align === "end"
+                    }
+                  ),
                   style: {
                     gap: `${thumbnail.grid.gap}px`,
-                    height: `${thumbnail.grid.height}px`
+                    ...slider.direction === "horiz" ? { height: `${thumbnail.grid.height}px` } : {},
+                    ...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
+                    ...getThumbnailPositionStyles(thumbnail.position, thumbnail.offset)
                   },
                   children: content.map((item, index) => {
                     const isActive = index === currentIndex;
@@ -1732,7 +1781,8 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                         className: styles.thumbItem,
                         style: {
                           transform: `scale(${isActive ? thumbnail.activeState.scale : 1})`,
-                          height: "100%",
+                          ...slider.direction === "horiz" ? { height: "100%" } : {},
+                          ...slider.direction === "vert" ? { width: "100%" } : {},
                           opacity: isActive ? thumbnail.activeState.opacity : thumbnail.opacity,
                           ["--thumb-hover"]: thumbnail.activeState.opacity
                         },
@@ -1748,7 +1798,11 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                             src: item.image.url,
                             alt: item.image.name ?? "",
                             className: styles.thumbImage,
-                            style: { objectFit: thumbnail.fit === "cover" ? "cover" : "contain" }
+                            style: {
+                              objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
+                              ...slider.direction === "horiz" ? { height: "100%" } : {},
+                              ...slider.direction === "vert" ? { width: "100%" } : {}
+                            }
                           }
                         )
                       },
@@ -1865,7 +1919,7 @@ const LightboxComponent = {
                     display: {
                       type: "ratio-group"
                     },
-                    enum: ["click", "drag", "scroll"]
+                    enum: ["click", "drag"]
                   },
                   switch: {
                     type: "string",
@@ -1964,6 +2018,14 @@ const LightboxComponent = {
                           type: "numeric-input"
                         }
                       },
+                      width: {
+                        type: "number",
+                        label: "W",
+                        display: {
+                          type: "numeric-input",
+                          visible: false
+                        }
+                      },
                       gap: {
                         type: "number",
                         label: "Gap",
@@ -2008,9 +2070,9 @@ const LightboxComponent = {
                       scale: {
                         type: "number",
                         title: "Scale",
-                        min: 1,
-                        max: 2,
-                        step: 0.1,
+                        min: 0,
+                        max: 100,
+                        step: 1,
                         display: {
                           type: "range-control"
                         }
@@ -2116,7 +2178,7 @@ const LightboxComponent = {
                     type: "number",
                     title: "Scale",
                     min: 0,
-                    max: 1,
+                    max: 100,
                     display: {
                       type: "range-control"
                     }
@@ -2257,7 +2319,7 @@ const LightboxComponent = {
               position: "bottom-center",
               fit: "cover",
               align: "center",
-              triggers: "click",
+              triggers: "clk",
               grid: {
                 height: 60,
                 gap: 8
@@ -2265,7 +2327,7 @@ const LightboxComponent = {
               offset: { x: 0, y: 0 },
               opacity: 100,
               activeState: {
-                scale: 1,
+                scale: 100,
                 opacity: 100
               }
             },
@@ -2278,7 +2340,7 @@ const LightboxComponent = {
               isActive: true,
               arrowsImgUrl: null,
               offset: { x: 0, y: 0 },
-              scale: 1,
+              scale: 100,
               color: "#000000",
               hover: "#cccccc"
             },
@@ -2336,6 +2398,26 @@ const LightboxComponent = {
               name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
               value: false
             }
+          },
+          {
+            if: {
+              name: "slider.direction",
+              value: "vert"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "slider.direction",
+              value: "vert"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
+              value: false
+            }
           }
         ]
       },

package/dist/index.mjs

@@ -467,10 +467,10 @@ const ControlSliderComponent = {
       settings: {
         layoutBased: true,
         type: "object",
+        display: {
+          type: "settings-block"
+        },
         properties: {
-          display: {
-            type: "settings-block"
-          },
           triggers: {
             title: "triggers",
             icon: "target",
@@ -1191,10 +1191,10 @@ const ControlImageRevealSliderComponent = {
       settings: {
         layoutBased: true,
         type: "object",
+        display: {
+          type: "settings-block"
+        },
         properties: {
-          display: {
-            type: "settings-block"
-          },
           imageSize: {
             title: "IMG SIZE",
             icon: "size",
@@ -1454,7 +1454,11 @@ const nextArrow = "LightBox-module__nextArrow___zkAQN";
 const arrowInner = "LightBox-module__arrowInner___p48sW";
 const arrowImg = "LightBox-module__arrowImg___pNV88";
 const mirror = "LightBox-module__mirror___pjeXc";
+const thumbsContainerVertical = "LightBox-module__thumbsContainerVertical___wttk5";
 const thumbsContainer = "LightBox-module__thumbsContainer___osSma";
+const thumbsAlignStart = "LightBox-module__thumbsAlignStart___MO6tY";
+const thumbsAlignCenter = "LightBox-module__thumbsAlignCenter___Q4sUx";
+const thumbsAlignEnd = "LightBox-module__thumbsAlignEnd___p4y9R";
 const thumbItem = "LightBox-module__thumbItem___HvnF3";
 const thumbImage = "LightBox-module__thumbImage___OJ19m";
 const fadeIn = "LightBox-module__fadeIn___0m5GW";
@@ -1462,7 +1466,6 @@ const slideInLeft = "LightBox-module__slideInLeft___gPYwC";
 const slideInRight = "LightBox-module__slideInRight___S-pPp";
 const slideInTop = "LightBox-module__slideInTop___DFdAj";
 const slideInBottom = "LightBox-module__slideInBottom___m27kZ";
-const scaleSlide = "LightBox-module__scaleSlide___vZriG";
 const styles = {
   backdropStyle,
   contentStyle,
@@ -1477,19 +1480,22 @@ const styles = {
   arrowInner,
   arrowImg,
   mirror,
+  thumbsContainerVertical,
   thumbsContainer,
+  thumbsAlignStart,
+  thumbsAlignCenter,
+  thumbsAlignEnd,
   thumbItem,
   thumbImage,
   fadeIn,
   slideInLeft,
   slideInRight,
   slideInTop,
-  slideInBottom,
-  scaleSlide
+  slideInBottom
 };
 function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent }) {
   const [open, setOpen] = React.useState(false);
-  const { url: coverUrl } = settings.thumbnailBlock.cover;
+  const { url } = settings.thumbnailBlock.cover;
   useEffect(() => {
     if (activeEvent === "close") {
       setOpen(false);
@@ -1502,9 +1508,9 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
     /* @__PURE__ */ jsx(
       "img",
       {
-        src: coverUrl,
+        src: url,
         alt: "Cover",
-        style: { width: "100%", height: "100%", cursor: "pointer" },
+        style: { width: "100%", height: "100%", cursor: "pointer", objectFit: "cover" },
         onClick: () => setOpen(true)
       }
     ),
@@ -1596,6 +1602,38 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     }
     return styles.fadeIn;
   })();
+  const getThumbnailPositionStyles = (position, offset) => {
+    const styles2 = {};
+    const [vertical, horizontal] = position.split("-");
+    if (vertical === "top") {
+      styles2.top = `${offset.y}px`;
+      styles2.bottom = "auto";
+    } else if (vertical === "middle") {
+      styles2.top = "50%";
+      styles2.bottom = "auto";
+    } else if (vertical === "bottom") {
+      styles2.top = "auto";
+      styles2.bottom = `${offset.y}px`;
+    }
+    if (horizontal === "left") {
+      styles2.left = `${offset.x}px`;
+      styles2.right = "auto";
+    } else if (horizontal === "center") {
+      styles2.left = "50%";
+      styles2.right = "auto";
+    } else if (horizontal === "right") {
+      styles2.left = "auto";
+      styles2.right = `${offset.x}px`;
+    }
+    if (vertical === "middle" && horizontal === "center") {
+      styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
+    } else if (vertical === "middle") {
+      styles2.transform = `translateY(calc(-50% + ${offset.y}px))`;
+    } else if (horizontal === "center") {
+      styles2.transform = `translateX(calc(-50% + ${offset.x}px))`;
+    }
+    return styles2;
+  };
   if (!isOpen) return null;
   return createPortal(
     /* @__PURE__ */ jsx(
@@ -1612,7 +1650,8 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
               padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`,
               animationDuration: `${appearDurationMs}ms`,
               animationTimingFunction: "ease",
-              animationFillMode: "both"
+              animationFillMode: "both",
+              "--splide-speed": triggers.duration || "500ms"
             },
             children: [
               /* @__PURE__ */ jsx(
@@ -1633,7 +1672,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                     height: "100%",
                     type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
                     padding: 0,
-                    rewind: false
+                    rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
                   },
                   style: {
                     "--splide-speed": triggers.duration || "500ms"
@@ -1717,10 +1756,20 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
               thumbnail.isActive && /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn(styles.thumbsContainer),
+                  className: cn(
+                    styles.thumbsContainer,
+                    {
+                      [styles.thumbsContainerVertical]: slider.direction === "vert",
+                      [styles.thumbsAlignStart]: thumbnail.align === "start",
+                      [styles.thumbsAlignCenter]: thumbnail.align === "center",
+                      [styles.thumbsAlignEnd]: thumbnail.align === "end"
+                    }
+                  ),
                   style: {
                     gap: `${thumbnail.grid.gap}px`,
-                    height: `${thumbnail.grid.height}px`
+                    ...slider.direction === "horiz" ? { height: `${thumbnail.grid.height}px` } : {},
+                    ...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
+                    ...getThumbnailPositionStyles(thumbnail.position, thumbnail.offset)
                   },
                   children: content.map((item, index) => {
                     const isActive = index === currentIndex;
@@ -1730,7 +1779,8 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                         className: styles.thumbItem,
                         style: {
                           transform: `scale(${isActive ? thumbnail.activeState.scale : 1})`,
-                          height: "100%",
+                          ...slider.direction === "horiz" ? { height: "100%" } : {},
+                          ...slider.direction === "vert" ? { width: "100%" } : {},
                           opacity: isActive ? thumbnail.activeState.opacity : thumbnail.opacity,
                           ["--thumb-hover"]: thumbnail.activeState.opacity
                         },
@@ -1746,7 +1796,11 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                             src: item.image.url,
                             alt: item.image.name ?? "",
                             className: styles.thumbImage,
-                            style: { objectFit: thumbnail.fit === "cover" ? "cover" : "contain" }
+                            style: {
+                              objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
+                              ...slider.direction === "horiz" ? { height: "100%" } : {},
+                              ...slider.direction === "vert" ? { width: "100%" } : {}
+                            }
                           }
                         )
                       },
@@ -1863,7 +1917,7 @@ const LightboxComponent = {
                     display: {
                       type: "ratio-group"
                     },
-                    enum: ["click", "drag", "scroll"]
+                    enum: ["click", "drag"]
                   },
                   switch: {
                     type: "string",
@@ -1962,6 +2016,14 @@ const LightboxComponent = {
                           type: "numeric-input"
                         }
                       },
+                      width: {
+                        type: "number",
+                        label: "W",
+                        display: {
+                          type: "numeric-input",
+                          visible: false
+                        }
+                      },
                       gap: {
                         type: "number",
                         label: "Gap",
@@ -2006,9 +2068,9 @@ const LightboxComponent = {
                       scale: {
                         type: "number",
                         title: "Scale",
-                        min: 1,
-                        max: 2,
-                        step: 0.1,
+                        min: 0,
+                        max: 100,
+                        step: 1,
                         display: {
                           type: "range-control"
                         }
@@ -2114,7 +2176,7 @@ const LightboxComponent = {
                     type: "number",
                     title: "Scale",
                     min: 0,
-                    max: 1,
+                    max: 100,
                     display: {
                       type: "range-control"
                     }
@@ -2255,7 +2317,7 @@ const LightboxComponent = {
               position: "bottom-center",
               fit: "cover",
               align: "center",
-              triggers: "click",
+              triggers: "clk",
               grid: {
                 height: 60,
                 gap: 8
@@ -2263,7 +2325,7 @@ const LightboxComponent = {
               offset: { x: 0, y: 0 },
               opacity: 100,
               activeState: {
-                scale: 1,
+                scale: 100,
                 opacity: 100
               }
             },
@@ -2276,7 +2338,7 @@ const LightboxComponent = {
               isActive: true,
               arrowsImgUrl: null,
               offset: { x: 0, y: 0 },
-              scale: 1,
+              scale: 100,
               color: "#000000",
               hover: "#cccccc"
             },
@@ -2334,6 +2396,26 @@ const LightboxComponent = {
               name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
               value: false
             }
+          },
+          {
+            if: {
+              name: "slider.direction",
+              value: "vert"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "slider.direction",
+              value: "vert"
+            },
+            then: {
+              name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
+              value: false
+            }
           }
         ]
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/components",
-  "version": "0.1.0-13",
+  "version": "0.1.0-15",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",