@telefonica/mistica 16.6.0 → 16.6.1

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.js +118 -122
  3. package/dist/community/advanced-data-card.js +47 -49
  4. package/dist/header.js +33 -33
  5. package/dist/hero.js +19 -19
  6. package/dist/package-version.js +1 -1
  7. package/dist-es/card.js +118 -122
  8. package/dist-es/community/advanced-data-card.js +86 -88
  9. package/dist-es/header.js +33 -34
  10. package/dist-es/hero.js +34 -35
  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
@@ -214,14 +214,14 @@ const O = ()=>{
214
214
  ref: t
215
215
  };
216
216
  }, We = (a, r, t)=>{
217
- const { texts: n, t: c } = (0, _hooks.useTheme)(), i = a ? [
217
+ const { texts: n, t: c } = (0, _hooks.useTheme)(), d = a ? [
218
218
  ...a
219
219
  ] : [];
220
- return r && i.push({
220
+ return r && d.push({
221
221
  label: t || n.closeButtonLabel || c(_texttokens.closeButtonLabel),
222
222
  onPress: r,
223
223
  Icon: _iconcloseregular.default
224
- }), i;
224
+ }), d;
225
225
  }, xa = (a)=>{
226
226
  const r = (0, _themevariantcontext.useThemeVariant)();
227
227
  return a.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, a), {
@@ -244,8 +244,8 @@ const O = ()=>{
244
244
  }));
245
245
  }, de = (param)=>{
246
246
  let { actions: a, padding: r = 16, onClose: t, variant: n = "default", closeButtonLabel: c } = param;
247
- const i = We(a, t, c);
248
- return i.length > 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
247
+ const d = We(a, t, c);
248
+ return d.length > 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
249
249
  variant: n,
250
250
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
251
251
  style: {
@@ -259,7 +259,7 @@ const O = ()=>{
259
259
  dataAttributes: {
260
260
  testid: "topActions"
261
261
  },
262
- children: i.map((s, o)=>"Icon" in s || "checkedProps" in s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(xa, _object_spread({}, s), o) : s)
262
+ children: d.map((s, o)=>"Icon" in s || "checkedProps" in s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(xa, _object_spread({}, s), o) : s)
263
263
  })
264
264
  })
