@telefonica/mistica 14.18.2 → 14.19.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 (20) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/button.css-mistica.js +28 -22
  3. package/dist/button.css.d.ts +3 -1
  4. package/dist/button.d.ts +6 -0
  5. package/dist/button.js +67 -65
  6. package/dist/card.css-mistica.js +17 -17
  7. package/dist/card.css.d.ts +1 -1
  8. package/dist/card.d.ts +3 -5
  9. package/dist/card.js +296 -276
  10. package/dist/index.d.ts +1 -1
  11. package/dist/index.js +3 -0
  12. package/dist/package-version.js +1 -1
  13. package/dist-es/button.css-mistica.js +9 -9
  14. package/dist-es/button.js +82 -80
  15. package/dist-es/card.css-mistica.js +3 -3
  16. package/dist-es/card.js +403 -386
  17. package/dist-es/index.js +1710 -1710
  18. package/dist-es/package-version.js +1 -1
  19. package/dist-es/style.css +1 -1
  20. package/package.json +1 -1
package/dist/card.js CHANGED
@@ -9,32 +9,35 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
+ CardActionSpinner: function() {
13
+ return $e;
14
+ },
12
15
  CardActionsGroup: function() {
13
- return k;
16
+ return P;
14
17
  },
15
18
  DataCard: function() {
16
- return Ir;
19
+ return Ma;
17
20
  },
18
21
  DisplayDataCard: function() {
19
- return Dr;
22
+ return Oa;
20
23
  },
21
24
  DisplayMediaCard: function() {
22
- return Mr;
25
+ return za;
23
26
  },
24
27
  MediaCard: function() {
25
- return Sr;
28
+ return Ia;
26
29
  },
27
30
  NakedCard: function() {
28
- return wr;
31
+ return Ba;
29
32
  },
30
33
  PosterCard: function() {
31
- return zr;
34
+ return Ha;
32
35
  },
33
36
  SmallNakedCard: function() {
34
- return Br;
37
+ return Ra;
35
38
  },
36
39
  SnapCard: function() {
37
- return Rr;
40
+ return Da;
38
41
  }
39
42
  });
40
43
  const _jsxruntime = require("react/jsx-runtime");
@@ -186,27 +189,27 @@ function _object_without_properties_loose(source, excluded) {
186
189
  }
187
190
  return target;
188
191
  }
