fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC6

package/chunks/OverlayScoreStateSkeleton-C9FUhcnd.js

@@ -0,0 +1,147 @@
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { Box as l, Typography as a } from "@mui/joy";
+import { i as k, u as F, a as z, s as I } from "./Portal-BWqqFvVm.js";
+import { R as v } from "./NotFoundSkeleton-BYJTzYJR.js";
+const R = (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
+  }
+}), w = ({
+  entity: e,
+  headline: d,
+  backgroundImage: m,
+  imageBackgroundGradient: x,
+  children: h,
+  rulesDisplay: g
+}) => {
+  var s;
+  const f = k(), n = F(), c = z(), o = ((s = e.branding) == null ? void 0 : s.colors) || null, y = (o == null ? void 0 : o.secondaryColor) || n.colorSchemes.dark.textSecondary, u = n.customFontFamily.light.primary, S = n.customFontFamily.light.secondary, b = n.customRadius.light.md, p = n.border.light.size, C = (o == null ? void 0 : o.borderColor) || n.colorSchemes.dark.secondaryContainer, T = n.colorSchemes.dark.textColor, t = R({
+    spacingScale: c,
+    brandingColors: o,
+    secondaryColor: y,
+    fontFamilyPrimary: u,
+    fontFamilySecondary: S,
+    mdBorderRadius: b,
+    borderSize: p,
+    borderColor: C,
+    darkTextColor: T,
+    backgroundImage: m,
+    imageBackgroundGradient: x,
+    isMobile: f
+  });
+  return /* @__PURE__ */ r(l, { sx: t.mainContainer, children: [
+    /* @__PURE__ */ i(l, { children: /* @__PURE__ */ i(l, { sx: t.headlineSection, children: /* @__PURE__ */ i(l, { sx: t.headlineContent, children: /* @__PURE__ */ r(l, { sx: t.headlineContentInner, children: [
+      /* @__PURE__ */ r(
+        l,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: c["3xs"]
+          },
+          children: [
+            /* @__PURE__ */ i(a, { level: "body-sm", sx: t.headlineText, children: d }),
+            /* @__PURE__ */ i(
+              v,
+              {
+                rulesDisplay: g,
+                isOverlayVariant: !0,
+                rules: e.rules || ""
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(l, { sx: t.contentContainer, children: [
+        /* @__PURE__ */ i(a, { level: "h4", sx: t.titleText, children: e.title }),
+        /* @__PURE__ */ i(a, { level: "body-lg", sx: t.descriptionText, children: I(e.description) })
+      ] })
+    ] }) }) }) }),
+    h
+  ] });
+};
+export {
+  w as O
+};