npm - @cuemath/leap - Versions diffs - 3.2.2-akm-2 → 3.2.2-ppa-beta-0.1 - Mend

@cuemath/leap 3.2.2-akm-2 → 3.2.2-ppa-beta-0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/assets/line-icons/icons/hint-fill.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+const t = (L) => /* @__PURE__ */ i(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...L,
+    children: [
+      /* @__PURE__ */ l(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.5 3.69923V2.70001H11.5V3.70001L12.5 3.69923ZM20 10.2015H19V11.2015H20V10.2015ZM17.9424 7.0043L18.8084 6.5043L19.3084 7.37033L18.4424 7.87033L17.9424 7.0043ZM15.8043 3.66699L15.3043 4.53302L16.1703 5.03302L16.6703 4.16699L15.8043 3.66699ZM5 11.2015H4V10.2015H5V11.2015ZM9.11621 4.59494L8.61621 3.72891L7.75019 4.22891L8.25019 5.09494L9.11621 4.59494ZM5.60211 6.35647L6.46813 6.85647L5.96813 7.7225L5.10211 7.2225L5.60211 6.35647ZM7.6 10.8499C7.6 8.41986 9.56995 6.44991 12 6.44991C14.4301 6.44991 16.4 8.41986 16.4 10.8499C16.4 12.422 15.5758 13.8022 14.3334 14.581H9.66658C8.42416 13.8022 7.6 12.422 7.6 10.8499ZM12 5.24991C8.90721 5.24991 6.4 7.75712 6.4 10.8499C6.4 12.9235 7.52729 14.733 9.19957 15.7004L9.33896 15.781H14.661L14.8004 15.7004C16.4727 14.733 17.6 12.9235 17.6 10.8499C17.6 7.75712 15.0928 5.24991 12 5.24991ZM9.5 16.6112V17.8112H14.5V16.6112H9.5ZM10.5 19.7526V18.5526H13.5V19.7526H10.5Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ l(
+        "path",
+        {
+          className: "hint-fill-icon-path",
+          d: "M12 6.44991C9.56995 6.44991 7.6 8.41986 7.6 10.8499C7.6 12.422 8.42416 13.8022 9.66658 14.581H14.3334C15.5758 13.8022 16.4 12.422 16.4 10.8499C16.4 8.41986 14.4301 6.44991 12 6.44991Z",
+          fill: "#FFB700"
+        }
+      )
+    ]
+  }
+), o = t;
+export {
+  o as default
+};
+//# sourceMappingURL=hint-fill.js.map

package/dist/assets/line-icons/icons/hint-fill.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hint-fill.js","sources":["../../../../src/assets/line-icons/icons/hint-fill.tsx"],"sourcesContent":["const HintFillIcon: React.FC<React.SVGProps<SVGSVGElement>> = props => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12.5 3.69923V2.70001H11.5V3.70001L12.5 3.69923ZM20 10.2015H19V11.2015H20V10.2015ZM17.9424 7.0043L18.8084 6.5043L19.3084 7.37033L18.4424 7.87033L17.9424 7.0043ZM15.8043 3.66699L15.3043 4.53302L16.1703 5.03302L16.6703 4.16699L15.8043 3.66699ZM5 11.2015H4V10.2015H5V11.2015ZM9.11621 4.59494L8.61621 3.72891L7.75019 4.22891L8.25019 5.09494L9.11621 4.59494ZM5.60211 6.35647L6.46813 6.85647L5.96813 7.7225L5.10211 7.2225L5.60211 6.35647ZM7.6 10.8499C7.6 8.41986 9.56995 6.44991 12 6.44991C14.4301 6.44991 16.4 8.41986 16.4 10.8499C16.4 12.422 15.5758 13.8022 14.3334 14.581H9.66658C8.42416 13.8022 7.6 12.422 7.6 10.8499ZM12 5.24991C8.90721 5.24991 6.4 7.75712 6.4 10.8499C6.4 12.9235 7.52729 14.733 9.19957 15.7004L9.33896 15.781H14.661L14.8004 15.7004C16.4727 14.733 17.6 12.9235 17.6 10.8499C17.6 7.75712 15.0928 5.24991 12 5.24991ZM9.5 16.6112V17.8112H14.5V16.6112H9.5ZM10.5 19.7526V18.5526H13.5V19.7526H10.5Z\"\n fill=\"currentColor\"\n />\n <path\n className=\"hint-fill-icon-path\"\n d=\"M12 6.44991C9.56995 6.44991 7.6 8.41986 7.6 10.8499C7.6 12.422 8.42416 13.8022 9.66658 14.581H14.3334C15.5758 13.8022 16.4 12.422 16.4 10.8499C16.4 8.41986 14.4301 6.44991 12 6.44991Z\"\n fill=\"#FFB700\"\n />\n </svg>\n);\n\nexport default HintFillIcon;\n"],"names":["HintFillIcon","props","jsxs","jsx","HintFillIcon$1"],"mappings":";AAAA,MAAMA,IAAwD,CAC5DC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,UAAS;AAAA,UACT,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MACP;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AACF,GAGFC,IAAeJ;"}

package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as t, Fragment as v } from "react/jsx-runtime";
-import { useRef as H, useCallback as m, useMemo as pe, useEffect as _e } from "react";
+import { useRef as H, useCallback as g, useMemo as pe, useEffect as _e } from "react";
 import ae from "../../../../../assets/line-icons/icons/carat-right.js";
 import { PLATFORM_EVENTS_STUDENT as ce } from "../../../../analytics-events/platform-events-student.js";
 import { JOURNEY_ID_STUDENT as U } from "../../../../journey/journey-id/journey-id-student.js";
@@ -10,32 +10,32 @@ import { useUIContext as Ae } from "../../../../ui/context/context.js";
 import G from "../../../../ui/layout/flex-view.js";
 import s from "../../../../ui/text/text.js";
 import { getTheme as Ie } from "../../../../ui/theme/get-theme.js";
-import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as g } from "../../../enum/circle-onboarding-steps.js";
+import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as m } from "../../../enum/circle-onboarding-steps.js";
 import { useCircleSounds as Ce } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
 import { SegmentedGameCard as se } from "../../comps/segmented-game-card/segmented-game-card.js";
 import { GAME_LAUNCHER_ANALYTICS_EVENTS as Te } from "../../game-launcher-analytics-events.js";
 import { GO_TO_NEXT_SLIDE_AFTER_MS as Le, SHOW_LABEL_HIGHLIGHT_AFTER_MS as Re, SHOW_NUDGE_AFTER_MS as he, SLIDE_TO_LESSON_MS as Oe } from "./constants.js";
