@telefonica/mistica 14.32.1 → 14.33.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.
- package/css/mistica.css +1 -1
- package/dist/card.js +107 -105
- package/dist/community/blocks.d.ts +3 -3
- package/dist/credit-card-expiration-field.js +57 -50
- package/dist/highlighted-card.js +4 -3
- package/dist/hooks.js +53 -52
- package/dist/maybe-dismissable.js +7 -6
- package/dist/package-version.js +1 -1
- package/dist/responsive-layout.css-mistica.js +7 -10
- package/dist/responsive-layout.css.d.ts +0 -1
- package/dist/responsive-layout.js +17 -17
- package/dist/tabs.css-mistica.js +26 -14
- package/dist/tabs.css.d.ts +3 -1
- package/dist/tabs.js +37 -32
- package/dist-es/card.js +103 -101
- package/dist-es/credit-card-expiration-field.js +63 -56
- package/dist-es/highlighted-card.js +13 -12
- package/dist-es/hooks.js +49 -48
- package/dist-es/maybe-dismissable.js +16 -15
- package/dist-es/package-version.js +1 -1
- package/dist-es/responsive-layout.css-mistica.js +3 -3
- package/dist-es/responsive-layout.js +21 -21
- package/dist-es/style.css +1 -1
- package/dist-es/tabs.css-mistica.js +14 -8
- package/dist-es/tabs.js +58 -53
- package/package.json +1 -1
package/dist/card.js
CHANGED
|
@@ -10,37 +10,37 @@ function _export(target, all) {
|
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
12
|
CardActionIconButton: function() {
|
|
13
|
-
return
|
|
13
|
+
return er;
|
|
14
14
|
},
|
|
15
15
|
CardActionSpinner: function() {
|
|
16
|
-
return
|
|
16
|
+
return ir;
|
|
17
17
|
},
|
|
18
18
|
CardActionsGroup: function() {
|
|
19
19
|
return U;
|
|
20
20
|
},
|
|
21
21
|
DataCard: function() {
|
|
22
|
-
return
|
|
22
|
+
return Hr;
|
|
23
23
|
},
|
|
24
24
|
DisplayDataCard: function() {
|
|
25
|
-
return
|
|
25
|
+
return Gr;
|
|
26
26
|
},
|
|
27
27
|
DisplayMediaCard: function() {
|
|
28
|
-
return
|
|
28
|
+
return Er;
|
|
29
29
|
},
|
|
30
30
|
MediaCard: function() {
|
|
31
|
-
return
|
|
31
|
+
return zr;
|
|
32
32
|
},
|
|
33
33
|
NakedCard: function() {
|
|
34
|
-
return
|
|
34
|
+
return Dr;
|
|
35
35
|
},
|
|
36
36
|
PosterCard: function() {
|
|
37
|
-
return
|
|
37
|
+
return Pr;
|
|
38
38
|
},
|
|
39
39
|
SmallNakedCard: function() {
|
|
40
|
-
return
|
|
40
|
+
return Or;
|
|
41
41
|
},
|
|
42
42
|
SnapCard: function() {
|
|
43
|
-
return
|
|
43
|
+
return Vr;
|
|
44
44
|
},
|
|
45
45
|
TOP_ACTION_BUTTON_SIZE: function() {
|
|
46
46
|
return xe;
|
|
@@ -196,17 +196,17 @@ function _object_without_properties_loose(source, excluded) {
|
|
|
196
196
|
}
|
|
197
197
|
return target;
|
|
198
198
|
}
|
|
199
|
-
const be = (
|
|
200
|
-
const { texts: i } = (0, _hooks.useTheme)(), t =
|
|
201
|
-
...
|
|
199
|
+
const be = (r, a)=>{
|
|
200
|
+
const { texts: i } = (0, _hooks.useTheme)(), t = r ? [
|
|
201
|
+
...r
|
|
202
202
|
] : [];
|
|
203
|
-
return
|
|
203
|
+
return a && t.push({
|
|
204
204
|
label: i.closeButtonLabel,
|
|
205
|
-
onPress:
|
|
205
|
+
onPress: a,
|
|
206
206
|
Icon: _iconcloseregular.default
|
|
207
207
|
}), t;
|
|
208
|
-
}, Te = /*#__PURE__*/ _react.createContext("default"), xe = 48,
|
|
209
|
-
var { Icon:
|
|
208
|
+
}, Te = /*#__PURE__*/ _react.createContext("default"), xe = 48, er = (_param)=>{
|
|
209
|
+
var { Icon: r , label: a } = _param, i = _object_without_properties(_param, [
|
|
210
210
|
"Icon",
|
|
211
211
|
"label"
|
|
212
212
|
]);
|
|
@@ -216,7 +216,7 @@ const be = (a, r)=>{
|
|
|
216
216
|
media: "#000000"
|
|
217
217
|
};
|
|
218
218
|
return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, _object_spread_props(_object_spread({}, i), {
|
|
219
|
-
"aria-label":
|
|
219
|
+
"aria-label": a,
|
|
220
220
|
size: xe,
|
|
221
221
|
className: _cardcssmistica.cardActionIconButton,
|
|
222
222
|
style: {
|
|
@@ -228,58 +228,58 @@ const be = (a, r)=>{
|
|
|
228
228
|
inverse: _cardcssmistica.cardActionInverse,
|
|
229
229
|
media: _cardcssmistica.cardActionMedia
|
|
230
230
|
}[t],
|
|
231
|
-
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(
|
|
231
|
+
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(r, {
|
|
232
232
|
color: c[t],
|
|
233
233
|
size: 20
|
|
234
234
|
})
|
|
235
235
|
})
|
|
236
236
|
}));
|
|
237
237
|
}, U = (param)=>{
|
|
238
|
-
let { actions:
|
|
239
|
-
const c = be(
|
|
238
|
+
let { actions: r , padding: a = 8 , onClose: i , type: t = "default" } = param;
|
|
239
|
+
const c = be(r, i);
|
|
240
240
|
return c.length > 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Te.Provider, {
|
|
241
241
|
value: t,
|
|
242
242
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
243
243
|
style: {
|
|
244
244
|
position: "absolute",
|
|
245
|
-
right:
|
|
246
|
-
top:
|
|
245
|
+
right: a,
|
|
246
|
+
top: a,
|
|
247
247
|
zIndex: 3
|
|
248
248
|
},
|
|
249
249
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
250
250
|
className: (0, _sprinklescssmistica.sprinkles)({
|
|
251
251
|
display: "flex"
|
|
252
252
|
}),
|
|
253
|
-
children: c.map((d, l)=>"label" in d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(
|
|
253
|
+
children: c.map((d, l)=>"label" in d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(er, _object_spread({}, d), l) : d)
|
|
254
254
|
})
|
|
255
255
|
})
|
|
256
256
|
}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
|
|
257
|
-
},
|
|
257
|
+
}, rr = (r)=>r ? typeof r == "number" ? r : ({
|
|
258
258
|
"1:1": 1,
|
|
259
259
|
"16:9": 16 / 9,
|
|
260
260
|
"7:10": 7 / 10,
|
|
261
261
|
"9:10": 9 / 10,
|
|
262
262
|
auto: 0
|
|
263
|
-
})[
|
|
264
|
-
let { children:
|
|
265
|
-
const u =
|
|
263
|
+
})[r] : 0, P = /*#__PURE__*/ _react.forwardRef((param, l)=>{
|
|
264
|
+
let { children: r , width: a = "100%" , height: i = "100%" , aspectRatio: t , dataAttributes: c , className: o , "aria-label": d } = param;
|
|
265
|
+
const u = rr(t);
|
|
266
266
|
return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c)), {
|
|
267
267
|
ref: l,
|
|
268
268
|
"aria-label": d,
|
|
269
269
|
className: (0, _classnames.default)(o, _cardcssmistica.cardContainer),
|
|
270
270
|
style: _object_spread({
|
|
271
|
-
width:
|
|
271
|
+
width: a,
|
|
272
272
|
height: i
|
|
273
273
|
}, u ? (0, _dynamic.assignInlineVars)({
|
|
274
274
|
[_cardcssmistica.vars.aspectRatio]: String(u)
|
|
275
275
|
}) : {}),
|
|
276
|
-
children:
|
|
276
|
+
children: r
|
|
277
277
|
}));
|
|
278
|
-
}), Ae = (
|
|
278
|
+
}), Ae = (r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
|
|
279
279
|
width: "100%",
|
|
280
280
|
height: "100%",
|
|
281
|
-
src:
|
|
282
|
-
}),
|
|
281
|
+
src: r || ""
|
|
282
|
+
}), ar = {
|
|
283
283
|
loading: {
|
|
284
284
|
showSpinner: "loadingTimeout",
|
|
285
285
|
play: "playing",
|
|
@@ -294,36 +294,38 @@ const be = (a, r)=>{
|
|
|
294
294
|
},
|
|
295
295
|
playing: {
|
|
296
296
|
pause: "paused",
|
|
297
|
-
reset: "loading"
|
|
297
|
+
reset: "loading",
|
|
298
|
+
fail: "error"
|
|
298
299
|
},
|
|
299
300
|
paused: {
|
|
300
301
|
play: "playing",
|
|
301
|
-
reset: "loading"
|
|
302
|
+
reset: "loading",
|
|
303
|
+
fail: "error"
|
|
302
304
|
},
|
|
303
305
|
error: {
|
|
304
306
|
reset: "loading"
|
|
305
307
|
}
|
|
306
|
-
},
|
|
307
|
-
let { color:
|
|
308
|
+
}, nr = (r, a)=>ar[r][a] || r, ir = (param)=>/* @__PURE__ */ {
|
|
309
|
+
let { color: r } = param;
|
|
308
310
|
return (0, _jsxruntime.jsx)(_spinner.default, {
|
|
309
|
-
color:
|
|
311
|
+
color: r,
|
|
310
312
|
size: 16,
|
|
311
313
|
delay: "0"
|
|
312
314
|
});
|
|
313
315
|
}, Y = (param)=>/* @__PURE__ */ {
|
|
314
|
-
let { color:
|
|
316
|
+
let { color: r } = param;
|
|
315
317
|
return (0, _jsxruntime.jsx)(_iconpausefilled.default, {
|
|
316
|
-
color:
|
|
318
|
+
color: r,
|
|
317
319
|
size: 12
|
|
318
320
|
});
|
|
319
|
-
},
|
|
320
|
-
let { color:
|
|
321
|
+
}, tr = (param)=>/* @__PURE__ */ {
|
|
322
|
+
let { color: r } = param;
|
|
321
323
|
return (0, _jsxruntime.jsx)(_iconplayfilled.default, {
|
|
322
|
-
color:
|
|
324
|
+
color: r,
|
|
323
325
|
size: 12
|
|
324
326
|
});
|
|
325
|
-
}, Ie = (
|
|
326
|
-
const { texts: t } = (0, _hooks.useTheme)(), c = _react.useRef(null), [o, d] = _react.useReducer(
|
|
327
|
+
}, Ie = (r, a, i)=>{
|
|
328
|
+
const { texts: t } = (0, _hooks.useTheme)(), c = _react.useRef(null), [o, d] = _react.useReducer(nr, "loading");
|
|
327
329
|
_react.useEffect(()=>{
|
|
328
330
|
var h;
|
|
329
331
|
const s = setTimeout(()=>d("showSpinner"), 2e3);
|
|
@@ -331,21 +333,21 @@ const be = (a, r)=>{
|
|
|
331
333
|
clearTimeout(s), d("reset");
|
|
332
334
|
};
|
|
333
335
|
}, [
|
|
334
|
-
|
|
336
|
+
r
|
|
335
337
|
]);
|
|
336
|
-
const l = _react.useMemo(()=>
|
|
338
|
+
const l = _react.useMemo(()=>r !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
|
|
337
339
|
ref: (0, _common.combineRefs)(c, i),
|
|
338
|
-
src:
|
|
340
|
+
src: r,
|
|
339
341
|
width: "100%",
|
|
340
342
|
height: "100%",
|
|
341
|
-
poster:
|
|
343
|
+
poster: a,
|
|
342
344
|
onError: ()=>d("fail"),
|
|
343
345
|
onPause: ()=>d("pause"),
|
|
344
346
|
onPlay: ()=>d("play")
|
|
345
347
|
}) : void 0, [
|
|
346
348
|
i,
|
|
347
|
-
|
|
348
|
-
|
|
349
|
+
r,
|
|
350
|
+
a
|
|
349
351
|
]), u = ()=>{
|
|
350
352
|
const s = c.current;
|
|
351
353
|
s && (o === "loading" ? d("showSpinner") : o === "paused" ? s.play() : o === "playing" && s.pause());
|
|
@@ -357,8 +359,8 @@ const be = (a, r)=>{
|
|
|
357
359
|
Icon: {
|
|
358
360
|
playing: Y,
|
|
359
361
|
loading: Y,
|
|
360
|
-
paused:
|
|
361
|
-
loadingTimeout: (0, _platform.isRunningAcceptanceTest)() ? Y :
|
|
362
|
+
paused: tr,
|
|
363
|
+
loadingTimeout: (0, _platform.isRunningAcceptanceTest)() ? Y : ir
|
|
362
364
|
}[o],
|
|
363
365
|
onPress: u,
|
|
364
366
|
label: {
|
|
@@ -374,11 +376,11 @@ const be = (a, r)=>{
|
|
|
374
376
|
videoAction: m
|
|
375
377
|
};
|
|
376
378
|
}, te = (param)=>{
|
|
377
|
-
let { headline:
|
|
378
|
-
const { textPresets: f } = (0, _hooks.useTheme)(), g = ()=>
|
|
379
|
+
let { headline: r , pretitle: a , pretitleLinesMax: i , title: t , titleLinesMax: c , subtitle: o , subtitleLinesMax: d , description: l , descriptionLinesMax: u , extra: m , button: s , buttonLink: h } = param;
|
|
380
|
+
const { textPresets: f } = (0, _hooks.useTheme)(), g = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
|
|
379
381
|
type: "promo",
|
|
380
|
-
children:
|
|
381
|
-
}) :
|
|
382
|
+
children: r
|
|
383
|
+
}) : r : null;
|
|
382
384
|
return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
|
|
383
385
|
className: (0, _sprinklescssmistica.sprinkles)({
|
|
384
386
|
display: "flex",
|
|
@@ -392,7 +394,7 @@ const be = (a, r)=>{
|
|
|
392
394
|
/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
|
|
393
395
|
space: 8,
|
|
394
396
|
children: [
|
|
395
|
-
(
|
|
397
|
+
(r || a || t || o) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
|
|
396
398
|
children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
|
|
397
399
|
space: 8,
|
|
398
400
|
children: [
|
|
@@ -400,12 +402,12 @@ const be = (a, r)=>{
|
|
|
400
402
|
/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
|
|
401
403
|
space: 4,
|
|
402
404
|
children: [
|
|
403
|
-
|
|
405
|
+
a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
|
|
404
406
|
truncate: i,
|
|
405
407
|
as: "div",
|
|
406
408
|
regular: !0,
|
|
407
409
|
hyphens: "auto",
|
|
408
|
-
children:
|
|
410
|
+
children: a
|
|
409
411
|
}),
|
|
410
412
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
|
|
411
413
|
mobileSize: 18,
|
|
@@ -454,8 +456,8 @@ const be = (a, r)=>{
|
|
|
454
456
|
})
|
|
455
457
|
]
|
|
456
458
|
});
|
|
457
|
-
},
|
|
458
|
-
var { media:
|
|
459
|
+
}, zr = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
|
|
460
|
+
var { media: r , icon: a , headline: i , pretitle: t , pretitleLinesMax: c , subtitle: o , subtitleLinesMax: d , title: l , titleLinesMax: u , description: m , descriptionLinesMax: s , extra: h , actions: f , button: g , buttonLink: w , dataAttributes: T , "aria-label": b , onClose: C } = _param, p = _object_without_properties(_param, [
|
|
459
461
|
"media",
|
|
460
462
|
"icon",
|
|
461
463
|
"headline",
|
|
@@ -502,7 +504,7 @@ const be = (a, r)=>{
|
|
|
502
504
|
children: [
|
|
503
505
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(_image.MediaBorderRadiusProvider, {
|
|
504
506
|
value: !1,
|
|
505
|
-
children:
|
|
507
|
+
children: r
|
|
506
508
|
}),
|
|
507
509
|
/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
508
510
|
className: _cardcssmistica.mediaCardContent,
|
|
@@ -521,7 +523,7 @@ const be = (a, r)=>{
|
|
|
521
523
|
buttonLink: w
|
|
522
524
|
})
|
|
523
525
|
}),
|
|
524
|
-
|
|
526
|
+
a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
|
|
525
527
|
className: _cardcssmistica.mediaCardIcon,
|
|
526
528
|
paddingLeft: {
|
|
527
529
|
mobile: 16,
|
|
@@ -531,7 +533,7 @@ const be = (a, r)=>{
|
|
|
531
533
|
mobile: 16,
|
|
532
534
|
desktop: 24
|
|
533
535
|
},
|
|
534
|
-
children:
|
|
536
|
+
children: a
|
|
535
537
|
})
|
|
536
538
|
]
|
|
537
539
|
})
|
|
@@ -545,8 +547,8 @@ const be = (a, r)=>{
|
|
|
545
547
|
})
|
|
546
548
|
]
|
|
547
549
|
});
|
|
548
|
-
}),
|
|
549
|
-
var { media:
|
|
550
|
+
}), Dr = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
|
|
551
|
+
var { media: r , icon: a , headline: i , pretitle: t , pretitleLinesMax: c , subtitle: o , subtitleLinesMax: d , title: l , titleLinesMax: u , description: m , descriptionLinesMax: s , extra: h , actions: f , button: g , buttonLink: w , dataAttributes: T , "aria-label": b , onClose: C } = _param, p = _object_without_properties(_param, [
|
|
550
552
|
"media",
|
|
551
553
|
"icon",
|
|
552
554
|
"headline",
|
|
@@ -566,7 +568,7 @@ const be = (a, r)=>{
|
|
|
566
568
|
"aria-label",
|
|
567
569
|
"onClose"
|
|
568
570
|
]);
|
|
569
|
-
const A = p.href || p.to || p.onPress, D =
|
|
571
|
+
const A = p.href || p.to || p.onPress, D = r && r.type === _image.default && r.props.circular;
|
|
570
572
|
return /* @__PURE__ */ (0, _jsxruntime.jsxs)(P, {
|
|
571
573
|
ref: M,
|
|
572
574
|
dataAttributes: _object_spread({
|
|
@@ -593,7 +595,7 @@ const be = (a, r)=>{
|
|
|
593
595
|
[_cardcssmistica.circularMediaOverlay]: D
|
|
594
596
|
})
|
|
595
597
|
}),
|
|
596
|
-
|
|
598
|
+
r
|
|
597
599
|
]
|
|
598
600
|
}),
|
|
599
601
|
/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
@@ -613,7 +615,7 @@ const be = (a, r)=>{
|
|
|
613
615
|
buttonLink: w
|
|
614
616
|
})
|
|
615
617
|
}),
|
|
616
|
-
|
|
618
|
+
a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
|
|
617
619
|
className: _cardcssmistica.mediaCardIcon,
|
|
618
620
|
paddingLeft: {
|
|
619
621
|
mobile: 16,
|
|
@@ -623,7 +625,7 @@ const be = (a, r)=>{
|
|
|
623
625
|
mobile: 16,
|
|
624
626
|
desktop: 24
|
|
625
627
|
},
|
|
626
|
-
children:
|
|
628
|
+
children: a
|
|
627
629
|
})
|
|
628
630
|
]
|
|
629
631
|
})
|
|
@@ -635,8 +637,8 @@ const be = (a, r)=>{
|
|
|
635
637
|
})
|
|
636
638
|
]
|
|
637
639
|
});
|
|
638
|
-
}),
|
|
639
|
-
var { media:
|
|
640
|
+
}), Or = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
|
|
641
|
+
var { media: r , title: a , titleLinesMax: i , subtitle: t , subtitleLinesMax: c , description: o , descriptionLinesMax: d , extra: l , dataAttributes: u , "aria-label": m } = _param, s = _object_without_properties(_param, [
|
|
640
642
|
"media",
|
|
641
643
|
"title",
|
|
642
644
|
"titleLinesMax",
|
|
@@ -648,7 +650,7 @@ const be = (a, r)=>{
|
|
|
648
650
|
"dataAttributes",
|
|
649
651
|
"aria-label"
|
|
650
652
|
]);
|
|
651
|
-
const f = s.href || s.to || s.onPress, g =
|
|
653
|
+
const f = s.href || s.to || s.onPress, g = r && r.type === _image.default && r.props.circular;
|
|
652
654
|
return /* @__PURE__ */ (0, _jsxruntime.jsx)(P, {
|
|
653
655
|
ref: h,
|
|
654
656
|
dataAttributes: _object_spread({
|
|
@@ -674,7 +676,7 @@ const be = (a, r)=>{
|
|
|
674
676
|
[_cardcssmistica.circularMediaOverlay]: g
|
|
675
677
|
})
|
|
676
678
|
}),
|
|
677
|
-
|
|
679
|
+
r
|
|
678
680
|
]
|
|
679
681
|
}),
|
|
680
682
|
/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
|
|
@@ -685,12 +687,12 @@ const be = (a, r)=>{
|
|
|
685
687
|
/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
|
|
686
688
|
space: 8,
|
|
687
689
|
children: [
|
|
688
|
-
|
|
690
|
+
a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
|
|
689
691
|
truncate: i,
|
|
690
692
|
as: "h3",
|
|
691
693
|
regular: !0,
|
|
692
694
|
hyphens: "auto",
|
|
693
|
-
children:
|
|
695
|
+
children: a
|
|
694
696
|
}),
|
|
695
697
|
t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
|
|
696
698
|
truncate: c,
|
|
@@ -720,8 +722,8 @@ const be = (a, r)=>{
|
|
|
720
722
|
})
|
|
721
723
|
}))
|
|
722
724
|
});
|
|
723
|
-
}),
|
|
724
|
-
var { icon:
|
|
725
|
+
}), Hr = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
|
|
726
|
+
var { icon: r , headline: a , pretitle: i , pretitleLinesMax: t , title: c , titleLinesMax: o , subtitle: d , subtitleLinesMax: l , description: u , descriptionLinesMax: m , extra: s , actions: h , button: f , buttonLink: g , dataAttributes: w , "aria-label": T , onClose: b , aspectRatio: C } = _param, p = _object_without_properties(_param, [
|
|
725
727
|
"icon",
|
|
726
728
|
"headline",
|
|
727
729
|
"pretitle",
|
|
@@ -741,7 +743,7 @@ const be = (a, r)=>{
|
|
|
741
743
|
"onClose",
|
|
742
744
|
"aspectRatio"
|
|
743
745
|
]);
|
|
744
|
-
const A = !!
|
|
746
|
+
const A = !!r, D = p.href || p.to || p.onPress, O = be(h, b), X = {
|
|
745
747
|
marginRight: -16,
|
|
746
748
|
marginTop: -24,
|
|
747
749
|
width: xe * O.length
|
|
@@ -777,9 +779,9 @@ const be = (a, r)=>{
|
|
|
777
779
|
/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
|
|
778
780
|
space: 16,
|
|
779
781
|
children: [
|
|
780
|
-
A ?
|
|
782
|
+
A ? r : null,
|
|
781
783
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
|
|
782
|
-
headline:
|
|
784
|
+
headline: a,
|
|
783
785
|
pretitle: i,
|
|
784
786
|
pretitleLinesMax: t,
|
|
785
787
|
title: c,
|
|
@@ -818,8 +820,8 @@ const be = (a, r)=>{
|
|
|
818
820
|
})
|
|
819
821
|
]
|
|
820
822
|
});
|
|
821
|
-
}),
|
|
822
|
-
var { icon:
|
|
823
|
+
}), Vr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
|
|
824
|
+
var { icon: r , title: a , titleLinesMax: i , subtitle: t , subtitleLinesMax: c , dataAttributes: o , "aria-label": d , extra: l , isInverse: u = !1 , aspectRatio: m } = _param, s = _object_without_properties(_param, [
|
|
823
825
|
"icon",
|
|
824
826
|
"title",
|
|
825
827
|
"titleLinesMax",
|
|
@@ -858,19 +860,19 @@ const be = (a, r)=>{
|
|
|
858
860
|
children: [
|
|
859
861
|
/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
|
|
860
862
|
children: [
|
|
861
|
-
|
|
863
|
+
r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
|
|
862
864
|
paddingBottom: 16,
|
|
863
|
-
children:
|
|
865
|
+
children: r
|
|
864
866
|
}),
|
|
865
867
|
/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
|
|
866
868
|
space: 4,
|
|
867
869
|
children: [
|
|
868
|
-
|
|
870
|
+
a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
|
|
869
871
|
truncate: i,
|
|
870
872
|
as: "h3",
|
|
871
873
|
regular: !0,
|
|
872
874
|
hyphens: "auto",
|
|
873
|
-
children:
|
|
875
|
+
children: a
|
|
874
876
|
}),
|
|
875
877
|
t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
|
|
876
878
|
truncate: c,
|
|
@@ -894,7 +896,7 @@ const be = (a, r)=>{
|
|
|
894
896
|
})
|
|
895
897
|
});
|
|
896
898
|
}), Be = /*#__PURE__*/ _react.forwardRef((_param, x)=>{
|
|
897
|
-
var { isInverse:
|
|
899
|
+
var { isInverse: r , backgroundImage: a , backgroundVideo: i , backgroundVideoRef: t , poster: c , icon: o , headline: d , pretitle: l , pretitleLinesMax: u , title: m , titleLinesMax: s , description: h , descriptionLinesMax: f , extra: g , button: w , secondaryButton: T , onClose: b , actions: C , buttonLink: p , dataAttributes: M , width: A , height: D , aspectRatio: O , "aria-label": X } = _param, I = _object_without_properties(_param, [
|
|
898
900
|
"isInverse",
|
|
899
901
|
"backgroundImage",
|
|
900
902
|
"backgroundVideo",
|
|
@@ -920,11 +922,11 @@ const be = (a, r)=>{
|
|
|
920
922
|
"aspectRatio",
|
|
921
923
|
"aria-label"
|
|
922
924
|
]);
|
|
923
|
-
const H =
|
|
925
|
+
const H = a !== void 0, B = i !== void 0, Z = Ae(a), { video: F , videoAction: z } = Ie(i, c, t);
|
|
924
926
|
B && (C = z ? [
|
|
925
927
|
z
|
|
926
928
|
] : []);
|
|
927
|
-
const _ = (0, _themevariantcontext.useIsInverseVariant)(), k = H || B, W = k ? "0 0 16px rgba(0,0,0,0.4)" : void 0, q = (C == null ? void 0 : C.length) || b, j = I.href || I.to || I.onPress, Q = H || B ? _cardcssmistica.touchableCardOverlayMedia :
|
|
929
|
+
const _ = (0, _themevariantcontext.useIsInverseVariant)(), k = H || B, W = k ? "0 0 16px rgba(0,0,0,0.4)" : void 0, q = (C == null ? void 0 : C.length) || b, j = I.href || I.to || I.onPress, Q = H || B ? _cardcssmistica.touchableCardOverlayMedia : r ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
|
|
928
930
|
return /* @__PURE__ */ (0, _jsxruntime.jsxs)(P, {
|
|
929
931
|
dataAttributes: M,
|
|
930
932
|
ref: x,
|
|
@@ -939,7 +941,7 @@ const be = (a, r)=>{
|
|
|
939
941
|
className: _cardcssmistica.boxed,
|
|
940
942
|
width: "100%",
|
|
941
943
|
minHeight: "100%",
|
|
942
|
-
isInverse:
|
|
944
|
+
isInverse: r,
|
|
943
945
|
background: H || B ? _ ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
|
|
944
946
|
children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
|
|
945
947
|
maybe: !0
|
|
@@ -1048,33 +1050,33 @@ const be = (a, r)=>{
|
|
|
1048
1050
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
|
|
1049
1051
|
onClose: b,
|
|
1050
1052
|
actions: C,
|
|
1051
|
-
type: H || B ? "media" :
|
|
1053
|
+
type: H || B ? "media" : r ? "inverse" : "default"
|
|
1052
1054
|
})
|
|
1053
1055
|
]
|
|
1054
1056
|
});
|
|
1055
|
-
}),
|
|
1056
|
-
var { dataAttributes:
|
|
1057
|
+
}), Er = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
|
|
1058
|
+
var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
|
|
1057
1059
|
"dataAttributes"
|
|
1058
1060
|
]);
|
|
1059
|
-
return (0, _jsxruntime.jsx)(Be, _object_spread_props(_object_spread({},
|
|
1061
|
+
return (0, _jsxruntime.jsx)(Be, _object_spread_props(_object_spread({}, a), {
|
|
1060
1062
|
ref: i,
|
|
1061
1063
|
isInverse: !0,
|
|
1062
|
-
dataAttributes: _object_spread_props(_object_spread({},
|
|
1064
|
+
dataAttributes: _object_spread_props(_object_spread({}, r), {
|
|
1063
1065
|
"component-name": "DisplayMediaCard"
|
|
1064
1066
|
})
|
|
1065
1067
|
}));
|
|
1066
|
-
}),
|
|
1067
|
-
var { dataAttributes:
|
|
1068
|
+
}), Gr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
|
|
1069
|
+
var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
|
|
1068
1070
|
"dataAttributes"
|
|
1069
1071
|
]);
|
|
1070
|
-
return (0, _jsxruntime.jsx)(Be, _object_spread_props(_object_spread({},
|
|
1072
|
+
return (0, _jsxruntime.jsx)(Be, _object_spread_props(_object_spread({}, a), {
|
|
1071
1073
|
ref: i,
|
|
1072
|
-
dataAttributes: _object_spread_props(_object_spread({},
|
|
1074
|
+
dataAttributes: _object_spread_props(_object_spread({}, r), {
|
|
1073
1075
|
"component-name": "DisplayDataCard"
|
|
1074
1076
|
})
|
|
1075
1077
|
}));
|
|
1076
|
-
}),
|
|
1077
|
-
var { dataAttributes:
|
|
1078
|
+
}), Pr = /*#__PURE__*/ _react.forwardRef((_param, X)=>{
|
|
1079
|
+
var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: t , backgroundVideoRef: c , width: o , height: d , aspectRatio: l = "7:10" , ariaLabel: u , actions: m , onClose: s , icon: h , headline: f , pretitle: g , pretitleLinesMax: w , title: T , titleLinesMax: b , description: C , descriptionLinesMax: p , variant: M , isInverse: A , backgroundColor: D } = _param, O = _object_without_properties(_param, [
|
|
1078
1080
|
"dataAttributes",
|
|
1079
1081
|
"backgroundImage",
|
|
1080
1082
|
"backgroundVideo",
|
|
@@ -1098,7 +1100,7 @@ const be = (a, r)=>{
|
|
|
1098
1100
|
"isInverse",
|
|
1099
1101
|
"backgroundColor"
|
|
1100
1102
|
]);
|
|
1101
|
-
const I =
|
|
1103
|
+
const I = a !== void 0, x = i !== void 0, H = Ae(a), { video: B , videoAction: Z } = Ie(i, t, c);
|
|
1102
1104
|
x && (m = Z ? [
|
|
1103
1105
|
Z
|
|
1104
1106
|
] : []);
|
|
@@ -1110,7 +1112,7 @@ const be = (a, r)=>{
|
|
|
1110
1112
|
return /* @__PURE__ */ (0, _jsxruntime.jsxs)(P, {
|
|
1111
1113
|
width: o,
|
|
1112
1114
|
height: d,
|
|
1113
|
-
dataAttributes: _object_spread_props(_object_spread({},
|
|
1115
|
+
dataAttributes: _object_spread_props(_object_spread({}, r), {
|
|
1114
1116
|
"component-name": "PosterCard"
|
|
1115
1117
|
}),
|
|
1116
1118
|
ref: X,
|
|
@@ -24,7 +24,7 @@ interface SimpleBlockProps {
|
|
|
24
24
|
export declare const SimpleBlock: React.FC<SimpleBlockProps>;
|
|
25
25
|
interface InformationBlockProps {
|
|
26
26
|
title?: string;
|
|
27
|
-
description?:
|
|
27
|
+
description?: ReadonlyArray<string> | string;
|
|
28
28
|
value?: string;
|
|
29
29
|
secondaryValue?: string;
|
|
30
30
|
valueColor?: string;
|
|
@@ -43,7 +43,7 @@ interface HighlightedValueBlockProps {
|
|
|
43
43
|
};
|
|
44
44
|
secondaryValue?: string;
|
|
45
45
|
title?: string;
|
|
46
|
-
description?:
|
|
46
|
+
description?: ReadonlyArray<string> | string;
|
|
47
47
|
valueColor?: string;
|
|
48
48
|
'aria-label'?: string;
|
|
49
49
|
}
|
|
@@ -51,7 +51,7 @@ export declare const HighlightedValueBlock: React.FC<HighlightedValueBlockProps>
|
|
|
51
51
|
interface ValueBlockProps {
|
|
52
52
|
title?: string;
|
|
53
53
|
value?: string;
|
|
54
|
-
description?:
|
|
54
|
+
description?: ReadonlyArray<string> | string;
|
|
55
55
|
valueColor?: string;
|
|
56
56
|
'aria-label'?: string;
|
|
57
57
|
}
|