@streamlayer/react-ui 1.18.0 → 1.19.0

package/lib/app/app/Notifications/index.js

@@ -3,7 +3,7 @@ import { cx as V } from "@linaria/core";
 import { useAppContext as O } from "../useAppContext.js";
 import { scrollIntoAppView as T } from "../../useSdkScroll.js";
 import { useState as I, useMemo as D, useEffect as a, useRef as E, useCallback as w } from "react";
-import { r as R } from "../../../index-B1QdimmR.js";
+import { r as R } from "../../../index-DALxy-8N.js";
 import { useStore as y } from "@streamlayer/react-polyfills";
 import { eventBus as q } from "@streamlayer/sdk-web-interfaces";
 import { NotificationType as p } from "@streamlayer/sdk-web-notifications";

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

@@ -1,10 +1,14 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { EmergencyContainer as i, EmergencyScreenTitle as o, EmergencyScreenDescription as t, EmergencyScreenButton as m } from "./styles.js";
-const y = ({ actionFn: n, description: r }) => /* @__PURE__ */ c(i, { children: [
-  /* @__PURE__ */ e(o, { children: "Something went wrong." }),
-  /* @__PURE__ */ e(t, { children: r }),
-  /* @__PURE__ */ e(m, { onClick: n, children: "Try again" })
-] });
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useDynamicParentFont as i } from "../ScreenContainer/useDynamicParentFont.js";
+import { EmergencyContainer as m, EmergencyScreenTitle as g, EmergencyScreenDescription as s, EmergencyScreenButton as y } from "./styles.js";
+const f = ({ actionFn: n, description: r }) => {
+  const { container: c, fontSize: t } = i();
+  return /* @__PURE__ */ o(m, { style: { fontSize: t }, ref: c, children: [
+    /* @__PURE__ */ e(g, { children: "Something went wrong." }),
+    /* @__PURE__ */ e(s, { children: r }),
+    /* @__PURE__ */ e(y, { onClick: n, children: "Try again" })
+  ] });
+};
 export {
-  y as EmergencyScreen
+  f as EmergencyScreen
 };

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

@@ -1,18 +1,46 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useState as a } from "react";
 import { ScreenContainer as c } from "../ScreenContainer/index.js";
