fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC6

package/chunks/NotFoundSkeleton-BYJTzYJR.js

@@ -0,0 +1,2425 @@
+import { jsx as t, jsxs as o, Fragment as H } from "react/jsx-runtime";
+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";
+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";
+import { useState as ue } from "react";
+const He = ({ my: e }) => /* @__PURE__ */ t(
+  n,
+  {
+    sx: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      width: "100%",
+      height: "100%",
+      my: e
+    },
+    children: /* @__PURE__ */ t(
+      de,
+      {
+        slotProps: {
+          track: {
+            sx: {
+              stroke: T().palette.neutral.softBg
+            }
+          },
+          progress: {
+            sx: {
+              stroke: T().palette.neutral.solidBg
+            }
+          }
+        }
+      }
+    )
+  }
+), Pe = ({
+  additionalCTA: e,
+  buttonStyle: l,
+  buttonContentStyle: c,
+  textStyle: a
+}) => {
+  const { t: x } = G();
+  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(
+    q,
+    {
+      component: "a",
+      href: e.url,
+      target: e.target || "_self",
+      sx: l,
+      children: /* @__PURE__ */ t(d, { sx: a, children: e.defaultLabel || x("common.additional") })
+    }
+  ) : null : null;
+}, Z = te(/* @__PURE__ */ t("path", {
+  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"
+}), "InfoOutlined"), be = te(/* @__PURE__ */ t("path", {
+  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"
+}), "Close"), v = ({
+  rules: e,
+  rulesDisplay: l,
+  isOverlayVariant: c = !1
+}) => {
+  const { t: a } = G(), { shadowRootElement: x } = xe(he), r = T(), I = L(), g = A(), m = D(), C = j(), [R, h] = ue(!1);
+  if (!e)
+    return null;
+  if (l != null && l.component)
+    return l.component;
+  if (((l == null ? void 0 : l.type) || "modal") === "link" && (l != null && l.url)) {
+    const u = l.target || "_blank", w = {
+      backgroundColor: "transparent",
+      color: c ? r.palette.neutral.plainColor : r.textSecondary,
+      border: "none",
+      borderRadius: "50%",
+      width: "2em",
+      height: "2em",
+      minHeight: "2em",
+      minWidth: "2em",
+      padding: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      transition: "all 0.2s ease-in-out",
+      "&: hover": {
+        backgroundColor: "transparent",
+        transform: "scale(1.05)"
+      },
+      "&:focus-visible": {
+        outline: "none"
+      },
+      "& svg": {
+        fontSize: "1.25em"
+      }
+    };
+    return typeof window > "u" ? /* @__PURE__ */ t(
+      X,
+      {
+        title: a("common.rules.info"),
+        placement: "right",
+        variant: "soft",
+        disablePortal: !0,
+        children: /* @__PURE__ */ t(
+          U,
+          {
+            component: "a",
+            href: l.url,
+            target: u,
+            rel: "noopener noreferrer",
+            sx: w,
+            "aria-label": a("common.rules.info"),
+            children: /* @__PURE__ */ t(Z, {})
+          }
+        )
+      }
+    ) : /* @__PURE__ */ t(
+      X,
+      {
+        title: a("common.rules.info"),
+        placement: "right",
+        variant: "soft",
+        disablePortal: !0,
+        children: /* @__PURE__ */ t(
+          U,
+          {
+            onClick: (f) => {
+              f.stopPropagation(), window.open(l.url, u, "noopener,noreferrer");
+            },
+            sx: w,
+            "aria-label": a("common.rules.info"),
+            children: /* @__PURE__ */ t(Z, {})
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ o(H, { children: [
+    /* @__PURE__ */ t(
+      X,
+      {
+        title: a("common.rules.info"),
+        placement: "right",
+        variant: "soft",
+        disablePortal: !0,
+        children: /* @__PURE__ */ t(
+          U,
+          {
+            onClick: (u) => {
+              u.stopPropagation(), h(!0);
+            },
+            sx: {
+              backgroundColor: "transparent",
+              color: r.palette.neutral[500],
+              border: "none",
+              borderRadius: "50%",
+              width: "2em",
+              height: "2em",
+              minHeight: "2em",
+              minWidth: "2em",
+              padding: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+              transition: "all 0.2s ease-in-out",
+              "&:hover": {
+                backgroundColor: "transparent",
+                color: r.palette.neutral[500],
+                transform: "scale(1.05)"
+              },
+              "&:focus-visible": {
+                outline: "none"
+              },
+              "& svg": {
+                fontSize: "1.25em"
+              }
+            },
+            "aria-label": a("common.rules.info"),
+            children: /* @__PURE__ */ t(Z, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(
+      se,
+      {
+        open: R,
+        onClose: () => h(!1),
+        container: x,
+        sx: { zIndex: 1300 },
+        children: /* @__PURE__ */ o(
+          ge,
+          {
+            sx: {
+              width: "100%",
+              maxWidth: C ? "90vw" : "600px",
+              maxHeight: C ? "90vh" : "80vh",
+              p: C ? 2 : 3,
+              borderRadius: I.md,
+              backgroundColor: r.surface
+            },
+            children: [
+              /* @__PURE__ */ t(
+                U,
+                {
+                  onClick: (u) => {
+                    u.stopPropagation(), h(!1);
+                  },
+                  sx: {
+                    position: "absolute",
+                    top: m.sm,
+                    right: m.sm,
+                    backgroundColor: "transparent",
+                    color: r.textSecondary,
+                    border: "none",
+                    borderRadius: "50%",
+                    width: "2em",
+                    height: "2em",
+                    minHeight: "2em",
+                    minWidth: "2em",
+                    padding: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    cursor: "pointer",
+                    transition: "all 0.2s ease-in-out",
+                    zIndex: 1e3,
+                    "&:hover": {
+                      backgroundColor: `${r.textSecondary}15`,
+                      color: r.textPrimary,
+                      transform: "scale(1.05)"
+                    },
+                    "&:focus-visible": {
+                      outline: "none"
+                    },
+                    "& svg": {
+                      fontSize: "1.25em"
+                    }
+                  },
+                  children: /* @__PURE__ */ t(be, {})
+                }
+              ),
+              /* @__PURE__ */ o(
+                me,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: m.md
+                  },
+                  children: [
+                    /* @__PURE__ */ t(
+                      d,
+                      {
+                        sx: {
+                          fontFamily: g.primary,
+                          fontWeight: 600,
+                          fontSize: "1.25em",
+                          lineHeight: 1.2,
+                          color: r.textPrimary,
+                          textAlign: "center",
+                          marginBottom: m.sm
+                        },
+                        children: a("common.rules.title")
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      n,
+                      {
+                        sx: {
+                          fontFamily: g.secondary,
+                          fontSize: "1em",
+                          lineHeight: 1.5,
+                          color: r.textSecondary,
+                          overflow: "auto",
+                          // Custom scrollbar styling for dark theme
+                          "&::-webkit-scrollbar": {
+                            width: "8px"
+                          },
+                          "&::-webkit-scrollbar-track": {
+                            backgroundColor: "transparent"
+                          },
+                          "&::-webkit-scrollbar-thumb": {
+                            backgroundColor: r.secondaryContainer,
+                            borderRadius: "4px",
+                            "&:hover": {
+                              backgroundColor: r.textSecondary
+                            }
+                          },
+                          // Firefox scrollbar styling
+                          scrollbarWidth: "thin",
+                          scrollbarColor: `${r.secondaryContainer} transparent`,
+                          "& p": {
+                            marginBottom: m.sm
+                          },
+                          "& ul, & ol": {
+                            marginLeft: m.md,
+                            marginBottom: m.sm
+                          },
+                          "& li": {
+                            marginBottom: m.xs
+                          },
+                          "& h1, & h2, & h3, & h4, & h5, & h6": {
+                            fontFamily: g.primary,
+                            color: r.textPrimary,
+                            marginTop: m.md,
+                            marginBottom: m.sm
+                          }
+                        },
+                        dangerouslySetInnerHTML: { __html: e }
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      q,
+                      {
+                        variant: "outlined",
+                        onClick: (u) => {
+                          u.stopPropagation(), h(!1);
+                        },
+                        sx: {
+                          marginTop: m.md,
+                          borderColor: r.textPrimary,
+                          color: r.textPrimary,
+                          fontFamily: g.secondary,
+                          fontSize: "0.875em",
+                          borderRadius: I.sm,
+                          "&:hover": {
+                            borderColor: r.textPrimary,
+                            color: r.textPrimary,
+                            backgroundColor: r.surfaceVariant
+                          }
+                        },
+                        children: a("common.rules.close")
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}, Se = (e) => {
+  var l, c, a;
+  return {
+    // Mobile headline with image background
+    mobileHeadlineWithImage: {
+      display: e.isMobile ? "flex" : "none",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: "5px",
+      borderTopRightRadius: "5px",
+      position: "relative",
+      minHeight: "210px",
+      overflow: "hidden",
+      height: "auto",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      }
+    },
+    // Mobile headline content
+    mobileHeadlineContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      gap: e.spacingScale["2xl"],
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between"
+    },
+    // Mobile headline without image
+    mobileHeadlineWithoutImage: {
+      display: e.isMobile ? "flex" : "none",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      gap: e.spacingScale["2xl"]
+    },
+    // Headline typography (mobile with image)
+    headlineTypographyMobileImage: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((l = e.brandingColors) == null ? void 0 : l.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: "center"
+    },
+    // Headline typography (mobile without image & desktop)
+    headlineTypography: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      textTransform: "uppercase",
+      fontSize: "0.75em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilySecondary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Headline typography (desktop centered)
+    headlineTypographyDesktop: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      textTransform: "uppercase",
+      fontSize: "0.75em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilySecondary
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title typography (mobile with image)
+    titleTypographyMobileImage: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((c = e.brandingColors) == null ? void 0 : c.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: "center"
+    },
+    // Title typography (mobile without image & desktop responsive)
+    titleTypography: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Title typography (desktop centered)
+    titleTypographyDesktop: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Description typography (mobile with image)
+    descriptionTypographyMobileImage: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((a = e.brandingColors) == null ? void 0 : a.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: "center"
+    },
+    // Description typography (mobile without image & desktop responsive)
+    descriptionTypography: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description typography (desktop centered)
+    descriptionTypographyDesktop: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Image container (left position)
+    imageContainerLeft: {
+      display: e.isMobile ? "none" : "block",
+      flex: "0.3",
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: "auto",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center center",
+      backgroundRepeat: "no-repeat",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    // Image container (right position)
+    imageContainerRight: {
+      display: e.isMobile ? "none" : "block",
+      flex: "0.3",
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: "auto",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center center",
+      backgroundRepeat: "no-repeat",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    // Image safe area (placeholder for image space)
+    imageSafeArea: {
+      width: "100%",
+      height: "100%"
+    },
+    // Main content area
+    mainContentArea: {
+      flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
+      display: "flex",
+      flexDirection: "column",
+      px: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      pt: e.spacingScale.lg,
+      pb: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      gap: e.spacingScale.md
+    },
+    // Desktop headline container
+    desktopHeadlineContainer: {
+      display: e.isMobile ? "none" : "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: e.spacingScale["2xl"],
+      textAlign: "center"
+    },
+    // Aspect ratio container (for embed code)
+    aspectRatioContainer: {
+      borderRadius: e.borderRadius.md,
+      overflow: "hidden"
+    }
+  };
+}, ze = ({
+  entity: e,
+  headline: l,
+  finalImage: c,
+  imagePosition: a = "left",
+  children: x,
+  embedCodeContainerRef: r,
+  hasEmbedCode: I = !1,
+  filterScreenContent: g,
+  rulesDisplay: m
+}) => {
+  var _, J;
+  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(
+    B.STANDARD
+  ), i = Se({
+    finalImage: c,
+    spacingScale: h,
+    borderRadius: w,
+    fontFamilyPrimary: M,
+    fontFamilySecondary: u,
+    textColor: s,
+    secondaryColor: k,
+    bgcolor: ne(b || ""),
+    opacity: W,
+    brandingColors: f,
+    imagePosition: a,
+    darkTextColor: R.colorSchemes.dark.textColor,
+    imageBackgroundGradient: z,
+    isMobile: C
+  }), P = ae(
+    y == null ? void 0 : y.primaryUrl,
+    y == null ? void 0 : y.secondaryUrl,
+    "image"
+  ), $ = () => {
+    P && window.open(P, "_blank", "noopener,noreferrer");
+  }, S = (E, N) => P ? typeof window > "u" ? /* @__PURE__ */ t(
+    n,
+    {
+      component: "a",
+      href: P,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        ...N,
+        cursor: "pointer",
+        textDecoration: "none"
+      },
+      children: E
+    }
+  ) : /* @__PURE__ */ t(
+    n,
+    {
+      sx: {
+        ...N,
+        cursor: "pointer"
+      },
+      onClick: $,
+      children: E
+    }
+  ) : /* @__PURE__ */ t(n, { sx: N, children: E }), O = () => I && r ? /* @__PURE__ */ o(n, { sx: i.mobileHeadlineWithoutImage, children: [
+    /* @__PURE__ */ o(n, { children: [
+      /* @__PURE__ */ o(
+        n,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: h["3xs"]
+          },
+          children: [
+            /* @__PURE__ */ t(d, { level: "body-sm", sx: i.headlineTypography, children: l }),
+            /* @__PURE__ */ t(
+              v,
+              {
+                rules: e.rules || "",
+                rulesDisplay: m,
+                isOverlayVariant: !1
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
+        /* @__PURE__ */ t(d, { level: "h4", sx: i.titleTypography, children: e.title }),
+        /* @__PURE__ */ t(d, { sx: i.descriptionTypography, children: F(e.description) })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(ee, { ratio: "16/9", sx: i.aspectRatioContainer, children: /* @__PURE__ */ t(n, { ref: r }) })
+  ] }) : c ? S(
+    /* @__PURE__ */ o(n, { sx: i.mobileHeadlineContent, children: [
+      /* @__PURE__ */ o(n, { children: [
+        /* @__PURE__ */ o(
+          n,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: h["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ t(
+                d,
+                {
+                  level: "body-sm",
+                  sx: i.headlineTypographyMobileImage,
+                  children: l
+                }
+              ),
+              /* @__PURE__ */ t(
+                v,
+                {
+                  rules: e.rules || "",
+                  rulesDisplay: m,
+                  isOverlayVariant: !1
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
+          /* @__PURE__ */ t(d, { sx: i.titleTypographyMobileImage, children: e.title }),
+          /* @__PURE__ */ t(d, { sx: i.descriptionTypographyMobileImage, children: F(e.description) })
+        ] })
+      ] }),
+      g && /* @__PURE__ */ t(n, { children: g })
+    ] }),
+    i.mobileHeadlineWithImage
+  ) : /* @__PURE__ */ o(n, { sx: i.mobileHeadlineWithoutImage, children: [
+    /* @__PURE__ */ o(n, { children: [
+      /* @__PURE__ */ o(
+        n,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: h["3xs"]
+          },
+          children: [
+            /* @__PURE__ */ t(d, { level: "body-sm", sx: i.headlineTypography, children: l }),
+            /* @__PURE__ */ t(
+              v,
+              {
+                rules: e.rules || "",
+                rulesDisplay: m,
+                isOverlayVariant: !1
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
+        /* @__PURE__ */ t(d, { level: "h4", sx: i.titleTypography, children: e.title }),
+        /* @__PURE__ */ t(d, { sx: i.descriptionTypography, children: F(e.description) })
+      ] })
+    ] }),
+    g && /* @__PURE__ */ t(n, { children: g })
+  ] }), Y = !(C && g);
+  return /* @__PURE__ */ o(H, { children: [
+    C && O(),
+    a === "left" && c ? S(
+      /* @__PURE__ */ t(n, { sx: i.imageSafeArea }),
+      i.imageContainerLeft
+    ) : null,
+    Y && /* @__PURE__ */ o(n, { sx: i.mainContentArea, children: [
+      !C && /* @__PURE__ */ t(n, { children: /* @__PURE__ */ o(n, { sx: i.desktopHeadlineContainer, children: [
+        /* @__PURE__ */ o(
+          n,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ o(
+                n,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: h["3xs"]
+                  },
+                  children: [
+                    /* @__PURE__ */ t(
+                      d,
+                      {
+                        level: "body-sm",
+                        sx: i.headlineTypographyDesktop,
+                        children: l
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      v,
+                      {
+                        rules: e.rules || "",
+                        rulesDisplay: m,
+                        isOverlayVariant: !1
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
+                /* @__PURE__ */ t(d, { level: "h4", sx: i.titleTypographyDesktop, children: e.title }),
+                /* @__PURE__ */ t(d, { sx: i.descriptionTypographyDesktop, children: F(e.description) })
+              ] })
+            ]
+          }
+        ),
+        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, {})
+      ] }) }),
+      x
+    ] }),
+    a === "right" && c ? S(
+      /* @__PURE__ */ t(n, { sx: i.imageSafeArea }),
+      i.imageContainerRight
+    ) : null
+  ] });
+}, Ce = (e) => {
+  var l, c, a, x;
+  return {
+    // Main headline section with background image
+    headlineSection: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      flex: e.isMobile ? "1" : "0 0 50%",
+      width: e.isMobile ? "100%" : "50%",
+      minWidth: e.isMobile ? "100%" : "50%",
+      maxWidth: e.isMobile ? "100%" : "50%",
+      backgroundImage: e.finalImage ? `url(${e.finalImage})` : "none",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: e.borderRadius.md,
+      borderTopRightRadius: e.isMobile ? e.borderRadius.md : 0,
+      borderBottomLeftRadius: e.isMobile ? 0 : e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: e.isMobile ? "210px" : "430px",
+      "&::before": e.finalImage ? {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      } : {}
+    },
+    // Headline section without image
+    headlineSectionNoImage: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      flex: e.isMobile ? "1" : "0 0 50%",
+      width: e.isMobile ? "100%" : "50%",
+      minWidth: e.isMobile ? "100%" : "50%",
+      maxWidth: e.isMobile ? "100%" : "50%",
+      borderTopLeftRadius: e.borderRadius.md,
+      borderTopRightRadius: e.isMobile ? e.borderRadius.md : 0,
+      borderBottomLeftRadius: e.isMobile ? 0 : e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: e.isMobile ? "210px" : "430px",
+      backgroundColor: ((l = e.brandingColors) == null ? void 0 : l.backgroundColor) || e.textColor + "10"
+    },
+    // Embed code headline section (for poll-vote and classic-quiz-play)
+    embedCodeHeadlineSection: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      flex: e.isMobile ? "1" : "0 0 50%",
+      width: e.isMobile ? "100%" : "50%",
+      minWidth: e.isMobile ? "100%" : "50%",
+      maxWidth: e.isMobile ? "100%" : "50%",
+      borderTopLeftRadius: e.borderRadius.md,
+      borderTopRightRadius: e.isMobile ? e.borderRadius.md : 0,
+      borderBottomLeftRadius: e.isMobile ? 0 : e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: e.isMobile ? "210px" : "430px"
+    },
+    // AspectRatio container for embed code
+    aspectRatioContainer: {
+      borderRadius: 0,
+      width: "100%",
+      height: "100%"
+    },
+    // Headline content wrapper
+    headlineContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      gap: e.spacingScale.xl,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between"
+    },
+    // Embed code headline content (shown in question area when embed code is present)
+    embedCodeHeadlineContent: {
+      px: e.spacingScale.lg,
+      pt: e.spacingScale.lg,
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.md
+    },
+    // Headline typography (with image background)
+    headlineText: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((c = e.brandingColors) == null ? void 0 : c.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Headline typography (without image background)
+    headlineTextNoImage: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: e.secondaryColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title typography (with image background)
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((a = e.brandingColors) == null ? void 0 : a.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Title typography (without image background)
+    titleTextNoImage: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description typography (with image background)
+    descriptionText: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((x = e.brandingColors) == null ? void 0 : x.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description typography (without image background)
+    descriptionTextNoImage: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: e.secondaryColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Question area / content section
+    questionArea: {
+      flex: e.isMobile ? "1" : "0 0 50%",
+      width: e.isMobile ? "100%" : "50%",
+      minWidth: e.isMobile ? "100%" : "50%",
+      maxWidth: e.isMobile ? "100%" : "50%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center"
+    }
+  };
+}, Be = ({
+  entity: e,
+  headline: l,
+  finalImage: c,
+  children: a,
+  embedCodeContainerRef: x,
+  hasEmbedCode: r = !1,
+  brandingLogo: I,
+  renderPresentedBy: g,
+  rulesDisplay: m
+}) => {
+  var E, N;
+  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(
+    B.SPLIT
+  ), S = Ce({
+    finalImage: c,
+    spacingScale: u,
+    borderRadius: y,
+    fontFamilyPrimary: w,
+    fontFamilySecondary: f,
+    secondaryColor: W,
+    opacity: i,
+    bgcolor: ne(z || ""),
+    textColor: b,
+    brandingColors: s,
+    darkTextColor: P,
+    imageBackgroundGradient: $,
+    isMobile: h
+  }), O = ae(
+    k == null ? void 0 : k.primaryUrl,
+    k == null ? void 0 : k.secondaryUrl,
+    "image"
+  ), Y = () => {
+    O && window.open(O, "_blank", "noopener,noreferrer");
+  }, _ = (K, Q) => O ? typeof window > "u" ? /* @__PURE__ */ t(
+    n,
+    {
+      component: "a",
+      href: O,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        ...Q,
+        cursor: "pointer",
+        textDecoration: "none"
+      },
+      children: K
+    }
+  ) : /* @__PURE__ */ t(
+    n,
+    {
+      sx: {
+        ...Q,
+        cursor: "pointer"
+      },
+      onClick: Y,
+      children: K
+    }
+  ) : /* @__PURE__ */ t(n, { sx: Q, children: K });
+  return /* @__PURE__ */ o(H, { children: [
+    r && x ? /* @__PURE__ */ t(n, { sx: S.embedCodeHeadlineSection, children: /* @__PURE__ */ t(
+      ee,
+      {
+        ratio: "16/9",
+        sx: S.aspectRatioContainer,
+        slotProps: { content: { sx: { height: "100%" } } },
+        children: /* @__PURE__ */ t(n, { ref: x })
+      }
+    ) }) : c ? _(
+      /* @__PURE__ */ o(n, { sx: S.headlineContent, children: [
+        /* @__PURE__ */ o(n, { children: [
+          /* @__PURE__ */ o(
+            n,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: h ? "center" : "flex-start",
+                gap: u["3xs"]
+              },
+              children: [
+                /* @__PURE__ */ t(d, { sx: S.headlineText, children: l }),
+                /* @__PURE__ */ t(v, { rulesDisplay: m, rules: e.rules || "" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ o(n, { sx: S.contentContainer, children: [
+            /* @__PURE__ */ t(d, { sx: S.titleText, children: e.title }),
+            /* @__PURE__ */ t(d, { sx: S.descriptionText, children: F(e.description) })
+          ] })
+        ] }),
+        I && !h && g && /* @__PURE__ */ t(n, { children: g((s == null ? void 0 : s.contentColor) || P) })
+      ] }),
+      S.headlineSection
+    ) : /* @__PURE__ */ t(n, { sx: S.headlineSectionNoImage, children: /* @__PURE__ */ o(n, { sx: S.headlineContent, children: [
+      /* @__PURE__ */ o(n, { children: [
+        /* @__PURE__ */ o(
+          n,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: h ? "center" : "flex-start",
+              gap: u["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ t(d, { sx: S.headlineTextNoImage, children: l }),
+              /* @__PURE__ */ t(v, { rulesDisplay: m, rules: e.rules || "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(n, { sx: S.contentContainer, children: [
+          /* @__PURE__ */ t(d, { sx: S.titleTextNoImage, children: e.title }),
+          /* @__PURE__ */ t(d, { sx: S.descriptionTextNoImage, children: F(e.description) })
+        ] })
+      ] }),
+      I && !h && g && /* @__PURE__ */ t(n, { children: g(b) })
+    ] }) }),
+    /* @__PURE__ */ o(n, { sx: S.questionArea, children: [
+      r && x && /* @__PURE__ */ t(n, { sx: S.embedCodeHeadlineContent, children: /* @__PURE__ */ o(n, { children: [
+        /* @__PURE__ */ o(
+          n,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: u["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ t(
+                d,
+                {
+                  sx: {
+                    ...S.headlineTextNoImage,
+                    textAlign: "center"
+                  },
+                  children: l
+                }
+              ),
+              /* @__PURE__ */ t(v, { rulesDisplay: m, rules: e.rules || "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(n, { sx: S.contentContainer, children: [
+          /* @__PURE__ */ t(
+            d,
+            {
+              sx: {
+                ...S.titleTextNoImage,
+                textAlign: "center"
+              },
+              children: e.title
+            }
+          ),
+          /* @__PURE__ */ t(
+            d,
+            {
+              sx: {
+                ...S.descriptionTextNoImage,
+                textAlign: "center"
+              },
+              children: F(e.description)
+            }
+          )
+        ] })
+      ] }) }),
+      a
+    ] })
+  ] });
+}, ke = (e) => {
+  var l;
+  return {
+    // Main container with background overlay
+    mainContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "40px",
+      p: e.spacingScale.xl,
+      boxShadow: "md",
+      border: (l = e.brandingColors) != null && l.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
+      overflow: "hidden",
+      backgroundImage: e.backgroundImage,
+      backgroundPosition: "center",
+      backgroundSize: "cover",
+      position: "relative",
+      borderRadius: e.mdBorderRadius,
+      minHeight: "250px",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        background: e.imageBackgroundGradient,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: "inherit",
+        zIndex: 0
+      }
+    },
+    // Headline section wrapper
+    headlineSection: {
+      display: "flex",
+      justifyContent: "space-between",
+      flex: "1 0 0",
+      alignSelf: "stretch"
+    },
+    // Headline content container
+    headlineContent: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      flex: "1 0 0",
+      gap: "16px"
+    },
+    // Headline content with z-index
+    headlineContentInner: {
+      zIndex: 10
+    },
+    // Headline typography
+    headlineText: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      textAlign: { xs: "center", md: "left" },
+      color: e.secondaryColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      fontSize: "0.75em"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title typography
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      textAlign: { xs: "center", md: "left" },
+      fontSize: "1.5em",
+      color: e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Description typography
+    descriptionText: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      textAlign: { xs: "center", md: "left" },
+      color: e.secondaryColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Main content section
+    mainContentSection: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "24px"
+    }
+  };
+}, We = ({
+  entity: e,
+  headline: l,
+  finalImage: c,
+  children: a,
+  rulesDisplay: x
+}) => {
+  var s, k;
+  const r = p(), I = D(), g = V(
+    B.OVERLAY
+  ), 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({
+    spacingScale: I,
+    brandingColors: m,
+    secondaryColor: C,
+    fontFamilyPrimary: R,
+    fontFamilySecondary: h,
+    mdBorderRadius: M,
+    borderSize: u,
+    backgroundImage: f,
+    darkTextColor: w,
+    imageBackgroundGradient: g
+  });
+  return /* @__PURE__ */ o(n, { sx: y.mainContainer, children: [
+    /* @__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: [
+      /* @__PURE__ */ o(
+        n,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: I["3xs"]
+          },
+          children: [
+            /* @__PURE__ */ t(d, { level: "body-sm", sx: y.headlineText, children: l }),
+            /* @__PURE__ */ t(
+              v,
+              {
+                rulesDisplay: x,
+                isOverlayVariant: !0,
+                rules: e.rules || ""
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ o(n, { sx: y.contentContainer, children: [
+        /* @__PURE__ */ t(d, { level: "h4", sx: y.titleText, children: e.title }),
+        e.description && /* @__PURE__ */ t(d, { level: "body-lg", sx: y.descriptionText, children: F(e.description) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ t(n, { sx: y.mainContentSection, children: a })
+  ] });
+}, Te = (e) => {
+  var l, c, a;
+  return {
+    // Wrapper container for the entire split layout
+    wrapper: {
+      display: "flex",
+      flexDirection: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "column" : "row",
+      width: "100%"
+    },
+    // Desktop image section with background image and overlay
+    desktopImageSection: {
+      display: e.isLarge && !e.alwaysShowImage ? "none" : "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      flex: e.isMobile || e.isLarge && e.alwaysShowImage ? "1" : "0 0 50%",
+      width: e.isMobile || e.isLarge && e.alwaysShowImage ? "100%" : "50%",
+      minWidth: e.isMobile || e.isLarge && e.alwaysShowImage ? "100%" : "50%",
+      maxWidth: e.isMobile || e.isLarge && e.alwaysShowImage ? "100%" : "50%",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: e.isTabulated ? 0 : e.borderRadius.md,
+      borderTopRightRadius: e.isMobile || e.isLarge && e.alwaysShowImage ? e.isTabulated ? 0 : e.borderRadius.md : 0,
+      borderBottomLeftRadius: e.isMobile || e.isLarge && e.alwaysShowImage ? 0 : e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: e.isMobile || e.isLarge && e.alwaysShowImage ? "210px" : "430px",
+      maxHeight: e.isMobile || e.isLarge && e.alwaysShowImage ? "auto" : "100%",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      }
+    },
+    // Image section content wrapper
+    imageSectionContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: e.spacingScale.xl
+    },
+    // Headline text
+    headlineText: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((l = e.brandingColors) == null ? void 0 : l.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: e.isLarge ? "center" : "left"
+    },
+    // Content container (title + description)
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title text
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((c = e.brandingColors) == null ? void 0 : c.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isLarge ? "center" : "left"
+    },
+    // Description text
+    descriptionText: {
+      fontWeight: 500,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((a = e.brandingColors) == null ? void 0 : a.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isLarge ? "center" : "left"
+    },
+    // Presented by desktop container
+    presentedByDesktop: {
+      display: "block"
+    },
+    // Question/Content area (right side on desktop, below image on mobile)
+    questionArea: {
+      flex: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "1" : "0 0 50%",
+      width: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "100%" : "50%",
+      minWidth: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "100%" : "50%",
+      maxWidth: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "100%" : "50%",
+      display: "flex",
+      flexDirection: "column"
+    }
+  };
+}, De = ({
+  entity: e,
+  headline: l,
+  finalImage: c,
+  brandingContent: a,
+  children: x,
+  isTabulated: r = !1,
+  alwaysShowImage: I = !1,
+  rulesDisplay: g
+}) => {
+  var k;
+  const m = j(), C = re(), R = p(), h = D(), M = A().primary, u = A().secondary, w = L(), f = V(
+    B.SPLIT
+  ), y = ((k = e.branding) == null ? void 0 : k.colors) || null, s = Te({
+    finalImage: c,
+    spacingScale: h,
+    borderRadius: w,
+    fontFamilyPrimary: M,
+    fontFamilySecondary: u,
+    brandingColors: y,
+    darkTextColor: R.colorSchemes.dark.textColor,
+    imageBackgroundGradient: f,
+    isMobile: m,
+    isLarge: C,
+    isTabulated: r,
+    alwaysShowImage: I
+  });
+  return /* @__PURE__ */ o(n, { sx: s.wrapper, children: [
+    /* @__PURE__ */ t(n, { sx: s.desktopImageSection, children: /* @__PURE__ */ o(n, { sx: s.imageSectionContent, children: [
+      /* @__PURE__ */ o(n, { children: [
+        /* @__PURE__ */ o(
+          n,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: h["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ t(d, { level: "body-sm", sx: s.headlineText, children: l }),
+              /* @__PURE__ */ t(v, { rulesDisplay: g, rules: e.rules || "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(n, { sx: s.contentContainer, children: [
+          /* @__PURE__ */ t(d, { level: "body-lg", sx: s.titleText, children: e.title }),
+          /* @__PURE__ */ t(d, { level: "body-md", sx: s.descriptionText, children: F(e.description) })
+        ] })
+      ] }),
+      /* @__PURE__ */ t(n, { sx: s.presentedByDesktop, children: a })
+    ] }) }),
+    /* @__PURE__ */ t(n, { sx: s.questionArea, children: x })
+  ] });
+}, Ie = (e) => {
+  var l, c, a;
+  return {
+    // Mobile headline with image background
+    mobileHeadlineWithImage: {
+      display: e.isMobile ? "flex" : "none",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: "5px",
+      borderTopRightRadius: "5px",
+      position: "relative",
+      minHeight: "210px",
+      overflow: "hidden",
+      height: "auto",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      }
+    },
+    // Content inside mobile headline with image
+    mobileHeadlineContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      gap: e.spacingScale["2xl"],
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between"
+    },
+    // Mobile headline without image
+    mobileHeadlineWithoutImage: {
+      display: e.isMobile ? "flex" : "none",
+      flex: "0.5",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      p: e.spacingScale.lg,
+      gap: e.spacingScale["2xl"]
+    },
+    // Headline typography (mobile with image)
+    headlineTypographyMobileImage: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((l = e.brandingColors) == null ? void 0 : l.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: "center"
+    },
+    // Headline typography (mobile without image & desktop)
+    headlineTypography: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      textTransform: "uppercase",
+      fontSize: "0.75em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilySecondary,
+      textAlign: "center"
+    },
+    // Title typography (mobile with image)
+    titleTypographyMobileImage: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((c = e.brandingColors) == null ? void 0 : c.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: "center"
+    },
+    // Title typography (mobile without image & desktop)
+    titleTypography: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description typography (mobile with image)
+    descriptionTypographyMobileImage: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((a = e.brandingColors) == null ? void 0 : a.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: "center"
+    },
+    // Description typography (mobile without image & desktop)
+    descriptionTypography: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Desktop title typography (centered)
+    titleTypographyDesktop: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Desktop description typography (centered)
+    descriptionTypographyDesktop: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Image container (left position)
+    imageContainerLeft: {
+      display: e.isMobile ? "none" : "block",
+      flex: "0.3",
+      borderTopLeftRadius: e.borderRadius.md,
+      borderBottomLeftRadius: e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative"
+    },
+    // Image container (right position)
+    imageContainerRight: {
+      display: e.isMobile ? "none" : "block",
+      flex: "0.3",
+      borderTopRightRadius: "5px",
+      borderBottomRightRadius: "5px",
+      overflow: "hidden",
+      height: "auto",
+      position: "relative"
+    },
+    // Main content area
+    mainContentArea: {
+      flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
+      // display: props.isMobile ? "block" : "flex",
+      display: "flex",
+      flexDirection: "column",
+      p: e.spacingScale.md,
+      gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+    },
+    // Desktop headline container
+    desktopHeadlineContainer: {
+      display: e.isMobile ? "none" : "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: e.spacingScale["2xl"],
+      textAlign: "center"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Question area
+    questionArea: {
+      display: "flex",
+      flexDirection: "column",
+      px: e.spacingScale.md
+    },
+    // Question container
+    questionContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+    },
+    // Alert container
+    alertContainer: {
+      // py: props.spacingScale.md,
+      display: "flex",
+      flexDirection: "column",
+      backdropFilter: "blur(4px)"
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    },
+    // CTA container
+    ctaContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    // CTA content wrapper
+    ctaContentWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: e.spacingScale.lg
+    },
+    // Buttons container
+    buttonsContainer: {
+      display: "flex",
+      flexDirection: e.isMobile ? "column" : "row",
+      gap: e.spacingScale.md
+    },
+    // Try again button
+    tryAgainButton: {
+      display: "flex",
+      py: e.spacingScale.xs,
+      px: "16px",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      borderRadius: e.borderRadius.xl,
+      border: e.borderSize + " solid " + e.primaryColor,
+      bgcolor: e.buttonBgColor,
+      "&:hover": {
+        bgcolor: e.onSurfaceColor,
+        borderColor: e.primaryColor
+      },
+      fontSize: "0.8125em"
+    },
+    // Try again button content
+    tryAgainButtonContent: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      alignSelf: "stretch"
+    },
+    // Try again icon
+    tryAgainIcon: {
+      display: "flex",
+      width: "16px",
+      height: "16px",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      color: e.textPrimary
+    },
+    // Try again text
+    tryAgainText: {
+      color: e.textPrimary,
+      textAlign: "center",
+      fontFamily: e.fontFamilyPrimary,
+      fontSize: "0.8125em",
+      fontStyle: "normal",
+      fontWeight: 500,
+      lineHeight: "22px",
+      letterSpacing: "0.46px",
+      textTransform: "uppercase"
+    },
+    // Presented by container
+    presentedByContainer: {
+      px: e.spacingScale.md
+    }
+  };
+}, le = te(/* @__PURE__ */ t("path", {
+  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"
+}), "Replay"), Le = (e) => {
+  var $;
+  const l = (($ = e.entity.branding) == null ? void 0 : $.colors) || null, c = p(), a = j(), x = ie(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
+    },
+    B.STANDARD
+  ), 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(
+    B.STANDARD
+  ), { 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({
+    finalImage: x,
+    spacingScale: r,
+    borderRadius: m,
+    fontFamilyPrimary: I,
+    fontFamilySecondary: g,
+    textColor: C,
+    secondaryColor: M,
+    brandingColors: l,
+    darkTextColor: c.colorSchemes.dark.textColor,
+    opacity: b,
+    imagePosition: k,
+    imageBackgroundGradient: y,
+    textPrimary: R,
+    primaryColor: h,
+    borderSize: u,
+    buttonBgColor: w,
+    onSurfaceColor: f,
+    isMobile: a
+  }), P = () => e.isApiError ? /* @__PURE__ */ o(H, { children: [
+    /* @__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: [
+      /* @__PURE__ */ t(le, { sx: i.tryAgainIcon }),
+      /* @__PURE__ */ t(d, { sx: i.tryAgainText, children: e.tryAgainButtonText })
+    ] }) }) }) }) }),
+    /* @__PURE__ */ t(n, { sx: i.presentedByContainer, children: e.renderPresentedBy(C) })
+  ] }) : /* @__PURE__ */ t(H, {});
+  return /* @__PURE__ */ o(H, { children: [
+    x ? /* @__PURE__ */ t(n, { sx: i.mobileHeadlineWithImage, children: /* @__PURE__ */ t(n, { sx: i.mobileHeadlineContent, children: /* @__PURE__ */ o(n, { children: [
+      /* @__PURE__ */ o(n, { sx: { display: "flex", alignItems: "center", gap: r["3xs"] }, children: [
+        /* @__PURE__ */ t(
+          d,
+          {
+            level: "body-sm",
+            sx: i.headlineTypographyMobileImage,
+            children: e.headline
+          }
+        ),
+        /* @__PURE__ */ t(
+          v,
+          {
+            rulesDisplay: e.rulesDisplay,
+            rules: e.entity.rules || ""
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
+        /* @__PURE__ */ t(
+          d,
+          {
+            level: "body-lg",
+            sx: i.titleTypographyMobileImage,
+            children: e.entity.title
+          }
+        ),
+        /* @__PURE__ */ t(
+          d,
+          {
+            level: "body-md",
+            sx: i.descriptionTypographyMobileImage,
+            children: F(e.entity.description)
+          }
+        )
+      ] })
+    ] }) }) }) : /* @__PURE__ */ t(n, { sx: i.mobileHeadlineWithoutImage, children: /* @__PURE__ */ o(n, { children: [
+      /* @__PURE__ */ o(n, { sx: { display: "flex", alignItems: "center", gap: r["3xs"] }, children: [
+        /* @__PURE__ */ t(d, { level: "body-sm", sx: i.headlineTypography, children: e.headline }),
+        /* @__PURE__ */ t(
+          v,
+          {
+            rulesDisplay: e.rulesDisplay,
+            rules: e.entity.rules || ""
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
+        /* @__PURE__ */ t(d, { level: "h4", sx: i.titleTypography, children: e.entity.title }),
+        /* @__PURE__ */ t(d, { level: "body-md", sx: i.descriptionTypography, children: F(e.entity.description) })
+      ] })
+    ] }) }),
+    x && k === "left" && /* @__PURE__ */ t(n, { sx: i.imageContainerLeft, children: /* @__PURE__ */ t(
+      "img",
+      {
+        src: x,
+        alt: "illustration",
+        style: i.image
+      }
+    ) }),
+    /* @__PURE__ */ o(n, { sx: i.mainContentArea, children: [
+      /* @__PURE__ */ t(n, { sx: { px: r.md }, children: /* @__PURE__ */ t(n, { sx: i.desktopHeadlineContainer, children: /* @__PURE__ */ o(
+        n,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ o(n, { sx: { display: "flex", alignItems: "center", gap: r["3xs"] }, children: [
+              /* @__PURE__ */ t(d, { level: "body-sm", sx: i.headlineTypography, children: e.headline }),
+              /* @__PURE__ */ t(
+                v,
+                {
+                  rulesDisplay: e.rulesDisplay,
+                  rules: e.entity.rules || ""
+                }
+              )
+            ] }),
+            /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
+              /* @__PURE__ */ t(d, { level: "h4", sx: i.titleTypographyDesktop, children: e.entity.title }),
+              /* @__PURE__ */ t(
+                d,
+                {
+                  level: "body-md",
+                  sx: i.descriptionTypographyDesktop,
+                  children: F(e.entity.description)
+                }
+              )
+            ] })
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ t(n, { sx: i.questionArea, children: /* @__PURE__ */ o(n, { sx: i.questionContainer, children: [
+        /* @__PURE__ */ t(n, { sx: i.alertContainer, children: /* @__PURE__ */ t(
+          oe,
+          {
+            variant: "error",
+            title: W,
+            message: z
+          }
+        ) }),
+        e.isApiError ? /* @__PURE__ */ t(H, {}) : e.renderPresentedBy(C)
+      ] }) }),
+      P()
+    ] }),
+    x && k === "right" && /* @__PURE__ */ t(n, { sx: i.imageContainerRight, children: /* @__PURE__ */ t(
+      "img",
+      {
+        src: x,
+        alt: "illustration",
+        style: i.image
+      }
+    ) })
+  ] });
+}, we = (e) => {
+  var l, c, a;
+  return {
+    // Main headline section with background image
+    headlineSection: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      flex: "0.5",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: e.mdBorderRadius,
+      borderTopRightRadius: e.isMobile ? e.mdBorderRadius : 0,
+      borderBottomLeftRadius: e.isMobile ? 0 : e.mdBorderRadius,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: e.isMobile ? "210px" : "430px",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      }
+    },
+    // Headline content wrapper
+    headlineContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      gap: e.spacingScale.xl,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between"
+    },
+    // Headline text
+    headlineText: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((l = e.brandingColors) == null ? void 0 : l.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title text
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((c = e.brandingColors) == null ? void 0 : c.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description text
+    descriptionText: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((a = e.brandingColors) == null ? void 0 : a.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Presented by desktop container
+    presentedByDesktop: {
+      display: e.isMobile ? "none" : "block"
+    },
+    // Question area (error section)
+    questionArea: {
+      flex: "0.5",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: e.spacingScale.md,
+      p: e.spacingScale.lg
+    },
+    // Presented by mobile container
+    presentedByMobile: {
+      display: e.isMobile ? "block" : "none"
+    },
+    // CTA container
+    ctaContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    // CTA content wrapper
+    ctaContentWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: e.spacingScale.lg
+    },
+    // Buttons container
+    buttonsContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    },
+    // Try again button
+    tryAgainButton: {
+      display: "flex",
+      py: e.spacingScale.xs,
+      px: "16px",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      borderRadius: e.borderRadius.xl,
+      color: e.textPrimary,
+      bgcolor: e.surfaceColor,
+      "&:hover": {
+        bgcolor: e.onSurfaceColor
+      },
+      fontSize: "0.9375em"
+    },
+    // Try again button content
+    tryAgainButtonContent: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      alignSelf: "stretch"
+    },
+    // Try again icon
+    tryAgainIcon: {
+      display: "flex",
+      width: "16px",
+      height: "16px",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      color: e.textPrimary
+    },
+    // Try again text
+    tryAgainText: {
+      color: e.textPrimary,
+      textAlign: "center",
+      fontFamily: e.fontFamilyPrimary,
+      fontSize: "0.8125em",
+      fontStyle: "normal",
+      fontWeight: 500,
+      lineHeight: "22px",
+      letterSpacing: "0.46px",
+      textTransform: "uppercase"
+    }
+  };
+}, je = (e) => {
+  var z;
+  const l = p(), c = j(), a = ((z = e.entity.branding) == null ? void 0 : z.colors) || null, x = ie(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: e.defaultImagePlaceholderUrl || ""
+    },
+    B.SPLIT
+  ), { 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(
+    B.SPLIT
+  ), 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({
+    finalImage: x,
+    spacingScale: f,
+    borderRadius: L(),
+    fontFamilyPrimary: M,
+    fontFamilySecondary: h,
+    mdBorderRadius: u,
+    textColor: w,
+    brandingColors: a,
+    darkTextColor: l.colorSchemes.dark.textColor,
+    imageBackgroundGradient: y,
+    textPrimary: I,
+    surfaceColor: g,
+    onSurfaceColor: m,
+    isMobile: c
+  }), W = () => e.isApiError ? /* @__PURE__ */ t(
+    n,
+    {
+      sx: {
+        p: f.lg,
+        gap: f.lg,
+        display: "flex",
+        flexDirection: "column",
+        backdropFilter: "blur(4px)",
+        bgcolor: `rgba(${C ? ne(C || "").replace(/[^\d,]/g, "") : ""}, 0.5)`,
+        borderRadius: R.sm
+      },
+      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: [
+        /* @__PURE__ */ t(le, { sx: b.tryAgainIcon }),
+        /* @__PURE__ */ t(d, { sx: b.tryAgainText, children: e.tryAgainButtonText })
+      ] }) }) }) }) })
+    }
+  ) : /* @__PURE__ */ t(H, {});
+  return /* @__PURE__ */ o(H, { children: [
+    /* @__PURE__ */ t(n, { sx: b.headlineSection, children: /* @__PURE__ */ o(n, { sx: b.headlineContent, children: [
+      /* @__PURE__ */ o(n, { children: [
+        /* @__PURE__ */ o(n, { sx: { display: "flex", alignItems: "center", gap: f["3xs"] }, children: [
+          /* @__PURE__ */ t(d, { level: "body-sm", sx: b.headlineText, children: e.headline }),
+          /* @__PURE__ */ t(
+            v,
+            {
+              rulesDisplay: e.rulesDisplay,
+              rules: e.entity.rules || ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ o(n, { sx: b.contentContainer, children: [
+          /* @__PURE__ */ t(d, { level: "body-lg", sx: b.titleText, children: e.entity.title }),
+          /* @__PURE__ */ t(d, { level: "body-md", sx: b.descriptionText, children: F(e.entity.description) })
+        ] })
+      ] }),
+      /* @__PURE__ */ t(n, { sx: b.presentedByDesktop, children: e.renderPresentedBy(
+        (a == null ? void 0 : a.contentColor) || l.colorSchemes.dark.textColor
+      ) })
+    ] }) }),
+    /* @__PURE__ */ o(n, { sx: b.questionArea, children: [
+      /* @__PURE__ */ t(
+        oe,
+        {
+          variant: "error",
+          title: s,
+          message: k
+        }
+      ),
+      W(),
+      /* @__PURE__ */ t(n, { sx: b.presentedByMobile, children: e.renderPresentedBy((a == null ? void 0 : a.contentColor) || w) })
+    ] })
+  ] });
+}, Re = (e) => {
+  var l;
+  return {
+    // Main container with background overlay
+    mainContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "40px",
+      p: e.spacingScale.xl,
+      boxShadow: "md",
+      border: (l = e.brandingColors) != null && l.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
+      overflow: "hidden",
+      backgroundImage: e.backgroundImage,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      position: "relative",
+      borderRadius: e.borderRadius.md,
+      minHeight: "250px",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        background: e.imageBackgroundGradient,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: "inherit",
+        zIndex: 0
+      }
+    },
+    // Headline section wrapper
+    headlineSection: {
+      display: "flex",
+      justifyContent: "space-between",
+      flex: "1 0 0",
+      alignSelf: "stretch"
+    },
+    // Headline content container
+    headlineContent: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      flex: "1 0 0",
+      gap: "16px"
+    },
+    // Headline content with z-index
+    headlineContentInner: {
+      zIndex: 10
+    },
+    // Headline typography
+    headlineText: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      textAlign: e.isMobile ? "center" : "left",
+      color: e.secondaryColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      fontSize: "0.75em"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title typography
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      textAlign: e.isMobile ? "center" : "left",
+      fontSize: "1.5em",
+      color: e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Description typography
+    descriptionText: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      textAlign: e.isMobile ? "center" : "left",
+      color: e.secondaryColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Bottom section container
+    bottomSection: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "24px",
+      zIndex: 1
+    },
+    // Footer container
+    footerContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexDirection: e.isMobile ? "column-reverse" : "row",
+      gap: e.spacingScale.md
+    },
+    ctaSection: {
+      borderRadius: e.borderRadius.md,
+      py: e.spacingScale.md,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      alignSelf: "stretch",
+      gap: e.spacingScale.md,
+      backdropFilter: "blur(4px)",
+      position: "relative",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: e.contentBgColor,
+        opacity: 0.25,
+        borderRadius: "inherit",
+        zIndex: 0,
+        backdropFilter: "blur(4px)"
+      },
+      "& > *": {
+        position: "relative",
+        zIndex: 1
+      }
+    },
+    // Buttons container
+    buttonsContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.md
+    },
+    // Try again button
+    tryAgainButton: {
+      display: "flex",
+      minHeight: "48px",
+      py: "12px",
+      pr: "24px",
+      pl: "16px",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      borderRadius: e.borderRadius.xl,
+      bgcolor: e.onSurfaceColor,
+      "&:hover": {
+        bgcolor: e.surfaceVariantColor
+      },
+      fontSize: "0.9375em"
+    },
+    // Try again button content
+    tryAgainButtonContent: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      alignSelf: "stretch"
+    },
+    // Try again icon
+    tryAgainIcon: {
+      display: "flex",
+      width: "24px",
+      height: "24px",
+      justifyContent: "center",
+      alignItems: "center",
+      color: e.textPrimary
+    },
+    // Try again text
+    tryAgainText: {
+      color: e.textPrimary,
+      textAlign: "center",
+      fontFamily: e.fontFamilyPrimary,
+      fontSize: "0.9375em",
+      fontStyle: "normal",
+      fontWeight: 500,
+      lineHeight: "24px",
+      letterSpacing: "0.46px",
+      textTransform: "uppercase"
+    }
+  };
+}, pe = (e) => {
+  const l = D(), c = p(), a = j(), { t: x } = G(), r = V(
+    B.OVERLAY
+  ), { brandingImage: I, brandingColors: g, brandingLogo: m } = ye(e.entity.branding || null), C = I || ie(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: e.defaultImagePlaceholderUrl || ""
+    },
+    B.OVERLAY
+  ), 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({
+    spacingScale: l,
+    brandingColors: g,
+    secondaryColor: h,
+    fontFamilyPrimary: M,
+    fontFamilySecondary: u,
+    borderRadius: w,
+    borderSize: f,
+    darkTextColor: c.colorSchemes.dark.textColor,
+    backgroundImage: R,
+    imageBackgroundGradient: r,
+    contentBgColor: y,
+    onSurfaceColor: s,
+    surfaceVariantColor: k,
+    textPrimary: b,
+    isMobile: a
+  }), 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: [
+    /* @__PURE__ */ t(le, { sx: i.tryAgainIcon }),
+    /* @__PURE__ */ t(d, { sx: i.tryAgainText, children: e.tryAgainButtonText })
+  ] }) }) }) }) : /* @__PURE__ */ t(H, {});
+  return /* @__PURE__ */ o(n, { sx: i.mainContainer, children: [
+    /* @__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: [
+      /* @__PURE__ */ o(n, { sx: { display: "flex", alignItems: "center", gap: l["3xs"] }, children: [
+        /* @__PURE__ */ t(d, { level: "body-sm", sx: i.headlineText, children: e.headline }),
+        /* @__PURE__ */ t(
+          v,
+          {
+            rulesDisplay: e.rulesDisplay,
+            isOverlayVariant: !0,
+            rules: e.entity.rules || ""
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(n, { sx: i.contentContainer, children: [
+        /* @__PURE__ */ t(d, { level: "h4", sx: i.titleText, children: e.entity.title }),
+        /* @__PURE__ */ t(d, { level: "body-lg", sx: i.descriptionText, children: F(e.entity.description) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ o(n, { sx: i.bottomSection, children: [
+      /* @__PURE__ */ t(
+        oe,
+        {
+          variant: "error",
+          title: W,
+          message: z
+        }
+      ),
+      P(),
+      m ? /* @__PURE__ */ t(n, { sx: i.footerContainer, children: e.renderPresentedBy(c.colorSchemes.dark.textColor) }) : /* @__PURE__ */ t(H, {})
+    ] })
+  ] });
+}, Ve = ({
+  notFoundTitle: e,
+  notFoundMessage: l
+}) => {
+  var g, m;
+  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;
+  return /* @__PURE__ */ o(
+    n,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        minHeight: "300px",
+        padding: "32px 24px",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ t(
+          n,
+          {
+            sx: {
+              width: "80px",
+              height: "80px",
+              borderRadius: "50%",
+              backgroundColor: `${c}15`,
+              // 15% opacity
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginBottom: "24px"
+            },
+            children: /* @__PURE__ */ t(
+              n,
+              {
+                sx: {
+                  fontSize: "32px",
+                  color: c,
+                  fontWeight: "bold",
+                  fontFamily: r
+                },
+                children: "?"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          d,
+          {
+            level: "h4",
+            sx: {
+              color: c,
+              marginBottom: x.xs,
+              fontWeight: "600",
+              fontFamily: r
+            },
+            children: e
+          }
+        ),
+        /* @__PURE__ */ t(
+          d,
+          {
+            level: "body-md",
+            sx: {
+              color: a,
+              lineHeight: 1.5,
+              fontFamily: I
+            },
+            children: l
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Pe as A,
+  be as C,
+  Ve as N,
+  We as O,
+  v as R,
+  ze as S,
+  Be as a,
+  le as b,
+  De as c,
+  Le as d,
+  je as e,
+  pe as f,
+  He as g
+};