@streamlayer/react-ui 0.54.1 → 0.55.0

package/lib/index.js

@@ -1,15 +1,15 @@
-import { QuestionInApp as jo } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as qo } from "./ui/login/index.js";
-import { Onboarding as zo } from "./ui/gamification/onboarding/index.js";
-import { ActivePages as Eo, Tab as Fo, Tabs as Go } from "./ui/gamification/tabs/index.js";
-import { Question as Jo } from "./ui/gamification/question/index.js";
-import { QuestionList as Mo } from "./ui/gamification/question/list/index.js";
-import { UserStatistics as Ro } from "./ui/gamification/user-statistics/index.js";
-import { Vote as Xo } from "./ui/gamification/vote/index.js";
-import { Demo as Zo } from "./ui/demo/index.js";
-import { Points as $o } from "./ui/gamification/points/index.js";
-import { StreamLayerThemeProvider as rr } from "./ui/theme/index.js";
-import { ThemeVariables as mr, resetCss as pr, theme as ir, themeStr as er } from "./ui/theme/theme.js";
+import { QuestionInApp as zo } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as Eo } from "./ui/login/index.js";
+import { Onboarding as Go } from "./ui/gamification/onboarding/index.js";
+import { ActivePages as Jo, Tab as Ko, Tabs as Mo } from "./ui/gamification/tabs/index.js";
+import { Question as Ro } from "./ui/gamification/question/index.js";
+import { QuestionList as Xo } from "./ui/gamification/question/list/index.js";
+import { UserStatistics as Zo } from "./ui/gamification/user-statistics/index.js";
+import { Vote as $o } from "./ui/gamification/vote/index.js";
+import { Demo as rr } from "./ui/demo/index.js";
+import { Points as mr } from "./ui/gamification/points/index.js";
+import { StreamLayerThemeProvider as ir } from "./ui/theme/index.js";
+import { ThemeVariables as sr, resetCss as fr, theme as xr, themeStr as ar } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-d3f9fc80.js";
@@ -39,8 +39,10 @@ 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/insight/index.js";
+import "./ui/video-player/index.js";
+import "./ui/video-player/styles.js";
+import "./ui/gamification/question/insight/styles.js";
 import "./ui/gamification/question/list/styles.js";
 import "./utils/common.js";
 import "./ui/gamification/user-statistics/components/rank/index.js";
@@ -72,6 +74,7 @@ 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/common-header/styles.js";
 import "./ui/gamification/detailed-insight/styles.js";
@@ -86,6 +89,7 @@ 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/gamification/common-header/index.js";
@@ -95,21 +99,21 @@ import "./ui/gamification/points/styles.js";
 import "./ui/theme/breakpoints.js";
 import "@linaria/core";
 export {
-  Eo as ActivePages,
-  Zo as Demo,
-  qo as Login,
-  zo as Onboarding,
-  $o as Points,
-  Jo as Question,
-  jo as QuestionInApp,
-  Mo as QuestionList,
-  rr as StreamLayerThemeProvider,
-  Fo as Tab,
-  Go as Tabs,
-  mr as ThemeVariables,
-  Ro as UserStatistics,
-  Xo as Vote,
-  pr as resetCss,
-  ir as theme,
-  er as themeStr
+  Jo as ActivePages,
+  rr as Demo,
+  Eo as Login,
+  Go as Onboarding,
+  mr as Points,
+  Ro as Question,
+  zo as QuestionInApp,
+  Xo as QuestionList,
+  ir as StreamLayerThemeProvider,
+  Ko as Tab,
+  Mo as Tabs,
+  sr as ThemeVariables,
+  Zo as UserStatistics,
+  $o as Vote,
+  fr as resetCss,
+  xr as theme,
+  ar as themeStr
 };

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

@@ -1,4 +1,4 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } 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";
@@ -34,20 +34,20 @@ const d = p.div`
   flex-direction: column;
 `, 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;
