@sc-360-v2/storefront-cms-library 0.5.44 → 0.5.46

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.
package/dist/hotspot.scss CHANGED
@@ -2,101 +2,99 @@
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
4
 
5
- $tpgp: 20px;
5
+ // $ics is the tip's border-width: a 5px border with no content box makes a
6
+ // 10px triangle whose apex sits at the centre of the 10px box.
7
+ $ics: 5px;
8
+ $tip: $ics * 2;
6
9
  $bm: 30px;
7
- $ics: 2px;
10
+
11
+ // Gap between the marker's edge and the tooltip. Held in a custom property so it
12
+ // can track the marker's real size at runtime (see --_sf-tp-gp below); at the
13
+ // default 30px marker it resolves to 20px, matching the previous flat offset.
14
+ $g: var(--_sf-tp-gp);
8
15
 
9
16
  $resizerOn: "[data-cms-element-resizer='true']";
10
17
  $dndOn: "[data-cms-new-element-dragging-v2='true']";
11
18
  $fullViewOn: '[data-view-state="full"]';
12
19
 
20
+ // Each entry places the tooltip relative to the marker's centre, then pins the
21
+ // tip to the tooltip edge that faces the marker. Because $g already absorbs the
22
+ // marker's half-size, every tip offset below is a constant: the triangle always
23
+ // spans exactly the gap, base on the tooltip edge and apex on the marker edge.
13
24
  $data: (
14
- leftTop: (transform: translate(calc(-100% - #{$tpgp}), calc(-100% + #{$bm})),
15
- icon: (bottom: #{$bm},
16
- right: 0px,
17
- transform: translate(calc(100% + #{$ics}), calc(50% + (#{$ics} * 1.25))),
25
+ // tooltip to the LEFT tip on its right edge, pointing right
26
+ leftTop: (transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
27
+ icon: (right: -#{$tip},
28
+ bottom: calc(#{$bm} - #{$ics}),
18
29
  border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
19
30
  ),
20
31
  ),
21
- leftCenter: (transform: translate(calc(-100% - #{$tpgp}), calc(-50% + 0px)),
22
- icon: (top: 50%,
23
- right: 0px,
24
- transform: translate(calc(100% + #{$ics}), calc(-50% + (0px * 1.75))),
32
+ leftCenter: (transform: translate(calc(-100% - #{$g}), -50%),
33
+ icon: (right: -#{$tip},
34
+ top: calc(50% - #{$ics}),
25
35
  border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
26
36
  ),
27
37
  ),
28
- leftBottom: (transform: translate(calc(-100% - #{$tpgp}), calc(0% - #{$bm})),
29
- icon: (top: #{$bm},
30
- right: 0px,
31
- transform: translate(calc(100% + #{$ics}), calc(-100% + (#{$ics} * 1.75))),
38
+ leftBottom: (transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
39
+ icon: (right: -#{$tip},
40
+ top: calc(#{$bm} - #{$ics}),
32
41
  border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
33
42
  ),
34
43
  ),
35
- topLeft: (transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$tpgp})),
36
- icon: (bottom: 0px,
37
- right: #{$bm},
38
- transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
44
+ // tooltip ABOVE tip on its bottom edge, pointing down
45
+ topLeft: (transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
46
+ icon: (bottom: -#{$tip},
47
+ right: calc(#{$bm} - #{$ics}),
39
48
  border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
40
49
  ),
41
50
  ),
42
- topCenter: (transform: translate(calc(-50% - #{$ics}), calc(-100% - #{$tpgp})),
43
- icon: (bottom: 0px,
44
- right: 50%,
45
- transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
51
+ topCenter: (transform: translate(-50%, calc(-100% - #{$g})),
52
+ icon: (bottom: -#{$tip},
53
+ left: calc(50% - #{$ics}),
46
54
  border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
47
55
  ),
48
56
  ),
49
- topRight: (transform: translate(calc(-1 * #{$bm}), calc(-100% - #{$tpgp})),
50
- icon: (bottom: 0px,
51
- left: #{$bm},
52
- transform: translate(calc(-100% + (#{$ics} * 1.25)), calc(100% + #{$ics})),
57
+ topRight: (transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
58
+ icon: (bottom: -#{$tip},
59
+ left: calc(#{$bm} - #{$ics}),
53
60
  border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
54
61
  ),
55
62
  ),
56
- rightTop: (transform: translate(calc(0% + #{$tpgp}), calc(-100% + #{$bm})),
57
- icon: (top: 100%,
58
- left: 0px,
59
- transform: translate(calc(-100% - #{$ics}), calc(50% - (#{$bm} * 1.25))),
63
+ // tooltip to the RIGHT tip on its left edge, pointing left
64
+ rightTop: (transform: translate(#{$g}, calc(-100% + #{$bm})),
65
+ icon: (left: -#{$tip},
66
+ bottom: calc(#{$bm} - #{$ics}),
60
67
  border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
61
68
  ),
62
69
  ),
63
- rightCenter: (transform: translate(calc(0% + #{$tpgp}), calc(-50% + #{$ics})),
64
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
65
- icon: (bottom: 50%,
66
- left: 0px,
67
- transform: translate(calc(-100% - #{$ics}), calc(50% + (0px * 1.75))),
70
+ rightCenter: (transform: translate(#{$g}, -50%),
71
+ icon: (left: -#{$tip},
72
+ top: calc(50% - #{$ics}),
68
73
  border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
69
74
  ),
70
75
  ),
71
- rightBottom: (transform: translate(calc(0% + #{$tpgp}), calc(0% - #{$bm})),
72
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
73
- icon: (top: 100%,
74
- left: 0,
75
- transform: translate(calc(-100% - #{$ics}), calc(-100% - (#{$bm} * 2.05))),
76
+ rightBottom: (transform: translate(#{$g}, calc(0% - #{$bm})),
77
+ icon: (left: -#{$tip},
78
+ top: calc(#{$bm} - #{$ics}),
76
79
  border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
77
80
  ),
78
81
  ),
79
- bottomLeft: (transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.25))),
80
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
81
- icon: (right: #{$bm},
82
- top: 0%,
83
- transform: translate(calc(50% + (#{$ics} * 0.75)), calc(-100% - #{$ics})),
82
+ // tooltip BELOW tip on its top edge, pointing up
83
+ bottomLeft: (transform: translate(calc(-100% + #{$bm}), #{$g}),
84
+ icon: (top: -#{$tip},
85
+ right: calc(#{$bm} - #{$ics}),
84
86
  border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
85
87
  ),
86
88
  ),
87
- bottomCenter: (transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.25))),
88
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
89
- icon: (right: 50%,
90
- top: 0,
91
- transform: translate(calc(0% + (#{$ics} * 2.75)), calc(-100% - #{$ics})),
89
+ bottomCenter: (transform: translate(-50%, #{$g}),
90
+ icon: (top: -#{$tip},
91
+ left: calc(50% - #{$ics}),
92
92
  border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
93
93
  ),
94
94
  ),
95
- bottomRight: (transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.25))),
96
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
97
- icon: (left: 30px,
98
- top: 0,
99
- transform: translate(calc(-50% - (#{$ics} * 1.25)), calc(-100% - #{$ics})),
95
+ bottomRight: (transform: translate(calc(0% - #{$bm}), #{$g}),
96
+ icon: (top: -#{$tip},
97
+ left: calc(#{$bm} - #{$ics}),
100
98
  border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
101
99
  ),
102
100
  ),
@@ -104,6 +102,17 @@ $data: (
104
102
 
105
103
  [data-div-type="element"] {
106
104
  &[data-element-type="imageHotspot"] {
105
+ // Half the marker as it actually renders, and the gap the tooltip keeps from
106
+ // the marker's centre. Both are driven by the size controls rather than by
107
+ // literals, so the tip lands on the marker at any size.
108
+ --_sf-ht-hf: calc(#{prepareMediaVariable(--_ctm-dn-ht-se-ht-se, 30px)} / 2);
109
+ --_sf-tp-gp: calc(var(--_sf-ht-hf) + #{$ics});
110
+
111
+ // the icon marker is sized by its svg plus .hotspot__icon's 4px padding
112
+ &[data-hotspot-style="icon"] {
113
+ --_sf-ht-hf: calc((#{prepareMediaVariable(--_ctm-dn-ht-se-in-se, 30px)} + 8px) / 2);
114
+ }
115
+
107
116
  &[data-hotspot-position] {
108
117
  @each $key, $value in $data {
109
118
  &[data-hotspot-position="#{$key}"] {
@@ -175,11 +184,11 @@ $data: (
175
184
  min-width: 100px;
176
185
  width: prepareMediaVariable(--_ctm-dn-tp-dn-tp-wh);
177
186
  min-height: 100px;
178
- height: prepareMediaVariable(--_ctm-dn-tp-dn-tp-ht);
187
+ height: prepareMediaVariable(--_ctm-dn-tp-dn-ht);
179
188
  top: var(--_sf-im-psn-tp, 0);
180
189
  left: var(--_sf-im-psn-lt, 0);
181
190
 
182
- padding: 4px 8px;
191
+ padding: prepareMediaVariable(--_ctm-dn-tp-dn-pg);
183
192
  display: flex;
184
193
  justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
185
194
  align-items: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
@@ -192,64 +201,304 @@ $data: (
192
201
  border-style: solid;
193
202
  }
194
203
 
195
- .text_box {
204
+
205
+ .tooltip__image_with_text {
206
+ display: flex;
207
+ // justify-content: center;
208
+ gap: prepareMediaVariable(--_ctm-dn-tp-dn-im-gp);
196
209
  overflow-y: auto;
210
+ height: 100%;
197
211
 
198
- h6 {
199
- font-size: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se);
200
- font-family: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-fy);
201
- color: prepareMediaVariable(--_ctm-dn-tp-tt-dn-cr);
202
-
203
- font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-wt);
204
- font-style: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-ic);
205
- text-align: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-an);
206
- letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lr-sg);
207
- line-height: prepareMediaVariable(--_ctm-dn-tp-tt-dn-le-ht);
208
- text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ue);
212
+ &.hrz {
213
+ flex-direction: row;
214
+
215
+ .tooltip__image {
216
+ flex-direction: column;
217
+ }
209
218
  }
210
219
 
211
- p {
212
- font-size: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-dc);
213
- color: prepareMediaVariable(--_ctm-dn-tp-tt-dn-cr-dc);
214
- font-family: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-fy-dc);
215
- font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-wt-dc);
216
- font-style: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
217
- text-align: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-an-dc);
218
- letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lr-sg-dc);
219
- line-height: prepareMediaVariable(--_ctm-dn-tp-tt-dn-le-ht-dc);
220
- text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lh-dc);
220
+ &.vtl {
221
+ flex-direction: column;
222
+
223
+ .tooltip__image {
224
+ flex-direction: row;
225
+ }
221
226
  }
222
- }
223
227
 
224
- .tooltip__image {
225
- height: 100%;
226
- width: 100%;
227
- background-color: prepareMediaVariable(--_ctm-dn-tp-ie-dn-bd-cr);
228
- transition: transform 0.3s ease-in-out;
229
- display: flex;
230
- justify-content: prepareMediaVariable(--_ctm-dn-tp-ie-dn-hl-at);
231
- align-items: prepareMediaVariable(--_ctm-dn-tp-ie-dn-vl-at);
232
-
233
-
234
- img {
235
- object-fit: prepareMediaVariable(--_ctm-dn-tp-ie-dn-ft-os);
236
- height: -webkit-fill-available;
237
- max-width: 100%;
238
- rotate: calc(#{prepareMediaVariable(--_ctm-dn-tp-ie-dn-re)} * 1deg);
239
- scale: prepareMediaVariable(--_ctm-dn-tp-ie-dn-zm-ie);
240
- border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-dn-br-rs);
228
+ .tooltip__image {
229
+ height: 100%;
230
+ width: 100%;
231
+ background-color: prepareMediaVariable(--_ctm-dn-tp-ie-bd-cr);
232
+ transition: transform 0.3s ease-in-out;
233
+ display: flex;
234
+ justify-content: prepareMediaVariable(--_ctm-dn-tp-ie-hl-at);
235
+ align-items: prepareMediaVariable(--_ctm-dn-tp-ie-vl-at);
236
+
237
+ img {
238
+ object-fit: prepareMediaVariable(--_ctm-dn-tp-ie-ft-os);
239
+ height: prepareMediaVariable(--_ctm-dn-tp-ie-ht);
240
+ width: prepareMediaVariable(--_ctm-dn-tp-ie-wh);
241
+ // max-width: 100%;
242
+ rotate: calc(#{prepareMediaVariable(--_ctm-dn-tp-ie-re)} * 1deg);
243
+ scale: prepareMediaVariable(--_ctm-dn-tp-ie-zm-ie);
244
+ border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-br-rs);
245
+
246
+ &:hover {
247
+ &[data-on-img-hover="Zoom In"] {
248
+ transform: scale(1.08);
249
+ }
250
+
251
+ &[data-on-img-hover="Zoom Out"] {
252
+ transform: scale(0.92);
253
+ }
254
+ }
255
+ }
256
+ }
257
+
258
+ .text_box {
259
+ display: flex;
260
+ flex-direction: column;
261
+ gap: prepareMediaVariable(--_ctm-dn-tp-tt-wr-im-gp);
262
+
263
+ span {
264
+ font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
265
+ font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy);
266
+ color: prepareMediaVariable(--_ctm-dn-tp-tt-cr);
267
+
268
+ font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt);
269
+ font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic);
270
+ text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an);
271
+ letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg);
272
+ line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht);
273
+ text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-ue);
274
+ }
275
+
276
+ p {
277
+ font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-dc);
278
+ color: prepareMediaVariable(--_ctm-dn-tp-tt-cr-dc);
279
+ font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy-dc);
280
+ font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt-dc);
281
+ font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic-dc);
282
+ text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an-dc);
283
+ letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg-dc);
284
+ line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht-dc);
285
+ text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-lh-dc);
286
+ }
287
+ }
288
+
289
+ .btn__with__text[data-btn-name="tooltipButton"] {
290
+ width: 100%;
291
+
292
+ &[data-show-shadow="false"] {
293
+ --_show-shadow: none;
294
+ }
295
+
296
+ &[data-icon-position="left"] {
297
+ --_sf-fd-bn: row;
298
+ }
299
+
300
+ &[data-icon-position="right"] {
301
+ --_sf-fd-bn: row-reverse;
302
+ }
303
+
304
+ &[data-icon-position="center"] {
305
+ --_sf-fd-bn: row;
306
+ }
307
+
308
+ span {
309
+ svg rect {
310
+ fill: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-cr));
311
+ }
312
+ }
241
313
 
242
314
  &:hover {
243
- &[data-on-img-hover="Zoom In"] {
244
- transform: scale(1.08);
315
+ --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-bd-cr)};
316
+ // @include BgColorLighter(var(--_sf-hr-cr), 5%);
317
+ --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-cr)};
318
+ --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-se)};
319
+ --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-wh)};
320
+ --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-rs)};
321
+ --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-at)};
322
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-gp)};
323
+
324
+ // for shadow
325
+ --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-sw-ae)};
326
+ --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-sw-br)};
327
+ --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-sw-hr)};
328
+ --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-tp-bn-hr-se-sw-cr)};
329
+ // for font
330
+
331
+ --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-cr)};
332
+ --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-fy)};
333
+ --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-se)};
334
+ --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-wt)};
335
+ --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-se-ic)};
336
+ --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-tt-an)};
337
+ --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-lr-sg)};
338
+ --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-le-ht)};
339
+
340
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-in-se)};
341
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-in-se)};
342
+ --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-in-c1)};
343
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ue)};
344
+
345
+ // for pading and width
346
+ --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-pg)};
347
+ --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-wh)};
348
+
349
+ &[data-hover-show-shadow="false"] {
350
+ --_hover-show-shadow: none;
245
351
  }
246
352
 
247
- &[data-on-img-hover="Zoom Out"] {
248
- transform: scale(0.92);
353
+ &[data-hover-show-icon="false"] {
354
+ --_hover-show-icon: none;
249
355
  }
250
356
  }
357
+
358
+ background-color: var(--_sf-hr-bd-cr,
359
+ prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-bd-cr));
360
+
361
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-pg));
362
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wh));
363
+ display: flex;
364
+ flex-direction: var(--_sf-fd-bn);
365
+ align-items: center;
366
+
367
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-at));
368
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-gp));
369
+
370
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-rs));
371
+
372
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-cr));
373
+
374
+ &[data-show-border="true"] {
375
+ border-color: var(--_sf-hr-br-cr,
376
+ prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-cr));
377
+
378
+ border-style: var(--_sf-hr-br-se,
379
+ prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-se));
380
+
381
+ border-width: var(--_sf-hr-br-wh,
382
+ prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-wh));
383
+ }
384
+
385
+ .txt {
386
+ display: flex;
387
+
388
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-cr));
389
+
390
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-fy));
391
+
392
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se));
393
+
394
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-wt));
395
+
396
+ font-style: var(--_sf-hr-ft-se-ic,
397
+ prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se-ic));
398
+
399
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-tt-an));
400
+
401
+ letter-spacing: var(--_sf-hr-lr-sg,
402
+ prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-lr-sg));
403
+
404
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-le-ht));
405
+
406
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
407
+ }
408
+
409
+ .icon {
410
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
411
+
412
+ svg {
413
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-in-se));
414
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-in-se));
415
+
416
+ path {
417
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-in-c1));
418
+ }
419
+ }
420
+ }
421
+
422
+ [data-element-style="Text"] {
423
+ display: inline-block;
424
+ width: 100%;
425
+ }
426
+
427
+ .icon--hover {
428
+ display: none;
429
+ transition: opacity 0.2s ease;
430
+ }
431
+
432
+ &:hover .icon--hover {
433
+ // opacity: 1;
434
+ display: flex;
435
+ }
436
+
437
+ &:hover .icon--default {
438
+ // opacity: 0;
439
+ display: none;
440
+ }
251
441
  }
