@telefonica/mistica 14.16.0 → 14.16.1
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.
- package/css/mistica.css +1 -1
- package/dist/card.js +86 -90
- package/dist/package-version.js +1 -1
- package/dist-es/card.js +115 -119
- package/dist-es/package-version.js +1 -1
- package/dist-es/style.css +1 -1
- package/package.json +1 -1
package/dist-es/card.js
CHANGED
|
@@ -77,20 +77,20 @@ function _object_without_properties_loose(source, excluded) {
|
|
|
77
77
|
}
|
|
78
78
|
return target;
|
|
79
79
|
}
|
|
80
|
-
import { jsxs as n, jsx as e, Fragment as
|
|
80
|
+
import { jsxs as n, jsx as e, Fragment as Ne } from "react/jsx-runtime";
|
|
81
81
|
import * as T from "react";
|
|
82
82
|
import Te from "./tag.js";
|
|
83
83
|
import y from "./stack.js";
|
|
84
84
|
import D from "./box.js";
|
|
85
|
-
import { Text2 as A, Text6 as Se, Text3 as xe, Text as
|
|
86
|
-
import { Boxed as
|
|
87
|
-
import
|
|
85
|
+
import { Text2 as A, Text6 as Se, Text3 as xe, Text as $ } from "./text.js";
|
|
86
|
+
import { Boxed as Z, InternalBoxed as L } from "./boxed.js";
|
|
87
|
+
import q from "./button-group.js";
|
|
88
88
|
import we, { MediaBorderRadiusProvider as Be } from "./image.js";
|
|
89
89
|
import { BaseTouchable as O } from "./touchable.js";
|
|
90
90
|
import { vars as v } from "./skins/skin-contract.css-mistica.js";
|
|
91
|
-
import { touchableContainer as _, boxed as P, touchable as E, mediaCard as Ie, mediaCardContent as Ae, dataCard as be, actions as
|
|
92
|
-
import { useTheme as
|
|
93
|
-
import { sprinkles as
|
|
91
|
+
import { touchableContainer as _, boxed as P, touchable as E, mediaCard as Ie, mediaCardContent as Ae, dataCard as be, actions as ee, snapCard as Re, videoAction as V, displayCardContainer as re, displayCardBackground as ae, displayCardContent as ie, displayCardGradient as ne, cardActionIconButton as Q, cardContainer as De, vars as Me, touchableMediaCardOverlay as ze, touchableCardOverlay as J, touchableCardOverlayInverse as te, touchableCardOverlayMedia as se, cardAction as He, cardActionInverse as Oe, cardActionMedia as _e } from "./card.css-mistica.js";
|
|
92
|
+
import { useTheme as K } from "./hooks.js";
|
|
93
|
+
import { sprinkles as oe } from "./sprinkles.css-mistica.js";
|
|
94
94
|
import Pe from "./icon-button.js";
|
|
95
95
|
import Ee from "./generated/mistica-icons/icon-close-regular.js";
|
|
96
96
|
import We from "./generated/mistica-icons/icon-pause-filled.js";
|
|
@@ -101,8 +101,9 @@ import Fe from "./video.js";
|
|
|
101
101
|
import { useIsInverseVariant as le, ThemeVariant as de } from "./theme-variant-context.js";
|
|
102
102
|
import Ve from "classnames";
|
|
103
103
|
import { assignInlineVars as ke } from "@vanilla-extract/dynamic";
|
|
104
|
+
import Ue from "./inline.js";
|
|
104
105
|
const ce = (r, a)=>{
|
|
105
|
-
const { texts: i } =
|
|
106
|
+
const { texts: i } = K(), s = r ? [
|
|
106
107
|
...r
|
|
107
108
|
] : [];
|
|
108
109
|
return a && s.push({
|
|
@@ -110,13 +111,13 @@ const ce = (r, a)=>{
|
|
|
110
111
|
onPress: a,
|
|
111
112
|
Icon: Ee
|
|
112
113
|
}), s;
|
|
113
|
-
}, he = 48,
|
|
114
|
+
}, he = 48, k = (param)=>{
|
|
114
115
|
let { actions: r , onClose: a , type: i = "default" } = param;
|
|
115
116
|
const s = ce(r, a), h = s.length > 0, o = {
|
|
116
117
|
default: v.colors.neutralHigh,
|
|
117
118
|
inverse: v.colors.inverse,
|
|
118
119
|
media: "#000000"
|
|
119
|
-
},
|
|
120
|
+
}, p = {
|
|
120
121
|
default: He,
|
|
121
122
|
inverse: Oe,
|
|
122
123
|
media: _e
|
|
@@ -129,43 +130,43 @@ const ce = (r, a)=>{
|
|
|
129
130
|
zIndex: 3
|
|
130
131
|
},
|
|
131
132
|
children: /* @__PURE__ */ e("div", {
|
|
132
|
-
className:
|
|
133
|
+
className: oe({
|
|
133
134
|
display: "flex"
|
|
134
135
|
}),
|
|
135
136
|
children: s.map((param, m)=>{
|
|
136
|
-
let { onPress: l , label: d , Icon: t , iconSize:
|
|
137
|
+
let { onPress: l , label: d , Icon: t , iconSize: u = 20 } = param;
|
|
137
138
|
return t ? /* @__PURE__ */ e(Pe, {
|
|
138
139
|
size: he,
|
|
139
140
|
onPress: l,
|
|
140
141
|
"aria-label": d,
|
|
141
|
-
className:
|
|
142
|
+
className: Q,
|
|
142
143
|
style: {
|
|
143
144
|
display: "flex"
|
|
144
145
|
},
|
|
145
146
|
children: /* @__PURE__ */ e("div", {
|
|
146
|
-
className:
|
|
147
|
+
className: p[i],
|
|
147
148
|
children: /* @__PURE__ */ e(t, {
|
|
148
149
|
color: o[i],
|
|
149
|
-
size:
|
|
150
|
+
size: u
|
|
150
151
|
})
|
|
151
152
|
})
|
|
152
153
|
}, m) : /* @__PURE__ */ e("div", {
|
|
153
|
-
className:
|
|
154
|
+
className: Q
|
|
154
155
|
}, m);
|
|
155
156
|
})
|
|
156
157
|
})
|
|
157
|
-
}) : /* @__PURE__ */ e(
|
|
158
|
-
},
|
|
158
|
+
}) : /* @__PURE__ */ e(Ne, {});
|
|
159
|
+
}, Ye = (r)=>r ? typeof r == "number" ? r : ({
|
|
159
160
|
"1:1": 1,
|
|
160
161
|
"16:9": 16 / 9,
|
|
161
162
|
"7:10": 7 / 10,
|
|
162
163
|
"9:10": 9 / 10,
|
|
163
164
|
auto: 0
|
|
164
165
|
})[r] : 0, W = (param)=>{
|
|
165
|
-
let { children: r , width: a = "100%" , height: i = "100%" , minWidth: s , aspectRatio: h , className: o , "aria-label":
|
|
166
|
-
const l =
|
|
166
|
+
let { children: r , width: a = "100%" , height: i = "100%" , minWidth: s , aspectRatio: h , className: o , "aria-label": p } = param;
|
|
167
|
+
const l = Ye(h);
|
|
167
168
|
return /* @__PURE__ */ e("section", {
|
|
168
|
-
"aria-label":
|
|
169
|
+
"aria-label": p,
|
|
169
170
|
className: Ve(o, De),
|
|
170
171
|
style: _object_spread({
|
|
171
172
|
width: a,
|
|
@@ -180,7 +181,7 @@ const ce = (r, a)=>{
|
|
|
180
181
|
width: "100%",
|
|
181
182
|
height: "100%",
|
|
182
183
|
src: r !== null && r !== void 0 ? r : "//:0"
|
|
183
|
-
}),
|
|
184
|
+
}), Ze = {
|
|
184
185
|
loading: {
|
|
185
186
|
showSpinner: "loadingTimeout",
|
|
186
187
|
play: "playing",
|
|
@@ -204,14 +205,14 @@ const ce = (r, a)=>{
|
|
|
204
205
|
error: {
|
|
205
206
|
reset: "loading"
|
|
206
207
|
}
|
|
207
|
-
},
|
|
208
|
+
}, qe = (r, a)=>Ze[r][a] || r, Je = (param)=>/* @__PURE__ */ {
|
|
208
209
|
let { size: r , color: a } = param;
|
|
209
210
|
return e(je, {
|
|
210
211
|
size: r,
|
|
211
212
|
color: a,
|
|
212
213
|
delay: "0"
|
|
213
214
|
});
|
|
214
|
-
},
|
|
215
|
+
}, pe = (r)=>{
|
|
215
216
|
switch(r){
|
|
216
217
|
case "playing":
|
|
217
218
|
case "loading":
|
|
@@ -219,12 +220,12 @@ const ce = (r, a)=>{
|
|
|
219
220
|
case "paused":
|
|
220
221
|
return Ge;
|
|
221
222
|
case "loadingTimeout":
|
|
222
|
-
return
|
|
223
|
+
return Je;
|
|
223
224
|
default:
|
|
224
225
|
return;
|
|
225
226
|
}
|
|
226
|
-
},
|
|
227
|
-
const s = T.useRef(null), [h, o] = T.useReducer(
|
|
227
|
+
}, ue = (r, a, i)=>{
|
|
228
|
+
const s = T.useRef(null), [h, o] = T.useReducer(qe, "loading");
|
|
228
229
|
return T.useEffect(()=>{
|
|
229
230
|
var t;
|
|
230
231
|
const d = setTimeout(()=>o("showSpinner"), 2e3);
|
|
@@ -255,13 +256,13 @@ const ce = (r, a)=>{
|
|
|
255
256
|
}
|
|
256
257
|
};
|
|
257
258
|
}, fe = (param)=>{
|
|
258
|
-
let { headline: r , pretitle: a , pretitleLinesMax: i , title: s , titleLinesMax: h , subtitle: o , subtitleLinesMax:
|
|
259
|
-
const { textPresets: f } =
|
|
259
|
+
let { headline: r , pretitle: a , pretitleLinesMax: i , title: s , titleLinesMax: h , subtitle: o , subtitleLinesMax: p , description: l , descriptionLinesMax: d , extra: t , button: u , buttonLink: m } = param;
|
|
260
|
+
const { textPresets: f } = K(), g = ()=>r ? typeof r == "string" ? /* @__PURE__ */ e(Te, {
|
|
260
261
|
type: "promo",
|
|
261
262
|
children: r
|
|
262
263
|
}) : r : null;
|
|
263
264
|
return /* @__PURE__ */ n("div", {
|
|
264
|
-
className:
|
|
265
|
+
className: oe({
|
|
265
266
|
display: "flex",
|
|
266
267
|
flex: 1,
|
|
267
268
|
justifyContent: "space-between",
|
|
@@ -288,7 +289,7 @@ const ce = (r, a)=>{
|
|
|
288
289
|
hyphens: "auto",
|
|
289
290
|
children: a
|
|
290
291
|
}),
|
|
291
|
-
/* @__PURE__ */ e(
|
|
292
|
+
/* @__PURE__ */ e($, {
|
|
292
293
|
mobileSize: 18,
|
|
293
294
|
mobileLineHeight: "24px",
|
|
294
295
|
desktopSize: 20,
|
|
@@ -300,7 +301,7 @@ const ce = (r, a)=>{
|
|
|
300
301
|
children: s
|
|
301
302
|
}),
|
|
302
303
|
/* @__PURE__ */ e(A, {
|
|
303
|
-
truncate:
|
|
304
|
+
truncate: p,
|
|
304
305
|
as: "div",
|
|
305
306
|
regular: !0,
|
|
306
307
|
hyphens: "auto",
|
|
@@ -326,17 +327,17 @@ const ce = (r, a)=>{
|
|
|
326
327
|
})
|
|
327
328
|
]
|
|
328
329
|
}),
|
|
329
|
-
(
|
|
330
|
-
className:
|
|
331
|
-
children: /* @__PURE__ */ e(
|
|
332
|
-
primaryButton:
|
|
330
|
+
(u || m) && /* @__PURE__ */ e("div", {
|
|
331
|
+
className: ee,
|
|
332
|
+
children: /* @__PURE__ */ e(q, {
|
|
333
|
+
primaryButton: u,
|
|
333
334
|
link: m
|
|
334
335
|
})
|
|
335
336
|
})
|
|
336
337
|
]
|
|
337
338
|
});
|
|
338
|
-
},
|
|
339
|
-
var { media: r , headline: a , pretitle: i , pretitleLinesMax: s , subtitle: h , subtitleLinesMax: o , title:
|
|
339
|
+
}, Sr = /*#__PURE__*/ T.forwardRef((_param, w)=>{
|
|
340
|
+
var { media: r , headline: a , pretitle: i , pretitleLinesMax: s , subtitle: h , subtitleLinesMax: o , title: p , titleLinesMax: l , description: d , descriptionLinesMax: t , extra: u , actions: m , button: f , buttonLink: g , dataAttributes: x , "aria-label": C , onClose: S } = _param, c = _object_without_properties(_param, [
|
|
340
341
|
"media",
|
|
341
342
|
"headline",
|
|
342
343
|
"pretitle",
|
|
@@ -355,12 +356,12 @@ const ce = (r, a)=>{
|
|
|
355
356
|
"aria-label",
|
|
356
357
|
"onClose"
|
|
357
358
|
]);
|
|
358
|
-
const
|
|
359
|
+
const N = c.href || c.to || c.onPress, b = ze;
|
|
359
360
|
return /* @__PURE__ */ n(W, {
|
|
360
|
-
"aria-label":
|
|
361
|
+
"aria-label": C,
|
|
361
362
|
className: _,
|
|
362
363
|
children: [
|
|
363
|
-
/* @__PURE__ */ e(
|
|
364
|
+
/* @__PURE__ */ e(Z, {
|
|
364
365
|
className: P,
|
|
365
366
|
dataAttributes: _object_spread({
|
|
366
367
|
"component-name": "MediaCard"
|
|
@@ -372,9 +373,9 @@ const ce = (r, a)=>{
|
|
|
372
373
|
maybe: !0
|
|
373
374
|
}, c), {
|
|
374
375
|
className: E,
|
|
375
|
-
"aria-label":
|
|
376
|
+
"aria-label": C,
|
|
376
377
|
children: [
|
|
377
|
-
|
|
378
|
+
N && /* @__PURE__ */ e("div", {
|
|
378
379
|
className: b
|
|
379
380
|
}),
|
|
380
381
|
/* @__PURE__ */ n("div", {
|
|
@@ -390,13 +391,13 @@ const ce = (r, a)=>{
|
|
|
390
391
|
headline: a,
|
|
391
392
|
pretitle: i,
|
|
392
393
|
pretitleLinesMax: s,
|
|
393
|
-
title:
|
|
394
|
+
title: p,
|
|
394
395
|
titleLinesMax: l,
|
|
395
396
|
subtitle: h,
|
|
396
397
|
subtitleLinesMax: o,
|
|
397
398
|
description: d,
|
|
398
399
|
descriptionLinesMax: t,
|
|
399
|
-
extra:
|
|
400
|
+
extra: u,
|
|
400
401
|
button: f,
|
|
401
402
|
buttonLink: g
|
|
402
403
|
})
|
|
@@ -406,15 +407,15 @@ const ce = (r, a)=>{
|
|
|
406
407
|
]
|
|
407
408
|
}))
|
|
408
409
|
}),
|
|
409
|
-
/* @__PURE__ */ e(
|
|
410
|
+
/* @__PURE__ */ e(k, {
|
|
410
411
|
onClose: S,
|
|
411
412
|
actions: m,
|
|
412
413
|
type: "media"
|
|
413
414
|
})
|
|
414
415
|
]
|
|
415
416
|
});
|
|
416
|
-
}),
|
|
417
|
-
var { icon: r , headline: a , pretitle: i , pretitleLinesMax: s , title: h , titleLinesMax: o , subtitle:
|
|
417
|
+
}), xr = /*#__PURE__*/ T.forwardRef((_param, w)=>{
|
|
418
|
+
var { icon: r , headline: a , pretitle: i , pretitleLinesMax: s , title: h , titleLinesMax: o , subtitle: p , subtitleLinesMax: l , description: d , descriptionLinesMax: t , extra: u , actions: m , button: f , buttonLink: g , dataAttributes: x , "aria-label": C , onClose: S } = _param, c = _object_without_properties(_param, [
|
|
418
419
|
"icon",
|
|
419
420
|
"headline",
|
|
420
421
|
"pretitle",
|
|
@@ -433,16 +434,16 @@ const ce = (r, a)=>{
|
|
|
433
434
|
"aria-label",
|
|
434
435
|
"onClose"
|
|
435
436
|
]);
|
|
436
|
-
const
|
|
437
|
+
const N = !!r, b = c.href || c.to || c.onPress, z = J, H = ce(m, S), R = {
|
|
437
438
|
marginRight: -16,
|
|
438
439
|
marginTop: -24,
|
|
439
440
|
width: he * H.length
|
|
440
441
|
};
|
|
441
442
|
return /* @__PURE__ */ n(W, {
|
|
442
|
-
"aria-label":
|
|
443
|
+
"aria-label": C,
|
|
443
444
|
className: _,
|
|
444
445
|
children: [
|
|
445
|
-
/* @__PURE__ */ e(
|
|
446
|
+
/* @__PURE__ */ e(Z, {
|
|
446
447
|
className: P,
|
|
447
448
|
dataAttributes: _object_spread({
|
|
448
449
|
"component-name": "DataCard"
|
|
@@ -454,7 +455,7 @@ const ce = (r, a)=>{
|
|
|
454
455
|
maybe: !0
|
|
455
456
|
}, c), {
|
|
456
457
|
className: E,
|
|
457
|
-
"aria-label":
|
|
458
|
+
"aria-label": C,
|
|
458
459
|
children: [
|
|
459
460
|
b && /* @__PURE__ */ e("div", {
|
|
460
461
|
className: z
|
|
@@ -462,42 +463,37 @@ const ce = (r, a)=>{
|
|
|
462
463
|
/* @__PURE__ */ n("div", {
|
|
463
464
|
className: be,
|
|
464
465
|
children: [
|
|
465
|
-
/* @__PURE__ */ n(
|
|
466
|
-
|
|
467
|
-
display: "flex"
|
|
468
|
-
}),
|
|
466
|
+
/* @__PURE__ */ n(Ue, {
|
|
467
|
+
space: 0,
|
|
469
468
|
children: [
|
|
470
469
|
/* @__PURE__ */ n(y, {
|
|
471
470
|
space: 16,
|
|
472
|
-
className: k({
|
|
473
|
-
flex: 1
|
|
474
|
-
}),
|
|
475
471
|
children: [
|
|
476
|
-
|
|
472
|
+
N ? r : null,
|
|
477
473
|
/* @__PURE__ */ e(fe, {
|
|
478
474
|
headline: a,
|
|
479
475
|
pretitle: i,
|
|
480
476
|
pretitleLinesMax: s,
|
|
481
477
|
title: h,
|
|
482
478
|
titleLinesMax: o,
|
|
483
|
-
subtitle:
|
|
479
|
+
subtitle: p,
|
|
484
480
|
subtitleLinesMax: l,
|
|
485
481
|
description: d,
|
|
486
482
|
descriptionLinesMax: t
|
|
487
483
|
})
|
|
488
484
|
]
|
|
489
485
|
}),
|
|
490
|
-
!
|
|
486
|
+
!N && /* @__PURE__ */ e("div", {
|
|
491
487
|
style: R
|
|
492
488
|
})
|
|
493
489
|
]
|
|
494
490
|
}),
|
|
495
|
-
|
|
496
|
-
children:
|
|
491
|
+
u && /* @__PURE__ */ e("div", {
|
|
492
|
+
children: u
|
|
497
493
|
}),
|
|
498
494
|
(f || g) && /* @__PURE__ */ e("div", {
|
|
499
|
-
className:
|
|
500
|
-
children: /* @__PURE__ */ e(
|
|
495
|
+
className: ee,
|
|
496
|
+
children: /* @__PURE__ */ e(q, {
|
|
501
497
|
primaryButton: f,
|
|
502
498
|
link: g
|
|
503
499
|
})
|
|
@@ -507,15 +503,15 @@ const ce = (r, a)=>{
|
|
|
507
503
|
]
|
|
508
504
|
}))
|
|
509
505
|
}),
|
|
510
|
-
/* @__PURE__ */ e(
|
|
506
|
+
/* @__PURE__ */ e(k, {
|
|
511
507
|
onClose: S,
|
|
512
508
|
actions: m,
|
|
513
509
|
type: "default"
|
|
514
510
|
})
|
|
515
511
|
]
|
|
516
512
|
});
|
|
517
|
-
}),
|
|
518
|
-
var { icon: r , title: a , titleLinesMax: i , subtitle: s , subtitleLinesMax: h , dataAttributes: o , "aria-label":
|
|
513
|
+
}), wr = /*#__PURE__*/ T.forwardRef((_param, u)=>{
|
|
514
|
+
var { icon: r , title: a , titleLinesMax: i , subtitle: s , subtitleLinesMax: h , dataAttributes: o , "aria-label": p , extra: l , isInverse: d = !1 } = _param, t = _object_without_properties(_param, [
|
|
519
515
|
"icon",
|
|
520
516
|
"title",
|
|
521
517
|
"titleLinesMax",
|
|
@@ -526,15 +522,15 @@ const ce = (r, a)=>{
|
|
|
526
522
|
"extra",
|
|
527
523
|
"isInverse"
|
|
528
524
|
]);
|
|
529
|
-
const m = t.href || t.to || t.onPress, f = d ?
|
|
525
|
+
const m = t.href || t.to || t.onPress, f = d ? te : J;
|
|
530
526
|
return /* @__PURE__ */ e(W, {
|
|
531
527
|
className: _,
|
|
532
|
-
children: /* @__PURE__ */ e(
|
|
528
|
+
children: /* @__PURE__ */ e(Z, {
|
|
533
529
|
className: P,
|
|
534
530
|
dataAttributes: _object_spread({
|
|
535
531
|
"component-name": "SnapCard"
|
|
536
532
|
}, o),
|
|
537
|
-
ref:
|
|
533
|
+
ref: u,
|
|
538
534
|
isInverse: d,
|
|
539
535
|
width: "100%",
|
|
540
536
|
height: "100%",
|
|
@@ -542,7 +538,7 @@ const ce = (r, a)=>{
|
|
|
542
538
|
maybe: !0
|
|
543
539
|
}, t), {
|
|
544
540
|
className: E,
|
|
545
|
-
"aria-label":
|
|
541
|
+
"aria-label": p,
|
|
546
542
|
children: [
|
|
547
543
|
m && /* @__PURE__ */ e("div", {
|
|
548
544
|
className: f
|
|
@@ -587,8 +583,8 @@ const ce = (r, a)=>{
|
|
|
587
583
|
}))
|
|
588
584
|
})
|
|
589
585
|
});
|
|
590
|
-
}),
|
|
591
|
-
var { isInverse: r , backgroundImage: a , backgroundVideo: i , backgroundVideoRef: s , poster: h , icon: o , headline:
|
|
586
|
+
}), Ke = 264, ve = /*#__PURE__*/ T.forwardRef((_param, G)=>{
|
|
587
|
+
var { isInverse: r , backgroundImage: a , backgroundVideo: i , backgroundVideoRef: s , poster: h , icon: o , headline: p , pretitle: l , pretitleLinesMax: d , title: t , titleLinesMax: u , description: m , descriptionLinesMax: f , extra: g , button: x , secondaryButton: C , onClose: S , actions: c , buttonLink: w , dataAttributes: N , width: b , height: z , aspectRatio: H , "aria-label": R } = _param, M = _object_without_properties(_param, [
|
|
592
588
|
"isInverse",
|
|
593
589
|
"backgroundImage",
|
|
594
590
|
"backgroundVideo",
|
|
@@ -614,11 +610,11 @@ const ce = (r, a)=>{
|
|
|
614
610
|
"aspectRatio",
|
|
615
611
|
"aria-label"
|
|
616
612
|
]);
|
|
617
|
-
const B = me(a), { video: X , videoStatus: j , onVideoControlPress:
|
|
613
|
+
const B = me(a), { video: X , videoStatus: j , onVideoControlPress: U } = ue(i, h, s);
|
|
618
614
|
i && (c = [
|
|
619
615
|
{
|
|
620
|
-
Icon:
|
|
621
|
-
onPress:
|
|
616
|
+
Icon: pe(j),
|
|
617
|
+
onPress: U,
|
|
622
618
|
label: "Video controls",
|
|
623
619
|
iconSize: j === "loadingTimeout" ? 16 : 12,
|
|
624
620
|
iconColor: v.colors.inverse,
|
|
@@ -626,19 +622,19 @@ const ce = (r, a)=>{
|
|
|
626
622
|
iconBackgroundInverse: V
|
|
627
623
|
}
|
|
628
624
|
]);
|
|
629
|
-
const F = le(), I = !!a || !!i,
|
|
625
|
+
const F = le(), I = !!a || !!i, Y = I ? "0 0 16px rgba(0,0,0,0.4)" : void 0, ye = (c == null ? void 0 : c.length) || S, ge = M.href || M.to || M.onPress, Ce = a || i ? se : r ? te : J;
|
|
630
626
|
return /* @__PURE__ */ n(W, {
|
|
631
627
|
width: b,
|
|
632
628
|
height: z,
|
|
633
629
|
aspectRatio: H,
|
|
634
630
|
"aria-label": R,
|
|
635
|
-
minWidth:
|
|
631
|
+
minWidth: Ke,
|
|
636
632
|
className: _,
|
|
637
633
|
children: [
|
|
638
|
-
/* @__PURE__ */ e(
|
|
634
|
+
/* @__PURE__ */ e(L, {
|
|
639
635
|
borderRadius: v.borderRadii.legacyDisplay,
|
|
640
636
|
className: P,
|
|
641
|
-
dataAttributes:
|
|
637
|
+
dataAttributes: N,
|
|
642
638
|
ref: G,
|
|
643
639
|
width: "100%",
|
|
644
640
|
minHeight: "100%",
|
|
@@ -651,20 +647,20 @@ const ce = (r, a)=>{
|
|
|
651
647
|
"aria-label": R,
|
|
652
648
|
children: [
|
|
653
649
|
ge && /* @__PURE__ */ e("div", {
|
|
654
|
-
className:
|
|
650
|
+
className: Ce
|
|
655
651
|
}),
|
|
656
652
|
/* @__PURE__ */ n("div", {
|
|
657
|
-
className:
|
|
653
|
+
className: re,
|
|
658
654
|
children: [
|
|
659
655
|
/* @__PURE__ */ e(de, {
|
|
660
656
|
isInverse: F,
|
|
661
657
|
children: /* @__PURE__ */ e("div", {
|
|
662
|
-
className:
|
|
658
|
+
className: ae,
|
|
663
659
|
children: i ? X : a ? B : void 0
|
|
664
660
|
})
|
|
665
661
|
}),
|
|
666
662
|
/* @__PURE__ */ n("div", {
|
|
667
|
-
className:
|
|
663
|
+
className: ie,
|
|
668
664
|
style: {
|
|
669
665
|
paddingTop: I && !o && !ye ? 0 : 24
|
|
670
666
|
},
|
|
@@ -680,7 +676,7 @@ const ce = (r, a)=>{
|
|
|
680
676
|
paddingX: 24,
|
|
681
677
|
paddingTop: I ? 40 : 0,
|
|
682
678
|
paddingBottom: 24,
|
|
683
|
-
className: I ?
|
|
679
|
+
className: I ? ne : void 0,
|
|
684
680
|
children: /* @__PURE__ */ n(y, {
|
|
685
681
|
space: 24,
|
|
686
682
|
children: [
|
|
@@ -689,11 +685,11 @@ const ce = (r, a)=>{
|
|
|
689
685
|
/* @__PURE__ */ n(y, {
|
|
690
686
|
space: 8,
|
|
691
687
|
children: [
|
|
692
|
-
(
|
|
688
|
+
(p || l || t) && /* @__PURE__ */ e("header", {
|
|
693
689
|
children: /* @__PURE__ */ n(y, {
|
|
694
690
|
space: 16,
|
|
695
691
|
children: [
|
|
696
|
-
|
|
692
|
+
p,
|
|
697
693
|
/* @__PURE__ */ n(y, {
|
|
698
694
|
space: 4,
|
|
699
695
|
children: [
|
|
@@ -702,14 +698,14 @@ const ce = (r, a)=>{
|
|
|
702
698
|
truncate: d,
|
|
703
699
|
as: "div",
|
|
704
700
|
regular: !0,
|
|
705
|
-
textShadow:
|
|
701
|
+
textShadow: Y,
|
|
706
702
|
children: l
|
|
707
703
|
}),
|
|
708
704
|
/* @__PURE__ */ e(Se, {
|
|
709
705
|
forceMobileSizes: !0,
|
|
710
|
-
truncate:
|
|
706
|
+
truncate: u,
|
|
711
707
|
as: "h3",
|
|
712
|
-
textShadow:
|
|
708
|
+
textShadow: Y,
|
|
713
709
|
hyphens: "auto",
|
|
714
710
|
children: t
|
|
715
711
|
})
|
|
@@ -724,7 +720,7 @@ const ce = (r, a)=>{
|
|
|
724
720
|
as: "p",
|
|
725
721
|
regular: !0,
|
|
726
722
|
color: v.colors.textSecondary,
|
|
727
|
-
textShadow:
|
|
723
|
+
textShadow: Y,
|
|
728
724
|
hyphens: "auto",
|
|
729
725
|
children: m
|
|
730
726
|
})
|
|
@@ -733,9 +729,9 @@ const ce = (r, a)=>{
|
|
|
733
729
|
g
|
|
734
730
|
]
|
|
735
731
|
}),
|
|
736
|
-
(x ||
|
|
732
|
+
(x || C || w) && /* @__PURE__ */ e(q, {
|
|
737
733
|
primaryButton: x,
|
|
738
|
-
secondaryButton:
|
|
734
|
+
secondaryButton: C,
|
|
739
735
|
link: w
|
|
740
736
|
})
|
|
741
737
|
]
|
|
@@ -748,14 +744,14 @@ const ce = (r, a)=>{
|
|
|
748
744
|
]
|
|
749
745
|
}))
|
|
750
746
|
}),
|
|
751
|
-
/* @__PURE__ */ e(
|
|
747
|
+
/* @__PURE__ */ e(k, {
|
|
752
748
|
onClose: S,
|
|
753
749
|
actions: c,
|
|
754
750
|
type: a || i ? "media" : r ? "inverse" : "default"
|
|
755
751
|
})
|
|
756
752
|
]
|
|
757
753
|
});
|
|
758
|
-
}),
|
|
754
|
+
}), Br = /*#__PURE__*/ T.forwardRef((_param, i)=>/* @__PURE__ */ {
|
|
759
755
|
var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
|
|
760
756
|
"dataAttributes"
|
|
761
757
|
]);
|
|
@@ -766,7 +762,7 @@ const ce = (r, a)=>{
|
|
|
766
762
|
"component-name": "DisplayMediaCard"
|
|
767
763
|
})
|
|
768
764
|
}));
|
|
769
|
-
}),
|
|
765
|
+
}), Ir = /*#__PURE__*/ T.forwardRef((_param, i)=>/* @__PURE__ */ {
|
|
770
766
|
var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
|
|
771
767
|
"dataAttributes"
|
|
772
768
|
]);
|
|
@@ -776,8 +772,8 @@ const ce = (r, a)=>{
|
|
|
776
772
|
"component-name": "DisplayDataCard"
|
|
777
773
|
})
|
|
778
774
|
}));
|
|
779
|
-
}),
|
|
780
|
-
var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: s , backgroundVideoRef: h , width: o , height:
|
|
775
|
+
}), Qe = 140, Ar = /*#__PURE__*/ T.forwardRef((_param, b)=>{
|
|
776
|
+
var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: s , backgroundVideoRef: h , width: o , height: p , aspectRatio: l = "7:10" , ariaLabel: d , actions: t , onClose: u , icon: m , headline: f , pretitle: g , pretitleLinesMax: x , title: C , titleLinesMax: S , description: c , descriptionLinesMax: w } = _param, N = _object_without_properties(_param, [
|
|
781
777
|
"dataAttributes",
|
|
782
778
|
"backgroundImage",
|
|
783
779
|
"backgroundVideo",
|
|
@@ -798,10 +794,10 @@ const ce = (r, a)=>{
|
|
|
798
794
|
"description",
|
|
799
795
|
"descriptionLinesMax"
|
|
800
796
|
]);
|
|
801
|
-
const z = me(a), { video: H , videoStatus: R , onVideoControlPress: M } =
|
|
797
|
+
const z = me(a), { video: H , videoStatus: R , onVideoControlPress: M } = ue(i, s, h);
|
|
802
798
|
i && (t = [
|
|
803
799
|
{
|
|
804
|
-
Icon:
|
|
800
|
+
Icon: pe(R),
|
|
805
801
|
onPress: M,
|
|
806
802
|
label: "Video controls",
|
|
807
803
|
iconSize: R === "loadingTimeout" ? 16 : 12,
|
|
@@ -810,16 +806,16 @@ const ce = (r, a)=>{
|
|
|
810
806
|
iconBackgroundInverse: V
|
|
811
807
|
}
|
|
812
808
|
]);
|
|
813
|
-
const G = le(), B = !!a || !!i, X = B ? "0 0 16px rgba(0,0,0,0.4)" : void 0, j = (t == null ? void 0 : t.length) ||
|
|
809
|
+
const G = le(), B = !!a || !!i, X = B ? "0 0 16px rgba(0,0,0,0.4)" : void 0, j = (t == null ? void 0 : t.length) || u, { textPresets: U } = K(), F = N.href || N.to || N.onPress, I = se;
|
|
814
810
|
return /* @__PURE__ */ n(W, {
|
|
815
811
|
width: o,
|
|
816
|
-
height:
|
|
817
|
-
minWidth:
|
|
812
|
+
height: p,
|
|
813
|
+
minWidth: Qe,
|
|
818
814
|
aspectRatio: l,
|
|
819
815
|
"aria-label": d,
|
|
820
816
|
className: _,
|
|
821
817
|
children: [
|
|
822
|
-
/* @__PURE__ */ e(
|
|
818
|
+
/* @__PURE__ */ e(L, {
|
|
823
819
|
borderRadius: v.borderRadii.legacyDisplay,
|
|
824
820
|
className: P,
|
|
825
821
|
dataAttributes: r,
|
|
@@ -830,7 +826,7 @@ const ce = (r, a)=>{
|
|
|
830
826
|
background: a || i ? G ? v.colors.backgroundContainerBrandOverInverse : v.colors.backgroundContainer : void 0,
|
|
831
827
|
children: /* @__PURE__ */ n(O, _object_spread_props(_object_spread({
|
|
832
828
|
maybe: !0
|
|
833
|
-
},
|
|
829
|
+
}, N), {
|
|
834
830
|
className: E,
|
|
835
831
|
"aria-label": d,
|
|
836
832
|
children: [
|
|
@@ -838,17 +834,17 @@ const ce = (r, a)=>{
|
|
|
838
834
|
className: I
|
|
839
835
|
}),
|
|
840
836
|
/* @__PURE__ */ n("div", {
|
|
841
|
-
className:
|
|
837
|
+
className: re,
|
|
842
838
|
children: [
|
|
843
839
|
/* @__PURE__ */ e(de, {
|
|
844
840
|
isInverse: G,
|
|
845
841
|
children: /* @__PURE__ */ e("div", {
|
|
846
|
-
className:
|
|
842
|
+
className: ae,
|
|
847
843
|
children: i ? H : a ? z : void 0
|
|
848
844
|
})
|
|
849
845
|
}),
|
|
850
846
|
/* @__PURE__ */ n("div", {
|
|
851
|
-
className:
|
|
847
|
+
className: ie,
|
|
852
848
|
style: {
|
|
853
849
|
paddingTop: B && !m && !j ? 0 : 24
|
|
854
850
|
},
|
|
@@ -858,20 +854,20 @@ const ce = (r, a)=>{
|
|
|
858
854
|
paddingX: 24,
|
|
859
855
|
children: m
|
|
860
856
|
}) : /* @__PURE__ */ e(D, {
|
|
861
|
-
paddingBottom: t != null && t.length ||
|
|
857
|
+
paddingBottom: t != null && t.length || u ? B ? 24 : 64 : 0
|
|
862
858
|
}),
|
|
863
859
|
/* @__PURE__ */ e(D, {
|
|
864
860
|
paddingX: 16,
|
|
865
861
|
paddingTop: B ? 40 : 0,
|
|
866
862
|
paddingBottom: 24,
|
|
867
|
-
className: B ?
|
|
863
|
+
className: B ? ne : void 0,
|
|
868
864
|
children: /* @__PURE__ */ e(y, {
|
|
869
865
|
space: 24,
|
|
870
866
|
children: /* @__PURE__ */ e("div", {
|
|
871
867
|
children: /* @__PURE__ */ n(y, {
|
|
872
868
|
space: 8,
|
|
873
869
|
children: [
|
|
874
|
-
(f || g ||
|
|
870
|
+
(f || g || C) && /* @__PURE__ */ e("header", {
|
|
875
871
|
children: /* @__PURE__ */ n(y, {
|
|
876
872
|
space: 16,
|
|
877
873
|
children: [
|
|
@@ -888,16 +884,16 @@ const ce = (r, a)=>{
|
|
|
888
884
|
hyphens: "auto",
|
|
889
885
|
children: g
|
|
890
886
|
}),
|
|
891
|
-
/* @__PURE__ */ e(
|
|
887
|
+
/* @__PURE__ */ e($, {
|
|
892
888
|
desktopSize: 20,
|
|
893
889
|
mobileSize: 18,
|
|
894
890
|
mobileLineHeight: "24px",
|
|
895
891
|
desktopLineHeight: "28px",
|
|
896
892
|
truncate: S,
|
|
897
|
-
weight:
|
|
893
|
+
weight: U.cardTitle.weight,
|
|
898
894
|
as: "h3",
|
|
899
895
|
hyphens: "auto",
|
|
900
|
-
children:
|
|
896
|
+
children: C
|
|
901
897
|
})
|
|
902
898
|
]
|
|
903
899
|
})
|
|
@@ -925,12 +921,12 @@ const ce = (r, a)=>{
|
|
|
925
921
|
]
|
|
926
922
|
}))
|
|
927
923
|
}),
|
|
928
|
-
/* @__PURE__ */ e(
|
|
929
|
-
onClose:
|
|
924
|
+
/* @__PURE__ */ e(k, {
|
|
925
|
+
onClose: u,
|
|
930
926
|
actions: t,
|
|
931
927
|
type: "media"
|
|
932
928
|
})
|
|
933
929
|
]
|
|
934
930
|
});
|
|
935
931
|
});
|
|
936
|
-
export {
|
|
932
|
+
export { xr as DataCard, Ir as DisplayDataCard, Br as DisplayMediaCard, Sr as MediaCard, Ar as PosterCard, wr as SnapCard };
|