@cuemath/leap 3.3.24 → 3.3.25-af

package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js

@@ -1,10 +1,9 @@
-import { useCallback as s, useRef as R, useEffect as m } from "react";
-import { useAutoPlayPermission as P } from "../../../hooks/use-auto-play-permission/use-auto-play-permission.js";
-import { CircleSoundKeyMapper as U, SWIPE_SOUND_ORDER as O } from "./constants.js";
-import { fadeInSound as p, fadeOutSound as D } from "./helper.js";
+import { useRef as p, useCallback as c, useEffect as D } from "react";
+import { useAutoPlayPermission as L } from "../../../hooks/use-auto-play-permission/use-auto-play-permission.js";
+import { CircleSoundKeyMapper as h, SWIPE_SOUND_ORDER as I } from "./constants.js";
 import { CircleSoundKey as n } from "./use-circle-sounds-enums.js";
-let S = 0;
-const c = {
+let A = 0;
+const l = new (window.AudioContext || window.webkitAudioContext)(), T = {
   [n.BACKGROUND]: null,
   [n.BACKGROUND_RUSHHOUR]: null,
   [n.TUTORIAL]: null,
@@ -33,81 +32,78 @@ const c = {
   [n.KEEP_IT_UP]: null,
   [n.DOING_GREAT]: null,
   [n.ALL_DONE]: null
-}, f = {}, b = () => {
-  const { canAutoPlayAudio: _ } = P(), C = s((t) => {
-    if (!c[t]) {
-      const l = new Audio(U[t]);
-      c[t] = l;
+}, i = {}, y = () => {
+  const { canAutoPlayAudio: m } = L(), d = p(/* @__PURE__ */ new Set()), C = p({}), R = c(async (e) => {
+    if (!T[e]) {
+      const o = await (await fetch(h[e])).arrayBuffer(), t = await l.decodeAudioData(o);
+      T[e] = t;
     }
-  }, []), i = R(/* @__PURE__ */ new Set()), o = R({}), r = s(
-    (t, l = !0, e = !1) => {
-      C(t);
-      const u = c[t];
-      if (!u || !_) return;
-      if (e && (u.loop = e), o.current[t] && clearInterval(o.current[t]), !u.paused && u.currentTime > 0 && !u.ended) {
-        if (l)
-          u.volume = 1;
-        else {
-          const I = p(u);
-          o.current[t] = I;
-        }
-        return u;
+  }, []), _ = async () => {
+    if (l.state === "suspended")
+      try {
+        await l.resume();
+      } catch (e) {
+        console.warn("Failed to resume AudioContext:", e);
       }
-      u.volume = l ? 1 : 0;
-      const A = u.play();
-      if (A && (f[t] = A), !l) {
-        const I = p(u);
-        o.current[t] = I;
-      }
-      return u;
-    },
-    [C, _]
-  ), a = s((t, l) => {
-    const e = c[t];
-    if (!e) return;
-    if (o.current[t] && clearInterval(o.current[t]), l) {
-      e.pause();
-      return;
-    }
-    const u = D(e);
-    o.current[t] = u;
-  }, []), d = s(
-    (t, l = !0) => {
-      var e;
-      if (f[t] !== void 0) {
-        (e = f[t]) == null || e.then(() => {
-          a(t, l);
-        }).catch((u) => {
-          console.log("sound not playing", u);
-        });
-        return;
-      }
-      a(t, l);
+  }, w = (e) => {
+    e.gain.setValueAtTime(0, l.currentTime), e.gain.linearRampToValueAtTime(1, l.currentTime + 0.5);
+  }, P = (e, u) => {
+    e.gain.setValueAtTime(e.gain.value, l.currentTime), e.gain.linearRampToValueAtTime(0, l.currentTime + 0.5);
+    const o = setTimeout(() => {
+      var t;
+      (t = i[u]) == null || t.source.stop(), delete i[u];
+    }, 500);
+    C.current[u] = o;
+  }, r = c(
+    async (e, u = !0, o = !1) => {
+      await R(e);
+      const t = T[e];
+      if (!t || !m) return;
+      const S = i[e];
+      S && (S.source.stop(), delete i[e]);
+      const s = l.createBufferSource(), a = l.createGain();
+      s.buffer = t, s.loop = o, s.connect(a).connect(l.destination), u ? a.gain.setValueAtTime(1, l.currentTime) : w(a), s.start(), i[e] = { source: s, gainNode: a }, o || (s.onended = () => {
+        var O;
+        ((O = i[e]) == null ? void 0 : O.source) === s && delete i[e];
+      });
     },
-    [a]
-  ), T = s(() => {
-    const t = O[S] || n.SWIPE_01;
-    S = (S + 1) % O.length, r(t);
-  }, [r]), v = s(() => r(n.TOGGLE), [r]), E = s(() => {
-    const t = document.visibilityState;
-    t === "hidden" && Object.entries(c).forEach(([l, e]) => {
-      e && !e.paused && (d(l, !0), i.current.add(l));
-    }), t === "visible" && (i.current.forEach((l) => {
-      r(l);
-    }), i.current.clear());
-  }, [r, d]);
-  return m(() => {
-    document.addEventListener("visibilitychange", E);
-    const t = o.current;
+    [m, R]
+  ), f = c(async (e, u = !0) => {
+    const o = i[e];
+    o && (u ? (o.source.stop(), delete i[e]) : P(o.gainNode, e));
+  }, []), U = c(() => {
+    const e = I[A] || n.SWIPE_01;
+    A = (A + 1) % I.length, r(e);
+  }, [r]), v = c(() => {
+    r(n.TOGGLE);
+  }, [r]), E = c(async () => {
+    document.visibilityState === "visible" ? (await _(), d.current.forEach((e) => {
+      r(e);
+    }), d.current.clear()) : Object.keys(i).forEach((e) => {
+      f(e, !0), d.current.add(e);
+    });
+  }, [r, f]);
+  return D(() => {
+    const e = ["pointerdown", "touchstart"], u = () => {
+      _();
+    };
+    document.addEventListener("visibilitychange", E), e.forEach((t) => {
+      window.addEventListener(t, u, { once: !0 });
+    });
+    const o = C.current;
     return () => {
-      document.removeEventListener("visibilitychange", E), Object.values(t).forEach((l) => {
-        l && clearInterval(l);
-      });
+      document.removeEventListener("visibilitychange", E), e.forEach((t) => {
+        window.removeEventListener(t, u);
+      }), Object.values(o).forEach((t) => clearTimeout(t));
     };
-  }, [E]), { playSwipeSound: T, play: r, stop: d, playButtonSound: v };
+  }, [E]), {
+    playSwipeSound: U,
+    play: r,
+    stop: f,
+    playButtonSound: v
+  };
 };
 export {
-  c as soundMapper,
-  b as useCircleSounds
+  y as useCircleSounds
 };
 //# sourceMappingURL=use-circle-sounds.js.map

package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-circle-sounds.js","sources":["../../../../../src/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.ts"],"sourcesContent":["import type { TimeoutMap } from './use-circle-sound-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { useAutoPlayPermission } from '../../../hooks/use-auto-play-permission/use-auto-play-permission';\nimport { CircleSoundKeyMapper, SWIPE_SOUND_ORDER } from './constants';\nimport { fadeInSound, fadeOutSound } from './helper';\nimport { CircleSoundKey } from './use-circle-sounds-enums';\n\nlet swipeSoundIndex = 0;\n\nexport const soundMapper: Record<keyof typeof CircleSoundKeyMapper, null | HTMLAudioElement> = {\n  [CircleSoundKey.BACKGROUND]: null,\n  [CircleSoundKey.BACKGROUND_RUSHHOUR]: null,\n  [CircleSoundKey.TUTORIAL]: null,\n  [CircleSoundKey.SWIPE_01]: null,\n  [CircleSoundKey.SWIPE_02]: null,\n  [CircleSoundKey.SWIPE_03]: null,\n  [CircleSoundKey.SWIPE_04]: null,\n  [CircleSoundKey.SWIPE_DOWN]: null,\n  [CircleSoundKey.TOGGLE]: null,\n  [CircleSoundKey.POINTS_AWARDED]: null,\n  [CircleSoundKey.POINTS_ADDED]: null,\n  [CircleSoundKey.GAME_CARD_CLICK]: null,\n  [CircleSoundKey.CLOCK_IN]: null,\n  [CircleSoundKey.CLOCK_OUT]: null,\n  [CircleSoundKey.ACCURACY_IN]: null,\n  [CircleSoundKey.ACCURACY_OUT]: null,\n  [CircleSoundKey.STREAK_IN]: null,\n  [CircleSoundKey.STREAK_OUT]: null,\n  [CircleSoundKey.ACCURACY_INTRO]: null,\n  [CircleSoundKey.ACCURACY_TARGET]: null,\n  [CircleSoundKey.TIME_INTRO]: null,\n  [CircleSoundKey.TIME_TARGET]: null,\n  [CircleSoundKey.METER_FILL]: null,\n  [CircleSoundKey.YOUR_SCORE]: null,\n  [CircleSoundKey.HIGH_SCORE]: null,\n  [CircleSoundKey.KEEP_IT_UP]: null,\n  [CircleSoundKey.DOING_GREAT]: null,\n  [CircleSoundKey.ALL_DONE]: null,\n};\n\nconst soundInstancePromise: Partial<Record<keyof typeof CircleSoundKeyMapper, Promise<void>>> = {};\n\nexport const useCircleSounds = () => {\n  const { canAutoPlayAudio: canPlayAudio } = useAutoPlayPermission();\n\n  const loadSound = useCallback((key: CircleSoundKey) => {\n    if (!soundMapper[key]) {\n      const loadedSound = new Audio(CircleSoundKeyMapper[key]);\n\n      soundMapper[key] = loadedSound;\n    }\n  }, []);\n\n  const pausedSoundsRef = useRef<Set<CircleSoundKey>>(new Set());\n  const timeoutRefs = useRef<TimeoutMap>({});\n\n  const play = useCallback(\n    (key: CircleSoundKey, immediately: boolean = true, loop = false) => {\n      loadSound(key);\n      const soundInstance = soundMapper[key];\n\n      if (!soundInstance || !canPlayAudio) return;\n\n      // this makes sure that it keeps the default loop value at the time it was requested to be loaded\n      // helps in visibility change where we only want to resume\n      if (loop) {\n        soundInstance.loop = loop;\n      }\n\n      if (timeoutRefs.current[key]) {\n        clearInterval(timeoutRefs.current[key]);\n      }\n\n      // resume sound\n      if (!soundInstance.paused && soundInstance.currentTime > 0 && !soundInstance.ended) {\n        if (!immediately) {\n          const intervalId = fadeInSound(soundInstance);\n\n          timeoutRefs.current[key] = intervalId;\n        } else {\n          soundInstance.volume = 1;\n        }\n\n        return soundInstance;\n      }\n\n      // play sound\n      soundInstance.volume = immediately ? 1 : 0;\n      const promise = soundInstance.play();\n\n      if (promise) {\n        soundInstancePromise[key] = promise;\n      }\n\n      if (!immediately) {\n        const intervalId = fadeInSound(soundInstance);\n\n        timeoutRefs.current[key] = intervalId;\n      }\n\n      return soundInstance;\n    },\n    [loadSound, canPlayAudio],\n  );\n\n  const handleSoundStop = useCallback((key: CircleSoundKey, immediately: boolean) => {\n    const soundInstance = soundMapper[key];\n\n    if (!soundInstance) return;\n\n    if (timeoutRefs.current[key]) {\n      clearInterval(timeoutRefs.current[key]);\n    }\n\n    if (immediately) {\n      soundInstance.pause();\n\n      return;\n    }\n\n    const intervalId = fadeOutSound(soundInstance);\n\n    timeoutRefs.current[key] = intervalId;\n  }, []);\n\n  const stop = useCallback(\n    (key: CircleSoundKey, immediately: boolean = true) => {\n      // if play returned a promise\n      if (soundInstancePromise[key] !== undefined) {\n        soundInstancePromise[key]\n          ?.then(() => {\n            handleSoundStop(key, immediately);\n          })\n          .catch(err => {\n            // eslint-disable-next-line no-console\n            console.log('sound not playing', err);\n          });\n\n        return;\n      }\n\n      handleSoundStop(key, immediately);\n    },\n    [handleSoundStop],\n  );\n\n  const playSwipeSound = useCallback(() => {\n    const key = SWIPE_SOUND_ORDER[swipeSoundIndex] || CircleSoundKey.SWIPE_01;\n\n    swipeSoundIndex = (swipeSoundIndex + 1) % SWIPE_SOUND_ORDER.length;\n\n    play(key);\n  }, [play]);\n\n  const playButtonSound = useCallback(() => {\n    const sound = play(CircleSoundKey.TOGGLE);\n\n    return sound;\n  }, [play]);\n\n  const handleVisibilityChange = useCallback(() => {\n    const visibilityState = document.visibilityState;\n\n    if (visibilityState === 'hidden') {\n      Object.entries(soundMapper).forEach(([key, sound]) => {\n        if (sound && !sound.paused) {\n          stop(key as CircleSoundKey, true);\n          pausedSoundsRef.current.add(key as CircleSoundKey);\n        }\n      });\n    }\n\n    if (visibilityState === 'visible') {\n      pausedSoundsRef.current.forEach(key => {\n        play(key);\n      });\n      pausedSoundsRef.current.clear();\n    }\n  }, [play, stop]);\n\n  useEffect(() => {\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    const timeouts = timeoutRefs.current;\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      Object.values(timeouts).forEach(id => {\n        id && clearInterval(id);\n      });\n    };\n  }, [handleVisibilityChange]);\n\n  return { playSwipeSound, play, stop, playButtonSound };\n};\n"],"names":["swipeSoundIndex","soundMapper","CircleSoundKey","soundInstancePromise","useCircleSounds","canPlayAudio","useAutoPlayPermission","loadSound","useCallback","key","loadedSound","CircleSoundKeyMapper","pausedSoundsRef","useRef","timeoutRefs","play","immediately","loop","soundInstance","intervalId","fadeInSound","promise","handleSoundStop","fadeOutSound","stop","_a","err","playSwipeSound","SWIPE_SOUND_ORDER","playButtonSound","handleVisibilityChange","visibilityState","sound","useEffect","timeouts","id"],"mappings":"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"}
+{"version":3,"file":"use-circle-sounds.js","sources":["../../../../../src/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.ts"],"sourcesContent":["import type { TimeoutMap } from './use-circle-sound-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { useAutoPlayPermission } from '../../../hooks/use-auto-play-permission/use-auto-play-permission';\nimport { CircleSoundKeyMapper, SWIPE_SOUND_ORDER } from './constants';\nimport { CircleSoundKey } from './use-circle-sounds-enums';\n\nlet swipeSoundIndex = 0;\nconst audioContext = new (window.AudioContext || window.webkitAudioContext)();\n\nconst bufferMapper: Record<CircleSoundKey, AudioBuffer | null> = {\n  [CircleSoundKey.BACKGROUND]: null,\n  [CircleSoundKey.BACKGROUND_RUSHHOUR]: null,\n  [CircleSoundKey.TUTORIAL]: null,\n  [CircleSoundKey.SWIPE_01]: null,\n  [CircleSoundKey.SWIPE_02]: null,\n  [CircleSoundKey.SWIPE_03]: null,\n  [CircleSoundKey.SWIPE_04]: null,\n  [CircleSoundKey.SWIPE_DOWN]: null,\n  [CircleSoundKey.TOGGLE]: null,\n  [CircleSoundKey.POINTS_AWARDED]: null,\n  [CircleSoundKey.POINTS_ADDED]: null,\n  [CircleSoundKey.GAME_CARD_CLICK]: null,\n  [CircleSoundKey.CLOCK_IN]: null,\n  [CircleSoundKey.CLOCK_OUT]: null,\n  [CircleSoundKey.ACCURACY_IN]: null,\n  [CircleSoundKey.ACCURACY_OUT]: null,\n  [CircleSoundKey.STREAK_IN]: null,\n  [CircleSoundKey.STREAK_OUT]: null,\n  [CircleSoundKey.ACCURACY_INTRO]: null,\n  [CircleSoundKey.ACCURACY_TARGET]: null,\n  [CircleSoundKey.TIME_INTRO]: null,\n  [CircleSoundKey.TIME_TARGET]: null,\n  [CircleSoundKey.METER_FILL]: null,\n  [CircleSoundKey.YOUR_SCORE]: null,\n  [CircleSoundKey.HIGH_SCORE]: null,\n  [CircleSoundKey.KEEP_IT_UP]: null,\n  [CircleSoundKey.DOING_GREAT]: null,\n  [CircleSoundKey.ALL_DONE]: null,\n};\n\ntype ActiveSound = {\n  source: AudioBufferSourceNode;\n  gainNode: GainNode;\n};\n\nconst activeSounds: Partial<Record<CircleSoundKey, ActiveSound>> = {};\n\nexport const useCircleSounds = () => {\n  const { canAutoPlayAudio: canPlayAudio } = useAutoPlayPermission();\n\n  const pausedSoundsRef = useRef<Set<CircleSoundKey>>(new Set());\n  const timeoutRefs = useRef<TimeoutMap>({});\n\n  const loadSound = useCallback(async (key: CircleSoundKey) => {\n    if (!bufferMapper[key]) {\n      const response = await fetch(CircleSoundKeyMapper[key]);\n      const arrayBuffer = await response.arrayBuffer();\n      const decoded = await audioContext.decodeAudioData(arrayBuffer);\n\n      bufferMapper[key] = decoded;\n    }\n  }, []);\n\n  const resumeAudioContext = async () => {\n    if (audioContext.state === 'suspended') {\n      try {\n        await audioContext.resume();\n      } catch (err) {\n        // eslint-disable-next-line no-console\n        console.warn('Failed to resume AudioContext:', err);\n      }\n    }\n  };\n\n  const fadeIn = (gainNode: GainNode) => {\n    gainNode.gain.setValueAtTime(0, audioContext.currentTime);\n    gainNode.gain.linearRampToValueAtTime(1, audioContext.currentTime + 0.5);\n  };\n\n  const fadeOut = (gainNode: GainNode, key: CircleSoundKey) => {\n    gainNode.gain.setValueAtTime(gainNode.gain.value, audioContext.currentTime);\n    gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.5);\n    const timeout = setTimeout(() => {\n      activeSounds[key]?.source.stop();\n      delete activeSounds[key];\n    }, 500);\n\n    timeoutRefs.current[key] = timeout as unknown as number;\n  };\n\n  const play = useCallback(\n    async (key: CircleSoundKey, immediately = true, loop = false) => {\n      await loadSound(key);\n      const buffer = bufferMapper[key];\n\n      if (!buffer || !canPlayAudio) return;\n\n      const existing = activeSounds[key];\n\n      if (existing) {\n        existing.source.stop();\n        delete activeSounds[key];\n      }\n\n      const source = audioContext.createBufferSource();\n      const gainNode = audioContext.createGain();\n\n      source.buffer = buffer;\n      source.loop = loop;\n      source.connect(gainNode).connect(audioContext.destination);\n\n      if (immediately) {\n        gainNode.gain.setValueAtTime(1, audioContext.currentTime);\n      } else {\n        fadeIn(gainNode);\n      }\n\n      source.start();\n      activeSounds[key] = { source, gainNode };\n\n      // Clean up when finished if not looping\n      if (!loop) {\n        source.onended = () => {\n          if (activeSounds[key]?.source === source) {\n            delete activeSounds[key];\n          }\n        };\n      }\n    },\n    [canPlayAudio, loadSound],\n  );\n\n  const stop = useCallback(async (key: CircleSoundKey, immediately = true) => {\n    const sound = activeSounds[key];\n\n    if (!sound) return;\n\n    if (immediately) {\n      sound.source.stop();\n      delete activeSounds[key];\n    } else {\n      fadeOut(sound.gainNode, key);\n    }\n  }, []);\n\n  const playSwipeSound = useCallback(() => {\n    const key = SWIPE_SOUND_ORDER[swipeSoundIndex] || CircleSoundKey.SWIPE_01;\n\n    swipeSoundIndex = (swipeSoundIndex + 1) % SWIPE_SOUND_ORDER.length;\n    play(key);\n  }, [play]);\n\n  const playButtonSound = useCallback(() => {\n    play(CircleSoundKey.TOGGLE);\n  }, [play]);\n\n  const handleVisibilityChange = useCallback(async () => {\n    if (document.visibilityState === 'visible') {\n      await resumeAudioContext();\n      pausedSoundsRef.current.forEach(key => {\n        play(key);\n      });\n      pausedSoundsRef.current.clear();\n    } else {\n      Object.keys(activeSounds).forEach(key => {\n        stop(key as CircleSoundKey, true);\n        pausedSoundsRef.current.add(key as CircleSoundKey);\n      });\n    }\n  }, [play, stop]);\n\n  useEffect(() => {\n    const interactionEvents = ['pointerdown', 'touchstart'];\n    const tryResume = () => {\n      resumeAudioContext();\n    };\n\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    interactionEvents.forEach(event => {\n      window.addEventListener(event, tryResume, { once: true });\n    });\n\n    const timeouts = timeoutRefs.current;\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      interactionEvents.forEach(event => {\n        window.removeEventListener(event, tryResume);\n      });\n      Object.values(timeouts).forEach(id => clearTimeout(id));\n    };\n  }, [handleVisibilityChange]);\n\n  return {\n    playSwipeSound,\n    play,\n    stop,\n    playButtonSound,\n  };\n};\n"],"names":["swipeSoundIndex","audioContext","bufferMapper","CircleSoundKey","activeSounds","useCircleSounds","canPlayAudio","useAutoPlayPermission","pausedSoundsRef","useRef","timeoutRefs","loadSound","useCallback","key","arrayBuffer","CircleSoundKeyMapper","decoded","resumeAudioContext","err","fadeIn","gainNode","fadeOut","timeout","_a","play","immediately","loop","buffer","existing","source","stop","sound","playSwipeSound","SWIPE_SOUND_ORDER","playButtonSound","handleVisibilityChange","useEffect","interactionEvents","tryResume","event","timeouts","id"],"mappings":"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"}

package/dist/features/circle-games/sign-up/comp/circular-steps/circular-steps.js

@@ -1,11 +1,11 @@
-import { jsx as e, Fragment as S, jsxs as c } from "react/jsx-runtime";
-import { useRef as m, useCallback as k } from "react";
+import { jsx as e, Fragment as k, jsxs as c } from "react/jsx-runtime";
+import { useRef as m, useCallback as S } from "react";
 import B from "../../../../../assets/line-icons/icons/circle-back.js";
 import { LOTTIE as R } from "../../../../../assets/lottie/lottie.js";
 import A from "../../../../ui/lottie-animation/lottie-animation.js";
 import I from "../../../../ui/text/text.js";
-import { BackgroundImage as P, ScreenWrapper as b, TransparentIconButton as L, CircularStepsContainer as T, CircularStepsWrapper as $, CustEleContainer as q, CircularProgressContainer as v, CircularProgress as w, Label as F, CustomDataContainer as M } from "./circular-steps-styled.js";
-import { TOTAL_FRAMES as W } from "./constants.js";
+import { BackgroundImage as P, ScreenWrapper as b, TransparentIconButton as L, CircularStepsContainer as T, CircularStepsWrapper as q, CustEleContainer as v, CircularProgressContainer as F, CircularProgress as w, Label as M, CustomDataContainer as W } from "./circular-steps-styled.js";
+import { TOTAL_FRAMES as $ } from "./constants.js";
 const j = ({ img: n }) => /* @__PURE__ */ e(P, { children: n }), x = {
   autoplay: !1,
   loop: !1,
@@ -14,18 +14,18 @@ const j = ({ img: n }) => /* @__PURE__ */ e(P, { children: n }), x = {
   const { width: s, height: u } = d, r = n[t], l = m(null), a = m(-1), g = () => {
     var o, i;
     (i = (o = n[t]) == null ? void 0 : o.onBack) == null || i.call(o);
-  }, h = k(() => {
+  }, h = S(() => {
     if (l.current && (r != null && r.isProgressAnimationRequired)) {
-      const o = n.filter((E) => E.isProgressAnimationRequired), i = W / o.length, p = a.current >= 0 ? a.current : 0, f = Math.round(p * i + 1), C = Math.round(t * i);
+      const o = n.filter((E) => E.isProgressAnimationRequired), i = $ / o.length, p = a.current >= 0 ? a.current : 0, f = Math.round(p * i + 1), C = Math.round(t * i);
       a.current = t, l.current.playSegments([f, C], !0);
     }
   }, [t, r == null ? void 0 : r.isProgressAnimationRequired, n]);
-  return /* @__PURE__ */ e(S, { children: r ? /* @__PURE__ */ c(b, { width: s, height: u, children: [
+  return /* @__PURE__ */ e(k, { children: r ? /* @__PURE__ */ c(b, { width: s, height: u, children: [
     r.onBack ? /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(B, { onClick: g }) }) : null,
     r.background ? /* @__PURE__ */ e(j, { img: r.background }) : null,
-    /* @__PURE__ */ e(T, { children: /* @__PURE__ */ c($, { children: [
-      r.custEle ? /* @__PURE__ */ e(q, { children: r.custEle }) : null,
-      r.custEleInsideStep ? /* @__PURE__ */ c(v, { width: s, height: u, children: [
+    /* @__PURE__ */ e(T, { children: /* @__PURE__ */ c(q, { children: [
+      r.custEle ? /* @__PURE__ */ e(v, { children: r.custEle }) : null,
+      r.custEleInsideStep ? /* @__PURE__ */ c(F, { width: s, height: u, children: [
         r.isProgressAnimationRequired ? /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
           A,
           {
@@ -35,11 +35,11 @@ const j = ({ img: n }) => /* @__PURE__ */ e(P, { children: n }), x = {
             onRender: h
           }
         ) }) : null,
-        r.label ? /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(I, { $renderAs: "ab2", $align: "center", $color: "WHITE", $whiteSpace: "pre", children: r.label }) }) : null,
+        r.label ? /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(I, { $renderAs: "ab2", $color: "WHITE", children: r.label }) }) : null,
         r.custEleInsideStep
       ] }) : null
     ] }) }),
-    r.custEleBelowStep ? /* @__PURE__ */ e(M, { children: r.custEleBelowStep }) : null
+    r.custEleBelowStep ? /* @__PURE__ */ e(W, { children: r.custEleBelowStep }) : null
   ] }) : null });
 };
 export {

package/dist/features/circle-games/sign-up/comp/circular-steps/circular-steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-steps.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/circular-steps/circular-steps.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { ICircularStepsProps } from './circular-steps-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useRef } from 'react';\n\nimport CircleBackIcon from '../../../../../assets/line-icons/icons/circle-back';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './circular-steps-styled';\nimport { TOTAL_FRAMES } from './constants';\n\nexport const BackgroundImage = ({ img }: { img: React.ReactNode }) => {\n  return <Styled.BackgroundImage>{img}</Styled.BackgroundImage>;\n};\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nexport const CircularSteps: FC<ICircularStepsProps> = ({ steps, currentStepIndex, dimensions }) => {\n  const { width, height } = dimensions;\n\n  const step = steps[currentStepIndex];\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n  const previousStepIndex = useRef<number>(-1);\n\n  const handleBack = () => {\n    steps[currentStepIndex]?.onBack?.();\n  };\n\n  const onLottieRender = useCallback(() => {\n    if (animationRef.current && step?.isProgressAnimationRequired) {\n      const actualSteps = steps.filter(_step => _step.isProgressAnimationRequired);\n      const stepSize = TOTAL_FRAMES / actualSteps.length;\n\n      const validPreviousIndex = previousStepIndex.current >= 0 ? previousStepIndex.current : 0;\n\n      const fromFrame = Math.round(validPreviousIndex * stepSize + 1);\n      const toFrame = Math.round(currentStepIndex * stepSize);\n\n      previousStepIndex.current = currentStepIndex;\n      animationRef.current.playSegments([fromFrame, toFrame], true);\n    }\n  }, [currentStepIndex, step?.isProgressAnimationRequired, steps]);\n\n  return (\n    <>\n      {step ? (\n        <Styled.ScreenWrapper width={width} height={height}>\n          {step.onBack ? (\n            <Styled.TransparentIconButton>\n              <CircleBackIcon onClick={handleBack} />\n            </Styled.TransparentIconButton>\n          ) : null}\n          {step.background ? <BackgroundImage img={step.background} /> : null}\n          <Styled.CircularStepsContainer>\n            <Styled.CircularStepsWrapper>\n              {step.custEle ? (\n                <Styled.CustEleContainer>{step.custEle}</Styled.CustEleContainer>\n              ) : null}\n\n              {/*circular data container*/}\n              {step.custEleInsideStep ? (\n                <Styled.CircularProgressContainer width={width} height={height}>\n                  {step.isProgressAnimationRequired ? (\n                    <Styled.CircularProgress>\n                      <LottieAnimation\n                        ref={animationRef}\n                        src={LOTTIE.LEVELUP_RINGS}\n                        settings={animationSettings}\n                        onRender={onLottieRender}\n                      />\n                    </Styled.CircularProgress>\n                  ) : null}\n\n                  {step.label ? (\n                    <Styled.Label>\n                      <Text $renderAs=\"ab2\" $align=\"center\" $color=\"WHITE\" $whiteSpace=\"pre\">\n                        {step.label}\n                      </Text>\n                    </Styled.Label>\n                  ) : null}\n                  {step.custEleInsideStep}\n                </Styled.CircularProgressContainer>\n              ) : null}\n            </Styled.CircularStepsWrapper>\n          </Styled.CircularStepsContainer>\n          {/* custom data container below circle */}\n          {step.custEleBelowStep ? (\n            <Styled.CustomDataContainer>{step.custEleBelowStep}</Styled.CustomDataContainer>\n          ) : null}\n        </Styled.ScreenWrapper>\n      ) : null}\n    </>\n  );\n};\n"],"names":["BackgroundImage","img","jsx","Styled.BackgroundImage","animationSettings","CircularSteps","steps","currentStepIndex","dimensions","width","height","step","animationRef","useRef","previousStepIndex","handleBack","_b","_a","onLottieRender","useCallback","actualSteps","_step","stepSize","TOTAL_FRAMES","validPreviousIndex","fromFrame","toFrame","jsxs","Styled.ScreenWrapper","Styled.TransparentIconButton","CircleBackIcon","Styled.CircularStepsContainer","Styled.CircularStepsWrapper","Styled.CustEleContainer","Styled.CircularProgressContainer","Styled.CircularProgress","LottieAnimation","LOTTIE","Styled.Label","Text","Styled.CustomDataContainer"],"mappings":";;;;;;;;AAaO,MAAMA,IAAkB,CAAC,EAAE,KAAAC,QACxB,gBAAAC,EAAAC,GAAA,EAAwB,UAAIF,EAAA,CAAA,GAGhCG,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEaC,IAAyC,CAAC,EAAE,OAAAC,GAAO,kBAAAC,GAAkB,YAAAC,QAAiB;AAC3F,QAAA,EAAE,OAAAC,GAAO,QAAAC,EAAW,IAAAF,GAEpBG,IAAOL,EAAMC,CAAgB,GAC7BK,IAAeC,EAAmC,IAAI,GACtDC,IAAoBD,EAAe,EAAE,GAErCE,IAAa,MAAM;;AACjB,KAAAC,KAAAC,IAAAX,EAAAC,CAAgB,MAAhB,gBAAAU,EAAmB,WAAnB,QAAAD,EAAA,KAAAC;AAAA,EAA4B,GAG9BC,IAAiBC,EAAY,MAAM;AACnC,QAAAP,EAAa,YAAWD,KAAA,QAAAA,EAAM,8BAA6B;AAC7D,YAAMS,IAAcd,EAAM,OAAO,CAAAe,MAASA,EAAM,2BAA2B,GACrEC,IAAWC,IAAeH,EAAY,QAEtCI,IAAqBV,EAAkB,WAAW,IAAIA,EAAkB,UAAU,GAElFW,IAAY,KAAK,MAAMD,IAAqBF,IAAW,CAAC,GACxDI,IAAU,KAAK,MAAMnB,IAAmBe,CAAQ;AAEtD,MAAAR,EAAkB,UAAUP,GAC5BK,EAAa,QAAQ,aAAa,CAACa,GAAWC,CAAO,GAAG,EAAI;AAAA,IAC9D;AAAA,KACC,CAACnB,GAAkBI,KAAA,gBAAAA,EAAM,6BAA6BL,CAAK,CAAC;AAE/D,gCAEK,UACCK,IAAA,gBAAAgB,EAACC,GAAA,EAAqB,OAAAnB,GAAc,QAAAC,GACjC,UAAA;AAAA,IAAKC,EAAA,SACH,gBAAAT,EAAA2B,GAAA,EACC,4BAACC,GAAe,EAAA,SAASf,GAAY,EAAA,CACvC,IACE;AAAA,IACHJ,EAAK,aAAa,gBAAAT,EAACF,KAAgB,KAAKW,EAAK,WAAY,CAAA,IAAK;AAAA,sBAC9DoB,GAAA,EACC,UAAC,gBAAAJ,EAAAK,GAAA,EACE,UAAA;AAAA,MAAArB,EAAK,UACH,gBAAAT,EAAA+B,GAAA,EAAyB,UAAAtB,EAAK,QAAQ,CAAA,IACrC;AAAA,MAGHA,EAAK,oBACJ,gBAAAgB,EAACO,GAAA,EAAiC,OAAAzB,GAAc,QAAAC,GAC7C,UAAA;AAAA,QAAAC,EAAK,8BACJ,gBAAAT,EAACiC,GAAA,EACC,UAAA,gBAAAjC;AAAA,UAACkC;AAAA,UAAA;AAAA,YACC,KAAKxB;AAAA,YACL,KAAKyB,EAAO;AAAA,YACZ,UAAUjC;AAAA,YACV,UAAUc;AAAA,UAAA;AAAA,WAEd,IACE;AAAA,QAEHP,EAAK,QACJ,gBAAAT,EAACoC,GAAA,EACC,4BAACC,GAAK,EAAA,WAAU,OAAM,QAAO,UAAS,QAAO,SAAQ,aAAY,OAC9D,UAAK5B,EAAA,MAAA,CACR,EACF,CAAA,IACE;AAAA,QACHA,EAAK;AAAA,MAAA,EAAA,CACR,IACE;AAAA,IAAA,EAAA,CACN,EACF,CAAA;AAAA,IAECA,EAAK,mBACH,gBAAAT,EAAAsC,GAAA,EAA4B,UAAA7B,EAAK,iBAAiB,CAAA,IACjD;AAAA,EAAA,GACN,IACE,KACN,CAAA;AAEJ;"}
+{"version":3,"file":"circular-steps.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/circular-steps/circular-steps.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { ICircularStepsProps } from './circular-steps-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useRef } from 'react';\n\nimport CircleBackIcon from '../../../../../assets/line-icons/icons/circle-back';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './circular-steps-styled';\nimport { TOTAL_FRAMES } from './constants';\n\nexport const BackgroundImage = ({ img }: { img: React.ReactNode }) => {\n  return <Styled.BackgroundImage>{img}</Styled.BackgroundImage>;\n};\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nexport const CircularSteps: FC<ICircularStepsProps> = ({ steps, currentStepIndex, dimensions }) => {\n  const { width, height } = dimensions;\n\n  const step = steps[currentStepIndex];\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n  const previousStepIndex = useRef<number>(-1);\n\n  const handleBack = () => {\n    steps[currentStepIndex]?.onBack?.();\n  };\n\n  const onLottieRender = useCallback(() => {\n    if (animationRef.current && step?.isProgressAnimationRequired) {\n      const actualSteps = steps.filter(_step => _step.isProgressAnimationRequired);\n      const stepSize = TOTAL_FRAMES / actualSteps.length;\n\n      const validPreviousIndex = previousStepIndex.current >= 0 ? previousStepIndex.current : 0;\n\n      const fromFrame = Math.round(validPreviousIndex * stepSize + 1);\n      const toFrame = Math.round(currentStepIndex * stepSize);\n\n      previousStepIndex.current = currentStepIndex;\n      animationRef.current.playSegments([fromFrame, toFrame], true);\n    }\n  }, [currentStepIndex, step?.isProgressAnimationRequired, steps]);\n\n  return (\n    <>\n      {step ? (\n        <Styled.ScreenWrapper width={width} height={height}>\n          {step.onBack ? (\n            <Styled.TransparentIconButton>\n              <CircleBackIcon onClick={handleBack} />\n            </Styled.TransparentIconButton>\n          ) : null}\n          {step.background ? <BackgroundImage img={step.background} /> : null}\n          <Styled.CircularStepsContainer>\n            <Styled.CircularStepsWrapper>\n              {step.custEle ? (\n                <Styled.CustEleContainer>{step.custEle}</Styled.CustEleContainer>\n              ) : null}\n\n              {/*circular data container*/}\n              {step.custEleInsideStep ? (\n                <Styled.CircularProgressContainer width={width} height={height}>\n                  {step.isProgressAnimationRequired ? (\n                    <Styled.CircularProgress>\n                      <LottieAnimation\n                        ref={animationRef}\n                        src={LOTTIE.LEVELUP_RINGS}\n                        settings={animationSettings}\n                        onRender={onLottieRender}\n                      />\n                    </Styled.CircularProgress>\n                  ) : null}\n\n                  {step.label ? (\n                    <Styled.Label>\n                      <Text $renderAs=\"ab2\" $color=\"WHITE\">\n                        {step.label}\n                      </Text>\n                    </Styled.Label>\n                  ) : null}\n                  {step.custEleInsideStep}\n                </Styled.CircularProgressContainer>\n              ) : null}\n            </Styled.CircularStepsWrapper>\n          </Styled.CircularStepsContainer>\n          {/* custom data container below circle */}\n          {step.custEleBelowStep ? (\n            <Styled.CustomDataContainer>{step.custEleBelowStep}</Styled.CustomDataContainer>\n          ) : null}\n        </Styled.ScreenWrapper>\n      ) : null}\n    </>\n  );\n};\n"],"names":["BackgroundImage","img","jsx","Styled.BackgroundImage","animationSettings","CircularSteps","steps","currentStepIndex","dimensions","width","height","step","animationRef","useRef","previousStepIndex","handleBack","_b","_a","onLottieRender","useCallback","actualSteps","_step","stepSize","TOTAL_FRAMES","validPreviousIndex","fromFrame","toFrame","jsxs","Styled.ScreenWrapper","Styled.TransparentIconButton","CircleBackIcon","Styled.CircularStepsContainer","Styled.CircularStepsWrapper","Styled.CustEleContainer","Styled.CircularProgressContainer","Styled.CircularProgress","LottieAnimation","LOTTIE","Styled.Label","Text","Styled.CustomDataContainer"],"mappings":";;;;;;;;AAaO,MAAMA,IAAkB,CAAC,EAAE,KAAAC,QACxB,gBAAAC,EAAAC,GAAA,EAAwB,UAAIF,EAAA,CAAA,GAGhCG,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEaC,IAAyC,CAAC,EAAE,OAAAC,GAAO,kBAAAC,GAAkB,YAAAC,QAAiB;AAC3F,QAAA,EAAE,OAAAC,GAAO,QAAAC,EAAW,IAAAF,GAEpBG,IAAOL,EAAMC,CAAgB,GAC7BK,IAAeC,EAAmC,IAAI,GACtDC,IAAoBD,EAAe,EAAE,GAErCE,IAAa,MAAM;;AACjB,KAAAC,KAAAC,IAAAX,EAAAC,CAAgB,MAAhB,gBAAAU,EAAmB,WAAnB,QAAAD,EAAA,KAAAC;AAAA,EAA4B,GAG9BC,IAAiBC,EAAY,MAAM;AACnC,QAAAP,EAAa,YAAWD,KAAA,QAAAA,EAAM,8BAA6B;AAC7D,YAAMS,IAAcd,EAAM,OAAO,CAAAe,MAASA,EAAM,2BAA2B,GACrEC,IAAWC,IAAeH,EAAY,QAEtCI,IAAqBV,EAAkB,WAAW,IAAIA,EAAkB,UAAU,GAElFW,IAAY,KAAK,MAAMD,IAAqBF,IAAW,CAAC,GACxDI,IAAU,KAAK,MAAMnB,IAAmBe,CAAQ;AAEtD,MAAAR,EAAkB,UAAUP,GAC5BK,EAAa,QAAQ,aAAa,CAACa,GAAWC,CAAO,GAAG,EAAI;AAAA,IAC9D;AAAA,KACC,CAACnB,GAAkBI,KAAA,gBAAAA,EAAM,6BAA6BL,CAAK,CAAC;AAE/D,gCAEK,UACCK,IAAA,gBAAAgB,EAACC,GAAA,EAAqB,OAAAnB,GAAc,QAAAC,GACjC,UAAA;AAAA,IAAKC,EAAA,SACH,gBAAAT,EAAA2B,GAAA,EACC,4BAACC,GAAe,EAAA,SAASf,GAAY,EAAA,CACvC,IACE;AAAA,IACHJ,EAAK,aAAa,gBAAAT,EAACF,KAAgB,KAAKW,EAAK,WAAY,CAAA,IAAK;AAAA,sBAC9DoB,GAAA,EACC,UAAC,gBAAAJ,EAAAK,GAAA,EACE,UAAA;AAAA,MAAArB,EAAK,UACH,gBAAAT,EAAA+B,GAAA,EAAyB,UAAAtB,EAAK,QAAQ,CAAA,IACrC;AAAA,MAGHA,EAAK,oBACJ,gBAAAgB,EAACO,GAAA,EAAiC,OAAAzB,GAAc,QAAAC,GAC7C,UAAA;AAAA,QAAAC,EAAK,8BACJ,gBAAAT,EAACiC,GAAA,EACC,UAAA,gBAAAjC;AAAA,UAACkC;AAAA,UAAA;AAAA,YACC,KAAKxB;AAAA,YACL,KAAKyB,EAAO;AAAA,YACZ,UAAUjC;AAAA,YACV,UAAUc;AAAA,UAAA;AAAA,WAEd,IACE;AAAA,QAEHP,EAAK,QACH,gBAAAT,EAAAoC,GAAA,EACC,UAAA,gBAAApC,EAACqC,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UAAK5B,EAAA,MACR,CAAA,EACF,CAAA,IACE;AAAA,QACHA,EAAK;AAAA,MAAA,EAAA,CACR,IACE;AAAA,IAAA,EAAA,CACN,EACF,CAAA;AAAA,IAECA,EAAK,mBACH,gBAAAT,EAAAsC,GAAA,EAA4B,UAAA7B,EAAK,iBAAiB,CAAA,IACjD;AAAA,EAAA,GACN,IACE,KACN,CAAA;AAEJ;"}

package/dist/features/circle-games/sign-up/sign-up-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"sign-up-types.js","sources":["../../../../src/features/circle-games/sign-up/sign-up-types.ts"],"sourcesContent":["import type { IUpdateUsernameResponse } from './api/use-update-username-api/use-update-username-api-types';\nimport type { ICreateUserResponseDal } from './dal/create-user-dal/create-user-dal-types';\nimport type { IUpdateUserPayloadDal } from './dal/update-user-dal/update-user-dal-types';\n\nexport enum State {\n  ADDED = 'ADDED',\n  DEMO = 'DEMO',\n  TRIAL = 'TRL',\n  PAID = 'PAID',\n  ACTIVE = 'ACT',\n  INACTIVE = 'INACT',\n  LEFT = 'LEFT',\n  PAUSED = 'PSD',\n  HOLD = 'HOLD',\n}\n\nexport interface ISignUpProps {\n  circleOnLeapSignedUp: boolean;\n  circleOnLeapPremiumEnabled: boolean;\n  mathGymEnrolledUser: boolean;\n  circleEnrolledUser: boolean;\n  circleOnLeapPremiumDays: number;\n  circleUsername: string;\n  countryCode: string;\n  grade: string;\n  state: State;\n  studentId: string;\n  isSignUpProcessing: boolean;\n  onUpdateUser?: (data: IUpdateUserPayloadDal) => void;\n  onCreateUser?: (data: ICreateUserResponseDal) => void;\n  onSignupStepsComplete: (\n    data: IUpdateUserPayloadDal | ICreateUserResponseDal | IUpdateUsernameResponse | null,\n  ) => void;\n  isPLAStudent?: boolean;\n}\n"],"names":["State"],"mappings":"AAIY,IAAAA,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,OACRA,EAAA,OAAO,QACPA,EAAA,SAAS,OACTA,EAAA,WAAW,SACXA,EAAA,OAAO,QACPA,EAAA,SAAS,OACTA,EAAA,OAAO,QATGA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"sign-up-types.js","sources":["../../../../src/features/circle-games/sign-up/sign-up-types.ts"],"sourcesContent":["import type { ICreateUserResponseDal } from './dal/create-user-dal/create-user-dal-types';\nimport type { IUpdateUserPayloadDal } from './dal/update-user-dal/update-user-dal-types';\n\nexport enum State {\n  ADDED = 'ADDED',\n  DEMO = 'DEMO',\n  TRIAL = 'TRL',\n  PAID = 'PAID',\n  ACTIVE = 'ACT',\n  INACTIVE = 'INACT',\n  LEFT = 'LEFT',\n  PAUSED = 'PSD',\n  HOLD = 'HOLD',\n}\n\nexport interface ISignUpProps {\n  circleOnLeapSignedUp: boolean;\n  circleOnLeapPremiumEnabled: boolean;\n  mathGymEnrolledUser: boolean;\n  circleEnrolledUser: boolean;\n  circleOnLeapPremiumDays: number;\n  circleUsername: string;\n  countryCode: string;\n  grade: string;\n  state: State;\n  studentId: string;\n  isSignUpProcessing: boolean;\n  onUpdateUser?: (data: IUpdateUserPayloadDal) => void;\n  onCreateUser?: (data: ICreateUserResponseDal) => void;\n  onSignupStepsComplete: (data: IUpdateUserPayloadDal | ICreateUserResponseDal | null) => void;\n}\n"],"names":["State"],"mappings":"AAGY,IAAAA,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,OACRA,EAAA,OAAO,QACPA,EAAA,SAAS,OACTA,EAAA,WAAW,SACXA,EAAA,OAAO,QACPA,EAAA,SAAS,OACTA,EAAA,OAAO,QATGA,IAAAA,KAAA,CAAA,CAAA;"}