189
- const ye = (r, a)=>{
190
- const { texts: n } = (0, _hooks.useTheme)(), l = r ? [
191
- ...r
192
+ const ye = (a, r)=>{
193
+ const { texts: i } = (0, _hooks.useTheme)(), l = a ? [
194
+ ...a
192
195
  ] : [];
193
- return a && l.push({
194
- label: n.closeButtonLabel,
195
- onPress: a,
196
+ return r && l.push({
197
+ label: i.closeButtonLabel,
198
+ onPress: r,
196
199
  Icon: _iconcloseregular.default
197
200
  }), l;
198
- }, ge = 48, k = (param)=>{
199
- let { actions: r , onClose: a , type: n = "default" } = param;
200
- const l = ye(r, a), u = l.length > 0, s = {
201
+ }, ve = 48, P = (param)=>{
202
+ let { actions: a , onClose: r , type: i = "default" } = param;
203
+ const l = ye(a, r), m = l.length > 0, s = {
201
204
  default: _skincontractcssmistica.vars.colors.neutralHigh,
202
205
  inverse: _skincontractcssmistica.vars.colors.inverse,
203
206
  media: "#000000"
204
- }, o = {
207
+ }, d = {
205
208
  default: _cardcssmistica.cardAction,
206
209
  inverse: _cardcssmistica.cardActionInverse,
207
210
  media: _cardcssmistica.cardActionMedia
208
211
  };
209
- return u ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
212
+ return m ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
210
213
  style: {
211
214
  position: "absolute",
212
215
  right: 8,
@@ -217,11 +220,11 @@ const ye = (r, a)=>{
217
220
  className: (0, _sprinklescssmistica.sprinkles)({
218
221
  display: "flex"
219
222
  }),
220
- children: l.map((param, f)=>{
221
- let { onPress: c , label: p , Icon: t , iconSize: d = 20 , disabled: m = !1 } = param;
222
- return t ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
223
- disabled: m,
224
- size: ge,
223
+ children: l.map((param, h)=>/* @__PURE__ */ {
224
+ let { onPress: c , label: p , Icon: t , disabled: o = !1 } = param;
225
+ return (0, _jsxruntime.jsx)(_iconbutton.default, {
226
+ disabled: o,
227
+ size: ve,
225
228
  onPress: c,
226
229
  "aria-label": p,
227
230
  className: _cardcssmistica.cardActionIconButton,
@@ -229,45 +232,43 @@ const ye = (r, a)=>{
229
232
  display: "flex"
230
233
  },
231
234
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
232
- className: o[n],
235
+ className: d[i],
233
236
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(t, {
234
- color: s[n],
235
- size: d
237
+ color: s[i],
238
+ size: 20
236
239
  })
237
240
  })
238
- }, f) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
239
- className: _cardcssmistica.cardActionIconButton
240
- }, f);
241
+ }, h);
241
242
  })
242
243
  })
243
244
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
244
- }, qe = (r)=>r ? typeof r == "number" ? r : ({
245
+ }, Je = (a)=>a ? typeof a == "number" ? a : ({
245
246
  "1:1": 1,
246
247
  "16:9": 16 / 9,
247
248
  "7:10": 7 / 10,
248
249
  "9:10": 9 / 10,
249
250
  auto: 0
250
- })[r] : 0, H = /*#__PURE__*/ _react.forwardRef((param, p)=>{
251
- let { children: r , width: a = "100%" , height: n = "100%" , minWidth: l , aspectRatio: u , dataAttributes: s , className: o , "aria-label": c } = param;
252
- const t = qe(u);
251
+ })[a] : 0, H = /*#__PURE__*/ _react.forwardRef((param, p)=>{
252
+ let { children: a , width: r = "100%" , height: i = "100%" , minWidth: l , aspectRatio: m , dataAttributes: s , className: d , "aria-label": c } = param;
253
+ const t = Je(m);
253
254
  return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(s)), {
254
255
  ref: p,
255
256
  "aria-label": c,
256
- className: (0, _classnames.default)(o, _cardcssmistica.cardContainer),
257
+ className: (0, _classnames.default)(d, _cardcssmistica.cardContainer),
257
258
  style: _object_spread({
258
- width: a,
259
- height: n,
259
+ width: r,
260
+ height: i,
260
261
  minWidth: l
261
262
  }, t ? (0, _dynamic.assignInlineVars)({
262
263
  [_cardcssmistica.vars.aspectRatio]: String(t)
263
264
  }) : {}),
264
- children: r
265
+ children: a
265
266
  }));
266
- }), Ne = (r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
267
+ }), ge = (a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
267
268
  width: "100%",
268
269
  height: "100%",
269
- src: r !== null && r !== void 0 ? r : "//:0"
270
- }), Je = {
270
+ src: a !== null && a !== void 0 ? a : "//:0"
271
+ }), Ke = {
271
272
  loading: {
272
273
  showSpinner: "loadingTimeout",
273
274
  play: "playing",
@@ -291,76 +292,82 @@ const ye = (r, a)=>{
291
292
  error: {
292
293
  reset: "loading"
293
294
  }
294
- }, Ke = (r, a)=>Je[r][a] || r, Le = (param)=>/* @__PURE__ */ {
295
- let { size: r , color: a } = param;
295
+ }, Qe = (a, r)=>Ke[a][r] || a, $e = (param)=>/* @__PURE__ */ {
296
+ let { color: a } = param;
296
297
  return (0, _jsxruntime.jsx)(_spinner.default, {
297
- size: r,
298
298
  color: a,
299
+ size: 16,
299
300
  delay: "0"
300
301
  });
301
- }, Ce = (r, a, n)=>{
302
- const { texts: l } = (0, _hooks.useTheme)(), u = _react.useRef(null), [s, o] = _react.useReducer(Ke, "loading");
302
+ }, ee = (param)=>/* @__PURE__ */ {
303
+ let { color: a } = param;
304
+ return (0, _jsxruntime.jsx)(_iconpausefilled.default, {
305
+ color: a,
306
+ size: 12
307
+ });
308
+ }, Ve = (param)=>/* @__PURE__ */ {
309
+ let { color: a } = param;
310
+ return (0, _jsxruntime.jsx)(_iconplayfilled.default, {
311
+ color: a,
312
+ size: 12
313
+ });
314
+ }, Ne = (a, r, i)=>{
315
+ const { texts: l } = (0, _hooks.useTheme)(), m = _react.useRef(null), [s, d] = _react.useReducer(Qe, "loading");
303
316
  _react.useEffect(()=>{
304
- var m;
305
- const d = setTimeout(()=>o("showSpinner"), 2e3);
306
- return (m = u.current) == null || m.load(), ()=>{
307
- clearTimeout(d), o("reset");
317
+ var h;
318
+ const o = setTimeout(()=>d("showSpinner"), 2e3);
319
+ return (h = m.current) == null || h.load(), ()=>{
320
+ clearTimeout(o), d("reset");
308
321
  };
309
322
  }, [
310
- r
323
+ a
311
324
  ]);
312
- const c = _react.useMemo(()=>r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
313
- ref: (0, _common.combineRefs)(u, n),
314
- src: r,
325
+ const c = _react.useMemo(()=>a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
326
+ ref: (0, _common.combineRefs)(m, i),
327
+ src: a,
315
328
  width: "100%",
316
329
  height: "100%",
317
- poster: a,
318
- onError: ()=>o("fail"),
319
- onPause: ()=>o("pause"),
320
- onPlay: ()=>o("play")
330
+ poster: r,
331
+ onError: ()=>d("fail"),
332
+ onPause: ()=>d("pause"),
333
+ onPlay: ()=>d("play")
321
334
  }) : void 0, [
322
- n,
323
- r,
324
- a
335
+ i,
336
+ a,
337
+ r
325
338
  ]), p = ()=>{
326
- const d = u.current;
327
- d && (s === "loading" ? o("showSpinner") : s === "paused" ? d.play() : s === "playing" && d.pause());
328
- }, t = {
339
+ const o = m.current;
340
+ o && (s === "loading" ? d("showSpinner") : s === "paused" ? o.play() : s === "playing" && o.pause());
341
+ };
342
+ if (s === "error") return {
343
+ video: c
344
+ };
345
+ const t = {
329
346
  Icon: {
330
- playing: _iconpausefilled.default,
331
- loading: _iconpausefilled.default,
332
- paused: _iconplayfilled.default,
333
- loadingTimeout: Le,
334
- error: void 0
347
+ playing: ee,
348
+ loading: ee,
349
+ paused: Ve,
350
+ loadingTimeout: $e
335
351
  }[s],
336
352
  onPress: p,
337
353
  label: {
338
354
  playing: l.pauseIconButtonLabel,
339
355
  loading: l.pauseIconButtonLabel,
340
356
  paused: l.playIconButtonLabel,
341
- loadingTimeout: "",
342
- error: ""
357
+ loadingTimeout: ""
343
358
  }[s],
344
- disabled: ![
345
- "loading",
346
- "playing",
347
- "paused"
348
- ].includes(s),
349
- iconSize: s === "loadingTimeout" ? 16 : 12,
350
- iconColor: _skincontractcssmistica.vars.colors.inverse,
351
- iconBackground: _cardcssmistica.videoAction,
352
- iconBackgroundInverse: _cardcssmistica.videoAction
359
+ disabled: s === "loadingTimeout"
353
360
  };
354
361
  return {
355
362
  video: c,
356
363
  videoAction: t
357
364
  };
358
- }, Q = (param)=>{
359
- let { headline: r , pretitle: a , pretitleLinesMax: n , title: l , titleLinesMax: u , subtitle: s , subtitleLinesMax: o , description: c , descriptionLinesMax: p , extra: t , button: d , buttonLink: m } = param;
360
- const { textPresets: f } = (0, _hooks.useTheme)(), v = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
365
+ }, $ = (param)=>{
366
+ let { headline: a , pretitle: r , pretitleLinesMax: i , title: l , titleLinesMax: m , subtitle: s , subtitleLinesMax: d , description: c , descriptionLinesMax: p , extra: t , button: o , buttonLink: h } = param;
367
+ const { textPresets: f } = (0, _hooks.useTheme)(), y = ()=>a ? typeof a == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
361
368
  type: "promo",
362
- children: r
363
- }) : r : null;
369
+ children: a
370
+ }) : a : null;
364
371
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
365
372
  className: (0, _sprinklescssmistica.sprinkles)({
366
373
  display: "flex",
@@ -374,34 +381,34 @@ const ye = (r, a)=>{
374
381
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
375
382
  space: 8,
376
383
  children: [
377
- (r || a || l || s) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
384
+ (a || r || l || s) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
378
385
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
379
386
  space: 8,
380
387
  children: [
381
- v(),
388
+ y(),
382
389
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
383
390
  space: 4,
384
391
  children: [
385
- a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
386
- truncate: n,
392
+ r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
393
+ truncate: i,
387
394
  as: "div",
388
395
  regular: !0,
389
396
  hyphens: "auto",
390
- children: a
397
+ children: r
391
398
  }),
392
399
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
393
400
  mobileSize: 18,
394
401
  mobileLineHeight: "24px",
395
402
  desktopSize: 20,
396
403
  desktopLineHeight: "28px",
397
- truncate: u,
404
+ truncate: m,
398
405
  weight: f.cardTitle.weight,
399
406
  as: "h3",
400
407
  hyphens: "auto",
401
408
  children: l
402
409
  }),
403
410
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
404
- truncate: o,
411
+ truncate: d,
405
412
  as: "div",
406
413
  regular: !0,
407
414
  hyphens: "auto",
@@ -427,17 +434,17 @@ const ye = (r, a)=>{
427
434
  })
428
435
  ]
