@streamlayer/web-os 0.4.3 → 0.4.4

package/lib/classic/es/gamification-feature.js

@@ -1,4 +1,640 @@
-import { F } from "./index2.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { A as A$2, s as styled_default, i as i$5, I as I$4, e as s$3, B as B1, f as f$2, j as InvitationFrom, c as useStore, k as r$5, l as S$1, O, m as b$2, R as R$1, D, w as wt, p as p$6, n as useTransition, o as l$6, q as cx_default, t as S$2, v as m$6, x as d$3, y as n$4, C as C$2 } from "./index2.js";
+import "@noriginmedia/norigin-spatial-navigation";
+import { useRef, useState, useCallback, useEffect } from "react";
+import "react-countdown-circle-timer";
+import { createPortal } from "react-dom";
+import "react-countup";
+import "nanostores";
+import "lodash.throttle";
+import m$5 from "react-infinite-scroller";
+const I$3 = (o2, e2, n2) => {
+  const t2 = e2 >= A$2.lg && e2 < A$2.xl ? 75 : 52;
+  o2.current && window.scrollTo({
+    top: o2.current.offsetTop - t2,
+    ...n2
+  });
+};
+const n$3 = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c1zy8a",
+  propsAsIs: false
+}), o$5 = /* @__PURE__ */ styled_default("div")({
+  name: "Title",
+  class: "t1vih9p5",
+  propsAsIs: false
+}), t$4 = /* @__PURE__ */ styled_default("div")({
+  name: "Indicator",
+  class: "i1fbnvpb",
+  propsAsIs: false
+});
+const m$4 = ({ indicator: i2, title: n2 }) => /* @__PURE__ */ jsxs(n$3, { children: [
+  /* @__PURE__ */ jsx(o$5, { children: n2 }),
+  /* @__PURE__ */ jsx(t$4, { children: i2 })
+] });
+const t$3 = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "ctmhwyc",
+  propsAsIs: false
+}), a$5 = /* @__PURE__ */ styled_default("div")({
+  name: "Indicator",
+  class: "i1jri200",
+  propsAsIs: false
+}), e$8 = /* @__PURE__ */ styled_default("div")({
+  name: "Title",
+  class: "t8s05oq",
+  propsAsIs: false
+});
+const l$5 = ({ indicator: r2, title: t2 }) => /* @__PURE__ */ jsxs(t$3, { children: [
+  /* @__PURE__ */ jsx(a$5, { children: r2 }),
+  /* @__PURE__ */ jsx(e$8, { children: t2 })
+] });
+const o$4 = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c1yrpn9o",
+  propsAsIs: false
+}), n$2 = /* @__PURE__ */ styled_default("div")({
+  name: "TopInfo",
+  class: "t17fwahh",
+  propsAsIs: false
+}), e$7 = /* @__PURE__ */ styled_default("div")({
+  name: "BottomInfo",
+  class: "by6w7e9",
+  propsAsIs: false
+}), t$2 = /* @__PURE__ */ styled_default("div")({
+  name: "User",
+  class: "u1g7arbm",
+  propsAsIs: false
+}), r$4 = /* @__PURE__ */ styled_default("img")({
+  name: "Avatar",
+  class: "a1ldeata",
+  propsAsIs: false
+}), c$4 = /* @__PURE__ */ styled_default("div")({
+  name: "UserInfo",
+  class: "u10d4koz",
+  propsAsIs: false
+}), l$4 = /* @__PURE__ */ styled_default("div")({
+  name: "UserName",
+  class: "u1q6roj0",
+  propsAsIs: false
+}), p$5 = /* @__PURE__ */ styled_default("div")({
+  name: "UserRating",
+  class: "ui0m425",
+  propsAsIs: false
+}), i$4 = /* @__PURE__ */ styled_default("img")({
+  name: "TrophyIcon",
+  class: "t1el3mrn",
+  propsAsIs: false
+}), m$3 = /* @__PURE__ */ styled_default("div")({
+  name: "RtsContainer",
+  class: "r2vgnxv",
+  propsAsIs: false
+}), d$2 = /* @__PURE__ */ styled_default("div")({
+  name: "RtsDivider",
+  class: "roqn06j",
+  propsAsIs: false
+}), f$1 = /* @__PURE__ */ styled_default("div")({
+  name: "Rts",
+  class: "r15adx7c",
+  propsAsIs: false
+}), I$2 = /* @__PURE__ */ styled_default("div")({
+  name: "RtsIndicator",
+  class: "rv59lta",
+  propsAsIs: false
+}), v$1 = /* @__PURE__ */ styled_default("div")({
+  name: "RtsLabel",
+  class: "r55lotb",
+  propsAsIs: false
+}), A$1 = /* @__PURE__ */ styled_default("div")({
+  name: "Divider",
+  class: "d1knfgqt",
+  propsAsIs: false
+}), R = /* @__PURE__ */ styled_default("div")({
+  name: "Ranks",
+  class: "r1mqo824",
+  propsAsIs: false
+}), U = /* @__PURE__ */ styled_default("div")({
+  name: "Statistics",
+  class: "sxareh6",
+  propsAsIs: false
+}), u$1 = /* @__PURE__ */ styled_default("div")({
+  name: "AvatarPlaceholder",
+  class: "amcu48h",
+  propsAsIs: false
+}), h = /* @__PURE__ */ styled_default("button")({
+  name: "UserAccountBtn",
+  class: "u32nfkp",
+  propsAsIs: false
+});
+const F = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Trophy'%3e%3cpath%20id='Combined%20Shape'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3.69197%204.66662C3.69197%205.99705%203.92914%207.17787%204.4035%208.20912C3.49966%208.02451%202.74487%207.66486%202.1391%207.13014C1.53333%206.59542%201.23046%206.0798%201.23046%205.58328V4.66662H3.69197ZM14.7686%204.66662V5.58328C14.7686%206.0798%2014.4658%206.59542%2013.86%207.13014C13.2542%207.66486%2012.4994%208.02451%2011.5956%208.20912C12.0699%207.17787%2012.3071%205.99705%2012.3071%204.66662H14.7686ZM15.9998%205.58329V4.36108C15.9998%204.10645%2015.9101%203.89002%2015.7306%203.71178C15.5511%203.53354%2015.3332%203.44442%2015.0768%203.44442H12.3076V2.52776C12.3076%202.10763%2012.1569%201.74797%2011.8556%201.44878C11.5544%201.14959%2011.1922%201%2010.7691%201H5.23072C4.80764%201%204.44547%201.14959%204.14419%201.44878C3.84291%201.74797%203.69227%202.10763%203.69227%202.52776V3.44442H0.923068C0.666659%203.44442%200.448714%203.53354%200.269228%203.71178C0.0897418%203.89002%200%204.10645%200%204.36108V5.58329C0%206.03525%200.13301%206.49039%200.399034%206.94872C0.665059%207.40705%201.02403%207.82082%201.47595%208.19003C1.92787%208.55924%202.48234%208.86957%203.13939%209.12101C3.79644%209.37246%204.48713%209.51409%205.21149%209.54592C5.48071%209.88967%205.7852%2010.192%206.12494%2010.453C6.36853%2010.6695%206.53679%2010.9002%206.62974%2011.1453C6.72269%2011.3904%206.76916%2011.6752%206.76916%2011.9999C6.76916%2012.3436%206.67141%2012.6333%206.4759%2012.8688C6.28038%2013.1043%205.96789%2013.2221%205.53841%2013.2221C5.05764%2013.2221%204.62976%2013.3669%204.25476%2013.6566C3.87977%2013.9462%203.69227%2014.3106%203.69227%2014.7499V15.361C3.69227%2015.4501%203.72112%2015.5233%203.77881%2015.5806C3.8365%2015.6379%203.91022%2015.6665%203.99996%2015.6665H11.9999C12.0896%2015.6665%2012.1633%2015.6379%2012.221%2015.5806C12.2787%2015.5233%2012.3076%2015.4501%2012.3076%2015.361V14.7499C12.3076%2014.3106%2012.1201%2013.9462%2011.7451%2013.6566C11.3701%2013.3669%2010.9422%2013.2221%2010.4614%2013.2221C10.0319%2013.2221%209.71945%2013.1043%209.52394%2012.8688C9.32843%2012.6333%209.23068%2012.3436%209.23068%2011.9999C9.23068%2011.6752%209.27715%2011.3904%209.3701%2011.1453C9.46305%2010.9002%209.63131%2010.6695%209.8749%2010.453C10.2146%2010.192%2010.5191%209.88967%2010.7884%209.54592C11.5127%209.51409%2012.2034%209.37246%2012.8604%209.12101C13.5175%208.86957%2014.072%208.55924%2014.5239%208.19003C14.9758%207.82082%2015.3348%207.40705%2015.6008%206.94872C15.8668%206.49039%2015.9998%206.03525%2015.9998%205.58329ZM6.76047%207.1798L8.05109%206.49997L9.3417%207.1798L9.09521%205.73989L10.1393%204.72015L8.69639%204.51007L8.05109%203.2L7.40578%204.51007L5.96283%204.72015L7.00696%205.73989L6.76047%207.1798Z'%20fill='%23F2C94C'/%3e%3c/g%3e%3c/svg%3e", z$1 = ({
+  loading: t2,
+  hideFriendsRank: n2,
+  avatar: l2,
+  name: o2,
+  points: s2,
+  friendsRank: m2,
+  rank: C2,
+  streak: p2,
+  correct: f2,
+  incorrect: v2,
+  inTop: L,
+  successRate: g2
+}) => /* @__PURE__ */ jsxs(o$4, { "data-loading": t2, children: [
+  /* @__PURE__ */ jsx(n$2, { children: /* @__PURE__ */ jsx(i$5, { loading: t2, children: /* @__PURE__ */ jsxs(t$2, { children: [
+    /* @__PURE__ */ jsxs(h, { children: [
+      l2 && /* @__PURE__ */ jsx(r$4, { alt: "avatar", src: l2 }),
+      !l2 && /* @__PURE__ */ jsx(u$1, { children: I$4(o2 || "") })
+    ] }),
+    /* @__PURE__ */ jsxs(c$4, { children: [
+      /* @__PURE__ */ jsx(l$4, { children: o2 }),
+      /* @__PURE__ */ jsxs(p$5, { children: [
+        /* @__PURE__ */ jsxs(m$3, { children: [
+          /* @__PURE__ */ jsxs(f$1, { children: [
+            /* @__PURE__ */ jsx(i$4, { alt: "rank-icon", src: F }),
+            /* @__PURE__ */ jsxs(I$2, { children: [
+              s$3(s2),
+              /* @__PURE__ */ jsx(v$1, { children: "PTS" })
+            ] })
+          ] }),
+          n2 && /* @__PURE__ */ jsxs(I$2, { children: [
+            /* @__PURE__ */ jsx(d$2, {}),
+            C2 || 0,
+            /* @__PURE__ */ jsx(v$1, { children: "global rank" })
+          ] })
+        ] }),
+        !n2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(A$1, {}),
+          /* @__PURE__ */ jsxs("div", { children: [
+            "TOP ",
+            L || 0,
+            "%"
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) }) }),
+  /* @__PURE__ */ jsxs(e$7, { children: [
+    !n2 && /* @__PURE__ */ jsxs(R, { children: [
+      /* @__PURE__ */ jsx(i$5, { loading: t2, style: { width: "100%" }, children: /* @__PURE__ */ jsx(m$4, { indicator: m2 || 0, title: "Friends rank" }) }),
+      /* @__PURE__ */ jsx(i$5, { loading: t2, style: { width: "100%" }, children: /* @__PURE__ */ jsx(m$4, { indicator: C2 || 0, title: "Global rank" }) })
+    ] }),
+    /* @__PURE__ */ jsx(i$5, { loading: t2, children: /* @__PURE__ */ jsxs(U, { children: [
+      /* @__PURE__ */ jsx(l$5, { indicator: p2 || 0, title: "Win streak" }),
+      /* @__PURE__ */ jsx(l$5, { indicator: f2 || 0, title: "Correct" }),
+      /* @__PURE__ */ jsx(l$5, { indicator: v2 || 0, title: "Incorrect" }),
+      /* @__PURE__ */ jsx(l$5, { indicator: `${g2 || 0}%`, title: "Succ. rate" })
+    ] }) })
+  ] })
+] });
+const t$1 = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c115qtkr",
+  propsAsIs: false
+}), n$1 = /* @__PURE__ */ styled_default("div")({
+  name: "STabs",
+  class: "sxnslc8",
+  propsAsIs: false
+}), o$3 = /* @__PURE__ */ styled_default("button")({
+  name: "Button",
+  class: "b1umzux0",
+  propsAsIs: false
+}), e$6 = /* @__PURE__ */ styled_default("span")({
+  name: "Title",
+  class: "tspsaas",
+  propsAsIs: false
+});
+var m$2 = /* @__PURE__ */ ((r2) => (r2.HOME = "home", r2.LEADERBOARD = "leaderboard", r2))(m$2 || {});
+const o$2 = ({ title: r2, active: e2, onClick: n2 }) => /* @__PURE__ */ jsx(o$3, { "data-a": "intr", onClick: n2, "data-selected": e2, children: /* @__PURE__ */ jsx(e$6, { "data-a": "intr", children: r2 }) }), b$1 = ({ activePage: r2 = "home", toggleActivePage: e2 }) => /* @__PURE__ */ jsx(t$1, { children: /* @__PURE__ */ jsxs(n$1, { "data-position": r2 === "home" ? "left" : "right", children: [
+  /* @__PURE__ */ jsx(o$2, { title: "Home", active: r2 === "home", onClick: () => e2(
+    "home"
+    /* HOME */
+  ) }),
+  /* @__PURE__ */ jsx(
+    o$2,
+    {
+      title: "Friends",
+      active: r2 === "leaderboard",
+      onClick: () => e2(
+        "leaderboard"
+        /* LEADERBOARD */
+      )
+    }
+  )
+] }) });
+const n = /* @__PURE__ */ styled_default("button")({
+  name: "Container",
+  class: "cpjnajb",
+  propsAsIs: false
+}), a$4 = /* @__PURE__ */ styled_default("div")({
+  name: "Content",
+  class: "c4m6kaz",
+  propsAsIs: false
+}), e$5 = /* @__PURE__ */ styled_default("span")({
+  name: "Title",
+  class: "t1h8t9cc",
+  propsAsIs: false
+});
+const s$2 = () => /* @__PURE__ */ jsx(n, { children: /* @__PURE__ */ jsxs(a$4, { children: [
+  /* @__PURE__ */ jsx(B1, { name: "iconCopySuccess" }),
+  /* @__PURE__ */ jsx(e$5, { children: "Link Copied to Clipboard" })
+] }) });
+const T = (r2) => {
+  const t2 = useRef(), [c2, o2] = useState(null), a2 = useCallback(
+    async (e2) => {
+      var i2;
+      if (e2 && ((i2 = navigator == null ? void 0 : navigator.clipboard) != null && i2.writeText)) {
+        t2.current && (clearTimeout(t2.current), o2(null));
+        try {
+          await navigator.clipboard.writeText(e2), r2.current && (o2(createPortal(/* @__PURE__ */ jsx(s$2, {}), r2.current)), t2.current = setTimeout(() => {
+            o2(null);
+          }, 1e3));
+        } catch (n2) {
+          console.error("Unable to copy to clipboard", n2);
+        }
+      }
+    },
+    [r2]
+  );
+  return useEffect(() => () => {
+    clearTimeout(t2.current);
+  }, []), [a2, c2];
+};
+const r$3 = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c1ux29ft",
+  propsAsIs: false
+}), o$1 = () => B1, a$3 = /* @__PURE__ */ styled_default(o$1())({
+  name: "FriendsIcon",
+  class: "f10ncfg2",
+  propsAsIs: true
+}), p$4 = /* @__PURE__ */ styled_default("div")({
+  name: "Content",
+  class: "c1yc07bd",
+  propsAsIs: false
+}), i$3 = /* @__PURE__ */ styled_default("div")({
+  name: "Title",
+  class: "tj6cq7w",
+  propsAsIs: false
+}), l$3 = /* @__PURE__ */ styled_default("div")({
+  name: "Description",
+  class: "d1ag78xo",
+  propsAsIs: false
+}), e$4 = () => B1, I$1 = /* @__PURE__ */ styled_default(e$4())({
+  name: "ArrowInviteIcon",
+  class: "awohrz6",
+  propsAsIs: true
+});
+const C$1 = ({ title: o2, description: t2, onClick: r2, className: e2 }) => {
+  const [c2] = f$2({
+    type: "invitation",
+    action: "sent",
+    payload: {
+      from: InvitationFrom.TITLE_CARD
+    }
+  });
+  return /* @__PURE__ */ jsxs(r$3, { "data-a": "intr", onClick: c2(r2), className: e2, children: [
+    /* @__PURE__ */ jsx(a$3, { name: "icon-friends" }),
+    /* @__PURE__ */ jsxs(p$4, { children: [
+      /* @__PURE__ */ jsx(i$3, { children: o2 }),
+      /* @__PURE__ */ jsx(l$3, { children: t2 })
+    ] }),
+    /* @__PURE__ */ jsx(I$1, { name: "icon-copy" })
+  ] });
+};
+const r$2 = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "culdu4a",
+  propsAsIs: false
+}), t = /* @__PURE__ */ styled_default("div")({
+  name: "Position",
+  class: "pwf8e69",
+  propsAsIs: false
+}), c$3 = /* @__PURE__ */ styled_default("img")({
+  name: "Avatar",
+  class: "atf4yh4",
+  propsAsIs: false
+}), p$3 = /* @__PURE__ */ styled_default("div")({
+  name: "AvatarPlaceholder",
+  class: "a1dg29ja",
+  propsAsIs: false
+}), l$2 = /* @__PURE__ */ styled_default("div")({
+  name: "Content",
+  class: "c10a68rc",
+  propsAsIs: false
+}), m$1 = /* @__PURE__ */ styled_default("div")({
+  name: "NameContainer",
+  class: "nc4kck5",
+  propsAsIs: false
+}), i$2 = /* @__PURE__ */ styled_default("span")({
+  name: "Name",
+  class: "njsrqgr",
+  propsAsIs: false
+}), e$3 = () => B1, d$1 = /* @__PURE__ */ styled_default(e$3())({
+  name: "CurrentUserBadge",
+  class: "c17uc4zr",
+  propsAsIs: true
+});
+const N = ({
+  friendsRank: i2,
+  avatar: a2,
+  name: t$12,
+  userId: n2,
+  points: o2,
+  isCurrentUser: d2,
+  style: m2
+}) => /* @__PURE__ */ jsxs(r$2, { "data-name": n2, style: m2, children: [
+  /* @__PURE__ */ jsx(t, { children: i2 || 0 }),
+  /* @__PURE__ */ jsxs(l$2, { children: [
+    a2 ? /* @__PURE__ */ jsx(c$3, { alt: "leaderboard-item-avatar", src: a2 }) : /* @__PURE__ */ jsx(p$3, { children: I$4(t$12 || "") }),
+    /* @__PURE__ */ jsxs(m$1, { children: [
+      /* @__PURE__ */ jsx(i$2, { children: t$12 || "" }),
+      d2 && /* @__PURE__ */ jsx(d$1, { name: "icon-star" })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsx("div", { children: s$3(o2) })
+] });
+const u = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c16btbfp",
+  propsAsIs: false
+}), S = ({
+  items: s2,
+  currentUserId: e2,
+  openItemDetail: o2,
+  fetchMore: n2,
+  scrollNode: i2,
+  hasMore: d2
+}) => {
+  const l2 = useCallback((r2) => {
+    const a2 = r2.target.getAttribute("data-name");
+    a2 && o2(a2);
+  }, [o2]);
+  return /* @__PURE__ */ jsx(m$5, {
+    loadMore: n2,
+    initialLoad: false,
+    hasMore: d2,
+    useWindow: false,
+    getScrollParent: () => i2.current,
+    children: /* @__PURE__ */ jsx(u, {
+      "data-a": "intr",
+      onClick: l2,
+      children: s2.map((r2) => /* @__PURE__ */ jsx(N, {
+        ...r2,
+        isCurrentUser: !!e2 && e2 === r2.userId
+      }, r2.userId))
+    })
+  });
+};
+const i$1 = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c1itm4k7",
+  propsAsIs: false
+}), c$2 = /* @__PURE__ */ styled_default("div")({
+  name: "IconContainer",
+  class: "i1w4fsni",
+  propsAsIs: false
+}), e$2 = () => B1, l$1 = /* @__PURE__ */ styled_default(e$2())({
+  name: "InviteGameIcon",
+  class: "i19m85r1",
+  propsAsIs: true
+}), p$2 = /* @__PURE__ */ styled_default("div")({
+  name: "Content",
+  class: "c1mbu204",
+  propsAsIs: false
+}), r$1 = /* @__PURE__ */ styled_default("div")({
+  name: "Heading",
+  class: "h1amdqtv",
+  propsAsIs: false
+}), m = /* @__PURE__ */ styled_default("div")({
+  name: "Subtext",
+  class: "s1lhlj9j",
+  propsAsIs: false
+}), I = /* @__PURE__ */ styled_default("div")({
+  name: "LinkContainer",
+  class: "l1wot35e",
+  propsAsIs: false
+}), d = /* @__PURE__ */ styled_default("div")({
+  name: "LinkInfo",
+  class: "l1jdw39q",
+  propsAsIs: false
+}), f = /* @__PURE__ */ styled_default("span")({
+  name: "LinkTitle",
+  class: "l1cr5mk",
+  propsAsIs: false
+}), v = /* @__PURE__ */ styled_default("span")({
+  name: "LinkAddress",
+  class: "lvi87q4",
+  propsAsIs: false
+}), o = () => B1, A = /* @__PURE__ */ styled_default(o())({
+  name: "LinkIcon",
+  class: "l1pqlvw3",
+  propsAsIs: true
+});
+const M = ({
+  inviteLink: i2,
+  inviteCardTitle: e2,
+  inviteCardSubtext: t2,
+  primaryColor: c2,
+  className: a2
+}) => {
+  const r2 = useRef(null), [l2, d$12] = T(r2), [m$12] = f$2({
+    type: "invitation",
+    action: "sent",
+    payload: {
+      from: InvitationFrom.MENU
+    }
+  });
+  return /* @__PURE__ */ jsxs(i$1, { className: a2, children: [
+    /* @__PURE__ */ jsx(c$2, { style: { backgroundColor: c2 }, children: /* @__PURE__ */ jsx(l$1, { name: "invite-game-icon" }) }),
+    /* @__PURE__ */ jsxs(p$2, { children: [
+      /* @__PURE__ */ jsx(r$1, { children: e2 || "" }),
+      /* @__PURE__ */ jsx(m, { children: t2 || "" })
+    ] }),
+    i2 && /* @__PURE__ */ jsxs(I, { ref: r2, "data-a": "intr", onClick: m$12(() => l2(i2)), children: [
+      /* @__PURE__ */ jsxs(d, { children: [
+        /* @__PURE__ */ jsx(f, { children: "Invite link" }),
+        /* @__PURE__ */ jsx(v, { children: i2 })
+      ] }),
+      /* @__PURE__ */ jsx(A, { name: "icon-copy" })
+    ] }),
+    d$12
+  ] });
+};
+const r = /* @__PURE__ */ styled_default("div")({
+  name: "InviteFriendsContainer",
+  class: "i1c9dygq",
+  propsAsIs: false
+}), a$2 = ({
+  deepLink: i2
+}) => /* @__PURE__ */ jsx(r, {
+  children: /* @__PURE__ */ jsx(M, {
+    inviteLink: i2,
+    inviteCardTitle: "It’s More Fun With Friends",
+    inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
+  })
+});
+const C = /* @__PURE__ */ styled_default("div")({
+  name: "InviteLinkContainer",
+  class: "i1odbhm4",
+  propsAsIs: false
+}), z = ({
+  gamification: e2,
+  scrollNode: s2,
+  scrollStore: p2
+}) => {
+  const o2 = useRef(null), {
+    data: i2,
+    hasMore: d2,
+    loading: m2,
+    key: a2
+  } = useStore(e2.leaderboardList.$store), {
+    data: t2
+  } = useStore(e2.deepLink.$store), [l2, c2] = T(o2);
+  return !i2.length && !m2 ? /* @__PURE__ */ jsx(a$2, {
+    deepLink: t2
+  }) : /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(S, {
+      items: i2,
+      scrollNode: s2,
+      scrollStore: p2,
+      fetchMore: e2.leaderboardList.fetchMore,
+      hasMore: d2,
+      openItemDetail: e2.openUser,
+      currentUserId: e2.currentUserId.get()
+    }, a2), t2 && /* @__PURE__ */ jsx(C, {
+      ref: o2,
+      children: /* @__PURE__ */ jsx(C$1, {
+        "data-a": "intr",
+        onClick: () => l2(t2),
+        title: "Invite Friends",
+        description: "Challenge them now!"
+      })
+    }), c2]
+  });
+};
+const s$1 = () => r$5, i = /* @__PURE__ */ styled_default(s$1())({
+  name: "Container",
+  class: "cll3md7",
+  propsAsIs: true
+}), e$1 = () => S$1, p$1 = /* @__PURE__ */ styled_default(e$1())({
+  name: "ActionBtn",
+  class: "a10g1iik",
+  propsAsIs: true
+});
+const c$1 = ({ questionId: t2, ...r2 }) => /* @__PURE__ */ jsxs(i, { "data-a": "intr", "data-name": t2, children: [
+  /* @__PURE__ */ jsx(O, { questionId: t2, ...r2 }),
+  /* @__PURE__ */ jsx(p$1, { "data-a": "intr", "data-name": t2, children: "View Insight" })
+] });
+const s = () => r$5, a$1 = /* @__PURE__ */ styled_default(s())({
+  name: "Container",
+  class: "cl56x6b",
+  propsAsIs: true
+}), c = /* @__PURE__ */ styled_default("button")({
+  name: "ActionButton",
+  class: "a11pzf92",
+  propsAsIs: false
+}), p = /* @__PURE__ */ styled_default("blockquote")({
+  name: "Quote",
+  class: "q1hbaleq",
+  propsAsIs: false
+});
+const l = ({ ...t2 }) => /* @__PURE__ */ jsxs(a$1, { "data-a": "intr", "data-name": t2.tweetId, children: [
+  t2.title && /* @__PURE__ */ jsx(p, { children: t2.title }),
+  /* @__PURE__ */ jsx(b$2, { ...t2 }),
+  /* @__PURE__ */ jsx(c, { "data-a": "intr", "data-name": t2.tweetId, children: "View Insight" })
+] });
+const e = /* @__PURE__ */ styled_default("div")({
+  name: "QuestionsContainer",
+  class: "qvghv3l",
+  propsAsIs: false
+});
+const k = ({ questions: n2, openQuestion: b2, controlVideo: a2 }) => {
+  const l$12 = (t2) => {
+    const e2 = t2.target.getAttribute("data-name");
+    e2 && (wt(), b2(e2, { openedFrom: "list" }));
+  };
+  return n2 ? /* @__PURE__ */ jsx(e, { "data-a": "intr", onClick: l$12, children: n2 == null ? void 0 : n2.map((t2) => {
+    var e2, u2, s2;
+    if (t2.type === "question" && ((e2 = t2.attributes) == null ? void 0 : e2.attributes.case) === "question") {
+      const i2 = t2.attributes.attributes.value;
+      return /* @__PURE__ */ jsx(R$1, { ...i2 }, i2.questionId);
+    }
+    if (t2.type === "insight" && ((u2 = t2.attributes) == null ? void 0 : u2.attributes.case) === "insight") {
+      const i2 = t2.attributes.attributes.value;
+      return /* @__PURE__ */ jsx(c$1, { controlVideo: a2, ...i2 }, i2.questionId);
+    }
+    if (t2.type === "tweet" && ((s2 = t2.attributes) == null ? void 0 : s2.attributes.case) === "tweet") {
+      const i2 = t2.attributes.attributes.value, o2 = t2.attributes.id;
+      return /* @__PURE__ */ jsx(l, { controlVideo: a2, ...i2, tweetId: o2 }, o2);
+    }
+    return null;
+  }) }) : /* @__PURE__ */ jsx(e, { children: Array.from({ length: 5 }).map((t2, e2) => /* @__PURE__ */ jsx(D, {}, e2)) });
+};
+const a = ({ store: t2, openQuestion: r2 }) => {
+  const { sdk: o2 } = p$6(), e2 = useStore(t2);
+  return /* @__PURE__ */ jsx(k, { openQuestion: r2, questions: e2.data, controlVideo: o2 == null ? void 0 : o2.controlVideoPlayer });
+};
+const b = ({ userSummary: r2 }) => {
+  var e2;
+  const [t2, s2] = useState(void 0);
+  return useEffect(() => {
+    const c2 = r2.$store.subscribe((o2) => {
+      o2 && s2(o2);
+    });
+    return () => {
+      c2();
+    };
+  }, [r2]), /* @__PURE__ */ jsx(z$1, { loading: !(t2 != null && t2.summary), ...t2 == null ? void 0 : t2.summary, successRate: (e2 = t2 == null ? void 0 : t2.percentage) == null ? void 0 : e2.correct });
+};
+const W = ({ gamification: s2, className: w, scrollStore: t2, scrollNode: y, appNode: c2, style: k2, responsiveStore: i2 }) => {
+  const { tabsShown: u2 } = useStore(t2, { keys: ["tabsShown"] }), o2 = useStore(s2.friendsTabEnabled), [a$12, h2] = useState(m$2.HOME), [, T2] = useTransition(), { sdkInDesktopView: l2, screen: g2 } = useStore(i2, { keys: ["sdkInDesktopView"] }), x = (r2) => {
+    T2(() => {
+      var b2;
+      h2(r2), l2 === false && (((b2 = c2.current) == null ? void 0 : b2.getBoundingClientRect().y) || 0) < 0 && I$3(c2, g2.size, { behavior: "instant" });
+    });
+  };
+  useEffect(() => t2.subscribe((r2) => {
+    if (r2.scrollPosition === 0) {
+      t2.setKey("tabsShown", true);
+      return;
+    }
+    i2.get().sdkInDesktopView ? t2.setKey("tabsShown", r2.scrollDirection === "backward") : t2.setKey("tabsShown", r2.scrollDirection === "forward");
+  }), [t2, i2]), useEffect(() => {
+    o2 || h2(m$2.HOME);
+  }, [o2]);
+  let m2 = "0px";
+  return l2 ? m2 = u2 ? "0px" : "calc(0px - var(--header-height))" : m2 = u2 ? "var(--header-height)" : "0px", /* @__PURE__ */ jsxs(l$6, { className: cx_default(w, "SL-Tabs", "sl-hide-on-modal"), style: k2, children: [
+    o2 && /* @__PURE__ */ jsx(
+      S$2,
+      {
+        style: {
+          top: m2
+        },
+        children: /* @__PURE__ */ jsx(b$1, { activePage: a$12, toggleActivePage: x })
+      }
+    ),
+    a$12 === m$2.HOME && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(m$6, { children: /* @__PURE__ */ jsx(d$3, { children: /* @__PURE__ */ jsx(b, { userSummary: s2.userSummary }) }) }),
+      /* @__PURE__ */ jsx(n$4, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(a, { openQuestion: s2.openQuestion, store: s2.feedList.getStore() }) })
+    ] }),
+    a$12 === m$2.LEADERBOARD && /* @__PURE__ */ jsx(C$2, { children: /* @__PURE__ */ jsx(z, { scrollStore: t2, scrollNode: y, gamification: s2 }) })
+  ] });
+};
+const g = ({
+  gamification: e2,
+  scrollStore: t2,
+  className: n2,
+  appNode: r2,
+  scrollNode: p2,
+  responsiveStore: a2
+}) => /* @__PURE__ */ jsx(W, {
+  appNode: r2,
+  scrollStore: t2,
+  scrollNode: p2,
+  className: n2,
+  gamification: e2,
+  responsiveStore: a2
+});
 export {
-  F as default
+  g as default
 };