@streamlayer/react-ui 0.54.1 → 0.56.0

package/lib/index.d.ts

@@ -1,12 +1,5 @@
-export * from './ui/notifications/notification/question-inapp';
-export * from './ui/login';
-export * from './ui/gamification/onboarding';
-export * from './ui/gamification/tabs';
-export * from './ui/gamification/question';
-export * from './ui/gamification/question/list';
-export * from './ui/gamification/user-statistics';
-export * from './ui/gamification/vote';
-export * from './ui/demo';
-export * from './ui/gamification/points';
-export * from './ui/theme';
-export * from './ui/theme/theme';
+/// <reference types="react" />
+export declare const Demo: React.FC<{
+    sdk: unknown;
+}>;
+export { StreamLayerThemeProvider } from './ui/theme';

package/lib/index.js

@@ -1,115 +1,10 @@
-import { QuestionInApp as jo } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as qo } from "./ui/login/index.js";
-import { Onboarding as zo } from "./ui/gamification/onboarding/index.js";
-import { ActivePages as Eo, Tab as Fo, Tabs as Go } from "./ui/gamification/tabs/index.js";
-import { Question as Jo } from "./ui/gamification/question/index.js";
-import { QuestionList as Mo } from "./ui/gamification/question/list/index.js";
-import { UserStatistics as Ro } from "./ui/gamification/user-statistics/index.js";
-import { Vote as Xo } from "./ui/gamification/vote/index.js";
-import { Demo as Zo } from "./ui/demo/index.js";
-import { Points as $o } from "./ui/gamification/points/index.js";
-import { StreamLayerThemeProvider as rr } from "./ui/theme/index.js";
-import { ThemeVariables as mr, resetCss as pr, theme as ir, themeStr as er } from "./ui/theme/theme.js";
+import { StreamLayerThemeProvider as a } from "./ui/theme/index.js";
 import "react/jsx-runtime";
-import "react";
-import "./icon-exit-d3f9fc80.js";
-import "./ui/notifications/notification/question-inapp/styles.js";
-import "@linaria/react";
-import "react-auth-code-input";
-import "react-phone-number-input";
-import "./ui/timer/index.js";
-import "react-countdown-circle-timer";
-import "./ui/theme/constants.js";
-import "./utils/login.js";
-import "@connectrpc/connect";
-import "@connectrpc/connect-web";
-import "@streamlayer/sl-eslib/users/users_connect";
-import "./ui/login/styles.js";
-import "./ui/gamification/onboarding/components/onboarding-slides/onboarding-instructions/index.js";
-import "./ui/gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles.js";
-import "./ui/gamification/onboarding/components/onboarding-slides/onboarding-invite-card/index.js";
-import "./ui/gamification/onboarding/components/onboarding-slides/onboarding-invite-card/styles.js";
-import "./ui/gamification/onboarding/components/onboarding-slides/onboarding-rules/index.js";
-import "./ui/gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
-import "./ui/gamification/onboarding/styles.js";
-import "./ui/gamification/tabs/styles.js";
-import "@streamlayer/sdk-web-types";
-import "./ui/button/index.js";
-import "./ui/button/styles.js";
-import "./ui/gamification/constants.js";
-import "./ui/gamification/question/styles.js";
-import "./ui/icons/index.js";
-import "./ui/gamification/insight/index.js";
-import "./ui/gamification/insight/styles.js";
-import "./ui/gamification/question/list/styles.js";
-import "./utils/common.js";
-import "./ui/gamification/user-statistics/components/rank/index.js";
-import "./ui/gamification/user-statistics/components/rank/styles.js";
-import "./ui/gamification/user-statistics/components/statistic/index.js";
-import "./ui/gamification/user-statistics/components/statistic/styles.js";
-import "./ui/gamification/user-statistics/styles.js";
-import "./ui/app/styles.js";
-import "./ui/gamification/vote/feedback/index.js";
-import "./ui/gamification/vote/feedback/styles.js";
-import "./ui/gamification/vote/styles.js";
-import "./ui/gamification/vote/vote-option/index.js";
-import "./ui/gamification/vote/vote-option/styles.js";
-import "./ui/gamification/vote/win-bar/index.js";
-import "./ui/gamification/vote/win-bar/styles.js";
-import "@streamlayer/sdk-web-interfaces";
-import "@streamlayer/sdk-web-features";
-import "@streamlayer/sdk-web-api";
-import "@streamlayer/sdk-web-storage";
-import "@nanostores/react";
-import "./ui/notifications/index.js";
-import "./ui/notifications/notification/index.js";
-import "@streamlayer/sdk-web-notifications";
-import "./ui/notifications/notification/onboarding-inapp/index.js";
-import "./ui/notifications/notification/onboarding-inapp/styles.js";
-import "./ui/notifications/notification/styles.js";
-import "./ui/notifications/styles.js";
-import "./ui/demo/Gamification.js";
-import "./ui/demo/components/UserSummary.js";
-import "./ui/demo/components/QuestionsList.js";
-import "./ui/demo/components/Question.js";
-import "./ui/gamification/insight-list/styles.js";
-import "./ui/gamification/common-header/styles.js";
-import "./ui/gamification/detailed-insight/styles.js";
-import "./ui/demo/components/Leaderboard.js";
-import "./ui/gamification/leaderboard/index.js";
-import "react-virtualized-auto-sizer";
-import "react-window";
-import "react-window-infinite-loader";
-import "./ui/gamification/leaderboard/list-item/index.js";
-import "./ui/gamification/leaderboard/list-item/styles.js";
-import "./ui/demo/styles.js";
-import "./ui/demo/Highlights.js";
-import "./ui/demo/components/Insights.js";
-import "./ui/gamification/insight-list/index.js";
-import "./ui/demo/components/Insight.js";
-import "./ui/gamification/detailed-insight/index.js";
-import "./ui/gamification/common-header/index.js";
-import "./ui/demo/Login.js";
-import "@streamlayer/sdk-web-anonymous-auth";
-import "./ui/gamification/points/styles.js";
-import "./ui/theme/breakpoints.js";
+import "./ui/theme/theme.js";
 import "@linaria/core";
