@cuemath/leap 3.4.8 → 3.4.9-akm-2

package/dist/features/circle-games/games/tutorial/tutorial-styled.js

@@ -1,37 +1,39 @@
-import i from "styled-components";
+import o from "styled-components";
 import { HEADER_HEIGHT as t } from "./constants.js";
-const n = i.div`
+const n = o.div`
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 250px;
-  background: ${({ theme: o }) => o.colors.BLACK_1};
+  background: ${({ theme: i }) => i.colors.BLACK_1};
   position: relative;
   width: inherit;
-`, a = i.div`
+`, p = o.div`
+  padding: 30px 10px 10px 10px;
+`, a = o.div`
   height: ${t}px;
   padding-top: ${(window.ReactNativeTopInset || 0) + 24}px;
   width: 100%;
-  background: ${({ theme: o }) => o.colors.WHITE_T_03};
+  background: ${({ theme: i }) => i.colors.WHITE_T_03};
   backdrop-filter: blur(40px);
   position: relative;
   flex-shrink: 0;
-`, d = i.div`
+`, d = o.div`
   position: absolute;
   right: 16px;
   top: ${(window.ReactNativeTopInset || 0) + 22}px;
   z-index: 1;
   &:hover {
-    background: ${({ theme: o }) => o.colors.BLACK_4};
+    background: ${({ theme: i }) => i.colors.BLACK_4};
     cursor: pointer;
   }
-`, l = i.div`
+`, l = o.div`
   display: flex;
   flex-direction: column;
   /* overflow: hidden; */
   flex-grow: 1;
   position: relative;
-`, p = i.div`
+`, s = o.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -50,6 +52,7 @@ export {
   a as GameTutorialHeader,
   n as GameTutorialWrapper,
   d as HeaderIconContainer,
-  p as VideoContainer
+  p as TextWrapper,
+  s as VideoContainer
 };
 //# sourceMappingURL=tutorial-styled.js.map

package/dist/features/circle-games/games/tutorial/tutorial-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"tutorial-styled.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { HEADER_HEIGHT } from './constants';\n\nexport const GameTutorialWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 250px;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  position: relative;\n  width: inherit;\n`;\n\nexport const GameTutorialHeader = styled.div`\n  height: ${HEADER_HEIGHT}px;\n  padding-top: ${(window.ReactNativeTopInset || 0) + 24}px;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.WHITE_T_03};\n  backdrop-filter: blur(40px);\n  position: relative;\n  flex-shrink: 0;\n`;\n\nexport const HeaderIconContainer = styled.div`\n  position: absolute;\n  right: 16px;\n  top: ${(window.ReactNativeTopInset || 0) + 22}px;\n  z-index: 1;\n  &:hover {\n    background: ${({ theme }) => theme.colors.BLACK_4};\n    cursor: pointer;\n  }\n`;\n\nexport const GameTutorialContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* overflow: hidden; */\n  flex-grow: 1;\n  position: relative;\n`;\n\nexport const VideoContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  & video {\n    height: 100%;\n    width: auto;\n  }\n`;\n"],"names":["GameTutorialWrapper","styled","theme","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer"],"mappings":";;AAIO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKtCC,IAAqBF,EAAO;AAAA,YAC7BG,CAAa;AAAA,kBACP,OAAO,uBAAuB,KAAK,EAAE;AAAA;AAAA,gBAEvC,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAsBJ,EAAO;AAAA;AAAA;AAAA,UAGhC,OAAO,uBAAuB,KAAK,EAAE;AAAA;AAAA;AAAA,kBAG7B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKxCI,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ/BM,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"tutorial-styled.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { HEADER_HEIGHT } from './constants';\n\nexport const GameTutorialWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 250px;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  position: relative;\n  width: inherit;\n`;\n\nexport const TextWrapper = styled.div`\n  padding: 30px 10px 10px 10px;\n`;\n\nexport const GameTutorialHeader = styled.div`\n  height: ${HEADER_HEIGHT}px;\n  padding-top: ${(window.ReactNativeTopInset || 0) + 24}px;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.WHITE_T_03};\n  backdrop-filter: blur(40px);\n  position: relative;\n  flex-shrink: 0;\n`;\n\nexport const HeaderIconContainer = styled.div`\n  position: absolute;\n  right: 16px;\n  top: ${(window.ReactNativeTopInset || 0) + 22}px;\n  z-index: 1;\n  &:hover {\n    background: ${({ theme }) => theme.colors.BLACK_4};\n    cursor: pointer;\n  }\n`;\n\nexport const GameTutorialContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* overflow: hidden; */\n  flex-grow: 1;\n  position: relative;\n`;\n\nexport const VideoContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  & video {\n    height: 100%;\n    width: auto;\n  }\n`;\n"],"names":["GameTutorialWrapper","styled","theme","TextWrapper","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer"],"mappings":";;AAIO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKtCC,IAAcF,EAAO;AAAA;AAAA,GAIrBG,IAAqBH,EAAO;AAAA,YAC7BI,CAAa;AAAA,kBACP,OAAO,uBAAuB,KAAK,EAAE;AAAA;AAAA,gBAEvC,CAAC,EAAE,OAAAH,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,GAMzCI,IAAsBL,EAAO;AAAA;AAAA;AAAA,UAGhC,OAAO,uBAAuB,KAAK,EAAE;AAAA;AAAA;AAAA,kBAG7B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKxCK,IAAwBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ/BO,IAAiBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/circle-games/games/tutorial/tutorial.js

@@ -1,70 +1,58 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useRef as m, useState as i, useCallback as f } from "react";
-import C from "../../../../assets/line-icons/icons/cross.js";
+import { forwardRef as P, useRef as m, useState as n, useImperativeHandle as y, useCallback as f } from "react";
+import A from "../../../../assets/line-icons/icons/cross.js";
 import p from "../../../ui/text/text.js";
-import { InfoBar as E } from "../../comps/info-bar/info-bar.js";
-import { GameTutorialWrapper as H, GameTutorialHeader as A, HeaderIconContainer as G, GameTutorialContainer as R, VideoContainer as U } from "./tutorial-styled.js";
-import { VideoProgressBar as j } from "./video-progress-bar/video-progress-bar.js";
-const M = ({
-  src: h,
-  title: t,
-  onCross: n,
-  showProgress: g = !0,
-  onTutorialPlayedOnce: o,
-  isJourneyActive: b
-}) => {
-  const e = m(null), s = m(!1), [I, d] = i(0), [W, $] = i(0), [T, v] = i(null), P = f(
-    (c) => {
-      const x = c.target.currentTime || 0, a = c.target.duration || 1, u = x / a * 100;
-      u >= 90 && !s.current && (s.current = !0, o == null || o()), d(u), $(a);
-    },
-    [o]
-  ), V = f(() => {
-    e.current && v(e.current.clientWidth);
-  }, []);
-  return /* @__PURE__ */ l(H, { children: [
-    (t || n) && /* @__PURE__ */ l(A, { children: [
-      t && /* @__PURE__ */ r(p, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: t }),
-      n && /* @__PURE__ */ r(G, { children: /* @__PURE__ */ r(C, { color: "#fff", onClick: n }) })
-    ] }),
-    b && /* @__PURE__ */ r(E, { hue: "PURPLE", children: /* @__PURE__ */ r(
-      p,
-      {
-        $renderOnMobileAs: "ab3-bold",
-        $renderAs: "ab2-bold",
-        $color: "WHITE_T_87",
-        $align: "center",
-        children: "Understanding the rules is always helpful before you begin."
-      }
-    ) }),
-    /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(
-      "video",
-      {
-        ref: e,
-        onPlay: V,
-        loop: !0,
-        autoPlay: !0,
-        muted: !0,
-        src: h,
-        onTimeUpdate: P,
-        disablePictureInPicture: !0,
-        itemType: "video/mp4",
-        playsInline: !0
-      }
-    ) }) }),
-    g && e && /* @__PURE__ */ r(
-      j,
-      {
-        ref: e,
-        progress: I,
-        duration: W,
-        setProgress: d,
-        videoWidth: T || 0
-      }
-    )
-  ] });
-};
+import { GameTutorialWrapper as E, GameTutorialHeader as G, HeaderIconContainer as R, GameTutorialContainer as j, VideoContainer as k, TextWrapper as w } from "./tutorial-styled.js";
+import { VideoProgressBar as _ } from "./video-progress-bar/video-progress-bar.js";
+const B = P(
+  ({ src: h, title: o, onCross: i, showProgress: g = !0, onTutorialPlayedOnce: t, isJourneyActive: T }, W) => {
+    const e = m(null), a = m(!1), [I, c] = n(0), [$, b] = n(0), [v, V] = n(null);
+    y(W, () => e.current, []);
+    const x = f(
+      (s) => {
+        const C = s.target.currentTime || 0, d = s.target.duration || 1, u = C / d * 100;
+        u >= 90 && !a.current && (a.current = !0, t == null || t()), c(u), b(d);
+      },
+      [t]
+    ), H = f(() => {
+      e.current && V(e.current.clientWidth);
+    }, []);
+    return /* @__PURE__ */ l(E, { children: [
+      (o || i) && /* @__PURE__ */ l(G, { children: [
+        o && /* @__PURE__ */ r(p, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: o }),
+        i && /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(A, { color: "#fff", onClick: i }) })
+      ] }),
+      /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(
+        "video",
+        {
+          ref: e,
+          onPlay: H,
+          loop: !0,
+          autoPlay: !0,
+          muted: !0,
+          src: h,
+          onTimeUpdate: x,
+          disablePictureInPicture: !0,
+          itemType: "video/mp4",
+          playsInline: !0
+        }
+      ) }) }),
+      g && /* @__PURE__ */ r(
+        _,
+        {
+          ref: e,
+          progress: I,
+          duration: $,
+          setProgress: c,
+          videoWidth: v || 0
+        }
+      ),
+      T && /* @__PURE__ */ r(w, { children: /* @__PURE__ */ r(p, { $renderOnMobileAs: "ub3", $renderAs: "ub2", $color: "WHITE_T_87", $align: "center", children: "Please watch the tutorial for each activity before you start." }) })
+    ] });
+  }
+);
+B.displayName = "Tutorial";
 export {
-  M as Tutorial
+  B as Tutorial
 };
 //# sourceMappingURL=tutorial.js.map

