@cuemath/leap 2.8.36-tables-hg9 → 2.8.36-tables-beta-hg1

package/dist/features/circle-games/game-launcher/game-launcher.js

@@ -1,29 +1,29 @@
 import { jsx as i } from "react/jsx-runtime";
-import { memo as D, useState as T, useCallback as n, useMemo as h, useEffect as B } from "react";
+import { memo as D, useState as I, useCallback as n, useMemo as h, useEffect as B } from "react";
 import { LOTTIE as K } from "../../../assets/lottie/lottie.js";
-import { CircularLoader as U } from "../../ui/loader/circular-loader/circular-loader.js";
-import Y from "../../ui/lottie-animation/lottie-animation.js";
-import { useCircleSounds as H } from "../hooks/use-circle-sounds/use-circle-sounds.js";
+import { CircularLoader as O } from "../../ui/loader/circular-loader/circular-loader.js";
+import U from "../../ui/lottie-animation/lottie-animation.js";
+import { useCircleSounds as Y } from "../hooks/use-circle-sounds/use-circle-sounds.js";
 import { CircleSoundKey as t } from "../hooks/use-circle-sounds/use-circle-sounds-enums.js";
-import { GAME_LAUNCHER_SIZE as J } from "./comps/card-container/constants.js";
+import { GAME_LAUNCHER_SIZE as H } from "./comps/card-container/constants.js";
 import { Carousel as z } from "./comps/carousel/carousel.js";
-import { GAME_LAUNCHER_ASSET_PADDING as O } from "./comps/segmented-game-card/constants.js";
+import { GAME_LAUNCHER_ASSET_PADDING as J } from "./comps/segmented-game-card/constants.js";
 import { SegmentedGameCard as f } from "./comps/segmented-game-card/segmented-game-card.js";
 import { TablesCard as Z } from "./comps/tables-card/tables-card.js";
 import { GAME_LAUNCHER_ANALYTICS_EVENTS as x } from "./game-launcher-analytics-events.js";
 import { useGameLauncherJourney as w } from "./use-game-launcher-journey/use-game-launcher-journey.js";
 import { ProjectType as m } from "../games/web-view/enums/project-type-enum.js";
-const G = J + O, ne = D(
+const G = H + J, ne = D(
   ({ onSegmentClick: r, onJourneyComplete: V, journeyId: u, data: e, isLoading: g, defaultIndex: N = 0 }) => {
-    const [R, S] = T(N), [p] = T(!0), { playSwipSound: c, play: o } = H(), {
+    const [R, M] = I(N), [p] = I(!0), { playSwipSound: c, play: o } = Y(), {
       gameRefs: a,
       lessonRefs: C,
       puzzleRefs: L,
       startJourney: E,
-      carouselNextBtnRef: A,
-      isJourneyInProgress: b
+      carouselNextBtnRef: b,
+      isJourneyInProgress: A
     } = w({
-      setCarouselIndex: S,
+      setCarouselIndex: M,
       onSegmentClick: r,
       onJourneyComplete: V
     }), _ = n(
@@ -36,17 +36,17 @@ const G = J + O, ne = D(
         l.status !== "completed" && (o(t.GAME_CARD_CLICK), r(l, m.LESSON));
       },
       [r, o]
-    ), y = n(
+    ), T = n(
       (l) => {
         o(t.GAME_CARD_CLICK), r(l, m.GAME);
       },
       [r, o]
-    ), I = n(
+    ), y = n(
       (l) => {
         o(t.GAME_CARD_CLICK), r(l, m.PUZZLE);
       },
       [r, o]
-    ), M = h(() => {
+    ), S = h(() => {
       let l = [];
       return e && (e.lessons && (l = [
         ...l,
@@ -80,7 +80,7 @@ const G = J + O, ne = D(
               card: s.cardLottie,
               name: s.name,
               isCompleted: !1,
-              onPress: () => y(s)
+              onPress: () => T(s)
             }))
           }
         ),
@@ -96,7 +96,7 @@ const G = J + O, ne = D(
               card: s.cardLottie,
               name: s.name,
               isCompleted: s.solved,
-              onPress: () => I(s)
+              onPress: () => y(s)
             }))
           }
         )
@@ -107,7 +107,8 @@ const G = J + O, ne = D(
           {
             label: e.tables.label,
             data: e.tables.data,
-            onPress: _
+            onPress: _,
+            openModesOfTable: e.tables.openModesOfTable
           }
         )
       ])), l;
