@streamlayer/react-ui 0.47.0 → 0.49.0

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

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/insight-details/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { VideoPlayerProps } from '../../../video-player';
+export type InsightDetailsProps = {
+    poster?: string;
+    video?: VideoPlayerProps;
+    title: string;
+    description: string;
+    webLink?: string;
+};
+export declare const InsightDetails: React.FC<InsightDetailsProps>;

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

@@ -0,0 +1,21 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { SvgIcon as m } from "../../../icons/index.js";
+import { VideoPlayer as l } from "../../../video-player/index.js";
+import { Container as p, Content as s, Title as c, Description as a, WebLinkBtn as h } from "./styles.js";
+import "@linaria/react";
+import "react";
+import "../../../video-player/styles.js";
+const y = ({ video: t, title: i, description: n, webLink: o }) => /* @__PURE__ */ e(p, { children: [
+  t && /* @__PURE__ */ r(l, { ...t }),
+  /* @__PURE__ */ e(s, { children: [
+    /* @__PURE__ */ r(c, { children: i }),
+    /* @__PURE__ */ r(a, { children: n }),
+    o && /* @__PURE__ */ e(h, { href: "webLink", target: "_blank", children: [
+      "Explore more of the Masters History",
+      /* @__PURE__ */ r(m, { name: "icon-external-link" })
+    ] })
+  ] })
+] });
+export {
+  y as InsightDetails
+};

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

@@ -0,0 +1,6 @@
+/// <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<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
+export declare const Description: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const WebLinkBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;

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

@@ -0,0 +1,43 @@
+import { styled as o } from "@linaria/react";
+const t = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  padding: var(--container-padding);
+  background-color: var(--color-neutrals-white);
+`, r = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+`, n = o.h3`
+  color: var(--color-primary-green1);
+  font-size: 16px;
+  line-height: 26px;
+  font-family: var(--font-serif);
+  font-weight: var(--font-weight-default);
+`, i = o.div`
+  color: var(--color-neutrals-gray9);
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: var(--font-weight-default);
+`, a = o.a`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 10px;
+  padding: 11px 16px;
+  color: var(--color-primary-green1);
+  font-size: 14px;
+  font-weight: var(--font-weight-default);
+  line-height: 20px;
+  border-radius: 40px;
+  border: 1px solid var(--color-primary-green1);
+  text-decoration: none;
+`;
+export {
+  t as Container,
+  r as Content,
+  i as Description,
+  n as Title,
+  a as WebLinkBtn
+};

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;