@streamlayer/react-ui 0.100.5 → 1.1.0

package/lib/app/masters/Notifications/index.d.ts

@@ -0,0 +1,13 @@
+import { AppNodeRef, ScrollNodeRef, HeaderNodeRef } from '../..';
+import { ResponsiveStore } from '../../useSdkResponsive';
+import { ScrollStore } from '../../useSdkScroll';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export declare const SDKNotifications: React.FC<{
+    sdk: StreamLayerSDK;
+    scrollNode: ScrollNodeRef;
+    appNode: AppNodeRef;
+    headerNode: HeaderNodeRef;
+    scrollStore: ScrollStore;
+    responsiveStore: ResponsiveStore;
+}>;

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

@@ -0,0 +1,164 @@
+import { jsxs as f, Fragment as D, jsx as c } from "react/jsx-runtime";
+import { cx as N } from "@linaria/core";
+import { useStore as g } from "@nanostores/react";
+import { useMastersContext as T } from "../useMastersContext.js";
+import { scrollIntoAppView as q } from "../../useSdkScroll.js";
+import { useState as p, useMemo as E, useEffect as h, useRef as O, useCallback as w } from "react";
+import { r as b } from "../../../index-B1QdimmR.js";
+import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
+import { NotificationType as a } from "@streamlayer/sdk-web-notifications";
+import { QuestionTypeData as R } from "../../../ui/gamification/constants.js";
+import { Notification as V } from "../../../ui/gamification/question/notification/index.js";
+import { PredictionResult as P } from "../../../ui/gamification/question/notification/prediction-result/index.js";
+import { Onboarding as x } from "./Onboarding/index.js";
+import { HiddenContainer as A, Container as B, InnerContainer as H, NotificationRefreshing as Q, Pill as U } from "./styles.js";
+const j = (n) => {
+  const [t, u] = p(0), i = O(null), d = w((r) => {
+    i.current = r;
+  }, []);
+  h(() => {
+    var l;
+    const r = (l = i.current) == null ? void 0 : l.getBoundingClientRect();
+    r && u(r.height);
+  }, [n]);
+  const o = w((r) => {
+    u(r);
+  }, []);
+  return [d, t, o];
+}, z = ({
+  sdk: n,
+  notification: t,
+  appNode: u,
+  responsiveStore: i
+}) => {
+  var s, e;
+  const {
+    sdkInDesktopView: d
+  } = g(i, {
+    keys: ["sdkInDesktopView"]
+  }), {
+    sdk: o
+  } = T(), [r, l, m] = j(t.id);
+  return t.type === a.QUESTION ? /* @__PURE__ */ f(D, {
+    children: [/* @__PURE__ */ c(A, {
+      ref: r,
+      children: /* @__PURE__ */ c(V, {
+        ...t
+      })
+    }), /* @__PURE__ */ f(B, {
+      style: {
+        height: t.hiding ? 0 : l
+      },
+      hiding: t.hiding,
+      children: [/* @__PURE__ */ c(H, {
+        style: {
+          height: "100%"
+        },
+        children: /* @__PURE__ */ c(V, {
+          ...t,
+          controlVideo: o == null ? void 0 : o.controlVideoPlayer
+        })
+      }), /* @__PURE__ */ c(Q, {}, t.id)]
+    })]
+  }) : t.type === a.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
+    style: {
+      height: t.hiding ? 0 : l
+    },
+    saveHeight: m,
+    close: t.close,
+    hiding: t.hiding,
+    ...t.data.question,
+    mastersApp: !0
+  }) : t.type === a.ONBOARDING ? /* @__PURE__ */ c(x, {
+    style: {
+      height: t.hiding ? 0 : l
+    },
+    saveHeight: m,
+    sdk: n,
+    notification: t,
+    sdkInDesktopView: d,
+    appNode: u,
+    responsiveStore: i
+  }) : null;
+}, F = "p1co32q0", L = ({
+  pill: n,
+  setPill: t,
+  appNode: u,
+  headerNode: i,
+  scrollNode: d,
+  responsiveStore: o,
+  scrollStore: r
+}) => {
+  var k, y;
+  const {
+    screen: l
+  } = g(o, {
+    keys: ["screen"]
+  }), {
+    tabsShown: m,
+    scrollPosition: s
+  } = g(r, {
+    keys: ["tabsShown", "scrollPosition"]
+  });
+  h(() => {
+    o.get().sdkInDesktopView ? s < 50 && t(null) : s > -50 && t(null);
+  }, [s, o, t]);
+  const e = o.get().sdkInDesktopView ? u : i;
+  return !n || !e.current ? null : b.createPortal(/* @__PURE__ */ c(U, {
+    title: n.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((y = R[(k = n.data) == null ? void 0 : k.questionType]) == null ? void 0 : y.label) || "notification"}`,
+    onClick: () => {
+      var I;
+      o.get().sdkInDesktopView ? (I = d.current) == null || I.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      }) : q(u, l.size, {
+        behavior: "smooth"
+      }), t(null);
+    },
+    className: N(m && F, "sl-pill-button")
+  }), e.current);
+}, it = ({
+  sdk: n,
+  headerNode: t,
+  scrollNode: u,
+  responsiveStore: i,
+  appNode: d,
+  scrollStore: o
+}) => {
+  const [r] = p(n.getNotificationsStore()), l = g(r), [m, s] = p(null), e = E(() => n.getActiveNotification(), [n, l]);
+  return h(() => {
+    e && C.emit("notification", {
+      action: "rendered",
+      payload: {
+        questionId: e.data.questionId,
+        questionType: e.data.questionType
+      }
+    });
+  }, [e]), h(() => {
+    e && (i.get().sdkInDesktopView || i.get().sdkInView) && (!i.get().sdkInDesktopView && i.get().sdkInView && s(e), i.get().sdkInDesktopView && window.requestAnimationFrame(() => {
+      o.get().scrollPosition !== 0 && s(e);
+    }));
+  }, [e]), h(() => {
+    e || s(null);
+  }, [e]), /* @__PURE__ */ f(D, {
+    children: [!m && e && /* @__PURE__ */ c(z, {
+      headerNode: t,
+      appNode: d,
+      sdk: n,
+      notification: e,
+      responsiveStore: i
+    }), m && /* @__PURE__ */ c(L, {
+      pill: m,
+      setPill: s,
+      appNode: d,
+      notification: e,
+      headerNode: t,
+      scrollNode: u,
+      scrollStore: o,
+      responsiveStore: i
+    })]
+  });
+};
+export {
+  it as SDKNotifications
+};

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

@@ -0,0 +1,9 @@
+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 HiddenContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import('react').ElementType;
+}>;
+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 → app/masters}/Notifications/styles.js

@@ -1,31 +1,31 @@
 import { styled as s } from "@linaria/react";
-import { Pill as n } from "../../gamification/question/notification/pill/index.js";
-import { ShowIn as o } from "../../show-in/index.js";
+import { Pill as n } from "../../../ui/gamification/question/notification/pill/index.js";
+import { ShowIn as o } from "../../../ui/show-in/index.js";
 const e = () => o, l = /* @__PURE__ */ s(e())({
   name: "Container",
-  class: "ctckejh",
+  class: "c1f0y7nw",
   propsAsIs: !0
-}), i = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "InnerContainer",
-  class: "i1ri7tzr",
+  class: "i1qa3p7a",
   propsAsIs: !1
-}), r = () => i, m = /* @__PURE__ */ s(r())({
+}), i = () => t, m = /* @__PURE__ */ s(i())({
   name: "HiddenContainer",
-  class: "h1ng1qh5",
+  class: "hrthymv",
   propsAsIs: !0
 }), f = /* @__PURE__ */ s("div")({
   name: "NotificationRefreshing",
-  class: "nruq6ik",
+  class: "n13rok4i",
   propsAsIs: !1
-}), t = () => n, I = /* @__PURE__ */ s(t())({
+}), r = () => n, I = /* @__PURE__ */ s(r())({
   name: "Pill",
-  class: "pj6uyys",
+  class: "pht79xf",
   propsAsIs: !0
 });
 export {
   l as Container,
   m as HiddenContainer,
-  i as InnerContainer,
+  t as InnerContainer,
   f as NotificationRefreshing,
   I as Pill
 };

package/lib/app/masters/Points/index.d.ts

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

package/lib/app/masters/Points/index.js

@@ -0,0 +1,28 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useStore as i } from "@nanostores/react";
+import { useState as c, useEffect as f } from "react";
+import { FeatureStatus as p } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as S } from "@streamlayer/sdk-web-types";
+import { Points as l } from "../../../ui/gamification/points/index.js";
+const a = ({ gamification: e }) => {
+  const s = e.userSummary.$store, [r, u] = c(0);
+  return f(() => {
+    const m = s.subscribe((t) => {
+      var o;
+      (o = t == null ? void 0 : t.summary) != null && o.points && u(t.summary.points);
+    });
+    return () => {
+      m();
+    };
+  }, [s]), /* @__PURE__ */ n(l, { points: r, onClick: () => {
+    e.status.get() === p.Suspended && e.openFeature();
+  } });
+}, h = ({ sdk: e }) => {
+  if (!i(e.featuresList.getStore()))
+    return null;
+  const r = e.getFeature(S.GAMES);
+  return r ? /* @__PURE__ */ n(a, { gamification: r }) : null;
+};
+export {
+  h as StreamLayerSDKPoints
+};

package/lib/app/masters/masters.d.ts

@@ -0,0 +1,14 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export { StreamLayerMastersThemeProvider } from '../../ui/theme/masters';
+export type Overlays = {};
+export type MastersAppChildrenProps = {
+    activateEventWithId: (event: string) => void;
+    deactivate: () => void;
+};
+export type MastersAppProps = {
+    sdk: StreamLayerSDK;
+    overlays?: Overlays;
+    children: (methods: MastersAppChildrenProps) => React.ReactNode;
+};
+export declare const MastersApp: React.FC<MastersAppProps>;

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

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

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

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

package/lib/app/masters/useMastersApp.js

@@ -0,0 +1,71 @@
+import { useStore as c } from "@nanostores/react";
+import { useRef as z, useState as d, useCallback as v, useEffect as l } from "react";
+import { FeatureType as p } from "@streamlayer/sdk-web-types";
+import "./Navigation/MastersNavigation/index.js";
+import { FeaturedGroupsButtonId as f } from "../../ui/navigation/button/FeaturedGroups.js";
+import { ChannelsButtonId as i } from "../../ui/navigation/button/Channels.js";
+const C = (e) => {
+  const m = z(""), [E, a] = d(!1), g = c(e.status), F = c(e.sdkStore.slStreamId), n = c(e.userId()), A = c(e.getActiveFeature()), o = g === "ready" && !!F.data, [S, r] = d(f), s = v(
+    (t, u) => {
+      r(u), t && e.createEventSession(t), u === f ? window.requestAnimationFrame(() => {
+        e.openFeature(p.GAMES);
+      }) : e.closeFeature(!1);
+    },
+    [e]
+  );
+  l(() => {
+    !o && S === f && (r(i), e.closeFeature(!0));
+  }, [o, S, e]), l(() => {
+    A === p.GAMES ? r(f) : A === p.UNSET && r(i);
+    const t = e.getFeature(p.GAMES);
+    t && (t.closeQuestion(), t.closeUser());
+  }, [A, e]);
+  const b = v(
+    (t) => {
+      m.current = t, a(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: u, err: h }) => {
+        if (h) {
+          s(t, i);
+          return;
+        }
+        if (u) {
+          e.isUserAuthorized().then((y) => {
+            if (y) {
+              s(t, i);
+              return;
+            } else
+              e.disableApp();
+          });
+          return;
+        }
+      });
+    },
+    [s, e]
+  ), I = v(() => {
+    a(!1), e.disableApp();
+  }, [e]);
+  return l(() => {
+    if (!n) {
+      o && (r(i), e.disableApp());
+      return;
+    }
+    if (n && m.current && E) {
+      e.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
+        e.createEventSession(m.current);
+      });
+      return;
+    }
+  }, [n]), l(() => () => {
+    a(!1), e.disableApp();
+  }, [a, e]), {
+    sdkEnabled: E,
+    sdkReady: o,
+    activeOverlay: S,
+    activateAndLoadOverlay: s,
+    activateEventWithId: b,
+    deactivate: I,
+    isLogged: !!n
+  };
+};
+export {
+  C as useMastersApp
+};

package/lib/app/masters/useMastersContext.d.ts

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

package/lib/app/styles.d.ts

@@ -0,0 +1,20 @@
+export declare const SDKContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SDKScrollContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SDKContentContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SDKWhiteContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import('react').ElementType;
+}>;
+export declare const TabsContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const LeaderboardContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import('react').ElementType;
+}>;
+export declare const TabsNavContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import('react').ElementType;
+}>;
+export declare const UserSummaryContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -1,44 +1,44 @@
 import { styled as s } from "@linaria/react";
 const i = /* @__PURE__ */ s("div")({
   name: "SDKContainer",
-  class: "stu11h7",
+  class: "s2j5adf",
   propsAsIs: !1
 }), c = /* @__PURE__ */ s("div")({
   name: "SDKScrollContainer",
-  class: "s1ucohr1",
+  class: "st9ayqn",
   propsAsIs: !1
 }), a = /* @__PURE__ */ s("div")({
   name: "SDKContentContainer",
-  class: "s1el4wvm",
+  class: "s6rlym7",
   propsAsIs: !1
 }), e = () => a, n = /* @__PURE__ */ s(e())({
   name: "SDKWhiteContainer",
-  class: "s1oe3036",
+  class: "s1trfff0",
   propsAsIs: !0
-}), p = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "TabsContainer",
-  class: "tzk7mst",
+  class: "t87r8je",
   propsAsIs: !1
-}), o = () => n, l = /* @__PURE__ */ s(o())({
+}), o = () => n, p = /* @__PURE__ */ s(o())({
   name: "LeaderboardContainer",
-  class: "lkdzy61",
+  class: "l1aiq1lq",
   propsAsIs: !0
-}), t = () => n, C = /* @__PURE__ */ s(t())({
+}), r = () => n, C = /* @__PURE__ */ s(r())({
   name: "TabsNavContainer",
-  class: "tvdam54",
+  class: "t1o5m8d1",
   propsAsIs: !0
 }), m = /* @__PURE__ */ s("div")({
   name: "UserSummaryContainer",
-  class: "u14fk93k",
+  class: "uqh0y7s",
   propsAsIs: !1
 });
 export {
-  l as LeaderboardContainer,
+  p as LeaderboardContainer,
   i as SDKContainer,
   a as SDKContentContainer,
   c as SDKScrollContainer,
   n as SDKWhiteContainer,
-  p as TabsContainer,
+  l as TabsContainer,
   C as TabsNavContainer,
   m as UserSummaryContainer
 };

package/lib/app/useClipboardCopy.d.ts

@@ -0,0 +1,3 @@
+import { HeaderNodeRef, AppNodeRef } from '.';
+
+export declare const useClipboardCopy: (renderToNode: AppNodeRef | HeaderNodeRef) => [(link: string | undefined) => Promise<void>, React.ReactPortal | null];

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

@@ -1,7 +1,7 @@
 import { jsx as u } from "react/jsx-runtime";
 import { useRef as l, useState as s, useCallback as p, useEffect as f } from "react";
-import { r as m } from "../../index-Bicco-Aq.js";
-import { CopyNotification as b } from "../gamification/copyNotification/index.js";
+import { r as m } from "../index-B1QdimmR.js";
+import { CopyNotification as b } from "../ui/gamification/copyNotification/index.js";
 const T = (r) => {
   const t = l(), [i, o] = s(null), a = p(
     async (e) => {

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

@@ -1,6 +1,7 @@
 import { Features } from '@streamlayer/sdk-web-features';
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { FeatureType } from '@streamlayer/sdk-web-types';
+
 /**
  * A hook that manages the active feature of a StreamLayerSDK instance.
  * @param sdk - The StreamLayerSDK instance to manage the feature for.

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

@@ -1,5 +1,7 @@
+import { AppNodeRef } from '.';
 import { MapStore } from 'nanostores';
-import { BREAKPOINTS } from '../theme/constants';
+import { BREAKPOINTS } from '../ui/theme/constants';
+
 type BREAKPOINTS_KEYS = keyof typeof BREAKPOINTS;
 type ResponsiveData = {
     screen: {

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

@@ -1,7 +1,7 @@
 import c from "lodash.throttle";
 import { useState as m, useEffect as u } from "react";
-import { BREAKPOINTS as r } from "../theme/constants.js";
-import { m as l } from "../../index-CZvwzN5o.js";
+import { BREAKPOINTS as r } from "../ui/theme/constants.js";
+import { m as l } from "../index-CZvwzN5o.js";
 const d = Object.keys(r), i = () => {
   const n = window.innerWidth;
   let e = "sm";

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

@@ -1,6 +1,7 @@
+import { ScrollNodeRef, AppNodeRef } from '.';
 import { MapStore } from 'nanostores';
-import { type ScrollNodeRef } from './masters';
-import { type ResponsiveStore } from './useSdkResponsive';
+import { ResponsiveStore } from './useSdkResponsive';
+
 type ScrollData = {
     scrollPosition: number;
     tabsShown?: boolean;

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

@@ -1,8 +1,8 @@
 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";
+import { BREAKPOINTS as c } from "../ui/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({