@streamlayer/react-ui 1.14.3 → 1.15.0

package/lib/ui/close-btn/index.d.ts

@@ -1,6 +1,6 @@
 import { CloseTimerAuto } from '@streamlayer/sdk-web-types';
 export declare const CloseButton: React.FC<{
-    close?: () => void;
+    close?: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     duration?: number;
     autoClose?: CloseTimerAuto;
     isPlaying?: boolean;

package/lib/ui/gamification/constants.d.ts

@@ -4,3 +4,4 @@ export declare const QuestionTypeData: Record<QuestionType, {
     label: string;
     iconName: keyof typeof icons;
 } | undefined>;
+export declare const QuestionActionLabel: Record<QuestionType, string>;

package/lib/ui/gamification/constants.js

@@ -1,5 +1,5 @@
 import { QuestionType as i } from "@streamlayer/sdk-web-types";
-const o = {
+const e = {
   [i.TWEET]: { label: "Insight", iconName: "icon-insight" },
   [i.PROMOTION]: { label: "Insight", iconName: "icon-insight" },
   [i.UNSET]: void 0,
@@ -7,7 +7,16 @@ const o = {
   [i.POLL]: { label: "Poll", iconName: "icon-poll" },
   [i.TRIVIA]: { label: "Trivia", iconName: "icon-trivia" },
   [i.PREDICTION]: { label: "Prediction", iconName: "icon-prediction" }
+}, o = {
+  [i.TWEET]: "Learn more",
+  [i.FACTOID]: "Learn more",
+  [i.POLL]: "Answer",
+  [i.TRIVIA]: "Answer",
+  [i.PREDICTION]: "Answer",
+  [i.PROMOTION]: "",
+  [i.UNSET]: ""
 };
 export {
-  o as QuestionTypeData
+  o as QuestionActionLabel,
+  e as QuestionTypeData
 };

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

@@ -1,12 +1,12 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import { AnimatedCounter as r } from "../../animated-counter/index.js";
-import { resetCss as e } from "../../theme/theme.js";
-import { PointsContainer as s, PointsIcon as m, PointsSvg as l, PointsBody as c, PointsTitle as a, PointsValue as d } from "./styles.js";
-const u = ({ points: t, onClick: i }) => /* @__PURE__ */ n(s, { className: e, onClick: i, children: [
-  /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(l, { name: "icon-trophy" }) }),
-  /* @__PURE__ */ n(c, { children: [
+import { resetCss as s } from "../../theme/theme.js";
+import { PointsContainer as e, PointsIcon as l, PointsSvg as m, PointsBody as c, PointsTitle as a, PointsValue as d } from "./styles.js";
+const u = ({ points: n, onClick: t }) => /* @__PURE__ */ i(e, { className: s, onClick: t, children: [
+  /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(m, { name: "icon-trophy-solid" }) }),
+  /* @__PURE__ */ i(c, { children: [
     /* @__PURE__ */ o(a, { children: "Total points" }),
-    /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(r, { value: t }) })
+    /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(r, { value: n }) })
   ] })
 ] });
 export {

package/lib/ui/gamification/question/inapp/notification/NotificationMedia/index.d.ts

@@ -0,0 +1,7 @@
+import { QuestionImages } from '@streamlayer/sdk-web-types';
+export declare const NotificationMedia: React.FC<{
+    src: string;
+    imageMode?: QuestionImages;
+    withVideo: boolean;
+    fromInsight?: boolean;
+}>;

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

@@ -0,0 +1,61 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { styled as o } from "@linaria/react";
+import { QuestionImages as s } from "@streamlayer/sdk-web-types";
+import { SvgIcon as p } from "../../../../../icons/index.js";
+const e = /* @__PURE__ */ o("div")({
+  name: "Media",
+  class: "m1bcvojl",
+  propsAsIs: !1
+}), I = () => e, l = /* @__PURE__ */ o(I())({
+  name: "MediaImgBottom",
+  class: "m58gin0",
+  propsAsIs: !0
+}), g = () => e, i = /* @__PURE__ */ o(g())({
+  name: "MediaImgSolid",
+  class: "m1atm8do",
+  propsAsIs: !0
+}), M = () => e, u = /* @__PURE__ */ o(M())({
+  name: "MediaImgRounded",
+  class: "myx3xoi",
+  propsAsIs: !0
+}), x = () => e, N = /* @__PURE__ */ o(x())({
+  name: "MediaImgCentered",
+  class: "m1bwv0gx",
+  propsAsIs: !0
+}), f = () => e, A = /* @__PURE__ */ o(f())({
+  name: "MediaImgInsight",
+  class: "mntjanp",
+  propsAsIs: !0
+}), E = /* @__PURE__ */ o("div")({
+  name: "VideoIcon",
+  class: "v1kofb47",
+  propsAsIs: !1
+}), v = {
+  [s.UNSET]: i,
+  [s.NONE]: i,
+  [s.ROUNDED]: u,
+  [s.CENTERED]: N,
+  [s.TRANSPARENT]: l
+}, h = ({
+  src: a,
+  imageMode: t = s.UNSET,
+  withVideo: m,
+  fromInsight: c
+}) => {
+  if (t === s.NONE)
+    return null;
+  const d = c ? A : v[t];
+  return /* @__PURE__ */ r(d, {
+    children: [/* @__PURE__ */ n("img", {
+      src: a,
+      alt: ""
+    }), m && /* @__PURE__ */ n(E, {
+      children: /* @__PURE__ */ n(p, {
+        name: "icon-play"
+      })
+    })]
+  });
+};
+export {
+  h as NotificationMedia
+};

package/lib/ui/gamification/question/inapp/notification/index.d.ts

@@ -0,0 +1,6 @@
+import { Notification as NotificationProps } from '@streamlayer/sdk-web-notifications';
+type InAppProps = NotificationProps['data'] & {
+    action: NotificationProps['action'];
+};
+export declare const InAppNotification: React.FC<InAppProps>;
+export {};

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

@@ -0,0 +1,38 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { QuestionType as c, QuestionImages as N, QuestionStatus as h } from "@streamlayer/sdk-web-types";
+import { QuestionTypeData as M, QuestionActionLabel as Q } from "../../../constants.js";
+import { QuestionTypeHeader as S } from "../../index.js";
+import { NotificationMedia as u } from "./NotificationMedia/index.js";
+import { NotificationContainer as v, NotificationContent as A, Button as V, StyledChevronRight as g, Body as T, Title as x } from "./styles.js";
+import { Tweet as D } from "./tweet/index.js";
+const F = ({ title: t, questionType: n, questionTypeData: r }) => /* @__PURE__ */ p(T, { children: [
+  /* @__PURE__ */ o(
+    S,
+    {
+      questionTypeData: r,
+      questionType: n,
+      questionStatus: h.UNSET
+    }
+  ),
+  t && /* @__PURE__ */ o(x, { children: t })
+] }), L = ({ tweet: t }) => t ? /* @__PURE__ */ o(T, { children: /* @__PURE__ */ o(D, { ...t, controlVideo: () => {
+} }) }) : null, k = ({ action: t, questionType: n, inApp: r, insight: e, tweet: i }) => {
+  var s;
+  const d = M[n], C = Q[n];
+  if (!d || !r || !r.notification)
+    return null;
+  const { title: E, image: I, imageMode: f } = r.notification;
+  let a = I;
+  n === c.TWEET && (i != null && i.tweetMedia) && (a = i.tweetMedia.image), f === N.NONE && (a = "");
+  const m = r.useMediaFromContent && (e == null ? void 0 : e.image), l = n === c.TWEET && ((s = i == null ? void 0 : i.tweetMedia) == null ? void 0 : s.video) || n === c.FACTOID && (e == null ? void 0 : e.video);
+  return /* @__PURE__ */ o(v, { className: "SL_InApp", onClick: t, children: /* @__PURE__ */ p(A, { style: a ? {} : { paddingLeft: "1.5rem" }, children: [
+    a && !m && /* @__PURE__ */ o(u, { src: a, imageMode: f, withVideo: !!l }),
+    m && /* @__PURE__ */ o(u, { src: m, fromInsight: !0, withVideo: !!l }),
+    n === c.TWEET ? /* @__PURE__ */ o(L, { tweet: i }) : /* @__PURE__ */ o(F, { questionTypeData: d, questionType: n, title: E }),
+    /* @__PURE__ */ o(V, { name: "inapp-button", children: C || "Open" }),
+    /* @__PURE__ */ o(g, { name: "chevronRight" })
+  ] }) });
+};
+export {
+  k as InAppNotification
+};

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

@@ -0,0 +1,7 @@
+export declare const CardContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const NotificationContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const NotificationContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Body: 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 Button: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const StyledChevronRight: any;

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

@@ -0,0 +1,40 @@
+import { styled as s } from "@linaria/react";
+import { SvgIcon as n } from "../../../../icons/index.js";
+const e = /* @__PURE__ */ s("div")({
+  name: "CardContainer",
+  class: "cy7yrc",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "NotificationContent",
+  class: "nuraq9m",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "NotificationContainer",
+  class: "ns1nzpg",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "b1j59nzs",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t9vmnpp",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("button")({
+  name: "Button",
+  class: "b14ivj5k",
+  propsAsIs: !1
+}), t = () => n, m = /* @__PURE__ */ s(t())({
+  name: "StyledChevronRight",
+  class: "s1atci8n",
+  propsAsIs: !0
+});
+export {
+  r as Body,
+  l as Button,
+  e as CardContainer,
+  c as NotificationContainer,
+  i as NotificationContent,
+  m as StyledChevronRight,
+  p as Title
+};

package/lib/ui/gamification/question/inapp/notification/tweet/index.d.ts

@@ -0,0 +1,2 @@
+import { TwitterContentProps } from '../../../../../questions/twitter';
+export declare const Tweet: React.FC<TwitterContentProps>;

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

@@ -0,0 +1,24 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { sanitizeContent as p } from "../../../../../questions/twitter/index.js";
+import { Account as s } from "../../../../../questions/twitter/account/index.js";
+import { Container as u, QuoteWrap as f, Quote as h, Body as l } from "./styles.js";
+const Q = ({ image: m, tweet: r, account: a, accountVerified: c, body: d, title: n }) => {
+  var i;
+  return /* @__PURE__ */ e(u, { children: [
+    n && /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(h, { children: n }) }),
+    /* @__PURE__ */ o(
+      s,
+      {
+        image: m,
+        name: (i = r == null ? void 0 : r.meta) == null ? void 0 : i.accountName,
+        userName: a,
+        verified: c,
+        createdTweet: r == null ? void 0 : r.date
+      }
+    ),
+    /* @__PURE__ */ o(l, { children: p(d) })
+  ] });
+};
+export {
+  Q as Tweet
+};

