fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC7

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

@@ -1,68 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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
-};