fansunited-widgets-cdn 0.0.85 → 0.0.86-RC2

package/chunks/OverlayScoreStateSkeleton-C9FUhcnd-DMFELrvA.js

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