@streamlayer/react-ui 0.84.0 → 0.85.0

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

@@ -1,13 +1,15 @@
-import { jsx as o, jsxs as h, Fragment as f } from "react/jsx-runtime";
-import { useStore as y } from "@nanostores/react";
-import { useState as d, useMemo as a, useRef as N, useCallback as l, useEffect as S } from "react";
-import { NotificationType as s } from "@streamlayer/sdk-web-notifications";
-import { Notification as c } from "../../gamification/question/notification/index.js";
-import { PredictionResult as O } from "../../gamification/question/notification/prediction-result/index.js";
-import { Onboarding as R } from "./Onboarding/index.js";
-import { InnerContainer as g, Container as v, NotificationRefreshing as E } from "./styles.js";
+import { jsxs as h, Fragment as S, jsx as o } from "react/jsx-runtime";
+import { useStore as b } from "@nanostores/react";
+import { useState as a, useMemo as T, useEffect as d, useRef as x, useCallback as v } from "react";
+import { r as D } from "../../../index-ba93b6b2.js";
+import { NotificationType as c } from "@streamlayer/sdk-web-notifications";
+import { QuestionTypeData as E } from "../../gamification/constants.js";
+import { Notification as O } from "../../gamification/question/notification/index.js";
+import { PredictionResult as P } from "../../gamification/question/notification/prediction-result/index.js";
+import { Onboarding as C } from "./Onboarding/index.js";
+import { Pill as I, InnerContainer as R, Container as q, NotificationRefreshing as B } from "./styles.js";
+import "../../../index-39a0b9b6.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";
@@ -39,57 +41,107 @@ import "../../button/index.js";
 import "../../button/styles.js";
 import "./Onboarding/Notification/index.js";
 import "./Onboarding/Notification/styles.js";
