@cntrl-site/components 0.1.0-alpha.30 → 0.1.0-alpha.32

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

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

package/dist/Components/utils/getColorAlpha.d.ts

@@ -0,0 +1 @@
+export declare function getColorAlpha(color: string): number;

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__background___wf1Ii{position:absolute;z-index:9997;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:9998}.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;max-width:100%;max-height:100%;width:auto;height:auto}.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}.Lightbox-module__caption___3e-22{z-index:9999;position:absolute;display:flex}.Lightbox-module__captionBlock___7wXOq{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.Lightbox-module__captionTextWrapper___uDnh6{position:relative;width:100%;height:100%}.Lightbox-module__captionText___6zbmg{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}.Lightbox-module__captionText___6zbmg.Lightbox-module__active___u7Yu8{opacity:1}.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:fixed;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__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__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}@keyframes Lightbox-module__lbFadeOut___0pD7Q{0%{opacity:1}to{opacity:0}}.Lightbox-module__fadeOut___h2fpQ{animation-name:Lightbox-module__lbFadeOut___0pD7Q!important}@keyframes Lightbox-module__lbSlideOutLeft___Z6pdg{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes Lightbox-module__lbSlideOutRight___B5cYY{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes Lightbox-module__lbSlideOutTop___uZ10i{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes Lightbox-module__lbSlideOutBottom___GyYfC{0%{transform:translateY(0)}to{transform:translateY(100%)}}.Lightbox-module__slideOutLeft___J-eMU{animation-name:Lightbox-module__lbSlideOutLeft___Z6pdg!important}.Lightbox-module__slideOutRight___iZUQz{animation-name:Lightbox-module__lbSlideOutRight___B5cYY!important}.Lightbox-module__slideOutTop___3TXF9{animation-name:Lightbox-module__lbSlideOutTop___uZ10i!important}.Lightbox-module__slideOutBottom___SB5ws{animation-name:Lightbox-module__lbSlideOutBottom___GyYfC!important}.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:9997;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:9998}.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;max-width:100%;max-height:100%;width:auto;height:auto}.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}.Lightbox-module__caption___3e-22{z-index:9999;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:fixed;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__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__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}@keyframes Lightbox-module__lbFadeOut___0pD7Q{0%{opacity:1}to{opacity:0}}.Lightbox-module__fadeOut___h2fpQ{animation-name:Lightbox-module__lbFadeOut___0pD7Q!important}@keyframes Lightbox-module__lbSlideOutLeft___Z6pdg{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes Lightbox-module__lbSlideOutRight___B5cYY{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes Lightbox-module__lbSlideOutTop___uZ10i{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes Lightbox-module__lbSlideOutBottom___GyYfC{0%{transform:translateY(0)}to{transform:translateY(100%)}}.Lightbox-module__slideOutLeft___J-eMU{animation-name:Lightbox-module__lbSlideOutLeft___Z6pdg!important}.Lightbox-module__slideOutRight___iZUQz{animation-name:Lightbox-module__lbSlideOutRight___B5cYY!important}.Lightbox-module__slideOutTop___3TXF9{animation-name:Lightbox-module__lbSlideOutTop___uZ10i!important}.Lightbox-module__slideOutBottom___SB5ws{animation-name:Lightbox-module__lbSlideOutBottom___GyYfC!important}.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

@@ -740,7 +740,7 @@ const ControlSliderComponent = {
                 }
               },
               hover: {
-                title: "hover",
+                title: "Link Hover",
                 type: "string",
                 display: {
                   type: "settings-color-picker",
@@ -1246,7 +1246,7 @@ const ControlImageRevealSliderComponent = {
                 display: {
                   type: "ratio-group"
                 },
-                enum: ["as is", "custom", "random"]
+                enum: ["as Is", "custom", "random"]
               },
               imageWidth: {
                 type: "number",
@@ -1610,7 +1610,26 @@ function getDisplayedImageRect(img2) {
     height: renderedH
   };
 }
-function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) {
+function getColorAlpha(color) {
+  const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
+  if (rgbaMatch) {
+    const values = rgbaMatch[1].split(",").map((v) => parseFloat(v.trim()));
+    if (values.length === 4) {
+      return values[3];
+    }
+    return 1;
+  }
+  const hexMatch = color.match(/^#([0-9a-fA-F]{8})$/);
+  if (hexMatch) {
+    const alphaHex = hexMatch[1].substring(6, 8);
+    return parseInt(alphaHex, 16) / 255;
+  }
+  if (color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
+    return 1;
+  }
+  return 1;
+}
+const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) => {
   const [open, setOpen] = React.useState(false);
   const { url } = settings.thumbnailBlock.cover;
   React.useEffect(() => {
@@ -1627,15 +1646,30 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
       {
         src: url,
         alt: "Cover",
-        style: { width: "100%", height: "100%", cursor: "pointer", objectFit: "cover" },
+        style: {
+          width: "100%",
+          height: "100%",
+          cursor: "pointer",
+          objectFit: "cover"
+        },
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, styles: styles2, portalId, isEditor, activeEvent })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Lightbox,
+      {
+        isOpen: open,
+        onClose: () => setOpen(false),
+        content,
+        settings,
+        lightboxStyles: styles2,
+        portalId,
+        isEditor
+      }
+    )
   ] });
-}
-const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings, portalId, isEditor }) => {
-  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.caption;
+};
+const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId, isEditor }) => {
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const [splideKey, setSplideKey] = React.useState(0);
   const [isClosing, setIsClosing] = React.useState(false);
@@ -1647,17 +1681,16 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   const animationEndHandlerRef = React.useRef(null);
   const appearAnimationEndHandlerRef = React.useRef(null);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
+  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.caption;
   const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
   React.useEffect(() => {
-    window.addEventListener("ArticleEditor.Layout:change", () => {
+    const handleLayoutChange = () => {
       var _a, _b;
       (_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
-    });
+    };
+    window.addEventListener("ArticleEditor.Layout:change", handleLayoutChange);
     return () => {
-      window.removeEventListener("ArticleEditor.Layout:change", () => {
-        var _a, _b;
-        (_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
-      });
+      window.removeEventListener("ArticleEditor.Layout:change", handleLayoutChange);
     };
   }, []);
   const handleClose = React.useCallback(() => {
@@ -1690,13 +1723,8 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   };
   const handleImageWrapperClick = (e) => {
     var _a, _b;
-    const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
-    if (!rect) {
-      if (e.target === e.currentTarget) {
-        handleClose();
-      }
-      return;
-    }
+    const currentImage = content[currentIndex];
+    const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
     let clientX;
     let clientY;
     if ("changedTouches" in e && e.changedTouches.length > 0) {
@@ -1708,7 +1736,20 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     } else {
       return;
     }
-    const inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
+    let inside;
+    if (isCover && imageRef.current) {
+      const imgRect = imageRef.current.getBoundingClientRect();
+      inside = clientX >= imgRect.left && clientX <= imgRect.right && clientY >= imgRect.top && clientY <= imgRect.bottom;
+    } else {
+      const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+      if (!rect) {
+        if (e.target === e.currentTarget) {
+          handleClose();
+        }
+        return;
+      }
+      inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
+    }
     if (inside) {
       if (triggers.type === "click" && triggers.switch === "image") {
         if (triggers.repeat === "close" && currentIndex === content.length - 1) {
@@ -1753,6 +1794,32 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       handleClose();
     }
   };
+  const onImageClick = (e) => {
+    var _a, _b;
+    e.stopPropagation();
+    if (triggers.type === "click" && triggers.switch === "image") {
+      if (triggers.repeat === "close" && currentIndex === content.length - 1) {
+        handleClose();
+      } else {
+        (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
+      }
+    }
+    if (triggers.type === "click" && triggers.switch === "50/50") {
+      const img2 = e.currentTarget;
+      const rect = img2.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const clickY = e.clientY - rect.top;
+      const imgWidth = rect.width;
+      const imgHeight = rect.height;
+      let dir;
+      if (slider.direction === "horiz") {
+        dir = clickX < imgWidth / 2 ? "-1" : "+1";
+      } else {
+        dir = clickY < imgHeight / 2 ? "-1" : "+1";
+      }
+      (_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
+    }
+  };
   React.useEffect(() => {
     if (!isOpen) return;
     const onKeyDown = (event) => {
@@ -1909,11 +1976,18 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
         return;
       }
       if (e.touches.length === 0 && e.changedTouches.length > 0) {
-        const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
-        console.log("rect", rect);
-        if (!rect) return;
+        const currentImage = content[currentIndex];
+        const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
         const touch = e.changedTouches[0];
-        const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
+        let inside;
+        if (isCover && imageRef.current) {
+          const imgRect = imageRef.current.getBoundingClientRect();
+          inside = touch.clientX >= imgRect.left && touch.clientX <= imgRect.right && touch.clientY >= imgRect.top && touch.clientY <= imgRect.bottom;
+        } else {
+          const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+          if (!rect) return;
+          inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
+        }
         if (!inside) {
           e.stopPropagation();
           isClosingRef.current = true;
@@ -1931,7 +2005,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     return () => {
       document.removeEventListener("touchend", handleTouchEnd);
     };
-  }, [isOpen, handleClose, currentIndex]);
+  }, [isOpen, handleClose, currentIndex, content]);
   if (!isOpen && !isClosing) return null;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1952,7 +2026,10 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn(styles.backdropStyle, { [styles.editor]: isEditor, [isClosing ? backdropDisappearClass : backdropAppearClass]: isEditor }),
+          className: cn(styles.backdropStyle, {
+            [styles.editor]: isEditor,
+            [isClosing ? backdropDisappearClass : backdropAppearClass]: isEditor
+          }),
           style: { ...isEditor && {
             backgroundColor: area.color,
             backdropFilter: `blur(${area.blur}px)`,
@@ -2023,6 +2100,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                                 [styles.cover]: item.image.objectFit === "cover",
                                 [styles.scaleSlide]: slider.type === "scale"
                               }),
+                              onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
                               src: item.image.url,
                               alt: item.image.name ?? "",
                               style: {
@@ -2049,12 +2127,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                         "button",
                         {
                           className: styles.arrowInner,
-                          style: {
-                            transform: `translate(${scalingValue(controls.offset.x, isEditor)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1), isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
-                          },
+                          style: { transform: `translate(${scalingValue(controls.offset.x, isEditor)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1), isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
                           onClick: (e) => {
                             handleArrowClick("-1");
                           },
+                          "aria-label": "Previous",
                           children: controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
                             SvgImage,
                             {
@@ -2077,9 +2154,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                         "button",
                         {
                           className: styles.arrowInner,
-                          style: {
-                            transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controls.offset.y, isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
-                          },
+                          style: { transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controls.offset.y, isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
                           onClick: (e) => {
                             handleArrowClick("+1");
                           },
@@ -2106,11 +2181,9 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                     "button",
                     {
                       className: styles.closeButton,
-                      style: {
-                        ...positionStyles,
-                        transform: combinedTransform
-                      },
+                      style: { ...positionStyles, transform: combinedTransform },
                       onClick: handleClose,
+                      "aria-label": "Close lightbox",
                       children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: area.closeIconUrl })
                     }
                   );
@@ -2134,7 +2207,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                       textDecoration: textAppearance.textDecoration ?? "none",
                       fontVariant: textAppearance.fontVariant ?? "normal",
                       color,
-                      transitionDuration: slider.duration ? `${Math.round(parseInt(slider.duration) / 2)}ms` : "500ms"
+                      transitionDuration: `${Math.round(parseInt(slider.duration) / 2)}ms`
                     },
                     onClick: (e) => e.stopPropagation(),
                     children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2163,10 +2236,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                         [styles.thumbsAlignEnd]: thumbnail.align === "end"
                       }
                     ),
-                    style: {
-                      gap: `${scalingValue(thumbnail.grid.gap, isEditor)}`,
-                      ...getPositionStyles(thumbnail.position, thumbnail.offset, isEditor)
-                    },
+                    style: { gap: scalingValue(thumbnail.grid.gap, isEditor), ...getPositionStyles(thumbnail.position, thumbnail.offset, isEditor) },
                     children: content.map((item, index) => {
                       const isActive = index === currentIndex;
                       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2174,10 +2244,10 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                         {
                           className: styles.thumbItem,
                           style: {
-                            ...slider.direction === "horiz" ? { height: isActive ? `${scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.height, isEditor)}` } : {},
-                            ...slider.direction === "vert" ? { width: isActive ? `${scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.width, isEditor)}` } : {},
-                            ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? `${scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.width, isEditor)}` } : {},
-                            ...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? `${scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.height, isEditor)}` } : {},
+                            ...slider.direction === "horiz" ? { height: isActive ? scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor) : scalingValue(thumbnail.grid.height, isEditor) } : {},
+                            ...slider.direction === "vert" ? { width: isActive ? scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor) : scalingValue(thumbnail.grid.width, isEditor) } : {},
+                            ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor) : scalingValue(thumbnail.grid.width, isEditor) } : {},
+                            ...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor) : scalingValue(thumbnail.grid.height, isEditor) } : {},
                             transition: isActive ? "all 0.2s ease" : "none",
                             opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
                             ["--thumb-hover"]: thumbnail.activeState.opacity / 100
@@ -2221,25 +2291,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     document.getElementById(portalId)
   );
 };
-const getColorAlpha = (color) => {
-  const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
-  if (rgbaMatch) {
-    const values = rgbaMatch[1].split(",").map((v) => parseFloat(v.trim()));
-    if (values.length === 4) {
-      return values[3];
-    }
-    return 1;
-  }
-  const hexMatch = color.match(/^#([0-9a-fA-F]{8})$/);
-  if (hexMatch) {
-    const alphaHex = hexMatch[1].substring(6, 8);
-    return parseInt(alphaHex, 16) / 255;
-  }
-  if (color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
-    return 1;
-  }
-  return 1;
-};
 const LightboxComponent = {
   element: LightboxGallery,
   id: "lightbox",
@@ -2795,7 +2846,7 @@ const LightboxComponent = {
                     }
                   },
                   hover: {
-                    title: "Hover",
+                    title: "Link Hover",
                     type: "string",
                     display: {
                       type: "settings-color-picker",

package/dist/index.mjs

@@ -738,7 +738,7 @@ const ControlSliderComponent = {
                 }
               },
               hover: {
-                title: "hover",
+                title: "Link Hover",
                 type: "string",
                 display: {
                   type: "settings-color-picker",
@@ -1244,7 +1244,7 @@ const ControlImageRevealSliderComponent = {
                 display: {
                   type: "ratio-group"
                 },
-                enum: ["as is", "custom", "random"]
+                enum: ["as Is", "custom", "random"]
               },
               imageWidth: {
                 type: "number",
@@ -1608,7 +1608,26 @@ function getDisplayedImageRect(img2) {
     height: renderedH
   };
 }
-function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) {
+function getColorAlpha(color) {
+  const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
+  if (rgbaMatch) {
+    const values = rgbaMatch[1].split(",").map((v) => parseFloat(v.trim()));
+    if (values.length === 4) {
+      return values[3];
+    }
+    return 1;
+  }
+  const hexMatch = color.match(/^#([0-9a-fA-F]{8})$/);
+  if (hexMatch) {
+    const alphaHex = hexMatch[1].substring(6, 8);
+    return parseInt(alphaHex, 16) / 255;
+  }
+  if (color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
+    return 1;
+  }
+  return 1;
+}
+const LightboxGallery = ({ settings, content, styles: styles2, portalId, activeEvent, isEditor }) => {
   const [open, setOpen] = React.useState(false);
   const { url } = settings.thumbnailBlock.cover;
   useEffect(() => {
@@ -1625,15 +1644,30 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
       {
         src: url,
         alt: "Cover",
-        style: { width: "100%", height: "100%", cursor: "pointer", objectFit: "cover" },
+        style: {
+          width: "100%",
+          height: "100%",
+          cursor: "pointer",
+          objectFit: "cover"
+        },
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, styles: styles2, portalId, isEditor, activeEvent })
+    /* @__PURE__ */ jsx(
+      Lightbox,
+      {
+        isOpen: open,
+        onClose: () => setOpen(false),
+        content,
+        settings,
+        lightboxStyles: styles2,
+        portalId,
+        isEditor
+      }
+    )
   ] });
-}
-const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings, portalId, isEditor }) => {
-  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.caption;
+};
+const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId, isEditor }) => {
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const [splideKey, setSplideKey] = React.useState(0);
   const [isClosing, setIsClosing] = React.useState(false);
@@ -1645,17 +1679,16 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   const animationEndHandlerRef = useRef(null);
   const appearAnimationEndHandlerRef = useRef(null);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
+  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.caption;
   const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
   useEffect(() => {
-    window.addEventListener("ArticleEditor.Layout:change", () => {
+    const handleLayoutChange = () => {
       var _a, _b;
       (_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
-    });
+    };
+    window.addEventListener("ArticleEditor.Layout:change", handleLayoutChange);
     return () => {
-      window.removeEventListener("ArticleEditor.Layout:change", () => {
-        var _a, _b;
-        (_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.refresh();
-      });
+      window.removeEventListener("ArticleEditor.Layout:change", handleLayoutChange);
     };
   }, []);
   const handleClose = useCallback(() => {
@@ -1688,13 +1721,8 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   };
   const handleImageWrapperClick = (e) => {
     var _a, _b;
-    const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
-    if (!rect) {
-      if (e.target === e.currentTarget) {
-        handleClose();
-      }
-      return;
-    }
+    const currentImage = content[currentIndex];
+    const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
     let clientX;
     let clientY;
     if ("changedTouches" in e && e.changedTouches.length > 0) {
@@ -1706,7 +1734,20 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     } else {
       return;
     }
-    const inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
+    let inside;
+    if (isCover && imageRef.current) {
+      const imgRect = imageRef.current.getBoundingClientRect();
+      inside = clientX >= imgRect.left && clientX <= imgRect.right && clientY >= imgRect.top && clientY <= imgRect.bottom;
+    } else {
+      const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+      if (!rect) {
+        if (e.target === e.currentTarget) {
+          handleClose();
+        }
+        return;
+      }
+      inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
+    }
     if (inside) {
       if (triggers.type === "click" && triggers.switch === "image") {
         if (triggers.repeat === "close" && currentIndex === content.length - 1) {
@@ -1751,6 +1792,32 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       handleClose();
     }
   };
+  const onImageClick = (e) => {
+    var _a, _b;
+    e.stopPropagation();
+    if (triggers.type === "click" && triggers.switch === "image") {
+      if (triggers.repeat === "close" && currentIndex === content.length - 1) {
+        handleClose();
+      } else {
+        (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
+      }
+    }
+    if (triggers.type === "click" && triggers.switch === "50/50") {
+      const img2 = e.currentTarget;
+      const rect = img2.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const clickY = e.clientY - rect.top;
+      const imgWidth = rect.width;
+      const imgHeight = rect.height;
+      let dir;
+      if (slider.direction === "horiz") {
+        dir = clickX < imgWidth / 2 ? "-1" : "+1";
+      } else {
+        dir = clickY < imgHeight / 2 ? "-1" : "+1";
+      }
+      (_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
+    }
+  };
   useEffect(() => {
     if (!isOpen) return;
     const onKeyDown = (event) => {
@@ -1907,11 +1974,18 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
         return;
       }
       if (e.touches.length === 0 && e.changedTouches.length > 0) {
-        const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
-        console.log("rect", rect);
-        if (!rect) return;
+        const currentImage = content[currentIndex];
+        const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
         const touch = e.changedTouches[0];
-        const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
+        let inside;
+        if (isCover && imageRef.current) {
+          const imgRect = imageRef.current.getBoundingClientRect();
+          inside = touch.clientX >= imgRect.left && touch.clientX <= imgRect.right && touch.clientY >= imgRect.top && touch.clientY <= imgRect.bottom;
+        } else {
+          const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+          if (!rect) return;
+          inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
+        }
         if (!inside) {
           e.stopPropagation();
           isClosingRef.current = true;
@@ -1929,7 +2003,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     return () => {
       document.removeEventListener("touchend", handleTouchEnd);
     };
-  }, [isOpen, handleClose, currentIndex]);
+  }, [isOpen, handleClose, currentIndex, content]);
   if (!isOpen && !isClosing) return null;
   return createPortal(
     /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1950,7 +2024,10 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn(styles.backdropStyle, { [styles.editor]: isEditor, [isClosing ? backdropDisappearClass : backdropAppearClass]: isEditor }),
+          className: cn(styles.backdropStyle, {
+            [styles.editor]: isEditor,
+            [isClosing ? backdropDisappearClass : backdropAppearClass]: isEditor
+          }),
           style: { ...isEditor && {
             backgroundColor: area.color,
             backdropFilter: `blur(${area.blur}px)`,
@@ -2021,6 +2098,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                                 [styles.cover]: item.image.objectFit === "cover",
                                 [styles.scaleSlide]: slider.type === "scale"
                               }),
+                              onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
                               src: item.image.url,
                               alt: item.image.name ?? "",
                               style: {
@@ -2047,12 +2125,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                         "button",
                         {
                           className: styles.arrowInner,
-                          style: {
-                            transform: `translate(${scalingValue(controls.offset.x, isEditor)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1), isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
-                          },
+                          style: { transform: `translate(${scalingValue(controls.offset.x, isEditor)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1), isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
                           onClick: (e) => {
                             handleArrowClick("-1");
                           },
+                          "aria-label": "Previous",
                           children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
                             SvgImage,
                             {
@@ -2075,9 +2152,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                         "button",
                         {
                           className: styles.arrowInner,
-                          style: {
-                            transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controls.offset.y, isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
-                          },
+                          style: { transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controls.offset.y, isEditor)}) scale(${controls.scale}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})` },
                           onClick: (e) => {
                             handleArrowClick("+1");
                           },
@@ -2104,11 +2179,9 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                     "button",
                     {
                       className: styles.closeButton,
-                      style: {
-                        ...positionStyles,
-                        transform: combinedTransform
-                      },
+                      style: { ...positionStyles, transform: combinedTransform },
                       onClick: handleClose,
+                      "aria-label": "Close lightbox",
                       children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl })
                     }
                   );
@@ -2132,7 +2205,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                       textDecoration: textAppearance.textDecoration ?? "none",
                       fontVariant: textAppearance.fontVariant ?? "normal",
                       color,
-                      transitionDuration: slider.duration ? `${Math.round(parseInt(slider.duration) / 2)}ms` : "500ms"
+                      transitionDuration: `${Math.round(parseInt(slider.duration) / 2)}ms`
                     },
                     onClick: (e) => e.stopPropagation(),
                     children: /* @__PURE__ */ jsx(
@@ -2161,10 +2234,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                         [styles.thumbsAlignEnd]: thumbnail.align === "end"
                       }
                     ),
-                    style: {
-                      gap: `${scalingValue(thumbnail.grid.gap, isEditor)}`,
-                      ...getPositionStyles(thumbnail.position, thumbnail.offset, isEditor)
-                    },
+                    style: { gap: scalingValue(thumbnail.grid.gap, isEditor), ...getPositionStyles(thumbnail.position, thumbnail.offset, isEditor) },
                     children: content.map((item, index) => {
                       const isActive = index === currentIndex;
                       return /* @__PURE__ */ jsx(
@@ -2172,10 +2242,10 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                         {
                           className: styles.thumbItem,
                           style: {
-                            ...slider.direction === "horiz" ? { height: isActive ? `${scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.height, isEditor)}` } : {},
-                            ...slider.direction === "vert" ? { width: isActive ? `${scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.width, isEditor)}` } : {},
-                            ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? `${scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.width, isEditor)}` } : {},
-                            ...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? `${scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor)}` : `${scalingValue(thumbnail.grid.height, isEditor)}` } : {},
+                            ...slider.direction === "horiz" ? { height: isActive ? scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor) : scalingValue(thumbnail.grid.height, isEditor) } : {},
+                            ...slider.direction === "vert" ? { width: isActive ? scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor) : scalingValue(thumbnail.grid.width, isEditor) } : {},
+                            ...thumbnail.fit === "cover" && slider.direction === "horiz" ? { width: isActive ? scalingValue(thumbnail.grid.width * (isActive ? thumbnail.activeState.scale : 1), isEditor) : scalingValue(thumbnail.grid.width, isEditor) } : {},
+                            ...thumbnail.fit === "cover" && slider.direction === "vert" ? { height: isActive ? scalingValue(thumbnail.grid.height * (isActive ? thumbnail.activeState.scale : 1), isEditor) : scalingValue(thumbnail.grid.height, isEditor) } : {},
                             transition: isActive ? "all 0.2s ease" : "none",
                             opacity: isActive ? thumbnail.activeState.opacity / 100 : thumbnail.opacity / 100,
                             ["--thumb-hover"]: thumbnail.activeState.opacity / 100
@@ -2219,25 +2289,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     document.getElementById(portalId)
   );
 };
-const getColorAlpha = (color) => {
-  const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
-  if (rgbaMatch) {
-    const values = rgbaMatch[1].split(",").map((v) => parseFloat(v.trim()));
-    if (values.length === 4) {
-      return values[3];
-    }
-    return 1;
-  }
-  const hexMatch = color.match(/^#([0-9a-fA-F]{8})$/);
-  if (hexMatch) {
-    const alphaHex = hexMatch[1].substring(6, 8);
-    return parseInt(alphaHex, 16) / 255;
-  }
-  if (color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
-    return 1;
-  }
-  return 1;
-};
 const LightboxComponent = {
   element: LightboxGallery,
   id: "lightbox",
@@ -2793,7 +2844,7 @@ const LightboxComponent = {
                     }
                   },
                   hover: {
-                    title: "Hover",
+                    title: "Link Hover",
                     type: "string",
                     display: {
                       type: "settings-color-picker",

package/package.json

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