@streamlayer/react-ui 1.32.4 → 1.33.1

package/lib/app/app/Insight/index.d.ts

@@ -1,5 +1,5 @@
-import { Gamification } from '@streamlayer/feature-gamification';
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { Gamification } from '../../../packages/feature-gamification/src/index.ts';
+import { StreamLayerSDK } from '../../../packages/sdk-web-interfaces/src/index.ts';
 export declare const QuestionWrap: {
     __wyw_meta: unknown;
 } & import('react').FC<{

package/lib/app/app/Layout/index.d.ts

@@ -1,4 +1,4 @@
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '../../../packages/sdk-web-interfaces/src/index.ts';
 export type LayoutProps = {
     sdk: StreamLayerSDK;
     sidebar?: React.ReactNode | (({ promo, app }: {

package/lib/app/app/Navigation/index.d.ts

@@ -1,4 +1,4 @@
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '../../../packages/sdk-web-interfaces/src/index.ts';
 export declare const SDKHeader: import('react').ForwardRefExoticComponent<{
     sdk: StreamLayerSDK;
     className?: string;

package/lib/app/app/Notifications/Onboarding/Notification/index.d.ts

@@ -1,5 +1,5 @@
-import { Notification } from '@streamlayer/sdk-web-notifications';
-import { GameSettings } from '@streamlayer/sdk-web-types';
+import { Notification } from '../../../../../packages/sdk-web-notifications/src/index.ts';
+import { GameSettings } from '../../../../../packages/sdk-web-types/src/index.ts';
 export declare const Onboarding: React.FC<{
     close: Notification['close'];
     action: Notification['action'];

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

@@ -1,7 +1,7 @@
 import { AppNodeRef } from '../../..';
 import { ResponsiveStore } from '../../../useSdkResponsive';
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { Notification } from '@streamlayer/sdk-web-notifications';
+import { StreamLayerSDK } from '../../../../packages/sdk-web-interfaces/src/index.ts';
+import { Notification } from '../../../../packages/sdk-web-notifications/src/index.ts';
 export declare const Onboarding: React.FC<{
     sdk: StreamLayerSDK;
     notification: Notification;

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

@@ -1,18 +1,19 @@
-import { jsx as n, jsxs as w, Fragment as O } from "react/jsx-runtime";
+import { jsx as n, jsxs as k, Fragment as O } from "react/jsx-runtime";
 import { styled as y } from "@linaria/react";
 import { useImagesPreload as _ } from "../../../useImagesPreload.js";
 import { scrollIntoAppView as E } from "../../../useSdkScroll.js";
 import { useRef as M, useState as T, useMemo as A, useLayoutEffect as R, useEffect as V } from "react";
 import { useStore as F } from "@streamlayer/react-polyfills";
-import { FeatureType as W } from "@streamlayer/sdk-web-types";
-import { OnboardingUI as $ } from "../../../../ui/gamification/onboarding/index.js";
-import { ModalPortal as j } from "../../../../ui/modal/index.js";
-import { ShowIn as P } from "../../../../ui/show-in/index.js";
+import { createSingleStore as W } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as $ } from "@streamlayer/sdk-web-types";
+import { OnboardingUI as j } from "../../../../ui/gamification/onboarding/index.js";
+import { ModalPortal as P } from "../../../../ui/modal/index.js";
+import { ShowIn as q } from "../../../../ui/show-in/index.js";
 import { Onboarding as L } from "./Notification/index.js";
 const C = [{
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_1.png",
   tagline: "",
-  headline: /* @__PURE__ */ w(O, {
+  headline: /* @__PURE__ */ k(O, {
     children: ["Welcome to ", /* @__PURE__ */ n("br", {}), " Live Challenge"]
   })
 }, {
@@ -21,11 +22,11 @@ const C = [{
 }, {
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_3.png",
   headline: "Win points and play against friends."
-}], q = /* @__PURE__ */ y("div")({
+}], z = /* @__PURE__ */ y("div")({
   name: "OnboardingContainer",
   class: "o1xni1kr",
   propsAsIs: !1
-}), z = () => P, D = /* @__PURE__ */ y(z())({
+}), D = () => q, G = /* @__PURE__ */ y(D())({
   name: "OnboardingNotificationContainer",
   class: "o1vnouv7",
   propsAsIs: !0
@@ -33,36 +34,38 @@ const C = [{
   name: "InnerContainer",
   class: "i59uefw",
   propsAsIs: !1
-}), G = /* @__PURE__ */ y("div")({
+}), U = /* @__PURE__ */ y("div")({
   name: "OnboardingOverlap",
   class: "ovnr8ov",
   propsAsIs: !1
-}), U = ({
+}), J = ({
   deepLink: l,
   onboardingOpts: e,
   notification: o,
-  gamification: p,
+  gamification: d,
   loading: s,
-  sdk: d,
+  sdk: c,
   throttled: I
 }) => {
-  var a, b, h, f, v, t, u;
-  const c = F(p.friends.getStore()), [r, k] = T(void 0), g = A(() => {
-    var m, S;
-    const i = d.getInviter();
-    return i ? (S = (m = c.data) == null ? void 0 : m.find(({
+  var a, b, h, f, v, t, m;
+  const u = F(d.friends ? d.friends.getStore() : W({
+    data: []
+  })), [r, S] = T(void 0), g = A(() => {
+    var p, w;
+    const i = c.getInviter();
+    return i ? (w = (p = u.data) == null ? void 0 : p.find(({
       slId: B
-    }) => B === i)) == null ? void 0 : S.name : "";
-  }, [c.data, d]);
+    }) => B === i)) == null ? void 0 : w.name : "";
+  }, [u.data, c]);
   return V(() => {
-    const i = l.$store.subscribe((m) => {
-      m && k(m.data);
+    const i = l.$store.subscribe((p) => {
+      p && S(p.data);
     });
     return () => {
       i();
     };
-  }, [l.$store]), /* @__PURE__ */ w(q, {
-    children: [/* @__PURE__ */ n($, {
+  }, [l.$store]), /* @__PURE__ */ k(z, {
+    children: [/* @__PURE__ */ n(j, {
       loading: s,
       rules: [{
         label: "Answer as many questions as you like.",
@@ -83,26 +86,26 @@ const C = [{
       inviteLink: r,
       inviteCardTitle: (v = e.inviteCard) == null ? void 0 : v.heading,
       inviteCardSubtext: (t = e.inviteCard) == null ? void 0 : t.subtext,
-      inviteCardBtnLabel: (u = e.inviteCard) == null ? void 0 : u.buttonLabel,
+      inviteCardBtnLabel: (m = e.inviteCard) == null ? void 0 : m.buttonLabel,
       onClose: () => {
         var i;
         (i = o.close) == null || i.call(o);
       },
-      gamification: p,
-      sdk: d,
+      gamification: d,
+      sdk: c,
       inviterName: g
-    }), I && /* @__PURE__ */ n(G, {})]
+    }), I && /* @__PURE__ */ n(U, {})]
   });
-}, te = ({
+}, ie = ({
   sdk: l,
   notification: e,
   saveHeight: o,
-  style: p,
+  style: d,
   appNode: s,
-  sdkInDesktopView: d,
+  sdkInDesktopView: c,
   responsiveStore: I
 }) => {
-  const c = M(null), r = e.data.onboarding, [k, g] = T(r == null ? void 0 : r.instantOpen), a = l.getFeature(W.GAMES), b = A(() => C == null ? void 0 : C.map(({
+  const u = M(null), r = e.data.onboarding, [S, g] = T(r == null ? void 0 : r.instantOpen), a = l.getFeature($.GAMES), b = A(() => C == null ? void 0 : C.map(({
     graphicSrc: t
   }) => t), []), {
     screen: h
@@ -111,16 +114,16 @@ const C = [{
   });
   R(() => {
     var t;
-    o(((t = c.current) == null ? void 0 : t.getBoundingClientRect().height) || 0);
+    o(((t = u.current) == null ? void 0 : t.getBoundingClientRect().height) || 0);
   }, [o]);
   const {
     loading: f,
     throttled: v
   } = _(b);
-  return k && a && r && s.current ? /* @__PURE__ */ n(j, {
+  return S && a && r && s.current ? /* @__PURE__ */ n(P, {
     container: s,
-    useContainer: !d,
-    children: /* @__PURE__ */ n(U, {
+    useContainer: !c,
+    children: /* @__PURE__ */ n(J, {
       throttled: v,
       notification: e,
       setOpened: g,
@@ -131,9 +134,9 @@ const C = [{
       renderToNode: s,
       sdk: l
     })
-  }) : /* @__PURE__ */ w(O, {
+  }) : /* @__PURE__ */ k(O, {
     children: [/* @__PURE__ */ n(x, {
-      ref: c,
+      ref: u,
       style: {
         position: "absolute",
         visibility: "hidden"
@@ -145,15 +148,15 @@ const C = [{
         },
         onboarding: r
       })
-    }), /* @__PURE__ */ n(D, {
-      style: p,
+    }), /* @__PURE__ */ n(G, {
+      style: d,
       hiding: e.hiding,
       children: /* @__PURE__ */ n(x, {
         children: /* @__PURE__ */ n(L, {
           close: e.close,
           action: () => {
-            var u;
-            g(!0), (((u = s.current) == null ? void 0 : u.getBoundingClientRect().y) || 0) < 0 && E(s, h.size, {
+            var m;
+            g(!0), (((m = s.current) == null ? void 0 : m.getBoundingClientRect().y) || 0) < 0 && E(s, h.size, {
               behavior: "smooth"
             });
           },
@@ -164,5 +167,5 @@ const C = [{
   });
 };
 export {
-  te as Onboarding
+  ie as Onboarding
 };

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

@@ -1,7 +1,7 @@
 import { AppNodeRef, ScrollNodeRef, HeaderNodeRef } from '../..';
 import { ResponsiveStore } from '../../useSdkResponsive';
 import { ScrollStore } from '../../useSdkScroll';
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '../../../packages/sdk-web-interfaces/src/index.ts';
 export declare const SDKNotifications: React.FC<{
     sdk: StreamLayerSDK;
     scrollNode: ScrollNodeRef;

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

@@ -1,4 +1,4 @@
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '../../../packages/sdk-web-interfaces/src/index.ts';
 export declare const StreamLayerSDKPoints: React.FC<{
     sdk: StreamLayerSDK;
 }>;

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

@@ -1,4 +1,4 @@
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '../../packages/sdk-web-interfaces/src/index.ts';
 export type AppAppChildrenProps = {
     activateEventWithId: (event: string) => void;
     deactivate: () => void;

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

@@ -1,36 +1,36 @@
-import { jsxs as i, jsx as t, Fragment as p } from "react/jsx-runtime";
-import { App as m } from "../index.js";
+import { jsxs as i, jsx as t, Fragment as s } from "react/jsx-runtime";
+import { App as p } from "../index.js";
 import { StreamLayerSDKAdvertisement as u } from "../Advertisement/index.js";
-import { StreamLayerSDKNotification as c } from "../InApp/index.js";
-import { Layout as l } from "../Layout/index.js";
-import { useState as f } from "react";
-import { StreamLayerProvider as S, StreamLayerSDKEvent as b, useStreamLayer as d, useStreamLayerUI as h } from "@streamlayer/react";
-import { useStreamLayerDebug as y } from "../../../utils/debug/index.js";
-import { Video as v } from "./video.js";
-import { VideoContainer as A, VideoMuteButton as L } from "./styles.js";
-const s = () => {
+import { StreamLayerSDKNotification as m } from "../InApp/index.js";
+import { Layout as c } from "../Layout/index.js";
+import { d as l, e as f, u as d, a as S } from "../../../hooks-B0Qttldg.js";
+import { useState as b } from "react";
+import { useStreamLayerDebug as h } from "../../../utils/debug/index.js";
+import { Video as y } from "./video.js";
+import { VideoContainer as v, VideoMuteButton as A } from "./styles.js";
+const L = () => {
   console.log("deep link handled cb");
 }, k = ({ withSidebarNotification: r }) => {
-  const o = d(), e = h();
-  return !o || !e.app && !e.appNotification && !e.appSidebar || !e.app && !e.appSidebar && e.appNotification && !r ? null : /* @__PURE__ */ t(m, { sdk: o, onDeepLinkHandled: s });
+  const o = d(), e = S();
+  return !o || !e.app && !e.appNotification && !e.appSidebar || !e.app && !e.appSidebar && e.appNotification && !r ? null : /* @__PURE__ */ t(p, { sdk: o });
 }, g = () => {
-  const r = d(), [o, e] = f(!1);
+  const r = d(), [o, e] = b(!1);
   return r ? /* @__PURE__ */ t(
-    l,
+    c,
     {
       sdk: r,
       banner: /* @__PURE__ */ t(u, { sdk: r, banner: "bottom", persistent: !0 }),
-      sidebar: /* @__PURE__ */ i(p, { children: [
+      sidebar: /* @__PURE__ */ i(s, { children: [
         /* @__PURE__ */ t(u, { sdk: r, sidebar: "right", muted: !o, skipAutoClose: !0, externalAd: !0, persistent: !0 }),
         /* @__PURE__ */ t(k, { withSidebarNotification: !1 })
       ] }),
-      notification: /* @__PURE__ */ i(p, { children: [
+      notification: /* @__PURE__ */ i(s, { children: [
         /* @__PURE__ */ t(u, { sdk: r, notification: !0, persistent: !0 }),
-        /* @__PURE__ */ t(c, { sdk: r })
+        /* @__PURE__ */ t(m, { sdk: r })
       ] }),
-      children: /* @__PURE__ */ i(A, { className: "divAnchor", children: [
-        /* @__PURE__ */ t(v, { muted: o, toggleMute: e }),
-        /* @__PURE__ */ t(L, { onClick: () => e((n) => !n), children: o ? "unmute" : "mute" })
+      children: /* @__PURE__ */ i(v, { className: "divAnchor", children: [
+        /* @__PURE__ */ t(y, { muted: o, toggleMute: e }),
+        /* @__PURE__ */ t(A, { onClick: () => e((n) => !n), children: o ? "unmute" : "mute" })
       ] })
     }
   ) : null;
@@ -40,20 +40,20 @@ const s = () => {
   production: e,
   friendsTab: n
 }) => {
-  const a = y({ sdkKey: r, eventId: o, production: e });
+  const a = h({ sdkKey: r, eventId: o, production: e });
   return /* @__PURE__ */ i(
-    S,
+    l,
     {
       sdkKey: a.sdkKey,
       production: a.env === "production",
       autoEnable: !0,
-      onDeepLinkHandled: s,
+      onDeepLinkHandled: L,
       withAd: !0,
       withAdNotification: !0,
       friendsTab: n,
       children: [
         /* @__PURE__ */ t(g, {}),
-        /* @__PURE__ */ t(b, { event: a.event })
+        /* @__PURE__ */ t(f, { event: a.event })
       ]
     }
   );

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

@@ -1,10 +1,10 @@
 import { jsx as r } from "react/jsx-runtime";
 import { styled as u } from "@linaria/react";
-import { StreamLayerProvider as p, useStreamLayer as c } from "@streamlayer/react";
+import { d as p, u as c } from "../../../../hooks-B0Qttldg.js";
 import { StreamLayerSDKInsight as y } from "../../Insight/index.js";
 import { StreamLayerThemeProvider as f } from "../../../../ui/theme/index.js";
-import { useStreamLayerDebug as h } from "../../../../utils/debug/index.js";
-import { customTheme as l } from "./styles.js";
+import { useStreamLayerDebug as l } from "../../../../utils/debug/index.js";
+import { customTheme as h } from "./styles.js";
 import { Video as v } from "./video.js";
 const S = /* @__PURE__ */ u("div")({
   name: "Body",
@@ -16,7 +16,7 @@ const S = /* @__PURE__ */ u("div")({
 }) => {
   const e = c();
   return e ? /* @__PURE__ */ r(f, {
-    customTheme: l,
+    customTheme: h,
     children: /* @__PURE__ */ r(y, {
       hideHeader: t,
       sdk: e,
@@ -28,30 +28,29 @@ const S = /* @__PURE__ */ u("div")({
   sdkKey: t,
   eventId: o,
   layoutMode: e,
-  insightId: n,
-  production: i,
-  onlyInsight: a,
-  skipAutoClose: s,
+  insightId: s,
+  production: n,
+  onlyInsight: i,
+  skipAutoClose: a,
   hideHeader: d
 }) => {
-  const m = h({
+  const m = l({
     sdkKey: t,
     eventId: o,
-    production: i
+    production: n
   });
   return /* @__PURE__ */ r(p, {
     sdkKey: m.sdkKey,
     event: m.event,
     production: m.env === "production",
     autoEnable: !0,
-    children: a ? /* @__PURE__ */ r(L, {
-      skipAutoClose: s,
-      insightId: n,
+    children: i ? /* @__PURE__ */ r(L, {
+      insightId: s,
       hideHeader: d
     }) : /* @__PURE__ */ r(S, {
       children: /* @__PURE__ */ r(v, {
-        skipAutoClose: s,
-        insightId: n,
+        skipAutoClose: a,
+        insightId: s,
         layoutMode: e
       })
     })

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

@@ -1,11 +1,11 @@
 import { jsxs as i, Fragment as h, jsx as e } from "react/jsx-runtime";
-import { useRef as c } from "react";
-import { useStreamLayer as l } from "@streamlayer/react";
+import { u as c } from "../../../../hooks-B0Qttldg.js";
+import { useRef as l } from "react";
 import { StreamLayerSDKInsight as n } from "../../Insight/index.js";
 import { StreamLayerThemeProvider as s } from "../../../../ui/theme/index.js";
 import { VideoFrame as p, customTheme as a, VideoPlayerWrap as u, InsightContainerMobile as f, InsightContainerOverlay as g, InsightContainerLBar as v } from "./styles.js";
 const F = ({ insightId: t, layoutMode: m, skipAutoClose: o }) => {
-  const r = l(), d = c(null);
+  const r = c(), d = l(null);
   return /* @__PURE__ */ i(h, { children: [
     /* @__PURE__ */ i(p, { ref: d, "data-testid": "video-frame", children: [
       /* @__PURE__ */ e(m === "cover" ? g : v, { children: r && /* @__PURE__ */ e(s, { customTheme: a, children: /* @__PURE__ */ e(n, { skipAutoClose: o, sdk: r, insightId: t, persistent: !0 }) }) }),

package/lib/app/app/story/promotion/content.js

@@ -1,8 +1,8 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import { styled as r } from "@linaria/react";
-import { useStreamLayer as o } from "@streamlayer/react";
-import { StreamLayerSDKAdvertisement as i } from "../../Advertisement/index.js";
-import { theme as a } from "../../../../ui/theme/theme.js";
+import { u as o } from "../../../../hooks-B0Qttldg.js";
+import { StreamLayerSDKAdvertisement as a } from "../../Advertisement/index.js";
+import { theme as i } from "../../../../ui/theme/theme.js";
 const d = /* @__PURE__ */ r("div")({
   name: "Container",
   class: "c1g3vhjc",
@@ -16,11 +16,11 @@ const d = /* @__PURE__ */ r("div")({
 }) => {
   const s = o();
   return s ? /* @__PURE__ */ e(d, {
-    className: a,
+    className: i,
     "data-testid": "overlay",
     children: [/* @__PURE__ */ e(n, {
       children: ["Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ", /* @__PURE__ */ t("br", {}), "-------------"]
-    }), /* @__PURE__ */ t(i, {
+    }), /* @__PURE__ */ t(a, {
       skipAutoClose: m,
       sdk: s,
       persistent: !0

package/lib/app/app/story/promotion/index.d.ts

@@ -7,4 +7,5 @@ export declare const PromotionStory: React.FC<{
     skipAutoClose?: boolean;
     sidebar: 'left' | 'right';
     banner: 'top' | 'bottom';
+    layoutMode?: 'cover' | 'side-by-side';
 }>;

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

@@ -1,47 +1,46 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { styled as r } from "@linaria/react";
-import { StreamLayerProvider as l } from "@streamlayer/react";
+import { d as l } from "../../../../hooks-B0Qttldg.js";
 import { useStreamLayerDebug as y } from "../../../../utils/debug/index.js";
 import { Video as u } from "./video.js";
-const v = /* @__PURE__ */ r("div")({
+const f = /* @__PURE__ */ r("div")({
   name: "Body",
   class: "bqh4lcc",
   propsAsIs: !1
-}), f = /* @__PURE__ */ r("div")({
+}), b = /* @__PURE__ */ r("div")({
   name: "Main",
   class: "mgga81b",
   propsAsIs: !1
 }), k = ({
-  isMobileScreen: t,
-  promotionId: s,
-  sdkKey: n,
-  eventId: i,
+  isMobileScreen: s,
+  promotionId: t,
+  sdkKey: i,
+  eventId: n,
   sidebar: d,
-  skipAutoClose: m,
-  production: a,
+  skipAutoClose: a,
+  production: m,
   banner: c,
   layoutMode: p = "side-by-side"
 }) => {
-  const e = y({
-    sdkKey: n,
-    eventId: i,
-    production: a
+  const o = y({
+    sdkKey: i,
+    eventId: n,
+    production: m
   });
-  return /* @__PURE__ */ o(f, {
-    children: /* @__PURE__ */ o(l, {
-      sdkKey: e.sdkKey,
-      event: e.event,
-      production: e.env === "production",
+  return /* @__PURE__ */ e(b, {
+    children: /* @__PURE__ */ e(l, {
+      sdkKey: o.sdkKey,
+      event: o.event,
+      production: o.env === "production",
       autoEnable: !0,
-      children: /* @__PURE__ */ o(v, {
-        children: /* @__PURE__ */ o(u, {
-          event: e.event,
+      children: /* @__PURE__ */ e(f, {
+        children: /* @__PURE__ */ e(u, {
           banner: c,
           sidebar: d,
           layoutMode: p,
-          promotionId: s,
-          skipAutoClose: m,
-          isMobileScreen: t
+          promotionId: t,
+          skipAutoClose: a,
+          isMobileScreen: s
         })
       })
     })

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

@@ -4,6 +4,5 @@ export declare const Video: React.FC<{
     layoutMode: 'cover' | 'side-by-side';
     isMobileScreen?: boolean;
     skipAutoClose?: boolean;
-    event?: string;
     promotionId?: string;
 }>;