@telefonica/mistica 14.4.1 → 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 +247 -149
  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 +300 -203
  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: ()=>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: 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
- }, 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: 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: 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: 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
- d && /* @__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: 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: 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,77 +243,77 @@ 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
+ 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: c
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
  }),
287
- d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
288
- children: d
290
+ c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
291
+ children: c
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
- }, 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,
305
- actions: m,
306
- "aria-label": C,
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,
309
+ "aria-label": x,
307
310
  isInverse: !0,
308
311
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
309
312
  className: _cardCssMisticaJs.boxed,
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: c,
333
- description: l,
334
- descriptionLinesMax: d,
335
- extra: h,
336
- button: u,
337
- buttonLink: g
331
+ pretitleLinesMax: n,
332
+ title: d,
333
+ titleLinesMax: h,
334
+ subtitle: s,
335
+ subtitleLinesMax: o,
336
+ description: p,
337
+ descriptionLinesMax: c,
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: 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 = {
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,
@@ -353,7 +356,7 @@ const W = (param)=>/* @__PURE__ */ {
353
356
  marginTop: -16
354
357
  };
355
358
  return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", {
356
- "aria-label": C,
359
+ "aria-label": x,
357
360
  style: {
358
361
  height: "100%",
359
362
  position: "relative"
@@ -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", {
@@ -380,44 +383,44 @@ const W = (param)=>/* @__PURE__ */ {
380
383
  flex: 1
381
384
  }),
382
385
  children: [
383
- B ? r : null,
384
- /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_, {
385
- headline: a,
386
+ w ? a : null,
387
+ /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)($, {
388
+ headline: r,
386
389
  pretitle: i,
387
- pretitleLinesMax: t,
388
- title: o,
389
- titleLinesMax: c,
390
- subtitle: p,
391
- subtitleLinesMax: s,
392
- description: l,
393
- descriptionLinesMax: d
390
+ pretitleLinesMax: n,
391
+ title: s,
392
+ titleLinesMax: o,
393
+ subtitle: d,
394
+ subtitleLinesMax: h,
395
+ description: p,
396
+ descriptionLinesMax: c
394
397
  })
395
398
  ]
396
399
  }),
397
400
  R && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
398
- style: B ? I : y,
399
- children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(W, {
400
- actions: N
401
+ style: w ? I : y,
402
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(O, {
403
+ actions: T
401
404
  })
402
405
  })
403
406
  ]
404
407
  }),
405
- h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
406
- children: h
408
+ l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
409
+ children: l
407
410
  }),
408
- (u || g) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
411
+ (m || v) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
409
412
  className: _cardCssMisticaJs.actions,
410
413
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
411
- primaryButton: u,
412
- link: g
414
+ primaryButton: m,
415
+ link: v
413
416
  })
414
417
  })
415
418
  ]
416
419
  })
417
420
  })
418
421
  });
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, [
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, [
421
424
  "icon",
422
425
  "title",
423
426
  "titleLinesMax",
@@ -428,82 +431,82 @@ const W = (param)=>/* @__PURE__ */ {
428
431
  "extra",
429
432
  "isInverse"
430
433
  ]);
431
- const { isDarkMode: m } = (0, _hooksJs.useTheme)(), u = Boolean(d.to || d.href || d.onPress);
434
+ const { isDarkMode: u } = (0, _hooksJs.useTheme)(), m = Boolean(c.to || c.href || c.onPress);
432
435
  return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
433
436
  className: _cardCssMisticaJs.boxed,
434
437
  dataAttributes: _objectSpread({
435
438
  "component-name": "SnapCard"
436
- }, c),
437
- ref: h,
438
- isInverse: l,
439
+ }, o),
440
+ ref: l,
441
+ isInverse: p,
439
442
  width: "100%",
440
443
  height: "100%",
441
444
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({
442
445
  maybe: !0
443
- }, d), {
444
- className: u && !l && !m ? _cardCssMisticaJs.snapCardTouchableHover : _cardCssMisticaJs.snapCardTouchableHoverTransparent,
445
- "aria-label": p,
446
+ }, c), {
447
+ className: m && !p && !u ? _cardCssMisticaJs.snapCardTouchableHover : _cardCssMisticaJs.snapCardTouchableHoverTransparent,
448
+ "aria-label": d,
446
449
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
447
450
  className: _cardCssMisticaJs.snapCard,
448
451
  children: [
449
452
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
450
453
  children: [
451
- r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
454
+ a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
452
455
  paddingBottom: 16,
453
- children: r
456
+ children: a
454
457
  }),
455
458
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
456
459
  space: 4,
457
460
  children: [
458
- a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
461
+ r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
459
462
  truncate: i,
460
463
  as: "h3",
461
464
  regular: !0,
462
- children: a
465
+ children: r
463
466
  }),
464
- t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
465
- truncate: o,
467
+ n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
468
+ truncate: s,
466
469
  regular: !0,
467
470
  color: _skinContractCssMisticaJs.vars.colors.textSecondary,
468
471
  as: "p",
469
- children: t
472
+ children: n
470
473
  })
