@telefonica/mistica 15.6.0 → 15.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/card.d.ts +2 -0
  3. package/dist/card.js +264 -248
  4. package/dist/chip.d.ts +4 -2
  5. package/dist/highlighted-card.d.ts +2 -5
  6. package/dist/list.d.ts +5 -2
  7. package/dist/list.js +22 -22
  8. package/dist/package-version.js +1 -1
  9. package/dist-es/card.js +335 -319
  10. package/dist-es/list.js +25 -25
  11. package/dist-es/package-version.js +1 -1
  12. package/dist-es/style.css +1 -1
  13. package/package.json +1 -1
package/dist/card.js CHANGED
@@ -17,10 +17,10 @@ _export(exports, {
17
17
  return lr;
18
18
  },
19
19
  CardActionsGroup: function() {
20
- return K;
20
+ return Q;
21
21
  },
22
22
  DataCard: function() {
23
- return Fr;
23
+ return Xr;
24
24
  },
25
25
  DisplayDataCard: function() {
26
26
  return _r;
@@ -29,19 +29,19 @@ _export(exports, {
29
29
  return Wr;
30
30
  },
31
31
  MediaCard: function() {
32
- return Gr;
32
+ return Lr;
33
33
  },
34
34
  NakedCard: function() {
35
- return jr;
35
+ return Gr;
36
36
  },
37
37
  PosterCard: function() {
38
38
  return $r;
39
39
  },
40
40
  SmallNakedCard: function() {
41
- return Xr;
41
+ return jr;
42
42
  },
43
43
  SnapCard: function() {
44
- return Lr;
44
+ return Fr;
45
45
  }
46
46
  });
47
47
  const _jsxruntime = require("react/jsx-runtime");
@@ -205,7 +205,7 @@ const nr = ()=>{
205
205
  text: r,
206
206
  ref: n
207
207
  };
208
- }, Se = (r, a)=>{
208
+ }, Ie = (r, a)=>{
209
209
  const { texts: n } = (0, _hooks.useTheme)(), d = r ? [
210
210
  ...r
211
211
  ] : [];
@@ -239,10 +239,10 @@ const nr = ()=>{
239
239
  isOverMedia: a === "media"
240
240
  }))
241
241
  });
242
- }, K = (param)=>{
242
+ }, Q = (param)=>{
243
243
  let { actions: r, padding: a = 16, onClose: n, type: d = "default" } = param;
244
- const c = Se(r, n);
245
- return c.length > 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Re.Provider, {
244
+ const l = Ie(r, n);
245
+ return l.length > 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Re.Provider, {
246
246
  value: d,
247
247
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
248
248
  style: {
@@ -253,7 +253,7 @@ const nr = ()=>{
253
253
  },
254
254
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
255
255
  space: 16,
256
- children: c.map((t, m)=>"Icon" in t || "checkedProps" in t ? /* @__PURE__ */ (0, _jsxruntime.jsx)(tr, _object_spread({}, t), m) : t)
256
+ children: l.map((t, m)=>"Icon" in t || "checkedProps" in t ? /* @__PURE__ */ (0, _jsxruntime.jsx)(tr, _object_spread({}, t), m) : t)
257
257
  })
258
258
  })
259
259
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
@@ -263,22 +263,22 @@ const nr = ()=>{
263
263
  "7:10": 7 / 10,
264
264
  "9:10": 9 / 10,
265
265
  auto: 0
266
- })[r] : 0, X = /*#__PURE__*/ _react.forwardRef((param, m)=>{
267
- let { children: r, width: a, height: n, aspectRatio: d, dataAttributes: c, className: o, "aria-label": t } = param;
268
- const h = a && n ? void 0 : dr(d);
269
- return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c)), {
266
+ })[r] : 0, j = /*#__PURE__*/ _react.forwardRef((param, m)=>{
267
+ let { children: r, width: a, height: n, aspectRatio: d, dataAttributes: l, className: o, "aria-label": t } = param;
268
+ const u = a && n ? void 0 : dr(d);
269
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(l)), {
270
270
  ref: m,
271
271
  "aria-label": t,
272
272
  className: (0, _classnames.default)(o, _cardcssmistica.cardContainer),
273
273
  style: _object_spread({
274
274
  width: a || "100%",
275
275
  height: n || "100%"
276
- }, h ? (0, _css.applyCssVars)({
277
- [_cardcssmistica.vars.aspectRatio]: String(h)
276
+ }, u ? (0, _css.applyCssVars)({
277
+ [_cardcssmistica.vars.aspectRatio]: String(u)
278
278
  }) : {}),
279
279
  children: r
280
280
  }));
281
- }), Ae = (r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
281
+ }), we = (r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
282
282
  width: "100%",
283
283
  height: "100%",
284
284
  src: r || ""
@@ -327,19 +327,19 @@ const nr = ()=>{
327
327
  color: r,
328
328
  size: 12
329
329
  });
