@cuemath/leap 3.2.19-beta-0.1 → 3.2.19-link.0

package/dist/features/puzzles/puzzle-container/puzzle-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-container.js","sources":["../../../../src/features/puzzles/puzzle-container/puzzle-container.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\nimport type { IPuzzleCardContainerProps } from './puzzle-container-types';\nimport type { AnimationEventName, BMEnterFrameEvent } from 'lottie-web';\nimport type { FC } from 'react';\n\nimport { useState, useCallback, useEffect, useRef, memo, useMemo } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { usePostPuzzleToAssign } from '../api/puzzle-assign';\nimport { PUZZLE_ASSIGN_ANIMATION } from '../constants/puzzle-container';\nimport { getPuzzleCardLottie } from '../utils/puzzle-pattern';\nimport * as Styled from './puzzle-container-styled';\nimport PuzzleAssigned from './puzzle-container-view';\n\nconst modeRevealAnimationSettings = {\n  loop: false,\n  renderer: 'svg',\n  autoPlay: false,\n};\n\nconst PuzzleCardContainer: FC<IPuzzleCardContainerProps> = memo(\n  ({\n    triggerReveal = false,\n    onFullyHidden,\n    onPuzzleClick,\n    puzzleData,\n    courseStream,\n    studentId,\n  }) => {\n    const {\n      image_hue: imageHue,\n      image_url: imageUrl,\n      assigned: externalAssigned,\n      title,\n      id: puzzleId,\n      node_id: nodeId,\n      student_elo_rating,\n      current_elo_rating,\n    } = puzzleData;\n\n    const [showPuzzleInfo, setShowPuzzleInfo] = useState(externalAssigned);\n\n    const assignLottieRef = useRef<ILottieAnimationRef | null>(null);\n    const puzzleLottieSrc = useMemo(() => getPuzzleCardLottie(imageHue), [imageHue]);\n\n    const analyticsProps = useMemo(\n      () => ({\n        node_id: nodeId,\n        node_type: 'PUZZLE_CARD',\n        student_elo_rating,\n        current_elo_rating,\n      }),\n      [nodeId, student_elo_rating, current_elo_rating],\n    );\n\n    const { post: postPuzzleToAssign, isProcessing } = usePostPuzzleToAssign({\n      onComplete: (error: string | null) => {\n        if (error) {\n          // Handle error (e.g., show a notification)\n          setShowPuzzleInfo(true);\n        } else {\n          assignLottieRef.current?.playSegments(PUZZLE_ASSIGN_ANIMATION.REVEAL_ASSIGNED, false);\n\n          setShowPuzzleInfo(false);\n        }\n      },\n    });\n\n    useEffect(() => {\n      if (!externalAssigned) {\n        if (triggerReveal) {\n          assignLottieRef.current?.playSegments(PUZZLE_ASSIGN_ANIMATION.REVEAL, true);\n        } else {\n          assignLottieRef.current?.stop();\n          setShowPuzzleInfo(false);\n        }\n      }\n    }, [externalAssigned, triggerReveal]);\n\n    const handleAssign = useCallback(() => {\n      if (externalAssigned) return;\n\n      postPuzzleToAssign(\n        {\n          puzzle_id: puzzleId,\n        },\n        {\n          studentId,\n          courseStream,\n        },\n      );\n    }, [courseStream, externalAssigned, postPuzzleToAssign, puzzleId, studentId]);\n\n    const handleOnPuzzleClick = useCallback(() => {\n      onPuzzleClick();\n    }, [onPuzzleClick]);\n\n    const showPuzzleLottie = useCallback(() => {\n      assignLottieRef.current?.playSegments(PUZZLE_ASSIGN_ANIMATION.REVEAL, true);\n    }, []);\n\n    const onAnimationFinish = useMemo(\n      () => ({\n        name: 'enterFrame' as AnimationEventName,\n        callback: (event: BMEnterFrameEvent) => {\n          const { currentTime } = event;\n\n          if (currentTime === 49) {\n            setShowPuzzleInfo(true);\n          }\n\n          if (currentTime === 101) {\n            onFullyHidden?.();\n          }\n        },\n      }),\n      [onFullyHidden],\n    );\n\n    if (!triggerReveal) {\n      return null;\n    }\n\n    if (externalAssigned) {\n      return (\n        <Styled.PuzzleContainer $justifyContent=\"center\">\n          <Styled.PuzzleAssignedWrapper\n            $imageHue={imageHue}\n            $background={`${imageHue}_2`}\n            $widthX={15.9375}\n          >\n            <PuzzleAssigned\n              imageUrl={imageUrl}\n              handleOnPuzzleClick={handleOnPuzzleClick}\n              title={title}\n              assigned\n            />\n          </Styled.PuzzleAssignedWrapper>\n        </Styled.PuzzleContainer>\n      );\n    }\n\n    return (\n      <Styled.PuzzleContainer>\n        <FlexView $heightX={26}>\n          <LottieAnimation\n            src={puzzleLottieSrc}\n            ref={assignLottieRef}\n            settings={modeRevealAnimationSettings}\n            onRender={showPuzzleLottie}\n            eventListener={onAnimationFinish}\n            animateOnIntersect\n          />\n\n          <Styled.PuzzleContentWrapper $visible={showPuzzleInfo} $position=\"absolute\">\n            <PuzzleAssigned\n              imageUrl={imageUrl}\n              title={title}\n              handleOnPuzzleClick={handleOnPuzzleClick}\n              handleAssign={handleAssign}\n              assigning={isProcessing}\n              analyticsProps={analyticsProps}\n            />\n          </Styled.PuzzleContentWrapper>\n        </FlexView>\n      </Styled.PuzzleContainer>\n    );\n  },\n);\n\nexport default PuzzleCardContainer;\n"],"names":["modeRevealAnimationSettings","PuzzleCardContainer","memo","triggerReveal","onFullyHidden","onPuzzleClick","puzzleData","courseStream","studentId","imageHue","imageUrl","externalAssigned","title","puzzleId","nodeId","student_elo_rating","current_elo_rating","showPuzzleInfo","setShowPuzzleInfo","useState","assignLottieRef","useRef","puzzleLottieSrc","useMemo","getPuzzleCardLottie","analyticsProps","postPuzzleToAssign","isProcessing","usePostPuzzleToAssign","error","_a","PUZZLE_ASSIGN_ANIMATION","useEffect","_b","handleAssign","useCallback","handleOnPuzzleClick","showPuzzleLottie","onAnimationFinish","event","currentTime","jsx","Styled.PuzzleContainer","Styled.PuzzleAssignedWrapper","PuzzleAssigned","jsxs","FlexView","LottieAnimation","Styled.PuzzleContentWrapper","PuzzleCardContainer$1"],"mappings":"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"}
+{"version":3,"file":"puzzle-container.js","sources":["../../../../src/features/puzzles/puzzle-container/puzzle-container.tsx"],"sourcesContent":["import type { TPuzzleCardAnimationPhases } from '../comps/puzzle-card-types';\nimport type { IPuzzleCardContainerProps } from './puzzle-container-types';\nimport type { FC } from 'react';\n\nimport { useState, useCallback, useEffect, useRef, memo } from 'react';\n\nimport Check2Icon from '../../../assets/line-icons/icons/check2';\nimport Image from '../../ui/image/image';\nimport Text from '../../ui/text/text';\nimport { usePostPuzzleToAssign } from '../api/puzzle-assign';\nimport PuzzleCard from '../comps/puzzle-card';\nimport * as Styled from './puzzle-container-styled';\n\nconst ASSIGNED_DISPLAY_DURATION = 1500; // ms\n\nconst PuzzleCardContainer: FC<IPuzzleCardContainerProps> = memo(\n  ({\n    userType,\n    triggerReveal = false,\n    onFullyHidden,\n    onPuzzleClick,\n    puzzleData,\n    courseStream,\n    studentId,\n  }) => {\n    const {\n      image_hue: imageHue,\n      image_url: imageUrl,\n      assigned: externalAssigned,\n      title,\n      id: puzzleId,\n    } = puzzleData;\n\n    const [animationPhase, setAnimationPhase] = useState<TPuzzleCardAnimationPhases>('hidden');\n    const [isAssigned, setIsAssigned] = useState(false);\n\n    const assignedTimer = useRef<NodeJS.Timeout | null>(null);\n\n    const { post: postPuzzleToAssign, isProcessing } = usePostPuzzleToAssign({\n      onComplete: (error: string | null) => {\n        if (error) {\n          // Handle error (e.g., show a notification)\n          setAnimationPhase('visible'); // Reset to visible if assignment fails\n        } else {\n          if (animationPhase === 'visible') {\n            setAnimationPhase('assigning');\n          }\n        }\n      },\n    });\n\n    // Main trigger to start or hide the card\n    useEffect(() => {\n      if (!externalAssigned) {\n        if (triggerReveal) {\n          if (isAssigned) {\n            setAnimationPhase('assigned'); // Already assigned, show statically\n          } else if (animationPhase === 'hidden') {\n            setAnimationPhase('movingIn'); // Start the animation sequence\n          }\n        } else {\n          // If trigger is removed, start hiding (unless already hidden/hiding)\n          if (animationPhase !== 'hidden' && animationPhase !== 'movingOut') {\n            setAnimationPhase('movingOut');\n          }\n        }\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [triggerReveal, isAssigned, externalAssigned]);\n\n    // Timer to auto-hide after the 'assigned' phase\n    useEffect(() => {\n      if (animationPhase === 'assigned' && !externalAssigned) {\n        assignedTimer.current = setTimeout(() => {\n          setAnimationPhase('movingOut');\n        }, ASSIGNED_DISPLAY_DURATION);\n      }\n\n      return () => {\n        if (assignedTimer.current) clearTimeout(assignedTimer.current);\n      };\n    }, [animationPhase, externalAssigned]);\n\n    // State machine for animations\n    const handleAnimationEnd = useCallback(() => {\n      switch (animationPhase) {\n        case 'movingIn':\n          setAnimationPhase('revealing');\n          break;\n        case 'revealing':\n          setAnimationPhase('visible');\n          break;\n        case 'assigning':\n          setAnimationPhase('assigned');\n          setIsAssigned(true);\n          break;\n        case 'movingOut':\n          setAnimationPhase('hidden');\n          onFullyHidden?.();\n          break;\n        default:\n          break;\n      }\n    }, [animationPhase, onFullyHidden]);\n\n    const handleAssign = useCallback(() => {\n      if (externalAssigned) return; // Do nothing if already assigned\n\n      postPuzzleToAssign(\n        {\n          puzzle_id: puzzleId,\n        },\n        {\n          studentId,\n          courseStream,\n        },\n      );\n    }, [courseStream, externalAssigned, postPuzzleToAssign, puzzleId, studentId]);\n\n    const handleOnPuzzleClick = useCallback(() => {\n      onPuzzleClick();\n    }, [onPuzzleClick]);\n\n    // Render content only during specific phases\n    const renderContent = () => {\n      if (animationPhase === 'visible' || externalAssigned) {\n        return (\n          <>\n            <Styled.PuzzleContent\n              $justifyContent=\"center\"\n              $alignItems=\"center\"\n              $width=\"100%\"\n              $height=\"100%\"\n              onClick={handleOnPuzzleClick}\n              title=\"Click to preview\"\n              $flexGapX={1.5}\n            >\n              <Image width={136} height={136} src={imageUrl} withLoader={false} alt=\"Puzzle\" />\n              <Text $renderAs=\"h4\">{title}</Text>\n\n              {externalAssigned && (\n                <Styled.AssignedTag $gap={4} $gutter={8} $background=\"BLACK_1\">\n                  <Text $renderAs=\"ac4\" $color=\"WHITE_1\">\n                    Assigned\n                  </Text>\n                </Styled.AssignedTag>\n              )}\n            </Styled.PuzzleContent>\n\n            {userType === 'TEACHER' && (\n              <Styled.PuzzleButton\n                $background=\"BLACK_1\"\n                $widthX={15.75}\n                $alignItems=\"center\"\n                $justifyContent=\"center\"\n                $gapX={0.75}\n                $gutterX={1}\n                onClick={handleAssign}\n                $disabled={externalAssigned || isProcessing}\n              >\n                <Text $renderAs=\"ub1-bold\" $color={externalAssigned ? 'BLACK_T_38' : 'WHITE_1'}>\n                  {externalAssigned ? 'Discuss in next class' : 'Assign'}\n                </Text>\n              </Styled.PuzzleButton>\n            )}\n          </>\n        );\n      }\n\n      if (animationPhase === 'assigned') {\n        return (\n          <Styled.PuzzleText $alignItems=\"center\" $justifyContent=\"center\" $flexGap={8}>\n            <Styled.CheckMarkIcon\n              $widthX={2.5}\n              $heightX={2.5}\n              $background=\"WHITE\"\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n            >\n              <Check2Icon />\n            </Styled.CheckMarkIcon>\n\n            <Text $renderAs=\"ab1-bold\" $align=\"center\" $color=\"WHITE\">\n              Puzzle assigned\n            </Text>\n          </Styled.PuzzleText>\n        );\n      }\n\n      // No content during animations\n      return null;\n    };\n\n    if (animationPhase === 'hidden' && !triggerReveal) {\n      return null;\n    }\n\n    return (\n      <Styled.PuzzleContainer>\n        <PuzzleCard\n          animationPhase={!externalAssigned ? animationPhase : undefined}\n          onAnimationEnd={handleAnimationEnd}\n          imageHue={imageHue ?? 'BLUE'}\n          heightX={19}\n          widthX={15.75}\n          backgroundColor={externalAssigned ? `${imageHue}_2` : undefined}\n        >\n          {renderContent()}\n        </PuzzleCard>\n      </Styled.PuzzleContainer>\n    );\n  },\n);\n\nexport default PuzzleCardContainer;\n"],"names":["ASSIGNED_DISPLAY_DURATION","PuzzleCardContainer","memo","userType","triggerReveal","onFullyHidden","onPuzzleClick","puzzleData","courseStream","studentId","imageHue","imageUrl","externalAssigned","title","puzzleId","animationPhase","setAnimationPhase","useState","isAssigned","setIsAssigned","assignedTimer","useRef","postPuzzleToAssign","isProcessing","usePostPuzzleToAssign","error","useEffect","handleAnimationEnd","useCallback","handleAssign","handleOnPuzzleClick","renderContent","jsxs","Fragment","Styled.PuzzleContent","jsx","Image","Text","Styled.AssignedTag","Styled.PuzzleButton","Styled.PuzzleText","Styled.CheckMarkIcon","Check2Icon","Styled.PuzzleContainer","PuzzleCard","PuzzleCardContainer$1"],"mappings":";;;;;;;;AAaA,MAAMA,IAA4B,MAE5BC,IAAqDC;AAAA,EACzD,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,MACI;AACE,UAAA;AAAA,MACJ,WAAWC;AAAA,MACX,WAAWC;AAAA,MACX,UAAUC;AAAA,MACV,OAAAC;AAAA,MACA,IAAIC;AAAA,IACF,IAAAP,GAEE,CAACQ,GAAgBC,CAAiB,IAAIC,EAAqC,QAAQ,GACnF,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAE5CG,IAAgBC,EAA8B,IAAI,GAElD,EAAE,MAAMC,GAAoB,cAAAC,EAAA,IAAiBC,EAAsB;AAAA,MACvE,YAAY,CAACC,MAAyB;AACpC,QAAIA,IAEFT,EAAkB,SAAS,IAEvBD,MAAmB,aACrBC,EAAkB,WAAW;AAAA,MAGnC;AAAA,IAAA,CACD;AAGD,IAAAU,EAAU,MAAM;AACd,MAAKd,MACCR,IACEc,IACFF,EAAkB,UAAU,IACnBD,MAAmB,YAC5BC,EAAkB,UAAU,IAI1BD,MAAmB,YAAYA,MAAmB,eACpDC,EAAkB,WAAW;AAAA,IAKlC,GAAA,CAACZ,GAAec,GAAYN,CAAgB,CAAC,GAGhDc,EAAU,OACJX,MAAmB,cAAc,CAACH,MACtBQ,EAAA,UAAU,WAAW,MAAM;AACvC,MAAAJ,EAAkB,WAAW;AAAA,OAC5BhB,CAAyB,IAGvB,MAAM;AACX,MAAIoB,EAAc,WAAsB,aAAAA,EAAc,OAAO;AAAA,IAAA,IAE9D,CAACL,GAAgBH,CAAgB,CAAC;AAG/B,UAAAe,IAAqBC,EAAY,MAAM;AAC3C,cAAQb,GAAgB;AAAA,QACtB,KAAK;AACH,UAAAC,EAAkB,WAAW;AAC7B;AAAA,QACF,KAAK;AACH,UAAAA,EAAkB,SAAS;AAC3B;AAAA,QACF,KAAK;AACH,UAAAA,EAAkB,UAAU,GAC5BG,EAAc,EAAI;AAClB;AAAA,QACF,KAAK;AACH,UAAAH,EAAkB,QAAQ,GACVX,KAAA,QAAAA;AAChB;AAAA,MAGJ;AAAA,IAAA,GACC,CAACU,GAAgBV,CAAa,CAAC,GAE5BwB,IAAeD,EAAY,MAAM;AACrC,MAAIhB,KAEJU;AAAA,QACE;AAAA,UACE,WAAWR;AAAA,QACb;AAAA,QACA;AAAA,UACE,WAAAL;AAAA,UACA,cAAAD;AAAA,QACF;AAAA,MAAA;AAAA,IACF,GACC,CAACA,GAAcI,GAAkBU,GAAoBR,GAAUL,CAAS,CAAC,GAEtEqB,IAAsBF,EAAY,MAAM;AAC9B,MAAAtB;IAAA,GACb,CAACA,CAAa,CAAC,GAGZyB,IAAgB,MAChBhB,MAAmB,aAAaH,IAG9B,gBAAAoB,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,iBAAgB;AAAA,UAChB,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,SAASJ;AAAA,UACT,OAAM;AAAA,UACN,WAAW;AAAA,UAEX,UAAA;AAAA,YAAC,gBAAAK,EAAAC,GAAA,EAAM,OAAO,KAAK,QAAQ,KAAK,KAAKzB,GAAU,YAAY,IAAO,KAAI,SAAS,CAAA;AAAA,YAC9E,gBAAAwB,EAAAE,GAAA,EAAK,WAAU,MAAM,UAAMxB,GAAA;AAAA,YAE3BD,KACE,gBAAAuB,EAAAG,GAAA,EAAmB,MAAM,GAAG,SAAS,GAAG,aAAY,WACnD,4BAACD,GAAK,EAAA,WAAU,OAAM,QAAO,WAAU,qBAEvC,CAAA,GACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,MAEClC,MAAa,aACZ,gBAAAgC;AAAA,QAACI;AAAAA,QAAA;AAAA,UACC,aAAY;AAAA,UACZ,SAAS;AAAA,UACT,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAChB,OAAO;AAAA,UACP,UAAU;AAAA,UACV,SAASV;AAAA,UACT,WAAWjB,KAAoBW;AAAA,UAE/B,UAAA,gBAAAY,EAACE,GAAK,EAAA,WAAU,YAAW,QAAQzB,IAAmB,eAAe,WAClE,UAAmBA,IAAA,0BAA0B,SAChD,CAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAEJ,EAAA,CAAA,IAIAG,MAAmB,aAEnB,gBAAAiB,EAACQ,GAAA,EAAkB,aAAY,UAAS,iBAAgB,UAAS,UAAU,GACzE,UAAA;AAAA,MAAA,gBAAAL;AAAA,QAACM;AAAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,UAAU;AAAA,UACV,aAAY;AAAA,UACZ,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAEhB,4BAACC,GAAW,EAAA;AAAA,QAAA;AAAA,MACd;AAAA,MAEA,gBAAAP,EAACE,KAAK,WAAU,YAAW,QAAO,UAAS,QAAO,SAAQ,UAE1D,kBAAA,CAAA;AAAA,IACF,EAAA,CAAA,IAKG;AAGL,WAAAtB,MAAmB,YAAY,CAACX,IAC3B,OAIP,gBAAA+B,EAACQ,GAAA,EACC,UAAA,gBAAAR;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,gBAAiBhC,IAAoC,SAAjBG;AAAA,QACpC,gBAAgBY;AAAA,QAChB,UAAUjB,KAAY;AAAA,QACtB,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,iBAAiBE,IAAmB,GAAGF,CAAQ,OAAO;AAAA,QAErD,UAAcqB,EAAA;AAAA,MAAA;AAAA,IAEnB,EAAA,CAAA;AAAA,EAEJ;AACF,GAEAc,IAAe5C;"}

package/dist/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.js

@@ -46,7 +46,7 @@ const v = {
       _,
       {
         $width: "80%",
-        $renderAs: "ah4",
+        $renderAs: "ah3",
         $color: "WHITE_1",
         $align: "center",
         $show: h,

package/dist/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-feedback-celebration.js","sources":["../../../../src/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.tsx"],"sourcesContent":["import type { IPuzzleFeedbackCelebration } from './puzzle-feedback-celebration-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport IconButton from '../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport useModalActions from '../../ui/modals/use-modal-actions';\nimport useModalParams from '../../ui/modals/use-modal-params';\nimport { getPuzzleStickerLottie } from '../utils/puzzle-feedback-celebration';\nimport * as Styled from './puzzle-feedback-celebration-styled';\n\nconst puzzleStickerLottieSettings = {\n  autoplay: true,\n  loop: true,\n  renderer: 'canvas',\n};\n\nconst PuzzleFeedbackCelebration: FC = () => {\n  const { closeModal } = useModalActions();\n  const { feedbackComments, rewards, onCloseModal } = useModalParams<IPuzzleFeedbackCelebration>();\n\n  const [showHeader, setShowHeader] = useState(false);\n  const [showLottie, setShowLottie] = useState(false);\n  const [showText, setShowText] = useState(false);\n  const [showButton, setShowButton] = useState(false);\n\n  const { sticker } = rewards[0] || {};\n\n  const stickerLottie = sticker ? getPuzzleStickerLottie(sticker) : undefined;\n\n  const handleCloseModal = useCallback(() => {\n    onCloseModal?.();\n    closeModal();\n  }, [closeModal, onCloseModal]);\n\n  useEffect(() => {\n    // Sequence: Header -> Lottie -> Text -> Button\n    const headerTimer = setTimeout(() => {\n      setShowHeader(true);\n    }, 100);\n\n    const lottieTimer = setTimeout(() => {\n      setShowLottie(true);\n    }, 400);\n\n    const textTimer = setTimeout(() => {\n      setShowText(true);\n    }, 1000);\n\n    const buttonTimer = setTimeout(() => {\n      setShowButton(true);\n    }, 1500);\n\n    // Close modal after 4000ms\n    const closeModalTimer = setTimeout(() => {\n      handleCloseModal();\n    }, 5500);\n\n    return () => {\n      clearTimeout(headerTimer);\n      clearTimeout(lottieTimer);\n      clearTimeout(textTimer);\n      clearTimeout(buttonTimer);\n      clearTimeout(closeModalTimer);\n    };\n  }, [handleCloseModal]);\n\n  return (\n    <FlexView $justifyContent=\"center\" $alignItems=\"center\" $width=\"100%\">\n      <Styled.PuzzleFeedbackModalWrapper $flexGapX={2.5} $widthX={33.5} $alignItems=\"center\">\n        <Styled.ShimmerText $renderAs=\"ac2-black\" $show={showHeader}>\n          Puzzle Reviewed\n        </Styled.ShimmerText>\n\n        <Styled.LottieContainer $widthX={12.5} $heightX={12.5} $show={showLottie}>\n          {stickerLottie && (\n            <LottieAnimation\n              width={200}\n              height={200}\n              src={stickerLottie}\n              settings={puzzleStickerLottieSettings}\n            />\n          )}\n        </Styled.LottieContainer>\n\n        <Styled.FeedbackText\n          $width=\"80%\"\n          $renderAs=\"ah4\"\n          $color=\"WHITE_1\"\n          $align=\"center\"\n          $show={showText}\n        >\n          {feedbackComments}\n        </Styled.FeedbackText>\n\n        <Styled.CloseButtonWrapper $show={showButton}>\n          <IconButton\n            renderAs=\"secondary\"\n            Icon={CrossIcon}\n            size=\"small\"\n            analyticsLabel=\"close_puzzle_feedback_modal\"\n            onClick={handleCloseModal}\n          />\n        </Styled.CloseButtonWrapper>\n      </Styled.PuzzleFeedbackModalWrapper>\n    </FlexView>\n  );\n};\n\nexport default PuzzleFeedbackCelebration;\n"],"names":["puzzleStickerLottieSettings","PuzzleFeedbackCelebration","closeModal","useModalActions","feedbackComments","rewards","onCloseModal","useModalParams","showHeader","setShowHeader","useState","showLottie","setShowLottie","showText","setShowText","showButton","setShowButton","sticker","stickerLottie","getPuzzleStickerLottie","handleCloseModal","useCallback","useEffect","headerTimer","lottieTimer","textTimer","buttonTimer","closeModalTimer","FlexView","jsxs","Styled.PuzzleFeedbackModalWrapper","jsx","Styled.ShimmerText","Styled.LottieContainer","LottieAnimation","Styled.FeedbackText","Styled.CloseButtonWrapper","IconButton","CrossIcon","PuzzleFeedbackCelebration$1"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAA8B;AAAA,EAClC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAgC,MAAM;AACpC,QAAA,EAAE,YAAAC,MAAeC,KACjB,EAAE,kBAAAC,GAAkB,SAAAC,GAAS,cAAAC,MAAiBC,EAA2C,GAEzF,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAUC,CAAW,IAAIJ,EAAS,EAAK,GACxC,CAACK,GAAYC,CAAa,IAAIN,EAAS,EAAK,GAE5C,EAAE,SAAAO,EAAQ,IAAIZ,EAAQ,CAAC,KAAK,CAAA,GAE5Ba,IAAgBD,IAAUE,EAAuBF,CAAO,IAAI,QAE5DG,IAAmBC,EAAY,MAAM;AAC1B,IAAAf,KAAA,QAAAA,KACJJ;EAAA,GACV,CAACA,GAAYI,CAAY,CAAC;AAE7B,SAAAgB,EAAU,MAAM;AAER,UAAAC,IAAc,WAAW,MAAM;AACnC,MAAAd,EAAc,EAAI;AAAA,OACjB,GAAG,GAEAe,IAAc,WAAW,MAAM;AACnC,MAAAZ,EAAc,EAAI;AAAA,OACjB,GAAG,GAEAa,IAAY,WAAW,MAAM;AACjC,MAAAX,EAAY,EAAI;AAAA,OACf,GAAI,GAEDY,IAAc,WAAW,MAAM;AACnC,MAAAV,EAAc,EAAI;AAAA,OACjB,IAAI,GAGDW,IAAkB,WAAW,MAAM;AACtB,MAAAP;OAChB,IAAI;AAEP,WAAO,MAAM;AACX,mBAAaG,CAAW,GACxB,aAAaC,CAAW,GACxB,aAAaC,CAAS,GACtB,aAAaC,CAAW,GACxB,aAAaC,CAAe;AAAA,IAAA;AAAA,EAC9B,GACC,CAACP,CAAgB,CAAC,qBAGlBQ,GAAS,EAAA,iBAAgB,UAAS,aAAY,UAAS,QAAO,QAC7D,UAAC,gBAAAC,EAAAC,GAAA,EAAkC,WAAW,KAAK,SAAS,MAAM,aAAY,UAC5E,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAmB,WAAU,aAAY,OAAOxB,GAAY,UAE7D,mBAAA;AAAA,IAEA,gBAAAuB,EAACE,GAAA,EAAuB,SAAS,MAAM,UAAU,MAAM,OAAOtB,GAC3D,UACCO,KAAA,gBAAAa;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,KAAKhB;AAAA,QACL,UAAUlB;AAAA,MAAA;AAAA,IAAA,GAGhB;AAAA,IAEA,gBAAA+B;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,WAAU;AAAA,QACV,QAAO;AAAA,QACP,QAAO;AAAA,QACP,OAAOtB;AAAA,QAEN,UAAAT;AAAA,MAAA;AAAA,IACH;AAAA,IAEC,gBAAA2B,EAAAK,GAAA,EAA0B,OAAOrB,GAChC,UAAA,gBAAAgB;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAMC;AAAA,QACN,MAAK;AAAA,QACL,gBAAe;AAAA,QACf,SAASlB;AAAA,MAAA;AAAA,IAAA,GAEb;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEAmB,IAAetC;"}
+{"version":3,"file":"puzzle-feedback-celebration.js","sources":["../../../../src/features/puzzles/puzzle-feedback-celebration/puzzle-feedback-celebration.tsx"],"sourcesContent":["import type { IPuzzleFeedbackCelebration } from './puzzle-feedback-celebration-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport IconButton from '../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport useModalActions from '../../ui/modals/use-modal-actions';\nimport useModalParams from '../../ui/modals/use-modal-params';\nimport { getPuzzleStickerLottie } from '../utils/puzzle-feedback-celebration';\nimport * as Styled from './puzzle-feedback-celebration-styled';\n\nconst puzzleStickerLottieSettings = {\n  autoplay: true,\n  loop: true,\n  renderer: 'canvas',\n};\n\nconst PuzzleFeedbackCelebration: FC = () => {\n  const { closeModal } = useModalActions();\n  const { feedbackComments, rewards, onCloseModal } = useModalParams<IPuzzleFeedbackCelebration>();\n\n  const [showHeader, setShowHeader] = useState(false);\n  const [showLottie, setShowLottie] = useState(false);\n  const [showText, setShowText] = useState(false);\n  const [showButton, setShowButton] = useState(false);\n\n  const { sticker } = rewards[0] || {};\n\n  const stickerLottie = sticker ? getPuzzleStickerLottie(sticker) : undefined;\n\n  const handleCloseModal = useCallback(() => {\n    onCloseModal?.();\n    closeModal();\n  }, [closeModal, onCloseModal]);\n\n  useEffect(() => {\n    // Sequence: Header -> Lottie -> Text -> Button\n    const headerTimer = setTimeout(() => {\n      setShowHeader(true);\n    }, 100);\n\n    const lottieTimer = setTimeout(() => {\n      setShowLottie(true);\n    }, 400);\n\n    const textTimer = setTimeout(() => {\n      setShowText(true);\n    }, 1000);\n\n    const buttonTimer = setTimeout(() => {\n      setShowButton(true);\n    }, 1500);\n\n    // Close modal after 4000ms\n    const closeModalTimer = setTimeout(() => {\n      handleCloseModal();\n    }, 5500);\n\n    return () => {\n      clearTimeout(headerTimer);\n      clearTimeout(lottieTimer);\n      clearTimeout(textTimer);\n      clearTimeout(buttonTimer);\n      clearTimeout(closeModalTimer);\n    };\n  }, [handleCloseModal]);\n\n  return (\n    <FlexView $justifyContent=\"center\" $alignItems=\"center\" $width=\"100%\">\n      <Styled.PuzzleFeedbackModalWrapper $flexGapX={2.5} $widthX={33.5} $alignItems=\"center\">\n        <Styled.ShimmerText $renderAs=\"ac2-black\" $show={showHeader}>\n          Puzzle Reviewed\n        </Styled.ShimmerText>\n\n        <Styled.LottieContainer $widthX={12.5} $heightX={12.5} $show={showLottie}>\n          {stickerLottie && (\n            <LottieAnimation\n              width={200}\n              height={200}\n              src={stickerLottie}\n              settings={puzzleStickerLottieSettings}\n            />\n          )}\n        </Styled.LottieContainer>\n\n        <Styled.FeedbackText\n          $width=\"80%\"\n          $renderAs=\"ah3\"\n          $color=\"WHITE_1\"\n          $align=\"center\"\n          $show={showText}\n        >\n          {feedbackComments}\n        </Styled.FeedbackText>\n\n        <Styled.CloseButtonWrapper $show={showButton}>\n          <IconButton\n            renderAs=\"secondary\"\n            Icon={CrossIcon}\n            size=\"small\"\n            analyticsLabel=\"close_puzzle_feedback_modal\"\n            onClick={handleCloseModal}\n          />\n        </Styled.CloseButtonWrapper>\n      </Styled.PuzzleFeedbackModalWrapper>\n    </FlexView>\n  );\n};\n\nexport default PuzzleFeedbackCelebration;\n"],"names":["puzzleStickerLottieSettings","PuzzleFeedbackCelebration","closeModal","useModalActions","feedbackComments","rewards","onCloseModal","useModalParams","showHeader","setShowHeader","useState","showLottie","setShowLottie","showText","setShowText","showButton","setShowButton","sticker","stickerLottie","getPuzzleStickerLottie","handleCloseModal","useCallback","useEffect","headerTimer","lottieTimer","textTimer","buttonTimer","closeModalTimer","FlexView","jsxs","Styled.PuzzleFeedbackModalWrapper","jsx","Styled.ShimmerText","Styled.LottieContainer","LottieAnimation","Styled.FeedbackText","Styled.CloseButtonWrapper","IconButton","CrossIcon","PuzzleFeedbackCelebration$1"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAA8B;AAAA,EAClC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAgC,MAAM;AACpC,QAAA,EAAE,YAAAC,MAAeC,KACjB,EAAE,kBAAAC,GAAkB,SAAAC,GAAS,cAAAC,MAAiBC,EAA2C,GAEzF,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAUC,CAAW,IAAIJ,EAAS,EAAK,GACxC,CAACK,GAAYC,CAAa,IAAIN,EAAS,EAAK,GAE5C,EAAE,SAAAO,EAAQ,IAAIZ,EAAQ,CAAC,KAAK,CAAA,GAE5Ba,IAAgBD,IAAUE,EAAuBF,CAAO,IAAI,QAE5DG,IAAmBC,EAAY,MAAM;AAC1B,IAAAf,KAAA,QAAAA,KACJJ;EAAA,GACV,CAACA,GAAYI,CAAY,CAAC;AAE7B,SAAAgB,EAAU,MAAM;AAER,UAAAC,IAAc,WAAW,MAAM;AACnC,MAAAd,EAAc,EAAI;AAAA,OACjB,GAAG,GAEAe,IAAc,WAAW,MAAM;AACnC,MAAAZ,EAAc,EAAI;AAAA,OACjB,GAAG,GAEAa,IAAY,WAAW,MAAM;AACjC,MAAAX,EAAY,EAAI;AAAA,OACf,GAAI,GAEDY,IAAc,WAAW,MAAM;AACnC,MAAAV,EAAc,EAAI;AAAA,OACjB,IAAI,GAGDW,IAAkB,WAAW,MAAM;AACtB,MAAAP;OAChB,IAAI;AAEP,WAAO,MAAM;AACX,mBAAaG,CAAW,GACxB,aAAaC,CAAW,GACxB,aAAaC,CAAS,GACtB,aAAaC,CAAW,GACxB,aAAaC,CAAe;AAAA,IAAA;AAAA,EAC9B,GACC,CAACP,CAAgB,CAAC,qBAGlBQ,GAAS,EAAA,iBAAgB,UAAS,aAAY,UAAS,QAAO,QAC7D,UAAC,gBAAAC,EAAAC,GAAA,EAAkC,WAAW,KAAK,SAAS,MAAM,aAAY,UAC5E,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAmB,WAAU,aAAY,OAAOxB,GAAY,UAE7D,mBAAA;AAAA,IAEA,gBAAAuB,EAACE,GAAA,EAAuB,SAAS,MAAM,UAAU,MAAM,OAAOtB,GAC3D,UACCO,KAAA,gBAAAa;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,KAAKhB;AAAA,QACL,UAAUlB;AAAA,MAAA;AAAA,IAAA,GAGhB;AAAA,IAEA,gBAAA+B;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,WAAU;AAAA,QACV,QAAO;AAAA,QACP,QAAO;AAAA,QACP,OAAOtB;AAAA,QAEN,UAAAT;AAAA,MAAA;AAAA,IACH;AAAA,IAEC,gBAAA2B,EAAAK,GAAA,EAA0B,OAAOrB,GAChC,UAAA,gBAAAgB;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAMC;AAAA,QACN,MAAK;AAAA,QACL,gBAAe;AAAA,QACf,SAASlB;AAAA,MAAA;AAAA,IAAA,GAEb;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEAmB,IAAetC;"}

package/dist/features/puzzles/utils/puzzle-pattern.js

@@ -1,40 +1,25 @@
-import { ILLUSTRATIONS as r } from "../../../assets/illustrations/illustrations.js";
-import { LOTTIE as E } from "../../../assets/lottie/lottie.js";
+import { ILLUSTRATIONS as P } from "../../../assets/illustrations/illustrations.js";
 const {
-  PUZZLE_PATTERN_BLUE: e,
-  PUZZLE_PATTERN_GREEN: t,
-  PUZZLE_PATTERN_ORANGE: P,
-  PUZZLE_PATTERN_PURPLE: T,
-  PUZZLE_PATTERN_YELLOW: Z
-} = r, U = (L) => {
-  switch (L) {
+  PUZZLE_PATTERN_BLUE: r,
+  PUZZLE_PATTERN_GREEN: e,
+  PUZZLE_PATTERN_ORANGE: t,
+  PUZZLE_PATTERN_PURPLE: L,
+  PUZZLE_PATTERN_YELLOW: R
+} = P, N = (E) => {
+  switch (E) {
     case "YELLOW":
-      return Z;
+      return R;
     case "GREEN":
-      return t;
-    case "ORANGE":
-      return P;
-    case "PURPLE":
-      return T;
-    default:
       return e;
-  }
-}, O = (L) => {
-  switch (L) {
-    case "YELLOW":
-      return E.PUZZLE_YELLOW_LOTTIE;
-    case "GREEN":
-      return E.PUZZLE_GREEN_LOTTIE;
     case "ORANGE":
-      return E.PUZZLE_ORANGE_LOTTIE;
+      return t;
     case "PURPLE":
-      return E.PUZZLE_PURPLE_LOTTIE;
+      return L;
     default:
-      return E.PUZZLE_BLUE_LOTTIE;
+      return r;
   }
 };
 export {
-  O as getPuzzleCardLottie,
-  U as getPuzzleCardPattern
+  N as getPuzzleCardPattern
 };
 //# sourceMappingURL=puzzle-pattern.js.map

package/dist/features/puzzles/utils/puzzle-pattern.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-pattern.js","sources":["../../../../src/features/puzzles/utils/puzzle-pattern.ts"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport { LOTTIE } from '../../../assets/lottie/lottie';\n\nconst {\n  PUZZLE_PATTERN_BLUE,\n  PUZZLE_PATTERN_GREEN,\n  PUZZLE_PATTERN_ORANGE,\n  PUZZLE_PATTERN_PURPLE,\n  PUZZLE_PATTERN_YELLOW,\n} = ILLUSTRATIONS;\n\nconst getPuzzleCardPattern = (imageHue: THueNames) => {\n  switch (imageHue) {\n    case 'YELLOW':\n      return PUZZLE_PATTERN_YELLOW;\n    case 'GREEN':\n      return PUZZLE_PATTERN_GREEN;\n    case 'ORANGE':\n      return PUZZLE_PATTERN_ORANGE;\n    case 'PURPLE':\n      return PUZZLE_PATTERN_PURPLE;\n\n    default:\n      return PUZZLE_PATTERN_BLUE;\n  }\n};\n\nconst getPuzzleCardLottie = (imageHue: THueNames) => {\n  switch (imageHue) {\n    case 'YELLOW':\n      return LOTTIE.PUZZLE_YELLOW_LOTTIE;\n    case 'GREEN':\n      return LOTTIE.PUZZLE_GREEN_LOTTIE;\n    case 'ORANGE':\n      return LOTTIE.PUZZLE_ORANGE_LOTTIE;\n    case 'PURPLE':\n      return LOTTIE.PUZZLE_PURPLE_LOTTIE;\n\n    default:\n      return LOTTIE.PUZZLE_BLUE_LOTTIE;\n  }\n};\n\nexport { getPuzzleCardPattern, getPuzzleCardLottie };\n"],"names":["PUZZLE_PATTERN_BLUE","PUZZLE_PATTERN_GREEN","PUZZLE_PATTERN_ORANGE","PUZZLE_PATTERN_PURPLE","PUZZLE_PATTERN_YELLOW","ILLUSTRATIONS","getPuzzleCardPattern","imageHue","getPuzzleCardLottie","LOTTIE"],"mappings":";;AAKA,MAAM;AAAA,EACJ,qBAAAA;AAAA,EACA,sBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AACF,IAAIC,GAEEC,IAAuB,CAACC,MAAwB;AACpD,UAAQA,GAAU;AAAA,IAChB,KAAK;AACI,aAAAH;AAAA,IACT,KAAK;AACI,aAAAH;AAAA,IACT,KAAK;AACI,aAAAC;AAAA,IACT,KAAK;AACI,aAAAC;AAAA,IAET;AACS,aAAAH;AAAA,EACX;AACF,GAEMQ,IAAsB,CAACD,MAAwB;AACnD,UAAQA,GAAU;AAAA,IAChB,KAAK;AACH,aAAOE,EAAO;AAAA,IAChB,KAAK;AACH,aAAOA,EAAO;AAAA,IAChB,KAAK;AACH,aAAOA,EAAO;AAAA,IAChB,KAAK;AACH,aAAOA,EAAO;AAAA,IAEhB;AACE,aAAOA,EAAO;AAAA,EAClB;AACF;"}
+{"version":3,"file":"puzzle-pattern.js","sources":["../../../../src/features/puzzles/utils/puzzle-pattern.ts"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\n\nconst {\n  PUZZLE_PATTERN_BLUE,\n  PUZZLE_PATTERN_GREEN,\n  PUZZLE_PATTERN_ORANGE,\n  PUZZLE_PATTERN_PURPLE,\n  PUZZLE_PATTERN_YELLOW,\n} = ILLUSTRATIONS;\n\nconst getPuzzleCardPattern = (imageHue: THueNames) => {\n  switch (imageHue) {\n    case 'YELLOW':\n      return PUZZLE_PATTERN_YELLOW;\n    case 'GREEN':\n      return PUZZLE_PATTERN_GREEN;\n    case 'ORANGE':\n      return PUZZLE_PATTERN_ORANGE;\n    case 'PURPLE':\n      return PUZZLE_PATTERN_PURPLE;\n\n    default:\n      return PUZZLE_PATTERN_BLUE;\n  }\n};\n\nexport { getPuzzleCardPattern };\n"],"names":["PUZZLE_PATTERN_BLUE","PUZZLE_PATTERN_GREEN","PUZZLE_PATTERN_ORANGE","PUZZLE_PATTERN_PURPLE","PUZZLE_PATTERN_YELLOW","ILLUSTRATIONS","getPuzzleCardPattern","imageHue"],"mappings":";AAIA,MAAM;AAAA,EACJ,qBAAAA;AAAA,EACA,sBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AACF,IAAIC,GAEEC,IAAuB,CAACC,MAAwB;AACpD,UAAQA,GAAU;AAAA,IAChB,KAAK;AACI,aAAAH;AAAA,IACT,KAAK;AACI,aAAAH;AAAA,IACT,KAAK;AACI,aAAAC;AAAA,IACT,KAAK;AACI,aAAAC;AAAA,IAET;AACS,aAAAH;AAAA,EACX;AACF;"}

package/dist/features/trial-session/comps/student-profile/student-profile.js

@@ -11,7 +11,7 @@ import { useGetStudentProfileSummary as X } from "../../api/student-profile-summ
 import { useTrialSessionContext as M } from "../../context/use-trial-session-context.js";
 import O from "../slide-header/index.js";
 import { Container as k, ContentWrapper as B, AbsoluteImage as H, ImageWrapper as R } from "./student-profile-styled.js";
-import { getMilestoneGoalName as P, getDummyProfileImage as W } from "./student-profile-utils.js";
+import { getDummyProfileImage as W, getMilestoneGoalName as P } from "./student-profile-utils.js";
 const re = b(() => {
   const { isTeacher: t, studentId: l, formData: $, updateSlideConfig: d, updateButtonState: f } = M(), { name: y, goals: r, studentProfile: o } = $ || {}, { dummyProfileImageIndex: I, profileSummary: x } = o || {}, C = W(I), m = A(() => r && r.length > 0 ? {
     school_success_goal: P(r, g.SCHOOL_SUCCESS),

package/dist/features/trial-session/comps/teacher-intro/teacher-intro-styled.js

@@ -1,56 +1,13 @@
-import o from "styled-components";
-import e from "../../../ui/image/image.js";
-import t from "../../../ui/layout/flex-view.js";
-const l = o.div`
+import t from "styled-components";
+import o from "../../../ui/layout/flex-view.js";
+const i = t.div`
   width: 100%;
   height: 100%;
-`, c = o(t)`
+`, n = t(o)`
   margin: auto;
-`, h = o(e)`
-  object-fit: cover;
-`, s = o.div(
-  ({ theme: r }) => `
-  flex: 1;
-  display: grid;
-  border-left: 1px solid ${r.colors.BLACK_T_87};
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: auto auto auto;
-`
-), p = o(t)(
-  ({ theme: r }) => `
-  border: 0.5px solid ${r.colors.WHITE_5};
-  &:first-child,
-  &:nth-child(2) {
-    grid-column: span 1;
-  }
-  &:nth-child(3),
-  &:nth-child(4) {
-    grid-column: span 2;
-  }
-  &:first-child {
-    border-left: none;
-    border-top: none;
-  }
-  &:nth-child(2) {
-    border-right: none;
-    border-top: none;
-  }
-  &:nth-child(3) {
-    border-left: none;
-    border-right: none;
-  }
-  &:nth-child(4) {
-    border-left: none;
-    border-right: none;
-    border-bottom: none;
-  }
-`
-);
+`;
 export {
-  l as Container,
-  c as ContentWrapper,
-  s as GridContainer,
-  p as GridItem,
-  h as ProfilePicture
+  i as Container,
+  n as ContentWrapper
 };
 //# sourceMappingURL=teacher-intro-styled.js.map

package/dist/features/trial-session/comps/teacher-intro/teacher-intro-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"teacher-intro-styled.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport Image from '../../../ui/image/image';\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst ContentWrapper = styled(FlexView)`\n  margin: auto;\n`;\n\nconst ProfilePicture = styled(Image)`\n  object-fit: cover;\n`;\n\nconst GridContainer = styled.div(\n  ({ theme }) => `\n  flex: 1;\n  display: grid;\n  border-left: 1px solid ${theme.colors.BLACK_T_87};\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: auto auto auto;\n`,\n);\n\nconst GridItem = styled(FlexView)(\n  ({ theme }) => `\n  border: 0.5px solid ${theme.colors.WHITE_5};\n  &:first-child,\n  &:nth-child(2) {\n    grid-column: span 1;\n  }\n  &:nth-child(3),\n  &:nth-child(4) {\n    grid-column: span 2;\n  }\n  &:first-child {\n    border-left: none;\n    border-top: none;\n  }\n  &:nth-child(2) {\n    border-right: none;\n    border-top: none;\n  }\n  &:nth-child(3) {\n    border-left: none;\n    border-right: none;\n  }\n  &:nth-child(4) {\n    border-left: none;\n    border-right: none;\n    border-bottom: none;\n  }\n`,\n);\n\nexport { Container, ContentWrapper, ProfilePicture, GridContainer, GridItem };\n"],"names":["Container","styled","ContentWrapper","FlexView","ProfilePicture","Image","GridContainer","theme","GridItem"],"mappings":";;;AAKA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,GAKnBC,IAAiBD,EAAOE,CAAQ;AAAA;AAAA,GAIhCC,IAAiBH,EAAOI,CAAK;AAAA;AAAA,GAI7BC,IAAgBL,EAAO;AAAA,EAC3B,CAAC,EAAE,OAAAM,EAAA,MAAY;AAAA;AAAA;AAAA,2BAGUA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAIlD,GAEMC,IAAWP,EAAOE,CAAQ;AAAA,EAC9B,CAAC,EAAE,OAAAI,EAAA,MAAY;AAAA,wBACOA,EAAM,OAAO,OAAO;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;AA2B5C;"}
+{"version":3,"file":"teacher-intro-styled.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst ContentWrapper = styled(FlexView)`\n  margin: auto;\n`;\n\nexport { Container, ContentWrapper };\n"],"names":["Container","styled","ContentWrapper","FlexView"],"mappings":";;AAIA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,GAKnBC,IAAiBD,EAAOE,CAAQ;AAAA;AAAA;"}

package/dist/features/trial-session/comps/teacher-intro/teacher-intro.js

@@ -1,74 +1,20 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { memo as T, useMemo as I } from "react";
-import j from "../../../ui/image/image.js";
-import h from "../../../ui/layout/flex-view.js";
-import s from "../../../ui/separator/separator.js";
-import t from "../../../ui/text/text.js";
-import { useTrialSessionContext as k } from "../../context/use-trial-session-context.js";
-import O from "../communication-slide/index.js";
-import F from "../slide-header/index.js";
-import { COUNTRY_FLAGS as H } from "./teacher-intro-constants.js";
-import { Container as L, ContentWrapper as D, ProfilePicture as E, GridContainer as P, GridItem as i } from "./teacher-intro-styled.js";
-const z = T(() => {
-  const { slideConfig: f } = k(), { renderAVIn: m, teacher_profile: u } = f || {}, {
-    degree: g,
-    countries: o,
-    lower_grade: a,
-    higher_grade: n,
-    header_image: $,
-    years_of_experience: p,
-    number_of_students_taught: b
-  } = u || {}, { degree_name: c, field_of_study: d } = g || {}, _ = Object.values(H), l = n && parseInt(n, 10) > 8, x = I(() => l ? "High School" : ` ${a === "K" ? "" : "G"}${a} - G${n}`, [l, n, a]);
-  return m === "right" ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ r(L, { children: [
-    /* @__PURE__ */ e(s, { height: 60 }),
-    /* @__PURE__ */ e(F, {}),
-    /* @__PURE__ */ r(
-      D,
-      {
-        $flexDirection: "row",
-        $width: 750,
-        $borderColor: "BLACK_T_87",
-        $background: "WHITE_3",
-        children: [
-          /* @__PURE__ */ e(E, { withLoader: !0, src: $, width: 350, height: 350 }),
-          /* @__PURE__ */ r(P, { children: [
-            /* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
-              /* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: p }),
-              /* @__PURE__ */ e(t, { $renderAs: "ub3", children: "Yrs of Teaching Experience" })
-            ] }),
-            /* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
-              /* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: b }),
-              /* @__PURE__ */ e(t, { $renderAs: "ub3", children: "Students Taught" })
-            ] }),
-            c && d && /* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
-              /* @__PURE__ */ e(t, { $renderAs: "ab1-black", children: c }),
-              /* @__PURE__ */ r(t, { $renderAs: "ub3", children: [
-                "In ",
-                d
-              ] })
-            ] }),
-            /* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
-              /* @__PURE__ */ r(t, { $renderAs: "ab1-black", children: [
-                "Teaching ",
-                x,
-                " kids in"
-              ] }),
-              /* @__PURE__ */ e(s, { height: 12 }),
-              /* @__PURE__ */ e(h, { $flexDirection: "row", $flexGap: 16, $flexWrap: !0, children: o && o.length > 0 && o.map((C) => {
-                const y = _.find((S) => S.name === C), { flag_icon: A = "", label: w, name: G } = y || {};
-                return /* @__PURE__ */ r(h, { $flexDirection: "row", $flexGap: 4, children: [
-                  /* @__PURE__ */ e(j, { src: A, width: 30, height: 20, withLoader: !1 }),
-                  /* @__PURE__ */ e(t, { $renderAs: "ab3-black", children: w })
-                ] }, G);
-              }) })
-            ] })
-          ] })
-        ]
-      }
-    )
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { memo as m } from "react";
+import n from "../../../ui/separator/separator.js";
+import { useTrialSessionContext as f } from "../../context/use-trial-session-context.js";
+import a from "../communication-slide/index.js";
+import p from "../slide-header/index.js";
+import { Container as s, ContentWrapper as c } from "./teacher-intro-styled.js";
+import h from "./teacher-profile/teacher-profile.js";
+const j = m(() => {
+  const { slideConfig: e } = f(), { renderAVIn: o, teacher_profile: t } = e || {};
+  return o === "right" ? /* @__PURE__ */ r(a, {}) : /* @__PURE__ */ i(s, { children: [
+    /* @__PURE__ */ r(n, { height: 60 }),
+    /* @__PURE__ */ r(p, {}),
+    /* @__PURE__ */ r(c, { $width: 750, children: /* @__PURE__ */ r(h, { teacherProfile: t }) })
   ] });
 });
 export {
-  z as default
+  j as default
 };
 //# sourceMappingURL=teacher-intro.js.map

package/dist/features/trial-session/comps/teacher-intro/teacher-intro.js.map

@@ -1 +1 @@
-{"version":3,"file":"teacher-intro.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\n\nimport Image from '../../../ui/image/image';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport CommunicationSlide from '../communication-slide';\nimport SlideHeader from '../slide-header';\nimport { COUNTRY_FLAGS } from './teacher-intro-constants';\nimport * as Styled from './teacher-intro-styled';\n\nconst TeacherIntro = memo(() => {\n  const { slideConfig } = useTrialSessionContext();\n  const { renderAVIn, teacher_profile: teacherProfile } = slideConfig || {};\n\n  const {\n    degree,\n    countries,\n    lower_grade: lowerGrade,\n    higher_grade: higherGrade,\n    header_image: headerImage,\n    years_of_experience: yearsOfExperience,\n    number_of_students_taught: numberOfStudentsTaught,\n  } = teacherProfile || {};\n  const { degree_name: degreeName, field_of_study: fieldOfStudy } = degree || {};\n\n  const countryFlagArray = Object.values(COUNTRY_FLAGS);\n  const isHighSchool = higherGrade && parseInt(higherGrade, 10) > 8;\n\n  const displayGrade = useMemo(() => {\n    return isHighSchool\n      ? 'High School'\n      : ` ${lowerGrade === 'K' ? '' : 'G'}${lowerGrade} - G${higherGrade}`;\n  }, [isHighSchool, higherGrade, lowerGrade]);\n\n  if (renderAVIn === 'right') return <CommunicationSlide />;\n\n  return (\n    <Styled.Container>\n      <Separator height={60} />\n      <SlideHeader />\n      <Styled.ContentWrapper\n        $flexDirection=\"row\"\n        $width={750}\n        $borderColor=\"BLACK_T_87\"\n        $background=\"WHITE_3\"\n      >\n        <Styled.ProfilePicture withLoader src={headerImage} width={350} height={350} />\n        <Styled.GridContainer>\n          <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n            <Text $renderAs=\"ah3-black\">{yearsOfExperience}</Text>\n            <Text $renderAs=\"ub3\">Yrs of Teaching Experience</Text>\n          </Styled.GridItem>\n          <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n            <Text $renderAs=\"ah3-black\">{numberOfStudentsTaught}</Text>\n            <Text $renderAs=\"ub3\">Students Taught</Text>\n          </Styled.GridItem>\n          {degreeName && fieldOfStudy && (\n            <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n              <Text $renderAs=\"ab1-black\">{degreeName}</Text>\n              <Text $renderAs=\"ub3\">In {fieldOfStudy}</Text>\n            </Styled.GridItem>\n          )}\n          <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n            <Text $renderAs=\"ab1-black\">Teaching {displayGrade} kids in</Text>\n            <Separator height={12} />\n            <FlexView $flexDirection=\"row\" $flexGap={16} $flexWrap>\n              {countries &&\n                countries.length > 0 &&\n                countries.map(country => {\n                  const countryFlag = countryFlagArray.find(item => item.name === country);\n                  const { flag_icon: flagIcon = '', label, name } = countryFlag || {};\n\n                  return (\n                    <FlexView key={name} $flexDirection=\"row\" $flexGap={4}>\n                      <Image src={flagIcon} width={30} height={20} withLoader={false} />\n                      <Text $renderAs=\"ab3-black\">{label}</Text>\n                    </FlexView>\n                  );\n                })}\n            </FlexView>\n          </Styled.GridItem>\n        </Styled.GridContainer>\n      </Styled.ContentWrapper>\n    </Styled.Container>\n  );\n});\n\nexport default TeacherIntro;\n"],"names":["TeacherIntro","memo","slideConfig","useTrialSessionContext","renderAVIn","teacherProfile","degree","countries","lowerGrade","higherGrade","headerImage","yearsOfExperience","numberOfStudentsTaught","degreeName","fieldOfStudy","countryFlagArray","COUNTRY_FLAGS","isHighSchool","displayGrade","useMemo","jsx","CommunicationSlide","jsxs","Styled.Container","Separator","SlideHeader","Styled.ContentWrapper","Styled.ProfilePicture","Styled.GridContainer","Styled.GridItem","Text","FlexView","country","countryFlag","item","flagIcon","label","name","Image"],"mappings":"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"}
+{"version":3,"file":"teacher-intro.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport Separator from '../../../ui/separator/separator';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport CommunicationSlide from '../communication-slide';\nimport SlideHeader from '../slide-header';\nimport * as Styled from './teacher-intro-styled';\nimport TeacherProfile from './teacher-profile/teacher-profile';\n\nconst TeacherIntro = memo(() => {\n  const { slideConfig } = useTrialSessionContext();\n  const { renderAVIn, teacher_profile: teacherProfile } = slideConfig || {};\n\n  if (renderAVIn === 'right') return <CommunicationSlide />;\n\n  return (\n    <Styled.Container>\n      <Separator height={60} />\n      <SlideHeader />\n      <Styled.ContentWrapper $width={750}>\n        <TeacherProfile teacherProfile={teacherProfile} />\n      </Styled.ContentWrapper>\n    </Styled.Container>\n  );\n});\n\nexport default TeacherIntro;\n"],"names":["TeacherIntro","memo","slideConfig","useTrialSessionContext","renderAVIn","teacherProfile","jsx","CommunicationSlide","jsxs","Styled.Container","Separator","SlideHeader","Styled.ContentWrapper","TeacherProfile"],"mappings":";;;;;;;;AASM,MAAAA,IAAeC,EAAK,MAAM;AACxB,QAAA,EAAE,aAAAC,MAAgBC,KAClB,EAAE,YAAAC,GAAY,iBAAiBC,EAAe,IAAIH,KAAe,CAAA;AAEvE,SAAIE,MAAe,UAAgB,gBAAAE,EAACC,GAAmB,CAAA,CAAA,IAGrD,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,sBACtBC,GAAY,EAAA;AAAA,IACb,gBAAAL,EAACM,GAAA,EAAsB,QAAQ,KAC7B,UAAA,gBAAAN,EAACO,GAAe,EAAA,gBAAAR,EAAgC,CAAA,GAClD;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.js

@@ -0,0 +1,49 @@
+import r from "styled-components";
+import e from "../../../../ui/image/image.js";
+import t from "../../../../ui/layout/flex-view.js";
+const l = r(e)`
+  object-fit: cover;
+`, c = r.div(
+  ({ theme: o }) => `
+  flex: 1;
+  display: grid;
+  border-left: 1px solid ${o.colors.BLACK_T_87};
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: auto auto auto;
+`
+), h = r(t)(
+  ({ theme: o }) => `
+  border: 0.5px solid ${o.colors.WHITE_5};
+  &:first-child,
+  &:nth-child(2) {
+    grid-column: span 1;
+  }
+  &:nth-child(3),
+  &:nth-child(4) {
+    grid-column: span 2;
+  }
+  &:first-child {
+    border-left: none;
+    border-top: none;
+  }
+  &:nth-child(2) {
+    border-right: none;
+    border-top: none;
+  }
+  &:nth-child(3) {
+    border-left: none;
+    border-right: none;
+  }
+  &:nth-child(4) {
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+  }
+`
+);
+export {
+  c as GridContainer,
+  h as GridItem,
+  l as ProfilePicture
+};
+//# sourceMappingURL=teacher-profile-styled.js.map

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teacher-profile-styled.js","sources":["../../../../../../src/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\n\nconst ProfilePicture = styled(Image)`\n  object-fit: cover;\n`;\n\nconst GridContainer = styled.div(\n  ({ theme }) => `\n  flex: 1;\n  display: grid;\n  border-left: 1px solid ${theme.colors.BLACK_T_87};\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: auto auto auto;\n`,\n);\n\nconst GridItem = styled(FlexView)(\n  ({ theme }) => `\n  border: 0.5px solid ${theme.colors.WHITE_5};\n  &:first-child,\n  &:nth-child(2) {\n    grid-column: span 1;\n  }\n  &:nth-child(3),\n  &:nth-child(4) {\n    grid-column: span 2;\n  }\n  &:first-child {\n    border-left: none;\n    border-top: none;\n  }\n  &:nth-child(2) {\n    border-right: none;\n    border-top: none;\n  }\n  &:nth-child(3) {\n    border-left: none;\n    border-right: none;\n  }\n  &:nth-child(4) {\n    border-left: none;\n    border-right: none;\n    border-bottom: none;\n  }\n`,\n);\n\nexport { ProfilePicture, GridContainer, GridItem };\n"],"names":["ProfilePicture","styled","Image","GridContainer","theme","GridItem","FlexView"],"mappings":";;;AAKM,MAAAA,IAAiBC,EAAOC,CAAK;AAAA;AAAA,GAI7BC,IAAgBF,EAAO;AAAA,EAC3B,CAAC,EAAE,OAAAG,EAAA,MAAY;AAAA;AAAA;AAAA,2BAGUA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAIlD,GAEMC,IAAWJ,EAAOK,CAAQ;AAAA,EAC9B,CAAC,EAAE,OAAAF,EAAA,MAAY;AAAA,wBACOA,EAAM,OAAO,OAAO;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;AA2B5C;"}

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.js

@@ -0,0 +1,64 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { memo as G, useMemo as T } from "react";
+import C from "../../../../ui/image/image.js";
+import a from "../../../../ui/layout/flex-view.js";
+import j from "../../../../ui/separator/separator.js";
+import t from "../../../../ui/text/text.js";
+import { COUNTRY_FLAGS as k } from "../teacher-intro-constants.js";
+import { ProfilePicture as I, GridContainer as S, GridItem as i } from "./teacher-profile-styled.js";
+const O = G(({ teacherProfile: s }) => {
+  const {
+    degree: f,
+    countries: o,
+    lower_grade: c,
+    higher_grade: n,
+    header_image: u,
+    years_of_experience: g,
+    number_of_students_taught: m
+  } = s || {}, { degree_name: d, field_of_study: l } = f || {}, $ = Object.values(k), h = n && parseInt(n, 10) > 8, p = T(() => h ? "High School" : ` ${c === "K" ? "" : "G"}${c} - G${n}`, [h, n, c]);
+  return /* @__PURE__ */ e(a, { $flexDirection: "row", $borderColor: "BLACK_T_87", $background: "WHITE_3", children: [
+    /* @__PURE__ */ r(I, { withLoader: !0, src: u, width: 350, height: 350 }),
+    /* @__PURE__ */ e(S, { children: [
+      /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
+        /* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: [
+          g,
+          "+"
+        ] }),
+        /* @__PURE__ */ r(t, { $renderAs: "ub3", children: "Yrs of Teaching Experience" })
+      ] }),
+      /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
+        /* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: [
+          m,
+          "+"
+        ] }),
+        /* @__PURE__ */ r(t, { $renderAs: "ub3", children: "Students Taught" })
+      ] }),
+      d && l && /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
+        /* @__PURE__ */ r(t, { $renderAs: "ab1-black", children: d }),
+        /* @__PURE__ */ e(t, { $renderAs: "ub3", children: [
+          "In ",
+          l
+        ] })
+      ] }),
+      /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
+        /* @__PURE__ */ e(t, { $renderAs: "ab1-black", children: [
+          "Teaching ",
+          p,
+          " kids in"
+        ] }),
+        /* @__PURE__ */ r(j, { height: 12 }),
+        /* @__PURE__ */ r(a, { $flexDirection: "row", $flexGap: 16, $flexWrap: !0, children: o && o.length > 0 && o.map((b) => {
+          const _ = $.find((w) => w.name === b), { flag_icon: x = "", label: y, name: A } = _ || {};
+          return /* @__PURE__ */ e(a, { $flexDirection: "row", $flexGap: 4, children: [
+            /* @__PURE__ */ r(C, { src: x, width: 30, height: 20, withLoader: !1 }),
+            /* @__PURE__ */ r(t, { $renderAs: "ab3-black", children: y })
+          ] }, A);
+        }) })
+      ] })
+    ] })
+  ] });
+}), W = O;
+export {
+  W as default
+};
+//# sourceMappingURL=teacher-profile.js.map

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teacher-profile.js","sources":["../../../../../../src/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.tsx"],"sourcesContent":["import type { ITeacherProfileDetails } from '../../../trial-session-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo } from 'react';\n\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport { COUNTRY_FLAGS } from '../teacher-intro-constants';\nimport * as Styled from './teacher-profile-styled';\n\ninterface ITeacherProfileProps {\n  teacherProfile?: ITeacherProfileDetails;\n}\n\nconst TeacherProfile: FC<ITeacherProfileProps> = memo(({ teacherProfile }) => {\n  const {\n    degree,\n    countries,\n    lower_grade: lowerGrade,\n    higher_grade: higherGrade,\n    header_image: headerImage,\n    years_of_experience: yearsOfExperience,\n    number_of_students_taught: numberOfStudentsTaught,\n  } = teacherProfile || {};\n  const { degree_name: degreeName, field_of_study: fieldOfStudy } = degree || {};\n\n  const countryFlagArray = Object.values(COUNTRY_FLAGS);\n  const isHighSchool = higherGrade && parseInt(higherGrade, 10) > 8;\n\n  const displayGrade = useMemo(() => {\n    return isHighSchool\n      ? 'High School'\n      : ` ${lowerGrade === 'K' ? '' : 'G'}${lowerGrade} - G${higherGrade}`;\n  }, [isHighSchool, higherGrade, lowerGrade]);\n\n  return (\n    <FlexView $flexDirection=\"row\" $borderColor=\"BLACK_T_87\" $background=\"WHITE_3\">\n      <Styled.ProfilePicture withLoader src={headerImage} width={350} height={350} />\n      <Styled.GridContainer>\n        <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n          <Text $renderAs=\"ah3-black\">{yearsOfExperience}+</Text>\n          <Text $renderAs=\"ub3\">Yrs of Teaching Experience</Text>\n        </Styled.GridItem>\n        <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n          <Text $renderAs=\"ah3-black\">{numberOfStudentsTaught}+</Text>\n          <Text $renderAs=\"ub3\">Students Taught</Text>\n        </Styled.GridItem>\n        {degreeName && fieldOfStudy && (\n          <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n            <Text $renderAs=\"ab1-black\">{degreeName}</Text>\n            <Text $renderAs=\"ub3\">In {fieldOfStudy}</Text>\n          </Styled.GridItem>\n        )}\n        <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n          <Text $renderAs=\"ab1-black\">Teaching {displayGrade} kids in</Text>\n          <Separator height={12} />\n          <FlexView $flexDirection=\"row\" $flexGap={16} $flexWrap>\n            {countries &&\n              countries.length > 0 &&\n              countries.map(country => {\n                const countryFlag = countryFlagArray.find(item => item.name === country);\n                const { flag_icon: flagIcon = '', label, name } = countryFlag || {};\n\n                return (\n                  <FlexView key={name} $flexDirection=\"row\" $flexGap={4}>\n                    <Image src={flagIcon} width={30} height={20} withLoader={false} />\n                    <Text $renderAs=\"ab3-black\">{label}</Text>\n                  </FlexView>\n                );\n              })}\n          </FlexView>\n        </Styled.GridItem>\n      </Styled.GridContainer>\n    </FlexView>\n  );\n});\n\nexport default TeacherProfile;\n"],"names":["TeacherProfile","memo","teacherProfile","degree","countries","lowerGrade","higherGrade","headerImage","yearsOfExperience","numberOfStudentsTaught","degreeName","fieldOfStudy","countryFlagArray","COUNTRY_FLAGS","isHighSchool","displayGrade","useMemo","FlexView","jsx","Styled.ProfilePicture","jsxs","Styled.GridContainer","Styled.GridItem","Text","Separator","country","countryFlag","item","flagIcon","label","name","Image","TeacherProfile$1"],"mappings":"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"}

