@streamlayer/react-ui 0.5.7 → 0.23.0

package/lib/lib/demo/index.js

@@ -0,0 +1,126 @@
+import { jsx as i, jsxs as s, Fragment as v } from "react/jsx-runtime";
+import { FeatureStatus as l } from "@streamlayer/sdk-web-interfaces";
+import { AvailableFeatures as y } from "@streamlayer/sdk-web-features";
+import { Gamification as S, Highlights as b } from "@streamlayer/feature-gamification";
+import { useState as C, useMemo as u, useEffect as F } from "react";
+import { useStore as c } from "@nanostores/react";
+import { Notifications as B } from "../notifications/index.js";
+import { GamificationComponent as w } from "./Gamification.js";
+import { HighlightsComponent as x } from "./Highlights.js";
+import { LoginComponent as R } from "./Login.js";
+import { Buttons as j, Button as d } from "./styles.js";
+import "../notifications/notification/index.js";
+import "@streamlayer/sdk-web-notifications";
+import "../notifications/notification/onboarding-inapp/index.js";
+import "../notifications/notification/onboarding-inapp/styles.js";
+import "@linaria/react";
+import "../notifications/notification/question-inapp/index.js";
+import "../../icon-exit-d3f9fc80.js";
+import "../notifications/notification/question-inapp/styles.js";
+import "../notifications/notification/styles.js";
+import "../notifications/styles.js";
+import "./components/UserSummary.js";
+import "../gamification/user-statistics/index.js";
+import "../../utils/common.js";
+import "../gamification/user-statistics/components/statistics/index.js";
+import "../gamification/user-statistics/components/statistics/styles.js";
+import "../gamification/user-statistics/components/rank/index.js";
+import "../gamification/user-statistics/components/rank/styles.js";
+import "../gamification/user-statistics/styles.js";
+import "./components/QuestionsList.js";
+import "../gamification/question-list/index.js";
+import "../gamification/question/index.js";
+import "@streamlayer/sdk-web-types";
+import "../../icon-chevron-138a557c.js";
+import "../gamification/question/styles.js";
+import "../gamification/question-list/styles.js";
+import "./components/Question.js";
+import "../gamification/vote/index.js";
+import "../../index-d5620d2c.js";
+import "../gamification/vote/components/voting-option/styles.js";
+import "../gamification/vote/styles.js";
+import "../gamification/vote/components/voting-header/index.js";
+import "../gamification/vote/components/voting-header/components/timer/index.js";
+import "react-countdown-circle-timer";
+import "../theme/constants.js";
+import "../gamification/vote/components/voting-header/components/timer/styles.js";
+import "../gamification/vote/components/voting-header/styles.js";
+import "../gamification/vote/components/voting-header/components/points/index.js";
+import "../gamification/vote/components/voting-header/components/points/styles.js";
+import "../gamification/onboarding/index.js";
+import "../gamification/onboarding/styles.js";
+import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/index.js";
+import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles.js";
+import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/index.js";
+import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
+import "../gamification/onboarding/components/onboarding-slides/onboarding-invite-card/index.js";
+import "../gamification/onboarding/components/onboarding-slides/onboarding-invite-card/styles.js";
+import "../gamification/insight/styles.js";
+import "../gamification/insight-list/styles.js";
+import "../gamification/common-header/styles.js";
+import "../gamification/detailed-insight/styles.js";
+import "./components/Insights.js";
+import "../gamification/insight-list/index.js";
+import "../gamification/insight/index.js";
+import "./components/Insight.js";
+import "../gamification/detailed-insight/index.js";
+import "../gamification/common-header/index.js";
+import "../login/index.js";
+import "react-phone-number-input";
+import "react-auth-code-input";
+import "../../utils/login.js";
+import "@connectrpc/connect-web";
+import "@connectrpc/connect";
+import "@streamlayer/sl-eslib/users/users_connect";
+import "../login/styles.js";
+const A = ({ activeFeature: o, sdk: r }) => {
+  const [e, p] = C(null), { organizationSettings: a, streamSettings: f } = c(r.sdkStore), g = u(() => {
+    const t = (f == null ? void 0 : f.data) || (a == null ? void 0 : a.data);
+    return t != null && t.overlays ? t.overlays : [];
+  }, [a, f]);
+  F(() => {
+    const t = r.getFeatures();
+    if (o)
+      for (const [m, n] of t)
+        m === o ? n.status.get() === l.Suspended && (n.enable(), p(n)) : n.status.get() === l.Ready && n.disable();
+    else {
+      for (const [, m] of t)
+        m.status.get() === l.Ready && m.disable();
+      p(null);
+    }
+    return () => {
+      for (const [, m] of t)
+        m.status.get() === l.Ready && m.disable();
+    };
+  }, [o, r]);
+  const h = u(() => e instanceof S ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(w, { gamification: e, sdk: r }) }) : /* @__PURE__ */ i("div", { children: "wait gamification..." }) : e instanceof b ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(x, { highlights: e, sdk: r }) }) : /* @__PURE__ */ i("div", { children: "wait highlights..." }) : null, [r, e]);
+  return /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ s(j, { children: [
+      /* @__PURE__ */ i(d, { onClick: () => r.logout(), children: "logout" }),
+      g.map((t) => /* @__PURE__ */ s(
+        d,
+        {
+          onClick: () => r.openFeature(t.type),
+          disabled: !(t.type in y),
+          "data-enableSdkButton": t.enableSdkButton.toString(),
+          "data-selected": t.type === o,
+          children: [
+            /* @__PURE__ */ i("img", { src: t.icon, alt: "" }),
+            t.name
+          ]
+        },
+        t.name
+      ))
+    ] }),
+    h
+  ] });
+}, _t = ({ sdk: o }) => {
+  const r = c(o.organizationStore()), e = c(o.getUserStore()), p = c(o.getActiveFeature());
+  return r.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : r.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ s(v, { children: [
+    /* @__PURE__ */ i(B, { notificationsStore: o.getNotificationsStore() }),
+    /* @__PURE__ */ i(A, { sdk: o, activeFeature: p })
+  ] }) : /* @__PURE__ */ i(R, { sdk: o }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
+};
+export {
+  _t as Demo
+};

package/lib/lib/demo/styles.js

@@ -0,0 +1,58 @@
+import { styled as o } from "@linaria/react";
+const e = o.div`
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+`, i = o.div`
+  margin-bottom: 15px;
+`, r = o.div`
+  position: relative;
+  height: calc(100% - 160px);
+`, n = o.div`
+  display: flex;
+  margin-bottom: 10px;
+`, a = o.button`
+  background: rgb(29, 123, 255);
+  border: none;
+  color: #fff;
+  padding: 5px 6px;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-right: 5px;
+  transition: all 0.3s ease-in;
+
+  & > img {
+    max-width: 10px;
+    max-height: 10px;
+    margin-right: 5px;
+  }
+
+  &:enabled:hover {
+    box-shadow: inset 0 0 0 2em rgb(2, 88, 208);
+  }
+
+  &[data-selected='true'] {
+    box-shadow: inset 0 0 0 2em rgb(0, 60, 145);
+
+    &:enabled:hover {
+      box-shadow: inset 0 0 0 2em rgb(0, 60, 145);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    background-color: gray;
+    cursor: default;
+  }
+
+  &[data-enableSdkButton='false'] {
+    opacity: 0.7;
+  }
+`;
+export {
+  a as Button,
+  n as Buttons,
+  e as DemoContainer,
+  r as QuestionsContainer,
+  i as UserStatisticsContainer
+};

package/lib/lib/gamification/common-header/index.js

@@ -0,0 +1,14 @@
+import { jsxs as j, jsx as M } from "react/jsx-runtime";
+import { c as A } from "../../../icon-exit-d3f9fc80.js";
+import { Container as z, Button as g, HeaderIcon as i } from "./styles.js";
+import "@linaria/react";
+const x = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkNoZXZyb24iPgo8cGF0aCBpZD0iQ2hldnJvbl8yIiBkPSJNNiAxMS45OTlDNiAxMi4xNzI1IDYuMDMxMzQgMTIuMzM0IDYuMDk0MDEgMTIuNDgzN0M2LjE1NjY5IDEyLjYzMzQgNi4yNTQyOCAxMi43NzU2IDYuMzg2OCAxMi45MTAzTDE0LjA0MzYgMjAuNjU2NUMxNC4yNjQ4IDIwLjg4NTUgMTQuNTMyMyAyMSAxNC44NDU5IDIxQzE1LjA2MDcgMjEgMTUuMjU0NCAyMC45NDc1IDE1LjQyNzEgMjAuODQyNkMxNS41OTk4IDIwLjczNzcgMTUuNzM4NCAyMC41OTY1IDE1Ljg0MzEgMjAuNDE5MUMxNS45NDc3IDIwLjI0MTYgMTYgMjAuMDQyNSAxNiAxOS44MjE3QzE2IDE5LjQ5ODkgMTUuODgxNiAxOS4yMTM0IDE1LjY0NDggMTguOTY1NEw4Ljc0MTgzIDExLjk5NzFMMTUuNjQ0OCA1LjAzMjcxQzE1Ljg4MTYgNC43ODcwOSAxNiA0LjUwMjMgMTYgNC4xNzgzNEMxNiAzLjk1NzQ5IDE1Ljk0NzcgMy43NTgzNSAxNS44NDMxIDMuNTgwOTFDMTUuNzM4NCAzLjQwMzQ3IDE1LjU5OTggMy4yNjIyOSAxNS40MjcxIDMuMTU3MzhDMTUuMjU0NCAzLjA1MjQ2IDE1LjA2MDcgMyAxNC44NDU5IDNDMTQuNTMyMyAzIDE0LjI2NDggMy4xMTE2OSAxNC4wNDM2IDMuMzM1MDhMNi4zODY4IDExLjA4NzhDNi4yNTU1MSAxMS4yMjI1IDYuMTU4NTMgMTEuMzY0NCA2LjA5NTg2IDExLjUxMzRDNi4wMzMxOCAxMS42NjI1IDYuMDAxMjMgMTEuODI0NCA2IDExLjk5OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==", y = ({ icon: N, comeBack: D, close: I }) => /* @__PURE__ */ j(z, { children: [
+  /* @__PURE__ */ j("div", { children: [
+    D && /* @__PURE__ */ M(g, { onClick: D, children: /* @__PURE__ */ M("img", { alt: "header-back-icon", src: x }) }),
+    N && /* @__PURE__ */ M(i, { alt: "header-icon", src: N })
+  ] }),
+  /* @__PURE__ */ M("div", { children: I && /* @__PURE__ */ M(g, { onClick: I, children: /* @__PURE__ */ M("img", { alt: "header-close-icon", src: A }) }) })
+] });
+export {
+  y as CommonHeader
+};

