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

package/packages/common/src/components/Skeletons/Standard/StandardSkeleton.js

@@ -0,0 +1,238 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as s, Typography as n, AspectRatio as v } from "@mui/joy";
+import { isMobile as L, useInternalTheme as N, useSpacingScale as U, useFontFamily as R, useCornerRadius as q, useColors as k, useImageBackgroundGradient as z } from "../../../functions/theme.js";
+import { hexToRgb as E, getBrandingClickUrl as J, stripHtmlTags as j } 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 K } from "../../../enums/enums.js";
+import g from "../../Rules.js";
+import "react";
+import "../../../providers/ConstantsProvider.js";
+import { createStyles as Q } from "./StandardSkeleton.styles.js";
+import "../../../providers/ContainerProvider.js";
+const te = ({
+  entity: o,
+  headline: c,
+  finalImage: x,
+  imagePosition: u = "left",
+  children: A,
+  embedCodeContainerRef: d,
+  hasEmbedCode: C = !1,
+  filterScreenContent: l,
+  rulesDisplay: p
+}) => {
+  var b, I;
+  const h = L(), H = N(), t = U(), M = R().primary, F = R().secondary, w = q(), i = ((b = o.branding) == null ? void 0 : b.colors) || null, a = ((I = o.branding) == null ? void 0 : I.urls) || null, S = (i == null ? void 0 : i.contentColor) || k().textColor, V = (i == null ? void 0 : i.secondaryColor) || k().textColor, B = (i == null ? void 0 : i.backgroundColor) || k().surfaceVariant, D = "60%", O = z(
+    K.STANDARD
+  ), r = Q({
+    finalImage: x,
+    spacingScale: t,
+    borderRadius: w,
+    fontFamilyPrimary: M,
+    fontFamilySecondary: F,
+    textColor: S,
+    secondaryColor: V,
+    bgcolor: E(B || ""),
+    opacity: D,
+    brandingColors: i,
+    imagePosition: u,
+    darkTextColor: H.colorSchemes.dark.textColor,
+    imageBackgroundGradient: O,
+    isMobile: h
+  }), m = J(
+    a == null ? void 0 : a.primaryUrl,
+    a == null ? void 0 : a.secondaryUrl,
+    "image"
+  ), W = () => {
+    m && window.open(m, "_blank", "noopener,noreferrer");
+  }, y = (f, T) => m ? typeof window > "u" ? /* @__PURE__ */ e.jsx(
+    s,
+    {
+      component: "a",
+      href: m,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        ...T,
+        cursor: "pointer",
+        textDecoration: "none"
+      },
+      children: f
+    }
+  ) : /* @__PURE__ */ e.jsx(
+    s,
+    {
+      sx: {
+        ...T,
+        cursor: "pointer"
+      },
+      onClick: W,
+      children: f
+    }
+  ) : /* @__PURE__ */ e.jsx(s, { sx: T, children: f }), G = () => C && d ? /* @__PURE__ */ e.jsxs(s, { sx: r.mobileHeadlineWithoutImage, children: [
+    /* @__PURE__ */ e.jsxs(s, { children: [
+      /* @__PURE__ */ e.jsxs(
+        s,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: t["3xs"]
+          },
+          children: [
+            /* @__PURE__ */ e.jsx(n, { level: "body-sm", sx: r.headlineTypography, children: c }),
+            /* @__PURE__ */ e.jsx(
+              g,
+              {
+                rules: o.rules || "",
+                rulesDisplay: p,
+                isOverlayVariant: !1
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(s, { sx: r.contentContainer, children: [
+        /* @__PURE__ */ e.jsx(n, { level: "h4", sx: r.titleTypography, children: o.title }),
+        /* @__PURE__ */ e.jsx(n, { sx: r.descriptionTypography, children: j(o.description) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx(v, { ratio: "16/9", sx: r.aspectRatioContainer, children: /* @__PURE__ */ e.jsx(s, { ref: d }) })
+  ] }) : x ? y(
+    /* @__PURE__ */ e.jsxs(s, { sx: r.mobileHeadlineContent, children: [
+      /* @__PURE__ */ e.jsxs(s, { children: [
+        /* @__PURE__ */ e.jsxs(
+          s,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: t["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(
+                n,
+                {
+                  level: "body-sm",
+                  sx: r.headlineTypographyMobileImage,
+                  children: c
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                g,
+                {
+                  rules: o.rules || "",
+                  rulesDisplay: p,
+                  isOverlayVariant: !1
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(s, { sx: r.contentContainer, children: [
+          /* @__PURE__ */ e.jsx(n, { sx: r.titleTypographyMobileImage, children: o.title }),
+          /* @__PURE__ */ e.jsx(n, { sx: r.descriptionTypographyMobileImage, children: j(o.description) })
+        ] })
+      ] }),
+      l && /* @__PURE__ */ e.jsx(s, { children: l })
+    ] }),
+    r.mobileHeadlineWithImage
+  ) : /* @__PURE__ */ e.jsxs(s, { sx: r.mobileHeadlineWithoutImage, children: [
+    /* @__PURE__ */ e.jsxs(s, { children: [
+      /* @__PURE__ */ e.jsxs(
+        s,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: t["3xs"]
+          },
+          children: [
+            /* @__PURE__ */ e.jsx(n, { level: "body-sm", sx: r.headlineTypography, children: c }),
+            /* @__PURE__ */ e.jsx(
+              g,
+              {
+                rules: o.rules || "",
+                rulesDisplay: p,
+                isOverlayVariant: !1
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(s, { sx: r.contentContainer, children: [
+        /* @__PURE__ */ e.jsx(n, { level: "h4", sx: r.titleTypography, children: o.title }),
+        /* @__PURE__ */ e.jsx(n, { sx: r.descriptionTypography, children: j(o.description) })
+      ] })
+    ] }),
+    l && /* @__PURE__ */ e.jsx(s, { children: l })
+  ] }), _ = !(h && l);
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    h && G(),
+    u === "left" && x ? y(
+      /* @__PURE__ */ e.jsx(s, { sx: r.imageSafeArea }),
+      r.imageContainerLeft
+    ) : null,
+    _ && /* @__PURE__ */ e.jsxs(s, { sx: r.mainContentArea, children: [
+      !h && /* @__PURE__ */ e.jsx(s, { children: /* @__PURE__ */ e.jsxs(s, { sx: r.desktopHeadlineContainer, children: [
+        /* @__PURE__ */ e.jsxs(
+          s,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ e.jsxs(
+                s,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: t["3xs"]
+                  },
+                  children: [
+                    /* @__PURE__ */ e.jsx(
+                      n,
+                      {
+                        level: "body-sm",
+                        sx: r.headlineTypographyDesktop,
+                        children: c
+                      }
+                    ),
+                    /* @__PURE__ */ e.jsx(
+                      g,
+                      {
+                        rules: o.rules || "",
+                        rulesDisplay: p,
+                        isOverlayVariant: !1
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e.jsxs(s, { sx: r.contentContainer, children: [
+                /* @__PURE__ */ e.jsx(n, { level: "h4", sx: r.titleTypographyDesktop, children: o.title }),
+                /* @__PURE__ */ e.jsx(n, { sx: r.descriptionTypographyDesktop, children: j(o.description) })
+              ] })
+            ]
+          }
+        ),
+        C && d ? /* @__PURE__ */ e.jsx(s, { sx: { px: t.md }, children: /* @__PURE__ */ e.jsx(v, { ratio: "16/9", sx: r.aspectRatioContainer, children: /* @__PURE__ */ e.jsx(s, { ref: d }) }) }) : l ? /* @__PURE__ */ e.jsx(s, { children: l }) : /* @__PURE__ */ e.jsx(e.Fragment, {})
+      ] }) }),
+      A
+    ] }),
+    u === "right" && x ? y(
+      /* @__PURE__ */ e.jsx(s, { sx: r.imageSafeArea }),
+      r.imageContainerRight
+    ) : null
+  ] });
+};
+export {
+  te as default
+};

package/packages/common/src/components/Skeletons/Standard/StandardSkeleton.styles.js

@@ -0,0 +1,211 @@
+const a = (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,
+      gap: e.spacingScale["2xl"],
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between"
+    },
+    // Mobile headline without image
+    mobileHeadlineWithoutImage: {
+      display: e.isMobile ? "flex" : "none",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      gap: e.spacingScale["2xl"]
+    },
+    // Headline typography (mobile with image)
+    headlineTypographyMobileImage: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((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",
+      gap: e.spacingScale["2xl"],
+      textAlign: "center"
+    },
+    // Aspect ratio container (for embed code)
+    aspectRatioContainer: {
+      borderRadius: e.borderRadius.md,
+      overflow: "hidden"
+    }
+  };
+};
+export {
+  a as createStyles
+};

package/packages/common/src/components/Spinner.js

@@ -0,0 +1,36 @@
+import { j as t } from "../../../../node_modules/react/jsx-runtime.js";
+import { Box as s, CircularProgress as o } from "@mui/joy";
+import { useColors as r } from "../functions/theme.js";
+const a = ({ my: e }) => /* @__PURE__ */ t.jsx(
+  s,
+  {
+    sx: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      width: "100%",
+      height: "100%",
+      my: e
+    },
+    children: /* @__PURE__ */ t.jsx(
+      o,
+      {
+        slotProps: {
+          track: {
+            sx: {
+              stroke: r().palette.neutral.softBg
+            }
+          },
+          progress: {
+            sx: {
+              stroke: r().palette.neutral.solidBg
+            }
+          }
+        }
+      }
+    )
+  }
+);
+export {
+  a as default
+};