@streamlayer/react-ui 0.57.0 → 0.58.0

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

@@ -1,9 +1,10 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useStore as d } from "@nanostores/react";
+import { useStore as u } from "@nanostores/react";
 import { useMemo as c } from "react";
 import { NotificationType as o } from "@streamlayer/sdk-web-notifications";
-import { Notification as n } from "../../gamification/question/notification/index.js";
-import { Container as e } from "./styles.js";
+import { Notification as e } from "../../gamification/question/notification/index.js";
+import { Onboarding as s } from "./Onboarding/index.js";
+import { Container as m } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "../../gamification/constants.js";
 import "../../gamification/question/notification/insight/index.js";
@@ -13,12 +14,39 @@ import "@linaria/react";
 import "../../video-player/styles.js";
 import "../../gamification/question/notification/insight/styles.js";
 import "../../gamification/question/notification/styles.js";
+import "../../gamification/onboarding/index.js";
+import "react-virtualized-auto-sizer";
+import "../../gamification/onboarding/slides/onboarding-instructions/index.js";
+import "../../gamification/onboarding/slides/onboarding-instructions/styles.js";
+import "lottie-react";
+import "../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
+import "../../gamification/onboarding/slides/onboarding-rules/index.js";
+import "../../gamification/onboarding/slides/onboarding-rules/styles.js";
+import "../../gamification/onboarding/styles.js";
+import "../../button/index.js";
+import "../../button/styles.js";
 import "../../show-in/index.js";
 import "@linaria/core";
-const R = ({ sdk: m }) => {
-  const p = m.getNotificationsStore(), t = d(p), i = c(() => t != null && t.size ? t.values().next().value : null, [t]);
-  return (i == null ? void 0 : i.type) === o.QUESTION ? /* @__PURE__ */ r(e, { hiding: i.hiding, children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(n, { ...i }) }) }) : (i == null ? void 0 : i.type) === o.QUESTION_RESOLVED ? /* @__PURE__ */ r(e, { hiding: i.hiding, children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(n, { ...i }) }) }) : (i == null ? void 0 : i.type) === o.ONBOARDING ? /* @__PURE__ */ r(e, { hiding: i.hiding, children: /* @__PURE__ */ r("div", { children: "Onboarding" }) }) : null;
+const w = ({ sdk: p }) => {
+  const f = p.getNotificationsStore(), t = u(f), i = c(() => {
+    if (!(t != null && t.size))
+      return null;
+    for (const n of t.values())
+      if (n.type === o.ONBOARDING)
+        return n;
+    return t.values().next().value;
+  }, [t]);
+  return (i == null ? void 0 : i.type) === o.QUESTION ? /* @__PURE__ */ r(m, { hiding: i.hiding, children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, { ...i }) }) }) : (i == null ? void 0 : i.type) === o.QUESTION_RESOLVED ? /* @__PURE__ */ r(m, { hiding: i.hiding, children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, { ...i }) }) }) : (i == null ? void 0 : i.type) === o.ONBOARDING ? /* @__PURE__ */ r(
+    s,
+    {
+      NotificationContainer: m,
+      sdk: p,
+      notification: i,
+      hiding: i.hiding
+    }
+  ) : null;
 };
 export {
-  R as SDKNotifications
+  w as SDKNotifications
 };

package/lib/ui/app/masters.js

@@ -28,14 +28,27 @@ import "../icons/index.js";
 import "../video-player/styles.js";
 import "../gamification/question/notification/insight/styles.js";
 import "../gamification/question/notification/styles.js";
-import "./Notifications/styles.js";
+import "./Notifications/Onboarding/index.js";
+import "../gamification/onboarding/index.js";
+import "react-virtualized-auto-sizer";
+import "../gamification/onboarding/slides/onboarding-instructions/index.js";
+import "../gamification/onboarding/slides/onboarding-instructions/styles.js";
+import "lottie-react";
+import "../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../gamification/onboarding/slides/onboarding-invite-card/styles.js";
+import "../gamification/onboarding/slides/onboarding-rules/index.js";
+import "../gamification/onboarding/slides/onboarding-rules/styles.js";
+import "../gamification/onboarding/styles.js";
+import "../button/index.js";
+import "../button/styles.js";
 import "../show-in/index.js";
