@telefonica/mistica 14.16.0 → 14.17.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 (40) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/button.css-mistica.js +19 -16
  3. package/dist/button.css.d.ts +1 -0
  4. package/dist/button.d.ts +6 -1
  5. package/dist/button.js +161 -115
  6. package/dist/card.js +115 -119
  7. package/dist/list.css-mistica.js +17 -11
  8. package/dist/list.css.d.ts +2 -0
  9. package/dist/list.d.ts +1 -0
  10. package/dist/list.js +106 -94
  11. package/dist/package-version.js +1 -1
  12. package/dist/skins/blau.js +11 -10
  13. package/dist/skins/defaults.js +1 -0
  14. package/dist/skins/movistar-legacy.js +11 -10
  15. package/dist/skins/movistar.js +11 -10
  16. package/dist/skins/o2.js +11 -10
  17. package/dist/skins/telefonica.js +11 -10
  18. package/dist/skins/types/index.d.ts +1 -0
  19. package/dist/skins/vivo-new.js +11 -10
  20. package/dist/skins/vivo.js +11 -10
  21. package/dist/spinner.css-mistica.js +4 -4
  22. package/dist/tabs.js +13 -13
  23. package/dist-es/button.css-mistica.js +3 -3
  24. package/dist-es/button.js +201 -155
  25. package/dist-es/card.js +164 -168
  26. package/dist-es/list.css-mistica.js +2 -2
  27. package/dist-es/list.js +143 -131
  28. package/dist-es/package-version.js +1 -1
  29. package/dist-es/skins/blau.js +11 -10
  30. package/dist-es/skins/defaults.js +1 -0
  31. package/dist-es/skins/movistar-legacy.js +11 -10
  32. package/dist-es/skins/movistar.js +11 -10
  33. package/dist-es/skins/o2.js +11 -10
  34. package/dist-es/skins/telefonica.js +11 -10
  35. package/dist-es/skins/vivo-new.js +11 -10
  36. package/dist-es/skins/vivo.js +11 -10
  37. package/dist-es/spinner.css-mistica.js +2 -2
  38. package/dist-es/style.css +1 -1
  39. package/dist-es/tabs.js +18 -18
  40. package/package.json +1 -1
package/dist/card.js CHANGED
@@ -10,22 +10,22 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  DataCard: function() {
13
- return Tr;
13
+ return xr;
14
14
  },
15
15
  DisplayDataCard: function() {
16
- return wr;
16
+ return Ir;
17
17
  },
18
18
  DisplayMediaCard: function() {
19
- return xr;
19
+ return Br;
20
20
  },
21
21
  MediaCard: function() {
22
- return Cr;
22
+ return Sr;
23
23
  },
24
24
  PosterCard: function() {
25
- return Br;
25
+ return Ar;
26
26
  },
27
27
  SnapCard: function() {
28
- return Sr;
28
+ return wr;
29
29
  }
30
30
  });
31
31
  const _jsxruntime = require("react/jsx-runtime");
@@ -52,6 +52,7 @@ const _video = /*#__PURE__*/ _interop_require_default(require("./video.js"));
52
52
  const _themevariantcontext = require("./theme-variant-context.js");
53
53
  const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
54
54
  const _dynamic = require("@vanilla-extract/dynamic");
