@cuemath/leap 3.0.7-hg1 → 3.0.7-hg3

package/dist/features/circle-games/sign-up/api/use-update-user-api/use-update-user-api.js

@@ -0,0 +1,9 @@
+import { createPostAPI as e } from "@cuemath/rest-api";
+import { BASE_URL as o } from "../constants.js";
+const { usePost: s } = e({
+  getURL: () => `${o}/profile`
+});
+export {
+  s as useUpdateUser
+};
+//# sourceMappingURL=use-update-user-api.js.map

package/dist/features/circle-games/sign-up/api/use-update-user-api/use-update-user-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-update-user-api.js","sources":["../../../../../../src/features/circle-games/sign-up/api/use-update-user-api/use-update-user-api.ts"],"sourcesContent":["import type { IUpdateUserPayload, IUpdateUserResponse } from './use-update-user-api-types';\n\nimport { createPostAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL } from '../constants';\n\nexport const { usePost: useUpdateUser } = createPostAPI<IUpdateUserResponse, IUpdateUserPayload>({\n  getURL: () => `${BASE_URL}/profile`,\n});\n"],"names":["useUpdateUser","createPostAPI","BASE_URL"],"mappings":";;AAMO,MAAM,EAAE,SAASA,EAAc,IAAIC,EAAuD;AAAA,EAC/F,QAAQ,MAAM,GAAGC,CAAQ;AAC3B,CAAC;"}

package/dist/features/circle-games/sign-up/api/use-validate-username-api/use-validate-user-api.js

@@ -0,0 +1,9 @@
+import { createPostAPI as e } from "@cuemath/rest-api";
+import { BASE_URL as o } from "../constants.js";
+const { usePost: s } = e({
+  getURL: () => `${o}/profile`
+});
+export {
+  s as useValidateUserName
+};
+//# sourceMappingURL=use-validate-user-api.js.map

package/dist/features/circle-games/sign-up/api/use-validate-username-api/use-validate-user-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-validate-user-api.js","sources":["../../../../../../src/features/circle-games/sign-up/api/use-validate-username-api/use-validate-user-api.ts"],"sourcesContent":["import type {\n  IValidateUsernamePayload,\n  IValidateUsernameResponse,\n} from './use-validate-user-api-types';\n\nimport { createPostAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL } from '../constants';\n\nexport const { usePost: useValidateUserName } = createPostAPI<\n  IValidateUsernameResponse,\n  IValidateUsernamePayload\n>({\n  getURL: () => `${BASE_URL}/profile`,\n});\n"],"names":["useValidateUserName","createPostAPI","BASE_URL"],"mappings":";;AASO,MAAM,EAAE,SAASA,EAAoB,IAAIC,EAG9C;AAAA,EACA,QAAQ,MAAM,GAAGC,CAAQ;AAC3B,CAAC;"}

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

