@streamlayer/react-ui 1.3.3 → 1.5.0

package/lib/app/app/Advertisement/index.d.ts

@@ -4,6 +4,7 @@ export type StreamLayerSDKAdvertisementProps = {
     event?: string;
     isMobileScreen?: boolean;
     persistent?: boolean;
+    skipTypeCheck?: boolean;
     sidebar?: 'left' | 'right';
     banner?: 'top' | 'bottom';
     layoutMode?: 'cover' | 'side-by-side';

package/lib/app/app/Advertisement/index.js

@@ -1,101 +1,107 @@
-import { jsx as m } from "react/jsx-runtime";
-import { styled as u } from "@linaria/react";
-import { useStore as f } from "@nanostores/react";
-import { useAnalyticsListener as p } from "../../../hooks/analytics.js";
-import { useEffect as v, useRef as A, useMemo as y } from "react";
-import { eventBus as d } from "@streamlayer/sdk-web-interfaces";
-import { FeatureType as g, PromotionType as S } from "@streamlayer/sdk-web-types";
-import { useAppApp as b } from "../useApp.js";
-import { AdvertisementUI as h } from "../../../ui/advertisement/index.js";
-const L = /* @__PURE__ */ u("div")({
+import { jsx as l } from "react/jsx-runtime";
+import { styled as p } from "@linaria/react";
+import { useStore as u } from "@nanostores/react";
+import { useAnalyticsListener as v } from "../../../hooks/analytics.js";
+import { useEffect as A, useRef as y, useMemo as g } from "react";
+import { eventBus as f } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as S, PromotionType as b } from "@streamlayer/sdk-web-types";
+import { useAppApp as h } from "../useApp.js";
+import { AdvertisementUI as L } from "../../../ui/advertisement/index.js";
+const E = /* @__PURE__ */ p("div")({
   name: "AdvertisementUIWrap",
   class: "aa6pjif",
   propsAsIs: !1
-}), E = (t) => {
+}), I = (t) => {
   const e = t.target;
   if (e instanceof HTMLAnchorElement && e.target === "_blank") {
-    const i = e.getAttribute("data-promo-id") || "", r = e.getAttribute("data-promo-type") || S.UNSET;
-    e.getAttribute("data-analytics") === "button" && d.emit("advertisement", {
+    const r = e.getAttribute("data-promo-id") || "", i = e.getAttribute("data-promo-type") || b.UNSET;
+    e.getAttribute("data-analytics") === "button" && f.emit("advertisement", {
       action: "buttonSelect",
       payload: {
-        advertisementId: i,
-        advertisementType: r
+        advertisementId: r,
+        advertisementType: i
       }
-    }), e.getAttribute("data-analytics") === "banner" && d.emit("advertisement", {
+    }), e.getAttribute("data-analytics") === "banner" && f.emit("advertisement", {
       action: "bannerSelect",
       payload: {
-        advertisementId: i,
-        advertisementType: r
+        advertisementId: r,
+        advertisementType: i
       }
     });
   }
-}, I = ({
+}, T = ({
   gamification: t,
   layoutMode: e,
+  skipTypeCheck: r,
   sidebar: i,
-  banner: r,
-  isMobileScreen: c,
-  persistent: o
+  banner: n,
+  isMobileScreen: d,
+  persistent: a
 }) => {
-  const a = A(null), s = f(t.advertisement.$list), n = y(
-    () => t.advertisement.getActiveAdvertisement(o),
+  const s = y(null), m = u(t.advertisement.$list), o = g(
+    () => t.advertisement.getActiveAdvertisement(a),
     // fire getActiveNotification when notifications were updated
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [s, o]
+    [m, a]
   );
-  return p(a, {
-    enabled: !!n,
+  v(s, {
+    enabled: !!o,
     event: "click",
-    listener: E
-  }), n ? /* @__PURE__ */ m(L, {
-    ref: a,
+    listener: I
+  });
+  const c = !n && !i;
+  return o ? /* @__PURE__ */ l(E, {
+    ref: s,
     style: {
-      height: !r && !i ? "auto" : "100%"
+      height: c ? "auto" : "100%"
     },
-    className: c ? "mobile-view" : "",
-    children: /* @__PURE__ */ m(h, {
+    className: d ? "mobile-view" : "",
+    children: /* @__PURE__ */ l(L, {
+      skipTypeCheck: r,
       sidebar: i,
-      banner: r,
-      advertisement: n,
+      banner: n,
+      advertisement: o,
       layoutMode: e
     })
   }) : null;
-}, O = ({
+}, W = ({
   sdk: t,
   sidebar: e,
-  banner: i,
-  event: r,
-  layoutMode: c,
-  isMobileScreen: o,
-  persistent: a
+  banner: r,
+  skipTypeCheck: i,
+  event: n,
+  layoutMode: d,
+  isMobileScreen: a,
+  persistent: s
 }) => {
   const {
-    deactivate: s
-  } = b(t);
-  v(() => {
-    r ? t.createEventSession(r) : s();
-  }, [r, s, t]);
-  const n = f(t.featuresList.getStore());
-  if (e && i)
-    return /* @__PURE__ */ m("div", {
+    deactivate: m
+  } = h(t);
+  A(() => {
+    n ? t.createEventSession(n) : m();
+  }, [n, m, t]);
+  const o = u(t.featuresList.getStore());
+  if (e && r)
+    return /* @__PURE__ */ l("div", {
       style: {
         color: "red"
       },
       children: "define either sidebar or banner, not both."
     });
-  if (!n)
+  if (!o)
     return null;
-  const l = t.getFeature(g.GAMES);
-  return l ? /* @__PURE__ */ m(I, {
-    gamification: l,
+  const c = t.getFeature(S.GAMES);
+  return c ? /* @__PURE__ */ l(T, {
+    gamification: c,
     sidebar: e,
-    banner: i,
-    layoutMode: c,
-    isMobileScreen: o,
-    persistent: a
+    banner: r,
+    layoutMode: d,
+    isMobileScreen: a,
+    persistent: s,
+    skipTypeCheck: i
   }) : null;
 };
 export {
-  L as AdvertisementUIWrap,
-  O as StreamLayerSDKAdvertisement
+  E as AdvertisementUIWrap,
+  W as StreamLayerSDKAdvertisement
 };

package/lib/app/app/Insight/index.d.ts

@@ -15,4 +15,5 @@ export type StreamLayerSDKInsightProps = {
 };
 export declare const StreamLayerSDKInsight: React.FC<StreamLayerSDKInsightProps & {
     sdk: StreamLayerSDK;
+    insightId?: string;
 }>;

package/lib/app/app/Insight/index.js

@@ -1,62 +1,69 @@
-import { jsx as p } from "react/jsx-runtime";
-import { styled as S } from "@linaria/react";
-import { useStore as m } from "@nanostores/react";
-import { useEffect as c } from "react";
-import { FeatureType as h, QuestionStatus as l } from "@streamlayer/sdk-web-types";
-import { Question as d } from "../Features/Gamification/Question.js";
-import { useAppApp as Q } from "../useApp.js";
-import { ShowIn as I } from "../../../ui/show-in/index.js";
-const a = () => d, y = /* @__PURE__ */ S(a())({
+import { jsx as i } from "react/jsx-runtime";
+import { styled as d } from "@linaria/react";
+import { useStore as S } from "@nanostores/react";
+import { useEffect as l, useRef as Q } from "react";
+import { FeatureType as h, QuestionStatus as w } from "@streamlayer/sdk-web-types";
+import { Question as y } from "../Features/Gamification/Question.js";
+import { useAppApp as A } from "../useApp.js";
+import { ShowIn as V } from "../../../ui/show-in/index.js";
+const v = () => y, x = /* @__PURE__ */ d(v())({
   name: "QuestionWrap",
   class: "q10hhsxv",
   propsAsIs: !0
-}), A = ({
+}), E = ({
   gamification: e,
   persistent: t,
-  hideHeader: n
+  hideHeader: f,
+  insightId: r
 }) => {
-  const i = m(e.openedQuestion.$store);
-  return c(() => e.feedList.getStore().subscribe(({
-    data: o
+  const s = Q(""), n = S(e.openedQuestion.$store);
+  return l(() => r ? (!t || e.isOpenedQuestion(r) || (s.current = r, e.getFeedItem(r).then((o) => {
+    s.current === r && e.openQuestion(r, o);
+  })), () => {
+    s.current = "";
+  }) : e.feedList.getStore().subscribe(({
+    data: u
   }) => {
-    if (o) {
-      const s = o, r = s == null ? void 0 : s.find(({
-        type: f,
-        attributes: u
-      }) => f === "insight" && (u == null ? void 0 : u.status) === l.ACTIVE);
-      r && (!t || e.isOpenedQuestion(r.id) || e.openQuestion(r.id, r));
+    if (u) {
+      const o = u, p = o == null ? void 0 : o.find(({
+        type: m,
+        attributes: c
+      }) => m === "insight" && (c == null ? void 0 : c.status) === w.ACTIVE);
+      p && (!t || e.isOpenedQuestion(p.id) || e.openQuestion(p.id, p));
     }
-  }), [e, t]), i ? /* @__PURE__ */ p(I, {
+  }), [e, t, r]), n ? /* @__PURE__ */ i(V, {
     style: {
       height: "100%"
     },
-    children: /* @__PURE__ */ p(y, {
-      hideHeader: n,
+    children: /* @__PURE__ */ i(x, {
+      hideHeader: f,
       gamification: e,
       hideSponsor: !0
     })
   }) : null;
-}, F = ({
+}, j = ({
   sdk: e,
   event: t,
-  persistent: n,
-  hideHeader: i
+  persistent: f,
+  insightId: r,
+  hideHeader: s
 }) => {
   const {
-    deactivate: o
-  } = Q(e);
-  if (c(() => {
-    t ? e.createEventSession(t) : o();
-  }, [t, o, e]), !m(e.featuresList.getStore()))
+    deactivate: n
+  } = A(e);
+  if (l(() => {
+    t ? e.createEventSession(t) : n();
+  }, [t, n, e]), !S(e.featuresList.getStore()))
     return null;
-  const r = e.getFeature(h.GAMES);
-  return r ? /* @__PURE__ */ p(A, {
-    persistent: n,
-    hideHeader: i,
-    gamification: r
+  const o = e.getFeature(h.GAMES);
+  return o ? /* @__PURE__ */ i(E, {
+    insightId: r,
+    persistent: f,
+    hideHeader: s,
+    gamification: o
   }) : null;
 };
 export {
-  y as QuestionWrap,
-  F as StreamLayerSDKInsight
+  x as QuestionWrap,
+  j as StreamLayerSDKInsight
 };

package/lib/app/app/story/insight/index.d.ts

@@ -1,6 +1,7 @@
 export declare const InsightStory: React.FC<{
     sdkKey?: string;
     eventId?: string;
+    insightId?: string;
     production?: boolean;
     onlyInsight?: boolean;
     hideHeader?: boolean;

package/lib/app/app/story/insight/index.js

@@ -1,57 +1,62 @@
 import { jsx as e } from "react/jsx-runtime";
 import { styled as d } from "@linaria/react";
-import { StreamLayerProvider as a, useStreamLayer as u } from "@streamlayer/react";
-import { StreamLayerSDKInsight as p } from "../../Insight/index.js";
-import { StreamLayerThemeProvider as c } from "../../../../ui/theme/index.js";
-import { useStreamLayerDebug as y } from "../../../../utils/debug/index.js";
-import { customTheme as f } from "./styles.js";
-import { Video as h } from "./video.js";
-const l = /* @__PURE__ */ d("div")({
+import { StreamLayerProvider as u, useStreamLayer as p } from "@streamlayer/react";
+import { StreamLayerSDKInsight as c } from "../../Insight/index.js";
+import { StreamLayerThemeProvider as y } from "../../../../ui/theme/index.js";
+import { useStreamLayerDebug as f } from "../../../../utils/debug/index.js";
+import { customTheme as l } from "./styles.js";
+import { Video as v } from "./video.js";
+const h = /* @__PURE__ */ d("div")({
   name: "Body",
   class: "buit6hv",
   propsAsIs: !1
-}), v = ({
+}), S = ({
   event: o,
-  hideHeader: m
+  hideHeader: m,
+  insightId: n
 }) => {
-  const r = u();
-  return r ? /* @__PURE__ */ e(c, {
-    customTheme: f,
-    children: /* @__PURE__ */ e(p, {
+  const r = p();
+  return r ? /* @__PURE__ */ e(y, {
+    customTheme: l,
+    children: /* @__PURE__ */ e(c, {
       hideHeader: m,
       event: o,
       sdk: r,
+      insightId: n,
       persistent: !0
     })
   }) : null;
-}, B = ({
+}, D = ({
   sdkKey: o,
   eventId: m,
-  layoutMode: r,
-  production: n,
-  onlyInsight: s,
-  hideHeader: i
+  layoutMode: n,
+  insightId: r,
+  production: s,
+  onlyInsight: i,
+  hideHeader: a
 }) => {
-  const t = y({
+  const t = f({
     sdkKey: o,
     eventId: m,
-    production: n
+    production: s
   });
-  return /* @__PURE__ */ e(a, {
+  return /* @__PURE__ */ e(u, {
     sdkKey: t.sdkKey,
     production: t.env === "production",
     autoEnable: !0,
-    children: s ? /* @__PURE__ */ e(v, {
-      hideHeader: i,
+    children: i ? /* @__PURE__ */ e(S, {
+      insightId: r,
+      hideHeader: a,
       event: t.event
-    }) : /* @__PURE__ */ e(l, {
-      children: /* @__PURE__ */ e(h, {
-        layoutMode: r,
+    }) : /* @__PURE__ */ e(h, {
+      children: /* @__PURE__ */ e(v, {
+        insightId: r,
+        layoutMode: n,
         event: t.event
       })
     })
   });
 };
 export {
-  B as InsightStory
+  D as InsightStory
 };

package/lib/app/app/story/insight/video.d.ts

@@ -1,4 +1,5 @@
 export declare const Video: React.FC<{
     event?: string;
+    insightId?: string;
     layoutMode?: 'side-by-side' | 'cover';
 }>;

package/lib/app/app/story/insight/video.js

@@ -1,15 +1,15 @@
-import { jsxs as o, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, Fragment as l, jsx as e } from "react/jsx-runtime";
 import { useRef as h } from "react";
-import { useStreamLayer as l } from "@streamlayer/react";
-import { StreamLayerSDKInsight as i } from "../../Insight/index.js";
-import { StreamLayerThemeProvider as n } from "../../../../ui/theme/index.js";
-import { VideoFrame as c, customTheme as s, VideoPlayerWrap as p, InsightContainerMobile as u, InsightContainerOverlay as g, InsightContainerLBar as f } from "./styles.js";
-const x = ({ event: t, layoutMode: a }) => {
-  const r = l(), m = h(null);
-  return /* @__PURE__ */ o(d, { children: [
-    /* @__PURE__ */ o(c, { ref: m, "data-testid": "video-frame", children: [
-      /* @__PURE__ */ e(a === "cover" ? g : f, { children: r && /* @__PURE__ */ e(n, { customTheme: s, children: /* @__PURE__ */ e(i, { event: t, sdk: r, persistent: !0 }) }) }),
-      /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e("div", { className: "divAnchor", children: /* @__PURE__ */ e(
+import { useStreamLayer as c } from "@streamlayer/react";
+import { StreamLayerSDKInsight as n } from "../../Insight/index.js";
+import { StreamLayerThemeProvider as s } from "../../../../ui/theme/index.js";
+import { VideoFrame as p, customTheme as a, VideoPlayerWrap as u, InsightContainerMobile as f, InsightContainerOverlay as g, InsightContainerLBar as y } from "./styles.js";
+const F = ({ event: t, insightId: o, layoutMode: m }) => {
+  const r = c(), d = h(null);
+  return /* @__PURE__ */ i(l, { children: [
+    /* @__PURE__ */ i(p, { ref: d, "data-testid": "video-frame", children: [
+      /* @__PURE__ */ e(m === "cover" ? g : y, { children: r && /* @__PURE__ */ e(s, { customTheme: a, children: /* @__PURE__ */ e(n, { event: t, sdk: r, insightId: o, persistent: !0 }) }) }),
+      /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e("div", { className: "divAnchor", children: /* @__PURE__ */ e(
         "video",
         {
           src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
@@ -22,9 +22,9 @@ const x = ({ event: t, layoutMode: a }) => {
         }
       ) }) })
     ] }),
-    /* @__PURE__ */ e(u, { children: r && /* @__PURE__ */ e(n, { customTheme: s, children: /* @__PURE__ */ e(i, { event: t, sdk: r, persistent: !0 }) }) })
+    /* @__PURE__ */ e(f, { children: r && /* @__PURE__ */ e(s, { customTheme: a, children: /* @__PURE__ */ e(n, { event: t, sdk: r, insightId: o, persistent: !0 }) }) })
   ] });
 };
 export {
-  x as Video
+  F as Video
 };

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

@@ -6,4 +6,5 @@ export declare const AdvertisementUI: React.FC<{
     layoutMode?: 'cover' | 'side-by-side';
     sidebar?: 'left' | 'right';
     banner?: 'top' | 'bottom';
+    skipTypeCheck?: boolean;
 }>;

package/lib/ui/advertisement/index.js

@@ -1,18 +1,18 @@
-import { jsxs as t, jsx as d } from "react/jsx-runtime";
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
 import { useStore as n } from "@nanostores/react";
-import { PromotionType as i } from "@streamlayer/sdk-web-types";
-import { Banner as o } from "./banner/index.js";
-import { Overlay as u } from "./overlay/index.js";
-import { Sidebar as a } from "./sidebar/index.js";
+import { PromotionType as d } from "@streamlayer/sdk-web-types";
+import { Banner as u } from "./banner/index.js";
+import { Overlay as t } from "./overlay/index.js";
+import { Sidebar as s } from "./sidebar/index.js";
 import { OverlayContainer as f } from "./overlay/styles.js";
-const y = (r) => (r == null ? void 0 : r.type) === i.INGAME_IAB11_LBAR || (r == null ? void 0 : r.type) === i.INGAME_IAB21_LBAR, I = (r) => (r == null ? void 0 : r.type) === i.INGAME_IAB11 || (r == null ? void 0 : r.type) === i.INGAME_IAB21, E = ({ advertisement: r, layoutMode: s = "side-by-side", sidebar: c, banner: e }) => {
+const y = (r) => (r == null ? void 0 : r.type) === d.INGAME_IAB11_LBAR || (r == null ? void 0 : r.type) === d.INGAME_IAB21_LBAR, I = (r) => (r == null ? void 0 : r.type) === d.INGAME_IAB11 || (r == null ? void 0 : r.type) === d.INGAME_IAB21, E = ({ advertisement: r, skipTypeCheck: c, layoutMode: A = "side-by-side", sidebar: e, banner: a }) => {
   const l = n(r.data);
-  return !l.data && l.loading ? null : l.error ? /* @__PURE__ */ t("div", { children: [
+  return !l.data && l.loading ? null : l.error ? /* @__PURE__ */ o("div", { children: [
     "error ",
-    /* @__PURE__ */ d("button", { onClick: r.close, children: "close" })
-  ] }) : l.data ? !c && !e && I(l.data) ? /* @__PURE__ */ d(f, { children: /* @__PURE__ */ d(u, { promotionId: r.id, promotion: l.data, onClose: r.close }) }) : c && y(l.data) ? /* @__PURE__ */ d(a, { direction: c, hiding: r.hiding, children: /* @__PURE__ */ d(u, { promotionId: r.id, promotion: l.data, onClose: r.close }) }) : e ? /* @__PURE__ */ d(o, { promotionId: r.id, hiding: r.hiding, promotion: l.data, direction: e }) : null : /* @__PURE__ */ t("div", { children: [
+    /* @__PURE__ */ i("button", { onClick: r.close, children: "close" })
+  ] }) : l.data ? !e && !a && (c || I(l.data)) ? /* @__PURE__ */ i(f, { className: "PromoOverlayContainer", children: /* @__PURE__ */ i(t, { promotionId: r.id, promotion: l.data, onClose: r.close }) }) : e && (c || y(l.data)) ? /* @__PURE__ */ i(s, { className: "PromoSidebarContainer", direction: e, hiding: r.hiding, children: /* @__PURE__ */ i(t, { promotionId: r.id, promotion: l.data, onClose: r.close }) }) : a ? /* @__PURE__ */ i(u, { promotionId: r.id, hiding: r.hiding, promotion: l.data, direction: a }) : null : /* @__PURE__ */ o("div", { children: [
     "empty promo ",
-    /* @__PURE__ */ d("button", { onClick: r.close, children: "close" })
+    /* @__PURE__ */ i("button", { onClick: r.close, children: "close" })
   ] });
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.3.3",
+  "version": "1.5.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -46,7 +46,7 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.4",
-    "@streamlayer/sl-eslib": "^5.117.0",
+    "@streamlayer/sl-eslib": "^5.122.0",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "nanoid": "3.3.7",
@@ -54,18 +54,18 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^1.3.3",
-    "@streamlayer/sdk-web": "^1.1.3",
-    "@streamlayer/sdk-web-analytics": "^1.1.3",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.0.8",
-    "@streamlayer/sdk-web-api": "^1.2.3",
-    "@streamlayer/sdk-web-core": "^1.1.3",
-    "@streamlayer/sdk-web-features": "^1.0.8",
-    "@streamlayer/sdk-web-interfaces": "^1.1.3",
-    "@streamlayer/sdk-web-logger": "^1.0.8",
-    "@streamlayer/sdk-web-notifications": "^1.1.3",
-    "@streamlayer/sdk-web-storage": "^1.0.8",
-    "@streamlayer/sdk-web-types": "^1.2.3"
+    "@streamlayer/feature-gamification": "^1.4.1",
+    "@streamlayer/sdk-web": "^1.2.1",
+    "@streamlayer/sdk-web-analytics": "^1.2.1",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.0.10",
+    "@streamlayer/sdk-web-api": "^1.3.1",
+    "@streamlayer/sdk-web-core": "^1.2.1",
+    "@streamlayer/sdk-web-features": "^1.0.10",
+    "@streamlayer/sdk-web-interfaces": "^1.1.5",
+    "@streamlayer/sdk-web-logger": "^1.0.10",
+    "@streamlayer/sdk-web-notifications": "^1.1.5",
+    "@streamlayer/sdk-web-storage": "^1.0.10",
+    "@streamlayer/sdk-web-types": "^1.3.1"
   },
   "nx": {
     "implicitDependencies": [
@@ -81,11 +81,11 @@
     "@linaria/core": "^6.2.0",
     "@linaria/react": "^6.2.1",
     "@nanostores/react": "^0.7.2",
-    "@storybook/addon-docs": "^8.3.2",
-    "@storybook/addon-viewport": "^8.3.2",
-    "@storybook/blocks": "^8.3.2",
+    "@storybook/addon-docs": "^8.3.4",
+    "@storybook/addon-viewport": "^8.3.4",
+    "@storybook/blocks": "^8.3.4",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^8.3.2",
+    "@storybook/react": "^8.3.4",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/react-window": "^1.8.8",
@@ -101,11 +101,11 @@
     "rollup-plugin-node-polyfills": "^0.2.1",
     "screenfull": "^6.0.2",
     "tslib": "^2.7.0",
-    "vite": "5.4.7",
+    "vite": "5.4.8",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.1.7"
+    "@streamlayer/react": "^1.3.0"
   }
 }