265
265
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
@@ -270,12 +270,12 @@ const O = ()=>{
270
270
  "9:10": 9 / 10,
271
271
  auto: 0
272
272
  })[a] : 0, J = /*#__PURE__*/ _react.forwardRef((param, s)=>{
273
- let { children: a, width: r, height: t, aspectRatio: n, dataAttributes: c, className: i, "aria-label": d } = param;
273
+ let { children: a, width: r, height: t, aspectRatio: n, dataAttributes: c, className: d, "aria-label": i } = param;
274
274
  const o = r && t ? void 0 : Na(n);
275
275
  return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c)), {
276
276
  ref: s,
277
- "aria-label": d,
278
- className: (0, _classnames.default)(i, _cardcssmistica.cardContainer),
277
+ "aria-label": i,
278
+ className: (0, _classnames.default)(d, _cardcssmistica.cardContainer),
279
279
  style: _object_spread({
280
280
  width: r || "100%",
281
281
  height: t || "100%"
@@ -338,18 +338,18 @@ const O = ()=>{
338
338
  size: 12
339
339
  });
340
340
  }, Fe = (a, r, t)=>{
341
- const { texts: n, t: c } = (0, _hooks.useTheme)(), i = _react.useRef(null), [d, s] = _react.useReducer(Ba, "loading");
341
+ const { texts: n, t: c } = (0, _hooks.useTheme)(), d = _react.useRef(null), [i, s] = _react.useReducer(Ba, "loading");
342
342
  _react.useEffect(()=>{
343
343
  var y;
344
- const h = setTimeout(()=>s("showSpinner"), 2e3);
345
- return (y = i.current) == null || y.load(), ()=>{
346
- clearTimeout(h), s("reset");
344
+ const m = setTimeout(()=>s("showSpinner"), 2e3);
345
+ return (y = d.current) == null || y.load(), ()=>{
346
+ clearTimeout(m), s("reset");
347
347
  };
348
348
  }, [
349
349
  a
350
350
  ]);
351
351
  const o = _react.useMemo(()=>a !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
352
- ref: (0, _common.combineRefs)(i, t),
352
+ ref: (0, _common.combineRefs)(d, t),
353
353
  src: a,
354
354
  width: "100%",
355
355
  height: "100%",
@@ -362,31 +362,31 @@ const O = ()=>{
362
362
  a,
363
363
  r
364
364
  ]), u = ()=>{
365
- const h = i.current;
366
- h && (d === "loading" ? s("showSpinner") : d === "paused" ? h.play() : d === "playing" && h.pause());
365
+ const m = d.current;
366
+ m && (i === "loading" ? s("showSpinner") : i === "paused" ? m.play() : i === "playing" && m.pause());
367
367
  };
368
- if (d === "error") return {
368
+ if (i === "error") return {
369
369
  video: o
370
370
  };
371
- const m = o ? {
371
+ const h = o ? {
372
372
  uncheckedProps: {
373
- Icon: d === "loadingTimeout" && !(0, _platform.isRunningAcceptanceTest)() ? ba : Ra,
374
- label: d === "loadingTimeout" ? "" : n.pauseIconButtonLabel || c(_texttokens.pauseIconButtonLabel)
373
+ Icon: i === "loadingTimeout" && !(0, _platform.isRunningAcceptanceTest)() ? ba : Ra,
374
+ label: i === "loadingTimeout" ? "" : n.pauseIconButtonLabel || c(_texttokens.pauseIconButtonLabel)
375
375
  },
376
376
  checkedProps: {
377
377
  Icon: Sa,
378
378
  label: n.playIconButtonLabel || c(_texttokens.playIconButtonLabel)
379
379
  },
380
380
  onChange: u,
381
- disabled: d === "loadingTimeout",
382
- checked: d === "paused"
381
+ disabled: i === "loadingTimeout",
382
+ checked: i === "paused"
383
383
  } : void 0;
384
384
  return {
385
385
  video: o,
386
- videoAction: m
386
+ videoAction: h
387
387
  };
388
388
  }, Ne = (param)=>{
389
- let { headline: a, headlineRef: r, pretitle: t, pretitleAs: n, pretitleLinesMax: c, title: i, titleAs: d = "h3", titleLinesMax: s, subtitle: o, subtitleLinesMax: u, description: m, descriptionLinesMax: h, extra: y, extraRef: v, button: p, buttonLink: x } = param;
389
+ let { headline: a, headlineRef: r, pretitle: t, pretitleAs: n, pretitleLinesMax: c, title: d, titleAs: i = "h3", titleLinesMax: s, subtitle: o, subtitleLinesMax: u, description: h, descriptionLinesMax: m, extra: y, extraRef: v, button: p, buttonLink: x } = param;
390
390
  const { textPresets: g } = (0, _hooks.useTheme)();
391
391
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
392
392
  className: _cardcssmistica.cardContentContainer,
@@ -394,27 +394,26 @@ const O = ()=>{
394
394
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
395
395
  className: _cardcssmistica.flexColumn,
396
396
  children: [
397
- (0, _headings.isBiggerHeading)(d, n) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
397
+ (0, _headings.isBiggerHeading)(i, n) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
398
398
  children: [
399
- i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
399
+ d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
400
400
  style: {
401
- paddingBottom: o || m ? 4 : 0
401
+ paddingBottom: o || h ? 4 : 0
402
402
  },
403
403
  "data-testid": "title",
404
404
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
405
405
  truncate: s,
406
406
  weight: g.cardTitle.weight,
407
- as: d,
407
+ as: i,
408
408
  hyphens: "auto",
409
- children: i
409
+ children: d
410
410
  }))
411
411
  }),
412
- a && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
413
- /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
412
+ a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
414
413
  ref: r,
415
414
  style: {
416
415
  order: -2,
417
- paddingBottom: 8
416
+ paddingBottom: t || d || o || h ? 8 : 0
418
417
  },
419
418
  "data-testid": "headline",
420
419
  children: typeof a == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
@@ -453,12 +452,11 @@ const O = ()=>{
453
452
  children: t
454
453
  })
455
454
  }),
456
- a && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
457
- /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
455
+ a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
458
456
  ref: r,
459
457
  style: {
460
458
  order: -1,
461
- paddingBottom: 8
459
+ paddingBottom: t || d || o || h ? 8 : 0
462
460
  },
463
461
  "data-testid": "headline",
464
462
  children: typeof a == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
@@ -466,17 +464,17 @@ const O = ()=>{
466
464
  children: a
467
465
  }) : a
468
466
  }),
