@streamlayer/react-ui 0.66.0 → 0.67.1

package/lib/ui/button/styles.js

@@ -1,44 +1,14 @@
-import { styled as r } from "@linaria/react";
-const a = r.button`
-  border-radius: 71px;
-  padding: 14px 16px 12px;
-  font-size: 12px;
-  border: 1px solid;
-  font-weight: var(--font-weight-default);
-  outline: none;
-
-  &[data-variant='primary'] {
-    color: var(--color-neutrals-white);
-    background-color: var(--color-primary-green1);
-    border-color: var(--color-primary-green1);
-
-    &:hover:enabled {
-      background-color: var(--color-primary-green2);
-      border-color: var(--color-primary-green2);
-    }
-  }
-
-  &[data-variant='secondary'] {
-    color: var(--color-primary-green1);
-    background-color: transparent;
-    border-color: var(--color-primary-green1);
-
-    &:hover:enabled {
-      color: var(--color-neutrals-white);
-      background-color: var(--color-primary-green2);
-      border-color: var(--color-primary-green2);
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-
-    &:hover {
-      cursor: default;
-    }
-  }
-`, e = r.span``;
+import { styled as s } from "@linaria/react";
+const o = /* @__PURE__ */ s("button")({
+  name: "SButton",
+  class: "s1nve60q",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("span")({
+  name: "ButtonLabel",
+  class: "b1xoswwx",
+  propsAsIs: !1
+});
 export {
-  e as ButtonLabel,
-  a as SButton
+  n as ButtonLabel,
+  o as SButton
 };

package/lib/ui/gamification/detail/header/styles.js

@@ -1,59 +1,37 @@
-import { styled as o } from "@linaria/react";
-import { SvgIcon as t } from "../../../icons/index.js";
+import { styled as s } from "@linaria/react";
+import { SvgIcon as o } from "../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const a = o.div`
-  font-weight: var(--font-weight-default);
-  color: var(--color-neutrals-gray7);
-  border-bottom: 1px solid var(--color-neutrals-gray3);
-  background: var(--color-neutrals-white);
-  box-sizing: border-box;
-  width: 100%;
-  font-size: 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 12px 12px 16px;
-`, l = o.div`
-  display: flex;
-  align-items: center;
-`, p = o(t)`
-  width: 16px;
-  height: 16px;
-
-  path {
-    fill: var(--color-primary-green1);
-    fill-opacity: 1;
-  }
-`, s = o.span`
-  font-family: var(--font-regular);
-  margin-left: 8px;
-`, c = o.button`
-  width: 24px;
-  height: 24px;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-`, g = o(t)`
-  path {
-    stroke: var(--color-neutrals-gray7);
-  }
-
-  &:hover {
-    path {
-      stroke: var(--color-primary-green2);
-    }
-  }
-`;
+const l = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c1vwopgc",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "QuestionTypeWrap",
+  class: "qyktpt0",
+  propsAsIs: !1
+}), e = () => o, i = /* @__PURE__ */ s(e())({
+  name: "QuestionTypeIcon",
+  class: "q951jdx",
+  propsAsIs: !0
+}), u = /* @__PURE__ */ s("span")({
+  name: "QuestionTypeTitle",
+  class: "qss5f0e",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("button")({
+  name: "CloseButton",
+  class: "c1ao1jtv",
+  propsAsIs: !1
+}), t = () => o, I = /* @__PURE__ */ s(t())({
+  name: "CloseIcon",
+  class: "cvsl7l3",
+  propsAsIs: !0
+});
 export {
-  c as CloseButton,
-  g as CloseIcon,
-  a as Container,
-  p as QuestionTypeIcon,
-  s as QuestionTypeTitle,
-  l as QuestionTypeWrap
+  m as CloseButton,
+  I as CloseIcon,
+  l as Container,
+  i as QuestionTypeIcon,
+  u as QuestionTypeTitle,
+  r as QuestionTypeWrap
 };

package/lib/ui/gamification/detail/sponsor/index.js

@@ -1,14 +1,21 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import { styled as p } from "@linaria/react";
-const r = p.div`
-  width: 100%;
-  height: 53px;
-  display: flex;
-  padding: 16px 0px;
-  justify-content: center;
-`, i = p.img`
-  max-width: 20px;
-`, d = ({ sponsorLogo: o }) => o && /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(i, { alt: "sponsor-logo", src: o }) });
+const r = /* @__PURE__ */ p("div")({
+  name: "SponsorLogoWrap",
+  class: "s8p5v5z",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ p("img")({
+  name: "SponsorLogo",
+  class: "s755yti",
+  propsAsIs: !1
+}), c = ({
+  sponsorLogo: o
+}) => o && /* @__PURE__ */ s(r, {
+  children: /* @__PURE__ */ s(n, {
+    alt: "sponsor-logo",
+    src: o
+  })
+});
 export {
-  d as Sponsor
+  c as Sponsor
 };

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 e = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cygkmjj",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "c71yvf9",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Graphic",
+  class: "gao3b2f",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("img")({
+  name: "InsightIconDefault",
+  class: "i1k4eec3",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("img")({
+  name: "InsightIconCircle",
+  class: "i1uhyahn",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("img")({
+  name: "InsightIconAbsolute",
+  class: "i2ernmy",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t12j99pr",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("img")({
+  name: "NextIcon",
+  class: "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 Graphic,
+  i as InsightIconAbsolute,
+  c as InsightIconCircle,
+  a as InsightIconDefault,
+  p 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 e = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cddmj9e",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "ItemsContainer",
+  class: "i16t83sg",
+  propsAsIs: !1
+});
 export {
   e as Container,
-  t as ItemsContainer
+  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: "c1ux29ft",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("img")({
+  name: "FriendsIcon",
+  class: "f10ncfg2",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "c1yc07bd",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "tj6cq7w",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "d1ag78xo",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("img")({
+  name: "ArrowInviteIcon",
+  class: "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,
+  a 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: "culdu4a",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "Position",
+  class: "pwf8e69",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("img")({
+  name: "Avatar",
+  class: "atf4yh4",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "AvatarPlaceholder",
+  class: "a1dg29ja",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "c10a68rc",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "NameContainer",
+  class: "nc4kck5",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("span")({
+  name: "Name",
+  class: "njsrqgr",
+  propsAsIs: !1
+}), e = () => a, f = /* @__PURE__ */ s(e())({
+  name: "CurrentUserBadge",
+  class: "c17uc4zr",
+  propsAsIs: !0
+});
 export {
-  p as Avatar,
-  s as AvatarPlaceholder,
-  a as Container,
-  c as Content,
-  x as CurrentUserBadge,
-  g as Name,
+  l as Avatar,
+  m as AvatarPlaceholder,
+  c as Container,
+  i as Content,
+  f as CurrentUserBadge,
+  A as Name,
   d as NameContainer,
-  l as Position
+  p as Position
 };

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: "c1htq1lb",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "cjyzpp7",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Graphic",
+  class: "g16mldgz",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Headline",
+  class: "h69js65",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "StepsContainer",
+  class: "smm7qmo",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("span")({
+  name: "StepIndicator",
+  class: "s17knuw2",
+  propsAsIs: !1
+});
 export {
-  o as Container,
-  n as Content,
-  i as Graphic,
-  r as Headline,
+  e as Container,
+  a as Content,
+  t as Graphic,
+  o as Headline,
   c as StepIndicator,
-  a as StepsContainer
+  p as StepsContainer
 };