fansunited-frontend-components 0.0.31-RC6 → 0.0.31-RC7

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 (18) hide show
  1. package/ClassicQuizPlay.js +27 -28
  2. package/CollectLead.js +56 -57
  3. package/EventGamePlay.js +200 -201
  4. package/MatchQuizPlay.js +52 -53
  5. package/PollVote.js +26 -28
  6. package/chunks/CollectLeadForm-C_3plJtn.js +5391 -0
  7. package/chunks/Error-BurPfBJw.js +1739 -0
  8. package/chunks/{OverlayLeadAfterCollection-DnqztPJ5.js → OverlayLeadAfterCollection-Bjh1xAB5.js} +37 -38
  9. package/chunks/{OverlayScoreStateSkeleton-C9FUhcnd.js → OverlayScoreStateSkeleton-Cha5KeNi.js} +4 -5
  10. package/chunks/Portal-DegkUXpU.js +21877 -0
  11. package/chunks/Tabs-leN3Fb8D.js +1079 -0
  12. package/chunks/index-DUQ2LFod.js +5492 -0
  13. package/index.d.ts.map +1 -1
  14. package/package.json +1 -1
  15. package/chunks/CollectLeadForm-DtmR2Vuf.js +0 -844
  16. package/chunks/Error-DhQL89pn.js +0 -120
  17. package/chunks/NotFoundSkeleton-BYJTzYJR.js +0 -2425
  18. package/chunks/Portal-BWqqFvVm.js +0 -13823
