@streamlayer/react-ui 0.57.0 → 0.59.0

package/lib/ui/gamification/onboarding/slides/onboarding-rules/styles.js

@@ -0,0 +1,83 @@
+import { styled as t } from "@linaria/react";
+const e = t.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  padding-bottom: 16px;
+`, n = t.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 24px;
+  height: 100%;
+  padding: 0 32px 32px;
+`, o = t.div`
+  color: var(--color-primary-green1);
+  font-family: var(--font-serif);
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 30px;
+  text-align: center;
+`, r = t.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+`, l = t.div`
+  display: flex;
+  align-items: center;
+  column-gap: 16px;
+`, a = t.div`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: var(--color-primary-green1);
+
+  & [data-icon='icon-trophy'] {
+    width: 18px;
+    height: 18px;
+
+    path {
+      fill: var(--color-neutrals-white);
+    }
+  }
+
+  & [data-icon='icon-btn-feature-groups'] path {
+    &:first-child {
+      stroke: var(--color-neutrals-white);
+    }
+    &:not(:first-child) {
+      fill: var(--color-neutrals-white);
+    }
+  }
+`, c = t.div`
+  font-size: 14px;
+  font-weight: var(--font-weight-default);
+  line-height: 18px;
+  letter-spacing: -0.154px;
+`, p = t.button`
+  margin: 0 auto;
+  padding: 8px 16px;
+  color: var(--color-primary-green1);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  border: initial;
+  background: initial;
+  outline: initial;
+  cursor: pointer;
+`;
+export {
+  e as Container,
+  n as Content,
+  a as RuleIcon,
+  c as RuleText,
+  l as RulesItem,
+  r as RulesList,
+  p as TermsButton,
+  o as Title
+};

package/lib/ui/gamification/onboarding/styles.d.ts

@@ -2,10 +2,7 @@
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const OnboardingHeader: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const LeftBlock: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const RightBlock: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const GameIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const SponsorLogo: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const CloseBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const IconClose: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const OnboardingActionBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const IconClose: any;
+export declare const OnboardingFooter: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const OnboardingActionBtn: any;

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

@@ -1,69 +1,54 @@
-import { styled as t } from "@linaria/react";
-const n = t.div`
-  box-sizing: border-box;
+import { styled as n } from "@linaria/react";
+import { Button as o } from "../../button/index.js";
+import { SvgIcon as t } from "../../icons/index.js";
+import "react/jsx-runtime";
+import "../../button/styles.js";
+import "react";
+const c = n.div`
   display: flex;
-  color: var(--color-white);
   flex-direction: column;
-  height: 100%;
-  width: 100%;
-`, e = t.div`
-  flex: 1;
-  width: 100%;
-  margin-bottom: 20px;
-`, i = t.div`
+  background-color: var(--color-neutrals-white);
+`, a = n.div`
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 36px;
-  padding: 6px 16px 10px 16px;
-  align-items: center;
-  border-bottom: 1px solid #22262b;
-`, r = t.div`
+  flex-grow: 1;
+  flex-direction: column;
+`, s = n.div`
   display: flex;
   align-items: center;
-  justify-content: center;
-`, c = t.div`
+  justify-content: space-between;
+  padding: 12px 12px 12px 16px;
+`, x = n.button`
   display: flex;
   align-items: center;
-`, s = t.img`
-  width: 24px;
-  height: 24px;
-`, l = t.img`
-  height: 24px;
-`, d = t.button`
-  border: none;
-  outline: none;
-  background-color: transparent;
-  cursor: pointer;
-  display: flex;
   justify-content: center;
-  align-items: center;
-`, p = t.img`
+  margin-left: auto;
+  padding: 0;
   width: 24px;
   height: 24px;
-`, a = t.button`
-  color: var(--color-white);
-  width: 100%;
   border: none;
+  background-color: transparent;
   outline: none;
-  background-color: var(--color-green-primary-btn);
   cursor: pointer;
-  padding: 12px 16px;
+`, g = n(t)`
+  width: 10px;
+  height: 10px;
+`, f = n.div`
   display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 16px;
-  font-weight: 600;
-  border-radius: 6px;
+  padding: 0 16px 16px 16px;
+`, m = n(o)`
+  flex-grow: 1;
+  padding: 0 16px;
+  height: 44px;
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
 `;
 export {
-  d as CloseBtn,
-  n as Container,
-  e as Content,
-  s as GameIcon,
-  p as IconClose,
-  r as LeftBlock,
-  a as OnboardingActionBtn,
-  i as OnboardingHeader,
-  c as RightBlock,
-  l as SponsorLogo
+  x as CloseBtn,
+  c as Container,
+  a as Content,
+  g as IconClose,
+  m as OnboardingActionBtn,
+  f as OnboardingFooter,
+  s as OnboardingHeader
 };

package/lib/ui/gamification/question/twitter/account/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export type AccountProps = {
+    image: string;
+    name: string;
+    userName: string;
+    verified: boolean;
+};
+export declare const Account: React.FC<AccountProps>;

package/lib/ui/gamification/question/twitter/account/index.js