330
- }, we = (r, a, n)=>{
331
- const { texts: d } = (0, _hooks.useTheme)(), c = _react.useRef(null), [o, t] = _react.useReducer(sr, "loading");
330
+ }, Ae = (r, a, n)=>{
331
+ const { texts: d } = (0, _hooks.useTheme)(), l = _react.useRef(null), [o, t] = _react.useReducer(sr, "loading");
332
332
  _react.useEffect(()=>{
333
- var l;
333
+ var c;
334
334
  const s = setTimeout(()=>t("showSpinner"), 2e3);
335
- return (l = c.current) == null || l.load(), ()=>{
335
+ return (c = l.current) == null || c.load(), ()=>{
336
336
  clearTimeout(s), t("reset");
337
337
  };
338
338
  }, [
339
339
  r
340
340
  ]);
341
341
  const m = _react.useMemo(()=>r !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
342
- ref: (0, _common.combineRefs)(c, n),
342
+ ref: (0, _common.combineRefs)(l, n),
343
343
  src: r,
344
344
  width: "100%",
345
345
  height: "100%",
@@ -351,14 +351,14 @@ const nr = ()=>{
351
351
  n,
352
352
  r,
353
353
  a
354
- ]), h = ()=>{
355
- const s = c.current;
354
+ ]), u = ()=>{
355
+ const s = l.current;
356
356
  s && (o === "loading" ? t("showSpinner") : o === "paused" ? s.play() : o === "playing" && s.pause());
357
357
  };
358
358
  if (o === "error") return {
359
359
  video: m
360
360
  };
361
- const f = {
361
+ const g = {
362
362
  uncheckedProps: {
363
363
  Icon: o === "loadingTimeout" && !(0, _platform.isRunningAcceptanceTest)() ? lr : cr,
364
364
  label: o === "loadingTimeout" ? "" : d.pauseIconButtonLabel
@@ -367,17 +367,17 @@ const nr = ()=>{
367
367
  Icon: mr,
368
368
  label: d.playIconButtonLabel
369
369
  },
370
- onChange: h,
370
+ onChange: u,
371
371
  disabled: o === "loadingTimeout",
372
372
  checked: o === "paused"
373
373
  };
374
374
  return {
375
375
  video: m,
376
- videoAction: f
376
+ videoAction: g
377
377
  };
378
- }, ce = (param)=>{
379
- let { headline: r, pretitle: a, pretitleLinesMax: n, title: d, titleAs: c = "h3", titleLinesMax: o, subtitle: t, subtitleLinesMax: m, description: h, descriptionLinesMax: f, extra: s, button: l, buttonLink: v } = param;
380
- const { textPresets: g } = (0, _hooks.useTheme)(), y = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
378
+ }, me = (param)=>{
379
+ let { headline: r, pretitle: a, pretitleLinesMax: n, title: d, titleAs: l = "h3", titleLinesMax: o, subtitle: t, subtitleLinesMax: m, description: u, descriptionLinesMax: g, extra: s, button: c, buttonLink: v } = param;
380
+ const { textPresets: f } = (0, _hooks.useTheme)(), y = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
381
381
  type: "promo",
382
382
  children: r
383
383
  }) : r : null;
@@ -415,8 +415,8 @@ const nr = ()=>{
415
415
  desktopSize: 20,
416
416
  desktopLineHeight: "28px",
417
417
  truncate: o,
418
- weight: g.cardTitle.weight,
419
- as: c,
418
+ weight: f.cardTitle.weight,
419
+ as: l,
420
420
  hyphens: "auto",
421
421
  children: d
422
422
  }),
@@ -432,13 +432,13 @@ const nr = ()=>{
432
432
  ]
433
433
  })
434
434
  }),
435
- h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
436
- truncate: f,
435
+ u && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
436
+ truncate: g,
437
437
  as: "p",
438
438
  regular: !0,
439
439
  color: _skincontractcssmistica.vars.colors.textSecondary,
440
440
  hyphens: "auto",
441
- children: h
441
+ children: u
442
442
  })
443
443
  ]
444
444
  }),
@@ -447,17 +447,17 @@ const nr = ()=>{
447
447
  })
448
448
  ]
449
449
  }),
450
- (l || v) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
450
+ (c || v) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
451
451
  className: _cardcssmistica.actions,
452
452
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
453
- primaryButton: l,
453
+ primaryButton: c,
454
454
  link: v
455
455
  })
456
456
  })
457
457
  ]
458
458
  });
459
- }, Gr = /*#__PURE__*/ _react.forwardRef((_param, w)=>{
460
- var { media: r, icon: a, headline: n, pretitle: d, pretitleLinesMax: c, subtitle: o, subtitleLinesMax: t, title: m, titleAs: h = "h3", titleLinesMax: f, description: s, descriptionLinesMax: l, extra: v, actions: g, button: y, buttonLink: S, dataAttributes: N, "aria-label": T, onClose: x } = _param, p = _object_without_properties(_param, [
459
+ }, Lr = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
460
+ var { media: r, icon: a, headline: n, pretitle: d, pretitleLinesMax: l, subtitle: o, subtitleLinesMax: t, title: m, titleAs: u = "h3", titleLinesMax: g, description: s, descriptionLinesMax: c, extra: v, actions: f, button: y, buttonLink: T, dataAttributes: C, "aria-label": x, onClose: k } = _param, p = _object_without_properties(_param, [
461
461
  "media",
462
462
  "icon",
463
463
  "headline",
@@ -478,13 +478,13 @@ const nr = ()=>{
478
478
  "aria-label",
479
479
  "onClose"
480
480
  ]);
481
- const k = p.href || p.to || p.onPress;
482
- return /* @__PURE__ */ (0, _jsxruntime.jsxs)(X, {
481
+ const S = p.href || p.to || p.onPress;
482
+ return /* @__PURE__ */ (0, _jsxruntime.jsxs)(j, {
483
483
  dataAttributes: _object_spread({
484
484
  "component-name": "MediaCard"
485
- }, N),
486
- ref: w,
487
- "aria-label": T,
485
+ }, C),
486
+ ref: A,
487
+ "aria-label": x,
488
488
  className: _cardcssmistica.touchableContainer,
489
489
  children: [
490
490
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
@@ -495,9 +495,9 @@ const nr = ()=>{
495
495
  maybe: !0
496
496
  }, p), {
497
497
  className: _cardcssmistica.touchable,
498
- "aria-label": T,
498
+ "aria-label": x,
499
499
  children: [
500
- k && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
500
+ S && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
501
501
  className: _cardcssmistica.touchableMediaCardOverlay
502
502
  }),
503
503
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -511,20 +511,20 @@ const nr = ()=>{
511
511
  }),
512
512
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
513
513
  className: _cardcssmistica.mediaCardContent,
514
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ce, {
514
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(me, {
515
515
  headline: n,
516
516
  pretitle: d,
517
- pretitleLinesMax: c,
517
+ pretitleLinesMax: l,
518
518
  title: m,
519
- titleAs: h,
520
- titleLinesMax: f,
519
+ titleAs: u,
520
+ titleLinesMax: g,
521
521
  subtitle: o,
522
522
  subtitleLinesMax: t,
523
523
  description: s,
524
- descriptionLinesMax: l,
524
+ descriptionLinesMax: c,
525
525
  extra: v,
526
526
  button: y,
527
- buttonLink: S
527
+ buttonLink: T
528
528
  })
529
529
  }),
530
530
  a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -549,15 +549,15 @@ const nr = ()=>{
549
549
  ]
550
550
  }))
551
551
  }),
