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

package/packages/poll-vote/src/components/Variants/Overlay/PollOverlayVariant.js

@@ -0,0 +1,137 @@
+import { j as t } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as a, AspectRatio as ce, Typography as N, Button as de } from "@mui/joy";
+import M from "react";
+import { useSpacingScale as ue, useInternalTheme as ge, isMobile as _, isLarge as he } from "../../../../../common/src/functions/theme.js";
+import { extractBrandingProperties as fe } from "../../../../../common/src/functions/helpers.js";
+import "../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as xe } from "../../../../../common/src/enums/enums.js";
+import { useConstantContext as be } from "../../../../../common/src/hooks/useConstantContext.js";
+import { ConstantsContext as ye } from "../../../../../common/src/providers/ConstantsProvider.js";
+import Ce from "../../../../../common/src/components/Skeletons/Overlay/OverlaySkeleton.js";
+import { useImageVariant as je } from "../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import Pe from "../../../assets/default-quiz-bg.png.js";
+import Se from "../../../assets/default-quiz-bg-vertical.jpg.js";
+import Te from "../../Shared/PresentedBy.js";
+import ke from "../../Leads/CollectLeadWrapper.js";
+import { useEmbedCode as Ie } from "../../../hooks/useEmbedCodeContainer.js";
+import { createStyles as pe } from "./PollOverlayVariant.styles.js";
+import Le from "../../Shared/Answers/PollOptions.js";
+import { usePollOptionsImages as Re } from "../../../hooks/usePollOptionsImages.js";
+import { useTranslation as ve } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const Ze = (e) => {
+  var d, u, g, h, f, x, b, y, C, j, P, S, T, k, I, p, L, R, v, B, D, F, O, V, E, U;
+  const [s, m] = M.useState(
+    ((d = e.leads) == null ? void 0 : d.position) === "before" && e.poll.authRequirement === "LEAD"
+  );
+  M.useEffect(() => {
+    var n;
+    m(
+      ((n = e.leads) == null ? void 0 : n.position) === "before" && e.poll.authRequirement === "LEAD" || !1
+    );
+  }, [(u = e.leads) == null ? void 0 : u.position, e.poll.authRequirement]);
+  const { optionsLayout: G } = be(ye), Y = ue(), l = ge(), z = Re(e.options), { t: r } = ve(), H = _(), J = he(), K = Ie(e.poll.embedCode), Q = !s && !!e.poll.embedCode, X = ((g = e.leads) == null ? void 0 : g.position) === "after" ? r("poll.buttons.continue") : r("poll.buttons.vote"), { brandingImage: Z, brandingColors: o, brandingLogo: $ } = fe(e.poll.branding || null), ee = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : _() ? Se : Pe, te = Z || je(
+    {
+      images: e.poll.images,
+      imagePlaceholder: ee
+    },
+    xe.OVERLAY
+  ), c = l.customRadius.dark.sm, le = (o == null ? void 0 : o.backgroundColor) || ((f = (h = l.colorSchemes) == null ? void 0 : h.dark) == null ? void 0 : f.surfaceVariant), oe = (b = (x = l.customRadius) == null ? void 0 : x.light) == null ? void 0 : b.xl, ie = (o == null ? void 0 : o.primaryColor) || ((P = (j = (C = (y = l.colorSchemes) == null ? void 0 : y.light) == null ? void 0 : C.palette) == null ? void 0 : j.primary) == null ? void 0 : P.plainColor), ae = (I = (k = (T = (S = l.colorSchemes) == null ? void 0 : S.light) == null ? void 0 : T.palette) == null ? void 0 : k.primary) == null ? void 0 : I.onPrimary, ne = l.customFontFamily.dark.primary, se = l.colorSchemes.dark.textColor, i = pe({
+    spacingScale: Y,
+    smBorderRadius: c,
+    contentBgColor: le,
+    buttonRadius: oe,
+    primaryColor: ie,
+    onPrimaryColor: ae,
+    fontFamilyPrimary: ne,
+    darkTextColor: se,
+    isMobile: H
+  }), re = () => {
+    m(!1);
+  }, me = () => {
+    var n, w, W, A, q;
+    return /* @__PURE__ */ t.jsx(
+      Te,
+      {
+        brandingLogo: $,
+        textColor: l.colorSchemes.dark.textColor,
+        label: ((n = e.poll.labels) == null ? void 0 : n.sponsor) || null,
+        primaryUrl: (W = (w = e.poll.branding) == null ? void 0 : w.urls) == null ? void 0 : W.primaryUrl,
+        secondaryUrl: (q = (A = e.poll.branding) == null ? void 0 : A.urls) == null ? void 0 : q.secondaryUrl
+      }
+    );
+  };
+  return /* @__PURE__ */ t.jsx(
+    Ce,
+    {
+      entity: e.poll,
+      headline: r("poll.headline"),
+      finalImage: te,
+      rulesDisplay: e.rulesDisplay,
+      children: /* @__PURE__ */ t.jsxs(a, { sx: i.mainContentSection, children: [
+        /* @__PURE__ */ t.jsx(a, { sx: i.contentContainerWithBackdrop, children: s ? /* @__PURE__ */ t.jsx(
+          ke,
+          {
+            sdk: e.sdk,
+            startGame: re,
+            contentId: e.poll.id,
+            contentName: e.poll.title,
+            brandingColors: (p = e.poll.branding) == null ? void 0 : p.colors,
+            brandingUrls: (L = e.poll.branding) == null ? void 0 : L.urls,
+            campaignId: (R = e.leads) == null ? void 0 : R.campaignId,
+            campaignName: (v = e.leads) == null ? void 0 : v.campaignName,
+            fields: (B = e.leads) == null ? void 0 : B.fields,
+            leadTitle: (D = e.poll.labels) == null ? void 0 : D.leadTitle,
+            leadDescription: (F = e.poll.labels) == null ? void 0 : F.leadDescription,
+            leadCta: (O = e.poll.labels) == null ? void 0 : O.leadCta,
+            leadSuccessTitle: (V = e.poll.labels) == null ? void 0 : V.leadSuccessTitle,
+            leadSuccessDescription: (E = e.poll.labels) == null ? void 0 : E.leadSuccessDescription,
+            syncWithProfile: (U = e.leads) == null ? void 0 : U.syncWithProfile
+          }
+        ) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          Q && /* @__PURE__ */ t.jsx(a, { sx: { overflow: "hidden", borderRadius: c }, children: /* @__PURE__ */ t.jsx(
+            ce,
+            {
+              ratio: "16/9",
+              slotProps: { content: { sx: { height: "100%" } } },
+              children: /* @__PURE__ */ t.jsx(a, { ref: K })
+            }
+          ) }),
+          e.poll.alternativeTitle ? /* @__PURE__ */ t.jsx(a, { sx: i.alternativeTitleSection, children: /* @__PURE__ */ t.jsx(N, { level: "body-lg", sx: i.alternativeTitleText, children: e.poll.alternativeTitle }) }) : /* @__PURE__ */ t.jsx(t.Fragment, {}),
+          /* @__PURE__ */ t.jsx(
+            Le,
+            {
+              options: e.options || [],
+              answerPoll: e.answerPoll,
+              selectedOptions: e.selectedOptions,
+              optionsLayout: J ? "column" : G ?? "row",
+              brandingColors: o,
+              optionsImages: z,
+              multipleChoice: e.poll.multipleChoice,
+              maxChoices: e.optionChoices,
+              isVoting: e.isVoting
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ t.jsxs(a, { sx: i.bottomFooterContainer, children: [
+          me(),
+          !s && /* @__PURE__ */ t.jsx(
+            de,
+            {
+              variant: "soft",
+              sx: i.nextButton,
+              onClick: e.voteForPoll,
+              loading: e.isVoting,
+              disabled: e.selectedOptions.length === 0 || e.isVoting,
+              children: /* @__PURE__ */ t.jsx(N, { sx: i.nextButtonText, children: X })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  Ze as default
+};

package/packages/poll-vote/src/components/Variants/Overlay/PollOverlayVariant.styles.js

@@ -0,0 +1,105 @@
+const o = (e) => ({
+  // Main content section (non-filter screen)
+  mainContentSection: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px"
+  },
+  // Content container with backdrop
+  contentContainerWithBackdrop: {
+    borderRadius: e.smBorderRadius,
+    p: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.5,
+      borderRadius: "inherit",
+      zIndex: 0
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  },
+  // Alternative title section
+  alternativeTitleSection: {
+    display: "flex",
+    gap: "8px",
+    alignItems: "flex-start",
+    justifyContent: "center"
+  },
+  // Alternative title text
+  alternativeTitleText: {
+    fontFamily: e.fontFamilyPrimary,
+    lineHeight: "150%",
+    letterSpacing: "0.15px",
+    fontWeight: 500,
+    fontSize: "1.25em",
+    textAlign: "center",
+    color: e.darkTextColor
+  },
+  // Bottom footer container
+  bottomFooterContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: e.isMobile ? "center" : "space-between",
+    flexDirection: e.isMobile ? "column-reverse" : "row",
+    gap: e.spacingScale.md
+  },
+  // Next button
+  nextButton: {
+    borderRadius: e.buttonRadius,
+    py: "10px",
+    px: "16px",
+    bgcolor: e.primaryColor,
+    color: e.onPrimaryColor,
+    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+    transform: "scale(1)",
+    ml: e.isMobile ? 0 : { md: "auto" },
+    "&:hover": {
+      bgcolor: e.primaryColor,
+      transform: "scale(1.02)",
+      boxShadow: "var(--joy-shadow-md)"
+    },
+    "&:active": {
+      color: e.onPrimaryColor,
+      transform: "scale(0.98)",
+      boxShadow: "var(--joy-shadow-md)"
+    },
+    "&:disabled": {
+      bgcolor: e.primaryColor,
+      color: e.onPrimaryColor,
+      opacity: "34%",
+      boxShadow: "var(--joy-shadow-md)"
+    },
+    "--Icon-color": e.onPrimaryColor,
+    fontSize: "0.9375em",
+    boxShadow: "var(--joy-shadow-md)"
+  },
+  // Next button text
+  nextButtonText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: e.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  }
+});
+export {
+  o as createStyles
+};

package/packages/poll-vote/src/components/Variants/Overlay/ScoreState/PollOverlayScoreState.js

@@ -0,0 +1,107 @@
+import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as a, Typography as m, Button as P } from "@mui/joy";
+import { useInternalTheme as O, useSpacingScale as V, isLarge as L, useImageBackgroundGradient as F, isMobile as M } from "../../../../../../common/src/functions/theme.js";
+import { extractBrandingProperties as U, sanitizeBackgroundUrl as E } from "../../../../../../common/src/functions/helpers.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as d } from "../../../../../../common/src/enums/enums.js";
+import W from "../../../../../../common/src/components/AdditionalCTA.js";
+import "react";
+import { useConstantContext as w } from "../../../../../../common/src/hooks/useConstantContext.js";
+import { ConstantsContext as z } from "../../../../../../common/src/providers/ConstantsProvider.js";
+import D from "../../../../../../common/src/components/Skeletons/Overlay/ScoreState/OverlayScoreStateSkeleton.js";
+import G from "../../../../../../../node_modules/@mui/icons-material/esm/Replay.js";
+import { useImageVariant as Y } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import q from "../../../../assets/default-quiz-bg.png.js";
+import H from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import J from "../../../Shared/PresentedBy.js";
+import { createStyles as K } from "./PollOverlayScoreState.styles.js";
+import N from "../../../Shared/AlertMessage.js";
+import { usePollOptionsImages as Q } from "../../../../hooks/usePollOptionsImages.js";
+import X from "../../../Shared/Results/PollOptionsResults.js";
+import { useTranslation as Z } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const jt = (e) => {
+  const n = O(), u = V(), { t: i } = Z(), x = L(), g = F(
+    d.OVERLAY
+  ), { optionsLayout: h } = w(z), { brandingImage: y, brandingColors: r, brandingLogo: p } = U(e.poll.branding), f = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : M() ? H : q, C = y || Y(
+    {
+      images: e.poll.images,
+      imagePlaceholder: f
+    },
+    d.OVERLAY
+  ), S = E(C), j = Q(e.poll.options), A = (r == null ? void 0 : r.secondaryColor) || n.colorSchemes.dark.textSecondary, T = n.colorSchemes.dark.secondaryContainer, k = n.colorSchemes.dark.textPrimary, I = n.customFontFamily.light.primary, B = n.customRadius.light.md, b = n.customRadius.light.xl, v = (r == null ? void 0 : r.backgroundColor) || n.colorSchemes.dark.surfaceVariant, o = K({
+    spacingScale: u,
+    secondaryColor: A,
+    secondaryContainer: T,
+    textPrimary: k,
+    fontFamilyPrimary: I,
+    mdBorderRadius: B,
+    xlBorderRadius: b,
+    contentBgColor: v,
+    onSurfaceColor: n.colorSchemes.dark.onSurface,
+    surfaceVariantColor: n.colorSchemes.dark.surfaceVariant,
+    darkTextColor: n.colorSchemes.dark.textColor
+  }), R = () => {
+    var l, s, c;
+    return /* @__PURE__ */ t.jsxs(a, { sx: o.mainContentWrapper, children: [
+      e.isUnauthorized ? /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+        N,
+        {
+          variant: "error",
+          title: i("common.authentication.accessRequired"),
+          message: i("common.authentication.invalidOrMissingAuth")
+        }
+      ) }) : /* @__PURE__ */ t.jsx(a, { sx: o.resultsContainer, children: /* @__PURE__ */ t.jsxs(a, { sx: o.resultsWrapper, children: [
+        e.poll.alternativeTitle ? /* @__PURE__ */ t.jsx(a, { sx: o.alternativeTitleSection, children: /* @__PURE__ */ t.jsx(m, { level: "body-lg", sx: o.alternativeTitleText, children: e.poll.alternativeTitle }) }) : /* @__PURE__ */ t.jsx(t.Fragment, {}),
+        /* @__PURE__ */ t.jsx(a, { sx: { width: "100%" }, children: /* @__PURE__ */ t.jsx(
+          X,
+          {
+            options: e.poll.options,
+            selectedOptions: ((l = e.userVote) == null ? void 0 : l.optionIds) || [],
+            optionsLayout: x ? "column" : h ?? "row",
+            optionsImages: j,
+            brandingColors: ((s = e.poll.branding) == null ? void 0 : s.colors) || null
+          }
+        ) })
+      ] }) }),
+      (!e.maxAttemptsReached || e.additionalCTA !== void 0) && /* @__PURE__ */ t.jsx(a, { sx: o.ctaSection, children: /* @__PURE__ */ t.jsxs(a, { sx: o.buttonsContainer, children: [
+        !e.maxAttemptsReached && /* @__PURE__ */ t.jsx(P, { sx: o.playAgainButton, onClick: e.voteAgain, children: /* @__PURE__ */ t.jsxs(a, { sx: o.playAgainButtonContent, children: [
+          /* @__PURE__ */ t.jsx(G, { sx: o.playAgainIcon }),
+          /* @__PURE__ */ t.jsx(m, { sx: o.playAgainText, children: i("poll.buttons.voteAgain") })
+        ] }) }),
+        /* @__PURE__ */ t.jsx(
+          W,
+          {
+            additionalCTA: e.additionalCTA,
+            buttonStyle: o.additionalCTAButton,
+            buttonContentStyle: o.additionalCTAButtonContent,
+            textStyle: o.additionalCTAText
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ t.jsx(
+        J,
+        {
+          brandingLogo: p,
+          textColor: n.colorSchemes.dark.textColor,
+          label: ((c = e.poll.labels) == null ? void 0 : c.sponsor) || null
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ t.jsx(
+    D,
+    {
+      entity: e.poll,
+      headline: i("poll.headline"),
+      backgroundImage: S,
+      imageBackgroundGradient: g,
+      rulesDisplay: e.rulesDisplay,
+      children: R()
+    }
+  );
+};
+export {
+  jt as default
+};

package/packages/poll-vote/src/components/Variants/Overlay/ScoreState/PollOverlayScoreState.styles.js

@@ -0,0 +1,178 @@
+const t = (e) => ({
+  // Main content wrapper
+  mainContentWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+    zIndex: 10
+  },
+  resultsContainer: {
+    borderRadius: e.mdBorderRadius,
+    p: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.25,
+      borderRadius: "inherit",
+      zIndex: 0,
+      backdropFilter: "blur(4px)"
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  },
+  resultsWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch"
+  },
+  alternativeTitleSection: {
+    display: "flex",
+    gap: "8px",
+    alignItems: "flex-start",
+    justifyContent: "center"
+  },
+  alternativeTitleText: {
+    fontFamily: e.fontFamilyPrimary,
+    lineHeight: "150%",
+    letterSpacing: "0.15px",
+    fontWeight: 500,
+    fontSize: "1.25em",
+    textAlign: "center",
+    color: e.darkTextColor
+  },
+  ctaSection: {
+    borderRadius: e.mdBorderRadius,
+    py: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.25,
+      borderRadius: "inherit",
+      zIndex: 0,
+      backdropFilter: "blur(4px)"
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  },
+  // Buttons container
+  buttonsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.md
+  },
+  // Play again button
+  playAgainButton: {
+    display: "flex",
+    minHeight: "48px",
+    py: "12px",
+    pr: "24px",
+    pl: "16px",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: e.xlBorderRadius,
+    bgcolor: e.onSurfaceColor,
+    "&:hover": {
+      bgcolor: e.surfaceVariantColor
+    },
+    fontSize: "0.9375em"
+  },
+  // Play again button content
+  playAgainButtonContent: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    alignSelf: "stretch"
+  },
+  // Play again icon
+  playAgainIcon: {
+    display: "flex",
+    width: "24px",
+    height: "24px",
+    justifyContent: "center",
+    alignItems: "center",
+    color: e.textPrimary
+  },
+  // Play again text
+  playAgainText: {
+    color: e.textPrimary,
+    textAlign: "center",
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "0.9375em",
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  },
+  // Additional CTA button (secondary style)
+  additionalCTAButton: {
+    display: "flex",
+    py: e.spacingScale.sm,
+    px: e.spacingScale.md,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: e.xlBorderRadius,
+    bgcolor: e.secondaryContainer,
+    "&:hover": {
+      bgcolor: e.secondaryContainer,
+      opacity: 0.9
+    },
+    fontSize: "0.9375em"
+  },
+  // Additional CTA button content
+  additionalCTAButtonContent: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px"
+  },
+  // Additional CTA text
+  additionalCTAText: {
+    color: e.secondaryColor,
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "0.9375em",
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  }
+});
+export {
+  t as createStyles
+};

package/packages/poll-vote/src/components/Variants/Overlay/SignIn/PollOverlaySignIn.js

@@ -0,0 +1,120 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Button as l, Typography as r, Box as _ } from "@mui/joy";
+import { useInternalTheme as G, isMobile as Y, useImageBackgroundGradient as z } from "../../../../../../common/src/functions/theme.js";
+import { extractBrandingProperties as M, sanitizeBackgroundUrl as W } from "../../../../../../common/src/functions/helpers.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as P } from "../../../../../../common/src/enums/enums.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import q from "../../../../../../common/src/components/Skeletons/Overlay/SignIn/OverlaySignInSkeleton.js";
+import { useImageVariant as H } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import J from "../../../../assets/default-quiz-bg.png.js";
+import K from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import N from "../../../Shared/PresentedBy.js";
+import { createStyles as Q } from "./PollOverlaySignIn.styles.js";
+import { useTranslation as X } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const xn = (n) => {
+  var s, m, g, c, u, d, I, f, x, C, h;
+  const o = G(), { t: i } = X(), S = Y(), L = z(
+    P.OVERLAY
+  ), { brandingImage: p, brandingColors: a, brandingLogo: v } = M(n.poll.branding || null), w = n.defaultImagePlaceholderUrl ? n.defaultImagePlaceholderUrl : S ? K : J, R = p || H(
+    {
+      images: n.poll.images,
+      imagePlaceholder: w
+    },
+    P.OVERLAY
+  ), O = W(R), D = (m = (s = o.customRadius) == null ? void 0 : s.light) == null ? void 0 : m.xl, E = (a == null ? void 0 : a.primaryColor) || ((d = (u = (c = (g = o.colorSchemes) == null ? void 0 : g.light) == null ? void 0 : c.palette) == null ? void 0 : u.primary) == null ? void 0 : d.plainColor), F = (C = (x = (f = (I = o.colorSchemes) == null ? void 0 : I.light) == null ? void 0 : f.palette) == null ? void 0 : x.primary) == null ? void 0 : C.onPrimary, U = o.customFontFamily.dark.primary, t = Q({
+    buttonRadius: D,
+    primaryColor: E,
+    onPrimaryColor: F,
+    fontFamilyPrimary: U
+  }), V = () => {
+    var T, y, A, b;
+    return n.signInCTA ? (T = n.signInCTA) != null && T.component ? n.signInCTA.component : (y = n.signInCTA) != null && y.onClick ? /* @__PURE__ */ e.jsx(
+      l,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation
+        },
+        onClick: n.signInCTA.onClick,
+        children: /* @__PURE__ */ e.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || i("common.signIn") })
+      }
+    ) : (A = n.signInCTA) != null && A.url ? typeof window > "u" ? /* @__PURE__ */ e.jsx(
+      _,
+      {
+        component: "a",
+        href: n.signInCTA.url,
+        target: ((b = n.signInCTA) == null ? void 0 : b.target) || "_self",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation,
+          textDecoration: "none",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ e.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || i("common.signIn") })
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      l,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation
+        },
+        onClick: () => {
+          var B, j, k;
+          ((B = n.signInCTA) == null ? void 0 : B.target) === "_blank" ? window.open((j = n.signInCTA) == null ? void 0 : j.url, "_blank") : window.location.href = (k = n.signInCTA) == null ? void 0 : k.url;
+        },
+        children: /* @__PURE__ */ e.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || i("common.signIn") })
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      l,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ e.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || i("common.signIn") })
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      l,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ e.jsx(r, { sx: t.signInButtonText, children: i("common.signIn") })
+      }
+    );
+  };
+  return /* @__PURE__ */ e.jsx(
+    q,
+    {
+      entity: n.poll,
+      headline: i("poll.headline"),
+      backgroundImage: O,
+      imageBackgroundGradient: L,
+      signInContent: V(),
+      rulesDisplay: n.rulesDisplay,
+      brandingContent: /* @__PURE__ */ e.jsx(
+        N,
+        {
+          brandingLogo: v,
+          textColor: o.colorSchemes.dark.textColor,
+          label: ((h = n.poll.labels) == null ? void 0 : h.sponsor) || null
+        }
+      )
+    }
+  );
+};
+export {
+  xn as default
+};