@streamlayer/react-ui 0.74.3 → 0.75.1

package/lib/ui/app/Notifications/index.js

@@ -1,10 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useStore as f } from "@nanostores/react";
-import { useState as u, useMemo as s } from "react";
-import { NotificationType as m } from "@streamlayer/sdk-web-notifications";
-import { Notification as n } from "../../gamification/question/notification/index.js";
-import { Onboarding as c } from "./Onboarding/index.js";
-import { Container as l } from "./styles.js";
+import { jsx as o, jsxs as d, Fragment as f } from "react/jsx-runtime";
+import { useStore as y } from "@nanostores/react";
+import { useState as g, useMemo as a, useRef as N, useCallback as h, useEffect as S } from "react";
+import { NotificationType as s } from "@streamlayer/sdk-web-notifications";
+import { Notification as l } from "../../gamification/question/notification/index.js";
+import { PredictionResult as O } from "../../gamification/question/notification/prediction-result/index.js";
+import { Onboarding as R } from "./Onboarding/index.js";
+import { InnerContainer as c, Container as v } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "../../gamification/constants.js";
 import "../../gamification/question/notification/insight/index.js";
@@ -13,15 +14,16 @@ import "../../icons/index.js";
 import "@linaria/react";
 import "../../video-player/styles.js";
 import "../../gamification/question/notification/insight/styles.js";
-import "../../gamification/question/notification/prediction-result/index.js";
-import "../../gamification/question/notification/prediction-result/animation-lines/index.js";
-import "../../gamification/question/notification/prediction-result/animation-lines/styles.js";
-import "../../gamification/question/notification/prediction-result/styles.js";
 import "../../gamification/question/notification/styles.js";
 import "../../gamification/question/notification/tweet/index.js";
 import "../../questions/twitter/account/index.js";
 import "../../questions/twitter/account/styles.js";
 import "../../gamification/question/notification/tweet/styles.js";
+import "../../gamification/question/notification/prediction-result/animation-lines/index.js";
+import "../../gamification/question/notification/prediction-result/animation-lines/styles.js";
+import "../../gamification/question/notification/prediction-result/styles.js";
+import "../../show-in/index.js";
+import "@linaria/core";
 import "../../gamification/onboarding/index.js";
 import "react-virtualized-auto-sizer";
 import "../../gamification/onboarding/slides/onboarding-instructions/index.js";
@@ -33,21 +35,56 @@ import "../../gamification/onboarding/slides/onboarding-rules/styles.js";
 import "../../gamification/onboarding/styles.js";
 import "../../button/index.js";
 import "../../button/styles.js";
-import "../../show-in/index.js";
-import "@linaria/core";
 import "./Onboarding/Notification/index.js";
 import "./Onboarding/Notification/styles.js";
