@streamlayer/react-ui 0.66.0 → 0.67.1

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

@@ -1,104 +1,77 @@
-import { styled as e } from "@linaria/react";
-import { SvgIcon as t } from "../../../../icons/index.js";
+import { styled as s } from "@linaria/react";
+import { SvgIcon as n } from "../../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const a = e.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  row-gap: 24px;
-  height: 100%;
-  padding: 16px 16px 56px;
-`, l = e.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background-color: var(--color-primary-green1);
-`, p = e(t)`
-  width: 24px;
-  height: 24px;
-`, c = e.div`
-  max-width: 270px;
-  width: 100%;
-`, s = e.div`
-  margin-bottom: 8px;
-  color: var(--color-primary-green1);
-  font-family: var(--font-serif);
-  font-size: 22px;
-  font-weight: 400;
-  line-height: 30px;
-  text-align: center;
-`, x = e.div`
-  color: var(--color-neutrals-gray9);
-  font-size: 14px;
-  font-weight: var(--font-weight-default);
-  line-height: 20px;
-  letter-spacing: -0.154px;
-  text-align: center;
-`, d = e.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  column-gap: 16px;
-  padding: 12px 16px;
-  max-width: 292px;
-  width: 100%;
-  border-radius: 8px;
-  border: 1px solid var(--color-neutrals-gray3);
-  cursor: pointer;
-`, g = e.div`
-  display: flex;
-  flex-direction: column;
-  font-weight: var(--font-weight-default);
-  overflow: hidden;
-`, f = e.span`
-  color: var(--color-primary-green1);
-  font-size: 16px;
-  line-height: 24px;
-`, h = e.span`
-  color: var(--color-neutrals-gray9);
-  font-size: 14px;
-  line-height: 20px;
-  letter-spacing: -0.154px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-`, m = e(t)`
-  flex-shrink: 0;
-`, v = e.div`
-  display: flex;
-  column-gap: 8px;
-`, w = e.a`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  row-gap: 8px;
-  min-width: 68px;
-  text-decoration: none;
-`, u = e.span`
-  color: var(--color-neutrals-gray9);
-  font-size: 12px;
-  font-weight: var(--font-weight-default);
-  line-height: 18px;
-  letter-spacing: -0.154px;
-`;
+const l = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c1itm4k7",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "IconContainer",
+  class: "i1w4fsni",
+  propsAsIs: !1
+}), o = () => n, r = /* @__PURE__ */ s(o())({
+  name: "InviteGameIcon",
+  class: "i19m85r1",
+  propsAsIs: !0
+}), m = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "c1mbu204",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "Heading",
+  class: "h1amdqtv",
+  propsAsIs: !1
+}), k = /* @__PURE__ */ s("div")({
+  name: "Subtext",
+  class: "s1lhlj9j",
+  propsAsIs: !1
+}), L = /* @__PURE__ */ s("div")({
+  name: "LinkContainer",
+  class: "l1wot35e",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "LinkInfo",
+  class: "l1jdw39q",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("span")({
+  name: "LinkTitle",
+  class: "l1cr5mk",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("span")({
+  name: "LinkAddress",
+  class: "lvi87q4",
+  propsAsIs: !1
+}), a = () => n, v = /* @__PURE__ */ s(a())({
+  name: "LinkIcon",
+  class: "l1pqlvw3",
+  propsAsIs: !0
+}), C = /* @__PURE__ */ s("div")({
+  name: "SocialLinksContainer",
+  class: "s1n7kzeh",
+  propsAsIs: !1
+}), S = /* @__PURE__ */ s("a")({
+  name: "SocialLink",
+  class: "s2m9o9y",
+  propsAsIs: !1
+}), b = /* @__PURE__ */ s("span")({
+  name: "SocialLinkLabel",
+  class: "sewjbbn",
+  propsAsIs: !1
+});
 export {
-  a as Container,
-  c as Content,
-  s as Heading,
-  l as IconContainer,
-  p as InviteGameIcon,
-  h as LinkAddress,
-  d as LinkContainer,
-  m as LinkIcon,
-  g as LinkInfo,
+  l as Container,
+  m as Content,
+  I as Heading,
+  p as IconContainer,
+  r as InviteGameIcon,
+  A as LinkAddress,
+  L as LinkContainer,
+  v as LinkIcon,
+  d as LinkInfo,
   f as LinkTitle,
-  w as SocialLink,
-  u as SocialLinkLabel,
-  v as SocialLinksContainer,
-  x as Subtext
+  S as SocialLink,
+  b as SocialLinkLabel,
+  C as SocialLinksContainer,
+  k as Subtext
 };

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

@@ -1,83 +1,44 @@
-import { styled as t } from "@linaria/react";
-const e = t.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  padding-bottom: 16px;
-`, n = t.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  row-gap: 24px;
-  height: 100%;
-  padding: 0 32px 32px;
-`, o = t.div`
-  color: var(--color-primary-green1);
-  font-family: var(--font-serif);
-  font-size: 22px;
-  font-weight: 400;
-  line-height: 30px;
-  text-align: center;
-`, r = t.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 24px;
-`, l = t.div`
-  display: flex;
-  align-items: center;
-  column-gap: 16px;
-`, a = t.div`
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: var(--color-primary-green1);
-
-  & [data-icon='icon-trophy'] {
-    width: 18px;
-    height: 18px;
-
-    path {
-      fill: var(--color-neutrals-white);
-    }
-  }
-
-  & [data-icon='icon-btn-feature-groups'] path {
-    &:first-child {
-      stroke: var(--color-neutrals-white);
-    }
-    &:not(:first-child) {
-      fill: var(--color-neutrals-white);
-    }
-  }
-`, c = t.div`
-  font-size: 14px;
-  font-weight: var(--font-weight-default);
-  line-height: 18px;
-  letter-spacing: -0.154px;
-`, p = t.button`
-  margin: 0 auto;
-  padding: 8px 16px;
-  color: var(--color-primary-green1);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  border: initial;
-  background: initial;
-  outline: initial;
-  cursor: pointer;
-`;
+import { styled as s } from "@linaria/react";
+const t = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cm0bev",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "ce7x737",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "tc2tor6",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "RulesList",
+  class: "r1k5klql",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("div")({
+  name: "RulesItem",
+  class: "r1tf3ft2",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "RuleIcon",
+  class: "rwpvg1k",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "RuleText",
+  class: "rbxiag0",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("button")({
+  name: "TermsButton",
+  class: "t6cyrry",
+  propsAsIs: !1
+});
 export {
-  e as Container,
-  n as Content,
-  a as RuleIcon,
-  c as RuleText,
-  l as RulesItem,
-  r as RulesList,
+  t as Container,
+  l as Content,
+  c as RuleIcon,
+  r as RuleText,
+  a as RulesItem,
+  o as RulesList,
   p as TermsButton,
-  o as Title
+  n as Title
 };

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

@@ -1,54 +1,44 @@
-import { styled as n } from "@linaria/react";
+import { styled as s } from "@linaria/react";
 import { Button as o } from "../../button/index.js";
-import { SvgIcon as t } from "../../icons/index.js";
+import { SvgIcon as n } from "../../icons/index.js";
 import "react/jsx-runtime";
 import "../../button/styles.js";
 import "react";
-const c = n.div`
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-neutrals-white);
-`, a = n.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-`, s = n.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 12px 12px 16px;
-`, x = n.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: auto;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  border: none;
-  background-color: transparent;
-  outline: none;
-  cursor: pointer;
-`, g = n(t)`
-  width: 10px;
-  height: 10px;
-`, f = n.div`
-  display: flex;
-  padding: 0 16px 16px 16px;
-`, m = n(o)`
-  flex-grow: 1;
-  padding: 0 16px;
-  height: 44px;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-`;
+const m = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c18uddbs",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "cvcfjf6",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("div")({
+  name: "OnboardingHeader",
+  class: "o1ie27lw",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("button")({
+  name: "CloseBtn",
+  class: "c15cjkwi",
+  propsAsIs: !1
+}), t = () => n, A = /* @__PURE__ */ s(t())({
+  name: "IconClose",
+  class: "i1mavjt2",
+  propsAsIs: !0
+}), b = /* @__PURE__ */ s("div")({
+  name: "OnboardingFooter",
+  class: "o1x0dyzv",
+  propsAsIs: !1
+}), e = () => o, v = /* @__PURE__ */ s(e())({
+  name: "OnboardingActionBtn",
+  class: "o1jfi9c3",
+  propsAsIs: !0
+});
 export {
-  x as CloseBtn,
-  c as Container,
-  a as Content,
-  g as IconClose,
-  m as OnboardingActionBtn,
-  f as OnboardingFooter,
-  s as OnboardingHeader
+  I as CloseBtn,
+  m as Container,
+  d as Content,
+  A as IconClose,
+  v as OnboardingActionBtn,
+  b as OnboardingFooter,
+  f as OnboardingHeader
 };

package/lib/ui/gamification/points/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 type PointsProps = {
-    points: number;
+    points?: number;
 };
 export declare const Points: React.FC<PointsProps>;
 export {};

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

@@ -1,20 +1,18 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import { resetCss as r } from "../../theme/theme.js";
 import { formatDecimals as n } from "../../../utils/common.js";
-import { PointsContainer as m, PointsIcon as s, PointsSvg as e, PointsBody as p, PointsTitle as c, PointsValue as l } from "./styles.js";
-import "@linaria/core";
+import { PointsContainer as s, PointsIcon as m, PointsSvg as e, PointsBody as p, PointsTitle as c, PointsValue as l } from "./styles.js";
 import "../../theme/constants.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-import "../../theme/breakpoints.js";
-const T = ({ points: t }) => /* @__PURE__ */ i(m, { className: r, children: [
-  /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(e, { name: "icon-trophy" }) }),
+const y = ({ points: t }) => /* @__PURE__ */ i(s, { className: r, children: [
+  /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(e, { name: "icon-trophy" }) }),
   /* @__PURE__ */ i(p, { children: [
     /* @__PURE__ */ o(c, { children: "Total points" }),
     /* @__PURE__ */ o(l, { children: n(t) })
   ] })
 ] });
 export {
-  T as Points
+  y as Points
 };

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

@@ -1,86 +1,37 @@
-import { styled as t } from "@linaria/react";
+import { styled as s } from "@linaria/react";
 import { SvgIcon as o } from "../../icons/index.js";
-import { breakpoints as i } from "../../theme/breakpoints.js";
 import "react/jsx-runtime";
 import "react";
-import "../../theme/constants.js";
-const l = t.div`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  column-gap: 8px;
-  padding: 4px 17px 4px 4px;
-  border-radius: 40px;
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    border-radius: 40px;
-    border: 1px solid var(--color-neutrals-white);
-    opacity: 0.4;
-    z-index: -1;
-  }
-
-  ${i.down("md")`
-    padding-right: 10px;
-  `}
-`, a = t.div`
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: var(--color-primary-green2);
-
-  ${i.down("md")`
-    width: 28px;
-    height: 28px;
-  `}
-`, x = t(o)`
-  width: 20px;
-  height: 20px;
-
-  path {
-    fill: var(--color-neutrals-white);
-  }
-
-  ${i.down("md")`
-    width: 14px;
-    height: 14px;
-  `}
-`, h = t.div`
-  display: flex;
-  flex-direction: column;
-  color: var(--color-neutrals-white);
-  font-weight: var(--font-weight-default);
-`, c = t.div`
-  margin-bottom: 1px;
-  font-size: 9px;
-  text-transform: uppercase;
-
-  ${i.down("md")`
-    display: none;
-  `}
-`, m = t.div`
-  font-size: 18px;
-  line-height: 20px;
-
-  ${i.down("md")`
-    font-size: 14px;
-    line-height: 22px;
-  `}
-`;
+const a = /* @__PURE__ */ s("div")({
+  name: "PointsContainer",
+  class: "psiob9b",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "PointsIcon",
+  class: "p1gqe4lh",
+  propsAsIs: !1
+}), n = () => o, c = /* @__PURE__ */ s(n())({
+  name: "PointsSvg",
+  class: "p15syg2y",
+  propsAsIs: !0
+}), r = /* @__PURE__ */ s("div")({
+  name: "PointsBody",
+  class: "p12n4f2h",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "PointsTitle",
+  class: "poqmx89",
+  propsAsIs: !1
+}), P = /* @__PURE__ */ s("div")({
+  name: "PointsValue",
+  class: "prj9b3v",
+  propsAsIs: !1
+});
 export {
-  h as PointsBody,
-  l as PointsContainer,
-  a as PointsIcon,
-  x as PointsSvg,
-  c as PointsTitle,
-  m as PointsValue
+  r as PointsBody,
+  a as PointsContainer,
+  l as PointsIcon,
+  c as PointsSvg,
+  m as PointsTitle,
+  P as PointsValue
 };

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

@@ -1,54 +1,14 @@
-import { styled as r } from "@linaria/react";
-import { Title as o, Description as e } from "../../../questions/insight/styles.js";
-const n = r.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-  padding: var(--container-padding);
-  border: 1px solid var(--color-neutrals-white);
-  border-radius: 8px;
-  background-color: var(--color-neutrals-white);
-
-  &:hover {
-    border-color: var(--color-neutrals-gray4);
-  }
-
-  ${o} {
-    font-weight: 400;
-    line-height: 24px;
-  }
-
-  ${e} {
-    display: -webkit-box;
-    font-size: 12px;
-    line-height: 18px;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-`, l = r.button`
-  border: none;
-  outline: none;
-  background-color: var(--color-primary-green1);
-  color: var(--color-white);
-  border-radius: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 550;
-  width: 100%;
-  padding: 0px 16px;
-  height: 44px;
-
-  &:hover {
-    background-color: var(--color-primary-green2);
-    cursor: pointer;
-  }
-`;
+import { styled as s } from "@linaria/react";
+const n = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cll3md7",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("button")({
+  name: "ActionBtn",
+  class: "a10g1iik",
+  propsAsIs: !1
+});
 export {
-  l as ActionBtn,
+  o as ActionBtn,
   n as Container
 };

package/lib/ui/gamification/question/list/styles.js

@@ -1,11 +1,9 @@
-import { styled as o } from "@linaria/react";
-const t = o.div`
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  max-height: 100%;
-  gap: 8px;
-`;
+import { styled as s } from "@linaria/react";
+const o = /* @__PURE__ */ s("div")({
+  name: "QuestionsContainer",
+  class: "qvghv3l",
+  propsAsIs: !1
+});
 export {
-  t as QuestionsContainer
+  o as QuestionsContainer
 };