@streamlayer/react-ui 0.44.0 → 0.46.0

package/lib/index.js

@@ -1,16 +1,16 @@
-import { QuestionInApp as Vo } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as Oo } from "./ui/login/index.js";
-import { Onboarding as jo } from "./ui/gamification/onboarding/index.js";
-import { ActivePages as qo, Tab as wo, Tabs as zo } from "./ui/gamification/tabs/index.js";
-import { LeaderboardItemDetail as Co } from "./ui/gamification/leaderboard-item-detail/index.js";
-import { Question as Fo } from "./ui/gamification/question/index.js";
-import { QuestionList as Ho } from "./ui/gamification/question/list/index.js";
-import { UserStatistics as Ko } from "./ui/gamification/user-statistics/index.js";
-import { Vote as No } from "./ui/gamification/vote/index.js";
-import { Demo as Wo } from "./ui/demo/index.js";
-import { Points as Yo } from "./ui/gamification/points/index.js";
-import { StreamLayerThemeProvider as _o } from "./ui/theme/index.js";
-import { ThemeVariables as or, theme as rr, themeStr as tr } from "./ui/theme/theme.js";
+import { QuestionInApp as yo } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as Uo } from "./ui/login/index.js";
+import { Onboarding as ko } from "./ui/gamification/onboarding/index.js";
+import { ActivePages as wo, Tab as zo, Tabs as Bo } from "./ui/gamification/tabs/index.js";
+import { LeaderboardItemDetail as Eo } from "./ui/gamification/leaderboard-item-detail/index.js";
+import { Question as Go } from "./ui/gamification/question/index.js";
+import { QuestionList as Jo } from "./ui/gamification/question/list/index.js";
+import { UserStatistics as Mo } from "./ui/gamification/user-statistics/index.js";
+import { Vote as Ro } from "./ui/gamification/vote/index.js";
+import { Demo as Xo } from "./ui/demo/index.js";
+import { Points as Zo } from "./ui/gamification/points/index.js";
+import { StreamLayerThemeProvider as $o } from "./ui/theme/index.js";
+import { ThemeVariables as rr, theme as tr, themeStr as mr } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-d3f9fc80.js";
@@ -89,23 +89,24 @@ import "./ui/gamification/detailed-insight/index.js";
 import "./ui/demo/Login.js";
 import "@streamlayer/sdk-web-anonymous-auth";
 import "./ui/gamification/points/styles.js";
+import "./ui/theme/breakpoints.js";
 import "@linaria/core";
 export {
-  qo as ActivePages,
-  Wo as Demo,
-  Co as LeaderboardItemDetail,
-  Oo as Login,
-  jo as Onboarding,
-  Yo as Points,
-  Fo as Question,
-  Vo as QuestionInApp,
-  Ho as QuestionList,
-  _o as StreamLayerThemeProvider,
-  wo as Tab,
-  zo as Tabs,
-  or as ThemeVariables,
-  Ko as UserStatistics,
-  No as Vote,
-  rr as theme,
-  tr as themeStr
+  wo as ActivePages,
+  Xo as Demo,
+  Eo as LeaderboardItemDetail,
+  Uo as Login,
+  ko as Onboarding,
+  Zo as Points,
+  Go as Question,
+  yo as QuestionInApp,
+  Jo as QuestionList,
+  $o as StreamLayerThemeProvider,
+  zo as Tab,
+  Bo as Tabs,
+  rr as ThemeVariables,
+  Mo as UserStatistics,
+  Ro as Vote,
+  tr as theme,
+  mr as themeStr
 };

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

@@ -1,8 +1,8 @@
-import { jsx as i, jsxs as c, Fragment as l } from "react/jsx-runtime";
-import { useStore as u } from "@nanostores/react";
-import { useState as b } from "react";
-import { LeaderboardItemDetail as f } from "../../../gamification/leaderboard-item-detail/index.js";
-import { LeaderboardList as I } from "../../../gamification/leaderboard-list/index.js";
+import { jsx as e, jsxs as l, Fragment as u } from "react/jsx-runtime";
+import { useStore as b } from "@nanostores/react";
+import { useState as f } from "react";
+import { LeaderboardItemDetail as I } from "../../../gamification/leaderboard-item-detail/index.js";
+import { LeaderboardList as v } from "../../../gamification/leaderboard-list/index.js";
 import "../../../gamification/common-header/index.js";
 import "../../../../icon-exit-d3f9fc80.js";
 import "../../../gamification/common-header/styles.js";