471
474
  ]
472
475
  })
473
476
  ]
474
477
  }),
475
- s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
476
- children: s
478
+ h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
479
+ children: h
477
480
  })
478
481
  ]
479
482
  })
480
483
  }))
481
484
  });
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,
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,
488
491
  aspectRatio: R,
489
- onClose: g,
492
+ onClose: v,
490
493
  actions: f,
491
- "aria-label": B,
492
- isInverse: r,
494
+ "aria-label": w,
495
+ isInverse: a,
493
496
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.InternalBoxed, {
494
497
  borderRadius: 16,
495
498
  className: _cardCssMisticaJs.boxed,
496
- dataAttributes: A,
499
+ dataAttributes: S,
497
500
  ref: I,
498
501
  width: "100%",
499
502
  minHeight: "100%",
500
- isInverse: r,
501
- background: r && a ? _skinContractCssMisticaJs.vars.colors.backgroundContainer : void 0,
503
+ isInverse: a,
504
+ background: a && r ? _skinContractCssMisticaJs.vars.colors.backgroundContainer : void 0,
502
505
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
503
506
  className: _cardCssMisticaJs.displayCard,
504
507
  style: {
505
- backgroundImage: a ? `url("${CSS.escape(a)}")` : void 0,
506
- paddingTop: y && !i && !O ? 0 : 24
508
+ backgroundImage: r ? `url("${CSS.escape(r)}")` : void 0,
509
+ paddingTop: y && !i && !F ? 0 : 24
507
510
  },
508
511
  children: [
509
512
  i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
@@ -511,7 +514,7 @@ const W = (param)=>/* @__PURE__ */ {
511
514
  paddingX: 24,
512
515
  children: i
513
516
  }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
514
- 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
515
518
  }),
516
519
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
517
520
  paddingX: 24,
@@ -526,52 +529,52 @@ const W = (param)=>/* @__PURE__ */ {
526
529
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
527
530
  space: 8,
528
531
  children: [
529
- (t || o || p) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
532
+ (n || s || d) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
530
533
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
531
534
  space: 16,
532
535
  children: [
533
- t,
536
+ n,
534
537
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
535
538
  space: 4,
536
539
  children: [
537
- o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
540
+ s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
538
541
  forceMobileSizes: !0,
539
- truncate: c,
542
+ truncate: o,
540
543
  as: "div",
541
544
  regular: !0,
542
545
  textShadow: M,
543
- children: o
546
+ children: s
544
547
  }),
545
548
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
546
549
  forceMobileSizes: !0,
547
- truncate: s,
550
+ truncate: h,
548
551
  as: "h3",
549
552
  textShadow: M,
550
- children: p
553
+ children: d
551
554
  })
552
555
  ]
553
556
  })
554
557
  ]
555
558
  })
556
559
  }),
557
- l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
560
+ p && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
558
561
  forceMobileSizes: !0,
559
- truncate: d,
562
+ truncate: c,
560
563
  as: "p",
561
564
  regular: !0,
562
565
  color: _skinContractCssMisticaJs.vars.colors.textSecondary,
563
566
  textShadow: M,
564
- children: l
567
+ children: p
565
568
  })
566
569
  ]
567
570
  }),
568
- h
571
+ l
569
572
  ]
570
573
  }),
571
- (m || u || C) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
572
- primaryButton: m,
573
- secondaryButton: u,
574
- link: C
574
+ (u || m || x) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
575
+ primaryButton: u,
576
+ secondaryButton: m,
577
+ link: x
575
578
  })
576
579
  ]
577
580
  })
@@ -580,25 +583,120 @@ const W = (param)=>/* @__PURE__ */ {
580
583
  })
581
584
  })
582
585
  });
583
- }), Ie = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
584
- var { dataAttributes: r } = _param, a = _objectWithoutProperties(_param, [
586
+ }), Me = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
587
+ var { dataAttributes: a } = _param, r = _objectWithoutProperties(_param, [
585
588
  "dataAttributes"
586
589
  ]);
587
- return (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, a), {
590
+ return (0, _jsxRuntimeJs.jsx)(q, _objectSpreadProps(_objectSpread({}, r), {
588
591
  ref: i,
589
592
  isInverse: !0,
590
- dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
593
+ dataAttributes: _objectSpreadProps(_objectSpread({}, a), {
591
594
  "component-name": "DisplayMediaCard"
592
595
  })
593
596
  }));
594
- }), Me = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
595
- var { dataAttributes: r } = _param, a = _objectWithoutProperties(_param, [
597
+ }), ze = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
598
+ var { dataAttributes: a } = _param, r = _objectWithoutProperties(_param, [
596
599
  "dataAttributes"
597
600
  ]);
598
- return (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, a), {
601
+ return (0, _jsxRuntimeJs.jsx)(q, _objectSpreadProps(_objectSpread({}, r), {
599
602
  ref: i,
600
- dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
603
+ dataAttributes: _objectSpreadProps(_objectSpread({}, a), {
601
604
  "component-name": "DisplayDataCard"
602
605
  })
603
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
+ });
604
702
  });