fansunited-frontend-components 0.0.31-RC3 → 0.0.31-RC5

package/packages/common/src/components/Skeletons/Overlay/OverlaySkeleton.js

@@ -0,0 +1,68 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as o, Typography as i } from "@mui/joy";
+import { useInternalTheme as C, useSpacingScale as T, useImageBackgroundGradient as F } from "../../../functions/theme.js";
+import { sanitizeBackgroundUrl as b, stripHtmlTags as v } from "../../../functions/helpers.js";
+import "../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as B } from "../../../enums/enums.js";
+import I from "../../Rules.js";
+import "react";
+import "../../../providers/ConstantsProvider.js";
+import { createStyles as R } from "./OverlaySkeleton.styles.js";
+import "../../../providers/ContainerProvider.js";
+const q = ({
+  entity: s,
+  headline: d,
+  finalImage: m,
+  children: x,
+  rulesDisplay: p
+}) => {
+  var l, c;
+  const t = C(), a = T(), h = F(
+    B.OVERLAY
+  ), n = ((l = s.branding) == null ? void 0 : l.colors) || null, u = (n == null ? void 0 : n.contentColor) || t.colorSchemes.dark.textColor, g = t.customFontFamily.dark.primary, j = t.customFontFamily.dark.secondary, y = t.customRadius.dark.md, k = (c = t.border) == null ? void 0 : c.dark.size, f = t.colorSchemes.dark.textColor, S = b(m), r = R({
+    spacingScale: a,
+    brandingColors: n,
+    secondaryColor: u,
+    fontFamilyPrimary: g,
+    fontFamilySecondary: j,
+    mdBorderRadius: y,
+    borderSize: k,
+    backgroundImage: S,
+    darkTextColor: f,
+    imageBackgroundGradient: h
+  });
+  return /* @__PURE__ */ e.jsxs(o, { sx: r.mainContainer, children: [
+    /* @__PURE__ */ e.jsx(o, { children: /* @__PURE__ */ e.jsx(o, { sx: r.headlineSection, children: /* @__PURE__ */ e.jsx(o, { sx: r.headlineContent, children: /* @__PURE__ */ e.jsxs(o, { sx: r.headlineContentInner, children: [
+      /* @__PURE__ */ e.jsxs(
+        o,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: a["3xs"]
+          },
+          children: [
+            /* @__PURE__ */ e.jsx(i, { level: "body-sm", sx: r.headlineText, children: d }),
+            /* @__PURE__ */ e.jsx(
+              I,
+              {
+                rulesDisplay: p,
+                isOverlayVariant: !0,
+                rules: s.rules || ""
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(o, { sx: r.contentContainer, children: [
+        /* @__PURE__ */ e.jsx(i, { level: "h4", sx: r.titleText, children: s.title }),
+        s.description && /* @__PURE__ */ e.jsx(i, { level: "body-lg", sx: r.descriptionText, children: v(s.description) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e.jsx(o, { sx: r.mainContentSection, children: x })
+  ] });
+};
+export {
+  q as default
+};

package/packages/common/src/components/Skeletons/Overlay/OverlaySkeleton.styles.js

@@ -0,0 +1,100 @@
+const n = (e) => {
+  var t;
+  return {
+    // Main container with background overlay
+    mainContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "40px",
+      p: e.spacingScale.xl,
+      boxShadow: "md",
+      border: (t = e.brandingColors) != null && t.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"
+    }
+  };
+};
+export {
+  n as createStyles
+};

package/packages/common/src/components/Skeletons/Overlay/ScoreState/OverlayScoreStateSkeleton.js

@@ -0,0 +1,65 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as t, Typography as l } from "@mui/joy";
+import { isMobile as T, useInternalTheme as b, useSpacingScale as F } from "../../../../functions/theme.js";
+import { stripHtmlTags as k } from "../../../../functions/helpers.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { createStyles as v } from "./OverlayScoreStateSkeleton.styles.js";
+import R from "../../../Rules.js";
+const V = ({
+  entity: n,
+  headline: a,
+  backgroundImage: d,
+  imageBackgroundGradient: m,
+  children: x,
+  rulesDisplay: h
+}) => {
+  var c;
+  const p = T(), r = b(), i = F(), s = ((c = n.branding) == null ? void 0 : c.colors) || null, y = (s == null ? void 0 : s.secondaryColor) || r.colorSchemes.dark.textSecondary, u = r.customFontFamily.light.primary, S = r.customFontFamily.light.secondary, j = r.customRadius.light.md, f = r.border.light.size, g = (s == null ? void 0 : s.borderColor) || r.colorSchemes.dark.secondaryContainer, C = r.colorSchemes.dark.textColor, o = v({
+    spacingScale: i,
+    brandingColors: s,
+    secondaryColor: y,
+    fontFamilyPrimary: u,
+    fontFamilySecondary: S,
+    mdBorderRadius: j,
+    borderSize: f,
+    borderColor: g,
+    darkTextColor: C,
+    backgroundImage: d,
+    imageBackgroundGradient: m,
+    isMobile: p
+  });
+  return /* @__PURE__ */ e.jsxs(t, { sx: o.mainContainer, children: [
+    /* @__PURE__ */ e.jsx(t, { children: /* @__PURE__ */ e.jsx(t, { sx: o.headlineSection, children: /* @__PURE__ */ e.jsx(t, { sx: o.headlineContent, children: /* @__PURE__ */ e.jsxs(t, { sx: o.headlineContentInner, children: [
+      /* @__PURE__ */ e.jsxs(
+        t,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: i["3xs"]
+          },
+          children: [
+            /* @__PURE__ */ e.jsx(l, { level: "body-sm", sx: o.headlineText, children: a }),
+            /* @__PURE__ */ e.jsx(
+              R,
+              {
+                rulesDisplay: h,
+                isOverlayVariant: !0,
+                rules: n.rules || ""
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(t, { sx: o.contentContainer, children: [
+        /* @__PURE__ */ e.jsx(l, { level: "h4", sx: o.titleText, children: n.title }),
+        /* @__PURE__ */ e.jsx(l, { level: "body-lg", sx: o.descriptionText, children: k(n.description) })
+      ] })
+    ] }) }) }) }),
+    x
+  ] });
+};
+export {
+  V as default
+};

package/packages/common/src/components/Skeletons/Overlay/ScoreState/OverlayScoreStateSkeleton.styles.js

@@ -0,0 +1,90 @@
+const t = (e) => ({
+  // Main container with background overlay
+  mainContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "40px",
+    p: e.spacingScale.xl,
+    boxShadow: "md",
+    border: `${e.borderSize} solid ${e.borderColor}`,
+    overflow: "hidden",
+    backgroundImage: e.backgroundImage,
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    position: "relative",
+    borderRadius: e.mdBorderRadius,
+    minHeight: "250px",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      zIndex: 0,
+      background: e.imageBackgroundGradient
+    }
+  },
+  // 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
+  }
+});
+export {
+  t as createStyles
+};

package/packages/common/src/components/Skeletons/Overlay/ScoreState/OverlayScoreStateWrapperSkeleton.js

@@ -0,0 +1,34 @@
+import { j as u } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as S } from "@mui/joy";
+import { useInternalTheme as f, useSpacingScale as x } from "../../../../functions/theme.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { createStyles as h } from "./OverlayScoreStateWrapperSkeleton.styles.js";
+const k = ({
+  entity: s,
+  backgroundImage: a,
+  imageBackgroundGradient: i,
+  children: m,
+  isWrappedWithScoreStateWrapper: e = !1
+}) => {
+  var n;
+  const o = f(), c = x(), r = ((n = s.branding) == null ? void 0 : n.colors) || null, l = o.customRadius.light.md, d = o.border.light.size, p = (r == null ? void 0 : r.borderColor) || o.colorSchemes.dark.secondaryContainer, t = h({
+    spacingScale: c,
+    mdBorderRadius: l,
+    borderSize: d,
+    borderColor: p,
+    backgroundImage: a,
+    imageBackgroundGradient: i,
+    isWrappedWithScoreStateWrapper: e
+  });
+  return /* @__PURE__ */ u.jsx(
+    S,
+    {
+      sx: e ? t.mainContainerWithWrapper : t.mainContainer,
+      children: m
+    }
+  );
+};
+export {
+  k as default
+};

package/packages/common/src/components/Skeletons/Overlay/ScoreState/OverlayScoreStateWrapperSkeleton.styles.js

@@ -0,0 +1,55 @@
+const o = (e) => ({
+  // Main container with background overlay (with ScoreStateWrapper)
+  mainContainerWithWrapper: {
+    boxShadow: "md",
+    border: `${e.borderSize} solid ${e.borderColor}`,
+    overflow: "hidden",
+    backgroundImage: e.backgroundImage,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    position: "relative",
+    borderRadius: e.mdBorderRadius,
+    minHeight: "250px",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      zIndex: 0,
+      background: e.imageBackgroundGradient
+    }
+  },
+  // Main container with background overlay (without ScoreStateWrapper)
+  mainContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "40px",
+    p: e.spacingScale.xl,
+    boxShadow: "md",
+    border: `${e.borderSize} solid ${e.borderColor}`,
+    overflow: "hidden",
+    backgroundImage: e.backgroundImage,
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    position: "relative",
+    borderRadius: e.mdBorderRadius,
+    minHeight: "250px",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      zIndex: 0,
+      background: e.imageBackgroundGradient
+    }
+  }
+});
+export {
+  o as createStyles
+};

package/packages/common/src/components/Skeletons/Overlay/SignIn/OverlaySignInSkeleton.js

@@ -0,0 +1,58 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as s, Typography as i } from "@mui/joy";
+import { isMobile as b, useInternalTheme as k, useSpacingScale as T } from "../../../../functions/theme.js";
+import { stripHtmlTags as F } from "../../../../functions/helpers.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { createStyles as I } from "./OverlaySignInSkeleton.styles.js";
+import v from "../../../Rules.js";
+const P = ({
+  entity: n,
+  headline: d,
+  backgroundImage: x,
+  imageBackgroundGradient: m,
+  signInContent: p,
+  brandingContent: h,
+  rulesDisplay: u
+}) => {
+  var c;
+  const a = b(), o = k(), l = T(), t = ((c = n.branding) == null ? void 0 : c.colors) || null, y = (t == null ? void 0 : t.contentColor) || o.colorSchemes.dark.textColor, j = o.customFontFamily.dark.primary, f = o.customFontFamily.dark.secondary, g = o.customRadius.dark.md, S = o.border.dark.size, C = o.colorSchemes.dark.textColor, r = I({
+    spacingScale: l,
+    brandingColors: t,
+    secondaryColor: y,
+    fontFamilyPrimary: j,
+    fontFamilySecondary: f,
+    mdBorderRadius: g,
+    borderSize: S,
+    darkTextColor: C,
+    backgroundImage: x,
+    imageBackgroundGradient: m,
+    isMobile: a
+  });
+  return /* @__PURE__ */ e.jsxs(s, { sx: r.mainContainer, children: [
+    /* @__PURE__ */ e.jsx(s, { children: /* @__PURE__ */ e.jsx(s, { sx: r.headlineSection, children: /* @__PURE__ */ e.jsx(s, { sx: r.headlineContent, children: /* @__PURE__ */ e.jsxs(s, { sx: { ...r.headlineContentInner, display: "flex", flexDirection: "column", alignItems: a ? "center" : "flex-start", gap: l["3xs"] }, children: [
+      /* @__PURE__ */ e.jsxs(s, { sx: { display: "flex", alignItems: "center", gap: l["3xs"] }, children: [
+        /* @__PURE__ */ e.jsx(i, { level: "body-sm", sx: r.headlineText, children: d }),
+        /* @__PURE__ */ e.jsx(
+          v,
+          {
+            rulesDisplay: u,
+            isOverlayVariant: !0,
+            rules: n.rules || ""
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs(s, { sx: r.contentContainer, children: [
+        /* @__PURE__ */ e.jsx(i, { level: "h4", sx: r.titleText, children: n.title }),
+        /* @__PURE__ */ e.jsx(i, { level: "body-lg", sx: r.descriptionText, children: F(n.description) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e.jsxs(s, { sx: r.bottomContainer, children: [
+      h,
+      /* @__PURE__ */ e.jsx(s, { sx: r.signInWrapper, children: p })
+    ] })
+  ] });
+};
+export {
+  P as default
+};

package/packages/common/src/components/Skeletons/Overlay/SignIn/OverlaySignInSkeleton.styles.js

@@ -0,0 +1,105 @@
+const n = (e) => {
+  var t;
+  return {
+    // Main container with background overlay
+    mainContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "40px",
+      p: e.spacingScale.xl,
+      boxShadow: "md",
+      border: (t = e.brandingColors) != null && t.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
+      overflow: "hidden",
+      backgroundImage: e.backgroundImage,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      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
+    },
+    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"]
+    },
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      textAlign: e.isMobile ? "center" : "left",
+      fontSize: "1.5em",
+      color: e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    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 container
+    bottomContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexDirection: e.isMobile ? "column-reverse" : "row",
+      gap: e.spacingScale.md
+    },
+    // Sign-in wrapper to always position at flex-end
+    signInWrapper: {
+      display: "flex",
+      justifyContent: "flex-end",
+      flex: 1
+    }
+  };
+};
+export {
+  n as createStyles
+};

package/packages/common/src/components/Skeletons/Split/ApiError/SplitApiErrorSkeleton.js

@@ -0,0 +1,98 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as n, Typography as a, Button as P } from "@mui/joy";
+import { useInternalTheme as F, isMobile as M, useColors as i, useCornerRadius as c, useFontFamily as g, useSpacingScale as E, useImageBackgroundGradient as v } from "../../../../functions/theme.js";
+import { stripHtmlTags as D, hexToRgb as q } from "../../../../functions/helpers.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as y } from "../../../../enums/enums.js";
+import G from "../../../Rules.js";
+import "react";
+import "../../../../providers/ConstantsProvider.js";
+import L from "../../../AlertMessage.js";
+import V from "../../../../../../../node_modules/@mui/icons-material/esm/Replay.js";
+import { createStyles as W } from "./SplitApiErrorSkeleton.styles.js";
+import { useImageVariant as H } from "../../../../hooks/useImageVariant.js";
+import "../../../../providers/ContainerProvider.js";
+import { useTranslation as O } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const oe = (t) => {
+  var u;
+  const m = F(), h = M(), o = ((u = t.entity.branding) == null ? void 0 : u.colors) || null, f = H(
+    {
+      images: t.entity.images || null,
+      imagePlaceholder: t.defaultImagePlaceholderUrl || ""
+    },
+    y.SPLIT
+  ), { t: s } = O(), j = i().textPrimary, p = i().surface, T = i().onSurface, d = (o == null ? void 0 : o.backgroundColor) || i().surfaceVariant, b = c(), A = g().secondary, C = g().primary, S = c().md, x = i().textColor, l = E(), B = v(
+    y.SPLIT
+  ), k = t.isApiError ? s("common.error.title") : s("common.authentication.accessRequired"), I = t.isApiError ? t.apiErrorMessage || s("common.error.message") : s("common.authentication.invalidOrMissingAuth"), r = W({
+    finalImage: f,
+    spacingScale: l,
+    borderRadius: c(),
+    fontFamilyPrimary: C,
+    fontFamilySecondary: A,
+    mdBorderRadius: S,
+    textColor: x,
+    brandingColors: o,
+    darkTextColor: m.colorSchemes.dark.textColor,
+    imageBackgroundGradient: B,
+    textPrimary: j,
+    surfaceColor: p,
+    onSurfaceColor: T,
+    isMobile: h
+  }), R = () => t.isApiError ? /* @__PURE__ */ e.jsx(
+    n,
+    {
+      sx: {
+        p: l.lg,
+        gap: l.lg,
+        display: "flex",
+        flexDirection: "column",
+        backdropFilter: "blur(4px)",
+        bgcolor: `rgba(${d ? q(d || "").replace(/[^\d,]/g, "") : ""}, 0.5)`,
+        borderRadius: b.sm
+      },
+      children: /* @__PURE__ */ e.jsx(n, { sx: r.ctaContainer, children: /* @__PURE__ */ e.jsx(n, { sx: r.ctaContentWrapper, children: /* @__PURE__ */ e.jsx(n, { sx: r.buttonsContainer, children: /* @__PURE__ */ e.jsx(P, { sx: r.tryAgainButton, onClick: t.toggleTryAgain, children: /* @__PURE__ */ e.jsxs(n, { sx: r.tryAgainButtonContent, children: [
+        /* @__PURE__ */ e.jsx(V, { sx: r.tryAgainIcon }),
+        /* @__PURE__ */ e.jsx(a, { sx: r.tryAgainText, children: t.tryAgainButtonText })
+      ] }) }) }) }) })
+    }
+  ) : /* @__PURE__ */ e.jsx(e.Fragment, {});
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(n, { sx: r.headlineSection, children: /* @__PURE__ */ e.jsxs(n, { sx: r.headlineContent, children: [
+      /* @__PURE__ */ e.jsxs(n, { children: [
+        /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", gap: l["3xs"] }, children: [
+          /* @__PURE__ */ e.jsx(a, { level: "body-sm", sx: r.headlineText, children: t.headline }),
+          /* @__PURE__ */ e.jsx(
+            G,
+            {
+              rulesDisplay: t.rulesDisplay,
+              rules: t.entity.rules || ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsxs(n, { sx: r.contentContainer, children: [
+          /* @__PURE__ */ e.jsx(a, { level: "body-lg", sx: r.titleText, children: t.entity.title }),
+          /* @__PURE__ */ e.jsx(a, { level: "body-md", sx: r.descriptionText, children: D(t.entity.description) })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx(n, { sx: r.presentedByDesktop, children: t.renderPresentedBy(
+        (o == null ? void 0 : o.contentColor) || m.colorSchemes.dark.textColor
+      ) })
+    ] }) }),
+    /* @__PURE__ */ e.jsxs(n, { sx: r.questionArea, children: [
+      /* @__PURE__ */ e.jsx(
+        L,
+        {
+          variant: "error",
+          title: k,
+          message: I
+        }
+      ),
+      R(),
+      /* @__PURE__ */ e.jsx(n, { sx: r.presentedByMobile, children: t.renderPresentedBy((o == null ? void 0 : o.contentColor) || x) })
+    ] })
+  ] });
+};
+export {
+  oe as default
+};