+import "./ui/theme/constants.js";
+const t = () => null;
 export {
-  Eo as ActivePages,
-  Zo as Demo,
-  qo as Login,
-  zo as Onboarding,
-  $o as Points,
-  Jo as Question,
-  jo as QuestionInApp,
-  Mo as QuestionList,
-  rr as StreamLayerThemeProvider,
-  Fo as Tab,
-  Go as Tabs,
-  mr as ThemeVariables,
-  Ro as UserStatistics,
-  Xo as Vote,
-  pr as resetCss,
-  ir as theme,
-  er as themeStr
+  t as Demo,
+  a as StreamLayerThemeProvider
 };

package/lib/ui/app/Features/Gamification/Question.js

@@ -1,4 +1,4 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import { styled as p } from "@linaria/react";
 import { useStore as n } from "@nanostores/react";
 import { QuestionType as u } from "@streamlayer/sdk-web-types";
@@ -34,20 +34,20 @@ const d = p.div`
   flex-direction: column;
 `, f = ({ openedQuestion: t }) => {
   var r;
-  return ((r = t == null ? void 0 : t.attributes) == null ? void 0 : r.attributes.case) === "insight" ? /* @__PURE__ */ e(c, { ...t.attributes.attributes.value }) : null;
-}, h = ({ extendedQuestion: t, vote: r }) => {
-  const { loading: i, data: o } = t;
-  return !i && o ? /* @__PURE__ */ e(a, { vote: r, openedQuestion: o }) : null;
+  return ((r = t == null ? void 0 : t.attributes) == null ? void 0 : r.attributes.case) === "insight" ? /* @__PURE__ */ o(c, { created: t.attributes.created, ...t.attributes.attributes.value }) : null;
+}, b = ({ extendedQuestion: t, vote: r }) => {
+  const { loading: i, data: e } = t;
+  return !i && e ? /* @__PURE__ */ o(a, { vote: r, openedQuestion: e }) : null;
 }, F = ({ gamification: t }) => {
   var s;
   const r = n(t.openedQuestion.$store), i = n(t.openedQuestion.$extendedStore);
   if (!r)
     return null;
-  const o = r.type;
+  const e = r.type;
   return /* @__PURE__ */ m(d, { children: [
-    /* @__PURE__ */ e(l, { close: t.closeQuestion, type: ((s = r.attributes) == null ? void 0 : s.type) || u.UNSET }),
-    o === "question" && /* @__PURE__ */ e(h, { vote: t.submitAnswer, extendedQuestion: i }),
-    o !== "question" && /* @__PURE__ */ e(f, { openedQuestion: r })
+    /* @__PURE__ */ o(l, { close: t.closeQuestion, type: ((s = r.attributes) == null ? void 0 : s.type) || u.UNSET }),
+    e === "question" && /* @__PURE__ */ o(b, { vote: t.submitAnswer, extendedQuestion: i }),
+    e !== "question" && /* @__PURE__ */ o(f, { openedQuestion: r })
   ] });
 };
 export {

package/lib/ui/app/Features/Gamification/QuestionsList.js

@@ -1,22 +1,24 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useStore as m } from "@nanostores/react";
 import { QuestionList as p } from "../../../gamification/question/list/index.js";