package/lib/lib/gamification/common-header/styles.js

@@ -0,0 +1,31 @@
+import { styled as t } from "@linaria/react";
+const o = t.div`
+  box-sizing: border-box;
+  min-height: 35px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-bottom: 1px solid #22262b;
+  margin-bottom: 20px;
+`, n = t.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+`, r = t.img`
+  width: 24px;
+  height: 24px;
+`;
+export {
+  n as Button,
+  o as Container,
+  r as HeaderIcon
+};

package/lib/lib/gamification/detailed-insight/index.js

@@ -0,0 +1,29 @@
+import { jsxs as I, jsx as M } from "react/jsx-runtime";
+import { CommonHeader as Z } from "../common-header/index.js";
+import { Container as g, Image as l, AdditionalContent as o, Title as n, Description as d, AdditionalBtn as r, LinkIcon as a } from "./styles.js";
+import "../../../icon-exit-d3f9fc80.js";
+import "../common-header/styles.js";
+import "@linaria/react";
+const u = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0ic2MtQU5kc04ga1RWV0pFIj48cGF0aCBkPSJNNi42NjY1IDMuMTY2NjlINC45OTk4NEM0LjI2MzQ2IDMuMTY2NjkgMy42NjY1IDMuNzYzNjQgMy42NjY1IDQuNTAwMDJWMTEuNUMzLjY2NjUgMTIuMjM2NCA0LjI2MzQ2IDEyLjgzMzQgNC45OTk4NCAxMi44MzM0SDExLjk5OThDMTIuNzM2MiAxMi44MzM0IDEzLjMzMzIgMTIuMjM2NCAxMy4zMzMyIDExLjVWOS44MzMzNSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PHBhdGggZD0iTTEzLjMzMzUgNi4xNjY2OVYzLjE2NjY5SDEwLjMzMzUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjxwYXRoIGQ9Ik0xMy4xNjY4IDMuMzMzMzFMOC4zMzM1IDguMTY2NjUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjwvc3ZnPgo=", C = ({
+  image: i,
+  title: j,
+  description: m,
+  webLinkLabel: z,
+  webLink: c,
+  closeHighlights: t,
+  closeInsight: N
+}) => /* @__PURE__ */ I(g, { children: [
+  /* @__PURE__ */ M(Z, { close: t, comeBack: N }),
+  i && /* @__PURE__ */ M(l, { alt: "detail-insight-image", src: i }),
+  /* @__PURE__ */ I(o, { children: [
+    j && /* @__PURE__ */ M(n, { children: j }),
+    m && /* @__PURE__ */ M(d, { children: m })
+  ] }),
+  c && z && /* @__PURE__ */ I(r, { href: c, target: "_blank", children: [
+    z,
+    /* @__PURE__ */ M(a, { alt: "link-icon", src: u })
+  ] })
+] });
+export {
+  C as DetailedInsight
+};

package/lib/lib/gamification/detailed-insight/styles.js

@@ -0,0 +1,62 @@
+import { styled as o } from "@linaria/react";
+const t = o.div`
+  box-sizing: border-box;
+  font-size: 14px;
+  color: var(--color-white);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 12px;
+`, e = o.img`
+  border-radius: 50%;
+  width: 130px;
+  height: 130px;
+  border: 1px solid #7e7e7f;
+  margin-bottom: 8px;
+`, n = o.div`
+  width: 100%;
+  margin-bottom: 8px;
+`, r = o.div`
+  font-weight: 700;
+  margin-bottom: 8px;
+`, d = o.div`
+  font-weight: 400;
+`, c = o.a`
+  box-sizing: border-box;
+  text-decoration: none;
+  color: var(--color-white);
+  font-size: 13px;
+  font-weight: 600;
+  background-color: var(--color-blue-question-action-btn);
+  padding: 10px 5px;
+  border-radius: 6px;
+  width: 100%;
+  display: inline-block;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+
+  &:active,
+  &:hover,
+  &:visited {
+    text-decoration: none;
+    color: var(--color-white);
+  }
+`, l = o.img`
+  width: 17px;
+  height: 16px;
+  vertical-align: middle;
+  margin-left: 10px;
+`;
+export {
+  c as AdditionalBtn,
+  n as AdditionalContent,
+  t as Container,
+  d as Description,
+  e as Image,
+  l as LinkIcon,
+  r as Title
+};

package/lib/lib/gamification/insight/index.js

@@ -0,0 +1,26 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { QuestionImages as i } from "@streamlayer/sdk-web-types";
+import { i as l } from "../../../icon-chevron-138a557c.js";
+import { Container as h, Graphic as I, Content as a, Title as u, NextIcon as m, InsightIconDefault as p, InsightIconAbsolute as f, InsightIconCircle as g } from "./styles.js";
+import "@linaria/react";
+const C = (r, n) => {
+  switch (r) {
+    case i.ROUNDED:
+      return /* @__PURE__ */ t(g, { alt: "insight-icon", src: n });
+    case i.TRANSPARENT:
+      return /* @__PURE__ */ t(f, { alt: "insight-icon", src: n });
+    case i.CENTERED:
+      return /* @__PURE__ */ t(p, { alt: "insight-icon", src: n });
+    default:
+      return null;
+  }
+}, R = ({ title: r, image: n, questionId: c, imageMode: s, openInsight: e }) => /* @__PURE__ */ o(h, { onClick: () => e(c), children: [
+  /* @__PURE__ */ t(I, { children: n && C(s, n) }),
+  /* @__PURE__ */ o(a, { children: [
+    /* @__PURE__ */ t(u, { children: r || "" }),
+    /* @__PURE__ */ t(m, { alt: "next-icon", src: l })
+  ] })
+] });
+export {
+  R as Insight
+};

package/lib/lib/gamification/insight/styles.js

@@ -0,0 +1,65 @@
+import { styled as t } from "@linaria/react";
+const e = t.div`
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  min-height: 55px;
+  height: 55px;
+  background-color: var(--color-transparent-item);
+  border-radius: 8px;
+  cursor: pointer;
+`, o = t.div`
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  padding: 9px;
+`, n = t.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  min-width: 60px;
+  width: 60px;
+  height: 100%;
+  background-color: var(--color-blue-question-action-btn);
+  position: relative;
+`, r = t.img`
+  width: 35px;
+  height: 35px;
+`, l = t.img`
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+`, s = t.img`
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 60px;
+`, p = t.div`
+  color: var(--color-white);
+  font-size: 12px;
+  font-weight: 400px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  max-height: 100%;
+  margin-right: 35px;
+`, a = t.img`
+  width: 16px;
+  height: 16px;
+`;
+export {
+  e as Container,
+  o as Content,
+  n as Graphic,
+  s as InsightIconAbsolute,
+  l as InsightIconCircle,
+  r as InsightIconDefault,
+  a as NextIcon,
+  p as Title
+};