469
- i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
467
+ d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
470
468
  style: {
471
- paddingBottom: o || m ? 4 : 0
469
+ paddingBottom: o || h ? 4 : 0
472
470
  },
473
471
  "data-testid": "title",
474
472
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
475
473
  truncate: s,
476
474
  weight: g.cardTitle.weight,
477
- as: d,
475
+ as: i,
478
476
  hyphens: "auto",
479
- children: i
477
+ children: d
480
478
  }))
481
479
  })
482
480
  ]
@@ -484,7 +482,7 @@ const O = ()=>{
484
482
  }),
485
483
  o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
486
484
  style: {
487
- paddingBottom: m ? 4 : 0
485
+ paddingBottom: h ? 4 : 0
488
486
  },
489
487
  "data-testid": "subtitle",
490
488
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
@@ -495,20 +493,20 @@ const O = ()=>{
495
493
  children: o
496
494
  })
497
495
  }),
498
- m && // this is tricky, when headline exists, the 8px padding is added by it.
496
+ h && // this is tricky, when headline exists, the 8px padding is added by it.
499
497
  // Otherwise, only 4px are added by title|pretitle|subtitle, so we need to add 4px more
500
498
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
501
499
  style: {
502
- paddingTop: t || i || o ? 4 : 0
500
+ paddingTop: t || d || o ? 4 : 0
503
501
  },
504
502
  "data-testid": "description",
505
503
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
506
- truncate: h,
504
+ truncate: m,
507
505
  as: "p",
508
506
  regular: !0,
509
507
  color: _skincontractcssmistica.vars.colors.textSecondary,
510
508
  hyphens: "auto",
511
- children: m
509
+ children: h
512
510
  })
513
511
  }),
514
512
  y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -528,7 +526,7 @@ const O = ()=>{
528
526
  ]
529
527
  });
530
528
  }, rr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
