@streamlayer/react-ui 0.66.0 → 0.67.1

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

@@ -1,68 +1,39 @@
-import { styled as o } from "@linaria/react";
-const t = o.div`
-  box-sizing: border-box;
-  background-color: var(--color-neutrals-white);
-  border-radius: 8px;
-  width: 100%;
-`, e = 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;
-  }
-`, i = o.div`
-  color: var(--color-neutrals-gray9);
-  font-size: 12px;
-  font-weight: var(--font-weight-default);
-  line-height: 18px;
-`, n = o.img`
-  max-width: 100%;
-  border-radius: 8px;
-`, a = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-  color: var(--color-neutrals-gray9);
-  font-weight: var(--font-weight-default);
-  margin-bottom: 16px;
-`, l = o.div`
-  padding-bottom: 12px;
-  border-bottom: 0.7px solid var(--color-neutrals-gray3);
-  margin-bottom: 12px;
-`, d = o.blockquote`
-  padding: 0px 24px 0px 12px;
-  color: var(--color-primary-green2);
-  border-left: 2px solid var(--color-primary-green2);
-  font-size: 12px;
-  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-word;
-  text-overflow: ellipsis;
-  max-height: 32px;
-`;
+import { styled as s } from "@linaria/react";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c1t4f0x4",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("button")({
+  name: "ActionBtn",
+  class: "a16w1nl6",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "b14u54rf",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("img")({
+  name: "Image",
+  class: "i1hxm6zo",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Details",
+  class: "d1s19yop",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "QuoteWrap",
+  class: "q1qyx94r",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("blockquote")({
+  name: "Quote",
+  class: "qs97clu",
+  propsAsIs: !1
+});
 export {
   e as ActionBtn,
-  i as Body,
-  t as Container,
-  a as Details,
+  t as Body,
+  a as Container,
+  l as Details,
   n as Image,
-  d as Quote,
-  l as QuoteWrap
+  p as Quote,
+  c as QuoteWrap
 };

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

@@ -1,98 +1,72 @@
-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 s = o.div`
-  border-radius: var(--border-radius);
-  padding: var(--container-padding);
-  background-color: var(--color-neutrals-white);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  border: 1px solid var(--color-neutrals-white);
-
-  &:hover {
-    border-color: var(--color-neutrals-gray4);
-  }
-`, a = o.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  font-size: 12px;
-  font-weight: 500;
-  margin-bottom: 8px;
-`, p = o.div`
-  font-family: var(--font-serif);
-  color: var(--color-primary-green2);
-  font-size: 14px;
-  font-weight: 400;
-`, l = o.div``, c = o(t)`
-  width: 24px;
-  height: 24px;
-`, d = o(t)`
-  width: 16px;
-  height: 16px;
-
-  path {
-    fill: var(--color-primary-green1);
-    fill-opacity: 1;
-  }
-`, f = o.div`
-  color: var(--color-neutrals-gray7);
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 500;
-
-  margin-left: 6px;
-`, u = o.div`
-  font-weight: 700;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-`, x = o.div`
-  color: var(--color-white);
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`, g = o.button`
-  background-color: var(--color-blue-question-action-btn);
-  border: none;
-  border-radius: 2px;
-  font-size: 8px;
-  padding: 6px;
-  height: 20px;
-  text-transform: uppercase;
-  color: #fff;
-  cursor: pointer;
-`, v = o.img`
-  width: 16px;
-  height: 16px;
-`, h = o.span`
-  text-transform: uppercase;
-`, m = o.span`
-  text-transform: uppercase;
-  border-left: 1px solid var(--color-grey-primary);
-  padding-left: 5px;
-  margin-left: 5px;
-`;
+const a = /* @__PURE__ */ s("div")({
+  name: "QuestionItem",
+  class: "q1w97g3p",
+  propsAsIs: !1
+}), u = /* @__PURE__ */ s("div")({
+  name: "QuestionCaption",
+  class: "q2sl39u",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "QuestionBody",
+  class: "qd5h0uc",
+  propsAsIs: !1
+}), Q = /* @__PURE__ */ s("div")({
+  name: "QuestionAction",
+  class: "q105uluy",
+  propsAsIs: !1
+}), e = () => o, r = /* @__PURE__ */ s(e())({
+  name: "QuestionActionIcon",
+  class: "q1fa0b9h",
+  propsAsIs: !0
+}), n = () => o, m = /* @__PURE__ */ s(n())({
+  name: "QuestionTypeIcon",
+  class: "qxlt78s",
+  propsAsIs: !0
+}), I = /* @__PURE__ */ s("div")({
+  name: "QuestionTypeLabel",
+  class: "qmg0vkx",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("div")({
+  name: "QuestionContent",
+  class: "q1uz5j1g",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "QuestionSubject",
+  class: "qc3icwa",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("button")({
+  name: "QuestionActionTitle",
+  class: "qmx43d1",
+  propsAsIs: !1
+}), q = /* @__PURE__ */ s("img")({
+  name: "QuestionStatusIcon",
+  class: "q1uc7n5z",
+  propsAsIs: !1
+}), y = /* @__PURE__ */ s("span")({
+  name: "QuestionTypeTitle",
+  class: "qcpp4y6",
+  propsAsIs: !1
+}), T = /* @__PURE__ */ s("span")({
+  name: "ExpiredQuestion",
+  class: "e1rdw3wd",
+  propsAsIs: !1
+});
 export {
-  m as ExpiredQuestion,
-  l as QuestionAction,
-  c as QuestionActionIcon,
-  g as QuestionActionTitle,
-  p as QuestionBody,
-  a as QuestionCaption,
-  u as QuestionContent,
-  s as QuestionItem,
-  v as QuestionStatusIcon,
-  x as QuestionSubject,
-  d as QuestionTypeIcon,
-  f as QuestionTypeLabel,
-  h as QuestionTypeTitle
+  T as ExpiredQuestion,
+  Q as QuestionAction,
+  r as QuestionActionIcon,
+  f as QuestionActionTitle,
+  l as QuestionBody,
+  u as QuestionCaption,
+  A as QuestionContent,
+  a as QuestionItem,
+  q as QuestionStatusIcon,
+  d as QuestionSubject,
+  m as QuestionTypeIcon,
+  I as QuestionTypeLabel,
+  y as QuestionTypeTitle
 };

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

@@ -1,27 +1,17 @@
-import { styled as o } from "@linaria/react";
-import { Button as r } from "../../../button/index.js";
+import { styled as t } from "@linaria/react";
+import { Button as o } from "../../../button/index.js";
 import "react/jsx-runtime";
 import "../../../button/styles.js";
-const n = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 16px;
-  padding: 12px 16px 16px 16px;
-  border: 1px solid var(--color-neutrals-white);
-  border-radius: 8px;
-  background-color: var(--color-neutrals-white);
-
-  &:hover {
-    border-color: var(--color-neutrals-gray4);
-  }
-`, l = o(r)`
-  height: 44px;
-  padding: 0 16px;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-`;
+const c = /* @__PURE__ */ t("div")({
+  name: "Container",
+  class: "cl56x6b",
+  propsAsIs: !1
+}), s = () => o, i = /* @__PURE__ */ t(s())({
+  name: "ActionButton",
+  class: "a11pzf92",
+  propsAsIs: !0
+});
 export {
-  l as ActionButton,
-  n as Container
+  i as ActionButton,
+  c as Container
 };

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

@@ -1,67 +1,24 @@
-import { styled as o } from "@linaria/react";
-const t = o.div``, e = o.div`
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  display: flex;
-  overflow: hidden;
-  border-radius: 8px;
-  background-color: var(--color-neutrals-gray2);
-  padding: 4px;
-
-  &:before {
-    content: '';
-    position: absolute;
-    background-color: var(--color-white);
-    border-radius: 6px;
-    height: 28px;
-    left: 4px;
-    width: calc(50% - 4px);
-    transition: transform var(--animation-duration) var(--animation-function);
-  }
-
-  &[data-position='left'] {
-    &:before {
-      transform: translateX(0);
-    }
-  }
-
-  &[data-position='right'] {
-    &:before {
-      transform: translateX(100%);
-    }
-  }
-`, n = o.button`
-  border: none;
-  outline: none;
-  background-color: transparent;
-  color: var(--color-neutrals-gray7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-  font-weight: 550;
-  width: 50%;
-  box-sizing: border-box;
-  padding: 4px 10px;
-  height: 28px;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--color-primary-green1);
-  }
-
-  &[data-selected='true'] {
-    color: var(--color-primary-green1);
-    cursor: default;
-  }
-`, i = o.span`
-  position: relative;
-  z-index: 2;
-`;
+import { styled as s } from "@linaria/react";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c115qtkr",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "STabs",
+  class: "sxnslc8",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("button")({
+  name: "Button",
+  class: "b1umzux0",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("span")({
+  name: "Title",
+  class: "tspsaas",
+  propsAsIs: !1
+});
 export {
-  n as Button,
-  t as Container,
-  e as STabs,
-  i as Title
+  o as Button,
+  a as Container,
+  n as STabs,
+  e as Title
 };

package/lib/ui/gamification/user-statistics/components/rank/styles.js

@@ -1,25 +1,19 @@
-import { styled as e } from "@linaria/react";
-const t = e.div`
-  display: flex;
-  align-items: center;
-  flex: 1;
-  justify-content: space-between;
-  padding: 9px 8px;
-  color: var(--color-neutrals-white);
-  border-radius: 4px;
-  background-color: var(--color-primary-green2);
-  overflow: hidden;
-`, r = e.div`
-  font-size: 9px;
-  line-height: 14px;
-  text-transform: uppercase;
-  opacity: 0.8;
-`, i = e.div`
-  font-size: 14px;
-  line-height: 16px;
-`;
+import { styled as s } from "@linaria/react";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c1zy8a",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t1vih9p5",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Indicator",
+  class: "i1fbnvpb",
+  propsAsIs: !1
+});
 export {
-  t as Container,
-  i as Indicator,
-  r as Title
+  a as Container,
+  o as Indicator,
+  n as Title
 };

package/lib/ui/gamification/user-statistics/components/statistic/styles.js

@@ -1,23 +1,19 @@
-import { styled as t } from "@linaria/react";
-const i = t.div`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  row-gap: 4px;
-  padding-top: 2px;
-  color: var(--color-neutrals-white);
-  text-align: center;
-`, o = t.div`
-  font-size: 14px;
-  line-height: 16px;
-`, n = t.div`
-  font-size: 9px;
-  line-height: 14px;
-  text-transform: uppercase;
-  opacity: 0.8;
-`;
+import { styled as s } from "@linaria/react";
+const o = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "ctmhwyc",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("div")({
+  name: "Indicator",
+  class: "i1jri200",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t8s05oq",
+  propsAsIs: !1
+});
 export {
-  i as Container,
-  o as Indicator,
-  n as Title
+  o as Container,
+  a as Indicator,
+  e as Title
 };