@streamlayer/react-ui 0.65.3 → 0.67.0

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

@@ -1,65 +1,44 @@
-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;
-`;
+import { styled as s } from "@linaria/react";
+const t = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_cygkmjj",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_c71yvf9",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Graphic",
+  class: "Graphic_gao3b2f",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("img")({
+  name: "InsightIconDefault",
+  class: "InsightIconDefault_i1k4eec3",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("img")({
+  name: "InsightIconCircle",
+  class: "InsightIconCircle_i1uhyahn",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("img")({
+  name: "InsightIconAbsolute",
+  class: "InsightIconAbsolute_i2ernmy",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "Title_t12j99pr",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("img")({
+  name: "NextIcon",
+  class: "NextIcon_n1uwonpi",
+  propsAsIs: !1
+});
 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
+  t as Container,
+  e as Content,
+  o as Graphic,
+  i as InsightIconAbsolute,
+  a as InsightIconCircle,
+  c as InsightIconDefault,
+  I as NextIcon,
+  l as Title
 };

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

@@ -1,20 +1,14 @@
-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;
-  }
-`;
+import { styled as s } from "@linaria/react";
+const t = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_cddmj9e",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "ItemsContainer",
+  class: "ItemsContainer_i16t83sg",
+  propsAsIs: !1
+});
 export {
-  e as Container,
-  t as ItemsContainer
+  t as Container,
+  n as ItemsContainer
 };

package/lib/ui/gamification/invite-link/styles.js

