@streamlayer/react-ui 0.96.3 → 0.97.1

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/index.js

@@ -1,26 +1,27 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { InvitingUser as s } from "../../invitingUser/index.js";
-import { Skeleton as p } from "../../../../skeleton/index.js";
-import { Container as h, Content as a, Graphic as l, Headline as f, InvitingUserWrap as x, StepsContainer as g, StepIndicator as y } from "./styles.js";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { InvitingUser as h } from "../../invitingUser/index.js";
+import { Skeleton as d } from "../../../../skeleton/index.js";
+import { Container as l, Content as p, Graphic as s, GraphicImage as f, Headline as I, InvitingUserWrap as g, StepsContainer as v, StepIndicator as x } from "./styles.js";
 import "../../../../../utils/common.js";
 import "../../invitingUser/styles.js";
 import "@linaria/react";
 import "../../../../skeleton/styles.js";
-const G = ({
-  loading: i,
-  graphicSrc: c,
-  headline: t,
-  stepsCount: d,
-  currentStep: n,
-  inviterName: e
-}) => /* @__PURE__ */ m(h, { children: [
-  /* @__PURE__ */ m(a, { "data-centered": n === 0, children: [
-    /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(p, { loading: i, style: { width: "80px", height: "80px" }, children: /* @__PURE__ */ r("img", { src: c, alt: t }) }) }),
-    t && /* @__PURE__ */ r(p, { loading: i, children: /* @__PURE__ */ r(f, { children: t }) })
-  ] }),
-  e && n === 0 && /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(s, { name: e }) }),
-  /* @__PURE__ */ r(g, { style: i ? { visibility: "hidden" } : {}, children: Array.from({ length: d }).map((I, o) => /* @__PURE__ */ r(y, { "data-active": n === o }, o)) })
-] });
+const A = ({
+  loading: e,
+  steps: o,
+  currentStep: r,
+  inviterName: t
+}) => {
+  const { headline: a } = o[r];
+  return /* @__PURE__ */ c(l, { children: [
+    /* @__PURE__ */ c(p, { "data-welcome-screen": r === 0, children: [
+      /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(d, { loading: e, children: o.map(({ graphicSrc: m }, n) => /* @__PURE__ */ i(f, { src: m, "data-active": r === n })) }) }),
+      a && /* @__PURE__ */ i(d, { loading: e, children: /* @__PURE__ */ i(I, { children: a }) })
+    ] }),
+    t && r === 0 && /* @__PURE__ */ i(g, { children: /* @__PURE__ */ i(h, { name: t }) }),
+    /* @__PURE__ */ i(v, { style: e ? { visibility: "hidden" } : {}, children: Array.from({ length: o.length }).map((m, n) => /* @__PURE__ */ i(x, { "data-active": r === n }, n)) })
+  ] });
+};
 export {
-  G as OnboardingInstructions
+  A as OnboardingInstructions
 };

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/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 Graphic: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const GraphicImage: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const Headline: 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 StepsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/styles.js

@@ -1,5 +1,5 @@
 import { styled as s } from "@linaria/react";
