fansunited-frontend-components 0.0.31-RC4 → 0.0.31-RC5

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

@@ -0,0 +1,142 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as r, Typography as n } from "@mui/joy";
+import { createStyles as H } from "./StandardScoreStateSkeleton.styles.js";
+import { isMobile as M, useInternalTheme as A, useSpacingScale as F, useFontFamily as y, useCornerRadius as V, useColors as p, useImageBackgroundGradient as B } from "../../../../functions/theme.js";
+import { WidgetTemplate as D } from "../../../../enums/enums.js";
+import { hexToRgb as O, stripHtmlTags as h } from "../../../../functions/helpers.js";
+import m from "../../../Rules.js";
+const z = ({
+  entity: o,
+  headline: a,
+  finalImage: l,
+  imagePosition: c = "left",
+  children: g,
+  rulesDisplay: x
+}) => {
+  var j;
+  const d = M(), u = A(), i = F(), f = y().primary, C = y().secondary, T = V(), t = ((j = o.branding) == null ? void 0 : j.colors) || null, b = (t == null ? void 0 : t.contentColor) || p().textColor, S = (t == null ? void 0 : t.secondaryColor) || p().textColor, k = (t == null ? void 0 : t.backgroundColor) || p().surfaceVariant, v = "60%", I = B(
+    D.STANDARD
+  ), s = H({
+    finalImage: l,
+    spacingScale: i,
+    borderRadius: T,
+    fontFamilyPrimary: f,
+    fontFamilySecondary: C,
+    textColor: b,
+    secondaryColor: S,
+    bgcolor: O(k || ""),
+    opacity: v,
+    brandingColors: t,
+    imagePosition: c,
+    darkTextColor: u.colorSchemes.dark.textColor,
+    imageBackgroundGradient: I,
+    isMobile: d
+  }), R = () => l ? /* @__PURE__ */ e.jsx(r, { sx: s.mobileHeadlineWithImage, children: /* @__PURE__ */ e.jsxs(r, { sx: s.mobileHeadlineContent, children: [
+    /* @__PURE__ */ e.jsxs(
+      r,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: i["3xs"]
+        },
+        children: [
+          /* @__PURE__ */ e.jsx(
+            n,
+            {
+              level: "body-sm",
+              sx: s.headlineTypographyMobileImage,
+              children: a
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            m,
+            {
+              rules: o.rules || "",
+              rulesDisplay: x,
+              isOverlayVariant: !1
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(r, { sx: s.contentContainer, children: [
+      /* @__PURE__ */ e.jsx(n, { sx: s.titleTypographyMobileImage, children: o.title }),
+      /* @__PURE__ */ e.jsx(n, { sx: s.descriptionTypographyMobileImage, children: h(o.description) })
+    ] })
+  ] }) }) : /* @__PURE__ */ e.jsx(r, { sx: s.mobileHeadlineWithoutImage, children: /* @__PURE__ */ e.jsxs(r, { children: [
+    /* @__PURE__ */ e.jsxs(
+      r,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: i["3xs"]
+        },
+        children: [
+          /* @__PURE__ */ e.jsx(n, { level: "body-sm", sx: s.headlineTypography, children: a }),
+          /* @__PURE__ */ e.jsx(
+            m,
+            {
+              rules: o.rules || "",
+              rulesDisplay: x,
+              isOverlayVariant: !1
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(r, { sx: s.contentContainer, children: [
+      /* @__PURE__ */ e.jsx(n, { level: "h4", sx: s.titleTypography, children: o.title }),
+      /* @__PURE__ */ e.jsx(n, { sx: s.descriptionTypography, children: h(o.description) })
+    ] })
+  ] }) });
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    d && R(),
+    c === "left" && l ? /* @__PURE__ */ e.jsx(r, { sx: s.imageContainerLeft, children: /* @__PURE__ */ e.jsx(r, { sx: s.imageSafeArea }) }) : null,
+    /* @__PURE__ */ e.jsxs(r, { sx: s.mainContentArea, children: [
+      !d && /* @__PURE__ */ e.jsx(r, { children: /* @__PURE__ */ e.jsxs(r, { sx: s.desktopHeadlineContainer, children: [
+        /* @__PURE__ */ e.jsxs(
+          r,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: i["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(
+                n,
+                {
+                  level: "body-sm",
+                  sx: s.headlineTypographyDesktop,
+                  children: a
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                m,
+                {
+                  rules: o.rules || "",
+                  rulesDisplay: x,
+                  isOverlayVariant: !1
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(r, { sx: s.contentContainer, children: [
+          /* @__PURE__ */ e.jsx(n, { level: "h4", sx: s.titleTypographyDesktop, children: o.title }),
+          /* @__PURE__ */ e.jsx(n, { sx: s.descriptionTypographyDesktop, children: h(o.description) })
+        ] })
+      ] }) }),
+      g
+    ] }),
+    c === "right" && l ? /* @__PURE__ */ e.jsx(r, { sx: s.imageContainerRight, children: /* @__PURE__ */ e.jsx(r, { sx: s.imageSafeArea }) }) : null
+  ] });
+};
+export {
+  z as default
+};

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

@@ -0,0 +1,203 @@
+const o = (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"
+      }
+    },
+    // Mobile headline content
+    mobileHeadlineContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      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
+    },
+    // 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: 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: ((t = e.brandingColors) == null ? void 0 : t.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: ((n = e.brandingColors) == null ? void 0 : n.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",
+      textAlign: "center"
+    }
+  };
+};
+export {
+  o as createStyles
+};

package/packages/common/src/components/Skeletons/Standard/SignIn/StandardSignInSkeleton.js

@@ -0,0 +1,157 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as r, Typography as n } from "@mui/joy";
+import { createStyles as W } from "./StandardSignInSkeleton.styles.js";
+import { isMobile as G, useInternalTheme as _, useSpacingScale as E, useFontFamily as b, useCornerRadius as L, useColors as u, useImageBackgroundGradient as N } from "../../../../functions/theme.js";
+import { WidgetTemplate as U } from "../../../../enums/enums.js";
+import { hexToRgb as V, getBrandingClickUrl as q, stripHtmlTags as y } from "../../../../functions/helpers.js";
+import f from "../../../Rules.js";
+const Z = ({
+  entity: o,
+  headline: p,
+  finalImage: t,
+  imagePosition: m = "left",
+  signInContent: h,
+  brandingContent: j,
+  rulesDisplay: g
+}) => {
+  var C, T;
+  const k = G(), I = _(), x = E(), v = b().primary, B = b().secondary, R = L(), l = ((C = o.branding) == null ? void 0 : C.colors) || null, i = ((T = o.branding) == null ? void 0 : T.urls) || null, S = (l == null ? void 0 : l.contentColor) || u().textColor, H = (l == null ? void 0 : l.secondaryColor) || u().textColor, M = (l == null ? void 0 : l.backgroundColor) || u().surfaceVariant, w = "60%", F = N(
+    U.STANDARD
+  ), s = W({
+    finalImage: t,
+    spacingScale: x,
+    borderRadius: R,
+    fontFamilyPrimary: v,
+    fontFamilySecondary: B,
+    textColor: S,
+    secondaryColor: H,
+    bgcolor: V(M || ""),
+    opacity: w,
+    brandingColors: l,
+    imagePosition: m,
+    darkTextColor: I.colorSchemes.dark.textColor,
+    imageBackgroundGradient: F,
+    isMobile: k
+  }), c = q(
+    i == null ? void 0 : i.primaryUrl,
+    i == null ? void 0 : i.secondaryUrl,
+    "image"
+  ), A = (a, d) => typeof window > "u" ? c ? /* @__PURE__ */ e.jsx(
+    r,
+    {
+      component: "a",
+      href: c,
+      target: "_blank",
+      sx: d,
+      children: a
+    }
+  ) : /* @__PURE__ */ e.jsx(r, { sx: d, children: a }) : c ? /* @__PURE__ */ e.jsx(
+    r,
+    {
+      sx: { ...d, cursor: "pointer" },
+      onClick: () => window.open(c, "_blank"),
+      children: a
+    }
+  ) : /* @__PURE__ */ e.jsx(r, { sx: d, children: a }), D = () => t ? A(
+    /* @__PURE__ */ e.jsxs(r, { sx: s.mobileHeadlineContent, children: [
+      /* @__PURE__ */ e.jsxs(r, { children: [
+        /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", alignItems: "center", gap: x["3xs"] }, children: [
+          /* @__PURE__ */ e.jsx(
+            n,
+            {
+              level: "body-sm",
+              sx: s.headlineTypographyMobileImage,
+              children: p
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            f,
+            {
+              rulesDisplay: g,
+              rules: o.rules || ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsxs(r, { sx: s.contentContainer, children: [
+          /* @__PURE__ */ e.jsx(
+            n,
+            {
+              level: "body-lg",
+              sx: s.titleTypographyMobileImage,
+              children: o.title
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            n,
+            {
+              level: "body-md",
+              sx: s.descriptionTypographyMobileImage,
+              children: y(o.description)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs(r, { sx: s.signInButtonContainer, children: [
+        h,
+        j
+      ] })
+    ] }),
+    s.mobileHeadlineWithImage
+  ) : /* @__PURE__ */ e.jsxs(r, { sx: s.mobileHeadlineWithoutImage, children: [
+    /* @__PURE__ */ e.jsxs(r, { children: [
+      /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", alignItems: "center", gap: x["3xs"] }, children: [
+        /* @__PURE__ */ e.jsx(n, { level: "body-sm", sx: s.headlineTypography, children: p }),
+        /* @__PURE__ */ e.jsx(
+          f,
+          {
+            rulesDisplay: g,
+            rules: o.rules || ""
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs(r, { sx: s.contentContainer, children: [
+        /* @__PURE__ */ e.jsx(n, { level: "h4", sx: s.titleTypography, children: o.title }),
+        /* @__PURE__ */ e.jsx(n, { level: "body-md", sx: s.descriptionTypography, children: y(o.description) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs(r, { sx: s.signInButtonContainer, children: [
+      h,
+      j
+    ] })
+  ] });
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    D(),
+    t && m === "left" && /* @__PURE__ */ e.jsx(r, { sx: s.imageContainerLeft, children: /* @__PURE__ */ e.jsx("img", { src: t, alt: "Illustration", style: s.image }) }),
+    /* @__PURE__ */ e.jsx(r, { sx: s.mainContentArea, children: /* @__PURE__ */ e.jsxs(r, { sx: s.desktopHeadlineContainer, children: [
+      /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: x["3xs"] }, children: [
+        /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", alignItems: "center", gap: x["3xs"] }, children: [
+          /* @__PURE__ */ e.jsx(n, { level: "body-sm", sx: s.headlineTypography, children: p }),
+          /* @__PURE__ */ e.jsx(
+            f,
+            {
+              rulesDisplay: g,
+              rules: o.rules || ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsxs(r, { sx: s.contentContainer, children: [
+          /* @__PURE__ */ e.jsx(n, { level: "h4", sx: s.titleTypographyDesktop, children: o.title }),
+          /* @__PURE__ */ e.jsx(
+            n,
+            {
+              level: "body-md",
+              sx: s.descriptionTypographyDesktop,
+              children: y(o.description)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx(r, { sx: s.signInButtonContainer, children: h }),
+      j
+    ] }) }),
+    t && m === "right" && /* @__PURE__ */ e.jsx(r, { sx: s.imageContainerRight, children: /* @__PURE__ */ e.jsx("img", { src: t, alt: "Illustration", style: s.image }) })
+  ] });
+};
+export {
+  Z as default
+};

package/packages/common/src/components/Skeletons/Standard/SignIn/StandardSignInSkeleton.styles.js

@@ -0,0 +1,194 @@
+const o = (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,
+      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)
+    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)
+    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
+    titleTypographyDesktop: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Desktop description typography
+    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: e.isMobile ? "none" : "flex",
+      flexDirection: "column",
+      p: e.spacingScale.md,
+      gap: e.spacingScale["2xl"]
+    },
+    // Desktop headline container
+    desktopHeadlineContainer: {
+      display: e.isMobile ? "none" : "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.xl,
+      textAlign: "center"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Sign in button container
+    signInButtonContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: e.spacingScale["2xl"]
+    },
+    // Branding container
+    brandingContainer: {
+      px: e.spacingScale.md
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    }
+  };
+};
+export {
+  o as createStyles
+};