package/chunks/NotFoundSkeleton-BYJTzYJR.js DELETED
@@ -1,2425 +0,0 @@
1
- import { jsx as t, jsxs as o, Fragment as H } from "react/jsx-runtime";
2
- import { Box as n, CircularProgress as de, Button as q, Typography as d, Tooltip as X, IconButton as U, Modal as se, ModalDialog as ge, DialogContent as me, AspectRatio as ee } from "@mui/joy";
3
- import { h as T, f as G, r as te, b as xe, C as he, j as L, k as A, a as D, i as j, u as p, l as V, W as B, n as ne, o as ae, s as F, x as re, v as ce, p as ie, w as fe, A as oe, q as ye } from "./Portal-BWqqFvVm.js";
4
- import { useState as ue } from "react";
5
- const He = ({ my: e }) => /* @__PURE__ */ t(
6
- n,
7
- {
8
- sx: {
9
- display: "flex",
10
- justifyContent: "center",
11
- alignItems: "center",
12
- width: "100%",
13
- height: "100%",
14
- my: e
15
- },
16
- children: /* @__PURE__ */ t(
17
- de,
18
- {
19
- slotProps: {
20
- track: {
21
- sx: {
22
- stroke: T().palette.neutral.softBg
23
- }
24
- },
25
- progress: {
26
- sx: {
27
- stroke: T().palette.neutral.solidBg
28
- }
29
- }
30
- }
31
- }
32
- )
33
- }
34
- ), Pe = ({
35
- additionalCTA: e,
36
- buttonStyle: l,
37
- buttonContentStyle: c,
38
- textStyle: a
39
- }) => {
40
- const { t: x } = G();
41
- return e ? e.component ? e.component : e.onClick ? /* @__PURE__ */ t(q, { sx: l, onClick: e.onClick, children: e.defaultLabel && /* @__PURE__ */ t(n, { sx: c, children: /* @__PURE__ */ t(d, { sx: a, children: e.defaultLabel }) }) }) : e.url ? /* @__PURE__ */ t(
42
- q,
43
- {
44
- component: "a",
45
- href: e.url,
46
- target: e.target || "_self",
47
- sx: l,
48
- children: /* @__PURE__ */ t(d, { sx: a, children: e.defaultLabel || x("common.additional") })
49
- }
50
- ) : null : null;
51
- }, Z = te(/* @__PURE__ */ t("path", {
52
- d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
53
- }), "InfoOutlined"), be = te(/* @__PURE__ */ t("path", {
54
- d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
55
- }), "Close"), v = ({
56
- rules: e,
57
- rulesDisplay: l,
58
- isOverlayVariant: c = !1
59
- }) => {
60
- const { t: a } = G(), { shadowRootElement: x } = xe(he), r = T(), I = L(), g = A(), m = D(), C = j(), [R, h] = ue(!1);
61
- if (!e)
62
- return null;
63
- if (l != null && l.component)
64
- return l.component;
65
- if (((l == null ? void 0 : l.type) || "modal") === "link" && (l != null && l.url)) {
66
- const u = l.target || "_blank", w = {
67
- backgroundColor: "transparent",
68
- color: c ? r.palette.neutral.plainColor : r.textSecondary,
69
- border: "none",
70
- borderRadius: "50%",
71
- width: "2em",
72
- height: "2em",
73
- minHeight: "2em",
74
- minWidth: "2em",
75
- padding: 0,
76
- display: "flex",
77
- alignItems: "center",
78
- justifyContent: "center",
79
- cursor: "pointer",
80
- transition: "all 0.2s ease-in-out",
81
- "&: hover": {
82
- backgroundColor: "transparent",
83
- transform: "scale(1.05)"
84
- },
85
- "&:focus-visible": {
86
- outline: "none"
87
- },
88
- "& svg": {
89
- fontSize: "1.25em"
90
- }
91
- };
92
- return typeof window > "u" ? /* @__PURE__ */ t(
93
- X,
94
- {
95
- title: a("common.rules.info"),
96
- placement: "right",
97
- variant: "soft",
98
- disablePortal: !0,
99
- children: /* @__PURE__ */ t(
100
- U,
101
- {
102
- component: "a",
103
- href: l.url,
104
- target: u,
105
- rel: "noopener noreferrer",
106
- sx: w,
107
- "aria-label": a("common.rules.info"),
108
- children: /* @__PURE__ */ t(Z, {})
109
- }
110
- )
111
- }
112
- ) : /* @__PURE__ */ t(
113
- X,
114
- {
115
- title: a("common.rules.info"),
116
- placement: "right",
117
- variant: "soft",
118
- disablePortal: !0,
119
- children: /* @__PURE__ */ t(
120
- U,
121
- {
122
- onClick: (f) => {
123
- f.stopPropagation(), window.open(l.url, u, "noopener,noreferrer");
124
- },
125
- sx: w,
126
- "aria-label": a("common.rules.info"),
127
- children: /* @__PURE__ */ t(Z, {})
128
- }
129
- )
130
- }
131
- );
132
- }
133
- return /* @__PURE__ */ o(H, { children: [
134
- /* @__PURE__ */ t(
135
- X,
136
- {
137
- title: a("common.rules.info"),
138
- placement: "right",
139
- variant: "soft",
140
- disablePortal: !0,
141
- children: /* @__PURE__ */ t(
142
- U,
143
- {
144
- onClick: (u) => {
145
- u.stopPropagation(), h(!0);
146
- },
147
- sx: {
148
- backgroundColor: "transparent",
149
- color: r.palette.neutral[500],
150
- border: "none",
151
- borderRadius: "50%",
152
- width: "2em",
153
- height: "2em",
154
- minHeight: "2em",
155
- minWidth: "2em",
156
- padding: 0,
157
- display: "flex",
158
- alignItems: "center",
159
- justifyContent: "center",
160
- cursor: "pointer",
161
- transition: "all 0.2s ease-in-out",
162
- "&:hover": {
163
- backgroundColor: "transparent",
164
- color: r.palette.neutral[500],
165
- transform: "scale(1.05)"
166
- },
167
- "&:focus-visible": {
168
- outline: "none"
169
- },
170
- "& svg": {
171
- fontSize: "1.25em"
172
- }
173
- },
174
- "aria-label": a("common.rules.info"),
175
- children: /* @__PURE__ */ t(Z, {})
176
- }
177
- )
178
- }
179
- ),
180
- /* @__PURE__ */ t(
181
- se,
182
- {
183
- open: R,
184
- onClose: () => h(!1),
185
- container: x,
186
- sx: { zIndex: 1300 },
187
- children: /* @__PURE__ */ o(
188
- ge,
189
- {
190
- sx: {
191
- width: "100%",
192
- maxWidth: C ? "90vw" : "600px",
193
- maxHeight: C ? "90vh" : "80vh",
194
- p: C ? 2 : 3,
195
- borderRadius: I.md,
196
- backgroundColor: r.surface
197
- },
198
- children: [
199
- /* @__PURE__ */ t(
200
- U,
201
- {
202
- onClick: (u) => {
203
- u.stopPropagation(), h(!1);
204
- },
205
- sx: {
206
- position: "absolute",
207
- top: m.sm,
208
- right: m.sm,
209
- backgroundColor: "transparent",
210
- color: r.textSecondary,
211
- border: "none",
212
- borderRadius: "50%",
213
- width: "2em",
214
- height: "2em",
215
- minHeight: "2em",
216
- minWidth: "2em",
217
- padding: 0,
218
- display: "flex",
219
- alignItems: "center",
220
- justifyContent: "center",
221
- cursor: "pointer",
222
- transition: "all 0.2s ease-in-out",
223
- zIndex: 1e3,
224
- "&:hover": {
225
- backgroundColor: `${r.textSecondary}15`,
226
- color: r.textPrimary,
227
- transform: "scale(1.05)"
228
- },
229
- "&:focus-visible": {
230
- outline: "none"
231
- },
232
- "& svg": {
233
- fontSize: "1.25em"
234
- }
235
- },
236
- children: /* @__PURE__ */ t(be, {})
237
- }
238
- ),
239
- /* @__PURE__ */ o(
240
- me,
241
- {
242
- sx: {
243
- display: "flex",
244
- flexDirection: "column",
245
- gap: m.md
246
- },
247
- children: [
248
- /* @__PURE__ */ t(
249
- d,
250
- {
251
- sx: {
252
- fontFamily: g.primary,
253
- fontWeight: 600,
254
- fontSize: "1.25em",
255
- lineHeight: 1.2,
256
- color: r.textPrimary,
257
- textAlign: "center",
258
- marginBottom: m.sm
259
- },
260
- children: a("common.rules.title")
261
- }
262
- ),
263
- /* @__PURE__ */ t(
264
- n,
265
- {
266
- sx: {
267
- fontFamily: g.secondary,
268
- fontSize: "1em",
269
- lineHeight: 1.5,
270
- color: r.textSecondary,
271
- overflow: "auto",
272
- // Custom scrollbar styling for dark theme
273
- "&::-webkit-scrollbar": {
274
- width: "8px"
275
- },
276
- "&::-webkit-scrollbar-track": {
277
- backgroundColor: "transparent"
278
- },
279
- "&::-webkit-scrollbar-thumb": {
280
- backgroundColor: r.secondaryContainer,
281
- borderRadius: "4px",
282
- "&:hover": {
283
- backgroundColor: r.textSecondary
284
- }
285
- },
286
- // Firefox scrollbar styling
287
- scrollbarWidth: "thin",
288
- scrollbarColor: `${r.secondaryContainer} transparent`,
289
- "& p": {
290
- marginBottom: m.sm
291
- },
292
- "& ul, & ol": {
293
- marginLeft: m.md,
294
- marginBottom: m.sm
295
- },
296
- "& li": {
297
- marginBottom: m.xs
298
- },
299
- "& h1, & h2, & h3, & h4, & h5, & h6": {
300
- fontFamily: g.primary,
301
- color: r.textPrimary,
302
- marginTop: m.md,
303
- marginBottom: m.sm
304
- }
305
- },
306
- dangerouslySetInnerHTML: { __html: e }
307
- }
308
- ),
309
- /* @__PURE__ */ t(
310
- q,
311
- {
312
- variant: "outlined",
313
- onClick: (u) => {
314
- u.stopPropagation(), h(!1);
315
- },
316
- sx: {
317
- marginTop: m.md,
318
- borderColor: r.textPrimary,
319
- color: r.textPrimary,
320
- fontFamily: g.secondary,
321
- fontSize: "0.875em",
322
- borderRadius: I.sm,
323
- "&:hover": {
324
- borderColor: r.textPrimary,
325
- color: r.textPrimary,
326
- backgroundColor: r.surfaceVariant
327
- }
328
- },
329
- children: a("common.rules.close")
330
- }
331
- )
332
- ]
333
- }
334
- )
335
- ]
336
- }
337
- )
338
- }
339
- )
340
- ] });
341
- }, Se = (e) => {
342
- var l, c, a;
343
- return {
344
- // Mobile headline with image background
345
- mobileHeadlineWithImage: {
346
- display: e.isMobile ? "flex" : "none",
347
- flexDirection: "column",
348
- justifyContent: "space-between",
349
- gap: "10px",
350
- backgroundImage: `url(${e.finalImage})`,
351
- backgroundSize: "cover",
352
- backgroundPosition: "center",
353
- borderTopLeftRadius: "5px",
354
- borderTopRightRadius: "5px",
355
- position: "relative",
356
- minHeight: "210px",
357
- overflow: "hidden",
358
- height: "auto",
359
- "&::before": {
360
- content: '""',
361
- position: "absolute",
362
- width: "100%",
363
- height: "100%",
364
- background: e.imageBackgroundGradient,
365
- borderTopLeftRadius: "5px",
366
- borderTopRightRadius: "5px"
367
- }
368
- },
369
- // Mobile headline content
370
- mobileHeadlineContent: {
371
- zIndex: 1,
372
- height: "100%",
373
- p: e.spacingScale.xl,
374
- gap: e.spacingScale["2xl"],
375
- display: "flex",
376
- flexDirection: "column",
377
- justifyContent: "space-between"
378
- },
379
- // Mobile headline without image
380
- mobileHeadlineWithoutImage: {
381
- display: e.isMobile ? "flex" : "none",
382
- flexDirection: "column",
383
- justifyContent: "space-between",
384
- p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
385
- gap: e.spacingScale["2xl"]
386
- },
387
- // Headline typography (mobile with image)
388
- headlineTypographyMobileImage: {
389
- fontWeight: 500,
390
- lineHeight: "166%",
391
- letterSpacing: "1px",
392
- fontSize: "0.75em",
393
- color: ((l = e.brandingColors) == null ? void 0 : l.secondaryColor) || e.darkTextColor,
394
- opacity: "70%",
395
- textTransform: "uppercase",
396
- fontFamily: e.fontFamilySecondary,
397
- textAlign: "center"
398
- },
399
- // Headline typography (mobile without image & desktop)
400
- headlineTypography: {
401
- fontWeight: 500,
402
- lineHeight: "166%",
403
- letterSpacing: "1px",
404
- textTransform: "uppercase",
405
- fontSize: "0.75em",
406
- color: e.secondaryColor,
407
- opacity: e.opacity,
408
- fontFamily: e.fontFamilySecondary,
409
- textAlign: e.isMobile ? "center" : "left"
410
- },
411
- // Headline typography (desktop centered)
412
- headlineTypographyDesktop: {
413
- fontWeight: 500,
414
- lineHeight: "166%",
415
- letterSpacing: "1px",
416
- textTransform: "uppercase",
417
- fontSize: "0.75em",
418
- color: e.secondaryColor,
419
- opacity: e.opacity,
420
- fontFamily: e.fontFamilySecondary
421
- },
422
- // Content container
423
- contentContainer: {
424
- display: "flex",
425
- flexDirection: "column",
426
- gap: e.spacingScale["3xs"]
427
- },
428
- // Title typography (mobile with image)
429
- titleTypographyMobileImage: {
430
- fontWeight: 700,
431
- lineHeight: "133%",
432
- fontSize: "1.5em",
433
- letterSpacing: "0.15px",
434
- color: ((c = e.brandingColors) == null ? void 0 : c.contentColor) || e.darkTextColor,
435
- fontFamily: e.fontFamilyPrimary,
436
- textAlign: "center"
437
- },
438
- // Title typography (mobile without image & desktop responsive)
439
- titleTypography: {
440
- fontWeight: 700,
441
- lineHeight: "133%",
442
- letterSpacing: "0px",
443
- fontSize: "1.5em",
444
- color: e.textColor,
445
- fontFamily: e.fontFamilyPrimary,
446
- textAlign: e.isMobile ? "center" : "left"
447
- },
448
- // Title typography (desktop centered)
449
- titleTypographyDesktop: {
450
- fontWeight: 700,
451
- lineHeight: "133%",
452
- letterSpacing: "0px",
453
- fontSize: "1.5em",
454
- color: e.textColor,
455
- fontFamily: e.fontFamilyPrimary
456
- },
457
- // Description typography (mobile with image)
458
- descriptionTypographyMobileImage: {
459
- fontWeight: 400,
460
- lineHeight: "140%",
461
- fontSize: "1.25em",
462
- letterSpacing: "0.15px",
463
- color: ((a = e.brandingColors) == null ? void 0 : a.secondaryColor) || e.darkTextColor,
464
- opacity: "70%",
465
- fontFamily: e.fontFamilyPrimary,
466
- textAlign: "center"
467
- },
468
- // Description typography (mobile without image & desktop responsive)
469
- descriptionTypography: {
470
- fontWeight: 400,
471
- lineHeight: "140%",
472
- letterSpacing: "0.15px",
473
- fontSize: "1.25em",
474
- color: e.secondaryColor,
475
- opacity: e.opacity,
476
- fontFamily: e.fontFamilyPrimary,
477
- textAlign: e.isMobile ? "center" : "left"
478
- },
479
- // Description typography (desktop centered)
480
- descriptionTypographyDesktop: {
481
- fontWeight: 400,
482
- lineHeight: "140%",
483
- letterSpacing: "0.15px",
484
- fontSize: "1.25em",
485
- color: e.secondaryColor,
486
- opacity: e.opacity,
487
- fontFamily: e.fontFamilyPrimary
488
- },
489
- // Image container (left position)
490
- imageContainerLeft: {
491
- display: e.isMobile ? "none" : "block",
492
- flex: "0.3",
493
- overflow: "hidden",
494
- height: "auto",
495
- position: "relative",
496
- minHeight: "auto",
497
- backgroundImage: `url(${e.finalImage})`,
498
- backgroundSize: "cover",
499
- backgroundPosition: "center center",
500
- backgroundRepeat: "no-repeat",
501
- alignItems: "center",
502
- justifyContent: "center"
503
- },
504
- // Image container (right position)
505
- imageContainerRight: {
506
- display: e.isMobile ? "none" : "block",
507
- flex: "0.3",
508
- overflow: "hidden",
509
- height: "auto",
510
- position: "relative",
511
- minHeight: "auto",
512
- backgroundImage: `url(${e.finalImage})`,
513
- backgroundSize: "cover",
514
- backgroundPosition: "center center",
515
- backgroundRepeat: "no-repeat",
516
- alignItems: "center",
517
- justifyContent: "center"
518
- },
519
- // Image safe area (placeholder for image space)
520
- imageSafeArea: {
521
- width: "100%",
522
- height: "100%"
523
- },
524
- // Main content area
525
- mainContentArea: {
526
- flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
527
- display: "flex",
528
- flexDirection: "column",
529
- px: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
530
- pt: e.spacingScale.lg,
531
- pb: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
532
- gap: e.spacingScale.md
533
- },
534
- // Desktop headline container
535
- desktopHeadlineContainer: {
536
- display: e.isMobile ? "none" : "flex",
537
- flexDirection: "column",
538
- justifyContent: "space-between",
539
- gap: e.spacingScale["2xl"],
540
- textAlign: "center"
541
- },
542
- // Aspect ratio container (for embed code)
543
- aspectRatioContainer: {
544
- borderRadius: e.borderRadius.md,
545
- overflow: "hidden"
546
- }
547
- };
548
- }, ze = ({
549
- entity: e,
550
- headline: l,
551
- finalImage: c,
552
- imagePosition: a = "left",
553
- children: x,
554
- embedCodeContainerRef: r,
555
- hasEmbedCode: I = !1,
556
- filterScreenContent: g,
557
- rulesDisplay: m
558
- }) => {
559
- var _, J;
560
- const C = j(), R = p(), h = D(), M = A().primary, u = A().secondary, w = L(), f = ((_ = e.branding) == null ? void 0 : _.colors) || null, y = ((J = e.branding) == null ? void 0 : J.urls) || null, s = (f == null ? void 0 : f.contentColor) || T().textColor, k = (f == null ? void 0 : f.secondaryColor) || T().textColor, b = (f == null ? void 0 : f.backgroundColor) || T().surfaceVariant, W = "60%", z = V(
561
- B.STANDARD
562
- ), i = Se({
563
- finalImage: c,
564
- spacingScale: h,
565
- borderRadius: w,
566
- fontFamilyPrimary: M,
567
- fontFamilySecondary: u,
568
- textColor: s,
569
- secondaryColor: k,
570
- bgcolor: ne(b || ""),
571
- opacity: W,
572
- brandingColors: f,
573
- imagePosition: a,
574
- darkTextColor: R.colorSchemes.dark.textColor,
575
- imageBackgroundGradient: z,
576
- isMobile: C
577
- }), P = ae(
578
- y == null ? void 0 : y.primaryUrl,
579
- y == null ? void 0 : y.secondaryUrl,
580
- "image"
581
- ), $ = () => {
582
- P && window.open(P, "_blank", "noopener,noreferrer");
583
- }, S = (E, N) => P ? typeof window > "u" ? /* @__PURE__ */ t(
584
- n,
585
- {
586
- component: "a",
587
- href: P,
588
- target: "_blank",
589
- rel: "noopener noreferrer",
590
- sx: {
591
- ...N,
592
- cursor: "pointer",
593
- textDecoration: "none"
594
- },
595
- children: E
596
- }
597
- ) : /* @__PURE__ */ t(
598
- n,
599
- {
600
- sx: {
601
- ...N,
602
- cursor: "pointer"
603
- },
604
- onClick: $,
605
- children: E
606
- }
607
- ) : /* @__PURE__ */ t(n, { sx: N, children: E }), O = () => I && r ? /* @__PURE__ */ o(n, { sx: i.mobileHeadlineWithoutImage, children: [
608
- /* @__PURE__ */ o(n, { children: [
609
- /* @__PURE__ */ o(
610
- n,
611
- {
612
- sx: {
613
- display: "flex",
614
- alignItems: "center",
615
- justifyContent: "center",
616
- gap: h["3xs"]
617
- },
618
- children: [
619
- /* @__PURE__ */ t(d, { level: "body-sm", sx: i.headlineTypography, children: l }),
620
- /* @__PURE__ */ t(
621
- v,
622
- {
623
- rules: e.rules || "",
624
- rulesDisplay: m,
625
- isOverlayVariant: !1
626
- }
627
- )
628
- ]
629
- }
630
- ),
631
- /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
632
- /* @__PURE__ */ t(d, { level: "h4", sx: i.titleTypography, children: e.title }),
633
- /* @__PURE__ */ t(d, { sx: i.descriptionTypography, children: F(e.description) })
634
- ] })
635
- ] }),
636
- /* @__PURE__ */ t(ee, { ratio: "16/9", sx: i.aspectRatioContainer, children: /* @__PURE__ */ t(n, { ref: r }) })
637
- ] }) : c ? S(
638
- /* @__PURE__ */ o(n, { sx: i.mobileHeadlineContent, children: [
639
- /* @__PURE__ */ o(n, { children: [
640
- /* @__PURE__ */ o(
641
- n,
642
- {
643
- sx: {
644
- display: "flex",
645
- alignItems: "center",
646
- justifyContent: "center",
647
- gap: h["3xs"]
648
- },
649
- children: [
650
- /* @__PURE__ */ t(
651
- d,
652
- {
653
- level: "body-sm",
654
- sx: i.headlineTypographyMobileImage,
655
- children: l
656
- }
657
- ),
658
- /* @__PURE__ */ t(
659
- v,
660
- {
661
- rules: e.rules || "",
662
- rulesDisplay: m,
663
- isOverlayVariant: !1
664
- }
665
- )
666
- ]
667
- }
668
- ),
669
- /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
670
- /* @__PURE__ */ t(d, { sx: i.titleTypographyMobileImage, children: e.title }),
671
- /* @__PURE__ */ t(d, { sx: i.descriptionTypographyMobileImage, children: F(e.description) })
672
- ] })
673
- ] }),
674
- g && /* @__PURE__ */ t(n, { children: g })
675
- ] }),
676
- i.mobileHeadlineWithImage
677
- ) : /* @__PURE__ */ o(n, { sx: i.mobileHeadlineWithoutImage, children: [
678
- /* @__PURE__ */ o(n, { children: [
679
- /* @__PURE__ */ o(
680
- n,
681
- {
682
- sx: {
683
- display: "flex",
684
- alignItems: "center",
685
- justifyContent: "center",
686
- gap: h["3xs"]
687
- },
688
- children: [
689
- /* @__PURE__ */ t(d, { level: "body-sm", sx: i.headlineTypography, children: l }),
690
- /* @__PURE__ */ t(
691
- v,
692
- {
693
- rules: e.rules || "",
694
- rulesDisplay: m,
695
- isOverlayVariant: !1
696
- }
697
- )
698
- ]
699
- }
700
- ),
701
- /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
702
- /* @__PURE__ */ t(d, { level: "h4", sx: i.titleTypography, children: e.title }),
703
- /* @__PURE__ */ t(d, { sx: i.descriptionTypography, children: F(e.description) })
704
- ] })
705
- ] }),
706
- g && /* @__PURE__ */ t(n, { children: g })
707
- ] }), Y = !(C && g);
708
- return /* @__PURE__ */ o(H, { children: [
709
- C && O(),
710
- a === "left" && c ? S(
711
- /* @__PURE__ */ t(n, { sx: i.imageSafeArea }),
712
- i.imageContainerLeft
713
- ) : null,
714
- Y && /* @__PURE__ */ o(n, { sx: i.mainContentArea, children: [
715
- !C && /* @__PURE__ */ t(n, { children: /* @__PURE__ */ o(n, { sx: i.desktopHeadlineContainer, children: [
716
- /* @__PURE__ */ o(
717
- n,
718
- {
719
- sx: {
720
- display: "flex",
721
- flexDirection: "column",
722
- alignItems: "center"
723
- },
724
- children: [
725
- /* @__PURE__ */ o(
726
- n,
727
- {
728
- sx: {
729
- display: "flex",
730
- alignItems: "center",
731
- justifyContent: "center",
732
- gap: h["3xs"]
733
- },
734
- children: [
735
- /* @__PURE__ */ t(
736
- d,
737
- {
738
- level: "body-sm",
739
- sx: i.headlineTypographyDesktop,
740
- children: l
741
- }
742
- ),
743
- /* @__PURE__ */ t(
744
- v,
745
- {
746
- rules: e.rules || "",
747
- rulesDisplay: m,
748
- isOverlayVariant: !1
749
- }
750
- )
751
- ]
752
- }
753
- ),
754
- /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
755
- /* @__PURE__ */ t(d, { level: "h4", sx: i.titleTypographyDesktop, children: e.title }),
756
- /* @__PURE__ */ t(d, { sx: i.descriptionTypographyDesktop, children: F(e.description) })
757
- ] })
758
- ]
759
- }
760
- ),
761
- I && r ? /* @__PURE__ */ t(n, { sx: { px: h.md }, children: /* @__PURE__ */ t(ee, { ratio: "16/9", sx: i.aspectRatioContainer, children: /* @__PURE__ */ t(n, { ref: r }) }) }) : g ? /* @__PURE__ */ t(n, { children: g }) : /* @__PURE__ */ t(H, {})
762
- ] }) }),
763
- x
764
- ] }),
765
- a === "right" && c ? S(
766
- /* @__PURE__ */ t(n, { sx: i.imageSafeArea }),
767
- i.imageContainerRight
768
- ) : null
769
- ] });
770
- }, Ce = (e) => {
771
- var l, c, a, x;
772
- return {
773
- // Main headline section with background image
774
- headlineSection: {
775
- display: "flex",
776
- flexDirection: "column",
777
- justifyContent: "space-between",
778
- gap: "10px",
779
- flex: e.isMobile ? "1" : "0 0 50%",
780
- width: e.isMobile ? "100%" : "50%",
781
- minWidth: e.isMobile ? "100%" : "50%",
782
- maxWidth: e.isMobile ? "100%" : "50%",
783
- backgroundImage: e.finalImage ? `url(${e.finalImage})` : "none",
784
- backgroundSize: "cover",
785
- backgroundPosition: "center",
786
- borderTopLeftRadius: e.borderRadius.md,
787
- borderTopRightRadius: e.isMobile ? e.borderRadius.md : 0,
788
- borderBottomLeftRadius: e.isMobile ? 0 : e.borderRadius.md,
789
- overflow: "hidden",
790
- height: "auto",
791
- position: "relative",
792
- minHeight: e.isMobile ? "210px" : "430px",
793
- "&::before": e.finalImage ? {
794
- content: '""',
795
- position: "absolute",
796
- width: "100%",
797
- height: "100%",
798
- background: e.imageBackgroundGradient,
799
- borderTopLeftRadius: "5px",
800
- borderTopRightRadius: "5px"
801
- } : {}
802
- },
803
- // Headline section without image
804
- headlineSectionNoImage: {
805
- display: "flex",
806
- flexDirection: "column",
807
- justifyContent: "space-between",
808
- gap: "10px",
809
- flex: e.isMobile ? "1" : "0 0 50%",
810
- width: e.isMobile ? "100%" : "50%",
811
- minWidth: e.isMobile ? "100%" : "50%",
812
- maxWidth: e.isMobile ? "100%" : "50%",
813
- borderTopLeftRadius: e.borderRadius.md,
814
- borderTopRightRadius: e.isMobile ? e.borderRadius.md : 0,
815
- borderBottomLeftRadius: e.isMobile ? 0 : e.borderRadius.md,
816
- overflow: "hidden",
817
- height: "auto",
818
- position: "relative",
819
- minHeight: e.isMobile ? "210px" : "430px",
820
- backgroundColor: ((l = e.brandingColors) == null ? void 0 : l.backgroundColor) || e.textColor + "10"
821
- },
822
- // Embed code headline section (for poll-vote and classic-quiz-play)
823
- embedCodeHeadlineSection: {
824
- display: "flex",
825
- flexDirection: "column",
826
- justifyContent: "space-between",
827
- gap: "10px",
828
- flex: e.isMobile ? "1" : "0 0 50%",
829
- width: e.isMobile ? "100%" : "50%",
830
- minWidth: e.isMobile ? "100%" : "50%",
831
- maxWidth: e.isMobile ? "100%" : "50%",
832
- borderTopLeftRadius: e.borderRadius.md,
833
- borderTopRightRadius: e.isMobile ? e.borderRadius.md : 0,
834
- borderBottomLeftRadius: e.isMobile ? 0 : e.borderRadius.md,
835
- overflow: "hidden",
836
- height: "auto",
837
- position: "relative",
838
- minHeight: e.isMobile ? "210px" : "430px"
839
- },
840
- // AspectRatio container for embed code
841
- aspectRatioContainer: {
842
- borderRadius: 0,
843
- width: "100%",
844
- height: "100%"
845
- },
846
- // Headline content wrapper
847
- headlineContent: {
848
- zIndex: 1,
849
- height: "100%",
850
- p: e.spacingScale.xl,
851
- gap: e.spacingScale.xl,
852
- display: "flex",
853
- flexDirection: "column",
854
- justifyContent: "space-between"
855
- },
856
- // Embed code headline content (shown in question area when embed code is present)
857
- embedCodeHeadlineContent: {
858
- px: e.spacingScale.lg,
859
- pt: e.spacingScale.lg,
860
- display: "flex",
861
- flexDirection: "column",
862
- gap: e.spacingScale.md
863
- },
864
- // Headline typography (with image background)
865
- headlineText: {
866
- fontWeight: 500,
867
- lineHeight: "166%",
868
- letterSpacing: "1px",
869
- fontSize: "0.75em",
870
- color: ((c = e.brandingColors) == null ? void 0 : c.secondaryColor) || e.darkTextColor,
871
- opacity: "70%",
872
- textTransform: "uppercase",
873
- fontFamily: e.fontFamilySecondary,
874
- textAlign: e.isMobile ? "center" : "left"
875
- },
876
- // Headline typography (without image background)
877
- headlineTextNoImage: {
878
- fontWeight: 500,
879
- lineHeight: "166%",
880
- letterSpacing: "1px",
881
- fontSize: "0.75em",
882
- color: e.secondaryColor,
883
- opacity: "70%",
884
- textTransform: "uppercase",
885
- fontFamily: e.fontFamilySecondary,
886
- textAlign: e.isMobile ? "center" : "left"
887
- },
888
- // Content container
889
- contentContainer: {
890
- display: "flex",
891
- flexDirection: "column",
892
- gap: e.spacingScale["3xs"]
893
- },
894
- // Title typography (with image background)
895
- titleText: {
896
- fontWeight: 700,
897
- lineHeight: "133%",
898
- fontSize: "1.5em",
899
- letterSpacing: "0.15px",
900
- color: ((a = e.brandingColors) == null ? void 0 : a.contentColor) || e.darkTextColor,
901
- fontFamily: e.fontFamilyPrimary,
902
- textAlign: e.isMobile ? "center" : "left"
903
- },
904
- // Title typography (without image background)
905
- titleTextNoImage: {
906
- fontWeight: 700,
907
- lineHeight: "133%",
908
- fontSize: "1.5em",
909
- letterSpacing: "0.15px",
910
- color: e.textColor,
911
- fontFamily: e.fontFamilyPrimary,
912
- textAlign: e.isMobile ? "center" : "left"
913
- },
914
- // Description typography (with image background)
915
- descriptionText: {
916
- fontWeight: 400,
917
- lineHeight: "140%",
918
- fontSize: "1.25em",
919
- letterSpacing: "0.15px",
920
- color: ((x = e.brandingColors) == null ? void 0 : x.secondaryColor) || e.darkTextColor,
921
- opacity: "70%",
922
- fontFamily: e.fontFamilyPrimary,
923
- textAlign: e.isMobile ? "center" : "left"
924
- },
925
- // Description typography (without image background)
926
- descriptionTextNoImage: {
927
- fontWeight: 400,
928
- lineHeight: "140%",
929
- fontSize: "1.25em",
930
- letterSpacing: "0.15px",
931
- color: e.secondaryColor,
932
- opacity: "70%",
933
- fontFamily: e.fontFamilyPrimary,
934
- textAlign: e.isMobile ? "center" : "left"
935
- },
936
- // Question area / content section
937
- questionArea: {
938
- flex: e.isMobile ? "1" : "0 0 50%",
939
- width: e.isMobile ? "100%" : "50%",
940
- minWidth: e.isMobile ? "100%" : "50%",
941
- maxWidth: e.isMobile ? "100%" : "50%",
942
- display: "flex",
943
- flexDirection: "column",
944
- justifyContent: "center"
945
- }
946
- };
947
- }, Be = ({
948
- entity: e,
949
- headline: l,
950
- finalImage: c,
951
- children: a,
952
- embedCodeContainerRef: x,
953
- hasEmbedCode: r = !1,
954
- brandingLogo: I,
955
- renderPresentedBy: g,
956
- rulesDisplay: m
957
- }) => {
958
- var E, N;
959
- const C = j(), R = re(), h = e.type === "poll" || e.type === "match-quiz" ? R : C, M = p(), u = D(), w = A().primary, f = A().secondary, y = L(), s = ((E = e.branding) == null ? void 0 : E.colors) || null, k = ((N = e.branding) == null ? void 0 : N.urls) || null, b = (s == null ? void 0 : s.contentColor) || T().textColor, W = (s == null ? void 0 : s.secondaryColor) || T().textColor, z = (s == null ? void 0 : s.backgroundColor) || T().surfaceVariant, i = "60%", P = M.colorSchemes.dark.textColor, $ = V(
960
- B.SPLIT
961
- ), S = Ce({
962
- finalImage: c,
963
- spacingScale: u,
964
- borderRadius: y,
965
- fontFamilyPrimary: w,
966
- fontFamilySecondary: f,
967
- secondaryColor: W,
968
- opacity: i,
969
- bgcolor: ne(z || ""),
970
- textColor: b,
971
- brandingColors: s,
972
- darkTextColor: P,
973
- imageBackgroundGradient: $,
974
- isMobile: h
975
- }), O = ae(
976
- k == null ? void 0 : k.primaryUrl,
977
- k == null ? void 0 : k.secondaryUrl,
978
- "image"
979
- ), Y = () => {
980
- O && window.open(O, "_blank", "noopener,noreferrer");
981
- }, _ = (K, Q) => O ? typeof window > "u" ? /* @__PURE__ */ t(
982
- n,
983
- {
984
- component: "a",
985
- href: O,
986
- target: "_blank",
987
- rel: "noopener noreferrer",
988
- sx: {
989
- ...Q,
990
- cursor: "pointer",
991
- textDecoration: "none"
992
- },
993
- children: K
994
- }
995
- ) : /* @__PURE__ */ t(
996
- n,
997
- {
998
- sx: {
999
- ...Q,
1000
- cursor: "pointer"
1001
- },
1002
- onClick: Y,
1003
- children: K
1004
- }
1005
- ) : /* @__PURE__ */ t(n, { sx: Q, children: K });
1006
- return /* @__PURE__ */ o(H, { children: [
1007
- r && x ? /* @__PURE__ */ t(n, { sx: S.embedCodeHeadlineSection, children: /* @__PURE__ */ t(
1008
- ee,
1009
- {
1010
- ratio: "16/9",
1011
- sx: S.aspectRatioContainer,
1012
- slotProps: { content: { sx: { height: "100%" } } },
1013
- children: /* @__PURE__ */ t(n, { ref: x })
1014
- }
1015
- ) }) : c ? _(
1016
- /* @__PURE__ */ o(n, { sx: S.headlineContent, children: [
1017
- /* @__PURE__ */ o(n, { children: [
1018
- /* @__PURE__ */ o(
1019
- n,
1020
- {
1021
- sx: {
1022
- display: "flex",
1023
- alignItems: "center",
1024
- justifyContent: h ? "center" : "flex-start",
1025
- gap: u["3xs"]
1026
- },
1027
- children: [
1028
- /* @__PURE__ */ t(d, { sx: S.headlineText, children: l }),
1029
- /* @__PURE__ */ t(v, { rulesDisplay: m, rules: e.rules || "" })
1030
- ]
1031
- }
1032
- ),
1033
- /* @__PURE__ */ o(n, { sx: S.contentContainer, children: [
1034
- /* @__PURE__ */ t(d, { sx: S.titleText, children: e.title }),
1035
- /* @__PURE__ */ t(d, { sx: S.descriptionText, children: F(e.description) })
1036
- ] })
1037
- ] }),
1038
- I && !h && g && /* @__PURE__ */ t(n, { children: g((s == null ? void 0 : s.contentColor) || P) })
1039
- ] }),
1040
- S.headlineSection
1041
- ) : /* @__PURE__ */ t(n, { sx: S.headlineSectionNoImage, children: /* @__PURE__ */ o(n, { sx: S.headlineContent, children: [
1042
- /* @__PURE__ */ o(n, { children: [
1043
- /* @__PURE__ */ o(
1044
- n,
1045
- {
1046
- sx: {
1047
- display: "flex",
1048
- alignItems: "center",
1049
- justifyContent: h ? "center" : "flex-start",
1050
- gap: u["3xs"]
1051
- },
1052
- children: [
1053
- /* @__PURE__ */ t(d, { sx: S.headlineTextNoImage, children: l }),
1054
- /* @__PURE__ */ t(v, { rulesDisplay: m, rules: e.rules || "" })
1055
- ]
1056
- }
1057
- ),
1058
- /* @__PURE__ */ o(n, { sx: S.contentContainer, children: [
1059
- /* @__PURE__ */ t(d, { sx: S.titleTextNoImage, children: e.title }),
1060
- /* @__PURE__ */ t(d, { sx: S.descriptionTextNoImage, children: F(e.description) })
1061
- ] })
1062
- ] }),
1063
- I && !h && g && /* @__PURE__ */ t(n, { children: g(b) })
1064
- ] }) }),
1065
- /* @__PURE__ */ o(n, { sx: S.questionArea, children: [
1066
- r && x && /* @__PURE__ */ t(n, { sx: S.embedCodeHeadlineContent, children: /* @__PURE__ */ o(n, { children: [
1067
- /* @__PURE__ */ o(
1068
- n,
1069
- {
1070
- sx: {
1071
- display: "flex",
1072
- alignItems: "center",
1073
- justifyContent: "center",
1074
- gap: u["3xs"]
1075
- },
1076
- children: [
1077
- /* @__PURE__ */ t(
1078
- d,
1079
- {
1080
- sx: {
1081
- ...S.headlineTextNoImage,
1082
- textAlign: "center"
1083
- },
1084
- children: l
1085
- }
1086
- ),
1087
- /* @__PURE__ */ t(v, { rulesDisplay: m, rules: e.rules || "" })
1088
- ]
1089
- }
1090
- ),
1091
- /* @__PURE__ */ o(n, { sx: S.contentContainer, children: [
1092
- /* @__PURE__ */ t(
1093
- d,
1094
- {
1095
- sx: {
1096
- ...S.titleTextNoImage,
1097
- textAlign: "center"
1098
- },
1099
- children: e.title
1100
- }
1101
- ),
1102
- /* @__PURE__ */ t(
1103
- d,
1104
- {
1105
- sx: {
1106
- ...S.descriptionTextNoImage,
1107
- textAlign: "center"
1108
- },
1109
- children: F(e.description)
1110
- }
1111
- )
1112
- ] })
1113
- ] }) }),
1114
- a
1115
- ] })
1116
- ] });
1117
- }, ke = (e) => {
1118
- var l;
1119
- return {
1120
- // Main container with background overlay
1121
- mainContainer: {
1122
- display: "flex",
1123
- flexDirection: "column",
1124
- justifyContent: "space-between",
1125
- gap: "40px",
1126
- p: e.spacingScale.xl,
1127
- boxShadow: "md",
1128
- border: (l = e.brandingColors) != null && l.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
1129
- overflow: "hidden",
1130
- backgroundImage: e.backgroundImage,
1131
- backgroundPosition: "center",
1132
- backgroundSize: "cover",
1133
- position: "relative",
1134
- borderRadius: e.mdBorderRadius,
1135
- minHeight: "250px",
1136
- "&::before": {
1137
- content: '""',
1138
- position: "absolute",
1139
- background: e.imageBackgroundGradient,
1140
- top: 0,
1141
- left: 0,
1142
- right: 0,
1143
- bottom: 0,
1144
- borderRadius: "inherit",
1145
- zIndex: 0
1146
- }
1147
- },
1148
- // Headline section wrapper
1149
- headlineSection: {
1150
- display: "flex",
1151
- justifyContent: "space-between",
1152
- flex: "1 0 0",
1153
- alignSelf: "stretch"
1154
- },
1155
- // Headline content container
1156
- headlineContent: {
1157
- display: "flex",
1158
- flexDirection: "column",
1159
- alignItems: "flex-start",
1160
- flex: "1 0 0",
1161
- gap: "16px"
1162
- },
1163
- // Headline content with z-index
1164
- headlineContentInner: {
1165
- zIndex: 10
1166
- },
1167
- // Headline typography
1168
- headlineText: {
1169
- fontWeight: 500,
1170
- lineHeight: "166%",
1171
- letterSpacing: "1px",
1172
- textAlign: { xs: "center", md: "left" },
1173
- color: e.secondaryColor,
1174
- opacity: "70%",
1175
- textTransform: "uppercase",
1176
- fontFamily: e.fontFamilySecondary,
1177
- fontSize: "0.75em"
1178
- },
1179
- // Content container
1180
- contentContainer: {
1181
- display: "flex",
1182
- flexDirection: "column",
1183
- gap: e.spacingScale["3xs"]
1184
- },
1185
- // Title typography
1186
- titleText: {
1187
- fontWeight: 700,
1188
- lineHeight: "133%",
1189
- letterSpacing: "0px",
1190
- textAlign: { xs: "center", md: "left" },
1191
- fontSize: "1.5em",
1192
- color: e.darkTextColor,
1193
- fontFamily: e.fontFamilyPrimary
1194
- },
1195
- // Description typography
1196
- descriptionText: {
1197
- fontWeight: 400,
1198
- lineHeight: "140%",
1199
- letterSpacing: "0.15px",
1200
- fontSize: "1.25em",
1201
- textAlign: { xs: "center", md: "left" },
1202
- color: e.secondaryColor,
1203
- opacity: "70%",
1204
- fontFamily: e.fontFamilyPrimary
1205
- },
1206
- // Main content section
1207
- mainContentSection: {
1208
- display: "flex",
1209
- flexDirection: "column",
1210
- gap: "24px"
1211
- }
1212
- };
1213
- }, We = ({
1214
- entity: e,
1215
- headline: l,
1216
- finalImage: c,
1217
- children: a,
1218
- rulesDisplay: x
1219
- }) => {
1220
- var s, k;
1221
- const r = p(), I = D(), g = V(
1222
- B.OVERLAY
1223
- ), m = ((s = e.branding) == null ? void 0 : s.colors) || null, C = (m == null ? void 0 : m.contentColor) || r.colorSchemes.dark.textColor, R = r.customFontFamily.dark.primary, h = r.customFontFamily.dark.secondary, M = r.customRadius.dark.md, u = (k = r.border) == null ? void 0 : k.dark.size, w = r.colorSchemes.dark.textColor, f = ce(c), y = ke({
1224
- spacingScale: I,
1225
- brandingColors: m,
1226
- secondaryColor: C,
1227
- fontFamilyPrimary: R,
1228
- fontFamilySecondary: h,
1229
- mdBorderRadius: M,
1230
- borderSize: u,
1231
- backgroundImage: f,
1232
- darkTextColor: w,
1233
- imageBackgroundGradient: g
1234
- });
1235
- return /* @__PURE__ */ o(n, { sx: y.mainContainer, children: [
1236
- /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(n, { sx: y.headlineSection, children: /* @__PURE__ */ t(n, { sx: y.headlineContent, children: /* @__PURE__ */ o(n, { sx: y.headlineContentInner, children: [
1237
- /* @__PURE__ */ o(
1238
- n,
1239
- {
1240
- sx: {
1241
- display: "flex",
1242
- alignItems: "center",
1243
- gap: I["3xs"]
1244
- },
1245
- children: [
1246
- /* @__PURE__ */ t(d, { level: "body-sm", sx: y.headlineText, children: l }),
1247
- /* @__PURE__ */ t(
1248
- v,
1249
- {
1250
- rulesDisplay: x,
1251
- isOverlayVariant: !0,
1252
- rules: e.rules || ""
1253
- }
1254
- )
1255
- ]
1256
- }
1257
- ),
1258
- /* @__PURE__ */ o(n, { sx: y.contentContainer, children: [
1259
- /* @__PURE__ */ t(d, { level: "h4", sx: y.titleText, children: e.title }),
1260
- e.description && /* @__PURE__ */ t(d, { level: "body-lg", sx: y.descriptionText, children: F(e.description) })
1261
- ] })
1262
- ] }) }) }) }),
1263
- /* @__PURE__ */ t(n, { sx: y.mainContentSection, children: a })
1264
- ] });
1265
- }, Te = (e) => {
1266
- var l, c, a;
1267
- return {
1268
- // Wrapper container for the entire split layout
1269
- wrapper: {
1270
- display: "flex",
1271
- flexDirection: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "column" : "row",
1272
- width: "100%"
1273
- },
1274
- // Desktop image section with background image and overlay
1275
- desktopImageSection: {
1276
- display: e.isLarge && !e.alwaysShowImage ? "none" : "flex",
1277
- flexDirection: "column",
1278
- justifyContent: "space-between",
1279
- gap: "10px",
1280
- flex: e.isMobile || e.isLarge && e.alwaysShowImage ? "1" : "0 0 50%",
1281
- width: e.isMobile || e.isLarge && e.alwaysShowImage ? "100%" : "50%",
1282
- minWidth: e.isMobile || e.isLarge && e.alwaysShowImage ? "100%" : "50%",
1283
- maxWidth: e.isMobile || e.isLarge && e.alwaysShowImage ? "100%" : "50%",
1284
- backgroundImage: `url(${e.finalImage})`,
1285
- backgroundSize: "cover",
1286
- backgroundPosition: "center",
1287
- borderTopLeftRadius: e.isTabulated ? 0 : e.borderRadius.md,
1288
- borderTopRightRadius: e.isMobile || e.isLarge && e.alwaysShowImage ? e.isTabulated ? 0 : e.borderRadius.md : 0,
1289
- borderBottomLeftRadius: e.isMobile || e.isLarge && e.alwaysShowImage ? 0 : e.borderRadius.md,
1290
- overflow: "hidden",
1291
- height: "auto",
1292
- position: "relative",
1293
- minHeight: e.isMobile || e.isLarge && e.alwaysShowImage ? "210px" : "430px",
1294
- maxHeight: e.isMobile || e.isLarge && e.alwaysShowImage ? "auto" : "100%",
1295
- "&::before": {
1296
- content: '""',
1297
- position: "absolute",
1298
- width: "100%",
1299
- height: "100%",
1300
- background: e.imageBackgroundGradient,
1301
- borderTopLeftRadius: "5px",
1302
- borderTopRightRadius: "5px"
1303
- }
1304
- },
1305
- // Image section content wrapper
1306
- imageSectionContent: {
1307
- zIndex: 1,
1308
- height: "100%",
1309
- p: e.spacingScale.xl,
1310
- display: "flex",
1311
- flexDirection: "column",
1312
- justifyContent: "space-between",
1313
- gap: e.spacingScale.xl
1314
- },
1315
- // Headline text
1316
- headlineText: {
1317
- fontWeight: 500,
1318
- lineHeight: "166%",
1319
- letterSpacing: "1px",
1320
- fontSize: "0.75em",
1321
- color: ((l = e.brandingColors) == null ? void 0 : l.secondaryColor) || e.darkTextColor,
1322
- opacity: "70%",
1323
- textTransform: "uppercase",
1324
- fontFamily: e.fontFamilySecondary,
1325
- textAlign: e.isLarge ? "center" : "left"
1326
- },
1327
- // Content container (title + description)
1328
- contentContainer: {
1329
- display: "flex",
1330
- flexDirection: "column",
1331
- gap: e.spacingScale["3xs"]
1332
- },
1333
- // Title text
1334
- titleText: {
1335
- fontWeight: 700,
1336
- lineHeight: "133%",
1337
- fontSize: "1.5em",
1338
- letterSpacing: "0.15px",
1339
- color: ((c = e.brandingColors) == null ? void 0 : c.contentColor) || e.darkTextColor,
1340
- fontFamily: e.fontFamilyPrimary,
1341
- textAlign: e.isLarge ? "center" : "left"
1342
- },
1343
- // Description text
1344
- descriptionText: {
1345
- fontWeight: 500,
1346
- lineHeight: "140%",
1347
- fontSize: "1.25em",
1348
- letterSpacing: "0.15px",
1349
- color: ((a = e.brandingColors) == null ? void 0 : a.secondaryColor) || e.darkTextColor,
1350
- opacity: "70%",
1351
- fontFamily: e.fontFamilyPrimary,
1352
- textAlign: e.isLarge ? "center" : "left"
1353
- },
1354
- // Presented by desktop container
1355
- presentedByDesktop: {
1356
- display: "block"
1357
- },
1358
- // Question/Content area (right side on desktop, below image on mobile)
1359
- questionArea: {
1360
- flex: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "1" : "0 0 50%",
1361
- width: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "100%" : "50%",
1362
- minWidth: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "100%" : "50%",
1363
- maxWidth: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "100%" : "50%",
1364
- display: "flex",
1365
- flexDirection: "column"
1366
- }
1367
- };
1368
- }, De = ({
1369
- entity: e,
1370
- headline: l,
1371
- finalImage: c,
1372
- brandingContent: a,
1373
- children: x,
1374
- isTabulated: r = !1,
1375
- alwaysShowImage: I = !1,
1376
- rulesDisplay: g
1377
- }) => {
1378
- var k;
1379
- const m = j(), C = re(), R = p(), h = D(), M = A().primary, u = A().secondary, w = L(), f = V(
1380
- B.SPLIT
1381
- ), y = ((k = e.branding) == null ? void 0 : k.colors) || null, s = Te({
1382
- finalImage: c,
1383
- spacingScale: h,
1384
- borderRadius: w,
1385
- fontFamilyPrimary: M,
1386
- fontFamilySecondary: u,
1387
- brandingColors: y,
1388
- darkTextColor: R.colorSchemes.dark.textColor,
1389
- imageBackgroundGradient: f,
1390
- isMobile: m,
1391
- isLarge: C,
1392
- isTabulated: r,
1393
- alwaysShowImage: I
1394
- });
1395
- return /* @__PURE__ */ o(n, { sx: s.wrapper, children: [
1396
- /* @__PURE__ */ t(n, { sx: s.desktopImageSection, children: /* @__PURE__ */ o(n, { sx: s.imageSectionContent, children: [
1397
- /* @__PURE__ */ o(n, { children: [
1398
- /* @__PURE__ */ o(
1399
- n,
1400
- {
1401
- sx: {
1402
- display: "flex",
1403
- alignItems: "center",
1404
- gap: h["3xs"]
1405
- },
1406
- children: [
1407
- /* @__PURE__ */ t(d, { level: "body-sm", sx: s.headlineText, children: l }),
1408
- /* @__PURE__ */ t(v, { rulesDisplay: g, rules: e.rules || "" })
1409
- ]
1410
- }
1411
- ),
1412
- /* @__PURE__ */ o(n, { sx: s.contentContainer, children: [
1413
- /* @__PURE__ */ t(d, { level: "body-lg", sx: s.titleText, children: e.title }),
1414
- /* @__PURE__ */ t(d, { level: "body-md", sx: s.descriptionText, children: F(e.description) })
1415
- ] })
1416
- ] }),
1417
- /* @__PURE__ */ t(n, { sx: s.presentedByDesktop, children: a })
1418
- ] }) }),
1419
- /* @__PURE__ */ t(n, { sx: s.questionArea, children: x })
1420
- ] });
1421
- }, Ie = (e) => {
1422
- var l, c, a;
1423
- return {
1424
- // Mobile headline with image background
1425
- mobileHeadlineWithImage: {
1426
- display: e.isMobile ? "flex" : "none",
1427
- flexDirection: "column",
1428
- justifyContent: "space-between",
1429
- gap: "10px",
1430
- backgroundImage: `url(${e.finalImage})`,
1431
- backgroundSize: "cover",
1432
- backgroundPosition: "center",
1433
- borderTopLeftRadius: "5px",
1434
- borderTopRightRadius: "5px",
1435
- position: "relative",
1436
- minHeight: "210px",
1437
- overflow: "hidden",
1438
- height: "auto",
1439
- "&::before": {
1440
- content: '""',
1441
- position: "absolute",
1442
- width: "100%",
1443
- height: "100%",
1444
- background: e.imageBackgroundGradient,
1445
- borderTopLeftRadius: "5px",
1446
- borderTopRightRadius: "5px"
1447
- }
1448
- },
1449
- // Content inside mobile headline with image
1450
- mobileHeadlineContent: {
1451
- zIndex: 1,
1452
- height: "100%",
1453
- p: e.spacingScale.xl,
1454
- gap: e.spacingScale["2xl"],
1455
- display: "flex",
1456
- flexDirection: "column",
1457
- justifyContent: "space-between"
1458
- },
1459
- // Mobile headline without image
1460
- mobileHeadlineWithoutImage: {
1461
- display: e.isMobile ? "flex" : "none",
1462
- flex: "0.5",
1463
- flexDirection: "column",
1464
- justifyContent: "space-between",
1465
- p: e.spacingScale.lg,
1466
- gap: e.spacingScale["2xl"]
1467
- },
1468
- // Headline typography (mobile with image)
1469
- headlineTypographyMobileImage: {
1470
- fontWeight: 500,
1471
- lineHeight: "166%",
1472
- letterSpacing: "1px",
1473
- fontSize: "0.75em",
1474
- color: ((l = e.brandingColors) == null ? void 0 : l.secondaryColor) || e.darkTextColor,
1475
- opacity: "70%",
1476
- textTransform: "uppercase",
1477
- fontFamily: e.fontFamilySecondary,
1478
- textAlign: "center"
1479
- },
1480
- // Headline typography (mobile without image & desktop)
1481
- headlineTypography: {
1482
- fontWeight: 500,
1483
- lineHeight: "166%",
1484
- letterSpacing: "1px",
1485
- textTransform: "uppercase",
1486
- fontSize: "0.75em",
1487
- color: e.secondaryColor,
1488
- opacity: e.opacity,
1489
- fontFamily: e.fontFamilySecondary,
1490
- textAlign: "center"
1491
- },
1492
- // Title typography (mobile with image)
1493
- titleTypographyMobileImage: {
1494
- fontWeight: 700,
1495
- lineHeight: "133%",
1496
- fontSize: "1.5em",
1497
- letterSpacing: "0.15px",
1498
- color: ((c = e.brandingColors) == null ? void 0 : c.contentColor) || e.darkTextColor,
1499
- fontFamily: e.fontFamilyPrimary,
1500
- textAlign: "center"
1501
- },
1502
- // Title typography (mobile without image & desktop)
1503
- titleTypography: {
1504
- fontWeight: 700,
1505
- lineHeight: "133%",
1506
- letterSpacing: "0px",
1507
- fontSize: "1.5em",
1508
- color: e.textColor,
1509
- fontFamily: e.fontFamilyPrimary,
1510
- textAlign: e.isMobile ? "center" : "left"
1511
- },
1512
- // Description typography (mobile with image)
1513
- descriptionTypographyMobileImage: {
1514
- fontWeight: 400,
1515
- lineHeight: "140%",
1516
- fontSize: "1.25em",
1517
- letterSpacing: "0.15px",
1518
- color: ((a = e.brandingColors) == null ? void 0 : a.secondaryColor) || e.darkTextColor,
1519
- opacity: "70%",
1520
- fontFamily: e.fontFamilyPrimary,
1521
- textAlign: "center"
1522
- },
1523
- // Description typography (mobile without image & desktop)
1524
- descriptionTypography: {
1525
- fontWeight: 400,
1526
- lineHeight: "140%",
1527
- letterSpacing: "0.15px",
1528
- fontSize: "1.25em",
1529
- color: e.secondaryColor,
1530
- opacity: e.opacity,
1531
- fontFamily: e.fontFamilyPrimary,
1532
- textAlign: e.isMobile ? "center" : "left"
1533
- },
1534
- // Desktop title typography (centered)
1535
- titleTypographyDesktop: {
1536
- fontWeight: 700,
1537
- lineHeight: "133%",
1538
- letterSpacing: "0px",
1539
- fontSize: "1.5em",
1540
- color: e.textColor,
1541
- fontFamily: e.fontFamilyPrimary
1542
- },
1543
- // Desktop description typography (centered)
1544
- descriptionTypographyDesktop: {
1545
- fontWeight: 400,
1546
- lineHeight: "140%",
1547
- letterSpacing: "0.15px",
1548
- fontSize: "1.25em",
1549
- color: e.secondaryColor,
1550
- opacity: e.opacity,
1551
- fontFamily: e.fontFamilyPrimary
1552
- },
1553
- // Image container (left position)
1554
- imageContainerLeft: {
1555
- display: e.isMobile ? "none" : "block",
1556
- flex: "0.3",
1557
- borderTopLeftRadius: e.borderRadius.md,
1558
- borderBottomLeftRadius: e.borderRadius.md,
1559
- overflow: "hidden",
1560
- height: "auto",
1561
- position: "relative"
1562
- },
1563
- // Image container (right position)
1564
- imageContainerRight: {
1565
- display: e.isMobile ? "none" : "block",
1566
- flex: "0.3",
1567
- borderTopRightRadius: "5px",
1568
- borderBottomRightRadius: "5px",
1569
- overflow: "hidden",
1570
- height: "auto",
1571
- position: "relative"
1572
- },
1573
- // Main content area
1574
- mainContentArea: {
1575
- flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
1576
- // display: props.isMobile ? "block" : "flex",
1577
- display: "flex",
1578
- flexDirection: "column",
1579
- p: e.spacingScale.md,
1580
- gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
1581
- },
1582
- // Desktop headline container
1583
- desktopHeadlineContainer: {
1584
- display: e.isMobile ? "none" : "flex",
1585
- flexDirection: "column",
1586
- justifyContent: "space-between",
1587
- gap: e.spacingScale["2xl"],
1588
- textAlign: "center"
1589
- },
1590
- // Content container
1591
- contentContainer: {
1592
- display: "flex",
1593
- flexDirection: "column",
1594
- gap: e.spacingScale["3xs"]
1595
- },
1596
- // Question area
1597
- questionArea: {
1598
- display: "flex",
1599
- flexDirection: "column",
1600
- px: e.spacingScale.md
1601
- },
1602
- // Question container
1603
- questionContainer: {
1604
- display: "flex",
1605
- flexDirection: "column",
1606
- gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
1607
- },
1608
- // Alert container
1609
- alertContainer: {
1610
- // py: props.spacingScale.md,
1611
- display: "flex",
1612
- flexDirection: "column",
1613
- backdropFilter: "blur(4px)"
1614
- },
1615
- image: {
1616
- width: "100%",
1617
- height: "100%",
1618
- objectFit: "cover"
1619
- },
1620
- // CTA container
1621
- ctaContainer: {
1622
- display: "flex",
1623
- flexDirection: "column",
1624
- alignItems: "center"
1625
- },
1626
- // CTA content wrapper
1627
- ctaContentWrapper: {
1628
- display: "flex",
1629
- flexDirection: "column",
1630
- justifyContent: "center",
1631
- alignItems: "center",
1632
- gap: e.spacingScale.lg
1633
- },
1634
- // Buttons container
1635
- buttonsContainer: {
1636
- display: "flex",
1637
- flexDirection: e.isMobile ? "column" : "row",
1638
- gap: e.spacingScale.md
1639
- },
1640
- // Try again button
1641
- tryAgainButton: {
1642
- display: "flex",
1643
- py: e.spacingScale.xs,
1644
- px: "16px",
1645
- flexDirection: "column",
1646
- justifyContent: "center",
1647
- alignItems: "center",
1648
- gap: "8px",
1649
- borderRadius: e.borderRadius.xl,
1650
- border: e.borderSize + " solid " + e.primaryColor,
1651
- bgcolor: e.buttonBgColor,
1652
- "&:hover": {
1653
- bgcolor: e.onSurfaceColor,
1654
- borderColor: e.primaryColor
1655
- },
1656
- fontSize: "0.8125em"
1657
- },
1658
- // Try again button content
1659
- tryAgainButtonContent: {
1660
- display: "flex",
1661
- justifyContent: "center",
1662
- alignItems: "center",
1663
- gap: "8px",
1664
- alignSelf: "stretch"
1665
- },
1666
- // Try again icon
1667
- tryAgainIcon: {
1668
- display: "flex",
1669
- width: "16px",
1670
- height: "16px",
1671
- justifyContent: "flex-end",
1672
- alignItems: "center",
1673
- color: e.textPrimary
1674
- },
1675
- // Try again text
1676
- tryAgainText: {
1677
- color: e.textPrimary,
1678
- textAlign: "center",
1679
- fontFamily: e.fontFamilyPrimary,
1680
- fontSize: "0.8125em",
1681
- fontStyle: "normal",
1682
- fontWeight: 500,
1683
- lineHeight: "22px",
1684
- letterSpacing: "0.46px",
1685
- textTransform: "uppercase"
1686
- },
1687
- // Presented by container
1688
- presentedByContainer: {
1689
- px: e.spacingScale.md
1690
- }
1691
- };
1692
- }, le = te(/* @__PURE__ */ t("path", {
1693
- d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8"
1694
- }), "Replay"), Le = (e) => {
1695
- var $;
1696
- const l = (($ = e.entity.branding) == null ? void 0 : $.colors) || null, c = p(), a = j(), x = ie(
1697
- {
1698
- images: e.entity.images || null,
1699
- imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
1700
- },
1701
- B.STANDARD
1702
- ), r = D(), I = A().primary, g = A().secondary, m = L(), C = (l == null ? void 0 : l.contentColor) || T().textColor, R = T().textPrimary, h = (l == null ? void 0 : l.primaryColor) || T().palette.primary.plainColor, M = (l == null ? void 0 : l.secondaryColor) || T().textColor, u = fe().size, w = T().surface, f = T().onSurface, y = V(
1703
- B.STANDARD
1704
- ), { t: s } = G(), k = e.imagePosition || "left", b = "60%", W = e.isApiError ? s("common.error.title") : s("common.authentication.accessRequired"), z = e.isApiError ? e.apiErrorMessage || s("common.error.message") : s("common.authentication.invalidOrMissingAuth"), i = Ie({
1705
- finalImage: x,
1706
- spacingScale: r,
1707
- borderRadius: m,
1708
- fontFamilyPrimary: I,
1709
- fontFamilySecondary: g,
1710
- textColor: C,
1711
- secondaryColor: M,
1712
- brandingColors: l,
1713
- darkTextColor: c.colorSchemes.dark.textColor,
1714
- opacity: b,
1715
- imagePosition: k,
1716
- imageBackgroundGradient: y,
1717
- textPrimary: R,
1718
- primaryColor: h,
1719
- borderSize: u,
1720
- buttonBgColor: w,
1721
- onSurfaceColor: f,
1722
- isMobile: a
1723
- }), P = () => e.isApiError ? /* @__PURE__ */ o(H, { children: [
1724
- /* @__PURE__ */ t(n, { sx: i.ctaContainer, children: /* @__PURE__ */ t(n, { sx: i.ctaContentWrapper, children: /* @__PURE__ */ t(n, { sx: i.buttonsContainer, children: /* @__PURE__ */ t(q, { sx: i.tryAgainButton, onClick: e.toggleTryAgain, children: /* @__PURE__ */ o(n, { sx: i.tryAgainButtonContent, children: [
1725
- /* @__PURE__ */ t(le, { sx: i.tryAgainIcon }),
1726
- /* @__PURE__ */ t(d, { sx: i.tryAgainText, children: e.tryAgainButtonText })
1727
- ] }) }) }) }) }),
1728
- /* @__PURE__ */ t(n, { sx: i.presentedByContainer, children: e.renderPresentedBy(C) })
1729
- ] }) : /* @__PURE__ */ t(H, {});
1730
- return /* @__PURE__ */ o(H, { children: [
1731
- x ? /* @__PURE__ */ t(n, { sx: i.mobileHeadlineWithImage, children: /* @__PURE__ */ t(n, { sx: i.mobileHeadlineContent, children: /* @__PURE__ */ o(n, { children: [
1732
- /* @__PURE__ */ o(n, { sx: { display: "flex", alignItems: "center", gap: r["3xs"] }, children: [
1733
- /* @__PURE__ */ t(
1734
- d,
1735
- {
1736
- level: "body-sm",
1737
- sx: i.headlineTypographyMobileImage,
1738
- children: e.headline
1739
- }
1740
- ),
1741
- /* @__PURE__ */ t(
1742
- v,
1743
- {
1744
- rulesDisplay: e.rulesDisplay,
1745
- rules: e.entity.rules || ""
1746
- }
1747
- )
1748
- ] }),
1749
- /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
1750
- /* @__PURE__ */ t(
1751
- d,
1752
- {
1753
- level: "body-lg",
1754
- sx: i.titleTypographyMobileImage,
1755
- children: e.entity.title
1756
- }
1757
- ),
1758
- /* @__PURE__ */ t(
1759
- d,
1760
- {
1761
- level: "body-md",
1762
- sx: i.descriptionTypographyMobileImage,
1763
- children: F(e.entity.description)
1764
- }
1765
- )
1766
- ] })
1767
- ] }) }) }) : /* @__PURE__ */ t(n, { sx: i.mobileHeadlineWithoutImage, children: /* @__PURE__ */ o(n, { children: [
1768
- /* @__PURE__ */ o(n, { sx: { display: "flex", alignItems: "center", gap: r["3xs"] }, children: [
1769
- /* @__PURE__ */ t(d, { level: "body-sm", sx: i.headlineTypography, children: e.headline }),
1770
- /* @__PURE__ */ t(
1771
- v,
1772
- {
1773
- rulesDisplay: e.rulesDisplay,
1774
- rules: e.entity.rules || ""
1775
- }
1776
- )
1777
- ] }),
1778
- /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
1779
- /* @__PURE__ */ t(d, { level: "h4", sx: i.titleTypography, children: e.entity.title }),
1780
- /* @__PURE__ */ t(d, { level: "body-md", sx: i.descriptionTypography, children: F(e.entity.description) })
1781
- ] })
1782
- ] }) }),
1783
- x && k === "left" && /* @__PURE__ */ t(n, { sx: i.imageContainerLeft, children: /* @__PURE__ */ t(
1784
- "img",
1785
- {
1786
- src: x,
1787
- alt: "illustration",
1788
- style: i.image
1789
- }
1790
- ) }),
1791
- /* @__PURE__ */ o(n, { sx: i.mainContentArea, children: [
1792
- /* @__PURE__ */ t(n, { sx: { px: r.md }, children: /* @__PURE__ */ t(n, { sx: i.desktopHeadlineContainer, children: /* @__PURE__ */ o(
1793
- n,
1794
- {
1795
- sx: {
1796
- display: "flex",
1797
- flexDirection: "column",
1798
- alignItems: "center"
1799
- },
1800
- children: [
1801
- /* @__PURE__ */ o(n, { sx: { display: "flex", alignItems: "center", gap: r["3xs"] }, children: [
1802
- /* @__PURE__ */ t(d, { level: "body-sm", sx: i.headlineTypography, children: e.headline }),
1803
- /* @__PURE__ */ t(
1804
- v,
1805
- {
1806
- rulesDisplay: e.rulesDisplay,
1807
- rules: e.entity.rules || ""
1808
- }
1809
- )
1810
- ] }),
1811
- /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
1812
- /* @__PURE__ */ t(d, { level: "h4", sx: i.titleTypographyDesktop, children: e.entity.title }),
1813
- /* @__PURE__ */ t(
1814
- d,
1815
- {
1816
- level: "body-md",
1817
- sx: i.descriptionTypographyDesktop,
1818
- children: F(e.entity.description)
1819
- }
1820
- )
1821
- ] })
1822
- ]
1823
- }
1824
- ) }) }),
1825
- /* @__PURE__ */ t(n, { sx: i.questionArea, children: /* @__PURE__ */ o(n, { sx: i.questionContainer, children: [
1826
- /* @__PURE__ */ t(n, { sx: i.alertContainer, children: /* @__PURE__ */ t(
1827
- oe,
1828
- {
1829
- variant: "error",
1830
- title: W,
1831
- message: z
1832
- }
1833
- ) }),
1834
- e.isApiError ? /* @__PURE__ */ t(H, {}) : e.renderPresentedBy(C)
1835
- ] }) }),
1836
- P()
1837
- ] }),
1838
- x && k === "right" && /* @__PURE__ */ t(n, { sx: i.imageContainerRight, children: /* @__PURE__ */ t(
1839
- "img",
1840
- {
1841
- src: x,
1842
- alt: "illustration",
1843
- style: i.image
1844
- }
1845
- ) })
1846
- ] });
1847
- }, we = (e) => {
1848
- var l, c, a;
1849
- return {
1850
- // Main headline section with background image
1851
- headlineSection: {
1852
- display: "flex",
1853
- flexDirection: "column",
1854
- justifyContent: "space-between",
1855
- gap: "10px",
1856
- flex: "0.5",
1857
- backgroundImage: `url(${e.finalImage})`,
1858
- backgroundSize: "cover",
1859
- backgroundPosition: "center",
1860
- borderTopLeftRadius: e.mdBorderRadius,
1861
- borderTopRightRadius: e.isMobile ? e.mdBorderRadius : 0,
1862
- borderBottomLeftRadius: e.isMobile ? 0 : e.mdBorderRadius,
1863
- overflow: "hidden",
1864
- height: "auto",
1865
- position: "relative",
1866
- minHeight: e.isMobile ? "210px" : "430px",
1867
- "&::before": {
1868
- content: '""',
1869
- position: "absolute",
1870
- width: "100%",
1871
- height: "100%",
1872
- background: e.imageBackgroundGradient,
1873
- borderTopLeftRadius: "5px",
1874
- borderTopRightRadius: "5px"
1875
- }
1876
- },
1877
- // Headline content wrapper
1878
- headlineContent: {
1879
- zIndex: 1,
1880
- height: "100%",
1881
- p: e.spacingScale.xl,
1882
- gap: e.spacingScale.xl,
1883
- display: "flex",
1884
- flexDirection: "column",
1885
- justifyContent: "space-between"
1886
- },
1887
- // Headline text
1888
- headlineText: {
1889
- fontWeight: 500,
1890
- lineHeight: "166%",
1891
- letterSpacing: "1px",
1892
- fontSize: "0.75em",
1893
- color: ((l = e.brandingColors) == null ? void 0 : l.secondaryColor) || e.darkTextColor,
1894
- opacity: "70%",
1895
- textTransform: "uppercase",
1896
- fontFamily: e.fontFamilySecondary,
1897
- textAlign: e.isMobile ? "center" : "left"
1898
- },
1899
- // Content container
1900
- contentContainer: {
1901
- display: "flex",
1902
- flexDirection: "column",
1903
- gap: e.spacingScale["3xs"]
1904
- },
1905
- // Title text
1906
- titleText: {
1907
- fontWeight: 700,
1908
- lineHeight: "133%",
1909
- fontSize: "1.5em",
1910
- letterSpacing: "0.15px",
1911
- color: ((c = e.brandingColors) == null ? void 0 : c.contentColor) || e.darkTextColor,
1912
- fontFamily: e.fontFamilyPrimary,
1913
- textAlign: e.isMobile ? "center" : "left"
1914
- },
1915
- // Description text
1916
- descriptionText: {
1917
- fontWeight: 400,
1918
- lineHeight: "140%",
1919
- fontSize: "1.25em",
1920
- letterSpacing: "0.15px",
1921
- color: ((a = e.brandingColors) == null ? void 0 : a.secondaryColor) || e.darkTextColor,
1922
- opacity: "70%",
1923
- fontFamily: e.fontFamilyPrimary,
1924
- textAlign: e.isMobile ? "center" : "left"
1925
- },
1926
- // Presented by desktop container
1927
- presentedByDesktop: {
1928
- display: e.isMobile ? "none" : "block"
1929
- },
1930
- // Question area (error section)
1931
- questionArea: {
1932
- flex: "0.5",
1933
- display: "flex",
1934
- flexDirection: "column",
1935
- justifyContent: "center",
1936
- gap: e.spacingScale.md,
1937
- p: e.spacingScale.lg
1938
- },
1939
- // Presented by mobile container
1940
- presentedByMobile: {
1941
- display: e.isMobile ? "block" : "none"
1942
- },
1943
- // CTA container
1944
- ctaContainer: {
1945
- display: "flex",
1946
- flexDirection: "column",
1947
- alignItems: "center"
1948
- },
1949
- // CTA content wrapper
1950
- ctaContentWrapper: {
1951
- display: "flex",
1952
- flexDirection: "column",
1953
- justifyContent: "center",
1954
- alignItems: "center",
1955
- gap: e.spacingScale.lg
1956
- },
1957
- // Buttons container
1958
- buttonsContainer: {
1959
- display: "flex",
1960
- flexDirection: "column",
1961
- gap: "16px"
1962
- },
1963
- // Try again button
1964
- tryAgainButton: {
1965
- display: "flex",
1966
- py: e.spacingScale.xs,
1967
- px: "16px",
1968
- flexDirection: "column",
1969
- justifyContent: "center",
1970
- alignItems: "center",
1971
- gap: "8px",
1972
- borderRadius: e.borderRadius.xl,
1973
- color: e.textPrimary,
1974
- bgcolor: e.surfaceColor,
1975
- "&:hover": {
1976
- bgcolor: e.onSurfaceColor
1977
- },
1978
- fontSize: "0.9375em"
1979
- },
1980
- // Try again button content
1981
- tryAgainButtonContent: {
1982
- display: "flex",
1983
- justifyContent: "center",
1984
- alignItems: "center",
1985
- gap: "8px",
1986
- alignSelf: "stretch"
1987
- },
1988
- // Try again icon
1989
- tryAgainIcon: {
1990
- display: "flex",
1991
- width: "16px",
1992
- height: "16px",
1993
- justifyContent: "flex-end",
1994
- alignItems: "center",
1995
- color: e.textPrimary
1996
- },
1997
- // Try again text
1998
- tryAgainText: {
1999
- color: e.textPrimary,
2000
- textAlign: "center",
2001
- fontFamily: e.fontFamilyPrimary,
2002
- fontSize: "0.8125em",
2003
- fontStyle: "normal",
2004
- fontWeight: 500,
2005
- lineHeight: "22px",
2006
- letterSpacing: "0.46px",
2007
- textTransform: "uppercase"
2008
- }
2009
- };
2010
- }, je = (e) => {
2011
- var z;
2012
- const l = p(), c = j(), a = ((z = e.entity.branding) == null ? void 0 : z.colors) || null, x = ie(
2013
- {
2014
- images: e.entity.images || null,
2015
- imagePlaceholder: e.defaultImagePlaceholderUrl || ""
2016
- },
2017
- B.SPLIT
2018
- ), { t: r } = G(), I = T().textPrimary, g = T().surface, m = T().onSurface, C = (a == null ? void 0 : a.backgroundColor) || T().surfaceVariant, R = L(), h = A().secondary, M = A().primary, u = L().md, w = T().textColor, f = D(), y = V(
2019
- B.SPLIT
2020
- ), s = e.isApiError ? r("common.error.title") : r("common.authentication.accessRequired"), k = e.isApiError ? e.apiErrorMessage || r("common.error.message") : r("common.authentication.invalidOrMissingAuth"), b = we({
2021
- finalImage: x,
2022
- spacingScale: f,
2023
- borderRadius: L(),
2024
- fontFamilyPrimary: M,
2025
- fontFamilySecondary: h,
2026
- mdBorderRadius: u,
2027
- textColor: w,
2028
- brandingColors: a,
2029
- darkTextColor: l.colorSchemes.dark.textColor,
2030
- imageBackgroundGradient: y,
2031
- textPrimary: I,
2032
- surfaceColor: g,
2033
- onSurfaceColor: m,
2034
- isMobile: c
2035
- }), W = () => e.isApiError ? /* @__PURE__ */ t(
2036
- n,
2037
- {
2038
- sx: {
2039
- p: f.lg,
2040
- gap: f.lg,
2041
- display: "flex",
2042
- flexDirection: "column",
2043
- backdropFilter: "blur(4px)",
2044
- bgcolor: `rgba(${C ? ne(C || "").replace(/[^\d,]/g, "") : ""}, 0.5)`,
2045
- borderRadius: R.sm
2046
- },
2047
- children: /* @__PURE__ */ t(n, { sx: b.ctaContainer, children: /* @__PURE__ */ t(n, { sx: b.ctaContentWrapper, children: /* @__PURE__ */ t(n, { sx: b.buttonsContainer, children: /* @__PURE__ */ t(q, { sx: b.tryAgainButton, onClick: e.toggleTryAgain, children: /* @__PURE__ */ o(n, { sx: b.tryAgainButtonContent, children: [
2048
- /* @__PURE__ */ t(le, { sx: b.tryAgainIcon }),
2049
- /* @__PURE__ */ t(d, { sx: b.tryAgainText, children: e.tryAgainButtonText })
2050
- ] }) }) }) }) })
2051
- }
2052
- ) : /* @__PURE__ */ t(H, {});
2053
- return /* @__PURE__ */ o(H, { children: [
2054
- /* @__PURE__ */ t(n, { sx: b.headlineSection, children: /* @__PURE__ */ o(n, { sx: b.headlineContent, children: [
2055
- /* @__PURE__ */ o(n, { children: [
2056
- /* @__PURE__ */ o(n, { sx: { display: "flex", alignItems: "center", gap: f["3xs"] }, children: [
2057
- /* @__PURE__ */ t(d, { level: "body-sm", sx: b.headlineText, children: e.headline }),
2058
- /* @__PURE__ */ t(
2059
- v,
2060
- {
2061
- rulesDisplay: e.rulesDisplay,
2062
- rules: e.entity.rules || ""
2063
- }
2064
- )
2065
- ] }),
2066
- /* @__PURE__ */ o(n, { sx: b.contentContainer, children: [
2067
- /* @__PURE__ */ t(d, { level: "body-lg", sx: b.titleText, children: e.entity.title }),
2068
- /* @__PURE__ */ t(d, { level: "body-md", sx: b.descriptionText, children: F(e.entity.description) })
2069
- ] })
2070
- ] }),
2071
- /* @__PURE__ */ t(n, { sx: b.presentedByDesktop, children: e.renderPresentedBy(
2072
- (a == null ? void 0 : a.contentColor) || l.colorSchemes.dark.textColor
2073
- ) })
2074
- ] }) }),
2075
- /* @__PURE__ */ o(n, { sx: b.questionArea, children: [
2076
- /* @__PURE__ */ t(
2077
- oe,
2078
- {
2079
- variant: "error",
2080
- title: s,
2081
- message: k
2082
- }
2083
- ),
2084
- W(),
2085
- /* @__PURE__ */ t(n, { sx: b.presentedByMobile, children: e.renderPresentedBy((a == null ? void 0 : a.contentColor) || w) })
2086
- ] })
2087
- ] });
2088
- }, Re = (e) => {
2089
- var l;
2090
- return {
2091
- // Main container with background overlay
2092
- mainContainer: {
2093
- display: "flex",
2094
- flexDirection: "column",
2095
- justifyContent: "space-between",
2096
- gap: "40px",
2097
- p: e.spacingScale.xl,
2098
- boxShadow: "md",
2099
- border: (l = e.brandingColors) != null && l.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
2100
- overflow: "hidden",
2101
- backgroundImage: e.backgroundImage,
2102
- backgroundSize: "cover",
2103
- backgroundPosition: "center",
2104
- position: "relative",
2105
- borderRadius: e.borderRadius.md,
2106
- minHeight: "250px",
2107
- "&::before": {
2108
- content: '""',
2109
- position: "absolute",
2110
- background: e.imageBackgroundGradient,
2111
- top: 0,
2112
- left: 0,
2113
- right: 0,
2114
- bottom: 0,
2115
- borderRadius: "inherit",
2116
- zIndex: 0
2117
- }
2118
- },
2119
- // Headline section wrapper
2120
- headlineSection: {
2121
- display: "flex",
2122
- justifyContent: "space-between",
2123
- flex: "1 0 0",
2124
- alignSelf: "stretch"
2125
- },
2126
- // Headline content container
2127
- headlineContent: {
2128
- display: "flex",
2129
- flexDirection: "column",
2130
- alignItems: "flex-start",
2131
- flex: "1 0 0",
2132
- gap: "16px"
2133
- },
2134
- // Headline content with z-index
2135
- headlineContentInner: {
2136
- zIndex: 10
2137
- },
2138
- // Headline typography
2139
- headlineText: {
2140
- fontWeight: 500,
2141
- lineHeight: "166%",
2142
- letterSpacing: "1px",
2143
- textAlign: e.isMobile ? "center" : "left",
2144
- color: e.secondaryColor,
2145
- opacity: "70%",
2146
- textTransform: "uppercase",
2147
- fontFamily: e.fontFamilySecondary,
2148
- fontSize: "0.75em"
2149
- },
2150
- // Content container
2151
- contentContainer: {
2152
- display: "flex",
2153
- flexDirection: "column",
2154
- gap: e.spacingScale["3xs"]
2155
- },
2156
- // Title typography
2157
- titleText: {
2158
- fontWeight: 700,
2159
- lineHeight: "133%",
2160
- letterSpacing: "0px",
2161
- textAlign: e.isMobile ? "center" : "left",
2162
- fontSize: "1.5em",
2163
- color: e.darkTextColor,
2164
- fontFamily: e.fontFamilyPrimary
2165
- },
2166
- // Description typography
2167
- descriptionText: {
2168
- fontWeight: 400,
2169
- lineHeight: "140%",
2170
- letterSpacing: "0.15px",
2171
- fontSize: "1.25em",
2172
- textAlign: e.isMobile ? "center" : "left",
2173
- color: e.secondaryColor,
2174
- opacity: "70%",
2175
- fontFamily: e.fontFamilyPrimary
2176
- },
2177
- // Bottom section container
2178
- bottomSection: {
2179
- display: "flex",
2180
- flexDirection: "column",
2181
- gap: "24px",
2182
- zIndex: 1
2183
- },
2184
- // Footer container
2185
- footerContainer: {
2186
- display: "flex",
2187
- alignItems: "center",
2188
- justifyContent: "space-between",
2189
- flexDirection: e.isMobile ? "column-reverse" : "row",
2190
- gap: e.spacingScale.md
2191
- },
2192
- ctaSection: {
2193
- borderRadius: e.borderRadius.md,
2194
- py: e.spacingScale.md,
2195
- display: "flex",
2196
- flexDirection: "column",
2197
- alignItems: "center",
2198
- alignSelf: "stretch",
2199
- gap: e.spacingScale.md,
2200
- backdropFilter: "blur(4px)",
2201
- position: "relative",
2202
- "&::before": {
2203
- content: '""',
2204
- position: "absolute",
2205
- top: 0,
2206
- left: 0,
2207
- right: 0,
2208
- bottom: 0,
2209
- backgroundColor: e.contentBgColor,
2210
- opacity: 0.25,
2211
- borderRadius: "inherit",
2212
- zIndex: 0,
2213
- backdropFilter: "blur(4px)"
2214
- },
2215
- "& > *": {
2216
- position: "relative",
2217
- zIndex: 1
2218
- }
2219
- },
2220
- // Buttons container
2221
- buttonsContainer: {
2222
- display: "flex",
2223
- flexDirection: "column",
2224
- gap: e.spacingScale.md
2225
- },
2226
- // Try again button
2227
- tryAgainButton: {
2228
- display: "flex",
2229
- minHeight: "48px",
2230
- py: "12px",
2231
- pr: "24px",
2232
- pl: "16px",
2233
- flexDirection: "column",
2234
- justifyContent: "center",
2235
- alignItems: "center",
2236
- gap: "8px",
2237
- borderRadius: e.borderRadius.xl,
2238
- bgcolor: e.onSurfaceColor,
2239
- "&:hover": {
2240
- bgcolor: e.surfaceVariantColor
2241
- },
2242
- fontSize: "0.9375em"
2243
- },
2244
- // Try again button content
2245
- tryAgainButtonContent: {
2246
- display: "flex",
2247
- justifyContent: "center",
2248
- alignItems: "center",
2249
- gap: "8px",
2250
- alignSelf: "stretch"
2251
- },
2252
- // Try again icon
2253
- tryAgainIcon: {
2254
- display: "flex",
2255
- width: "24px",
2256
- height: "24px",
2257
- justifyContent: "center",
2258
- alignItems: "center",
2259
- color: e.textPrimary
2260
- },
2261
- // Try again text
2262
- tryAgainText: {
2263
- color: e.textPrimary,
2264
- textAlign: "center",
2265
- fontFamily: e.fontFamilyPrimary,
2266
- fontSize: "0.9375em",
2267
- fontStyle: "normal",
2268
- fontWeight: 500,
2269
- lineHeight: "24px",
2270
- letterSpacing: "0.46px",
2271
- textTransform: "uppercase"
2272
- }
2273
- };
2274
- }, pe = (e) => {
2275
- const l = D(), c = p(), a = j(), { t: x } = G(), r = V(
2276
- B.OVERLAY
2277
- ), { brandingImage: I, brandingColors: g, brandingLogo: m } = ye(e.entity.branding || null), C = I || ie(
2278
- {
2279
- images: e.entity.images || null,
2280
- imagePlaceholder: e.defaultImagePlaceholderUrl || ""
2281
- },
2282
- B.OVERLAY
2283
- ), R = ce(C), h = (g == null ? void 0 : g.contentColor) || c.colorSchemes.dark.textColor, M = c.customFontFamily.dark.primary, u = c.customFontFamily.dark.secondary, w = c.customRadius.dark, f = c.border.dark.size, y = (g == null ? void 0 : g.backgroundColor) || c.colorSchemes.dark.surfaceVariant, s = c.colorSchemes.dark.onSurface, k = c.colorSchemes.dark.surfaceVariant, b = c.colorSchemes.dark.textPrimary, W = e.isApiError ? x("common.error.title") : x("common.authentication.accessRequired"), z = e.isApiError ? e.apiErrorMessage || x("common.error.message") : x("common.authentication.invalidOrMissingAuth"), i = Re({
2284
- spacingScale: l,
2285
- brandingColors: g,
2286
- secondaryColor: h,
2287
- fontFamilyPrimary: M,
2288
- fontFamilySecondary: u,
2289
- borderRadius: w,
2290
- borderSize: f,
2291
- darkTextColor: c.colorSchemes.dark.textColor,
2292
- backgroundImage: R,
2293
- imageBackgroundGradient: r,
2294
- contentBgColor: y,
2295
- onSurfaceColor: s,
2296
- surfaceVariantColor: k,
2297
- textPrimary: b,
2298
- isMobile: a
2299
- }), P = () => e.isApiError ? /* @__PURE__ */ t(n, { sx: i.ctaSection, children: /* @__PURE__ */ t(n, { sx: i.buttonsContainer, children: /* @__PURE__ */ t(q, { sx: i.tryAgainButton, onClick: e.toggleTryAgain, children: /* @__PURE__ */ o(n, { sx: i.tryAgainButtonContent, children: [
2300
- /* @__PURE__ */ t(le, { sx: i.tryAgainIcon }),
2301
- /* @__PURE__ */ t(d, { sx: i.tryAgainText, children: e.tryAgainButtonText })
2302
- ] }) }) }) }) : /* @__PURE__ */ t(H, {});
2303
- return /* @__PURE__ */ o(n, { sx: i.mainContainer, children: [
2304
- /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(n, { sx: i.headlineSection, children: /* @__PURE__ */ t(n, { sx: i.headlineContent, children: /* @__PURE__ */ o(n, { sx: i.headlineContentInner, children: [
2305
- /* @__PURE__ */ o(n, { sx: { display: "flex", alignItems: "center", gap: l["3xs"] }, children: [
2306
- /* @__PURE__ */ t(d, { level: "body-sm", sx: i.headlineText, children: e.headline }),
2307
- /* @__PURE__ */ t(
2308
- v,
2309
- {
2310
- rulesDisplay: e.rulesDisplay,
2311
- isOverlayVariant: !0,
2312
- rules: e.entity.rules || ""
2313
- }
2314
- )
2315
- ] }),
2316
- /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
2317
- /* @__PURE__ */ t(d, { level: "h4", sx: i.titleText, children: e.entity.title }),
2318
- /* @__PURE__ */ t(d, { level: "body-lg", sx: i.descriptionText, children: F(e.entity.description) })
2319
- ] })
2320
- ] }) }) }) }),
2321
- /* @__PURE__ */ o(n, { sx: i.bottomSection, children: [
2322
- /* @__PURE__ */ t(
2323
- oe,
2324
- {
2325
- variant: "error",
2326
- title: W,
2327
- message: z
2328
- }
2329
- ),
2330
- P(),
2331
- m ? /* @__PURE__ */ t(n, { sx: i.footerContainer, children: e.renderPresentedBy(c.colorSchemes.dark.textColor) }) : /* @__PURE__ */ t(H, {})
2332
- ] })
2333
- ] });
2334
- }, Ve = ({
2335
- notFoundTitle: e,
2336
- notFoundMessage: l
2337
- }) => {
2338
- var g, m;
2339
- const c = (m = (g = T().palette) == null ? void 0 : g.danger) == null ? void 0 : m.plainColor, a = T().textSecondary, x = D(), r = A().primary, I = A().secondary;
2340
- return /* @__PURE__ */ o(
2341
- n,
2342
- {
2343
- sx: {
2344
- display: "flex",
2345
- flexDirection: "column",
2346
- justifyContent: "center",
2347
- alignItems: "center",
2348
- width: "100%",
2349
- minHeight: "300px",
2350
- padding: "32px 24px",
2351
- textAlign: "center"
2352
- },
2353
- children: [
2354
- /* @__PURE__ */ t(
2355
- n,
2356
- {
2357
- sx: {
2358
- width: "80px",
2359
- height: "80px",
2360
- borderRadius: "50%",
2361
- backgroundColor: `${c}15`,
2362
- // 15% opacity
2363
- display: "flex",
2364
- alignItems: "center",
2365
- justifyContent: "center",
2366
- marginBottom: "24px"
2367
- },
2368
- children: /* @__PURE__ */ t(
2369
- n,
2370
- {
2371
- sx: {
2372
- fontSize: "32px",
2373
- color: c,
2374
- fontWeight: "bold",
2375
- fontFamily: r
2376
- },
2377
- children: "?"
2378
- }
2379
- )
2380
- }
2381
- ),
2382
- /* @__PURE__ */ t(
2383
- d,
2384
- {
2385
- level: "h4",
2386
- sx: {
2387
- color: c,
2388
- marginBottom: x.xs,
2389
- fontWeight: "600",
2390
- fontFamily: r
2391
- },
2392
- children: e
2393
- }
2394
- ),
2395
- /* @__PURE__ */ t(
2396
- d,
2397
- {
2398
- level: "body-md",
2399
- sx: {
2400
- color: a,
2401
- lineHeight: 1.5,
2402
- fontFamily: I
2403
- },
2404
- children: l
2405
- }
2406
- )
2407
- ]
2408
- }
2409
- );
2410
- };
2411
- export {
2412
- Pe as A,
2413
- be as C,
2414
- Ve as N,
2415
- We as O,
2416
- v as R,
2417
- ze as S,
2418
- Be as a,
2419
- le as b,
2420
- De as c,
2421
- Le as d,
2422
- je as e,
2423
- pe as f,
2424
- He as g
2425
- };