package/lib/lib/gamification/insight-list/index.js

@@ -0,0 +1,11 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Insight as e } from "../insight/index.js";
+import { Container as i, ItemsContainer as n } from "./styles.js";
+import "@streamlayer/sdk-web-types";
+import "../../../icon-chevron-138a557c.js";
+import "../insight/styles.js";
+import "@linaria/react";
+const u = ({ insights: r, openInsight: m }) => /* @__PURE__ */ o(i, { children: /* @__PURE__ */ o(n, { children: r == null ? void 0 : r.map((t) => /* @__PURE__ */ o(e, { openInsight: m, ...t }, t.questionId)) }) });
+export {
+  u as InsightList
+};

package/lib/lib/gamification/insight-list/styles.js

@@ -0,0 +1,20 @@
+import { styled as o } from "@linaria/react";
+const e = o.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 13px;
+  height: 100%;
+`, t = o.div`
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: 100%;
+
+  & > div {
+    margin-bottom: 8px;
+  }
+`;
+export {
+  e as Container,
+  t as ItemsContainer
+};

package/lib/lib/gamification/onboarding/components/onboarding-slides/onboarding-instructions/index.js

@@ -0,0 +1,10 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { Container as o, Content as c, Graphic as e, Headline as s } from "./styles.js";
+import "@linaria/react";
+const d = ({ graphic: n, headline: i }) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ t(c, { children: [
+  /* @__PURE__ */ r(e, { alt: "graphic-img-instructions", src: n }),
+  /* @__PURE__ */ r(s, { children: i })
+] }) });
+export {
+  d as OnboardingInstructions
+};

package/lib/lib/gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles.js

@@ -0,0 +1,30 @@
+import { styled as t } from "@linaria/react";
+const i = t.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`, n = t.div`
+  width: 80%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+`, o = t.img`
+  margin-bottom: 24px;
+  width: 100%;
+`, d = t.div`
+  word-break: break-word;
+  font-weight: 600;
+  font-size: 17px;
+  padding: 0px 20px;
+  text-align: center;
+`;
+export {
+  i as Container,
+  n as Content,
+  o as Graphic,
+  d as Headline
+};