531
- var { media: a, asset: r, headline: t, pretitle: n, pretitleAs: c, pretitleLinesMax: i, subtitle: d, subtitleLinesMax: s, title: o, titleAs: u = "h3", titleLinesMax: m, description: h, descriptionLinesMax: y, extra: v, actions: p, button: x, buttonLink: g, dataAttributes: B, "aria-label": N, onClose: j, closeButtonLabel: b } = _param, T = _object_without_properties(_param, [
529
+ var { media: a, asset: r, headline: t, pretitle: n, pretitleAs: c, pretitleLinesMax: d, subtitle: i, subtitleLinesMax: s, title: o, titleAs: u = "h3", titleLinesMax: h, description: m, descriptionLinesMax: y, extra: v, actions: p, button: x, buttonLink: g, dataAttributes: B, "aria-label": N, onClose: j, closeButtonLabel: b } = _param, T = _object_without_properties(_param, [
532
530
  "media",
533
531
  "asset",
534
532
  "headline",
@@ -555,15 +553,15 @@ const O = ()=>{
555
553
  o,
556
554
  A,
557
555
  n,
558
- d,
559
- h,
556
+ i,
557
+ m,
560
558
  E
561
559
  ] : [
562
560
  n,
563
561
  A,
564
562
  o,
565
- d,
566
- h,
563
+ i,
564
+ m,
567
565
  E
568
566
  ]).filter(Boolean).join(" ");
569
567
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(J, {
@@ -605,13 +603,13 @@ const O = ()=>{
605
603
  headlineRef: V,
606
604
  pretitle: n,
607
605
  pretitleAs: c,
608
- pretitleLinesMax: i,
606
+ pretitleLinesMax: d,
609
607
  title: o,
610
608
  titleAs: u,
611
- titleLinesMax: m,
612
- subtitle: d,
609
+ titleLinesMax: h,
610
+ subtitle: i,
613
611
  subtitleLinesMax: s,
614
- description: h,
612
+ description: m,
615
613
  descriptionLinesMax: y,
616
614
  extra: v,
617
615
  extraRef: w,
@@ -641,7 +639,7 @@ const O = ()=>{
641
639
  ]
642
640
  });
643
641
  }), tr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
644
- var { media: a, asset: r, headline: t, pretitle: n, pretitleAs: c, pretitleLinesMax: i, subtitle: d, subtitleLinesMax: s, title: o, titleAs: u = "h3", titleLinesMax: m, description: h, descriptionLinesMax: y, extra: v, actions: p, button: x, buttonLink: g, dataAttributes: B, "aria-label": N, onClose: j, closeButtonLabel: b } = _param, T = _object_without_properties(_param, [
642
+ var { media: a, asset: r, headline: t, pretitle: n, pretitleAs: c, pretitleLinesMax: d, subtitle: i, subtitleLinesMax: s, title: o, titleAs: u = "h3", titleLinesMax: h, description: m, descriptionLinesMax: y, extra: v, actions: p, button: x, buttonLink: g, dataAttributes: B, "aria-label": N, onClose: j, closeButtonLabel: b } = _param, T = _object_without_properties(_param, [
645
643
  "media",
646
644
  "asset",
647
645
  "headline",
@@ -668,15 +666,15 @@ const O = ()=>{
668
666
  o,
669
667
  V,
670
668
  n,
671
- d,
672
- h,
669
+ i,
670
+ m,
673
671
  w
674
672
  ] : [
675
673
  n,
676
674
  V,
677
675
  o,
678
- d,
679
- h,
676
+ i,
677
+ m,
680
678
  w
681
679
  ]).filter(Boolean).join(" ");
682
680
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(J, {
@@ -717,13 +715,13 @@ const O = ()=>{
717
715
  headlineRef: E,
718
716
  pretitle: n,
719
717
  pretitleAs: c,
720
- pretitleLinesMax: i,
718
+ pretitleLinesMax: d,
721
719
  title: o,
722
720
  titleAs: u,
723
- titleLinesMax: m,
724
- subtitle: d,
721
+ titleLinesMax: h,
722
+ subtitle: i,
725
723
  subtitleLinesMax: s,
726
- description: h,
724
+ description: m,
727
725
  descriptionLinesMax: y,
728
726
  extra: v,
729
727
  extraRef: D,
@@ -751,7 +749,7 @@ const O = ()=>{
751
749
  ]
752
750
  });
753
751
  }), dr = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
754
- var { media: a, title: r, titleAs: t = "h3", titleLinesMax: n, subtitle: c, subtitleLinesMax: i, description: d, descriptionLinesMax: s, extra: o, dataAttributes: u, "aria-label": m } = _param, h = _object_without_properties(_param, [
752
+ var { media: a, title: r, titleAs: t = "h3", titleLinesMax: n, subtitle: c, subtitleLinesMax: d, description: i, descriptionLinesMax: s, extra: o, dataAttributes: u, "aria-label": h } = _param, m = _object_without_properties(_param, [
755
753
  "media",
756
754
  "title",
757
755
  "titleAs",
@@ -764,10 +762,10 @@ const O = ()=>{
764
762
  "dataAttributes",
765
763
  "aria-label"
766
764
  ]);
767
- const v = !!(h.href || h.to || h.onPress), p = a && a.type === _image.default && a.props.circular, { textPresets: x } = (0, _hooks.useTheme)(), { text: g, ref: B } = O(), N = m || [
765
+ const v = !!(m.href || m.to || m.onPress), p = a && a.type === _image.default && a.props.circular, { textPresets: x } = (0, _hooks.useTheme)(), { text: g, ref: B } = O(), N = h || [
768
766
  r,
769
767
  c,
770
- d,
768
+ i,
771
769
  g
772
770
  ].filter(Boolean).join(" ");
773
771
  return /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
@@ -776,11 +774,11 @@ const O = ()=>{
776
774
  "component-name": "SmallNakedCard",
777
775
  testid: "SmallNakedCard"
778
776
  }, u),
779
- "aria-label": v ? void 0 : m,
777
+ "aria-label": v ? void 0 : h,
780
778
  className: v ? _cardcssmistica.touchableContainer : void 0,
781
779
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
782
780
  maybe: !0
783
- }, h), {
781
+ }, m), {
784
782
  className: _cardcssmistica.touchable,
785
783
  "aria-label": v ? N : void 0,
786
784
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -818,7 +816,7 @@ const O = ()=>{
818
816
  children: r
819
817
  })),
820
818
  c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
821
- truncate: i,
819
+ truncate: d,
822
820
  regular: !0,
823
821
  as: "p",
824
822
  hyphens: "auto",
@@ -827,7 +825,7 @@ const O = ()=>{
827
825
  },
828
826
  children: c
829
827
  }),
830
- d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
828
+ i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
831
829
  truncate: s,
832
830
  regular: !0,
833
831
  as: "p",
@@ -836,7 +834,7 @@ const O = ()=>{
836
834
  dataAttributes: {
837
835
  testid: "description"
838
836
  },
839
- children: d
837
+ children: i
840
838
  })
