@telefonica/mistica 14.4.1 → 14.6.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 (33) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/avatar.d.ts +1 -0
  3. package/dist/avatar.js +20 -18
  4. package/dist/button.css-mistica.js +1 -1
  5. package/dist/button.css.d.ts +1 -1
  6. package/dist/card.d.ts +19 -0
  7. package/dist/card.js +268 -158
  8. package/dist/carousel.js +116 -115
  9. package/dist/highlighted-card.js +2 -0
  10. package/dist/index.d.ts +1 -1
  11. package/dist/index.js +1 -0
  12. package/dist/list.css-mistica.js +9 -8
  13. package/dist/list.css.d.ts +1 -0
  14. package/dist/list.d.ts +1 -0
  15. package/dist/list.js +126 -89
  16. package/dist/package-version.js +1 -1
  17. package/dist/progress-bar.css-mistica.js +5 -3
  18. package/dist/progress-bar.css.d.ts +2 -0
  19. package/dist/progress-bar.d.ts +1 -0
  20. package/dist/progress-bar.js +12 -6
  21. package/dist-es/avatar.js +28 -26
  22. package/dist-es/button.css-mistica.js +1 -1
  23. package/dist-es/card.js +322 -213
  24. package/dist-es/carousel.js +164 -163
  25. package/dist-es/highlighted-card.js +9 -7
  26. package/dist-es/index.js +1703 -1703
  27. package/dist-es/list.css-mistica.js +2 -2
  28. package/dist-es/list.js +191 -154
  29. package/dist-es/package-version.js +1 -1
  30. package/dist-es/progress-bar.css-mistica.js +2 -2
  31. package/dist-es/progress-bar.js +13 -12
  32. package/dist-es/style.css +1 -1
  33. package/package.json +2 -2
package/dist/card.js CHANGED
@@ -9,11 +9,12 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
- DataCard: ()=>De,
13
- DisplayDataCard: ()=>Me,
14
- DisplayMediaCard: ()=>Ie,
15
- MediaCard: ()=>we,
16
- SnapCard: ()=>Re
12
+ DataCard: ()=>He,
13
+ DisplayDataCard: ()=>ze,
14
+ DisplayMediaCard: ()=>Me,
15
+ MediaCard: ()=>De,
16
+ PosterCard: ()=>_e,
17
+ SnapCard: ()=>Ie
17
18
  });
18
19
  const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
19
20
  const _tagJs = /*#__PURE__*/ _interopRequireDefault(require("./tag.js"));
@@ -155,78 +156,80 @@ function _objectWithoutPropertiesLoose(source, excluded) {
155
156
  }
156
157
  return target;
157
158
  }
158
- const W = (param)=>/* @__PURE__ */ {
159
- let { actions: r , isInverse: a } = param;
159
+ const O = (param)=>/* @__PURE__ */ {
160
+ let { actions: a , isInverse: r } = param;
160
161
  return (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
161
162
  space: 0,
162
- children: r.map((param, c)=>/* @__PURE__ */ {
163
- let { onPress: i , label: t , Icon: o } = param;
163
+ children: a.map((param, o)=>/* @__PURE__ */ {
164
+ let { onPress: t , label: n , Icon: l } = param;
164
165
  return (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
165
166
  size: 48,
166
- onPress: i,
167
- "aria-label": t,
167
+ onPress: t,
168
+ "aria-label": n,
168
169
  className: _cardCssMisticaJs.cardActionIconButton,
169
170
  style: {
170
171
  display: "flex"
171
172
  },
172
173
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
173
- className: a ? _cardCssMisticaJs.cardActionInverse : _cardCssMisticaJs.cardAction,
174
- children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(o, {
174
+ className: r ? _cardCssMisticaJs.cardActionInverse : _cardCssMisticaJs.cardAction,
175
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(l, {
175
176
  color: _skinContractCssMisticaJs.vars.colors.neutralHigh,
176
177
  size: 20
177
178
  })
178
179
  })
179
- }, c);
180
+ }, o);
180
181
  })
181
182
  });