252
442
  }
443
+
444
+ // .text_box {
445
+ // overflow-y: auto;
446
+
447
+ // h6 {
448
+ // font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
449
+ // font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy);
450
+ // color: prepareMediaVariable(--_ctm-dn-tp-tt-cr);
451
+
452
+ // font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt);
453
+ // font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic);
454
+ // text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an);
455
+ // letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg);
456
+ // line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht);
457
+ // text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-ue);
458
+ // }
459
+
460
+ // p {
461
+ // font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-dc);
462
+ // color: prepareMediaVariable(--_ctm-dn-tp-tt-cr-dc);
463
+ // font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy-dc);
464
+ // font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt-dc);
465
+ // font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic-dc);
466
+ // text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an-dc);
467
+ // letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg-dc);
468
+ // line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht-dc);
469
+ // text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-lh-dc);
470
+ // }
471
+ // }
472
+
473
+ // .tooltip__image {
474
+ // height: 100%;
475
+ // width: 100%;
476
+ // background-color: prepareMediaVariable(--_ctm-dn-tp-ie-bd-cr);
477
+ // transition: transform 0.3s ease-in-out;
478
+ // display: flex;
479
+ // justify-content: prepareMediaVariable(--_ctm-dn-tp-ie-hl-at);
480
+ // align-items: prepareMediaVariable(--_ctm-dn-tp-ie-vl-at);
481
+
482
+
483
+ // img {
484
+ // object-fit: prepareMediaVariable(--_ctm-dn-tp-ie-ft-os);
485
+ // height: -webkit-fill-available;
486
+ // max-width: 100%;
487
+ // rotate: calc(#{prepareMediaVariable(--_ctm-dn-tp-ie-re)} * 1deg);
488
+ // scale: prepareMediaVariable(--_ctm-dn-tp-ie-zm-ie);
489
+ // border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-br-rs);
490
+
491
+ // &:hover {
492
+ // &[data-on-img-hover="Zoom In"] {
493
+ // transform: scale(1.08);
494
+ // }
495
+
496
+ // &[data-on-img-hover="Zoom Out"] {
497
+ // transform: scale(0.92);
498
+ // }
499
+ // }
500
+ // }
501
+ // }
253
502
  }
