@streamlayer/react 0.2.9 → 0.2.11

package/main.cjs

@@ -0,0 +1,3111 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/react/src/main.tsx
+var main_exports = {};
+__export(main_exports, {
+  StreamLayerProvider: () => StreamLayerProvider,
+  StreamLayerSDKReact: () => StreamLayerSDKReact,
+  useSDK: () => useSDK,
+  useStreamLayer: () => useStreamLayer
+});
+module.exports = __toCommonJS(main_exports);
+
+// node_modules/.pnpm/@esbuild-plugins+node-globals-polyfill@0.2.3_esbuild@0.19.5/node_modules/@esbuild-plugins/node-globals-polyfill/process.js
+function defaultSetTimout() {
+  throw new Error("setTimeout has not been defined");
+}
+function defaultClearTimeout() {
+  throw new Error("clearTimeout has not been defined");
+}
+var cachedSetTimeout = defaultSetTimout;
+var cachedClearTimeout = defaultClearTimeout;
+if (typeof globalThis.setTimeout === "function") {
+  cachedSetTimeout = setTimeout;
+}
+if (typeof globalThis.clearTimeout === "function") {
+  cachedClearTimeout = clearTimeout;
+}
+function runTimeout(fun) {
+  if (cachedSetTimeout === setTimeout) {
+    return setTimeout(fun, 0);
+  }
+  if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
+    cachedSetTimeout = setTimeout;
+    return setTimeout(fun, 0);
+  }
+  try {
+    return cachedSetTimeout(fun, 0);
+  } catch (e) {
+    try {
+      return cachedSetTimeout.call(null, fun, 0);
+    } catch (e2) {
+      return cachedSetTimeout.call(this, fun, 0);
+    }
+  }
+}
+function runClearTimeout(marker) {
+  if (cachedClearTimeout === clearTimeout) {
+    return clearTimeout(marker);
+  }
+  if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
+    cachedClearTimeout = clearTimeout;
+    return clearTimeout(marker);
+  }
+  try {
+    return cachedClearTimeout(marker);
+  } catch (e) {
+    try {
+      return cachedClearTimeout.call(null, marker);
+    } catch (e2) {
+      return cachedClearTimeout.call(this, marker);
+    }
+  }
+}
+var queue = [];
+var draining = false;
+var currentQueue;
+var queueIndex = -1;
+function cleanUpNextTick() {
+  if (!draining || !currentQueue) {
+    return;
+  }
+  draining = false;
+  if (currentQueue.length) {
+    queue = currentQueue.concat(queue);
+  } else {
+    queueIndex = -1;
+  }
+  if (queue.length) {
+    drainQueue();
+  }
+}
+function drainQueue() {
+  if (draining) {
+    return;
+  }
+  var timeout = runTimeout(cleanUpNextTick);
+  draining = true;
+  var len = queue.length;
+  while (len) {
+    currentQueue = queue;
+    queue = [];
+    while (++queueIndex < len) {
+      if (currentQueue) {
+        currentQueue[queueIndex].run();
+      }
+    }
+    queueIndex = -1;
+    len = queue.length;
+  }
+  currentQueue = null;
+  draining = false;
+  runClearTimeout(timeout);
+}
+function nextTick(fun) {
+  var args = new Array(arguments.length - 1);
+  if (arguments.length > 1) {
+    for (var i = 1; i < arguments.length; i++) {
+      args[i - 1] = arguments[i];
+    }
+  }
+  queue.push(new Item(fun, args));
+  if (queue.length === 1 && !draining) {
+    runTimeout(drainQueue);
+  }
+}
+function Item(fun, array) {
+  this.fun = fun;
+  this.array = array;
+}
+Item.prototype.run = function() {
+  this.fun.apply(null, this.array);
+};
+var title = "browser";
+var platform = "browser";
+var browser = true;
+var env = {};
+var argv = [];
+var version = "";
+var versions = {};
+var release = {};
+var config = {};
+function noop() {
+}
+var on = noop;
+var addListener = noop;
+var once = noop;
+var off = noop;
+var removeListener = noop;
+var removeAllListeners = noop;
+var emit = noop;
+function binding(name) {
+  throw new Error("process.binding is not supported");
+}
+function cwd() {
+  return "/";
+}
+function chdir(dir) {
+  throw new Error("process.chdir is not supported");
+}
+function umask() {
+  return 0;
+}
+var performance = globalThis.performance || {};
+var performanceNow = performance.now || performance.mozNow || performance.msNow || performance.oNow || performance.webkitNow || function() {
+  return (/* @__PURE__ */ new Date()).getTime();
+};
+function hrtime(previousTimestamp) {
+  var clocktime = performanceNow.call(performance) * 1e-3;
+  var seconds = Math.floor(clocktime);
+  var nanoseconds = Math.floor(clocktime % 1 * 1e9);
+  if (previousTimestamp) {
+    seconds = seconds - previousTimestamp[0];
+    nanoseconds = nanoseconds - previousTimestamp[1];
+    if (nanoseconds < 0) {
+      seconds--;
+      nanoseconds += 1e9;
+    }
+  }
+  return [seconds, nanoseconds];
+}
+var startTime = /* @__PURE__ */ new Date();
+function uptime() {
+  var currentTime = /* @__PURE__ */ new Date();
+  var dif = currentTime - startTime;
+  return dif / 1e3;
+}
+var process = {
+  nextTick,
+  title,
+  browser,
+  env,
+  argv,
+  version,
+  versions,
+  on,
+  addListener,
+  once,
+  off,
+  removeListener,
+  removeAllListeners,
+  emit,
+  binding,
+  cwd,
+  chdir,
+  umask,
+  hrtime,
+  platform,
+  release,
+  config,
+  uptime
+};
+var defines = {};
+Object.keys(defines).forEach((key) => {
+  const segs = key.split(".");
+  let target = process;
+  for (let i = 0; i < segs.length; i++) {
+    const seg = segs[i];
+    if (i === segs.length - 1) {
+      target[seg] = defines[key];
+    } else {
+      target = target[seg] || (target[seg] = {});
+    }
+  }
+});
+
+// packages/react-ui/src/lib/gamification/inapp/index.tsx
+var import_react = require("react");
+
+// packages/react-ui/src/assets/icons/icon-exit.svg
+var icon_exit_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A  <rect width="24" height="24" rx="12" fill="white" fill-opacity="0.1"/>%0A  <rect x="8.25" y="7" width="12.3744" height="1.76777" rx="0.883884" transform="rotate(45 8.25 7)" fill="white"/>%0A  <rect x="7" y="15.75" width="12.3744" height="1.76777" rx="0.883884" transform="rotate(-45 7 15.75)" fill="white"/>%0A</svg>%0A';
+
+// packages/react-ui/src/lib/gamification/inapp/styles.tsx
+var import_styled = __toESM(require("@emotion/styled"), 1);
+var Container = import_styled.default.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 = import_styled.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 14px;
+  background-color: ${(props) => props.theme.COLORS.BLUE_PRIMARY};
+`;
+var Icon = import_styled.default.img`
+  max-width: 40px;
+  max-height: 40px;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+`;
+var Content = import_styled.default.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+`;
+var TitleWrap = import_styled.default.div`
+  padding-left: 20px;
+  padding-right: 5px;
+  font-weight: 700;
+  font-size: 14px;
+  flex: 1;
+`;
+var Title = import_styled.default.div`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var CloseBtnWrap = import_styled.default.div`
+  padding: 20px;
+`;
+var CloseBtn = import_styled.default.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var CloseIcon = import_styled.default.img`
+  width: 24px;
+  height: 24px;
+`;
+
+// packages/react-ui/src/lib/gamification/inapp/index.tsx
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+var InApp = ({ title: title2 = "", icon, color, openVoiting, closeInApp }) => {
+  const _closeInApp = (0, import_react.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      closeInApp();
+    },
+    [closeInApp]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { onClick: openVoiting, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconWrap, { style: color ? { backgroundColor: color } : {}, children: !!icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { alt: "in-app-icon", src: icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWrap, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, { id: "in-app-title", children: title2 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseBtnWrap, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseBtn, { onClick: _closeInApp, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, { alt: "close-in-app-icon", src: icon_exit_default }) }) })
+    ] })
+  ] });
+};
+
+// packages/react-ui/src/lib/gamification/login/index.tsx
+var import_react3 = require("react");
+var import_react_phone_number_input = __toESM(require("react-phone-number-input"), 1);
+var import_style = require("react-phone-number-input/style.css");
+var import_react_digit_input = __toESM(require("react-digit-input"), 1);
+
+// packages/react-ui/src/utils/login.ts
+var import_connect_web = require("@bufbuild/connect-web");
+var import_connect = require("@connectrpc/connect");
+var import_users_connect = require("@streamlayer/sl-eslib/users/users_connect");
+var requestLoginCode = async (phone) => {
+  const transport2 = (0, import_connect_web.createGrpcWebTransport)({
+    baseUrl: process.env.NX_GRPC_HOST || "https://grpc-web.next.streamlayer.io:443"
+  });
+  const userClient = (0, import_connect.createPromiseClient)(import_users_connect.Users, transport2);
+  await userClient.requestPassword({ id: phone });
+  return true;
+};
+var register = async (phone) => {
+  const transport2 = (0, import_connect_web.createGrpcWebTransport)({
+    baseUrl: process.env.NX_GRPC_HOST || "https://grpc-web.next.streamlayer.io:443"
+  });
+  const userClient = (0, import_connect.createPromiseClient)(import_users_connect.Users, transport2);
+  await userClient.register({ id: phone });
+  return true;
+};
+var login = async (phone, code) => {
+  const transport2 = (0, import_connect_web.createGrpcWebTransport)({
+    baseUrl: process.env.NX_GRPC_HOST || "https://grpc-web.next.streamlayer.io:443"
+  });
+  const userClient = (0, import_connect.createPromiseClient)(import_users_connect.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
+var import_react2 = require("react");
+var import_react_countdown_circle_timer = require("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
+var import_styled2 = __toESM(require("@emotion/styled"), 1);
+var RemainingTime = import_styled2.default.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
+var import_jsx_runtime2 = require("@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__ */ (0, import_jsx_runtime2.jsx)(RemainingTime, { remainingTime, children: remainingTime });
+  (0, import_react2.useEffect)(() => {
+    setTimeToExpire(false);
+  }, [setTimeToExpire]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_countdown_circle_timer.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
+var import_styled3 = __toESM(require("@emotion/styled"), 1);
+var Panel = import_styled3.default.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 = import_styled3.default.form`
+  display: flex;
+  margin: auto;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+`;
+var FormTitle = import_styled3.default.div`
+  margin-bottom: 20px;
+  font-size: 18px;
+`;
+var FormDescription = import_styled3.default.div`
+  margin-bottom: 10px;
+  font-size: 14px;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+var FormSubmit = import_styled3.default.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 = import_styled3.default.div`
+  input {
+    font-size: 20px;
+    background: transparent;
+    color: #fff;
+    border: none;
+    outline: none;
+  }
+
+  margin-bottom: 40px;
+  border-bottom: 1px solid white;
+`;
+var Digits = import_styled3.default.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
+var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
+var Login = ({ login: login2, anonymousLogin }) => {
+  const [phoneInput, setPhoneInput] = (0, import_react3.useState)("");
+  const [phone, setPhone] = (0, import_react3.useState)("");
+  const [code, setCode] = (0, import_react3.useState)("");
+  const digits = (0, import_react_digit_input.default)({
+    acceptedCharacters: /^[0-9]$/,
+    length: 4,
+    value: code,
+    onChange: setCode
+  });
+  const requestCode = async (e) => {
+    e.preventDefault();
+    try {
+      const parsed = phoneInput.replaceAll("+", "");
+      try {
+        await requestLoginCode(parsed);
+      } catch (err) {
+        await register(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__ */ (0, import_jsx_runtime3.jsxs)(Panel, { children: [
+    !phone && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Form, { onSubmit: requestCode, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormTitle, { children: "Enter your phone number" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormDescription, { children: "Enter your phone up for number to log in or sign an account." }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormInputContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_phone_number_input.default, { value: phoneInput, onChange: (val) => setPhoneInput(`${val}`) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormSubmit, { disabled: !(0, import_react_phone_number_input.isValidPhoneNumber)(phoneInput), type: "submit", children: "request code" })
+      ] }),
+      anonymousLogin && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormSubmit, { style: { display: "block", margin: "auto" }, disabled: true, onClick: anonymousLogin, children: "anonymous login" })
+    ] }),
+    phone && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Form, { onSubmit: loginByCode, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormTitle, { children: "Enter Verification Code" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(FormDescription, { children: [
+        "Please enter the verification code ",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("br", {}),
+        "sent to ",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("b", { children: (0, import_react_phone_number_input.formatPhoneNumberIntl)(phoneInput) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Digits, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { autoFocus: true, inputMode: "decimal", ...digits[0] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { inputMode: "decimal", ...digits[1] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { inputMode: "decimal", ...digits[2] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { inputMode: "decimal", ...digits[3] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormSubmit, { disabled: code.length !== 4, type: "submit", children: "login" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(FormDescription, { children: [
+        "Didn't get 59 the code? ",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("br", {}),
+        "Resend Code in",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Timer, { duration: 30, setTimeToExpire: () => {
+        }, isPlaying: true })
+      ] })
+    ] })
+  ] });
+};
+
+// packages/react-ui/src/lib/gamification/onboarding/styles.tsx
+var import_styled4 = __toESM(require("@emotion/styled"), 1);
+var Container2 = import_styled4.default.div`
+  box-sizing: border-box;
+  display: flex;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`;
+var Content2 = import_styled4.default.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+`;
+var Description = import_styled4.default.div`
+  font-size: 22px;
+  font-weight: 300;
+  margin-bottom: 4px;
+`;
+var Title2 = import_styled4.default.div`
+  font-size: 26px;
+  font-weight: 700;
+`;
+var OnboardingActionBtn = import_styled4.default.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
+var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
+var Onboarding = ({ action }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Container2, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Content2, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Description, { children: "Welcome to the" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Title2, { children: "Inplay Game" })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OnboardingActionBtn, { onClick: action, children: "Let\u2019s play" })
+] });
+
+// packages/sdk-web-types/src/sl-types.ts
+var import_interactive = require("@streamlayer/sl-eslib/interactive/interactive.common_pb");
+var import_interactive2 = require("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb");
+var import_sdkSettings = require("@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb");
+
+// packages/react-ui/src/assets/icons/icon-poll.svg
+var icon_poll_default = 'data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Poll">%0A<path id="Notification/Icon/Poll" fill-rule="evenodd" clip-rule="evenodd" d="M9.7778 1.68421V5.05263H13.3333C13.8243 5.05263 14.2222 4.67561 14.2222 4.21053V2.52632C14.2222 2.06123 13.8243 1.68421 13.3333 1.68421H9.7778ZM2.66667 0C1.19391 0 0 1.13107 0 2.52632V4.21053C0 5.60577 1.19391 6.73684 2.66667 6.73684H13.3333C14.8061 6.73684 16 5.60577 16 4.21053V2.52632C16 1.13107 14.8061 0 13.3333 0H2.66667ZM4.44446 10.9473H13.3333C13.8243 10.9473 14.2222 11.3243 14.2222 11.7894V13.4736C14.2222 13.9387 13.8243 14.3157 13.3333 14.3157H4.44446V10.9473ZM0 11.7894C0 10.3942 1.19391 9.2631 2.66667 9.2631H13.3333C14.8061 9.2631 16 10.3942 16 11.7894V13.4736C16 14.8689 14.8061 15.9999 13.3333 15.9999H2.66667C1.19391 15.9999 0 14.8689 0 13.4736V11.7894Z" fill="white" fill-opacity="0.5"/>%0A</g>%0A</svg>%0A';
+
+// packages/react-ui/src/assets/icons/icon-prediction.svg
+var icon_prediction_default = 'data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Icon/Notification/Prediciton">%0A<path id="Icon/Prediction" fill-rule="evenodd" clip-rule="evenodd" d="M16 7.00522C16 7.00522 9.20048 6.81607 9.20048 0C9.20048 6.36168 3.27729 6.95056 2.48756 7.00078L2.40094 7.00522C2.40094 7.00522 9.20048 7.19435 9.20048 14.0104C9.20048 7.64877 15.1234 7.05989 15.9131 7.00964L16 7.00522ZM6.97382 12.5652C6.97382 12.5652 3.48691 12.4724 3.48691 9.13033C3.48691 12.2496 0.449402 12.5384 0.0444186 12.563L0 12.5652C0 12.5652 3.48691 12.6579 3.48691 16C3.48691 12.8807 6.52429 12.592 6.92927 12.5673L6.97382 12.5652Z" fill="white" fill-opacity="0.5"/>%0A</g>%0A</svg>%0A';
+
+// packages/react-ui/src/assets/icons/icon-trivia.svg
+var icon_trivia_default = 'data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Icon/Notification/Trivia">%0A<path id="Notification/Icon/Trivia" fill-rule="evenodd" clip-rule="evenodd" d="M2.01663 1.3808C0.739913 1.55586 -0.153153 2.73276 0.021912 4.00948L1.3808 13.9196C1.55586 15.1963 2.73276 16.0894 4.00948 15.9143L13.9196 14.5554C15.1963 14.3803 16.0894 13.2034 15.9143 11.9267L14.5554 2.01663C14.3803 0.739913 13.2034 -0.153153 11.9267 0.021912L2.01663 1.3808ZM9.59613 3.788C9.11431 3.46991 8.47813 3.30151 7.7566 3.30151C7.54377 3.30151 7.32625 3.31671 7.10872 3.34478C6.38836 3.44067 5.68901 3.79034 5.18965 4.30138C4.68445 4.82062 4.4377 5.45563 4.51722 6.04151C4.57452 6.4742 4.90078 6.7537 5.34635 6.7537C5.39429 6.7537 5.44341 6.7502 5.49136 6.74435C6.08778 6.66483 6.21642 6.25436 6.34036 5.85675L6.34045 5.85648C6.48192 5.40401 6.61534 4.97731 7.38585 4.87444C7.46537 4.86391 7.54138 4.85806 7.61506 4.85806C8.16939 4.85806 8.51436 5.15042 8.58454 5.68252C8.65353 6.20293 8.24307 6.61807 7.80684 7.0566L7.80393 7.05954C7.31582 7.55231 6.7639 8.1095 6.86895 8.90083C6.89585 9.10548 6.9859 9.29493 7.12272 9.43644C7.27826 9.599 7.4829 9.68436 7.71331 9.68436C7.75541 9.68436 7.79868 9.68203 7.84311 9.67618C8.46691 9.59324 8.55162 9.23139 8.63338 8.8821L8.63365 8.88097L8.63661 8.86859C8.66723 8.7403 8.69877 8.60813 8.75995 8.48804C8.84649 8.31613 9.06283 8.11265 9.31428 7.87875C9.9142 7.31858 10.734 6.55143 10.582 5.41589C10.4872 4.70603 10.1551 4.15757 9.59611 3.78802L9.59613 3.788ZM8.11605 10.28C8.06927 10.28 8.02132 10.2836 7.97454 10.2894C7.38396 10.3689 6.96765 10.9127 7.04599 11.5033C7.11733 12.0377 7.57808 12.4412 8.1172 12.4412C8.16397 12.4412 8.21192 12.4377 8.25987 12.4318C8.85045 12.3523 9.2656 11.8085 9.18842 11.2179C9.11591 10.6823 8.65517 10.28 8.11605 10.28Z" fill="white" fill-opacity="0.5"/>%0A</g>%0A</svg>%0A';
+
+// packages/react-ui/src/assets/icons/icon-check-green.svg
+var icon_check_green_default = 'data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Check">%0A<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="%2300BD60"/>%0A</g>%0A</svg>%0A';
+
+// packages/react-ui/src/assets/icons/icon-cross.svg
+var icon_cross_default = 'data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Group 465">%0A<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="%239e0a1f"/>%0A<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="%239e0a1f"/>%0A</g>%0A</svg>%0A';
+
+// packages/react-ui/src/assets/icons/icon-chevron.svg
+var icon_chevron_default = 'data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Chevron">%0A<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="%23FFFFFF"/>%0A</g>%0A</svg>%0A';
+
+// packages/react-ui/src/lib/gamification/question/styles.tsx
+var import_styled5 = __toESM(require("@emotion/styled"), 1);
+var Panel2 = import_styled5.default.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 = import_styled5.default.div`
+  padding-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+var QuestionTypeIcon = import_styled5.default.img`
+  width: 16px;
+  height: 16px;
+`;
+var QuestionContent = import_styled5.default.div`
+  font-weight: 700;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+var QuestionTypeLabel = import_styled5.default.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 = import_styled5.default.div`
+  color: ${(props) => props.theme.COLORS.WHITE};
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var QuestionActionTitle = import_styled5.default.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 = import_styled5.default.button`
+  border: none;
+  font-size: 8px;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  cursor: pointer;
+`;
+var QuestionStatusIcon = import_styled5.default.img`
+  width: 16px;
+  height: 16px;
+`;
+var QuestionTypeTitle = import_styled5.default.span`
+  text-transform: uppercase;
+`;
+var ExpiredQuestion = import_styled5.default.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
+var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
+var QuestionTypeData = {
+  [import_interactive.QuestionType.POLL]: { label: "Poll", icon: icon_poll_default },
+  [import_interactive.QuestionType.TRIVIA]: { label: "Trivia", icon: icon_trivia_default },
+  [import_interactive.QuestionType.PREDICTION]: { label: "Prediction", icon: icon_prediction_default }
+};
+var QuestionStatusTypeData = {
+  [import_interactive2.PickHistoryStatus.LOST]: icon_cross_default,
+  [import_interactive2.PickHistoryStatus.WON]: icon_check_green_default,
+  [import_interactive2.PickHistoryStatus.UNSET]: icon_chevron_default,
+  [import_interactive2.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__ */ (0, import_jsx_runtime5.jsxs)(Panel2, { onClick: () => openQuestion?.(questionId), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionTypeIconWrap, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionTypeIcon, { alt: "question-type-icon", src: questionTypeData.icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(QuestionContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(QuestionTypeLabel, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionTypeTitle, { children: questionTypeData.label }),
+        questionType === import_interactive.QuestionType.TRIVIA && questionStatus === import_interactive.QuestionStatus.RESOLVED && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpiredQuestion, { children: "Expired" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionSubject, { children: subject || "" })
+    ] }),
+    openForVoting ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionActionTitle, { children: "play" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionActionIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionStatusIcon, { alt: "question-status-icon", src: QuestionStatusTypeData[status] }) })
+  ] });
+};
+
+// packages/react-ui/src/lib/gamification/question-list/styles.tsx
+var import_styled6 = __toESM(require("@emotion/styled"), 1);
+var Container3 = import_styled6.default.div`
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 160px);
+  border-radius: 13px;
+`;
+var Title3 = import_styled6.default.div`
+  color: ${(props) => props.theme.COLORS.GREY_PRIMARY};
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 8px;
+`;
+var ItemsContainer = import_styled6.default.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
+var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
+var QuestionList = ({ questions, openQuestion }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Container3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title3, { children: "PICK HISTORY" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ItemsContainer, { children: questions?.map((props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Question, { openQuestion, ...props }, props.questionId)) })
+  ] });
+};
+
+// packages/react-ui/src/assets/icons/icon-trophy.svg
+var icon_trophy_default = 'data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Trophy">%0A<path id="Combined Shape" fill-rule="evenodd" clip-rule="evenodd" d="M2.76916 3.50002C2.76916 4.49786 2.94705 5.38348 3.30282 6.15692C2.62493 6.01847 2.05883 5.74872 1.6045 5.34768C1.15017 4.94663 0.923008 4.55992 0.923008 4.18752V3.50002H2.76916ZM11.0768 3.50002V4.18752C11.0768 4.55992 10.8497 4.94663 10.3953 5.34768C9.941 5.74872 9.3749 6.01847 8.69701 6.15692C9.05278 5.38348 9.23066 4.49786 9.23066 3.50002H11.0768ZM12 4.1875V3.27083C12 3.07986 11.9327 2.91754 11.7981 2.78385C11.6635 2.65017 11.5 2.58333 11.3077 2.58333H9.23077V1.89583C9.23077 1.58073 9.11779 1.31098 8.89183 1.08659C8.66586 0.862195 8.39423 0.75 8.07692 0.75H3.92308C3.60577 0.75 3.33414 0.862195 3.10817 1.08659C2.88221 1.31098 2.76923 1.58073 2.76923 1.89583V2.58333H0.692308C0.499999 2.58333 0.336539 2.65017 0.201923 2.78385C0.067307 2.91754 0 3.07986 0 3.27083V4.1875C0 4.52648 0.0997586 4.86784 0.299279 5.21159C0.498799 5.55534 0.768027 5.86567 1.10697 6.14258C1.44592 6.41949 1.86178 6.65223 2.35457 6.84082C2.84736 7.02941 3.36538 7.13563 3.90865 7.15951C4.11058 7.41732 4.33894 7.6441 4.59375 7.83984C4.77644 8.00217 4.90264 8.17524 4.97236 8.35905C5.04207 8.54286 5.07692 8.75651 5.07692 9C5.07692 9.25781 5.00361 9.47504 4.85697 9.65169C4.71034 9.82834 4.47596 9.91667 4.15385 9.91667C3.79327 9.91667 3.47236 10.0253 3.19111 10.2425C2.90985 10.4597 2.76923 10.7331 2.76923 11.0625V11.5208C2.76923 11.5877 2.79087 11.6426 2.83413 11.6855C2.8774 11.7285 2.93269 11.75 3 11.75H9C9.06731 11.75 9.1226 11.7285 9.16586 11.6855C9.20913 11.6426 9.23077 11.5877 9.23077 11.5208V11.0625C9.23077 10.7331 9.09015 10.4597 8.80889 10.2425C8.52764 10.0253 8.20673 9.91667 7.84615 9.91667C7.52404 9.91667 7.28966 9.82834 7.14303 9.65169C6.99639 9.47504 6.92308 9.25781 6.92308 9C6.92308 8.75651 6.95793 8.54286 7.02764 8.35905C7.09736 8.17524 7.22356 8.00217 7.40625 7.83984C7.66106 7.6441 7.88942 7.41732 8.09135 7.15951C8.63462 7.13563 9.15264 7.02941 9.64543 6.84082C10.1382 6.65223 10.5541 6.41949 10.893 6.14258C11.232 5.86567 11.5012 5.55534 11.7007 5.21159C11.9002 4.86784 12 4.52648 12 4.1875ZM5.07033 5.38491L6.0383 4.87503L7.00627 5.38491L6.8214 4.30497L7.60451 3.54016L6.52228 3.3826L6.0383 2.40003L5.55431 3.3826L4.47209 3.54016L5.25519 4.30497L5.07033 5.38491Z" fill="%23F2C94C"/>%0A</g>%0A</svg>%0A';
+
+// packages/react-ui/src/lib/gamification/user-statistics/components/statistics/styles.tsx
+var import_styled7 = __toESM(require("@emotion/styled"), 1);
+var Container4 = import_styled7.default.div`
+  font-weight: 700;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  align-items: center;
+  text-align: center;
+`;
+var Indicator = import_styled7.default.div`
+  font-size: 18px;
+  color: #fff;
+`;
+
+// packages/react-ui/src/lib/gamification/user-statistics/components/statistics/index.tsx
+var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
+var Statistics = ({ indicator, title: title2 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Container4, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Indicator, { children: indicator }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: title2 })
+] });
+
+// packages/react-ui/src/lib/gamification/user-statistics/components/rank/styles.tsx
+var import_styled8 = __toESM(require("@emotion/styled"), 1);
+var Container5 = import_styled8.default.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  column-gap: 2px;
+  overflow: hidden;
+`;
+var Title4 = import_styled8.default.div`
+  width: 75px;
+`;
+var Indicator2 = import_styled8.default.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
+var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
+var Rank = ({ indicator, title: title2 }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Container5, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Title4, { children: title2 }),
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Indicator2, { children: indicator })
+] });
+
+// packages/react-ui/src/lib/gamification/user-statistics/styles.tsx
+var import_styled9 = __toESM(require("@emotion/styled"), 1);
+var Container6 = import_styled9.default.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 = import_styled9.default.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 = import_styled9.default.div`
+  padding: 12px 16px;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: space-between;
+  column-gap: 16px;
+`;
+var User = import_styled9.default.div`
+  display: flex;
+  column-gap: 8px;
+  flex: 1;
+  overflow: hidden;
+`;
+var Avatar = import_styled9.default.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 = import_styled9.default.div`
+  padding-top: 4px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  overflow: hidden;
+`;
+var UserName = import_styled9.default.div`
+  font-size: 18px;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var UserRating = import_styled9.default.div`
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+`;
+var TrophyIcon = import_styled9.default.img`
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+`;
+var Rts = import_styled9.default.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 = import_styled9.default.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.COLORS.WHITE};
+`;
+var Top = import_styled9.default.div`
+  padding-left: 5px;
+`;
+var Ranks = import_styled9.default.div`
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+`;
+var AvatarPlaceholder = import_styled9.default.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
+var import_jsx_runtime9 = require("@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__ */ (0, import_jsx_runtime9.jsxs)(Container6, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(TopInfo, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(User, { children: [
+        avatar && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Avatar, { alt: "avatar", src: avatar }),
+        !avatar && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AvatarPlaceholder, { children: abbreviate(name) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(UserInfo, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(UserName, { children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(UserRating, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TrophyIcon, { alt: "rank-icon", src: icon_trophy_default }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Rts, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RtsIndicator, { children: points || "-" }),
+              "RTS"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Top, { children: [
+              "TOP ",
+              grade,
+              "%"
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Ranks, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Rank, { title: "Friens rank", indicator: friendsRank || "-" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Rank, { title: "Global rank", indicator: globalRank || "-" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(BottomInfo, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Statistics, { indicator: winStreak || "-", title: "Win streak" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Statistics, { indicator: correct || "-", title: "Correct" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Statistics, { indicator: incorrect || "-", title: "Incorrect" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Statistics, { indicator: `${successRate || "-"}%`, title: "Success rate" })
+    ] })
+  ] });
+};
+
+// packages/react-ui/src/lib/gamification/vote/index.tsx
+var import_react4 = require("react");
+
+// packages/react-ui/src/assets/icons/icon-check.svg
+var icon_check_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Checkmark">%0A<path id="Selected" fill-rule="evenodd" clip-rule="evenodd" d="M24 12.002C24 18.6294 18.6274 24.002 12 24.002C5.37258 24.002 0 18.6294 0 12.002C0 5.37454 5.37258 0.00195312 12 0.00195312C18.6274 0.00195312 24 5.37454 24 12.002ZM17.4086 8.15357C16.94 7.68494 16.1802 7.68494 15.7116 8.15357L10.4072 14.9579L7.62573 13.1036C7.07429 12.736 6.32925 12.885 5.96163 13.4365C5.59401 13.9879 5.74301 14.7329 6.29445 15.1006L9.89445 17.5006C10.3704 17.8179 11.0041 17.7551 11.4086 17.3506L17.4086 9.85063C17.8772 9.382 17.8772 8.6222 17.4086 8.15357Z" fill="%2300BD60"/>%0A</g>%0A</svg>%0A';
+
+// packages/react-ui/src/assets/icons/icon-close.svg
+var icon_close_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect y="0.00195312" width="24" height="24" rx="12" fill="%23F80022"/>%0A<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"/>%0A<rect x="7" y="15.752" width="12.3744" height="1.76777" rx="0.883884" transform="rotate(-45 7 15.752)" fill="white"/>%0A</svg>%0A';
+
+// packages/react-ui/src/assets/icons/icon-check-white.svg
+var icon_check_white_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Checkmark">%0A<path id="Selected" fill-rule="evenodd" clip-rule="evenodd" d="M24 12.002C24 18.6294 18.6274 24.002 12 24.002C5.37258 24.002 0 18.6294 0 12.002C0 5.37454 5.37258 0.00195312 12 0.00195312C18.6274 0.00195312 24 5.37454 24 12.002ZM17.4086 8.15357C16.94 7.68494 16.1802 7.68494 15.7116 8.15357L10.4072 14.9579L7.62573 13.1036C7.07429 12.736 6.32925 12.885 5.96163 13.4365C5.59401 13.9879 5.74301 14.7329 6.29445 15.1006L9.89445 17.5006C10.3704 17.8179 11.0041 17.7551 11.4086 17.3506L17.4086 9.85063C17.8772 9.382 17.8772 8.6222 17.4086 8.15357Z" fill="%23FFFFFF"/>%0A</g>%0A</svg>%0A';
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-option/styles.tsx
+var import_styled10 = __toESM(require("@emotion/styled"), 1);
+var Container7 = import_styled10.default.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 = (0, import_styled10.default)(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 = import_styled10.default.div`
+  position: absolute;
+  left: 0;
+  border-radius: 2px;
+  z-index: 0;
+  height: 100%;
+  background-color: inherit;
+  transition: all 1s ease-in;
+`;
+var Button = import_styled10.default.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 = import_styled10.default.img`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-right: 8px;
+`;
+var Title5 = import_styled10.default.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 8px 0px;
+  flex: 1;
+  text-align: left;
+`;
+var Indicators = import_styled10.default.span`
+  display: flex;
+`;
+var CheckIconWrap = import_styled10.default.div`
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+`;
+var Percentage = import_styled10.default.div`
+  margin-left: 12px;
+`;
+var CheckIcon = import_styled10.default.img`
+  width: 16px;
+  height: 16px;
+`;
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-option/index.tsx
+var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
+var VotingOption = ({
+  icon,
+  id,
+  title: title2,
+  questionId,
+  disabled,
+  percentage,
+  onVote,
+  toggleIsLoadingSubmitAnswer,
+  correct,
+  questionAnswered,
+  hasCorrectAnswer,
+  answered
+}) => {
+  if (questionAnswered && answered) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(AnsweredContainer, { answeredCorrect: !hasCorrectAnswer || correct, questionAnswered: false, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ButtonPct, { style: { width: `${percentage}%` } }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Button, { disabled, onClick: () => onVote(questionId, id), children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { alt: "option-icon", src: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Title5, { children: title2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Indicators, { children: [
+          hasCorrectAnswer && correct && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckIconWrap, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckIcon, { alt: "icon-correct", src: answered ? icon_check_white_default : icon_check_default }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Percentage, { children: [
+            percentage,
+            "%"
+          ] })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Container7, { questionAnswered, children: [
+    questionAnswered && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ButtonPct, { style: { width: `${percentage}%` } }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      Button,
+      {
+        disabled,
+        onClick: () => {
+          toggleIsLoadingSubmitAnswer(true);
+          onVote(questionId, id);
+        },
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { alt: "option-icon", src: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Title5, { children: title2 }),
+          questionAnswered && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Indicators, { children: [
+            hasCorrectAnswer && correct && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckIconWrap, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckIcon, { alt: "icon-correct", src: answered ? icon_check_white_default : icon_check_default }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Percentage, { children: [
+              percentage,
+              "%"
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+// packages/react-ui/src/lib/gamification/vote/styles.tsx
+var import_styled11 = __toESM(require("@emotion/styled"), 1);
+var Container8 = import_styled11.default.div`
+  padding: 16px;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  font-weight: 700;
+  font-size: 14px;
+
+  & > div:not(:last-child) {
+    margin-bottom: 16px;
+  }
+`;
+var Title6 = import_styled11.default.div`
+  font-size: 16px;
+`;
+var Options = import_styled11.default.div`
+  overflow-y: auto;
+  max-height: 220px;
+  position: relative;
+
+  & > div:not(:last-child) {
+    margin-bottom: 12px;
+  }
+`;
+var Loader = import_styled11.default.div`
+  position: absolute;
+  left: 0px;
+  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_VOTE_CONTAINER};
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var Feedback = import_styled11.default.div`
+  padding: 14px 12px 14px 16px;
+  display: flex;
+  align-items: center;
+`;
+var FeedbackIcon = import_styled11.default.img`
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+`;
+var FeedbackTitle = import_styled11.default.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16;
+  font-weight: 700;
+  margin-bottom: 10px;
+`;
+var FeedbackDescription = import_styled11.default.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
+var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
+var Vote = ({
+  title: title2,
+  questionId,
+  options,
+  questionAnswered,
+  feedbackMessages,
+  questionAnsweredCorrectly,
+  questionType
+}) => {
+  const [isLoadingSubmitAnswer, setIsLoadingSubmitAnswer] = (0, import_react4.useState)(false);
+  const toggleIsLoadingSubmitAnswer = (0, import_react4.useCallback)(
+    (flag) => {
+      setIsLoadingSubmitAnswer(flag);
+    },
+    [setIsLoadingSubmitAnswer]
+  );
+  (0, import_react4.useEffect)(() => {
+    toggleIsLoadingSubmitAnswer(false);
+  }, [options, toggleIsLoadingSubmitAnswer]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Container8, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Title6, { children: title2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Options, { children: [
+      isLoadingSubmitAnswer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loader, { children: "Loading..." }),
+      options.map((props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        VotingOption,
+        {
+          toggleIsLoadingSubmitAnswer,
+          questionId,
+          ...props
+        },
+        props.id
+      ))
+    ] }),
+    questionAnswered && questionType === import_interactive.QuestionType.TRIVIA && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Feedback, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FeedbackIcon, { alt: "reaction-to-answer", src: questionAnsweredCorrectly ? icon_check_default : icon_close_default }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FeedbackTitle, { children: questionAnsweredCorrectly ? feedbackMessages.correctFeedback.title : feedbackMessages.incorrectFeedback.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FeedbackDescription, { children: questionAnsweredCorrectly ? feedbackMessages.correctFeedback.description : feedbackMessages.incorrectFeedback.description })
+      ] })
+    ] })
+  ] });
+};
+
+// packages/react-ui/src/lib/demo/index.tsx
+var import_react12 = require("@nanostores/react");
+
+// packages/react-ui/src/lib/demo/Gamification.tsx
+var import_react11 = require("@nanostores/react");
+
+// packages/react-ui/src/lib/demo/components/UserSummary.tsx
+var import_react5 = require("@nanostores/react");
+var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
+var UserSummary = ({ store: store2 }) => {
+  const { data: user } = (0, import_react5.useStore)(store2);
+  if (!user?.summary) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: "wait user..." });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    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
+var import_react6 = require("@nanostores/react");
+var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
+var QuestionsList = ({ store: store2, openQuestion }) => {
+  const { data: questions } = (0, import_react6.useStore)(store2);
+  if (!questions) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: "wait questions..." });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(QuestionList, { openQuestion, questions });
+};
+
+// packages/react-ui/src/lib/demo/components/Question.tsx
+var import_styled14 = __toESM(require("@emotion/styled"), 1);
+var import_react7 = require("@nanostores/react");
+var import_react8 = require("react");
+
+// packages/react-ui/src/assets/icons/icon-trophy-green.svg
+var icon_trophy_green_default = 'data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">%0A    <g id="Trophy">%0A      <path id="Combined Shape" fill-rule="evenodd" clip-rule="evenodd" d="M2.76916 3.50002C2.76916 4.49786 2.94705 5.38348 3.30282 6.15692C2.62493 6.01847 2.05883 5.74872 1.6045 5.34768C1.15017 4.94663 0.923008 4.55992 0.923008 4.18752V3.50002H2.76916ZM11.0768 3.50002V4.18752C11.0768 4.55992 10.8497 4.94663 10.3953 5.34768C9.941 5.74872 9.3749 6.01847 8.69701 6.15692C9.05278 5.38348 9.23066 4.49786 9.23066 3.50002H11.0768ZM12 4.1875V3.27083C12 3.07986 11.9327 2.91754 11.7981 2.78385C11.6635 2.65017 11.5 2.58333 11.3077 2.58333H9.23077V1.89583C9.23077 1.58073 9.11779 1.31098 8.89183 1.08659C8.66586 0.862195 8.39423 0.75 8.07692 0.75H3.92308C3.60577 0.75 3.33414 0.862195 3.10817 1.08659C2.88221 1.31098 2.76923 1.58073 2.76923 1.89583V2.58333H0.692308C0.499999 2.58333 0.336539 2.65017 0.201923 2.78385C0.067307 2.91754 0 3.07986 0 3.27083V4.1875C0 4.52648 0.0997586 4.86784 0.299279 5.21159C0.498799 5.55534 0.768027 5.86567 1.10697 6.14258C1.44592 6.41949 1.86178 6.65223 2.35457 6.84082C2.84736 7.02941 3.36538 7.13563 3.90865 7.15951C4.11058 7.41732 4.33894 7.6441 4.59375 7.83984C4.77644 8.00217 4.90264 8.17524 4.97236 8.35905C5.04207 8.54286 5.07692 8.75651 5.07692 9C5.07692 9.25781 5.00361 9.47504 4.85697 9.65169C4.71034 9.82834 4.47596 9.91667 4.15385 9.91667C3.79327 9.91667 3.47236 10.0253 3.19111 10.2425C2.90985 10.4597 2.76923 10.7331 2.76923 11.0625V11.5208C2.76923 11.5877 2.79087 11.6426 2.83413 11.6855C2.8774 11.7285 2.93269 11.75 3 11.75H9C9.06731 11.75 9.1226 11.7285 9.16586 11.6855C9.20913 11.6426 9.23077 11.5877 9.23077 11.5208V11.0625C9.23077 10.7331 9.09015 10.4597 8.80889 10.2425C8.52764 10.0253 8.20673 9.91667 7.84615 9.91667C7.52404 9.91667 7.28966 9.82834 7.14303 9.65169C6.99639 9.47504 6.92308 9.25781 6.92308 9C6.92308 8.75651 6.95793 8.54286 7.02764 8.35905C7.09736 8.17524 7.22356 8.00217 7.40625 7.83984C7.66106 7.6441 7.88942 7.41732 8.09135 7.15951C8.63462 7.13563 9.15264 7.02941 9.64543 6.84082C10.1382 6.65223 10.5541 6.41949 10.893 6.14258C11.232 5.86567 11.5012 5.55534 11.7007 5.21159C11.9002 4.86784 12 4.52648 12 4.1875ZM5.07033 5.38491L6.0383 4.87503L7.00627 5.38491L6.8214 4.30497L7.60451 3.54016L6.52228 3.3826L6.0383 2.40003L5.55431 3.3826L4.47209 3.54016L5.25519 4.30497L5.07033 5.38491Z" fill="white"/>%0A    </g>%0A  </svg>%0A';
+
+// packages/react-ui/src/assets/icons/icon-thumb-down.svg
+var icon_thumb_down_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">%0A    <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"/>%0A  </svg>%0A';
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-header/styles.tsx
+var import_styled12 = __toESM(require("@emotion/styled"), 1);
+var Container9 = import_styled12.default.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 = import_styled12.default.img`
+  width: 60px;
+  height: 80%;
+`;
+var RightBlock = import_styled12.default.div`
+  display: flex;
+  align-items: center;
+`;
+var ExitBtn = import_styled12.default.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  border-radius: 50%;
+  padding: 0px;
+  width: 24px;
+  height: 24px;
+  margin-left: 25px;
+  cursor: pointer;
+`;
+var ExitIcon = import_styled12.default.img`
+  width: 24px;
+  height: 24px;
+`;
+var Interactive = import_styled12.default.div`
+  display: flex;
+  align-items: center;
+  padding: 4px 0px;
+  margin-left: 10px;
+`;
+var ReactionIconWrap = import_styled12.default.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 = import_styled12.default.img`
+  width: 20px;
+  height: 20px;
+`;
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-header/components/points/styles.tsx
+var import_styled13 = __toESM(require("@emotion/styled"), 1);
+var Container10 = import_styled13.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-right: 10px;
+  font-weight: 700;
+`;
+var Title7 = import_styled13.default.div`
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 8px;
+  line-height: 12px;
+  text-align: right;
+`;
+var PointContainer = import_styled13.default.div`
+  text-align: right;
+`;
+var Point = import_styled13.default.span`
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  line-height: 16px;
+  margin-right: 2px;
+`;
+var PointLabel = import_styled13.default.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
+var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
+var Points = ({ points }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Container10, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Title7, { children: "YOU WON" }),
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(PointContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Point, { children: points }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PointLabel, { children: "PTS" })
+  ] })
+] });
+
+// packages/react-ui/src/lib/gamification/vote/components/voting-header/index.tsx
+var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
+var VotingHeader = ({
+  logo,
+  points,
+  questionAnswered,
+  questionAnsweredCorrectly,
+  questionType,
+  closeQuestion,
+  setTimeToExpire
+}) => {
+  const isShowTimer = !questionAnswered && questionType !== import_interactive.QuestionType.PREDICTION;
+  const isShowTriviaFeedback = questionAnswered && questionType === import_interactive.QuestionType.TRIVIA;
+  const successTriviaFeedback = isShowTriviaFeedback && questionAnsweredCorrectly;
+  const errorTriviaFeedback = isShowTriviaFeedback && !questionAnsweredCorrectly;
+  const isShowPredictionFeedback = questionAnswered && questionType === import_interactive.QuestionType.PREDICTION;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Container9, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(RightBlock, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Interactive, { children: [
+        isShowTimer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Timer, { setTimeToExpire }),
+        successTriviaFeedback && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Points, { points }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReactionIconWrap, { isSuccess: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReactionIcon, { alt: "reaction-icon", src: icon_trophy_green_default }) })
+        ] }),
+        errorTriviaFeedback && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Points, { points: 0 }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReactionIconWrap, { isSuccess: false, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReactionIcon, { alt: "reaction-icon", src: icon_thumb_down_default }) })
+        ] }),
+        isShowPredictionFeedback && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Points, { points })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ExitBtn, { onClick: closeQuestion, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ExitIcon, { alt: "exit-icon", src: icon_exit_default }) })
+    ] }),
+    logo && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Logo, { src: logo })
+  ] });
+};
+
+// packages/react-ui/src/assets/icons/fedex.svg
+var fedex_default = 'data:image/svg+xml,<svg width="68" height="22" viewBox="0 0 68 22" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Vector">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M56.6155 7.44146H50.7066L56.3072 13.8615L50.7066 20.2805H56.4357L59.1587 17.137L61.9068 20.2805H67.84L62.19 13.8348L67.7636 7.44146H62.0606L59.3897 10.5602L56.6155 7.44146ZM62.2721 7.91659L59.3964 11.2747L56.4092 7.91659H51.7446L56.9307 13.8615L51.7447 19.8054H56.2257L59.1571 16.4213L62.1156 19.8054H66.7987L61.566 13.8357L66.7261 7.91659H62.2721Z" fill="white"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M44.3635 7.44146V4.56406H50.7066V0.0559998H39.702V20.2805H50.7066V15.7601H44.3635V11.7794H50.7066V7.44146H44.3635ZM50.2408 7.91659H43.8978V4.08893H50.2408V0.531132H40.1678V19.8054H50.2408V16.2352H43.8978V11.3043H50.2408V7.91659Z" fill="white"/>%0A<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"/>%0A</g>%0A</svg>%0A';
+
+// packages/react-ui/src/lib/demo/components/Question.tsx
+var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
+var QuestionContainer = import_styled14.default.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 } = (0, import_react7.useStore)(store2);
+  const [answerTimeExpired, setAnswerTimeExpired] = (0, import_react8.useState)(false);
+  const setTimeToExpire = (0, import_react8.useCallback)(
+    (flag) => {
+      setAnswerTimeExpired(flag);
+    },
+    [setAnswerTimeExpired]
+  );
+  const questionAnswered = (0, import_react8.useMemo)(
+    () => openedQuestion?.answers.find((answer) => answer.youVoted === true),
+    [openedQuestion]
+  );
+  const hasCorrectAnswer = (0, import_react8.useMemo)(
+    () => !!openedQuestion?.answers.find((answer) => answer.correct === true),
+    [openedQuestion]
+  );
+  if (!openedQuestion) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(QuestionContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      VotingHeader,
+      {
+        points: questionAnswered?.points || 0,
+        questionAnswered: !!questionAnswered,
+        questionAnsweredCorrectly: questionAnswered?.correct,
+        logo: fedex_default,
+        closeQuestion,
+        setTimeToExpire,
+        questionType: openedQuestion.type
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      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
+var import_react9 = require("@nanostores/react");
+var import_react10 = require("react");
+var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
+var Notifications = ({ notificationsStore, openQuestion }) => {
+  const timeout = (0, import_react10.useRef)();
+  const [lastNotification, setLastNotification] = (0, import_react10.useState)();
+  const notifications2 = (0, import_react9.useStore)(notificationsStore);
+  (0, import_react10.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime17.jsx)(
+    InApp,
+    {
+      openVoiting,
+      closeInApp,
+      title: lastNotification.notification.title,
+      icon: lastNotification.notification.image,
+      color: lastNotification.notification.indicatorColor
+    }
+  );
+};
+
+// packages/react-ui/src/lib/demo/components/InPlayGame.tsx
+var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+var InPlayGame = ({ action }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Onboarding, { action });
+};
+
+// packages/react-ui/src/lib/demo/styles.tsx
+var import_styled15 = __toESM(require("@emotion/styled"), 1);
+var DemoContainer = import_styled15.default.div`
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+`;
+var DemoContainerNotifications = import_styled15.default.div`
+  position: absolute;
+  width: 100%;
+`;
+var UserStatisticsContainer = import_styled15.default.div`
+  margin-bottom: 15px;
+`;
+
+// packages/react-ui/src/lib/demo/Gamification.tsx
+var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
+var GamificationComponent = ({
+  gamification,
+  sdk
+}) => {
+  const onbordingComplete = (0, import_react11.useStore)(gamification.onbordingComplete);
+  const { slStreamId } = (0, import_react11.useStore)(sdk.sdkStore);
+  if (slStreamId?.loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DemoContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Event is loading" }) });
+  }
+  if (!slStreamId?.data) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DemoContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Event is forbidden" }) });
+  }
+  if (!onbordingComplete) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DemoContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(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__ */ (0, import_jsx_runtime19.jsxs)(DemoContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DemoContainerNotifications, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Notifications, { notificationsStore: sdk.getNotificationsStore(), openQuestion }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UserStatisticsContainer, { children: gamification.userSummary && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UserSummary, { store: gamification.userSummary.getStore() }) }),
+    gamification.questions && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(QuestionsList, { openQuestion, store: gamification.questions.getStore() }),
+    gamification.openedQuestion && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Question2, { closeQuestion, vote, store: gamification.openedQuestion.getStore() })
+  ] });
+};
+
+// packages/react-ui/src/lib/demo/Login.tsx
+var import_jsx_runtime20 = require("@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__ */ (0, import_jsx_runtime20.jsx)(Login, { login: login2, anonymousLogin: sdk.anonymousAuthorization });
+};
+
+// packages/react-ui/src/lib/demo/index.tsx
+var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
+var Demo = ({ sdk }) => {
+  const user = (0, import_react12.useStore)(sdk.getUserStore());
+  if (user.loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: "authentificating..." });
+  }
+  if (!user.data) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LoginComponent, { sdk });
+  }
+  const gamification = sdk.getFeatures().get("games");
+  if (!gamification) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: "wait gamification..." });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GamificationComponent, { gamification, sdk });
+};
+
+// packages/react-ui/src/lib/theme/index.tsx
+var import_react13 = require("@emotion/react");
+var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
+var StreamLayerThemeProvider = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react13.ThemeProvider, { theme, children });
+
+// packages/react/src/app/provider.tsx
+var import_react15 = require("react");
+
+// packages/sdk-web-interfaces/src/auth.ts
+var AbstractAuthenticationProvider = class {
+};
+
+// packages/sdk-web-interfaces/src/feature.ts
+var import_sdkSettings2 = require("@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb");
+var import_nanostores3 = require("nanostores");
+
+// packages/sdk-web-interfaces/src/store/map.ts
+var import_nanostores2 = require("nanostores");
+
+// packages/sdk-web-interfaces/src/store/abstract.ts
+var import_nanostores = require("nanostores");
+var import_logger = require("@nanostores/logger");
+var import_microdiff = __toESM(require("microdiff"), 1);
+window.storeLogger = /* @__PURE__ */ Object.create(null);
+var slStoreLogger = (store2, name) => (0, import_logger.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: (0, import_microdiff.default)({ ...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 (0, import_nanostores.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 (0, import_nanostores2.map)(initialData);
+};
+
+// packages/sdk-web-interfaces/src/feature.ts
+var FeatureTypes = {
+  [import_sdkSettings2.SdkOverlayType.BETTING]: "betting",
+  [import_sdkSettings2.SdkOverlayType.GAMES]: "games",
+  [import_sdkSettings2.SdkOverlayType.PUBLIC_CHAT]: "publicChat",
+  [import_sdkSettings2.SdkOverlayType.TWITTER]: "twitter"
+};
+var AbstractFeature = class {
+  status;
+  source;
+  config;
+  settings;
+  listeners = /* @__PURE__ */ new Set();
+  settingsKey;
+  constructor({ settings, ...config2 }, source) {
+    this.settingsKey = FeatureTypes[config2.type];
+    this.status = (0, import_nanostores3.atom)("suspended" /* Suspended */);
+    this.config = new MapStore(createMapStore(config2), `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, ...config2 }) => {
+    let configKey;
+    for (configKey in config2) {
+      this.config.setValue(configKey, config2[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 = (config2, source) => {
+    if (this.source === "STREAM" /* STREAM */ && source === "ORGANIZATION" /* ORGANIZATION */) {
+      return;
+    }
+    this.setFeatureConfig(config2);
+    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
+var import_nanostores4 = require("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) => (0, import_nanostores4.atom)(initialData);
+
+// packages/sdk-web-interfaces/src/store/api.ts
+var import_nanostores5 = require("nanostores");
+var ApiStore = class extends AbstractStore {
+  atomStore;
+  constructor(store2, name, atomPicker) {
+    super(store2, `api:${name}`);
+    this.atomStore = (0, import_nanostores5.atom)();
+    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
+var import_connect3 = require("@connectrpc/connect");
+var import_connect_web2 = require("@bufbuild/connect-web");
+var import_query = require("@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 import_connect2 = require("@connectrpc/connect");
+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) => {
+    if (error.code !== import_connect2.Code.Canceled && error.rawMessage !== "[canceled] BodyStreamBuffer was aborted") {
+      this.updateState("failed" /* Failed */);
+      this.state.setValue("error", error);
+    } else {
+      this.disconnect();
+    }
+  };
+};
+
+// 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] = (0, import_query.nanoquery)();
+    this.nanoquery = { createFetcherStore, createMutatorStore, utils };
+    this.transport = (0, import_connect_web2.createGrpcWebTransport)({
+      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 = (0, import_connect3.createPromiseClient)(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 = (0, import_connect3.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: () => register2
+});
+
+// packages/sdk-web-api/src/grpc/queries/event.ts
+var import_events_connect = require("@streamlayer/sl-eslib/sports/events/events_connect");
+var import_client_connect = require("@streamlayer/sl-eslib/sdkSettings/client/client_connect");
+var $retrieveEventId = ($providerStreamId, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(import_events_connect.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(import_client_connect.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
+var import_client_connect3 = require("@streamlayer/sl-eslib/sdkSettings/client/client_connect");
+
+// packages/sdk-web-api/src/grpc/queries/user.ts
+var import_users_connect2 = require("@streamlayer/sl-eslib/users/users_connect");
+var import_client_connect2 = require("@streamlayer/sl-eslib/sdkSettings/client/client_connect");
+var $user = ($userToken, transport2) => {
+  const { queryKey, client } = transport2.createPromiseClient(import_users_connect2.Users, { method: "me", params: [$userToken] });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: () => client.me({})
+  });
+};
+var $bypassLogin = (transport2) => {
+  const { client, queryKeyStr } = transport2.createPromiseClient(import_users_connect2.Users, { 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(import_users_connect2.Users, { method: "bypassAuth" });
+  return client.bypassAuth(params);
+};
+var $userSettings = ($userToken, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(import_client_connect2.Client, { method: "get", params: [$userToken] });
+  return transport2.nanoquery.createFetcherStore(queryKey, {
+    fetcher: async () => {
+      const data = await client.get({});
+      return data.data?.attributes;
+    }
+  });
+};
+var register2 = (transport2, phone) => {
+  const { client } = transport2.createPromiseClient(import_users_connect2.Users, { 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(import_client_connect3.Client, { 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(import_client_connect3.Client, {
+    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
+var import_nanostores6 = require("nanostores");
+var import_interactive4 = require("@streamlayer/sl-eslib/interactive/feed/interactive.feed_connect");
+
+// packages/feature-gamification/src/queries/leaderboard.ts
+var import_interactive3 = require("@streamlayer/sl-eslib/interactive/leaderboard/interactive.leaderboard_connect");
+var $userSummary = ($eventId, $userId, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(import_interactive3.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(import_interactive4.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(import_interactive4.Feed);
+  const params = (0, import_nanostores6.atom)({ 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(import_interactive4.Feed);
+  const subscription = transport2.addSubscription(client.questionSubscription, { questionId }, { name: "questionSubscription" });
+  return subscription;
+};
+var $questionByUser = ($questionId, transport2) => {
+  const { client, queryKey } = transport2.createPromiseClient(import_interactive4.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(import_interactive4.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
+var import_interactive5 = require("@streamlayer/sl-eslib/interactive/feed/interactive.feed_connect");
+var submitAnswer = (transport2, data) => {
+  const { client } = transport2.createPromiseClient(import_interactive5.Feed, { method: "submitAnswer" });
+  return client.submitAnswer({ data });
+};
+var submitInplay = (transport2, eventId) => {
+  const { client } = transport2.createPromiseClient(import_interactive5.Feed, { method: "submitInplay" });
+  return client.submitInplay({ data: { eventId: +eventId } });
+};
+var skipQuestion = (transport2, questionId) => {
+  const { client } = transport2.createPromiseClient(import_interactive5.Feed, { 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(config2, source, instance) {
+    super(config2, 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 === import_interactive.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 === import_sdkSettings.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
+var import_avvio = __toESM(require("avvio"), 1);
+
+// 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 = (0, import_avvio.default)(/* @__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
+var import_react14 = require("react");
+window.instance = null;
+var useStreamLayer = (sdkKey, plugins) => {
+  const [sdk, setSdk] = (0, import_react14.useState)(null);
+  (0, import_react14.useEffect)(() => {
+    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
+var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
+var StreamLayerContext3 = (0, import_react15.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 = (0, import_react15.useMemo)(() => {
+    if (!streamLayer) {
+      return { status: 1 /* CONNECTED */ };
+    }
+    return { sdk: streamLayer, status: 2 /* READY */ };
+  }, [streamLayer]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StreamLayerThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StreamLayerContext3.Provider, { value, children }) });
+};
+
+// packages/react/src/app/app.tsx
+var import_react16 = require("react");
+var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
+var useSDK = () => {
+  const { sdk } = (0, import_react16.useContext)(StreamLayerContext3);
+  return sdk;
+};
+var StreamLayerSDKReact = () => {
+  const { sdk, status } = (0, import_react16.useContext)(StreamLayerContext3);
+  if (status === 0 /* UNSET */) {
+    throw new Error("Wrap app in `StreamLayerProvider`");
+  }
+  if (status === 1 /* CONNECTED */) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: "wait" });
+  }
+  if (sdk === void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: "sdk not initialized" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Demo, { sdk });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StreamLayerProvider,
+  StreamLayerSDKReact,
+  useSDK,
+  useStreamLayer
+});