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