@streamlayer/react-ui 0.51.0 → 0.52.1

package/lib/ui/demo/Gamification.js

@@ -32,6 +32,7 @@ import "../gamification/question/styles.js";
 import "../icons/index.js";
 import "../gamification/question/list/styles.js";
 import "../gamification/vote/index.js";
+import "../app/styles.js";
 import "../gamification/vote/feedback/index.js";
 import "../gamification/vote/feedback/styles.js";
 import "../gamification/vote/styles.js";
@@ -59,17 +60,17 @@ import "react-window";
 import "react-window-infinite-loader";
 import "../gamification/leaderboard-item/index.js";
 import "../gamification/leaderboard-item/styles.js";
-const nt = ({
+const st = ({
   gamification: r,
   sdk: u
 }) => {
   var d, v, c, b, y, g, S, h, C, G, L, Q, A, E, f, w, x, P, F, O, B, D, R;
-  const T = p(r.status), j = p(r.onboardingStatus), l = p(r.openedQuestion), { slStreamId: o } = p(u.sdkStore), e = p(r.featureSettings), [n, q] = K(a.HOME);
+  const T = p(r.status), j = p(r.onboardingStatus), l = p(r.openedQuestion), { slStreamId: e } = p(u.sdkStore), o = p(r.featureSettings), [n, q] = K(a.HOME);
   if (T !== J.Ready)
     return /* @__PURE__ */ t("div", { children: "wait..." });
-  if (o != null && o.loading)
+  if (e != null && e.loading)
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
-  if (!(o != null && o.data))
+  if (!(e != null && e.data))
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
   if (!j)
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
@@ -77,16 +78,16 @@ const nt = ({
       {
         closeFeature: u.closeFeature,
         gamification: r,
-        steps: (v = (d = e.inplayGame) == null ? void 0 : d.onboarding) == null ? void 0 : v.steps,
-        gameIcon: (y = (b = (c = e.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : b.media) == null ? void 0 : y.gameIcon,
-        sponsorLogo: (h = (S = (g = e.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : S.media) == null ? void 0 : h.sponsorLogo,
-        rules: (G = (C = e.inplayGame) == null ? void 0 : C.rules) == null ? void 0 : G.rules,
-        rulesBtnLabel: (Q = (L = e.inplayGame) == null ? void 0 : L.rules) == null ? void 0 : Q.buttonLabel,
-        rulesTitle: (E = (A = e.inplayGame) == null ? void 0 : A.rules) == null ? void 0 : E.heading,
-        primaryColor: (x = (w = (f = e.inplayGame) == null ? void 0 : f.overview) == null ? void 0 : w.appearance) == null ? void 0 : x.primaryColor,
-        inviteCardTitle: (F = (P = e.inplayGame) == null ? void 0 : P.inviteCard) == null ? void 0 : F.heading,
-        inviteCardSubtext: (B = (O = e.inplayGame) == null ? void 0 : O.inviteCard) == null ? void 0 : B.subtext,
-        inviteCardBtnLabel: (R = (D = e.inplayGame) == null ? void 0 : D.inviteCard) == null ? void 0 : R.buttonLabel
+        steps: (v = (d = o.inplayGame) == null ? void 0 : d.onboarding) == null ? void 0 : v.steps,
+        gameIcon: (y = (b = (c = o.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : b.media) == null ? void 0 : y.gameIcon,
+        sponsorLogo: (h = (S = (g = o.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : S.media) == null ? void 0 : h.sponsorLogo,
+        rules: (G = (C = o.inplayGame) == null ? void 0 : C.rules) == null ? void 0 : G.rules,
+        rulesBtnLabel: (Q = (L = o.inplayGame) == null ? void 0 : L.rules) == null ? void 0 : Q.buttonLabel,
+        rulesTitle: (E = (A = o.inplayGame) == null ? void 0 : A.rules) == null ? void 0 : E.heading,
+        primaryColor: (x = (w = (f = o.inplayGame) == null ? void 0 : f.overview) == null ? void 0 : w.appearance) == null ? void 0 : x.primaryColor,
+        inviteCardTitle: (F = (P = o.inplayGame) == null ? void 0 : P.inviteCard) == null ? void 0 : F.heading,
+        inviteCardSubtext: (B = (O = o.inplayGame) == null ? void 0 : O.inviteCard) == null ? void 0 : B.subtext,
+        inviteCardBtnLabel: (R = (D = o.inplayGame) == null ? void 0 : D.inviteCard) == null ? void 0 : R.buttonLabel
       }
     ) });
   const H = (i) => {
@@ -111,5 +112,5 @@ const nt = ({
   ] });
 };
 export {
-  nt as GamificationComponent
+  st as GamificationComponent
 };

package/lib/ui/demo/Highlights.js

@@ -29,6 +29,7 @@ import "../gamification/constants.js";
 import "../gamification/question/styles.js";
 import "../icons/index.js";
 import "../gamification/vote/index.js";
+import "../app/styles.js";
 import "../gamification/vote/feedback/index.js";
 import "../gamification/vote/feedback/styles.js";
 import "../gamification/vote/styles.js";
@@ -47,7 +48,7 @@ import "../gamification/detailed-insight/index.js";
 import "../gamification/common-header/index.js";
 import "../../icon-exit-d3f9fc80.js";
 import "../gamification/detailed-insight/styles.js";
-const nt = ({ highlights: i, sdk: e }) => {
+const st = ({ highlights: i, sdk: e }) => {
   const n = m(i.status), r = m(i.openedInsight), { slStreamId: o } = m(e.sdkStore);
   return n !== d.Ready ? /* @__PURE__ */ t("div", { children: "wait..." }) : o != null && o.loading ? /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) }) : o != null && o.data ? i.insights === void 0 ? /* @__PURE__ */ t("div", { children: "wait insights..." }) : /* @__PURE__ */ s(p, { children: [
     !r && /* @__PURE__ */ t(c, { highlights: i, store: i.insights.getStore() }),
@@ -62,5 +63,5 @@ const nt = ({ highlights: i, sdk: e }) => {
   ] }) : /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
 };
 export {
-  nt as HighlightsComponent
+  st as HighlightsComponent
 };

package/lib/ui/demo/components/Insight.d.ts

@@ -4,4 +4,5 @@ export declare const Insight: React.FC<{
     openedInsight: Exclude<Highlights['openedInsight']['value'], undefined>;
     closeHighlights: () => void;
     closeInsight: () => void;
+    className?: string;
 }>;

package/lib/ui/demo/components/Insight.js

@@ -1,24 +1,25 @@
-import { jsx as p } from "react/jsx-runtime";
-import { DetailedInsight as L } from "../../gamification/detailed-insight/index.js";
+import { jsx as L } from "react/jsx-runtime";
+import { DetailedInsight as c } from "../../gamification/detailed-insight/index.js";
 import "../../gamification/common-header/index.js";
 import "../../../icon-exit-d3f9fc80.js";
 import "../../gamification/common-header/styles.js";
 import "@linaria/react";
 import "../../gamification/detailed-insight/styles.js";
-const j = ({ openedInsight: o, closeHighlights: r, closeInsight: s }) => {
+const x = ({ openedInsight: o, closeHighlights: r, closeInsight: s, className: l }) => {
   var t, a, b, n, e;
   const i = ((t = o.options) == null ? void 0 : t.options.case) === "factoid" ? {
     image: o.options.options.value.image,
     body: o.options.options.value.body,
     webLink: (a = o.options.options.value.webLink) == null ? void 0 : a.url,
     webLinkLabel: (b = o.options.options.value.webLink) == null ? void 0 : b.label
-  } : {}, l = o.subject || ((n = o.notification) == null ? void 0 : n.title), m = i.body || ((e = o.notification) == null ? void 0 : e.body);
-  return /* @__PURE__ */ p(
-    L,
+  } : {}, m = o.subject || ((n = o.notification) == null ? void 0 : n.title), p = i.body || ((e = o.notification) == null ? void 0 : e.body);
+  return /* @__PURE__ */ L(
+    c,
     {
+      className: l,
       image: i.image,
-      title: l,
-      description: m,
+      title: m,
+      description: p,
       webLink: i.webLink,
       webLinkLabel: i.webLinkLabel,
       closeInsight: s,
@@ -27,5 +28,5 @@ const j = ({ openedInsight: o, closeHighlights: r, closeInsight: s }) => {
   );
 };
 export {
-  j as Insight
+  x as Insight
 };

package/lib/ui/demo/components/Insights.d.ts

@@ -3,4 +3,5 @@ import type { Highlights } from '@streamlayer/feature-gamification';
 export declare const Insights: React.FC<{
     highlights: Highlights;
     store: ReturnType<Exclude<Highlights['insights'], undefined>['getStore']>;
+    className?: string;
 }>;

package/lib/ui/demo/components/Insights.js

@@ -1,15 +1,15 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useStore as s } from "@nanostores/react";
-import { InsightList as n } from "../../gamification/insight-list/index.js";
+import { jsx as r } from "react/jsx-runtime";
+import { useStore as p } from "@nanostores/react";
+import { InsightList as s } from "../../gamification/insight-list/index.js";
 import "../../gamification/insight/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../gamification/insight/styles.js";
 import "@linaria/react";
 import "../../gamification/insight-list/styles.js";
-const d = ({ highlights: r, store: o }) => {
-  const { data: t } = s(o);
-  return t ? /* @__PURE__ */ i(n, { insights: t, openInsight: r.openHighlight }) : /* @__PURE__ */ i("div", { children: "wait insights..." });
+const c = ({ highlights: o, store: n, className: t }) => {
+  const { data: i } = p(n);
+  return i ? /* @__PURE__ */ r(s, { className: t, insights: i, openInsight: o.openHighlight }) : /* @__PURE__ */ r("div", { className: t, children: "wait insights..." });
 };
 export {
-  d as Insights
+  c as Insights
 };

package/lib/ui/demo/components/Question.js

@@ -2,6 +2,7 @@ import { jsx as o } from "react/jsx-runtime";
 import { styled as f } from "@linaria/react";
 import { useState as p, useCallback as n, useMemo as s } from "react";
 import { Vote as d } from "../../gamification/vote/index.js";
+import "../../app/styles.js";
 import "../../gamification/vote/feedback/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../icons/index.js";
@@ -41,14 +42,14 @@ const y = f.div`
       transform: translateX(0);
     }
   }
-`, I = ({ openedQuestion: t, closeQuestion: h, vote: a }) => {
-  var m;
-  const [e, c] = p(!1);
+`, S = ({ openedQuestion: t, closeQuestion: h, vote: a }) => {
+  var c;
+  const [e, m] = p(!1);
   n(
     (r) => {
-      c(r);
+      m(r);
     },
-    [c]
+    [m]
   );
   const i = s(
     () => t == null ? void 0 : t.answers.find((r) => r.youVoted === !0),
@@ -61,7 +62,7 @@ const y = f.div`
     d,
     {
       title: t.subject,
-      feedbackMessages: (m = t.options) == null ? void 0 : m.options.value,
+      feedbackMessages: (c = t.options) == null ? void 0 : c.options.value,
       questionType: t.type,
       questionId: t.id,
       questionVoted: !!i,
@@ -84,5 +85,5 @@ const y = f.div`
   ) }) }) }) : null;
 };
 export {
-  I as Question
+  S as Question
 };

package/lib/ui/demo/components/index.js

@@ -1,10 +1,10 @@
-import { UserSummary as mr } from "./UserSummary.js";
-import { QuestionsList as ir } from "./QuestionsList.js";
-import { Question as sr } from "./Question.js";
-import { Onboarding as xr } from "../../gamification/onboarding/index.js";
-import { Insights as ar } from "./Insights.js";
-import { Insight as gr } from "./Insight.js";
-import { Leaderboard as br } from "./Leaderboard.js";
+import { UserSummary as pr } from "./UserSummary.js";
+import { QuestionsList as er } from "./QuestionsList.js";
+import { Question as fr } from "./Question.js";
+import { Onboarding as nr } from "../../gamification/onboarding/index.js";
+import { Insights as dr } from "./Insights.js";
+import { Insight as ur } from "./Insight.js";
+import { Leaderboard as hr } from "./Leaderboard.js";
 import "react/jsx-runtime";
 import "@nanostores/react";
 import "../../gamification/user-statistics/index.js";
@@ -26,6 +26,7 @@ import "../../icons/index.js";
 import "react";
 import "../../gamification/question/list/styles.js";
 import "../../gamification/vote/index.js";
+import "../../app/styles.js";
 import "../../gamification/vote/feedback/index.js";
 import "../../gamification/vote/feedback/styles.js";
 import "../../gamification/vote/styles.js";
@@ -61,11 +62,11 @@ import "react-window-infinite-loader";
 import "../../gamification/leaderboard-item/index.js";
 import "../../gamification/leaderboard-item/styles.js";
 export {
-  gr as Insight,
-  ar as Insights,
-  br as Leaderboard,
-  xr as Onboarding,
-  sr as Question,
-  ir as QuestionsList,
-  mr as UserSummary
+  ur as Insight,
+  dr as Insights,
+  hr as Leaderboard,
+  nr as Onboarding,
+  fr as Question,
+  er as QuestionsList,
+  pr as UserSummary
 };

package/lib/ui/demo/index.js

@@ -45,6 +45,7 @@ import "../icons/index.js";
 import "../gamification/question/list/styles.js";
 import "./components/Question.js";
 import "../gamification/vote/index.js";
+import "../app/styles.js";
 import "../gamification/vote/feedback/index.js";
 import "../gamification/vote/feedback/styles.js";
 import "../gamification/vote/styles.js";
@@ -169,7 +170,7 @@ const R = ({ activeFeature: o, sdk: r }) => {
     ] }),
     h
   ] });
-}, gr = ({ sdk: o }) => {
+}, Sr = ({ sdk: o }) => {
   const r = f(o.organizationStore()), t = f(o.getUserStore()), a = f(o.getActiveFeature());
   return r.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : r.data ? t.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : t.data ? /* @__PURE__ */ l(T, { children: [
     /* @__PURE__ */ e(x, { notificationsStore: o.getNotificationsStore() }),
@@ -177,5 +178,5 @@ const R = ({ activeFeature: o, sdk: r }) => {
   ] }) : /* @__PURE__ */ e(H, { sdk: o }) : /* @__PURE__ */ e("div", { children: "wrong sdk key..." });
 };
 export {
-  gr as Demo
+  Sr as Demo
 };

package/lib/ui/gamification/detailed-insight/index.d.ts

@@ -7,6 +7,7 @@ type DetailedInsightProps = {
     webLink?: string;
     closeHighlights: () => void;
     closeInsight: () => void;
+    className?: string;
 };
 export declare const DetailedInsight: React.FC<DetailedInsightProps>;
 export {};

package/lib/ui/gamification/detailed-insight/index.js

@@ -1,29 +1,30 @@
 import { jsxs as I, jsx as M } from "react/jsx-runtime";
-import { CommonHeader as Z } from "../common-header/index.js";
-import { Container as g, Image as l, AdditionalContent as o, Title as n, Description as d, AdditionalBtn as r, LinkIcon as a } from "./styles.js";
+import { CommonHeader as g } from "../common-header/index.js";
+import { Container as l, Image as o, AdditionalContent as n, Title as d, Description as r, AdditionalBtn as a, LinkIcon as u } from "./styles.js";
 import "../../../icon-exit-d3f9fc80.js";
 import "../common-header/styles.js";
 import "@linaria/react";
-const u = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0ic2MtQU5kc04ga1RWV0pFIj48cGF0aCBkPSJNNi42NjY1IDMuMTY2NjlINC45OTk4NEM0LjI2MzQ2IDMuMTY2NjkgMy42NjY1IDMuNzYzNjQgMy42NjY1IDQuNTAwMDJWMTEuNUMzLjY2NjUgMTIuMjM2NCA0LjI2MzQ2IDEyLjgzMzQgNC45OTk4NCAxMi44MzM0SDExLjk5OThDMTIuNzM2MiAxMi44MzM0IDEzLjMzMzIgMTIuMjM2NCAxMy4zMzMyIDExLjVWOS44MzMzNSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PHBhdGggZD0iTTEzLjMzMzUgNi4xNjY2OVYzLjE2NjY5SDEwLjMzMzUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjxwYXRoIGQ9Ik0xMy4xNjY4IDMuMzMzMzFMOC4zMzM1IDguMTY2NjUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjwvc3ZnPgo=", C = ({
+const b = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0ic2MtQU5kc04ga1RWV0pFIj48cGF0aCBkPSJNNi42NjY1IDMuMTY2NjlINC45OTk4NEM0LjI2MzQ2IDMuMTY2NjkgMy42NjY1IDMuNzYzNjQgMy42NjY1IDQuNTAwMDJWMTEuNUMzLjY2NjUgMTIuMjM2NCA0LjI2MzQ2IDEyLjgzMzQgNC45OTk4NCAxMi44MzM0SDExLjk5OThDMTIuNzM2MiAxMi44MzM0IDEzLjMzMzIgMTIuMjM2NCAxMy4zMzMyIDExLjVWOS44MzMzNSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PHBhdGggZD0iTTEzLjMzMzUgNi4xNjY2OVYzLjE2NjY5SDEwLjMzMzUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjxwYXRoIGQ9Ik0xMy4xNjY4IDMuMzMzMzFMOC4zMzM1IDguMTY2NjUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjwvc3ZnPgo=", L = ({
   image: i,
   title: j,
   description: m,
   webLinkLabel: z,
   webLink: c,
   closeHighlights: t,
-  closeInsight: N
-}) => /* @__PURE__ */ I(g, { children: [
-  /* @__PURE__ */ M(Z, { close: t, comeBack: N }),
-  i && /* @__PURE__ */ M(l, { alt: "detail-insight-image", src: i }),
-  /* @__PURE__ */ I(o, { children: [
-    j && /* @__PURE__ */ M(n, { children: j }),
-    m && /* @__PURE__ */ M(d, { children: m })
+  closeInsight: N,
+  className: Z
+}) => /* @__PURE__ */ I(l, { className: Z, children: [
+  /* @__PURE__ */ M(g, { close: t, comeBack: N }),
+  i && /* @__PURE__ */ M(o, { alt: "detail-insight-image", src: i }),
+  /* @__PURE__ */ I(n, { children: [
+    j && /* @__PURE__ */ M(d, { children: j }),
+    m && /* @__PURE__ */ M(r, { children: m })
   ] }),
-  c && z && /* @__PURE__ */ I(r, { href: c, target: "_blank", children: [
+  c && z && /* @__PURE__ */ I(a, { href: c, target: "_blank", children: [
     z,
-    /* @__PURE__ */ M(a, { alt: "link-icon", src: u })
+    /* @__PURE__ */ M(u, { alt: "link-icon", src: b })
   ] })
 ] });
 export {
-  C as DetailedInsight
+  L as DetailedInsight
 };

package/lib/ui/gamification/insight-list/index.d.ts

@@ -8,6 +8,7 @@ interface InsightListProps {
         title: string;
     }>;
     openInsight: (insightId: string) => void;
+    className?: string;
 }
 export declare const InsightList: React.FC<InsightListProps>;
 export {};

package/lib/ui/gamification/insight-list/index.js

@@ -1,10 +1,10 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Insight as e } from "../insight/index.js";
-import { Container as n, ItemsContainer as i } from "./styles.js";
+import { Insight as n } from "../insight/index.js";
+import { Container as i, ItemsContainer as p } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "../insight/styles.js";
 import "@linaria/react";
-const l = ({ insights: r, openInsight: m }) => /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(i, { children: r == null ? void 0 : r.map((t) => /* @__PURE__ */ o(e, { openInsight: m, ...t }, t.questionId)) }) });
+const u = ({ insights: r, openInsight: m, className: e }) => /* @__PURE__ */ o(i, { className: e, children: /* @__PURE__ */ o(p, { children: r == null ? void 0 : r.map((t) => /* @__PURE__ */ o(n, { openInsight: m, ...t }, t.questionId)) }) });
 export {
-  l as InsightList
+  u as InsightList
 };

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

@@ -1,18 +1,20 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { formatDecimals as r } from "../../../utils/common.js";
-import { PointsContainer as n, PointsIcon as m, PointsSvg as s, PointsBody as e, PointsTitle as p, PointsValue as c } from "./styles.js";
+import { resetCss as r } from "../../theme/theme.js";
+import { formatDecimals as n } from "../../../utils/common.js";
+import { PointsContainer as m, PointsIcon as s, PointsSvg as e, PointsBody as p, PointsTitle as c, PointsValue as l } from "./styles.js";
+import "@linaria/core";
+import "../../theme/constants.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
 import "../../theme/breakpoints.js";
-import "../../theme/constants.js";
-const u = ({ points: t }) => /* @__PURE__ */ i(n, { children: [
-  /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(s, { name: "icon-trophy" }) }),
-  /* @__PURE__ */ i(e, { children: [
-    /* @__PURE__ */ o(p, { children: "Total points" }),
-    /* @__PURE__ */ o(c, { children: r(t) })
+const T = ({ points: t }) => /* @__PURE__ */ i(m, { className: r, children: [
+  /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(e, { name: "icon-trophy" }) }),
+  /* @__PURE__ */ i(p, { children: [
+    /* @__PURE__ */ o(c, { children: "Total points" }),
+    /* @__PURE__ */ o(l, { children: n(t) })
   ] })
 ] });
 export {
-  u as Points
+  T as Points
 };

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

@@ -1,71 +1,71 @@
-import { jsx as s, jsxs as A } from "react/jsx-runtime";
-import { useState as e, useCallback as C, useMemo as l } from "react";
+import { jsx as i, jsxs as g } from "react/jsx-runtime";
+import { useState as e, useCallback as A, useMemo as l } from "react";
+import { SDKScrollContainer as S } from "../../app/styles.js";
 import { Feedback as b } from "./feedback/index.js";
-import { Container as E, Content as M, Title as j, Options as k } from "./styles.js";
+import { Container as E, Content as j, Title as k, Options as u } from "./styles.js";
 import { VotingOption as O } from "./vote-option/index.js";
 import { WinBar as I } from "./win-bar/index.js";
+import "@linaria/react";
 import "@streamlayer/sdk-web-types";
 import "../../icons/index.js";
-import "@linaria/react";
 import "./feedback/styles.js";
 import "./vote-option/styles.js";
 import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "./win-bar/styles.js";
-const X = ({ openedQuestion: r, vote: f }) => {
-  var V;
-  const d = r.subject, q = r.type, a = (V = r.options) == null ? void 0 : V.options, [n, v] = e(!1), [w, T] = e(!1), [y, g] = e(""), m = r == null ? void 0 : r.id, p = C(
+const Y = ({ openedQuestion: r, vote: n }) => {
+  var d;
+  const x = r.subject, V = r.type, a = (d = r.options) == null ? void 0 : d.options, [c, v] = e(!1), [f, w] = e(!1), [T, p] = e(""), o = r == null ? void 0 : r.id, q = A(
     async (t) => {
-      if (m) {
-        const c = t.currentTarget.value;
-        g(c), T(!0), await f(m, c), T(!1);
+      if (o) {
+        const h = t.currentTarget.value;
+        p(h), w(!0), await n(o, h), w(!1);
       }
     },
-    [m, g, f]
-  ), i = l(
+    [o, p, n]
+  ), s = l(
     () => r == null ? void 0 : r.answers.find((t) => t.youVoted === !0),
     [r]
-  ), o = l(
+  ), m = l(
     () => !!(r != null && r.answers.find((t) => t.correct === !0)),
     [r]
-  ), h = l(() => r ? r.answers.map((t) => {
-    var c;
-    return {
-      ...t,
-      questionVoted: !!i,
-      youSelected: y === t.id,
-      isLoading: w,
-      hasCorrectAnswer: o,
-      questionType: r.type,
-      imageMode: (c = r.notification) == null ? void 0 : c.imageMode,
-      onVote: p
-    };
-  }) : [], [o, w, r, i, p, y]), x = a && (a.case === "trivia" || a.case === "prediction") ? a.value : void 0;
-  return /* @__PURE__ */ s(E, { children: /* @__PURE__ */ A(M, { children: [
-    x && /* @__PURE__ */ s(
+  ), C = l(() => r ? r.answers.map((t) => ({
+    ...t,
+    questionVoted: !!s,
+    youSelected: T === t.id,
+    isLoading: f,
+    hasCorrectAnswer: m,
+    questionType: r.type,
+    answerTimeExpired: c,
+    questionStatus: r.status,
+    // ToDo: Figure out why imageMode is not in the response
+    onVote: q
+  })) : [], [m, c, f, r, s, q, T]), y = a && (a.case === "trivia" || a.case === "prediction") ? a.value : void 0;
+  return /* @__PURE__ */ i(S, { "data-question-header": "true", children: /* @__PURE__ */ i(E, { children: /* @__PURE__ */ g(j, { children: [
+    y && /* @__PURE__ */ i(
       b,
       {
-        feedbackMessages: x,
-        questionVoted: !!i,
-        questionVotedCorrectly: i == null ? void 0 : i.correct,
-        questionType: q,
-        hasCorrectAnswer: o
+        feedbackMessages: y,
+        questionVoted: !!s,
+        questionVotedCorrectly: s == null ? void 0 : s.correct,
+        questionType: V,
+        hasCorrectAnswer: m
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ i(
       I,
       {
-        title: n ? "Expired" : "To win",
-        points: n ? void 0 : 100,
+        title: c ? "Expired" : "To win",
+        points: c ? void 0 : 100,
         onTimerExpired: () => v(!0),
         isTimer: !0
       }
     ),
-    /* @__PURE__ */ s(j, { children: d }),
-    /* @__PURE__ */ s(k, { children: h.map((t) => /* @__PURE__ */ s(O, { ...t }, t.id)) })
-  ] }) });
+    /* @__PURE__ */ i(k, { children: x }),
+    /* @__PURE__ */ i(u, { children: C.map((t) => /* @__PURE__ */ i(O, { ...t }, t.id)) })
+  ] }) }) });
 };
 export {
-  X as Vote
+  Y as Vote
 };

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

@@ -8,15 +8,15 @@ const o = t.div`
   }
 `, n = t.div`
   width: 100%;
-  padding: 0px 16px;
-`, r = t.div`
+  padding: 16px 16px 0px 16px;
+`, p = t.div`
   font-family: var(--font-serif);
   font-size: 16px;
   color: var(--color-primary-green2);
   font-weight: 400;
   margin: 16px 0px;
   margin-bottom: 16px;
-`, e = t.div`
+`, r = t.div`
   position: relative;
   gap: 8px;
   display: flex;
@@ -25,6 +25,6 @@ const o = t.div`
 export {
   o as Container,
   n as Content,
-  e as Options,
-  r as Title
+  r as Options,
+  p as Title
 };

package/lib/ui/gamification/vote/vote-option/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { QuestionType, QuestionImages, ExtendedQuestionAnswer } from '@streamlayer/sdk-web-types';
+import { QuestionType, QuestionImages, QuestionStatus, ExtendedQuestionAnswer } from '@streamlayer/sdk-web-types';
 export type VotingOptionProps = ExtendedQuestionAnswer & {
     questionVoted: boolean;
     youSelected: boolean;
@@ -7,6 +7,8 @@ export type VotingOptionProps = ExtendedQuestionAnswer & {
     hasCorrectAnswer?: boolean;
     questionType: QuestionType;
     imageMode?: QuestionImages;
+    answerTimeExpired: boolean;
+    questionStatus: QuestionStatus;
     onVote: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 export declare const VotingOption: React.FC<VotingOptionProps>;