429
436
  }),
430
- (d || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
437
+ (o || h) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
431
438
  className: _cardcssmistica.actions,
432
439
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
433
- primaryButton: d,
434
- link: m
440
+ primaryButton: o,
441
+ link: h
435
442
  })
436
443
  })
437
444
  ]
438
445
  });
439
- }, Sr = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
440
- var { media: r , headline: a , pretitle: n , pretitleLinesMax: l , subtitle: u , subtitleLinesMax: s , title: o , titleLinesMax: c , description: p , descriptionLinesMax: t , extra: d , actions: m , button: f , buttonLink: v , dataAttributes: A , "aria-label": y , onClose: b } = _param, h = _object_without_properties(_param, [
446
+ }, Ia = /*#__PURE__*/ _react.forwardRef((_param, v)=>{
447
+ var { media: a , headline: r , pretitle: i , pretitleLinesMax: l , subtitle: m , subtitleLinesMax: s , title: d , titleLinesMax: c , description: p , icon: t , descriptionLinesMax: o , extra: h , actions: f , button: y , buttonLink: S , dataAttributes: C , "aria-label": A , onClose: u } = _param, T = _object_without_properties(_param, [
441
448
  "media",
442
449
  "headline",
443
450
  "pretitle",
@@ -447,6 +454,7 @@ const ye = (r, a)=>{
447
454
  "title",
448
455
  "titleLinesMax",
449
456
  "description",
457
+ "icon",
450
458
  "descriptionLinesMax",
451
459
  "extra",
452
460
  "actions",
@@ -456,13 +464,13 @@ const ye = (r, a)=>{
456
464
  "aria-label",
457
465
  "onClose"
458
466
  ]);
459
- const g = h.href || h.to || h.onPress;
467
+ const w = T.href || T.to || T.onPress;
460
468
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(H, {
461
469
  dataAttributes: _object_spread({
462
470
  "component-name": "MediaCard"
463
- }, A),
464
- ref: S,
465
- "aria-label": y,
471
+ }, C),
472
+ ref: v,
473
+ "aria-label": A,
466
474
  className: _cardcssmistica.touchableContainer,
467
475
  children: [
468
476
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
@@ -471,11 +479,11 @@ const ye = (r, a)=>{
471
479
  height: "100%",
472
480
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
473
481
  maybe: !0
474
- }, h), {
482
+ }, T), {
475
483
  className: _cardcssmistica.touchable,
476
- "aria-label": y,
484
+ "aria-label": A,
477
485
  children: [
478
- g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
486
+ w && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
479
487
  className: _cardcssmistica.touchableMediaCardOverlay
480
488
  }),
481
489
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -483,39 +491,51 @@ const ye = (r, a)=>{
483
491
  children: [
484
492
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.MediaBorderRadiusProvider, {
485
493
  value: !1,
486
- children: r
494
+ children: a
487
495
  }),
488
496
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
489
497
  className: _cardcssmistica.mediaCardContent,
490
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
491
- headline: a,
492
- pretitle: n,
498
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)($, {
499
+ headline: r,
500
+ pretitle: i,
493
501
  pretitleLinesMax: l,
494
- title: o,
502
+ title: d,
495
503
  titleLinesMax: c,
496
- subtitle: u,
504
+ subtitle: m,
497
505
  subtitleLinesMax: s,
498
506
  description: p,
499
- descriptionLinesMax: t,
500
- extra: d,
501
- button: f,
502
- buttonLink: v
507
+ descriptionLinesMax: o,
508
+ extra: h,
509
+ button: y,
510
+ buttonLink: S
503
511
  })
512
+ }),
513
+ t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
514
+ className: _cardcssmistica.mediaCardIcon,
515
+ paddingLeft: {
516
+ mobile: 16,
517
+ desktop: 24
518
+ },
519
+ paddingTop: {
520
+ mobile: 16,
521
+ desktop: 24
522
+ },
523
+ children: t
504
524
  })
