@streamlayer/react-ui 0.96.3 → 0.97.1

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

@@ -1,66 +1,72 @@
-import { jsx as t, jsxs as L, Fragment as f } from "react/jsx-runtime";
-import { styled as h } from "@linaria/react";
+import { jsx as t, jsxs as L, Fragment as h } from "react/jsx-runtime";
+import { styled as k } from "@linaria/react";
 import { useStore as p } from "@nanostores/react";
+import { useRef as u } from "react";
 import { useClipboardCopy as I } from "../../useClipboardCopy.js";
-import { InviteLink as k } from "../../../gamification/invite-link/index.js";
+import { InviteLink as y } from "../../../gamification/invite-link/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "react";
 import "../../../icons/index.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
 import "../../../../styles_z07sl8-w40geAFS.js";
-import { LeaderboardStaticList as u } from "../../../gamification/leaderboard/static.js";
-import { Friends as y } from "./Friends.js";
+import { LeaderboardStaticList as C } from "../../../gamification/leaderboard/static.js";
+import { Friends as b } from "./Friends.js";
 import "../../../../index-jRXrW6ie.js";
 import "../../../../index-uEuzH3jr.js";
 import "../../../gamification/copyNotification/index.js";
 import "../../../gamification/copyNotification/styles.js";
+import "../../../../hooks/analytics.js";
+import "lodash.throttle";
+import "@streamlayer/sdk-web-interfaces";
+import "../../../theme/constants.js";
+import "@streamlayer/sdk-web-types";
 import "../../../gamification/invite-link/styles.js";
 import "react-infinite-scroller";
 import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
