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