841
839
  ]
842
840
  })
@@ -853,7 +851,7 @@ const O = ()=>{
853
851
  }))
854
852
  });
855
853
  }), ir = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
856
- var { asset: a, headline: r, pretitle: t, pretitleAs: n, pretitleLinesMax: c, title: i, titleAs: d = "h3", titleLinesMax: s, subtitle: o, subtitleLinesMax: u, description: m, descriptionLinesMax: h, extra: y, actions: v, button: p, buttonLink: x, dataAttributes: g, "aria-label": B, onClose: N, closeButtonLabel: j, aspectRatio: b } = _param, T = _object_without_properties(_param, [
854
+ var { asset: a, headline: r, pretitle: t, pretitleAs: n, pretitleLinesMax: c, title: d, titleAs: i = "h3", titleLinesMax: s, subtitle: o, subtitleLinesMax: u, description: h, descriptionLinesMax: m, extra: y, actions: v, button: p, buttonLink: x, dataAttributes: g, "aria-label": B, onClose: N, closeButtonLabel: j, aspectRatio: b } = _param, T = _object_without_properties(_param, [
857
855
  "asset",
858
856
  "headline",
859
857
  "pretitle",
@@ -876,19 +874,19 @@ const O = ()=>{
876
874
  "closeButtonLabel",
877
875
  "aspectRatio"
878
876
  ]);
879
- const R = !!a || !!r, A = !!(T.href || T.to || T.onPress), { text: V, ref: E } = O(), { text: w, ref: D } = O(), M = We(v, N), C = B || ((0, _headings.isBiggerHeading)(d, n) ? [
880
- i,
877
+ const R = !!a || !!r, A = !!(T.href || T.to || T.onPress), { text: V, ref: E } = O(), { text: w, ref: D } = O(), M = We(v, N), C = B || ((0, _headings.isBiggerHeading)(i, n) ? [
878
+ d,
881
879
  V,
882
880
  t,
883
881
  o,
884
- m,
882
+ h,
885
883
  w
886
884
  ] : [
887
885
  t,
888
886
  V,
889
- i,
887
+ d,
890
888
  o,
891
- m,
889
+ h,
892
890
  w
893
891
  ]).filter(Boolean).join(" ");
894
892
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(J, {
@@ -937,13 +935,13 @@ const O = ()=>{
937
935
  pretitle: t,
938
936
  pretitleAs: n,
939
937
  pretitleLinesMax: c,
940
- title: i,
941
- titleAs: d,
938
+ title: d,
939
+ titleAs: i,
942
940
  titleLinesMax: s,
943
941
  subtitle: o,
944
942
  subtitleLinesMax: u,
945
- description: m,
946
- descriptionLinesMax: h
943
+ description: h,
944
+ descriptionLinesMax: m
947
945
  })
948
946
  ]
949
947
  }),
@@ -981,7 +979,7 @@ const O = ()=>{
981
979
  ]
982
980
  });
983
981
  }), nr = /*#__PURE__*/ _react.forwardRef((_param, p)=>{
984
- var { asset: a, title: r, titleAs: t = "h3", titleLinesMax: n, subtitle: c, subtitleLinesMax: i, description: d, descriptionLinesMax: s, dataAttributes: o, "aria-label": u, extra: m, isInverse: h = !1, aspectRatio: y } = _param, v = _object_without_properties(_param, [
982
+ var { asset: a, title: r, titleAs: t = "h3", titleLinesMax: n, subtitle: c, subtitleLinesMax: d, description: i, descriptionLinesMax: s, dataAttributes: o, "aria-label": u, extra: h, isInverse: m = !1, aspectRatio: y } = _param, v = _object_without_properties(_param, [
985
983
  "asset",
986
984
  "title",
987
985
  "titleAs",
@@ -996,10 +994,10 @@ const O = ()=>{
996
994
  "isInverse",
997
995
  "aspectRatio"
998
996
  ]);
999
- const { textPresets: x } = (0, _hooks.useTheme)(), g = !!(v.href || v.to || v.onPress), B = h ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, { text: N, ref: j } = O(), b = u || [
997
+ const { textPresets: x } = (0, _hooks.useTheme)(), g = !!(v.href || v.to || v.onPress), B = m ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, { text: N, ref: j } = O(), b = u || [
1000
998
  r,
1001
999
  c,
1002
- d,
1000
+ i,
1003
1001
  N
1004
1002
  ].filter(Boolean).join(" ");
1005
1003
  return /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
@@ -1013,7 +1011,7 @@ const O = ()=>{
1013
1011
  "aria-label": g ? void 0 : u,
1014
1012
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
1015
1013
  className: _cardcssmistica.boxed,
1016
- variant: h ? "inverse" : "default",
1014
+ variant: m ? "inverse" : "default",
1017
1015
  width: "100%",
1018
1016
  minHeight: "100%",
1019
1017
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
@@ -1055,7 +1053,7 @@ const O = ()=>{
1055
1053
  children: r
1056
1054
  })),
1057
1055
  c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1058
- truncate: i,
1056
+ truncate: d,
1059
1057
  regular: !0,
1060
1058
  color: _skincontractcssmistica.vars.colors.textPrimary,
1061
1059
  as: "p",
@@ -1065,7 +1063,7 @@ const O = ()=>{
1065
1063
  },
1066
1064
  children: c
1067
1065
  }),
1068
- d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1066
+ i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1069
1067
  truncate: s,
1070
1068
  regular: !0,
1071
1069
  color: _skincontractcssmistica.vars.colors.textSecondary,
@@ -1074,16 +1072,16 @@ const O = ()=>{
1074
1072
  dataAttributes: {
1075
1073
  testid: "description"
1076
1074
  },
1077
- children: d
1075
+ children: i
1078
1076
  })
1079
1077
  ]
1080
1078
  })