@@ -0,0 +1,103 @@
+import i from "styled-components";
+import { CIRCULAR_STEP_TOP_DISTANCE as n, CIRCLE_SIZE_GUTTER as o } from "./constants.js";
+const a = i.div`
+  position: relative;
+  width: ${({ width: t }) => `${t}px`};
+  height: ${({ height: t }) => `${t}px`};
+`, l = i.div`
+  display: flex;
+  position: relative;
+  height: inherit;
+  width: inherit;
+  margin: 0px auto;
+`, p = i.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+`, d = i.div`
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  bottom: 0px;
+  right: 0;
+  background-size: contain;
+`;
+i.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+`;
+i.div`
+  height: 100%;
+  width: 100%;
+  background-color: ${({ blurType: t }) => t === "dark" ? "rgba(0, 0, 0, 0.5)" : ({ theme: e }) => e.colors.WHITE};
+  backdrop-filter: ${({ blurAmount: t }) => `blur(${t}px)`};
+`;
+const c = i.div`
+  position: relative;
+  top: 10px;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  margin: 16px;
+`, h = i.div`
+  margin-top: ${({ height: t }) => t * n / 100}px;
+  width: ${({ width: t }) => t * o}px;
+  height: ${({ width: t }) => t * o}px;
+  position: relative;
+  overflow: hidden;
+  background: ${({ theme: t }) => t.colors.BLACK_2};
+  border-radius: 100%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme: t }) => t.colors.WHITE};
+`, x = i.div`
+  position: absolute;
+  transform: translateY(-55px);
+  z-index: 3;
+`, u = i.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  transform: scale(1.175);
+  pointer-events: none;
+`, g = i.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  left: 0;
+  right: 0;
+  bottom: 0px;
+`, f = i.button`
+  position: absolute;
+  top: 20px;
+  left: 16px;
+  outline: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  z-index: 1;
+`;
+export {
+  d as BackgroundImage,
+  u as CircularProgress,
+  h as CircularProgressContainer,
+  l as CircularStepsContainer,
+  p as CircularStepsWrapper,
+  c as CustEleContainer,
+  g as CustomDataContainer,
+  x as Label,
+  a as ScreenWrapper,
+  f as TransparentIconButton
+};
+//# sourceMappingURL=circular-steps-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"circular-steps-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/circular-steps/circular-steps-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CIRCLE_SIZE_GUTTER, CIRCULAR_STEP_TOP_DISTANCE } from './constants';\n\ninterface ICircularStepsContainerProps {\n  width: number;\n  height: number;\n}\n\ninterface IBlurGameContainerProps {\n  blurType: 'light' | 'dark';\n  blurAmount: number;\n}\n\nexport const ScreenWrapper = styled.div<ICircularStepsContainerProps>`\n  position: relative;\n  width: ${({ width }) => `${width}px`};\n  height: ${({ height }) => `${height}px`};\n`;\n\nexport const CircularStepsContainer = styled.div`\n  display: flex;\n  position: relative;\n  height: inherit;\n  width: inherit;\n  margin: 0px auto;\n`;\n\nexport const CircularStepsWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n`;\n\nexport const BackgroundImage = styled.div`\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  bottom: 0px;\n  right: 0;\n  background-size: contain;\n`;\n\nexport const BlurredContainerWrapper = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n`;\n\nexport const BlurredGameContainer = styled.div<IBlurGameContainerProps>`\n  height: 100%;\n  width: 100%;\n  background-color: ${({ blurType }) =>\n    blurType === 'dark' ? 'rgba(0, 0, 0, 0.5)' : ({ theme }) => theme.colors.WHITE};\n  backdrop-filter: ${({ blurAmount }) => `blur(${blurAmount}px)`};\n`;\n\nexport const CustEleContainer = styled.div`\n  position: relative;\n  top: 10px;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  margin: 16px;\n`;\n\nexport const CircularProgressContainer = styled.div<{\n  isVerticallyCentered?: boolean;\n  width: number;\n  height: number;\n}>`\n  margin-top: ${({ height }) => (height * CIRCULAR_STEP_TOP_DISTANCE) / 100}px;\n  width: ${({ width }) => width * CIRCLE_SIZE_GUTTER}px;\n  height: ${({ width }) => width * CIRCLE_SIZE_GUTTER}px;\n  position: relative;\n  overflow: hidden;\n  background: ${({ theme }) => theme.colors.BLACK_2};\n  border-radius: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const Label = styled.div`\n  position: absolute;\n  transform: translateY(-55px);\n  z-index: 3;\n`;\n\nexport const CircularProgress = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  transform: scale(1.175);\n  pointer-events: none;\n`;\n\nexport const CustomDataContainer = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n`;\n\nexport const TransparentIconButton = styled.button`\n  position: absolute;\n  top: 20px;\n  left: 16px;\n  outline: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  z-index: 1;\n`;\n"],"names":["ScreenWrapper","styled","width","height","CircularStepsContainer","CircularStepsWrapper","BackgroundImage","blurType","theme","blurAmount","CustEleContainer","CircularProgressContainer","CIRCULAR_STEP_TOP_DISTANCE","CIRCLE_SIZE_GUTTER","Label","CircularProgress","CustomDataContainer","TransparentIconButton"],"mappings":";;AAcO,MAAMA,IAAgBC,EAAO;AAAA;AAAA,WAEzB,CAAC,EAAE,OAAAC,EAAY,MAAA,GAAGA,CAAK,IAAI;AAAA,YAC1B,CAAC,EAAE,QAAAC,EAAa,MAAA,GAAGA,CAAM,IAAI;AAAA,GAG5BC,IAAyBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhCI,IAAuBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU9BK,IAAkBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUCA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOVA,EAAO;AAAA;AAAA;AAAA,sBAGrB,CAAC,EAAE,UAAAM,QACrBA,MAAa,SAAS,uBAAuB,CAAC,EAAE,OAAAC,EAAY,MAAAA,EAAM,OAAO,KAAK;AAAA,qBAC7D,CAAC,EAAE,YAAAC,EAAiB,MAAA,QAAQA,CAAU,KAAK;AAAA;AAGzD,MAAMC,IAAmBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS1BU,IAA4BV,EAAO;AAAA,gBAKhC,CAAC,EAAE,QAAAE,EAAA,MAAcA,IAASS,IAA8B,GAAG;AAAA,WAChE,CAAC,EAAE,OAAAV,QAAYA,IAAQW,CAAkB;AAAA,YACxC,CAAC,EAAE,OAAAX,QAAYA,IAAQW,CAAkB;AAAA;AAAA;AAAA,gBAGrC,CAAC,EAAE,OAAAL,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,GAG/BM,IAAQb,EAAO;AAAA;AAAA;AAAA;AAAA,GAMfc,IAAmBd,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS1Be,IAAsBf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU7BgB,IAAwBhB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,49 @@
+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 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,
+  renderer: "canvas"
+}, U = ({ steps: n, currentStepIndex: t, dimensions: d }) => {
+  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 = S(() => {
+    if (l.current && (r != null && r.isProgressAnimationRequired)) {
+      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(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(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,
+          {
+            ref: l,
+            src: R.LEVELUP_RINGS,
+            settings: x,
+            onRender: h
+          }
+        ) }) : 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(W, { children: r.custEleBelowStep }) : null
+  ] }) : null });
+};
+export {
+  j as BackgroundImage,
+  U as CircularSteps
+};
+//# sourceMappingURL=circular-steps.js.map

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

@@ -0,0 +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\" $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/comp/circular-steps/constants.js

