@streamlayer/react-ui 1.0.0 → 1.2.0

package/lib/app/app/story/index.js

@@ -0,0 +1,113 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { styled as d } from "@linaria/react";
+import { useRef as A, useState as L, useEffect as m } from "react";
+import t from "screenfull";
+import { StreamLayerProvider as u, useStreamLayer as C } from "@streamlayer/react";
+import { App as S } from "../index.js";
+import { StreamLayerThemeProvider as E } from "../../../ui/theme/index.js";
+import { useStreamLayerDebug as F, StreamLayerDebug as x } from "../../../utils/debug/index.js";
+import { Content as P } from "./content.js";
+import { AppLogin as K } from "./login.js";
+import { Video as D } from "./video.js";
+const l = () => {
+  console.log("deep link handled cb");
+}, p = () => {
+  console.log("video player handled cb");
+}, I = ({
+  event: s
+}) => {
+  const r = C();
+  return m(() => {
+    r && r.openFeature(12);
+  }, [r]), r ? /* @__PURE__ */ e(E, {
+    children: /* @__PURE__ */ e(S, {
+      sdk: r,
+      event: s,
+      onDeepLinkHandled: l
+    })
+  }) : null;
+}, j = /* @__PURE__ */ d("div")({
+  name: "Container",
+  class: "c1a4qh28",
+  propsAsIs: !1
+}), T = /* @__PURE__ */ d("div")({
+  name: "Body",
+  class: "b9h8kuk",
+  propsAsIs: !1
+}), q = /* @__PURE__ */ d("div")({
+  name: "AppContainer",
+  class: "a1wkro2j",
+  propsAsIs: !1
+}), Q = ({
+  settings: s,
+  hideSdk: r,
+  hideLogin: f,
+  promotionId: y,
+  hidePoints: v,
+  sidebar: h,
+  banner: b,
+  layoutMode: g
+}) => {
+  const o = F(), a = A(), [w, c] = L(!1);
+  if (m(() => {
+    const n = () => {
+      window.orientation !== 0 ? (document.body.style.height = window.outerHeight + 50 + "px", document.body.style.overflow = "hidden", c(!0)) : (document.body.style.height = "auto", document.body.style.overflow = "auto", c(!1)), setTimeout(function() {
+        window.scrollTo(0, 0);
+      }, 1e3);
+    };
+    return t.isEnabled || window.addEventListener("orientationchange", n), () => {
+      t.isEnabled || window.removeEventListener("orientationchange", n);
+    };
+  }, []), s)
+    return /* @__PURE__ */ i(u, {
+      sdkKey: o.sdkKey,
+      production: o.env === "production",
+      autoEnable: !1,
+      onDeepLinkHandled: l,
+      videoPlayerController: p,
+      children: [/* @__PURE__ */ e(K, {}), /* @__PURE__ */ e(x, {
+        ...o,
+        standalone: !0,
+        hideAuth: !0
+      })]
+    });
+  const k = () => {
+    const n = a.current;
+    t.isEnabled || alert("Fullscreen is not supported in your browser, rotate your device to landscape mode"), t.isFullscreen ? t.exit() : t.request(n, {
+      navigationUI: "hide"
+    });
+  };
+  return /* @__PURE__ */ i(u, {
+    sdkKey: o.sdkKey,
+    production: o.env === "production",
+    autoEnable: !0,
+    onDeepLinkHandled: l,
+    videoPlayerController: p,
+    children: [/* @__PURE__ */ i(T, {
+      ref: a,
+      children: [/* @__PURE__ */ e(D, {
+        event: o.event,
+        hideLogin: f,
+        toggleFullscreen: k,
+        banner: b,
+        sidebar: h,
+        hidePoints: v,
+        layoutMode: g,
+        promotionId: y,
+        fullscreen: w
+      }), !r && /* @__PURE__ */ e(j, {
+        children: /* @__PURE__ */ e(q, {
+          className: "StreamLayerSDK",
+          children: /* @__PURE__ */ e(I, {
+            event: o.event
+          })
+        })
+      })]
+    }), /* @__PURE__ */ e(P, {
+      event: o.event
+    })]
+  });
+};
+export {
+  Q as AppStory
+};

package/lib/app/app/story/login.d.ts

@@ -0,0 +1 @@
+export declare const AppLogin: () => import("react/jsx-runtime").JSX.Element;

