@cntrl-site/components 0.1.6-19 → 0.1.7-0

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.
Files changed (12) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +2 -2
  3. package/dist/Components/ControlSlider/ControlSlider.d.ts +2 -1
  4. package/dist/Components/ControlSlider/ControlSliderComponent.d.ts +9 -0
  5. package/dist/Components/ImageRevealSlider/ControlImageRevealSliderComponent.d.ts +2 -31
  6. package/dist/Components/ImageRevealSlider/ImageRevealSlider.d.ts +1 -3
  7. package/dist/Components/Lightbox/Lightbox.d.ts +1 -1
  8. package/dist/components.css +1 -1
  9. package/dist/index.js +60 -203
  10. package/dist/index.mjs +60 -203
  11. package/dist/types/Component.d.ts +2 -2
  12. package/package.json +68 -69
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2025 GX Platform
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2025 GX Platform
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,3 +1,3 @@
1
- # Control Components
2
-
1
+ # Control Components
2
+
3
3
  This is custom components for control editor and public websites.
package/dist/Components/ControlSlider/ControlSlider.d.ts CHANGED
@@ -4,7 +4,7 @@ interface SliderProps {
4
4
  styles: SliderStyles;
5
5
  isEditor?: boolean;
6
6
  }
7
- export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): JSX.Element;
8
8
  type SliderItem = {
9
9
  image: {
10
10
  url: string;
@@ -21,6 +21,7 @@ type SliderControls = {
21
21
  arrowsImgUrl: string | null;
22
22
  isActive: boolean;
23
23
  color: string;
24
+ show: 'on-hover' | 'always';
24
25
  hover: string;
25
26
  offset: Offset;
26
27
  scale: number;
package/dist/Components/ControlSlider/ControlSliderComponent.d.ts CHANGED
@@ -162,6 +162,14 @@ export declare const ControlSliderComponent: {
162
162
  format: string;
163
163
  };
164
164
  };
165
+ show: {
166
+ title: string;
167
+ type: string;
168
+ display: {
169
+ type: string;
170
+ };
171
+ enum: string[];
172
+ };
165
173
  };
166
174
  };
167
175
  pagination: {
@@ -316,6 +324,7 @@ export declare const ControlSliderComponent: {
316
324
  scale: number;
317
325
  color: string;
318
326
  hover: string;
327
+ show: string;
319
328
  };
320
329
  transition: {
321
330
  type: string;
package/dist/Components/ImageRevealSlider/ControlImageRevealSliderComponent.d.ts CHANGED
@@ -80,17 +80,6 @@ export declare const ControlImageRevealSliderComponent: {
80
80
  visible: boolean;
81
81
  };
82
82
  };
83
- defaultCursorScale: {
84
- type: string;
85
- title: string;
86
- min: number;
87
- max: number;
88
- step: number;
89
- display: {
90
- type: string;
91
- visible: boolean;
92
- };
93
- };
94
83
  hoverCursor: {
95
84
  type: string[];
96
85
  title: string;
@@ -99,17 +88,6 @@ export declare const ControlImageRevealSliderComponent: {
99
88
  visible: boolean;
100
89
  };
101
90
  };
102
- hoverCursorScale: {
103
- type: string;
104
- title: string;
105
- min: number;
106
- max: number;
107
- step: number;
108
- display: {
109
- type: string;
110
- visible: boolean;
111
- };
112
- };
113
91
  };
114
92
  };
