@streamlayer/react-ui 0.98.1 → 0.100.0

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

@@ -1,44 +1,41 @@
 import { styled as s } from "@linaria/react";
 import { Button as o } from "../../button/index.js";
 import { SvgIcon as n } from "../../icons/index.js";
-import "react/jsx-runtime";
-import "../../button/styles.js";
-import "react";
-const m = /* @__PURE__ */ s("div")({
+const i = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c18uddbs",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "cvcfjf6",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "OnboardingHeader",
   class: "o1ie27lw",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("button")({
+}), d = /* @__PURE__ */ s("button")({
   name: "CloseBtn",
   class: "c15cjkwi",
   propsAsIs: !1
-}), t = () => n, A = /* @__PURE__ */ s(t())({
+}), t = () => n, m = /* @__PURE__ */ s(t())({
   name: "IconClose",
   class: "i1mavjt2",
   propsAsIs: !0
-}), b = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "OnboardingFooter",
   class: "o1x0dyzv",
   propsAsIs: !1
-}), e = () => o, v = /* @__PURE__ */ s(e())({
+}), e = () => o, I = /* @__PURE__ */ s(e())({
   name: "OnboardingActionBtn",
   class: "o1jfi9c3",
   propsAsIs: !0
 });
 export {
-  I as CloseBtn,
-  m as Container,
-  d as Content,
-  A as IconClose,
-  v as OnboardingActionBtn,
-  b as OnboardingFooter,
-  f as OnboardingHeader
+  d as CloseBtn,
+  i as Container,
+  p as Content,
+  m as IconClose,
+  I as OnboardingActionBtn,
+  f as OnboardingFooter,
+  l as OnboardingHeader
 };

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

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

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

@@ -1,37 +1,35 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as o } from "../../icons/index.js";
-import "react/jsx-runtime";
-import "react";
-const a = /* @__PURE__ */ s("div")({
+const e = /* @__PURE__ */ s("div")({
   name: "PointsContainer",
   class: "psiob9b",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "PointsIcon",
   class: "p1gqe4lh",
   propsAsIs: !1
-}), n = () => o, r = /* @__PURE__ */ s(n())({
+}), n = () => o, a = /* @__PURE__ */ s(n())({
   name: "PointsSvg",
   class: "p15syg2y",
   propsAsIs: !0
-}), c = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "PointsBody",
   class: "p12n4f2h",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), c = /* @__PURE__ */ s("div")({
   name: "PointsTitle",
   class: "poqmx89",
   propsAsIs: !1
-}), P = /* @__PURE__ */ s("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "PointsValue",
   class: "prj9b3v",
   propsAsIs: !1
 });
 export {
-  c as PointsBody,
-  a as PointsContainer,
-  l as PointsIcon,
-  r as PointsSvg,
-  m as PointsTitle,
-  P as PointsValue
+  l as PointsBody,
+  e as PointsContainer,
+  p as PointsIcon,
+  a as PointsSvg,
+  c as PointsTitle,
+  r as PointsValue
 };

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

@@ -1,6 +1,4 @@
 /// <reference types="react" />
 import { type PickHistory } from '@streamlayer/sdk-web-types';
 export declare const QuestionSkeleton: React.FC;
-export declare const Question: React.FC<{
-    openQuestion?: (questionId: string) => void;
-} & PickHistory>;
+export declare const Question: React.FC<PickHistory>;

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