package/lib/app/app/story/login.js

@@ -0,0 +1,34 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as h, useEffect as u } from "react";
+import { useStreamLayer as i } from "@streamlayer/react";
+import { storage as s } from "@streamlayer/sdk-web-core";
+const d = ({ token: o, schema: n }) => {
+  const t = i();
+  return u(() => {
+    o && n && t && t.authorizationBypass(n, o);
+  }, [o, n, t]), null;
+}, x = () => {
+  const [o, n] = h({ token: s.getExternalToken(), schema: s.getSchema() }), t = i();
+  return /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ r("form", { className: "auth-form", onSubmit: (a) => {
+      a.preventDefault();
+      const c = new FormData(a.currentTarget), m = c.get("token"), l = c.get("schema");
+      n({ token: m, schema: l });
+    }, children: [
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e("label", { htmlFor: "token", children: "token" }),
+        /* @__PURE__ */ e("input", { type: "text", id: "token", name: "token", placeholder: s.getExternalToken() })
+      ] }),
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e("label", { htmlFor: "schema", children: "schema" }),
+        /* @__PURE__ */ e("input", { type: "text", id: "schema", name: "schema", placeholder: s.getSchema() })
+      ] }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("button", { type: "submit", children: "submit" }) })
+    ] }),
+    /* @__PURE__ */ e(d, { token: o.token, schema: o.schema }),
+    /* @__PURE__ */ e("button", { onClick: () => t == null ? void 0 : t.logout(), children: "logout" })
+  ] });
+};
+export {
+  x as AppLogin
+};

package/lib/app/app/story/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const PointsContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoPlayerWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoFrame: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const LoginContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FullscreenButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const AdvSidebar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdvContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdvBanner: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PromoButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

package/lib/app/app/story/styles.js

