@streamlayer/react 0.2.5 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/main.js +266 -253
  2. package/package.json +2 -1
package/main.js CHANGED
@@ -8,14 +8,7 @@ var __export = (target, all) => {
8
8
  import { useCallback } from "react";
9
9
 
10
10
  // packages/react-ui/src/assets/icons/icon-exit.svg
11
- import * as React from "react";
12
- import { jsx, jsxs } from "@emotion/react/jsx-runtime";
13
- var SvgIconExit = (props) => /* @__PURE__ */ jsxs("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
14
- /* @__PURE__ */ jsx("rect", { width: 24, height: 24, rx: 12, fill: "white", fillOpacity: 0.1 }),
15
- /* @__PURE__ */ jsx("rect", { x: 8.25, y: 7, width: 12.3744, height: 1.76777, rx: 0.883884, transform: "rotate(45 8.25 7)", fill: "white" }),
16
- /* @__PURE__ */ jsx("rect", { x: 7, y: 15.75, width: 12.3744, height: 1.76777, rx: 0.883884, transform: "rotate(-45 7 15.75)", fill: "white" })
17
- ] });
18
- var icon_exit_default = SvgIconExit;
11
+ 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';
19
12
 
20
13
  // packages/react-ui/src/lib/gamification/inapp/styles.tsx
21
14
  import styled from "@emotion/styled";
@@ -93,7 +86,7 @@ var CloseIcon = styled.img`
93
86
  `;
94
87
 
95
88
  // packages/react-ui/src/lib/gamification/inapp/index.tsx
