@telefonica/mistica 14.4.1 → 14.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/button.css-mistica.js +1 -1
  3. package/dist/button.css.d.ts +1 -1
  4. package/dist/card.d.ts +19 -0
  5. package/dist/card.js +247 -149
  6. package/dist/carousel.js +116 -115
  7. package/dist/index.d.ts +1 -1
  8. package/dist/index.js +1 -0
  9. package/dist/list.css-mistica.js +9 -8
  10. package/dist/list.css.d.ts +1 -0
  11. package/dist/list.d.ts +1 -0
  12. package/dist/list.js +126 -89
  13. package/dist/package-version.js +1 -1
  14. package/dist/progress-bar.css-mistica.js +5 -3
  15. package/dist/progress-bar.css.d.ts +2 -0
  16. package/dist/progress-bar.d.ts +1 -0
  17. package/dist/progress-bar.js +12 -6
  18. package/dist-es/button.css-mistica.js +1 -1
  19. package/dist-es/card.js +300 -203
  20. package/dist-es/carousel.js +164 -163
  21. package/dist-es/index.js +1703 -1703
  22. package/dist-es/list.css-mistica.js +2 -2
  23. package/dist-es/list.js +191 -154
  24. package/dist-es/package-version.js +1 -1
  25. package/dist-es/progress-bar.css-mistica.js +2 -2
  26. package/dist-es/progress-bar.js +13 -12
  27. package/dist-es/style.css +1 -1
  28. package/package.json +2 -2
package/dist-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 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 de from "./inline.js";
93
+ import oe from "./inline.js";
94
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(de, {
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, c)=>/* @__PURE__ */ {
102
- let { onPress: i , label: t , Icon: o } = param;
101
+ children: a.map((param, o)=>/* @__PURE__ */ {
102
+ let { onPress: i , label: n , Icon: s } = param;
103
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
- }, 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: 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: 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", {
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
- d && /* @__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: 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: 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,115 +176,115 @@ 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 || c) && /* @__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(b, {
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
- /* @__PURE__ */ e(b, {
207
- truncate: p,
208
+ /* @__PURE__ */ e(C, {
209
+ truncate: d,
208
210
  as: "div",
209
211
  regular: !0,
210
- children: c
212
+ children: o
211
213
  })
212
214
  ]
213
215
  })
214
216
  ]
215
217
  })
216
218
  }),
217
- s && /* @__PURE__ */ e(b, {
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
  }),
226
- d && /* @__PURE__ */ e("div", {
227
- children: d
228
+ c && /* @__PURE__ */ e("div", {
229
+ children: c
228
230
  })
229
231
  ]
230
232
  }),
231
- (h || m) && /* @__PURE__ */ e("div", {
232
- className: j,
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
- }, 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,
244
- actions: m,
245
- "aria-label": C,
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,
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: c,
272
- description: l,
273
- descriptionLinesMax: d,
274
- extra: h,
275
- button: u,
276
- buttonLink: g
269
+ pretitleLinesMax: n,
270
+ title: d,
271
+ titleLinesMax: h,
272
+ subtitle: s,
273
+ subtitleLinesMax: o,
274
+ description: p,
275
+ descriptionLinesMax: c,
276
+ extra: l,
277
+ button: m,
278
+ buttonLink: v
277
279
  })
278
280
  })
279
281
  ]
280
282
  })
281
283
  })
