@streamlayer/react-ui 0.59.2 → 0.61.0

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

@@ -20,8 +20,11 @@ import "../../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../gamification/vote/win-bar/styles.js";
+import "../../../questions/insight/index.js";
 import "../../../video-player/index.js";
 import "../../../video-player/styles.js";
+import "../../../../utils/common.js";
+import "../../../questions/insight/styles.js";
 import "../../../gamification/vote/insight-details/styles.js";
 const d = p.div`
   background: var(--color-transparent-item);
@@ -38,7 +41,7 @@ const d = p.div`
 }, 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 }) => {
+}, K = ({ gamification: t }) => {
   var s;
   const r = n(t.openedQuestion.$store), i = n(t.openedQuestion.$extendedStore);
   if (!r)
@@ -51,5 +54,5 @@ const d = p.div`
   ] });
 };
 export {
-  F as Question
+  K as Question
 };

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

@@ -11,14 +11,17 @@ import "../../../gamification/question/styles.js";
 import "../../../icons/index.js";
 import "react";
 import "../../../gamification/question/insight/index.js";
+import "../../../questions/insight/index.js";
 import "../../../video-player/index.js";
 import "../../../video-player/styles.js";
+import "../../../../utils/common.js";
+import "../../../questions/insight/styles.js";
 import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
-const S = ({ store: r, openQuestion: i }) => {
+const k = ({ 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 {
-  S as QuestionsList
+  k as QuestionsList
 };

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

@@ -24,8 +24,10 @@ import "../../../button/styles.js";
 import "../../../gamification/constants.js";
 import "../../../gamification/question/styles.js";
 import "../../../gamification/question/insight/index.js";
+import "../../../questions/insight/index.js";
 import "../../../video-player/index.js";
 import "../../../video-player/styles.js";
+import "../../../questions/insight/styles.js";
 import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "../../../gamification/user-statistics/index.js";
@@ -34,7 +36,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 V = ({ gamification: t }) => {
+const Y = ({ gamification: t }) => {
   const [o, p] = s(e.HOME);
   return /* @__PURE__ */ i("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ i(n, { children: [
@@ -46,5 +48,5 @@ const V = ({ gamification: t }) => {
   ] });
 };
 export {
-  V as Tabs
+  Y as Tabs
 };

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

@@ -1,6 +1,6 @@
 import { jsxs as p, Fragment as d, jsx as r } from "react/jsx-runtime";
 import { styled as n } from "@linaria/react";
-import { useStore as e } from "@nanostores/react";
+import { useStore as m } from "@nanostores/react";
 import { SDKWhiteContainer as l, SDKScrollContainer as a } from "../../styles.js";
 import { VoteHeader as c } from "../../../gamification/detail/header/index.js";
 import { UserStatistics as h } from "../../../gamification/user-statistics/index.js";
@@ -31,8 +31,10 @@ import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../gamification/vote/win-bar/styles.js";
 import "../../../gamification/vote/insight-details/index.js";
+import "../../../questions/insight/index.js";
 import "../../../video-player/index.js";
 import "../../../video-player/styles.js";
+import "../../../questions/insight/styles.js";
 import "../../../gamification/vote/insight-details/styles.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
@@ -53,7 +55,7 @@ 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)`
+const e = n(u)`
   position: absolute;
   inset: 0;
   top: var(--header-height);
@@ -72,11 +74,11 @@ const m = n(u)`
   & > div {
     width: 100%;
   }
-`, br = ({ gamification: t, className: o }) => {
-  const s = e(t.openedQuestion.$store), i = e(t.openedUser);
+`, wr = ({ gamification: t, className: o }) => {
+  const s = m(t.openedQuestion.$store), i = m(t.openedUser);
   return /* @__PURE__ */ p(d, { children: [
-    s && /* @__PURE__ */ r(m, { className: o, children: /* @__PURE__ */ r(f, { gamification: t }) }),
-    i && /* @__PURE__ */ r(m, { className: o, children: /* @__PURE__ */ p(x, { children: [
+    s && /* @__PURE__ */ r(e, { className: o, children: /* @__PURE__ */ r(f, { gamification: t }) }),
+    i && /* @__PURE__ */ r(e, { className: o, children: /* @__PURE__ */ p(x, { children: [
       /* @__PURE__ */ r(c, { label: "Friend's Rank", close: t.closeUser }),
       /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(h, { ...i }) })
     ] }) }),
@@ -84,6 +86,6 @@ const m = n(u)`
   ] });
 };
 export {
-  br as GamificationOverlay,
-  br as default
+  wr as GamificationOverlay,
+  wr as default
 };

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

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

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

@@ -1,35 +1,21 @@
-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 { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { InsightContent as n } from "../../../questions/insight/index.js";
+import { Container as p, ActionBtn as c } from "./styles.js";
 import "react";
+import "../../../video-player/index.js";
 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" })
-    ] })
-  ] });
-};
+import "../../../../utils/common.js";
+import "../../../questions/insight/styles.js";
+const d = ({
+  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 {
-  j as Insight
+  d as Insight
 };

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

@@ -1,7 +1,3 @@
 /// <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

@@ -1,47 +1,34 @@
-import { styled as o } from "@linaria/react";
-const e = o.div`
-  box-sizing: border-box;
+import { styled as r } from "@linaria/react";
+import { Title as o, Description as e } from "../../../questions/insight/styles.js";
+const n = r.div`
   display: flex;
   flex-direction: column;
-  row-gap: 16px;
+  row-gap: 12px;
   padding: var(--container-padding);
-  background-color: var(--color-neutrals-white);
-  border-radius: 8px;
-  width: 100%;
   border: 1px solid var(--color-neutrals-white);
+  border-radius: 8px;
+  background-color: var(--color-neutrals-white);
 
   &:hover {
     border-color: var(--color-neutrals-gray4);
   }
-`, 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`
+
+  ${o} {
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+  ${e} {
+    display: -webkit-box;
+    font-size: 12px;
+    line-height: 18px;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+`, l = r.button`
   border: none;
   outline: none;
   background-color: var(--color-primary-green1);
@@ -63,9 +50,5 @@ const e = o.div`
 `;
 export {
   l as ActionBtn,
-  e as Container,
-  i as Content,
-  t as DateWrap,
-  a as Description,
-  n as Title
+  n as Container
 };

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

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

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

@@ -1,23 +1,23 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { VideoPlayer as l } from "../../../../video-player/index.js";
-import { InsightContainer as m, InsightContent as s, Title as h, Description as p, ActionBtn as c } from "./styles.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { VideoPlayer as m } from "../../../../video-player/index.js";
+import { InsightContainer as s, InsightContent as e, Title as h, Description as p, ActionBtn as c } from "./styles.js";
 import "react";
 import "../../../../icons/index.js";
 import "@linaria/react";
 import "../../../../video-player/styles.js";
-const a = ({
-  video: i,
+const j = ({
+  video: r,
   heading: o,
-  body: e,
-  action: t
-}) => /* @__PURE__ */ n(m, { children: [
-  i && /* @__PURE__ */ r(l, { source: i.url, poster: i.thumbnailUrl }),
-  /* @__PURE__ */ n(s, { children: [
-    /* @__PURE__ */ r(h, { children: o }),
-    /* @__PURE__ */ r(p, { children: e }),
-    t && /* @__PURE__ */ r(c, { onClick: t, children: "View Insight" })
+  body: l,
+  action: n
+}) => /* @__PURE__ */ i(s, { children: [
+  (r == null ? void 0 : r.url) && /* @__PURE__ */ t(m, { source: r.url, poster: r.thumbnailUrl }),
+  /* @__PURE__ */ i(e, { children: [
+    /* @__PURE__ */ t(h, { children: o }),
+    /* @__PURE__ */ t(p, { children: l }),
+    n && /* @__PURE__ */ t(c, { onClick: n, children: "View Insight" })
   ] })
 ] });
 export {
-  a as Insight
+  j as Insight
 };

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

@@ -7,22 +7,28 @@ const r = o.div`
   background-color: var(--color-neutrals-white);
   border-radius: 8px;
   width: 100%;
-`, t = o.div`
+`, i = o.div`
   display: flex;
   flex-direction: column;
   row-gap: 12px;
-`, i = o.h3`
+`, t = 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);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  max-height: 50px;
 `, n = 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;
@@ -55,6 +61,6 @@ export {
   l as ActionBtn,
   n as Description,
   r as InsightContainer,
-  t as InsightContent,
-  i as Title
+  i as InsightContent,
+  t as Title
 };

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

@@ -1,10 +1,3 @@
 /// <reference types="react" />
-import { AccountProps } from './account';
-type TwitterProps = {
-    title: string;
-    image: string;
-    body: string;
-    account: AccountProps;
-};
-export declare const Twitter: React.FC<TwitterProps>;
-export {};
+import { TwitterContentProps } from '../../../questions/twitter';
+export declare const Twitter: React.FC<TwitterContentProps>;

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

@@ -1,22 +1,18 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { Account as m } from "./account/index.js";
-import { Container as c, DateTime as p, Quote as d, Details as h, Body as l, Image as s, Footer as u, ActionButton as a } from "./styles.js";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { TwitterContent as i } from "../../../questions/twitter/index.js";
+import { Container as m, ActionButton as p } from "./styles.js";
+import "../../../questions/twitter/account/index.js";
 import "../../../icons/index.js";
 import "@linaria/react";
 import "react";
-import "./account/styles.js";
+import "../../../questions/twitter/account/styles.js";
+import "../../../questions/twitter/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
-const g = ({ title: o, image: t, body: e, account: n }) => /* @__PURE__ */ i(c, { children: [
-  /* @__PURE__ */ r(p, { children: "Sun, Nov 14 · 3:52 PM" }),
-  o && /* @__PURE__ */ r(d, { children: o }),
-  /* @__PURE__ */ i(h, { children: [
-    /* @__PURE__ */ r(m, { ...n }),
-    /* @__PURE__ */ r(l, { children: e }),
-    t && /* @__PURE__ */ r(s, { src: t })
-  ] }),
-  /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(a, { children: "View Insight" }) })
+const u = (r) => /* @__PURE__ */ o(m, { children: [
+  /* @__PURE__ */ t(i, { ...r }),
+  /* @__PURE__ */ t(p, { children: "View Insight" })
 ] });
 export {
-  g as Twitter
+  u as Twitter
 };

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

@@ -1,9 +1,3 @@
 /// <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 DateTime: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Quote: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLQuoteElement> & import("react").BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;
-export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Body: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const Footer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ActionButton: any;

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

@@ -1,51 +1,20 @@
 import { styled as o } from "@linaria/react";
-import { Button as t } from "../../../button/index.js";
+import { Button as r } from "../../../button/index.js";
 import "react/jsx-runtime";
 import "../../../button/styles.js";
-const p = o.div`
+const n = o.div`
   display: flex;
   flex-direction: column;
-  row-gap: 8px;
+  row-gap: 16px;
   padding: 12px 16px 16px 16px;
+  border: 1px solid var(--color-neutrals-white);
   border-radius: 8px;
-  border-bottom: 1px solid var(--color-neutrals-gray3);
-  background: var(--color-neutrals-white);
-`, a = o.div`
-  color: var(--color-neutrals-gray7);
-  font-size: 12px;
-  font-weight: var(--font-weight-default);
-  line-height: 18px;
-`, l = o.blockquote`
-  display: flex;
-  column-gap: 12px;
-  padding: 4px 16px 8px 0;
-  color: var(--color-primary-green2);
-  font-size: 12px;
-  font-family: var(--font-serif);
-  font-weight: var(--font-weight-default);
+  background-color: var(--color-neutrals-white);
 
-  &:before {
-    content: '';
-    width: 2px;
-    background-color: var(--color-primary-green2);
+  &:hover {
+    border-color: var(--color-neutrals-gray4);
   }
-`, d = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-`, x = o.div`
-  color: var(--color-neutrals-gray9);
-  font-size: 12px;
-  font-weight: var(--font-weight-default);
-  line-height: 18px;
-`, c = o.img`
-  max-width: 100%;
-  border-radius: 8px;
-`, f = o.div`
-  display: flex;
-  flex-direction: column;
-  padding-top: 8px;
-`, s = o(t)`
+`, l = o(r)`
   height: 44px;
   padding: 0 16px;
   font-size: 14px;
@@ -53,12 +22,6 @@ const p = o.div`
   cursor: pointer;
 `;
 export {
-  s as ActionButton,
-  x as Body,
-  p as Container,
-  a as DateTime,
-  d as Details,
-  f as Footer,
-  c as Image,
-  l as Quote
+  l as ActionButton,
+  n as Container
 };

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

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

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

@@ -1,37 +1,20 @@
-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 { jsxs as o, jsx as m } from "react/jsx-runtime";
+import { SvgIcon as e } from "../../../icons/index.js";
+import { InsightContent as l } from "../../../questions/insight/index.js";
+import { Container as f, WebLinkBtn as h } from "./styles.js";
 import "@linaria/react";
 import "react";
+import "../../../video-player/index.js";
 import "../../../video-player/styles.js";
-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" })
-      ] })
-    ] })
-  ] });
-};
+import "../../../../utils/common.js";
+import "../../../questions/insight/styles.js";
+const j = ({ instantView: r, ...p }) => /* @__PURE__ */ o(f, { children: [
+  /* @__PURE__ */ m(l, { instantView: r, ...p }),
+  (r == null ? void 0 : r.webLink) && /* @__PURE__ */ o(h, { href: r == null ? void 0 : r.webLink.url, target: "_blank", children: [
+    "Explore more of the Masters History",
+    /* @__PURE__ */ m(e, { name: "icon-external-link" })
+  ] })
+] });
 export {
-  C as InsightDetails
+  j as InsightDetails
 };

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

@@ -1,7 +1,3 @@
 /// <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 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 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,27 +1,11 @@
-import { styled as o } from "@linaria/react";
-const e = o.div`
+import { styled as r } from "@linaria/react";
+const o = r.div`
   display: flex;
   flex-direction: column;
-  row-gap: 16px;
+  row-gap: 12px;
   padding: var(--container-padding);
   background-color: var(--color-neutrals-white);
-  width: 100%;
-`, r = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-`, n = o.h3`
-  color: var(--color-primary-green1);
-  font-size: 16px;
-  line-height: 26px;
-  font-family: var(--font-serif);
-  font-weight: var(--font-weight-default);
-`, i = o.div`
-  color: var(--color-neutrals-gray9);
-  font-size: 14px;
-  line-height: 24px;
-  font-weight: var(--font-weight-default);
-`, a = o.a`
+`, n = r.a`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34,16 +18,8 @@ const e = 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 {
-  e as Container,
-  r as Content,
-  l as DateWrap,
-  i as Description,
-  n as Title,
-  a as WebLinkBtn
+  o as Container,
+  n as WebLinkBtn
 };

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TwitterContentProps } from '../../../questions/twitter';
+export declare const TwitterDetails: React.FC<TwitterContentProps>;

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

@@ -0,0 +1,13 @@
+import { jsx as t } from "react/jsx-runtime";
+import { TwitterContent as o } from "../../../questions/twitter/index.js";
+import { Container as i } from "./styles.js";
+import "../../../questions/twitter/account/index.js";
+import "../../../icons/index.js";
+import "@linaria/react";
+import "react";
+import "../../../questions/twitter/account/styles.js";
+import "../../../questions/twitter/styles.js";
+const w = (r) => /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(o, { ...r }) });
+export {
+  w as TwitterDetails
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -0,0 +1,11 @@
+import { styled as o } from "@linaria/react";
+const n = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+  padding: var(--container-padding);
+  background-color: var(--color-neutrals-white);
+`;
+export {
+  n as Container
+};

package/lib/ui/questions/insight/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { InsightHistory, FeedItem } from '@streamlayer/sdk-web-types';
+export type InsightContentProps = InsightHistory & {
+    created?: FeedItem['created'];
+};
+export declare const InsightContent: React.FC<InsightContentProps>;

package/lib/ui/questions/insight/index.js

@@ -0,0 +1,36 @@
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { VideoPlayer as c } from "../../video-player/index.js";
+import { isValidDate as h, formatDate as u, formatTime as D } from "../../../utils/common.js";
+import { Container as t, DateWrap as v, Content as x, Title as C, Description as T } from "./styles.js";
+import "../../icons/index.js";
+import "@linaria/react";
+import "../../video-player/styles.js";
+const W = ({ created: o, title: p, instantView: r }) => {
+  const m = f(() => {
+    if (o) {
+      const e = new Date(o);
+      if (h(e))
+        return {
+          date: u(e),
+          time: D(e)
+        };
+    }
+    return null;
+  }, [o]);
+  return /* @__PURE__ */ d(t, { children: [
+    m && /* @__PURE__ */ d(v, { children: [
+      m.date,
+      " · ",
+      m.time
+    ] }),
+    (r == null ? void 0 : r.video) && /* @__PURE__ */ l(c, { source: r.video.url, poster: r.video.thumbnailUrl }),
+    /* @__PURE__ */ d(x, { children: [
+      /* @__PURE__ */ l(C, { children: (r == null ? void 0 : r.heading) || p }),
+      /* @__PURE__ */ l(T, { children: r == null ? void 0 : r.body })
+    ] })
+  ] });
+};
+export {
+  W as InsightContent
+};

package/lib/ui/questions/insight/styles.d.ts

@@ -0,0 +1,6 @@
+/// <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 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 DateWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/questions/insight/styles.js

@@ -0,0 +1,33 @@
+import { styled as t } from "@linaria/react";
+const e = t.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+`, i = t.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+`, n = t.h3`
+  color: var(--color-primary-green1);
+  font-size: 16px;
+  line-height: 26px;
+  font-family: var(--font-serif);
+  font-weight: var(--font-weight-default);
+`, r = t.div`
+  color: var(--color-neutrals-gray9);
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: var(--font-weight-default);
+`, l = t.div`
+  color: var(--color-neutrals-gray7);
+  font-size: 12px;
+  font-weight: var(--font-weight-default);
+  line-height: 18px;
+`;
+export {
+  e as Container,
+  i as Content,
+  l as DateWrap,
+  r as Description,
+  n as Title
+};

package/lib/ui/{gamification/question → questions}/twitter/account/index.js

@@ -1,5 +1,5 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { SvgIcon as m } from "../../../../icons/index.js";
+import { SvgIcon as m } from "../../../icons/index.js";
 import { Container as c, ImageContainer as a, Image as s, Details as d, Name as l, UserName as p } from "./styles.js";
 import "@linaria/react";
 import "react";

package/lib/ui/questions/twitter/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AccountProps } from './account';
+export type TwitterContentProps = {
+    title: string;
+    image: string;
+    body: string;
+    account: AccountProps;
+};
+export declare const TwitterContent: React.FC<TwitterContentProps>;

package/lib/ui/questions/twitter/index.js

@@ -0,0 +1,19 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { Account as m } from "./account/index.js";
+import { Container as c, DateTime as p, Quote as d, Details as s, Body as h, Image as l } from "./styles.js";
+import "../../icons/index.js";
+import "@linaria/react";
+import "react";
+import "./account/styles.js";
+const T = ({ title: o, image: t, body: e, account: n }) => /* @__PURE__ */ i(c, { children: [
+  /* @__PURE__ */ r(p, { children: "Sun, Nov 14 · 3:52 PM" }),
+  o && /* @__PURE__ */ r(d, { children: o }),
+  /* @__PURE__ */ i(s, { children: [
+    /* @__PURE__ */ r(m, { ...n }),
+    /* @__PURE__ */ r(h, { children: e }),
+    t && /* @__PURE__ */ r(l, { src: t })
+  ] })
+] });
+export {
+  T as TwitterContent
+};

package/lib/ui/questions/twitter/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 DateTime: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Quote: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLQuoteElement> & import("react").BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;
+export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Body: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

package/lib/ui/questions/twitter/styles.js

@@ -0,0 +1,45 @@
+import { styled as o } from "@linaria/react";
+const e = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+`, r = o.div`
+  color: var(--color-neutrals-gray7);
+  font-size: 12px;
+  font-weight: var(--font-weight-default);
+  line-height: 18px;
+`, i = o.blockquote`
+  display: flex;
+  column-gap: 12px;
+  padding: 4px 16px 8px 0;
+  color: var(--color-primary-green2);
+  font-size: 12px;
+  font-family: var(--font-serif);
+  font-weight: var(--font-weight-default);
+
+  &:before {
+    content: '';
+    width: 2px;
+    background-color: var(--color-primary-green2);
+  }
+`, n = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+`, a = o.div`
+  color: var(--color-neutrals-gray9);
+  font-size: 12px;
+  font-weight: var(--font-weight-default);
+  line-height: 18px;
+`, l = o.img`
+  max-width: 100%;
+  border-radius: 8px;
+`;
+export {
+  a as Body,
+  e as Container,
+  r as DateTime,
+  n as Details,
+  l as Image,
+  i as Quote
+};

package/lib/utils/common.js

@@ -1,5 +1,15 @@
-const e = (t) => t.split(/\s+/).map((o) => o[0]).join("").toUpperCase(), a = (t) => t ? t.toLocaleString("en-US") : "0";
+const o = (t) => t.split(/\s+/).map((e) => e[0]).join("").toUpperCase(), i = (t) => t ? t.toLocaleString("en-US") : "0", a = (t) => t.toLocaleDateString("en-US", {
+  weekday: "short",
+  month: "short",
+  day: "numeric"
+}), n = (t) => t.toLocaleTimeString("en-US", {
+  hour: "2-digit",
+  minute: "2-digit"
+}), r = (t) => !isNaN(t.getTime());
 export {
-  e as abbreviate,
-  a as formatDecimals
+  o as abbreviate,
+  a as formatDate,
+  i as formatDecimals,
+  n as formatTime,
+  r as isValidDate
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.59.2",
+  "version": "0.61.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -36,12 +36,12 @@
     "react-window": "^1.8.9",
     "@lottiefiles/react-lottie-player": "*",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.23.1",
-    "@streamlayer/sdk-web": "^0.28.19",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.14",
+    "@streamlayer/feature-gamification": "^0.24.0",
+    "@streamlayer/sdk-web": "^0.28.20",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.15",
     "@streamlayer/sdk-web-api": "^0.0.1",
     "@streamlayer/sdk-web-core": "^0.17.8",
-    "@streamlayer/sdk-web-features": "^0.10.22",
+    "@streamlayer/sdk-web-features": "^0.10.23",
     "@streamlayer/sdk-web-interfaces": "^0.18.15",
     "@streamlayer/sdk-web-notifications": "^0.12.1",
     "@streamlayer/sdk-web-storage": "^0.0.4",
@@ -84,6 +84,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.28.5"
+    "@streamlayer/react": "^0.29.2"
   }
 }