package/lib/lib/gamification/onboarding/components/onboarding-slides/onboarding-invite-card/index.js

@@ -0,0 +1,17 @@
+import { jsx as M, jsxs as I } from "react/jsx-runtime";
+import { Container as z, Content as g, InviteGameIconWrap as A, InviteGameIcon as T, Heading as x, Subtext as E, InviteBtn as L } from "./styles.js";
+import "@linaria/react";
+const u = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkZyaWVuZHMiPgo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNNC4xOTIzMSA3LjAzMTI1QzIuNjYzNDYgNy4wMzEyNSAxLjQyMzA4IDguMTk5NzMgMS40MjMwOCA5LjYzOTk0QzEuNDIzMDggMTEuMDgwMiAyLjY2MzQ2IDEyLjI0ODYgNC4xOTIzMSAxMi4yNDg2QzUuNzIxMTUgMTIuMjQ4NiA2Ljk2MTU0IDExLjA4MDIgNi45NjE1NCA5LjYzOTk0QzYuOTYxNTQgOC4xOTk3MyA1LjcyMTE1IDcuMDMxMjUgNC4xOTIzMSA3LjAzMTI1Wk00LjE5MjMxIDEyLjI0ODZDMi4xNjIyNiAxMi4yNDg2IDAuNSAxMy44MTQ1IDAuNSAxNS43MjY5VjE3LjYyOUMwLjUgMTcuNjI5IDEuNDIzMDggMTguMzM1NiA0LjE5MjMxIDE4LjMzNTZDNi45NjE1NCAxOC4zMzU2IDcuODg0NjEgMTcuNjI5IDcuODg0NjEgMTcuNjI5VjE1LjcyNjlDNy44ODQ2MSAxMy44MTQ1IDYuMjIyMzYgMTIuMjQ4NiA0LjE5MjMxIDEyLjI0ODZaTTIwLjgwNzcgNy4wMzEyNUMxOS4yNzg4IDcuMDMxMjUgMTguMDM4NSA4LjE5OTczIDE4LjAzODUgOS42Mzk5NEMxOC4wMzg1IDExLjA4MDIgMTkuMjc4OCAxMi4yNDg2IDIwLjgwNzcgMTIuMjQ4NkMyMi4zMzY1IDEyLjI0ODYgMjMuNTc2OSAxMS4wODAyIDIzLjU3NjkgOS42Mzk5NEMyMy41NzY5IDguMTk5NzMgMjIuMzM2NSA3LjAzMTI1IDIwLjgwNzcgNy4wMzEyNVpNMjAuODA3NyAxMi4yNDg2QzE4Ljc3NzYgMTIuMjQ4NiAxNy4xMTU0IDEzLjgxNDUgMTcuMTE1NCAxNS43MjY5VjE3LjYyOUMxNy4xMTU0IDE3LjYyOSAxOC4wMzg1IDE4LjMzNTYgMjAuODA3NyAxOC4zMzU2QzIzLjU3NjkgMTguMzM1NiAyNC41IDE3LjYyOSAyNC41IDE3LjYyOVYxNS43MjY5QzI0LjUgMTMuODE0NSAyMi44Mzc3IDEyLjI0ODYgMjAuODA3NyAxMi4yNDg2Wk0xMi41IDEwLjUwOTVDMTAuOTcxMiAxMC41MDk1IDkuNzMwNzcgMTEuNjc4IDkuNzMwNzcgMTMuMTE4MkM5LjczMDc3IDE0LjU1ODQgMTAuOTcxMiAxNS43MjY5IDEyLjUgMTUuNzI2OUMxNC4wMjg4IDE1LjcyNjkgMTUuMjY5MiAxNC41NTg0IDE1LjI2OTIgMTMuMTE4MkMxNS4yNjkyIDExLjY3OCAxNC4wMjg4IDEwLjUwOTUgMTIuNSAxMC41MDk1Wk0xMi41IDE1LjcyNjlDMTAuNDcgMTUuNzI2OSA4LjgwNzY5IDE3LjI5MjggOC44MDc2OSAxOS4yMDUxVjIxLjEwNzNDOC44MDc2OSAyMS4xMDczIDkuNzMwNzcgMjEuODEzOCAxMi41IDIxLjgxMzhDMTUuMjY5MiAyMS44MTM4IDE2LjE5MjMgMjEuMTA3MyAxNi4xOTIzIDIxLjEwNzNWMTkuMjA1MUMxNi4xOTIzIDE3LjI5MjggMTQuNTMgMTUuNzI2OSAxMi41IDE1LjcyNjlaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBpZD0iVmVjdG9yXzIiIGQ9Ik04LjU4NDczIDEuNUM2Ljk2MzkyIDEuNSA1LjY0ODkzIDIuNzM4NzYgNS42NDg5MyA0LjI2NTZDNS42NDg5MyA1Ljc5MjQ1IDYuOTYzOTIgNy4wMzEyMSA4LjU4NDczIDcuMDMxMjFDMTAuMjA1NSA3LjAzMTIxIDExLjUyMDUgNS43OTI0NSAxMS41MjA1IDQuMjY1NkMxMS41MjA1IDIuNzM4NzYgMTAuMjA1NSAxLjUgOC41ODQ3MyAxLjVaTTguNTg0NzMgNy4wMzEyMUM4LjI5MDM4IDcuMDMxMjEgNy45OTIyMSA3LjAyNCA3LjY5Nzg3IDcuMTE3NjNDOC4yODY1NiA3Ljg1NTg0IDguNTg0NzMgOC43ODEzMSA4LjU4NDczIDkuNzk2ODFDOC41ODQ3MyAxMC4xNjQxIDguNDkyOTggMTAuNTI0MiA4LjQ5Mjk4IDEwLjg5MTVDOS4yNzY2MyA5Ljc4NjAxIDEwLjU0MTkgOS4wNTg1OSAxMi4wMDk4IDguODc0OTRDMTEuMzI1NiA3Ljc2OTQyIDEwLjA1MjYgNy4wMzEyMSA4LjU4NDczIDcuMDMxMjFaTTE2LjQxMzUgMS41QzE0Ljc5MjcgMS41IDEzLjQ3NzcgMi43Mzg3NiAxMy40Nzc3IDQuMjY1NkMxMy40Nzc3IDUuNzkyNDUgMTQuNzkyNyA3LjAzMTIxIDE2LjQxMzUgNy4wMzEyMUMxOC4wMzQzIDcuMDMxMjEgMTkuMzQ5MyA1Ljc5MjQ1IDE5LjM0OTMgNC4yNjU2QzE5LjM0OTMgMi43Mzg3NiAxOC4wMzQzIDEuNSAxNi40MTM1IDEuNVpNMTYuNDEzNSA3LjAzMTIxQzE0Ljk0NTYgNy4wMzEyMSAxMy42NzI3IDcuNzY5NDIgMTIuOTg4NCA4Ljg3NDk0QzE0LjQ1NjMgOS4wNTg1OSAxNS43MjE2IDkuNzg2MDEgMTYuNTA1MyAxMC44OTE1QzE2LjUwNTMgMTAuNTI0MiAxNi40MTM1IDEwLjE2NDEgMTYuNDEzNSA5Ljc5NjgxQzE2LjQxMzUgOC43ODEzMSAxNi43MTE3IDcuODU1ODQgMTcuMzAwNCA3LjExNzYzQzE3LjAwNiA3LjAyNCAxNi43MDc5IDcuMDMxMjEgMTYuNDEzNSA3LjAzMTIxWiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC40Ii8+CjwvZz4KPC9zdmc+Cg==", c = ({
+  inviteCardTitle: j,
+  inviteCardSubtext: D,
+  primaryColor: N
+}) => /* @__PURE__ */ M(z, { children: /* @__PURE__ */ I(g, { children: [
+  /* @__PURE__ */ M(A, { style: { backgroundColor: N }, children: /* @__PURE__ */ M(T, { alt: "invite-game-icon", src: u }) }),
+  /* @__PURE__ */ M(x, { children: j || "" }),
+  /* @__PURE__ */ M(E, { children: D || "" }),
+  /* @__PURE__ */ M(L, { onClick: () => {
+  }, style: { backgroundColor: N }, children: "Invite friends!" })
+] }) });
+export {
+  c as OnboardingInviteCard
+};