182
- }, P = (r, a)=>{
183
- const { texts: i } = (0, _hooksJs.useTheme)(), t = r ? [
184
- ...r
183
+ }, L = (a, r)=>{
184
+ const { texts: t } = (0, _hooksJs.useTheme)(), n = a ? [
185
+ ...a
185
186
  ] : [];
186
- return a && t.push({
187
- label: i.closeButtonLabel,
188
- onPress: a,
187
+ return r && n.push({
188
+ label: t.closeButtonLabel,
189
+ onPress: r,
189
190
  Icon: _iconCloseRegularJs.default
190
- }), t;
191
- }, se = {
191
+ }), n;
192
+ }, le = {
192
193
  "1:1": "1",
193
194
  "16:9": "16 / 9",
194
195
  "7:10": "7 / 10",
195
196
  "9:10": "9 / 10",
196
197
  auto: "auto"
197
- }, X = (param)=>{
198
- let { children: r , width: a = "100%" , height: i = "100%" , aspectRatio: t , actions: o , onClose: c , isInverse: p , "aria-label": s } = param;
199
- const l = P(o, c), d = l.length > 0, h = t ? typeof t == "number" ? String(t) : se[t] : void 0;
198
+ }, G = (param)=>{
199
+ let { children: a , width: r = "100%" , height: t = "100%" , minWidth: n , minHeight: l , aspectRatio: o , actions: d , onClose: h , isInverse: p , "aria-label": s } = param;
200
+ const c = L(d, h), m = c.length > 0, u = o ? typeof o == "number" ? String(o) : le[o] : void 0;
200
201
  return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
201
202
  "aria-label": s,
202
203
  style: {
203
- width: a,
204
- height: i,
205
- aspectRatio: h,
204
+ width: r,
205
+ height: t,
206
+ minWidth: n,
207
+ minHeight: l,
208
+ aspectRatio: u,
206
209
  position: "relative"
207
210
  },
208
211
  children: [
209
- r,
210
- d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
212
+ a,
213
+ m && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
211
214
  style: {
212
215
  position: "absolute",
213
216
  right: 8,
214
217
  top: 8,
215
218
  zIndex: 2
216
219
  },
217
- children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(W, {
218
- actions: l,
220
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(O, {
221
+ actions: c,
219
222
  isInverse: p
220
223
  })
221
224
  })
222
225
  ]
223
226
  });
224
- }, _ = (param)=>{
225
- let { headline: r , pretitle: a , pretitleLinesMax: i , title: t , titleLinesMax: o , subtitle: c , subtitleLinesMax: p , description: s , descriptionLinesMax: l , extra: d , button: h , buttonLink: m } = param;
226
- const { textPresets: u } = (0, _hooksJs.useTheme)(), g = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_tagJs.default, {
227
+ }, $ = (param)=>{
228
+ let { headline: a , pretitle: r , pretitleLinesMax: t , title: n , titleLinesMax: l , subtitle: o , subtitleLinesMax: d , description: h , descriptionLinesMax: p , extra: s , button: c , buttonLink: m } = param;
229
+ const { textPresets: u } = (0, _hooksJs.useTheme)(), y = ()=>a ? typeof a == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_tagJs.default, {
227
230
  type: "promo",
228
- children: r
229
- }) : r : null;
231
+ children: a
232
+ }) : a : null;
230
233
  return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
231
234
  className: (0, _sprinklesCssMisticaJs.sprinkles)({
232
235
  display: "flex",
@@ -240,77 +243,81 @@ const W = (param)=>/* @__PURE__ */ {
240
243
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
241
244
  space: 8,
242
245
  children: [
243
- (r || a || t || c) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
246
+ (a || r || n || o) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
244
247
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
245
248
  space: 8,
246
249
  children: [
247
- g(),
250
+ y(),
248
251
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
249
252
  space: 4,
250
253
  children: [
251
- a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
252
- truncate: i,
254
+ r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
255
+ truncate: t,
253
256
  as: "div",
254
257
  regular: !0,
255
- children: a
258
+ hyphens: "auto",
259
+ children: r
256
260
  }),
257
261
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text, {
258
262
  mobileSize: 18,
259
263
  mobileLineHeight: "24px",
260
264
  desktopSize: 20,
261
265
  desktopLineHeight: "28px",
262
- truncate: o,
266
+ truncate: l,
263
267
  weight: u.cardTitle.weight,
264
268
  as: "h3",
265
- children: t
269
+ hyphens: "auto",
270
+ children: n
266
271
  }),
267
272
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
268
- truncate: p,
273
+ truncate: d,
269
274
  as: "div",
270
275
  regular: !0,
271
- children: c
276
+ hyphens: "auto",
277
+ children: o
272
278
  })
273
279
  ]