@@ -0,0 +1,7 @@
+const T = 92, E = 0.6727, _ = 22.5;
+export {
+  E as CIRCLE_SIZE_GUTTER,
+  _ as CIRCULAR_STEP_TOP_DISTANCE,
+  T as TOTAL_FRAMES
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/circular-steps/constants.ts"],"sourcesContent":["export const TOTAL_FRAMES = 92;\n\n// all these values are based on Figma with screen dimention 440 x 640\nexport const CIRCLE_SIZE_GUTTER = 0.6727;\n\n// all values in percent(%)\nexport const CIRCULAR_STEP_TOP_DISTANCE = 22.5;\n"],"names":["TOTAL_FRAMES","CIRCLE_SIZE_GUTTER","CIRCULAR_STEP_TOP_DISTANCE"],"mappings":"AAAO,MAAMA,IAAe,IAGfC,IAAqB,QAGrBC,IAA6B;"}

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input-styled.js

@@ -0,0 +1,71 @@
+import r from "styled-components";
+const a = r.div(({ theme: o }) => {
+  const { BLACK: t } = o.colors;
+  return `
+  background: ${t};
+  width: 100%;
+  padding: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  `;
+}), l = r.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`, d = r.div`
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+`, p = r.div(({ isActive: o, theme: t }) => {
+  const { WHITE: e, TRANSPARENT: n, GREY_2: i, WHITE_T_10: s } = t.colors;
+  return `
+  height: 45px;
+  width: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid ${e};
+  background-color: ${o ? e : n};
+  cursor: pointer;
+  transition:
+    background-color 0.3s ease,
+    transform 0.2s ease;
+
+  &:hover {
+    transform: scale(1.1);
+    background-color: ${o ? i : s};
+  }
+  `;
+}), u = r.div`
+  position: absolute;
+  bottom: 166px;
+  right: 16px;
+  z-index: 1;
+  background: ${({ theme: o }) => o.colors.WHITE};
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.1s linear;
+  cursor: pointer;
+  &:hover {
+    background: ${({ theme: o }) => o.colors.BLACK_3};
+    color: ${({ theme: o }) => o.colors.WHITE};
+  }
+  &:hover svg {
+    fill: ${({ theme: o }) => o.colors.WHITE};
+  }
+`;
+export {
+  p as GradeButton,
+  l as GradeInputContainer,
+  a as GradeInputWrapper,
+  d as GradeRow,
+  u as NextButtonWrapper
+};
+//# sourceMappingURL=grade-input-styled.js.map

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grade-input-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/grade-input/grade-input-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const GradeInputWrapper = styled.div(({ theme }) => {\n  const { BLACK } = theme.colors;\n\n  return `\n  background: ${BLACK};\n  width: 100%;\n  padding: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  `;\n});\n\nexport const GradeInputContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nexport const GradeRow = styled.div`\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n`;\n\nexport const GradeButton = styled.div<{ isActive: boolean }>(({ isActive, theme }) => {\n  const { WHITE, TRANSPARENT, GREY_2, WHITE_T_10 } = theme.colors;\n\n  return `\n  height: 45px;\n  width: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  border: 1px solid ${WHITE};\n  background-color: ${isActive ? WHITE : TRANSPARENT};\n  cursor: pointer;\n  transition:\n    background-color 0.3s ease,\n    transform 0.2s ease;\n\n  &:hover {\n    transform: scale(1.1);\n    background-color: ${isActive ? GREY_2 : WHITE_T_10};\n  }\n  `;\n});\n\nexport const NextButtonWrapper = styled.div`\n  position: absolute;\n  bottom: 166px;\n  right: 16px;\n  z-index: 1;\n  background: ${({ theme }) => theme.colors.WHITE};\n  border-radius: 100%;\n  height: 40px;\n  width: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.1s linear;\n  cursor: pointer;\n  &:hover {\n    background: ${({ theme }) => theme.colors.BLACK_3};\n    color: ${({ theme }) => theme.colors.WHITE};\n  }\n  &:hover svg {\n    fill: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n"],"names":["GradeInputWrapper","styled","theme","BLACK","GradeInputContainer","GradeRow","GradeButton","isActive","WHITE","TRANSPARENT","GREY_2","WHITE_T_10","NextButtonWrapper"],"mappings":";AAEO,MAAMA,IAAoBC,EAAO,IAAI,CAAC,EAAE,OAAAC,QAAY;AACnD,QAAA,EAAE,OAAAC,EAAM,IAAID,EAAM;AAEjB,SAAA;AAAA,gBACOC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrB,CAAC,GAEYC,IAAsBH,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BI,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA,GAMlBK,IAAcL,EAAO,IAA2B,CAAC,EAAE,UAAAM,GAAU,OAAAL,QAAY;AACpF,QAAM,EAAE,OAAAM,GAAO,aAAAC,GAAa,QAAAC,GAAQ,YAAAC,MAAeT,EAAM;AAElD,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOaM,CAAK;AAAA,sBACLD,IAAWC,IAAQC,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ5BF,IAAWG,IAASC,CAAU;AAAA;AAAA;AAGtD,CAAC,GAEYC,IAAoBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKxB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAW/B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,aACxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;"}

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input.js

@@ -0,0 +1,37 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useState as b, useEffect as y } from "react";
+import x from "../../../../../assets/line-icons/icons/next2.js";
+import G from "../../../../ui/buttons/clickable/clickable.js";
+import h from "../../../../ui/text/text.js";
+import { WithGrade as A } from "../../../leaderboard/comps/with-grade/with-grade.js";
+import { GradeInputWrapper as C, NextButtonWrapper as I, GradeInputContainer as W, GradeRow as B, GradeButton as $ } from "./grade-input-styled.js";
+const _ = ({ selected: o, grades: s, onSelect: n, onNext: c }) => {
+  const [i, m] = b(o);
+  y(() => {
+    m(o);
+  }, [o]);
+  const d = (e) => e === "13", u = (e) => {
+    n == null || n(e);
+  }, f = 6, k = s.reduce((e, a, r) => {
+    var l;
+    return r % f === 0 && e.push([]), (l = e[e.length - 1]) == null || l.push(a), e;
+  }, []);
+  return /* @__PURE__ */ p(C, { children: [
+    o && /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(G, { onClick: c, analyticsLabel: "circle_signup_grade_next", label: "", children: /* @__PURE__ */ t(x, { height: 28, width: 28 }) }) }),
+    /* @__PURE__ */ t(W, { children: k.map((e, a) => /* @__PURE__ */ t(B, { children: e.map((r) => /* @__PURE__ */ p($, { isActive: i === r.key, onClick: () => u(r), children: [
+      d(r.key) && /* @__PURE__ */ t(A, { grade: r.key, children: /* @__PURE__ */ t(
+        h,
+        {
+          $renderAs: i === r.key ? "ab1-bold" : "ab1",
+          $color: i === r.key ? "WHITE" : "BLACK",
+          children: r.label
+        }
+      ) }),
+      !d(r.key) && /* @__PURE__ */ t(h, { $renderAs: "ab1", $color: i === r.key ? "BLACK" : "WHITE", children: r.label })
+    ] }, r.key)) }, a)) })
+  ] });
+};
+export {
+  _ as GradeInput
+};
+//# sourceMappingURL=grade-input.js.map

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grade-input.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/grade-input/grade-input.tsx"],"sourcesContent":["import type { Grade, GradeKey, IGradeInputProps } from './grade-input-types';\n\nimport { useEffect, useState } from 'react';\n\nimport Next2Icon from '../../../../../assets/line-icons/icons/next2';\nimport Clickable from '../../../../ui/buttons/clickable/clickable';\nimport Text from '../../../../ui/text/text';\nimport { WithGrade } from '../../../leaderboard/comps/with-grade/with-grade';\nimport * as S from './grade-input-styled';\n\nexport const GradeInput = ({ selected, grades, onSelect, onNext }: IGradeInputProps) => {\n  const [active, setActive] = useState(selected);\n\n  useEffect(() => {\n    setActive(selected);\n  }, [selected]);\n\n  const isOutOfSchool = (gradeKey: GradeKey) => {\n    return gradeKey === ('13' as GradeKey);\n  };\n\n  const handleGrade = (gradeInfo: Grade) => {\n    onSelect?.(gradeInfo);\n  };\n\n  const maxNoOfRows = 6;\n\n  // Group grades into rows\n  const grade2d: Grade[][] = grades.reduce((acc: Grade[][], grade, index) => {\n    if (index % maxNoOfRows === 0) acc.push([]);\n    acc[acc.length - 1]?.push(grade);\n\n    return acc;\n  }, []);\n\n  return (\n    <S.GradeInputWrapper>\n      {selected && (\n        <S.NextButtonWrapper>\n          <Clickable onClick={onNext} analyticsLabel=\"circle_signup_grade_next\" label=\"\">\n            <Next2Icon height={28} width={28} />\n          </Clickable>\n        </S.NextButtonWrapper>\n      )}\n\n      <S.GradeInputContainer>\n        {grade2d.map((row, rowIndex) => (\n          <S.GradeRow key={rowIndex}>\n            {row.map(g => (\n              <S.GradeButton isActive={active === g.key} key={g.key} onClick={() => handleGrade(g)}>\n                {isOutOfSchool(g.key) && (\n                  <WithGrade grade={g.key}>\n                    <Text\n                      $renderAs={active === g.key ? 'ab1-bold' : 'ab1'}\n                      $color={active === g.key ? 'WHITE' : 'BLACK'}\n                    >\n                      {g.label}\n                    </Text>\n                  </WithGrade>\n                )}\n                {!isOutOfSchool(g.key) && (\n                  <Text $renderAs={'ab1'} $color={active === g.key ? 'BLACK' : 'WHITE'}>\n                    {g.label}\n                  </Text>\n                )}\n              </S.GradeButton>\n            ))}\n          </S.GradeRow>\n        ))}\n      </S.GradeInputContainer>\n    </S.GradeInputWrapper>\n  );\n};\n"],"names":["GradeInput","selected","grades","onSelect","onNext","active","setActive","useState","useEffect","isOutOfSchool","gradeKey","handleGrade","gradeInfo","maxNoOfRows","grade2d","acc","grade","index","_a","jsxs","S.GradeInputWrapper","S.NextButtonWrapper","jsx","Clickable","Next2Icon","S.GradeInputContainer","row","rowIndex","S.GradeRow","g","S.GradeButton","WithGrade","Text"],"mappings":";;;;;;;AAUO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,GAAU,QAAAC,QAA+B;AACtF,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAASN,CAAQ;AAE7C,EAAAO,EAAU,MAAM;AACd,IAAAF,EAAUL,CAAQ;AAAA,EAAA,GACjB,CAACA,CAAQ,CAAC;AAEP,QAAAQ,IAAgB,CAACC,MACdA,MAAc,MAGjBC,IAAc,CAACC,MAAqB;AACxC,IAAAT,KAAA,QAAAA,EAAWS;AAAA,EAAS,GAGhBC,IAAc,GAGdC,IAAqBZ,EAAO,OAAO,CAACa,GAAgBC,GAAOC,MAAU;;AACzE,WAAIA,IAAQJ,MAAgB,KAAOE,EAAA,KAAK,CAAA,CAAE,IAC1CG,IAAAH,EAAIA,EAAI,SAAS,CAAC,MAAlB,QAAAG,EAAqB,KAAKF,IAEnBD;AAAA,EACT,GAAG,CAAE,CAAA;AAGH,SAAA,gBAAAI,EAACC,GAAA,EACE,UAAA;AAAA,IAAAnB,uBACEoB,GAAA,EACC,UAAC,gBAAAC,EAAAC,GAAA,EAAU,SAASnB,GAAQ,gBAAe,4BAA2B,OAAM,IAC1E,4BAACoB,GAAU,EAAA,QAAQ,IAAI,OAAO,IAAI,GACpC,EACF,CAAA;AAAA,IAGD,gBAAAF,EAAAG,GAAA,EACE,UAAQX,EAAA,IAAI,CAACY,GAAKC,MACjB,gBAAAL,EAACM,GAAA,EACE,UAAAF,EAAI,IAAI,CAAAG,MACN,gBAAAV,EAAAW,GAAA,EAAc,UAAUzB,MAAWwB,EAAE,KAAiB,SAAS,MAAMlB,EAAYkB,CAAC,GAChF,UAAA;AAAA,MAAApB,EAAcoB,EAAE,GAAG,uBACjBE,GAAU,EAAA,OAAOF,EAAE,KAClB,UAAA,gBAAAP;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,WAAW3B,MAAWwB,EAAE,MAAM,aAAa;AAAA,UAC3C,QAAQxB,MAAWwB,EAAE,MAAM,UAAU;AAAA,UAEpC,UAAEA,EAAA;AAAA,QAAA;AAAA,MAAA,GAEP;AAAA,MAED,CAACpB,EAAcoB,EAAE,GAAG,uBAClBG,GAAK,EAAA,WAAW,OAAO,QAAQ3B,MAAWwB,EAAE,MAAM,UAAU,SAC1D,YAAE,OACL;AAAA,IAAA,EAAA,GAd4CA,EAAE,GAgBlD,CACD,EAnBc,GAAAF,CAoBjB,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/features/circle-games/sign-up/comp/input-wrapper/input-wrapper-styled.js

@@ -0,0 +1,25 @@
+import t from "styled-components";
+const o = t.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+`, i = t.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  position: absolute;
+  top: 50%;
+  transform: translateY(40px);
+`, n = t.div`
+  position: absolute;
+  bottom: 32px;
+`;
+export {
+  o as InputWrapper,
+  n as SpinnerLottieView,
+  i as TextWrapper
+};
+//# sourceMappingURL=input-wrapper-styled.js.map

package/dist/features/circle-games/sign-up/comp/input-wrapper/input-wrapper-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-wrapper-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/input-wrapper/input-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const InputWrapper = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n`;\n\nexport const TextWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  position: absolute;\n  top: 50%;\n  transform: translateY(40px);\n`;\n\nexport const SpinnerLottieView = styled.div`\n  position: absolute;\n  bottom: 32px;\n`;\n"],"names":["InputWrapper","styled","TextWrapper","SpinnerLottieView"],"mappings":";AAEO,MAAMA,IAAeC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAStBC,IAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASrBE,IAAoBF,EAAO;AAAA;AAAA;AAAA;"}

package/dist/features/circle-games/sign-up/comp/input-wrapper/input-wrapper.js

@@ -0,0 +1,21 @@
+import { jsxs as e, jsx as r, Fragment as a } from "react/jsx-runtime";
+import d from "react";
+import c from "../../../../ui/text/text.js";
+import { Spinner as h } from "../spinner/spinner.js";
+import { InputWrapper as l, TextWrapper as f, SpinnerLottieView as s } from "./input-wrapper-styled.js";
+const $ = ({ children: t, helperText: n, custEle: i, showSpinner: p }) => /* @__PURE__ */ e(l, { children: [
+  t,
+  /* @__PURE__ */ r(f, { children: /* @__PURE__ */ e(a, { children: [
+    n && /* @__PURE__ */ r(c, { $renderAs: "ab3", $color: "WHITE_70", $align: "center", children: n.split(`
+`).map((o, m) => /* @__PURE__ */ e(d.Fragment, { children: [
+      o,
+      /* @__PURE__ */ r("br", {})
+    ] }, m)) }),
+    i && /* @__PURE__ */ r("div", { children: i })
+  ] }) }),
+  p && /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(h, { height: 20, width: 20 }) })
+] });
+export {
+  $ as InputWrapper
+};
+//# sourceMappingURL=input-wrapper.js.map