package/dist/features/circle-games/games/tutorial/tutorial.js.map

@@ -1 +1 @@
-{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react';\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\nimport type { ITutorialProps } from './tutorial-types';\nimport { VideoProgressBar } from './video-progress-bar/video-progress-bar';\n\nexport const Tutorial = ({\n  src,\n  title,\n  onCross,\n  showProgress = true,\n  onTutorialPlayedOnce,\n  isJourneyActive,\n}: ITutorialProps) => {\n  const videoRef = useRef<HTMLVideoElement | null>(null);\n  const hasVideoEnded = useRef(false);\n  const [progress, setProgress] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [videoWidth, setVideoWidth] = useState<number | null>(null);\n\n  const onProgress = useCallback(\n    (e: ChangeEvent<HTMLVideoElement>) => {\n      const current = e.target.currentTime || 0;\n      const dur = e.target.duration || 1;\n      const p = (current / dur) * 100;\n\n      if (p >= 90 && !hasVideoEnded.current) {\n        hasVideoEnded.current = true;\n        onTutorialPlayedOnce?.();\n      }\n\n      setProgress(p);\n      setDuration(dur);\n    },\n    [onTutorialPlayedOnce],\n  );\n\n  const onVideoPlay = useCallback(() => {\n    if (videoRef.current) {\n      setVideoWidth(videoRef.current.clientWidth);\n    }\n  }, []);\n\n  return (\n    <Styled.GameTutorialWrapper>\n      {(title || onCross) && (\n        <Styled.GameTutorialHeader>\n          {title && (\n            <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n              {title}\n            </Text>\n          )}\n          {onCross && (\n            <Styled.HeaderIconContainer>\n              <CrossIcon color=\"#fff\" onClick={onCross} />\n            </Styled.HeaderIconContainer>\n          )}\n        </Styled.GameTutorialHeader>\n      )}\n\n      {isJourneyActive && (\n        <InfoBar hue=\"PURPLE\">\n          <Text\n            $renderOnMobileAs=\"ab3-bold\"\n            $renderAs=\"ab2-bold\"\n            $color=\"WHITE_T_87\"\n            $align=\"center\"\n          >\n            Understanding the rules is always helpful before you begin.\n          </Text>\n        </InfoBar>\n      )}\n\n      <Styled.GameTutorialContainer>\n        <Styled.VideoContainer>\n          <video\n            ref={videoRef}\n            onPlay={onVideoPlay}\n            loop={true}\n            autoPlay={true}\n            muted={true}\n            src={src}\n            onTimeUpdate={onProgress}\n            disablePictureInPicture={true}\n            itemType=\"video/mp4\"\n            playsInline\n          />\n        </Styled.VideoContainer>\n      </Styled.GameTutorialContainer>\n\n      {showProgress && videoRef && (\n        <VideoProgressBar\n          ref={videoRef}\n          progress={progress}\n          duration={duration}\n          setProgress={setProgress}\n          videoWidth={videoWidth || 0}\n        />\n      )}\n    </Styled.GameTutorialWrapper>\n  );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","videoRef","useRef","hasVideoEnded","progress","setProgress","useState","duration","setDuration","videoWidth","setVideoWidth","onProgress","useCallback","e","current","dur","p","onVideoPlay","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","VideoProgressBar"],"mappings":";;;;;;;AAUO,MAAMA,IAAW,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,sBAAAC;AAAA,EACA,iBAAAC;AACF,MAAsB;AACd,QAAAC,IAAWC,EAAgC,IAAI,GAC/CC,IAAgBD,EAAO,EAAK,GAC5B,CAACE,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,CAAC,GACpC,CAACG,GAAYC,CAAa,IAAIJ,EAAwB,IAAI,GAE1DK,IAAaC;AAAA,IACjB,CAACC,MAAqC;AAC9B,YAAAC,IAAUD,EAAE,OAAO,eAAe,GAClCE,IAAMF,EAAE,OAAO,YAAY,GAC3BG,IAAKF,IAAUC,IAAO;AAE5B,MAAIC,KAAK,MAAM,CAACb,EAAc,YAC5BA,EAAc,UAAU,IACDJ,KAAA,QAAAA,MAGzBM,EAAYW,CAAC,GACbR,EAAYO,CAAG;AAAA,IACjB;AAAA,IACA,CAAChB,CAAoB;AAAA,EAAA,GAGjBkB,IAAcL,EAAY,MAAM;AACpC,IAAIX,EAAS,WACGS,EAAAT,EAAS,QAAQ,WAAW;AAAA,EAE9C,GAAG,CAAE,CAAA;AAGH,SAAA,gBAAAiB,EAACC,GAAA,EACG,UAAA;AAAA,KAAAvB,KAASC,MACT,gBAAAqB,EAACE,GAAA,EACE,UAAA;AAAA,MACCxB,KAAA,gBAAAyB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACH1B,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAAwB,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAAS3B,EAAA,CAAS,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGDG,KACC,gBAAAqB,EAACI,GAAQ,EAAA,KAAI,UACX,UAAA,gBAAAJ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,mBAAkB;AAAA,QAClB,WAAU;AAAA,QACV,QAAO;AAAA,QACP,QAAO;AAAA,QACR,UAAA;AAAA,MAAA;AAAA,IAAA,GAGH;AAAA,sBAGDI,GAAA,EACC,UAAC,gBAAAL,EAAAM,GAAA,EACC,UAAA,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,QAAQgB;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAAtB;AAAA,QACA,cAAcgB;AAAA,QACd,yBAAyB;AAAA,QACzB,UAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,OAEf,EACF,CAAA;AAAA,IAECb,KAAgBG,KACf,gBAAAoB;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,KAAK3B;AAAA,QACL,UAAAG;AAAA,QACA,UAAAG;AAAA,QACA,aAAAF;AAAA,QACA,YAAYI,KAAc;AAAA,MAAA;AAAA,IAC5B;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ChangeEvent, ForwardedRef } from 'react';\nimport { forwardRef, useCallback, useRef, useState, useImperativeHandle } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './tutorial-styled';\nimport type { ITutorialProps } from './tutorial-types';\nimport { VideoProgressBar } from './video-progress-bar/video-progress-bar';\n\nexport const Tutorial = forwardRef<HTMLVideoElement, ITutorialProps>(\n  (\n    { src, title, onCross, showProgress = true, onTutorialPlayedOnce, isJourneyActive },\n    ref: ForwardedRef<HTMLVideoElement>,\n  ) => {\n    const internalVideoRef = useRef<HTMLVideoElement | null>(null);\n    const hasVideoEnded = useRef(false);\n    const [progress, setProgress] = useState(0);\n    const [duration, setDuration] = useState(0);\n    const [videoWidth, setVideoWidth] = useState<number | null>(null);\n\n    // Forward the internal ref to the outside\n    useImperativeHandle(ref, () => internalVideoRef.current as HTMLVideoElement, []);\n\n    const onProgress = useCallback(\n      (e: ChangeEvent<HTMLVideoElement>) => {\n        const current = e.target.currentTime || 0;\n        const dur = e.target.duration || 1;\n        const p = (current / dur) * 100;\n\n        if (p >= 90 && !hasVideoEnded.current) {\n          hasVideoEnded.current = true;\n          onTutorialPlayedOnce?.();\n        }\n\n        setProgress(p);\n        setDuration(dur);\n      },\n      [onTutorialPlayedOnce],\n    );\n\n    const onVideoPlay = useCallback(() => {\n      if (internalVideoRef.current) {\n        setVideoWidth(internalVideoRef.current.clientWidth);\n      }\n    }, []);\n\n    return (\n      <Styled.GameTutorialWrapper>\n        {(title || onCross) && (\n          <Styled.GameTutorialHeader>\n            {title && (\n              <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n                {title}\n              </Text>\n            )}\n            {onCross && (\n              <Styled.HeaderIconContainer>\n                <CrossIcon color=\"#fff\" onClick={onCross} />\n              </Styled.HeaderIconContainer>\n            )}\n          </Styled.GameTutorialHeader>\n        )}\n\n        <Styled.GameTutorialContainer>\n          <Styled.VideoContainer>\n            <video\n              ref={internalVideoRef}\n              onPlay={onVideoPlay}\n              loop\n              autoPlay\n              muted\n              src={src}\n              onTimeUpdate={onProgress}\n              disablePictureInPicture\n              itemType=\"video/mp4\"\n              playsInline\n            />\n          </Styled.VideoContainer>\n        </Styled.GameTutorialContainer>\n        {showProgress && (\n          <VideoProgressBar\n            ref={internalVideoRef}\n            progress={progress}\n            duration={duration}\n            setProgress={setProgress}\n            videoWidth={videoWidth || 0}\n          />\n        )}\n\n        {isJourneyActive && (\n          <Styled.TextWrapper>\n            <Text $renderOnMobileAs=\"ub3\" $renderAs=\"ub2\" $color=\"WHITE_T_87\" $align=\"center\">\n              Please watch the tutorial for each activity before you start.\n            </Text>\n          </Styled.TextWrapper>\n        )}\n      </Styled.GameTutorialWrapper>\n    );\n  },\n);\n\nTutorial.displayName = 'Tutorial';\n"],"names":["Tutorial","forwardRef","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","ref","internalVideoRef","useRef","hasVideoEnded","progress","setProgress","useState","duration","setDuration","videoWidth","setVideoWidth","useImperativeHandle","onProgress","useCallback","e","current","dur","p","onVideoPlay","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","Styled.GameTutorialContainer","Styled.VideoContainer","VideoProgressBar","Styled.TextWrapper"],"mappings":";;;;;;AASO,MAAMA,IAAWC;AAAA,EACtB,CACE,EAAE,KAAAC,GAAK,OAAAC,GAAO,SAAAC,GAAS,cAAAC,IAAe,IAAM,sBAAAC,GAAsB,iBAAAC,EAAgB,GAClFC,MACG;AACG,UAAAC,IAAmBC,EAAgC,IAAI,GACvDC,IAAgBD,EAAO,EAAK,GAC5B,CAACE,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,CAAC,GACpC,CAACG,GAAYC,CAAa,IAAIJ,EAAwB,IAAI;AAGhE,IAAAK,EAAoBX,GAAK,MAAMC,EAAiB,SAA6B,CAAE,CAAA;AAE/E,UAAMW,IAAaC;AAAA,MACjB,CAACC,MAAqC;AAC9B,cAAAC,IAAUD,EAAE,OAAO,eAAe,GAClCE,IAAMF,EAAE,OAAO,YAAY,GAC3BG,IAAKF,IAAUC,IAAO;AAE5B,QAAIC,KAAK,MAAM,CAACd,EAAc,YAC5BA,EAAc,UAAU,IACDL,KAAA,QAAAA,MAGzBO,EAAYY,CAAC,GACbT,EAAYQ,CAAG;AAAA,MACjB;AAAA,MACA,CAAClB,CAAoB;AAAA,IAAA,GAGjBoB,IAAcL,EAAY,MAAM;AACpC,MAAIZ,EAAiB,WACLS,EAAAT,EAAiB,QAAQ,WAAW;AAAA,IAEtD,GAAG,CAAE,CAAA;AAGH,WAAA,gBAAAkB,EAACC,GAAA,EACG,UAAA;AAAA,OAAAzB,KAASC,MACT,gBAAAuB,EAACE,GAAA,EACE,UAAA;AAAA,QACC1B,KAAA,gBAAA2B,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACH5B,EAAA,CAAA;AAAA,QAEDC,KACE,gBAAA0B,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAAS7B,EAAA,CAAS,EAC5C,CAAA;AAAA,MAAA,GAEJ;AAAA,wBAGD8B,GAAA,EACC,UAAC,gBAAAJ,EAAAK,GAAA,EACC,UAAA,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKrB;AAAA,UACL,QAAQiB;AAAA,UACR,MAAI;AAAA,UACJ,UAAQ;AAAA,UACR,OAAK;AAAA,UACL,KAAAxB;AAAA,UACA,cAAckB;AAAA,UACd,yBAAuB;AAAA,UACvB,UAAS;AAAA,UACT,aAAW;AAAA,QAAA;AAAA,SAEf,EACF,CAAA;AAAA,MACCf,KACC,gBAAAyB;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,KAAK3B;AAAA,UACL,UAAAG;AAAA,UACA,UAAAG;AAAA,UACA,aAAAF;AAAA,UACA,YAAYI,KAAc;AAAA,QAAA;AAAA,MAC5B;AAAA,MAGDV,KACE,gBAAAuB,EAAAO,GAAA,EACC,4BAACN,GAAK,EAAA,mBAAkB,OAAM,WAAU,OAAM,QAAO,cAAa,QAAO,UAAS,0EAElF,CAAA,GACF;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;AAEA/B,EAAS,cAAc;"}

package/dist/features/journey/journey-id/journey-id-student.js

@@ -1,4 +1,4 @@
-var R = /* @__PURE__ */ ((E) => (E.CIRCLE_ACTIVITIES_INTRO_JOURNEY = "CIRCLE_ACTIVITIES_INTRO_JOURNEY", E.CIRCLE_LEADERBOARD_INTRO_JOURNEY = "CIRCLE_LEADERBOARD_INTRO_JOURNEY", E.CIRCLE_POINTS_REWARD_JOURNEY = "CIRCLE_POINTS_REWARD_JOURNEY", E.CIRCLE_STREAK_UPDATE_JOURNEY = "CIRCLE_STREAK_UPDATE_JOURNEY", E.CIRCLE_TUTORIAL_JOURNEY = "CIRCLE_TUTORIAL_JOURNEY", E.CIRCLE_TABLES_INTRO_JOURNEY = "CIRCLE_TABLES_INTRO_JOURNEY", E.CIRCLE_TABLES_INFINTE_JOURNEY = "CIRCLE_TABLES_INFINITE_JOURNEY", E.CIRCLE_LESSONS_K_1_INTRO_JOURNEY = "CIRCLE_LESSONS_K_1_INTRO_JOURNEY", E.PLA_SWITCH_USER_JOURNEY = "PLA_SWITCH_USER_JOURNEY", E.HOMEPAGE_JOURNEY = "HOMEPAGE_JOURNEY", E.CHAPTER_PAGE_JOURNEY = "CHAPTER_PAGE_JOURNEY", E.PUZZLE_ATTEMPT_JOURNEY = "PUZZLE_ATTEMPT_JOURNEY", E.CHALLENGE_ARENA_JOURNEY = "CHALLENGE_ARENA_JOURNEY", E.DOWNLOAD_NODE_JOURNEY = "DOWNLOAD_NODE_JOURNEY", E.DOWNLOAD_BLOCK_JOURNEY = "DOWNLOAD_BLOCK_JOURNEY", E.PUZZLE_ASSIGNED_JOURNEY = "PUZZLE_ASSIGNED_JOURNEY", E.PUZZLE_DASHBOARD_JOURNEY = "PUZZLE_DASHBOARD_JOURNEY", E))(R || {});
+var R = /* @__PURE__ */ ((E) => (E.CIRCLE_ACTIVITIES_INTRO_JOURNEY = "CIRCLE_ACTIVITIES_INTRO_JOURNEY", E.CIRCLE_ACTIVITIES_INTRO_JOURNEY_V2 = "CIRCLE_ACTIVITIES_INTRO_JOURNEY_V2", E.CIRCLE_LEADERBOARD_INTRO_JOURNEY = "CIRCLE_LEADERBOARD_INTRO_JOURNEY", E.CIRCLE_POINTS_REWARD_JOURNEY = "CIRCLE_POINTS_REWARD_JOURNEY", E.CIRCLE_STREAK_UPDATE_JOURNEY = "CIRCLE_STREAK_UPDATE_JOURNEY", E.CIRCLE_TUTORIAL_JOURNEY = "CIRCLE_TUTORIAL_JOURNEY", E.CIRCLE_TABLES_INTRO_JOURNEY = "CIRCLE_TABLES_INTRO_JOURNEY", E.CIRCLE_TABLES_INFINTE_JOURNEY = "CIRCLE_TABLES_INFINITE_JOURNEY", E.CIRCLE_LESSONS_K_1_INTRO_JOURNEY = "CIRCLE_LESSONS_K_1_INTRO_JOURNEY", E.CIRCLE_LESSONS_K_1_INTRO_JOURNEY_V2 = "CIRCLE_LESSONS_K_1_INTRO_JOURNEY_V2", E.PLA_SWITCH_USER_JOURNEY = "PLA_SWITCH_USER_JOURNEY", E.HOMEPAGE_JOURNEY = "HOMEPAGE_JOURNEY", E.CHAPTER_PAGE_JOURNEY = "CHAPTER_PAGE_JOURNEY", E.PUZZLE_ATTEMPT_JOURNEY = "PUZZLE_ATTEMPT_JOURNEY", E.CHALLENGE_ARENA_JOURNEY = "CHALLENGE_ARENA_JOURNEY", E.DOWNLOAD_NODE_JOURNEY = "DOWNLOAD_NODE_JOURNEY", E.DOWNLOAD_BLOCK_JOURNEY = "DOWNLOAD_BLOCK_JOURNEY", E.PUZZLE_ASSIGNED_JOURNEY = "PUZZLE_ASSIGNED_JOURNEY", E.PUZZLE_DASHBOARD_JOURNEY = "PUZZLE_DASHBOARD_JOURNEY", E))(R || {});
 export {
   R as JOURNEY_ID_STUDENT
 };

package/dist/features/journey/journey-id/journey-id-student.js.map

@@ -1 +1 @@
-{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n  CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n  CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n  CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n  CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n  CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n  CIRCLE_TABLES_INTRO_JOURNEY = 'CIRCLE_TABLES_INTRO_JOURNEY',\n  CIRCLE_TABLES_INFINTE_JOURNEY = 'CIRCLE_TABLES_INFINITE_JOURNEY',\n  CIRCLE_LESSONS_K_1_INTRO_JOURNEY = 'CIRCLE_LESSONS_K_1_INTRO_JOURNEY',\n  PLA_SWITCH_USER_JOURNEY = 'PLA_SWITCH_USER_JOURNEY',\n\n  // TODO: Deprecate bottom journeys, they are not actually journeys\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  PUZZLE_ATTEMPT_JOURNEY = 'PUZZLE_ATTEMPT_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n  DOWNLOAD_NODE_JOURNEY = 'DOWNLOAD_NODE_JOURNEY',\n  DOWNLOAD_BLOCK_JOURNEY = 'DOWNLOAD_BLOCK_JOURNEY',\n  PUZZLE_ASSIGNED_JOURNEY = 'PUZZLE_ASSIGNED_JOURNEY',\n  PUZZLE_DASHBOARD_JOURNEY = 'PUZZLE_DASHBOARD_JOURNEY',\n}\n"],"names":["JOURNEY_ID_STUDENT"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,kCAAkC,mCAClCA,EAAA,mCAAmC,oCACnCA,EAAA,+BAA+B,gCAC/BA,EAAA,+BAA+B,gCAC/BA,EAAA,0BAA0B,2BAC1BA,EAAA,8BAA8B,+BAC9BA,EAAA,gCAAgC,kCAChCA,EAAA,mCAAmC,oCACnCA,EAAA,0BAA0B,2BAG1BA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,yBAAyB,0BACzBA,EAAA,0BAA0B,2BAC1BA,EAAA,wBAAwB,yBACxBA,EAAA,yBAAyB,0BACzBA,EAAA,0BAA0B,2BAC1BA,EAAA,2BAA2B,4BAnBjBA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n  CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n  CIRCLE_ACTIVITIES_INTRO_JOURNEY_V2 = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY_V2',\n  CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n  CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n  CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n  CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n  CIRCLE_TABLES_INTRO_JOURNEY = 'CIRCLE_TABLES_INTRO_JOURNEY',\n  CIRCLE_TABLES_INFINTE_JOURNEY = 'CIRCLE_TABLES_INFINITE_JOURNEY',\n  CIRCLE_LESSONS_K_1_INTRO_JOURNEY = 'CIRCLE_LESSONS_K_1_INTRO_JOURNEY',\n  CIRCLE_LESSONS_K_1_INTRO_JOURNEY_V2 = 'CIRCLE_LESSONS_K_1_INTRO_JOURNEY_V2',\n  PLA_SWITCH_USER_JOURNEY = 'PLA_SWITCH_USER_JOURNEY',\n\n  // TODO: Deprecate bottom journeys, they are not actually journeys\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  PUZZLE_ATTEMPT_JOURNEY = 'PUZZLE_ATTEMPT_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n  DOWNLOAD_NODE_JOURNEY = 'DOWNLOAD_NODE_JOURNEY',\n  DOWNLOAD_BLOCK_JOURNEY = 'DOWNLOAD_BLOCK_JOURNEY',\n  PUZZLE_ASSIGNED_JOURNEY = 'PUZZLE_ASSIGNED_JOURNEY',\n  PUZZLE_DASHBOARD_JOURNEY = 'PUZZLE_DASHBOARD_JOURNEY',\n}\n"],"names":["JOURNEY_ID_STUDENT"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,kCAAkC,mCAClCA,EAAA,qCAAqC,sCACrCA,EAAA,mCAAmC,oCACnCA,EAAA,+BAA+B,gCAC/BA,EAAA,+BAA+B,gCAC/BA,EAAA,0BAA0B,2BAC1BA,EAAA,8BAA8B,+BAC9BA,EAAA,gCAAgC,kCAChCA,EAAA,mCAAmC,oCACnCA,EAAA,sCAAsC,uCACtCA,EAAA,0BAA0B,2BAG1BA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,yBAAyB,0BACzBA,EAAA,0BAA0B,2BAC1BA,EAAA,wBAAwB,yBACxBA,EAAA,yBAAyB,0BACzBA,EAAA,0BAA0B,2BAC1BA,EAAA,2BAA2B,4BArBjBA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/journey/use-journey/constants.js

@@ -1,5 +1,5 @@
-var o = /* @__PURE__ */ ((e) => (e.TOOLTIP = "tooltip", e.NUDGE = "nudge", e))(o || {});
-const r = {
+var r = /* @__PURE__ */ ((e) => (e.TOOLTIP = "tooltip", e.NUDGE = "nudge", e))(r || {});
+const o = {
   nextCoachmark: () => {
   },
   setJourney: () => {
@@ -12,10 +12,12 @@ const r = {
   },
   coachmarks: [],
   userCompletedJourneyIds: [],
-  isJourneyActive: !1
+  isJourneyActive: !1,
+  trackView: () => {
+  }
 };
 export {
-  o as IndicatorType,
-  r as baseJourneyContext
+  r as IndicatorType,
+  o as baseJourneyContext
 };
 //# sourceMappingURL=constants.js.map

package/dist/features/journey/use-journey/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/features/journey/use-journey/constants.ts"],"sourcesContent":["import type { IJourneyContext } from './journey-context-types';\n\nexport enum IndicatorType {\n  TOOLTIP = 'tooltip',\n  NUDGE = 'nudge',\n}\n\nexport const baseJourneyContext: IJourneyContext = {\n  nextCoachmark: () => {},\n  setJourney: () => {},\n  addCoachmark: () => {},\n  clearJourney: () => {},\n  endJourney: () => {},\n  coachmarks: [],\n  userCompletedJourneyIds: [],\n  isJourneyActive: false,\n};\n"],"names":["IndicatorType","baseJourneyContext"],"mappings":"AAEY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAsC;AAAA,EACjD,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,YAAY,CAAC;AAAA,EACb,yBAAyB,CAAC;AAAA,EAC1B,iBAAiB;AACnB;"}
+{"version":3,"file":"constants.js","sources":["../../../../src/features/journey/use-journey/constants.ts"],"sourcesContent":["import type { IJourneyContext } from './journey-context-types';\n\nexport enum IndicatorType {\n  TOOLTIP = 'tooltip',\n  NUDGE = 'nudge',\n}\n\nexport const baseJourneyContext: IJourneyContext = {\n  nextCoachmark: () => {},\n  setJourney: () => {},\n  addCoachmark: () => {},\n  clearJourney: () => {},\n  endJourney: () => {},\n  coachmarks: [],\n  userCompletedJourneyIds: [],\n  isJourneyActive: false,\n  trackView: () => {},\n};\n"],"names":["IndicatorType","baseJourneyContext"],"mappings":"AAEY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAsC;AAAA,EACjD,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,YAAY,CAAC;AAAA,EACb,yBAAyB,CAAC;AAAA,EAC1B,iBAAiB;AAAA,EACjB,WAAW,MAAM;AAAA,EAAC;AACpB;"}

package/dist/features/journey/use-journey/journey-context-provider.js

@@ -1,55 +1,60 @@
-import { jsxs as R, jsx as j } from "react/jsx-runtime";
-import { createContext as W, useState as s, useRef as k, useCallback as h, useMemo as M, useEffect as O } from "react";
-import { Coachmark as V } from "../comps/coachmark/coachmark.js";
-import { usePostUserJourney as G, useGetUserJourney as F } from "../user-journey-api/user-journey-api.js";
-import { Overlay as I } from "./journey-styled.js";
-const K = W(null), re = ({ children: T, appId: a, userId: c }) => {
-  const [b, U] = s(!0), [q, z] = s(!1), [v, p] = s(null), [l, y] = s([]), [J, x] = s(!1), m = k(-1), t = k(void 0), f = k([]), [D, H] = s(!1), [A, L] = s({
+import { jsxs as W, jsx as T } from "react/jsx-runtime";
+import { createContext as M, useState as s, useRef as v, useCallback as c, useMemo as G, useEffect as b } from "react";
+import { Coachmark as F } from "../comps/coachmark/coachmark.js";
+import { usePostUserJourney as I, useGetUserJourney as K } from "../user-journey-api/user-journey-api.js";
+import { Overlay as Q } from "./journey-styled.js";
+const X = M(null), ne = ({ children: U, appId: l, userId: i }) => {
+  const [q, z] = s(!0), [D, H] = s(!1), [p, x] = s(null), [y, d] = s([]), [f, A] = s(!1), m = v(-1), t = v(void 0), w = v([]), [L, N] = s(!1), [$, R] = s({
     height: window.innerHeight,
     width: window.innerWidth
-  }), { post: $ } = G(), { data: w = null, get: _ } = F(), B = h(
+  }), { post: _ } = I(), { data: g = null, get: P } = K(), J = c(
+    (e) => {
+      _({
+        app_id: l,
+        user_id: i,
+        journey_id: e,
+        journey_status: "COMPLETED"
+      });
+    },
+    [l, _, i]
+  ), B = c(
     (e, r, o, C = !0) => {
-      var d, n;
-      if (l.length > 0) {
+      var h, n;
+      if (y.length > 0) {
         console.error(
           `setJourney: Other Journey is already active, Current Journey: ${t.current}, New Journey Request: ${e}`
         );
         return;
       }
-      x(!0), U(C), t.current = e, m.current = -1, y(
+      A(!0), z(C), t.current = e, m.current = -1, d(
         r.map((u) => ({
           ...u,
           isActive: !1
           // New coachmarks are inactive by default
         }))
-      ), o && (L({
-        height: ((d = o.current) == null ? void 0 : d.clientHeight) || window.innerHeight,
+      ), o && (R({
+        height: ((h = o.current) == null ? void 0 : h.clientHeight) || window.innerHeight,
         width: ((n = o.current) == null ? void 0 : n.clientWidth) || window.innerWidth
-      }), H(!0));
+      }), N(!0));
     },
-    [l.length]
-  ), i = h(() => {
-    f.current.forEach((e) => {
+    [y.length]
+  ), a = c(() => {
+    w.current.forEach((e) => {
       clearTimeout(e);
-    }), f.current = [], t.current = void 0, m.current = -1, y([]), x(!1);
-  }, []), E = h(
+    }), w.current = [], t.current = void 0, m.current = -1, d([]), A(!1);
+  }, []), E = c(
     (e) => {
-      i(), p((r) => r && !r.includes(e) ? [...r, e] : r), $({
-        app_id: a,
-        user_id: c,
-        journey_id: e,
-        journey_status: "COMPLETED"
-      });
+      a(), x((r) => r && !r.includes(e) ? [...r, e] : r), J(e);
     },
-    [a, i, $, c]
-  ), P = h((e, r) => {
+    [a, J]
+  ), S = c((e, r) => {
     if (!t.current || e !== t.current) {
       console.error(
         t.current ? `A Journey is already active, Current Journey: ${t.current}, New Journey Request: ${e}` : "addCoachmark was called before setJourney and Journey ID is undefined"
       );
       return;
     }
-    y((o) => [
+    d((o) => [
       ...o,
       {
         ...r,
@@ -57,7 +62,7 @@ const K = W(null), re = ({ children: T, appId: a, userId: c }) => {
         // New coachmarks are inactive by default
       }
     ]);
-  }, []), S = h(
+  }, []), j = c(
     (e, r = !1, o = 0, C = !1) => {
       if (!t.current || e !== t.current) {
         console.error(
@@ -65,79 +70,86 @@ const K = W(null), re = ({ children: T, appId: a, userId: c }) => {
         );
         return;
       }
-      z(C), o !== 0 && y((n) => n.map((u) => ({ ...u, isActive: !1 })));
-      const d = setTimeout(() => {
-        clearTimeout(d);
+      H(C), o !== 0 && d((n) => n.map((u) => ({ ...u, isActive: !1 })));
+      const h = setTimeout(() => {
+        clearTimeout(h);
         const n = m.current + 1;
-        y((u) => {
+        d((u) => {
           if (n >= u.length || u.length === 0)
-            return i(), [];
+            return a(), [];
           m.current = n;
-          const g = [...u];
-          return g[n].isActive = !0, n > 0 && (g[n - 1].isActive = r), g;
+          const k = [...u];
+          return k[n].isActive = !0, n > 0 && (k[n - 1].isActive = r), k;
         });
       }, o);
-      f.current.push(d);
+      w.current.push(h);
+    },
+    [a]
+  ), O = c(
+    (e) => {
+      J(e);
     },
-    [i]
-  ), N = M(
+    [J]
+  ), V = G(
     () => ({
-      nextCoachmark: S,
+      nextCoachmark: j,
       setJourney: B,
-      addCoachmark: P,
-      clearJourney: i,
+      addCoachmark: S,
+      clearJourney: a,
       endJourney: E,
-      coachmarks: l,
-      userCompletedJourneyIds: v,
-      isJourneyActive: J
+      coachmarks: y,
+      userCompletedJourneyIds: p,
+      isJourneyActive: f,
+      trackView: O
     }),
     [
-      S,
+      j,
       B,
-      P,
-      i,
+      S,
+      a,
       E,
-      l,
-      v,
-      J
+      y,
+      p,
+      f,
+      O
     ]
   );
-  return O(() => {
-    a && c && _(c, {
-      app_id: a,
-      user_id: c,
+  return b(() => {
+    l && i && P(i, {
+      app_id: l,
+      user_id: i,
       journey_status: "COMPLETED"
     });
-  }, [a, _, c]), O(() => {
-    if (w) {
-      const e = w.map((r) => r.journey_id);
-      p(e);
+  }, [l, P, i]), b(() => {
+    if (g) {
+      const e = g.map((r) => r.journey_id);
+      x(e);
     }
-  }, [w]), /* @__PURE__ */ R(K.Provider, { value: N, children: [
-    J && /* @__PURE__ */ j(
-      I,
+  }, [g]), /* @__PURE__ */ W(X.Provider, { value: V, children: [
+    f && /* @__PURE__ */ T(
+      Q,
       {
         about: "journey-overlay",
-        height: A.height,
-        width: A.width,
-        $isJourneyBlurred: q,
-        $isBlockingJourney: b,
+        height: $.height,
+        width: $.width,
+        $isJourneyBlurred: D,
+        $isBlockingJourney: q,
         "data-testid": t.current,
-        children: l.map((e, r) => /* @__PURE__ */ j(
-          V,
+        children: y.map((e, r) => /* @__PURE__ */ T(
+          F,
           {
             coachmark: e,
-            isInsideScrollView: D
+            isInsideScrollView: L
           },
           `coachmark-${r}`
         ))
       }
     ),
-    T
+    U
   ] });
 };
 export {
-  K as JourneyContext,
-  re as JourneyProvider
+  X as JourneyContext,
+  ne as JourneyProvider
 };
 //# sourceMappingURL=journey-context-provider.js.map

package/dist/features/journey/use-journey/journey-context-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"journey-context-provider.js","sources":["../../../../src/features/journey/use-journey/journey-context-provider.tsx"],"sourcesContent":["/* eslint-disable no-console */\nimport type { FC, RefObject } from 'react';\nimport { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Coachmark } from '../comps/coachmark/coachmark';\nimport type { TJourneyId } from '../journey-id/journey-id-types';\nimport { useGetUserJourney, usePostUserJourney } from '../user-journey-api/user-journey-api';\nimport type {\n  ICoachmarkProps,\n  IJourneyContext,\n  IJourneyProviderProps,\n  TCoachmarkJourneyProps,\n} from './journey-context-types';\nimport * as S from './journey-styled';\n\nexport const JourneyContext = createContext<IJourneyContext | null>(null);\n\nexport const JourneyProvider: FC<IJourneyProviderProps> = ({ children, appId, userId }) => {\n  const [isBlockingJourney, setIsBlockingJourney] = useState<boolean>(true);\n  const [isJourneyBlurred, setIsJourneyBlurred] = useState<boolean>(false);\n  const [userCompletedJourneyIds, setUserCompletedJourneyIds] = useState<TJourneyId[] | null>(null);\n  const [coachmarkList, setCoachmarkList] = useState<ICoachmarkProps[]>([]);\n  const [isJourneyActive, setIsJourneyActive] = useState(false);\n  const currentIndex = useRef(-1);\n  const currentJourneyId = useRef<TJourneyId | undefined>(undefined);\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const [isScrollableJourney, setIsScrollableJourney] = useState<boolean>(false);\n  const [overlaySize, setOverlaySize] = useState({\n    height: window.innerHeight,\n    width: window.innerWidth,\n  });\n\n  const { post: postJourneyCompletion } = usePostUserJourney();\n  const { data: userCompletedJourneys = null, get: getJourneyProgress } = useGetUserJourney();\n\n  const setJourney = useCallback(\n    (\n      id: TJourneyId,\n      coachmarks: TCoachmarkJourneyProps[],\n      scrollableContRef?: RefObject<HTMLDivElement | null>,\n      isBlocking: boolean = true,\n    ) => {\n      if (coachmarkList.length > 0) {\n        console.error(\n          `setJourney: Other Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n      setIsJourneyActive(true);\n      setIsBlockingJourney(isBlocking);\n      currentJourneyId.current = id;\n      currentIndex.current = -1;\n      setCoachmarkList(\n        coachmarks.map((item: TCoachmarkJourneyProps) => {\n          return {\n            ...item,\n            isActive: false, // New coachmarks are inactive by default\n          } as ICoachmarkProps;\n        }),\n      );\n      if (scrollableContRef) {\n        setOverlaySize({\n          height: scrollableContRef.current?.clientHeight || window.innerHeight,\n          width: scrollableContRef.current?.clientWidth || window.innerWidth,\n        });\n        setIsScrollableJourney(true);\n      }\n    },\n    [coachmarkList.length],\n  );\n\n  const clearJourney = useCallback(() => {\n    // Clear all timers\n    timerRefs.current.forEach(timer => {\n      clearTimeout(timer);\n    });\n    timerRefs.current = [];\n    currentJourneyId.current = undefined;\n    currentIndex.current = -1;\n    setCoachmarkList([]);\n    setIsJourneyActive(false);\n  }, []);\n\n  const endJourney = useCallback(\n    (journeyId: TJourneyId) => {\n      clearJourney();\n      setUserCompletedJourneyIds(prev => {\n        if (prev && !prev.includes(journeyId)) {\n          return [...prev, journeyId];\n        }\n\n        return prev;\n      });\n      // fire the API (doesn’t block the UI)\n      postJourneyCompletion({\n        app_id: appId,\n        user_id: userId,\n        journey_id: journeyId,\n        journey_status: 'COMPLETED',\n      });\n    },\n    [appId, clearJourney, postJourneyCompletion, userId],\n  );\n\n  const addCoachmark = useCallback((id: TJourneyId, coachmark: TCoachmarkJourneyProps) => {\n    if (!currentJourneyId.current || id !== currentJourneyId.current) {\n      console.error(\n        currentJourneyId.current\n          ? `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`\n          : `addCoachmark was called before setJourney and Journey ID is undefined`,\n      );\n\n      return;\n    }\n\n    setCoachmarkList(prev => [\n      ...prev,\n      {\n        ...coachmark,\n        isActive: false, // New coachmarks are inactive by default\n      } as ICoachmarkProps,\n    ]);\n  }, []);\n\n  const nextCoachmark = useCallback(\n    (\n      id: TJourneyId,\n      keepPrevActive: boolean = false,\n      delayInMs: number = 0,\n      shouldBlurNextJourney: boolean = false,\n    ) => {\n      if (!currentJourneyId.current || id !== currentJourneyId.current) {\n        console.error(\n          currentJourneyId.current\n            ? `nextCoachmark was called before setJourney`\n            : `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n\n      setIsJourneyBlurred(shouldBlurNextJourney);\n\n      if (delayInMs !== 0) {\n        // If delay is not 0, we will hide all them coachmarks and reveal only after the delay\n        setCoachmarkList(prevList => {\n          return prevList.map((item: TCoachmarkJourneyProps) => {\n            return { ...item, isActive: false };\n          });\n        });\n      }\n\n      const timer = setTimeout(() => {\n        clearTimeout(timer);\n        const currIndex = currentIndex.current + 1;\n\n        setCoachmarkList(prevList => {\n          // Finish onboarding\n          if (currIndex >= prevList.length || prevList.length === 0) {\n            clearJourney();\n\n            return [];\n          }\n\n          currentIndex.current = currIndex;\n          const updatedCoachmarkList = [...prevList];\n\n          (updatedCoachmarkList[currIndex] as ICoachmarkProps).isActive = true;\n\n          if (currIndex > 0) {\n            (updatedCoachmarkList[currIndex - 1] as ICoachmarkProps).isActive = keepPrevActive;\n          }\n\n          return updatedCoachmarkList;\n        });\n      }, delayInMs);\n\n      timerRefs.current.push(timer);\n    },\n    [clearJourney],\n  );\n\n  const memoizedContextValue: IJourneyContext = useMemo(\n    () => ({\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarks: coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n    }),\n    [\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n    ],\n  );\n\n  // Get the initial state of incompleteJourneys\n  useEffect(() => {\n    if (appId && userId) {\n      getJourneyProgress(userId, {\n        app_id: appId,\n        user_id: userId,\n        journey_status: 'COMPLETED',\n      });\n    }\n  }, [appId, getJourneyProgress, userId]);\n\n  // Set the data to context state initially\n  useEffect(() => {\n    if (userCompletedJourneys) {\n      const completedUserJourneysIds = userCompletedJourneys.map(journey => journey.journey_id);\n\n      setUserCompletedJourneyIds(completedUserJourneysIds);\n    }\n  }, [userCompletedJourneys]);\n\n  return (\n    <JourneyContext.Provider value={memoizedContextValue}>\n      {isJourneyActive && (\n        <S.Overlay\n          about=\"journey-overlay\"\n          height={overlaySize.height}\n          width={overlaySize.width}\n          $isJourneyBlurred={isJourneyBlurred}\n          $isBlockingJourney={isBlockingJourney}\n          data-testid={currentJourneyId.current}\n        >\n          {coachmarkList.map((coachmark, index) => (\n            <Coachmark\n              key={`coachmark-${index}`}\n              coachmark={coachmark}\n              isInsideScrollView={isScrollableJourney}\n            />\n          ))}\n        </S.Overlay>\n      )}\n      {children}\n    </JourneyContext.Provider>\n  );\n};\n"],"names":["JourneyContext","createContext","JourneyProvider","children","appId","userId","isBlockingJourney","setIsBlockingJourney","useState","isJourneyBlurred","setIsJourneyBlurred","userCompletedJourneyIds","setUserCompletedJourneyIds","coachmarkList","setCoachmarkList","isJourneyActive","setIsJourneyActive","currentIndex","useRef","currentJourneyId","timerRefs","isScrollableJourney","setIsScrollableJourney","overlaySize","setOverlaySize","postJourneyCompletion","usePostUserJourney","userCompletedJourneys","getJourneyProgress","useGetUserJourney","setJourney","useCallback","id","coachmarks","scrollableContRef","isBlocking","item","_a","_b","clearJourney","timer","endJourney","journeyId","prev","addCoachmark","coachmark","nextCoachmark","keepPrevActive","delayInMs","shouldBlurNextJourney","prevList","currIndex","updatedCoachmarkList","memoizedContextValue","useMemo","useEffect","completedUserJourneysIds","journey","jsxs","jsx","S.Overlay","index","Coachmark"],"mappings":"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"}
+{"version":3,"file":"journey-context-provider.js","sources":["../../../../src/features/journey/use-journey/journey-context-provider.tsx"],"sourcesContent":["/* eslint-disable no-console */\nimport type { FC, RefObject } from 'react';\nimport { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Coachmark } from '../comps/coachmark/coachmark';\nimport type { TJourneyId } from '../journey-id/journey-id-types';\nimport type { TTrackingId } from '../tracking-id/tracking-id-types';\nimport { useGetUserJourney, usePostUserJourney } from '../user-journey-api/user-journey-api';\nimport type {\n  ICoachmarkProps,\n  IJourneyContext,\n  IJourneyProviderProps,\n  TCoachmarkJourneyProps,\n} from './journey-context-types';\nimport * as S from './journey-styled';\n\nexport const JourneyContext = createContext<IJourneyContext | null>(null);\n\nexport const JourneyProvider: FC<IJourneyProviderProps> = ({ children, appId, userId }) => {\n  const [isBlockingJourney, setIsBlockingJourney] = useState<boolean>(true);\n  const [isJourneyBlurred, setIsJourneyBlurred] = useState<boolean>(false);\n  const [userCompletedJourneyIds, setUserCompletedJourneyIds] = useState<TJourneyId[] | null>(null);\n  const [coachmarkList, setCoachmarkList] = useState<ICoachmarkProps[]>([]);\n  const [isJourneyActive, setIsJourneyActive] = useState(false);\n  const currentIndex = useRef(-1);\n  const currentJourneyId = useRef<TJourneyId | undefined>(undefined);\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const [isScrollableJourney, setIsScrollableJourney] = useState<boolean>(false);\n  const [overlaySize, setOverlaySize] = useState({\n    height: window.innerHeight,\n    width: window.innerWidth,\n  });\n\n  const { post: postJourneyCompletion } = usePostUserJourney();\n  const { data: userCompletedJourneys = null, get: getJourneyProgress } = useGetUserJourney();\n\n  const saveProgress = useCallback(\n    (journeyId: TJourneyId | TTrackingId) => {\n      postJourneyCompletion({\n        app_id: appId,\n        user_id: userId,\n        journey_id: journeyId,\n        journey_status: 'COMPLETED',\n      });\n    },\n    [appId, postJourneyCompletion, userId],\n  );\n\n  const setJourney = useCallback(\n    (\n      id: TJourneyId,\n      coachmarks: TCoachmarkJourneyProps[],\n      scrollableContRef?: RefObject<HTMLDivElement | null>,\n      isBlocking: boolean = true,\n    ) => {\n      if (coachmarkList.length > 0) {\n        console.error(\n          `setJourney: Other Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n      setIsJourneyActive(true);\n      setIsBlockingJourney(isBlocking);\n      currentJourneyId.current = id;\n      currentIndex.current = -1;\n      setCoachmarkList(\n        coachmarks.map((item: TCoachmarkJourneyProps) => {\n          return {\n            ...item,\n            isActive: false, // New coachmarks are inactive by default\n          } as ICoachmarkProps;\n        }),\n      );\n      if (scrollableContRef) {\n        setOverlaySize({\n          height: scrollableContRef.current?.clientHeight || window.innerHeight,\n          width: scrollableContRef.current?.clientWidth || window.innerWidth,\n        });\n        setIsScrollableJourney(true);\n      }\n    },\n    [coachmarkList.length],\n  );\n\n  const clearJourney = useCallback(() => {\n    // Clear all timers\n    timerRefs.current.forEach(timer => {\n      clearTimeout(timer);\n    });\n    timerRefs.current = [];\n    currentJourneyId.current = undefined;\n    currentIndex.current = -1;\n    setCoachmarkList([]);\n    setIsJourneyActive(false);\n  }, []);\n\n  const endJourney = useCallback(\n    (journeyId: TJourneyId) => {\n      clearJourney();\n      setUserCompletedJourneyIds(prev => {\n        if (prev && !prev.includes(journeyId)) {\n          return [...prev, journeyId];\n        }\n\n        return prev;\n      });\n      saveProgress(journeyId);\n    },\n    [clearJourney, saveProgress],\n  );\n\n  const addCoachmark = useCallback((id: TJourneyId, coachmark: TCoachmarkJourneyProps) => {\n    if (!currentJourneyId.current || id !== currentJourneyId.current) {\n      console.error(\n        currentJourneyId.current\n          ? `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`\n          : `addCoachmark was called before setJourney and Journey ID is undefined`,\n      );\n\n      return;\n    }\n\n    setCoachmarkList(prev => [\n      ...prev,\n      {\n        ...coachmark,\n        isActive: false, // New coachmarks are inactive by default\n      } as ICoachmarkProps,\n    ]);\n  }, []);\n\n  const nextCoachmark = useCallback(\n    (\n      id: TJourneyId,\n      keepPrevActive: boolean = false,\n      delayInMs: number = 0,\n      shouldBlurNextJourney: boolean = false,\n    ) => {\n      if (!currentJourneyId.current || id !== currentJourneyId.current) {\n        console.error(\n          currentJourneyId.current\n            ? `nextCoachmark was called before setJourney`\n            : `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n\n      setIsJourneyBlurred(shouldBlurNextJourney);\n\n      if (delayInMs !== 0) {\n        // If delay is not 0, we will hide all them coachmarks and reveal only after the delay\n        setCoachmarkList(prevList => {\n          return prevList.map((item: TCoachmarkJourneyProps) => {\n            return { ...item, isActive: false };\n          });\n        });\n      }\n\n      const timer = setTimeout(() => {\n        clearTimeout(timer);\n        const currIndex = currentIndex.current + 1;\n\n        setCoachmarkList(prevList => {\n          // Finish onboarding\n          if (currIndex >= prevList.length || prevList.length === 0) {\n            clearJourney();\n\n            return [];\n          }\n\n          currentIndex.current = currIndex;\n          const updatedCoachmarkList = [...prevList];\n\n          (updatedCoachmarkList[currIndex] as ICoachmarkProps).isActive = true;\n\n          if (currIndex > 0) {\n            (updatedCoachmarkList[currIndex - 1] as ICoachmarkProps).isActive = keepPrevActive;\n          }\n\n          return updatedCoachmarkList;\n        });\n      }, delayInMs);\n\n      timerRefs.current.push(timer);\n    },\n    [clearJourney],\n  );\n\n  const trackView = useCallback(\n    (viewId: TTrackingId) => {\n      saveProgress(viewId);\n    },\n    [saveProgress],\n  );\n\n  const memoizedContextValue: IJourneyContext = useMemo(\n    () => ({\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarks: coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n      trackView,\n    }),\n    [\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n      trackView,\n    ],\n  );\n\n  // Get the initial state of incompleteJourneys\n  useEffect(() => {\n    if (appId && userId) {\n      getJourneyProgress(userId, {\n        app_id: appId,\n        user_id: userId,\n        journey_status: 'COMPLETED',\n      });\n    }\n  }, [appId, getJourneyProgress, userId]);\n\n  // Set the data to context state initially\n  useEffect(() => {\n    if (userCompletedJourneys) {\n      const completedUserJourneysIds = userCompletedJourneys.map(journey => journey.journey_id);\n\n      setUserCompletedJourneyIds(completedUserJourneysIds);\n    }\n  }, [userCompletedJourneys]);\n\n  return (\n    <JourneyContext.Provider value={memoizedContextValue}>\n      {isJourneyActive && (\n        <S.Overlay\n          about=\"journey-overlay\"\n          height={overlaySize.height}\n          width={overlaySize.width}\n          $isJourneyBlurred={isJourneyBlurred}\n          $isBlockingJourney={isBlockingJourney}\n          data-testid={currentJourneyId.current}\n        >\n          {coachmarkList.map((coachmark, index) => (\n            <Coachmark\n              key={`coachmark-${index}`}\n              coachmark={coachmark}\n              isInsideScrollView={isScrollableJourney}\n            />\n          ))}\n        </S.Overlay>\n      )}\n      {children}\n    </JourneyContext.Provider>\n  );\n};\n"],"names":["JourneyContext","createContext","JourneyProvider","children","appId","userId","isBlockingJourney","setIsBlockingJourney","useState","isJourneyBlurred","setIsJourneyBlurred","userCompletedJourneyIds","setUserCompletedJourneyIds","coachmarkList","setCoachmarkList","isJourneyActive","setIsJourneyActive","currentIndex","useRef","currentJourneyId","timerRefs","isScrollableJourney","setIsScrollableJourney","overlaySize","setOverlaySize","postJourneyCompletion","usePostUserJourney","userCompletedJourneys","getJourneyProgress","useGetUserJourney","saveProgress","useCallback","journeyId","setJourney","id","coachmarks","scrollableContRef","isBlocking","item","_a","_b","clearJourney","timer","endJourney","prev","addCoachmark","coachmark","nextCoachmark","keepPrevActive","delayInMs","shouldBlurNextJourney","prevList","currIndex","updatedCoachmarkList","trackView","viewId","memoizedContextValue","useMemo","useEffect","completedUserJourneysIds","journey","jsxs","jsx","S.Overlay","index","Coachmark"],"mappings":"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"}

package/dist/features/post-game-stats/accuracy/accuracy-styled.js

@@ -1,6 +1,6 @@
 import o, { keyframes as r, css as s } from "styled-components";
-import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
-import { GAME_LAUNCHER_ASSET_PADDING as a } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
+import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher-v2/comps/card-container/constants.js";
+import { GAME_LAUNCHER_ASSET_PADDING as a } from "../../circle-games/game-launcher-v2/comps/circular-game-card/constants.js";
 const p = 50 * 84 / 100, c = r`
   0%{
     opacity: 0;

package/dist/features/post-game-stats/accuracy/accuracy-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"accuracy-styled.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n  0%{\n    opacity: 0;\n  }\n  100%{\n    opacity: 1;\n  }\n`;\n\nconst fadeOut = keyframes`\n  0%{\n    opacity: 1;\n  }\n  100%{\n    opacity: 0;\n  }\n`;\n\nexport const Accuracy = styled.div`\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nexport const AccuracyMeterLottie = styled.div`\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  position: absolute;\n  flex: 1;\n  z-index: 1;\n`;\n\nexport const AnimatedAccuracyNeedleContainer = styled.div<{\n  $translateX?: number;\n  $translateY?: number;\n  $rotate?: number;\n}>`\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  position: absolute;\n  z-index: 2;\n  transform: ${({ $translateX = 0, $translateY = 0, $rotate = 0 }) =>\n    `translateX(${$translateX}px) translateY(${$translateY}px) rotate(${$rotate}deg)`};\n`;\n\nexport const AccuracyNeedleLottie = styled.div`\n  height: 100%;\n  width: 100%;\n`;\n\nexport const TextWrapper = styled.div<{\n  $duration: number;\n  $delay: number;\n  $animationType: 'fadein' | 'fadeout';\n}>`\n  z-index: 2;\n  opacity: 0;\n  position: absolute;\n  animation: ${({ $animationType, $duration, $delay }) => css`\n    ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n  `};\n  transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n\nexport const PercentTextWrapper = styled.div<{\n  $animationType?: 'fadein' | 'fadeout';\n  $duration?: number;\n}>`\n  position: absolute;\n  z-index: 20;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n\n  ${({ $animationType, $duration }) =>\n    $animationType &&\n    $duration &&\n    css`\n      animation: ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards;\n    `}\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Accuracy","styled","GAME_LAUNCHER_SIZE","AccuracyMeterLottie","GAME_LAUNCHER_ASSET_PADDING","AnimatedAccuracyNeedleContainer","$translateX","$translateY","$rotate","AccuracyNeedleLottie","TextWrapper","$animationType","$duration","$delay","css","PercentTextWrapper"],"mappings":";;;AAKA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAAWC,EAAO;AAAA,YACnBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAsBF,EAAO;AAAA,YAC9BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA;AAAA,GAM9CC,IAAkCJ,EAAO;AAAA,YAK1CC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,eAG5C,CAAC,EAAE,aAAAE,IAAc,GAAG,aAAAC,IAAc,GAAG,SAAAC,IAAU,EAAE,MAC5D,cAAcF,CAAW,kBAAkBC,CAAW,cAAcC,CAAO,MAAM;AAAA,GAGxEC,IAAuBR,EAAO;AAAA;AAAA;AAAA,GAK9BS,IAAcT,EAAO;AAAA;AAAA;AAAA;AAAA,eAQnB,CAAC,EAAE,gBAAAU,GAAgB,WAAAC,GAAW,QAAAC,QAAaC;AAAA,MACpDH,MAAmB,WAAWd,IAASE,CAAO,IAAIa,CAAS,MAAMC,CAAM;AAAA,GAC1E;AAAA,2BACyBX,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA,GAGlEmB,IAAqBd,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUrC,CAAC,EAAE,gBAAAU,GAAgB,WAAAC,EAAU,MAC7BD,KACAC,KACAE;AAAA,mBACeH,MAAmB,WAAWd,IAASE,CAAO,IAAIa,CAAS;AAAA,KACzE;AAAA;"}
+{"version":3,"file":"accuracy-styled.js","sources":["../../../../src/features/post-game-stats/accuracy/accuracy-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher-v2/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher-v2/comps/circular-game-card/constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n  0%{\n    opacity: 0;\n  }\n  100%{\n    opacity: 1;\n  }\n`;\n\nconst fadeOut = keyframes`\n  0%{\n    opacity: 1;\n  }\n  100%{\n    opacity: 0;\n  }\n`;\n\nexport const Accuracy = styled.div`\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nexport const AccuracyMeterLottie = styled.div`\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  position: absolute;\n  flex: 1;\n  z-index: 1;\n`;\n\nexport const AnimatedAccuracyNeedleContainer = styled.div<{\n  $translateX?: number;\n  $translateY?: number;\n  $rotate?: number;\n}>`\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  position: absolute;\n  z-index: 2;\n  transform: ${({ $translateX = 0, $translateY = 0, $rotate = 0 }) =>\n    `translateX(${$translateX}px) translateY(${$translateY}px) rotate(${$rotate}deg)`};\n`;\n\nexport const AccuracyNeedleLottie = styled.div`\n  height: 100%;\n  width: 100%;\n`;\n\nexport const TextWrapper = styled.div<{\n  $duration: number;\n  $delay: number;\n  $animationType: 'fadein' | 'fadeout';\n}>`\n  z-index: 2;\n  opacity: 0;\n  position: absolute;\n  animation: ${({ $animationType, $duration, $delay }) => css`\n    ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n  `};\n  transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n\nexport const PercentTextWrapper = styled.div<{\n  $animationType?: 'fadein' | 'fadeout';\n  $duration?: number;\n}>`\n  position: absolute;\n  z-index: 20;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n\n  ${({ $animationType, $duration }) =>\n    $animationType &&\n    $duration &&\n    css`\n      animation: ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards;\n    `}\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Accuracy","styled","GAME_LAUNCHER_SIZE","AccuracyMeterLottie","GAME_LAUNCHER_ASSET_PADDING","AnimatedAccuracyNeedleContainer","$translateX","$translateY","$rotate","AccuracyNeedleLottie","TextWrapper","$animationType","$duration","$delay","css","PercentTextWrapper"],"mappings":";;;AAKA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAAWC,EAAO;AAAA,YACnBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAsBF,EAAO;AAAA,YAC9BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA;AAAA,GAM9CC,IAAkCJ,EAAO;AAAA,YAK1CC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,eAG5C,CAAC,EAAE,aAAAE,IAAc,GAAG,aAAAC,IAAc,GAAG,SAAAC,IAAU,EAAE,MAC5D,cAAcF,CAAW,kBAAkBC,CAAW,cAAcC,CAAO,MAAM;AAAA,GAGxEC,IAAuBR,EAAO;AAAA;AAAA;AAAA,GAK9BS,IAAcT,EAAO;AAAA;AAAA;AAAA;AAAA,eAQnB,CAAC,EAAE,gBAAAU,GAAgB,WAAAC,GAAW,QAAAC,QAAaC;AAAA,MACpDH,MAAmB,WAAWd,IAASE,CAAO,IAAIa,CAAS,MAAMC,CAAM;AAAA,GAC1E;AAAA,2BACyBX,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA,GAGlEmB,IAAqBd,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUrC,CAAC,EAAE,gBAAAU,GAAgB,WAAAC,EAAU,MAC7BD,KACAC,KACAE;AAAA,mBACeH,MAAmB,WAAWd,IAASE,CAAO,IAAIa,CAAS;AAAA,KACzE;AAAA;"}