274
280
  })
275
281
  ]
276
282
  })
277
283
  }),
278
- s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
279
- truncate: l,
284
+ h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
285
+ truncate: p,
280
286
  as: "p",
281
287
  regular: !0,
282
288
  color: _skinContractCssMisticaJs.vars.colors.textSecondary,
283
- children: s
289
+ hyphens: "auto",
290
+ children: h
284
291
  })
285
292
  ]
286
293
  }),
287
- d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
288
- children: d
294
+ s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
295
+ children: s
289
296
  })
290
297
  ]
291
298
  }),
292
- (h || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
299
+ (c || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
293
300
  className: _cardCssMisticaJs.actions,
294
301
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
295
- primaryButton: h,
302
+ primaryButton: c,
296
303
  link: m
297
304
  })
298
305
  })
299
306
  ]
300
307
  });
301
- }, we = /*#__PURE__*/ _react.forwardRef((param, S)=>/* @__PURE__ */ {
302
- let { media: r , headline: a , pretitle: i , pretitleLinesMax: t , subtitle: o , subtitleLinesMax: c , title: p , titleLinesMax: s , description: l , descriptionLinesMax: d , extra: h , actions: m , button: u , buttonLink: g , dataAttributes: f , "aria-label": C , onClose: A } = param;
303
- return (0, _jsxRuntimeJs.jsx)(X, {
304
- onClose: A,
308
+ }, De = /*#__PURE__*/ _react.forwardRef((param, v)=>/* @__PURE__ */ {
309
+ let { media: a , headline: r , pretitle: t , pretitleLinesMax: n , subtitle: l , subtitleLinesMax: o , title: d , titleLinesMax: h , description: p , descriptionLinesMax: s , extra: c , actions: m , button: u , buttonLink: y , dataAttributes: f , "aria-label": b , onClose: S } = param;
310
+ return (0, _jsxRuntimeJs.jsx)(G, {
311
+ onClose: S,
305
312
  actions: m,
306
- "aria-label": C,
313
+ "aria-label": b,
307
314
  isInverse: !0,
308
315
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
309
316
  className: _cardCssMisticaJs.boxed,
310
317
  dataAttributes: _objectSpread({
311
318
  "component-name": "MediaCard"
312
319
  }, f),
313
- ref: S,
320
+ ref: v,
314
321
  width: "100%",
315
322
  height: "100%",
316
323
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
@@ -318,42 +325,42 @@ const W = (param)=>/* @__PURE__ */ {
318
325
  children: [
319
326
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.MediaBorderRadiusProvider, {
320
327
  value: !1,
321
- children: r
328
+ children: a
322
329
  }),
323
330
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
324
331
  className: _cardCssMisticaJs.mediaCardContent,
325
- children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_, {
326
- headline: a,
327
- pretitle: i,
328
- pretitleLinesMax: t,
329
- title: p,
330
- titleLinesMax: s,
331
- subtitle: o,
332
- subtitleLinesMax: c,
333
- description: l,
334
- descriptionLinesMax: d,
335
- extra: h,
332
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)($, {
333
+ headline: r,
334
+ pretitle: t,
335
+ pretitleLinesMax: n,
336
+ title: d,
337
+ titleLinesMax: h,
338
+ subtitle: l,
339
+ subtitleLinesMax: o,
340
+ description: p,
341
+ descriptionLinesMax: s,
342
+ extra: c,
336
343
  button: u,
337
- buttonLink: g
344
+ buttonLink: y
338
345
  })
339
346
  })
340
347
  ]
341
348
  })
342
349
  })
343
350
  });
