@streamlayer/react-ui 0.47.0 → 0.48.0

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 {};

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

@@ -1,58 +1,71 @@
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import { useState as p, useCallback as s, useEffect as b } from "react";
-import { QuestionType as N } from "@streamlayer/sdk-web-types";
-import { V as S, c as D } from "../../../index-7f3361f2.js";
-import { Container as j, Title as M, Options as h, Loader as u, Feedback as Z, FeedbackIcon as L, FeedbackTitle as T, FeedbackDescription as z } from "./styles.js";
-import { WinBar as G } from "./win-bar/index.js";
-import "./vote-option/styles.js";
+import { jsx as s, jsxs as A } from "react/jsx-runtime";
+import { useState as e, useCallback as C, useMemo as l } from "react";
+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 { VotingOption as O } from "./vote-option/index.js";
+import { WinBar as I } from "./win-bar/index.js";
+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";
-import "../../icons/index.js";
-const A = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iMC4wMDE5NTMxMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iMTIiIGZpbGw9IiNGODAwMjIiLz4KPHJlY3QgeD0iOC4yNSIgeT0iNy4wMDE5NSIgd2lkdGg9IjEyLjM3NDQiIGhlaWdodD0iMS43Njc3NyIgcng9IjAuODgzODg0IiB0cmFuc2Zvcm09InJvdGF0ZSg0NSA4LjI1IDcuMDAxOTUpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSI3IiB5PSIxNS43NTIiIHdpZHRoPSIxMi4zNzQ0IiBoZWlnaHQ9IjEuNzY3NzciIHJ4PSIwLjg4Mzg4NCIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDcgMTUuNzUyKSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==", W = ({
-  title: m,
-  questionId: a,
-  options: r,
-  questionAnswered: l,
-  feedbackMessages: I,
-  questionAnsweredCorrectly: t,
-  questionType: d
-}) => {
-  const [g, n] = p(!1), e = s(
-    (o) => {
-      n(o);
+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(
+    async (t) => {
+      if (m) {
+        const c = t.currentTarget.value;
+        g(c), T(!0), await f(m, c), T(!1);
+      }
     },
-    [n]
-  );
-  return b(() => {
-    e(!1);
-  }, [r, e]), /* @__PURE__ */ c(j, { children: [
-    /* @__PURE__ */ i(G, { title: "To win", points: 100, isTimer: !0 }),
-    /* @__PURE__ */ i(M, { children: m }),
-    /* @__PURE__ */ c(h, { children: [
-      g && /* @__PURE__ */ i(u, { children: "Loading..." }),
-      r.map((o) => /* @__PURE__ */ i(
-        S,
-        {
-          toggleIsLoadingSubmitAnswer: e,
-          questionId: a,
-          questionType: d,
-          ...o
-        },
-        o.id
-      ))
-    ] }),
-    l && d === N.TRIVIA && /* @__PURE__ */ c(Z, { children: [
-      /* @__PURE__ */ i(L, { alt: "reaction-to-answer", src: t ? D : A }),
-      /* @__PURE__ */ c("div", { children: [
-        /* @__PURE__ */ i(T, { children: t ? I.correctFeedback.title : I.incorrectFeedback.title }),
-        /* @__PURE__ */ i(z, { children: t ? I.correctFeedback.description : I.incorrectFeedback.description })
-      ] })
-    ] })
-  ] });
+    [m, g, f]
+  ), i = l(
+    () => r == null ? void 0 : r.answers.find((t) => t.youVoted === !0),
+    [r]
+  ), o = 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(
+      b,
+      {
+        feedbackMessages: x,
+        questionVoted: !!i,
+        questionVotedCorrectly: i == null ? void 0 : i.correct,
+        questionType: q,
+        hasCorrectAnswer: o
+      }
+    ),
+    /* @__PURE__ */ s(
+      I,
+      {
+        title: n ? "Expired" : "To win",
+        points: n ? 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)) })
+  ] }) });
 };
 export {
-  W as Vote
+  X as Vote
 };

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

