@streamlayer/react-ui 0.92.0 → 0.93.0

package/lib/ui/gamification/question/notification/prediction-result/styles.js

@@ -1,10 +1,10 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as o } from "../../../../icons/index.js";
-import { ShowIn as t } from "../../../../show-in/index.js";
+import { ShowIn as e } from "../../../../show-in/index.js";
 import "react/jsx-runtime";
 import "react";
 import "@linaria/core";
-const u = 118, e = () => t, f = /* @__PURE__ */ s(e())({
+const d = 118, n = () => e, f = /* @__PURE__ */ s(n())({
   name: "Container",
   class: "c10131zw",
   propsAsIs: !0
@@ -12,15 +12,15 @@ const u = 118, e = () => t, f = /* @__PURE__ */ s(e())({
   name: "InnerContainer",
   class: "ir6k2eo",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), v = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c1hwoq9l",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "Title",
   class: "t4ujo4g",
   propsAsIs: !1
-}), c = () => n, v = /* @__PURE__ */ s(c())({
+}), c = () => t, u = /* @__PURE__ */ s(c())({
   name: "PointsTitle",
   class: "p1pjil1h",
   propsAsIs: !0
@@ -40,8 +40,8 @@ const u = 118, e = () => t, f = /* @__PURE__ */ s(e())({
   name: "FeedbackIcon",
   class: "frcvk3t",
   propsAsIs: !0
-}), S = /* @__PURE__ */ s("button")({
-  name: "CloseButton",
+}), S = /* @__PURE__ */ s("div")({
+  name: "CloseIconWrap",
   class: "c33p82r",
   propsAsIs: !1
 }), a = () => o, _ = /* @__PURE__ */ s(a())({
@@ -51,15 +51,15 @@ const u = 118, e = () => t, f = /* @__PURE__ */ s(e())({
 });
 export {
   x as AnswerText,
-  S as CloseButton,
   _ as CloseIcon,
+  S as CloseIconWrap,
   f as Container,
-  d as Content,
+  v as Content,
   w as FeedbackIcon,
   C as InnerContainer,
-  u as MIN_CONTENT_HEIGHT,
-  v as PointsTitle,
+  d as MIN_CONTENT_HEIGHT,
+  u as PointsTitle,
   T as Subtitle,
   b as SubtitleFG,
-  n as Title
+  t as Title
 };

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

@@ -1,11 +1,11 @@
-import { jsx as m, jsxs as N, Fragment as G } from "react/jsx-runtime";
-import { useState as E, useEffect as J, useCallback as p, useMemo as f } from "react";
-import { QuestionType as c, QuestionStatus as C } from "@streamlayer/sdk-web-types";
-import { ExpiredAlert as K } from "./expired-alert/index.js";
-import { Feedback as U } from "./feedback/index.js";
-import { QuestionScrollContainer as X, Container as Z, Content as _, Title as $, Options as Q } from "./styles.js";
-import { VotingOption as tt } from "./vote-option/index.js";
-import { WinBar as rt } from "./win-bar/index.js";
+import { jsx as n, jsxs as k, Fragment as J } from "react/jsx-runtime";
+import { useState as I, useEffect as K, useCallback as R, useMemo as f } from "react";
+import { QuestionType as o, QuestionStatus as E } from "@streamlayer/sdk-web-types";
+import { ExpiredAlert as U } from "./expired-alert/index.js";
+import { Feedback as X } from "./feedback/index.js";
+import { QuestionScrollContainer as Z, Container as _, Content as $, Title as Q, Options as tt } from "./styles.js";
+import { VotingOption as rt } from "./vote-option/index.js";
+import { WinBar as it } from "./win-bar/index.js";
 import "../../icons/index.js";
 import "@linaria/react";
 import "./expired-alert/styles.js";
@@ -18,28 +18,28 @@ import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "./win-bar/styles.js";
-const wt = ({ openedQuestion: t, isLoading: I, vote: w, close: v }) => {
-  var g, k;
-  const P = t.subject, s = t.type, o = t.status, V = (g = t.options) == null ? void 0 : g.options, d = t.marketClosed, [R, b] = E(!1), [y, L] = E(!1), [T, O] = E(!0), [n, M] = E(!1), [x, q] = E(""), h = t == null ? void 0 : t.id;
-  J(() => {
-    s === c.PREDICTION ? d && O(!1) : o === C.RESOLVED && O(!1);
+const vt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
+  var P, g;
+  const A = t.subject, a = t.type, m = t.status, V = (P = t.options) == null ? void 0 : P.options, d = t.marketClosed, [O, b] = I(!1), [y, L] = I(!1), [T, w] = I(!0), [c, M] = I(!1), [x, D] = I(""), h = t == null ? void 0 : t.id;
+  K(() => {
+    a === o.PREDICTION ? d && w(!1) : m === E.RESOLVED && w(!1);
   }, []);
-  const j = p((e) => {
+  const j = R((e) => {
     L(e), b(!0);
-  }, []), D = p(
+  }, []), q = R(
     async (e) => {
       if (h) {
         const u = e.currentTarget.value;
-        q(u), await w(h, u);
+        D(u), await p(h, u);
       }
     },
-    [h, q, w]
-  ), B = p(() => {
+    [h, D, p]
+  ), B = R(() => {
     M(!0), setTimeout(v, 3e3);
   }, [v]), r = f(
     () => t == null ? void 0 : t.answers.find((e) => e.youVoted === !0),
     [t]
-  ), a = f(
+  ), s = f(
     () => !!(t != null && t.answers.find((e) => e.correct === !0)),
     [t]
   ), i = f(
@@ -51,77 +51,78 @@ const wt = ({ openedQuestion: t, isLoading: I, vote: w, close: v }) => {
       ...e,
       questionVoted: !!r,
       youSelected: x === e.id,
-      isLoading: I,
-      hasCorrectAnswer: a,
+      isLoading: C,
+      hasCorrectAnswer: s,
       questionType: t.type,
-      answerTimeExpired: n,
-      questionStatus: o,
+      answerTimeExpired: c,
+      questionStatus: m,
       imageMode: (u = t.appearance) == null ? void 0 : u.images,
-      onVote: D
+      onVote: q
     };
   }) : [], [
-    a,
-    n,
-    I,
+    s,
+    c,
+    C,
     t,
     r,
-    o,
-    D,
+    m,
+    q,
     x
-  ]), F = V && (V.case === "trivia" || V.case === "prediction") ? V.value : void 0, l = o === C.RESOLVED && s === c.TRIVIA && !r && !T, S = s === c.TRIVIA && y && R && T, A = f(() => s === c.PREDICTION ? !!(r && !a || r && a && (i != null && i.youVoted)) : !0, [s, r, a, i]), Y = f(() => {
-    if (s === c.PREDICTION && r && (!a || a && (i != null && i.youVoted)))
+  ]), F = V && (V.case === "trivia" || V.case === "prediction") ? V.value : void 0, l = m === E.RESOLVED && a === o.TRIVIA && !r && !T, S = a === o.TRIVIA && y && O && T, N = f(() => a === o.PREDICTION ? !!(r && !s || r && s && (i != null && i.youVoted)) : !0, [a, r, s, i]), Y = f(() => {
+    if (a === o.PREDICTION && r && (!s || s && (i != null && i.youVoted)))
       return r.points;
-    if (!(l || n))
-      return o === C.RESOLVED ? 0 : r ? r.correct ? r.points : 0 : i == null ? void 0 : i.points;
+    if (!(l || c))
+      return m === E.RESOLVED ? 0 : r ? r.correct ? r.points : 0 : i == null ? void 0 : i.points;
   }, [
-    n,
+    c,
     r,
     i,
-    o,
+    m,
     l,
-    s,
-    a
-  ]), H = f(() => s === c.PREDICTION && r ? a ? a && (i != null && i.youVoted) ? "You won" : "" : "To win" : l || n ? "Time expired" : s === c.POLL ? "Time remaining" : r ? "You won" : "To win", [n, s, r, l, a, i]), z = r || l || S || s === c.TRIVIA && o === C.RESOLVED && T;
-  return /* @__PURE__ */ m(X, { children: /* @__PURE__ */ m(Z, { children: /* @__PURE__ */ N(_, { children: [
-    /* @__PURE__ */ m(
-      U,
+    a,
+    s
+  ]), H = f(() => a === o.PREDICTION && r ? s ? s && (i != null && i.youVoted) ? "You won" : "" : "To win" : l || c ? "Time expired" : a === o.POLL ? "Time remaining" : r ? "You won" : "To win", [c, a, r, l, s, i]), z = (a === o.TRIVIA || a === o.PREDICTION) && r && s && (i == null ? void 0 : i.youVoted), G = r || l || S || a === o.TRIVIA && m === E.RESOLVED && T;
+  return /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ n(_, { children: /* @__PURE__ */ k($, { children: [
+    /* @__PURE__ */ n(
+      X,
       {
         feedbackMessages: F,
         questionVoted: !!r,
         questionVotedCorrectly: r == null ? void 0 : r.correct,
-        questionType: s,
-        hasCorrectAnswer: a,
-        questionStatus: o,
+        questionType: a,
+        hasCorrectAnswer: s,
+        questionStatus: m,
         showExpiredNotification: l,
         showClosedNotificationTrivia: S,
-        votedInCurrentRender: R,
+        votedInCurrentRender: O,
         votedAfterQuestionClosed: y,
         enteredAnActiveQuestion: T,
         marketClosed: d
       }
     ),
-    A && /* @__PURE__ */ m(
-      rt,
+    N && /* @__PURE__ */ n(
+      it,
       {
         title: H,
         points: Y,
         onTimerExpired: B,
         questionType: t.type,
-        isTimer: !I,
+        isTimer: !C,
         isPlayingTimer: !r,
-        timerDuration: z ? 0 : Number(((k = t == null ? void 0 : t.appearance) == null ? void 0 : k.autoHideInterval) || "30")
+        animatePoints: z,
+        timerDuration: G ? 0 : Number(((g = t == null ? void 0 : t.appearance) == null ? void 0 : g.autoHideInterval) || "30")
       }
     ),
-    n ? /* @__PURE__ */ m(
-      K,
+    c ? /* @__PURE__ */ n(
+      U,
       {
         title: "More to come...",
         description: "Watch for additional enhanced stream interactive experience."
       }
-    ) : /* @__PURE__ */ N(G, { children: [
-      /* @__PURE__ */ m($, { style: A ? {} : { marginTop: 0 }, children: P }),
-      /* @__PURE__ */ m(Q, { children: W.map((e) => /* @__PURE__ */ m(
-        tt,
+    ) : /* @__PURE__ */ k(J, { children: [
+      /* @__PURE__ */ n(Q, { style: N ? {} : { marginTop: 0 }, children: A }),
+      /* @__PURE__ */ n(tt, { children: W.map((e) => /* @__PURE__ */ n(
+        rt,
         {
           ...e,
           markThatVoted: j,
@@ -135,5 +136,5 @@ const wt = ({ openedQuestion: t, isLoading: I, vote: w, close: v }) => {
   ] }) }) });
 };
 export {
-  wt as Vote
+  vt as Vote
 };

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

@@ -9,7 +9,7 @@ import "../../../video-player/styles.js";
 import "../../../../utils/common.js";
 import "../../../questions/insight/styles.js";
 const C = ({ instantView: r, ...p }) => /* @__PURE__ */ o(k, { children: [
-  /* @__PURE__ */ m(b, { instantView: r, ...p }),
+  /* @__PURE__ */ m(b, { instantView: r, ...p, isDetail: !0 }),
   (r == null ? void 0 : r.webLink) && /* @__PURE__ */ o(c, { href: r == null ? void 0 : r.webLink.url, target: "_blank", children: [
     r == null ? void 0 : r.webLink.label,
     /* @__PURE__ */ m(l, { name: "icon-external-link" })

package/lib/ui/gamification/vote/vote-option/index.js

@@ -1,83 +1,87 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { QuestionImages as a, QuestionType as i, QuestionStatus as T } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as P } from "../../../animated-counter/index.js";
-import { IconDefault as B, IconContainer as V, IconWrap as b, IconCircle as j, ButtonContainer as U, ButtonPct as $, ButtonBody as M, Title as W, Pts as y, Indicators as z, CheckIcon as F, Percentage as G } from "./styles.js";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { useState as b, useLayoutEffect as j } from "react";
+import { QuestionImages as a, QuestionType as o, QuestionStatus as S } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as U } from "../../../animated-counter/index.js";
+import { IconDefault as $, IconContainer as y, IconWrap as F, IconCircle as M, ButtonContainer as W, ButtonPct as z, ButtonBody as G, Title as H, Pts as J, Indicators as K, CheckIcon as X, Percentage as Y } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
 import "../../../icons/index.js";
-import "react";
-const f = {
-  [a.CENTERED]: (t) => /* @__PURE__ */ e(B, { alt: "option-icon", src: t }),
-  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(b, { style: { backgroundImage: `url(${t})` } }) }),
-  [a.ROUNDED]: (t) => /* @__PURE__ */ e(j, { alt: "option-icon", src: t }),
+const I = {
+  [a.CENTERED]: (t) => /* @__PURE__ */ n($, { alt: "option-icon", src: t }),
+  [a.TRANSPARENT]: (t) => /* @__PURE__ */ n(y, { children: /* @__PURE__ */ n(F, { style: { backgroundImage: `url(${t})` } }) }),
+  [a.ROUNDED]: (t) => /* @__PURE__ */ n(M, { alt: "option-icon", src: t }),
   [a.NONE]: () => null,
   [a.UNSET]: () => null
-}, H = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: o }) => {
-  if (t === i.POLL && r)
+}, Z = ({ questionType: t, hasCorrectAnswer: c, correct: r, youVoted: i, questionVoted: e }) => {
+  if (t === o.POLL && i)
     return "correct";
-  if (t === i.PREDICTION) {
-    if (c && o)
-      return r ? n ? "correct" : "incorrect" : "unset";
-    if (r)
+  if (t === o.PREDICTION) {
+    if (c && e)
+      return i ? r ? "correct" : "incorrect" : "unset";
+    if (i)
       return "correct";
   }
-  return t === i.TRIVIA && o && r ? n ? "correct" : "incorrect" : "unset";
-}, J = ({
+  return t === o.TRIVIA && e && i ? r ? "correct" : "incorrect" : "unset";
+}, _ = ({
   questionType: t,
   questionVoted: c,
-  correct: n,
-  hasCorrectAnswer: r,
-  questionStatus: o
-}) => t === i.TRIVIA ? c && n : t === i.PREDICTION ? c && n && r || o === T.RESOLVED && n : !1, rt = (t) => {
-  var R;
+  correct: r,
+  hasCorrectAnswer: i,
+  questionStatus: e
+}) => t === o.TRIVIA ? c && r : t === o.PREDICTION ? c && r && i || e === S.RESOLVED && r : !1, st = (t) => {
+  var N;
   const {
     // option props
     id: c,
-    icon: n,
-    text: r,
-    percentageDecimal: o,
-    points: D,
+    icon: r,
+    text: i,
+    percentageDecimal: e,
+    points: T,
     // extra props
-    onVote: S,
-    markThatVoted: w,
+    onVote: A,
+    markThatVoted: D,
     youSelected: h,
     questionVoted: s,
-    imageMode: C,
-    answerTimeExpired: O,
-    questionStatus: E,
-    isLoading: g,
+    imageMode: E,
+    answerTimeExpired: w,
+    questionStatus: C,
+    isLoading: O,
     questionType: d,
-    correct: A,
+    correct: g,
     hasCorrectAnswer: k,
-    votedAfterQuestionClosed: v,
-    enteredAnActiveQuestion: p,
-    marketClosed: u
-  } = t, I = H(t), x = J({ questionType: d, questionVoted: s, correct: A, hasCorrectAnswer: k, questionStatus: E }), m = u && d === i.PREDICTION, N = s || m, L = d === i.PREDICTION && !s && !u;
-  return /* @__PURE__ */ l(
-    U,
+    votedAfterQuestionClosed: x,
+    enteredAnActiveQuestion: P,
+    marketClosed: l
+  } = t, [L, p] = b(e), m = Z(t), v = _({ questionType: d, questionVoted: s, correct: g, hasCorrectAnswer: k, questionStatus: C }), f = l && d === o.PREDICTION, R = s || f, Q = d === o.PREDICTION && !s && !l, B = s && !h && m !== "incorrect";
+  return j(() => {
+    e > 0 && (p(0), requestAnimationFrame(() => {
+      p(e);
+    }));
+  }, [e]), /* @__PURE__ */ u(
+    W,
     {
       value: c,
       "data-selected": h,
-      "data-answer-state": I,
-      disabled: s || g || O || m && !p || m && p && v,
-      "data-is-not-checked": s && !h && I !== "incorrect",
-      onClick: (Q) => {
-        w(
-          d === i.PREDICTION ? u : E === T.RESOLVED
-        ), S(Q);
+      "data-answer-state": m,
+      disabled: s || O || w || f && !P || f && P && x,
+      "data-is-not-checked": B,
+      onClick: (V) => {
+        D(
+          d === o.PREDICTION ? l : C === S.RESOLVED
+        ), A(V);
       },
       children: [
-        /* @__PURE__ */ e($, { "data-answer-state": I, style: { width: `${N ? o : 0}%` } }),
-        /* @__PURE__ */ l(M, { children: [
-          n && C && ((R = f[C]) == null ? void 0 : R.call(f, n)),
-          /* @__PURE__ */ e(W, { children: r }),
-          L && /* @__PURE__ */ l("div", { children: [
-            /* @__PURE__ */ e(P, { value: D }),
-            /* @__PURE__ */ e(y, { children: "pts" })
+        /* @__PURE__ */ n(z, { "data-answer-state": m, style: { width: `${R ? L : 0}%` } }),
+        /* @__PURE__ */ u(G, { children: [
+          r && E && ((N = I[E]) == null ? void 0 : N.call(I, r)),
+          /* @__PURE__ */ n(H, { children: i }),
+          Q && /* @__PURE__ */ u("div", { children: [
+            T,
+            /* @__PURE__ */ n(J, { children: "pts" })
           ] }),
-          N && /* @__PURE__ */ l(z, { children: [
-            x && /* @__PURE__ */ e(F, { name: "selected" }),
-            /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(P, { value: o, suffix: "%" }) })
+          R && /* @__PURE__ */ u(K, { children: [
+            v && /* @__PURE__ */ n(X, { name: "selected" }),
+            /* @__PURE__ */ n(Y, { children: /* @__PURE__ */ n(U, { value: e, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -85,5 +89,5 @@ const f = {
   );
 };
 export {
-  rt as VotingOption
+  st as VotingOption
 };

package/lib/ui/gamification/vote/win-bar/index.d.ts

@@ -5,6 +5,7 @@ interface WinBarProps {
     points?: number;
     isPlayingTimer?: boolean;
     isTimer?: boolean;
+    animatePoints?: boolean;
     questionType?: QuestionType;
     timerDuration?: number;
     onTimerExpired?: () => void;

package/lib/ui/gamification/vote/win-bar/index.js

@@ -1,35 +1,36 @@
-import { jsxs as i, jsx as r, Fragment as d } from "react/jsx-runtime";
-import { QuestionType as t } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as l } from "../../../animated-counter/index.js";
-import { Timer as s } from "../../../timer/index.js";
-import { WinBarContainer as h, Content as P, Title as C, WinIcon as f, Points as u, PointsCount as I, PointsUnits as T } from "./styles.js";
+import { jsxs as i, jsx as r, Fragment as p } from "react/jsx-runtime";
+import { QuestionType as o } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as s } from "../../../animated-counter/index.js";
+import { Timer as h } from "../../../timer/index.js";
+import { WinBarContainer as P, Content as C, Title as f, WinIcon as u, Points as I, PointsCount as y, PointsUnits as T } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
 import "react";
 import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../icons/index.js";
-const N = ({
-  title: o,
-  points: e,
+const R = ({
+  title: e,
+  points: n,
   isPlayingTimer: m,
   isTimer: c,
-  questionType: n,
-  timerDuration: p,
-  onTimerExpired: a
-}) => /* @__PURE__ */ i(h, { style: { justifyContent: n === t.PREDICTION ? "center" : "space-between" }, children: [
-  /* @__PURE__ */ i(P, { children: [
-    o && /* @__PURE__ */ r(C, { children: o }),
-    e !== void 0 && n !== t.POLL && /* @__PURE__ */ i(d, { children: [
-      /* @__PURE__ */ r(f, { name: "icon-trophy" }),
-      /* @__PURE__ */ i(u, { children: [
-        /* @__PURE__ */ r(I, { children: /* @__PURE__ */ r(l, { value: e }) }),
+  animatePoints: a,
+  questionType: t,
+  timerDuration: d,
+  onTimerExpired: l
+}) => /* @__PURE__ */ i(P, { style: { justifyContent: t === o.PREDICTION ? "center" : "space-between" }, children: [
+  /* @__PURE__ */ i(C, { children: [
+    e && /* @__PURE__ */ r(f, { children: e }),
+    n !== void 0 && t !== o.POLL && /* @__PURE__ */ i(p, { children: [
+      /* @__PURE__ */ r(u, { name: "icon-trophy" }),
+      /* @__PURE__ */ i(I, { children: [
+        /* @__PURE__ */ r(y, { children: a ? /* @__PURE__ */ r(s, { value: n, delay: 0.3 }) : n }),
         /* @__PURE__ */ r(T, { children: "PTS" })
       ] })
     ] })
   ] }),
-  c && n !== t.PREDICTION && /* @__PURE__ */ r(s, { isPlaying: m, onTimerExpired: a, duration: p })
+  c && t !== o.PREDICTION && /* @__PURE__ */ r(h, { isPlaying: m, onTimerExpired: l, duration: d })
 ] });
 export {
-  N as WinBar
+  R as WinBar
 };

package/lib/ui/navigation/masters.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export declare const Navigation: import("@linaria/react").WYWEvalMeta & import("react").FC<{
+export declare const Navigation: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const NavigationItems: import("@linaria/react").WYWEvalMeta & import("react").FC<{
     children: import("react").ReactElement<import("./button").ButtonProps, string | import("react").JSXElementConstructor<any>>[];
     className?: string | undefined;
 }>;

package/lib/ui/navigation/masters.js

@@ -1,11 +1,16 @@
-import { styled as o } from "@linaria/react";
-import { Navigation as a } from "./index.js";
+import { styled as a } from "@linaria/react";
+import { Navigation as s } from "./index.js";
 import "react/jsx-runtime";
-const t = () => a, p = /* @__PURE__ */ o(t())({
+const p = /* @__PURE__ */ a("div")({
   name: "Navigation",
   class: "n19lpak2",
+  propsAsIs: !1
+}), o = () => s, e = /* @__PURE__ */ a(o())({
+  name: "NavigationItems",
+  class: "n1w473c2",
   propsAsIs: !0
 });
 export {
-  p as Navigation
+  p as Navigation,
+  e as NavigationItems
 };

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

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

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

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

package/lib/ui/skeleton/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type SkeletonProps = {
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    loading: boolean;
+};
+export declare const Skeleton: React.FC<SkeletonProps>;

package/lib/ui/skeleton/index.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Container as m } from "./styles.js";
+import "@linaria/react";
+const f = ({ children: r, style: o, loading: t }) => t ? /* @__PURE__ */ e(m, { style: o, children: r }) : r;
+export {
+  f as Skeleton
+};

package/lib/ui/skeleton/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/skeleton/styles.js

@@ -0,0 +1,9 @@
+import { styled as s } from "@linaria/react";
+const e = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cqg02m",
+  propsAsIs: !1
+});
+export {
+  e as Container
+};

package/lib/ui/theme/breakpoints.d.ts

@@ -1,6 +1,9 @@
-import { BREAKPOINTS } from './constants';
+import { BREAKPOINTS, ORIENTATION } from './constants';
 export type Breakpoints = keyof typeof BREAKPOINTS;
+export type Orientation = keyof typeof ORIENTATION;
 export declare const breakpoints: {
     up: (key: Breakpoints) => (styles: TemplateStringsArray) => string;
     down: (key: Breakpoints) => (styles: TemplateStringsArray) => string;
+    intermediate: (down: Breakpoints, up: Breakpoints) => (styles: TemplateStringsArray) => string;
+    orientation: (key: Orientation) => (styles: TemplateStringsArray) => string;
 };