@streamlayer/react-ui 0.100.5 → 1.0.0

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

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

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

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

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

@@ -2,19 +2,19 @@ import { jsx as r, jsxs as f, Fragment as L } from "react/jsx-runtime";
 import { styled as h } from "@linaria/react";
 import { useStore as i } from "@nanostores/react";
 import { useRef as k } from "react";
-import { useClipboardCopy as u } from "../../useClipboardCopy.js";
-import { InviteLink as I } from "../../../gamification/invite-link/index.js";
+import { useClipboardCopy as u } from "../../../useClipboardCopy.js";
+import { InviteLink as I } from "../../../../gamification/invite-link/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "../../../icons/index.js";
-import "../../../gamification/leaderboard/list-item/styles.js";
-import "../../../../styles_z07sl8-l0sNRNKZ.js";
-import { LeaderboardStaticList as y } from "../../../gamification/leaderboard/static.js";
+import "../../../../icons/index.js";
+import "../../../../gamification/leaderboard/list-item/styles.js";
+import "../../../../../styles_z07sl8-l0sNRNKZ.js";
+import { LeaderboardStaticList as y } from "../../../../gamification/leaderboard/static.js";
 import { Friends as C } from "./Friends.js";
 const b = /* @__PURE__ */ h("div")({
   name: "InviteLinkContainer",
-  class: "i1chxfpe",
+  class: "i15y1ll1",
   propsAsIs: !1
 }), q = ({
   gamification: e,

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

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

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

@@ -3,14 +3,14 @@ import { styled as l } from "@linaria/react";
 import { useStore as n } from "@nanostores/react";
 import { QuestionType as a } from "@streamlayer/sdk-web-types";
 import { useMastersContext as m } from "../../useMastersContext.js";
-import { VoteHeader as c } from "../../../gamification/detail/header/index.js";
-import { Sponsor as p } from "../../../gamification/detail/sponsor/index.js";
-import { Vote as f, VoteSkeleton as b } from "../../../gamification/vote/index.js";
-import { InsightDetails as y } from "../../../gamification/vote/insight-details/index.js";
-import { TwitterDetails as V } from "../../../gamification/vote/twitter-details/index.js";
-const d = /* @__PURE__ */ l("div")({
+import { VoteHeader as c } from "../../../../gamification/detail/header/index.js";
+import { Sponsor as p } from "../../../../gamification/detail/sponsor/index.js";
+import { Vote as f, VoteSkeleton as b } from "../../../../gamification/vote/index.js";
+import { InsightDetails as y } from "../../../../gamification/vote/insight-details/index.js";
+import { TwitterDetails as V } from "../../../../gamification/vote/twitter-details/index.js";
+const h = /* @__PURE__ */ l("div")({
   name: "QuestionContainer",
-  class: "qdri6g3",
+  class: "q142mohu",
   propsAsIs: !1
 }), x = ({
   openedQuestion: t
@@ -26,7 +26,7 @@ const d = /* @__PURE__ */ l("div")({
     ...t.attributes.attributes.value,
     controlVideo: r == null ? void 0 : r.controlVideoPlayer
   }) : null;
-}, h = ({
+}, d = ({
   extendedQuestion: t,
   vote: r,
   close: s
@@ -49,11 +49,11 @@ const d = /* @__PURE__ */ l("div")({
   if (!r)
     return null;
   const o = r.type;
-  return /* @__PURE__ */ u(d, {
+  return /* @__PURE__ */ u(h, {
     children: [/* @__PURE__ */ e(c, {
       close: t.closeQuestion,
       type: ((i = r.attributes) == null ? void 0 : i.type) || a.UNSET
-    }), o === "question" && /* @__PURE__ */ e(h, {
+    }), o === "question" && /* @__PURE__ */ e(d, {
       vote: t.submitAnswer,
       close: t.closeQuestion,
       extendedQuestion: s

package/lib/ui/app/masters/Features/Gamification/QuestionsList.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const QuestionsList: React.FC<{
+    store: ReturnType<Exclude<Gamification['feedList'], undefined>['getStore']>;
+    openQuestion: (questionId: string) => void;
+}>;

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

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { useStore as i } from "@nanostores/react";
 import { useMastersContext as n } from "../../useMastersContext.js";
-import { QuestionList as m } from "../../../gamification/question/list/index.js";
+import { QuestionList as m } from "../../../../gamification/question/list/index.js";
 const a = ({ store: t, openQuestion: r }) => {
   const { sdk: o } = n(), e = i(t);
   return /* @__PURE__ */ s(m, { openQuestion: r, questions: e.data, controlVideo: o == null ? void 0 : o.controlVideoPlayer });

package/lib/ui/app/masters/Features/Gamification/Tabs.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type Gamification } from '@streamlayer/feature-gamification';
+import type { AppNodeRef, ScrollNodeRef } from '../../..';
+import { ResponsiveStore } from '../../../useSdkResponsive';
+import { ScrollStore } from '../../../useSdkScroll';
+export declare const Tabs: React.FC<{
+    appNode: AppNodeRef;
+    gamification: Gamification;
+    scrollStore: ScrollStore;
+    scrollNode: ScrollNodeRef;
+    responsiveStore: ResponsiveStore;
+    className?: string;
+    style?: React.CSSProperties;
+}>;

package/lib/ui/app/masters/Features/Gamification/Tabs.js

@@ -0,0 +1,44 @@
+import { jsxs as h, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { useStore as u } from "@nanostores/react";
+import { useState as D, useTransition as T, useEffect as v } from "react";
+import { TabsContainer as C, TabsNavContainer as A, SDKWhiteContainer as I, UserSummaryContainer as P, SDKContentContainer as S, LeaderboardContainer as V } from "../../../styles.js";
+import { scrollIntoAppView as E } from "../../../useSdkScroll.js";
+import { ActivePages as a, Tabs as K } from "../../../../gamification/tabs/index.js";
+import { Leaderboard as L } from "./Leaderboard.js";
+import { QuestionsList as F } from "./QuestionsList.js";
+import { UserSummary as O } from "./UserSummary.js";
+const q = ({ gamification: s, className: f, scrollStore: t, scrollNode: l, appNode: c, style: b, responsiveStore: n }) => {
+  const { tabsShown: d } = u(t, { keys: ["tabsShown"] }), [i, w] = D(a.HOME), [, y] = T(), { sdkInDesktopView: m, screen: g } = u(n, { keys: ["sdkInDesktopView"] }), k = (r) => {
+    y(() => {
+      var p;
+      w(r), m === !1 && (((p = c.current) == null ? void 0 : p.getBoundingClientRect().y) || 0) < 0 && E(c, g.size, { behavior: "instant" });
+    });
+  };
+  v(() => t.subscribe((r) => {
+    if (r.scrollPosition === 0) {
+      t.setKey("tabsShown", !0);
+      return;
+    }
+    n.get().sdkInDesktopView ? t.setKey("tabsShown", r.scrollDirection === "backward") : t.setKey("tabsShown", r.scrollDirection === "forward");
+  }), [t, n]);
+  let o = "0px";
+  return m ? o = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : o = d ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px", /* @__PURE__ */ h(C, { className: f, style: b, children: [
+    /* @__PURE__ */ e(
+      A,
+      {
+        style: {
+          top: o
+        },
+        children: /* @__PURE__ */ e(K, { activePage: i, toggleActivePage: k })
+      }
+    ),
+    i === a.HOME && /* @__PURE__ */ h(x, { children: [
+      /* @__PURE__ */ e(I, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(O, { userSummary: s.userSummary }) }) }),
+      /* @__PURE__ */ e(S, { style: { flex: 1 }, children: /* @__PURE__ */ e(F, { openQuestion: s.openQuestion, store: s.feedList.getStore() }) })
+    ] }),
+    i === a.LEADERBOARD && /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(L, { scrollStore: t, scrollNode: l, gamification: s }) })
+  ] });
+};
+export {
+  q as Tabs
+};

package/lib/ui/app/masters/Features/Gamification/UserSummary.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const UserSummary: React.FC<{
+    userSummary: Exclude<Gamification['userSummary'], undefined>;
+}>;

package/lib/ui/app/masters/Features/Gamification/UserSummary.js

@@ -0,0 +1,18 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useState as i, useEffect as n } from "react";
+import { UserStatistics as a } from "../../../../gamification/user-statistics/index.js";
+const b = ({ userSummary: r }) => {
+  var e;
+  const [t, s] = i(void 0);
+  return n(() => {
+    const c = r.$store.subscribe((o) => {
+      o && s(o);
+    });
+    return () => {
+      c();
+    };
+  }, [r]), /* @__PURE__ */ m(a, { loading: !(t != null && t.summary), ...t == null ? void 0 : t.summary, successRate: (e = t == null ? void 0 : t.percentage) == null ? void 0 : e.correct });
+};
+export {
+  b as UserSummary
+};

package/lib/ui/app/masters/Features/Gamification/gamification-feature.d.ts

@@ -0,0 +1,2 @@
+import { GamificationOverlay } from './';
+export default GamificationOverlay;

package/lib/ui/app/masters/Features/Gamification/gamification-feature.js

@@ -0,0 +1,4 @@
+import { GamificationOverlay as i } from "./index.js";
+export {
+  i as default
+};

package/lib/ui/app/masters/Features/Gamification/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { type Gamification as GamificationClass } from '@streamlayer/feature-gamification';
+import type { AppNodeRef, ScrollNodeRef } from '../../..';
+import { ResponsiveStore } from '../../../useSdkResponsive';
+import { ScrollStore } from '../../../useSdkScroll';
+export declare const GamificationOverlay: React.FC<{
+    gamification: GamificationClass;
+    className?: string;
+    scrollStore: ScrollStore;
+    responsiveStore: ResponsiveStore;
+    appNode: AppNodeRef;
+    scrollNode: ScrollNodeRef;
+}>;
+/**
+ * Standalone version of the gamification overlay
+ * includes the question and user details, which are shown in a modal and should be available on any overlay
+ */
+export declare const GamificationOverlayStandalone: React.FC<{
+    gamification: GamificationClass;
+    className?: string;
+    responsiveStore: ResponsiveStore;
+    appNode: AppNodeRef;
+}>;

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

@@ -1,21 +1,21 @@
 import { jsx as n, jsxs as f } from "react/jsx-runtime";
 import { styled as p } from "@linaria/react";
 import { useStore as a } from "@nanostores/react";
-import { useHideTransition as h } from "../../../../hooks/showIn.js";
-import { SDKWhiteContainer as C } from "../../styles.js";
-import { VoteHeader as k } from "../../../gamification/detail/header/index.js";
-import { UserStatistics as S } from "../../../gamification/user-statistics/index.js";
-import { ModalPortal as U } from "../../../modal/index.js";
-import { ShowIn as I } from "../../../show-in/index.js";
-import { Question as x } from "./Question.js";
-import { Tabs as y } from "./Tabs.js";
-const O = () => I, m = /* @__PURE__ */ p(O())({
+import { useHideTransition as h } from "../../../../../hooks/showIn.js";
+import { SDKWhiteContainer as k } from "../../../styles.js";
+import { VoteHeader as C } from "../../../../gamification/detail/header/index.js";
+import { UserStatistics as S } from "../../../../gamification/user-statistics/index.js";
+import { ModalPortal as U } from "../../../../modal/index.js";
+import { ShowIn as I } from "../../../../show-in/index.js";
+import { Question as v } from "./Question.js";
+import { Tabs as x } from "./Tabs.js";
+const y = () => I, m = /* @__PURE__ */ p(y())({
   name: "OpenedContainer",
-  class: "oar61gl",
+  class: "o11khimm",
   propsAsIs: !0
-}), v = /* @__PURE__ */ p("div")({
+}), O = /* @__PURE__ */ p("div")({
   name: "UserContainer",
-  class: "u14zaal4",
+  class: "u1u71vrh",
   propsAsIs: !1
 }), w = ({
   correct: e,
@@ -23,52 +23,52 @@ const O = () => I, m = /* @__PURE__ */ p(O())({
 }) => {
   const o = e + r;
   return o === 0 ? 0 : Math.round(e / o * 100);
-}, z = ({
+}, E = ({
   gamification: e,
   scrollStore: r,
   className: o,
   appNode: i,
   scrollNode: s,
   responsiveStore: t
-}) => /* @__PURE__ */ n(y, {
+}) => /* @__PURE__ */ n(x, {
   appNode: i,
   scrollStore: r,
   scrollNode: s,
   className: o,
   gamification: e,
   responsiveStore: t
-}), E = ({
+}), F = ({
   gamification: e,
   className: r,
   appNode: o,
   responsiveStore: i
 }) => {
   const s = a(e.openedQuestion.$store), t = a(e.openedUser), {
-    sdkInDesktopView: d
+    sdkInDesktopView: u
   } = a(i, {
     keys: ["sdkInDesktopView"]
   }), {
-    hiding: l,
-    onAnimationEnd: c
+    hiding: c,
+    onAnimationEnd: l
   } = h();
   if (!o.current || !s && !t)
     return null;
-  const u = s ? /* @__PURE__ */ n(m, {
+  const d = s ? /* @__PURE__ */ n(m, {
     className: r,
-    hiding: l,
-    onAnimationEnd: c,
-    children: /* @__PURE__ */ n(x, {
+    hiding: c,
+    onAnimationEnd: l,
+    children: /* @__PURE__ */ n(v, {
       gamification: e
     })
   }) : t ? /* @__PURE__ */ n(m, {
     className: r,
-    hiding: l,
-    onAnimationEnd: c,
-    children: /* @__PURE__ */ f(v, {
-      children: [/* @__PURE__ */ n(k, {
+    hiding: c,
+    onAnimationEnd: l,
+    children: /* @__PURE__ */ f(O, {
+      children: [/* @__PURE__ */ n(C, {
         label: "Friend's Rank",
         close: e.closeUser
-      }), /* @__PURE__ */ n(C, {
+      }), /* @__PURE__ */ n(k, {
         children: /* @__PURE__ */ n(S, {
           ...t,
           successRate: w(t)
@@ -78,11 +78,11 @@ const O = () => I, m = /* @__PURE__ */ p(O())({
   }) : null;
   return /* @__PURE__ */ n(U, {
     container: o,
-    useContainer: !d,
-    children: u
+    useContainer: !u,
+    children: d
   });
 };
 export {
-  z as GamificationOverlay,
-  E as GamificationOverlayStandalone
+  E as GamificationOverlay,
+  F as GamificationOverlayStandalone
 };

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { Features } from '@streamlayer/sdk-web-features';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import type { AppNodeRef, ScrollNodeRef } from '../..';
+import { ResponsiveStore } from '../../useSdkResponsive';
+import { ScrollStore } from '../../useSdkScroll';
+/** render feature by type */
+export declare const ActiveFeature: React.FC<{
+    sdk: StreamLayerSDK;
+    feature: Features | null;
+    scrollStore: ScrollStore;
+    responsiveStore: ResponsiveStore;
+    appNode: AppNodeRef;
+    scrollNode: ScrollNodeRef;
+    className?: string;
+}>;
+/** render feature by type */
+export declare const StandaloneFeature: React.FC<{
+    sdk: StreamLayerSDK;
+    feature: Features | null;
+    responsiveStore: ResponsiveStore;
+    appNode: AppNodeRef;
+    className?: string;
+}>;

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

@@ -0,0 +1,37 @@
+import { jsx as r } from "react/jsx-runtime";
+import { lazy as f, useMemo as c, Suspense as g } from "react";
+import { FeatureType as m } from "@streamlayer/sdk-web-types";
+import { FeatureProvider as p } from "./FeatureProvider.js";
+import { GamificationOverlayStandalone as y } from "./Gamification/index.js";
+const d = f(() => import("./Gamification/gamification-feature.js")), x = ({ sdk: i, feature: t, className: n, scrollStore: e, appNode: o, scrollNode: a, responsiveStore: l }) => {
+  const u = c(() => t && t.featureConfig.get().type === m.GAMES ? /* @__PURE__ */ r(p, { className: n, sdk: i, feature: t, children: /* @__PURE__ */ r(
+    d,
+    {
+      appNode: o,
+      scrollStore: e,
+      scrollNode: a,
+      className: n,
+      responsiveStore: l,
+      gamification: t
+    }
+  ) }) : null, [i, t, n, l, e, a, o]);
+  return /* @__PURE__ */ r(
+    g,
+    {
+      fallback: /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
+      children: u
+    }
+  );
+}, A = ({ feature: i, className: t, appNode: n, responsiveStore: e }) => i && i.featureConfig.get().type === m.GAMES ? /* @__PURE__ */ r(
+  y,
+  {
+    className: t,
+    appNode: n,
+    responsiveStore: e,
+    gamification: i
+  }
+) : null;
+export {
+  x as ActiveFeature,
+  A as StandaloneFeature
+};

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ResponsiveStore } from '../../useSdkResponsive';
-import { ChannelsButtonId } from '../../../navigation/button/Channels';
-import { FeaturedGroupsButtonId } from '../../../navigation/button/FeaturedGroups';
-import { LeaderBoardButtonId } from '../../../navigation/button/LeaderBoard';
+import { ResponsiveStore } from '../../../useSdkResponsive';
+import { ChannelsButtonId } from '../../../../navigation/button/Channels';
+import { FeaturedGroupsButtonId } from '../../../../navigation/button/FeaturedGroups';
+import { LeaderBoardButtonId } from '../../../../navigation/button/LeaderBoard';
 export { ChannelsButtonId, LeaderBoardButtonId, FeaturedGroupsButtonId };
 export type AvailableOverlays = typeof ChannelsButtonId | typeof LeaderBoardButtonId | typeof FeaturedGroupsButtonId;
 type MastersNavigationProps = {

package/lib/ui/app/{Navigation → masters/Navigation}/MastersNavigation/index.js

@@ -1,11 +1,11 @@
 import { jsxs as s, jsx as r } from "react/jsx-runtime";
 import { useStore as B } from "@nanostores/react";
 import { forwardRef as l } from "react";
-import { ChannelsButton as c, ChannelsButtonId as t } from "../../../navigation/button/Channels.js";
-import { FeaturedGroupsButton as x, FeaturedGroupsButtonId as n } from "../../../navigation/button/FeaturedGroups.js";
-import { LeaderBoardButtonId as S } from "../../../navigation/button/LeaderBoard.js";
-import { Navigation as I, NavigationItems as h } from "../../../navigation/masters.js";
-import { BREAKPOINTS as d } from "../../../theme/constants.js";
+import { ChannelsButton as c, ChannelsButtonId as t } from "../../../../navigation/button/Channels.js";
+import { FeaturedGroupsButton as x, FeaturedGroupsButtonId as n } from "../../../../navigation/button/FeaturedGroups.js";
+import { LeaderBoardButtonId as S } from "../../../../navigation/button/LeaderBoard.js";
+import { Navigation as I, NavigationItems as h } from "../../../../navigation/masters.js";
+import { BREAKPOINTS as d } from "../../../../theme/constants.js";
 const z = l(
   ({ activeOverlay: o, setActiveOverlay: e, scrollToTop: i, sdkReady: u, className: a, responsiveStore: f }, p) => {
     const { screen: m } = B(f, { keys: ["screen"] });

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { Overlays } from '../masters';
-import { ButtonProps } from '../../navigation/button';
+import { Overlays } from '..';
+import { ButtonProps } from '../../../navigation/button';
 export declare const SDKNavigation: React.FC<{
     customOverlays: Overlays;
     activeButton?: ButtonProps['id'];

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

@@ -2,8 +2,8 @@ import { jsx as n } from "react/jsx-runtime";
 import { useStore as s } from "@nanostores/react";
 import { useMemo as e } from "react";
 import { AvailableFeatures as d } from "@streamlayer/sdk-web-features";
-import { Navigation as v } from "../../navigation/index.js";
-import { Button as b } from "../../navigation/button/index.js";
+import { Navigation as v } from "../../../navigation/index.js";
+import { Button as b } from "../../../navigation/button/index.js";
 const x = ({ customOverlays: a, activeButton: c, sdk: i }) => {
   const t = s(i.sdkStore.organizationSettings), r = s(i.sdkStore.streamSettings), p = e(() => {
     const o = (r == null ? void 0 : r.data) || (t == null ? void 0 : t.data);

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { Notification } from '@streamlayer/sdk-web-notifications';
+import { GameSettings } from '@streamlayer/sdk-web-types';
+export declare const Onboarding: React.FC<{
+    close: Notification['close'];
+    action: Notification['action'];
+    onboarding?: GameSettings;
+}>;

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

@@ -0,0 +1,18 @@
+import { jsxs as S, jsx as e } from "react/jsx-runtime";
+import { Container as L, CloseIconWrap as P, CloseIcon as T, Title as f, SponsorLogo as j, PresentsTitle as k, Subtitle as r, Description as E, ActionButton as I } from "./styles.js";
+const y = ({ close: i, action: x, onboarding: t }) => {
+  var l, s, c, C, p, h, m, u;
+  return /* @__PURE__ */ S(L, { children: [
+    /* @__PURE__ */ e(P, { onClick: i, children: /* @__PURE__ */ e(T, { name: "icon-cross" }) }),
+    ((s = (l = t == null ? void 0 : t.titleCard) == null ? void 0 : l.media) == null ? void 0 : s.sponsorLogo) && /* @__PURE__ */ S(f, { children: [
+      /* @__PURE__ */ e(j, { alt: "sponsor-logo", src: (C = (c = t == null ? void 0 : t.titleCard) == null ? void 0 : c.media) == null ? void 0 : C.sponsorLogo }),
+      /* @__PURE__ */ e(k, { children: "PRESENTS" })
+    ] }),
+    ((p = t == null ? void 0 : t.titleCard) == null ? void 0 : p.title) && /* @__PURE__ */ e(r, { children: (h = t == null ? void 0 : t.titleCard) == null ? void 0 : h.title }),
+    ((m = t == null ? void 0 : t.titleCard) == null ? void 0 : m.subtitle) && /* @__PURE__ */ e(E, { children: (u = t == null ? void 0 : t.titleCard) == null ? void 0 : u.subtitle }),
+    /* @__PURE__ */ e(I, { onClick: x, children: "Play Now" })
+  ] });
+};
+export {
+  y as Onboarding
+};

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+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/ui/app/{Notifications → masters/Notifications}/Onboarding/Notification/styles.js

@@ -1,50 +1,50 @@
 import { styled as s } from "@linaria/react";
-import { SvgIcon as o } from "../../../../icons/index.js";
+import { SvgIcon as o } from "../../../../../icons/index.js";
 const c = /* @__PURE__ */ s("div")({
   name: "Container",
-  class: "cocfo2g",
+  class: "cy1ghlr",
   propsAsIs: !1
 }), a = /* @__PURE__ */ s("div")({
   name: "CloseIconWrap",
-  class: "c1pdhxdk",
+  class: "cg5f18y",
   propsAsIs: !1
 }), n = () => o, l = /* @__PURE__ */ s(n())({
   name: "CloseIcon",
-  class: "c1funj3r",
+  class: "c19va0ky",
   propsAsIs: !0
 }), p = /* @__PURE__ */ s("div")({
   name: "Title",
-  class: "t1okg06y",
+  class: "tnfu29o",
   propsAsIs: !1
 }), r = /* @__PURE__ */ s("img")({
   name: "SponsorLogo",
-  class: "sb1n923",
+  class: "svw1c58",
   propsAsIs: !1
 }), i = /* @__PURE__ */ s("div")({
   name: "PresentsTitle",
-  class: "p1stllxd",
+  class: "pqfs3yj",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "Subtitle",
-  class: "s13kvdzw",
+  class: "s1fma09t",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ s("div")({
   name: "Description",
-  class: "dfvmv3t",
+  class: "dcghfqc",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("button")({
+}), I = /* @__PURE__ */ s("button")({
   name: "ActionButton",
-  class: "ay8e3j9",
+  class: "a1v24usc",
   propsAsIs: !1
 });
 export {
-  f as ActionButton,
+  I as ActionButton,
   l as CloseIcon,
   a as CloseIconWrap,
   c as Container,
-  I as Description,
+  m as Description,
   i as PresentsTitle,
   r as SponsorLogo,
-  m as Subtitle,
+  f as Subtitle,
   p as Title
 };

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { type Notification } from '@streamlayer/sdk-web-notifications';
+import { type AppNodeRef } from '../..';
+import { ResponsiveStore } from '../../../useSdkResponsive';
+export declare const Onboarding: React.FC<{
+    sdk: StreamLayerSDK;
+    notification: Notification;
+    saveHeight: (height: number) => void;
+    appNode: AppNodeRef;
+    sdkInDesktopView?: boolean;
+    style?: React.CSSProperties;
+    responsiveStore: ResponsiveStore;
+}>;