@cntrl-site/components 0.1.0-alpha.1 → 0.1.0-alpha.10

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

@@ -5,8 +5,9 @@ type LightboxGalleryProps = {
     styles: LightboxStyles;
     portalId: string;
     activeEvent: 'close' | 'open';
+    isEditor?: boolean;
 };
-export declare function LightboxGallery({ settings, content, styles, portalId, activeEvent }: LightboxGalleryProps): JSX.Element;
+export declare function 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}.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___y7avj{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9999}.Lightbox-module__contentStyle___FzFaW{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.Lightbox-module__imageStyle___Qb7f5{position:absolute;display:block;cursor:pointer;background-color:transparent}.Lightbox-module__imgWrapper___cdytV{display:flex;width:100%;height:100%;overflow:hidden}.Lightbox-module__contain___5gATW{object-fit:contain;max-width:100%;max-height:100%}.Lightbox-module__cover___8HZy7{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.Lightbox-module__caption___3e-22{position:absolute;display:flex}.Lightbox-module__lightboxSplide___yMC4v.splide,.Lightbox-module__lightboxSplide___yMC4v .splide__track{height:100%}.Lightbox-module__arrow___s3Bn2{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___s3Bn2.Lightbox-module__arrowVertical___6ztxz{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___i23DU{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___i23DU.Lightbox-module__arrowVertical___6ztxz{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___Mm3xe{all:unset;cursor:pointer;width:100%;height:100%}.Lightbox-module__arrowInner___Mm3xe:hover .Lightbox-module__arrowIcon___UpzOt path{fill:var(--arrow-hover-color)!important}.Lightbox-module__arrowImg___UxHPR{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Lightbox-module__mirror___50NCE{transform:translate(-50%,-50%) scaleX(-1)!important}.Lightbox-module__arrowVertical___6ztxz.Lightbox-module__mirror___50NCE{transform:translate(-50%,-50%) scaleY(-1)!important}.Lightbox-module__thumbsContainerVertical___lVaf-{flex-direction:column;display:flex}.Lightbox-module__thumbsContainer___DqOCP{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:auto}.Lightbox-module__thumbsAlignStart___uiFIV{align-items:flex-start}.Lightbox-module__thumbsAlignCenter___sbUPA{align-items:center}.Lightbox-module__thumbsAlignEnd___OA9N4{align-items:flex-end}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignStart___uiFIV{align-items:center;justify-content:flex-start}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignCenter___sbUPA{align-items:center;justify-content:center}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignEnd___OA9N4{align-items:center;justify-content:flex-end}.Lightbox-module__thumbItem___zROyu{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___zROyu:hover{opacity:var(--thumb-hover)!important}.Lightbox-module__thumbImage___xGakV{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)}.Lightbox-module__closeButton___r3Dur{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___3xoHQ{0%{opacity:0}to{opacity:1}}.Lightbox-module__fadeIn___sHwRK{animation-name:Lightbox-module__lbFadeIn___3xoHQ}@keyframes Lightbox-module__lbSlideInLeft___vgE9-{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes Lightbox-module__lbSlideInRight___nByIA{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes Lightbox-module__lbSlideInTop___hI5ju{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes Lightbox-module__lbSlideInBottom___M6-9o{0%{transform:translateY(100%)}to{transform:translateY(0)}}.Lightbox-module__slideInLeft___P-XRo{animation-name:Lightbox-module__lbSlideInLeft___vgE9-}.Lightbox-module__slideInRight___ZQqFi{animation-name:Lightbox-module__lbSlideInRight___nByIA}.Lightbox-module__slideInTop___XRKCs{animation-name:Lightbox-module__lbSlideInTop___hI5ju}.Lightbox-module__slideInBottom___TYOBS{animation-name:Lightbox-module__lbSlideInBottom___M6-9o}.Lightbox-module__lightboxSplide___yMC4v.splide--fade .Lightbox-module__scaleSlide___wS7d4{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___yMC4v.splide--fade .splide__slide.is-active .Lightbox-module__scaleSlide___wS7d4{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.Lightbox-module__lightboxSplide___yMC4v.splide--fade .splide__slide:not(.is-active) .Lightbox-module__scaleSlide___wS7d4{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!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__background___wf1Ii{position:absolute;z-index:9998;width:100%;height:100%;top:0;left:0}.Lightbox-module__backdropStyle___y7avj{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:9999}.Lightbox-module__editor___Vh82D{width:var(--cntrl-article-width)!important;margin-left:auto;margin-right:auto}.Lightbox-module__contentStyle___FzFaW{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.Lightbox-module__imageStyle___Qb7f5{position:relative;display:block;cursor:pointer;background-color:transparent}.Lightbox-module__imgWrapper___cdytV{position:relative;display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.Lightbox-module__contain___5gATW{object-fit:contain;max-width:100%;max-height:100%}.Lightbox-module__cover___8HZy7{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.Lightbox-module__caption___3e-22{position:absolute;display:flex}.Lightbox-module__lightboxSplide___yMC4v.splide,.Lightbox-module__lightboxSplide___yMC4v .splide__track{height:100%}.Lightbox-module__arrow___s3Bn2{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___s3Bn2.Lightbox-module__arrowVertical___6ztxz{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___i23DU{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___i23DU.Lightbox-module__arrowVertical___6ztxz{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___Mm3xe{all:unset;cursor:pointer;width:100%;height:100%}.Lightbox-module__arrowInner___Mm3xe:hover .Lightbox-module__arrowIcon___UpzOt path{fill:var(--arrow-hover-color)!important}.Lightbox-module__arrowImg___UxHPR{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Lightbox-module__mirror___50NCE{transform:translate(-50%,-50%) scaleX(-1)!important}.Lightbox-module__arrowVertical___6ztxz.Lightbox-module__mirror___50NCE{transform:translate(-50%,-50%) scaleY(-1)!important}.Lightbox-module__thumbsContainerVertical___lVaf-{flex-direction:column;display:flex}.Lightbox-module__thumbsContainer___DqOCP{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:auto}.Lightbox-module__thumbsAlignStart___uiFIV{align-items:flex-start}.Lightbox-module__thumbsAlignCenter___sbUPA{align-items:center}.Lightbox-module__thumbsAlignEnd___OA9N4{align-items:flex-end}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignStart___uiFIV{align-items:center;justify-content:flex-start}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignCenter___sbUPA{align-items:center;justify-content:center}.Lightbox-module__thumbsContainerVertical___lVaf-.Lightbox-module__thumbsAlignEnd___OA9N4{align-items:center;justify-content:flex-end}.Lightbox-module__thumbItem___zROyu{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___zROyu:hover{opacity:var(--thumb-hover)!important}.Lightbox-module__thumbImage___xGakV{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)}.Lightbox-module__closeButton___r3Dur{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___3xoHQ{0%{opacity:0}to{opacity:1}}.Lightbox-module__fadeIn___sHwRK{animation-name:Lightbox-module__lbFadeIn___3xoHQ}@keyframes Lightbox-module__lbSlideInLeft___vgE9-{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes Lightbox-module__lbSlideInRight___nByIA{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes Lightbox-module__lbSlideInTop___hI5ju{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes Lightbox-module__lbSlideInBottom___M6-9o{0%{transform:translateY(100%)}to{transform:translateY(0)}}.Lightbox-module__slideInLeft___P-XRo{animation-name:Lightbox-module__lbSlideInLeft___vgE9-}.Lightbox-module__slideInRight___ZQqFi{animation-name:Lightbox-module__lbSlideInRight___nByIA}.Lightbox-module__slideInTop___XRKCs{animation-name:Lightbox-module__lbSlideInTop___hI5ju}.Lightbox-module__slideInBottom___TYOBS{animation-name:Lightbox-module__lbSlideInBottom___M6-9o}.Lightbox-module__lightboxSplide___yMC4v.splide--fade .Lightbox-module__scaleSlide___wS7d4{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___yMC4v.splide--fade .splide__slide.is-active .Lightbox-module__scaleSlide___wS7d4{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.Lightbox-module__lightboxSplide___yMC4v.splide--fade .splide__slide:not(.is-active) .Lightbox-module__scaleSlide___wS7d4{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!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}

package/dist/index.js

@@ -1443,7 +1443,9 @@ const ControlImageRevealSliderComponent = {
     }
   }
 };
+const background = "Lightbox-module__background___wf1Ii";
 const backdropStyle = "Lightbox-module__backdropStyle___y7avj";
+const editor = "Lightbox-module__editor___Vh82D";
 const contentStyle = "Lightbox-module__contentStyle___FzFaW";
 const imageStyle = "Lightbox-module__imageStyle___Qb7f5";
 const imgWrapper = "Lightbox-module__imgWrapper___cdytV";
@@ -1472,7 +1474,9 @@ const slideInTop = "Lightbox-module__slideInTop___XRKCs";
 const slideInBottom = "Lightbox-module__slideInBottom___TYOBS";
 const scaleSlide = "Lightbox-module__scaleSlide___wS7d4";
 const styles = {
+  background,
   backdropStyle,
+  editor,
   contentStyle,
   imageStyle,
   imgWrapper,
@@ -1535,7 +1539,7 @@ const getPositionStyles = (position, offset) => {
   }
   return styles2;
 };
-function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent }) {
+function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) {
   const [open, setOpen] = React.useState(false);
   const { url } = settings.thumbnailBlock.cover;
   React.useEffect(() => {
@@ -1556,10 +1560,10 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, portalId })
+    /* @__PURE__ */ jsxRuntime.jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, portalId, isEditor })
   ] });
 }
-const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId }) => {
+const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId, isEditor }) => {
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const lightboxRef = React.useRef(null);
   const resizeObserverRef = React.useRef(null);
@@ -1576,6 +1580,20 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
       onClose();
     }
   };
+  const handleContentClick = (e) => {
+    if (!closeOnBackdropClick) return;
+    const target = e.target;
+    const currentTarget = e.currentTarget;
+    if (target === currentTarget) {
+      onClose();
+      return;
+    }
+    const isImg = target.tagName === "IMG" || target.closest("img");
+    const isButton = target.tagName === "BUTTON" || target.closest("button");
+    if (!isImg && !isButton) {
+      onClose();
+    }
+  };
   const onImageClick = (e) => {
     var _a, _b;
     if (triggers.type === "click" && triggers.switch === "image") {
@@ -1622,6 +1640,19 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
   React.useEffect(() => {
     if (isOpen) setCurrentIndex(0);
   }, [isOpen]);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    document.body.style.backgroundColor = area.color;
+    const preventScroll = (e) => e.preventDefault();
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      document.removeEventListener("touchmove", preventScroll);
+      document.body.style.backgroundColor = "";
+    };
+  }, [isOpen]);
   React.useEffect(() => {
     if (!isOpen) return;
     if (resizeObserverRef.current) {
@@ -1670,17 +1701,28 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
   };
   const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
+  const backdropDurationMs = appear.type === "fade in" || appear.type === "mix" ? Math.floor(appearDurationMs * 0.7) : appearDurationMs;
   const appearClass = (() => {
     if (appear.type === "fade in") return styles.fadeIn;
-    if (appear.type === "slide in") {
-      return "";
+    if (appear.type === "slide in" || appear.type === "mix") {
+      switch (appear.direction) {
+        case "left":
+          return styles.slideInLeft;
+        case "right":
+          return styles.slideInRight;
+        case "top":
+          return styles.slideInTop;
+        case "bottom":
+          return styles.slideInBottom;
+        default:
+          return styles.slideInRight;
+      }
     }
-    if (appear.type === "mix") return styles.fadeIn;
     return styles.fadeIn;
   })();
   const backdropAppearClass = (() => {
-    if (appear.type === "fade in") return styles.fadeIn;
-    if (appear.type === "slide in" || appear.type === "mix") {
+    if (appear.type === "fade in" || appear.type === "mix") return styles.fadeIn;
+    if (appear.type === "slide in") {
       switch (appear.direction) {
         case "left":
           return styles.slideInLeft;
@@ -1698,228 +1740,242 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
   })();
   if (!isOpen) return null;
   return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(styles.backdropStyle, backdropAppearClass),
-        style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
-        onClick: handleBackdropClick,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(styles.contentStyle, appearClass),
-            style: {
-              padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`,
-              animationDuration: `${appearDurationMs}ms`,
-              animationTimingFunction: "ease",
-              animationFillMode: "both",
-              ...appear.type === "mix" && { animationDelay: "0.5s" },
-              "--splide-speed": triggers.duration || "500ms"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                reactSplide.Splide,
-                {
-                  onMove: (splide) => {
-                    setCurrentIndex(splide.index);
-                  },
-                  ref: lightboxRef,
-                  className: styles.lightboxSplide,
-                  options: {
-                    arrows: false,
-                    speed: triggers.duration ? parseInt(triggers.duration) : 500,
-                    direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
-                    pagination: false,
-                    drag: triggers.type === "drag",
-                    perPage: 1,
-                    width: "100%",
-                    height: "100%",
-                    type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
-                    padding: 0,
-                    rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
-                  },
-                  style: { "--splide-speed": triggers.duration || "500ms" },
-                  children: content.map((item, index) => {
-                    const positionStyles = getPositionStyles(layout.position, layout.offset);
-                    const imageStyle2 = slider.type === "scale" ? (() => {
-                      const { transform, ...restStyles } = positionStyles;
-                      return {
-                        ...restStyles,
-                        "--position-transform": transform || "none"
-                      };
-                    })() : positionStyles;
-                    return /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: styles.imgWrapper,
-                        onClick: handleImageWrapperClick,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "img",
-                          {
-                            className: cn(styles.imageStyle, {
-                              [styles.contain]: item.image.objectFit === "contain",
-                              [styles.cover]: item.image.objectFit === "cover",
-                              [styles.scaleSlide]: slider.type === "scale"
-                            }),
-                            src: item.image.url,
-                            alt: item.image.name ?? "",
-                            onClick: onImageClick,
-                            style: imageStyle2
-                          }
-                        )
-                      }
-                    ) }, index);
-                  })
-                }
-              ),
-              controls.isActive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(styles.background, backdropAppearClass),
+          style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${backdropDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(styles.backdropStyle, { [styles.editor]: isEditor }),
+          onClick: handleBackdropClick,
+          onTouchEnd: handleBackdropClick,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(styles.contentStyle, appearClass),
+              onClick: handleContentClick,
+              style: {
+                animationDuration: `${appearDurationMs}ms`,
+                animationTimingFunction: "ease",
+                animationFillMode: "both",
+                ...appear.type === "mix" && { animationDelay: `${backdropDurationMs}ms` },
+                "--splide-speed": triggers.duration || "500ms"
+              },
+              children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
+                  reactSplide.Splide,
+                  {
+                    onMove: (splide) => {
+                      setCurrentIndex(splide.index);
+                    },
+                    ref: lightboxRef,
+                    className: styles.lightboxSplide,
+                    options: {
+                      arrows: false,
+                      speed: triggers.duration ? parseInt(triggers.duration) : 500,
+                      direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
+                      pagination: false,
+                      drag: triggers.type === "drag",
+                      perPage: 1,
+                      width: "100%",
+                      height: "100%",
+                      type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
+                      padding: 0,
+                      rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
+                    },
+                    style: { "--splide-speed": triggers.duration || "500ms" },
+                    children: content.map((item, index) => {
+                      const positionStyles = getPositionStyles(layout.position, layout.offset);
+                      const imageStyle2 = slider.type === "scale" ? (() => {
+                        const { transform, ...restStyles } = positionStyles;
+                        return {
+                          ...restStyles,
+                          "--position-transform": transform || "none"
+                        };
+                      })() : positionStyles;
+                      return /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: styles.imgWrapper,
+                          onClick: handleImageWrapperClick,
+                          style: {
+                            padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "img",
+                            {
+                              className: cn(styles.imageStyle, {
+                                [styles.contain]: item.image.objectFit === "contain",
+                                [styles.cover]: item.image.objectFit === "cover",
+                                [styles.scaleSlide]: slider.type === "scale"
+                              }),
+                              src: item.image.url,
+                              alt: item.image.name ?? "",
+                              onClick: onImageClick,
+                              style: imageStyle2
+                            }
+                          )
+                        }
+                      ) }, index);
+                    })
+                  }
+                ),
+                controls.isActive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(styles.arrow, { [styles.arrowVertical]: slider.direction === "vert" }),
+                      style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          className: styles.arrowInner,
+                          style: {
+                            transform: `translate(${scalingValue(controls.offset.x)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1))}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
+                          },
+                          onClick: (e) => {
+                            handleArrowClick("-1");
+                          },
+                          children: controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                            SvgImage,
+                            {
+                              url: controls.arrowsImgUrl,
+                              fill: controls.color,
+                              hoverFill: controls.hover,
+                              className: cn(styles.arrowImg, styles.mirror)
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(styles.arrow, styles.nextArrow, { [styles.arrowVertical]: slider.direction === "vert" }),
+                      style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          className: styles.arrowInner,
+                          style: {
+                            transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1))}, ${scalingValue(controls.offset.y)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
+                          },
+                          onClick: (e) => {
+                            handleArrowClick("+1");
+                          },
+                          "aria-label": "Next",
+                          children: controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                            SvgImage,
+                            {
+                              url: controls.arrowsImgUrl,
+                              fill: controls.color,
+                              hoverFill: controls.hover,
+                              className: styles.arrowImg
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                area.closeIconUrl && (() => {
+                  const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset);
+                  const scaleTransform = `scale(${area.closeIconScale})`;
+                  const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      className: styles.closeButton,
+                      style: {
+                        ...positionStyles,
+                        transform: combinedTransform
+                      },
+                      onClick: onClose,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: area.closeIconUrl })
+                    }
+                  );
+                })(),
+                caption2.isActive && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: cn(styles.arrow, { [styles.arrowVertical]: slider.direction === "vert" }),
-                    style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        className: styles.arrowInner,
-                        style: {
-                          transform: `translate(${scalingValue(controls.offset.x)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1))}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
-                        },
-                        onClick: (e) => {
-                          handleArrowClick("-1");
-                        },
-                        children: controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                          SvgImage,
-                          {
-                            url: controls.arrowsImgUrl,
-                            fill: controls.color,
-                            hoverFill: controls.hover,
-                            className: cn(styles.arrowImg, styles.mirror)
-                          }
-                        )
-                      }
-                    )
+                    className: styles.caption,
+                    style: {
+                      ...getPositionStyles(caption2.alignment, caption2.offset),
+                      ["--link-hover-color"]: caption2.hover
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                thumbnail.isActive && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: cn(styles.arrow, styles.nextArrow, { [styles.arrowVertical]: slider.direction === "vert" }),
-                    style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                    className: cn(
+                      styles.thumbsContainer,
                       {
-                        className: styles.arrowInner,
-                        style: {
-                          transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1))}, ${scalingValue(controls.offset.y)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
-                        },
-                        onClick: (e) => {
-                          handleArrowClick("+1");
-                        },
-                        "aria-label": "Next",
-                        children: controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                          SvgImage,
-                          {
-                            url: controls.arrowsImgUrl,
-                            fill: controls.color,
-                            hoverFill: controls.hover,
-                            className: styles.arrowImg
-                          }
-                        )
+                        [styles.thumbsContainerVertical]: slider.direction === "vert",
+                        [styles.thumbsAlignStart]: thumbnail.align === "start",
+                        [styles.thumbsAlignCenter]: thumbnail.align === "center",
+                        [styles.thumbsAlignEnd]: thumbnail.align === "end"
                       }
-                    )
-                  }
-                )
-              ] }),
-              area.closeIconUrl && (() => {
-                const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset);
-                const scaleTransform = `scale(${area.closeIconScale})`;
-                const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    className: styles.closeButton,
+                    ),
                     style: {
-                      ...positionStyles,
-                      transform: combinedTransform
+                      gap: `${thumbnail.grid.gap}px`,
+                      ...slider.direction === "horiz" ? { height: `${thumbnail.grid.height}px` } : {},
+                      ...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
+                      ...getPositionStyles(thumbnail.position, thumbnail.offset)
                     },
-                    onClick: onClose,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: area.closeIconUrl })
-                  }
-                );
-              })(),
-              caption2.isActive && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: styles.caption,
-                  style: {
-                    ...getPositionStyles(caption2.alignment, caption2.offset),
-                    ["--link-hover-color"]: caption2.hover
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
-                }
-              ),
-              thumbnail.isActive && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  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`,
-                    ...slider.direction === "horiz" ? { height: `${thumbnail.grid.height}px` } : {},
-                    ...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
-                    ...getPositionStyles(thumbnail.position, thumbnail.offset)
-                  },
-                  children: content.map((item, index) => {
-                    const isActive = index === currentIndex;
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        className: styles.thumbItem,
-                        style: {
-                          transform: `scale(${isActive ? thumbnail.activeState.scale : 1})`,
-                          ...slider.direction === "horiz" ? { height: "100%" } : {},
-                          ...slider.direction === "vert" ? { width: "100%" } : {},
-                          opacity: isActive ? thumbnail.activeState.opacity : thumbnail.opacity,
-                          ["--thumb-hover"]: thumbnail.activeState.opacity
-                        },
-                        onClick: (e) => {
-                          var _a;
-                          e.stopPropagation();
-                          setCurrentIndex(index);
-                          (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "img",
-                          {
-                            src: item.image.url,
-                            alt: item.image.name ?? "",
-                            className: styles.thumbImage,
-                            style: {
-                              objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
-                              ...slider.direction === "horiz" ? { height: "100%" } : {},
-                              ...slider.direction === "vert" ? { width: "100%" } : {}
+                    children: content.map((item, index) => {
+                      const isActive = index === currentIndex;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          className: styles.thumbItem,
+                          style: {
+                            transform: `scale(${isActive ? thumbnail.activeState.scale : 1})`,
+                            ...slider.direction === "horiz" ? { height: "100%" } : {},
+                            ...slider.direction === "vert" ? { width: "100%" } : {},
+                            opacity: isActive ? thumbnail.activeState.opacity : thumbnail.opacity,
+                            ["--thumb-hover"]: thumbnail.activeState.opacity
+                          },
+                          onClick: (e) => {
+                            var _a;
+                            e.stopPropagation();
+                            setCurrentIndex(index);
+                            (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "img",
+                            {
+                              src: item.image.url,
+                              alt: item.image.name ?? "",
+                              className: styles.thumbImage,
+                              style: {
+                                objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
+                                ...thumbnail.fit === "fit" && slider.direction === "horiz" ? { width: "fit-content" } : {},
+                                ...thumbnail.fit === "fit" && slider.direction === "vert" ? { height: "fit-content" } : {},
+                                ...slider.direction === "horiz" ? { height: "100%" } : {},
+                                ...slider.direction === "vert" ? { width: "100%" } : {}
+                              }
                             }
-                          }
-                        )
-                      },
-                      `${item.image.url}-${index}`
-                    );
-                  })
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
+                          )
+                        },
+                        `${item.image.url}-${index}`
+                      );
+                    })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] }),
     document.getElementById(portalId)
   );
 };
@@ -2118,7 +2174,8 @@ const LightboxComponent = {
                         type: "number",
                         label: "H",
                         display: {
-                          type: "numeric-input"
+                          type: "numeric-input",
+                          visible: true
                         }
                       },
                       width: {
@@ -2498,7 +2555,7 @@ const LightboxComponent = {
               value: "vert"
             },
             then: {
-              name: "properties.lightboxBlock.properties.thumbnail.properties.position.display.direction",
+              name: "properties.lightboxBlock.properties.thumbnail.properties.align.display.direction",
               value: "vertical"
             }
           },

package/dist/index.mjs

@@ -1441,7 +1441,9 @@ const ControlImageRevealSliderComponent = {
     }
   }
 };
+const background = "Lightbox-module__background___wf1Ii";
 const backdropStyle = "Lightbox-module__backdropStyle___y7avj";
+const editor = "Lightbox-module__editor___Vh82D";
 const contentStyle = "Lightbox-module__contentStyle___FzFaW";
 const imageStyle = "Lightbox-module__imageStyle___Qb7f5";
 const imgWrapper = "Lightbox-module__imgWrapper___cdytV";
@@ -1470,7 +1472,9 @@ const slideInTop = "Lightbox-module__slideInTop___XRKCs";
 const slideInBottom = "Lightbox-module__slideInBottom___TYOBS";
 const scaleSlide = "Lightbox-module__scaleSlide___wS7d4";
 const styles = {
+  background,
   backdropStyle,
+  editor,
   contentStyle,
   imageStyle,
   imgWrapper,
@@ -1533,7 +1537,7 @@ const getPositionStyles = (position, offset) => {
   }
   return styles2;
 };
-function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent }) {
+function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) {
   const [open, setOpen] = React.useState(false);
   const { url } = settings.thumbnailBlock.cover;
   useEffect(() => {
@@ -1554,10 +1558,10 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, portalId })
+    /* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, portalId, isEditor })
   ] });
 }
-const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId }) => {
+const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId, isEditor }) => {
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const lightboxRef = useRef(null);
   const resizeObserverRef = useRef(null);
@@ -1574,6 +1578,20 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
       onClose();
     }
   };
+  const handleContentClick = (e) => {
+    if (!closeOnBackdropClick) return;
+    const target = e.target;
+    const currentTarget = e.currentTarget;
+    if (target === currentTarget) {
+      onClose();
+      return;
+    }
+    const isImg = target.tagName === "IMG" || target.closest("img");
+    const isButton = target.tagName === "BUTTON" || target.closest("button");
+    if (!isImg && !isButton) {
+      onClose();
+    }
+  };
   const onImageClick = (e) => {
     var _a, _b;
     if (triggers.type === "click" && triggers.switch === "image") {
@@ -1620,6 +1638,19 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
   useEffect(() => {
     if (isOpen) setCurrentIndex(0);
   }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    document.body.style.backgroundColor = area.color;
+    const preventScroll = (e) => e.preventDefault();
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      document.removeEventListener("touchmove", preventScroll);
+      document.body.style.backgroundColor = "";
+    };
+  }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
     if (resizeObserverRef.current) {
@@ -1668,17 +1699,28 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
   };
   const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
+  const backdropDurationMs = appear.type === "fade in" || appear.type === "mix" ? Math.floor(appearDurationMs * 0.7) : appearDurationMs;
   const appearClass = (() => {
     if (appear.type === "fade in") return styles.fadeIn;
-    if (appear.type === "slide in") {
-      return "";
+    if (appear.type === "slide in" || appear.type === "mix") {
+      switch (appear.direction) {
+        case "left":
+          return styles.slideInLeft;
+        case "right":
+          return styles.slideInRight;
+        case "top":
+          return styles.slideInTop;
+        case "bottom":
+          return styles.slideInBottom;
+        default:
+          return styles.slideInRight;
+      }
     }
-    if (appear.type === "mix") return styles.fadeIn;
     return styles.fadeIn;
   })();
   const backdropAppearClass = (() => {
-    if (appear.type === "fade in") return styles.fadeIn;
-    if (appear.type === "slide in" || appear.type === "mix") {
+    if (appear.type === "fade in" || appear.type === "mix") return styles.fadeIn;
+    if (appear.type === "slide in") {
       switch (appear.direction) {
         case "left":
           return styles.slideInLeft;
@@ -1696,228 +1738,242 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
   })();
   if (!isOpen) return null;
   return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(styles.backdropStyle, backdropAppearClass),
-        style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
-        onClick: handleBackdropClick,
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(styles.contentStyle, appearClass),
-            style: {
-              padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`,
-              animationDuration: `${appearDurationMs}ms`,
-              animationTimingFunction: "ease",
-              animationFillMode: "both",
-              ...appear.type === "mix" && { animationDelay: "0.5s" },
-              "--splide-speed": triggers.duration || "500ms"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Splide,
-                {
-                  onMove: (splide) => {
-                    setCurrentIndex(splide.index);
-                  },
-                  ref: lightboxRef,
-                  className: styles.lightboxSplide,
-                  options: {
-                    arrows: false,
-                    speed: triggers.duration ? parseInt(triggers.duration) : 500,
-                    direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
-                    pagination: false,
-                    drag: triggers.type === "drag",
-                    perPage: 1,
-                    width: "100%",
-                    height: "100%",
-                    type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
-                    padding: 0,
-                    rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
-                  },
-                  style: { "--splide-speed": triggers.duration || "500ms" },
-                  children: content.map((item, index) => {
-                    const positionStyles = getPositionStyles(layout.position, layout.offset);
-                    const imageStyle2 = slider.type === "scale" ? (() => {
-                      const { transform, ...restStyles } = positionStyles;
-                      return {
-                        ...restStyles,
-                        "--position-transform": transform || "none"
-                      };
-                    })() : positionStyles;
-                    return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: styles.imgWrapper,
-                        onClick: handleImageWrapperClick,
-                        children: /* @__PURE__ */ jsx(
-                          "img",
-                          {
-                            className: cn(styles.imageStyle, {
-                              [styles.contain]: item.image.objectFit === "contain",
-                              [styles.cover]: item.image.objectFit === "cover",
-                              [styles.scaleSlide]: slider.type === "scale"
-                            }),
-                            src: item.image.url,
-                            alt: item.image.name ?? "",
-                            onClick: onImageClick,
-                            style: imageStyle2
-                          }
-                        )
-                      }
-                    ) }, index);
-                  })
-                }
-              ),
-              controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(styles.background, backdropAppearClass),
+          style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${backdropDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(styles.backdropStyle, { [styles.editor]: isEditor }),
+          onClick: handleBackdropClick,
+          onTouchEnd: handleBackdropClick,
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(styles.contentStyle, appearClass),
+              onClick: handleContentClick,
+              style: {
+                animationDuration: `${appearDurationMs}ms`,
+                animationTimingFunction: "ease",
+                animationFillMode: "both",
+                ...appear.type === "mix" && { animationDelay: `${backdropDurationMs}ms` },
+                "--splide-speed": triggers.duration || "500ms"
+              },
+              children: [
                 /* @__PURE__ */ jsx(
+                  Splide,
+                  {
+                    onMove: (splide) => {
+                      setCurrentIndex(splide.index);
+                    },
+                    ref: lightboxRef,
+                    className: styles.lightboxSplide,
+                    options: {
+                      arrows: false,
+                      speed: triggers.duration ? parseInt(triggers.duration) : 500,
+                      direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
+                      pagination: false,
+                      drag: triggers.type === "drag",
+                      perPage: 1,
+                      width: "100%",
+                      height: "100%",
+                      type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
+                      padding: 0,
+                      rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
+                    },
+                    style: { "--splide-speed": triggers.duration || "500ms" },
+                    children: content.map((item, index) => {
+                      const positionStyles = getPositionStyles(layout.position, layout.offset);
+                      const imageStyle2 = slider.type === "scale" ? (() => {
+                        const { transform, ...restStyles } = positionStyles;
+                        return {
+                          ...restStyles,
+                          "--position-transform": transform || "none"
+                        };
+                      })() : positionStyles;
+                      return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: styles.imgWrapper,
+                          onClick: handleImageWrapperClick,
+                          style: {
+                            padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              className: cn(styles.imageStyle, {
+                                [styles.contain]: item.image.objectFit === "contain",
+                                [styles.cover]: item.image.objectFit === "cover",
+                                [styles.scaleSlide]: slider.type === "scale"
+                              }),
+                              src: item.image.url,
+                              alt: item.image.name ?? "",
+                              onClick: onImageClick,
+                              style: imageStyle2
+                            }
+                          )
+                        }
+                      ) }, index);
+                    })
+                  }
+                ),
+                controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(styles.arrow, { [styles.arrowVertical]: slider.direction === "vert" }),
+                      style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
+                      children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: styles.arrowInner,
+                          style: {
+                            transform: `translate(${scalingValue(controls.offset.x)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1))}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
+                          },
+                          onClick: (e) => {
+                            handleArrowClick("-1");
+                          },
+                          children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                            SvgImage,
+                            {
+                              url: controls.arrowsImgUrl,
+                              fill: controls.color,
+                              hoverFill: controls.hover,
+                              className: cn(styles.arrowImg, styles.mirror)
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(styles.arrow, styles.nextArrow, { [styles.arrowVertical]: slider.direction === "vert" }),
+                      style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
+                      children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: styles.arrowInner,
+                          style: {
+                            transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1))}, ${scalingValue(controls.offset.y)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
+                          },
+                          onClick: (e) => {
+                            handleArrowClick("+1");
+                          },
+                          "aria-label": "Next",
+                          children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
+                            SvgImage,
+                            {
+                              url: controls.arrowsImgUrl,
+                              fill: controls.color,
+                              hoverFill: controls.hover,
+                              className: styles.arrowImg
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                area.closeIconUrl && (() => {
+                  const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset);
+                  const scaleTransform = `scale(${area.closeIconScale})`;
+                  const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: styles.closeButton,
+                      style: {
+                        ...positionStyles,
+                        transform: combinedTransform
+                      },
+                      onClick: onClose,
+                      children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl })
+                    }
+                  );
+                })(),
+                caption2.isActive && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: cn(styles.arrow, { [styles.arrowVertical]: slider.direction === "vert" }),
-                    style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
-                    children: /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        className: styles.arrowInner,
-                        style: {
-                          transform: `translate(${scalingValue(controls.offset.x)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1))}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
-                        },
-                        onClick: (e) => {
-                          handleArrowClick("-1");
-                        },
-                        children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
-                          SvgImage,
-                          {
-                            url: controls.arrowsImgUrl,
-                            fill: controls.color,
-                            hoverFill: controls.hover,
-                            className: cn(styles.arrowImg, styles.mirror)
-                          }
-                        )
-                      }
-                    )
+                    className: styles.caption,
+                    style: {
+                      ...getPositionStyles(caption2.alignment, caption2.offset),
+                      ["--link-hover-color"]: caption2.hover
+                    },
+                    children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                thumbnail.isActive && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: cn(styles.arrow, styles.nextArrow, { [styles.arrowVertical]: slider.direction === "vert" }),
-                    style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
-                    children: /* @__PURE__ */ jsx(
-                      "button",
+                    className: cn(
+                      styles.thumbsContainer,
                       {
-                        className: styles.arrowInner,
-                        style: {
-                          transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1))}, ${scalingValue(controls.offset.y)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
-                        },
-                        onClick: (e) => {
-                          handleArrowClick("+1");
-                        },
-                        "aria-label": "Next",
-                        children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
-                          SvgImage,
-                          {
-                            url: controls.arrowsImgUrl,
-                            fill: controls.color,
-                            hoverFill: controls.hover,
-                            className: styles.arrowImg
-                          }
-                        )
+                        [styles.thumbsContainerVertical]: slider.direction === "vert",
+                        [styles.thumbsAlignStart]: thumbnail.align === "start",
+                        [styles.thumbsAlignCenter]: thumbnail.align === "center",
+                        [styles.thumbsAlignEnd]: thumbnail.align === "end"
                       }
