@cuemath/leap 3.0.9 → 3.0.10-aa1

package/dist/features/post-game-stats/digital-meter/digital-meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"digital-meter.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter.tsx"],"sourcesContent":["import type { IDigitalMeterProps } from './digital-meter-types';\nimport type { FC } from 'react';\n\nimport React, { memo, useCallback, useEffect, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport {\n  GAME_LAUNCHER_SIZE,\n  GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport AnimatedArc from '../../ui/animated-arc/animated-arc';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { NumberCountAnimation } from '../number-count-animation/number-count-animation';\nimport {\n  ANIMATED_ARC_START_ANGLE,\n  ARC_RADIUS,\n  PROGRESS_FILL_DELAY,\n  PROGRESS_FILL_DURATION,\n  STROKE_WIDTH,\n  TARGET_ACHIEVED_DELAY,\n  TOTAL_ANIMATION_DURATION,\n  TOTAL_ARC_AVAILABLE,\n} from './constants';\nimport * as Styled from './digital-meter-styled';\n\nexport const DigitalMeter: FC<IDigitalMeterProps> = memo(\n  ({\n    show,\n    value,\n    maxValue,\n    targetValue = 0,\n    displayText,\n    progressType,\n    helperTextPrimary,\n    helperTextSecondary,\n    onComplete,\n    actAsTimer,\n  }) => {\n    const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n    const { play } = useCircleSounds();\n\n    const isTargetValueAchieved = useCallback(\n      (valueToCompare: number) => {\n        if (targetValue) {\n          if (actAsTimer) {\n            return valueToCompare <= targetValue;\n          }\n\n          return valueToCompare >= targetValue;\n        }\n\n        return false;\n      },\n      [targetValue, actAsTimer],\n    );\n\n    useEffect(() => {\n      let timer: ReturnType<typeof setTimeout>;\n      let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n      const isTargetAchievedFlag = isTargetValueAchieved(value);\n\n      if (show) {\n        play(actAsTimer ? CircleSoundKey.TIME_INTRO : CircleSoundKey.ACCURACY_INTRO);\n        play(CircleSoundKey.METER_FILL);\n        if (isTargetAchievedFlag) {\n          timer = setTimeout(() => {\n            play(actAsTimer ? CircleSoundKey.TIME_TARGET : CircleSoundKey.ACCURACY_TARGET);\n            setIsTargetAchieved(true);\n          }, TARGET_ACHIEVED_DELAY * 1000);\n        }\n\n        const timeToFinishAnimation = isTargetAchievedFlag\n          ? TOTAL_ANIMATION_DURATION\n          : TARGET_ACHIEVED_DELAY;\n\n        timerForAnimationComplete = setTimeout(() => {\n          onComplete();\n        }, timeToFinishAnimation * 1000);\n      }\n\n      return () => {\n        timer && clearTimeout(timer);\n        timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n      };\n    }, [show, value, onComplete, isTargetValueAchieved, actAsTimer, play]);\n\n    if (!show) return null;\n\n    return (\n      <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n        {/* complete arc area to be filled */}\n        <AnimatedArc\n          targetAngle={TOTAL_ARC_AVAILABLE}\n          strokeWidth={STROKE_WIDTH}\n          color=\"BLACK_5\"\n          radius={ARC_RADIUS}\n          duration={0}\n          startAngle={-ANIMATED_ARC_START_ANGLE}\n        />\n\n        {/* center area for the content */}\n        <Styled.ContentContainer>\n          <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n            <FlexView $flexDirection=\"row\" $alignItems=\"flex-end\">\n              <Styled.NumberCountContainer>\n                <Styled.RainboxColorText\n                  $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah1' : 'ah2'}\n                  $color=\"GREEN_4\"\n                  $isTargetAchieved={isTargetAchieved}\n                >\n                  <NumberCountAnimation\n                    initialValue={0}\n                    targetValue={Math.floor(value)}\n                    durationInSec={PROGRESS_FILL_DURATION}\n                    delayInSec={PROGRESS_FILL_DELAY}\n                  />\n                </Styled.RainboxColorText>\n              </Styled.NumberCountContainer>\n              {progressType === 'stepper' && (\n                <Text\n                  $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n                  $color=\"WHITE\"\n                >\n                  /{maxValue}\n                </Text>\n              )}\n            </FlexView>\n            <Separator height={8} />\n            <Text\n              $renderAs={\n                GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n              }\n              $color=\"WHITE_T_60\"\n            >\n              {displayText}\n            </Text>\n          </FlexView>\n        </Styled.ContentContainer>\n\n        {/* stepper animation */}\n        {progressType === 'stepper' &&\n          Array.from({ length: value }, (_, index) => {\n            const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n            return (\n              <AnimatedArc\n                key={index}\n                startAngle={-ANIMATED_ARC_START_ANGLE + arcLength * index}\n                targetAngle={arcLength}\n                strokeWidth={STROKE_WIDTH}\n                color=\"GREEN_4\"\n                radius={ARC_RADIUS}\n                mode=\"fade\"\n                duration={PROGRESS_FILL_DURATION / maxValue}\n                delay={PROGRESS_FILL_DELAY + (PROGRESS_FILL_DURATION / maxValue) * index}\n                showAnimatedRainbowArc={isTargetAchieved}\n              />\n            );\n          })}\n\n        {/* numbers with markings */}\n        {progressType === 'stepper' &&\n          Array.from({ length: maxValue + 1 }, (_, index) => {\n            const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n            return (\n              <React.Fragment key={index}>\n                <Styled.LineMarking $angle={arcLength * index} />\n                <Styled.MarkingContainer key={index} $angle={arcLength * index}>\n                  <Styled.MarkingText $angle={arcLength * index}>\n                    <Styled.RainboxColorText\n                      $renderAs={\n                        GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n                      }\n                      $color={targetValue && targetValue === index ? 'GREEN_4' : 'WHITE_T_60'}\n                      $isTargetAchieved={\n                        targetValue === index && isTargetValueAchieved(index) && isTargetAchieved\n                      }\n                    >\n                      {index}\n                    </Styled.RainboxColorText>\n                  </Styled.MarkingText>\n                </Styled.MarkingContainer>\n              </React.Fragment>\n            );\n          })}\n\n        {/* progress of linear */}\n        {progressType === 'linear' && (\n          <>\n            <AnimatedArc\n              targetAngle={(value * TOTAL_ARC_AVAILABLE) / maxValue}\n              strokeWidth={STROKE_WIDTH}\n              color=\"GREEN_4\"\n              radius={ARC_RADIUS}\n              duration={PROGRESS_FILL_DURATION}\n              delay={PROGRESS_FILL_DELAY}\n              showAnimatedRainbowArc={isTargetAchieved}\n              startAngle={-ANIMATED_ARC_START_ANGLE}\n            />\n            <>\n              {/* target line marking */}\n              {targetValue && (\n                <Styled.LineMarking $angle={(targetValue * TOTAL_ARC_AVAILABLE) / maxValue} />\n              )}\n\n              {/* all markings */}\n              {Array.from(new Set([0, targetValue, maxValue])).map((val, index) => (\n                <Styled.MarkingContainer\n                  key={index}\n                  $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}\n                >\n                  <Styled.MarkingText $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}>\n                    <Styled.RainboxColorText\n                      $renderAs={\n                        GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n                      }\n                      $color={targetValue && targetValue === val ? 'GREEN_4' : 'WHITE_T_60'}\n                      $isTargetAchieved={\n                        targetValue === val && isTargetAchieved && isTargetValueAchieved(val)\n                      }\n                    >\n                      {val}\n                    </Styled.RainboxColorText>\n                  </Styled.MarkingText>\n                </Styled.MarkingContainer>\n              ))}\n            </>\n          </>\n        )}\n\n        {/* helper text below the animation */}\n        {isTargetAchieved && (\n          <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n            <LottieAnimation src={LOTTIE.TARGET_ACHIEVED_TEXT} />\n          </Styled.BottomAbsoluteView>\n        )}\n        {!isTargetAchieved && (\n          <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n            <Separator height={25} />\n            <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n              <Styled.HelperTextPrimary\n                $renderAs={\n                  GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n                }\n                $color=\"WHITE_T_60\"\n              >\n                {helperTextPrimary}\n                <Separator height={GAME_LAUNCHER_SIZE * 0.03} />\n              </Styled.HelperTextPrimary>\n              <Styled.HelperTextSecondary\n                $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n                $color=\"WHITE\"\n              >\n                {helperTextSecondary}\n              </Styled.HelperTextSecondary>\n            </FlexView>\n          </Styled.BottomAbsoluteView>\n        )}\n      </Styled.DigitalMeter>\n    );\n  },\n);\n"],"names":["DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","actAsTimer","isTargetAchieved","setIsTargetAchieved","useState","play","useCircleSounds","isTargetValueAchieved","useCallback","valueToCompare","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","CircleSoundKey","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","STROKE_WIDTH","ARC_RADIUS","ANIMATED_ARC_START_ANGLE","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","React","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","Fragment","val","Styled.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":";;;;;;;;;;;;;;AA8BO,MAAMA,KAAuCC;AAAA,EAClD,CAAC;AAAA,IACC,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,MACI;AACJ,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAS,EAAK,GACxD,EAAE,MAAAC,MAASC,KAEXC,IAAwBC;AAAA,MAC5B,CAACC,MACKd,IACEM,IACKQ,KAAkBd,IAGpBc,KAAkBd,IAGpB;AAAA,MAET,CAACA,GAAaM,CAAU;AAAA,IAAA;AAiCtB,WA9BJS,EAAU,MAAM;AACV,UAAAC,GACAC;AACE,YAAAC,IAAuBN,EAAsBd,CAAK;AAExD,aAAID,MACFa,EAAKJ,IAAaa,EAAe,aAAaA,EAAe,cAAc,GAC3ET,EAAKS,EAAe,UAAU,GAC1BD,MACFF,IAAQ,WAAW,MAAM;AACvB,QAAAN,EAAKJ,IAAaa,EAAe,cAAcA,EAAe,eAAe,GAC7EX,EAAoB,EAAI;AAAA,MAAA,GACvBY,IAAwB,GAAI,IAOjCH,IAA4B,WAAW,MAAM;AAChC,QAAAZ;MAAA,IALiBa,IAC1BG,IACAD,KAIuB,GAAI,IAG1B,MAAM;AACX,QAAAJ,KAAS,aAAaA,CAAK,GAC3BC,KAA6B,aAAaA,CAAyB;AAAA,MAAA;AAAA,IACrE,GACC,CAACpB,GAAMC,GAAOO,GAAYO,GAAuBN,GAAYI,CAAI,CAAC,GAEhEb,IAGF,gBAAAyB,EAAAC,GAAA,EAAoB,mBAAmBhB,GAEtC,UAAA;AAAA,MAAA,gBAAAiB;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAaC;AAAA,UACb,aAAaC;AAAA,UACb,OAAM;AAAA,UACN,QAAQC;AAAA,UACR,UAAU;AAAA,UACV,YAAY,CAACC;AAAA,QAAA;AAAA,MACf;AAAA,MAGA,gBAAAL,EAACM,GAAA,EACC,4BAACC,GAAS,EAAA,gBAAe,UAAS,aAAY,UAC5C,UAAA;AAAA,QAAA,gBAAAT,EAACS,GAAS,EAAA,gBAAe,OAAM,aAAY,YACzC,UAAA;AAAA,UAAC,gBAAAP,EAAAQ,GAAA,EACC,UAAA,gBAAAR;AAAA,YAACS;AAAAA,YAAA;AAAA,cACC,WAAWC,MAAuBC,IAA2B,QAAQ;AAAA,cACrE,QAAO;AAAA,cACP,mBAAmB5B;AAAA,cAEnB,UAAA,gBAAAiB;AAAA,gBAACY;AAAA,gBAAA;AAAA,kBACC,cAAc;AAAA,kBACd,aAAa,KAAK,MAAMtC,CAAK;AAAA,kBAC7B,eAAeuC;AAAA,kBACf,YAAYC;AAAA,gBAAA;AAAA,cACd;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACCpC,MAAiB,aAChB,gBAAAoB;AAAA,YAACiB;AAAA,YAAA;AAAA,cACC,WAAWL,MAAuBC,IAA2B,QAAQ;AAAA,cACrE,QAAO;AAAA,cACR,UAAA;AAAA,gBAAA;AAAA,gBACGpC;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAyB,EAACgB,GAAU,EAAA,QAAQ,EAAG,CAAA;AAAA,QACtB,gBAAAhB;AAAA,UAACe;AAAA,UAAA;AAAA,YACC,WACEL,MAAuBC,IAA2B,cAAc;AAAA,YAElE,QAAO;AAAA,YAEN,UAAAlC;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,EAAA,CACF,EACF,CAAA;AAAA,MAGCC,MAAiB,aAChB,MAAM,KAAK,EAAE,QAAQJ,EAAM,GAAG,CAAC2C,GAAGC,MAAU;AAC1C,cAAMC,IAAYjB,IAAsB3B;AAGtC,eAAA,gBAAAyB;AAAA,UAACC;AAAA,UAAA;AAAA,YAEC,YAAY,CAACI,IAA2Bc,IAAYD;AAAA,YACpD,aAAaC;AAAA,YACb,aAAahB;AAAA,YACb,OAAM;AAAA,YACN,QAAQC;AAAA,YACR,MAAK;AAAA,YACL,UAAUS,IAAyBtC;AAAA,YACnC,OAAOuC,IAAuBD,IAAyBtC,IAAY2C;AAAA,YACnE,wBAAwBnC;AAAA,UAAA;AAAA,UATnBmC;AAAA,QAAA;AAAA,MAUP,CAEH;AAAA,MAGFxC,MAAiB,aAChB,MAAM,KAAK,EAAE,QAAQH,IAAW,EAAE,GAAG,CAAC0C,GAAGC,MAAU;AACjD,cAAMC,IAAYjB,IAAsB3B;AAGtC,eAAA,gBAAAuB,EAACsB,EAAM,UAAN,EACC,UAAA;AAAA,UAAA,gBAAApB,EAACqB,GAAA,EAAmB,QAAQF,IAAYD,EAAO,CAAA;AAAA,UAC9C,gBAAAlB,EAAAsB,GAAA,EAAoC,QAAQH,IAAYD,GACvD,UAAA,gBAAAlB,EAACuB,GAAA,EAAmB,QAAQJ,IAAYD,GACtC,UAAA,gBAAAlB;AAAA,YAACS;AAAAA,YAAA;AAAA,cACC,WACEC,MAAuBC,IAA2B,cAAc;AAAA,cAElE,QAAQnC,KAAeA,MAAgB0C,IAAQ,YAAY;AAAA,cAC3D,mBACE1C,MAAgB0C,KAAS9B,EAAsB8B,CAAK,KAAKnC;AAAA,cAG1D,UAAAmC;AAAA,YAAA;AAAA,UAAA,EAEL,CAAA,KAb4BA,CAc9B;AAAA,QAAA,EAAA,GAhBmBA,CAiBrB;AAAA,MAAA,CAEH;AAAA,MAGFxC,MAAiB,YAEd,gBAAAoB,EAAA0B,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAxB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAc3B,IAAQ4B,IAAuB3B;AAAA,YAC7C,aAAa4B;AAAA,YACb,OAAM;AAAA,YACN,QAAQC;AAAA,YACR,UAAUS;AAAA,YACV,OAAOC;AAAA,YACP,wBAAwB/B;AAAA,YACxB,YAAY,CAACsB;AAAA,UAAA;AAAA,QACf;AAAA,QAGG,gBAAAP,EAAA0B,GAAA,EAAA,UAAA;AAAA,UAAAhD,uBACE6C,GAAA,EAAmB,QAAS7C,IAAc0B,IAAuB3B,GAAU;AAAA,UAI7E,MAAM,KAAS,oBAAA,IAAI,CAAC,GAAGC,GAAaD,CAAQ,CAAC,CAAC,EAAE,IAAI,CAACkD,GAAKP,MACzD,gBAAAlB;AAAA,YAACsB;AAAAA,YAAA;AAAA,cAEC,QAASG,IAAMvB,IAAuB3B;AAAA,cAEtC,4BAACgD,GAAA,EAAmB,QAASE,IAAMvB,IAAuB3B,GACxD,UAAA,gBAAAyB;AAAA,gBAACS;AAAAA,gBAAA;AAAA,kBACC,WACEC,MAAuBC,IAA2B,cAAc;AAAA,kBAElE,QAAQnC,KAAeA,MAAgBiD,IAAM,YAAY;AAAA,kBACzD,mBACEjD,MAAgBiD,KAAO1C,KAAoBK,EAAsBqC,CAAG;AAAA,kBAGrE,UAAAA;AAAA,gBAAA;AAAA,cAAA,GAEL;AAAA,YAAA;AAAA,YAfKP;AAAA,UAAA,CAiBR;AAAA,QAAA,GACH;AAAA,MAAA,GACF;AAAA,MAIDnC,KACC,gBAAAiB,EAAC0B,GAAA,EAA0B,KAAKhB,GAC9B,UAAA,gBAAAV,EAAC2B,GAAgB,EAAA,KAAKC,EAAO,qBAAA,CAAsB,EACrD,CAAA;AAAA,MAED,CAAC7C,KACA,gBAAAe,EAAC4B,GAAA,EAA0B,KAAKhB,GAC9B,UAAA;AAAA,QAAC,gBAAAV,EAAAgB,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,QACtB,gBAAAlB,EAAAS,GAAA,EAAS,gBAAe,UAAS,aAAY,UAC5C,UAAA;AAAA,UAAA,gBAAAT;AAAA,YAAC+B;AAAAA,YAAA;AAAA,cACC,WACEnB,MAAuBC,IAA2B,cAAc;AAAA,cAElE,QAAO;AAAA,cAEN,UAAA;AAAA,gBAAAhC;AAAA,gBACA,gBAAAqB,EAAAgB,GAAA,EAAU,QAAQN,IAAqB,KAAM,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAChD;AAAA,UACA,gBAAAV;AAAA,YAAC8B;AAAAA,YAAA;AAAA,cACC,WAAWpB,MAAuBC,IAA2B,QAAQ;AAAA,cACrE,QAAO;AAAA,cAEN,UAAA/B;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,GACF;AAAA,MAAA,GACF;AAAA,IAEJ,EAAA,CAAA,IA7KgB;AAAA,EA+KpB;AACF;"}
+{"version":3,"file":"digital-meter.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter.tsx"],"sourcesContent":["import type { IDigitalMeterProps } from './digital-meter-types';\nimport type { FC } from 'react';\n\nimport React, { memo, useCallback, useEffect, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport {\n  GAME_LAUNCHER_SIZE,\n  GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums';\nimport AnimatedArc from '../../ui/animated-arc/animated-arc';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { NumberCountAnimation } from '../number-count-animation/number-count-animation';\nimport {\n  ANIMATED_ARC_START_ANGLE,\n  ARC_RADIUS,\n  PROGRESS_FILL_DELAY,\n  PROGRESS_FILL_DURATION,\n  STROKE_WIDTH,\n  TARGET_ACHIEVED_DELAY,\n  TOTAL_ANIMATION_DURATION,\n  TOTAL_ARC_AVAILABLE,\n} from './constants';\nimport * as Styled from './digital-meter-styled';\n\nconst settings = {\n  renderer: 'canvas',\n};\n\nexport const DigitalMeter: FC<IDigitalMeterProps> = memo(\n  ({\n    show,\n    value,\n    maxValue,\n    targetValue = 0,\n    displayText,\n    progressType,\n    helperTextPrimary,\n    helperTextSecondary,\n    onComplete,\n    actAsTimer,\n  }) => {\n    const [isTargetAchieved, setIsTargetAchieved] = useState(false);\n    const { play } = useCircleSounds();\n\n    const isTargetValueAchieved = useCallback(\n      (valueToCompare: number) => {\n        if (targetValue) {\n          if (actAsTimer) {\n            return valueToCompare <= targetValue;\n          }\n\n          return valueToCompare >= targetValue;\n        }\n\n        return false;\n      },\n      [targetValue, actAsTimer],\n    );\n\n    useEffect(() => {\n      let timer: ReturnType<typeof setTimeout>;\n      let timerForAnimationComplete: ReturnType<typeof setTimeout>;\n      const isTargetAchievedFlag = isTargetValueAchieved(value);\n\n      if (show) {\n        play(actAsTimer ? CircleSoundKey.TIME_INTRO : CircleSoundKey.ACCURACY_INTRO);\n        play(CircleSoundKey.METER_FILL);\n        if (isTargetAchievedFlag) {\n          timer = setTimeout(() => {\n            play(actAsTimer ? CircleSoundKey.TIME_TARGET : CircleSoundKey.ACCURACY_TARGET);\n            setIsTargetAchieved(true);\n          }, TARGET_ACHIEVED_DELAY * 1000);\n        }\n\n        const timeToFinishAnimation = isTargetAchievedFlag\n          ? TOTAL_ANIMATION_DURATION\n          : TARGET_ACHIEVED_DELAY;\n\n        timerForAnimationComplete = setTimeout(() => {\n          onComplete();\n        }, timeToFinishAnimation * 1000);\n      }\n\n      return () => {\n        timer && clearTimeout(timer);\n        timerForAnimationComplete && clearTimeout(timerForAnimationComplete);\n      };\n    }, [show, value, onComplete, isTargetValueAchieved, actAsTimer, play]);\n\n    if (!show) return null;\n\n    return (\n      <Styled.DigitalMeter $isTargetAchieved={isTargetAchieved}>\n        {/* complete arc area to be filled */}\n        <AnimatedArc\n          targetAngle={TOTAL_ARC_AVAILABLE}\n          strokeWidth={STROKE_WIDTH}\n          color=\"BLACK_5\"\n          radius={ARC_RADIUS}\n          duration={0}\n          startAngle={-ANIMATED_ARC_START_ANGLE}\n        />\n\n        {/* center area for the content */}\n        <Styled.ContentContainer>\n          <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n            <FlexView $flexDirection=\"row\" $alignItems=\"flex-end\">\n              <Styled.NumberCountContainer>\n                <Styled.RainboxColorText\n                  $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah1' : 'ah2'}\n                  $color=\"GREEN_4\"\n                  $isTargetAchieved={isTargetAchieved}\n                >\n                  <NumberCountAnimation\n                    initialValue={0}\n                    targetValue={Math.floor(value)}\n                    durationInSec={PROGRESS_FILL_DURATION}\n                    delayInSec={PROGRESS_FILL_DELAY}\n                  />\n                </Styled.RainboxColorText>\n              </Styled.NumberCountContainer>\n              {progressType === 'stepper' && (\n                <Text\n                  $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n                  $color=\"WHITE\"\n                >\n                  /{maxValue}\n                </Text>\n              )}\n            </FlexView>\n            <Separator height={8} />\n            <Text\n              $renderAs={\n                GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n              }\n              $color=\"WHITE_T_60\"\n            >\n              {displayText}\n            </Text>\n          </FlexView>\n        </Styled.ContentContainer>\n\n        {/* stepper animation */}\n        {progressType === 'stepper' &&\n          Array.from({ length: value }, (_, index) => {\n            const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n            return (\n              <AnimatedArc\n                key={index}\n                startAngle={-ANIMATED_ARC_START_ANGLE + arcLength * index}\n                targetAngle={arcLength}\n                strokeWidth={STROKE_WIDTH}\n                color=\"GREEN_4\"\n                radius={ARC_RADIUS}\n                mode=\"fade\"\n                duration={PROGRESS_FILL_DURATION / maxValue}\n                delay={PROGRESS_FILL_DELAY + (PROGRESS_FILL_DURATION / maxValue) * index}\n                showAnimatedRainbowArc={isTargetAchieved}\n              />\n            );\n          })}\n\n        {/* numbers with markings */}\n        {progressType === 'stepper' &&\n          Array.from({ length: maxValue + 1 }, (_, index) => {\n            const arcLength = TOTAL_ARC_AVAILABLE / maxValue;\n\n            return (\n              <React.Fragment key={index}>\n                <Styled.LineMarking $angle={arcLength * index} />\n                <Styled.MarkingContainer key={index} $angle={arcLength * index}>\n                  <Styled.MarkingText $angle={arcLength * index}>\n                    <Styled.RainboxColorText\n                      $renderAs={\n                        GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n                      }\n                      $color={targetValue && targetValue === index ? 'GREEN_4' : 'WHITE_T_60'}\n                      $isTargetAchieved={\n                        targetValue === index && isTargetValueAchieved(index) && isTargetAchieved\n                      }\n                    >\n                      {index}\n                    </Styled.RainboxColorText>\n                  </Styled.MarkingText>\n                </Styled.MarkingContainer>\n              </React.Fragment>\n            );\n          })}\n\n        {/* progress of linear */}\n        {progressType === 'linear' && (\n          <>\n            <AnimatedArc\n              targetAngle={(value * TOTAL_ARC_AVAILABLE) / maxValue}\n              strokeWidth={STROKE_WIDTH}\n              color=\"GREEN_4\"\n              radius={ARC_RADIUS}\n              duration={PROGRESS_FILL_DURATION}\n              delay={PROGRESS_FILL_DELAY}\n              showAnimatedRainbowArc={isTargetAchieved}\n              startAngle={-ANIMATED_ARC_START_ANGLE}\n            />\n            <>\n              {/* target line marking */}\n              {targetValue && (\n                <Styled.LineMarking $angle={(targetValue * TOTAL_ARC_AVAILABLE) / maxValue} />\n              )}\n\n              {/* all markings */}\n              {Array.from(new Set([0, targetValue, maxValue])).map((val, index) => (\n                <Styled.MarkingContainer\n                  key={index}\n                  $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}\n                >\n                  <Styled.MarkingText $angle={(val * TOTAL_ARC_AVAILABLE) / maxValue}>\n                    <Styled.RainboxColorText\n                      $renderAs={\n                        GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n                      }\n                      $color={targetValue && targetValue === val ? 'GREEN_4' : 'WHITE_T_60'}\n                      $isTargetAchieved={\n                        targetValue === val && isTargetAchieved && isTargetValueAchieved(val)\n                      }\n                    >\n                      {val}\n                    </Styled.RainboxColorText>\n                  </Styled.MarkingText>\n                </Styled.MarkingContainer>\n              ))}\n            </>\n          </>\n        )}\n\n        {/* helper text below the animation */}\n        {isTargetAchieved && (\n          <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n            <LottieAnimation\n              src={LOTTIE.TARGET_ACHIEVED_TEXT}\n              settings={settings}\n              width={GAME_LAUNCHER_SIZE * 0.6}\n            />\n          </Styled.BottomAbsoluteView>\n        )}\n        {!isTargetAchieved && (\n          <Styled.BottomAbsoluteView top={GAME_LAUNCHER_SIZE}>\n            <Separator height={25} />\n            <FlexView $flexDirection=\"column\" $alignItems=\"center\">\n              <Styled.HelperTextPrimary\n                $renderAs={\n                  GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ac4-black'\n                }\n                $color=\"WHITE_T_60\"\n              >\n                {helperTextPrimary}\n                <Separator height={GAME_LAUNCHER_SIZE * 0.03} />\n              </Styled.HelperTextPrimary>\n              <Styled.HelperTextSecondary\n                $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ah4' : 'ab1'}\n                $color=\"WHITE\"\n              >\n                {helperTextSecondary}\n              </Styled.HelperTextSecondary>\n            </FlexView>\n          </Styled.BottomAbsoluteView>\n        )}\n      </Styled.DigitalMeter>\n    );\n  },\n);\n"],"names":["settings","DigitalMeter","memo","show","value","maxValue","targetValue","displayText","progressType","helperTextPrimary","helperTextSecondary","onComplete","actAsTimer","isTargetAchieved","setIsTargetAchieved","useState","play","useCircleSounds","isTargetValueAchieved","useCallback","valueToCompare","useEffect","timer","timerForAnimationComplete","isTargetAchievedFlag","CircleSoundKey","TARGET_ACHIEVED_DELAY","TOTAL_ANIMATION_DURATION","jsxs","Styled.DigitalMeter","jsx","AnimatedArc","TOTAL_ARC_AVAILABLE","STROKE_WIDTH","ARC_RADIUS","ANIMATED_ARC_START_ANGLE","Styled.ContentContainer","FlexView","Styled.NumberCountContainer","Styled.RainboxColorText","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","NumberCountAnimation","PROGRESS_FILL_DURATION","PROGRESS_FILL_DELAY","Text","Separator","_","index","arcLength","React","Styled.LineMarking","Styled.MarkingContainer","Styled.MarkingText","Fragment","val","Styled.BottomAbsoluteView","LottieAnimation","LOTTIE","Styled.HelperTextPrimary","Styled.HelperTextSecondary"],"mappings":"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"}