@@ -1,9 +1,5 @@
 /// <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 Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Options: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Loader: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Feedback: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const FeedbackIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const FeedbackTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const FeedbackDescription: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -1,65 +1,30 @@
 import { styled as t } from "@linaria/react";
-const e = t.div`
-  padding: 16px;
-  color: #fff;
+const o = t.div`
   width: 100%;
-  font-weight: 700;
-  font-size: 14px;
+  height: 100%;
 
   & > div:not(:last-child) {
     margin-bottom: 16px;
   }
-`, o = t.div`
-  font-size: 16px;
 `, n = t.div`
-  overflow-y: auto;
-  max-height: 220px;
-  position: relative;
-
-  & > div:not(:last-child) {
-    margin-bottom: 12px;
-  }
-`, d = t.div`
-  position: absolute;
-  left: 0px;
-  background-color: var(--color-transparent-vote-container);
   width: 100%;
-  height: 100%;
-  z-index: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`, a = t.div`
-  padding: 14px 12px 14px 16px;
+  padding: 0px 16px;
+`, r = 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`
+  position: relative;
+  gap: 8px;
   display: flex;
-  align-items: center;
-`, l = t.img`
-  width: 24px;
-  height: 24px;
-  margin-right: 12px;
-`, p = t.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 16;
-  font-weight: 700;
-  margin-bottom: 10px;
-`, s = t.div`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14;
-  font-weight: 500;
+  flex-direction: column;
 `;
 export {
-  e as Container,
-  a as Feedback,
-  s as FeedbackDescription,
-  l as FeedbackIcon,
-  p as FeedbackTitle,
-  d as Loader,
-  n as Options,
-  o as Title
+  o as Container,
+  n as Content,
+  e as Options,
+  r as Title
 };

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

@@ -1,20 +1,12 @@
 /// <reference types="react" />
