@streamlayer/react-ui 0.100.4 → 1.0.0

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

@@ -0,0 +1,172 @@
+import { jsx as n, jsxs as x, Fragment as T } from "react/jsx-runtime";
+import { styled as S } from "@linaria/react";
+import { useStore as F } from "@nanostores/react";
+import { useRef as E, useState as A, useMemo as _, useLayoutEffect as G, useEffect as M } from "react";
+import { FeatureType as P } from "@streamlayer/sdk-web-types";
+import { useImagesPreload as R } from "../../../useImagesPreload.js";
+import { scrollIntoAppView as V } from "../../../useSdkScroll.js";
+import { OnboardingUI as W } from "../../../../gamification/onboarding/index.js";
+import { ModalPortal as $ } from "../../../../modal/index.js";
+import { ShowIn as j } from "../../../../show-in/index.js";
+import { m as O } from "../../../../../mastersLogoSolid-B4Dz-vm1.js";
+import { Onboarding as k } from "./Notification/index.js";
+const y = [{
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_1.png",
+  tagline: "Featured groups+ experience",
+  headline: /* @__PURE__ */ x(T, {
+    children: ["Welcome to ", /* @__PURE__ */ n("br", {}), " Featured Groups +"]
+  })
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_2.png",
+  headline: "Get real-time insights"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_3.png",
+  headline: "Predictions, trivia & polls synced to match play"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_4.png",
+  headline: "Win points for every answer you get right"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_5.png",
+  headline: "Compete against friends on the leaderboard"
+}], q = /* @__PURE__ */ S("div")({
+  name: "OnboardingContainer",
+  class: "o1s8kvh4",
+  propsAsIs: !1
+}), z = () => j, D = /* @__PURE__ */ S(z())({
+  name: "OnboardingNotificationContainer",
+  class: "o1b0248i",
+  propsAsIs: !0
+}), L = /* @__PURE__ */ S("div")({
+  name: "InnerContainer",
+  class: "ii6o0e",
+  propsAsIs: !1
+}), U = ({
+  deepLink: d,
+  onboardingOpts: r,
+  notification: o,
+  gamification: u,
+  loading: i,
+  renderToNode: v,
+  sdk: l
+}) => {
+  var a, h, b, f, C, m, s;
+  const c = F(u.friends.getStore()), [e, I] = A(void 0), g = _(() => {
+    var p, w;
+    const t = l.getInviter();
+    return t ? (w = (p = c.data) == null ? void 0 : p.find(({
+      slId: B
+    }) => B === t)) == null ? void 0 : w.name : "";
+  }, [c.data, l]);
+  return M(() => {
+    const t = d.$store.subscribe((p) => {
+      p && I(p.data);
+    });
+    return () => {
+      t();
+    };
+  }, [d.$store]), /* @__PURE__ */ n(q, {
+    children: /* @__PURE__ */ n(W, {
+      loading: i,
+      renderToNode: v,
+      rules: [{
+        label: "Answer as many questions as you like.",
+        icon: "icon-btn-feature-groups"
+      }, {
+        label: "Win points for each correct trivia or prediction answer.",
+        icon: "icon-thumb-up"
+      }, {
+        label: "Top the leader board and best your friends.",
+        icon: "icon-trophy"
+      }],
+      rulesBtnLabel: (a = r.rules) == null ? void 0 : a.buttonLabel,
+      rulesTitle: (h = r.rules) == null ? void 0 : h.heading,
+      termsTitle: "Terms and Conditions",
+      termsText: (b = r.rules) == null ? void 0 : b.terms,
+      steps: y,
+      primaryColor: (f = r.inviteCard) == null ? void 0 : f.iconColor,
+      inviteLink: e,
+      inviteCardTitle: (C = r.inviteCard) == null ? void 0 : C.heading,
+      inviteCardSubtext: (m = r.inviteCard) == null ? void 0 : m.subtext,
+      inviteCardBtnLabel: (s = r.inviteCard) == null ? void 0 : s.buttonLabel,
+      onClose: () => {
+        var t;
+        (t = o.close) == null || t.call(o);
+      },
+      gamification: u,
+      sdk: l,
+      inviterName: g
+    })
+  });
+}, se = ({
+  sdk: d,
+  notification: r,
+  saveHeight: o,
+  style: u,
+  appNode: i,
+  sdkInDesktopView: v,
+  responsiveStore: l
+}) => {
+  var m;
+  const c = E(null), e = r.data.onboarding, [I, g] = A(e == null ? void 0 : e.instantOpen), a = d.getFeature(P.GAMES), h = _(() => y == null ? void 0 : y.map(({
+    graphicSrc: s
+  }) => s), []), {
+    screen: b
+  } = F(l, {
+    keys: ["screen"]
+  });
+  (m = e == null ? void 0 : e.titleCard) != null && m.media && (e.titleCard.media.sponsorLogo = O), G(() => {
+    var s;
+    o(((s = c.current) == null ? void 0 : s.getBoundingClientRect().height) || 0);
+  }, [o]);
+  const {
+    loading: f,
+    throttled: C
+  } = R(h);
+  return I && a && e && i.current && !C ? /* @__PURE__ */ n($, {
+    container: i,
+    useContainer: !v,
+    children: /* @__PURE__ */ n(U, {
+      notification: r,
+      setOpened: g,
+      gamification: a,
+      onboardingOpts: e,
+      deepLink: a.deepLink,
+      loading: f,
+      renderToNode: i,
+      sdk: d
+    })
+  }) : /* @__PURE__ */ x(T, {
+    children: [/* @__PURE__ */ n(L, {
+      ref: c,
+      style: {
+        position: "absolute",
+        visibility: "hidden"
+      },
+      children: /* @__PURE__ */ n(k, {
+        close: () => {
+        },
+        action: () => {
+        },
+        onboarding: e
+      })
+    }), /* @__PURE__ */ n(D, {
+      style: u,
+      hiding: r.hiding,
+      children: /* @__PURE__ */ n(L, {
+        children: /* @__PURE__ */ n(k, {
+          close: r.close,
+          action: () => {
+            var t;
+            g(!0), (((t = i.current) == null ? void 0 : t.getBoundingClientRect().y) || 0) < 0 && V(i, b.size, {
+              behavior: "smooth"
+            });
+          },
+          onboarding: e
+        })
+      })
+    })]
+  });
+};
+export {
+  se as Onboarding
+};

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

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

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

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+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: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}>;
+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/masters/Notifications/styles.js