552
- /* @__PURE__ */ (0, _jsxruntime.jsx)(K, {
553
- onClose: x,
554
- actions: g,
552
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
553
+ onClose: k,
554
+ actions: f,
555
555
  type: "media"
556
556
  })
557
557
  ]
558
558
  });
559
- }), jr = /*#__PURE__*/ _react.forwardRef((_param, w)=>{
560
- var { media: r, icon: a, headline: n, pretitle: d, pretitleLinesMax: c, subtitle: o, subtitleLinesMax: t, title: m, titleAs: h = "h3", titleLinesMax: f, description: s, descriptionLinesMax: l, extra: v, actions: g, button: y, buttonLink: S, dataAttributes: N, "aria-label": T, onClose: x } = _param, p = _object_without_properties(_param, [
559
+ }), Gr = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
560
+ var { media: r, icon: a, headline: n, pretitle: d, pretitleLinesMax: l, subtitle: o, subtitleLinesMax: t, title: m, titleAs: u = "h3", titleLinesMax: g, description: s, descriptionLinesMax: c, extra: v, actions: f, button: y, buttonLink: T, dataAttributes: C, "aria-label": x, onClose: k } = _param, p = _object_without_properties(_param, [
561
561
  "media",
562
562
  "icon",
563
563
  "headline",
@@ -578,20 +578,20 @@ const nr = ()=>{
578
578
  "aria-label",
579
579
  "onClose"
580
580
  ]);
581
- const k = p.href || p.to || p.onPress, O = r && r.type === _image.default && r.props.circular;
582
- return /* @__PURE__ */ (0, _jsxruntime.jsxs)(X, {
583
- ref: w,
581
+ const S = p.href || p.to || p.onPress, H = r && r.type === _image.default && r.props.circular;
582
+ return /* @__PURE__ */ (0, _jsxruntime.jsxs)(j, {
583
+ ref: A,
584
584
  dataAttributes: _object_spread({
585
585
  "component-name": "NakedCard"
586
- }, N),
587
- "aria-label": T,
588
- className: k ? _cardcssmistica.touchableContainer : void 0,
586
+ }, C),
587
+ "aria-label": x,
588
+ className: S ? _cardcssmistica.touchableContainer : void 0,
589
589
  children: [
590
590
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
591
591
  maybe: !0
592
592
  }, p), {
593
593
  className: _cardcssmistica.touchable,
594
- "aria-label": T,
594
+ "aria-label": x,
595
595
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
596
596
  className: _cardcssmistica.mediaCard,
597
597
  children: [
@@ -600,9 +600,9 @@ const nr = ()=>{
600
600
  position: "relative"
601
601
  },
602
602
  children: [
603
- k && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
603
+ S && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
604
604
  className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
605
- [_cardcssmistica.circularMediaOverlay]: O
605
+ [_cardcssmistica.circularMediaOverlay]: H
606
606
  })
607
607
  }),
608
608
  r
@@ -610,20 +610,20 @@ const nr = ()=>{
610
610
  }),
611
611
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
612
612
  className: _cardcssmistica.nakedCardContent,
613
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ce, {
613
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(me, {
614
614
  headline: n,
615
615
  pretitle: d,
616
- pretitleLinesMax: c,
616
+ pretitleLinesMax: l,
617
617
  title: m,
618
- titleAs: h,
619
- titleLinesMax: f,
618
+ titleAs: u,
619
+ titleLinesMax: g,
620
620
  subtitle: o,
621
621
  subtitleLinesMax: t,
622
622
  description: s,
623
- descriptionLinesMax: l,
623
+ descriptionLinesMax: c,
624
624
  extra: v,
625
625
  button: y,
626
- buttonLink: S
626
+ buttonLink: T
627
627
  })
628
628
  }),
629
629
  a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -646,15 +646,15 @@ const nr = ()=>{
646
646
  ]
647
647
  })
648
648
  })),
649
- /* @__PURE__ */ (0, _jsxruntime.jsx)(K, {
650
- onClose: x,
651
- actions: g,
649
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
650
+ onClose: k,
651
+ actions: f,
652
652
  type: "media"
653
653
  })
654
654
  ]
655
655
  });
