@streamlayer/react-ui 0.46.1 → 0.48.0

package/lib/ui/demo/Highlights.js

@@ -17,8 +17,10 @@ import { Insights as c } from "./components/Insights.js";
 import { Insight as f } from "./components/Insight.js";
 import "../gamification/common-header/styles.js";
 import "../gamification/leaderboard-item-detail/styles.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../gamification/leaderboard-item/styles.js";
-import "../gamification/leaderboard-list/styles.js";
 import "@linaria/react";
 import "@streamlayer/sdk-web-types";
 import "../button/index.js";
@@ -27,9 +29,11 @@ import "../gamification/constants.js";
 import "../gamification/question/styles.js";
 import "../icons/index.js";
 import "../gamification/vote/index.js";
-import "../../index-7f3361f2.js";
-import "../gamification/vote/vote-option/styles.js";
+import "../gamification/vote/feedback/index.js";
+import "../gamification/vote/feedback/styles.js";
 import "../gamification/vote/styles.js";
+import "../gamification/vote/vote-option/index.js";
+import "../gamification/vote/vote-option/styles.js";
 import "../gamification/vote/win-bar/index.js";
 import "../timer/index.js";
 import "react-countdown-circle-timer";
@@ -43,7 +47,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 rt = ({ highlights: i, sdk: e }) => {
+const nt = ({ 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() }),
@@ -58,5 +62,5 @@ const rt = ({ highlights: i, sdk: e }) => {
   ] }) : /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
 };
 export {
-  rt as HighlightsComponent
+  nt as HighlightsComponent
 };

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

@@ -8,21 +8,23 @@ import "../../../icon-exit-d3f9fc80.js";
 import "../../gamification/common-header/styles.js";
 import "@linaria/react";
 import "../../gamification/leaderboard-item-detail/styles.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../gamification/leaderboard-item/index.js";
 import "../../../utils/common.js";
 import "../../gamification/leaderboard-item/styles.js";
