@streamlayer/react-ui 1.18.1 → 1.19.0

package/lib/ui/gamification/user-statistics/index.d.ts

@@ -1,5 +1,6 @@
 export interface UserStatisticsProps {
     loading?: boolean;
+    hideFriendsRank?: boolean;
     avatar?: string;
     name?: string;
     points?: number;

package/lib/ui/gamification/user-statistics/index.js

@@ -1,59 +1,67 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { Skeleton as e } from "../../skeleton/index.js";
-import { abbreviate as v, formatDecimals as L } from "../../../utils/common.js";
-import { Rank as C } from "./components/rank/index.js";
+import { abbreviate as w, formatDecimals as V } from "../../../utils/common.js";
+import { Rank as d } from "./components/rank/index.js";
 import { Statistic as c } from "./components/statistic/index.js";
-import { Container as w, TopInfo as V, User as g, UserAccountBtn as k, Avatar as I, AvatarPlaceholder as S, UserInfo as x, UserName as H, UserRating as R, Rts as U, TrophyIcon as b, RtsIndicator as u, RtsLabel as y, Divider as T, BottomInfo as M, Ranks as Z, Statistics as A } from "./styles.js";
-const B = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Trophy'%3e%3cpath%20id='Combined%20Shape'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3.69197%204.66662C3.69197%205.99705%203.92914%207.17787%204.4035%208.20912C3.49966%208.02451%202.74487%207.66486%202.1391%207.13014C1.53333%206.59542%201.23046%206.0798%201.23046%205.58328V4.66662H3.69197ZM14.7686%204.66662V5.58328C14.7686%206.0798%2014.4658%206.59542%2013.86%207.13014C13.2542%207.66486%2012.4994%208.02451%2011.5956%208.20912C12.0699%207.17787%2012.3071%205.99705%2012.3071%204.66662H14.7686ZM15.9998%205.58329V4.36108C15.9998%204.10645%2015.9101%203.89002%2015.7306%203.71178C15.5511%203.53354%2015.3332%203.44442%2015.0768%203.44442H12.3076V2.52776C12.3076%202.10763%2012.1569%201.74797%2011.8556%201.44878C11.5544%201.14959%2011.1922%201%2010.7691%201H5.23072C4.80764%201%204.44547%201.14959%204.14419%201.44878C3.84291%201.74797%203.69227%202.10763%203.69227%202.52776V3.44442H0.923068C0.666659%203.44442%200.448714%203.53354%200.269228%203.71178C0.0897418%203.89002%200%204.10645%200%204.36108V5.58329C0%206.03525%200.13301%206.49039%200.399034%206.94872C0.665059%207.40705%201.02403%207.82082%201.47595%208.19003C1.92787%208.55924%202.48234%208.86957%203.13939%209.12101C3.79644%209.37246%204.48713%209.51409%205.21149%209.54592C5.48071%209.88967%205.7852%2010.192%206.12494%2010.453C6.36853%2010.6695%206.53679%2010.9002%206.62974%2011.1453C6.72269%2011.3904%206.76916%2011.6752%206.76916%2011.9999C6.76916%2012.3436%206.67141%2012.6333%206.4759%2012.8688C6.28038%2013.1043%205.96789%2013.2221%205.53841%2013.2221C5.05764%2013.2221%204.62976%2013.3669%204.25476%2013.6566C3.87977%2013.9462%203.69227%2014.3106%203.69227%2014.7499V15.361C3.69227%2015.4501%203.72112%2015.5233%203.77881%2015.5806C3.8365%2015.6379%203.91022%2015.6665%203.99996%2015.6665H11.9999C12.0896%2015.6665%2012.1633%2015.6379%2012.221%2015.5806C12.2787%2015.5233%2012.3076%2015.4501%2012.3076%2015.361V14.7499C12.3076%2014.3106%2012.1201%2013.9462%2011.7451%2013.6566C11.3701%2013.3669%2010.9422%2013.2221%2010.4614%2013.2221C10.0319%2013.2221%209.71945%2013.1043%209.52394%2012.8688C9.32843%2012.6333%209.23068%2012.3436%209.23068%2011.9999C9.23068%2011.6752%209.27715%2011.3904%209.3701%2011.1453C9.46305%2010.9002%209.63131%2010.6695%209.8749%2010.453C10.2146%2010.192%2010.5191%209.88967%2010.7884%209.54592C11.5127%209.51409%2012.2034%209.37246%2012.8604%209.12101C13.5175%208.86957%2014.072%208.55924%2014.5239%208.19003C14.9758%207.82082%2015.3348%207.40705%2015.6008%206.94872C15.8668%206.49039%2015.9998%206.03525%2015.9998%205.58329ZM6.76047%207.1798L8.05109%206.49997L9.3417%207.1798L9.09521%205.73989L10.1393%204.72015L8.69639%204.51007L8.05109%203.2L7.40578%204.51007L5.96283%204.72015L7.00696%205.73989L6.76047%207.1798Z'%20fill='%23F2C94C'/%3e%3c/g%3e%3c/svg%3e", O = ({
+import { Container as I, TopInfo as S, User as b, UserAccountBtn as x, Avatar as H, AvatarPlaceholder as R, UserInfo as U, UserName as k, UserRating as u, RtsContainer as y, Rts as T, TrophyIcon as M, RtsIndicator as a, RtsLabel as h, RtsDivider as Z, Divider as A, BottomInfo as B, Ranks as D, Statistics as P } from "./styles.js";
+const j = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Trophy'%3e%3cpath%20id='Combined%20Shape'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3.69197%204.66662C3.69197%205.99705%203.92914%207.17787%204.4035%208.20912C3.49966%208.02451%202.74487%207.66486%202.1391%207.13014C1.53333%206.59542%201.23046%206.0798%201.23046%205.58328V4.66662H3.69197ZM14.7686%204.66662V5.58328C14.7686%206.0798%2014.4658%206.59542%2013.86%207.13014C13.2542%207.66486%2012.4994%208.02451%2011.5956%208.20912C12.0699%207.17787%2012.3071%205.99705%2012.3071%204.66662H14.7686ZM15.9998%205.58329V4.36108C15.9998%204.10645%2015.9101%203.89002%2015.7306%203.71178C15.5511%203.53354%2015.3332%203.44442%2015.0768%203.44442H12.3076V2.52776C12.3076%202.10763%2012.1569%201.74797%2011.8556%201.44878C11.5544%201.14959%2011.1922%201%2010.7691%201H5.23072C4.80764%201%204.44547%201.14959%204.14419%201.44878C3.84291%201.74797%203.69227%202.10763%203.69227%202.52776V3.44442H0.923068C0.666659%203.44442%200.448714%203.53354%200.269228%203.71178C0.0897418%203.89002%200%204.10645%200%204.36108V5.58329C0%206.03525%200.13301%206.49039%200.399034%206.94872C0.665059%207.40705%201.02403%207.82082%201.47595%208.19003C1.92787%208.55924%202.48234%208.86957%203.13939%209.12101C3.79644%209.37246%204.48713%209.51409%205.21149%209.54592C5.48071%209.88967%205.7852%2010.192%206.12494%2010.453C6.36853%2010.6695%206.53679%2010.9002%206.62974%2011.1453C6.72269%2011.3904%206.76916%2011.6752%206.76916%2011.9999C6.76916%2012.3436%206.67141%2012.6333%206.4759%2012.8688C6.28038%2013.1043%205.96789%2013.2221%205.53841%2013.2221C5.05764%2013.2221%204.62976%2013.3669%204.25476%2013.6566C3.87977%2013.9462%203.69227%2014.3106%203.69227%2014.7499V15.361C3.69227%2015.4501%203.72112%2015.5233%203.77881%2015.5806C3.8365%2015.6379%203.91022%2015.6665%203.99996%2015.6665H11.9999C12.0896%2015.6665%2012.1633%2015.6379%2012.221%2015.5806C12.2787%2015.5233%2012.3076%2015.4501%2012.3076%2015.361V14.7499C12.3076%2014.3106%2012.1201%2013.9462%2011.7451%2013.6566C11.3701%2013.3669%2010.9422%2013.2221%2010.4614%2013.2221C10.0319%2013.2221%209.71945%2013.1043%209.52394%2012.8688C9.32843%2012.6333%209.23068%2012.3436%209.23068%2011.9999C9.23068%2011.6752%209.27715%2011.3904%209.3701%2011.1453C9.46305%2010.9002%209.63131%2010.6695%209.8749%2010.453C10.2146%2010.192%2010.5191%209.88967%2010.7884%209.54592C11.5127%209.51409%2012.2034%209.37246%2012.8604%209.12101C13.5175%208.86957%2014.072%208.55924%2014.5239%208.19003C14.9758%207.82082%2015.3348%207.40705%2015.6008%206.94872C15.8668%206.49039%2015.9998%206.03525%2015.9998%205.58329ZM6.76047%207.1798L8.05109%206.49997L9.3417%207.1798L9.09521%205.73989L10.1393%204.72015L8.69639%204.51007L8.05109%203.2L7.40578%204.51007L5.96283%204.72015L7.00696%205.73989L6.76047%207.1798Z'%20fill='%23F2C94C'/%3e%3c/g%3e%3c/svg%3e", z = ({
   loading: t,
-  avatar: n,
+  hideFriendsRank: n,
+  avatar: l,
   name: o,
-  points: l,
-  friendsRank: d,
-  rank: a,
-  streak: s,
-  correct: h,
-  incorrect: m,
-  inTop: p,
-  successRate: f
-}) => /* @__PURE__ */ i(w, { "data-loading": t, children: [
-  /* @__PURE__ */ r(V, { children: /* @__PURE__ */ r(e, { loading: t, children: /* @__PURE__ */ i(g, { children: [
-    /* @__PURE__ */ i(k, { children: [
-      n && /* @__PURE__ */ r(I, { alt: "avatar", src: n }),
-      !n && /* @__PURE__ */ r(S, { children: v(o || "") })
-    ] }),
+  points: s,
+  friendsRank: m,
+  rank: C,
+  streak: p,
+  correct: f,
+  incorrect: v,
+  inTop: L,
+  successRate: g
+}) => /* @__PURE__ */ i(I, { "data-loading": t, children: [
+  /* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(e, { loading: t, children: /* @__PURE__ */ i(b, { children: [
     /* @__PURE__ */ i(x, { children: [
-      /* @__PURE__ */ r(H, { children: o }),
-      /* @__PURE__ */ i(R, { children: [
-        /* @__PURE__ */ i(U, { children: [
-          /* @__PURE__ */ r(b, { alt: "rank-icon", src: B }),
-          /* @__PURE__ */ i(u, { children: [
-            L(l),
-            /* @__PURE__ */ r(y, { children: "PTS" })
+      l && /* @__PURE__ */ r(H, { alt: "avatar", src: l }),
+      !l && /* @__PURE__ */ r(R, { children: w(o || "") })
+    ] }),
+    /* @__PURE__ */ i(U, { children: [
+      /* @__PURE__ */ r(k, { children: o }),
+      /* @__PURE__ */ i(u, { children: [
+        /* @__PURE__ */ i(y, { children: [
+          /* @__PURE__ */ i(T, { children: [
+            /* @__PURE__ */ r(M, { alt: "rank-icon", src: j }),
+            /* @__PURE__ */ i(a, { children: [
+              V(s),
+              /* @__PURE__ */ r(h, { children: "PTS" })
+            ] })
+          ] }),
+          n && /* @__PURE__ */ i(a, { children: [
+            /* @__PURE__ */ r(Z, {}),
+            C || 0,
+            /* @__PURE__ */ r(h, { children: "global rank" })
           ] })
         ] }),
-        /* @__PURE__ */ r(T, {}),
-        /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ r(A, {}),
+        !n && /* @__PURE__ */ i("div", { children: [
           "TOP ",
-          p || 0,
+          L || 0,
           "%"
         ] })
       ] })
     ] })
   ] }) }) }),
-  /* @__PURE__ */ i(M, { children: [
-    /* @__PURE__ */ i(Z, { children: [
-      /* @__PURE__ */ r(e, { loading: t, style: { width: "100%" }, children: /* @__PURE__ */ r(C, { indicator: d || 0, title: "Friends rank" }) }),
-      /* @__PURE__ */ r(e, { loading: t, style: { width: "100%" }, children: /* @__PURE__ */ r(C, { indicator: a || 0, title: "Global rank" }) })
+  /* @__PURE__ */ i(B, { children: [
+    !n && /* @__PURE__ */ i(D, { children: [
+      /* @__PURE__ */ r(e, { loading: t, style: { width: "100%" }, children: /* @__PURE__ */ r(d, { indicator: m || 0, title: "Friends rank" }) }),
+      /* @__PURE__ */ r(e, { loading: t, style: { width: "100%" }, children: /* @__PURE__ */ r(d, { indicator: C || 0, title: "Global rank" }) })
     ] }),
-    /* @__PURE__ */ r(e, { loading: t, children: /* @__PURE__ */ i(A, { children: [
-      /* @__PURE__ */ r(c, { indicator: s || 0, title: "Win streak" }),
-      /* @__PURE__ */ r(c, { indicator: h || 0, title: "Correct" }),
-      /* @__PURE__ */ r(c, { indicator: m || 0, title: "Incorrect" }),
-      /* @__PURE__ */ r(c, { indicator: `${f || 0}%`, title: "Succ. rate" })
+    /* @__PURE__ */ r(e, { loading: t, children: /* @__PURE__ */ i(P, { children: [
+      /* @__PURE__ */ r(c, { indicator: p || 0, title: "Win streak" }),
+      /* @__PURE__ */ r(c, { indicator: f || 0, title: "Correct" }),
+      /* @__PURE__ */ r(c, { indicator: v || 0, title: "Incorrect" }),
+      /* @__PURE__ */ r(c, { indicator: `${g || 0}%`, title: "Succ. rate" })
     ] }) })
   ] })
 ] });
 export {
-  O as UserStatistics
+  z as UserStatistics
 };

package/lib/ui/gamification/user-statistics/styles.d.ts

@@ -7,6 +7,8 @@ export declare const UserInfo: import('@linaria/react').StyledComponent<import('
 export declare const UserName: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const UserRating: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const TrophyIcon: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const RtsContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const RtsDivider: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Rts: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const RtsIndicator: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const RtsLabel: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/user-statistics/styles.js

@@ -3,11 +3,11 @@ const o = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1yrpn9o",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "TopInfo",
   class: "t17fwahh",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
+}), e = /* @__PURE__ */ s("div")({
   name: "BottomInfo",
   class: "by6w7e9",
   propsAsIs: !1
@@ -36,53 +36,63 @@ const o = /* @__PURE__ */ s("div")({
   class: "t1el3mrn",
   propsAsIs: !1
 }), m = /* @__PURE__ */ s("div")({
-  name: "Rts",
+  name: "RtsContainer",
   class: "r2vgnxv",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("div")({
-  name: "RtsIndicator",
+}), d = /* @__PURE__ */ s("div")({
+  name: "RtsDivider",
   class: "roqn06j",
   propsAsIs: !1
 }), f = /* @__PURE__ */ s("div")({
-  name: "RtsLabel",
+  name: "Rts",
   class: "r15adx7c",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
-  name: "Divider",
-  class: "dv59lta",
+}), I = /* @__PURE__ */ s("div")({
+  name: "RtsIndicator",
+  class: "rv59lta",
   propsAsIs: !1
 }), v = /* @__PURE__ */ s("div")({
-  name: "Ranks",
+  name: "RtsLabel",
   class: "r55lotb",
   propsAsIs: !1
 }), A = /* @__PURE__ */ s("div")({
-  name: "Statistics",
-  class: "s1knfgqt",
+  name: "Divider",
+  class: "d1knfgqt",
   propsAsIs: !1
 }), R = /* @__PURE__ */ s("div")({
+  name: "Ranks",
+  class: "r1mqo824",
+  propsAsIs: !1
+}), U = /* @__PURE__ */ s("div")({
+  name: "Statistics",
+  class: "sxareh6",
+  propsAsIs: !1
+}), u = /* @__PURE__ */ s("div")({
   name: "AvatarPlaceholder",
-  class: "a1mqo824",
+  class: "amcu48h",
   propsAsIs: !1
-}), U = /* @__PURE__ */ s("button")({
+}), h = /* @__PURE__ */ s("button")({
   name: "UserAccountBtn",
-  class: "uxareh6",
+  class: "u32nfkp",
   propsAsIs: !1
 });
 export {
   r as Avatar,
-  R as AvatarPlaceholder,
-  n as BottomInfo,
+  u as AvatarPlaceholder,
+  e as BottomInfo,
   o as Container,
-  d as Divider,
-  v as Ranks,
-  m as Rts,
+  A as Divider,
+  R as Ranks,
+  f as Rts,
+  m as RtsContainer,
+  d as RtsDivider,
   I as RtsIndicator,
-  f as RtsLabel,
-  A as Statistics,
-  e as TopInfo,
+  v as RtsLabel,
+  U as Statistics,
+  n as TopInfo,
   i as TrophyIcon,
   t as User,
-  U as UserAccountBtn,
+  h as UserAccountBtn,
   c as UserInfo,
   l as UserName,
   p as UserRating

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

@@ -16,6 +16,7 @@ interface FeedbackProps {
     voteErrorMessage: string;
     marketClosed: boolean;
     percentsAnimated: boolean;
+    votedAnswer?: ExtendedQuestionAnswer;
     isEarlyPrediction?: boolean;
     correctAnswer?: ExtendedQuestionAnswer;
 }

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

@@ -1,71 +1,84 @@
-import { jsx as n, jsxs as i } from "react/jsx-runtime";
+import { jsx as i, jsxs as c, Fragment as j } from "react/jsx-runtime";
 import { QuestionType as l } from "@streamlayer/sdk-web-types";
 import { SvgIcon as m } from "../../../icons/index.js";
-import { ShowInContainer as y, Container as H, FeedbackContainer as t, IconPrediction as W, FeedbackDescription as h, FeedbackIconWrap as p, FeedbackHeader as k, FeedbackText as f, EarlyFeedbackDescription as $, DynamicWrap as z, FeedbackTitle as B } from "./styles.js";
-const Z = ({
-  feedbackMessages: o,
-  questionVotedCorrectly: D,
-  questionVoted: F,
+import { ShowInContainer as H, Container as z, FeedbackContainer as h, IconPrediction as L, FeedbackDescription as F, FeedbackIconWrap as k, FeedbackHeader as x, FeedbackText as T, EarlyFeedbackDescription as G, FeedbackDynamicDescription as J, DynamicWrap as K, FeedbackTitle as U, FeedbackTitleWrap as X, FeedbackResultDescription as Z, FeedbackResultDescriptionWrap as _ } from "./styles.js";
+const s = ({
+  feedbackMessages: t,
+  questionVotedCorrectly: R,
+  questionVoted: u,
   questionType: d,
   hasCorrectAnswer: r,
-  showExpiredNotification: T,
+  showExpiredNotification: f,
   showClosedNotificationTrivia: O,
   votedInCurrentRender: b,
-  votedAfterQuestionClosed: j,
-  voteErrorMessage: c,
-  enteredAnActiveQuestion: P,
-  marketClosed: L,
-  percentsAnimated: Y,
-  isEarlyPrediction: e,
-  correctAnswer: u
+  votedAfterQuestionClosed: $,
+  voteErrorMessage: e,
+  enteredAnActiveQuestion: W,
+  marketClosed: y,
+  percentsAnimated: B,
+  votedAnswer: I,
+  isEarlyPrediction: n,
+  correctAnswer: o
 }) => {
-  const C = F && (d === l.TRIVIA || d === l.PREDICTION), N = d === l.PREDICTION && !r, I = L && d === l.PREDICTION && !F && !P || d === l.PREDICTION && j && b && P, R = C && N, w = C && r, Q = d === l.PREDICTION && F && b && r, S = F && d === l.POLL && b, x = D ? "correct" : "incorrect", a = D ? o == null ? void 0 : o.correctFeedback : o == null ? void 0 : o.incorrectFeedback;
-  return T || O || R || w || I || S || Q || c ? /* @__PURE__ */ n(y, { enabled: b, animate: Y, children: /* @__PURE__ */ i(H, { "data-prediction": N, id: "feedbackContainer", children: [
-    c && !I && /* @__PURE__ */ i(t, { children: [
-      !e && /* @__PURE__ */ n(W, { name: "questionExpired" }),
-      /* @__PURE__ */ n(h, { children: c })
+  const C = u && (d === l.TRIVIA || d === l.PREDICTION), N = d === l.PREDICTION && !r, D = y && d === l.PREDICTION && !u && !W || d === l.PREDICTION && $ && b && W, S = C && N, P = C && r, Q = d === l.PREDICTION && u && b && r, Y = u && d === l.POLL && b, p = R ? "correct" : "incorrect", a = R ? t == null ? void 0 : t.correctFeedback : t == null ? void 0 : t.incorrectFeedback;
+  return f || O || S || P || D || Y || Q || e ? /* @__PURE__ */ i(H, { enabled: b, animate: B, children: /* @__PURE__ */ c(z, { "data-prediction": N, children: [
+    e && !D && /* @__PURE__ */ c(h, { children: [
+      !n && /* @__PURE__ */ i(L, { name: "questionExpired" }),
+      /* @__PURE__ */ i(F, { children: e })
     ] }),
-    !c && T && /* @__PURE__ */ i(t, { children: [
-      !e && /* @__PURE__ */ n(p, { children: /* @__PURE__ */ n(m, { name: "questionExpired" }) }),
-      /* @__PURE__ */ i("div", { children: [
-        /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(h, { children: "Question Expired" }) }),
-        /* @__PURE__ */ n(f, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
+    !e && f && /* @__PURE__ */ c(h, { children: [
+      !n && /* @__PURE__ */ i(k, { children: /* @__PURE__ */ i(m, { name: "questionExpired" }) }),
+      /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(F, { children: "Question Expired" }) }),
+        /* @__PURE__ */ i(T, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
       ] })
     ] }),
-    !c && O && /* @__PURE__ */ i(t, { children: [
-      /* @__PURE__ */ n(p, { children: /* @__PURE__ */ n(m, { name: "questionExpired" }) }),
-      /* @__PURE__ */ i("div", { children: [
-        /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(h, { children: "Question Closed" }) }),
-        /* @__PURE__ */ n(f, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
+    !e && O && /* @__PURE__ */ c(h, { children: [
+      /* @__PURE__ */ i(k, { children: /* @__PURE__ */ i(m, { name: "questionExpired" }) }),
+      /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(F, { children: "Question Closed" }) }),
+        /* @__PURE__ */ i(T, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
       ] })
     ] }),
-    I && /* @__PURE__ */ i(t, { children: [
-      !e && /* @__PURE__ */ n(p, { children: /* @__PURE__ */ n(m, { name: "questionExpired" }) }),
-      /* @__PURE__ */ i("div", { children: [
-        /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(h, { children: e ? r ? "The results are already in!" : "Question is Closed" : "Question Closed" }) }),
-        /* @__PURE__ */ n(f, { id: "feedbackText", children: e ? /* @__PURE__ */ n($, { children: r ? `Correct: ${u == null ? void 0 : u.text}` : "Event affecting the outcome has occurred." }) : "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
+    D && /* @__PURE__ */ c(h, { children: [
+      !n && /* @__PURE__ */ i(k, { children: /* @__PURE__ */ i(m, { name: "questionExpired" }) }),
+      /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(F, { children: n ? r ? "The results are already in!" : "Question is Closed" : "Question Closed" }) }),
+        /* @__PURE__ */ i(T, { children: n ? /* @__PURE__ */ i(G, { children: r ? `Correct: ${o == null ? void 0 : o.text}` : "Event affecting the outcome has occurred." }) : "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
       ] })
     ] }),
-    !c && R && /* @__PURE__ */ i(t, { children: [
-      !e && /* @__PURE__ */ n(W, { name: "icon-prediction" }),
-      /* @__PURE__ */ i(h, { children: [
+    !e && S && /* @__PURE__ */ c(h, { children: [
+      !n && /* @__PURE__ */ i(L, { name: "icon-prediction" }),
+      /* @__PURE__ */ c(J, { children: [
         "Your pick has been recorded. ",
-        /* @__PURE__ */ n(z, { children: "We’ll notify you of the result." })
+        /* @__PURE__ */ i(K, { children: "We’ll notify you of the result." })
       ] })
     ] }),
-    !c && S && /* @__PURE__ */ i(t, { children: [
-      !e && /* @__PURE__ */ n(p, { "data-feedback-type": "correct", children: /* @__PURE__ */ n(m, { name: "correct" }) }),
-      /* @__PURE__ */ n(h, { children: "Thanks for answering. Please stay tuned for the next question." })
+    !e && Y && /* @__PURE__ */ c(h, { children: [
+      !n && /* @__PURE__ */ i(k, { "data-feedback-type": "correct", children: /* @__PURE__ */ i(m, { name: "correct" }) }),
+      /* @__PURE__ */ i(F, { children: "Thanks for answering. Please stay tuned for the next question." })
     ] }),
-    !c && (w || Q) && /* @__PURE__ */ i(t, { children: [
-      !e && /* @__PURE__ */ n(p, { "data-feedback-type": x, children: /* @__PURE__ */ n(m, { name: x }) }),
-      /* @__PURE__ */ n("div", { children: /* @__PURE__ */ i(k, { children: [
-        /* @__PURE__ */ n(B, { "data-feedback-type": x, children: a == null ? void 0 : a.title }),
-        /* @__PURE__ */ n(h, { children: a == null ? void 0 : a.description })
+    !e && (P || Q) && /* @__PURE__ */ c(h, { children: [
+      !n && /* @__PURE__ */ i(k, { "data-feedback-type": p, children: /* @__PURE__ */ i(m, { name: p }) }),
+      /* @__PURE__ */ i("div", { children: /* @__PURE__ */ c(x, { children: [
+        n ? /* @__PURE__ */ i(X, { children: p === "incorrect" ? /* @__PURE__ */ c(j, { children: [
+          /* @__PURE__ */ i("div", { children: "So close!" }),
+          /* @__PURE__ */ i("div", { children: "Better luck next time" })
+        ] }) : /* @__PURE__ */ c(j, { children: [
+          /* @__PURE__ */ i("div", { children: "That’s correct!" }),
+          /* @__PURE__ */ i("div", { children: "You chose wisely." })
+        ] }) }) : /* @__PURE__ */ i(U, { "data-feedback-type": p, children: a == null ? void 0 : a.title }),
+        n ? /* @__PURE__ */ c(_, { children: [
+          /* @__PURE__ */ c("div", { children: [
+            "Your pick: ",
+            I == null ? void 0 : I.text
+          ] }),
+          /* @__PURE__ */ i("div", { children: p === "incorrect" ? `Correct: ${o == null ? void 0 : o.text}` : "" })
+        ] }) : /* @__PURE__ */ i(Z, { children: a == null ? void 0 : a.description })
       ] }) })
     ] })
   ] }) }) : null;
 };
 export {
-  Z as Feedback
+  s as Feedback
 };

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

@@ -6,6 +6,18 @@ export declare const FeedbackIconWrap: import('@linaria/react').StyledComponent<
 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 FeedbackTitleWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FeedbackResultDescriptionWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FeedbackDynamicDescription: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const FeedbackResultDescription: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
 export declare const FeedbackText: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const DynamicWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const EarlyFeedbackDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -1,61 +1,81 @@
 import { styled as s } from "@linaria/react";
-import { SvgIcon as e } from "../../../icons/index.js";
-import { GrowingShowIn as a } from "../../../show-in/index.js";
-const n = () => a, t = /* @__PURE__ */ s(n())({
+import { SvgIcon as a } from "../../../icons/index.js";
+import { GrowingShowIn as c } from "../../../show-in/index.js";
+const n = () => c, d = /* @__PURE__ */ s(n())({
   name: "ShowInContainer",
   class: "s16sbdnm",
   propsAsIs: !0
-}), i = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "FeedbackContainer",
   class: "fbhorgl",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), k = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1g20ja7",
   propsAsIs: !1
-}), o = () => e, l = /* @__PURE__ */ s(o())({
+}), o = () => a, m = /* @__PURE__ */ s(o())({
   name: "IconPrediction",
   class: "i455ozj",
   propsAsIs: !0
-}), m = /* @__PURE__ */ s("div")({
+}), b = /* @__PURE__ */ s("div")({
   name: "FeedbackIconWrap",
   class: "f1913njx",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
+}), I = /* @__PURE__ */ s("div")({
   name: "FeedbackHeader",
   class: "fzfk69z",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("span")({
+}), F = /* @__PURE__ */ s("span")({
   name: "FeedbackTitle",
   class: "fx87qaj",
   propsAsIs: !1
-}), b = /* @__PURE__ */ s("span")({
+}), e = /* @__PURE__ */ s("span")({
   name: "FeedbackDescription",
   class: "fvek9ew",
   propsAsIs: !1
-}), k = /* @__PURE__ */ s("div")({
-  name: "FeedbackText",
+}), A = /* @__PURE__ */ s("div")({
+  name: "FeedbackTitleWrap",
   class: "f1kbtp09",
   propsAsIs: !1
-}), F = /* @__PURE__ */ s("span")({
+}), D = /* @__PURE__ */ s("div")({
+  name: "FeedbackResultDescriptionWrap",
+  class: "f4i8rro",
+  propsAsIs: !1
+}), p = () => e, v = /* @__PURE__ */ s(p())({
+  name: "FeedbackDynamicDescription",
+  class: "fqyssr",
+  propsAsIs: !0
+}), r = () => e, x = /* @__PURE__ */ s(r())({
+  name: "FeedbackResultDescription",
+  class: "fyv794i",
+  propsAsIs: !0
+}), u = /* @__PURE__ */ s("div")({
+  name: "FeedbackText",
+  class: "f1jkj9vx",
+  propsAsIs: !1
+}), y = /* @__PURE__ */ s("span")({
   name: "DynamicWrap",
-  class: "d4i8rro",
+  class: "d1pxh3a6",
   propsAsIs: !1
-}), A = /* @__PURE__ */ s("div")({
+}), W = /* @__PURE__ */ s("div")({
   name: "EarlyFeedbackDescription",
-  class: "eqyssr",
+  class: "e1afvufn",
   propsAsIs: !1
 });
 export {
-  d as Container,
-  F as DynamicWrap,
-  A as EarlyFeedbackDescription,
-  i as FeedbackContainer,
-  b as FeedbackDescription,
-  f as FeedbackHeader,
-  m as FeedbackIconWrap,
-  k as FeedbackText,
-  I as FeedbackTitle,
-  l as IconPrediction,
-  t as ShowInContainer
+  k as Container,
+  y as DynamicWrap,
+  W as EarlyFeedbackDescription,
+  f as FeedbackContainer,
+  e as FeedbackDescription,
+  v as FeedbackDynamicDescription,
+  I as FeedbackHeader,
+  b as FeedbackIconWrap,
+  x as FeedbackResultDescription,
+  D as FeedbackResultDescriptionWrap,
+  u as FeedbackText,
+  F as FeedbackTitle,
+  A as FeedbackTitleWrap,
+  m as IconPrediction,
+  d as ShowInContainer
 };