package/dist/features/ui/accordion/accordion-items/accordion-items-styled.js

@@ -0,0 +1,28 @@
+import o from "styled-components";
+import r from "../../../../assets/line-icons/icons/plus.js";
+import t from "../../layout/flex-view.js";
+const a = o(t)(
+  ({ $index: e, $visible: i, $accordionBorderColor: n }) => `
+  border-bottom: 1px solid ${n};
+  ${e === 0 ? `border-top: 1px solid ${n};` : ""}
+  display: ${i ? "flex" : "none"};
+`
+), c = o(t)`
+  cursor: pointer;
+`, m = o.div`
+  max-height: 0;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+`, p = o(t)`
+  width: 100%;
+`, x = o(r)`
+  transition: all 0.3s ease-in-out;
+`;
+export {
+  m as AccordionAnswer,
+  c as AccordionItemContainer,
+  a as Container,
+  p as ContentContainer,
+  x as StyledPlusIcon
+};
+//# sourceMappingURL=accordion-items-styled.js.map

package/dist/features/ui/accordion/accordion-items/accordion-items-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-items-styled.js","sources":["../../../../../src/features/ui/accordion/accordion-items/accordion-items-styled.ts"],"sourcesContent":["import type { ContainerProps } from '../accordion-types';\n\nimport styled from 'styled-components';\n\nimport PlusIcon from '../../../../assets/line-icons/icons/plus';\nimport FlexView from '../../layout/flex-view';\n\nconst Container = styled(FlexView)<ContainerProps>(\n  ({ $index, $visible, $accordionBorderColor }) => `\n  border-bottom: 1px solid ${$accordionBorderColor};\n  ${$index === 0 ? `border-top: 1px solid ${$accordionBorderColor};` : ''}\n  display: ${$visible ? 'flex' : 'none'};\n`,\n);\n\nconst AccordionItemContainer = styled(FlexView)`\n  cursor: pointer;\n`;\n\nconst AccordionAnswer = styled.div`\n  max-height: 0;\n  overflow: hidden;\n  transition: all 0.3s ease-in-out;\n`;\n\nconst ContentContainer = styled(FlexView)`\n  width: 100%;\n`;\n\nconst StyledPlusIcon = styled(PlusIcon)`\n  transition: all 0.3s ease-in-out;\n`;\n\nexport { Container, AccordionItemContainer, AccordionAnswer, ContentContainer, StyledPlusIcon };\n"],"names":["Container","styled","FlexView","$index","$visible","$accordionBorderColor","AccordionItemContainer","AccordionAnswer","ContentContainer","StyledPlusIcon","PlusIcon"],"mappings":";;;AAOM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA,EAC/B,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,uBAAAC,EAA4B,MAAA;AAAA,6BACtBA,CAAqB;AAAA,IAC9CF,MAAW,IAAI,yBAAyBE,CAAqB,MAAM,EAAE;AAAA,aAC5DD,IAAW,SAAS,MAAM;AAAA;AAEvC,GAEME,IAAyBL,EAAOC,CAAQ;AAAA;AAAA,GAIxCK,IAAkBN,EAAO;AAAA;AAAA;AAAA;AAAA,GAMzBO,IAAmBP,EAAOC,CAAQ;AAAA;AAAA,GAIlCO,IAAiBR,EAAOS,CAAQ;AAAA;AAAA;"}

