@streamlayer/react-ui 0.91.1 → 0.93.0

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

@@ -1,12 +1,15 @@
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import { useState as h, useEffect as k, useMemo as D, useCallback as T } from "react";
-import j from "react-virtualized-auto-sizer";
-import { OnboardingInstructions as w } from "./slides/onboarding-instructions/index.js";
-import { OnboardingInviteCard as A } from "./slides/onboarding-invite-card/index.js";
-import { OnboardingRules as z } from "./slides/onboarding-rules/index.js";
-import { Container as E, OnboardingHeader as F, CloseBtn as G, IconClose as H, Content as M, OnboardingFooter as P, OnboardingActionBtn as R } from "./styles.js";
-import "./slides/onboarding-instructions/styles.js";
+import { jsx as t, jsxs as O } from "react/jsx-runtime";
+import { useState as c, useEffect as j, useMemo as H, useCallback as z } from "react";
+import E from "react-virtualized-auto-sizer";
+import { Skeleton as F } from "../../skeleton/index.js";
+import { OnboardingInstructions as G } from "./slides/onboarding-instructions/index.js";
+import { OnboardingInviteCard as M } from "./slides/onboarding-invite-card/index.js";
+import { OnboardingRules as P } from "./slides/onboarding-rules/index.js";
+import { OnboardingTerms as R } from "./slides/onboarding-terms/index.js";
+import { Container as q, OnboardingHeader as J, CloseBtn as K, IconClose as Q, Content as U, OnboardingFooter as V, OnboardingActionBtn as W } from "./styles.js";
+import "../../skeleton/styles.js";
 import "@linaria/react";
+import "./slides/onboarding-instructions/styles.js";
 import "../../../useClipboardCopy-E5rEe6It.js";
 import "../../../index-uEuzH3jr.js";
 import "../copyNotification/index.js";
@@ -14,54 +17,78 @@ import "../../icons/index.js";
 import "../copyNotification/styles.js";
 import "./slides/onboarding-invite-card/styles.js";
 import "./slides/onboarding-rules/styles.js";
+import "./slides/onboarding-terms/styles.js";
 import "../../button/index.js";
 import "../../button/styles.js";