55
+ const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
55
56
  function _interop_require_default(obj) {
56
57
  return obj && obj.__esModule ? obj : {
57
58
  default: obj
@@ -184,13 +185,13 @@ const ce = (r, a)=>{
184
185
  onPress: a,
185
186
  Icon: _iconcloseregular.default
186
187
  }), s;
187
- }, he = 48, U = (param)=>{
188
+ }, he = 48, k = (param)=>{
188
189
  let { actions: r , onClose: a , type: i = "default" } = param;
189
190
  const s = ce(r, a), h = s.length > 0, o = {
190
191
  default: _skincontractcssmistica.vars.colors.neutralHigh,
191
192
  inverse: _skincontractcssmistica.vars.colors.inverse,
192
193
  media: "#000000"
193
- }, u = {
194
+ }, p = {
194
195
  default: _cardcssmistica.cardAction,
195
196
  inverse: _cardcssmistica.cardActionInverse,
196
197
  media: _cardcssmistica.cardActionMedia
@@ -207,7 +208,7 @@ const ce = (r, a)=>{
207
208
  display: "flex"
208
209
  }),
209
210
  children: s.map((param, m)=>{
210
- let { onPress: l , label: d , Icon: t , iconSize: p = 20 } = param;
211
+ let { onPress: l , label: d , Icon: t , iconSize: u = 20 } = param;
211
212
  return t ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
212
213
  size: he,
213
214
  onPress: l,
@@ -217,10 +218,10 @@ const ce = (r, a)=>{
217
218
  display: "flex"
218
219
  },
219
220
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
220
- className: u[i],
221
+ className: p[i],
221
222
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(t, {
222
223
  color: o[i],
223
- size: p
224
+ size: u
224
225
  })
225
226
  })
226
227
  }, m) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -229,17 +230,17 @@ const ce = (r, a)=>{
229
230
  })
230
231
  })
231
232
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
232
- }, Ue = (r)=>r ? typeof r == "number" ? r : ({
233
+ }, Ye = (r)=>r ? typeof r == "number" ? r : ({
233
234
  "1:1": 1,
234
235
  "16:9": 16 / 9,
235
236
  "7:10": 7 / 10,
236
237
  "9:10": 9 / 10,
237
238
  auto: 0
238
239
  })[r] : 0, W = (param)=>{
239
- let { children: r , width: a = "100%" , height: i = "100%" , minWidth: s , aspectRatio: h , className: o , "aria-label": u } = param;
240
- const l = Ue(h);
240
+ let { children: r , width: a = "100%" , height: i = "100%" , minWidth: s , aspectRatio: h , className: o , "aria-label": p } = param;
241
+ const l = Ye(h);
241
242
  return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", {
242
- "aria-label": u,
243
+ "aria-label": p,
243
244
  className: (0, _classnames.default)(o, _cardcssmistica.cardContainer),
244
245
  style: _object_spread({
245
246
  width: a,
@@ -254,7 +255,7 @@ const ce = (r, a)=>{
254
255
  width: "100%",
255
256
  height: "100%",
256
257
  src: r !== null && r !== void 0 ? r : "//:0"
257
- }), Ye = {
258
+ }), Ze = {
258
259
  loading: {
259
260
  showSpinner: "loadingTimeout",
260
261
  play: "playing",
@@ -278,14 +279,14 @@ const ce = (r, a)=>{
278
279
  error: {
279
280
  reset: "loading"
280
281
  }
281
- }, Ze = (r, a)=>Ye[r][a] || r, qe = (param)=>/* @__PURE__ */ {
282
+ }, qe = (r, a)=>Ze[r][a] || r, Je = (param)=>/* @__PURE__ */ {
282
283
  let { size: r , color: a } = param;
283
284
  return (0, _jsxruntime.jsx)(_spinner.default, {
284
285
  size: r,
285
286
  color: a,
286
287
  delay: "0"
287
288
  });
288
- }, ue = (r)=>{
289
+ }, pe = (r)=>{
289
290
  switch(r){
290
291
  case "playing":
291
292
  case "loading":
@@ -293,12 +294,12 @@ const ce = (r, a)=>{
293
294
  case "paused":
294
295
  return _iconplayfilled.default;
295
296
  case "loadingTimeout":
296
- return qe;
297
+ return Je;
297
298
  default:
298
299
  return;
299
300
  }
300
- }, pe = (r, a, i)=>{
301
- const s = _react.useRef(null), [h, o] = _react.useReducer(Ze, "loading");
301
+ }, ue = (r, a, i)=>{
302
+ const s = _react.useRef(null), [h, o] = _react.useReducer(qe, "loading");
302
303
  return _react.useEffect(()=>{
303
304
  var t;
304
305
  const d = setTimeout(()=>o("showSpinner"), 2e3);
@@ -329,8 +330,8 @@ const ce = (r, a)=>{
329
330
  }
330
331
  };
331
332
  }, fe = (param)=>{
332
- let { headline: r , pretitle: a , pretitleLinesMax: i , title: s , titleLinesMax: h , subtitle: o , subtitleLinesMax: u , description: l , descriptionLinesMax: d , extra: t , button: p , buttonLink: m } = param;
333
- const { textPresets: f } = (0, _hooks.useTheme)(), g = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
333
+ let { headline: r , pretitle: a , pretitleLinesMax: i , title: s , titleLinesMax: h , subtitle: o , subtitleLinesMax: p , description: l , descriptionLinesMax: d , extra: t , button: u , buttonLink: m } = param;
334
+ const { textPresets: v } = (0, _hooks.useTheme)(), g = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
334
335
  type: "promo",
335
336
  children: r
336
337
  }) : r : null;
@@ -368,13 +369,13 @@ const ce = (r, a)=>{
368
369
  desktopSize: 20,
369
370
  desktopLineHeight: "28px",
370
371
  truncate: h,
371
- weight: f.cardTitle.weight,
372
+ weight: v.cardTitle.weight,
372
373
  as: "h3",
373
374
  hyphens: "auto",
374
375
  children: s
375
376
  }),
376
377
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
377
- truncate: u,
378
+ truncate: p,
378
379
  as: "div",
379
380
  regular: !0,
380
381
  hyphens: "auto",
@@ -400,17 +401,17 @@ const ce = (r, a)=>{
400
401
  })
401
402
  ]
402
403
  }),