-import { QuestionType } from '@streamlayer/sdk-web-types';
-interface VotingOptionProps {
-    icon: string;
-    title: string;
-    id: string;
-    questionId: string;
-    percentage: number;
-    disabled: boolean;
-    correct: boolean;
-    questionAnswered: boolean;
-    hasCorrectAnswer: boolean;
-    answered: boolean;
-    points: number;
+import { QuestionType, QuestionImages, ExtendedQuestionAnswer } from '@streamlayer/sdk-web-types';
+export type VotingOptionProps = ExtendedQuestionAnswer & {
+    questionVoted: boolean;
+    youSelected: boolean;
+    isLoading: boolean;
+    hasCorrectAnswer?: boolean;
     questionType: QuestionType;
-    onVote: (questionId: string, answerId: string) => void;
-    toggleIsLoadingSubmitAnswer: (flag: boolean) => void;
-}
+    imageMode?: QuestionImages;
+    onVote: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
 export declare const VotingOption: React.FC<VotingOptionProps>;
-export {};

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

@@ -1,8 +1,56 @@
-import "react/jsx-runtime";
-import "@streamlayer/sdk-web-types";
-import { V as n } from "../../../../index-7f3361f2.js";
-import "./styles.js";
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import { QuestionImages as c, QuestionType as o } from "@streamlayer/sdk-web-types";
+import { IconDefault as T, IconContainer as C, IconWrap as R, IconCircle as S, ButtonContainer as w, ButtonPct as D, ButtonBody as O, Title as P, Indicators as A, CheckIcon as x, Percentage as B } from "./styles.js";
 import "@linaria/react";
+import "../../../icons/index.js";
+import "react";
+const d = {
+  [c.CENTERED]: (t) => /* @__PURE__ */ n(T, { alt: "option-icon", src: t }),
+  [c.TRANSPARENT]: (t) => /* @__PURE__ */ n(C, { children: /* @__PURE__ */ n(R, { style: { backgroundImage: `url(${t})` } }) }),
+  [c.ROUNDED]: (t) => /* @__PURE__ */ n(S, { alt: "option-icon", src: t }),
+  [c.NONE]: () => null,
+  [c.UNSET]: () => null
+}, k = ({ questionType: t, hasCorrectAnswer: l, correct: e, youVoted: r, questionVoted: i }) => t === o.POLL ? r ? "correct" : "unset" : t === o.PREDICTION ? l ? r ? e ? "correct" : "incorrect" : e ? "correct" : "unset" : "correct" : t === o.TRIVIA && i ? r ? e ? "correct" : "incorrect" : e ? "correct" : "unset" : "unset", U = (t) => {
+  var p;
+  const {
+    // option props
+    id: l,
+    icon: e,
+    text: r,
+    percentageDecimal: i,
+    // extra props
+    onVote: g,
+    youSelected: h,
+    questionVoted: u,
+    imageMode: I,
+    isLoading: E,
+    questionType: m
+  } = t, a = k(t), N = m === o.TRIVIA || m === o.PREDICTION, f = a === "correct" ? "correct" : a === "incorrect" ? "incorrect" : "";
+  return /* @__PURE__ */ s(
+    w,
+    {
+      value: l,
+      "data-selected": h,
+      "data-answerState": a,
+      disabled: u || E,
+      onClick: g,
+      children: [
+        u && /* @__PURE__ */ n(D, { "data-answerState": a, style: { width: `${i}%` } }),
+        /* @__PURE__ */ s(O, { children: [
+          e && I && ((p = d[I]) == null ? void 0 : p.call(d, e)),
+          /* @__PURE__ */ n(P, { children: r }),
+          u && /* @__PURE__ */ s(A, { children: [
+            N && f && /* @__PURE__ */ n(x, { name: f }),
+            /* @__PURE__ */ s(B, { children: [
+              i,
+              "%"
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
 export {
-  n as VotingOption
+  U as VotingOption
 };

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

@@ -1,13 +1,17 @@
 /// <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 AnsweredContainer: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any> | undefined;
-}>;
+export declare const ButtonContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
 export declare const ButtonPct: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Button: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const ButtonBody: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const IconContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const IconWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Icon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const IconDefault: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const IconCircle: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
 export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const Indicators: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const CheckIconWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Percentage: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const CheckIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const Percentage: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const CheckIcon: any;

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

@@ -1,96 +1,149 @@
-import { styled as r } from "@linaria/react";
-const o = r.div`
+import { styled as o } from "@linaria/react";
+import { SvgIcon as t } from "../../../icons/index.js";
+import "react/jsx-runtime";
+import "react";
+const c = o.button`
+  background-color: var(--color-neutrals-gray2);
+  border: 1px solid transparent;
   box-sizing: border-box;
   border-radius: 4px;
-  background-color: var(--color-bg-transparent-item-vote);
-  border: 2px solid transparent;
   position: relative;
+  max-height: 44px;
+  min-height: 44px;
+  height: 44px;
+  width: 100%;
 
-  &[data-questionAnswered='false'] {
-    &:hover {
-      border-color: inherit;
-    }
+  &:hover:not(:disabled) {
+    border-color: var(--color-neutrals-gray5);
+  }
+
+  &[data-selected='true'] {
+    border-color: var(--color-neutrals-gray9);
+    background-color: var(--color-white);
   }
-`, t = r(o)`
-  border: 2px solid;
 
-  &[data-answeredCorrect='true'] {
-    background-color: var(--color-transparent-item-success);
-    border-color: var(--color-blue-primary);
+  &[data-answerState='correct'] {
+    position: relative;
+    border-color: var(--color-primary-green1);
 
-    &:hover {
-      border-color: var(--color-blue-primary);
+    &:before {
+      content: '';
+      top: 0;
+      left: 0;
+      opacity: 0.1;
+      display: block;
+      width: inherit;
+      height: inherit;
+      position: absolute;
+      background-color: var(--color-primary-green1);
     }
   }
 
-  &[data-answeredCorrect='false'] {
-    background-color: var(--color-transparent-item-error);
-    border-color: var(--color-red-primary);
+  &[data-answerState='incorrect'] {
+    position: relative;
+    border-color: var(--color-secondary-red1);
 
-    &:hover {
-      border-color: var(--color-red-primary);
+    &:before {
+      content: '';
+      top: 0;
+      left: 0;
+      opacity: 0.1;
+      display: block;
+      width: inherit;
+      height: inherit;
+      position: absolute;
+      background-color: var(--color-secondary-red1);
     }
   }
-`, i = r.div`
+
+  &[data-isNotChecked='true'] {
+    border-color: var(--color-neutrals-gray3);
+    background-color: var(--color-white);
+  }
+`, l = o.div`
+  transition: width 1s ease-in;
   position: absolute;
+  border-radius: 3px;
+  height: 100%;
+  z-index: 0;
   left: 0;
+
+  background-color: var(--color-neutrals-gray3);
+
+  &[data-answerState='correct'] {
+    background-color: var(--color-primary-green1);
+    opacity: 0.3;
+  }
+
+  &[data-answerState='incorrect'] {
+    background-color: var(--color-secondary-red1);
+    opacity: 0.3;
+  }
+
+  &[data-answerState='unset'] {
+    background-color: var(--color-neutrals-gray3);
+  }
+`, d = o.span`
+  font-weight: var(--font-weight-default);
+  color: var(--color-neutrals-gray9);
+  font-family: var(--font-regular);
+  background-color: transparent;
+  padding: 5px 15px 5px 9px;
+  align-items: center;
   border-radius: 2px;
-  z-index: 0;
-  height: 100%;
-  background-color: inherit;
-  transition: all 1s ease-in;
-`, n = r.button`
-  border-radius: 20px;
   position: relative;
-  background-color: transparent;
-  padding: 0px 16px;
+  font-size: 12px;
+  outline: none;
   display: flex;
-  align-items: center;
+  height: 100%;
   border: none;
-  outline: none;
   width: 100%;
-  color: var(--color-white);
-  font-weight: 700;
-  font-size: 14px;
-  height: 100%;
-  border-radius: 2px;
-  cursor: pointer;
-
-  &:disabled {
-    cursor: default;
-  }
-`, a = r.img`
-  width: 32px;
+`, s = o.div`
+  width: 60px;
+`, p = o.div`
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 52px;
+  height: 52px;
+`, r = o.img`
+  margin-right: 8px;
+`, g = o(r)`
   height: 32px;
+  width: 32px;
+`, h = o(r)`
   border-radius: 50%;
-  margin-right: 8px;
-`, d = r.span`
+  height: 32px;
+  width: 32px;
+`, u = o.span`
   overflow: hidden;
-  word-break: break-all;
-  padding: 12px 0px;
-  flex: 1;
   text-align: left;
-`, s = r.span`
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+`, b = o.span`
   display: flex;
-`, c = r.div`
-  width: 16px;
-  height: 16px;
+`, x = o.span`
+  margin-left: 8px;
+  line-height: 17px;
+`, v = o(t)`
   margin-left: 8px;
-`, l = r.div`
-  margin-left: 12px;
-`, p = r.img`
-  width: 16px;
   height: 16px;
+  width: 16px;
 `;
 export {
-  t as AnsweredContainer,
-  n as Button,
-  i as ButtonPct,
-  p as CheckIcon,
-  c as CheckIconWrap,
-  o as Container,
-  a as Icon,
-  s as Indicators,
-  l as Percentage,
-  d as Title
+  d as ButtonBody,
+  c as ButtonContainer,
+  l as ButtonPct,
+  v as CheckIcon,
+  r as Icon,
+  h as IconCircle,
+  s as IconContainer,
+  g as IconDefault,
+  p as IconWrap,
+  b as Indicators,
+  x as Percentage,
+  u as Title
 };

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

@@ -30,6 +30,8 @@ export declare const icons: {
     'icon-btn-leaderboard': any;
     'icon-check': any;
     'icon-arrow': any;
+    correct: any;
+    incorrect: any;
 };
 export declare const Icon: React.FC<{
     name: keyof typeof icons;