344
- }), De = /*#__PURE__*/ _react.forwardRef((param, S)=>{
345
- let { icon: r , headline: a , pretitle: i , pretitleLinesMax: t , title: o , titleLinesMax: c , subtitle: p , subtitleLinesMax: s , description: l , descriptionLinesMax: d , extra: h , actions: m , button: u , buttonLink: g , dataAttributes: f , "aria-label": C , onClose: A } = param;
346
- const N = P(m, A), R = N.length > 0, B = !!r, I = {
351
+ }), He = /*#__PURE__*/ _react.forwardRef((param, v)=>{
352
+ let { icon: a , headline: r , pretitle: t , pretitleLinesMax: n , title: l , titleLinesMax: o , subtitle: d , subtitleLinesMax: h , description: p , descriptionLinesMax: s , extra: c , actions: m , button: u , buttonLink: y , dataAttributes: f , "aria-label": b , onClose: S } = param;
353
+ const T = L(m, S), R = T.length > 0, w = !!a, I = {
347
354
  position: "absolute",
348
355
  top: 8,
349
356
  right: 8,
350
357
  zIndex: 2
351
- }, y = {
358
+ }, x = {
352
359
  marginRight: -8,
353
360
  marginTop: -16
354
361
  };
355
362
  return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", {
356
- "aria-label": C,
363
+ "aria-label": b,
357
364
  style: {
358
365
  height: "100%",
359
366
  position: "relative"
@@ -363,7 +370,7 @@ const W = (param)=>/* @__PURE__ */ {
363
370
  dataAttributes: _objectSpread({
364
371
  "component-name": "DataCard"
365
372
  }, f),
366
- ref: S,
373
+ ref: v,
367
374
  width: "100%",
368
375
  height: "100%",
369
376
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
@@ -380,44 +387,44 @@ const W = (param)=>/* @__PURE__ */ {
380
387
  flex: 1
381
388
  }),
382
389
  children: [
383
- B ? r : null,
384
- /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_, {
385
- headline: a,
386
- pretitle: i,
387
- pretitleLinesMax: t,
388
- title: o,
389
- titleLinesMax: c,
390
- subtitle: p,
391
- subtitleLinesMax: s,
392
- description: l,
393
- descriptionLinesMax: d
390
+ w ? a : null,
391
+ /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)($, {
392
+ headline: r,
393
+ pretitle: t,
394
+ pretitleLinesMax: n,
395
+ title: l,
396
+ titleLinesMax: o,
397
+ subtitle: d,
398
+ subtitleLinesMax: h,
399
+ description: p,
400
+ descriptionLinesMax: s
394
401
  })
395
402
  ]
396
403
  }),
397
404
  R && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
398
- style: B ? I : y,
399
- children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(W, {
400
- actions: N
405
+ style: w ? I : x,
406
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(O, {
407
+ actions: T
401
408
  })
402
409
  })
403
410
  ]
404
411
  }),
405
- h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
406
- children: h
412
+ c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
413
+ children: c
407
414
  }),
408
- (u || g) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
415
+ (u || y) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
409
416
  className: _cardCssMisticaJs.actions,
410
417
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
411
418
  primaryButton: u,
412
- link: g
419
+ link: y
413
420
  })
414
421
  })
415
422
  ]
416
423
  })
417
424
  })
418
425
  });
419
- }), Re = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
420
- var { icon: r , title: a , titleLinesMax: i , subtitle: t , subtitleLinesMax: o , dataAttributes: c , "aria-label": p , extra: s , isInverse: l = !1 } = _param, d = _objectWithoutProperties(_param, [
426
+ }), Ie = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
427
+ var { icon: a , title: r , titleLinesMax: t , subtitle: n , subtitleLinesMax: l , dataAttributes: o , "aria-label": d , extra: h , isInverse: p = !1 } = _param, s = _objectWithoutProperties(_param, [
421
428
  "icon",
422
429
  "title",
423
430
  "titleLinesMax",
@@ -428,96 +435,98 @@ const W = (param)=>/* @__PURE__ */ {
428
435
  "extra",
429
436
  "isInverse"
430
437
  ]);
431
- const { isDarkMode: m } = (0, _hooksJs.useTheme)(), u = Boolean(d.to || d.href || d.onPress);
438
+ const { isDarkMode: m } = (0, _hooksJs.useTheme)(), u = Boolean(s.to || s.href || s.onPress);
432
439
  return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
433
440
  className: _cardCssMisticaJs.boxed,
434
441
  dataAttributes: _objectSpread({
435
442
  "component-name": "SnapCard"
436
- }, c),
437
- ref: h,
438
- isInverse: l,
443
+ }, o),
444
+ ref: c,
445
+ isInverse: p,
439
446
  width: "100%",