+  return ((r = t == null ? void 0 : t.attributes) == null ? void 0 : r.attributes.case) === "insight" ? /* @__PURE__ */ o(c, { created: t.attributes.created, ...t.attributes.attributes.value }) : null;
+}, b = ({ extendedQuestion: t, vote: r }) => {
+  const { loading: i, data: e } = t;
+  return !i && e ? /* @__PURE__ */ o(a, { vote: r, openedQuestion: e }) : 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;
+  const e = 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 })
+    /* @__PURE__ */ o(l, { close: t.closeQuestion, type: ((s = r.attributes) == null ? void 0 : s.type) || u.UNSET }),
+    e === "question" && /* @__PURE__ */ o(b, { vote: t.submitAnswer, extendedQuestion: i }),
+    e !== "question" && /* @__PURE__ */ o(f, { openedQuestion: r })
   ] });
 };
 export {

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

@@ -1,22 +1,24 @@
 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/insight/index.js";
-import "@streamlayer/sdk-web-types";
-import "../../../gamification/insight/styles.js";
-import "@linaria/react";
 import "../../../gamification/question/index.js";
+import "@streamlayer/sdk-web-types";
 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/insight/index.js";
+import "../../../video-player/index.js";
+import "../../../video-player/styles.js";
+import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
-const w = ({ store: r, openQuestion: i }) => {
+const S = ({ 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 {
-  w as QuestionsList
+  S as QuestionsList
 };

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

@@ -17,14 +17,16 @@ import "../../../../utils/common.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
 import "../../../icons/index.js";
 import "../../../gamification/question/list/index.js";
-import "../../../gamification/insight/index.js";
-import "@streamlayer/sdk-web-types";
-import "../../../gamification/insight/styles.js";
 import "../../../gamification/question/index.js";
+import "@streamlayer/sdk-web-types";
 import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/constants.js";
 import "../../../gamification/question/styles.js";
+import "../../../gamification/question/insight/index.js";
+import "../../../video-player/index.js";
+import "../../../video-player/styles.js";
+import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "../../../gamification/user-statistics/index.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
@@ -32,7 +34,7 @@ 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 J = ({ gamification: t }) => {
+const V = ({ gamification: t }) => {
   const [o, p] = s(e.HOME);
   return /* @__PURE__ */ i("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ i(n, { children: [
@@ -44,5 +46,5 @@ const J = ({ gamification: t }) => {
   ] });
 };
 export {
-  J as Tabs
+  V as Tabs
 };

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

@@ -44,12 +44,12 @@ import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../gamification/leaderboard/list-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";
 import "../../../gamification/question/styles.js";
+import "../../../gamification/question/insight/index.js";
+import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
 const m = n(u)`

package/lib/ui/demo/Gamification.js

@@ -24,13 +24,16 @@ 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";
 import "../gamification/constants.js";
 import "../gamification/question/styles.js";
 import "../icons/index.js";
+import "../gamification/question/insight/index.js";
+import "../video-player/index.js";
+import "../video-player/styles.js";
+import "../gamification/question/insight/styles.js";
 import "../gamification/question/list/styles.js";
 import "../gamification/vote/index.js";
 import "../app/styles.js";
@@ -58,17 +61,17 @@ import "react-window";
 import "react-window-infinite-loader";
 import "../gamification/leaderboard/list-item/index.js";
 import "../gamification/leaderboard/list-item/styles.js";
-const mt = ({
+const at = ({
   gamification: r,
   sdk: u
 }) => {
   var d, v, c, b, y, g, S, h, C, G, L, Q, A, E, f, w, x, P, F, O, B, D, R;
-  const T = p(r.status), j = p(r.onboardingStatus), l = p(r.openedQuestion), { slStreamId: o } = p(u.sdkStore), e = p(r.featureSettings), [n, q] = K(a.HOME);
+  const T = p(r.status), j = p(r.onboardingStatus), l = p(r.openedQuestion), { slStreamId: e } = p(u.sdkStore), o = p(r.featureSettings), [n, q] = K(a.HOME);
   if (T !== J.Ready)
     return /* @__PURE__ */ t("div", { children: "wait..." });
-  if (o != null && o.loading)
+  if (e != null && e.loading)
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
-  if (!(o != null && o.data))
+  if (!(e != null && e.data))
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
   if (!j)
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
@@ -76,16 +79,16 @@ const mt = ({
       {
         closeFeature: u.closeFeature,
         gamification: r,
-        steps: (v = (d = e.inplayGame) == null ? void 0 : d.onboarding) == null ? void 0 : v.steps,
-        gameIcon: (y = (b = (c = e.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : b.media) == null ? void 0 : y.gameIcon,
-        sponsorLogo: (h = (S = (g = e.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : S.media) == null ? void 0 : h.sponsorLogo,
-        rules: (G = (C = e.inplayGame) == null ? void 0 : C.rules) == null ? void 0 : G.rules,
-        rulesBtnLabel: (Q = (L = e.inplayGame) == null ? void 0 : L.rules) == null ? void 0 : Q.buttonLabel,
-        rulesTitle: (E = (A = e.inplayGame) == null ? void 0 : A.rules) == null ? void 0 : E.heading,
-        primaryColor: (x = (w = (f = e.inplayGame) == null ? void 0 : f.overview) == null ? void 0 : w.appearance) == null ? void 0 : x.primaryColor,
-        inviteCardTitle: (F = (P = e.inplayGame) == null ? void 0 : P.inviteCard) == null ? void 0 : F.heading,
-        inviteCardSubtext: (B = (O = e.inplayGame) == null ? void 0 : O.inviteCard) == null ? void 0 : B.subtext,
-        inviteCardBtnLabel: (R = (D = e.inplayGame) == null ? void 0 : D.inviteCard) == null ? void 0 : R.buttonLabel
+        steps: (v = (d = o.inplayGame) == null ? void 0 : d.onboarding) == null ? void 0 : v.steps,
+        gameIcon: (y = (b = (c = o.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : b.media) == null ? void 0 : y.gameIcon,
+        sponsorLogo: (h = (S = (g = o.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : S.media) == null ? void 0 : h.sponsorLogo,
+        rules: (G = (C = o.inplayGame) == null ? void 0 : C.rules) == null ? void 0 : G.rules,
+        rulesBtnLabel: (Q = (L = o.inplayGame) == null ? void 0 : L.rules) == null ? void 0 : Q.buttonLabel,
+        rulesTitle: (E = (A = o.inplayGame) == null ? void 0 : A.rules) == null ? void 0 : E.heading,
+        primaryColor: (x = (w = (f = o.inplayGame) == null ? void 0 : f.overview) == null ? void 0 : w.appearance) == null ? void 0 : x.primaryColor,
+        inviteCardTitle: (F = (P = o.inplayGame) == null ? void 0 : P.inviteCard) == null ? void 0 : F.heading,
+        inviteCardSubtext: (B = (O = o.inplayGame) == null ? void 0 : O.inviteCard) == null ? void 0 : B.subtext,
+        inviteCardBtnLabel: (R = (D = o.inplayGame) == null ? void 0 : D.inviteCard) == null ? void 0 : R.buttonLabel
       }
     ) });
   const H = (i) => {
@@ -110,5 +113,5 @@ const mt = ({
   ] });
 };
 export {
-  mt as GamificationComponent
+  at as GamificationComponent
 };

package/lib/ui/demo/Highlights.js

@@ -5,12 +5,13 @@ 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 "react";
+import "../icons/index.js";
+import "../video-player/styles.js";
+import "../gamification/question/insight/styles.js";
 import "../gamification/question/list/styles.js";
 import "./components/Question.js";
-import "react";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-invite-card/styles.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
@@ -22,11 +23,11 @@ import "react-window";
 import "react-window-infinite-loader";
 import "../gamification/leaderboard/list-item/styles.js";
 import "@linaria/react";
+import "@streamlayer/sdk-web-types";
 import "../button/index.js";
 import "../button/styles.js";
 import "../gamification/constants.js";
 import "../gamification/question/styles.js";
-import "../icons/index.js";
 import "../gamification/vote/index.js";
 import "../app/styles.js";
 import "../gamification/vote/feedback/index.js";
@@ -41,13 +42,14 @@ 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";
 import "../../icon-exit-d3f9fc80.js";
 import "../gamification/common-header/styles.js";
 import "../gamification/detailed-insight/styles.js";
-const nt = ({ highlights: i, sdk: e }) => {
+const dt = ({ highlights: i, sdk: e }) => {
   const n = m(i.status), r = m(i.openedInsight), { slStreamId: o } = m(e.sdkStore);
   return n !== d.Ready ? /* @__PURE__ */ t("div", { children: "wait..." }) : o != null && o.loading ? /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) }) : o != null && o.data ? i.insights === void 0 ? /* @__PURE__ */ t("div", { children: "wait insights..." }) : /* @__PURE__ */ s(p, { children: [
     !r && /* @__PURE__ */ t(c, { highlights: i, store: i.insights.getStore() }),
@@ -62,5 +64,5 @@ const nt = ({ highlights: i, sdk: e }) => {
   ] }) : /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
 };
 export {
-  nt as HighlightsComponent
+  dt as HighlightsComponent
 };

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

@@ -1,22 +1,24 @@
 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/insight/index.js";
-import "@streamlayer/sdk-web-types";
-import "../../gamification/insight/styles.js";
-import "@linaria/react";
 import "../../gamification/question/index.js";
+import "@streamlayer/sdk-web-types";
 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/insight/index.js";
+import "../../video-player/index.js";
+import "../../video-player/styles.js";
+import "../../gamification/question/insight/styles.js";
 import "../../gamification/question/list/styles.js";
-const v = ({ store: r, openQuestion: i }) => {
+const S = ({ 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 {
-  v as QuestionsList
+  S as QuestionsList
 };

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

@@ -1,10 +1,10 @@
-import { UserSummary as tr } from "./UserSummary.js";
-import { QuestionsList as pr } from "./QuestionsList.js";
-import { Question as er } from "./Question.js";
-import { Onboarding as fr } from "../../gamification/onboarding/index.js";
-import { Insights as nr } from "./Insights.js";
-import { Insight as dr } from "./Insight.js";
-import { Leaderboard as ur } from "./Leaderboard.js";
+import { UserSummary as er } from "./UserSummary.js";
+import { QuestionsList as fr } from "./QuestionsList.js";
+import { Question as nr } from "./Question.js";
+import { Onboarding as dr } from "../../gamification/onboarding/index.js";
+import { Insights as ur } from "./Insights.js";
+import { Insight as hr } from "./Insight.js";
+import { Leaderboard as Lr } from "./Leaderboard.js";
 import "react/jsx-runtime";
 import "@nanostores/react";
 import "../../gamification/user-statistics/index.js";
@@ -16,16 +16,18 @@ 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 "@streamlayer/sdk-web-types";
-import "../../gamification/insight/styles.js";
 import "../../gamification/question/index.js";
+import "@streamlayer/sdk-web-types";
 import "../../button/index.js";
 import "../../button/styles.js";
 import "../../gamification/constants.js";
 import "../../gamification/question/styles.js";
 import "../../icons/index.js";
 import "react";
+import "../../gamification/question/insight/index.js";
+import "../../video-player/index.js";
+import "../../video-player/styles.js";
+import "../../gamification/question/insight/styles.js";
 import "../../gamification/question/list/styles.js";
 import "../../gamification/vote/index.js";
 import "../../app/styles.js";
@@ -48,6 +50,8 @@ 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";
@@ -60,11 +64,11 @@ import "react-window-infinite-loader";
 import "../../gamification/leaderboard/list-item/index.js";
 import "../../gamification/leaderboard/list-item/styles.js";
 export {
-  dr as Insight,
-  nr as Insights,
-  ur as Leaderboard,
-  fr as Onboarding,
-  er as Question,
-  pr as QuestionsList,
-  tr as UserSummary
+  hr as Insight,
+  ur as Insights,
+  Lr as Leaderboard,
+  dr as Onboarding,
+  nr as Question,
+  fr as QuestionsList,
+  er as UserSummary
 };

package/lib/ui/demo/index.js

@@ -36,14 +36,16 @@ 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";
 import "../gamification/constants.js";
 import "../gamification/question/styles.js";
 import "../icons/index.js";
+import "../gamification/question/insight/index.js";
+import "../video-player/index.js";
+import "../video-player/styles.js";
+import "../gamification/question/insight/styles.js";
 import "../gamification/question/list/styles.js";
 import "./components/Question.js";
 import "../gamification/vote/index.js";
@@ -66,6 +68,7 @@ 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";
@@ -78,6 +81,7 @@ import "../gamification/leaderboard/list-item/index.js";
 import "../gamification/leaderboard/list-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 "../gamification/common-header/index.js";
@@ -168,7 +172,7 @@ const R = ({ activeFeature: o, sdk: r }) => {
     ] }),
     h
   ] });
-}, hr = ({ sdk: o }) => {
+}, yr = ({ sdk: o }) => {
   const r = f(o.organizationStore()), t = f(o.getUserStore()), a = f(o.getActiveFeature());
   return r.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : r.data ? t.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : t.data ? /* @__PURE__ */ l(T, { children: [
     /* @__PURE__ */ e(x, { notificationsStore: o.getNotificationsStore() }),
@@ -176,5 +180,5 @@ const R = ({ activeFeature: o, sdk: r }) => {
   ] }) : /* @__PURE__ */ e(H, { sdk: o }) : /* @__PURE__ */ e("div", { children: "wrong sdk key..." });
 };
 export {
-  hr as Demo
+  yr as Demo
 };

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

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

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

@@ -0,0 +1,35 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { VideoPlayer as t } from "../../../video-player/index.js";
+import { Container as u, DateWrap as g, Content as S, Title as i, Description as D, ActionBtn as y } from "./styles.js";
+import "react";
+import "../../../icons/index.js";
+import "@linaria/react";
+import "../../../video-player/styles.js";
+const j = ({
+  title: m,
+  instantView: o,
+  openInsight: c,
+  questionId: h
+}) => {
+  const d = /* @__PURE__ */ new Date(), l = d.toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  }), p = d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
+  return /* @__PURE__ */ e(u, { children: [
+    /* @__PURE__ */ e(g, { children: [
+      l,
+      "・",
+      p
+    ] }),
+    (o == null ? void 0 : o.video) && /* @__PURE__ */ r(t, { source: o.video.url, poster: o.video.thumbnailUrl }),
+    /* @__PURE__ */ e(S, { children: [
+      /* @__PURE__ */ r(i, { children: (o == null ? void 0 : o.heading) || m }),
+      /* @__PURE__ */ r(D, { children: o == null ? void 0 : o.body }),
+      c && /* @__PURE__ */ r(y, { onClick: () => c(h), children: "View Insight" })
+    ] })
+  ] });
+};
+export {
+  j as Insight
+};

package/lib/ui/gamification/question/insight/styles.d.ts

@@ -0,0 +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 DateWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & 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 ActionBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

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

@@ -0,0 +1,66 @@
+import { styled as o } from "@linaria/react";
+const e = o.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  padding: var(--container-padding);
+  background-color: var(--color-neutrals-white);
+  border-radius: 8px;
+  width: 100%;
+`, t = o.div`
+  font-size: 12px;
+  font-weight: 550;
+  color: var(--color-neutrals-gray7);
+`, i = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+`, n = o.h3`
+  color: var(--color-primary-green2);
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: 400;
+  font-family: var(--font-serif);
+  font-weight: var(--font-weight-default);
+`, a = o.div`
+  color: var(--color-neutrals-gray9);
+  font-size: 12px;
+  line-height: 24px;
+  font-weight: 550;
+  font-weight: var(--font-weight-default);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  max-height: 50px;
+`, l = o.button`
+  border: none;
+  outline: none;
+  background-color: var(--color-primary-green1);
+  color: var(--color-white);
+  border-radius: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 550;
+  width: 100%;
+  padding: 0px 16px;
+  height: 44px;
+
+  &:hover {
+    background-color: var(--color-primary-green2);
+    cursor: pointer;
+  }
+`;
+export {
+  l as ActionBtn,
+  e as Container,
+  i as Content,
+  t as DateWrap,
+  a as Description,
+  n as Title
+};

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

@@ -1,28 +1,30 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Insight as u } from "../../insight/index.js";
-import { Question as s } from "../index.js";
+import { Question as u } from "../index.js";
+import { Insight as s } from "../insight/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 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") {
+import "../../../video-player/index.js";
+import "../../../video-player/styles.js";
+import "../insight/styles.js";
+const C = ({ questions: r, openQuestion: o }) => /* @__PURE__ */ e(a, { children: r == null ? void 0 : r.map((t) => {
+  var m, n;
+  if (t.type === "question" && ((m = t.attributes) == null ? void 0 : m.attributes.case) === "question") {
     const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ e(s, { openQuestion: o, ...i }, i.questionId);
+    return /* @__PURE__ */ e(u, { openQuestion: o, ...i }, i.questionId);
   }
-  if (t.type === "insight" && ((m = t.attributes) == null ? void 0 : m.attributes.case) === "insight") {
+  if (t.type === "insight" && ((n = t.attributes) == null ? void 0 : n.attributes.case) === "insight") {
     const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ e(u, { ...i, openInsight: o }, i.questionId);
+    return /* @__PURE__ */ e(s, { openInsight: o, ...i }, i.questionId);
   }
   return null;
 }) });
 export {
-  j as QuestionList
+  C as QuestionList
 };

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

@@ -1,3 +1,5 @@
 /// <reference types="react" />
-import { InsightHistory } from '@streamlayer/sdk-web-types';
-export declare const InsightDetails: React.FC<InsightHistory>;
+import { InsightHistory, FeedItem } from '@streamlayer/sdk-web-types';
+export declare const InsightDetails: React.FC<InsightHistory & {
+    created: FeedItem['created'];
+}>;

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

@@ -1,21 +1,37 @@
-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 { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { SvgIcon as p } from "../../../icons/index.js";
+import { VideoPlayer as g } from "../../../video-player/index.js";
+import { Container as u, DateWrap as S, Content as b, Title as f, Description as k, WebLinkBtn as D } from "./styles.js";
 import "@linaria/react";
 import "react";
 import "../../../video-player/styles.js";
-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__ */ o(d, { name: "icon-external-link" })
+const C = ({
+  created: m,
+  title: c,
+  instantView: o
+}) => {
+  const l = new Date(m), d = l.toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  }), h = l.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
+  return /* @__PURE__ */ r(u, { children: [
+    /* @__PURE__ */ r(S, { children: [
+      d,
+      "・",
+      h
+    ] }),
+    (o == null ? void 0 : o.video) && /* @__PURE__ */ e(g, { source: o.video.url, poster: o.video.thumbnailUrl }),
+    /* @__PURE__ */ r(b, { children: [
+      /* @__PURE__ */ e(f, { children: (o == null ? void 0 : o.heading) || c }),
+      /* @__PURE__ */ e(k, { children: o == null ? void 0 : o.body }),
+      (o == null ? void 0 : o.webLink) && /* @__PURE__ */ r(D, { href: o == null ? void 0 : o.webLink.url, target: "_blank", children: [
+        "Explore more of the Masters History",
+        /* @__PURE__ */ e(p, { name: "icon-external-link" })
+      ] })
     ] })
-  ] })
-] });
+  ] });
+};
 export {
-  j as InsightDetails
+  C as InsightDetails
 };

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

@@ -4,3 +4,4 @@ export declare const Content: import("@linaria/react").StyledComponent<import("r
 export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & 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 WebLinkBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
+export declare const DateWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -1,10 +1,11 @@
 import { styled as o } from "@linaria/react";
-const t = o.div`
+const e = o.div`
   display: flex;
   flex-direction: column;
   row-gap: 16px;
   padding: var(--container-padding);
   background-color: var(--color-neutrals-white);
+  width: 100%;
 `, r = o.div`
   display: flex;
   flex-direction: column;
@@ -33,10 +34,15 @@ const t = o.div`
   border-radius: 40px;
   border: 1px solid var(--color-primary-green1);
   text-decoration: none;
+`, l = o.div`
+  font-size: 12px;
+  font-weight: 550;
+  color: var(--color-neutrals-gray7);
 `;
 export {
-  t as Container,
+  e as Container,
   r as Content,
+  l as DateWrap,
   i as Description,
   n as Title,
   a as WebLinkBtn

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.54.1",
+  "version": "0.55.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -26,20 +26,20 @@
     "package.json"
   ],
   "peerDependencies": {
-    "@streamlayer/sl-eslib": "^5.53.5",
+    "@streamlayer/sl-eslib": "^5.53.6",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.21.1",
-    "@streamlayer/sdk-web": "^0.28.15",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.10",
+    "@streamlayer/feature-gamification": "^0.21.2",
+    "@streamlayer/sdk-web": "^0.28.16",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.11",
     "@streamlayer/sdk-web-api": "^0.0.1",
-    "@streamlayer/sdk-web-core": "^0.17.4",
-    "@streamlayer/sdk-web-features": "^0.10.18",
-    "@streamlayer/sdk-web-interfaces": "^0.18.11",
-    "@streamlayer/sdk-web-notifications": "^0.10.10",
-    "@streamlayer/sdk-web-storage": "^0.0.1",
-    "@streamlayer/sdk-web-types": "^0.18.1"
+    "@streamlayer/sdk-web-core": "^0.17.5",
+    "@streamlayer/sdk-web-features": "^0.10.19",
+    "@streamlayer/sdk-web-interfaces": "^0.18.12",
+    "@streamlayer/sdk-web-notifications": "^0.10.11",
+    "@streamlayer/sdk-web-storage": "^0.0.2",
+    "@streamlayer/sdk-web-types": "^0.18.2"
   },
   "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.27.1"
+    "@streamlayer/react": "^0.27.2"
   }
 }