@streamlayer/react-ui 0.96.3 → 0.97.1

package/lib/ui/gamification/question/notification/tweet/index.js

@@ -2,6 +2,7 @@ import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import { TwitterContent as e } from "../../../../questions/twitter/index.js";
 import { Container as m, QuoteWrap as n, Quote as p, ActionBtn as l } from "./styles.js";
 import "../../../../video-player/index.js";
+import "@linaria/core";
 import "react";
 import "../../../../icons/index.js";
 import "@linaria/react";
@@ -10,11 +11,11 @@ import "../../../../questions/twitter/account/index.js";
 import "../../../../../utils/common.js";
 import "../../../../questions/twitter/account/styles.js";
 import "../../../../questions/twitter/styles.js";
-const a = ({ action: r, ...i }) => /* @__PURE__ */ o(m, { children: [
+const g = ({ action: r, ...i }) => /* @__PURE__ */ o(m, { children: [
   i.title && /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(p, { children: i.title }) }),
   /* @__PURE__ */ t(e, { ...i }),
   r && /* @__PURE__ */ t(l, { onClick: r, children: "View Insight" })
 ] });
 export {
-  a as Tweet
+  g as Tweet
 };

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

@@ -13,3 +13,5 @@ export declare const QuestionStatusIcon: import("@linaria/react").StyledComponen
 export declare const QuestionTypeTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const ExpiredQuestion: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const PlayButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const SkeletonContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SkeletonButton: any;

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

@@ -1,77 +1,88 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as o } from "../../icons/index.js";
+import { Container as n } from "../../skeleton/styles.js";
 import "react/jsx-runtime";
 import "react";
