@streamlayer/react 1.23.1 → 1.23.2

package/lib/classic/es/notification2.js

@@ -1,1142 +1,1184 @@
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { h as ws } from "./index7.js";
-import { useState as w, useRef as es, useEffect as y, useCallback as ys, useMemo as Ts } from "react";
-import { s as e, c as bs, u as Cs, a as Q } from "./sl-types.js";
-import { e as Ns } from "./index5.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { h as h$4 } from "./index7.js";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { s as styled_default, c as cx_default, u as useStore, a as NotificationType } from "./sl-types.js";
+import { e as eventBus } from "./index5.js";
 import "./feature.js";
-import { e as M, D as fs, a as ks, o as qs } from "./index12.js";
-import { e as Ss, i as V } from "./index8.js";
-import { B as I } from "./index4.js";
-import { f as N, Q as h, c as R, a as v, N as x, S as Es, b as F } from "./useStreamLayerApp2.js";
-import { O } from "./index10.js";
-import { E as Ls, y as xs } from "./index9.js";
-import { d as Ds } from "./index3.js";
-import { B as Ms, z as Rs, F as Os } from "./hooks-WfHlJH12.js";
-const Bs = /* @__PURE__ */ e("div")({
+import { e as e$8, D as D$3, a as D$4, o as o$4 } from "./index12.js";
+import { e as e$7, i as i$9 } from "./index8.js";
+import { B as B1 } from "./index4.js";
+import { f as PickHistoryStatus, Q as QuestionType, c as QuestionStatus, a as QuestionImages, N as NotificationUseContentMedia, S as SdkOverlayType, b as AdUnit } from "./useStreamLayerApp2.js";
+import { O as O$2 } from "./index10.js";
+import { E as Et, y as y$4 } from "./index9.js";
+import { d as d$4 } from "./index3.js";
+import { B, z as z$1, F as F$2 } from "./hooks-WfHlJH12.js";
+const r$9 = /* @__PURE__ */ styled_default("div")({
   name: "QuestionItem",
   class: "q1w97g3p",
-  propsAsIs: !1
-}), js = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), m$5 = /* @__PURE__ */ styled_default("div")({
   name: "QuestionCaption",
   class: "q2sl39u",
-  propsAsIs: !1
-}), Ps = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), I$4 = /* @__PURE__ */ styled_default("div")({
   name: "QuestionBody",
   class: "qd5h0uc",
-  propsAsIs: !1
-}), zs = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), Q$1 = /* @__PURE__ */ styled_default("div")({
   name: "QuestionAction",
   class: "q105uluy",
-  propsAsIs: !1
-}), Qs = () => I, f = /* @__PURE__ */ e(Qs())({
+  propsAsIs: false
+}), e$6 = () => B1, t$e = /* @__PURE__ */ styled_default(e$6())({
   name: "QuestionActionIcon",
   class: "q1fa0b9h",
-  propsAsIs: !0
-}), Vs = () => f, Fs = /* @__PURE__ */ e(Vs())({
+  propsAsIs: true
+}), a$b = () => t$e, A$6 = /* @__PURE__ */ styled_default(a$b())({
   name: "QuestionCheckIcon",
   class: "qxlt78s",
-  propsAsIs: !0
-}), Us = () => I, _s = /* @__PURE__ */ e(Us())({
+  propsAsIs: true
+}), c$a = () => B1, f$4 = /* @__PURE__ */ styled_default(c$a())({
   name: "QuestionTypeIcon",
   class: "qmg0vkx",
-  propsAsIs: !0
-}), Ws = /* @__PURE__ */ e("div")({
+  propsAsIs: true
+}), d$3 = /* @__PURE__ */ styled_default("div")({
   name: "QuestionTypeLabel",
   class: "q1uz5j1g",
-  propsAsIs: !1
-}), Ys = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), q$1 = /* @__PURE__ */ styled_default("div")({
   name: "QuestionContent",
   class: "qc3icwa",
-  propsAsIs: !1
-}), Ks = /* @__PURE__ */ e("button")({
+  propsAsIs: false
+}), S$4 = /* @__PURE__ */ styled_default("button")({
   name: "PlayButton",
   class: "p169lohr",
-  propsAsIs: !1
-}), Gs = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), b = /* @__PURE__ */ styled_default("div")({
   name: "SkeletonContainer",
   class: "s1f43z3r",
-  propsAsIs: !1
-}), Hs = () => Ss, Xs = /* @__PURE__ */ e(Hs())({
+  propsAsIs: false
+}), p$a = () => e$7, k$3 = /* @__PURE__ */ styled_default(p$a())({
   name: "SkeletonButton",
   class: "s16k8geu",
-  propsAsIs: !0
-}), Js = {
-  [N.LOST]: /* @__PURE__ */ s(f, { name: "incorrectVoted" }),
-  [N.WON]: /* @__PURE__ */ s(Fs, { name: "icon-check" }),
-  [N.UNSET]: /* @__PURE__ */ s(f, { name: "icon-arrow" }),
-  [N.DNP]: /* @__PURE__ */ s(f, { name: "icon-arrow" })
-}, li = () => /* @__PURE__ */ c(Gs, { children: [
-  /* @__PURE__ */ s(V, { loading: !0, style: { width: "35%" } }),
-  /* @__PURE__ */ s(V, { loading: !0, style: { width: "70%" } }),
-  /* @__PURE__ */ s(Xs, {})
-] }), B = ({ questionTypeData: n, questionType: o, questionStatus: t }) => /* @__PURE__ */ c(js, { className: "SL_QuestionCaption", children: [
-  /* @__PURE__ */ s(
-    _s,
+  propsAsIs: true
+});
+const w$2 = {
+  [PickHistoryStatus.LOST]: /* @__PURE__ */ jsx(t$e, { name: "incorrectVoted" }),
+  [PickHistoryStatus.WON]: /* @__PURE__ */ jsx(A$6, { name: "icon-check" }),
+  [PickHistoryStatus.UNSET]: /* @__PURE__ */ jsx(t$e, { name: "icon-arrow" }),
+  [PickHistoryStatus.DNP]: /* @__PURE__ */ jsx(t$e, { name: "icon-arrow" })
+}, D$2 = () => /* @__PURE__ */ jsxs(b, { children: [
+  /* @__PURE__ */ jsx(i$9, { loading: true, style: { width: "35%" } }),
+  /* @__PURE__ */ jsx(i$9, { loading: true, style: { width: "70%" } }),
+  /* @__PURE__ */ jsx(k$3, {})
+] }), x$4 = ({ questionTypeData: e2, questionType: n2, questionStatus: a2 }) => /* @__PURE__ */ jsxs(m$5, { className: "SL_QuestionCaption", children: [
+  /* @__PURE__ */ jsx(
+    f$4,
     {
       className: "SL_QuestionTypeIcon",
       "data-testid": "question-type-icon",
-      "data-type-trivia": o === h.TRIVIA,
-      "data-type-poll": o === h.POLL,
-      name: n.iconName
+      "data-type-trivia": n2 === QuestionType.TRIVIA,
+      "data-type-poll": n2 === QuestionType.POLL,
+      name: e2.iconName
     }
   ),
-  /* @__PURE__ */ c(Ws, { className: "SL_QuestionTypeLabel", children: [
-    n.label,
-    o === h.TRIVIA && t === R.RESOLVED && " • Expired"
+  /* @__PURE__ */ jsxs(d$3, { className: "SL_QuestionTypeLabel", children: [
+    e2.label,
+    n2 === QuestionType.TRIVIA && a2 === QuestionStatus.RESOLVED && " • Expired"
   ] })
-] }), di = ({
-  questionId: n,
-  questionType: o,
-  questionStatus: t,
-  subject: i,
-  openForVoting: a,
-  status: p
+] }), R$2 = ({
+  questionId: e2,
+  questionType: n2,
+  questionStatus: a2,
+  subject: u2,
+  openForVoting: d2,
+  status: m2
 }) => {
-  const l = M[o], r = Js[p];
-  return l ? /* @__PURE__ */ c(Bs, { "data-a": "intr", "data-name": n, children: [
-    /* @__PURE__ */ c(Ys, { children: [
-      /* @__PURE__ */ s(
-        B,
+  const c2 = e$8[n2], Q2 = w$2[m2];
+  return c2 ? /* @__PURE__ */ jsxs(r$9, { "data-a": "intr", "data-name": e2, children: [
+    /* @__PURE__ */ jsxs(q$1, { children: [
+      /* @__PURE__ */ jsx(
+        x$4,
         {
-          questionTypeData: l,
-          questionType: o,
-          questionStatus: t
+          questionTypeData: c2,
+          questionType: n2,
+          questionStatus: a2
         }
       ),
-      /* @__PURE__ */ s(Ps, { children: i || "" })
+      /* @__PURE__ */ jsx(I$4, { children: u2 || "" })
     ] }),
-    /* @__PURE__ */ s(zs, { children: a ? /* @__PURE__ */ s(Ks, { "data-a": "intr", "data-name": n, children: "Play" }) : r })
+    /* @__PURE__ */ jsx(Q$1, { children: d2 ? /* @__PURE__ */ jsx(S$4, { "data-a": "intr", "data-name": e2, children: "Play" }) : Q2 })
   ] }) : null;
 };
-var U;
-(function(n) {
-  n.OPENED = "opened";
-})(U || (U = {}));
-const b = /* @__PURE__ */ e("div")({
+var KEY_PREFIX;
+(function(KEY_PREFIX2) {
+  KEY_PREFIX2["OPENED"] = "opened";
+})(KEY_PREFIX || (KEY_PREFIX = {}));
+const e$5 = /* @__PURE__ */ styled_default("div")({
   name: "Media",
   class: "m1bcvojl",
-  propsAsIs: !1
-}), Zs = () => b, se = /* @__PURE__ */ e(Zs())({
+  propsAsIs: false
+}), I$3 = () => e$5, l$9 = /* @__PURE__ */ styled_default(I$3())({
   name: "MediaImgBottom",
   class: "m58gin0",
-  propsAsIs: !0
-}), ee = () => b, L = /* @__PURE__ */ e(ee())({
+  propsAsIs: true
+}), g$2 = () => e$5, t$d = /* @__PURE__ */ styled_default(g$2())({
   name: "MediaImgSolid",
   class: "m1atm8do",
-  propsAsIs: !0
-}), ne = () => b, oe = /* @__PURE__ */ e(ne())({
+  propsAsIs: true
+}), M = () => e$5, u$6 = /* @__PURE__ */ styled_default(M())({
   name: "MediaImgRounded",
   class: "myx3xoi",
-  propsAsIs: !0
-}), ie = () => b, te = /* @__PURE__ */ e(ie())({
+  propsAsIs: true
+}), x$3 = () => e$5, N$3 = /* @__PURE__ */ styled_default(x$3())({
   name: "MediaImgCentered",
   class: "m1bwv0gx",
-  propsAsIs: !0
-}), ae = () => b, re = /* @__PURE__ */ e(ae())({
+  propsAsIs: true
+}), f$3 = () => e$5, A$5 = /* @__PURE__ */ styled_default(f$3())({
   name: "MediaImgInsight",
   class: "mntjanp",
-  propsAsIs: !0
-}), ce = /* @__PURE__ */ e("div")({
+  propsAsIs: true
+}), E$2 = /* @__PURE__ */ styled_default("div")({
   name: "VideoIcon",
   class: "v1kofb47",
-  propsAsIs: !1
-}), le = {
-  [v.UNSET]: L,
-  [v.NONE]: L,
-  [v.ROUNDED]: oe,
-  [v.CENTERED]: te,
-  [v.TRANSPARENT]: se,
-  [v.SOLID]: L
-}, _ = ({
-  src: n,
-  imageMode: o = v.UNSET,
-  withVideo: t,
-  fromInsight: i
+  propsAsIs: false
+}), S$3 = {
+  [QuestionImages.UNSET]: t$d,
+  [QuestionImages.NONE]: t$d,
+  [QuestionImages.ROUNDED]: u$6,
+  [QuestionImages.CENTERED]: N$3,
+  [QuestionImages.TRANSPARENT]: l$9,
+  [QuestionImages.SOLID]: t$d
+}, h$3 = ({
+  src: a2,
+  imageMode: i2 = QuestionImages.UNSET,
+  withVideo: m2,
+  fromInsight: c2
 }) => {
-  if (o === v.NONE)
+  if (i2 === QuestionImages.NONE)
     return null;
-  const a = i ? re : le[o];
-  return /* @__PURE__ */ c(a, {
-    children: [/* @__PURE__ */ s("img", {
-      src: n,
+  const d2 = c2 ? A$5 : S$3[i2];
+  return /* @__PURE__ */ jsxs(d2, {
+    children: [/* @__PURE__ */ jsx("img", {
+      src: a2,
       alt: ""
-    }), t && /* @__PURE__ */ s(ce, {
-      children: /* @__PURE__ */ s(I, {
+    }), m2 && /* @__PURE__ */ jsx(E$2, {
+      children: /* @__PURE__ */ jsx(B1, {
         name: "icon-play"
       })
     })]
   });
-}, de = /* @__PURE__ */ e("div")({
+};
+const i$8 = /* @__PURE__ */ styled_default("div")({
   name: "NotificationContent",
   class: "nuraq9m",
-  propsAsIs: !1
-}), pe = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), c$9 = /* @__PURE__ */ styled_default("div")({
   name: "NotificationContainer",
   class: "ns1nzpg",
-  propsAsIs: !1
-}), ns = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), r$8 = /* @__PURE__ */ styled_default("div")({
   name: "Body",
   class: "b1j59nzs",
-  propsAsIs: !1
-}), me = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), p$9 = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "t9vmnpp",
-  propsAsIs: !1
-}), ue = /* @__PURE__ */ e("button")({
+  propsAsIs: false
+}), l$8 = /* @__PURE__ */ styled_default("button")({
   name: "Button",
   class: "b14ivj5k",
-  propsAsIs: !1
-}), ve = () => I, Ie = /* @__PURE__ */ e(ve())({
+  propsAsIs: false
+}), t$c = () => B1, m$4 = /* @__PURE__ */ styled_default(t$c())({
   name: "StyledChevronRight",
   class: "s1atci8n",
-  propsAsIs: !0
-}), Ae = /* @__PURE__ */ e("div")({
+  propsAsIs: true
+});
+const a$a = /* @__PURE__ */ styled_default("div")({
   name: "QuoteWrap",
   class: "q4w8jgs",
-  propsAsIs: !1
-}), he = /* @__PURE__ */ e("blockquote")({
+  propsAsIs: false
+}), e$4 = /* @__PURE__ */ styled_default("blockquote")({
   name: "Quote",
   class: "qaa0kez",
-  propsAsIs: !1
-}), $e = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), t$b = /* @__PURE__ */ styled_default("div")({
   name: "Body",
   class: "b1wvd52w",
-  propsAsIs: !1
-}), ge = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), n$3 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "ccvukea",
-  propsAsIs: !1
-}), we = ({ image: n, tweet: o, account: t, accountVerified: i, body: a, title: p }) => {
-  var l;
-  return /* @__PURE__ */ c(ge, { children: [
-    p && /* @__PURE__ */ s(Ae, { children: /* @__PURE__ */ s(he, { children: p }) }),
-    /* @__PURE__ */ s(
-      fs,
+  propsAsIs: false
+});
+const Q = ({ image: m2, tweet: r2, account: a2, accountVerified: c2, body: d2, title: n2 }) => {
+  var i2;
+  return /* @__PURE__ */ jsxs(n$3, { children: [
+    n2 && /* @__PURE__ */ jsx(a$a, { children: /* @__PURE__ */ jsx(e$4, { children: n2 }) }),
+    /* @__PURE__ */ jsx(
+      D$3,
       {
-        image: n,
-        name: (l = o == null ? void 0 : o.meta) == null ? void 0 : l.accountName,
-        userName: t,
-        verified: i,
-        createdTweet: o == null ? void 0 : o.date
+        image: m2,
+        name: (i2 = r2 == null ? void 0 : r2.meta) == null ? void 0 : i2.accountName,
+        userName: a2,
+        verified: c2,
+        createdTweet: r2 == null ? void 0 : r2.date
       }
     ),
-    /* @__PURE__ */ s($e, { children: ks(a) })
+    /* @__PURE__ */ jsx(t$b, { children: D$4(d2) })
   ] });
-}, ye = ({ title: n, questionType: o, questionTypeData: t }) => /* @__PURE__ */ c(ns, { children: [
-  /* @__PURE__ */ s(
-    B,
+};
+const F$1 = ({ title: t2, questionType: n2, questionTypeData: r2 }) => /* @__PURE__ */ jsxs(r$8, { children: [
+  /* @__PURE__ */ jsx(
+    x$4,
     {
-      questionTypeData: t,
-      questionType: o,
-      questionStatus: R.UNSET
+      questionTypeData: r2,
+      questionType: n2,
+      questionStatus: QuestionStatus.UNSET
     }
   ),
-  n && /* @__PURE__ */ s(me, { children: n })
-] }), Te = ({ tweet: n }) => n ? /* @__PURE__ */ s(ns, { children: /* @__PURE__ */ s(we, { ...n, controlVideo: () => {
-} }) }) : null, be = ({ action: n, questionType: o, inApp: t, insight: i, tweet: a }) => {
-  var p;
-  const l = M[o], r = qs[o];
-  if (!l || !t || !t.notification)
+  t2 && /* @__PURE__ */ jsx(p$9, { children: t2 })
+] }), L$3 = ({ tweet: t2 }) => t2 ? /* @__PURE__ */ jsx(r$8, { children: /* @__PURE__ */ jsx(Q, { ...t2, controlVideo: () => {
+} }) }) : null, k$2 = ({ action: t2, questionType: n2, inApp: r2, insight: e2, tweet: i2 }) => {
+  var s2;
+  const d2 = e$8[n2], C2 = o$4[n2];
+  if (!d2 || !r2 || !r2.notification)
     return null;
-  const { title: m, image: u, imageMode: A } = t.notification;
-  let g = u;
-  o === h.TWEET && a != null && a.tweetMedia && (g = a.tweetMedia.image), A === v.NONE && (g = "");
-  const $ = t.useMediaFromContent && (i == null ? void 0 : i.image), d = o === h.TWEET && ((p = a == null ? void 0 : a.tweetMedia) == null ? void 0 : p.video) || o === h.FACTOID && (i == null ? void 0 : i.video);
-  return /* @__PURE__ */ s(pe, { "data-a": "intr", className: "SL_InApp", onClick: n, children: /* @__PURE__ */ c(de, { style: g ? {} : { paddingLeft: "1.5rem" }, children: [
-    g && !$ && /* @__PURE__ */ s(_, { src: g, imageMode: A, withVideo: !!d }),
-    $ && /* @__PURE__ */ s(_, { src: $, fromInsight: !0, withVideo: !!d }),
-    o === h.TWEET ? /* @__PURE__ */ s(Te, { tweet: a }) : /* @__PURE__ */ s(ye, { questionTypeData: l, questionType: o, title: m }),
-    /* @__PURE__ */ s(ue, { name: "inapp-button", children: r || "Open" }),
-    /* @__PURE__ */ s(Ie, { name: "chevronRight" })
+  const { title: E2, image: I2, imageMode: f2 } = r2.notification;
+  let a2 = I2;
+  n2 === QuestionType.TWEET && (i2 != null && i2.tweetMedia) && (a2 = i2.tweetMedia.image), f2 === QuestionImages.NONE && (a2 = "");
+  const m2 = r2.useMediaFromContent && (e2 == null ? void 0 : e2.image), l2 = n2 === QuestionType.TWEET && ((s2 = i2 == null ? void 0 : i2.tweetMedia) == null ? void 0 : s2.video) || n2 === QuestionType.FACTOID && (e2 == null ? void 0 : e2.video);
+  return /* @__PURE__ */ jsx(c$9, { "data-a": "intr", className: "SL_InApp", onClick: t2, children: /* @__PURE__ */ jsxs(i$8, { style: a2 ? {} : { paddingLeft: "1.5rem" }, children: [
+    a2 && !m2 && /* @__PURE__ */ jsx(h$3, { src: a2, imageMode: f2, withVideo: !!l2 }),
+    m2 && /* @__PURE__ */ jsx(h$3, { src: m2, fromInsight: true, withVideo: !!l2 }),
+    n2 === QuestionType.TWEET ? /* @__PURE__ */ jsx(L$3, { tweet: i2 }) : /* @__PURE__ */ jsx(F$1, { questionTypeData: d2, questionType: n2, title: E2 }),
+    /* @__PURE__ */ jsx(l$8, { name: "inapp-button", children: C2 || "Open" }),
+    /* @__PURE__ */ jsx(m$4, { name: "chevronRight" })
   ] }) });
-}, Ce = () => ({
-  color: n
-}) => n || "transparent", W = /* @__PURE__ */ e("div")({
+};
+const N$2 = () => ({
+  color: n2
+}) => n2 || "transparent", m$3 = /* @__PURE__ */ styled_default("div")({
   name: "MediaComponentWrap",
   class: "mek728j",
-  propsAsIs: !1,
+  propsAsIs: false,
   vars: {
-    "mek728j-0": [Ce()]
+    "mek728j-0": [N$2()]
   }
-}), T = /* @__PURE__ */ e("div")({
+}), t$a = /* @__PURE__ */ styled_default("div")({
   name: "Media",
   class: "m461t56",
-  propsAsIs: !1
-}), Ne = () => T, fe = /* @__PURE__ */ e(Ne())({
+  propsAsIs: false
+}), u$5 = () => t$a, g$1 = /* @__PURE__ */ styled_default(u$5())({
   name: "MediaImgBottom",
   class: "m22bh04",
-  propsAsIs: !0
-}), ke = () => T, qe = /* @__PURE__ */ e(ke())({
+  propsAsIs: true
+}), A$4 = () => t$a, f$2 = /* @__PURE__ */ styled_default(A$4())({
   name: "MediaVideo",
   class: "m17u1e34",
-  propsAsIs: !0
-}), Se = () => T, Ee = /* @__PURE__ */ e(Se())({
+  propsAsIs: true
+}), C$3 = () => t$a, x$2 = /* @__PURE__ */ styled_default(C$3())({
   name: "MediaImgContentMedia",
   class: "m4j3eds",
-  propsAsIs: !0
-}), Le = () => T, xe = /* @__PURE__ */ e(Le())({
+  propsAsIs: true
+}), E$1 = () => t$a, _$1 = /* @__PURE__ */ styled_default(E$1())({
   name: "MediaImgSolid",
   class: "m1lp3swr",
-  propsAsIs: !0
-}), De = () => T, Me = /* @__PURE__ */ e(De())({
+  propsAsIs: true
+}), R$1 = () => t$a, S$2 = /* @__PURE__ */ styled_default(R$1())({
   name: "MediaImgRounded",
   class: "mc7lij",
-  propsAsIs: !0
-}), Re = () => T, Oe = /* @__PURE__ */ e(Re())({
+  propsAsIs: true
+}), h$2 = () => t$a, j = /* @__PURE__ */ styled_default(h$2())({
   name: "MediaImgCentered",
   class: "mwwaw7o",
-  propsAsIs: !0
-}), Be = () => T, D = /* @__PURE__ */ e(Be())({
+  propsAsIs: true
+}), v$3 = () => t$a, a$9 = /* @__PURE__ */ styled_default(v$3())({
   name: "MediaNone",
   class: "mqfzyyr",
-  propsAsIs: !0
-}), je = "v170mtgf", Pe = {
-  [v.UNSET]: D,
-  [v.NONE]: D,
-  [v.ROUNDED]: Me,
-  [v.CENTERED]: Oe,
-  [v.TRANSPARENT]: fe,
-  [v.SOLID]: xe
-}, Y = ({
-  src: n,
-  imageMode: o = v.UNSET,
-  withVideo: t,
-  color: i,
-  useContentMedia: a,
-  thumbnailUrl: p
+  propsAsIs: true
+}), D$1 = "v170mtgf", T$1 = {
+  [QuestionImages.UNSET]: a$9,
+  [QuestionImages.NONE]: a$9,
+  [QuestionImages.ROUNDED]: S$2,
+  [QuestionImages.CENTERED]: j,
+  [QuestionImages.TRANSPARENT]: g$1,
+  [QuestionImages.SOLID]: _$1
+}, O$1 = ({
+  src: n2,
+  imageMode: d2 = QuestionImages.UNSET,
+  withVideo: r2,
+  color: i2,
+  useContentMedia: p2,
+  thumbnailUrl: c2
 }) => {
-  if (!n)
-    return /* @__PURE__ */ s(W, {
-      color: i,
-      children: /* @__PURE__ */ s(D, {})
+  if (!n2)
+    return /* @__PURE__ */ jsx(m$3, {
+      color: i2,
+      children: /* @__PURE__ */ jsx(a$9, {})
     });
-  const l = a === x.ENABLED ? Ee : Pe[o];
-  return /* @__PURE__ */ s(W, {
-    color: i,
-    children: t ? /* @__PURE__ */ s(qe, {
-      children: /* @__PURE__ */ s(Ls, {
-        className: je,
-        source: n,
-        poster: p || ""
+  const M2 = p2 === NotificationUseContentMedia.ENABLED ? x$2 : T$1[d2];
+  return /* @__PURE__ */ jsx(m$3, {
+    color: i2,
+    children: r2 ? /* @__PURE__ */ jsx(f$2, {
+      children: /* @__PURE__ */ jsx(Et, {
+        className: D$1,
+        source: n2,
+        poster: c2 || ""
       })
-    }) : /* @__PURE__ */ s(l, {
-      children: /* @__PURE__ */ s("img", {
-        src: n,
+    }) : /* @__PURE__ */ jsx(M2, {
+      children: /* @__PURE__ */ jsx("img", {
+        src: n2,
         alt: ""
       })
     })
   });
-}, ze = () => ({
-  withoutPadding: n
-}) => n ? "0px" : "1rem", os = /* @__PURE__ */ e("div")({
+};
+const i$7 = () => ({
+  withoutPadding: s2
+}) => s2 ? "0px" : "1rem", _ = /* @__PURE__ */ styled_default("div")({
   name: "NotificationContent",
   class: "n1p3bk1c",
-  propsAsIs: !1,
+  propsAsIs: false,
   vars: {
-    "n1p3bk1c-0": [ze()]
+    "n1p3bk1c-0": [i$7()]
   }
-}), Qe = /* @__PURE__ */ e("div")({
+}), T = /* @__PURE__ */ styled_default("div")({
   name: "MainContent",
   class: "m1g211mu",
-  propsAsIs: !1
-}), Ve = () => I, Fe = /* @__PURE__ */ e(Ve())({
+  propsAsIs: false
+}), r$7 = () => B1, h$1 = /* @__PURE__ */ styled_default(r$7())({
   name: "StyledChevronRight",
   class: "sx1hq4c",
-  propsAsIs: !0
-}), is = /* @__PURE__ */ e("div")({
+  propsAsIs: true
+}), c$8 = /* @__PURE__ */ styled_default("div")({
   name: "NotificationContainer",
   class: "n1fcriet",
-  propsAsIs: !1
-}), Ue = () => ({
-  questionType: n
-}) => n === h.FACTOID ? "7.3rem" : "4.5rem", _e = () => ({
-  webos: n
-}) => n ? "11px 0px 8px 0px" : "11px 0px", We = () => ({
-  imageMode: n,
-  webos: o
-}) => o ? "330px" : n === v.SOLID ? "310px" : n === v.CENTERED || n === v.ROUNDED || n === v.TRANSPARENT ? "370px" : "430px", Ye = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), l$7 = () => ({
+  questionType: s2
+}) => s2 === QuestionType.FACTOID ? "7.3rem" : "4.5rem", m$2 = () => ({
+  webos: s2
+}) => s2 ? "11px 0px 8px 0px" : "11px 0px", x$1 = () => ({
+  imageMode: s2,
+  webos: e2
+}) => e2 ? "330px" : s2 === QuestionImages.SOLID ? "310px" : s2 === QuestionImages.CENTERED || s2 === QuestionImages.ROUNDED || s2 === QuestionImages.TRANSPARENT ? "370px" : "430px", N$1 = /* @__PURE__ */ styled_default("div")({
   name: "Body",
   class: "b1byyovs",
-  propsAsIs: !1,
+  propsAsIs: false,
   vars: {
-    "b1byyovs-0": [Ue()],
-    "b1byyovs-1": [_e()],
-    "b1byyovs-2": [We()]
+    "b1byyovs-0": [l$7()],
+    "b1byyovs-1": [m$2()],
+    "b1byyovs-2": [x$1()]
   }
-}), Ke = () => ({
-  webos: n
-}) => n ? "0.85rem" : "1.033rem", Ge = () => ({
-  webos: n
-}) => n ? "0.95rem" : "1.25rem", He = () => ({
-  webos: n
-}) => n ? "4.7rem" : "2.25rem", Xe = () => ({
-  webos: n
-}) => n ? "pre-wrap" : "nowrap", Je = /* @__PURE__ */ e("div")({
+}), I$2 = () => ({
+  webos: s2
+}) => s2 ? "0.85rem" : "1.033rem", d$2 = () => ({
+  webos: s2
+}) => s2 ? "0.95rem" : "1.25rem", f$1 = () => ({
+  webos: s2
+}) => s2 ? "4.7rem" : "2.25rem", A$3 = () => ({
+  webos: s2
+}) => s2 ? "pre-wrap" : "nowrap", D = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "t1y5k5id",
-  propsAsIs: !1,
+  propsAsIs: false,
   vars: {
-    "t1y5k5id-0": [Ke()],
-    "t1y5k5id-1": [Ge()],
-    "t1y5k5id-2": [He()],
-    "t1y5k5id-3": [Xe()]
+    "t1y5k5id-0": [I$2()],
+    "t1y5k5id-1": [d$2()],
+    "t1y5k5id-2": [f$1()],
+    "t1y5k5id-3": [A$3()]
   }
-}), Ze = /* @__PURE__ */ e("div")({
+}), k$1 = /* @__PURE__ */ styled_default("div")({
   name: "Description",
   class: "dw9eb7l",
-  propsAsIs: !1
-}), sn = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), R = /* @__PURE__ */ styled_default("div")({
   name: "LogoImgContainer",
   class: "ldu8wgy",
-  propsAsIs: !1
-}), ts = /* @__PURE__ */ e("img")({
+  propsAsIs: false
+}), E = /* @__PURE__ */ styled_default("img")({
   name: "LogoImg",
   class: "ln4a3eh",
-  propsAsIs: !1
-}), en = () => is, nn = /* @__PURE__ */ e(en())({
+  propsAsIs: false
+}), u$4 = () => c$8, L$2 = /* @__PURE__ */ styled_default(u$4())({
   name: "NotificationInterstitialContainer",
   class: "no2k63v",
-  propsAsIs: !0
-}), on = /* @__PURE__ */ e("div")({
+  propsAsIs: true
+}), S$1 = /* @__PURE__ */ styled_default("div")({
   name: "TVButtons",
   class: "th9nn6a",
-  propsAsIs: !1
-}), as = /* @__PURE__ */ e("button")({
+  propsAsIs: false
+}), o$3 = /* @__PURE__ */ styled_default("button")({
   name: "TVButton",
   class: "t1eee77p",
-  propsAsIs: !1
-}), tn = () => as, an = /* @__PURE__ */ e(tn())({
+  propsAsIs: false
+}), v$2 = () => o$3, V = /* @__PURE__ */ styled_default(v$2())({
   name: "DismissButton",
   class: "ds000hw",
-  propsAsIs: !0
-}), rn = () => as, cn = /* @__PURE__ */ e(rn())({
+  propsAsIs: true
+}), y$3 = () => o$3, O = /* @__PURE__ */ styled_default(y$3())({
   name: "AnswerButton",
   class: "a1nz9hoe",
-  propsAsIs: !0
-}), ln = ({ title: n, questionType: o, questionTypeData: t, description: i, imageMode: a, webos: p }) => /* @__PURE__ */ c(Ye, { imageMode: a, questionType: o, webos: p, children: [
-  /* @__PURE__ */ s(
-    B,
+  propsAsIs: true
+});
+const g = ({ title: a2, questionType: c2, questionTypeData: e2, description: o2, imageMode: t2, webos: n2 }) => /* @__PURE__ */ jsxs(N$1, { imageMode: t2, questionType: c2, webos: n2, children: [
+  /* @__PURE__ */ jsx(
+    x$4,
     {
-      questionTypeData: t,
-      questionType: o,
-      questionStatus: R.UNSET
+      questionTypeData: e2,
+      questionType: c2,
+      questionStatus: QuestionStatus.UNSET
     }
   ),
-  n && /* @__PURE__ */ s(Je, { webos: p, children: n }),
-  i && /* @__PURE__ */ s(Ze, { children: i })
-] }), dn = O(nn), pn = O(an), mn = O(cn), un = ({
-  className: n,
-  sponsorLogo: o,
-  onClick: t,
-  webos: i
-}) => /* @__PURE__ */ s(
-  dn,
+  a2 && /* @__PURE__ */ jsx(D, { webos: n2, children: a2 }),
+  o2 && /* @__PURE__ */ jsx(k$1, { children: o2 })
+] }), A$2 = O$2(L$2), p$8 = O$2(V), oo = O$2(O), to = ({
+  className: a2,
+  sponsorLogo: c2,
+  onClick: e2,
+  webos: o2
+}) => /* @__PURE__ */ jsx(
+  A$2,
   {
-    className: n,
-    autoFocus: !0,
-    webos: i,
-    onClick: t,
-    "data-webos": i,
-    children: /* @__PURE__ */ s(os, { withoutPadding: !0, children: /* @__PURE__ */ s(ts, { src: o }) })
+    className: a2,
+    autoFocus: true,
+    webos: o2,
+    onClick: e2,
+    "data-webos": o2,
+    children: /* @__PURE__ */ jsx(_, { withoutPadding: true, children: /* @__PURE__ */ jsx(E, { src: c2 }) })
   }
-), vn = ({
-  action: n,
-  close: o,
-  questionType: t,
-  inApp: i,
-  insight: a,
-  color: p,
-  webos: l,
-  className: r
+), io = ({
+  action: a2,
+  close: c2,
+  questionType: e2,
+  inApp: o2,
+  insight: t2,
+  color: n2,
+  webos: s2,
+  className: L2
 }) => {
-  var m, u, A;
-  const [g, $] = w(!1), d = es();
-  y(() => (i != null && i.sponsorLogo && ($(!0), d.current = setTimeout(() => {
-    $(!1);
-  }, 5e3)), () => clearTimeout(d.current)), [i == null ? void 0 : i.sponsorLogo]);
-  const z = M[t];
-  if (!z || !i || !i.notification)
+  var B2, F2, w2;
+  const [v2, m2] = useState(false), N2 = useRef();
+  useEffect(() => (o2 != null && o2.sponsorLogo && (m2(true), N2.current = setTimeout(() => {
+    m2(false);
+  }, 5e3)), () => clearTimeout(N2.current)), [o2 == null ? void 0 : o2.sponsorLogo]);
+  const T$12 = e$8[e2];
+  if (!T$12 || !o2 || !o2.notification)
     return null;
-  const { title: Is, image: As, imageMode: k, useContentMedia: q } = i.notification, hs = t === h.FACTOID ? a == null ? void 0 : a.heading : Is, $s = t === h.FACTOID ? a == null ? void 0 : a.body : "", gs = As, S = t === h.FACTOID && ((m = a == null ? void 0 : a.video) == null ? void 0 : m.url) && (i == null ? void 0 : i.isVideo) && q === x.ENABLED, E = q === x.ENABLED ? S ? (u = a == null ? void 0 : a.video) == null ? void 0 : u.url : a == null ? void 0 : a.image : "";
-  return i != null && i.sponsorLogo && g ? /* @__PURE__ */ s(
-    un,
+  const { title: M2, image: U, imageMode: i2, useContentMedia: f2 } = o2.notification, V2 = e2 === QuestionType.FACTOID ? t2 == null ? void 0 : t2.heading : M2, k2 = e2 === QuestionType.FACTOID ? t2 == null ? void 0 : t2.body : "", x2 = U, C2 = e2 === QuestionType.FACTOID && ((B2 = t2 == null ? void 0 : t2.video) == null ? void 0 : B2.url) && (o2 == null ? void 0 : o2.isVideo) && f2 === NotificationUseContentMedia.ENABLED, I2 = f2 === NotificationUseContentMedia.ENABLED ? C2 ? (F2 = t2 == null ? void 0 : t2.video) == null ? void 0 : F2.url : t2 == null ? void 0 : t2.image : "";
+  return o2 != null && o2.sponsorLogo && v2 ? /* @__PURE__ */ jsx(
+    to,
     {
-      className: r,
-      sponsorLogo: i == null ? void 0 : i.sponsorLogo,
-      webos: l,
-      onClick: () => $(!1)
+      className: L2,
+      sponsorLogo: o2 == null ? void 0 : o2.sponsorLogo,
+      webos: s2,
+      onClick: () => m2(false)
     }
-  ) : /* @__PURE__ */ c(
-    is,
+  ) : /* @__PURE__ */ jsxs(
+    c$8,
     {
       "data-a": "intr",
-      className: bs("SL_InApp", r),
-      onClick: (C) => {
-        l || n == null || n(C);
+      className: cx_default("SL_InApp", L2),
+      onClick: (d2) => {
+        s2 || a2 == null || a2(d2);
       },
-      "data-is-insight": t === h.FACTOID,
-      "data-webos": l,
+      "data-is-insight": e2 === QuestionType.FACTOID,
+      "data-webos": s2,
       children: [
-        (i == null ? void 0 : i.sponsorLogo) && /* @__PURE__ */ s(sn, { children: /* @__PURE__ */ s(ts, { src: i == null ? void 0 : i.sponsorLogo }) }),
-        /* @__PURE__ */ c(os, { children: [
-          /* @__PURE__ */ c(Qe, { children: [
-            !E && /* @__PURE__ */ s(Y, { src: gs, imageMode: k, withVideo: !!S, color: p }),
-            E && /* @__PURE__ */ s(
-              Y,
+        (o2 == null ? void 0 : o2.sponsorLogo) && /* @__PURE__ */ jsx(R, { children: /* @__PURE__ */ jsx(E, { src: o2 == null ? void 0 : o2.sponsorLogo }) }),
+        /* @__PURE__ */ jsxs(_, { children: [
+          /* @__PURE__ */ jsxs(T, { children: [
+            !I2 && /* @__PURE__ */ jsx(O$1, { src: x2, imageMode: i2, withVideo: !!C2, color: n2 }),
+            I2 && /* @__PURE__ */ jsx(
+              O$1,
               {
-                src: E,
-                imageMode: k,
-                withVideo: !!S,
-                color: p,
-                useContentMedia: q,
-                thumbnailUrl: (A = a == null ? void 0 : a.video) == null ? void 0 : A.thumbnailUrl
+                src: I2,
+                imageMode: i2,
+                withVideo: !!C2,
+                color: n2,
+                useContentMedia: f2,
+                thumbnailUrl: (w2 = t2 == null ? void 0 : t2.video) == null ? void 0 : w2.thumbnailUrl
               }
             ),
-            /* @__PURE__ */ s(
-              ln,
+            /* @__PURE__ */ jsx(
+              g,
               {
-                questionTypeData: z,
-                questionType: t,
-                title: hs,
-                description: $s,
-                imageMode: k,
-                webos: l
+                questionTypeData: T$12,
+                questionType: e2,
+                title: V2,
+                description: k2,
+                imageMode: i2,
+                webos: s2
               }
             )
           ] }),
-          !l && /* @__PURE__ */ s(Fe, { name: "chevronRight" }),
-          l && /* @__PURE__ */ c(on, { children: [
-            /* @__PURE__ */ s(
-              pn,
+          !s2 && /* @__PURE__ */ jsx(h$1, { name: "chevronRight" }),
+          s2 && /* @__PURE__ */ jsxs(S$1, { children: [
+            /* @__PURE__ */ jsx(
+              p$8,
               {
-                webos: !0,
+                webos: true,
                 "data-close-btn": "true",
-                onClick: (C) => {
-                  C.stopPropagation(), o == null || o(C);
+                onClick: (d2) => {
+                  d2.stopPropagation(), c2 == null || c2(d2);
                 },
                 children: "Dismiss"
               }
             ),
-            /* @__PURE__ */ s(mn, { webos: !0, autoFocus: !0, onClick: n, children: "Answer" })
+            /* @__PURE__ */ jsx(oo, { webos: true, autoFocus: true, onClick: a2, children: "Answer" })
           ] })
         ] })
       ]
     }
   );
-}, In = /* @__PURE__ */ e("div")({
+};
+const p$7 = /* @__PURE__ */ styled_default("div")({
   name: "NotificationContainer",
   class: "n11jcrxe",
-  propsAsIs: !1
-}), K = /* @__PURE__ */ e("img")({
+  propsAsIs: false
+}), r$6 = /* @__PURE__ */ styled_default("img")({
   name: "Icon",
   class: "i1vmpt6u",
-  propsAsIs: !1
-}), An = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), l$6 = /* @__PURE__ */ styled_default("div")({
   name: "IconContainer",
   class: "i180665s",
-  propsAsIs: !1
-}), hn = () => I, $n = /* @__PURE__ */ e(hn())({
+  propsAsIs: false
+}), t$9 = () => B1, m$1 = /* @__PURE__ */ styled_default(t$9())({
   name: "TitleIcon",
   class: "t16zzzei",
-  propsAsIs: !0
-}), gn = () => xs, wn = /* @__PURE__ */ e(gn())({
+  propsAsIs: true
+}), e$3 = () => y$4, I$1 = /* @__PURE__ */ styled_default(e$3())({
   name: "Close",
   class: "c1sur0q2",
-  propsAsIs: !0
-}), yn = /* @__PURE__ */ e("div")({
+  propsAsIs: true
+}), f = /* @__PURE__ */ styled_default("div")({
   name: "Body",
   class: "bai9j52",
-  propsAsIs: !1
-}), Tn = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), d$1 = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "t1bnt25p",
-  propsAsIs: !1
-}), bn = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), u$3 = /* @__PURE__ */ styled_default("div")({
   name: "Description",
   class: "dmixjec",
-  propsAsIs: !1
-}), Cn = /* @__PURE__ */ e("button")({
+  propsAsIs: false
+}), A$1 = /* @__PURE__ */ styled_default("button")({
   name: "Button",
   class: "b1ubkw1q",
-  propsAsIs: !1
-}), Nn = ({
-  open: n,
-  close: o,
-  ...t
+  propsAsIs: false
+});
+const u$2 = ({
+  open: a2,
+  close: e2,
+  ...t2
 }) => {
-  var i, a;
-  return /* @__PURE__ */ c(
-    In,
+  var n2, c2;
+  return /* @__PURE__ */ jsxs(
+    p$7,
     {
       "data-a": "intr",
       onClick: () => {
-        n == null || n(), t && t.markIstantOpen();
+        a2 == null || a2(), t2 && t2.markIstantOpen();
       },
       children: [
-        /* @__PURE__ */ c(An, { children: [
-          /* @__PURE__ */ s(K, { className: "on-light", src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification.png" }),
-          /* @__PURE__ */ s(
-            K,
+        /* @__PURE__ */ jsxs(l$6, { children: [
+          /* @__PURE__ */ jsx(r$6, { className: "on-light", src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification.png" }),
+          /* @__PURE__ */ jsx(
+            r$6,
             {
               className: "on-dark",
               src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification-dark.png"
             }
           )
         ] }),
-        /* @__PURE__ */ c(yn, { children: [
-          /* @__PURE__ */ c(Tn, { children: [
-            /* @__PURE__ */ s($n, { name: "icon-trophy-solid" }),
-            (i = t == null ? void 0 : t.titleCard) == null ? void 0 : i.title
+        /* @__PURE__ */ jsxs(f, { children: [
+          /* @__PURE__ */ jsxs(d$1, { children: [
+            /* @__PURE__ */ jsx(m$1, { name: "icon-trophy-solid" }),
+            (n2 = t2 == null ? void 0 : t2.titleCard) == null ? void 0 : n2.title
           ] }),
-          /* @__PURE__ */ c(bn, { children: [
-            /* @__PURE__ */ s("span", { children: (a = t == null ? void 0 : t.titleCard) == null ? void 0 : a.subtitle }),
-            /* @__PURE__ */ s(Cn, { name: "inapp-button", children: "Play Now" })
+          /* @__PURE__ */ jsxs(u$3, { children: [
+            /* @__PURE__ */ jsx("span", { children: (c2 = t2 == null ? void 0 : t2.titleCard) == null ? void 0 : c2.subtitle }),
+            /* @__PURE__ */ jsx(A$1, { name: "inapp-button", children: "Play Now" })
           ] })
         ] }),
-        /* @__PURE__ */ s(
-          wn,
+        /* @__PURE__ */ jsx(
+          I$1,
           {
-            close: (p) => {
-              p == null || p.stopPropagation(), o == null || o();
+            close: (r2) => {
+              r2 == null || r2.stopPropagation(), e2 == null || e2();
             }
           }
         )
       ]
     }
   );
-}, fn = /* @__PURE__ */ e("div")({
+};
+const v$1 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "cef8huz",
-  propsAsIs: !1
-}), kn = () => I, qn = /* @__PURE__ */ e(kn())({
+  propsAsIs: false
+}), C$2 = () => B1, k = /* @__PURE__ */ styled_default(C$2())({
   name: "CheckIcon",
   class: "c1mo15kk",
-  propsAsIs: !0
-}), Sn = () => I, En = /* @__PURE__ */ e(Sn())({
+  propsAsIs: true
+}), A = () => B1, y$2 = /* @__PURE__ */ styled_default(A())({
   name: "PredictionIcon",
   class: "p16zkqnm",
-  propsAsIs: !0
-}), Ln = /* @__PURE__ */ e("div")({
+  propsAsIs: true
+}), x = /* @__PURE__ */ styled_default("div")({
   name: "PredictionIconContainer",
   class: "pjszi7a",
-  propsAsIs: !1
-}), xn = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), w$1 = /* @__PURE__ */ styled_default("div")({
   name: "BodyContainer",
   class: "bftbmo3",
-  propsAsIs: !1
-}), Dn = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), z = /* @__PURE__ */ styled_default("div")({
   name: "Body",
   class: "barrbyu",
-  propsAsIs: !1
-}), Mn = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), P = /* @__PURE__ */ styled_default("div")({
   name: "Subtitle",
   class: "sz7237i",
-  propsAsIs: !1
-}), Rn = ({
-  step: n,
-  children: o,
-  answer: t,
-  state: i = "pending"
+  propsAsIs: false
+}), q = ({
+  step: d2,
+  children: p2,
+  answer: l2,
+  state: m2 = "pending"
 }) => {
-  const [a, p] = w(0), [l] = w(() => new ResizeObserver((m) => {
+  const [f2, I2] = useState(0), [o2] = useState(() => new ResizeObserver((n2) => {
     window.requestAnimationFrame(() => {
-      var u, A;
-      p(((A = (u = m == null ? void 0 : m[0]) == null ? void 0 : u.contentRect) == null ? void 0 : A.width) ?? 0);
+      var t2, c2;
+      I2(((c2 = (t2 = n2 == null ? void 0 : n2[0]) == null ? void 0 : t2.contentRect) == null ? void 0 : c2.width) ?? 0);
     });
-  })), r = ys((m) => {
-    m ? l.observe(m) : l.disconnect();
-  }, [l]);
-  return y(() => () => {
-    l.disconnect();
-  }, [l]), /* @__PURE__ */ c(fn, {
-    children: [/* @__PURE__ */ s(Ln, {
-      children: /* @__PURE__ */ s(En, {
+  })), h2 = useCallback((n2) => {
+    n2 ? o2.observe(n2) : o2.disconnect();
+  }, [o2]);
+  return useEffect(() => () => {
+    o2.disconnect();
+  }, [o2]), /* @__PURE__ */ jsxs(v$1, {
+    children: [/* @__PURE__ */ jsx(x, {
+      children: /* @__PURE__ */ jsx(y$2, {
         name: "icon-prediction"
       })
-    }), /* @__PURE__ */ s(xn, {
+    }), /* @__PURE__ */ jsx(w$1, {
       style: {
-        minWidth: `${a}px`
+        minWidth: `${f2}px`
       },
-      children: /* @__PURE__ */ s(Dn, {
-        children: o
-      }, n)
-    }), /* @__PURE__ */ s(Mn, {
-      ref: r,
-      className: i,
-      children: /* @__PURE__ */ c("div", {
-        children: [/* @__PURE__ */ s(qn, {
+      children: /* @__PURE__ */ jsx(z, {
+        children: p2
+      }, d2)
+    }), /* @__PURE__ */ jsx(P, {
+      ref: h2,
+      className: m2,
+      children: /* @__PURE__ */ jsxs("div", {
+        children: [/* @__PURE__ */ jsx(k, {
           name: "icon-check"
-        }), "Your Pick: ", t]
+        }), "Your Pick: ", l2]
       })
     })]
   });
-}, On = /* @__PURE__ */ e("div")({
+};
+const i$6 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "ckyzolp",
-  propsAsIs: !1
-}), j = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), n$2 = /* @__PURE__ */ styled_default("div")({
   name: "Line",
   class: "l16t1zr7",
-  propsAsIs: !1
-}), Bn = () => j, jn = /* @__PURE__ */ e(Bn())({
+  propsAsIs: false
+}), r$5 = () => n$2, t$8 = /* @__PURE__ */ styled_default(r$5())({
   name: "Line1",
   class: "le78kvg",
-  propsAsIs: !0
-}), Pn = () => j, zn = /* @__PURE__ */ e(Pn())({
+  propsAsIs: true
+}), c$7 = () => n$2, l$5 = /* @__PURE__ */ styled_default(c$7())({
   name: "Line2",
   class: "l1o7966d",
-  propsAsIs: !0
-}), Qn = () => j, Vn = /* @__PURE__ */ e(Qn())({
+  propsAsIs: true
+}), p$6 = () => n$2, a$8 = /* @__PURE__ */ styled_default(p$6())({
   name: "Line3",
   class: "lu9lyxq",
-  propsAsIs: !0
-}), Fn = () => /* @__PURE__ */ c(On, {
-  children: [/* @__PURE__ */ s(jn, {
-    children: /* @__PURE__ */ s("div", {})
-  }), /* @__PURE__ */ s(zn, {
-    children: /* @__PURE__ */ s("div", {})
-  }), /* @__PURE__ */ s(Vn, {
-    children: /* @__PURE__ */ s("div", {})
+  propsAsIs: true
+}), L$1 = () => /* @__PURE__ */ jsxs(i$6, {
+  children: [/* @__PURE__ */ jsx(t$8, {
+    children: /* @__PURE__ */ jsx("div", {})
+  }), /* @__PURE__ */ jsx(l$5, {
+    children: /* @__PURE__ */ jsx("div", {})
+  }), /* @__PURE__ */ jsx(a$8, {
+    children: /* @__PURE__ */ jsx("div", {})
   })]
-}), Un = /* @__PURE__ */ e("div")({
+});
+const n$1 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c10jy6zf",
-  propsAsIs: !1
-}), _n = () => I, Wn = /* @__PURE__ */ e(_n())({
+  propsAsIs: false
+}), r$4 = () => B1, t$7 = /* @__PURE__ */ styled_default(r$4())({
   name: "CheckIcon",
   class: "c1c7scay",
-  propsAsIs: !0
-}), Yn = () => /* @__PURE__ */ c(Un, {
-  children: [/* @__PURE__ */ s(Wn, {
+  propsAsIs: true
+}), m = () => /* @__PURE__ */ jsxs(n$1, {
+  children: [/* @__PURE__ */ jsx(t$7, {
     name: "icon-check"
   }), " Prediction results are in!"]
-}), Kn = /* @__PURE__ */ e("div")({
+});
+const o$2 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "cf6k2yy",
-  propsAsIs: !1
-}), Gn = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), r$3 = /* @__PURE__ */ styled_default("div")({
   name: "Caption",
   class: "c1c8xjus",
-  propsAsIs: !1
-}), Hn = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), i$5 = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "t1d1uekn",
-  propsAsIs: !1
-}), Xn = ({
-  title: n
-}) => /* @__PURE__ */ c(Kn, {
-  children: [/* @__PURE__ */ s(Gn, {
+  propsAsIs: false
+}), l$4 = ({
+  title: n2
+}) => /* @__PURE__ */ jsxs(o$2, {
+  children: [/* @__PURE__ */ jsx(r$3, {
     children: "Results for"
-  }), /* @__PURE__ */ s(Hn, {
-    children: n
+  }), /* @__PURE__ */ jsx(i$5, {
+    children: n2
   })]
-}), rs = /* @__PURE__ */ e("div")({
+});
+const n = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c181a1as",
-  propsAsIs: !1
-}), cs = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), c$6 = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "t1cduox6",
-  propsAsIs: !1
-}), Jn = () => I, ls = /* @__PURE__ */ e(Jn())({
+  propsAsIs: false
+}), i$4 = () => B1, s$1 = /* @__PURE__ */ styled_default(i$4())({
   name: "CorrectIcon",
   class: "c1onrv6j",
-  propsAsIs: !0
-}), Zn = () => ls, so = /* @__PURE__ */ e(Zn())({
+  propsAsIs: true
+}), l$3 = () => s$1, p$5 = /* @__PURE__ */ styled_default(l$3())({
   name: "InCorrectIcon",
   class: "i17n9o7e",
-  propsAsIs: !0
-}), eo = () => /* @__PURE__ */ c(rs, {
-  children: [/* @__PURE__ */ c(cs, {
-    children: ["Congratulations!", /* @__PURE__ */ s("br", {}), "You answered correctly."]
-  }), /* @__PURE__ */ s(ls, {
+  propsAsIs: true
+}), d = () => /* @__PURE__ */ jsxs(n, {
+  children: [/* @__PURE__ */ jsxs(c$6, {
+    children: ["Congratulations!", /* @__PURE__ */ jsx("br", {}), "You answered correctly."]
+  }), /* @__PURE__ */ jsx(s$1, {
     name: "icon-check"
   })]
-}), no = ({
-  title: n
-}) => /* @__PURE__ */ c(rs, {
-  children: [/* @__PURE__ */ c(cs, {
-    children: ["Better luck next time!", /* @__PURE__ */ s("br", {}), "Correct: ", n]
-  }), /* @__PURE__ */ s(so, {
+}), u$1 = ({
+  title: t2
+}) => /* @__PURE__ */ jsxs(n, {
+  children: [/* @__PURE__ */ jsxs(c$6, {
+    children: ["Better luck next time!", /* @__PURE__ */ jsx("br", {}), "Correct: ", t2]
+  }), /* @__PURE__ */ jsx(p$5, {
     name: "icon-cross"
   })]
-}), oo = /* @__PURE__ */ e("div")({
+});
+const c$5 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "cnxgcs2",
-  propsAsIs: !1
-}), io = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), i$3 = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "t903f8n",
-  propsAsIs: !1
-}), to = () => I, ao = /* @__PURE__ */ e(to())({
+  propsAsIs: false
+}), p$4 = () => B1, a$7 = /* @__PURE__ */ styled_default(p$4())({
   name: "CheckIcon",
   class: "ceyu3qj",
-  propsAsIs: !0
-}), ro = ({
-  points: n
-}) => /* @__PURE__ */ c(oo, {
-  children: [/* @__PURE__ */ c(io, {
-    children: ["You won ", /* @__PURE__ */ s(Ds, {
+  propsAsIs: true
+}), u = ({
+  points: n2
+}) => /* @__PURE__ */ jsxs(c$5, {
+  children: [/* @__PURE__ */ jsxs(i$3, {
+    children: ["You won ", /* @__PURE__ */ jsx(d$4, {
       delay: 0.5,
       prefix: "+",
       suffix: " points",
-      value: n
+      value: n2
     })]
-  }), /* @__PURE__ */ s(ao, {
+  }), /* @__PURE__ */ jsx(a$7, {
     name: "icon-trophy-solid"
   })]
-}), G = /* @__PURE__ */ e("div")({
+});
+const a$6 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "cq3agu2",
-  propsAsIs: !1
-}), H = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), r$2 = /* @__PURE__ */ styled_default("div")({
   name: "Body",
   class: "b16qj0do",
-  propsAsIs: !1
-}), X = {
+  propsAsIs: false
+});
+const a$5 = {
   1: 3e3,
   2: 4e3,
   3: 4e3,
   4: 4e3
-}, co = ({ close: n, action: o, setStep: t, votedAnswer: i, correct: a, correctAnswerTitle: p, questionTitle: l, step: r }) => {
-  if (y(() => {
-    if (t) {
-      const u = setTimeout(() => {
-        X[r + 1] && (a || r < 3) ? t(r + 1) : n == null || n();
-      }, X[r]);
+}, y$1 = ({ close: m$12, action: o2, setStep: f2, votedAnswer: t2, correct: n2, correctAnswerTitle: u$22, questionTitle: e2, step: i2 }) => {
+  if (useEffect(() => {
+    if (f2) {
+      const p2 = setTimeout(() => {
+        a$5[i2 + 1] && (n2 || i2 < 3) ? f2(i2 + 1) : m$12 == null || m$12();
+      }, a$5[i2]);
       return () => {
-        u && clearTimeout(u);
+        p2 && clearTimeout(p2);
       };
     }
     return () => {
     };
-  }, [t, r, n, a]), r === 1)
-    return /* @__PURE__ */ s(G, { children: /* @__PURE__ */ s(H, { children: /* @__PURE__ */ s(Yn, {}) }) });
-  let m = "pending";
-  return (r === 3 || r === 4) && (m = a ? "correct" : "incorrect"), /* @__PURE__ */ s(G, { "data-a": "intr", onClick: () => o == null ? void 0 : o(), children: /* @__PURE__ */ c(H, { children: [
-    r !== 1 && /* @__PURE__ */ s(Fn, {}, r),
-    /* @__PURE__ */ c(Rn, { state: m, step: r, answer: (i == null ? void 0 : i.title) || "unknown", children: [
-      r === 2 && /* @__PURE__ */ s(Xn, { title: l || "unknown" }),
-      r === 3 && a && /* @__PURE__ */ s(eo, {}),
-      r === 3 && !a && /* @__PURE__ */ s(no, { title: p || "unknown" }),
-      r === 4 && /* @__PURE__ */ s(ro, { points: (i == null ? void 0 : i.points) || 0 })
+  }, [f2, i2, m$12, n2]), i2 === 1)
+    return /* @__PURE__ */ jsx(a$6, { children: /* @__PURE__ */ jsx(r$2, { children: /* @__PURE__ */ jsx(m, {}) }) });
+  let l2 = "pending";
+  return (i2 === 3 || i2 === 4) && (l2 = n2 ? "correct" : "incorrect"), /* @__PURE__ */ jsx(a$6, { "data-a": "intr", onClick: () => o2 == null ? void 0 : o2(), children: /* @__PURE__ */ jsxs(r$2, { children: [
+    i2 !== 1 && /* @__PURE__ */ jsx(L$1, {}, i2),
+    /* @__PURE__ */ jsxs(q, { state: l2, step: i2, answer: (t2 == null ? void 0 : t2.title) || "unknown", children: [
+      i2 === 2 && /* @__PURE__ */ jsx(l$4, { title: e2 || "unknown" }),
+      i2 === 3 && n2 && /* @__PURE__ */ jsx(d, {}),
+      i2 === 3 && !n2 && /* @__PURE__ */ jsx(u$1, { title: u$22 || "unknown" }),
+      i2 === 4 && /* @__PURE__ */ jsx(u, { points: (t2 == null ? void 0 : t2.points) || 0 })
     ] })
   ] }) });
-}, lo = ({ close: n, action: o, votedAnswer: t, correct: i, correctAnswerTitle: a, questionTitle: p }) => {
-  const [l, r] = w(1);
-  return /* @__PURE__ */ s(
-    co,
+}, G = ({ close: m2, action: o2, votedAnswer: f2, correct: t2, correctAnswerTitle: n2, questionTitle: u2 }) => {
+  const [e2, i2] = useState(1);
+  return /* @__PURE__ */ jsx(
+    y$1,
     {
-      close: n,
-      action: o,
-      votedAnswer: t,
-      correct: i,
-      correctAnswerTitle: a,
-      questionTitle: p,
-      setStep: r,
-      step: l,
+      close: m2,
+      action: o2,
+      votedAnswer: f2,
+      correct: t2,
+      correctAnswerTitle: n2,
+      questionTitle: u2,
+      setStep: i2,
+      step: e2,
       title: ""
     }
   );
-}, po = /* @__PURE__ */ e("div")({
+};
+const t$6 = /* @__PURE__ */ styled_default("div")({
   name: "NotificationContainer",
   class: "n1i4h28u",
-  propsAsIs: !1
-}), mo = ({ className: n, ...o }) => /* @__PURE__ */ s(po, { className: n, children: /* @__PURE__ */ s(lo, { ...o }) }), uo = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+});
+const c$4 = ({ className: r2, ...t2 }) => /* @__PURE__ */ jsx(t$6, { className: r2, children: /* @__PURE__ */ jsx(G, { ...t2 }) });
+const h = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "cwa9tgs",
-  propsAsIs: !1
-}), vo = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), l$2 = /* @__PURE__ */ styled_default("div")({
   name: "BodyContainer",
   class: "b1xx7swj",
-  propsAsIs: !1
-}), Io = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), w = /* @__PURE__ */ styled_default("div")({
   name: "Body",
   class: "b1a21en",
-  propsAsIs: !1
-}), Ao = ({
-  step: n,
-  children: o,
-  state: t = "pending"
+  propsAsIs: false
+}), C$1 = ({
+  step: n2,
+  children: i2,
+  state: c2 = "pending"
 }) => {
-  const [i, a] = w(0);
-  return y(() => {
-    const p = new ResizeObserver((l) => {
+  const [d2, a2] = useState(0);
+  return useEffect(() => {
+    const p2 = new ResizeObserver((t2) => {
       window.requestAnimationFrame(() => {
-        var r, m;
-        const u = ((m = (r = l == null ? void 0 : l[0]) == null ? void 0 : r.contentRect) == null ? void 0 : m.width) ?? 0;
-        a(u);
+        var o2, r2;
+        const x2 = ((r2 = (o2 = t2 == null ? void 0 : t2[0]) == null ? void 0 : o2.contentRect) == null ? void 0 : r2.width) ?? 0;
+        a2(x2);
       });
     });
     return () => {
-      p.disconnect();
+      p2.disconnect();
     };
-  }, []), /* @__PURE__ */ s(uo, {
+  }, []), /* @__PURE__ */ jsx(h, {
     style: {
-      padding: `${n === 3 && t === "incorrect" || n === 1 ? "5px 100px" : "5px 40px"}`
+      padding: `${n2 === 3 && c2 === "incorrect" || n2 === 1 ? "5px 100px" : "5px 40px"}`
     },
-    children: /* @__PURE__ */ s(vo, {
+    children: /* @__PURE__ */ jsx(l$2, {
       style: {
-        minWidth: `${i}px`
+        minWidth: `${d2}px`
       },
-      children: /* @__PURE__ */ s(Io, {
-        children: o
-      }, n)
+      children: /* @__PURE__ */ jsx(w, {
+        children: i2
+      }, n2)
     })
   });
-}, ho = /* @__PURE__ */ e("div")({
+};
+const o$1 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c1nd5cu8",
-  propsAsIs: !1
-}), P = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), e$2 = /* @__PURE__ */ styled_default("div")({
   name: "Line",
   class: "lgbipw0",
-  propsAsIs: !1
-}), $o = () => P, go = /* @__PURE__ */ e($o())({
+  propsAsIs: false
+}), r$1 = () => e$2, c$3 = /* @__PURE__ */ styled_default(r$1())({
   name: "Line1",
   class: "l1anth16",
-  propsAsIs: !0
-}), wo = () => P, yo = /* @__PURE__ */ e(wo())({
+  propsAsIs: true
+}), t$5 = () => e$2, p$3 = /* @__PURE__ */ styled_default(t$5())({
   name: "Line2",
   class: "l193yd7v",
-  propsAsIs: !0
-}), To = () => P, bo = /* @__PURE__ */ e(To())({
+  propsAsIs: true
+}), l$1 = () => e$2, a$4 = /* @__PURE__ */ styled_default(l$1())({
   name: "Line3",
   class: "lhbflsp",
-  propsAsIs: !0
-}), Co = () => /* @__PURE__ */ c(ho, {
-  children: [/* @__PURE__ */ s(go, {
-    children: /* @__PURE__ */ s("div", {})
-  }), /* @__PURE__ */ s(yo, {
-    children: /* @__PURE__ */ s("div", {})
-  }), /* @__PURE__ */ s(bo, {
-    children: /* @__PURE__ */ s("div", {})
+  propsAsIs: true
+}), L = () => /* @__PURE__ */ jsxs(o$1, {
+  children: [/* @__PURE__ */ jsx(c$3, {
+    children: /* @__PURE__ */ jsx("div", {})
+  }), /* @__PURE__ */ jsx(p$3, {
+    children: /* @__PURE__ */ jsx("div", {})
+  }), /* @__PURE__ */ jsx(a$4, {
+    children: /* @__PURE__ */ jsx("div", {})
   })]
-}), No = /* @__PURE__ */ e("div")({
+});
+const t$4 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c1lvd429",
-  propsAsIs: !1
-}), fo = () => I, ko = /* @__PURE__ */ e(fo())({
+  propsAsIs: false
+}), e$1 = () => B1, i$2 = /* @__PURE__ */ styled_default(e$1())({
   name: "PredictionIcon",
   class: "p1n4m87t",
-  propsAsIs: !0
-}), qo = () => /* @__PURE__ */ c(No, {
-  children: [/* @__PURE__ */ s(ko, {
+  propsAsIs: true
+}), a$3 = () => /* @__PURE__ */ jsxs(t$4, {
+  children: [/* @__PURE__ */ jsx(i$2, {
     name: "icon-prediction"
   }), " Prediction results are in!"]
-}), So = () => I, Eo = /* @__PURE__ */ e(So())({
+});
+const t$3 = () => B1, i$1 = /* @__PURE__ */ styled_default(t$3())({
   name: "CheckIcon",
   class: "c126r8f9",
-  propsAsIs: !0
-}), Lo = /* @__PURE__ */ e("div")({
+  propsAsIs: true
+}), p$2 = /* @__PURE__ */ styled_default("div")({
   name: "Answer",
   class: "a1o2rpgl",
-  propsAsIs: !1
-}), xo = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), a$2 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "cej6ci1",
-  propsAsIs: !1
-}), Do = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), l = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "tob24mr",
-  propsAsIs: !1
-}), Mo = ({
-  title: n,
-  answer: o
-}) => /* @__PURE__ */ c(xo, {
-  children: [/* @__PURE__ */ s(Do, {
-    children: n
-  }), /* @__PURE__ */ c(Lo, {
-    children: [/* @__PURE__ */ s(Eo, {
+  propsAsIs: false
+}), I = ({
+  title: n2,
+  answer: r2
+}) => /* @__PURE__ */ jsxs(a$2, {
+  children: [/* @__PURE__ */ jsx(l, {
+    children: n2
+  }), /* @__PURE__ */ jsxs(p$2, {
+    children: [/* @__PURE__ */ jsx(i$1, {
       name: "icon-prediction"
-    }), "Your Pick: ", o]
+    }), "Your Pick: ", r2]
   })]
-}), ds = /* @__PURE__ */ e("div")({
+});
+const o = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c1lesal4",
-  propsAsIs: !1
-}), ps = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), c$2 = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "tv66n4w",
-  propsAsIs: !1
-}), Ro = () => I, Oo = /* @__PURE__ */ e(Ro())({
+  propsAsIs: false
+}), a$1 = () => B1, p$1 = /* @__PURE__ */ styled_default(a$1())({
   name: "CorrectIcon",
   class: "cx0vlv2",
-  propsAsIs: !0
-}), ms = /* @__PURE__ */ e("div")({
+  propsAsIs: true
+}), t$2 = /* @__PURE__ */ styled_default("div")({
   name: "Answer",
   class: "akfh4v5",
-  propsAsIs: !1
-}), Bo = ({
-  answer: n
-}) => /* @__PURE__ */ c(ds, {
-  children: [/* @__PURE__ */ s(ps, {
+  propsAsIs: false
+}), v = ({
+  answer: s2
+}) => /* @__PURE__ */ jsxs(o, {
+  children: [/* @__PURE__ */ jsx(c$2, {
     children: "Congratulations! You answered correctly."
-  }), /* @__PURE__ */ c(ms, {
-    children: [/* @__PURE__ */ s(Oo, {
+  }), /* @__PURE__ */ jsxs(t$2, {
+    children: [/* @__PURE__ */ jsx(p$1, {
       name: "icon-correct"
-    }), "Your Pick: ", n]
+    }), "Your Pick: ", s2]
   })]
-}), jo = ({
-  title: n,
-  answer: o
-}) => /* @__PURE__ */ c(ds, {
-  children: [/* @__PURE__ */ c(ps, {
-    children: ["Better luck next time!", /* @__PURE__ */ s("br", {}), "Correct: ", n]
-  }), /* @__PURE__ */ c(ms, {
-    children: ["Your Pick: ", o]
+}), C = ({
+  title: s2,
+  answer: l2
+}) => /* @__PURE__ */ jsxs(o, {
+  children: [/* @__PURE__ */ jsxs(c$2, {
+    children: ["Better luck next time!", /* @__PURE__ */ jsx("br", {}), "Correct: ", s2]
+  }), /* @__PURE__ */ jsxs(t$2, {
+    children: ["Your Pick: ", l2]
   })]
-}), J = /* @__PURE__ */ e("div")({
+});
+const a = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "cmox3ot",
-  propsAsIs: !1
-}), Z = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), t$1 = /* @__PURE__ */ styled_default("div")({
   name: "Body",
   class: "bqq1ix4",
-  propsAsIs: !1
-}), ss = {
+  propsAsIs: false
+});
+const c$1 = {
   1: 3e3,
   2: 4e3,
   3: 4e3
-}, Po = ({ close: n, action: o, setStep: t, votedAnswer: i, correct: a, correctAnswerTitle: p, questionTitle: l, step: r }) => {
-  if (y(() => {
-    if (t) {
-      const u = setTimeout(() => {
-        ss[r + 1] && (a || r < 3) ? t(r + 1) : n == null || n();
-      }, ss[r]);
+}, y = ({ close: m2, action: u2, setStep: f2, votedAnswer: n2, correct: t2, correctAnswerTitle: o2, questionTitle: l2, step: i2 }) => {
+  if (useEffect(() => {
+    if (f2) {
+      const k2 = setTimeout(() => {
+        c$1[i2 + 1] && (t2 || i2 < 3) ? f2(i2 + 1) : m2 == null || m2();
+      }, c$1[i2]);
       return () => {
-        u && clearTimeout(u);
+        k2 && clearTimeout(k2);
       };
     }
     return () => {
     };
-  }, [t, r, n, a]), r === 1)
-    return /* @__PURE__ */ s(J, { children: /* @__PURE__ */ s(Z, { children: /* @__PURE__ */ s(qo, {}) }) });
-  let m = "pending";
-  return r === 3 && (m = a ? "correct" : "incorrect"), /* @__PURE__ */ s(J, { "data-a": "intr", onClick: () => o == null ? void 0 : o(), children: /* @__PURE__ */ c(Z, { children: [
-    r !== 1 && /* @__PURE__ */ s(Co, {}, r),
-    /* @__PURE__ */ c(Ao, { state: m, step: r, children: [
-      r === 2 && /* @__PURE__ */ s(Mo, { title: l || "unknown", answer: (i == null ? void 0 : i.title) || "unknown" }),
-      r === 3 && a && /* @__PURE__ */ s(Bo, { answer: (i == null ? void 0 : i.title) || "unknown" }),
-      r === 3 && !a && /* @__PURE__ */ s(jo, { title: p || "unknown", answer: (i == null ? void 0 : i.title) || "unknown" })
+  }, [f2, i2, m2, t2]), i2 === 1)
+    return /* @__PURE__ */ jsx(a, { children: /* @__PURE__ */ jsx(t$1, { children: /* @__PURE__ */ jsx(a$3, {}) }) });
+  let a$12 = "pending";
+  return i2 === 3 && (a$12 = t2 ? "correct" : "incorrect"), /* @__PURE__ */ jsx(a, { "data-a": "intr", onClick: () => u2 == null ? void 0 : u2(), children: /* @__PURE__ */ jsxs(t$1, { children: [
+    i2 !== 1 && /* @__PURE__ */ jsx(L, {}, i2),
+    /* @__PURE__ */ jsxs(C$1, { state: a$12, step: i2, children: [
+      i2 === 2 && /* @__PURE__ */ jsx(I, { title: l2 || "unknown", answer: (n2 == null ? void 0 : n2.title) || "unknown" }),
+      i2 === 3 && t2 && /* @__PURE__ */ jsx(v, { answer: (n2 == null ? void 0 : n2.title) || "unknown" }),
+      i2 === 3 && !t2 && /* @__PURE__ */ jsx(C, { title: o2 || "unknown", answer: (n2 == null ? void 0 : n2.title) || "unknown" })
     ] })
   ] }) });
-}, zo = ({ close: n, action: o, votedAnswer: t, correct: i, correctAnswerTitle: a, questionTitle: p }) => {
-  const [l, r] = w(1);
-  return /* @__PURE__ */ s(
-    Po,
+}, F = ({ close: m2, action: u2, votedAnswer: f2, correct: n2, correctAnswerTitle: t2, questionTitle: o2 }) => {
+  const [l2, i2] = useState(1);
+  return /* @__PURE__ */ jsx(
+    y,
     {
-      close: n,
-      action: o,
-      votedAnswer: t,
-      correct: i,
-      correctAnswerTitle: a,
-      questionTitle: p,
-      setStep: r,
-      step: l,
+      close: m2,
+      action: u2,
+      votedAnswer: f2,
+      correct: n2,
+      correctAnswerTitle: t2,
+      questionTitle: o2,
+      setStep: i2,
+      step: l2,
       title: ""
     }
   );
-}, us = /* @__PURE__ */ e("div")({
+};
+const s = /* @__PURE__ */ styled_default("div")({
   name: "NotificationContainer",
   class: "nn0nqh6",
-  propsAsIs: !1
-}), Qo = () => ({
-  withoutPadding: n
-}) => n ? "0px" : "1rem", Vo = /* @__PURE__ */ e("div")({
+  propsAsIs: false
+}), t = () => ({
+  withoutPadding: n2
+}) => n2 ? "0px" : "1rem", e = /* @__PURE__ */ styled_default("div")({
   name: "NotificationContent",
   class: "n1bcdf3j",
-  propsAsIs: !1,
+  propsAsIs: false,
   vars: {
-    "n1bcdf3j-0": [Qo()]
+    "n1bcdf3j-0": [t()]
   }
-}), vs = /* @__PURE__ */ e("img")({
+}), c = /* @__PURE__ */ styled_default("img")({
   name: "LogoImg",
   class: "l8jorbq",
-  propsAsIs: !1
-}), Fo = () => us, Uo = /* @__PURE__ */ e(Fo())({
+  propsAsIs: false
+}), i = () => s, r = /* @__PURE__ */ styled_default(i())({
   name: "NotificationInterstitialContainer",
   class: "nf920y3",
-  propsAsIs: !0
-}), _o = /* @__PURE__ */ e("div")({
+  propsAsIs: true
+}), p = /* @__PURE__ */ styled_default("div")({
   name: "LogoImgContainer",
   class: "lzsmehn",
-  propsAsIs: !1
-}), Wo = ({
-  className: n,
-  sponsorLogo: o,
-  onClick: t
-}) => /* @__PURE__ */ s(Uo, { className: n, onClick: t, children: /* @__PURE__ */ s(Vo, { withoutPadding: !0, children: /* @__PURE__ */ s(vs, { src: o }) }) }), Yo = ({ className: n, ...o }) => {
-  var t, i, a, p, l;
-  const [r, m] = w(!1), u = es();
-  return y(() => {
-    var A;
-    return (A = o == null ? void 0 : o.inApp) != null && A.sponsorLogo && (m(!0), u.current = setTimeout(() => {
-      m(!1);
-    }, 5e3)), () => clearTimeout(u.current);
-  }, [(t = o == null ? void 0 : o.inApp) == null ? void 0 : t.sponsorLogo]), (i = o == null ? void 0 : o.inApp) != null && i.sponsorLogo && r ? /* @__PURE__ */ s(
-    Wo,
+  propsAsIs: false
+});
+const N = ({
+  className: t2,
+  sponsorLogo: r$12,
+  onClick: i2
+}) => /* @__PURE__ */ jsx(r, { className: t2, onClick: i2, children: /* @__PURE__ */ jsx(e, { withoutPadding: true, children: /* @__PURE__ */ jsx(c, { src: r$12 }) }) }), S = ({ className: t2, ...r2 }) => {
+  var c$12, e2, a2, f2, l2;
+  const [i2, p$12] = useState(false), n2 = useRef();
+  return useEffect(() => {
+    var d2;
+    return (d2 = r2 == null ? void 0 : r2.inApp) != null && d2.sponsorLogo && (p$12(true), n2.current = setTimeout(() => {
+      p$12(false);
+    }, 5e3)), () => clearTimeout(n2.current);
+  }, [(c$12 = r2 == null ? void 0 : r2.inApp) == null ? void 0 : c$12.sponsorLogo]), (e2 = r2 == null ? void 0 : r2.inApp) != null && e2.sponsorLogo && i2 ? /* @__PURE__ */ jsx(
+    N,
     {
-      className: n,
-      sponsorLogo: (a = o.inApp) == null ? void 0 : a.sponsorLogo,
-      onClick: () => m(!1)
+      className: t2,
+      sponsorLogo: (a2 = r2.inApp) == null ? void 0 : a2.sponsorLogo,
+      onClick: () => p$12(false)
     }
-  ) : /* @__PURE__ */ s(us, { className: n, children: /* @__PURE__ */ c("div", { children: [
-    ((p = o == null ? void 0 : o.inApp) == null ? void 0 : p.sponsorLogo) && /* @__PURE__ */ s(_o, { children: /* @__PURE__ */ s(vs, { src: (l = o == null ? void 0 : o.inApp) == null ? void 0 : l.sponsorLogo }) }),
-    /* @__PURE__ */ s(zo, { ...o })
+  ) : /* @__PURE__ */ jsx(s, { className: t2, children: /* @__PURE__ */ jsxs("div", { children: [
+    ((f2 = r2 == null ? void 0 : r2.inApp) == null ? void 0 : f2.sponsorLogo) && /* @__PURE__ */ jsx(p, { children: /* @__PURE__ */ jsx(c, { src: (l2 = r2 == null ? void 0 : r2.inApp) == null ? void 0 : l2.sponsorLogo }) }),
+    /* @__PURE__ */ jsx(F, { ...r2 })
   ] }) });
-}, Ko = ({ sdk: n, webos: o }) => {
-  var t, i, a, p, l, r, m, u;
-  const [A] = w(n.getNotificationsStore()), g = Cs(A), $ = n.getFeature(Es.GAMES), d = Ts(() => n.getActiveNotification(), [n, g]);
-  return y(() => {
-    d && Ns.emit("notification", {
+};
+const K = ({ sdk: i2, webos: A2 }) => {
+  var e2, a2, r2, p2, c2, s2, d2, u2;
+  const [l2] = useState(i2.getNotificationsStore()), N2 = useStore(l2), n2 = i2.getFeature(SdkOverlayType.GAMES), t2 = useMemo(() => i2.getActiveNotification(), [i2, N2]);
+  return useEffect(() => {
+    t2 && eventBus.emit("notification", {
       action: "rendered",
       payload: {
-        questionId: d.data.questionId,
-        questionType: d.data.questionType
+        questionId: t2.data.questionId,
+        questionType: t2.data.questionType
       }
     });
-  }, [d]), d && d.type === Q.QUESTION_RESOLVED ? d.data.question && d.data.questionType === h.PREDICTION ? d && ((t = d.data.inApp) == null ? void 0 : t.adUnit) === F.STANDART ? /* @__PURE__ */ s(
-    Yo,
+  }, [t2]), t2 && t2.type === NotificationType.QUESTION_RESOLVED ? t2.data.question && t2.data.questionType === QuestionType.PREDICTION ? t2 && ((e2 = t2.data.inApp) == null ? void 0 : e2.adUnit) === AdUnit.STANDART ? /* @__PURE__ */ jsx(
+    S,
     {
-      action: d.action,
-      close: d.close,
-      ...d.data.question,
-      inApp: d.data.inApp
+      action: t2.action,
+      close: t2.close,
+      ...t2.data.question,
+      inApp: t2.data.inApp
     }
-  ) : /* @__PURE__ */ s(
-    mo,
+  ) : /* @__PURE__ */ jsx(
+    c$4,
     {
-      action: d.action,
-      close: d.close,
-      ...d.data.question
+      action: t2.action,
+      close: t2.close,
+      ...t2.data.question
     }
-  ) : null : d && d.type === Q.ONBOARDING ? d.data.onboarding ? /* @__PURE__ */ s(
-    Nn,
+  ) : null : t2 && t2.type === NotificationType.ONBOARDING ? t2.data.onboarding ? /* @__PURE__ */ jsx(
+    u$2,
     {
-      open: $ == null ? void 0 : $.openOnboarding,
-      close: d.close,
-      ...d.data.onboarding
+      open: n2 == null ? void 0 : n2.openOnboarding,
+      close: t2.close,
+      ...t2.data.onboarding
     }
-  ) : null : d && ((i = d.data.inApp) == null ? void 0 : i.adUnit) === F.STANDART ? /* @__PURE__ */ s(
-    vn,
+  ) : null : t2 && ((a2 = t2.data.inApp) == null ? void 0 : a2.adUnit) === AdUnit.STANDART ? /* @__PURE__ */ jsx(
+    io,
     {
-      ...d.data,
-      action: d.action,
-      close: d.close,
-      color: ((l = (p = (a = d == null ? void 0 : d.data) == null ? void 0 : a.inApp) == null ? void 0 : p.notification) == null ? void 0 : l.indicatorColor) || ((u = (m = (r = d == null ? void 0 : d.data) == null ? void 0 : r.inApp) == null ? void 0 : m.appearance) == null ? void 0 : u.primaryColor),
-      webos: o
+      ...t2.data,
+      action: t2.action,
+      close: t2.close,
+      color: ((c2 = (p2 = (r2 = t2 == null ? void 0 : t2.data) == null ? void 0 : r2.inApp) == null ? void 0 : p2.notification) == null ? void 0 : c2.indicatorColor) || ((u2 = (d2 = (s2 = t2 == null ? void 0 : t2.data) == null ? void 0 : s2.inApp) == null ? void 0 : d2.appearance) == null ? void 0 : u2.primaryColor),
+      webos: A2
+    }
+  ) : t2 && /* @__PURE__ */ jsx(k$2, { ...t2.data, action: t2.action });
+};
+const StreamLayerSDKNotification = ({ theme }) => {
+  const sdk = B();
+  const baseTheme = z$1();
+  const uiState = F$2();
+  if (!sdk) {
+    return null;
+  }
+  if (uiState.appNotification || uiState.onboardingNotification) {
+    if (uiState.app && !uiState.onboardingNotification) {
+      return null;
     }
-  ) : d && /* @__PURE__ */ s(be, { ...d.data, action: d.action });
-}, pi = ({ theme: n }) => {
-  const o = Ms(), t = Rs(), i = Os();
-  return o && (i.appNotification || i.onboardingNotification) ? i.app && !i.onboardingNotification ? null : /* @__PURE__ */ s("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ s(ws, { customTheme: n ?? t.theme, themeMode: t.themeMode, children: /* @__PURE__ */ s(Ko, { sdk: o }) }) }) : null;
+    return /* @__PURE__ */ jsx("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ jsx(h$4, { customTheme: theme ?? baseTheme.theme, themeMode: baseTheme.themeMode, children: /* @__PURE__ */ jsx(K, { sdk }) }) });
+  }
+  return null;
 };
 export {
-  li as D,
-  Ko as K,
-  di as R,
-  Ks as S,
-  pi as a,
-  Bs as r
+  D$2 as D,
+  K,
+  R$2 as R,
+  S$4 as S,
+  StreamLayerSDKNotification as a,
+  r$9 as r
 };