-import "../../gamification/leaderboard-list/styles.js";
-const y = ({ store: s }) => {
-  const { data: r } = u(s), [e, d] = b(void 0);
+const C = ({ store: p }) => {
+  const { data: r } = u(p), [e, s] = b(void 0);
   if (!r)
     return /* @__PURE__ */ i("div", { children: "wait leader board..." });
   const o = (t) => {
     var m;
-    const p = (m = r.find((n) => {
+    const d = (m = r.find((n) => {
       var a;
       return ((a = n.attributes) == null ? void 0 : a.userId) === t;
     })) == null ? void 0 : m.attributes;
-    d(p);
+    s(d);
   };
   return /* @__PURE__ */ c(l, { children: [
     e && /* @__PURE__ */ i(f, { comeBack: () => o(null), ...e }),
@@ -36,5 +38,5 @@ const y = ({ store: s }) => {
   ] });
 };
 export {
-  y as Leaderboard
+  C as Leaderboard
 };

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

@@ -1,17 +1,19 @@
 import { jsx as o } from "react/jsx-runtime";
 import { styled as f } from "@linaria/react";
-import { useState as n, useCallback as d, useMemo as a } from "react";
-import { Vote as p } from "../../gamification/vote/index.js";
+import { useState as p, useCallback as n, useMemo as s } from "react";
+import { Vote as d } from "../../gamification/vote/index.js";
+import "../../gamification/vote/feedback/index.js";
 import "@streamlayer/sdk-web-types";
-import "../../../index-7f3361f2.js";
-import "../../gamification/vote/vote-option/styles.js";
+import "../../icons/index.js";
+import "../../gamification/vote/feedback/styles.js";
 import "../../gamification/vote/styles.js";
+import "../../gamification/vote/vote-option/index.js";
+import "../../gamification/vote/vote-option/styles.js";
 import "../../gamification/vote/win-bar/index.js";
 import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "../../gamification/vote/win-bar/styles.js";
-import "../../icons/index.js";
 const y = f.div`
   position: absolute;
   top: 0;
@@ -39,31 +41,31 @@ const y = f.div`
       transform: translateX(0);
     }
   }
-`, M = ({ openedQuestion: t, closeQuestion: h, vote: m }) => {
-  var c;
-  const [e, s] = n(!1);
-  d(
+`, I = ({ openedQuestion: t, closeQuestion: h, vote: a }) => {
+  var m;
+  const [e, c] = p(!1);
+  n(
     (r) => {
-      s(r);
+      c(r);
     },
-    [s]
+    [c]
   );
-  const i = a(
+  const i = s(
     () => t == null ? void 0 : t.answers.find((r) => r.youVoted === !0),
     [t]
-  ), l = a(
+  ), l = s(
     () => !!(t != null && t.answers.find((r) => r.correct === !0)),
     [t]
   );
   return t ? /* @__PURE__ */ o(y, { children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-    p,
+    d,
     {
       title: t.subject,
-      feedbackMessages: (c = t.options) == null ? void 0 : c.options.value,
+      feedbackMessages: (m = t.options) == null ? void 0 : m.options.value,
       questionType: t.type,
       questionId: t.id,
-      questionAnswered: !!i,
-      questionAnsweredCorrectly: i == null ? void 0 : i.correct,
+      questionVoted: !!i,
+      questionVotedCorrectly: i == null ? void 0 : i.correct,
       options: t.answers.map((r) => ({
         id: r.id,
         title: r.text,
@@ -73,14 +75,14 @@ const y = f.div`
         percentage: r.percentage,
         answered: r.youVoted,
         disabled: !!i || t.marketClosed || e,
-        questionAnswered: !!i,
+        questionVoted: !!i,
         hasCorrectAnswer: l,
         points: r.points,
-        onVote: m
+        onVote: a
       }))
     }
   ) }) }) }) : null;
 };
 export {
-  M as Question
+  I as Question
 };

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

@@ -1,10 +1,10 @@
-import { UserSummary as $ } from "./UserSummary.js";
-import { QuestionsList as or } from "./QuestionsList.js";
-import { Question as mr } from "./Question.js";
-import { Onboarding as ir } from "../../gamification/onboarding/index.js";
-import { Insights as sr } from "./Insights.js";
-import { Insight as xr } from "./Insight.js";
-import { Leaderboard as ar } from "./Leaderboard.js";
+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 "react/jsx-runtime";
 import "@nanostores/react";
 import "../../gamification/user-statistics/index.js";
@@ -26,9 +26,11 @@ import "../../icons/index.js";
 import "react";
 import "../../gamification/question/list/styles.js";
 import "../../gamification/vote/index.js";
-import "../../../index-7f3361f2.js";
-import "../../gamification/vote/vote-option/styles.js";
+import "../../gamification/vote/feedback/index.js";
+import "../../gamification/vote/feedback/styles.js";
 import "../../gamification/vote/styles.js";
+import "../../gamification/vote/vote-option/index.js";
+import "../../gamification/vote/vote-option/styles.js";
 import "../../gamification/vote/win-bar/index.js";
 import "../../timer/index.js";
 import "react-countdown-circle-timer";
@@ -53,15 +55,17 @@ import "../../gamification/detailed-insight/styles.js";
 import "../../gamification/leaderboard-item-detail/index.js";
 import "../../gamification/leaderboard-item-detail/styles.js";
 import "../../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../gamification/leaderboard-item/index.js";
 import "../../gamification/leaderboard-item/styles.js";
-import "../../gamification/leaderboard-list/styles.js";
 export {
-  xr as Insight,
-  sr as Insights,
-  ar as Leaderboard,
-  ir as Onboarding,
-  mr as Question,
-  or as QuestionsList,
-  $ as UserSummary
+  gr as Insight,
+  ar as Insights,
+  br as Leaderboard,
+  xr as Onboarding,
+  sr as Question,
+  ir as QuestionsList,
+  mr as UserSummary
 };

package/lib/ui/demo/index.js

@@ -45,9 +45,11 @@ import "../icons/index.js";
 import "../gamification/question/list/styles.js";
 import "./components/Question.js";
 import "../gamification/vote/index.js";
-import "../../index-7f3361f2.js";
-import "../gamification/vote/vote-option/styles.js";
+import "../gamification/vote/feedback/index.js";
+import "../gamification/vote/feedback/styles.js";
 import "../gamification/vote/styles.js";
+import "../gamification/vote/vote-option/index.js";
+import "../gamification/vote/vote-option/styles.js";
 import "../gamification/vote/win-bar/index.js";
 import "../timer/index.js";
 import "react-countdown-circle-timer";
@@ -70,9 +72,11 @@ import "../gamification/leaderboard-item-detail/index.js";
 import "../gamification/common-header/index.js";
 import "../gamification/leaderboard-item-detail/styles.js";
 import "../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../gamification/leaderboard-item/index.js";
 import "../gamification/leaderboard-item/styles.js";
-import "../gamification/leaderboard-list/styles.js";
 import "./components/Insights.js";
 import "../gamification/insight-list/index.js";
 import "../gamification/insight/index.js";
@@ -165,7 +169,7 @@ const R = ({ activeFeature: o, sdk: r }) => {
     ] }),
     h
   ] });
-}, lr = ({ sdk: o }) => {
+}, gr = ({ 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() }),
@@ -173,5 +177,5 @@ const R = ({ activeFeature: o, sdk: r }) => {
   ] }) : /* @__PURE__ */ e(H, { sdk: o }) : /* @__PURE__ */ e("div", { children: "wrong sdk key..." });
 };
 export {
-  lr as Demo
+  gr as Demo
 };

package/lib/ui/gamification/detail/sponsor/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Sponsor: React.FC<{
+    sponsorLogo?: string;
+}>;

package/lib/ui/gamification/detail/sponsor/index.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { styled as p } from "@linaria/react";
+const r = p.div`
+  width: 100%;
+  height: 53px;
+  display: flex;
+  padding: 16px 0px;
+  justify-content: center;
+`, i = p.img`
+  max-width: 20px;
+`, d = ({ sponsorLogo: o }) => o && /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(i, { alt: "sponsor-logo", src: o }) });
+export {
+  d as Sponsor
+};

package/lib/ui/gamification/leaderboard-item/index.d.ts

@@ -3,5 +3,6 @@ import type { LeaderboardItem as ILeaderboardItem } from '@streamlayer/sdk-web-t
 export type LeaderboardItemProps = Partial<ILeaderboardItem> & {
     userId: string;
     openItemDetail: () => void;
+    style?: React.CSSProperties;
 };
 export declare const LeaderboardItem: React.FC<LeaderboardItemProps>;

package/lib/ui/gamification/leaderboard-item/index.js

@@ -1,18 +1,25 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { abbreviate as d } from "../../../utils/common.js";
-import { Container as l, RankPosition as c, Avatar as m, AvatarPlaceholder as h, Content as s, NameWrap as p, Name as b, Rank as f, Units as k } from "./styles.js";
+import { abbreviate as l } from "../../../utils/common.js";
+import { Container as c, RankPosition as m, Avatar as h, AvatarPlaceholder as s, Content as p, NameWrap as b, Name as f, Rank as k, Units as v } from "./styles.js";
 import "@linaria/react";
-const j = ({ rank: t, avatar: i, name: n, points: a, openItemDetail: o }) => /* @__PURE__ */ e(l, { onClick: o, children: [
-  /* @__PURE__ */ r(c, { children: t || 0 }),
-  i ? /* @__PURE__ */ r(m, { alt: "leaderboard-item-avatar", src: i }) : /* @__PURE__ */ r(h, { children: d(n || "") }),
-  /* @__PURE__ */ e(s, { children: [
-    /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(b, { children: n || "" }) }),
-    /* @__PURE__ */ e(f, { children: [
-      /* @__PURE__ */ r(k, { children: "PTS" }),
+const A = ({
+  rank: t,
+  avatar: i,
+  name: n,
+  points: a,
+  openItemDetail: o,
+  style: d
+}) => /* @__PURE__ */ e(c, { onClick: o, style: d, children: [
+  /* @__PURE__ */ r(m, { children: t || 0 }),
+  i ? /* @__PURE__ */ r(h, { alt: "leaderboard-item-avatar", src: i }) : /* @__PURE__ */ r(s, { children: l(n || "") }),
+  /* @__PURE__ */ e(p, { children: [
+    /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(f, { children: n || "" }) }),
+    /* @__PURE__ */ e(k, { children: [
+      /* @__PURE__ */ r(v, { children: "PTS" }),
       a || 0
     ] })
   ] })
 ] });
 export {
-  j as LeaderboardItem
+  A as LeaderboardItem
 };

package/lib/ui/gamification/leaderboard-item/styles.js

@@ -8,13 +8,13 @@ const t = e.div`
   width: 100%;
   min-height: 50px;
   max-height: 50px;
-  background-color: var(--color-bg-transparent-item-vote);
-  color: var(--color-white);
+  background-color: #fff;
+  color: #000;
   font-size: 14px;
   font-weight: 600;
   overflow: hidden;
   cursor: pointer;
-`, r = e.div`
+`, n = e.div`
   width: 28px;
   max-width: 28px;
   display: flex;
@@ -22,7 +22,7 @@ const t = e.div`
   justify-content: center;
   margin-right: 4px;
   overflow: hidden;
-`, n = e.img`
+`, r = e.img`
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -36,7 +36,6 @@ const t = e.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-white);
   font-size: 12px;
   flex-shrink: 0;
 `, a = e.div`
@@ -62,19 +61,18 @@ const t = e.div`
   display: flex;
   align-items: center;
   max-width: 75px;
-`, l = e.span`
+`, x = e.span`
   font-size: 10px;
-  color: var(--color-leaderboard-unit);
   margin-right: 4px;
 `;
 export {
-  n as Avatar,
+  r as Avatar,
   o as AvatarPlaceholder,
   t as Container,
   a as Content,
   d as Name,
   p as NameWrap,
   s as Rank,
-  r as RankPosition,
-  l as Units
+  n as RankPosition,
+  x as Units
 };

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

@@ -3,6 +3,7 @@ import { LeaderboardItemProps } from '../../gamification/leaderboard-item';
 type LeaderboardListProps = {
     items: Omit<LeaderboardItemProps, 'openItemDetail'>[];
     openItemDetail: (id: string) => void;
+    fetchMore: () => void;
 };
 export declare const LeaderboardList: React.FC<LeaderboardListProps>;
 export {};

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

@@ -1,10 +1,39 @@
-import { jsx as o } from "react/jsx-runtime";
-import { LeaderboardItem as m } from "../leaderboard-item/index.js";
-import { Container as p } from "./styles.js";
+import { jsx as e } from "react/jsx-runtime";
+import l from "react-virtualized-auto-sizer";
+import { FixedSizeList as u } from "react-window";
+import I from "react-window-infinite-loader";
+import { LeaderboardItem as f } from "../leaderboard-item/index.js";
 import "../../../utils/common.js";
 import "../leaderboard-item/styles.js";
 import "@linaria/react";
-const f = ({ items: e, openItemDetail: t }) => /* @__PURE__ */ o(p, { children: e.map((r) => /* @__PURE__ */ o(m, { ...r, openItemDetail: () => t(r.userId) }, r.userId)) });
+const C = ({ items: r, openItemDetail: i, fetchMore: m }) => /* @__PURE__ */ e(l, { children: ({ width: d, height: n }) => /* @__PURE__ */ e(
+  I,
+  {
+    isItemLoaded: (o) => o < r.length,
+    itemCount: r.length + 1,
+    loadMoreItems: m,
+    children: ({ onItemsRendered: o, ref: p }) => /* @__PURE__ */ e(
+      u,
+      {
+        itemSize: 58,
+        onItemsRendered: o,
+        ref: p,
+        itemCount: r.length,
+        width: d,
+        height: n,
+        children: ({ index: t, style: a }) => /* @__PURE__ */ e(
+          f,
+          {
+            style: a,
+            ...r[t],
+            openItemDetail: () => i(r[t].userId)
+          },
+          r[t].userId
+        )
+      }
+    )
+  }
+) });
 export {
-  f as LeaderboardList
+  C as LeaderboardList
 };

package/lib/ui/gamification/vote/feedback/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { QuestionType } from '@streamlayer/sdk-web-types';
+interface FeedbackProps {
+    feedbackMessages: Partial<Record<'correctFeedback' | 'incorrectFeedback', {
+        description: string;
+        title: string;
+    }>>;
+    questionType: QuestionType;
+    questionVoted?: boolean;
+    questionVotedCorrectly?: boolean;
+    hasCorrectAnswer: boolean;
+}
+export declare const Feedback: React.FC<FeedbackProps>;
+export {};

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

@@ -0,0 +1,33 @@
+import { jsxs as r, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { QuestionType as n } from "@streamlayer/sdk-web-types";
+import { SvgIcon as b } from "../../../icons/index.js";
+import { Container as h, IconPrediction as k, FeedbackDescription as l, FeedbackIconWrap as I, FeedbackHeader as T, FeedbackTitle as f } from "./styles.js";
+import "@linaria/react";
+import "react";
+const R = ({
+  feedbackMessages: t,
+  questionVotedCorrectly: o,
+  questionVoted: F,
+  questionType: i,
+  hasCorrectAnswer: a
+}) => {
+  if (!(F && (i === n.TRIVIA || i === n.PREDICTION)))
+    return null;
+  const p = i === n.PREDICTION && !a, d = o ? "correct" : "incorrect", c = o ? t.correctFeedback : t.incorrectFeedback;
+  return /* @__PURE__ */ r(h, { "data-isPrediction": p, children: [
+    p && /* @__PURE__ */ r(m, { children: [
+      /* @__PURE__ */ e(k, { name: "icon-prediction" }),
+      /* @__PURE__ */ e(l, { children: "Stay tuned to see if your prediction was correct." })
+    ] }),
+    a && /* @__PURE__ */ r(m, { children: [
+      /* @__PURE__ */ e(I, { "data-feedbackType": d, children: /* @__PURE__ */ e(b, { name: d }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(T, { children: [
+        /* @__PURE__ */ e(f, { "data-feedbackType": d, children: c == null ? void 0 : c.title }),
+        /* @__PURE__ */ e(l, { children: c == null ? void 0 : c.description })
+      ] }) })
+    ] })
+  ] });
+};
+export {
+  R as Feedback
+};

package/lib/ui/gamification/vote/feedback/styles.d.ts

@@ -0,0 +1,8 @@
+/// <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 IconPrediction: any;
+export declare const FeedbackIconWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FeedbackHeader: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FeedbackTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const FeedbackDescription: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const FeedbackText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -0,0 +1,70 @@
+import { styled as r } from "@linaria/react";
+import { SvgIcon as e } from "../../../icons/index.js";
+import "react/jsx-runtime";
+import "react";
+const c = r.div`
+  width: 100%;
+  padding: 8px 0px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  font-size: 14px;
+
+  &[data-isPrediction='true'] {
+    align-items: flex-start;
+  }
+`, n = r(e)`
+  min-width: 24px;
+  width: 24px;
+  height: 24px;
+  margin-right: 14px;
+  margin-left: 12px;
+
+  g > path {
+    fill: var(--color-primary-green1);
+    fill-opacity: 1;
+  }
+`, d = r.div`
+  min-width: 32px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+
+  &[data-feedbackType='correct'] {
+    background-color: var(--color-primary-green1);
+  }
+
+  &[data-feedbackType='incorrect'] {
+    background-color: var(--color-secondary-red1);
+  }
+`, p = r.div`
+  font-weight: var(--font-weight-default);
+`, l = r.span`
+  margin-right: 5px;
+
+  &[data-feedbackType='correct'] {
+    color: var(--color-primary-green1);
+  }
+
+  &[data-feedbackType='incorrect'] {
+    color: var(--color-secondary-red1);
+  }
+`, g = r.span`
+  color: var(--color-neutrals-gray9);
+`, s = r.div`
+  font-weight: 400;
+  margin-top: 10px;
+`;
+export {
+  c as Container,
+  g as FeedbackDescription,
+  p as FeedbackHeader,
+  d as FeedbackIconWrap,
+  s as FeedbackText,
+  l as FeedbackTitle,
+  n as IconPrediction
+};

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

@@ -1,13 +1,8 @@
 /// <reference types="react" />
-import { QuestionType } from '@streamlayer/sdk-web-types';
+import { ExtendedQuestion } from '@streamlayer/sdk-web-types';
 interface VoteProps {
-    title: string;
-    questionId: string;
-    options: any[];
-    questionType: QuestionType;
-    feedbackMessages: any;
-    questionAnswered: boolean;
-    questionAnsweredCorrectly?: boolean;
+    openedQuestion: ExtendedQuestion;
+    vote: (questionId: string, answerId: string) => void;
 }
 export declare const Vote: React.FC<VoteProps>;
 export {};