-const N = ({ sdk: o, notification: r }) => r.type === m.QUESTION ? /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(n, { ...r }) }) : r.type === m.QUESTION_RESOLVED ? /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(n, { ...r }) }) : r.type === m.ONBOARDING ? /* @__PURE__ */ t(c, { sdk: o, notification: r, hiding: r.hiding }) : null, rr = ({ sdk: o }) => {
-  const [r] = u(o.getNotificationsStore()), i = f(r), p = s(() => {
-    if (!(i != null && i.size))
+const E = (p) => {
+  const [t, r] = g(0), e = N(null), n = h((i) => {
+    e.current = i;
+  }, []);
+  S(() => {
+    var u;
+    const i = (u = e.current) == null ? void 0 : u.getBoundingClientRect();
+    i && r(i.height);
+  }, [p]);
+  const m = h((i) => {
+    r(i);
+  }, []);
+  return [n, t, m];
+}, I = ({ sdk: p, notification: t }) => {
+  var m, i;
+  const [r, e, n] = E(t.id);
+  return t.type === s.QUESTION ? /* @__PURE__ */ d(f, { children: [
+    /* @__PURE__ */ o(c, { ref: r, style: { position: "absolute", visibility: "hidden" }, children: /* @__PURE__ */ o(l, { ...t }) }),
+    /* @__PURE__ */ o(v, { style: { height: t.hiding ? 0 : e }, hiding: t.hiding, children: /* @__PURE__ */ o(c, { style: { height: "100%" }, children: /* @__PURE__ */ o(l, { ...t }) }) })
+  ] }) : t.type === s.QUESTION_RESOLVED && ((i = (m = t.data) == null ? void 0 : m.question) != null && i.predictionResult) ? /* @__PURE__ */ o(
+    O,
+    {
+      style: { height: t.hiding ? 0 : e },
+      saveHeight: n,
+      close: t.close,
+      hiding: t.hiding,
+      ...t.data.question
+    }
+  ) : t.type === s.ONBOARDING ? /* @__PURE__ */ o(
+    R,
+    {
+      style: { height: t.hiding ? 0 : e },
+      saveHeight: n,
+      sdk: p,
+      notification: t
+    }
+  ) : null;
+}, ht = ({ sdk: p }) => {
+  const [t] = g(p.getNotificationsStore()), r = y(t), e = a(() => {
+    if (!(r != null && r.size))
       return null;
-    for (const e of i.values())
-      if (e.type === m.ONBOARDING)
-        return e;
-    return i.values().next().value;
-  }, [i]);
-  return p ? /* @__PURE__ */ t(l, { hiding: p.hiding, children: /* @__PURE__ */ t(N, { sdk: o, notification: p }) }) : null;
+    for (const m of r.values())
+      if (m.type === s.ONBOARDING)
+        return m;
+    return r.values().next().value;
+  }, [r]);
+  return e ? /* @__PURE__ */ o(I, { sdk: p, notification: e }) : null;
 };
 export {
-  rr as SDKNotifications
+  ht as SDKNotifications
 };

package/lib/ui/app/Notifications/styles.d.ts

@@ -1 +1,3 @@
+/// <reference types="react" />
 export declare const Container: any;
+export declare const InnerContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/app/Notifications/styles.js

@@ -1,12 +1,17 @@
-import { styled as o } from "@linaria/react";
-import { ShowIn as t } from "../../show-in/index.js";
+import { styled as n } from "@linaria/react";
+import { ShowIn as o } from "../../show-in/index.js";
 import "react/jsx-runtime";
 import "@linaria/core";
-const r = () => t, m = /* @__PURE__ */ o(r())({
+const r = () => o, p = /* @__PURE__ */ n(r())({
   name: "Container",
   class: "ctckejh",
   propsAsIs: !0
+}), a = /* @__PURE__ */ n("div")({
+  name: "InnerContainer",
+  class: "i1ri7tzr",
+  propsAsIs: !1
 });
 export {
-  m as Container
+  p as Container,
+  a as InnerContainer
 };

package/lib/ui/app/masters.js

@@ -28,15 +28,17 @@ import "../video-player/index.js";
 import "../icons/index.js";
 import "../video-player/styles.js";
 import "../gamification/question/notification/insight/styles.js";
-import "../gamification/question/notification/prediction-result/index.js";
-import "../gamification/question/notification/prediction-result/animation-lines/index.js";
-import "../gamification/question/notification/prediction-result/animation-lines/styles.js";
-import "../gamification/question/notification/prediction-result/styles.js";
 import "../gamification/question/notification/styles.js";
 import "../gamification/question/notification/tweet/index.js";
 import "../questions/twitter/account/index.js";
 import "../questions/twitter/account/styles.js";
 import "../gamification/question/notification/tweet/styles.js";
+import "../gamification/question/notification/prediction-result/index.js";
+import "../gamification/question/notification/prediction-result/animation-lines/index.js";
+import "../gamification/question/notification/prediction-result/animation-lines/styles.js";
+import "../gamification/question/notification/prediction-result/styles.js";
+import "../show-in/index.js";
+import "@linaria/core";
 import "./Notifications/Onboarding/index.js";
 import "../gamification/onboarding/index.js";
 import "react-virtualized-auto-sizer";
@@ -49,8 +51,6 @@ import "../gamification/onboarding/slides/onboarding-rules/styles.js";
 import "../gamification/onboarding/styles.js";
 import "../button/index.js";
 import "../button/styles.js";
-import "../show-in/index.js";
-import "@linaria/core";
 import "./Notifications/Onboarding/Notification/index.js";
 import "./Notifications/Onboarding/Notification/styles.js";
 import "./Notifications/styles.js";

package/lib/ui/app/useMastersApp.js

@@ -1,9 +1,9 @@
-import { useStore as m } from "@nanostores/react";
-import { useRef as y, useState as v, useCallback as F, useEffect as d } from "react";
+import { useStore as l } from "@nanostores/react";
+import { useRef as F, useState as d, useCallback as y, useEffect as v } from "react";
 import { FeatureType as I } from "@streamlayer/sdk-web-types";
 import "react/jsx-runtime";
 import { ChannelsButtonId as c } from "../navigation/button/Channels.js";
-import { FeaturedGroupsButtonId as a } from "../navigation/button/FeaturedGroups.js";
+import { FeaturedGroupsButtonId as n } from "../navigation/button/FeaturedGroups.js";
 import "@linaria/react";
 import "../icons/index.js";
 import "../navigation/button/styles.js";
@@ -11,26 +11,28 @@ import "../../LeaderBoard_16p26hz-4ed993c7.js";
 import "../../index_4nhkck-4ed993c7.js";
 import "../../masters_k70xsy-4ed993c7.js";
 import "../navigation/button/index.js";
-const j = (e) => {
-  const n = y(""), [f, l] = v(!1), A = m(e.status), r = m(e.userId()), i = A === "ready", [s, u] = v(a), p = F(
+const U = (e) => {
+  const a = F(""), [m, f] = d(!1), A = l(e.status), r = l(e.userId()), i = A === "ready", [s, u] = d(n), p = y(
     (t, o) => {
-      u(o), o === a ? (t && e.createEventSession(t), e.openFeature(I.GAMES)) : e.closeFeature();
+      u(o), o === n ? (t && e.createEventSession(t), window.requestAnimationFrame(() => {
+        e.openFeature(I.GAMES);
+      })) : e.closeFeature();
     },
     [e]
   );
-  d(() => {
-    !i && s === a && (u(c), e.closeFeature());
+  v(() => {
+    !i && s === n && (u(c), e.closeFeature());
   }, [i, s, e]);
   const E = (t) => {
-    n.current = t, e.initializeApp().then(({ enabled: o, err: b }) => {
-      if (l(!0), b) {
+    a.current = t, f(!0), e.initializeApp().then(({ enabled: o, err: b }) => {
+      if (b) {
         p(t, c);
         return;
       }
       if (o) {
         e.isUserAuthorized().then((h) => {
           if (h) {
-            p(t, a);
+            p(t, n);
             return;
           } else
             e.disableApp();
@@ -39,18 +41,18 @@ const j = (e) => {
       }
     });
   }, S = () => {
-    l(!1), e.disableApp();
+    f(!1), e.disableApp();
   };
-  return d(() => {
+  return v(() => {
     if (!r) {
       i && (u(c), e.disableApp());
       return;
     }
-    r && n.current && f && e.initializeApp().then(() => {
-      e.createEventSession(n.current);
+    r && a.current && m && e.initializeApp().then(() => {
+      e.createEventSession(a.current);
     });
   }, [r]), {
-    sdkEnabled: f,
+    sdkEnabled: m,
     sdkReady: i,
     activeOverlay: s,
     activateAndLoadOverlay: p,
@@ -60,5 +62,5 @@ const j = (e) => {
   };
 };
 export {
-  j as useMastersApp
+  U as useMastersApp
 };

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

@@ -1,52 +1,48 @@
-import { jsx as r, jsxs as a, Fragment as n } from "react/jsx-runtime";
-import { QuestionType as o } from "@streamlayer/sdk-web-types";
+import { jsxs as a, jsx as o, Fragment as c } from "react/jsx-runtime";
+import { QuestionType as t } from "@streamlayer/sdk-web-types";
 import { QuestionTypeData as d } from "../../constants.js";
 import { Insight as f } from "./insight/index.js";
-import { PredictionResult as h } from "./prediction-result/index.js";
-import { Container as I, CloseIconWrap as T, CloseIcon as C, Header as E, TypeIcon as A, TypeName as D, Question as W, AnswerButton as w } from "./styles.js";
-import { Tweet as x } from "./tweet/index.js";
+import { Container as h, CloseIconWrap as I, CloseIcon as T, Header as C, TypeIcon as E, TypeName as s, Question as A, AnswerButton as D } from "./styles.js";
+import { Tweet as W } from "./tweet/index.js";
 import "../../../video-player/index.js";
 import "react";
 import "../../../icons/index.js";
 import "@linaria/react";
 import "../../../video-player/styles.js";
 import "./insight/styles.js";
-import "./prediction-result/animation-lines/index.js";
-import "./prediction-result/animation-lines/styles.js";
-import "./prediction-result/styles.js";
 import "../../../questions/twitter/account/index.js";
 import "../../../questions/twitter/account/styles.js";
 import "./tweet/styles.js";
-const J = ({
-  close: l,
+const R = ({
+  close: e,
   action: i,
-  data: { questionType: t, question: m, insight: c, tweet: e }
+  data: { questionType: r, question: m, insight: l, tweet: p }
 }) => {
-  const p = d[t];
-  return p ? m != null && m.predictionResult ? /* @__PURE__ */ r(h, { close: l, ...m }) : /* @__PURE__ */ a(I, { children: [
-    /* @__PURE__ */ r(T, { onClick: l, children: /* @__PURE__ */ r(C, { name: "icon-cross" }) }),
-    t !== o.TWEET && /* @__PURE__ */ a(E, { children: [
-      /* @__PURE__ */ r(
-        A,
+  const n = d[r];
+  return n ? /* @__PURE__ */ a(h, { children: [
+    /* @__PURE__ */ o(I, { onClick: e, children: /* @__PURE__ */ o(T, { name: "icon-cross" }) }),
+    r !== t.TWEET && /* @__PURE__ */ a(C, { children: [
+      /* @__PURE__ */ o(
+        E,
         {
-          "data-type-trivia": t === o.TRIVIA,
-          "data-type-poll": t === o.POLL,
-          name: p.iconName
+          "data-type-trivia": r === t.TRIVIA,
+          "data-type-poll": r === t.POLL,
+          name: n.iconName
         }
       ),
-      /* @__PURE__ */ r(D, { children: p.label })
+      /* @__PURE__ */ o(s, { children: n.label })
     ] }),
-    t === o.FACTOID && /* @__PURE__ */ r(f, { ...c, action: i }),
-    t === o.TWEET && // ToDo: connect with real Api data
+    r === t.FACTOID && /* @__PURE__ */ o(f, { ...l, action: i }),
+    r === t.TWEET && // ToDo: connect with real Api data
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    /* @__PURE__ */ r(x, { ...e, action: i }),
-    t !== o.FACTOID && t !== o.TWEET && /* @__PURE__ */ a(n, { children: [
-      /* @__PURE__ */ r(W, { children: m == null ? void 0 : m.title }),
-      /* @__PURE__ */ r(w, { onClick: i, children: "Answer" })
+    /* @__PURE__ */ o(W, { ...p, action: i }),
+    r !== t.FACTOID && r !== t.TWEET && /* @__PURE__ */ a(c, { children: [
+      /* @__PURE__ */ o(A, { children: m == null ? void 0 : m.title }),
+      /* @__PURE__ */ o(D, { onClick: i, children: "Answer" })
     ] })
   ] }) : null;
 };
 export {
-  J as Notification
+  R as Notification
 };

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

@@ -1,6 +1,6 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { VideoPlayer as m } from "../../../../video-player/index.js";
-import { InsightContainer as c, Image as e, InsightContent as h, Title as p, Description as u, ActionBtn as I } from "./styles.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { VideoPlayer as c } from "../../../../video-player/index.js";
+import { InsightContainer as h, Image as p, InsightContent as o, Title as u, Description as e, ActionBtn as I } from "./styles.js";
 import "react";
 import "../../../../icons/index.js";
 import "@linaria/react";
@@ -8,16 +8,16 @@ import "../../../../video-player/styles.js";
 const b = ({
   video: r,
   image: n,
-  heading: l,
-  body: s,
-  action: i
-}) => /* @__PURE__ */ o(c, { children: [
-  (r == null ? void 0 : r.url) && /* @__PURE__ */ t(m, { source: r.url, poster: r.thumbnailUrl }),
-  n && /* @__PURE__ */ t(e, { src: n }),
-  /* @__PURE__ */ o(h, { children: [
-    /* @__PURE__ */ t(p, { children: l }),
+  heading: s,
+  body: m,
+  action: l
+}) => /* @__PURE__ */ i(h, { children: [
+  (r == null ? void 0 : r.url) && /* @__PURE__ */ t(c, { source: r.url, poster: r.thumbnailUrl }),
+  n && !(r != null && r.url) && /* @__PURE__ */ t(p, { src: n }),
+  /* @__PURE__ */ i(o, { children: [
     /* @__PURE__ */ t(u, { children: s }),
-    i && /* @__PURE__ */ t(I, { onClick: i, children: "View Insight" })
+    /* @__PURE__ */ t(e, { children: m }),
+    l && /* @__PURE__ */ t(I, { onClick: l, children: "View Insight" })
   ] })
 ] });
 export {

package/lib/ui/gamification/question/notification/prediction-result/index.d.ts

@@ -2,4 +2,7 @@
 import type { NotificationData } from '@streamlayer/sdk-web-notifications';
 export declare const PredictionResult: React.FC<NotificationData['question'] & {
     close?: () => void;
+    saveHeight: (h: number) => void;
+    style: React.CSSProperties;
+    hiding: boolean;
 }>;

package/lib/ui/gamification/question/notification/prediction-result/index.js

@@ -1,78 +1,110 @@
-import { jsxs as c, jsx as i, Fragment as f } from "react/jsx-runtime";
-import { useState as b, useEffect as g } from "react";
-import { AnimationLines as S } from "./animation-lines/index.js";
-import { Container as x, AnimateContent as E, Content as t, Title as n, SubtitleFG as d, Subtitle as a, AnswerText as h, FeedbackIcon as m, CloseButton as C, CloseIcon as p } from "./styles.js";
+import { jsx as n, jsxs as i, Fragment as x } from "react/jsx-runtime";
+import { useState as F, useRef as S, useEffect as y } from "react";
+import { AnimationLines as b } from "./animation-lines/index.js";
+import { MIN_CONTENT_HEIGHT as B, Container as G, InnerContainer as N, Content as o, Title as a, SubtitleFG as k, Subtitle as d, AnswerText as g, FeedbackIcon as p, CloseButton as P, CloseIcon as T } from "./styles.js";
 import "./animation-lines/styles.js";
 import "@linaria/react";
 import "../../../../icons/index.js";
-const j = ({
-  close: u,
-  votedAnswer: l,
-  correct: r,
-  correctAnswerTitle: k
-}) => {
-  const [o, s] = b(1);
-  return g(() => {
-    const P = setInterval(() => {
-      s((e) => r && e > 4 || !r && e > 3 ? e : ++e);
+import "../../../../show-in/index.js";
+import "@linaria/core";
+const h = (m, r) => m === r ? "translateY(0px)" : m > r ? "translateY(100%)" : "translateY(-100%)", z = ({ close: m, votedAnswer: r, correct: s, correctAnswerTitle: Y, questionTitle: E, saveHeight: C, style: u, hiding: I }) => {
+  const [e, R] = F(1), f = S({});
+  y(() => {
+    const c = setInterval(() => {
+      R((t) => s && t > 4 || !s && t > 3 ? t : ++t);
     }, 6e3);
-    return () => clearInterval(P);
-  }, [r]), /* @__PURE__ */ c(x, { "data-bg-color-white": o > 3, children: [
-    /* @__PURE__ */ i(S, { step: o, correct: r }),
-    /* @__PURE__ */ c(E, { "data-active-number": o, children: [
-      /* @__PURE__ */ c(t, { children: [
-        /* @__PURE__ */ i(n, { children: "Master" }),
-        /* @__PURE__ */ i(d, { children: "FEATURED GROUPS +" })
-      ] }),
-      /* @__PURE__ */ c(t, { children: [
-        /* @__PURE__ */ i(n, { children: "Prediction results are in!" }),
-        /* @__PURE__ */ i(d, { children: "FEATURED GROUPS +" })
-      ] }),
-      /* @__PURE__ */ c(t, { children: [
-        /* @__PURE__ */ i(n, { children: "Who holds the most birdies in golf?" }),
-        /* @__PURE__ */ c(a, { children: [
-          "Your Pick: ",
-          /* @__PURE__ */ i(h, { children: l == null ? void 0 : l.title })
-        ] })
-      ] }),
-      r ? /* @__PURE__ */ c(f, { children: [
-        /* @__PURE__ */ c(t, { "data-color-green": "true", children: [
-          /* @__PURE__ */ i(n, { children: "Congratulations! You answered correctly." }),
-          /* @__PURE__ */ c(a, { children: [
-            /* @__PURE__ */ i(m, { name: "selected" }),
-            "Your Pick: ",
-            /* @__PURE__ */ i(h, { children: l == null ? void 0 : l.title })
-          ] })
+    return () => clearInterval(c);
+  }, [s]), y(() => {
+    var c, t;
+    f.current[e] && C(((t = (c = f.current[e]) == null ? void 0 : c.getBoundingClientRect()) == null ? void 0 : t.height) || B);
+  }, [e, C]);
+  const l = (c) => (t) => {
+    f.current && (f.current[c] = t);
+  };
+  return /* @__PURE__ */ n(G, { style: u.height ? u : { ...u, paddingTop: 0, paddingBottom: 0 }, hiding: I, children: /* @__PURE__ */ i(
+    N,
+    {
+      style: {
+        height: u.height,
+        minHeight: u.height,
+        backgroundColor: e > 3 ? "var(--color-white)" : "var(--color-primary-green2)"
+      },
+      children: [
+        /* @__PURE__ */ n(b, { step: e, correct: s }),
+        /* @__PURE__ */ i(o, { ref: l(1), style: { transform: h(1, e) }, children: [
+          /* @__PURE__ */ n(a, { children: "Master" }),
+          /* @__PURE__ */ n(k, { children: "FEATURED GROUPS +" })
         ] }),
-        /* @__PURE__ */ c(t, { "data-color-green": "true", children: [
-          /* @__PURE__ */ i(C, { onClick: u, children: /* @__PURE__ */ i(p, { name: "icon-cross" }) }),
-          /* @__PURE__ */ c(n, { children: [
-            "+",
-            l == null ? void 0 : l.points,
-            " points"
-          ] }),
-          /* @__PURE__ */ c(a, { children: [
-            /* @__PURE__ */ i(m, { name: "selected" }),
+        /* @__PURE__ */ i(o, { ref: l(2), style: { transform: h(2, e) }, children: [
+          /* @__PURE__ */ n(a, { children: "Prediction results are in!" }),
+          /* @__PURE__ */ n(k, { children: "FEATURED GROUPS +" })
+        ] }),
+        /* @__PURE__ */ i(o, { ref: l(3), style: { transform: h(3, e) }, children: [
+          /* @__PURE__ */ n(a, { children: E }),
+          /* @__PURE__ */ n(d, { children: /* @__PURE__ */ i(g, { children: [
             "Your Pick: ",
-            /* @__PURE__ */ i(h, { children: l == null ? void 0 : l.title })
-          ] })
-        ] })
-      ] }) : /* @__PURE__ */ c(t, { children: [
-        /* @__PURE__ */ i(C, { onClick: u, children: /* @__PURE__ */ i(p, { name: "icon-cross" }) }),
-        /* @__PURE__ */ c(n, { "data-incorrect": "true", children: [
-          "Better luck next time! Correct: ",
-          k,
-          "."
+            r == null ? void 0 : r.title
+          ] }) })
         ] }),
-        /* @__PURE__ */ c(a, { "data-incorrect": "true", children: [
-          /* @__PURE__ */ i(m, { name: "circleClose" }),
-          "Your Pick: ",
-          /* @__PURE__ */ i(h, { children: l == null ? void 0 : l.title })
+        s ? /* @__PURE__ */ i(x, { children: [
+          /* @__PURE__ */ i(
+            o,
+            {
+              ref: l(4),
+              style: { transform: h(4, e), color: "var(--color-primary-green1)" },
+              children: [
+                /* @__PURE__ */ n(a, { children: "Congratulations! You answered correctly." }),
+                /* @__PURE__ */ i(d, { children: [
+                  /* @__PURE__ */ n(p, { name: "selected" }),
+                  /* @__PURE__ */ i(g, { children: [
+                    "Your Pick: ",
+                    r == null ? void 0 : r.title
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(
+            o,
+            {
+              ref: l(5),
+              style: { transform: h(5, e), color: "var(--color-primary-green1)" },
+              children: [
+                /* @__PURE__ */ i(a, { children: [
+                  "+",
+                  r == null ? void 0 : r.points,
+                  " points"
+                ] }),
+                /* @__PURE__ */ i(d, { children: [
+                  /* @__PURE__ */ n(p, { name: "selected" }),
+                  /* @__PURE__ */ i(g, { children: [
+                    "Your Pick: ",
+                    r == null ? void 0 : r.title
+                  ] })
+                ] }),
+                /* @__PURE__ */ n(P, { onClick: m, children: /* @__PURE__ */ n(T, { name: "icon-cross" }) })
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ i(o, { ref: l(4), style: { transform: h(4, e) }, children: [
+          /* @__PURE__ */ i(a, { style: { color: "var(--color-neutrals-gray9)" }, children: [
+            "Better luck next time! Correct: ",
+            Y,
+            "."
+          ] }),
+          /* @__PURE__ */ i(d, { style: { color: "var(--color-secondary-red1)" }, children: [
+            /* @__PURE__ */ n(p, { name: "circleClose" }),
+            /* @__PURE__ */ i(g, { children: [
+              "Your Pick: ",
+              r == null ? void 0 : r.title
+            ] })
+          ] }),
+          /* @__PURE__ */ n(P, { onClick: m, children: /* @__PURE__ */ n(T, { name: "icon-cross" }) })
         ] })
-      ] })
-    ] })
-  ] });
+      ]
+    }
+  ) });
 };
 export {
-  j as PredictionResult
+  z as PredictionResult
 };

package/lib/ui/gamification/question/notification/prediction-result/styles.d.ts

@@ -1,6 +1,7 @@
 /// <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 AnimateContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const MIN_CONTENT_HEIGHT = 118;
+export declare const Container: any;
+export declare const InnerContainer: 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 Subtitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;