@@ -0,0 +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";
+const e = () => o, l = /* @__PURE__ */ s(e())({
+  name: "Container",
+  class: "c1rc4ozt",
+  propsAsIs: !0
+}), i = /* @__PURE__ */ s("div")({
+  name: "InnerContainer",
+  class: "i1ddmb3r",
+  propsAsIs: !1
+}), t = () => i, m = /* @__PURE__ */ s(t())({
+  name: "HiddenContainer",
+  class: "htinjsj",
+  propsAsIs: !0
+}), d = /* @__PURE__ */ s("div")({
+  name: "NotificationRefreshing",
+  class: "nig84ar",
+  propsAsIs: !1
+}), r = () => n, f = /* @__PURE__ */ s(r())({
+  name: "Pill",
+  class: "pt3kgqi",
+  propsAsIs: !0
+});
+export {
+  l as Container,
+  m as HiddenContainer,
+  i as InnerContainer,
+  d as NotificationRefreshing,
+  f as Pill
+};

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

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

package/lib/ui/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 "../../../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/ui/app/{masters.d.ts → masters/masters.d.ts}

@@ -1,20 +1,14 @@
 /// <reference types="react" />
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export { StreamLayerMastersThemeProvider } from '../../theme/masters';
 export type Overlays = {};
 export type MastersAppChildrenProps = {
     activateEventWithId: (event: string) => void;
     deactivate: () => void;
 };
-type AppNode = HTMLDivElement | null;
-export type AppNodeRef = React.MutableRefObject<AppNode>;
-export type ScrollNode = HTMLDivElement | null;
-export type ScrollNodeRef = React.MutableRefObject<ScrollNode>;
-export type HeaderNode = HTMLDivElement | null;
-export type HeaderNodeRef = React.MutableRefObject<HeaderNode>;
 export type MastersAppProps = {
     sdk: StreamLayerSDK;
     overlays?: Overlays;
     children: (methods: MastersAppChildrenProps) => React.ReactNode;
 };
 export declare const MastersApp: React.FC<MastersAppProps>;
-export {};

