@streamlayer/react-ui 0.98.1 → 0.100.0

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

@@ -1,36 +1,28 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useStore as u } from "@nanostores/react";
-import { useState as p, useEffect as c } from "react";
-import { FeatureStatus as f } from "@streamlayer/sdk-web-interfaces";
+import { jsx as n } from "react/jsx-runtime";
+import { useStore as i } from "@nanostores/react";
+import { useState as c, useEffect as f } from "react";
+import { FeatureStatus as p } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as S } from "@streamlayer/sdk-web-types";
 import { Points as l } from "../../gamification/points/index.js";
-import "../../animated-counter/index.js";
-import "react-countup";
-import "../../theme/theme.js";
-import "../../theme/breakpoints.js";
-import "../../theme/constants.js";
-import "../../gamification/points/styles.js";
-import "@linaria/react";
-import "../../icons/index.js";
-const a = ({ gamification: r }) => {
-  const o = r.userSummary.$store, [t, i] = p(0);
-  return c(() => {
-    const n = o.subscribe((e) => {
-      var s;
-      (s = e == null ? void 0 : e.summary) != null && s.points && i(e.summary.points);
+const a = ({ gamification: e }) => {
+  const s = e.userSummary.$store, [r, u] = c(0);
+  return f(() => {
+    const m = s.subscribe((t) => {
+      var o;
+      (o = t == null ? void 0 : t.summary) != null && o.points && u(t.summary.points);
     });
     return () => {
-      n();
+      m();
     };
-  }, [o]), /* @__PURE__ */ m(l, { points: t, onClick: () => {
-    r.status.get() === f.Suspended && r.openFeature();
+  }, [s]), /* @__PURE__ */ n(l, { points: r, onClick: () => {
+    e.status.get() === p.Suspended && e.openFeature();
   } });
-}, A = ({ sdk: r }) => {
-  if (!u(r.featuresList.getStore()))
+}, h = ({ sdk: e }) => {
+  if (!i(e.featuresList.getStore()))
     return null;
-  const t = r.getFeature(S.GAMES);
-  return t ? /* @__PURE__ */ m(a, { gamification: t }) : null;
+  const r = e.getFeature(S.GAMES);
+  return r ? /* @__PURE__ */ n(a, { gamification: r }) : null;
 };
 export {
-  A as StreamLayerSDKPoints
+  h as StreamLayerSDKPoints
 };

package/lib/ui/app/masters.js

@@ -1,229 +1,110 @@
-import { jsx as m, jsxs as v } from "react/jsx-runtime";
+import { jsx as n, jsxs as v } from "react/jsx-runtime";
 import { useStore as C } from "@nanostores/react";
 import { useAnalyticsListener as d, newTabLinkListener as A, appScrollListener as F, appClickListener as x } from "../../hooks/analytics.js";
-import { useRef as S, useMemo as b } from "react";
-import { resetCss as f } from "../theme/theme.js";
-import { ActiveFeature as D, StandaloneFeature as I } from "./Features/index.js";
-import { MastersNavigation as M } from "./Navigation/MastersNavigation/index.js";
-import { SDKNotifications as B } from "./Notifications/index.js";
-import { SDKContainer as j, SDKScrollContainer as k } from "./styles.js";
+import { useRef as S, useMemo as b, useEffect as D } from "react";
+import { resetCss as p } from "../theme/theme.js";
+import { ActiveFeature as I, StandaloneFeature as M } from "./Features/index.js";
+import { MastersNavigation as B } from "./Navigation/MastersNavigation/index.js";
+import { SDKNotifications as j } from "./Notifications/index.js";
+import { SDKContainer as k, SDKScrollContainer as E } from "./styles.js";
 import { useMastersApp as K } from "./useMastersApp.js";
 import { MastersContext as O } from "./useMastersContext.js";
 import { useSdkFeature as R } from "./useSdkFeature.js";
 import { useSdkResponsive as T } from "./useSdkResponsive.js";
 import { useSdkScroll as w } from "./useSdkScroll.js";
-import { ChannelsButtonId as E } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as G } from "../navigation/button/LeaderBoard.js";
-import { FeaturedGroupsButtonId as P } from "../navigation/button/FeaturedGroups.js";
-import "lodash.throttle";
-import "@streamlayer/sdk-web-interfaces";
-import "../theme/constants.js";
-import "../theme/breakpoints.js";
-import "@streamlayer/sdk-web-types";
-import "./Features/FeatureProvider.js";
-import "@linaria/react";
-import "./Features/Gamification/index.js";
-import "../gamification/detail/header/index.js";
-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";
-import "../gamification/user-statistics/components/statistic/index.js";
-import "../gamification/user-statistics/components/statistic/styles.js";
-import "../gamification/user-statistics/styles.js";
-import "../modal/index.js";
-import "../../index-jRXrW6ie.js";
-import "../../index-uEuzH3jr.js";
-import "../show-in/index.js";
-import "@linaria/core";
-import "./Features/Gamification/Question.js";
-import "../gamification/detail/sponsor/index.js";
-import "../gamification/vote/index.js";
-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 "../gamification/vote/styles.js";
-import "../gamification/vote/vote-option/index.js";
-import "../animated-counter/index.js";
-import "react-countup";
-import "../gamification/vote/vote-option/styles.js";
-import "../gamification/vote/win-bar/index.js";
-import "../timer/index.js";
-import "react-countdown-circle-timer";
-import "../gamification/vote/win-bar/styles.js";
-import "../gamification/vote/insight-details/index.js";
-import "../questions/insight/index.js";
-import "../video-player/index.js";
-import "../video-player/styles.js";
-import "../questions/insight/styles.js";
-import "../gamification/vote/insight-details/styles.js";
-import "../gamification/vote/twitter-details/index.js";
-import "../questions/twitter/index.js";
-import "../questions/twitter/account/index.js";
-import "../questions/twitter/account/styles.js";
-import "../questions/twitter/styles.js";
-import "../gamification/vote/twitter-details/styles.js";
-import "./Features/Gamification/Tabs.js";
-import "../gamification/tabs/index.js";
-import "../gamification/tabs/styles.js";
-import "./Features/Gamification/Leaderboard.js";
-import "./useClipboardCopy.js";
-import "../gamification/copyNotification/index.js";
-import "../gamification/copyNotification/styles.js";
-import "../gamification/invite-link/index.js";
-import "../gamification/invite-link/styles.js";
-import "react-virtualized-auto-sizer";
-import "react-window";
-import "react-window-infinite-loader";
-import "../gamification/leaderboard/list-item/styles.js";
-import "../../styles_z07sl8-w40geAFS.js";
-import "../gamification/leaderboard/static.js";
-import "react-infinite-scroller";
-import "../gamification/leaderboard/list-item/index.js";
-import "./Features/Gamification/Friends.js";
-import "../gamification/onboarding/slides/onboarding-invite-card/index.js";
-import "../gamification/onboarding/slides/onboarding-invite-card/styles.js";
-import "./Features/Gamification/QuestionsList.js";
-import "../gamification/question/list/index.js";
-import "../gamification/question/index.js";
-import "../gamification/question/styles.js";
-import "../gamification/question/insight/index.js";
-import "../gamification/question/insight/styles.js";
-import "../gamification/question/twitter/index.js";
-import "../gamification/question/twitter/styles.js";
-import "../button/index.js";
-import "../button/styles.js";
-import "../gamification/question/list/styles.js";
-import "./Features/Gamification/UserSummary.js";
-import "../navigation/masters.js";
-import "../navigation/index.js";
-import "../navigation/button/index.js";
-import "../navigation/button/styles.js";
-import "@streamlayer/sdk-web-notifications";
-import "../gamification/question/notification/index.js";
-import "../gamification/question/notification/insight/index.js";
-import "../gamification/question/notification/insight/styles.js";
-import "../gamification/question/notification/styles.js";
-import "../gamification/question/notification/tweet/index.js";
-import "../gamification/question/notification/tweet/styles.js";
-import "../gamification/question/notification/prediction-result/index.js";
-import "../gamification/question/notification/prediction-result/animation-lines/index.js";
-import "../gamification/question/notification/prediction-result/animation-lines/styles.js";
-import "../gamification/question/notification/prediction-result/styles.js";
-import "./Notifications/Onboarding/index.js";
-import "./useImagesPreload.js";
-import "../gamification/onboarding/index.js";
-import "../gamification/onboarding/slides/onboarding-instructions/index.js";
-import "../gamification/onboarding/invitingUser/index.js";
-import "../gamification/onboarding/invitingUser/styles.js";
-import "../gamification/onboarding/slides/onboarding-instructions/styles.js";
-import "../gamification/onboarding/slides/onboarding-rules/index.js";
-import "../gamification/onboarding/slides/onboarding-rules/styles.js";
-import "../gamification/onboarding/slides/onboarding-terms/index.js";
-import "../gamification/onboarding/slides/onboarding-terms/styles.js";
-import "../gamification/onboarding/styles.js";
-import "./Notifications/Onboarding/Notification/index.js";
-import "./Notifications/Onboarding/Notification/styles.js";
-import "./Notifications/styles.js";
-import "../gamification/question/notification/pill/index.js";
-import "../gamification/question/notification/pill/styles.js";
-import "../../index-z0QjLiEL.js";
-const V = ({ sdk: t, className: n, scrollStore: s, appNode: r, scrollNode: p, headerNode: i, responsiveStore: o }) => {
-  const [, l] = R(t);
-  return /* @__PURE__ */ m(
-    D,
+import { ChannelsButtonId as G } from "../navigation/button/Channels.js";
+import { LeaderBoardButtonId as P } from "../navigation/button/LeaderBoard.js";
+import { FeaturedGroupsButtonId as V } from "../navigation/button/FeaturedGroups.js";
+const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, responsiveStore: o }) => {
+  const [, r] = R(e);
+  return /* @__PURE__ */ n(
+    I,
     {
-      className: n,
-      scrollNode: p,
-      appNode: r,
-      scrollStore: s,
-      feature: l,
-      headerNode: i,
+      className: i,
+      scrollNode: s,
+      appNode: t,
+      scrollStore: l,
+      feature: r,
       responsiveStore: o,
-      sdk: t
+      sdk: e
     }
   );
-}, W = ({ sdk: t, className: n, appNode: s, responsiveStore: r }) => {
-  const p = C(t.featuresList.getStore());
-  return p ? Array.from(p, (i) => {
-    const o = t.getFeature(i);
-    return o ? /* @__PURE__ */ m(
-      I,
+}, Y = ({ sdk: e, className: i, appNode: l, responsiveStore: t }) => {
+  const s = C(e.featuresList.getStore());
+  return s ? Array.from(s, (o) => {
+    const r = e.getFeature(o);
+    return r ? /* @__PURE__ */ n(
+      M,
       {
-        className: n,
-        appNode: s,
-        feature: o,
-        responsiveStore: r,
-        sdk: t
+        className: i,
+        appNode: l,
+        feature: r,
+        responsiveStore: t,
+        sdk: e
       },
-      i
+      o
     ) : null;
   }) : null;
-}, No = ({ sdk: t, overlays: n, children: s }) => {
-  const r = S(null), p = S(null), [i] = T(r), [o, l] = w(r, i), { sdkEnabled: e, sdkReady: c, activeOverlay: a, activateAndLoadOverlay: h, activateEventWithId: N, deactivate: g, isLogged: y } = K(t);
-  d(r, { enabled: e, event: "click", listener: A }), d(o, {
-    enabled: e,
+}, ie = ({ sdk: e, overlays: i, children: l }) => {
+  const t = S(null), s = S(null), [o] = T(t), [r, f] = w(t, o), { sdkEnabled: a, sdkReady: c, activeOverlay: m, activateAndLoadOverlay: h, activateEventWithId: N, deactivate: g, isLogged: y } = K(e);
+  d(t, { enabled: a, event: "click", listener: A }), d(r, {
+    enabled: a,
     event: "scrollend",
     listener: F,
     useDomNode: !0
-  }), d(o, {
-    enabled: e,
+  }), d(r, {
+    enabled: a,
     event: "click",
     listener: x,
     useDomNode: !0
   });
-  const L = b(() => ({ sdk: t }), [t]);
-  return /* @__PURE__ */ m(O.Provider, { value: L, children: /* @__PURE__ */ v(j, { ref: r, children: [
-    e && /* @__PURE__ */ m(
-      M,
+  const L = b(() => ({ sdk: e }), [e]);
+  return D(() => {
+    import("./Features/Gamification/gamification-feature.js");
+  }, []), /* @__PURE__ */ n(O.Provider, { value: L, children: /* @__PURE__ */ v(k, { ref: t, children: [
+    a && /* @__PURE__ */ n(
+      B,
       {
-        ref: p,
+        ref: s,
         sdkReady: c,
-        activeOverlay: a,
-        className: f,
+        activeOverlay: m,
+        className: p,
         setActiveOverlay: (u) => h("", u),
         scrollToTop: () => {
           var u;
-          return (u = o.current) == null ? void 0 : u.scrollTo(0, 0);
+          return (u = r.current) == null ? void 0 : u.scrollTo(0, 0);
         },
-        responsiveStore: i
+        responsiveStore: o
       }
     ),
-    /* @__PURE__ */ v(k, { className: "sl-hide-on-modal", ref: o, "data-nav": e.toString(), children: [
-      c && /* @__PURE__ */ m(
-        B,
+    /* @__PURE__ */ v(E, { className: "sl-hide-on-modal", ref: r, "data-nav": a.toString(), children: [
+      c && /* @__PURE__ */ n(
+        j,
         {
-          sdk: t,
-          scrollNode: o,
-          headerNode: p,
-          appNode: r,
-          scrollStore: l,
-          responsiveStore: i
+          sdk: e,
+          scrollNode: r,
+          headerNode: s,
+          appNode: t,
+          scrollStore: f,
+          responsiveStore: o
         }
       ),
-      /* @__PURE__ */ m("div", { style: !e || a === E ? {} : { display: "none" }, children: s && s({ activateEventWithId: N, deactivate: g }) }),
-      n && a === G && n[a],
-      c && a === P && /* @__PURE__ */ m(
-        V,
+      /* @__PURE__ */ n("div", { style: !a || m === G ? {} : { display: "none" }, children: l && l({ activateEventWithId: N, deactivate: g }) }),
+      i && m === P && i[m],
+      c && m === V && /* @__PURE__ */ n(
+        W,
         {
-          scrollStore: l,
-          responsiveStore: i,
-          scrollNode: o,
-          appNode: r,
-          headerNode: p,
-          className: f,
-          sdk: t
+          scrollStore: f,
+          responsiveStore: o,
+          scrollNode: r,
+          appNode: t,
+          className: p,
+          sdk: e
         }
       ),
-      c && /* @__PURE__ */ m(W, { responsiveStore: i, appNode: r, className: f, sdk: t })
+      c && /* @__PURE__ */ n(Y, { responsiveStore: o, appNode: t, className: p, sdk: e })
     ] }),
-    e && !y && /* @__PURE__ */ m(
+    a && !y && /* @__PURE__ */ n(
       "div",
       {
         style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" },
@@ -233,5 +114,5 @@ const V = ({ sdk: t, className: n, scrollStore: s, appNode: r, scrollNode: p, he
   ] }) });
 };
 export {
-  No as MastersApp
+  ie as MastersApp
 };

package/lib/ui/app/useClipboardCopy.js

@@ -1,19 +1,15 @@
 import { jsx as u } from "react/jsx-runtime";
-import { useRef as p, useState as m, useCallback as l, useEffect as s } from "react";
-import { r as f } from "../../index-jRXrW6ie.js";
+import { useRef as l, useState as s, useCallback as p, useEffect as f } from "react";
+import { r as m } from "../../index-Bicco-Aq.js";
 import { CopyNotification as b } from "../gamification/copyNotification/index.js";
-import "../../index-uEuzH3jr.js";
-import "../icons/index.js";
-import "@linaria/react";
-import "../gamification/copyNotification/styles.js";
-const h = (r) => {
-  const t = p(), [c, o] = m(null), a = l(
-    async (i) => {
-      var e;
-      if (i && ((e = navigator == null ? void 0 : navigator.clipboard) != null && e.writeText)) {
+const T = (r) => {
+  const t = l(), [i, o] = s(null), a = p(
+    async (e) => {
+      var c;
+      if (e && ((c = navigator == null ? void 0 : navigator.clipboard) != null && c.writeText)) {
         t.current && (clearTimeout(t.current), o(null));
         try {
-          await navigator.clipboard.writeText(i), r.current && (o(f.createPortal(/* @__PURE__ */ u(b, {}), r.current)), t.current = setTimeout(() => {
+          await navigator.clipboard.writeText(e), r.current && (o(m.createPortal(/* @__PURE__ */ u(b, {}), r.current)), t.current = setTimeout(() => {
             o(null);
           }, 1e3));
         } catch (n) {
@@ -23,10 +19,10 @@ const h = (r) => {
     },
     [r]
   );
-  return s(() => () => {
+  return f(() => () => {
     clearTimeout(t.current);
-  }, []), [a, c];
+  }, []), [a, i];
 };
 export {
-  h as useClipboardCopy
+  T as useClipboardCopy
 };

package/lib/ui/app/useMastersApp.js

@@ -1,45 +1,35 @@
-import { useStore as v } from "@nanostores/react";
-import { useRef as y, useState as E, useCallback as z, useEffect as u } from "react";
-import { FeatureType as p } from "@streamlayer/sdk-web-types";
+import { useStore as u } from "@nanostores/react";
+import { useRef as y, useState as d, useCallback as z, useEffect as c } from "react";
+import { FeatureType as l } from "@streamlayer/sdk-web-types";
 import "./Navigation/MastersNavigation/index.js";
-import { FeaturedGroupsButtonId as c } from "../navigation/button/FeaturedGroups.js";
+import { FeaturedGroupsButtonId as p } from "../navigation/button/FeaturedGroups.js";
 import { ChannelsButtonId as i } from "../navigation/button/Channels.js";
-import "react/jsx-runtime";
-import "../navigation/button/LeaderBoard.js";
-import "@linaria/react";
-import "../icons/index.js";
-import "../navigation/button/index.js";
-import "@linaria/core";
-import "../navigation/button/styles.js";
-import "../navigation/masters.js";
-import "../navigation/index.js";
-import "../theme/constants.js";
-const j = (e) => {
-  const f = y(""), [S, o] = E(!1), g = v(e.status), a = v(e.userId()), l = v(e.getActiveFeature()), n = g === "ready", [m, r] = E(c), A = z(
+const C = (e) => {
+  const f = y(""), [v, a] = d(!1), E = u(e.status), g = u(e.sdkStore.slStreamId), n = u(e.userId()), m = u(e.getActiveFeature()), o = E === "ready" && !!g.data, [A, r] = d(p), S = z(
     (t, s) => {
-      r(s), t && e.createEventSession(t), s === c ? window.requestAnimationFrame(() => {
-        e.openFeature(p.GAMES);
+      r(s), t && e.createEventSession(t), s === p ? window.requestAnimationFrame(() => {
+        e.openFeature(l.GAMES);
       }) : e.closeFeature(!1);
     },
     [e]
   );
-  u(() => {
-    !n && m === c && (r(i), e.closeFeature(!0));
-  }, [n, m, e]), u(() => {
-    l === p.GAMES ? r(c) : l === p.UNSET && r(i);
-    const t = e.getFeature(p.GAMES);
+  c(() => {
+    !o && A === p && (r(i), e.closeFeature(!0));
+  }, [o, A, e]), c(() => {
+    m === l.GAMES ? r(p) : m === l.UNSET && r(i);
+    const t = e.getFeature(l.GAMES);
     t && (t.closeQuestion(), t.closeUser());
-  }, [l, e]);
+  }, [m, e]);
   const F = (t) => {
-    f.current = t, o(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: s, err: b }) => {
-      if (b) {
-        A(t, i);
+    f.current = t, a(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: s, err: I }) => {
+      if (I) {
+        S(t, i);
         return;
       }
       if (s) {
         e.isUserAuthorized().then((h) => {
           if (h) {
-            A(t, i);
+            S(t, i);
             return;
           } else
             e.disableApp();
@@ -47,32 +37,32 @@ const j = (e) => {
         return;
       }
     });
-  }, d = () => {
-    o(!1), e.disableApp();
+  }, b = () => {
+    a(!1), e.disableApp();
   };
-  return u(() => {
-    if (!a) {
-      n && (r(i), e.disableApp());
+  return c(() => {
+    if (!n) {
+      o && (r(i), e.disableApp());
       return;
     }
-    if (a && f.current && S) {
+    if (n && f.current && v) {
       e.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
         e.createEventSession(f.current);
       });
       return;
     }
-  }, [a]), u(() => () => {
-    o(!1), e.disableApp();
-  }, [o, e]), {
-    sdkEnabled: S,
-    sdkReady: n,
-    activeOverlay: m,
-    activateAndLoadOverlay: A,
+  }, [n]), c(() => () => {
+    a(!1), e.disableApp();
+  }, [a, e]), {
+    sdkEnabled: v,
+    sdkReady: o,
+    activeOverlay: A,
+    activateAndLoadOverlay: S,
     activateEventWithId: F,
-    deactivate: d,
-    isLogged: !!a
+    deactivate: b,
+    isLogged: !!n
   };
 };
 export {
-  j as useMastersApp
+  C as useMastersApp
 };

package/lib/ui/app/useSdkResponsive.js

@@ -1,14 +1,13 @@
 import c from "lodash.throttle";
 import { useState as m, useEffect as u } from "react";
 import { BREAKPOINTS as r } from "../theme/constants.js";
-import { m as p } from "../../index-z0QjLiEL.js";
-import "../../index-uEuzH3jr.js";
+import { m as l } from "../../index-CZvwzN5o.js";
 const d = Object.keys(r), i = () => {
-  const t = window.innerWidth;
+  const n = window.innerWidth;
   let e = "sm";
-  for (let n = d.length - 1; n > 0; n--) {
-    const s = d[n];
-    if (!(t < r[s]) && t >= r[s]) {
+  for (let t = d.length - 1; t > 0; t--) {
+    const s = d[t];
+    if (!(n < r[s]) && n >= r[s]) {
       e = s;
       break;
     }
@@ -17,30 +16,30 @@ const d = Object.keys(r), i = () => {
     name: e,
     size: r[e]
   };
-}, w = (t) => {
+}, w = (n) => {
   var e;
-  return (((e = t.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
-}, k = (t) => t >= r.xl, I = (t) => {
+  return (((e = n.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
+}, k = (n) => n >= r.xl, v = (n) => {
   const [e] = m(() => {
-    const n = i();
-    return p({
+    const t = i();
+    return l({
       screen: i(),
-      sdkInView: w(t),
-      sdkInDesktopView: k(n.size)
+      sdkInView: w(n),
+      sdkInDesktopView: k(t.size)
     });
   });
   return u(() => {
-    const n = c(() => {
-      e.setKey("sdkInView", w(t));
+    const t = c(() => {
+      e.setKey("sdkInView", w(n));
     }, 200), s = c(() => {
       const o = i();
       e.setKey("screen", o), e.setKey("sdkInDesktopView", k(o.size));
     }, 200);
-    return window.addEventListener("scroll", n), window.addEventListener("resize", s), () => {
-      window.removeEventListener("scroll", n), window.removeEventListener("resize", s);
+    return window.addEventListener("scroll", t), window.addEventListener("resize", s), () => {
+      window.removeEventListener("scroll", t), window.removeEventListener("resize", s);
     };
-  }, [e, t]), [e];
+  }, [e, n]), [e];
 };
 export {
-  I as useSdkResponsive
+  v as useSdkResponsive
 };