@telefonica/mistica 14.24.1 → 14.26.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 (97) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/accordion.css-mistica.js +41 -0
  3. package/dist/accordion.css.d.ts +12 -0
  4. package/dist/accordion.css.ts.vanilla.css-mistica.js +11 -0
  5. package/dist/accordion.d.ts +47 -0
  6. package/dist/accordion.js +350 -0
  7. package/dist/boxed.d.ts +1 -0
  8. package/dist/boxed.js +17 -16
  9. package/dist/card.js +345 -345
  10. package/dist/carousel.js +58 -52
  11. package/dist/checkbox.css.d.ts +1 -1
  12. package/dist/checkbox.d.ts +3 -1
  13. package/dist/checkbox.js +23 -22
  14. package/dist/community/blocks.js +3 -2
  15. package/dist/form-context.d.ts +9 -9
  16. package/dist/generated/mistica-icons/icons-keywords.d.ts +4 -0
  17. package/dist/icons/icon-chevron.d.ts +1 -0
  18. package/dist/icons/icon-chevron.js +21 -18
  19. package/dist/index.d.ts +5 -2
  20. package/dist/index.js +34 -4
  21. package/dist/integer-field.d.ts +5 -1
  22. package/dist/integer-field.js +12 -11
  23. package/dist/list.d.ts +8 -0
  24. package/dist/list.js +3 -0
  25. package/dist/menu.css-mistica.js +30 -6
  26. package/dist/menu.css.d.ts +14 -2
  27. package/dist/menu.d.ts +25 -3
  28. package/dist/menu.js +264 -84
  29. package/dist/overlay.js +11 -52
  30. package/dist/overscroll-color-context.js +23 -11
  31. package/dist/package-version.js +1 -1
  32. package/dist/pin-field.css-mistica.js +37 -0
  33. package/dist/pin-field.css.d.ts +7 -0
  34. package/dist/pin-field.css.ts.vanilla.css-mistica.js +11 -0
  35. package/dist/pin-field.d.ts +25 -0
  36. package/dist/pin-field.js +269 -0
  37. package/dist/progress-bar.css-mistica.js +7 -4
  38. package/dist/progress-bar.css.d.ts +1 -0
  39. package/dist/progress-bar.d.ts +12 -3
  40. package/dist/progress-bar.js +109 -13
  41. package/dist/skins/telefonica.js +2 -2
  42. package/dist/skins/vivo-new.js +1 -1
  43. package/dist/slider.css-mistica.js +42 -0
  44. package/dist/slider.css.d.ts +9 -0
  45. package/dist/slider.css.ts.vanilla.css-mistica.js +11 -0
  46. package/dist/slider.d.ts +14 -0
  47. package/dist/slider.js +170 -0
  48. package/dist/stepper.js +34 -27
  49. package/dist/text-field-base.css.d.ts +2 -0
  50. package/dist/text-field-base.d.ts +1 -0
  51. package/dist/text-field-components.js +28 -26
  52. package/dist/text-field.d.ts +1 -0
  53. package/dist/theme.d.ts +3 -0
  54. package/dist/theme.js +24 -12
  55. package/dist/tooltip.css-mistica.js +10 -7
  56. package/dist/tooltip.css.d.ts +1 -0
  57. package/dist/tooltip.d.ts +2 -1
  58. package/dist/tooltip.js +37 -36
  59. package/dist/touchable.js +5 -4
  60. package/dist/utils/locale.d.ts +1 -1
  61. package/dist/video.js +8 -9
  62. package/dist-es/accordion.css-mistica.js +9 -0
  63. package/dist-es/accordion.css.ts.vanilla.css-mistica.js +2 -0
  64. package/dist-es/accordion.js +280 -0
  65. package/dist-es/boxed.js +25 -24
  66. package/dist-es/card.js +475 -475
  67. package/dist-es/carousel.js +95 -89
  68. package/dist-es/checkbox.js +42 -41
  69. package/dist-es/community/blocks.js +2 -1
  70. package/dist-es/icons/icon-chevron.js +25 -22
  71. package/dist-es/index.js +1768 -1765
  72. package/dist-es/integer-field.js +14 -13
  73. package/dist-es/list.js +9 -9
  74. package/dist-es/menu.css-mistica.js +10 -4
  75. package/dist-es/menu.js +262 -93
  76. package/dist-es/overlay.js +18 -20
  77. package/dist-es/overscroll-color-context.js +30 -18
  78. package/dist-es/package-version.js +1 -1
  79. package/dist-es/pin-field.css-mistica.js +5 -0
  80. package/dist-es/pin-field.css.ts.vanilla.css-mistica.js +2 -0
  81. package/dist-es/pin-field.js +217 -0
  82. package/dist-es/progress-bar.css-mistica.js +2 -2
  83. package/dist-es/progress-bar.js +67 -18
  84. package/dist-es/skins/telefonica.js +2 -2
  85. package/dist-es/skins/vivo-new.js +1 -1
  86. package/dist-es/slider.css-mistica.js +10 -0
  87. package/dist-es/slider.css.ts.vanilla.css-mistica.js +2 -0
  88. package/dist-es/slider.js +117 -0
  89. package/dist-es/stepper.js +61 -54
  90. package/dist-es/style.css +1 -1
  91. package/dist-es/text-field-components.js +38 -36
  92. package/dist-es/theme.js +24 -12
  93. package/dist-es/tooltip.css-mistica.js +3 -3
  94. package/dist-es/tooltip.js +65 -64
  95. package/dist-es/touchable.js +9 -8
  96. package/dist-es/video.js +16 -17
  97. package/package.json +1 -1
package/dist/card.js CHANGED
@@ -10,37 +10,37 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  CardActionSpinner: function() {
13
- return er;
13
+ return ra;
14
14
  },
15
15
  CardActionsGroup: function() {
16
- return W;
16
+ return U;
17
17
  },
18
18
  DataCard: function() {
19
- return zr;
19
+ return Da;
20
20
  },
21
21
  DisplayDataCard: function() {
22
- return Hr;
22
+ return Va;
23
23
  },
24
24
  DisplayMediaCard: function() {
25
- return Or;
25
+ return Ha;
26
26
  },
27
27
  MediaCard: function() {
28
- return Ir;
28
+ return Ra;
29
29
  },
30
30
  NakedCard: function() {
31
- return Rr;
31
+ return Ma;
32
32
  },
33
33
  PosterCard: function() {
34
- return Er;
34
+ return Ea;
35
35
  },
36
36
  SmallNakedCard: function() {
37
- return Mr;
37
+ return za;
38
38
  },
39
39
  SnapCard: function() {
40
- return Dr;
40
+ return Oa;
41
41
  },
42
42
  TOP_ACTION_BUTTON_SIZE: function() {
43
- return Ce;
43
+ return Te;
44
44
  }
45
45
  });
46
46
  const _jsxruntime = require("react/jsx-runtime");
@@ -193,85 +193,85 @@ function _object_without_properties_loose(source, excluded) {
193
193
  }
194
194
  return target;
195
195
  }
