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