-const c = /* @__PURE__ */ s("div")({
+const r = /* @__PURE__ */ s("div")({
   name: "QuestionItem",
   class: "q1w97g3p",
   propsAsIs: !1
-}), u = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ s("div")({
   name: "QuestionCaption",
   class: "q2sl39u",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
+}), Q = /* @__PURE__ */ s("div")({
   name: "QuestionBody",
   class: "qd5h0uc",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), I = /* @__PURE__ */ s("div")({
   name: "QuestionAction",
   class: "q105uluy",
   propsAsIs: !1
-}), t = () => o, Q = /* @__PURE__ */ s(t())({
+}), t = () => o, A = /* @__PURE__ */ s(t())({
   name: "QuestionActionIcon",
   class: "q1fa0b9h",
   propsAsIs: !0
-}), n = () => o, m = /* @__PURE__ */ s(n())({
+}), e = () => o, f = /* @__PURE__ */ s(e())({
   name: "QuestionTypeIcon",
   class: "qxlt78s",
   propsAsIs: !0
-}), I = /* @__PURE__ */ s("div")({
+}), d = /* @__PURE__ */ s("div")({
   name: "QuestionTypeLabel",
   class: "qmg0vkx",
   propsAsIs: !1
-}), A = /* @__PURE__ */ s("div")({
+}), y = /* @__PURE__ */ s("div")({
   name: "QuestionContent",
   class: "q1uz5j1g",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), q = /* @__PURE__ */ s("div")({
   name: "QuestionSubject",
   class: "qc3icwa",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("button")({
+}), v = /* @__PURE__ */ s("button")({
   name: "QuestionActionTitle",
   class: "qmx43d1",
   propsAsIs: !1
-}), y = /* @__PURE__ */ s("img")({
+}), T = /* @__PURE__ */ s("img")({
   name: "QuestionStatusIcon",
   class: "q1uc7n5z",
   propsAsIs: !1
-}), q = /* @__PURE__ */ s("span")({
+}), x = /* @__PURE__ */ s("span")({
   name: "QuestionTypeTitle",
   class: "qcpp4y6",
   propsAsIs: !1
-}), T = /* @__PURE__ */ s("span")({
+}), S = /* @__PURE__ */ s("span")({
   name: "ExpiredQuestion",
   class: "e1rdw3wd",
   propsAsIs: !1
-}), v = /* @__PURE__ */ s("button")({
+}), b = /* @__PURE__ */ s("button")({
   name: "PlayButton",
   class: "p1pba9p1",
   propsAsIs: !1
+}), C = /* @__PURE__ */ s("div")({
+  name: "SkeletonContainer",
+  class: "s169lohr",
+  propsAsIs: !1
+}), a = () => n, B = /* @__PURE__ */ s(a())({
+  name: "SkeletonButton",
+  class: "s1f43z3r",
+  propsAsIs: !0
 });
 export {
-  T as ExpiredQuestion,
-  v as PlayButton,
-  r as QuestionAction,
-  Q as QuestionActionIcon,
-  f as QuestionActionTitle,
-  l as QuestionBody,
-  u as QuestionCaption,
-  A as QuestionContent,
-  c as QuestionItem,
-  y as QuestionStatusIcon,
-  d as QuestionSubject,
-  m as QuestionTypeIcon,
-  I as QuestionTypeLabel,
-  q as QuestionTypeTitle
+  S as ExpiredQuestion,
+  b as PlayButton,
+  I as QuestionAction,
+  A as QuestionActionIcon,
+  v as QuestionActionTitle,
+  Q as QuestionBody,
+  m as QuestionCaption,
+  y as QuestionContent,
+  r as QuestionItem,
+  T as QuestionStatusIcon,
+  q as QuestionSubject,
+  f as QuestionTypeIcon,
+  d as QuestionTypeLabel,
+  x as QuestionTypeTitle,
+  B as SkeletonButton,
+  C as SkeletonContainer
 };

package/lib/ui/gamification/question/twitter/index.js

@@ -2,6 +2,7 @@ import { jsxs as o, jsx as i } from "react/jsx-runtime";
 import { TwitterContent as m } from "../../../questions/twitter/index.js";
 import { Container as e, Quote as n, ActionButton as p } from "./styles.js";
 import "../../../video-player/index.js";
+import "@linaria/core";
 import "react";
 import "../../../icons/index.js";
 import "@linaria/react";
@@ -12,11 +13,11 @@ import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
-const k = ({ openTweet: r, ...t }) => /* @__PURE__ */ o(e, { children: [
+const A = ({ openTweet: r, ...t }) => /* @__PURE__ */ o(e, { children: [
   t.title && /* @__PURE__ */ i(n, { children: t.title }),
   /* @__PURE__ */ i(m, { ...t }),
   r && /* @__PURE__ */ i(p, { onClick: () => r(t.tweetId), children: "View Insight" })
 ] });
 export {
-  k as Twitter
+  A as Twitter
 };

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

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 export interface UserStatisticsProps {
+    loading?: boolean;
     avatar?: string;
     name?: string;
     points?: number;
-    friendsRank: number;
-    rank: number;
+    friendsRank?: number;
+    rank?: number;
     streak?: number;
     correct?: number;
     incorrect?: number;

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

@@ -1,60 +1,63 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { abbreviate as p, formatDecimals as f } from "../../../utils/common.js";
-import { Rank as o } from "./components/rank/index.js";
-import { Statistic as t } from "./components/statistic/index.js";
-import { Container as v, TopInfo as L, User as g, UserAccountBtn as V, Avatar as I, AvatarPlaceholder as k, UserInfo as w, UserName as x, UserRating as H, Rts as R, TrophyIcon as S, RtsIndicator as U, RtsLabel as b, Divider as u, BottomInfo as T, Ranks as M, Statistics as Z } from "./styles.js";
-import "./components/rank/styles.js";
+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 { 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";
+import "../../skeleton/styles.js";
 import "@linaria/react";
+import "./components/rank/styles.js";
 import "./components/statistic/styles.js";
-const y = "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 = ({
-  avatar: e,
-  name: n,
-  points: c,
-  friendsRank: C,
-  rank: l,
-  streak: d,
-  correct: a,
-  incorrect: s,
-  inTop: h,
-  successRate: m
-}) => /* @__PURE__ */ r(v, { children: [
-  /* @__PURE__ */ i(L, { children: /* @__PURE__ */ r(g, { children: [
-    /* @__PURE__ */ r(V, { children: [
-      e && /* @__PURE__ */ i(I, { alt: "avatar", src: e }),
-      !e && /* @__PURE__ */ i(k, { children: p(n || "") })
+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", z = ({
+  loading: t,
+  avatar: n,
+  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 || "") })
     ] }),
-    /* @__PURE__ */ r(w, { children: [
-      /* @__PURE__ */ i(x, { children: n }),
-      /* @__PURE__ */ r(H, { children: [
-        /* @__PURE__ */ r(R, { children: [
-          /* @__PURE__ */ i(S, { alt: "rank-icon", src: y }),
-          /* @__PURE__ */ r(U, { children: [
-            f(c),
-            /* @__PURE__ */ i(b, { children: "PTS" })
+    /* @__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" })
           ] })
         ] }),
-        /* @__PURE__ */ i(u, {}),
-        /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ r(T, {}),
+        /* @__PURE__ */ i("div", { children: [
           "TOP ",
-          h || 0,
+          p || 0,
           "%"
         ] })
       ] })
     ] })
-  ] }) }),
-  /* @__PURE__ */ r(T, { children: [
-    /* @__PURE__ */ r(M, { children: [
-      /* @__PURE__ */ i(o, { indicator: C || 0, title: "Friends rank" }),
-      /* @__PURE__ */ i(o, { indicator: l || 0, title: "Global rank" })
+  ] }) }) }),
+  /* @__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__ */ r(Z, { children: [
-      /* @__PURE__ */ i(t, { indicator: d || 0, title: "Win streak" }),
-      /* @__PURE__ */ i(t, { indicator: a || 0, title: "Correct" }),
-      /* @__PURE__ */ i(t, { indicator: s || 0, title: "Incorrect" }),
-      /* @__PURE__ */ i(t, { indicator: `${m || 0}%`, title: "Succ. rate" })
-    ] })
+    /* @__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" })
+    ] }) })
   ] })
 ] });
 export {
-  O as UserStatistics
+  z as UserStatistics
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { QuestionStatus, QuestionType } from '@streamlayer/sdk-web-types';
+import { QuestionType } from '@streamlayer/sdk-web-types';
 interface FeedbackProps {
     feedbackMessages?: Partial<Record<'correctFeedback' | 'incorrectFeedback', {
         description: string;
@@ -9,13 +9,14 @@ interface FeedbackProps {
     questionVoted?: boolean;
     questionVotedCorrectly?: boolean;
     hasCorrectAnswer: boolean;
-    questionStatus: QuestionStatus;
     showExpiredNotification: boolean;
     showClosedNotificationTrivia: boolean;
     votedInCurrentRender: boolean;
     votedAfterQuestionClosed: boolean;
     enteredAnActiveQuestion: boolean;
+    voteErrorMessage: string;
     marketClosed: boolean;
+    percentsAnimated?: boolean;
 }
 export declare const Feedback: React.FC<FeedbackProps>;
 export {};

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

@@ -1,69 +1,82 @@
-import { jsxs as r, Fragment as t, jsx as i } from "react/jsx-runtime";
-import { QuestionType as c, QuestionStatus as f } from "@streamlayer/sdk-web-types";
-import { SvgIcon as l } from "../../../icons/index.js";
-import { Container as Q, FeedbackIconWrap as h, FeedbackHeader as p, FeedbackDescription as d, FeedbackText as s, IconPrediction as W, DynamicWrap as L, FeedbackTitle as j } from "./styles.js";
+import { jsx as i, jsxs as n, Fragment as t } from "react/jsx-runtime";
+import { useRef as C } from "react";
+import { QuestionType as d } from "@streamlayer/sdk-web-types";
+import { SvgIcon as a } from "../../../icons/index.js";
+import { ShowInContainer as E, Container as K, IconPrediction as j, FeedbackDescription as l, FeedbackIconWrap as m, FeedbackHeader as F, FeedbackText as I, DynamicWrap as z, FeedbackTitle as G } from "./styles.js";
 import "@linaria/react";
-import "react";
-const G = ({
-  feedbackMessages: e,
-  questionVotedCorrectly: u,
-  questionVoted: a,
-  questionType: n,
-  hasCorrectAnswer: F,
-  questionStatus: T,
-  showExpiredNotification: I,
-  showClosedNotificationTrivia: b,
-  votedInCurrentRender: m,
-  votedAfterQuestionClosed: N,
-  enteredAnActiveQuestion: k,
-  marketClosed: S
+import "../../../show-in/index.js";
+import "@linaria/core";
+const V = ({
+  feedbackMessages: r,
+  questionVotedCorrectly: x,
+  questionVoted: p,
+  questionType: e,
+  hasCorrectAnswer: u,
+  showExpiredNotification: w,
+  showClosedNotificationTrivia: P,
+  votedInCurrentRender: o,
+  votedAfterQuestionClosed: H,
+  voteErrorMessage: c,
+  enteredAnActiveQuestion: y,
+  marketClosed: L,
+  percentsAnimated: Y
 }) => {
-  const E = a && (n === c.TRIVIA || n === c.PREDICTION) && m && T !== f.RESOLVED, w = n === c.PREDICTION && !F, x = S && n === c.PREDICTION && !a && !k || n === c.PREDICTION && N && m && k, D = E && w, O = E && F, y = n === c.PREDICTION && a && m && F, R = a && n === c.POLL && m;
-  if (!I && !b && !D && !O && !x && !R && !y)
-    return null;
-  const P = u ? "correct" : "incorrect", o = u ? e == null ? void 0 : e.correctFeedback : e == null ? void 0 : e.incorrectFeedback;
-  return /* @__PURE__ */ r(Q, { "data-isPrediction": w, children: [
-    I && /* @__PURE__ */ r(t, { children: [
-      /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(l, { name: "questionExpired" }) }),
-      /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(d, { children: "Question Expired" }) }),
-        /* @__PURE__ */ i(s, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
+  var Q;
+  const f = p && (e === d.TRIVIA || e === d.PREDICTION), D = e === d.PREDICTION && !u, O = L && e === d.PREDICTION && !p && !y || e === d.PREDICTION && H && o && y, R = f && D, T = f && u, N = e === d.PREDICTION && p && o && u, S = p && e === d.POLL && o, b = x ? "correct" : "incorrect", h = x ? r == null ? void 0 : r.correctFeedback : r == null ? void 0 : r.incorrectFeedback, s = w || P || R || T || O || S || N || c, W = C(null), B = (Q = W.current) == null ? void 0 : Q.getBoundingClientRect().height, k = o && !Y;
+  return s ? /* @__PURE__ */ i(
+    E,
+    {
+      enabled: o && !k,
+      replayKey: k,
+      style: o ? { height: k ? 0 : B } : {},
+      children: /* @__PURE__ */ n(K, { ref: W, "data-prediction": D, children: [
+        c && /* @__PURE__ */ n(t, { children: [
+          /* @__PURE__ */ i(j, { name: "questionExpired" }),
+          /* @__PURE__ */ i(l, { children: c })
+        ] }),
+        !c && w && /* @__PURE__ */ n(t, { children: [
+          /* @__PURE__ */ i(m, { children: /* @__PURE__ */ i(a, { name: "questionExpired" }) }),
+          /* @__PURE__ */ n("div", { children: [
+            /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Expired" }) }),
+            /* @__PURE__ */ i(I, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
+          ] })
+        ] }),
+        !c && P && /* @__PURE__ */ n(t, { children: [
+          /* @__PURE__ */ i(m, { children: /* @__PURE__ */ i(a, { name: "questionExpired" }) }),
+          /* @__PURE__ */ n("div", { children: [
+            /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Closed" }) }),
+            /* @__PURE__ */ i(I, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
+          ] })
+        ] }),
+        !c && O && /* @__PURE__ */ n(t, { children: [
+          /* @__PURE__ */ i(m, { children: /* @__PURE__ */ i(a, { name: "questionExpired" }) }),
+          /* @__PURE__ */ n("div", { children: [
+            /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Closed" }) }),
+            /* @__PURE__ */ i(I, { children: "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
+          ] })
+        ] }),
+        !c && R && /* @__PURE__ */ n(t, { children: [
+          /* @__PURE__ */ i(j, { name: "icon-prediction" }),
+          /* @__PURE__ */ n(l, { children: [
+            "Your pick has been recorded. ",
+            /* @__PURE__ */ i(z, { children: "We’ll notify you of the result." })
+          ] })
+        ] }),
+        !c && S && /* @__PURE__ */ n(t, { children: [
+          /* @__PURE__ */ i(m, { "data-feedback-type": "correct", children: /* @__PURE__ */ i(a, { name: "correct" }) }),
+          /* @__PURE__ */ i(l, { children: "Thanks for answering. Please stay tuned for the next question." })
+        ] }),
+        !c && (T || N) && !P && /* @__PURE__ */ n(t, { children: [
+          /* @__PURE__ */ i(m, { "data-feedback-type": b, children: /* @__PURE__ */ i(a, { name: b }) }),
+          /* @__PURE__ */ i("div", { children: /* @__PURE__ */ n(F, { children: [
+            /* @__PURE__ */ i(G, { "data-feedback-type": b, children: h == null ? void 0 : h.title }),
+            /* @__PURE__ */ i(l, { children: h == null ? void 0 : h.description })
+          ] }) })
+        ] })
       ] })
-    ] }),
-    b && /* @__PURE__ */ r(t, { children: [
-      /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(l, { name: "questionExpired" }) }),
-      /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(d, { children: "Question Closed" }) }),
-        /* @__PURE__ */ i(s, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
-      ] })
-    ] }),
-    x && /* @__PURE__ */ r(t, { children: [
-      /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(l, { name: "questionExpired" }) }),
-      /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(d, { children: "Question Closed" }) }),
-        /* @__PURE__ */ i(s, { children: "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
-      ] })
-    ] }),
-    D && /* @__PURE__ */ r(t, { children: [
-      /* @__PURE__ */ i(W, { name: "icon-prediction" }),
-      /* @__PURE__ */ r(d, { children: [
-        "Your pick has been recorded. ",
-        /* @__PURE__ */ i(L, { children: "We’ll notify you of the result." })
-      ] })
-    ] }),
-    R && /* @__PURE__ */ r(t, { children: [
-      /* @__PURE__ */ i(h, { "data-feedback-type": "correct", children: /* @__PURE__ */ i(l, { name: "correct" }) }),
-      /* @__PURE__ */ i(d, { children: "Thanks for answering. Please stay tuned for the next question." })
-    ] }),
-    (O || y) && /* @__PURE__ */ r(t, { children: [
-      /* @__PURE__ */ i(h, { "data-feedback-type": P, children: /* @__PURE__ */ i(l, { name: P }) }),
-      /* @__PURE__ */ i("div", { children: /* @__PURE__ */ r(p, { children: [
-        /* @__PURE__ */ i(j, { "data-feedback-type": P, children: o == null ? void 0 : o.title }),
-        /* @__PURE__ */ i(d, { children: o == null ? void 0 : o.description })
-      ] }) })
-    ] })
-  ] });
+    }
+  ) : null;
 };
 export {
-  G as Feedback
+  V as Feedback
 };

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const ShowInContainer: any;
 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>>;

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

@@ -1,47 +1,54 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as e } from "../../../icons/index.js";
+import { ShowIn as a } from "../../../show-in/index.js";
 import "react/jsx-runtime";
 import "react";
-const r = /* @__PURE__ */ s("div")({
+import "@linaria/core";
+const o = () => a, m = /* @__PURE__ */ s(o())({
+  name: "ShowInContainer",
+  class: "s16sbdnm",
+  propsAsIs: !0
+}), l = /* @__PURE__ */ s("div")({
   name: "Container",
-  class: "c16sbdnm",
+  class: "cbhorgl",
   propsAsIs: !1
-}), a = () => e, t = /* @__PURE__ */ s(a())({
+}), n = () => e, I = /* @__PURE__ */ s(n())({
   name: "IconPrediction",
-  class: "ibhorgl",
+  class: "i1g20ja7",
   propsAsIs: !0
-}), i = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "FeedbackIconWrap",
-  class: "f1g20ja7",
+  class: "f455ozj",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), b = /* @__PURE__ */ s("div")({
   name: "FeedbackHeader",
-  class: "f455ozj",
+  class: "f1913njx",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("span")({
+}), k = /* @__PURE__ */ s("span")({
   name: "FeedbackTitle",
-  class: "f1913njx",
+  class: "fzfk69z",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("span")({
+}), F = /* @__PURE__ */ s("span")({
   name: "FeedbackDescription",
-  class: "fzfk69z",
+  class: "fx87qaj",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
+}), A = /* @__PURE__ */ s("div")({
   name: "FeedbackText",
-  class: "fx87qaj",
+  class: "fvek9ew",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("span")({
+}), x = /* @__PURE__ */ s("span")({
   name: "DynamicWrap",
-  class: "dvek9ew",
+  class: "d1kbtp09",
   propsAsIs: !1
 });
 export {
-  r as Container,
-  I as DynamicWrap,
-  m as FeedbackDescription,
-  d as FeedbackHeader,
-  i as FeedbackIconWrap,
-  f as FeedbackText,
-  l as FeedbackTitle,
-  t as IconPrediction
+  l as Container,
+  x as DynamicWrap,
+  F as FeedbackDescription,
+  b as FeedbackHeader,
+  f as FeedbackIconWrap,
+  A as FeedbackText,
+  k as FeedbackTitle,
+  I as IconPrediction,
+  m as ShowInContainer
 };