196
- const Ne = (r, a)=>{
197
- const { texts: i } = (0, _hooks.useTheme)(), l = r ? [
198
- ...r
196
+ const Ce = (a, n)=>{
197
+ const { texts: s } = (0, _hooks.useTheme)(), o = a ? [
198
+ ...a
199
199
  ] : [];
200
- return a && l.push({
201
- label: i.closeButtonLabel,
202
- onPress: a,
200
+ return n && o.push({
201
+ label: s.closeButtonLabel,
202
+ onPress: n,
203
203
  Icon: _iconcloseregular.default
204
- }), l;
205
- }, Ce = 48, W = (param)=>{
206
- let { actions: r , padding: a = 8 , onClose: i , type: l = "default" } = param;
207
- const m = Ne(r, i), s = m.length > 0, o = {
204
+ }), o;
205
+ }, Te = 48, U = (param)=>{
206
+ let { actions: a , padding: n = 8 , onClose: s , type: o = "default" } = param;
207
+ const h = Ce(a, s), t = h.length > 0, d = {
208
208
  default: _skincontractcssmistica.vars.colors.neutralHigh,
209
209
  inverse: _skincontractcssmistica.vars.colors.inverse,
210
210
  media: "#000000"
211
- }, d = {
211
+ }, l = {
212
212
  default: _cardcssmistica.cardAction,
213
213
  inverse: _cardcssmistica.cardActionInverse,
214
214
  media: _cardcssmistica.cardActionMedia
215
215
  };
216
- return s ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
216
+ return t ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
217
217
  style: {
218
218
  position: "absolute",
219
- right: a,
220
- top: a,
219
+ right: n,
220
+ top: n,
221
221
  zIndex: 3
222
222
  },
223
223
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
224
224
  className: (0, _sprinklescssmistica.sprinkles)({
225
225
  display: "flex"
226
226
  }),
227
- children: m.map((param, u)=>/* @__PURE__ */ {
228
- let { onPress: p , label: c , Icon: t , disabled: h = !1 } = param;
227
+ children: h.map((param, p)=>/* @__PURE__ */ {
228
+ let { onPress: u , label: c , Icon: i , disabled: m = !1 } = param;
229
229
  return (0, _jsxruntime.jsx)(_iconbutton.default, {
230
- disabled: h,
231
- size: Ce,
232
- onPress: p,
230
+ disabled: m,
231
+ size: Te,
232
+ onPress: u,
233
233
  "aria-label": c,
234
234
  className: _cardcssmistica.cardActionIconButton,
235
235
  style: {
236
236
  display: "flex"
237
237
  },
238
238
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
239
- className: d[l],
240
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(t, {
241
- color: o[l],
239
+ className: l[o],
240
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
241
+ color: d[o],
242
242
  size: 20
243
243
  })
244
244
  })
245
- }, u);
245
+ }, p);
246
246
  })
247
247
  })
