@streamlayer/react-ui 0.62.0 → 0.64.0

package/lib/ui/app/Features/Gamification/Friends.d.ts

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

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

@@ -0,0 +1,33 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useStore as i } from "@nanostores/react";
+import { OnboardingInviteCard as r } from "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../../icons/index.js";
+import "@linaria/react";
+import "react";
+import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
+const d = ({ deepLink: o }) => {
+  const { data: t } = i(o.$store);
+  return /* @__PURE__ */ e(
+    r,
+    {
+      inviteLink: t == null ? void 0 : t.url,
+      socialLinks: [
+        {
+          icon: "icon-facebook",
+          link: "https://www.facebook.com/TheMasters",
+          label: "Facebook"
+        },
+        {
+          icon: "icon-twitter",
+          link: "https://twitter.com/@TheMasters",
+          label: "X"
+        }
+      ],
+      inviteCardTitle: "It’s more fun with friends",
+      inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
+    }
+  );
+};
+export {
+  d as Friends
+};

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
 export declare const Leaderboard: React.FC<{
-    leaderboardList: Gamification['leaderboardList'];
-    openUser: (userId: string) => void;
+    gamification: Gamification;
 }>;

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

@@ -1,6 +1,7 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useStore as e } from "@nanostores/react";
-import { LeaderboardList as i } from "../../../gamification/leaderboard/index.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useStore as t } from "@nanostores/react";
+import { LeaderboardList as p } from "../../../gamification/leaderboard/index.js";
+import { Friends as m } from "./Friends.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
@@ -10,10 +11,19 @@ import "../../../gamification/leaderboard/list-item/styles.js";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
-const b = ({ leaderboardList: o, openUser: r }) => {
-  const { data: t } = e(o.$store);
-  return /* @__PURE__ */ m(i, { fetchMore: o.fetchMore, items: t, openItemDetail: r });
+import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
+const j = ({ gamification: r }) => {
+  const { data: e } = t(r.leaderboardList.$store);
+  return e != null && e.length ? /* @__PURE__ */ o(m, { deepLink: r.deepLink }) : /* @__PURE__ */ o(
+    p,
+    {
+      fetchMore: r.leaderboardList.fetchMore,
+      items: e,
+      openItemDetail: r.openUser
+    }
+  );
 };
 export {
-  b as Leaderboard
+  j as Leaderboard
 };

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

@@ -1,7 +1,7 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import { useState as s } from "react";
-import { SDKWhiteContainer as n, SDKContentContainer as m } from "../../styles.js";
-import { ActivePages as e, Tabs as a } from "../../../gamification/tabs/index.js";
+import { SDKWhiteContainer as p, SDKContentContainer as n } from "../../styles.js";
+import { ActivePages as i, Tabs as a } from "../../../gamification/tabs/index.js";
 import { Leaderboard as d } from "./Leaderboard.js";
 import { QuestionsList as l } from "./QuestionsList.js";
 import { UserSummary as u } from "./UserSummary.js";
@@ -16,6 +16,9 @@ import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
 import "../../../icons/index.js";
+import "./Friends.js";
+import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
@@ -36,17 +39,17 @@ 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";
-const Y = ({ gamification: t }) => {
-  const [o, p] = s(e.HOME);
-  return /* @__PURE__ */ i("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ i(n, { children: [
-      /* @__PURE__ */ r(a, { activePage: o, toggleActivePage: p }),
-      o === e.HOME && /* @__PURE__ */ r(u, { userSummary: t.userSummary })
+const tt = ({ gamification: r }) => {
+  const [o, e] = s(i.HOME);
+  return /* @__PURE__ */ m("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ m(p, { children: [
+      /* @__PURE__ */ t(a, { activePage: o, toggleActivePage: e }),
+      o === i.HOME && /* @__PURE__ */ t(u, { userSummary: r.userSummary })
     ] }),
-    o === e.HOME && /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(l, { openQuestion: t.openQuestion, store: t.feedList.getStore() }) }),
-    o === e.LEADERBOARD && /* @__PURE__ */ r(m, { style: { flex: "1 1 auto", paddingTop: 0, paddingBottom: 0 }, children: /* @__PURE__ */ r(d, { openUser: t.openUser, leaderboardList: t.leaderboardList }) })
+    o === i.HOME && /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(l, { openQuestion: r.openQuestion, store: r.feedList.getStore() }) }),
+    o === i.LEADERBOARD && /* @__PURE__ */ t(p, { style: { flex: "1 1 auto", paddingTop: 0, paddingBottom: 0 }, children: /* @__PURE__ */ t(d, { gamification: r }) })
   ] });
 };
 export {
-  Y as Tabs
+  tt as Tabs
 };

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