656
- }), Xr = /*#__PURE__*/ _react.forwardRef((_param, v)=>{
657
- var { media: r, title: a, titleAs: n = "h3", titleLinesMax: d, subtitle: c, subtitleLinesMax: o, description: t, descriptionLinesMax: m, extra: h, dataAttributes: f, "aria-label": s } = _param, l = _object_without_properties(_param, [
656
+ }), jr = /*#__PURE__*/ _react.forwardRef((_param, v)=>{
657
+ var { media: r, title: a, titleAs: n = "h3", titleLinesMax: d, subtitle: l, subtitleLinesMax: o, description: t, descriptionLinesMax: m, extra: u, dataAttributes: g, "aria-label": s } = _param, c = _object_without_properties(_param, [
658
658
  "media",
659
659
  "title",
660
660
  "titleAs",
@@ -667,17 +667,17 @@ const nr = ()=>{
667
667
  "dataAttributes",
668
668
  "aria-label"
669
669
  ]);
670
- const g = l.href || l.to || l.onPress, y = r && r.type === _image.default && r.props.circular;
671
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
670
+ const f = c.href || c.to || c.onPress, y = r && r.type === _image.default && r.props.circular, { textPresets: T } = (0, _hooks.useTheme)();
671
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(j, {
672
672
  ref: v,
673
673
  dataAttributes: _object_spread({
674
674
  "component-name": "SmallNakedCard"
675
- }, f),
675
+ }, g),
676
676
  "aria-label": s,
677
- className: g ? _cardcssmistica.touchableContainer : void 0,
677
+ className: f ? _cardcssmistica.touchableContainer : void 0,
678
678
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
679
679
  maybe: !0
680
- }, l), {
680
+ }, c), {
681
681
  className: _cardcssmistica.touchable,
682
682
  "aria-label": s,
683
683
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -688,7 +688,7 @@ const nr = ()=>{
688
688
  position: "relative"
689
689
  },
690
690
  children: [
691
- g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
691
+ f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
692
692
  className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
693
693
  [_cardcssmistica.circularMediaOverlay]: y
694
694
  })
@@ -699,39 +699,41 @@ const nr = ()=>{
699
699
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
700
700
  className: _cardcssmistica.nakedCardContent,
701
701
  children: [
702
- /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
703
- children: [
704
- /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
705
- space: 8,
706
- children: [
707
- a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
708
- truncate: d,
709
- as: n,
710
- regular: !0,
711
- hyphens: "auto",
712
- children: a
713
- }),
714
- c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
715
- truncate: o,
716
- regular: !0,
717
- as: "p",
718
- hyphens: "auto",
719
- children: c
720
- })
721
- ]
722
- }),
723
- t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
724
- truncate: m,
725
- regular: !0,
726
- as: "p",
727
- color: _skincontractcssmistica.vars.colors.textSecondary,
728
- hyphens: "auto",
729
- children: t
730
- })
731
- ]
702
+ /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
703
+ children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
704
+ space: 4,
705
+ children: [
706
+ a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
707
+ desktopSize: 16,
708
+ mobileSize: 14,
709
+ mobileLineHeight: "20px",
710
+ desktopLineHeight: "24px",
711
+ truncate: d,
712
+ weight: T.cardTitle.weight,
713
+ as: n,
714
+ hyphens: "auto",
715
+ children: a
716
+ }),
717
+ l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
718
+ truncate: o,
719
+ regular: !0,
720
+ as: "p",
721
+ hyphens: "auto",
722
+ children: l
723
+ }),
724
+ t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
725
+ truncate: m,
726
+ regular: !0,
727
+ as: "p",
728
+ color: _skincontractcssmistica.vars.colors.textSecondary,
729
+ hyphens: "auto",
730
+ children: t
731
+ })
732
+ ]
733
+ })
732
734
  }),
733
- h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
734
- children: h
735
+ u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
736
+ children: u
735
737
  })
736
738
  ]
737
739
  })
@@ -739,8 +741,8 @@ const nr = ()=>{
739
741
  })
740
742
  }))
741
743
  });
742
- }), Fr = /*#__PURE__*/ _react.forwardRef((_param, w)=>{
743
- var { icon: r, headline: a, pretitle: n, pretitleLinesMax: d, title: c, titleAs: o = "h3", titleLinesMax: t, subtitle: m, subtitleLinesMax: h, description: f, descriptionLinesMax: s, extra: l, actions: v, button: g, buttonLink: y, dataAttributes: S, "aria-label": N, onClose: T, aspectRatio: x } = _param, p = _object_without_properties(_param, [
744
+ }), Xr = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
745
+ var { icon: r, headline: a, pretitle: n, pretitleLinesMax: d, title: l, titleAs: o = "h3", titleLinesMax: t, subtitle: m, subtitleLinesMax: u, description: g, descriptionLinesMax: s, extra: c, actions: v, button: f, buttonLink: y, dataAttributes: T, "aria-label": C, onClose: x, aspectRatio: k } = _param, p = _object_without_properties(_param, [
744
746
  "icon",
745
747
  "headline",
746
748
  "pretitle",
@@ -761,15 +763,15 @@ const nr = ()=>{
761
763
  "onClose",
762
764
  "aspectRatio"
763
765
  ]);
764
- const k = !!r || !!a, O = p.href || p.to || p.onPress, W = Se(v, T);
765
- return /* @__PURE__ */ (0, _jsxruntime.jsxs)(X, {
766
+ const S = !!r || !!a, H = p.href || p.to || p.onPress, _ = Ie(v, x);
767
+ return /* @__PURE__ */ (0, _jsxruntime.jsxs)(j, {
766
768
  dataAttributes: _object_spread({
767
769
  "component-name": "DataCard"
768
- }, S),
769
- ref: w,
770
- "aria-label": N,
770
+ }, T),
771
+ ref: A,
772
+ "aria-label": C,
771
773
  className: _cardcssmistica.touchableContainer,
772
- aspectRatio: x,
774
+ aspectRatio: k,
773
775
  children: [
774
776
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
775
777
  className: _cardcssmistica.boxed,
@@ -779,9 +781,9 @@ const nr = ()=>{
779
781
  maybe: !0
780
782
  }, p), {
781
783
  className: _cardcssmistica.touchable,
782
- "aria-label": N,
784
+ "aria-label": C,
783
785
  children: [
784
- O && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
786
+ H && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
785
787
  className: _cardcssmistica.touchableCardOverlay
786
788
  }),
787
789
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -799,35 +801,35 @@ const nr = ()=>{
799
801
  }),
800
802
  children: r
801
803
  }),
802
- /* @__PURE__ */ (0, _jsxruntime.jsx)(ce, {
804
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(me, {
803
805
  headline: a,
804
806
  pretitle: n,
805
807
  pretitleLinesMax: d,
806
- title: c,
808
+ title: l,
807
809
  titleAs: o,
808
810
  titleLinesMax: t,
809
811
  subtitle: m,
810
- subtitleLinesMax: h,
811
- description: f,
812
+ subtitleLinesMax: u,
813
+ description: g,
812
814
  descriptionLinesMax: s
813
815
  })
814
816
  ]
815
817
  }),
816
- !k && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
818
+ !S && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
817
819
  style: (0, _css.applyCssVars)({
818
- [_cardcssmistica.vars.topActionsCount]: String(W.length)
820
+ [_cardcssmistica.vars.topActionsCount]: String(_.length)
819
821
  }),
820
822
  className: _cardcssmistica.dataCardTopActionsWithoutIcon
821
823
  })