505
525
  ]
506
526
  })
507
527
  ]
508
528
  }))
509
529
  }),
510
- /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
511
- onClose: b,
512
- actions: m,
530
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(P, {
531
+ onClose: u,
532
+ actions: f,
513
533
  type: "media"
514
534
  })
515
535
  ]
516
536
  });
517
- }), wr = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
518
- var { media: r , headline: a , pretitle: n , pretitleLinesMax: l , subtitle: u , subtitleLinesMax: s , title: o , titleLinesMax: c , description: p , descriptionLinesMax: t , extra: d , actions: m , button: f , buttonLink: v , dataAttributes: A , "aria-label": y , onClose: b } = _param, h = _object_without_properties(_param, [
537
+ }), Ba = /*#__PURE__*/ _react.forwardRef((_param, T)=>{
538
+ var { media: a , headline: r , pretitle: i , pretitleLinesMax: l , subtitle: m , subtitleLinesMax: s , title: d , titleLinesMax: c , description: p , descriptionLinesMax: t , extra: o , actions: h , button: f , buttonLink: y , dataAttributes: S , "aria-label": C , onClose: A } = _param, u = _object_without_properties(_param, [
519
539
  "media",
520
540
  "headline",
521
541
  "pretitle",
@@ -534,20 +554,20 @@ const ye = (r, a)=>{
534
554
  "aria-label",
535
555
  "onClose"
536
556
  ]);
537
- const g = h.href || h.to || h.onPress, B = r && r.type === _image.default && r.props.circular;
557
+ const v = u.href || u.to || u.onPress, w = a && a.type === _image.default && a.props.circular;
538
558
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(H, {
539
- ref: S,
559
+ ref: T,
540
560
  dataAttributes: _object_spread({
541
561
  "component-name": "NakedCard"
542
- }, A),
543
- "aria-label": y,
544
- className: g ? _cardcssmistica.touchableContainer : void 0,
562
+ }, S),
563
+ "aria-label": C,
564
+ className: v ? _cardcssmistica.touchableContainer : void 0,
545
565
  children: [
546
566
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
547
567
  maybe: !0
548
- }, h), {
568
+ }, u), {
549
569
  className: _cardcssmistica.touchable,
550
- "aria-label": y,
570
+ "aria-label": C,
551
571
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
552
572
  className: _cardcssmistica.mediaCard,
553
573
  children: [
@@ -556,43 +576,43 @@ const ye = (r, a)=>{
556
576
  position: "relative"
557
577
  },
558
578
  children: [
559
- g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
579
+ v && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
560
580
  className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
561
- [_cardcssmistica.circularMediaOverlay]: B
581
+ [_cardcssmistica.circularMediaOverlay]: w
562
582
  })
563
583
  }),
564
- r
584
+ a
565
585
  ]
566
586
  }),
567
587
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
568
588
  className: _cardcssmistica.nakedCardContent,
569
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
570
- headline: a,
571
- pretitle: n,
589
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)($, {
590
+ headline: r,
591
+ pretitle: i,
572
592
  pretitleLinesMax: l,
573
- title: o,
593
+ title: d,
574
594
  titleLinesMax: c,
575
- subtitle: u,
595
+ subtitle: m,
576
596
  subtitleLinesMax: s,
577
597
  description: p,
578
598
  descriptionLinesMax: t,
579
- extra: d,
599
+ extra: o,
580
600
  button: f,
581
- buttonLink: v
601
+ buttonLink: y
582
602
  })
583
603
  })
584
604
  ]
585
605
  })
586
606
  })),
587
- /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
588
- onClose: b,
589
- actions: m,
607
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(P, {
608
+ onClose: A,
609
+ actions: h,
590
610
  type: "media"
591
611
  })
592
612
  ]
593
613
  });
594
- }), Br = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
595
- var { media: r , title: a , titleLinesMax: n , subtitle: l , subtitleLinesMax: u , description: s , descriptionLinesMax: o , extra: c , dataAttributes: p , "aria-label": t } = _param, d = _object_without_properties(_param, [
614
+ }), Ra = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
615
+ var { media: a , title: r , titleLinesMax: i , subtitle: l , subtitleLinesMax: m , description: s , descriptionLinesMax: d , extra: c , dataAttributes: p , "aria-label": t } = _param, o = _object_without_properties(_param, [
596
616
  "media",
597
617
  "title",
598
618
  "titleLinesMax",
@@ -604,9 +624,9 @@ const ye = (r, a)=>{
604
624
  "dataAttributes",
605
625
  "aria-label"
606
626
  ]);
607
- const f = d.href || d.to || d.onPress, v = r && r.type === _image.default && r.props.circular;
627
+ const f = o.href || o.to || o.onPress, y = a && a.type === _image.default && a.props.circular;
608
628
  return /* @__PURE__ */ (0, _jsxruntime.jsx)(H, {
609
- ref: m,
629
+ ref: h,
610
630
  dataAttributes: _object_spread({
611
631
  "component-name": "SmallNakedCard"
612
632
  }, p),
@@ -614,7 +634,7 @@ const ye = (r, a)=>{
614
634
  className: f ? _cardcssmistica.touchableContainer : void 0,
615
635
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
616
636
  maybe: !0
617
- }, d), {
637
+ }, o), {
618
638
  className: _cardcssmistica.touchable,
619
639
  "aria-label": t,
620
640
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -627,10 +647,10 @@ const ye = (r, a)=>{
627
647
  children: [
628
648
  f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
629
649
  className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
630
- [_cardcssmistica.circularMediaOverlay]: v
650
+ [_cardcssmistica.circularMediaOverlay]: y
631
651
  })
632
652
  }),
633
- r
653
+ a
634
654
  ]
635
655
  }),
