@streamlayer/react 1.23.2 → 1.24.0

package/lib/es/index11.js

@@ -1,850 +1,185 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback, useLayoutEffect, useMemo } from "react";
-import { s as styled_default, c as cx_default } from "./sl-types.js";
-import { i as i$1 } from "./index9.js";
-import { B as B1 } from "./index6.js";
-import { Q as QuestionType, d as QuestionImages, a as QuestionStatus, A as AdUnit } from "./useStreamLayerApp2.js";
-import { O, L } from "./index14.js";
-import { d as d$6 } from "./index5.js";
-const p$4 = /* @__PURE__ */ styled_default("div")({
-  name: "SDKContainer",
-  class: "sopqfe6",
-  propsAsIs: false
-}), c$4 = /* @__PURE__ */ styled_default("div")({
-  name: "SDKScrollContainer",
-  class: "s102vcph",
-  propsAsIs: false
-}), n$4 = /* @__PURE__ */ styled_default("div")({
-  name: "SDKContentContainer",
-  class: "s1meqjjv",
-  propsAsIs: false
-}), e$2 = () => n$4, a$5 = /* @__PURE__ */ styled_default(e$2())({
-  name: "SDKWhiteContainer",
-  class: "s1burm22",
-  propsAsIs: true
-}), r$6 = () => a$5, m$4 = /* @__PURE__ */ styled_default(r$6())({
-  name: "SDKSummaryContainer",
-  class: "sm5r3j5",
-  propsAsIs: true
-}), l$4 = /* @__PURE__ */ styled_default("div")({
-  name: "TabsContainer",
-  class: "tysxwr6",
-  propsAsIs: false
-}), o$1 = () => n$4, C$2 = /* @__PURE__ */ styled_default(o$1())({
-  name: "LeaderboardContainer",
-  class: "l9er3b1",
-  propsAsIs: true
-}), t$4 = () => a$5, S$2 = /* @__PURE__ */ styled_default(t$4())({
-  name: "TabsNavContainer",
-  class: "t19dtrb3",
-  propsAsIs: true
-}), d$5 = /* @__PURE__ */ styled_default("div")({
-  name: "UserSummaryContainer",
-  class: "u1552n3j",
-  propsAsIs: false
-});
-var l$3 = Object.defineProperty;
-var d$4 = (t2, e2, s) => e2 in t2 ? l$3(t2, e2, { enumerable: true, configurable: true, writable: true, value: s }) : t2[e2] = s;
-var u$4 = (t2, e2, s) => d$4(t2, e2 + "", s);
-let y$3 = class y {
-  constructor() {
-    u$4(this, "observers", /* @__PURE__ */ new Set());
-  }
-  subscribe(e2) {
-    this.observers.add(e2);
-  }
-  unsubscribe(e2) {
-    this.observers.delete(e2);
-  }
-  notify(e2) {
-    this.observers.forEach((s) => s(e2));
-  }
-};
-const n$3 = new y$3(), m$3 = { hiding: false, finished: false }, S$1 = () => {
-  const [t2, e2] = useState(m$3), s = useRef(null);
-  useEffect(() => {
-    const r2 = (i2) => {
-      e2(i2);
-    };
-    return n$3.subscribe(r2), () => {
-      n$3.unsubscribe(r2);
-    };
-  }, []);
-  const c2 = useCallback((r2) => {
-    const i2 = { hiding: true, finished: false };
-    s.current && clearTimeout(s.current), r2 != null && r2.delay ? s.current = setTimeout(() => {
-      n$3.notify(i2);
-    }, r2 == null ? void 0 : r2.delay) : n$3.notify(i2);
-  }, []), f2 = useCallback(() => {
-    t2.hiding && (s.current = null, n$3.notify({ hiding: false, finished: true }));
-  }, [t2.hiding]);
-  return {
-    ...t2,
-    runAnimation: c2,
-    onAnimationEnd: f2
-  };
-};
-const u$3 = /* @__PURE__ */ styled_default("div")({
-  name: "Container",
-  class: "c1pgyo67",
-  propsAsIs: false
-}), h$2 = "sx17qu6", w$2 = "h1692c5m", f$4 = ({
-  children: r2,
-  style: e2,
-  className: o2,
-  enabled: t2 = true,
-  hiding: s,
-  onAnimationEnd: n2
-}) => /* @__PURE__ */ jsx(u$3, {
-  style: e2,
-  className: cx_default(o2, t2 && h$2, t2 && s && w$2),
-  onAnimationEnd: n2,
-  children: r2
-}), d$3 = () => f$4, y$2 = /* @__PURE__ */ styled_default(d$3())({
-  name: "GrowingContainer",
-  class: "gck55ev",
-  propsAsIs: true
-}), v$2 = ({
-  children: r2,
-  style: e2,
-  enabled: o2,
-  animate: t2,
-  ...s
-}) => {
-  const n2 = useRef(null);
-  return /* @__PURE__ */ jsx(y$2, {
-    ...s,
-    enabled: o2 && t2,
-    style: {
-      ...e2,
-      ...(() => {
-        const m2 = n2 == null ? void 0 : n2.current, i2 = m2 && window.getComputedStyle(m2), a2 = i2 == null ? void 0 : i2.getPropertyValue("height");
-        return o2 ? {
-          height: t2 ? a2 : 0
-        } : {};
-      })()
-    },
-    children: /* @__PURE__ */ jsx("div", {
-      ref: n2,
-      children: r2
-    })
-  });
-};
-const t$3 = /* @__PURE__ */ styled_default("div")({
+import { s as a } from "./sl-types.js";
+import { Q as i } from "./useStreamLayerApp2.js";
+import { jsxs as t, jsx as s, Fragment as U } from "react/jsx-runtime";
+import { memo as $, useMemo as w } from "react";
+import { F as y } from "./index15.js";
+import { B as T } from "./index8.js";
+const G = {
+  [i.TWEET]: { label: "Insight", iconName: "icon-insight" },
+  [i.PROMOTION]: { label: "Insight", iconName: "icon-insight" },
+  [i.UNSET]: void 0,
+  [i.FACTOID]: { label: "Insight", iconName: "icon-insight" },
+  [i.POLL]: { label: "Poll", iconName: "icon-poll" },
+  [i.TRIVIA]: { label: "Trivia", iconName: "icon-trivia" },
+  [i.PREDICTION]: { label: "Prediction", iconName: "icon-prediction" }
+}, J = {
+  [i.TWEET]: "Learn more",
+  [i.FACTOID]: "Learn more",
+  [i.POLL]: "Answer",
+  [i.TRIVIA]: "Answer",
+  [i.PREDICTION]: "Answer",
+  [i.PROMOTION]: "",
+  [i.UNSET]: ""
+}, K = (r) => r.split(/\s+/).map((n) => n[0]).join("").toUpperCase(), X = (r) => r ? r.toLocaleString("en-US") : "0", L = (r) => {
+  const n = new Date(r);
+  if (!n)
+    return "";
+  const c = /* @__PURE__ */ new Date(), o = Math.floor(c.getTime() - n.getTime());
+  return o < 6e4 ? `${Math.floor(o / 1e3)}s` : o < 36e5 ? `${Math.floor(o / 6e4)}m` : o < 864e5 ? `${Math.floor(o / 36e5)}h` : n.getFullYear() === c.getFullYear() ? `${n.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric"
+  })}` : `${n.toLocaleDateString("en-US", {
+    month: "2-digit",
+    day: "2-digit",
+    year: "2-digit"
+  })}`;
+}, D = /* @__PURE__ */ a("div")({
   name: "Container",
-  class: "c1gcvmcj",
-  propsAsIs: false
-}), p$3 = /* @__PURE__ */ styled_default("div")({
-  name: "Title",
-  class: "tnr592a",
-  propsAsIs: false
-}), r$5 = /* @__PURE__ */ styled_default("div")({
-  name: "Description",
-  class: "d1e8jqpv",
-  propsAsIs: false
-}), n$2 = () => B1, a$4 = /* @__PURE__ */ styled_default(n$2())({
-  name: "Icon",
-  class: "i1vs651k",
-  propsAsIs: true
-});
-const d$2 = ({ icon: e2, title: n2, description: i2 }) => /* @__PURE__ */ jsxs(t$3, { children: [
-  /* @__PURE__ */ jsx(a$4, { name: e2 }),
-  /* @__PURE__ */ jsx(p$3, { children: n2 }),
-  /* @__PURE__ */ jsx(r$5, { children: i2 })
-] });
-const c$3 = () => v$2, l$2 = /* @__PURE__ */ styled_default(c$3())({
-  name: "ShowInContainer",
-  class: "s16sbdnm",
-  propsAsIs: true
-}), f$3 = /* @__PURE__ */ styled_default("div")({
-  name: "FeedbackContainer",
-  class: "fbhorgl",
-  propsAsIs: false
-}), m$2 = "s1g20ja7", k = /* @__PURE__ */ styled_default("div")({
-  name: "Container",
-  class: "c455ozj",
-  propsAsIs: false
-}), o = () => B1, b$2 = /* @__PURE__ */ styled_default(o())({
-  name: "IconPrediction",
-  class: "i1913njx",
-  propsAsIs: true
-}), I$3 = /* @__PURE__ */ styled_default("div")({
-  name: "FeedbackIconWrap",
-  class: "fzfk69z",
-  propsAsIs: false
-}), F = /* @__PURE__ */ styled_default("div")({
-  name: "FeedbackHeader",
-  class: "fx87qaj",
-  propsAsIs: false
-}), A$3 = /* @__PURE__ */ styled_default("span")({
-  name: "FeedbackTitle",
-  class: "fvek9ew",
-  propsAsIs: false
-}), e$1 = /* @__PURE__ */ styled_default("span")({
-  name: "FeedbackDescription",
-  class: "f1kbtp09",
-  propsAsIs: false
-}), D = /* @__PURE__ */ styled_default("div")({
-  name: "FeedbackTitleWrap",
-  class: "f4i8rro",
-  propsAsIs: false
-}), v$1 = /* @__PURE__ */ styled_default("div")({
-  name: "FeedbackResultDescriptionWrap",
-  class: "fqyssr",
-  propsAsIs: false
-}), p$2 = () => e$1, x$2 = /* @__PURE__ */ styled_default(p$2())({
-  name: "FeedbackDynamicDescription",
-  class: "fyv794i",
-  propsAsIs: true
-}), r$4 = () => e$1, u$2 = /* @__PURE__ */ styled_default(r$4())({
-  name: "FeedbackResultDescription",
-  class: "f1jkj9vx",
-  propsAsIs: true
-}), y$1 = /* @__PURE__ */ styled_default("div")({
-  name: "FeedbackText",
-  class: "f1pxh3a6",
-  propsAsIs: false
-}), W = /* @__PURE__ */ styled_default("span")({
-  name: "DynamicWrap",
-  class: "d1afvufn",
-  propsAsIs: false
-}), h$1 = /* @__PURE__ */ styled_default("div")({
-  name: "EarlyFeedbackDescription",
-  class: "eq8u24d",
-  propsAsIs: false
-});
-const ii = ({
-  feedbackMessages: t2,
-  questionVotedCorrectly: S2,
-  questionVoted: k$1,
-  questionType: d2,
-  hasCorrectAnswer: r2,
-  showExpiredNotification: I2,
-  showClosedNotificationTrivia: D$1,
-  votedInCurrentRender: b2,
-  votedAfterQuestionClosed: y3,
-  voteErrorMessage: e2,
-  enteredAnActiveQuestion: B2,
-  marketClosed: H,
-  percentsAnimated: z,
-  votedAnswer: T,
-  isEarlyPrediction: n2,
-  correctAnswer: a2,
-  onAnimationEnd: G
-}) => {
-  const W$1 = k$1 && (d2 === QuestionType.TRIVIA || d2 === QuestionType.PREDICTION), f2 = d2 === QuestionType.PREDICTION && !r2, R = H && d2 === QuestionType.PREDICTION && !k$1 || d2 === QuestionType.PREDICTION && y3 && b2 && B2, N = W$1 && f2, Q = W$1 && r2, C2 = d2 === QuestionType.PREDICTION && k$1 && b2 && r2, P2 = k$1 && d2 === QuestionType.POLL && b2, m2 = S2 ? "correct" : "incorrect", o2 = S2 ? t2 == null ? void 0 : t2.correctFeedback : t2 == null ? void 0 : t2.incorrectFeedback;
-  return I2 || D$1 || N || Q || R || P2 || C2 || e2 ? /* @__PURE__ */ jsx(
-    l$2,
-    {
-      enabled: b2,
-      animate: !e2 && I2 ? true : z,
-      onAnimationEnd: G,
-      children: /* @__PURE__ */ jsxs(k, { "data-prediction": f2, children: [
-        e2 && !R && /* @__PURE__ */ jsxs(f$3, { children: [
-          !n2 && /* @__PURE__ */ jsx(b$2, { name: "questionExpired" }),
-          /* @__PURE__ */ jsx(e$1, { children: e2 })
-        ] }),
-        !e2 && I2 && /* @__PURE__ */ jsxs(f$3, { children: [
-          !n2 && /* @__PURE__ */ jsx(I$3, { children: /* @__PURE__ */ jsx(B1, { name: "questionExpired" }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(F, { children: /* @__PURE__ */ jsx(e$1, { children: "Question Expired" }) }),
-            /* @__PURE__ */ jsx(y$1, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
-          ] })
-        ] }),
-        !e2 && D$1 && /* @__PURE__ */ jsxs(f$3, { className: cx_default(m$2), children: [
-          /* @__PURE__ */ jsx(I$3, { children: /* @__PURE__ */ jsx(B1, { name: "questionExpired" }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(F, { children: /* @__PURE__ */ jsx(e$1, { children: "Question Closed" }) }),
-            /* @__PURE__ */ jsx(y$1, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
-          ] })
-        ] }),
-        R && /* @__PURE__ */ jsxs(f$3, { children: [
-          !n2 && /* @__PURE__ */ jsx(I$3, { children: /* @__PURE__ */ jsx(B1, { name: "questionExpired" }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(F, { children: /* @__PURE__ */ jsx(e$1, { children: n2 ? r2 ? "The results are already in!" : "Question is Closed" : "Question Closed" }) }),
-            /* @__PURE__ */ jsx(y$1, { children: n2 ? /* @__PURE__ */ jsx(h$1, { children: r2 ? `Correct: ${a2 == null ? void 0 : a2.text}` : "Event affecting the outcome has occurred." }) : "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
-          ] })
-        ] }),
-        !e2 && N && /* @__PURE__ */ jsxs(f$3, { children: [
-          !n2 && /* @__PURE__ */ jsx(b$2, { name: "icon-prediction" }),
-          /* @__PURE__ */ jsxs(x$2, { children: [
-            "Your pick has been recorded. ",
-            /* @__PURE__ */ jsx(W, { children: "We’ll notify you of the result." })
-          ] })
-        ] }),
-        !e2 && P2 && /* @__PURE__ */ jsxs(f$3, { children: [
-          !n2 && /* @__PURE__ */ jsx(I$3, { "data-feedback-type": "correct", children: /* @__PURE__ */ jsx(B1, { name: "correct" }) }),
-          /* @__PURE__ */ jsx(e$1, { children: "Thanks for answering. Please stay tuned for the next question." })
-        ] }),
-        !e2 && (Q || C2) && /* @__PURE__ */ jsxs(f$3, { className: cx_default(D$1 && m$2), children: [
-          !n2 && /* @__PURE__ */ jsx(I$3, { "data-feedback-type": m2, children: /* @__PURE__ */ jsx(B1, { name: m2 }) }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(F, { children: [
-            n2 ? /* @__PURE__ */ jsx(D, { children: m2 === "incorrect" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { children: "So close!" }),
-              /* @__PURE__ */ jsx("div", { children: "Better luck next time" })
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { children: "That’s correct!" }),
-              /* @__PURE__ */ jsx("div", { children: "You chose wisely." })
-            ] }) }) : /* @__PURE__ */ jsx(A$3, { "data-feedback-type": m2, children: o2 == null ? void 0 : o2.title }),
-            n2 ? /* @__PURE__ */ jsxs(v$1, { children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                "Your pick: ",
-                T == null ? void 0 : T.text
-              ] }),
-              /* @__PURE__ */ jsx("div", { children: m2 === "incorrect" ? `Correct: ${a2 == null ? void 0 : a2.text}` : "" })
-            ] }) : /* @__PURE__ */ jsx(u$2, { children: o2 == null ? void 0 : o2.description })
-          ] }) })
-        ] })
+  class: "cjq447q",
+  propsAsIs: !1
+}), H = /* @__PURE__ */ a("div")({
+  name: "ImageContainer",
+  class: "i14egogb",
+  propsAsIs: !1
+}), S = /* @__PURE__ */ a("img")({
+  name: "Image",
+  class: "i2g9g4l",
+  propsAsIs: !1
+}), O = () => T, E = /* @__PURE__ */ a(O())({
+  name: "TwitterIcon",
+  class: "t1c454nm",
+  propsAsIs: !0
+}), b = /* @__PURE__ */ a("div")({
+  name: "Details",
+  class: "d11nigc3",
+  propsAsIs: !1
+}), x = /* @__PURE__ */ a("div")({
+  name: "Name",
+  class: "nrxa4k8",
+  propsAsIs: !1
+}), C = /* @__PURE__ */ a("div")({
+  name: "UserNameAndDate",
+  class: "u1p051g3",
+  propsAsIs: !1
+}), F = ({ image: r, name: n, userName: c, verified: o, createdTweet: p }) => {
+  const m = p && L(p);
+  return /* @__PURE__ */ t(D, { children: [
+    r && /* @__PURE__ */ t(H, { children: [
+      /* @__PURE__ */ s(S, { className: "SL_AccountImage", src: r }),
+      /* @__PURE__ */ s(E, { name: "twitter" })
+    ] }),
+    /* @__PURE__ */ t(b, { children: [
+      n && /* @__PURE__ */ t(x, { className: "SL_TweetAccountName", children: [
+        n,
+        " ",
+        o && /* @__PURE__ */ s(T, { name: "icon-twitter-verified" })
+      ] }),
+      c && /* @__PURE__ */ t(C, { className: "SL_TweetAccountUserName", children: [
+        "@",
+        c,
+        " ",
+        m && `･ ${m}`
       ] })
-    }
-  ) : null;
-};
-const t$2 = /* @__PURE__ */ styled_default("div")({
-  name: "Container",
-  class: "c1hygj0s",
-  propsAsIs: false
-}), a$3 = /* @__PURE__ */ styled_default("div")({
-  name: "Title",
-  class: "t1r84tez",
-  propsAsIs: false
-}), c$2 = /* @__PURE__ */ styled_default("div")({
-  name: "Description",
-  class: "d1aj1a7k",
-  propsAsIs: false
-}), r$3 = /* @__PURE__ */ styled_default("div")({
-  name: "AdditionalDescription",
-  class: "ax09ezs",
-  propsAsIs: false
-}), n$1 = () => B1, p$1 = /* @__PURE__ */ styled_default(n$1())({
-  name: "Icon",
-  class: "inkrac",
-  propsAsIs: true
-});
-const x$1 = ({ icon: e2, title: i2, description: t2, additionalDescription: n2 }) => /* @__PURE__ */ jsxs(t$2, { children: [
-  e2 && /* @__PURE__ */ jsx(p$1, { name: e2 }),
-  /* @__PURE__ */ jsx(a$3, { children: i2 }),
-  /* @__PURE__ */ jsx(c$2, { children: t2 }),
-  n2 && /* @__PURE__ */ jsx(r$3, { children: n2 })
-] });
-const d$1 = /* @__PURE__ */ styled_default("div")({
+    ] })
+  ] });
+}, P = /* @__PURE__ */ a("div")({
   name: "Container",
-  class: "c14ielyq",
-  propsAsIs: false
-}), e = () => c$4, I$2 = /* @__PURE__ */ styled_default(e())({
-  name: "QuestionScrollContainer",
-  class: "q1tlqx57",
-  propsAsIs: true
-}), A$2 = /* @__PURE__ */ styled_default("div")({
-  name: "TopShadow",
-  class: "t1hq58md",
-  propsAsIs: false
-}), f$2 = /* @__PURE__ */ styled_default("div")({
-  name: "BottomShadow",
-  class: "b1c8nxcx",
-  propsAsIs: false
-}), S = /* @__PURE__ */ styled_default("div")({
-  name: "SponsorLogo",
-  class: "siozuc3",
-  propsAsIs: false
-}), v = /* @__PURE__ */ styled_default("div")({
-  name: "Content",
-  class: "cpnc44r",
-  propsAsIs: false
-}), x = /* @__PURE__ */ styled_default("div")({
-  name: "Title",
-  class: "tq7p3w0",
-  propsAsIs: false
-}), C$1 = /* @__PURE__ */ styled_default("div")({
-  name: "OptionsWrap",
-  class: "o1jlfj9g",
-  propsAsIs: false
-}), u$1 = /* @__PURE__ */ styled_default("div")({
-  name: "Options",
-  class: "o84pmnd",
-  propsAsIs: false
-}), a$2 = () => f$4, w$1 = /* @__PURE__ */ styled_default(a$2())({
-  name: "AlertContainer",
-  class: "a1dybjw9",
-  propsAsIs: true
-}), y2 = /* @__PURE__ */ styled_default("div")({
-  name: "EarlyPrediction",
-  class: "e1l05ict",
-  propsAsIs: false
-}), r$2 = () => B1, h = /* @__PURE__ */ styled_default(r$2())({
-  name: "EarlyPredictionIcon",
-  class: "ez9juex",
-  propsAsIs: true
-}), p = () => B1, q = /* @__PURE__ */ styled_default(p())({
-  name: "SponsorIcon",
-  class: "s8p4aob",
-  propsAsIs: true
-});
-const r$1 = /* @__PURE__ */ styled_default("button")({
-  name: "ButtonContainer",
-  class: "b1b6dl8t",
-  propsAsIs: false
-}), l$1 = /* @__PURE__ */ styled_default("div")({
-  name: "ButtonPctWrap",
-  class: "b4iik8i",
-  propsAsIs: false
-}), I$1 = /* @__PURE__ */ styled_default("div")({
-  name: "ButtonPct",
-  class: "b1gq1lnf",
-  propsAsIs: false
-}), i = /* @__PURE__ */ styled_default("span")({
-  name: "ButtonBody",
-  class: "b1j65z51",
-  propsAsIs: false
-}), m$1 = /* @__PURE__ */ styled_default("div")({
-  name: "IconContainer",
-  class: "i19tpfua",
-  propsAsIs: false
-}), f$1 = /* @__PURE__ */ styled_default("div")({
-  name: "IconWrap",
-  class: "i1tubmma",
-  propsAsIs: false
-}), n = /* @__PURE__ */ styled_default("img")({
-  name: "Icon",
-  class: "i1grrgwj",
-  propsAsIs: false
-}), t$1 = () => n, u = /* @__PURE__ */ styled_default(t$1())({
-  name: "IconDefault",
-  class: "ibemyq8",
-  propsAsIs: true
-}), a$1 = () => n, A$1 = /* @__PURE__ */ styled_default(a$1())({
-  name: "IconCircle",
-  class: "i1dceht",
-  propsAsIs: true
-}), d = /* @__PURE__ */ styled_default("span")({
-  name: "Title",
-  class: "t116q4vq",
-  propsAsIs: false
-}), B = /* @__PURE__ */ styled_default("span")({
-  name: "Indicators",
-  class: "i17ajcu2",
-  propsAsIs: false
-}), P = /* @__PURE__ */ styled_default("div")({
-  name: "PtsWrap",
-  class: "pu9kmlb",
-  propsAsIs: false
-}), b$1 = /* @__PURE__ */ styled_default("span")({
-  name: "Pts",
-  class: "p1j2j0s0",
-  propsAsIs: false
-}), g = /* @__PURE__ */ styled_default("span")({
-  name: "Percentage",
-  class: "p1mzj1sj",
-  propsAsIs: false
-}), c$1 = () => B1, C = /* @__PURE__ */ styled_default(c$1())({
-  name: "CheckIcon",
-  class: "cichgz8",
-  propsAsIs: true
-});
-const E = {
-  [QuestionImages.CENTERED]: (t2) => /* @__PURE__ */ jsx(u, { "data-testid": "vote-icon", alt: "option-icon", src: t2 }),
-  [QuestionImages.TRANSPARENT]: (t2) => /* @__PURE__ */ jsx(m$1, { "data-testid": "vote-icon", children: /* @__PURE__ */ jsx(f$1, { style: { backgroundImage: `url(${t2})` } }) }),
-  [QuestionImages.ROUNDED]: (t2) => /* @__PURE__ */ jsx(A$1, { "data-testid": "vote-icon", alt: "option-icon", src: t2 }),
-  [QuestionImages.NONE]: () => null,
-  [QuestionImages.UNSET]: () => null
-}, rt = ({ questionType: t2, hasCorrectAnswer: a2, correct: n2, youVoted: i2, questionVoted: r2 }) => {
-  if (t2 === QuestionType.POLL && i2)
-    return "voted";
-  if (t2 === QuestionType.PREDICTION) {
-    if (!a2 && r2)
-      return i2 ? "voted" : "unset";
-    if (a2 && r2)
-      return i2 ? n2 ? "correct" : "incorrect" : "unset";
-    if (i2)
-      return "correct";
-  }
-  return t2 === QuestionType.TRIVIA && r2 && i2 ? n2 ? "correct" : "incorrect" : "unset";
-}, ot = ({
-  questionType: t2,
-  questionVoted: a2,
-  correct: n2,
-  hasCorrectAnswer: i2,
-  questionStatus: r2
-}) => t2 === QuestionType.TRIVIA ? a2 && n2 : t2 === QuestionType.PREDICTION ? a2 && n2 && i2 || r2 === QuestionStatus.RESOLVED && n2 : false, at = O(r$1), mt = (t2) => {
-  var N;
-  const {
-    // option props
-    id: a2,
-    icon: n2,
-    text: i$12,
-    percentageDecimal: r2,
-    points: w2,
-    // extra props
-    onVote: D2,
-    markThatVoted: g$1,
-    firstOption: k2,
-    onPercentsAnimated: l2,
-    youSelected: P$1,
-    youVoted: v2,
-    questionVoted: s,
-    imageMode: C$12,
-    answerTimeExpired: A2,
-    questionStatus: p2,
-    isLoading: B$1,
-    questionType: d$12,
-    correct: x2,
-    hasCorrectAnswer: L2,
-    marketClosed: f2,
-    isEarlyPrediction: b2,
-    isAd: m2,
-    webos: W2
-  } = t2, [F2, R] = useState(0), I2 = rt(t2), Q = ot({ questionType: d$12, questionVoted: s, correct: x2, hasCorrectAnswer: L2, questionStatus: p2 }), h2 = f2 && d$12 === QuestionType.PREDICTION, S2 = s || h2, j = d$12 === QuestionType.PREDICTION && !s && !f2 && !m2, T = s && !P$1 && I2 !== "incorrect" && !v2;
-  return useLayoutEffect(() => {
-    R(0), requestAnimationFrame(() => {
-      R(r2);
-    });
-  }, [r2]), /* @__PURE__ */ jsxs(
-    at,
-    {
-      value: a2,
-      webos: W2,
-      autoFocus: k2,
-      "data-selected": P$1,
-      "data-answer-state": I2,
-      disabled: s || B$1 || A2 || h2,
-      "data-is-not-checked": T,
-      "data-a": "intr",
-      onClick: (y3) => {
-        g$1(
-          d$12 === QuestionType.PREDICTION ? f2 : p2 === QuestionStatus.RESOLVED
-        ), D2(y3);
-      },
-      "data-is-ad": m2,
-      children: [
-        /* @__PURE__ */ jsx(l$1, { children: /* @__PURE__ */ jsx(
-          I$1,
+  class: "c1kzqw87",
+  propsAsIs: !1
+}), M = /* @__PURE__ */ a("div")({
+  name: "Details",
+  class: "d9r1hf9",
+  propsAsIs: !1
+}), R = /* @__PURE__ */ a("div")({
+  name: "Body",
+  class: "bezygt5",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ a("div")({
+  name: "ImagesContainer",
+  class: "i1y8f7ym",
+  propsAsIs: !1
+}), h = /* @__PURE__ */ a("div")({
+  name: "ImagesBlock",
+  class: "i18gwonx",
+  propsAsIs: !1
+}), N = /* @__PURE__ */ a("img")({
+  name: "Image",
+  class: "i3g0xjd",
+  propsAsIs: !1
+}), j = () => N, l = /* @__PURE__ */ a(j())({
+  name: "ImageFullSize",
+  class: "io8rt7p",
+  propsAsIs: !0
+}), V = () => N, f = /* @__PURE__ */ a(V())({
+  name: "ImageHalfSize",
+  class: "i4hn3ox",
+  propsAsIs: !0
+}), _ = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), z = (r) => r?.replace(_, ""), Z = $(
+  ({ image: r, body: n, muted: c, account: o, accountVerified: p, tweet: m, isDetail: u, controlVideo: v }) => {
+    const e = m?.meta?.extendedEntities?.media, g = e?.find(
+      ({ type: I }) => I === "photo"
+      /* PHOTO */
+    ), A = w(() => e?.[0]?.videoInfo?.variants?.findLast(
+      ({ contentType: I }) => I === "video/mp4"
+      /* VIDEO */
+    )?.url, [e]);
+    return /* @__PURE__ */ t(P, { children: [
+      /* @__PURE__ */ t(M, { children: [
+        /* @__PURE__ */ s(
+          F,
           {
-            "data-answer-state": I2,
-            "data-is-not-checked": T,
-            style: { width: `${S2 ? F2 : 0}%` },
-            onTransitionEnd: () => {
-              h2 || l2 == null || l2();
-            },
-            "data-is-ad": m2
+            image: r,
+            name: m?.meta?.accountName,
+            userName: o,
+            verified: p,
+            createdTweet: m?.date
           }
-        ) }),
-        /* @__PURE__ */ jsxs(i, { "data-a": "intr", children: [
-          n2 && C$12 && ((N = E[C$12]) == null ? void 0 : N.call(E, n2)),
-          /* @__PURE__ */ jsx(d, { "data-a": "intr", children: i$12 }),
-          j && /* @__PURE__ */ jsxs(P, { children: [
-            w2,
-            /* @__PURE__ */ jsx(b$1, { children: "pts" })
+        ),
+        /* @__PURE__ */ s(R, { children: z(n) }),
+        !u && g && /* @__PURE__ */ s(d, { children: /* @__PURE__ */ s(l, { src: e?.[0].mediaUrlHttps }) }),
+        u && g && /* @__PURE__ */ t(U, { children: [
+          e?.length === 1 && /* @__PURE__ */ s(d, { children: /* @__PURE__ */ s(l, { src: e[0].mediaUrlHttps }) }),
+          e?.length === 2 && /* @__PURE__ */ t(d, { children: [
+            /* @__PURE__ */ s(f, { src: e[0].mediaUrlHttps }),
+            /* @__PURE__ */ s(f, { src: e[1].mediaUrlHttps })
           ] }),
-          S2 && /* @__PURE__ */ jsxs(B, { children: [
-            Q && /* @__PURE__ */ jsx(C, { name: b2 ? "selectedBetPack" : "selected" }),
-            /* @__PURE__ */ jsx(g, { children: /* @__PURE__ */ jsx(d$6, { value: r2, suffix: "%" }) })
-          ] })
-        ] })
-      ]
-    }
-  );
-};
-const t = () => v$2, c = /* @__PURE__ */ styled_default(t())({
-  name: "ShowInContainer",
-  class: "sie6cqo",
-  propsAsIs: true
-}), r = /* @__PURE__ */ styled_default("div")({
-  name: "WinBarContainer",
-  class: "wgizw4u",
-  propsAsIs: false
-}), l = /* @__PURE__ */ styled_default("div")({
-  name: "Content",
-  class: "c1l3ucjp",
-  propsAsIs: false
-}), m = /* @__PURE__ */ styled_default("div")({
-  name: "Title",
-  class: "tx7j799",
-  propsAsIs: false
-}), a = () => B1, I = /* @__PURE__ */ styled_default(a())({
-  name: "WinIcon",
-  class: "w4lwuj0",
-  propsAsIs: true
-}), f = /* @__PURE__ */ styled_default("div")({
-  name: "Points",
-  class: "po9i64o",
-  propsAsIs: false
-}), w = /* @__PURE__ */ styled_default("span")({
-  name: "PointsCount",
-  class: "pe5g05h",
-  propsAsIs: false
-}), A = /* @__PURE__ */ styled_default("span")({
-  name: "PointsUnits",
-  class: "p1hdtpmb",
-  propsAsIs: false
-});
-const b = ({
-  title: o2,
-  points: t2,
-  isPlayingTimer: a2,
-  isTimer: m$12,
-  animatePoints: c$12,
-  questionType: r$12,
-  timerDuration: d2,
-  votedInCurrentRender: l$12,
-  percentsAnimated: h2,
-  onTimerExpired: C2
-}) => /* @__PURE__ */ jsx(
-  c,
-  {
-    enabled: r$12 === QuestionType.PREDICTION && l$12,
-    animate: h2,
-    children: /* @__PURE__ */ jsxs(
-      r,
-      {
-        style: {
-          justifyContent: r$12 === QuestionType.PREDICTION ? "center" : "space-between"
-        },
-        children: [
-          /* @__PURE__ */ jsxs(l, { children: [
-            o2 && /* @__PURE__ */ jsx(m, { children: o2 }),
-            t2 !== void 0 && r$12 !== QuestionType.POLL && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(I, { name: "icon-trophy" }),
-              /* @__PURE__ */ jsxs(f, { children: [
-                /* @__PURE__ */ jsx(w, { children: c$12 ? /* @__PURE__ */ jsx(d$6, { value: t2, delay: 0.3 }) : t2 }),
-                /* @__PURE__ */ jsx(A, { children: "PTS" })
-              ] })
+          e?.length === 3 && /* @__PURE__ */ t(d, { children: [
+            /* @__PURE__ */ s(f, { src: e[0].mediaUrlHttps }),
+            /* @__PURE__ */ t(h, { children: [
+              /* @__PURE__ */ s(l, { src: e[1].mediaUrlHttps }),
+              /* @__PURE__ */ s(l, { src: e[2].mediaUrlHttps })
             ] })
           ] }),
-          m$12 && r$12 !== QuestionType.PREDICTION && /* @__PURE__ */ jsx(L, { isPlaying: a2, onTimerExpired: C2, duration: d2 })
-        ]
-      }
-    )
-  }
-);
-const Ft = (e2, T) => {
-  switch (e2) {
-    case "already_voted":
-      return T === QuestionType.POLL ? "You’ve already answered this question on another device." : "You’ve already answered this question on another device. So the points for this answer won't tally.";
-    default:
-      return "Something went wrong, please try again";
-  }
-}, te = () => /* @__PURE__ */ jsx(d$1, { children: /* @__PURE__ */ jsxs(v, { children: [
-  /* @__PURE__ */ jsx(i$1, { loading: true, style: { height: "40px", borderRadius: "100px" } }),
-  /* @__PURE__ */ jsx(i$1, { loading: true, style: { height: "24px", margin: "16px 0" } }),
-  /* @__PURE__ */ jsx(u$1, { children: Array.from({ length: 5 }).map((e2, T) => /* @__PURE__ */ jsx(i$1, { loading: true, style: { height: "44px" } }, T)) })
-] }) }), ee = ({
-  openedQuestion: e2,
-  isLoading: T,
-  vote: j,
-  close: F2,
-  isEarlyPrediction: a2,
-  mastersApp: at2,
-  webos: ct
-}) => {
-  var tt, et;
-  const H = e2.subject, r2 = e2.type, v$12 = e2.status, f2 = (tt = e2.options) == null ? void 0 : tt.options, I2 = e2.marketClosed, O2 = e2.id, U = useRef(), S$22 = useRef(), g2 = at2 ? false : (e2 == null ? void 0 : e2.adUnit) === AdUnit.STANDART, [V, _] = useState(false), [x$22, lt] = useState(false), [y$12, $] = useState(true), [d2, ft] = useState(false), [k2, ut] = useState(false), [z, P2] = useState(""), [D2, mt$1] = useState(""), [E2, G] = useState(false), [dt, Tt] = useState(false), [J, ht] = useState(false), { runAnimation: A2, finished: K } = S$1();
-  useEffect(() => {
-    K && F2(O2);
-  }, [F2, K]), useEffect(() => {
-    r2 === QuestionType.PREDICTION ? I2 && $(false) : v$12 === QuestionStatus.RESOLVED && $(false);
-  }, []);
-  const It = useCallback((s) => {
-    lt(s), _(true);
-  }, []), gt = useCallback(() => {
-    a2 && _(false);
-  }, [a2]), L2 = useRef(false), X = useCallback(() => {
-    S$22.current && clearTimeout(S$22.current), S$22.current = setTimeout(() => {
-      ht(true), A2({ delay: 5500 });
-    }, 4e3);
-  }, [A2]), Z = useCallback(
-    async (s) => {
-      if (!L2.current && (L2.current = true, O2)) {
-        const l2 = s.currentTarget.value;
-        P2(l2);
-        try {
-          await j(O2, l2), g2 && X();
-        } catch (C2) {
-          mt$1(Ft(C2.message, r2)), P2(""), console.error("Error while voting", C2), L2.current = false;
-        }
-      }
-    },
-    [r2, O2, P2, j, g2, X]
-  ), At = useCallback(() => {
-    ft(true), A2({ delay: 3500 });
-  }, [A2]), Ct = useCallback(() => {
-    ut(true), A2({ delay: 3500 });
-  }, [A2]), t2 = e2 == null ? void 0 : e2.answers.find((s) => s.youVoted === true), c2 = useMemo(
-    () => !!(e2 != null && e2.answers.find((s) => s.correct === true)),
-    [e2]
-  ), o2 = useMemo(
-    () => e2 == null ? void 0 : e2.answers.find((s) => s.correct === true),
-    [e2]
-  );
-  useEffect(() => {
-    t2 && V && !dt && (U.current = setTimeout(Ct, 1e4), Tt(true));
-  }, [t2]), useEffect(() => () => {
-    clearTimeout(U.current), clearTimeout(S$22.current);
-  }, []);
-  const b$12 = useMemo(() => e2 ? e2.answers.map((s) => {
-    var l2;
-    return {
-      ...s,
-      questionVoted: !!t2,
-      youSelected: z === s.id,
-      isLoading: T,
-      hasCorrectAnswer: c2,
-      questionType: e2.type,
-      answerTimeExpired: d2,
-      questionStatus: v$12,
-      imageMode: (l2 = e2.appearance) == null ? void 0 : l2.images,
-      onVote: Z
-    };
-  }) : [], [
-    c2,
-    d2,
-    T,
-    e2,
-    t2,
-    v$12,
-    Z,
-    z
-  ]);
-  useEffect(() => {
-    const s = b$12.some(({ percentageDecimal: C2 }) => C2 !== 0), l2 = t2 && r2 === QuestionType.PREDICTION;
-    D2 && (a2 || !s || I2 && l2) && G(true);
-  }, [b$12, D2, a2, I2, r2, t2]);
-  const Q = f2 && (f2.case === "trivia" || f2.case === "prediction") ? f2.value : void 0, h$12 = v$12 === QuestionStatus.RESOLVED && r2 === QuestionType.TRIVIA && !t2 && !y$12, W2 = r2 === QuestionType.TRIVIA && x$22, Y = useMemo(() => g2 ? false : r2 === QuestionType.PREDICTION ? a2 ? false : !!(t2 && !c2 || t2 && c2 && (o2 != null && o2.youVoted)) : true, [r2, t2, c2, o2, a2, g2]), Rt = useMemo(() => {
-    if (r2 === QuestionType.PREDICTION && t2 && (!c2 || c2 && (o2 != null && o2.youVoted)))
-      return t2.points;
-    if (!(h$12 || d2))
-      return t2 ? t2.correct ? t2.pointsEarned : 0 : o2 == null ? void 0 : o2.points;
-  }, [d2, t2, o2, h$12, r2, c2]), wt = useMemo(() => r2 === QuestionType.PREDICTION && t2 ? c2 ? c2 && (o2 != null && o2.youVoted) ? "You won" : "" : "To win" : h$12 || d2 ? "Time expired" : r2 === QuestionType.POLL ? "Time remaining" : t2 ? "You won" : "To win", [d2, r2, t2, h$12, c2, o2]), vt = !Y || Y && r2 === QuestionType.PREDICTION && V && !E2, Vt = (r2 === QuestionType.TRIVIA || r2 === QuestionType.PREDICTION) && t2 && c2 && (o2 == null ? void 0 : o2.youVoted), yt = t2 || h$12 || W2 || r2 === QuestionType.TRIVIA && v$12 === QuestionStatus.RESOLVED && y$12, pt = !a2 && (d2 || k2) || J, Ot = () => {
-    const s = () => r2 === QuestionType.TRIVIA ? t2 != null && t2.correct ? `That's correct!
-You chose wisely.` : `So close!
-Better luck next time.` : r2 === QuestionType.POLL ? `Thanks for answering.
-Please stay tuned for the next question.` : r2 === QuestionType.PREDICTION ? "Stay tuned to see if your prediction was correct." : "", l2 = () => r2 === QuestionType.TRIVIA ? `Your Pick: ${o2 == null ? void 0 : o2.text}` : r2 === QuestionType.POLL || r2 === QuestionType.PREDICTION ? `Your Pick: ${t2 == null ? void 0 : t2.text}` : "", C2 = () => r2 === QuestionType.TRIVIA && (f2 == null ? void 0 : f2.case) === "trivia" ? f2 == null ? void 0 : f2.value.explanation : r2 === QuestionType.PREDICTION ? H : "";
-    return J ? /* @__PURE__ */ jsx(w$1, { children: /* @__PURE__ */ jsx(
-      x$1,
-      {
-        title: s(),
-        description: l2(),
-        ...t2 != null && t2.correct || r2 === QuestionType.POLL || r2 === QuestionType.PREDICTION ? { icon: "icon-correct" } : {},
-        ...r2 === QuestionType.TRIVIA || r2 === QuestionType.PREDICTION ? { additionalDescription: C2() } : {}
-      }
-    ) }) : !a2 && (d2 || k2) ? /* @__PURE__ */ jsx(w$1, { children: /* @__PURE__ */ jsx(
-      d$2,
-      {
-        icon: "icon-check-circle",
-        title: "More to come...",
-        description: k2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          "Stay tuned for more questions ",
-          /* @__PURE__ */ jsx("br", {}),
-          " and insights."
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          "Watch for additional enhanced stream ",
-          /* @__PURE__ */ jsx("br", {}),
-          " interactive experience."
+          e?.length === 4 && /* @__PURE__ */ t(d, { children: [
+            /* @__PURE__ */ t(h, { children: [
+              /* @__PURE__ */ s(l, { src: e[0].mediaUrlHttps }),
+              /* @__PURE__ */ s(l, { src: e[1].mediaUrlHttps })
+            ] }),
+            /* @__PURE__ */ t(h, { children: [
+              /* @__PURE__ */ s(l, { src: e[2].mediaUrlHttps }),
+              /* @__PURE__ */ s(l, { src: e[3].mediaUrlHttps })
+            ] })
+          ] })
         ] })
-      }
-    ) }) : null;
-  };
-  return /* @__PURE__ */ jsxs(I$2, { children: [
-    a2 && /* @__PURE__ */ jsx(A$2, {}),
-    /* @__PURE__ */ jsx(d$1, { style: a2 ? { marginTop: "-40px" } : {}, children: /* @__PURE__ */ jsxs(v, { children: [
-      !a2 && !g2 && /* @__PURE__ */ jsx(
-        ii,
-        {
-          feedbackMessages: Q,
-          questionVoted: !!t2,
-          questionVotedCorrectly: t2 == null ? void 0 : t2.correct,
-          questionType: r2,
-          hasCorrectAnswer: c2,
-          showExpiredNotification: h$12,
-          showClosedNotificationTrivia: W2,
-          votedInCurrentRender: V,
-          votedAfterQuestionClosed: x$22,
-          enteredAnActiveQuestion: y$12,
-          marketClosed: I2,
-          percentsAnimated: E2,
-          voteErrorMessage: D2,
-          votedAnswer: t2
-        }
-      ),
-      Y && /* @__PURE__ */ jsx(
-        b,
+      ] }),
+      !g && (e?.[0]?.type === "video" || e?.[0]?.type === "animated_gif") && A && /* @__PURE__ */ s(
+        y,
         {
-          title: wt,
-          points: Rt,
-          onTimerExpired: At,
-          questionType: e2.type,
-          isTimer: !T,
-          isPlayingTimer: !t2,
-          animatePoints: Vt,
-          timerDuration: yt ? 0 : Number(((et = e2 == null ? void 0 : e2.appearance) == null ? void 0 : et.autoHideInterval) || "30"),
-          votedInCurrentRender: V,
-          percentsAnimated: E2
+          muted: c,
+          source: A,
+          poster: e[0].mediaUrlHttps,
+          controlVideo: v
         }
-      ),
-      pt ? Ot() : /* @__PURE__ */ jsxs(Fragment, { children: [
-        a2 && /* @__PURE__ */ jsxs(y2, { children: [
-          /* @__PURE__ */ jsx(h, { name: "iconEarlyPrediction" }),
-          "EARLY PREDICTION"
-        ] }),
-        /* @__PURE__ */ jsx(x, { style: vt ? { marginTop: 0 } : {}, children: H }),
-        a2 && /* @__PURE__ */ jsx(
-          ii,
-          {
-            feedbackMessages: Q,
-            questionVoted: !!t2,
-            questionVotedCorrectly: t2 == null ? void 0 : t2.correct,
-            questionType: r2,
-            hasCorrectAnswer: c2,
-            showExpiredNotification: h$12,
-            showClosedNotificationTrivia: W2,
-            votedInCurrentRender: V,
-            votedAfterQuestionClosed: x$22,
-            enteredAnActiveQuestion: y$12,
-            marketClosed: I2,
-            percentsAnimated: E2,
-            voteErrorMessage: D2,
-            isEarlyPrediction: a2,
-            correctAnswer: o2,
-            votedAnswer: t2,
-            onAnimationEnd: gt
-          }
-        ),
-        /* @__PURE__ */ jsxs(C$1, { children: [
-          /* @__PURE__ */ jsx(u$1, { children: b$12.sort((s, l2) => s.id > l2.id ? 1 : -1).map((s, l2) => /* @__PURE__ */ jsx(
-            mt,
-            {
-              ...s,
-              firstOption: l2 === 0,
-              markThatVoted: It,
-              onPercentsAnimated: () => G(true),
-              votedAfterQuestionClosed: x$22,
-              enteredAnActiveQuestion: y$12,
-              marketClosed: I2,
-              isEarlyPrediction: a2,
-              isAd: g2,
-              webos: ct
-            },
-            s.id
-          )) }),
-          a2 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(f$2, {}),
-            /* @__PURE__ */ jsx(S, { children: /* @__PURE__ */ jsx(q, { name: "mastersLogoWhite" }) })
-          ] })
-        ] })
-      ] })
-    ] }) })
-  ] });
-};
+      )
+    ] });
+  }
+);
 export {
-  C$2 as C,
-  S$1 as S,
-  S$2 as a,
-  a$5 as b,
-  c$4 as c,
-  d$5 as d,
-  ee as e,
-  f$4 as f,
-  l$4 as l,
-  m$4 as m,
-  n$4 as n,
-  p$4 as p,
-  te as t
+  F as D,
+  K as I,
+  Z as N,
+  G as e,
+  z as j,
+  J as o,
+  X as s
 };