@telefonica/mistica 14.4.0 → 14.5.0

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