@streamlayer/react 1.23.2 → 1.24.1

package/lib/es/notification.js

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