-const I = (p) => {
-  const [t, r] = d(0), e = N(null), n = l((i) => {
-    e.current = i;
+import "../../gamification/question/notification/pill/index.js";
+import "../../gamification/question/notification/pill/styles.js";
+const w = (s) => {
+  const [t, n] = a(0), i = x(null), m = v((e) => {
+    i.current = e;
   }, []);
-  S(() => {
-    var u;
-    const i = (u = e.current) == null ? void 0 : u.getBoundingClientRect();
-    i && r(i.height);
-  }, [p]);
-  const m = l((i) => {
-    r(i);
+  d(() => {
+    var p;
+    const e = (p = i.current) == null ? void 0 : p.getBoundingClientRect();
+    e && n(e.height);
+  }, [s]);
+  const r = v((e) => {
+    n(e);
   }, []);
-  return [n, t, m];
-}, b = ({ sdk: p, notification: t }) => {
-  var m, i;
-  const [r, e, n] = I(t.id);
-  return t.type === s.QUESTION ? /* @__PURE__ */ h(f, { children: [
-    /* @__PURE__ */ o(g, { ref: r, style: { position: "absolute", visibility: "hidden" }, children: /* @__PURE__ */ o(c, { ...t }) }),
-    /* @__PURE__ */ h(v, { style: { height: t.hiding ? 0 : e }, hiding: t.hiding, children: [
-      /* @__PURE__ */ o(g, { style: { height: "100%" }, children: /* @__PURE__ */ o(c, { ...t }) }),
-      /* @__PURE__ */ o(E, {}, t.id)
-    ] })
-  ] }) : t.type === s.QUESTION_RESOLVED && ((i = (m = t.data) == null ? void 0 : m.question) != null && i.predictionResult) ? /* @__PURE__ */ o(
-    O,
-    {
-      style: { height: t.hiding ? 0 : e },
-      saveHeight: n,
-      close: t.close,
+  return [m, t, r];
+}, H = ({
+  sdk: s,
+  notification: t
+}) => {
+  var r, e;
+  const [n, i, m] = w(t.id);
+  return t.type === c.QUESTION ? /* @__PURE__ */ h(S, {
+    children: [/* @__PURE__ */ o(R, {
+      ref: n,
+      style: {
+        position: "absolute",
+        visibility: "hidden"
+      },
+      children: /* @__PURE__ */ o(O, {
+        ...t
+      })
+    }), /* @__PURE__ */ h(q, {
+      style: {
+        height: t.hiding ? 0 : i
+      },
       hiding: t.hiding,
-      ...t.data.question
-    }
-  ) : t.type === s.ONBOARDING ? /* @__PURE__ */ o(
-    R,
-    {
-      style: { height: t.hiding ? 0 : e },
-      saveHeight: n,
-      sdk: p,
-      notification: t
-    }
-  ) : null;
-}, gt = ({ sdk: p }) => {
-  const [t] = d(p.getNotificationsStore()), r = y(t), e = a(() => {
+      children: [/* @__PURE__ */ o(R, {
+        style: {
+          height: "100%"
+        },
+        children: /* @__PURE__ */ o(O, {
+          ...t
+        })
+      }), /* @__PURE__ */ o(B, {}, t.id)]
+    })]
+  }) : t.type === c.QUESTION_RESOLVED && ((e = (r = t.data) == null ? void 0 : r.question) != null && e.predictionResult) ? /* @__PURE__ */ o(P, {
+    style: {
+      height: t.hiding ? 0 : i
+    },
+    saveHeight: m,
+    close: t.close,
+    hiding: t.hiding,
+    ...t.data.question
+  }) : t.type === c.ONBOARDING ? /* @__PURE__ */ o(C, {
+    style: {
+      height: t.hiding ? 0 : i
+    },
+    saveHeight: m,
+    sdk: s,
+    notification: t
+  }) : null;
+}, Dt = ({
+  sdk: s,
+  scrollNode: t,
+  appNode: n,
+  scrollStore: i
+}) => {
+  var f, y;
+  const [m] = a(s.getNotificationsStore()), r = b(m), {
+    tabsShown: e
+  } = b(i, {
+    keys: ["tabsShown"]
+  }), [p, g] = a(null), l = T(() => {
     if (!(r != null && r.size))
       return null;
-    for (const m of r.values())
-      if (m.type === s.ONBOARDING)
-        return m;
+    for (const N of r.values())
+      if (N.type === c.ONBOARDING)
+        return N;
     return r.values().next().value;
   }, [r]);
-  return e ? /* @__PURE__ */ o(b, { sdk: p, notification: e }) : null;
+  return d(() => {
+    l && i.get().scrollPosition > 0 && g(l);
+  }, [l, i]), d(() => i.listen((u) => {
+    u.scrollPosition === 0 && g(null);
+  }), [i]), /* @__PURE__ */ h(S, {
+    children: [!p && l && /* @__PURE__ */ o(H, {
+      sdk: s,
+      notification: l
+    }), p && n.current && D.createPortal(/* @__PURE__ */ o(I, {
+      title: `New ${((y = E[(f = p.data) == null ? void 0 : f.questionType]) == null ? void 0 : y.label) || "notification"}`,
+      onClick: () => {
+        var u;
+        (u = t.current) == null || u.scrollTo({
+          top: 0,
+          behavior: "smooth"
+        });
+      },
+      className: e ? "c1d7yse1" : void 0
+    }), n.current)]
+  });
 };
 export {
-  gt as SDKNotifications
+  Dt as SDKNotifications
 };

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

@@ -2,3 +2,4 @@
 export declare const Container: any;
 export declare const InnerContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const NotificationRefreshing: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Pill: any;

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

@@ -1,22 +1,31 @@
-import { styled as n } from "@linaria/react";
-import { ShowIn as s } from "../../show-in/index.js";
+import { styled as s } from "@linaria/react";
+import { Pill as o } from "../../gamification/question/notification/pill/index.js";
+import { ShowIn as n } from "../../show-in/index.js";
 import "react/jsx-runtime";
+import "../../icons/index.js";
+import "react";
+import "../../gamification/question/notification/pill/styles.js";
 import "@linaria/core";
-const o = () => s, a = /* @__PURE__ */ n(o())({
+const r = () => n, I = /* @__PURE__ */ s(r())({
   name: "Container",
   class: "ctckejh",
   propsAsIs: !0
-}), c = /* @__PURE__ */ n("div")({
+}), h = /* @__PURE__ */ s("div")({
   name: "InnerContainer",
   class: "i1ri7tzr",
   propsAsIs: !1
-}), p = /* @__PURE__ */ n("div")({
+}), A = /* @__PURE__ */ s("div")({
   name: "NotificationRefreshing",
   class: "n1ng1qh5",
   propsAsIs: !1
+}), t = () => o, C = /* @__PURE__ */ s(t())({
+  name: "Pill",
+  class: "pruq6ik",
+  propsAsIs: !0
 });
 export {
-  a as Container,
-  c as InnerContainer,
-  p as NotificationRefreshing
+  I as Container,
+  h as InnerContainer,
+  A as NotificationRefreshing,
+  C as Pill
 };

package/lib/ui/app/masters.js

@@ -1,15 +1,16 @@
-import { jsxs as v, jsx as t } from "react/jsx-runtime";
-import { useEffect as y } from "react";
-import { resetCss as a } from "../theme/theme.js";
-import { ActiveFeature as g } from "./Features/index.js";
-import { MastersNavigation as h } from "./Navigation/MastersNavigation/index.js";
-import { SDKNotifications as S } from "./Notifications/index.js";
-import { SDKContainer as A, SDKScrollContainer as n } from "./styles.js";
-import { useMastersApp as C } from "./useMastersApp.js";
-import { useSdkFeature as I } from "./useSdkFeature.js";
-import { ChannelsButtonId as x } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as s } from "../navigation/button/LeaderBoard.js";
-import { FeaturedGroupsButtonId as B } from "../navigation/button/FeaturedGroups.js";
+import { jsxs as c, jsx as m } from "react/jsx-runtime";
+import { useRef as g, useEffect as h } from "react";
+import { resetCss as d } from "../theme/theme.js";
+import { ActiveFeature as y } from "./Features/index.js";
+import { MastersNavigation as N } from "./Navigation/MastersNavigation/index.js";
+import { SDKNotifications as A } from "./Notifications/index.js";
+import { SDKContainer as C, SDKScrollContainer as I } from "./styles.js";
+import { useMastersApp as x } from "./useMastersApp.js";
+import { useSdkFeature as B } from "./useSdkFeature.js";
+import { useSdkScroll as F } from "./useSdkScroll.js";
+import { ChannelsButtonId as j } from "../navigation/button/Channels.js";
+import { LeaderBoardButtonId as D } from "../navigation/button/LeaderBoard.js";
+import { FeaturedGroupsButtonId as E } from "../navigation/button/FeaturedGroups.js";
 import "../theme/constants.js";
 import "@streamlayer/sdk-web-types";
 import "./Features/FeatureProvider.js";
@@ -19,10 +20,12 @@ import "../navigation/masters.js";
 import "@linaria/react";
 import "../navigation/index.js";
 import "../../index_4nhkck-4ed993c7.js";
-import "../../masters_k70xsy-4ed993c7.js";
+import "../../masters_1wv7w2k-4ed993c7.js";
+import "../../index-ba93b6b2.js";
+import "../../index-39a0b9b6.js";
 import "@streamlayer/sdk-web-notifications";
-import "../gamification/question/notification/index.js";
 import "../gamification/constants.js";
+import "../gamification/question/notification/index.js";
 import "../gamification/question/notification/insight/index.js";
 import "../video-player/index.js";
 import "../icons/index.js";
@@ -56,47 +59,57 @@ import "../button/styles.js";
 import "./Notifications/Onboarding/Notification/index.js";
 import "./Notifications/Onboarding/Notification/styles.js";
 import "./Notifications/styles.js";
+import "../gamification/question/notification/pill/index.js";
+import "../gamification/question/notification/pill/styles.js";
 import "../navigation/button/styles.js";
 import "../../LeaderBoard_16p26hz-4ed993c7.js";
 import "../navigation/button/index.js";
-const F = ({ sdk: r, className: i }) => {
-  const [, m] = I(r);
-  return /* @__PURE__ */ t(g, { className: i, feature: m, sdk: r });
-}, Lt = ({ sdk: r, overlays: i, children: m }) => {
-  const { sdkEnabled: p, sdkReady: e, activeOverlay: o, activateAndLoadOverlay: d, activateEventWithId: c, deactivate: l, isLogged: f } = C(r);
-  return y(() => {
+import "lodash.throttle";
+const K = ({ sdk: t, className: p, scrollStore: e, appNode: r, scrollNode: a }) => {
+  const [, o] = B(t);
+  return /* @__PURE__ */ m(
+    y,
+    {
+      className: p,
+      scrollNode: a,
+      appNode: r,
+      scrollStore: e,
+      feature: o,
+      sdk: t
+    }
+  );
+}, Jt = ({ sdk: t, overlays: p, children: e }) => {
+  const [r, a] = F(), o = g(null), { sdkEnabled: s, sdkReady: n, activeOverlay: i, activateAndLoadOverlay: l, activateEventWithId: f, deactivate: u, isLogged: v } = x(t);
+  return h(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ v(A, { children: [
-    p && /* @__PURE__ */ t(
-      h,
-      {
-        sdkReady: e,
-        activeOverlay: o,
-        className: a,
-        setActiveOverlay: (u) => d("", u)
-      }
-    ),
-    e && /* @__PURE__ */ t(S, { sdk: r }),
-    /* @__PURE__ */ t(
-      n,
-      {
-        "data-nav": p.toString(),
-        style: { display: !p || o === x ? "block" : "none" },
-        children: m && m({ activateEventWithId: c, deactivate: l })
-      }
-    ),
-    /* @__PURE__ */ t(
-      n,
+  }, []), /* @__PURE__ */ c(C, { ref: o, children: [
+    s && /* @__PURE__ */ m(
+      N,
       {
-        "data-nav": p.toString(),
-        style: { display: o === s ? "block" : "none" },
-        children: i && o === s && i[o]
+        sdkReady: n,
+        activeOverlay: i,
+        className: d,
+        setActiveOverlay: (S) => l("", S)
       }
     ),
-    e && o === B && /* @__PURE__ */ t(F, { className: a, sdk: r }),
-    !f && /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
+    /* @__PURE__ */ c(I, { ref: r, "data-nav": s.toString(), children: [
+      n && /* @__PURE__ */ m(A, { sdk: t, scrollNode: r, appNode: o, scrollStore: a }),
+      (!s || i === j) && e && e({ activateEventWithId: f, deactivate: u }),
+      p && i === D && p[i],
+      n && i === E && /* @__PURE__ */ m(
+        K,
+        {
+          scrollStore: a,
+          scrollNode: r,
+          appNode: o,
+          className: d,
+          sdk: t
+        }
+      )
+    ] }),
+    !v && /* @__PURE__ */ m("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
   ] });
 };
 export {
-  Lt as MastersApp
+  Jt as MastersApp
 };

package/lib/ui/app/useMastersApp.js

@@ -9,7 +9,7 @@ import "../icons/index.js";
 import "../navigation/button/styles.js";
 import "../../LeaderBoard_16p26hz-4ed993c7.js";
 import "../../index_4nhkck-4ed993c7.js";
-import "../../masters_k70xsy-4ed993c7.js";
+import "../../masters_1wv7w2k-4ed993c7.js";
 import "../navigation/button/index.js";
 const U = (t) => {
   const a = h(""), [f, l] = d(!1), A = m(t.status), r = m(t.userId()), i = A === "ready", [s, u] = d(n), p = F(

package/lib/ui/app/useSdkScroll.d.ts

@@ -0,0 +1,9 @@
+import { MapStore } from 'nanostores';
+type ScrollData = {
+    scrollPosition: number;
+    tabsShown?: boolean;
+    scrollDirection: 'forward' | 'backward';
+};
+export type ScrollStore = MapStore<ScrollData>;
+export declare const useSdkScroll: () => [React.MutableRefObject<HTMLDivElement | null>, ScrollStore];
+export {};

package/lib/ui/app/useSdkScroll.js

@@ -0,0 +1,93 @@
+import a from "lodash.throttle";
+import { useRef as f, useState as v, useCallback as d, useEffect as p } from "react";
+import { d as m } from "../../index-39a0b9b6.js";
+let h = Symbol("clean"), n = [], b = (i, r) => {
+  let l = [], e = {
+    get() {
+      return e.lc || e.listen(() => {
+      })(), e.value;
+    },
+    l: r || 0,
+    lc: 0,
+    listen(o, s) {
+      return e.lc = l.push(o, s || e.l) / 2, () => {
+        let t = l.indexOf(o);
+        ~t && (l.splice(t, 2), --e.lc || e.off());
+      };
+    },
+    notify(o) {
+      let s = !n.length;
+      for (let t = 0; t < l.length; t += 2)
+        n.push(
+          l[t],
+          l[t + 1],
+          e.value,
+          o
+        );
+      if (s) {
+        for (let t = 0; t < n.length; t += 4) {
+          let c;
+          for (let u = t + 1; !c && (u += 4) < n.length; )
+            n[u] < n[t + 1] && (c = n.push(
+              n[t],
+              n[t + 1],
+              n[t + 2],
+              n[t + 3]
+            ));
+          c || n[t](n[t + 2], n[t + 3]);
+        }
+        n.length = 0;
+      }
+    },
+    off() {
+    },
+    /* It will be called on last listener unsubscribing.
+       We will redefine it in onMount and onStop. */
+    set(o) {
+      e.value !== o && (e.value = o, e.notify());
+    },
+    subscribe(o, s) {
+      let t = e.listen(o, s);
+      return o(e.value), t;
+    },
+    value: i
+  };
+  return m.process.env.NODE_ENV !== "production" && (e[h] = () => {
+    l = [], e.lc = 0, e.off();
+  }), e;
+}, g = (i = {}) => {
+  let r = b(i);
+  return r.setKey = function(l, e) {
+    typeof e > "u" ? l in r.value && (r.value = { ...r.value }, delete r.value[l], r.notify(l)) : r.value[l] !== e && (r.value = {
+      ...r.value,
+      [l]: e
+    }, r.notify(l));
+  }, r;
+};
+const w = () => {
+  const i = f(null), r = f(0), [l] = v(
+    g({
+      scrollPosition: 0,
+      scrollDirection: "forward"
+    })
+  ), e = d(
+    a((o) => {
+      const s = o.target;
+      if (!s)
+        return;
+      const { scrollTop: t } = s, c = r.current < t ? "forward" : "backward";
+      r.current = t, l.set({ scrollPosition: t, scrollDirection: c, tabsShown: l.get().tabsShown });
+    }, 200),
+    []
+  );
+  return p(() => {
+    const o = i.current;
+    return o ? (o.addEventListener("scroll", e), () => {
+      o.removeEventListener("scroll", e);
+    }) : () => {
+    };
+  }, [e]), [i, l];
+};
+export {
+  w as useSdkScroll
+};

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

@@ -8,5 +8,5 @@ type LeaderboardListProps = {
     fetchMore: () => void;
     onScroll?: ListProps['onScroll'];
 };
+export { LeaderboardStaticList } from './static';
 export declare const LeaderboardList: React.FC<LeaderboardListProps>;
-export {};

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

@@ -1,40 +1,43 @@
 import { jsx as o } from "react/jsx-runtime";
-import u from "react-virtualized-auto-sizer";
-import { FixedSizeList as f } from "react-window";
-import I from "react-window-infinite-loader";
-import { LeaderboardItem as L } from "./list-item/index.js";
+import h from "react-virtualized-auto-sizer";
+import { FixedSizeList as u } from "react-window";
+import L from "react-window-infinite-loader";
+import { LeaderboardItem as I } from "./list-item/index.js";
 import { ScrollContainer as c } from "./styles.js";
+import { LeaderboardStaticList as v } from "./static.js";
 import "../../../utils/common.js";
 import "./list-item/styles.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-const F = ({
+import "../../../styles_hxnaic-4ed993c7.js";
+import "react-infinite-scroller";
+const M = ({
   items: r,
   currentUserId: i,
   openItemDetail: m,
-  fetchMore: n,
-  onScroll: p
-}) => /* @__PURE__ */ o(u, { children: ({ width: d, height: l }) => /* @__PURE__ */ o(
-  I,
+  fetchMore: p,
+  onScroll: d
+}) => /* @__PURE__ */ o(h, { children: ({ width: n, height: a }) => /* @__PURE__ */ o(
+  L,
   {
     isItemLoaded: (e) => e < r.length,
     itemCount: r.length + 1,
-    loadMoreItems: n,
-    children: ({ onItemsRendered: e, ref: a }) => /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(
-      f,
+    loadMoreItems: p,
+    children: ({ onItemsRendered: e, ref: l }) => /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(
+      u,
       {
         itemSize: 56,
-        onScroll: p,
+        onScroll: d,
         onItemsRendered: e,
-        ref: a,
+        ref: l,
         itemCount: r.length,
-        width: d,
-        height: l,
-        children: ({ index: t, style: h }) => /* @__PURE__ */ o(
-          L,
+        width: n,
+        height: a,
+        children: ({ index: t, style: f }) => /* @__PURE__ */ o(
+          I,
           {
-            style: { ...h, maxHeight: 48 },
+            style: { ...f, maxHeight: 48 },
             ...r[t],
             openItemDetail: () => m(r[t].userId),
             isCurrentUser: !!i && i === r[t].userId
@@ -46,5 +49,6 @@ const F = ({
   }
 ) });
 export {
-  F as LeaderboardList
+  M as LeaderboardList,
+  v as LeaderboardStaticList
 };

package/lib/ui/gamification/leaderboard/static.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ScrollStore } from '../../app/useSdkScroll';
+import { LeaderboardItemProps } from '../../gamification/leaderboard/list-item';
+type LeaderboardListProps = {
+    items: Omit<LeaderboardItemProps, 'openItemDetail'>[];
+    currentUserId?: string;
+    openItemDetail: (id: string) => void;
+    fetchMore: () => void;
+    scrollNode: React.MutableRefObject<HTMLDivElement | null>;
+    scrollStore: ScrollStore;
+    hasMore: boolean;
+};
+export declare const LeaderboardStaticList: React.FC<LeaderboardListProps>;
+export {};

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

@@ -0,0 +1,36 @@
+import { jsx as o } from "react/jsx-runtime";
+import { styled as l } from "@linaria/react";
+import p from "react-infinite-scroller";
+import { LeaderboardItem as d } from "./list-item/index.js";
+import "../../../utils/common.js";
+import "./list-item/styles.js";
+import "../../icons/index.js";
+import "react";
+const m = /* @__PURE__ */ l("div")({
+  name: "Container",
+  class: "c16btbfp",
+  propsAsIs: !1
+}), h = ({
+  items: e,
+  currentUserId: t,
+  openItemDetail: i,
+  fetchMore: s,
+  scrollNode: a,
+  hasMore: n
+}) => /* @__PURE__ */ o(p, {
+  loadMore: s,
+  initialLoad: !1,
+  hasMore: n,
+  useWindow: !1,
+  getScrollParent: () => a.current,
+  children: /* @__PURE__ */ o(m, {
+    children: e.map((r) => /* @__PURE__ */ o(d, {
+      ...r,
+      openItemDetail: () => i(r.userId),
+      isCurrentUser: !!t && t === r.userId
+    }, r.userId))
+  })
+});
+export {
+  h as LeaderboardStaticList
+};

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

@@ -1,5 +1,6 @@
-import { styled as s } from "@linaria/react";
-const l = /* @__PURE__ */ s("div")({
+import { styled as o } from "@linaria/react";
+import "../../../styles_hxnaic-4ed993c7.js";
+const l = /* @__PURE__ */ o("div")({
   name: "ScrollContainer",
   class: "s13d8sg6",
   propsAsIs: !1

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

@@ -2,6 +2,8 @@
 type PillProps = {
     title?: string;
     onClick: () => void;
+    className?: string;
+    style?: React.CSSProperties;
 };
 export declare const Pill: React.FC<PillProps>;
 export {};

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

@@ -1,12 +1,12 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { SvgIcon as t } from "../../../../icons/index.js";
-import { Container as m, Content as e, Title as p } from "./styles.js";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { SvgIcon as e } from "../../../../icons/index.js";
+import { Container as p, Content as c, Title as l } from "./styles.js";
 import "@linaria/react";
 import "react";
-const h = ({ title: o, onClick: n }) => /* @__PURE__ */ r(m, { onClick: n, children: /* @__PURE__ */ i(e, { children: [
-  /* @__PURE__ */ r(t, { name: "iconUp" }),
-  o && /* @__PURE__ */ r(p, { children: o })
+const a = ({ title: o, onClick: n, className: i, style: t }) => /* @__PURE__ */ r(p, { onClick: n, className: i, style: t, children: /* @__PURE__ */ m(c, { children: [
+  /* @__PURE__ */ r(e, { name: "iconUp" }),
+  o && /* @__PURE__ */ r(l, { children: o })
 ] }) });
 export {
-  h as Pill
+  a as Pill
 };

package/lib/ui/gamification/question/notification/prediction-result/index.d.ts

@@ -4,5 +4,5 @@ export declare const PredictionResult: React.FC<NotificationData['question'] & {
     close?: () => void;
     saveHeight: (h: number) => void;
     style: React.CSSProperties;
-    hiding: boolean;
+    hiding?: boolean;
 }>;