@streamlayer/react-ui 0.92.0 → 0.94.0

package/lib/ui/gamification/question/twitter/styles.js

@@ -1,27 +1,22 @@
-import { styled as s } from "@linaria/react";
-import { Button as o } from "../../../button/index.js";
+import { styled as o } from "@linaria/react";
+import { Button as t } from "../../../button/index.js";
 import "react/jsx-runtime";
 import "../../../button/styles.js";
-const r = /* @__PURE__ */ s("div")({
+const a = /* @__PURE__ */ o("div")({
   name: "Container",
   class: "cl56x6b",
   propsAsIs: !1
-}), t = () => o, c = /* @__PURE__ */ s(t())({
+}), s = () => t, c = /* @__PURE__ */ o(s())({
   name: "ActionButton",
   class: "a11pzf92",
   propsAsIs: !0
-}), m = /* @__PURE__ */ s("div")({
-  name: "DateTime",
-  class: "d1hbaleq",
-  propsAsIs: !1
-}), i = /* @__PURE__ */ s("blockquote")({
+}), i = /* @__PURE__ */ o("blockquote")({
   name: "Quote",
-  class: "qvvgqjm",
+  class: "q1hbaleq",
   propsAsIs: !1
 });
 export {
   c as ActionButton,
-  r as Container,
-  m as DateTime,
+  a as Container,
   i as Quote
 };

package/lib/ui/gamification/vote/index.js

@@ -1,11 +1,11 @@
-import { jsx as m, jsxs as N, Fragment as G } from "react/jsx-runtime";
-import { useState as E, useEffect as J, useCallback as p, useMemo as f } from "react";
-import { QuestionType as c, QuestionStatus as C } from "@streamlayer/sdk-web-types";
-import { ExpiredAlert as K } from "./expired-alert/index.js";
-import { Feedback as U } from "./feedback/index.js";
-import { QuestionScrollContainer as X, Container as Z, Content as _, Title as $, Options as Q } from "./styles.js";
-import { VotingOption as tt } from "./vote-option/index.js";
-import { WinBar as rt } from "./win-bar/index.js";
+import { jsx as n, jsxs as k, Fragment as J } from "react/jsx-runtime";
+import { useState as I, useEffect as K, useCallback as R, useMemo as f } from "react";
+import { QuestionType as o, QuestionStatus as E } from "@streamlayer/sdk-web-types";
+import { ExpiredAlert as U } from "./expired-alert/index.js";
+import { Feedback as X } from "./feedback/index.js";
+import { QuestionScrollContainer as Z, Container as _, Content as $, Title as Q, Options as tt } from "./styles.js";
+import { VotingOption as rt } from "./vote-option/index.js";
+import { WinBar as it } from "./win-bar/index.js";
 import "../../icons/index.js";
 import "@linaria/react";
 import "./expired-alert/styles.js";
@@ -18,28 +18,28 @@ import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "./win-bar/styles.js";
-const wt = ({ openedQuestion: t, isLoading: I, vote: w, close: v }) => {
-  var g, k;
-  const P = t.subject, s = t.type, o = t.status, V = (g = t.options) == null ? void 0 : g.options, d = t.marketClosed, [R, b] = E(!1), [y, L] = E(!1), [T, O] = E(!0), [n, M] = E(!1), [x, q] = E(""), h = t == null ? void 0 : t.id;
-  J(() => {
-    s === c.PREDICTION ? d && O(!1) : o === C.RESOLVED && O(!1);
+const vt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
+  var P, g;
+  const A = t.subject, a = t.type, m = t.status, V = (P = t.options) == null ? void 0 : P.options, d = t.marketClosed, [O, b] = I(!1), [y, L] = I(!1), [T, w] = I(!0), [c, M] = I(!1), [x, D] = I(""), h = t == null ? void 0 : t.id;
+  K(() => {
+    a === o.PREDICTION ? d && w(!1) : m === E.RESOLVED && w(!1);
   }, []);
-  const j = p((e) => {
+  const j = R((e) => {
     L(e), b(!0);
-  }, []), D = p(
+  }, []), q = R(
     async (e) => {
       if (h) {
         const u = e.currentTarget.value;
-        q(u), await w(h, u);
+        D(u), await p(h, u);
       }
     },
-    [h, q, w]
-  ), B = p(() => {
+    [h, D, p]
+  ), B = R(() => {
     M(!0), setTimeout(v, 3e3);
   }, [v]), r = f(
     () => t == null ? void 0 : t.answers.find((e) => e.youVoted === !0),
     [t]
-  ), a = f(
+  ), s = f(
     () => !!(t != null && t.answers.find((e) => e.correct === !0)),
     [t]
   ), i = f(
@@ -51,77 +51,78 @@ const wt = ({ openedQuestion: t, isLoading: I, vote: w, close: v }) => {
       ...e,
       questionVoted: !!r,
       youSelected: x === e.id,
-      isLoading: I,
-      hasCorrectAnswer: a,
+      isLoading: C,
+      hasCorrectAnswer: s,
       questionType: t.type,
-      answerTimeExpired: n,
-      questionStatus: o,
+      answerTimeExpired: c,
+      questionStatus: m,
       imageMode: (u = t.appearance) == null ? void 0 : u.images,
-      onVote: D
+      onVote: q
     };
   }) : [], [
-    a,
-    n,
-    I,
+    s,
+    c,
+    C,
     t,
     r,
-    o,
-    D,
+    m,
+    q,
     x
-  ]), F = V && (V.case === "trivia" || V.case === "prediction") ? V.value : void 0, l = o === C.RESOLVED && s === c.TRIVIA && !r && !T, S = s === c.TRIVIA && y && R && T, A = f(() => s === c.PREDICTION ? !!(r && !a || r && a && (i != null && i.youVoted)) : !0, [s, r, a, i]), Y = f(() => {
-    if (s === c.PREDICTION && r && (!a || a && (i != null && i.youVoted)))
+  ]), F = V && (V.case === "trivia" || V.case === "prediction") ? V.value : void 0, l = m === E.RESOLVED && a === o.TRIVIA && !r && !T, S = a === o.TRIVIA && y && O && T, N = f(() => a === o.PREDICTION ? !!(r && !s || r && s && (i != null && i.youVoted)) : !0, [a, r, s, i]), Y = f(() => {
+    if (a === o.PREDICTION && r && (!s || s && (i != null && i.youVoted)))
       return r.points;
-    if (!(l || n))
-      return o === C.RESOLVED ? 0 : r ? r.correct ? r.points : 0 : i == null ? void 0 : i.points;
+    if (!(l || c))
+      return m === E.RESOLVED ? 0 : r ? r.correct ? r.points : 0 : i == null ? void 0 : i.points;
   }, [
-    n,
+    c,
     r,
     i,
-    o,
+    m,
     l,
-    s,
-    a
-  ]), H = f(() => s === c.PREDICTION && r ? a ? a && (i != null && i.youVoted) ? "You won" : "" : "To win" : l || n ? "Time expired" : s === c.POLL ? "Time remaining" : r ? "You won" : "To win", [n, s, r, l, a, i]), z = r || l || S || s === c.TRIVIA && o === C.RESOLVED && T;
-  return /* @__PURE__ */ m(X, { children: /* @__PURE__ */ m(Z, { children: /* @__PURE__ */ N(_, { children: [
-    /* @__PURE__ */ m(
-      U,
+    a,
+    s
+  ]), H = f(() => a === o.PREDICTION && r ? s ? s && (i != null && i.youVoted) ? "You won" : "" : "To win" : l || c ? "Time expired" : a === o.POLL ? "Time remaining" : r ? "You won" : "To win", [c, a, r, l, s, i]), z = (a === o.TRIVIA || a === o.PREDICTION) && r && s && (i == null ? void 0 : i.youVoted), G = r || l || S || a === o.TRIVIA && m === E.RESOLVED && T;
+  return /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ n(_, { children: /* @__PURE__ */ k($, { children: [
+    /* @__PURE__ */ n(
+      X,
       {
         feedbackMessages: F,
         questionVoted: !!r,
         questionVotedCorrectly: r == null ? void 0 : r.correct,
-        questionType: s,
-        hasCorrectAnswer: a,
-        questionStatus: o,
+        questionType: a,
+        hasCorrectAnswer: s,
+        questionStatus: m,
         showExpiredNotification: l,
         showClosedNotificationTrivia: S,
-        votedInCurrentRender: R,
+        votedInCurrentRender: O,
         votedAfterQuestionClosed: y,
         enteredAnActiveQuestion: T,
         marketClosed: d
       }
     ),
-    A && /* @__PURE__ */ m(
-      rt,
+    N && /* @__PURE__ */ n(
+      it,
       {
         title: H,
         points: Y,
         onTimerExpired: B,
         questionType: t.type,
-        isTimer: !I,
+        isTimer: !C,
         isPlayingTimer: !r,
-        timerDuration: z ? 0 : Number(((k = t == null ? void 0 : t.appearance) == null ? void 0 : k.autoHideInterval) || "30")
+        animatePoints: z,
+        timerDuration: G ? 0 : Number(((g = t == null ? void 0 : t.appearance) == null ? void 0 : g.autoHideInterval) || "30")
       }
     ),
-    n ? /* @__PURE__ */ m(
-      K,
+    c ? /* @__PURE__ */ n(
+      U,
       {
         title: "More to come...",
         description: "Watch for additional enhanced stream interactive experience."
       }
-    ) : /* @__PURE__ */ N(G, { children: [
-      /* @__PURE__ */ m($, { style: A ? {} : { marginTop: 0 }, children: P }),
-      /* @__PURE__ */ m(Q, { children: W.map((e) => /* @__PURE__ */ m(
-        tt,
+    ) : /* @__PURE__ */ k(J, { children: [
+      /* @__PURE__ */ n(Q, { style: N ? {} : { marginTop: 0 }, children: A }),
+      /* @__PURE__ */ n(tt, { children: W.map((e) => /* @__PURE__ */ n(
+        rt,
         {
           ...e,
           markThatVoted: j,
@@ -135,5 +136,5 @@ const wt = ({ openedQuestion: t, isLoading: I, vote: w, close: v }) => {
   ] }) }) });
 };
 export {
-  wt as Vote
+  vt as Vote
 };

package/lib/ui/gamification/vote/insight-details/index.js

@@ -1,20 +1,19 @@
 import { jsxs as o, jsx as m } from "react/jsx-runtime";
-import { SvgIcon as l } from "../../../icons/index.js";
+import { SvgIcon as p } from "../../../icons/index.js";
 import { InsightContent as b } from "../../../questions/insight/index.js";
 import { Container as k, WebLinkBtn as c } from "./styles.js";
 import "@linaria/react";
 import "react";
 import "../../../video-player/index.js";
 import "../../../video-player/styles.js";
-import "../../../../utils/common.js";
 import "../../../questions/insight/styles.js";
-const C = ({ instantView: r, ...p }) => /* @__PURE__ */ o(k, { children: [
-  /* @__PURE__ */ m(b, { instantView: r, ...p }),
+const j = ({ instantView: r, ...l }) => /* @__PURE__ */ o(k, { children: [
+  /* @__PURE__ */ m(b, { instantView: r, ...l, isDetail: !0 }),
   (r == null ? void 0 : r.webLink) && /* @__PURE__ */ o(c, { href: r == null ? void 0 : r.webLink.url, target: "_blank", children: [
     r == null ? void 0 : r.webLink.label,
-    /* @__PURE__ */ m(l, { name: "icon-external-link" })
+    /* @__PURE__ */ m(p, { name: "icon-external-link" })
   ] })
 ] });
 export {
-  C as InsightDetails
+  j as InsightDetails
 };

package/lib/ui/gamification/vote/twitter-details/index.js

@@ -1,35 +1,19 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { useMemo as n } from "react";
-import { TwitterContent as a } from "../../../questions/twitter/index.js";
-import { isValidDate as f, formatDate as l, formatTime as p } from "../../../../utils/common.js";
-import { Container as s, DateTime as d, Quote as u } from "./styles.js";
-import "../../../questions/twitter/account/index.js";
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { TwitterContent as o } from "../../../questions/twitter/index.js";
+import { Container as m, Quote as e } from "./styles.js";
+import "../../../video-player/index.js";
+import "react";
 import "../../../icons/index.js";
 import "@linaria/react";
+import "../../../video-player/styles.js";
+import "../../../questions/twitter/account/index.js";
+import "../../../../utils/common.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
-const V = ({ created: t, ...i }) => {
-  const e = n(() => {
-    if (t) {
-      const r = new Date(t);
-      if (f(r))
-        return {
-          date: l(r),
-          time: p(r)
-        };
-    }
-    return null;
-  }, [t]);
-  return /* @__PURE__ */ m(s, { children: [
-    e && /* @__PURE__ */ m(d, { children: [
-      e.date,
-      " · ",
-      e.time
-    ] }),
-    i.title && /* @__PURE__ */ o(u, { children: i.title }),
-    /* @__PURE__ */ o(a, { ...i })
-  ] });
-};
+const w = (t) => /* @__PURE__ */ r(m, { children: [
+  t.title && /* @__PURE__ */ i(e, { children: t.title }),
+  /* @__PURE__ */ i(o, { ...t, isDetail: !0 })
+] });
 export {
-  V as TwitterDetails
+  w as TwitterDetails
 };

package/lib/ui/gamification/vote/twitter-details/styles.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const DateTime: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Quote: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLQuoteElement> & import("react").BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;

package/lib/ui/gamification/vote/twitter-details/styles.js

@@ -1,19 +1,14 @@
 import { styled as s } from "@linaria/react";
-const o = /* @__PURE__ */ s("div")({
+const e = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1dcxmvf",
   propsAsIs: !1
-}), a = /* @__PURE__ */ s("div")({
-  name: "DateTime",
-  class: "db4q22c",
-  propsAsIs: !1
 }), t = /* @__PURE__ */ s("blockquote")({
   name: "Quote",
-  class: "q111mmic",
+  class: "qb4q22c",
   propsAsIs: !1
 });
 export {
-  o as Container,
-  a as DateTime,
+  e as Container,
   t as Quote
 };

package/lib/ui/gamification/vote/vote-option/index.js

@@ -1,83 +1,87 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { QuestionImages as a, QuestionType as i, QuestionStatus as T } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as P } from "../../../animated-counter/index.js";
-import { IconDefault as B, IconContainer as V, IconWrap as b, IconCircle as j, ButtonContainer as U, ButtonPct as $, ButtonBody as M, Title as W, Pts as y, Indicators as z, CheckIcon as F, Percentage as G } from "./styles.js";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { useState as b, useLayoutEffect as j } from "react";
+import { QuestionImages as a, QuestionType as o, QuestionStatus as S } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as U } from "../../../animated-counter/index.js";
+import { IconDefault as $, IconContainer as y, IconWrap as F, IconCircle as M, ButtonContainer as W, ButtonPct as z, ButtonBody as G, Title as H, Pts as J, Indicators as K, CheckIcon as X, Percentage as Y } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
 import "../../../icons/index.js";
-import "react";
-const f = {
-  [a.CENTERED]: (t) => /* @__PURE__ */ e(B, { alt: "option-icon", src: t }),
-  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(b, { style: { backgroundImage: `url(${t})` } }) }),
-  [a.ROUNDED]: (t) => /* @__PURE__ */ e(j, { alt: "option-icon", src: t }),
+const I = {
+  [a.CENTERED]: (t) => /* @__PURE__ */ n($, { alt: "option-icon", src: t }),
+  [a.TRANSPARENT]: (t) => /* @__PURE__ */ n(y, { children: /* @__PURE__ */ n(F, { style: { backgroundImage: `url(${t})` } }) }),
+  [a.ROUNDED]: (t) => /* @__PURE__ */ n(M, { alt: "option-icon", src: t }),
   [a.NONE]: () => null,
   [a.UNSET]: () => null
-}, H = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: o }) => {
-  if (t === i.POLL && r)
+}, Z = ({ questionType: t, hasCorrectAnswer: c, correct: r, youVoted: i, questionVoted: e }) => {
+  if (t === o.POLL && i)
     return "correct";
-  if (t === i.PREDICTION) {
-    if (c && o)
-      return r ? n ? "correct" : "incorrect" : "unset";
-    if (r)
+  if (t === o.PREDICTION) {
+    if (c && e)
+      return i ? r ? "correct" : "incorrect" : "unset";
+    if (i)
       return "correct";
   }
-  return t === i.TRIVIA && o && r ? n ? "correct" : "incorrect" : "unset";
-}, J = ({
+  return t === o.TRIVIA && e && i ? r ? "correct" : "incorrect" : "unset";
+}, _ = ({
   questionType: t,
   questionVoted: c,
-  correct: n,
-  hasCorrectAnswer: r,
-  questionStatus: o
-}) => t === i.TRIVIA ? c && n : t === i.PREDICTION ? c && n && r || o === T.RESOLVED && n : !1, rt = (t) => {
-  var R;
+  correct: r,
+  hasCorrectAnswer: i,
+  questionStatus: e
+}) => t === o.TRIVIA ? c && r : t === o.PREDICTION ? c && r && i || e === S.RESOLVED && r : !1, st = (t) => {
+  var N;
   const {
     // option props
     id: c,
-    icon: n,
-    text: r,
-    percentageDecimal: o,
-    points: D,
+    icon: r,
+    text: i,
+    percentageDecimal: e,
+    points: T,
     // extra props
-    onVote: S,
-    markThatVoted: w,
+    onVote: A,
+    markThatVoted: D,
     youSelected: h,
     questionVoted: s,
-    imageMode: C,
-    answerTimeExpired: O,
-    questionStatus: E,
-    isLoading: g,
+    imageMode: E,
+    answerTimeExpired: w,
+    questionStatus: C,
+    isLoading: O,
     questionType: d,
-    correct: A,
+    correct: g,
     hasCorrectAnswer: k,
-    votedAfterQuestionClosed: v,
-    enteredAnActiveQuestion: p,
-    marketClosed: u
-  } = t, I = H(t), x = J({ questionType: d, questionVoted: s, correct: A, hasCorrectAnswer: k, questionStatus: E }), m = u && d === i.PREDICTION, N = s || m, L = d === i.PREDICTION && !s && !u;
-  return /* @__PURE__ */ l(
-    U,
+    votedAfterQuestionClosed: x,
+    enteredAnActiveQuestion: P,
+    marketClosed: l
+  } = t, [L, p] = b(e), m = Z(t), v = _({ questionType: d, questionVoted: s, correct: g, hasCorrectAnswer: k, questionStatus: C }), f = l && d === o.PREDICTION, R = s || f, Q = d === o.PREDICTION && !s && !l, B = s && !h && m !== "incorrect";
+  return j(() => {
+    e > 0 && (p(0), requestAnimationFrame(() => {
+      p(e);
+    }));
+  }, [e]), /* @__PURE__ */ u(
+    W,
     {
       value: c,
       "data-selected": h,
-      "data-answer-state": I,
-      disabled: s || g || O || m && !p || m && p && v,
-      "data-is-not-checked": s && !h && I !== "incorrect",
-      onClick: (Q) => {
-        w(
-          d === i.PREDICTION ? u : E === T.RESOLVED
-        ), S(Q);
+      "data-answer-state": m,
+      disabled: s || O || w || f && !P || f && P && x,
+      "data-is-not-checked": B,
+      onClick: (V) => {
+        D(
+          d === o.PREDICTION ? l : C === S.RESOLVED
+        ), A(V);
       },
       children: [
-        /* @__PURE__ */ e($, { "data-answer-state": I, style: { width: `${N ? o : 0}%` } }),
-        /* @__PURE__ */ l(M, { children: [
-          n && C && ((R = f[C]) == null ? void 0 : R.call(f, n)),
-          /* @__PURE__ */ e(W, { children: r }),
-          L && /* @__PURE__ */ l("div", { children: [
-            /* @__PURE__ */ e(P, { value: D }),
-            /* @__PURE__ */ e(y, { children: "pts" })
+        /* @__PURE__ */ n(z, { "data-answer-state": m, style: { width: `${R ? L : 0}%` } }),
+        /* @__PURE__ */ u(G, { children: [
+          r && E && ((N = I[E]) == null ? void 0 : N.call(I, r)),
+          /* @__PURE__ */ n(H, { children: i }),
+          Q && /* @__PURE__ */ u("div", { children: [
+            T,
+            /* @__PURE__ */ n(J, { children: "pts" })
           ] }),
-          N && /* @__PURE__ */ l(z, { children: [
-            x && /* @__PURE__ */ e(F, { name: "selected" }),
-            /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(P, { value: o, suffix: "%" }) })
+          R && /* @__PURE__ */ u(K, { children: [
+            v && /* @__PURE__ */ n(X, { name: "selected" }),
+            /* @__PURE__ */ n(Y, { children: /* @__PURE__ */ n(U, { value: e, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -85,5 +89,5 @@ const f = {
   );
 };
 export {
-  rt as VotingOption
+  st as VotingOption
 };

package/lib/ui/gamification/vote/win-bar/index.d.ts

@@ -5,6 +5,7 @@ interface WinBarProps {
     points?: number;
     isPlayingTimer?: boolean;
     isTimer?: boolean;
+    animatePoints?: boolean;
     questionType?: QuestionType;
     timerDuration?: number;
     onTimerExpired?: () => void;

package/lib/ui/gamification/vote/win-bar/index.js

@@ -1,35 +1,36 @@
-import { jsxs as i, jsx as r, Fragment as d } from "react/jsx-runtime";
-import { QuestionType as t } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as l } from "../../../animated-counter/index.js";
-import { Timer as s } from "../../../timer/index.js";
-import { WinBarContainer as h, Content as P, Title as C, WinIcon as f, Points as u, PointsCount as I, PointsUnits as T } from "./styles.js";
+import { jsxs as i, jsx as r, Fragment as p } from "react/jsx-runtime";
+import { QuestionType as o } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as s } from "../../../animated-counter/index.js";
+import { Timer as h } from "../../../timer/index.js";
+import { WinBarContainer as P, Content as C, Title as f, WinIcon as u, Points as I, PointsCount as y, PointsUnits as T } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
 import "react";
 import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../icons/index.js";
-const N = ({
-  title: o,
-  points: e,
+const R = ({
+  title: e,
+  points: n,
   isPlayingTimer: m,
   isTimer: c,
-  questionType: n,
-  timerDuration: p,
-  onTimerExpired: a
-}) => /* @__PURE__ */ i(h, { style: { justifyContent: n === t.PREDICTION ? "center" : "space-between" }, children: [
-  /* @__PURE__ */ i(P, { children: [
-    o && /* @__PURE__ */ r(C, { children: o }),
-    e !== void 0 && n !== t.POLL && /* @__PURE__ */ i(d, { children: [
-      /* @__PURE__ */ r(f, { name: "icon-trophy" }),
-      /* @__PURE__ */ i(u, { children: [
-        /* @__PURE__ */ r(I, { children: /* @__PURE__ */ r(l, { value: e }) }),
+  animatePoints: a,
+  questionType: t,
+  timerDuration: d,
+  onTimerExpired: l
+}) => /* @__PURE__ */ i(P, { style: { justifyContent: t === o.PREDICTION ? "center" : "space-between" }, children: [
+  /* @__PURE__ */ i(C, { children: [
+    e && /* @__PURE__ */ r(f, { children: e }),
+    n !== void 0 && t !== o.POLL && /* @__PURE__ */ i(p, { children: [
+      /* @__PURE__ */ r(u, { name: "icon-trophy" }),
+      /* @__PURE__ */ i(I, { children: [
+        /* @__PURE__ */ r(y, { children: a ? /* @__PURE__ */ r(s, { value: n, delay: 0.3 }) : n }),
         /* @__PURE__ */ r(T, { children: "PTS" })
       ] })
     ] })
   ] }),
-  c && n !== t.PREDICTION && /* @__PURE__ */ r(s, { isPlaying: m, onTimerExpired: a, duration: p })
+  c && t !== o.PREDICTION && /* @__PURE__ */ r(h, { isPlaying: m, onTimerExpired: l, duration: d })
 ] });
 export {
-  N as WinBar
+  R as WinBar
 };

package/lib/ui/modal/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type ModalProps = {
+    Modal: React.ReactNode;
+    container: React.MutableRefObject<HTMLDivElement | null>;
+    fixedView: boolean;
+    useContainer: boolean;
+};
+export declare const createModal: ({ Modal, container, fixedView, useContainer }: ModalProps) => import("react").ReactPortal | null;
+export {};

package/lib/ui/modal/index.js

@@ -0,0 +1,34 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { cx as l } from "@linaria/core";
+import { styled as m } from "@linaria/react";
+import { r as n } from "../../index-jRXrW6ie.js";
+import "../../index-uEuzH3jr.js";
+import "react";
+const c = /* @__PURE__ */ m("div")({
+  name: "StaticContainer",
+  class: "svm502q",
+  propsAsIs: !1
+}), i = "fd3gza8", d = `
+  body {
+    overflow: hidden !important;
+  }
+`, p = `
+  .sl-hide-on-modal {
+    display: none !important;
+  }
+`, C = ({
+  Modal: o,
+  container: t,
+  fixedView: r,
+  useContainer: s
+}) => t.current ? s ? n.createPortal(/* @__PURE__ */ a(c, {
+  className: l(r && i),
+  children: [o, r && /* @__PURE__ */ e("style", {
+    children: d
+  }), !r && /* @__PURE__ */ e("style", {
+    children: p
+  })]
+}), t.current, "modal-node") : n.createPortal(o, t.current, "modal-node") : null;
+export {
+  C as createModal
+};

package/lib/ui/navigation/button/FeaturedGroups.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { ButtonProps } from '.';
 export declare const FeaturedGroupsButtonId = "featuredGroups";
-export declare const FeaturedGroupsButton: React.FC<Omit<ButtonProps, 'label' | 'id' | 'icon'>>;
+export declare const FeaturedGroupsButton: React.FC<Omit<ButtonProps, 'label' | 'id' | 'icon'> & {
+    labelFull: boolean;
+}>;

package/lib/ui/navigation/button/FeaturedGroups.js

@@ -1,26 +1,26 @@
-import { jsx as r } from "react/jsx-runtime";
-import { styled as e } from "@linaria/react";
-import { SvgIcon as n } from "../../icons/index.js";
-import { Button as s } from "./index.js";
+import { jsx as e } from "react/jsx-runtime";
+import { styled as r } from "@linaria/react";
+import { SvgIcon as u } from "../../icons/index.js";
+import { Button as n } from "./index.js";
 import "react";
 import "./styles.js";
-const u = () => n, c = /* @__PURE__ */ e(u())({
+const s = () => u, a = /* @__PURE__ */ r(s())({
   name: "ButtonIcon",
   class: "b11des7c",
   propsAsIs: !0
-}), l = "featuredGroups", B = (t) => {
+}), f = "featuredGroups", G = (t) => {
   var o;
-  return /* @__PURE__ */ r(s, {
+  return /* @__PURE__ */ e(n, {
     ...t,
-    label: "FG+",
+    label: t.labelFull ? "Featured Groups +" : "FG+",
     id: "featuredGroups",
-    icon: /* @__PURE__ */ r(c, {
+    icon: /* @__PURE__ */ e(a, {
       name: "icon-btn-feature-groups",
       "data-selected": (o = t.active) == null ? void 0 : o.toString()
     })
   });
 };
 export {
-  B as FeaturedGroupsButton,
-  l as FeaturedGroupsButtonId
+  G as FeaturedGroupsButton,
+  f as FeaturedGroupsButtonId
 };