822
824
  ]
823
825
  }),
824
- l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
825
- children: l
826
+ c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
827
+ children: c
826
828
  }),
827
- (g || y) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
829
+ (f || y) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
828
830
  className: _cardcssmistica.actions,
829
831
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
830
- primaryButton: g,
832
+ primaryButton: f,
831
833
  link: y
832
834
  })
833
835
  })
@@ -836,48 +838,50 @@ const nr = ()=>{
836
838
  ]
837
839
  }))
838
840
  }),
839
- /* @__PURE__ */ (0, _jsxruntime.jsx)(K, {
840
- onClose: T,
841
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
842
+ onClose: x,
841
843
  actions: v,
842
844
  type: "default"
843
845
  })
844
846
  ]
845
847
  });
846
- }), Lr = /*#__PURE__*/ _react.forwardRef((_param, v)=>{
847
- var { icon: r, title: a, titleAs: n = "h3", titleLinesMax: d, subtitle: c, subtitleLinesMax: o, dataAttributes: t, "aria-label": m, extra: h, isInverse: f = !1, aspectRatio: s } = _param, l = _object_without_properties(_param, [
848
+ }), Fr = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
849
+ var { icon: r, title: a, titleAs: n = "h3", titleLinesMax: d, subtitle: l, subtitleLinesMax: o, description: t, descriptionLinesMax: m, dataAttributes: u, "aria-label": g, extra: s, isInverse: c = !1, aspectRatio: v } = _param, f = _object_without_properties(_param, [
848
850
  "icon",
849
851
  "title",
850
852
  "titleAs",
851
853
  "titleLinesMax",
852
854
  "subtitle",
853
855
  "subtitleLinesMax",
856
+ "description",
857
+ "descriptionLinesMax",
854
858
  "dataAttributes",
855
859
  "aria-label",
856
860
  "extra",
857
861
  "isInverse",
858
862
  "aspectRatio"
859
863
  ]);
860
- const g = l.href || l.to || l.onPress, y = f ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
861
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
864
+ const { textPresets: T } = (0, _hooks.useTheme)(), C = f.href || f.to || f.onPress, x = c ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
865
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(j, {
862
866
  dataAttributes: _object_spread({
863
867
  "component-name": "SnapCard"
864
- }, t),
865
- ref: v,
868
+ }, u),
869
+ ref: y,
866
870
  className: _cardcssmistica.touchableContainer,
867
- aspectRatio: s,
871
+ aspectRatio: v,
868
872
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
869
873
  className: _cardcssmistica.boxed,
870
- isInverse: f,
874
+ isInverse: c,
871
875
  width: "100%",
872
876
  minHeight: "100%",
873
877
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
874
878
  maybe: !0
875
- }, l), {
879
+ }, f), {
876
880
  className: _cardcssmistica.touchable,
877
- "aria-label": m,
881
+ "aria-label": g,
878
882
  children: [
879
- g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
880
- className: y
883
+ C && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
884
+ className: x
881
885
  }),
882
886
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
883
887
  className: _cardcssmistica.snapCard,
@@ -896,27 +900,39 @@ const nr = ()=>{
896
900
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
897
901
  space: 4,
898
902
  children: [
899
- a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
903
+ a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
904
+ desktopSize: 16,
905
+ mobileSize: 14,
906
+ mobileLineHeight: "20px",
907
+ desktopLineHeight: "24px",
900
908
  truncate: d,
909
+ weight: T.cardTitle.weight,
901
910
  as: n,
902
- regular: !0,
903
911
  hyphens: "auto",
904
912
  children: a
905
913
  }),
906
- c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
914
+ l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
907
915
  truncate: o,
908
916
  regular: !0,
917
+ color: _skincontractcssmistica.vars.colors.textPrimary,
918
+ as: "p",
919
+ hyphens: "auto",
920
+ children: l
921
+ }),
922
+ t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
923
+ truncate: m,
924
+ regular: !0,
909
925
  color: _skincontractcssmistica.vars.colors.textSecondary,
910
926
  as: "p",
911
927
  hyphens: "auto",
912
- children: c
928
+ children: t
913
929
  })
914
930
  ]
915
931
  })
916
932
  ]
917
933
  }),
918
- h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
919
- children: h
934
+ s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
935
+ children: s
920
936
  })
921
937
  ]
922
938
  })
@@ -924,8 +940,8 @@ const nr = ()=>{
924
940
  }))
925
941
  })
926
942
  });
