@streamlayer/react-ui 0.98.1 → 0.100.0

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

@@ -1,163 +1,88 @@
-import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import { styled as a } from "@linaria/react";
-import { useStore as s } from "@nanostores/react";
-import { SDKWhiteContainer as d } from "../../styles.js";
-import { VoteHeader as f } from "../../../gamification/detail/header/index.js";
-import { UserStatistics as h } from "../../../gamification/user-statistics/index.js";
-import { ModalPortal as C } from "../../../modal/index.js";
-import { ShowIn as k } from "../../../show-in/index.js";
-import { Question as S } from "./Question.js";
-import { Tabs as U } from "./Tabs.js";
-import "@streamlayer/sdk-web-types";
-import "../../../gamification/constants.js";
-import "../../../gamification/detail/header/styles.js";
-import "../../../icons/index.js";
-import "react";
-import "../../../skeleton/index.js";
-import "../../../skeleton/styles.js";
-import "../../../../utils/common.js";
-import "../../../gamification/user-statistics/components/rank/index.js";
-import "../../../gamification/user-statistics/components/rank/styles.js";
-import "../../../gamification/user-statistics/components/statistic/index.js";
-import "../../../gamification/user-statistics/components/statistic/styles.js";
-import "../../../gamification/user-statistics/styles.js";
-import "../../../../index-jRXrW6ie.js";
-import "../../../../index-uEuzH3jr.js";
-import "../../../theme/constants.js";
-import "@linaria/core";
-import "../../useMastersContext.js";
-import "../../../gamification/detail/sponsor/index.js";
-import "../../../gamification/vote/index.js";
-import "../../../gamification/vote/expired-alert/index.js";
-import "../../../gamification/vote/expired-alert/styles.js";
-import "../../../gamification/vote/feedback/index.js";
-import "../../../gamification/vote/feedback/styles.js";
-import "../../../gamification/vote/styles.js";
-import "../../../gamification/vote/vote-option/index.js";
-import "../../../animated-counter/index.js";
-import "react-countup";
-import "../../../gamification/vote/vote-option/styles.js";
-import "../../../gamification/vote/win-bar/index.js";
-import "../../../timer/index.js";
-import "react-countdown-circle-timer";
-import "../../../gamification/vote/win-bar/styles.js";
-import "../../../gamification/vote/insight-details/index.js";
-import "../../../questions/insight/index.js";
-import "../../../video-player/index.js";
-import "../../../video-player/styles.js";
-import "../../../questions/insight/styles.js";
-import "../../../gamification/vote/insight-details/styles.js";
-import "../../../gamification/vote/twitter-details/index.js";
-import "../../../questions/twitter/index.js";
-import "../../../questions/twitter/account/index.js";
-import "../../../questions/twitter/account/styles.js";
-import "../../../questions/twitter/styles.js";
-import "../../../gamification/vote/twitter-details/styles.js";
-import "../../useSdkScroll.js";
-import "lodash.throttle";
-import "../../../../index-z0QjLiEL.js";
-import "../../../gamification/tabs/index.js";
-import "../../../gamification/tabs/styles.js";
-import "./Leaderboard.js";
-import "../../useClipboardCopy.js";
-import "../../../gamification/copyNotification/index.js";
-import "../../../gamification/copyNotification/styles.js";
-import "../../../gamification/invite-link/index.js";
-import "../../../../hooks/analytics.js";
-import "@streamlayer/sdk-web-interfaces";
-import "../../../gamification/invite-link/styles.js";
-import "react-virtualized-auto-sizer";
-import "react-window";
-import "react-window-infinite-loader";
-import "../../../gamification/leaderboard/list-item/styles.js";
-import "../../../../styles_z07sl8-w40geAFS.js";
-import "../../../gamification/leaderboard/static.js";
-import "react-infinite-scroller";
-import "../../../gamification/leaderboard/list-item/index.js";
-import "./Friends.js";
-import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
-import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
-import "./QuestionsList.js";
-import "../../../gamification/question/list/index.js";
-import "../../../gamification/question/index.js";
-import "../../../gamification/question/styles.js";
-import "../../../gamification/question/insight/index.js";
-import "../../../gamification/question/insight/styles.js";
-import "../../../gamification/question/twitter/index.js";
-import "../../../gamification/question/twitter/styles.js";
-import "../../../button/index.js";
-import "../../../button/styles.js";
-import "../../../gamification/question/list/styles.js";
-import "./UserSummary.js";
-const I = () => k, l = /* @__PURE__ */ a(I())({
+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())({
   name: "OpenedContainer",
   class: "oar61gl",
   propsAsIs: !0
-}), x = /* @__PURE__ */ a("div")({
+}), v = /* @__PURE__ */ p("div")({
   name: "UserContainer",
   class: "u14zaal4",
   propsAsIs: !1
-}), y = ({
-  correct: r,
-  incorrect: i
+}), w = ({
+  correct: e,
+  incorrect: r
 }) => {
-  const t = r + i;
-  return t === 0 ? 0 : Math.round(r / t * 100);
-}, eo = ({
-  gamification: r,
-  scrollStore: i,
-  className: t,
-  appNode: e,
-  scrollNode: m,
-  headerNode: p,
-  responsiveStore: n
-}) => /* @__PURE__ */ o(U, {
-  appNode: e,
-  headerNode: p,
-  scrollStore: i,
-  scrollNode: m,
-  className: t,
-  gamification: r,
-  responsiveStore: n
-}), no = ({
-  gamification: r,
-  className: i,
-  appNode: t,
-  responsiveStore: e
+  const o = e + r;
+  return o === 0 ? 0 : Math.round(e / o * 100);
+}, z = ({
+  gamification: e,
+  scrollStore: r,
+  className: o,
+  appNode: i,
+  scrollNode: s,
+  responsiveStore: t
+}) => /* @__PURE__ */ n(y, {
+  appNode: i,
+  scrollStore: r,
+  scrollNode: s,
+  className: o,
+  gamification: e,
+  responsiveStore: t
+}), E = ({
+  gamification: e,
+  className: r,
+  appNode: o,
+  responsiveStore: i
 }) => {
-  const m = s(r.openedQuestion.$store), p = s(r.openedUser), {
-    sdkInDesktopView: n
-  } = s(e, {
+  const s = a(e.openedQuestion.$store), t = a(e.openedUser), {
+    sdkInDesktopView: d
+  } = a(i, {
     keys: ["sdkInDesktopView"]
-  });
-  if (!t.current || !m && !p)
+  }), {
+    hiding: l,
+    onAnimationEnd: c
+  } = h();
+  if (!o.current || !s && !t)
     return null;
-  const c = m ? /* @__PURE__ */ o(l, {
-    className: i,
-    children: /* @__PURE__ */ o(S, {
-      gamification: r
+  const u = s ? /* @__PURE__ */ n(m, {
+    className: r,
+    hiding: l,
+    onAnimationEnd: c,
+    children: /* @__PURE__ */ n(x, {
+      gamification: e
     })
-  }) : p ? /* @__PURE__ */ o(l, {
-    className: i,
-    children: /* @__PURE__ */ u(x, {
-      children: [/* @__PURE__ */ o(f, {
+  }) : t ? /* @__PURE__ */ n(m, {
+    className: r,
+    hiding: l,
+    onAnimationEnd: c,
+    children: /* @__PURE__ */ f(v, {
+      children: [/* @__PURE__ */ n(k, {
         label: "Friend's Rank",
-        close: r.closeUser
-      }), /* @__PURE__ */ o(d, {
-        children: /* @__PURE__ */ o(h, {
-          ...p,
-          successRate: y(p)
+        close: e.closeUser
+      }), /* @__PURE__ */ n(C, {
+        children: /* @__PURE__ */ n(S, {
+          ...t,
+          successRate: w(t)
         })
       })]
     })
   }) : null;
-  return /* @__PURE__ */ o(C, {
-    container: t,
-    useContainer: !n,
-    children: c
+  return /* @__PURE__ */ n(U, {
+    container: o,
+    useContainer: !d,
+    children: u
   });
 };
 export {
-  eo as GamificationOverlay,
-  no as GamificationOverlayStandalone
+  z as GamificationOverlay,
+  E as GamificationOverlayStandalone
 };

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

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

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

@@ -1,126 +1,37 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { lazy as f, useMemo as c, Suspense as g } from "react";
-import { FeatureType as a } from "@streamlayer/sdk-web-types";
-import { FeatureProvider as y } from "./FeatureProvider.js";
-import { GamificationOverlayStandalone as d } from "./Gamification/index.js";
-import "@linaria/react";
-import "@nanostores/react";
-import "@streamlayer/sdk-web-interfaces";
-import "../styles.js";
-import "../../gamification/detail/header/index.js";
-import "../../gamification/constants.js";
-import "../../gamification/detail/header/styles.js";
-import "../../icons/index.js";
-import "../../gamification/user-statistics/index.js";
-import "../../skeleton/index.js";
-import "../../skeleton/styles.js";
-import "../../../utils/common.js";
-import "../../gamification/user-statistics/components/rank/index.js";
-import "../../gamification/user-statistics/components/rank/styles.js";
-import "../../gamification/user-statistics/components/statistic/index.js";
-import "../../gamification/user-statistics/components/statistic/styles.js";
-import "../../gamification/user-statistics/styles.js";
-import "../../modal/index.js";
-import "../../../index-jRXrW6ie.js";
-import "../../../index-uEuzH3jr.js";
-import "../../theme/constants.js";
-import "../../show-in/index.js";
-import "@linaria/core";
-import "./Gamification/Question.js";
-import "../useMastersContext.js";
-import "../../gamification/detail/sponsor/index.js";
-import "../../gamification/vote/index.js";
-import "../../gamification/vote/expired-alert/index.js";
-import "../../gamification/vote/expired-alert/styles.js";
-import "../../gamification/vote/feedback/index.js";
-import "../../gamification/vote/feedback/styles.js";
-import "../../gamification/vote/styles.js";
-import "../../gamification/vote/vote-option/index.js";
-import "../../animated-counter/index.js";
-import "react-countup";
-import "../../gamification/vote/vote-option/styles.js";
-import "../../gamification/vote/win-bar/index.js";
-import "../../timer/index.js";
-import "react-countdown-circle-timer";
-import "../../gamification/vote/win-bar/styles.js";
-import "../../gamification/vote/insight-details/index.js";
-import "../../questions/insight/index.js";
-import "../../video-player/index.js";
-import "../../video-player/styles.js";
-import "../../questions/insight/styles.js";
-import "../../gamification/vote/insight-details/styles.js";
-import "../../gamification/vote/twitter-details/index.js";
-import "../../questions/twitter/index.js";
-import "../../questions/twitter/account/index.js";
-import "../../questions/twitter/account/styles.js";
-import "../../questions/twitter/styles.js";
-import "../../gamification/vote/twitter-details/styles.js";
-import "./Gamification/Tabs.js";
-import "../useSdkScroll.js";
-import "lodash.throttle";
-import "../../../index-z0QjLiEL.js";
-import "../../gamification/tabs/index.js";
-import "../../gamification/tabs/styles.js";
-import "./Gamification/Leaderboard.js";
-import "../useClipboardCopy.js";
-import "../../gamification/copyNotification/index.js";
-import "../../gamification/copyNotification/styles.js";
-import "../../gamification/invite-link/index.js";
-import "../../../hooks/analytics.js";
-import "../../gamification/invite-link/styles.js";
-import "react-virtualized-auto-sizer";
-import "react-window";
-import "react-window-infinite-loader";
-import "../../gamification/leaderboard/list-item/styles.js";
-import "../../../styles_z07sl8-w40geAFS.js";
-import "../../gamification/leaderboard/static.js";
-import "react-infinite-scroller";
-import "../../gamification/leaderboard/list-item/index.js";
-import "./Gamification/Friends.js";
-import "../../gamification/onboarding/slides/onboarding-invite-card/index.js";
-import "../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
-import "./Gamification/QuestionsList.js";
-import "../../gamification/question/list/index.js";
-import "../../gamification/question/index.js";
-import "../../gamification/question/styles.js";
-import "../../gamification/question/insight/index.js";
-import "../../gamification/question/insight/styles.js";
-import "../../gamification/question/twitter/index.js";
-import "../../gamification/question/twitter/styles.js";
-import "../../button/index.js";
-import "../../button/styles.js";
-import "../../gamification/question/list/styles.js";
-import "./Gamification/UserSummary.js";
-const h = f(() => import("./Gamification/gamification-feature.js")), ri = ({ sdk: i, feature: t, className: r, scrollStore: m, appNode: p, scrollNode: n, headerNode: e, responsiveStore: l }) => {
-  const u = c(() => t && t.featureConfig.get().type === a.GAMES ? /* @__PURE__ */ o(y, { className: r, sdk: i, feature: t, children: /* @__PURE__ */ o(
-    h,
+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: p,
-      scrollStore: m,
-      scrollNode: n,
-      headerNode: e,
-      className: r,
+      appNode: o,
+      scrollStore: e,
+      scrollNode: a,
+      className: n,
       responsiveStore: l,
       gamification: t
     }
-  ) }) : null, [i, t, r, l, m, n, p, e]);
-  return /* @__PURE__ */ o(
+  ) }) : null, [i, t, n, l, e, a, o]);
+  return /* @__PURE__ */ r(
     g,
     {
-      fallback: /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
+      fallback: /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
       children: u
     }
   );
-}, oi = ({ feature: i, className: t, appNode: r, responsiveStore: m }) => i && i.featureConfig.get().type === a.GAMES ? /* @__PURE__ */ o(
-  d,
+}, A = ({ feature: i, className: t, appNode: n, responsiveStore: e }) => i && i.featureConfig.get().type === m.GAMES ? /* @__PURE__ */ r(
+  y,
   {
     className: t,
-    appNode: r,
-    responsiveStore: m,
+    appNode: n,
+    responsiveStore: e,
     gamification: i
   }
 ) : null;
 export {
-  ri as ActiveFeature,
-  oi as StandaloneFeature
+  x as ActiveFeature,
+  A as StandaloneFeature
 };

package/lib/ui/app/Navigation/MastersNavigation/index.js

@@ -2,46 +2,40 @@ 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 i } from "../../../navigation/button/FeaturedGroups.js";
-import { LeaderBoardButtonId as P } from "../../../navigation/button/LeaderBoard.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 p } from "../../../theme/constants.js";
-import "@linaria/react";
-import "../../../icons/index.js";
-import "../../../navigation/button/index.js";
-import "@linaria/core";
-import "../../../navigation/button/styles.js";
-import "../../../navigation/index.js";
-const K = l(
-  ({ activeOverlay: o, setActiveOverlay: m, scrollToTop: n, sdkReady: d, className: u, responsiveStore: a }, f) => {
-    const { screen: e } = B(a, { keys: ["screen"] });
-    return /* @__PURE__ */ s(I, { className: u, children: [
+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"] });
+    return /* @__PURE__ */ s(I, { className: a, children: [
       /* @__PURE__ */ s(h, { children: [
         /* @__PURE__ */ r(
           c,
           {
             active: o === t,
             onClick: () => {
-              m(t), o !== t && n();
+              e(t), o !== t && i();
             }
           }
         ),
         /* @__PURE__ */ r(
           x,
           {
-            active: o === i,
-            disabled: !d,
+            active: o === n,
+            disabled: !u,
             onClick: () => {
-              m(i), o !== i && n();
+              e(n), o !== n && i();
             },
-            labelFull: e.size >= p.md && e.size < p.xl
+            labelFull: m.size >= d.md && m.size < d.xl
           }
         )
       ] }),
       /* @__PURE__ */ r(
         "div",
         {
-          ref: f
+          ref: p
         }
       )
     ] });
@@ -49,7 +43,7 @@ const K = l(
 );
 export {
   t as ChannelsButtonId,
-  i as FeaturedGroupsButtonId,
-  P as LeaderBoardButtonId,
-  K as MastersNavigation
+  n as FeaturedGroupsButtonId,
+  S as LeaderBoardButtonId,
+  z as MastersNavigation
 };

package/lib/ui/app/Navigation/index.js

@@ -1,19 +1,16 @@
 import { jsx as n } from "react/jsx-runtime";
 import { useStore as s } from "@nanostores/react";
-import { useMemo as m } from "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 "@linaria/react";
-import "@linaria/core";
-import "../../navigation/button/styles.js";
-const h = ({ customOverlays: p, activeButton: e, sdk: i }) => {
-  const t = s(i.sdkStore.organizationSettings), r = s(i.sdkStore.streamSettings), a = m(() => {
+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);
     return o != null && o.overlays ? o.overlays : [];
-  }, [t, r]), c = m(
+  }, [t, r]), m = e(
     () => [
-      ...a.filter(({ enableSdkButton: o }) => o).map((o) => ({
+      ...p.filter(({ enableSdkButton: o }) => o).map((o) => ({
         id: o.type,
         onClick: () => i.openFeature(o.type),
         disabled: !(o.type in d),
@@ -22,12 +19,12 @@ const h = ({ customOverlays: p, activeButton: e, sdk: i }) => {
         /** multiplied by 10 to add the ability to insert custom buttons between our buttons */
         position: o.position * 10
       })),
-      ...Object.values(p).map(({ button: o }) => o)
+      ...Object.values(a).map(({ button: o }) => o)
     ].sort((o, l) => o.position - l.position),
-    [a, i, p]
+    [p, i, a]
   );
-  return /* @__PURE__ */ n(v, { children: c.map((o) => /* @__PURE__ */ n(b, { ...o, active: o.id === e })) });
+  return /* @__PURE__ */ n(v, { children: m.map((o) => /* @__PURE__ */ n(b, { ...o, active: o.id === c })) });
 };
 export {
-  h as SDKNavigation
+  x as SDKNavigation
 };

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

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

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

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