@@ -1,53 +1,48 @@
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { PickHistoryStatus as e, QuestionType as a, QuestionStatus as y } from "@streamlayer/sdk-web-types";
-import { QuestionTypeData as Q } from "../constants.js";
-import { Skeleton as l } from "../../skeleton/index.js";
-import { QuestionActionIcon as i, SkeletonContainer as I, SkeletonButton as S, QuestionItem as k, QuestionContent as f, QuestionCaption as A, QuestionTypeIcon as T, QuestionTypeLabel as L, QuestionBody as P, QuestionAction as w, PlayButton as x } from "./styles.js";
-import "../../skeleton/styles.js";
-import "@linaria/react";
-import "../../icons/index.js";
-import "react";
-const C = {
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { PickHistoryStatus as e, QuestionType as a, QuestionStatus as p } from "@streamlayer/sdk-web-types";
+import { QuestionTypeData as h } from "../constants.js";
+import { Skeleton as c } from "../../skeleton/index.js";
+import { QuestionActionIcon as i, SkeletonContainer as y, SkeletonButton as I, QuestionItem as S, QuestionContent as f, QuestionCaption as k, QuestionTypeIcon as A, QuestionTypeLabel as T, QuestionBody as L, QuestionAction as P, PlayButton as w } from "./styles.js";
+const x = {
   [e.LOST]: /* @__PURE__ */ t(i, { name: "incorrectVoted" }),
   [e.WON]: /* @__PURE__ */ t(i, { name: "icon-check" }),
   [e.UNSET]: /* @__PURE__ */ t(i, { name: "icon-arrow" }),
   [e.DNP]: /* @__PURE__ */ t(i, { name: "icon-arrow" })
-}, j = () => /* @__PURE__ */ o(I, { children: [
-  /* @__PURE__ */ t(l, { loading: !0, style: { width: "35%" } }),
-  /* @__PURE__ */ t(l, { loading: !0, style: { width: "70%" } }),
-  /* @__PURE__ */ t(S, {})
-] }), v = ({
+}, B = () => /* @__PURE__ */ n(y, { children: [
+  /* @__PURE__ */ t(c, { loading: !0, style: { width: "35%" } }),
+  /* @__PURE__ */ t(c, { loading: !0, style: { width: "70%" } }),
+  /* @__PURE__ */ t(I, {})
+] }), C = ({
   questionId: s,
-  questionType: n,
-  questionStatus: m,
+  questionType: o,
+  questionStatus: l,
   subject: u,
   openForVoting: d,
-  openQuestion: r,
-  status: p
+  status: m
 }) => {
-  const c = Q[n], h = C[p];
-  return c ? /* @__PURE__ */ o(k, { onClick: () => r == null ? void 0 : r(s), children: [
-    /* @__PURE__ */ o(f, { children: [
-      /* @__PURE__ */ o(A, { children: [
+  const r = h[o], Q = x[m];
+  return r ? /* @__PURE__ */ n(S, { "data-name": s, children: [
+    /* @__PURE__ */ n(f, { children: [
+      /* @__PURE__ */ n(k, { children: [
         /* @__PURE__ */ t(
-          T,
+          A,
           {
-            "data-type-trivia": n === a.TRIVIA,
-            "data-type-poll": n === a.POLL,
-            name: c.iconName
+            "data-type-trivia": o === a.TRIVIA,
+            "data-type-poll": o === a.POLL,
+            name: r.iconName
           }
         ),
-        /* @__PURE__ */ o(L, { children: [
-          c.label,
-          n === a.TRIVIA && m === y.RESOLVED && " • Expired"
+        /* @__PURE__ */ n(T, { children: [
+          r.label,
+          o === a.TRIVIA && l === p.RESOLVED && " • Expired"
         ] })
       ] }),
-      /* @__PURE__ */ t(P, { children: u || "" })
+      /* @__PURE__ */ t(L, { children: u || "" })
     ] }),
-    /* @__PURE__ */ t(w, { children: d ? /* @__PURE__ */ t(x, { children: "Play" }) : h })
+    /* @__PURE__ */ t(P, { children: d ? /* @__PURE__ */ t(w, { children: "Play" }) : Q })
   ] }) : null;
 };
 export {
-  v as Question,
-  j as QuestionSkeleton
+  C as Question,
+  B as QuestionSkeleton
 };

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

@@ -2,7 +2,6 @@
 import { InsightContentProps } from '../../../questions/insight';
 import { VideoPlayerProps } from '../../../video-player';
 type InsightProps = InsightContentProps & {
-    openInsight?: (questionId: string) => void;
     controlVideo: VideoPlayerProps['controlVideo'];
 };
 export declare const Insight: React.FC<InsightProps>;

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

@@ -1,18 +1,10 @@
-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 c } from "./styles.js";
-import "@streamlayer/sdk-web-types";
-import "../../../video-player/index.js";
-import "@linaria/core";
-import "react";
-import "../../../icons/index.js";
-import "@linaria/react";
-import "../../../video-player/styles.js";
-import "../../../questions/insight/styles.js";
-const k = ({ openInsight: r, questionId: t, ...o }) => /* @__PURE__ */ m(p, { children: [
-  /* @__PURE__ */ i(n, { questionId: t, ...o }),
-  r && /* @__PURE__ */ i(c, { onClick: () => r(t), children: "View Insight" })
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { InsightContent as o } from "../../../questions/insight/index.js";
+import { Container as m, ActionBtn as a } from "./styles.js";
+const c = ({ questionId: t, ...r }) => /* @__PURE__ */ i(m, { "data-name": t, children: [
+  /* @__PURE__ */ n(o, { questionId: t, ...r }),
+  /* @__PURE__ */ n(a, { "data-name": t, children: "View Insight" })
 ] });
 export {
-  k as Insight
+  c as Insight
 };

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

@@ -1,68 +1,31 @@
-import { jsx as e } from "react/jsx-runtime";
-import { QuestionSkeleton as l, Question as f } from "../index.js";
-import { Insight as c } from "../insight/index.js";
-import { Twitter as d } from "../twitter/index.js";
-import { pauseAllVideos as h } from "../../../video-player/index.js";
-import { QuestionsContainer as p } from "./styles.js";
-import "@streamlayer/sdk-web-types";
-import "../../constants.js";
-import "../../../skeleton/index.js";
-import "../../../skeleton/styles.js";
-import "@linaria/react";
-import "../styles.js";
-import "../../../icons/index.js";
-import "react";
-import "../../../questions/insight/index.js";
-import "../../../questions/insight/styles.js";
-import "@linaria/core";
-import "../../../video-player/styles.js";
-import "../insight/styles.js";
-import "../../../questions/twitter/index.js";
-import "../../../questions/twitter/account/index.js";
-import "../../../../utils/common.js";
-import "../../../questions/twitter/account/styles.js";
-import "../../../questions/twitter/styles.js";
-import "../twitter/styles.js";
-import "../../../button/index.js";
-import "../../../button/styles.js";
-const N = ({ questions: r, openQuestion: b, controlVideo: n }) => {
-  const m = (t) => {
-    h(), b(t, { openedFrom: "list" });
+import { jsx as r } from "react/jsx-runtime";
+import { QuestionSkeleton as c, Question as f } from "../index.js";
+import { Insight as d } from "../insight/index.js";
+import { Twitter as h } from "../twitter/index.js";
+import { pauseAllVideos as g } from "../../../video-player/index.js";
+import { QuestionsContainer as m } from "./styles.js";
+const k = ({ questions: n, openQuestion: b, controlVideo: u }) => {
+  const l = (t) => {
+    const e = t.target.getAttribute("data-name");
+    e && (g(), b(e, { openedFrom: "list" }));
   };
-  return r ? /* @__PURE__ */ e(p, { children: r == null ? void 0 : r.map((t) => {
-    var o, u, s;
-    if (t.type === "question" && ((o = t.attributes) == null ? void 0 : o.attributes.case) === "question") {
+  return n ? /* @__PURE__ */ r(m, { onClick: l, children: n == null ? void 0 : n.map((t) => {
+    var e, a, s;
+    if (t.type === "question" && ((e = t.attributes) == null ? void 0 : e.attributes.case) === "question") {
       const i = t.attributes.attributes.value;
-      return /* @__PURE__ */ e(f, { openQuestion: m, ...i }, i.questionId);
+      return /* @__PURE__ */ r(f, { ...i }, i.questionId);
     }
-    if (t.type === "insight" && ((u = t.attributes) == null ? void 0 : u.attributes.case) === "insight") {
+    if (t.type === "insight" && ((a = t.attributes) == null ? void 0 : a.attributes.case) === "insight") {
       const i = t.attributes.attributes.value;
-      return /* @__PURE__ */ e(
-        c,
-        {
-          openInsight: m,
-          controlVideo: n,
-          ...i
-        },
-        i.questionId
-      );
+      return /* @__PURE__ */ r(d, { controlVideo: u, ...i }, i.questionId);
     }
     if (t.type === "tweet" && ((s = t.attributes) == null ? void 0 : s.attributes.case) === "tweet") {
-      const i = t.attributes.attributes.value, a = t.attributes.id;
-      return /* @__PURE__ */ e(
-        d,
-        {
-          openTweet: m,
-          controlVideo: n,
-          ...i,
-          tweetId: a
-        },
-        a
-      );
+      const i = t.attributes.attributes.value, o = t.attributes.id;
+      return /* @__PURE__ */ r(h, { controlVideo: u, ...i, tweetId: o }, o);
     }
     return null;
-  }) }) : /* @__PURE__ */ e(p, { children: Array.from({ length: 5 }).map((t, o) => /* @__PURE__ */ e(l, {}, o)) });
+  }) }) : /* @__PURE__ */ r(m, { children: Array.from({ length: 5 }).map((t, e) => /* @__PURE__ */ r(c, {}, e)) });
 };
 export {
-  N as QuestionList
+  k as QuestionList
 };

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

@@ -1,50 +1,37 @@
-import { jsxs as a, jsx as o, Fragment as d } from "react/jsx-runtime";
-import { QuestionType as m } from "@streamlayer/sdk-web-types";
+import { jsxs as t, jsx as a, Fragment as p } from "react/jsx-runtime";
+import { QuestionType as l } from "@streamlayer/sdk-web-types";
 import { QuestionTypeData as T } from "../../constants.js";
 import { Insight as f } from "./insight/index.js";
 import { Container as E, CloseIconWrap as I, CloseIcon as h, Header as C, TypeIcon as A, TypeName as W, Question as s, AnswerButton as x } from "./styles.js";
 import { Tweet as D } from "./tweet/index.js";
-import "../../../video-player/index.js";
-import "@linaria/core";
-import "react";
-import "../../../icons/index.js";
-import "@linaria/react";
-import "../../../video-player/styles.js";
-import "./insight/styles.js";
-import "../../../questions/twitter/index.js";
-import "../../../questions/twitter/account/index.js";
-import "../../../../utils/common.js";
-import "../../../questions/twitter/account/styles.js";
-import "../../../questions/twitter/styles.js";
-import "./tweet/styles.js";
-const K = ({
-  close: e,
-  action: t,
-  controlVideo: l,
-  data: { questionType: r, question: i, insight: n, tweet: c }
+const k = ({
+  close: d,
+  action: n,
+  controlVideo: c,
+  data: { questionType: r, question: o, insight: e, tweet: i }
 }) => {
-  const p = T[r];
-  return p ? /* @__PURE__ */ a(E, { style: r === m.TWEET ? { paddingTop: "12px" } : {}, children: [
-    /* @__PURE__ */ o(I, { onClick: e, children: /* @__PURE__ */ o(h, { name: "icon-cross" }) }),
-    r !== m.TWEET && /* @__PURE__ */ a(C, { children: [
-      /* @__PURE__ */ o(
+  const m = T[r];
+  return m ? /* @__PURE__ */ t(E, { style: r === l.TWEET ? { paddingTop: "12px" } : {}, children: [
+    /* @__PURE__ */ a(I, { onClick: d, children: /* @__PURE__ */ a(h, { name: "icon-cross" }) }),
+    r !== l.TWEET && /* @__PURE__ */ t(C, { children: [
+      /* @__PURE__ */ a(
         A,
         {
-          "data-type-trivia": r === m.TRIVIA,
-          "data-type-poll": r === m.POLL,
-          name: p.iconName
+          "data-type-trivia": r === l.TRIVIA,
+          "data-type-poll": r === l.POLL,
+          name: m.iconName
         }
       ),
-      /* @__PURE__ */ o(W, { children: p.label })
+      /* @__PURE__ */ a(W, { children: m.label })
     ] }),
-    r === m.FACTOID && n && /* @__PURE__ */ o(f, { ...n, action: t, controlVideo: l }),
-    r === m.TWEET && c && /* @__PURE__ */ o(D, { ...c, action: t, controlVideo: l }),
-    r !== m.FACTOID && r !== m.TWEET && /* @__PURE__ */ a(d, { children: [
-      /* @__PURE__ */ o(s, { children: i == null ? void 0 : i.title }),
-      /* @__PURE__ */ o(x, { onClick: t, children: "Answer" })
+    r === l.FACTOID && e && /* @__PURE__ */ a(f, { ...e, action: n, controlVideo: c }),
+    r === l.TWEET && i && /* @__PURE__ */ a(D, { ...i, action: n, controlVideo: c }),
+    r !== l.FACTOID && r !== l.TWEET && /* @__PURE__ */ t(p, { children: [
+      /* @__PURE__ */ a(s, { children: o == null ? void 0 : o.title }),
+      /* @__PURE__ */ a(x, { onClick: n, children: "Answer" })
     ] })
   ] }) : null;
 };
 export {
-  K as Notification
+  k as Notification
 };

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

@@ -1,21 +1,16 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { QuestionImages as c } from "@streamlayer/sdk-web-types";
-import { VideoPlayer as e } from "../../../../video-player/index.js";
-import { InsightContainer as h, ImageContainer as u, Image as a, InsightContent as I, Title as g, Description as f, ActionBtn as C } from "./styles.js";
-import "@linaria/core";
-import "react";
-import "../../../../icons/index.js";
-import "@linaria/react";
-import "../../../../video-player/styles.js";
-const A = ({ video: r, image: n, imageMode: o, heading: i, body: s, action: m, controlVideo: p }) => /* @__PURE__ */ l(h, { children: [
-  (r == null ? void 0 : r.url) && /* @__PURE__ */ t(e, { source: r.url, poster: r.thumbnailUrl, controlVideo: p }),
-  n && !(r != null && r.url) && /* @__PURE__ */ t(u, { "data-rounded": o === c.ROUNDED, children: /* @__PURE__ */ t(a, { src: n, alt: i }) }),
-  /* @__PURE__ */ l(I, { children: [
-    /* @__PURE__ */ t(g, { children: i }),
-    /* @__PURE__ */ t(f, { children: s }),
-    m && /* @__PURE__ */ t(C, { onClick: m, children: "View Insight" })
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { QuestionImages as h } from "@streamlayer/sdk-web-types";
+import { VideoPlayer as o } from "../../../../video-player/index.js";
+import { InsightContainer as u, ImageContainer as a, Image as p, InsightContent as I, Title as g, Description as f, ActionBtn as C } from "./styles.js";
+const V = ({ video: r, image: t, imageMode: i, heading: l, body: m, action: s, controlVideo: e }) => /* @__PURE__ */ c(u, { children: [
+  (r == null ? void 0 : r.url) && /* @__PURE__ */ n(o, { source: r.url, poster: r.thumbnailUrl, controlVideo: e }),
+  t && !(r != null && r.url) && /* @__PURE__ */ n(a, { "data-rounded": i === h.ROUNDED, children: /* @__PURE__ */ n(p, { src: t, alt: l }) }),
+  /* @__PURE__ */ c(I, { children: [
+    /* @__PURE__ */ n(g, { children: l }),
+    /* @__PURE__ */ n(f, { children: m }),
+    s && /* @__PURE__ */ n(C, { onClick: s, children: "View Insight" })
   ] })
 ] });
 export {
-  A as Insight
+  V as Insight
 };

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

@@ -1,12 +1,10 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { SvgIcon as e } from "../../../../icons/index.js";
-import { Container as p, Content as c, Title as l } from "./styles.js";
-import "@linaria/react";
-import "react";
-const a = ({ title: o, onClick: n, className: i, style: t }) => /* @__PURE__ */ r(p, { onClick: n, className: i, style: t, children: /* @__PURE__ */ m(c, { children: [
-  /* @__PURE__ */ r(e, { name: "iconUp" }),
-  o && /* @__PURE__ */ r(l, { children: o })
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { SvgIcon as m } from "../../../../icons/index.js";
+import { Container as c, Content as l, Title as p } from "./styles.js";
+const h = ({ title: n, onClick: o, className: i, style: e }) => /* @__PURE__ */ r(c, { onClick: o, className: i, style: e, children: /* @__PURE__ */ t(l, { children: [
+  /* @__PURE__ */ r(m, { name: "iconUp" }),
+  n && /* @__PURE__ */ r(p, { children: n })
 ] }) });
 export {
-  a as Pill
+  h as Pill
 };

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

@@ -1,42 +1,41 @@
 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: i, correct: L }) => /* @__PURE__ */ r(a, { children: [
-  /* @__PURE__ */ r(n, { "data-active": i === 1, "data-first-screen": "true", children: [
+import { BGWrap as i, 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 w, BGFourLineTwo as F, BGFourLineThree as O, BGFourLineFour as m } from "./styles.js";
+const s = ({ step: n, correct: L }) => /* @__PURE__ */ r(a, { children: [
+  /* @__PURE__ */ r(i, { "data-active": n === 1, "data-first-screen": "true", children: [
     /* @__PURE__ */ e(T, {}),
     /* @__PURE__ */ e(l, {}),
     /* @__PURE__ */ e(u, {})
   ] }),
-  /* @__PURE__ */ r(n, { "data-active": i === 2, children: [
+  /* @__PURE__ */ r(i, { "data-active": n === 2, children: [
     /* @__PURE__ */ e(t, {}),
     /* @__PURE__ */ e(o, {}),
     /* @__PURE__ */ e(c, {})
   ] }),
-  /* @__PURE__ */ r(n, { "data-active": i === 3, children: [
+  /* @__PURE__ */ r(i, { "data-active": n === 3, children: [
     /* @__PURE__ */ e(t, {}),
     /* @__PURE__ */ e(o, {}),
     /* @__PURE__ */ e(c, {})
   ] }),
   L ? /* @__PURE__ */ r(a, { children: [
-    /* @__PURE__ */ r(n, { "data-active": i === 4, "data-correct": "true", children: [
+    /* @__PURE__ */ r(i, { "data-active": n === 4, "data-correct": "true", children: [
       /* @__PURE__ */ e(d, {}),
       /* @__PURE__ */ e(h, {}),
       /* @__PURE__ */ e(B, {}),
       /* @__PURE__ */ e(G, {})
     ] }),
-    /* @__PURE__ */ r(n, { "data-active": i === 5, "data-correct": "true", children: [
+    /* @__PURE__ */ r(i, { "data-active": n === 5, "data-correct": "true", children: [
       /* @__PURE__ */ e(d, {}),
       /* @__PURE__ */ e(h, {}),
       /* @__PURE__ */ e(B, {}),
       /* @__PURE__ */ e(G, {})
     ] })
-  ] }) : /* @__PURE__ */ r(n, { "data-active": i === 4, "data-correct": "false", children: [
-    /* @__PURE__ */ e(m, {}),
+  ] }) : /* @__PURE__ */ r(i, { "data-active": n === 4, "data-correct": "false", children: [
     /* @__PURE__ */ e(w, {}),
     /* @__PURE__ */ e(F, {}),
-    /* @__PURE__ */ e(O, {})
+    /* @__PURE__ */ e(O, {}),
+    /* @__PURE__ */ e(m, {})
   ] })
 ] });
 export {
-  x as AnimationLines
+  s as AnimationLines
 };