package/dist/features/ui/accordion/accordion-items/accordion-items.js

@@ -0,0 +1,83 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { memo as C, useCallback as p } from "react";
+import { useTheme as u } from "styled-components";
+import b from "../../layout/flex-view.js";
+import x from "../../separator/separator.js";
+import s from "../../text/text.js";
+import { EDeviceType as I } from "../../theme/constants.js";
+import { Container as g, ContentContainer as w, AccordionItemContainer as T, StyledPlusIcon as y, AccordionAnswer as B } from "./accordion-items-styled.js";
+const M = C((d) => {
+  const { item: o, index: r, theme: m, refList: a, iconRef: f, visible: $, handleToggle: c } = d, { device: h } = u(), l = h === I.MOBILE, n = m === "dark", A = p(() => {
+    c(r);
+  }, [c, r]);
+  return /* @__PURE__ */ e(
+    g,
+    {
+      $flexDirection: "column",
+      $justifyContent: "center",
+      $alignItems: "flex-start",
+      $index: r,
+      $visible: $,
+      onClick: A,
+      $accordionBorderColor: n ? "WHITE" : "BLACK",
+      children: /* @__PURE__ */ t(
+        w,
+        {
+          $flexDirection: "column",
+          $justifyContent: "center",
+          $alignItems: "flex-start",
+          $gap: 24,
+          children: [
+            /* @__PURE__ */ t(
+              T,
+              {
+                $width: "100%",
+                $flexDirection: "row",
+                $justifyContent: "space-between",
+                $alignItems: "center",
+                children: [
+                  /* @__PURE__ */ e(s, { $renderAs: "ab1", $renderOnMobileAs: "ab2", $color: n ? "WHITE" : "BLACK", children: o.accordionQuestion + o.accordionQuestion }),
+                  /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
+                    y,
+                    {
+                      color: n ? "WHITE" : "BLACK",
+                      width: l ? 24 : 40,
+                      height: l ? 24 : 40,
+                      ref: (i) => {
+                        f[r] = i;
+                      }
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ t(
+              B,
+              {
+                ref: (i) => {
+                  a[r] = i;
+                },
+                children: [
+                  /* @__PURE__ */ e(x, { height: 12 }),
+                  typeof o.accordionAnswer == "string" ? /* @__PURE__ */ e(
+                    s,
+                    {
+                      $renderAs: "ub2-bold",
+                      $renderOnMobileAs: "ub3-bold",
+                      $color: n ? "WHITE" : "BLACK",
+                      children: o.accordionAnswer
+                    }
+                  ) : o.accordionAnswer
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  M as default
+};
+//# sourceMappingURL=accordion-items.js.map