@streamlayer/react-ui 0.98.1 → 0.100.0

package/lib/ui/app/useSdkScroll.js

@@ -1,46 +1,48 @@
-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-z0QjLiEL.js";
-import "../../index-uEuzH3jr.js";
-const C = (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
   });
-}, D = (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 {
   C as scrollIntoAppView,

package/lib/ui/button/index.js

@@ -1,7 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
-import { SButton as m, ButtonLabel as p } from "./styles.js";
-import "@linaria/react";
-const c = ({ disabled: r, variant: o = "primary", onClick: n, children: a, ...i }) => /* @__PURE__ */ t(m, { onClick: n, disabled: r, "data-variant": o, ...i, children: /* @__PURE__ */ t(p, { children: a }) });
+import { SButton as m, ButtonLabel as e } from "./styles.js";
+const B = ({ disabled: r, variant: o = "primary", onClick: n, children: a, ...i }) => /* @__PURE__ */ t(m, { onClick: n, disabled: r, "data-variant": o, ...i, children: /* @__PURE__ */ t(e, { children: a }) });
 export {
-  c as Button
+  B as Button
 };

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

@@ -1,12 +1,10 @@
 import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { SvgIcon as r } from "../../icons/index.js";
-import { Container as t, Content as n, Title as e } from "./styles.js";
-import "@linaria/react";
-import "react";
-const d = () => /* @__PURE__ */ o(t, { children: /* @__PURE__ */ i(n, { children: [
-  /* @__PURE__ */ o(r, { name: "iconCopySuccess" }),
+import { SvgIcon as n } from "../../icons/index.js";
+import { Container as r, Content as t, Title as e } from "./styles.js";
+const s = () => /* @__PURE__ */ o(r, { children: /* @__PURE__ */ i(t, { children: [
+  /* @__PURE__ */ o(n, { name: "iconCopySuccess" }),
   /* @__PURE__ */ o(e, { children: "Link Copied to Clipboard" })
 ] }) });
 export {
-  d as CopyNotification
+  s as CopyNotification
 };

package/lib/ui/gamification/detail/header/index.js

@@ -1,27 +1,24 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { QuestionType as n } from "@streamlayer/sdk-web-types";
-import { QuestionTypeData as c } from "../../constants.js";
-import { Container as l, QuestionTypeWrap as a, QuestionTypeIcon as p, QuestionTypeTitle as s, CloseIconWrap as d, CloseIcon as I } from "./styles.js";
-import "@linaria/react";
-import "../../../icons/index.js";
-import "react";
-const N = ({ type: r, close: m, label: t }) => {
-  const o = r ? c[r] : { label: t, iconName: void 0 };
-  return /* @__PURE__ */ i(l, { children: [
-    /* @__PURE__ */ i(a, { children: [
-      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ e(
-        p,
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { QuestionType as i } from "@streamlayer/sdk-web-types";
+import { QuestionTypeData as m } from "../../constants.js";
+import { Container as t, QuestionTypeWrap as a, QuestionTypeIcon as s, QuestionTypeTitle as p, CloseIconWrap as d, CloseIcon as I } from "./styles.js";
+const T = ({ type: e, close: c, label: l }) => {
+  const o = e ? m[e] : { label: l, iconName: void 0 };
+  return /* @__PURE__ */ r(t, { children: [
+    /* @__PURE__ */ r(a, { children: [
+      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ n(
+        s,
         {
-          "data-type-trivia": r === n.TRIVIA,
-          "data-type-poll": r === n.POLL,
+          "data-type-trivia": e === i.TRIVIA,
+          "data-type-poll": e === i.POLL,
           name: o.iconName
         }
       ),
-      (o == null ? void 0 : o.label) && /* @__PURE__ */ e(s, { children: o.label })
+      (o == null ? void 0 : o.label) && /* @__PURE__ */ n(p, { children: o.label })
     ] }),
-    /* @__PURE__ */ e(d, { onClick: m, children: /* @__PURE__ */ e(I, { name: "icon-cross" }) })
+    /* @__PURE__ */ n(d, { onClick: c, children: /* @__PURE__ */ n(I, { name: "icon-cross" }) })
   ] });
 };
 export {
-  N as VoteHeader
+  T as VoteHeader
 };

package/lib/ui/gamification/detail/header/styles.js

@@ -1,37 +1,35 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as o } from "../../../icons/index.js";
-import "react/jsx-runtime";
-import "react";
-const r = /* @__PURE__ */ s("div")({
+const c = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1vwopgc",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
+}), a = /* @__PURE__ */ s("div")({
   name: "QuestionTypeWrap",
   class: "qyktpt0",
   propsAsIs: !1
-}), e = () => o, i = /* @__PURE__ */ s(e())({
+}), e = () => o, l = /* @__PURE__ */ s(e())({
   name: "QuestionTypeIcon",
   class: "q951jdx",
   propsAsIs: !0
-}), I = /* @__PURE__ */ s("span")({
+}), r = /* @__PURE__ */ s("span")({
   name: "QuestionTypeTitle",
   class: "qss5f0e",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "CloseIconWrap",
   class: "c1ao1jtv",
   propsAsIs: !1
-}), n = () => o, u = /* @__PURE__ */ s(n())({
+}), n = () => o, I = /* @__PURE__ */ s(n())({
   name: "CloseIcon",
   class: "cvsl7l3",
   propsAsIs: !0
 });
 export {
-  u as CloseIcon,
-  m as CloseIconWrap,
-  r as Container,
-  i as QuestionTypeIcon,
-  I as QuestionTypeTitle,
-  l as QuestionTypeWrap
+  I as CloseIcon,
+  i as CloseIconWrap,
+  c as Container,
+  l as QuestionTypeIcon,
+  r as QuestionTypeTitle,
+  a as QuestionTypeWrap
 };

package/lib/ui/gamification/detail/sponsor/index.js

@@ -1,7 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { styled as s } from "@linaria/react";
 import { SvgIcon as r } from "../../../icons/index.js";
-import "react";
 const p = /* @__PURE__ */ s("div")({
   name: "SponsorLogoWrap",
   class: "s8p5v5z",
@@ -10,11 +9,11 @@ const p = /* @__PURE__ */ s("div")({
   name: "SponsorLogo",
   class: "s755yti",
   propsAsIs: !0
-}), i = () => /* @__PURE__ */ o(p, {
+}), c = () => /* @__PURE__ */ o(p, {
   children: /* @__PURE__ */ o(t, {
     name: "mastersLogo"
   })
 });
 export {
-  i as Sponsor
+  c as Sponsor
 };

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

@@ -1,8 +1,7 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import { QuestionImages as c } from "@streamlayer/sdk-web-types";
 import { Container as h, Graphic as l, Content as C, Title as g, NextIcon as a, InsightIconDefault as I, InsightIconAbsolute as d, InsightIconCircle as u } from "./styles.js";
-import "@linaria/react";
-const m = "data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Chevron'%3e%3cpath%20id='Chevron_2'%20d='M12%208.17222C12%208.28783%2011.9781%208.39553%2011.9342%208.49533C11.8903%208.59513%2011.822%208.68992%2011.7292%208.7797L6.36949%2013.9439C6.21462%2014.0965%206.02742%2014.1729%205.80787%2014.1729C5.65752%2014.1729%205.52191%2014.1379%205.40104%2014.0679C5.28016%2013.998%205.1831%2013.9039%205.10986%2013.7856C5.03662%2013.6673%205%2013.5345%205%2013.3873C5%2013.1721%205.08288%2012.9818%205.24863%2012.8164L10.0807%208.17095L5.24863%203.52799C5.08288%203.36425%205%203.17439%205%202.95841C5%202.81118%205.03662%202.67842%205.10986%202.56013C5.1831%202.44183%205.28016%202.34771%205.40104%202.27777C5.52191%202.20782%205.65752%202.17285%205.80787%202.17285C6.02742%202.17285%206.21462%202.24731%206.36949%202.39624L11.7292%207.56473C11.8211%207.65451%2011.889%207.74909%2011.9329%207.84846C11.9768%207.94784%2011.9991%208.05576%2012%208.17222Z'%20fill='%23FFFFFF'/%3e%3c/g%3e%3c/svg%3e", p = (i, n) => {
+const v = "data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Chevron'%3e%3cpath%20id='Chevron_2'%20d='M12%208.17222C12%208.28783%2011.9781%208.39553%2011.9342%208.49533C11.8903%208.59513%2011.822%208.68992%2011.7292%208.7797L6.36949%2013.9439C6.21462%2014.0965%206.02742%2014.1729%205.80787%2014.1729C5.65752%2014.1729%205.52191%2014.1379%205.40104%2014.0679C5.28016%2013.998%205.1831%2013.9039%205.10986%2013.7856C5.03662%2013.6673%205%2013.5345%205%2013.3873C5%2013.1721%205.08288%2012.9818%205.24863%2012.8164L10.0807%208.17095L5.24863%203.52799C5.08288%203.36425%205%203.17439%205%202.95841C5%202.81118%205.03662%202.67842%205.10986%202.56013C5.1831%202.44183%205.28016%202.34771%205.40104%202.27777C5.52191%202.20782%205.65752%202.17285%205.80787%202.17285C6.02742%202.17285%206.21462%202.24731%206.36949%202.39624L11.7292%207.56473C11.8211%207.65451%2011.889%207.74909%2011.9329%207.84846C11.9768%207.94784%2011.9991%208.05576%2012%208.17222Z'%20fill='%23FFFFFF'/%3e%3c/g%3e%3c/svg%3e", x = (i, n) => {
   switch (i) {
     case c.ROUNDED:
       return /* @__PURE__ */ t(u, { alt: "insight-icon", src: n });
@@ -13,13 +12,13 @@ const m = "data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200
     default:
       return null;
   }
-}, F = ({ title: i, image: n, questionId: r, imageMode: o, openInsight: s }) => /* @__PURE__ */ e(h, { onClick: () => s(r), children: [
-  /* @__PURE__ */ t(l, { children: n && p(o, n) }),
+}, w = ({ title: i, image: n, questionId: r, imageMode: o, openInsight: s }) => /* @__PURE__ */ e(h, { onClick: () => s(r), children: [
+  /* @__PURE__ */ t(l, { children: n && x(o, n) }),
   /* @__PURE__ */ e(C, { children: [
     /* @__PURE__ */ t(g, { children: i || "" }),
-    /* @__PURE__ */ t(a, { alt: "next-icon", src: m })
+    /* @__PURE__ */ t(a, { alt: "next-icon", src: v })
   ] })
 ] });
 export {
-  F as Insight
+  w as Insight
 };

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

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

package/lib/ui/gamification/invite-link/index.js

@@ -1,30 +1,24 @@
-import { jsxs as C, jsx as i } from "react/jsx-runtime";
+import { jsxs as i, jsx as C } from "react/jsx-runtime";
 import { useAnalyticsHandle as c } from "../../../hooks/analytics.js";
 import { InvitationFrom as l } from "@streamlayer/sdk-web-types";
-import { Container as m, FriendsIcon as s, Content as p, Title as a, Description as d, ArrowInviteIcon as h } from "./styles.js";
-import "lodash.throttle";
-import "react";
-import "@streamlayer/sdk-web-interfaces";
-import "../../theme/constants.js";
-import "@linaria/react";
-import "../../icons/index.js";
-const f = "data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='32'%20height='32'%20rx='16'%20fill='white'/%3e%3cpath%20d='M10.4615%2012.6875C9.44231%2012.6875%208.61538%2013.4665%208.61538%2014.4266C8.61538%2015.3868%209.44231%2016.1658%2010.4615%2016.1658C11.4808%2016.1658%2012.3077%2015.3868%2012.3077%2014.4266C12.3077%2013.4665%2011.4808%2012.6875%2010.4615%2012.6875ZM10.4615%2016.1658C9.10817%2016.1658%208%2017.2097%208%2018.4846V19.7527C8%2019.7527%208.61538%2020.2237%2010.4615%2020.2237C12.3077%2020.2237%2012.9231%2019.7527%2012.9231%2019.7527V18.4846C12.9231%2017.2097%2011.8149%2016.1658%2010.4615%2016.1658ZM21.5385%2012.6875C20.5192%2012.6875%2019.6923%2013.4665%2019.6923%2014.4266C19.6923%2015.3868%2020.5192%2016.1658%2021.5385%2016.1658C22.5577%2016.1658%2023.3846%2015.3868%2023.3846%2014.4266C23.3846%2013.4665%2022.5577%2012.6875%2021.5385%2012.6875ZM21.5385%2016.1658C20.1851%2016.1658%2019.0769%2017.2097%2019.0769%2018.4846V19.7527C19.0769%2019.7527%2019.6923%2020.2237%2021.5385%2020.2237C23.3846%2020.2237%2024%2019.7527%2024%2019.7527V18.4846C24%2017.2097%2022.8918%2016.1658%2021.5385%2016.1658ZM16%2015.0063C14.9808%2015.0063%2014.1538%2015.7853%2014.1538%2016.7455C14.1538%2017.7056%2014.9808%2018.4846%2016%2018.4846C17.0192%2018.4846%2017.8462%2017.7056%2017.8462%2016.7455C17.8462%2015.7853%2017.0192%2015.0063%2016%2015.0063ZM16%2018.4846C14.6466%2018.4846%2013.5385%2019.5285%2013.5385%2020.8034V22.0715C13.5385%2022.0715%2014.1538%2022.5425%2016%2022.5425C17.8462%2022.5425%2018.4615%2022.0715%2018.4615%2022.0715V20.8034C18.4615%2019.5285%2017.3534%2018.4846%2016%2018.4846Z'%20fill='%23107D57'/%3e%3cpath%20opacity='0.5'%20d='M13.3908%209C12.3103%209%2011.4336%209.82584%2011.4336%2010.8437C11.4336%2011.8616%2012.3103%2012.6875%2013.3908%2012.6875C14.4713%2012.6875%2015.348%2011.8616%2015.348%2010.8437C15.348%209.82584%2014.4713%209%2013.3908%209ZM13.3908%2012.6875C13.1946%2012.6875%2012.9958%2012.6827%2012.7996%2012.7451C13.192%2013.2372%2013.3908%2013.8542%2013.3908%2014.5312C13.3908%2014.7761%2013.3296%2015.0161%2013.3296%2015.261C13.8521%2014.524%2014.6956%2014.0391%2015.6742%2013.9166C15.218%2013.1796%2014.3694%2012.6875%2013.3908%2012.6875ZM18.61%209C17.5295%209%2016.6528%209.82584%2016.6528%2010.8437C16.6528%2011.8616%2017.5295%2012.6875%2018.61%2012.6875C19.6905%2012.6875%2020.5672%2011.8616%2020.5672%2010.8437C20.5672%209.82584%2019.6905%209%2018.61%209ZM18.61%2012.6875C17.6314%2012.6875%2016.7828%2013.1796%2016.3266%2013.9166C17.3052%2014.0391%2018.1487%2014.524%2018.6712%2015.261C18.6712%2015.0161%2018.61%2014.7761%2018.61%2014.5312C18.61%2013.8542%2018.8088%2013.2372%2019.2012%2012.7451C19.005%2012.6827%2018.8062%2012.6875%2018.61%2012.6875Z'%20fill='%23107D57'/%3e%3c/svg%3e", D = ({ title: t, description: n, onClick: o, className: r }) => {
-  const [e] = c({
+import { Container as s, FriendsIcon as a, Content as d, Title as h, Description as m, ArrowInviteIcon as p } from "./styles.js";
+const f = "data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='32'%20height='32'%20rx='16'%20fill='white'/%3e%3cpath%20d='M10.4615%2012.6875C9.44231%2012.6875%208.61538%2013.4665%208.61538%2014.4266C8.61538%2015.3868%209.44231%2016.1658%2010.4615%2016.1658C11.4808%2016.1658%2012.3077%2015.3868%2012.3077%2014.4266C12.3077%2013.4665%2011.4808%2012.6875%2010.4615%2012.6875ZM10.4615%2016.1658C9.10817%2016.1658%208%2017.2097%208%2018.4846V19.7527C8%2019.7527%208.61538%2020.2237%2010.4615%2020.2237C12.3077%2020.2237%2012.9231%2019.7527%2012.9231%2019.7527V18.4846C12.9231%2017.2097%2011.8149%2016.1658%2010.4615%2016.1658ZM21.5385%2012.6875C20.5192%2012.6875%2019.6923%2013.4665%2019.6923%2014.4266C19.6923%2015.3868%2020.5192%2016.1658%2021.5385%2016.1658C22.5577%2016.1658%2023.3846%2015.3868%2023.3846%2014.4266C23.3846%2013.4665%2022.5577%2012.6875%2021.5385%2012.6875ZM21.5385%2016.1658C20.1851%2016.1658%2019.0769%2017.2097%2019.0769%2018.4846V19.7527C19.0769%2019.7527%2019.6923%2020.2237%2021.5385%2020.2237C23.3846%2020.2237%2024%2019.7527%2024%2019.7527V18.4846C24%2017.2097%2022.8918%2016.1658%2021.5385%2016.1658ZM16%2015.0063C14.9808%2015.0063%2014.1538%2015.7853%2014.1538%2016.7455C14.1538%2017.7056%2014.9808%2018.4846%2016%2018.4846C17.0192%2018.4846%2017.8462%2017.7056%2017.8462%2016.7455C17.8462%2015.7853%2017.0192%2015.0063%2016%2015.0063ZM16%2018.4846C14.6466%2018.4846%2013.5385%2019.5285%2013.5385%2020.8034V22.0715C13.5385%2022.0715%2014.1538%2022.5425%2016%2022.5425C17.8462%2022.5425%2018.4615%2022.0715%2018.4615%2022.0715V20.8034C18.4615%2019.5285%2017.3534%2018.4846%2016%2018.4846Z'%20fill='%23107D57'/%3e%3cpath%20opacity='0.5'%20d='M13.3908%209C12.3103%209%2011.4336%209.82584%2011.4336%2010.8437C11.4336%2011.8616%2012.3103%2012.6875%2013.3908%2012.6875C14.4713%2012.6875%2015.348%2011.8616%2015.348%2010.8437C15.348%209.82584%2014.4713%209%2013.3908%209ZM13.3908%2012.6875C13.1946%2012.6875%2012.9958%2012.6827%2012.7996%2012.7451C13.192%2013.2372%2013.3908%2013.8542%2013.3908%2014.5312C13.3908%2014.7761%2013.3296%2015.0161%2013.3296%2015.261C13.8521%2014.524%2014.6956%2014.0391%2015.6742%2013.9166C15.218%2013.1796%2014.3694%2012.6875%2013.3908%2012.6875ZM18.61%209C17.5295%209%2016.6528%209.82584%2016.6528%2010.8437C16.6528%2011.8616%2017.5295%2012.6875%2018.61%2012.6875C19.6905%2012.6875%2020.5672%2011.8616%2020.5672%2010.8437C20.5672%209.82584%2019.6905%209%2018.61%209ZM18.61%2012.6875C17.6314%2012.6875%2016.7828%2013.1796%2016.3266%2013.9166C17.3052%2014.0391%2018.1487%2014.524%2018.6712%2015.261C18.6712%2015.0161%2018.61%2014.7761%2018.61%2014.5312C18.61%2013.8542%2018.8088%2013.2372%2019.2012%2012.7451C19.005%2012.6827%2018.8062%2012.6875%2018.61%2012.6875Z'%20fill='%23107D57'/%3e%3c/svg%3e", g = ({ title: n, description: t, onClick: e, className: o }) => {
+  const [r] = c({
     type: "invitation",
     action: "sent",
     payload: {
       from: l.TITLE_CARD
     }
   });
-  return /* @__PURE__ */ C(m, { onClick: e(o), className: r, children: [
-    /* @__PURE__ */ i(s, { alt: "friends-icon", src: f }),
-    /* @__PURE__ */ C(p, { children: [
-      /* @__PURE__ */ i(a, { children: t }),
-      /* @__PURE__ */ i(d, { children: n })
+  return /* @__PURE__ */ i(s, { onClick: r(e), className: o, children: [
+    /* @__PURE__ */ C(a, { alt: "friends-icon", src: f }),
+    /* @__PURE__ */ i(d, { children: [
+      /* @__PURE__ */ C(h, { children: n }),
+      /* @__PURE__ */ C(m, { children: t })
     ] }),
-    /* @__PURE__ */ i(h, { name: "icon-copy" })
+    /* @__PURE__ */ C(p, { name: "icon-copy" })
   ] });
 };
 export {
-  D as InviteLink
+  g as InviteLink
 };

package/lib/ui/gamification/invite-link/styles.js

@@ -1,37 +1,35 @@
 import { styled as s } from "@linaria/react";
-import { SvgIcon as o } from "../../icons/index.js";
-import "react/jsx-runtime";
-import "react";
-const a = /* @__PURE__ */ s("div")({
+import { SvgIcon as n } from "../../icons/index.js";
+const c = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1ux29ft",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("img")({
+}), r = /* @__PURE__ */ s("img")({
   name: "FriendsIcon",
   class: "f10ncfg2",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), a = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c1yc07bd",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "Title",
   class: "tj6cq7w",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "Description",
   class: "d1ag78xo",
   propsAsIs: !1
-}), n = () => o, I = /* @__PURE__ */ s(n())({
+}), o = () => n, l = /* @__PURE__ */ s(o())({
   name: "ArrowInviteIcon",
   class: "awohrz6",
   propsAsIs: !0
 });
 export {
-  I as ArrowInviteIcon,
-  a as Container,
-  p as Content,
-  m as Description,
-  i as FriendsIcon,
-  l as Title
+  l as ArrowInviteIcon,
+  c as Container,
+  a as Content,
+  p as Description,
+  r as FriendsIcon,
+  i as Title
 };

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

@@ -1,54 +1,47 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 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";
-import "../../../styles_z07sl8-w40geAFS.js";
-import "react-infinite-scroller";
-const M = ({
+import { LeaderboardStaticList as A } from "./static.js";
+const x = ({
   items: r,
   currentUserId: i,
   openItemDetail: m,
-  fetchMore: p,
-  onScroll: d
-}) => /* @__PURE__ */ o(h, { children: ({ width: n, height: a }) => /* @__PURE__ */ o(
+  fetchMore: d,
+  onScroll: n
+}) => /* @__PURE__ */ e(h, { children: ({ width: a, height: l }) => /* @__PURE__ */ e(
   L,
   {
-    isItemLoaded: (e) => e < r.length,
+    isItemLoaded: (t) => t < r.length,
     itemCount: r.length + 1,
-    loadMoreItems: p,
-    children: ({ onItemsRendered: e, ref: l }) => /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(
+    loadMoreItems: d,
+    children: ({ onItemsRendered: t, ref: p }) => /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
       u,
       {
         itemSize: 56,
-        onScroll: d,
-        onItemsRendered: e,
-        ref: l,
+        onScroll: n,
+        onItemsRendered: t,
+        ref: p,
         itemCount: r.length,
-        width: n,
-        height: a,
-        children: ({ index: t, style: f }) => /* @__PURE__ */ o(
+        width: a,
+        height: l,
+        children: ({ index: o, style: f }) => /* @__PURE__ */ e(
           I,
           {
             style: { ...f, maxHeight: 48 },
-            ...r[t],
-            openItemDetail: () => m(r[t].userId),
-            isCurrentUser: !!i && i === r[t].userId
+            ...r[o],
+            openItemDetail: () => m(r[o].userId),
+            isCurrentUser: !!i && i === r[o].userId
           },
-          r[t].userId
+          r[o].userId
         )
       }
     ) })
   }
 ) });
 export {
-  M as LeaderboardList,
-  v as LeaderboardStaticList
+  x as LeaderboardList,
+  A as LeaderboardStaticList
 };

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

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

@@ -1,47 +1,45 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as a } from "../../../icons/index.js";
-import "react/jsx-runtime";
-import "react";
-const c = /* @__PURE__ */ s("div")({
+const r = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "culdu4a",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "Position",
   class: "pwf8e69",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("img")({
+}), c = /* @__PURE__ */ s("img")({
   name: "Avatar",
   class: "atf4yh4",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "AvatarPlaceholder",
   class: "a1dg29ja",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c10a68rc",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ s("div")({
   name: "NameContainer",
   class: "nc4kck5",
   propsAsIs: !1
-}), A = /* @__PURE__ */ s("span")({
+}), i = /* @__PURE__ */ s("span")({
   name: "Name",
   class: "njsrqgr",
   propsAsIs: !1
-}), e = () => a, f = /* @__PURE__ */ s(e())({
+}), e = () => a, d = /* @__PURE__ */ s(e())({
   name: "CurrentUserBadge",
   class: "c17uc4zr",
   propsAsIs: !0
 });
 export {
-  l as Avatar,
-  m as AvatarPlaceholder,
-  c as Container,
-  i as Content,
-  f as CurrentUserBadge,
-  A as Name,
-  d as NameContainer,
-  p as Position
+  c as Avatar,
+  p as AvatarPlaceholder,
+  r as Container,
+  l as Content,
+  d as CurrentUserBadge,
+  i as Name,
+  m as NameContainer,
+  t as Position
 };