636
656
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -641,15 +661,15 @@ const ye = (r, a)=>{
641
661
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
642
662
  space: 8,
643
663
  children: [
644
- a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
645
- truncate: n,
664
+ r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
665
+ truncate: i,
646
666
  as: "h3",
647
667
  regular: !0,
648
668
  hyphens: "auto",
649
- children: a
669
+ children: r
650
670
  }),
651
671
  l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
652
- truncate: u,
672
+ truncate: m,
653
673
  regular: !0,
654
674
  as: "p",
655
675
  hyphens: "auto",
@@ -658,7 +678,7 @@ const ye = (r, a)=>{
658
678
  ]
659
679
  }),
660
680
  s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
661
- truncate: o,
681
+ truncate: d,
662
682
  regular: !0,
663
683
  as: "p",
664
684
  color: _skincontractcssmistica.vars.colors.textSecondary,
@@ -676,8 +696,8 @@ const ye = (r, a)=>{
676
696
  })
677
697
  }))
678
698
  });
679
- }), Ir = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
680
- var { icon: r , headline: a , pretitle: n , pretitleLinesMax: l , title: u , titleLinesMax: s , subtitle: o , subtitleLinesMax: c , description: p , descriptionLinesMax: t , extra: d , actions: m , button: f , buttonLink: v , dataAttributes: A , "aria-label": y , onClose: b } = _param, h = _object_without_properties(_param, [
699
+ }), Ma = /*#__PURE__*/ _react.forwardRef((_param, T)=>{
700
+ var { icon: a , headline: r , pretitle: i , pretitleLinesMax: l , title: m , titleLinesMax: s , subtitle: d , subtitleLinesMax: c , description: p , descriptionLinesMax: t , extra: o , actions: h , button: f , buttonLink: y , dataAttributes: S , "aria-label": C , onClose: A } = _param, u = _object_without_properties(_param, [
681
701
  "icon",
682
702
  "headline",
683
703
  "pretitle",
@@ -696,17 +716,17 @@ const ye = (r, a)=>{
696
716
  "aria-label",
697
717
  "onClose"
698
718
  ]);
699
- const g = !!r, B = h.href || h.to || h.onPress, _ = ye(m, b), E = {
719
+ const v = !!a, w = u.href || u.to || u.onPress, _ = ye(h, A), E = {
700
720
  marginRight: -16,
701
721
  marginTop: -24,
702
- width: ge * _.length
722
+ width: ve * _.length
703
723
  };
704
724
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(H, {
705
725
  dataAttributes: _object_spread({
706
726
  "component-name": "DataCard"
707
- }, A),
708
- ref: S,
709
- "aria-label": y,
727
+ }, S),
728
+ ref: T,
729
+ "aria-label": C,
710
730
  className: _cardcssmistica.touchableContainer,
711
731
  children: [
712
732
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
@@ -715,11 +735,11 @@ const ye = (r, a)=>{
715
735
  height: "100%",
716
736
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
717
737
  maybe: !0
718
- }, h), {
738
+ }, u), {
719
739
  className: _cardcssmistica.touchable,
720
- "aria-label": y,
740
+ "aria-label": C,
721
741
  children: [
722
- B && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
742
+ w && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
723
743
  className: _cardcssmistica.touchableCardOverlay
724
744
  }),
725
745
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -731,33 +751,33 @@ const ye = (r, a)=>{
731
751
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
732
752
  space: 16,
733
753
  children: [
734
- g ? r : null,
735
- /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
736
- headline: a,
737
- pretitle: n,
754
+ v ? a : null,
755
+ /* @__PURE__ */ (0, _jsxruntime.jsx)($, {
756
+ headline: r,
757
+ pretitle: i,
738
758
  pretitleLinesMax: l,
739
- title: u,
759
+ title: m,
740
760
  titleLinesMax: s,
741
- subtitle: o,
761
+ subtitle: d,
742
762
  subtitleLinesMax: c,
743
763
  description: p,
744
764
  descriptionLinesMax: t
745
765
  })
746
766
  ]
747
767
  }),
748
- !g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
768
+ !v && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
749
769
  style: E
750
770
  })
751
771
  ]
752
772
  }),
753
- d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
754
- children: d
773
+ o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
774
+ children: o
755
775
  }),
756
- (f || v) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
776
+ (f || y) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
757
777
  className: _cardcssmistica.actions,
758
778
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
759
779
  primaryButton: f,
760
- link: v
780
+ link: y
761
781
  })
762
782
  })
763
783
  ]
@@ -765,15 +785,15 @@ const ye = (r, a)=>{
765
785
  ]
766
786
  }))
767
787
  }),
768
- /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
769
- onClose: b,
770
- actions: m,
788
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(P, {
789
+ onClose: A,
790
+ actions: h,
771
791
  type: "default"
772
792
  })
773
793
  ]
774
794
  });
