@cntrl-site/components 0.1.6-18 → 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 +63 -183
  10. package/dist/index.mjs +63 -183
  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{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,16 +1053,13 @@ 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
- for (let i = placedImages.length - 1; i >= 0; i--) {
1053
- const img2 = placedImages[i];
1062
+ for (const img2 of placedImages) {
1054
1063
  const imgEl = new Image();
1055
1064
  imgEl.src = img2.url;
1056
1065
  const imgWidth = img2.width ? Number.parseFloat(img2.width) : imgEl.naturalWidth;
@@ -1058,10 +1067,10 @@ function isMouseOverImage(mouseX, mouseY, placedImages) {
1058
1067
  const halfW = imgWidth / 2;
1059
1068
  const halfH = imgHeight / 2;
1060
1069
  if (mouseX >= img2.x - halfW && mouseX <= img2.x + halfW && mouseY >= img2.y - halfH && mouseY <= img2.y + halfH) {
1061
- return { isOverImage: true, hasLink: img2.link.length > 0 };
1070
+ return true;
1062
1071
  }
1063
1072
  }
1064
- return { isOverImage: false, hasLink: false };
1073
+ return false;
1065
1074
  }
1066
1075
  function getImageSize(url) {
1067
1076
  return new Promise((resolve) => {
@@ -1091,81 +1100,14 @@ async function calculateImageWidthHeight(imgUrl, sizeType, customWidth, randomRa
1091
1100
  return { width, height, finalWidth: `${width}px` };
1092
1101
  }
1093
1102
  function ImageRevealSlider({ settings, content, isEditor }) {
1094
- const [divRef, setDivRef] = React.useState(null);
1103
+ const divRef = React.useRef(null);
1095
1104
  const [placedImages, setPlacedImages] = React.useState([]);
1096
1105
  const [counter, setCounter] = React.useState(0);
1097
1106
  const imageIdCounter = React.useRef(0);
1098
1107
  const defaultImageCount = 1;
1099
- const cursorX = framerMotion.useMotionValue(0);
1100
- const cursorY = framerMotion.useMotionValue(0);
1101
- const defaultScale = 32;
1102
- const cursorW = framerMotion.useMotionValue(32);
1103
- const cursorH = framerMotion.useMotionValue(32);
1104
- const [customCursorImg, setCustomCursorImg] = React.useState("none");
1105
- React.useEffect(() => {
1106
- if (!divRef) return;
1107
- const mouseMove = (e) => {
1108
- e.stopPropagation();
1109
- const divRect = divRef.getBoundingClientRect();
1110
- cursorX.set(e.clientX - cursorW.get() / 2 - divRect.left);
1111
- cursorY.set(e.clientY - cursorH.get() / 2 - divRect.top);
1112
- console.log(e);
1113
- };
1114
- divRef.addEventListener("mousemove", mouseMove);
1115
- return () => divRef.removeEventListener("mousemove", mouseMove);
1116
- }, [cursorX, cursorY, cursorW, cursorH, divRef]);
1117
1108
  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
1118
1109
  const { revealPosition, visible, target } = settings.position;
1119
- const { cursorType, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
1120
- React.useEffect(() => {
1121
- const updateCursor = () => {
1122
- if (cursorType === "system") {
1123
- setCustomCursorImg("none");
1124
- cursorW.set(defaultScale);
1125
- cursorH.set(defaultScale);
1126
- return;
1127
- }
1128
- const elUnderCursor = document.elementFromPoint(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2);
1129
- if (elUnderCursor && elUnderCursor.closest("a.link")) {
1130
- setCustomCursorImg("none");
1131
- cursorW.set(defaultScale);
1132
- cursorH.set(defaultScale);
1133
- return;
1134
- }
1135
- if (target === "area") {
1136
- setCustomCursorImg(hoverCursor || "none");
1137
- cursorW.set(defaultScale * hoverCursorScale || 1);
1138
- cursorH.set(defaultScale * hoverCursorScale || 1);
1139
- } else if (isMouseOverImage(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2, placedImages)) {
1140
- setCustomCursorImg(hoverCursor || "none");
1141
- cursorW.set(defaultScale * hoverCursorScale || 1);
1142
- cursorH.set(defaultScale * hoverCursorScale || 1);
1143
- } else {
1144
- setCustomCursorImg(defaultCursor || "none");
1145
- cursorW.set(defaultScale * defaultCursorScale || 1);
1146
- cursorH.set(defaultScale * defaultCursorScale || 1);
1147
- }
1148
- };
1149
- const unsubscribeX = cursorX.onChange(updateCursor);
1150
- const unsubscribeY = cursorY.onChange(updateCursor);
1151
- updateCursor();
1152
- return () => {
1153
- unsubscribeX();
1154
- unsubscribeY();
1155
- };
1156
- }, [
1157
- cursorType,
1158
- target,
1159
- hoverCursor,
1160
- defaultCursor,
1161
- hoverCursorScale,
1162
- defaultCursorScale,
1163
- cursorX,
1164
- cursorY,
1165
- cursorW,
1166
- cursorH,
1167
- placedImages
1168
- ]);
1110
+ const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
1169
1111
  const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
1170
1112
  const { width, height, finalWidth } = await calculateImageWidthHeight(
1171
1113
  imgData.image.url,
@@ -1198,8 +1140,8 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1198
1140
  return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
1199
1141
  }, [content]);
1200
1142
  React.useEffect(() => {
1201
- if (!divRef || content.length === 0) return;
1202
- const rect = divRef.getBoundingClientRect();
1143
+ if (!divRef.current || content.length === 0) return;
1144
+ const rect = divRef.current.getBoundingClientRect();
1203
1145
  const containerWidth = rect.width;
1204
1146
  const containerHeight = rect.height;
1205
1147
  const defaultPlaced = [];
@@ -1213,15 +1155,15 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1213
1155
  setCounter(defaultImageCount % content.length);
1214
1156
  };
1215
1157
  placeImages();
1216
- }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
1158
+ }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
1217
1159
  React.useEffect(() => {
1218
1160
  if (visible === "last One") {
1219
1161
  setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
1220
1162
  }
1221
1163
  }, [visible]);
1222
1164
  const handleClick = async (e) => {
1223
- if (!divRef) return;
1224
- const rect = divRef.getBoundingClientRect();
1165
+ if (!divRef.current) return;
1166
+ const rect = divRef.current.getBoundingClientRect();
1225
1167
  const clickX = e.clientX - rect.left;
1226
1168
  const clickY = e.clientY - rect.top;
1227
1169
  if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
@@ -1241,63 +1183,46 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1241
1183
  setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
1242
1184
  setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
1243
1185
  };
1244
- return /* @__PURE__ */ jsxRuntime.jsxs(
1186
+ return /* @__PURE__ */ jsxRuntime.jsx(
1245
1187
  "div",
1246
1188
  {
1247
- ref: setDivRef,
1189
+ ref: divRef,
1248
1190
  onClick: handleClick,
1249
1191
  className: styles.imageRevealSlider,
1250
- style: { cursor: customCursorImg === "none" ? "default" : "none" },
1251
- children: [
1252
- placedImages.map((img2) => /* @__PURE__ */ jsxRuntime.jsx(
1253
- "div",
1254
- {
1255
- className: styles.wrapper,
1256
- style: {
1257
- top: `${img2.y}px`,
1258
- left: `${img2.x}px`,
1259
- position: "absolute",
1260
- transform: "translate(-50%, -50%)",
1261
- width: img2.width ?? "auto",
1262
- height: "auto",
1263
- cursor: customCursorImg === "none" ? "default" : "none"
1264
- },
1265
- children: target === "area" && img2.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsxRuntime.jsx(
1266
- "img",
1267
- {
1268
- src: img2.url,
1269
- alt: img2.name,
1270
- className: styles.image
1271
- },
1272
- img2.id
1273
- ) }) : /* @__PURE__ */ jsxRuntime.jsx(
1274
- "img",
1275
- {
1276
- src: img2.url,
1277
- alt: img2.name,
1278
- className: styles.image
1279
- },
1280
- img2.id
1281
- )
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"
1282
1205
  },
1283
- img2.id
1284
- )),
1285
- /* @__PURE__ */ jsxRuntime.jsx(
1286
- framerMotion.motion.div,
1287
- {
1288
- className: styles.cursor,
1289
- style: {
1290
- x: cursorX,
1291
- y: cursorY,
1292
- width: cursorW.get(),
1293
- height: cursorH.get(),
1294
- backgroundImage: `url('${customCursorImg}')`,
1295
- backgroundSize: "cover",
1296
- backgroundPosition: "center"
1297
- }
1298
- }
1299
- )
1300
- ]
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
+ ))
1301
1226
  }
1302
1227
  );
1303
1228
  }
@@ -1382,17 +1307,6 @@ const ControlImageRevealSliderComponent = {
1382
1307
  visible: false
1383
1308
  }
1384
1309
  },