@@ -0,0 +1,49 @@
+import { styled as s } from "@linaria/react";
+const n = /* @__PURE__ */ s("div")({
+  name: "PointsContainer",
+  class: "p10yam33",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "VideoPlayerWrap",
+  class: "v13be41a",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "VideoFrame",
+  class: "v18d3gas",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "LoginContainer",
+  class: "l1aq3x2u",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("button")({
+  name: "FullscreenButton",
+  class: "f6hlblg",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "AdvSidebar",
+  class: "a1ir4g01",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "AdvContent",
+  class: "aq35lm3",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "AdvBanner",
+  class: "a1trv37l",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("button")({
+  name: "PromoButton",
+  class: "plx7e50",
+  propsAsIs: !1
+});
+export {
+  i as AdvBanner,
+  p as AdvContent,
+  l as AdvSidebar,
+  r as FullscreenButton,
+  t as LoginContainer,
+  n as PointsContainer,
+  d as PromoButton,
+  e as VideoFrame,
+  o as VideoPlayerWrap
+};

package/lib/app/app/story/useResponsive.d.ts

@@ -0,0 +1 @@
+export declare const useResponsive: () => boolean;

package/lib/app/app/story/useResponsive.js

@@ -0,0 +1,15 @@
+import { useState as s, useEffect as i } from "react";
+const t = () => window.innerWidth < 768, c = () => {
+  const [e, r] = s(t());
+  return i(() => {
+    const n = () => {
+      r(t());
+    };
+    return window.addEventListener("resize", n), () => {
+      window.removeEventListener("resize", n);
+    };
+  }, []), e;
+};
+export {
+  c as useResponsive
+};

package/lib/app/app/story/video.d.ts

@@ -0,0 +1,10 @@
+export declare const Video: React.FC<{
+    sidebar: 'left' | 'right';
+    banner: 'top' | 'bottom';
+    layoutMode: 'cover' | 'side-by-side';
+    hidePoints?: boolean;
+    fullscreen?: boolean;
+    hideLogin?: boolean;
+    event?: string;
+    promotionId?: string;
+}>;

package/lib/app/app/story/video.js

@@ -0,0 +1,67 @@
+import { jsxs as m, Fragment as C, jsx as r } from "react/jsx-runtime";
+import { useState as P, useCallback as L, useEffect as V } from "react";
+import { useStreamLayer as b } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as s } from "../Advertisement/index.js";
+import { StreamLayerSDKPoints as A } from "../Points/index.js";
+import { StreamLayerThemeProvider as t } from "../../../ui/theme/index.js";
+import { AppLogin as F } from "./login.js";
+import { VideoFrame as w, PointsContainer as x, AdvSidebar as B, LoginContainer as j, VideoPlayerWrap as D, AdvBanner as K, PromoButton as R, FullscreenButton as T, AdvContent as E } from "./styles.js";
+import { useResponsive as G } from "./useResponsive.js";
+const Q = ({ toggleFullscreen: p, fullscreen: h, hideLogin: u, hidePoints: f, sidebar: i, banner: a, event: n, promotionId: c, layoutMode: o }) => {
+  const e = b(), [g, y] = P(!0), d = G(), l = L(({ muted: S }) => {
+    y(S);
+  }, []);
+  V(() => (e == null || e.addVideoPlayerController(l), () => {
+    e == null || e.removeVideoPlayerController(l);
+  }), [e, l]);
+  const v = () => {
+    e == null || e.getFeature(12).background.advertisement.show(c, !0);
+  };
+  return /* @__PURE__ */ m(C, { children: [
+    /* @__PURE__ */ m(w, { "data-testid": "video-frame", style: h ? { position: "fixed", inset: 0 } : {}, children: [
+      e && /* @__PURE__ */ r(t, { children: !f && /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(A, { sdk: e }) }) }),
+      !d && /* @__PURE__ */ r(
+        B,
+        {
+          style: {
+            ...o === "cover" ? { position: "absolute" } : {},
+            ...i === "left" ? { left: 0 } : { right: 0, order: 3 }
+          },
+          children: e && /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(s, { event: n, sdk: e, sidebar: i, layoutMode: o }) })
+        }
+      ),
+      !u && /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(F, {}) }),
+      /* @__PURE__ */ m(D, { children: [
+        /* @__PURE__ */ r(
+          "video",
+          {
+            src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
+            muted: g,
+            width: "100%",
+            height: "100%",
+            autoplay: "autoplay",
+            loop: !0,
+            playsInline: !0,
+            playing: !0
+          }
+        ),
+        /* @__PURE__ */ r(
+          K,
+          {
+            style: {
+              ...o === "cover" ? { position: "absolute" } : {},
+              ...a === "top" ? { top: 0, order: -1 } : { bottom: 0 }
+            },
+            children: e && /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(s, { event: n, sdk: e, banner: a, layoutMode: o }) })
+          }
+        )
+      ] }),
+      c && /* @__PURE__ */ r(R, { onClick: v, children: "open promotion" }),
+      /* @__PURE__ */ r(T, { onClick: p, children: "fullscreen" })
+    ] }),
+    d && /* @__PURE__ */ r(E, { children: e && /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(s, { event: n, sdk: e, sidebar: i, layoutMode: o }) }) })
+  ] });
+};
+export {
+  Q as Video
+};

package/lib/{ui/app → app}/app/useApp.d.ts

