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