+import "./Notifications/styles.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
-const x = ({ sdk: i, className: e }) => {
-  const [, m] = A(i);
-  return /* @__PURE__ */ o(S, { className: e, feature: m, sdk: i });
-}, mt = ({ sdk: i, overlays: e, children: m }) => {
+const x = ({ sdk: i, className: m }) => {
+  const [, e] = A(i);
+  return /* @__PURE__ */ o(S, { className: m, feature: e, sdk: i });
+}, gt = ({ sdk: i, overlays: m, children: e }) => {
   const { sdkEnabled: t, sdkReady: l, activeOverlay: r, activateAndLoadOverlay: c, enableSdk: f, disableSdk: u, isLogged: p } = k(i);
   return /* @__PURE__ */ y(b, { children: [
     t && /* @__PURE__ */ o(
@@ -53,7 +66,7 @@ const x = ({ sdk: i, className: e }) => {
       {
         "data-nav": t.toString(),
         style: { display: !t || r === C ? "block" : "none" },
-        children: m && m({ enableSdk: f, disableSdk: u })
+        children: e && e({ enableSdk: f, disableSdk: u })
       }
     ),
     /* @__PURE__ */ o(
@@ -61,7 +74,7 @@ const x = ({ sdk: i, className: e }) => {
       {
         "data-nav": t.toString(),
         style: { display: r === s ? "block" : "none" },
-        children: e && r === s && e[r]
+        children: m && r === s && m[r]
       }
     ),
     p && t && r === d && /* @__PURE__ */ o(x, { className: a, sdk: i }),
@@ -69,5 +82,5 @@ const x = ({ sdk: i, className: e }) => {
   ] });
 };
 export {
-  mt as MastersApp
+  gt as MastersApp
 };

package/lib/ui/app/styles.js

@@ -5,6 +5,7 @@ const i = t.div`
   font-family: var(--font-regular);
   position: relative;
   min-width: 324px;
+  overflow: hidden;
 `, r = t.div`
   width: 100%;
   overflow-y: auto;
@@ -22,17 +23,17 @@ const i = t.div`
     height: calc(100% - var(--question-headers-height));
     transform: translateY(var(--question-headers-height));
   }
-`, a = t.div`
+`, n = t.div`
   display: flex;
   flex-direction: column;
   padding: var(--container-padding);
   gap: var(--container-padding);
-`, e = t(a)`
+`, e = t(n)`
   background-color: var(--color-neutrals-white);
 `;
 export {
   i as SDKContainer,
-  a as SDKContentContainer,
+  n as SDKContentContainer,
   r as SDKScrollContainer,
   e as SDKWhiteContainer
 };

package/lib/ui/button/index.d.ts

@@ -4,5 +4,7 @@ export type ButtonProps = {
     disabled?: boolean;
     onClick?: () => void;
     variant?: 'primary' | 'secondary';
+    style?: React.CSSProperties;
+    className?: string;
 };
 export declare const Button: React.FC<ButtonProps>;

package/lib/ui/button/index.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { SButton as i, ButtonLabel as m } from "./styles.js";
+import { SButton as m, ButtonLabel as p } from "./styles.js";
 import "@linaria/react";
-const B = ({ disabled: r, variant: o = "primary", onClick: n, children: a }) => /* @__PURE__ */ t(i, { onClick: n, disabled: r, "data-variant": o, children: /* @__PURE__ */ t(m, { children: a }) });
+const c = ({ disabled: r, variant: o = "primary", onClick: n, children: a, ...i }) => /* @__PURE__ */ t(m, { onClick: n, disabled: r, "data-variant": o, ...i, children: /* @__PURE__ */ t(p, { children: a }) });
 export {
-  B as Button
+  c as Button
 };

package/lib/ui/gamification/onboarding/index.d.ts

@@ -1,21 +1,17 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
-type OnboardingType = {
+import { OnboardingStep } from './slides/onboarding-instructions';
+import { OnboardingInviteCardProps } from './slides/onboarding-invite-card';
+import { OnboardingRule } from './slides/onboarding-rules';
+type OnboardingType = OnboardingInviteCardProps & {
     gamification: Gamification;
-    closeFeature: () => void;
-    steps?: {
-        graphic: string;
-        headline: string;
-    }[];
-    gameIcon?: string;
-    sponsorLogo?: string;
-    rules?: string[];
+    steps?: OnboardingStep[];
+    rules?: OnboardingRule[];
     rulesBtnLabel?: string;
     rulesTitle?: string;
     primaryColor?: string;
-    inviteCardTitle?: string;
-    inviteCardSubtext?: string;
     inviteCardBtnLabel?: string;
+    onClose: () => void;
 };
 export declare const Onboarding: React.FC<OnboardingType>;
 export {};

package/lib/ui/gamification/onboarding/index.js

@@ -1,66 +1,72 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useState as g, useEffect as B, useCallback as w } from "react";
-import { c as D } from "../../../icon-exit-d3f9fc80.js";
-import { OnboardingInstructions as N } from "./components/onboarding-slides/onboarding-instructions/index.js";
-import { OnboardingInviteCard as T } from "./components/onboarding-slides/onboarding-invite-card/index.js";
-import { OnboardingRules as j } from "./components/onboarding-slides/onboarding-rules/index.js";
-import { Container as p, OnboardingHeader as G, LeftBlock as R, GameIcon as A, RightBlock as E, SponsorLogo as H, CloseBtn as L, IconClose as P, Content as q, OnboardingActionBtn as z } from "./styles.js";
-import "./components/onboarding-slides/onboarding-instructions/styles.js";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { useState as h, useEffect as N, useCallback as k } from "react";
+import D from "react-virtualized-auto-sizer";
+import { OnboardingInstructions as T } from "./slides/onboarding-instructions/index.js";
+import { OnboardingInviteCard as j } from "./slides/onboarding-invite-card/index.js";
+import { OnboardingRules as w } from "./slides/onboarding-rules/index.js";
+import { Container as A, OnboardingHeader as B, CloseBtn as z, IconClose as E, Content as F, OnboardingFooter as G, OnboardingActionBtn as H } from "./styles.js";
+import "./slides/onboarding-instructions/styles.js";
 import "@linaria/react";
-import "./components/onboarding-slides/onboarding-invite-card/styles.js";
-import "./components/onboarding-slides/onboarding-rules/styles.js";
+import "lottie-react";
+import "../../icons/index.js";
+import "./slides/onboarding-invite-card/styles.js";
+import "./slides/onboarding-rules/styles.js";
+import "../../button/index.js";
+import "../../button/styles.js";
 const e = {
   steps: !1,
   rules: !1,
   inviteCard: !1
-}, _ = ({
-  gamification: f,
-  closeFeature: b,
-  steps: n,
-  gameIcon: c,
-  sponsorLogo: d,
-  rules: i,
-  rulesBtnLabel: C,
-  rulesTitle: u,
-  primaryColor: m,
-  inviteCardTitle: v,
+}, $ = ({
+  gamification: g,
+  steps: i,
+  rules: n,
+  rulesBtnLabel: f,
+  rulesTitle: b,
+  primaryColor: d,
+  inviteLink: C,
+  socialLinks: u,
+  inviteCardTitle: y,
   inviteCardSubtext: S,
-  inviteCardBtnLabel: y
+  inviteCardBtnLabel: v,
+  onClose: O
 }) => {
-  const I = async () => {
-    await f.submitInplay();
-  }, O = () => {
-    b();
-  }, [a, h] = g(0), [o, t] = g(e);
-  B(() => {
-    n != null && n.length ? t({ ...e, steps: !0 }) : i != null && i.length ? t({ ...e, rules: !0 }) : t({ ...e, inviteCard: !0 });
+  const [a, c] = h(0), [t, r] = h(e);
+  N(() => {
+    i != null && i.length ? r({ ...e, steps: !0 }) : n != null && n.length ? r({ ...e, rules: !0 }) : r({ ...e, inviteCard: !0 });
   }, []);
-  const k = w(() => {
-    n != null && n.length && a < n.length - 1 ? h((x) => ++x) : i != null && i.length && o.steps ? t({ ...e, rules: !0 }) : o.rules && t({ ...e, inviteCard: !0 });
-  }, [a, n == null ? void 0 : n.length, i == null ? void 0 : i.length, o, h, t]);
-  return /* @__PURE__ */ l(p, { children: [
-    /* @__PURE__ */ l(G, { children: [
-      /* @__PURE__ */ r(R, { children: c && /* @__PURE__ */ r(A, { alt: "sponsor-one-onboarding-icon", src: c }) }),
-      /* @__PURE__ */ l(E, { children: [
-        d && /* @__PURE__ */ r(H, { alt: "sponsor-two-onboarding-icon", src: d }),
-        /* @__PURE__ */ r(L, { onClick: O, children: /* @__PURE__ */ r(P, { alt: "icon-close-onboarding", src: D }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ l(q, { children: [
-      o.steps && (n == null ? void 0 : n.length) && /* @__PURE__ */ r(N, { graphic: n[a].graphic, headline: n[a].headline }),
-      o.rules && /* @__PURE__ */ r(j, { rules: i, rulesTitle: u, primaryColor: m }),
-      o.inviteCard && /* @__PURE__ */ r(
+  const p = k(() => {
+    i != null && i.length && a < i.length - 1 ? c((l) => ++l) : n != null && n.length && t.steps ? r({ ...e, rules: !0 }) : t.rules && r({ ...e, inviteCard: !0 });
+  }, [a, i == null ? void 0 : i.length, n == null ? void 0 : n.length, t, c, r]), I = async () => {
+    await g.submitInplay();
+  };
+  return /* @__PURE__ */ o(D, { children: ({ width: l, height: x }) => /* @__PURE__ */ m(A, { style: { width: l, height: x }, children: [
+    /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(z, { onClick: O, children: /* @__PURE__ */ o(E, { name: "icon-close-btn-gray" }) }) }),
+    /* @__PURE__ */ m(F, { children: [
+      t.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ o(
         T,
         {
-          inviteCardTitle: v,
+          stepsCount: i.length,
+          currentStep: a,
+          graphic: i[a].graphic,
+          headline: i[a].headline
+        }
+      ),
+      t.rules && /* @__PURE__ */ o(w, { rules: n, rulesTitle: b, primaryColor: d }),
+      t.inviteCard && /* @__PURE__ */ o(
+        j,
+        {
+          inviteLink: C,
+          inviteCardTitle: y,
           inviteCardSubtext: S,
-          primaryColor: m
+          primaryColor: d,
+          socialLinks: u
         }
       )
     ] }),
-    /* @__PURE__ */ r(z, { onClick: o.inviteCard ? I : k, children: o.rules ? C || "Got it!" : o.inviteCard ? y || "Play now!" : "Next" })
-  ] });
+    /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(H, { onClick: t.inviteCard ? I : p, children: t.rules ? f || "Got it" : t.inviteCard ? v || "Play Now" : "Next" }) })
+  ] }) });
 };
 export {
-  _ as Onboarding
+  $ as Onboarding
 };

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { LottieOptions } from 'lottie-react';
+type OnboardingInstructionsProps = OnboardingStep & {
+    stepsCount: number;
+    currentStep: number;
+};
+export type OnboardingStep = {
+    graphic?: LottieOptions['animationData'];
+    headline?: string;
+};
+export declare const OnboardingInstructions: React.FC<OnboardingInstructionsProps>;
+export {};

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/index.js

@@ -0,0 +1,19 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { Container as c, Content as m, Graphic as p, Headline as d, StepsContainer as s, StepIndicator as h } from "./styles.js";
+import "@linaria/react";
+import "lottie-react";
+const j = ({
+  graphic: o,
+  headline: t,
+  stepsCount: a,
+  currentStep: e
+}) => /* @__PURE__ */ i(c, { children: [
+  /* @__PURE__ */ i(m, { children: [
+    /* @__PURE__ */ r(p, { animationData: o }),
+    t && /* @__PURE__ */ r(d, { children: t })
+  ] }),
+  /* @__PURE__ */ r(s, { children: Array.from({ length: a }).map((l, n) => /* @__PURE__ */ r(h, { "data-active": e === n }, n)) })
+] });
+export {
+  j as OnboardingInstructions
+};

package/lib/ui/gamification/onboarding/{components/onboarding-slides → slides}/onboarding-instructions/styles.d.ts

@@ -1,5 +1,7 @@
 /// <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 Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Graphic: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const Graphic: import("@linaria/react").StyledMeta & ((props: import("lottie-react").LottieComponentProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
 export declare const Headline: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StepsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StepIndicator: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/styles.js

@@ -0,0 +1,47 @@
+import { styled as t } from "@linaria/react";
+import e from "lottie-react";
+const i = t.div`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 24px;
+`, r = t.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 0 16px 32px;
+`, a = t(e)`
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+`, c = t.div`
+  max-width: 270px;
+  color: var(--color-primary-green1);
+  font-family: var(--font-serif);
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 30px;
+  text-align: center;
+`, l = t.div`
+  display: flex;
+  justify-content: center;
+  column-gap: 8px;
+`, p = t.span`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--color-neutrals-gray4);
+
+  &[data-active='true'] {
+    background-color: var(--color-primary-green1);
+  }
+`;
+export {
+  i as Container,
+  r as Content,
+  a as Graphic,
+  c as Headline,
+  p as StepIndicator,
+  l as StepsContainer
+};

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { icons } from '../../../../icons';
+export type OnboardingInviteCardProps = {
+    inviteLink?: string;
+    inviteCardTitle?: string;
+    inviteCardSubtext?: string;
+    primaryColor?: string;
+    socialLinks?: InviteCardSocialLink[];
+};
+export type InviteCardSocialLink = {
+    icon: keyof typeof icons;
+    link: string;
+    label: string;
+};
+export declare const OnboardingInviteCard: React.FC<OnboardingInviteCardProps>;

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/index.js

@@ -0,0 +1,39 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { SvgIcon as h } from "../../../../icons/index.js";
+import { Container as m, IconContainer as p, InviteGameIcon as C, Content as I, Heading as b, Subtext as g, LinkContainer as s, LinkInfo as y, LinkTitle as f, LinkAddress as k, LinkIcon as x, SocialLinksContainer as S, SocialLink as L, SocialLinkLabel as u } from "./styles.js";
+import "@linaria/react";
+import "react";
+const H = ({
+  inviteLink: e,
+  socialLinks: o,
+  inviteCardTitle: t,
+  inviteCardSubtext: a,
+  primaryColor: l
+}) => /* @__PURE__ */ r(m, { children: [
+  /* @__PURE__ */ n(p, { style: { backgroundColor: l }, children: /* @__PURE__ */ n(C, { name: "invite-game-icon" }) }),
+  /* @__PURE__ */ r(I, { children: [
+    /* @__PURE__ */ n(b, { children: t || "" }),
+    /* @__PURE__ */ n(g, { children: a || "" })
+  ] }),
+  e && /* @__PURE__ */ r(s, { onClick: async () => {
+    if (e)
+      try {
+        await navigator.clipboard.writeText(e);
+      } catch (i) {
+        console.error("Unable to copy to clipboard", i);
+      }
+  }, children: [
+    /* @__PURE__ */ r(y, { children: [
+      /* @__PURE__ */ n(f, { children: "Invite link" }),
+      /* @__PURE__ */ n(k, { children: e })
+    ] }),
+    /* @__PURE__ */ n(x, { name: "icon-copy" })
+  ] }),
+  o && o.length > 0 && /* @__PURE__ */ n(S, { children: o.map(({ icon: i, link: c, label: d }) => /* @__PURE__ */ r(L, { href: c, children: [
+    /* @__PURE__ */ n(h, { name: i }),
+    /* @__PURE__ */ n(u, { children: d })
+  ] }, c)) })
+] });
+export {
+  H as OnboardingInviteCard
+};

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/styles.d.ts

@@ -0,0 +1,15 @@
+/// <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 IconContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const InviteGameIcon: any;
+export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Heading: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Subtext: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const LinkContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const LinkInfo: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const LinkTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const LinkAddress: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const LinkIcon: any;
+export declare const SocialLinksContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SocialLink: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
+export declare const SocialLinkLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/styles.js

@@ -0,0 +1,104 @@
+import { styled as e } from "@linaria/react";
+import { SvgIcon as t } from "../../../../icons/index.js";
+import "react/jsx-runtime";
+import "react";
+const a = e.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 24px;
+  height: 100%;
+  padding: 16px 16px 56px;
+`, l = e.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: var(--color-primary-green1);
+`, p = e(t)`
+  width: 24px;
+  height: 24px;
+`, c = e.div`
+  max-width: 270px;
+  width: 100%;
+`, s = e.div`
+  margin-bottom: 8px;
+  color: var(--color-primary-green1);
+  font-family: var(--font-serif);
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 30px;
+  text-align: center;
+`, x = e.div`
+  color: var(--color-neutrals-gray9);
+  font-size: 14px;
+  font-weight: var(--font-weight-default);
+  line-height: 20px;
+  letter-spacing: -0.154px;
+  text-align: center;
+`, d = e.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+  padding: 12px 16px;
+  max-width: 292px;
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid var(--color-neutrals-gray3);
+  cursor: pointer;
+`, g = e.div`
+  display: flex;
+  flex-direction: column;
+  font-weight: var(--font-weight-default);
+  overflow: hidden;
+`, f = e.span`
+  color: var(--color-primary-green1);
+  font-size: 16px;
+  line-height: 24px;
+`, h = e.span`
+  color: var(--color-neutrals-gray9);
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.154px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`, m = e(t)`
+  flex-shrink: 0;
+`, v = e.div`
+  display: flex;
+  column-gap: 8px;
+`, w = e.a`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 8px;
+  min-width: 68px;
+  text-decoration: none;
+`, u = e.span`
+  color: var(--color-neutrals-gray9);
+  font-size: 12px;
+  font-weight: var(--font-weight-default);
+  line-height: 18px;
+  letter-spacing: -0.154px;
+`;
+export {
+  a as Container,
+  c as Content,
+  s as Heading,
+  l as IconContainer,
+  p as InviteGameIcon,
+  h as LinkAddress,
+  d as LinkContainer,
+  m as LinkIcon,
+  g as LinkInfo,
+  f as LinkTitle,
+  w as SocialLink,
+  u as SocialLinkLabel,
+  v as SocialLinksContainer,
+  x as Subtext
+};

package/lib/ui/gamification/onboarding/{components/onboarding-slides → slides}/onboarding-rules/index.d.ts

@@ -1,8 +1,13 @@
 /// <reference types="react" />
+import { icons } from '../../../../icons';
 type OnboardingRulesProps = {
-    rules?: string[];
+    rules?: OnboardingRule[];
     rulesTitle?: string;
     primaryColor?: string;
 };
+export type OnboardingRule = {
+    label: string;
+    icon?: keyof typeof icons;
+};
 export declare const OnboardingRules: React.FC<OnboardingRulesProps>;
 export {};

package/lib/ui/gamification/onboarding/slides/onboarding-rules/index.js

@@ -0,0 +1,18 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { SvgIcon as l } from "../../../../icons/index.js";
+import { Container as c, Content as a, Title as h, RulesList as s, RulesItem as p, RuleIcon as R, RuleText as u, TermsButton as x } from "./styles.js";
+import "@linaria/react";
+import "react";
+const b = ({ rules: e, rulesTitle: t, primaryColor: i }) => /* @__PURE__ */ o(c, { children: [
+  /* @__PURE__ */ o(a, { children: [
+    /* @__PURE__ */ n(h, { children: t }),
+    /* @__PURE__ */ n(s, { children: e == null ? void 0 : e.map(({ label: d, icon: r }, m) => /* @__PURE__ */ o(p, { children: [
+      r && /* @__PURE__ */ n(R, { style: { backgroundColor: i }, children: /* @__PURE__ */ n(l, { name: r, "data-icon": r }) }),
+      /* @__PURE__ */ n(u, { children: d })
+    ] }, m)) })
+  ] }),
+  /* @__PURE__ */ n(x, { children: "See Terms and Conditions" })
+] });
+export {
+  b as OnboardingRules
+};

package/lib/ui/gamification/onboarding/{components/onboarding-slides → slides}/onboarding-rules/styles.d.ts

@@ -1,7 +1,9 @@
 /// <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 Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const RulesList: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const RulesItem: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const RuleNumber: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const RuleIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const RuleText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const TermsButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;