-const a = {
+const m = {
   steps: !1,
   rules: !1,
   inviteCard: !1
-}, oi = ({
-  gamification: u,
+}, bi = ({
+  gamification: S,
   steps: i,
-  rules: t,
-  rulesBtnLabel: m,
-  rulesTitle: b,
-  primaryColor: d,
-  inviteLink: C,
-  socialLinks: S,
-  inviteCardTitle: p,
-  inviteCardSubtext: y,
-  inviteCardBtnLabel: c,
-  onClose: O
+  rules: r,
+  rulesBtnLabel: a,
+  rulesTitle: y,
+  termsTitle: s,
+  termsText: f,
+  primaryColor: g,
+  inviteLink: v,
+  socialLinks: T,
+  inviteCardTitle: k,
+  inviteCardSubtext: x,
+  inviteCardBtnLabel: h,
+  loading: u,
+  renderToNode: I,
+  onClose: N
 }) => {
-  const [r, f] = h(0), [n, e] = h(a);
-  k(() => {
-    i != null && i.length ? e({ ...a, steps: !0 }) : t != null && t.length ? e({ ...a, rules: !0 }) : e({ ...a, inviteCard: !0 });
+  const [e, b] = c(0), [l, p] = c(!1), [n, o] = c(m);
+  j(() => {
+    i != null && i.length ? o({ ...m, steps: !0 }) : r != null && r.length ? o({ ...m, rules: !0 }) : o({ ...m, inviteCard: !0 });
   }, []);
-  const v = D(() => n.steps && r === 0 ? "Continue" : n.rules ? m || "Got it" : n.inviteCard ? c || "Play Now" : "Next", [n, r, m, c]), I = T(() => {
-    i != null && i.length && r < i.length - 1 ? f((l) => ++l) : t != null && t.length && n.steps ? e({ ...a, rules: !0 }) : n.rules && e({ ...a, inviteCard: !0 });
-  }, [r, i == null ? void 0 : i.length, t == null ? void 0 : t.length, n, f, e]), x = async () => {
-    await u.onboardingStatus.submitInplay();
+  const w = H(() => n.steps && e === 0 ? "Continue" : n.rules ? l || !a ? "Got it" : a : n.inviteCard ? h || "Play Now" : "Next", [n, e, l, a, h]), A = z(() => {
+    i != null && i.length && e < i.length - 1 ? b((d) => ++d) : r != null && r.length && n.steps ? o({ ...m, rules: !0 }) : n.rules && o({ ...m, inviteCard: !0 });
+  }, [e, i == null ? void 0 : i.length, r == null ? void 0 : r.length, n, b, o]), D = async () => {
+    n.inviteCard ? await S.onboardingStatus.submitInplay() : n.rules && l ? p(!1) : A();
   };
-  return /* @__PURE__ */ o(j, { children: ({ width: l, height: N }) => /* @__PURE__ */ g(E, { style: { width: l, height: N }, children: [
-    /* @__PURE__ */ o(F, { children: /* @__PURE__ */ o(G, { onClick: O, children: /* @__PURE__ */ o(H, { name: "icon-close-btn-gray" }) }) }),
-    /* @__PURE__ */ g(M, { children: [
-      n.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ o(w, { stepsCount: i.length, currentStep: r, ...i[r] }),
-      n.rules && /* @__PURE__ */ o(z, { rules: t, rulesTitle: b, primaryColor: d }),
-      n.inviteCard && /* @__PURE__ */ o(
-        A,
+  return /* @__PURE__ */ t(E, { children: ({ width: d, height: C }) => /* @__PURE__ */ O(q, { style: { width: d, height: C, maxHeight: C }, children: [
+    /* @__PURE__ */ t(J, { children: /* @__PURE__ */ t(K, { onClick: N, children: /* @__PURE__ */ t(Q, { name: "icon-close-btn-gray" }) }) }),
+    /* @__PURE__ */ O(U, { children: [
+      n.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ t(
+        G,
+        {
+          loading: u,
+          stepsCount: i.length,
+          currentStep: e,
+          ...i[e]
+        }
+      ),
+      n.rules && !l && /* @__PURE__ */ t(
+        P,
+        {
+          rules: r,
+          rulesTitle: y,
+          termsText: f,
+          primaryColor: g,
+          openTerms: () => p(!0)
+        }
+      ),
+      n.rules && l && /* @__PURE__ */ t(R, { termsTitle: s, termsText: f }),
+      n.inviteCard && /* @__PURE__ */ t(
+        M,
         {
-          inviteLink: C,
-          inviteCardTitle: p,
-          inviteCardSubtext: y,
-          primaryColor: d,
-          socialLinks: S
+          inviteLink: v,
+          inviteCardTitle: k,
+          inviteCardSubtext: x,
+          primaryColor: g,
+          socialLinks: T,
+          renderToNode: I
         }
       )
     ] }),
-    /* @__PURE__ */ o(P, { children: /* @__PURE__ */ o(R, { onClick: n.inviteCard ? x : I, children: v }) })
+    /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t(F, { loading: u, style: { width: "100%" }, children: /* @__PURE__ */ t(W, { onClick: D, children: w }) }) })
   ] }) });
 };
 export {
-  oi as Onboarding
+  bi as Onboarding
 };

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type InvitingUserType = {
+    avatar?: string;
+    name?: string;
+};
+export declare const InvitingUser: React.FC<InvitingUserType>;
+export {};

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

@@ -0,0 +1,16 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { Container as t, Avatar as e, Content as s, Name as m } from "./styles.js";
+import "@linaria/react";
+const f = ({ avatar: i, name: n }) => /* @__PURE__ */ r(t, { children: [
+  i && /* @__PURE__ */ o(e, { src: i }),
+  /* @__PURE__ */ r(s, { children: [
+    /* @__PURE__ */ r(m, { children: [
+      n,
+      " "
+    ] }),
+    "is waiting for you!"
+  ] })
+] });
+export {
+  f as InvitingUser
+};

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

@@ -0,0 +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 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/invitingUser/styles.js

@@ -0,0 +1,24 @@
+import { styled as s } from "@linaria/react";
+const n = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cl51m2q",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("img")({
+  name: "Avatar",
+  class: "a2yhhhr",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "c1dtxxlr",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("span")({
+  name: "Name",
+  class: "n12clm3w",
+  propsAsIs: !1
+});
+export {
+  e as Avatar,
+  n as Container,
+  t as Content,
+  o as Name
+};

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 type OnboardingInstructionsProps = OnboardingStep & {
+    loading: boolean;
     stepsCount: number;
     currentStep: number;
 };
 export type OnboardingStep = {
     graphicSrc: string;
     headline?: string;
-    width?: number;
 };
 export declare const OnboardingInstructions: React.FC<OnboardingInstructionsProps>;
 export {};

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

@@ -1,19 +1,21 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { Container as d, Content as m, Graphic as s, Headline as p, StepsContainer as h, StepIndicator as l } from "./styles.js";
+import { Skeleton as c } from "../../../../skeleton/index.js";
+import { Container as m, Content as p, Graphic as s, Headline as a, StepsContainer as l, StepIndicator as x } from "./styles.js";
+import "../../../../skeleton/styles.js";
 import "@linaria/react";
-const j = ({
-  width: e,
-  graphicSrc: a,
-  headline: t,
-  stepsCount: c,
-  currentStep: n
-}) => /* @__PURE__ */ o(d, { children: [
-  /* @__PURE__ */ o(m, { children: [
-    /* @__PURE__ */ r(s, { "data-centered": n === 0, children: /* @__PURE__ */ r("img", { src: a, alt: t, width: e || 300 }) }),
-    t && /* @__PURE__ */ r(p, { children: t })
+const v = ({
+  loading: t,
+  graphicSrc: d,
+  headline: i,
+  stepsCount: h,
+  currentStep: e
+}) => /* @__PURE__ */ o(m, { children: [
+  /* @__PURE__ */ o(p, { "data-centered": e === 0, children: [
+    /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(c, { loading: t, style: { width: "80px", height: "80px" }, children: /* @__PURE__ */ r("img", { src: d, alt: i }) }) }),
+    i && /* @__PURE__ */ r(c, { loading: t, children: /* @__PURE__ */ r(a, { children: i }) })
   ] }),
-  /* @__PURE__ */ r(h, { children: Array.from({ length: c }).map((f, i) => /* @__PURE__ */ r(l, { "data-active": n === i }, i)) })
+  /* @__PURE__ */ r(l, { style: t ? { visibility: "hidden" } : {}, children: Array.from({ length: h }).map((f, n) => /* @__PURE__ */ r(x, { "data-active": e === n }, n)) })
 ] });
 export {
-  j as OnboardingInstructions
+  v as OnboardingInstructions
 };

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

@@ -1,7 +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<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Headline: 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 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

@@ -4,16 +4,16 @@ const a = /* @__PURE__ */ s("div")({
   class: "c1htq1lb",
   propsAsIs: !1
 }), e = /* @__PURE__ */ s("div")({
-  name: "Content",
-  class: "cjyzpp7",
+  name: "Graphic",
+  class: "gjyzpp7",
   propsAsIs: !1
 }), o = /* @__PURE__ */ s("div")({
-  name: "Graphic",
-  class: "g16mldgz",
+  name: "Headline",
+  class: "h16mldgz",
   propsAsIs: !1
 }), t = /* @__PURE__ */ s("div")({
-  name: "Headline",
-  class: "h69js65",
+  name: "Content",
+  class: "c69js65",
   propsAsIs: !1
 }), p = /* @__PURE__ */ s("div")({
   name: "StepsContainer",
@@ -26,9 +26,9 @@ const a = /* @__PURE__ */ s("div")({
 });
 export {
   a as Container,
-  e as Content,
-  o as Graphic,
-  t as Headline,
+  t as Content,
+  e as Graphic,
+  o as Headline,
   c as StepIndicator,
   p as StepsContainer
 };

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { HeaderNodeRef, type AppNodeRef } from '../../../../app/masters';
 import { icons } from '../../../../icons';
 export type OnboardingInviteCardProps = {
-    appNode: React.MutableRefObject<HTMLDivElement | null>;
+    renderToNode: AppNodeRef | HeaderNodeRef;
     inviteLink?: string;
     inviteCardTitle?: string;
     inviteCardSubtext?: string;

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

@@ -8,7 +8,7 @@ import "../../../copyNotification/index.js";
 import "../../../copyNotification/styles.js";
 import "@linaria/react";
 const E = ({
-  appNode: t,
+  renderToNode: t,
   inviteLink: r,
   socialLinks: i,
   inviteCardTitle: c,

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

@@ -3,7 +3,9 @@ import { icons } from '../../../../icons';
 type OnboardingRulesProps = {
     rules?: OnboardingRule[];
     rulesTitle?: string;
+    termsText?: string;
     primaryColor?: string;
+    openTerms: () => void;
 };
 export type OnboardingRule = {
     label: string;

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

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type OnboardingTermsProps = {
+    termsTitle?: string;
+    termsText?: string;
+};
+export declare const OnboardingTerms: React.FC<OnboardingTermsProps>;
+export {};

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

@@ -0,0 +1,10 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Container as o, Content as t, Title as l, ScrollingText as c } from "./styles.js";
+import "@linaria/react";
+const h = ({ termsTitle: n, termsText: e }) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ i(t, { children: [
+  /* @__PURE__ */ r(l, { children: n }),
+  /* @__PURE__ */ r(c, { children: e })
+] }) });
+export {
+  h as OnboardingTerms
+};

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

@@ -0,0 +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 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 ScrollingText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -0,0 +1,24 @@
+import { styled as s } from "@linaria/react";
+const t = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cj0g35h",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "c1xkhrbn",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "tifzb8b",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "ScrollingText",
+  class: "stduw5c",
+  propsAsIs: !1
+});
+export {
+  t as Container,
+  e as Content,
+  l as ScrollingText,
+  o as Title
+};

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

@@ -1,19 +1,20 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import { AnimatedCounter as r } from "../../animated-counter/index.js";
 import { resetCss as n } from "../../theme/theme.js";
-import { PointsContainer as e, PointsIcon as s, PointsSvg as m, PointsBody as p, PointsTitle as l, PointsValue as c } from "./styles.js";
+import { PointsContainer as e, PointsIcon as m, PointsSvg as s, PointsBody as p, PointsTitle as l, PointsValue as c } from "./styles.js";
 import "react-countup";
+import "../../theme/breakpoints.js";
 import "../../theme/constants.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-const v = ({ points: i }) => /* @__PURE__ */ t(e, { className: n, children: [
-  /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(m, { name: "icon-trophy" }) }),
+const y = ({ points: i }) => /* @__PURE__ */ t(e, { className: n, children: [
+  /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(s, { name: "icon-trophy" }) }),
   /* @__PURE__ */ t(p, { children: [
     /* @__PURE__ */ o(l, { children: "Total points" }),
     /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(r, { value: i }) })
   ] })
 ] });
 export {
-  v as Points
+  y as Points
 };

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

@@ -1,6 +1,6 @@
 import { jsxs as m, jsx as i } from "react/jsx-runtime";
 import { InsightContent as n } from "../../../questions/insight/index.js";
-import { Container as p, ActionBtn as s } from "./styles.js";
+import { Container as p, ActionBtn as c } from "./styles.js";
 import "react";
 import "../../../video-player/index.js";
 import "../../../icons/index.js";
@@ -8,14 +8,14 @@ import "@linaria/react";
 import "../../../video-player/styles.js";
 import "../../../../utils/common.js";
 import "../../../questions/insight/styles.js";
-const a = ({
+const d = ({
   openInsight: r,
   questionId: t,
   ...o
 }) => /* @__PURE__ */ m(p, { children: [
-  /* @__PURE__ */ i(n, { questionId: t, ...o, isPickHistory: !0 }),
-  r && /* @__PURE__ */ i(s, { onClick: () => r(t), children: "View Insight" })
+  /* @__PURE__ */ i(n, { questionId: t, ...o }),
+  r && /* @__PURE__ */ i(c, { onClick: () => r(t), children: "View Insight" })
 ] });
 export {
-  a as Insight
+  d as Insight
 };

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

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