248
248
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
249
- }, Ye = (r)=>r ? typeof r == "number" ? r : ({
249
+ }, $e = (a)=>a ? typeof a == "number" ? a : ({
250
250
  "1:1": 1,
251
251
  "16:9": 16 / 9,
252
252
  "7:10": 7 / 10,
253
253
  "9:10": 9 / 10,
254
254
  auto: 0
255
- })[r] : 0, E = /*#__PURE__*/ _react.forwardRef((param, d)=>{
256
- let { children: r , width: a = "100%" , height: i = "100%" , aspectRatio: l , dataAttributes: m , className: s , "aria-label": o } = param;
257
- const p = Ye(l);
258
- return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(m)), {
259
- ref: d,
260
- "aria-label": o,
261
- className: (0, _classnames.default)(s, _cardcssmistica.cardContainer),
255
+ })[a] : 0, X = /*#__PURE__*/ _react.forwardRef((param, l)=>{
256
+ let { children: a , width: n = "100%" , height: s = "100%" , aspectRatio: o , dataAttributes: h , className: t , "aria-label": d } = param;
257
+ const u = $e(o);
258
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(h)), {
259
+ ref: l,
260
+ "aria-label": d,
261
+ className: (0, _classnames.default)(t, _cardcssmistica.cardContainer),
262
262
  style: _object_spread({
263
- width: a,
264
- height: i
265
- }, p ? (0, _dynamic.assignInlineVars)({
266
- [_cardcssmistica.vars.aspectRatio]: String(p)
263
+ width: n,
264
+ height: s
265
+ }, u ? (0, _dynamic.assignInlineVars)({
266
+ [_cardcssmistica.vars.aspectRatio]: String(u)
267
267
  }) : {}),
268
- children: r
268
+ children: a
269
269
  }));
270
- }), Te = (r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
270
+ }), Ie = (a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
271
271
  width: "100%",
272
272
  height: "100%",
273
- src: r !== null && r !== void 0 ? r : "//:0"
274
- }), $e = {
273
+ src: a || ""
274
+ }), ea = {
275
275
  loading: {
276
276
  showSpinner: "loadingTimeout",
277
277
  play: "playing",
@@ -295,82 +295,82 @@ const Ne = (r, a)=>{
295
295
  error: {
296
296
  reset: "loading"
297
297
  }
298
- }, Ve = (r, a)=>$e[r][a] || r, er = (param)=>/* @__PURE__ */ {
299
- let { color: r } = param;
298
+ }, aa = (a, n)=>ea[a][n] || a, ra = (param)=>/* @__PURE__ */ {
299
+ let { color: a } = param;
300
300
  return (0, _jsxruntime.jsx)(_spinner.default, {
301
- color: r,
301
+ color: a,
302
302
  size: 16,
303
303
  delay: "0"
304
304
  });
305
- }, Q = (param)=>/* @__PURE__ */ {
306
- let { color: r } = param;
305
+ }, Y = (param)=>/* @__PURE__ */ {
306
+ let { color: a } = param;
307
307
  return (0, _jsxruntime.jsx)(_iconpausefilled.default, {
308
- color: r,
308
+ color: a,
309
309
  size: 12
310
310
  });
311
- }, rr = (param)=>/* @__PURE__ */ {
312
- let { color: r } = param;
311
+ }, na = (param)=>/* @__PURE__ */ {
312
+ let { color: a } = param;
313
313
  return (0, _jsxruntime.jsx)(_iconplayfilled.default, {
314
- color: r,
314
+ color: a,
315
315
  size: 12
316
316
  });
317
- }, be = (r, a, i)=>{
318
- const { texts: l } = (0, _hooks.useTheme)(), m = _react.useRef(null), [s, o] = _react.useReducer(Ve, "loading");
317
+ }, xe = (a, n, s)=>{
318
+ const { texts: o } = (0, _hooks.useTheme)(), h = _react.useRef(null), [t, d] = _react.useReducer(aa, "loading");
319
319
  _react.useEffect(()=>{
320
- var h;
321
- const t = setTimeout(()=>o("showSpinner"), 2e3);
322
- return (h = m.current) == null || h.load(), ()=>{
323
- clearTimeout(t), o("reset");
320
+ var m;
321
+ const i = setTimeout(()=>d("showSpinner"), 2e3);
322
+ return (m = h.current) == null || m.load(), ()=>{
323
+ clearTimeout(i), d("reset");
324
324
  };
325
325
  }, [
326
- r
326
+ a
327
327
  ]);
328
- const d = _react.useMemo(()=>r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
329
- ref: (0, _common.combineRefs)(m, i),
330
- src: r,
328
+ const l = _react.useMemo(()=>a !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
329
+ ref: (0, _common.combineRefs)(h, s),
330
+ src: a,
331
331
  width: "100%",
332
332
  height: "100%",
333
- poster: a,
334
- onError: ()=>o("fail"),
335
- onPause: ()=>o("pause"),
336
- onPlay: ()=>o("play")
333
+ poster: n,
334
+ onError: ()=>d("fail"),
335
+ onPause: ()=>d("pause"),
336
+ onPlay: ()=>d("play")
337
337
  }) : void 0, [
338
- i,
339
- r,
340
- a
341
- ]), p = ()=>{
342
- const t = m.current;
343
- t && (s === "loading" ? o("showSpinner") : s === "paused" ? t.play() : s === "playing" && t.pause());
338
+ s,
339
+ a,
340
+ n
341
+ ]), u = ()=>{
342
+ const i = h.current;
343
+ i && (t === "loading" ? d("showSpinner") : t === "paused" ? i.play() : t === "playing" && i.pause());
344
344
  };
345
- if (s === "error") return {
346
- video: d
345
+ if (t === "error") return {
346
+ video: l
347
347
  };
348
348
  const c = {
349
349
  Icon: {
350
- playing: Q,
351
- loading: Q,
352
- paused: rr,
353
- loadingTimeout: (0, _platform.isRunningAcceptanceTest)() ? Q : er
354
- }[s],
355
- onPress: p,
350
+ playing: Y,
351
+ loading: Y,
352
+ paused: na,
353
+ loadingTimeout: (0, _platform.isRunningAcceptanceTest)() ? Y : ra
354
+ }[t],
355
+ onPress: u,
356
356
  label: {
357
- playing: l.pauseIconButtonLabel,
358
- loading: l.pauseIconButtonLabel,
359
- paused: l.playIconButtonLabel,
357
+ playing: o.pauseIconButtonLabel,
358
+ loading: o.pauseIconButtonLabel,
359
+ paused: o.playIconButtonLabel,
360
360
  loadingTimeout: ""
361
- }[s],
362
- disabled: s === "loadingTimeout"
361
+ }[t],
362
+ disabled: t === "loadingTimeout"
363
363
  };
364
364
  return {
365
- video: d,
365
+ video: l,
366
366
  videoAction: c
367
367
  };
368
- }, ie = (param)=>{
369
- let { headline: r , pretitle: a , pretitleLinesMax: i , title: l , titleLinesMax: m , subtitle: s , subtitleLinesMax: o , description: d , descriptionLinesMax: p , extra: c , button: t , buttonLink: h } = param;
370
- const { textPresets: u } = (0, _hooks.useTheme)(), v = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
368
+ }, te = (param)=>{
369
+ let { headline: a , pretitle: n , pretitleLinesMax: s , title: o , titleLinesMax: h , subtitle: t , subtitleLinesMax: d , description: l , descriptionLinesMax: u , extra: c , button: i , buttonLink: m } = param;
370
+ const { textPresets: p } = (0, _hooks.useTheme)(), g = ()=>a ? typeof a == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
371
371
  type: "promo",
372
- children: r
373
- }) : r : null;
372
+ children: a
373
+ }) : a : null;
374
374
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
375
375
  className: (0, _sprinklescssmistica.sprinkles)({
376
376
  display: "flex",
@@ -384,51 +384,51 @@ const Ne = (r, a)=>{
384
384
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
385
385
  space: 8,
386
386
  children: [
387
- (r || a || l || s) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
387
+ (a || n || o || t) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
388
388
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
389
389
  space: 8,
390
390
  children: [
391
- v(),
391
+ g(),
392
392
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
393
393
  space: 4,
394
394
  children: [
395
- a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
396
- truncate: i,
395
+ n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
396
+ truncate: s,
397
397
  as: "div",
398
398
  regular: !0,
399
399
  hyphens: "auto",
400
- children: a
400
+ children: n
401
401
  }),
402
402
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
403
403
  mobileSize: 18,
404
404
  mobileLineHeight: "24px",
405
405
  desktopSize: 20,
406
406
  desktopLineHeight: "28px",
407
- truncate: m,
408
- weight: u.cardTitle.weight,
407
+ truncate: h,
408
+ weight: p.cardTitle.weight,
409
409
  as: "h3",
410
410
  hyphens: "auto",
411
- children: l
411
+ children: o
412
412
  }),
413
413
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
414
- truncate: o,
414
+ truncate: d,
415
415
  as: "div",
416
416
  regular: !0,
417
417
  hyphens: "auto",
418
- children: s
418
+ children: t
419
419
  })
420
420
  ]
421
421
  })
422
422
  ]
423
423
  })
424
424
  }),
425
- d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
426
- truncate: p,
425
+ l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
426
+ truncate: u,
427
427
  as: "p",
428
428
  regular: !0,
429
429
  color: _skincontractcssmistica.vars.colors.textSecondary,
430
430
  hyphens: "auto",
431
- children: d
431
+ children: l
432
432
  })
433
433
  ]
434
434
  }),
@@ -437,17 +437,17 @@ const Ne = (r, a)=>{
437
437
  })
438
438
  ]
439
439
  }),
440
- (t || h) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
440
+ (i || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
441
441
  className: _cardcssmistica.actions,
442
442
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
443
- primaryButton: t,
444
- link: h
443
+ primaryButton: i,
444
+ link: m
445
445
  })
446
446
  })
447
447
  ]
448
448
  });