-import { ProjectType as me } from "../../../games/web-view/enums/project-type-enum.js";
+import { ProjectType as ge } from "../../../games/web-view/enums/project-type-enum.js";
 const $e = ({
   carouselRefs: n,
   onSegmentClick: I,
   onJourneyComplete: C
 }) => {
-  const { device: ge } = Ie(), T = ge === "mobile", L = T ? "ab3-bold" : "ab2-bold", i = H(null), l = H(null), a = H(null), u = H([]), { playButtonSound: B } = Ce(), { nextCoachmark: h, setJourney: Y, endJourney: R } = fe(), { onEvent: O } = Ae(), k = m(
+  const { device: me } = Ie(), T = me === "mobile", L = T ? "ab3-bold" : "ab2-bold", i = H(null), l = H(null), a = H(null), u = H([]), { playButtonSound: B } = Ce(), { nextCoachmark: h, setJourney: Y, endJourney: R } = fe(), { onEvent: O } = Ae(), k = g(
     (e) => {
       O(ce.ONBOARDING_STEP_VIEWED, {
         step: e
       });
     },
     [O]
-  ), N = m(
+  ), N = g(
     (e) => {
       O(ce.ONBOARDING_STEP_COMPLETED, {
         step: e
       });
     },
     [O]
-  ), E = m(
+  ), E = g(
     (e, r, c, S = !1, b) => {
       var _, f;
       S || (B(), (f = n.current) == null || f.goToIndex(((_ = n.current) == null ? void 0 : _.currentIndex) + 1), h(b, !1, Le)), k(e);
@@ -45,17 +45,17 @@ const $e = ({
       u.current.push(p), h(b, !0, he);
     },
     [n, h, B, k]
-  ), w = m(
+  ), w = g(
     (e, r) => {
-      I(e, me.PUZZLE), N(g.PUZZLE_ACTIVITY), R(r), C(r);
+      I(e, ge.PUZZLE), N(m.PUZZLE_ACTIVITY), R(r), C(r);
     },
     [R, C, I, N]
-  ), x = m(
+  ), x = g(
     (e, r) => {
-      I(e, me.LESSON), N(g.SKILL_ACTIVITY), R(r), C(r);
+      I(e, ge.LESSON), N(m.SKILL_ACTIVITY), R(r), C(r);
     },
     [R, C, I, N]
-  ), y = m(
+  ), y = g(
     (e, r, c) => {
       var M, W, $, D, X, F, Z, K, q, Q, z, j, ee, te, re, ie, ne, oe, le;
       const S = !!c, b = !!r;
@@ -99,7 +99,7 @@ const $e = ({
               renderAs: "secondary",
               Icon: ae,
               onClick: () => E(
-                g.GAMES_ACTIVITY,
+                m.GAMES_ACTIVITY,
                 l.current,
                 "ORANGE_4",
                 !1,
@@ -122,7 +122,7 @@ const $e = ({
             se,
             {
               label: "",
-              value: c.data.filter((o) => o.status === "completed").length,
+              value: c.data.filter((o) => o.status === "pending").length,
               maxValue: c.data.length,
               initialValue: c.initialProgressValue,
               data: c.data.map((o) => ({
@@ -166,7 +166,7 @@ const $e = ({
                 renderAs: "secondary",
                 Icon: ae,
                 onClick: () => E(
-                  g.PUZZLE_ACTIVITY,
+                  m.PUZZLE_ACTIVITY,
                   a.current,
                   "PURPLE_4",
                   !1,
@@ -232,7 +232,7 @@ const $e = ({
         clearTimeout(J), h(e);
       }, Oe);
       if (u.current.push(J), e === U.CIRCLE_ACTIVITIES_INTRO_JOURNEY)
-        S && i.current ? E(g.SKILL_ACTIVITY, i.current, "BLUE_4", !0, e) : E(g.GAMES_ACTIVITY, l.current, "ORANGE_4", !0, e);
+        S && i.current ? E(m.SKILL_ACTIVITY, i.current, "BLUE_4", !0, e) : E(m.GAMES_ACTIVITY, l.current, "ORANGE_4", !0, e);
       else {
         (le = i.current) == null || le.startLabelAnimation("BLUE_4");
         const o = setTimeout(() => {

package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-game-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.tsx"],"sourcesContent":["import type { ICoachmarkProps } from '../../../../journey/use-journey/journey-context-types';\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type { ISegmentedGameCardRefs } from '../../comps/segmented-game-card/segmented-game-card-types';\nimport type {\n IProject,\n Lesson,\n Puzzle,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseGameLauncherJourneyProps } from './use-game-launcher-journey-types';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT as AnalyticsLabel } from '../../../../analytics-events/platform-events-student';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { getTheme } from '../../../../ui/theme/get-theme';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as ActionEvent } from '../../../enum/circle-onboarding-steps';\nimport { ProjectType } from '../../../games/web-view/enums';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { SegmentedGameCard } from '../../comps/segmented-game-card/segmented-game-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n GO_TO_NEXT_SLIDE_AFTER_MS,\n SHOW_LABEL_HIGHLIGHT_AFTER_MS,\n SHOW_NUDGE_AFTER_MS,\n SLIDE_TO_LESSON_MS,\n} from './constants';\n\nexport const useGameLauncherJourney = ({\n carouselRefs,\n onSegmentClick,\n onJourneyComplete,\n}: IUseGameLauncherJourneyProps) => {\n const { device } = getTheme();\n const isMobile = device === 'mobile';\n const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\n\n const lessonRefs = useRef<ISegmentedGameCardRefs>(null);\n const gameRefs = useRef<ISegmentedGameCardRefs>(null);\n const puzzleRefs = useRef<ISegmentedGameCardRefs>(null);\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney, endJourney } = useJourney();\n const { onEvent: trackAnalytics } = useUIContext();\n\n const trackEventViewed = useCallback(\n (step: ActionEvent) => {\n trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_VIEWED, {\n step,\n });\n },\n [trackAnalytics],\n );\n const trackEventCompleted = useCallback(\n (step: ActionEvent) => {\n trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_COMPLETED, {\n step,\n });\n },\n [trackAnalytics],\n );\n\n const goToNextCard = useCallback(\n (\n analyticsLabelViewed: ActionEvent,\n refOfNextSlide: ISegmentedGameCardRefs,\n color: TColorNames,\n isFirstSlide: boolean = false,\n journeyId: JOURNEY_ID_STUDENT,\n ) => {\n if (!isFirstSlide) {\n playButtonSound();\n carouselRefs.current?.goToIndex(carouselRefs.current?.currentIndex + 1);\n nextCoachmark(journeyId, false, GO_TO_NEXT_SLIDE_AFTER_MS);\n }\n\n trackEventViewed(analyticsLabelViewed);\n\n const animateLabelTimer = setTimeout(() => {\n clearTimeout(animateLabelTimer);\n refOfNextSlide.startLabelAnimation(color);\n }, SHOW_LABEL_HIGHLIGHT_AFTER_MS);\n\n timerRefs.current.push(animateLabelTimer); // Store to cleanup later\n\n nextCoachmark(journeyId, true, SHOW_NUDGE_AFTER_MS);\n },\n [carouselRefs, nextCoachmark, playButtonSound, trackEventViewed],\n );\n\n const handleEndJourneyForPuzzle = useCallback(\n (puzzlesData: Puzzle, journeyId: JOURNEY_ID_STUDENT) => {\n onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n trackEventCompleted(ActionEvent.PUZZLE_ACTIVITY);\n endJourney(journeyId);\n onJourneyComplete(journeyId);\n },\n [endJourney, onJourneyComplete, onSegmentClick, trackEventCompleted],\n );\n\n const handleEndJourneyForLesson = useCallback(\n (lessonsData: Lesson, journeyId: JOURNEY_ID_STUDENT) => {\n onSegmentClick(lessonsData, ProjectType.LESSON);\n trackEventCompleted(ActionEvent.SKILL_ACTIVITY);\n endJourney(journeyId);\n onJourneyComplete(journeyId);\n },\n [endJourney, onJourneyComplete, onSegmentClick, trackEventCompleted],\n );\n\n const startJourney = useCallback(\n (\n journeyId: JOURNEY_ID_STUDENT,\n puzzlesData?: IProject<Puzzle>,\n lessonsData?: IProject<Lesson>,\n ) => {\n // If element refs are not available return, this is just for type safety\n const isLessonAvailable = !!lessonsData;\n const isPuzzleAvailable = !!puzzlesData;\n\n if (!lessonRefs?.current?.segmentedCardWrapperRef.current) return;\n\n if (\n (!carouselRefs?.current?.nextBtnRef.current \|\|\n !gameRefs?.current?.labelRef.current \|\|\n !puzzleRefs?.current?.labelRef.current \|\|\n !puzzlesData) &&\n journeyId === JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY\n ) {\n return;\n }\n\n const lessonLabelDims = lessonRefs.current?.labelRef?.current?.getBoundingClientRect() \|\| {\n height: 0,\n width: 0,\n };\n\n const gameLabelDims = gameRefs.current?.labelRef?.current?.getBoundingClientRect() \|\| {\n height: 0,\n width: 0,\n };\n const puzzleLabelDims = puzzleRefs.current?.labelRef?.current?.getBoundingClientRect() \|\| {\n height: 0,\n width: 0,\n };\n\n const launcherDims =\n lessonRefs.current?.segmentedCardWrapperRef?.current?.getBoundingClientRect() \|\| {\n height: 0,\n width: 0,\n };\n\n let lessonSteps: ICoachmarkProps[] = [];\n\n if (isLessonAvailable && lessonRefs.current) {\n lessonSteps = [\n {\n originalElementToHighlightRef: lessonRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'BLUE_4',\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Get faster & stay ahead in school. Practice 3 new skills everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: lessonLabelDims.width / 2,\n tooltipYCoOrdinates: lessonLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n journeyId === JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY\n ? {\n originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={() =>\n goToNextCard(\n ActionEvent.GAMES_ACTIVITY,\n gameRefs.current as ISegmentedGameCardRefs,\n 'ORANGE_4',\n false,\n journeyId,\n )\n }\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to proceed\n </Text>\n ),\n nudgePointerX: 0,\n nudgePointerY: 0,\n } as INudgeProps,\n }\n : {\n originalElementToHighlightRef: lessonRefs.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <SegmentedGameCard\n label={''} // This is intentionally left blank to avoid showing the label\n value={lessonsData.data.filter(lesson => lesson.status === 'completed').length}\n maxValue={lessonsData.data.length}\n initialValue={lessonsData.initialProgressValue}\n data={lessonsData.data.map(lesson => ({\n card: lesson.cardLottie,\n name: '', // We dont want to show the name of the puzzle in onboarding\n isCompleted: lesson.status === 'completed',\n onPress: () => handleEndJourneyForLesson(lesson, journeyId),\n }))}\n />\n ),\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Tap here to get started\n </Text>\n ),\n nudgePointerX: launcherDims.width * 0.6,\n nudgePointerY: launcherDims.height * 0.4,\n } as INudgeProps,\n },\n ];\n }\n\n if (\n journeyId === JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY &&\n gameRefs.current &&\n puzzleRefs.current &&\n isPuzzleAvailable\n ) {\n const gameSteps: ICoachmarkProps[] = [\n {\n originalElementToHighlightRef: gameRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'ORANGE_4',\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Train to think deeper & plan ahead. Play 3 new games everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: gameLabelDims.width / 2,\n tooltipYCoOrdinates: gameLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: carouselRefs.current.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={() =>\n goToNextCard(\n ActionEvent.PUZZLE_ACTIVITY,\n puzzleRefs.current as ISegmentedGameCardRefs,\n 'PURPLE_4',\n false,\n journeyId,\n )\n }\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to proceed\n </Text>\n ),\n nudgePointerX: 0,\n nudgePointerY: 0,\n } as INudgeProps,\n },\n ];\n\n const puzzleSteps: ICoachmarkProps[] = [\n {\n originalElementToHighlightRef: puzzleRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'PURPLE_4',\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Think in new ways & stay sharp. Solve 3 new puzzles everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: puzzleLabelDims.width / 2,\n tooltipYCoOrdinates: puzzleLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: puzzleRefs.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <SegmentedGameCard\n label={''} // This is intentionally left blank to avoid showing the label\n value={puzzlesData.data.filter(puzzle => puzzle.solved).length}\n maxValue={puzzlesData.data.length}\n initialValue={puzzlesData.initialProgressValue}\n data={puzzlesData.data.map(puzzle => ({\n card: puzzle.cardLottie,\n name: '', // We dont want to show the name of the puzzle in onboarding\n isCompleted: puzzle.solved,\n onPress: () => handleEndJourneyForPuzzle(puzzle, journeyId),\n }))}\n />\n ),\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to solve a puzzle\n </Text>\n ),\n nudgePointerX: launcherDims.width * 0.6,\n nudgePointerY: launcherDims.height * 0.4,\n } as INudgeProps,\n },\n ];\n\n setJourney(journeyId, [...lessonSteps, ...gameSteps, ...puzzleSteps]);\n } else {\n setJourney(journeyId, lessonSteps);\n }\n carouselRefs.current?.goToIndex(0); // Always start from 0th Index no matter what the current index is\n\n const delayBeforeStart = setTimeout(() => {\n clearTimeout(delayBeforeStart);\n nextCoachmark(journeyId);\n }, SLIDE_TO_LESSON_MS);\n\n timerRefs.current.push(delayBeforeStart); // Store to cleanup later\n\n if (journeyId === JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY) {\n if (isLessonAvailable && lessonRefs.current) {\n goToNextCard(ActionEvent.SKILL_ACTIVITY, lessonRefs.current, 'BLUE_4', true, journeyId);\n } else {\n goToNextCard(ActionEvent.GAMES_ACTIVITY, gameRefs.current!, 'ORANGE_4', true, journeyId);\n }\n } else {\n lessonRefs.current?.startLabelAnimation('BLUE_4');\n const delayBeforeShowingNudge = setTimeout(() => {\n clearTimeout(delayBeforeShowingNudge);\n nextCoachmark(journeyId, true);\n }, SHOW_NUDGE_AFTER_MS);\n\n timerRefs.current.push(delayBeforeShowingNudge); // Store to cleanup later\n }\n },\n [\n carouselRefs,\n tooltipTextRenderAs,\n isMobile,\n setJourney,\n goToNextCard,\n handleEndJourneyForLesson,\n handleEndJourneyForPuzzle,\n nextCoachmark,\n ],\n );\n\n const data = useMemo(\n () => ({\n gameRefs,\n lessonRefs,\n puzzleRefs,\n startJourney,\n }),\n [startJourney],\n );\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, [carouselRefs]);\n\n return data;\n};\n"],"names":["useGameLauncherJourney","carouselRefs","onSegmentClick","onJourneyComplete","device","getTheme","isMobile","tooltipTextRenderAs","lessonRefs","useRef","gameRefs","puzzleRefs","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","endJourney","useJourney","trackAnalytics","useUIContext","trackEventViewed","useCallback","step","AnalyticsLabel","trackEventCompleted","goToNextCard","analyticsLabelViewed","refOfNextSlide","color","isFirstSlide","journeyId","_b","_a","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS","handleEndJourneyForPuzzle","puzzlesData","ProjectType","ActionEvent","handleEndJourneyForLesson","lessonsData","startJourney","isLessonAvailable","isPuzzleAvailable","_c","_d","JOURNEY_ID_STUDENT","lessonLabelDims","_g","_f","_e","gameLabelDims","_j","_i","_h","puzzleLabelDims","_m","_l","_k","launcherDims","_p","_o","_n","lessonSteps","IndicatorType","jsx","Fragment","FlexView","Text","_q","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","SegmentedGameCard","lesson","gameSteps","puzzleSteps","puzzle","_r","delayBeforeStart","SLIDE_TO_LESSON_MS","_s","delayBeforeShowingNudge","data","useMemo","useEffect","timer"],"mappings":"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"}
1	+ {"version":3,"file":"use-game-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.tsx"],"sourcesContent":["import type { ICoachmarkProps } from '../../../../journey/use-journey/journey-context-types';\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type { ISegmentedGameCardRefs } from '../../comps/segmented-game-card/segmented-game-card-types';\nimport type {\n IProject,\n Lesson,\n Puzzle,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseGameLauncherJourneyProps } from './use-game-launcher-journey-types';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT as AnalyticsLabel } from '../../../../analytics-events/platform-events-student';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { getTheme } from '../../../../ui/theme/get-theme';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as ActionEvent } from '../../../enum/circle-onboarding-steps';\nimport { ProjectType } from '../../../games/web-view/enums';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { SegmentedGameCard } from '../../comps/segmented-game-card/segmented-game-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n GO_TO_NEXT_SLIDE_AFTER_MS,\n SHOW_LABEL_HIGHLIGHT_AFTER_MS,\n SHOW_NUDGE_AFTER_MS,\n SLIDE_TO_LESSON_MS,\n} from './constants';\n\nexport const useGameLauncherJourney = ({\n carouselRefs,\n onSegmentClick,\n onJourneyComplete,\n}: IUseGameLauncherJourneyProps) => {\n const { device } = getTheme();\n const isMobile = device === 'mobile';\n const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\n\n const lessonRefs = useRef<ISegmentedGameCardRefs>(null);\n const gameRefs = useRef<ISegmentedGameCardRefs>(null);\n const puzzleRefs = useRef<ISegmentedGameCardRefs>(null);\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney, endJourney } = useJourney();\n const { onEvent: trackAnalytics } = useUIContext();\n\n const trackEventViewed = useCallback(\n (step: ActionEvent) => {\n trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_VIEWED, {\n step,\n });\n },\n [trackAnalytics],\n );\n const trackEventCompleted = useCallback(\n (step: ActionEvent) => {\n trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_COMPLETED, {\n step,\n });\n },\n [trackAnalytics],\n );\n\n const goToNextCard = useCallback(\n (\n analyticsLabelViewed: ActionEvent,\n refOfNextSlide: ISegmentedGameCardRefs,\n color: TColorNames,\n isFirstSlide: boolean = false,\n journeyId: JOURNEY_ID_STUDENT,\n ) => {\n if (!isFirstSlide) {\n playButtonSound();\n carouselRefs.current?.goToIndex(carouselRefs.current?.currentIndex + 1);\n nextCoachmark(journeyId, false, GO_TO_NEXT_SLIDE_AFTER_MS);\n }\n\n trackEventViewed(analyticsLabelViewed);\n\n const animateLabelTimer = setTimeout(() => {\n clearTimeout(animateLabelTimer);\n refOfNextSlide.startLabelAnimation(color);\n }, SHOW_LABEL_HIGHLIGHT_AFTER_MS);\n\n timerRefs.current.push(animateLabelTimer); // Store to cleanup later\n\n nextCoachmark(journeyId, true, SHOW_NUDGE_AFTER_MS);\n },\n [carouselRefs, nextCoachmark, playButtonSound, trackEventViewed],\n );\n\n const handleEndJourneyForPuzzle = useCallback(\n (puzzlesData: Puzzle, journeyId: JOURNEY_ID_STUDENT) => {\n onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n trackEventCompleted(ActionEvent.PUZZLE_ACTIVITY);\n endJourney(journeyId);\n onJourneyComplete(journeyId);\n },\n [endJourney, onJourneyComplete, onSegmentClick, trackEventCompleted],\n );\n\n const handleEndJourneyForLesson = useCallback(\n (lessonsData: Lesson, journeyId: JOURNEY_ID_STUDENT) => {\n onSegmentClick(lessonsData, ProjectType.LESSON);\n trackEventCompleted(ActionEvent.SKILL_ACTIVITY);\n endJourney(journeyId);\n onJourneyComplete(journeyId);\n },\n [endJourney, onJourneyComplete, onSegmentClick, trackEventCompleted],\n );\n\n const startJourney = useCallback(\n (\n journeyId: JOURNEY_ID_STUDENT,\n puzzlesData?: IProject<Puzzle>,\n lessonsData?: IProject<Lesson>,\n ) => {\n // If element refs are not available return, this is just for type safety\n const isLessonAvailable = !!lessonsData;\n const isPuzzleAvailable = !!puzzlesData;\n\n if (!lessonRefs?.current?.segmentedCardWrapperRef.current) return;\n\n if (\n (!carouselRefs?.current?.nextBtnRef.current \|\|\n !gameRefs?.current?.labelRef.current \|\|\n !puzzleRefs?.current?.labelRef.current \|\|\n !puzzlesData) &&\n journeyId === JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY\n ) {\n return;\n }\n\n const lessonLabelDims = lessonRefs.current?.labelRef?.current?.getBoundingClientRect() \|\| {\n height: 0,\n width: 0,\n };\n\n const gameLabelDims = gameRefs.current?.labelRef?.current?.getBoundingClientRect() \|\| {\n height: 0,\n width: 0,\n };\n const puzzleLabelDims = puzzleRefs.current?.labelRef?.current?.getBoundingClientRect() \|\| {\n height: 0,\n width: 0,\n };\n\n const launcherDims =\n lessonRefs.current?.segmentedCardWrapperRef?.current?.getBoundingClientRect() \|\| {\n height: 0,\n width: 0,\n };\n\n let lessonSteps: ICoachmarkProps[] = [];\n\n if (isLessonAvailable && lessonRefs.current) {\n lessonSteps = [\n {\n originalElementToHighlightRef: lessonRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'BLUE_4',\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Get faster & stay ahead in school. Practice 3 new skills everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: lessonLabelDims.width / 2,\n tooltipYCoOrdinates: lessonLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n journeyId === JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY\n ? {\n originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={() =>\n goToNextCard(\n ActionEvent.GAMES_ACTIVITY,\n gameRefs.current as ISegmentedGameCardRefs,\n 'ORANGE_4',\n false,\n journeyId,\n )\n }\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to proceed\n </Text>\n ),\n nudgePointerX: 0,\n nudgePointerY: 0,\n } as INudgeProps,\n }\n : {\n originalElementToHighlightRef: lessonRefs.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <SegmentedGameCard\n label={''} // This is intentionally left blank to avoid showing the label\n value={lessonsData.data.filter(lesson => lesson.status === 'pending').length}\n maxValue={lessonsData.data.length}\n initialValue={lessonsData.initialProgressValue}\n data={lessonsData.data.map(lesson => ({\n card: lesson.cardLottie,\n name: '', // We dont want to show the name of the puzzle in onboarding\n isCompleted: lesson.status === 'completed',\n onPress: () => handleEndJourneyForLesson(lesson, journeyId),\n }))}\n />\n ),\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Tap here to get started\n </Text>\n ),\n nudgePointerX: launcherDims.width * 0.6,\n nudgePointerY: launcherDims.height * 0.4,\n } as INudgeProps,\n },\n ];\n }\n\n if (\n journeyId === JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY &&\n gameRefs.current &&\n puzzleRefs.current &&\n isPuzzleAvailable\n ) {\n const gameSteps: ICoachmarkProps[] = [\n {\n originalElementToHighlightRef: gameRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'ORANGE_4',\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Train to think deeper & plan ahead. Play 3 new games everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: gameLabelDims.width / 2,\n tooltipYCoOrdinates: gameLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: carouselRefs.current.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={() =>\n goToNextCard(\n ActionEvent.PUZZLE_ACTIVITY,\n puzzleRefs.current as ISegmentedGameCardRefs,\n 'PURPLE_4',\n false,\n journeyId,\n )\n }\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to proceed\n </Text>\n ),\n nudgePointerX: 0,\n nudgePointerY: 0,\n } as INudgeProps,\n },\n ];\n\n const puzzleSteps: ICoachmarkProps[] = [\n {\n originalElementToHighlightRef: puzzleRefs.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'top',\n backgroundColor: 'PURPLE_4',\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Think in new ways & stay sharp. Solve 3 new puzzles everyday.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: puzzleLabelDims.width / 2,\n tooltipYCoOrdinates: puzzleLabelDims.height + 10,\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: puzzleRefs.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n elementToHighlight: (\n <SegmentedGameCard\n label={''} // This is intentionally left blank to avoid showing the label\n value={puzzlesData.data.filter(puzzle => puzzle.solved).length}\n maxValue={puzzlesData.data.length}\n initialValue={puzzlesData.initialProgressValue}\n data={puzzlesData.data.map(puzzle => ({\n card: puzzle.cardLottie,\n name: '', // We dont want to show the name of the puzzle in onboarding\n isCompleted: puzzle.solved,\n onPress: () => handleEndJourneyForPuzzle(puzzle, journeyId),\n }))}\n />\n ),\n indicator: {\n nudge: 'click',\n content: !isMobile && (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to solve a puzzle\n </Text>\n ),\n nudgePointerX: launcherDims.width * 0.6,\n nudgePointerY: launcherDims.height * 0.4,\n } as INudgeProps,\n },\n ];\n\n setJourney(journeyId, [...lessonSteps, ...gameSteps, ...puzzleSteps]);\n } else {\n setJourney(journeyId, lessonSteps);\n }\n carouselRefs.current?.goToIndex(0); // Always start from 0th Index no matter what the current index is\n\n const delayBeforeStart = setTimeout(() => {\n clearTimeout(delayBeforeStart);\n nextCoachmark(journeyId);\n }, SLIDE_TO_LESSON_MS);\n\n timerRefs.current.push(delayBeforeStart); // Store to cleanup later\n\n if (journeyId === JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY) {\n if (isLessonAvailable && lessonRefs.current) {\n goToNextCard(ActionEvent.SKILL_ACTIVITY, lessonRefs.current, 'BLUE_4', true, journeyId);\n } else {\n goToNextCard(ActionEvent.GAMES_ACTIVITY, gameRefs.current!, 'ORANGE_4', true, journeyId);\n }\n } else {\n lessonRefs.current?.startLabelAnimation('BLUE_4');\n const delayBeforeShowingNudge = setTimeout(() => {\n clearTimeout(delayBeforeShowingNudge);\n nextCoachmark(journeyId, true);\n }, SHOW_NUDGE_AFTER_MS);\n\n timerRefs.current.push(delayBeforeShowingNudge); // Store to cleanup later\n }\n },\n [\n carouselRefs,\n tooltipTextRenderAs,\n isMobile,\n setJourney,\n goToNextCard,\n handleEndJourneyForLesson,\n handleEndJourneyForPuzzle,\n nextCoachmark,\n ],\n );\n\n const data = useMemo(\n () => ({\n gameRefs,\n lessonRefs,\n puzzleRefs,\n startJourney,\n }),\n [startJourney],\n );\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, [carouselRefs]);\n\n return data;\n};\n"],"names":["useGameLauncherJourney","carouselRefs","onSegmentClick","onJourneyComplete","device","getTheme","isMobile","tooltipTextRenderAs","lessonRefs","useRef","gameRefs","puzzleRefs","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","endJourney","useJourney","trackAnalytics","useUIContext","trackEventViewed","useCallback","step","AnalyticsLabel","trackEventCompleted","goToNextCard","analyticsLabelViewed","refOfNextSlide","color","isFirstSlide","journeyId","_b","_a","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS","handleEndJourneyForPuzzle","puzzlesData","ProjectType","ActionEvent","handleEndJourneyForLesson","lessonsData","startJourney","isLessonAvailable","isPuzzleAvailable","_c","_d","JOURNEY_ID_STUDENT","lessonLabelDims","_g","_f","_e","gameLabelDims","_j","_i","_h","puzzleLabelDims","_m","_l","_k","launcherDims","_p","_o","_n","lessonSteps","IndicatorType","jsx","Fragment","FlexView","Text","_q","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","SegmentedGameCard","lesson","gameSteps","puzzleSteps","puzzle","_r","delayBeforeStart","SLIDE_TO_LESSON_MS","_s","delayBeforeShowingNudge","data","useMemo","useEffect","timer"],"mappings":"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"}

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

@@ -20,8 +20,8 @@ const a = r.div(({ theme: o }) => {
 `, p = r.div(({ isActive: o, theme: t }) => {
   const { WHITE: e, TRANSPARENT: n, GREY_2: i, WHITE_T_10: s } = t.colors;
   return `
-  width: clamp(30px, 10.5vw, 45px);
-  height: clamp(30px, 10.5vw, 45px);
+  height: 45px;
+  width: 45px;
   display: flex;
   align-items: center;
   justify-content: center;

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

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

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

@@ -12,7 +12,7 @@ const _ = ({ selected: o, grades: s, onSelect: n, onNext: c }) => {
   }, [o]);
   const d = (e) => e === "13", u = (e) => {
     n == null || n(e);
-  }, f = 7, k = s.reduce((e, a, r) => {
+  }, f = 6, k = s.reduce((e, a, r) => {
     var l;
     return r % f === 0 && e.push([]), (l = e[e.length - 1]) == null || l.push(a), e;
   }, []);

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

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

package/dist/features/circle-games/sign-up/constants.js CHANGED Viewed

@@ -1,7 +1,5 @@
 import { State as e } from "./sign-up-types.js";
 const h = [e.ACTIVE, e.PAUSED, e.PAID], i = [e.TRIAL, e.DEMO], p = [
-  { label: "KG", key: "0" },
-  { label: "1", key: "1", sup: "st" },
   { label: "2", key: "2", sup: "nd" },
   { label: "3", key: "3", sup: "rd" },
   { label: "4", key: "4", sup: "th" },
@@ -13,7 +11,7 @@ const h = [e.ACTIVE, e.PAUSED, e.PAID], i = [e.TRIAL, e.DEMO], p = [
   { label: "10", key: "10", sup: "th" },
   { label: "11", key: "11", sup: "th" },
   { label: "12", key: "12", sup: "th" }
-], t = 440, s = 640, a = window.innerWidth / t, n = window.innerHeight / s, l = Math.min(a, n), u = Math.min(s * l, s), b = Math.min(t * l, t);
+], t = 440, s = 640, n = window.innerWidth / t, a = window.innerHeight / s, l = Math.min(n, a), u = Math.min(s * l, s), b = Math.min(t * l, t);
 export {
   s as ACTUAL_HEIGHT,
   t as ACTUAL_WIDTH,

package/dist/features/circle-games/sign-up/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","sources":["../../../../src/features/circle-games/sign-up/constants.ts"],"sourcesContent":["import type { Grade } from './comp/grade-input/grade-input-types';\n\nimport { State } from './sign-up-types';\n\nexport const userIsEnrolledCases = [State.ACTIVE, State.PAUSED, State.PAID];\nexport const userIsOnTrialCases = [State.TRIAL, State.DEMO];\n\nexport const GRADES: Grade[] = [\n { label: '~~KG', key: '0' },\n { label: '1', key: '1', sup: 'st' },\n { label: '~~2', key: '2', sup: 'nd' },\n { label: '3', key: '3', sup: 'rd' },\n { label: '4', key: '4', sup: 'th' },\n { label: '5', key: '5', sup: 'th' },\n { label: '6', key: '6', sup: 'th' },\n { label: '7', key: '7', sup: 'th' },\n { label: '8', key: '8', sup: 'th' },\n { label: '9', key: '9', sup: 'th' },\n { label: '10', key: '10', sup: 'th' },\n { label: '11', key: '11', sup: 'th' },\n { label: '12', key: '12', sup: 'th' },\n];\n\nexport const MIN_HEIGHT_TO_SUPPORT = 540;\nexport const ACTUAL_WIDTH = 440;\nexport const ACTUAL_HEIGHT = 640;\n\nconst widthRatio = window.innerWidth / ACTUAL_WIDTH;\nconst heightRatio = window.innerHeight / ACTUAL_HEIGHT;\nconst ratio = Math.min(widthRatio, heightRatio);\n\nexport const CONTAINER_HEIGHT = Math.min(ACTUAL_HEIGHT * ratio, ACTUAL_HEIGHT);\nexport const CONTAINER_WIDTH = Math.min(ACTUAL_WIDTH * ratio, ACTUAL_WIDTH);\n"],"names":["userIsEnrolledCases","State","userIsOnTrialCases","GRADES","ACTUAL_WIDTH","ACTUAL_HEIGHT","widthRatio","heightRatio","ratio","CONTAINER_HEIGHT","CONTAINER_WIDTH"],"mappings":";AAIO,MAAMA,IAAsB,CAACC,EAAM,QAAQA,EAAM,QAAQA,EAAM,IAAI,GAC7DC,IAAqB,CAACD,EAAM,OAAOA,EAAM,IAAI,GAE7CE,IAAkB;AAAA,EAC7B,EAAE,OAAO,~~MAAM,~~KAAK,~~IAAI;AAAA,EACxB,EAAE,OAAO,~~KAAK,KAAK,KAAK,KAAK~~,KAAK~~;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,~~KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,~~MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AACtC,GAGaC,IAAe,KACfC,IAAgB,KAEvBC,IAAa,OAAO,aAAaF,GACjCG,IAAc,OAAO,cAAcF,GACnCG,IAAQ,KAAK,IAAIF,GAAYC,CAAW,GAEjCE,IAAmB,KAAK,IAAIJ,IAAgBG,GAAOH,CAAa,GAChEK,IAAkB,KAAK,IAAIN,IAAeI,GAAOJ,CAAY;"}
1	+ {"version":3,"file":"constants.js","sources":["../../../../src/features/circle-games/sign-up/constants.ts"],"sourcesContent":["import type { Grade } from './comp/grade-input/grade-input-types';\n\nimport { State } from './sign-up-types';\n\nexport const userIsEnrolledCases = [State.ACTIVE, State.PAUSED, State.PAID];\nexport const userIsOnTrialCases = [State.TRIAL, State.DEMO];\n\nexport const GRADES: Grade[] = [\n { label: '2', key: '2', sup: 'nd' },\n { label: '3', key: '3', sup: 'rd' },\n { label: '4', key: '4', sup: 'th' },\n { label: '5', key: '5', sup: 'th' },\n { label: '6', key: '6', sup: 'th' },\n { label: '7', key: '7', sup: 'th' },\n { label: '8', key: '8', sup: 'th' },\n { label: '9', key: '9', sup: 'th' },\n { label: '10', key: '10', sup: 'th' },\n { label: '11', key: '11', sup: 'th' },\n { label: '12', key: '12', sup: 'th' },\n];\n\nexport const MIN_HEIGHT_TO_SUPPORT = 540;\nexport const ACTUAL_WIDTH = 440;\nexport const ACTUAL_HEIGHT = 640;\n\nconst widthRatio = window.innerWidth / ACTUAL_WIDTH;\nconst heightRatio = window.innerHeight / ACTUAL_HEIGHT;\nconst ratio = Math.min(widthRatio, heightRatio);\n\nexport const CONTAINER_HEIGHT = Math.min(ACTUAL_HEIGHT * ratio, ACTUAL_HEIGHT);\nexport const CONTAINER_WIDTH = Math.min(ACTUAL_WIDTH * ratio, ACTUAL_WIDTH);\n"],"names":["userIsEnrolledCases","State","userIsOnTrialCases","GRADES","ACTUAL_WIDTH","ACTUAL_HEIGHT","widthRatio","heightRatio","ratio","CONTAINER_HEIGHT","CONTAINER_WIDTH"],"mappings":";AAIO,MAAMA,IAAsB,CAACC,EAAM,QAAQA,EAAM,QAAQA,EAAM,IAAI,GAC7DC,IAAqB,CAACD,EAAM,OAAOA,EAAM,IAAI,GAE7CE,IAAkB;AAAA,EAC7B,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AACtC,GAGaC,IAAe,KACfC,IAAgB,KAEvBC,IAAa,OAAO,aAAaF,GACjCG,IAAc,OAAO,cAAcF,GACnCG,IAAQ,KAAK,IAAIF,GAAYC,CAAW,GAEjCE,IAAmB,KAAK,IAAIJ,IAAgBG,GAAOH,CAAa,GAChEK,IAAkB,KAAK,IAAIN,IAAeI,GAAOJ,CAAY;"}

package/dist/features/puzzles/app/puzzle-app-styled.js ADDED Viewed

@@ -0,0 +1,115 @@
+import o from "styled-components";
+import n from "../../../assets/line-icons/icons/hint-fill.js";
+import e from "../../ui/layout/flex-view.js";
+import r from "../../ui/text/text.js";
+import { getPuzzleCardPattern as p } from "../utils/puzzle-pattern.js";
+const d = o(e)(({ theme: t, $visible: i }) => {
+  const { gutter: l } = t.layout;
+  return i ? `
+    padding-top: ${l * 1.5}px;
+    padding-bottom: ${l * 2}px;
+  ` : "";
+}), g = o(e)`
+  position: relative;
+  margin: 0 auto;
+  box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: i }) => t.colors[`${i}_4`]};
+  max-width: 343px;
+  width: 100%;
+  max-height: 412px;
+  height: 100%;
+  aspect-ratio: 343 / 412;
+  overflow: hidden;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: ${({ $imageHue: t }) => `url(${p(t)})`};
+    background-size: cover;
+    opacity: 0.2;
+  }
+`, x = o(e)`
+  background-color: transparent;
+  .puzzle-question-content {
+    font-size: 16px;
+    line-height: 1.6em;
+    color: ${({ theme: t }) => t.colors.BLACK};
+    font-family: 'Noto Serif', serif;
+    em {
+      font-style: italic;
+    }
+    ul,
+    ol {
+      list-style-type: initial;
+      padding-left: 32px;
+    }
+    ol {
+      list-style-type: decimal;
+    }
+    p {
+      margin: 12px 0;
+    }
+    li {
+      margin: 4px 0;
+    }
+  }
+`, u = o(n)`
+  color: ${({ theme: t }) => t.colors.BLACK_1};
+  & .hint-fill-icon-path {
+    fill: ${({ theme: t }) => t.colors.WHITE_1};
+  }
+`, h = o(r)`
+  & span {
+    font-weight: 700;
+    margin-right: 4px;
+  }
+`, y = o.div`
+  color: ${({ theme: t }) => t.colors.BLACK};
+  font-size: 14px;
+  line-height: 1.2;
+  font-family: 'Athletics';
+  font-weight: 400;
+  font-style: normal;
+  em {
+    font-style: italic;
+  }
+  ul,
+  ol {
+    list-style-type: initial;
+    padding-left: 32px;
+  }
+  ol {
+    list-style-type: decimal;
+  }
+  p {
+    margin: 0;
+  }
+  li {
+    margin: 4px 0;
+  }
+`;
+export {
+  d as PuzzleAppWrapper,
+  g as PuzzleContainer,
+  y as PuzzleQuestionWrapper,
+  x as QuestionCard,
+  h as StyledFeedbackText,
+  u as StyledHintFillIcon
+};
+//# sourceMappingURL=puzzle-app-styled.js.map

package/dist/features/puzzles/app/puzzle-app-styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"puzzle-app-styled.js","sources":["../../../../src/features/puzzles/app/puzzle-app-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport HintFillIcon from '../../../assets/line-icons/icons/hint-fill';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\nconst PuzzleAppWrapper = styled(FlexView)<{ $visible: boolean }>(({ theme, $visible }) => {\n const { gutter } = theme.layout;\n\n if (!$visible) {\n return ``;\n }\n\n return `\n padding-top: ${gutter * 1.5}px;\n padding-bottom: ${gutter * 2}px;\n `;\n});\n\nconst PuzzleContainer = styled(FlexView)<{ $imageHue: THueNames; $backgroundOpacity?: number }>`\n position: relative;\n margin: 0 auto;\n box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n max-width: 343px;\n width: 100%;\n max-height: 412px;\n height: 100%;\n aspect-ratio: 343 / 412;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n background-size: cover;\n opacity: 0.2;\n }\n`;\n\nconst QuestionCard = styled(FlexView)`\n background-color: transparent;\n\n .puzzle-question-content {\n font-size: 16px;\n line-height: 1.6em;\n color: ${({ theme }) => theme.colors.BLACK};\n font-family: 'Noto Serif', serif;\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n list-style-type: initial;\n padding-left: 32px;\n }\n\n ol {\n list-style-type: decimal;\n }\n\n p {\n margin: 12px 0;\n }\n\n li {\n margin: 4px 0;\n }\n }\n`;\n\nconst StyledHintFillIcon = styled(HintFillIcon)`\n color: ${({ theme }) => theme.colors.BLACK_1};\n\n & .hint-fill-icon-path {\n fill: ${({ theme }) => theme.colors.WHITE_1};\n }\n`;\n\nconst StyledFeedbackText = styled(Text)`\n & span {\n font-weight: 700;\n margin-right: 4px;\n }\n`;\n\nconst PuzzleQuestionWrapper = styled.div`\n color: ${({ theme }) => theme.colors.BLACK};\n font-size: 14px;\n line-height: 1.2;\n font-family: 'Athletics';\n\n font-weight: 400;\n font-style: normal;\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n list-style-type: initial;\n padding-left: 32px;\n }\n\n ol {\n list-style-type: decimal;\n }\n\n p {\n margin: 0;\n }\n\n li {\n margin: 4px 0;\n }\n`;\n\nexport {\n PuzzleAppWrapper,\n PuzzleContainer,\n QuestionCard,\n StyledFeedbackText,\n StyledHintFillIcon,\n PuzzleQuestionWrapper,\n};\n"],"names":["PuzzleAppWrapper","styled","FlexView","theme","$visible","gutter","PuzzleContainer","$imageHue","getPuzzleCardPattern","QuestionCard","StyledHintFillIcon","HintFillIcon","StyledFeedbackText","Text","PuzzleQuestionWrapper"],"mappings":";;;;;AASM,MAAAA,IAAmBC,EAAOC,CAAQ,EAAyB,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAClF,QAAA,EAAE,QAAAC,EAAO,IAAIF,EAAM;AAEzB,SAAKC,IAIE;AAAA,mBACUC,IAAS,GAAG;AAAA,sBACTA,IAAS,CAAC;AAAA,MALrB;AAOX,CAAC,GAEKC,IAAkBL,EAAOC,CAAQ;AAAA;AAAA;AAAA,sCAGD,CAAC,EAAE,OAAAC,GAAO,WAAAI,QAAgBJ,EAAM,OAAO,GAAGI,CAAS,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAetE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,GAM9EE,IAAeR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMvB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2BxCO,IAAqBT,EAAOU,CAAY;AAAA,WACnC,CAAC,EAAE,OAAAR,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAIzCS,IAAqBX,EAAOY,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCC,IAAwBb,EAAO;AAAA,WAC1B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/puzzles/app/puzzle-app-view.js ADDED Viewed

@@ -0,0 +1,116 @@
+import { jsxs as S, jsx as i } from "react/jsx-runtime";
+import { memo as T, useRef as A, useCallback as _, useEffect as p, useMemo as H } from "react";
+import Q from "../../ui/image/image.js";
+import $ from "../../ui/separator/separator.js";
+import h from "../../worksheet/constants/events.js";
+import M from "../../worksheet/worksheet/hooks/use-learnosity.js";
+import V from "../../worksheet/worksheet/hooks/use-worksheet-data-helper.js";
+import { getQuestionsFromItems as x } from "../../worksheet/worksheet/worksheet-helpers.js";
+import { QuestionCard as C, PuzzleQuestionWrapper as L, PuzzleContainer as N } from "./puzzle-app-styled.js";
+const P = (a) => {
+  if (!a) return null;
+  const t = a.match(/<img[^>]+src="([^">]+)"/);
+  return t ? t[1] : null;
+}, j = ({
+  worksheetData: a,
+  loggerRef: t,
+  onWorksheetErrored: u,
+  imageHue: I,
+  onLoaded: d
+}) => {
+  const { signed_request: z, questions_signed_request: E } = a, w = A(null), {
+    loadingState: r,
+    data: o,
+    error: m
+  } = V({
+    attemptId: void 0,
+    signedRequest: z,
+    loggerRef: t
+  }), y = _(
+    (s) => {
+      u({
+        code: s.code,
+        message: s.detail
+      });
+    },
+    [u]
+  ), { learnosity: n } = M(E, y, t);
+  p(() => {
+    r === "error" && u({
+      message: m ?? "Error loading worksheet"
+    });
+  }, [r, u, m]), p(() => {
+    n && t.current(h.WORKSHEET_V3_LEARNOSITY_INITIALIZED);
+  }, [n, t]), p(() => {
+    n && r === "success" && d && (t.current(h.WORKSHEET_V3_READY), d());
+  }, [n, r, t, d]);
+  const c = H(() => r === "success" && (o != null && o.learnosityItems) ? (t.current(h.WORKSHEET_V3_READY), x(o.learnosityItems, {
+    sectioned: !1,
+    adaptive: !1
+  }).map((e) => ({
+    response_id: e.response_id,
+    type: e.type,
+    stimulus: e.stimulus,
+    template: e.template,
+    stimulus_review: e.stimulus_review,
+    options: e.options,
+    metadata: e.metadata,
+    validation: e.validation
+    // Add other properties as needed
+  }))) : r === "error" || m ? [] : [], [r, o, m, t]);
+  p(() => {
+    if (n && c.length > 0) {
+      const l = requestAnimationFrame(() => {
+        try {
+          n.renderMath("mathjax");
+        } catch {
+        }
+      });
+      return () => {
+        cancelAnimationFrame(l);
+      };
+    }
+  }, [n, c]);
+  const g = _((s) => {
+    const { stimulus: l = "", template: e = "", response_id: v } = s, f = P(l);
+    return /* @__PURE__ */ S(
+      C,
+      {
+        $alignItems: "center",
+        className: "puzzle-app-view-question-card",
+        children: [
+          f && /* @__PURE__ */ i(
+            Q,
+            {
+              src: f,
+              alt: "Puzzle illustration",
+              width: 183,
+              height: 183,
+              withLoader: !0
+            }
+          ),
+          /* @__PURE__ */ i($, { heightX: 1 }),
+          e && /* @__PURE__ */ i(L, { children: /* @__PURE__ */ i("div", { dangerouslySetInnerHTML: { __html: e } }) })
+        ]
+      },
+      v
+    );
+  }, []);
+  return c.length ? /* @__PURE__ */ i(
+    N,
+    {
+      ref: w,
+      $gapX: 1,
+      $gutterX: 1,
+      $imageHue: I,
+      $background: "WHITE_1",
+      className: "puzzle-app-view-container",
+      $justifyContent: "center",
+      children: c.map((s) => /* @__PURE__ */ i("div", { children: g(s) }, `question-${s.response_id}`))
+    }
+  ) : null;
+}, Y = T(j);
+export {
+  Y as default
+};
+//# sourceMappingURL=puzzle-app-view.js.map