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

package/packages/common/src/components/Skeletons/Split/SplitSkeleton.styles.js

@@ -0,0 +1,181 @@
+const o = (e) => {
+  var i, t, n, l;
+  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: ((i = e.brandingColors) == null ? void 0 : i.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: ((t = e.brandingColors) == null ? void 0 : t.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: ((n = e.brandingColors) == null ? void 0 : n.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: ((l = e.brandingColors) == null ? void 0 : l.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"
+    }
+  };
+};
+export {
+  o as createStyles
+};

package/packages/common/src/components/Skeletons/Standard/ApiError/StandardApiErrorSkeleton.js

@@ -0,0 +1,173 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import F from "../../../AlertMessage.js";
+import { useInternalTheme as E, isMobile as H, useSpacingScale as W, useFontFamily as g, useCornerRadius as q, useColors as o, useBorderSize as z, useImageBackgroundGradient as G } from "../../../../functions/theme.js";
+import { stripHtmlTags as m } 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 u } from "../../../../enums/enums.js";
+import { Box as r, Typography as s, Button as N } from "@mui/joy";
+import y from "../../../Rules.js";
+import "react";
+import "../../../../providers/ConstantsProvider.js";
+import { createStyles as U } from "./StandardApiErrorSkeleton.styles.js";
+import L from "../../../../../../../node_modules/@mui/icons-material/esm/Replay.js";
+import { useImageVariant as O } from "../../../../hooks/useImageVariant.js";
+import "../../../../providers/ContainerProvider.js";
+import { useTranslation as V } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const oe = (i) => {
+  var h;
+  const n = ((h = i.entity.branding) == null ? void 0 : h.colors) || null, j = E(), f = H(), l = O(
+    {
+      images: i.entity.images || null,
+      imagePlaceholder: i.defaultImagePlaceholderUrl ? i.defaultImagePlaceholderUrl : ""
+    },
+    u.STANDARD
+  ), a = W(), p = g().primary, C = g().secondary, T = q(), x = (n == null ? void 0 : n.contentColor) || o().textColor, A = o().textPrimary, I = (n == null ? void 0 : n.primaryColor) || o().palette.primary.plainColor, b = (n == null ? void 0 : n.secondaryColor) || o().textColor, S = z().size, D = o().surface, B = o().onSurface, v = G(
+    u.STANDARD
+  ), { t: c } = V(), d = i.imagePosition || "left", P = "60%", k = i.isApiError ? c("common.error.title") : c("common.authentication.accessRequired"), M = i.isApiError ? i.apiErrorMessage || c("common.error.message") : c("common.authentication.invalidOrMissingAuth"), t = U({
+    finalImage: l,
+    spacingScale: a,
+    borderRadius: T,
+    fontFamilyPrimary: p,
+    fontFamilySecondary: C,
+    textColor: x,
+    secondaryColor: b,
+    brandingColors: n,
+    darkTextColor: j.colorSchemes.dark.textColor,
+    opacity: P,
+    imagePosition: d,
+    imageBackgroundGradient: v,
+    textPrimary: A,
+    primaryColor: I,
+    borderSize: S,
+    buttonBgColor: D,
+    onSurfaceColor: B,
+    isMobile: f
+  }), R = () => i.isApiError ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(r, { sx: t.ctaContainer, children: /* @__PURE__ */ e.jsx(r, { sx: t.ctaContentWrapper, children: /* @__PURE__ */ e.jsx(r, { sx: t.buttonsContainer, children: /* @__PURE__ */ e.jsx(N, { sx: t.tryAgainButton, onClick: i.toggleTryAgain, children: /* @__PURE__ */ e.jsxs(r, { sx: t.tryAgainButtonContent, children: [
+      /* @__PURE__ */ e.jsx(L, { sx: t.tryAgainIcon }),
+      /* @__PURE__ */ e.jsx(s, { sx: t.tryAgainText, children: i.tryAgainButtonText })
+    ] }) }) }) }) }),
+    /* @__PURE__ */ e.jsx(r, { sx: t.presentedByContainer, children: i.renderPresentedBy(x) })
+  ] }) : /* @__PURE__ */ e.jsx(e.Fragment, {});
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    l ? /* @__PURE__ */ e.jsx(r, { sx: t.mobileHeadlineWithImage, children: /* @__PURE__ */ e.jsx(r, { sx: t.mobileHeadlineContent, children: /* @__PURE__ */ e.jsxs(r, { children: [
+      /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", alignItems: "center", gap: a["3xs"] }, children: [
+        /* @__PURE__ */ e.jsx(
+          s,
+          {
+            level: "body-sm",
+            sx: t.headlineTypographyMobileImage,
+            children: i.headline
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          y,
+          {
+            rulesDisplay: i.rulesDisplay,
+            rules: i.entity.rules || ""
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs(r, { sx: t.contentContainer, children: [
+        /* @__PURE__ */ e.jsx(
+          s,
+          {
+            level: "body-lg",
+            sx: t.titleTypographyMobileImage,
+            children: i.entity.title
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          s,
+          {
+            level: "body-md",
+            sx: t.descriptionTypographyMobileImage,
+            children: m(i.entity.description)
+          }
+        )
+      ] })
+    ] }) }) }) : /* @__PURE__ */ e.jsx(r, { sx: t.mobileHeadlineWithoutImage, children: /* @__PURE__ */ e.jsxs(r, { children: [
+      /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", alignItems: "center", gap: a["3xs"] }, children: [
+        /* @__PURE__ */ e.jsx(s, { level: "body-sm", sx: t.headlineTypography, children: i.headline }),
+        /* @__PURE__ */ e.jsx(
+          y,
+          {
+            rulesDisplay: i.rulesDisplay,
+            rules: i.entity.rules || ""
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs(r, { sx: t.contentContainer, children: [
+        /* @__PURE__ */ e.jsx(s, { level: "h4", sx: t.titleTypography, children: i.entity.title }),
+        /* @__PURE__ */ e.jsx(s, { level: "body-md", sx: t.descriptionTypography, children: m(i.entity.description) })
+      ] })
+    ] }) }),
+    l && d === "left" && /* @__PURE__ */ e.jsx(r, { sx: t.imageContainerLeft, children: /* @__PURE__ */ e.jsx(
+      "img",
+      {
+        src: l,
+        alt: "illustration",
+        style: t.image
+      }
+    ) }),
+    /* @__PURE__ */ e.jsxs(r, { sx: t.mainContentArea, children: [
+      /* @__PURE__ */ e.jsx(r, { sx: { px: a.md }, children: /* @__PURE__ */ e.jsx(r, { sx: t.desktopHeadlineContainer, children: /* @__PURE__ */ e.jsxs(
+        r,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", alignItems: "center", gap: a["3xs"] }, children: [
+              /* @__PURE__ */ e.jsx(s, { level: "body-sm", sx: t.headlineTypography, children: i.headline }),
+              /* @__PURE__ */ e.jsx(
+                y,
+                {
+                  rulesDisplay: i.rulesDisplay,
+                  rules: i.entity.rules || ""
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e.jsxs(r, { sx: t.contentContainer, children: [
+              /* @__PURE__ */ e.jsx(s, { level: "h4", sx: t.titleTypographyDesktop, children: i.entity.title }),
+              /* @__PURE__ */ e.jsx(
+                s,
+                {
+                  level: "body-md",
+                  sx: t.descriptionTypographyDesktop,
+                  children: m(i.entity.description)
+                }
+              )
+            ] })
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ e.jsx(r, { sx: t.questionArea, children: /* @__PURE__ */ e.jsxs(r, { sx: t.questionContainer, children: [
+        /* @__PURE__ */ e.jsx(r, { sx: t.alertContainer, children: /* @__PURE__ */ e.jsx(
+          F,
+          {
+            variant: "error",
+            title: k,
+            message: M
+          }
+        ) }),
+        i.isApiError ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : i.renderPresentedBy(x)
+      ] }) }),
+      R()
+    ] }),
+    l && d === "right" && /* @__PURE__ */ e.jsx(r, { sx: t.imageContainerRight, children: /* @__PURE__ */ e.jsx(
+      "img",
+      {
+        src: l,
+        alt: "illustration",
+        style: t.image
+      }
+    ) })
+  ] });
+};
+export {
+  oe as default
+};

package/packages/common/src/components/Skeletons/Standard/ApiError/StandardApiErrorSkeleton.styles.js

@@ -0,0 +1,275 @@
+const l = (e) => {
+  var i, t, n;
+  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: ((i = e.brandingColors) == null ? void 0 : i.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: ((t = e.brandingColors) == null ? void 0 : t.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: ((n = e.brandingColors) == null ? void 0 : n.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
+    }
+  };
+};
+export {
+  l as createStyles
+};

package/packages/common/src/components/Skeletons/Standard/ScoreState/StandardContentSkeleton.js

@@ -0,0 +1,23 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as r } from "@mui/joy";
+import { createStyles as i } from "./StandardContentSkeleton.styles.js";
+import { isMobile as x } from "../../../../functions/theme.js";
+const j = ({
+  finalImage: s,
+  imagePosition: o = "left",
+  children: n
+}) => {
+  const l = x(), t = i({
+    finalImage: s,
+    imagePosition: o,
+    isMobile: l
+  });
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    o === "left" && s ? /* @__PURE__ */ e.jsx(r, { sx: t.imageContainerLeft, children: /* @__PURE__ */ e.jsx(r, { sx: t.imageSafeArea }) }) : null,
+    n,
+    o === "right" && s ? /* @__PURE__ */ e.jsx(r, { sx: t.imageContainerRight, children: /* @__PURE__ */ e.jsx(r, { sx: t.imageSafeArea }) }) : null
+  ] });
+};
+export {
+  j as default
+};

package/packages/common/src/components/Skeletons/Standard/ScoreState/StandardContentSkeleton.styles.js

@@ -0,0 +1,40 @@
+const t = (e) => ({
+  // 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%"
+  }
+});
+export {
+  t as createStyles
+};