96
- import { jsx as jsx2, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
89
+ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
97
90
  var InApp = ({ title = "", icon, color, openVoiting, closeInApp }) => {
98
91
  const _closeInApp = useCallback(
99
92
  (e) => {
@@ -102,11 +95,11 @@ var InApp = ({ title = "", icon, color, openVoiting, closeInApp }) => {
102
95
  },
103
96
  [closeInApp]
104
97
  );
105
- return /* @__PURE__ */ jsxs2(Container, { onClick: openVoiting, children: [
106
- /* @__PURE__ */ jsx2(IconWrap, { style: color ? { backgroundColor: color } : {}, children: !!icon && /* @__PURE__ */ jsx2(Icon, { alt: "in-app-icon", src: icon }) }),
107
- /* @__PURE__ */ jsxs2(Content, { children: [
108
- /* @__PURE__ */ jsx2(TitleWrap, { children: /* @__PURE__ */ jsx2(Title, { id: "in-app-title", children: title }) }),
109
- /* @__PURE__ */ jsx2(CloseBtnWrap, { children: /* @__PURE__ */ jsx2(CloseBtn, { onClick: _closeInApp, children: /* @__PURE__ */ jsx2(CloseIcon, { alt: "close-in-app-icon", src: icon_exit_default }) }) })
98
+ return /* @__PURE__ */ jsxs(Container, { onClick: openVoiting, children: [
99
+ /* @__PURE__ */ jsx(IconWrap, { style: color ? { backgroundColor: color } : {}, children: !!icon && /* @__PURE__ */ jsx(Icon, { alt: "in-app-icon", src: icon }) }),
100
+ /* @__PURE__ */ jsxs(Content, { children: [
101
+ /* @__PURE__ */ jsx(TitleWrap, { children: /* @__PURE__ */ jsx(Title, { id: "in-app-title", children: title }) }),
102
+ /* @__PURE__ */ jsx(CloseBtnWrap, { children: /* @__PURE__ */ jsx(CloseBtn, { onClick: _closeInApp, children: /* @__PURE__ */ jsx(CloseIcon, { alt: "close-in-app-icon", src: icon_exit_default }) }) })
110
103
  ] })
111
104
  ] });
112
105
  };
@@ -129,6 +122,14 @@ var requestLoginCode = async (phone) => {
129
122
  await userClient.requestPassword({ id: phone });
130
123
  return true;
131
124
  };
125
+ var register = async (phone) => {
126
+ const transport2 = createGrpcWebTransport({
127
+ baseUrl: process.env.NX_GRPC_HOST || "https://grpc-web.next.streamlayer.io:443"
128
+ });
129
+ const userClient = createPromiseClient(Users, transport2);
130
+ await userClient.register({ id: phone });
131
+ return true;
132
+ };
132
133
  var login = async (phone, code) => {
133
134
  const transport2 = createGrpcWebTransport({
134
135
  baseUrl: process.env.NX_GRPC_HOST || "https://grpc-web.next.streamlayer.io:443"
@@ -186,7 +187,7 @@ var RemainingTime = styled2.div`
186
187
  `;
187
188
 
188
189
  // packages/react-ui/src/lib/gamification/vote/components/voting-header/components/timer/index.tsx
189
- import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
190
+ import { jsx as jsx2 } from "@emotion/react/jsx-runtime";
190
191
  var TIMER_COLORS = [theme.COLORS.BLUE_PRIMARY, theme.COLORS.GREEN_1, theme.COLORS.RED_1];
191
192
  var TIMER_COLORS_TIME = [10, 6, 0];
192
193
  var DEFAULT_DURATION = 30;
@@ -194,11 +195,11 @@ var TIMER_SIZE = 32;
194
195
  var STROKE_WIDTH = 4;
195
196
  var TRAIL_STROKE_WIDTH = 0;
196
197
  var Timer = ({ isPlaying = true, duration = DEFAULT_DURATION, setTimeToExpire }) => {
197
- const renderTime = ({ remainingTime }) => /* @__PURE__ */ jsx3(RemainingTime, { remainingTime, children: remainingTime });
198
+ const renderTime = ({ remainingTime }) => /* @__PURE__ */ jsx2(RemainingTime, { remainingTime, children: remainingTime });
198
199
  useEffect(() => {
199
200
  setTimeToExpire(false);
200
201
  }, [setTimeToExpire]);
201
- return /* @__PURE__ */ jsx3(
202
+ return /* @__PURE__ */ jsx2(
202
203
  CountdownCircleTimer,
203
204
  {
204
205
  isPlaying,
@@ -283,7 +284,7 @@ var Digits = styled3.div`
283
284
  `;
284
285
 
285
286
  // packages/react-ui/src/lib/gamification/login/index.tsx
286
- import { jsx as jsx4, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
287
+ import { jsx as jsx3, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
287
288
  var Login = ({ login: login2, anonymousLogin }) => {
288
289
  const [phoneInput, setPhoneInput] = useState("");
289
290
  const [phone, setPhone] = useState("");
@@ -298,7 +299,11 @@ var Login = ({ login: login2, anonymousLogin }) => {
298
299
  e.preventDefault();
299
300
  try {
300
301
  const parsed = phoneInput.replaceAll("+", "");
301
- await requestLoginCode(parsed);
302
+ try {
303
+ await requestLoginCode(parsed);
304
+ } catch (err) {
305
+ await register(parsed);
306
+ }
302
307
  setPhone(parsed);
303
308
  } catch (err) {
304
309
  window.alert(err);
@@ -319,36 +324,36 @@ var Login = ({ login: login2, anonymousLogin }) => {
319
324
  }
320
325
  }
321
326
  };
322
- return /* @__PURE__ */ jsxs3(Panel, { children: [
323
- !phone && /* @__PURE__ */ jsxs3("div", { children: [
324
- /* @__PURE__ */ jsxs3(Form, { onSubmit: requestCode, children: [
325
- /* @__PURE__ */ jsx4(FormTitle, { children: "Enter your phone number" }),
326
- /* @__PURE__ */ jsx4(FormDescription, { children: "Enter your phone up for number to log in or sign an account." }),
327
- /* @__PURE__ */ jsx4(FormInputContainer, { children: /* @__PURE__ */ jsx4(PhoneInput, { value: phoneInput, onChange: (val) => setPhoneInput(`${val}`) }) }),
328
- /* @__PURE__ */ jsx4(FormSubmit, { disabled: !isValidPhoneNumber(phoneInput), type: "submit", children: "request code" })
327
+ return /* @__PURE__ */ jsxs2(Panel, { children: [
328
+ !phone && /* @__PURE__ */ jsxs2("div", { children: [
329
+ /* @__PURE__ */ jsxs2(Form, { onSubmit: requestCode, children: [
330
+ /* @__PURE__ */ jsx3(FormTitle, { children: "Enter your phone number" }),
331
+ /* @__PURE__ */ jsx3(FormDescription, { children: "Enter your phone up for number to log in or sign an account." }),
332
+ /* @__PURE__ */ jsx3(FormInputContainer, { children: /* @__PURE__ */ jsx3(PhoneInput, { value: phoneInput, onChange: (val) => setPhoneInput(`${val}`) }) }),
333
+ /* @__PURE__ */ jsx3(FormSubmit, { disabled: !isValidPhoneNumber(phoneInput), type: "submit", children: "request code" })
329
334
  ] }),
330
- anonymousLogin && /* @__PURE__ */ jsx4(FormSubmit, { style: { display: "block", margin: "auto" }, disabled: true, onClick: anonymousLogin, children: "anonymous login" })
335
+ anonymousLogin && /* @__PURE__ */ jsx3(FormSubmit, { style: { display: "block", margin: "auto" }, disabled: true, onClick: anonymousLogin, children: "anonymous login" })
331
336
  ] }),
332
- phone && /* @__PURE__ */ jsxs3(Form, { onSubmit: loginByCode, children: [
333
- /* @__PURE__ */ jsx4(FormTitle, { children: "Enter Verification Code" }),
334
- /* @__PURE__ */ jsxs3(FormDescription, { children: [
337
+ phone && /* @__PURE__ */ jsxs2(Form, { onSubmit: loginByCode, children: [
338
+ /* @__PURE__ */ jsx3(FormTitle, { children: "Enter Verification Code" }),
339
+ /* @__PURE__ */ jsxs2(FormDescription, { children: [
335
340
  "Please enter the verification code ",
336
- /* @__PURE__ */ jsx4("br", {}),
341
+ /* @__PURE__ */ jsx3("br", {}),
337
342
  "sent to ",
338
- /* @__PURE__ */ jsx4("b", { children: formatPhoneNumberIntl(phoneInput) })
343
+ /* @__PURE__ */ jsx3("b", { children: formatPhoneNumberIntl(phoneInput) })
339
344
  ] }),
340
- /* @__PURE__ */ jsxs3(Digits, { children: [
341
- /* @__PURE__ */ jsx4("input", { autoFocus: true, inputMode: "decimal", ...digits[0] }),
342
- /* @__PURE__ */ jsx4("input", { inputMode: "decimal", ...digits[1] }),
343
- /* @__PURE__ */ jsx4("input", { inputMode: "decimal", ...digits[2] }),
344
- /* @__PURE__ */ jsx4("input", { inputMode: "decimal", ...digits[3] })
345
+ /* @__PURE__ */ jsxs2(Digits, { children: [
346
+ /* @__PURE__ */ jsx3("input", { autoFocus: true, inputMode: "decimal", ...digits[0] }),
347
+ /* @__PURE__ */ jsx3("input", { inputMode: "decimal", ...digits[1] }),
348
+ /* @__PURE__ */ jsx3("input", { inputMode: "decimal", ...digits[2] }),
349
+ /* @__PURE__ */ jsx3("input", { inputMode: "decimal", ...digits[3] })
345
350
  ] }),
346
- /* @__PURE__ */ jsx4(FormSubmit, { disabled: code.length !== 4, type: "submit", children: "login" }),
347
- /* @__PURE__ */ jsxs3(FormDescription, { children: [
351
+ /* @__PURE__ */ jsx3(FormSubmit, { disabled: code.length !== 4, type: "submit", children: "login" }),
352
+ /* @__PURE__ */ jsxs2(FormDescription, { children: [
348
353
  "Didn't get 59 the code? ",
349
- /* @__PURE__ */ jsx4("br", {}),
354
+ /* @__PURE__ */ jsx3("br", {}),
350
355
  "Resend Code in",
351
- /* @__PURE__ */ jsx4(Timer, { duration: 30, setTimeToExpire: () => {
356
+ /* @__PURE__ */ jsx3(Timer, { duration: 30, setTimeToExpire: () => {
352
357
  }, isPlaying: true })
353
358
  ] })
354
359
  ] })
@@ -398,13 +403,13 @@ var OnboardingActionBtn = styled4.button`
398
403
  `;
399
404
 
400
405
  // packages/react-ui/src/lib/gamification/onboarding/index.tsx
401
- import { jsx as jsx5, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
402
- var Onboarding = ({ action }) => /* @__PURE__ */ jsxs4(Container2, { children: [
403
- /* @__PURE__ */ jsxs4(Content2, { children: [
404
- /* @__PURE__ */ jsx5(Description, { children: "Welcome to the" }),
405
- /* @__PURE__ */ jsx5(Title2, { children: "Inplay Game" })
406
+ import { jsx as jsx4, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
407
+ var Onboarding = ({ action }) => /* @__PURE__ */ jsxs3(Container2, { children: [
408
+ /* @__PURE__ */ jsxs3(Content2, { children: [
409
+ /* @__PURE__ */ jsx4(Description, { children: "Welcome to the" }),
410
+ /* @__PURE__ */ jsx4(Title2, { children: "Inplay Game" })
406
411
  ] }),
407
- /* @__PURE__ */ jsx5(OnboardingActionBtn, { onClick: action, children: "Let\u2019s play" })
412
+ /* @__PURE__ */ jsx4(OnboardingActionBtn, { onClick: action, children: "Let\u2019s play" })
408
413
  ] });
409
414
 
410
415
  // packages/sdk-web-types/src/sl-types.ts
@@ -413,43 +418,22 @@ import { PickHistoryStatus } from "@streamlayer/sl-eslib/interactive/feed/intera
413
418
  import { SdkOverlayType } from "@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb";
414
419
 
415
420
  // packages/react-ui/src/assets/icons/icon-poll.svg
416
- import * as React3 from "react";
417
- import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
418
- var SvgIconPoll = (props) => /* @__PURE__ */ jsx6("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx6("g", { id: "Poll", children: /* @__PURE__ */ jsx6("path", { id: "Notification/Icon/Poll", fillRule: "evenodd", clipRule: "evenodd", d: "M9.7778 1.68421V5.05263H13.3333C13.8243 5.05263 14.2222 4.67561 14.2222 4.21053V2.52632C14.2222 2.06123 13.8243 1.68421 13.3333 1.68421H9.7778ZM2.66667 0C1.19391 0 0 1.13107 0 2.52632V4.21053C0 5.60577 1.19391 6.73684 2.66667 6.73684H13.3333C14.8061 6.73684 16 5.60577 16 4.21053V2.52632C16 1.13107 14.8061 0 13.3333 0H2.66667ZM4.44446 10.9473H13.3333C13.8243 10.9473 14.2222 11.3243 14.2222 11.7894V13.4736C14.2222 13.9387 13.8243 14.3157 13.3333 14.3157H4.44446V10.9473ZM0 11.7894C0 10.3942 1.19391 9.2631 2.66667 9.2631H13.3333C14.8061 9.2631 16 10.3942 16 11.7894V13.4736C16 14.8689 14.8061 15.9999 13.3333 15.9999H2.66667C1.19391 15.9999 0 14.8689 0 13.4736V11.7894Z", fill: "white", fillOpacity: 0.5 }) }) });
419
- var icon_poll_default = SvgIconPoll;
421
+ 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';
420
422
 
421
423
  // packages/react-ui/src/assets/icons/icon-prediction.svg
422
- import * as React4 from "react";
423
- import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
424
- var SvgIconPrediction = (props) => /* @__PURE__ */ jsx7("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx7("g", { id: "Icon/Notification/Prediciton", children: /* @__PURE__ */ jsx7("path", { id: "Icon/Prediction", fillRule: "evenodd", clipRule: "evenodd", d: "M16 7.00522C16 7.00522 9.20048 6.81607 9.20048 0C9.20048 6.36168 3.27729 6.95056 2.48756 7.00078L2.40094 7.00522C2.40094 7.00522 9.20048 7.19435 9.20048 14.0104C9.20048 7.64877 15.1234 7.05989 15.9131 7.00964L16 7.00522ZM6.97382 12.5652C6.97382 12.5652 3.48691 12.4724 3.48691 9.13033C3.48691 12.2496 0.449402 12.5384 0.0444186 12.563L0 12.5652C0 12.5652 3.48691 12.6579 3.48691 16C3.48691 12.8807 6.52429 12.592 6.92927 12.5673L6.97382 12.5652Z", fill: "white", fillOpacity: 0.5 }) }) });
425
- var icon_prediction_default = SvgIconPrediction;
424
+ 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';
426
425
 
427
426
  // packages/react-ui/src/assets/icons/icon-trivia.svg
428
- import * as React5 from "react";
429
- import { jsx as jsx8 } from "@emotion/react/jsx-runtime";
430
- var SvgIconTrivia = (props) => /* @__PURE__ */ jsx8("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx8("g", { id: "Icon/Notification/Trivia", children: /* @__PURE__ */ jsx8("path", { id: "Notification/Icon/Trivia", fillRule: "evenodd", clipRule: "evenodd", d: "M2.01663 1.3808C0.739913 1.55586 -0.153153 2.73276 0.021912 4.00948L1.3808 13.9196C1.55586 15.1963 2.73276 16.0894 4.00948 15.9143L13.9196 14.5554C15.1963 14.3803 16.0894 13.2034 15.9143 11.9267L14.5554 2.01663C14.3803 0.739913 13.2034 -0.153153 11.9267 0.021912L2.01663 1.3808ZM9.59613 3.788C9.11431 3.46991 8.47813 3.30151 7.7566 3.30151C7.54377 3.30151 7.32625 3.31671 7.10872 3.34478C6.38836 3.44067 5.68901 3.79034 5.18965 4.30138C4.68445 4.82062 4.4377 5.45563 4.51722 6.04151C4.57452 6.4742 4.90078 6.7537 5.34635 6.7537C5.39429 6.7537 5.44341 6.7502 5.49136 6.74435C6.08778 6.66483 6.21642 6.25436 6.34036 5.85675L6.34045 5.85648C6.48192 5.40401 6.61534 4.97731 7.38585 4.87444C7.46537 4.86391 7.54138 4.85806 7.61506 4.85806C8.16939 4.85806 8.51436 5.15042 8.58454 5.68252C8.65353 6.20293 8.24307 6.61807 7.80684 7.0566L7.80393 7.05954C7.31582 7.55231 6.7639 8.1095 6.86895 8.90083C6.89585 9.10548 6.9859 9.29493 7.12272 9.43644C7.27826 9.599 7.4829 9.68436 7.71331 9.68436C7.75541 9.68436 7.79868 9.68203 7.84311 9.67618C8.46691 9.59324 8.55162 9.23139 8.63338 8.8821L8.63365 8.88097L8.63661 8.86859C8.66723 8.7403 8.69877 8.60813 8.75995 8.48804C8.84649 8.31613 9.06283 8.11265 9.31428 7.87875C9.9142 7.31858 10.734 6.55143 10.582 5.41589C10.4872 4.70603 10.1551 4.15757 9.59611 3.78802L9.59613 3.788ZM8.11605 10.28C8.06927 10.28 8.02132 10.2836 7.97454 10.2894C7.38396 10.3689 6.96765 10.9127 7.04599 11.5033C7.11733 12.0377 7.57808 12.4412 8.1172 12.4412C8.16397 12.4412 8.21192 12.4377 8.25987 12.4318C8.85045 12.3523 9.2656 11.8085 9.18842 11.2179C9.11591 10.6823 8.65517 10.28 8.11605 10.28Z", fill: "white", fillOpacity: 0.5 }) }) });
431
- var icon_trivia_default = SvgIconTrivia;
427
+ 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';
432
428
 
433
429
  // packages/react-ui/src/assets/icons/icon-check-green.svg
434
- import * as React6 from "react";
435
- import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
436
- var SvgIconCheckGreen = (props) => /* @__PURE__ */ jsx9("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx9("g", { id: "Check", children: /* @__PURE__ */ jsx9("path", { id: "Vector", d: "M13.4315 3.18246L5.53321 11.0808L1.99771 7.54527C1.54056 7.08811 0.799913 7.08811 0.342864 7.54527C-0.114288 8.00242 -0.114288 8.74307 0.342864 9.20011L4.70567 13.5629C4.93331 13.7906 5.23415 13.9063 5.53307 13.9063C5.83202 13.9063 6.13096 13.7924 6.36048 13.5629L15.0861 4.83731C15.5432 4.38016 15.5432 3.63951 15.0861 3.18246C14.629 2.72531 13.8884 2.72531 13.4312 3.18246H13.4315Z", fill: "#00BD60" }) }) });
437
- var icon_check_green_default = SvgIconCheckGreen;
430
+ 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';
438
431
 
439
432
  // packages/react-ui/src/assets/icons/icon-cross.svg
440
- import * as React7 from "react";
441
- import { jsx as jsx10, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
442
- var SvgIconCross = (props) => /* @__PURE__ */ jsx10("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxs5("g", { id: "Group 465", children: [
443
- /* @__PURE__ */ jsx10("rect", { id: "Rectangle 368", x: 2, y: 0.506104, width: 16.4992, height: 2.35702, rx: 1.17851, transform: "rotate(45 2 0.506104)", fill: "#9e0a1f" }),
444
- /* @__PURE__ */ jsx10("rect", { id: "Rectangle 369", x: 0.333008, y: 12.1729, width: 16.4992, height: 2.35702, rx: 1.17851, transform: "rotate(-45 0.333008 12.1729)", fill: "#9e0a1f" })
445
- ] }) });
446
- var icon_cross_default = SvgIconCross;
433
+ 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';
447
434
 
448
435
  // packages/react-ui/src/assets/icons/icon-chevron.svg
449
- import * as React8 from "react";
450
- import { jsx as jsx11 } from "@emotion/react/jsx-runtime";
451
- var SvgIconChevron = (props) => /* @__PURE__ */ jsx11("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx11("g", { id: "Chevron", children: /* @__PURE__ */ jsx11("path", { id: "Chevron_2", d: "M12 8.17222C12 8.28783 11.9781 8.39553 11.9342 8.49533C11.8903 8.59513 11.822 8.68992 11.7292 8.7797L6.36949 13.9439C6.21462 14.0965 6.02742 14.1729 5.80787 14.1729C5.65752 14.1729 5.52191 14.1379 5.40104 14.0679C5.28016 13.998 5.1831 13.9039 5.10986 13.7856C5.03662 13.6673 5 13.5345 5 13.3873C5 13.1721 5.08288 12.9818 5.24863 12.8164L10.0807 8.17095L5.24863 3.52799C5.08288 3.36425 5 3.17439 5 2.95841C5 2.81118 5.03662 2.67842 5.10986 2.56013C5.1831 2.44183 5.28016 2.34771 5.40104 2.27777C5.52191 2.20782 5.65752 2.17285 5.80787 2.17285C6.02742 2.17285 6.21462 2.24731 6.36949 2.39624L11.7292 7.56473C11.8211 7.65451 11.889 7.74909 11.9329 7.84846C11.9768 7.94784 11.9991 8.05576 12 8.17222Z", fill: "#FFFFFF" }) }) });
452
- var icon_chevron_default = SvgIconChevron;
436
+ 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';
453
437
 
454
438
  // packages/react-ui/src/lib/gamification/question/styles.tsx
455
439
  import styled5 from "@emotion/styled";
@@ -533,7 +517,7 @@ var ExpiredQuestion = styled5.span`
533
517
  `;
534
518
 
535
519
  // packages/react-ui/src/lib/gamification/question/index.tsx
536
- import { jsx as jsx12, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
520
+ import { jsx as jsx5, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
537
521
  var QuestionTypeData = {
538
522
  [QuestionType.POLL]: { label: "Poll", icon: icon_poll_default },
539
523
  [QuestionType.TRIVIA]: { label: "Trivia", icon: icon_trivia_default },
@@ -558,16 +542,16 @@ var Question = ({
558
542
  if (questionTypeData === void 0) {
559
543
  return null;
560
544
  }
561
- return /* @__PURE__ */ jsxs6(Panel2, { onClick: () => openQuestion?.(questionId), children: [
562
- /* @__PURE__ */ jsx12(QuestionTypeIconWrap, { children: /* @__PURE__ */ jsx12(QuestionTypeIcon, { alt: "question-type-icon", src: questionTypeData.icon }) }),
563
- /* @__PURE__ */ jsxs6(QuestionContent, { children: [
564
- /* @__PURE__ */ jsxs6(QuestionTypeLabel, { children: [
565
- /* @__PURE__ */ jsx12(QuestionTypeTitle, { children: questionTypeData.label }),
566
- questionType === QuestionType.TRIVIA && questionStatus === QuestionStatus.RESOLVED && /* @__PURE__ */ jsx12(ExpiredQuestion, { children: "Expired" })
545
+ return /* @__PURE__ */ jsxs4(Panel2, { onClick: () => openQuestion?.(questionId), children: [
546
+ /* @__PURE__ */ jsx5(QuestionTypeIconWrap, { children: /* @__PURE__ */ jsx5(QuestionTypeIcon, { alt: "question-type-icon", src: questionTypeData.icon }) }),
547
+ /* @__PURE__ */ jsxs4(QuestionContent, { children: [
548
+ /* @__PURE__ */ jsxs4(QuestionTypeLabel, { children: [
549
+ /* @__PURE__ */ jsx5(QuestionTypeTitle, { children: questionTypeData.label }),
550
+ questionType === QuestionType.TRIVIA && questionStatus === QuestionStatus.RESOLVED && /* @__PURE__ */ jsx5(ExpiredQuestion, { children: "Expired" })
567
551
  ] }),
568
- /* @__PURE__ */ jsx12(QuestionSubject, { children: subject || "" })
552
+ /* @__PURE__ */ jsx5(QuestionSubject, { children: subject || "" })
569
553
  ] }),
570
- openForVoting ? /* @__PURE__ */ jsx12(QuestionActionTitle, { children: "play" }) : /* @__PURE__ */ jsx12(QuestionActionIcon, { children: /* @__PURE__ */ jsx12(QuestionStatusIcon, { alt: "question-status-icon", src: QuestionStatusTypeData[status] }) })
554
+ openForVoting ? /* @__PURE__ */ jsx5(QuestionActionTitle, { children: "play" }) : /* @__PURE__ */ jsx5(QuestionActionIcon, { children: /* @__PURE__ */ jsx5(QuestionStatusIcon, { alt: "question-status-icon", src: QuestionStatusTypeData[status] }) })
571
555
  ] });
572
556
  };
573
557
 
@@ -598,19 +582,16 @@ var ItemsContainer = styled6.div`
598
582
  `;
599
583
 
600
584
  // packages/react-ui/src/lib/gamification/question-list/index.tsx
601
- import { jsx as jsx13, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
585
+ import { jsx as jsx6, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
602
586
  var QuestionList = ({ questions, openQuestion }) => {
603
- return /* @__PURE__ */ jsxs7(Container3, { children: [
604
- /* @__PURE__ */ jsx13(Title3, { children: "PICK HISTORY" }),
605
- /* @__PURE__ */ jsx13(ItemsContainer, { children: questions?.map((props) => /* @__PURE__ */ jsx13(Question, { openQuestion, ...props }, props.questionId)) })
587
+ return /* @__PURE__ */ jsxs5(Container3, { children: [
588
+ /* @__PURE__ */ jsx6(Title3, { children: "PICK HISTORY" }),
589
+ /* @__PURE__ */ jsx6(ItemsContainer, { children: questions?.map((props) => /* @__PURE__ */ jsx6(Question, { openQuestion, ...props }, props.questionId)) })
606
590
  ] });
607
591
  };
608
592
 
609
593
  // packages/react-ui/src/assets/icons/icon-trophy.svg
610
- import * as React9 from "react";
611
- import { jsx as jsx14 } from "@emotion/react/jsx-runtime";
612
- var SvgIconTrophy = (props) => /* @__PURE__ */ jsx14("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx14("g", { id: "Trophy", children: /* @__PURE__ */ jsx14("path", { id: "Combined Shape", fillRule: "evenodd", clipRule: "evenodd", d: "M2.76916 3.50002C2.76916 4.49786 2.94705 5.38348 3.30282 6.15692C2.62493 6.01847 2.05883 5.74872 1.6045 5.34768C1.15017 4.94663 0.923008 4.55992 0.923008 4.18752V3.50002H2.76916ZM11.0768 3.50002V4.18752C11.0768 4.55992 10.8497 4.94663 10.3953 5.34768C9.941 5.74872 9.3749 6.01847 8.69701 6.15692C9.05278 5.38348 9.23066 4.49786 9.23066 3.50002H11.0768ZM12 4.1875V3.27083C12 3.07986 11.9327 2.91754 11.7981 2.78385C11.6635 2.65017 11.5 2.58333 11.3077 2.58333H9.23077V1.89583C9.23077 1.58073 9.11779 1.31098 8.89183 1.08659C8.66586 0.862195 8.39423 0.75 8.07692 0.75H3.92308C3.60577 0.75 3.33414 0.862195 3.10817 1.08659C2.88221 1.31098 2.76923 1.58073 2.76923 1.89583V2.58333H0.692308C0.499999 2.58333 0.336539 2.65017 0.201923 2.78385C0.067307 2.91754 0 3.07986 0 3.27083V4.1875C0 4.52648 0.0997586 4.86784 0.299279 5.21159C0.498799 5.55534 0.768027 5.86567 1.10697 6.14258C1.44592 6.41949 1.86178 6.65223 2.35457 6.84082C2.84736 7.02941 3.36538 7.13563 3.90865 7.15951C4.11058 7.41732 4.33894 7.6441 4.59375 7.83984C4.77644 8.00217 4.90264 8.17524 4.97236 8.35905C5.04207 8.54286 5.07692 8.75651 5.07692 9C5.07692 9.25781 5.00361 9.47504 4.85697 9.65169C4.71034 9.82834 4.47596 9.91667 4.15385 9.91667C3.79327 9.91667 3.47236 10.0253 3.19111 10.2425C2.90985 10.4597 2.76923 10.7331 2.76923 11.0625V11.5208C2.76923 11.5877 2.79087 11.6426 2.83413 11.6855C2.8774 11.7285 2.93269 11.75 3 11.75H9C9.06731 11.75 9.1226 11.7285 9.16586 11.6855C9.20913 11.6426 9.23077 11.5877 9.23077 11.5208V11.0625C9.23077 10.7331 9.09015 10.4597 8.80889 10.2425C8.52764 10.0253 8.20673 9.91667 7.84615 9.91667C7.52404 9.91667 7.28966 9.82834 7.14303 9.65169C6.99639 9.47504 6.92308 9.25781 6.92308 9C6.92308 8.75651 6.95793 8.54286 7.02764 8.35905C7.09736 8.17524 7.22356 8.00217 7.40625 7.83984C7.66106 7.6441 7.88942 7.41732 8.09135 7.15951C8.63462 7.13563 9.15264 7.02941 9.64543 6.84082C10.1382 6.65223 10.5541 6.41949 10.893 6.14258C11.232 5.86567 11.5012 5.55534 11.7007 5.21159C11.9002 4.86784 12 4.52648 12 4.1875ZM5.07033 5.38491L6.0383 4.87503L7.00627 5.38491L6.8214 4.30497L7.60451 3.54016L6.52228 3.3826L6.0383 2.40003L5.55431 3.3826L4.47209 3.54016L5.25519 4.30497L5.07033 5.38491Z", fill: "#F2C94C" }) }) });
613
- var icon_trophy_default = SvgIconTrophy;
594
+ 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';
614
595
 
615
596
  // packages/react-ui/src/lib/gamification/user-statistics/components/statistics/styles.tsx
616
597
  import styled7 from "@emotion/styled";
@@ -628,10 +609,10 @@ var Indicator = styled7.div`
628
609
  `;
629
610
 
630
611
  // packages/react-ui/src/lib/gamification/user-statistics/components/statistics/index.tsx
631
- import { jsx as jsx15, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
632
- var Statistics = ({ indicator, title }) => /* @__PURE__ */ jsxs8(Container4, { children: [
633
- /* @__PURE__ */ jsx15(Indicator, { children: indicator }),
634
- /* @__PURE__ */ jsx15("p", { children: title })
612
+ import { jsx as jsx7, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
613
+ var Statistics = ({ indicator, title }) => /* @__PURE__ */ jsxs6(Container4, { children: [
614
+ /* @__PURE__ */ jsx7(Indicator, { children: indicator }),
615
+ /* @__PURE__ */ jsx7("p", { children: title })
635
616
  ] });
636
617
 
637
618
  // packages/react-ui/src/lib/gamification/user-statistics/components/rank/styles.tsx
@@ -656,10 +637,10 @@ var Indicator2 = styled8.div`
656
637
  `;
657
638
 
658
639
  // packages/react-ui/src/lib/gamification/user-statistics/components/rank/index.tsx
659
- import { jsx as jsx16, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
660
- var Rank = ({ indicator, title }) => /* @__PURE__ */ jsxs9(Container5, { children: [
661
- /* @__PURE__ */ jsx16(Title4, { children: title }),
662
- /* @__PURE__ */ jsx16(Indicator2, { children: indicator })
640
+ import { jsx as jsx8, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
641
+ var Rank = ({ indicator, title }) => /* @__PURE__ */ jsxs7(Container5, { children: [
642
+ /* @__PURE__ */ jsx8(Title4, { children: title }),
643
+ /* @__PURE__ */ jsx8(Indicator2, { children: indicator })
663
644
  ] });
664
645
 
665
646
  // packages/react-ui/src/lib/gamification/user-statistics/styles.tsx
@@ -762,7 +743,7 @@ var AvatarPlaceholder = styled9.div`
762
743
  `;
763
744
 
764
745
  // packages/react-ui/src/lib/gamification/user-statistics/index.tsx
765
- import { jsx as jsx17, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
746
+ import { jsx as jsx9, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
766
747
  var abbreviate = (name) => name.split(/\s+/).map((p) => p[0]).join("").toUpperCase();
767
748
  var UserStatistics = ({
768
749
  avatar,
@@ -776,20 +757,20 @@ var UserStatistics = ({
776
757
  incorrect,
777
758
  successRate
778
759
  }) => {
779
- return /* @__PURE__ */ jsxs10(Container6, { children: [
780
- /* @__PURE__ */ jsxs10(TopInfo, { children: [
781
- /* @__PURE__ */ jsxs10(User, { children: [
782
- avatar && /* @__PURE__ */ jsx17(Avatar, { alt: "avatar", src: avatar }),
783
- !avatar && /* @__PURE__ */ jsx17(AvatarPlaceholder, { children: abbreviate(name) }),
784
- /* @__PURE__ */ jsxs10(UserInfo, { children: [
785
- /* @__PURE__ */ jsx17(UserName, { children: name }),
786
- /* @__PURE__ */ jsxs10(UserRating, { children: [
787
- /* @__PURE__ */ jsx17(TrophyIcon, { alt: "rank-icon", src: icon_trophy_default }),
788
- /* @__PURE__ */ jsxs10(Rts, { children: [
789
- /* @__PURE__ */ jsx17(RtsIndicator, { children: points || "-" }),
760
+ return /* @__PURE__ */ jsxs8(Container6, { children: [
761
+ /* @__PURE__ */ jsxs8(TopInfo, { children: [
762
+ /* @__PURE__ */ jsxs8(User, { children: [
763
+ avatar && /* @__PURE__ */ jsx9(Avatar, { alt: "avatar", src: avatar }),
764
+ !avatar && /* @__PURE__ */ jsx9(AvatarPlaceholder, { children: abbreviate(name) }),
765
+ /* @__PURE__ */ jsxs8(UserInfo, { children: [
766
+ /* @__PURE__ */ jsx9(UserName, { children: name }),
767
+ /* @__PURE__ */ jsxs8(UserRating, { children: [
768
+ /* @__PURE__ */ jsx9(TrophyIcon, { alt: "rank-icon", src: icon_trophy_default }),
769
+ /* @__PURE__ */ jsxs8(Rts, { children: [
770
+ /* @__PURE__ */ jsx9(RtsIndicator, { children: points || "-" }),
790
771
  "RTS"
791
772
  ] }),
792
- /* @__PURE__ */ jsxs10(Top, { children: [
773
+ /* @__PURE__ */ jsxs8(Top, { children: [
793
774
  "TOP ",
794
775
  grade,
795
776
  "%"
@@ -797,41 +778,31 @@ var UserStatistics = ({
797
778
  ] })
798
779
  ] })
799
780
  ] }),
800
- /* @__PURE__ */ jsxs10(Ranks, { children: [
801
- /* @__PURE__ */ jsx17(Rank, { title: "Friens rank", indicator: friendsRank || "-" }),
802
- /* @__PURE__ */ jsx17(Rank, { title: "Global rank", indicator: globalRank || "-" })
781
+ /* @__PURE__ */ jsxs8(Ranks, { children: [
782
+ /* @__PURE__ */ jsx9(Rank, { title: "Friens rank", indicator: friendsRank || "-" }),
783
+ /* @__PURE__ */ jsx9(Rank, { title: "Global rank", indicator: globalRank || "-" })
803
784
  ] })
804
785
  ] }),
805
- /* @__PURE__ */ jsxs10(BottomInfo, { children: [
806
- /* @__PURE__ */ jsx17(Statistics, { indicator: winStreak || "-", title: "Win streak" }),
807
- /* @__PURE__ */ jsx17(Statistics, { indicator: correct || "-", title: "Correct" }),
808
- /* @__PURE__ */ jsx17(Statistics, { indicator: incorrect || "-", title: "Incorrect" }),
809
- /* @__PURE__ */ jsx17(Statistics, { indicator: `${successRate || "-"}%`, title: "Success rate" })
786
+ /* @__PURE__ */ jsxs8(BottomInfo, { children: [
787
+ /* @__PURE__ */ jsx9(Statistics, { indicator: winStreak || "-", title: "Win streak" }),
788
+ /* @__PURE__ */ jsx9(Statistics, { indicator: correct || "-", title: "Correct" }),
789
+ /* @__PURE__ */ jsx9(Statistics, { indicator: incorrect || "-", title: "Incorrect" }),
790
+ /* @__PURE__ */ jsx9(Statistics, { indicator: `${successRate || "-"}%`, title: "Success rate" })
810
791
  ] })
811
792
  ] });
812
793
  };
813
794
 
795
+ // packages/react-ui/src/lib/gamification/vote/index.tsx
796
+ import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
797
+
814
798
  // packages/react-ui/src/assets/icons/icon-check.svg
815
- import * as React10 from "react";
816
- import { jsx as jsx18 } from "@emotion/react/jsx-runtime";
817
- var SvgIconCheck = (props) => /* @__PURE__ */ jsx18("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx18("g", { id: "Checkmark", children: /* @__PURE__ */ jsx18("path", { id: "Selected", fillRule: "evenodd", clipRule: "evenodd", d: "M24 12.002C24 18.6294 18.6274 24.002 12 24.002C5.37258 24.002 0 18.6294 0 12.002C0 5.37454 5.37258 0.00195312 12 0.00195312C18.6274 0.00195312 24 5.37454 24 12.002ZM17.4086 8.15357C16.94 7.68494 16.1802 7.68494 15.7116 8.15357L10.4072 14.9579L7.62573 13.1036C7.07429 12.736 6.32925 12.885 5.96163 13.4365C5.59401 13.9879 5.74301 14.7329 6.29445 15.1006L9.89445 17.5006C10.3704 17.8179 11.0041 17.7551 11.4086 17.3506L17.4086 9.85063C17.8772 9.382 17.8772 8.6222 17.4086 8.15357Z", fill: "#00BD60" }) }) });
818
- var icon_check_default = SvgIconCheck;
799
+ 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';
819
800
 
820
801
  // packages/react-ui/src/assets/icons/icon-close.svg
821
- import * as React11 from "react";
822
- import { jsx as jsx19, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
823
- var SvgIconClose = (props) => /* @__PURE__ */ jsxs11("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
824
- /* @__PURE__ */ jsx19("rect", { y: 195312e-8, width: 24, height: 24, rx: 12, fill: "#F80022" }),
825
- /* @__PURE__ */ jsx19("rect", { x: 8.25, y: 7.00195, width: 12.3744, height: 1.76777, rx: 0.883884, transform: "rotate(45 8.25 7.00195)", fill: "white" }),
826
- /* @__PURE__ */ jsx19("rect", { x: 7, y: 15.752, width: 12.3744, height: 1.76777, rx: 0.883884, transform: "rotate(-45 7 15.752)", fill: "white" })
827
- ] });
828
- var icon_close_default = SvgIconClose;
802
+ 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';
829
803
 
830
804
  // packages/react-ui/src/assets/icons/icon-check-white.svg
831
- import * as React12 from "react";
832
- import { jsx as jsx20 } from "@emotion/react/jsx-runtime";
833
- var SvgIconCheckWhite = (props) => /* @__PURE__ */ jsx20("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx20("g", { id: "Checkmark", children: /* @__PURE__ */ jsx20("path", { id: "Selected", fillRule: "evenodd", clipRule: "evenodd", d: "M24 12.002C24 18.6294 18.6274 24.002 12 24.002C5.37258 24.002 0 18.6294 0 12.002C0 5.37454 5.37258 0.00195312 12 0.00195312C18.6274 0.00195312 24 5.37454 24 12.002ZM17.4086 8.15357C16.94 7.68494 16.1802 7.68494 15.7116 8.15357L10.4072 14.9579L7.62573 13.1036C7.07429 12.736 6.32925 12.885 5.96163 13.4365C5.59401 13.9879 5.74301 14.7329 6.29445 15.1006L9.89445 17.5006C10.3704 17.8179 11.0041 17.7551 11.4086 17.3506L17.4086 9.85063C17.8772 9.382 17.8772 8.6222 17.4086 8.15357Z", fill: "#FFFFFF" }) }) });
834
- var icon_check_white_default = SvgIconCheckWhite;
805
+ 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';
835
806
 
836
807
  // packages/react-ui/src/lib/gamification/vote/components/voting-option/styles.tsx
837
808
  import styled10 from "@emotion/styled";
@@ -919,7 +890,7 @@ var CheckIcon = styled10.img`
919
890
  `;
920
891
 
921
892
  // packages/react-ui/src/lib/gamification/vote/components/voting-option/index.tsx
922
- import { jsx as jsx21, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
893
+ import { jsx as jsx10, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
923
894
  var VotingOption = ({
924
895
  icon,
925
896
  id,
@@ -928,20 +899,21 @@ var VotingOption = ({
928
899
  disabled,
929
900
  percentage,
930
901
  onVote,
902
+ toggleIsLoadingSubmitAnswer,
931
903
  correct,
932
904
  questionAnswered,
933
905
  hasCorrectAnswer,
934
906
  answered
935
907
  }) => {
936
908
  if (questionAnswered && answered) {
937
- return /* @__PURE__ */ jsxs12(AnsweredContainer, { answeredCorrect: !hasCorrectAnswer || correct, questionAnswered: false, children: [
938
- /* @__PURE__ */ jsx21(ButtonPct, { style: { width: `${percentage}%` } }),
939
- /* @__PURE__ */ jsxs12(Button, { disabled, onClick: () => onVote(questionId, id), children: [
940
- icon && /* @__PURE__ */ jsx21(Icon2, { alt: "option-icon", src: icon }),
941
- /* @__PURE__ */ jsx21(Title5, { children: title }),
942
- /* @__PURE__ */ jsxs12(Indicators, { children: [
943
- hasCorrectAnswer && correct && /* @__PURE__ */ jsx21(CheckIconWrap, { children: /* @__PURE__ */ jsx21(CheckIcon, { alt: "icon-correct", src: answered ? icon_check_white_default : icon_check_default }) }),
944
- /* @__PURE__ */ jsxs12(Percentage, { children: [
909
+ return /* @__PURE__ */ jsxs9(AnsweredContainer, { answeredCorrect: !hasCorrectAnswer || correct, questionAnswered: false, children: [
910
+ /* @__PURE__ */ jsx10(ButtonPct, { style: { width: `${percentage}%` } }),
911
+ /* @__PURE__ */ jsxs9(Button, { disabled, onClick: () => onVote(questionId, id), children: [
912
+ icon && /* @__PURE__ */ jsx10(Icon2, { alt: "option-icon", src: icon }),
913
+ /* @__PURE__ */ jsx10(Title5, { children: title }),
914
+ /* @__PURE__ */ jsxs9(Indicators, { children: [
915
+ hasCorrectAnswer && correct && /* @__PURE__ */ jsx10(CheckIconWrap, { children: /* @__PURE__ */ jsx10(CheckIcon, { alt: "icon-correct", src: answered ? icon_check_white_default : icon_check_default }) }),
916
+ /* @__PURE__ */ jsxs9(Percentage, { children: [
945
917
  percentage,
946
918
  "%"
947
919
  ] })
@@ -949,19 +921,29 @@ var VotingOption = ({
949
921
  ] })
950
922
  ] });
951
923
  }
952
- return /* @__PURE__ */ jsxs12(Container7, { questionAnswered, children: [
953
- questionAnswered && /* @__PURE__ */ jsx21(ButtonPct, { style: { width: `${percentage}%` } }),
954
- /* @__PURE__ */ jsxs12(Button, { disabled, onClick: () => onVote(questionId, id), children: [
955
- icon && /* @__PURE__ */ jsx21(Icon2, { alt: "option-icon", src: icon }),
956
- /* @__PURE__ */ jsx21(Title5, { children: title }),
957
- questionAnswered && /* @__PURE__ */ jsxs12(Indicators, { children: [
958
- hasCorrectAnswer && correct && /* @__PURE__ */ jsx21(CheckIconWrap, { children: /* @__PURE__ */ jsx21(CheckIcon, { alt: "icon-correct", src: answered ? icon_check_white_default : icon_check_default }) }),
959
- /* @__PURE__ */ jsxs12(Percentage, { children: [
960
- percentage,
961
- "%"
962
- ] })
963
- ] })
964
- ] })
924
+ return /* @__PURE__ */ jsxs9(Container7, { questionAnswered, children: [
925
+ questionAnswered && /* @__PURE__ */ jsx10(ButtonPct, { style: { width: `${percentage}%` } }),
926
+ /* @__PURE__ */ jsxs9(
927
+ Button,
928
+ {
929
+ disabled,
930
+ onClick: () => {
931
+ toggleIsLoadingSubmitAnswer(true);
932
+ onVote(questionId, id);
933
+ },
934
+ children: [
935
+ icon && /* @__PURE__ */ jsx10(Icon2, { alt: "option-icon", src: icon }),
936
+ /* @__PURE__ */ jsx10(Title5, { children: title }),
937
+ questionAnswered && /* @__PURE__ */ jsxs9(Indicators, { children: [
938
+ hasCorrectAnswer && correct && /* @__PURE__ */ jsx10(CheckIconWrap, { children: /* @__PURE__ */ jsx10(CheckIcon, { alt: "icon-correct", src: answered ? icon_check_white_default : icon_check_default }) }),
939
+ /* @__PURE__ */ jsxs9(Percentage, { children: [
940
+ percentage,
941
+ "%"
942
+ ] })
943
+ ] })
944
+ ]
945
+ }
946
+ )
965
947
  ] });
966
948
  };
967
949
 
@@ -983,11 +965,23 @@ var Title6 = styled11.div`
983
965
  var Options = styled11.div`
984
966
  overflow-y: auto;
985
967
  max-height: 220px;
968
+ position: relative;
986
969
 
987
970
  & > div:not(:last-child) {
988
971
  margin-bottom: 12px;
989
972
  }
990
973
  `;
974
+ var Loader = styled11.div`
975
+ position: absolute;
976
+ left: 0px;
977
+ background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_VOTE_CONTAINER};
978
+ width: 100%;
979
+ height: 100%;
980
+ z-index: 1;
981
+ display: flex;
982
+ justify-content: center;
983
+ align-items: center;
984
+ `;
991
985
  var Feedback = styled11.div`
992
986
  padding: 14px 12px 14px 16px;
993
987
  display: flex;
@@ -1017,7 +1011,7 @@ var FeedbackDescription = styled11.div`
1017
1011
  `;
1018
1012
 
1019
1013
  // packages/react-ui/src/lib/gamification/vote/index.tsx
1020
- import { jsx as jsx22, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
1014
+ import { jsx as jsx11, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
1021
1015
  var Vote = ({
1022
1016
  title,
1023
1017
  questionId,
@@ -1027,14 +1021,35 @@ var Vote = ({
1027
1021
  questionAnsweredCorrectly,
1028
1022
  questionType
1029
1023
  }) => {
1030
- return /* @__PURE__ */ jsxs13(Container8, { children: [
1031
- /* @__PURE__ */ jsx22(Title6, { children: title }),
1032
- /* @__PURE__ */ jsx22(Options, { children: options.map((props) => /* @__PURE__ */ jsx22(VotingOption, { questionId, ...props }, props.id)) }),
1033
- questionAnswered && questionType === QuestionType.TRIVIA && /* @__PURE__ */ jsxs13(Feedback, { children: [
1034
- /* @__PURE__ */ jsx22(FeedbackIcon, { alt: "reaction-to-answer", src: questionAnsweredCorrectly ? icon_check_default : icon_close_default }),
1035
- /* @__PURE__ */ jsxs13("div", { children: [
1036
- /* @__PURE__ */ jsx22(FeedbackTitle, { children: questionAnsweredCorrectly ? feedbackMessages.correctFeedback.title : feedbackMessages.incorrectFeedback.title }),
1037
- /* @__PURE__ */ jsx22(FeedbackDescription, { children: questionAnsweredCorrectly ? feedbackMessages.correctFeedback.description : feedbackMessages.incorrectFeedback.description })
1024
+ const [isLoadingSubmitAnswer, setIsLoadingSubmitAnswer] = useState2(false);
1025
+ const toggleIsLoadingSubmitAnswer = useCallback2(
1026
+ (flag) => {
1027
+ setIsLoadingSubmitAnswer(flag);
1028
+ },
1029
+ [setIsLoadingSubmitAnswer]
1030
+ );
1031
+ useEffect2(() => {
1032
+ toggleIsLoadingSubmitAnswer(false);
1033
+ }, [options, toggleIsLoadingSubmitAnswer]);
1034
+ return /* @__PURE__ */ jsxs10(Container8, { children: [
1035
+ /* @__PURE__ */ jsx11(Title6, { children: title }),
1036
+ /* @__PURE__ */ jsxs10(Options, { children: [
1037
+ isLoadingSubmitAnswer && /* @__PURE__ */ jsx11(Loader, { children: "Loading..." }),
1038
+ options.map((props) => /* @__PURE__ */ jsx11(
1039
+ VotingOption,
1040
+ {
1041
+ toggleIsLoadingSubmitAnswer,
1042
+ questionId,
1043
+ ...props
1044
+ },
1045
+ props.id
1046
+ ))
1047
+ ] }),
1048
+ questionAnswered && questionType === QuestionType.TRIVIA && /* @__PURE__ */ jsxs10(Feedback, { children: [
1049
+ /* @__PURE__ */ jsx11(FeedbackIcon, { alt: "reaction-to-answer", src: questionAnsweredCorrectly ? icon_check_default : icon_close_default }),
1050
+ /* @__PURE__ */ jsxs10("div", { children: [
1051
+ /* @__PURE__ */ jsx11(FeedbackTitle, { children: questionAnsweredCorrectly ? feedbackMessages.correctFeedback.title : feedbackMessages.incorrectFeedback.title }),
1052
+ /* @__PURE__ */ jsx11(FeedbackDescription, { children: questionAnsweredCorrectly ? feedbackMessages.correctFeedback.description : feedbackMessages.incorrectFeedback.description })
1038
1053
  ] })
1039
1054
  ] })
1040
1055
  ] });
@@ -1048,13 +1063,13 @@ import { useStore as useStore5 } from "@nanostores/react";
1048
1063
 
1049
1064
  // packages/react-ui/src/lib/demo/components/UserSummary.tsx
1050
1065
  import { useStore } from "@nanostores/react";
1051
- import { jsx as jsx23 } from "@emotion/react/jsx-runtime";
1066
+ import { jsx as jsx12 } from "@emotion/react/jsx-runtime";
1052
1067
  var UserSummary = ({ store: store2 }) => {
1053
1068
  const { data: user } = useStore(store2);
1054
1069
  if (!user?.summary) {
1055
- return /* @__PURE__ */ jsx23("div", { children: "wait user..." });
1070
+ return /* @__PURE__ */ jsx12("div", { children: "wait user..." });
1056
1071
  }
1057
- return /* @__PURE__ */ jsx23(
1072
+ return /* @__PURE__ */ jsx12(
1058
1073
  UserStatistics,
1059
1074
  {
1060
1075
  avatar: user.summary.avatar,
@@ -1073,31 +1088,25 @@ var UserSummary = ({ store: store2 }) => {
1073
1088
 
1074
1089
  // packages/react-ui/src/lib/demo/components/QuestionsList.tsx
1075
1090
  import { useStore as useStore2 } from "@nanostores/react";
1076
- import { jsx as jsx24 } from "@emotion/react/jsx-runtime";
1091
+ import { jsx as jsx13 } from "@emotion/react/jsx-runtime";
1077
1092
  var QuestionsList = ({ store: store2, openQuestion }) => {
1078
1093
  const { data: questions } = useStore2(store2);
1079
1094
  if (!questions) {
1080
- return /* @__PURE__ */ jsx24("div", { children: "wait questions..." });
1095
+ return /* @__PURE__ */ jsx13("div", { children: "wait questions..." });
1081
1096
  }
1082
- return /* @__PURE__ */ jsx24(QuestionList, { openQuestion, questions });
1097
+ return /* @__PURE__ */ jsx13(QuestionList, { openQuestion, questions });
1083
1098
  };
1084
1099
 
1085
1100
  // packages/react-ui/src/lib/demo/components/Question.tsx
1086
1101
  import styled14 from "@emotion/styled";
1087
1102
  import { useStore as useStore3 } from "@nanostores/react";
1088
- import { useState as useState2, useCallback as useCallback2, useMemo } from "react";
1103
+ import { useState as useState3, useCallback as useCallback3, useMemo } from "react";
1089
1104
 
1090
1105
  // packages/react-ui/src/assets/icons/icon-trophy-green.svg
1091
- import * as React13 from "react";
1092
- import { jsx as jsx25 } from "@emotion/react/jsx-runtime";
1093
- var SvgIconTrophyGreen = (props) => /* @__PURE__ */ jsx25("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx25("g", { id: "Trophy", children: /* @__PURE__ */ jsx25("path", { id: "Combined Shape", fillRule: "evenodd", clipRule: "evenodd", d: "M2.76916 3.50002C2.76916 4.49786 2.94705 5.38348 3.30282 6.15692C2.62493 6.01847 2.05883 5.74872 1.6045 5.34768C1.15017 4.94663 0.923008 4.55992 0.923008 4.18752V3.50002H2.76916ZM11.0768 3.50002V4.18752C11.0768 4.55992 10.8497 4.94663 10.3953 5.34768C9.941 5.74872 9.3749 6.01847 8.69701 6.15692C9.05278 5.38348 9.23066 4.49786 9.23066 3.50002H11.0768ZM12 4.1875V3.27083C12 3.07986 11.9327 2.91754 11.7981 2.78385C11.6635 2.65017 11.5 2.58333 11.3077 2.58333H9.23077V1.89583C9.23077 1.58073 9.11779 1.31098 8.89183 1.08659C8.66586 0.862195 8.39423 0.75 8.07692 0.75H3.92308C3.60577 0.75 3.33414 0.862195 3.10817 1.08659C2.88221 1.31098 2.76923 1.58073 2.76923 1.89583V2.58333H0.692308C0.499999 2.58333 0.336539 2.65017 0.201923 2.78385C0.067307 2.91754 0 3.07986 0 3.27083V4.1875C0 4.52648 0.0997586 4.86784 0.299279 5.21159C0.498799 5.55534 0.768027 5.86567 1.10697 6.14258C1.44592 6.41949 1.86178 6.65223 2.35457 6.84082C2.84736 7.02941 3.36538 7.13563 3.90865 7.15951C4.11058 7.41732 4.33894 7.6441 4.59375 7.83984C4.77644 8.00217 4.90264 8.17524 4.97236 8.35905C5.04207 8.54286 5.07692 8.75651 5.07692 9C5.07692 9.25781 5.00361 9.47504 4.85697 9.65169C4.71034 9.82834 4.47596 9.91667 4.15385 9.91667C3.79327 9.91667 3.47236 10.0253 3.19111 10.2425C2.90985 10.4597 2.76923 10.7331 2.76923 11.0625V11.5208C2.76923 11.5877 2.79087 11.6426 2.83413 11.6855C2.8774 11.7285 2.93269 11.75 3 11.75H9C9.06731 11.75 9.1226 11.7285 9.16586 11.6855C9.20913 11.6426 9.23077 11.5877 9.23077 11.5208V11.0625C9.23077 10.7331 9.09015 10.4597 8.80889 10.2425C8.52764 10.0253 8.20673 9.91667 7.84615 9.91667C7.52404 9.91667 7.28966 9.82834 7.14303 9.65169C6.99639 9.47504 6.92308 9.25781 6.92308 9C6.92308 8.75651 6.95793 8.54286 7.02764 8.35905C7.09736 8.17524 7.22356 8.00217 7.40625 7.83984C7.66106 7.6441 7.88942 7.41732 8.09135 7.15951C8.63462 7.13563 9.15264 7.02941 9.64543 6.84082C10.1382 6.65223 10.5541 6.41949 10.893 6.14258C11.232 5.86567 11.5012 5.55534 11.7007 5.21159C11.9002 4.86784 12 4.52648 12 4.1875ZM5.07033 5.38491L6.0383 4.87503L7.00627 5.38491L6.8214 4.30497L7.60451 3.54016L6.52228 3.3826L6.0383 2.40003L5.55431 3.3826L4.47209 3.54016L5.25519 4.30497L5.07033 5.38491Z", fill: "white" }) }) });
1094
- var icon_trophy_green_default = SvgIconTrophyGreen;
1106
+ 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';
1095
1107
 
1096
1108
  // packages/react-ui/src/assets/icons/icon-thumb-down.svg
1097
- import * as React14 from "react";
1098
- import { jsx as jsx26 } from "@emotion/react/jsx-runtime";
1099
- var SvgIconThumbDown = (props) => /* @__PURE__ */ jsx26("svg", { xmlns: "http://www.w3.org/2000/svg", width: 22, height: 22, viewBox: "0 0 22 22", fill: "none", ...props, children: /* @__PURE__ */ jsx26("path", { d: "M5.5 2.78867V12.4137C5.5 13.1729 4.88426 13.75 4.125 13.75H1.375C0.615742 13.75 0 13.1343 0 12.4137V2.82734C0 2.06808 0.615742 1.49102 1.375 1.49102H4.125C4.88555 1.41367 5.5 1.99375 5.5 2.78867ZM22 12.3707C22 13.5094 21.077 14.4323 19.9375 14.4323H13.6426C14.621 16.0613 15.1259 17.9077 15.1259 18.5582C15.125 19.5714 14.3301 20.625 12.998 20.625C10.2854 20.625 11.8654 17.3529 8.34883 14.5406L7.64844 13.982C7.14141 13.5738 6.88359 12.9766 6.8793 12.375C6.87829 12.374 6.8793 12.375 6.8793 12.375L6.875 5.5C6.875 4.85117 7.18064 4.23973 7.7 3.85043L9.16695 2.75086C10.3555 1.85625 11.8035 1.375 13.2902 1.375H15.8125C16.952 1.375 17.875 2.29754 17.875 3.43664C17.875 3.59283 17.8544 3.74357 17.8215 3.88996C18.6484 4.15937 19.25 4.92422 19.25 5.84375C19.25 6.23683 19.1341 6.60043 18.9432 6.91281C19.8988 7.08984 20.625 7.92773 20.625 8.9332C20.625 9.47031 20.4148 9.955 20.0784 10.322C21.1492 10.3941 22 11.2793 22 12.3707Z", fill: "white" }) });
1100
- var icon_thumb_down_default = SvgIconThumbDown;
1109
+ 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';
1101
1110
 
1102
1111
  // packages/react-ui/src/lib/gamification/vote/components/voting-header/styles.tsx
1103
1112
  import styled12 from "@emotion/styled";
@@ -1186,17 +1195,17 @@ var PointLabel = styled13.span`
1186
1195
  `;
1187
1196
 
1188
1197
  // packages/react-ui/src/lib/gamification/vote/components/voting-header/components/points/index.tsx
1189
- import { jsx as jsx27, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
1190
- var Points = ({ points }) => /* @__PURE__ */ jsxs14(Container10, { children: [
1191
- /* @__PURE__ */ jsx27(Title7, { children: "YOU WON" }),
1192
- /* @__PURE__ */ jsxs14(PointContainer, { children: [
1193
- /* @__PURE__ */ jsx27(Point, { children: points }),
1194
- /* @__PURE__ */ jsx27(PointLabel, { children: "PTS" })
1198
+ import { jsx as jsx14, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
1199
+ var Points = ({ points }) => /* @__PURE__ */ jsxs11(Container10, { children: [
1200
+ /* @__PURE__ */ jsx14(Title7, { children: "YOU WON" }),
1201
+ /* @__PURE__ */ jsxs11(PointContainer, { children: [
1202
+ /* @__PURE__ */ jsx14(Point, { children: points }),
1203
+ /* @__PURE__ */ jsx14(PointLabel, { children: "PTS" })
1195
1204
  ] })
1196
1205
  ] });
1197
1206
 
1198
1207
  // packages/react-ui/src/lib/gamification/vote/components/voting-header/index.tsx
1199
- import { Fragment, jsx as jsx28, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
1208
+ import { Fragment, jsx as jsx15, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
1200
1209
  var VotingHeader = ({
1201
1210
  logo,
1202
1211
  points,
@@ -1211,38 +1220,31 @@ var VotingHeader = ({
1211
1220
  const successTriviaFeedback = isShowTriviaFeedback && questionAnsweredCorrectly;
1212
1221
  const errorTriviaFeedback = isShowTriviaFeedback && !questionAnsweredCorrectly;
1213
1222
  const isShowPredictionFeedback = questionAnswered && questionType === QuestionType.PREDICTION;
1214
- return /* @__PURE__ */ jsxs15(Container9, { children: [
1215
- /* @__PURE__ */ jsxs15(RightBlock, { children: [
1216
- /* @__PURE__ */ jsxs15(Interactive, { children: [
1217
- isShowTimer && /* @__PURE__ */ jsx28(Timer, { setTimeToExpire }),
1218
- successTriviaFeedback && /* @__PURE__ */ jsxs15(Fragment, { children: [
1219
- /* @__PURE__ */ jsx28(Points, { points }),
1220
- /* @__PURE__ */ jsx28(ReactionIconWrap, { isSuccess: true, children: /* @__PURE__ */ jsx28(ReactionIcon, { alt: "reaction-icon", src: icon_trophy_green_default }) })
1223
+ return /* @__PURE__ */ jsxs12(Container9, { children: [
1224
+ /* @__PURE__ */ jsxs12(RightBlock, { children: [
1225
+ /* @__PURE__ */ jsxs12(Interactive, { children: [
1226
+ isShowTimer && /* @__PURE__ */ jsx15(Timer, { setTimeToExpire }),
1227
+ successTriviaFeedback && /* @__PURE__ */ jsxs12(Fragment, { children: [
1228
+ /* @__PURE__ */ jsx15(Points, { points }),
1229
+ /* @__PURE__ */ jsx15(ReactionIconWrap, { isSuccess: true, children: /* @__PURE__ */ jsx15(ReactionIcon, { alt: "reaction-icon", src: icon_trophy_green_default }) })
1221
1230
  ] }),
1222
- errorTriviaFeedback && /* @__PURE__ */ jsxs15(Fragment, { children: [
1223
- /* @__PURE__ */ jsx28(Points, { points: 0 }),
1224
- /* @__PURE__ */ jsx28(ReactionIconWrap, { isSuccess: false, children: /* @__PURE__ */ jsx28(ReactionIcon, { alt: "reaction-icon", src: icon_thumb_down_default }) })
1231
+ errorTriviaFeedback && /* @__PURE__ */ jsxs12(Fragment, { children: [
1232
+ /* @__PURE__ */ jsx15(Points, { points: 0 }),
1233
+ /* @__PURE__ */ jsx15(ReactionIconWrap, { isSuccess: false, children: /* @__PURE__ */ jsx15(ReactionIcon, { alt: "reaction-icon", src: icon_thumb_down_default }) })
1225
1234
  ] }),
1226
- isShowPredictionFeedback && /* @__PURE__ */ jsx28(Points, { points })
1235
+ isShowPredictionFeedback && /* @__PURE__ */ jsx15(Points, { points })
1227
1236
  ] }),
1228
- /* @__PURE__ */ jsx28(ExitBtn, { onClick: closeQuestion, children: /* @__PURE__ */ jsx28(ExitIcon, { alt: "exit-icon", src: icon_exit_default }) })
1237
+ /* @__PURE__ */ jsx15(ExitBtn, { onClick: closeQuestion, children: /* @__PURE__ */ jsx15(ExitIcon, { alt: "exit-icon", src: icon_exit_default }) })
1229
1238
  ] }),
1230
- logo && /* @__PURE__ */ jsx28(Logo, { src: logo })
1239
+ logo && /* @__PURE__ */ jsx15(Logo, { src: logo })
1231
1240
  ] });
1232
1241
  };
1233
1242
 
1234
1243
  // packages/react-ui/src/assets/icons/fedex.svg
1235
- import * as React15 from "react";
1236
- import { jsx as jsx29, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
1237
- var SvgFedex = (props) => /* @__PURE__ */ jsx29("svg", { width: 68, height: 22, viewBox: "0 0 68 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxs16("g", { id: "Vector", children: [
1238
- /* @__PURE__ */ jsx29("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M56.6155 7.44146H50.7066L56.3072 13.8615L50.7066 20.2805H56.4357L59.1587 17.137L61.9068 20.2805H67.84L62.19 13.8348L67.7636 7.44146H62.0606L59.3897 10.5602L56.6155 7.44146ZM62.2721 7.91659L59.3964 11.2747L56.4092 7.91659H51.7446L56.9307 13.8615L51.7447 19.8054H56.2257L59.1571 16.4213L62.1156 19.8054H66.7987L61.566 13.8357L66.7261 7.91659H62.2721Z", fill: "white" }),
1239
- /* @__PURE__ */ jsx29("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.3635 7.44146V4.56406H50.7066V0.0559998H39.702V20.2805H50.7066V15.7601H44.3635V11.7794H50.7066V7.44146H44.3635ZM50.2408 7.91659H43.8978V4.08893H50.2408V0.531132H40.1678V19.8054H50.2408V16.2352H43.8978V11.3043H50.2408V7.91659Z", fill: "white" }),
1240
- /* @__PURE__ */ jsx29("path", { d: "M35.06 0.0559998V8.33281H35.0087C33.9803 7.12787 32.6966 6.70881 31.207 6.70881C28.1552 6.70881 25.8561 8.826 25.0493 11.6236C24.128 8.54092 21.7544 6.65084 18.2349 6.65084C15.3769 6.65084 13.1197 7.95936 11.9422 10.0918V7.44146H6.03416V4.56406H12.4815V0.0559998H0.768005V20.2805H6.03416V11.7794H11.2836C11.127 12.4037 11.0432 13.0727 11.0432 13.7788C11.0432 17.997 14.2031 20.958 18.2349 20.958C21.6258 20.958 23.8607 19.334 25.0419 16.374H20.5284C19.9183 17.2644 19.4553 17.5276 18.2349 17.5276C16.8199 17.5276 15.5995 16.2685 15.5995 14.7756H24.7894C25.1881 18.1262 27.7472 21.016 31.2582 21.016C32.773 21.016 34.1601 20.2558 35.0078 18.9729H35.059V20.2824H39.701L39.702 0.0559998H35.06ZM15.7467 11.8393C16.0392 10.5545 17.0164 9.71545 18.2358 9.71545C19.5782 9.71545 20.5051 10.5289 20.7492 11.8393C20.8517 11.8393 15.7467 11.8393 15.7467 11.8393ZM32.242 17.2016C30.5307 17.2016 29.4668 15.5748 29.4668 13.8767C29.4668 12.0617 30.3919 10.316 32.242 10.316C34.1601 10.316 34.924 12.0617 34.924 13.8767C34.924 15.5976 34.1144 17.2016 32.242 17.2016Z", fill: "white" })
1241
- ] }) });
1242
- var fedex_default = SvgFedex;
1244
+ 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';
1243
1245
 
1244
1246
  // packages/react-ui/src/lib/demo/components/Question.tsx
1245
- import { jsx as jsx30, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
1247
+ import { jsx as jsx16, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
1246
1248
  var QuestionContainer = styled14.div`
1247
1249
  position: absolute;
1248
1250
  top: 0;
@@ -1273,8 +1275,8 @@ var QuestionContainer = styled14.div`
1273
1275
  `;
1274
1276
  var Question2 = ({ store: store2, closeQuestion, vote }) => {
1275
1277
  const { data: openedQuestion } = useStore3(store2);
1276
- const [answerTimeExpired, setAnswerTimeExpired] = useState2(false);
1277
- const setTimeToExpire = useCallback2(
1278
+ const [answerTimeExpired, setAnswerTimeExpired] = useState3(false);
1279
+ const setTimeToExpire = useCallback3(
1278
1280
  (flag) => {
1279
1281
  setAnswerTimeExpired(flag);
1280
1282
  },
@@ -1291,8 +1293,8 @@ var Question2 = ({ store: store2, closeQuestion, vote }) => {
1291
1293
  if (!openedQuestion) {
1292
1294
  return null;
1293
1295
  }
1294
- return /* @__PURE__ */ jsx30(QuestionContainer, { children: /* @__PURE__ */ jsxs17("div", { children: [
1295
- /* @__PURE__ */ jsx30(
1296
+ return /* @__PURE__ */ jsx16(QuestionContainer, { children: /* @__PURE__ */ jsxs13("div", { children: [
1297
+ /* @__PURE__ */ jsx16(
1296
1298
  VotingHeader,
1297
1299
  {
1298
1300
  points: questionAnswered?.points || 0,
@@ -1304,7 +1306,7 @@ var Question2 = ({ store: store2, closeQuestion, vote }) => {
1304
1306
  questionType: openedQuestion.type
1305
1307
  }
1306
1308
  ),
1307
- /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(
1309
+ /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
1308
1310
  Vote,
1309
1311
  {
1310
1312
  title: openedQuestion.subject,
@@ -1333,13 +1335,13 @@ var Question2 = ({ store: store2, closeQuestion, vote }) => {
1333
1335
 
1334
1336
  // packages/react-ui/src/lib/demo/components/Notifications.tsx
1335
1337
  import { useStore as useStore4 } from "@nanostores/react";
1336
- import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
1337
- import { jsx as jsx31 } from "@emotion/react/jsx-runtime";
1338
+ import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
1339
+ import { jsx as jsx17 } from "@emotion/react/jsx-runtime";
1338
1340
  var Notifications = ({ notificationsStore, openQuestion }) => {
1339
1341
  const timeout = useRef();
1340
- const [lastNotification, setLastNotification] = useState3();
1342
+ const [lastNotification, setLastNotification] = useState4();
1341
1343
  const notifications2 = useStore4(notificationsStore);
1342
- useEffect2(() => {
1344
+ useEffect3(() => {
1343
1345
  if (notifications2) {
1344
1346
  setLastNotification(notifications2[notifications2.length - 1]?.data);
1345
1347
  timeout.current = setTimeout(() => {
@@ -1365,7 +1367,7 @@ var Notifications = ({ notificationsStore, openQuestion }) => {
1365
1367
  closeInApp();
1366
1368
  openQuestion(lastNotification.question.id);
1367
1369
  };
1368
- return /* @__PURE__ */ jsx31(
1370
+ return /* @__PURE__ */ jsx17(
1369
1371
  InApp,
1370
1372
  {
1371
1373
  openVoiting,
@@ -1378,9 +1380,9 @@ var Notifications = ({ notificationsStore, openQuestion }) => {
1378
1380
  };
1379
1381
 
1380
1382
  // packages/react-ui/src/lib/demo/components/InPlayGame.tsx
1381
- import { jsx as jsx32 } from "@emotion/react/jsx-runtime";
1383
+ import { jsx as jsx18 } from "@emotion/react/jsx-runtime";
1382
1384
  var InPlayGame = ({ action }) => {
1383
- return /* @__PURE__ */ jsx32(Onboarding, { action });
1385
+ return /* @__PURE__ */ jsx18(Onboarding, { action });
1384
1386
  };
1385
1387
 
1386
1388
  // packages/react-ui/src/lib/demo/styles.tsx
@@ -1399,14 +1401,21 @@ var UserStatisticsContainer = styled15.div`
1399
1401
  `;
1400
1402
 
1401
1403
  // packages/react-ui/src/lib/demo/Gamification.tsx
1402
- import { jsx as jsx33, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
1404
+ import { jsx as jsx19, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
1403
1405
  var GamificationComponent = ({
1404
1406
  gamification,
1405
1407
  sdk
1406
1408
  }) => {
1407
1409
  const onbordingComplete = useStore5(gamification.onbordingComplete);
1410
+ const { slStreamId } = useStore5(sdk.sdkStore);
1411
+ if (slStreamId?.loading) {
1412
+ return /* @__PURE__ */ jsx19(DemoContainer, { children: /* @__PURE__ */ jsx19("div", { children: "Event is loading" }) });
1413
+ }
1414
+ if (!slStreamId?.data) {
1415
+ return /* @__PURE__ */ jsx19(DemoContainer, { children: /* @__PURE__ */ jsx19("div", { children: "Event is forbidden" }) });
1416
+ }
1408
1417
  if (!onbordingComplete) {
1409
- return /* @__PURE__ */ jsx33(DemoContainer, { children: /* @__PURE__ */ jsx33(InPlayGame, { action: gamification.submitInplay }) });
1418
+ return /* @__PURE__ */ jsx19(DemoContainer, { children: /* @__PURE__ */ jsx19(InPlayGame, { action: gamification.submitInplay }) });
1410
1419
  }
1411
1420
  const openQuestion = (questionId) => {
1412
1421
  gamification.openQuestion(questionId);
@@ -1417,16 +1426,16 @@ var GamificationComponent = ({
1417
1426
  const vote = (questionId, answerId) => {
1418
1427
  void gamification.submitAnswer(questionId, answerId);
1419
1428
  };
1420
- return /* @__PURE__ */ jsxs18(DemoContainer, { children: [
1421
- /* @__PURE__ */ jsx33(DemoContainerNotifications, { children: /* @__PURE__ */ jsx33(Notifications, { notificationsStore: sdk.getNotificationsStore(), openQuestion }) }),
1422
- /* @__PURE__ */ jsx33(UserStatisticsContainer, { children: gamification.userSummary && /* @__PURE__ */ jsx33(UserSummary, { store: gamification.userSummary.getStore() }) }),
1423
- gamification.questions && /* @__PURE__ */ jsx33(QuestionsList, { openQuestion, store: gamification.questions.getStore() }),
1424
- gamification.openedQuestion && /* @__PURE__ */ jsx33(Question2, { closeQuestion, vote, store: gamification.openedQuestion.getStore() })
1429
+ return /* @__PURE__ */ jsxs14(DemoContainer, { children: [
1430
+ /* @__PURE__ */ jsx19(DemoContainerNotifications, { children: /* @__PURE__ */ jsx19(Notifications, { notificationsStore: sdk.getNotificationsStore(), openQuestion }) }),
1431
+ /* @__PURE__ */ jsx19(UserStatisticsContainer, { children: gamification.userSummary && /* @__PURE__ */ jsx19(UserSummary, { store: gamification.userSummary.getStore() }) }),
1432
+ gamification.questions && /* @__PURE__ */ jsx19(QuestionsList, { openQuestion, store: gamification.questions.getStore() }),
1433
+ gamification.openedQuestion && /* @__PURE__ */ jsx19(Question2, { closeQuestion, vote, store: gamification.openedQuestion.getStore() })
1425
1434
  ] });
1426
1435
  };
1427
1436
 
1428
1437
  // packages/react-ui/src/lib/demo/Login.tsx
1429
- import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
1438
+ import { jsx as jsx20 } from "@emotion/react/jsx-runtime";
1430
1439
  var LoginComponent = ({ sdk }) => {
1431
1440
  const login2 = async (token) => {
1432
1441
  try {
@@ -1436,30 +1445,30 @@ var LoginComponent = ({ sdk }) => {
1436
1445
  throw err;
1437
1446
  }
1438
1447
  };
1439
- return /* @__PURE__ */ jsx34(Login, { login: login2, anonymousLogin: sdk.anonymousAuthorization });
1448
+ return /* @__PURE__ */ jsx20(Login, { login: login2, anonymousLogin: sdk.anonymousAuthorization });
1440
1449
  };
1441
1450
 
1442
1451
  // packages/react-ui/src/lib/demo/index.tsx
1443
- import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
1452
+ import { jsx as jsx21 } from "@emotion/react/jsx-runtime";
1444
1453
  var Demo = ({ sdk }) => {
1445
1454
  const user = useStore6(sdk.getUserStore());
1446
1455
  if (user.loading) {
1447
- return /* @__PURE__ */ jsx35("div", { children: "authentificating..." });
1456
+ return /* @__PURE__ */ jsx21("div", { children: "authentificating..." });
1448
1457
  }
1449
1458
  if (!user.data) {
1450
- return /* @__PURE__ */ jsx35(LoginComponent, { sdk });
1459
+ return /* @__PURE__ */ jsx21(LoginComponent, { sdk });
1451
1460
  }
1452
1461
  const gamification = sdk.getFeatures().get("games");
1453
1462
  if (!gamification) {
1454
- return /* @__PURE__ */ jsx35("div", { children: "wait gamification..." });
1463
+ return /* @__PURE__ */ jsx21("div", { children: "wait gamification..." });
1455
1464
  }
1456
- return /* @__PURE__ */ jsx35(GamificationComponent, { gamification, sdk });
1465
+ return /* @__PURE__ */ jsx21(GamificationComponent, { gamification, sdk });
1457
1466
  };
1458
1467
 
1459
1468
  // packages/react-ui/src/lib/theme/index.tsx
1460
1469
  import { ThemeProvider } from "@emotion/react";
1461
- import { jsx as jsx36 } from "@emotion/react/jsx-runtime";
1462
- var StreamLayerThemeProvider = ({ children }) => /* @__PURE__ */ jsx36(ThemeProvider, { theme, children });
1470
+ import { jsx as jsx22 } from "@emotion/react/jsx-runtime";
1471
+ var StreamLayerThemeProvider = ({ children }) => /* @__PURE__ */ jsx22(ThemeProvider, { theme, children });
1463
1472
 
1464
1473
  // packages/react/src/app/provider.tsx
1465
1474
  import { createContext, useMemo as useMemo2 } from "react";
@@ -1821,6 +1830,7 @@ var __GRPC_DEVTOOLS_EXTENSION__ = () => (next) => async (request) => {
1821
1830
  window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));
1822
1831
 
1823
1832
  // packages/sdk-web-api/src/grpc/subscription.ts
1833
+ import { Code } from "@connectrpc/connect";
1824
1834
  var ServerStreamSubscription = class {
1825
1835
  params;
1826
1836
  stream;
@@ -1915,9 +1925,12 @@ var ServerStreamSubscription = class {
1915
1925
  this.addStateLog(`data routed to ${this.listeners.size} listeners`);
1916
1926
  };
1917
1927
  onStreamError = (error) => {
1918
- console.error(error);
1919
- this.updateState("failed" /* Failed */);
1920
- this.state.setValue("error", error);
1928
+ if (error.code !== Code.Canceled && error.rawMessage !== "[canceled] BodyStreamBuffer was aborted") {
1929
+ this.updateState("failed" /* Failed */);
1930
+ this.state.setValue("error", error);
1931
+ } else {
1932
+ this.disconnect();
1933
+ }
1921
1934
  };
1922
1935
  };
1923
1936
 
@@ -2061,7 +2074,7 @@ __export(queries_exports, {
2061
2074
  $user: () => $user,
2062
2075
  $userSettings: () => $userSettings,
2063
2076
  bypassAuth: () => bypassAuth,
2064
- register: () => register
2077
+ register: () => register2
2065
2078
  });
2066
2079
 
2067
2080
  // packages/sdk-web-api/src/grpc/queries/event.ts
@@ -2140,7 +2153,7 @@ var $userSettings = ($userToken, transport2) => {
2140
2153
  }
2141
2154
  });
2142
2155
  };
2143
- var register = (transport2, phone) => {
2156
+ var register2 = (transport2, phone) => {
2144
2157
  const { client } = transport2.createPromiseClient(Users2, { method: "register" });
2145
2158
  return client.register({ id: phone });
2146
2159
  };
@@ -2782,11 +2795,11 @@ function StreamLayer(sdkKey) {
2782
2795
  }
2783
2796
 
2784
2797
  // packages/react/src/app/useStreamLayer.ts
2785
- import { useState as useState4, useEffect as useEffect3 } from "react";
2798
+ import { useState as useState5, useEffect as useEffect4 } from "react";
2786
2799
  window.instance = null;
2787
2800
  var useStreamLayer = (sdkKey, plugins) => {
2788
- const [sdk, setSdk] = useState4(null);
2789
- useEffect3(() => {
2801
+ const [sdk, setSdk] = useState5(null);
2802
+ useEffect4(() => {
2790
2803
  let ignore = false;
2791
2804
  if (!sdkKey) {
2792
2805
  throw new Error("sdk key should be provided");
@@ -2815,7 +2828,7 @@ var useStreamLayer = (sdkKey, plugins) => {
2815
2828
  };
2816
2829
 
2817
2830
  // packages/react/src/app/provider.tsx
2818
- import { jsx as jsx37 } from "@emotion/react/jsx-runtime";
2831
+ import { jsx as jsx23 } from "@emotion/react/jsx-runtime";
2819
2832
  var StreamLayerContext3 = createContext({
2820
2833
  status: 0 /* UNSET */
2821
2834
  });
@@ -2834,12 +2847,12 @@ var StreamLayerProvider = ({
2834
2847
  }
2835
2848
  return { sdk: streamLayer, status: 2 /* READY */ };
2836
2849
  }, [streamLayer]);
2837
- return /* @__PURE__ */ jsx37(StreamLayerThemeProvider, { children: /* @__PURE__ */ jsx37(StreamLayerContext3.Provider, { value, children }) });
2850
+ return /* @__PURE__ */ jsx23(StreamLayerThemeProvider, { children: /* @__PURE__ */ jsx23(StreamLayerContext3.Provider, { value, children }) });
2838
2851
  };
2839
2852
 
2840
2853
  // packages/react/src/app/app.tsx
2841
2854
  import { useContext } from "react";
2842
- import { jsx as jsx38 } from "@emotion/react/jsx-runtime";
2855
+ import { jsx as jsx24 } from "@emotion/react/jsx-runtime";
2843
2856
  var useSDK = () => {
2844
2857
  const { sdk } = useContext(StreamLayerContext3);
2845
2858
  return sdk;
@@ -2850,12 +2863,12 @@ var StreamLayerSDKReact = () => {
2850
2863
  throw new Error("Wrap app in `StreamLayerProvider`");
2851
2864
  }
2852
2865
  if (status === 1 /* CONNECTED */) {
2853
- return /* @__PURE__ */ jsx38("div", { children: "wait" });
2866
+ return /* @__PURE__ */ jsx24("div", { children: "wait" });
2854
2867
  }
2855
2868
  if (sdk === void 0) {
2856
- return /* @__PURE__ */ jsx38("div", { children: "sdk not initialized" });
2869
+ return /* @__PURE__ */ jsx24("div", { children: "sdk not initialized" });
2857
2870
  }
2858
- return /* @__PURE__ */ jsx38(Demo, { sdk });
2871
+ return /* @__PURE__ */ jsx24(Demo, { sdk });
2859
2872
  };
2860
2873
  export {
2861
2874
  StreamLayerProvider,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamlayer/react",
3
- "version": "0.2.5",
3
+ "version": "0.2.7",
4
4
  "type": "module",
5
5
  "main": "./main.js",
6
6
  "exports": {
@@ -19,6 +19,7 @@
19
19
  "react-dom": "18.2.0",
20
20
  "react-digit-input": "^2.1.0",
21
21
  "@streamlayer/react-ui": "*",
22
+ "@nanostores/react": "^0.7.1",
22
23
  "@streamlayer/sdk-web": "*"
23
24
  },
24
25
  "devDependencies": {