@streamlayer/react 1.21.4 → 1.22.1

package/lib/classic/es/notification2.js

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