@streamlayer/react-ui 1.0.0 → 1.1.0

package/lib/index.d.ts

@@ -1,2 +1,2 @@
-export { App } from './ui/app/app';
+export { App } from './app/app';
 export { StreamLayerThemeProvider } from './ui/theme';

package/lib/index.js

@@ -1,4 +1,4 @@
-import { App as o } from "./ui/app/app/index.js";
+import { App as o } from "./app/app/index.js";
 import { StreamLayerThemeProvider as p } from "./ui/theme/index.js";
 export {
   o as App,

package/lib/ui/advertisement/banner/index.d.ts

@@ -0,0 +1,6 @@
+import { PromotionOptions } from '@streamlayer/sdk-web-types';
+
+export declare const Banner: React.FC<{
+    promotion: PromotionOptions;
+    direction?: 'top' | 'bottom';
+}>;

package/lib/ui/advertisement/banner/index.js

@@ -0,0 +1,27 @@
+import { jsx as n } from "react/jsx-runtime";
+import { styled as a } from "@linaria/react";
+import { SlideIn as t } from "../../slide-in/index.js";
+const o = /* @__PURE__ */ a("div")({
+  name: "BannerContainer",
+  class: "bipmch2",
+  propsAsIs: !1
+}), d = ({
+  promotion: r,
+  direction: i = "bottom"
+}) => {
+  var e;
+  return (e = r.additionalBanner) != null && e.imageUrl ? /* @__PURE__ */ n(t, {
+    direction: i,
+    children: /* @__PURE__ */ n(o, {
+      children: /* @__PURE__ */ n("img", {
+        src: r.additionalBanner.imageUrl,
+        width: 400,
+        height: 100,
+        alt: "promo"
+      })
+    })
+  }) : null;
+};
+export {
+  d as Banner
+};

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

@@ -0,0 +1,9 @@
+import { Advertisement } from '@streamlayer/feature-gamification';
+
+export declare const AdvertisementUI: React.FC<{
+    advertisement: Advertisement & {
+        data: Exclude<Advertisement['data'], undefined>;
+    };
+    sidebar?: 'left' | 'right';
+    banner?: 'top' | 'bottom';
+}>;

package/lib/ui/advertisement/index.js

@@ -0,0 +1,31 @@
+import { jsxs as e, jsx as c, Fragment as d } from "react/jsx-runtime";
+import { useStore as s } from "@nanostores/react";
+import { PromotionType as t } from "@streamlayer/sdk-web-types";
+import { Banner as a } from "./banner/index.js";
+import { Overlay as u } from "./overlay/index.js";
+import { Sidebar as h } from "./sidebar/index.js";
+const f = (r) => (r == null ? void 0 : r.type) === t.INGAME_IAB11_LBAR || (r == null ? void 0 : r.type) === t.INGAME_IAB21_LBAR, A = (r) => (r == null ? void 0 : r.type) === t.INGAME_IAB11 || (r == null ? void 0 : r.type) === t.INGAME_IAB21, _ = ({ advertisement: r, sidebar: n, banner: i }) => {
+  const l = s(r.data);
+  return !l.data && l.loading ? /* @__PURE__ */ e("div", { children: [
+    "loading... ",
+    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
+  ] }) : l.error ? /* @__PURE__ */ e("div", { children: [
+    "error ",
+    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
+  ] }) : l.data ? i ? /* @__PURE__ */ e(d, { children: [
+    /* @__PURE__ */ c(a, { promotion: l.data, direction: i }),
+    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
+  ] }) : n && f(l.data) ? /* @__PURE__ */ e(d, { children: [
+    /* @__PURE__ */ c(h, { direction: n, children: /* @__PURE__ */ c(u, { promotion: l.data }) }),
+    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
+  ] }) : !n && A(l.data) ? /* @__PURE__ */ e(d, { children: [
+    /* @__PURE__ */ c(u, { promotion: l.data }),
+    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
+  ] }) : null : /* @__PURE__ */ e("div", { children: [
+    "empty promo ",
+    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
+  ] });
+};
+export {
+  _ as AdvertisementUI
+};

package/lib/ui/advertisement/mock.d.ts

@@ -0,0 +1,3 @@
+import { PromotionOptions } from '@streamlayer/sdk-web-types';
+
+export declare const promotionMock: PromotionOptions;

package/lib/ui/advertisement/mock.js

@@ -0,0 +1,33 @@
+import { PromotionType as o, PromotionWallet as e, PromotionLogoMode as a, CtaIconMode as t } from "@streamlayer/sdk-web-types";
+const d = {
+  type: o.INGAME_IAB21_LBAR,
+  enableWallet: e.DISABLED,
+  coupon: "",
+  logoMode: a.LEFT,
+  couponZip: "",
+  couponBarcodeUrl: "",
+  sponsor: {
+    logo: "https://static-next.streamlayer.io/a8b6c1738a31dd0076a01c8807253533/f1de6799-4502-4423-9cbe-4804cd0ba769/c911da1a-e4a1-4e9a-8eb2-d1a6aa17e05d.png",
+    name: "Coca Cola"
+  },
+  banner: {
+    imageUrl: "https://static-next.streamlayer.io/a8b6c1738a31dd0076a01c8807253533/be4af347-d124-4677-b413-cf288dadbdaf/059b6e6f-518d-46e6-b149-7e6afe01f756.png",
+    url: "google.com",
+    ctaButton: {
+      label: "Order",
+      color: "#1d7bff",
+      ctaIcon: "",
+      ctaIconMode: t.CTA_ICON_UNSET,
+      textColor: "#fff"
+    },
+    body: "Order pizza",
+    title: "Get free Cola"
+  },
+  additionalBanner: {
+    imageUrl: "https://static-next.streamlayer.io/a8b6c1738a31dd0076a01c8807253533/42b6d84a-3cca-4eed-98ed-195706b47882/fce903c3-9781-4613-ae1e-4cce7e8cde90.png",
+    url: "google.com"
+  }
+};
+export {
+  d as promotionMock
+};

package/lib/ui/advertisement/overlay/index.d.ts

@@ -0,0 +1,5 @@
+import { PromotionOptions } from '@streamlayer/sdk-web-types';
+
+export declare const Overlay: React.FC<{
+    promotion: PromotionOptions;
+}>;

package/lib/ui/advertisement/overlay/index.js

@@ -0,0 +1,21 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+const b = ({ promotion: r }) => {
+  var i, l, n, c, h, a, t, s, v;
+  return /* @__PURE__ */ d("div", { className: "PromoOverlay", children: [
+    /* @__PURE__ */ d("div", { children: [
+      /* @__PURE__ */ d("div", { children: [
+        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("img", { src: (i = r.sponsor) == null ? void 0 : i.logo, width: 100, height: 50, alt: "promo" }) }),
+        /* @__PURE__ */ e("div", { children: (l = r.sponsor) == null ? void 0 : l.name })
+      ] }),
+      /* @__PURE__ */ d("div", { children: [
+        /* @__PURE__ */ e("div", { children: "AD" }),
+        /* @__PURE__ */ e("div", { children: "SPONSORED" })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { children: (c = (n = r.banner) == null ? void 0 : n.video) != null && c.url ? /* @__PURE__ */ e("video", { src: r.banner.video.url, width: 250, height: 100, children: /* @__PURE__ */ e("source", { type: "video/streamlayer" }) }) : /* @__PURE__ */ e("img", { src: (h = r.banner) == null ? void 0 : h.imageUrl, width: 250, height: 100, alt: "promo" }) }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("button", { style: { backgroundColor: (t = (a = r.banner) == null ? void 0 : a.ctaButton) == null ? void 0 : t.color }, children: (v = (s = r.banner) == null ? void 0 : s.ctaButton) == null ? void 0 : v.label }) })
+  ] });
+};
+export {
+  b as Overlay
+};

package/lib/ui/advertisement/sidebar/index.d.ts

@@ -0,0 +1,6 @@
+export declare const Sidebar: React.FC<{
+    children: React.ReactElement;
+    direction: 'left' | 'right';
+    style?: React.CSSProperties;
+    className?: string;
+}>;

package/lib/ui/advertisement/sidebar/index.js

@@ -0,0 +1,23 @@
+import { jsx as r } from "react/jsx-runtime";
+import { styled as n } from "@linaria/react";
+import { SlideIn as t } from "../../slide-in/index.js";
+const a = /* @__PURE__ */ n("div")({
+  name: "SidebarContainer",
+  class: "s1abskp8",
+  propsAsIs: !1
+}), l = ({
+  children: e,
+  direction: o,
+  style: s,
+  className: i
+}) => /* @__PURE__ */ r(t, {
+  direction: o,
+  style: s,
+  className: i,
+  children: /* @__PURE__ */ r(a, {
+    children: e
+  })
+});
+export {
+  l as Sidebar
+};

package/lib/ui/animated-counter/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { CountUpProps } from 'react-countup';
+
 export declare const AnimatedCounter: React.FC<Omit<CountUpProps, 'end' | 'start'> & {
     value?: number;
 }>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ButtonProps = {
     children?: string | React.ReactNode;
     disabled?: boolean;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-export declare const SButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const ButtonLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const SButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const ButtonLabel: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/ui/gamification/constants.d.ts

@@ -1,5 +1,6 @@
 import { QuestionType } from '@streamlayer/sdk-web-types';
 import { icons } from '../icons';
+
 export declare const QuestionTypeData: Record<QuestionType, {
     label: string;
     iconName: keyof typeof icons;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const CopyNotification: React.FC;

package/lib/ui/gamification/copyNotification/styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & 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<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & 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<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/ui/gamification/detail/header/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { QuestionType } from '@streamlayer/sdk-web-types';
+
 interface VoteHeaderProps {
     type?: QuestionType;
     close: () => void;

package/lib/ui/gamification/detail/header/styles.d.ts

@@ -1,7 +1,6 @@
-/// <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 QuestionTypeWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QuestionTypeWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const QuestionTypeIcon: any;
-export declare const QuestionTypeTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & 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 QuestionTypeTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & 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;

package/lib/ui/gamification/detail/sponsor/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
 export declare const Sponsor: React.FC<{
     sponsorLogo?: string;
+    mastersApp?: boolean;
 }>;

package/lib/ui/gamification/detail/sponsor/index.js

@@ -1,19 +1,25 @@
 import { jsx as o } from "react/jsx-runtime";
-import { styled as s } from "@linaria/react";
-import { SvgIcon as r } from "../../../icons/index.js";
-const p = /* @__PURE__ */ s("div")({
+import { styled as n } from "@linaria/react";
+import { SvgIcon as e } from "../../../icons/index.js";
+const s = /* @__PURE__ */ n("div")({
   name: "SponsorLogoWrap",
   class: "s8p5v5z",
   propsAsIs: !1
-}), n = () => r, t = /* @__PURE__ */ s(n())({
+}), t = () => e, r = /* @__PURE__ */ n(t())({
   name: "SponsorLogo",
   class: "s755yti",
   propsAsIs: !0
-}), c = () => /* @__PURE__ */ o(p, {
-  children: /* @__PURE__ */ o(t, {
+}), i = ({
+  mastersApp: p
+}) => p ? /* @__PURE__ */ o(s, {
+  children: /* @__PURE__ */ o(r, {
     name: "mastersLogo"
   })
+}) : /* @__PURE__ */ o(s, {
+  children: /* @__PURE__ */ o(r, {
+    name: "streamLayerLogo"
+  })
 });
 export {
-  c as Sponsor
+  i as Sponsor
 };

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { QuestionImages } from '@streamlayer/sdk-web-types';
+
 type InsightProps = {
     image?: string;
     imageMode: QuestionImages;

package/lib/ui/gamification/insight/styles.d.ts

@@ -1,9 +1,8 @@
-/// <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<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const InsightIconDefault: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const InsightIconCircle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const InsightIconAbsolute: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & 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 NextIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+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<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const InsightIconDefault: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const InsightIconCircle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const InsightIconAbsolute: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & 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 NextIcon: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

package/lib/ui/gamification/insight-list/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { QuestionImages } from '@streamlayer/sdk-web-types';
+
 interface InsightListProps {
     insights?: Array<{
         image?: string;

package/lib/ui/gamification/insight-list/styles.d.ts

@@ -1,3 +1,2 @@
-/// <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 ItemsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ItemsContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/invite-link/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type InviteLinkProps = {
     title?: string;
     description?: string;

package/lib/ui/gamification/invite-link/index.js

@@ -1,24 +1,24 @@
-import { jsxs as i, jsx as C } from "react/jsx-runtime";
-import { useAnalyticsHandle as c } from "../../../hooks/analytics.js";
-import { InvitationFrom as l } from "@streamlayer/sdk-web-types";
-import { Container as s, FriendsIcon as a, Content as d, Title as h, Description as m, ArrowInviteIcon as p } from "./styles.js";
-const f = "data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='32'%20height='32'%20rx='16'%20fill='white'/%3e%3cpath%20d='M10.4615%2012.6875C9.44231%2012.6875%208.61538%2013.4665%208.61538%2014.4266C8.61538%2015.3868%209.44231%2016.1658%2010.4615%2016.1658C11.4808%2016.1658%2012.3077%2015.3868%2012.3077%2014.4266C12.3077%2013.4665%2011.4808%2012.6875%2010.4615%2012.6875ZM10.4615%2016.1658C9.10817%2016.1658%208%2017.2097%208%2018.4846V19.7527C8%2019.7527%208.61538%2020.2237%2010.4615%2020.2237C12.3077%2020.2237%2012.9231%2019.7527%2012.9231%2019.7527V18.4846C12.9231%2017.2097%2011.8149%2016.1658%2010.4615%2016.1658ZM21.5385%2012.6875C20.5192%2012.6875%2019.6923%2013.4665%2019.6923%2014.4266C19.6923%2015.3868%2020.5192%2016.1658%2021.5385%2016.1658C22.5577%2016.1658%2023.3846%2015.3868%2023.3846%2014.4266C23.3846%2013.4665%2022.5577%2012.6875%2021.5385%2012.6875ZM21.5385%2016.1658C20.1851%2016.1658%2019.0769%2017.2097%2019.0769%2018.4846V19.7527C19.0769%2019.7527%2019.6923%2020.2237%2021.5385%2020.2237C23.3846%2020.2237%2024%2019.7527%2024%2019.7527V18.4846C24%2017.2097%2022.8918%2016.1658%2021.5385%2016.1658ZM16%2015.0063C14.9808%2015.0063%2014.1538%2015.7853%2014.1538%2016.7455C14.1538%2017.7056%2014.9808%2018.4846%2016%2018.4846C17.0192%2018.4846%2017.8462%2017.7056%2017.8462%2016.7455C17.8462%2015.7853%2017.0192%2015.0063%2016%2015.0063ZM16%2018.4846C14.6466%2018.4846%2013.5385%2019.5285%2013.5385%2020.8034V22.0715C13.5385%2022.0715%2014.1538%2022.5425%2016%2022.5425C17.8462%2022.5425%2018.4615%2022.0715%2018.4615%2022.0715V20.8034C18.4615%2019.5285%2017.3534%2018.4846%2016%2018.4846Z'%20fill='%23107D57'/%3e%3cpath%20opacity='0.5'%20d='M13.3908%209C12.3103%209%2011.4336%209.82584%2011.4336%2010.8437C11.4336%2011.8616%2012.3103%2012.6875%2013.3908%2012.6875C14.4713%2012.6875%2015.348%2011.8616%2015.348%2010.8437C15.348%209.82584%2014.4713%209%2013.3908%209ZM13.3908%2012.6875C13.1946%2012.6875%2012.9958%2012.6827%2012.7996%2012.7451C13.192%2013.2372%2013.3908%2013.8542%2013.3908%2014.5312C13.3908%2014.7761%2013.3296%2015.0161%2013.3296%2015.261C13.8521%2014.524%2014.6956%2014.0391%2015.6742%2013.9166C15.218%2013.1796%2014.3694%2012.6875%2013.3908%2012.6875ZM18.61%209C17.5295%209%2016.6528%209.82584%2016.6528%2010.8437C16.6528%2011.8616%2017.5295%2012.6875%2018.61%2012.6875C19.6905%2012.6875%2020.5672%2011.8616%2020.5672%2010.8437C20.5672%209.82584%2019.6905%209%2018.61%209ZM18.61%2012.6875C17.6314%2012.6875%2016.7828%2013.1796%2016.3266%2013.9166C17.3052%2014.0391%2018.1487%2014.524%2018.6712%2015.261C18.6712%2015.0161%2018.61%2014.7761%2018.61%2014.5312C18.61%2013.8542%2018.8088%2013.2372%2019.2012%2012.7451C19.005%2012.6827%2018.8062%2012.6875%2018.61%2012.6875Z'%20fill='%23107D57'/%3e%3c/svg%3e", g = ({ title: n, description: t, onClick: e, className: o }) => {
-  const [r] = c({
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { useAnalyticsHandle as a } from "../../../hooks/analytics.js";
+import { InvitationFrom as m } from "@streamlayer/sdk-web-types";
+import { Container as s, FriendsIcon as l, Content as d, Title as p, Description as f, ArrowInviteIcon as I } from "./styles.js";
+const C = ({ title: o, description: t, onClick: r, className: e }) => {
+  const [c] = a({
     type: "invitation",
     action: "sent",
     payload: {
-      from: l.TITLE_CARD
+      from: m.TITLE_CARD
     }
   });
-  return /* @__PURE__ */ i(s, { onClick: r(e), className: o, children: [
-    /* @__PURE__ */ C(a, { alt: "friends-icon", src: f }),
+  return /* @__PURE__ */ i(s, { onClick: c(r), className: e, children: [
+    /* @__PURE__ */ n(l, { name: "icon-friends" }),
     /* @__PURE__ */ i(d, { children: [
-      /* @__PURE__ */ C(h, { children: n }),
-      /* @__PURE__ */ C(m, { children: t })
+      /* @__PURE__ */ n(p, { children: o }),
+      /* @__PURE__ */ n(f, { children: t })
     ] }),
-    /* @__PURE__ */ C(p, { name: "icon-copy" })
+    /* @__PURE__ */ n(I, { name: "icon-copy" })
   ] });
 };
 export {
-  g as InviteLink
+  C as InviteLink
 };

package/lib/ui/gamification/invite-link/styles.d.ts

@@ -1,7 +1,6 @@
-/// <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 FriendsIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & 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 Description: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FriendsIcon: any;
+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 Description: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ArrowInviteIcon: any;

package/lib/ui/gamification/invite-link/styles.js

@@ -1,14 +1,14 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as n } from "../../icons/index.js";
-const c = /* @__PURE__ */ s("div")({
+const r = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1ux29ft",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("img")({
+}), o = () => n, a = /* @__PURE__ */ s(o())({
   name: "FriendsIcon",
   class: "f10ncfg2",
-  propsAsIs: !1
-}), a = /* @__PURE__ */ s("div")({
+  propsAsIs: !0
+}), p = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c1yc07bd",
   propsAsIs: !1
@@ -16,20 +16,20 @@ const c = /* @__PURE__ */ s("div")({
   name: "Title",
   class: "tj6cq7w",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "Description",
   class: "d1ag78xo",
   propsAsIs: !1
-}), o = () => n, l = /* @__PURE__ */ s(o())({
+}), e = () => n, I = /* @__PURE__ */ s(e())({
   name: "ArrowInviteIcon",
   class: "awohrz6",
   propsAsIs: !0
 });
 export {
-  l as ArrowInviteIcon,
-  c as Container,
-  a as Content,
-  p as Description,
-  r as FriendsIcon,
+  I as ArrowInviteIcon,
+  r as Container,
+  p as Content,
+  l as Description,
+  a as FriendsIcon,
   i as Title
 };

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { ListProps } from 'react-window';
 import { LeaderboardItemProps } from './list-item';
+
 type LeaderboardListProps = {
     items: Omit<LeaderboardItemProps, 'openItemDetail'>[];
     currentUserId?: string;

package/lib/ui/gamification/leaderboard/list-item/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import type { LeaderboardItem as ILeaderboardItem } from '@streamlayer/sdk-web-types';
+import { LeaderboardItem as ILeaderboardItem } from '@streamlayer/sdk-web-types';
+
 export type LeaderboardItemProps = Partial<ILeaderboardItem> & {
     userId: string;
     isCurrentUser?: boolean;

package/lib/ui/gamification/leaderboard/list-item/styles.d.ts

@@ -1,9 +1,8 @@
-/// <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 Position: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Avatar: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const AvatarPlaceholder: 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 NameContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Name: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Position: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Avatar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const AvatarPlaceholder: 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 NameContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Name: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const CurrentUserBadge: any;

package/lib/ui/gamification/leaderboard/static.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { type ScrollNodeRef } from '../../app/masters';
-import { ScrollStore } from '../../app/useSdkScroll';
+import { ScrollNodeRef } from '../../../app/masters';
+import { ScrollStore } from '../../../app/useSdkScroll';
 import { LeaderboardItemProps } from './list-item';
+
 type LeaderboardListProps = {
     items: Omit<LeaderboardItemProps, 'openItemDetail'>[];
     currentUserId?: string;

package/lib/ui/gamification/leaderboard/styles.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const ScrollContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ScrollContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/leaderboard/styles.js

@@ -1,5 +1,5 @@
 import { styled as o } from "@linaria/react";
-import "../../../styles_z07sl8-l0sNRNKZ.js";
+/* empty css                                 */
 const l = /* @__PURE__ */ o("div")({
   name: "ScrollContainer",
   class: "s13d8sg6",

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import type { Gamification } from '@streamlayer/feature-gamification';
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { Gamification } from '@streamlayer/feature-gamification';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { OnboardingStep } from './slides/onboarding-instructions';
 import { OnboardingInviteCardProps } from './slides/onboarding-invite-card';
 import { OnboardingRule } from './slides/onboarding-rules';
+
 type OnboardingType = OnboardingInviteCardProps & {
     gamification: Gamification;
     sdk: StreamLayerSDK;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type InvitingUserType = {
     avatar?: string;
     name?: string;

package/lib/ui/gamification/onboarding/invitingUser/styles.d.ts

@@ -1,6 +1,5 @@
-/// <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 Avatar: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const AvatarPlaceholder: 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 Name: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Avatar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const AvatarPlaceholder: 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 Name: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

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

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+
 type OnboardingInstructionsProps = {
     loading: boolean;
     steps: OnboardingStep[];