@cntrl-site/components 0.1.0-22 → 0.1.0-24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- .ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__slider___R3i9-{width:100%;height:100%}.ControlSlider-module__sliderItems___1MgPL{display:flex;overflow:hidden;width:100%;height:100%;transition:transform .3s ease-in-out}.ControlSlider-module__sliderItem___QQSkR{width:100%;height:100%;display:flex;position:relative}.ControlSlider-module__sliderImage___9hRl-{width:100%;height:100%;object-fit:cover}.ControlSlider-module__arrow___05ghY{position:absolute;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;top:50%;left:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.ControlSlider-module__arrow___05ghY.ControlSlider-module__arrowVertical___tBfVN{left:50%;top:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,-50%)}.ControlSlider-module__nextArrow___-30Yc{left:unset;right:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(50%,-50%)}.ControlSlider-module__nextArrow___-30Yc.ControlSlider-module__arrowVertical___tBfVN{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,50%)}.ControlSlider-module__arrowInner___aEra3{all:unset;cursor:pointer;width:100%;height:100%}.ControlSlider-module__arrowInner___aEra3:hover .ControlSlider-module__arrowIcon___S4ztF path{fill:var(--arrow-hover-color)!important}.ControlSlider-module__arrowImg___2dwJW{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ControlSlider-module__arrowIcon___S4ztF{width:100%;height:100%}.ControlSlider-module__arrowIcon___S4ztF path{transition:fill .15s ease-in-out}.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleX(-1)!important}.ControlSlider-module__arrowVertical___tBfVN.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleY(-1)!important}.ControlSlider-module__pagination___bicLF{position:absolute;z-index:1;border-radius:50%}.ControlSlider-module__paginationInner___bT-P-{display:flex;gap:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);padding-top:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-bottom:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-left:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);padding-right:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);border-radius:calc(var(--is-editor, 0) * 2.3611111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.3611111111vw)}.ControlSlider-module__paginationVertical___zYqKw{flex-direction:column}.ControlSlider-module__paginationItem___nTRbk{all:unset;flex-shrink:0;position:relative;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);cursor:pointer}.ControlSlider-module__paginationItem___nTRbk:hover .ControlSlider-module__dot___p1Qun{background-color:var(--pagination-hover-color)!important}.ControlSlider-module__dot___p1Qun{border-radius:50%;scale:.5;transition:background-color .3s ease-in-out,transform .3s ease-in-out;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw)}.ControlSlider-module__activeDot___LHFaj{transform:scale(2)}.ControlSlider-module__paginationInsideBottom___R3FWn{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__paginationInsideTop___V-qb-{left:50%;transform:translate(-50%);top:0}.ControlSlider-module__paginationOutsideBottom___14w8D{left:50%;transform:translate(-50%);bottom:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideTop___SCLqB{left:50%;transform:translate(-50%);top:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideLeft___yOBRZ{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideRight___Rtt3o{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideLeft___lahaw{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__paginationOutsideRight___EtuQa{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__imgWrapper___UjEgB,.ControlSlider-module__wrapperInner___DLAWV{width:100%;height:100%}.ControlSlider-module__captionBlock___dJ6-j{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.ControlSlider-module__captionTextWrapper___HFlpf{position:relative;width:100%;height:100%}.ControlSlider-module__captionText___uGBVc{pointer-events:none;max-width:100%;transition-property:opacity;transition-timing-function:ease-in-out;position:absolute;display:inline-block;white-space:pre-wrap;overflow-wrap:break-word;opacity:0}.ControlSlider-module__captionText___uGBVc.ControlSlider-module__active___WZK4G{opacity:1}.ControlSlider-module__withPointerEvents___t-18M{pointer-events:auto}.ControlSlider-module__absolute___KxmYB{position:absolute}.ControlSlider-module__topLeftAlignment___zjnGM{top:0;left:0}.ControlSlider-module__topCenterAlignment___gD1xW{top:0;left:50%;transform:translate(-50%)}.ControlSlider-module__topRightAlignment___NMapS{top:0;right:0}.ControlSlider-module__middleLeftAlignment___OnUrY{top:50%;transform:translateY(-50%);left:0}.ControlSlider-module__middleCenterAlignment___Tdkl0{top:50%;transform:translate(-50%,-50%);left:50%}.ControlSlider-module__middleRightAlignment___wEbfX{top:50%;transform:translateY(-50%);right:0}.ControlSlider-module__bottomLeftAlignment___cTP2-{bottom:0;left:0}.ControlSlider-module__bottomCenterAlignment___c54fB{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__bottomRightAlignment___kEwrz{bottom:0;right:0}.ControlSlider-module__clickOverlay___DZA28{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.ControlSlider-module__contain___pLyq7{object-fit:contain}.ControlSlider-module__cover___KdDat{object-fit:cover}.RichTextRenderer-module__link___BWeZ2{color:inherit;cursor:pointer;pointer-events:auto;transition:color .2s ease}.RichTextRenderer-module__link___BWeZ2:hover{color:var(--link-hover-color)}.SvgImage-module__svg___q3xE-{width:100%;height:100%;color:transparent;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--fill);transition:background-color .2s;-webkit-mask:var(--svg) no-repeat center/contain;mask:var(--svg) no-repeat center/contain}.SvgImage-module__svg___q3xE-:hover{background-color:var(--hover-fill)}.SvgImage-module__img___VsTm-{width:100%;height:100%;object-fit:contain}.ImageRevealSlider-module__imageRevealSlider___UE5Ob{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.ImageRevealSlider-module__image___Qjt-e{width:100%;height:100%;object-fit:cover;position:relative;-webkit-user-select:none;user-select:none;pointer-events:none}.ImageRevealSlider-module__link___N-iLG{width:100%;height:100%;display:block}.LightBox-module__backdropStyle___yWDe2{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9999}.LightBox-module__contentStyle___Bgnsq{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__stageStyle___7C4KB{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden}.LightBox-module__imageStyle___tLIlB{position:absolute;display:block;cursor:pointer;background-color:transparent}.LightBox-module__sliderItem___iFlJ9{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.LightBox-module__imgWrapper___LuFUp{display:flex;width:100%;height:100%;overflow:hidden}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.LightBox-module__caption___b6L2I{position:absolute;display:flex}.LightBox-module__contentStyle___Bgnsq .splide,.LightBox-module__contentStyle___Bgnsq .splide__track{height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;left:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{left:50%;top:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,-50%)}.LightBox-module__nextArrow___zkAQN{left:unset;right:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(50%,-50%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,50%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__counterStyle___JFgB3{bottom:calc(var(--is-editor, 0) * .8333333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .8333333333vw);right:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);font-size:calc(var(--is-editor, 0) * .9722222222vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .9722222222vw);position:absolute;color:#fff;opacity:.85}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:auto}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignStart___MO6tY{align-items:center;justify-content:flex-start}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center;justify-content:center}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignEnd___p4y9R{align-items:center;justify-content:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__thumbImage___OJ19m{display:block;height:100%;width:calc(var(--is-editor, 0) * 5.5555555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 5.5555555556vw)}.LightBox-module__closeButton___g2khP{all:unset;cursor:pointer;position:absolute;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}.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}
1
+ .ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__slider___R3i9-{width:100%;height:100%}.ControlSlider-module__sliderItems___1MgPL{display:flex;overflow:hidden;width:100%;height:100%;transition:transform .3s ease-in-out}.ControlSlider-module__sliderItem___QQSkR{width:100%;height:100%;display:flex;position:relative}.ControlSlider-module__sliderImage___9hRl-{width:100%;height:100%;object-fit:cover}.ControlSlider-module__arrow___05ghY{position:absolute;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;top:50%;left:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.ControlSlider-module__arrow___05ghY.ControlSlider-module__arrowVertical___tBfVN{left:50%;top:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,-50%)}.ControlSlider-module__nextArrow___-30Yc{left:unset;right:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(50%,-50%)}.ControlSlider-module__nextArrow___-30Yc.ControlSlider-module__arrowVertical___tBfVN{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,50%)}.ControlSlider-module__arrowInner___aEra3{all:unset;cursor:pointer;width:100%;height:100%}.ControlSlider-module__arrowInner___aEra3:hover .ControlSlider-module__arrowIcon___S4ztF path{fill:var(--arrow-hover-color)!important}.ControlSlider-module__arrowImg___2dwJW{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ControlSlider-module__arrowIcon___S4ztF{width:100%;height:100%}.ControlSlider-module__arrowIcon___S4ztF path{transition:fill .15s ease-in-out}.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleX(-1)!important}.ControlSlider-module__arrowVertical___tBfVN.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleY(-1)!important}.ControlSlider-module__pagination___bicLF{position:absolute;z-index:1;border-radius:50%}.ControlSlider-module__paginationInner___bT-P-{display:flex;gap:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);padding-top:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-bottom:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-left:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);padding-right:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);border-radius:calc(var(--is-editor, 0) * 2.3611111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.3611111111vw)}.ControlSlider-module__paginationVertical___zYqKw{flex-direction:column}.ControlSlider-module__paginationItem___nTRbk{all:unset;flex-shrink:0;position:relative;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);cursor:pointer}.ControlSlider-module__paginationItem___nTRbk:hover .ControlSlider-module__dot___p1Qun{background-color:var(--pagination-hover-color)!important}.ControlSlider-module__dot___p1Qun{border-radius:50%;scale:.5;transition:background-color .3s ease-in-out,transform .3s ease-in-out;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw)}.ControlSlider-module__activeDot___LHFaj{transform:scale(2)}.ControlSlider-module__paginationInsideBottom___R3FWn{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__paginationInsideTop___V-qb-{left:50%;transform:translate(-50%);top:0}.ControlSlider-module__paginationOutsideBottom___14w8D{left:50%;transform:translate(-50%);bottom:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideTop___SCLqB{left:50%;transform:translate(-50%);top:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideLeft___yOBRZ{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideRight___Rtt3o{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideLeft___lahaw{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__paginationOutsideRight___EtuQa{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__imgWrapper___UjEgB,.ControlSlider-module__wrapperInner___DLAWV{width:100%;height:100%}.ControlSlider-module__captionBlock___dJ6-j{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.ControlSlider-module__captionTextWrapper___HFlpf{position:relative;width:100%;height:100%}.ControlSlider-module__captionText___uGBVc{pointer-events:none;max-width:100%;transition-property:opacity;transition-timing-function:ease-in-out;position:absolute;display:inline-block;white-space:pre-wrap;overflow-wrap:break-word;opacity:0}.ControlSlider-module__captionText___uGBVc.ControlSlider-module__active___WZK4G{opacity:1}.ControlSlider-module__withPointerEvents___t-18M{pointer-events:auto}.ControlSlider-module__absolute___KxmYB{position:absolute}.ControlSlider-module__topLeftAlignment___zjnGM{top:0;left:0}.ControlSlider-module__topCenterAlignment___gD1xW{top:0;left:50%;transform:translate(-50%)}.ControlSlider-module__topRightAlignment___NMapS{top:0;right:0}.ControlSlider-module__middleLeftAlignment___OnUrY{top:50%;transform:translateY(-50%);left:0}.ControlSlider-module__middleCenterAlignment___Tdkl0{top:50%;transform:translate(-50%,-50%);left:50%}.ControlSlider-module__middleRightAlignment___wEbfX{top:50%;transform:translateY(-50%);right:0}.ControlSlider-module__bottomLeftAlignment___cTP2-{bottom:0;left:0}.ControlSlider-module__bottomCenterAlignment___c54fB{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__bottomRightAlignment___kEwrz{bottom:0;right:0}.ControlSlider-module__clickOverlay___DZA28{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.ControlSlider-module__contain___pLyq7{object-fit:contain}.ControlSlider-module__cover___KdDat{object-fit:cover}.RichTextRenderer-module__link___BWeZ2{color:inherit;cursor:pointer;pointer-events:auto;transition:color .2s ease}.RichTextRenderer-module__link___BWeZ2:hover{color:var(--link-hover-color)}.SvgImage-module__svg___q3xE-{width:100%;height:100%;color:transparent;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--fill);transition:background-color .2s;-webkit-mask:var(--svg) no-repeat center/contain;mask:var(--svg) no-repeat center/contain}.SvgImage-module__svg___q3xE-:hover{background-color:var(--hover-fill)}.SvgImage-module__img___VsTm-{width:100%;height:100%;object-fit:contain}.ImageRevealSlider-module__imageRevealSlider___UE5Ob{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.ImageRevealSlider-module__image___Qjt-e{width:100%;height:100%;object-fit:cover;position:relative;-webkit-user-select:none;user-select:none;pointer-events:none}.ImageRevealSlider-module__link___N-iLG{width:100%;height:100%;display:block}.LightBox-module__backdropStyle___yWDe2{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9999}.LightBox-module__contentStyle___Bgnsq{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__stageStyle___7C4KB{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden}.LightBox-module__imageStyle___tLIlB{position:absolute;display:block;cursor:pointer;background-color:transparent}.LightBox-module__sliderItem___iFlJ9{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.LightBox-module__imgWrapper___LuFUp{display:flex;width:100%;height:100%;overflow:hidden}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.LightBox-module__caption___b6L2I{position:absolute;display:flex}.LightBox-module__lightboxSplide___XFuWC.splide,.LightBox-module__lightboxSplide___XFuWC .splide__track{height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;left:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{left:50%;top:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,-50%)}.LightBox-module__nextArrow___zkAQN{left:unset;right:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(50%,-50%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,50%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__counterStyle___JFgB3{bottom:calc(var(--is-editor, 0) * .8333333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .8333333333vw);right:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);font-size:calc(var(--is-editor, 0) * .9722222222vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .9722222222vw);position:absolute;color:#fff;opacity:.85}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:auto}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignStart___MO6tY{align-items:center;justify-content:flex-start}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center;justify-content:center}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignEnd___p4y9R{align-items:center;justify-content:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__thumbImage___OJ19m{display:block;height:100%;width:calc(var(--is-editor, 0) * 5.5555555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 5.5555555556vw)}.LightBox-module__closeButton___g2khP{all:unset;cursor:pointer;position:absolute;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}.LightBox-module__lightboxSplide___XFuWC.splide--fade .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(.9)!important;transition:opacity var(--splide-speed, .5s) ease,transform var(--splide-speed, .5s) ease!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide.is-active .LightBox-module__scaleSlide___vZriG{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide:not(.is-active) .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}.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 CHANGED
@@ -1450,6 +1450,7 @@ const imgWrapper = "LightBox-module__imgWrapper___LuFUp";
1450
1450
  const contain = "LightBox-module__contain___8-yaS";
1451
1451
  const cover = "LightBox-module__cover___hNvOG";
1452
1452
  const caption = "LightBox-module__caption___b6L2I";
1453
+ const lightboxSplide = "LightBox-module__lightboxSplide___XFuWC";
1453
1454
  const arrow = "LightBox-module__arrow___iz38X";
1454
1455
  const arrowVertical = "LightBox-module__arrowVertical___Zfz81";
1455
1456
  const nextArrow = "LightBox-module__nextArrow___zkAQN";
@@ -1469,6 +1470,7 @@ const slideInLeft = "LightBox-module__slideInLeft___gPYwC";
1469
1470
  const slideInRight = "LightBox-module__slideInRight___S-pPp";
1470
1471
  const slideInTop = "LightBox-module__slideInTop___DFdAj";
1471
1472
  const slideInBottom = "LightBox-module__slideInBottom___m27kZ";
1473
+ const scaleSlide = "LightBox-module__scaleSlide___vZriG";
1472
1474
  const styles = {
1473
1475
  backdropStyle,
1474
1476
  contentStyle,
@@ -1477,6 +1479,7 @@ const styles = {
1477
1479
  contain,
1478
1480
  cover,
1479
1481
  caption,
1482
+ lightboxSplide,
1480
1483
  arrow,
1481
1484
  arrowVertical,
1482
1485
  nextArrow,
@@ -1495,30 +1498,31 @@ const styles = {
1495
1498
  slideInLeft,
1496
1499
  slideInRight,
1497
1500
  slideInTop,
1498
- slideInBottom
1501
+ slideInBottom,
1502
+ scaleSlide
1499
1503
  };
1500
1504
  const getPositionStyles = (position, offset) => {
1501
1505
  const styles2 = {};
1502
1506
  const [vertical, horizontal] = position.split("-");
1503
1507
  if (vertical === "top") {
1504
- styles2.top = `${offset.y}px`;
1508
+ styles2.top = "0";
1505
1509
  styles2.bottom = "auto";
1506
1510
  } else if (vertical === "middle") {
1507
1511
  styles2.top = "50%";
1508
1512
  styles2.bottom = "auto";
1509
1513
  } else if (vertical === "bottom") {
1510
1514
  styles2.top = "auto";
1511
- styles2.bottom = `${offset.y}px`;
1515
+ styles2.bottom = "0";
1512
1516
  }
1513
1517
  if (horizontal === "left") {
1514
- styles2.left = `${offset.x}px`;
1518
+ styles2.left = "0";
1515
1519
  styles2.right = "auto";
1516
1520
  } else if (horizontal === "center") {
1517
1521
  styles2.left = "50%";
1518
1522
  styles2.right = "auto";
1519
1523
  } else if (horizontal === "right") {
1520
1524
  styles2.left = "auto";
1521
- styles2.right = `${offset.x}px`;
1525
+ styles2.right = "0";
1522
1526
  }
1523
1527
  if (vertical === "middle" && horizontal === "center") {
1524
1528
  styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
@@ -1526,6 +1530,8 @@ const getPositionStyles = (position, offset) => {
1526
1530
  styles2.transform = `translate(${offset.x}px, calc(-50% + ${offset.y}px))`;
1527
1531
  } else if (horizontal === "center") {
1528
1532
  styles2.transform = `translate(calc(-50% + ${offset.x}px), ${offset.y}px)`;
1533
+ } else {
1534
+ styles2.transform = `translate(${offset.x}px, ${offset.y}px)`;
1529
1535
  }
1530
1536
  return styles2;
1531
1537
  };
@@ -1556,6 +1562,7 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
1556
1562
  const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId }) => {
1557
1563
  const [currentIndex, setCurrentIndex] = React.useState(0);
1558
1564
  const lightboxRef = React.useRef(null);
1565
+ const resizeObserverRef = React.useRef(null);
1559
1566
  const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
1560
1567
  const handleBackdropClick = (e) => {
1561
1568
  if (!closeOnBackdropClick) return;
@@ -1615,6 +1622,49 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1615
1622
  React.useEffect(() => {
1616
1623
  if (isOpen) setCurrentIndex(0);
1617
1624
  }, [isOpen]);
1625
+ React.useEffect(() => {
1626
+ if (!isOpen) return;
1627
+ if (resizeObserverRef.current) {
1628
+ resizeObserverRef.current.disconnect();
1629
+ resizeObserverRef.current = null;
1630
+ }
1631
+ const timeoutId = setTimeout(() => {
1632
+ const activeSlide = document.querySelector(".splide__slide.is-active");
1633
+ if (!activeSlide) return;
1634
+ const img2 = activeSlide.querySelector("img");
1635
+ const container = activeSlide.querySelector(`.${styles.imgWrapper}`);
1636
+ if (!img2 || !container) return;
1637
+ const updateImageSize = () => {
1638
+ if (!img2.naturalWidth || !img2.naturalHeight) return;
1639
+ const imageAspectRatio = img2.naturalWidth / img2.naturalHeight;
1640
+ const containerWidth = container.clientWidth;
1641
+ const containerHeight = container.clientHeight;
1642
+ const containerAspectRatio = containerWidth / containerHeight;
1643
+ if (imageAspectRatio > containerAspectRatio) {
1644
+ img2.style.width = "100%";
1645
+ } else {
1646
+ img2.style.height = "100%";
1647
+ }
1648
+ };
1649
+ if (img2.complete) {
1650
+ updateImageSize();
1651
+ } else {
1652
+ img2.onload = updateImageSize;
1653
+ }
1654
+ resizeObserverRef.current = new ResizeObserver(() => {
1655
+ updateImageSize();
1656
+ });
1657
+ resizeObserverRef.current.observe(container);
1658
+ resizeObserverRef.current.observe(img2);
1659
+ }, 0);
1660
+ return () => {
1661
+ clearTimeout(timeoutId);
1662
+ if (resizeObserverRef.current) {
1663
+ resizeObserverRef.current.disconnect();
1664
+ resizeObserverRef.current = null;
1665
+ }
1666
+ };
1667
+ }, [isOpen, currentIndex, content]);
1618
1668
  const handleArrowClick = (dir) => {
1619
1669
  var _a;
1620
1670
  (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
@@ -1623,6 +1673,14 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1623
1673
  const appearClass = (() => {
1624
1674
  if (appear.type === "fade in") return styles.fadeIn;
1625
1675
  if (appear.type === "slide in") {
1676
+ return "";
1677
+ }
1678
+ if (appear.type === "mix") return styles.fadeIn;
1679
+ return styles.fadeIn;
1680
+ })();
1681
+ const backdropAppearClass = (() => {
1682
+ if (appear.type === "fade in") return styles.fadeIn;
1683
+ if (appear.type === "slide in" || appear.type === "mix") {
1626
1684
  switch (appear.direction) {
1627
1685
  case "left":
1628
1686
  return styles.slideInLeft;
@@ -1643,7 +1701,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1643
1701
  /* @__PURE__ */ jsxRuntime.jsx(
1644
1702
  "div",
1645
1703
  {
1646
- className: cn(styles.backdropStyle, styles.fadeIn),
1704
+ className: cn(styles.backdropStyle, backdropAppearClass),
1647
1705
  style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
1648
1706
  onClick: handleBackdropClick,
1649
1707
  children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1655,6 +1713,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1655
1713
  animationDuration: `${appearDurationMs}ms`,
1656
1714
  animationTimingFunction: "ease",
1657
1715
  animationFillMode: "both",
1716
+ ...appear.type === "mix" && { animationDelay: "0.5s" },
1658
1717
  "--splide-speed": triggers.duration || "500ms"
1659
1718
  },
1660
1719
  children: [
@@ -1665,6 +1724,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1665
1724
  setCurrentIndex(splide.index);
1666
1725
  },
1667
1726
  ref: lightboxRef,
1727
+ className: styles.lightboxSplide,
1668
1728
  options: {
1669
1729
  arrows: false,
1670
1730
  speed: triggers.duration ? parseInt(triggers.duration) : 500,
@@ -1678,23 +1738,38 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1678
1738
  padding: 0,
1679
1739
  rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
1680
1740
  },
1681
- style: {
1682
- "--splide-speed": triggers.duration || "500ms"
1683
- },
1684
- children: content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.imgWrapper, onClick: handleImageWrapperClick, children: /* @__PURE__ */ jsxRuntime.jsx(
1685
- "img",
1686
- {
1687
- className: cn(styles.imageStyle, {
1688
- [styles.contain]: item.image.objectFit === "contain",
1689
- [styles.cover]: item.image.objectFit === "cover",
1690
- [styles.scaleSlide]: slider.type === "scale"
1691
- }),
1692
- src: item.image.url,
1693
- alt: item.image.name ?? "",
1694
- onClick: onImageClick,
1695
- style: getPositionStyles(layout.position, layout.offset)
1696
- }
1697
- ) }) }, index))
1741
+ style: { "--splide-speed": triggers.duration || "500ms" },
1742
+ children: content.map((item, index) => {
1743
+ const positionStyles = getPositionStyles(layout.position, layout.offset);
1744
+ const imageStyle2 = slider.type === "scale" ? (() => {
1745
+ const { transform, ...restStyles } = positionStyles;
1746
+ return {
1747
+ ...restStyles,
1748
+ "--position-transform": transform || "none"
1749
+ };
1750
+ })() : positionStyles;
1751
+ return /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
1752
+ "div",
1753
+ {
1754
+ className: styles.imgWrapper,
1755
+ onClick: handleImageWrapperClick,
1756
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1757
+ "img",
1758
+ {
1759
+ className: cn(styles.imageStyle, {
1760
+ [styles.contain]: item.image.objectFit === "contain",
1761
+ [styles.cover]: item.image.objectFit === "cover",
1762
+ [styles.scaleSlide]: slider.type === "scale"
1763
+ }),
1764
+ src: item.image.url,
1765
+ alt: item.image.name ?? "",
1766
+ onClick: onImageClick,
1767
+ style: imageStyle2
1768
+ }
1769
+ )
1770
+ }
1771
+ ) }, index);
1772
+ })
1698
1773
  }
1699
1774
  ),
1700
1775
  controls.isActive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1922,8 +1997,8 @@ const LightboxComponent = {
1922
1997
  type: "string",
1923
1998
  title: "FROM",
1924
1999
  display: {
1925
- visible: true,
1926
- type: "direction-control"
2000
+ type: "direction-control",
2001
+ visible: false
1927
2002
  },
1928
2003
  enum: ["top", "left", "right", "bottom"]
1929
2004
  },
@@ -1953,8 +2028,8 @@ const LightboxComponent = {
1953
2028
  switch: {
1954
2029
  type: "string",
1955
2030
  display: {
1956
- visible: true,
1957
- type: "ratio-group"
2031
+ type: "ratio-group",
2032
+ visible: false
1958
2033
  },
1959
2034
  enum: ["image", "50/50"]
1960
2035
  },
@@ -1962,8 +2037,8 @@ const LightboxComponent = {
1962
2037
  type: "string",
1963
2038
  label: "T",
1964
2039
  display: {
1965
- visible: true,
1966
- type: "step-selector"
2040
+ type: "step-selector",
2041
+ visible: false
1967
2042
  },
1968
2043
  enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
1969
2044
  }
@@ -2046,7 +2121,8 @@ const LightboxComponent = {
2046
2121
  type: "number",
2047
2122
  label: "H",
2048
2123
  display: {
2049
- type: "numeric-input"
2124
+ type: "numeric-input",
2125
+ visible: false
2050
2126
  }
2051
2127
  },
2052
2128
  width: {
@@ -2370,6 +2446,7 @@ const LightboxComponent = {
2370
2446
  triggers: "clk",
2371
2447
  grid: {
2372
2448
  height: 60,
2449
+ width: 60,
2373
2450
  gap: 8
2374
2451
  },
2375
2452
  offset: { x: 0, y: 0 },
@@ -2431,22 +2508,22 @@ const LightboxComponent = {
2431
2508
  },
2432
2509
  {
2433
2510
  if: {
2434
- name: "triggers.type",
2435
- value: "drag"
2511
+ name: "slider.direction",
2512
+ value: "vert"
2436
2513
  },
2437
2514
  then: {
2438
- name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
2439
- value: false
2515
+ name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
2516
+ value: true
2440
2517
  }
2441
2518
  },
2442
2519
  {
2443
2520
  if: {
2444
- name: "triggers.type",
2445
- value: "drag"
2521
+ name: "slider.direction",
2522
+ value: "horiz"
2446
2523
  },
2447
2524
  then: {
2448
- name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
2449
- value: false
2525
+ name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
2526
+ value: true
2450
2527
  }
2451
2528
  },
2452
2529
  {
@@ -2455,48 +2532,58 @@ const LightboxComponent = {
2455
2532
  value: "vert"
2456
2533
  },
2457
2534
  then: {
2458
- name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
2459
- value: true
2535
+ name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
2536
+ value: false
2460
2537
  }
2461
2538
  },
2462
2539
  {
2463
2540
  if: {
2464
2541
  name: "slider.direction",
2465
- value: "vert"
2542
+ value: "horiz"
2466
2543
  },
2467
2544
  then: {
2468
- name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
2545
+ name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
2469
2546
  value: false
2470
2547
  }
2471
2548
  },
2472
2549
  {
2473
2550
  if: {
2474
2551
  name: "appear.type",
2475
- value: "fade in"
2552
+ value: "mix"
2476
2553
  },
2477
2554
  then: {
2478
2555
  name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
2479
- value: false
2556
+ value: true
2557
+ }
2558
+ },
2559
+ {
2560
+ if: {
2561
+ name: "appear.type",
2562
+ value: "slide in"
2563
+ },
2564
+ then: {
2565
+ name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
2566
+ value: true
2480
2567
  }
2481
2568
  },
2482
2569
  {
2483
2570
  if: {
2484
2571
  name: "triggers.type",
2485
- value: "drag"
2572
+ value: "click"
2486
2573
  },
2487
2574
  then: {
2488
2575
  name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
2489
- value: false
2576
+ value: true
2490
2577
  }
2491
2578
  },
2492
2579
  {
2493
2580
  if: {
2494
2581
  name: "triggers.type",
2495
- value: "drag"
2582
+ value: "click"
2496
2583
  },
2497
2584
  then: {
2498
2585
  name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
2499
- value: false
2586
+ value: true
2500
2587
  }
2501
2588
  }
2502
2589
  ]
package/dist/index.mjs CHANGED
@@ -1448,6 +1448,7 @@ const imgWrapper = "LightBox-module__imgWrapper___LuFUp";
1448
1448
  const contain = "LightBox-module__contain___8-yaS";
1449
1449
  const cover = "LightBox-module__cover___hNvOG";
1450
1450
  const caption = "LightBox-module__caption___b6L2I";
1451
+ const lightboxSplide = "LightBox-module__lightboxSplide___XFuWC";
1451
1452
  const arrow = "LightBox-module__arrow___iz38X";
1452
1453
  const arrowVertical = "LightBox-module__arrowVertical___Zfz81";
1453
1454
  const nextArrow = "LightBox-module__nextArrow___zkAQN";
@@ -1467,6 +1468,7 @@ const slideInLeft = "LightBox-module__slideInLeft___gPYwC";
1467
1468
  const slideInRight = "LightBox-module__slideInRight___S-pPp";
1468
1469
  const slideInTop = "LightBox-module__slideInTop___DFdAj";
1469
1470
  const slideInBottom = "LightBox-module__slideInBottom___m27kZ";
1471
+ const scaleSlide = "LightBox-module__scaleSlide___vZriG";
1470
1472
  const styles = {
1471
1473
  backdropStyle,
1472
1474
  contentStyle,
@@ -1475,6 +1477,7 @@ const styles = {
1475
1477
  contain,
1476
1478
  cover,
1477
1479
  caption,
1480
+ lightboxSplide,
1478
1481
  arrow,
1479
1482
  arrowVertical,
1480
1483
  nextArrow,
@@ -1493,30 +1496,31 @@ const styles = {
1493
1496
  slideInLeft,
1494
1497
  slideInRight,
1495
1498
  slideInTop,
1496
- slideInBottom
1499
+ slideInBottom,
1500
+ scaleSlide
1497
1501
  };
1498
1502
  const getPositionStyles = (position, offset) => {
1499
1503
  const styles2 = {};
1500
1504
  const [vertical, horizontal] = position.split("-");
1501
1505
  if (vertical === "top") {
1502
- styles2.top = `${offset.y}px`;
1506
+ styles2.top = "0";
1503
1507
  styles2.bottom = "auto";
1504
1508
  } else if (vertical === "middle") {
1505
1509
  styles2.top = "50%";
1506
1510
  styles2.bottom = "auto";
1507
1511
  } else if (vertical === "bottom") {
1508
1512
  styles2.top = "auto";
1509
- styles2.bottom = `${offset.y}px`;
1513
+ styles2.bottom = "0";
1510
1514
  }
1511
1515
  if (horizontal === "left") {
1512
- styles2.left = `${offset.x}px`;
1516
+ styles2.left = "0";
1513
1517
  styles2.right = "auto";
1514
1518
  } else if (horizontal === "center") {
1515
1519
  styles2.left = "50%";
1516
1520
  styles2.right = "auto";
1517
1521
  } else if (horizontal === "right") {
1518
1522
  styles2.left = "auto";
1519
- styles2.right = `${offset.x}px`;
1523
+ styles2.right = "0";
1520
1524
  }
1521
1525
  if (vertical === "middle" && horizontal === "center") {
1522
1526
  styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
@@ -1524,6 +1528,8 @@ const getPositionStyles = (position, offset) => {
1524
1528
  styles2.transform = `translate(${offset.x}px, calc(-50% + ${offset.y}px))`;
1525
1529
  } else if (horizontal === "center") {
1526
1530
  styles2.transform = `translate(calc(-50% + ${offset.x}px), ${offset.y}px)`;
1531
+ } else {
1532
+ styles2.transform = `translate(${offset.x}px, ${offset.y}px)`;
1527
1533
  }
1528
1534
  return styles2;
1529
1535
  };
@@ -1554,6 +1560,7 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
1554
1560
  const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId }) => {
1555
1561
  const [currentIndex, setCurrentIndex] = React.useState(0);
1556
1562
  const lightboxRef = useRef(null);
1563
+ const resizeObserverRef = useRef(null);
1557
1564
  const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
1558
1565
  const handleBackdropClick = (e) => {
1559
1566
  if (!closeOnBackdropClick) return;
@@ -1613,6 +1620,49 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1613
1620
  useEffect(() => {
1614
1621
  if (isOpen) setCurrentIndex(0);
1615
1622
  }, [isOpen]);
1623
+ useEffect(() => {
1624
+ if (!isOpen) return;
1625
+ if (resizeObserverRef.current) {
1626
+ resizeObserverRef.current.disconnect();
1627
+ resizeObserverRef.current = null;
1628
+ }
1629
+ const timeoutId = setTimeout(() => {
1630
+ const activeSlide = document.querySelector(".splide__slide.is-active");
1631
+ if (!activeSlide) return;
1632
+ const img2 = activeSlide.querySelector("img");
1633
+ const container = activeSlide.querySelector(`.${styles.imgWrapper}`);
1634
+ if (!img2 || !container) return;
1635
+ const updateImageSize = () => {
1636
+ if (!img2.naturalWidth || !img2.naturalHeight) return;
1637
+ const imageAspectRatio = img2.naturalWidth / img2.naturalHeight;
1638
+ const containerWidth = container.clientWidth;
1639
+ const containerHeight = container.clientHeight;
1640
+ const containerAspectRatio = containerWidth / containerHeight;
1641
+ if (imageAspectRatio > containerAspectRatio) {
1642
+ img2.style.width = "100%";
1643
+ } else {
1644
+ img2.style.height = "100%";
1645
+ }
1646
+ };
1647
+ if (img2.complete) {
1648
+ updateImageSize();
1649
+ } else {
1650
+ img2.onload = updateImageSize;
1651
+ }
1652
+ resizeObserverRef.current = new ResizeObserver(() => {
1653
+ updateImageSize();
1654
+ });
1655
+ resizeObserverRef.current.observe(container);
1656
+ resizeObserverRef.current.observe(img2);
1657
+ }, 0);
1658
+ return () => {
1659
+ clearTimeout(timeoutId);
1660
+ if (resizeObserverRef.current) {
1661
+ resizeObserverRef.current.disconnect();
1662
+ resizeObserverRef.current = null;
1663
+ }
1664
+ };
1665
+ }, [isOpen, currentIndex, content]);
1616
1666
  const handleArrowClick = (dir) => {
1617
1667
  var _a;
1618
1668
  (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
@@ -1621,6 +1671,14 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1621
1671
  const appearClass = (() => {
1622
1672
  if (appear.type === "fade in") return styles.fadeIn;
1623
1673
  if (appear.type === "slide in") {
1674
+ return "";
1675
+ }
1676
+ if (appear.type === "mix") return styles.fadeIn;
1677
+ return styles.fadeIn;
1678
+ })();
1679
+ const backdropAppearClass = (() => {
1680
+ if (appear.type === "fade in") return styles.fadeIn;
1681
+ if (appear.type === "slide in" || appear.type === "mix") {
1624
1682
  switch (appear.direction) {
1625
1683
  case "left":
1626
1684
  return styles.slideInLeft;
@@ -1641,7 +1699,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1641
1699
  /* @__PURE__ */ jsx(
1642
1700
  "div",
1643
1701
  {
1644
- className: cn(styles.backdropStyle, styles.fadeIn),
1702
+ className: cn(styles.backdropStyle, backdropAppearClass),
1645
1703
  style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
1646
1704
  onClick: handleBackdropClick,
1647
1705
  children: /* @__PURE__ */ jsxs(
@@ -1653,6 +1711,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1653
1711
  animationDuration: `${appearDurationMs}ms`,
1654
1712
  animationTimingFunction: "ease",
1655
1713
  animationFillMode: "both",
1714
+ ...appear.type === "mix" && { animationDelay: "0.5s" },
1656
1715
  "--splide-speed": triggers.duration || "500ms"
1657
1716
  },
1658
1717
  children: [
@@ -1663,6 +1722,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1663
1722
  setCurrentIndex(splide.index);
1664
1723
  },
1665
1724
  ref: lightboxRef,
1725
+ className: styles.lightboxSplide,
1666
1726
  options: {
1667
1727
  arrows: false,
1668
1728
  speed: triggers.duration ? parseInt(triggers.duration) : 500,
@@ -1676,23 +1736,38 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1676
1736
  padding: 0,
1677
1737
  rewind: (slider.type === "scale" || slider.type === "fade") && appear.repeat !== "close"
1678
1738
  },
1679
- style: {
1680
- "--splide-speed": triggers.duration || "500ms"
1681
- },
1682
- children: content.map((item, index) => /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx("div", { className: styles.imgWrapper, onClick: handleImageWrapperClick, children: /* @__PURE__ */ jsx(
1683
- "img",
1684
- {
1685
- className: cn(styles.imageStyle, {
1686
- [styles.contain]: item.image.objectFit === "contain",
1687
- [styles.cover]: item.image.objectFit === "cover",
1688
- [styles.scaleSlide]: slider.type === "scale"
1689
- }),
1690
- src: item.image.url,
1691
- alt: item.image.name ?? "",
1692
- onClick: onImageClick,
1693
- style: getPositionStyles(layout.position, layout.offset)
1694
- }
1695
- ) }) }, index))
1739
+ style: { "--splide-speed": triggers.duration || "500ms" },
1740
+ children: content.map((item, index) => {
1741
+ const positionStyles = getPositionStyles(layout.position, layout.offset);
1742
+ const imageStyle2 = slider.type === "scale" ? (() => {
1743
+ const { transform, ...restStyles } = positionStyles;
1744
+ return {
1745
+ ...restStyles,
1746
+ "--position-transform": transform || "none"
1747
+ };
1748
+ })() : positionStyles;
1749
+ return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
1750
+ "div",
1751
+ {
1752
+ className: styles.imgWrapper,
1753
+ onClick: handleImageWrapperClick,
1754
+ children: /* @__PURE__ */ jsx(
1755
+ "img",
1756
+ {
1757
+ className: cn(styles.imageStyle, {
1758
+ [styles.contain]: item.image.objectFit === "contain",
1759
+ [styles.cover]: item.image.objectFit === "cover",
1760
+ [styles.scaleSlide]: slider.type === "scale"
1761
+ }),
1762
+ src: item.image.url,
1763
+ alt: item.image.name ?? "",
1764
+ onClick: onImageClick,
1765
+ style: imageStyle2
1766
+ }
1767
+ )
1768
+ }
1769
+ ) }, index);
1770
+ })
1696
1771
  }
1697
1772
  ),
1698
1773
  controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1920,8 +1995,8 @@ const LightboxComponent = {
1920
1995
  type: "string",
1921
1996
  title: "FROM",
1922
1997
  display: {
1923
- visible: true,
1924
- type: "direction-control"
1998
+ type: "direction-control",
1999
+ visible: false
1925
2000
  },
1926
2001
  enum: ["top", "left", "right", "bottom"]
1927
2002
  },
@@ -1951,8 +2026,8 @@ const LightboxComponent = {
1951
2026
  switch: {
1952
2027
  type: "string",
1953
2028
  display: {
1954
- visible: true,
1955
- type: "ratio-group"
2029
+ type: "ratio-group",
2030
+ visible: false
1956
2031
  },
1957
2032
  enum: ["image", "50/50"]
1958
2033
  },
@@ -1960,8 +2035,8 @@ const LightboxComponent = {
1960
2035
  type: "string",
1961
2036
  label: "T",
1962
2037
  display: {
1963
- visible: true,
1964
- type: "step-selector"
2038
+ type: "step-selector",
2039
+ visible: false
1965
2040
  },
1966
2041
  enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
1967
2042
  }
@@ -2044,7 +2119,8 @@ const LightboxComponent = {
2044
2119
  type: "number",
2045
2120
  label: "H",
2046
2121
  display: {
2047
- type: "numeric-input"
2122
+ type: "numeric-input",
2123
+ visible: false
2048
2124
  }
2049
2125
  },
2050
2126
  width: {
@@ -2368,6 +2444,7 @@ const LightboxComponent = {
2368
2444
  triggers: "clk",
2369
2445
  grid: {
2370
2446
  height: 60,
2447
+ width: 60,
2371
2448
  gap: 8
2372
2449
  },
2373
2450
  offset: { x: 0, y: 0 },
@@ -2429,22 +2506,22 @@ const LightboxComponent = {
2429
2506
  },
2430
2507
  {
2431
2508
  if: {
2432
- name: "triggers.type",
2433
- value: "drag"
2509
+ name: "slider.direction",
2510
+ value: "vert"
2434
2511
  },
2435
2512
  then: {
2436
- name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
2437
- value: false
2513
+ name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
2514
+ value: true
2438
2515
  }
2439
2516
  },
2440
2517
  {
2441
2518
  if: {
2442
- name: "triggers.type",
2443
- value: "drag"
2519
+ name: "slider.direction",
2520
+ value: "horiz"
2444
2521
  },
2445
2522
  then: {
2446
- name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
2447
- value: false
2523
+ name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
2524
+ value: true
2448
2525
  }
2449
2526
  },
2450
2527
  {
@@ -2453,48 +2530,58 @@ const LightboxComponent = {
2453
2530
  value: "vert"
2454
2531
  },
2455
2532
  then: {
2456
- name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
2457
- value: true
2533
+ name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
2534
+ value: false
2458
2535
  }
2459
2536
  },
2460
2537
  {
2461
2538
  if: {
2462
2539
  name: "slider.direction",
2463
- value: "vert"
2540
+ value: "horiz"
2464
2541
  },
2465
2542
  then: {
2466
- name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.height.display.visible",
2543
+ name: "properties.lightboxBlock.properties.thumbnail.properties.grid.properties.width.display.visible",
2467
2544
  value: false
2468
2545
  }
2469
2546
  },
2470
2547
  {
2471
2548
  if: {
2472
2549
  name: "appear.type",
2473
- value: "fade in"
2550
+ value: "mix"
2474
2551
  },
2475
2552
  then: {
2476
2553
  name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
2477
- value: false
2554
+ value: true
2555
+ }
2556
+ },
2557
+ {
2558
+ if: {
2559
+ name: "appear.type",
2560
+ value: "slide in"
2561
+ },
2562
+ then: {
2563
+ name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible",
2564
+ value: true
2478
2565
  }
2479
2566
  },
2480
2567
  {
2481
2568
  if: {
2482
2569
  name: "triggers.type",
2483
- value: "drag"
2570
+ value: "click"
2484
2571
  },
2485
2572
  then: {
2486
2573
  name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
2487
- value: false
2574
+ value: true
2488
2575
  }
2489
2576
  },
2490
2577
  {
2491
2578
  if: {
2492
2579
  name: "triggers.type",
2493
- value: "drag"
2580
+ value: "click"
2494
2581
  },
2495
2582
  then: {
2496
2583
  name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
2497
- value: false
2584
+ value: true
2498
2585
  }
2499
2586
  }
2500
2587
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/components",
3
- "version": "0.1.0-22",
3
+ "version": "0.1.0-24",
4
4
  "description": "Custom components for control editor and public websites.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",