@streamlayer/react 1.11.3-rc.4 → 1.11.3

package/lib/es/notification.js

@@ -1,542 +1,468 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { e as D, i as M, N as q, p as u, s, P as L, X as R, Z as P, j as U, n as V, B as Q, f as F, u as K, d as W, c as B, h as G } from "./provider.js";
-import { useState as E, useMemo as H, useEffect as _ } from "react";
-import { S as Y, Q as f, f as d, g as Z } from "./useStreamLayerApp2.js";
-const $ = () => h, X = () => h, J = () => h, ee = () => h, se = () => h, h = /* @__PURE__ */ s("div")({
-  name: "g",
-  class: "g1mxl69i",
-  propsAsIs: !1
-}), te = /* @__PURE__ */ s($())({
-  name: "V",
-  class: "v1jt3w2c",
+import { f as m, s as e, a5 as L, a6 as z, a7 as B, V as O, a8 as R, g as P, d as Q, a as V, i as U, K as T, u as F, b as K, j as W, h as G } from "./provider.js";
+import { i as p, Q as I, j as Y, S as _ } from "./useStreamLayerApp2.js";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { useState as q, useEffect as E, useMemo as H } from "react";
+const h = /* @__PURE__ */ e("div")({
+  name: "Media",
+  class: "m1bcvojl",
+  propsAsIs: !1
+}), J = () => h, X = /* @__PURE__ */ e(J())({
+  name: "MediaImgBottom",
+  class: "m58gin0",
   propsAsIs: !0
-}), w = /* @__PURE__ */ s(X())({
-  name: "I",
-  class: "i178msgc",
+}), Z = () => h, C = /* @__PURE__ */ e(Z())({
+  name: "MediaImgSolid",
+  class: "m1atm8do",
   propsAsIs: !0
-}), ne = /* @__PURE__ */ s(J())({
-  name: "W",
-  class: "witns0f",
+}), ss = () => h, es = /* @__PURE__ */ e(ss())({
+  name: "MediaImgRounded",
+  class: "myx3xoi",
   propsAsIs: !0
-}), ae = /* @__PURE__ */ s(ee())({
-  name: "G",
-  class: "gw2eqv8",
+}), ns = () => h, ts = /* @__PURE__ */ e(ns())({
+  name: "MediaImgCentered",
+  class: "m1bwv0gx",
   propsAsIs: !0
-}), ie = /* @__PURE__ */ s(se())({
-  name: "H",
-  class: "h8e6tlf",
+}), os = () => h, is = /* @__PURE__ */ e(os())({
+  name: "MediaImgInsight",
+  class: "mntjanp",
   propsAsIs: !0
-}), oe = /* @__PURE__ */ s("div")({
-  name: "K",
-  class: "k1d4kk25",
-  propsAsIs: !1
-}), le = {
-  [d.UNSET]: w,
-  [d.NONE]: w,
-  [d.ROUNDED]: ne,
-  [d.CENTERED]: ae,
-  [d.TRANSPARENT]: te
+}), as = /* @__PURE__ */ e("div")({
+  name: "VideoIcon",
+  class: "v1kofb47",
+  propsAsIs: !1
+}), cs = {
+  [p.UNSET]: C,
+  [p.NONE]: C,
+  [p.ROUNDED]: es,
+  [p.CENTERED]: ts,
+  [p.TRANSPARENT]: X
 }, N = ({
-  src: n,
-  imageMode: a = d.UNSET,
+  src: t,
+  imageMode: o = p.UNSET,
   withVideo: i,
-  fromInsight: o
+  fromInsight: a
 }) => {
-  if (a === d.NONE) return null;
-  const t = o ? ie : le[a];
-  return /* @__PURE__ */ l(t, {
-    children: [/* @__PURE__ */ e("img", {
-      src: n,
+  if (o === p.NONE)
+    return null;
+  const n = a ? is : cs[o];
+  return /* @__PURE__ */ c(n, {
+    children: [/* @__PURE__ */ s("img", {
+      src: t,
       alt: ""
-    }), i && /* @__PURE__ */ e(oe, {
-      children: /* @__PURE__ */ e(u, {
+    }), i && /* @__PURE__ */ s(as, {
+      children: /* @__PURE__ */ s(m, {
         name: "icon-play"
       })
     })]
   });
-}, re = () => u, ce = () => u, pe = () => U, de = () => u, ue = () => u, me = () => g, fe = () => g, he = () => g, ve = () => u, Ie = () => u, Ae = () => C, ge = () => u, ye = /* @__PURE__ */ s("div")({
-  name: "Z",
-  class: "z1qm1hyz",
+}, rs = /* @__PURE__ */ e("div")({
+  name: "NotificationContent",
+  class: "nuraq9m",
   propsAsIs: !1
-}), Te = /* @__PURE__ */ s("div")({
-  name: "tt",
-  class: "t27jvdr",
+}), ls = /* @__PURE__ */ e("div")({
+  name: "NotificationContainer",
+  class: "ns1nzpg",
   propsAsIs: !1
-}), j = /* @__PURE__ */ s("div")({
-  name: "L",
-  class: "l1jox3sj",
+}), j = /* @__PURE__ */ e("div")({
+  name: "Body",
+  class: "b1j59nzs",
   propsAsIs: !1
-}), qe = /* @__PURE__ */ s("div")({
-  name: "et",
-  class: "e19jnjng",
+}), ds = /* @__PURE__ */ e("div")({
+  name: "Title",
+  class: "t9vmnpp",
   propsAsIs: !1
-}), we = /* @__PURE__ */ s("button")({
-  name: "it",
-  class: "ir43pdl",
+}), ps = /* @__PURE__ */ e("button")({
+  name: "Button",
+  class: "b14ivj5k",
   propsAsIs: !1
-}), Ne = /* @__PURE__ */ s(re())({
-  name: "nt",
-  class: "nbnqqq5",
+}), ms = () => m, us = /* @__PURE__ */ e(ms())({
+  name: "StyledChevronRight",
+  class: "s1atci8n",
   propsAsIs: !0
-}), ke = /* @__PURE__ */ s("div")({
-  name: "ot",
-  class: "o1bhnjnl",
-  propsAsIs: !1
-}), xe = /* @__PURE__ */ s("blockquote")({
-  name: "rt",
-  class: "r13lqzum",
-  propsAsIs: !1
-}), Se = /* @__PURE__ */ s("div")({
-  name: "at",
-  class: "a167n9j1",
-  propsAsIs: !1
-}), be = /* @__PURE__ */ s("div")({
-  name: "ct",
-  class: "c55pgud",
-  propsAsIs: !1
-}), Ee = ({
-  image: n,
-  tweet: a,
-  account: i,
-  accountVerified: o,
-  body: t,
-  title: c
-}) => {
-  var p;
-  return /* @__PURE__ */ l(be, {
-    children: [c && /* @__PURE__ */ e(ke, {
-      children: /* @__PURE__ */ e(xe, {
-        children: c
-      })
-    }), /* @__PURE__ */ e(V, {
-      image: n,
-      name: (p = a == null ? void 0 : a.meta) == null ? void 0 : p.accountName,
-      userName: i,
-      verified: o,
-      createdTweet: a == null ? void 0 : a.date
-    }), /* @__PURE__ */ e(Se, {
-      children: Q(t)
-    })]
-  });
-}, _e = ({
-  title: n,
-  questionType: a,
-  questionTypeData: i
-}) => /* @__PURE__ */ l(j, {
-  children: [/* @__PURE__ */ e(L, {
-    questionTypeData: i,
-    questionType: a,
-    questionStatus: Z.UNSET
-  }), n && /* @__PURE__ */ e(qe, {
-    children: n
-  })]
-}), je = ({
-  tweet: n
-}) => n ? /* @__PURE__ */ e(j, {
-  children: /* @__PURE__ */ e(Ee, {
-    ...n,
-    controlVideo: () => {
+}), Is = /* @__PURE__ */ e("div")({
+  name: "QuoteWrap",
+  class: "q4w8jgs",
+  propsAsIs: !1
+}), hs = /* @__PURE__ */ e("blockquote")({
+  name: "Quote",
+  class: "qaa0kez",
+  propsAsIs: !1
+}), vs = /* @__PURE__ */ e("div")({
+  name: "Body",
+  class: "b1wvd52w",
+  propsAsIs: !1
+}), As = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "ccvukea",
+  propsAsIs: !1
+}), $s = ({ image: t, tweet: o, account: i, accountVerified: a, body: n, title: l }) => {
+  var d;
+  return /* @__PURE__ */ c(As, { children: [
+    l && /* @__PURE__ */ s(Is, { children: /* @__PURE__ */ s(hs, { children: l }) }),
+    /* @__PURE__ */ s(
+      L,
+      {
+        image: t,
+        name: (d = o == null ? void 0 : o.meta) == null ? void 0 : d.accountName,
+        userName: i,
+        verified: a,
+        createdTweet: o == null ? void 0 : o.date
+      }
+    ),
+    /* @__PURE__ */ s(vs, { children: z(n) })
+  ] });
+}, ys = ({ title: t, questionType: o, questionTypeData: i }) => /* @__PURE__ */ c(j, { children: [
+  /* @__PURE__ */ s(
+    B,
+    {
+      questionTypeData: i,
+      questionType: o,
+      questionStatus: Y.UNSET
     }
-  })
-}) : null, ze = ({
-  action: n,
-  questionType: a,
-  inApp: i,
-  insight: o,
-  tweet: t
-}) => {
-  var c;
-  const p = R[a], r = P[a];
-  if (!p || !i || !i.notification) return null;
-  const {
-    title: v,
-    image: I,
-    imageMode: y
-  } = i.notification;
-  let m = I;
-  a === f.TWEET && t != null && t.tweetMedia && (m = t.tweetMedia.image), y === d.NONE && (m = "");
-  const A = i.useMediaFromContent && (o == null ? void 0 : o.image), T = a === f.TWEET && ((c = t == null ? void 0 : t.tweetMedia) == null ? void 0 : c.video) || a === f.FACTOID && (o == null ? void 0 : o.video);
-  return /* @__PURE__ */ e(Te, {
-    className: "SL_InApp",
-    onClick: n,
-    children: /* @__PURE__ */ l(ye, {
-      style: m ? {} : {
-        paddingLeft: "1.5rem"
-      },
-      children: [m && !A && /* @__PURE__ */ e(N, {
-        src: m,
-        imageMode: y,
-        withVideo: !!T
-      }), A && /* @__PURE__ */ e(N, {
-        src: A,
-        fromInsight: !0,
-        withVideo: !!T
-      }), a === f.TWEET ? /* @__PURE__ */ e(je, {
-        tweet: t
-      }) : /* @__PURE__ */ e(_e, {
-        questionTypeData: p,
-        questionType: a,
-        title: v
-      }), /* @__PURE__ */ e(we, {
-        name: "inapp-button",
-        children: r || "Open"
-      }), /* @__PURE__ */ e(Ne, {
-        name: "chevronRight"
-      })]
-    })
-  });
-}, Oe = /* @__PURE__ */ s("div")({
-  name: "ht",
-  class: "hjq7nef",
-  propsAsIs: !1
-}), k = /* @__PURE__ */ s("img")({
-  name: "S",
-  class: "s1wpz4bk",
-  propsAsIs: !1
-}), Ce = /* @__PURE__ */ s("div")({
-  name: "mt",
-  class: "m9a4mjd",
-  propsAsIs: !1
-}), De = /* @__PURE__ */ s(ce())({
-  name: "ft",
-  class: "f1hieehz",
+  ),
+  t && /* @__PURE__ */ s(ds, { children: t })
+] }), fs = ({ tweet: t }) => t ? /* @__PURE__ */ s(j, { children: /* @__PURE__ */ s($s, { ...t, controlVideo: () => {
+} }) }) : null, gs = ({ action: t, questionType: o, inApp: i, insight: a, tweet: n }) => {
+  var l;
+  const d = O[o], r = R[o];
+  if (!d || !i || !i.notification)
+    return null;
+  const { title: v, image: A, imageMode: f } = i.notification;
+  let u = A;
+  o === I.TWEET && n != null && n.tweetMedia && (u = n.tweetMedia.image), f === p.NONE && (u = "");
+  const $ = i.useMediaFromContent && (a == null ? void 0 : a.image), g = o === I.TWEET && ((l = n == null ? void 0 : n.tweetMedia) == null ? void 0 : l.video) || o === I.FACTOID && (a == null ? void 0 : a.video);
+  return /* @__PURE__ */ s(ls, { className: "SL_InApp", onClick: t, children: /* @__PURE__ */ c(rs, { style: u ? {} : { paddingLeft: "1.5rem" }, children: [
+    u && !$ && /* @__PURE__ */ s(N, { src: u, imageMode: f, withVideo: !!g }),
+    $ && /* @__PURE__ */ s(N, { src: $, fromInsight: !0, withVideo: !!g }),
+    o === I.TWEET ? /* @__PURE__ */ s(fs, { tweet: n }) : /* @__PURE__ */ s(ys, { questionTypeData: d, questionType: o, title: v }),
+    /* @__PURE__ */ s(ps, { name: "inapp-button", children: r || "Open" }),
+    /* @__PURE__ */ s(us, { name: "chevronRight" })
+  ] }) });
+}, Ts = /* @__PURE__ */ e("div")({
+  name: "NotificationContainer",
+  class: "n11jcrxe",
+  propsAsIs: !1
+}), k = /* @__PURE__ */ e("img")({
+  name: "Icon",
+  class: "i1vmpt6u",
+  propsAsIs: !1
+}), Cs = /* @__PURE__ */ e("div")({
+  name: "IconContainer",
+  class: "i180665s",
+  propsAsIs: !1
+}), Ns = () => m, ks = /* @__PURE__ */ e(Ns())({
+  name: "TitleIcon",
+  class: "t16zzzei",
   propsAsIs: !0
-}), Me = /* @__PURE__ */ s(pe())({
-  name: "ut",
-  class: "u1ourn5d",
+}), bs = () => P, ws = /* @__PURE__ */ e(bs())({
+  name: "Close",
+  class: "c1sur0q2",
   propsAsIs: !0
-}), Le = /* @__PURE__ */ s("div")({
-  name: "gt",
-  class: "g1evqivf",
+}), Ss = /* @__PURE__ */ e("div")({
+  name: "Body",
+  class: "bai9j52",
   propsAsIs: !1
-}), Re = /* @__PURE__ */ s("div")({
-  name: "xt",
-  class: "x1fon3ii",
+}), qs = /* @__PURE__ */ e("div")({
+  name: "Title",
+  class: "t1bnt25p",
   propsAsIs: !1
-}), Pe = /* @__PURE__ */ s("div")({
-  name: "wt",
-  class: "w14r8hqz",
+}), Es = /* @__PURE__ */ e("div")({
+  name: "Description",
+  class: "dmixjec",
   propsAsIs: !1
-}), Ue = /* @__PURE__ */ s("button")({
-  name: "yt",
-  class: "yxk4apw",
+}), js = /* @__PURE__ */ e("button")({
+  name: "Button",
+  class: "b1ubkw1q",
   propsAsIs: !1
-}), Ve = ({
-  open: n,
-  close: a,
+}), Ms = ({
+  open: t,
+  close: o,
   ...i
 }) => {
-  var o, t;
-  return /* @__PURE__ */ l(Oe, {
-    onClick: () => {
-      n == null || n(), i && (i.instantOpen = !0);
-    },
-    children: [/* @__PURE__ */ l(Ce, {
-      children: [/* @__PURE__ */ e(k, {
-        className: "on-light",
-        src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification.png"
-      }), /* @__PURE__ */ e(k, {
-        className: "on-dark",
-        src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification-dark.png"
-      })]
-    }), /* @__PURE__ */ l(Le, {
-      children: [/* @__PURE__ */ l(Re, {
-        children: [/* @__PURE__ */ e(De, {
-          name: "icon-trophy-solid"
-        }), (o = i == null ? void 0 : i.titleCard) == null ? void 0 : o.title]
-      }), /* @__PURE__ */ l(Pe, {
-        children: [/* @__PURE__ */ e("span", {
-          children: (t = i == null ? void 0 : i.titleCard) == null ? void 0 : t.subtitle
-        }), /* @__PURE__ */ e(Ue, {
-          name: "inapp-button",
-          children: "Play Now"
-        })]
-      })]
-    }), /* @__PURE__ */ e(Me, {
-      close: (c) => {
-        c == null || c.stopPropagation(), a == null || a();
-      }
-    })]
-  });
-}, Qe = /* @__PURE__ */ s("div")({
-  name: "bt",
-  class: "bfwt6f4",
-  propsAsIs: !1
-}), Fe = /* @__PURE__ */ s(de())({
-  name: "kt",
-  class: "kyg779c",
+  var a, n;
+  return /* @__PURE__ */ c(
+    Ts,
+    {
+      onClick: () => {
+        t == null || t(), i && (i.instantOpen = !0);
+      },
+      children: [
+        /* @__PURE__ */ c(Cs, { 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(Ss, { children: [
+          /* @__PURE__ */ c(qs, { children: [
+            /* @__PURE__ */ s(ks, { name: "icon-trophy-solid" }),
+            (a = i == null ? void 0 : i.titleCard) == null ? void 0 : a.title
+          ] }),
+          /* @__PURE__ */ c(Es, { children: [
+            /* @__PURE__ */ s("span", { children: (n = i == null ? void 0 : i.titleCard) == null ? void 0 : n.subtitle }),
+            /* @__PURE__ */ s(js, { name: "inapp-button", children: "Play Now" })
+          ] })
+        ] }),
+        /* @__PURE__ */ s(
+          ws,
+          {
+            close: (l) => {
+              l == null || l.stopPropagation(), o == null || o();
+            }
+          }
+        )
+      ]
+    }
+  );
+}, xs = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "cef8huz",
+  propsAsIs: !1
+}), Ds = () => m, Ls = /* @__PURE__ */ e(Ds())({
+  name: "CheckIcon",
+  class: "c1mo15kk",
   propsAsIs: !0
-}), Ke = /* @__PURE__ */ s(ue())({
-  name: "It",
-  class: "i1evrlv8",
+}), zs = () => m, Bs = /* @__PURE__ */ e(zs())({
+  name: "PredictionIcon",
+  class: "p16zkqnm",
   propsAsIs: !0
-}), We = /* @__PURE__ */ s("div")({
-  name: "Ct",
-  class: "c1ikdq9p",
+}), Os = /* @__PURE__ */ e("div")({
+  name: "PredictionIconContainer",
+  class: "pjszi7a",
   propsAsIs: !1
-}), Be = /* @__PURE__ */ s("div")({
-  name: "St",
-  class: "sa973kf",
+}), Rs = /* @__PURE__ */ e("div")({
+  name: "BodyContainer",
+  class: "bftbmo3",
   propsAsIs: !1
-}), Ge = /* @__PURE__ */ s("div")({
-  name: "Nt",
-  class: "n1f8vz8k",
+}), Ps = /* @__PURE__ */ e("div")({
+  name: "Body",
+  class: "barrbyu",
   propsAsIs: !1
-}), He = /* @__PURE__ */ s("div")({
-  name: "Tt",
-  class: "t2aop6q",
+}), Qs = /* @__PURE__ */ e("div")({
+  name: "Subtitle",
+  class: "sz7237i",
   propsAsIs: !1
-}), Ye = ({
-  step: n,
-  children: a,
+}), Vs = ({
+  step: t,
+  children: o,
   answer: i,
-  state: o = "pending"
-}) => /* @__PURE__ */ l(Qe, {
-  children: [/* @__PURE__ */ e(We, {
-    children: /* @__PURE__ */ e(Ke, {
+  state: a = "pending"
+}) => /* @__PURE__ */ c(xs, {
+  children: [/* @__PURE__ */ s(Os, {
+    children: /* @__PURE__ */ s(Bs, {
       name: "icon-prediction"
     })
-  }), /* @__PURE__ */ e(Be, {
-    children: /* @__PURE__ */ e(Ge, {
-      children: a
-    }, n)
-  }), /* @__PURE__ */ e(He, {
-    className: o,
-    children: /* @__PURE__ */ l("div", {
-      children: [/* @__PURE__ */ e(Fe, {
+  }), /* @__PURE__ */ s(Rs, {
+    children: /* @__PURE__ */ s(Ps, {
+      children: o
+    }, t)
+  }), /* @__PURE__ */ s(Qs, {
+    className: a,
+    children: /* @__PURE__ */ c("div", {
+      children: [/* @__PURE__ */ s(Ls, {
         name: "icon-check"
       }), "Your Pick: ", i]
     })
   })]
-}), Ze = /* @__PURE__ */ s("div")({
-  name: "Et",
-  class: "e1rehgb5",
+}), Us = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "ckyzolp",
   propsAsIs: !1
-}), g = /* @__PURE__ */ s("div")({
-  name: "y",
-  class: "ylp5m3t",
+}), y = /* @__PURE__ */ e("div")({
+  name: "Line",
+  class: "l16t1zr7",
   propsAsIs: !1
-}), $e = /* @__PURE__ */ s(me())({
-  name: "$t",
-  class: "_o9k3m4",
+}), Fs = () => y, Ks = /* @__PURE__ */ e(Fs())({
+  name: "Line1",
+  class: "le78kvg",
   propsAsIs: !0
-}), Xe = /* @__PURE__ */ s(fe())({
-  name: "Lt",
-  class: "l1f41dxb",
+}), Ws = () => y, Gs = /* @__PURE__ */ e(Ws())({
+  name: "Line2",
+  class: "l1o7966d",
   propsAsIs: !0
-}), Je = /* @__PURE__ */ s(he())({
-  name: "zt",
-  class: "z1vokrte",
+}), Ys = () => y, _s = /* @__PURE__ */ e(Ys())({
+  name: "Line3",
+  class: "lu9lyxq",
   propsAsIs: !0
-}), es = () => /* @__PURE__ */ l(Ze, {
-  children: [/* @__PURE__ */ e($e, {
-    children: /* @__PURE__ */ e("div", {})
-  }), /* @__PURE__ */ e(Xe, {
-    children: /* @__PURE__ */ e("div", {})
-  }), /* @__PURE__ */ e(Je, {
-    children: /* @__PURE__ */ e("div", {})
+}), Hs = () => /* @__PURE__ */ c(Us, {
+  children: [/* @__PURE__ */ s(Ks, {
+    children: /* @__PURE__ */ s("div", {})
+  }), /* @__PURE__ */ s(Gs, {
+    children: /* @__PURE__ */ s("div", {})
+  }), /* @__PURE__ */ s(_s, {
+    children: /* @__PURE__ */ s("div", {})
   })]
-}), ss = /* @__PURE__ */ s("div")({
-  name: "qt",
-  class: "q1ftib8q",
+}), Js = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "c10jy6zf",
   propsAsIs: !1
-}), ts = /* @__PURE__ */ s(ve())({
-  name: "Rt",
-  class: "r1m9yg5p",
+}), Xs = () => m, Zs = /* @__PURE__ */ e(Xs())({
+  name: "CheckIcon",
+  class: "c1c7scay",
   propsAsIs: !0
-}), ns = () => /* @__PURE__ */ l(ss, {
-  children: [/* @__PURE__ */ e(ts, {
+}), se = () => /* @__PURE__ */ c(Js, {
+  children: [/* @__PURE__ */ s(Zs, {
     name: "icon-check"
   }), " Prediction results are in!"]
-}), as = /* @__PURE__ */ s("div")({
-  name: "Ot",
-  class: "oa7jasz",
-  propsAsIs: !1
-}), is = /* @__PURE__ */ s("div")({
-  name: "Qt",
-  class: "q13bebf9",
-  propsAsIs: !1
-}), os = /* @__PURE__ */ s("div")({
-  name: "Pt",
-  class: "p1o3s78d",
-  propsAsIs: !1
-}), ls = ({
-  title: n
-}) => /* @__PURE__ */ l(as, {
-  children: [/* @__PURE__ */ e(is, {
+}), ee = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "cf6k2yy",
+  propsAsIs: !1
+}), ne = /* @__PURE__ */ e("div")({
+  name: "Caption",
+  class: "c1c8xjus",
+  propsAsIs: !1
+}), te = /* @__PURE__ */ e("div")({
+  name: "Title",
+  class: "t1d1uekn",
+  propsAsIs: !1
+}), oe = ({
+  title: t
+}) => /* @__PURE__ */ c(ee, {
+  children: [/* @__PURE__ */ s(ne, {
     children: "Results for"
-  }), /* @__PURE__ */ e(os, {
-    children: n
+  }), /* @__PURE__ */ s(te, {
+    children: t
   })]
-}), z = /* @__PURE__ */ s("div")({
-  name: "z",
-  class: "z19uba88",
+}), M = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "c181a1as",
   propsAsIs: !1
-}), O = /* @__PURE__ */ s("div")({
-  name: "M",
-  class: "me3836e",
+}), x = /* @__PURE__ */ e("div")({
+  name: "Title",
+  class: "t1cduox6",
   propsAsIs: !1
-}), C = /* @__PURE__ */ s(Ie())({
-  name: "q",
-  class: "q12u443i",
+}), ie = () => m, D = /* @__PURE__ */ e(ie())({
+  name: "CorrectIcon",
+  class: "c1onrv6j",
   propsAsIs: !0
-}), rs = /* @__PURE__ */ s(Ae())({
-  name: "At",
-  class: "andaq1w",
+}), ae = () => D, ce = /* @__PURE__ */ e(ae())({
+  name: "InCorrectIcon",
+  class: "i17n9o7e",
   propsAsIs: !0
-}), cs = () => /* @__PURE__ */ l(z, {
-  children: [/* @__PURE__ */ l(O, {
-    children: ["Congratulations!", /* @__PURE__ */ e("br", {}), "You answered correctly."]
-  }), /* @__PURE__ */ e(C, {
+}), re = () => /* @__PURE__ */ c(M, {
+  children: [/* @__PURE__ */ c(x, {
+    children: ["Congratulations!", /* @__PURE__ */ s("br", {}), "You answered correctly."]
+  }), /* @__PURE__ */ s(D, {
     name: "icon-check"
   })]
-}), ps = ({
-  title: n
-}) => /* @__PURE__ */ l(z, {
-  children: [/* @__PURE__ */ l(O, {
-    children: ["Better luck next time!", /* @__PURE__ */ e("br", {}), "Correct: ", n]
-  }), /* @__PURE__ */ e(rs, {
+}), le = ({
+  title: t
+}) => /* @__PURE__ */ c(M, {
+  children: [/* @__PURE__ */ c(x, {
+    children: ["Better luck next time!", /* @__PURE__ */ s("br", {}), "Correct: ", t]
+  }), /* @__PURE__ */ s(ce, {
     name: "icon-cross"
   })]
-}), ds = /* @__PURE__ */ s("div")({
-  name: "_t",
-  class: "_1tv8lyn",
+}), de = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "cnxgcs2",
   propsAsIs: !1
-}), us = /* @__PURE__ */ s("div")({
-  name: "Ft",
-  class: "f15gn2pe",
+}), pe = /* @__PURE__ */ e("div")({
+  name: "Title",
+  class: "t903f8n",
   propsAsIs: !1
-}), ms = /* @__PURE__ */ s(ge())({
-  name: "Ut",
-  class: "uz0guqg",
+}), me = () => m, ue = /* @__PURE__ */ e(me())({
+  name: "CheckIcon",
+  class: "ceyu3qj",
   propsAsIs: !0
-}), fs = ({
-  points: n
-}) => /* @__PURE__ */ l(ds, {
-  children: [/* @__PURE__ */ l(us, {
-    children: ["You won ", /* @__PURE__ */ e(F, {
+}), Ie = ({
+  points: t
+}) => /* @__PURE__ */ c(de, {
+  children: [/* @__PURE__ */ c(pe, {
+    children: ["You won ", /* @__PURE__ */ s(Q, {
       delay: 0.5,
       prefix: "+",
       suffix: " points",
-      value: n
+      value: t
     })]
-  }), /* @__PURE__ */ e(ms, {
+  }), /* @__PURE__ */ s(ue, {
     name: "icon-trophy-solid"
   })]
-}), x = /* @__PURE__ */ s("div")({
-  name: "N",
-  class: "nfeou2w",
+}), b = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "cq3agu2",
   propsAsIs: !1
-}), S = /* @__PURE__ */ s("div")({
-  name: "T",
-  class: "tyhpuaw",
+}), w = /* @__PURE__ */ e("div")({
+  name: "Body",
+  class: "b16qj0do",
   propsAsIs: !1
-}), b = {
+}), S = {
   1: 3e3,
   2: 4e3,
   3: 4e3,
   4: 4e3
-}, hs = ({
-  close: n,
-  action: a,
-  setStep: i,
-  votedAnswer: o,
-  correct: t,
-  correctAnswerTitle: c,
-  questionTitle: p,
-  step: r
-}) => {
-  if (_(() => {
+}, he = ({ close: t, action: o, setStep: i, votedAnswer: a, correct: n, correctAnswerTitle: l, questionTitle: d, step: r }) => {
+  if (E(() => {
     if (i) {
-      const I = setTimeout(() => {
-        b[r + 1] && (t || r < 3) ? i(r + 1) : n == null || n();
-      }, b[r]);
+      const A = setTimeout(() => {
+        S[r + 1] && (n || r < 3) ? i(r + 1) : t == null || t();
+      }, S[r]);
       return () => {
-        I && clearTimeout(I);
+        A && clearTimeout(A);
       };
     }
     return () => {
     };
-  }, [i, r, n, t]), r === 1) return /* @__PURE__ */ e(x, {
-    children: /* @__PURE__ */ e(S, {
-      children: /* @__PURE__ */ e(ns, {})
-    })
-  });
+  }, [i, r, t, n]), r === 1)
+    return /* @__PURE__ */ s(b, { children: /* @__PURE__ */ s(w, { children: /* @__PURE__ */ s(se, {}) }) });
   let v = "pending";
-  return (r === 3 || r === 4) && (v = t ? "correct" : "incorrect"), /* @__PURE__ */ e(x, {
-    onClick: () => a == null ? void 0 : a(),
-    children: /* @__PURE__ */ l(S, {
-      children: [r !== 1 && /* @__PURE__ */ e(es, {}, r), /* @__PURE__ */ l(Ye, {
-        state: v,
-        step: r,
-        answer: (o == null ? void 0 : o.title) || "unknown",
-        children: [r === 2 && /* @__PURE__ */ e(ls, {
-          title: p || "unknown"
-        }), r === 3 && t && /* @__PURE__ */ e(cs, {}), r === 3 && !t && /* @__PURE__ */ e(ps, {
-          title: c || "unknown"
-        }), r === 4 && /* @__PURE__ */ e(fs, {
-          points: (o == null ? void 0 : o.points) || 0
-        })]
-      })]
-    })
-  });
-}, vs = ({
-  close: n,
-  action: a,
-  votedAnswer: i,
-  correct: o,
-  correctAnswerTitle: t,
-  questionTitle: c
-}) => {
-  const [p, r] = E(1);
-  return /* @__PURE__ */ e(hs, {
-    close: n,
-    action: a,
-    votedAnswer: i,
-    correct: o,
-    correctAnswerTitle: t,
-    questionTitle: c,
-    setStep: r,
-    step: p,
-    title: ""
-  });
-}, Is = /* @__PURE__ */ s("div")({
-  name: "Ht",
-  class: "hvynqnf",
-  propsAsIs: !1
-}), As = (n) => /* @__PURE__ */ e(Is, {
-  children: /* @__PURE__ */ e(vs, {
-    ...n
-  })
-}), gs = ({
-  sdk: n
-}) => {
-  const [a] = E(n.getNotificationsStore()), i = D(a), o = n.getFeature(Y.GAMES), t = H(() => n.getActiveNotification(), [n, i]);
-  return _(() => {
-    t && M.emit("notification", {
+  return (r === 3 || r === 4) && (v = n ? "correct" : "incorrect"), /* @__PURE__ */ s(b, { onClick: () => o == null ? void 0 : o(), children: /* @__PURE__ */ c(w, { children: [
+    r !== 1 && /* @__PURE__ */ s(Hs, {}, r),
+    /* @__PURE__ */ c(Vs, { state: v, step: r, answer: (a == null ? void 0 : a.title) || "unknown", children: [
+      r === 2 && /* @__PURE__ */ s(oe, { title: d || "unknown" }),
+      r === 3 && n && /* @__PURE__ */ s(re, {}),
+      r === 3 && !n && /* @__PURE__ */ s(le, { title: l || "unknown" }),
+      r === 4 && /* @__PURE__ */ s(Ie, { points: (a == null ? void 0 : a.points) || 0 })
+    ] })
+  ] }) });
+}, ve = ({ close: t, action: o, votedAnswer: i, correct: a, correctAnswerTitle: n, questionTitle: l }) => {
+  const [d, r] = q(1);
+  return /* @__PURE__ */ s(
+    he,
+    {
+      close: t,
+      action: o,
+      votedAnswer: i,
+      correct: a,
+      correctAnswerTitle: n,
+      questionTitle: l,
+      setStep: r,
+      step: d,
+      title: ""
+    }
+  );
+}, Ae = /* @__PURE__ */ e("div")({
+  name: "NotificationContainer",
+  class: "n1i4h28u",
+  propsAsIs: !1
+}), $e = (t) => /* @__PURE__ */ s(Ae, { children: /* @__PURE__ */ s(ve, { ...t }) }), ye = ({ sdk: t }) => {
+  const [o] = q(t.getNotificationsStore()), i = V(o), a = t.getFeature(_.GAMES), n = H(() => t.getActiveNotification(), [t, i]);
+  return E(() => {
+    n && U.emit("notification", {
       action: "rendered",
       payload: {
-        questionId: t.data.questionId,
-        questionType: t.data.questionType
+        questionId: n.data.questionId,
+        questionType: n.data.questionType
       }
     });
-  }, [t]), t && t.type === q.QUESTION_RESOLVED ? t.data.question && t.data.questionType === f.PREDICTION ? /* @__PURE__ */ e(As, {
-    action: t.action,
-    close: t.close,
-    ...t.data.question
-  }) : null : t && t.type === q.ONBOARDING ? t.data.onboarding ? /* @__PURE__ */ e(Ve, {
-    open: o == null ? void 0 : o.openFeature,
-    close: t.close,
-    ...t.data.onboarding
-  }) : null : t && /* @__PURE__ */ e(ze, {
-    ...t.data,
-    action: t.action
-  });
-}, Ns = ({ theme: n }) => {
-  const a = K(), i = W(), o = B();
-  return a && o.appNotification ? o.app ? null : /* @__PURE__ */ e("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ e(G, { customTheme: n ?? i.theme, themeMode: i.themeMode, children: /* @__PURE__ */ e(gs, { sdk: a }) }) }) : null;
+  }, [n]), n && n.type === T.QUESTION_RESOLVED ? n.data.question && n.data.questionType === I.PREDICTION ? /* @__PURE__ */ s(
+    $e,
+    {
+      action: n.action,
+      close: n.close,
+      ...n.data.question
+    }
+  ) : null : n && n.type === T.ONBOARDING ? n.data.onboarding ? /* @__PURE__ */ s(Ms, { open: a == null ? void 0 : a.openFeature, close: n.close, ...n.data.onboarding }) : null : n && /* @__PURE__ */ s(gs, { ...n.data, action: n.action });
+}, Ne = ({ theme: t }) => {
+  const o = F(), i = K(), a = W();
+  return o && a.appNotification ? a.app ? null : /* @__PURE__ */ s("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ s(G, { customTheme: t ?? i.theme, themeMode: i.themeMode, children: /* @__PURE__ */ s(ye, { sdk: o }) }) }) : null;
 };
 export {
-  Ns as StreamLayerSDKNotification,
-  gs as StreamLayerSDKNotificationUI
+  Ne as StreamLayerSDKNotification,
+  ye as StreamLayerSDKNotificationUI
 };