1081
1079
  ]
1082
1080
  }),
1083
- m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1081
+ h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1084
1082
  ref: j,
1085
1083
  "data-testid": "slot",
1086
- children: m
1084
+ children: h
1087
1085
  })
1088
1086
  ]
1089
1087
  })
@@ -1092,7 +1090,7 @@ const O = ()=>{
1092
1090
  })
1093
1091
  });
1094
1092
  }), Xe = (param)=>{
1095
- let { title: a, titleAs: r = "h3", headline: t, pretitle: n, pretitleAs: c, subtitle: i, description: d, extra: s, headlineRef: o, extraRef: u } = param;
1093
+ let { title: a, titleAs: r = "h3", headline: t, pretitle: n, pretitleAs: c, subtitle: d, description: i, extra: s, headlineRef: o, extraRef: u } = param;
1096
1094
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
1097
1095
  className: _cardcssmistica.flexColumn,
1098
1096
  children: [
@@ -1100,17 +1098,16 @@ const O = ()=>{
1100
1098
  children: [
1101
1099
  a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1102
1100
  style: {
1103
- paddingBottom: i || d ? 4 : 0
1101
+ paddingBottom: d || i ? 4 : 0
1104
1102
  },
1105
1103
  "data-testid": "title",
1106
1104
  children: a
1107
1105
  }),
1108
- t && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
1109
- /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1106
+ t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1110
1107
  ref: o,
1111
1108
  style: {
1112
1109
  order: -2,
1113
- paddingBottom: 16
1110
+ paddingBottom: n || a || d || i ? 16 : 0
1114
1111
  },
1115
1112
  "data-testid": "headline",
1116
1113
  children: t
@@ -1133,40 +1130,39 @@ const O = ()=>{
1133
1130
  "data-testid": "pretitle",
1134
1131
  children: n
1135
1132
  }),
1136
- t && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
1137
- /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1133
+ t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1138
1134
  ref: o,
1139
1135
  style: {
1140
1136
  order: -1,
1141
- paddingBottom: 16
1137
+ paddingBottom: n || a || d || i ? 16 : 0
1142
1138
  },
1143
1139
  "data-testid": "headline",
1144
1140
  children: t
1145
1141
  }),
1146
1142
  a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1147
1143
  style: {
1148
- paddingBottom: i || d ? 4 : 0
1144
+ paddingBottom: d || i ? 4 : 0
1149
1145
  },
1150
1146
  "data-testid": "title",
1151
1147
  children: a
1152
1148
  })
1153
1149
  ]
1154
1150
  }),
1155
- i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1151
+ d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1156
1152
  style: {
1157
- paddingBottom: i ? 4 : 0
1153
+ paddingBottom: d ? 4 : 0
1158
1154
  },
1159
1155
  "data-testid": "subtitle",
1160
- children: i
1156
+ children: d
1161
1157
  }),
1162
- d && // this is tricky, the padding between a headline and a description is 16px
1158
+ i && // this is tricky, the padding between a headline and a description is 16px
1163
1159
  // but the padding between a title|pretitle|subtitle and a description is 8px (4px + 4px)