449
- }, Ir = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
450
- var { media: r , icon: a , headline: i , pretitle: l , pretitleLinesMax: m , subtitle: s , subtitleLinesMax: o , title: d , titleLinesMax: p , description: c , descriptionLinesMax: t , extra: h , actions: u , button: v , buttonLink: w , dataAttributes: b , "aria-label": T , onClose: g } = _param, f = _object_without_properties(_param, [
449
+ }, Ra = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
450
+ var { media: a , icon: n , headline: s , pretitle: o , pretitleLinesMax: h , subtitle: t , subtitleLinesMax: d , title: l , titleLinesMax: u , description: c , descriptionLinesMax: i , extra: m , actions: p , button: g , buttonLink: S , dataAttributes: T , "aria-label": C , onClose: y } = _param, f = _object_without_properties(_param, [
451
451
  "media",
452
452
  "icon",
453
453
  "headline",
@@ -468,12 +468,12 @@ const Ne = (r, a)=>{
468
468
  "onClose"
469
469
  ]);
470
470
  const x = f.href || f.to || f.onPress;
471
- return /* @__PURE__ */ (0, _jsxruntime.jsxs)(E, {
471
+ return /* @__PURE__ */ (0, _jsxruntime.jsxs)(X, {
472
472
  dataAttributes: _object_spread({
473
473
  "component-name": "MediaCard"
474
- }, b),
475
- ref: I,
476
- "aria-label": T,
474
+ }, T),
475
+ ref: M,
476
+ "aria-label": C,
477
477
  className: _cardcssmistica.touchableContainer,
478
478
  children: [
479
479
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
@@ -484,7 +484,7 @@ const Ne = (r, a)=>{
484
484
  maybe: !0
485
485
  }, f), {
486
486
  className: _cardcssmistica.touchable,
487
- "aria-label": T,
487
+ "aria-label": C,
488
488
  children: [
489
489
  x && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
490
490
  className: _cardcssmistica.touchableMediaCardOverlay
@@ -494,26 +494,26 @@ const Ne = (r, a)=>{
494
494
  children: [
495
495
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.MediaBorderRadiusProvider, {
496
496
  value: !1,
497
- children: r
497
+ children: a
498
498
  }),
499
499
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
500
500
  className: _cardcssmistica.mediaCardContent,
501
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
502
- headline: i,
503
- pretitle: l,
504
- pretitleLinesMax: m,
505
- title: d,
506
- titleLinesMax: p,
507
- subtitle: s,
508
- subtitleLinesMax: o,
501
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
502
+ headline: s,
503
+ pretitle: o,
504
+ pretitleLinesMax: h,
505
+ title: l,
506
+ titleLinesMax: u,
507
+ subtitle: t,
508
+ subtitleLinesMax: d,
509
509
  description: c,
510
- descriptionLinesMax: t,
511
- extra: h,
512
- button: v,
513
- buttonLink: w
510
+ descriptionLinesMax: i,
511
+ extra: m,
512
+ button: g,
513
+ buttonLink: S
514
514
  })
515
515
  }),
516
- a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
516
+ n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
517
517
  className: _cardcssmistica.mediaCardIcon,
518
518
  paddingLeft: {
519
519
  mobile: 16,
@@ -523,22 +523,22 @@ const Ne = (r, a)=>{
523
523
  mobile: 16,
524
524
  desktop: 24
525
525
  },
526
- children: a
526
+ children: n
527
527
  })
528
528
  ]
529
529
  })
530
530
  ]
531
531
  }))
532
532
  }),
533
- /* @__PURE__ */ (0, _jsxruntime.jsx)(W, {
534
- onClose: g,
535
- actions: u,
533
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
534
+ onClose: y,
535
+ actions: p,
536
536
  type: "media"
537
537
  })
538
538
  ]
539
539
  });
540
- }), Rr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
541
- var { media: r , icon: a , headline: i , pretitle: l , pretitleLinesMax: m , subtitle: s , subtitleLinesMax: o , title: d , titleLinesMax: p , description: c , descriptionLinesMax: t , extra: h , actions: u , button: v , buttonLink: w , dataAttributes: b , "aria-label": T , onClose: g } = _param, f = _object_without_properties(_param, [
540
+ }), Ma = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
541
+ var { media: a , icon: n , headline: s , pretitle: o , pretitleLinesMax: h , subtitle: t , subtitleLinesMax: d , title: l , titleLinesMax: u , description: c , descriptionLinesMax: i , extra: m , actions: p , button: g , buttonLink: S , dataAttributes: T , "aria-label": C , onClose: y } = _param, f = _object_without_properties(_param, [
542
542
  "media",
543
543
  "icon",
544
544
  "headline",
@@ -558,20 +558,20 @@ const Ne = (r, a)=>{
558
558
  "aria-label",
559
559
  "onClose"
560
560
  ]);
561
- const x = f.href || f.to || f.onPress, M = r && r.type === _image.default && r.props.circular;
562
- return /* @__PURE__ */ (0, _jsxruntime.jsxs)(E, {
563
- ref: I,
561
+ const x = f.href || f.to || f.onPress, D = a && a.type === _image.default && a.props.circular;
562
+ return /* @__PURE__ */ (0, _jsxruntime.jsxs)(X, {
563
+ ref: M,
564
564
  dataAttributes: _object_spread({
565
565
  "component-name": "NakedCard"
566
- }, b),
567
- "aria-label": T,
566
+ }, T),
567
+ "aria-label": C,
568
568
  className: x ? _cardcssmistica.touchableContainer : void 0,
569
569
  children: [
570
570
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
571
571
  maybe: !0
572
572
  }, f), {
573
573
  className: _cardcssmistica.touchable,
574
- "aria-label": T,
574
+ "aria-label": C,
575
575
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
576
576
  className: _cardcssmistica.mediaCard,
577
577
  children: [
@@ -582,30 +582,30 @@ const Ne = (r, a)=>{
582
582
  children: [
583
583
  x && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
584
584
  className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
585
- [_cardcssmistica.circularMediaOverlay]: M
585
+ [_cardcssmistica.circularMediaOverlay]: D
586
586
  })
587
587
  }),
588
- r
588
+ a
589
589
  ]
590
590
  }),
591
591
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
592
592
  className: _cardcssmistica.nakedCardContent,
593
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
594
- headline: i,
595
- pretitle: l,
596
- pretitleLinesMax: m,
597
- title: d,
598
- titleLinesMax: p,
599
- subtitle: s,
600
- subtitleLinesMax: o,
593
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
594
+ headline: s,
595
+ pretitle: o,
596
+ pretitleLinesMax: h,
597
+ title: l,
598
+ titleLinesMax: u,
599
+ subtitle: t,
600
+ subtitleLinesMax: d,
601
601
  description: c,
602
- descriptionLinesMax: t,
603
- extra: h,
604
- button: v,
605
- buttonLink: w
602
+ descriptionLinesMax: i,
603
+ extra: m,
604
+ button: g,
605
+ buttonLink: S
606
606
  })
607
607
  }),
608
- a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
608
+ n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
609
609
  className: _cardcssmistica.mediaCardIcon,
610
610
  paddingLeft: {
611
611
  mobile: 16,
@@ -615,20 +615,20 @@ const Ne = (r, a)=>{
615
615
  mobile: 16,
616
616
  desktop: 24
617
617
  },
618
- children: a
618
+ children: n
619
619
  })
620
620
  ]
621
621
  })
622
622
  })),
623
- /* @__PURE__ */ (0, _jsxruntime.jsx)(W, {
624
- onClose: g,
625
- actions: u,
623
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
624
+ onClose: y,
625
+ actions: p,
626
626
  type: "media"
627
627
  })
628
628
  ]
629
629
  });
