@streamlayer/react 0.2.5 → 0.2.6

package/main.js

@@ -8,14 +8,7 @@ var __export = (target, all) => {
 import { useCallback } from "react";
 
 // packages/react-ui/src/assets/icons/icon-exit.svg
-import * as React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-var SvgIconExit = (props) => /* @__PURE__ */ jsxs("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsx("rect", { width: 24, height: 24, rx: 12, fill: "white", fillOpacity: 0.1 }),
-  /* @__PURE__ */ jsx("rect", { x: 8.25, y: 7, width: 12.3744, height: 1.76777, rx: 0.883884, transform: "rotate(45 8.25 7)", fill: "white" }),
-  /* @__PURE__ */ jsx("rect", { x: 7, y: 15.75, width: 12.3744, height: 1.76777, rx: 0.883884, transform: "rotate(-45 7 15.75)", fill: "white" })
-] });
-var icon_exit_default = SvgIconExit;
+var icon_exit_default = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <rect width="24" height="24" rx="12" fill="white" fill-opacity="0.1"/>\n  <rect x="8.25" y="7" width="12.3744" height="1.76777" rx="0.883884" transform="rotate(45 8.25 7)" fill="white"/>\n  <rect x="7" y="15.75" width="12.3744" height="1.76777" rx="0.883884" transform="rotate(-45 7 15.75)" fill="white"/>\n</svg>\n';
 
 // packages/react-ui/src/lib/gamification/inapp/styles.tsx
 import styled from "@emotion/styled";