@@ -1,4 +1,5 @@
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
 /**
  * A hook that provides functionality for managing the StreamLayerSDK in the App app.
  * - On activate FG+ button, the SDK is initialized and the FG+ overlay is opened.

package/lib/{ui/app → app}/app/useApp.js

@@ -1,24 +1,27 @@
 import { useStore as n } from "@nanostores/react";
-import { useRef as g, useState as m, useEffect as s } from "react";
+import { useRef as m, useState as b, useEffect as s, useCallback as c } from "react";
 import { FeatureType as E } from "@streamlayer/sdk-web-types";
-const I = (e) => {
-  const a = g(""), [o, r] = m(!1), c = n(e.status), p = n(e.sdkStore.slStreamId), i = n(e.userId()), f = n(e.getActiveFeature()), u = c === "ready" && !!p.data;
+const F = (e) => {
+  const a = m(""), [o, r] = b(!1), p = n(e.status), l = n(e.sdkStore.slStreamId), i = n(e.userId()), f = n(e.getActiveFeature()), u = p === "ready" && !!l.data;
   s(() => {
     const t = e.getFeature(E.GAMES);
     t && (t.closeQuestion(), t.closeUser());
   }, [f, e]);
-  const l = (t) => {
-    a.current = t, r(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: A, err: S }) => {
-      if (!S && A) {
-        e.isUserAuthorized().then((v) => {
-          v || e.disableApp();
-        });
-        return;
-      }
-    });
-  }, d = () => {
+  const A = c(
+    (t) => {
+      a.current = t, r(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: v, err: d }) => {
+        if (!d && v) {
+          e.isUserAuthorized().then((g) => {
+            g || e.disableApp();
+          });
+          return;
+        }
+      });
+    },
+    [e]
+  ), S = c(() => {
     r(!1), e.disableApp();
-  };
+  }, [e]);
   return s(() => {
     if (!i) {
       u && e.disableApp();
@@ -35,11 +38,11 @@ const I = (e) => {
   }, [r, e]), {
     sdkEnabled: o,
     sdkReady: u,
-    activateEventWithId: l,
-    deactivate: d,
+    activateEventWithId: A,
+    deactivate: S,
     isLogged: !!i
   };
 };
 export {
-  I as useAppApp
+  F as useAppApp
 };

package/lib/app/app/useAppContext.d.ts

@@ -0,0 +1,8 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export declare const AppContext: import('react').Context<{
+    sdk: StreamLayerSDK | null;
+}>;
+export declare const useAppContext: () => {
+    sdk: StreamLayerSDK | null;
+};

package/lib/{ui/app → app}/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type AppNode = HTMLDivElement | null;
 export type AppNodeRef = React.MutableRefObject<AppNode>;
 export type ScrollNode = HTMLDivElement | null;

package/lib/app/login/demo.d.ts

@@ -0,0 +1,5 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export declare const LoginComponent: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

package/lib/{ui → app}/login/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Login: React.FC<{
     login: (token: string) => Promise<void>;
     anonymousLogin?: () => Promise<void>;

package/lib/{ui → app}/login/index.js

@@ -2,7 +2,7 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { useState as a } from "react";
 import w from "react-auth-code-input";
 import P, { isValidPhoneNumber as F, formatPhoneNumberIntl as v } from "react-phone-number-input";
-import { Timer as D } from "../timer/index.js";
+import { Timer as D } from "../../ui/timer/index.js";
 import { requestLoginCode as I, register as k, login as S } from "../../utils/login.js";
 import { Panel as q, Form as m, FormTitle as p, FormDescription as d, FormInputContainer as x, FormSubmit as s, Digits as E } from "./styles.js";
 const z = ({ login: h, anonymousLogin: u, host: c }) => {

package/lib/app/login/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const Panel: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Form: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLFormElement> & import('react').FormHTMLAttributes<HTMLFormElement> & Record<never, unknown>>;
+export declare const FormTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FormDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FormSubmit: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const FormInputContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Digits: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/login/styles.js

@@ -0,0 +1,39 @@
+import { styled as s } from "@linaria/react";
+const r = /* @__PURE__ */ s("div")({
+  name: "Panel",
+  class: "p1xyiqdq",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("form")({
+  name: "Form",
+  class: "f8dvpyp",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "FormTitle",
+  class: "f11rdqjl",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "FormDescription",
+  class: "f1grgxkj",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("button")({
+  name: "FormSubmit",
+  class: "f1qnbttk",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "FormInputContainer",
+  class: "fqfb0ax",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "Digits",
+  class: "dl335k4",
+  propsAsIs: !1
+});
+export {
+  m as Digits,
+  a as Form,
+  t as FormDescription,
+  p as FormInputContainer,
+  e as FormSubmit,
+  n as FormTitle,
+  r as Panel
+};

package/lib/{ui/app/app → app/masters}/Features/FeatureProvider.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { Features } from '@streamlayer/sdk-web-features';
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
 /** Here we check data, render loaders, load data and perform some side effects for the active feature */
 export declare const FeatureProvider: React.FC<{
     feature: Features;

package/lib/{ui/app → app}/masters/Features/FeatureProvider.js

@@ -1,10 +1,10 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { styled as u } from "@linaria/react";
-import { useStore as e } from "@nanostores/react";
+import { useStore as o } from "@nanostores/react";
 import { FeatureStatus as p } from "@streamlayer/sdk-web-interfaces";
-const o = /* @__PURE__ */ u("div")({
+const i = /* @__PURE__ */ u("div")({
   name: "LoadingContainer",
-  class: "l9si06t",
+  class: "l7wseip",
   propsAsIs: !1
 }), v = ({
   feature: n,
@@ -13,20 +13,20 @@ const o = /* @__PURE__ */ u("div")({
   className: r,
   noWait: d
 }) => {
-  const f = e(n.status), t = e(s.sdkStore.slStreamId);
+  const f = o(n.status), t = o(s.sdkStore.slStreamId);
   if (!d) {
     if (t != null && t.loading && !t.data)
-      return /* @__PURE__ */ i(o, {
+      return /* @__PURE__ */ e(i, {
         className: r,
         children: "Event is loading..."
       });
     if (!(t != null && t.data))
-      return /* @__PURE__ */ i(o, {
+      return /* @__PURE__ */ e(i, {
         className: r,
         children: "Event is forbidden..."
       });
     if (f !== p.Ready)
-      return /* @__PURE__ */ i(o, {
+      return /* @__PURE__ */ e(i, {
         className: r,
         children: "Wait feature..."
       });

package/lib/{ui/app → app}/masters/Features/Gamification/Friends.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Friends: React.FC<{
     deepLink?: string;
 }>;

package/lib/app/masters/Features/Gamification/Friends.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import { styled as i } from "@linaria/react";
+import { OnboardingInviteCard as n } from "../../../../ui/gamification/onboarding/slides/onboarding-invite-card/index.js";
+const r = /* @__PURE__ */ i("div")({
+  name: "InviteFriendsContainer",
+  class: "i1b9agwt",
+  propsAsIs: !1
+}), d = ({
+  deepLink: t
+}) => /* @__PURE__ */ e(r, {
+  children: /* @__PURE__ */ e(n, {
+    inviteLink: t,
+    inviteCardTitle: "It’s More Fun With Friends",
+    inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
+  })
+});
+export {
+  d as Friends
+};

package/lib/{ui/app → app}/masters/Features/Gamification/Leaderboard.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import type { Gamification } from '@streamlayer/feature-gamification';
-import type { ScrollNodeRef } from '../../..';
+import { ScrollNodeRef } from '../../..';
 import { ScrollStore } from '../../../useSdkScroll';
+import { Gamification } from '@streamlayer/feature-gamification';
+
 export declare const Leaderboard: React.FC<{
     gamification: Gamification;
     scrollNode: ScrollNodeRef;

package/lib/{ui/app → app}/masters/Features/Gamification/Leaderboard.js

@@ -1,34 +1,34 @@
 import { jsx as r, jsxs as f, Fragment as L } from "react/jsx-runtime";
 import { styled as h } from "@linaria/react";
 import { useStore as i } from "@nanostores/react";
-import { useRef as k } from "react";
-import { useClipboardCopy as u } from "../../../useClipboardCopy.js";
-import { InviteLink as I } from "../../../../gamification/invite-link/index.js";
+import { useClipboardCopy as k } from "../../../useClipboardCopy.js";
+import { useRef as u } from "react";
+import { InviteLink as I } from "../../../../ui/gamification/invite-link/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "../../../../icons/index.js";
-import "../../../../gamification/leaderboard/list-item/styles.js";
-import "../../../../../styles_z07sl8-l0sNRNKZ.js";
-import { LeaderboardStaticList as y } from "../../../../gamification/leaderboard/static.js";
+import "../../../../ui/icons/index.js";
+import "../../../../ui/gamification/leaderboard/list-item/styles.js";
+/* empty css                                    */
+import { LeaderboardStaticList as y } from "../../../../ui/gamification/leaderboard/static.js";
 import { Friends as C } from "./Friends.js";
 const b = /* @__PURE__ */ h("div")({
   name: "InviteLinkContainer",
-  class: "i15y1ll1",
+  class: "ij36hcn",
   propsAsIs: !1
 }), q = ({
   gamification: e,
   scrollNode: s,
   scrollStore: p
 }) => {
-  const o = k(null), {
+  const o = u(null), {
     data: n,
     hasMore: d,
     loading: m,
     key: l
   } = i(e.leaderboardList.$store), {
     data: t
-  } = i(e.deepLink.$store), [a, c] = u(o);
+  } = i(e.deepLink.$store), [a, c] = k(o);
   return !n.length && !m ? /* @__PURE__ */ r(C, {
     deepLink: t
   }) : /* @__PURE__ */ f(L, {

package/lib/{ui/app/app → app/masters}/Features/Gamification/Question.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { Gamification } from '@streamlayer/feature-gamification';
+
 export declare const Question: React.FC<{
     gamification: Gamification;
 }>;