@streamlayer/react-ui 0.52.1 → 0.53.0

package/lib/index.js

@@ -43,6 +43,8 @@ import "./ui/button/styles.js";
 import "./ui/gamification/constants.js";
 import "./ui/gamification/question/styles.js";
 import "./ui/icons/index.js";
+import "./ui/gamification/insight/index.js";
+import "./ui/gamification/insight/styles.js";
 import "./ui/gamification/question/list/styles.js";
 import "./utils/common.js";
 import "./ui/gamification/user-statistics/components/rank/index.js";
@@ -74,7 +76,6 @@ import "./ui/demo/Gamification.js";
 import "./ui/demo/components/UserSummary.js";
 import "./ui/demo/components/QuestionsList.js";
 import "./ui/demo/components/Question.js";
-import "./ui/gamification/insight/styles.js";
 import "./ui/gamification/insight-list/styles.js";
 import "./ui/gamification/detailed-insight/styles.js";
 import "./ui/demo/components/Leaderboard.js";
@@ -88,7 +89,6 @@ import "./ui/demo/styles.js";
 import "./ui/demo/Highlights.js";
 import "./ui/demo/components/Insights.js";
 import "./ui/gamification/insight-list/index.js";
-import "./ui/gamification/insight/index.js";
 import "./ui/demo/components/Insight.js";
 import "./ui/gamification/detailed-insight/index.js";
 import "./ui/demo/Login.js";

package/lib/ui/app/Features/Gamification/Question.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
-import { GamificationBackground } from '@streamlayer/feature-gamification';
+import { Gamification } from '@streamlayer/feature-gamification';
 export declare const Question: React.FC<{
-    openedQuestion: Awaited<ReturnType<GamificationBackground['openedQuestion']['getValue']>>;
-    closeQuestion: () => void;
-    vote: (questionId: string, answerId: string) => void;
+    gamification: Gamification;
 }>;

package/lib/ui/app/Features/Gamification/Question.js

@@ -1,9 +1,10 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { styled as l } from "@linaria/react";
-import { QuestionType as c } from "@streamlayer/sdk-web-types";
-import { VoteHeader as f } from "../../../gamification/detail/header/index.js";
-import { Sponsor as s } from "../../../gamification/detail/sponsor/index.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { styled as p } from "@linaria/react";
+import { useStore as n } from "@nanostores/react";
+import { QuestionType as u } from "@streamlayer/sdk-web-types";
+import { VoteHeader as l } from "../../../gamification/detail/header/index.js";
 import { Vote as a } from "../../../gamification/vote/index.js";
+import { InsightDetails as c } from "../../../gamification/vote/insight-details/index.js";
 import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
 import "../../../icons/index.js";
@@ -19,7 +20,10 @@ import "../../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../gamification/vote/win-bar/styles.js";
-const x = l.div`
+import "../../../video-player/index.js";
+import "../../../video-player/styles.js";
+import "../../../gamification/vote/insight-details/styles.js";
+const d = p.div`
   background: var(--color-transparent-item);
   width: 100%;
   height: 100%;
