@streamlayer/react 0.38.0 → 0.39.1

package/lib/es/gamification-feature.js

@@ -2,7 +2,7 @@ import { jsxs as r, jsx as s, Fragment as x } from "react/jsx-runtime";
 import { s as t, c as A, d as ce } from "./useSdkFeature.js";
 import { useStore as S } from "@nanostores/react";
 import { useState as E, useLayoutEffect as ye, useCallback as B, useEffect as ee, useMemo as N, PureComponent as Re, useTransition as we } from "react";
-import { o as de, I as pe, s as ue, c as Te, w as ke, L as me, F as xe, h as Se, a as qe, p as Ee, C as Ne, n as he, m as De, b as Le, l as Pe, D as Ve, d as Oe, e as Qe } from "./masters2.js";
+import { o as de, I as pe, s as ue, c as ke, H as Te, G as me, F as xe, h as Se, a as qe, p as Ee, C as Ne, n as he, m as De, b as Le, l as Ve, d as Pe, e as Oe, f as Qe } from "./masters2.js";
 import { QuestionType as m, QuestionStatus as D, QuestionImages as j, PickHistoryStatus as F } from "@streamlayer/sdk-web-types";
 import "react-countup";
 import { CountdownCircleTimer as Me } from "react-countdown-circle-timer";
@@ -29,11 +29,11 @@ const je = /* @__PURE__ */ t("div")({
   name: "QuestionTypeTitle",
   class: "qss5f0e",
   propsAsIs: !1
-}), We = /* @__PURE__ */ t("div")({
+}), He = /* @__PURE__ */ t("div")({
   name: "CloseIconWrap",
   class: "c1ao1jtv",
   propsAsIs: !1
-}), He = () => A, Ze = /* @__PURE__ */ t(He())({
+}), We = () => A, Ze = /* @__PURE__ */ t(We())({
   name: "CloseIcon",
   class: "cvsl7l3",
   propsAsIs: !0
@@ -51,7 +51,7 @@ const je = /* @__PURE__ */ t("div")({
       ),
       (i == null ? void 0 : i.label) && /* @__PURE__ */ s(Fe, { children: i.label })
     ] }),