1164
1160
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1165
1161
  style: {
1166
- paddingTop: n || a || i ? 4 : 0
1162
+ paddingTop: n || a || d ? 4 : 0
1167
1163
  },
1168
1164
  "data-testid": "description",
1169
- children: d
1165
+ children: i
1170
1166
  }),
1171
1167
  s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1172
1168
  ref: u,
@@ -1176,7 +1172,7 @@ const O = ()=>{
1176
1172
  ]
1177
1173
  });
1178
1174
  }, Le = /*#__PURE__*/ _react.forwardRef((_param, D)=>{
1179
- var { isInverse: a, backgroundImage: r, backgroundVideo: t, backgroundVideoRef: n, poster: c, asset: i, headline: d, pretitle: s, pretitleAs: o, pretitleLinesMax: u, title: m, titleAs: h = "h3", titleLinesMax: y, description: v, descriptionLinesMax: p, extra: x, button: g, secondaryButton: B, onClose: N, closeButtonLabel: j, actions: b, buttonLink: T, dataAttributes: I, width: R, height: A, aspectRatio: V, "aria-label": E } = _param, w = _object_without_properties(_param, [
1175
+ var { isInverse: a, backgroundImage: r, backgroundVideo: t, backgroundVideoRef: n, poster: c, asset: d, headline: i, pretitle: s, pretitleAs: o, pretitleLinesMax: u, title: h, titleAs: m = "h3", titleLinesMax: y, description: v, descriptionLinesMax: p, extra: x, button: g, secondaryButton: B, onClose: N, closeButtonLabel: j, actions: b, buttonLink: T, dataAttributes: I, width: R, height: A, aspectRatio: V, "aria-label": E } = _param, w = _object_without_properties(_param, [
1180
1176
  "isInverse",
1181
1177
  "backgroundImage",
1182
1178
  "backgroundVideo",
@@ -1209,8 +1205,8 @@ const O = ()=>{
1209
1205
  C && (b = ie ? [
1210
1206
  ie
1211
1207
  ] : []);
1212
- const le = (0, _themevariantcontext.useIsInverseVariant)(), H = M || C, W = H ? "0 0 16px rgba(0,0,0,0.4)" : void 0, K = (b == null ? void 0 : b.length) || N, F = !!(w.href || w.to || w.onPress), ue = M || C ? _cardcssmistica.touchableCardOverlayMedia : a ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, Q = E || ((0, _headings.isBiggerHeading)(h, o) ? [
1213
- m,
1208
+ const le = (0, _themevariantcontext.useIsInverseVariant)(), H = M || C, W = H ? "0 0 16px rgba(0,0,0,0.4)" : void 0, K = (b == null ? void 0 : b.length) || N, F = !!(w.href || w.to || w.onPress), ue = M || C ? _cardcssmistica.touchableCardOverlayMedia : a ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, Q = E || ((0, _headings.isBiggerHeading)(m, o) ? [
1209
+ h,
1214
1210
  P,
1215
1211
  s,
1216
1212
  v,
@@ -1218,7 +1214,7 @@ const O = ()=>{
1218
1214
  ] : [
1219
1215
  s,
1220
1216
  P,
1221
- m,
1217
+ h,
1222
1218
  v,
1223
1219
  oe
1224
1220
  ]).filter(Boolean).join(" ");
@@ -1261,10 +1257,10 @@ const O = ()=>{
1261
1257
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
1262
1258
  className: _cardcssmistica.displayCardContent,
1263
1259
  style: {
1264
- paddingTop: H && !i && !K && !C ? 0 : 24
1260
+ paddingTop: H && !d && !K && !C ? 0 : 24
1265
1261
  },
1266
1262
  children: [
1267
- i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1263
+ d ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1268
1264
  style: (0, _css.applyCssVars)({
1269
1265
  [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
1270
1266
  }),
@@ -1272,7 +1268,7 @@ const O = ()=>{
1272
1268
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1273
1269
  paddingBottom: H ? 0 : 40,
1274
1270
  paddingX: 24,
1275
- children: i
1271
+ children: d
1276
1272
  })
1277
1273
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1278
1274
  paddingBottom: K || C ? H ? 24 : 64 : 0
@@ -1285,16 +1281,16 @@ const O = ()=>{
1285
1281
  space: 24,
1286
1282
  children: [
1287
1283
  /* @__PURE__ */ (0, _jsxruntime.jsx)(Xe, {
1288
- title: m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
1284
+ title: h ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
1289
1285
  forceMobileSizes: !0,
1290
1286
  truncate: y,
1291
- as: h,
1287
+ as: m,
1292
1288
  textShadow: W,
1293
1289
  hyphens: "auto",
1294
- children: m
1290
+ children: h
1295
1291
  }) : void 0,
1296
- titleAs: h,
1297
- headline: d,
1292
+ titleAs: m,
1293
+ headline: i,
1298
1294
  pretitle: s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1299
1295
  forceMobileSizes: !0,
1300
1296
  truncate: u,
@@ -1365,7 +1361,7 @@ const O = ()=>{
1365
1361
  }, a)
1366
1362
  }));
1367
1363
  }), lr = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
1368
- var { dataAttributes: a, backgroundImage: r, backgroundVideo: t, poster: n, backgroundVideoRef: c, width: i, height: d, aspectRatio: s = "7:10", "aria-label": o, actions: u, onClose: m, closeButtonLabel: h, asset: y, headline: v, pretitle: p, pretitleAs: x, pretitleLinesMax: g, title: B, titleAs: N = "h3", titleLinesMax: j, subtitle: b, subtitleLinesMax: T, description: I, descriptionLinesMax: R, extra: A, variant: V, isInverse: E, backgroundColor: w } = _param, D = _object_without_properties(_param, [
1364
+ var { dataAttributes: a, backgroundImage: r, backgroundVideo: t, poster: n, backgroundVideoRef: c, width: d, height: i, aspectRatio: s = "7:10", "aria-label": o, actions: u, onClose: h, closeButtonLabel: m, asset: y, headline: v, pretitle: p, pretitleAs: x, pretitleLinesMax: g, title: B, titleAs: N = "h3", titleLinesMax: j, subtitle: b, subtitleLinesMax: T, description: I, descriptionLinesMax: R, extra: A, variant: V, isInverse: E, backgroundColor: w } = _param, D = _object_without_properties(_param, [
1369
1365
  "dataAttributes",
1370
1366
  "backgroundImage",
1371
1367
  "backgroundVideo",
@@ -1399,7 +1395,7 @@ const O = ()=>{
1399
1395
  k && (u = P ? [
1400
1396
  P
1401
1397
  ] : []);
1402
- const H = (0, _themevariantcontext.useIsInverseVariant)(), W = C || k, K = W ? "0 0 16px rgba(0,0,0,0.4)" : void 0, F = (u == null ? void 0 : u.length) || m, { textPresets: ue } = (0, _hooks.useTheme)(), Q = !!(D.href || D.to || D.onPress), ee = V || (E ? "inverse" : "default"), _e = ()=>ee === "media" || C || k ? H ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : w || ({
1398
+ const H = (0, _themevariantcontext.useIsInverseVariant)(), W = C || k, K = W ? "0 0 16px rgba(0,0,0,0.4)" : void 0, F = (u == null ? void 0 : u.length) || h, { textPresets: ue } = (0, _hooks.useTheme)(), Q = !!(D.href || D.to || D.onPress), ee = V || (E ? "inverse" : "default"), _e = ()=>ee === "media" || C || k ? H ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : w || ({
1403
1399
  default: _skincontractcssmistica.vars.colors.backgroundContainer,
1404
1400
  inverse: H ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand,
1405
1401
  alternative: _skincontractcssmistica.vars.colors.backgroundAlternative
@@ -1419,8 +1415,8 @@ const O = ()=>{
1419
1415
  se
1420
1416
  ]).filter(Boolean).join(" ");
1421
1417
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(J, {
1422
- width: i,
1423
- height: d,
1418
+ width: d,
1419
+ height: i,
1424
1420
  dataAttributes: _object_spread({
1425
1421
  "component-name": "PosterCard",
1426
1422
  testid: "PosterCard"
@@ -1528,8 +1524,8 @@ const O = ()=>{
1528
1524
  }))
1529
1525
  }),
1530
1526
  /* @__PURE__ */ (0, _jsxruntime.jsx)(de, {
1531
- onClose: m,
1532
- closeButtonLabel: h,
1527
+ onClose: h,
1528
+ closeButtonLabel: m,
1533
1529
  actions: u,
1534
1530
  variant: C || k ? "media" : ee === "inverse" ? "inverse" : "default"
1535
1531
  })