440
447
  height: "100%",
441
448
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({
442
449
  maybe: !0
443
- }, d), {
444
- className: u && !l && !m ? _cardCssMisticaJs.snapCardTouchableHover : _cardCssMisticaJs.snapCardTouchableHoverTransparent,
445
- "aria-label": p,
450
+ }, s), {
451
+ className: u && !p && !m ? _cardCssMisticaJs.snapCardTouchableHover : _cardCssMisticaJs.snapCardTouchableHoverTransparent,
452
+ "aria-label": d,
446
453
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
447
454
  className: _cardCssMisticaJs.snapCard,
448
455
  children: [
449
456
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
450
457
  children: [
451
- r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
458
+ a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
452
459
  paddingBottom: 16,
453
- children: r
460
+ children: a
454
461
  }),
455
462
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
456
463
  space: 4,
457
464
  children: [
458
- a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
459
- truncate: i,
465
+ r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
466
+ truncate: t,
460
467
  as: "h3",
461
468
  regular: !0,
462
- children: a
469
+ hyphens: "auto",
470
+ children: r
463
471
  }),
464
- t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
465
- truncate: o,
472
+ n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
473
+ truncate: l,
466
474
  regular: !0,
467
475
  color: _skinContractCssMisticaJs.vars.colors.textSecondary,
468
476
  as: "p",
469
- children: t
477
+ hyphens: "auto",
478
+ children: n
470
479
  })
471
480
  ]
472
481
  })
473
482
  ]
474
483
  }),
475
- s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
476
- children: s
484
+ h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
485
+ children: h
477
486
  })
478
487
  ]
479
488
  })
480
489
  }))
481
490
  });