package/dist/features/ui/animated-arc/animated-arc.js

@@ -8,8 +8,8 @@ const b = ({
   color: y,
   targetAngle: a,
   startAngle: c = 0,
-  duration: o = 2,
-  mode: s = "draw",
+  duration: s = 2,
+  mode: o = "draw",
   delay: n = 0,
   showAnimatedRainbowArc: $ = !1
 }) => {
@@ -20,17 +20,17 @@ const b = ({
   return g(() => {
     const t = f.current;
     if (t) {
-      if (s === "draw") {
+      if (o === "draw") {
         const m = t.getTotalLength();
         t.style.strokeDasharray = `${m}`, t.style.strokeDashoffset = `${m}`, t.getBoundingClientRect(), requestAnimationFrame(() => {
-          t.style.transition = `stroke-dashoffset ${o}s linear ${n}s`, t.style.strokeDashoffset = "0";
+          t.style.transition = `stroke-dashoffset ${s}s linear ${n}s`, t.style.strokeDashoffset = "0";
         });
       }
-      s === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
-        t.style.transition = `opacity ${o} ease-in-out ${n}s`, t.style.opacity = "1";
+      o === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
+        t.style.transition = `opacity ${s}s ease-in-out ${n}s`, t.style.opacity = "1";
       }));
     }
-  }, [h, s, o, n]), /* @__PURE__ */ p(R, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ p(
+  }, [h, o, s, n]), /* @__PURE__ */ p(R, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ p(
     k,
     {
       ref: f,

package/dist/features/ui/animated-arc/animated-arc.js.map

@@ -1 +1 @@
-{"version":3,"file":"animated-arc.js","sources":["../../../../src/features/ui/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect, useMemo } from 'react';\n\nimport { describeArc } from './animated-arc-helpers';\nimport * as Styled from './animated-arc-styled';\n\nconst AnimatedArc: React.FC<IAnimatedArcProps> = ({\n  radius,\n  strokeWidth,\n  color,\n  targetAngle,\n  startAngle = 0,\n  duration = 2,\n  mode = 'draw',\n  delay = 0,\n  showAnimatedRainbowArc = false,\n}) => {\n  const pathRef = useRef<SVGPathElement>(null);\n\n  const center = radius;\n  const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n  const arcPath = useMemo(\n    () => describeArc(center, center, arcRadius, startAngle, targetAngle),\n    [targetAngle, startAngle, arcRadius, center],\n  );\n\n  useLayoutEffect(() => {\n    const path = pathRef.current;\n\n    if (!path) return;\n\n    if (mode === 'draw') {\n      const length = path.getTotalLength();\n\n      path.style.strokeDasharray = `${length}`;\n      path.style.strokeDashoffset = `${length}`;\n      path.getBoundingClientRect();\n\n      requestAnimationFrame(() => {\n        path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n        path.style.strokeDashoffset = '0';\n      });\n    }\n\n    if (mode === 'fade') {\n      path.style.opacity = '0';\n      path.getBoundingClientRect();\n\n      requestAnimationFrame(() => {\n        path.style.transition = `opacity ${duration} ease-in-out ${delay}s`;\n        path.style.opacity = '1';\n      });\n    }\n  }, [arcPath, mode, duration, delay]);\n\n  return (\n    <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n      <Styled.Path\n        ref={pathRef}\n        d={arcPath}\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"butt\"\n        $showAnimatedRainbowArc={showAnimatedRainbowArc}\n      />\n    </Styled.Svg>\n  );\n};\n\nexport default AnimatedArc;\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","showAnimatedRainbowArc","pathRef","useRef","center","arcRadius","arcPath","useMemo","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path","AnimatedArc$1"],"mappings":";;;;AAOA,MAAMA,IAA2C,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,wBAAAC,IAAyB;AAC3B,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAASX,GACTY,IAAYZ,IAASC,IAAc,GACnCY,IAAUC;AAAA,IACd,MAAMC,EAAYJ,GAAQA,GAAQC,GAAWR,GAAYD,CAAW;AAAA,IACpE,CAACA,GAAaC,GAAYQ,GAAWD,CAAM;AAAA,EAAA;AAG7C,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAAOR,EAAQ;AAErB,QAAKQ,GAEL;AAAA,UAAIX,MAAS,QAAQ;AACb,cAAAY,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBZ,CAAQ,YAAYE,CAAK,KACtEU,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIX,MAAS,WACXW,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,QAAAA,EAAK,MAAM,aAAa,WAAWZ,CAAQ,gBAAgBE,CAAK,KAChEU,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACJ,GAASP,GAAMD,GAAUE,CAAK,CAAC,qBAGhCY,GAAA,EAAW,OAAO,IAAInB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAoB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKZ;AAAA,MACL,GAAGI;AAAA,MACH,MAAK;AAAA,MACL,QAAQX;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,yBAAyBO;AAAA,IAAA;AAAA,EAE7B,EAAA,CAAA;AAEJ,GAEAc,IAAevB;"}
+{"version":3,"file":"animated-arc.js","sources":["../../../../src/features/ui/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect, useMemo } from 'react';\n\nimport { describeArc } from './animated-arc-helpers';\nimport * as Styled from './animated-arc-styled';\n\nconst AnimatedArc: React.FC<IAnimatedArcProps> = ({\n  radius,\n  strokeWidth,\n  color,\n  targetAngle,\n  startAngle = 0,\n  duration = 2,\n  mode = 'draw',\n  delay = 0,\n  showAnimatedRainbowArc = false,\n}) => {\n  const pathRef = useRef<SVGPathElement>(null);\n\n  const center = radius;\n  const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n  const arcPath = useMemo(\n    () => describeArc(center, center, arcRadius, startAngle, targetAngle),\n    [targetAngle, startAngle, arcRadius, center],\n  );\n\n  useLayoutEffect(() => {\n    const path = pathRef.current;\n\n    if (!path) return;\n\n    if (mode === 'draw') {\n      const length = path.getTotalLength();\n\n      path.style.strokeDasharray = `${length}`;\n      path.style.strokeDashoffset = `${length}`;\n      path.getBoundingClientRect();\n\n      requestAnimationFrame(() => {\n        path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n        path.style.strokeDashoffset = '0';\n      });\n    }\n\n    if (mode === 'fade') {\n      path.style.opacity = '0';\n      path.getBoundingClientRect();\n\n      requestAnimationFrame(() => {\n        path.style.transition = `opacity ${duration}s ease-in-out ${delay}s`;\n        path.style.opacity = '1';\n      });\n    }\n  }, [arcPath, mode, duration, delay]);\n\n  return (\n    <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n      <Styled.Path\n        ref={pathRef}\n        d={arcPath}\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"butt\"\n        $showAnimatedRainbowArc={showAnimatedRainbowArc}\n      />\n    </Styled.Svg>\n  );\n};\n\nexport default AnimatedArc;\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","showAnimatedRainbowArc","pathRef","useRef","center","arcRadius","arcPath","useMemo","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path","AnimatedArc$1"],"mappings":";;;;AAOA,MAAMA,IAA2C,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,wBAAAC,IAAyB;AAC3B,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAASX,GACTY,IAAYZ,IAASC,IAAc,GACnCY,IAAUC;AAAA,IACd,MAAMC,EAAYJ,GAAQA,GAAQC,GAAWR,GAAYD,CAAW;AAAA,IACpE,CAACA,GAAaC,GAAYQ,GAAWD,CAAM;AAAA,EAAA;AAG7C,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAAOR,EAAQ;AAErB,QAAKQ,GAEL;AAAA,UAAIX,MAAS,QAAQ;AACb,cAAAY,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBZ,CAAQ,YAAYE,CAAK,KACtEU,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIX,MAAS,WACXW,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,QAAAA,EAAK,MAAM,aAAa,WAAWZ,CAAQ,iBAAiBE,CAAK,KACjEU,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACJ,GAASP,GAAMD,GAAUE,CAAK,CAAC,qBAGhCY,GAAA,EAAW,OAAO,IAAInB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAoB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKZ;AAAA,MACL,GAAGI;AAAA,MACH,MAAK;AAAA,MACL,QAAQX;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,yBAAyBO;AAAA,IAAA;AAAA,EAE7B,EAAA,CAAA;AAEJ,GAEAc,IAAevB;"}

package/dist/features/ui/loader/circular-loader/circular-loader.js

@@ -1,19 +1,21 @@
 import { jsx as t } from "react/jsx-runtime";
 import { LOTTIE as r } from "../../../../assets/lottie/lottie.js";
-import i from "../../layout/flex-view.js";
-import o from "../../lottie-animation/lottie-animation.js";
-const h = () => /* @__PURE__ */ t(
-  i,
+import e from "../../layout/flex-view.js";
+import i from "../../lottie-animation/lottie-animation.js";
+const o = {
+  renderer: "canvas"
+}, a = () => /* @__PURE__ */ t(
+  e,
   {
     $width: "100%",
     $height: "100%",
     $alignItems: "center",
     $justifyContent: "center",
     $background: "TRANSPARENT",
-    children: /* @__PURE__ */ t(o, { width: "50%", height: "50%", src: r.CIRCULAR_LOADER })
+    children: /* @__PURE__ */ t(i, { width: "50%", height: "50%", src: r.CIRCULAR_LOADER, settings: o })
   }
 );
 export {
-  h as CircularLoader
+  a as CircularLoader
 };
 //# sourceMappingURL=circular-loader.js.map

package/dist/features/ui/loader/circular-loader/circular-loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-loader.js","sources":["../../../../../src/features/ui/loader/circular-loader/circular-loader.tsx"],"sourcesContent":["import { LOTTIE } from '../../../../assets/lottie/lottie';\nimport FlexView from '../../layout/flex-view';\nimport LottieAnimation from '../../lottie-animation/lottie-animation';\n\nexport const CircularLoader = () => (\n  <FlexView\n    $width=\"100%\"\n    $height=\"100%\"\n    $alignItems=\"center\"\n    $justifyContent=\"center\"\n    $background=\"TRANSPARENT\"\n  >\n    <LottieAnimation width=\"50%\" height=\"50%\" src={LOTTIE.CIRCULAR_LOADER} />\n  </FlexView>\n);\n"],"names":["CircularLoader","jsx","FlexView","LottieAnimation","LOTTIE"],"mappings":";;;;AAIO,MAAMA,IAAiB,MAC5B,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,aAAY;AAAA,IAEZ,UAAA,gBAAAD,EAACE,KAAgB,OAAM,OAAM,QAAO,OAAM,KAAKC,EAAO,gBAAiB,CAAA;AAAA,EAAA;AACzE;"}
+{"version":3,"file":"circular-loader.js","sources":["../../../../../src/features/ui/loader/circular-loader/circular-loader.tsx"],"sourcesContent":["import { LOTTIE } from '../../../../assets/lottie/lottie';\nimport FlexView from '../../layout/flex-view';\nimport LottieAnimation from '../../lottie-animation/lottie-animation';\n\nconst settings = {\n  renderer: 'canvas',\n};\n\nexport const CircularLoader = () => (\n  <FlexView\n    $width=\"100%\"\n    $height=\"100%\"\n    $alignItems=\"center\"\n    $justifyContent=\"center\"\n    $background=\"TRANSPARENT\"\n  >\n    <LottieAnimation width=\"50%\" height=\"50%\" src={LOTTIE.CIRCULAR_LOADER} settings={settings} />\n  </FlexView>\n);\n"],"names":["settings","CircularLoader","jsx","FlexView","LottieAnimation","LOTTIE"],"mappings":";;;;AAIA,MAAMA,IAAW;AAAA,EACf,UAAU;AACZ,GAEaC,IAAiB,MAC5B,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,aAAY;AAAA,IAEZ,UAAA,gBAAAD,EAACE,KAAgB,OAAM,OAAM,QAAO,OAAM,KAAKC,EAAO,iBAAiB,UAAAL,EAAoB,CAAA;AAAA,EAAA;AAC7F;"}

package/dist/features/ui/stepper/stepper.js

@@ -1,14 +1,14 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import m from "../../../assets/line-icons/icons/check.js";
-import h from "../text/text.js";
+import l from "../../../assets/line-icons/icons/check.js";
+import m from "../text/text.js";
 import { getTheme as p } from "../theme/get-theme.js";
 import { MainWrapper as a, HorizontalLine as d, Wrapper as g, NumberWrapper as f, StyledText as s } from "./stepper-styled.js";
 const { layout: u } = p(), { gutter: i } = u;
-function j({ stepsInfo: n = [], currentStep: e = 2 }) {
+function W({ stepsInfo: n = [], currentStep: e = 2 }) {
   const c = n.length && e >= 1 ? (e - 1) / n.length * 100 : 0;
   return /* @__PURE__ */ o(a, { $flexDirection: "row", $width: "fit-content", $gutterX: 0.625, $gapX: 0.625, children: [
     /* @__PURE__ */ t(d, { $percentageCompleted: c, $height: 1 }),
-    n.map(({ id: $, label: l }, r) => /* @__PURE__ */ o(
+    n.map(({ id: $, label: h }, r) => /* @__PURE__ */ o(
       g,
       {
         $flexDirection: "row",
@@ -25,10 +25,10 @@ function j({ stepsInfo: n = [], currentStep: e = 2 }) {
               $justifyContent: "center",
               $heightX: 1.25,
               $widthX: 1.25,
-              children: r + 1 < e ? /* @__PURE__ */ t(m, { height: i, width: i }) : /* @__PURE__ */ t(h, { $renderAs: "body3", $color: "WHITE", children: $ })
+              children: r + 1 < e ? /* @__PURE__ */ t(l, { height: i, width: i }) : /* @__PURE__ */ t(m, { $renderAs: "body3", $color: "WHITE", children: $ })
             }
           ),
-          r + 1 === e && /* @__PURE__ */ t(s, { $renderAs: "body2", children: l })
+          r + 1 === e && /* @__PURE__ */ t(s, { $renderAs: "body2", children: h })
         ]
       },
       r
@@ -36,6 +36,6 @@ function j({ stepsInfo: n = [], currentStep: e = 2 }) {
   ] });
 }
 export {
-  j as default
+  W as default
 };
 //# sourceMappingURL=stepper.js.map

package/dist/features/ui/theme/tab.js

@@ -45,6 +45,32 @@ const o = (a) => ({ sizes: {
       hover: 500,
       disabled: 400
     }
+  },
+  secondary: {
+    backgroundColorName: {
+      inactive: "BLACK",
+      active: "WHITE",
+      hover: "WHITE",
+      disabled: "GREY_1"
+    },
+    colorName: {
+      inactive: "WHITE",
+      active: "BLACK",
+      hover: "BLACK",
+      disabled: "BLACK_50"
+    },
+    borderColorName: {
+      inactive: "WHITE",
+      active: "WHITE",
+      hover: "BLACK",
+      disabled: "GREY_1"
+    },
+    fontWeight: {
+      inactive: 400,
+      active: 500,
+      hover: 500,
+      disabled: 400
+    }
   }
 } });
 export {

package/dist/features/ui/theme/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../src/features/ui/theme/tab.ts"],"sourcesContent":["import type { ITabSizeConfig, ITabVariantConfig, TTabSizes, TTabVariants } from '../types';\n\ninterface IGetTabConfig {\n  (gutter: number): {\n    sizes: Record<TTabSizes, ITabSizeConfig>;\n    variants: Record<TTabVariants, ITabVariantConfig>;\n  };\n}\n\nconst getTabConfig: IGetTabConfig = (gutter: number) => {\n  const sizes: Record<TTabSizes, ITabSizeConfig> = {\n    xsmall: {\n      height: gutter * 1.625,\n      paddingHorizontal: gutter * 0.5,\n      textVariant: 'body3',\n    },\n    small: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * 0.75,\n      textVariant: 'body2',\n    },\n    regular: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n    medium: {\n      height: gutter * 3,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n  };\n\n  const variants: Record<TTabVariants, ITabVariantConfig> = {\n    primary: {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        hover: 'WHITE',\n        disabled: 'BLACK_50',\n      },\n      borderColorName: {\n        inactive: 'GREY_3',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      fontWeight: {\n        inactive: 400,\n        active: 500,\n        hover: 500,\n        disabled: 400,\n      },\n    },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getTabConfig;\n"],"names":["getTabConfig","gutter"],"mappings":"AASM,MAAAA,IAA8B,CAACC,OAqD5B,EAAE,OApDwC;AAAA,EAC/C,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,GAgCc,UA7B0C;AAAA,EACxD,SAAS;AAAA,IACP,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;"}
+{"version":3,"file":"tab.js","sources":["../../../../src/features/ui/theme/tab.ts"],"sourcesContent":["import type { ITabSizeConfig, ITabVariantConfig, TTabSizes, TTabVariants } from '../types';\n\ninterface IGetTabConfig {\n  (gutter: number): {\n    sizes: Record<TTabSizes, ITabSizeConfig>;\n    variants: Record<TTabVariants, ITabVariantConfig>;\n  };\n}\n\nconst getTabConfig: IGetTabConfig = (gutter: number) => {\n  const sizes: Record<TTabSizes, ITabSizeConfig> = {\n    xsmall: {\n      height: gutter * 1.625,\n      paddingHorizontal: gutter * 0.5,\n      textVariant: 'body3',\n    },\n    small: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * 0.75,\n      textVariant: 'body2',\n    },\n    regular: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n    medium: {\n      height: gutter * 3,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n  };\n\n  const variants: Record<TTabVariants, ITabVariantConfig> = {\n    primary: {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        hover: 'WHITE',\n        disabled: 'BLACK_50',\n      },\n      borderColorName: {\n        inactive: 'GREY_3',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      fontWeight: {\n        inactive: 400,\n        active: 500,\n        hover: 500,\n        disabled: 400,\n      },\n    },\n    secondary: {\n      backgroundColorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        hover: 'WHITE',\n        disabled: 'GREY_1',\n      },\n      colorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'BLACK_50',\n      },\n      borderColorName: {\n        inactive: 'WHITE',\n        active: 'WHITE',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      fontWeight: {\n        inactive: 400,\n        active: 500,\n        hover: 500,\n        disabled: 400,\n      },\n    },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getTabConfig;\n"],"names":["getTabConfig","gutter"],"mappings":"AASM,MAAAA,IAA8B,CAACC,OA+E5B,EAAE,OA9EwC;AAAA,EAC/C,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,GA0Dc,UAvD0C;AAAA,EACxD,SAAS;AAAA,IACP,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;"}

package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question.js

@@ -1,4 +1,4 @@
-import { jsxs as I, jsx as e, Fragment as Kt } from "react/jsx-runtime";
+import { jsxs as T, jsx as e, Fragment as Kt } from "react/jsx-runtime";
 import { memo as Vt, useMemo as R, useState as A, useRef as U, useCallback as Xt, useEffect as E, useLayoutEffect as Pt } from "react";
 import { IMAGES as jt } from "../../../../assets/images/images.js";
 import Gt from "../../../cue-canvas/cue-canvas.js";
@@ -23,8 +23,8 @@ const Ai = Vt(
     worksheetCompleted: f,
     question: n,
     response: i,
-    nextQuestionId: S,
-    isActive: v,
+    nextQuestionId: v,
+    isActive: S,
     isHidden: M,
     canRender: K,
     loggerRef: O,
@@ -38,7 +38,7 @@ const Ai = Vt(
     background: G = "paper",
     onMediaStateChange: Bt,
     onMarkForReview: xt,
-    userId: Lt,
+    userId: It,
     onPublishStrokes: Y,
     onReceiveStrokes: Z,
     isScribblingEnabled: J,
@@ -47,8 +47,8 @@ const Ai = Vt(
     onPublishMouseMove: k,
     onSubscribeMouseMove: tt,
     setActiveQuestionId: it,
-    canResolveDoubt: Tt,
-    onResolveDoubt: It,
+    canResolveDoubt: Lt,
+    onResolveDoubt: Tt,
     studentId: At,
     responses: Mt,
     subjectiveProps: et
@@ -86,7 +86,7 @@ const Ai = Vt(
       _t,
       H,
       c
-    ]), F = U({}), L = (i == null ? void 0 : i.hintsUsed) ?? 0, [$t] = A((i == null ? void 0 : i.validatedByTeacher) ?? !1), T = U(null), z = U(null), D = R(() => d == null ? void 0 : d.slice(0, L), [d, L]), pt = R(() => c === "TEACHER" || f ? !0 : !i || !i.response || i.responseEdited ? !1 : ot, [i, c, ot, f]), Rt = R(() => {
+    ]), F = U({}), I = (i == null ? void 0 : i.hintsUsed) ?? 0, [$t] = A((i == null ? void 0 : i.validatedByTeacher) ?? !1), L = U(null), z = U(null), D = R(() => d == null ? void 0 : d.slice(0, I), [d, I]), pt = R(() => c === "TEACHER" || f ? !0 : !i || !i.response || i.responseEdited ? !1 : ot, [i, c, ot, f]), Rt = R(() => {
       if (c === "TEACHER") return !0;
       if (Q) {
         const { attemptsHistory: t } = i ?? {};
@@ -96,14 +96,14 @@ const Ai = Vt(
     }, [ct, nt, i, Q, c]), zt = R(
       () => b && f && !at,
       [at, b, f]
-    ), [St, Dt] = A({
+    ), [vt, Dt] = A({
       width: 0,
       height: 0
     }), Ut = Xt((t) => {
       Nt(t);
     }, []);
     return E(() => {
-      T.current && j.observe(T.current);
+      L.current && j.observe(L.current);
     }, [j]), E(() => {
       if (a && (n.type === "clozeassociation" || n.type === "association" || n.type === "clozeformula")) {
         const t = document.querySelectorAll(
@@ -160,7 +160,7 @@ const Ai = Vt(
       r,
       lt
     ]), E(() => {
-      const t = T.current, s = (o) => {
+      const t = L.current, s = (o) => {
         const m = o.querySelector(".lrn_response_wrapper");
         if (!m)
           return 0;
@@ -176,37 +176,37 @@ const Ai = Vt(
           return Math.ceil(
             p + (W ? s(t) : 0)
           );
-        const vt = Math.ceil(
+        const St = Math.ceil(
           p + (W ? s(t) : 0)
         );
-        return Math.abs(vt - o) > 4 ? vt : o;
+        return Math.abs(St - o) > 4 ? St : o;
       });
     }), Pt(() => {
       !B && !M && Wt(r);
     }, [M, B, r, st]), E(() => {
-      (L || gt || b && f) && w.renderMath("mathjax");
-    }, [gt, L, w, b, f]), E(() => {
-      if (H && S && !$t && (i != null && i.validatedByTeacher)) {
+      (I || gt || b && f) && w.renderMath("mathjax");
+    }, [gt, I, w, b, f]), E(() => {
+      if (H && v && !$t && (i != null && i.validatedByTeacher)) {
         const t = setTimeout(() => {
-          B ? Wt(S) : it(S);
+          B ? Wt(v) : it(v);
         }, 1e3);
         return () => {
           clearTimeout(t);
         };
       }
     }, [
-      S,
+      v,
       H,
       $t,
       B,
       it,
       i == null ? void 0 : i.validatedByTeacher
-    ]), /* @__PURE__ */ I(
+    ]), /* @__PURE__ */ T(
       si,
       {
         "data-response-id": r,
         className: `widget-${r}`,
-        ref: T,
+        ref: L,
         $topOffset: st,
         $flexDirection: $ ? "row" : "column",
         $alignItems: $ ? "flex-start" : "center",
@@ -221,17 +221,17 @@ const Ai = Vt(
               }
             }
           ),
-          /* @__PURE__ */ I(
+          /* @__PURE__ */ T(
             li,
             {
               ref: z,
               $width: $ ? "50%" : `${V}px`,
               $minHeight: y ? Math.max(y - 72, rt ?? 0) : Qt,
-              $isActive: v,
+              $isActive: S,
               $paperColor: C,
-              $opacity: v ? 1 : 0.2,
+              $opacity: S ? 1 : 0.2,
               children: [
-                v && !!k && !!tt && q && /* @__PURE__ */ e(
+                S && !!k && !!tt && q && /* @__PURE__ */ e(
                   Yt,
                   {
                     containerRef: z,
@@ -240,12 +240,12 @@ const Ai = Vt(
                     responseId: r
                   }
                 ),
-                /* @__PURE__ */ I(
+                /* @__PURE__ */ T(
                   ui,
                   {
                     className: Ft,
-                    $dropzoneMinWidth: St.width,
-                    $dropzoneMinHeight: St.height,
+                    $dropzoneMinWidth: vt.width,
+                    $dropzoneMinHeight: vt.height,
                     children: [
                       !(x || l || g) && /* @__PURE__ */ e(
                         ti,
@@ -258,14 +258,14 @@ const Ai = Vt(
                           paperColor: C,
                           onMarkForReview: xt,
                           actionbarHeight: yt,
-                          canResolveDoubt: Tt,
-                          onResolveDoubt: It,
+                          canResolveDoubt: Lt,
+                          onResolveDoubt: Tt,
                           worksheetCompleted: f
                         }
                       ),
                       x && /* @__PURE__ */ e(fi, { src: jt.LESSON_OVERVIEW_BANNER }),
                       l && C && /* @__PURE__ */ e(ei, { paperColor: C }),
-                      g ? /* @__PURE__ */ I(Kt, { children: [
+                      g ? /* @__PURE__ */ T(Kt, { children: [
                         h === "practice-basic" && /* @__PURE__ */ e(ni, {}),
                         h === "practice-regular" && /* @__PURE__ */ e(ai, {}),
                         h === "exit-ticket" && /* @__PURE__ */ e(ci, {}),
@@ -278,7 +278,7 @@ const Ai = Vt(
                           appended: a,
                           question: n,
                           response: i == null ? void 0 : i.response,
-                          canRender: K || v,
+                          canRender: K || S,
                           learnosity: w,
                           canForceAppend: c === "TEACHER",
                           isConceptIntro: l,
@@ -290,15 +290,15 @@ const Ai = Vt(
                         Gt,
                         {
                           canRender: K,
-                          canScribble: J && v,
+                          canScribble: J && S,
                           appended: a,
-                          responseId: r,
+                          canvasId: r,
                           width: V,
                           height: Math.max(y, rt ?? 0),
                           onUpdateHeight: Ut,
                           onPublish: Y,
                           onSubscribe: Z,
-                          userId: Lt,
+                          userId: It,
                           initialData: N == null ? void 0 : N[r],
                           userType: c
                         }
@@ -345,7 +345,7 @@ const Ai = Vt(
                         {
                           responses: Mt,
                           response: i,
-                          nextQuestionId: S,
+                          nextQuestionId: v,
                           responseId: r,
                           studentId: At,
                           userType: c,