@@ -12,29 +12,29 @@ import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
 import "../../../gamification/leaderboard-list/styles.js";
-const y = ({ store: s }) => {
-  const { data: r } = u(s), [e, d] = b(void 0);
-  if (!r)
-    return /* @__PURE__ */ i("div", { children: "wait leader board..." });
+const z = ({ store: s }) => {
+  const { data: i = [], loading: d } = b(s), [r, p] = f(void 0);
+  if (d)
+    return /* @__PURE__ */ e("div", { children: "wait leader board..." });
   const o = (t) => {
-    var m;
-    const p = (m = r.find((n) => {
-      var a;
-      return ((a = n.attributes) == null ? void 0 : a.userId) === t;
-    })) == null ? void 0 : m.attributes;
-    d(p);
+    var a;
+    const n = (a = i.find((c) => {
+      var m;
+      return ((m = c.attributes) == null ? void 0 : m.userId) === t;
+    })) == null ? void 0 : a.attributes;
+    p(n);
   };
-  return /* @__PURE__ */ c(l, { children: [
-    e && /* @__PURE__ */ i(f, { comeBack: () => o(null), ...e }),
-    !e && /* @__PURE__ */ i(
-      I,
+  return /* @__PURE__ */ l(u, { children: [
+    r && /* @__PURE__ */ e(I, { comeBack: () => o(null), ...r }),
+    !r && /* @__PURE__ */ e(
+      v,
       {
-        items: r.filter((t) => t.attributes).map((t) => t.attributes),
+        items: i.filter((t) => t.attributes).map((t) => t.attributes),
         openItemDetail: o
       }
     )
   ] });
 };
 export {
-  y as Leaderboard
+  z as Leaderboard
 };

package/lib/ui/demo/DemoPoints.js

@@ -3,21 +3,24 @@ import { FeatureType as s } from "@streamlayer/sdk-web-types";
 import { useStore as p } from "@nanostores/react";
 import { styled as u } from "@linaria/react";
 import { Points as a } from "../gamification/points/index.js";
+import "../../utils/common.js";
 import "../gamification/points/styles.js";
 import "../icons/index.js";
 import "react";
+import "../theme/breakpoints.js";
+import "../theme/constants.js";
 const d = u.div`
   position: fixed;
   top: 0;
   right: 0;
 `, f = ({ store: o }) => {
-  var e, m, n, i;
+  var m, i, e, n;
   const t = p(o);
-  return ((m = (e = t.data) == null ? void 0 : e.summary) == null ? void 0 : m.points) === void 0 ? null : /* @__PURE__ */ r(d, { children: ((i = (n = t.data) == null ? void 0 : n.summary) == null ? void 0 : i.points) && /* @__PURE__ */ r(a, { points: t.data.summary.points }) });
-}, v = ({ sdk: o }) => {
+  return ((i = (m = t.data) == null ? void 0 : m.summary) == null ? void 0 : i.points) === void 0 ? null : /* @__PURE__ */ r(d, { children: ((n = (e = t.data) == null ? void 0 : e.summary) == null ? void 0 : n.points) && /* @__PURE__ */ r(a, { points: t.data.summary.points }) });
+}, F = ({ sdk: o }) => {
   const t = o.getFeature(s.GAMES);
   return t != null && t.userSummary ? /* @__PURE__ */ r(f, { store: t.userSummary.getStore() }) : null;
 };
 export {
-  v as DemoPoints
+  F as DemoPoints
 };

package/lib/ui/demo/index.js

@@ -1,16 +1,19 @@
-import { jsx as i, jsxs as f, Fragment as v } from "react/jsx-runtime";
-import { FeatureStatus as l } from "@streamlayer/sdk-web-interfaces";
+var y = Object.defineProperty;
+var b = (o, r, t) => r in o ? y(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
+var m = (o, r, t) => (b(o, typeof r != "symbol" ? r + "" : r, t), t);
+import { jsx as e, jsxs as l, Fragment as T } from "react/jsx-runtime";
+import { FeatureStatus as c } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as g } from "@streamlayer/sdk-web-types";
-import { AvailableFeatures as S } from "@streamlayer/sdk-web-features";
-import { useState as b, useMemo as h, useEffect as C } from "react";
+import { AvailableFeatures as C } from "@streamlayer/sdk-web-features";
+import { useState as w, useMemo as S, useEffect as F } from "react";
 import "@streamlayer/sdk-web-api";
-import "@streamlayer/sdk-web-storage";
-import { useStore as c } from "@nanostores/react";
-import { Notifications as F } from "../notifications/index.js";
-import { GamificationComponent as w } from "./Gamification.js";
+import { Storage as k } from "@streamlayer/sdk-web-storage";
+import { useStore as f } from "@nanostores/react";
+import { Notifications as x } from "../notifications/index.js";
+import { GamificationComponent as E } from "./Gamification.js";
 import { HighlightsComponent as G } from "./Highlights.js";
 import { LoginComponent as H } from "./Login.js";
-import { Buttons as x, Button as s } from "./styles.js";
+import { Buttons as A, Button as d } from "./styles.js";
 import "../notifications/notification/index.js";
 import "@streamlayer/sdk-web-notifications";
 import "../notifications/notification/onboarding-inapp/index.js";
@@ -84,55 +87,91 @@ import "@connectrpc/connect";
 import "@connectrpc/connect-web";
 import "@streamlayer/sl-eslib/users/users_connect";
 import "../login/styles.js";
-const A = ({ activeFeature: r, sdk: o }) => {
-  const [e, n] = b(null), { organizationSettings: a, streamSettings: u } = c(o.sdkStore), y = h(() => {
-    const t = (u == null ? void 0 : u.data) || (a == null ? void 0 : a.data);
-    return t != null && t.overlays ? t.overlays : [];
-  }, [a, u]);
-  C(() => {
-    const t = o.getFeatures();
-    if (r)
-      for (const [m, p] of t)
-        m === r ? p.status.get() === l.Suspended && (p.enable(), n(p)) : p.status.get() === l.Ready && p.disable();
+class B extends k {
+  constructor() {
+    super("user");
+    // Schema
+    m(this, "setSchema", (t) => {
+      this.write("schema", t);
+    });
+    m(this, "getSchema", () => this.read(
+      "schema"
+      /* SCHEMA */
+    ));
+    // Token
+    m(this, "setToken", (t) => {
+      this.write("token", t);
+    });
+    m(this, "getToken", () => this.read(
+      "token"
+      /* TOKEN */
+    ));
+    // External Token
+    m(this, "setExternalToken", (t) => {
+      this.write("eToken", t);
+    });
+    m(this, "getExternalToken", () => this.read(
+      "eToken"
+      /* EXTERNAL_TOKEN */
+    ));
+    m(this, "removeToken", () => {
+      this.remove(
+        "token"
+        /* TOKEN */
+      );
+    });
+  }
+}
+new B();
+const R = ({ activeFeature: o, sdk: r }) => {
+  const [t, a] = w(null), { organizationSettings: s, streamSettings: u } = f(r.sdkStore), v = S(() => {
+    const i = (u == null ? void 0 : u.data) || (s == null ? void 0 : s.data);
+    return i != null && i.overlays ? i.overlays : [];
+  }, [s, u]);
+  F(() => {
+    const i = r.getFeatures();
+    if (o)
+      for (const [n, p] of i)
+        n === o ? p.status.get() === c.Suspended && (p.enable(), a(p)) : p.status.get() === c.Ready && p.disable();
     else {
-      for (const [, m] of t)
-        m.status.get() === l.Ready && m.disable();
-      n(null);
+      for (const [, n] of i)
+        n.status.get() === c.Ready && n.disable();
+      a(null);
     }
     return () => {
-      for (const [, m] of t)
-        m.status.get() === l.Ready && m.disable();
+      for (const [, n] of i)
+        n.status.get() === c.Ready && n.disable();
     };
-  }, [r, o]);
-  const d = h(() => e ? e.featureConfig.get().type === g.GAMES ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(w, { gamification: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait gamification..." }) : e.featureConfig.get().type === g.HIGHLIGHTS ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(G, { highlights: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait highlights..." }) : /* @__PURE__ */ i("div", { children: "unknown feature" }) : null, [o, e]);
-  return /* @__PURE__ */ f("div", { children: [
-    /* @__PURE__ */ f(x, { children: [
-      /* @__PURE__ */ i(s, { onClick: () => o.closeFeature(), disabled: !d, children: "close" }),
-      /* @__PURE__ */ i(s, { onClick: () => o.logout(), children: "logout" }),
-      y.map((t) => /* @__PURE__ */ f(
-        s,
+  }, [o, r]);
+  const h = S(() => t ? t.featureConfig.get().type === g.GAMES ? t ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(E, { gamification: t, sdk: r }) }) : /* @__PURE__ */ e("div", { children: "wait gamification..." }) : t.featureConfig.get().type === g.HIGHLIGHTS ? t ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(G, { highlights: t, sdk: r }) }) : /* @__PURE__ */ e("div", { children: "wait highlights..." }) : /* @__PURE__ */ e("div", { children: "unknown feature" }) : null, [r, t]);
+  return /* @__PURE__ */ l("div", { children: [
+    /* @__PURE__ */ l(A, { children: [
+      /* @__PURE__ */ e(d, { onClick: () => r.closeFeature(), disabled: !h, children: "close" }),
+      /* @__PURE__ */ e(d, { onClick: () => r.logout(), children: "logout" }),
+      v.map((i) => /* @__PURE__ */ l(
+        d,
         {
-          onClick: () => o.openFeature(t.type),
-          disabled: !(t.type in S),
-          "data-enable_sdk_button": t.enableSdkButton.toString(),
-          "data-selected": t.type === r,
+          onClick: () => r.openFeature(i.type),
+          disabled: !(i.type in C),
+          "data-enable_sdk_button": i.enableSdkButton.toString(),
+          "data-selected": i.type === o,
           children: [
-            /* @__PURE__ */ i("img", { src: t.icon, alt: "" }),
-            t.name
+            /* @__PURE__ */ e("img", { src: i.icon, alt: "" }),
+            i.name
           ]
         },
-        t.name
+        i.name
       ))
     ] }),
-    d
+    h
   ] });
-}, pi = ({ sdk: r }) => {
-  const o = c(r.organizationStore()), e = c(r.getUserStore()), n = c(r.getActiveFeature());
-  return o.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : o.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ f(v, { children: [
-    /* @__PURE__ */ i(F, { notificationsStore: r.getNotificationsStore() }),
-    /* @__PURE__ */ i(A, { sdk: r, activeFeature: n })
-  ] }) : /* @__PURE__ */ i(H, { sdk: r }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
+}, lr = ({ sdk: o }) => {
+  const r = f(o.organizationStore()), t = f(o.getUserStore()), a = f(o.getActiveFeature());
+  return r.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : r.data ? t.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : t.data ? /* @__PURE__ */ l(T, { children: [
+    /* @__PURE__ */ e(x, { notificationsStore: o.getNotificationsStore() }),
+    /* @__PURE__ */ e(R, { sdk: o, activeFeature: a })
+  ] }) : /* @__PURE__ */ e(H, { sdk: o }) : /* @__PURE__ */ e("div", { children: "wrong sdk key..." });
 };
 export {
-  pi as Demo
+  lr as Demo
 };

package/lib/ui/gamification/points/index.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-export declare const Points: React.FC<{
+type PointsProps = {
     points: number;
-}>;
+};
+export declare const Points: React.FC<PointsProps>;
+export {};

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

@@ -1,15 +1,18 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { PointsContainer as t, PointsIcon as r, PointsSvg as e, PointsBody as s, PointsTitle as c, PointsValue as l } from "./styles.js";
+import { formatDecimals as r } from "../../../utils/common.js";
+import { PointsContainer as n, PointsIcon as m, PointsSvg as s, PointsBody as e, PointsTitle as p, PointsValue as c } from "./styles.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-const a = ({ points: n }) => /* @__PURE__ */ i(t, { children: [
-  /* @__PURE__ */ o(r, { children: /* @__PURE__ */ o(e, { name: "icon-trophy" }) }),
-  /* @__PURE__ */ i(s, { children: [
-    /* @__PURE__ */ o(c, { children: "TOTAL POINTS" }),
-    /* @__PURE__ */ o(l, { children: n.toLocaleString("en") })
+import "../../theme/breakpoints.js";
+import "../../theme/constants.js";
+const u = ({ points: t }) => /* @__PURE__ */ i(n, { children: [
+  /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(s, { name: "icon-trophy" }) }),
+  /* @__PURE__ */ i(e, { children: [
+    /* @__PURE__ */ o(p, { children: "Total points" }),
+    /* @__PURE__ */ o(c, { children: r(t) })
   ] })
 ] });
 export {
-  a as Points
+  u as Points
 };

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

@@ -1,47 +1,86 @@
 import { styled as t } from "@linaria/react";
-import { SvgIcon as i } from "../../icons/index.js";
+import { SvgIcon as o } from "../../icons/index.js";
+import { breakpoints as i } from "../../theme/breakpoints.js";
 import "react/jsx-runtime";
 import "react";
-const s = t.div`
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.4);
+import "../../theme/constants.js";
+const l = t.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  column-gap: 8px;
+  padding: 4px 17px 4px 4px;
   border-radius: 40px;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    border-radius: 40px;
+    border: 1px solid var(--color-neutrals-white);
+    opacity: 0.4;
+    z-index: -1;
+  }
+
+  ${i.down("md")`
+    padding-right: 10px;
+  `}
+`, x = t.div`
   display: flex;
-  height: 48px;
-  width: 140px;
-  box-sizing: border-box;
-  padding: 4px;
   flex-shrink: 0;
-  justify-content: start;
   align-items: center;
-`, d = t.div`
-  border-radius: 50%;
-  background: #006747;
+  justify-content: center;
   width: 40px;
   height: 40px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 8px;
-`, p = t(i)`
+  border-radius: 50%;
+  background: #006747;
+
+  ${i.down("md")`
+    width: 28px;
+    height: 28px;
+  `}
+`, a = t(o)`
   width: 20px;
   height: 20px;
 
   path {
     fill: #fff;
   }
-`, x = t.div``, a = t.div`
-  font-weight: 300;
-  font-size: 10px;
+
+  ${i.down("md")`
+    width: 14px;
+    height: 14px;
+  `}
+`, h = t.div`
+  display: flex;
+  flex-direction: column;
+  color: var(--color-neutrals-white);
+  font-weight: var(--font-weight-default);
 `, c = t.div`
-  font-size: 16px;
+  margin-bottom: 1px;
+  font-size: 9px;
+  text-transform: uppercase;
+
+  ${i.down("md")`
+    display: none;
+  `}
+`, f = t.div`
+  font-size: 18px;
+  line-height: 20px;
+
+  ${i.down("md")`
+    font-size: 14px;
+    line-height: 22px;
+  `}
 `;
 export {
-  x as PointsBody,
-  s as PointsContainer,
-  d as PointsIcon,
-  p as PointsSvg,
-  a as PointsTitle,
-  c as PointsValue
+  h as PointsBody,
+  l as PointsContainer,
+  x as PointsIcon,
+  a as PointsSvg,
+  c as PointsTitle,
+  f as PointsValue
 };

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

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

package/lib/ui/theme/breakpoints.js

@@ -0,0 +1,18 @@
+import { BREAKPOINTS as e } from "./constants.js";
+const i = (t) => (n) => `
+  @media (${t}) {
+    ${n}
+  }
+`, o = {
+  up: (t) => {
+    const n = e[t];
+    return i(`min-width: ${n}px`);
+  },
+  down: (t) => {
+    const n = e[t] - 1;
+    return i(`max-width: ${n}px`);
+  }
+};
+export {
+  o as breakpoints
+};

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

@@ -79,4 +79,11 @@ export declare const FONT: {
     COLOR: string;
     WEIGHT_DEFAULT: string;
 };
+export declare const BREAKPOINTS: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
 export declare const colors: string;

package/lib/ui/theme/constants.js

@@ -54,6 +54,12 @@ const N = {
   SERIF: "'Tiempos', 'Tiempos Text', Times New Roman, serif",
   COLOR: "#fff",
   WEIGHT_DEFAULT: "500"
+}, O = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1400
 }, G = Object.keys(E).reduce((A, R) => {
   const _ = E[R];
   return `
@@ -62,6 +68,7 @@ const N = {
   `;
 }, "");
 export {
+  O as BREAKPOINTS,
   E as COLORS,
   S as FONT,
   T as MASTERS_COLORS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -27,12 +27,12 @@
   ],
   "peerDependencies": {
     "@streamlayer/sl-eslib": "^5.52.0",
-    "@streamlayer/feature-gamification": "^0.18.2",
-    "@streamlayer/sdk-web": "^0.28.4",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.10.13",
-    "@streamlayer/sdk-web-api": "^0.0.7",
-    "@streamlayer/sdk-web-core": "^0.15.1",
-    "@streamlayer/sdk-web-features": "^0.10.7",
+    "@streamlayer/feature-gamification": "^0.18.3",
+    "@streamlayer/sdk-web": "^0.28.5",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.0",
+    "@streamlayer/sdk-web-api": "^0.1.0",
+    "@streamlayer/sdk-web-core": "^0.16.0",
+    "@streamlayer/sdk-web-features": "^0.10.8",
     "@streamlayer/sdk-web-interfaces": "^0.18.5",
     "@streamlayer/sdk-web-notifications": "^0.10.4",
     "@streamlayer/sdk-web-storage": "^0.3.7",
@@ -73,6 +73,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.24.4"
+    "@streamlayer/react": "^0.24.6"
   }
 }