package/dist/features/circle-games/sign-up/comp/input-wrapper/input-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-wrapper.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport React from 'react';\n\nimport Text from '../../../../ui/text/text';\nimport { Spinner } from '../spinner/spinner';\nimport * as S from './input-wrapper-styled';\n\ninterface InputWrapperProps {\n  children: ReactElement;\n  helperText?: string;\n  custEle?: ReactNode;\n  showSpinner?: boolean;\n}\n\nexport const InputWrapper = ({ children, helperText, custEle, showSpinner }: InputWrapperProps) => {\n  return (\n    <S.InputWrapper>\n      {children}\n      <S.TextWrapper>\n        <>\n          {helperText && (\n            <Text $renderAs=\"ab3\" $color=\"WHITE_70\" $align=\"center\">\n              {helperText.split('\\n').map((line, index) => (\n                <React.Fragment key={index}>\n                  {line}\n                  <br />\n                </React.Fragment>\n              ))}\n            </Text>\n          )}\n          {custEle && <div>{custEle}</div>}\n        </>\n      </S.TextWrapper>\n      {showSpinner && (\n        <S.SpinnerLottieView>\n          <Spinner height={20} width={20} />\n        </S.SpinnerLottieView>\n      )}\n    </S.InputWrapper>\n  );\n};\n"],"names":["InputWrapper","children","helperText","custEle","showSpinner","jsxs","S.InputWrapper","jsx","S.TextWrapper","Fragment","Text","line","index","React","S.SpinnerLottieView","Spinner"],"mappings":";;;;;AAeO,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,SAAAC,GAAS,aAAAC,QAE1D,gBAAAC,EAACC,GAAA,EACE,UAAA;AAAA,EAAAL;AAAA,EACA,gBAAAM,EAAAC,GAAA,EACC,UACG,gBAAAH,EAAAI,GAAA,EAAA,UAAA;AAAA,IAAAP,uBACEQ,GAAK,EAAA,WAAU,OAAM,QAAO,YAAW,QAAO,UAC5C,UAAAR,EAAW,MAAM;AAAA,CAAI,EAAE,IAAI,CAACS,GAAMC,MAChC,gBAAAP,EAAAQ,EAAM,UAAN,EACE,UAAA;AAAA,MAAAF;AAAA,wBACA,MAAG,EAAA;AAAA,IAAA,KAFeC,CAGrB,CACD,GACH;AAAA,IAEDT,KAAY,gBAAAI,EAAA,OAAA,EAAK,UAAQJ,EAAA,CAAA;AAAA,EAAA,EAAA,CAC5B,EACF,CAAA;AAAA,EACCC,KACE,gBAAAG,EAAAO,GAAA,EACC,UAAC,gBAAAP,EAAAQ,GAAA,EAAQ,QAAQ,IAAI,OAAO,GAAA,CAAI,EAClC,CAAA;AAEJ,EAAA,CAAA;"}

package/dist/features/circle-games/sign-up/comp/select-user-grade/select-user-grade.js

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+import t from "../../../../ui/text/text.js";
+import { WithGrade as p } from "../../../leaderboard/comps/with-grade/with-grade.js";
+import { GradeInput as c } from "../grade-input/grade-input.js";
+import { InputWrapper as i } from "../input-wrapper/input-wrapper.js";
+import { Input as m, SelectUserGradeWrapper as o } from "./select-user-grade.styled.js";
+const G = ({
+  gradeInfo: r,
+  showSpinner: l
+}) => /* @__PURE__ */ e(i, { showSpinner: l, children: r ? r.key !== "13" ? /* @__PURE__ */ e(t, { $renderAs: "ah3", $color: "WHITE", children: r.label }) : /* @__PURE__ */ e(p, { grade: r.key, children: /* @__PURE__ */ e(t, { $renderAs: "ah1", children: r.label }) }) : /* @__PURE__ */ e(
+  m,
+  {
+    placeholder: "or class",
+    defaultValue: r && (r == null ? void 0 : r.key) || ""
+  }
+) }), x = (r) => /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(c, { ...r }) });
+export {
+  G as GradeInputBox,
+  x as SelectUserGrade
+};
+//# sourceMappingURL=select-user-grade.js.map

