@streamlayer/react-ui 0.99.0 → 0.100.0

package/lib/ui/app/masters.js

@@ -1,41 +1,40 @@
 import { jsx as n, jsxs as v } from "react/jsx-runtime";
 import { useStore as C } from "@nanostores/react";
-import { useAnalyticsListener as p, newTabLinkListener as A, appScrollListener as F, appClickListener as x } from "../../hooks/analytics.js";
-import { useRef as S, useMemo as b } from "react";
-import { resetCss as f } from "../theme/theme.js";
-import { ActiveFeature as D, StandaloneFeature as I } from "./Features/index.js";
-import { MastersNavigation as M } from "./Navigation/MastersNavigation/index.js";
-import { SDKNotifications as B } from "./Notifications/index.js";
-import { SDKContainer as j, SDKScrollContainer as k } from "./styles.js";
+import { useAnalyticsListener as d, newTabLinkListener as A, appScrollListener as F, appClickListener as x } from "../../hooks/analytics.js";
+import { useRef as S, useMemo as b, useEffect as D } from "react";
+import { resetCss as p } from "../theme/theme.js";
+import { ActiveFeature as I, StandaloneFeature as M } from "./Features/index.js";
+import { MastersNavigation as B } from "./Navigation/MastersNavigation/index.js";
+import { SDKNotifications as j } from "./Notifications/index.js";
+import { SDKContainer as k, SDKScrollContainer as E } from "./styles.js";
 import { useMastersApp as K } from "./useMastersApp.js";
 import { MastersContext as O } from "./useMastersContext.js";
 import { useSdkFeature as R } from "./useSdkFeature.js";
 import { useSdkResponsive as T } from "./useSdkResponsive.js";
 import { useSdkScroll as w } from "./useSdkScroll.js";
