@streamlayer/react-ui 0.66.0 → 0.67.0

package/lib/ui/gamification/question/notification/prediction-result/animation-lines/styles.js

@@ -1,165 +1,84 @@
-import { styled as s } from "@linaria/react";
-const o = s.div`
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  top: -1px;
-  left: 0;
-  z-index: 1;
-  display: none;
-
-  &[data-active='true'] {
-    display: block;
-
-    & > div {
-      &:nth-child(1) {
-        animation: showLines 1000ms 50ms ease-out forwards, hiddenLines 1500ms 4500ms ease-in forwards;
-      }
-
-      &:nth-child(2) {
-        animation: showLines 700ms 500ms ease-out forwards, hiddenLines 1000ms 5000ms ease-in forwards;
-      }
-
-      &:nth-child(3) {
-        animation: showLines 500ms 700ms ease-out forwards, hiddenLines 700ms 5300ms ease-in forwards;
-      }
-
-      &:nth-child(4) {
-        animation: showLines 400ms 1000ms ease-out forwards, hiddenLines 500ms 5500ms ease-in forwards;
-      }
-    }
-
-    &[data-first-screen='true'] {
-      & > div {
-        &:nth-child(1) {
-          animation: showLines 1000ms 1000ms ease-out forwards, hiddenLines 1500ms 4500ms ease-in forwards;
-        }
-
-        &:nth-child(2) {
-          animation: showLines 700ms 1400ms ease-out forwards, hiddenLines 1000ms 5000ms ease-in forwards;
-        }
-
-        &:nth-child(3) {
-          animation: showLines 500ms 1700ms ease-out forwards, hiddenLines 700ms 5300ms ease-in forwards;
-        }
-      }
-    }
-
-    &[data-last-screen='true'] {
-      & > div {
-        &:nth-child(1) {
-          animation: showLines 1000ms 50ms ease-out forwards;
-        }
-
-        &:nth-child(2) {
-          animation: showLines 700ms 500ms ease-out forwards;
-        }
-
-        &:nth-child(3) {
-          animation: showLines 500ms 700ms ease-out forwards;
-        }
-
-        &:nth-child(4) {
-          animation: showLines 400ms 1000ms ease-out forwards;
-        }
-      }
-    }
-  }
-
-  & > div {
-    background-color: var(--color-white);
-  }
-
-  &[data-correct='true'] {
-    & > div {
-      background-color: var(--color-primary-green2);
-    }
-  }
-
-  &[data-correct='false'] {
-    & > div {
-      background-color: var(--color-neutrals-gray6);
-    }
-  }
-
-  @keyframes showLines {
-    0% {
-      transform: translateX(400px) rotate(137deg);
-    }
-
-    100% {
-      transform: translateX(0px) rotate(137deg);
-    }
-  }
-
-  @keyframes hiddenLines {
-    0% {
-      width: 1000px;
-    }
-
-    100% {
-      width: 2000px;
-      opacity: 0;
-    }
-  }
-`, e = s.div`
-  position: absolute;
-  opacity: 0.05;
-  height: 1000px;
-  width: 1000px;
-  bottom: -580px;
-  transform: translateX(400px) rotate(137deg);
-`, n = s(e)`
-  right: -818px;
-`, t = s(e)`
-  right: -902px;
-`, r = s(e)`
-  right: -997px;
-`, a = s(e)`
-  right: -891px;
-`, h = s(e)`
-  right: -942px;
-`, d = s(e)`
-  right: -996px;
-`, m = s(e)`
-  right: -931px;
-`, c = s(e)`
-  right: -981px;
-  opacity: 0.1;
-`, w = s(e)`
-  right: -1035px;
-  opacity: 0.15;
-`, p = s(e)`
-  right: -1088px;
-  opacity: 0.2;
-`, L = s(e)`
-  right: -931px;
-  opacity: 0.1;
-`, l = s(e)`
-  right: -981px;
-  opacity: 0.1;
-`, f = s(e)`
-  right: -1035px;
-  opacity: 0.1;
-`, u = s(e)`
-  right: -1088px;
-  opacity: 0.1;
-`;
+import { styled as e } from "@linaria/react";
+const w = /* @__PURE__ */ e("div")({
+  name: "BGWrap",
+  class: "BGWrap_b1dqe0sz",
+  propsAsIs: !1
+}), s = /* @__PURE__ */ e("div")({
+  name: "BGLineBase",
+  class: "BGLineBase_b1v6w7ni",
+  propsAsIs: !1
+}), n = () => s, l = /* @__PURE__ */ e(n())({
+  name: "BGOneLineOne",
+  class: "BGOneLineOne_b2nqb1p",
+  propsAsIs: !0
+}), o = () => s, O = /* @__PURE__ */ e(o())({
+  name: "BGOneLineTwo",
+  class: "BGOneLineTwo_b1xxgmbk",
+  propsAsIs: !0
+}), r = () => s, b = /* @__PURE__ */ e(r())({
+  name: "BGOneLineThree",
+  class: "BGOneLineThree_b63lwcb",
+  propsAsIs: !0
+}), i = () => s, m = /* @__PURE__ */ e(i())({
+  name: "BGTwoLineOne",
+  class: "BGTwoLineOne_b2iah4",
+  propsAsIs: !0
+}), p = () => s, x = /* @__PURE__ */ e(p())({
+  name: "BGTwoLineTwo",
+  class: "BGTwoLineTwo_b1xezvf6",
+  propsAsIs: !0
+}), t = () => s, F = /* @__PURE__ */ e(t())({
+  name: "BGTwoLineThree",
+  class: "BGTwoLineThree_b1jz1hg0",
+  propsAsIs: !0
+}), B = () => s, A = /* @__PURE__ */ e(B())({
+  name: "BGThreeLineOne",
+  class: "BGThreeLineOne_b18ho1tk",
+  propsAsIs: !0
+}), c = () => s, I = /* @__PURE__ */ e(c())({
+  name: "BGThreeLineTwo",
+  class: "BGThreeLineTwo_b14uvjfm",
+  propsAsIs: !0
+}), G = () => s, v = /* @__PURE__ */ e(G())({
+  name: "BGThreeLineThree",
+  class: "BGThreeLineThree_b11c3ns7",
+  propsAsIs: !0
+}), L = () => s, d = /* @__PURE__ */ e(L())({
+  name: "BGThreeLineFour",
+  class: "BGThreeLineFour_b1bqhhet",
+  propsAsIs: !0
+}), T = () => s, f = /* @__PURE__ */ e(T())({
+  name: "BGFourLineOne",
+  class: "BGFourLineOne_b1xyzi7o",
+  propsAsIs: !0
+}), a = () => s, q = /* @__PURE__ */ e(a())({
+  name: "BGFourLineTwo",
+  class: "BGFourLineTwo_byo0rup",
+  propsAsIs: !0
+}), u = () => s, y = /* @__PURE__ */ e(u())({
+  name: "BGFourLineThree",
+  class: "BGFourLineThree_b1oyiqgv",
+  propsAsIs: !0
+}), _ = () => s, z = /* @__PURE__ */ e(_())({
+  name: "BGFourLineFour",
+  class: "BGFourLineFour_bx3ddqw",
+  propsAsIs: !0
+});
 export {
-  u as BGFourLineFour,
-  L as BGFourLineOne,
-  f as BGFourLineThree,
-  l as BGFourLineTwo,
-  e as BGLineBase,
-  n as BGOneLineOne,
-  r as BGOneLineThree,
-  t as BGOneLineTwo,
-  p as BGThreeLineFour,
-  m as BGThreeLineOne,
-  w as BGThreeLineThree,
-  c as BGThreeLineTwo,
-  a as BGTwoLineOne,
-  d as BGTwoLineThree,
-  h as BGTwoLineTwo,
-  o as BGWrap
+  z as BGFourLineFour,
+  f as BGFourLineOne,
+  y as BGFourLineThree,
+  q as BGFourLineTwo,
+  s as BGLineBase,
+  l as BGOneLineOne,
+  b as BGOneLineThree,
+  O as BGOneLineTwo,
+  d as BGThreeLineFour,
+  A as BGThreeLineOne,
+  v as BGThreeLineThree,
+  I as BGThreeLineTwo,
+  m as BGTwoLineOne,
+  F as BGTwoLineThree,
+  x as BGTwoLineTwo,
+  w as BGWrap
 };