package/dist/features/circle-games/sign-up/comp/select-user-grade/select-user-grade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-user-grade.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/select-user-grade/select-user-grade.tsx"],"sourcesContent":["import type { Grade, GradeKey, IGradeInputProps } from '../grade-input/grade-input-types';\n\nimport Text from '../../../../ui/text/text';\nimport { WithGrade } from '../../../leaderboard/comps/with-grade/with-grade';\nimport { GradeInput } from '../grade-input/grade-input';\nimport { InputWrapper } from '../input-wrapper/input-wrapper';\nimport * as S from './select-user-grade.styled';\n\n// component shown as custom element inside circular step\nexport const GradeInputBox = ({\n  gradeInfo,\n  showSpinner,\n}: {\n  gradeInfo: Grade | null;\n  showSpinner: boolean;\n}) => {\n  return (\n    <InputWrapper showSpinner={showSpinner}>\n      {gradeInfo ? (\n        gradeInfo.key !== ('13' as GradeKey) ? (\n          <Text $renderAs=\"ah3\" $color=\"WHITE\">\n            {gradeInfo.label}\n          </Text>\n        ) : (\n          <WithGrade grade={gradeInfo.key}>\n            <Text $renderAs=\"ah1\">{gradeInfo.label}</Text>\n          </WithGrade>\n        )\n      ) : (\n        <S.Input\n          placeholder={'or class'}\n          defaultValue={(gradeInfo && (gradeInfo as Grade)?.key) || ''}\n        />\n      )}\n    </InputWrapper>\n  );\n};\n\n// component shown as custom element below circular step\n\nexport const SelectUserGrade = (props: IGradeInputProps) => {\n  return (\n    <S.SelectUserGradeWrapper>\n      <GradeInput {...props} />\n    </S.SelectUserGradeWrapper>\n  );\n};\n"],"names":["GradeInputBox","gradeInfo","showSpinner","jsx","InputWrapper","Text","WithGrade","S.Input","SelectUserGrade","props","S.SelectUserGradeWrapper","GradeInput"],"mappings":";;;;;;AASO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,WAAAC;AAAA,EACA,aAAAC;AACF,MAKK,gBAAAC,EAAAC,GAAA,EAAa,aAAAF,GACX,UAAAD,IACCA,EAAU,QAAS,OACjB,gBAAAE,EAACE,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UAAAJ,EAAU,MACb,CAAA,IAEC,gBAAAE,EAAAG,GAAA,EAAU,OAAOL,EAAU,KAC1B,UAAA,gBAAAE,EAACE,GAAK,EAAA,WAAU,OAAO,UAAAJ,EAAU,MAAM,CAAA,EACzC,CAAA,IAGF,gBAAAE;AAAA,EAACI;AAAAA,EAAA;AAAA,IACC,aAAa;AAAA,IACb,cAAeN,MAAcA,KAAA,gBAAAA,EAAqB,QAAQ;AAAA,EAAA;AAGhE,EAAA,CAAA,GAMSO,IAAkB,CAACC,MAE5B,gBAAAN,EAACO,GAAA,EACC,4BAACC,GAAY,EAAA,GAAGF,GAAO,EACzB,CAAA;"}