630
- }), Mr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
631
- var { media: r , title: a , titleLinesMax: i , subtitle: l , subtitleLinesMax: m , description: s , descriptionLinesMax: o , extra: d , dataAttributes: p , "aria-label": c } = _param, t = _object_without_properties(_param, [
630
+ }), za = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
631
+ var { media: a , title: n , titleLinesMax: s , subtitle: o , subtitleLinesMax: h , description: t , descriptionLinesMax: d , extra: l , dataAttributes: u , "aria-label": c } = _param, i = _object_without_properties(_param, [
632
632
  "media",
633
633
  "title",
634
634
  "titleLinesMax",
@@ -640,17 +640,17 @@ const Ne = (r, a)=>{
640
640
  "dataAttributes",
641
641
  "aria-label"
642
642
  ]);
643
- const u = t.href || t.to || t.onPress, v = r && r.type === _image.default && r.props.circular;
644
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(E, {
645
- ref: h,
643
+ const p = i.href || i.to || i.onPress, g = a && a.type === _image.default && a.props.circular;
644
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
645
+ ref: m,
646
646
  dataAttributes: _object_spread({
647
647
  "component-name": "SmallNakedCard"
648
- }, p),
648
+ }, u),
649
649
  "aria-label": c,
650
- className: u ? _cardcssmistica.touchableContainer : void 0,
650
+ className: p ? _cardcssmistica.touchableContainer : void 0,
651
651
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
652
652
  maybe: !0
653
- }, t), {
653
+ }, i), {
654
654
  className: _cardcssmistica.touchable,
655
655
  "aria-label": c,
656
656
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -661,12 +661,12 @@ const Ne = (r, a)=>{
661
661
  position: "relative"
662
662
  },
663
663
  children: [
664
- u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
664
+ p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
665
665
  className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
666
- [_cardcssmistica.circularMediaOverlay]: v
666
+ [_cardcssmistica.circularMediaOverlay]: g
667
667
  })
668
668
  }),
669
- r
669
+ a
670
670
  ]
671
671
  }),
672
672
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -677,34 +677,34 @@ const Ne = (r, a)=>{
677
677
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
678
678
  space: 8,
679
679
  children: [
680
- a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
681
- truncate: i,
680
+ n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
681
+ truncate: s,
682
682
  as: "h3",
683
683
  regular: !0,
684
684
  hyphens: "auto",
685
- children: a
685
+ children: n
686
686
  }),
687
- l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
688
- truncate: m,
687
+ o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
688
+ truncate: h,
689
689
  regular: !0,
690
690
  as: "p",
691
691
  hyphens: "auto",
692
- children: l
692
+ children: o
693
693
  })
694
694
  ]
695
695
  }),
696
- s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
697
- truncate: o,
696
+ t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
697
+ truncate: d,
698
698
  regular: !0,
699
699
  as: "p",
700
700
  color: _skincontractcssmistica.vars.colors.textSecondary,
701
701
  hyphens: "auto",
702
- children: s
702
+ children: t
703
703
  })
704
704
  ]
705
705
  }),
706
- d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
707
- children: d
706
+ l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
707
+ children: l
708
708
  })
709
709
  ]
710
710
  })
@@ -712,8 +712,8 @@ const Ne = (r, a)=>{
712
712
  })
713
713
  }))
714
714
  });
715
- }), zr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
716
- var { icon: r , headline: a , pretitle: i , pretitleLinesMax: l , title: m , titleLinesMax: s , subtitle: o , subtitleLinesMax: d , description: p , descriptionLinesMax: c , extra: t , actions: h , button: u , buttonLink: v , dataAttributes: w , "aria-label": b , onClose: T , aspectRatio: g } = _param, f = _object_without_properties(_param, [
715
+ }), Da = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
716
+ var { icon: a , headline: n , pretitle: s , pretitleLinesMax: o , title: h , titleLinesMax: t , subtitle: d , subtitleLinesMax: l , description: u , descriptionLinesMax: c , extra: i , actions: m , button: p , buttonLink: g , dataAttributes: S , "aria-label": T , onClose: C , aspectRatio: y } = _param, f = _object_without_properties(_param, [
717
717
  "icon",
718
718
  "headline",
719
719
  "pretitle",
@@ -733,19 +733,19 @@ const Ne = (r, a)=>{
733
733
  "onClose",
734
734
  "aspectRatio"
735
735
  ]);
736
- const x = !!r, M = f.href || f.to || f.onPress, z = Ne(h, T), G = {
736
+ const x = !!a, D = f.href || f.to || f.onPress, O = Ce(m, C), j = {
737
737
  marginRight: -16,
738
738
  marginTop: -24,
739
- width: Ce * z.length
739
+ width: Te * O.length
740
740
  };
741
- return /* @__PURE__ */ (0, _jsxruntime.jsxs)(E, {
741
+ return /* @__PURE__ */ (0, _jsxruntime.jsxs)(X, {
742
742
  dataAttributes: _object_spread({
743
743
  "component-name": "DataCard"
744
- }, w),
745
- ref: I,
746
- "aria-label": b,
744
+ }, S),
745
+ ref: M,
746
+ "aria-label": T,
747
747
  className: _cardcssmistica.touchableContainer,
748
- aspectRatio: g,
748
+ aspectRatio: y,
749
749
  children: [
750
750
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
751
751
  className: _cardcssmistica.boxed,
@@ -755,9 +755,9 @@ const Ne = (r, a)=>{
755
755
  maybe: !0
756
756
  }, f), {
757
757
  className: _cardcssmistica.touchable,
758
- "aria-label": b,
758
+ "aria-label": T,
759
759
  children: [
760
- M && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
760
+ D && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
761
761
  className: _cardcssmistica.touchableCardOverlay
762
762
  }),
763
763
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -769,33 +769,33 @@ const Ne = (r, a)=>{
769
769
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
770
770
  space: 16,
771
771
  children: [
772
- x ? r : null,
773
- /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
774
- headline: a,
775
- pretitle: i,
776
- pretitleLinesMax: l,
777
- title: m,
778
- titleLinesMax: s,
779
- subtitle: o,
780
- subtitleLinesMax: d,
781
- description: p,
772
+ x ? a : null,
773
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
774
+ headline: n,
775
+ pretitle: s,
776
+ pretitleLinesMax: o,
777
+ title: h,
778
+ titleLinesMax: t,
779
+ subtitle: d,
780
+ subtitleLinesMax: l,
781
+ description: u,
782
782
  descriptionLinesMax: c
783
783
  })
784
784
  ]
785
785
  }),
786
786
  !x && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
787
- style: G
787
+ style: j
788
788
  })
789
789
  ]
790
790
  }),
791
- t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
792
- children: t
791
+ i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
792
+ children: i
793
793
  }),
794
- (u || v) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
794
+ (p || g) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
795
795
  className: _cardcssmistica.actions,
796
796
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
797
- primaryButton: u,
798
- link: v
797
+ primaryButton: p,
798
+ link: g
799
799
  })
800
800
  })
801
801
  ]
@@ -803,15 +803,15 @@ const Ne = (r, a)=>{
803
803
  ]
804
804
  }))
805
805
  }),
806
- /* @__PURE__ */ (0, _jsxruntime.jsx)(W, {
807
- onClose: T,
808
- actions: h,
806
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
807
+ onClose: C,
808
+ actions: m,
809
809
  type: "default"
810
810
  })
811
811
  ]
812
812
  });