package/lib/ui/gamification/question/notification/prediction-result/styles.js

@@ -1,132 +1,57 @@
-import { styled as t } from "@linaria/react";
-import { SvgIcon as r } from "../../../../icons/index.js";
+import { styled as s } from "@linaria/react";
+import { SvgIcon as t } from "../../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const c = t.div`
-  box-sizing: border-box;
-  width: 100%;
-  height: 118px;
-  border-radius: 8px;
-  overflow: hidden;
-  position: relative;
-  background-color: var(--color-primary-green2);
-
-  &[data-bg-color-white='true'] {
-    background-color: var(--color-white);
-  }
-
-  transition: background-color 700ms ease-in;
-`, s = t.div`
-  width: 100%;
-  background-color: transparent;
-  transform: translateY(0px);
-  transition: transform 1s ease-in;
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2;
-
-  &[data-active-number='2'] {
-    transform: translateY(-118px);
-  }
-
-  &[data-active-number='3'] {
-    transform: translateY(-236px);
-  }
-
-  &[data-active-number='4'] {
-    transform: translateY(-354px);
-  }
-
-  &[data-active-number='5'] {
-    transform: translateY(-472px);
-  }
-`, l = t.div`
-  width: 100%;
-  height: 118px;
-  border-radius: 8px;
-  background-color: transparent;
-  position: relative;
-  padding: 22px 16px;
-  color: var(--color-white);
-  font-family: var(--font-serif);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  &[data-color-green='true'] {
-    color: var(--color-primary-green1);
-  }
-`, p = t.div`
-  margin-bottom: 10px;
-  font-size: 20px;
-  font-weight: var(--font-weight-default);
-  display: flex;
-  justify-content: center;
-  text-align: center;
-
-  &[data-incorrect='true'] {
-    color: var(--color-neutrals-gray9);
-  }
-`, o = t.div`
-  font-size: 12px;
-  font-weight: 500;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  align-items: center;
-  font-family: var(--font-regular);
-
-  &[data-incorrect='true'] {
-    color: var(--color-secondary-red1);
-  }
-`, d = t(o)`
-  font-family: var(--font-serif);
-`, f = t.div`
-  font-weight: 400px;
-  margin-left: 5px;
-`, g = t(r)`
-  width: 14px;
-  height: 14px;
-  margin-right: 6px;
-`, x = t.button`
-  width: 30px;
-  height: 30px;
-  border: none;
-  border-radius: 50%;
-  outline: none;
-  background-color: transparent;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  cursor: pointer;
-`, u = t(r)`
-  width: 20px;
-  height: 20px;
-
-  path {
-    stroke: var(--color-neutrals-gray7);
-  }
-
-  &:hover {
-    path {
-      stroke: var(--color-primary-green2);
-    }
-  }
-`;
+const i = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c10131zw",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "AnimateContent",
+  class: "AnimateContent_ar6k2eo",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_c1hwoq9l",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "Title_t4ujo4g",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "Subtitle",
+  class: "Subtitle_s1pjil1h",
+  propsAsIs: !1
+}), o = () => e, C = /* @__PURE__ */ s(o())({
+  name: "SubtitleFG",
+  class: "SubtitleFG_s1iorwr9",
+  propsAsIs: !0
+}), u = /* @__PURE__ */ s("div")({
+  name: "AnswerText",
+  class: "AnswerText_a51sv9d",
+  propsAsIs: !1
+}), n = () => t, _ = /* @__PURE__ */ s(n())({
+  name: "FeedbackIcon",
+  class: "FeedbackIcon_f1lbk2ye",
+  propsAsIs: !0
+}), b = /* @__PURE__ */ s("button")({
+  name: "CloseButton",
+  class: "CloseButton_crcvk3t",
+  propsAsIs: !1
+}), c = () => t, d = /* @__PURE__ */ s(c())({
+  name: "CloseIcon",
+  class: "CloseIcon_c33p82r",
+  propsAsIs: !0
+});
 export {
-  s as AnimateContent,
-  f as AnswerText,
-  x as CloseButton,
-  u as CloseIcon,
-  c as Container,
-  l as Content,
-  g as FeedbackIcon,
-  o as Subtitle,
-  d as SubtitleFG,
-  p as Title
+  m as AnimateContent,
+  u as AnswerText,
+  b as CloseButton,
+  d as CloseIcon,
+  i as Container,
+  I as Content,
+  _ as FeedbackIcon,
+  e as Subtitle,
+  C as SubtitleFG,
+  A as Title
 };

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

@@ -1,87 +1,47 @@
-import { styled as o } from "@linaria/react";
-import { SvgIcon as r } from "../../../icons/index.js";
+import { styled as s } from "@linaria/react";
+import { SvgIcon as e } from "../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const p = o.div`
-  box-sizing: border-box;
-  overflow: hidden;
-  border-radius: 8px;
-  background: #fff;
-  width: 100%;
-  padding: 16px;
-  position: relative;
-`, a = o.div`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  right: 11px;
-  top: 11px;
-  cursor: pointer;
-`, c = o(r)`
-  g > path {
-    stroke: var(--color-neutrals-gray7);
-  }
-
-  &:hover {
-    path {
-      stroke: var(--color-primary-green2);
-    }
-  }
-`, s = o.div`
-  margin-bottom: 12px;
-  display: flex;
-  align-items: center;
-`, l = o(r)`
-  width: 13px;
-  height: 13px;
-  margin-right: 4px;
-
-  path {
-    fill: var(--color-primary-green1);
-    fill-opacity: 1;
-  }
-`, g = o.span`
-  color: var(--color-neutrals-gray7);
-  font-weight: 550;
-  font-size: 12px;
-`, d = o.div`
-  font-weight: 400;
-  font-size: 16px;
-  color: var(--color-primary-green2);
-  margin-bottom: 12px;
-  padding-right: 10px;
-  font-family: var(--font-serif);
-`, x = o.button`
-  background-color: var(--color-primary-green1);
-  color: var(--color-white);
-  border-radius: 40px;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 550;
-  padding: 0px 16px;
-  height: 44px;
-
-  &:hover {
-    background-color: var(--color-primary-green2);
-    cursor: pointer;
-  }
-`;
+const r = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c1eptrjd",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "CloseIconWrap",
+  class: "CloseIconWrap_crylm65",
+  propsAsIs: !1
+}), o = () => e, m = /* @__PURE__ */ s(o())({
+  name: "CloseIcon",
+  class: "CloseIcon_c9mrcz7",
+  propsAsIs: !0
+}), I = /* @__PURE__ */ s("div")({
+  name: "Header",
+  class: "Header_hw3lzv4",
+  propsAsIs: !1
+}), n = () => e, i = /* @__PURE__ */ s(n())({
+  name: "TypeIcon",
+  class: "TypeIcon_t1rrb3kf",
+  propsAsIs: !0
+}), u = /* @__PURE__ */ s("span")({
+  name: "TypeName",
+  class: "TypeName_t1ydnjov",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("div")({
+  name: "Question",
+  class: "Question_qlf90cl",
+  propsAsIs: !1
+}), _ = /* @__PURE__ */ s("button")({
+  name: "AnswerButton",
+  class: "AnswerButton_a1e0nhcl",
+  propsAsIs: !1
+});
 export {
-  x as AnswerButton,
-  c as CloseIcon,
-  a as CloseIconWrap,
-  p as Container,
-  s as Header,
-  d as Question,
-  l as TypeIcon,
-  g as TypeName
+  _ as AnswerButton,
+  m as CloseIcon,
+  l as CloseIconWrap,
+  r as Container,
+  I as Header,
+  A as Question,
+  i as TypeIcon,
+  u as TypeName
 };

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: "Container_c1t4f0x4",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("button")({
+  name: "ActionBtn",
+  class: "ActionBtn_a16w1nl6",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "Body_b14u54rf",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("img")({
+  name: "Image",
+  class: "Image_i1hxm6zo",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Details",
+  class: "Details_d1s19yop",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "QuoteWrap",
+  class: "QuoteWrap_q1qyx94r",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("blockquote")({
+  name: "Quote",
+  class: "Quote_qs97clu",
+  propsAsIs: !1
+});
 export {
-  e as ActionBtn,
-  i as Body,
-  t as Container,
-  a as Details,
+  t as ActionBtn,
+  e as Body,
+  a as Container,
+  l as Details,
   n as Image,
-  d as Quote,
-  l as QuoteWrap
+  p as Quote,
+  c as QuoteWrap
 };