package/dist/features/circle-games/sign-up/comp/select-user-grade/select-user-grade.styled.js

@@ -0,0 +1,45 @@
+import o from "styled-components";
+const n = o.input`
+  width: 100%;
+  max-width: 208px;
+  line-height: 34px;
+  text-transform: lowercase;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  font-size: 28px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+  caret-color: ${({ theme: t }) => t.colors.WHITE};
+  color: ${({ theme: t }) => t.colors.WHITE};
+  font-family: 'Athletics-Light';
+  color: ${({ color: t }) => t};
+
+  &::placeholder {
+    font-family: 'Athletics-Light';
+    font-size: 32px;
+  }
+`;
+o.div`
+  transform: translate(1px, -10px);
+`;
+const i = o.div(({ theme: t }) => {
+  const { BLACK: e } = t.colors;
+  return `
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  background: ${e};
+`;
+});
+export {
+  n as Input,
+  i as SelectUserGradeWrapper
+};
+//# sourceMappingURL=select-user-grade.styled.js.map

package/dist/features/circle-games/sign-up/comp/select-user-grade/select-user-grade.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-user-grade.styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/select-user-grade/select-user-grade.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Input = styled.input`\n  width: 100%;\n  max-width: 208px;\n  line-height: 34px;\n  text-transform: lowercase;\n  border: none;\n  outline: none;\n  background-color: transparent;\n  font-size: 28px;\n  margin-top: 20px;\n  margin-bottom: 20px;\n  text-align: center;\n  caret-color: ${({ theme }) => theme.colors.WHITE};\n  color: ${({ theme }) => theme.colors.WHITE};\n  font-family: 'Athletics-Light';\n  color: ${({ color }) => color};\n\n  &::placeholder {\n    font-family: 'Athletics-Light';\n    font-size: 32px;\n  }\n`;\n\nexport const GradeSup = styled.div`\n  transform: translate(1px, -10px);\n`;\n\nexport const SelectUserGradeWrapper = styled.div(({ theme }) => {\n  const { BLACK } = theme.colors;\n\n  return `\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 10;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  background: ${BLACK};\n`;\n});\n"],"names":["Input","styled","theme","color","SelectUserGradeWrapper","BLACK"],"mappings":";AAEO,MAAMA,IAAQC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYX,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,WACvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,WAEjC,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQPF,EAAO;AAAA;AAAA;AAIxB,MAAMG,IAAyBH,EAAO,IAAI,CAAC,EAAE,OAAAC,QAAY;AACxD,QAAA,EAAE,OAAAG,EAAM,IAAIH,EAAM;AAEjB,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASOG,CAAK;AAAA;AAErB,CAAC;"}