813
- }), Dr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
814
- var { icon: r , title: a , titleLinesMax: i , subtitle: l , subtitleLinesMax: m , dataAttributes: s , "aria-label": o , extra: d , isInverse: p = !1 , aspectRatio: c } = _param, t = _object_without_properties(_param, [
813
+ }), Oa = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
814
+ var { icon: a , title: n , titleLinesMax: s , subtitle: o , subtitleLinesMax: h , dataAttributes: t , "aria-label": d , extra: l , isInverse: u = !1 , aspectRatio: c } = _param, i = _object_without_properties(_param, [
815
815
  "icon",
816
816
  "title",
817
817
  "titleLinesMax",
@@ -823,61 +823,61 @@ const Ne = (r, a)=>{
823
823
  "isInverse",
824
824
  "aspectRatio"
825
825
  ]);
826
- const u = t.href || t.to || t.onPress, v = p ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
827
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(E, {
826
+ const p = i.href || i.to || i.onPress, g = u ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
827
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
828
828
  dataAttributes: _object_spread({
829
829
  "component-name": "SnapCard"
830
- }, s),
831
- ref: h,
830
+ }, t),
831
+ ref: m,
832
832
  className: _cardcssmistica.touchableContainer,
833
833
  aspectRatio: c,
834
834
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
835
835
  className: _cardcssmistica.boxed,
836
- isInverse: p,
836
+ isInverse: u,
837
837
  width: "100%",
838
838
  minHeight: "100%",
839
839
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
840
840
  maybe: !0
841
- }, t), {
841
+ }, i), {
842
842
  className: _cardcssmistica.touchable,
843
- "aria-label": o,
843
+ "aria-label": d,
844
844
  children: [
845
- u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
846
- className: v
845
+ p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
846
+ className: g
847
847
  }),
848
848
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
849
849
  className: _cardcssmistica.snapCard,
850
850
  children: [
851
851
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
852
852
  children: [
853
- r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
853
+ a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
854
854
  paddingBottom: 16,
855
- children: r
855
+ children: a
856
856
  }),
857
857
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
858
858
  space: 4,
859
859
  children: [
860
- a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
861
- truncate: i,
860
+ n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
861
+ truncate: s,
862
862
  as: "h3",
863
863
  regular: !0,
864
864
  hyphens: "auto",
865
- children: a
865
+ children: n
866
866
  }),
867
- l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
868
- truncate: m,
867
+ o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
868
+ truncate: h,
869
869
  regular: !0,
870
870
  color: _skincontractcssmistica.vars.colors.textSecondary,
871
871
  as: "p",
872
872
  hyphens: "auto",
873
- children: l
873
+ children: o
874
874
  })
875
875
  ]
876
876
  })
877
877
  ]
878
878
  }),
879
- d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
880
- children: d
879
+ l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
880
+ children: l
881
881
  })
882
882
  ]
883
883
  })
@@ -885,8 +885,8 @@ const Ne = (r, a)=>{
885
885
  }))
886
886
  })
887
887
  });
888
- }), xe = /*#__PURE__*/ _react.forwardRef((_param, J)=>{
889
- var { isInverse: r , backgroundImage: a , backgroundVideo: i , backgroundVideoRef: l , poster: m , icon: s , headline: o , pretitle: d , pretitleLinesMax: p , title: c , titleLinesMax: t , description: h , descriptionLinesMax: u , extra: v , button: w , secondaryButton: b , onClose: T , actions: g , buttonLink: f , dataAttributes: I , width: x , height: M , aspectRatio: z , "aria-label": G } = _param, k = _object_without_properties(_param, [
888
+ }), Ae = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
889
+ var { isInverse: a , backgroundImage: n , backgroundVideo: s , backgroundVideoRef: o , poster: h , icon: t , headline: d , pretitle: l , pretitleLinesMax: u , title: c , titleLinesMax: i , description: m , descriptionLinesMax: p , extra: g , button: S , secondaryButton: T , onClose: C , actions: y , buttonLink: f , dataAttributes: M , width: x , height: D , aspectRatio: O , "aria-label": j } = _param, A = _object_without_properties(_param, [
890
890
  "isInverse",
891
891
  "backgroundImage",
892
892
  "backgroundVideo",
@@ -912,18 +912,18 @@ const Ne = (r, a)=>{
912
912
  "aspectRatio",
913
913
  "aria-label"
914
914
  ]);
915
- const L = Te(a), { video: j , videoAction: R } = be(i, m, l);
916
- i && (g = R ? [
917
- R
915
+ const H = n !== void 0, w = s !== void 0, Z = Ie(n), { video: P , videoAction: z } = xe(s, h, o);
916
+ w && (y = z ? [
917
+ z
918
918
  ] : []);
919
- const F = (0, _themevariantcontext.useIsInverseVariant)(), B = !!a || !!i, P = B ? "0 0 16px rgba(0,0,0,0.4)" : void 0, U = (g == null ? void 0 : g.length) || T, X = k.href || k.to || k.onPress, K = a || i ? _cardcssmistica.touchableCardOverlayMedia : r ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
920
- return /* @__PURE__ */ (0, _jsxruntime.jsxs)(E, {
921
- dataAttributes: I,
922
- ref: J,
919
+ const _ = (0, _themevariantcontext.useIsInverseVariant)(), k = H || w, W = k ? "0 0 16px rgba(0,0,0,0.4)" : void 0, q = (y == null ? void 0 : y.length) || C, F = A.href || A.to || A.onPress, Q = H || w ? _cardcssmistica.touchableCardOverlayMedia : a ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
920
+ return /* @__PURE__ */ (0, _jsxruntime.jsxs)(X, {
921
+ dataAttributes: M,
922
+ ref: I,
923
923
  width: x,
924
- height: M,
925
- aspectRatio: z,
926
- "aria-label": G,
924
+ height: D,
925
+ aspectRatio: O,
926
+ "aria-label": j,
927
927
  className: _cardcssmistica.touchableContainer,
928
928
  children: [
929
929
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
@@ -931,45 +931,45 @@ const Ne = (r, a)=>{
931
931
  className: _cardcssmistica.boxed,
932
932
  width: "100%",
933
933
  minHeight: "100%",
934
- isInverse: r,
935
- background: a || i ? F ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
934
+ isInverse: a,
935
+ background: H || w ? _ ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
936
936
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
937
937
  maybe: !0
938
- }, k), {
938
+ }, A), {
939
939
  className: _cardcssmistica.touchable,
940
- "aria-label": G,
940
+ "aria-label": j,
941
941
  children: [
942
- X && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
943
- className: K
942
+ F && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
943
+ className: Q
944
944
  }),
945
945
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
946
946
  className: _cardcssmistica.displayCardContainer,
947
947
  children: [
948
- /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
949
- isInverse: F,
948
+ (H || w) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
949
+ isInverse: _,
950
950
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
951
951
  className: _cardcssmistica.displayCardBackground,
952
- children: i ? j : a ? L : void 0
952
+ children: w ? P : Z
953
953
  })
954
954
  }),
955
955
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
956
956
  className: _cardcssmistica.displayCardContent,
957
957
  style: {
958
- paddingTop: B && !s && !U && !i ? 0 : 24
958
+ paddingTop: k && !t && !q && !w ? 0 : 24
959
959
  },
960
960
  children: [
961
- s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
962
- paddingBottom: B ? 0 : 40,
961
+ t ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
962
+ paddingBottom: k ? 0 : 40,
963
963
  paddingX: 24,
964
- children: s
964
+ children: t
965
965
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
966
- paddingBottom: U || i ? B ? 24 : 64 : 0
966
+ paddingBottom: q || w ? k ? 24 : 64 : 0
967
967
  }),
968
968
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
969
969
  paddingX: 24,
970
- paddingTop: B ? 40 : 0,
970
+ paddingTop: k ? 40 : 0,
971
971
  paddingBottom: 24,
972
- className: B ? _cardcssmistica.displayCardGradient : void 0,
972
+ className: k ? _cardcssmistica.displayCardGradient : void 0,
973
973
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
974
974
  space: 24,
975
975
  children: [
@@ -978,27 +978,27 @@ const Ne = (r, a)=>{
978
978
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
979
979
  space: 8,
980
980
  children: [
981
- (o || d || c) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
981
+ (d || l || c) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
982
982
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
983
983
  space: 16,
984
984
  children: [
985
- o,
985
+ d,
986
986
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
987
987
  space: 4,
988
988
  children: [
989
- d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
989
+ l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
990
990
  forceMobileSizes: !0,
991
- truncate: p,
991
+ truncate: u,
992
992
  as: "div",
993
993
  regular: !0,
994
- textShadow: P,
995
- children: d
994
+ textShadow: W,
995
+ children: l
996
996
  }),
997
997
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
998
998
  forceMobileSizes: !0,
999
- truncate: t,
999
+ truncate: i,
1000
1000
  as: "h3",
1001
- textShadow: P,
1001
+ textShadow: W,
1002
1002
  hyphens: "auto",
1003
1003
  children: c
1004
1004
  })
@@ -1007,24 +1007,24 @@ const Ne = (r, a)=>{
1007
1007
  ]
1008
1008
  })
1009
1009
  }),
1010
- h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
1010
+ m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
1011
1011
  forceMobileSizes: !0,
1012
- truncate: u,
1012
+ truncate: p,
1013
1013
  as: "p",
1014
1014
  regular: !0,
1015
- color: B ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
1016
- textShadow: P,
1015
+ color: k ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
1016
+ textShadow: W,
1017
1017
  hyphens: "auto",
1018
- children: h
1018
+ children: m
1019
1019
  })
