@streamlayer/react-ui 1.0.0 → 1.2.0

package/lib/ui/theme/theme.js

@@ -1,7 +1,8 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { breakpoints as n } from "./breakpoints.js";
-import { colors as h, FONT as t } from "./constants.js";
+import { colors as s, colorsAdvertisement as h, FONT as t } from "./constants.js";
 const l = `
+  ${s}
   ${h}
   --font-family: ${t.REGULAR};
   --font-regular: ${t.REGULAR};
@@ -10,9 +11,11 @@ const l = `
   --font-weight-default: ${t.WEIGHT_DEFAULT};
 
   --header-offset: 0px;
-  --header-height: 0px;
+  --header-height: 68px;
   --watch-live-header: 0px;
   --animation-duration: 0.5s;
+  --promo-animation-duration: 0.5s;
+  --promo-animation-function: ease-in;
   --animation-function: ease;
   --container-padding: 16px;
   --border-radius: 8px;
@@ -21,14 +24,14 @@ const l = `
   --max-notifications-width: 400px;
 
   ${n.down("xl")`
-    --header-offset: 56px;
+    --header-offset: 0px;
     --watch-live-header: 46px;
   `}
 
   ${n.intermediate("xl", "lg")`
-    --header-offset: 76px;
+    --header-offset: 0px;
   `}
-`, p = "StreamLayerCSSReset", m = "ttkj0ah", x = () => /* @__PURE__ */ e("table", {
+`, f = "StreamLayerCSSReset", x = "ttkj0ah", u = () => /* @__PURE__ */ e("table", {
   children: /* @__PURE__ */ r("table", {
     children: [/* @__PURE__ */ e("thead", {
       children: /* @__PURE__ */ r("tr", {
@@ -39,11 +42,11 @@ const l = `
         })]
       })
     }), /* @__PURE__ */ e("tbody", {
-      children: l.split(";").map((a) => {
-        const i = a.trim(), [o, d] = i.split(":");
+      children: l.split(";").map((o) => {
+        const i = o.trim(), [a, d] = i.split(":");
         return /* @__PURE__ */ r("tr", {
           children: [/* @__PURE__ */ e("td", {
-            children: o
+            children: a
           }), /* @__PURE__ */ e("td", {
             children: d
           })]
@@ -53,8 +56,8 @@ const l = `
   })
 });
 export {
-  x as ThemeVariables,
-  p as resetCss,
-  m as theme,
+  u as ThemeVariables,
+  f as resetCss,
+  x as theme,
   l as themeStr
 };

package/lib/ui/timer/index.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
+import { default as React } from 'react';
+
 interface TimerProps {
     isPlaying?: boolean;
     duration?: number;
     onTimerExpired?: () => void;
 }
-export declare const RemainingTime: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const RemainingTime: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Timer: React.FC<TimerProps>;
 export {};

package/lib/ui/timer/index.js

@@ -1,45 +1,45 @@
-import { jsx as R } from "react/jsx-runtime";
-import { styled as _ } from "@linaria/react";
-import { useState as c, useEffect as a, useCallback as n } from "react";
-import { CountdownCircleTimer as N } from "react-countdown-circle-timer";
-import { COLORS as t } from "../theme/constants.js";
-const D = [t.PRIMARY_GREEN1, t.SECONDARY_RED1, t.SECONDARY_RED1, t.NEUTRALS_GRAY3], T = [10, 10, 1, 0], Y = /* @__PURE__ */ _("div")({
+import { jsx as r } from "react/jsx-runtime";
+import { styled as M } from "@linaria/react";
+import { useState as c, useEffect as _, useCallback as n } from "react";
+import { CountdownCircleTimer as h } from "react-countdown-circle-timer";
+import { TIMER_COLORS as p, TIMER_GREEN as E, TIMER_RED as S, TIMER_GRAY as g } from "../theme/constants.js";
+const k = [10, 10, 1, 0], O = /* @__PURE__ */ M("div")({
   name: "RemainingTime",
   class: "r165427",
   propsAsIs: !1
-}), h = t.SECONDARY_GREEN6, l = t.SECONDARY_RED3, m = t.NEUTRALS_GRAY3, G = ({
+}), u = E, l = S, m = g, L = ({
   isPlaying: i = !0,
-  duration: o = 30,
-  onTimerExpired: e
+  duration: t = 30,
+  onTimerExpired: s
 }) => {
-  const [C, s] = c(o > 10 ? h : l), [E, S] = c(2);
-  a(() => {
-    o === 0 && (S(0), s(m));
+  const [R, o] = c(t > 10 ? u : l), [f, a] = c(2);
+  _(() => {
+    t === 0 && (a(0), o(m));
+  }, [t]);
+  const C = ({
+    remainingTime: e
+  }) => /* @__PURE__ */ r(O, {
+    children: t === 0 ? 0 : e
+  }), T = n(() => {
+    s == null || s(), o(m);
+  }, [s, o]), I = n((e) => {
+    e === 10 && o(l);
   }, [o]);
-  const f = ({
-    remainingTime: r
-  }) => /* @__PURE__ */ R(Y, {
-    children: o === 0 ? 0 : r
-  }), A = n(() => {
-    e == null || e(), s(m);
-  }, [e, s]), O = n((r) => {
-    r === 10 && s(l);
-  }, [s]);
-  return /* @__PURE__ */ R(N, {
+  return /* @__PURE__ */ r(h, {
     isPlaying: i,
-    duration: o,
-    colors: D,
-    colorsTime: T,
+    duration: t,
+    colors: p,
+    colorsTime: k,
     size: 32,
-    strokeWidth: E,
+    strokeWidth: f,
     trailStrokeWidth: 2,
-    trailColor: C,
-    onComplete: A,
-    onUpdate: O,
-    children: f
+    trailColor: R,
+    onComplete: T,
+    onUpdate: I,
+    children: C
   });
 };
 export {
-  Y as RemainingTime,
-  G as Timer
+  O as RemainingTime,
+  L as Timer
 };

package/lib/ui/video-player/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type ControlVideoProps = {
     muted: boolean;
 };
@@ -6,6 +5,7 @@ export type VideoPlayerProps = {
     poster?: string;
     source?: string;
     controlVideo?: (props: ControlVideoProps) => void;
+    aspectRatio?: string;
 };
 export declare const pauseAllVideos: () => void;
 /**

package/lib/ui/video-player/index.js

@@ -1,77 +1,85 @@
-import { jsxs as x, jsx as n } from "react/jsx-runtime";
-import { cx as C } from "@linaria/core";
-import { useRef as E, useState as g, useCallback as v, useEffect as d } from "react";
-import { eventBus as S } from "@streamlayer/sdk-web-interfaces";
-import { SvgIcon as y } from "../icons/index.js";
-import { Container as T, ToggleIconPause as L, Player as j, Poster as k, Control as H } from "./styles.js";
-const M = (s, a) => {
+import { jsxs as C, jsx as o } from "react/jsx-runtime";
+import { cx as E } from "@linaria/core";
+import { useRef as S, useState as v, useCallback as d, useEffect as y } from "react";
+import { eventBus as T } from "@streamlayer/sdk-web-interfaces";
+import { SvgIcon as P } from "../icons/index.js";
+import { Container as L, ToggleIconPause as j, Player as k, Poster as H, Control as M } from "./styles.js";
+const A = (s, a) => {
   for (const t of s)
     t.isIntersecting || t.target instanceof HTMLVideoElement && !t.target.paused && (a.unobserve(t.target), t.target.pause());
-}, P = new IntersectionObserver(M, { threshold: 0.5 }), f = /* @__PURE__ */ new Set(), A = (s) => {
-  P.observe(s), f.add(s);
-}, o = (s) => {
-  P.unobserve(s), f.delete(s);
-}, B = () => {
-  for (const s of f)
-    s instanceof HTMLVideoElement && !s.paused && (s.pause(), o(s));
-}, J = ({ poster: s, source: a, controlVideo: t }) => {
-  const e = E(null), [u, c] = g(!1), [m, p] = g(!0), h = v(() => {
-    t == null || t({ muted: !0 });
-  }, [t]), i = v(() => {
-    t == null || t({ muted: !1 });
-  }, [t]), I = (r) => {
-    r.stopPropagation();
-    const b = e == null ? void 0 : e.current;
-    if (b) {
-      if (u)
-        b.pause(), e.current && o(e.current);
+}, h = new IntersectionObserver(A, { threshold: 0.5 }), m = /* @__PURE__ */ new Set(), B = (s) => {
+  h.observe(s), m.add(s);
+}, i = (s) => {
+  h.unobserve(s), m.delete(s);
+}, F = () => {
+  for (const s of m)
+    s instanceof HTMLVideoElement && !s.paused && (s.pause(), i(s));
+}, K = ({ poster: s, source: a, aspectRatio: t, controlVideo: r }) => {
+  const e = S(null), [c, l] = v(!1), [p, b] = v(!0), I = d(() => {
+    r == null || r({ muted: !0 });
+  }, [r]), u = d(() => {
+    r == null || r({ muted: !1 });
+  }, [r]), O = (n) => {
+    n.stopPropagation();
+    const g = e == null ? void 0 : e.current;
+    if (g) {
+      if (c)
+        g.pause(), e.current && i(e.current);
       else {
-        const l = e == null ? void 0 : e.current;
-        if (!l)
+        const f = e == null ? void 0 : e.current;
+        if (!f)
           return;
-        B(), A(l), l.play().catch((w) => console.log(w)), p(!1);
+        F(), B(f), f.play().catch((x) => console.log(x)), b(!1);
       }
-      S.emit("interactions", {
+      T.emit("interactions", {
         action: "tap",
         payload: {}
       });
     }
-  }, O = () => {
-    var r;
-    e.current && o(e.current), (r = e == null ? void 0 : e.current) == null || r.load(), p(!0);
+  }, w = () => {
+    var n;
+    e.current && i(e.current), (n = e == null ? void 0 : e.current) == null || n.load(), b(!0);
   };
-  return d(() => {
-    e.current && o(e.current);
-  }, []), d(() => {
-    const r = e == null ? void 0 : e.current;
+  return y(() => {
+    e.current && i(e.current);
+  }, []), y(() => {
+    const n = e == null ? void 0 : e.current;
     return () => {
-      r && (r.paused || i(), o(r));
+      n && (n.paused || u(), i(n));
     };
-  }, [i]), /* @__PURE__ */ x(T, { onClick: I, className: C(u && L), children: [
-    /* @__PURE__ */ n(
-      j,
-      {
-        ref: e,
-        src: a,
-        onPlay: () => {
-          h(), c(!0);
-        },
-        onPause: () => {
-          i(), c(!1);
-        },
-        onEnded: () => {
-          i(), c(!1), O();
-        },
-        style: { visibility: m ? "hidden" : "visible" },
-        controls: !1,
-        playsInline: !0
-      }
-    ),
-    /* @__PURE__ */ n(k, { src: s, style: { visibility: m ? "visible" : "hidden" } }),
-    /* @__PURE__ */ n(H, { children: u ? /* @__PURE__ */ n(y, { name: "icon-pause" }) : /* @__PURE__ */ n(y, { name: "icon-play" }) })
-  ] });
+  }, [u]), /* @__PURE__ */ C(
+    L,
+    {
+      onClick: O,
+      className: E(c && j),
+      style: t ? { aspectRatio: t } : {},
+      children: [
+        /* @__PURE__ */ o(
+          k,
+          {
+            ref: e,
+            src: a,
+            onPlay: () => {
+              I(), l(!0);
+            },
+            onPause: () => {
+              u(), l(!1);
+            },
+            onEnded: () => {
+              u(), l(!1), w();
+            },
+            style: { visibility: p ? "hidden" : "visible" },
+            controls: !1,
+            playsInline: !0
+          }
+        ),
+        /* @__PURE__ */ o(H, { src: s, style: { visibility: p ? "visible" : "hidden" } }),
+        /* @__PURE__ */ o(M, { children: c ? /* @__PURE__ */ o(P, { name: "icon-pause" }) : /* @__PURE__ */ o(P, { name: "icon-play" }) })
+      ]
+    }
+  );
 };
 export {
-  J as VideoPlayer,
-  B as pauseAllVideos
+  K as VideoPlayer,
+  F as pauseAllVideos
 };

package/lib/ui/video-player/styles.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Player: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLVideoElement> & import("react").VideoHTMLAttributes<HTMLVideoElement> & Record<never, unknown>>;
-export declare const Poster: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const Control: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ToggleIconPause: import("@linaria/core").LinariaClassName;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Player: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLVideoElement> & import('react').VideoHTMLAttributes<HTMLVideoElement> & Record<never, unknown>>;
+export declare const Poster: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const Control: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ToggleIconPause: import('@linaria/core').LinariaClassName;

package/lib/utils/debug/storage.js

@@ -1,6 +1,6 @@
 var n = Object.defineProperty;
 var i = (s, r, e) => r in s ? n(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
-var t = (s, r, e) => (i(s, typeof r != "symbol" ? r + "" : r, e), e);
+var t = (s, r, e) => i(s, typeof r != "symbol" ? r + "" : r, e);
 import { Storage as h } from "@streamlayer/sdk-web-storage";
 class d extends h {
   constructor() {

package/lib/utils/storage.js

@@ -1,6 +1,6 @@
 var n = Object.defineProperty;
 var i = (s, r, e) => r in s ? n(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
-var t = (s, r, e) => (i(s, typeof r != "symbol" ? r + "" : r, e), e);
+var t = (s, r, e) => i(s, typeof r != "symbol" ? r + "" : r, e);
 import { Storage as h } from "@streamlayer/sdk-web-storage";
 class d extends h {
   constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -11,19 +11,24 @@
       "types": "./lib/index.d.ts"
     },
     "./masters": {
-      "import": "./lib/ui/app/masters/masters.js",
-      "default": "./lib/ui/app/masters/masters.js",
-      "types": "./lib/ui/app/masters/masters.d.ts"
+      "import": "./lib/app/masters/masters.js",
+      "default": "./lib/app/masters/masters.js",
+      "types": "./lib/app/masters/masters.d.ts"
     },
     "./mastersPoints": {
-      "import": "./lib/ui/app/masters/Points/index.js",
-      "default": "./lib/ui/app/masters/Points/index.js",
-      "types": "./lib/ui/app/masters/Points/index.d.ts"
+      "import": "./lib/app/masters/Points/index.js",
+      "default": "./lib/app/masters/Points/index.js",
+      "types": "./lib/app/masters/Points/index.d.ts"
     },
     "./points": {
-      "import": "./lib/ui/app/app/Points/index.js",
-      "default": "./lib/ui/app/app/Points/index.js",
-      "types": "./lib/ui/app/app/Points/index.d.ts"
+      "import": "./lib/app/app/Points/index.js",
+      "default": "./lib/app/app/Points/index.js",
+      "types": "./lib/app/app/Points/index.d.ts"
+    },
+    "./advertisement": {
+      "import": "./lib/app/app/Advertisement/index.js",
+      "default": "./lib/app/app/Advertisement/index.js",
+      "types": "./lib/app/app/Advertisement/index.d.ts"
     },
     "./*": {
       "import": "./lib/*/index.js",
@@ -40,8 +45,8 @@
     "package.json"
   ],
   "peerDependencies": {
-    "@lottiefiles/react-lottie-player": "^3.5.3",
-    "@streamlayer/sl-eslib": "^5.85.0",
+    "@lottiefiles/react-lottie-player": "^3.5.4",
+    "@streamlayer/sl-eslib": "^5.104.1",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "nanoid": "3.3.7",
@@ -49,18 +54,18 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^1.0.0",
-    "@streamlayer/sdk-web-analytics": "^1.0.0",
-    "@streamlayer/sdk-web": "^1.0.0",
-    "@streamlayer/sdk-web-api": "^1.0.0",
-    "@streamlayer/sdk-web-core": "^1.0.0",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.0.0",
-    "@streamlayer/sdk-web-features": "^1.0.0",
-    "@streamlayer/sdk-web-interfaces": "^1.0.0",
-    "@streamlayer/sdk-web-logger": "^1.0.0",
-    "@streamlayer/sdk-web-notifications": "^1.0.0",
-    "@streamlayer/sdk-web-storage": "^1.0.0",
-    "@streamlayer/sdk-web-types": "^1.0.0"
+    "@streamlayer/feature-gamification": "^1.2.0",
+    "@streamlayer/sdk-web": "^1.0.2",
+    "@streamlayer/sdk-web-analytics": "^1.0.2",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.0.2",
+    "@streamlayer/sdk-web-api": "^1.1.1",
+    "@streamlayer/sdk-web-core": "^1.0.2",
+    "@streamlayer/sdk-web-features": "^1.0.2",
+    "@streamlayer/sdk-web-interfaces": "^1.0.2",
+    "@streamlayer/sdk-web-logger": "^1.0.2",
+    "@streamlayer/sdk-web-notifications": "^1.0.2",
+    "@streamlayer/sdk-web-storage": "^1.0.2",
+    "@streamlayer/sdk-web-types": "^1.1.1"
   },
   "nx": {
     "implicitDependencies": [
@@ -73,33 +78,34 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@linaria/babel-preset": "^5.0.4",
-    "@linaria/core": "^6.0.0",
-    "@linaria/react": "^6.0.0",
+    "@linaria/core": "^6.2.0",
+    "@linaria/react": "^6.2.1",
     "@nanostores/react": "^0.7.2",
-    "@storybook/addon-docs": "^8.0.4",
-    "@storybook/addon-viewport": "^8.0.4",
-    "@storybook/blocks": "^8.0.4",
-    "@storybook/jest": "~0.2.3",
-    "@storybook/react": "^8.0.4",
-    "@storybook/testing-library": "~0.2.2",
+    "@storybook/addon-docs": "^8.1.11",
+    "@storybook/addon-viewport": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/react": "^8.1.11",
+    "@storybook/testing-library": "^0.2.2",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/react-window": "^1.8.8",
     "@types/react-window-infinite-loader": "^1.0.9",
-    "@wyw-in-js/vite": "^0.2.2",
+    "@wyw-in-js/vite": "^0.5.3",
     "esbuild-plugin-babel": "^0.2.3",
-    "glob": "^10.3.10",
-    "react": "18.2.0",
+    "glob": "^10.4.2",
+    "react": "18.3.1",
     "react-auth-code-input": "^3.2.1",
     "react-countdown-circle-timer": "^3.2.1",
-    "react-countup": "^6.5.0",
-    "react-phone-number-input": "^3.3.9",
+    "react-countup": "^6.5.3",
+    "react-phone-number-input": "^3.4.3",
     "rollup-plugin-node-polyfills": "^0.2.1",
-    "tslib": "^2.6.2",
-    "vite": "5.2.6",
-    "vite-plugin-node-polyfills": "^0.21.0",
+    "screenfull": "^6.0.2",
+    "tslib": "^2.6.3",
+    "vite": "5.3.2",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.2",
-    "@streamlayer/react": "^1.0.0"
+    "@streamlayer/react": "^1.1.1"
   }
 }

package/lib/styles_z07sl8-l0sNRNKZ.js

@@ -1 +0,0 @@
-

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

@@ -1,69 +0,0 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { styled as l } from "@linaria/react";
-import { useStore as n } from "@nanostores/react";
-import { QuestionType as a } from "@streamlayer/sdk-web-types";
-import { useAppContext as m } from "../../useAppContext.js";
-import { VoteHeader as c } from "../../../../gamification/detail/header/index.js";
-import { Sponsor as p } from "../../../../gamification/detail/sponsor/index.js";
-import { Vote as f, VoteSkeleton as b } from "../../../../gamification/vote/index.js";
-import { InsightDetails as y } from "../../../../gamification/vote/insight-details/index.js";
-import { TwitterDetails as V } from "../../../../gamification/vote/twitter-details/index.js";
-const x = /* @__PURE__ */ l("div")({
-  name: "QuestionContainer",
-  class: "qfnqmpg",
-  propsAsIs: !1
-}), d = ({
-  openedQuestion: t
-}) => {
-  var s, o;
-  const {
-    sdk: r
-  } = m();
-  return ((s = t == null ? void 0 : t.attributes) == null ? void 0 : s.attributes.case) === "insight" ? /* @__PURE__ */ e(y, {
-    ...t.attributes.attributes.value,
-    controlVideo: r == null ? void 0 : r.controlVideoPlayer
-  }) : ((o = t == null ? void 0 : t.attributes) == null ? void 0 : o.attributes.case) === "tweet" ? /* @__PURE__ */ e(V, {
-    ...t.attributes.attributes.value,
-    controlVideo: r == null ? void 0 : r.controlVideoPlayer
-  }) : null;
-}, h = ({
-  extendedQuestion: t,
-  vote: r,
-  close: s
-}) => {
-  const {
-    loading: o,
-    data: i
-  } = t;
-  return i ? /* @__PURE__ */ e(f, {
-    vote: r,
-    close: s,
-    openedQuestion: i,
-    isLoading: !!o
-  }) : /* @__PURE__ */ e(b, {});
-}, j = ({
-  gamification: t
-}) => {
-  var i;
-  const r = n(t.openedQuestion.$store), s = n(t.openedQuestion.$extendedStore);
-  if (!r)
-    return null;
-  const o = r.type;
-  return /* @__PURE__ */ u(x, {
-    children: [/* @__PURE__ */ e(c, {
-      close: t.closeQuestion,
-      type: ((i = r.attributes) == null ? void 0 : i.type) || a.UNSET
-    }), o === "question" && /* @__PURE__ */ e(h, {
-      vote: t.submitAnswer,
-      close: t.closeQuestion,
-      extendedQuestion: s
-    }), o !== "question" && /* @__PURE__ */ e(d, {
-      openedQuestion: r
-    }), /* @__PURE__ */ e(p, {
-      sponsorLogo: ""
-    })]
-  });
-};
-export {
-  j as Question
-};

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

@@ -1,88 +0,0 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { styled as m } from "@linaria/react";
-import { useStore as c } from "@nanostores/react";
-import { useHideTransition as h } from "../../../../../hooks/showIn.js";
-import { SDKWhiteContainer as C } from "../../../styles.js";
-import { VoteHeader as k } from "../../../../gamification/detail/header/index.js";
-import { UserStatistics as S } from "../../../../gamification/user-statistics/index.js";
-import { ModalPortal as U } from "../../../../modal/index.js";
-import { ShowIn as y } from "../../../../show-in/index.js";
-import { Question as I } from "./Question.js";
-import { Tabs as x } from "./Tabs.js";
-const O = () => y, p = /* @__PURE__ */ m(O())({
-  name: "OpenedContainer",
-  class: "o1o2cpiy",
-  propsAsIs: !0
-}), b = /* @__PURE__ */ m("div")({
-  name: "UserContainer",
-  class: "u1ob6f8q",
-  propsAsIs: !1
-}), v = ({
-  correct: e,
-  incorrect: r
-}) => {
-  const n = e + r;
-  return n === 0 ? 0 : Math.round(e / n * 100);
-}, q = ({
-  gamification: e,
-  scrollStore: r,
-  className: n,
-  appNode: i,
-  scrollNode: s,
-  responsiveStore: t
-}) => /* @__PURE__ */ o(x, {
-  appNode: i,
-  scrollStore: r,
-  scrollNode: s,
-  className: n,
-  gamification: e,
-  responsiveStore: t
-}), E = ({
-  gamification: e,
-  className: r,
-  appNode: n,
-  responsiveStore: i
-}) => {
-  const s = c(e.openedQuestion.$store), t = c(e.openedUser), {
-    sdkInDesktopView: d
-  } = c(i, {
-    keys: ["sdkInDesktopView"]
-  }), {
-    hiding: a,
-    onAnimationEnd: l
-  } = h();
-  if (!n.current || !s && !t)
-    return null;
-  const u = s ? /* @__PURE__ */ o(p, {
-    className: r,
-    hiding: a,
-    onAnimationEnd: l,
-    children: /* @__PURE__ */ o(I, {
-      gamification: e
-    })
-  }) : t ? /* @__PURE__ */ o(p, {
-    className: r,
-    hiding: a,
-    onAnimationEnd: l,
-    children: /* @__PURE__ */ f(b, {
-      children: [/* @__PURE__ */ o(k, {
-        label: "Friend's Rank",
-        close: e.closeUser
-      }), /* @__PURE__ */ o(C, {
-        children: /* @__PURE__ */ o(S, {
-          ...t,
-          successRate: v(t)
-        })
-      })]
-    })
-  }) : null;
-  return /* @__PURE__ */ o(U, {
-    container: n,
-    useContainer: !d,
-    children: u
-  });
-};
-export {
-  q as GamificationOverlay,
-  E as GamificationOverlayStandalone
-};