-import "../../../gamification/insight/index.js";
-import "@streamlayer/sdk-web-types";
-import "../../../gamification/insight/styles.js";
-import "@linaria/react";
 import "../../../gamification/question/index.js";
+import "@streamlayer/sdk-web-types";
 import "../../../button/index.js";
 import "../../../button/styles.js";
+import "@linaria/react";
 import "../../../gamification/constants.js";
 import "../../../gamification/question/styles.js";
 import "../../../icons/index.js";
 import "react";
+import "../../../gamification/question/insight/index.js";
+import "../../../video-player/index.js";
+import "../../../video-player/styles.js";
+import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
-const w = ({ store: r, openQuestion: i }) => {
+const S = ({ store: r, openQuestion: i }) => {
   const t = m(r);
   return t != null && t.data ? /* @__PURE__ */ o(p, { openQuestion: i, questions: t.data }) : /* @__PURE__ */ o("div", { children: "wait questions..." });
 };
 export {
-  w as QuestionsList
+  S as QuestionsList
 };

package/lib/ui/app/Features/Gamification/Tabs.js

@@ -17,14 +17,16 @@ import "../../../../utils/common.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
 import "../../../icons/index.js";
 import "../../../gamification/question/list/index.js";
-import "../../../gamification/insight/index.js";
-import "@streamlayer/sdk-web-types";
-import "../../../gamification/insight/styles.js";
 import "../../../gamification/question/index.js";
+import "@streamlayer/sdk-web-types";
 import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/constants.js";
 import "../../../gamification/question/styles.js";
+import "../../../gamification/question/insight/index.js";
+import "../../../video-player/index.js";
+import "../../../video-player/styles.js";
+import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "../../../gamification/user-statistics/index.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
@@ -32,7 +34,7 @@ import "../../../gamification/user-statistics/components/rank/styles.js";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const J = ({ gamification: t }) => {
+const V = ({ gamification: t }) => {
   const [o, p] = s(e.HOME);
   return /* @__PURE__ */ i("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ i(n, { children: [
@@ -44,5 +46,5 @@ const J = ({ gamification: t }) => {
   ] });
 };
 export {
-  J as Tabs
+  V as Tabs
 };

package/lib/ui/app/Features/Gamification/index.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 import { type Gamification as GamificationClass } from '@streamlayer/feature-gamification';
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;
-    sdk: StreamLayerSDK;
     className?: string;
 }>;
 export default GamificationOverlay;

package/lib/ui/app/Features/Gamification/index.js

@@ -18,6 +18,7 @@ import "../../../gamification/user-statistics/components/rank/styles.js";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
+import "@linaria/core";
 import "../../../gamification/vote/index.js";
 import "../../../gamification/vote/feedback/index.js";
 import "../../../gamification/vote/feedback/styles.js";
@@ -44,12 +45,12 @@ import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
 import "./QuestionsList.js";
 import "../../../gamification/question/list/index.js";
-import "../../../gamification/insight/index.js";
-import "../../../gamification/insight/styles.js";
 import "../../../gamification/question/index.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/styles.js";
+import "../../../gamification/question/insight/index.js";
+import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
 const m = n(u)`
@@ -71,7 +72,7 @@ const m = n(u)`
   & > div {
     width: 100%;
   }
