@streamlayer/react 0.2.1 → 0.2.5

package/main.js

@@ -0,0 +1,2865 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// packages/react-ui/src/lib/gamification/inapp/index.tsx
+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;
+
+// packages/react-ui/src/lib/gamification/inapp/styles.tsx
+import styled from "@emotion/styled";
+var Container = styled.div`
+  box-sizing: border-box;
+  border: ${(props) => `1px solid ${props.theme.COLORS.BLUE_PRIMARY}`};
+  border-radius: 13px;
+  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT};
+  color: ${(props) => props.theme.COLORS.WHITE};
+  display: flex;
+  user-select: none;
+  cursor: pointer;
+  overflow: hidden;
+  animation: slidein 0.3s ease-in;
+
+  @keyframes slidein {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+`;
+var IconWrap = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 14px;
+  background-color: ${(props) => props.theme.COLORS.BLUE_PRIMARY};
+`;
+var Icon = styled.img`
+  max-width: 40px;
+  max-height: 40px;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+`;
+var Content = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+`;
+var TitleWrap = styled.div`
+  padding-left: 20px;
+  padding-right: 5px;
+  font-weight: 700;
+  font-size: 14px;
+  flex: 1;
+`;
+var Title = styled.div`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var CloseBtnWrap = styled.div`
+  padding: 20px;
+`;
+var CloseBtn = styled.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var CloseIcon = styled.img`
+  width: 24px;
+  height: 24px;
+`;
+
+// packages/react-ui/src/lib/gamification/inapp/index.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
+var InApp = ({ title = "", icon, color, openVoiting, closeInApp }) => {
+  const _closeInApp = useCallback(
+    (e) => {
+      e.stopPropagation();
+      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 }) }) })
+    ] })
+  ] });
+};
+
+// packages/react-ui/src/lib/gamification/login/index.tsx
+import { useState } from "react";
+import PhoneInput, { isValidPhoneNumber, formatPhoneNumberIntl } from "react-phone-number-input";
+import "react-phone-number-input/style.css";
+import useDigitInput from "react-digit-input";
+
+// packages/react-ui/src/utils/login.ts
+import { createGrpcWebTransport } from "@bufbuild/connect-web";
+import { createPromiseClient } from "@connectrpc/connect";
+import { Users } from "@streamlayer/sl-eslib/users/users_connect";
+var requestLoginCode = async (phone) => {
+  const transport2 = createGrpcWebTransport({
+    baseUrl: process.env.NX_GRPC_HOST || "https://grpc-web.next.streamlayer.io:443"
+  });
+  const userClient = createPromiseClient(Users, transport2);
+  await userClient.requestPassword({ id: phone });
+  return true;
+};
+var login = async (phone, code) => {
+  const transport2 = createGrpcWebTransport({
+    baseUrl: process.env.NX_GRPC_HOST || "https://grpc-web.next.streamlayer.io:443"
+  });
+  const userClient = createPromiseClient(Users, transport2);
+  const res = await userClient.login({ id: phone, password: code });
+  return res?.meta?.jwt;
+};
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-header/components/timer/index.tsx
+import { useEffect } from "react";
+import { CountdownCircleTimer } from "react-countdown-circle-timer";
+
+// packages/react-ui/src/lib/theme/theme.ts
+var theme = {
+  COLORS: {
+    BG_TRANSPARENT: "rgba(0,0,0, .8)",
+    BG_TRANSPARENT_VOTE_CONTAINER: "rgba(10, 14, 19, 0.8)",
+    BG_TRANSPARENT_ITEM: "rgba(0, 0, 0, 0.7)",
+    BG_TRANSPARENT_ITEM_VOTE: "rgba(255, 255, 255, 0.1)",
+    BG_TRANSPARENT_ITEM_SUCCESS: "rgba(0, 139, 251, 0.2)",
+    BG_TRANSPARENT_ITEM_ERROR: "rgba(205, 37, 37, 0.2)",
+    BG_TRANSPARENT_VOTE_PROGRESS: "rgba(255, 255, 255, 0.2)",
+    BG_TRANSPARENT_VOTE_PROGRESS_SUCCESS: "rgba(60, 139, 251, 0.5)",
+    BG_TRANSPARENT_VOTE_PROGRESS_ERROR: "rgba(205, 37, 37, 0.5)",
+    BG_TRANSPARENT_USER_CONTAINER: "rgba(255, 255, 255, 0.05)",
+    BLUE_PRIMARY: "#1589EE",
+    RED_PRIMARY: "#CD2525",
+    BLUE_QUESTION_ACTION_BTN: "#1589ee",
+    WHITE: "#FFFFFF",
+    GREY_1: "#909395",
+    GREY_2: "#22262b",
+    GREY_3: "#2d3135",
+    GREY_4: "#53565a",
+    BLACK_1: "#161a1f",
+    GREEN_1: "#F7B801",
+    RED_1: "#A30000",
+    RED_2: "#FF4170",
+    GREY_PRIMARY: "#909395",
+    DIVIDER_COLOR_PRIMARY: "#2d3135",
+    DIVIDER_COLOR_SECONDARY: "#53565a",
+    GREEN_PRIMARY_BTN: "#009B77"
+  },
+  FONT: {
+    FAMILY: "Roboto, sans-serif",
+    COLOR: "#fff"
+  }
+};
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-header/components/timer/styles.tsx
+import styled2 from "@emotion/styled";
+var RemainingTime = styled2.div`
+  color: ${(props) => props.remainingTime ? "inherit" : props.theme.COLORS.RED_2};
+  font-size: 12px;
+`;
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-header/components/timer/index.tsx
+import { jsx as jsx3 } 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;
+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 });
+  useEffect(() => {
+    setTimeToExpire(false);
+  }, [setTimeToExpire]);
+  return /* @__PURE__ */ jsx3(
+    CountdownCircleTimer,
+    {
+      isPlaying,
+      duration,
+      colors: TIMER_COLORS,
+      colorsTime: TIMER_COLORS_TIME,
+      size: TIMER_SIZE,
+      strokeWidth: STROKE_WIDTH,
+      trailStrokeWidth: TRAIL_STROKE_WIDTH,
+      onComplete: () => setTimeToExpire(true),
+      children: renderTime
+    }
+  );
+};
+
+// packages/react-ui/src/lib/gamification/login/styles.tsx
+import styled3 from "@emotion/styled";
+var Panel = styled3.div`
+  border-radius: 8px;
+  padding: 0 12px;
+  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_ITEM};
+  display: flex;
+  align-items: center;
+  height: 100%;
+`;
+var Form = styled3.form`
+  display: flex;
+  margin: auto;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+`;
+var FormTitle = styled3.div`
+  margin-bottom: 20px;
+  font-size: 18px;
+`;
+var FormDescription = styled3.div`
+  margin-bottom: 10px;
+  font-size: 14px;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+var FormSubmit = styled3.button`
+  background-color: ${(props) => props.theme.COLORS.BLUE_QUESTION_ACTION_BTN};
+  border: none;
+  border-radius: 2px;
+  padding: 6px;
+  text-transform: uppercase;
+  color: #fff;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  margin-bottom: 20px;
+`;
+var FormInputContainer = styled3.div`
+  input {
+    font-size: 20px;
+    background: transparent;
+    color: #fff;
+    border: none;
+    outline: none;
+  }
+
+  margin-bottom: 40px;
+  border-bottom: 1px solid white;
+`;
+var Digits = styled3.div`
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+
+  input {
+    width: 20px;
+    height: 40px;
+    font-size: 40px;
+  }
+`;
+
+// packages/react-ui/src/lib/gamification/login/index.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+var Login = ({ login: login2, anonymousLogin }) => {
+  const [phoneInput, setPhoneInput] = useState("");
+  const [phone, setPhone] = useState("");
+  const [code, setCode] = useState("");
+  const digits = useDigitInput({
+    acceptedCharacters: /^[0-9]$/,
+    length: 4,
+    value: code,
+    onChange: setCode
+  });
+  const requestCode = async (e) => {
+    e.preventDefault();
+    try {
+      const parsed = phoneInput.replaceAll("+", "");
+      await requestLoginCode(parsed);
+      setPhone(parsed);
+    } catch (err) {
+      window.alert(err);
+    }
+  };
+  const loginByCode = async (e) => {
+    e.preventDefault();
+    if (phone && code) {
+      try {
+        const token = await login(phone, code);
+        if (token && login2) {
+          await login2(token);
+        } else {
+          console.log("token", token);
+        }
+      } catch (err) {
+        window.alert(err);
+      }
+    }
+  };
+  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" })
+      ] }),
+      anonymousLogin && /* @__PURE__ */ jsx4(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: [
+        "Please enter the verification code ",
+        /* @__PURE__ */ jsx4("br", {}),
+        "sent to ",
+        /* @__PURE__ */ jsx4("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__ */ jsx4(FormSubmit, { disabled: code.length !== 4, type: "submit", children: "login" }),
+      /* @__PURE__ */ jsxs3(FormDescription, { children: [
+        "Didn't get 59 the code? ",
+        /* @__PURE__ */ jsx4("br", {}),
+        "Resend Code in",
+        /* @__PURE__ */ jsx4(Timer, { duration: 30, setTimeToExpire: () => {
+        }, isPlaying: true })
+      ] })
+    ] })
+  ] });
+};
+
+// packages/react-ui/src/lib/gamification/onboarding/styles.tsx
+import styled4 from "@emotion/styled";
+var Container2 = styled4.div`
+  box-sizing: border-box;
+  display: flex;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`;
+var Content2 = styled4.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+`;
+var Description = styled4.div`
+  font-size: 22px;
+  font-weight: 300;
+  margin-bottom: 4px;
+`;
+var Title2 = styled4.div`
+  font-size: 26px;
+  font-weight: 700;
+`;
+var OnboardingActionBtn = styled4.button`
+  color: ${(props) => props.theme.COLORS.WHITE};
+  width: 100%;
+  border: none;
+  outline: none;
+  background-color: ${(props) => props.theme.COLORS.GREEN_PRIMARY_BTN};
+  cursor: pointer;
+  padding: 12px 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 6px;
+`;
+
+// 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" })
+  ] }),
+  /* @__PURE__ */ jsx5(OnboardingActionBtn, { onClick: action, children: "Let\u2019s play" })
+] });
+
+// packages/sdk-web-types/src/sl-types.ts
+import { QuestionType, QuestionStatus } from "@streamlayer/sl-eslib/interactive/interactive.common_pb";
+import { PickHistoryStatus } from "@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb";
+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;
+
+// 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;
+
+// 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;
+
+// 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;
+
+// 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;
+
+// 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;
+
+// packages/react-ui/src/lib/gamification/question/styles.tsx
+import styled5 from "@emotion/styled";
+var Panel2 = styled5.div`
+  border-radius: 8px;
+  padding: 12px;
+  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_ITEM};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background: #000;
+  }
+`;
+var QuestionTypeIconWrap = styled5.div`
+  padding-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+var QuestionTypeIcon = styled5.img`
+  width: 16px;
+  height: 16px;
+`;
+var QuestionContent = styled5.div`
+  font-weight: 700;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+var QuestionTypeLabel = styled5.div`
+  color: ${(props) => props.theme.COLORS.GREY_PRIMARY};
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-bottom: 5px;
+  text-transform: uppercase;
+`;
+var QuestionSubject = styled5.div`
+  color: ${(props) => props.theme.COLORS.WHITE};
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var QuestionActionTitle = styled5.button`
+  background-color: ${(props) => props.theme.COLORS.BLUE_QUESTION_ACTION_BTN};
+  border: none;
+  border-radius: 2px;
+  font-size: 8px;
+  padding: 6px;
+  height: 20px;
+  text-transform: uppercase;
+  color: #fff;
+  cursor: pointer;
+`;
+var QuestionActionIcon = styled5.button`
+  border: none;
+  font-size: 8px;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  cursor: pointer;
+`;
+var QuestionStatusIcon = styled5.img`
+  width: 16px;
+  height: 16px;
+`;
+var QuestionTypeTitle = styled5.span`
+  text-transform: uppercase;
+`;
+var ExpiredQuestion = styled5.span`
+  text-transform: uppercase;
+  border-left: ${(props) => `1px solid ${props.theme.COLORS.GREY_PRIMARY}`};
+  padding-left: 5px;
+  margin-left: 5px;
+`;
+
+// packages/react-ui/src/lib/gamification/question/index.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+var QuestionTypeData = {
+  [QuestionType.POLL]: { label: "Poll", icon: icon_poll_default },
+  [QuestionType.TRIVIA]: { label: "Trivia", icon: icon_trivia_default },
+  [QuestionType.PREDICTION]: { label: "Prediction", icon: icon_prediction_default }
+};
+var QuestionStatusTypeData = {
+  [PickHistoryStatus.LOST]: icon_cross_default,
+  [PickHistoryStatus.WON]: icon_check_green_default,
+  [PickHistoryStatus.UNSET]: icon_chevron_default,
+  [PickHistoryStatus.DNP]: icon_chevron_default
+};
+var Question = ({
+  questionId,
+  questionType,
+  questionStatus,
+  subject,
+  openForVoting,
+  openQuestion,
+  status
+}) => {
+  const questionTypeData = QuestionTypeData[questionType];
+  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" })
+      ] }),
+      /* @__PURE__ */ jsx12(QuestionSubject, { children: subject || "" })
+    ] }),
+    openForVoting ? /* @__PURE__ */ jsx12(QuestionActionTitle, { children: "play" }) : /* @__PURE__ */ jsx12(QuestionActionIcon, { children: /* @__PURE__ */ jsx12(QuestionStatusIcon, { alt: "question-status-icon", src: QuestionStatusTypeData[status] }) })
+  ] });
+};
+
+// packages/react-ui/src/lib/gamification/question-list/styles.tsx
+import styled6 from "@emotion/styled";
+var Container3 = styled6.div`
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 160px);
+  border-radius: 13px;
+`;
+var Title3 = styled6.div`
+  color: ${(props) => props.theme.COLORS.GREY_PRIMARY};
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 8px;
+`;
+var ItemsContainer = styled6.div`
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: 100%;
+
+  & > div {
+    margin-bottom: 8px;
+  }
+`;
+
+// packages/react-ui/src/lib/gamification/question-list/index.tsx
+import { jsx as jsx13, jsxs as jsxs7 } 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)) })
+  ] });
+};
+
+// 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;
+
+// packages/react-ui/src/lib/gamification/user-statistics/components/statistics/styles.tsx
+import styled7 from "@emotion/styled";
+var Container4 = styled7.div`
+  font-weight: 700;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  align-items: center;
+  text-align: center;
+`;
+var Indicator = styled7.div`
+  font-size: 18px;
+  color: #fff;
+`;
+
+// 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 })
+] });
+
+// packages/react-ui/src/lib/gamification/user-statistics/components/rank/styles.tsx
+import styled8 from "@emotion/styled";
+var Container5 = styled8.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  column-gap: 2px;
+  overflow: hidden;
+`;
+var Title4 = styled8.div`
+  width: 75px;
+`;
+var Indicator2 = styled8.div`
+  font-size: 14px;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 25px;
+`;
+
+// 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 })
+] });
+
+// packages/react-ui/src/lib/gamification/user-statistics/styles.tsx
+import styled9 from "@emotion/styled";
+var Container6 = styled9.div`
+  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_USER_CONTAINER};
+  border-radius: 12px;
+  color: ${(props) => props.theme.COLORS.GREY_PRIMARY};
+  font-size: 10px;
+  font-weight: 600;
+`;
+var TopInfo = styled9.div`
+  padding: 12px;
+  border-bottom: ${(props) => `1px solid ${props.theme.COLORS.DIVIDER_COLOR_PRIMARY}`};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 5px;
+`;
+var BottomInfo = styled9.div`
+  padding: 12px 16px;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: space-between;
+  column-gap: 16px;
+`;
+var User = styled9.div`
+  display: flex;
+  column-gap: 8px;
+  flex: 1;
+  overflow: hidden;
+`;
+var Avatar = styled9.img`
+  width: 100%;
+  height: 100%;
+  max-width: 48px;
+  max-height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+  flex-shrink: 0;
+`;
+var UserInfo = styled9.div`
+  padding-top: 4px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  overflow: hidden;
+`;
+var UserName = styled9.div`
+  font-size: 18px;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var UserRating = styled9.div`
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+`;
+var TrophyIcon = styled9.img`
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+`;
+var Rts = styled9.div`
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  border-right: ${(props) => `1px solid ${props.theme.COLORS.DIVIDER_COLOR_SECONDARY}`};
+  padding-right: 5px;
+`;
+var RtsIndicator = styled9.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.COLORS.WHITE};
+`;
+var Top = styled9.div`
+  padding-left: 5px;
+`;
+var Ranks = styled9.div`
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+`;
+var AvatarPlaceholder = styled9.div`
+  background: #2d6ffd;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  text-align: center;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 18px;
+  flex-shrink: 0;
+`;
+
+// packages/react-ui/src/lib/gamification/user-statistics/index.tsx
+import { jsx as jsx17, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+var abbreviate = (name) => name.split(/\s+/).map((p) => p[0]).join("").toUpperCase();
+var UserStatistics = ({
+  avatar,
+  name,
+  points,
+  grade,
+  friendsRank,
+  globalRank,
+  winStreak,
+  correct,
+  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 || "-" }),
+              "RTS"
+            ] }),
+            /* @__PURE__ */ jsxs10(Top, { children: [
+              "TOP ",
+              grade,
+              "%"
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs10(Ranks, { children: [
+        /* @__PURE__ */ jsx17(Rank, { title: "Friens rank", indicator: friendsRank || "-" }),
+        /* @__PURE__ */ jsx17(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" })
+    ] })
+  ] });
+};
+
+// 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;
+
+// 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;
+
+// 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;
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-option/styles.tsx
+import styled10 from "@emotion/styled";
+var Container7 = styled10.div`
+  box-sizing: border-box;
+  border-radius: 4px;
+  height: 44px;
+  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_ITEM_VOTE};
+  border: 2px solid transparent;
+  position: relative;
+
+  ${(props) => !props.questionAnswered && `
+      &:hover {
+      border-color: inherit;
+    }
+  `}
+`;
+var AnsweredContainer = styled10(Container7)`
+  background-color: ${({ answeredCorrect, theme: theme2 }) => answeredCorrect ? theme2.COLORS.BG_TRANSPARENT_ITEM_SUCCESS : theme2.COLORS.BG_TRANSPARENT_ITEM_ERROR};
+  border: 2px solid;
+  border-color: ${({ answeredCorrect, theme: theme2 }) => answeredCorrect ? theme2.COLORS.BLUE_PRIMARY : theme2.COLORS.RED_PRIMARY};
+
+  &:hover {
+    border-color: ${({ answeredCorrect, theme: theme2 }) => answeredCorrect ? theme2.COLORS.BLUE_PRIMARY : theme2.COLORS.RED_PRIMARY};
+  }
+`;
+var ButtonPct = styled10.div`
+  position: absolute;
+  left: 0;
+  border-radius: 2px;
+  z-index: 0;
+  height: 100%;
+  background-color: inherit;
+  transition: all 1s ease-in;
+`;
+var Button = styled10.button`
+  border-radius: 20px;
+  position: relative;
+  background-color: transparent;
+  padding: 0px 16px;
+  display: flex;
+  align-items: center;
+  border: none;
+  outline: none;
+  width: 100%;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  font-weight: 700;
+  font-size: 14px;
+  height: 100%;
+  border-radius: 2px;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+var Icon2 = styled10.img`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-right: 8px;
+`;
+var Title5 = styled10.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 8px 0px;
+  flex: 1;
+  text-align: left;
+`;
+var Indicators = styled10.span`
+  display: flex;
+`;
+var CheckIconWrap = styled10.div`
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+`;
+var Percentage = styled10.div`
+  margin-left: 12px;
+`;
+var CheckIcon = styled10.img`
+  width: 16px;
+  height: 16px;
+`;
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-option/index.tsx
+import { jsx as jsx21, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+var VotingOption = ({
+  icon,
+  id,
+  title,
+  questionId,
+  disabled,
+  percentage,
+  onVote,
+  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: [
+            percentage,
+            "%"
+          ] })
+        ] })
+      ] })
+    ] });
+  }
+  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,
+          "%"
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+// packages/react-ui/src/lib/gamification/vote/styles.tsx
+import styled11 from "@emotion/styled";
+var Container8 = styled11.div`
+  padding: 16px;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  font-weight: 700;
+  font-size: 14px;
+
+  & > div:not(:last-child) {
+    margin-bottom: 16px;
+  }
+`;
+var Title6 = styled11.div`
+  font-size: 16px;
+`;
+var Options = styled11.div`
+  overflow-y: auto;
+  max-height: 220px;
+
+  & > div:not(:last-child) {
+    margin-bottom: 12px;
+  }
+`;
+var Feedback = styled11.div`
+  padding: 14px 12px 14px 16px;
+  display: flex;
+  align-items: center;
+`;
+var FeedbackIcon = styled11.img`
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+`;
+var FeedbackTitle = styled11.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16;
+  font-weight: 700;
+  margin-bottom: 10px;
+`;
+var FeedbackDescription = styled11.div`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14;
+  font-weight: 500;
+`;
+
+// packages/react-ui/src/lib/gamification/vote/index.tsx
+import { jsx as jsx22, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+var Vote = ({
+  title,
+  questionId,
+  options,
+  questionAnswered,
+  feedbackMessages,
+  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 })
+      ] })
+    ] })
+  ] });
+};
+
+// packages/react-ui/src/lib/demo/index.tsx
+import { useStore as useStore6 } from "@nanostores/react";
+
+// packages/react-ui/src/lib/demo/Gamification.tsx
+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";
+var UserSummary = ({ store: store2 }) => {
+  const { data: user } = useStore(store2);
+  if (!user?.summary) {
+    return /* @__PURE__ */ jsx23("div", { children: "wait user..." });
+  }
+  return /* @__PURE__ */ jsx23(
+    UserStatistics,
+    {
+      avatar: user.summary.avatar,
+      name: user.summary.name,
+      points: user.summary.points,
+      grade: "0",
+      friendsRank: user.summary.friendsRank,
+      globalRank: user.summary.rank,
+      winStreak: user.summary.streak,
+      correct: user.summary.correct,
+      incorrect: user.summary.incorrect,
+      successRate: user.percentage?.average
+    }
+  );
+};
+
+// 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";
+var QuestionsList = ({ store: store2, openQuestion }) => {
+  const { data: questions } = useStore2(store2);
+  if (!questions) {
+    return /* @__PURE__ */ jsx24("div", { children: "wait questions..." });
+  }
+  return /* @__PURE__ */ jsx24(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";
+
+// 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;
+
+// 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;
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-header/styles.tsx
+import styled12 from "@emotion/styled";
+var Container9 = styled12.div`
+  box-sizing: border-box;
+  background-color: transparent;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  padding: 0px 16px;
+  align-items: center;
+`;
+var Logo = styled12.img`
+  width: 60px;
+  height: 80%;
+`;
+var RightBlock = styled12.div`
+  display: flex;
+  align-items: center;
+`;
+var ExitBtn = styled12.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  border-radius: 50%;
+  padding: 0px;
+  width: 24px;
+  height: 24px;
+  margin-left: 25px;
+  cursor: pointer;
+`;
+var ExitIcon = styled12.img`
+  width: 24px;
+  height: 24px;
+`;
+var Interactive = styled12.div`
+  display: flex;
+  align-items: center;
+  padding: 4px 0px;
+  margin-left: 10px;
+`;
+var ReactionIconWrap = styled12.div`
+  background-color: ${(props) => props.isSuccess ? "#f1be1c" : "#da3732"};
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var ReactionIcon = styled12.img`
+  width: 20px;
+  height: 20px;
+`;
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-header/components/points/styles.tsx
+import styled13 from "@emotion/styled";
+var Container10 = styled13.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-right: 10px;
+  font-weight: 700;
+`;
+var Title7 = styled13.div`
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 8px;
+  line-height: 12px;
+  text-align: right;
+`;
+var PointContainer = styled13.div`
+  text-align: right;
+`;
+var Point = styled13.span`
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  line-height: 16px;
+  margin-right: 2px;
+`;
+var PointLabel = styled13.span`
+  color: white;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+`;
+
+// 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" })
+  ] })
+] });
+
+// 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";
+var VotingHeader = ({
+  logo,
+  points,
+  questionAnswered,
+  questionAnsweredCorrectly,
+  questionType,
+  closeQuestion,
+  setTimeToExpire
+}) => {
+  const isShowTimer = !questionAnswered && questionType !== QuestionType.PREDICTION;
+  const isShowTriviaFeedback = questionAnswered && questionType === QuestionType.TRIVIA;
+  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 }) })
+        ] }),
+        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 }) })
+        ] }),
+        isShowPredictionFeedback && /* @__PURE__ */ jsx28(Points, { points })
+      ] }),
+      /* @__PURE__ */ jsx28(ExitBtn, { onClick: closeQuestion, children: /* @__PURE__ */ jsx28(ExitIcon, { alt: "exit-icon", src: icon_exit_default }) })
+    ] }),
+    logo && /* @__PURE__ */ jsx28(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;
+
+// packages/react-ui/src/lib/demo/components/Question.tsx
+import { jsx as jsx30, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+var QuestionContainer = styled14.div`
+  position: absolute;
+  top: 0;
+  background: ${(props) => props.theme.COLORS.BG_TRANSPARENT_ITEM};
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  > div {
+    width: 100%;
+    background: #000;
+    animation: slidein 0.3s ease-in;
+  }
+
+  @keyframes slidein {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+`;
+var Question2 = ({ store: store2, closeQuestion, vote }) => {
+  const { data: openedQuestion } = useStore3(store2);
+  const [answerTimeExpired, setAnswerTimeExpired] = useState2(false);
+  const setTimeToExpire = useCallback2(
+    (flag) => {
+      setAnswerTimeExpired(flag);
+    },
+    [setAnswerTimeExpired]
+  );
+  const questionAnswered = useMemo(
+    () => openedQuestion?.answers.find((answer) => answer.youVoted === true),
+    [openedQuestion]
+  );
+  const hasCorrectAnswer = useMemo(
+    () => !!openedQuestion?.answers.find((answer) => answer.correct === true),
+    [openedQuestion]
+  );
+  if (!openedQuestion) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx30(QuestionContainer, { children: /* @__PURE__ */ jsxs17("div", { children: [
+    /* @__PURE__ */ jsx30(
+      VotingHeader,
+      {
+        points: questionAnswered?.points || 0,
+        questionAnswered: !!questionAnswered,
+        questionAnsweredCorrectly: questionAnswered?.correct,
+        logo: fedex_default,
+        closeQuestion,
+        setTimeToExpire,
+        questionType: openedQuestion.type
+      }
+    ),
+    /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(
+      Vote,
+      {
+        title: openedQuestion.subject,
+        feedbackMessages: openedQuestion.options?.options.value,
+        questionType: openedQuestion.type,
+        questionId: openedQuestion.id,
+        questionAnswered: !!questionAnswered,
+        questionAnsweredCorrectly: questionAnswered?.correct,
+        options: openedQuestion.answers.map((answer) => ({
+          id: answer.id,
+          title: answer.text,
+          icon: answer.icon,
+          type: openedQuestion.type,
+          correct: answer.correct,
+          percentage: answer.percentage,
+          answered: answer.youVoted,
+          disabled: !!questionAnswered || openedQuestion.marketClosed || answerTimeExpired,
+          questionAnswered: !!questionAnswered,
+          hasCorrectAnswer,
+          onVote: 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";
+var Notifications = ({ notificationsStore, openQuestion }) => {
+  const timeout = useRef();
+  const [lastNotification, setLastNotification] = useState3();
+  const notifications2 = useStore4(notificationsStore);
+  useEffect2(() => {
+    if (notifications2) {
+      setLastNotification(notifications2[notifications2.length - 1]?.data);
+      timeout.current = setTimeout(() => {
+        setLastNotification(void 0);
+      }, 5e3);
+    }
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, [notifications2]);
+  if (!lastNotification?.question || !lastNotification?.notification) {
+    return null;
+  }
+  const closeInApp = () => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    setLastNotification(void 0);
+  };
+  const openVoiting = () => {
+    closeInApp();
+    openQuestion(lastNotification.question.id);
+  };
+  return /* @__PURE__ */ jsx31(
+    InApp,
+    {
+      openVoiting,
+      closeInApp,
+      title: lastNotification.notification.title,
+      icon: lastNotification.notification.image,
+      color: lastNotification.notification.indicatorColor
+    }
+  );
+};
+
+// packages/react-ui/src/lib/demo/components/InPlayGame.tsx
+import { jsx as jsx32 } from "@emotion/react/jsx-runtime";
+var InPlayGame = ({ action }) => {
+  return /* @__PURE__ */ jsx32(Onboarding, { action });
+};
+
+// packages/react-ui/src/lib/demo/styles.tsx
+import styled15 from "@emotion/styled";
+var DemoContainer = styled15.div`
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+`;
+var DemoContainerNotifications = styled15.div`
+  position: absolute;
+  width: 100%;
+`;
+var UserStatisticsContainer = styled15.div`
+  margin-bottom: 15px;
+`;
+
+// packages/react-ui/src/lib/demo/Gamification.tsx
+import { jsx as jsx33, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+var GamificationComponent = ({
+  gamification,
+  sdk
+}) => {
+  const onbordingComplete = useStore5(gamification.onbordingComplete);
+  if (!onbordingComplete) {
+    return /* @__PURE__ */ jsx33(DemoContainer, { children: /* @__PURE__ */ jsx33(InPlayGame, { action: gamification.submitInplay }) });
+  }
+  const openQuestion = (questionId) => {
+    gamification.openQuestion(questionId);
+  };
+  const closeQuestion = () => {
+    gamification.closeQuestion();
+  };
+  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() })
+  ] });
+};
+
+// packages/react-ui/src/lib/demo/Login.tsx
+import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
+var LoginComponent = ({ sdk }) => {
+  const login2 = async (token) => {
+    try {
+      await sdk.authorizationBypass("streamlayer:streamlayer", token);
+    } catch (err) {
+      console.log("login err", err);
+      throw err;
+    }
+  };
+  return /* @__PURE__ */ jsx34(Login, { login: login2, anonymousLogin: sdk.anonymousAuthorization });
+};
+
+// packages/react-ui/src/lib/demo/index.tsx
+import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
+var Demo = ({ sdk }) => {
+  const user = useStore6(sdk.getUserStore());
+  if (user.loading) {
+    return /* @__PURE__ */ jsx35("div", { children: "authentificating..." });
+  }
+  if (!user.data) {
+    return /* @__PURE__ */ jsx35(LoginComponent, { sdk });
+  }
+  const gamification = sdk.getFeatures().get("games");
+  if (!gamification) {
+    return /* @__PURE__ */ jsx35("div", { children: "wait gamification..." });
+  }
+  return /* @__PURE__ */ jsx35(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 });
+
+// packages/react/src/app/provider.tsx
+import { createContext, useMemo as useMemo2 } from "react";
+
+// packages/sdk-web-interfaces/src/auth.ts
+var AbstractAuthenticationProvider = class {
+};
+
+// packages/sdk-web-interfaces/src/feature.ts
+import { SdkOverlayType as SdkOverlayType2 } from "@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb";
+import { atom } from "nanostores";
+
+// packages/sdk-web-interfaces/src/store/map.ts
+import { map } from "nanostores";
+
+// packages/sdk-web-interfaces/src/store/abstract.ts
+import { computed } from "nanostores";
+import { buildLogger } from "@nanostores/logger";
+import diff from "microdiff";
+window.storeLogger = /* @__PURE__ */ Object.create(null);
+var slStoreLogger = (store2, name) => buildLogger(store2, name, {
+  mount: ({ storeName }) => {
+    if (!window.storeLogger[storeName]) {
+      window.storeLogger[storeName] = { mounted: true, history: [{ type: "mount" }] };
+    }
+    window.storeLogger[storeName].store = store2;
+  },
+  unmount: ({ storeName }) => {
+    window.storeLogger[storeName].mounted = false;
+    window.storeLogger[storeName]?.history.push({ type: "unmount" });
+  },
+  change: ({ actionName, storeName, changed, newValue, oldValue, valueMessage }) => {
+    window.storeLogger[storeName]?.history.push({
+      type: "change",
+      changed,
+      newValue,
+      oldValue,
+      diff: diff({ ...oldValue }, { ...newValue }, { cyclesFix: false }),
+      actionName,
+      valueMessage
+    });
+  },
+  action: {
+    start: ({ actionName, args, storeName }) => {
+      window.storeLogger[storeName]?.history.push({
+        type: "action:start",
+        actionName,
+        args,
+        storeName
+      });
+    },
+    error: ({ actionName, error, storeName }) => {
+      window.storeLogger[storeName]?.history.push({
+        type: "action:error",
+        actionName,
+        error
+      });
+    },
+    end: ({ actionName, storeName }) => {
+      window.storeLogger[storeName]?.history.push({
+        type: "action:end",
+        actionName
+      });
+    }
+  }
+});
+var AbstractStore = class {
+  /**
+   * store instance (nanostores)
+   */
+  store;
+  name;
+  constructor(store2, name) {
+    this.store = store2;
+    this.name = name;
+    if (process.env.NODE_ENV !== "production") {
+      slStoreLogger(this.store, this.name);
+    }
+  }
+  /**
+   * return store instance
+   */
+  getStore() {
+    return this.store;
+  }
+};
+var mergeStores = (stores) => {
+  const storeKeys = Object.keys(stores);
+  return computed(
+    storeKeys.map((key) => stores[key].getStore()),
+    (...storeValues) => Object.fromEntries(storeKeys.map((key, i) => [key, storeValues[i]]))
+  );
+};
+
+// packages/sdk-web-interfaces/src/store/map.ts
+var MapStore = class extends AbstractStore {
+  getValues = () => {
+    const store2 = this.getStore();
+    return store2.get();
+  };
+  getValue = (key) => {
+    const store2 = this.getStore();
+    return store2.get()[key];
+  };
+  setValue = (path, value) => {
+    const store2 = this.getStore();
+    return store2.setKey(path, value);
+  };
+  subscribe = (...args) => {
+    const store2 = this.getStore();
+    return store2.subscribe(...args);
+  };
+  unsubscribe = () => {
+    const store2 = this.getStore();
+    return store2.off();
+  };
+};
+var createMapStore = (initialData) => {
+  return map(initialData);
+};
+
+// packages/sdk-web-interfaces/src/feature.ts
+var FeatureTypes = {
+  [SdkOverlayType2.BETTING]: "betting",
+  [SdkOverlayType2.GAMES]: "games",
+  [SdkOverlayType2.PUBLIC_CHAT]: "publicChat",
+  [SdkOverlayType2.TWITTER]: "twitter"
+};
+var AbstractFeature = class {
+  status;
+  source;
+  config;
+  settings;
+  listeners = /* @__PURE__ */ new Set();
+  settingsKey;
+  constructor({ settings, ...config }, source) {
+    this.settingsKey = FeatureTypes[config.type];
+    this.status = atom("suspended" /* Suspended */);
+    this.config = new MapStore(createMapStore(config), `feature:config:${this.settingsKey}`);
+    if (this.settingsKey !== void 0 && settings?.overlaySettings.case === this.settingsKey) {
+      this.settings = new MapStore(
+        createMapStore(settings.overlaySettings.value),
+        `feature:settings:${this.settingsKey}`
+      );
+    } else {
+      this.settings = new MapStore(createMapStore({}), `feature:settings:${this.settingsKey}`);
+    }
+    this.source = source;
+  }
+  get featureConfig() {
+    return this.config.getStore();
+  }
+  get featureSettings() {
+    return this.settings.getStore();
+  }
+  registerEventListener(listener) {
+    this.listeners.add(listener);
+  }
+  enable = () => {
+    this.status.set("ready" /* Ready */);
+  };
+  disabled = () => {
+    this.status.set("suspended" /* Suspended */);
+  };
+  setFeatureConfig = ({ settings, ...config }) => {
+    let configKey;
+    for (configKey in config) {
+      this.config.setValue(configKey, config[configKey]);
+    }
+    if (settings?.overlaySettings.case === this.settingsKey) {
+      const newSettings = settings.overlaySettings.value;
+      if (newSettings !== void 0) {
+        let key;
+        for (key in newSettings) {
+          console.log(key, newSettings[key]);
+          if (newSettings[key] !== 0 && newSettings[key] !== "") {
+            this.settings.setValue(key, newSettings[key]);
+          }
+        }
+      }
+    }
+  };
+  update = (config, source) => {
+    if (this.source === "STREAM" /* STREAM */ && source === "ORGANIZATION" /* ORGANIZATION */) {
+      return;
+    }
+    this.setFeatureConfig(config);
+    this.source = source;
+  };
+  fireEvent(event) {
+    for (const listener of this.listeners.values()) {
+      try {
+        listener.onEvent(event);
+      } catch (err) {
+        console.error(err);
+      }
+    }
+  }
+};
+
+// packages/sdk-web-interfaces/src/store/single.ts
+import { atom as atom2 } from "nanostores";
+var SingleStore = class extends AbstractStore {
+  getValue = () => {
+    const store2 = this.getStore();
+    return store2.get();
+  };
+  getValues() {
+    throw new Error("not implemented");
+  }
+  setValue = (value) => {
+    const store2 = this.getStore();
+    return store2.set(value);
+  };
+  subscribe = (listener) => {
+    const store2 = this.getStore();
+    return store2.subscribe(listener);
+  };
+  unsubscribe = () => {
+    const store2 = this.getStore();
+    return store2.off();
+  };
+  listen(listener) {
+    const store2 = this.getStore();
+    return store2.listen(listener);
+  }
+  get() {
+    const store2 = this.getStore();
+    return store2.get();
+  }
+};
+var createSingleStore = (initialData) => atom2(initialData);
+
+// packages/sdk-web-interfaces/src/store/api.ts
+import { atom as atom3 } from "nanostores";
+var ApiStore = class extends AbstractStore {
+  atomStore;
+  constructor(store2, name, atomPicker) {
+    super(store2, `api:${name}`);
+    this.atomStore = atom3();
+    if (atomPicker) {
+      store2.subscribe((data) => {
+        this.atomStore.set(atomPicker(data));
+      });
+    }
+  }
+  getAtomStore = () => this.atomStore;
+  getValue = async () => {
+    const store2 = this.getStore();
+    if (store2.value === void 0) {
+      throw new Error("no store");
+    }
+    await store2.value.promise;
+    return store2.get().data;
+  };
+  getValues = () => {
+    throw new Error("not implemented");
+  };
+  setValue = (value) => {
+    const store2 = this.getStore();
+    return store2.set({ loading: false, data: value?.data });
+  };
+  subscribe = (listener) => {
+    const store2 = this.getStore();
+    return store2.subscribe(listener);
+  };
+  unsubscribe = () => {
+    throw new Error("not implemented");
+  };
+  invalidate = () => {
+    this.store.invalidate();
+  };
+  listen = (cb) => {
+    const store2 = this.getStore();
+    return store2.listen(cb);
+  };
+  get() {
+    throw new Error("not implemented");
+  }
+  key = () => {
+    const store2 = this.getStore();
+    return store2.key;
+  };
+  off = () => {
+    const store2 = this.getStore();
+    return store2.off();
+  };
+};
+
+// packages/sdk-web-api/src/grpc/transport.ts
+import {
+  createRouterTransport,
+  createPromiseClient as createPromiseClient2,
+  createCallbackClient
+} from "@connectrpc/connect";
+import { createGrpcWebTransport as createGrpcWebTransport2 } from "@bufbuild/connect-web";
+import { nanoquery } from "@nanostores/query";
+
+// packages/sdk-web-api/src/utils/devtools.ts
+async function* logEach(store2, stream) {
+  for await (const m of stream) {
+    store2.response.message = m;
+    store2.received_at = Date.now();
+    const msg = {
+      type: "__GRPC_DEVTOOLS_EXTENSION__",
+      data: store2
+    };
+    window.postMessage(msg);
+    yield m;
+  }
+}
+var __GRPC_DEVTOOLS_EXTENSION__ = () => (next) => async (request) => {
+  const store2 = {
+    name: request.url,
+    request: {},
+    response: {}
+  };
+  store2.request.header = Object.fromEntries(request.header.entries());
+  store2.sent_at = Date.now();
+  try {
+    const response = await next(request);
+    store2.received_at = Date.now();
+    store2.stream = response.stream;
+    store2.response.header = Object.fromEntries(response.header.entries());
+    store2.response.trailer = Object.fromEntries(response.trailer.entries());
+    if (!response.stream) {
+      store2.request.message = request.message;
+      store2.response.message = response.message;
+      store2.latency = store2.received_at - store2.sent_at;
+      const msg = {
+        type: "__GRPC_DEVTOOLS_EXTENSION__",
+        data: store2
+      };
+      window.postMessage(msg);
+    } else {
+      return {
+        ...response,
+        message: logEach(store2, response.message)
+      };
+    }
+    return response;
+  } catch (e) {
+    store2.received_at = Date.now();
+    store2.request.message = request.message;
+    store2.response.trailer = {
+      ["grpc-status"]: e.code,
+      ["grpc-message"]: e.rawMessage
+    };
+    store2.response.message = e.rawMessage;
+    store2.latency = store2.received_at - store2.sent_at;
+    const msg = {
+      type: "__GRPC_DEVTOOLS_EXTENSION__",
+      data: store2
+    };
+    window.postMessage(msg);
+    throw e;
+  }
+};
+window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));
+
+// packages/sdk-web-api/src/grpc/subscription.ts
+var ServerStreamSubscription = class {
+  params;
+  stream;
+  method;
+  name;
+  headers;
+  listeners;
+  state;
+  store;
+  constructor(headers, method, params, options) {
+    const initState = {
+      status: "init" /* Init */,
+      ts: /* @__PURE__ */ new Date(),
+      log: []
+    };
+    this.state = new MapStore(createMapStore(initState), `subscription:${options.name}:state`);
+    this.name = options.name;
+    this.headers = headers;
+    this.listeners = /* @__PURE__ */ new Map();
+    this.params = params;
+    this.method = method;
+    if (options.withStore) {
+      this.store = new SingleStore(createSingleStore(null), `subscription:${options.name}:store`);
+    }
+    if ("subscribe" in params && typeof params.subscribe === "function") {
+      params.subscribe(() => {
+        this.reconnect();
+      });
+    }
+    this.updateState("ready" /* Ready */);
+  }
+  updateState = (status) => {
+    this.state.setValue("status", status);
+    this.state.setValue("ts", /* @__PURE__ */ new Date());
+    this.addStateLog(`status => ${status}`);
+  };
+  addStateLog = (msg) => {
+    const log = this.state.getStore().get()["log"];
+    this.state.setValue("log", [...log, `${(/* @__PURE__ */ new Date()).toLocaleString()}: ${msg}`]);
+  };
+  addListener = (name, listener) => {
+    if (this.listeners.has(name)) {
+      this.addStateLog(`listener '${name}' not added`);
+      return false;
+    }
+    this.listeners.set(name, listener);
+    this.addStateLog(`listener '${name}' added`);
+    return true;
+  };
+  removeListener = (name) => {
+    this.listeners.delete(name);
+    this.addStateLog(`listener '${name}' removed`);
+  };
+  connect = () => {
+    this.updateState("connecting" /* Connecting */);
+    if (this.stream) {
+      this.addStateLog(`disconnect prev connection`);
+      this.stream();
+    }
+    const params = "get" in this.params && typeof this.params.get === "function" ? this.params.get() : this.params;
+    this.stream = this.method(
+      params,
+      // ToDo: fix types
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      this.onData,
+      this.onStreamError,
+      { headers: this.headers.getValues() }
+    );
+    this.updateState("connected" /* Connected */);
+  };
+  disconnect = () => {
+    if (this.stream) {
+      this.stream();
+    }
+    this.listeners.clear();
+    this.updateState("disconnected" /* Disconnected */);
+  };
+  reconnect = () => {
+    this.updateState("reconnecting" /* Reconnecting */);
+    this.connect();
+  };
+  getStore = () => this.store?.getStore();
+  onData = (response) => {
+    this.addStateLog(`received data => ${JSON.stringify(response)}`);
+    if (this.store) {
+      this.store.setValue(response);
+    }
+    for (const [, listener] of this.listeners) {
+      listener(response);
+    }
+    this.addStateLog(`data routed to ${this.listeners.size} listeners`);
+  };
+  onStreamError = (error) => {
+    console.error(error);
+    this.updateState("failed" /* Failed */);
+    this.state.setValue("error", error);
+  };
+};
+
+// packages/sdk-web-api/src/grpc/transport.ts
+var Transport = class {
+  toJsonOptions = {
+    emitDefaultValues: false,
+    enumAsInteger: true,
+    useProtoFieldName: false
+  };
+  transport;
+  nanoquery;
+  interceptors = [];
+  $headers;
+  clients;
+  callbackClients;
+  subscriptions;
+  constructor() {
+    this.$headers = new MapStore(
+      createMapStore({
+        ["sl-device-id"]: process.env.NX_DEVICE_ID || "sdk-web-dev"
+      }),
+      "transport:headers"
+    );
+    this.initInterceptors();
+    this.clients = /* @__PURE__ */ new Map();
+    this.callbackClients = /* @__PURE__ */ new Map();
+    this.subscriptions = /* @__PURE__ */ new Map();
+    const [createFetcherStore, createMutatorStore, utils] = nanoquery();
+    this.nanoquery = { createFetcherStore, createMutatorStore, utils };
+    this.transport = createGrpcWebTransport2({
+      baseUrl: process.env.NX_GRPC_HOST || "https://grpc-web.next.streamlayer.io:443",
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      interceptors: this.interceptors,
+      useBinaryFormat: true
+    });
+  }
+  // use shared request params, based on Atom, each new Atom will create new subscription
+  // mutate Atom, subscription automatically reconnect  with new params
+  // if headers changed, reconnect subscription with new headers automatically
+  addSubscription = (method, params, options) => {
+    const currentSubscription = this.subscriptions.get(params);
+    if (currentSubscription) {
+      return currentSubscription;
+    }
+    const subscription = new ServerStreamSubscription(this.$headers, method, params, options);
+    this.subscriptions.set(params, subscription);
+    return subscription;
+  };
+  removeSubscription = (subscription) => {
+    subscription.disconnect();
+    this.subscriptions.delete(subscription.params);
+  };
+  // cleanup subscriptions
+  disconnect = () => {
+    for (const [name, subscription] of this.subscriptions) {
+      subscription.disconnect();
+      this.subscriptions.delete(name);
+    }
+  };
+  registerInterceptor = (interceptor) => {
+    this.interceptors.push(interceptor);
+  };
+  removeInterceptor = (interceptor) => {
+    this.interceptors = this.interceptors.filter((i) => i !== interceptor);
+  };
+  getClient = (service) => {
+    const serviceName = service.typeName;
+    if (this.clients.has(serviceName)) {
+      return this.clients.get(serviceName);
+    }
+    const client = createPromiseClient2(service, this.transport);
+    this.clients.set(serviceName, client);
+    return client;
+  };
+  getCallbackClient = (service) => {
+    const serviceName = service.typeName;
+    if (this.callbackClients.has(serviceName)) {
+      return this.callbackClients.get(serviceName);
+    }
+    const client = createCallbackClient(service, this.transport);
+    this.callbackClients.set(serviceName, client);
+    return client;
+  };
+  // create unary client, used for query request
+  createPromiseClient = (service, { params = [], method }) => {
+    const client = this.getClient(service);
+    const methodName = service.methods[method].name;
+    const queryKey = [
+      service.typeName,
+      methodName.charAt(0).toLowerCase() + methodName.slice(1),
+      ...Array.isArray(params) ? params : [params]
+    ];
+    const queryKeyWithoutParams = [service.typeName, methodName.charAt(0).toLowerCase() + methodName.slice(1)];
+    return { client, queryKey, queryKeyStr: queryKeyWithoutParams.join("") };
+  };
+  // create callback client, used for server stream subscriptions
+  createCallbackClient = (service) => {
+    const client = this.getCallbackClient(service);
+    return { client };
+  };
+  setSdkKey = (sdkKey) => {
+    this.$headers.setValue("sdk", sdkKey);
+  };
+  setAuth = (token) => {
+    this.$headers.setValue("authorization", token);
+  };
+  setHeader = (name, value) => this.$headers.setValue(name, value);
+  getHeader = (name) => this.$headers.getValue(name);
+  getHeaders = () => this.$headers.getValues();
+  initInterceptors = () => {
+    if (this.interceptors.length !== 0) {
+      return;
+    }
+    const auth = (next) => async (req) => {
+      const headers = this.$headers.getValues();
+      for (const header in headers) {
+        req.header.set(header, headers[header]);
+      }
+      try {
+        return await next(req);
+      } catch (err) {
+        console.log({ err, req }, "catch err");
+        throw err;
+      }
+    };
+    this.interceptors.push(auth);
+    this.interceptors.push(__GRPC_DEVTOOLS_EXTENSION__());
+  };
+};
+
+// packages/sdk-web-api/src/grpc/queries/index.ts
+var queries_exports = {};
+__export(queries_exports, {
+  $bypassLogin: () => $bypassLogin,
+  $organizationAdvertising: () => $organizationAdvertising,
+  $organizationSettings: () => $organizationSettings,
+  $retrieveEventId: () => $retrieveEventId,
+  $streamSettings: () => $streamSettings,
+  $user: () => $user,
+  $userSettings: () => $userSettings,
+  bypassAuth: () => bypassAuth,
+  register: () => register
+});
+
+// packages/sdk-web-api/src/grpc/queries/event.ts
+import { Events } from "@streamlayer/sl-eslib/sports/events/events_connect";
+import { Client } from "@streamlayer/sl-eslib/sdkSettings/client/client_connect";
+var $retrieveEventId = ($providerStreamId, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(Events, {
+    method: "retrieveEventId",
+    params: [$providerStreamId]
+  });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: async (_, __, id) => {
+      if (!id || typeof id !== "string") {
+        return "";
+      }
+      try {
+        const res = await client.retrieveEventId({
+          id
+        });
+        return res.data?.id || "";
+      } catch (err) {
+        return "";
+      }
+    }
+  });
+};
+var $streamSettings = (slStreamId, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(Client, { method: "getStream", params: [slStreamId] });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: async (_, __, id) => {
+      if (!id) {
+        return void 0;
+      }
+      const res = await client.getStream({
+        id
+        // we are sure that id is a string
+      });
+      return res.data?.attributes;
+    }
+  });
+};
+
+// packages/sdk-web-api/src/grpc/queries/organization.ts
+import { Client as Client3 } from "@streamlayer/sl-eslib/sdkSettings/client/client_connect";
+
+// packages/sdk-web-api/src/grpc/queries/user.ts
+import { Users as Users2 } from "@streamlayer/sl-eslib/users/users_connect";
+import { Client as Client2 } from "@streamlayer/sl-eslib/sdkSettings/client/client_connect";
+var $user = ($userToken, transport2) => {
+  const { queryKey, client } = transport2.createPromiseClient(Users2, { method: "me", params: [$userToken] });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: () => client.me({})
+  });
+};
+var $bypassLogin = (transport2) => {
+  const { client, queryKeyStr } = transport2.createPromiseClient(Users2, { method: "bypassAuth" });
+  return transport2.nanoquery.createMutatorStore(
+    async ({ data: { userKey, schema, init }, getCacheUpdater }) => {
+      const [updateCache] = getCacheUpdater(queryKeyStr);
+      const user = await client.bypassAuth({ userKey, schema, init });
+      updateCache(user);
+      return user;
+    }
+  );
+};
+var bypassAuth = (transport2, params) => {
+  const { client } = transport2.createPromiseClient(Users2, { method: "bypassAuth" });
+  return client.bypassAuth(params);
+};
+var $userSettings = ($userToken, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(Client2, { method: "get", params: [$userToken] });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: async () => {
+      const data = await client.get({});
+      return data.data?.attributes;
+    }
+  });
+};
+var register = (transport2, phone) => {
+  const { client } = transport2.createPromiseClient(Users2, { method: "register" });
+  return client.register({ id: phone });
+};
+
+// packages/sdk-web-api/src/grpc/queries/organization.ts
+var $organizationSettings = ($enabled, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(Client3, { method: "getOrganization", params: [$enabled] });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: async () => {
+      const res = await client.getOrganization({});
+      return res.data ? {
+        ...res.data.attributes,
+        id: res.data.id
+      } : void 0;
+    }
+  });
+};
+var $organizationAdvertising = ($enabled, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(Client3, {
+    method: "getOrganizationAdvertising",
+    params: [$enabled]
+  });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: async () => {
+      const res = await client.getOrganizationAdvertising({});
+      return res.data?.attributes;
+    }
+  });
+};
+
+// packages/sdk-web-api/src/index.ts
+var transport = (instance, opts, done) => {
+  instance.transport = new Transport();
+  instance.transport.setSdkKey(opts.sdkKey);
+  done();
+};
+
+// packages/sdk-web-core/src/store/store.ts
+var initializeStore = (transport2) => {
+  const enabled = new SingleStore(createSingleStore(), "enabled");
+  const status = new SingleStore(createSingleStore("disabled" /* DISABLED */), "status");
+  const userKey = new SingleStore(createSingleStore(), "userKey");
+  const userToken = new SingleStore(createSingleStore(), "userToken");
+  userToken.listen((token) => {
+    if (token) {
+      localStorage.setItem("sl-user-token", token);
+    } else {
+      localStorage.removeItem("sl-user-token");
+    }
+  });
+  const providerStreamId = new SingleStore(createSingleStore(), "providerStreamId");
+  const slStreamId = new ApiStore(
+    queries_exports.$retrieveEventId(providerStreamId.getStore(), transport2),
+    "slStreamId",
+    (data) => data?.data
+  );
+  const user = new ApiStore(
+    queries_exports.$user(userToken.getStore(), transport2),
+    "user",
+    (data) => data?.data?.data?.id
+  );
+  const userSettings = new ApiStore(
+    queries_exports.$userSettings(userToken.getStore(), transport2),
+    "userSettings"
+  );
+  const streamSettings = new ApiStore(
+    queries_exports.$streamSettings(slStreamId.getAtomStore(), transport2),
+    "streamSettings"
+  );
+  slStreamId.getAtomStore().listen((eventId) => {
+    if (eventId === "" || eventId === void 0) {
+      streamSettings.getStore().mutate(void 0);
+    }
+  });
+  const organizationSettings = new ApiStore(
+    queries_exports.$organizationSettings(enabled.getStore(), transport2),
+    "organizationSettings",
+    (data) => data?.data?.id
+  );
+  const organizationAdvertising = new ApiStore(
+    queries_exports.$organizationAdvertising(organizationSettings.getAtomStore(), transport2),
+    "organizationAdvertising"
+  );
+  return {
+    enabled,
+    status,
+    providerStreamId,
+    slStreamId,
+    streamSettings,
+    user,
+    userKey,
+    userToken,
+    userSettings,
+    organizationSettings,
+    organizationAdvertising
+  };
+};
+var CoreStore = class extends AbstractStore {
+  stores;
+  constructor(transport2) {
+    const storesObj = initializeStore(transport2);
+    const store2 = mergeStores(storesObj);
+    super(store2, "core");
+    this.stores = storesObj;
+  }
+  getValue() {
+    throw new Error("Not implemented");
+  }
+  getValues() {
+    return this.stores;
+  }
+  setValue() {
+    throw new Error("Not implemented");
+  }
+  subscribe = (subscribes) => {
+    let storeKey;
+    for (storeKey in this.stores) {
+      const fn = subscribes[storeKey];
+      if (storeKey in subscribes && fn !== void 0) {
+        this.stores[storeKey].subscribe(subscribes[storeKey]);
+      }
+    }
+  };
+  unsubscribe = () => {
+    const store2 = this.getStore();
+    return store2.off();
+  };
+};
+
+// packages/sdk-web-core/src/index.ts
+var core = (instance, opts, done) => {
+  instance.sdk = /* @__PURE__ */ Object.create(null);
+  instance.sdk.initializeApp = async () => {
+    instance.storeSubscribe();
+    instance.stores.enabled.setValue("on");
+    instance.stores.status.setValue("initialization" /* INITIALIZATION */);
+    try {
+      const organizationSettings = await instance.stores.organizationSettings.getValue();
+      if (organizationSettings) {
+        instance.stores.status.setValue("ready" /* READY */);
+        return { enabled: !!organizationSettings };
+      }
+      instance.stores.status.setValue("failed" /* FAILED */);
+      return { err: "failed" };
+    } catch (err) {
+      instance.stores.enabled.setValue();
+      instance.stores.status.setValue("failed" /* FAILED */);
+      return { err: `${err}` };
+    }
+  };
+  instance.sdk.disableApp = () => {
+    instance.stores.enabled.setValue();
+    instance.stores.status.setValue("disabled" /* DISABLED */);
+    instance.storeUnsubscribe();
+  };
+  instance.sdk.createEventSession = (providerStreamId) => {
+    instance.stores.providerStreamId.setValue("");
+    instance.stores.providerStreamId.setValue(providerStreamId);
+  };
+  done();
+};
+
+// packages/feature-gamification/src/queries/index.ts
+import { atom as atom4 } from "nanostores";
+import { Feed } from "@streamlayer/sl-eslib/interactive/feed/interactive.feed_connect";
+
+// packages/feature-gamification/src/queries/leaderboard.ts
+import { Leaderboard } from "@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_connect";
+var $userSummary = ($eventId, $userId, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(Leaderboard, {
+    method: "summary",
+    params: [$eventId, $userId]
+  });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: async (_, __, eventId, userId) => {
+      const res = await client.summary({
+        eventId,
+        userId
+      });
+      return res.data?.attributes;
+    }
+  });
+};
+
+// packages/feature-gamification/src/queries/index.ts
+var $activeQuestion = (slStreamId, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(Feed, { method: "syncQuestion", params: [slStreamId] });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: async (_, __, id) => {
+      if (!id) {
+        return void 0;
+      }
+      const res = await client.syncQuestion({
+        filter: {
+          eventId: id
+        }
+      });
+      return res.data?.attributes;
+    }
+  });
+};
+var feedSubscription = ($slStreamId, transport2) => {
+  const { client } = transport2.createCallbackClient(Feed);
+  const params = atom4({ eventId: $slStreamId.get() || "", feedId: "" });
+  $slStreamId.subscribe((eventId = "") => {
+    params.set({ eventId, feedId: "" });
+  });
+  const subscription = transport2.addSubscription(
+    client.subscription,
+    params,
+    { name: "feedSubscription" }
+  );
+  return subscription;
+};
+var questionSubscription = (questionId, transport2) => {
+  const { client } = transport2.createCallbackClient(Feed);
+  const subscription = transport2.addSubscription(client.questionSubscription, { questionId }, { name: "questionSubscription" });
+  return subscription;
+};
+var $questionByUser = ($questionId, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(Feed, { method: "questionByUser", params: [$questionId] });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: async (_, __, questionId) => {
+      const res = await client.questionByUser({
+        questionId
+      });
+      return res.data?.attributes?.question;
+    }
+  });
+};
+var $pickHistory = (slStreamId, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(Feed, { method: "pickHistory", params: [slStreamId] });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: async (_, __, eventId) => {
+      if (!eventId) {
+        return void 0;
+      }
+      const res = await client.pickHistory({
+        eventId
+      });
+      return res.data?.map(({ attributes }) => attributes);
+    }
+  });
+};
+
+// packages/feature-gamification/src/queries/actions.ts
+import { Feed as Feed2 } from "@streamlayer/sl-eslib/interactive/feed/interactive.feed_connect";
+var submitAnswer = (transport2, data) => {
+  const { client } = transport2.createPromiseClient(Feed2, { method: "submitAnswer" });
+  return client.submitAnswer({ data });
+};
+var submitInplay = (transport2, eventId) => {
+  const { client } = transport2.createPromiseClient(Feed2, { method: "submitInplay" });
+  return client.submitInplay({ data: { eventId: +eventId } });
+};
+var skipQuestion = (transport2, questionId) => {
+  const { client } = transport2.createPromiseClient(Feed2, { method: "skipQuestion" });
+  return client.skipQuestion({ data: { id: questionId } });
+};
+
+// packages/feature-gamification/src/index.ts
+var Gamification = class extends AbstractFeature {
+  // user statistics (leaderboard panel)
+  userSummary;
+  // questions list (pick history)
+  questions;
+  // pinned leaderboard id
+  leaderboardId;
+  // sl event id
+  slStreamId;
+  // current user id
+  userId;
+  organizationId;
+  // opened question, using to download statistics
+  openedQuestionId;
+  // opened question statistics
+  openedQuestion;
+  // last active question in feed
+  activeQuestionId;
+  // moderation id
+  moderationId;
+  // feed id (deprecated?)
+  feedId;
+  // pinned leaderboard id
+  onbordingComplete;
+  notifications;
+  transport;
+  constructor(config, source, instance) {
+    super(config, source);
+    this.leaderboardId = new SingleStore(
+      createSingleStore(this.settings.getValue("pinnedLeaderboardId")),
+      "pinnedLeaderboardId"
+    ).getStore();
+    this.slStreamId = instance.stores.slStreamId.getAtomStore();
+    this.userId = instance.stores.user.getAtomStore();
+    this.organizationId = instance.stores.organizationSettings.getAtomStore();
+    this.moderationId = new SingleStore(createSingleStore(), "moderationId").getStore();
+    this.feedId = new SingleStore(createSingleStore(), "feedId").getStore();
+    this.onbordingComplete = new SingleStore(createSingleStore(false), "onbordingComplete").getStore();
+    this.openedQuestionId = new SingleStore(createSingleStore(), "openedQuestionId").getStore();
+    this.notifications = instance.notifications;
+    this.transport = instance.transport;
+    if (!this.userId.get()) {
+      this.userId.subscribe((userId) => {
+        if (userId) {
+          this.connect(instance.transport);
+          const cached = localStorage.getItem(`sl-onbording:${userId}:${this.slStreamId.get()}`);
+          this.onbordingComplete.set(!!cached);
+        }
+      });
+    } else {
+      this.connect(instance.transport);
+      const userId = this.userId.get();
+      const cached = localStorage.getItem(`sl-onbording:${userId}:${this.slStreamId.get()}`);
+      this.onbordingComplete.set(!!cached);
+    }
+  }
+  getCurrentSessionIdPrefix = (opts) => {
+    const eventId = opts.eventId || this.slStreamId.get();
+    const userId = opts.userId || this.userId.get();
+    const organizationId = opts.organizationId || this.organizationId.get();
+    return `${organizationId}:${userId}:${eventId}:${opts.prefix || ""}`;
+  };
+  connect = (transport2) => {
+    this.userSummary = new ApiStore(
+      $userSummary(this.slStreamId, this.userId, transport2),
+      "gamification:userSummary"
+    );
+    this.questions = new ApiStore(
+      $pickHistory(this.slStreamId, transport2),
+      "gamification:questions"
+    );
+    this.activeQuestionId = new ApiStore(
+      $activeQuestion(this.slStreamId, transport2),
+      "gamification:activeQuestionId"
+    );
+    this.openedQuestion = new ApiStore(
+      $questionByUser(this.openedQuestionId, transport2),
+      "gamification:activeQuestionId"
+    );
+    let questionSubscription2 = void 0;
+    this.openedQuestionId.listen((questionId) => {
+      if (questionId) {
+        questionSubscription2 = questionSubscription(questionId, transport2);
+        questionSubscription2.addListener(
+          "feed-subscription-opened-question",
+          (response) => {
+            window.requestAnimationFrame(() => {
+              this.openedQuestion?.getStore().mutate(response.data?.attributes?.question);
+              this.openedQuestion?.getStore().invalidate();
+              this.userSummary?.getStore().invalidate();
+            });
+          }
+        );
+        questionSubscription2.connect();
+      } else {
+        console.log("cleanup on close question");
+        this.openedQuestion?.getStore().mutate(void 0);
+        if (questionSubscription2 !== void 0) {
+          transport2.removeSubscription(questionSubscription2);
+        }
+      }
+    });
+    this.activeQuestionId?.listen((question) => {
+      if (question?.data?.notification?.title) {
+        if (question.data.question.status === QuestionStatus.ACTIVE) {
+          this.notifications.add({
+            id: this.getCurrentSessionIdPrefix({ prefix: `notification-id:${question.data.question.id}` }),
+            data: question.data
+          });
+        }
+      }
+    });
+    const feedSubscription2 = feedSubscription(this.slStreamId, transport2);
+    feedSubscription2.addListener("feed-subscription-active-question", (response) => {
+      window.requestAnimationFrame(() => {
+        const $activeQuestionId = this.activeQuestionId?.getStore();
+        if ($activeQuestionId) {
+          $activeQuestionId.mutate(response.data?.attributes);
+        }
+      });
+    });
+    feedSubscription2.addListener("feed-subscription-questions-list", () => {
+      window.requestAnimationFrame(() => {
+        this.questions?.invalidate();
+      });
+    });
+  };
+  // onboarding
+  submitInplay = async () => {
+    const eventId = this.slStreamId.get();
+    if (eventId) {
+      await submitInplay(this.transport, eventId);
+      this.onbordingComplete.set(true);
+      localStorage.setItem(`sl-onbording:${this.userId.get()}:${eventId}`, "true");
+    }
+  };
+  submitAnswer = async (questionId, answerId) => {
+    await submitAnswer(this.transport, { questionId, answerId });
+    this.questions?.invalidate();
+  };
+  skipQuestion = async (questionId) => {
+    await skipQuestion(this.transport, questionId);
+    this.questions?.invalidate();
+  };
+  openQuestion = (questionId) => {
+    this.openedQuestionId.set(questionId);
+    this.notifications.markAsViewed(this.getCurrentSessionIdPrefix({ prefix: `notification-id:${questionId}` }));
+  };
+  closeQuestion = () => {
+    this.notifications.markAsViewed(
+      this.getCurrentSessionIdPrefix({ prefix: `notification-id:${this.openedQuestionId.get()}` })
+    );
+    window.requestAnimationFrame(() => {
+      this.openedQuestionId.set(void 0);
+    });
+  };
+};
+
+// packages/sdk-web-features/src/index.ts
+var Feature = class extends AbstractFeature {
+};
+var initFeature = (overlay, source, instance) => {
+  if (overlay.type === SdkOverlayType.GAMES) {
+    return new Gamification(overlay, source, instance);
+  }
+  return new Feature(overlay, source);
+};
+var features = (instance, opts, done) => {
+  instance.features = /* @__PURE__ */ new Map();
+  instance.sdk.getFeatures = () => instance.features;
+  instance.initFeature = (overlay, source = "ORGANIZATION" /* ORGANIZATION */) => {
+    const feature = initFeature(overlay, source, instance);
+    instance.features.set(overlay.name, feature);
+  };
+  instance.updateFeature = (overlay, source) => {
+    instance.features.get(overlay.name)?.update(overlay, source);
+  };
+  instance.destroyFeature = (overlay) => {
+    instance.features.delete(overlay.name);
+  };
+  instance.reinitializeFeatures = async () => {
+    const organizationSettings = await instance.stores.organizationSettings.getValue();
+    instance.features.clear();
+    for (const overlay of organizationSettings?.overlays || []) {
+      instance.initFeature(overlay, "ORGANIZATION" /* ORGANIZATION */);
+    }
+  };
+  instance.stores.providerStreamId.listen((eventId) => {
+    if (!eventId) {
+      void instance.reinitializeFeatures();
+    }
+  });
+  done();
+};
+
+// packages/sdk-web/src/index.ts
+import avvio from "avvio";
+
+// packages/sdk-web-core/src/store/index.ts
+var store = (instance, opts, done) => {
+  instance.store = new CoreStore(instance.transport);
+  instance.stores = instance.store.getValues();
+  instance.sdk.sdkStore = instance.store.getStore();
+  instance.storeSubscribe = () => {
+    const processSettings = (source, settings) => {
+      if (!settings?.overlays)
+        return;
+      if (source === "STREAM" /* STREAM */) {
+        instance.features.clear();
+      }
+      for (const overlay of settings.overlays) {
+        const featureName = overlay.name;
+        if (!instance.features.has(featureName)) {
+          instance.initFeature(overlay, source);
+        } else {
+          instance.updateFeature(overlay, source);
+        }
+      }
+    };
+    const subscribes = {
+      /**
+       * During the initial SDK initialization, it's imperative to initialize features first,
+       * followed by their direct subscriptions to store fields.
+       * This section is currently in development, and it's
+       * essential to implement checks to determine whether a feature
+       * has already been initialized. If it has, events related to
+       * that feature should be skipped. Conversely, if a feature is
+       * missing in the new settings, it should be deinitialized.
+       */
+      organizationSettings: (orgSettings) => {
+        if (orgSettings.data) {
+          try {
+            processSettings("ORGANIZATION" /* ORGANIZATION */, orgSettings.data);
+          } catch (err) {
+            console.log(err);
+          }
+        }
+      },
+      streamSettings: (streamSettings) => {
+        if (streamSettings.data) {
+          try {
+            processSettings("STREAM" /* STREAM */, streamSettings.data);
+          } catch (err) {
+            console.log(err);
+          }
+        }
+      }
+    };
+    instance.store.subscribe(subscribes);
+  };
+  instance.storeUnsubscribe = () => {
+    instance.store.unsubscribe();
+  };
+  done();
+};
+
+// packages/sdk-web-core/src/auth/bypass/index.ts
+var BypassAuth = class extends AbstractAuthenticationProvider {
+  $coreStore;
+  transport;
+  $bypassLogin;
+  constructor(store2, transport2) {
+    super();
+    this.$coreStore = store2;
+    this.transport = transport2;
+    this.$bypassLogin = queries_exports.$bypassLogin(this.transport);
+    this.subscribe();
+  }
+  me = async () => {
+    const res = await this.$coreStore.getValues().user.getValue();
+    return res?.data;
+  };
+  login = async (schema, userKey) => {
+    this.$coreStore.getValues().userKey.setValue(userKey);
+    await this.$bypassLogin.mutate({ schema, userKey, init: false });
+    return this.me();
+  };
+  isAuthenticated = () => {
+    return this.me();
+  };
+  logout = () => {
+    this.$coreStore.getValues().user.setValue();
+    this.$coreStore.getValues().userKey.setValue();
+    this.$coreStore.getValues().userToken.setValue();
+    this.transport.setAuth("");
+  };
+  /**
+   * subscribe to user store and set auth header to the Transport on user update
+   */
+  subscribe = () => {
+    this.$bypassLogin.subscribe((user, key) => {
+      if (key === "data") {
+        this.transport.setAuth(user?.data?.meta?.jwt);
+        this.$coreStore.getValues().userToken.setValue(user?.data?.meta?.jwt);
+      }
+    });
+  };
+};
+
+// packages/sdk-web-core/src/auth/index.ts
+var bypass = async (instance, opts, done) => {
+  instance.auth = new BypassAuth(instance.store, instance.transport);
+  const prevUserSchema = localStorage.getItem("sl-user-schema");
+  const prevUserToken = localStorage.getItem("sl-user-token");
+  if (prevUserSchema && prevUserToken) {
+    console.log("try to login prev user");
+    await instance.auth.login(prevUserSchema, prevUserToken);
+  }
+  instance.sdk.authorizationBypass = async (schema, userKey) => {
+    await instance.auth.login(schema, userKey);
+    localStorage.setItem("sl-user-schema", schema);
+  };
+  instance.sdk.logout = () => {
+    instance.auth.logout();
+  };
+  instance.sdk.getUserStore = () => {
+    return instance.stores.user.getStore();
+  };
+  instance.sdk.isUserAuthorized = () => {
+    return instance.auth.isAuthenticated();
+  };
+  done();
+};
+
+// packages/sdk-web-core/src/notifications/notifications.ts
+var Notifications2 = class {
+  queue;
+  constructor() {
+    this.queue = new SingleStore(createSingleStore([]), "notifications");
+  }
+  add = (notification) => {
+    if (this.isNewNotify(notification.id)) {
+      this.queue.getStore().set([...this.queue.getValue() || [], notification]);
+    } else {
+      console.log("skip notification:", notification);
+    }
+  };
+  getQueueStore = () => {
+    return this.queue.getStore();
+  };
+  isNewNotify = (id) => {
+    const exist = localStorage.getItem(`opened:${id}`);
+    return !exist;
+  };
+  markAsViewed = (id) => {
+    localStorage.setItem(`opened:${id}`, id);
+  };
+};
+
+// packages/sdk-web-core/src/notifications/index.ts
+var notifications = (instance, opts, done) => {
+  instance.notifications = new Notifications2();
+  instance.addNotification = instance.notifications.add;
+  instance.sdk.getNotificationsStore = () => instance.notifications.getQueueStore();
+  done();
+};
+
+// packages/sdk-web/src/index.ts
+function StreamLayer(sdkKey) {
+  const streamLayer = avvio(/* @__PURE__ */ Object.create(null), { autostart: false });
+  streamLayer.use(core);
+  streamLayer.use(transport, { sdkKey });
+  streamLayer.use(store);
+  streamLayer.use(bypass);
+  streamLayer.use(features);
+  streamLayer.use(notifications);
+  streamLayer.after(async (err, context, done) => {
+    if (err) {
+      throw err;
+    }
+    await context.sdk.initializeApp();
+    done();
+  });
+  streamLayer.onClose(() => {
+    console.log("close");
+  });
+  return streamLayer;
+}
+
+// packages/react/src/app/useStreamLayer.ts
+import { useState as useState4, useEffect as useEffect3 } from "react";
+window.instance = null;
+var useStreamLayer = (sdkKey, plugins) => {
+  const [sdk, setSdk] = useState4(null);
+  useEffect3(() => {
+    let ignore = false;
+    if (!sdkKey) {
+      throw new Error("sdk key should be provided");
+    }
+    const instance = StreamLayer(sdkKey);
+    if (plugins) {
+      for (const plugin of plugins) {
+        instance.use(plugin);
+      }
+    }
+    instance.ready().then((service) => {
+      if (!ignore) {
+        window.instance = service;
+        setSdk(service.sdk);
+      }
+    }).catch((err) => console.log(err));
+    return () => {
+      ignore = true;
+      instance.close(function(err) {
+        if (err)
+          throw err;
+      });
+    };
+  }, [sdkKey]);
+  return sdk;
+};
+
+// packages/react/src/app/provider.tsx
+import { jsx as jsx37 } from "@emotion/react/jsx-runtime";
+var StreamLayerContext3 = createContext({
+  status: 0 /* UNSET */
+});
+if (process.env.NODE_ENV !== "production") {
+  StreamLayerContext3.displayName = "StreamLayerProvider";
+}
+var StreamLayerProvider = ({
+  sdkKey,
+  plugins,
+  children
+}) => {
+  const streamLayer = useStreamLayer(sdkKey, plugins);
+  const value = useMemo2(() => {
+    if (!streamLayer) {
+      return { status: 1 /* CONNECTED */ };
+    }
+    return { sdk: streamLayer, status: 2 /* READY */ };
+  }, [streamLayer]);
+  return /* @__PURE__ */ jsx37(StreamLayerThemeProvider, { children: /* @__PURE__ */ jsx37(StreamLayerContext3.Provider, { value, children }) });
+};
+
+// packages/react/src/app/app.tsx
+import { useContext } from "react";
+import { jsx as jsx38 } from "@emotion/react/jsx-runtime";
+var useSDK = () => {
+  const { sdk } = useContext(StreamLayerContext3);
+  return sdk;
+};
+var StreamLayerSDKReact = () => {
+  const { sdk, status } = useContext(StreamLayerContext3);
+  if (status === 0 /* UNSET */) {
+    throw new Error("Wrap app in `StreamLayerProvider`");
+  }
+  if (status === 1 /* CONNECTED */) {
+    return /* @__PURE__ */ jsx38("div", { children: "wait" });
+  }
+  if (sdk === void 0) {
+    return /* @__PURE__ */ jsx38("div", { children: "sdk not initialized" });
+  }
+  return /* @__PURE__ */ jsx38(Demo, { sdk });
+};
+export {
+  StreamLayerProvider,
+  StreamLayerSDKReact,
+  useSDK,
+  useStreamLayer
+};