403
- (p || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
404
+ (u || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
404
405
  className: _cardcssmistica.actions,
405
406
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
406
- primaryButton: p,
407
+ primaryButton: u,
407
408
  link: m
408
409
  })
409
410
  })
410
411
  ]
411
412
  });
412
- }, Cr = /*#__PURE__*/ _react.forwardRef((_param, w)=>{
413
- var { media: r , headline: a , pretitle: i , pretitleLinesMax: s , subtitle: h , subtitleLinesMax: o , title: u , titleLinesMax: l , description: d , descriptionLinesMax: t , extra: p , actions: m , button: f , buttonLink: g , dataAttributes: x , "aria-label": N , onClose: S } = _param, c = _object_without_properties(_param, [
413
+ }, Sr = /*#__PURE__*/ _react.forwardRef((_param, B)=>{
414
+ var { media: r , headline: a , pretitle: i , pretitleLinesMax: s , subtitle: h , subtitleLinesMax: o , title: p , titleLinesMax: l , description: d , descriptionLinesMax: t , extra: u , actions: m , button: v , buttonLink: g , dataAttributes: w , "aria-label": C , onClose: S } = _param, c = _object_without_properties(_param, [
414
415
  "media",
415
416
  "headline",
416
417
  "pretitle",
@@ -429,26 +430,26 @@ const ce = (r, a)=>{
429
430
  "aria-label",
430
431
  "onClose"
431
432
  ]);
432
- const C = c.href || c.to || c.onPress, b = _cardcssmistica.touchableMediaCardOverlay;
433
+ const N = c.href || c.to || c.onPress, b = _cardcssmistica.touchableMediaCardOverlay;
433
434
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(W, {
434
- "aria-label": N,
435
+ "aria-label": C,
435
436
  className: _cardcssmistica.touchableContainer,
436
437
  children: [
437
438
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
438
439
  className: _cardcssmistica.boxed,
439
440
  dataAttributes: _object_spread({
440
441
  "component-name": "MediaCard"
441
- }, x),
442
- ref: w,
442
+ }, w),
443
+ ref: B,
443
444
  width: "100%",
444
445
  height: "100%",
445
446
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
446
447
  maybe: !0
447
448
  }, c), {
448
449
  className: _cardcssmistica.touchable,
449
- "aria-label": N,
450
+ "aria-label": C,
450
451
  children: [
451
- C && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
452
+ N && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
452
453
  className: b
453
454
  }),
454
455
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -464,14 +465,14 @@ const ce = (r, a)=>{
464
465
  headline: a,
465
466
  pretitle: i,
466
467
  pretitleLinesMax: s,
467
- title: u,
468
+ title: p,
468
469
  titleLinesMax: l,
469
470
  subtitle: h,
470
471
  subtitleLinesMax: o,
471
472
  description: d,
472
473
  descriptionLinesMax: t,
473
- extra: p,
474
- button: f,
474
+ extra: u,
475
+ button: v,
475
476
  buttonLink: g
476
477
  })
477
478
  })
@@ -480,15 +481,15 @@ const ce = (r, a)=>{
480
481
  ]
481
482
  }))
