@streamlayer/react-ui 1.22.1 → 1.22.2

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

@@ -1,51 +1,25 @@
 import { styled as s } from "@linaria/react";
-import { ScreenTitle as t, ScreenDescription as r, ScreenButton as n } from "../../styles.js";
-import { SvgIcon as e } from "../../../../../ui/icons/index.js";
-const I = /* @__PURE__ */ s("div")({
-  name: "ScreenWrap",
-  class: "s991vvm",
+import { SvgIcon as t } from "../../../../../ui/icons/index.js";
+const n = /* @__PURE__ */ s("span")({
+  name: "NextButton",
+  class: "n991vvm",
   propsAsIs: !1
-}), A = /* @__PURE__ */ s("div")({
-  name: "Main",
-  class: "mnbj36g",
-  propsAsIs: !1
-}), o = () => e, u = /* @__PURE__ */ s(o())({
+}), o = () => t, a = /* @__PURE__ */ s(o())({
   name: "IconArrowRight",
-  class: "izrvgt",
-  propsAsIs: !0
-}), c = () => e, f = /* @__PURE__ */ s(c())({
-  name: "SponsorIcon",
-  class: "swqs2ju",
+  class: "inbj36g",
   propsAsIs: !0
-}), v = /* @__PURE__ */ s("div")({
+}), c = /* @__PURE__ */ s("div")({
   name: "StartScreenSponsor",
-  class: "s1oq8jlq",
+  class: "szrvgt",
   propsAsIs: !1
-}), p = () => t, g = /* @__PURE__ */ s(p())({
-  name: "StartScreenTitle",
-  class: "se4nn9a",
-  propsAsIs: !0
-}), a = () => r, x = /* @__PURE__ */ s(a())({
-  name: "StartScreenDescription",
-  class: "sofug8s",
-  propsAsIs: !0
-}), S = () => n, d = /* @__PURE__ */ s(S())({
-  name: "StartScreenButton",
-  class: "s18s0pjp",
-  propsAsIs: !0
-}), _ = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "StartScreenNote",
-  class: "s1pgosw8",
+  class: "swqs2ju",
   propsAsIs: !1
 });
 export {
-  u as IconArrowRight,
-  A as Main,
-  I as ScreenWrap,
-  f as SponsorIcon,
-  d as StartScreenButton,
-  x as StartScreenDescription,
-  _ as StartScreenNote,
-  v as StartScreenSponsor,
-  g as StartScreenTitle
+  a as IconArrowRight,
+  n as NextButton,
+  p as StartScreenNote,
+  c as StartScreenSponsor
 };

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

@@ -5,7 +5,7 @@ const n = {
   infinite: !1,
   arrows: !1,
   centerMode: !0,
-  centerPadding: "19px",
+  centerPadding: "18px",
   speed: 500,
   rows: 1,
   slidesToShow: 1,

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

@@ -2,10 +2,8 @@ import { Gamification } from '@streamlayer/feature-gamification';
 import { BetPackEventCb } from '../';
 export declare const BetPackContent: React.FC<{
     gamification: Gamification;
-    height?: number;
     swipeable?: boolean;
     autoplay?: boolean;
-    centerPadding?: string;
-    changeHeightOnInit: () => void;
+    overlay?: boolean;
     onEvent: BetPackEventCb;
 }>;

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

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

package/lib/app/masters/BetPack/BetPackContent/styles.d.ts

@@ -1,4 +1,12 @@
 export declare const Carousel: any;
-export declare const desktopDots: import('@linaria/core').LinariaClassName;
 export declare const Dot: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Dots: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ScreenWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SponsorIcon: React.FC<{
+    style?: React.CSSProperties;
+    className?: string;
+}>;
+export declare const ScreenTextBlock: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ScreenTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ScreenDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ScreenButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

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

@@ -1,21 +1,59 @@
+import { jsx as n } from "react/jsx-runtime";
 import { styled as s } from "@linaria/react";
-import o from "react-slick";
-const t = () => o, p = /* @__PURE__ */ s(t())({
+import r from "react-slick";
+import { SvgIcon as c } from "../../../../ui/icons/index.js";
+const t = () => r, S = /* @__PURE__ */ s(t())({
   name: "Carousel",
   class: "c1f9jjsn",
   propsAsIs: !0
-}), a = "d25r51y", l = /* @__PURE__ */ s("div")({
+}), d = /* @__PURE__ */ s("div")({
   name: "Dot",
-  class: "d1lvrmx8",
+  class: "d25r51y",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "Dots",
-  class: "d11xps29",
+  class: "d1lvrmx8",
+  propsAsIs: !1
+}), v = /* @__PURE__ */ s("div")({
+  name: "ScreenWrap",
+  class: "s11xps29",
+  propsAsIs: !1
+}), p = () => c, a = /* @__PURE__ */ s(p())({
+  name: "SponsorIconI",
+  class: "s14qstuv",
+  propsAsIs: !0
+}), A = ({
+  style: o,
+  className: e
+}) => /* @__PURE__ */ n(a, {
+  className: e,
+  style: o,
+  name: "icon-masters-logo"
+}), u = /* @__PURE__ */ s("div")({
+  name: "ScreenTextBlock",
+  class: "s14mdh2e",
+  propsAsIs: !1
+}), x = /* @__PURE__ */ s("div")({
+  name: "ScreenTitle",
+  class: "sqtjig9",
+  propsAsIs: !1
+}), D = /* @__PURE__ */ s("div")({
+  name: "ScreenDescription",
+  class: "ss0mt",
+  propsAsIs: !1
+}), j = /* @__PURE__ */ s("button")({
+  name: "ScreenButton",
+  class: "s10dmski",
   propsAsIs: !1
 });
 export {
-  p as Carousel,
-  l as Dot,
-  c as Dots,
-  a as desktopDots
+  S as Carousel,
+  d as Dot,
+  f as Dots,
+  j as ScreenButton,
+  D as ScreenDescription,
+  u as ScreenTextBlock,
+  x as ScreenTitle,
+  v as ScreenWrap,
+  A as SponsorIcon
 };

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

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

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { AllowedMessageType } from './utils';
 export { BetPackOverlay, type BetPackOverlayProps } from './BetPackOverlay';
@@ -7,8 +8,7 @@ export type BetPackEventCb = (event: {
 }) => void;
 export declare const BetPack: React.FC<{
     sdk: StreamLayerSDK;
-    heightOffset?: number;
     onEvent?: BetPackEventCb;
     swipeable?: boolean;
-    centerPadding?: string;
+    overlay?: boolean;
 }>;

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

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

package/lib/app/masters/BetPack/styles.d.ts

@@ -1,4 +1,3 @@
-export declare const ScreenButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
 export declare const ScreenTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ScreenDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const BetPackContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;