-import { ChannelsButtonId as E } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as G } from "../navigation/button/LeaderBoard.js";
-import { FeaturedGroupsButtonId as P } from "../navigation/button/FeaturedGroups.js";
-const V = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, headerNode: o, responsiveStore: r }) => {
-  const [, c] = R(e);
+import { ChannelsButtonId as G } from "../navigation/button/Channels.js";
+import { LeaderBoardButtonId as P } from "../navigation/button/LeaderBoard.js";
+import { FeaturedGroupsButtonId as V } from "../navigation/button/FeaturedGroups.js";
+const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, responsiveStore: o }) => {
+  const [, r] = R(e);
   return /* @__PURE__ */ n(
-    D,
+    I,
     {
       className: i,
       scrollNode: s,
       appNode: t,
       scrollStore: l,
-      feature: c,
-      headerNode: o,
-      responsiveStore: r,
+      feature: r,
+      responsiveStore: o,
       sdk: e
     }
   );
-}, W = ({ sdk: e, className: i, appNode: l, responsiveStore: t }) => {
+}, Y = ({ sdk: e, className: i, appNode: l, responsiveStore: t }) => {
   const s = C(e.featuresList.getStore());
   return s ? Array.from(s, (o) => {
     const r = e.getFeature(o);
     return r ? /* @__PURE__ */ n(
-      I,
+      M,
       {
         className: i,
         appNode: l,
@@ -46,63 +45,64 @@ const V = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, he
       o
     ) : null;
   }) : null;
-}, ae = ({ sdk: e, overlays: i, children: l }) => {
-  const t = S(null), s = S(null), [o] = T(t), [r, c] = w(t, o), { sdkEnabled: a, sdkReady: u, activeOverlay: m, activateAndLoadOverlay: h, activateEventWithId: N, deactivate: g, isLogged: y } = K(e);
-  p(t, { enabled: a, event: "click", listener: A }), p(r, {
+}, ie = ({ sdk: e, overlays: i, children: l }) => {
+  const t = S(null), s = S(null), [o] = T(t), [r, f] = w(t, o), { sdkEnabled: a, sdkReady: c, activeOverlay: m, activateAndLoadOverlay: h, activateEventWithId: N, deactivate: g, isLogged: y } = K(e);
+  d(t, { enabled: a, event: "click", listener: A }), d(r, {
     enabled: a,
     event: "scrollend",
     listener: F,
     useDomNode: !0
-  }), p(r, {
+  }), d(r, {
     enabled: a,
     event: "click",
     listener: x,
     useDomNode: !0
   });
   const L = b(() => ({ sdk: e }), [e]);
-  return /* @__PURE__ */ n(O.Provider, { value: L, children: /* @__PURE__ */ v(j, { ref: t, children: [
+  return D(() => {
+    import("./Features/Gamification/gamification-feature.js");
+  }, []), /* @__PURE__ */ n(O.Provider, { value: L, children: /* @__PURE__ */ v(k, { ref: t, children: [
     a && /* @__PURE__ */ n(
-      M,
+      B,
       {
         ref: s,
-        sdkReady: u,
+        sdkReady: c,
         activeOverlay: m,
-        className: f,
-        setActiveOverlay: (d) => h("", d),
+        className: p,
+        setActiveOverlay: (u) => h("", u),
         scrollToTop: () => {
-          var d;
-          return (d = r.current) == null ? void 0 : d.scrollTo(0, 0);
+          var u;
+          return (u = r.current) == null ? void 0 : u.scrollTo(0, 0);
         },
         responsiveStore: o
       }
     ),
-    /* @__PURE__ */ v(k, { className: "sl-hide-on-modal", ref: r, "data-nav": a.toString(), children: [
-      u && /* @__PURE__ */ n(
-        B,
+    /* @__PURE__ */ v(E, { className: "sl-hide-on-modal", ref: r, "data-nav": a.toString(), children: [
+      c && /* @__PURE__ */ n(
+        j,
         {
           sdk: e,
           scrollNode: r,
           headerNode: s,
           appNode: t,
-          scrollStore: c,
+          scrollStore: f,
           responsiveStore: o
         }
       ),
-      /* @__PURE__ */ n("div", { style: !a || m === E ? {} : { display: "none" }, children: l && l({ activateEventWithId: N, deactivate: g }) }),
-      i && m === G && i[m],
-      u && m === P && /* @__PURE__ */ n(
-        V,
+      /* @__PURE__ */ n("div", { style: !a || m === G ? {} : { display: "none" }, children: l && l({ activateEventWithId: N, deactivate: g }) }),
+      i && m === P && i[m],
+      c && m === V && /* @__PURE__ */ n(
+        W,
         {
-          scrollStore: c,
+          scrollStore: f,
           responsiveStore: o,
           scrollNode: r,
           appNode: t,
-          headerNode: s,
-          className: f,
+          className: p,
           sdk: e
         }
       ),
-      u && /* @__PURE__ */ n(W, { responsiveStore: o, appNode: t, className: f, sdk: e })
+      c && /* @__PURE__ */ n(Y, { responsiveStore: o, appNode: t, className: p, sdk: e })
     ] }),
     a && !y && /* @__PURE__ */ n(
       "div",
@@ -114,5 +114,5 @@ const V = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, he
   ] }) });
 };
 export {
-  ae as MastersApp
+  ie as MastersApp
 };

package/lib/ui/app/useSdkScroll.js

@@ -1,47 +1,50 @@
-import { useStore as p } from "@nanostores/react";
-import S from "lodash.throttle";
-import { useRef as m, useState as h, useEffect as g } from "react";
-import { BREAKPOINTS as l } from "../theme/constants.js";
-import { m as T } from "../../index-CZvwzN5o.js";
-const R = (o, t, e) => {
-  const n = t >= l.lg && t < l.xl ? 75 : 52;
+import { useStore as S } from "@nanostores/react";
+import h from "lodash.throttle";
+import { useRef as m, useState as b, useEffect as g } from "react";
+import { BREAKPOINTS as c } from "../theme/constants.js";
+import { m as v } from "../../index-CZvwzN5o.js";
+const C = (o, e, n) => {
+  const t = e >= c.lg && e < c.xl ? 75 : 52;
   o.current && window.scrollTo({
-    top: o.current.offsetTop - n,
-    ...e
+    top: o.current.offsetTop - t,
+    ...n
   });
-}, C = (o, t) => {
-  const e = m(null), n = m(0), [s] = h(
-    T({
+}, T = 15, D = (o, e) => {
+  const n = m(null), t = m(0), [s] = b(
+    v({
       scrollPosition: 0,
       tabsShown: !0,
       scrollDirection: "forward"
     })
-  ), i = p(t);
+  ), i = S(e);
   return g(() => {
-    const c = window.innerWidth < l.xl ? window : e.current;
-    if (!c)
+    const l = window.innerWidth < c.xl ? window : n.current;
+    if (!l)
       return () => {
       };
-    const u = S((w) => {
+    const f = h((d) => {
       var a;
-      const f = w.target;
-      if (!f)
+      const u = d.target;
+      if (!u)
         return;
       let r = 0;
-      i.screen.size < l.xl ? r = ((a = o.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : r = f.scrollTop;
-      const d = n.current < r ? "forward" : "backward";
-      n.current = r, s.set({
+      i.screen.size < c.xl ? r = ((a = o.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : r = u.scrollTop;
+      const w = t.current - r;
+      if (T > Math.abs(w))
+        return;
+      const p = t.current < r ? "forward" : "backward";
+      t.current = r, s.set({
         scrollPosition: Math.round(r),
-        scrollDirection: d,
+        scrollDirection: p,
         tabsShown: s.get().tabsShown
       });
     }, 200);
-    return c.addEventListener("scroll", u), () => {
-      c.removeEventListener("scroll", u);
+    return l.addEventListener("scroll", f), () => {
+      l.removeEventListener("scroll", f);
     };
-  }, [s, o, i.screen]), [e, s];
+  }, [s, o, i.screen]), [n, s];
 };
 export {
-  R as scrollIntoAppView,
-  C as useSdkScroll
+  C as scrollIntoAppView,
+  D as useSdkScroll
 };

package/lib/ui/gamification/leaderboard/list-item/index.d.ts

@@ -3,7 +3,6 @@ import type { LeaderboardItem as ILeaderboardItem } from '@streamlayer/sdk-web-t
 export type LeaderboardItemProps = Partial<ILeaderboardItem> & {
     userId: string;
     isCurrentUser?: boolean;
-    openItemDetail: () => void;
     style?: React.CSSProperties;
 };
 export declare const LeaderboardItem: React.FC<LeaderboardItemProps>;

package/lib/ui/gamification/leaderboard/list-item/index.js

@@ -1,24 +1,24 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { abbreviate as l, formatDecimals as m } from "../../../../utils/common.js";
-import { Container as s, Position as h, Content as C, Avatar as b, AvatarPlaceholder as f, NameContainer as p, Name as v, CurrentUserBadge as x } from "./styles.js";
+import { abbreviate as c, formatDecimals as l } from "../../../../utils/common.js";
+import { Container as s, Position as h, Content as b, Avatar as f, AvatarPlaceholder as p, NameContainer as v, Name as C, CurrentUserBadge as x } from "./styles.js";
 const N = ({
-  friendsRank: t,
+  friendsRank: i,
   avatar: a,
-  name: i,
-  points: n,
-  isCurrentUser: o,
-  openItemDetail: d,
-  style: c
-}) => /* @__PURE__ */ e(s, { onClick: d, style: c, children: [
-  /* @__PURE__ */ r(h, { children: t || 0 }),
-  /* @__PURE__ */ e(C, { children: [
-    a ? /* @__PURE__ */ r(b, { alt: "leaderboard-item-avatar", src: a }) : /* @__PURE__ */ r(f, { children: l(i || "") }),
-    /* @__PURE__ */ e(p, { children: [
-      /* @__PURE__ */ r(v, { children: i || "" }),
-      o && /* @__PURE__ */ r(x, { name: "icon-star" })
+  name: t,
+  userId: n,
+  points: o,
+  isCurrentUser: d,
+  style: m
+}) => /* @__PURE__ */ e(s, { "data-name": n, style: m, children: [
+  /* @__PURE__ */ r(h, { children: i || 0 }),
+  /* @__PURE__ */ e(b, { children: [
+    a ? /* @__PURE__ */ r(f, { alt: "leaderboard-item-avatar", src: a }) : /* @__PURE__ */ r(p, { children: c(t || "") }),
+    /* @__PURE__ */ e(v, { children: [
+      /* @__PURE__ */ r(C, { children: t || "" }),
+      d && /* @__PURE__ */ r(x, { name: "icon-star" })
     ] })
   ] }),
-  /* @__PURE__ */ r("div", { children: m(n) })
+  /* @__PURE__ */ r("div", { children: l(o) })
 ] });
 export {
   N as LeaderboardItem

package/lib/ui/gamification/leaderboard/static.js

@@ -1,32 +1,39 @@
 import { jsx as e } from "react/jsx-runtime";
-import { styled as l } from "@linaria/react";
-import d from "react-infinite-scroller";
+import { styled as c } from "@linaria/react";
+import { useCallback as f } from "react";
+import m from "react-infinite-scroller";
 import { LeaderboardItem as p } from "./list-item/index.js";
-const c = /* @__PURE__ */ l("div")({
+const u = /* @__PURE__ */ c("div")({
   name: "Container",
   class: "c16btbfp",
   propsAsIs: !1
-}), b = ({
-  items: t,
+}), S = ({
+  items: s,
   currentUserId: o,
-  openItemDetail: a,
-  fetchMore: s,
-  scrollNode: n,
-  hasMore: i
-}) => /* @__PURE__ */ e(d, {
-  loadMore: s,
-  initialLoad: !1,
-  hasMore: i,
-  useWindow: !1,
-  getScrollParent: () => n.current,
-  children: /* @__PURE__ */ e(c, {
-    children: t.map((r) => /* @__PURE__ */ e(p, {
-      ...r,
-      openItemDetail: () => a(r.userId),
-      isCurrentUser: !!o && o === r.userId
-    }, r.userId))
-  })
-});
+  openItemDetail: t,
+  fetchMore: n,
+  scrollNode: i,
+  hasMore: l
+}) => {
+  const d = f((r) => {
+    const a = r.target.getAttribute("data-name");
+    a && t(a);
+  }, [t]);
+  return /* @__PURE__ */ e(m, {
+    loadMore: n,
+    initialLoad: !1,
+    hasMore: l,
+    useWindow: !1,
+    getScrollParent: () => i.current,
+    children: /* @__PURE__ */ e(u, {
+      onClick: d,
+      children: s.map((r) => /* @__PURE__ */ e(p, {
+        ...r,
+        isCurrentUser: !!o && o === r.userId
+      }, r.userId))
+    })
+  });
+};
 export {
-  b as LeaderboardStaticList
+  S as LeaderboardStaticList
 };

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

@@ -1,6 +1,4 @@
 /// <reference types="react" />
 import { type PickHistory } from '@streamlayer/sdk-web-types';
 export declare const QuestionSkeleton: React.FC;
-export declare const Question: React.FC<{
-    openQuestion?: (questionId: string) => void;
-} & PickHistory>;
+export declare const Question: React.FC<PickHistory>;

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

@@ -1,49 +1,48 @@
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { PickHistoryStatus as e, QuestionType as a, QuestionStatus as Q } from "@streamlayer/sdk-web-types";
-import { QuestionTypeData as p } from "../constants.js";
-import { Skeleton as l } from "../../skeleton/index.js";
-import { QuestionActionIcon as i, SkeletonContainer as I, SkeletonButton as S, QuestionItem as k, QuestionContent as f, QuestionCaption as A, QuestionTypeIcon as T, QuestionTypeLabel as L, QuestionBody as P, QuestionAction as w, PlayButton as x } from "./styles.js";
-const C = {
+import { PickHistoryStatus as e, QuestionType as a, QuestionStatus as p } from "@streamlayer/sdk-web-types";
+import { QuestionTypeData as h } from "../constants.js";
+import { Skeleton as c } from "../../skeleton/index.js";
+import { QuestionActionIcon as i, SkeletonContainer as y, SkeletonButton as I, QuestionItem as S, QuestionContent as f, QuestionCaption as k, QuestionTypeIcon as A, QuestionTypeLabel as T, QuestionBody as L, QuestionAction as P, PlayButton as w } from "./styles.js";
+const x = {
   [e.LOST]: /* @__PURE__ */ t(i, { name: "incorrectVoted" }),
   [e.WON]: /* @__PURE__ */ t(i, { name: "icon-check" }),
   [e.UNSET]: /* @__PURE__ */ t(i, { name: "icon-arrow" }),
   [e.DNP]: /* @__PURE__ */ t(i, { name: "icon-arrow" })
-}, B = () => /* @__PURE__ */ n(I, { children: [
-  /* @__PURE__ */ t(l, { loading: !0, style: { width: "35%" } }),
-  /* @__PURE__ */ t(l, { loading: !0, style: { width: "70%" } }),
-  /* @__PURE__ */ t(S, {})
-] }), R = ({
+}, B = () => /* @__PURE__ */ n(y, { children: [
+  /* @__PURE__ */ t(c, { loading: !0, style: { width: "35%" } }),
+  /* @__PURE__ */ t(c, { loading: !0, style: { width: "70%" } }),
+  /* @__PURE__ */ t(I, {})
+] }), C = ({
   questionId: s,
   questionType: o,
-  questionStatus: u,
-  subject: d,
-  openForVoting: m,
-  openQuestion: r,
-  status: h
+  questionStatus: l,
+  subject: u,
+  openForVoting: d,
+  status: m
 }) => {
-  const c = p[o], y = C[h];
-  return c ? /* @__PURE__ */ n(k, { onClick: () => r == null ? void 0 : r(s), children: [
+  const r = h[o], Q = x[m];
+  return r ? /* @__PURE__ */ n(S, { "data-name": s, children: [
     /* @__PURE__ */ n(f, { children: [
-      /* @__PURE__ */ n(A, { children: [
+      /* @__PURE__ */ n(k, { children: [
         /* @__PURE__ */ t(
-          T,
+          A,
           {
             "data-type-trivia": o === a.TRIVIA,
             "data-type-poll": o === a.POLL,
-            name: c.iconName
+            name: r.iconName
           }
         ),
-        /* @__PURE__ */ n(L, { children: [
-          c.label,
-          o === a.TRIVIA && u === Q.RESOLVED && " • Expired"
+        /* @__PURE__ */ n(T, { children: [
+          r.label,
+          o === a.TRIVIA && l === p.RESOLVED && " • Expired"
         ] })
       ] }),
-      /* @__PURE__ */ t(P, { children: d || "" })
+      /* @__PURE__ */ t(L, { children: u || "" })
     ] }),
-    /* @__PURE__ */ t(w, { children: m ? /* @__PURE__ */ t(x, { children: "Play" }) : y })
+    /* @__PURE__ */ t(P, { children: d ? /* @__PURE__ */ t(w, { children: "Play" }) : Q })
   ] }) : null;
 };
 export {
-  R as Question,
+  C as Question,
   B as QuestionSkeleton
 };

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

@@ -2,7 +2,6 @@
 import { InsightContentProps } from '../../../questions/insight';
 import { VideoPlayerProps } from '../../../video-player';
 type InsightProps = InsightContentProps & {
-    openInsight?: (questionId: string) => void;
     controlVideo: VideoPlayerProps['controlVideo'];
 };
 export declare const Insight: React.FC<InsightProps>;

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

@@ -1,10 +1,10 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { InsightContent as c } from "../../../questions/insight/index.js";
-import { Container as f, ActionBtn as l } from "./styles.js";
-const j = ({ openInsight: r, questionId: t, ...m }) => /* @__PURE__ */ o(f, { onClick: () => r == null ? void 0 : r(t), children: [
-  /* @__PURE__ */ i(c, { questionId: t, ...m }),
-  r && /* @__PURE__ */ i(l, { children: "View Insight" })
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { InsightContent as o } from "../../../questions/insight/index.js";
+import { Container as m, ActionBtn as a } from "./styles.js";
+const c = ({ questionId: t, ...r }) => /* @__PURE__ */ i(m, { "data-name": t, children: [
+  /* @__PURE__ */ n(o, { questionId: t, ...r }),
+  /* @__PURE__ */ n(a, { "data-name": t, children: "View Insight" })
 ] });
 export {
-  j as Insight
+  c as Insight
 };

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

@@ -1,47 +1,31 @@
-import { jsx as i } from "react/jsx-runtime";
-import { QuestionSkeleton as f, Question as c } from "../index.js";
+import { jsx as r } from "react/jsx-runtime";
+import { QuestionSkeleton as c, Question as f } from "../index.js";
 import { Insight as d } from "../insight/index.js";
 import { Twitter as h } from "../twitter/index.js";
 import { pauseAllVideos as g } from "../../../video-player/index.js";
-import { QuestionsContainer as b } from "./styles.js";
-const A = ({ questions: n, openQuestion: l, controlVideo: s }) => {
-  const u = (t) => {
-    g(), l(t, { openedFrom: "list" });
+import { QuestionsContainer as m } from "./styles.js";
+const k = ({ questions: n, openQuestion: b, controlVideo: u }) => {
+  const l = (t) => {
+    const e = t.target.getAttribute("data-name");
+    e && (g(), b(e, { openedFrom: "list" }));
   };
-  return n ? /* @__PURE__ */ i(b, { children: n == null ? void 0 : n.map((t) => {
-    var r, a, o;
-    if (t.type === "question" && ((r = t.attributes) == null ? void 0 : r.attributes.case) === "question") {
-      const e = t.attributes.attributes.value;
-      return /* @__PURE__ */ i(c, { openQuestion: u, ...e }, e.questionId);
+  return n ? /* @__PURE__ */ r(m, { onClick: l, children: n == null ? void 0 : n.map((t) => {
+    var e, a, s;
+    if (t.type === "question" && ((e = t.attributes) == null ? void 0 : e.attributes.case) === "question") {
+      const i = t.attributes.attributes.value;
+      return /* @__PURE__ */ r(f, { ...i }, i.questionId);
     }
     if (t.type === "insight" && ((a = t.attributes) == null ? void 0 : a.attributes.case) === "insight") {
-      const e = t.attributes.attributes.value;
-      return /* @__PURE__ */ i(
-        d,
-        {
-          openInsight: u,
-          controlVideo: s,
-          ...e
-        },
-        e.questionId
-      );
+      const i = t.attributes.attributes.value;
+      return /* @__PURE__ */ r(d, { controlVideo: u, ...i }, i.questionId);
     }
-    if (t.type === "tweet" && ((o = t.attributes) == null ? void 0 : o.attributes.case) === "tweet") {
-      const e = t.attributes.attributes.value, m = t.attributes.id;
-      return /* @__PURE__ */ i(
-        h,
-        {
-          openTweet: u,
-          controlVideo: s,
-          ...e,
-          tweetId: m
-        },
-        m
-      );
+    if (t.type === "tweet" && ((s = t.attributes) == null ? void 0 : s.attributes.case) === "tweet") {
+      const i = t.attributes.attributes.value, o = t.attributes.id;
+      return /* @__PURE__ */ r(h, { controlVideo: u, ...i, tweetId: o }, o);
     }
     return null;
-  }) }) : /* @__PURE__ */ i(b, { children: Array.from({ length: 5 }).map((t, r) => /* @__PURE__ */ i(f, {}, r)) });
+  }) }) : /* @__PURE__ */ r(m, { children: Array.from({ length: 5 }).map((t, e) => /* @__PURE__ */ r(c, {}, e)) });
 };
 export {
-  A as QuestionList
+  k as QuestionList
 };

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

@@ -2,7 +2,6 @@
 import { type TwitterContentProps } from '../../../questions/twitter';
 import { VideoPlayerProps } from '../../../video-player';
 type TwitterProps = TwitterContentProps & {
-    openTweet?: (questionId: string) => void;
     controlVideo: VideoPlayerProps['controlVideo'];
 };
 export declare const Twitter: React.FC<TwitterProps>;

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

@@ -1,11 +1,11 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { TwitterContent as c } from "../../../questions/twitter/index.js";
-import { Container as l, Quote as m, ActionButton as o } from "./styles.js";
-const u = ({ openTweet: t, ...i }) => /* @__PURE__ */ n(l, { onClick: () => t == null ? void 0 : t(i.tweetId), children: [
-  i.title && /* @__PURE__ */ r(m, { children: i.title }),
-  /* @__PURE__ */ r(c, { ...i }),
-  t && /* @__PURE__ */ r(o, { children: "View Insight" })
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { TwitterContent as n } from "../../../questions/twitter/index.js";
+import { Container as r, Quote as o, ActionButton as m } from "./styles.js";
+const a = ({ ...t }) => /* @__PURE__ */ i(r, { "data-name": t.tweetId, children: [
+  t.title && /* @__PURE__ */ e(o, { children: t.title }),
+  /* @__PURE__ */ e(n, { ...t }),
+  /* @__PURE__ */ e(m, { children: "View Insight" })
 ] });
 export {
-  u as Twitter
+  a as Twitter
 };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type AlertProps = {
+    icon: 'icon-check-circle';
+    title: string;
+    description: React.ReactElement | string;
+};
+export declare const Alert: React.FC<AlertProps>;
+export {};

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

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

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

@@ -1,19 +1,19 @@
 import { styled as s } from "@linaria/react";
-const t = /* @__PURE__ */ s("div")({
+const n = /* @__PURE__ */ s("div")({
   name: "Container",
-  class: "c38csyt",
+  class: "c1gcvmcj",
   propsAsIs: !1
 }), o = /* @__PURE__ */ s("div")({
   name: "Title",
-  class: "ty221rx",
+  class: "tnr592a",
   propsAsIs: !1
-}), a = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "Description",
-  class: "dlaj9xp",
+  class: "d1e8jqpv",
   propsAsIs: !1
 });
 export {
-  t as Container,
-  a as Description,
+  n as Container,
+  t as Description,
   o as Title
 };