927
- }), Me = /*#__PURE__*/ _react.forwardRef((_param, F)=>{
928
- var { isInverse: r, backgroundImage: a, backgroundVideo: n, backgroundVideoRef: d, poster: c, icon: o, headline: t, pretitle: m, pretitleLinesMax: h, title: f, titleAs: s = "h3", titleLinesMax: l, description: v, descriptionLinesMax: g, extra: y, button: S, secondaryButton: N, onClose: T, actions: x, buttonLink: p, dataAttributes: w, width: k, height: O, aspectRatio: W, "aria-label": Q } = _param, H = _object_without_properties(_param, [
943
+ }), ze = /*#__PURE__*/ _react.forwardRef((_param, X)=>{
944
+ var { isInverse: r, backgroundImage: a, backgroundVideo: n, backgroundVideoRef: d, poster: l, icon: o, headline: t, pretitle: m, pretitleLinesMax: u, title: g, titleAs: s = "h3", titleLinesMax: c, description: v, descriptionLinesMax: f, extra: y, button: T, secondaryButton: C, onClose: x, actions: k, buttonLink: p, dataAttributes: A, width: S, height: H, aspectRatio: _, "aria-label": U } = _param, O = _object_without_properties(_param, [
929
945
  "isInverse",
930
946
  "backgroundImage",
931
947
  "backgroundVideo",
@@ -952,18 +968,18 @@ const nr = ()=>{
952
968
  "aspectRatio",
953
969
  "aria-label"
954
970
  ]);
955
- const P = a !== void 0, C = n !== void 0, B = Ae(a), { video: ae, videoAction: U } = we(n, c, d);
956
- C && (x = U ? [
957
- U
971
+ const P = a !== void 0, N = n !== void 0, B = we(a), { video: ie, videoAction: Y } = Ae(n, l, d);
972
+ N && (k = Y ? [
973
+ Y
958
974
  ] : []);
959
- const _ = (0, _themevariantcontext.useIsInverseVariant)(), M = P || C, $ = M ? "0 0 16px rgba(0,0,0,0.4)" : void 0, L = (x == null ? void 0 : x.length) || T, z = H.href || H.to || H.onPress, q = P || C ? _cardcssmistica.touchableCardOverlayMedia : r ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
960
- return /* @__PURE__ */ (0, _jsxruntime.jsxs)(X, {
961
- dataAttributes: w,
962
- ref: F,
963
- width: k,
964
- height: O,
965
- aspectRatio: W,
966
- "aria-label": Q,
975
+ const $ = (0, _themevariantcontext.useIsInverseVariant)(), z = P || N, q = z ? "0 0 16px rgba(0,0,0,0.4)" : void 0, F = (k == null ? void 0 : k.length) || x, M = O.href || O.to || O.onPress, J = P || N ? _cardcssmistica.touchableCardOverlayMedia : r ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
976
+ return /* @__PURE__ */ (0, _jsxruntime.jsxs)(j, {
977
+ dataAttributes: A,
978
+ ref: X,
979
+ width: S,
980
+ height: H,
981
+ aspectRatio: _,
982
+ "aria-label": U,
967
983
  className: _cardcssmistica.touchableContainer,
968
984
  children: [
969
985
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
@@ -972,30 +988,30 @@ const nr = ()=>{
972
988
  width: "100%",
973
989
  minHeight: "100%",
974
990
  isInverse: r,
975
- background: P || C ? _ ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
991
+ background: P || N ? $ ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
976
992
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
977
993
  maybe: !0
978
- }, H), {
994
+ }, O), {
979
995
  className: _cardcssmistica.touchable,
980
- "aria-label": Q,
996
+ "aria-label": U,
981
997
  children: [
982
- z && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
983
- className: q
998
+ M && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
999
+ className: J
984
1000
  }),
985
1001
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
986
1002
  className: _cardcssmistica.displayCardContainer,
987
1003
  children: [
988
- (P || C) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
989
- isInverse: _,
1004
+ (P || N) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
1005
+ isInverse: $,
990
1006
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
991
1007
  className: _cardcssmistica.displayCardBackground,
992
- children: C ? ae : B
1008
+ children: N ? ie : B
993
1009
  })
994
1010
  }),
995
1011
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
996
1012
  className: _cardcssmistica.displayCardContent,
997
1013
  style: {
998
- paddingTop: M && !o && !L && !C ? 0 : 24
1014
+ paddingTop: z && !o && !F && !N ? 0 : 24
999
1015
  },
1000
1016
  children: [
1001
1017
  o ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -1003,18 +1019,18 @@ const nr = ()=>{
1003
1019
  [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
1004
1020
  }),
1005
1021
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1006
- paddingBottom: M ? 0 : 40,
1022
+ paddingBottom: z ? 0 : 40,
1007
1023
  paddingX: 24,
1008
1024
  children: o
1009
1025
  })
1010
1026
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1011
- paddingBottom: L || C ? M ? 24 : 64 : 0
1027
+ paddingBottom: F || N ? z ? 24 : 64 : 0
1012
1028
  }),
1013
1029
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1014
1030
  paddingX: 24,
1015
- paddingTop: M ? 40 : 0,
1031
+ paddingTop: z ? 40 : 0,
1016
1032
  paddingBottom: 24,
1017
- className: M ? _cardcssmistica.displayCardGradient : void 0,
1033
+ className: z ? _cardcssmistica.displayCardGradient : void 0,
1018
1034
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
1019
1035
  space: 24,
1020
1036
  children: [
@@ -1023,7 +1039,7 @@ const nr = ()=>{
1023
1039
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
1024
1040
  space: 8,
1025
1041
  children: [
1026
- (t || m || f) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
1042
+ (t || m || g) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
1027
1043
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
1028
1044
  space: 16,
1029
1045
  children: [
@@ -1033,19 +1049,19 @@ const nr = ()=>{
1033
1049
  children: [
1034
1050
  m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1035
1051
  forceMobileSizes: !0,
1036
- truncate: h,
1052
+ truncate: u,
1037
1053
  as: "div",
1038
1054
  regular: !0,
1039
- textShadow: $,
1055
+ textShadow: q,
1040
1056
  children: m
1041
1057
  }),
1042
1058
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
1043
1059
  forceMobileSizes: !0,
1044
- truncate: l,
1060
+ truncate: c,
1045
1061
  as: s,
1046
- textShadow: $,
1062
+ textShadow: q,
1047
1063
  hyphens: "auto",
1048
- children: f
1064
+ children: g
1049
1065
  })
1050
1066
  ]
1051
1067
  })
@@ -1054,11 +1070,11 @@ const nr = ()=>{
1054
1070
  }),
1055
1071
  v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
1056
1072
  forceMobileSizes: !0,
1057
- truncate: g,
1073
+ truncate: f,
1058
1074
  as: "p",
1059
1075
  regular: !0,
1060
- color: M ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
1061
- textShadow: $,
1076
+ color: z ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
1077
+ textShadow: q,
1062
1078
  hyphens: "auto",
1063
1079
  children: v
1064
1080
  })
@@ -1067,9 +1083,9 @@ const nr = ()=>{
1067
1083
  y
1068
1084
  ]
1069
1085
  }),
1070
- (S || N || p) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
1071
- primaryButton: S,
1072
- secondaryButton: N,
1086
+ (T || C || p) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
1087
+ primaryButton: T,
1088
+ secondaryButton: C,
1073
1089
  link: p
1074
1090
  })
1075
1091
  ]
