@streamlayer/react-ui 1.0.0 → 1.2.0

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

@@ -0,0 +1,9 @@
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const CloseIconWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const CloseIcon: any;
+export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SponsorLogo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const PresentsTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Subtitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Description: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ActionButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

package/lib/app/app/Notifications/Onboarding/Notification/styles.js

@@ -0,0 +1,50 @@
+import { styled as s } from "@linaria/react";
+import { SvgIcon as o } from "../../../../../ui/icons/index.js";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c1qjj4d4",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "CloseIconWrap",
+  class: "c1lg6b8a",
+  propsAsIs: !1
+}), e = () => o, l = /* @__PURE__ */ s(e())({
+  name: "CloseIcon",
+  class: "c159el66",
+  propsAsIs: !0
+}), p = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t16xmufv",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("img")({
+  name: "SponsorLogo",
+  class: "s83lc21",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "PresentsTitle",
+  class: "p1p7igia",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "Subtitle",
+  class: "s1eftsbu",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "d8uezec",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("button")({
+  name: "ActionButton",
+  class: "a1h1bk90",
+  propsAsIs: !1
+});
+export {
+  f as ActionButton,
+  l as CloseIcon,
+  c as CloseIconWrap,
+  a as Container,
+  I as Description,
+  r as PresentsTitle,
+  i as SponsorLogo,
+  m as Subtitle,
+  p as Title
+};

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { type Notification } from '@streamlayer/sdk-web-notifications';
-import { type AppNodeRef } from '../..';
+import { AppNodeRef } from '../../..';
 import { ResponsiveStore } from '../../../useSdkResponsive';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { Notification } from '@streamlayer/sdk-web-notifications';
