@streamlayer/react-ui 0.66.0 → 0.67.0

package/lib/ui/navigation/button/LeaderBoard.js

@@ -1,28 +1,27 @@
-import { jsx as e } from "react/jsx-runtime";
-import { styled as r } from "@linaria/react";
-import { SvgIcon as a } from "../../icons/index.js";
-import { Button as d } from "./index.js";
+import { jsx as r } from "react/jsx-runtime";
+import { styled as e } from "@linaria/react";
+import { SvgIcon as n } from "../../icons/index.js";
+import { Button as a } from "./index.js";
+import "../../../LeaderBoard_p8tnz3-4ed993c7.js";
 import "react";
 import "./styles.js";
-const n = r(a)`
-  &[data-selected='true'] {
-    g > path {
-      fill: #fff;
-    }
-  }
-`, p = "leaderboard", s = (t) => {
-  var o;
-  return /* @__PURE__ */ e(
-    d,
-    {
-      ...t,
-      label: "Leader Board",
-      id: "leaderboard",
-      icon: /* @__PURE__ */ e(n, { name: "icon-btn-leaderboard", "data-selected": (o = t.active) == null ? void 0 : o.toString() })
-    }
-  );
+const d = () => n, c = /* @__PURE__ */ e(d())({
+  name: "ButtonIcon",
+  class: "ButtonIcon_b180jd7l",
+  propsAsIs: !0
+}), b = "leaderboard", I = (o) => {
+  var t;
+  return /* @__PURE__ */ r(a, {
+    ...o,
+    label: "Leader Board",
+    id: "leaderboard",
+    icon: /* @__PURE__ */ r(c, {
+      name: "icon-btn-leaderboard",
+      "data-selected": (t = o.active) == null ? void 0 : t.toString()
+    })
+  });
 };
 export {
-  s as LeaderBoardButton,
-  p as LeaderBoardButtonId
+  I as LeaderBoardButton,
+  b as LeaderBoardButtonId
 };

package/lib/ui/navigation/button/styles.js

@@ -1,59 +1,19 @@
-import { styled as r } from "@linaria/react";
-const e = r.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 36px;
-  max-height: 36px;
-  background-color: var(--color-white);
-  border-radius: 100px;
-  border: 1px solid var(--color-neutrals-gray3);
-  color: var(--color-primary-green1);
-  padding: 0px 8px;
-  font-size: 12px;
-  font-weight: var(--font-weight-default);
-  letter-spacing: -0.5px;
-  cursor: pointer;
-
-  &:hover {
-    border-color: var(--color-primary-green1);
-  }
-
-  &[data-selected='true'] {
-    color: var(--color-white);
-    background-color: var(--color-primary-green1);
-    border-color: var(--color-primary-green1);
-
-    &:hover {
-      cursor: default;
-    }
-
-    &:disabled {
-      &:hover {
-        border-color: var(--color-primary-green1);
-      }
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: default;
-
-    &:hover {
-      cursor: default;
-      border-color: var(--color-neutrals-gray3);
-    }
-  }
-`, t = r.span`
-  display: flex;
-  width: 22px;
-  height: 22px;
-  justify-content: center;
-  align-items: center;
-  margin-right: 5px;
-`, a = r.span``;
+import { styled as s } from "@linaria/react";
+const n = /* @__PURE__ */ s("button")({
+  name: "SButton",
+  class: "SButton_sxxa0c",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("span")({
+  name: "ButtonIcon",
+  class: "ButtonIcon_b193dcyu",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("span")({
+  name: "ButtonLabel",
+  class: "ButtonLabel_b40tuix",
+  propsAsIs: !1
+});
 export {
-  t as ButtonIcon,
+  o as ButtonIcon,
   a as ButtonLabel,
-  e as SButton
+  n as SButton
 };

package/lib/ui/navigation/index.js

@@ -1,11 +1,17 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import { styled as r } from "@linaria/react";
-const n = r.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: var(--color-neutrals-white);
-`, a = ({ children: t, className: o }) => /* @__PURE__ */ e(n, { className: o, children: t });
+import "../../index_1ujx5m0-4ed993c7.js";
+const n = /* @__PURE__ */ r("div")({
+  name: "Buttons",
+  class: "Buttons_b6tbwuy",
+  propsAsIs: !1
+}), a = ({
+  children: t,
+  className: o
+}) => /* @__PURE__ */ s(n, {
+  className: o,
+  children: t
+});
 export {
   a as Navigation
 };

package/lib/ui/navigation/masters.js

@@ -1,37 +1,13 @@
 import { styled as o } from "@linaria/react";
 import { Navigation as i } from "./index.js";
+import "../../masters_18kvgvj-4ed993c7.js";
 import "react/jsx-runtime";
-const n = o(i)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-
-  box-sizing: border-box;
-  overflow: hidden;
-  opacity: 0;
-
-  animation: show-nav 0.5s ease;
-  animation-fill-mode: forwards;
-
-  padding: var(--container-padding);
-  border-bottom: 1px solid var(--color-neutrals-gray3);
-
-  & > button:not(:last-child) {
-    margin-right: 8px;
-  }
-
-  @keyframes show-nav {
-    90% {
-      opacity: 0;
-    }
-
-    100% {
-      height: 68px;
-      opacity: 1;
-    }
-  }
-`;
+import "../../index_1ujx5m0-4ed993c7.js";
+const t = () => i, m = /* @__PURE__ */ o(t())({
+  name: "Navigation",
+  class: "Navigation_n19lpak2",
+  propsAsIs: !0
+});
 export {
-  n as Navigation
+  m as Navigation
 };

package/lib/ui/questions/insight/styles.js

@@ -1,33 +1,29 @@
-import { styled as t } from "@linaria/react";
-const e = t.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 16px;
-`, i = t.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-`, n = t.h3`
-  color: var(--color-primary-green1);
-  font-size: 16px;
-  line-height: 26px;
-  font-family: var(--font-serif);
-  font-weight: var(--font-weight-default);
-`, r = t.div`
-  color: var(--color-neutrals-gray9);
-  font-size: 14px;
-  line-height: 24px;
-  font-weight: var(--font-weight-default);
-`, l = t.div`
-  color: var(--color-neutrals-gray7);
-  font-size: 12px;
-  font-weight: var(--font-weight-default);
-  line-height: 18px;
-`;
+import { styled as s } from "@linaria/react";
+const e = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_cgn5uen",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_c1px8nt6",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("h3")({
+  name: "Title",
+  class: "Title_t5et2jt",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "Description_d1i2kpk2",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "DateWrap",
+  class: "DateWrap_dd3lh3p",
+  propsAsIs: !1
+});
 export {
   e as Container,
-  i as Content,
-  l as DateWrap,
-  r as Description,
-  n as Title
+  n as Content,
+  p as DateWrap,
+  o as Description,
+  a as Title
 };

package/lib/ui/questions/twitter/account/styles.js

@@ -1,39 +1,34 @@
-import { styled as e } from "@linaria/react";
-const i = e.div`
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-`, n = e.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`, o = e.img`
-  width: 46px;
-  height: 46px;
-  object-fit: cover;
-  object-position: center;
-  border-radius: 50%;
-`, a = e.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 2px;
-  color: var(--color-neutrals-gray9);
-  font-weight: var(--font-weight-default);
-`, r = e.div`
-  display: flex;
-  align-items: center;
-  column-gap: 4px;
-  font-size: 12px;
-  font-family: var(--font-serif);
-`, l = e.div`
-  font-size: 12px;
-  line-height: 20px;
-`;
+import { styled as s } from "@linaria/react";
+const e = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_cjq447q",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "ImageContainer",
+  class: "ImageContainer_i14egogb",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("img")({
+  name: "Image",
+  class: "Image_i2g9g4l",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "Details",
+  class: "Details_d1c454nm",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Name",
+  class: "Name_n11nigc3",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "UserName",
+  class: "UserName_urxa4k8",
+  propsAsIs: !1
+});
 export {
-  i as Container,
-  a as Details,
+  e as Container,
+  m as Details,
   o as Image,
   n as ImageContainer,
-  r as Name,
-  l as UserName
+  t as Name,
+  i as UserName
 };

package/lib/ui/questions/twitter/styles.js

@@ -1,45 +1,34 @@
-import { styled as o } from "@linaria/react";
-const e = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-`, r = o.div`
-  color: var(--color-neutrals-gray7);
-  font-size: 12px;
-  font-weight: var(--font-weight-default);
-  line-height: 18px;
-`, i = o.blockquote`
-  display: flex;
-  column-gap: 12px;
-  padding: 4px 16px 8px 0;
-  color: var(--color-primary-green2);
-  font-size: 12px;
-  font-family: var(--font-serif);
-  font-weight: var(--font-weight-default);
-
-  &:before {
-    content: '';
-    width: 2px;
-    background-color: var(--color-primary-green2);
-  }
-`, n = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-`, a = o.div`
-  color: var(--color-neutrals-gray9);
-  font-size: 12px;
-  font-weight: var(--font-weight-default);
-  line-height: 18px;
-`, l = o.img`
-  max-width: 100%;
-  border-radius: 8px;
-`;
+import { styled as s } from "@linaria/react";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c1kzqw87",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "DateTime",
+  class: "DateTime_d9r1hf9",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("blockquote")({
+  name: "Quote",
+  class: "Quote_qezygt5",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "Details",
+  class: "Details_d1y8f7ym",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "Body_b18gwonx",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("img")({
+  name: "Image",
+  class: "Image_i3g0xjd",
+  propsAsIs: !1
+});
 export {
-  a as Body,
-  e as Container,
-  r as DateTime,
+  l as Body,
+  a as Container,
+  o as DateTime,
   n as Details,
-  l as Image,
-  i as Quote
+  i as Image,
+  t as Quote
 };

package/lib/ui/show-in/index.js

@@ -1,65 +1,20 @@
-import { jsx as n } from "react/jsx-runtime";
-import { css as r, cx as e } from "@linaria/core";
-import { styled as m } from "@linaria/react";
-const s = m.div`
-  overflow: hidden;
-  width: 100%;
-  transform: scale(1);
-  opacity: 1;
-  max-height: 2500px;
-
-  animation: containerShowIn ease-out;
-  animation-duration: var(--animation-duration);
-
-  @keyframes containerShowIn {
-    0% {
-      transform: scale(0);
-      opacity: 0;
-      max-height: 0;
-    }
-    80% {
-      opacity: 0;
-      transform: scale(0.9);
-      max-height: 2500px;
-    }
-    85% {
-      transform: scale(0.9);
-      max-height: 2500px;
-    }
-    100% {
-      transform: scale(1);
-      opacity: 1;
-      max-height: 2500px;
-    }
-  }
-`, c = r`
-  animation: containerHide ease-out;
-  animation-duration: var(--animation-duration);
-  animation-direction: reverse;
-  animation-fill-mode: forwards;
-
-  @keyframes containerHide {
-    0% {
-      transform: scale(0);
-      opacity: 0;
-      max-height: 0;
-    }
-    80% {
-      opacity: 0;
-      transform: scale(0.9);
-      max-height: 2500px;
-    }
-    85% {
-      transform: scale(0.9);
-      max-height: 2500px;
-    }
-    100% {
-      transform: scale(1);
-      opacity: 1;
-      max-height: 2500px;
-    }
-  }
-`, f = ({ children: a, style: i, className: t, hiding: o }) => /* @__PURE__ */ n(s, { style: i, className: e(t, o && c), children: a });
+import { jsx as s } from "react/jsx-runtime";
+import { cx as r } from "@linaria/core";
+import { styled as a } from "@linaria/react";
+const e = /* @__PURE__ */ a("div")({
+  name: "Container",
+  class: "Container_c1pgyo67",
+  propsAsIs: !1
+}), m = "HidingAnimation_hx17qu6", x = ({
+  children: n,
+  style: o,
+  className: i,
+  hiding: t
+}) => /* @__PURE__ */ s(e, {
+  style: o,
+  className: r(i, t && m),
+  children: n
+});
 export {
-  f as ShowIn
+  x as ShowIn
 };

package/lib/ui/theme/index.js

@@ -1,8 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { theme as o } from "./theme.js";
-import "@linaria/core";
+import { theme as a } from "./theme.js";
 import "./constants.js";
-const p = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: o, style: m, children: r }) });
+const s = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: a, style: m, children: r }) });
 export {
-  p as StreamLayerThemeProvider
+  s as StreamLayerThemeProvider
 };

package/lib/ui/theme/masters.js

@@ -1,11 +1,4 @@
-import { css as a } from "@linaria/core";
-const i = a`
-  --header-height: 68px;
-  --question-headers-height: 117px;
-  --animation-duration: 0.5s;
-  --animation-function: ease;
-  --container-padding: 16px;
-`;
+const s = "mastersVariables_m17a8r9z";
 export {
-  i as mastersVariables
+  s as mastersVariables
 };

package/lib/ui/theme/theme.js

@@ -1,8 +1,7 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { css as d } from "@linaria/core";
-import { colors as l, FONT as t } from "./constants.js";
-const i = `
-  ${l}
+import { colors as h, FONT as t } from "./constants.js";
+const d = `
+  ${h}
   --font-family: ${t.REGULAR};
   --font-regular: ${t.REGULAR};
   --font-color: ${t.COLOR};
@@ -14,28 +13,33 @@ const i = `
   --animation-function: ease;
   --container-padding: 16px;
   --border-radius: 8px;
-`, f = "StreamLayerCSSReset", p = d`
-  ${i}
-
-  * {
-    box-sizing: border-box;
-  }
-`, u = () => /* @__PURE__ */ e("table", { children: /* @__PURE__ */ r("table", { children: [
-  /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { children: [
-    /* @__PURE__ */ e("th", { children: "name" }),
-    /* @__PURE__ */ e("th", { children: "value" })
-  ] }) }),
-  /* @__PURE__ */ e("tbody", { children: i.split(";").map((o) => {
-    const n = o.trim(), [a, s] = n.split(":");
-    return /* @__PURE__ */ r("tr", { children: [
-      /* @__PURE__ */ e("td", { children: a }),
-      /* @__PURE__ */ e("td", { children: s })
-    ] }, n);
-  }) })
-] }) });
+`, c = "StreamLayerCSSReset", m = "theme_ttkj0ah", f = () => /* @__PURE__ */ e("table", {
+  children: /* @__PURE__ */ r("table", {
+    children: [/* @__PURE__ */ e("thead", {
+      children: /* @__PURE__ */ r("tr", {
+        children: [/* @__PURE__ */ e("th", {
+          children: "name"
+        }), /* @__PURE__ */ e("th", {
+          children: "value"
+        })]
+      })
+    }), /* @__PURE__ */ e("tbody", {
+      children: d.split(";").map((i) => {
+        const n = i.trim(), [o, a] = n.split(":");
+        return /* @__PURE__ */ r("tr", {
+          children: [/* @__PURE__ */ e("td", {
+            children: o
+          }), /* @__PURE__ */ e("td", {
+            children: a
+          })]
+        }, n);
+      })
+    })]
+  })
+});
 export {
-  u as ThemeVariables,
-  f as resetCss,
-  p as theme,
-  i as themeStr
+  f as ThemeVariables,
+  c as resetCss,
+  m as theme,
+  d as themeStr
 };