775
- }), Rr = /*#__PURE__*/ _react.forwardRef((_param, d)=>{
776
- var { icon: r , title: a , titleLinesMax: n , subtitle: l , subtitleLinesMax: u , dataAttributes: s , "aria-label": o , extra: c , isInverse: p = !1 } = _param, t = _object_without_properties(_param, [
795
+ }), Da = /*#__PURE__*/ _react.forwardRef((_param, o)=>{
796
+ var { icon: a , title: r , titleLinesMax: i , subtitle: l , subtitleLinesMax: m , dataAttributes: s , "aria-label": d , extra: c , isInverse: p = !1 } = _param, t = _object_without_properties(_param, [
777
797
  "icon",
778
798
  "title",
779
799
  "titleLinesMax",
@@ -784,12 +804,12 @@ const ye = (r, a)=>{
784
804
  "extra",
785
805
  "isInverse"
786
806
  ]);
787
- const m = t.href || t.to || t.onPress, f = p ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
807
+ const h = t.href || t.to || t.onPress, f = p ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
788
808
  return /* @__PURE__ */ (0, _jsxruntime.jsx)(H, {
789
809
  dataAttributes: _object_spread({
790
810
  "component-name": "SnapCard"
791
811
  }, s),
792
- ref: d,
812
+ ref: o,
793
813
  className: _cardcssmistica.touchableContainer,
794
814
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
795
815
  className: _cardcssmistica.boxed,
@@ -800,9 +820,9 @@ const ye = (r, a)=>{
800
820
  maybe: !0
801
821
  }, t), {
802
822
  className: _cardcssmistica.touchable,
803
- "aria-label": o,
823
+ "aria-label": d,
804
824
  children: [
805
- m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
825
+ h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
806
826
  className: f
807
827
  }),
808
828
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
@@ -810,22 +830,22 @@ const ye = (r, a)=>{
810
830
  children: [
811
831
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
812
832
  children: [
813
- r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
833
+ a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
814
834
  paddingBottom: 16,
815
- children: r
835
+ children: a
816
836
  }),
817
837
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
818
838
  space: 4,
819
839
  children: [
820
- a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
821
- truncate: n,
840
+ r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
841
+ truncate: i,
822
842
  as: "h3",
823
843
  regular: !0,
824
844
  hyphens: "auto",
825
- children: a
845
+ children: r
826
846
  }),
827
847
  l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
828
- truncate: u,
848
+ truncate: m,
829
849
  regular: !0,
830
850
  color: _skincontractcssmistica.vars.colors.textSecondary,
831
851
  as: "p",
@@ -845,8 +865,8 @@ const ye = (r, a)=>{
845
865
  }))
846
866
  })
847
867
  });
848
- }), Qe = 264, Te = /*#__PURE__*/ _react.forwardRef((_param, w)=>{
849
- var { isInverse: r , backgroundImage: a , backgroundVideo: n , backgroundVideoRef: l , poster: u , icon: s , headline: o , pretitle: c , pretitleLinesMax: p , title: t , titleLinesMax: d , description: m , descriptionLinesMax: f , extra: v , button: A , secondaryButton: y , onClose: b , actions: h , buttonLink: S , dataAttributes: g , width: B , height: _ , aspectRatio: E , "aria-label": G } = _param, I = _object_without_properties(_param, [
868
+ }), ea = 264, Ce = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
869
+ var { isInverse: a , backgroundImage: r , backgroundVideo: i , backgroundVideoRef: l , poster: m , icon: s , headline: d , pretitle: c , pretitleLinesMax: p , title: t , titleLinesMax: o , description: h , descriptionLinesMax: f , extra: y , button: S , secondaryButton: C , onClose: A , actions: u , buttonLink: T , dataAttributes: v , width: w , height: _ , aspectRatio: E , "aria-label": W } = _param, R = _object_without_properties(_param, [
850
870
  "isInverse",
851
871
  "backgroundImage",
852
872
  "backgroundVideo",
@@ -872,19 +892,19 @@ const ye = (r, a)=>{
872
892
  "aspectRatio",
873
893
  "aria-label"
874
894
  ]);
875
- const X = Ne(a), { video: P , videoAction: U } = Ce(n, u, l);
876
- n && (h = [
877
- U
878
- ]);
879
- const j = (0, _themevariantcontext.useIsInverseVariant)(), R = !!a || !!n, Y = R ? "0 0 16px rgba(0,0,0,0.4)" : void 0, be = (h == null ? void 0 : h.length) || b, xe = I.href || I.to || I.onPress, Ae = a || n ? _cardcssmistica.touchableCardOverlayMedia : r ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
895
+ const X = ge(r), { video: j , videoAction: F } = Ne(i, m, l);
896
+ i && (u = F ? [
897
+ F
898
+ ] : []);
899
+ const k = (0, _themevariantcontext.useIsInverseVariant)(), M = !!r || !!i, U = M ? "0 0 16px rgba(0,0,0,0.4)" : void 0, V = (u == null ? void 0 : u.length) || A, Te = R.href || R.to || R.onPress, xe = r || i ? _cardcssmistica.touchableCardOverlayMedia : a ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
880
900
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(H, {
881
- dataAttributes: g,
882
- ref: w,
883
- width: B,
901
+ dataAttributes: v,
902
+ ref: I,
903
+ width: w,
884
904
  height: _,
885
905
  aspectRatio: E,
886
- "aria-label": G,
887
- minWidth: Qe,
906
+ "aria-label": W,
907
+ minWidth: ea,
888
908
  className: _cardcssmistica.touchableContainer,
889
909
  children: [
890
910
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
@@ -892,45 +912,45 @@ const ye = (r, a)=>{
892
912
  className: _cardcssmistica.boxed,
893
913
  width: "100%",
894
914
  minHeight: "100%",
895
- isInverse: r,
896
- background: a || n ? j ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
915
+ isInverse: a,
916
+ background: r || i ? k ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
897
917
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
898
918
  maybe: !0
899
- }, I), {
919
+ }, R), {
900
920
  className: _cardcssmistica.touchable,
901
- "aria-label": G,
921
+ "aria-label": W,
902
922
  children: [
903
- xe && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
904
- className: Ae
923
+ Te && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
924
+ className: xe
905
925
  }),
906
926
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
907
927
  className: _cardcssmistica.displayCardContainer,
908
928
  children: [
909
929
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
910
- isInverse: j,
930
+ isInverse: k,
911
931
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
912
932
  className: _cardcssmistica.displayCardBackground,
913
- children: n ? P : a ? X : void 0
933
+ children: i ? j : r ? X : void 0
914
934
  })
915
935
  }),
916
936
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
917
937
  className: _cardcssmistica.displayCardContent,
918
938
  style: {
919
- paddingTop: R && !s && !be ? 0 : 24
939
+ paddingTop: M && !s && !V && !i ? 0 : 24
920
940
  },
921
941
  children: [
922
942
  s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
923
- paddingBottom: R ? 0 : 40,
943
+ paddingBottom: M ? 0 : 40,
924
944
  paddingX: 24,
925
945
  children: s
926
946
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
927
- paddingBottom: h != null && h.length || b ? R ? 24 : 64 : 0
947
+ paddingBottom: V || i ? M ? 24 : 64 : 0
928
948
  }),