282
284
  });
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 = {
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,
@@ -292,71 +294,71 @@ const W = (param)=>/* @__PURE__ */ {
292
294
  marginTop: -16
293
295
  };
294
296
  return /* @__PURE__ */ e("section", {
295
- "aria-label": C,
297
+ "aria-label": x,
296
298
  style: {
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
315
  display: "flex"
314
316
  }),
315
317
  children: [
316
- /* @__PURE__ */ n(v, {
318
+ /* @__PURE__ */ t(g, {
317
319
  space: 16,
318
320
  className: z({
319
321
  flex: 1
320
322
  }),
321
323
  children: [
322
- B ? r : null,
323
- /* @__PURE__ */ e(_, {
324
- headline: a,
324
+ w ? a : null,
325
+ /* @__PURE__ */ e($, {
326
+ headline: r,
325
327
  pretitle: i,
326
- pretitleLinesMax: t,
327
- title: o,
328
- titleLinesMax: c,
329
- subtitle: p,
330
- subtitleLinesMax: s,
331
- description: l,
332
- descriptionLinesMax: d
328
+ pretitleLinesMax: n,
329
+ title: s,
330
+ titleLinesMax: o,
331
+ subtitle: d,
332
+ subtitleLinesMax: h,
333
+ description: p,
334
+ descriptionLinesMax: c
333
335
  })
334
336
  ]
335
337
  }),
336
338
  R && /* @__PURE__ */ e("div", {
337
- style: B ? I : y,
338
- children: /* @__PURE__ */ e(W, {
339
- actions: N
339
+ style: w ? I : y,
340
+ children: /* @__PURE__ */ e(O, {
341
+ actions: T
340
342
  })
341
343
  })
342
344
  ]
343
345
  }),
344
- h && /* @__PURE__ */ e("div", {
345
- children: h
346
+ l && /* @__PURE__ */ e("div", {
347
+ children: l
346
348
  }),
347
- (u || g) && /* @__PURE__ */ e("div", {
348
- className: j,
349
+ (m || v) && /* @__PURE__ */ e("div", {
350
+ className: E,
349
351
  children: /* @__PURE__ */ e(k, {
350
- primaryButton: u,
351
- link: g
352
+ primaryButton: m,
353
+ link: v
352
354
  })
353
355
  })
354
356
  ]
355
357
  })
356
358
  })
357
359
  });
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, [
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, [
360
362
  "icon",
361
363
  "title",
362
364
  "titleLinesMax",
@@ -367,150 +369,150 @@ const W = (param)=>/* @__PURE__ */ {
367
369
  "extra",
368
370
  "isInverse"
369
371
  ]);
370
- const { isDarkMode: m } = G(), u = Boolean(d.to || d.href || d.onPress);
371
- return /* @__PURE__ */ e(H, {
372
+ const { isDarkMode: u } = H(), m = Boolean(c.to || c.href || c.onPress);
373
+ return /* @__PURE__ */ e(_, {
372
374
  className: D,
373
375
  dataAttributes: _objectSpread({
374
376
  "component-name": "SnapCard"
375
- }, c),
376
- ref: h,
377
- isInverse: l,
377
+ }, o),
378
+ ref: l,
379
+ isInverse: p,
378
380
  width: "100%",
379
381
  height: "100%",
380
- children: /* @__PURE__ */ e(Q, _objectSpreadProps(_objectSpread({
382
+ children: /* @__PURE__ */ e(V, _objectSpreadProps(_objectSpread({
381
383
  maybe: !0
382
- }, d), {
383
- className: u && !l && !m ? Z : ee,
384
- "aria-label": p,
385
- children: /* @__PURE__ */ n("section", {
386
- className: re,
384
+ }, c), {
385
+ className: m && !p && !u ? re : ae,
386
+ "aria-label": d,
387
+ children: /* @__PURE__ */ t("section", {
388
+ className: ie,
387
389
  children: [
388
- /* @__PURE__ */ n("div", {
390
+ /* @__PURE__ */ t("div", {
389
391
  children: [
390
- r && /* @__PURE__ */ e(w, {
392
+ a && /* @__PURE__ */ e(A, {
391
393
  paddingBottom: 16,
392
- children: r
394
+ children: a
393
395
  }),
394
- /* @__PURE__ */ n(v, {
396
+ /* @__PURE__ */ t(g, {
395
397
  space: 4,
396
398
  children: [
397
- a && /* @__PURE__ */ e(b, {
399
+ r && /* @__PURE__ */ e(C, {
398
400
  truncate: i,
399
401
  as: "h3",
400
402
  regular: !0,
401
- children: a
403
+ children: r
402
404
  }),
403
- t && /* @__PURE__ */ e(b, {
404
- truncate: o,
405
+ n && /* @__PURE__ */ e(C, {
406
+ truncate: s,
405
407
  regular: !0,
406
- color: T.colors.textSecondary,
408
+ color: B.colors.textSecondary,
407
409
  as: "p",
408
- children: t
410
+ children: n
409
411
  })
410
412
  ]
411
413
  })
412
414
  ]
413
415
  }),
414
- s && /* @__PURE__ */ e("div", {
415
- children: s
416
+ h && /* @__PURE__ */ e("div", {
417
+ children: h
416
418
  })
417
419
  ]
418
420
  })
419
421
  }))
420
422
  });
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,
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,
427
429
  aspectRatio: R,
428
- onClose: g,
430
+ onClose: v,
429
431
  actions: f,
430
- "aria-label": B,
431
- isInverse: r,
432
- children: /* @__PURE__ */ e(K, {
432
+ "aria-label": w,
433
+ isInverse: a,
434
+ children: /* @__PURE__ */ e(W, {
433
435
  borderRadius: 16,
434
436
  className: D,
435
- dataAttributes: A,
437
+ dataAttributes: S,
436
438
  ref: I,
437
439
  width: "100%",
438
440
  minHeight: "100%",
439
- isInverse: r,
440
- background: r && a ? T.colors.backgroundContainer : void 0,
441
- children: /* @__PURE__ */ n("div", {
442
- className: ae,
441
+ isInverse: a,
442
+ background: a && r ? B.colors.backgroundContainer : void 0,
443
+ children: /* @__PURE__ */ t("div", {
444
+ className: X,
443
445
  style: {
444
- backgroundImage: a ? `url("${CSS.escape(a)}")` : void 0,
445
- paddingTop: y && !i && !O ? 0 : 24
446
+ backgroundImage: r ? `url("${CSS.escape(r)}")` : void 0,
447
+ paddingTop: y && !i && !F ? 0 : 24
446
448
  },
447
449
  children: [
448
- i ? /* @__PURE__ */ e(w, {
450
+ i ? /* @__PURE__ */ e(A, {
449
451
  paddingBottom: y ? 0 : 40,
450
452
  paddingX: 24,
451
453
  children: i
452
- }) : /* @__PURE__ */ e(w, {
453
- 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
454
456
  }),
455
- /* @__PURE__ */ e(w, {
457
+ /* @__PURE__ */ e(A, {
456
458
  paddingX: 24,
457
459
  paddingTop: y ? 40 : 0,
458
460
  paddingBottom: 24,
459
- className: y ? te : void 0,
460
- children: /* @__PURE__ */ n(v, {
461
+ className: y ? j : void 0,
462
+ children: /* @__PURE__ */ t(g, {
461
463
  space: 24,
462
464
  children: [
463
- /* @__PURE__ */ n("div", {
465
+ /* @__PURE__ */ t("div", {
464
466
  children: [
465
- /* @__PURE__ */ n(v, {
467
+ /* @__PURE__ */ t(g, {
466
468
  space: 8,
467
469
  children: [
468
- (t || o || p) && /* @__PURE__ */ e("header", {
469
- children: /* @__PURE__ */ n(v, {
470
+ (n || s || d) && /* @__PURE__ */ e("header", {
471
+ children: /* @__PURE__ */ t(g, {
470
472
  space: 16,
471
473
  children: [
472
- t,
473
- /* @__PURE__ */ n(v, {
474
+ n,
475
+ /* @__PURE__ */ t(g, {
474
476
  space: 4,
475
477
  children: [
476
- o && /* @__PURE__ */ e(b, {
478
+ s && /* @__PURE__ */ e(C, {
477
479
  forceMobileSizes: !0,
478
- truncate: c,
480
+ truncate: o,
479
481
  as: "div",
480
482
  regular: !0,
481
483
  textShadow: M,
482
- children: o
484
+ children: s
483
485
  }),
484
- /* @__PURE__ */ e(q, {
486
+ /* @__PURE__ */ e(K, {
485
487
  forceMobileSizes: !0,
486
- truncate: s,
488
+ truncate: h,
487
489
  as: "h3",
488
490
  textShadow: M,
489
- children: p
491
+ children: d
490
492
  })
491
493
  ]
492
494
  })
493
495
  ]
494
496
  })
495
497
  }),
496
- l && /* @__PURE__ */ e(F, {
498
+ p && /* @__PURE__ */ e(Q, {
497
499
  forceMobileSizes: !0,
498
- truncate: d,
500
+ truncate: c,
499
501
  as: "p",
500
502
  regular: !0,
501
- color: T.colors.textSecondary,
503
+ color: B.colors.textSecondary,
502
504
  textShadow: M,
503
- children: l
505
+ children: p
504
506
  })
505
507
  ]
506
508
  }),
507
- h
509
+ l
508
510
  ]
509
511
  }),
510
- (m || u || C) && /* @__PURE__ */ e(k, {
511
- primaryButton: m,
512
- secondaryButton: u,
513
- link: C
512
+ (u || m || x) && /* @__PURE__ */ e(k, {
513
+ primaryButton: u,
514
+ secondaryButton: m,
515
+ link: x
514
516
  })
515
517
  ]
516
518
  })
@@ -519,26 +521,121 @@ const W = (param)=>/* @__PURE__ */ {
519
521
  })
520
522
  })
521
523
  });
522
- }), Ie = /*#__PURE__*/ x.forwardRef((_param, i)=>/* @__PURE__ */ {
523
- var { dataAttributes: r } = _param, a = _objectWithoutProperties(_param, [
524
+ }), Me = /*#__PURE__*/ N.forwardRef((_param, i)=>/* @__PURE__ */ {
525
+ var { dataAttributes: a } = _param, r = _objectWithoutProperties(_param, [
524
526
  "dataAttributes"
525
527
  ]);
526
- return e(E, _objectSpreadProps(_objectSpread({}, a), {
528
+ return e(q, _objectSpreadProps(_objectSpread({}, r), {
527
529
  ref: i,
528
530
  isInverse: !0,
529
- dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
531
+ dataAttributes: _objectSpreadProps(_objectSpread({}, a), {
530
532
  "component-name": "DisplayMediaCard"
531
533
  })
532
534
  }));
533
- }), Me = /*#__PURE__*/ x.forwardRef((_param, i)=>/* @__PURE__ */ {
534
- var { dataAttributes: r } = _param, a = _objectWithoutProperties(_param, [
535
+ }), ze = /*#__PURE__*/ N.forwardRef((_param, i)=>/* @__PURE__ */ {
536
+ var { dataAttributes: a } = _param, r = _objectWithoutProperties(_param, [
535
537
  "dataAttributes"
536
538
  ]);
537
- return e(E, _objectSpreadProps(_objectSpread({}, a), {
539
+ return e(q, _objectSpreadProps(_objectSpread({}, r), {
538
540
  ref: i,
539
- dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
541
+ dataAttributes: _objectSpreadProps(_objectSpread({}, a), {
540
542
  "component-name": "DisplayDataCard"
541
543
  })
542
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
+ });
543
640
  });
544
- export { De as DataCard, Me as DisplayDataCard, Ie as DisplayMediaCard, we 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 };