-const b = /* @__PURE__ */ h("div")({
+const v = /* @__PURE__ */ k("div")({
   name: "InviteLinkContainer",
   class: "i1chxfpe",
   propsAsIs: !1
-}), R = ({
+}), Z = ({
   gamification: r,
   scrollNode: m,
   scrollStore: n,
-  renderClipBoardNode: o
+  renderClipBoardNode: s
 }) => {
-  const {
+  const e = u(null), {
     data: i,
-    hasMore: s,
-    loading: d,
+    hasMore: d,
+    loading: l,
     key: a
   } = p(r.leaderboardList.$store), {
-    data: e
-  } = p(r.deepLink.$store), [c, l] = I(o);
-  return !i.length && !d ? /* @__PURE__ */ t(y, {
-    renderClipBoardNode: o,
-    deepLink: e
-  }) : /* @__PURE__ */ L(f, {
-    children: [/* @__PURE__ */ t(u, {
+    data: o
+  } = p(r.deepLink.$store), [c, f] = I(e);
+  return !i.length && !l ? /* @__PURE__ */ t(b, {
+    renderClipBoardNode: s,
+    deepLink: o
+  }) : /* @__PURE__ */ L(h, {
+    children: [/* @__PURE__ */ t(C, {
       items: i,
       scrollNode: m,
       scrollStore: n,
       fetchMore: r.leaderboardList.fetchMore,
-      hasMore: s,
+      hasMore: d,
       openItemDetail: r.openUser,
       currentUserId: r.currentUserId.get()
-    }, a), e && /* @__PURE__ */ t(b, {
-      children: /* @__PURE__ */ t(k, {
-        onClick: () => c(e),
+    }, a), o && /* @__PURE__ */ t(v, {
+      ref: e,
+      children: /* @__PURE__ */ t(y, {
+        onClick: () => c(o),
         title: "Invite Friends",
         description: "Challenge them now!"
       })
-    }), l]
+    }), f]
   });
 };
 export {
-  R as Leaderboard
+  Z as Leaderboard
 };

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

@@ -16,6 +16,8 @@ import "../../../gamification/vote/expired-alert/index.js";
 import "../../../gamification/vote/expired-alert/styles.js";
 import "../../../gamification/vote/feedback/index.js";
 import "../../../gamification/vote/feedback/styles.js";
+import "../../../show-in/index.js";
+import "@linaria/core";
 import "../../../gamification/vote/styles.js";
 import "../../styles.js";
 import "../../../gamification/vote/vote-option/index.js";
@@ -71,7 +73,7 @@ const d = /* @__PURE__ */ n("div")({
     openedQuestion: s,
     isLoading: !!o
   }) : null;
-}, st = ({
+}, pt = ({
   gamification: t
 }) => {
   var s;
@@ -95,5 +97,5 @@ const d = /* @__PURE__ */ n("div")({
   });
 };
 export {
-  st as Question
+  pt as Question
 };

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

@@ -1,17 +1,20 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import { useStore as p } from "@nanostores/react";
-import { useMastersContext as s } from "../../useMastersContext.js";
-import { QuestionList as e } from "../../../gamification/question/list/index.js";
+import { useMastersContext as e } from "../../useMastersContext.js";
+import { QuestionList as s } from "../../../gamification/question/list/index.js";
 import "react";
 import "../../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
-import "../../../gamification/question/styles.js";
+import "../../../skeleton/index.js";
+import "../../../skeleton/styles.js";
 import "@linaria/react";
+import "../../../gamification/question/styles.js";
 import "../../../icons/index.js";
 import "../../../gamification/question/insight/index.js";
 import "../../../questions/insight/index.js";
 import "../../../video-player/index.js";
+import "@linaria/core";
 import "../../../video-player/styles.js";
 import "../../../questions/insight/styles.js";
 import "../../../gamification/question/insight/styles.js";
@@ -25,10 +28,10 @@ import "../../../gamification/question/twitter/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/list/styles.js";
-const E = ({ store: i, openQuestion: m }) => {
-  const { sdk: t } = s(), o = p(i);
-  return o != null && o.data ? /* @__PURE__ */ r(e, { openQuestion: m, questions: o.data, controlVideo: t == null ? void 0 : t.controlVideoPlayer }) : /* @__PURE__ */ r("div", { children: "wait questions..." });
+const H = ({ store: t, openQuestion: r }) => {
+  const { sdk: o } = e(), i = p(t);
+  return /* @__PURE__ */ m(s, { openQuestion: r, questions: i.data, controlVideo: o == null ? void 0 : o.controlVideoPlayer });
 };
 export {
-  E as QuestionsList
+  H as QuestionsList
 };

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

@@ -1,16 +1,16 @@
-import { jsxs as h, jsx as t, Fragment as C } from "react/jsx-runtime";
+import { jsxs as h, jsx as t, Fragment as D } from "react/jsx-runtime";
 import { useStore as f } from "@nanostores/react";
-import { useState as D, useTransition as T, useEffect as v } from "react";
-import { TabsContainer as A, TabsNavContainer as I, SDKWhiteContainer as P, UserSummaryContainer as S, SDKContentContainer as V, LeaderboardContainer as E } from "../../styles.js";
-import { scrollIntoAppView as K } from "../../useSdkScroll.js";
-import { ActivePages as a, Tabs as L } from "../../../gamification/tabs/index.js";
-import { Leaderboard as B } from "./Leaderboard.js";
-import { QuestionsList as F } from "./QuestionsList.js";
-import { UserSummary as O } from "./UserSummary.js";
+import { useState as T, useTransition as v, useEffect as A } from "react";
+import { TabsContainer as I, TabsNavContainer as P, SDKWhiteContainer as S, UserSummaryContainer as V, SDKContentContainer as E, LeaderboardContainer as K } from "../../styles.js";
+import { scrollIntoAppView as L } from "../../useSdkScroll.js";
+import { ActivePages as a, Tabs as B } from "../../../gamification/tabs/index.js";
+import { Leaderboard as F } from "./Leaderboard.js";
+import { QuestionsList as O } from "./QuestionsList.js";
+import { UserSummary as Q } from "./UserSummary.js";
 import "@linaria/react";
 import "lodash.throttle";
 import "../../../theme/constants.js";
-import "../../../../index-keh7OLCY.js";
+import "../../../../index-z0QjLiEL.js";
 import "../../../../index-uEuzH3jr.js";
 import "../../../gamification/tabs/styles.js";
 import "../../useClipboardCopy.js";
@@ -19,6 +19,9 @@ import "../../../gamification/copyNotification/index.js";
 import "../../../icons/index.js";
 import "../../../gamification/copyNotification/styles.js";
 import "../../../gamification/invite-link/index.js";
+import "../../../../hooks/analytics.js";
+import "@streamlayer/sdk-web-interfaces";
+import "@streamlayer/sdk-web-types";
 import "../../../gamification/invite-link/styles.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
@@ -35,12 +38,14 @@ import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js
 import "../../useMastersContext.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/question/index.js";
-import "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
+import "../../../skeleton/index.js";
+import "../../../skeleton/styles.js";
 import "../../../gamification/question/styles.js";
 import "../../../gamification/question/insight/index.js";
 import "../../../questions/insight/index.js";
 import "../../../video-player/index.js";
+import "@linaria/core";
 import "../../../video-player/styles.js";
 import "../../../questions/insight/styles.js";
 import "../../../gamification/question/insight/styles.js";
@@ -59,14 +64,14 @@ import "../../../gamification/user-statistics/components/rank/styles.js";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const qt = ({ gamification: o, className: l, scrollStore: r, scrollNode: u, appNode: e, style: b, responsiveStore: m, headerNode: w }) => {
-  const { tabsShown: d } = f(r, { keys: ["tabsShown"] }), [p, y] = D(a.HOME), [, g] = T(), { sdkInDesktopView: n } = f(m, { keys: ["sdkInDesktopView"] }), k = (i) => {
+const Yt = ({ gamification: o, className: l, scrollStore: r, scrollNode: u, appNode: e, style: b, responsiveStore: m, headerNode: w }) => {
+  const { tabsShown: d } = f(r, { keys: ["tabsShown"] }), [p, y] = T(a.HOME), [, g] = v(), { sdkInDesktopView: n, screen: k } = f(m, { keys: ["sdkInDesktopView"] }), x = (i) => {
     g(() => {
       var c;
-      y(i), n === !1 && (((c = e.current) == null ? void 0 : c.getBoundingClientRect().y) || 0) < 0 && K(e, { behavior: "instant" });
+      y(i), n === !1 && (((c = e.current) == null ? void 0 : c.getBoundingClientRect().y) || 0) < 0 && L(e, k.size, { behavior: "instant" });
     });
   };
-  v(() => r.listen((i) => {
+  A(() => r.listen((i) => {
     if (i.scrollPosition === 0) {
       r.setKey("tabsShown", !0);
       return;
@@ -75,25 +80,25 @@ const qt = ({ gamification: o, className: l, scrollStore: r, scrollNode: u, appN
   }), [r, m]);
   let s = "0px";
   n ? s = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : s = d ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px";
-  const x = n ? e : w;
-  return /* @__PURE__ */ h(A, { className: l, style: b, children: [
+  const C = n ? e : w;
+  return /* @__PURE__ */ h(I, { className: l, style: b, children: [
     /* @__PURE__ */ t(
-      I,
+      P,
       {
         style: {
           top: s
         },
-        children: /* @__PURE__ */ t(L, { activePage: p, toggleActivePage: k })
+        children: /* @__PURE__ */ t(B, { activePage: p, toggleActivePage: x })
       }
     ),
-    p === a.HOME && /* @__PURE__ */ h(C, { children: [
-      /* @__PURE__ */ t(P, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(O, { userSummary: o.userSummary }) }) }),
-      /* @__PURE__ */ t(V, { style: { flex: 1 }, children: /* @__PURE__ */ t(F, { openQuestion: o.openQuestion, store: o.feedList.getStore() }) })
+    p === a.HOME && /* @__PURE__ */ h(D, { children: [
+      /* @__PURE__ */ t(S, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t(Q, { userSummary: o.userSummary }) }) }),
+      /* @__PURE__ */ t(E, { style: { flex: 1 }, children: /* @__PURE__ */ t(O, { openQuestion: o.openQuestion, store: o.feedList.getStore() }) })
     ] }),
-    p === a.LEADERBOARD && /* @__PURE__ */ t(E, { children: /* @__PURE__ */ t(
-      B,
+    p === a.LEADERBOARD && /* @__PURE__ */ t(K, { children: /* @__PURE__ */ t(
+      F,
       {
-        renderClipBoardNode: x,
+        renderClipBoardNode: C,
         scrollStore: r,
         scrollNode: u,
         gamification: o
@@ -102,5 +107,5 @@ const qt = ({ gamification: o, className: l, scrollStore: r, scrollNode: u, appN
   ] });
 };
 export {
-  qt as Tabs
+  Yt as Tabs
 };

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

@@ -1,25 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useState as c, useEffect as p } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { useState as e, useEffect as s } from "react";
 import { UserStatistics as n } from "../../../gamification/user-statistics/index.js";
+import "../../../skeleton/index.js";
+import "../../../skeleton/styles.js";
+import "@linaria/react";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
-import "@linaria/react";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const g = ({ userSummary: e }) => {
-  var i;
-  const [r, s] = c(void 0);
-  return p(() => {
-    const m = e.subscribe((t) => {
-      t != null && t.data && s(t.data);
+const E = ({ userSummary: o }) => {
+  var m;
+  const [t, i] = e(void 0);
+  return s(() => {
+    const p = o.subscribe((r) => {
+      r != null && r.data && i(r.data);
     });
     return () => {
-      m();
+      p();
     };
-  }, [e]), r != null && r.summary ? /* @__PURE__ */ o(n, { ...r.summary, successRate: (i = r.percentage) == null ? void 0 : i.correct }) : /* @__PURE__ */ o("div", { children: "wait user..." });
+  }, [o]), /* @__PURE__ */ c(n, { loading: !(t != null && t.summary), ...t == null ? void 0 : t.summary, successRate: (m = t == null ? void 0 : t.percentage) == null ? void 0 : m.correct });
 };
 export {
-  g as UserSummary
+  E as UserSummary
 };

package/lib/ui/app/Features/Gamification/gamification-feature.js

@@ -10,6 +10,8 @@ import "../../../gamification/detail/header/styles.js";
 import "../../../icons/index.js";
 import "react";
 import "../../../gamification/user-statistics/index.js";
+import "../../../skeleton/index.js";
+import "../../../skeleton/styles.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
@@ -54,7 +56,7 @@ import "../../../gamification/vote/twitter-details/styles.js";
 import "./Tabs.js";
 import "../../useSdkScroll.js";
 import "lodash.throttle";
-import "../../../../index-keh7OLCY.js";
+import "../../../../index-z0QjLiEL.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
@@ -62,6 +64,8 @@ import "../../useClipboardCopy.js";
 import "../../../gamification/copyNotification/index.js";
 import "../../../gamification/copyNotification/styles.js";
 import "../../../gamification/invite-link/index.js";
+import "../../../../hooks/analytics.js";
+import "@streamlayer/sdk-web-interfaces";
 import "../../../gamification/invite-link/styles.js";
 import "react-virtualized-auto-sizer";
 import "react-window";

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

@@ -13,6 +13,8 @@ import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
 import "../../../icons/index.js";
 import "react";
+import "../../../skeleton/index.js";
+import "../../../skeleton/styles.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
@@ -53,7 +55,7 @@ import "../../../questions/twitter/styles.js";
 import "../../../gamification/vote/twitter-details/styles.js";
 import "../../useSdkScroll.js";
 import "lodash.throttle";
-import "../../../../index-keh7OLCY.js";
+import "../../../../index-z0QjLiEL.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
@@ -61,6 +63,8 @@ import "../../useClipboardCopy.js";
 import "../../../gamification/copyNotification/index.js";
 import "../../../gamification/copyNotification/styles.js";
 import "../../../gamification/invite-link/index.js";
+import "../../../../hooks/analytics.js";
+import "@streamlayer/sdk-web-interfaces";
 import "../../../gamification/invite-link/styles.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
@@ -99,7 +103,7 @@ const x = () => S, c = /* @__PURE__ */ a(x())({
 }) => {
   const o = r + i;
   return o === 0 ? 0 : Math.round(r / o * 100);
-}, mo = ({
+}, so = ({
   gamification: r,
   scrollStore: i,
   className: o,
@@ -115,7 +119,7 @@ const x = () => S, c = /* @__PURE__ */ a(x())({
   className: o,
   gamification: r,
   responsiveStore: n
-}), po = ({
+}), lo = ({
   gamification: r,
   className: i,
   appNode: o,
@@ -156,6 +160,6 @@ const x = () => S, c = /* @__PURE__ */ a(x())({
   });
 };
 export {
-  mo as GamificationOverlay,
-  po as GamificationOverlayStandalone
+  so as GamificationOverlay,
+  lo as GamificationOverlayStandalone
 };

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

@@ -1,7 +1,7 @@
-import { jsx as r } from "react/jsx-runtime";
-import { lazy as c, useMemo as g, Suspense as y } from "react";
-import { FeatureType as u } from "@streamlayer/sdk-web-types";
-import { FeatureProvider as a } from "./FeatureProvider.js";
+import { jsx as o } from "react/jsx-runtime";
+import { lazy as f, useMemo as c, Suspense as g } from "react";
+import { FeatureType as a } from "@streamlayer/sdk-web-types";
+import { FeatureProvider as y } from "./FeatureProvider.js";
 import { GamificationOverlayStandalone as d } from "./Gamification/index.js";
 import "@linaria/react";
 import "@nanostores/react";
@@ -12,6 +12,8 @@ import "../../gamification/constants.js";
 import "../../gamification/detail/header/styles.js";
 import "../../icons/index.js";
 import "../../gamification/user-statistics/index.js";
+import "../../skeleton/index.js";
+import "../../skeleton/styles.js";
 import "../../../utils/common.js";
 import "../../gamification/user-statistics/components/rank/index.js";
 import "../../gamification/user-statistics/components/rank/styles.js";
@@ -56,7 +58,7 @@ import "../../gamification/vote/twitter-details/styles.js";
 import "./Gamification/Tabs.js";
 import "../useSdkScroll.js";
 import "lodash.throttle";
-import "../../../index-keh7OLCY.js";
+import "../../../index-z0QjLiEL.js";
 import "../../gamification/tabs/index.js";
 import "../../gamification/tabs/styles.js";
 import "./Gamification/Leaderboard.js";
@@ -64,6 +66,7 @@ import "../useClipboardCopy.js";
 import "../../gamification/copyNotification/index.js";
 import "../../gamification/copyNotification/styles.js";
 import "../../gamification/invite-link/index.js";
+import "../../../hooks/analytics.js";
 import "../../gamification/invite-link/styles.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
@@ -88,36 +91,36 @@ import "../../button/index.js";
 import "../../button/styles.js";
 import "../../gamification/question/list/styles.js";
 import "./Gamification/UserSummary.js";
-const h = c(() => import("./Gamification/gamification-feature.js")), Nt = ({ sdk: o, feature: t, className: i, scrollStore: m, appNode: p, scrollNode: n, headerNode: e, responsiveStore: l }) => {
-  const f = g(() => t && t.featureConfig.get().type === u.GAMES ? /* @__PURE__ */ r(a, { className: i, sdk: o, feature: t, children: /* @__PURE__ */ r(
+const h = f(() => import("./Gamification/gamification-feature.js")), ri = ({ sdk: i, feature: t, className: r, scrollStore: m, appNode: p, scrollNode: n, headerNode: e, responsiveStore: l }) => {
+  const u = c(() => t && t.featureConfig.get().type === a.GAMES ? /* @__PURE__ */ o(y, { className: r, sdk: i, feature: t, children: /* @__PURE__ */ o(
     h,
     {
       appNode: p,
       scrollStore: m,
       scrollNode: n,
       headerNode: e,
-      className: i,
+      className: r,
       responsiveStore: l,
       gamification: t
     }
-  ) }) : null, [o, t, i, l, m, n, p, e]);
-  return /* @__PURE__ */ r(
-    y,
+  ) }) : null, [i, t, r, l, m, n, p, e]);
+  return /* @__PURE__ */ o(
+    g,
     {
-      fallback: /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
-      children: f
+      fallback: /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
+      children: u
     }
   );
-}, ti = ({ sdk: o, feature: t, className: i, appNode: m, responsiveStore: p }) => t && t.featureConfig.get().type === u.GAMES ? /* @__PURE__ */ r(a, { className: i, sdk: o, feature: t, noWait: !0, children: /* @__PURE__ */ r(
+}, oi = ({ feature: i, className: t, appNode: r, responsiveStore: m }) => i && i.featureConfig.get().type === a.GAMES ? /* @__PURE__ */ o(
   d,
   {
-    appNode: m,
-    className: i,
-    responsiveStore: p,
-    gamification: t
+    className: t,
+    appNode: r,
+    responsiveStore: m,
+    gamification: i
   }
-) }) : null;
+) : null;
 export {
-  Nt as ActiveFeature,
-  ti as StandaloneFeature
+  ri as ActiveFeature,
+  oi as StandaloneFeature
 };

package/lib/ui/app/Notifications/Onboarding/index.d.ts

@@ -2,6 +2,7 @@
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { type Notification } from '@streamlayer/sdk-web-notifications';
 import { type AppNodeRef } from '../../masters';
+import { ResponsiveStore } from '../../useSdkResponsive';
 export declare const Onboarding: React.FC<{
     sdk: StreamLayerSDK;
     notification: Notification;
@@ -9,4 +10,5 @@ export declare const Onboarding: React.FC<{
     appNode: AppNodeRef;
     sdkInDesktopView?: boolean;
     style?: React.CSSProperties;
+    responsiveStore: ResponsiveStore;
 }>;