package/lib/ui/gamification/question/inapp/notification/tweet/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const QuoteWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Quote: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLQuoteElement> & import('react').BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;
+export declare const Body: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/question/inapp/notification/tweet/styles.js

@@ -0,0 +1,24 @@
+import { styled as s } from "@linaria/react";
+const a = /* @__PURE__ */ s("div")({
+  name: "QuoteWrap",
+  class: "q4w8jgs",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("blockquote")({
+  name: "Quote",
+  class: "qaa0kez",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "b1wvd52w",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "ccvukea",
+  propsAsIs: !1
+});
+export {
+  t as Body,
+  n as Container,
+  e as Quote,
+  a as QuoteWrap
+};

package/lib/ui/gamification/question/inapp/onboarding/index.d.ts

@@ -0,0 +1,5 @@
+import { NotificationData } from '@streamlayer/sdk-web-notifications';
+export declare const InAppOnboarding: React.FC<NotificationData['onboarding'] & {
+    open?: () => void;
+    close?: () => void;
+}>;

package/lib/ui/gamification/question/inapp/onboarding/index.js

@@ -0,0 +1,50 @@
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { NotificationContainer as p, IconContainer as h, Icon as l, Body as m, Title as o, TitleIcon as d, Description as f, Button as C, Close as k } from "./styles.js";
+const I = ({
+  open: e,
+  close: r,
+  ...t
+}) => {
+  var c, a;
+  return /* @__PURE__ */ s(
+    p,
+    {
+      onClick: () => {
+        e == null || e(), t && (t.instantOpen = !0);
+      },
+      children: [
+        /* @__PURE__ */ s(h, { children: [
+          /* @__PURE__ */ i(l, { className: "on-light", src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification.png" }),
+          /* @__PURE__ */ i(
+            l,
+            {
+              className: "on-dark",
+              src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification-dark.png"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s(m, { children: [
+          /* @__PURE__ */ s(o, { children: [
+            /* @__PURE__ */ i(d, { name: "icon-trophy-solid" }),
+            (c = t == null ? void 0 : t.titleCard) == null ? void 0 : c.title
+          ] }),
+          /* @__PURE__ */ s(f, { children: [
+            /* @__PURE__ */ i("span", { children: (a = t == null ? void 0 : t.titleCard) == null ? void 0 : a.subtitle }),
+            /* @__PURE__ */ i(C, { name: "inapp-button", children: "Play Now" })
+          ] })
+        ] }),
+        /* @__PURE__ */ i(
+          k,
+          {
+            close: (n) => {
+              n == null || n.stopPropagation(), r == null || r();
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  I as InAppOnboarding
+};

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

@@ -0,0 +1,9 @@
+export declare const NotificationContainer: 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 IconContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const TitleIcon: any;
+export declare const Close: any;
+export declare const Body: 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 Description: 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>>;

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

@@ -0,0 +1,51 @@
+import { styled as s } from "@linaria/react";
+import { CloseButton as o } from "../../../../close-btn/index.js";
+import { SvgIcon as n } from "../../../../icons/index.js";
+const p = /* @__PURE__ */ s("div")({
+  name: "NotificationContainer",
+  class: "n11jcrxe",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("img")({
+  name: "Icon",
+  class: "i1vmpt6u",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "IconContainer",
+  class: "i180665s",
+  propsAsIs: !1
+}), t = () => n, m = /* @__PURE__ */ s(t())({
+  name: "TitleIcon",
+  class: "t16zzzei",
+  propsAsIs: !0
+}), e = () => o, I = /* @__PURE__ */ s(e())({
+  name: "Close",
+  class: "c1sur0q2",
+  propsAsIs: !0
+}), f = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "bai9j52",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t1bnt25p",
+  propsAsIs: !1
+}), u = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "dmixjec",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("button")({
+  name: "Button",
+  class: "b1ubkw1q",
+  propsAsIs: !1
+});
+export {
+  f as Body,
+  A as Button,
+  I as Close,
+  u as Description,
+  r as Icon,
+  l as IconContainer,
+  p as NotificationContainer,
+  d as Title,
+  m as TitleIcon
+};

package/lib/ui/gamification/question/inapp/prediction-result/frames/content.d.ts

@@ -0,0 +1,6 @@
+export declare const Content: React.FC<{
+    children: React.ReactNode;
+    answer: string;
+    step: number;
+    state: 'correct' | 'incorrect' | 'pending';
+}>;

package/lib/ui/gamification/question/inapp/prediction-result/frames/content.js

@@ -0,0 +1,57 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
+import { SvgIcon as e } from "../../../../../icons/index.js";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cef8huz",
+  propsAsIs: !1
+}), p = () => e, d = /* @__PURE__ */ s(p())({
+  name: "CheckIcon",
+  class: "c1mo15kk",
+  propsAsIs: !0
+}), l = () => e, m = /* @__PURE__ */ s(l())({
+  name: "PredictionIcon",
+  class: "p16zkqnm",
+  propsAsIs: !0
+}), I = /* @__PURE__ */ s("div")({
+  name: "PredictionIconContainer",
+  class: "pjszi7a",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("div")({
+  name: "BodyContainer",
+  class: "bftbmo3",
+  propsAsIs: !1
+}), h = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "barrbyu",
+  propsAsIs: !1
+}), C = /* @__PURE__ */ s("div")({
+  name: "Subtitle",
+  class: "sz7237i",
+  propsAsIs: !1
+}), A = ({
+  step: c,
+  children: i,
+  answer: r,
+  state: t = "pending"
+}) => /* @__PURE__ */ o(a, {
+  children: [/* @__PURE__ */ n(I, {
+    children: /* @__PURE__ */ n(m, {
+      name: "icon-prediction"
+    })
+  }), /* @__PURE__ */ n(f, {
+    children: /* @__PURE__ */ n(h, {
+      children: i
+    }, c)
+  }), /* @__PURE__ */ n(C, {
+    className: t,
+    children: /* @__PURE__ */ o("div", {
+      children: [/* @__PURE__ */ n(d, {
+        name: "icon-check"
+      }), "Your Pick: ", r]
+    })
+  })]
+});
+export {
+  A as Content
+};

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

@@ -0,0 +1,12 @@
+import { NotificationData } from '@streamlayer/sdk-web-notifications';
+export declare const PredictionResultSteps: React.FC<NotificationData['question'] & {
+    close?: () => void;
+    action?: () => void;
+    setStep?: (step: number) => void;
+    hiding?: boolean;
+    step: number;
+}>;
+export declare const PredictionResult: React.FC<NotificationData['question'] & {
+    close?: () => void;
+    action?: () => void;
+}>;

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

@@ -0,0 +1,59 @@
+import { jsx as r, jsxs as S } from "react/jsx-runtime";
+import { useEffect as k, useState as x } from "react";
+import { Content as T } from "./content.js";
+import { Lines as g } from "./lines.js";
+import { Step1 as j } from "./step1.js";
+import { Step2 as P } from "./step2.js";
+import { CorrectStep as R, InCorrectStep as a } from "./step3.js";
+import { Step4 as y } from "./step4.js";
+import { Container as h, Body as C } from "./styles.js";
+const c = {
+  1: 3e3,
+  2: 4e3,
+  3: 4e3,
+  4: 4e3
+}, B = ({ close: m, action: o, setStep: f, votedAnswer: n, correct: t, correctAnswerTitle: u, questionTitle: e, step: i }) => {
+  if (k(() => {
+    if (f) {
+      const p = setTimeout(() => {
+        c[i + 1] && (t || i < 3) ? f(i + 1) : m == null || m();
+      }, c[i]);
+      return () => {
+        p && clearTimeout(p);
+      };
+    }
+    return () => {
+    };
+  }, [f, i, m, t]), i === 1)
+    return /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(j, {}) }) });
+  let l = "pending";
+  return (i === 3 || i === 4) && (l = t ? "correct" : "incorrect"), /* @__PURE__ */ r(h, { onClick: () => o == null ? void 0 : o(), children: /* @__PURE__ */ S(C, { children: [
+    i !== 1 && /* @__PURE__ */ r(g, {}, i),
+    /* @__PURE__ */ S(T, { state: l, step: i, answer: (n == null ? void 0 : n.title) || "unknown", children: [
+      i === 2 && /* @__PURE__ */ r(P, { title: e || "unknown" }),
+      i === 3 && t && /* @__PURE__ */ r(R, {}),
+      i === 3 && !t && /* @__PURE__ */ r(a, { title: u || "unknown" }),
+      i === 4 && /* @__PURE__ */ r(y, { points: (n == null ? void 0 : n.points) || 0 })
+    ] })
+  ] }) });
+}, G = ({ close: m, action: o, votedAnswer: f, correct: n, correctAnswerTitle: t, questionTitle: u }) => {
+  const [e, i] = x(1);
+  return /* @__PURE__ */ r(
+    B,
+    {
+      close: m,
+      action: o,
+      votedAnswer: f,
+      correct: n,
+      correctAnswerTitle: t,
+      questionTitle: u,
+      setStep: i,
+      step: e,
+      title: ""
+    }
+  );
+};
+export {
+  G as PredictionResult,
+  B as PredictionResultSteps
+};

package/lib/ui/gamification/question/inapp/prediction-result/frames/lines.d.ts

@@ -0,0 +1 @@
+export declare const Lines: React.FC;

package/lib/ui/gamification/question/inapp/prediction-result/frames/lines.js

@@ -0,0 +1,34 @@
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import { styled as e } from "@linaria/react";
+const i = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "ckyzolp",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ e("div")({
+  name: "Line",
+  class: "l16t1zr7",
+  propsAsIs: !1
+}), r = () => n, t = /* @__PURE__ */ e(r())({
+  name: "Line1",
+  class: "le78kvg",
+  propsAsIs: !0
+}), c = () => n, l = /* @__PURE__ */ e(c())({
+  name: "Line2",
+  class: "l1o7966d",
+  propsAsIs: !0
+}), p = () => n, a = /* @__PURE__ */ e(p())({
+  name: "Line3",
+  class: "lu9lyxq",
+  propsAsIs: !0
+}), L = () => /* @__PURE__ */ o(i, {
+  children: [/* @__PURE__ */ s(t, {
+    children: /* @__PURE__ */ s("div", {})
+  }), /* @__PURE__ */ s(l, {
+    children: /* @__PURE__ */ s("div", {})
+  }), /* @__PURE__ */ s(a, {
+    children: /* @__PURE__ */ s("div", {})
+  })]
+});
+export {
+  L as Lines
+};

package/lib/ui/gamification/question/inapp/prediction-result/frames/step1.d.ts

@@ -0,0 +1 @@
+export declare const Step1: () => import("react/jsx-runtime").JSX.Element;

package/lib/ui/gamification/question/inapp/prediction-result/frames/step1.js

@@ -0,0 +1,19 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
+import { SvgIcon as e } from "../../../../../icons/index.js";
+const n = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c10jy6zf",
+  propsAsIs: !1
+}), r = () => e, t = /* @__PURE__ */ s(r())({
+  name: "CheckIcon",
+  class: "c1c7scay",
+  propsAsIs: !0
+}), m = () => /* @__PURE__ */ c(n, {
+  children: [/* @__PURE__ */ o(t, {
+    name: "icon-check"
+  }), " Prediction results are in!"]
+});
+export {
+  m as Step1
+};

package/lib/ui/gamification/question/inapp/prediction-result/frames/step2.d.ts

@@ -0,0 +1,3 @@
+export declare const Step2: React.FC<{
+    title: string;
+}>;

package/lib/ui/gamification/question/inapp/prediction-result/frames/step2.js

@@ -0,0 +1,26 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
+const o = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cf6k2yy",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "Caption",
+  class: "c1c8xjus",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t1d1uekn",
+  propsAsIs: !1
+}), l = ({
+  title: n
+}) => /* @__PURE__ */ t(o, {
+  children: [/* @__PURE__ */ e(r, {
+    children: "Results for"
+  }), /* @__PURE__ */ e(i, {
+    children: n
+  })]
+});
+export {
+  l as Step2
+};

package/lib/ui/gamification/question/inapp/prediction-result/frames/step3.d.ts

@@ -0,0 +1,4 @@
+export declare const CorrectStep: React.FC;
+export declare const InCorrectStep: React.FC<{
+    title: string;
+}>;