@streamlayer/react-ui 0.96.2 → 0.97.0

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/index.js

@@ -1,43 +1,48 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import { useClipboardCopy as I } from "../../../../app/useClipboardCopy.js";
-import { SvgIcon as f } from "../../../../icons/index.js";
-import { Container as g, IconContainer as k, InviteGameIcon as b, Content as s, Heading as y, Subtext as L, LinkContainer as S, LinkInfo as u, LinkTitle as x, LinkAddress as v, LinkIcon as j, SocialLinksContainer as A, SocialLink as G, SocialLinkLabel as H } from "./styles.js";
-import "react";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { useAnalyticsHandle as d } from "../../../../../hooks/analytics.js";
+import { useRef as s } from "react";
+import { InvitationFrom as f } from "@streamlayer/sdk-web-types";
+import { useClipboardCopy as h } from "../../../../app/useClipboardCopy.js";
+import { Container as y, IconContainer as C, InviteGameIcon as I, Content as k, Heading as u, Subtext as b, LinkContainer as g, LinkInfo as v, LinkTitle as x, LinkAddress as A, LinkIcon as L } from "./styles.js";
+import "lodash.throttle";
+import "@streamlayer/sdk-web-interfaces";
+import "../../../../theme/constants.js";
 import "../../../../../index-jRXrW6ie.js";
 import "../../../../../index-uEuzH3jr.js";
 import "../../../copyNotification/index.js";
-import "../../../copyNotification/styles.js";
+import "../../../../icons/index.js";
 import "@linaria/react";