482
483
  }),
483
- /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
484
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
484
485
  onClose: S,
485
486
  actions: m,
486
487
  type: "media"
487
488
  })
488
489
  ]
489
490
  });
490
- }), Tr = /*#__PURE__*/ _react.forwardRef((_param, w)=>{
491
- var { icon: r , headline: a , pretitle: i , pretitleLinesMax: s , title: h , titleLinesMax: o , subtitle: u , subtitleLinesMax: l , description: d , descriptionLinesMax: t , extra: p , actions: m , button: f , buttonLink: g , dataAttributes: x , "aria-label": N , onClose: S } = _param, c = _object_without_properties(_param, [
491
+ }), xr = /*#__PURE__*/ _react.forwardRef((_param, B)=>{
492
+ var { icon: r , headline: a , pretitle: i , pretitleLinesMax: s , title: h , titleLinesMax: o , subtitle: p , subtitleLinesMax: l , description: d , descriptionLinesMax: t , extra: u , actions: m , button: v , buttonLink: g , dataAttributes: w , "aria-label": C , onClose: S } = _param, c = _object_without_properties(_param, [
492
493
  "icon",
493
494
  "headline",
494
495
  "pretitle",
@@ -507,28 +508,28 @@ const ce = (r, a)=>{
507
508
  "aria-label",
508
509
  "onClose"
509
510
  ]);
510
- const C = !!r, b = c.href || c.to || c.onPress, z = _cardcssmistica.touchableCardOverlay, H = ce(m, S), R = {
511
+ const N = !!r, b = c.href || c.to || c.onPress, z = _cardcssmistica.touchableCardOverlay, H = ce(m, S), R = {
511
512
  marginRight: -16,
512
513
  marginTop: -24,
513
514
  width: he * H.length
514
515
  };
515
516
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(W, {
516
- "aria-label": N,
517
+ "aria-label": C,
517
518
  className: _cardcssmistica.touchableContainer,
518
519
  children: [
519
520
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
520
521
  className: _cardcssmistica.boxed,
521
522
  dataAttributes: _object_spread({
522
523
  "component-name": "DataCard"
523
- }, x),
524
- ref: w,
524
+ }, w),
525
+ ref: B,
525
526
  width: "100%",
526
527
  height: "100%",
527
528
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
528
529
  maybe: !0
529
530
  }, c), {
530
531
  className: _cardcssmistica.touchable,
531
- "aria-label": N,
532
+ "aria-label": C,
532
533
  children: [
533
534
  b && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
534
535
  className: z
@@ -536,43 +537,38 @@ const ce = (r, a)=>{
536
537
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
537
538
  className: _cardcssmistica.dataCard,
538
539
  children: [
539
- /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
540
- className: (0, _sprinklescssmistica.sprinkles)({
541
- display: "flex"
542
- }),
540
+ /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
541
+ space: 0,
543
542
  children: [
544
543
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
545
544
  space: 16,
546
- className: (0, _sprinklescssmistica.sprinkles)({
547
- flex: 1
548
- }),
549
545
  children: [
550
- C ? r : null,
546
+ N ? r : null,
551
547
  /* @__PURE__ */ (0, _jsxruntime.jsx)(fe, {
552
548
  headline: a,
553
549
  pretitle: i,
554
550
  pretitleLinesMax: s,
555
551
  title: h,
556
552
  titleLinesMax: o,
557
- subtitle: u,
553
+ subtitle: p,
558
554
  subtitleLinesMax: l,
559
555
  description: d,
560
556
  descriptionLinesMax: t
561
557
  })
562
558
  ]
563
559
  }),
564
- !C && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
560
+ !N && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
565
561
  style: R
566
562
  })
567
563
  ]
568
564
  }),
569
- p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
570
- children: p
565
+ u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
566
+ children: u
571
567
  }),
572
- (f || g) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
568
+ (v || g) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
573
569
  className: _cardcssmistica.actions,
574
570
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
575
- primaryButton: f,
571
+ primaryButton: v,
576
572
  link: g
577
573
  })