@@ -118,13 +119,13 @@ const G = J + O, ne = D(
       L,
       P,
       _,
-      I,
       y,
+      T,
       p
     ]), v = h(
       () => [
         /* @__PURE__ */ i(
-          Y,
+          U,
           {
             src: K.SLEEPY_BOI,
             width: G,
@@ -135,12 +136,12 @@ const G = J + O, ne = D(
       []
     );
     return B(() => {
-      e != null && e.puzzles && u && b && E(e == null ? void 0 : e.puzzles, !!(e != null && e.lessons), u);
-    }, [e == null ? void 0 : e.lessons, e == null ? void 0 : e.puzzles, b, u, E]), g ? /* @__PURE__ */ i(U, {}) : e ? /* @__PURE__ */ i(
+      e != null && e.puzzles && u && A && E(e == null ? void 0 : e.puzzles, !!(e != null && e.lessons), u);
+    }, [e == null ? void 0 : e.lessons, e == null ? void 0 : e.puzzles, A, u, E]), g ? /* @__PURE__ */ i(O, {}) : e ? /* @__PURE__ */ i(
       z,
       {
-        ref: A,
-        items: M,
+        ref: b,
+        items: S,
         defaultIndex: R,
         onNext: c,
         onPrev: c,
@@ -154,7 +155,7 @@ const G = J + O, ne = D(
     ) : /* @__PURE__ */ i(
       z,
       {
-        ref: A,
+        ref: b,
         items: v,
         analyticsNext: {
           analyticsLabel: ""

package/dist/features/circle-games/game-launcher/game-launcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"game-launcher.js","sources":["../../../../src/features/circle-games/game-launcher/game-launcher.tsx"],"sourcesContent":["import type { ITableDetails } from './comps/tables-card/tables-card-types';\nimport type {\n  Game,\n  Lesson,\n  Puzzle,\n} from './dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IGameLauncherProps } from './game-launcher-types';\nimport type { FC, ReactNode } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { CircularLoader } from '../../ui/loader/circular-loader/circular-loader';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { ProjectType } from '../games/web-view/enums';\nimport { useCircleSounds } from '../hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { GAME_LAUNCHER_SIZE } from './comps/card-container/constants';\nimport { Carousel } from './comps/carousel/carousel';\nimport { GAME_LAUNCHER_ASSET_PADDING } from './comps/segmented-game-card/constants';\nimport { SegmentedGameCard } from './comps/segmented-game-card/segmented-game-card';\nimport { TablesCard } from './comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from './game-launcher-analytics-events';\nimport { useGameLauncherJourney } from './use-game-launcher-journey/use-game-launcher-journey';\n\nconst sleepyBoiDimension = GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING;\n\nexport const GameLauncher: FC<IGameLauncherProps> = memo(\n  ({ onSegmentClick, onJourneyComplete, journeyId, data, isLoading, defaultIndex = 0 }) => {\n    const [currentIndex, setCurrentIndex] = useState(defaultIndex);\n    const [enableTables] = useState(true);\n\n    const { playSwipSound, play } = useCircleSounds();\n    const {\n      gameRefs,\n      lessonRefs,\n      puzzleRefs,\n      startJourney,\n      carouselNextBtnRef,\n      isJourneyInProgress,\n    } = useGameLauncherJourney({\n      setCarouselIndex: setCurrentIndex,\n      onSegmentClick,\n      onJourneyComplete,\n    });\n\n    const onTableSegmentClick = useCallback(\n      (table: ITableDetails) => {\n        play(CircleSoundKey.GAME_CARD_CLICK);\n        onSegmentClick(table, ProjectType.TABLE);\n      },\n      [onSegmentClick, play],\n    );\n\n    const handleLessonSegmentClick = useCallback(\n      (lesson: Lesson) => {\n        if (lesson.status !== 'completed') {\n          play(CircleSoundKey.GAME_CARD_CLICK);\n          onSegmentClick(lesson, ProjectType.LESSON);\n        }\n      },\n      [onSegmentClick, play],\n    );\n\n    const handleGameSegmentClick = useCallback(\n      (game: Game) => {\n        play(CircleSoundKey.GAME_CARD_CLICK);\n        onSegmentClick(game, ProjectType.GAME);\n      },\n      [onSegmentClick, play],\n    );\n\n    const handlePuzzleSegmentClick = useCallback(\n      (puzzle: Puzzle) => {\n        play(CircleSoundKey.GAME_CARD_CLICK);\n        onSegmentClick(puzzle, ProjectType.PUZZLE);\n      },\n      [onSegmentClick, play],\n    );\n\n    const items = useMemo(() => {\n      let itemTypes: ReactNode[] = [];\n\n      if (data) {\n        if (data.lessons) {\n          itemTypes = [\n            ...itemTypes,\n            <SegmentedGameCard\n              ref={lessonRefs}\n              label={data.lessons.label}\n              value={data.lessons.data.filter(lesson => lesson.status === 'completed').length}\n              maxValue={data.lessons.data.length}\n              initialValue={data.lessons.initialProgressValue}\n              data={data?.lessons.data.map(lesson => ({\n                card: lesson.cardLottie,\n                name: lesson.name,\n                isCompleted: lesson.status === 'completed',\n                onPress: () => handleLessonSegmentClick(lesson),\n              }))}\n            />,\n          ];\n        }\n\n        itemTypes = [\n          ...itemTypes,\n          <SegmentedGameCard\n            ref={gameRefs}\n            label={data.games.label}\n            value={data.games.data.filter(game => game.isPlayed).length}\n            maxValue={data.games.data.length}\n            initialValue={data.games.initialProgressValue}\n            data={data.games.data.map(game => ({\n              card: game.cardLottie,\n              name: game.name,\n              isCompleted: false,\n              onPress: () => handleGameSegmentClick(game),\n            }))}\n          />,\n          <SegmentedGameCard\n            ref={puzzleRefs}\n            label={data.puzzles.label}\n            value={data.puzzles.data.filter(puzzle => puzzle.solved).length}\n            maxValue={data.puzzles.data.length}\n            initialValue={data.puzzles.initialProgressValue}\n            data={data.puzzles.data.map(puzzle => ({\n              card: puzzle.cardLottie,\n              name: puzzle.name,\n              isCompleted: puzzle.solved,\n              onPress: () => handlePuzzleSegmentClick(puzzle),\n            }))}\n          />,\n        ];\n\n        if (data.tables && enableTables) {\n          itemTypes = [\n            ...itemTypes,\n            <TablesCard\n              label={data.tables.label}\n              data={data.tables.data}\n              onPress={onTableSegmentClick}\n            />,\n          ];\n        }\n      }\n\n      return itemTypes;\n    }, [\n      data,\n      gameRefs,\n      lessonRefs,\n      puzzleRefs,\n      handleLessonSegmentClick,\n      onTableSegmentClick,\n      handlePuzzleSegmentClick,\n      handleGameSegmentClick,\n      enableTables,\n    ]);\n\n    const sleepyBoiItem = useMemo(\n      () => [\n        <LottieAnimation\n          src={LOTTIE.SLEEPY_BOI}\n          width={sleepyBoiDimension}\n          height={sleepyBoiDimension}\n        />,\n      ],\n      [],\n    );\n\n    // Start game launcher journey when the data for puzzles is available\n    useEffect(() => {\n      if (data?.puzzles && journeyId && isJourneyInProgress) {\n        startJourney(data?.puzzles, !!data?.lessons, journeyId);\n      }\n    }, [data?.lessons, data?.puzzles, isJourneyInProgress, journeyId, startJourney]);\n\n    if (isLoading) {\n      return <CircularLoader />;\n    }\n\n    if (!data) {\n      return (\n        <Carousel\n          ref={carouselNextBtnRef}\n          items={sleepyBoiItem}\n          analyticsNext={{\n            analyticsLabel: '',\n          }}\n          analyticsPrev={{\n            analyticsLabel: '',\n          }}\n        />\n      );\n    }\n\n    return (\n      <Carousel\n        ref={carouselNextBtnRef}\n        items={items}\n        defaultIndex={currentIndex}\n        onNext={playSwipSound}\n        onPrev={playSwipSound}\n        analyticsNext={{\n          analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.NEXT_ACTIVITY,\n        }}\n        analyticsPrev={{\n          analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.PREV_ACTIVITY,\n        }}\n      />\n    );\n  },\n);\n"],"names":["sleepyBoiDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GameLauncher","memo","onSegmentClick","onJourneyComplete","journeyId","data","isLoading","defaultIndex","currentIndex","setCurrentIndex","useState","enableTables","playSwipSound","play","useCircleSounds","gameRefs","lessonRefs","puzzleRefs","startJourney","carouselNextBtnRef","isJourneyInProgress","useGameLauncherJourney","onTableSegmentClick","useCallback","table","CircleSoundKey","ProjectType","handleLessonSegmentClick","lesson","handleGameSegmentClick","game","handlePuzzleSegmentClick","puzzle","items","useMemo","itemTypes","jsx","SegmentedGameCard","TablesCard","sleepyBoiItem","LottieAnimation","LOTTIE","useEffect","CircularLoader","Carousel","GAME_LAUNCHER_ANALYTICS_EVENTS"],"mappings":"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"}
+{"version":3,"file":"game-launcher.js","sources":["../../../../src/features/circle-games/game-launcher/game-launcher.tsx"],"sourcesContent":["import type { ITableDetails } from './comps/tables-card/tables-card-types';\nimport type {\n  Game,\n  Lesson,\n  Puzzle,\n} from './dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IGameLauncherProps } from './game-launcher-types';\nimport type { FC, ReactNode } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport { CircularLoader } from '../../ui/loader/circular-loader/circular-loader';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { ProjectType } from '../games/web-view/enums';\nimport { useCircleSounds } from '../hooks/use-circle-sounds/use-circle-sounds';\nimport { CircleSoundKey } from '../hooks/use-circle-sounds/use-circle-sounds-enums';\nimport { GAME_LAUNCHER_SIZE } from './comps/card-container/constants';\nimport { Carousel } from './comps/carousel/carousel';\nimport { GAME_LAUNCHER_ASSET_PADDING } from './comps/segmented-game-card/constants';\nimport { SegmentedGameCard } from './comps/segmented-game-card/segmented-game-card';\nimport { TablesCard } from './comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from './game-launcher-analytics-events';\nimport { useGameLauncherJourney } from './use-game-launcher-journey/use-game-launcher-journey';\n\nconst sleepyBoiDimension = GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING;\n\nexport const GameLauncher: FC<IGameLauncherProps> = memo(\n  ({ onSegmentClick, onJourneyComplete, journeyId, data, isLoading, defaultIndex = 0 }) => {\n    const [currentIndex, setCurrentIndex] = useState(defaultIndex);\n    const [enableTables] = useState(true);\n\n    const { playSwipSound, play } = useCircleSounds();\n    const {\n      gameRefs,\n      lessonRefs,\n      puzzleRefs,\n      startJourney,\n      carouselNextBtnRef,\n      isJourneyInProgress,\n    } = useGameLauncherJourney({\n      setCarouselIndex: setCurrentIndex,\n      onSegmentClick,\n      onJourneyComplete,\n    });\n\n    const onTableSegmentClick = useCallback(\n      (table: ITableDetails) => {\n        play(CircleSoundKey.GAME_CARD_CLICK);\n        onSegmentClick(table, ProjectType.TABLE);\n      },\n      [onSegmentClick, play],\n    );\n\n    const handleLessonSegmentClick = useCallback(\n      (lesson: Lesson) => {\n        if (lesson.status !== 'completed') {\n          play(CircleSoundKey.GAME_CARD_CLICK);\n          onSegmentClick(lesson, ProjectType.LESSON);\n        }\n      },\n      [onSegmentClick, play],\n    );\n\n    const handleGameSegmentClick = useCallback(\n      (game: Game) => {\n        play(CircleSoundKey.GAME_CARD_CLICK);\n        onSegmentClick(game, ProjectType.GAME);\n      },\n      [onSegmentClick, play],\n    );\n\n    const handlePuzzleSegmentClick = useCallback(\n      (puzzle: Puzzle) => {\n        play(CircleSoundKey.GAME_CARD_CLICK);\n        onSegmentClick(puzzle, ProjectType.PUZZLE);\n      },\n      [onSegmentClick, play],\n    );\n\n    const items = useMemo(() => {\n      let itemTypes: ReactNode[] = [];\n\n      if (data) {\n        if (data.lessons) {\n          itemTypes = [\n            ...itemTypes,\n            <SegmentedGameCard\n              ref={lessonRefs}\n              label={data.lessons.label}\n              value={data.lessons.data.filter(lesson => lesson.status === 'completed').length}\n              maxValue={data.lessons.data.length}\n              initialValue={data.lessons.initialProgressValue}\n              data={data?.lessons.data.map(lesson => ({\n                card: lesson.cardLottie,\n                name: lesson.name,\n                isCompleted: lesson.status === 'completed',\n                onPress: () => handleLessonSegmentClick(lesson),\n              }))}\n            />,\n          ];\n        }\n\n        itemTypes = [\n          ...itemTypes,\n          <SegmentedGameCard\n            ref={gameRefs}\n            label={data.games.label}\n            value={data.games.data.filter(game => game.isPlayed).length}\n            maxValue={data.games.data.length}\n            initialValue={data.games.initialProgressValue}\n            data={data.games.data.map(game => ({\n              card: game.cardLottie,\n              name: game.name,\n              isCompleted: false,\n              onPress: () => handleGameSegmentClick(game),\n            }))}\n          />,\n          <SegmentedGameCard\n            ref={puzzleRefs}\n            label={data.puzzles.label}\n            value={data.puzzles.data.filter(puzzle => puzzle.solved).length}\n            maxValue={data.puzzles.data.length}\n            initialValue={data.puzzles.initialProgressValue}\n            data={data.puzzles.data.map(puzzle => ({\n              card: puzzle.cardLottie,\n              name: puzzle.name,\n              isCompleted: puzzle.solved,\n              onPress: () => handlePuzzleSegmentClick(puzzle),\n            }))}\n          />,\n        ];\n\n        if (data.tables && enableTables) {\n          itemTypes = [\n            ...itemTypes,\n            <TablesCard\n              label={data.tables.label}\n              data={data.tables.data}\n              onPress={onTableSegmentClick}\n              openModesOfTable={data.tables.openModesOfTable}\n            />,\n          ];\n        }\n      }\n\n      return itemTypes;\n    }, [\n      data,\n      gameRefs,\n      lessonRefs,\n      puzzleRefs,\n      handleLessonSegmentClick,\n      onTableSegmentClick,\n      handlePuzzleSegmentClick,\n      handleGameSegmentClick,\n      enableTables,\n    ]);\n\n    const sleepyBoiItem = useMemo(\n      () => [\n        <LottieAnimation\n          src={LOTTIE.SLEEPY_BOI}\n          width={sleepyBoiDimension}\n          height={sleepyBoiDimension}\n        />,\n      ],\n      [],\n    );\n\n    // Start game launcher journey when the data for puzzles is available\n    useEffect(() => {\n      if (data?.puzzles && journeyId && isJourneyInProgress) {\n        startJourney(data?.puzzles, !!data?.lessons, journeyId);\n      }\n    }, [data?.lessons, data?.puzzles, isJourneyInProgress, journeyId, startJourney]);\n\n    if (isLoading) {\n      return <CircularLoader />;\n    }\n\n    if (!data) {\n      return (\n        <Carousel\n          ref={carouselNextBtnRef}\n          items={sleepyBoiItem}\n          analyticsNext={{\n            analyticsLabel: '',\n          }}\n          analyticsPrev={{\n            analyticsLabel: '',\n          }}\n        />\n      );\n    }\n\n    return (\n      <Carousel\n        ref={carouselNextBtnRef}\n        items={items}\n        defaultIndex={currentIndex}\n        onNext={playSwipSound}\n        onPrev={playSwipSound}\n        analyticsNext={{\n          analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.NEXT_ACTIVITY,\n        }}\n        analyticsPrev={{\n          analyticsLabel: GAME_LAUNCHER_ANALYTICS_EVENTS.PREV_ACTIVITY,\n        }}\n      />\n    );\n  },\n);\n"],"names":["sleepyBoiDimension","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","GameLauncher","memo","onSegmentClick","onJourneyComplete","journeyId","data","isLoading","defaultIndex","currentIndex","setCurrentIndex","useState","enableTables","playSwipSound","play","useCircleSounds","gameRefs","lessonRefs","puzzleRefs","startJourney","carouselNextBtnRef","isJourneyInProgress","useGameLauncherJourney","onTableSegmentClick","useCallback","table","CircleSoundKey","ProjectType","handleLessonSegmentClick","lesson","handleGameSegmentClick","game","handlePuzzleSegmentClick","puzzle","items","useMemo","itemTypes","jsx","SegmentedGameCard","TablesCard","sleepyBoiItem","LottieAnimation","LOTTIE","useEffect","CircularLoader","Carousel","GAME_LAUNCHER_ANALYTICS_EVENTS"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import o, { keyframes as e } from "styled-components";
-import { GAME_LAUNCHER_SIZE as r } from "../../circle-games/game-launcher/comps/card-container/constants.js";
+import { GAME_LAUNCHER_SIZE as r, GAME_LAUNCHER_SIZE_LARGE as s } from "../../circle-games/game-launcher/comps/card-container/constants.js";
 import i from "../../ui/text/text.js";
 import { ADJUSTED_START_ANGLE as n } from "./comp/animated-arc/constants.js";
-import { CONTENT_CONTAINER_Z_INDEX as s, LINE_MARKING_Z_INDEX as l, NUMBER_MARKING_Z_INDEX as d, TARGET_HELPER_TEXT_APPEAR_DELAY as a, RAINBOW_COLOR_ANIMATION_DURATION as m } from "./constants.js";
-import { rainbowColorAnimation as p } from "./helper.js";
+import { CONTENT_CONTAINER_Z_INDEX as l, LINE_MARKING_Z_INDEX as d, NUMBER_MARKING_Z_INDEX as m, TARGET_HELPER_TEXT_APPEAR_DELAY as a, RAINBOW_COLOR_ANIMATION_DURATION as p } from "./constants.js";
+import { rainbowColorAnimation as f } from "./helper.js";
 const g = o.div`
   height: ${r}px;
   width: ${r}px;
@@ -16,12 +16,12 @@ const g = o.div`
   border: 1px solid ${({ theme: t }) => t.colors.WHITE};
   animation: ${({ $isTargetAchieved: t }) => t ? e`100%{transform: scale(1.02)}` : "unset"}
     0.133s ease alternate;
-`, E = o.div`
+`, N = o.div`
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
-  z-index: ${s};
+  z-index: ${l};
   height: 92%;
   width: 92%;
   border-radius: 100%;
@@ -29,7 +29,7 @@ const g = o.div`
 `, b = o.div`
   position: relative;
   flex-grow: 1;
-  bottom: -12px;
+  bottom: ${r === s ? -8 : -6}px;
 `;
 o.div`
   position: absolute;
@@ -45,22 +45,22 @@ const u = o.div`
   transform: rotate(${({ $angle: t }) => -240 + t}deg);
   left: ${r / 2}px;
   top: ${r / 2}px;
-  z-index: ${l};
-`, N = o.div`
-  position: absolute;
-  height: ${r - 32}px;
-  transform: rotate(${({ $angle: t }) => -n + t}deg);
   z-index: ${d};
 `, T = o.div`
-  transform: rotate(${({ $angle: t }) => n - t}deg);
+  position: absolute;
+  height: ${r - r * 0.0625 - 10}px;
+  transform: rotate(${({ $angle: t }) => -n + t}deg);
+  z-index: ${m};
 `, h = o.div`
+  transform: rotate(${({ $angle: t }) => n - t}deg);
+`, C = o.div`
   position: absolute;
   top: 0;
   transform: ${({ top: t }) => `translateY(${t}px)`};
-`, C = o(i)`
+`, R = o(i)`
   animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
     ease-in-out ${a}s forwards;
-`, v = o(i)`
+`, I = o(i)`
   animation: ${e`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s
     ease ${a}s forwards;
 `;
@@ -68,20 +68,20 @@ o.div`
   height: 100%;
   width: 100%;
 `;
-const I = o(i)`
-  animation: ${({ $isTargetAchieved: t }) => t ? p : "unset"}
-    ${m}s ease infinite forwards;
+const v = o(i)`
+  animation: ${({ $isTargetAchieved: t }) => t ? f : "unset"}
+    ${p}s ease infinite forwards;
 `;
 export {
-  h as BottomAbsoluteView,
-  E as ContentContainer,
+  C as BottomAbsoluteView,
+  N as ContentContainer,
   g as DigitalMeter,
-  C as HelperTextPrimary,
-  v as HelperTextSecondary,
+  R as HelperTextPrimary,
+  I as HelperTextSecondary,
   u as LineMarking,
-  N as MarkingContainer,
-  T as MarkingText,
+  T as MarkingContainer,
+  h as MarkingText,
   b as NumberCountContainer,
-  I as RainboxColorText
+  v as RainboxColorText
 };
 //# sourceMappingURL=digital-meter-styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"digital-meter-styled.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport Text from '../../ui/text/text';\nimport { ADJUSTED_START_ANGLE } from './comp/animated-arc/constants';\nimport {\n  CONTENT_CONTAINER_Z_INDEX,\n  LINE_MARKING_Z_INDEX,\n  NUMBER_MARKING_Z_INDEX,\n  RAINBOW_COLOR_ANIMATION_DURATION,\n  TARGET_HELPER_TEXT_APPEAR_DELAY,\n} from './constants';\nimport { rainbowColorAnimation } from './helper';\n\nexport const DigitalMeter = styled.div<{ $isTargetAchieved: boolean }>`\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  background-color: ${({ theme }) => theme.colors.BLACK_2};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  border-radius: 100%;\n  border: 1px solid ${({ theme }) => theme.colors.WHITE};\n  animation: ${({ $isTargetAchieved }) =>\n      $isTargetAchieved ? keyframes`100%{transform: scale(1.02)}` : 'unset'}\n    0.133s ease alternate;\n`;\n\nexport const ContentContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  z-index: ${CONTENT_CONTAINER_Z_INDEX};\n  height: 92%;\n  width: 92%;\n  border-radius: 100%;\n  background-color: ${({ theme }) => theme.colors.BLACK_2};\n`;\n\nexport const NumberCountContainer = styled.div`\n  position: relative;\n  flex-grow: 1;\n  bottom: -12px;\n`;\n\nexport const AbsoluteView = styled.div`\n  position: absolute;\n`;\n\nexport const LineMarking = styled.div<{\n  $angle: number;\n}>`\n  width: ${GAME_LAUNCHER_SIZE / 2}px;\n  height: 2px;\n  position: absolute;\n  background-color: ${({ theme }) => theme.colors.BLACK_2};\n  transform-style: preserve-3d;\n  backface-visibility: hidden;\n  transform-origin: left;\n  transform: rotate(${({ $angle }) => -240 + $angle}deg);\n  left: ${GAME_LAUNCHER_SIZE / 2}px;\n  top: ${GAME_LAUNCHER_SIZE / 2}px;\n  z-index: ${LINE_MARKING_Z_INDEX};\n`;\n\nexport const MarkingContainer = styled.div<{ $angle: number }>`\n  position: absolute;\n  height: ${GAME_LAUNCHER_SIZE - 32}px;\n  transform: rotate(${({ $angle }) => -ADJUSTED_START_ANGLE + $angle}deg);\n  z-index: ${NUMBER_MARKING_Z_INDEX};\n`;\n\nexport const MarkingText = styled.div<{ $angle: number }>`\n  transform: rotate(${({ $angle }) => ADJUSTED_START_ANGLE - $angle}deg);\n`;\n\nexport const BottomAbsoluteView = styled.div<{ top: number }>`\n  position: absolute;\n  top: 0;\n  transform: ${({ top }) => `translateY(${top}px)`};\n`;\n\nexport const HelperTextPrimary = styled(Text)`\n  animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n    ease-in-out ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const HelperTextSecondary = styled(Text)`\n  animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n    ease ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const TargetAchievedTextLottie = styled.div`\n  height: 100%;\n  width: 100%;\n`;\n\nexport const RainboxColorText = styled(Text)<{ $isTargetAchieved: boolean }>`\n  animation: ${({ $isTargetAchieved }) => ($isTargetAchieved ? rainbowColorAnimation : 'unset')}\n    ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["DigitalMeter","styled","GAME_LAUNCHER_SIZE","theme","$isTargetAchieved","keyframes","ContentContainer","CONTENT_CONTAINER_Z_INDEX","NumberCountContainer","LineMarking","$angle","LINE_MARKING_Z_INDEX","MarkingContainer","ADJUSTED_START_ANGLE","NUMBER_MARKING_Z_INDEX","MarkingText","BottomAbsoluteView","top","HelperTextPrimary","Text","TARGET_HELPER_TEXT_APPEAR_DELAY","HelperTextSecondary","RainboxColorText","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;;;AAcO,MAAMA,IAAeC,EAAO;AAAA,YACvBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA,sBACP,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMnC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,eACxC,CAAC,EAAE,mBAAAC,QACZA,IAAoBC,kCAA0C,OAAO;AAAA;AAAA,GAI9DC,IAAmBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAK1BM,CAAyB;AAAA;AAAA;AAAA;AAAA,sBAIhB,CAAC,EAAE,OAAAJ,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,GAG5CK,IAAuBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAMfA,EAAO;AAAA;AAAA;AAI5B,MAAMQ,IAAcR,EAAO;AAAA,WAGvBC,IAAqB,CAAC;AAAA;AAAA;AAAA,sBAGX,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAInC,CAAC,EAAE,QAAAO,EAAO,MAAM,OAAOA,CAAM;AAAA,UACzCR,IAAqB,CAAC;AAAA,SACvBA,IAAqB,CAAC;AAAA,aAClBS,CAAoB;AAAA,GAGpBC,IAAmBX,EAAO;AAAA;AAAA,YAE3BC,IAAqB,EAAE;AAAA,sBACb,CAAC,EAAE,QAAAQ,EAAA,MAAa,CAACG,IAAuBH,CAAM;AAAA,aACvDI,CAAsB;AAAA,GAGtBC,IAAcd,EAAO;AAAA,sBACZ,CAAC,EAAE,QAAAS,QAAaG,IAAuBH,CAAM;AAAA,GAGtDM,IAAqBf,EAAO;AAAA;AAAA;AAAA,eAG1B,CAAC,EAAE,KAAAgB,EAAU,MAAA,cAAcA,CAAG,KAAK;AAAA,GAGrCC,IAAoBjB,EAAOkB,CAAI;AAAA,eAC7Bd,iEAAyE;AAAA,kBACtEe,CAA+B;AAAA,GAGpCC,IAAsBpB,EAAOkB,CAAI;AAAA,eAC/Bd,iEAAyE;AAAA,WAC7Ee,CAA+B;AAAA;AAGFnB,EAAO;AAAA;AAAA;AAAA;AAKlC,MAAAqB,IAAmBrB,EAAOkB,CAAI;AAAA,eAC5B,CAAC,EAAE,mBAAAf,EAAA,MAAyBA,IAAoBmB,IAAwB,OAAQ;AAAA,MACzFC,CAAgC;AAAA;"}
+{"version":3,"file":"digital-meter-styled.js","sources":["../../../../src/features/post-game-stats/digital-meter/digital-meter-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nimport {\n  GAME_LAUNCHER_SIZE,\n  GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport Text from '../../ui/text/text';\nimport { ADJUSTED_START_ANGLE } from './comp/animated-arc/constants';\nimport {\n  CONTENT_CONTAINER_Z_INDEX,\n  LINE_MARKING_Z_INDEX,\n  NUMBER_MARKING_Z_INDEX,\n  RAINBOW_COLOR_ANIMATION_DURATION,\n  TARGET_HELPER_TEXT_APPEAR_DELAY,\n} from './constants';\nimport { rainbowColorAnimation } from './helper';\n\nexport const DigitalMeter = styled.div<{ $isTargetAchieved: boolean }>`\n  height: ${GAME_LAUNCHER_SIZE}px;\n  width: ${GAME_LAUNCHER_SIZE}px;\n  background-color: ${({ theme }) => theme.colors.BLACK_2};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  border-radius: 100%;\n  border: 1px solid ${({ theme }) => theme.colors.WHITE};\n  animation: ${({ $isTargetAchieved }) =>\n      $isTargetAchieved ? keyframes`100%{transform: scale(1.02)}` : 'unset'}\n    0.133s ease alternate;\n`;\n\nexport const ContentContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  z-index: ${CONTENT_CONTAINER_Z_INDEX};\n  height: 92%;\n  width: 92%;\n  border-radius: 100%;\n  background-color: ${({ theme }) => theme.colors.BLACK_2};\n`;\n\nexport const NumberCountContainer = styled.div`\n  position: relative;\n  flex-grow: 1;\n  bottom: ${GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? -8 : -6}px;\n`;\n\nexport const AbsoluteView = styled.div`\n  position: absolute;\n`;\n\nexport const LineMarking = styled.div<{\n  $angle: number;\n}>`\n  width: ${GAME_LAUNCHER_SIZE / 2}px;\n  height: 2px;\n  position: absolute;\n  background-color: ${({ theme }) => theme.colors.BLACK_2};\n  transform-style: preserve-3d;\n  backface-visibility: hidden;\n  transform-origin: left;\n  transform: rotate(${({ $angle }) => -240 + $angle}deg);\n  left: ${GAME_LAUNCHER_SIZE / 2}px;\n  top: ${GAME_LAUNCHER_SIZE / 2}px;\n  z-index: ${LINE_MARKING_Z_INDEX};\n`;\n\nexport const MarkingContainer = styled.div<{ $angle: number }>`\n  position: absolute;\n  height: ${GAME_LAUNCHER_SIZE - GAME_LAUNCHER_SIZE * 0.0625 - 10}px;\n  transform: rotate(${({ $angle }) => -ADJUSTED_START_ANGLE + $angle}deg);\n  z-index: ${NUMBER_MARKING_Z_INDEX};\n`;\n\nexport const MarkingText = styled.div<{ $angle: number }>`\n  transform: rotate(${({ $angle }) => ADJUSTED_START_ANGLE - $angle}deg);\n`;\n\nexport const BottomAbsoluteView = styled.div<{ top: number }>`\n  position: absolute;\n  top: 0;\n  transform: ${({ top }) => `translateY(${top}px)`};\n`;\n\nexport const HelperTextPrimary = styled(Text)`\n  animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n    ease-in-out ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const HelperTextSecondary = styled(Text)`\n  animation: ${keyframes`from{transform: translateY(-6px)} to{transform: translateY(0)}`} 0.133s\n    ease ${TARGET_HELPER_TEXT_APPEAR_DELAY}s forwards;\n`;\n\nexport const TargetAchievedTextLottie = styled.div`\n  height: 100%;\n  width: 100%;\n`;\n\nexport const RainboxColorText = styled(Text)<{ $isTargetAchieved: boolean }>`\n  animation: ${({ $isTargetAchieved }) => ($isTargetAchieved ? rainbowColorAnimation : 'unset')}\n    ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["DigitalMeter","styled","GAME_LAUNCHER_SIZE","theme","$isTargetAchieved","keyframes","ContentContainer","CONTENT_CONTAINER_Z_INDEX","NumberCountContainer","GAME_LAUNCHER_SIZE_LARGE","LineMarking","$angle","LINE_MARKING_Z_INDEX","MarkingContainer","ADJUSTED_START_ANGLE","NUMBER_MARKING_Z_INDEX","MarkingText","BottomAbsoluteView","top","HelperTextPrimary","Text","TARGET_HELPER_TEXT_APPEAR_DELAY","HelperTextSecondary","RainboxColorText","rainbowColorAnimation","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;;;;;AAiBO,MAAMA,IAAeC,EAAO;AAAA,YACvBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA,sBACP,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMnC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,eACxC,CAAC,EAAE,mBAAAC,QACZA,IAAoBC,kCAA0C,OAAO;AAAA;AAAA,GAI9DC,IAAmBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAK1BM,CAAyB;AAAA;AAAA;AAAA;AAAA,sBAIhB,CAAC,EAAE,OAAAJ,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,GAG5CK,IAAuBP,EAAO;AAAA;AAAA;AAAA,YAG/BC,MAAuBO,IAA2B,KAAK,EAAE;AAAA;AAGzCR,EAAO;AAAA;AAAA;AAI5B,MAAMS,IAAcT,EAAO;AAAA,WAGvBC,IAAqB,CAAC;AAAA;AAAA;AAAA,sBAGX,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAInC,CAAC,EAAE,QAAAQ,EAAO,MAAM,OAAOA,CAAM;AAAA,UACzCT,IAAqB,CAAC;AAAA,SACvBA,IAAqB,CAAC;AAAA,aAClBU,CAAoB;AAAA,GAGpBC,IAAmBZ,EAAO;AAAA;AAAA,YAE3BC,IAAqBA,IAAqB,SAAS,EAAE;AAAA,sBAC3C,CAAC,EAAE,QAAAS,EAAA,MAAa,CAACG,IAAuBH,CAAM;AAAA,aACvDI,CAAsB;AAAA,GAGtBC,IAAcf,EAAO;AAAA,sBACZ,CAAC,EAAE,QAAAU,QAAaG,IAAuBH,CAAM;AAAA,GAGtDM,IAAqBhB,EAAO;AAAA;AAAA;AAAA,eAG1B,CAAC,EAAE,KAAAiB,EAAU,MAAA,cAAcA,CAAG,KAAK;AAAA,GAGrCC,IAAoBlB,EAAOmB,CAAI;AAAA,eAC7Bf,iEAAyE;AAAA,kBACtEgB,CAA+B;AAAA,GAGpCC,IAAsBrB,EAAOmB,CAAI;AAAA,eAC/Bf,iEAAyE;AAAA,WAC7EgB,CAA+B;AAAA;AAGFpB,EAAO;AAAA;AAAA;AAAA;AAKlC,MAAAsB,IAAmBtB,EAAOmB,CAAI;AAAA,eAC5B,CAAC,EAAE,mBAAAhB,EAAA,MAAyBA,IAAoBoB,IAAwB,OAAQ;AAAA,MACzFC,CAAgC;AAAA;"}

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

@@ -1,135 +1,149 @@
 import { jsxs as c, jsx as r, Fragment as E } from "react/jsx-runtime";
-import { memo as G, useState as O, useEffect as M } from "react";
-import { LOTTIE as W } from "../../../assets/lottie/lottie.js";
-import { GAME_LAUNCHER_SIZE as d } from "../../circle-games/game-launcher/comps/card-container/constants.js";
-import a from "../../ui/layout/flex-view.js";
-import y from "../../ui/lottie-animation/lottie-animation.js";
-import p from "../../ui/separator/separator.js";
-import R from "../../ui/text/text.js";
-import { NumberCountAnimation as w } from "../number-count-animation/number-count-animation.js";
-import { AnimatedArc as _ } from "./comp/animated-arc/animated-arc.js";
-import { TARGET_ACHIEVED_DELAY as L, TOTAL_ARC_AVAILABLE as A, BORDER_OFFSET as $, PROGRESS_FILL_DURATION as s, PROGRESS_FILL_DELAY as f, TOTAL_ANIMATION_DURATION as B } from "./constants.js";
-import { DigitalMeter as u, ContentContainer as P, NumberCountContainer as U, RainboxColorText as g, LineMarking as C, MarkingContainer as D, MarkingText as N, BottomAbsoluteView as S, HelperTextPrimary as j, HelperTextSecondary as Y } from "./digital-meter-styled.js";
-const or = G(
+import { memo as M, useState as O, useEffect as W } from "react";
+import { LOTTIE as y } from "../../../assets/lottie/lottie.js";
+import { GAME_LAUNCHER_SIZE as i, GAME_LAUNCHER_SIZE_LARGE as l } from "../../circle-games/game-launcher/comps/card-container/constants.js";
+import _ from "../../ui/layout/flex-view.js";
+import w from "../../ui/lottie-animation/lottie-animation.js";
+import $ from "../../ui/separator/separator.js";
+import L from "../../ui/text/text.js";
+import { NumberCountAnimation as B } from "../number-count-animation/number-count-animation.js";
+import { AnimatedArc as f } from "./comp/animated-arc/animated-arc.js";
+import { TARGET_ACHIEVED_DELAY as b, TOTAL_ARC_AVAILABLE as m, BORDER_OFFSET as g, PROGRESS_FILL_DURATION as s, PROGRESS_FILL_DELAY as I, TOTAL_ANIMATION_DURATION as U } from "./constants.js";
+import { DigitalMeter as u, ContentContainer as P, NumberCountContainer as j, RainboxColorText as R, LineMarking as k, MarkingContainer as C, MarkingText as D, BottomAbsoluteView as N, HelperTextPrimary as Y, HelperTextSecondary as Z } from "./digital-meter-styled.js";
+const tr = M(
   ({
     show: T,
-    value: m,
+    value: a,
     maxValue: n,
-    targetValue: i = 0,
-    displayText: b,
-    progressType: h,
-    helperTextPrimary: k,
+    targetValue: o = 0,
+    displayText: S,
+    progressType: d,
+    helperTextPrimary: G,
     helperTextSecondary: H,
-    onComplete: I
+    onComplete: p
   }) => {
-    const [l, F] = O(!1);
-    return M(() => {
-      let o, e;
-      const t = !!(i && m >= i);
-      return T && (t && (o = setTimeout(() => {
+    const [h, F] = O(!1);
+    return W(() => {
+      let t, e;
+      const A = !!(o && a >= o);
+      return T && (A && (t = setTimeout(() => {
         F(!0);
-      }, L * 1e3)), e = setTimeout(() => {
-        I();
-      }, (t ? B : L) * 1e3)), () => {
-        o && clearTimeout(o), e && clearTimeout(e);
+      }, b * 1e3)), e = setTimeout(() => {
+        p();
+      }, (A ? U : b) * 1e3)), () => {
+        t && clearTimeout(t), e && clearTimeout(e);
       };
-    }, [T, m, i, I]), T ? /* @__PURE__ */ c(u, { $isTargetAchieved: l, children: [
+    }, [T, a, o, p]), T ? /* @__PURE__ */ c(u, { $isTargetAchieved: h, children: [
       /* @__PURE__ */ r(
-        _,
+        f,
         {
-          targetAngle: A,
-          strokeWidth: 16,
+          targetAngle: m,
+          strokeWidth: i === l ? 16 : 12,
           color: "BLACK_5",
-          radius: (d - $) / 2,
+          radius: (i - g) / 2,
           duration: 0
         }
       ),
-      /* @__PURE__ */ r(P, { children: /* @__PURE__ */ c(a, { $flexDirection: "column", $alignItems: "center", children: [
-        /* @__PURE__ */ c(a, { $flexDirection: "row", $alignItems: "flex-end", children: [
-          /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(
-            g,
+      /* @__PURE__ */ r(P, { children: /* @__PURE__ */ c(_, { $flexDirection: "column", $alignItems: "center", children: [
+        /* @__PURE__ */ c(_, { $flexDirection: "row", $alignItems: "flex-end", children: [
+          /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(
+            R,
             {
-              $renderAs: "ah1",
+              $renderAs: i === l ? "ah1" : "ah2",
               $color: "GREEN_4",
-              $isTargetAchieved: l,
+              $isTargetAchieved: h,
               children: /* @__PURE__ */ r(
-                w,
+                B,
                 {
                   initialValue: 0,
-                  targetValue: Math.floor(m),
+                  targetValue: Math.floor(a),
                   durationInSec: s,
-                  delayInSec: f
+                  delayInSec: I
                 }
               )
             }
           ) }),
-          h === "stepper" && /* @__PURE__ */ c(R, { $renderAs: "ac2", $color: "WHITE", children: [
-            "/",
-            n
-          ] })
+          d === "stepper" && /* @__PURE__ */ c(
+            L,
+            {
+              $renderAs: i === l ? "ah4" : "ab1",
+              $color: "WHITE",
+              children: [
+                "/",
+                n
+              ]
+            }
+          )
         ] }),
-        /* @__PURE__ */ r(p, { height: 8 }),
-        /* @__PURE__ */ r(R, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: b })
+        /* @__PURE__ */ r($, { height: 8 }),
+        /* @__PURE__ */ r(
+          L,
+          {
+            $renderAs: i === l ? "ac3-black" : "ac4-black",
+            $color: "WHITE_T_60",
+            children: S
+          }
+        )
       ] }) }),
-      h === "stepper" && Array.from({ length: m }, (o, e) => {
-        const t = A / n;
+      d === "stepper" && Array.from({ length: a }, (t, e) => {
+        const A = m / n;
         return /* @__PURE__ */ r(
-          _,
+          f,
           {
-            startAngle: t * e,
-            targetAngle: t,
-            strokeWidth: 12,
+            startAngle: A * e,
+            targetAngle: A,
+            strokeWidth: i === l ? 16 : 12,
             color: "GREEN_4",
-            radius: (d - $) / 2,
+            radius: (i - g) / 2,
             mode: "fade",
             duration: s / n,
-            delay: f + s / n * e,
-            playRainbowColors: l
+            delay: I + s / n * e,
+            playRainbowColors: h
           },
           e
         );
       }),
-      h === "stepper" && Array.from({ length: n + 1 }, (o, e) => {
-        const t = A / n;
+      d === "stepper" && Array.from({ length: n + 1 }, (t, e) => {
+        const A = m / n;
         return /* @__PURE__ */ c(E, { children: [
-          /* @__PURE__ */ r(C, { $angle: t * e }, e + "linemarking"),
-          /* @__PURE__ */ r(D, { $angle: t * e, children: /* @__PURE__ */ r(N, { $angle: t * e, children: /* @__PURE__ */ r(
-            g,
+          /* @__PURE__ */ r(k, { $angle: A * e }, e + "linemarking"),
+          /* @__PURE__ */ r(C, { $angle: A * e, children: /* @__PURE__ */ r(D, { $angle: A * e, children: /* @__PURE__ */ r(
+            R,
             {
-              $renderAs: "ac4-black",
-              $isTargetAchieved: e === i && l,
-              $color: i && e === i ? "GREEN_4" : "WHITE_T_60",
+              $renderAs: i === l ? "ac3-black" : "ac4-black",
+              $isTargetAchieved: e === o && h,
+              $color: o && e === o ? "GREEN_4" : "WHITE_T_60",
               children: e
             }
           ) }) }, e)
         ] });
       }),
-      h === "linear" && /* @__PURE__ */ c(E, { children: [
+      d === "linear" && /* @__PURE__ */ c(E, { children: [
         /* @__PURE__ */ r(
-          _,
+          f,
           {
-            targetAngle: m * A / n,
-            strokeWidth: 12,
+            targetAngle: a * m / n,
+            strokeWidth: i === l ? 16 : 12,
             color: "GREEN_4",
-            radius: (d - $) / 2,
+            radius: (i - g) / 2,
             duration: s,
-            delay: f,
-            playRainbowColors: l
+            delay: I,
+            playRainbowColors: h
           }
         ),
         /* @__PURE__ */ c(E, { children: [
-          i && /* @__PURE__ */ r(C, { $angle: i * A / n }),
-          Array.from(/* @__PURE__ */ new Set([0, i, n])).map((o, e) => /* @__PURE__ */ r(
-            D,
+          o && /* @__PURE__ */ r(k, { $angle: o * m / n }),
+          Array.from(/* @__PURE__ */ new Set([0, o, n])).map((t, e) => /* @__PURE__ */ r(
+            C,
             {
-              $angle: o * A / n,
-              children: /* @__PURE__ */ r(N, { $angle: o * A / n, children: /* @__PURE__ */ r(
-                g,
+              $angle: t * m / n,
+              children: /* @__PURE__ */ r(D, { $angle: t * m / n, children: /* @__PURE__ */ r(
+                R,
                 {
-                  $renderAs: "ac4-black",
-                  $color: i && o === i ? "GREEN_4" : "WHITE_T_60",
-                  $isTargetAchieved: m >= o && l && o === i,
-                  children: o
+                  $renderAs: i === l ? "ac3-black" : "ac4-black",
+                  $color: o && t === o ? "GREEN_4" : "WHITE_T_60",
+                  $isTargetAchieved: a >= t && h && t === o,
+                  children: t
                 }
               ) })
             },
@@ -137,18 +151,35 @@ const or = G(
           ))
         ] })
       ] }),
-      l && /* @__PURE__ */ r(S, { top: d, children: /* @__PURE__ */ r(y, { src: W.TARGET_ACHIEVED_TEXT }) }),
-      !l && /* @__PURE__ */ c(S, { top: d, children: [
-        /* @__PURE__ */ r(p, { height: 25 }),
-        /* @__PURE__ */ c(a, { $flexDirection: "column", $alignItems: "center", children: [
-          /* @__PURE__ */ r(j, { $renderAs: "ac4-black", $color: "WHITE_T_60", children: k }),
-          /* @__PURE__ */ r(Y, { $renderAs: "ab1", $color: "WHITE", children: H })
+      h && /* @__PURE__ */ r(N, { top: i, children: /* @__PURE__ */ r(w, { src: y.TARGET_ACHIEVED_TEXT }) }),
+      !h && /* @__PURE__ */ c(N, { top: i, children: [
+        /* @__PURE__ */ r($, { height: 25 }),
+        /* @__PURE__ */ c(_, { $flexDirection: "column", $alignItems: "center", children: [
+          /* @__PURE__ */ c(
+            Y,
+            {
+              $renderAs: i === l ? "ac3-black" : "ac4-black",
+              $color: "WHITE_T_60",
+              children: [
+                G,
+                /* @__PURE__ */ r($, { height: i * 0.03 })
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            Z,
+            {
+              $renderAs: i === l ? "ah4" : "ab1",
+              $color: "WHITE",
+              children: H
+            }
+          )
         ] })
       ] })
     ] }) : null;
   }
 );
 export {
-  or as DigitalMeter
+  tr as DigitalMeter
 };
 //# sourceMappingURL=digital-meter.js.map