@@ -1082,10 +1098,10 @@ const nr = ()=>{
1082
1098
  ]
1083
1099
  }))
1084
1100
  }),
1085
- /* @__PURE__ */ (0, _jsxruntime.jsx)(K, {
1086
- onClose: T,
1087
- actions: x,
1088
- type: P || C ? "media" : r ? "inverse" : "default"
1101
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
1102
+ onClose: x,
1103
+ actions: k,
1104
+ type: P || N ? "media" : r ? "inverse" : "default"
1089
1105
  })
1090
1106
  ]
1091
1107
  });
@@ -1093,7 +1109,7 @@ const nr = ()=>{
1093
1109
  var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
1094
1110
  "dataAttributes"
1095
1111
  ]);
1096
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(Me, _object_spread_props(_object_spread({}, a), {
1112
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(ze, _object_spread_props(_object_spread({}, a), {
1097
1113
  ref: n,
1098
1114
  isInverse: !0,
1099
1115
  dataAttributes: _object_spread({
@@ -1104,14 +1120,14 @@ const nr = ()=>{
1104
1120
  var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
1105
1121
  "dataAttributes"
1106
1122
  ]);
1107
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(Me, _object_spread_props(_object_spread({}, a), {
1123
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(ze, _object_spread_props(_object_spread({}, a), {
1108
1124
  ref: n,
1109
1125
  dataAttributes: _object_spread({
1110
1126
  "component-name": "DisplayDataCard"
1111
1127
  }, r)
1112
1128
  }));
1113
1129
  }), $r = /*#__PURE__*/ _react.forwardRef((_param, P)=>{
1114
- var { dataAttributes: r, backgroundImage: a, backgroundVideo: n, poster: d, backgroundVideoRef: c, width: o, height: t, aspectRatio: m = "7:10", ariaLabel: h, ["aria-label"]: f = h, actions: s, onClose: l, icon: v, headline: g, pretitle: y, pretitleLinesMax: S, title: N, titleAs: T = "h3", titleLinesMax: x, subtitle: p, subtitleLinesMax: w, description: k, descriptionLinesMax: O, variant: W, isInverse: Q, backgroundColor: H } = _param, F = _object_without_properties(_param, [
1130
+ var { dataAttributes: r, backgroundImage: a, backgroundVideo: n, poster: d, backgroundVideoRef: l, width: o, height: t, aspectRatio: m = "7:10", ariaLabel: u, ["aria-label"]: g = u, actions: s, onClose: c, icon: v, headline: f, pretitle: y, pretitleLinesMax: T, title: C, titleAs: x = "h3", titleLinesMax: k, subtitle: p, subtitleLinesMax: A, description: S, descriptionLinesMax: H, variant: _, isInverse: U, backgroundColor: O } = _param, X = _object_without_properties(_param, [
1115
1131
  "dataAttributes",
1116
1132
  "backgroundImage",
1117
1133
  "backgroundVideo",
@@ -1139,22 +1155,22 @@ const nr = ()=>{
1139
1155
  "isInverse",
1140
1156
  "backgroundColor"
1141
1157
  ]);
1142
- const C = a !== void 0, B = n !== void 0, ae = Ae(a), { video: U, videoAction: _ } = we(n, d, c), { text: M, ref: $ } = nr();
1143
- B && (s = _ ? [
1144
- _
1158
+ const N = a !== void 0, B = n !== void 0, ie = we(a), { video: Y, videoAction: $ } = Ae(n, d, l), { text: z, ref: q } = nr();
1159
+ B && (s = $ ? [
1160
+ $
1145
1161
  ] : []);
1146
- const L = (0, _themevariantcontext.useIsInverseVariant)(), z = C || B, q = z ? "0 0 16px rgba(0,0,0,0.4)" : void 0, me = (s == null ? void 0 : s.length) || l, { textPresets: ze } = (0, _hooks.useTheme)(), Y = !!(F.href || F.to || F.onPress), Z = W || (Q ? "inverse" : "default"), De = ()=>H || ({
1162
+ const F = (0, _themevariantcontext.useIsInverseVariant)(), M = N || B, J = M ? "0 0 16px rgba(0,0,0,0.4)" : void 0, he = (s == null ? void 0 : s.length) || c, { textPresets: Me } = (0, _hooks.useTheme)(), Z = !!(X.href || X.to || X.onPress), ee = _ || (U ? "inverse" : "default"), De = ()=>O || ({
1147
1163
  default: _skincontractcssmistica.vars.colors.backgroundContainer,
1148
- inverse: L ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand,
1164
+ inverse: F ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand,
1149
1165
  alternative: _skincontractcssmistica.vars.colors.backgroundAlternative
1150
- })[Z], Oe = C || B ? _cardcssmistica.touchableCardOverlayMedia : Z === "inverse" ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, He = f || [
1151
- N,
1152
- M,
1166
+ })[ee], He = N || B ? _cardcssmistica.touchableCardOverlayMedia : ee === "inverse" ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, Oe = g || [
1167
+ C,
1168
+ z,
1153
1169
  y,
1154
1170
  p,
1155
- k
1171
+ S
1156
1172
  ].filter(Boolean).join(" ");
1157
- return /* @__PURE__ */ (0, _jsxruntime.jsxs)(X, {
1173
+ return /* @__PURE__ */ (0, _jsxruntime.jsxs)(j, {
1158
1174
  width: o,
1159
1175
  height: t,
1160
1176
  dataAttributes: _object_spread({
@@ -1163,38 +1179,38 @@ const nr = ()=>{
1163
1179
  ref: P,
1164
1180
  aspectRatio: m,
1165
1181
  className: _cardcssmistica.touchableContainer,
1166
- "aria-label": Y ? void 0 : f,
1182
+ "aria-label": Z ? void 0 : g,
1167
1183
  children: [
1168
1184
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
1169
1185
  borderRadius: _skincontractcssmistica.vars.borderRadii.legacyDisplay,
1170
1186
  className: _cardcssmistica.boxed,
1171
1187
  width: "100%",
1172
1188
  minHeight: "100%",
1173
- isInverse: C || B || Z === "inverse",
1174
- background: C || B ? L ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : De(),
1189
+ isInverse: N || B || ee === "inverse",
1190
+ background: N || B ? F ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : De(),
1175
1191
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
1176
1192
  maybe: !0
1177
- }, F), {
1193
+ }, X), {
1178
1194
  className: _cardcssmistica.touchable,
1179
- "aria-label": Y ? He : void 0,
1195
+ "aria-label": Z ? Oe : void 0,
1180
1196
  children: [
1181
- Y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1182
- className: Oe
1197
+ Z && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1198
+ className: He
1183
1199
  }),
1184
1200
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
1185
1201
  className: _cardcssmistica.displayCardContainer,
1186
- "aria-hidden": Y,
1202
+ "aria-hidden": Z,
1187
1203
  children: [
1188
- (C || B) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
1189
- isInverse: L,
1204
+ (N || B) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
1205
+ isInverse: F,
1190
1206
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1191
1207
  className: _cardcssmistica.displayCardBackground,
1192
- children: B ? U : ae
1208
+ children: B ? Y : ie
1193
1209
  })
1194
1210
  }),
1195
1211
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
1196
1212
  className: _cardcssmistica.displayCardContent,
1197
- paddingTop: z && !v && !me && !B ? 0 : {
1213
+ paddingTop: M && !v && !he && !B ? 0 : {
1198
1214
  mobile: v ? 16 : 24,
1199
1215
  desktop: 24
1200
1216
  },
@@ -1204,7 +1220,7 @@ const nr = ()=>{
1204
1220
  [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
1205
1221
  }),
1206
1222
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1207
- paddingBottom: z ? 0 : 40,
1223
+ paddingBottom: M ? 0 : 40,
1208
1224
  paddingX: {
1209
1225
  mobile: 16,
1210
1226
  desktop: 24
@@ -1212,20 +1228,20 @@ const nr = ()=>{
1212
1228
  children: v
1213
1229
  })
1214
1230
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1215
- paddingBottom: me || B ? z ? 24 : 64 : 0
1231
+ paddingBottom: he || B ? M ? 24 : 64 : 0
1216
1232
  }),
1217
1233
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1218
1234
  paddingX: {
1219
1235
  mobile: 16,
1220
1236
  desktop: 24
1221
1237
  },
1222
- paddingTop: z ? 40 : 0,
1238
+ paddingTop: M ? 40 : 0,
1223
1239
  paddingBottom: 24,
1224
- className: z ? _cardcssmistica.displayCardGradient : void 0,
1240
+ className: M ? _cardcssmistica.displayCardGradient : void 0,
1225
1241
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
1226
1242
  className: _cardcssmistica.flexColumn,
1227
1243
  children: [
1228
- N && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1244
+ C && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1229
1245
  style: {
1230
1246
  paddingBottom: 4
1231
1247
  },
@@ -1234,20 +1250,20 @@ const nr = ()=>{
1234
1250
  mobileSize: 18,
1235
1251
  mobileLineHeight: "24px",
1236
1252
  desktopLineHeight: "28px",
1237
- truncate: x,
1238
- weight: ze.cardTitle.weight,
1239
- as: T,
1240
- children: N
1253
+ truncate: k,
1254
+ weight: Me.cardTitle.weight,
1255
+ as: x,
1256
+ children: C
1241
1257
  })
1242
1258
  }),
1243
- g && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
1259
+ f && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
1244
1260
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1245
- ref: $,
1261
+ ref: q,
1246
1262
  style: {
1247
1263
  order: -2,
1248
1264
  paddingBottom: 16
1249
1265
  },
1250
- children: g
1266
+ children: f
1251
1267
  }),
1252
1268
  y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1253
1269
  style: {
@@ -1256,9 +1272,9 @@ const nr = ()=>{
1256
1272
  },
1257
1273
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1258
1274
  forceMobileSizes: !0,
1259
- truncate: S,
1275
+ truncate: T,
1260
1276
  regular: !0,
1261
- textShadow: q,
1277
+ textShadow: J,
1262
1278
  children: y
1263
1279
  })
1264
1280
  }),
@@ -1268,27 +1284,27 @@ const nr = ()=>{
1268
1284
  },
1269
1285
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1270
1286
  forceMobileSizes: !0,
1271
- truncate: w,
1287
+ truncate: A,
1272
1288
  as: "div",
1273
1289
  regular: !0,
1274
- textShadow: q,
1290
+ textShadow: J,
1275
1291
  children: p
1276
1292
  })
1277
1293
  }),
1278
- k && // this is tricky, the padding between a headline and a description is 16px
1294
+ S && // this is tricky, the padding between a headline and a description is 16px
1279
1295
  // but the padding between a title|pretitle|subtitle and a description is 8px (4px + 4px)
1280
1296
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1281
1297
  style: {
1282
- paddingTop: y || N || p ? 4 : 0
1298
+ paddingTop: y || C || p ? 4 : 0
1283
1299
  },
1284
1300
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1285
1301
  forceMobileSizes: !0,
1286
- truncate: O,
1302
+ truncate: H,
1287
1303
  as: "p",
1288
1304
  regular: !0,
1289
- textShadow: q,
1290
- color: z ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
1291
- children: k
1305
+ textShadow: J,
1306
+ color: M ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
1307
+ children: S
1292
1308
  })
1293
1309
  })
1294
1310
  ]
@@ -1301,10 +1317,10 @@ const nr = ()=>{
1301
1317
  ]
1302
1318
  }))
1303
1319
  }),
1304
- /* @__PURE__ */ (0, _jsxruntime.jsx)(K, {
1305
- onClose: l,
1320
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
1321
+ onClose: c,
1306
1322
  actions: s,
1307
- type: C || B ? "media" : Z === "inverse" ? "inverse" : "default"
1323
+ type: N || B ? "media" : ee === "inverse" ? "inverse" : "default"
1308
1324
  })
1309
1325
  ]
1310
1326
  });