578
574
  })
@@ -581,15 +577,15 @@ const ce = (r, a)=>{
581
577
  ]
582
578
  }))
583
579
  }),
584
- /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
580
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
585
581
  onClose: S,
586
582
  actions: m,
587
583
  type: "default"
588
584
  })
589
585
  ]
590
586
  });
591
- }), Sr = /*#__PURE__*/ _react.forwardRef((_param, p)=>{
592
- var { icon: r , title: a , titleLinesMax: i , subtitle: s , subtitleLinesMax: h , dataAttributes: o , "aria-label": u , extra: l , isInverse: d = !1 } = _param, t = _object_without_properties(_param, [
587
+ }), wr = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
588
+ var { icon: r , title: a , titleLinesMax: i , subtitle: s , subtitleLinesMax: h , dataAttributes: o , "aria-label": p , extra: l , isInverse: d = !1 } = _param, t = _object_without_properties(_param, [
593
589
  "icon",
594
590
  "title",
595
591
  "titleLinesMax",
@@ -600,7 +596,7 @@ const ce = (r, a)=>{
600
596
  "extra",
601
597
  "isInverse"
602
598
  ]);
603
- const m = t.href || t.to || t.onPress, f = d ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
599
+ const m = t.href || t.to || t.onPress, v = d ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
604
600
  return /* @__PURE__ */ (0, _jsxruntime.jsx)(W, {
605
601
  className: _cardcssmistica.touchableContainer,
606
602
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
@@ -608,7 +604,7 @@ const ce = (r, a)=>{
608
604
  dataAttributes: _object_spread({
609
605
  "component-name": "SnapCard"
610
606
  }, o),
611
- ref: p,
607
+ ref: u,
612
608
  isInverse: d,
613
609
  width: "100%",
614
610
  height: "100%",
@@ -616,10 +612,10 @@ const ce = (r, a)=>{
616
612
  maybe: !0
617
613
  }, t), {
618
614
  className: _cardcssmistica.touchable,
619
- "aria-label": u,
615
+ "aria-label": p,
620
616
  children: [
621
617
  m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
622
- className: f
618
+ className: v
623
619
  }),
624
620
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
625
621
  className: _cardcssmistica.snapCard,
@@ -661,8 +657,8 @@ const ce = (r, a)=>{
661
657
  }))
662
658
  })
663
659
  });