package/dist/features/circle-games/sign-up/comp/spinner/spinner-styled.js

@@ -0,0 +1,11 @@
+import n from "styled-components";
+const i = n.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: ${({ marginY: e, marginX: t }) => `${e}px ${t}px`};
+`;
+export {
+  i as SpinnerWrapper
+};
+//# sourceMappingURL=spinner-styled.js.map

package/dist/features/circle-games/sign-up/comp/spinner/spinner-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/spinner/spinner-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const SpinnerWrapper = styled.div<{ marginY: number; marginX: number }>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: ${({ marginY, marginX }) => `${marginY}px ${marginX}px`};\n`;\n"],"names":["SpinnerWrapper","styled","marginY","marginX"],"mappings":";AAEO,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA,YAIzB,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAAc,GAAGD,CAAO,MAAMC,CAAO,IAAI;AAAA;"}

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

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import { LOTTIE as t } from "../../../../../assets/lottie/lottie.js";
+import n from "../../../../ui/lottie-animation/lottie-animation.js";
+import { SpinnerWrapper as e } from "./spinner-styled.js";
+const I = ({ height: o = 24, width: i = 24, marginX: m = 0, marginY: p = 0 }) => /* @__PURE__ */ r(e, { marginX: m, marginY: p, children: /* @__PURE__ */ r(n, { src: t.SPINNER_WHITE, height: o, width: i }) });
+export {
+  I as Spinner
+};
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/spinner/spinner.tsx"],"sourcesContent":["import type { TSpinnerProps } from './spinner-types';\n\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './spinner-styled';\n\nexport const Spinner = ({ height = 24, width = 24, marginX = 0, marginY = 0 }: TSpinnerProps) => (\n  <Styled.SpinnerWrapper marginX={marginX} marginY={marginY}>\n    <LottieAnimation src={LOTTIE.SPINNER_WHITE} height={height} width={width} />\n  </Styled.SpinnerWrapper>\n);\n"],"names":["Spinner","height","width","marginX","marginY","Styled.SpinnerWrapper","jsx","LottieAnimation","LOTTIE"],"mappings":";;;;AAMa,MAAAA,IAAU,CAAC,EAAE,QAAAC,IAAS,IAAI,OAAAC,IAAQ,IAAI,SAAAC,IAAU,GAAG,SAAAC,IAAU,EAAE,wBACzEC,GAAA,EAAsB,SAAAF,GAAkB,SAAAC,GACvC,UAAA,gBAAAE,EAACC,GAAgB,EAAA,KAAKC,EAAO,eAAe,QAAAP,GAAgB,OAAAC,EAAc,CAAA,EAC5E,CAAA;"}