254
503
  }
255
504
  }
@@ -295,17 +544,17 @@ $data: (
295
544
 
296
545
  &[data-hotspot-tooltip-image-style-show-border="true"] {
297
546
  .tooltip__image {
298
- border-style: prepareMediaVariable(--_ctm-dn-tp-ie-dn-br-se);
299
- border-color: prepareMediaVariable(--_ctm-dn-tp-ie-dn-br-cr);
300
- border-width: prepareMediaVariable(--_ctm-dn-tp-ie-dn-br-wh);
301
- border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-dn-br-rs);
547
+ border-style: prepareMediaVariable(--_ctm-dn-tp-ie-br-se);
548
+ border-color: prepareMediaVariable(--_ctm-dn-tp-ie-br-cr);
549
+ border-width: prepareMediaVariable(--_ctm-dn-tp-ie-br-wh);
550
+ border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-br-rs);
302
551
  }
303
552
  }
304
553
 
305
554
  &[data-hotspot-tooltip-image-style-show-shadow="true"] {
306
555
  .tooltip__image {
307
556
  box-shadow: var(--_show-shadow,
308
- prepareMediaVariable(--_ctm-dn-tp-ie-dn-sw-ae) prepareMediaVariable(--_ctm-dn-tp-ie-dn-sw-br) prepareMediaVariable(--_ctm-dn-tp-ie-dn-sw-sd) prepareMediaVariable(--_ctm-dn-tp-ie-dn-sw-cr));
557
+ prepareMediaVariable(--_ctm-dn-tp-ie-sw-ae) prepareMediaVariable(--_ctm-dn-tp-ie-sw-br) prepareMediaVariable(--_ctm-dn-tp-ie-sw-sd) prepareMediaVariable(--_ctm-dn-tp-ie-sw-cr));
309
558
  }