-const a = /* @__PURE__ */ s("div")({
+const n = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1htq1lb",
   propsAsIs: !1
@@ -7,33 +7,38 @@ const a = /* @__PURE__ */ s("div")({
   name: "Graphic",
   class: "gjyzpp7",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("img")({
+  name: "GraphicImage",
+  class: "g16mldgz",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
   name: "Headline",
-  class: "h16mldgz",
+  class: "h69js65",
   propsAsIs: !1
 }), t = /* @__PURE__ */ s("div")({
   name: "Content",
-  class: "c69js65",
+  class: "cmm7qmo",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "StepsContainer",
-  class: "smm7qmo",
+  class: "s17knuw2",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("span")({
+}), r = /* @__PURE__ */ s("span")({
   name: "StepIndicator",
-  class: "s17knuw2",
+  class: "s1b74psg",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), c = /* @__PURE__ */ s("div")({
   name: "InvitingUserWrap",
-  class: "i1b74psg",
+  class: "i1y99ug7",
   propsAsIs: !1
 });
 export {
-  a as Container,
+  n as Container,
   t as Content,
   e as Graphic,
-  p as Headline,
-  r as InvitingUserWrap,
-  i as StepIndicator,
-  o as StepsContainer
+  p as GraphicImage,
+  o as Headline,
+  c as InvitingUserWrap,
+  r as StepIndicator,
+  i as StepsContainer
 };

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

@@ -1,13 +1,10 @@
 /// <reference types="react" />
-import { HeaderNodeRef, type AppNodeRef } from '../../../../app/masters';
 import { icons } from '../../../../icons';
 export type OnboardingInviteCardProps = {
-    renderToNode: AppNodeRef | HeaderNodeRef;
     inviteLink?: string;
     inviteCardTitle?: string;
     inviteCardSubtext?: string;
     primaryColor?: string;
-    socialLinks?: InviteCardSocialLink[];
     className?: string;
 };
 export type InviteCardSocialLink = {

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

@@ -3,15 +3,16 @@ 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 "../../../video-player/index.js";
+import "@linaria/core";
 import "react";
 import "../../../icons/index.js";
 import "@linaria/react";
 import "../../../video-player/styles.js";
 import "../../../questions/insight/styles.js";
-const d = ({ openInsight: r, questionId: t, ...o }) => /* @__PURE__ */ m(p, { children: [
+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 {
-  d as Insight
+  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,17 +1,20 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Question as b } from "../index.js";
+import { QuestionSkeleton as l, Question as f } from "../index.js";
 import { Insight as c } from "../insight/index.js";
-import { Twitter as f } from "../twitter/index.js";
-import { pauseAllVideos as l } from "../../../video-player/index.js";
-import { QuestionsContainer as d } from "./styles.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 "../../../questions/insight/styles.js";
+import "@linaria/core";
 import "../../../video-player/styles.js";
 import "../insight/styles.js";
 import "../../../questions/twitter/index.js";
@@ -22,23 +25,23 @@ import "../../../questions/twitter/styles.js";
 import "../twitter/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
-const K = ({ questions: r, openQuestion: p, controlVideo: m }) => {
-  const o = (t) => {
-    l(), p(t);
+const N = ({ questions: r, openQuestion: b, controlVideo: n }) => {
+  const m = (t) => {
+    h(), b(t, { openedFrom: "list" });
   };
-  return /* @__PURE__ */ e(d, { children: r == null ? void 0 : r.map((t) => {
-    var n, u, s;
-    if (t.type === "question" && ((n = t.attributes) == null ? void 0 : n.attributes.case) === "question") {
+  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(b, { openQuestion: o, ...i }, i.questionId);
+      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: o,
-          controlVideo: m,
+          openInsight: m,
+          controlVideo: n,
           ...i
         },
         i.questionId
@@ -47,10 +50,10 @@ const K = ({ questions: r, openQuestion: p, controlVideo: m }) => {
     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(
-        f,
+        d,
         {
-          openTweet: o,
-          controlVideo: m,
+          openTweet: m,
+          controlVideo: n,
           ...i,
           tweetId: a
         },
@@ -58,8 +61,8 @@ const K = ({ questions: r, openQuestion: p, controlVideo: m }) => {
       );
     }
     return null;
-  }) });
+  }) }) : /* @__PURE__ */ e(p, { children: Array.from({ length: 5 }).map((t, o) => /* @__PURE__ */ e(l, {}, o)) });
 };
 export {
-  K as QuestionList
+  N as QuestionList
 };

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

@@ -5,6 +5,7 @@ import { Insight as f } from "./insight/index.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,7 +17,7 @@ import "../../../../utils/common.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "./tweet/styles.js";
-const J = ({
+const K = ({
   close: e,
   action: t,
   controlVideo: l,
@@ -45,5 +46,5 @@ const J = ({
   ] }) : 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
 };