@streamlayer/react-ui 0.65.3 → 0.67.0

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

@@ -1,124 +1,89 @@
-import { styled as e } from "@linaria/react";
-const o = e.div`
-  padding: 12px;
-  font-weight: var(--font-weight-default);
-  background-color: var(--color-primary-green1);
-  border-radius: 12px;
-`, i = e.div`
-  margin-bottom: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  column-gap: 8px;
-`, n = e.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-`, r = e.div`
-  display: flex;
-  column-gap: 8px;
-  flex: 1;
-  overflow: hidden;
-`, a = e.img`
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  object-fit: cover;
-  object-position: center;
-  flex-shrink: 0;
-`, s = e.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 6px;
-  overflow: hidden;
-`, c = e.div`
-  color: var(--color-white);
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`, p = e.div`
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-  height: 14px;
-  color: var(--color-neutrals-white);
-  font-size: 14px;
-  text-transform: uppercase;
-`, l = e.img`
-  width: 15px;
-  height: 15px;
-`, d = e.div`
-  display: flex;
-  align-items: center;
-  column-gap: 4px;
-`, x = e.div`
-  display: flex;
-  align-items: baseline;
-  column-gap: 4px;
-`, f = e.div`
-  font-size: 9px;
-  opacity: 0.8;
-`, g = e.div`
-  width: 1px;
-  height: 10px;
-  background-color: var(--color-white);
-  opacity: 0.2;
-`, h = e.div`
-  display: flex;
-  column-gap: 8px;
-`, u = e.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-radius: 4px;
-  background-color: var(--color-primary-green2);
-`, m = e.div`
-  background: #2d6ffd;
-  border-radius: 50%;
-  width: 48px;
-  height: 48px;
-  text-align: center;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 18px;
-  flex-shrink: 0;
-`, v = e.button`
-  border: none;
-  outline: none;
-  background-color: transparent;
-  cursor: pointer;
-  padding: 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  width: 100%;
-  height: 100%;
-  max-width: 48px;
-  max-height: 48px;
-`;
+import { styled as s } from "@linaria/react";
+const o = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c1yrpn9o",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "TopInfo",
+  class: "TopInfo_t17fwahh",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "BottomInfo",
+  class: "BottomInfo_by6w7e9",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "User",
+  class: "User_u1g7arbm",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("img")({
+  name: "Avatar",
+  class: "Avatar_a1ldeata",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "UserInfo",
+  class: "UserInfo_u10d4koz",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "UserName",
+  class: "UserName_u1q6roj0",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "UserRating",
+  class: "UserRating_ui0m425",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("img")({
+  name: "TrophyIcon",
+  class: "TrophyIcon_t1el3mrn",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "Rts",
+  class: "Rts_r2vgnxv",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "RtsIndicator",
+  class: "RtsIndicator_roqn06j",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("div")({
+  name: "RtsLabel",
+  class: "RtsLabel_r15adx7c",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "Divider",
+  class: "Divider_dv59lta",
+  propsAsIs: !1
+}), v = /* @__PURE__ */ s("div")({
+  name: "Ranks",
+  class: "Ranks_r55lotb",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("div")({
+  name: "Statistics",
+  class: "Statistics_s1knfgqt",
+  propsAsIs: !1
+}), _ = /* @__PURE__ */ s("div")({
+  name: "AvatarPlaceholder",
+  class: "AvatarPlaceholder_a1mqo824",
+  propsAsIs: !1
+}), R = /* @__PURE__ */ s("button")({
+  name: "UserAccountBtn",
+  class: "UserAccountBtn_uxareh6",
+  propsAsIs: !1
+});
 export {
-  a as Avatar,
-  m as AvatarPlaceholder,
-  n as BottomInfo,
+  r as Avatar,
+  _ as AvatarPlaceholder,
+  e as BottomInfo,
   o as Container,
-  g as Divider,
-  h as Ranks,
-  d as Rts,
-  x as RtsIndicator,
+  d as Divider,
+  v as Ranks,
+  I as Rts,
+  m as RtsIndicator,
   f as RtsLabel,
-  u as Statistics,
-  i as TopInfo,
-  l as TrophyIcon,
-  r as User,
-  v as UserAccountBtn,
-  s as UserInfo,
-  c as UserName,
+  A as Statistics,
+  t as TopInfo,
+  i as TrophyIcon,
+  n as User,
+  R as UserAccountBtn,
+  c as UserInfo,
+  l as UserName,
   p as UserRating
 };

package/lib/ui/gamification/vote/expired-alert/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ExpiredAlertProps = {
+    title: string;
+    description: string;
+};
+export declare const ExpiredAlert: React.FC<ExpiredAlertProps>;
+export {};

package/lib/ui/gamification/vote/expired-alert/index.js

@@ -0,0 +1,13 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { SvgIcon as t } from "../../../icons/index.js";
+import { Container as c, Title as n, Description as m } from "./styles.js";
+import "@linaria/react";
+import "react";
+const x = ({ title: i, description: o }) => /* @__PURE__ */ e(c, { children: [
+  /* @__PURE__ */ r(t, { name: "icon-check-circle" }),
+  /* @__PURE__ */ r(n, { children: i }),
+  /* @__PURE__ */ r(m, { children: o })
+] });
+export {
+  x as ExpiredAlert
+};

package/lib/ui/gamification/vote/expired-alert/styles.d.ts

@@ -0,0 +1,4 @@
+/// <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 Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Description: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/vote/expired-alert/styles.js

@@ -0,0 +1,19 @@
+import { styled as s } from "@linaria/react";
+const t = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c38csyt",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "Title_ty221rx",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "Description_dlaj9xp",
+  propsAsIs: !1
+});
+export {
+  t as Container,
+  i as Description,
+  o as Title
+};

package/lib/ui/gamification/vote/feedback/styles.js

@@ -1,70 +1,42 @@
-import { styled as r } from "@linaria/react";
-import { SvgIcon as e } from "../../../icons/index.js";
+import { styled as e } from "@linaria/react";
+import { SvgIcon as s } from "../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const c = r.div`
-  width: 100%;
-  padding: 8px 0px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-  font-size: 14px;
-
-  &[data-isPrediction='true'] {
-    align-items: flex-start;
-  }
-`, n = r(e)`
-  min-width: 24px;
-  width: 24px;
-  height: 24px;
-  margin-right: 14px;
-  margin-left: 12px;
-
-  g > path {
-    fill: var(--color-primary-green1);
-    fill-opacity: 1;
-  }
-`, d = r.div`
-  min-width: 32px;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 16px;
-
-  &[data-feedbackType='correct'] {
-    background-color: var(--color-primary-green1);
-  }
-
-  &[data-feedbackType='incorrect'] {
-    background-color: var(--color-secondary-red1);
-  }
-`, p = r.div`
-  font-weight: var(--font-weight-default);
-`, l = r.span`
-  margin-right: 5px;
-
-  &[data-feedbackType='correct'] {
-    color: var(--color-primary-green1);
-  }
-
-  &[data-feedbackType='incorrect'] {
-    color: var(--color-secondary-red1);
-  }
-`, g = r.span`
-  color: var(--color-neutrals-gray9);
-`, s = r.div`
-  font-weight: 400;
-  margin-top: 10px;
-`;
+const r = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "Container_c16sbdnm",
+  propsAsIs: !1
+}), a = () => s, p = /* @__PURE__ */ e(a())({
+  name: "IconPrediction",
+  class: "IconPrediction_ibhorgl",
+  propsAsIs: !0
+}), d = /* @__PURE__ */ e("div")({
+  name: "FeedbackIconWrap",
+  class: "FeedbackIconWrap_f1g20ja7",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ e("div")({
+  name: "FeedbackHeader",
+  class: "FeedbackHeader_f455ozj",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ e("span")({
+  name: "FeedbackTitle",
+  class: "FeedbackTitle_f1913njx",
+  propsAsIs: !1
+}), b = /* @__PURE__ */ e("span")({
+  name: "FeedbackDescription",
+  class: "FeedbackDescription_fzfk69z",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ e("div")({
+  name: "FeedbackText",
+  class: "FeedbackText_fx87qaj",
+  propsAsIs: !1
+});
 export {
-  c as Container,
-  g as FeedbackDescription,
-  p as FeedbackHeader,
+  r as Container,
+  b as FeedbackDescription,
+  i as FeedbackHeader,
   d as FeedbackIconWrap,
-  s as FeedbackText,
+  f as FeedbackText,
   l as FeedbackTitle,
-  n as IconPrediction
+  p as IconPrediction
 };

package/lib/ui/gamification/vote/index.d.ts

@@ -3,6 +3,7 @@ import { ExtendedQuestion } from '@streamlayer/sdk-web-types';
 interface VoteProps {
     openedQuestion: ExtendedQuestion;
     vote: (questionId: string, answerId: string) => void;
+    close: () => void;
 }
 export declare const Vote: React.FC<VoteProps>;
 export {};

package/lib/ui/gamification/vote/index.js

@@ -1,72 +1,84 @@
-import { jsx as i, jsxs as S } from "react/jsx-runtime";
-import { useState as l, useCallback as g, useMemo as e } from "react";
-import { SDKScrollContainer as u } from "../../app/styles.js";
-import { Feedback as A } from "./feedback/index.js";
-import { Container as b, Content as E, Title as j, Options as k } from "./styles.js";
-import { VotingOption as O } from "./vote-option/index.js";
-import { WinBar as I } from "./win-bar/index.js";
+import { jsx as i, jsxs as v, Fragment as E } from "react/jsx-runtime";
+import { useState as m, useCallback as V, useMemo as n } from "react";
+import { SDKScrollContainer as b } from "../../app/styles.js";
+import { ExpiredAlert as j } from "./expired-alert/index.js";
+import { Feedback as k } from "./feedback/index.js";
+import { Container as M, Content as O, Title as F, Options as I } from "./styles.js";
+import { VotingOption as L } from "./vote-option/index.js";
+import { WinBar as W } from "./win-bar/index.js";
 import "@linaria/react";
-import "@streamlayer/sdk-web-types";
 import "../../icons/index.js";
+import "./expired-alert/styles.js";
+import "@streamlayer/sdk-web-types";
 import "./feedback/styles.js";
 import "./vote-option/styles.js";
 import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "./win-bar/styles.js";
-const Y = ({ openedQuestion: t, vote: f }) => {
-  var p;
-  const V = t.subject, d = t.type, a = (p = t.options) == null ? void 0 : p.options, [c, v] = l(!1), [n, w] = l(!1), [q, T] = l(""), o = t == null ? void 0 : t.id, y = g(
+const rt = ({ openedQuestion: t, vote: l, close: f }) => {
+  var q;
+  const g = t.subject, u = t.type, c = (q = t.options) == null ? void 0 : q.options, [a, A] = m(!1), [d, p] = m(!1), [w, h] = m(""), o = t == null ? void 0 : t.id, T = V(
     async (r) => {
       if (o) {
-        const x = r.currentTarget.value;
-        T(x), w(!0), await f(o, x), w(!1);
+        const y = r.currentTarget.value;
+        h(y), p(!0), await l(o, y), p(!1);
       }
     },
-    [o, T, f]
-  ), s = e(
+    [o, h, l]
+  ), C = V(() => {
+    A(!0), setTimeout(f, 3e3);
+  }, [f]), s = n(
     () => t == null ? void 0 : t.answers.find((r) => r.youVoted === !0),
     [t]
-  ), m = e(
+  ), e = n(
     () => !!(t != null && t.answers.find((r) => r.correct === !0)),
     [t]
-  ), C = e(() => t ? t.answers.map((r) => ({
+  ), S = n(() => t ? t.answers.map((r) => ({
     ...r,
     questionVoted: !!s,
-    youSelected: q === r.id,
-    isLoading: n,
-    hasCorrectAnswer: m,
+    youSelected: w === r.id,
+    isLoading: d,
+    hasCorrectAnswer: e,
     questionType: t.type,
-    answerTimeExpired: c,
+    answerTimeExpired: a,
     questionStatus: t.status,
     // ToDo: Figure out why imageMode is not in the response
-    onVote: y
-  })) : [], [m, c, n, t, s, y, q]), h = a && (a.case === "trivia" || a.case === "prediction") ? a.value : void 0;
-  return /* @__PURE__ */ i(u, { "data-question-header": "true", children: /* @__PURE__ */ i(b, { children: /* @__PURE__ */ S(E, { children: [
-    h && /* @__PURE__ */ i(
-      A,
+    onVote: T
+  })) : [], [e, a, d, t, s, T, w]), x = c && (c.case === "trivia" || c.case === "prediction") ? c.value : void 0;
+  return /* @__PURE__ */ i(b, { "data-question-header": "true", children: /* @__PURE__ */ i(M, { children: /* @__PURE__ */ v(O, { children: [
+    x && /* @__PURE__ */ i(
+      k,
       {
-        feedbackMessages: h,
+        feedbackMessages: x,
         questionVoted: !!s,
         questionVotedCorrectly: s == null ? void 0 : s.correct,
-        questionType: d,
-        hasCorrectAnswer: m,
+        questionType: u,
+        hasCorrectAnswer: e,
         questionStatus: t.status
       }
     ),
     /* @__PURE__ */ i(
-      I,
+      W,
       {
-        title: c ? "Expired" : "To win",
-        points: c ? void 0 : 100,
-        onTimerExpired: () => v(!0),
+        title: a ? "Time expired" : "To win",
+        points: a ? void 0 : 100,
+        onTimerExpired: C,
         isTimer: !0
       }
     ),
-    /* @__PURE__ */ i(j, { children: V }),
-    /* @__PURE__ */ i(k, { children: C.map((r) => /* @__PURE__ */ i(O, { ...r }, r.id)) })
+    a ? /* @__PURE__ */ i(
+      j,
+      {
+        title: "More to come...",
+        description: "Watch for additional enhanced stream interactive experience."
+      }
+    ) : /* @__PURE__ */ v(E, { children: [
+      /* @__PURE__ */ i(F, { children: g }),
+      /* @__PURE__ */ i(I, { children: S.map((r) => /* @__PURE__ */ i(L, { ...r }, r.id)) })
+    ] })
   ] }) }) });
 };
 export {
-  Y as Vote
+  rt as Vote
 };

package/lib/ui/gamification/vote/insight-details/styles.js

@@ -1,25 +1,14 @@
-import { styled as r } from "@linaria/react";
-const o = r.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-  padding: var(--container-padding);
-  background-color: var(--color-neutrals-white);
-`, n = r.a`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  column-gap: 10px;
-  padding: 11px 16px;
-  color: var(--color-primary-green1);
-  font-size: 14px;
-  font-weight: var(--font-weight-default);
-  line-height: 20px;
-  border-radius: 40px;
-  border: 1px solid var(--color-primary-green1);
-  text-decoration: none;
-`;
+import { styled as s } from "@linaria/react";
+const e = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c1euiow",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("a")({
+  name: "WebLinkBtn",
+  class: "WebLinkBtn_w19zie3h",
+  propsAsIs: !1
+});
 export {
-  o as Container,
-  n as WebLinkBtn
+  e as Container,
+  t as WebLinkBtn
 };

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

