@streamlayer/react-ui 0.66.0 → 0.67.1

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 o = /* @__PURE__ */ s("button")({
+  name: "SButton",
+  class: "sxxa0c",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("span")({
+  name: "ButtonIcon",
+  class: "b193dcyu",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("span")({
+  name: "ButtonLabel",
+  class: "b40tuix",
+  propsAsIs: !1
+});
 export {
-  t as ButtonIcon,
+  n as ButtonIcon,
   a as ButtonLabel,
-  e as SButton
+  o 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_4nhkck-4ed993c7.js";
+const n = /* @__PURE__ */ r("div")({
+  name: "Buttons",
+  class: "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 { Navigation as t } from "./index.js";
+import "../../masters_k70xsy-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_4nhkck-4ed993c7.js";
+const i = () => t, n = /* @__PURE__ */ o(i())({
+  name: "Navigation",
+  class: "n19lpak2",
+  propsAsIs: !0
+});
 export {
   n 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: "cgn5uen",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "c1px8nt6",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("h3")({
+  name: "Title",
+  class: "t5et2jt",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "d1i2kpk2",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "DateWrap",
+  class: "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: "cjq447q",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "ImageContainer",
+  class: "i14egogb",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("img")({
+  name: "Image",
+  class: "i2g9g4l",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Details",
+  class: "d1c454nm",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "Name",
+  class: "n11nigc3",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "UserName",
+  class: "urxa4k8",
+  propsAsIs: !1
+});
 export {
-  i as Container,
-  a as Details,
+  e as Container,
+  l as Details,
   o as Image,
   n as ImageContainer,
-  r as Name,
-  l as UserName
+  m as Name,
+  t 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: "c1kzqw87",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "DateTime",
+  class: "d9r1hf9",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("blockquote")({
+  name: "Quote",
+  class: "qezygt5",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "Details",
+  class: "d1y8f7ym",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "b18gwonx",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("img")({
+  name: "Image",
+  class: "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
+  c 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 r } from "react/jsx-runtime";
+import { cx as i } from "@linaria/core";
+import { styled as e } from "@linaria/react";
+const m = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "c1pgyo67",
+  propsAsIs: !1
+}), a = "hx17qu6", d = ({
+  children: o,
+  style: n,
+  className: s,
+  hiding: t
+}) => /* @__PURE__ */ r(m, {
+  style: n,
+  className: i(s, t && a),
+  children: o
+});
 export {
-  f as ShowIn
+  d 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 = "m17a8r9z";
 export {
-  i as mastersVariables
+  s as mastersVariables
 };

package/lib/ui/theme/theme.js

@@ -1,41 +1,45 @@
-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 = `
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { colors as l, FONT as e } from "./constants.js";
+const h = `
   ${l}
-  --font-family: ${t.REGULAR};
-  --font-regular: ${t.REGULAR};
-  --font-color: ${t.COLOR};
-  --font-serif: ${t.SERIF};
-  --font-weight-default: ${t.WEIGHT_DEFAULT};
+  --font-family: ${e.REGULAR};
+  --font-regular: ${e.REGULAR};
+  --font-color: ${e.COLOR};
+  --font-serif: ${e.SERIF};
+  --font-weight-default: ${e.WEIGHT_DEFAULT};
 
   --header-height: 68px;
   --animation-duration: 0.5s;
   --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);
-  }) })
-] }) });
+`, d = "StreamLayerCSSReset", m = "ttkj0ah", f = () => /* @__PURE__ */ t("table", {
+  children: /* @__PURE__ */ r("table", {
+    children: [/* @__PURE__ */ t("thead", {
+      children: /* @__PURE__ */ r("tr", {
+        children: [/* @__PURE__ */ t("th", {
+          children: "name"
+        }), /* @__PURE__ */ t("th", {
+          children: "value"
+        })]
+      })
+    }), /* @__PURE__ */ t("tbody", {
+      children: h.split(";").map((i) => {
+        const n = i.trim(), [o, a] = n.split(":");
+        return /* @__PURE__ */ r("tr", {
+          children: [/* @__PURE__ */ t("td", {
+            children: o
+          }), /* @__PURE__ */ t("td", {
+            children: a
+          })]
+        }, n);
+      })
+    })]
+  })
+});
 export {
-  u as ThemeVariables,
-  f as resetCss,
-  p as theme,
-  i as themeStr
+  f as ThemeVariables,
+  d as resetCss,
+  m as theme,
+  h as themeStr
 };

package/lib/ui/timer/index.js

@@ -1,37 +1,41 @@
-import { jsx as R } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { styled as E } from "@linaria/react";
-import { useState as O, useCallback as n } from "react";
+import { useState as O, useCallback as c } from "react";
 import { CountdownCircleTimer as S } from "react-countdown-circle-timer";
-import { COLORS as t } from "../theme/constants.js";
-const f = [t.PRIMARY_GREEN1, t.SECONDARY_RED1, t.SECONDARY_RED1], _ = [10, 10, 0], A = E.div`
-  font-weight: var(--font-weight-default);
-`, D = t.SECONDARY_GREEN6, c = t.SECONDARY_RED3, N = t.NEUTRALS_GRAY3, T = ({ isPlaying: l = !0, duration: s = 30, onTimerExpired: o }) => {
-  const [i, r] = O(s > 10 ? D : c), C = ({ remainingTime: e }) => /* @__PURE__ */ R(A, { children: e }), m = n(() => {
-    o == null || o(), r(N);
-  }, [o, r]), a = n(
-    (e) => {
-      e === 10 && r(c);
-    },
-    [r]
-  );
-  return /* @__PURE__ */ R(
-    S,
-    {
-      isPlaying: l,
-      duration: s,
-      colors: f,
-      colorsTime: _,
-      size: 32,
-      strokeWidth: 2,
-      trailStrokeWidth: 2,
-      trailColor: i,
-      onComplete: m,
-      onUpdate: a,
-      children: C
-    }
-  );
+import { COLORS as o } from "../theme/constants.js";
+const _ = [o.PRIMARY_GREEN1, o.SECONDARY_RED1, o.SECONDARY_RED1], A = [10, 10, 0], f = /* @__PURE__ */ E("div")({
+  name: "RemainingTime",
+  class: "r165427",
+  propsAsIs: !1
+}), D = o.SECONDARY_GREEN6, R = o.SECONDARY_RED3, N = o.NEUTRALS_GRAY3, g = ({
+  isPlaying: i = !0,
+  duration: r = 30,
+  onTimerExpired: t
+}) => {
+  const [l, s] = O(r > 10 ? D : R), m = ({
+    remainingTime: e
+  }) => /* @__PURE__ */ n(f, {
+    children: e
+  }), a = c(() => {
+    t == null || t(), s(N);
+  }, [t, s]), C = c((e) => {
+    e === 10 && s(R);
+  }, [s]);
+  return /* @__PURE__ */ n(S, {
+    isPlaying: i,
+    duration: r,
+    colors: _,
+    colorsTime: A,
+    size: 32,
+    strokeWidth: 2,
+    trailStrokeWidth: 2,
+    trailColor: l,
+    onComplete: a,
+    onUpdate: C,
+    children: m
+  });
 };
 export {
-  A as RemainingTime,
-  T as Timer
+  f as RemainingTime,
+  g as Timer
 };