@streamlayer/react-ui 0.38.0 → 0.39.0

package/lib/ui/demo/index.js

@@ -34,8 +34,10 @@ import "../gamification/user-statistics/styles.js";
 import "./components/QuestionsList.js";
 import "../gamification/question-list/index.js";
 import "../gamification/question/index.js";
-import "../../icon-chevron-138a557c.js";
+import "../button/index.js";
+import "../button/styles.js";
 import "../gamification/question/styles.js";
+import "../icons/index.js";
 import "../gamification/question-list/styles.js";
 import "./components/Question.js";
 import "../gamification/vote/index.js";
@@ -129,7 +131,7 @@ const A = ({ activeFeature: r, sdk: o }) => {
     ] }),
     d
   ] });
-}, ui = ({ sdk: r }) => {
+}, fi = ({ sdk: r }) => {
   const o = c(r.organizationStore()), e = c(r.getUserStore()), n = c(r.getActiveFeature());
   return o.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : o.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ f(v, { children: [
     /* @__PURE__ */ i(F, { notificationsStore: r.getNotificationsStore() }),
@@ -137,5 +139,5 @@ const A = ({ activeFeature: r, sdk: o }) => {
   ] }) : /* @__PURE__ */ i(H, { sdk: r }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
 };
 export {
-  ui as Demo
+  fi as Demo
 };

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

@@ -1,26 +1,25 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { QuestionImages as i } from "@streamlayer/sdk-web-types";
-import { i as l } from "../../../icon-chevron-138a557c.js";
-import { Container as h, Graphic as I, Content as a, Title as u, NextIcon as m, InsightIconDefault as p, InsightIconAbsolute as f, InsightIconCircle as g } from "./styles.js";
+import { jsxs as g, jsx as D } from "react/jsx-runtime";
+import { QuestionImages as N } from "@streamlayer/sdk-web-types";
+import { Container as n, Graphic as z, Content as T, Title as E, NextIcon as u, InsightIconDefault as A, InsightIconAbsolute as x, InsightIconCircle as t } from "./styles.js";
 import "@linaria/react";
-const C = (r, n) => {
-  switch (r) {
-    case i.ROUNDED:
-      return /* @__PURE__ */ t(g, { alt: "insight-icon", src: n });
-    case i.TRANSPARENT:
-      return /* @__PURE__ */ t(f, { alt: "insight-icon", src: n });
-    case i.CENTERED:
-      return /* @__PURE__ */ t(p, { alt: "insight-icon", src: n });
+const y = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkNoZXZyb24iPgo8cGF0aCBpZD0iQ2hldnJvbl8yIiBkPSJNMTIgOC4xNzIyMkMxMiA4LjI4NzgzIDExLjk3ODEgOC4zOTU1MyAxMS45MzQyIDguNDk1MzNDMTEuODkwMyA4LjU5NTEzIDExLjgyMiA4LjY4OTkyIDExLjcyOTIgOC43Nzk3TDYuMzY5NDkgMTMuOTQzOUM2LjIxNDYyIDE0LjA5NjUgNi4wMjc0MiAxNC4xNzI5IDUuODA3ODcgMTQuMTcyOUM1LjY1NzUyIDE0LjE3MjkgNS41MjE5MSAxNC4xMzc5IDUuNDAxMDQgMTQuMDY3OUM1LjI4MDE2IDEzLjk5OCA1LjE4MzEgMTMuOTAzOSA1LjEwOTg2IDEzLjc4NTZDNS4wMzY2MiAxMy42NjczIDUgMTMuNTM0NSA1IDEzLjM4NzNDNSAxMy4xNzIxIDUuMDgyODggMTIuOTgxOCA1LjI0ODYzIDEyLjgxNjRMMTAuMDgwNyA4LjE3MDk1TDUuMjQ4NjMgMy41Mjc5OUM1LjA4Mjg4IDMuMzY0MjUgNSAzLjE3NDM5IDUgMi45NTg0MUM1IDIuODExMTggNS4wMzY2MiAyLjY3ODQyIDUuMTA5ODYgMi41NjAxM0M1LjE4MzEgMi40NDE4MyA1LjI4MDE2IDIuMzQ3NzEgNS40MDEwNCAyLjI3Nzc3QzUuNTIxOTEgMi4yMDc4MiA1LjY1NzUyIDIuMTcyODUgNS44MDc4NyAyLjE3Mjg1QzYuMDI3NDIgMi4xNzI4NSA2LjIxNDYyIDIuMjQ3MzEgNi4zNjk0OSAyLjM5NjI0TDExLjcyOTIgNy41NjQ3M0MxMS44MjExIDcuNjU0NTEgMTEuODg5IDcuNzQ5MDkgMTEuOTMyOSA3Ljg0ODQ2QzExLjk3NjggNy45NDc4NCAxMS45OTkxIDguMDU1NzYgMTIgOC4xNzIyMloiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8L3N2Zz4K", O = (I, M) => {
+  switch (I) {
+    case N.ROUNDED:
+      return /* @__PURE__ */ D(t, { alt: "insight-icon", src: M });
+    case N.TRANSPARENT:
+      return /* @__PURE__ */ D(x, { alt: "insight-icon", src: M });
+    case N.CENTERED:
+      return /* @__PURE__ */ D(A, { alt: "insight-icon", src: M });
     default:
       return null;
   }
-}, R = ({ title: r, image: n, questionId: c, imageMode: s, openInsight: e }) => /* @__PURE__ */ o(h, { onClick: () => e(c), children: [
-  /* @__PURE__ */ t(I, { children: n && C(s, n) }),
-  /* @__PURE__ */ o(a, { children: [
-    /* @__PURE__ */ t(u, { children: r || "" }),
-    /* @__PURE__ */ t(m, { alt: "next-icon", src: l })
+}, e = ({ title: I, image: M, questionId: j, imageMode: i, openInsight: c }) => /* @__PURE__ */ g(n, { onClick: () => c(j), children: [
+  /* @__PURE__ */ D(z, { children: M && O(i, M) }),
+  /* @__PURE__ */ g(T, { children: [
+    /* @__PURE__ */ D(E, { children: I || "" }),
+    /* @__PURE__ */ D(u, { alt: "next-icon", src: y })
   ] })
 ] });
 export {
-  R as Insight
+  e as Insight
 };

package/lib/ui/gamification/insight-list/index.js

@@ -1,11 +1,10 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Insight as e } from "../insight/index.js";
-import { Container as i, ItemsContainer as n } from "./styles.js";
+import { Container as n, ItemsContainer as i } from "./styles.js";
 import "@streamlayer/sdk-web-types";
-import "../../../icon-chevron-138a557c.js";
 import "../insight/styles.js";
 import "@linaria/react";
-const u = ({ insights: r, openInsight: m }) => /* @__PURE__ */ o(i, { children: /* @__PURE__ */ o(n, { children: r == null ? void 0 : r.map((t) => /* @__PURE__ */ o(e, { openInsight: m, ...t }, t.questionId)) }) });
+const l = ({ insights: r, openInsight: m }) => /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(i, { children: r == null ? void 0 : r.map((t) => /* @__PURE__ */ o(e, { openInsight: m, ...t }, t.questionId)) }) });
 export {
-  u as InsightList
+  l as InsightList
 };

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

@@ -1,39 +1,48 @@
-import { jsxs as z, jsx as M } from "react/jsx-runtime";
-import { QuestionType as N, PickHistoryStatus as D, QuestionStatus as O } from "@streamlayer/sdk-web-types";
-import { i as T } from "../../../icon-chevron-138a557c.js";
-import { Panel as E, QuestionTypeIconWrap as c, QuestionTypeIcon as x, QuestionContent as Q, QuestionTypeLabel as Y, QuestionTypeTitle as C, ExpiredQuestion as S, QuestionSubject as U, QuestionActionTitle as w, QuestionActionIcon as a, QuestionStatusIcon as k } from "./styles.js";
+import { jsx as n, jsxs as t } from "react/jsx-runtime";
+import { QuestionType as i, PickHistoryStatus as c, QuestionStatus as p } from "@streamlayer/sdk-web-types";
+import { Button as O } from "../../button/index.js";
+import { QuestionTypeIcon as o, QuestionActionIcon as r, QuestionItem as Q, QuestionContent as b, QuestionCaption as E, QuestionTypeLabel as P, QuestionBody as A, QuestionAction as g } from "./styles.js";
+import "../../button/styles.js";
 import "@linaria/react";
-const l = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkNoZWNrIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEzLjQzMTUgMy4xODI0Nkw1LjUzMzIxIDExLjA4MDhMMS45OTc3MSA3LjU0NTI3QzEuNTQwNTYgNy4wODgxMSAwLjc5OTkxMyA3LjA4ODExIDAuMzQyODY0IDcuNTQ1MjdDLTAuMTE0Mjg4IDguMDAyNDIgLTAuMTE0Mjg4IDguNzQzMDcgMC4zNDI4NjQgOS4yMDAxMUw0LjcwNTY3IDEzLjU2MjlDNC45MzMzMSAxMy43OTA2IDUuMjM0MTUgMTMuOTA2MyA1LjUzMzA3IDEzLjkwNjNDNS44MzIwMiAxMy45MDYzIDYuMTMwOTYgMTMuNzkyNCA2LjM2MDQ4IDEzLjU2MjlMMTUuMDg2MSA0LjgzNzMxQzE1LjU0MzIgNC4zODAxNiAxNS41NDMyIDMuNjM5NTEgMTUuMDg2MSAzLjE4MjQ2QzE0LjYyOSAyLjcyNTMxIDEzLjg4ODQgMi43MjUzMSAxMy40MzEyIDMuMTgyNDZIMTMuNDMxNVoiIGZpbGw9IiMwMEJENjAiLz4KPC9nPgo8L3N2Zz4K", n = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIDQ2NSI+CjxyZWN0IGlkPSJSZWN0YW5nbGUgMzY4IiB4PSIyIiB5PSIwLjUwNjEwNCIgd2lkdGg9IjE2LjQ5OTIiIGhlaWdodD0iMi4zNTcwMiIgcng9IjEuMTc4NTEiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDIgMC41MDYxMDQpIiBmaWxsPSIjOWUwYTFmIi8+CjxyZWN0IGlkPSJSZWN0YW5nbGUgMzY5IiB4PSIwLjMzMzAwOCIgeT0iMTIuMTcyOSIgd2lkdGg9IjE2LjQ5OTIiIGhlaWdodD0iMi4zNTcwMiIgcng9IjEuMTc4NTEiIHRyYW5zZm9ybT0icm90YXRlKC00NSAwLjMzMzAwOCAxMi4xNzI5KSIgZmlsbD0iIzllMGExZiIvPgo8L2c+Cjwvc3ZnPgo=", Z = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlBvbGwiPgo8cGF0aCBpZD0iTm90aWZpY2F0aW9uL0ljb24vUG9sbCIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05Ljc3NzggMS42ODQyMVY1LjA1MjYzSDEzLjMzMzNDMTMuODI0MyA1LjA1MjYzIDE0LjIyMjIgNC42NzU2MSAxNC4yMjIyIDQuMjEwNTNWMi41MjYzMkMxNC4yMjIyIDIuMDYxMjMgMTMuODI0MyAxLjY4NDIxIDEzLjMzMzMgMS42ODQyMUg5Ljc3NzhaTTIuNjY2NjcgMEMxLjE5MzkxIDAgMCAxLjEzMTA3IDAgMi41MjYzMlY0LjIxMDUzQzAgNS42MDU3NyAxLjE5MzkxIDYuNzM2ODQgMi42NjY2NyA2LjczNjg0SDEzLjMzMzNDMTQuODA2MSA2LjczNjg0IDE2IDUuNjA1NzcgMTYgNC4yMTA1M1YyLjUyNjMyQzE2IDEuMTMxMDcgMTQuODA2MSAwIDEzLjMzMzMgMEgyLjY2NjY3Wk00LjQ0NDQ2IDEwLjk0NzNIMTMuMzMzM0MxMy44MjQzIDEwLjk0NzMgMTQuMjIyMiAxMS4zMjQzIDE0LjIyMjIgMTEuNzg5NFYxMy40NzM2QzE0LjIyMjIgMTMuOTM4NyAxMy44MjQzIDE0LjMxNTcgMTMuMzMzMyAxNC4zMTU3SDQuNDQ0NDZWMTAuOTQ3M1pNMCAxMS43ODk0QzAgMTAuMzk0MiAxLjE5MzkxIDkuMjYzMSAyLjY2NjY3IDkuMjYzMUgxMy4zMzMzQzE0LjgwNjEgOS4yNjMxIDE2IDEwLjM5NDIgMTYgMTEuNzg5NFYxMy40NzM2QzE2IDE0Ljg2ODkgMTQuODA2MSAxNS45OTk5IDEzLjMzMzMgMTUuOTk5OUgyLjY2NjY3QzEuMTkzOTEgMTUuOTk5OSAwIDE0Ljg2ODkgMCAxMy40NzM2VjExLjc4OTRaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPC9nPgo8L3N2Zz4K", o = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb24vTm90aWZpY2F0aW9uL1ByZWRpY2l0b24iPgo8cGF0aCBpZD0iSWNvbi9QcmVkaWN0aW9uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE2IDcuMDA1MjJDMTYgNy4wMDUyMiA5LjIwMDQ4IDYuODE2MDcgOS4yMDA0OCAwQzkuMjAwNDggNi4zNjE2OCAzLjI3NzI5IDYuOTUwNTYgMi40ODc1NiA3LjAwMDc4TDIuNDAwOTQgNy4wMDUyMkMyLjQwMDk0IDcuMDA1MjIgOS4yMDA0OCA3LjE5NDM1IDkuMjAwNDggMTQuMDEwNEM5LjIwMDQ4IDcuNjQ4NzcgMTUuMTIzNCA3LjA1OTg5IDE1LjkxMzEgNy4wMDk2NEwxNiA3LjAwNTIyWk02Ljk3MzgyIDEyLjU2NTJDNi45NzM4MiAxMi41NjUyIDMuNDg2OTEgMTIuNDcyNCAzLjQ4NjkxIDkuMTMwMzNDMy40ODY5MSAxMi4yNDk2IDAuNDQ5NDAyIDEyLjUzODQgMC4wNDQ0MTg2IDEyLjU2M0wwIDEyLjU2NTJDMCAxMi41NjUyIDMuNDg2OTEgMTIuNjU3OSAzLjQ4NjkxIDE2QzMuNDg2OTEgMTIuODgwNyA2LjUyNDI5IDEyLjU5MiA2LjkyOTI3IDEyLjU2NzNMNi45NzM4MiAxMi41NjUyWiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC41Ii8+CjwvZz4KPC9zdmc+Cg==", d = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb24vTm90aWZpY2F0aW9uL1RyaXZpYSI+CjxwYXRoIGlkPSJOb3RpZmljYXRpb24vSWNvbi9Ucml2aWEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi4wMTY2MyAxLjM4MDhDMC43Mzk5MTMgMS41NTU4NiAtMC4xNTMxNTMgMi43MzI3NiAwLjAyMTkxMiA0LjAwOTQ4TDEuMzgwOCAxMy45MTk2QzEuNTU1ODYgMTUuMTk2MyAyLjczMjc2IDE2LjA4OTQgNC4wMDk0OCAxNS45MTQzTDEzLjkxOTYgMTQuNTU1NEMxNS4xOTYzIDE0LjM4MDMgMTYuMDg5NCAxMy4yMDM0IDE1LjkxNDMgMTEuOTI2N0wxNC41NTU0IDIuMDE2NjNDMTQuMzgwMyAwLjczOTkxMyAxMy4yMDM0IC0wLjE1MzE1MyAxMS45MjY3IDAuMDIxOTEyTDIuMDE2NjMgMS4zODA4Wk05LjU5NjEzIDMuNzg4QzkuMTE0MzEgMy40Njk5MSA4LjQ3ODEzIDMuMzAxNTEgNy43NTY2IDMuMzAxNTFDNy41NDM3NyAzLjMwMTUxIDcuMzI2MjUgMy4zMTY3MSA3LjEwODcyIDMuMzQ0NzhDNi4zODgzNiAzLjQ0MDY3IDUuNjg5MDEgMy43OTAzNCA1LjE4OTY1IDQuMzAxMzhDNC42ODQ0NSA0LjgyMDYyIDQuNDM3NyA1LjQ1NTYzIDQuNTE3MjIgNi4wNDE1MUM0LjU3NDUyIDYuNDc0MiA0LjkwMDc4IDYuNzUzNyA1LjM0NjM1IDYuNzUzN0M1LjM5NDI5IDYuNzUzNyA1LjQ0MzQxIDYuNzUwMiA1LjQ5MTM2IDYuNzQ0MzVDNi4wODc3OCA2LjY2NDgzIDYuMjE2NDIgNi4yNTQzNiA2LjM0MDM2IDUuODU2NzVMNi4zNDA0NSA1Ljg1NjQ4QzYuNDgxOTIgNS40MDQwMSA2LjYxNTM0IDQuOTc3MzEgNy4zODU4NSA0Ljg3NDQ0QzcuNDY1MzcgNC44NjM5MSA3LjU0MTM4IDQuODU4MDYgNy42MTUwNiA0Ljg1ODA2QzguMTY5MzkgNC44NTgwNiA4LjUxNDM2IDUuMTUwNDIgOC41ODQ1NCA1LjY4MjUyQzguNjUzNTMgNi4yMDI5MyA4LjI0MzA3IDYuNjE4MDcgNy44MDY4NCA3LjA1NjZMNy44MDM5MyA3LjA1OTU0QzcuMzE1ODIgNy41NTIzMSA2Ljc2MzkgOC4xMDk1IDYuODY4OTUgOC45MDA4M0M2Ljg5NTg1IDkuMTA1NDggNi45ODU5IDkuMjk0OTMgNy4xMjI3MiA5LjQzNjQ0QzcuMjc4MjYgOS41OTkgNy40ODI5IDkuNjg0MzYgNy43MTMzMSA5LjY4NDM2QzcuNzU1NDEgOS42ODQzNiA3Ljc5ODY4IDkuNjgyMDMgNy44NDMxMSA5LjY3NjE4QzguNDY2OTEgOS41OTMyNCA4LjU1MTYyIDkuMjMxMzkgOC42MzMzOCA4Ljg4MjFMOC42MzM2NSA4Ljg4MDk3TDguNjM2NjEgOC44Njg1OUM4LjY2NzIzIDguNzQwMyA4LjY5ODc3IDguNjA4MTMgOC43NTk5NSA4LjQ4ODA0QzguODQ2NDkgOC4zMTYxMyA5LjA2MjgzIDguMTEyNjUgOS4zMTQyOCA3Ljg3ODc1QzkuOTE0MiA3LjMxODU4IDEwLjczNCA2LjU1MTQzIDEwLjU4MiA1LjQxNTg5QzEwLjQ4NzIgNC43MDYwMyAxMC4xNTUxIDQuMTU3NTcgOS41OTYxMSAzLjc4ODAyTDkuNTk2MTMgMy43ODhaTTguMTE2MDUgMTAuMjhDOC4wNjkyNyAxMC4yOCA4LjAyMTMyIDEwLjI4MzYgNy45NzQ1NCAxMC4yODk0QzcuMzgzOTYgMTAuMzY4OSA2Ljk2NzY1IDEwLjkxMjcgNy4wNDU5OSAxMS41MDMzQzcuMTE3MzMgMTIuMDM3NyA3LjU3ODA4IDEyLjQ0MTIgOC4xMTcyIDEyLjQ0MTJDOC4xNjM5NyAxMi40NDEyIDguMjExOTIgMTIuNDM3NyA4LjI1OTg3IDEyLjQzMThDOC44NTA0NSAxMi4zNTIzIDkuMjY1NiAxMS44MDg1IDkuMTg4NDIgMTEuMjE3OUM5LjExNTkxIDEwLjY4MjMgOC42NTUxNyAxMC4yOCA4LjExNjA1IDEwLjI4WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC41Ii8+CjwvZz4KPC9zdmc+Cg==", b = {
-  [N.POLL]: { label: "Poll", icon: Z },
-  [N.TRIVIA]: { label: "Trivia", icon: d },
-  [N.PREDICTION]: { label: "Prediction", icon: o }
-}, s = {
-  [D.LOST]: n,
-  [D.WON]: l,
-  [D.UNSET]: T,
-  [D.DNP]: T
-}, P = ({
-  questionId: A,
-  questionType: g,
-  questionStatus: i,
-  subject: y,
-  openForVoting: L,
-  openQuestion: I,
-  status: u
+import "../../icons/index.js";
+import "react";
+const y = {
+  [i.TWEET]: { label: "Insight", Icon: () => /* @__PURE__ */ n(o, { name: "icon-insight" }) },
+  [i.PROMOTION]: { label: "Insight", Icon: () => /* @__PURE__ */ n(o, { name: "icon-insight" }) },
+  [i.UNSET]: void 0,
+  [i.FACTOID]: { label: "Insight", Icon: () => /* @__PURE__ */ n(o, { name: "icon-insight" }) },
+  [i.POLL]: { label: "Poll", Icon: () => /* @__PURE__ */ n(o, { name: "icon-poll" }) },
+  [i.TRIVIA]: { label: "Trivia", Icon: () => /* @__PURE__ */ n(o, { name: "icon-trivia" }) },
+  [i.PREDICTION]: { label: "Prediction", Icon: () => /* @__PURE__ */ n(o, { name: "icon-prediction" }) }
+}, N = {
+  [c.LOST]: /* @__PURE__ */ n(r, { name: "icon-cross" }),
+  [c.WON]: /* @__PURE__ */ n(r, { name: "icon-check" }),
+  [c.UNSET]: void 0,
+  [c.DNP]: /* @__PURE__ */ n(r, { name: "icon-arrow" })
+}, k = ({
+  questionId: I,
+  questionType: l,
+  questionStatus: m,
+  subject: u,
+  openForVoting: h,
+  openQuestion: e,
+  status: T
 }) => {
-  const j = b[g];
-  return j === void 0 ? null : /* @__PURE__ */ z(E, { onClick: () => I == null ? void 0 : I(A), children: [
-    /* @__PURE__ */ M(c, { children: /* @__PURE__ */ M(x, { alt: "question-type-icon", src: j.icon }) }),
-    /* @__PURE__ */ z(Q, { children: [
-      /* @__PURE__ */ z(Y, { children: [
-        /* @__PURE__ */ M(C, { children: j.label }),
-        g === N.TRIVIA && i === O.RESOLVED && /* @__PURE__ */ M(S, { children: "Expired" })
+  const { Icon: s, label: a } = y[l] || {}, d = N[T];
+  return !a || !s ? null : /* @__PURE__ */ t(Q, { onClick: () => e == null ? void 0 : e(I), children: [
+    /* @__PURE__ */ t(b, { children: [
+      /* @__PURE__ */ t(E, { children: [
+        /* @__PURE__ */ n(s, {}),
+        /* @__PURE__ */ t(P, { children: [
+          a,
+          l === i.TRIVIA && m === p.RESOLVED && " • Expired"
+        ] })
       ] }),
-      /* @__PURE__ */ M(U, { children: y || "" })
+      /* @__PURE__ */ n(A, { children: u || "" })
     ] }),
-    L ? /* @__PURE__ */ M(w, { children: "play" }) : /* @__PURE__ */ M(a, { children: /* @__PURE__ */ M(k, { alt: "question-status-icon", src: s[u] }) })
+    /* @__PURE__ */ n(g, { children: d || (h ? /* @__PURE__ */ n(O, { children: "Play" }) : null) })
   ] });
 };
 export {
-  P as Question
+  k as Question
 };

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

@@ -1,12 +1,14 @@
 /// <reference types="react" />
-export declare const Panel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const QuestionTypeIconWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const QuestionTypeIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const QuestionContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QuestionItem: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QuestionCaption: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QuestionBody: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QuestionAction: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QuestionActionIcon: any;
+export declare const QuestionTypeIcon: any;
 export declare const QuestionTypeLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QuestionContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const QuestionSubject: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const QuestionActionTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const QuestionActionIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
 export declare const QuestionStatusIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const QuestionTypeTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const ExpiredQuestion: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

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

@@ -1,44 +1,66 @@
 import { styled as o } from "@linaria/react";
-const t = o.div`
-  border-radius: 8px;
-  padding: 12px;
-  background-color: var(--color-transparent-item);
+import { SvgIcon as t } from "../../icons/index.js";
+import "react/jsx-runtime";
+import "react";
+const s = o.div`
+  border-radius: var(--border-radius);
+  padding: var(--container-padding);
+  background-color: var(--color-neutrals-white);
   display: flex;
   align-items: center;
-  cursor: pointer;
+  justify-content: space-between;
+  gap: 12px;
+  border: 1px solid var(--color-neutrals-white);
 
   &:hover {
-    background: #000;
+    border-color: var(--color-neutrals-gray4);
   }
-`, n = o.div`
-  padding-right: 12px;
+`, a = o.div`
   display: flex;
   align-items: center;
-  justify-content: center;
-`, r = o.img`
+  justify-content: flex-start;
+
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 8px;
+`, p = o.div`
+  font-family: var(--font-serif);
+  color: var(--color-primary-green2);
+  font-size: 14px;
+  font-weight: 400;
+`, l = o.div``, c = o(t)`
+  width: 24px;
+  height: 24px;
+`, d = o(t)`
   width: 16px;
   height: 16px;
-`, i = o.div`
+
+  path {
+    fill: var(--color-primary-green1);
+    fill-opacity: 1;
+  }
+`, f = o.div`
+  color: var(--color-neutrals-gray7);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+
+  margin-left: 6px;
+`, u = o.div`
   font-weight: 700;
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-`, p = o.div`
-  color: var(--color-grey-primary);
-  font-size: 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-bottom: 5px;
-  text-transform: uppercase;
-`, s = o.div`
+`, x = o.div`
   color: var(--color-white);
   font-size: 12px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`, a = o.button`
+`, g = o.button`
   background-color: var(--color-blue-question-action-btn);
   border: none;
   border-radius: 2px;
@@ -48,35 +70,29 @@ const t = o.div`
   text-transform: uppercase;
   color: #fff;
   cursor: pointer;
-`, c = o.button`
-  border: none;
-  font-size: 8px;
-  padding: 6px;
-  display: flex;
-  align-items: center;
-  background-color: transparent;
-  cursor: pointer;
-`, d = o.img`
+`, v = o.img`
   width: 16px;
   height: 16px;
-`, l = o.span`
+`, h = o.span`
   text-transform: uppercase;
-`, x = o.span`
+`, m = o.span`
   text-transform: uppercase;
   border-left: 1px solid var(--color-grey-primary);
   padding-left: 5px;
   margin-left: 5px;
 `;
 export {
-  x as ExpiredQuestion,
-  t as Panel,
+  m as ExpiredQuestion,
+  l as QuestionAction,
   c as QuestionActionIcon,
-  a as QuestionActionTitle,
-  i as QuestionContent,
-  d as QuestionStatusIcon,
-  s as QuestionSubject,
-  r as QuestionTypeIcon,
-  n as QuestionTypeIconWrap,
-  p as QuestionTypeLabel,
-  l as QuestionTypeTitle
+  g as QuestionActionTitle,
+  p as QuestionBody,
+  a as QuestionCaption,
+  u as QuestionContent,
+  s as QuestionItem,
+  v as QuestionStatusIcon,
+  x as QuestionSubject,
+  d as QuestionTypeIcon,
+  f as QuestionTypeLabel,
+  h as QuestionTypeTitle
 };

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

@@ -1,14 +1,14 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { Question as e } from "../question/index.js";
-import { Container as n, Title as p, ItemsContainer as c } from "./styles.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Question as i } from "../question/index.js";
+import { QuestionsContainer as p } from "./styles.js";
 import "@streamlayer/sdk-web-types";
-import "../../../icon-chevron-138a557c.js";
-import "../question/styles.js";
+import "../../button/index.js";
+import "../../button/styles.js";
 import "@linaria/react";
-const C = ({ questions: r, openQuestion: m }) => /* @__PURE__ */ o(n, { children: [
-  /* @__PURE__ */ t(p, { children: "PICK HISTORY" }),
-  /* @__PURE__ */ t(c, { children: r == null ? void 0 : r.map((i) => /* @__PURE__ */ t(e, { openQuestion: m, ...i }, i.questionId)) })
-] });
+import "../question/styles.js";
+import "../../icons/index.js";
+import "react";
+const l = ({ questions: r, openQuestion: m }) => /* @__PURE__ */ t(p, { children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ t(i, { openQuestion: m, ...o }, o.questionId)) });
 export {
-  C as QuestionList
+  l as QuestionList
 };

package/lib/ui/gamification/question-list/styles.d.ts

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

package/lib/ui/gamification/question-list/styles.js

@@ -1,27 +1,11 @@
 import { styled as o } from "@linaria/react";
-const e = o.div`
-  display: flex;
-  flex-direction: column;
-  border-radius: 13px;
-  height: 100%;
-`, i = o.div`
-  color: var(--color-grey-primary);
-  text-transform: uppercase;
-  font-size: 12px;
-  font-weight: 500;
-  margin-bottom: 8px;
-`, r = o.div`
+const t = o.div`
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   max-height: 100%;
-
-  & > div {
-    margin-bottom: 8px;
-  }
+  gap: 8px;
 `;
 export {
-  e as Container,
-  r as ItemsContainer,
-  i as Title
+  t as QuestionsContainer
 };

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

@@ -2,6 +2,8 @@ import { styled as o } from "@linaria/react";
 const t = o.div`
   padding-left: var(--container-padding);
   padding-right: var(--container-padding);
+  padding-bottom: var(--container-padding);
+  background-color: var(--color-neutrals-white);
 `, n = o.div`
   position: relative;
   box-sizing: border-box;
@@ -34,7 +36,7 @@ const t = o.div`
       transform: translateX(100%);
     }
   }
-`, e = o.button`
+`, a = o.button`
   border: none;
   outline: none;
   background-color: transparent;
@@ -58,13 +60,13 @@ const t = o.div`
     color: var(--color-primary-green1);
     cursor: default;
   }
-`, a = o.span`
+`, e = o.span`
   position: relative;
   z-index: 2;
 `;
 export {
-  e as Button,
+  a as Button,
   t as Container,
   n as STabs,
-  a as Title
+  e as Title
 };

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

@@ -7,6 +7,7 @@ export declare const icons: {
     'icon-thumb-down': any;
     'icon-star': any;
     'icon-prediction': any;
+    'icon-insight': any;
     'icon-poll': any;
     'icon-masters-logo': any;
     'icon-logout': any;
@@ -23,12 +24,13 @@ export declare const icons: {
     '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;
     fedex: any;
 };
 export declare const Icon: React.FC<{