@@ -1,30 +1,24 @@
-import { styled as t } from "@linaria/react";
-const o = t.div`
-  width: 100%;
-  height: 100%;
-
-  & > div:not(:last-child) {
-    margin-bottom: 16px;
-  }
-`, n = t.div`
-  width: 100%;
-  padding: 16px 16px 0px 16px;
-`, p = t.div`
-  font-family: var(--font-serif);
-  font-size: 16px;
-  color: var(--color-primary-green2);
-  font-weight: 400;
-  margin: 16px 0px;
-  margin-bottom: 16px;
-`, r = t.div`
-  position: relative;
-  gap: 8px;
-  display: flex;
-  flex-direction: column;
-`;
+import { styled as s } from "@linaria/react";
+const n = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c14ielyq",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "Content_c1tlqx57",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "Title_t1hq58md",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("div")({
+  name: "Options",
+  class: "Options_o1c8nxcx",
+  propsAsIs: !1
+});
 export {
-  o as Container,
-  n as Content,
-  r as Options,
-  p as Title
+  n as Container,
+  o as Content,
+  a as Options,
+  e as Title
 };

package/lib/ui/gamification/vote/twitter-details/styles.js

@@ -1,11 +1,9 @@
-import { styled as o } from "@linaria/react";
-const n = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-  padding: var(--container-padding);
-  background-color: var(--color-neutrals-white);
-`;
+import { styled as s } from "@linaria/react";
+const n = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "Container_c1dcxmvf",
+  propsAsIs: !1
+});
 export {
   n as Container
 };