929
949
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
930
950
  paddingX: 24,
931
- paddingTop: R ? 40 : 0,
951
+ paddingTop: M ? 40 : 0,
932
952
  paddingBottom: 24,
933
- className: R ? _cardcssmistica.displayCardGradient : void 0,
953
+ className: M ? _cardcssmistica.displayCardGradient : void 0,
934
954
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
935
955
  space: 24,
936
956
  children: [
@@ -939,11 +959,11 @@ const ye = (r, a)=>{
939
959
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
940
960
  space: 8,
941
961
  children: [
942
- (o || c || t) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
962
+ (d || c || t) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
943
963
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
944
964
  space: 16,
945
965
  children: [
946
- o,
966
+ d,
947
967
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
948
968
  space: 4,
949
969
  children: [
@@ -952,14 +972,14 @@ const ye = (r, a)=>{
952
972
  truncate: p,
953
973
  as: "div",
954
974
  regular: !0,
955
- textShadow: Y,
975
+ textShadow: U,
956
976
  children: c
957
977
  }),
958
978
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
959
979
  forceMobileSizes: !0,
960
- truncate: d,
980
+ truncate: o,
961
981
  as: "h3",
962
- textShadow: Y,
982
+ textShadow: U,
963
983
  hyphens: "auto",
964
984
  children: t
965
985
  })
@@ -968,25 +988,25 @@ const ye = (r, a)=>{
968
988
  ]
969
989
  })
970
990
  }),
971
- m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
991
+ h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
972
992
  forceMobileSizes: !0,
973
993
  truncate: f,
974
994
  as: "p",
975
995
  regular: !0,
976
- color: R ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
977
- textShadow: Y,
996
+ color: M ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
997
+ textShadow: U,
978
998
  hyphens: "auto",
979
- children: m
999
+ children: h
980
1000
  })
981
1001
  ]
982
1002
  }),
983
- v
1003
+ y
984
1004
  ]
985
1005
  }),
986
- (A || y || S) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
987
- primaryButton: A,
988
- secondaryButton: y,
989
- link: S
1006
+ (S || C || T) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
1007
+ primaryButton: S,
1008
+ secondaryButton: C,
1009
+ link: T
990
1010
  })
991
1011
  ]
992
1012
  })
@@ -998,36 +1018,36 @@ const ye = (r, a)=>{
998
1018
  ]
999
1019
  }))
1000
1020
  }),
1001
- /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
1002
- onClose: b,
1003
- actions: h,
1004
- type: a || n ? "media" : r ? "inverse" : "default"
1021
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(P, {
1022
+ onClose: A,
1023
+ actions: u,
1024
+ type: r || i ? "media" : a ? "inverse" : "default"
1005
1025
  })
1006
1026
  ]
1007
1027
  });
1008
- }), Mr = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
1009
- var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
1028
+ }), za = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
1029
+ var { dataAttributes: a } = _param, r = _object_without_properties(_param, [
1010
1030
  "dataAttributes"
1011
1031
  ]);