package/dist/features/circle-games/sign-up/comp/splash-screen/splash-screen-styled.js

@@ -0,0 +1,70 @@
+import o, { keyframes as a, css as e } from "styled-components";
+import { CONTAINER_WIDTH as n, CONTAINER_HEIGHT as s } from "../../constants.js";
+const i = a`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`, m = o.div`
+  height: 100%;
+  width: 100%;
+  position: relative;
+`, d = o.div`
+  margin: 23% auto;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  opacity: ${({ isVisible: t }) => t ? 1 : 0};
+  animation: ${({ isVisible: t }) => t ? e`
+          ${i} 500ms ease-in-out
+        ` : "none"};
+`, l = o.img`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  opacity: ${({ isVisible: t }) => t ? 1 : 0};
+  animation: ${({ isVisible: t }) => t ? e`
+          ${i} 500ms ease-in-out
+        ` : "none"};
+`, h = o.div(({ isVisible: t, theme: r }) => e`
+    position: absolute;
+    margin: 0 auto;
+    height: ${n * 0.672}px;
+    width: ${n * 0.672}px;
+    top: ${s * 0.225}px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    border: 1px solid ${r.colors.WHITE};
+    border-radius: 50%;
+    opacity: ${t ? 1 : 0};
+    animation: ${t ? e`
+          ${i} 500ms ease-in-out
+        ` : "none"};
+  `), u = o.div`
+  position: absolute;
+  top: -20px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+  z-index: -10;
+  height: 100%;
+  width: 100%;
+`;
+export {
+  u as CircleLogo,
+  d as CuemathLogoWrapper,
+  h as InnerCircle,
+  l as OuterCircleImage,
+  m as SplashScreenWrapper
+};
+//# sourceMappingURL=splash-screen-styled.js.map

package/dist/features/circle-games/sign-up/comp/splash-screen/splash-screen-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"splash-screen-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/splash-screen/splash-screen-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { CONTAINER_HEIGHT, CONTAINER_WIDTH } from '../../constants';\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const SplashScreenWrapper = styled.div`\n  height: 100%;\n  width: 100%;\n  position: relative;\n`;\n\nexport const CuemathLogoWrapper = styled.div<{ isVisible: boolean }>`\n  margin: 23% auto;\n  z-index: 2;\n  display: flex;\n  justify-content: center;\n  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\n  animation: ${({ isVisible }) =>\n    isVisible\n      ? css`\n          ${fadeIn} 500ms ease-in-out\n        `\n      : 'none'};\n`;\n\nexport const OuterCircleImage = styled.img<{ isVisible: boolean }>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: -1;\n  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\n  animation: ${({ isVisible }) =>\n    isVisible\n      ? css`\n          ${fadeIn} 500ms ease-in-out\n        `\n      : 'none'};\n`;\n\nexport const InnerCircle = styled.div<{ isVisible: boolean }>(({ isVisible, theme }) => {\n  return css`\n    position: absolute;\n    margin: 0 auto;\n    height: ${CONTAINER_WIDTH * 0.672}px;\n    width: ${CONTAINER_WIDTH * 0.672}px;\n    top: ${CONTAINER_HEIGHT * 0.225}px;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    border: 1px solid ${theme.colors.WHITE};\n    border-radius: 50%;\n    opacity: ${isVisible ? 1 : 0};\n    animation: ${isVisible\n      ? css`\n          ${fadeIn} 500ms ease-in-out\n        `\n      : 'none'};\n  `;\n});\n\nexport const CircleLogo = styled.div`\n  position: absolute;\n  top: -20px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  transform: scale(1.5);\n  z-index: -10;\n  height: 100%;\n  width: 100%;\n`;\n"],"names":["fadeIn","keyframes","SplashScreenWrapper","styled","CuemathLogoWrapper","isVisible","css","OuterCircleImage","InnerCircle","theme","CONTAINER_WIDTH","CONTAINER_HEIGHT","CircleLogo"],"mappings":";;AAIA,MAAMA,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASFC,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BC,IAAqBD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAK5B,CAAC,EAAE,WAAAE,EAAA,MAAiBA,IAAY,IAAI,CAAE;AAAA,eACpC,CAAC,EAAE,WAAAA,QACdA,IACIC;AAAA,YACIN,CAAM;AAAA,YAEV,MAAM;AAAA,GAGDO,IAAmBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO1B,CAAC,EAAE,WAAAE,EAAA,MAAiBA,IAAY,IAAI,CAAE;AAAA,eACpC,CAAC,EAAE,WAAAA,QACdA,IACIC;AAAA,YACIN,CAAM;AAAA,YAEV,MAAM;AAAA,GAGDQ,IAAcL,EAAO,IAA4B,CAAC,EAAE,WAAAE,GAAW,OAAAI,QACnEH;AAAA;AAAA;AAAA,cAGKI,IAAkB,KAAK;AAAA,aACxBA,IAAkB,KAAK;AAAA,WACzBC,IAAmB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOXF,EAAM,OAAO,KAAK;AAAA;AAAA,eAE3BJ,IAAY,IAAI,CAAC;AAAA,iBACfA,IACTC;AAAA,YACIN,CAAM;AAAA,YAEV,MAAM;AAAA,GAEb,GAEYY,IAAaT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}