@telefonica/mistica 14.4.1 → 14.6.0

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