package/lib/lib/gamification/onboarding/components/onboarding-slides/onboarding-invite-card/styles.js

@@ -0,0 +1,55 @@
+import { styled as t } from "@linaria/react";
+const e = t.div`
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`, o = t.div`
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`, i = t.div`
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-green-primary-btn);
+`, r = t.img`
+  width: 24px;
+  height: 24px;
+`, c = t.div`
+  font-size: 20px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 8px;
+`, a = t.div`
+  font-size: 14px;
+  font-weight: 400;
+  text-align: center;
+`, p = t.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  border: 2px solid var(--color-green-primary-btn);
+  padding: 12px 16px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 6px;
+  margin-top: 24px;
+`;
+export {
+  e as Container,
+  o as Content,
+  c as Heading,
+  p as InviteBtn,
+  r as InviteGameIcon,
+  i as InviteGameIconWrap,
+  a as Subtext
+};

package/lib/lib/gamification/onboarding/components/onboarding-slides/onboarding-rules/index.js

@@ -0,0 +1,13 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { Container as c, Title as m, RulesList as d, RulesItem as h, RuleNumber as p, RuleText as s } from "./styles.js";
+import "@linaria/react";
+const b = ({ rules: e, rulesTitle: o, primaryColor: t }) => /* @__PURE__ */ n(c, { children: [
+  /* @__PURE__ */ r(m, { children: o }),
+  /* @__PURE__ */ r(d, { children: e == null ? void 0 : e.map((l, i) => /* @__PURE__ */ n(h, { children: [
+    /* @__PURE__ */ r(p, { style: { backgroundColor: t }, children: i + 1 }),
+    /* @__PURE__ */ r(s, { children: l })
+  ] }, i)) })
+] });
+export {
+  b as OnboardingRules
+};

package/lib/lib/gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js

@@ -0,0 +1,43 @@
+import { styled as e } from "@linaria/react";
+const t = e.div`
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  padding: 0px 8px;
+`, o = e.div`
+  font-size: 20px;
+  font-weight: 700;
+`, r = e.div`
+  max-height: 190px;
+  overflow: auto;
+`, n = e.div`
+  display: flex;
+  max-width: 100%;
+  margin-top: 24px;
+`, d = e.div`
+  background-color: var(--color-green-primary-btn);
+  margin-right: 16px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, l = e.div`
+  word-break: break-word;
+  overflow: hidden;
+  padding-right: 30px;
+  flex: 1;
+  max-height: 39px;
+`;
+export {
+  t as Container,
+  d as RuleNumber,
+  l as RuleText,
+  n as RulesItem,
+  r as RulesList,
+  o as Title
+};