482
- }), E = /*#__PURE__*/ _react.forwardRef((param, I)=>{
483
- let { isInverse: r , backgroundImage: a , icon: i , headline: t , pretitle: o , pretitleLinesMax: c , title: p , titleLinesMax: s , description: l , descriptionLinesMax: d , extra: h , button: m , secondaryButton: u , onClose: g , actions: f , buttonLink: C , dataAttributes: A , width: S , height: N , aspectRatio: R , "aria-label": B } = param;
484
- const y = !!a, M = y ? "0 0 16px rgba(0,0,0,0.4)" : void 0, O = (f == null ? void 0 : f.length) || g;
485
- return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(X, {
486
- width: S,
487
- height: N,
491
+ }), q = /*#__PURE__*/ _react.forwardRef((param, I)=>{
492
+ let { isInverse: a , backgroundImage: r , icon: t , headline: n , pretitle: l , pretitleLinesMax: o , title: d , titleLinesMax: h , description: p , descriptionLinesMax: s , extra: c , button: m , secondaryButton: u , onClose: y , actions: f , buttonLink: b , dataAttributes: S , width: v , height: T , aspectRatio: R , "aria-label": w } = param;
493
+ const x = !!r, M = x ? "0 0 16px rgba(0,0,0,0.4)" : void 0, F = (f == null ? void 0 : f.length) || y;
494
+ return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(G, {
495
+ width: v,
496
+ height: T,
488
497
  aspectRatio: R,
489
- onClose: g,
498
+ onClose: y,
490
499
  actions: f,
491
- "aria-label": B,
492
- isInverse: r,
500
+ "aria-label": w,
501
+ isInverse: a,
493
502
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.InternalBoxed, {
494
503
  borderRadius: 16,
495
504
  className: _cardCssMisticaJs.boxed,
496
- dataAttributes: A,
505
+ dataAttributes: S,
497
506
  ref: I,
498
507
  width: "100%",
499
508
  minHeight: "100%",
500
- isInverse: r,
501
- background: r && a ? _skinContractCssMisticaJs.vars.colors.backgroundContainer : void 0,
509
+ isInverse: a,
510
+ background: a && r ? _skinContractCssMisticaJs.vars.colors.backgroundContainer : void 0,
502
511
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
503
512
  className: _cardCssMisticaJs.displayCard,
504
513
  style: {
505
- backgroundImage: a ? `url("${CSS.escape(a)}")` : void 0,
506
- paddingTop: y && !i && !O ? 0 : 24
514
+ backgroundImage: r ? `url("${CSS.escape(r)}")` : void 0,
515
+ paddingTop: x && !t && !F ? 0 : 24
507
516
  },
508
517
  children: [
509
- i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
510
- paddingBottom: y ? 0 : 40,
518
+ t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
519
+ paddingBottom: x ? 0 : 40,
511
520
  paddingX: 24,
512
- children: i
521
+ children: t
513
522
  }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
514
- paddingBottom: (f == null ? void 0 : f.length) || g ? y ? 24 : 64 : 0
523
+ paddingBottom: (f == null ? void 0 : f.length) || y ? x ? 24 : 64 : 0
515
524
  }),
516
525
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
517
526
  paddingX: 24,
518
- paddingTop: y ? 40 : 0,
527
+ paddingTop: x ? 40 : 0,
519
528
  paddingBottom: 24,
520
- className: y ? _cardCssMisticaJs.displayCardGradient : void 0,
529
+ className: x ? _cardCssMisticaJs.displayCardGradient : void 0,
521
530
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
522
531
  space: 24,
523
532
  children: [
@@ -526,52 +535,55 @@ const W = (param)=>/* @__PURE__ */ {
526
535
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
527
536
  space: 8,
528
537
  children: [
529
- (t || o || p) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
538
+ (n || l || d) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
530
539
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
531
540
  space: 16,
532
541
  children: [
533
- t,
542
+ n,
534
543
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
535
544
  space: 4,
536
545
  children: [
537
- o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
546
+ l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
538
547
  forceMobileSizes: !0,
539
- truncate: c,
548
+ truncate: o,
540
549
  as: "div",
541
550
  regular: !0,
542
551
  textShadow: M,
543
- children: o
552
+ hyphens: "auto",
553
+ children: l
544
554
  }),
545
555
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
546
556
  forceMobileSizes: !0,
547
- truncate: s,
557
+ truncate: h,
548
558
  as: "h3",
549
559
  textShadow: M,
550
- children: p
560
+ hyphens: "auto",
561
+ children: d
551
562
  })
552
563
  ]
553
564
  })
554
565
  ]
555
566
  })
556
567
  }),
557
- l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
568
+ p && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
558
569
  forceMobileSizes: !0,
559
- truncate: d,
570
+ truncate: s,
560
571
  as: "p",
561
572
  regular: !0,
562
573
  color: _skinContractCssMisticaJs.vars.colors.textSecondary,
563
574
  textShadow: M,
564
- children: l
575
+ hyphens: "auto",
576
+ children: p
565
577
  })
566
578
  ]
567
579
  }),
568
- h
580
+ c
569
581
  ]
570
582
  }),
571
- (m || u || C) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
583
+ (m || u || b) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
572
584
  primaryButton: m,
573
585
  secondaryButton: u,
574
- link: C
586
+ link: b
575
587
  })
576
588
  ]
577
589
  })
@@ -580,25 +592,123 @@ const W = (param)=>/* @__PURE__ */ {
580
592
  })
581
593
  })
582
594
  });
