@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-es/card.js CHANGED
@@ -87,30 +87,30 @@ import k from "./button-group.js";
87
87
  import { MediaBorderRadiusProvider as U } from "./image.js";
88
88
  import { BaseTouchable as V } from "./touchable.js";
89
89
  import { vars as B } from "./skins/skin-contract.css-mistica.js";
90
- import { boxed as D, mediaCard as Y, mediaCardContent as Z, dataCard as ee, actions as E, snapCardTouchableHover as re, snapCardTouchableHoverTransparent as ae, snapCard as ie, displayCard as X, displayCardGradient as j, cardActionIconButton as te, cardActionInverse as ne, cardAction as de } from "./card.css-mistica.js";
90
+ import { boxed as D, mediaCard as Y, mediaCardContent as Z, dataCard as ee, actions as E, snapCardTouchableHover as re, snapCardTouchableHoverTransparent as ae, snapCard as te, displayCard as X, displayCardGradient as j, cardActionIconButton as ie, cardActionInverse as ne, cardAction as de } from "./card.css-mistica.js";
91
91
  import { useTheme as H } from "./hooks.js";
92
92
  import { sprinkles as z } from "./sprinkles.css-mistica.js";
93
93
  import oe from "./inline.js";
94
- import ce from "./icon-button.js";
95
- import le from "./generated/mistica-icons/icon-close-regular.js";
96
- import { jsx as e, jsxs as t } from "./_virtual/jsx-runtime.js";
94
+ import se from "./icon-button.js";
95
+ import ce from "./generated/mistica-icons/icon-close-regular.js";
96
+ import { jsx as e, jsxs as i } from "./_virtual/jsx-runtime.js";
97
97
  const O = (param)=>/* @__PURE__ */ {
98
98
  let { actions: a , isInverse: r } = param;
99
99
  return e(oe, {
100
100
  space: 0,
101
101
  children: a.map((param, o)=>/* @__PURE__ */ {
102
- let { onPress: i , label: n , Icon: s } = param;
103
- return e(ce, {
102
+ let { onPress: t , label: n , Icon: l } = param;
103
+ return e(se, {
104
104
  size: 48,
105
- onPress: i,
105
+ onPress: t,
106
106
  "aria-label": n,
107
- className: te,
107
+ className: ie,
108
108
  style: {
109
109
  display: "flex"
110
110
  },
111
111
  children: /* @__PURE__ */ e("div", {
112
112
  className: r ? ne : de,
113
- children: /* @__PURE__ */ e(s, {
113
+ children: /* @__PURE__ */ e(l, {
114
114
  color: B.colors.neutralHigh,
115
115
  size: 20
116
116
  })
@@ -119,36 +119,36 @@ const O = (param)=>/* @__PURE__ */ {
119
119
  })
120
120
  });
121
121
  }, L = (a, r)=>{
122
- const { texts: i } = H(), n = a ? [
122
+ const { texts: t } = H(), n = a ? [
123
123
  ...a
124
124
  ] : [];
125
125
  return r && n.push({
126
- label: i.closeButtonLabel,
126
+ label: t.closeButtonLabel,
127
127
  onPress: r,
128
- Icon: le
128
+ Icon: ce
129
129
  }), n;
130
- }, se = {
130
+ }, le = {
131
131
  "1:1": "1",
132
132
  "16:9": "16 / 9",
133
133
  "7:10": "7 / 10",
134
134
  "9:10": "9 / 10",
135
135
  auto: "auto"
136
136
  }, G = (param)=>{
137
- 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;
138
- const l = L(d, h), u = l.length > 0, m = o ? typeof o == "number" ? String(o) : se[o] : void 0;
139
- return /* @__PURE__ */ t("section", {
140
- "aria-label": c,
137
+ 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;
138
+ const c = L(d, h), m = c.length > 0, u = o ? typeof o == "number" ? String(o) : le[o] : void 0;
139
+ return /* @__PURE__ */ i("section", {
140
+ "aria-label": s,
141
141
  style: {
142
142
  width: r,
143
- height: i,
143
+ height: t,
144
144
  minWidth: n,
145
- minHeight: s,
146
- aspectRatio: m,
145
+ minHeight: l,
146
+ aspectRatio: u,
147
147
  position: "relative"
148
148
  },
149
149
  children: [
150
150
  a,
151
- u && /* @__PURE__ */ e("div", {
151
+ m && /* @__PURE__ */ e("div", {
152
152
  style: {
153
153
  position: "absolute",
154
154
  right: 8,
@@ -156,19 +156,19 @@ const O = (param)=>/* @__PURE__ */ {
156
156
  zIndex: 2
157
157
  },
158
158
  children: /* @__PURE__ */ e(O, {
159
- actions: l,
159
+ actions: c,
160
160
  isInverse: p
161
161
  })
162
162
  })
163
163
  ]
164
164
  });
165
165
  }, $ = (param)=>{
166
- 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;
167
- const { textPresets: m } = H(), v = ()=>a ? typeof a == "string" ? /* @__PURE__ */ e(J, {
166
+ 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;
167
+ const { textPresets: u } = H(), y = ()=>a ? typeof a == "string" ? /* @__PURE__ */ e(J, {
168
168
  type: "promo",
169
169
  children: a
170
170
  }) : a : null;
171
- return /* @__PURE__ */ t("div", {
171
+ return /* @__PURE__ */ i("div", {
172
172
  className: z({
173
173
  display: "flex",
174
174
  flex: 1,
@@ -176,23 +176,24 @@ const O = (param)=>/* @__PURE__ */ {
176
176
  flexDirection: "column"
177
177
  }),
178
178
  children: [
179
- /* @__PURE__ */ t("div", {
179
+ /* @__PURE__ */ i("div", {
180
180
  children: [
181
- /* @__PURE__ */ t(g, {
181
+ /* @__PURE__ */ i(g, {
182
182
  space: 8,
183
183
  children: [
184
184
  (a || r || n || o) && /* @__PURE__ */ e("header", {
185
- children: /* @__PURE__ */ t(g, {
185
+ children: /* @__PURE__ */ i(g, {
186
186
  space: 8,
187
187
  children: [
188
- v(),
189
- /* @__PURE__ */ t(g, {
188
+ y(),
189
+ /* @__PURE__ */ i(g, {
190
190
  space: 4,
191
191
  children: [
192
192
  r && /* @__PURE__ */ e(C, {
193
- truncate: i,
193
+ truncate: t,
194
194
  as: "div",
195
195
  regular: !0,
196
+ hyphens: "auto",
196
197
  children: r
197
198
  }),
198
199
  /* @__PURE__ */ e(P, {
@@ -200,15 +201,17 @@ const O = (param)=>/* @__PURE__ */ {
200
201
  mobileLineHeight: "24px",
201
202
  desktopSize: 20,
202
203
  desktopLineHeight: "28px",
203
- truncate: s,
204
- weight: m.cardTitle.weight,
204
+ truncate: l,
205
+ weight: u.cardTitle.weight,
205
206
  as: "h3",
207
+ hyphens: "auto",
206
208
  children: n
207
209
  }),
208
210
  /* @__PURE__ */ e(C, {
209
211
  truncate: d,
210
212
  as: "div",
211
213
  regular: !0,
214
+ hyphens: "auto",
212
215
  children: o
213
216
  })
214
217
  ]
@@ -221,40 +224,41 @@ const O = (param)=>/* @__PURE__ */ {
221
224
  as: "p",
222
225
  regular: !0,
223
226
  color: B.colors.textSecondary,
227
+ hyphens: "auto",
224
228
  children: h
225
229
  })
226
230
  ]
227
231
  }),
228
- c && /* @__PURE__ */ e("div", {
229
- children: c
232
+ s && /* @__PURE__ */ e("div", {
233
+ children: s
230
234
  })
231
235
  ]
232
236
  }),
233
- (l || u) && /* @__PURE__ */ e("div", {
237
+ (c || m) && /* @__PURE__ */ e("div", {
234
238
  className: E,
235
239
  children: /* @__PURE__ */ e(k, {
236
- primaryButton: l,
237
- link: u
240
+ primaryButton: c,
241
+ link: m
238
242
  })
239
243
  })
240
244
  ]
241
245
  });
242
- }, De = /*#__PURE__*/ N.forwardRef((param, b)=>/* @__PURE__ */ {
243
- 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;
246
+ }, De = /*#__PURE__*/ N.forwardRef((param, v)=>/* @__PURE__ */ {
247
+ 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;
244
248
  return e(G, {
245
249
  onClose: S,
246
- actions: u,
247
- "aria-label": x,
250
+ actions: m,
251
+ "aria-label": b,
248
252
  isInverse: !0,
249
253
  children: /* @__PURE__ */ e(_, {
250
254
  className: D,
251
255
  dataAttributes: _objectSpread({
252
256
  "component-name": "MediaCard"
253
257
  }, f),
254
- ref: b,
258
+ ref: v,
255
259
  width: "100%",
256
260
  height: "100%",
257
- children: /* @__PURE__ */ t("div", {
261
+ children: /* @__PURE__ */ i("div", {
258
262
  className: Y,
259
263
  children: [
260
264
  /* @__PURE__ */ e(U, {
@@ -265,36 +269,36 @@ const O = (param)=>/* @__PURE__ */ {
265
269
  className: Z,
266
270
  children: /* @__PURE__ */ e($, {
267
271
  headline: r,
268
- pretitle: i,
272
+ pretitle: t,
269
273
  pretitleLinesMax: n,
270
274
  title: d,
271
275
  titleLinesMax: h,
272
- subtitle: s,
276
+ subtitle: l,
273
277
  subtitleLinesMax: o,
274
278
  description: p,
275
- descriptionLinesMax: c,
276
- extra: l,
277
- button: m,
278
- buttonLink: v
279
+ descriptionLinesMax: s,
280
+ extra: c,
281
+ button: u,
282
+ buttonLink: y
279
283
  })
280
284
  })
281
285
  ]
282
286
  })
283
287
  })
284
288
  });
285
- }), He = /*#__PURE__*/ N.forwardRef((param, b)=>{
286
- 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;
287
- const T = L(u, S), R = T.length > 0, w = !!a, I = {
289
+ }), He = /*#__PURE__*/ N.forwardRef((param, v)=>{
290
+ 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;
291
+ const T = L(m, S), R = T.length > 0, w = !!a, I = {
288
292
  position: "absolute",
289
293
  top: 8,
290
294
  right: 8,
291
295
  zIndex: 2
292
- }, y = {
296
+ }, x = {
293
297
  marginRight: -8,
294
298
  marginTop: -16
295
299
  };
296
300
  return /* @__PURE__ */ e("section", {
297
- "aria-label": x,
301
+ "aria-label": b,
298
302
  style: {
299
303
  height: "100%",
300
304
  position: "relative"
@@ -304,18 +308,18 @@ const O = (param)=>/* @__PURE__ */ {
304
308
  dataAttributes: _objectSpread({
305
309
  "component-name": "DataCard"
306
310
  }, f),
307
- ref: b,
311
+ ref: v,
308
312
  width: "100%",
309
313
  height: "100%",
310
- children: /* @__PURE__ */ t("div", {
314
+ children: /* @__PURE__ */ i("div", {
311
315
  className: ee,
312
316
  children: [
313
- /* @__PURE__ */ t("div", {
317
+ /* @__PURE__ */ i("div", {
314
318
  className: z({
315
319
  display: "flex"
316
320
  }),
317
321
  children: [
318
- /* @__PURE__ */ t(g, {
322
+ /* @__PURE__ */ i(g, {
319
323
  space: 16,
320
324
  className: z({
321
325
  flex: 1
@@ -324,41 +328,41 @@ const O = (param)=>/* @__PURE__ */ {
324
328
  w ? a : null,
325
329
  /* @__PURE__ */ e($, {
326
330
  headline: r,
327
- pretitle: i,
331
+ pretitle: t,
328
332
  pretitleLinesMax: n,
329
- title: s,
333
+ title: l,
330
334
  titleLinesMax: o,
331
335
  subtitle: d,
332
336
  subtitleLinesMax: h,
333
337
  description: p,
334
- descriptionLinesMax: c
338
+ descriptionLinesMax: s
335
339
  })
336
340
  ]
337
341
  }),
338
342
  R && /* @__PURE__ */ e("div", {
339
- style: w ? I : y,
343
+ style: w ? I : x,
340
344
  children: /* @__PURE__ */ e(O, {
341
345
  actions: T
342
346
  })
343
347
  })
344
348
  ]
345
349
  }),
346
- l && /* @__PURE__ */ e("div", {
347
- children: l
350
+ c && /* @__PURE__ */ e("div", {
351
+ children: c
348
352
  }),
349
- (m || v) && /* @__PURE__ */ e("div", {
353
+ (u || y) && /* @__PURE__ */ e("div", {
350
354
  className: E,
351
355
  children: /* @__PURE__ */ e(k, {
352
- primaryButton: m,
353
- link: v
356
+ primaryButton: u,
357
+ link: y
354
358
  })
355
359
  })
356
360
  ]
357
361
  })
358
362
  })
359
363
  });
360
- }), Ie = /*#__PURE__*/ N.forwardRef((_param, l)=>{
361
- 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, [
364
+ }), Ie = /*#__PURE__*/ N.forwardRef((_param, c)=>{
365
+ 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, [
362
366
  "icon",
363
367
  "title",
364
368
  "titleLinesMax",
@@ -369,44 +373,46 @@ const O = (param)=>/* @__PURE__ */ {
369
373
  "extra",
370
374
  "isInverse"
371
375
  ]);
372
- const { isDarkMode: u } = H(), m = Boolean(c.to || c.href || c.onPress);
376
+ const { isDarkMode: m } = H(), u = Boolean(s.to || s.href || s.onPress);
373
377
  return /* @__PURE__ */ e(_, {
374
378
  className: D,
375
379
  dataAttributes: _objectSpread({
376
380
  "component-name": "SnapCard"
377
381
  }, o),
378
- ref: l,
382
+ ref: c,
379
383
  isInverse: p,
380
384
  width: "100%",
381
385
  height: "100%",
382
386
  children: /* @__PURE__ */ e(V, _objectSpreadProps(_objectSpread({
383
387
  maybe: !0
384
- }, c), {
385
- className: m && !p && !u ? re : ae,
388
+ }, s), {
389
+ className: u && !p && !m ? re : ae,
386
390
  "aria-label": d,
387
- children: /* @__PURE__ */ t("section", {
388
- className: ie,
391
+ children: /* @__PURE__ */ i("section", {
392
+ className: te,
389
393
  children: [
390
- /* @__PURE__ */ t("div", {
394
+ /* @__PURE__ */ i("div", {
391
395
  children: [
392
396
  a && /* @__PURE__ */ e(A, {
393
397
  paddingBottom: 16,
394
398
  children: a
395
399
  }),
396
- /* @__PURE__ */ t(g, {
400
+ /* @__PURE__ */ i(g, {
397
401
  space: 4,
398
402
  children: [
399
403
  r && /* @__PURE__ */ e(C, {
400
- truncate: i,
404
+ truncate: t,
401
405
  as: "h3",
402
406
  regular: !0,
407
+ hyphens: "auto",
403
408
  children: r
404
409
  }),
405
410
  n && /* @__PURE__ */ e(C, {
406
- truncate: s,
411
+ truncate: l,
407
412
  regular: !0,
408
413
  color: B.colors.textSecondary,
409
414
  as: "p",
415
+ hyphens: "auto",
410
416
  children: n
411
417
  })
412
418
  ]
@@ -421,13 +427,13 @@ const O = (param)=>/* @__PURE__ */ {
421
427
  }))
422
428
  });
423
429
  }), q = /*#__PURE__*/ N.forwardRef((param, I)=>{
424
- 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;
425
- const y = !!r, M = y ? "0 0 16px rgba(0,0,0,0.4)" : void 0, F = (f == null ? void 0 : f.length) || v;
430
+ 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;
431
+ const x = !!r, M = x ? "0 0 16px rgba(0,0,0,0.4)" : void 0, F = (f == null ? void 0 : f.length) || y;
426
432
  return /* @__PURE__ */ e(G, {
427
- width: b,
433
+ width: v,
428
434
  height: T,
429
435
  aspectRatio: R,
430
- onClose: v,
436
+ onClose: y,
431
437
  actions: f,
432
438
  "aria-label": w,
433
439
  isInverse: a,
@@ -440,54 +446,56 @@ const O = (param)=>/* @__PURE__ */ {
440
446
  minHeight: "100%",
441
447
  isInverse: a,
442
448
  background: a && r ? B.colors.backgroundContainer : void 0,
443
- children: /* @__PURE__ */ t("div", {
449
+ children: /* @__PURE__ */ i("div", {
444
450
  className: X,
445
451
  style: {
446
452
  backgroundImage: r ? `url("${CSS.escape(r)}")` : void 0,
447
- paddingTop: y && !i && !F ? 0 : 24
453
+ paddingTop: x && !t && !F ? 0 : 24
448
454
  },
449
455
  children: [
450
- i ? /* @__PURE__ */ e(A, {
451
- paddingBottom: y ? 0 : 40,
456
+ t ? /* @__PURE__ */ e(A, {
457
+ paddingBottom: x ? 0 : 40,
452
458
  paddingX: 24,
453
- children: i
459
+ children: t
454
460
  }) : /* @__PURE__ */ e(A, {
455
- paddingBottom: (f == null ? void 0 : f.length) || v ? y ? 24 : 64 : 0
461
+ paddingBottom: (f == null ? void 0 : f.length) || y ? x ? 24 : 64 : 0
456
462
  }),
457
463
  /* @__PURE__ */ e(A, {
458
464
  paddingX: 24,
459
- paddingTop: y ? 40 : 0,
465
+ paddingTop: x ? 40 : 0,
460
466
  paddingBottom: 24,
461
- className: y ? j : void 0,
462
- children: /* @__PURE__ */ t(g, {
467
+ className: x ? j : void 0,
468
+ children: /* @__PURE__ */ i(g, {
463
469
  space: 24,
464
470
  children: [
465
- /* @__PURE__ */ t("div", {
471
+ /* @__PURE__ */ i("div", {
466
472
  children: [
467
- /* @__PURE__ */ t(g, {
473
+ /* @__PURE__ */ i(g, {
468
474
  space: 8,
469
475
  children: [
470
- (n || s || d) && /* @__PURE__ */ e("header", {
471
- children: /* @__PURE__ */ t(g, {
476
+ (n || l || d) && /* @__PURE__ */ e("header", {
477
+ children: /* @__PURE__ */ i(g, {
472
478
  space: 16,
473
479
  children: [
474
480
  n,
475
- /* @__PURE__ */ t(g, {
481
+ /* @__PURE__ */ i(g, {
476
482
  space: 4,
477
483
  children: [
478
- s && /* @__PURE__ */ e(C, {
484
+ l && /* @__PURE__ */ e(C, {
479
485
  forceMobileSizes: !0,
480
486
  truncate: o,
481
487
  as: "div",
482
488
  regular: !0,
483
489
  textShadow: M,
484
- children: s
490
+ hyphens: "auto",
491
+ children: l
485
492
  }),
486
493
  /* @__PURE__ */ e(K, {
487
494
  forceMobileSizes: !0,
488
495
  truncate: h,
489
496
  as: "h3",
490
497
  textShadow: M,
498
+ hyphens: "auto",
491
499
  children: d
492
500
  })
493
501
  ]
@@ -497,22 +505,23 @@ const O = (param)=>/* @__PURE__ */ {
497
505
  }),
498
506
  p && /* @__PURE__ */ e(Q, {
499
507
  forceMobileSizes: !0,
500
- truncate: c,
508
+ truncate: s,
501
509
  as: "p",
502
510
  regular: !0,
503
511
  color: B.colors.textSecondary,
504
512
  textShadow: M,
513
+ hyphens: "auto",
505
514
  children: p
506
515
  })
507
516
  ]
508
517
  }),
509
- l
518
+ c
510
519
  ]
511
520
  }),
512
- (u || m || x) && /* @__PURE__ */ e(k, {
513
- primaryButton: u,
514
- secondaryButton: m,
515
- link: x
521
+ (m || u || b) && /* @__PURE__ */ e(k, {
522
+ primaryButton: m,
523
+ secondaryButton: u,
524
+ link: b
516
525
  })
517
526
  ]
518
527
  })
@@ -521,36 +530,36 @@ const O = (param)=>/* @__PURE__ */ {
521
530
  })
522
531
  })
523
532
  });
524
- }), Me = /*#__PURE__*/ N.forwardRef((_param, i)=>/* @__PURE__ */ {
533
+ }), Me = /*#__PURE__*/ N.forwardRef((_param, t)=>/* @__PURE__ */ {
525
534
  var { dataAttributes: a } = _param, r = _objectWithoutProperties(_param, [
526
535
  "dataAttributes"
527
536
  ]);
528
537
  return e(q, _objectSpreadProps(_objectSpread({}, r), {
529
- ref: i,
538
+ ref: t,
530
539
  isInverse: !0,
531
540
  dataAttributes: _objectSpreadProps(_objectSpread({}, a), {
532
541
  "component-name": "DisplayMediaCard"
533
542
  })
534
543
  }));
535
- }), ze = /*#__PURE__*/ N.forwardRef((_param, i)=>/* @__PURE__ */ {
544
+ }), ze = /*#__PURE__*/ N.forwardRef((_param, t)=>/* @__PURE__ */ {
536
545
  var { dataAttributes: a } = _param, r = _objectWithoutProperties(_param, [
537
546
  "dataAttributes"
538
547
  ]);
539
548
  return e(q, _objectSpreadProps(_objectSpread({}, r), {
540
- ref: i,
549
+ ref: t,
541
550
  dataAttributes: _objectSpreadProps(_objectSpread({}, a), {
542
551
  "component-name": "DisplayDataCard"
543
552
  })
544
553
  }));
545
554
  }), he = 140, pe = 112, _e = /*#__PURE__*/ N.forwardRef((param, S)=>{
546
- 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;
547
- 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 } = H();
555
+ 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;
556
+ 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 } = H();
548
557
  return /* @__PURE__ */ e(G, {
549
- width: i,
558
+ width: t,
550
559
  height: n,
551
560
  minWidth: he,
552
561
  minHeight: pe,
553
- aspectRatio: s,
562
+ aspectRatio: l,
554
563
  onClose: h,
555
564
  actions: d,
556
565
  "aria-label": o,
@@ -564,56 +573,58 @@ const O = (param)=>/* @__PURE__ */ {
564
573
  minHeight: "100%",
565
574
  isInverse: !0,
566
575
  background: r ? B.colors.backgroundContainer : void 0,
567
- children: /* @__PURE__ */ t("div", {
576
+ children: /* @__PURE__ */ i("div", {
568
577
  className: X,
569
578
  style: {
570
579
  backgroundImage: r ? `url("${CSS.escape(r)}")` : void 0,
571
- paddingTop: b && !p && !R ? 0 : 24
580
+ paddingTop: v && !p && !R ? 0 : 24
572
581
  },
573
582
  children: [
574
583
  p ? /* @__PURE__ */ e(A, {
575
- paddingBottom: b ? 0 : 40,
584
+ paddingBottom: v ? 0 : 40,
576
585
  paddingX: 24,
577
586
  children: p
578
587
  }) : /* @__PURE__ */ e(A, {
579
- paddingBottom: (d == null ? void 0 : d.length) || h ? b ? 24 : 64 : 0
588
+ paddingBottom: (d == null ? void 0 : d.length) || h ? v ? 24 : 64 : 0
580
589
  }),
581
590
  /* @__PURE__ */ e(A, {
582
591
  paddingX: 16,
583
- paddingTop: b ? 40 : 0,
592
+ paddingTop: v ? 40 : 0,
584
593
  paddingBottom: 24,
585
- className: b ? j : void 0,
594
+ className: v ? j : void 0,
586
595
  children: /* @__PURE__ */ e(g, {
587
596
  space: 24,
588
597
  children: /* @__PURE__ */ e("div", {
589
- children: /* @__PURE__ */ t(g, {
598
+ children: /* @__PURE__ */ i(g, {
590
599
  space: 8,
591
600
  children: [
592
- (c || l || m) && /* @__PURE__ */ e("header", {
593
- children: /* @__PURE__ */ t(g, {
601
+ (s || c || u) && /* @__PURE__ */ e("header", {
602
+ children: /* @__PURE__ */ i(g, {
594
603
  space: 16,
595
604
  children: [
596
- c,
597
- /* @__PURE__ */ t(g, {
605
+ s,
606
+ /* @__PURE__ */ i(g, {
598
607
  space: 4,
599
608
  children: [
600
- l && /* @__PURE__ */ e(C, {
609
+ c && /* @__PURE__ */ e(C, {
601
610
  forceMobileSizes: !0,
602
- truncate: u,
611
+ truncate: m,
603
612
  as: "div",
604
613
  regular: !0,
605
614
  textShadow: T,
606
- children: l
615
+ hyphens: "auto",
616
+ children: c
607
617
  }),
608
618
  /* @__PURE__ */ e(P, {
609
619
  desktopSize: 20,
610
620
  mobileSize: 18,
611
621
  mobileLineHeight: "24px",
612
622
  desktopLineHeight: "28px",
613
- truncate: v,
623
+ truncate: y,
614
624
  weight: w.cardTitle.weight,
615
625
  as: "h3",
616
- children: m
626
+ hyphens: "auto",
627
+ children: u
617
628
  })
618
629
  ]
619
630
  })
@@ -622,10 +633,11 @@ const O = (param)=>/* @__PURE__ */ {
622
633
  }),
623
634
  f && /* @__PURE__ */ e(C, {
624
635
  forceMobileSizes: !0,
625
- truncate: x,
636
+ truncate: b,
626
637
  as: "p",
627
638
  regular: !0,
628
639
  textShadow: T,
640
+ hyphens: "auto",
629
641
  children: f
630
642
  })
631
643
  ]