-`, Sr = ({ gamification: t, className: o }) => {
+`, br = ({ gamification: t, className: o }) => {
   const s = e(t.openedQuestion.$store), i = e(t.openedUser);
   return /* @__PURE__ */ p(d, { children: [
     s && /* @__PURE__ */ r(m, { className: o, children: /* @__PURE__ */ r(f, { gamification: t }) }),
@@ -83,6 +84,6 @@ const m = n(u)`
   ] });
 };
 export {
-  Sr as GamificationOverlay,
-  Sr as default
+  br as GamificationOverlay,
+  br as default
 };

package/lib/ui/app/Notifications/index.js

@@ -1,18 +1,24 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Notifications as i } from "../../notifications/index.js";
-import "@nanostores/react";
-import "../../notifications/notification/index.js";
-import "react";
-import "@streamlayer/sdk-web-notifications";
-import "../../notifications/notification/onboarding-inapp/index.js";
-import "../../notifications/notification/onboarding-inapp/styles.js";
+import { jsx as r } from "react/jsx-runtime";
+import { useStore as d } from "@nanostores/react";
+import { useMemo as c } from "react";
+import { NotificationType as o } from "@streamlayer/sdk-web-notifications";
+import { Notification as n } from "../../gamification/question/notification/index.js";
+import { Container as e } from "./styles.js";
+import "@streamlayer/sdk-web-types";
+import "../../gamification/constants.js";
+import "../../gamification/question/notification/insight/index.js";
+import "../../video-player/index.js";
+import "../../icons/index.js";
 import "@linaria/react";
-import "../../notifications/notification/question-inapp/index.js";
-import "../../../icon-exit-d3f9fc80.js";
-import "../../notifications/notification/question-inapp/styles.js";
-import "../../notifications/notification/styles.js";
-import "../../notifications/styles.js";
-const u = ({ sdk: o }) => /* @__PURE__ */ t(i, { notificationsStore: o.getNotificationsStore() });
+import "../../video-player/styles.js";
+import "../../gamification/question/notification/insight/styles.js";
+import "../../gamification/question/notification/styles.js";
+import "../../show-in/index.js";
+import "@linaria/core";
+const R = ({ sdk: m }) => {
+  const p = m.getNotificationsStore(), t = d(p), i = c(() => t != null && t.size ? t.values().next().value : null, [t]);
+  return (i == null ? void 0 : i.type) === o.QUESTION ? /* @__PURE__ */ r(e, { hiding: i.hiding, children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(n, { ...i }) }) }) : (i == null ? void 0 : i.type) === o.QUESTION_RESOLVED ? /* @__PURE__ */ r(e, { hiding: i.hiding, children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(n, { ...i }) }) }) : (i == null ? void 0 : i.type) === o.ONBOARDING ? /* @__PURE__ */ r(e, { hiding: i.hiding, children: /* @__PURE__ */ r("div", { children: "Onboarding" }) }) : null;
+};
 export {
-  u as SDKNotifications
+  R as SDKNotifications
 };

package/lib/ui/app/Notifications/styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: any;

package/lib/ui/app/Notifications/styles.js

@@ -0,0 +1,17 @@
+import { styled as i } from "@linaria/react";
+import { ShowIn as a } from "../../show-in/index.js";
+import "react/jsx-runtime";
+import "@linaria/core";
+const d = i(a)`
+  position: relative;
+  top: var(--header-height);
+
+  animation-duration: calc(var(--animation-duration) * 3);
+
+  & > div {
+    padding: var(--container-padding) calc(var(--container-padding) * 2);
+  }
+`;
+export {
+  d as Container
+};

package/lib/ui/app/masters.js

@@ -1,12 +1,13 @@
-import { jsxs as y, jsx as e } from "react/jsx-runtime";
-import { resetCss as m } from "../theme/theme.js";
-import { ActiveFeature as g } from "./Features/index.js";
-import { MastersNavigation as S } from "./Navigation/MastersNavigation/index.js";
-import { SDKContainer as h, SDKScrollContainer as s } from "./styles.js";
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { resetCss as a } from "../theme/theme.js";
+import { ActiveFeature as S } from "./Features/index.js";
+import { MastersNavigation as g } from "./Navigation/MastersNavigation/index.js";
+import { SDKNotifications as h } from "./Notifications/index.js";
+import { SDKContainer as b, SDKScrollContainer as n } from "./styles.js";
 import { useMastersApp as k } from "./useMastersApp.js";
-import { useSdkFeature as b } from "./useSdkFeature.js";
-import { ChannelsButtonId as A } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as p } from "../navigation/button/LeaderBoard.js";
+import { useSdkFeature as A } from "./useSdkFeature.js";
+import { ChannelsButtonId as C } from "../navigation/button/Channels.js";
+import { LeaderBoardButtonId as s } from "../navigation/button/LeaderBoard.js";
 import { FeaturedGroupsButtonId as d } from "../navigation/button/FeaturedGroups.js";
 import "@linaria/core";
 import "../theme/constants.js";
@@ -18,44 +19,55 @@ import "@streamlayer/sdk-web-interfaces";
 import "../navigation/masters.js";
 import "@linaria/react";
 import "../navigation/index.js";
+import "@streamlayer/sdk-web-notifications";
+import "../gamification/question/notification/index.js";
+import "../gamification/constants.js";
+import "../gamification/question/notification/insight/index.js";
+import "../video-player/index.js";
 import "../icons/index.js";
+import "../video-player/styles.js";
+import "../gamification/question/notification/insight/styles.js";
+import "../gamification/question/notification/styles.js";
+import "./Notifications/styles.js";
+import "../show-in/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
-const C = ({ sdk: o, className: i }) => {
-  const [, a] = b(o);
-  return /* @__PURE__ */ e(g, { className: i, feature: a, sdk: o });
-}, U = ({ sdk: o, overlays: i, children: a }) => {
-  const { sdkEnabled: r, sdkReady: l, activeOverlay: t, activateAndLoadOverlay: c, enableSdk: u, disableSdk: f, isLogged: n } = k(o);
-  return /* @__PURE__ */ y(h, { children: [
-    r && /* @__PURE__ */ e(
-      S,
+const x = ({ sdk: i, className: e }) => {
+  const [, m] = A(i);
+  return /* @__PURE__ */ o(S, { className: e, feature: m, sdk: i });
+}, mt = ({ sdk: i, overlays: e, children: m }) => {
+  const { sdkEnabled: t, sdkReady: l, activeOverlay: r, activateAndLoadOverlay: c, enableSdk: f, disableSdk: u, isLogged: p } = k(i);
+  return /* @__PURE__ */ y(b, { children: [
+    t && /* @__PURE__ */ o(
+      g,
       {
         sdkReady: l,
-        activeOverlay: t,
-        className: m,
+        activeOverlay: r,
+        className: a,
         setActiveOverlay: (v) => c("", v)
       }
     ),
-    /* @__PURE__ */ e(
-      s,
+    t && /* @__PURE__ */ o(h, { sdk: i }),
+    /* @__PURE__ */ o(
+      n,
       {
-        "data-nav": r.toString(),
-        style: { display: !r || t === A ? "block" : "none" },
-        children: a && a({ enableSdk: u, disableSdk: f })
+        "data-nav": t.toString(),
+        style: { display: !t || r === C ? "block" : "none" },
+        children: m && m({ enableSdk: f, disableSdk: u })
       }
     ),
-    /* @__PURE__ */ e(
-      s,
+    /* @__PURE__ */ o(
+      n,
       {
-        "data-nav": r.toString(),
-        style: { display: t === p ? "block" : "none" },
-        children: i && t === p && i[t]
+        "data-nav": t.toString(),
+        style: { display: r === s ? "block" : "none" },
+        children: e && r === s && e[r]
       }
     ),
-    n && r && t === d && /* @__PURE__ */ e(C, { className: m, sdk: o }),
-    !n && r && t === d && /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
+    p && t && r === d && /* @__PURE__ */ o(x, { className: a, sdk: i }),
+    !p && t && r === d && /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
   ] });
 };
 export {
-  U as MastersApp
+  mt as MastersApp
 };

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { InsightHistory } from '@streamlayer/sdk-web-types';
+export declare const Insight: React.FC<{
+    openInsight?: (questionId: string) => void;
+} & InsightHistory>;

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

@@ -0,0 +1,35 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { VideoPlayer as t } from "../../../video-player/index.js";
+import { Container as u, DateWrap as g, Content as S, Title as i, Description as D, ActionBtn as y } from "./styles.js";
+import "react";
+import "../../../icons/index.js";
+import "@linaria/react";
+import "../../../video-player/styles.js";
+const j = ({
+  title: m,
+  instantView: o,
+  openInsight: c,
+  questionId: h
+}) => {
+  const d = /* @__PURE__ */ new Date(), l = d.toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  }), p = d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
+  return /* @__PURE__ */ e(u, { children: [
+    /* @__PURE__ */ e(g, { children: [
+      l,
+      "・",
+      p
+    ] }),
+    (o == null ? void 0 : o.video) && /* @__PURE__ */ r(t, { source: o.video.url, poster: o.video.thumbnailUrl }),
+    /* @__PURE__ */ e(S, { children: [
+      /* @__PURE__ */ r(i, { children: (o == null ? void 0 : o.heading) || m }),
+      /* @__PURE__ */ r(D, { children: o == null ? void 0 : o.body }),
+      c && /* @__PURE__ */ r(y, { onClick: () => c(h), children: "View Insight" })
+    ] })
+  ] });
+};
+export {
+  j as Insight
+};

package/lib/ui/gamification/question/insight/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 DateWrap: 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 Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
+export declare const Description: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ActionBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

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

@@ -0,0 +1,66 @@
+import { styled as o } from "@linaria/react";
+const e = o.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  padding: var(--container-padding);
+  background-color: var(--color-neutrals-white);
+  border-radius: 8px;
+  width: 100%;
+`, t = o.div`
+  font-size: 12px;
+  font-weight: 550;
+  color: var(--color-neutrals-gray7);
+`, i = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+`, n = o.h3`
+  color: var(--color-primary-green2);
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: 400;
+  font-family: var(--font-serif);
+  font-weight: var(--font-weight-default);
+`, a = o.div`
+  color: var(--color-neutrals-gray9);
+  font-size: 12px;
+  line-height: 24px;
+  font-weight: 550;
+  font-weight: var(--font-weight-default);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  max-height: 50px;
+`, l = 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;
+  }
+`;
+export {
+  l as ActionBtn,
+  e as Container,
+  i as Content,
+  t as DateWrap,
+  a as Description,
+  n as Title
+};

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

@@ -1,28 +1,30 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Insight as u } from "../../insight/index.js";
-import { Question as s } from "../index.js";
+import { Question as u } from "../index.js";
+import { Insight as s } from "../insight/index.js";
 import { QuestionsContainer as a } from "./styles.js";
 import "@streamlayer/sdk-web-types";
-import "../../insight/styles.js";
-import "@linaria/react";
 import "../../../button/index.js";
 import "../../../button/styles.js";
+import "@linaria/react";
 import "../../constants.js";
 import "../styles.js";
 import "../../../icons/index.js";
 import "react";
-const j = ({ questions: r, openQuestion: o }) => /* @__PURE__ */ e(a, { children: r == null ? void 0 : r.map((t) => {
-  var n, m;
-  if (t.type === "question" && ((n = t.attributes) == null ? void 0 : n.attributes.case) === "question") {
+import "../../../video-player/index.js";
+import "../../../video-player/styles.js";
+import "../insight/styles.js";
+const C = ({ questions: r, openQuestion: o }) => /* @__PURE__ */ e(a, { children: r == null ? void 0 : r.map((t) => {
+  var m, n;
+  if (t.type === "question" && ((m = t.attributes) == null ? void 0 : m.attributes.case) === "question") {
     const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ e(s, { openQuestion: o, ...i }, i.questionId);
+    return /* @__PURE__ */ e(u, { openQuestion: o, ...i }, i.questionId);
   }
-  if (t.type === "insight" && ((m = t.attributes) == null ? void 0 : m.attributes.case) === "insight") {
+  if (t.type === "insight" && ((n = t.attributes) == null ? void 0 : n.attributes.case) === "insight") {
     const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ e(u, { ...i, openInsight: o }, i.questionId);
+    return /* @__PURE__ */ e(s, { openInsight: o, ...i }, i.questionId);
   }
   return null;
 }) });
 export {
-  j as QuestionList
+  C as QuestionList
 };

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { Notification as NotificationProps } from '@streamlayer/sdk-web-notifications';
+export declare const Notification: React.FC<NotificationProps>;