583
- }), Ie = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
584
- var { dataAttributes: r } = _param, a = _objectWithoutProperties(_param, [
595
+ }), Me = /*#__PURE__*/ _react.forwardRef((_param, t)=>/* @__PURE__ */ {
596
+ var { dataAttributes: a } = _param, r = _objectWithoutProperties(_param, [
585
597
  "dataAttributes"
586
598
  ]);
587
- return (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, a), {
588
- ref: i,
599
+ return (0, _jsxRuntimeJs.jsx)(q, _objectSpreadProps(_objectSpread({}, r), {
600
+ ref: t,
589
601
  isInverse: !0,
590
- dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
602
+ dataAttributes: _objectSpreadProps(_objectSpread({}, a), {
591
603
  "component-name": "DisplayMediaCard"
592
604
  })
593
605
  }));
594
- }), Me = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
595
- var { dataAttributes: r } = _param, a = _objectWithoutProperties(_param, [
606
+ }), ze = /*#__PURE__*/ _react.forwardRef((_param, t)=>/* @__PURE__ */ {
607
+ var { dataAttributes: a } = _param, r = _objectWithoutProperties(_param, [
596
608
  "dataAttributes"
597
609
  ]);
598
- return (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, a), {
599
- ref: i,
600
- dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
610
+ return (0, _jsxRuntimeJs.jsx)(q, _objectSpreadProps(_objectSpread({}, r), {
611
+ ref: t,
612
+ dataAttributes: _objectSpreadProps(_objectSpread({}, a), {
601
613
  "component-name": "DisplayDataCard"
602
614
  })
603
615
  }));
616
+ }), he = 140, pe = 112, _e = /*#__PURE__*/ _react.forwardRef((param, S)=>{
617
+ let { dataAttributes: a , backgroundImage: r , width: t , height: n , aspectRatio: l = "7:10" , ariaLabel: o , actions: d , onClose: h , icon: p , headline: s , pretitle: c , pretitleLinesMax: m , title: u , titleLinesMax: y , description: f , descriptionLinesMax: b } = param;
618
+ const v = !!r, T = v ? "0 0 16px rgba(0,0,0,0.4)" : void 0, R = (d == null ? void 0 : d.length) || h, { textPresets: w } = (0, _hooksJs.useTheme)();
619
+ return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(G, {
620
+ width: t,
621
+ height: n,
622
+ minWidth: he,
623
+ minHeight: pe,
624
+ aspectRatio: l,
625
+ onClose: h,
626
+ actions: d,
627
+ "aria-label": o,
628
+ isInverse: !0,
629
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.InternalBoxed, {
630
+ borderRadius: 16,
631
+ className: _cardCssMisticaJs.boxed,
632
+ dataAttributes: a,
633
+ ref: S,
634
+ width: "100%",
635
+ minHeight: "100%",
636
+ isInverse: !0,
637
+ background: r ? _skinContractCssMisticaJs.vars.colors.backgroundContainer : void 0,
638
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
639
+ className: _cardCssMisticaJs.displayCard,
640
+ style: {
641
+ backgroundImage: r ? `url("${CSS.escape(r)}")` : void 0,
642
+ paddingTop: v && !p && !R ? 0 : 24
643
+ },
644
+ children: [
645
+ p ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
646
+ paddingBottom: v ? 0 : 40,
647
+ paddingX: 24,
648
+ children: p
649
+ }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
650
+ paddingBottom: (d == null ? void 0 : d.length) || h ? v ? 24 : 64 : 0
651
+ }),
652
+ /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
653
+ paddingX: 16,
654
+ paddingTop: v ? 40 : 0,
655
+ paddingBottom: 24,
656
+ className: v ? _cardCssMisticaJs.displayCardGradient : void 0,
657
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
658
+ space: 24,
659
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
660
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
661
+ space: 8,
662
+ children: [
663
+ (s || c || u) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
664
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
665
+ space: 16,
666
+ children: [
667
+ s,
668
+ /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
669
+ space: 4,
670
+ children: [
671
+ c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
672
+ forceMobileSizes: !0,
673
+ truncate: m,
674
+ as: "div",
675
+ regular: !0,
676
+ textShadow: T,
677
+ hyphens: "auto",
678
+ children: c
679
+ }),
680
+ /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text, {
681
+ desktopSize: 20,
682
+ mobileSize: 18,
683
+ mobileLineHeight: "24px",
684
+ desktopLineHeight: "28px",
685
+ truncate: y,
686
+ weight: w.cardTitle.weight,
687
+ as: "h3",
688
+ hyphens: "auto",
689
+ children: u
690
+ })
691
+ ]
692
+ })
693
+ ]
694
+ })
695
+ }),
696
+ f && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
697
+ forceMobileSizes: !0,
698
+ truncate: b,
699
+ as: "p",
700
+ regular: !0,
701
+ textShadow: T,
702
+ hyphens: "auto",
703
+ children: f
704
+ })
705
+ ]
706
+ })
707
+ })
708
+ })
709
+ })
710
+ ]
711
+ })
712
+ })
713
+ });
604
714
  });