@streamlayer/react-ui 0.91.1 → 0.92.0

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { HeaderNodeRef, type AppNodeRef } from '../../../../app/masters';
 import { icons } from '../../../../icons';
 export type OnboardingInviteCardProps = {
-    appNode: React.MutableRefObject<HTMLDivElement | null>;
+    renderToNode: AppNodeRef | HeaderNodeRef;
     inviteLink?: string;
     inviteCardTitle?: string;
     inviteCardSubtext?: string;

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

@@ -8,7 +8,7 @@ import "../../../copyNotification/index.js";
 import "../../../copyNotification/styles.js";
 import "@linaria/react";
 const E = ({
-  appNode: t,
+  renderToNode: t,
   inviteLink: r,
   socialLinks: i,
   inviteCardTitle: c,

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

@@ -3,7 +3,9 @@ import { icons } from '../../../../icons';
 type OnboardingRulesProps = {
     rules?: OnboardingRule[];
     rulesTitle?: string;
+    termsText?: string;
     primaryColor?: string;
+    openTerms: () => void;
 };
 export type OnboardingRule = {
     label: string;

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

@@ -1,18 +1,24 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import { SvgIcon as l } from "../../../../icons/index.js";
-import { Container as c, Content as a, Title as h, RulesList as s, RulesItem as p, RuleIcon as R, RuleText as u, TermsButton as x } from "./styles.js";
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { SvgIcon as a } from "../../../../icons/index.js";
+import { Container as h, Content as s, Title as p, RulesList as C, RulesItem as R, RuleIcon as u, RuleText as x, TermsButton as T } from "./styles.js";
 import "@linaria/react";
 import "react";
-const b = ({ rules: e, rulesTitle: t, primaryColor: i }) => /* @__PURE__ */ o(c, { children: [
-  /* @__PURE__ */ o(a, { children: [
-    /* @__PURE__ */ n(h, { children: t }),
-    /* @__PURE__ */ n(s, { children: e == null ? void 0 : e.map(({ label: d, icon: r }, m) => /* @__PURE__ */ o(p, { children: [
-      r && /* @__PURE__ */ n(R, { style: { backgroundColor: i }, children: /* @__PURE__ */ n(l, { name: r, "data-icon": r }) }),
-      /* @__PURE__ */ n(u, { children: d })
-    ] }, m)) })
+const k = ({
+  rules: e,
+  rulesTitle: t,
+  termsText: i,
+  primaryColor: d,
+  openTerms: l
+}) => /* @__PURE__ */ r(h, { children: [
+  /* @__PURE__ */ r(s, { children: [
+    /* @__PURE__ */ n(p, { children: t }),
+    /* @__PURE__ */ n(C, { children: e == null ? void 0 : e.map(({ label: m, icon: o }, c) => /* @__PURE__ */ r(R, { children: [
+      o && /* @__PURE__ */ n(u, { style: { backgroundColor: d }, children: /* @__PURE__ */ n(a, { name: o, "data-icon": o }) }),
+      /* @__PURE__ */ n(x, { children: m })
+    ] }, c)) })
   ] }),
-  /* @__PURE__ */ n(x, { children: "See Terms and Conditions" })
+  i && /* @__PURE__ */ n(T, { onClick: l, children: "See Terms and Conditions" })
 ] });
 export {
-  b as OnboardingRules
+  k as OnboardingRules
 };

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type OnboardingTermsProps = {
+    termsTitle?: string;
+    termsText?: string;
+};
+export declare const OnboardingTerms: React.FC<OnboardingTermsProps>;
+export {};

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

@@ -0,0 +1,10 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Container as o, Content as t, Title as l, ScrollingText as c } from "./styles.js";
+import "@linaria/react";
+const h = ({ termsTitle: n, termsText: e }) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ i(t, { children: [
+  /* @__PURE__ */ r(l, { children: n }),
+  /* @__PURE__ */ r(c, { children: e })
+] }) });
+export {
+  h as OnboardingTerms
+};

package/lib/ui/gamification/onboarding/slides/onboarding-terms/styles.d.ts

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

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

@@ -0,0 +1,24 @@
+import { styled as s } from "@linaria/react";
+const t = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cj0g35h",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "c1xkhrbn",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "tifzb8b",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "ScrollingText",
+  class: "stduw5c",
+  propsAsIs: !1
+});
+export {
+  t as Container,
+  e as Content,
+  l as ScrollingText,
+  o as Title
+};

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

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

package/lib/ui/gamification/vote/styles.d.ts

@@ -1,5 +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 QuestionScrollContainer: any;
 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<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Options: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -1,24 +1,30 @@
 import { styled as s } from "@linaria/react";
-const t = /* @__PURE__ */ s("div")({
+import { SDKScrollContainer as o } from "../../app/styles.js";
+const l = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c14ielyq",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), n = () => o, a = /* @__PURE__ */ s(n())({
+  name: "QuestionScrollContainer",
+  class: "q1tlqx57",
+  propsAsIs: !0
+}), c = /* @__PURE__ */ s("div")({
   name: "Content",
-  class: "c1tlqx57",
+  class: "c1hq58md",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "Title",
-  class: "t1hq58md",
+  class: "t1c8nxcx",
   propsAsIs: !1
-}), a = /* @__PURE__ */ s("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "Options",
-  class: "o1c8nxcx",
+  class: "oiozuc3",
   propsAsIs: !1
 });
 export {
-  t as Container,
-  o as Content,
-  a as Options,
-  e as Title
+  l as Container,
+  c as Content,
+  r as Options,
+  a as QuestionScrollContainer,
+  i as Title
 };

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

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { QuestionImages as a, QuestionType as i, QuestionStatus as h } from "@streamlayer/sdk-web-types";
+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 "react-countup";
@@ -28,51 +28,51 @@ const f = {
   correct: n,
   hasCorrectAnswer: r,
   questionStatus: o
-}) => t === i.TRIVIA ? c && n : t === i.PREDICTION ? c && n && r || o === h.RESOLVED && n : !1, rt = (t) => {
-  var D;
+}) => t === i.TRIVIA ? c && n : t === i.PREDICTION ? c && n && r || o === T.RESOLVED && n : !1, rt = (t) => {
+  var R;
   const {
     // option props
     id: c,
     icon: n,
     text: r,
     percentageDecimal: o,
-    points: S,
+    points: D,
     // extra props
-    onVote: T,
-    markThatVoted: O,
-    youSelected: E,
+    onVote: S,
+    markThatVoted: w,
+    youSelected: h,
     questionVoted: s,
     imageMode: C,
-    answerTimeExpired: w,
-    questionStatus: u,
+    answerTimeExpired: O,
+    questionStatus: E,
     isLoading: g,
     questionType: d,
     correct: A,
     hasCorrectAnswer: k,
     votedAfterQuestionClosed: v,
-    enteredAnActiveQuestion: R,
-    marketClosed: p
-  } = t, I = H(t), x = J({ questionType: d, questionVoted: s, correct: A, hasCorrectAnswer: k, questionStatus: u }), m = p && d === i.PREDICTION, N = s || m, L = d === i.PREDICTION && !s && u !== h.RESOLVED;
+    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,
     {
       value: c,
-      "data-selected": E,
+      "data-selected": h,
       "data-answer-state": I,
-      disabled: s || g || w || m && !R || m && R && v,
-      "data-is-not-checked": s && !E && I !== "incorrect",
+      disabled: s || g || O || m && !p || m && p && v,
+      "data-is-not-checked": s && !h && I !== "incorrect",
       onClick: (Q) => {
-        O(
-          d === i.PREDICTION ? p : u === h.RESOLVED
-        ), T(Q);
+        w(
+          d === i.PREDICTION ? u : E === T.RESOLVED
+        ), S(Q);
       },
       children: [
         /* @__PURE__ */ e($, { "data-answer-state": I, style: { width: `${N ? o : 0}%` } }),
         /* @__PURE__ */ l(M, { children: [
-          n && C && ((D = f[C]) == null ? void 0 : D.call(f, n)),
+          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: S }),
+            /* @__PURE__ */ e(P, { value: D }),
             /* @__PURE__ */ e(y, { children: "pts" })
           ] }),
           N && /* @__PURE__ */ l(z, { children: [

package/lib/ui/navigation/button/LeaderBoard.js

@@ -2,26 +2,25 @@ import { jsx as r } from "react/jsx-runtime";
 import { styled as e } from "@linaria/react";
 import { SvgIcon as a } from "../../icons/index.js";
 import { Button as d } from "./index.js";
-import "../../../LeaderBoard_fzzlxb-w40geAFS.js";
 import "react";
 import "./styles.js";
-const n = () => a, m = /* @__PURE__ */ e(n())({
+const n = () => a, c = /* @__PURE__ */ e(n())({
   name: "ButtonIcon",
   class: "b180jd7l",
   propsAsIs: !0
-}), u = "leaderboard", I = (o) => {
+}), b = "leaderboard", u = (o) => {
   var t;
   return /* @__PURE__ */ r(d, {
     ...o,
     label: "Leader Board",
     id: "leaderboard",
-    icon: /* @__PURE__ */ r(m, {
+    icon: /* @__PURE__ */ r(c, {
       name: "icon-btn-leaderboard",
       "data-selected": (t = o.active) == null ? void 0 : t.toString()
     })
   });
 };
 export {
-  I as LeaderBoardButton,
-  u as LeaderBoardButtonId
+  u as LeaderBoardButton,
+  b as LeaderBoardButtonId
 };

package/lib/ui/navigation/index.js

@@ -1,17 +1,16 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { styled as r } from "@linaria/react";
-import "../../index_ej4hfx-w40geAFS.js";
 const n = /* @__PURE__ */ r("div")({
   name: "Buttons",
   class: "b6tbwuy",
   propsAsIs: !1
-}), a = ({
+}), i = ({
   children: t,
-  className: o
-}) => /* @__PURE__ */ s(n, {
-  className: o,
+  className: s
+}) => /* @__PURE__ */ o(n, {
+  className: s,
   children: t
 });
 export {
-  a as Navigation
+  i as Navigation
 };

package/lib/ui/navigation/masters.js

@@ -1,13 +1,11 @@
 import { styled as o } from "@linaria/react";
-import { Navigation as t } from "./index.js";
-import "../../masters_m6itlr-w40geAFS.js";
+import { Navigation as a } from "./index.js";
 import "react/jsx-runtime";
-import "../../index_ej4hfx-w40geAFS.js";
-const i = () => t, n = /* @__PURE__ */ o(i())({
+const t = () => a, p = /* @__PURE__ */ o(t())({
   name: "Navigation",
   class: "n19lpak2",
   propsAsIs: !0
 });
 export {
-  n as Navigation
+  p as Navigation
 };

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

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

package/lib/utils/createDemo.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as g, Fragment as y } from "react/jsx-runtime";
 import { useMemo as u, useState as i, useEffect as E } from "react";
-import { anonymous as l } from "@streamlayer/sdk-web-anonymous-auth";
-import { Developer as D } from "./debug/components/developer.js";
-import { DeveloperStorage as w } from "./storage.js";
-import { useStreamLayerApp as x } from "./useStreamLayerApp.js";
+import { useStreamLayerApp as l } from "@streamlayer/react/useStreamLayerApp";
+import { anonymous as D } from "@streamlayer/sdk-web-anonymous-auth";
+import { Developer as w } from "./debug/components/developer.js";
+import { DeveloperStorage as x } from "./storage.js";
 import "@linaria/react";
 import "./debug/components/bypassLogin.js";
 import "./debug/components/copyLogs.js";
@@ -14,36 +14,35 @@ import "@nanostores/react";
 import "@streamlayer/sdk-web-core";
 import "./debug/components/sdkKey.js";
 import "@streamlayer/sdk-web-storage";
-import "@streamlayer/sdk-web";
 function K({
   Component: o,
   Story: r,
   args: n,
   autoEnable: a
 }) {
-  const m = u(() => new w(), []), [p, f] = i(m.getEnv()), [c, v] = i(m.getSdkKey() || "set-sdk-key"), [s, k] = i(m.getEvent() || ""), S = u(() => {
+  const s = u(() => new x(), []), [p, f] = i(s.getEnv()), [c, v] = i(s.getSdkKey() || "set-sdk-key"), [m, k] = i(s.getEvent() || ""), S = u(() => {
     const d = /* @__PURE__ */ new Set();
-    return d.add(l), d;
-  }, []), t = x(c, S, p === "production", a);
+    return d.add(D), d;
+  }, []), t = l(c, S, p === "production", a);
   return E(() => {
-    s && t && t.createEventSession(s);
+    m && t && t.createEventSession(m);
   }, [t]), /* @__PURE__ */ g(y, { children: [
     t ? /* @__PURE__ */ e(o, { Story: r, sdk: t, args: n }) : /* @__PURE__ */ e("div", { children: "wait sdk..." }),
     /* @__PURE__ */ e(
-      D,
+      w,
       {
         sdk: t,
         sdkKey: c,
         setSdkKey: v,
         env: p,
         setEnv: f,
-        event: s,
+        event: m,
         setEvent: k
       }
     )
   ] });
 }
-function P(o, r = !0) {
+function O(o, r = !0) {
   return {
     decorators: [
       (n) => /* @__PURE__ */ e(K, { Story: n, Component: o, autoEnable: r })
@@ -51,5 +50,5 @@ function P(o, r = !0) {
   };
 }
 export {
-  P as createDemo
+  O as createDemo
 };