@streamlayer/react-ui 1.19.1 → 1.21.0

package/lib/app/masters/BetPack/BetPackContent/ScreenContainer/useDynamicParentFont.js

@@ -1,27 +1,36 @@
-import a from "lodash.throttle";
-import { useState as d, useRef as T, useEffect as c } from "react";
-const i = "16px", u = 17, O = 21, h = 24, f = (n) => n < 0.9 ? h : n < 1.17 ? O : u, I = (n) => {
-  const [E, s] = d(i), r = T(null);
-  return c(() => {
-    const e = a(() => {
-      const { offsetWidth: t, offsetHeight: o } = r.current || {};
-      if (!t || !o) return;
-      const _ = o / t;
-      s(t ? `${t / f(_)}px` : i);
-    }, 200);
-    return window.screen.orientation.addEventListener("change", e), window.addEventListener("orientationchange", e), window.addEventListener("resize", e), e(), () => {
-      window.screen.orientation.removeEventListener("change", e), window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
+import { useState as T, useRef as h, useEffect as p } from "react";
+const m = "16px", g = 17, f = 21, S = 24, w = (r) => r < 0.9 ? S : r < 1.17 ? f : g, C = (r, E) => {
+  const [v, a] = T(m), [_, u] = T(""), c = h(null), e = h();
+  return p(() => {
+    const t = c.current, n = () => {
+      e.current && (clearTimeout(e.current), e.current = void 0), e.current = setTimeout(() => {
+        if (t) {
+          const i = getComputedStyle(t), d = +i.width.replace("px", ""), O = +i.height.replace("px", "") / d, l = d / w(O);
+          a(`${l < 20 ? l : 20}px`);
+        }
+        e.current = void 0;
+      }, 200);
+    }, s = () => {
+      window.screen.orientation.type.includes("landscape") || Math.abs(window.orientation) === 90 ? u("landscape") : u("portrait");
+    }, o = () => {
+      s(), n();
     };
-  }, []), c(() => {
-    const { offsetWidth: e, offsetHeight: t } = r.current || {};
-    if (!e || !t) return;
-    const o = t / e;
-    s(e ? `${e / f(o)}px` : i);
-  }, [n]), {
-    container: r,
-    fontSize: E
+    return window.screen.orientation.addEventListener("change", o), window.addEventListener("orientationchange", o), window.addEventListener("resize", n), t == null || t.addEventListener("transitionend", n, !1), s(), n(), () => {
+      window.screen.orientation.removeEventListener("change", o), window.removeEventListener("orientationchange", o), window.removeEventListener("resize", n), t == null || t.removeEventListener("transitionend", n), e.current && clearTimeout(e.current);
+    };
+  }, []), p(() => (e.current && (clearTimeout(e.current), e.current = void 0), e.current = setTimeout(() => {
+    if (c.current) {
+      const t = getComputedStyle(c.current), n = +t.width.replace("px", ""), o = +t.height.replace("px", "") / n, i = n / w(o);
+      a(`${i < 20 ? i : 20}px`), e.current = void 0;
+    }
+  }, 200), () => {
+    e.current && clearTimeout(e.current);
+  }), [r]), {
+    container: c,
+    fontSize: v,
+    calcHeight: _ === "landscape" && r !== void 0 && E ? r + 30 : r
   };
 };
 export {
-  I as useDynamicParentFont
+  C as useDynamicParentFont
 };

package/lib/app/masters/BetPack/BetPackContent/StartScreen/index.d.ts

@@ -2,4 +2,5 @@ export declare const StartScreen: React.FC<{
     height: number | undefined;
     countQuestionsAvailable: number;
     sliderRef: React.MutableRefObject<null>;
+    swipeable?: boolean;
 }>;

package/lib/app/masters/BetPack/BetPackContent/StartScreen/index.js

@@ -1,23 +1,23 @@
 import { jsx as r, jsxs as e } from "react/jsx-runtime";
-import { ScreenContainer as c } from "../ScreenContainer/index.js";
-import { ScreenWrap as s, Main as S, SponsorIcon as a, StartScreenSponsor as l, StartScreenTitle as p, StartScreenDescription as d, StartScreenButton as h, IconArrowRight as m } from "./styles.js";
-const R = ({ height: o, countQuestionsAvailable: n, sliderRef: i }) => /* @__PURE__ */ r(c, { height: o, children: /* @__PURE__ */ e(s, { children: [
-  /* @__PURE__ */ e(S, { children: [
-    /* @__PURE__ */ r(a, { name: "icon-masters-logo" }),
-    /* @__PURE__ */ r(l, { children: "MASTERS PRESENTS" }),
-    /* @__PURE__ */ e(p, { children: [
+import { ScreenContainer as s } from "../ScreenContainer/index.js";
+import { ScreenWrap as S, Main as a, SponsorIcon as l, StartScreenSponsor as p, StartScreenTitle as d, StartScreenDescription as h, StartScreenButton as m, IconArrowRight as x } from "./styles.js";
+const T = ({ height: o, countQuestionsAvailable: n, sliderRef: i, swipeable: c }) => /* @__PURE__ */ r(s, { height: o, swipeable: c, children: /* @__PURE__ */ e(S, { children: [
+  /* @__PURE__ */ e(a, { children: [
+    /* @__PURE__ */ r(l, { name: "icon-masters-logo" }),
+    /* @__PURE__ */ r(p, { children: "MASTERS PRESENTS" }),
+    /* @__PURE__ */ e(d, { children: [
       "Tee time predictions:",
       /* @__PURE__ */ r("br", {}),
       "share your expertise"
     ] }),
-    /* @__PURE__ */ e(d, { children: [
+    /* @__PURE__ */ e(h, { children: [
       "Swipe to answer today’s",
       /* @__PURE__ */ r("br", {}),
       "question cards."
     ] })
   ] }),
   /* @__PURE__ */ e(
-    h,
+    m,
     {
       onClick: () => {
         var t;
@@ -25,11 +25,11 @@ const R = ({ height: o, countQuestionsAvailable: n, sliderRef: i }) => /* @__PUR
       },
       children: [
         n ? `${n} questions available` : "See all questions",
-        /* @__PURE__ */ r(m, { name: "iconArrowRight" })
+        /* @__PURE__ */ r(x, { name: "iconArrowRight" })
       ]
     }
   )
 ] }) }, "start");
 export {
-  R as StartScreen
+  T as StartScreen
 };

package/lib/app/masters/BetPack/BetPackContent/index.js

@@ -1,38 +1,38 @@
-import { jsx as i, jsxs as R } from "react/jsx-runtime";
+import { jsx as u, jsxs as R } from "react/jsx-runtime";
 import { ConnectError as T, Code as N } from "@connectrpc/connect";
-import { cx as w } from "@linaria/core";
-import { useCallback as x, useSyncExternalStore as A, useRef as b, useState as F, useMemo as I, useEffect as v } from "react";
+import { cx as A } from "@linaria/core";
+import { useCallback as P, useSyncExternalStore as F, useRef as b, useState as I, useMemo as B, useEffect as v } from "react";
 import { EmergencyScreen as S } from "./EmergencyScreen/index.js";
-import { EndScreen as B } from "./EndScreen/index.js";
+import { EndScreen as M } from "./EndScreen/index.js";
 import { LoaderScreen as D } from "./LoaderScreen/index.js";
 import { QuestionScreen as H } from "./QuestionScreen/index.js";
 import { ScreenContainer as L } from "./ScreenContainer/index.js";
 import { StartScreen as V } from "./StartScreen/index.js";
-import { settings as h } from "./constants.js";
-import { Carousel as K, desktopDots as M } from "./styles.js";
-function q(t, n, u) {
-  let a = /* @__PURE__ */ new Set([...n, void 0]);
-  return t.listen((s, o, p) => {
-    a.has(p) && u(s, o, p);
+import { settings as x } from "./constants.js";
+import { Carousel as K, desktopDots as q } from "./styles.js";
+function z(t, s, r) {
+  let a = new Set(s).add(void 0);
+  return t.listen((o, c, p) => {
+    a.has(p) && r(o, c, p);
   });
 }
-function z(t, n = {}) {
-  let u = x(
-    (s) => n.keys ? q(t, n.keys, s) : t.listen(s),
-    [n.keys, t]
+function E(t, s = {}) {
+  let r = P(
+    (o) => s.keys ? z(t, s.keys, o) : t.listen(o),
+    [s.keys, t]
   ), a = t.get.bind(t);
-  return A(u, a, a);
+  return F(r, a, a);
 }
-const re = ({ gamification: t, autoplay: n, swipeable: u, changeHeightOnInit: a, height: s, onEvent: o, centerPadding: p }) => {
-  const c = b(), l = b(null), [P, C] = F(!1), { data: r, error: f, loading: y } = z(t.betPack.getStore()), { listOfQuestions: m, countQuestionsAvailable: O } = I(() => {
-    const e = r ? Object.values(r) : [];
+const re = ({ gamification: t, autoplay: s, swipeable: r, changeHeightOnInit: a, height: o, onEvent: c, centerPadding: p }) => {
+  const i = b(), l = b(null), [C, O] = I(!1), { data: n, error: f, loading: y } = E(t.betPack.getStore()), { listOfQuestions: m, countQuestionsAvailable: Q } = B(() => {
+    const e = n ? Object.values(n) : [];
     return {
       listOfQuestions: e,
       countQuestionsAvailable: e.filter(({ marketClosed: d }) => !d).length
     };
-  }, [r]);
+  }, [n]);
   v(() => {
-    !f && !y && r !== void 0 && !P && o({
+    !f && !y && n !== void 0 && !C && c({
       type: "slBetPackReady",
       payload: {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -52,55 +52,59 @@ const re = ({ gamification: t, autoplay: n, swipeable: u, changeHeightOnInit: a,
         canPrev: !1
       }
     });
-  }, [r, f, y, o]);
-  const Q = x(
+  }, [n, f, y, c]);
+  const h = P(
     async (e, d) => {
       try {
-        C(!0), await t.betPackVote(e, d);
+        O(!0), await t.betPackVote(e, d);
       } finally {
-        c.current && clearTimeout(c.current), n && (c.current = setTimeout(() => {
+        i.current && clearTimeout(i.current), s && (i.current = setTimeout(() => {
           var k;
           (k = l.current) == null || k.slickNext();
         }, 2e3));
       }
     },
-    [t, l, n]
+    [t, l, s]
   );
   if (v(() => () => {
-    c.current && clearTimeout(c.current);
+    i.current && clearTimeout(i.current);
   }, []), y)
-    return /* @__PURE__ */ i(D, {});
-  if (!f && (r == null || !Object.keys(r).length))
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ u(D, {});
+  if (!f && (n == null || !Object.keys(n).length))
+    return /* @__PURE__ */ u(
       S,
       {
-        actionFn: () => o({ type: "slHardRefresh" }),
+        actionFn: () => c({ type: "slHardRefresh" }),
         description: `It looks like we couldn't
- load the questions.`
+ load the questions.`,
+        isMobile: r,
+        height: o
       }
     );
   if (f)
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ u(
       S,
       {
-        actionFn: () => o({ type: "slHardRefresh" }),
+        actionFn: () => c({ type: "slHardRefresh" }),
         description: f instanceof T && f.code !== N.InvalidArgument ? `The event ID was not
 specified or is invalid.` : `The server is unable to
-handle this request.`
+handle this request.`,
+        isMobile: r,
+        height: o
       }
     );
-  const g = (e) => {
+  const j = (e) => {
     var d;
-    if (o({
+    if (c({
       type: "slBetPackChangeCard",
       payload: {
         current: e,
-        canNext: e < Object.keys(r).length + 1,
+        canNext: e < Object.keys(n).length + 1,
         canPrev: e >= 1
       }
-    }), e !== 0 && e !== Object.keys(r).length + 1 && ((d = m[e - 1]) != null && d.id)) {
+    }), e !== 0 && e !== Object.keys(n).length + 1 && ((d = m[e - 1]) != null && d.id)) {
       t.openQuestion(m[e - 1].id, {
-        openedFrom: "list",
+        openedFrom: "bet-pack",
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
         attributes: {
@@ -115,24 +119,32 @@ handle this request.`
       return;
     }
     t.closeQuestion();
-  }, j = (e) => e ? /* @__PURE__ */ i(L, { height: s, children: /* @__PURE__ */ i(H, { question: e, vote: Q }) }, e.id) : null;
+  }, g = (e) => e ? /* @__PURE__ */ u(L, { height: o, swipeable: r, children: /* @__PURE__ */ u(H, { question: e, vote: h }) }, e.id) : null;
   return /* @__PURE__ */ R(
     K,
     {
-      ...h,
-      swipe: u,
+      ...x,
+      swipe: r,
       onInit: a,
-      centerPadding: p || h.centerPadding,
-      afterChange: g,
+      centerPadding: p || x.centerPadding,
+      afterChange: j,
       beforeChange: () => {
-        c.current && clearTimeout(c.current);
+        i.current && clearTimeout(i.current);
       },
       ref: l,
-      className: w(!u && M),
+      className: A(!r && q),
       children: [
-        /* @__PURE__ */ i(V, { height: s, sliderRef: l, countQuestionsAvailable: O }),
-        Object.values(r).map(j),
-        /* @__PURE__ */ i(B, { onEvent: o, height: s })
+        /* @__PURE__ */ u(
+          V,
+          {
+            height: o,
+            sliderRef: l,
+            countQuestionsAvailable: Q,
+            swipeable: r
+          }
+        ),
+        Object.values(n).map(g),
+        /* @__PURE__ */ u(M, { onEvent: c, height: o, swipeable: r })
       ]
     }
   );

package/lib/app/masters/BetPack/BetPackOverlay/index.d.ts

@@ -9,4 +9,4 @@ export type BetPackOverlayProps = {
         payload?: unknown;
     }) => void;
 };
-export declare const BetPackOverlay: React.FC<BetPackOverlayProps>;
+export declare const BetPackOverlay: import('react').ForwardRefExoticComponent<BetPackOverlayProps & import('react').RefAttributes<HTMLDivElement>>;

package/lib/app/masters/BetPack/BetPackOverlay/index.js

@@ -1,9 +1,10 @@
 import "react/jsx-runtime";
 import "@linaria/core";
+import "../../useOrientation.js";
 import "react";
-import { BetPackOverlay as a } from "../index.js";
+import { BetPackOverlay as c } from "../index.js";
 import "../../../../ui/icons/index.js";
 import "./styles.js";
 export {
-  a as BetPackOverlay
+  c as BetPackOverlay
 };

package/lib/app/masters/BetPack/index.js

@@ -1,90 +1,95 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { cx as p } from "@linaria/core";
-import C from "lodash.throttle";
-import { useState as g, useCallback as S, memo as H, useMemo as B, useRef as N, useEffect as A } from "react";
-import { useStore as P } from "@streamlayer/react-polyfills";
-import { FeatureType as b } from "@streamlayer/sdk-web-types";
-import { BetPackContent as L } from "./BetPackContent/index.js";
-import { EmergencyScreen as z } from "./BetPackContent/EmergencyScreen/index.js";
-import { LoaderScreen as F } from "./BetPackContent/LoaderScreen/index.js";
-import { BetPackContainer as I } from "./styles.js";
-import { defaultEventHandler as O } from "./utils.js";
-import { SvgIcon as x } from "../../../ui/icons/index.js";
-import { Container as R, Header as j, HeaderTitle as E, CloseButton as M, Main as T, Footer as G, SlideSwitchButton as v, IconArrowPrev as U, buttonAvailable as y, IconArrowNext as Y } from "./BetPackOverlay/styles.js";
-const ne = ({ sdk: l, onEvent: o, close: u, isMobile: c }) => {
-  const [t, h] = g(), [e, a] = g(), i = S(
-    (n) => {
-      if (n.type === "slBetPackReady") {
-        const { next: s, prev: d, current: m, canNext: k, canPrev: w } = n.payload || {};
-        h({ next: s, prev: d }), a({
-          current: m,
-          canPrev: w,
-          canNext: k
-        });
-      }
-      if (n.type === "slBetPackChangeCard") {
-        const { current: s, canNext: d, canPrev: m } = n.payload || {};
-        a({ current: s, canNext: d, canPrev: m });
-      }
-      o == null || o(n);
-    },
-    [o]
-  );
-  return /* @__PURE__ */ f(R, { children: [
-    /* @__PURE__ */ f(j, { children: [
-      /* @__PURE__ */ f(E, { children: [
-        /* @__PURE__ */ r(x, { name: "icon-trophy-bet-pack" }),
-        "LiveMatch Experience",
-        " "
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { cx as y } from "@linaria/core";
+import R from "lodash.throttle";
+import { forwardRef as z, useState as k, useCallback as N, useMemo as A, memo as F, useRef as I, useEffect as O } from "react";
+import { useStore as w } from "@streamlayer/react-polyfills";
+import { FeatureType as j } from "@streamlayer/sdk-web-types";
+import { BetPackContent as E } from "./BetPackContent/index.js";
+import { EmergencyScreen as M } from "./BetPackContent/EmergencyScreen/index.js";
+import { LoaderScreen as T } from "./BetPackContent/LoaderScreen/index.js";
+import { BetPackContainer as G } from "./styles.js";
+import { defaultEventHandler as U } from "./utils.js";
+import { useOrientation as Y } from "../useOrientation.js";
+import { SvgIcon as C } from "../../../ui/icons/index.js";
+import { Container as q, Header as D, HeaderTitle as J, CloseButton as K, Main as Q, Footer as V, SlideSwitchButton as H, IconArrowPrev as W, buttonAvailable as B, IconArrowNext as X } from "./BetPackOverlay/styles.js";
+const ur = z(
+  ({ sdk: m, onEvent: o, close: u, isMobile: c }, h) => {
+    const [i, d] = k(), [r, t] = k(), { orientation: s } = Y(), l = N(
+      (a) => {
+        if (a.type === "slBetPackReady") {
+          const { next: P, prev: x, current: p, canNext: b, canPrev: L } = a.payload || {};
+          d({ next: P, prev: x }), t((n) => ({
+            current: n != null && n.current ? n == null ? void 0 : n.current : p,
+            canPrev: n != null && n.current ? n == null ? void 0 : n.canPrev : L,
+            canNext: b
+          }));
+        }
+        if (a.type === "slBetPackChangeCard") {
+          const { current: P, canNext: x, canPrev: p } = a.payload || {};
+          t({ current: P, canNext: x, canPrev: p });
+        }
+        o == null || o(a);
+      },
+      [o]
+    ), g = A(() => c ? s === "landscape" ? "60px" : "18px" : "30px", [c, s]);
+    return /* @__PURE__ */ f(q, { ref: h, children: [
+      /* @__PURE__ */ f(D, { children: [
+        /* @__PURE__ */ f(J, { children: [
+          /* @__PURE__ */ e(C, { name: "icon-trophy-bet-pack" }),
+          "LiveMatch Experience",
+          " "
+        ] }),
+        /* @__PURE__ */ e(K, { onClick: u, children: /* @__PURE__ */ e(C, { name: "icon-close-btn-gray" }) })
       ] }),
-      /* @__PURE__ */ r(M, { onClick: u, children: /* @__PURE__ */ r(x, { name: "icon-close-btn-gray" }) })
-    ] }),
-    /* @__PURE__ */ r(T, { children: /* @__PURE__ */ r(
-      q,
-      {
-        sdk: l,
-        onEvent: i,
-        swipeable: !!c,
-        centerPadding: c ? "18px" : "30px",
-        heightOffset: c ? 0 : 48
-      }
-    ) }),
-    !c && /* @__PURE__ */ f(G, { children: [
-      /* @__PURE__ */ r(v, { onClick: t == null ? void 0 : t.prev, disabled: !(e != null && e.canPrev), children: /* @__PURE__ */ r(U, { name: "iconArrowPrev", className: p((e == null ? void 0 : e.canPrev) && y) }) }),
-      /* @__PURE__ */ r(v, { onClick: t == null ? void 0 : t.next, disabled: !(e != null && e.canNext), children: /* @__PURE__ */ r(Y, { name: "iconArrowPrev", className: p((e == null ? void 0 : e.canNext) && y) }) })
-    ] })
-  ] });
-}, q = H(({ sdk: l, swipeable: o = !0, heightOffset: u = 65, onEvent: c = O, centerPadding: t }) => {
-  const h = P(l.featuresList.getStore()), e = B(() => l.getFeature(b.GAMES), [h]), a = P(l.getUserStore()), i = N(null), [n, s] = g(), d = S(() => {
-    i.current && s(i.current.clientHeight);
+      /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(
+        Z,
+        {
+          sdk: m,
+          onEvent: l,
+          swipeable: !!c,
+          centerPadding: g,
+          heightOffset: c ? 0 : 48
+        }
+      ) }),
+      !c && /* @__PURE__ */ f(V, { children: [
+        /* @__PURE__ */ e(H, { onClick: i == null ? void 0 : i.prev, disabled: !(r != null && r.canPrev), children: /* @__PURE__ */ e(W, { name: "iconArrowPrev", className: y((r == null ? void 0 : r.canPrev) && B) }) }),
+        /* @__PURE__ */ e(H, { onClick: i == null ? void 0 : i.next, disabled: !(r != null && r.canNext), children: /* @__PURE__ */ e(X, { name: "iconArrowPrev", className: y((r == null ? void 0 : r.canNext) && B) }) })
+      ] })
+    ] });
+  }
+), Z = F(({ sdk: m, swipeable: o = !0, heightOffset: u = 65, onEvent: c = U, centerPadding: h }) => {
+  const i = w(m.featuresList.getStore()), d = A(() => m.getFeature(j.GAMES), [i]), r = w(m.getUserStore()), t = I(null), [s, l] = k(), g = N(() => {
+    t.current && l(t.current.clientHeight);
   }, []);
-  return A(() => {
-    const m = C(() => {
-      i.current && s(i.current.clientHeight);
+  return O(() => {
+    const a = R(() => {
+      t.current && l(t.current.clientHeight);
     }, 200);
-    return window.addEventListener("resize", m), () => {
-      window.removeEventListener("resize", m);
+    return window.addEventListener("resize", a), () => {
+      window.removeEventListener("resize", a);
     };
-  }, []), a.data ? e ? /* @__PURE__ */ r(I, { ref: i, className: p("betPack", o && "isMobile"), children: /* @__PURE__ */ r(
-    L,
+  }, []), r.data ? d ? /* @__PURE__ */ e(G, { ref: t, className: y("betPack", o && "isMobile"), children: /* @__PURE__ */ e(
+    E,
     {
-      gamification: e,
+      gamification: d,
       onEvent: c,
       swipeable: o,
-      centerPadding: t,
-      changeHeightOnInit: d,
-      height: n ? n - u : void 0
+      centerPadding: h,
+      changeHeightOnInit: g,
+      height: s ? s - u : void 0
     }
-  ) }) : /* @__PURE__ */ r("div", { children: "no gamification" }) : a.error && !a.loading ? /* @__PURE__ */ r(
-    z,
+  ) }) : /* @__PURE__ */ e("div", { children: "no gamification" }) : r.error && !r.loading ? /* @__PURE__ */ e(
+    M,
     {
       actionFn: () => c({ type: "slHardRefresh" }),
       description: `You are not authorized to
-view this resource.`
+view this resource.`,
+      isMobile: o,
+      height: s ? s - u : void 0
     }
-  ) : /* @__PURE__ */ r(F, {});
+  ) : /* @__PURE__ */ e(T, {});
 });
 export {
-  q as BetPack,
-  ne as BetPackOverlay
+  Z as BetPack,
+  ur as BetPackOverlay
 };

package/lib/app/masters/Features/Gamification/index.d.ts

@@ -1,5 +1,4 @@
 import { AppNodeRef } from '../../..';
-import { ResponsiveStore } from '../../useSdkResponsive';
 import { Gamification as GamificationClass } from '@streamlayer/feature-gamification';
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;
@@ -12,6 +11,5 @@ export declare const GamificationOverlay: React.FC<{
 export declare const GamificationOverlayStandalone: React.FC<{
     gamification: GamificationClass;
     className?: string;
-    responsiveStore: ResponsiveStore;
     appNode: AppNodeRef;
 }>;

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

@@ -1,49 +1,44 @@
 import { jsx as n } from "react/jsx-runtime";
-import { styled as u } from "@linaria/react";
-import { useHideTransition as c } from "../../../../hooks/showIn.js";
-import { useStore as t } from "@streamlayer/react-polyfills";
-import { ModalPortal as d } from "../../../../ui/modal/index.js";
-import { ShowIn as l } from "../../../../ui/show-in/index.js";
-import { Question as f } from "./Question.js";
-import { Tabs as k } from "./Tabs.js";
-const h = () => l, y = /* @__PURE__ */ u(h())({
+import { styled as m } from "@linaria/react";
+import { useHideTransition as a } from "../../../../hooks/showIn.js";
+import { useStore as l } from "@streamlayer/react-polyfills";
+import { ModalPortal as p } from "../../../../ui/modal/index.js";
+import { ShowIn as u } from "../../../../ui/show-in/index.js";
+import { Question as c } from "./Question.js";
+import { Tabs as f } from "./Tabs.js";
+const d = () => u, h = /* @__PURE__ */ m(d())({
   name: "OpenedContainer",
   class: "o1seszvt",
   propsAsIs: !0
-}), A = ({
+}), G = ({
   gamification: o,
-  className: e
-}) => /* @__PURE__ */ n(k, {
-  className: e,
+  className: r
+}) => /* @__PURE__ */ n(f, {
+  className: r,
   gamification: o
-}), D = ({
+}), I = ({
   gamification: o,
-  className: e,
-  appNode: r,
-  responsiveStore: i
+  className: r,
+  appNode: e
 }) => {
-  const s = t(o.openedQuestion.$store), {
-    sdkInDesktopView: m
-  } = t(i, {
-    keys: ["sdkInDesktopView"]
-  }), {
-    hiding: a,
-    onAnimationEnd: p
-  } = c();
-  return !r.current || !s ? null : /* @__PURE__ */ n(d, {
-    container: r,
-    useContainer: !m,
-    children: /* @__PURE__ */ n(y, {
-      className: e,
-      hiding: a,
-      onAnimationEnd: p,
-      children: /* @__PURE__ */ n(f, {
+  const t = l(o.openedQuestion.$store), {
+    hiding: i,
+    onAnimationEnd: s
+  } = a();
+  return !e.current || !t ? null : /* @__PURE__ */ n(p, {
+    container: e,
+    useContainer: !1,
+    children: /* @__PURE__ */ n(h, {
+      className: r,
+      hiding: i,
+      onAnimationEnd: s,
+      children: /* @__PURE__ */ n(c, {
         gamification: o
       })
     })
   });
 };
 export {
-  A as GamificationOverlay,
-  D as GamificationOverlayStandalone
+  G as GamificationOverlay,
+  I as GamificationOverlayStandalone
 };

package/lib/app/masters/Features/index.d.ts

@@ -1,5 +1,4 @@
 import { AppNodeRef } from '../..';
-import { ResponsiveStore } from '../useSdkResponsive';
 import { Features } from '@streamlayer/sdk-web-features';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 /** render feature by type */
@@ -12,7 +11,6 @@ export declare const ActiveFeature: React.FC<{
 export declare const StandaloneFeature: React.FC<{
     sdk: StreamLayerSDK;
     feature: Features | null;
-    responsiveStore: ResponsiveStore;
     appNode: AppNodeRef;
     className?: string;
 }>;

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

@@ -1,26 +1,18 @@
 import { jsx as r } from "react/jsx-runtime";
 import { lazy as l, useMemo as a, Suspense as m } from "react";
-import { FeatureType as o } from "@streamlayer/sdk-web-types";
+import { FeatureType as n } from "@streamlayer/sdk-web-types";
 import { FeatureProvider as u } from "./FeatureProvider.js";
 import { GamificationOverlayStandalone as f } from "./Gamification/index.js";
 const c = l(() => import("./Gamification/gamification-feature.js")), h = ({ sdk: e, feature: t, className: i }) => {
-  const n = a(() => t && t.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ r(u, { className: i, sdk: e, feature: t, children: /* @__PURE__ */ r(c, { className: i, gamification: t }) }) : null, [e, t, i]);
+  const o = a(() => t && t.featureConfig.get().type === n.GAMES ? /* @__PURE__ */ r(u, { className: i, sdk: e, feature: t, children: /* @__PURE__ */ r(c, { className: i, gamification: t }) }) : null, [e, t, i]);
   return /* @__PURE__ */ r(
     m,
     {
       fallback: /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
-      children: n
+      children: o
     }
   );
-}, v = ({ feature: e, className: t, appNode: i, responsiveStore: n }) => e && e.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ r(
-  f,
-  {
-    className: t,
-    appNode: i,
-    responsiveStore: n,
-    gamification: e
-  }
-) : null;
+}, v = ({ feature: e, className: t, appNode: i }) => e && e.featureConfig.get().type === n.GAMES ? /* @__PURE__ */ r(f, { className: t, appNode: i, gamification: e }) : null;
 export {
   h as ActiveFeature,
   v as StandaloneFeature