115
93
  position: {
@@ -154,9 +132,7 @@ export declare const ControlImageRevealSliderComponent: {
154
132
  cursor: {
155
133
  cursorType: string;
156
134
  defaultCursor: null;
157
- defaultCursorScale: number;
158
135
  hoverCursor: null;
159
- hoverCursorScale: number;
160
136
  };
161
137
  position: {
162
138
  revealPosition: string;
@@ -174,15 +150,10 @@ export declare const ControlImageRevealSliderComponent: {
174
150
  value: boolean;
175
151
  };
176
152
  } | {
177
- if: ({
153
+ if: {
178
154
  name: string;
179
155
  value: string;
180
- isNotEqual?: undefined;
181
- } | {
182
- name: string;
183
- value: null;
184
- isNotEqual: boolean;
185
- })[];
156
+ }[];
186
157
  then: {
187
158
  name: string;
188
159
  value: boolean;
package/dist/Components/ImageRevealSlider/ImageRevealSlider.d.ts CHANGED
@@ -14,9 +14,7 @@ type ImageRevealSliderImageSize = {
14
14
  };
15
15
  type ImageRevealSliderCursor = {
16
16
  cursorType: 'system' | 'custom';
17
- defaultCursorScale: number;
18
17
  defaultCursor: string | null;
19
- hoverCursorScale: number;
20
18
  hoverCursor: string | null;
21
19
  };
22
20
  type ImageRevealSliderPosition = {
@@ -36,5 +34,5 @@ type ImageRevealSliderItem = {
36
34
  };
37
35
  link: string;
38
36
  };
39
- export declare function ImageRevealSlider({ settings, content, isEditor }: ImageRevealSliderProps): import("react/jsx-runtime").JSX.Element;
37
+ export declare function ImageRevealSlider({ settings, content, isEditor }: ImageRevealSliderProps): JSX.Element;
40
38
  export {};
package/dist/Components/Lightbox/Lightbox.d.ts CHANGED
@@ -7,7 +7,7 @@ type LightboxGalleryProps = {
7
7
  activeEvent: 'close' | 'open';
8
8
  isEditor?: boolean;
9
9
  };
10
- export declare const LightboxGallery: ({ settings, content, styles, portalId, activeEvent, isEditor }: LightboxGalleryProps) => import("react/jsx-runtime").JSX.Element;
10
+ export declare const LightboxGallery: ({ settings, content, styles, portalId, activeEvent, isEditor }: LightboxGalleryProps) => JSX.Element;
11
11
  type LightboxImage = {
12
12
  image: {
13
13
  url: string;
package/dist/components.css CHANGED
@@ -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}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.RichTextRenderer-module__link___BWeZ2{color:inherit;cursor:pointer;pointer-events:auto;transition:color .2s ease}.RichTextRenderer-module__link___BWeZ2:hover{color:var(--link-hover-color)}.SvgImage-module__svg___q3xE-{width:100%;height:100%;color:transparent;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--fill);transition:background-color .2s;-webkit-mask:var(--svg) no-repeat center/contain;mask:var(--svg) no-repeat center/contain}.SvgImage-module__svg___q3xE-:hover{background-color:var(--hover-fill)}.SvgImage-module__img___VsTm-{width:100%;height:100%;object-fit:contain}.ImageRevealSlider-module__imageRevealSlider___UE5Ob{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.ImageRevealSlider-module__image___Qjt-e{display:block;width:100%;height:100%;object-fit:cover;position:relative;-webkit-user-select:none;user-select:none;pointer-events:none}.ImageRevealSlider-module__link___N-iLG{width:100%;height:100%;display:block}.ImageRevealSlider-module__cursor___2U03d{position:absolute;top:0;left:0;pointer-events:none}.LightBox-module__heroImage___sTxNF{width:100%;height:100%;cursor:pointer;object-fit:cover}.LightBox-module__background___rm9ml{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;width:100%;height:100%}.LightBox-module__editor___4ACaY{width:var(--cntrl-article-width)!important;margin-left:auto;margin-right:auto}.LightBox-module__contentStyle___Bgnsq{position:fixed;z-index:9999;top:0;left:0;right:0;bottom:0;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__imageStyle___tLIlB{position:relative;display:block;cursor:pointer;background-color:transparent;max-width:100%;max-height:100%;width:auto;height:auto}.LightBox-module__imgWrapper___LuFUp{position:relative;display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover}.LightBox-module__caption___b6L2I{z-index:9999;position:absolute;display:flex}.LightBox-module__captionTextInner___rCGNH{position:relative}.LightBox-module__lightboxSplide___XFuWC.splide,.LightBox-module__lightboxSplide___XFuWC .splide__track{height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;z-index:1;transform:translate(-50%,-50%);padding:0;left:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{left:50%;top:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,-50%)}.LightBox-module__nextArrow___zkAQN{left:unset;right:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(50%,-50%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,50%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{display:flex;align-items:center;justify-content:center;pointer-events:auto}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__closeButton___g2khP{all:unset;cursor:pointer;position:absolute;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}@keyframes LightBox-module__lbFadeOut___MhEeN{0%{opacity:1}to{opacity:0}}.LightBox-module__fadeOut___55qBR{animation-name:LightBox-module__lbFadeOut___MhEeN!important}@keyframes LightBox-module__lbSlideOutLeft___xM4sO{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes LightBox-module__lbSlideOutRight___Jppgj{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes LightBox-module__lbSlideOutTop___pvscE{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes LightBox-module__lbSlideOutBottom___oFjPG{0%{transform:translateY(0)}to{transform:translateY(100%)}}.LightBox-module__slideOutLeft___NvU7P{animation-name:LightBox-module__lbSlideOutLeft___xM4sO!important}.LightBox-module__slideOutRight___SK7eC{animation-name:LightBox-module__lbSlideOutRight___Jppgj!important}.LightBox-module__slideOutTop___Vgg0z{animation-name:LightBox-module__lbSlideOutTop___pvscE!important}.LightBox-module__slideOutBottom___nJ0Ef{animation-name:LightBox-module__lbSlideOutBottom___oFjPG!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(.9)!important;transition:opacity var(--splide-speed, .5s) ease,transform var(--splide-speed, .5s) ease!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide.is-active .LightBox-module__scaleSlide___vZriG{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide:not(.is-active) .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}
1
+ .ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__wrapper___sHEkd:hover .ControlSlider-module__hoverArrow___A-dOH{opacity:1!important}.ControlSlider-module__slider___R3i9-{width:100%;height:100%}.ControlSlider-module__sliderItems___1MgPL{display:flex;overflow:hidden;width:100%;height:100%;transition:transform .3s ease-in-out}.ControlSlider-module__sliderItem___QQSkR{width:100%;height:100%;display:flex;position:relative}.ControlSlider-module__sliderImage___9hRl-{width:100%;height:100%;object-fit:cover}.ControlSlider-module__arrow___05ghY{position:absolute;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;top:50%;left:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.ControlSlider-module__arrow___05ghY.ControlSlider-module__arrowVertical___tBfVN{left:50%;top:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,-50%)}.ControlSlider-module__nextArrow___-30Yc{left:unset;right:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(50%,-50%)}.ControlSlider-module__nextArrow___-30Yc.ControlSlider-module__arrowVertical___tBfVN{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,50%)}.ControlSlider-module__arrowInner___aEra3{all:unset;cursor:pointer;width:100%;height:100%}.ControlSlider-module__arrowInner___aEra3:hover .ControlSlider-module__arrowIcon___S4ztF path{fill:var(--arrow-hover-color)!important}.ControlSlider-module__arrowImg___2dwJW{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ControlSlider-module__arrowIcon___S4ztF{width:100%;height:100%}.ControlSlider-module__arrowIcon___S4ztF path{transition:fill .15s ease-in-out}.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleX(-1)!important}.ControlSlider-module__arrowVertical___tBfVN.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleY(-1)!important}.ControlSlider-module__hoverArrow___A-dOH{opacity:0;transition:opacity .15s ease-in-out}.ControlSlider-module__hoverArrow___A-dOH:hover{opacity:1}.ControlSlider-module__pagination___bicLF{position:absolute;z-index:1;border-radius:50%}.ControlSlider-module__paginationInner___bT-P-{display:flex;gap:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);padding-top:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-bottom:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-left:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);padding-right:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);border-radius:calc(var(--is-editor, 0) * 2.3611111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.3611111111vw)}.ControlSlider-module__paginationVertical___zYqKw{flex-direction:column}.ControlSlider-module__paginationItem___nTRbk{all:unset;flex-shrink:0;position:relative;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);cursor:pointer}.ControlSlider-module__paginationItem___nTRbk:hover .ControlSlider-module__dot___p1Qun{background-color:var(--pagination-hover-color)!important}.ControlSlider-module__dot___p1Qun{border-radius:50%;scale:.5;transition:background-color .3s ease-in-out,transform .3s ease-in-out;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw)}.ControlSlider-module__activeDot___LHFaj{transform:scale(2)}.ControlSlider-module__paginationInsideBottom___R3FWn{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__paginationInsideTop___V-qb-{left:50%;transform:translate(-50%);top:0}.ControlSlider-module__paginationOutsideBottom___14w8D{left:50%;transform:translate(-50%);bottom:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideTop___SCLqB{left:50%;transform:translate(-50%);top:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideLeft___yOBRZ{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideRight___Rtt3o{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideLeft___lahaw{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__paginationOutsideRight___EtuQa{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__imgWrapper___UjEgB,.ControlSlider-module__wrapperInner___DLAWV{width:100%;height:100%}.ControlSlider-module__captionBlock___dJ6-j{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.ControlSlider-module__captionTextWrapper___HFlpf{position:relative;width:100%;height:100%}.ControlSlider-module__captionText___uGBVc{pointer-events:none;max-width:100%;transition-property:opacity;transition-timing-function:ease-in-out;position:absolute;display:inline-block;white-space:pre-wrap;overflow-wrap:break-word;opacity:0}.ControlSlider-module__captionText___uGBVc.ControlSlider-module__active___WZK4G{opacity:1}.ControlSlider-module__withPointerEvents___t-18M{pointer-events:auto}.ControlSlider-module__absolute___KxmYB{position:absolute}.ControlSlider-module__topLeftAlignment___zjnGM{top:0;left:0}.ControlSlider-module__topCenterAlignment___gD1xW{top:0;left:50%;transform:translate(-50%)}.ControlSlider-module__topRightAlignment___NMapS{top:0;right:0}.ControlSlider-module__middleLeftAlignment___OnUrY{top:50%;transform:translateY(-50%);left:0}.ControlSlider-module__middleCenterAlignment___Tdkl0{top:50%;transform:translate(-50%,-50%);left:50%}.ControlSlider-module__middleRightAlignment___wEbfX{top:50%;transform:translateY(-50%);right:0}.ControlSlider-module__bottomLeftAlignment___cTP2-{bottom:0;left:0}.ControlSlider-module__bottomCenterAlignment___c54fB{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__bottomRightAlignment___kEwrz{bottom:0;right:0}.ControlSlider-module__clickOverlay___DZA28{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.ControlSlider-module__contain___pLyq7{object-fit:contain}.ControlSlider-module__cover___KdDat{object-fit:cover}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.RichTextRenderer-module__link___BWeZ2{color:inherit;cursor:pointer;pointer-events:auto;transition:color .2s ease}.RichTextRenderer-module__link___BWeZ2:hover{color:var(--link-hover-color)}.SvgImage-module__svg___q3xE-{width:100%;height:100%;color:transparent;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--fill);transition:background-color .2s;-webkit-mask:var(--svg) no-repeat center/contain;mask:var(--svg) no-repeat center/contain}.SvgImage-module__svg___q3xE-:hover{background-color:var(--hover-fill)}.SvgImage-module__img___VsTm-{width:100%;height:100%;object-fit:contain}.ImageRevealSlider-module__imageRevealSlider___UE5Ob{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.ImageRevealSlider-module__image___Qjt-e{width:100%;height:100%;object-fit:cover;position:relative;-webkit-user-select:none;user-select:none;pointer-events:none}.ImageRevealSlider-module__link___N-iLG{width:100%;height:100%;display:block}.LightBox-module__heroImage___sTxNF{width:100%;height:100%;cursor:pointer;object-fit:cover}.LightBox-module__background___rm9ml{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;width:100%;height:100%}.LightBox-module__editor___4ACaY{width:var(--cntrl-article-width)!important;margin-left:auto;margin-right:auto}.LightBox-module__contentStyle___Bgnsq{position:fixed;z-index:9999;top:0;left:0;right:0;bottom:0;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__imageStyle___tLIlB{position:relative;display:block;cursor:pointer;background-color:transparent;max-width:100%;max-height:100%;width:auto;height:auto}.LightBox-module__imgWrapper___LuFUp{position:relative;display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover}.LightBox-module__caption___b6L2I{z-index:9999;position:absolute;display:flex}.LightBox-module__captionTextInner___rCGNH{position:relative}.LightBox-module__lightboxSplide___XFuWC.splide,.LightBox-module__lightboxSplide___XFuWC .splide__track{height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;z-index:1;transform:translate(-50%,-50%);padding:0;left:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{left:50%;top:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,-50%)}.LightBox-module__nextArrow___zkAQN{left:unset;right:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(50%,-50%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,50%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{display:flex;align-items:center;justify-content:center;pointer-events:auto}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__closeButton___g2khP{all:unset;cursor:pointer;position:absolute;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}@keyframes LightBox-module__lbFadeOut___MhEeN{0%{opacity:1}to{opacity:0}}.LightBox-module__fadeOut___55qBR{animation-name:LightBox-module__lbFadeOut___MhEeN!important}@keyframes LightBox-module__lbSlideOutLeft___xM4sO{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes LightBox-module__lbSlideOutRight___Jppgj{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes LightBox-module__lbSlideOutTop___pvscE{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes LightBox-module__lbSlideOutBottom___oFjPG{0%{transform:translateY(0)}to{transform:translateY(100%)}}.LightBox-module__slideOutLeft___NvU7P{animation-name:LightBox-module__lbSlideOutLeft___xM4sO!important}.LightBox-module__slideOutRight___SK7eC{animation-name:LightBox-module__lbSlideOutRight___Jppgj!important}.LightBox-module__slideOutTop___Vgg0z{animation-name:LightBox-module__lbSlideOutTop___pvscE!important}.LightBox-module__slideOutBottom___nJ0Ef{animation-name:LightBox-module__lbSlideOutBottom___oFjPG!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(.9)!important;transition:opacity var(--splide-speed, .5s) ease,transform var(--splide-speed, .5s) ease!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide.is-active .LightBox-module__scaleSlide___vZriG{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide:not(.is-active) .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}
package/dist/index.js CHANGED
@@ -4,9 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const reactSplide = require("@splidejs/react-splide");
6
6
  const cn = require("classnames");
7
- const framerMotion = require("framer-motion");
8
7
  const reactDom = require("react-dom");
9
8
  const wrapper = "ControlSlider-module__wrapper___sHEkd";
9
+ const hoverArrow = "ControlSlider-module__hoverArrow___A-dOH";
10
10
  const sliderItem = "ControlSlider-module__sliderItem___QQSkR";
11
11
  const sliderImage = "ControlSlider-module__sliderImage___9hRl-";
12
12
  const arrow$1 = "ControlSlider-module__arrow___05ghY";
@@ -50,6 +50,7 @@ const contain$1 = "ControlSlider-module__contain___pLyq7";
50
50
  const cover$1 = "ControlSlider-module__cover___KdDat";
51
51
  const styles$3 = {
52
52
  wrapper,
53
+ hoverArrow,
53
54
  sliderItem,
54
55
  sliderImage,
55
56
  arrow: arrow$1,
@@ -317,7 +318,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
317
318
  "div",
318
319
  {
319
320
  className: cn(styles$3.arrow, {
320
- [styles$3.arrowVertical]: direction === "vert"
321
+ [styles$3.arrowVertical]: direction === "vert",
322
+ [styles$3.hoverArrow]: controls.show === "on-hover"
321
323
  }),
322
324
  style: {
323
325
  color: controls.color,
@@ -353,7 +355,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
353
355
  "div",
354
356
  {
355
357
  className: cn(styles$3.arrow, styles$3.nextArrow, {
356
- [styles$3.arrowVertical]: direction === "vert"
358
+ [styles$3.arrowVertical]: direction === "vert",
359
+ [styles$3.hoverArrow]: controls.show === "on-hover"
357
360
  }),
358
361
  style: {
359
362
  color: controls.color,
@@ -614,6 +617,14 @@ const ControlSliderComponent = {
614
617
  type: "settings-color-picker",
615
618
  format: "single"
616
619
  }
620
+ },
621
+ show: {
622
+ title: "Show",
623
+ type: "string",
624
+ display: {
625
+ type: "ratio-group"
626
+ },
627
+ enum: ["always", "on hover"]
617
628
  }
618
629
  }
619
630
  },
@@ -768,7 +779,8 @@ const ControlSliderComponent = {
768
779
  },
769
780
  scale: 100,
770
781
  color: "#000000",
771
- hover: "#cccccc"
782
+ hover: "#cccccc",
783
+ show: "always"
772
784
  },
773
785
  transition: {
774
786
  type: "slide",
@@ -1041,12 +1053,10 @@ const ControlSliderComponent = {
1041
1053
  const imageRevealSlider = "ImageRevealSlider-module__imageRevealSlider___UE5Ob";
1042
1054
  const image = "ImageRevealSlider-module__image___Qjt-e";
1043
1055
  const link = "ImageRevealSlider-module__link___N-iLG";
1044
- const cursor = "ImageRevealSlider-module__cursor___2U03d";
1045
1056
  const styles = {
1046
1057
  imageRevealSlider,
1047
1058
  image,
1048
- link,
1049
- cursor
1059
+ link
1050
1060
  };
1051
1061
  function isMouseOverImage(mouseX, mouseY, placedImages) {
1052
1062
  for (const img2 of placedImages) {
@@ -1090,103 +1100,14 @@ async function calculateImageWidthHeight(imgUrl, sizeType, customWidth, randomRa
1090
1100
  return { width, height, finalWidth: `${width}px` };
1091
1101
  }
1092
1102
  function ImageRevealSlider({ settings, content, isEditor }) {
1093
- const [divRef, setDivRef] = React.useState(null);
1103
+ const divRef = React.useRef(null);
1094
1104
  const [placedImages, setPlacedImages] = React.useState([]);
1095
1105
  const [counter, setCounter] = React.useState(0);
1096
1106
  const imageIdCounter = React.useRef(0);
1097
1107
  const defaultImageCount = 1;
1098
- const lastMousePos = React.useRef({ x: 0, y: 0 });
1099
- const [isInside, setIsInside] = React.useState(false);
1100
- const cursorX = framerMotion.useMotionValue(-100);
1101
- const cursorY = framerMotion.useMotionValue(-100);
1102
- const defaultScale = 32;
1103
- const cursorW = framerMotion.useMotionValue(32);
1104
- const cursorH = framerMotion.useMotionValue(32);
1105
- const [customCursorImg, setCustomCursorImg] = React.useState("none");
1106
- React.useEffect(() => {
1107
- if (!divRef) return;
1108
- const updateCursorPosition = (clientX, clientY) => {
1109
- const divRect = divRef.getBoundingClientRect();
1110
- const newX = clientX - cursorW.get() / 2 - divRect.left;
1111
- const newY = clientY - cursorH.get() / 2 - divRect.top;
1112
- cursorX.jump(newX);
1113
- cursorY.jump(newY);
1114
- };
1115
- const mouseMove = (e) => {
1116
- e.stopPropagation();
1117
- lastMousePos.current = { x: e.clientX, y: e.clientY };
1118
- updateCursorPosition(e.clientX, e.clientY);
1119
- };
1120
- const handleScroll = () => {
1121
- if (!isInside) return;
1122
- updateCursorPosition(lastMousePos.current.x, lastMousePos.current.y);
1123
- };
1124
- divRef.addEventListener("mousemove", mouseMove);
1125
- window.addEventListener("scroll", handleScroll, true);
1126
- return () => {
1127
- divRef.removeEventListener("mousemove", mouseMove);
1128
- window.removeEventListener("scroll", handleScroll, true);
1129
- };
1130
- }, [cursorX, cursorY, cursorW, cursorH, divRef, isInside]);
1131
- React.useEffect(() => {
1132
- if (!isInside) {
1133
- setCustomCursorImg("none");
1134
- cursorW.set(0);
1135
- cursorH.set(0);
1136
- }
1137
- }, [isInside]);
1138
1108
  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
1139
1109
  const { revealPosition, visible, target } = settings.position;
1140
- const { cursorType, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
1141
- React.useEffect(() => {
1142
- const updateCursor = () => {
1143
- if (cursorType === "system") {
1144
- setCustomCursorImg("none");
1145
- cursorW.set(defaultScale);
1146
- cursorH.set(defaultScale);
1147
- return;
1148
- }
1149
- const elUnderCursor = document.elementFromPoint(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2);
1150
- if (elUnderCursor && elUnderCursor.closest("a.link")) {
1151
- setCustomCursorImg("none");
1152
- cursorW.set(defaultScale);
1153
- cursorH.set(defaultScale);
1154
- return;
1155
- }
1156
- if (target === "area") {
1157
- setCustomCursorImg(hoverCursor || "none");
1158
- cursorW.set(defaultScale * hoverCursorScale || 1);
1159
- cursorH.set(defaultScale * hoverCursorScale || 1);
1160
- } else if (isMouseOverImage(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2, placedImages)) {
1161
- setCustomCursorImg(hoverCursor || "none");
1162
- cursorW.set(defaultScale * hoverCursorScale || 1);
1163
- cursorH.set(defaultScale * hoverCursorScale || 1);
1164
- } else {
1165
- setCustomCursorImg(defaultCursor || "none");
1166
- cursorW.set(defaultScale * defaultCursorScale || 1);
1167
- cursorH.set(defaultScale * defaultCursorScale || 1);
1168
- }
1169
- };
1170
- const unsubscribeX = cursorX.onChange(updateCursor);
1171
- const unsubscribeY = cursorY.onChange(updateCursor);
1172
- updateCursor();
1173
- return () => {
1174
- unsubscribeX();
1175
- unsubscribeY();
1176
- };
1177
- }, [
1178
- cursorType,
1179
- target,
1180
- hoverCursor,
1181
- defaultCursor,
1182
- hoverCursorScale,
1183
- defaultCursorScale,
1184
- cursorX,
1185
- cursorY,
1186
- cursorW,
1187
- cursorH,
1188
- placedImages
1189
- ]);
1110
+ const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
1190
1111
  const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
1191
1112
  const { width, height, finalWidth } = await calculateImageWidthHeight(
1192
1113
  imgData.image.url,
@@ -1219,8 +1140,8 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1219
1140
  return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
1220
1141
  }, [content]);
1221
1142
  React.useEffect(() => {
1222
- if (!divRef || content.length === 0) return;
1223
- const rect = divRef.getBoundingClientRect();
1143
+ if (!divRef.current || content.length === 0) return;
1144
+ const rect = divRef.current.getBoundingClientRect();
1224
1145
  const containerWidth = rect.width;
1225
1146
  const containerHeight = rect.height;
1226
1147
  const defaultPlaced = [];
@@ -1234,15 +1155,15 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1234
1155
  setCounter(defaultImageCount % content.length);
1235
1156
  };
1236
1157
  placeImages();
1237
- }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
1158
+ }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
1238
1159
  React.useEffect(() => {
1239
1160
  if (visible === "last One") {
1240
1161
  setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
1241
1162
  }
1242
1163
  }, [visible]);
1243
1164
  const handleClick = async (e) => {
1244
- if (!divRef) return;
1245
- const rect = divRef.getBoundingClientRect();
1165
+ if (!divRef.current) return;
1166
+ const rect = divRef.current.getBoundingClientRect();
1246
1167
  const clickX = e.clientX - rect.left;
1247
1168
  const clickY = e.clientY - rect.top;
1248
1169
  if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
@@ -1262,65 +1183,46 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1262
1183
  setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
1263
1184
  setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
1264
1185
  };
1265
- return /* @__PURE__ */ jsxRuntime.jsxs(
1186
+ return /* @__PURE__ */ jsxRuntime.jsx(
1266
1187
  "div",
1267
1188
  {
1268
- ref: setDivRef,
1189
+ ref: divRef,
1269
1190
  onClick: handleClick,
1270
- onMouseEnter: () => setIsInside(true),
1271
- onMouseLeave: () => setIsInside(false),
1272
1191
  className: styles.imageRevealSlider,
1273
- style: { cursor: customCursorImg === "none" ? "default" : "none" },
1274
- children: [
1275
- placedImages.map((img2) => /* @__PURE__ */ jsxRuntime.jsx(
1276
- "div",
1277
- {
1278
- className: styles.wrapper,
1279
- style: {
1280
- top: `${img2.y}px`,
1281
- left: `${img2.x}px`,
1282
- position: "absolute",
1283
- transform: "translate(-50%, -50%)",
1284
- width: img2.width ?? "auto",
1285
- height: "auto",
1286
- cursor: customCursorImg === "none" ? "default" : "none"
1287
- },
1288
- children: target === "area" && img2.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsxRuntime.jsx(
1289
- "img",
1290
- {
1291
- src: img2.url,
1292
- alt: img2.name,
1293
- className: styles.image
1294
- },
1295
- img2.id
1296
- ) }) : /* @__PURE__ */ jsxRuntime.jsx(
1297
- "img",
1298
- {
1299
- src: img2.url,
1300
- alt: img2.name,
1301
- className: styles.image
1302
- },
1303
- img2.id
1304
- )
1192
+ style: { cursor: cursorType !== "system" && defaultCursor ? `url(${target === "area" ? hoverCursor : defaultCursor}), auto` : "default" },
1193
+ children: placedImages.map((img2) => /* @__PURE__ */ jsxRuntime.jsx(
1194
+ "div",
1195
+ {
1196
+ className: styles.wrapper,
1197
+ style: {
1198
+ top: `${img2.y}px`,
1199
+ left: `${img2.x}px`,
1200
+ position: "absolute",
1201
+ transform: "translate(-50%, -50%)",
1202
+ width: img2.width ?? "auto",
1203
+ height: "auto",
1204
+ cursor: cursorType !== "system" && hoverCursor ? `url(${hoverCursor}), auto` : "default"
1305
1205
  },
1306
- img2.id
1307
- )),
1308
- /* @__PURE__ */ jsxRuntime.jsx(
1309
- framerMotion.motion.div,
1310
- {
1311
- className: styles.cursor,
1312
- style: {
1313
- x: cursorX,
1314
- y: cursorY,
1315
- width: cursorW.get(),
1316
- height: cursorH.get(),
1317
- backgroundImage: `url('${customCursorImg}')`,
1318
- backgroundSize: "cover",
1319
- backgroundPosition: "center"
1320
- }
1321
- }
1322
- )
1323
- ]
1206
+ children: target === "area" && img2.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsxRuntime.jsx(
1207
+ "img",
1208
+ {
1209
+ src: img2.url,
1210
+ alt: img2.name,
1211
+ className: styles.image
1212
+ },
1213
+ img2.id
1214
+ ) }) : /* @__PURE__ */ jsxRuntime.jsx(
1215
+ "img",
1216
+ {
1217
+ src: img2.url,
1218
+ alt: img2.name,
1219
+ className: styles.image
1220
+ },
1221
+ img2.id
1222
+ )
1223
+ },
1224
+ img2.id
1225
+ ))
1324
1226
  }
1325
1227
  );
1326
1228
  }
@@ -1405,17 +1307,6 @@ const ControlImageRevealSliderComponent = {
1405
1307
  visible: false
1406
1308
  }
1407
1309
  },
1408
- defaultCursorScale: {
1409
- type: "number",
1410
- title: "Scale",
1411
- min: 1,
1412
- max: 5,
1413
- step: 0.1,
1414
- display: {
1415
- type: "range-control",
1416
- visible: false
1417
- }
1418
- },
1419
1310
  hoverCursor: {
1420
1311
  type: ["string", "null"],
1421
1312
  title: "Hover",
@@ -1423,17 +1314,6 @@ const ControlImageRevealSliderComponent = {
1423
1314
  type: "settings-image-input",
1424
1315
  visible: false
1425
1316
  }
1426
- },
1427
- hoverCursorScale: {
1428
- type: "number",
1429
- title: "Scale",
1430
- min: 1,
1431
- max: 5,
1432
- step: 0.1,
1433
- display: {
1434
- type: "range-control",
1435
- visible: false
1436
- }
1437
1317
  }
1438
1318
  }
1439
1319
  },
@@ -1479,9 +1359,7 @@ const ControlImageRevealSliderComponent = {
1479
1359
  cursor: {
1480
1360
  cursorType: "system",
1481
1361
  defaultCursor: null,
1482
- defaultCursorScale: 2,
1483
- hoverCursor: null,
1484
- hoverCursorScale: 2
1362
+ hoverCursor: null
1485
1363
  },
1486
1364
  position: {
1487
1365
  revealPosition: "random",
@@ -1520,17 +1398,6 @@ const ControlImageRevealSliderComponent = {
1520
1398
  value: true
1521
1399
  }
1522
1400
  },
1523
- {
1524
- if: [
1525
- { name: "position.target", value: "image" },
1526
- { name: "cursor.cursorType", value: "custom" },
1527
- { name: "cursor.defaultCursor", value: null, isNotEqual: true }
1528
- ],
1529
- then: {
1530
- name: "properties.cursor.properties.defaultCursorScale.display.visible",
1531
- value: true
1532
- }
1533
- },
1534
1401
  {
1535
1402
  if: {
1536
1403
  name: "cursor.cursorType",
@@ -1540,16 +1407,6 @@ const ControlImageRevealSliderComponent = {
1540
1407
  name: "properties.cursor.properties.hoverCursor.display.visible",
1541
1408
  value: true
1542
1409
  }
1543
- },
1544
- {
1545
- if: [
1546
- { name: "cursor.cursorType", value: "custom" },
1547
- { name: "cursor.hoverCursor", value: null, isNotEqual: true }
1548
- ],
1549
- then: {
1550
- name: "properties.cursor.properties.hoverCursorScale.display.visible",
1551
- value: true
1552
- }
1553
1410
  }
1554
1411
  ]
1555
1412
  },
package/dist/index.mjs CHANGED
@@ -2,9 +2,9 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
2
2
  import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
3
3
  import { Splide, SplideSlide } from "@splidejs/react-splide";
4
4
  import cn from "classnames";
5
- import { useMotionValue, motion } from "framer-motion";
6
5
  import { createPortal } from "react-dom";
7
6
  const wrapper = "ControlSlider-module__wrapper___sHEkd";
7
+ const hoverArrow = "ControlSlider-module__hoverArrow___A-dOH";
8
8
  const sliderItem = "ControlSlider-module__sliderItem___QQSkR";
9
9
  const sliderImage = "ControlSlider-module__sliderImage___9hRl-";
10
10
  const arrow$1 = "ControlSlider-module__arrow___05ghY";
@@ -48,6 +48,7 @@ const contain$1 = "ControlSlider-module__contain___pLyq7";
48
48
  const cover$1 = "ControlSlider-module__cover___KdDat";
49
49
  const styles$3 = {
50
50
  wrapper,
51
+ hoverArrow,
51
52
  sliderItem,
52
53
  sliderImage,
53
54
  arrow: arrow$1,
@@ -315,7 +316,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
315
316
  "div",
316
317
  {
317
318
  className: cn(styles$3.arrow, {
318
- [styles$3.arrowVertical]: direction === "vert"
319
+ [styles$3.arrowVertical]: direction === "vert",
320
+ [styles$3.hoverArrow]: controls.show === "on-hover"
319
321
  }),
320
322
  style: {
321
323
  color: controls.color,
@@ -351,7 +353,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
351
353
  "div",
352
354
  {
353
355
  className: cn(styles$3.arrow, styles$3.nextArrow, {
354
- [styles$3.arrowVertical]: direction === "vert"
356
+ [styles$3.arrowVertical]: direction === "vert",
357
+ [styles$3.hoverArrow]: controls.show === "on-hover"
355
358
  }),
356
359
  style: {
357
360
  color: controls.color,
@@ -612,6 +615,14 @@ const ControlSliderComponent = {
612
615
  type: "settings-color-picker",
613
616
  format: "single"
614
617
  }
618
+ },
619
+ show: {
620
+ title: "Show",
621
+ type: "string",
622
+ display: {
623
+ type: "ratio-group"
624
+ },
625
+ enum: ["always", "on hover"]
615
626
  }
616
627
  }
617
628
  },
@@ -766,7 +777,8 @@ const ControlSliderComponent = {
766
777
  },
767
778
  scale: 100,
768
779
  color: "#000000",
769
- hover: "#cccccc"
780
+ hover: "#cccccc",
781
+ show: "always"
770
782
  },
771
783
  transition: {
772
784
  type: "slide",
@@ -1039,12 +1051,10 @@ const ControlSliderComponent = {
1039
1051
  const imageRevealSlider = "ImageRevealSlider-module__imageRevealSlider___UE5Ob";
1040
1052
  const image = "ImageRevealSlider-module__image___Qjt-e";
1041
1053
  const link = "ImageRevealSlider-module__link___N-iLG";
1042
- const cursor = "ImageRevealSlider-module__cursor___2U03d";
1043
1054
  const styles = {
1044
1055
  imageRevealSlider,
1045
1056
  image,
1046
- link,
1047
- cursor
1057
+ link
1048
1058
  };
1049
1059
  function isMouseOverImage(mouseX, mouseY, placedImages) {
1050
1060
  for (const img2 of placedImages) {
@@ -1088,103 +1098,14 @@ async function calculateImageWidthHeight(imgUrl, sizeType, customWidth, randomRa
1088
1098
  return { width, height, finalWidth: `${width}px` };
1089
1099
  }
1090
1100
  function ImageRevealSlider({ settings, content, isEditor }) {
1091
- const [divRef, setDivRef] = useState(null);
1101
+ const divRef = useRef(null);
1092
1102
  const [placedImages, setPlacedImages] = useState([]);
1093
1103
  const [counter, setCounter] = useState(0);
1094
1104
  const imageIdCounter = useRef(0);
1095
1105
  const defaultImageCount = 1;
1096
- const lastMousePos = useRef({ x: 0, y: 0 });
1097
- const [isInside, setIsInside] = useState(false);
1098
- const cursorX = useMotionValue(-100);
1099
- const cursorY = useMotionValue(-100);
1100
- const defaultScale = 32;
1101
- const cursorW = useMotionValue(32);
1102
- const cursorH = useMotionValue(32);
1103
- const [customCursorImg, setCustomCursorImg] = useState("none");
1104
- useEffect(() => {
1105
- if (!divRef) return;
1106
- const updateCursorPosition = (clientX, clientY) => {
1107
- const divRect = divRef.getBoundingClientRect();
1108
- const newX = clientX - cursorW.get() / 2 - divRect.left;
1109
- const newY = clientY - cursorH.get() / 2 - divRect.top;
1110
- cursorX.jump(newX);
1111
- cursorY.jump(newY);
1112
- };
1113
- const mouseMove = (e) => {
1114
- e.stopPropagation();
1115
- lastMousePos.current = { x: e.clientX, y: e.clientY };
1116
- updateCursorPosition(e.clientX, e.clientY);
1117
- };
1118
- const handleScroll = () => {
1119
- if (!isInside) return;
1120
- updateCursorPosition(lastMousePos.current.x, lastMousePos.current.y);
1121
- };
1122
- divRef.addEventListener("mousemove", mouseMove);
1123
- window.addEventListener("scroll", handleScroll, true);
1124
- return () => {
1125
- divRef.removeEventListener("mousemove", mouseMove);
1126
- window.removeEventListener("scroll", handleScroll, true);
1127
- };
1128
- }, [cursorX, cursorY, cursorW, cursorH, divRef, isInside]);
1129
- useEffect(() => {
1130
- if (!isInside) {
1131
- setCustomCursorImg("none");
1132
- cursorW.set(0);
1133
- cursorH.set(0);
1134
- }
1135
- }, [isInside]);
1136
1106
  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
1137
1107
  const { revealPosition, visible, target } = settings.position;
1138
- const { cursorType, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
1139
- useEffect(() => {
1140
- const updateCursor = () => {
1141
- if (cursorType === "system") {
1142
- setCustomCursorImg("none");
1143
- cursorW.set(defaultScale);
1144
- cursorH.set(defaultScale);
1145
- return;
1146
- }
1147
- const elUnderCursor = document.elementFromPoint(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2);
1148
- if (elUnderCursor && elUnderCursor.closest("a.link")) {
1149
- setCustomCursorImg("none");
1150
- cursorW.set(defaultScale);
1151
- cursorH.set(defaultScale);
1152
- return;
1153
- }
1154
- if (target === "area") {
1155
- setCustomCursorImg(hoverCursor || "none");
1156
- cursorW.set(defaultScale * hoverCursorScale || 1);
1157
- cursorH.set(defaultScale * hoverCursorScale || 1);
1158
- } else if (isMouseOverImage(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2, placedImages)) {
1159
- setCustomCursorImg(hoverCursor || "none");
1160
- cursorW.set(defaultScale * hoverCursorScale || 1);
1161
- cursorH.set(defaultScale * hoverCursorScale || 1);
1162
- } else {
1163
- setCustomCursorImg(defaultCursor || "none");
1164
- cursorW.set(defaultScale * defaultCursorScale || 1);
1165
- cursorH.set(defaultScale * defaultCursorScale || 1);
1166
- }
1167
- };
1168
- const unsubscribeX = cursorX.onChange(updateCursor);
1169
- const unsubscribeY = cursorY.onChange(updateCursor);
1170
- updateCursor();
1171
- return () => {
1172
- unsubscribeX();
1173
- unsubscribeY();
1174
- };
1175
- }, [
1176
- cursorType,
1177
- target,
1178
- hoverCursor,
1179
- defaultCursor,
1180
- hoverCursorScale,
1181
- defaultCursorScale,
1182
- cursorX,
1183
- cursorY,
1184
- cursorW,
1185
- cursorH,
1186
- placedImages
1187
- ]);
1108
+ const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
1188
1109
  const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
1189
1110
  const { width, height, finalWidth } = await calculateImageWidthHeight(
1190
1111
  imgData.image.url,
@@ -1217,8 +1138,8 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1217
1138
  return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
1218
1139
  }, [content]);
1219
1140
  useEffect(() => {
1220
- if (!divRef || content.length === 0) return;
1221
- const rect = divRef.getBoundingClientRect();
1141
+ if (!divRef.current || content.length === 0) return;
1142
+ const rect = divRef.current.getBoundingClientRect();
1222
1143
  const containerWidth = rect.width;
1223
1144
  const containerHeight = rect.height;
1224
1145
  const defaultPlaced = [];
@@ -1232,15 +1153,15 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1232
1153
  setCounter(defaultImageCount % content.length);
1233
1154
  };
1234
1155
  placeImages();
1235
- }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
1156
+ }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
1236
1157
  useEffect(() => {
1237
1158
  if (visible === "last One") {
1238
1159
  setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
1239
1160
  }
1240
1161
  }, [visible]);
1241
1162
  const handleClick = async (e) => {
1242
- if (!divRef) return;
1243
- const rect = divRef.getBoundingClientRect();
1163
+ if (!divRef.current) return;
1164
+ const rect = divRef.current.getBoundingClientRect();
1244
1165
  const clickX = e.clientX - rect.left;
1245
1166
  const clickY = e.clientY - rect.top;
1246
1167
  if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
@@ -1260,65 +1181,46 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1260
1181
  setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
1261
1182
  setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
1262
1183
  };
1263
- return /* @__PURE__ */ jsxs(
1184
+ return /* @__PURE__ */ jsx(
1264
1185
  "div",
1265
1186
  {
1266
- ref: setDivRef,
1187
+ ref: divRef,
1267
1188
  onClick: handleClick,
1268
- onMouseEnter: () => setIsInside(true),
1269
- onMouseLeave: () => setIsInside(false),
1270
1189
  className: styles.imageRevealSlider,
1271
- style: { cursor: customCursorImg === "none" ? "default" : "none" },
1272
- children: [
1273
- placedImages.map((img2) => /* @__PURE__ */ jsx(
1274
- "div",
1275
- {
1276
- className: styles.wrapper,
1277
- style: {
1278
- top: `${img2.y}px`,
1279
- left: `${img2.x}px`,
1280
- position: "absolute",
1281
- transform: "translate(-50%, -50%)",
1282
- width: img2.width ?? "auto",
1283
- height: "auto",
1284
- cursor: customCursorImg === "none" ? "default" : "none"
1285
- },
1286
- children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
1287
- "img",
1288
- {
1289
- src: img2.url,
1290
- alt: img2.name,
1291
- className: styles.image
1292
- },
1293
- img2.id
1294
- ) }) : /* @__PURE__ */ jsx(
1295
- "img",
1296
- {
1297
- src: img2.url,
1298
- alt: img2.name,
1299
- className: styles.image
1300
- },
1301
- img2.id
1302
- )
1190
+ style: { cursor: cursorType !== "system" && defaultCursor ? `url(${target === "area" ? hoverCursor : defaultCursor}), auto` : "default" },
1191
+ children: placedImages.map((img2) => /* @__PURE__ */ jsx(
1192
+ "div",
1193
+ {
1194
+ className: styles.wrapper,
1195
+ style: {
1196
+ top: `${img2.y}px`,
1197
+ left: `${img2.x}px`,
1198
+ position: "absolute",
1199
+ transform: "translate(-50%, -50%)",
1200
+ width: img2.width ?? "auto",
1201
+ height: "auto",
1202
+ cursor: cursorType !== "system" && hoverCursor ? `url(${hoverCursor}), auto` : "default"
1303
1203
  },
1304
- img2.id
1305
- )),
1306
- /* @__PURE__ */ jsx(
1307
- motion.div,
1308
- {
1309
- className: styles.cursor,
1310
- style: {
1311
- x: cursorX,
1312
- y: cursorY,
1313
- width: cursorW.get(),
1314
- height: cursorH.get(),
1315
- backgroundImage: `url('${customCursorImg}')`,
1316
- backgroundSize: "cover",
1317
- backgroundPosition: "center"
1318
- }
1319
- }
1320
- )
1321
- ]
1204
+ children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
1205
+ "img",
1206
+ {
1207
+ src: img2.url,
1208
+ alt: img2.name,
1209
+ className: styles.image
1210
+ },
1211
+ img2.id
1212
+ ) }) : /* @__PURE__ */ jsx(
1213
+ "img",
1214
+ {
1215
+ src: img2.url,
1216
+ alt: img2.name,
1217
+ className: styles.image
1218
+ },
1219
+ img2.id
1220
+ )
1221
+ },
1222
+ img2.id
1223
+ ))
1322
1224
  }
1323
1225
  );
1324
1226
  }
@@ -1403,17 +1305,6 @@ const ControlImageRevealSliderComponent = {
1403
1305
  visible: false
1404
1306
  }
1405
1307
  },
1406
- defaultCursorScale: {
1407
- type: "number",
1408
- title: "Scale",
1409
- min: 1,
1410
- max: 5,
1411
- step: 0.1,
1412
- display: {
1413
- type: "range-control",
1414
- visible: false
1415
- }
1416
- },
1417
1308
  hoverCursor: {
1418
1309
  type: ["string", "null"],
1419
1310
  title: "Hover",
@@ -1421,17 +1312,6 @@ const ControlImageRevealSliderComponent = {
1421
1312
  type: "settings-image-input",
1422
1313
  visible: false
1423
1314
  }
1424
- },
1425
- hoverCursorScale: {
1426
- type: "number",
1427
- title: "Scale",
1428
- min: 1,
1429
- max: 5,
1430
- step: 0.1,
1431
- display: {
1432
- type: "range-control",
1433
- visible: false
1434
- }
1435
1315
  }
1436
1316
  }
1437
1317
  },
@@ -1477,9 +1357,7 @@ const ControlImageRevealSliderComponent = {
1477
1357
  cursor: {
1478
1358
  cursorType: "system",
1479
1359
  defaultCursor: null,
1480
- defaultCursorScale: 2,
1481
- hoverCursor: null,
1482
- hoverCursorScale: 2
1360
+ hoverCursor: null
1483
1361
  },
1484
1362
  position: {
1485
1363
  revealPosition: "random",
@@ -1518,17 +1396,6 @@ const ControlImageRevealSliderComponent = {
1518
1396
  value: true
1519
1397
  }
1520
1398
  },
1521
- {
1522
- if: [
1523
- { name: "position.target", value: "image" },
1524
- { name: "cursor.cursorType", value: "custom" },
1525
- { name: "cursor.defaultCursor", value: null, isNotEqual: true }
1526
- ],
1527
- then: {
1528
- name: "properties.cursor.properties.defaultCursorScale.display.visible",
1529
- value: true
1530
- }
1531
- },
1532
1399
  {
1533
1400
  if: {
1534
1401
  name: "cursor.cursorType",
@@ -1538,16 +1405,6 @@ const ControlImageRevealSliderComponent = {
1538
1405
  name: "properties.cursor.properties.hoverCursor.display.visible",
1539
1406
  value: true
1540
1407
  }
1541
- },
1542
- {
1543
- if: [
1544
- { name: "cursor.cursorType", value: "custom" },
1545
- { name: "cursor.hoverCursor", value: null, isNotEqual: true }
1546
- ],
1547
- then: {
1548
- name: "properties.cursor.properties.hoverCursorScale.display.visible",
1549
- value: true
1550
- }
1551
1408
  }
1552
1409
  ]
1553
1410
  },
package/dist/types/Component.d.ts CHANGED
@@ -4,8 +4,8 @@ export type Component = {
4
4
  id: string;
5
5
  name: string;
6
6
  defaultSize?: {
7
- width?: string | number;
8
- height?: string | number;
7
+ width?: number | string;
8
+ height?: number | string;
9
9
  };
10
10
  schema: any;
11
11
  preview?: {
package/package.json CHANGED
@@ -1,69 +1,68 @@
1
- {
2
- "name": "@cntrl-site/components",
3
- "version": "0.1.6-19",
4
- "description": "Custom components for control editor and public websites.",
5
- "main": "dist/index.js",
6
- "module": "dist/index.mjs",
7
- "types": "dist/index.d.ts",
8
- "style": "dist/components.css",
9
- "sideEffects": [
10
- "**/*.css"
11
- ],
12
- "exports": {
13
- ".": {
14
- "types": "./dist/index.d.ts",
15
- "import": "./dist/index.mjs",
16
- "require": "./dist/index.js"
17
- },
18
- "./style/components.css": {
19
- "default": "./dist/components.css"
20
- }
21
- },
22
- "scripts": {
23
- "test": "jest",
24
- "dev": "vite development",
25
- "prebuild": "rimraf ./dist",
26
- "build": "vite build",
27
- "prepublishOnly": "cross-env NODE_ENV=production npm run build"
28
- },
29
- "files": [
30
- "dist",
31
- "resources"
32
- ],
33
- "repository": {
34
- "type": "git",
35
- "url": "git+https://github.com/cntrl-site/components.git"
36
- },
37
- "author": "arsen@momdesign.nyc",
38
- "license": "MIT",
39
- "bugs": {
40
- "url": "https://github.com/cntrl-site/components/issues"
41
- },
42
- "homepage": "https://github.com/cntrl-site/components#readme",
43
- "directories": {
44
- "lib": "dist"
45
- },
46
- "dependencies": {
47
- "@antfu/eslint-config": "^3.16.0",
48
- "@splidejs/react-splide": "^0.7.12",
49
- "classnames": "^2.5.1",
50
- "framer-motion": "^12.23.27",
51
- "ts-node": "^10.9.1"
52
- },
53
- "devDependencies": {
54
- "@tsconfig/node16": "^1.0.3",
55
- "@tsconfig/recommended": "^1.0.1",
56
- "@types/node": "^18.11.7",
57
- "@types/react": "^18.2.0",
58
- "@types/react-dom": "^18.2.0",
59
- "@vitejs/plugin-react": "^4.3.4",
60
- "cross-env": "^10.1.0",
61
- "react": "^18.2.0",
62
- "react-dom": "^18.2.0",
63
- "rimraf": "^6.0.1",
64
- "sass": "^1.86.3",
65
- "typescript": "^5.2.2",
66
- "vite": "^6.2.5",
67
- "vite-plugin-dts": "^4.5.3"
68
- }
69
- }
1
+ {
2
+ "name": "@cntrl-site/components",
3
+ "version": "0.1.7-0",
4
+ "description": "Custom components for control editor and public websites.",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "style": "dist/components.css",
9
+ "sideEffects": [
10
+ "**/*.css"
11
+ ],
12
+ "exports": {
13
+ ".": {
14
+ "types": "./dist/index.d.ts",
15
+ "import": "./dist/index.mjs",
16
+ "require": "./dist/index.js"
17
+ },
18
+ "./style/components.css": {
19
+ "default": "./dist/components.css"
20
+ }
21
+ },
22
+ "scripts": {
23
+ "test": "jest",
24
+ "dev": "vite development",
25
+ "prebuild": "rimraf ./dist",
26
+ "build": "vite build",
27
+ "prepublishOnly": "cross-env NODE_ENV=production npm run build"
28
+ },
29
+ "files": [
30
+ "dist",
31
+ "resources"
32
+ ],
33
+ "repository": {
34
+ "type": "git",
35
+ "url": "git+https://github.com/cntrl-site/components.git"
36
+ },
37
+ "author": "arsen@momdesign.nyc",
38
+ "license": "MIT",
39
+ "bugs": {
40
+ "url": "https://github.com/cntrl-site/components/issues"
41
+ },
42
+ "homepage": "https://github.com/cntrl-site/components#readme",
43
+ "directories": {
44
+ "lib": "dist"
45
+ },
46
+ "dependencies": {
47
+ "@antfu/eslint-config": "^3.16.0",
48
+ "@splidejs/react-splide": "^0.7.12",
49
+ "classnames": "^2.5.1",
50
+ "ts-node": "^10.9.1"
51
+ },
52
+ "devDependencies": {
53
+ "@tsconfig/node16": "^1.0.3",
54
+ "@tsconfig/recommended": "^1.0.1",
55
+ "@types/node": "^18.11.7",
56
+ "@types/react": "^18.2.0",
57
+ "@types/react-dom": "^18.2.0",
58
+ "@vitejs/plugin-react": "^4.3.4",
59
+ "cross-env": "^10.1.0",
60
+ "react": "^18.2.0",
61
+ "react-dom": "^18.2.0",
62
+ "rimraf": "^6.0.1",
63
+ "sass": "^1.86.3",
64
+ "typescript": "^5.2.2",
65
+ "vite": "^6.2.5",
66
+ "vite-plugin-dts": "^4.5.3"
67
+ }
68
+ }