1385
- defaultCursorScale: {
1386
- type: "number",
1387
- title: "Scale",
1388
- min: 1,
1389
- max: 5,
1390
- step: 0.1,
1391
- display: {
1392
- type: "range-control",
1393
- visible: false
1394
- }
1395
- },
1396
1310
  hoverCursor: {
1397
1311
  type: ["string", "null"],
1398
1312
  title: "Hover",
@@ -1400,17 +1314,6 @@ const ControlImageRevealSliderComponent = {
1400
1314
  type: "settings-image-input",
1401
1315
  visible: false
1402
1316
  }
1403
- },
1404
- hoverCursorScale: {
1405
- type: "number",
1406
- title: "Scale",
1407
- min: 1,
1408
- max: 5,
1409
- step: 0.1,
1410
- display: {
1411
- type: "range-control",
1412
- visible: false
1413
- }
1414
1317
  }
1415
1318
  }
1416
1319
  },
@@ -1456,9 +1359,7 @@ const ControlImageRevealSliderComponent = {
1456
1359
  cursor: {
1457
1360
  cursorType: "system",
1458
1361
  defaultCursor: null,
1459
- defaultCursorScale: 2,
1460
- hoverCursor: null,
1461
- hoverCursorScale: 2
1362
+ hoverCursor: null
1462
1363
  },
1463
1364
  position: {
1464
1365
  revealPosition: "random",
@@ -1497,17 +1398,6 @@ const ControlImageRevealSliderComponent = {
1497
1398
  value: true
1498
1399
  }
1499
1400
  },
1500
- {
1501
- if: [
1502
- { name: "position.target", value: "image" },
1503
- { name: "cursor.cursorType", value: "custom" },
1504
- { name: "cursor.defaultCursor", value: null, isNotEqual: true }
1505
- ],
1506
- then: {
1507
- name: "properties.cursor.properties.defaultCursorScale.display.visible",
1508
- value: true
1509
- }
1510
- },
1511
1401
  {
1512
1402
  if: {
1513
1403
  name: "cursor.cursorType",
@@ -1517,16 +1407,6 @@ const ControlImageRevealSliderComponent = {
1517
1407
  name: "properties.cursor.properties.hoverCursor.display.visible",
1518
1408
  value: true
1519
1409
  }
1520
- },
1521
- {
1522
- if: [
1523
- { name: "cursor.cursorType", value: "custom" },
1524
- { name: "cursor.hoverCursor", value: null, isNotEqual: true }
1525
- ],
1526
- then: {
1527
- name: "properties.cursor.properties.hoverCursorScale.display.visible",
1528
- value: true
1529
- }
1530
1410
  }
1531
1411
  ]
1532
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,16 +1051,13 @@ 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
- for (let i = placedImages.length - 1; i >= 0; i--) {
1051
- const img2 = placedImages[i];
1060
+ for (const img2 of placedImages) {
1052
1061
  const imgEl = new Image();
1053
1062
  imgEl.src = img2.url;
1054
1063
  const imgWidth = img2.width ? Number.parseFloat(img2.width) : imgEl.naturalWidth;
@@ -1056,10 +1065,10 @@ function isMouseOverImage(mouseX, mouseY, placedImages) {
1056
1065
  const halfW = imgWidth / 2;
1057
1066
  const halfH = imgHeight / 2;
1058
1067
  if (mouseX >= img2.x - halfW && mouseX <= img2.x + halfW && mouseY >= img2.y - halfH && mouseY <= img2.y + halfH) {
1059
- return { isOverImage: true, hasLink: img2.link.length > 0 };
1068
+ return true;
1060
1069
  }
1061
1070
  }
1062
- return { isOverImage: false, hasLink: false };
1071
+ return false;
1063
1072
  }
1064
1073
  function getImageSize(url) {
1065
1074
  return new Promise((resolve) => {
@@ -1089,81 +1098,14 @@ async function calculateImageWidthHeight(imgUrl, sizeType, customWidth, randomRa
1089
1098
  return { width, height, finalWidth: `${width}px` };
1090
1099
  }
1091
1100
  function ImageRevealSlider({ settings, content, isEditor }) {
1092
- const [divRef, setDivRef] = useState(null);
1101
+ const divRef = useRef(null);
1093
1102
  const [placedImages, setPlacedImages] = useState([]);
1094
1103
  const [counter, setCounter] = useState(0);
1095
1104
  const imageIdCounter = useRef(0);
1096
1105
  const defaultImageCount = 1;
1097
- const cursorX = useMotionValue(0);
1098
- const cursorY = useMotionValue(0);
1099
- const defaultScale = 32;
1100
- const cursorW = useMotionValue(32);
1101
- const cursorH = useMotionValue(32);
1102
- const [customCursorImg, setCustomCursorImg] = useState("none");
1103
- useEffect(() => {
1104
- if (!divRef) return;
1105
- const mouseMove = (e) => {
1106
- e.stopPropagation();
1107
- const divRect = divRef.getBoundingClientRect();
1108
- cursorX.set(e.clientX - cursorW.get() / 2 - divRect.left);
1109
- cursorY.set(e.clientY - cursorH.get() / 2 - divRect.top);
1110
- console.log(e);
1111
- };
1112
- divRef.addEventListener("mousemove", mouseMove);
1113
- return () => divRef.removeEventListener("mousemove", mouseMove);
1114
- }, [cursorX, cursorY, cursorW, cursorH, divRef]);
1115
1106
  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
1116
1107
  const { revealPosition, visible, target } = settings.position;
1117
- const { cursorType, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
1118
- useEffect(() => {
1119
- const updateCursor = () => {
1120
- if (cursorType === "system") {
1121
- setCustomCursorImg("none");
1122
- cursorW.set(defaultScale);
1123
- cursorH.set(defaultScale);
1124
- return;
1125
- }
1126
- const elUnderCursor = document.elementFromPoint(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2);
1127
- if (elUnderCursor && elUnderCursor.closest("a.link")) {
1128
- setCustomCursorImg("none");
1129
- cursorW.set(defaultScale);
1130
- cursorH.set(defaultScale);
1131
- return;
1132
- }
1133
- if (target === "area") {
1134
- setCustomCursorImg(hoverCursor || "none");
1135
- cursorW.set(defaultScale * hoverCursorScale || 1);
1136
- cursorH.set(defaultScale * hoverCursorScale || 1);
1137
- } else if (isMouseOverImage(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2, placedImages)) {
1138
- setCustomCursorImg(hoverCursor || "none");
1139
- cursorW.set(defaultScale * hoverCursorScale || 1);
1140
- cursorH.set(defaultScale * hoverCursorScale || 1);
1141
- } else {
1142
- setCustomCursorImg(defaultCursor || "none");
1143
- cursorW.set(defaultScale * defaultCursorScale || 1);
1144
- cursorH.set(defaultScale * defaultCursorScale || 1);
1145
- }
1146
- };
1147
- const unsubscribeX = cursorX.onChange(updateCursor);
1148
- const unsubscribeY = cursorY.onChange(updateCursor);
1149
- updateCursor();
1150
- return () => {
1151
- unsubscribeX();
1152
- unsubscribeY();
1153
- };
1154
- }, [
1155
- cursorType,
1156
- target,
1157
- hoverCursor,
1158
- defaultCursor,
1159
- hoverCursorScale,
1160
- defaultCursorScale,
1161
- cursorX,
1162
- cursorY,
1163
- cursorW,
1164
- cursorH,
1165
- placedImages
1166
- ]);
1108
+ const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
1167
1109
  const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
1168
1110
  const { width, height, finalWidth } = await calculateImageWidthHeight(
1169
1111
  imgData.image.url,
@@ -1196,8 +1138,8 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1196
1138
  return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
1197
1139
  }, [content]);
1198
1140
  useEffect(() => {
1199
- if (!divRef || content.length === 0) return;
1200
- const rect = divRef.getBoundingClientRect();
1141
+ if (!divRef.current || content.length === 0) return;
1142
+ const rect = divRef.current.getBoundingClientRect();
1201
1143
  const containerWidth = rect.width;
1202
1144
  const containerHeight = rect.height;
1203
1145
  const defaultPlaced = [];
@@ -1211,15 +1153,15 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1211
1153
  setCounter(defaultImageCount % content.length);
1212
1154
  };
1213
1155
  placeImages();
1214
- }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
1156
+ }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
1215
1157
  useEffect(() => {
1216
1158
  if (visible === "last One") {
1217
1159
  setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
1218
1160
  }
1219
1161
  }, [visible]);
1220
1162
  const handleClick = async (e) => {
1221
- if (!divRef) return;
1222
- const rect = divRef.getBoundingClientRect();
1163
+ if (!divRef.current) return;
1164
+ const rect = divRef.current.getBoundingClientRect();
1223
1165
  const clickX = e.clientX - rect.left;
1224
1166
  const clickY = e.clientY - rect.top;
1225
1167
  if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
@@ -1239,63 +1181,46 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1239
1181
  setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
1240
1182
  setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
1241
1183
  };
1242
- return /* @__PURE__ */ jsxs(
1184
+ return /* @__PURE__ */ jsx(
1243
1185
  "div",
1244
1186
  {
1245
- ref: setDivRef,
1187
+ ref: divRef,
1246
1188
  onClick: handleClick,
1247
1189
  className: styles.imageRevealSlider,
1248
- style: { cursor: customCursorImg === "none" ? "default" : "none" },
1249
- children: [
1250
- placedImages.map((img2) => /* @__PURE__ */ jsx(
1251
- "div",
1252
- {
1253
- className: styles.wrapper,
1254
- style: {
1255
- top: `${img2.y}px`,
1256
- left: `${img2.x}px`,
1257
- position: "absolute",
1258
- transform: "translate(-50%, -50%)",
1259
- width: img2.width ?? "auto",
1260
- height: "auto",
1261
- cursor: customCursorImg === "none" ? "default" : "none"
1262
- },
1263
- children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
1264
- "img",
1265
- {
1266
- src: img2.url,
1267
- alt: img2.name,
1268
- className: styles.image
1269
- },
1270
- img2.id
1271
- ) }) : /* @__PURE__ */ jsx(
1272
- "img",
1273
- {
1274
- src: img2.url,
1275
- alt: img2.name,
1276
- className: styles.image
1277
- },
1278
- img2.id
1279
- )
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"
1280
1203
  },
1281
- img2.id
1282
- )),
1283
- /* @__PURE__ */ jsx(
1284
- motion.div,
1285
- {
1286
- className: styles.cursor,
1287
- style: {
1288
- x: cursorX,
1289
- y: cursorY,
1290
- width: cursorW.get(),
1291
- height: cursorH.get(),
1292
- backgroundImage: `url('${customCursorImg}')`,
1293
- backgroundSize: "cover",
1294
- backgroundPosition: "center"
1295
- }
1296
- }
1297
- )
1298
- ]
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
+ ))
1299
1224
  }
1300
1225
  );
1301
1226
  }