664
- }), Je = 264, ve = /*#__PURE__*/ _react.forwardRef((_param, G)=>{
665
- var { isInverse: r , backgroundImage: a , backgroundVideo: i , backgroundVideoRef: s , poster: h , icon: o , headline: u , pretitle: l , pretitleLinesMax: d , title: t , titleLinesMax: p , description: m , descriptionLinesMax: f , extra: g , button: x , secondaryButton: N , onClose: S , actions: c , buttonLink: w , dataAttributes: C , width: b , height: z , aspectRatio: H , "aria-label": R } = _param, M = _object_without_properties(_param, [
660
+ }), Ke = 264, ve = /*#__PURE__*/ _react.forwardRef((_param, G)=>{
661
+ var { isInverse: r , backgroundImage: a , backgroundVideo: i , backgroundVideoRef: s , poster: h , icon: o , headline: p , pretitle: l , pretitleLinesMax: d , title: t , titleLinesMax: u , description: m , descriptionLinesMax: v , extra: g , button: w , secondaryButton: C , onClose: S , actions: c , buttonLink: B , dataAttributes: N , width: b , height: z , aspectRatio: H , "aria-label": R } = _param, M = _object_without_properties(_param, [
666
662
  "isInverse",
667
663
  "backgroundImage",
668
664
  "backgroundVideo",
@@ -688,11 +684,11 @@ const ce = (r, a)=>{
688
684
  "aspectRatio",
689
685
  "aria-label"
690
686
  ]);
691
- const B = me(a), { video: X , videoStatus: j , onVideoControlPress: Y } = pe(i, h, s);
687
+ const I = me(a), { video: X , videoStatus: j , onVideoControlPress: U } = ue(i, h, s);
692
688
  i && (c = [
693
689
  {
694
- Icon: ue(j),
695
- onPress: Y,
690
+ Icon: pe(j),
691
+ onPress: U,
696
692
  label: "Video controls",
697
693
  iconSize: j === "loadingTimeout" ? 16 : 12,
698
694
  iconColor: _skincontractcssmistica.vars.colors.inverse,
@@ -700,19 +696,19 @@ const ce = (r, a)=>{
700
696
  iconBackgroundInverse: _cardcssmistica.videoAction
701
697
  }
702
698
  ]);
703
- const F = (0, _themevariantcontext.useIsInverseVariant)(), I = !!a || !!i, Z = I ? "0 0 16px rgba(0,0,0,0.4)" : void 0, ye = (c == null ? void 0 : c.length) || S, ge = M.href || M.to || M.onPress, Ne = a || i ? _cardcssmistica.touchableCardOverlayMedia : r ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
699
+ const F = (0, _themevariantcontext.useIsInverseVariant)(), x = !!a || !!i, Y = x ? "0 0 16px rgba(0,0,0,0.4)" : void 0, ye = (c == null ? void 0 : c.length) || S, ge = M.href || M.to || M.onPress, Ce = a || i ? _cardcssmistica.touchableCardOverlayMedia : r ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
704
700
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(W, {
705
701
  width: b,
706
702
  height: z,
707
703
  aspectRatio: H,
708
704
  "aria-label": R,
709
- minWidth: Je,
705
+ minWidth: Ke,
710
706
  className: _cardcssmistica.touchableContainer,
711
707
  children: [
712
708
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
713
709
  borderRadius: _skincontractcssmistica.vars.borderRadii.legacyDisplay,
714
710
  className: _cardcssmistica.boxed,
715
- dataAttributes: C,
711
+ dataAttributes: N,
716
712
  ref: G,
717
713
  width: "100%",
718
714
  minHeight: "100%",
@@ -725,7 +721,7 @@ const ce = (r, a)=>{
725
721
  "aria-label": R,
726
722
  children: [
727
723
  ge && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
728
- className: Ne
724
+ className: Ce
729
725
  }),
730
726
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
731
727
  className: _cardcssmistica.displayCardContainer,
@@ -734,27 +730,27 @@ const ce = (r, a)=>{
734
730
  isInverse: F,
735
731
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
736
732
  className: _cardcssmistica.displayCardBackground,
737
- children: i ? X : a ? B : void 0
733
+ children: i ? X : a ? I : void 0
738
734
  })
739
735
  }),
740
736
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
741
737
  className: _cardcssmistica.displayCardContent,
742
738
  style: {
743
- paddingTop: I && !o && !ye ? 0 : 24
739
+ paddingTop: x && !o && !ye ? 0 : 24
744
740
  },
745
741
  children: [
746
742
  o ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
747
- paddingBottom: I ? 0 : 40,
743
+ paddingBottom: x ? 0 : 40,
748
744
  paddingX: 24,
749
745
  children: o
750
746
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
751
- paddingBottom: c != null && c.length || S ? I ? 24 : 64 : 0
747
+ paddingBottom: c != null && c.length || S ? x ? 24 : 64 : 0
752
748
  }),
753
749
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
754
750
  paddingX: 24,
755
- paddingTop: I ? 40 : 0,
751
+ paddingTop: x ? 40 : 0,
756
752
  paddingBottom: 24,
757
- className: I ? _cardcssmistica.displayCardGradient : void 0,
753
+ className: x ? _cardcssmistica.displayCardGradient : void 0,
758
754
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
759
755
  space: 24,
760
756
  children: [
@@ -763,11 +759,11 @@ const ce = (r, a)=>{
763
759
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
764
760
  space: 8,
765
761
  children: [
766
- (u || l || t) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
762
+ (p || l || t) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
767
763
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
768
764
  space: 16,
769
765
  children: [
770
- u,
766
+ p,
771
767
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
772
768
  space: 4,
773
769
  children: [
@@ -776,14 +772,14 @@ const ce = (r, a)=>{
776
772
  truncate: d,
777
773
  as: "div",
778
774
  regular: !0,
779
- textShadow: Z,
775
+ textShadow: Y,
780
776
  children: l
781
777
  }),
782
778
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
783
779
  forceMobileSizes: !0,
784
- truncate: p,
780
+ truncate: u,
785
781
  as: "h3",
786
- textShadow: Z,
782
+ textShadow: Y,
787
783
  hyphens: "auto",
788
784
  children: t
789
785
  })
@@ -794,11 +790,11 @@ const ce = (r, a)=>{
794
790
  }),
795
791
  m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
796
792
  forceMobileSizes: !0,
797
- truncate: f,
793
+ truncate: v,
798
794
  as: "p",
799
795
  regular: !0,
800
- color: _skincontractcssmistica.vars.colors.textSecondary,
801
- textShadow: Z,
796
+ color: x ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
797
+ textShadow: Y,
802
798
  hyphens: "auto",
803
799
  children: m
804
800
  })
@@ -807,10 +803,10 @@ const ce = (r, a)=>{
807
803
  g
808
804
  ]
809
805
  }),
810
- (x || N || w) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
811
- primaryButton: x,
812
- secondaryButton: N,
813
- link: w
806
+ (w || C || B) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
807
+ primaryButton: w,
808
+ secondaryButton: C,
809
+ link: B
814
810
  })