@@ -28,14 +32,24 @@ const x = l.div`
   align-items: center;
   justify-content: flex-start;
   flex-direction: column;
-`, D = ({ openedQuestion: r, closeQuestion: m, vote: i }) => {
-  var o;
-  return /* @__PURE__ */ p(x, { children: [
-    /* @__PURE__ */ t(f, { close: m, type: (r == null ? void 0 : r.type) || c.UNSET }),
-    r && /* @__PURE__ */ t(a, { vote: i, openedQuestion: r }),
-    /* @__PURE__ */ t(s, { sponsorLogo: (o = r == null ? void 0 : r.sponsorship) == null ? void 0 : o.logo })
+`, f = ({ openedQuestion: t }) => {
+  var r;
+  return ((r = t == null ? void 0 : t.attributes) == null ? void 0 : r.attributes.case) === "insight" ? /* @__PURE__ */ e(c, { ...t.attributes.attributes.value }) : null;
+}, h = ({ extendedQuestion: t, vote: r }) => {
+  const { loading: i, data: o } = t;
+  return !i && o ? /* @__PURE__ */ e(a, { vote: r, openedQuestion: o }) : null;
+}, F = ({ gamification: t }) => {
+  var s;
+  const r = n(t.openedQuestion.$store), i = n(t.openedQuestion.$extendedStore);
+  if (!r)
+    return null;
+  const o = r.type;
+  return /* @__PURE__ */ m(d, { children: [
+    /* @__PURE__ */ e(l, { close: t.closeQuestion, type: ((s = r.attributes) == null ? void 0 : s.type) || u.UNSET }),
+    o === "question" && /* @__PURE__ */ e(h, { vote: t.submitAnswer, extendedQuestion: i }),
+    o !== "question" && /* @__PURE__ */ e(f, { openedQuestion: r })
   ] });
 };
 export {
-  D as Question
+  F as Question
 };

package/lib/ui/app/Features/Gamification/QuestionsList.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
 export declare const QuestionsList: React.FC<{
-    store: ReturnType<Exclude<Gamification['questions'], undefined>['getStore']>;
+    store: ReturnType<Exclude<Gamification['feedList'], undefined>['getStore']>;
     openQuestion: (questionId: string) => void;
 }>;

package/lib/ui/app/Features/Gamification/QuestionsList.js

@@ -1,20 +1,22 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useStore as m } from "@nanostores/react";
 import { QuestionList as p } from "../../../gamification/question/list/index.js";
-import "../../../gamification/question/index.js";
+import "../../../gamification/insight/index.js";
 import "@streamlayer/sdk-web-types";
+import "../../../gamification/insight/styles.js";
+import "@linaria/react";
+import "../../../gamification/question/index.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
-import "@linaria/react";
 import "../../../gamification/constants.js";
 import "../../../gamification/question/styles.js";
 import "../../../icons/index.js";
 import "react";
 import "../../../gamification/question/list/styles.js";
-const l = ({ store: r, openQuestion: i }) => {
+const w = ({ store: r, openQuestion: i }) => {
   const t = m(r);
   return t != null && t.data ? /* @__PURE__ */ o(p, { openQuestion: i, questions: t.data }) : /* @__PURE__ */ o("div", { children: "wait questions..." });
 };
 export {
-  l as QuestionsList
+  w as QuestionsList
 };

package/lib/ui/app/Features/Gamification/Tabs.js

@@ -1,10 +1,10 @@
-import { jsxs as m, Fragment as s, jsx as r } from "react/jsx-runtime";
-import { useState as n } from "react";
-import { SDKWhiteContainer as a, SDKContentContainer as e } from "../../styles.js";
-import { ActivePages as i, Tabs as d } from "../../../gamification/tabs/index.js";
-import { Leaderboard as u } from "./Leaderboard.js";
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { SDKWhiteContainer as n, SDKContentContainer as m } from "../../styles.js";
+import { ActivePages as i, Tabs as a } from "../../../gamification/tabs/index.js";
+import { Leaderboard as d } from "./Leaderboard.js";
 import { QuestionsList as l } from "./QuestionsList.js";
-import { UserSummary as c } from "./UserSummary.js";
+import { UserSummary as u } from "./UserSummary.js";
 import "@linaria/react";
 import "../../../gamification/tabs/styles.js";
 import "@nanostores/react";
@@ -22,8 +22,10 @@ import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
 import "../../../icons/index.js";
 import "../../../gamification/question/list/index.js";
-import "../../../gamification/question/index.js";
+import "../../../gamification/insight/index.js";
 import "@streamlayer/sdk-web-types";
+import "../../../gamification/insight/styles.js";
+import "../../../gamification/question/index.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/constants.js";
@@ -35,17 +37,17 @@ import "../../../gamification/user-statistics/components/rank/styles.js";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const Y = ({ gamification: t }) => {
-  const [o, p] = n(i.HOME);
-  return /* @__PURE__ */ m(s, { children: [
-    /* @__PURE__ */ m(a, { children: [
-      /* @__PURE__ */ r(d, { activePage: o, toggleActivePage: p }),
-      o === i.HOME && /* @__PURE__ */ r(c, { store: t.userSummary.getStore() })
+const Z = ({ gamification: r }) => {
+  const [o, p] = s(i.HOME);
+  return /* @__PURE__ */ e("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ e(n, { children: [
+      /* @__PURE__ */ t(a, { activePage: o, toggleActivePage: p }),
+      o === i.HOME && /* @__PURE__ */ t(u, { store: r.userSummary.getStore() })
     ] }),
-    o === i.HOME && /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(l, { openQuestion: t.openQuestion, store: t.questions.getStore() }) }),
-    o === i.LEADERBOARD && /* @__PURE__ */ r(e, { style: { flex: "1 1 auto" }, children: /* @__PURE__ */ r(u, { leaderboardList: t.leaderboardList }) })
+    o === i.HOME && /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(l, { openQuestion: r.openQuestion, store: r.feedList.getStore() }) }),
+    o === i.LEADERBOARD && /* @__PURE__ */ t(m, { style: { flex: "1 1 auto", paddingTop: 0, paddingBottom: 0 }, children: /* @__PURE__ */ t(d, { leaderboardList: r.leaderboardList }) })
   ] });
 };
 export {
-  Y as Tabs
+  Z as Tabs
 };

package/lib/ui/app/Features/Gamification/index.js

@@ -1,17 +1,16 @@
-import { jsxs as p, Fragment as e, jsx as r } from "react/jsx-runtime";
-import { styled as n } from "@linaria/react";
-import { useStore as s } from "@nanostores/react";
-import { SDKScrollContainer as l } from "../../styles.js";
+import { jsxs as m, Fragment as p, jsx as o } from "react/jsx-runtime";
+import { styled as e } from "@linaria/react";
+import { useStore as n } from "@nanostores/react";
+import { SDKScrollContainer as s } from "../../styles.js";
 import { ShowIn as d } from "../../../show-in/index.js";
-import { Question as u } from "./Question.js";
-import { Tabs as a } from "./Tabs.js";
+import { Question as a } from "./Question.js";
+import { Tabs as u } from "./Tabs.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/detail/header/index.js";
 import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
 import "../../../icons/index.js";
 import "react";
-import "../../../gamification/detail/sponsor/index.js";
 import "../../../gamification/vote/index.js";
 import "../../../gamification/vote/feedback/index.js";
 import "../../../gamification/vote/feedback/styles.js";
@@ -23,6 +22,10 @@ import "../../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../gamification/vote/win-bar/styles.js";
+import "../../../gamification/vote/insight-details/index.js";
+import "../../../video-player/index.js";
+import "../../../video-player/styles.js";
+import "../../../gamification/vote/insight-details/styles.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
@@ -40,6 +43,8 @@ import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
 import "./QuestionsList.js";
 import "../../../gamification/question/list/index.js";
+import "../../../gamification/insight/index.js";
+import "../../../gamification/insight/styles.js";
 import "../../../gamification/question/index.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
@@ -52,26 +57,19 @@ import "../../../gamification/user-statistics/components/rank/styles.js";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const c = n(d)`
+const l = e(d)`
   position: absolute;
   inset: 0;
   top: var(--header-height);
   background: var(--color-neutrals-white);
   z-index: 3;
-`, fo = ({ gamification: o, className: t }) => {
-  const { loading: m, data: i } = s(o.openedQuestion);
-  return /* @__PURE__ */ p(e, { children: [
-    (m || i) && /* @__PURE__ */ r(c, { className: t, children: /* @__PURE__ */ r(
-      u,
-      {
-        closeQuestion: o.closeQuestion,
-        vote: o.submitAnswer,
-        openedQuestion: i
-      }
-    ) }),
-    /* @__PURE__ */ r(l, { className: t, "data-nav": "true", style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ r(a, { gamification: o }) })
+`, So = ({ gamification: r, className: t }) => {
+  const i = n(r.openedQuestion.$store);
+  return /* @__PURE__ */ m(p, { children: [
+    i && /* @__PURE__ */ o(l, { className: t, children: /* @__PURE__ */ o(a, { gamification: r }) }),
+    /* @__PURE__ */ o(s, { className: t, "data-nav": "true", children: /* @__PURE__ */ o(u, { gamification: r }) })
   ] });
 };
 export {
-  fo as GamificationOverlay
+  So as GamificationOverlay
 };

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

@@ -1,9 +1,8 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useMemo as e } from "react";
-import { FeatureType as m } from "@streamlayer/sdk-web-types";
-import { FeatureProvider as p } from "./FeatureProvider.js";
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import { FeatureType as p } from "@streamlayer/sdk-web-types";
+import { FeatureProvider as e } from "./FeatureProvider.js";
 import { GamificationOverlay as n } from "./Gamification/index.js";
-import { HighlightsOverlay as g } from "./Highlights/index.js";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
 import "@linaria/react";
@@ -14,7 +13,6 @@ import "../../gamification/detail/header/index.js";
 import "../../gamification/constants.js";
 import "../../gamification/detail/header/styles.js";
 import "../../icons/index.js";
-import "../../gamification/detail/sponsor/index.js";
 import "../../gamification/vote/index.js";
 import "../../gamification/vote/feedback/index.js";
 import "../../gamification/vote/feedback/styles.js";
@@ -26,6 +24,10 @@ import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "../../gamification/vote/win-bar/styles.js";
+import "../../gamification/vote/insight-details/index.js";
+import "../../video-player/index.js";
+import "../../video-player/styles.js";
+import "../../gamification/vote/insight-details/styles.js";
 import "./Gamification/Tabs.js";
 import "../../gamification/tabs/index.js";
 import "../../gamification/tabs/styles.js";
@@ -44,6 +46,8 @@ import "../../../utils/common.js";
 import "../../gamification/leaderboard-item/styles.js";
 import "./Gamification/QuestionsList.js";
 import "../../gamification/question/list/index.js";
+import "../../gamification/insight/index.js";
+import "../../gamification/insight/styles.js";
 import "../../gamification/question/index.js";
 import "../../button/index.js";
 import "../../button/styles.js";
@@ -56,19 +60,11 @@ import "../../gamification/user-statistics/components/rank/styles.js";
 import "../../gamification/user-statistics/components/statistic/index.js";
 import "../../gamification/user-statistics/components/statistic/styles.js";
 import "../../gamification/user-statistics/styles.js";
-import "../../demo/components/Insight.js";
-import "../../gamification/detailed-insight/index.js";
-import "../../gamification/detailed-insight/styles.js";
-import "../../demo/components/Insights.js";
-import "../../gamification/insight-list/index.js";
-import "../../gamification/insight/index.js";
-import "../../gamification/insight/styles.js";
-import "../../gamification/insight-list/styles.js";
-const Ir = ({
-  sdk: i,
+const xr = ({
+  sdk: t,
   feature: r,
-  className: t
-}) => e(() => r ? r.featureConfig.get().type === m.GAMES ? /* @__PURE__ */ o(p, { className: t, sdk: i, feature: r, children: /* @__PURE__ */ o(n, { className: t, gamification: r, sdk: i }) }) : r.featureConfig.get().type === m.HIGHLIGHTS ? /* @__PURE__ */ o(p, { className: t, sdk: i, feature: r, children: /* @__PURE__ */ o(g, { className: t, highlights: r, sdk: i }) }) : null : null, [i, r]);
+  className: o
+}) => m(() => r && r.featureConfig.get().type === p.GAMES ? /* @__PURE__ */ i(e, { className: o, sdk: t, feature: r, children: /* @__PURE__ */ i(n, { className: o, gamification: r, sdk: t }) }) : null, [t, r, o]);
 export {
-  Ir as ActiveFeature
+  xr as ActiveFeature
 };

package/lib/ui/app/masters.js

@@ -23,7 +23,6 @@ import "../gamification/detail/header/index.js";
 import "../gamification/constants.js";
 import "../gamification/detail/header/styles.js";
 import "../icons/index.js";
-import "../gamification/detail/sponsor/index.js";
 import "../gamification/vote/index.js";
 import "../gamification/vote/feedback/index.js";
 import "../gamification/vote/feedback/styles.js";
@@ -34,6 +33,10 @@ import "../gamification/vote/win-bar/index.js";
 import "../timer/index.js";
 import "react-countdown-circle-timer";
 import "../gamification/vote/win-bar/styles.js";
+import "../gamification/vote/insight-details/index.js";
+import "../video-player/index.js";
+import "../video-player/styles.js";
+import "../gamification/vote/insight-details/styles.js";
 import "./Features/Gamification/Tabs.js";
 import "../gamification/tabs/index.js";
 import "../gamification/tabs/styles.js";
@@ -52,6 +55,8 @@ import "../../utils/common.js";
 import "../gamification/leaderboard-item/styles.js";
 import "./Features/Gamification/QuestionsList.js";
 import "../gamification/question/list/index.js";
+import "../gamification/insight/index.js";
+import "../gamification/insight/styles.js";
 import "../gamification/question/index.js";
 import "../button/index.js";
 import "../button/styles.js";
@@ -64,15 +69,6 @@ import "../gamification/user-statistics/components/rank/styles.js";
 import "../gamification/user-statistics/components/statistic/index.js";
 import "../gamification/user-statistics/components/statistic/styles.js";
 import "../gamification/user-statistics/styles.js";
-import "./Features/Highlights/index.js";
-import "../demo/components/Insight.js";
-import "../gamification/detailed-insight/index.js";
-import "../gamification/detailed-insight/styles.js";
-import "../demo/components/Insights.js";
-import "../gamification/insight-list/index.js";
-import "../gamification/insight/index.js";
-import "../gamification/insight/styles.js";
-import "../gamification/insight-list/styles.js";
 import "../navigation/masters.js";
 import "../navigation/index.js";
 import "../navigation/button/index.js";
@@ -80,7 +76,7 @@ import "../navigation/button/styles.js";
 const C = ({ sdk: r, className: m }) => {
   const [, p] = b(r);
   return /* @__PURE__ */ i(v, { className: m, feature: p, sdk: r });
-}, Wt = ({ sdk: r, overlays: m, children: p }) => {
+}, Qt = ({ sdk: r, overlays: m, children: p }) => {
   const { sdkEnabled: o, sdkReady: s, activeOverlay: t, activateAndLoadOverlay: d, enableSdk: l, disableSdk: c } = k(r);
   return /* @__PURE__ */ f(y, { children: [
     o && /* @__PURE__ */ i(
@@ -112,5 +108,5 @@ const C = ({ sdk: r, className: m }) => {
   ] });
 };
 export {
-  Wt as MastersApp
+  Qt as MastersApp
 };

package/lib/ui/demo/Gamification.js

@@ -24,6 +24,7 @@ import "../gamification/user-statistics/components/statistic/index.js";
 import "../gamification/user-statistics/components/statistic/styles.js";
 import "../gamification/user-statistics/styles.js";
 import "../gamification/question/list/index.js";
+import "../gamification/insight/index.js";
 import "../gamification/question/index.js";
 import "../button/index.js";
 import "../button/styles.js";
@@ -60,7 +61,7 @@ import "react-window";
 import "react-window-infinite-loader";
 import "../gamification/leaderboard-item/index.js";
 import "../gamification/leaderboard-item/styles.js";
-const st = ({
+const at = ({
   gamification: r,
   sdk: u
 }) => {
@@ -112,5 +113,5 @@ const st = ({
   ] });
 };
 export {
-  st as GamificationComponent
+  at as GamificationComponent
 };

package/lib/ui/demo/Highlights.js

@@ -5,6 +5,8 @@ import { DemoContainer as p } from "./styles.js";
 import "../gamification/user-statistics/components/rank/styles.js";
 import "../gamification/user-statistics/components/statistic/styles.js";
 import "../gamification/user-statistics/styles.js";
+import "@streamlayer/sdk-web-types";
+import "../gamification/insight/styles.js";
 import "../gamification/question/index.js";
 import "../gamification/question/list/styles.js";
 import "./components/Question.js";
@@ -22,7 +24,6 @@ import "react-window";
 import "react-window-infinite-loader";
 import "../gamification/leaderboard-item/styles.js";
 import "@linaria/react";
-import "@streamlayer/sdk-web-types";
 import "../button/index.js";
 import "../button/styles.js";
 import "../gamification/constants.js";
@@ -42,7 +43,6 @@ import "../theme/constants.js";
 import "../gamification/vote/win-bar/styles.js";
 import "../gamification/insight-list/index.js";
 import "../gamification/insight/index.js";
-import "../gamification/insight/styles.js";
 import "../gamification/insight-list/styles.js";
 import "../gamification/detailed-insight/index.js";
 import "../gamification/common-header/index.js";

package/lib/ui/demo/components/QuestionsList.js

@@ -1,20 +1,22 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useStore as m } from "@nanostores/react";
 import { QuestionList as p } from "../../gamification/question/list/index.js";
-import "../../gamification/question/index.js";
+import "../../gamification/insight/index.js";
 import "@streamlayer/sdk-web-types";
+import "../../gamification/insight/styles.js";
+import "@linaria/react";
+import "../../gamification/question/index.js";
 import "../../button/index.js";
 import "../../button/styles.js";
-import "@linaria/react";
 import "../../gamification/constants.js";
 import "../../gamification/question/styles.js";
 import "../../icons/index.js";
 import "react";
 import "../../gamification/question/list/styles.js";
-const l = ({ store: r, openQuestion: i }) => {
+const v = ({ store: r, openQuestion: i }) => {
   const t = m(r);
   return t != null && t.data ? /* @__PURE__ */ o(p, { openQuestion: i, questions: t.data }) : /* @__PURE__ */ o("div", { children: "wait questions..." });
 };
 export {
-  l as QuestionsList
+  v as QuestionsList
 };

package/lib/ui/demo/components/index.js

@@ -16,8 +16,10 @@ import "../../gamification/user-statistics/components/statistic/index.js";
 import "../../gamification/user-statistics/components/statistic/styles.js";
 import "../../gamification/user-statistics/styles.js";
 import "../../gamification/question/list/index.js";
-import "../../gamification/question/index.js";
+import "../../gamification/insight/index.js";
 import "@streamlayer/sdk-web-types";
+import "../../gamification/insight/styles.js";
+import "../../gamification/question/index.js";
 import "../../button/index.js";
 import "../../button/styles.js";
 import "../../gamification/constants.js";
@@ -46,8 +48,6 @@ import "../../gamification/onboarding/components/onboarding-slides/onboarding-ru
 import "../../gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
 import "../../gamification/onboarding/styles.js";
 import "../../gamification/insight-list/index.js";
-import "../../gamification/insight/index.js";
-import "../../gamification/insight/styles.js";
 import "../../gamification/insight-list/styles.js";
 import "../../gamification/detailed-insight/index.js";
 import "../../gamification/common-header/index.js";

package/lib/ui/demo/index.js

@@ -36,6 +36,8 @@ import "../gamification/user-statistics/components/statistic/styles.js";
 import "../gamification/user-statistics/styles.js";
 import "./components/QuestionsList.js";
 import "../gamification/question/list/index.js";
+import "../gamification/insight/index.js";
+import "../gamification/insight/styles.js";
 import "../gamification/question/index.js";
 import "../button/index.js";
 import "../button/styles.js";
@@ -64,7 +66,6 @@ import "../gamification/onboarding/components/onboarding-slides/onboarding-invit
 import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/index.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
 import "../gamification/onboarding/styles.js";
-import "../gamification/insight/styles.js";
 import "../gamification/insight-list/styles.js";
 import "../gamification/common-header/styles.js";
 import "../gamification/detailed-insight/styles.js";
@@ -80,7 +81,6 @@ import "../gamification/leaderboard-item/index.js";
 import "../gamification/leaderboard-item/styles.js";
 import "./components/Insights.js";
 import "../gamification/insight-list/index.js";
-import "../gamification/insight/index.js";
 import "./components/Insight.js";
 import "../gamification/detailed-insight/index.js";
 import "@streamlayer/sdk-web-anonymous-auth";

package/lib/ui/gamification/leaderboard-list/index.js

@@ -1,41 +1,41 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import l from "react-virtualized-auto-sizer";
-import { FixedSizeList as u } from "react-window";
-import I from "react-window-infinite-loader";
-import { LeaderboardItem as f } from "../leaderboard-item/index.js";
+import { FixedSizeList as h } from "react-window";
+import u from "react-window-infinite-loader";
+import { LeaderboardItem as I } from "../leaderboard-item/index.js";
 import "../../../utils/common.js";
 import "../leaderboard-item/styles.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-const x = ({ items: r, openItemDetail: i, fetchMore: m }) => /* @__PURE__ */ o(l, { children: ({ width: d, height: n }) => /* @__PURE__ */ o(
-  I,
+const j = ({ items: r, openItemDetail: i, fetchMore: m }) => /* @__PURE__ */ t(l, { children: ({ width: d, height: n }) => /* @__PURE__ */ t(
+  u,
   {
-    isItemLoaded: (t) => t < r.length,
+    isItemLoaded: (e) => e < r.length,
     itemCount: r.length + 1,
     loadMoreItems: m,
-    children: ({ onItemsRendered: t, ref: p }) => /* @__PURE__ */ o(
-      u,
+    children: ({ onItemsRendered: e, ref: p }) => /* @__PURE__ */ t(
+      h,
       {
-        itemSize: 58,
-        onItemsRendered: t,
+        itemSize: 56,
+        onItemsRendered: e,
         ref: p,
         itemCount: r.length,
         width: d,
         height: n,
-        children: ({ index: e, style: a }) => /* @__PURE__ */ o(
-          f,
+        children: ({ index: o, style: a }) => /* @__PURE__ */ t(
+          I,
           {
-            style: a,
-            ...r[e],
-            openItemDetail: () => i(r[e].userId)
+            style: { ...a, maxHeight: 48 },
+            ...r[o],
+            openItemDetail: () => i(r[o].userId)
           },
-          r[e].userId
+          r[o].userId
         )
       }
     )
   }
 ) });
 export {
-  x as LeaderboardList
+  j as LeaderboardList
 };

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import type { PickHistory } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb';
+import type { Gamification } from '@streamlayer/feature-gamification';
+type FeedItem = Exclude<Awaited<ReturnType<Exclude<Gamification['feedList'], undefined>['getValue']>>, undefined>;
 interface QuestionListProps {
-    questions: PickHistory[];
+    questions: FeedItem;
     openQuestion: (questionId: string) => void;
 }
 export declare const QuestionList: React.FC<QuestionListProps>;

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

@@ -1,15 +1,28 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Question as i } from "../index.js";
-import { QuestionsContainer as p } from "./styles.js";
+import { jsx as e } from "react/jsx-runtime";
+import { Insight as u } from "../../insight/index.js";
+import { Question as s } from "../index.js";
+import { QuestionsContainer as a } from "./styles.js";
 import "@streamlayer/sdk-web-types";
+import "../../insight/styles.js";
+import "@linaria/react";
 import "../../../button/index.js";
 import "../../../button/styles.js";
-import "@linaria/react";
 import "../../constants.js";
 import "../styles.js";
 import "../../../icons/index.js";
 import "react";
-const u = ({ questions: r, openQuestion: m }) => /* @__PURE__ */ t(p, { children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ t(i, { openQuestion: m, ...o }, o.questionId)) });
+const j = ({ questions: r, openQuestion: o }) => /* @__PURE__ */ e(a, { children: r == null ? void 0 : r.map((t) => {
+  var n, m;
+  if (t.type === "question" && ((n = t.attributes) == null ? void 0 : n.attributes.case) === "question") {
+    const i = t.attributes.attributes.value;
+    return /* @__PURE__ */ e(s, { openQuestion: o, ...i }, i.questionId);
+  }
+  if (t.type === "insight" && ((m = t.attributes) == null ? void 0 : m.attributes.case) === "insight") {
+    const i = t.attributes.attributes.value;
+    return /* @__PURE__ */ e(u, { ...i, openInsight: o }, i.questionId);
+  }
+  return null;
+}) });
 export {
-  u as QuestionList
+  j as QuestionList
 };

package/lib/ui/gamification/vote/insight-details/index.d.ts

@@ -1,10 +1,3 @@
 /// <reference types="react" />
-import { VideoPlayerProps } from '../../../video-player';
-export type InsightDetailsProps = {
-    poster?: string;
-    video?: VideoPlayerProps;
-    title: string;
-    description: string;
-    webLink?: string;
-};
-export declare const InsightDetails: React.FC<InsightDetailsProps>;
+import { InsightHistory } from '@streamlayer/sdk-web-types';
+export declare const InsightDetails: React.FC<InsightHistory>;

package/lib/ui/gamification/vote/insight-details/index.js

@@ -1,21 +1,21 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { SvgIcon as m } from "../../../icons/index.js";
-import { VideoPlayer as l } from "../../../video-player/index.js";
-import { Container as p, Content as s, Title as c, Description as a, WebLinkBtn as h } from "./styles.js";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { SvgIcon as d } from "../../../icons/index.js";
+import { VideoPlayer as e } from "../../../video-player/index.js";
+import { Container as p, Content as c, Title as h, Description as b, WebLinkBtn as f } from "./styles.js";
 import "@linaria/react";
 import "react";
 import "../../../video-player/styles.js";
-const y = ({ video: t, title: i, description: n, webLink: o }) => /* @__PURE__ */ e(p, { children: [
-  t && /* @__PURE__ */ r(l, { ...t }),
-  /* @__PURE__ */ e(s, { children: [
-    /* @__PURE__ */ r(c, { children: i }),
-    /* @__PURE__ */ r(a, { children: n }),
-    o && /* @__PURE__ */ e(h, { href: "webLink", target: "_blank", children: [
+const j = ({ title: m, instantView: r }) => /* @__PURE__ */ l(p, { children: [
+  (r == null ? void 0 : r.video) && /* @__PURE__ */ o(e, { source: r.video.url, poster: r.video.thumbnailUrl }),
+  /* @__PURE__ */ l(c, { children: [
+    /* @__PURE__ */ o(h, { children: (r == null ? void 0 : r.heading) || m }),
+    /* @__PURE__ */ o(b, { children: r == null ? void 0 : r.body }),
+    (r == null ? void 0 : r.webLink) && /* @__PURE__ */ l(f, { href: "webLink", target: "_blank", children: [
       "Explore more of the Masters History",
-      /* @__PURE__ */ r(m, { name: "icon-external-link" })
+      /* @__PURE__ */ o(d, { name: "icon-external-link" })
     ] })
   ] })
 ] });
 export {
-  y as InsightDetails
+  j as InsightDetails
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.52.1",
+  "version": "0.53.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -30,16 +30,16 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.19.4",
-    "@streamlayer/sdk-web": "^0.28.11",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.6",
+    "@streamlayer/feature-gamification": "^0.20.0",
+    "@streamlayer/sdk-web": "^0.28.13",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.8",
     "@streamlayer/sdk-web-api": "^0.0.1",
-    "@streamlayer/sdk-web-core": "^0.17.1",
-    "@streamlayer/sdk-web-features": "^0.10.14",
-    "@streamlayer/sdk-web-interfaces": "^0.18.9",
-    "@streamlayer/sdk-web-notifications": "^0.10.8",
+    "@streamlayer/sdk-web-core": "^0.17.3",
+    "@streamlayer/sdk-web-features": "^0.10.16",
+    "@streamlayer/sdk-web-interfaces": "^0.18.10",
+    "@streamlayer/sdk-web-notifications": "^0.10.9",
     "@streamlayer/sdk-web-storage": "^0.3.10",
-    "@streamlayer/sdk-web-types": "^0.17.1"
+    "@streamlayer/sdk-web-types": "^0.18.0"
   },
   "nx": {
     "implicitDependencies": [
@@ -78,6 +78,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.26.1"
+    "@streamlayer/react": "^0.26.3"
   }
 }

package/lib/ui/app/Features/Highlights/Insight.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { Highlights } from '@streamlayer/feature-gamification';
-export declare const Insight: React.FC<{
-    openedInsight: Exclude<Highlights['openedInsight']['value'], undefined>;
-    closeHighlights: () => void;
-    closeInsight: () => void;
-}>;

package/lib/ui/app/Features/Highlights/Insight.js

@@ -1,31 +0,0 @@
-import { jsx as p } from "react/jsx-runtime";
-import { DetailedInsight as L } from "../../../gamification/detailed-insight/index.js";
-import "../../../gamification/common-header/index.js";
-import "../../../../icon-exit-d3f9fc80.js";
-import "../../../gamification/common-header/styles.js";
-import "@linaria/react";
-import "../../../gamification/detailed-insight/styles.js";
-const j = ({ openedInsight: o, closeHighlights: r, closeInsight: s }) => {
-  var t, a, b, n, e;
-  const i = ((t = o.options) == null ? void 0 : t.options.case) === "factoid" ? {
-    image: o.options.options.value.image,
-    body: o.options.options.value.body,
-    webLink: (a = o.options.options.value.webLink) == null ? void 0 : a.url,
-    webLinkLabel: (b = o.options.options.value.webLink) == null ? void 0 : b.label
-  } : {}, l = o.subject || ((n = o.notification) == null ? void 0 : n.title), m = i.body || ((e = o.notification) == null ? void 0 : e.body);
-  return /* @__PURE__ */ p(
-    L,
-    {
-      image: i.image,
-      title: l,
-      description: m,
-      webLink: i.webLink,
-      webLinkLabel: i.webLinkLabel,
-      closeInsight: s,
-      closeHighlights: r
-    }
-  );
-};
-export {
-  j as Insight
-};

package/lib/ui/app/Features/Highlights/Insights.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import type { Highlights } from '@streamlayer/feature-gamification';
-export declare const Insights: React.FC<{
-    highlights: Highlights;
-    store: ReturnType<Exclude<Highlights['insights'], undefined>['getStore']>;
-}>;

package/lib/ui/app/Features/Highlights/Insights.js

@@ -1,15 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useStore as s } from "@nanostores/react";
-import { InsightList as n } from "../../../gamification/insight-list/index.js";
-import "../../../gamification/insight/index.js";
-import "@streamlayer/sdk-web-types";
-import "../../../gamification/insight/styles.js";
-import "@linaria/react";
-import "../../../gamification/insight-list/styles.js";
-const d = ({ highlights: r, store: o }) => {
-  const { data: t } = s(o);
-  return t ? /* @__PURE__ */ i(n, { insights: t, openInsight: r.openHighlight }) : /* @__PURE__ */ i("div", { children: "wait insights..." });
-};
-export {
-  d as Insights
-};

package/lib/ui/app/Features/Highlights/index.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import type { Highlights } from '@streamlayer/feature-gamification';
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-export declare const HighlightsOverlay: React.FC<{
-    highlights: Highlights;
-    sdk: StreamLayerSDK;
-    className?: string;
-}>;

package/lib/ui/app/Features/Highlights/index.js

@@ -1,36 +0,0 @@
-import { jsxs as e, Fragment as m, jsx as i } from "react/jsx-runtime";
-import { useStore as p } from "@nanostores/react";
-import { Insight as s } from "../../../demo/components/Insight.js";
-import { Insights as n } from "../../../demo/components/Insights.js";
-import "../../../gamification/detailed-insight/index.js";
-import "../../../gamification/common-header/index.js";
-import "../../../../icon-exit-d3f9fc80.js";
-import "../../../gamification/common-header/styles.js";
-import "@linaria/react";
-import "../../../gamification/detailed-insight/styles.js";
-import "../../../gamification/insight-list/index.js";
-import "../../../gamification/insight/index.js";
-import "@streamlayer/sdk-web-types";
-import "../../../gamification/insight/styles.js";
-import "../../../gamification/insight-list/styles.js";
-const O = ({
-  highlights: o,
-  className: r
-}) => {
-  const t = p(o.openedInsight);
-  return /* @__PURE__ */ e(m, { children: [
-    !t && o.insights && /* @__PURE__ */ i(n, { className: r, highlights: o, store: o.insights.getStore() }),
-    t && /* @__PURE__ */ i(
-      s,
-      {
-        className: r,
-        openedInsight: t,
-        closeHighlights: o.closeFeature,
-        closeInsight: o.closeHighlight
-      }
-    )
-  ] });
-};
-export {
-  O as HighlightsOverlay
-};