-    /* @__PURE__ */ s(We, { onClick: n, children: /* @__PURE__ */ s(Ze, { name: "icon-cross" }) })
+    /* @__PURE__ */ s(He, { onClick: n, children: /* @__PURE__ */ s(Ze, { name: "icon-cross" }) })
   ] });
 }, Ye = /* @__PURE__ */ t("div")({
   name: "Container",
@@ -80,7 +80,7 @@ const je = /* @__PURE__ */ t("div")({
   name: "Title",
   class: "t8s05oq",
   propsAsIs: !1
-}), W = ({ indicator: e, title: n }) => /* @__PURE__ */ r(Xe, { children: [
+}), H = ({ indicator: e, title: n }) => /* @__PURE__ */ r(Xe, { children: [
   /* @__PURE__ */ s(Je, { children: e }),
   /* @__PURE__ */ s(es, { children: n })
 ] }), ss = /* @__PURE__ */ t("div")({
@@ -193,10 +193,10 @@ const je = /* @__PURE__ */ t("div")({
       /* @__PURE__ */ s(te, { indicator: a || 0, title: "Global rank" })
     ] }),
     /* @__PURE__ */ r(Is, { children: [
-      /* @__PURE__ */ s(W, { indicator: p || 0, title: "Win streak" }),
-      /* @__PURE__ */ s(W, { indicator: c || 0, title: "Correct" }),
-      /* @__PURE__ */ s(W, { indicator: l || 0, title: "Incorrect" }),
-      /* @__PURE__ */ s(W, { indicator: `${u || 0}%`, title: "Succ. rate" })
+      /* @__PURE__ */ s(H, { indicator: p || 0, title: "Win streak" }),
+      /* @__PURE__ */ s(H, { indicator: c || 0, title: "Correct" }),
+      /* @__PURE__ */ s(H, { indicator: l || 0, title: "Incorrect" }),
+      /* @__PURE__ */ s(H, { indicator: `${u || 0}%`, title: "Succ. rate" })
     ] })
   ] })
 ] }), As = /* @__PURE__ */ t("div")({
@@ -223,11 +223,11 @@ const je = /* @__PURE__ */ t("div")({
   name: "Description",
   class: "dlaj9xp",
   propsAsIs: !1
-}), Ts = ({ title: e, description: n }) => /* @__PURE__ */ r(ys, { children: [
+}), ks = ({ title: e, description: n }) => /* @__PURE__ */ r(ys, { children: [
   /* @__PURE__ */ s(A, { name: "icon-check-circle" }),
   /* @__PURE__ */ s(Rs, { children: e }),
   /* @__PURE__ */ s(ws, { children: n })
-] }), ks = /* @__PURE__ */ t("div")({
+] }), Ts = /* @__PURE__ */ t("div")({
   name: "Container",
   class: "c16sbdnm",
   propsAsIs: !1
@@ -239,7 +239,7 @@ const je = /* @__PURE__ */ t("div")({
   name: "FeedbackIconWrap",
   class: "f1g20ja7",
   propsAsIs: !1
-}), H = /* @__PURE__ */ t("div")({
+}), W = /* @__PURE__ */ t("div")({
   name: "FeedbackHeader",
   class: "f455ozj",
   propsAsIs: !1
@@ -269,29 +269,29 @@ const je = /* @__PURE__ */ t("div")({
   enteredAnActiveQuestion: h,
   marketClosed: C
 }) => {
-  const I = o && (i === m.TRIVIA || i === m.PREDICTION) && d && p !== D.RESOLVED, f = i === m.PREDICTION && !a, w = C && i === m.PREDICTION && !o && !h || i === m.PREDICTION && u && d && h, g = I && f, T = I && a, b = i === m.PREDICTION && o && d && a, P = o && i === m.POLL && d;
-  if (!c && !l && !g && !T && !w && !P && !b)
+  const I = o && (i === m.TRIVIA || i === m.PREDICTION) && d && p !== D.RESOLVED, f = i === m.PREDICTION && !a, k = C && i === m.PREDICTION && !o && !h || i === m.PREDICTION && u && d && h, g = I && f, w = I && a, b = i === m.PREDICTION && o && d && a, V = o && i === m.POLL && d;
+  if (!c && !l && !g && !w && !k && !V && !b)
     return null;
-  const q = n ? "correct" : "incorrect", k = n ? e == null ? void 0 : e.correctFeedback : e == null ? void 0 : e.incorrectFeedback;
-  return /* @__PURE__ */ r(ks, { "data-isPrediction": f, children: [
+  const q = n ? "correct" : "incorrect", T = n ? e == null ? void 0 : e.correctFeedback : e == null ? void 0 : e.incorrectFeedback;
+  return /* @__PURE__ */ r(Ts, { "data-isPrediction": f, children: [
     c && /* @__PURE__ */ r(x, { children: [
       /* @__PURE__ */ s(U, { children: /* @__PURE__ */ s(A, { name: "questionExpired" }) }),
       /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ s(H, { children: /* @__PURE__ */ s(Q, { children: "Question Expired" }) }),
+        /* @__PURE__ */ s(W, { children: /* @__PURE__ */ s(Q, { children: "Question Expired" }) }),
         /* @__PURE__ */ s(J, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
       ] })
     ] }),
     l && /* @__PURE__ */ r(x, { children: [
       /* @__PURE__ */ s(U, { children: /* @__PURE__ */ s(A, { name: "questionExpired" }) }),
       /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ s(H, { children: /* @__PURE__ */ s(Q, { children: "Question Closed" }) }),
+        /* @__PURE__ */ s(W, { children: /* @__PURE__ */ s(Q, { children: "Question Closed" }) }),
         /* @__PURE__ */ s(J, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
       ] })
     ] }),
-    w && /* @__PURE__ */ r(x, { children: [
+    k && /* @__PURE__ */ r(x, { children: [
       /* @__PURE__ */ s(U, { children: /* @__PURE__ */ s(A, { name: "questionExpired" }) }),
       /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ s(H, { children: /* @__PURE__ */ s(Q, { children: "Question Closed" }) }),
+        /* @__PURE__ */ s(W, { children: /* @__PURE__ */ s(Q, { children: "Question Closed" }) }),
         /* @__PURE__ */ s(J, { children: "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
       ] })
     ] }),
@@ -299,15 +299,15 @@ const je = /* @__PURE__ */ t("div")({
       /* @__PURE__ */ s(Ss, { name: "icon-prediction" }),
       /* @__PURE__ */ s(Q, { children: "Stay tuned to see if your prediction was correct." })
     ] }),
-    P && /* @__PURE__ */ r(x, { children: [
+    V && /* @__PURE__ */ r(x, { children: [
       /* @__PURE__ */ s(U, { "data-feedback-type": "correct", children: /* @__PURE__ */ s(A, { name: "correct" }) }),
-      /* @__PURE__ */ s(Q, { children: "That's for answering. Please stay tuned for the next question." })
+      /* @__PURE__ */ s(Q, { children: "Thanks for answering. Please stay tuned for the next question." })
     ] }),
-    (T || b) && /* @__PURE__ */ r(x, { children: [
+    (w || b) && /* @__PURE__ */ r(x, { children: [
       /* @__PURE__ */ s(U, { "data-feedback-type": q, children: /* @__PURE__ */ s(A, { name: q }) }),
-      /* @__PURE__ */ s("div", { children: /* @__PURE__ */ r(H, { children: [
-        /* @__PURE__ */ s(qs, { "data-feedback-type": q, children: k == null ? void 0 : k.title }),
-        /* @__PURE__ */ s(Q, { children: k == null ? void 0 : k.description })
+      /* @__PURE__ */ s("div", { children: /* @__PURE__ */ r(W, { children: [
+        /* @__PURE__ */ s(qs, { "data-feedback-type": q, children: T == null ? void 0 : T.title }),
+        /* @__PURE__ */ s(Q, { children: T == null ? void 0 : T.description })
       ] }) })
     ] })
   ] });
@@ -315,15 +315,15 @@ const je = /* @__PURE__ */ t("div")({
   name: "Container",
   class: "c14ielyq",
   propsAsIs: !1
-}), Ds = () => Te, Ls = /* @__PURE__ */ t(Ds())({
+}), Ds = () => ke, Ls = /* @__PURE__ */ t(Ds())({
   name: "QuestionScrollContainer",
   class: "q1tlqx57",
   propsAsIs: !0
-}), Ps = /* @__PURE__ */ t("div")({
+}), Vs = /* @__PURE__ */ t("div")({
   name: "Content",
   class: "c1hq58md",
   propsAsIs: !1
-}), Vs = /* @__PURE__ */ t("div")({
+}), Ps = /* @__PURE__ */ t("div")({
   name: "Title",
   class: "t1c8nxcx",
   propsAsIs: !1
@@ -359,11 +359,11 @@ const je = /* @__PURE__ */ t("div")({
   name: "IconDefault",
   class: "i1grrgwj",
   propsAsIs: !0
-}), Fs = () => Ce, Ws = /* @__PURE__ */ t(Fs())({
+}), Fs = () => Ce, Hs = /* @__PURE__ */ t(Fs())({
   name: "IconCircle",
   class: "ibemyq8",
   propsAsIs: !0
-}), Hs = /* @__PURE__ */ t("span")({
+}), Ws = /* @__PURE__ */ t("span")({
   name: "Title",
   class: "t1dceht",
   propsAsIs: !1
@@ -386,7 +386,7 @@ const je = /* @__PURE__ */ t("div")({
 }), oe = {
   [j.CENTERED]: (e) => /* @__PURE__ */ s(zs, { alt: "option-icon", src: e }),
   [j.TRANSPARENT]: (e) => /* @__PURE__ */ s(js, { children: /* @__PURE__ */ s(Us, { style: { backgroundImage: `url(${e})` } }) }),
-  [j.ROUNDED]: (e) => /* @__PURE__ */ s(Ws, { alt: "option-icon", src: e }),
+  [j.ROUNDED]: (e) => /* @__PURE__ */ s(Hs, { alt: "option-icon", src: e }),
   [j.NONE]: () => null,
   [j.UNSET]: () => null
 }, Js = ({ questionType: e, hasCorrectAnswer: n, correct: o, youVoted: i, questionVoted: a }) => {
@@ -422,14 +422,14 @@ const je = /* @__PURE__ */ t("div")({
     imageMode: C,
     answerTimeExpired: I,
     questionStatus: f,
-    isLoading: w,
+    isLoading: k,
     questionType: g,
-    correct: T,
+    correct: w,
     hasCorrectAnswer: b,
-    votedAfterQuestionClosed: P,
+    votedAfterQuestionClosed: V,
     enteredAnActiveQuestion: q,
-    marketClosed: k
-  } = e, [M, z] = E(p), V = Js(e), G = en({ questionType: g, questionVoted: h, correct: T, hasCorrectAnswer: b, questionStatus: f }), v = k && g === m.PREDICTION, $ = h || v, y = g === m.PREDICTION && !h && !k, K = h && !u && V !== "incorrect";
+    marketClosed: T
+  } = e, [M, z] = E(p), P = Js(e), G = en({ questionType: g, questionVoted: h, correct: w, hasCorrectAnswer: b, questionStatus: f }), v = T && g === m.PREDICTION, $ = h || v, y = g === m.PREDICTION && !h && !T, K = h && !u && P !== "incorrect";
   return ye(() => {
     p > 0 && (z(0), requestAnimationFrame(() => {
       z(p);
@@ -439,19 +439,19 @@ const je = /* @__PURE__ */ t("div")({
     {
       value: o,
       "data-selected": u,
-      "data-answer-state": V,
-      disabled: h || w || I || v && !q || v && q && P,
+      "data-answer-state": P,
+      disabled: h || k || I || v && !q || v && q && V,
       "data-is-not-checked": K,
       onClick: (X) => {
         d(
-          g === m.PREDICTION ? k : f === D.RESOLVED
+          g === m.PREDICTION ? T : f === D.RESOLVED
         ), l(X);
       },
       children: [
-        /* @__PURE__ */ s(Ms, { "data-answer-state": V, style: { width: `${$ ? M : 0}%` } }),
+        /* @__PURE__ */ s(Ms, { "data-answer-state": P, style: { width: `${$ ? M : 0}%` } }),
         /* @__PURE__ */ r(_s, { children: [
           i && C && ((n = oe[C]) == null ? void 0 : n.call(oe, i)),
-          /* @__PURE__ */ s(Hs, { children: a }),
+          /* @__PURE__ */ s(Ws, { children: a }),
           y && /* @__PURE__ */ r("div", { children: [
             c,
             /* @__PURE__ */ s(Ys, { children: "pts" })
@@ -546,22 +546,22 @@ const je = /* @__PURE__ */ t("div")({
   i && p !== m.PREDICTION && /* @__PURE__ */ s(ln, { isPlaying: o, onTimerExpired: l, duration: c })
 ] }), fn = ({ openedQuestion: e, isLoading: n, vote: o, close: i }) => {
   var a, p;
-  const c = e.subject, l = e.type, d = e.status, u = (a = e.options) == null ? void 0 : a.options, h = e.marketClosed, [C, I] = E(!1), [f, w] = E(!1), [g, T] = E(!0), [b, P] = E(!1), [q, k] = E(""), M = e == null ? void 0 : e.id;
+  const c = e.subject, l = e.type, d = e.status, u = (a = e.options) == null ? void 0 : a.options, h = e.marketClosed, [C, I] = E(!1), [f, k] = E(!1), [g, w] = E(!0), [b, V] = E(!1), [q, T] = E(""), M = e == null ? void 0 : e.id;
   ee(() => {
-    l === m.PREDICTION ? h && T(!1) : d === D.RESOLVED && T(!1);
+    l === m.PREDICTION ? h && w(!1) : d === D.RESOLVED && w(!1);
   }, []);
   const z = B((R) => {
-    w(R), I(!0);
-  }, []), V = B(
+    k(R), I(!0);
+  }, []), P = B(
     async (R) => {
       if (M) {
         const _ = R.currentTarget.value;
-        k(_), await o(M, _);
+        T(_), await o(M, _);
       }
     },
-    [M, k, o]
+    [M, T, o]
   ), G = B(() => {
-    P(!0), setTimeout(i, 3e3);
+    V(!0), setTimeout(i, 3e3);
   }, [i]), v = N(
     () => e == null ? void 0 : e.answers.find((R) => R.youVoted === !0),
     [e]
@@ -583,7 +583,7 @@ const je = /* @__PURE__ */ t("div")({
       answerTimeExpired: b,
       questionStatus: d,
       imageMode: (_ = e.appearance) == null ? void 0 : _.images,
-      onVote: V
+      onVote: P
     };
   }) : [], [
     $,
@@ -592,7 +592,7 @@ const je = /* @__PURE__ */ t("div")({
     e,
     v,
     d,
-    V,
+    P,
     q
   ]), X = u && (u.case === "trivia" || u.case === "prediction") ? u.value : void 0, O = d === D.RESOLVED && l === m.TRIVIA && !v && !g, se = l === m.TRIVIA && f && C && g, ne = N(() => l === m.PREDICTION ? !!(v && !$ || v && $ && y != null && y.youVoted) : !0, [l, v, $, y]), Ae = N(() => {
     if (l === m.PREDICTION && v && (!$ || $ && y != null && y.youVoted))
@@ -608,7 +608,7 @@ const je = /* @__PURE__ */ t("div")({
     l,
     $
   ]), $e = N(() => l === m.PREDICTION && v ? $ ? $ && y != null && y.youVoted ? "You won" : "" : "To win" : O || b ? "Time expired" : l === m.POLL ? "Time remaining" : v ? "You won" : "To win", [b, l, v, O, $, y]), ge = (l === m.TRIVIA || l === m.PREDICTION) && v && $ && (y == null ? void 0 : y.youVoted), be = v || O || se || l === m.TRIVIA && d === D.RESOLVED && g;
-  return /* @__PURE__ */ s(Ls, { children: /* @__PURE__ */ s(Ns, { children: /* @__PURE__ */ r(Ps, { children: [
+  return /* @__PURE__ */ s(Ls, { children: /* @__PURE__ */ s(Ns, { children: /* @__PURE__ */ r(Vs, { children: [
     /* @__PURE__ */ s(
       Es,
       {
@@ -640,13 +640,13 @@ const je = /* @__PURE__ */ t("div")({
       }
     ),
     b ? /* @__PURE__ */ s(
-      Ts,
+      ks,
       {
         title: "More to come...",
         description: "Watch for additional enhanced stream interactive experience."
       }
     ) : /* @__PURE__ */ r(x, { children: [
-      /* @__PURE__ */ s(Vs, { style: ne ? {} : { marginTop: 0 }, children: c }),
+      /* @__PURE__ */ s(Ps, { style: ne ? {} : { marginTop: 0 }, children: c }),
       /* @__PURE__ */ s(Os, { children: K.map((R) => /* @__PURE__ */ s(
         sn,
         {
@@ -683,7 +683,7 @@ const je = /* @__PURE__ */ t("div")({
 }), fe = ({ instantView: e, isDetail: n, notification: o }) => {
   const i = e == null ? void 0 : e.heading, a = e == null ? void 0 : e.body, p = i || a, c = o == null ? void 0 : o.title, l = o == null ? void 0 : o.body;
   return /* @__PURE__ */ r(An, { children: [
-    (e == null ? void 0 : e.video) && /* @__PURE__ */ s(ke, { source: e.video.url, poster: e.video.thumbnailUrl }),
+    (e == null ? void 0 : e.video) && /* @__PURE__ */ s(Te, { source: e.video.url, poster: e.video.thumbnailUrl }),
     (e == null ? void 0 : e.image) && !(e != null && e.video) && /* @__PURE__ */ s(yn, { src: e == null ? void 0 : e.image }),
     /* @__PURE__ */ r($n, { children: [
       /* @__PURE__ */ s(gn, { children: n && p ? i : c }),
@@ -698,13 +698,13 @@ const je = /* @__PURE__ */ t("div")({
   name: "WebLinkBtn",
   class: "w19zie3h",
   propsAsIs: !1
-}), Tn = ({ instantView: e, ...n }) => /* @__PURE__ */ r(Rn, { children: [
+}), kn = ({ instantView: e, ...n }) => /* @__PURE__ */ r(Rn, { children: [
   /* @__PURE__ */ s(fe, { instantView: e, ...n, isDetail: !0 }),
   (e == null ? void 0 : e.webLink) && /* @__PURE__ */ r(wn, { href: e == null ? void 0 : e.webLink.url, target: "_blank", children: [
     e == null ? void 0 : e.webLink.label,
     /* @__PURE__ */ s(A, { name: "icon-external-link" })
   ] })
-] }), kn = /* @__PURE__ */ t("div")({
+] }), Tn = /* @__PURE__ */ t("div")({
   name: "Container",
   class: "c1dcxmvf",
   propsAsIs: !1
@@ -712,7 +712,7 @@ const je = /* @__PURE__ */ t("div")({
   name: "Quote",
   class: "qb4q22c",
   propsAsIs: !1
-}), Sn = (e) => /* @__PURE__ */ r(kn, { children: [
+}), Sn = (e) => /* @__PURE__ */ r(Tn, { children: [
   e.title && /* @__PURE__ */ s(xn, { children: e.title }),
   /* @__PURE__ */ s(me, { ...e, isDetail: !0 })
 ] }), qn = /* @__PURE__ */ t("div")({
@@ -723,7 +723,7 @@ const je = /* @__PURE__ */ t("div")({
   openedQuestion: e
 }) => {
   var n, o;
-  return ((n = e == null ? void 0 : e.attributes) == null ? void 0 : n.attributes.case) === "insight" ? /* @__PURE__ */ s(Tn, {
+  return ((n = e == null ? void 0 : e.attributes) == null ? void 0 : n.attributes.case) === "insight" ? /* @__PURE__ */ s(kn, {
     ...e.attributes.attributes.value
   }) : ((o = e == null ? void 0 : e.attributes) == null ? void 0 : o.attributes.case) === "tweet" ? /* @__PURE__ */ s(Sn, {
     ...e.attributes.attributes.value
@@ -769,11 +769,11 @@ const je = /* @__PURE__ */ t("div")({
   name: "Container",
   class: "c115qtkr",
   propsAsIs: !1
-}), Pn = /* @__PURE__ */ t("div")({
+}), Vn = /* @__PURE__ */ t("div")({
   name: "STabs",
   class: "sxnslc8",
   propsAsIs: !1
-}), Vn = /* @__PURE__ */ t("button")({
+}), Pn = /* @__PURE__ */ t("button")({
   name: "Button",
   class: "b1umzux0",
   propsAsIs: !1
@@ -783,7 +783,7 @@ const je = /* @__PURE__ */ t("div")({
   propsAsIs: !1
 });
 var Y = /* @__PURE__ */ ((e) => (e.HOME = "home", e.LEADERBOARD = "leaderboard", e))(Y || {});
-const ae = ({ title: e, active: n, onClick: o }) => /* @__PURE__ */ s(Vn, { onClick: o, "data-selected": n, children: /* @__PURE__ */ s(On, { children: e }) }), Qn = ({ activePage: e = "home", toggleActivePage: n }) => /* @__PURE__ */ s(Ln, { children: /* @__PURE__ */ r(Pn, { "data-position": e === "home" ? "left" : "right", children: [
+const ae = ({ title: e, active: n, onClick: o }) => /* @__PURE__ */ s(Pn, { onClick: o, "data-selected": n, children: /* @__PURE__ */ s(On, { children: e }) }), Qn = ({ activePage: e = "home", toggleActivePage: n }) => /* @__PURE__ */ s(Ln, { children: /* @__PURE__ */ r(Vn, { "data-position": e === "home" ? "left" : "right", children: [
   /* @__PURE__ */ s(ae, { title: "Home", active: e === "home", onClick: () => n(
     "home"
     /* HOME */
@@ -823,8 +823,8 @@ const ae = ({ title: e, active: n, onClick: o }) => /* @__PURE__ */ s(Vn, { onCl
   name: "ArrowInviteIcon",
   class: "awohrz6",
   propsAsIs: !0
-}), Wn = "data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='32'%20height='32'%20rx='16'%20fill='white'/%3e%3cpath%20d='M10.4615%2012.6875C9.44231%2012.6875%208.61538%2013.4665%208.61538%2014.4266C8.61538%2015.3868%209.44231%2016.1658%2010.4615%2016.1658C11.4808%2016.1658%2012.3077%2015.3868%2012.3077%2014.4266C12.3077%2013.4665%2011.4808%2012.6875%2010.4615%2012.6875ZM10.4615%2016.1658C9.10817%2016.1658%208%2017.2097%208%2018.4846V19.7527C8%2019.7527%208.61538%2020.2237%2010.4615%2020.2237C12.3077%2020.2237%2012.9231%2019.7527%2012.9231%2019.7527V18.4846C12.9231%2017.2097%2011.8149%2016.1658%2010.4615%2016.1658ZM21.5385%2012.6875C20.5192%2012.6875%2019.6923%2013.4665%2019.6923%2014.4266C19.6923%2015.3868%2020.5192%2016.1658%2021.5385%2016.1658C22.5577%2016.1658%2023.3846%2015.3868%2023.3846%2014.4266C23.3846%2013.4665%2022.5577%2012.6875%2021.5385%2012.6875ZM21.5385%2016.1658C20.1851%2016.1658%2019.0769%2017.2097%2019.0769%2018.4846V19.7527C19.0769%2019.7527%2019.6923%2020.2237%2021.5385%2020.2237C23.3846%2020.2237%2024%2019.7527%2024%2019.7527V18.4846C24%2017.2097%2022.8918%2016.1658%2021.5385%2016.1658ZM16%2015.0063C14.9808%2015.0063%2014.1538%2015.7853%2014.1538%2016.7455C14.1538%2017.7056%2014.9808%2018.4846%2016%2018.4846C17.0192%2018.4846%2017.8462%2017.7056%2017.8462%2016.7455C17.8462%2015.7853%2017.0192%2015.0063%2016%2015.0063ZM16%2018.4846C14.6466%2018.4846%2013.5385%2019.5285%2013.5385%2020.8034V22.0715C13.5385%2022.0715%2014.1538%2022.5425%2016%2022.5425C17.8462%2022.5425%2018.4615%2022.0715%2018.4615%2022.0715V20.8034C18.4615%2019.5285%2017.3534%2018.4846%2016%2018.4846Z'%20fill='%23107D57'/%3e%3cpath%20opacity='0.5'%20d='M13.3908%209C12.3103%209%2011.4336%209.82584%2011.4336%2010.8437C11.4336%2011.8616%2012.3103%2012.6875%2013.3908%2012.6875C14.4713%2012.6875%2015.348%2011.8616%2015.348%2010.8437C15.348%209.82584%2014.4713%209%2013.3908%209ZM13.3908%2012.6875C13.1946%2012.6875%2012.9958%2012.6827%2012.7996%2012.7451C13.192%2013.2372%2013.3908%2013.8542%2013.3908%2014.5312C13.3908%2014.7761%2013.3296%2015.0161%2013.3296%2015.261C13.8521%2014.524%2014.6956%2014.0391%2015.6742%2013.9166C15.218%2013.1796%2014.3694%2012.6875%2013.3908%2012.6875ZM18.61%209C17.5295%209%2016.6528%209.82584%2016.6528%2010.8437C16.6528%2011.8616%2017.5295%2012.6875%2018.61%2012.6875C19.6905%2012.6875%2020.5672%2011.8616%2020.5672%2010.8437C20.5672%209.82584%2019.6905%209%2018.61%209ZM18.61%2012.6875C17.6314%2012.6875%2016.7828%2013.1796%2016.3266%2013.9166C17.3052%2014.0391%2018.1487%2014.524%2018.6712%2015.261C18.6712%2015.0161%2018.61%2014.7761%2018.61%2014.5312C18.61%2013.8542%2018.8088%2013.2372%2019.2012%2012.7451C19.005%2012.6827%2018.8062%2012.6875%2018.61%2012.6875Z'%20fill='%23107D57'/%3e%3c/svg%3e", Hn = ({ title: e, description: n, onClick: o, className: i }) => /* @__PURE__ */ r(Mn, { onClick: o, className: i, children: [
-  /* @__PURE__ */ s(_n, { alt: "friends-icon", src: Wn }),
+}), Hn = "data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='32'%20height='32'%20rx='16'%20fill='white'/%3e%3cpath%20d='M10.4615%2012.6875C9.44231%2012.6875%208.61538%2013.4665%208.61538%2014.4266C8.61538%2015.3868%209.44231%2016.1658%2010.4615%2016.1658C11.4808%2016.1658%2012.3077%2015.3868%2012.3077%2014.4266C12.3077%2013.4665%2011.4808%2012.6875%2010.4615%2012.6875ZM10.4615%2016.1658C9.10817%2016.1658%208%2017.2097%208%2018.4846V19.7527C8%2019.7527%208.61538%2020.2237%2010.4615%2020.2237C12.3077%2020.2237%2012.9231%2019.7527%2012.9231%2019.7527V18.4846C12.9231%2017.2097%2011.8149%2016.1658%2010.4615%2016.1658ZM21.5385%2012.6875C20.5192%2012.6875%2019.6923%2013.4665%2019.6923%2014.4266C19.6923%2015.3868%2020.5192%2016.1658%2021.5385%2016.1658C22.5577%2016.1658%2023.3846%2015.3868%2023.3846%2014.4266C23.3846%2013.4665%2022.5577%2012.6875%2021.5385%2012.6875ZM21.5385%2016.1658C20.1851%2016.1658%2019.0769%2017.2097%2019.0769%2018.4846V19.7527C19.0769%2019.7527%2019.6923%2020.2237%2021.5385%2020.2237C23.3846%2020.2237%2024%2019.7527%2024%2019.7527V18.4846C24%2017.2097%2022.8918%2016.1658%2021.5385%2016.1658ZM16%2015.0063C14.9808%2015.0063%2014.1538%2015.7853%2014.1538%2016.7455C14.1538%2017.7056%2014.9808%2018.4846%2016%2018.4846C17.0192%2018.4846%2017.8462%2017.7056%2017.8462%2016.7455C17.8462%2015.7853%2017.0192%2015.0063%2016%2015.0063ZM16%2018.4846C14.6466%2018.4846%2013.5385%2019.5285%2013.5385%2020.8034V22.0715C13.5385%2022.0715%2014.1538%2022.5425%2016%2022.5425C17.8462%2022.5425%2018.4615%2022.0715%2018.4615%2022.0715V20.8034C18.4615%2019.5285%2017.3534%2018.4846%2016%2018.4846Z'%20fill='%23107D57'/%3e%3cpath%20opacity='0.5'%20d='M13.3908%209C12.3103%209%2011.4336%209.82584%2011.4336%2010.8437C11.4336%2011.8616%2012.3103%2012.6875%2013.3908%2012.6875C14.4713%2012.6875%2015.348%2011.8616%2015.348%2010.8437C15.348%209.82584%2014.4713%209%2013.3908%209ZM13.3908%2012.6875C13.1946%2012.6875%2012.9958%2012.6827%2012.7996%2012.7451C13.192%2013.2372%2013.3908%2013.8542%2013.3908%2014.5312C13.3908%2014.7761%2013.3296%2015.0161%2013.3296%2015.261C13.8521%2014.524%2014.6956%2014.0391%2015.6742%2013.9166C15.218%2013.1796%2014.3694%2012.6875%2013.3908%2012.6875ZM18.61%209C17.5295%209%2016.6528%209.82584%2016.6528%2010.8437C16.6528%2011.8616%2017.5295%2012.6875%2018.61%2012.6875C19.6905%2012.6875%2020.5672%2011.8616%2020.5672%2010.8437C20.5672%209.82584%2019.6905%209%2018.61%209ZM18.61%2012.6875C17.6314%2012.6875%2016.7828%2013.1796%2016.3266%2013.9166C17.3052%2014.0391%2018.1487%2014.524%2018.6712%2015.261C18.6712%2015.0161%2018.61%2014.7761%2018.61%2014.5312C18.61%2013.8542%2018.8088%2013.2372%2019.2012%2012.7451C19.005%2012.6827%2018.8062%2012.6875%2018.61%2012.6875Z'%20fill='%23107D57'/%3e%3c/svg%3e", Wn = ({ title: e, description: n, onClick: o, className: i }) => /* @__PURE__ */ r(Mn, { onClick: o, className: i, children: [
+  /* @__PURE__ */ s(_n, { alt: "friends-icon", src: Hn }),
   /* @__PURE__ */ r(jn, { children: [
     /* @__PURE__ */ s(Un, { children: e }),
     /* @__PURE__ */ s(Bn, { children: n })
@@ -927,8 +927,8 @@ var Gn = function(e, n) {
         startIndex: Math.max(0, i - C),
         stopIndex: Math.min(l - 1, a + C)
       });
-      (this._memoizedUnloadedRanges.length !== I.length || this._memoizedUnloadedRanges.some(function(f, w) {
-        return I[w] !== f;
+      (this._memoizedUnloadedRanges.length !== I.length || this._memoizedUnloadedRanges.some(function(f, k) {
+        return I[k] !== f;
       })) && (this._memoizedUnloadedRanges = I, this._loadUnloadedRanges(I));
     }
   }, {
@@ -1078,7 +1078,7 @@ const Jn = /* @__PURE__ */ t("div")({
       openItemDetail: e.openUser,
       currentUserId: e.currentUserId.get()
     }, l), d && /* @__PURE__ */ s(ut, {
-      children: /* @__PURE__ */ s(Hn, {
+      children: /* @__PURE__ */ s(Wn, {
         onClick: () => u(d),
         title: "Invite Friends",
         description: "Challenge them now!"
@@ -1156,11 +1156,11 @@ const Jn = /* @__PURE__ */ t("div")({
     ] }),
     /* @__PURE__ */ s(Ct, { children: a ? /* @__PURE__ */ s(yt, { children: "Play" }) : d })
   ] }) : null;
-}, Tt = /* @__PURE__ */ t("div")({
+}, kt = /* @__PURE__ */ t("div")({
   name: "Container",
   class: "cll3md7",
   propsAsIs: !1
-}), kt = /* @__PURE__ */ t("button")({
+}), Tt = /* @__PURE__ */ t("button")({
   name: "ActionBtn",
   class: "a10g1iik",
   propsAsIs: !1
@@ -1168,9 +1168,9 @@ const Jn = /* @__PURE__ */ t("div")({
   openInsight: e,
   questionId: n,
   ...o
-}) => /* @__PURE__ */ r(Tt, { children: [
+}) => /* @__PURE__ */ r(kt, { children: [
   /* @__PURE__ */ s(fe, { questionId: n, ...o }),
-  e && /* @__PURE__ */ s(kt, { onClick: () => e(n), children: "View Insight" })
+  e && /* @__PURE__ */ s(Tt, { onClick: () => e(n), children: "View Insight" })
 ] }), St = /* @__PURE__ */ t("div")({
   name: "Container",
   class: "cl56x6b",
@@ -1194,7 +1194,7 @@ const Jn = /* @__PURE__ */ t("div")({
   name: "QuestionsContainer",
   class: "qvghv3l",
   propsAsIs: !1
-}), Pt = ({ questions: e, openQuestion: n }) => /* @__PURE__ */ s(Lt, { children: e == null ? void 0 : e.map((o) => {
+}), Vt = ({ questions: e, openQuestion: n }) => /* @__PURE__ */ s(Lt, { children: e == null ? void 0 : e.map((o) => {
   var i, a, p;
   if (o.type === "question" && ((i = o.attributes) == null ? void 0 : i.attributes.case) === "question") {
     const c = o.attributes.attributes.value;
@@ -1209,9 +1209,9 @@ const Jn = /* @__PURE__ */ t("div")({
     return /* @__PURE__ */ s(Dt, { openTweet: n, ...c, tweetId: l }, l);
   }
   return null;
-}) }), Vt = ({ store: e, openQuestion: n }) => {
+}) }), Pt = ({ store: e, openQuestion: n }) => {
   const o = S(e);
-  return o != null && o.data ? /* @__PURE__ */ s(Pt, { openQuestion: n, questions: o.data }) : /* @__PURE__ */ s("div", { children: "wait questions..." });
+  return o != null && o.data ? /* @__PURE__ */ s(Vt, { openQuestion: n, questions: o.data }) : /* @__PURE__ */ s("div", { children: "wait questions..." });
 }, Ot = ({ userSummary: e }) => {
   var n;
   const [o, i] = E(void 0);
@@ -1224,37 +1224,37 @@ const Jn = /* @__PURE__ */ t("div")({
     };
   }, [e]), o != null && o.summary ? /* @__PURE__ */ s(ve, { ...o.summary, successRate: (n = o.percentage) == null ? void 0 : n.correct }) : /* @__PURE__ */ s("div", { children: "wait user..." });
 }, Qt = ({ gamification: e, className: n, scrollStore: o, scrollNode: i, appNode: a, style: p, responsiveStore: c, headerNode: l }) => {
-  const { tabsShown: d } = S(o, { keys: ["tabsShown"] }), [u, h] = E(Y.HOME), [, C] = we(), { sdkInDesktopView: I } = S(c, { keys: ["sdkInDesktopView"] }), f = (T) => {
+  const { tabsShown: d } = S(o, { keys: ["tabsShown"] }), [u, h] = E(Y.HOME), [, C] = we(), { sdkInDesktopView: I } = S(c, { keys: ["sdkInDesktopView"] }), f = (w) => {
     C(() => {
       var b;
-      h(T), I === !1 && (((b = a.current) == null ? void 0 : b.getBoundingClientRect().y) || 0) < 0 && Ve(a, { behavior: "instant" });
+      h(w), I === !1 && (((b = a.current) == null ? void 0 : b.getBoundingClientRect().y) || 0) < 0 && Pe(a, { behavior: "instant" });
     });
   };
-  ee(() => o.listen((T) => {
-    if (T.scrollPosition === 0) {
+  ee(() => o.listen((w) => {
+    if (w.scrollPosition === 0) {
       o.setKey("tabsShown", !0);
       return;
     }
-    o.setKey("tabsShown", T.scrollDirection === "backward");
-  }), [o]);
-  let w = "0px";
-  I ? w = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : w = d ? "calc(var(--header-height) + var(--header-offset))" : "0px";
+    c.get().sdkInDesktopView ? o.setKey("tabsShown", w.scrollDirection === "backward") : o.setKey("tabsShown", w.scrollDirection === "forward");
+  }), [o, c]);
+  let k = "0px";
+  I ? k = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : k = d ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px";
   const g = I ? a : l;
   return /* @__PURE__ */ r(Ee, { className: n, style: p, children: [
     /* @__PURE__ */ s(
       Ne,
       {
         style: {
-          top: w
+          top: k
         },
         children: /* @__PURE__ */ s(Qn, { activePage: u, toggleActivePage: f })
       }
     ),
     u === Y.HOME && /* @__PURE__ */ r(x, { children: [
       /* @__PURE__ */ s(he, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ s(De, { children: /* @__PURE__ */ s(Ot, { userSummary: e.userSummary }) }) }),
-      /* @__PURE__ */ s(Le, { style: { flex: 1 }, children: /* @__PURE__ */ s(Vt, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
+      /* @__PURE__ */ s(Le, { style: { flex: 1 }, children: /* @__PURE__ */ s(Pt, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
     ] }),
-    u === Y.LEADERBOARD && /* @__PURE__ */ s(Pe, { children: /* @__PURE__ */ s(
+    u === Y.LEADERBOARD && /* @__PURE__ */ s(Ve, { children: /* @__PURE__ */ s(
       mt,
       {
         renderClipBoardNode: g,

package/lib/es/index2.js

@@ -1,8 +1,8 @@
-import { jsx as N } from "react/jsx-runtime";
-import { createContext as i, useMemo as S } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as S, useMemo as d } from "react";
 import { useStreamLayerApp as G } from "./useStreamLayerApp.js";
-var d = /* @__PURE__ */ ((R) => (R[R.UNSET = 0] = "UNSET", R[R.CONNECTED = 1] = "CONNECTED", R[R.READY = 2] = "READY", R))(d || {});
-const O = i({
+var O = /* @__PURE__ */ ((R) => (R[R.UNSET = 0] = "UNSET", R[R.CONNECTED = 1] = "CONNECTED", R[R.READY = 2] = "READY", R))(O || {});
+const D = S({
   status: 0,
   sdk: null
 }), I = ({
@@ -10,16 +10,16 @@ const O = i({
   plugins: E,
   children: e,
   production: _ = !0,
-  autoEnable: T = !0,
-  onDeepLinkHandled: a
+  autoEnable: s = !0,
+  onDeepLinkHandled: N
 }) => {
-  const t = G(R, E, _, T), s = S(() => t ? (a && t.onDeepLinkHandled(a), {
-    sdk: t,
+  const A = G(R, E, _, s), i = d(() => A ? (N && A.onDeepLinkHandled(N), {
+    sdk: A,
     status: 2
     /* READY */
-  }) : { status: 1, sdk: null }, [t]);
-  return /* @__PURE__ */ N(O.Provider, { value: s, children: e });
-}, D = {
+  }) : { status: 1, sdk: null }, [A]);
+  return /* @__PURE__ */ a(D.Provider, { value: i, children: e });
+}, c = {
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
   BG_TRANSPARENT_VOTE_CONTAINER: "rgba(10, 14, 19, 0.8)",
   BG_TRANSPARENT_ITEM: "rgba(0, 0, 0, 0.7)",
@@ -48,7 +48,7 @@ const O = i({
   GREY_PRIMARY: "#909395",
   DIVIDER_COLOR_SECONDARY: "#53565a",
   GREEN_PRIMARY_BTN: "#009B77"
-}, c = {
+}, B = {
   PRIMARY_GREEN1: "#107D57",
   PRIMARY_GREEN2: "#006747",
   PRIMARY_GREEN3: "#1C4932",
@@ -70,21 +70,22 @@ const O = i({
   NEUTRALS_GRAY8: "#53565A",
   NEUTRALS_GRAY9: "#25282A",
   NEUTRALS_BLACK: "#000000"
-}, o = Object.assign({}, D, c), A = {
+}, o = Object.assign({}, c, B), t = {
   REGULAR: "'Benton Sans', BentonSans, Arial, Helvetica, sans-serif",
   SERIF: "'Tiempos', 'Tiempos Text', Times New Roman, serif",
   COLOR: "#fff",
   WEIGHT_DEFAULT: "500"
 }, r = {
+  xs: 324,
   sm: 576,
   md: 768,
   lg: 992,
-  xl: 1200,
-  xxl: 1400
-}, B = {
+  xl: 1215,
+  xxl: 1440
+}, Y = {
   landscape: "landscape",
   portrait: "portrait"
-}, Y = Object.keys(o).reduce((R, E) => {
+}, l = Object.keys(o).reduce((R, E) => {
   const e = o[E];
   return `
     ${R}
@@ -94,11 +95,11 @@ const O = i({
   @media only screen and (${R}) {
     ${E}
   }
-`, l = (R, E) => (e) => `
+`, C = (R, E) => (e) => `
   @media only screen and (${R}) and (${E}) {
     ${e}
   }
-`, C = {
+`, T = {
   up: (R) => {
     const E = r[R];
     return n(`min-width: ${E}px`);
@@ -109,23 +110,25 @@ const O = i({
   },
   intermediate: (R, E) => {
     const e = r[R] - 1, _ = r[E];
-    return l(`max-width: ${e}px`, `min-width: ${_}px`);
+    return C(`max-width: ${e}px`, `min-width: ${_}px`);
   },
   orientation: (R) => {
-    const E = B[R];
+    const E = Y[R];
     return n(`orientation: ${E}`);
   }
 };
-`${Y}${A.REGULAR}${A.REGULAR}${A.COLOR}${A.SERIF}${A.WEIGHT_DEFAULT}${C.down("xl")`
+`${l}${t.REGULAR}${t.REGULAR}${t.COLOR}${t.SERIF}${t.WEIGHT_DEFAULT}${T.down("xl")`
     --header-offset: 56px;
+  `}${T.intermediate("xl", "lg")`
+    --header-offset: 76px;
   `}`;
-const L = "StreamLayerCSSReset", m = "ttkj0ah", P = ({ children: R, style: E }) => /* @__PURE__ */ N("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ N("div", { className: m, style: E, children: R }) });
+const x = "StreamLayerCSSReset", f = "ttkj0ah", L = ({ children: R, style: E }) => /* @__PURE__ */ a("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ a("div", { className: f, style: E, children: R }) });
 export {
   o as E,
   r as O,
   I as S,
-  O as a,
-  d as b,
-  L as m,
-  P as p
+  D as a,
+  O as b,
+  x as m,
+  L as p
 };

package/lib/es/masters.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "./index2.js";
-import { M as c, f as d } from "./masters2.js";
+import { M as d, g as f } from "./masters2.js";
 import "react";
 import "./useStreamLayerApp.js";
 import "@streamlayer/sdk-web";
@@ -12,6 +12,6 @@ import "react-countup";
 import "@streamlayer/sdk-web-notifications";
 import "lodash.throttle";
 export {
-  c as MastersStreamLayerProvider,
-  d as MastersStreamLayerSDKReact
+  d as MastersStreamLayerProvider,
+  f as MastersStreamLayerSDKReact
 };