@@ -45,6 +45,9 @@ import "react-window";
 import "react-window-infinite-loader";
 import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../gamification/leaderboard/list-item/styles.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";
@@ -74,7 +77,7 @@ const e = n(u)`
   & > div {
     width: 100%;
   }
-`, wr = ({ gamification: t, className: o }) => {
+`, jr = ({ gamification: t, className: o }) => {
   const s = m(t.openedQuestion.$store), i = m(t.openedUser);
   return /* @__PURE__ */ p(d, { children: [
     s && /* @__PURE__ */ r(e, { className: o, children: /* @__PURE__ */ r(f, { gamification: t }) }),
@@ -86,6 +89,6 @@ const e = n(u)`
   ] });
 };
 export {
-  wr as GamificationOverlay,
-  wr as default
+  jr as GamificationOverlay,
+  jr as default
 };

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

@@ -1,4 +1,4 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { styled as g } from "@linaria/react";
 import { useState as y } from "react";
 import { FeatureType as k } from "@streamlayer/sdk-web-types";
@@ -22,10 +22,10 @@ const C = g(f)`
   height: 100%;
 
   animation-duration: var(--animation-duration);
-`, $ = ({ sdk: b, hiding: r, notification: t, NotificationContainer: h }) => {
-  var s, a, p, d, l, c;
-  const [u, i] = y(!1), n = b.getFeature(k.GAMES), e = t.data.onboarding;
-  return u && n && e ? /* @__PURE__ */ o(C, { hiding: r, children: /* @__PURE__ */ o(
+`, $ = ({ sdk: b, hiding: o, notification: t, NotificationContainer: h }) => {
+  var n, a, p, d, l, c;
+  const [u, i] = y(!1), s = b.getFeature(k.GAMES), e = t.data.onboarding;
+  return u && s && e ? /* @__PURE__ */ r(C, { hiding: o, children: /* @__PURE__ */ r(
     w,
     {
       rules: [
@@ -42,7 +42,7 @@ const C = g(f)`
           icon: "icon-trophy"
         }
       ],
-      rulesBtnLabel: (s = e.rules) == null ? void 0 : s.buttonLabel,
+      rulesBtnLabel: (n = e.rules) == null ? void 0 : n.buttonLabel,
       rulesTitle: (a = e.rules) == null ? void 0 : a.heading,
       steps: [
         {
@@ -78,18 +78,18 @@ const C = g(f)`
       socialLinks: [
         {
           icon: "icon-facebook",
-          link: "https://www.facebook.com/",
+          link: "https://www.facebook.com/TheMasters",
           label: "Facebook"
         },
         {
           icon: "icon-twitter",
-          link: "https://twitter.com",
+          link: "https://twitter.com/@TheMasters",
           label: "X"
         }
       ],
-      gamification: n
+      gamification: s
     }
-  ) }) : /* @__PURE__ */ o(h, { hiding: r, children: /* @__PURE__ */ o("button", { onClick: () => i(!0), children: "go onboarding" }) });
+  ) }) : /* @__PURE__ */ r(h, { hiding: o, children: /* @__PURE__ */ r("button", { onClick: () => i(!0), children: "go onboarding" }) });
 };
 export {
   $ as Onboarding

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

@@ -12,10 +12,14 @@ import "../../icons/index.js";
 import "@linaria/react";
 import "../../video-player/styles.js";
 import "../../gamification/question/notification/insight/styles.js";
+import "../../gamification/question/notification/prediction-result/index.js";
+import "../../gamification/question/notification/prediction-result/animation-lines/index.js";
+import "../../gamification/question/notification/prediction-result/animation-lines/styles.js";
+import "../../gamification/question/notification/prediction-result/styles.js";
 import "../../gamification/question/notification/styles.js";
 import "../../show-in/index.js";
 import "@linaria/core";
-const U = ({ sdk: p }) => {
+const B = ({ sdk: p }) => {
   const f = p.getNotificationsStore(), t = c(f), i = s(() => {
     if (!(t != null && t.size))
       return null;
@@ -27,5 +31,5 @@ const U = ({ sdk: p }) => {
   return (i == null ? void 0 : i.type) === r.QUESTION ? /* @__PURE__ */ o(m, { hiding: i.hiding, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(e, { ...i }) }) }) : (i == null ? void 0 : i.type) === r.QUESTION_RESOLVED ? /* @__PURE__ */ o(m, { hiding: i.hiding, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(e, { ...i }) }) }) : null;
 };
 export {
-  U as SDKNotifications
+  B as SDKNotifications
 };

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

@@ -1,15 +1,15 @@
 import { styled as i } from "@linaria/react";
-import { ShowIn as a } from "../../show-in/index.js";
+import { ShowIn as o } from "../../show-in/index.js";
 import "react/jsx-runtime";
 import "@linaria/core";
-const d = i(a)`
+const d = i(o)`
   position: relative;
   top: var(--header-height);
 
   animation-duration: calc(var(--animation-duration) * 3);
 
   & > div {
-    padding: var(--container-padding) calc(var(--container-padding) * 2);
+    padding: var(--container-padding);
   }
 `;
 export {

package/lib/ui/app/masters.js

@@ -27,6 +27,10 @@ import "../video-player/index.js";
 import "../icons/index.js";
 import "../video-player/styles.js";
 import "../gamification/question/notification/insight/styles.js";
+import "../gamification/question/notification/prediction-result/index.js";
+import "../gamification/question/notification/prediction-result/animation-lines/index.js";
+import "../gamification/question/notification/prediction-result/animation-lines/styles.js";
+import "../gamification/question/notification/prediction-result/styles.js";
 import "../gamification/question/notification/styles.js";
 import "./Notifications/styles.js";
 import "../show-in/index.js";
@@ -35,7 +39,7 @@ 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 }) => {
+}, st = ({ sdk: i, overlays: e, children: m }) => {
   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(
@@ -69,5 +73,5 @@ const x = ({ sdk: i, className: e }) => {
   ] });
 };
 export {
-  mt as MastersApp
+  st as MastersApp
 };

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

@@ -6,6 +6,7 @@ export type OnboardingInviteCardProps = {
     inviteCardSubtext?: string;
     primaryColor?: string;
     socialLinks?: InviteCardSocialLink[];
+    className?: string;
 };
 export type InviteCardSocialLink = {
     icon: keyof typeof icons;

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

@@ -1,21 +1,22 @@
 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 { SvgIcon as m } from "../../../../icons/index.js";
+import { Container as p, IconContainer as C, InviteGameIcon as b, Content as g, Heading as I, Subtext as s, LinkContainer as y, LinkInfo as f, LinkTitle as k, LinkAddress as x, LinkIcon as S, SocialLinksContainer as L, SocialLink as u, SocialLinkLabel as v } from "./styles.js";
 import "@linaria/react";
 import "react";
-const H = ({
+const O = ({
   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 || "" })
+  primaryColor: l,
+  className: d
+}) => /* @__PURE__ */ r(p, { className: d, children: [
+  /* @__PURE__ */ n(C, { style: { backgroundColor: l }, children: /* @__PURE__ */ n(b, { name: "invite-game-icon" }) }),
+  /* @__PURE__ */ r(g, { children: [
+    /* @__PURE__ */ n(I, { children: t || "" }),
+    /* @__PURE__ */ n(s, { children: a || "" })
   ] }),
-  e && /* @__PURE__ */ r(s, { onClick: async () => {
+  e && /* @__PURE__ */ r(y, { onClick: async () => {
     if (e)
       try {
         await navigator.clipboard.writeText(e);
@@ -23,17 +24,17 @@ const H = ({
         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__ */ r(f, { children: [
+      /* @__PURE__ */ n(k, { children: "Invite link" }),
+      /* @__PURE__ */ n(x, { children: e })
     ] }),
-    /* @__PURE__ */ n(x, { name: "icon-copy" })
+    /* @__PURE__ */ n(S, { 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 })
+  o && o.length > 0 && /* @__PURE__ */ n(L, { children: o.map(({ icon: i, link: c, label: h }) => /* @__PURE__ */ r(u, { href: c, target: "_blank", children: [
+    /* @__PURE__ */ n(m, { name: i }),
+    /* @__PURE__ */ n(v, { children: h })
   ] }, c)) })
 ] });
 export {
-  H as OnboardingInviteCard
+  O as OnboardingInviteCard
 };

package/lib/ui/gamification/question/notification/index.js

@@ -1,30 +1,34 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { QuestionType as m } from "@streamlayer/sdk-web-types";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { QuestionType as p } from "@streamlayer/sdk-web-types";
 import { QuestionTypeData as l } from "../../constants.js";
 import { Insight as a } from "./insight/index.js";
-import { Container as s, CloseIconWrap as d, CloseIcon as f, Header as h, TypeIcon as C, TypeName as I, Question as T, AnswerButton as A } from "./styles.js";
+import { PredictionResult as d } from "./prediction-result/index.js";
+import { Container as f, CloseIconWrap as h, CloseIcon as C, Header as I, TypeIcon as s, TypeName as T, Question as A, AnswerButton as D } from "./styles.js";
 import "../../../video-player/index.js";
 import "react";
 import "../../../icons/index.js";
 import "@linaria/react";
 import "../../../video-player/styles.js";
 import "./insight/styles.js";
-const b = ({
-  close: c,
-  action: t,
-  data: { questionType: o, question: i, insight: p }
+import "./prediction-result/animation-lines/index.js";
+import "./prediction-result/animation-lines/styles.js";
+import "./prediction-result/styles.js";
+const W = ({
+  close: m,
+  action: e,
+  data: { questionType: i, question: o, insight: c }
 }) => {
-  const n = l[o];
-  return n ? /* @__PURE__ */ e(s, { children: [
-    /* @__PURE__ */ r(d, { onClick: c, children: /* @__PURE__ */ r(f, { name: "icon-cross" }) }),
-    /* @__PURE__ */ e(h, { children: [
-      /* @__PURE__ */ r(C, { name: n.iconName }),
-      /* @__PURE__ */ r(I, { children: n.label })
+  const t = l[i];
+  return t ? o != null && o.predictionResult ? /* @__PURE__ */ r(d, { close: m, ...o }) : /* @__PURE__ */ n(f, { children: [
+    /* @__PURE__ */ r(h, { onClick: m, children: /* @__PURE__ */ r(C, { name: "icon-cross" }) }),
+    /* @__PURE__ */ n(I, { children: [
+      /* @__PURE__ */ r(s, { name: t.iconName }),
+      /* @__PURE__ */ r(T, { children: t.label })
     ] }),
-    o === m.FACTOID ? /* @__PURE__ */ r(a, { ...p, action: t }) : /* @__PURE__ */ r(T, { children: i == null ? void 0 : i.title }),
-    o !== m.FACTOID && /* @__PURE__ */ r(A, { onClick: t, children: "Answer" })
+    i === p.FACTOID ? /* @__PURE__ */ r(a, { ...c, action: e }) : /* @__PURE__ */ r(A, { children: o == null ? void 0 : o.title }),
+    i !== p.FACTOID && /* @__PURE__ */ r(D, { onClick: e, children: "Answer" })
   ] }) : null;
 };
 export {
-  b as Notification
+  W as Notification
 };

package/lib/ui/gamification/question/notification/prediction-result/animation-lines/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const AnimationLines: React.FC<{
+    step: number;
+    correct?: boolean;
+}>;

package/lib/ui/gamification/question/notification/prediction-result/animation-lines/index.js

@@ -0,0 +1,42 @@
+import { jsxs as r, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { BGWrap as n, BGOneLineOne as T, BGOneLineTwo as l, BGOneLineThree as s, BGTwoLineOne as t, BGTwoLineTwo as c, BGTwoLineThree as o, BGThreeLineOne as d, BGThreeLineTwo as h, BGThreeLineThree as B, BGThreeLineFour as G, BGFourLineOne as u, BGFourLineTwo as m, BGFourLineThree as w, BGFourLineFour as F } from "./styles.js";
+import "@linaria/react";
+const x = ({ step: a, correct: L }) => /* @__PURE__ */ r(i, { children: [
+  /* @__PURE__ */ r(n, { "data-active": a === 1, "data-first-screen": "true", children: [
+    /* @__PURE__ */ e(T, {}),
+    /* @__PURE__ */ e(l, {}),
+    /* @__PURE__ */ e(s, {})
+  ] }),
+  /* @__PURE__ */ r(n, { "data-active": a === 2, children: [
+    /* @__PURE__ */ e(t, {}),
+    /* @__PURE__ */ e(c, {}),
+    /* @__PURE__ */ e(o, {})
+  ] }),
+  /* @__PURE__ */ r(n, { "data-active": a === 3, children: [
+    /* @__PURE__ */ e(t, {}),
+    /* @__PURE__ */ e(c, {}),
+    /* @__PURE__ */ e(o, {})
+  ] }),
+  L ? /* @__PURE__ */ r(i, { children: [
+    /* @__PURE__ */ r(n, { "data-active": a === 4, "data-correct": "false", children: [
+      /* @__PURE__ */ e(d, {}),
+      /* @__PURE__ */ e(h, {}),
+      /* @__PURE__ */ e(B, {}),
+      /* @__PURE__ */ e(G, {})
+    ] }),
+    /* @__PURE__ */ r(n, { "data-active": a === 5, "data-correct": "false", "data-last-screen": "true", children: [
+      /* @__PURE__ */ e(d, {}),
+      /* @__PURE__ */ e(h, {}),
+      /* @__PURE__ */ e(B, {}),
+      /* @__PURE__ */ e(G, {})
+    ] })
+  ] }) : /* @__PURE__ */ r(n, { "data-active": a === 4, "data-correct": "false", "data-last-screen": "true", children: [
+    /* @__PURE__ */ e(u, {}),
+    /* @__PURE__ */ e(m, {}),
+    /* @__PURE__ */ e(w, {}),
+    /* @__PURE__ */ e(F, {})
+  ] })
+] });
+export {
+  x as AnimationLines
+};

package/lib/ui/gamification/question/notification/prediction-result/animation-lines/styles.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+export declare const BGWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const BGLineBase: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const BGOneLineOne: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGOneLineTwo: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGOneLineThree: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGTwoLineOne: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGTwoLineTwo: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGTwoLineThree: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGThreeLineOne: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGThreeLineTwo: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGThreeLineThree: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGThreeLineFour: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGFourLineOne: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGFourLineTwo: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGFourLineThree: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const BGFourLineFour: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;