310
559
  }
311
560
 
@@ -388,6 +637,21 @@ $data: (
388
637
  background: prepareMediaVariable(--_ctm-dn-ht-se-bd-cr);
389
638
  border-radius: prepareMediaVariable(--_ctm-dn-ht-se-br-rs);
390
639
  padding: 4px;
640
+ // centre on the anchor point, matching .hotspot. Uses translate rather
641
+ // than transform so scaleInOut's transform cannot override it.
642
+ position: absolute;
643
+ top: 50%;
644
+ left: 50%;
645
+ translate: -50% -50%;
646
+ animation: scaleInOut prepareMediaVariable(--_ctm-dn-ht-se-an-fy) infinite;
647
+
648
+ &[data-hotspot-shape="circle"] {
649
+ border-radius: 50%;
650
+ }
651
+
652
+ &[data-hotspot-shape="any"] {
653
+ border-radius: prepareMediaVariable(--_ctm-dn-ht-se-br-rs);
654
+ }
391
655
 
392
656
  span {
393
657
  svg {
@@ -403,8 +667,8 @@ $data: (
403
667
 
404
668
  .hotspot {
405
669
  background: prepareMediaVariable(--_ctm-dn-ht-se-bd-cr);
406
- // height: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se);
407
- // width: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se);
670
+ height: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
671
+ width: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
408
672
  position: absolute;
409
673
  cursor: pointer;
410
674
  width: prepareMediaVariable(--_ctm-dn-ht-se-ht-se);
@@ -414,7 +678,9 @@ $data: (
414
678
  align-items: center;
415
679
  top: 50%;
416
680
  left: 50%;
417
- transform: translate(-50%, -50%);
681
+ // translate, not transform: scaleInOut animates transform and would
682
+ // otherwise override the centring whenever a frequency is set.
683
+ translate: -50% -50%;
418
684
  box-sizing: border-box;
419
685
  justify-content: center;
420
686
  animation: scaleInOut prepareMediaVariable(--_ctm-dn-ht-se-an-fy) infinite;
@@ -1 +1 @@
1
- !function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports["storefront-cms-library"]=r(require("react")):e["storefront-cms-library"]=r(e.react)}(this,(e=>(()=>{"use strict";var r={155:r=>{r.exports=e}},n={};function t(e){var c=n[e];if(void 0!==c)return c.exports;var l=n[e]={exports:{}};return r[e](l,l.exports,t),l.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var c={};function l(){return l=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},l.apply(null,arguments)}t.r(c),t.d(c,{A:()=>E,Address:()=>K,Article:()=>B,Aside:()=>F,B:()=>G,Button:()=>b,Code:()=>N,Details:()=>w,Dialog:()=>C,Div:()=>W,Footer:()=>k,Form:()=>T,H1:()=>d,H2:()=>u,H3:()=>h,H4:()=>f,H5:()=>m,H6:()=>v,Header:()=>_,I:()=>J,Img:()=>X,Input:()=>y,Kbd:()=>U,Label:()=>A,Main:()=>D,Nav:()=>q,Option:()=>S,P:()=>s,Pre:()=>R,Section:()=>M,Select:()=>O,Small:()=>V,Span:()=>p,Strong:()=>z,Summary:()=>I,Table:()=>H,TableCell:()=>P,TableHeaderCell:()=>j,TableRow:()=>x,Textarea:()=>g,U:()=>Q,Video:()=>L,default:()=>Y});var i=t(155),a=t.n(i),o=function(e,r){var n={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(n[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var c=0;for(t=Object.getOwnPropertySymbols(e);c<t.length;c++)r.indexOf(t[c])<0&&Object.prototype.propertyIsEnumerable.call(e,t[c])&&(n[t[c]]=e[t[c]])}return n},d=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h1",n,r)},u=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h2",n,r)},h=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h3",n,r)},f=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h4",n,r)},m=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h5",n,r)},v=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h6",n,r)},s=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("p",n,r)},p=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("span",n,r)},E=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("a",n,r)},b=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("button",n,r)},y=function(e){return a().createElement("input",e)},g=function(e){return a().createElement("textarea",e)},O=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("select",n,r)},S=function(e){return a().createElement("option",e)},H=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("table",n,r)},x=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("tr",n,r)},j=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("th",n,r)},P=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("td",n,r)},T=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("form",n,r)},A=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("label",n,r)},w=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("details",n,r)},I=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("summary",n,r)},C=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("dialog",n,r)},D=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("main",n,r)},M=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("section",n,r)},B=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("article",n,r)},F=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("aside",n,r)},_=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("header",n,r)},k=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("footer",n,r)},q=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("nav",n,r)},K=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("address",n,r)},L=function(e){var r=e.children,n=(e.tracks,o(e,["children","tracks"]));return a().createElement("video",n,r)},N=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("code",n,r)},R=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("pre",n,r)},U=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("kbd",n,r)},V=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("small",n,r)},z=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("strong",n,r)},G=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("b",n,r)},J=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("i",n,r)},Q=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("u",n,r)},W=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("div",n,r)},X=function(e){var r=e.alt,n=void 0===r?"img":r,t=o(e,["alt"]);return a().createElement("img",l({alt:n},t,{loading:"lazy"}))};const Y={H1:d,H2:u,H3:h,H4:f,H5:m,H6:v,P:s,Span:p,A:E,Button:b,Input:y,Textarea:g,Select:O,Option:S,Table:H,TableRow:x,TableHeaderCell:j,TableCell:P,Form:T,Label:A,Details:w,Summary:I,Dialog:C,Main:D,Section:M,Article:B,Aside:F,Header:_,Footer:k,Nav:q,Address:K,Code:N,Pre:R,Kbd:U,Small:V,Strong:z,B:G,I:J,U:Q,Div:W,Img:X,Video:L};return c})()));
1
+ !function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports["storefront-cms-library"]=r(require("react")):e["storefront-cms-library"]=r(e.react)}(this,(e=>(()=>{"use strict";var r={155:r=>{r.exports=e}},n={};function t(e){var c=n[e];if(void 0!==c)return c.exports;var l=n[e]={exports:{}};return r[e](l,l.exports,t),l.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var c={};function l(){return l=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},l.apply(null,arguments)}t.r(c),t.d(c,{A:()=>E,Address:()=>K,Article:()=>B,Aside:()=>F,B:()=>G,Button:()=>b,Code:()=>N,Details:()=>w,Dialog:()=>C,Div:()=>W,Footer:()=>k,Form:()=>T,H1:()=>d,H2:()=>u,H3:()=>h,H4:()=>f,H5:()=>m,H6:()=>v,Header:()=>_,I:()=>J,Img:()=>X,Input:()=>y,Kbd:()=>U,Label:()=>A,Main:()=>D,Nav:()=>q,Option:()=>S,P:()=>s,Pre:()=>R,Section:()=>M,Select:()=>O,Small:()=>V,Span:()=>p,Strong:()=>z,Summary:()=>I,Table:()=>H,TableCell:()=>P,TableHeaderCell:()=>j,TableRow:()=>x,Textarea:()=>g,U:()=>Q,Video:()=>L,default:()=>Y});var i=t(155),a=t.n(i),o=function(e,r){var n={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(n[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var c=0;for(t=Object.getOwnPropertySymbols(e);c<t.length;c++)r.indexOf(t[c])<0&&Object.prototype.propertyIsEnumerable.call(e,t[c])&&(n[t[c]]=e[t[c]])}return n},d=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h1",n,r)},u=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h2",n,r)},h=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h3",n,r)},f=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h4",n,r)},m=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h5",n,r)},v=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("h6",n,r)},s=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("p",n,r)},p=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("span",n,r)},E=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("a",n,r)},b=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("button",n,r)},y=function(e){return a().createElement("input",e)},g=function(e){return a().createElement("textarea",e)},O=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("select",n,r)},S=function(e){return a().createElement("option",e)},H=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("table",n,r)},x=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("tr",n,r)},j=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("th",n,r)},P=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("td",n,r)},T=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("form",n,r)},A=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("label",n,r)},w=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("details",n,r)},I=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("summary",n,r)},C=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("dialog",n,r)},D=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("main",n,r)},M=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("section",n,r)},B=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("article",n,r)},F=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("aside",n,r)},_=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("header",n,r)},k=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("footer",n,r)},q=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("nav",n,r)},K=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("address",n,r)},L=function(e){var r=e.children,n=(e.tracks,o(e,["children","tracks"]));return a().createElement("video",n,r)},N=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("code",n,r)},R=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("pre",n,r)},U=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("kbd",n,r)},V=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("small",n,r)},z=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("strong",n,r)},G=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("b",n,r)},J=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("i",n,r)},Q=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("u",n,r)},W=function(e){var r=e.children,n=o(e,["children"]);return a().createElement("div",n,r)},X=function(e){var r=e.alt,n=void 0===r?"img":r,t=o(e,["alt"]);return a().createElement("img",l({alt:n,loading:"lazy"},t))};const Y={H1:d,H2:u,H3:h,H4:f,H5:m,H6:v,P:s,Span:p,A:E,Button:b,Input:y,Textarea:g,Select:O,Option:S,Table:H,TableRow:x,TableHeaderCell:j,TableCell:P,Form:T,Label:A,Details:w,Summary:I,Dialog:C,Main:D,Section:M,Article:B,Aside:F,Header:_,Footer:k,Nav:q,Address:K,Code:N,Pre:R,Kbd:U,Small:V,Strong:z,B:G,I:J,U:Q,Div:W,Img:X,Video:L};return c})()));