-import { ScreenWrap as t, EndScreenWrap as o, EndScreenMain as d, SponsorIcon as s, EndScreenTitle as a, EndScreenDescription as l, EndScreenButton as p } from "./styles.js";
-const E = ({ height: r, onEvent: i }) => /* @__PURE__ */ e(c, { height: r, children: /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ n(d, { children: [
-  /* @__PURE__ */ e(s, { name: "icon-masters-logo" }),
-  /* @__PURE__ */ e(a, { children: "Great picks!" }),
-  /* @__PURE__ */ n(l, { children: [
-    "Stay in the Enhanced Stream for",
-    /* @__PURE__ */ e("br", {}),
-    "live results, predictions, trivia,",
-    /* @__PURE__ */ e("br", {}),
-    "polls, and match insights."
-  ] }),
-  /* @__PURE__ */ e(p, { onClick: () => i({ type: "slOpenGameCenter" }), children: "Open Game Center" })
-] }) }) }) }, "end");
+import { ScreenWrap as i, EndFirstScreenWrap as p, EndScreenMain as t, SponsorIcon as m, EndScreenTitle as h, EndScreenDescription as S, EndScreenButton as d, EndLastScreenWrap as u, EndScreenMedia as E, EndLastScreenDescription as b } from "./styles.js";
+const x = ({ height: r, onEvent: o }) => {
+  const [s, l] = a(
+    0
+    /* FIRST */
+  );
+  return s === 0 ? /* @__PURE__ */ e(c, { height: r, children: /* @__PURE__ */ e(i, { children: /* @__PURE__ */ n(p, { children: [
+    /* @__PURE__ */ n(t, { children: [
+      /* @__PURE__ */ e(m, { name: "icon-masters-logo" }),
+      /* @__PURE__ */ e(h, { children: "Great picks!" }),
+      /* @__PURE__ */ n(S, { children: [
+        "As results come in we’ll send you",
+        /* @__PURE__ */ e("br", {}),
+        "live updates right here."
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      d,
+      {
+        onClick: () => {
+          l(
+            1
+            /* LAST */
+          );
+        },
+        children: "Continue"
+      }
+    )
+  ] }) }) }, "end") : /* @__PURE__ */ e(c, { height: r, children: /* @__PURE__ */ e(i, { children: /* @__PURE__ */ n(u, { children: [
+    /* @__PURE__ */ n(t, { children: [
+      /* @__PURE__ */ e(E, { src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/bet_pack_end_screen.png" }),
+      /* @__PURE__ */ n(b, { children: [
+        "Look for more live match insights,",
+        /* @__PURE__ */ e("br", {}),
+        "predictions and more."
+      ] })
+    ] }),
+    /* @__PURE__ */ e(d, { onClick: () => o({ type: "slOpenGameCenter" }), children: "Open Game Center" })
+  ] }) }) }, "end");
+};
 export {
-  E as EndScreen
+  x as EndScreen
 };

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

@@ -1,7 +1,19 @@
 export declare const ScreenWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const SponsorIcon: any;
 export declare const EndScreenWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const EndFirstScreenWrap: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const EndLastScreenWrap: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
 export declare const EndScreenMain: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const EndScreenTitle: any;
 export declare const EndScreenDescription: any;
+export declare const EndLastScreenDescription: any;
 export declare const EndScreenButton: any;
+export declare const EndScreenMedia: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

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

@@ -1,41 +1,61 @@
 import { styled as e } from "@linaria/react";
-import { ScreenTitle as s, ScreenDescription as n, ScreenButton as r } from "../../styles.js";
-import { SvgIcon as c } from "../../../../../ui/icons/index.js";
-const l = /* @__PURE__ */ e("div")({
+import { ScreenTitle as r, ScreenDescription as s, ScreenButton as c } from "../../styles.js";
+import { SvgIcon as o } from "../../../../../ui/icons/index.js";
+const u = /* @__PURE__ */ e("div")({
   name: "ScreenWrap",
   class: "s8s3kc9",
   propsAsIs: !1
-}), o = () => c, m = /* @__PURE__ */ e(o())({
+}), t = () => o, A = /* @__PURE__ */ e(t())({
   name: "SponsorIcon",
   class: "s1uswib2",
   propsAsIs: !0
-}), E = /* @__PURE__ */ e("div")({
+}), n = /* @__PURE__ */ e("div")({
   name: "EndScreenWrap",
   class: "el0dbzn",
   propsAsIs: !1
-}), I = /* @__PURE__ */ e("div")({
-  name: "EndScreenMain",
+}), p = () => n, x = /* @__PURE__ */ e(p())({
+  name: "EndFirstScreenWrap",
   class: "e11do4i1",
+  propsAsIs: !0
+}), a = () => n, f = /* @__PURE__ */ e(a())({
+  name: "EndLastScreenWrap",
+  class: "ef67yx9",
+  propsAsIs: !0
+}), W = /* @__PURE__ */ e("div")({
+  name: "EndScreenMain",
+  class: "enw6fxs",
   propsAsIs: !1
-}), t = () => s, u = /* @__PURE__ */ e(t())({
+}), i = () => r, _ = /* @__PURE__ */ e(i())({
   name: "EndScreenTitle",
-  class: "ef67yx9",
+  class: "euaws9b",
   propsAsIs: !0
-}), p = () => n, f = /* @__PURE__ */ e(p())({
+}), d = () => s, v = /* @__PURE__ */ e(d())({
   name: "EndScreenDescription",
-  class: "enw6fxs",
+  class: "e9uqaot",
   propsAsIs: !0
-}), a = () => r, x = /* @__PURE__ */ e(a())({
+}), S = () => s, D = /* @__PURE__ */ e(S())({
+  name: "EndLastScreenDescription",
+  class: "etyeg2m",
+  propsAsIs: !0
+}), l = () => c, L = /* @__PURE__ */ e(l())({
   name: "EndScreenButton",
-  class: "euaws9b",
+  class: "e177v9in",
   propsAsIs: !0
+}), M = /* @__PURE__ */ e("img")({
+  name: "EndScreenMedia",
+  class: "ehp7lor",
+  propsAsIs: !1
 });
 export {
-  x as EndScreenButton,
-  f as EndScreenDescription,
-  I as EndScreenMain,
-  u as EndScreenTitle,
-  E as EndScreenWrap,
-  l as ScreenWrap,
-  m as SponsorIcon
+  x as EndFirstScreenWrap,
+  D as EndLastScreenDescription,
+  f as EndLastScreenWrap,
+  L as EndScreenButton,
+  v as EndScreenDescription,
+  W as EndScreenMain,
+  M as EndScreenMedia,
+  _ as EndScreenTitle,
+  n as EndScreenWrap,
+  u as ScreenWrap,
+  A as SponsorIcon
 };

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

@@ -1,6 +1,10 @@
-import { jsx as r } from "react/jsx-runtime";
-import { ScreenContainerBox as n } from "./styles.js";
-const c = ({ children: e, height: o }) => /* @__PURE__ */ r(n, { style: { height: o }, children: /* @__PURE__ */ r("div", { children: e }) });
+import { jsx as n } from "react/jsx-runtime";
+import { ScreenContainerBox as i } from "./styles.js";
+import { useDynamicParentFont as c } from "./useDynamicParentFont.js";
+const s = ({ children: o, height: r }) => {
+  const { container: e, fontSize: t } = c(r);
+  return /* @__PURE__ */ n(i, { style: { height: r, fontSize: t }, ref: e, children: /* @__PURE__ */ n("div", { children: o }) });
+};
 export {
-  c as ScreenContainer
+  s as ScreenContainer
 };

package/lib/app/masters/BetPack/BetPackContent/ScreenContainer/useDynamicParentFont.d.ts

@@ -0,0 +1,4 @@
+export declare const useDynamicParentFont: (height?: number) => {
+    container: import('react').MutableRefObject<HTMLDivElement | null>;
+    fontSize: string;
+};

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

@@ -0,0 +1,27 @@
+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);
+    };
+  }, []), 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
+  };
+};
+export {
+  I as useDynamicParentFont
+};

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

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

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

@@ -1,4 +1,5 @@
 export declare const ScreenWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Main: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const IconArrowRight: any;
 export declare const SponsorIcon: any;
 export declare const StartScreenSponsor: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

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

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

@@ -1,116 +1,142 @@
-import { jsx as a, jsxs as j } from "react/jsx-runtime";
-import { useCallback as v, useSyncExternalStore as C, useRef as b, useMemo as h, useEffect as S } from "react";
-import { EmergencyScreen as R } from "./EmergencyScreen/index.js";
-import { EndScreen as w } from "./EndScreen/index.js";
-import { LoaderScreen as N } from "./LoaderScreen/index.js";
-import { QuestionScreen as T } from "./QuestionScreen/index.js";
-import { ScreenContainer as A } from "./ScreenContainer/index.js";
-import { StartScreen as B } from "./StartScreen/index.js";
-import { settings as P } from "./constants.js";
-import { Carousel as F } from "./styles.js";
-function I(t, n, f) {
-  let u = /* @__PURE__ */ new Set([...n, void 0]);
-  return t.listen((c, s, m) => {
-    u.has(m) && f(c, s, m);
+import { jsx as i, 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 { EmergencyScreen as S } from "./EmergencyScreen/index.js";
+import { EndScreen as B } 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);
   });
 }
-function L(t, n = {}) {
-  let f = v(
-    (c) => n.keys ? I(t, n.keys, c) : t.listen(c),
+function z(t, n = {}) {
+  let u = x(
+    (s) => n.keys ? q(t, n.keys, s) : t.listen(s),
     [n.keys, t]
-  ), u = t.get.bind(t);
-  return C(f, u, u);
+  ), a = t.get.bind(t);
+  return A(u, a, a);
 }
-const W = ({ gamification: t, autoplay: n, swipeable: f, changeHeightOnInit: u, height: c, onEvent: s, centerPadding: m }) => {
-  const o = b(), i = b(null), { data: r, error: d, loading: k } = L(t.betPack.getStore()), { listOfQuestions: p, countQuestionsAvailable: x } = h(() => {
+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) : [];
     return {
       listOfQuestions: e,
-      countQuestionsAvailable: e.filter(({ marketClosed: l }) => !l).length
+      countQuestionsAvailable: e.filter(({ marketClosed: d }) => !d).length
     };
   }, [r]);
-  S(() => {
-    !d && !k && r !== void 0 && s({
+  v(() => {
+    !f && !y && r !== void 0 && !P && o({
       type: "slBetPackReady",
       payload: {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
         next: () => {
           var e;
-          return (e = i.current) == null ? void 0 : e.slickNext();
+          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 = i.current) == null ? void 0 : e.slickPrev();
+          return (e = l.current) == null ? void 0 : e.slickPrev();
         },
         current: 0,
         canNext: !0,
         canPrev: !1
       }
     });
-  }, [r, d, k, s]);
-  const O = v(
-    async (e, l) => {
+  }, [r, f, y, o]);
+  const Q = x(
+    async (e, d) => {
       try {
-        await t.betPackVote(e, l);
+        C(!0), await t.betPackVote(e, d);
       } finally {
-        o.current && clearTimeout(o.current), n && (o.current = setTimeout(() => {
-          var y;
-          (y = i.current) == null || y.slickNext();
+        c.current && clearTimeout(c.current), n && (c.current = setTimeout(() => {
+          var k;
+          (k = l.current) == null || k.slickNext();
         }, 2e3));
       }
     },
-    [t, i, n]
+    [t, l, n]
   );
-  if (S(() => () => {
-    o.current && clearTimeout(o.current);
-  }, []), k || r === void 0)
-    return /* @__PURE__ */ a(N, {});
-  if (d || r === null || !Object.keys(r).length)
-    return /* @__PURE__ */ a(
-      R,
+  if (v(() => () => {
+    c.current && clearTimeout(c.current);
+  }, []), y)
+    return /* @__PURE__ */ i(D, {});
+  if (!f && (r == null || !Object.keys(r).length))
+    return /* @__PURE__ */ i(
+      S,
       {
-        actionFn: () => s({ type: "slHardRefresh" }),
-        description: "It looks like we couldn't load the questions."
+        actionFn: () => o({ type: "slHardRefresh" }),
+        description: `It looks like we couldn't
+ load the questions.`
       }
     );
-  const Q = (e) => {
-    var l;
-    if (s({
+  if (f)
+    return /* @__PURE__ */ i(
+      S,
+      {
+        actionFn: () => o({ 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.`
+      }
+    );
+  const g = (e) => {
+    var d;
+    if (o({
       type: "slBetPackChangeCard",
       payload: {
         current: e,
         canNext: e < Object.keys(r).length + 1,
         canPrev: e >= 1
       }
-    }), e !== 0 && e !== Object.keys(r).length + 1 && ((l = p[e - 1]) != null && l.id)) {
-      t.openQuestion(p[e - 1].id);
+    }), e !== 0 && e !== Object.keys(r).length + 1 && ((d = m[e - 1]) != null && d.id)) {
+      t.openQuestion(m[e - 1].id, {
+        openedFrom: "list",
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        attributes: {
+          id: m[e - 1].id,
+          type: m[e - 1].type,
+          status: m[e - 1].status,
+          attributes: {
+            case: void 0
+          }
+        }
+      });
       return;
     }
     t.closeQuestion();
-  }, g = (e) => e ? /* @__PURE__ */ a(A, { height: c, children: /* @__PURE__ */ a(T, { question: e, vote: O }) }, e.id) : null;
-  return /* @__PURE__ */ j(
-    F,
+  }, j = (e) => e ? /* @__PURE__ */ i(L, { height: s, children: /* @__PURE__ */ i(H, { question: e, vote: Q }) }, e.id) : null;
+  return /* @__PURE__ */ R(
+    K,
     {
-      ...P,
-      swipe: f,
-      onInit: u,
-      centerPadding: m || P.centerPadding,
-      afterChange: Q,
+      ...h,
+      swipe: u,
+      onInit: a,
+      centerPadding: p || h.centerPadding,
+      afterChange: g,
       beforeChange: () => {
-        o.current && clearTimeout(o.current);
+        c.current && clearTimeout(c.current);
       },
-      ref: i,
+      ref: l,
+      className: w(!u && M),
       children: [
-        /* @__PURE__ */ a(B, { height: c, sliderRef: i, countQuestionsAvailable: x }),
-        Object.values(r).map(g),
-        /* @__PURE__ */ a(w, { onEvent: s, height: c })
+        /* @__PURE__ */ i(V, { height: s, sliderRef: l, countQuestionsAvailable: O }),
+        Object.values(r).map(j),
+        /* @__PURE__ */ i(B, { onEvent: o, height: s })
       ]
     }
   );
 };
 export {
-  W as BetPackContent
+  re as BetPackContent
 };

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

@@ -1,3 +1,4 @@
 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>>;

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

@@ -1,20 +1,21 @@
 import { styled as s } from "@linaria/react";
 import o from "react-slick";
-const r = () => o, a = /* @__PURE__ */ s(r())({
+const t = () => o, p = /* @__PURE__ */ s(t())({
   name: "Carousel",
   class: "c1f9jjsn",
   propsAsIs: !0
-}), l = /* @__PURE__ */ s("div")({
+}), a = "d25r51y", l = /* @__PURE__ */ s("div")({
   name: "Dot",
-  class: "d25r51y",
+  class: "d1lvrmx8",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), c = /* @__PURE__ */ s("div")({
   name: "Dots",
-  class: "d1lvrmx8",
+  class: "d11xps29",
   propsAsIs: !1
 });
 export {
-  a as Carousel,
+  p as Carousel,
   l as Dot,
-  p as Dots
+  c as Dots,
+  a as desktopDots
 };