@@ -0,0 +1,19 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { SvgIcon as m } from "../../../../icons/index.js";
+import { Container as c, ImageContainer as a, Image as s, Details as d, Name as l, UserName as p } from "./styles.js";
+import "@linaria/react";
+import "react";
+const j = ({ image: i, name: n, userName: o, verified: t }) => /* @__PURE__ */ e(c, { children: [
+  /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(s, { src: i }) }),
+  /* @__PURE__ */ e(d, { children: [
+    /* @__PURE__ */ e(l, { children: [
+      n,
+      " ",
+      t && /* @__PURE__ */ r(m, { name: "icon-twitter-verified" })
+    ] }),
+    /* @__PURE__ */ r(p, { children: o })
+  ] })
+] });
+export {
+  j as Account
+};

package/lib/ui/gamification/question/twitter/account/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ImageContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Name: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const UserName: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -0,0 +1,39 @@
+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;
+`;
+export {
+  i as Container,
+  a as Details,
+  o as Image,
+  n as ImageContainer,
+  r as Name,
+  l as UserName
+};

package/lib/ui/gamification/question/twitter/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { AccountProps } from './account';
+type TwitterProps = {
+    title: string;
+    image: string;
+    body: string;
+    account: AccountProps;
+};
+export declare const Twitter: React.FC<TwitterProps>;
+export {};

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

@@ -0,0 +1,22 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { Account as m } from "./account/index.js";
+import { Container as c, DateTime as p, Quote as d, Details as h, Body as l, Image as s, Footer as u, ActionButton as a } from "./styles.js";
+import "../../../icons/index.js";
+import "@linaria/react";
+import "react";
+import "./account/styles.js";
+import "../../../button/index.js";
+import "../../../button/styles.js";
+const g = ({ title: o, image: t, body: e, account: n }) => /* @__PURE__ */ i(c, { children: [
+  /* @__PURE__ */ r(p, { children: "Sun, Nov 14 · 3:52 PM" }),
+  o && /* @__PURE__ */ r(d, { children: o }),
+  /* @__PURE__ */ i(h, { children: [
+    /* @__PURE__ */ r(m, { ...n }),
+    /* @__PURE__ */ r(l, { children: e }),
+    t && /* @__PURE__ */ r(s, { src: t })
+  ] }),
+  /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(a, { children: "View Insight" }) })
+] });
+export {
+  g as Twitter
+};

package/lib/ui/gamification/question/twitter/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const DateTime: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Quote: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLQuoteElement> & import("react").BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;
+export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Body: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const Footer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ActionButton: any;

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

@@ -0,0 +1,64 @@
+import { styled as o } from "@linaria/react";
+import { Button as t } from "../../../button/index.js";
+import "react/jsx-runtime";
+import "../../../button/styles.js";
+const p = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  padding: 12px 16px 16px 16px;
+  border-radius: 8px;
+  border-bottom: 1px solid var(--color-neutrals-gray3);
+  background: var(--color-neutrals-white);
+`, a = o.div`
+  color: var(--color-neutrals-gray7);
+  font-size: 12px;
+  font-weight: var(--font-weight-default);
+  line-height: 18px;
+`, l = 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);
+  }
+`, d = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+`, x = o.div`
+  color: var(--color-neutrals-gray9);
+  font-size: 12px;
+  font-weight: var(--font-weight-default);
+  line-height: 18px;
+`, c = o.img`
+  max-width: 100%;
+  border-radius: 8px;
+`, f = o.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: 8px;
+`, s = o(t)`
+  height: 44px;
+  padding: 0 16px;
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+`;
+export {
+  s as ActionButton,
+  x as Body,
+  p as Container,
+  a as DateTime,
+  d as Details,
+  f as Footer,
+  c as Image,
+  l as Quote
+};

package/lib/ui/icons/index.d.ts

@@ -2,14 +2,15 @@
 export declare const icons: {
     'invite-game-icon': any;
     'icon-trophy': any;
-    'icon-play': any;
     'icon-trophy-green': any;
     'icon-trivia': any;
     'icon-thumb-down': any;
+    'icon-thumb-up': any;
     'icon-star': any;
     'icon-prediction': any;
     'icon-insight': any;
     'icon-poll': any;
+    'icon-play': any;
     'icon-masters-logo': any;
     'icon-logout': any;
     'icon-link': any;
@@ -18,20 +19,25 @@ export declare const icons: {
     'icon-friends': any;
     'icon-exit': any;
     'icon-default-user-avatar': any;
+    'icon-copy': any;
     'icon-cross': any;
     'icon-close': any;
     'icon-close-btn-white': any;
+    'icon-close-btn-gray': any;
     'icon-circle-arrow-right': any;
     'icon-chevron': any;
     'icon-chevron-white-left': any;
     'icon-chevron-left': any;
+    'icon-check': any;
     'icon-check-white': any;
     'icon-check-green': any;
     'icon-btn-channels': any;
     'icon-btn-feature-groups': any;
     'icon-btn-leaderboard': any;
-    'icon-check': any;
     'icon-arrow': any;
+    'icon-facebook': any;
+    'icon-twitter': any;
+    'icon-twitter-verified': any;
     correct: any;
     incorrect: any;
     selected: any;