+
 export declare const Onboarding: React.FC<{
     sdk: StreamLayerSDK;
     notification: Notification;

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

@@ -0,0 +1,168 @@
+import { jsx as r, jsxs as x, Fragment as L } from "react/jsx-runtime";
+import { styled as w } from "@linaria/react";
+import { useStore as T } from "@nanostores/react";
+import { useImagesPreload as B } from "../../../useImagesPreload.js";
+import { scrollIntoAppView as O } from "../../../useSdkScroll.js";
+import { useRef as E, useState as A, useMemo as _, useLayoutEffect as M, useEffect as P } from "react";
+import { FeatureType as R } from "@streamlayer/sdk-web-types";
+import { OnboardingUI as V } from "../../../../ui/gamification/onboarding/index.js";
+import { ModalPortal as W } from "../../../../ui/modal/index.js";
+import { ShowIn as $ } from "../../../../ui/show-in/index.js";
+import { Onboarding as S } from "./Notification/index.js";
+const C = [{
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_0.png",
+  tagline: "",
+  headline: /* @__PURE__ */ x(L, {
+    children: ["Welcome to ", /* @__PURE__ */ r("br", {}), " StreamLayer +"]
+  })
+}, {
+  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"
+}], j = /* @__PURE__ */ w("div")({
+  name: "OnboardingContainer",
+  class: "o1xni1kr",
+  propsAsIs: !1
+}), G = () => $, q = /* @__PURE__ */ w(G())({
+  name: "OnboardingNotificationContainer",
+  class: "o1vnouv7",
+  propsAsIs: !0
+}), k = /* @__PURE__ */ w("div")({
+  name: "InnerContainer",
+  class: "i59uefw",
+  propsAsIs: !1
+}), z = ({
+  deepLink: l,
+  onboardingOpts: e,
+  notification: o,
+  gamification: p,
+  loading: i,
+  sdk: d
+}) => {
+  var c, a, h, b, f, y, s;
+  const u = T(p.friends.getStore()), [g, t] = A(void 0), v = _(() => {
+    var m, I;
+    const n = d.getInviter();
+    return n ? (I = (m = u.data) == null ? void 0 : m.find(({
+      slId: F
+    }) => F === n)) == null ? void 0 : I.name : "";
+  }, [u.data, d]);
+  return P(() => {
+    const n = l.$store.subscribe((m) => {
+      m && t(m.data);
+    });
+    return () => {
+      n();
+    };
+  }, [l.$store]), /* @__PURE__ */ r(j, {
+    children: /* @__PURE__ */ r(V, {
+      loading: i,
+      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: (c = e.rules) == null ? void 0 : c.buttonLabel,
+      rulesTitle: (a = e.rules) == null ? void 0 : a.heading,
+      termsTitle: "Terms and Conditions",
+      termsText: (h = e.rules) == null ? void 0 : h.terms,
+      steps: C,
+      primaryColor: (b = e.inviteCard) == null ? void 0 : b.iconColor,
+      inviteLink: g,
+      inviteCardTitle: (f = e.inviteCard) == null ? void 0 : f.heading,
+      inviteCardSubtext: (y = e.inviteCard) == null ? void 0 : y.subtext,
+      inviteCardBtnLabel: (s = e.inviteCard) == null ? void 0 : s.buttonLabel,
+      onClose: () => {
+        var n;
+        (n = o.close) == null || n.call(o);
+      },
+      gamification: p,
+      sdk: d,
+      inviterName: v
+    })
+  });
+}, ne = ({
+  sdk: l,
+  notification: e,
+  saveHeight: o,
+  style: p,
+  appNode: i,
+  sdkInDesktopView: d,
+  responsiveStore: u
+}) => {
+  const g = E(null), t = e.data.onboarding, [v, c] = A(t == null ? void 0 : t.instantOpen), a = l.getFeature(R.GAMES), h = _(() => C == null ? void 0 : C.map(({
+    graphicSrc: s
+  }) => s), []), {
+    screen: b
+  } = T(u, {
+    keys: ["screen"]
+  });
+  M(() => {
+    var s;
+    o(((s = g.current) == null ? void 0 : s.getBoundingClientRect().height) || 0);
+  }, [o]);
+  const {
+    loading: f,
+    throttled: y
+  } = B(h);
+  return v && a && t && i.current && !y ? /* @__PURE__ */ r(W, {
+    container: i,
+    useContainer: !d,
+    children: /* @__PURE__ */ r(z, {
+      notification: e,
+      setOpened: c,
+      gamification: a,
+      onboardingOpts: t,
+      deepLink: a.deepLink,
+      loading: f,
+      renderToNode: i,
+      sdk: l
+    })
+  }) : /* @__PURE__ */ x(L, {
+    children: [/* @__PURE__ */ r(k, {
+      ref: g,
+      style: {
+        position: "absolute",
+        visibility: "hidden"
+      },
+      children: /* @__PURE__ */ r(S, {
+        close: () => {
+        },
+        action: () => {
+        },
+        onboarding: t
+      })
+    }), /* @__PURE__ */ r(q, {
+      style: p,
+      hiding: e.hiding,
+      children: /* @__PURE__ */ r(k, {
+        children: /* @__PURE__ */ r(S, {
+          close: e.close,
+          action: () => {
+            var n;
+            c(!0), (((n = i.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) < 0 && O(i, b.size, {
+              behavior: "smooth"
+            });
+          },
+          onboarding: t
+        })
+      })
+    })]
+  });
+};
+export {
+  ne as Onboarding
+};

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import type { AppNodeRef, ScrollNodeRef, HeaderNodeRef } from '../..';
+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;

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

@@ -1,19 +1,19 @@
-import { jsxs as f, Fragment as D, jsx as c } from "react/jsx-runtime";
+import { jsxs as a, Fragment as D, jsx as c } from "react/jsx-runtime";
 import { cx as N } from "@linaria/core";
-import { useStore as a } 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 g } from "@streamlayer/sdk-web-notifications";
-import { useAppContext as q } from "../useAppContext.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 { useStore as g } from "@nanostores/react";
+import { useAppContext as T } from "../useAppContext.js";
+import { scrollIntoAppView as E } from "../../useSdkScroll.js";
+import { useState as p, useMemo as O, useEffect as h, useRef as b, useCallback as w } from "react";
+import { r as q } from "../../../index-B1QdimmR.js";
+import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
+import { NotificationType as f } 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 = (o) => {
-  const [t, u] = p(0), i = E(null), d = w((r) => {
+  const [t, u] = p(0), i = b(null), d = w((r) => {
     i.current = r;
   }, []);
   h(() => {
@@ -34,18 +34,18 @@ const j = (o) => {
   var s, e;
   const {
     sdkInDesktopView: d
-  } = a(i, {
+  } = g(i, {
     keys: ["sdkInDesktopView"]
   }), {
     sdk: n
-  } = q(), [r, l, m] = j(t.id);
-  return t.type === g.QUESTION ? /* @__PURE__ */ f(D, {
+  } = T(), [r, l, m] = j(t.id);
+  return t.type === f.QUESTION ? /* @__PURE__ */ a(D, {
     children: [/* @__PURE__ */ c(A, {
       ref: r,
       children: /* @__PURE__ */ c(V, {
         ...t
       })
-    }), /* @__PURE__ */ f(B, {
+    }), /* @__PURE__ */ a(B, {
       style: {
         height: t.hiding ? 0 : l
       },
@@ -60,7 +60,7 @@ const j = (o) => {
         })
       }), /* @__PURE__ */ c(Q, {}, t.id)]
     })]
-  }) : t.type === g.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
+  }) : t.type === f.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
     style: {
       height: t.hiding ? 0 : l
     },
@@ -68,7 +68,7 @@ const j = (o) => {
     close: t.close,
     hiding: t.hiding,
     ...t.data.question
-  }) : t.type === g.ONBOARDING ? /* @__PURE__ */ c(x, {
+  }) : t.type === f.ONBOARDING ? /* @__PURE__ */ c(x, {
     style: {
       height: t.hiding ? 0 : l
     },
@@ -79,7 +79,7 @@ const j = (o) => {
     appNode: u,
     responsiveStore: i
   }) : null;
-}, F = "p6vl6vu", L = ({
+}, F = "p7vfi6t", L = ({
   pill: o,
   setPill: t,
   appNode: u,
@@ -91,26 +91,26 @@ const j = (o) => {
   var k, y;
   const {
     screen: l
-  } = a(n, {
+  } = g(n, {
     keys: ["screen"]
   }), {
     tabsShown: m,
     scrollPosition: s
-  } = a(r, {
+  } = g(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(U, {
-    title: o.type === g.QUESTION_RESOLVED ? "Prediction result" : `New ${((y = R[(k = o.data) == null ? void 0 : k.questionType]) == null ? void 0 : y.label) || "notification"}`,
+  return !o || !e.current ? null : q.createPortal(/* @__PURE__ */ c(U, {
+    title: o.type === f.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, {
+      }) : E(u, l.size, {
         behavior: "smooth"
       }), t(null);
     },
@@ -124,9 +124,9 @@ const j = (o) => {
   appNode: d,
   scrollStore: n
 }) => {
-  const [r] = p(o.getNotificationsStore()), l = a(r), [m, s] = p(null), e = T(() => o.getActiveNotification(), [o, l]);
+  const [r] = p(o.getNotificationsStore()), l = g(r), [m, s] = p(null), e = O(() => o.getActiveNotification(), [o, l]);
   return h(() => {
-    e && b.emit("notification", {
+    e && C.emit("notification", {
       action: "rendered",
       payload: {
         questionId: e.data.questionId,
@@ -139,7 +139,7 @@ const j = (o) => {
     }));
   }, [e]), h(() => {
     e || s(null);
-  }, [e]), /* @__PURE__ */ f(D, {
+  }, [e]), /* @__PURE__ */ a(D, {
     children: [!m && e && /* @__PURE__ */ c(z, {
       headerNode: t,
       appNode: d,

package/lib/app/app/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/app/app/Notifications/styles.js

@@ -0,0 +1,31 @@
+import { styled as s } from "@linaria/react";
+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, c = /* @__PURE__ */ s(e())({
+  name: "Container",
+  class: "c8ol1ve",
+  propsAsIs: !0
+}), t = /* @__PURE__ */ s("div")({
+  name: "InnerContainer",
+  class: "iqfywam",
+  propsAsIs: !1
+}), i = () => t, m = /* @__PURE__ */ s(i())({
+  name: "HiddenContainer",
+  class: "hokmtod",
+  propsAsIs: !0
+}), f = /* @__PURE__ */ s("div")({
+  name: "NotificationRefreshing",
+  class: "n192d1q8",
+  propsAsIs: !1
+}), r = () => n, d = /* @__PURE__ */ s(r())({
+  name: "Pill",
+  class: "p1lha68t",
+  propsAsIs: !0
+});
+export {
+  c as Container,
+  m as HiddenContainer,
+  t as InnerContainer,
+  f as NotificationRefreshing,
+  d as Pill
+};

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

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

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

@@ -3,7 +3,7 @@ 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";
+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(() => {

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
 export type AppAppChildrenProps = {
     activateEventWithId: (event: string) => void;
     deactivate: () => void;

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

@@ -1,33 +1,33 @@
-import { jsx as i, jsxs as f } from "react/jsx-runtime";
-import { useStore as N } from "@nanostores/react";
-import { useAnalyticsListener as m, newTabLinkListener as A, appScrollListener as C, appClickListener as L } from "../../../hooks/analytics.js";
-import { useRef as d, useEffect as S, useMemo as x } from "react";
-import { SDKContainer as D, SDKScrollContainer as F } from "../styles.js";
-import { useSdkFeature as b } from "../useSdkFeature.js";
-import { useSdkResponsive as y } from "../useSdkResponsive.js";
-import { useSdkScroll as E } from "../useSdkScroll.js";
-import { resetCss as v } from "../../theme/theme.js";
+import { jsx as i, jsxs as d } from "react/jsx-runtime";
+import { useStore as h } from "@nanostores/react";
+import { SDKContainer as A, SDKScrollContainer as C } from "../styles.js";
+import { useSdkFeature as L } from "../useSdkFeature.js";
+import { useSdkResponsive as x } from "../useSdkResponsive.js";
+import { useSdkScroll as D } from "../useSdkScroll.js";
+import { useAnalyticsListener as m, newTabLinkListener as F, appScrollListener as b, appClickListener as y } from "../../hooks/analytics.js";
+import { useRef as S, useEffect as v, useMemo as E } from "react";
+import { resetCss as u } from "../../ui/theme/theme.js";
 import { ActiveFeature as K, StandaloneFeature as j } from "./Features/index.js";
 import { SDKNavigation as R } from "./Navigation/index.js";
 import { SDKNotifications as w } from "./Notifications/index.js";
 import { useAppApp as I } from "./useApp.js";
 import { AppContext as M } from "./useAppContext.js";
-const P = ({ sdk: e, className: n, scrollStore: t, appNode: l, scrollNode: o, responsiveStore: r }) => {
-  const [, s] = b(e);
+const P = ({ sdk: e, className: n, scrollStore: t, appNode: a, scrollNode: o, responsiveStore: r }) => {
+  const [, s] = L(e);
   return /* @__PURE__ */ i(
     K,
     {
       className: n,
       scrollNode: o,
-      appNode: l,
+      appNode: a,
       scrollStore: t,
       feature: s,
       responsiveStore: r,
       sdk: e
     }
   );
-}, V = ({ sdk: e, className: n, appNode: t, responsiveStore: l }) => {
-  const o = N(e.featuresList.getStore());
+}, V = ({ sdk: e, className: n, appNode: t, responsiveStore: a }) => {
+  const o = h(e.featuresList.getStore());
   return o ? Array.from(o, (r) => {
     const s = e.getFeature(r);
     return s ? /* @__PURE__ */ i(
@@ -36,39 +36,39 @@ const P = ({ sdk: e, className: n, scrollStore: t, appNode: l, scrollNode: o, re
         className: n,
         appNode: t,
         feature: s,
-        responsiveStore: l,
+        responsiveStore: a,
         sdk: e
       },
       r
     ) : null;
   }) : null;
 }, Z = ({ sdk: e, event: n }) => {
-  const t = d(null), l = d(null), [o] = y(t), [r, s] = E(t, o), { sdkEnabled: a, sdkReady: c, activateEventWithId: u, deactivate: p, isLogged: g } = I(e);
-  S(() => {
-    n ? (e.createEventSession(n), u(n)) : p();
-  }, [n, u, p, e]), m(t, { enabled: a, event: "click", listener: A }), m(r, {
-    enabled: a,
+  const t = S(null), a = S(null), [o] = x(t), [r, s] = D(t, o), { sdkEnabled: l, sdkReady: c, activateEventWithId: p, deactivate: f, isLogged: N } = I(e);
+  v(() => {
+    n ? (e.createEventSession(n), p(n)) : f();
+  }, [n, p, f, e]), m(t, { enabled: l, event: "click", listener: F }), m(r, {
+    enabled: l,
     event: "scrollend",
-    listener: C,
+    listener: b,
     useDomNode: !0
   }), m(r, {
-    enabled: a,
+    enabled: l,
     event: "click",
-    listener: L,
+    listener: y,
     useDomNode: !0
   });
-  const h = x(() => ({ sdk: e }), [e]);
-  return S(() => {
+  const g = E(() => ({ sdk: e }), [e]);
+  return v(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ i(M.Provider, { value: h, children: /* @__PURE__ */ f(D, { ref: t, children: [
-    a && /* @__PURE__ */ i(R, { sdk: e }),
-    /* @__PURE__ */ f(F, { className: "sl-hide-on-modal", ref: r, "data-nav": a.toString(), children: [
+  }, []), /* @__PURE__ */ i(M.Provider, { value: g, children: /* @__PURE__ */ d(A, { ref: t, children: [
+    l && /* @__PURE__ */ i(R, { className: u, sdk: e, ref: a }),
+    /* @__PURE__ */ d(C, { className: "sl-hide-on-modal", ref: r, "data-nav": l.toString(), children: [
       c && /* @__PURE__ */ i(
         w,
         {
           sdk: e,
           scrollNode: r,
-          headerNode: l,
+          headerNode: a,
           appNode: t,
           scrollStore: s,
           responsiveStore: o
@@ -81,13 +81,13 @@ const P = ({ sdk: e, className: n, scrollStore: t, appNode: l, scrollNode: o, re
           responsiveStore: o,
           scrollNode: r,
           appNode: t,
-          className: v,
+          className: u,
           sdk: e
         }
       ),
-      c && /* @__PURE__ */ i(V, { responsiveStore: o, appNode: t, className: v, sdk: e })
+      c && /* @__PURE__ */ i(V, { responsiveStore: o, appNode: t, className: u, sdk: e })
     ] }),
-    a && !g && /* @__PURE__ */ i(
+    l && !N && /* @__PURE__ */ i(
       "div",
       {
         style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" },

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

@@ -0,0 +1,4 @@
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Content: React.FC<{
+    event?: string;
+}>;

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

@@ -0,0 +1,30 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
+import { useStreamLayer as m } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as o } from "../Advertisement/index.js";
+import { theme as i } from "../../../ui/theme/theme.js";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c15py6sl",
+  propsAsIs: !1
+}), c = ({
+  event: r
+}) => {
+  const n = m();
+  return n ? /* @__PURE__ */ e(a, {
+    className: i,
+    "data-testid": "overlay",
+    children: [/* @__PURE__ */ e("div", {
+      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(o, {
+      event: r,
+      sdk: n
+    }), /* @__PURE__ */ e("div", {
+      children: ["-------------", /* @__PURE__ */ t("br", {}), "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."]
+    })]
+  }) : null;
+};
+export {
+  a as Container,
+  c as Content
+};

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

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