@@ -1,48 +1,34 @@
-import { styled as i } from "@linaria/react";
-const t = i.div`
-  display: flex;
-  align-items: center;
-  column-gap: 4px;
-  width: 100%;
-  height: 58px;
-  min-height: 58px;
-  max-height: 58px;
-  padding: 4px 12px;
-  border-radius: 8px;
-  box-sizing: border-box;
-  background-color: var(--color-primary-green1);
-  overflow: hidden;
-  cursor: pointer;
-`, e = i.img`
-  width: 32px;
-  height: 32px;
-`, r = i.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  row-gap: 6px;
-  padding: 0px 4px;
-  font-weight: var(--font-weight-default);
-`, n = i.div`
-  color: var(--color-neutrals-white);
-  font-size: 11px;
-  line-height: 14px;
-  text-transform: uppercase;
-  opacity: 0.8;
-`, p = i.div`
-  color: var(--color-white);
-  font-size: 14px;
-  line-height: 13px;
-`, x = i.img`
-  margin-right: 8px;
-  width: 18px;
-  height: 18px;
-`;
+import { styled as s } from "@linaria/react";
+const o = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c1ux29ft",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("img")({
+  name: "FriendsIcon",
+  class: "FriendsIcon_f10ncfg2",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_c1yc07bd",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "Title_tj6cq7w",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "Description_d1ag78xo",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("img")({
+  name: "ArrowInviteIcon",
+  class: "ArrowInviteIcon_awohrz6",
+  propsAsIs: !1
+});
 export {
-  x as ArrowInviteIcon,
-  t as Container,
-  r as Content,
-  p as Description,
+  i as ArrowInviteIcon,
+  o as Container,
+  t as Content,
+  r as Description,
   e as FriendsIcon,
-  n as Title
+  c as Title
 };

package/lib/ui/gamification/leaderboard/list-item/styles.js

@@ -1,69 +1,47 @@
-import { styled as r } from "@linaria/react";
-import { SvgIcon as e } from "../../../icons/index.js";
+import { styled as s } from "@linaria/react";
+import { SvgIcon as a } from "../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const a = r.div`
-  display: flex;
-  align-items: center;
-  column-gap: 4px;
-  padding: 8px 16px 8px 8px;
-  color: var(--color-neutrals-gray9);
-  font-size: 12px;
-  font-weight: var(--font-weight-default);
-  line-height: 16px;
-  border: 1px solid var(--color-neutrals-gray3);
-  border-radius: 8px;
-  background-color: var(--color-neutrals-white);
-  cursor: pointer;
-
-  &:hover {
-    color: var(--color-primary-green1);
-    border-color: var(--color-neutrals-gray5);
-  }
-`, l = r.div`
-  min-width: 28px;
-  text-align: center;
-`, p = r.img`
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-`, s = r.div`
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  color: var(--color-neutrals-gray9);
-  font-size: 12px;
-  border-radius: 50%;
-  background: var(--color-grey-primary-onboarding-inapp);
-  text-align: center;
-  text-transform: uppercase;
-`, c = r.div`
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  column-gap: 8px;
-`, d = r.div`
-  display: grid;
-  align-items: center;
-  column-gap: 4px;
-  grid-template-columns: 1fr auto;
-`, g = r.span`
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-`, x = r(e)`
-  flex-shrink: 0;
-`;
+const c = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_culdu4a",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Position",
+  class: "Position_pwf8e69",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("img")({
+  name: "Avatar",
+  class: "Avatar_atf4yh4",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "AvatarPlaceholder",
+  class: "AvatarPlaceholder_a1dg29ja",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_c10a68rc",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "NameContainer",
+  class: "NameContainer_nc4kck5",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("span")({
+  name: "Name",
+  class: "Name_njsrqgr",
+  propsAsIs: !1
+}), e = () => a, v = /* @__PURE__ */ s(e())({
+  name: "CurrentUserBadge",
+  class: "CurrentUserBadge_c17uc4zr",
+  propsAsIs: !0
+});
 export {
   p as Avatar,
-  s as AvatarPlaceholder,
-  a as Container,
-  c as Content,
-  x as CurrentUserBadge,
-  g as Name,
+  i as AvatarPlaceholder,
+  c as Container,
+  m as Content,
+  v as CurrentUserBadge,
+  A as Name,
   d as NameContainer,
   l as Position
 };

package/lib/ui/gamification/onboarding/index.js

@@ -1,10 +1,10 @@
-import { jsx as o, jsxs as c } from "react/jsx-runtime";
-import { useState as g, useEffect as N, useCallback as k } from "react";
-import D from "react-virtualized-auto-sizer";
-import { OnboardingInstructions as T } from "./slides/onboarding-instructions/index.js";
-import { OnboardingInviteCard as j } from "./slides/onboarding-invite-card/index.js";
-import { OnboardingRules as w } from "./slides/onboarding-rules/index.js";
-import { Container as A, OnboardingHeader as B, CloseBtn as z, IconClose as E, Content as F, OnboardingFooter as G, OnboardingActionBtn as H } from "./styles.js";
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import { useState as h, useEffect as k, useMemo as D, useCallback as T } from "react";
+import j from "react-virtualized-auto-sizer";
+import { OnboardingInstructions as w } from "./slides/onboarding-instructions/index.js";
+import { OnboardingInviteCard as A } from "./slides/onboarding-invite-card/index.js";
+import { OnboardingRules as z } from "./slides/onboarding-rules/index.js";
+import { Container as E, OnboardingHeader as F, CloseBtn as G, IconClose as H, Content as M, OnboardingFooter as P, OnboardingActionBtn as R } from "./styles.js";
 import "../../lottie/index.js";
 import "@lottiefiles/react-lottie-player";
 import "./slides/onboarding-instructions/styles.js";
@@ -14,52 +14,52 @@ import "./slides/onboarding-invite-card/styles.js";
 import "./slides/onboarding-rules/styles.js";
 import "../../button/index.js";
 import "../../button/styles.js";
-const e = {
+const a = {
   steps: !1,
   rules: !1,
   inviteCard: !1
-}, s = ({
-  gamification: f,
-  steps: i,
-  rules: n,
-  rulesBtnLabel: h,
+}, tn = ({
+  gamification: u,
+  steps: n,
+  rules: t,
+  rulesBtnLabel: m,
   rulesTitle: b,
   primaryColor: d,
   inviteLink: C,
-  socialLinks: u,
-  inviteCardTitle: S,
-  inviteCardSubtext: y,
-  inviteCardBtnLabel: v,
-  onClose: O
+  socialLinks: S,
+  inviteCardTitle: y,
+  inviteCardSubtext: O,
+  inviteCardBtnLabel: c,
+  onClose: p
 }) => {
-  const [a, m] = g(0), [t, r] = g(e);
-  N(() => {
-    i != null && i.length ? r({ ...e, steps: !0 }) : n != null && n.length ? r({ ...e, rules: !0 }) : r({ ...e, inviteCard: !0 });
+  const [r, f] = h(0), [i, e] = h(a);
+  k(() => {
+    n != null && n.length ? e({ ...a, steps: !0 }) : t != null && t.length ? e({ ...a, rules: !0 }) : e({ ...a, inviteCard: !0 });
   }, []);
-  const p = k(() => {
-    i != null && i.length && a < i.length - 1 ? m((l) => ++l) : n != null && n.length && t.steps ? r({ ...e, rules: !0 }) : t.rules && r({ ...e, inviteCard: !0 });
-  }, [a, i == null ? void 0 : i.length, n == null ? void 0 : n.length, t, m, r]), I = async () => {
-    await f.onboardingStatus.submitInplay();
+  const v = D(() => i.steps && r === 0 ? "Continue" : i.rules ? m || "Got it" : i.inviteCard ? c || "Play Now" : "Next", [i, r, m, c]), I = T(() => {
+    n != null && n.length && r < n.length - 1 ? f((l) => ++l) : t != null && t.length && i.steps ? e({ ...a, rules: !0 }) : i.rules && e({ ...a, inviteCard: !0 });
+  }, [r, n == null ? void 0 : n.length, t == null ? void 0 : t.length, i, f, e]), x = async () => {
+    await u.onboardingStatus.submitInplay();
   };
-  return /* @__PURE__ */ o(D, { children: ({ width: l, height: x }) => /* @__PURE__ */ c(A, { style: { width: l, height: x }, children: [
-    /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(z, { onClick: O, children: /* @__PURE__ */ o(E, { name: "icon-close-btn-gray" }) }) }),
-    /* @__PURE__ */ c(F, { children: [
-      t.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ o(T, { stepsCount: i.length, currentStep: a, ...i[a] }),
-      t.rules && /* @__PURE__ */ o(w, { rules: n, rulesTitle: b, primaryColor: d }),
-      t.inviteCard && /* @__PURE__ */ o(
-        j,
+  return /* @__PURE__ */ o(j, { children: ({ width: l, height: N }) => /* @__PURE__ */ g(E, { style: { width: l, height: N }, children: [
+    /* @__PURE__ */ o(F, { children: /* @__PURE__ */ o(G, { onClick: p, children: /* @__PURE__ */ o(H, { name: "icon-close-btn-gray" }) }) }),
+    /* @__PURE__ */ g(M, { children: [
+      i.steps && (n == null ? void 0 : n.length) && /* @__PURE__ */ o(w, { stepsCount: n.length, currentStep: r, ...n[r] }),
+      i.rules && /* @__PURE__ */ o(z, { rules: t, rulesTitle: b, primaryColor: d }),
+      i.inviteCard && /* @__PURE__ */ o(
+        A,
         {
           inviteLink: C,
-          inviteCardTitle: S,
-          inviteCardSubtext: y,
+          inviteCardTitle: y,
+          inviteCardSubtext: O,
           primaryColor: d,
-          socialLinks: u
+          socialLinks: S
         }
       )
     ] }),
-    /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(H, { onClick: t.inviteCard ? I : p, children: t.rules ? h || "Got it" : t.inviteCard ? v || "Play Now" : "Next" }) })
+    /* @__PURE__ */ o(P, { children: /* @__PURE__ */ o(R, { onClick: i.inviteCard ? x : I, children: v }) })
   ] }) });
 };
 export {
-  s as Onboarding
+  tn as Onboarding
 };

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

@@ -1,47 +1,34 @@
-import { styled as t } from "@linaria/react";
-const o = t.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  padding-bottom: 24px;
-`, n = t.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  padding: 0 16px 32px;
-`, i = t.div`
-  display: flex;
-  flex-grow: 1;
-  width: 100%;
-`, r = t.div`
-  max-width: 270px;
-  color: var(--color-primary-green1);
-  font-family: var(--font-serif);
-  font-size: 22px;
-  font-weight: 400;
-  line-height: 30px;
-  text-align: center;
-`, a = t.div`
-  display: flex;
-  justify-content: center;
-  column-gap: 8px;
-`, c = t.span`
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background-color: var(--color-neutrals-gray4);
-
-  &[data-active='true'] {
-    background-color: var(--color-primary-green1);
-  }
-`;
+import { styled as s } from "@linaria/react";
+const e = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c1htq1lb",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_cjyzpp7",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Graphic",
+  class: "Graphic_g16mldgz",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Headline",
+  class: "Headline_h69js65",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "StepsContainer",
+  class: "StepsContainer_smm7qmo",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("span")({
+  name: "StepIndicator",
+  class: "StepIndicator_s17knuw2",
+  propsAsIs: !1
+});
 export {
-  o as Container,
-  n as Content,
-  i as Graphic,
-  r as Headline,
-  c as StepIndicator,
-  a as StepsContainer
+  e as Container,
+  a as Content,
+  t as Graphic,
+  o as Headline,
+  i as StepIndicator,
+  p as StepsContainer
 };