-const F = ({
-  renderToNode: t,
-  inviteLink: r,
-  socialLinks: i,
-  inviteCardTitle: c,
-  inviteCardSubtext: l,
+import "../../../copyNotification/styles.js";
+const B = ({
+  inviteLink: i,
+  inviteCardTitle: t,
+  inviteCardSubtext: e,
   primaryColor: m,
-  className: a
+  className: c
 }) => {
-  const [d, p] = I(t);
-  return /* @__PURE__ */ o(g, { className: a, children: [
-    /* @__PURE__ */ n(k, { style: { backgroundColor: m }, children: /* @__PURE__ */ n(b, { name: "invite-game-icon" }) }),
-    /* @__PURE__ */ o(s, { children: [
-      /* @__PURE__ */ n(y, { children: c || "" }),
-      /* @__PURE__ */ n(L, { children: l || "" })
+  const r = s(null), [l, p] = h(r), [a] = d({
+    type: "invitation",
+    action: "sent",
+    payload: {
+      from: f.MENU
+    }
+  });
+  return /* @__PURE__ */ n(y, { className: c, children: [
+    /* @__PURE__ */ o(C, { style: { backgroundColor: m }, children: /* @__PURE__ */ o(I, { name: "invite-game-icon" }) }),
+    /* @__PURE__ */ n(k, { children: [
+      /* @__PURE__ */ o(u, { children: t || "" }),
+      /* @__PURE__ */ o(b, { children: e || "" })
     ] }),
-    r && /* @__PURE__ */ o(S, { onClick: () => d(r), children: [
-      /* @__PURE__ */ o(u, { children: [
-        /* @__PURE__ */ n(x, { children: "Invite link" }),
-        /* @__PURE__ */ n(v, { children: r })
+    i && /* @__PURE__ */ n(g, { ref: r, onClick: a(() => l(i)), children: [
+      /* @__PURE__ */ n(v, { children: [
+        /* @__PURE__ */ o(x, { children: "Invite link" }),
+        /* @__PURE__ */ o(A, { children: i })
       ] }),
-      /* @__PURE__ */ n(j, { name: "icon-copy" })
+      /* @__PURE__ */ o(L, { name: "icon-copy" })
     ] }),
-    i && i.length > 0 && /* @__PURE__ */ n(A, { children: i.map(({ icon: h, link: e, label: C }) => /* @__PURE__ */ o(G, { href: e, target: "_blank", children: [
-      /* @__PURE__ */ n(f, { name: h }),
-      /* @__PURE__ */ n(H, { children: C })
-    ] }, e)) }),
     p
   ] });
 };
 export {
-  F as OnboardingInviteCard
+  B as OnboardingInviteCard
 };

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/styles.d.ts

@@ -10,6 +10,3 @@ export declare const LinkInfo: import("@linaria/react").StyledComponent<import("
 export declare const LinkTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const LinkAddress: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const LinkIcon: any;
-export declare const SocialLinksContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const SocialLink: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
-export declare const SocialLinkLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/styles.js

@@ -2,15 +2,15 @@ import { styled as s } from "@linaria/react";
 import { SvgIcon as n } from "../../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const l = /* @__PURE__ */ s("div")({
+const p = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1itm4k7",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "IconContainer",
   class: "i1w4fsni",
   propsAsIs: !1
-}), a = () => n, r = /* @__PURE__ */ s(a())({
+}), o = () => n, r = /* @__PURE__ */ s(o())({
   name: "InviteGameIcon",
   class: "i19m85r1",
   propsAsIs: !0
@@ -22,56 +22,41 @@ const l = /* @__PURE__ */ s("div")({
   name: "Heading",
   class: "h1amdqtv",
   propsAsIs: !1
-}), k = /* @__PURE__ */ s("div")({
+}), d = /* @__PURE__ */ s("div")({
   name: "Subtext",
   class: "s1lhlj9j",
   propsAsIs: !1
-}), L = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "LinkContainer",
   class: "l1wot35e",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), v = /* @__PURE__ */ s("div")({
   name: "LinkInfo",
   class: "l1jdw39q",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("span")({
+}), A = /* @__PURE__ */ s("span")({
   name: "LinkTitle",
   class: "l1cr5mk",
   propsAsIs: !1
-}), A = /* @__PURE__ */ s("span")({
+}), k = /* @__PURE__ */ s("span")({
   name: "LinkAddress",
   class: "lvi87q4",
   propsAsIs: !1
-}), o = () => n, v = /* @__PURE__ */ s(o())({
+}), e = () => n, L = /* @__PURE__ */ s(e())({
   name: "LinkIcon",
   class: "l1pqlvw3",
   propsAsIs: !0
-}), C = /* @__PURE__ */ s("div")({
-  name: "SocialLinksContainer",
-  class: "s1n7kzeh",
-  propsAsIs: !1
-}), S = /* @__PURE__ */ s("a")({
-  name: "SocialLink",
-  class: "s2m9o9y",
-  propsAsIs: !1
-}), b = /* @__PURE__ */ s("span")({
-  name: "SocialLinkLabel",
-  class: "sewjbbn",
-  propsAsIs: !1
 });
 export {
-  l as Container,
+  p as Container,
   m as Content,
   I as Heading,
-  p as IconContainer,
+  l as IconContainer,
   r as InviteGameIcon,
-  A as LinkAddress,
-  L as LinkContainer,
-  v as LinkIcon,
-  d as LinkInfo,
-  f as LinkTitle,
-  S as SocialLink,
-  b as SocialLinkLabel,
-  C as SocialLinksContainer,
-  k as Subtext
+  k as LinkAddress,
+  f as LinkContainer,
+  L as LinkIcon,
+  v as LinkInfo,
+  A as LinkTitle,
+  d as Subtext
 };

package/lib/ui/gamification/points/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 type PointsProps = {
     points?: number;
+    onClick?: () => void;
 };
 export declare const Points: React.FC<PointsProps>;
 export {};

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

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

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { type PickHistory } from '@streamlayer/sdk-web-types';
+export declare const QuestionSkeleton: React.FC;
 export declare const Question: React.FC<{
     openQuestion?: (questionId: string) => void;
 } & PickHistory>;

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

@@ -1,46 +1,53 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { PickHistoryStatus as i, QuestionType as a, QuestionStatus as I } from "@streamlayer/sdk-web-types";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { PickHistoryStatus as e, QuestionType as a, QuestionStatus as y } from "@streamlayer/sdk-web-types";
 import { QuestionTypeData as Q } from "../constants.js";
-import { QuestionActionIcon as e, QuestionItem as h, QuestionContent as y, QuestionCaption as A, QuestionTypeIcon as T, QuestionTypeLabel as f, QuestionBody as L, QuestionAction as P, PlayButton as S } from "./styles.js";
+import { Skeleton as l } from "../../skeleton/index.js";
+import { QuestionActionIcon as i, SkeletonContainer as I, SkeletonButton as S, QuestionItem as k, QuestionContent as f, QuestionCaption as A, QuestionTypeIcon as T, QuestionTypeLabel as L, QuestionBody as P, QuestionAction as w, PlayButton as x } from "./styles.js";
+import "../../skeleton/styles.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-const x = {
-  [i.LOST]: /* @__PURE__ */ t(e, { name: "incorrectVoted" }),
-  [i.WON]: /* @__PURE__ */ t(e, { name: "icon-check" }),
-  [i.UNSET]: /* @__PURE__ */ t(e, { name: "icon-arrow" }),
-  [i.DNP]: /* @__PURE__ */ t(e, { name: "icon-arrow" })
-}, R = ({
+const C = {
+  [e.LOST]: /* @__PURE__ */ t(i, { name: "incorrectVoted" }),
+  [e.WON]: /* @__PURE__ */ t(i, { name: "icon-check" }),
+  [e.UNSET]: /* @__PURE__ */ t(i, { name: "icon-arrow" }),
+  [e.DNP]: /* @__PURE__ */ t(i, { name: "icon-arrow" })
+}, j = () => /* @__PURE__ */ o(I, { children: [
+  /* @__PURE__ */ t(l, { loading: !0, style: { width: "35%" } }),
+  /* @__PURE__ */ t(l, { loading: !0, style: { width: "70%" } }),
+  /* @__PURE__ */ t(S, {})
+] }), v = ({
   questionId: s,
-  questionType: o,
+  questionType: n,
   questionStatus: m,
-  subject: l,
-  openForVoting: u,
+  subject: u,
+  openForVoting: d,
   openQuestion: r,
-  status: d
+  status: p
 }) => {
-  const c = Q[o], p = x[d];
-  return c ? /* @__PURE__ */ n(h, { onClick: () => r == null ? void 0 : r(s), children: [
-    /* @__PURE__ */ n(y, { children: [
-      /* @__PURE__ */ n(A, { children: [
+  const c = Q[n], h = C[p];
+  return c ? /* @__PURE__ */ o(k, { onClick: () => r == null ? void 0 : r(s), children: [
+    /* @__PURE__ */ o(f, { children: [
+      /* @__PURE__ */ o(A, { children: [
         /* @__PURE__ */ t(
           T,
           {
-            "data-type-trivia": o === a.TRIVIA,
-            "data-type-poll": o === a.POLL,
+            "data-type-trivia": n === a.TRIVIA,
+            "data-type-poll": n === a.POLL,
             name: c.iconName
           }
         ),
-        /* @__PURE__ */ n(f, { children: [
+        /* @__PURE__ */ o(L, { children: [
           c.label,
-          o === a.TRIVIA && m === I.RESOLVED && " • Expired"
+          n === a.TRIVIA && m === y.RESOLVED && " • Expired"
         ] })
       ] }),
-      /* @__PURE__ */ t(L, { children: l || "" })
+      /* @__PURE__ */ t(P, { children: u || "" })
     ] }),
-    /* @__PURE__ */ t(P, { children: u ? /* @__PURE__ */ t(S, { children: "Play" }) : p })
+    /* @__PURE__ */ t(w, { children: d ? /* @__PURE__ */ t(x, { children: "Play" }) : h })
   ] }) : null;
 };
 export {
-  R as Question
+  v as Question,
+  j as QuestionSkeleton
 };

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

@@ -1,22 +1,18 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { InsightContent as p } from "../../../questions/insight/index.js";
-import { pauseAllVideos as l } from "../../../video-player/index.js";
-import { Container as n, ActionBtn as e } from "./styles.js";
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { InsightContent as n } from "../../../questions/insight/index.js";
+import { Container as p, ActionBtn as c } from "./styles.js";
 import "@streamlayer/sdk-web-types";
-import "../../../questions/insight/styles.js";
-import "@linaria/react";
+import "../../../video-player/index.js";
+import "@linaria/core";
 import "react";
 import "../../../icons/index.js";
+import "@linaria/react";
 import "../../../video-player/styles.js";
-const k = ({ openInsight: r, questionId: o, ...i }) => {
-  const m = () => {
-    l(), r == null || r(o);
-  };
-  return /* @__PURE__ */ c(n, { children: [
-    /* @__PURE__ */ t(p, { questionId: o, ...i }),
-    r && /* @__PURE__ */ t(e, { onClick: m, children: "View Insight" })
-  ] });
-};
+import "../../../questions/insight/styles.js";
+const k = ({ openInsight: r, questionId: t, ...o }) => /* @__PURE__ */ m(p, { children: [
+  /* @__PURE__ */ i(n, { questionId: t, ...o }),
+  r && /* @__PURE__ */ i(c, { onClick: () => r(t), children: "View Insight" })
+] });
 export {
   k as Insight
 };

package/lib/ui/gamification/question/list/index.d.ts

@@ -4,7 +4,9 @@ import { VideoPlayerProps } from '../../../video-player';
 type FeedItem = Exclude<Awaited<ReturnType<Exclude<Gamification['feedList'], undefined>['getValue']>>, undefined>;
 interface QuestionListProps {
     questions: FeedItem;
-    openQuestion: (questionId: string) => void;
+    openQuestion: (questionId: string, options: {
+        openedFrom: 'list';
+    }) => void;
     controlVideo: VideoPlayerProps['controlVideo'];
 }
 export declare const QuestionList: React.FC<QuestionListProps>;

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

@@ -1,18 +1,21 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Question as b } from "../index.js";
-import { Insight as p } from "../insight/index.js";
-import { Twitter as c } from "../twitter/index.js";
-import { QuestionsContainer as f } from "./styles.js";
+import { jsx as e } from "react/jsx-runtime";
+import { QuestionSkeleton as l, Question as f } from "../index.js";
+import { Insight as c } from "../insight/index.js";
+import { Twitter as d } from "../twitter/index.js";
+import { pauseAllVideos as h } from "../../../video-player/index.js";
+import { QuestionsContainer as p } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "../../constants.js";
-import "../styles.js";
+import "../../../skeleton/index.js";
+import "../../../skeleton/styles.js";
 import "@linaria/react";
+import "../styles.js";
 import "../../../icons/index.js";
 import "react";
 import "../../../questions/insight/index.js";
-import "../../../video-player/index.js";
-import "../../../video-player/styles.js";
 import "../../../questions/insight/styles.js";
+import "@linaria/core";
+import "../../../video-player/styles.js";
 import "../insight/styles.js";
 import "../../../questions/twitter/index.js";
 import "../../../questions/twitter/account/index.js";
@@ -22,31 +25,44 @@ import "../../../questions/twitter/styles.js";
 import "../twitter/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
-const J = ({ questions: e, openQuestion: m, controlVideo: o }) => /* @__PURE__ */ r(f, { children: e == null ? void 0 : e.map((t) => {
-  var u, a, n;
-  if (t.type === "question" && ((u = t.attributes) == null ? void 0 : u.attributes.case) === "question") {
-    const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ r(b, { openQuestion: m, ...i }, i.questionId);
-  }
-  if (t.type === "insight" && ((a = t.attributes) == null ? void 0 : a.attributes.case) === "insight") {
-    const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ r(p, { openInsight: m, controlVideo: o, ...i }, i.questionId);
-  }
-  if (t.type === "tweet" && ((n = t.attributes) == null ? void 0 : n.attributes.case) === "tweet") {
-    const i = t.attributes.attributes.value, s = t.attributes.id;
-    return /* @__PURE__ */ r(
-      c,
-      {
-        openTweet: m,
-        controlVideo: o,
-        ...i,
-        tweetId: s
-      },
-      s
-    );
-  }
-  return null;
-}) });
+const N = ({ questions: r, openQuestion: b, controlVideo: n }) => {
+  const m = (t) => {
+    h(), b(t, { openedFrom: "list" });
+  };
+  return r ? /* @__PURE__ */ e(p, { children: r == null ? void 0 : r.map((t) => {
+    var o, u, s;
+    if (t.type === "question" && ((o = t.attributes) == null ? void 0 : o.attributes.case) === "question") {
+      const i = t.attributes.attributes.value;
+      return /* @__PURE__ */ e(f, { openQuestion: m, ...i }, i.questionId);
+    }
+    if (t.type === "insight" && ((u = t.attributes) == null ? void 0 : u.attributes.case) === "insight") {
+      const i = t.attributes.attributes.value;
+      return /* @__PURE__ */ e(
+        c,
+        {
+          openInsight: m,
+          controlVideo: n,
+          ...i
+        },
+        i.questionId
+      );
+    }
+    if (t.type === "tweet" && ((s = t.attributes) == null ? void 0 : s.attributes.case) === "tweet") {
+      const i = t.attributes.attributes.value, a = t.attributes.id;
+      return /* @__PURE__ */ e(
+        d,
+        {
+          openTweet: m,
+          controlVideo: n,
+          ...i,
+          tweetId: a
+        },
+        a
+      );
+    }
+    return null;
+  }) }) : /* @__PURE__ */ e(p, { children: Array.from({ length: 5 }).map((t, o) => /* @__PURE__ */ e(l, {}, o)) });
+};
 export {
-  J as QuestionList
+  N as QuestionList
 };

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

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

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

@@ -1,20 +1,21 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { QuestionImages as p } from "@streamlayer/sdk-web-types";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { QuestionImages as c } from "@streamlayer/sdk-web-types";
 import { VideoPlayer as e } from "../../../../video-player/index.js";
 import { InsightContainer as h, ImageContainer as u, Image as a, InsightContent as I, Title as g, Description as f, ActionBtn as C } from "./styles.js";
+import "@linaria/core";
 import "react";
 import "../../../../icons/index.js";
 import "@linaria/react";
 import "../../../../video-player/styles.js";
-const y = ({ video: r, image: n, imageMode: s, heading: i, body: o, action: l, controlVideo: c }) => /* @__PURE__ */ m(h, { children: [
-  (r == null ? void 0 : r.url) && /* @__PURE__ */ t(e, { source: r.url, poster: r.thumbnailUrl, controlVideo: c }),
-  n && !(r != null && r.url) && /* @__PURE__ */ t(u, { "data-rounded": s === p.ROUNDED, children: /* @__PURE__ */ t(a, { src: n, alt: i }) }),
-  /* @__PURE__ */ m(I, { children: [
+const A = ({ video: r, image: n, imageMode: o, heading: i, body: s, action: m, controlVideo: p }) => /* @__PURE__ */ l(h, { children: [
+  (r == null ? void 0 : r.url) && /* @__PURE__ */ t(e, { source: r.url, poster: r.thumbnailUrl, controlVideo: p }),
+  n && !(r != null && r.url) && /* @__PURE__ */ t(u, { "data-rounded": o === c.ROUNDED, children: /* @__PURE__ */ t(a, { src: n, alt: i }) }),
+  /* @__PURE__ */ l(I, { children: [
     /* @__PURE__ */ t(g, { children: i }),
-    /* @__PURE__ */ t(f, { children: o }),
-    l && /* @__PURE__ */ t(C, { onClick: l, children: "View Insight" })
+    /* @__PURE__ */ t(f, { children: s }),
+    m && /* @__PURE__ */ t(C, { onClick: m, children: "View Insight" })
   ] })
 ] });
 export {
-  y as Insight
+  A as Insight
 };

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;