@streamlayer/react-ui 0.66.0 → 0.67.0

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: "Container_cm0bev",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_ce7x737",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "Title_tc2tor6",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "RulesList",
+  class: "RulesList_r1k5klql",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("div")({
+  name: "RulesItem",
+  class: "RulesItem_r1tf3ft2",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "RuleIcon",
+  class: "RuleIcon_rwpvg1k",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "RuleText",
+  class: "RuleText_rbxiag0",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("button")({
+  name: "TermsButton",
+  class: "TermsButton_t6cyrry",
+  propsAsIs: !1
+});
 export {
-  e as Container,
+  t as Container,
   n as Content,
-  a as RuleIcon,
-  c as RuleText,
-  l as RulesItem,
-  r as RulesList,
+  c as RuleIcon,
+  r as RuleText,
+  a as RulesItem,
+  o as RulesList,
   p as TermsButton,
-  o as Title
+  l as Title
 };

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

@@ -1,54 +1,44 @@
-import { styled as n } from "@linaria/react";
-import { Button as o } from "../../button/index.js";
-import { SvgIcon as t } from "../../icons/index.js";
+import { styled as o } from "@linaria/react";
+import { Button as n } from "../../button/index.js";
+import { SvgIcon as s } 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 d = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "Container_c18uddbs",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ o("div")({
+  name: "Content",
+  class: "Content_cvcfjf6",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ o("div")({
+  name: "OnboardingHeader",
+  class: "OnboardingHeader_o1ie27lw",
+  propsAsIs: !1
+}), C = /* @__PURE__ */ o("button")({
+  name: "CloseBtn",
+  class: "CloseBtn_c15cjkwi",
+  propsAsIs: !1
+}), t = () => s, b = /* @__PURE__ */ o(t())({
+  name: "IconClose",
+  class: "IconClose_i1mavjt2",
+  propsAsIs: !0
+}), g = /* @__PURE__ */ o("div")({
+  name: "OnboardingFooter",
+  class: "OnboardingFooter_o1x0dyzv",
+  propsAsIs: !1
+}), e = () => n, I = /* @__PURE__ */ o(e())({
+  name: "OnboardingActionBtn",
+  class: "OnboardingActionBtn_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
+  C as CloseBtn,
+  d as Container,
+  m as Content,
+  b as IconClose,
+  I as OnboardingActionBtn,
+  g as OnboardingFooter,
+  f as OnboardingHeader
 };

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: "PointsContainer_psiob9b",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "PointsIcon",
+  class: "PointsIcon_p1gqe4lh",
+  propsAsIs: !1
+}), n = () => o, c = /* @__PURE__ */ s(n())({
+  name: "PointsSvg",
+  class: "PointsSvg_p15syg2y",
+  propsAsIs: !0
+}), r = /* @__PURE__ */ s("div")({
+  name: "PointsBody",
+  class: "PointsBody_p12n4f2h",
+  propsAsIs: !1
+}), P = /* @__PURE__ */ s("div")({
+  name: "PointsTitle",
+  class: "PointsTitle_poqmx89",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "PointsValue",
+  class: "PointsValue_prj9b3v",
+  propsAsIs: !1
+});
 export {
-  h as PointsBody,
-  l as PointsContainer,
-  a as PointsIcon,
-  x as PointsSvg,
-  c as PointsTitle,
+  r as PointsBody,
+  a as PointsContainer,
+  l as PointsIcon,
+  c as PointsSvg,
+  P as PointsTitle,
   m 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: "Container_cll3md7",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("button")({
+  name: "ActionBtn",
+  class: "ActionBtn_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 n = /* @__PURE__ */ s("div")({
+  name: "QuestionsContainer",
+  class: "QuestionsContainer_qvghv3l",
+  propsAsIs: !1
+});
 export {
-  t as QuestionsContainer
+  n as QuestionsContainer
 };

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

@@ -1,66 +1,29 @@
-import { styled as o } from "@linaria/react";
-const r = o.div`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  row-gap: 16px;
-  background-color: var(--color-neutrals-white);
-  border-radius: 8px;
-  width: 100%;
-`, i = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-`, t = o.h3`
-  color: var(--color-primary-green2);
-  font-size: 16px;
-  line-height: 26px;
-  font-weight: 400;
-  font-family: var(--font-serif);
-  font-weight: var(--font-weight-default);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  word-break: break-all;
-  text-overflow: ellipsis;
-  max-height: 50px;
-`, n = o.div`
-  color: var(--color-neutrals-gray9);
-  font-size: 12px;
-  line-height: 24px;
-  font-weight: var(--font-weight-default);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  word-break: break-all;
-  text-overflow: ellipsis;
-  max-height: 50px;
-`, l = o.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: "InsightContainer",
+  class: "InsightContainer_i1pqqgpo",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "InsightContent",
+  class: "InsightContent_igj7luu",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("h3")({
+  name: "Title",
+  class: "Title_t1qne9g6",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "Description_dtpr98r",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("button")({
+  name: "ActionBtn",
+  class: "ActionBtn_a17iaqp8",
+  propsAsIs: !1
+});
 export {
-  l as ActionBtn,
-  n as Description,
-  r as InsightContainer,
+  a as ActionBtn,
+  e as Description,
+  n as InsightContainer,
   i as InsightContent,
-  t as Title
+  o as Title
 };