-                    )
-                  }
-                )
-              ] }),
-              area.closeIconUrl && (() => {
-                const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset);
-                const scaleTransform = `scale(${area.closeIconScale})`;
-                const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    className: styles.closeButton,
+                    ),
                     style: {
-                      ...positionStyles,
-                      transform: combinedTransform
+                      gap: `${thumbnail.grid.gap}px`,
+                      ...slider.direction === "horiz" ? { height: `${thumbnail.grid.height}px` } : {},
+                      ...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
+                      ...getPositionStyles(thumbnail.position, thumbnail.offset)
                     },
-                    onClick: onClose,
-                    children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl })
-                  }
-                );
-              })(),
-              caption2.isActive && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: styles.caption,
-                  style: {
-                    ...getPositionStyles(caption2.alignment, caption2.offset),
-                    ["--link-hover-color"]: caption2.hover
-                  },
-                  children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
-                }
-              ),
-              thumbnail.isActive && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  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`,
-                    ...slider.direction === "horiz" ? { height: `${thumbnail.grid.height}px` } : {},
-                    ...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
-                    ...getPositionStyles(thumbnail.position, thumbnail.offset)
-                  },
-                  children: content.map((item, index) => {
-                    const isActive = index === currentIndex;
-                    return /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        className: styles.thumbItem,
-                        style: {
-                          transform: `scale(${isActive ? thumbnail.activeState.scale : 1})`,
-                          ...slider.direction === "horiz" ? { height: "100%" } : {},
-                          ...slider.direction === "vert" ? { width: "100%" } : {},
-                          opacity: isActive ? thumbnail.activeState.opacity : thumbnail.opacity,
-                          ["--thumb-hover"]: thumbnail.activeState.opacity
-                        },
-                        onClick: (e) => {
-                          var _a;
-                          e.stopPropagation();
-                          setCurrentIndex(index);
-                          (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
-                        },
-                        children: /* @__PURE__ */ jsx(
-                          "img",
-                          {
-                            src: item.image.url,
-                            alt: item.image.name ?? "",
-                            className: styles.thumbImage,
-                            style: {
-                              objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
-                              ...slider.direction === "horiz" ? { height: "100%" } : {},
-                              ...slider.direction === "vert" ? { width: "100%" } : {}
+                    children: content.map((item, index) => {
+                      const isActive = index === currentIndex;
+                      return /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: styles.thumbItem,
+                          style: {
+                            transform: `scale(${isActive ? thumbnail.activeState.scale : 1})`,
+                            ...slider.direction === "horiz" ? { height: "100%" } : {},
+                            ...slider.direction === "vert" ? { width: "100%" } : {},
+                            opacity: isActive ? thumbnail.activeState.opacity : thumbnail.opacity,
+                            ["--thumb-hover"]: thumbnail.activeState.opacity
+                          },
+                          onClick: (e) => {
+                            var _a;
+                            e.stopPropagation();
+                            setCurrentIndex(index);
+                            (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              src: item.image.url,
+                              alt: item.image.name ?? "",
+                              className: styles.thumbImage,
+                              style: {
+                                objectFit: thumbnail.fit === "cover" ? "cover" : "contain",
+                                ...thumbnail.fit === "fit" && slider.direction === "horiz" ? { width: "fit-content" } : {},
+                                ...thumbnail.fit === "fit" && slider.direction === "vert" ? { height: "fit-content" } : {},
+                                ...slider.direction === "horiz" ? { height: "100%" } : {},
+                                ...slider.direction === "vert" ? { width: "100%" } : {}
+                              }
                             }
-                          }
-                        )
-                      },
-                      `${item.image.url}-${index}`
-                    );
-                  })
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
+                          )
+                        },
+                        `${item.image.url}-${index}`
+                      );
+                    })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] }),
     document.getElementById(portalId)
   );
 };
@@ -2116,7 +2172,8 @@ const LightboxComponent = {
                         type: "number",
                         label: "H",
                         display: {
-                          type: "numeric-input"
+                          type: "numeric-input",
+                          visible: true
                         }
                       },
                       width: {
@@ -2496,7 +2553,7 @@ const LightboxComponent = {
               value: "vert"
             },
             then: {
-              name: "properties.lightboxBlock.properties.thumbnail.properties.position.display.direction",
+              name: "properties.lightboxBlock.properties.thumbnail.properties.align.display.direction",
               value: "vertical"
             }
           },

package/package.json

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