@@ -93,7 +86,7 @@ var CloseIcon = styled.img`
 `;
 
 // packages/react-ui/src/lib/gamification/inapp/index.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 var InApp = ({ title = "", icon, color, openVoiting, closeInApp }) => {
   const _closeInApp = useCallback(
     (e) => {
@@ -102,11 +95,11 @@ var InApp = ({ title = "", icon, color, openVoiting, closeInApp }) => {
     },
     [closeInApp]
   );
-  return /* @__PURE__ */ jsxs2(Container, { onClick: openVoiting, children: [
-    /* @__PURE__ */ jsx2(IconWrap, { style: color ? { backgroundColor: color } : {}, children: !!icon && /* @__PURE__ */ jsx2(Icon, { alt: "in-app-icon", src: icon }) }),
-    /* @__PURE__ */ jsxs2(Content, { children: [
-      /* @__PURE__ */ jsx2(TitleWrap, { children: /* @__PURE__ */ jsx2(Title, { id: "in-app-title", children: title }) }),
-      /* @__PURE__ */ jsx2(CloseBtnWrap, { children: /* @__PURE__ */ jsx2(CloseBtn, { onClick: _closeInApp, children: /* @__PURE__ */ jsx2(CloseIcon, { alt: "close-in-app-icon", src: icon_exit_default }) }) })
+  return /* @__PURE__ */ jsxs(Container, { onClick: openVoiting, children: [
+    /* @__PURE__ */ jsx(IconWrap, { style: color ? { backgroundColor: color } : {}, children: !!icon && /* @__PURE__ */ jsx(Icon, { alt: "in-app-icon", src: icon }) }),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(TitleWrap, { children: /* @__PURE__ */ jsx(Title, { id: "in-app-title", children: title }) }),
+      /* @__PURE__ */ jsx(CloseBtnWrap, { children: /* @__PURE__ */ jsx(CloseBtn, { onClick: _closeInApp, children: /* @__PURE__ */ jsx(CloseIcon, { alt: "close-in-app-icon", src: icon_exit_default }) }) })
     ] })
   ] });
 };
@@ -186,7 +179,7 @@ var RemainingTime = styled2.div`
 `;
 
 // packages/react-ui/src/lib/gamification/vote/components/voting-header/components/timer/index.tsx
-import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx2 } from "@emotion/react/jsx-runtime";
 var TIMER_COLORS = [theme.COLORS.BLUE_PRIMARY, theme.COLORS.GREEN_1, theme.COLORS.RED_1];
 var TIMER_COLORS_TIME = [10, 6, 0];
 var DEFAULT_DURATION = 30;
@@ -194,11 +187,11 @@ var TIMER_SIZE = 32;
 var STROKE_WIDTH = 4;
 var TRAIL_STROKE_WIDTH = 0;
 var Timer = ({ isPlaying = true, duration = DEFAULT_DURATION, setTimeToExpire }) => {
-  const renderTime = ({ remainingTime }) => /* @__PURE__ */ jsx3(RemainingTime, { remainingTime, children: remainingTime });
+  const renderTime = ({ remainingTime }) => /* @__PURE__ */ jsx2(RemainingTime, { remainingTime, children: remainingTime });
   useEffect(() => {
     setTimeToExpire(false);
   }, [setTimeToExpire]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     CountdownCircleTimer,
     {
       isPlaying,
@@ -283,7 +276,7 @@ var Digits = styled3.div`
 `;
 
 // packages/react-ui/src/lib/gamification/login/index.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
 var Login = ({ login: login2, anonymousLogin }) => {
   const [phoneInput, setPhoneInput] = useState("");
   const [phone, setPhone] = useState("");
@@ -319,36 +312,36 @@ var Login = ({ login: login2, anonymousLogin }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs3(Panel, { children: [
-    !phone && /* @__PURE__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsxs3(Form, { onSubmit: requestCode, children: [
-        /* @__PURE__ */ jsx4(FormTitle, { children: "Enter your phone number" }),
-        /* @__PURE__ */ jsx4(FormDescription, { children: "Enter your phone up for number to log in or sign an account." }),
-        /* @__PURE__ */ jsx4(FormInputContainer, { children: /* @__PURE__ */ jsx4(PhoneInput, { value: phoneInput, onChange: (val) => setPhoneInput(`${val}`) }) }),
-        /* @__PURE__ */ jsx4(FormSubmit, { disabled: !isValidPhoneNumber(phoneInput), type: "submit", children: "request code" })
+  return /* @__PURE__ */ jsxs2(Panel, { children: [
+    !phone && /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsxs2(Form, { onSubmit: requestCode, children: [
+        /* @__PURE__ */ jsx3(FormTitle, { children: "Enter your phone number" }),
+        /* @__PURE__ */ jsx3(FormDescription, { children: "Enter your phone up for number to log in or sign an account." }),
+        /* @__PURE__ */ jsx3(FormInputContainer, { children: /* @__PURE__ */ jsx3(PhoneInput, { value: phoneInput, onChange: (val) => setPhoneInput(`${val}`) }) }),
+        /* @__PURE__ */ jsx3(FormSubmit, { disabled: !isValidPhoneNumber(phoneInput), type: "submit", children: "request code" })
       ] }),
-      anonymousLogin && /* @__PURE__ */ jsx4(FormSubmit, { style: { display: "block", margin: "auto" }, disabled: true, onClick: anonymousLogin, children: "anonymous login" })
+      anonymousLogin && /* @__PURE__ */ jsx3(FormSubmit, { style: { display: "block", margin: "auto" }, disabled: true, onClick: anonymousLogin, children: "anonymous login" })
     ] }),
-    phone && /* @__PURE__ */ jsxs3(Form, { onSubmit: loginByCode, children: [
-      /* @__PURE__ */ jsx4(FormTitle, { children: "Enter Verification Code" }),
-      /* @__PURE__ */ jsxs3(FormDescription, { children: [
+    phone && /* @__PURE__ */ jsxs2(Form, { onSubmit: loginByCode, children: [
+      /* @__PURE__ */ jsx3(FormTitle, { children: "Enter Verification Code" }),
+      /* @__PURE__ */ jsxs2(FormDescription, { children: [
         "Please enter the verification code ",
-        /* @__PURE__ */ jsx4("br", {}),
+        /* @__PURE__ */ jsx3("br", {}),
         "sent to ",
-        /* @__PURE__ */ jsx4("b", { children: formatPhoneNumberIntl(phoneInput) })
+        /* @__PURE__ */ jsx3("b", { children: formatPhoneNumberIntl(phoneInput) })
       ] }),
-      /* @__PURE__ */ jsxs3(Digits, { children: [
-        /* @__PURE__ */ jsx4("input", { autoFocus: true, inputMode: "decimal", ...digits[0] }),
-        /* @__PURE__ */ jsx4("input", { inputMode: "decimal", ...digits[1] }),
-        /* @__PURE__ */ jsx4("input", { inputMode: "decimal", ...digits[2] }),
-        /* @__PURE__ */ jsx4("input", { inputMode: "decimal", ...digits[3] })
+      /* @__PURE__ */ jsxs2(Digits, { children: [
+        /* @__PURE__ */ jsx3("input", { autoFocus: true, inputMode: "decimal", ...digits[0] }),
+        /* @__PURE__ */ jsx3("input", { inputMode: "decimal", ...digits[1] }),
+        /* @__PURE__ */ jsx3("input", { inputMode: "decimal", ...digits[2] }),
+        /* @__PURE__ */ jsx3("input", { inputMode: "decimal", ...digits[3] })
       ] }),
-      /* @__PURE__ */ jsx4(FormSubmit, { disabled: code.length !== 4, type: "submit", children: "login" }),
-      /* @__PURE__ */ jsxs3(FormDescription, { children: [
+      /* @__PURE__ */ jsx3(FormSubmit, { disabled: code.length !== 4, type: "submit", children: "login" }),
+      /* @__PURE__ */ jsxs2(FormDescription, { children: [
         "Didn't get 59 the code? ",
-        /* @__PURE__ */ jsx4("br", {}),
+        /* @__PURE__ */ jsx3("br", {}),
         "Resend Code in",
-        /* @__PURE__ */ jsx4(Timer, { duration: 30, setTimeToExpire: () => {
+        /* @__PURE__ */ jsx3(Timer, { duration: 30, setTimeToExpire: () => {
         }, isPlaying: true })
       ] })
     ] })
@@ -398,13 +391,13 @@ var OnboardingActionBtn = styled4.button`
 `;
 
 // packages/react-ui/src/lib/gamification/onboarding/index.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
-var Onboarding = ({ action }) => /* @__PURE__ */ jsxs4(Container2, { children: [
-  /* @__PURE__ */ jsxs4(Content2, { children: [
-    /* @__PURE__ */ jsx5(Description, { children: "Welcome to the" }),
-    /* @__PURE__ */ jsx5(Title2, { children: "Inplay Game" })
+import { jsx as jsx4, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+var Onboarding = ({ action }) => /* @__PURE__ */ jsxs3(Container2, { children: [
+  /* @__PURE__ */ jsxs3(Content2, { children: [
+    /* @__PURE__ */ jsx4(Description, { children: "Welcome to the" }),
+    /* @__PURE__ */ jsx4(Title2, { children: "Inplay Game" })
   ] }),
-  /* @__PURE__ */ jsx5(OnboardingActionBtn, { onClick: action, children: "Let\u2019s play" })
+  /* @__PURE__ */ jsx4(OnboardingActionBtn, { onClick: action, children: "Let\u2019s play" })
 ] });
 
 // packages/sdk-web-types/src/sl-types.ts
@@ -413,43 +406,22 @@ import { PickHistoryStatus } from "@streamlayer/sl-eslib/interactive/feed/intera
 import { SdkOverlayType } from "@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb";
 
 // packages/react-ui/src/assets/icons/icon-poll.svg
-import * as React3 from "react";
-import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
-var SvgIconPoll = (props) => /* @__PURE__ */ jsx6("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx6("g", { id: "Poll", children: /* @__PURE__ */ jsx6("path", { id: "Notification/Icon/Poll", fillRule: "evenodd", clipRule: "evenodd", d: "M9.7778 1.68421V5.05263H13.3333C13.8243 5.05263 14.2222 4.67561 14.2222 4.21053V2.52632C14.2222 2.06123 13.8243 1.68421 13.3333 1.68421H9.7778ZM2.66667 0C1.19391 0 0 1.13107 0 2.52632V4.21053C0 5.60577 1.19391 6.73684 2.66667 6.73684H13.3333C14.8061 6.73684 16 5.60577 16 4.21053V2.52632C16 1.13107 14.8061 0 13.3333 0H2.66667ZM4.44446 10.9473H13.3333C13.8243 10.9473 14.2222 11.3243 14.2222 11.7894V13.4736C14.2222 13.9387 13.8243 14.3157 13.3333 14.3157H4.44446V10.9473ZM0 11.7894C0 10.3942 1.19391 9.2631 2.66667 9.2631H13.3333C14.8061 9.2631 16 10.3942 16 11.7894V13.4736C16 14.8689 14.8061 15.9999 13.3333 15.9999H2.66667C1.19391 15.9999 0 14.8689 0 13.4736V11.7894Z", fill: "white", fillOpacity: 0.5 }) }) });
-var icon_poll_default = SvgIconPoll;
+var icon_poll_default = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g id="Poll">\n<path id="Notification/Icon/Poll" fill-rule="evenodd" clip-rule="evenodd" d="M9.7778 1.68421V5.05263H13.3333C13.8243 5.05263 14.2222 4.67561 14.2222 4.21053V2.52632C14.2222 2.06123 13.8243 1.68421 13.3333 1.68421H9.7778ZM2.66667 0C1.19391 0 0 1.13107 0 2.52632V4.21053C0 5.60577 1.19391 6.73684 2.66667 6.73684H13.3333C14.8061 6.73684 16 5.60577 16 4.21053V2.52632C16 1.13107 14.8061 0 13.3333 0H2.66667ZM4.44446 10.9473H13.3333C13.8243 10.9473 14.2222 11.3243 14.2222 11.7894V13.4736C14.2222 13.9387 13.8243 14.3157 13.3333 14.3157H4.44446V10.9473ZM0 11.7894C0 10.3942 1.19391 9.2631 2.66667 9.2631H13.3333C14.8061 9.2631 16 10.3942 16 11.7894V13.4736C16 14.8689 14.8061 15.9999 13.3333 15.9999H2.66667C1.19391 15.9999 0 14.8689 0 13.4736V11.7894Z" fill="white" fill-opacity="0.5"/>\n</g>\n</svg>\n';
 
 // packages/react-ui/src/assets/icons/icon-prediction.svg
-import * as React4 from "react";
-import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
-var SvgIconPrediction = (props) => /* @__PURE__ */ jsx7("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx7("g", { id: "Icon/Notification/Prediciton", children: /* @__PURE__ */ jsx7("path", { id: "Icon/Prediction", fillRule: "evenodd", clipRule: "evenodd", d: "M16 7.00522C16 7.00522 9.20048 6.81607 9.20048 0C9.20048 6.36168 3.27729 6.95056 2.48756 7.00078L2.40094 7.00522C2.40094 7.00522 9.20048 7.19435 9.20048 14.0104C9.20048 7.64877 15.1234 7.05989 15.9131 7.00964L16 7.00522ZM6.97382 12.5652C6.97382 12.5652 3.48691 12.4724 3.48691 9.13033C3.48691 12.2496 0.449402 12.5384 0.0444186 12.563L0 12.5652C0 12.5652 3.48691 12.6579 3.48691 16C3.48691 12.8807 6.52429 12.592 6.92927 12.5673L6.97382 12.5652Z", fill: "white", fillOpacity: 0.5 }) }) });
-var icon_prediction_default = SvgIconPrediction;
+var icon_prediction_default = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g id="Icon/Notification/Prediciton">\n<path id="Icon/Prediction" fill-rule="evenodd" clip-rule="evenodd" d="M16 7.00522C16 7.00522 9.20048 6.81607 9.20048 0C9.20048 6.36168 3.27729 6.95056 2.48756 7.00078L2.40094 7.00522C2.40094 7.00522 9.20048 7.19435 9.20048 14.0104C9.20048 7.64877 15.1234 7.05989 15.9131 7.00964L16 7.00522ZM6.97382 12.5652C6.97382 12.5652 3.48691 12.4724 3.48691 9.13033C3.48691 12.2496 0.449402 12.5384 0.0444186 12.563L0 12.5652C0 12.5652 3.48691 12.6579 3.48691 16C3.48691 12.8807 6.52429 12.592 6.92927 12.5673L6.97382 12.5652Z" fill="white" fill-opacity="0.5"/>\n</g>\n</svg>\n';
 
 // packages/react-ui/src/assets/icons/icon-trivia.svg
-import * as React5 from "react";
-import { jsx as jsx8 } from "@emotion/react/jsx-runtime";
-var SvgIconTrivia = (props) => /* @__PURE__ */ jsx8("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx8("g", { id: "Icon/Notification/Trivia", children: /* @__PURE__ */ jsx8("path", { id: "Notification/Icon/Trivia", fillRule: "evenodd", clipRule: "evenodd", d: "M2.01663 1.3808C0.739913 1.55586 -0.153153 2.73276 0.021912 4.00948L1.3808 13.9196C1.55586 15.1963 2.73276 16.0894 4.00948 15.9143L13.9196 14.5554C15.1963 14.3803 16.0894 13.2034 15.9143 11.9267L14.5554 2.01663C14.3803 0.739913 13.2034 -0.153153 11.9267 0.021912L2.01663 1.3808ZM9.59613 3.788C9.11431 3.46991 8.47813 3.30151 7.7566 3.30151C7.54377 3.30151 7.32625 3.31671 7.10872 3.34478C6.38836 3.44067 5.68901 3.79034 5.18965 4.30138C4.68445 4.82062 4.4377 5.45563 4.51722 6.04151C4.57452 6.4742 4.90078 6.7537 5.34635 6.7537C5.39429 6.7537 5.44341 6.7502 5.49136 6.74435C6.08778 6.66483 6.21642 6.25436 6.34036 5.85675L6.34045 5.85648C6.48192 5.40401 6.61534 4.97731 7.38585 4.87444C7.46537 4.86391 7.54138 4.85806 7.61506 4.85806C8.16939 4.85806 8.51436 5.15042 8.58454 5.68252C8.65353 6.20293 8.24307 6.61807 7.80684 7.0566L7.80393 7.05954C7.31582 7.55231 6.7639 8.1095 6.86895 8.90083C6.89585 9.10548 6.9859 9.29493 7.12272 9.43644C7.27826 9.599 7.4829 9.68436 7.71331 9.68436C7.75541 9.68436 7.79868 9.68203 7.84311 9.67618C8.46691 9.59324 8.55162 9.23139 8.63338 8.8821L8.63365 8.88097L8.63661 8.86859C8.66723 8.7403 8.69877 8.60813 8.75995 8.48804C8.84649 8.31613 9.06283 8.11265 9.31428 7.87875C9.9142 7.31858 10.734 6.55143 10.582 5.41589C10.4872 4.70603 10.1551 4.15757 9.59611 3.78802L9.59613 3.788ZM8.11605 10.28C8.06927 10.28 8.02132 10.2836 7.97454 10.2894C7.38396 10.3689 6.96765 10.9127 7.04599 11.5033C7.11733 12.0377 7.57808 12.4412 8.1172 12.4412C8.16397 12.4412 8.21192 12.4377 8.25987 12.4318C8.85045 12.3523 9.2656 11.8085 9.18842 11.2179C9.11591 10.6823 8.65517 10.28 8.11605 10.28Z", fill: "white", fillOpacity: 0.5 }) }) });
-var icon_trivia_default = SvgIconTrivia;
+var icon_trivia_default = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g id="Icon/Notification/Trivia">\n<path id="Notification/Icon/Trivia" fill-rule="evenodd" clip-rule="evenodd" d="M2.01663 1.3808C0.739913 1.55586 -0.153153 2.73276 0.021912 4.00948L1.3808 13.9196C1.55586 15.1963 2.73276 16.0894 4.00948 15.9143L13.9196 14.5554C15.1963 14.3803 16.0894 13.2034 15.9143 11.9267L14.5554 2.01663C14.3803 0.739913 13.2034 -0.153153 11.9267 0.021912L2.01663 1.3808ZM9.59613 3.788C9.11431 3.46991 8.47813 3.30151 7.7566 3.30151C7.54377 3.30151 7.32625 3.31671 7.10872 3.34478C6.38836 3.44067 5.68901 3.79034 5.18965 4.30138C4.68445 4.82062 4.4377 5.45563 4.51722 6.04151C4.57452 6.4742 4.90078 6.7537 5.34635 6.7537C5.39429 6.7537 5.44341 6.7502 5.49136 6.74435C6.08778 6.66483 6.21642 6.25436 6.34036 5.85675L6.34045 5.85648C6.48192 5.40401 6.61534 4.97731 7.38585 4.87444C7.46537 4.86391 7.54138 4.85806 7.61506 4.85806C8.16939 4.85806 8.51436 5.15042 8.58454 5.68252C8.65353 6.20293 8.24307 6.61807 7.80684 7.0566L7.80393 7.05954C7.31582 7.55231 6.7639 8.1095 6.86895 8.90083C6.89585 9.10548 6.9859 9.29493 7.12272 9.43644C7.27826 9.599 7.4829 9.68436 7.71331 9.68436C7.75541 9.68436 7.79868 9.68203 7.84311 9.67618C8.46691 9.59324 8.55162 9.23139 8.63338 8.8821L8.63365 8.88097L8.63661 8.86859C8.66723 8.7403 8.69877 8.60813 8.75995 8.48804C8.84649 8.31613 9.06283 8.11265 9.31428 7.87875C9.9142 7.31858 10.734 6.55143 10.582 5.41589C10.4872 4.70603 10.1551 4.15757 9.59611 3.78802L9.59613 3.788ZM8.11605 10.28C8.06927 10.28 8.02132 10.2836 7.97454 10.2894C7.38396 10.3689 6.96765 10.9127 7.04599 11.5033C7.11733 12.0377 7.57808 12.4412 8.1172 12.4412C8.16397 12.4412 8.21192 12.4377 8.25987 12.4318C8.85045 12.3523 9.2656 11.8085 9.18842 11.2179C9.11591 10.6823 8.65517 10.28 8.11605 10.28Z" fill="white" fill-opacity="0.5"/>\n</g>\n</svg>\n';
 
 // packages/react-ui/src/assets/icons/icon-check-green.svg
-import * as React6 from "react";
-import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
-var SvgIconCheckGreen = (props) => /* @__PURE__ */ jsx9("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx9("g", { id: "Check", children: /* @__PURE__ */ jsx9("path", { id: "Vector", d: "M13.4315 3.18246L5.53321 11.0808L1.99771 7.54527C1.54056 7.08811 0.799913 7.08811 0.342864 7.54527C-0.114288 8.00242 -0.114288 8.74307 0.342864 9.20011L4.70567 13.5629C4.93331 13.7906 5.23415 13.9063 5.53307 13.9063C5.83202 13.9063 6.13096 13.7924 6.36048 13.5629L15.0861 4.83731C15.5432 4.38016 15.5432 3.63951 15.0861 3.18246C14.629 2.72531 13.8884 2.72531 13.4312 3.18246H13.4315Z", fill: "#00BD60" }) }) });
-var icon_check_green_default = SvgIconCheckGreen;
+var icon_check_green_default = '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g id="Check">\n<path id="Vector" d="M13.4315 3.18246L5.53321 11.0808L1.99771 7.54527C1.54056 7.08811 0.799913 7.08811 0.342864 7.54527C-0.114288 8.00242 -0.114288 8.74307 0.342864 9.20011L4.70567 13.5629C4.93331 13.7906 5.23415 13.9063 5.53307 13.9063C5.83202 13.9063 6.13096 13.7924 6.36048 13.5629L15.0861 4.83731C15.5432 4.38016 15.5432 3.63951 15.0861 3.18246C14.629 2.72531 13.8884 2.72531 13.4312 3.18246H13.4315Z" fill="#00BD60"/>\n</g>\n</svg>\n';
 
 // packages/react-ui/src/assets/icons/icon-cross.svg
-import * as React7 from "react";
-import { jsx as jsx10, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
-var SvgIconCross = (props) => /* @__PURE__ */ jsx10("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxs5("g", { id: "Group 465", children: [
-  /* @__PURE__ */ jsx10("rect", { id: "Rectangle 368", x: 2, y: 0.506104, width: 16.4992, height: 2.35702, rx: 1.17851, transform: "rotate(45 2 0.506104)", fill: "#9e0a1f" }),
-  /* @__PURE__ */ jsx10("rect", { id: "Rectangle 369", x: 0.333008, y: 12.1729, width: 16.4992, height: 2.35702, rx: 1.17851, transform: "rotate(-45 0.333008 12.1729)", fill: "#9e0a1f" })
-] }) });
-var icon_cross_default = SvgIconCross;
+var icon_cross_default = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g id="Group 465">\n<rect id="Rectangle 368" x="2" y="0.506104" width="16.4992" height="2.35702" rx="1.17851" transform="rotate(45 2 0.506104)" fill="#9e0a1f"/>\n<rect id="Rectangle 369" x="0.333008" y="12.1729" width="16.4992" height="2.35702" rx="1.17851" transform="rotate(-45 0.333008 12.1729)" fill="#9e0a1f"/>\n</g>\n</svg>\n';
 
 // packages/react-ui/src/assets/icons/icon-chevron.svg
-import * as React8 from "react";
-import { jsx as jsx11 } from "@emotion/react/jsx-runtime";
-var SvgIconChevron = (props) => /* @__PURE__ */ jsx11("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx11("g", { id: "Chevron", children: /* @__PURE__ */ jsx11("path", { id: "Chevron_2", d: "M12 8.17222C12 8.28783 11.9781 8.39553 11.9342 8.49533C11.8903 8.59513 11.822 8.68992 11.7292 8.7797L6.36949 13.9439C6.21462 14.0965 6.02742 14.1729 5.80787 14.1729C5.65752 14.1729 5.52191 14.1379 5.40104 14.0679C5.28016 13.998 5.1831 13.9039 5.10986 13.7856C5.03662 13.6673 5 13.5345 5 13.3873C5 13.1721 5.08288 12.9818 5.24863 12.8164L10.0807 8.17095L5.24863 3.52799C5.08288 3.36425 5 3.17439 5 2.95841C5 2.81118 5.03662 2.67842 5.10986 2.56013C5.1831 2.44183 5.28016 2.34771 5.40104 2.27777C5.52191 2.20782 5.65752 2.17285 5.80787 2.17285C6.02742 2.17285 6.21462 2.24731 6.36949 2.39624L11.7292 7.56473C11.8211 7.65451 11.889 7.74909 11.9329 7.84846C11.9768 7.94784 11.9991 8.05576 12 8.17222Z", fill: "#FFFFFF" }) }) });
-var icon_chevron_default = SvgIconChevron;
+var icon_chevron_default = '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g id="Chevron">\n<path id="Chevron_2" d="M12 8.17222C12 8.28783 11.9781 8.39553 11.9342 8.49533C11.8903 8.59513 11.822 8.68992 11.7292 8.7797L6.36949 13.9439C6.21462 14.0965 6.02742 14.1729 5.80787 14.1729C5.65752 14.1729 5.52191 14.1379 5.40104 14.0679C5.28016 13.998 5.1831 13.9039 5.10986 13.7856C5.03662 13.6673 5 13.5345 5 13.3873C5 13.1721 5.08288 12.9818 5.24863 12.8164L10.0807 8.17095L5.24863 3.52799C5.08288 3.36425 5 3.17439 5 2.95841C5 2.81118 5.03662 2.67842 5.10986 2.56013C5.1831 2.44183 5.28016 2.34771 5.40104 2.27777C5.52191 2.20782 5.65752 2.17285 5.80787 2.17285C6.02742 2.17285 6.21462 2.24731 6.36949 2.39624L11.7292 7.56473C11.8211 7.65451 11.889 7.74909 11.9329 7.84846C11.9768 7.94784 11.9991 8.05576 12 8.17222Z" fill="#FFFFFF"/>\n</g>\n</svg>\n';
 
 // packages/react-ui/src/lib/gamification/question/styles.tsx
 import styled5 from "@emotion/styled";
@@ -533,7 +505,7 @@ var ExpiredQuestion = styled5.span`
 `;
 
 // packages/react-ui/src/lib/gamification/question/index.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
 var QuestionTypeData = {
   [QuestionType.POLL]: { label: "Poll", icon: icon_poll_default },
   [QuestionType.TRIVIA]: { label: "Trivia", icon: icon_trivia_default },
@@ -558,16 +530,16 @@ var Question = ({
   if (questionTypeData === void 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs6(Panel2, { onClick: () => openQuestion?.(questionId), children: [
-    /* @__PURE__ */ jsx12(QuestionTypeIconWrap, { children: /* @__PURE__ */ jsx12(QuestionTypeIcon, { alt: "question-type-icon", src: questionTypeData.icon }) }),
-    /* @__PURE__ */ jsxs6(QuestionContent, { children: [
-      /* @__PURE__ */ jsxs6(QuestionTypeLabel, { children: [
-        /* @__PURE__ */ jsx12(QuestionTypeTitle, { children: questionTypeData.label }),
-        questionType === QuestionType.TRIVIA && questionStatus === QuestionStatus.RESOLVED && /* @__PURE__ */ jsx12(ExpiredQuestion, { children: "Expired" })
+  return /* @__PURE__ */ jsxs4(Panel2, { onClick: () => openQuestion?.(questionId), children: [
+    /* @__PURE__ */ jsx5(QuestionTypeIconWrap, { children: /* @__PURE__ */ jsx5(QuestionTypeIcon, { alt: "question-type-icon", src: questionTypeData.icon }) }),
+    /* @__PURE__ */ jsxs4(QuestionContent, { children: [
+      /* @__PURE__ */ jsxs4(QuestionTypeLabel, { children: [
+        /* @__PURE__ */ jsx5(QuestionTypeTitle, { children: questionTypeData.label }),
+        questionType === QuestionType.TRIVIA && questionStatus === QuestionStatus.RESOLVED && /* @__PURE__ */ jsx5(ExpiredQuestion, { children: "Expired" })
       ] }),
-      /* @__PURE__ */ jsx12(QuestionSubject, { children: subject || "" })
+      /* @__PURE__ */ jsx5(QuestionSubject, { children: subject || "" })
     ] }),
-    openForVoting ? /* @__PURE__ */ jsx12(QuestionActionTitle, { children: "play" }) : /* @__PURE__ */ jsx12(QuestionActionIcon, { children: /* @__PURE__ */ jsx12(QuestionStatusIcon, { alt: "question-status-icon", src: QuestionStatusTypeData[status] }) })
+    openForVoting ? /* @__PURE__ */ jsx5(QuestionActionTitle, { children: "play" }) : /* @__PURE__ */ jsx5(QuestionActionIcon, { children: /* @__PURE__ */ jsx5(QuestionStatusIcon, { alt: "question-status-icon", src: QuestionStatusTypeData[status] }) })
   ] });
 };
 
@@ -598,19 +570,16 @@ var ItemsContainer = styled6.div`
 `;
 
 // packages/react-ui/src/lib/gamification/question-list/index.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
 var QuestionList = ({ questions, openQuestion }) => {
-  return /* @__PURE__ */ jsxs7(Container3, { children: [
-    /* @__PURE__ */ jsx13(Title3, { children: "PICK HISTORY" }),
-    /* @__PURE__ */ jsx13(ItemsContainer, { children: questions?.map((props) => /* @__PURE__ */ jsx13(Question, { openQuestion, ...props }, props.questionId)) })
+  return /* @__PURE__ */ jsxs5(Container3, { children: [
+    /* @__PURE__ */ jsx6(Title3, { children: "PICK HISTORY" }),
+    /* @__PURE__ */ jsx6(ItemsContainer, { children: questions?.map((props) => /* @__PURE__ */ jsx6(Question, { openQuestion, ...props }, props.questionId)) })
   ] });
 };
 
 // packages/react-ui/src/assets/icons/icon-trophy.svg
-import * as React9 from "react";
-import { jsx as jsx14 } from "@emotion/react/jsx-runtime";
-var SvgIconTrophy = (props) => /* @__PURE__ */ jsx14("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx14("g", { id: "Trophy", children: /* @__PURE__ */ jsx14("path", { id: "Combined Shape", fillRule: "evenodd", clipRule: "evenodd", d: "M2.76916 3.50002C2.76916 4.49786 2.94705 5.38348 3.30282 6.15692C2.62493 6.01847 2.05883 5.74872 1.6045 5.34768C1.15017 4.94663 0.923008 4.55992 0.923008 4.18752V3.50002H2.76916ZM11.0768 3.50002V4.18752C11.0768 4.55992 10.8497 4.94663 10.3953 5.34768C9.941 5.74872 9.3749 6.01847 8.69701 6.15692C9.05278 5.38348 9.23066 4.49786 9.23066 3.50002H11.0768ZM12 4.1875V3.27083C12 3.07986 11.9327 2.91754 11.7981 2.78385C11.6635 2.65017 11.5 2.58333 11.3077 2.58333H9.23077V1.89583C9.23077 1.58073 9.11779 1.31098 8.89183 1.08659C8.66586 0.862195 8.39423 0.75 8.07692 0.75H3.92308C3.60577 0.75 3.33414 0.862195 3.10817 1.08659C2.88221 1.31098 2.76923 1.58073 2.76923 1.89583V2.58333H0.692308C0.499999 2.58333 0.336539 2.65017 0.201923 2.78385C0.067307 2.91754 0 3.07986 0 3.27083V4.1875C0 4.52648 0.0997586 4.86784 0.299279 5.21159C0.498799 5.55534 0.768027 5.86567 1.10697 6.14258C1.44592 6.41949 1.86178 6.65223 2.35457 6.84082C2.84736 7.02941 3.36538 7.13563 3.90865 7.15951C4.11058 7.41732 4.33894 7.6441 4.59375 7.83984C4.77644 8.00217 4.90264 8.17524 4.97236 8.35905C5.04207 8.54286 5.07692 8.75651 5.07692 9C5.07692 9.25781 5.00361 9.47504 4.85697 9.65169C4.71034 9.82834 4.47596 9.91667 4.15385 9.91667C3.79327 9.91667 3.47236 10.0253 3.19111 10.2425C2.90985 10.4597 2.76923 10.7331 2.76923 11.0625V11.5208C2.76923 11.5877 2.79087 11.6426 2.83413 11.6855C2.8774 11.7285 2.93269 11.75 3 11.75H9C9.06731 11.75 9.1226 11.7285 9.16586 11.6855C9.20913 11.6426 9.23077 11.5877 9.23077 11.5208V11.0625C9.23077 10.7331 9.09015 10.4597 8.80889 10.2425C8.52764 10.0253 8.20673 9.91667 7.84615 9.91667C7.52404 9.91667 7.28966 9.82834 7.14303 9.65169C6.99639 9.47504 6.92308 9.25781 6.92308 9C6.92308 8.75651 6.95793 8.54286 7.02764 8.35905C7.09736 8.17524 7.22356 8.00217 7.40625 7.83984C7.66106 7.6441 7.88942 7.41732 8.09135 7.15951C8.63462 7.13563 9.15264 7.02941 9.64543 6.84082C10.1382 6.65223 10.5541 6.41949 10.893 6.14258C11.232 5.86567 11.5012 5.55534 11.7007 5.21159C11.9002 4.86784 12 4.52648 12 4.1875ZM5.07033 5.38491L6.0383 4.87503L7.00627 5.38491L6.8214 4.30497L7.60451 3.54016L6.52228 3.3826L6.0383 2.40003L5.55431 3.3826L4.47209 3.54016L5.25519 4.30497L5.07033 5.38491Z", fill: "#F2C94C" }) }) });
-var icon_trophy_default = SvgIconTrophy;
+var icon_trophy_default = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g id="Trophy">\n<path id="Combined Shape" fill-rule="evenodd" clip-rule="evenodd" d="M2.76916 3.50002C2.76916 4.49786 2.94705 5.38348 3.30282 6.15692C2.62493 6.01847 2.05883 5.74872 1.6045 5.34768C1.15017 4.94663 0.923008 4.55992 0.923008 4.18752V3.50002H2.76916ZM11.0768 3.50002V4.18752C11.0768 4.55992 10.8497 4.94663 10.3953 5.34768C9.941 5.74872 9.3749 6.01847 8.69701 6.15692C9.05278 5.38348 9.23066 4.49786 9.23066 3.50002H11.0768ZM12 4.1875V3.27083C12 3.07986 11.9327 2.91754 11.7981 2.78385C11.6635 2.65017 11.5 2.58333 11.3077 2.58333H9.23077V1.89583C9.23077 1.58073 9.11779 1.31098 8.89183 1.08659C8.66586 0.862195 8.39423 0.75 8.07692 0.75H3.92308C3.60577 0.75 3.33414 0.862195 3.10817 1.08659C2.88221 1.31098 2.76923 1.58073 2.76923 1.89583V2.58333H0.692308C0.499999 2.58333 0.336539 2.65017 0.201923 2.78385C0.067307 2.91754 0 3.07986 0 3.27083V4.1875C0 4.52648 0.0997586 4.86784 0.299279 5.21159C0.498799 5.55534 0.768027 5.86567 1.10697 6.14258C1.44592 6.41949 1.86178 6.65223 2.35457 6.84082C2.84736 7.02941 3.36538 7.13563 3.90865 7.15951C4.11058 7.41732 4.33894 7.6441 4.59375 7.83984C4.77644 8.00217 4.90264 8.17524 4.97236 8.35905C5.04207 8.54286 5.07692 8.75651 5.07692 9C5.07692 9.25781 5.00361 9.47504 4.85697 9.65169C4.71034 9.82834 4.47596 9.91667 4.15385 9.91667C3.79327 9.91667 3.47236 10.0253 3.19111 10.2425C2.90985 10.4597 2.76923 10.7331 2.76923 11.0625V11.5208C2.76923 11.5877 2.79087 11.6426 2.83413 11.6855C2.8774 11.7285 2.93269 11.75 3 11.75H9C9.06731 11.75 9.1226 11.7285 9.16586 11.6855C9.20913 11.6426 9.23077 11.5877 9.23077 11.5208V11.0625C9.23077 10.7331 9.09015 10.4597 8.80889 10.2425C8.52764 10.0253 8.20673 9.91667 7.84615 9.91667C7.52404 9.91667 7.28966 9.82834 7.14303 9.65169C6.99639 9.47504 6.92308 9.25781 6.92308 9C6.92308 8.75651 6.95793 8.54286 7.02764 8.35905C7.09736 8.17524 7.22356 8.00217 7.40625 7.83984C7.66106 7.6441 7.88942 7.41732 8.09135 7.15951C8.63462 7.13563 9.15264 7.02941 9.64543 6.84082C10.1382 6.65223 10.5541 6.41949 10.893 6.14258C11.232 5.86567 11.5012 5.55534 11.7007 5.21159C11.9002 4.86784 12 4.52648 12 4.1875ZM5.07033 5.38491L6.0383 4.87503L7.00627 5.38491L6.8214 4.30497L7.60451 3.54016L6.52228 3.3826L6.0383 2.40003L5.55431 3.3826L4.47209 3.54016L5.25519 4.30497L5.07033 5.38491Z" fill="#F2C94C"/>\n</g>\n</svg>\n';
 
 // packages/react-ui/src/lib/gamification/user-statistics/components/statistics/styles.tsx
 import styled7 from "@emotion/styled";
@@ -628,10 +597,10 @@ var Indicator = styled7.div`
 `;
 
 // packages/react-ui/src/lib/gamification/user-statistics/components/statistics/index.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
-var Statistics = ({ indicator, title }) => /* @__PURE__ */ jsxs8(Container4, { children: [
-  /* @__PURE__ */ jsx15(Indicator, { children: indicator }),
-  /* @__PURE__ */ jsx15("p", { children: title })
+import { jsx as jsx7, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+var Statistics = ({ indicator, title }) => /* @__PURE__ */ jsxs6(Container4, { children: [
+  /* @__PURE__ */ jsx7(Indicator, { children: indicator }),
+  /* @__PURE__ */ jsx7("p", { children: title })
 ] });
 
 // packages/react-ui/src/lib/gamification/user-statistics/components/rank/styles.tsx
@@ -656,10 +625,10 @@ var Indicator2 = styled8.div`
 `;
 
 // packages/react-ui/src/lib/gamification/user-statistics/components/rank/index.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
-var Rank = ({ indicator, title }) => /* @__PURE__ */ jsxs9(Container5, { children: [
-  /* @__PURE__ */ jsx16(Title4, { children: title }),
-  /* @__PURE__ */ jsx16(Indicator2, { children: indicator })
+import { jsx as jsx8, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+var Rank = ({ indicator, title }) => /* @__PURE__ */ jsxs7(Container5, { children: [
+  /* @__PURE__ */ jsx8(Title4, { children: title }),
+  /* @__PURE__ */ jsx8(Indicator2, { children: indicator })
 ] });
 
 // packages/react-ui/src/lib/gamification/user-statistics/styles.tsx
@@ -762,7 +731,7 @@ var AvatarPlaceholder = styled9.div`
 `;
 
 // packages/react-ui/src/lib/gamification/user-statistics/index.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var abbreviate = (name) => name.split(/\s+/).map((p) => p[0]).join("").toUpperCase();
 var UserStatistics = ({
   avatar,
@@ -776,20 +745,20 @@ var UserStatistics = ({
   incorrect,
   successRate
 }) => {
-  return /* @__PURE__ */ jsxs10(Container6, { children: [
-    /* @__PURE__ */ jsxs10(TopInfo, { children: [
-      /* @__PURE__ */ jsxs10(User, { children: [
-        avatar && /* @__PURE__ */ jsx17(Avatar, { alt: "avatar", src: avatar }),
-        !avatar && /* @__PURE__ */ jsx17(AvatarPlaceholder, { children: abbreviate(name) }),
-        /* @__PURE__ */ jsxs10(UserInfo, { children: [
-          /* @__PURE__ */ jsx17(UserName, { children: name }),
-          /* @__PURE__ */ jsxs10(UserRating, { children: [
-            /* @__PURE__ */ jsx17(TrophyIcon, { alt: "rank-icon", src: icon_trophy_default }),
-            /* @__PURE__ */ jsxs10(Rts, { children: [
-              /* @__PURE__ */ jsx17(RtsIndicator, { children: points || "-" }),
+  return /* @__PURE__ */ jsxs8(Container6, { children: [
+    /* @__PURE__ */ jsxs8(TopInfo, { children: [
+      /* @__PURE__ */ jsxs8(User, { children: [
+        avatar && /* @__PURE__ */ jsx9(Avatar, { alt: "avatar", src: avatar }),
+        !avatar && /* @__PURE__ */ jsx9(AvatarPlaceholder, { children: abbreviate(name) }),
+        /* @__PURE__ */ jsxs8(UserInfo, { children: [
+          /* @__PURE__ */ jsx9(UserName, { children: name }),
+          /* @__PURE__ */ jsxs8(UserRating, { children: [
+            /* @__PURE__ */ jsx9(TrophyIcon, { alt: "rank-icon", src: icon_trophy_default }),
+            /* @__PURE__ */ jsxs8(Rts, { children: [
+              /* @__PURE__ */ jsx9(RtsIndicator, { children: points || "-" }),
               "RTS"
             ] }),
-            /* @__PURE__ */ jsxs10(Top, { children: [
+            /* @__PURE__ */ jsxs8(Top, { children: [
               "TOP ",
               grade,
               "%"
@@ -797,41 +766,31 @@ var UserStatistics = ({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs10(Ranks, { children: [
-        /* @__PURE__ */ jsx17(Rank, { title: "Friens rank", indicator: friendsRank || "-" }),
-        /* @__PURE__ */ jsx17(Rank, { title: "Global rank", indicator: globalRank || "-" })
+      /* @__PURE__ */ jsxs8(Ranks, { children: [
+        /* @__PURE__ */ jsx9(Rank, { title: "Friens rank", indicator: friendsRank || "-" }),
+        /* @__PURE__ */ jsx9(Rank, { title: "Global rank", indicator: globalRank || "-" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs10(BottomInfo, { children: [
-      /* @__PURE__ */ jsx17(Statistics, { indicator: winStreak || "-", title: "Win streak" }),
-      /* @__PURE__ */ jsx17(Statistics, { indicator: correct || "-", title: "Correct" }),
-      /* @__PURE__ */ jsx17(Statistics, { indicator: incorrect || "-", title: "Incorrect" }),
-      /* @__PURE__ */ jsx17(Statistics, { indicator: `${successRate || "-"}%`, title: "Success rate" })
+    /* @__PURE__ */ jsxs8(BottomInfo, { children: [
+      /* @__PURE__ */ jsx9(Statistics, { indicator: winStreak || "-", title: "Win streak" }),
+      /* @__PURE__ */ jsx9(Statistics, { indicator: correct || "-", title: "Correct" }),
+      /* @__PURE__ */ jsx9(Statistics, { indicator: incorrect || "-", title: "Incorrect" }),
+      /* @__PURE__ */ jsx9(Statistics, { indicator: `${successRate || "-"}%`, title: "Success rate" })
     ] })
   ] });
 };
 
+// packages/react-ui/src/lib/gamification/vote/index.tsx
+import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+
 // packages/react-ui/src/assets/icons/icon-check.svg
-import * as React10 from "react";
-import { jsx as jsx18 } from "@emotion/react/jsx-runtime";
-var SvgIconCheck = (props) => /* @__PURE__ */ jsx18("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx18("g", { id: "Checkmark", children: /* @__PURE__ */ jsx18("path", { id: "Selected", fillRule: "evenodd", clipRule: "evenodd", d: "M24 12.002C24 18.6294 18.6274 24.002 12 24.002C5.37258 24.002 0 18.6294 0 12.002C0 5.37454 5.37258 0.00195312 12 0.00195312C18.6274 0.00195312 24 5.37454 24 12.002ZM17.4086 8.15357C16.94 7.68494 16.1802 7.68494 15.7116 8.15357L10.4072 14.9579L7.62573 13.1036C7.07429 12.736 6.32925 12.885 5.96163 13.4365C5.59401 13.9879 5.74301 14.7329 6.29445 15.1006L9.89445 17.5006C10.3704 17.8179 11.0041 17.7551 11.4086 17.3506L17.4086 9.85063C17.8772 9.382 17.8772 8.6222 17.4086 8.15357Z", fill: "#00BD60" }) }) });
-var icon_check_default = SvgIconCheck;
+var icon_check_default = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g id="Checkmark">\n<path id="Selected" fill-rule="evenodd" clip-rule="evenodd" d="M24 12.002C24 18.6294 18.6274 24.002 12 24.002C5.37258 24.002 0 18.6294 0 12.002C0 5.37454 5.37258 0.00195312 12 0.00195312C18.6274 0.00195312 24 5.37454 24 12.002ZM17.4086 8.15357C16.94 7.68494 16.1802 7.68494 15.7116 8.15357L10.4072 14.9579L7.62573 13.1036C7.07429 12.736 6.32925 12.885 5.96163 13.4365C5.59401 13.9879 5.74301 14.7329 6.29445 15.1006L9.89445 17.5006C10.3704 17.8179 11.0041 17.7551 11.4086 17.3506L17.4086 9.85063C17.8772 9.382 17.8772 8.6222 17.4086 8.15357Z" fill="#00BD60"/>\n</g>\n</svg>\n';
 
 // packages/react-ui/src/assets/icons/icon-close.svg
-import * as React11 from "react";
-import { jsx as jsx19, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
-var SvgIconClose = (props) => /* @__PURE__ */ jsxs11("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsx19("rect", { y: 195312e-8, width: 24, height: 24, rx: 12, fill: "#F80022" }),
-  /* @__PURE__ */ jsx19("rect", { x: 8.25, y: 7.00195, width: 12.3744, height: 1.76777, rx: 0.883884, transform: "rotate(45 8.25 7.00195)", fill: "white" }),
-  /* @__PURE__ */ jsx19("rect", { x: 7, y: 15.752, width: 12.3744, height: 1.76777, rx: 0.883884, transform: "rotate(-45 7 15.752)", fill: "white" })
-] });
-var icon_close_default = SvgIconClose;
+var icon_close_default = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect y="0.00195312" width="24" height="24" rx="12" fill="#F80022"/>\n<rect x="8.25" y="7.00195" width="12.3744" height="1.76777" rx="0.883884" transform="rotate(45 8.25 7.00195)" fill="white"/>\n<rect x="7" y="15.752" width="12.3744" height="1.76777" rx="0.883884" transform="rotate(-45 7 15.752)" fill="white"/>\n</svg>\n';
 
 // packages/react-ui/src/assets/icons/icon-check-white.svg
-import * as React12 from "react";
-import { jsx as jsx20 } from "@emotion/react/jsx-runtime";
-var SvgIconCheckWhite = (props) => /* @__PURE__ */ jsx20("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx20("g", { id: "Checkmark", children: /* @__PURE__ */ jsx20("path", { id: "Selected", fillRule: "evenodd", clipRule: "evenodd", d: "M24 12.002C24 18.6294 18.6274 24.002 12 24.002C5.37258 24.002 0 18.6294 0 12.002C0 5.37454 5.37258 0.00195312 12 0.00195312C18.6274 0.00195312 24 5.37454 24 12.002ZM17.4086 8.15357C16.94 7.68494 16.1802 7.68494 15.7116 8.15357L10.4072 14.9579L7.62573 13.1036C7.07429 12.736 6.32925 12.885 5.96163 13.4365C5.59401 13.9879 5.74301 14.7329 6.29445 15.1006L9.89445 17.5006C10.3704 17.8179 11.0041 17.7551 11.4086 17.3506L17.4086 9.85063C17.8772 9.382 17.8772 8.6222 17.4086 8.15357Z", fill: "#FFFFFF" }) }) });
-var icon_check_white_default = SvgIconCheckWhite;
+var icon_check_white_default = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g id="Checkmark">\n<path id="Selected" fill-rule="evenodd" clip-rule="evenodd" d="M24 12.002C24 18.6294 18.6274 24.002 12 24.002C5.37258 24.002 0 18.6294 0 12.002C0 5.37454 5.37258 0.00195312 12 0.00195312C18.6274 0.00195312 24 5.37454 24 12.002ZM17.4086 8.15357C16.94 7.68494 16.1802 7.68494 15.7116 8.15357L10.4072 14.9579L7.62573 13.1036C7.07429 12.736 6.32925 12.885 5.96163 13.4365C5.59401 13.9879 5.74301 14.7329 6.29445 15.1006L9.89445 17.5006C10.3704 17.8179 11.0041 17.7551 11.4086 17.3506L17.4086 9.85063C17.8772 9.382 17.8772 8.6222 17.4086 8.15357Z" fill="#FFFFFF"/>\n</g>\n</svg>\n';
 
 // packages/react-ui/src/lib/gamification/vote/components/voting-option/styles.tsx
 import styled10 from "@emotion/styled";
@@ -919,7 +878,7 @@ var CheckIcon = styled10.img`
 `;
 
 // packages/react-ui/src/lib/gamification/vote/components/voting-option/index.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
 var VotingOption = ({
   icon,
   id,
@@ -928,20 +887,21 @@ var VotingOption = ({
   disabled,
   percentage,
   onVote,
+  toggleIsLoadingSubmitAnswer,
   correct,
   questionAnswered,
   hasCorrectAnswer,
   answered
 }) => {
   if (questionAnswered && answered) {
-    return /* @__PURE__ */ jsxs12(AnsweredContainer, { answeredCorrect: !hasCorrectAnswer || correct, questionAnswered: false, children: [
-      /* @__PURE__ */ jsx21(ButtonPct, { style: { width: `${percentage}%` } }),
-      /* @__PURE__ */ jsxs12(Button, { disabled, onClick: () => onVote(questionId, id), children: [
-        icon && /* @__PURE__ */ jsx21(Icon2, { alt: "option-icon", src: icon }),
-        /* @__PURE__ */ jsx21(Title5, { children: title }),
-        /* @__PURE__ */ jsxs12(Indicators, { children: [
-          hasCorrectAnswer && correct && /* @__PURE__ */ jsx21(CheckIconWrap, { children: /* @__PURE__ */ jsx21(CheckIcon, { alt: "icon-correct", src: answered ? icon_check_white_default : icon_check_default }) }),
-          /* @__PURE__ */ jsxs12(Percentage, { children: [
+    return /* @__PURE__ */ jsxs9(AnsweredContainer, { answeredCorrect: !hasCorrectAnswer || correct, questionAnswered: false, children: [
+      /* @__PURE__ */ jsx10(ButtonPct, { style: { width: `${percentage}%` } }),
+      /* @__PURE__ */ jsxs9(Button, { disabled, onClick: () => onVote(questionId, id), children: [
+        icon && /* @__PURE__ */ jsx10(Icon2, { alt: "option-icon", src: icon }),
+        /* @__PURE__ */ jsx10(Title5, { children: title }),
+        /* @__PURE__ */ jsxs9(Indicators, { children: [
+          hasCorrectAnswer && correct && /* @__PURE__ */ jsx10(CheckIconWrap, { children: /* @__PURE__ */ jsx10(CheckIcon, { alt: "icon-correct", src: answered ? icon_check_white_default : icon_check_default }) }),
+          /* @__PURE__ */ jsxs9(Percentage, { children: [
             percentage,
             "%"
           ] })
@@ -949,19 +909,29 @@ var VotingOption = ({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs12(Container7, { questionAnswered, children: [
-    questionAnswered && /* @__PURE__ */ jsx21(ButtonPct, { style: { width: `${percentage}%` } }),
-    /* @__PURE__ */ jsxs12(Button, { disabled, onClick: () => onVote(questionId, id), children: [
-      icon && /* @__PURE__ */ jsx21(Icon2, { alt: "option-icon", src: icon }),
-      /* @__PURE__ */ jsx21(Title5, { children: title }),
-      questionAnswered && /* @__PURE__ */ jsxs12(Indicators, { children: [
-        hasCorrectAnswer && correct && /* @__PURE__ */ jsx21(CheckIconWrap, { children: /* @__PURE__ */ jsx21(CheckIcon, { alt: "icon-correct", src: answered ? icon_check_white_default : icon_check_default }) }),
-        /* @__PURE__ */ jsxs12(Percentage, { children: [
-          percentage,
-          "%"
-        ] })
-      ] })
-    ] })
+  return /* @__PURE__ */ jsxs9(Container7, { questionAnswered, children: [
+    questionAnswered && /* @__PURE__ */ jsx10(ButtonPct, { style: { width: `${percentage}%` } }),
+    /* @__PURE__ */ jsxs9(
+      Button,
+      {
+        disabled,
+        onClick: () => {
+          toggleIsLoadingSubmitAnswer(true);
+          onVote(questionId, id);
+        },
+        children: [
+          icon && /* @__PURE__ */ jsx10(Icon2, { alt: "option-icon", src: icon }),
+          /* @__PURE__ */ jsx10(Title5, { children: title }),
+          questionAnswered && /* @__PURE__ */ jsxs9(Indicators, { children: [
+            hasCorrectAnswer && correct && /* @__PURE__ */ jsx10(CheckIconWrap, { children: /* @__PURE__ */ jsx10(CheckIcon, { alt: "icon-correct", src: answered ? icon_check_white_default : icon_check_default }) }),
+            /* @__PURE__ */ jsxs9(Percentage, { children: [
+              percentage,
+              "%"
+            ] })
+          ] })
+        ]
+      }
+    )
   ] });
 };
 
@@ -983,11 +953,23 @@ var Title6 = styled11.div`
 var Options = styled11.div`
   overflow-y: auto;
   max-height: 220px;
+  position: relative;
 
   & > div:not(:last-child) {
     margin-bottom: 12px;
   }
 `;
+var Loader = styled11.div`
+  position: absolute;
+  left: 0px;
+  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_VOTE_CONTAINER};
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 var Feedback = styled11.div`
   padding: 14px 12px 14px 16px;
   display: flex;
@@ -1017,7 +999,7 @@ var FeedbackDescription = styled11.div`
 `;
 
 // packages/react-ui/src/lib/gamification/vote/index.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
 var Vote = ({
   title,
   questionId,
@@ -1027,14 +1009,35 @@ var Vote = ({
   questionAnsweredCorrectly,
   questionType
 }) => {
-  return /* @__PURE__ */ jsxs13(Container8, { children: [
-    /* @__PURE__ */ jsx22(Title6, { children: title }),
-    /* @__PURE__ */ jsx22(Options, { children: options.map((props) => /* @__PURE__ */ jsx22(VotingOption, { questionId, ...props }, props.id)) }),
-    questionAnswered && questionType === QuestionType.TRIVIA && /* @__PURE__ */ jsxs13(Feedback, { children: [
-      /* @__PURE__ */ jsx22(FeedbackIcon, { alt: "reaction-to-answer", src: questionAnsweredCorrectly ? icon_check_default : icon_close_default }),
-      /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx22(FeedbackTitle, { children: questionAnsweredCorrectly ? feedbackMessages.correctFeedback.title : feedbackMessages.incorrectFeedback.title }),
-        /* @__PURE__ */ jsx22(FeedbackDescription, { children: questionAnsweredCorrectly ? feedbackMessages.correctFeedback.description : feedbackMessages.incorrectFeedback.description })
+  const [isLoadingSubmitAnswer, setIsLoadingSubmitAnswer] = useState2(false);
+  const toggleIsLoadingSubmitAnswer = useCallback2(
+    (flag) => {
+      setIsLoadingSubmitAnswer(flag);
+    },
+    [setIsLoadingSubmitAnswer]
+  );
+  useEffect2(() => {
+    toggleIsLoadingSubmitAnswer(false);
+  }, [options, toggleIsLoadingSubmitAnswer]);
+  return /* @__PURE__ */ jsxs10(Container8, { children: [
+    /* @__PURE__ */ jsx11(Title6, { children: title }),
+    /* @__PURE__ */ jsxs10(Options, { children: [
+      isLoadingSubmitAnswer && /* @__PURE__ */ jsx11(Loader, { children: "Loading..." }),
+      options.map((props) => /* @__PURE__ */ jsx11(
+        VotingOption,
+        {
+          toggleIsLoadingSubmitAnswer,
+          questionId,
+          ...props
+        },
+        props.id
+      ))
+    ] }),
+    questionAnswered && questionType === QuestionType.TRIVIA && /* @__PURE__ */ jsxs10(Feedback, { children: [
+      /* @__PURE__ */ jsx11(FeedbackIcon, { alt: "reaction-to-answer", src: questionAnsweredCorrectly ? icon_check_default : icon_close_default }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx11(FeedbackTitle, { children: questionAnsweredCorrectly ? feedbackMessages.correctFeedback.title : feedbackMessages.incorrectFeedback.title }),
+        /* @__PURE__ */ jsx11(FeedbackDescription, { children: questionAnsweredCorrectly ? feedbackMessages.correctFeedback.description : feedbackMessages.incorrectFeedback.description })
       ] })
     ] })
   ] });
@@ -1048,13 +1051,13 @@ import { useStore as useStore5 } from "@nanostores/react";
 
 // packages/react-ui/src/lib/demo/components/UserSummary.tsx
 import { useStore } from "@nanostores/react";
-import { jsx as jsx23 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx12 } from "@emotion/react/jsx-runtime";
 var UserSummary = ({ store: store2 }) => {
   const { data: user } = useStore(store2);
   if (!user?.summary) {
-    return /* @__PURE__ */ jsx23("div", { children: "wait user..." });
+    return /* @__PURE__ */ jsx12("div", { children: "wait user..." });
   }
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx12(
     UserStatistics,
     {
       avatar: user.summary.avatar,
@@ -1073,31 +1076,25 @@ var UserSummary = ({ store: store2 }) => {
 
 // packages/react-ui/src/lib/demo/components/QuestionsList.tsx
 import { useStore as useStore2 } from "@nanostores/react";
-import { jsx as jsx24 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx13 } from "@emotion/react/jsx-runtime";
 var QuestionsList = ({ store: store2, openQuestion }) => {
   const { data: questions } = useStore2(store2);
   if (!questions) {
-    return /* @__PURE__ */ jsx24("div", { children: "wait questions..." });
+    return /* @__PURE__ */ jsx13("div", { children: "wait questions..." });
   }
-  return /* @__PURE__ */ jsx24(QuestionList, { openQuestion, questions });
+  return /* @__PURE__ */ jsx13(QuestionList, { openQuestion, questions });
 };
 
 // packages/react-ui/src/lib/demo/components/Question.tsx
 import styled14 from "@emotion/styled";
 import { useStore as useStore3 } from "@nanostores/react";
-import { useState as useState2, useCallback as useCallback2, useMemo } from "react";
+import { useState as useState3, useCallback as useCallback3, useMemo } from "react";
 
 // packages/react-ui/src/assets/icons/icon-trophy-green.svg
-import * as React13 from "react";
-import { jsx as jsx25 } from "@emotion/react/jsx-runtime";
-var SvgIconTrophyGreen = (props) => /* @__PURE__ */ jsx25("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx25("g", { id: "Trophy", children: /* @__PURE__ */ jsx25("path", { id: "Combined Shape", fillRule: "evenodd", clipRule: "evenodd", d: "M2.76916 3.50002C2.76916 4.49786 2.94705 5.38348 3.30282 6.15692C2.62493 6.01847 2.05883 5.74872 1.6045 5.34768C1.15017 4.94663 0.923008 4.55992 0.923008 4.18752V3.50002H2.76916ZM11.0768 3.50002V4.18752C11.0768 4.55992 10.8497 4.94663 10.3953 5.34768C9.941 5.74872 9.3749 6.01847 8.69701 6.15692C9.05278 5.38348 9.23066 4.49786 9.23066 3.50002H11.0768ZM12 4.1875V3.27083C12 3.07986 11.9327 2.91754 11.7981 2.78385C11.6635 2.65017 11.5 2.58333 11.3077 2.58333H9.23077V1.89583C9.23077 1.58073 9.11779 1.31098 8.89183 1.08659C8.66586 0.862195 8.39423 0.75 8.07692 0.75H3.92308C3.60577 0.75 3.33414 0.862195 3.10817 1.08659C2.88221 1.31098 2.76923 1.58073 2.76923 1.89583V2.58333H0.692308C0.499999 2.58333 0.336539 2.65017 0.201923 2.78385C0.067307 2.91754 0 3.07986 0 3.27083V4.1875C0 4.52648 0.0997586 4.86784 0.299279 5.21159C0.498799 5.55534 0.768027 5.86567 1.10697 6.14258C1.44592 6.41949 1.86178 6.65223 2.35457 6.84082C2.84736 7.02941 3.36538 7.13563 3.90865 7.15951C4.11058 7.41732 4.33894 7.6441 4.59375 7.83984C4.77644 8.00217 4.90264 8.17524 4.97236 8.35905C5.04207 8.54286 5.07692 8.75651 5.07692 9C5.07692 9.25781 5.00361 9.47504 4.85697 9.65169C4.71034 9.82834 4.47596 9.91667 4.15385 9.91667C3.79327 9.91667 3.47236 10.0253 3.19111 10.2425C2.90985 10.4597 2.76923 10.7331 2.76923 11.0625V11.5208C2.76923 11.5877 2.79087 11.6426 2.83413 11.6855C2.8774 11.7285 2.93269 11.75 3 11.75H9C9.06731 11.75 9.1226 11.7285 9.16586 11.6855C9.20913 11.6426 9.23077 11.5877 9.23077 11.5208V11.0625C9.23077 10.7331 9.09015 10.4597 8.80889 10.2425C8.52764 10.0253 8.20673 9.91667 7.84615 9.91667C7.52404 9.91667 7.28966 9.82834 7.14303 9.65169C6.99639 9.47504 6.92308 9.25781 6.92308 9C6.92308 8.75651 6.95793 8.54286 7.02764 8.35905C7.09736 8.17524 7.22356 8.00217 7.40625 7.83984C7.66106 7.6441 7.88942 7.41732 8.09135 7.15951C8.63462 7.13563 9.15264 7.02941 9.64543 6.84082C10.1382 6.65223 10.5541 6.41949 10.893 6.14258C11.232 5.86567 11.5012 5.55534 11.7007 5.21159C11.9002 4.86784 12 4.52648 12 4.1875ZM5.07033 5.38491L6.0383 4.87503L7.00627 5.38491L6.8214 4.30497L7.60451 3.54016L6.52228 3.3826L6.0383 2.40003L5.55431 3.3826L4.47209 3.54016L5.25519 4.30497L5.07033 5.38491Z", fill: "white" }) }) });
-var icon_trophy_green_default = SvgIconTrophyGreen;
+var icon_trophy_green_default = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">\n    <g id="Trophy">\n      <path id="Combined Shape" fill-rule="evenodd" clip-rule="evenodd" d="M2.76916 3.50002C2.76916 4.49786 2.94705 5.38348 3.30282 6.15692C2.62493 6.01847 2.05883 5.74872 1.6045 5.34768C1.15017 4.94663 0.923008 4.55992 0.923008 4.18752V3.50002H2.76916ZM11.0768 3.50002V4.18752C11.0768 4.55992 10.8497 4.94663 10.3953 5.34768C9.941 5.74872 9.3749 6.01847 8.69701 6.15692C9.05278 5.38348 9.23066 4.49786 9.23066 3.50002H11.0768ZM12 4.1875V3.27083C12 3.07986 11.9327 2.91754 11.7981 2.78385C11.6635 2.65017 11.5 2.58333 11.3077 2.58333H9.23077V1.89583C9.23077 1.58073 9.11779 1.31098 8.89183 1.08659C8.66586 0.862195 8.39423 0.75 8.07692 0.75H3.92308C3.60577 0.75 3.33414 0.862195 3.10817 1.08659C2.88221 1.31098 2.76923 1.58073 2.76923 1.89583V2.58333H0.692308C0.499999 2.58333 0.336539 2.65017 0.201923 2.78385C0.067307 2.91754 0 3.07986 0 3.27083V4.1875C0 4.52648 0.0997586 4.86784 0.299279 5.21159C0.498799 5.55534 0.768027 5.86567 1.10697 6.14258C1.44592 6.41949 1.86178 6.65223 2.35457 6.84082C2.84736 7.02941 3.36538 7.13563 3.90865 7.15951C4.11058 7.41732 4.33894 7.6441 4.59375 7.83984C4.77644 8.00217 4.90264 8.17524 4.97236 8.35905C5.04207 8.54286 5.07692 8.75651 5.07692 9C5.07692 9.25781 5.00361 9.47504 4.85697 9.65169C4.71034 9.82834 4.47596 9.91667 4.15385 9.91667C3.79327 9.91667 3.47236 10.0253 3.19111 10.2425C2.90985 10.4597 2.76923 10.7331 2.76923 11.0625V11.5208C2.76923 11.5877 2.79087 11.6426 2.83413 11.6855C2.8774 11.7285 2.93269 11.75 3 11.75H9C9.06731 11.75 9.1226 11.7285 9.16586 11.6855C9.20913 11.6426 9.23077 11.5877 9.23077 11.5208V11.0625C9.23077 10.7331 9.09015 10.4597 8.80889 10.2425C8.52764 10.0253 8.20673 9.91667 7.84615 9.91667C7.52404 9.91667 7.28966 9.82834 7.14303 9.65169C6.99639 9.47504 6.92308 9.25781 6.92308 9C6.92308 8.75651 6.95793 8.54286 7.02764 8.35905C7.09736 8.17524 7.22356 8.00217 7.40625 7.83984C7.66106 7.6441 7.88942 7.41732 8.09135 7.15951C8.63462 7.13563 9.15264 7.02941 9.64543 6.84082C10.1382 6.65223 10.5541 6.41949 10.893 6.14258C11.232 5.86567 11.5012 5.55534 11.7007 5.21159C11.9002 4.86784 12 4.52648 12 4.1875ZM5.07033 5.38491L6.0383 4.87503L7.00627 5.38491L6.8214 4.30497L7.60451 3.54016L6.52228 3.3826L6.0383 2.40003L5.55431 3.3826L4.47209 3.54016L5.25519 4.30497L5.07033 5.38491Z" fill="white"/>\n    </g>\n  </svg>\n';
 
 // packages/react-ui/src/assets/icons/icon-thumb-down.svg
-import * as React14 from "react";
-import { jsx as jsx26 } from "@emotion/react/jsx-runtime";
-var SvgIconThumbDown = (props) => /* @__PURE__ */ jsx26("svg", { xmlns: "http://www.w3.org/2000/svg", width: 22, height: 22, viewBox: "0 0 22 22", fill: "none", ...props, children: /* @__PURE__ */ jsx26("path", { d: "M5.5 2.78867V12.4137C5.5 13.1729 4.88426 13.75 4.125 13.75H1.375C0.615742 13.75 0 13.1343 0 12.4137V2.82734C0 2.06808 0.615742 1.49102 1.375 1.49102H4.125C4.88555 1.41367 5.5 1.99375 5.5 2.78867ZM22 12.3707C22 13.5094 21.077 14.4323 19.9375 14.4323H13.6426C14.621 16.0613 15.1259 17.9077 15.1259 18.5582C15.125 19.5714 14.3301 20.625 12.998 20.625C10.2854 20.625 11.8654 17.3529 8.34883 14.5406L7.64844 13.982C7.14141 13.5738 6.88359 12.9766 6.8793 12.375C6.87829 12.374 6.8793 12.375 6.8793 12.375L6.875 5.5C6.875 4.85117 7.18064 4.23973 7.7 3.85043L9.16695 2.75086C10.3555 1.85625 11.8035 1.375 13.2902 1.375H15.8125C16.952 1.375 17.875 2.29754 17.875 3.43664C17.875 3.59283 17.8544 3.74357 17.8215 3.88996C18.6484 4.15937 19.25 4.92422 19.25 5.84375C19.25 6.23683 19.1341 6.60043 18.9432 6.91281C19.8988 7.08984 20.625 7.92773 20.625 8.9332C20.625 9.47031 20.4148 9.955 20.0784 10.322C21.1492 10.3941 22 11.2793 22 12.3707Z", fill: "white" }) });
-var icon_thumb_down_default = SvgIconThumbDown;
+var icon_thumb_down_default = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">\n    <path d="M5.5 2.78867V12.4137C5.5 13.1729 4.88426 13.75 4.125 13.75H1.375C0.615742 13.75 0 13.1343 0 12.4137V2.82734C0 2.06808 0.615742 1.49102 1.375 1.49102H4.125C4.88555 1.41367 5.5 1.99375 5.5 2.78867ZM22 12.3707C22 13.5094 21.077 14.4323 19.9375 14.4323H13.6426C14.621 16.0613 15.1259 17.9077 15.1259 18.5582C15.125 19.5714 14.3301 20.625 12.998 20.625C10.2854 20.625 11.8654 17.3529 8.34883 14.5406L7.64844 13.982C7.14141 13.5738 6.88359 12.9766 6.8793 12.375C6.87829 12.374 6.8793 12.375 6.8793 12.375L6.875 5.5C6.875 4.85117 7.18064 4.23973 7.7 3.85043L9.16695 2.75086C10.3555 1.85625 11.8035 1.375 13.2902 1.375H15.8125C16.952 1.375 17.875 2.29754 17.875 3.43664C17.875 3.59283 17.8544 3.74357 17.8215 3.88996C18.6484 4.15937 19.25 4.92422 19.25 5.84375C19.25 6.23683 19.1341 6.60043 18.9432 6.91281C19.8988 7.08984 20.625 7.92773 20.625 8.9332C20.625 9.47031 20.4148 9.955 20.0784 10.322C21.1492 10.3941 22 11.2793 22 12.3707Z" fill="white"/>\n  </svg>\n';
 
 // packages/react-ui/src/lib/gamification/vote/components/voting-header/styles.tsx
 import styled12 from "@emotion/styled";
@@ -1186,17 +1183,17 @@ var PointLabel = styled13.span`
 `;
 
 // packages/react-ui/src/lib/gamification/vote/components/voting-header/components/points/index.tsx
-import { jsx as jsx27, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
-var Points = ({ points }) => /* @__PURE__ */ jsxs14(Container10, { children: [
-  /* @__PURE__ */ jsx27(Title7, { children: "YOU WON" }),
-  /* @__PURE__ */ jsxs14(PointContainer, { children: [
-    /* @__PURE__ */ jsx27(Point, { children: points }),
-    /* @__PURE__ */ jsx27(PointLabel, { children: "PTS" })
+import { jsx as jsx14, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
+var Points = ({ points }) => /* @__PURE__ */ jsxs11(Container10, { children: [
+  /* @__PURE__ */ jsx14(Title7, { children: "YOU WON" }),
+  /* @__PURE__ */ jsxs11(PointContainer, { children: [
+    /* @__PURE__ */ jsx14(Point, { children: points }),
+    /* @__PURE__ */ jsx14(PointLabel, { children: "PTS" })
   ] })
 ] });
 
 // packages/react-ui/src/lib/gamification/vote/components/voting-header/index.tsx
-import { Fragment, jsx as jsx28, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
 var VotingHeader = ({
   logo,
   points,
@@ -1211,38 +1208,31 @@ var VotingHeader = ({
   const successTriviaFeedback = isShowTriviaFeedback && questionAnsweredCorrectly;
   const errorTriviaFeedback = isShowTriviaFeedback && !questionAnsweredCorrectly;
   const isShowPredictionFeedback = questionAnswered && questionType === QuestionType.PREDICTION;
-  return /* @__PURE__ */ jsxs15(Container9, { children: [
-    /* @__PURE__ */ jsxs15(RightBlock, { children: [
-      /* @__PURE__ */ jsxs15(Interactive, { children: [
-        isShowTimer && /* @__PURE__ */ jsx28(Timer, { setTimeToExpire }),
-        successTriviaFeedback && /* @__PURE__ */ jsxs15(Fragment, { children: [
-          /* @__PURE__ */ jsx28(Points, { points }),
-          /* @__PURE__ */ jsx28(ReactionIconWrap, { isSuccess: true, children: /* @__PURE__ */ jsx28(ReactionIcon, { alt: "reaction-icon", src: icon_trophy_green_default }) })
+  return /* @__PURE__ */ jsxs12(Container9, { children: [
+    /* @__PURE__ */ jsxs12(RightBlock, { children: [
+      /* @__PURE__ */ jsxs12(Interactive, { children: [
+        isShowTimer && /* @__PURE__ */ jsx15(Timer, { setTimeToExpire }),
+        successTriviaFeedback && /* @__PURE__ */ jsxs12(Fragment, { children: [
+          /* @__PURE__ */ jsx15(Points, { points }),
+          /* @__PURE__ */ jsx15(ReactionIconWrap, { isSuccess: true, children: /* @__PURE__ */ jsx15(ReactionIcon, { alt: "reaction-icon", src: icon_trophy_green_default }) })
         ] }),
-        errorTriviaFeedback && /* @__PURE__ */ jsxs15(Fragment, { children: [
-          /* @__PURE__ */ jsx28(Points, { points: 0 }),
-          /* @__PURE__ */ jsx28(ReactionIconWrap, { isSuccess: false, children: /* @__PURE__ */ jsx28(ReactionIcon, { alt: "reaction-icon", src: icon_thumb_down_default }) })
+        errorTriviaFeedback && /* @__PURE__ */ jsxs12(Fragment, { children: [
+          /* @__PURE__ */ jsx15(Points, { points: 0 }),
+          /* @__PURE__ */ jsx15(ReactionIconWrap, { isSuccess: false, children: /* @__PURE__ */ jsx15(ReactionIcon, { alt: "reaction-icon", src: icon_thumb_down_default }) })
         ] }),
-        isShowPredictionFeedback && /* @__PURE__ */ jsx28(Points, { points })
+        isShowPredictionFeedback && /* @__PURE__ */ jsx15(Points, { points })
       ] }),
-      /* @__PURE__ */ jsx28(ExitBtn, { onClick: closeQuestion, children: /* @__PURE__ */ jsx28(ExitIcon, { alt: "exit-icon", src: icon_exit_default }) })
+      /* @__PURE__ */ jsx15(ExitBtn, { onClick: closeQuestion, children: /* @__PURE__ */ jsx15(ExitIcon, { alt: "exit-icon", src: icon_exit_default }) })
     ] }),
-    logo && /* @__PURE__ */ jsx28(Logo, { src: logo })
+    logo && /* @__PURE__ */ jsx15(Logo, { src: logo })
   ] });
 };
 
 // packages/react-ui/src/assets/icons/fedex.svg
-import * as React15 from "react";
-import { jsx as jsx29, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
-var SvgFedex = (props) => /* @__PURE__ */ jsx29("svg", { width: 68, height: 22, viewBox: "0 0 68 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxs16("g", { id: "Vector", children: [
-  /* @__PURE__ */ jsx29("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M56.6155 7.44146H50.7066L56.3072 13.8615L50.7066 20.2805H56.4357L59.1587 17.137L61.9068 20.2805H67.84L62.19 13.8348L67.7636 7.44146H62.0606L59.3897 10.5602L56.6155 7.44146ZM62.2721 7.91659L59.3964 11.2747L56.4092 7.91659H51.7446L56.9307 13.8615L51.7447 19.8054H56.2257L59.1571 16.4213L62.1156 19.8054H66.7987L61.566 13.8357L66.7261 7.91659H62.2721Z", fill: "white" }),
-  /* @__PURE__ */ jsx29("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.3635 7.44146V4.56406H50.7066V0.0559998H39.702V20.2805H50.7066V15.7601H44.3635V11.7794H50.7066V7.44146H44.3635ZM50.2408 7.91659H43.8978V4.08893H50.2408V0.531132H40.1678V19.8054H50.2408V16.2352H43.8978V11.3043H50.2408V7.91659Z", fill: "white" }),
-  /* @__PURE__ */ jsx29("path", { d: "M35.06 0.0559998V8.33281H35.0087C33.9803 7.12787 32.6966 6.70881 31.207 6.70881C28.1552 6.70881 25.8561 8.826 25.0493 11.6236C24.128 8.54092 21.7544 6.65084 18.2349 6.65084C15.3769 6.65084 13.1197 7.95936 11.9422 10.0918V7.44146H6.03416V4.56406H12.4815V0.0559998H0.768005V20.2805H6.03416V11.7794H11.2836C11.127 12.4037 11.0432 13.0727 11.0432 13.7788C11.0432 17.997 14.2031 20.958 18.2349 20.958C21.6258 20.958 23.8607 19.334 25.0419 16.374H20.5284C19.9183 17.2644 19.4553 17.5276 18.2349 17.5276C16.8199 17.5276 15.5995 16.2685 15.5995 14.7756H24.7894C25.1881 18.1262 27.7472 21.016 31.2582 21.016C32.773 21.016 34.1601 20.2558 35.0078 18.9729H35.059V20.2824H39.701L39.702 0.0559998H35.06ZM15.7467 11.8393C16.0392 10.5545 17.0164 9.71545 18.2358 9.71545C19.5782 9.71545 20.5051 10.5289 20.7492 11.8393C20.8517 11.8393 15.7467 11.8393 15.7467 11.8393ZM32.242 17.2016C30.5307 17.2016 29.4668 15.5748 29.4668 13.8767C29.4668 12.0617 30.3919 10.316 32.242 10.316C34.1601 10.316 34.924 12.0617 34.924 13.8767C34.924 15.5976 34.1144 17.2016 32.242 17.2016Z", fill: "white" })
-] }) });
-var fedex_default = SvgFedex;
+var fedex_default = '<svg width="68" height="22" viewBox="0 0 68 22" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g id="Vector">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M56.6155 7.44146H50.7066L56.3072 13.8615L50.7066 20.2805H56.4357L59.1587 17.137L61.9068 20.2805H67.84L62.19 13.8348L67.7636 7.44146H62.0606L59.3897 10.5602L56.6155 7.44146ZM62.2721 7.91659L59.3964 11.2747L56.4092 7.91659H51.7446L56.9307 13.8615L51.7447 19.8054H56.2257L59.1571 16.4213L62.1156 19.8054H66.7987L61.566 13.8357L66.7261 7.91659H62.2721Z" fill="white"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M44.3635 7.44146V4.56406H50.7066V0.0559998H39.702V20.2805H50.7066V15.7601H44.3635V11.7794H50.7066V7.44146H44.3635ZM50.2408 7.91659H43.8978V4.08893H50.2408V0.531132H40.1678V19.8054H50.2408V16.2352H43.8978V11.3043H50.2408V7.91659Z" fill="white"/>\n<path d="M35.06 0.0559998V8.33281H35.0087C33.9803 7.12787 32.6966 6.70881 31.207 6.70881C28.1552 6.70881 25.8561 8.826 25.0493 11.6236C24.128 8.54092 21.7544 6.65084 18.2349 6.65084C15.3769 6.65084 13.1197 7.95936 11.9422 10.0918V7.44146H6.03416V4.56406H12.4815V0.0559998H0.768005V20.2805H6.03416V11.7794H11.2836C11.127 12.4037 11.0432 13.0727 11.0432 13.7788C11.0432 17.997 14.2031 20.958 18.2349 20.958C21.6258 20.958 23.8607 19.334 25.0419 16.374H20.5284C19.9183 17.2644 19.4553 17.5276 18.2349 17.5276C16.8199 17.5276 15.5995 16.2685 15.5995 14.7756H24.7894C25.1881 18.1262 27.7472 21.016 31.2582 21.016C32.773 21.016 34.1601 20.2558 35.0078 18.9729H35.059V20.2824H39.701L39.702 0.0559998H35.06ZM15.7467 11.8393C16.0392 10.5545 17.0164 9.71545 18.2358 9.71545C19.5782 9.71545 20.5051 10.5289 20.7492 11.8393C20.8517 11.8393 15.7467 11.8393 15.7467 11.8393ZM32.242 17.2016C30.5307 17.2016 29.4668 15.5748 29.4668 13.8767C29.4668 12.0617 30.3919 10.316 32.242 10.316C34.1601 10.316 34.924 12.0617 34.924 13.8767C34.924 15.5976 34.1144 17.2016 32.242 17.2016Z" fill="white"/>\n</g>\n</svg>\n';
 
 // packages/react-ui/src/lib/demo/components/Question.tsx
-import { jsx as jsx30, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 var QuestionContainer = styled14.div`
   position: absolute;
   top: 0;
@@ -1273,8 +1263,8 @@ var QuestionContainer = styled14.div`
 `;
 var Question2 = ({ store: store2, closeQuestion, vote }) => {
   const { data: openedQuestion } = useStore3(store2);
-  const [answerTimeExpired, setAnswerTimeExpired] = useState2(false);
-  const setTimeToExpire = useCallback2(
+  const [answerTimeExpired, setAnswerTimeExpired] = useState3(false);
+  const setTimeToExpire = useCallback3(
     (flag) => {
       setAnswerTimeExpired(flag);
     },
@@ -1291,8 +1281,8 @@ var Question2 = ({ store: store2, closeQuestion, vote }) => {
   if (!openedQuestion) {
     return null;
   }
-  return /* @__PURE__ */ jsx30(QuestionContainer, { children: /* @__PURE__ */ jsxs17("div", { children: [
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx16(QuestionContainer, { children: /* @__PURE__ */ jsxs13("div", { children: [
+    /* @__PURE__ */ jsx16(
       VotingHeader,
       {
         points: questionAnswered?.points || 0,
@@ -1304,7 +1294,7 @@ var Question2 = ({ store: store2, closeQuestion, vote }) => {
         questionType: openedQuestion.type
       }
     ),
-    /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
       Vote,
       {
         title: openedQuestion.subject,
@@ -1333,13 +1323,13 @@ var Question2 = ({ store: store2, closeQuestion, vote }) => {
 
 // packages/react-ui/src/lib/demo/components/Notifications.tsx
 import { useStore as useStore4 } from "@nanostores/react";
-import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
-import { jsx as jsx31 } from "@emotion/react/jsx-runtime";
+import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import { jsx as jsx17 } from "@emotion/react/jsx-runtime";
 var Notifications = ({ notificationsStore, openQuestion }) => {
   const timeout = useRef();
-  const [lastNotification, setLastNotification] = useState3();
+  const [lastNotification, setLastNotification] = useState4();
   const notifications2 = useStore4(notificationsStore);
-  useEffect2(() => {
+  useEffect3(() => {
     if (notifications2) {
       setLastNotification(notifications2[notifications2.length - 1]?.data);
       timeout.current = setTimeout(() => {
@@ -1365,7 +1355,7 @@ var Notifications = ({ notificationsStore, openQuestion }) => {
     closeInApp();
     openQuestion(lastNotification.question.id);
   };
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx17(
     InApp,
     {
       openVoiting,
@@ -1378,9 +1368,9 @@ var Notifications = ({ notificationsStore, openQuestion }) => {
 };
 
 // packages/react-ui/src/lib/demo/components/InPlayGame.tsx
-import { jsx as jsx32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx18 } from "@emotion/react/jsx-runtime";
 var InPlayGame = ({ action }) => {
-  return /* @__PURE__ */ jsx32(Onboarding, { action });
+  return /* @__PURE__ */ jsx18(Onboarding, { action });
 };
 
 // packages/react-ui/src/lib/demo/styles.tsx
@@ -1399,14 +1389,18 @@ var UserStatisticsContainer = styled15.div`
 `;
 
 // packages/react-ui/src/lib/demo/Gamification.tsx
-import { jsx as jsx33, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
 var GamificationComponent = ({
   gamification,
   sdk
 }) => {
   const onbordingComplete = useStore5(gamification.onbordingComplete);
+  const slStreamId = useStore5(gamification.slStreamId);
+  if (!slStreamId) {
+    return /* @__PURE__ */ jsx19(DemoContainer, { children: /* @__PURE__ */ jsx19("div", { children: "Event is loading or unavailable" }) });
+  }
   if (!onbordingComplete) {
-    return /* @__PURE__ */ jsx33(DemoContainer, { children: /* @__PURE__ */ jsx33(InPlayGame, { action: gamification.submitInplay }) });
+    return /* @__PURE__ */ jsx19(DemoContainer, { children: /* @__PURE__ */ jsx19(InPlayGame, { action: gamification.submitInplay }) });
   }
   const openQuestion = (questionId) => {
     gamification.openQuestion(questionId);
@@ -1417,16 +1411,16 @@ var GamificationComponent = ({
   const vote = (questionId, answerId) => {
     void gamification.submitAnswer(questionId, answerId);
   };
-  return /* @__PURE__ */ jsxs18(DemoContainer, { children: [
-    /* @__PURE__ */ jsx33(DemoContainerNotifications, { children: /* @__PURE__ */ jsx33(Notifications, { notificationsStore: sdk.getNotificationsStore(), openQuestion }) }),
-    /* @__PURE__ */ jsx33(UserStatisticsContainer, { children: gamification.userSummary && /* @__PURE__ */ jsx33(UserSummary, { store: gamification.userSummary.getStore() }) }),
-    gamification.questions && /* @__PURE__ */ jsx33(QuestionsList, { openQuestion, store: gamification.questions.getStore() }),
-    gamification.openedQuestion && /* @__PURE__ */ jsx33(Question2, { closeQuestion, vote, store: gamification.openedQuestion.getStore() })
+  return /* @__PURE__ */ jsxs14(DemoContainer, { children: [
+    /* @__PURE__ */ jsx19(DemoContainerNotifications, { children: /* @__PURE__ */ jsx19(Notifications, { notificationsStore: sdk.getNotificationsStore(), openQuestion }) }),
+    /* @__PURE__ */ jsx19(UserStatisticsContainer, { children: gamification.userSummary && /* @__PURE__ */ jsx19(UserSummary, { store: gamification.userSummary.getStore() }) }),
+    gamification.questions && /* @__PURE__ */ jsx19(QuestionsList, { openQuestion, store: gamification.questions.getStore() }),
+    gamification.openedQuestion && /* @__PURE__ */ jsx19(Question2, { closeQuestion, vote, store: gamification.openedQuestion.getStore() })
   ] });
 };
 
 // packages/react-ui/src/lib/demo/Login.tsx
-import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx20 } from "@emotion/react/jsx-runtime";
 var LoginComponent = ({ sdk }) => {
   const login2 = async (token) => {
     try {
@@ -1436,30 +1430,30 @@ var LoginComponent = ({ sdk }) => {
       throw err;
     }
   };
-  return /* @__PURE__ */ jsx34(Login, { login: login2, anonymousLogin: sdk.anonymousAuthorization });
+  return /* @__PURE__ */ jsx20(Login, { login: login2, anonymousLogin: sdk.anonymousAuthorization });
 };
 
 // packages/react-ui/src/lib/demo/index.tsx
-import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx21 } from "@emotion/react/jsx-runtime";
 var Demo = ({ sdk }) => {
   const user = useStore6(sdk.getUserStore());
   if (user.loading) {
-    return /* @__PURE__ */ jsx35("div", { children: "authentificating..." });
+    return /* @__PURE__ */ jsx21("div", { children: "authentificating..." });
   }
   if (!user.data) {
-    return /* @__PURE__ */ jsx35(LoginComponent, { sdk });
+    return /* @__PURE__ */ jsx21(LoginComponent, { sdk });
   }
   const gamification = sdk.getFeatures().get("games");
   if (!gamification) {
-    return /* @__PURE__ */ jsx35("div", { children: "wait gamification..." });
+    return /* @__PURE__ */ jsx21("div", { children: "wait gamification..." });
   }
-  return /* @__PURE__ */ jsx35(GamificationComponent, { gamification, sdk });
+  return /* @__PURE__ */ jsx21(GamificationComponent, { gamification, sdk });
 };
 
 // packages/react-ui/src/lib/theme/index.tsx
 import { ThemeProvider } from "@emotion/react";
-import { jsx as jsx36 } from "@emotion/react/jsx-runtime";
-var StreamLayerThemeProvider = ({ children }) => /* @__PURE__ */ jsx36(ThemeProvider, { theme, children });
+import { jsx as jsx22 } from "@emotion/react/jsx-runtime";
+var StreamLayerThemeProvider = ({ children }) => /* @__PURE__ */ jsx22(ThemeProvider, { theme, children });
 
 // packages/react/src/app/provider.tsx
 import { createContext, useMemo as useMemo2 } from "react";
@@ -1821,6 +1815,7 @@ var __GRPC_DEVTOOLS_EXTENSION__ = () => (next) => async (request) => {
 window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));
 
 // packages/sdk-web-api/src/grpc/subscription.ts
+import { Code } from "@connectrpc/connect";
 var ServerStreamSubscription = class {
   params;
   stream;
@@ -1915,9 +1910,13 @@ var ServerStreamSubscription = class {
     this.addStateLog(`data routed to ${this.listeners.size} listeners`);
   };
   onStreamError = (error) => {
-    console.error(error);
-    this.updateState("failed" /* Failed */);
-    this.state.setValue("error", error);
+    if (error.code !== Code.Canceled) {
+      console.error(error);
+      this.updateState("failed" /* Failed */);
+      this.state.setValue("error", error);
+    } else {
+      this.disconnect();
+    }
   };
 };
 
@@ -2782,11 +2781,11 @@ function StreamLayer(sdkKey) {
 }
 
 // packages/react/src/app/useStreamLayer.ts
-import { useState as useState4, useEffect as useEffect3 } from "react";
+import { useState as useState5, useEffect as useEffect4 } from "react";
 window.instance = null;
 var useStreamLayer = (sdkKey, plugins) => {
-  const [sdk, setSdk] = useState4(null);
-  useEffect3(() => {
+  const [sdk, setSdk] = useState5(null);
+  useEffect4(() => {
     let ignore = false;
     if (!sdkKey) {
       throw new Error("sdk key should be provided");
@@ -2815,7 +2814,7 @@ var useStreamLayer = (sdkKey, plugins) => {
 };
 
 // packages/react/src/app/provider.tsx
-import { jsx as jsx37 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx23 } from "@emotion/react/jsx-runtime";
 var StreamLayerContext3 = createContext({
   status: 0 /* UNSET */
 });
@@ -2834,12 +2833,12 @@ var StreamLayerProvider = ({
     }
     return { sdk: streamLayer, status: 2 /* READY */ };
   }, [streamLayer]);
-  return /* @__PURE__ */ jsx37(StreamLayerThemeProvider, { children: /* @__PURE__ */ jsx37(StreamLayerContext3.Provider, { value, children }) });
+  return /* @__PURE__ */ jsx23(StreamLayerThemeProvider, { children: /* @__PURE__ */ jsx23(StreamLayerContext3.Provider, { value, children }) });
 };
 
 // packages/react/src/app/app.tsx
 import { useContext } from "react";
-import { jsx as jsx38 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx24 } from "@emotion/react/jsx-runtime";
 var useSDK = () => {
   const { sdk } = useContext(StreamLayerContext3);
   return sdk;
@@ -2850,12 +2849,12 @@ var StreamLayerSDKReact = () => {
     throw new Error("Wrap app in `StreamLayerProvider`");
   }
   if (status === 1 /* CONNECTED */) {
-    return /* @__PURE__ */ jsx38("div", { children: "wait" });
+    return /* @__PURE__ */ jsx24("div", { children: "wait" });
   }
   if (sdk === void 0) {
-    return /* @__PURE__ */ jsx38("div", { children: "sdk not initialized" });
+    return /* @__PURE__ */ jsx24("div", { children: "sdk not initialized" });
   }
-  return /* @__PURE__ */ jsx38(Demo, { sdk });
+  return /* @__PURE__ */ jsx24(Demo, { sdk });
 };
 export {
   StreamLayerProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "type": "module",
   "main": "./main.js",
   "exports": {
@@ -19,6 +19,7 @@
     "react-dom": "18.2.0",
     "react-digit-input": "^2.1.0",
     "@streamlayer/react-ui": "*",
+    "@nanostores/react": "^0.7.1",
     "@streamlayer/sdk-web": "*"
   },
   "devDependencies": {