package/lib/ui/app/{masters.js → 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 { useAnalyticsListener as d, newTabLinkListener as x, appScrollListener as A, appClickListener as F } from "../../../hooks/analytics.js";
+import { useRef as S, useMemo as M, useEffect as b } from "react";
+import { SDKContainer as D, SDKScrollContainer as I } from "../styles.js";
+import { useSdkFeature as B } from "../useSdkFeature.js";
+import { useSdkResponsive as T } from "../useSdkResponsive.js";
+import { useSdkScroll as j } from "../useSdkScroll.js";
+import { resetCss as p } from "../../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 "../../theme/masters.js";
+import { ChannelsButtonId as P } from "../../navigation/button/Channels.js";
+import { LeaderBoardButtonId as G } from "../../navigation/button/LeaderBoard.js";
+import { FeaturedGroupsButtonId as V } from "../../navigation/button/FeaturedGroups.js";
 const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, responsiveStore: o }) => {
-  const [, r] = R(e);
+  const [, r] = B(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] = T(t), [r, f] = j(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: x }), d(r, {
     enabled: a,
     event: "scrollend",
-    listener: F,
+    listener: A,
     useDomNode: !0
   }), d(r, {
     enabled: a,
     event: "click",
-    listener: x,
+    listener: F,
     useDomNode: !0
   });
-  const L = b(() => ({ sdk: e }), [e]);
-  return D(() => {
+  const L = M(() => ({ sdk: e }), [e]);
+  return b(() => {
     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(D, { 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(I, { 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/{useMastersApp.js → masters/useMastersApp.js}

@@ -2,8 +2,8 @@ import { useStore as u } from "@nanostores/react";
 import { useRef as y, useState as d, useCallback as z, useEffect as c } from "react";
 import { FeatureType as l } from "@streamlayer/sdk-web-types";
 import "./Navigation/MastersNavigation/index.js";
-import { FeaturedGroupsButtonId as p } from "../navigation/button/FeaturedGroups.js";
-import { ChannelsButtonId as i } from "../navigation/button/Channels.js";
+import { FeaturedGroupsButtonId as p } from "../../navigation/button/FeaturedGroups.js";
+import { ChannelsButtonId as i } from "../../navigation/button/Channels.js";
 const C = (e) => {
   const f = y(""), [v, a] = d(!1), E = u(e.status), g = u(e.sdkStore.slStreamId), n = u(e.userId()), m = u(e.getActiveFeature()), o = E === "ready" && !!g.data, [A, r] = d(p), S = z(
     (t, s) => {

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

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

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

@@ -1,5 +1,5 @@
 import { MapStore } from 'nanostores';
-import { type ScrollNodeRef } from './masters';
+import { type ScrollNodeRef } from '.';
 import { type ResponsiveStore } from './useSdkResponsive';
 type ScrollData = {
     scrollPosition: number;

package/lib/ui/theme/MastersColors.d.ts

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

package/lib/ui/theme/MastersColors.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ColorItem as s } from "@storybook/blocks";
+import { MASTERS_COLORS as r } from "./masters-theme.js";
+const l = Object.keys(r), i = () => l.map((o) => /* @__PURE__ */ t(
+  s,
+  {
+    title: o,
+    subtitle: `--color-${o.toLowerCase().replaceAll("_", "-")}`,
+    colors: [r[o]]
+  },
+  o
+));
+export {
+  i as MastersColors
+};

package/lib/ui/theme/ThemeColors.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { ColorItem as e } from "@storybook/blocks";
-import { MASTERS_COLORS as r } from "./constants.js";
+import { PALETTE_COLORS as r } from "./constants.js";
 const l = Object.keys(r), p = () => l.map((o) => /* @__PURE__ */ t(
   e,
   {

package/lib/ui/theme/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const MASTERS_COLORS: {
+export declare const PALETTE_COLORS: {
     PRIMARY_GREEN1: string;
     PRIMARY_GREEN2: string;
     PRIMARY_GREEN3: string;

package/lib/ui/theme/constants.js

@@ -28,10 +28,10 @@ const N = {
   DIVIDER_COLOR_SECONDARY: "#53565a",
   GREEN_PRIMARY_BTN: "#009B77"
 }, T = {
-  PRIMARY_GREEN1: "#107D57",
-  PRIMARY_GREEN2: "#006747",
-  PRIMARY_GREEN3: "#1C4932",
-  PRIMARY_GREEN4: "#193526",
+  PRIMARY_GREEN1: "#5088C1",
+  PRIMARY_GREEN2: "#3C6DB4",
+  PRIMARY_GREEN3: "#2653A2",
+  PRIMARY_GREEN4: "#1B3A73",
   SECONDARY_RED1: "#DF2F3B",
   SECONDARY_RED2: "#BA0C2F",
   SECONDARY_RED3: "#f9d6d8",
@@ -75,7 +75,7 @@ export {
   O as BREAKPOINTS,
   E as COLORS,
   S as FONT,
-  T as MASTERS_COLORS,
   G as ORIENTATION,
+  T as PALETTE_COLORS,
   B as colors
 };