1012
- return (0, _jsxruntime.jsx)(Te, _object_spread_props(_object_spread({}, a), {
1013
- ref: n,
1032
+ return (0, _jsxruntime.jsx)(Ce, _object_spread_props(_object_spread({}, r), {
1033
+ ref: i,
1014
1034
  isInverse: !0,
1015
- dataAttributes: _object_spread_props(_object_spread({}, r), {
1035
+ dataAttributes: _object_spread_props(_object_spread({}, a), {
1016
1036
  "component-name": "DisplayMediaCard"
1017
1037
  })
1018
1038
  }));
1019
- }), Dr = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
1020
- var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
1039
+ }), Oa = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
1040
+ var { dataAttributes: a } = _param, r = _object_without_properties(_param, [
1021
1041
  "dataAttributes"
1022
1042
  ]);
1023
- return (0, _jsxruntime.jsx)(Te, _object_spread_props(_object_spread({}, a), {
1024
- ref: n,
1025
- dataAttributes: _object_spread_props(_object_spread({}, r), {
1043
+ return (0, _jsxruntime.jsx)(Ce, _object_spread_props(_object_spread({}, r), {
1044
+ ref: i,
1045
+ dataAttributes: _object_spread_props(_object_spread({}, a), {
1026
1046
  "component-name": "DisplayDataCard"
1027
1047
  })
1028
1048
  }));
1029
- }), Ve = 140, zr = /*#__PURE__*/ _react.forwardRef((_param, B)=>{
1030
- var { dataAttributes: r , backgroundImage: a , backgroundVideo: n , poster: l , backgroundVideoRef: u , width: s , height: o , aspectRatio: c = "7:10" , ariaLabel: p , actions: t , onClose: d , icon: m , headline: f , pretitle: v , pretitleLinesMax: A , title: y , titleLinesMax: b , description: h , descriptionLinesMax: S } = _param, g = _object_without_properties(_param, [
1049
+ }), aa = 140, Ha = /*#__PURE__*/ _react.forwardRef((_param, w)=>{
1050
+ var { dataAttributes: a , backgroundImage: r , backgroundVideo: i , poster: l , backgroundVideoRef: m , width: s , height: d , aspectRatio: c = "7:10" , ariaLabel: p , actions: t , onClose: o , icon: h , headline: f , pretitle: y , pretitleLinesMax: S , title: C , titleLinesMax: A , description: u , descriptionLinesMax: T } = _param, v = _object_without_properties(_param, [
1031
1051
  "dataAttributes",
1032
1052
  "backgroundImage",
1033
1053
  "backgroundVideo",
@@ -1048,19 +1068,19 @@ const ye = (r, a)=>{
1048
1068
  "description",
1049
1069
  "descriptionLinesMax"
1050
1070
  ]);
1051
- const _ = Ne(a), { video: E , videoAction: G } = Ce(n, l, u);
1052
- n && (t = [
1053
- G
1054
- ]);
1055
- const I = (0, _themevariantcontext.useIsInverseVariant)(), w = !!a || !!n, X = w ? "0 0 16px rgba(0,0,0,0.4)" : void 0, P = (t == null ? void 0 : t.length) || d, { textPresets: U } = (0, _hooks.useTheme)(), j = g.href || g.to || g.onPress;
1071
+ const _ = ge(r), { video: E , videoAction: W } = Ne(i, l, m);
1072
+ i && (t = W ? [
1073
+ W
1074
+ ] : []);
1075
+ const R = (0, _themevariantcontext.useIsInverseVariant)(), I = !!r || !!i, X = I ? "0 0 16px rgba(0,0,0,0.4)" : void 0, j = (t == null ? void 0 : t.length) || o, { textPresets: F } = (0, _hooks.useTheme)(), k = v.href || v.to || v.onPress;
1056
1076
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(H, {
1057
1077
  width: s,
1058
- height: o,
1059
- dataAttributes: _object_spread_props(_object_spread({}, r), {
1078
+ height: d,
1079
+ dataAttributes: _object_spread_props(_object_spread({}, a), {
1060
1080
  "component-name": "PosterCard"
1061
1081
  }),
1062
- ref: B,
1063
- minWidth: Ve,
1082
+ ref: w,
1083
+ minWidth: aa,
1064
1084
  aspectRatio: c,
1065
1085
  "aria-label": p,
1066
1086
  className: _cardcssmistica.touchableContainer,
@@ -1071,51 +1091,51 @@ const ye = (r, a)=>{
1071
1091
  width: "100%",
1072
1092
  minHeight: "100%",
1073
1093
  isInverse: !0,
1074
- background: a || n ? I ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
1094
+ background: r || i ? R ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
1075
1095
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
1076
1096
  maybe: !0
1077
- }, g), {
1097
+ }, v), {
1078
1098
  className: _cardcssmistica.touchable,
1079
1099
  "aria-label": p,
1080
1100
  children: [
1081
- j && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1101
+ k && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1082
1102
  className: _cardcssmistica.touchableCardOverlayMedia
1083
1103
  }),
1084
1104
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
1085
1105
  className: _cardcssmistica.displayCardContainer,
1086
1106
  children: [
1087
1107
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
1088
- isInverse: I,
1108
+ isInverse: R,
1089
1109
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1090
1110
  className: _cardcssmistica.displayCardBackground,
1091
- children: n ? E : a ? _ : void 0
1111
+ children: i ? E : r ? _ : void 0
1092
1112
  })
1093
1113
  }),
1094
1114
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
1095
1115
  className: _cardcssmistica.displayCardContent,
1096
1116
  style: {
1097
- paddingTop: w && !m && !P ? 0 : 24
1117
+ paddingTop: I && !h && !j && !i ? 0 : 24
1098
1118
  },
1099
1119
  children: [
1100
- m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1101
- paddingBottom: w ? 0 : 40,
1120
+ h ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1121
+ paddingBottom: I ? 0 : 40,
1102
1122
  paddingX: 24,
1103
- children: m
1123
+ children: h
1104
1124
  }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1105
- paddingBottom: t != null && t.length || d ? w ? 24 : 64 : 0
1125
+ paddingBottom: j || i ? I ? 24 : 64 : 0
1106
1126
  }),
1107
1127
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
1108
1128
  paddingX: 16,
1109
- paddingTop: w ? 40 : 0,
1129
+ paddingTop: I ? 40 : 0,
1110
1130
  paddingBottom: 24,
1111
- className: w ? _cardcssmistica.displayCardGradient : void 0,
1131
+ className: I ? _cardcssmistica.displayCardGradient : void 0,
1112
1132
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
1113
1133
  space: 24,
1114
1134
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
1115
1135
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
1116
1136
  space: 8,
1117
1137
  children: [
1118
- (f || v || y) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
1138
+ (f || y || C) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
1119
1139
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
1120
1140
  space: 16,
1121
1141
  children: [
@@ -1123,39 +1143,39 @@ const ye = (r, a)=>{
1123
1143
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
1124
1144
  space: 4,
1125
1145
  children: [
1126
- v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1146
+ y && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1127
1147
  forceMobileSizes: !0,
1128
- truncate: A,
1148
+ truncate: S,
1129
1149
  as: "div",
1130
1150
  regular: !0,
1131
1151
  textShadow: X,
1132
1152
  hyphens: "auto",
1133
- children: v
1153
+ children: y
1134
1154
  }),
1135
1155
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
1136
1156
  desktopSize: 20,
1137
1157
  mobileSize: 18,
1138
1158
  mobileLineHeight: "24px",
1139
1159
  desktopLineHeight: "28px",
1140
- truncate: b,
1141
- weight: U.cardTitle.weight,
1160
+ truncate: A,
1161
+ weight: F.cardTitle.weight,
1142
1162
  as: "h3",
1143
1163
  hyphens: "auto",
1144
- children: y
1164
+ children: C
1145
1165
  })
1146
1166
  ]
1147
1167
  })
1148
1168
  ]
1149
1169
  })
1150
1170
  }),
1151
- h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1171
+ u && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
1152
1172
  forceMobileSizes: !0,
1153
- truncate: S,
1173
+ truncate: T,
1154
1174
  as: "p",
1155
1175
  regular: !0,
1156
1176
  textShadow: X,
1157
1177
  hyphens: "auto",
1158
- children: h
1178
+ children: u
1159
1179
  })
1160
1180
  ]
1161
1181
  })
@@ -1169,8 +1189,8 @@ const ye = (r, a)=>{
1169
1189
  ]
1170
1190
  }))
1171
1191
  }),
1172
- /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
1173
- onClose: d,
1192
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(P, {
1193
+ onClose: o,
1174
1194
  actions: t,
1175
1195
  type: "media"
1176
1196
  })