815
811
  ]
816
812
  })
@@ -822,14 +818,14 @@ const ce = (r, a)=>{
822
818
  ]
823
819
  }))
824
820
  }),
825
- /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
821
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
826
822
  onClose: S,
827
823
  actions: c,
828
824
  type: a || i ? "media" : r ? "inverse" : "default"
829
825
  })
830
826
  ]
831
827
  });
832
- }), xr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
828
+ }), Br = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
833
829
  var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
834
830
  "dataAttributes"
835
831
  ]);
@@ -840,7 +836,7 @@ const ce = (r, a)=>{
840
836
  "component-name": "DisplayMediaCard"
841
837
  })
842
838
  }));
843
- }), wr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
839
+ }), Ir = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
844
840
  var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
845
841
  "dataAttributes"
846
842
  ]);
@@ -850,8 +846,8 @@ const ce = (r, a)=>{
850
846
  "component-name": "DisplayDataCard"
851
847
  })
852
848
  }));
853
- }), Ke = 140, Br = /*#__PURE__*/ _react.forwardRef((_param, b)=>{
854
- var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: s , backgroundVideoRef: h , width: o , height: u , aspectRatio: l = "7:10" , ariaLabel: d , actions: t , onClose: p , icon: m , headline: f , pretitle: g , pretitleLinesMax: x , title: N , titleLinesMax: S , description: c , descriptionLinesMax: w } = _param, C = _object_without_properties(_param, [
849
+ }), Qe = 140, Ar = /*#__PURE__*/ _react.forwardRef((_param, b)=>{
850
+ var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: s , backgroundVideoRef: h , width: o , height: p , aspectRatio: l = "7:10" , ariaLabel: d , actions: t , onClose: u , icon: m , headline: v , pretitle: g , pretitleLinesMax: w , title: C , titleLinesMax: S , description: c , descriptionLinesMax: B } = _param, N = _object_without_properties(_param, [
855
851
  "dataAttributes",
856
852
  "backgroundImage",
857
853
  "backgroundVideo",
@@ -872,10 +868,10 @@ const ce = (r, a)=>{
872
868
  "description",
873
869
  "descriptionLinesMax"
874
870
  ]);
875
- const z = me(a), { video: H , videoStatus: R , onVideoControlPress: M } = pe(i, s, h);
871
+ const z = me(a), { video: H , videoStatus: R , onVideoControlPress: M } = ue(i, s, h);
876
872
  i && (t = [
877
873
  {
878
- Icon: ue(R),
874
+ Icon: pe(R),
879
875
  onPress: M,
880
876
  label: "Video controls",
881
877
  iconSize: R === "loadingTimeout" ? 16 : 12,
@@ -884,11 +880,11 @@ const ce = (r, a)=>{
884
880
  iconBackgroundInverse: _cardcssmistica.videoAction
885
881
  }
886
882
  ]);
887
- const G = (0, _themevariantcontext.useIsInverseVariant)(), B = !!a || !!i, X = B ? "0 0 16px rgba(0,0,0,0.4)" : void 0, j = (t == null ? void 0 : t.length) || p, { textPresets: Y } = (0, _hooks.useTheme)(), F = C.href || C.to || C.onPress, I = _cardcssmistica.touchableCardOverlayMedia;
883
+ const G = (0, _themevariantcontext.useIsInverseVariant)(), I = !!a || !!i, X = I ? "0 0 16px rgba(0,0,0,0.4)" : void 0, j = (t == null ? void 0 : t.length) || u, { textPresets: U } = (0, _hooks.useTheme)(), F = N.href || N.to || N.onPress, x = _cardcssmistica.touchableCardOverlayMedia;
888
884
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(W, {
889
885
  width: o,
890
- height: u,
891
- minWidth: Ke,
886
+ height: p,
887
+ minWidth: Qe,
892
888
  aspectRatio: l,
893
889
  "aria-label": d,
894
890
  className: _cardcssmistica.touchableContainer,
@@ -904,12 +900,12 @@ const ce = (r, a)=>{
904
900
  background: a || i ? G ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
905
901
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
906
902
  maybe: !0
907
- }, C), {
903
+ }, N), {
908
904
  className: _cardcssmistica.touchable,
909
905
  "aria-label": d,
910
906
  children: [
911
907
  F && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
912
- className: I
908
+ className: x
913
909
  }),
914
910
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
915
911
  className: _cardcssmistica.displayCardContainer,
@@ -924,38 +920,38 @@ const ce = (r, a)=>{
924
920
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
925
921
  className: _cardcssmistica.displayCardContent,
926
922
  style: {
927
- paddingTop: B && !m && !j ? 0 : 24
923
+ paddingTop: I && !m && !j ? 0 : 24
928
924
  },
929
925
  children: [
930
926
  m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
931
- paddingBottom: B ? 0 : 40,
927
+ paddingBottom: I ? 0 : 40,
932
928
  paddingX: 24,
933
929
  children: m
934
930
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
935
- paddingBottom: t != null && t.length || p ? B ? 24 : 64 : 0
931
+ paddingBottom: t != null && t.length || u ? I ? 24 : 64 : 0
936
932
  }),
937
933
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
938
934
  paddingX: 16,
939
- paddingTop: B ? 40 : 0,
935
+ paddingTop: I ? 40 : 0,
940
936
  paddingBottom: 24,
941
- className: B ? _cardcssmistica.displayCardGradient : void 0,
937
+ className: I ? _cardcssmistica.displayCardGradient : void 0,
942
938
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
943
939
  space: 24,
944
940
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
945
941
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
946
942
  space: 8,
947
943
  children: [
948
- (f || g || N) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
944
+ (v || g || C) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
949
945
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
950
946
  space: 16,
951
947
  children: [
952
- f,
948
+ v,
953
949
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
954
950
  space: 4,
955
951
  children: [
956
952
  g && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
957
953
  forceMobileSizes: !0,
958
- truncate: x,
954
+ truncate: w,
959
955
  as: "div",
960
956
  regular: !0,
961
957
  textShadow: X,
@@ -968,10 +964,10 @@ const ce = (r, a)=>{
968
964
  mobileLineHeight: "24px",
969
965
  desktopLineHeight: "28px",
970
966
  truncate: S,
971
- weight: Y.cardTitle.weight,
967
+ weight: U.cardTitle.weight,
972
968
  as: "h3",
973
969
  hyphens: "auto",
974
- children: N
970
+ children: C
975
971
  })
976
972
  ]
977
973
  })
@@ -980,7 +976,7 @@ const ce = (r, a)=>{
980
976
  }),
981
977
  c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
982
978
  forceMobileSizes: !0,
983
- truncate: w,
979
+ truncate: B,
984
980
  as: "p",
985
981
  regular: !0,
986
982
  textShadow: X,
@@ -999,8 +995,8 @@ const ce = (r, a)=>{
999
995
  ]
1000
996
  }))
1001
997
  }),
1002
- /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
1003
- onClose: p,
998
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
999
+ onClose: u,
1004
1000
  actions: t,
1005
1001
  type: "media"
1006
1002
  })