1020
1020
  ]
1021
1021
  }),
1022
- v
1022
+ g
1023
1023
  ]
1024
1024
  }),
1025
- (w || b || f) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
1026
- primaryButton: w,
1027
- secondaryButton: b,
1025
+ (S || T || f) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
1026
+ primaryButton: S,
1027
+ secondaryButton: T,
1028
1028
  link: f
1029
1029
  })
1030
1030
  ]
@@ -1037,36 +1037,36 @@ const Ne = (r, a)=>{
1037
1037
  ]
1038
1038
  }))
1039
1039
  }),
1040
- /* @__PURE__ */ (0, _jsxruntime.jsx)(W, {
1041
- onClose: T,
1042
- actions: g,
1043
- type: a || i ? "media" : r ? "inverse" : "default"
1040
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
1041
+ onClose: C,
1042
+ actions: y,
1043
+ type: H || w ? "media" : a ? "inverse" : "default"
1044
1044
  })
1045
1045
  ]
1046
1046
  });
1047
- }), Or = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
1048
- var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
1047
+ }), Ha = /*#__PURE__*/ _react.forwardRef((_param, s)=>/* @__PURE__ */ {
1048
+ var { dataAttributes: a } = _param, n = _object_without_properties(_param, [
1049
1049
  "dataAttributes"
1050
1050
  ]);
1051
- return (0, _jsxruntime.jsx)(xe, _object_spread_props(_object_spread({}, a), {
1052
- ref: i,
1051
+ return (0, _jsxruntime.jsx)(Ae, _object_spread_props(_object_spread({}, n), {
1052
+ ref: s,
1053
1053
  isInverse: !0,
1054
- dataAttributes: _object_spread_props(_object_spread({}, r), {
1054
+ dataAttributes: _object_spread_props(_object_spread({}, a), {
1055
1055
  "component-name": "DisplayMediaCard"
1056
1056
  })
1057
1057
  }));
1058
- }), Hr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
1059
- var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
1058
+ }), Va = /*#__PURE__*/ _react.forwardRef((_param, s)=>/* @__PURE__ */ {
1059
+ var { dataAttributes: a } = _param, n = _object_without_properties(_param, [
1060
1060
  "dataAttributes"
1061
1061
  ]);
1062
- return (0, _jsxruntime.jsx)(xe, _object_spread_props(_object_spread({}, a), {
1063
- ref: i,
1064
- dataAttributes: _object_spread_props(_object_spread({}, r), {
1062
+ return (0, _jsxruntime.jsx)(Ae, _object_spread_props(_object_spread({}, n), {
1063
+ ref: s,
1064
+ dataAttributes: _object_spread_props(_object_spread({}, a), {
1065
1065
  "component-name": "DisplayDataCard"
1066
1066
  })
1067
1067
  }));
1068
- }), Er = /*#__PURE__*/ _react.forwardRef((_param, G)=>{
1069
- var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: l , backgroundVideoRef: m , width: s , height: o , aspectRatio: d = "7:10" , ariaLabel: p , actions: c , onClose: t , icon: h , headline: u , pretitle: v , pretitleLinesMax: w , title: b , titleLinesMax: T , description: g , descriptionLinesMax: f , variant: I , isInverse: x , backgroundColor: M } = _param, z = _object_without_properties(_param, [
1068
+ }), Ea = /*#__PURE__*/ _react.forwardRef((_param, j)=>{
1069
+ var { dataAttributes: a , backgroundImage: n , backgroundVideo: s , poster: o , backgroundVideoRef: h , width: t , height: d , aspectRatio: l = "7:10" , ariaLabel: u , actions: c , onClose: i , icon: m , headline: p , pretitle: g , pretitleLinesMax: S , title: T , titleLinesMax: C , description: y , descriptionLinesMax: f , variant: M , isInverse: x , backgroundColor: D } = _param, O = _object_without_properties(_param, [
1070
1070
  "dataAttributes",
1071
1071
  "backgroundImage",
1072
1072
  "backgroundVideo",
@@ -1090,24 +1090,24 @@ const Ne = (r, a)=>{
1090
1090
  "isInverse",
1091
1091
  "backgroundColor"
1092
1092
  ]);
1093
- const k = Te(a), { video: J , videoAction: L } = be(i, l, m);
1094
- i && (c = L ? [
1095
- L
1093
+ const A = n !== void 0, I = s !== void 0, H = Ie(n), { video: w , videoAction: Z } = xe(s, o, h);
1094
+ I && (c = Z ? [
1095
+ Z
1096
1096
  ] : []);
1097
- const j = (0, _themevariantcontext.useIsInverseVariant)(), R = !!a || !!i, F = R ? "0 0 16px rgba(0,0,0,0.4)" : void 0, B = (c == null ? void 0 : c.length) || t, { textPresets: P } = (0, _hooks.useTheme)(), U = z.href || z.to || z.onPress, X = I || (x ? "inverse" : "default"), K = ()=>M || ({
1097
+ const P = (0, _themevariantcontext.useIsInverseVariant)(), z = A || I, _ = z ? "0 0 16px rgba(0,0,0,0.4)" : void 0, k = (c == null ? void 0 : c.length) || i, { textPresets: W } = (0, _hooks.useTheme)(), q = O.href || O.to || O.onPress, F = M || (x ? "inverse" : "default"), Q = ()=>D || ({
1098
1098
  default: _skincontractcssmistica.vars.colors.backgroundContainer,
1099
- inverse: j ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand,
1099
+ inverse: P ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand,
1100
1100
  alternative: _skincontractcssmistica.vars.colors.backgroundAlternative
1101
- })[X], Ae = a || i ? _cardcssmistica.touchableCardOverlayMedia : X === "inverse" ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
1102
- return /* @__PURE__ */ (0, _jsxruntime.jsxs)(E, {
1103
- width: s,
1104
- height: o,
1105
- dataAttributes: _object_spread_props(_object_spread({}, r), {
1101
+ })[F], we = A || I ? _cardcssmistica.touchableCardOverlayMedia : F === "inverse" ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
1102
+ return /* @__PURE__ */ (0, _jsxruntime.jsxs)(X, {
1103
+ width: t,
1104
+ height: d,
1105
+ dataAttributes: _object_spread_props(_object_spread({}, a), {
1106
1106
  "component-name": "PosterCard"
1107
1107
  }),
1108
- ref: G,
1109
- aspectRatio: d,
1110
- "aria-label": p,
1108
+ ref: j,
1109
+ aspectRatio: l,
1110
+ "aria-label": u,
1111
1111
  className: _cardcssmistica.touchableContainer,
1112
1112
  children: [
1113
1113
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
@@ -1115,99 +1115,99 @@ const Ne = (r, a)=>{
1115
1115
  className: _cardcssmistica.boxed,
1116
1116
  width: "100%",
1117
1117
  minHeight: "100%",
1118
- isInverse: !!a || !!i || X === "inverse",
1119
- background: a || i ? j ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : K(),
1118
+ isInverse: A || I || F === "inverse",
1119
+ background: A || I ? P ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : Q(),
1120
1120
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
1121
1121
  maybe: !0
1122
- }, z), {
1122
+ }, O), {
1123
1123
  className: _cardcssmistica.touchable,
1124
- "aria-label": p,
1124
+ "aria-label": u,
1125
1125
  children: [
1126
- U && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1127
- className: Ae
1126
+ q && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1127
+ className: we
1128
1128
  }),
1129
1129
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
1130
1130
  className: _cardcssmistica.displayCardContainer,
1131
1131
  children: [
1132
- /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
1133
- isInverse: j,
1132
+ (A || I) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
1133
+ isInverse: P,
1134
1134
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1135
1135
  className: _cardcssmistica.displayCardBackground,
1136
- children: i ? J : a ? k : void 0
1136
+ children: I ? w : H
1137
1137
  })
1138
1138
  }),
1139
1139
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
1140
1140
  className: _cardcssmistica.displayCardContent,
1141
- paddingTop: R && !h && !B && !i ? 0 : {
1142
- mobile: h ? 16 : 24,
1141
+ paddingTop: z && !m && !k && !I ? 0 : {
1142
+ mobile: m ? 16 : 24,
1143
1143
  desktop: 24
1144
1144
  },
1145
1145
  children: [
1146
- h ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1147
- paddingBottom: R ? 0 : 40,
1146
+ m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1147
+ paddingBottom: z ? 0 : 40,
1148
1148
  paddingX: {
1149
1149
  mobile: 16,
1150
1150
  desktop: 24
1151
1151
  },
1152
- children: h
1152
+ children: m
1153
1153
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1154
- paddingBottom: B || i ? R ? 24 : 64 : 0
1154
+ paddingBottom: k || I ? z ? 24 : 64 : 0
1155
1155
  }),
1156
1156
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1157
1157
  paddingX: {
1158
1158
  mobile: 16,
1159
1159
  desktop: 24
1160
1160
  },
1161
- paddingTop: R ? 40 : 0,
1161
+ paddingTop: z ? 40 : 0,
1162
1162
  paddingBottom: 24,
1163
- className: R ? _cardcssmistica.displayCardGradient : void 0,
1163
+ className: z ? _cardcssmistica.displayCardGradient : void 0,
1164
1164
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
1165
1165
  space: 24,
1166
1166
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1167
1167
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
1168
1168
  space: 8,
1169
1169
  children: [
1170
- (u || v || b) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
1170
+ (p || g || T) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
1171
1171
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
1172
1172
  space: 16,
1173
1173
  children: [
1174
- u,
1174
+ p,
1175
1175
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
1176
1176
  space: 4,
1177
1177
  children: [
1178
- v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1178
+ g && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1179
1179
  forceMobileSizes: !0,
1180
- truncate: w,
1180
+ truncate: S,
1181
1181
  as: "div",
1182
1182
  regular: !0,
1183
- textShadow: F,
1183
+ textShadow: _,
1184
1184
  hyphens: "auto",
1185
- children: v
1185
+ children: g
1186
1186
  }),
1187
1187
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
1188
1188
  desktopSize: 20,
1189
1189
  mobileSize: 18,
1190
1190
  mobileLineHeight: "24px",
1191
1191
  desktopLineHeight: "28px",
1192
- truncate: T,
1193
- weight: P.cardTitle.weight,
1192
+ truncate: C,
1193
+ weight: W.cardTitle.weight,
1194
1194
  as: "h3",
1195
1195
  hyphens: "auto",
1196
- children: b
1196
+ children: T
1197
1197
  })
1198
1198
  ]
1199
1199
  })
1200
1200
  ]
1201
1201
  })
1202
1202
  }),
1203
- g && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1203
+ y && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1204
1204
  forceMobileSizes: !0,
1205
1205
  truncate: f,
1206
1206
  as: "p",
1207
1207
  regular: !0,
1208
- textShadow: F,
1208
+ textShadow: _,
1209
1209
  hyphens: "auto",
1210
- children: g
1210
+ children: y
1211
1211
  })
1212
1212
  ]
1213
1213
  })
@@ -1221,10 +1221,10 @@ const Ne = (r, a)=>{
1221
1221
  ]
1222
1222
  }))
1223
1223
  }),
1224
- /* @__PURE__ */ (0, _jsxruntime.jsx)(W, {
1225
- onClose: t,
1224
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
1225
+ onClose: i,
1226
1226
  actions: c,
1227
- type: a || i ? "media" : X === "inverse" ? "inverse" : "default"
1227
+ type: A || I ? "media" : F === "inverse" ? "inverse" : "default"
1228
1228
  })
1229
1229
  ]
1230
1230
  });