@@ -1380,17 +1305,6 @@ const ControlImageRevealSliderComponent = {
1380
1305
  visible: false
1381
1306
  }
1382
1307
  },
1383
- defaultCursorScale: {
1384
- type: "number",
1385
- title: "Scale",
1386
- min: 1,
1387
- max: 5,
1388
- step: 0.1,
1389
- display: {
1390
- type: "range-control",
1391
- visible: false
1392
- }
1393
- },
1394
1308
  hoverCursor: {
1395
1309
  type: ["string", "null"],
1396
1310
  title: "Hover",
@@ -1398,17 +1312,6 @@ const ControlImageRevealSliderComponent = {
1398
1312
  type: "settings-image-input",
1399
1313
  visible: false
1400
1314
  }
1401
- },
1402
- hoverCursorScale: {
1403
- type: "number",
1404
- title: "Scale",
1405
- min: 1,
1406
- max: 5,
1407
- step: 0.1,
1408
- display: {
1409
- type: "range-control",
1410
- visible: false
1411
- }
1412
1315
  }
1413
1316
  }
1414
1317
  },
@@ -1454,9 +1357,7 @@ const ControlImageRevealSliderComponent = {
1454
1357
  cursor: {
1455
1358
  cursorType: "system",
1456
1359
  defaultCursor: null,
1457
- defaultCursorScale: 2,
1458
- hoverCursor: null,
1459
- hoverCursorScale: 2
1360
+ hoverCursor: null
1460
1361
  },
1461
1362
  position: {
1462
1363
  revealPosition: "random",
@@ -1495,17 +1396,6 @@ const ControlImageRevealSliderComponent = {
1495
1396
  value: true
1496
1397
  }
1497
1398
  },
1498
- {
1499
- if: [
1500
- { name: "position.target", value: "image" },
1501
- { name: "cursor.cursorType", value: "custom" },
1502
- { name: "cursor.defaultCursor", value: null, isNotEqual: true }
1503
- ],
1504
- then: {
1505
- name: "properties.cursor.properties.defaultCursorScale.display.visible",
1506
- value: true
1507
- }
1508
- },
1509
1399
  {
1510
1400
  if: {
1511
1401
  name: "cursor.cursorType",
@@ -1515,16 +1405,6 @@ const ControlImageRevealSliderComponent = {
1515
1405
  name: "properties.cursor.properties.hoverCursor.display.visible",
1516
1406
  value: true
1517
1407
  }
1518
- },
1519
- {
1520
- if: [
1521
- { name: "cursor.cursorType", value: "custom" },
1522
- { name: "cursor.hoverCursor", value: null, isNotEqual: true }
1523
- ],
1524
- then: {
1525
- name: "properties.cursor.properties.hoverCursorScale.display.visible",
1526
- value: true
1527
- }
1528
1408
  }
1529
1409
  ]
1530
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-18",
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
+ }