@cuemath/leap 3.1.14 → 3.1.15-hg1

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

@@ -10,7 +10,7 @@ import X from "../../ui/lottie-animation/lottie-animation.js";
 import g from "../../ui/separator/separator.js";
 import D from "../../ui/text/text.js";
 import { NumberCountAnimation as q } from "../number-count-animation/number-count-animation.js";
-import { TARGET_ACHIEVED_DELAY as G, TOTAL_ARC_AVAILABLE as h, STROKE_WIDTH as C, ARC_RADIUS as L, ANIMATED_ARC_START_ANGLE as p, PROGRESS_FILL_DURATION as f, PROGRESS_FILL_DELAY as b, TOTAL_ANIMATION_DURATION as z } from "./constants.js";
+import { TARGET_ACHIEVED_DELAY as G, ARC_RADIUS as C, STROKE_WIDTH as L, TOTAL_ARC_AVAILABLE as h, PROGRESS_FILL_DELAY as p, PROGRESS_FILL_DURATION as f, TOTAL_ANIMATION_DURATION as z, ANIMATED_ARC_START_ANGLE as b } from "./constants.js";
 import { DigitalMeter as J, ContentContainer as Q, NumberCountContainer as v, RainboxColorText as N, LineMarking as M, MarkingContainer as H, MarkingText as u, BottomAbsoluteView as O, HelperTextPrimary as x, HelperTextSecondary as V } from "./digital-meter-styled.js";
 const rr = {
   renderer: "canvas"
@@ -46,11 +46,11 @@ const rr = {
         I,
         {
           targetAngle: h,
-          strokeWidth: C,
+          strokeWidth: L,
           color: "BLACK_5",
-          radius: L,
+          radius: C,
           duration: 0,
-          startAngle: -p
+          startAngle: -b
         }
       ),
       /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ c($, { $flexDirection: "column", $alignItems: "center", children: [
@@ -67,7 +67,7 @@ const rr = {
                   initialValue: 0,
                   targetValue: Math.floor(a),
                   durationInSec: f,
-                  delayInSec: b
+                  delayInSec: p
                 }
               )
             }
@@ -99,14 +99,14 @@ const rr = {
         return /* @__PURE__ */ r(
           I,
           {
-            startAngle: -p + A * e,
+            startAngle: -b + A * e,
             targetAngle: A,
-            strokeWidth: C,
+            strokeWidth: L,
             color: "GREEN_4",
-            radius: L,
+            radius: C,
             mode: "fade",
             duration: f / n,
-            delay: b + f / n * e,
+            delay: p + f / n * e,
             showAnimatedRainbowArc: l
           },
           e
@@ -132,13 +132,13 @@ const rr = {
           I,
           {
             targetAngle: a * h / n,
-            strokeWidth: C,
+            strokeWidth: L,
             color: "GREEN_4",
-            radius: L,
+            radius: C,
             duration: f,
-            delay: b,
+            delay: p,
             showAnimatedRainbowArc: l,
-            startAngle: -p
+            startAngle: -b
           }
         ),
         /* @__PURE__ */ c(k, { children: [

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\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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"}
+{"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/post-game-stats/number-count-animation/number-count-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-count-animation.js","sources":["../../../../src/features/post-game-stats/number-count-animation/number-count-animation.tsx"],"sourcesContent":["import type { INumberCountAnimationProps } from './number-count-animation-types';\nimport type { FC } from 'react';\n\nimport { useEffect, useState } from 'react';\n\nexport const NumberCountAnimation: FC<INumberCountAnimationProps> = ({\n  initialValue,\n  targetValue,\n  durationInSec = 0,\n  delayInSec = 0,\n}) => {\n  const [currentValue, setCurrentValue] = useState(initialValue);\n\n  useEffect(() => {\n    let startTimestamp: number;\n    let animationFrameId: number;\n\n    const animate = (timestamp: number) => {\n      if (!startTimestamp) {\n        startTimestamp = timestamp;\n      }\n\n      const elapsed = timestamp - startTimestamp;\n      const progress = Math.min(elapsed / (durationInSec * 1000), 1);\n      const value = Math.floor(initialValue + (targetValue - initialValue) * progress);\n\n      setCurrentValue(value);\n\n      if (progress < 1) {\n        animationFrameId = requestAnimationFrame(animate);\n      }\n    };\n\n    const timeoutId = setTimeout(() => {\n      animationFrameId = requestAnimationFrame(animate);\n    }, delayInSec * 1000);\n\n    return () => {\n      clearTimeout(timeoutId);\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [initialValue, targetValue, durationInSec, delayInSec]);\n\n  return <div>{currentValue}</div>;\n};\n"],"names":["NumberCountAnimation","initialValue","targetValue","durationInSec","delayInSec","currentValue","setCurrentValue","useState","useEffect","startTimestamp","animationFrameId","animate","timestamp","elapsed","progress","value","timeoutId","jsx"],"mappings":";;AAKO,MAAMA,IAAuD,CAAC;AAAA,EACnE,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC,IAAa;AACf,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASN,CAAY;AAE7D,SAAAO,EAAU,MAAM;AACV,QAAAC,GACAC;AAEE,UAAAC,IAAU,CAACC,MAAsB;AACrC,MAAKH,MACcA,IAAAG;AAGnB,YAAMC,IAAUD,IAAYH,GACtBK,IAAW,KAAK,IAAID,KAAWV,IAAgB,MAAO,CAAC,GACvDY,IAAQ,KAAK,MAAMd,KAAgBC,IAAcD,KAAgBa,CAAQ;AAE/E,MAAAR,EAAgBS,CAAK,GAEjBD,IAAW,MACbJ,IAAmB,sBAAsBC,CAAO;AAAA,IAClD,GAGIK,IAAY,WAAW,MAAM;AACjC,MAAAN,IAAmB,sBAAsBC,CAAO;AAAA,IAAA,GAC/CP,IAAa,GAAI;AAEpB,WAAO,MAAM;AACX,mBAAaY,CAAS,GACtB,qBAAqBN,CAAgB;AAAA,IAAA;AAAA,KAEtC,CAACT,GAAcC,GAAaC,GAAeC,CAAU,CAAC,GAElD,gBAAAa,EAAC,SAAK,UAAaZ,EAAA,CAAA;AAC5B;"}
+{"version":3,"file":"number-count-animation.js","sources":["../../../../src/features/post-game-stats/number-count-animation/number-count-animation.tsx"],"sourcesContent":["import type { INumberCountAnimationProps } from './number-count-animation-types';\nimport type { FC } from 'react';\n\nimport { useEffect, useState } from 'react';\n\nexport const NumberCountAnimation: FC<INumberCountAnimationProps> = ({\n  initialValue,\n  targetValue,\n  durationInSec = 0,\n  delayInSec = 0,\n}) => {\n  const [currentValue, setCurrentValue] = useState(initialValue);\n\n  useEffect(() => {\n    let startTimestamp: number;\n    let animationFrameId: number;\n\n    const animate = (timestamp: number) => {\n      if (!startTimestamp) {\n        startTimestamp = timestamp;\n      }\n\n      const elapsed = timestamp - startTimestamp;\n      const progress = Math.min(elapsed / (durationInSec * 1000), 1);\n      const value = Math.floor(initialValue + (targetValue - initialValue) * progress);\n\n      setCurrentValue(value);\n\n      if (progress < 1) {\n        animationFrameId = requestAnimationFrame(animate);\n      }\n    };\n\n    const timeoutId = setTimeout(() => {\n      animationFrameId = requestAnimationFrame(animate);\n    }, delayInSec * 1000);\n\n    return () => {\n      clearTimeout(timeoutId);\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [initialValue, targetValue, durationInSec, delayInSec]);\n\n  return <div>{currentValue}</div>;\n};\n"],"names":["NumberCountAnimation","initialValue","targetValue","durationInSec","delayInSec","currentValue","setCurrentValue","useState","useEffect","startTimestamp","animationFrameId","animate","timestamp","elapsed","progress","value","timeoutId","jsx"],"mappings":";;AAKO,MAAMA,IAAuD,CAAC;AAAA,EACnE,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC,IAAa;AACf,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASN,CAAY;AAE7D,SAAAO,EAAU,MAAM;AACV,QAAAC,GACAC;AAEE,UAAAC,IAAU,CAACC,MAAsB;AACrC,MAAKH,MACcA,IAAAG;AAGnB,YAAMC,IAAUD,IAAYH,GACtBK,IAAW,KAAK,IAAID,KAAWV,IAAgB,MAAO,CAAC,GACvDY,IAAQ,KAAK,MAAMd,KAAgBC,IAAcD,KAAgBa,CAAQ;AAE/E,MAAAR,EAAgBS,CAAK,GAEjBD,IAAW,MACbJ,IAAmB,sBAAsBC,CAAO;AAAA,IAEpD,GAEMK,IAAY,WAAW,MAAM;AACjC,MAAAN,IAAmB,sBAAsBC,CAAO;AAAA,IAAA,GAC/CP,IAAa,GAAI;AAEpB,WAAO,MAAM;AACX,mBAAaY,CAAS,GACtB,qBAAqBN,CAAgB;AAAA,IACvC;AAAA,KACC,CAACT,GAAcC,GAAaC,GAAeC,CAAU,CAAC,GAElD,gBAAAa,EAAC,SAAK,UAAaZ,EAAA,CAAA;AAC5B;"}

package/dist/features/post-game-stats/points/points.js.map

@@ -1 +1 @@
-{"version":3,"file":"points.js","sources":["../../../../src/features/post-game-stats/points/points.tsx"],"sourcesContent":["import type { IPointsProps } from './points-types';\nimport type { AnimationEventName } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport { memo, useEffect } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport {\n  GAME_LAUNCHER_ASSET_PADDING,\n  GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,\n} from '../../circle-games/game-launcher/comps/segmented-game-card/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 LottieAnimation from '../../ui/lottie-animation/lottie-animation';\n\nconst POINTS_MAP: Record<string, string> = {\n  point1: LOTTIE.POINT1,\n  point2: LOTTIE.POINT2,\n  point3: LOTTIE.POINT3,\n  point4: LOTTIE.POINT4,\n  point5: LOTTIE.POINT5,\n  point10: LOTTIE.POINT10,\n  point15: LOTTIE.POINT15,\n  point20: LOTTIE.POINT20,\n  point25: LOTTIE.POINT25,\n  point30: LOTTIE.POINT30,\n  point35: LOTTIE.POINT35,\n  point40: LOTTIE.POINT40,\n  point45: LOTTIE.POINT45,\n  point50: LOTTIE.POINT50,\n  point60: LOTTIE.POINT60,\n  point100: LOTTIE.POINT100,\n};\nconst animationDimension =\n  GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH;\nconst animationSettings = {\n  loop: false,\n  autoplay: true,\n  renderer: 'canvas',\n};\n\nexport const Points: FC<IPointsProps> = memo(props => {\n  const { point = 0, onReveal, onComplete, show } = props;\n\n  const { play } = useCircleSounds();\n\n  const animationPath = POINTS_MAP[`point${point}`];\n  const animationEventListener = {\n    name: 'complete' as AnimationEventName,\n    callback: onComplete,\n  };\n\n  useEffect(() => {\n    if (!animationPath) {\n      try {\n        onComplete();\n        throw new Error(`Animation path not found for ${point}`);\n      } catch (err) {\n        // eslint-disable-next-line no-console\n        console.log(err);\n      }\n    }\n\n    if (show && animationPath) onReveal?.();\n  }, [animationPath, onComplete, onReveal, show, point]);\n\n  if (show && animationPath) {\n    return (\n      <LottieAnimation\n        width={animationDimension}\n        height={animationDimension}\n        src={animationPath}\n        settings={animationSettings}\n        eventListener={animationEventListener}\n        onRender={() => play(CircleSoundKey.POINTS_AWARDED)}\n      />\n    );\n  }\n\n  return null;\n});\n"],"names":["POINTS_MAP","LOTTIE","animationDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH","animationSettings","Points","memo","props","point","onReveal","onComplete","show","play","useCircleSounds","animationPath","animationEventListener","useEffect","err","jsx","LottieAnimation","CircleSoundKey"],"mappings":";;;;;;;;AAgBA,MAAMA,IAAqC;AAAA,EACzC,QAAQC,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,UAAUA,EAAO;AACnB,GACMC,IACJC,IAAqBC,IAA8BC,GAC/CC,IAAoB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,GAEaC,IAA2BC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,OAAAC,IAAQ,GAAG,UAAAC,GAAU,YAAAC,GAAY,MAAAC,EAAS,IAAAJ,GAE5C,EAAE,MAAAK,MAASC,KAEXC,IAAgBhB,EAAW,QAAQU,CAAK,EAAE,GAC1CO,IAAyB;AAAA,IAC7B,MAAM;AAAA,IACN,UAAUL;AAAA,EAAA;AAiBZ,SAdAM,EAAU,MAAM;AACd,QAAI,CAACF;AACC,UAAA;AACS,cAAAJ,KACL,IAAI,MAAM,gCAAgCF,CAAK,EAAE;AAAA,eAChDS,GAAK;AAEZ,gBAAQ,IAAIA,CAAG;AAAA,MACjB;AAGE,IAAAN,KAAQG,MAA0BL,KAAA,QAAAA;AAAA,EAAA,GACrC,CAACK,GAAeJ,GAAYD,GAAUE,GAAMH,CAAK,CAAC,GAEjDG,KAAQG,IAER,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOnB;AAAA,MACP,QAAQA;AAAA,MACR,KAAKc;AAAA,MACL,UAAUV;AAAA,MACV,eAAeW;AAAA,MACf,UAAU,MAAMH,EAAKQ,EAAe,cAAc;AAAA,IAAA;AAAA,EAAA,IAKjD;AACT,CAAC;"}
+{"version":3,"file":"points.js","sources":["../../../../src/features/post-game-stats/points/points.tsx"],"sourcesContent":["import type { IPointsProps } from './points-types';\nimport type { AnimationEventName } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport { memo, useEffect } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport {\n  GAME_LAUNCHER_ASSET_PADDING,\n  GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH,\n} from '../../circle-games/game-launcher/comps/segmented-game-card/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 LottieAnimation from '../../ui/lottie-animation/lottie-animation';\n\nconst POINTS_MAP: Record<string, string> = {\n  point1: LOTTIE.POINT1,\n  point2: LOTTIE.POINT2,\n  point3: LOTTIE.POINT3,\n  point4: LOTTIE.POINT4,\n  point5: LOTTIE.POINT5,\n  point10: LOTTIE.POINT10,\n  point15: LOTTIE.POINT15,\n  point20: LOTTIE.POINT20,\n  point25: LOTTIE.POINT25,\n  point30: LOTTIE.POINT30,\n  point35: LOTTIE.POINT35,\n  point40: LOTTIE.POINT40,\n  point45: LOTTIE.POINT45,\n  point50: LOTTIE.POINT50,\n  point60: LOTTIE.POINT60,\n  point100: LOTTIE.POINT100,\n};\nconst animationDimension =\n  GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING - GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH;\nconst animationSettings = {\n  loop: false,\n  autoplay: true,\n  renderer: 'canvas',\n};\n\nexport const Points: FC<IPointsProps> = memo(props => {\n  const { point = 0, onReveal, onComplete, show } = props;\n\n  const { play } = useCircleSounds();\n\n  const animationPath = POINTS_MAP[`point${point}`];\n  const animationEventListener = {\n    name: 'complete' as AnimationEventName,\n    callback: onComplete,\n  };\n\n  useEffect(() => {\n    if (!animationPath) {\n      try {\n        onComplete();\n        throw new Error(`Animation path not found for ${point}`);\n      } catch (err) {\n        // eslint-disable-next-line no-console\n        console.log(err);\n      }\n    }\n\n    if (show && animationPath) onReveal?.();\n  }, [animationPath, onComplete, onReveal, show, point]);\n\n  if (show && animationPath) {\n    return (\n      <LottieAnimation\n        width={animationDimension}\n        height={animationDimension}\n        src={animationPath}\n        settings={animationSettings}\n        eventListener={animationEventListener}\n        onRender={() => play(CircleSoundKey.POINTS_AWARDED)}\n      />\n    );\n  }\n\n  return null;\n});\n"],"names":["POINTS_MAP","LOTTIE","animationDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GAME_LAUNCHER_PROGRESS_RING_STROKE_WIDTH","animationSettings","Points","memo","props","point","onReveal","onComplete","show","play","useCircleSounds","animationPath","animationEventListener","useEffect","err","jsx","LottieAnimation","CircleSoundKey"],"mappings":";;;;;;;;AAgBA,MAAMA,IAAqC;AAAA,EACzC,QAAQC,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,UAAUA,EAAO;AACnB,GACMC,IACJC,IAAqBC,IAA8BC,GAC/CC,IAAoB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,GAEaC,IAA2BC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,OAAAC,IAAQ,GAAG,UAAAC,GAAU,YAAAC,GAAY,MAAAC,MAASJ,GAE5C,EAAE,MAAAK,EAAK,IAAIC,EAAgB,GAE3BC,IAAgBhB,EAAW,QAAQU,CAAK,EAAE,GAC1CO,IAAyB;AAAA,IAC7B,MAAM;AAAA,IACN,UAAUL;AAAA,EACZ;AAgBA,SAdAM,EAAU,MAAM;AACd,QAAI,CAACF;AACC,UAAA;AACS,cAAAJ,EAAA,GACL,IAAI,MAAM,gCAAgCF,CAAK,EAAE;AAAA,eAChDS,GAAK;AAEZ,gBAAQ,IAAIA,CAAG;AAAA,MAAA;AAIf,IAAAN,KAAQG,MAA0BL,KAAA,QAAAA;AAAA,EAAA,GACrC,CAACK,GAAeJ,GAAYD,GAAUE,GAAMH,CAAK,CAAC,GAEjDG,KAAQG,IAER,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOnB;AAAA,MACP,QAAQA;AAAA,MACR,KAAKc;AAAA,MACL,UAAUV;AAAA,MACV,eAAeW;AAAA,MACf,UAAU,MAAMH,EAAKQ,EAAe,cAAc;AAAA,IAAA;AAAA,EACpD,IAIG;AACT,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"post-game-stats.js","sources":["../../../src/features/post-game-stats/post-game-stats.tsx"],"sourcesContent":["import type { IPostGameStatsProps, IPostGameStatsRef } from './post-game-stats-types';\n\nimport { useState, memo, useCallback, forwardRef, useImperativeHandle, useMemo } from 'react';\n\nimport { Accuracy } from './accuracy/accuracy';\nimport { Clock } from './clock/clock';\nimport { DigitalMeter } from './digital-meter/digital-meter';\nimport { EPostGameStat } from './enums/post-game-stats-enum';\nimport { Points } from './points/points';\nimport * as Styled from './post-game-stats-styled';\nimport { Streak } from './streak/streak';\n\nexport const PostGameStats = memo(\n  forwardRef<IPostGameStatsRef, IPostGameStatsProps>(({ stats, show, onComplete }, ref) => {\n    const [currStatIndex, setCurrentStatIndex] = useState(0);\n    const currStatData = useMemo(() => stats[currStatIndex], [currStatIndex, stats]);\n\n    const moveToNextAndPlay = useCallback(() => {\n      currStatData?.onComplete?.();\n\n      if (currStatIndex === stats.length - 1) {\n        onComplete?.();\n\n        return;\n      }\n      setCurrentStatIndex(prev => prev + 1);\n    }, [currStatIndex, onComplete, stats.length, currStatData]);\n\n    const onStatAnimationComplete = useCallback(() => {\n      if (currStatData?.stopAtEnd) {\n        return;\n      }\n      moveToNextAndPlay(); // Autoplay since stopAtEnd is false\n    }, [currStatData, moveToNextAndPlay]);\n\n    useImperativeHandle(ref, () => ({\n      moveToNextAndPlay,\n    }));\n\n    const renderCurrentStat = useMemo(() => {\n      if (!currStatData) {\n        return null;\n      }\n\n      const key = `${currStatData.type}-${currStatIndex}`;\n\n      const renderStat = {\n        [EPostGameStat.POINT]: (\n          <Points\n            key={key}\n            point={currStatData.value}\n            show={currStatData.type === EPostGameStat.POINT}\n            onComplete={onStatAnimationComplete}\n            onReveal={currStatData.onReveal}\n          />\n        ),\n        [EPostGameStat.DIGITAL_METER]: (\n          <DigitalMeter\n            key={key}\n            value={currStatData.value}\n            maxValue={currStatData.maxValue ?? 1}\n            targetValue={currStatData.targetValue}\n            displayText={currStatData.displayText ?? ''}\n            progressType={currStatData.progressType ?? 'linear'}\n            helperTextPrimary={currStatData.helperTextPrimary ?? ''}\n            helperTextSecondary={currStatData.helperTextSecondary ?? ''}\n            actAsTimer={currStatData.actAsTimer}\n            show={true}\n            onComplete={onStatAnimationComplete}\n          />\n        ),\n        [EPostGameStat.STREAK]: (\n          <Streak\n            key={key}\n            currStreak={currStatData.value}\n            show={true}\n            onComplete={onStatAnimationComplete}\n            helperText={currStatData.helperText}\n            onReveal={currStatData.onReveal}\n          />\n        ),\n        [EPostGameStat.ACCURACY]: (\n          <Accuracy\n            key={key}\n            accuracy={currStatData.value}\n            show={true}\n            onComplete={onStatAnimationComplete}\n            helperText={currStatData.helperText}\n          />\n        ),\n        [EPostGameStat.CLOCK]: (\n          <Clock\n            key={key}\n            timeInMs={currStatData.value}\n            show={true}\n            onComplete={onStatAnimationComplete}\n            helperText={currStatData.helperText}\n          />\n        ),\n      };\n\n      return renderStat[currStatData.type] ?? null;\n    }, [currStatData, onStatAnimationComplete, currStatIndex]);\n\n    if (!show || stats.length === 0 || currStatIndex >= stats.length) {\n      return null;\n    }\n\n    return (\n      <Styled.StatsWrapper>\n        <Styled.BlackBg />\n\n        {renderCurrentStat}\n      </Styled.StatsWrapper>\n    );\n  }),\n);\n"],"names":["PostGameStats","memo","forwardRef","stats","show","onComplete","ref","currStatIndex","setCurrentStatIndex","useState","currStatData","useMemo","moveToNextAndPlay","useCallback","_a","prev","onStatAnimationComplete","useImperativeHandle","renderCurrentStat","key","EPostGameStat","jsx","Points","DigitalMeter","Streak","Accuracy","Clock","jsxs","Styled.StatsWrapper","Styled.BlackBg"],"mappings":"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"}
+{"version":3,"file":"post-game-stats.js","sources":["../../../src/features/post-game-stats/post-game-stats.tsx"],"sourcesContent":["import type { IPostGameStatsProps, IPostGameStatsRef } from './post-game-stats-types';\n\nimport { useState, memo, useCallback, forwardRef, useImperativeHandle, useMemo } from 'react';\n\nimport { Accuracy } from './accuracy/accuracy';\nimport { Clock } from './clock/clock';\nimport { DigitalMeter } from './digital-meter/digital-meter';\nimport { EPostGameStat } from './enums/post-game-stats-enum';\nimport { Points } from './points/points';\nimport * as Styled from './post-game-stats-styled';\nimport { Streak } from './streak/streak';\n\nexport const PostGameStats = memo(\n  forwardRef<IPostGameStatsRef, IPostGameStatsProps>(({ stats, show, onComplete }, ref) => {\n    const [currStatIndex, setCurrentStatIndex] = useState(0);\n    const currStatData = useMemo(() => stats[currStatIndex], [currStatIndex, stats]);\n\n    const moveToNextAndPlay = useCallback(() => {\n      currStatData?.onComplete?.();\n\n      if (currStatIndex === stats.length - 1) {\n        onComplete?.();\n\n        return;\n      }\n      setCurrentStatIndex(prev => prev + 1);\n    }, [currStatIndex, onComplete, stats.length, currStatData]);\n\n    const onStatAnimationComplete = useCallback(() => {\n      if (currStatData?.stopAtEnd) {\n        return;\n      }\n      moveToNextAndPlay(); // Autoplay since stopAtEnd is false\n    }, [currStatData, moveToNextAndPlay]);\n\n    useImperativeHandle(ref, () => ({\n      moveToNextAndPlay,\n    }));\n\n    const renderCurrentStat = useMemo(() => {\n      if (!currStatData) {\n        return null;\n      }\n\n      const key = `${currStatData.type}-${currStatIndex}`;\n\n      const renderStat = {\n        [EPostGameStat.POINT]: (\n          <Points\n            key={key}\n            point={currStatData.value}\n            show={currStatData.type === EPostGameStat.POINT}\n            onComplete={onStatAnimationComplete}\n            onReveal={currStatData.onReveal}\n          />\n        ),\n        [EPostGameStat.DIGITAL_METER]: (\n          <DigitalMeter\n            key={key}\n            value={currStatData.value}\n            maxValue={currStatData.maxValue ?? 1}\n            targetValue={currStatData.targetValue}\n            displayText={currStatData.displayText ?? ''}\n            progressType={currStatData.progressType ?? 'linear'}\n            helperTextPrimary={currStatData.helperTextPrimary ?? ''}\n            helperTextSecondary={currStatData.helperTextSecondary ?? ''}\n            actAsTimer={currStatData.actAsTimer}\n            show={true}\n            onComplete={onStatAnimationComplete}\n          />\n        ),\n        [EPostGameStat.STREAK]: (\n          <Streak\n            key={key}\n            currStreak={currStatData.value}\n            show={true}\n            onComplete={onStatAnimationComplete}\n            helperText={currStatData.helperText}\n            onReveal={currStatData.onReveal}\n          />\n        ),\n        [EPostGameStat.ACCURACY]: (\n          <Accuracy\n            key={key}\n            accuracy={currStatData.value}\n            show={true}\n            onComplete={onStatAnimationComplete}\n            helperText={currStatData.helperText}\n          />\n        ),\n        [EPostGameStat.CLOCK]: (\n          <Clock\n            key={key}\n            timeInMs={currStatData.value}\n            show={true}\n            onComplete={onStatAnimationComplete}\n            helperText={currStatData.helperText}\n          />\n        ),\n      };\n\n      return renderStat[currStatData.type] ?? null;\n    }, [currStatData, onStatAnimationComplete, currStatIndex]);\n\n    if (!show || stats.length === 0 || currStatIndex >= stats.length) {\n      return null;\n    }\n\n    return (\n      <Styled.StatsWrapper>\n        <Styled.BlackBg />\n\n        {renderCurrentStat}\n      </Styled.StatsWrapper>\n    );\n  }),\n);\n"],"names":["PostGameStats","memo","forwardRef","stats","show","onComplete","ref","currStatIndex","setCurrentStatIndex","useState","currStatData","useMemo","moveToNextAndPlay","useCallback","_a","prev","onStatAnimationComplete","useImperativeHandle","renderCurrentStat","key","EPostGameStat","jsx","Points","DigitalMeter","Streak","Accuracy","Clock","jsxs","Styled.StatsWrapper","Styled.BlackBg"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAgBC;AAAA,EAC3BC,EAAmD,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,YAAAC,EAAA,GAAcC,MAAQ;AACvF,UAAM,CAACC,GAAeC,CAAmB,IAAIC,EAAS,CAAC,GACjDC,IAAeC,EAAQ,MAAMR,EAAMI,CAAa,GAAG,CAACA,GAAeJ,CAAK,CAAC,GAEzES,IAAoBC,EAAY,MAAM;;AAGtC,WAFJC,IAAAJ,KAAA,gBAAAA,EAAc,eAAd,QAAAI,EAAA,KAAAJ,IAEIH,MAAkBJ,EAAM,SAAS,GAAG;AACzB,QAAAE,KAAA,QAAAA;AAEb;AAAA,MAAA;AAEkB,MAAAG,EAAA,CAAAO,MAAQA,IAAO,CAAC;AAAA,IAAA,GACnC,CAACR,GAAeF,GAAYF,EAAM,QAAQO,CAAY,CAAC,GAEpDM,IAA0BH,EAAY,MAAM;AAChD,MAAIH,KAAA,QAAAA,EAAc,aAGAE,EAAA;AAAA,IAAA,GACjB,CAACF,GAAcE,CAAiB,CAAC;AAEpC,IAAAK,EAAoBX,GAAK,OAAO;AAAA,MAC9B,mBAAAM;AAAA,IAAA,EACA;AAEI,UAAAM,IAAoBP,EAAQ,MAAM;AACtC,UAAI,CAACD;AACI,eAAA;AAGT,YAAMS,IAAM,GAAGT,EAAa,IAAI,IAAIH,CAAa;AAyD1C,aAvDY;AAAA,QACjB,CAACa,EAAc,KAAK,GAClB,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YAEC,OAAOZ,EAAa;AAAA,YACpB,MAAMA,EAAa,SAASU,EAAc;AAAA,YAC1C,YAAYJ;AAAA,YACZ,UAAUN,EAAa;AAAA,UAAA;AAAA,UAJlBS;AAAA,QAKP;AAAA,QAEF,CAACC,EAAc,aAAa,GAC1B,gBAAAC;AAAA,UAACE;AAAA,UAAA;AAAA,YAEC,OAAOb,EAAa;AAAA,YACpB,UAAUA,EAAa,YAAY;AAAA,YACnC,aAAaA,EAAa;AAAA,YAC1B,aAAaA,EAAa,eAAe;AAAA,YACzC,cAAcA,EAAa,gBAAgB;AAAA,YAC3C,mBAAmBA,EAAa,qBAAqB;AAAA,YACrD,qBAAqBA,EAAa,uBAAuB;AAAA,YACzD,YAAYA,EAAa;AAAA,YACzB,MAAM;AAAA,YACN,YAAYM;AAAA,UAAA;AAAA,UAVPG;AAAA,QAWP;AAAA,QAEF,CAACC,EAAc,MAAM,GACnB,gBAAAC;AAAA,UAACG;AAAA,UAAA;AAAA,YAEC,YAAYd,EAAa;AAAA,YACzB,MAAM;AAAA,YACN,YAAYM;AAAA,YACZ,YAAYN,EAAa;AAAA,YACzB,UAAUA,EAAa;AAAA,UAAA;AAAA,UALlBS;AAAA,QAMP;AAAA,QAEF,CAACC,EAAc,QAAQ,GACrB,gBAAAC;AAAA,UAACI;AAAA,UAAA;AAAA,YAEC,UAAUf,EAAa;AAAA,YACvB,MAAM;AAAA,YACN,YAAYM;AAAA,YACZ,YAAYN,EAAa;AAAA,UAAA;AAAA,UAJpBS;AAAA,QAKP;AAAA,QAEF,CAACC,EAAc,KAAK,GAClB,gBAAAC;AAAA,UAACK;AAAA,UAAA;AAAA,YAEC,UAAUhB,EAAa;AAAA,YACvB,MAAM;AAAA,YACN,YAAYM;AAAA,YACZ,YAAYN,EAAa;AAAA,UAAA;AAAA,UAJpBS;AAAA,QAAA;AAAA,MAOX,EAEkBT,EAAa,IAAI,KAAK;AAAA,IACvC,GAAA,CAACA,GAAcM,GAAyBT,CAAa,CAAC;AAEzD,WAAI,CAACH,KAAQD,EAAM,WAAW,KAAKI,KAAiBJ,EAAM,SACjD,OAIP,gBAAAwB,EAACC,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAP,EAAAQ,GAAA,EAAe;AAAA,MAEfX;AAAA,IAAA,GACH;AAAA,EAEH,CAAA;AACH;"}

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

@@ -1,16 +1,16 @@
-import i, { keyframes as r, css as s } from "styled-components";
+import i, { css as r, keyframes as s } from "styled-components";
 import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
 import { GAME_LAUNCHER_ASSET_PADDING as n } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
 import c from "../../ui/text/text.js";
 import { STREAK_TOP_GREEN_SEGMENT_HEIGHT as x, STREAK_CONTAINER_HEIGHT as o } from "./constants.js";
-const m = 50 * 84 / 100, p = r`
+const m = 50 * 84 / 100, p = s`
   0%{
     opacity: 0;
   }
   100%{
     opacity: 1;
   }
-`, l = r`
+`, l = s`
   0%{
     opacity: 1;
   }
@@ -41,7 +41,7 @@ const m = 50 * 84 / 100, p = r`
   top: ${x}px;
   z-index: 2;
   height: ${o}px;
-  animation: ${({ $animationType: e, $duration: a }) => s`
+  animation: ${({ $animationType: e, $duration: a }) => r`
     ${e === "fadein" ? p : l} ${a}ms linear forwards
   `};
   overflow: hidden;
@@ -68,7 +68,7 @@ const m = 50 * 84 / 100, p = r`
 `, G = i.div`
   z-index: 2;
   opacity: 0;
-  animation: ${({ $animationType: e, $duration: a, $delay: d }) => s`
+  animation: ${({ $animationType: e, $duration: a, $delay: d }) => r`
     ${e === "fadein" ? p : l} ${a}ms ${d}ms ease forwards
   `};
   transform: translateY(${(t + m) * 84 / 200 + 25}px);

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

@@ -1 +1 @@
-{"version":3,"file":"streak-styled.js","sources":["../../../../src/features/post-game-stats/streak/streak-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\nimport Text from '../../ui/text/text';\nimport { STREAK_CONTAINER_HEIGHT, STREAK_TOP_GREEN_SEGMENT_HEIGHT } from './constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n  0%{\n    opacity: 0;\n  }\n  100%{\n    opacity: 1;\n  }\n`;\n\nconst fadeOut = keyframes`\n  0%{\n    opacity: 1;\n  }\n  100%{\n    opacity: 0;\n  }\n`;\n\nexport const Streak = styled.div`\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  background: transparent;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n`;\n\nexport const SVGImgContainer = styled.div`\n  position: absolute;\n  border-radius: ${Math.ceil((GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING) / 2)}px;\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  z-index: 0;\n`;\n\nexport const StreakLottieView = styled.div`\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  position: absolute;\n  z-index: 2;\n`;\nexport const StreakValueWrapper = styled.div<{\n  $duration: number;\n  $animationType: 'fadein' | 'fadeout';\n}>`\n  position: absolute;\n  top: ${STREAK_TOP_GREEN_SEGMENT_HEIGHT}px;\n  z-index: 2;\n  height: ${STREAK_CONTAINER_HEIGHT}px;\n  animation: ${({ $animationType, $duration }) => css`\n    ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards\n  `};\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const StreakValueContainer = styled.div<{\n  $translate: boolean;\n  $translateDuration: number;\n}>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: ${STREAK_CONTAINER_HEIGHT * 2}px;\n  transition: transform ${({ $translateDuration }) => `${$translateDuration}ms linear`};\n  transform: ${({ $translate }) =>\n    $translate ? `translateY(-${STREAK_CONTAINER_HEIGHT}px)` : 'translateY(0)'};\n`;\n\nexport const StreakValue = styled(Text)`\n  font-size: 123px;\n  line-height: 123px;\n  text-align: center;\n  height: ${STREAK_CONTAINER_HEIGHT}px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const TextWrapper = styled.div<{\n  $duration: number;\n  $delay: number;\n  $animationType: 'fadein' | 'fadeout';\n}>`\n  z-index: 2;\n  opacity: 0;\n  animation: ${({ $animationType, $duration, $delay }) => css`\n    ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n  `};\n  transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Streak","styled","GAME_LAUNCHER_SIZE","SVGImgContainer","GAME_LAUNCHER_ASSET_PADDING","StreakLottieView","StreakValueWrapper","STREAK_TOP_GREEN_SEGMENT_HEIGHT","STREAK_CONTAINER_HEIGHT","$animationType","$duration","css","StreakValueContainer","$translateDuration","$translate","StreakValue","Text","TextWrapper","$delay"],"mappings":";;;;;AAOA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAASC,EAAO;AAAA,YACjBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAkBF,EAAO;AAAA;AAAA,mBAEnB,KAAK,MAAMC,IAAqBE,KAA+B,CAAC,CAAC;AAAA,YACxEF,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA,GAI9CC,IAAmBJ,EAAO;AAAA,YAC3BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAI9CE,IAAqBL,EAAO;AAAA;AAAA,SAKhCM,CAA+B;AAAA;AAAA,YAE5BC,CAAuB;AAAA,eACpB,CAAC,EAAE,gBAAAC,GAAgB,WAAAC,EAAA,MAAgBC;AAAA,MAC5CF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS;AAAA,GAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,GAOUE,IAAuBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ/BO,IAA0B,CAAC;AAAA,0BACb,CAAC,EAAE,oBAAAK,EAAyB,MAAA,GAAGA,CAAkB,WAAW;AAAA,eACvE,CAAC,EAAE,YAAAC,EAAW,MACzBA,IAAa,eAAeN,CAAuB,QAAQ,eAAe;AAAA,GAGjEO,IAAcd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA,YAI1BR,CAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,GAOtBS,IAAchB,EAAO;AAAA;AAAA;AAAA,eAOnB,CAAC,EAAE,gBAAAQ,GAAgB,WAAAC,GAAW,QAAAQ,QAAaP;AAAA,MACpDF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS,MAAMQ,CAAM;AAAA,GAC1E;AAAA,2BACyBhB,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA;"}
+{"version":3,"file":"streak-styled.js","sources":["../../../../src/features/post-game-stats/streak/streak-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\nimport Text from '../../ui/text/text';\nimport { STREAK_CONTAINER_HEIGHT, STREAK_TOP_GREEN_SEGMENT_HEIGHT } from './constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n  0%{\n    opacity: 0;\n  }\n  100%{\n    opacity: 1;\n  }\n`;\n\nconst fadeOut = keyframes`\n  0%{\n    opacity: 1;\n  }\n  100%{\n    opacity: 0;\n  }\n`;\n\nexport const Streak = styled.div`\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  background: transparent;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n`;\n\nexport const SVGImgContainer = styled.div`\n  position: absolute;\n  border-radius: ${Math.ceil((GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING) / 2)}px;\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  z-index: 0;\n`;\n\nexport const StreakLottieView = styled.div`\n  height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n  position: absolute;\n  z-index: 2;\n`;\nexport const StreakValueWrapper = styled.div<{\n  $duration: number;\n  $animationType: 'fadein' | 'fadeout';\n}>`\n  position: absolute;\n  top: ${STREAK_TOP_GREEN_SEGMENT_HEIGHT}px;\n  z-index: 2;\n  height: ${STREAK_CONTAINER_HEIGHT}px;\n  animation: ${({ $animationType, $duration }) => css`\n    ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards\n  `};\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const StreakValueContainer = styled.div<{\n  $translate: boolean;\n  $translateDuration: number;\n}>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: ${STREAK_CONTAINER_HEIGHT * 2}px;\n  transition: transform ${({ $translateDuration }) => `${$translateDuration}ms linear`};\n  transform: ${({ $translate }) =>\n    $translate ? `translateY(-${STREAK_CONTAINER_HEIGHT}px)` : 'translateY(0)'};\n`;\n\nexport const StreakValue = styled(Text)`\n  font-size: 123px;\n  line-height: 123px;\n  text-align: center;\n  height: ${STREAK_CONTAINER_HEIGHT}px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const TextWrapper = styled.div<{\n  $duration: number;\n  $delay: number;\n  $animationType: 'fadein' | 'fadeout';\n}>`\n  z-index: 2;\n  opacity: 0;\n  animation: ${({ $animationType, $duration, $delay }) => css`\n    ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n  `};\n  transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Streak","styled","GAME_LAUNCHER_SIZE","SVGImgContainer","GAME_LAUNCHER_ASSET_PADDING","StreakLottieView","StreakValueWrapper","STREAK_TOP_GREEN_SEGMENT_HEIGHT","STREAK_CONTAINER_HEIGHT","$animationType","$duration","css","StreakValueContainer","$translateDuration","$translate","StreakValue","Text","TextWrapper","$delay"],"mappings":";;;;;AAOA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAASC,EAAO;AAAA,YACjBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAkBF,EAAO;AAAA;AAAA,mBAEnB,KAAK,MAAMC,IAAqBE,KAA+B,CAAC,CAAC;AAAA,YACxEF,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA,GAI9CC,IAAmBJ,EAAO;AAAA,YAC3BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAI9CE,IAAqBL,EAAO;AAAA;AAAA,SAKhCM,CAA+B;AAAA;AAAA,YAE5BC,CAAuB;AAAA,eACpB,CAAC,EAAE,gBAAAC,GAAgB,WAAAC,EAAA,MAAgBC;AAAA,MAC5CF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS;AAAA,GAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,GAOUE,IAAuBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ/BO,IAA0B,CAAC;AAAA,0BACb,CAAC,EAAE,oBAAAK,EAAyB,MAAA,GAAGA,CAAkB,WAAW;AAAA,eACvE,CAAC,EAAE,YAAAC,EAAW,MACzBA,IAAa,eAAeN,CAAuB,QAAQ,eAAe;AAAA,GAGjEO,IAAcd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA,YAI1BR,CAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,GAOtBS,IAAchB,EAAO;AAAA;AAAA;AAAA,eAOnB,CAAC,EAAE,gBAAAQ,GAAgB,WAAAC,GAAW,QAAAQ,EAAa,MAAAP;AAAA,MACpDF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS,MAAMQ,CAAM;AAAA,GAC1E;AAAA,2BACyBhB,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA;"}

package/dist/features/post-game-stats/streak/streak.js

@@ -6,7 +6,7 @@ import { useCircleSounds as U } from "../../circle-games/hooks/use-circle-sounds
 import { CircleSoundKey as I } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds-enums.js";
 import { fetchLottie as x } from "../../ui/lottie-animation/helper.js";
 import { delay as l } from "../../utils/utils.js";
-import { TEXT_DISAPPEAR_DELAY as C, OUT_FRAMES as T, STREAK_DISAPPEAR_ANIMATION_DURATION as b, STREAK_APPEAR_ANIMATION_DURATION as w, STREAK_SCROLL_ANIMATION_DURATION as _, STREAK_WAIT_DURATION as R, TEXT_DISAPPEAR_DURATION as F, TEXT_APPEAR_DURATION as M, IN_FRAMES as V } from "./constants.js";
+import { TEXT_DISAPPEAR_DELAY as C, OUT_FRAMES as T, STREAK_DISAPPEAR_ANIMATION_DURATION as b, STREAK_APPEAR_ANIMATION_DURATION as w, STREAK_SCROLL_ANIMATION_DURATION as _, TEXT_DISAPPEAR_DURATION as F, TEXT_APPEAR_DURATION as M, STREAK_WAIT_DURATION as R, IN_FRAMES as V } from "./constants.js";
 import { Streak as W, SVGImgContainer as g, StreakLottieView as X, StreakValueWrapper as j, StreakValueContainer as H, StreakValue as O, TextWrapper as G } from "./streak-styled.js";
 const rt = P((y) => {
   const { currStreak: c, show: A, onReveal: r, onComplete: a, helperText: m } = y, { play: o } = U(), [D, N] = p(0), u = E(null), n = E(), [i, h] = p(!1), S = $(async () => {

package/dist/features/post-game-stats/streak/streak.js.map

@@ -1 +1 @@
-{"version":3,"file":"streak.js","sources":["../../../../src/features/post-game-stats/streak/streak.tsx"],"sourcesContent":["import type { IStreakProps } from './streak-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\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 { fetchLottie } from '../../ui/lottie-animation/helper';\nimport { delay } from '../../utils/utils';\nimport {\n  IN_FRAMES,\n  OUT_FRAMES,\n  STREAK_APPEAR_ANIMATION_DURATION,\n  STREAK_DISAPPEAR_ANIMATION_DURATION,\n  STREAK_SCROLL_ANIMATION_DURATION,\n  STREAK_WAIT_DURATION,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n} from './constants';\nimport * as Styled from './streak-styled';\n\nexport const Streak: FC<IStreakProps> = memo(props => {\n  const { currStreak, show, onReveal, onComplete, helperText } = props;\n  const { play } = useCircleSounds();\n  const [displayStreak, setDisplayStreak] = useState(0);\n  const lottieContainerRef = useRef<HTMLDivElement>(null);\n  const lottieAnimationRef = useRef<AnimationItem>();\n  const [fadeOut, setFadeout] = useState(false);\n\n  const playExitAnimation = useCallback(async () => {\n    try {\n      await delay(TEXT_DISAPPEAR_DELAY);\n      setFadeout(true);\n      play(CircleSoundKey.STREAK_OUT);\n      lottieAnimationRef.current?.playSegments(OUT_FRAMES, true);\n      const LOTTIE_FPS = 30;\n\n      await delay(\n        (((OUT_FRAMES[1] as unknown as number) - (OUT_FRAMES[0] as unknown as number)) * 1000) /\n          LOTTIE_FPS,\n      );\n      onComplete?.();\n    } catch (err) {\n      /* eslint-disable no-console */\n      console.log(err);\n    }\n  }, [onComplete, play]);\n\n  // play entry animation\n  useEffect(() => {\n    if (show) {\n      const loadAnimation = async () => {\n        const streakLottieAnimationData = await fetchLottie(LOTTIE.TOTAL_STREAK);\n\n        lottieAnimationRef.current = Lottie.loadAnimation({\n          container: lottieContainerRef.current as Element,\n          animationData: streakLottieAnimationData,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        play(CircleSoundKey.STREAK_IN);\n        lottieAnimationRef.current?.playSegments(IN_FRAMES, true);\n        onReveal?.();\n\n        delay(STREAK_WAIT_DURATION).then(() => {\n          setDisplayStreak(1);\n          delay(STREAK_SCROLL_ANIMATION_DURATION).then(() => {\n            playExitAnimation();\n          });\n        });\n      };\n\n      loadAnimation();\n\n      return () => {\n        lottieAnimationRef.current?.destroy();\n      };\n    }\n  }, [show, playExitAnimation, play, onReveal]);\n\n  if (show) {\n    return (\n      <Styled.Streak>\n        <Styled.SVGImgContainer />\n        <Styled.StreakLottieView ref={lottieContainerRef} />\n\n        <Styled.StreakValueWrapper\n          $animationType={fadeOut ? 'fadeout' : 'fadein'}\n          $duration={\n            fadeOut ? STREAK_DISAPPEAR_ANIMATION_DURATION : STREAK_APPEAR_ANIMATION_DURATION\n          }\n        >\n          <Styled.StreakValueContainer\n            $translate={displayStreak > 0}\n            $translateDuration={STREAK_SCROLL_ANIMATION_DURATION}\n          >\n            <Styled.StreakValue $color=\"WHITE\" $renderAs=\"ab1-bold\">\n              {currStreak}\n            </Styled.StreakValue>\n            <Styled.StreakValue $color=\"WHITE\" $renderAs=\"ab1-bold\">\n              {currStreak + 1}\n            </Styled.StreakValue>\n          </Styled.StreakValueContainer>\n        </Styled.StreakValueWrapper>\n\n        {helperText && (\n          <Styled.TextWrapper\n            $delay={STREAK_WAIT_DURATION}\n            $animationType={fadeOut ? 'fadeout' : 'fadein'}\n            $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n          >\n            {helperText}\n          </Styled.TextWrapper>\n        )}\n      </Styled.Streak>\n    );\n  }\n\n  return null;\n});\n"],"names":["Streak","memo","props","currStreak","show","onReveal","onComplete","helperText","play","useCircleSounds","displayStreak","setDisplayStreak","useState","lottieContainerRef","useRef","lottieAnimationRef","fadeOut","setFadeout","playExitAnimation","useCallback","delay","TEXT_DISAPPEAR_DELAY","CircleSoundKey","_a","OUT_FRAMES","err","useEffect","streakLottieAnimationData","fetchLottie","LOTTIE","Lottie","IN_FRAMES","STREAK_WAIT_DURATION","STREAK_SCROLL_ANIMATION_DURATION","jsxs","Styled.Streak","jsx","Styled.SVGImgContainer","Styled.StreakLottieView","Styled.StreakValueWrapper","STREAK_DISAPPEAR_ANIMATION_DURATION","STREAK_APPEAR_ANIMATION_DURATION","Styled.StreakValueContainer","Styled.StreakValue","Styled.TextWrapper","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION"],"mappings":";;;;;;;;;;AAyBa,MAAAA,KAA2BC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,YAAAC,GAAY,MAAAC,GAAM,UAAAC,GAAU,YAAAC,GAAY,YAAAC,EAAe,IAAAL,GACzD,EAAE,MAAAM,MAASC,KACX,CAACC,GAAeC,CAAgB,IAAIC,EAAS,CAAC,GAC9CC,IAAqBC,EAAuB,IAAI,GAChDC,IAAqBD,KACrB,CAACE,GAASC,CAAU,IAAIL,EAAS,EAAK,GAEtCM,IAAoBC,EAAY,YAAY;;AAC5C,QAAA;AACF,YAAMC,EAAMC,CAAoB,GAChCJ,EAAW,EAAI,GACfT,EAAKc,EAAe,UAAU,IACXC,IAAAR,EAAA,YAAA,QAAAQ,EAAS,aAAaC,GAAY,KAG/C,MAAAJ;AAAA,SACDI,EAAW,CAAC,IAA2BA,EAAW,CAAC,KAA2B,MAHhE;AAAA,MAIf,GAESlB,KAAA,QAAAA;AAAA,aACNmB,GAAK;AAEZ,cAAQ,IAAIA,CAAG;AAAA,IACjB;AAAA,EAAA,GACC,CAACnB,GAAYE,CAAI,CAAC;AAoCrB,SAjCAkB,EAAU,MAAM;AACd,QAAItB;AAwBY,cAvBQ,YAAY;;AAChC,cAAMuB,IAA4B,MAAMC,EAAYC,EAAO,YAAY;AAEpD,QAAAd,EAAA,UAAUe,EAAO,cAAc;AAAA,UAChD,WAAWjB,EAAmB;AAAA,UAC9B,eAAec;AAAA,UACf,UAAU;AAAA,UACV,MAAM;AAAA,UACN,UAAU;AAAA,QAAA,CACX,GAEDnB,EAAKc,EAAe,SAAS,IACVC,IAAAR,EAAA,YAAA,QAAAQ,EAAS,aAAaQ,GAAW,KACzC1B,KAAA,QAAAA,KAELe,EAAAY,CAAoB,EAAE,KAAK,MAAM;AACrC,UAAArB,EAAiB,CAAC,GACZS,EAAAa,CAAgC,EAAE,KAAK,MAAM;AAC/B,YAAAf;UAAA,CACnB;AAAA,QAAA,CACF;AAAA,MAAA,MAKI,MAAM;;AACX,SAAAK,IAAAR,EAAmB,YAAnB,QAAAQ,EAA4B;AAAA,MAAQ;AAAA,KAGvC,CAACnB,GAAMc,GAAmBV,GAAMH,CAAQ,CAAC,GAExCD,IAEA,gBAAA8B,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAuB;AAAA,IACvB,gBAAAD,EAAAE,GAAA,EAAwB,KAAKzB,EAAoB,CAAA;AAAA,IAElD,gBAAAuB;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,gBAAgBvB,IAAU,YAAY;AAAA,QACtC,WACEA,IAAUwB,IAAsCC;AAAA,QAGlD,UAAA,gBAAAP;AAAA,UAACQ;AAAAA,UAAA;AAAA,YACC,YAAYhC,IAAgB;AAAA,YAC5B,oBAAoBuB;AAAA,YAEpB,UAAA;AAAA,cAAA,gBAAAG,EAACO,GAAA,EAAmB,QAAO,SAAQ,WAAU,YAC1C,UACHxC,GAAA;AAAA,cACA,gBAAAiC,EAACO,GAAA,EAAmB,QAAO,SAAQ,WAAU,YAC1C,UAAAxC,IAAa,GAChB;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IAECI,KACC,gBAAA6B;AAAA,MAACQ;AAAAA,MAAA;AAAA,QACC,QAAQZ;AAAA,QACR,gBAAgBhB,IAAU,YAAY;AAAA,QACtC,WAAWA,IAAU6B,IAA0BC;AAAA,QAE9C,UAAAvC;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA,IAIG;AACT,CAAC;"}
+{"version":3,"file":"streak.js","sources":["../../../../src/features/post-game-stats/streak/streak.tsx"],"sourcesContent":["import type { IStreakProps } from './streak-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport Lottie from 'lottie-web';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\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 { fetchLottie } from '../../ui/lottie-animation/helper';\nimport { delay } from '../../utils/utils';\nimport {\n  IN_FRAMES,\n  OUT_FRAMES,\n  STREAK_APPEAR_ANIMATION_DURATION,\n  STREAK_DISAPPEAR_ANIMATION_DURATION,\n  STREAK_SCROLL_ANIMATION_DURATION,\n  STREAK_WAIT_DURATION,\n  TEXT_APPEAR_DURATION,\n  TEXT_DISAPPEAR_DELAY,\n  TEXT_DISAPPEAR_DURATION,\n} from './constants';\nimport * as Styled from './streak-styled';\n\nexport const Streak: FC<IStreakProps> = memo(props => {\n  const { currStreak, show, onReveal, onComplete, helperText } = props;\n  const { play } = useCircleSounds();\n  const [displayStreak, setDisplayStreak] = useState(0);\n  const lottieContainerRef = useRef<HTMLDivElement>(null);\n  const lottieAnimationRef = useRef<AnimationItem>();\n  const [fadeOut, setFadeout] = useState(false);\n\n  const playExitAnimation = useCallback(async () => {\n    try {\n      await delay(TEXT_DISAPPEAR_DELAY);\n      setFadeout(true);\n      play(CircleSoundKey.STREAK_OUT);\n      lottieAnimationRef.current?.playSegments(OUT_FRAMES, true);\n      const LOTTIE_FPS = 30;\n\n      await delay(\n        (((OUT_FRAMES[1] as unknown as number) - (OUT_FRAMES[0] as unknown as number)) * 1000) /\n          LOTTIE_FPS,\n      );\n      onComplete?.();\n    } catch (err) {\n      /* eslint-disable no-console */\n      console.log(err);\n    }\n  }, [onComplete, play]);\n\n  // play entry animation\n  useEffect(() => {\n    if (show) {\n      const loadAnimation = async () => {\n        const streakLottieAnimationData = await fetchLottie(LOTTIE.TOTAL_STREAK);\n\n        lottieAnimationRef.current = Lottie.loadAnimation({\n          container: lottieContainerRef.current as Element,\n          animationData: streakLottieAnimationData,\n          autoplay: false,\n          loop: false,\n          renderer: 'canvas',\n        });\n\n        play(CircleSoundKey.STREAK_IN);\n        lottieAnimationRef.current?.playSegments(IN_FRAMES, true);\n        onReveal?.();\n\n        delay(STREAK_WAIT_DURATION).then(() => {\n          setDisplayStreak(1);\n          delay(STREAK_SCROLL_ANIMATION_DURATION).then(() => {\n            playExitAnimation();\n          });\n        });\n      };\n\n      loadAnimation();\n\n      return () => {\n        lottieAnimationRef.current?.destroy();\n      };\n    }\n  }, [show, playExitAnimation, play, onReveal]);\n\n  if (show) {\n    return (\n      <Styled.Streak>\n        <Styled.SVGImgContainer />\n        <Styled.StreakLottieView ref={lottieContainerRef} />\n\n        <Styled.StreakValueWrapper\n          $animationType={fadeOut ? 'fadeout' : 'fadein'}\n          $duration={\n            fadeOut ? STREAK_DISAPPEAR_ANIMATION_DURATION : STREAK_APPEAR_ANIMATION_DURATION\n          }\n        >\n          <Styled.StreakValueContainer\n            $translate={displayStreak > 0}\n            $translateDuration={STREAK_SCROLL_ANIMATION_DURATION}\n          >\n            <Styled.StreakValue $color=\"WHITE\" $renderAs=\"ab1-bold\">\n              {currStreak}\n            </Styled.StreakValue>\n            <Styled.StreakValue $color=\"WHITE\" $renderAs=\"ab1-bold\">\n              {currStreak + 1}\n            </Styled.StreakValue>\n          </Styled.StreakValueContainer>\n        </Styled.StreakValueWrapper>\n\n        {helperText && (\n          <Styled.TextWrapper\n            $delay={STREAK_WAIT_DURATION}\n            $animationType={fadeOut ? 'fadeout' : 'fadein'}\n            $duration={fadeOut ? TEXT_DISAPPEAR_DURATION : TEXT_APPEAR_DURATION}\n          >\n            {helperText}\n          </Styled.TextWrapper>\n        )}\n      </Styled.Streak>\n    );\n  }\n\n  return null;\n});\n"],"names":["Streak","memo","props","currStreak","show","onReveal","onComplete","helperText","play","useCircleSounds","displayStreak","setDisplayStreak","useState","lottieContainerRef","useRef","lottieAnimationRef","fadeOut","setFadeout","playExitAnimation","useCallback","delay","TEXT_DISAPPEAR_DELAY","CircleSoundKey","_a","OUT_FRAMES","err","useEffect","streakLottieAnimationData","fetchLottie","LOTTIE","Lottie","IN_FRAMES","STREAK_WAIT_DURATION","STREAK_SCROLL_ANIMATION_DURATION","jsxs","Styled.Streak","jsx","Styled.SVGImgContainer","Styled.StreakLottieView","Styled.StreakValueWrapper","STREAK_DISAPPEAR_ANIMATION_DURATION","STREAK_APPEAR_ANIMATION_DURATION","Styled.StreakValueContainer","Styled.StreakValue","Styled.TextWrapper","TEXT_DISAPPEAR_DURATION","TEXT_APPEAR_DURATION"],"mappings":";;;;;;;;;;AAyBa,MAAAA,KAA2BC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,YAAAC,GAAY,MAAAC,GAAM,UAAAC,GAAU,YAAAC,GAAY,YAAAC,MAAeL,GACzD,EAAE,MAAAM,EAAK,IAAIC,EAAgB,GAC3B,CAACC,GAAeC,CAAgB,IAAIC,EAAS,CAAC,GAC9CC,IAAqBC,EAAuB,IAAI,GAChDC,IAAqBD,EAAsB,GAC3C,CAACE,GAASC,CAAU,IAAIL,EAAS,EAAK,GAEtCM,IAAoBC,EAAY,YAAY;;AAC5C,QAAA;AACF,YAAMC,EAAMC,CAAoB,GAChCJ,EAAW,EAAI,GACfT,EAAKc,EAAe,UAAU,IACXC,IAAAR,EAAA,YAAA,QAAAQ,EAAS,aAAaC,GAAY,KAG/C,MAAAJ;AAAA,SACDI,EAAW,CAAC,IAA2BA,EAAW,CAAC,KAA2B,MAHhE;AAAA,MAKnB,GACalB,KAAA,QAAAA;AAAA,aACNmB,GAAK;AAEZ,cAAQ,IAAIA,CAAG;AAAA,IAAA;AAAA,EACjB,GACC,CAACnB,GAAYE,CAAI,CAAC;AAoCrB,SAjCAkB,EAAU,MAAM;AACd,QAAItB;AAwBY,cAvBQ,YAAY;;AAChC,cAAMuB,IAA4B,MAAMC,EAAYC,EAAO,YAAY;AAEpD,QAAAd,EAAA,UAAUe,EAAO,cAAc;AAAA,UAChD,WAAWjB,EAAmB;AAAA,UAC9B,eAAec;AAAA,UACf,UAAU;AAAA,UACV,MAAM;AAAA,UACN,UAAU;AAAA,QAAA,CACX,GAEDnB,EAAKc,EAAe,SAAS,IACVC,IAAAR,EAAA,YAAA,QAAAQ,EAAS,aAAaQ,GAAW,KACzC1B,KAAA,QAAAA,KAELe,EAAAY,CAAoB,EAAE,KAAK,MAAM;AACrC,UAAArB,EAAiB,CAAC,GACZS,EAAAa,CAAgC,EAAE,KAAK,MAAM;AAC/B,YAAAf,EAAA;AAAA,UAAA,CACnB;AAAA,QAAA,CACF;AAAA,MACH,GAEc,GAEP,MAAM;;AACX,SAAAK,IAAAR,EAAmB,YAAnB,QAAAQ,EAA4B;AAAA,MAC9B;AAAA,KAED,CAACnB,GAAMc,GAAmBV,GAAMH,CAAQ,CAAC,GAExCD,IAEA,gBAAA8B,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAuB;AAAA,IACvB,gBAAAD,EAAAE,GAAA,EAAwB,KAAKzB,EAAoB,CAAA;AAAA,IAElD,gBAAAuB;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,gBAAgBvB,IAAU,YAAY;AAAA,QACtC,WACEA,IAAUwB,IAAsCC;AAAA,QAGlD,UAAA,gBAAAP;AAAA,UAACQ;AAAAA,UAAA;AAAA,YACC,YAAYhC,IAAgB;AAAA,YAC5B,oBAAoBuB;AAAA,YAEpB,UAAA;AAAA,cAAA,gBAAAG,EAACO,GAAA,EAAmB,QAAO,SAAQ,WAAU,YAC1C,UACHxC,GAAA;AAAA,cACA,gBAAAiC,EAACO,GAAA,EAAmB,QAAO,SAAQ,WAAU,YAC1C,UAAAxC,IAAa,EAChB,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAECI,KACC,gBAAA6B;AAAA,MAACQ;AAAAA,MAAA;AAAA,QACC,QAAQZ;AAAA,QACR,gBAAgBhB,IAAU,YAAY;AAAA,QACtC,WAAWA,IAAU6B,IAA0BC;AAAA,QAE9C,UAAAvC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ,IAIG;AACT,CAAC;"}

package/dist/features/recent-chapters/api/get-recent-chapters.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-recent-chapters.js","sources":["../../../../src/features/recent-chapters/api/get-recent-chapters.ts"],"sourcesContent":["import type { IChapterDataProps } from '../../chapters/chapter/chapter-types';\nimport type { TCourseStream } from '../../milestone/create/milestone-create-types';\n\nimport { createGetAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL_V3 } from '../../../constants/api';\n\nconst { useGet: useGetRecentChapters } = createGetAPI<\n  IChapterDataProps[],\n  void,\n  { courseStream: TCourseStream }\n>({\n  getURL: (studentId: string, _, { courseStream }) =>\n    `${BASE_URL_V3}/users/${studentId}/course-streams/${courseStream}/recent-chapters`,\n});\n\nexport { useGetRecentChapters };\n"],"names":["useGetRecentChapters","createGetAPI","studentId","_","courseStream","BASE_URL_V3"],"mappings":";;AAOA,MAAM,EAAE,QAAQA,EAAqB,IAAIC,EAIvC;AAAA,EACA,QAAQ,CAACC,GAAmBC,GAAG,EAAE,cAAAC,EAAA,MAC/B,GAAGC,CAAW,UAAUH,CAAS,mBAAmBE,CAAY;AACpE,CAAC;"}
+{"version":3,"file":"get-recent-chapters.js","sources":["../../../../src/features/recent-chapters/api/get-recent-chapters.ts"],"sourcesContent":["import type { IChapterDataProps } from '../../chapters/chapter/chapter-types';\nimport type { TCourseStream } from '../../milestone/create/milestone-create-types';\n\nimport { createGetAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL_V3 } from '../../../constants/api';\n\nconst { useGet: useGetRecentChapters } = createGetAPI<\n  IChapterDataProps[],\n  void,\n  { courseStream: TCourseStream }\n>({\n  getURL: (studentId: string, _, { courseStream }) =>\n    `${BASE_URL_V3}/users/${studentId}/course-streams/${courseStream}/recent-chapters`,\n});\n\nexport { useGetRecentChapters };\n"],"names":["useGetRecentChapters","createGetAPI","studentId","_","courseStream","BASE_URL_V3"],"mappings":";;AAOA,MAAM,EAAE,QAAQA,EAAqB,IAAIC,EAIvC;AAAA,EACA,QAAQ,CAACC,GAAmBC,GAAG,EAAE,cAAAC,EAC/B,MAAA,GAAGC,CAAW,UAAUH,CAAS,mBAAmBE,CAAY;AACpE,CAAC;"}

package/dist/features/recent-chapters/recent-chapters-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"recent-chapters-styled.js","sources":["../../../src/features/recent-chapters/recent-chapters-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nconst ChaptersWrapper = styled.div(({ theme }) => {\n  const { WHITE_5, WHITE_2 } = theme.colors;\n\n  return `\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    align-content: start;\n    background: ${WHITE_2};\n    background-image: linear-gradient(${WHITE_5} 0.5px, transparent 0.5px), linear-gradient(90deg, ${WHITE_5} 0.5px, transparent 0.5px);\n    background-size: 45px 45px;\n  `;\n});\n\nexport { ChaptersWrapper };\n"],"names":["ChaptersWrapper","styled","theme","WHITE_5","WHITE_2"],"mappings":";AAEA,MAAMA,IAAkBC,EAAO,IAAI,CAAC,EAAE,OAAAC,QAAY;AAChD,QAAM,EAAE,SAAAC,GAAS,SAAAC,MAAYF,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA,kBAISE,CAAO;AAAA,wCACeD,CAAO,sDAAsDA,CAAO;AAAA;AAAA;AAG5G,CAAC;"}
+{"version":3,"file":"recent-chapters-styled.js","sources":["../../../src/features/recent-chapters/recent-chapters-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nconst ChaptersWrapper = styled.div(({ theme }) => {\n  const { WHITE_5, WHITE_2 } = theme.colors;\n\n  return `\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    align-content: start;\n    background: ${WHITE_2};\n    background-image: linear-gradient(${WHITE_5} 0.5px, transparent 0.5px), linear-gradient(90deg, ${WHITE_5} 0.5px, transparent 0.5px);\n    background-size: 45px 45px;\n  `;\n});\n\nexport { ChaptersWrapper };\n"],"names":["ChaptersWrapper","styled","theme","WHITE_5","WHITE_2"],"mappings":";AAEA,MAAMA,IAAkBC,EAAO,IAAI,CAAC,EAAE,OAAAC,QAAY;AAChD,QAAM,EAAE,SAAAC,GAAS,SAAAC,EAAQ,IAAIF,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA,kBAISE,CAAO;AAAA,wCACeD,CAAO,sDAAsDA,CAAO;AAAA;AAAA;AAG5G,CAAC;"}

package/dist/features/recent-chapters/recent-chapters.js

@@ -1,39 +1,39 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
-import { useCallback as f, useEffect as h } from "react";
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { useCallback as c, useEffect as h } from "react";
 import C from "../chapters/chapters-list/chapter-item/chapter-item.js";
 import d from "../ui/layout/flex-view.js";
 import u from "../ui/text/text.js";
 import { useGetRecentChapters as x } from "./api/get-recent-chapters.js";
 import { ChaptersWrapper as g } from "./recent-chapters-styled.js";
-const R = ({
+const F = ({
   studentId: r,
   courseStream: t,
   onChapterClick: p,
-  recentChaptersRef: a
+  recentChaptersRef: m
 }) => {
-  const { get: o, data: e, isProcessingFailed: m } = x(), i = f(() => {
+  const { get: o, data: e, isProcessingFailed: a } = x(), i = c(() => {
     o(r, void 0, { courseStream: t });
   }, [t, o, r]);
   return h(() => {
     i();
-  }, [i]), m ? null : e && e.length > 0 ? /* @__PURE__ */ s(d, { $flexRowGapX: 1, ref: a, children: [
-    /* @__PURE__ */ s(u, { $renderAs: "ac4-black", $color: "BLACK_T_60", children: [
+  }, [i]), a ? null : e && e.length > 0 ? /* @__PURE__ */ n(d, { $flexRowGapX: 1, ref: m, children: [
+    /* @__PURE__ */ n(u, { $renderAs: "ac4-black", $color: "BLACK_T_60", children: [
       "Recent Chapters (",
       e == null ? void 0 : e.length,
       ")"
     ] }),
-    /* @__PURE__ */ l(g, { children: e.map((n, c) => /* @__PURE__ */ l(
+    /* @__PURE__ */ s(g, { children: e.map((l, f) => /* @__PURE__ */ s(
       C,
       {
-        chapter: n,
+        chapter: l,
         onChapterClick: p,
-        itemIndex: c
+        itemIndex: f
       },
-      n.id
+      l.id
     )) })
   ] }) : null;
-}, G = R;
+};
 export {
-  G as default
+  F as default
 };
 //# sourceMappingURL=recent-chapters.js.map

package/dist/features/recent-chapters/recent-chapters.js.map

@@ -1 +1 @@
-{"version":3,"file":"recent-chapters.js","sources":["../../../src/features/recent-chapters/recent-chapters.tsx"],"sourcesContent":["import type { IChaptersListProps } from '../chapters/chapters-list/chapters-list-types';\nimport type { TCourseStream } from '../milestone/create/milestone-create-types';\nimport type { TUserTypes } from '../ui/types';\nimport type { FC } from 'react';\n\nimport { useCallback, useEffect } from 'react';\n\nimport ChapterItem from '../chapters/chapters-list/chapter-item/chapter-item';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\nimport { useGetRecentChapters } from './api/get-recent-chapters';\nimport * as Styled from './recent-chapters-styled';\n\ninterface RecentChaptersProps {\n  studentId: string;\n  courseStream: TCourseStream;\n  userType: TUserTypes;\n  onChapterClick: IChaptersListProps['onChapterClick'];\n  recentChaptersRef?: React.RefObject<HTMLDivElement>;\n}\n\nconst RecentChapters: FC<RecentChaptersProps> = ({\n  studentId,\n  courseStream,\n  onChapterClick,\n  recentChaptersRef,\n}) => {\n  const { get: getChapters, data: chapterData, isProcessingFailed } = useGetRecentChapters();\n\n  const fetchChapterDetails = useCallback(() => {\n    getChapters(studentId, undefined, { courseStream });\n  }, [courseStream, getChapters, studentId]);\n\n  useEffect(() => {\n    fetchChapterDetails();\n  }, [fetchChapterDetails]);\n\n  if (isProcessingFailed) {\n    return null;\n  }\n\n  if (chapterData && chapterData.length > 0) {\n    return (\n      <FlexView $flexRowGapX={1} ref={recentChaptersRef}>\n        <Text $renderAs=\"ac4-black\" $color=\"BLACK_T_60\">\n          Recent Chapters ({chapterData?.length})\n        </Text>\n        <Styled.ChaptersWrapper>\n          {chapterData.map((chapter, idx) => (\n            <ChapterItem\n              key={chapter.id}\n              chapter={chapter}\n              onChapterClick={onChapterClick}\n              itemIndex={idx}\n            />\n          ))}\n        </Styled.ChaptersWrapper>\n      </FlexView>\n    );\n  }\n\n  return null;\n};\n\nexport default RecentChapters;\n"],"names":["RecentChapters","studentId","courseStream","onChapterClick","recentChaptersRef","getChapters","chapterData","isProcessingFailed","useGetRecentChapters","fetchChapterDetails","useCallback","useEffect","jsxs","FlexView","Text","jsx","Styled.ChaptersWrapper","chapter","idx","ChapterItem","RecentChapters$1"],"mappings":";;;;;;;AAqBA,MAAMA,IAA0C,CAAC;AAAA,EAC/C,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,MAAM;AACJ,QAAM,EAAE,KAAKC,GAAa,MAAMC,GAAa,oBAAAC,EAAA,IAAuBC,KAE9DC,IAAsBC,EAAY,MAAM;AAC5C,IAAAL,EAAYJ,GAAW,QAAW,EAAE,cAAAC,EAAc,CAAA;AAAA,EACjD,GAAA,CAACA,GAAcG,GAAaJ,CAAS,CAAC;AAMzC,SAJAU,EAAU,MAAM;AACM,IAAAF;EAAA,GACnB,CAACA,CAAmB,CAAC,GAEpBF,IACK,OAGLD,KAAeA,EAAY,SAAS,IAEnC,gBAAAM,EAAAC,GAAA,EAAS,cAAc,GAAG,KAAKT,GAC9B,UAAA;AAAA,IAAA,gBAAAQ,EAACE,GAAK,EAAA,WAAU,aAAY,QAAO,cAAa,UAAA;AAAA,MAAA;AAAA,MAC5BR,KAAA,gBAAAA,EAAa;AAAA,MAAO;AAAA,IAAA,GACxC;AAAA,IACA,gBAAAS,EAACC,GAAA,EACE,YAAY,IAAI,CAACC,GAASC,MACzB,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QAEC,SAAAF;AAAA,QACA,gBAAAd;AAAA,QACA,WAAWe;AAAA,MAAA;AAAA,MAHND,EAAQ;AAAA,IAKhB,CAAA,GACH;AAAA,EACF,EAAA,CAAA,IAIG;AACT,GAEAG,IAAepB;"}
+{"version":3,"file":"recent-chapters.js","sources":["../../../src/features/recent-chapters/recent-chapters.tsx"],"sourcesContent":["import type { IChaptersListProps } from '../chapters/chapters-list/chapters-list-types';\nimport type { TCourseStream } from '../milestone/create/milestone-create-types';\nimport type { TUserTypes } from '../ui/types';\nimport type { FC } from 'react';\n\nimport { useCallback, useEffect } from 'react';\n\nimport ChapterItem from '../chapters/chapters-list/chapter-item/chapter-item';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\nimport { useGetRecentChapters } from './api/get-recent-chapters';\nimport * as Styled from './recent-chapters-styled';\n\ninterface RecentChaptersProps {\n  studentId: string;\n  courseStream: TCourseStream;\n  userType: TUserTypes;\n  onChapterClick: IChaptersListProps['onChapterClick'];\n  recentChaptersRef?: React.RefObject<HTMLDivElement>;\n}\n\nconst RecentChapters: FC<RecentChaptersProps> = ({\n  studentId,\n  courseStream,\n  onChapterClick,\n  recentChaptersRef,\n}) => {\n  const { get: getChapters, data: chapterData, isProcessingFailed } = useGetRecentChapters();\n\n  const fetchChapterDetails = useCallback(() => {\n    getChapters(studentId, undefined, { courseStream });\n  }, [courseStream, getChapters, studentId]);\n\n  useEffect(() => {\n    fetchChapterDetails();\n  }, [fetchChapterDetails]);\n\n  if (isProcessingFailed) {\n    return null;\n  }\n\n  if (chapterData && chapterData.length > 0) {\n    return (\n      <FlexView $flexRowGapX={1} ref={recentChaptersRef}>\n        <Text $renderAs=\"ac4-black\" $color=\"BLACK_T_60\">\n          Recent Chapters ({chapterData?.length})\n        </Text>\n        <Styled.ChaptersWrapper>\n          {chapterData.map((chapter, idx) => (\n            <ChapterItem\n              key={chapter.id}\n              chapter={chapter}\n              onChapterClick={onChapterClick}\n              itemIndex={idx}\n            />\n          ))}\n        </Styled.ChaptersWrapper>\n      </FlexView>\n    );\n  }\n\n  return null;\n};\n\nexport default RecentChapters;\n"],"names":["RecentChapters","studentId","courseStream","onChapterClick","recentChaptersRef","getChapters","chapterData","isProcessingFailed","useGetRecentChapters","fetchChapterDetails","useCallback","useEffect","jsxs","FlexView","Text","jsx","Styled.ChaptersWrapper","chapter","idx","ChapterItem"],"mappings":";;;;;;;AAqBA,MAAMA,IAA0C,CAAC;AAAA,EAC/C,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,MAAM;AACJ,QAAM,EAAE,KAAKC,GAAa,MAAMC,GAAa,oBAAAC,MAAuBC,EAAqB,GAEnFC,IAAsBC,EAAY,MAAM;AAC5C,IAAAL,EAAYJ,GAAW,QAAW,EAAE,cAAAC,EAAA,CAAc;AAAA,EACjD,GAAA,CAACA,GAAcG,GAAaJ,CAAS,CAAC;AAMzC,SAJAU,EAAU,MAAM;AACM,IAAAF,EAAA;AAAA,EAAA,GACnB,CAACA,CAAmB,CAAC,GAEpBF,IACK,OAGLD,KAAeA,EAAY,SAAS,IAEnC,gBAAAM,EAAAC,GAAA,EAAS,cAAc,GAAG,KAAKT,GAC9B,UAAA;AAAA,IAAA,gBAAAQ,EAACE,GAAK,EAAA,WAAU,aAAY,QAAO,cAAa,UAAA;AAAA,MAAA;AAAA,MAC5BR,KAAA,gBAAAA,EAAa;AAAA,MAAO;AAAA,IAAA,GACxC;AAAA,IACA,gBAAAS,EAACC,GAAA,EACE,YAAY,IAAI,CAACC,GAASC,MACzB,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QAEC,SAAAF;AAAA,QACA,gBAAAd;AAAA,QACA,WAAWe;AAAA,MAAA;AAAA,MAHND,EAAQ;AAAA,IAAA,CAKhB,EACH,CAAA;AAAA,EAAA,GACF,IAIG;AACT;"}

package/dist/features/sheet-tools/desmos-calculator/desmos-calculator-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"desmos-calculator-styled.js","sources":["../../../../src/features/sheet-tools/desmos-calculator/desmos-calculator-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nconst IFrameWrapper = styled.div<{ $height?: string | number }>(({ theme, $height }) => {\n  const { WHITE } = theme.colors;\n\n  return `\n    position: relative;\n    height: ${$height ? $height : 556}px;\n    overflow: hidden;\n    background: ${WHITE};\n    > iframe {\n        position: absolute;\n        height: calc(100% + 47px);\n        top: -47px;\n    }\n  `;\n});\n\nexport { IFrameWrapper };\n"],"names":["IFrameWrapper","styled","theme","$height","WHITE"],"mappings":";AAEA,MAAMA,IAAgBC,EAAO,IAAmC,CAAC,EAAE,OAAAC,GAAO,SAAAC,QAAc;AAChF,QAAA,EAAE,OAAAC,EAAM,IAAIF,EAAM;AAEjB,SAAA;AAAA;AAAA,cAEKC,KAAoB,GAAG;AAAA;AAAA,kBAEnBC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,CAAC;"}
+{"version":3,"file":"desmos-calculator-styled.js","sources":["../../../../src/features/sheet-tools/desmos-calculator/desmos-calculator-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nconst IFrameWrapper = styled.div<{ $height?: string | number }>(({ theme, $height }) => {\n  const { WHITE } = theme.colors;\n\n  return `\n    position: relative;\n    height: ${$height ? $height : 556}px;\n    overflow: hidden;\n    background: ${WHITE};\n    > iframe {\n        position: absolute;\n        height: calc(100% + 47px);\n        top: -47px;\n    }\n  `;\n});\n\nexport { IFrameWrapper };\n"],"names":["IFrameWrapper","styled","theme","$height","WHITE"],"mappings":";AAEA,MAAMA,IAAgBC,EAAO,IAAmC,CAAC,EAAE,OAAAC,GAAO,SAAAC,QAAc;AAChF,QAAA,EAAE,OAAAC,MAAUF,EAAM;AAEjB,SAAA;AAAA;AAAA,cAEKC,KAAoB,GAAG;AAAA;AAAA,kBAEnBC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,CAAC;"}

package/dist/features/sheet-tools/desmos-calculator/desmos-calculator.js

@@ -1,24 +1,24 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { useState as s } from "react";
-import m from "../tool-header/tool-header.js";
-import { IFrameWrapper as c } from "./desmos-calculator-styled.js";
-const i = ({ onClose: r, height: a, initialPosition: o }) => {
-  const [t, l] = s(!1);
-  return /* @__PURE__ */ e(
-    m,
+import i from "../tool-header/tool-header.js";
+import { IFrameWrapper as m } from "./desmos-calculator-styled.js";
+const u = ({ onClose: r, height: a, initialPosition: o }) => {
+  const [e, l] = s(!1);
+  return /* @__PURE__ */ t(
+    i,
     {
       isDraggable: !0,
-      expanded: t,
+      expanded: e,
       title: "Calculator",
-      width: t ? 960 : 450,
-      onClick: () => l(!t),
+      width: e ? 960 : 450,
+      onClick: () => l(!e),
       onClose: r,
       initialPosition: o,
-      children: /* @__PURE__ */ e(c, { $height: a, children: /* @__PURE__ */ e("iframe", { src: "https://www.desmos.com/calculator", width: "100%", title: "Desmos Calculator" }) })
+      children: /* @__PURE__ */ t(m, { $height: a, children: /* @__PURE__ */ t("iframe", { src: "https://www.desmos.com/calculator", width: "100%", title: "Desmos Calculator" }) })
     }
   );
-}, f = i;
+};
 export {
-  f as default
+  u as default
 };
 //# sourceMappingURL=desmos-calculator.js.map

package/dist/features/sheet-tools/desmos-calculator/desmos-calculator.js.map

@@ -1 +1 @@
-{"version":3,"file":"desmos-calculator.js","sources":["../../../../src/features/sheet-tools/desmos-calculator/desmos-calculator.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport { useState } from 'react';\n\nimport ExpandableHeader from '../tool-header/tool-header';\nimport { IFrameWrapper } from './desmos-calculator-styled';\n\ninterface IDesmosCalculatorProps {\n  onClose: () => void;\n  height?: string | number;\n  initialPosition?: {\n    left?: number;\n    top?: number;\n    bottom?: number;\n    right?: number;\n  };\n}\n\nconst DesmosCalculator: FC<IDesmosCalculatorProps> = ({ onClose, height, initialPosition }) => {\n  const [expanded, setExpanded] = useState(false);\n\n  return (\n    <ExpandableHeader\n      isDraggable\n      expanded={expanded}\n      title=\"Calculator\"\n      width={expanded ? 960 : 450}\n      onClick={() => setExpanded(!expanded)}\n      onClose={onClose}\n      initialPosition={initialPosition}\n    >\n      <IFrameWrapper $height={height}>\n        <iframe src=\"https://www.desmos.com/calculator\" width=\"100%\" title=\"Desmos Calculator\" />\n      </IFrameWrapper>\n    </ExpandableHeader>\n  );\n};\n\nexport default DesmosCalculator;\n"],"names":["DesmosCalculator","onClose","height","initialPosition","expanded","setExpanded","useState","jsx","ExpandableHeader","IFrameWrapper","DesmosCalculator$1"],"mappings":";;;;AAkBA,MAAMA,IAA+C,CAAC,EAAE,SAAAC,GAAS,QAAAC,GAAQ,iBAAAC,QAAsB;AAC7F,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK;AAG5C,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,UAAAJ;AAAA,MACA,OAAM;AAAA,MACN,OAAOA,IAAW,MAAM;AAAA,MACxB,SAAS,MAAMC,EAAY,CAACD,CAAQ;AAAA,MACpC,SAAAH;AAAA,MACA,iBAAAE;AAAA,MAEA,UAAC,gBAAAI,EAAAE,GAAA,EAAc,SAASP,GACtB,UAAC,gBAAAK,EAAA,UAAA,EAAO,KAAI,qCAAoC,OAAM,QAAO,OAAM,oBAAoB,CAAA,GACzF;AAAA,IAAA;AAAA,EAAA;AAGN,GAEAG,IAAeV;"}
+{"version":3,"file":"desmos-calculator.js","sources":["../../../../src/features/sheet-tools/desmos-calculator/desmos-calculator.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport { useState } from 'react';\n\nimport ExpandableHeader from '../tool-header/tool-header';\nimport { IFrameWrapper } from './desmos-calculator-styled';\n\ninterface IDesmosCalculatorProps {\n  onClose: () => void;\n  height?: string | number;\n  initialPosition?: {\n    left?: number;\n    top?: number;\n    bottom?: number;\n    right?: number;\n  };\n}\n\nconst DesmosCalculator: FC<IDesmosCalculatorProps> = ({ onClose, height, initialPosition }) => {\n  const [expanded, setExpanded] = useState(false);\n\n  return (\n    <ExpandableHeader\n      isDraggable\n      expanded={expanded}\n      title=\"Calculator\"\n      width={expanded ? 960 : 450}\n      onClick={() => setExpanded(!expanded)}\n      onClose={onClose}\n      initialPosition={initialPosition}\n    >\n      <IFrameWrapper $height={height}>\n        <iframe src=\"https://www.desmos.com/calculator\" width=\"100%\" title=\"Desmos Calculator\" />\n      </IFrameWrapper>\n    </ExpandableHeader>\n  );\n};\n\nexport default DesmosCalculator;\n"],"names":["DesmosCalculator","onClose","height","initialPosition","expanded","setExpanded","useState","jsx","ExpandableHeader","IFrameWrapper"],"mappings":";;;;AAkBA,MAAMA,IAA+C,CAAC,EAAE,SAAAC,GAAS,QAAAC,GAAQ,iBAAAC,QAAsB;AAC7F,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK;AAG5C,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,UAAAJ;AAAA,MACA,OAAM;AAAA,MACN,OAAOA,IAAW,MAAM;AAAA,MACxB,SAAS,MAAMC,EAAY,CAACD,CAAQ;AAAA,MACpC,SAAAH;AAAA,MACA,iBAAAE;AAAA,MAEA,UAAC,gBAAAI,EAAAE,GAAA,EAAc,SAASP,GACtB,UAAC,gBAAAK,EAAA,UAAA,EAAO,KAAI,qCAAoC,OAAM,QAAO,OAAM,oBAAA,CAAoB,EACzF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/features/sheet-tools/tool-header/tool-header-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"tool-header-styled.js","sources":["../../../../src/features/sheet-tools/tool-header/tool-header-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport DragIcon from '../../../assets/line-icons/icons/drag';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\n\nconst Wrapper = styled(FlexView)`\n  position: absolute;\n  padding: 0 8px 0 16px;\n  cursor: grab;\n  &: active {\n    cursor: grabbing;\n  }\n`;\n\nconst StyledText = styled(Text)`\n  text-transform: capitalize;\n`;\n\nconst CrossIconContainer = styled(CrossIcon)(({ theme }) => {\n  const { WHITE } = theme.colors;\n\n  return `\n    margin-left: 28px;\n    color: ${WHITE};\n    &: hover {\n        cursor: pointer;\n    }\n  `;\n});\n\nconst MoreIconContainer = styled(DragIcon)(({ theme }) => {\n  const { WHITE } = theme.colors;\n\n  return `\n  color: ${WHITE};\n  `;\n});\n\nconst Children = styled.div(({ theme }) => {\n  const { GREY_2, BLACK_10 } = theme.colors;\n\n  return `\n    position: absolute;\n    top: 40px;\n    left: 0;\n    right: 0;\n    border-radius: 2px;\n    border: 1px solid ${GREY_2};\n    box-shadow: 0px 4px 17px 0px ${BLACK_10};\n`;\n});\n\nexport { Wrapper, StyledText, CrossIconContainer, MoreIconContainer, Children };\n"],"names":["Wrapper","styled","FlexView","StyledText","Text","CrossIconContainer","CrossIcon","theme","WHITE","MoreIconContainer","DragIcon","Children","GREY_2","BLACK_10"],"mappings":";;;;;AAOM,MAAAA,IAAUC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASzBC,IAAaF,EAAOG,CAAI;AAAA;AAAA,GAIxBC,IAAqBJ,EAAOK,CAAS,EAAE,CAAC,EAAE,OAAAC,QAAY;AACpD,QAAA,EAAE,OAAAC,EAAM,IAAID,EAAM;AAEjB,SAAA;AAAA;AAAA,aAEIC,CAAK;AAAA;AAAA;AAAA;AAAA;AAKlB,CAAC,GAEKC,IAAoBR,EAAOS,CAAQ,EAAE,CAAC,EAAE,OAAAH,QAAY;AAClD,QAAA,EAAE,OAAAC,EAAM,IAAID,EAAM;AAEjB,SAAA;AAAA,WACEC,CAAK;AAAA;AAEhB,CAAC,GAEKG,IAAWV,EAAO,IAAI,CAAC,EAAE,OAAAM,QAAY;AACzC,QAAM,EAAE,QAAAK,GAAQ,UAAAC,MAAaN,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMeK,CAAM;AAAA,mCACKC,CAAQ;AAAA;AAE3C,CAAC;"}
+{"version":3,"file":"tool-header-styled.js","sources":["../../../../src/features/sheet-tools/tool-header/tool-header-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport DragIcon from '../../../assets/line-icons/icons/drag';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\n\nconst Wrapper = styled(FlexView)`\n  position: absolute;\n  padding: 0 8px 0 16px;\n  cursor: grab;\n  &: active {\n    cursor: grabbing;\n  }\n`;\n\nconst StyledText = styled(Text)`\n  text-transform: capitalize;\n`;\n\nconst CrossIconContainer = styled(CrossIcon)(({ theme }) => {\n  const { WHITE } = theme.colors;\n\n  return `\n    margin-left: 28px;\n    color: ${WHITE};\n    &: hover {\n        cursor: pointer;\n    }\n  `;\n});\n\nconst MoreIconContainer = styled(DragIcon)(({ theme }) => {\n  const { WHITE } = theme.colors;\n\n  return `\n  color: ${WHITE};\n  `;\n});\n\nconst Children = styled.div(({ theme }) => {\n  const { GREY_2, BLACK_10 } = theme.colors;\n\n  return `\n    position: absolute;\n    top: 40px;\n    left: 0;\n    right: 0;\n    border-radius: 2px;\n    border: 1px solid ${GREY_2};\n    box-shadow: 0px 4px 17px 0px ${BLACK_10};\n`;\n});\n\nexport { Wrapper, StyledText, CrossIconContainer, MoreIconContainer, Children };\n"],"names":["Wrapper","styled","FlexView","StyledText","Text","CrossIconContainer","CrossIcon","theme","WHITE","MoreIconContainer","DragIcon","Children","GREY_2","BLACK_10"],"mappings":";;;;;AAOM,MAAAA,IAAUC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASzBC,IAAaF,EAAOG,CAAI;AAAA;AAAA,GAIxBC,IAAqBJ,EAAOK,CAAS,EAAE,CAAC,EAAE,OAAAC,QAAY;AACpD,QAAA,EAAE,OAAAC,MAAUD,EAAM;AAEjB,SAAA;AAAA;AAAA,aAEIC,CAAK;AAAA;AAAA;AAAA;AAAA;AAKlB,CAAC,GAEKC,IAAoBR,EAAOS,CAAQ,EAAE,CAAC,EAAE,OAAAH,QAAY;AAClD,QAAA,EAAE,OAAAC,MAAUD,EAAM;AAEjB,SAAA;AAAA,WACEC,CAAK;AAAA;AAEhB,CAAC,GAEKG,IAAWV,EAAO,IAAI,CAAC,EAAE,OAAAM,QAAY;AACzC,QAAM,EAAE,QAAAK,GAAQ,UAAAC,EAAS,IAAIN,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMeK,CAAM;AAAA,mCACKC,CAAQ;AAAA;AAE3C,CAAC;"}

package/dist/features/sheet-tools/tool-header/tool-header.js

@@ -1,10 +1,10 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { Wrapper as d, StyledText as m, MoreIconContainer as x, CrossIconContainer as $, Children as u } from "./tool-header-styled.js";
+import { Wrapper as p, StyledText as d, MoreIconContainer as u, CrossIconContainer as x, Children as $ } from "./tool-header-styled.js";
 import { useRef as h, useEffect as C } from "react";
-import { useDragHelper as E } from "../../hooks/use-drag-helper.js";
-import w from "../../ui/buttons/text-button/text-button.js";
+import { useDragHelper as w } from "../../hooks/use-drag-helper.js";
+import E from "../../ui/buttons/text-button/text-button.js";
 import I from "../../ui/layout/flex-view.js";
-const b = ({
+const W = ({
   title: i,
   expanded: r,
   onClick: l,
@@ -12,13 +12,13 @@ const b = ({
   isDraggable: c,
   children: s,
   width: f,
-  initialPosition: p
+  initialPosition: m
 }) => {
-  const o = h(null), t = E(o, c, p);
+  const o = h(null), t = w(o, c, m);
   return C(() => {
     t();
   }, [r, t]), /* @__PURE__ */ n(
-    d,
+    p,
     {
       ref: o,
       $height: 40,
@@ -28,18 +28,18 @@ const b = ({
       $background: "BLACK",
       $width: f,
       children: [
-        /* @__PURE__ */ e(m, { $color: "WHITE", $renderAs: "cta2", children: i }),
-        /* @__PURE__ */ e(x, {}),
+        /* @__PURE__ */ e(d, { $color: "WHITE", $renderAs: "cta2", children: i }),
+        /* @__PURE__ */ e(u, {}),
         /* @__PURE__ */ n(I, { $flexDirection: "row", children: [
-          /* @__PURE__ */ e(w, { onClick: l, color: "WHITE", label: r ? "Collapse" : "Expand" }),
-          /* @__PURE__ */ e($, { onClick: a })
+          /* @__PURE__ */ e(E, { onClick: l, color: "WHITE", label: r ? "Collapse" : "Expand" }),
+          /* @__PURE__ */ e(x, { onClick: a })
         ] }),
-        /* @__PURE__ */ e(u, { children: s })
+        /* @__PURE__ */ e($, { children: s })
       ]
     }
   );
-}, k = b;
+};
 export {
-  k as default
+  W as default
 };
 //# sourceMappingURL=tool-header.js.map

package/dist/features/sheet-tools/tool-header/tool-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"tool-header.js","sources":["../../../../src/features/sheet-tools/tool-header/tool-header.tsx"],"sourcesContent":["import './tool-header-styled';\nimport type { IExpandableHeaderProps } from './tool-header-types';\n\nimport { useEffect, useRef, type FC } from 'react';\n\nimport { useDragHelper } from '../../hooks/use-drag-helper';\nimport TextButton from '../../ui/buttons/text-button/text-button';\nimport FlexView from '../../ui/layout/flex-view';\nimport {\n  Children,\n  CrossIconContainer,\n  MoreIconContainer,\n  StyledText,\n  Wrapper,\n} from './tool-header-styled';\n\nconst ExpandableHeader: FC<IExpandableHeaderProps> = ({\n  title,\n  expanded,\n  onClick,\n  onClose,\n  isDraggable,\n  children,\n  width,\n  initialPosition,\n}) => {\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  const validateElementInViewport = useDragHelper(headerRef, isDraggable, initialPosition);\n\n  useEffect(() => {\n    validateElementInViewport();\n  }, [expanded, validateElementInViewport]);\n\n  return (\n    <Wrapper\n      ref={headerRef}\n      $height={40}\n      $flexDirection=\"row\"\n      $alignItems=\"center\"\n      $justifyContent=\"space-between\"\n      $background=\"BLACK\"\n      $width={width}\n    >\n      <StyledText $color=\"WHITE\" $renderAs=\"cta2\">\n        {title}\n      </StyledText>\n      <MoreIconContainer />\n      <FlexView $flexDirection=\"row\">\n        <TextButton onClick={onClick} color=\"WHITE\" label={expanded ? 'Collapse' : 'Expand'} />\n        <CrossIconContainer onClick={onClose} />\n      </FlexView>\n      <Children>{children}</Children>\n    </Wrapper>\n  );\n};\n\nexport default ExpandableHeader;\n"],"names":["ExpandableHeader","title","expanded","onClick","onClose","isDraggable","children","width","initialPosition","headerRef","useRef","validateElementInViewport","useDragHelper","useEffect","jsxs","Wrapper","jsx","StyledText","MoreIconContainer","FlexView","TextButton","CrossIconContainer","Children","ExpandableHeader$1"],"mappings":";;;;;;AAgBA,MAAMA,IAA+C,CAAC;AAAA,EACpD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACE,QAAAC,IAAYC,EAAuB,IAAI,GAEvCC,IAA4BC,EAAcH,GAAWJ,GAAaG,CAAe;AAEvF,SAAAK,EAAU,MAAM;AACY,IAAAF;EAAA,GACzB,CAACT,GAAUS,CAAyB,CAAC,GAGtC,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKN;AAAA,MACL,SAAS;AAAA,MACT,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,QAAQF;AAAA,MAER,UAAA;AAAA,QAAA,gBAAAS,EAACC,GAAW,EAAA,QAAO,SAAQ,WAAU,QAClC,UACHhB,GAAA;AAAA,0BACCiB,GAAkB,EAAA;AAAA,QACnB,gBAAAJ,EAACK,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,UAAA,gBAAAH,EAACI,KAAW,SAAAjB,GAAkB,OAAM,SAAQ,OAAOD,IAAW,aAAa,UAAU;AAAA,UACrF,gBAAAc,EAACK,GAAmB,EAAA,SAASjB,EAAS,CAAA;AAAA,QAAA,GACxC;AAAA,QACA,gBAAAY,EAACM,KAAU,UAAAhB,GAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1B,GAEAiB,IAAevB;"}
+{"version":3,"file":"tool-header.js","sources":["../../../../src/features/sheet-tools/tool-header/tool-header.tsx"],"sourcesContent":["import './tool-header-styled';\nimport type { IExpandableHeaderProps } from './tool-header-types';\n\nimport { useEffect, useRef, type FC } from 'react';\n\nimport { useDragHelper } from '../../hooks/use-drag-helper';\nimport TextButton from '../../ui/buttons/text-button/text-button';\nimport FlexView from '../../ui/layout/flex-view';\nimport {\n  Children,\n  CrossIconContainer,\n  MoreIconContainer,\n  StyledText,\n  Wrapper,\n} from './tool-header-styled';\n\nconst ExpandableHeader: FC<IExpandableHeaderProps> = ({\n  title,\n  expanded,\n  onClick,\n  onClose,\n  isDraggable,\n  children,\n  width,\n  initialPosition,\n}) => {\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  const validateElementInViewport = useDragHelper(headerRef, isDraggable, initialPosition);\n\n  useEffect(() => {\n    validateElementInViewport();\n  }, [expanded, validateElementInViewport]);\n\n  return (\n    <Wrapper\n      ref={headerRef}\n      $height={40}\n      $flexDirection=\"row\"\n      $alignItems=\"center\"\n      $justifyContent=\"space-between\"\n      $background=\"BLACK\"\n      $width={width}\n    >\n      <StyledText $color=\"WHITE\" $renderAs=\"cta2\">\n        {title}\n      </StyledText>\n      <MoreIconContainer />\n      <FlexView $flexDirection=\"row\">\n        <TextButton onClick={onClick} color=\"WHITE\" label={expanded ? 'Collapse' : 'Expand'} />\n        <CrossIconContainer onClick={onClose} />\n      </FlexView>\n      <Children>{children}</Children>\n    </Wrapper>\n  );\n};\n\nexport default ExpandableHeader;\n"],"names":["ExpandableHeader","title","expanded","onClick","onClose","isDraggable","children","width","initialPosition","headerRef","useRef","validateElementInViewport","useDragHelper","useEffect","jsxs","Wrapper","jsx","StyledText","MoreIconContainer","FlexView","TextButton","CrossIconContainer","Children"],"mappings":";;;;;;AAgBA,MAAMA,IAA+C,CAAC;AAAA,EACpD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACE,QAAAC,IAAYC,EAAuB,IAAI,GAEvCC,IAA4BC,EAAcH,GAAWJ,GAAaG,CAAe;AAEvF,SAAAK,EAAU,MAAM;AACY,IAAAF,EAAA;AAAA,EAAA,GACzB,CAACT,GAAUS,CAAyB,CAAC,GAGtC,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKN;AAAA,MACL,SAAS;AAAA,MACT,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,QAAQF;AAAA,MAER,UAAA;AAAA,QAAA,gBAAAS,EAACC,GAAW,EAAA,QAAO,SAAQ,WAAU,QAClC,UACHhB,GAAA;AAAA,0BACCiB,GAAkB,EAAA;AAAA,QACnB,gBAAAJ,EAACK,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,UAAA,gBAAAH,EAACI,KAAW,SAAAjB,GAAkB,OAAM,SAAQ,OAAOD,IAAW,aAAa,UAAU;AAAA,UACrF,gBAAAc,EAACK,GAAmB,EAAA,SAASjB,EAAS,CAAA;AAAA,QAAA,GACxC;AAAA,QACA,gBAAAY,EAACM,KAAU,UAAAhB,EAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB;AAEJ;"}