@cuemath/leap 3.2.28 → 3.2.29-m

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":"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"}

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/stickers/sticker-data.js

@@ -0,0 +1,234 @@
+const t = [
+  {
+    id: "star-struck",
+    emoji: "🤩",
+    name: "Star-Struck",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f929/lottie.json"
+  },
+  {
+    id: "heart-eyes",
+    emoji: "😍",
+    name: "Heart Eyes",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f60d/lottie.json"
+  },
+  {
+    id: "holding-back-tears",
+    emoji: "🥹",
+    name: "Holding Back Tears",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f979/lottie.json"
+  },
+  {
+    id: "sunglasses",
+    emoji: "😎",
+    name: "Sunglasses",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f60e/lottie.json"
+  },
+  {
+    id: "exploding-head",
+    emoji: "🤯",
+    name: "Exploding Head",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f92f/lottie.json"
+  },
+  {
+    id: "thinking",
+    emoji: "🤔",
+    name: "Thinking",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f914/lottie.json"
+  },
+  {
+    id: "party",
+    emoji: "🥳",
+    name: "Party",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f973/lottie.json"
+  },
+  {
+    id: "confetti-ball",
+    emoji: "🎊",
+    name: "Confetti Ball",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f38a/lottie.json"
+  },
+  {
+    id: "celebration",
+    emoji: "🎉",
+    name: "Celebration",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f389/lottie.json"
+  },
+  {
+    id: "balloon",
+    emoji: "🎈",
+    name: "Balloon",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f388/lottie.json"
+  },
+  {
+    id: "cake",
+    emoji: "🎂",
+    name: "Cake",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f382/lottie.json"
+  },
+  {
+    id: "clapping",
+    emoji: "👏",
+    name: "Clapping",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f44f/lottie.json"
+  },
+  {
+    id: "thumbs-up",
+    emoji: "👍",
+    name: "Thumbs Up",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f44d/lottie.json"
+  },
+  {
+    id: "peace",
+    emoji: "✌️",
+    name: "Peace",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/270c_fe0f/lottie.json"
+  },
+  {
+    id: "ok-hand",
+    emoji: "👌",
+    name: "OK Hand",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f44c/lottie.json"
+  },
+  {
+    id: "muscle",
+    emoji: "💪",
+    name: "Muscle",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f4aa/lottie.json"
+  },
+  {
+    id: "rock-on",
+    emoji: "🤟",
+    name: "Rock On",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f91f/lottie.json"
+  },
+  {
+    id: "heart",
+    emoji: "❤️",
+    name: "Heart",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/2764_fe0f/lottie.json"
+  },
+  {
+    id: "trophy",
+    emoji: "🏆",
+    name: "Trophy",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f3c6/lottie.json"
+  },
+  {
+    id: "hundred",
+    emoji: "💯",
+    name: "Hundred",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f4af/lottie.json"
+  },
+  {
+    id: "gold-medal",
+    emoji: "🥇",
+    name: "Gold Medal",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f947/lottie.json"
+  },
+  {
+    id: "silver-medal",
+    emoji: "🥈",
+    name: "Silver Medal",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f948/lottie.json"
+  },
+  {
+    id: "bronze-medal",
+    emoji: "🥉",
+    name: "Bronze Medal",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f949/lottie.json"
+  },
+  {
+    id: "target",
+    emoji: "🎯",
+    name: "Target",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f3af/lottie.json"
+  },
+  {
+    id: "glowing-star",
+    emoji: "🌟",
+    name: "Glowing Star",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f31f/lottie.json"
+  },
+  {
+    id: "lightning",
+    emoji: "⚡️",
+    name: "Lightning",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/26a1/lottie.json"
+  },
+  {
+    id: "rocket",
+    emoji: "🚀",
+    name: "Rocket",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/lottie.json"
+  },
+  {
+    id: "explosion",
+    emoji: "💥",
+    name: "Explosion",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f4a5/lottie.json"
+  },
+  {
+    id: "graduation",
+    emoji: "🎓",
+    name: "Graduation",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f393/lottie.json"
+  },
+  {
+    id: "clock",
+    emoji: "⏰",
+    name: "Clock",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/23f0/lottie.json"
+  },
+  {
+    id: "bulb",
+    emoji: "💡",
+    name: "Bulb",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f4a1/lottie.json"
+  },
+  {
+    id: "rainbow",
+    emoji: "🌈",
+    name: "Rainbow",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f308/lottie.json"
+  },
+  {
+    id: "clown",
+    emoji: "🤡",
+    name: "Clown",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f921/lottie.json"
+  },
+  {
+    id: "dancer",
+    emoji: "💃",
+    name: "Dancer",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f483/lottie.json"
+  },
+  {
+    id: "flowers",
+    emoji: "💐",
+    name: "Flowers",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f490/lottie.json"
+  },
+  {
+    id: "unicorn",
+    emoji: "🦄",
+    name: "Unicorn",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f984/lottie.json"
+  },
+  {
+    id: "drum",
+    emoji: "🥁",
+    name: "Drum",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f941/lottie.json"
+  },
+  {
+    id: "diamond",
+    emoji: "💎",
+    name: "Diamond",
+    lottieUrl: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f48e/lottie.json"
+  }
+];
+export {
+  t as stickerData
+};
+//# sourceMappingURL=sticker-data.js.map

package/dist/features/stickers/sticker-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticker-data.js","sources":["../../../src/features/stickers/sticker-data.ts"],"sourcesContent":["import type { IStickerData } from './sticker-selector/sticker-selector-types';\n\nexport const stickerData: IStickerData[] = [\n  {\n    id: 'star-struck',\n    emoji: '🤩',\n    name: 'Star-Struck',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f929/lottie.json',\n  },\n  {\n    id: 'heart-eyes',\n    emoji: '😍',\n    name: 'Heart Eyes',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f60d/lottie.json',\n  },\n  {\n    id: 'holding-back-tears',\n    emoji: '🥹',\n    name: 'Holding Back Tears',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f979/lottie.json',\n  },\n  {\n    id: 'sunglasses',\n    emoji: '😎',\n    name: 'Sunglasses',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f60e/lottie.json',\n  },\n  {\n    id: 'exploding-head',\n    emoji: '🤯',\n    name: 'Exploding Head',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f92f/lottie.json',\n  },\n  {\n    id: 'thinking',\n    emoji: '🤔',\n    name: 'Thinking',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f914/lottie.json',\n  },\n  {\n    id: 'party',\n    emoji: '🥳',\n    name: 'Party',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f973/lottie.json',\n  },\n  {\n    id: 'confetti-ball',\n    emoji: '🎊',\n    name: 'Confetti Ball',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f38a/lottie.json',\n  },\n  {\n    id: 'celebration',\n    emoji: '🎉',\n    name: 'Celebration',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f389/lottie.json',\n  },\n  {\n    id: 'balloon',\n    emoji: '🎈',\n    name: 'Balloon',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f388/lottie.json',\n  },\n  {\n    id: 'cake',\n    emoji: '🎂',\n    name: 'Cake',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f382/lottie.json',\n  },\n  {\n    id: 'clapping',\n    emoji: '👏',\n    name: 'Clapping',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f44f/lottie.json',\n  },\n  {\n    id: 'thumbs-up',\n    emoji: '👍',\n    name: 'Thumbs Up',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f44d/lottie.json',\n  },\n  {\n    id: 'peace',\n    emoji: '✌️',\n    name: 'Peace',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/270c_fe0f/lottie.json',\n  },\n  {\n    id: 'ok-hand',\n    emoji: '👌',\n    name: 'OK Hand',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f44c/lottie.json',\n  },\n  {\n    id: 'muscle',\n    emoji: '💪',\n    name: 'Muscle',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f4aa/lottie.json',\n  },\n  {\n    id: 'rock-on',\n    emoji: '🤟',\n    name: 'Rock On',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f91f/lottie.json',\n  },\n  {\n    id: 'heart',\n    emoji: '❤️',\n    name: 'Heart',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/2764_fe0f/lottie.json',\n  },\n  {\n    id: 'trophy',\n    emoji: '🏆',\n    name: 'Trophy',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f3c6/lottie.json',\n  },\n  {\n    id: 'hundred',\n    emoji: '💯',\n    name: 'Hundred',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f4af/lottie.json',\n  },\n  {\n    id: 'gold-medal',\n    emoji: '🥇',\n    name: 'Gold Medal',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f947/lottie.json',\n  },\n  {\n    id: 'silver-medal',\n    emoji: '🥈',\n    name: 'Silver Medal',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f948/lottie.json',\n  },\n  {\n    id: 'bronze-medal',\n    emoji: '🥉',\n    name: 'Bronze Medal',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f949/lottie.json',\n  },\n  {\n    id: 'target',\n    emoji: '🎯',\n    name: 'Target',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f3af/lottie.json',\n  },\n  {\n    id: 'glowing-star',\n    emoji: '🌟',\n    name: 'Glowing Star',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f31f/lottie.json',\n  },\n  {\n    id: 'lightning',\n    emoji: '⚡️',\n    name: 'Lightning',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/26a1/lottie.json',\n  },\n  {\n    id: 'rocket',\n    emoji: '🚀',\n    name: 'Rocket',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/lottie.json',\n  },\n  {\n    id: 'explosion',\n    emoji: '💥',\n    name: 'Explosion',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f4a5/lottie.json',\n  },\n  {\n    id: 'graduation',\n    emoji: '🎓',\n    name: 'Graduation',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f393/lottie.json',\n  },\n  {\n    id: 'clock',\n    emoji: '⏰',\n    name: 'Clock',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/23f0/lottie.json',\n  },\n  {\n    id: 'bulb',\n    emoji: '💡',\n    name: 'Bulb',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f4a1/lottie.json',\n  },\n  {\n    id: 'rainbow',\n    emoji: '🌈',\n    name: 'Rainbow',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f308/lottie.json',\n  },\n  {\n    id: 'clown',\n    emoji: '🤡',\n    name: 'Clown',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f921/lottie.json',\n  },\n  {\n    id: 'dancer',\n    emoji: '💃',\n    name: 'Dancer',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f483/lottie.json',\n  },\n  {\n    id: 'flowers',\n    emoji: '💐',\n    name: 'Flowers',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f490/lottie.json',\n  },\n  {\n    id: 'unicorn',\n    emoji: '🦄',\n    name: 'Unicorn',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f984/lottie.json',\n  },\n  {\n    id: 'drum',\n    emoji: '🥁',\n    name: 'Drum',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f941/lottie.json',\n  },\n  {\n    id: 'diamond',\n    emoji: '💎',\n    name: 'Diamond',\n    lottieUrl: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f48e/lottie.json',\n  },\n];\n"],"names":["stickerData"],"mappings":"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"}

package/dist/features/{ui/sticker-grid/sticker-grid-styles.js → stickers/sticker-selector/sticker-selector-styles.js}

@@ -1,5 +1,5 @@
-import r from "styled-components";
-const e = r.div`
+import e from "styled-components";
+const o = e.div`
   position: relative;
   width: ${({ $size: t }) => typeof t == "number" ? `${t}px` : t};
   height: ${({ $size: t }) => typeof t == "number" ? `${t}px` : t};
@@ -12,6 +12,7 @@ const e = r.div`
   transition: all 0.2s ease;
   background-color: transparent;
   opacity: ${({ $disabled: t }) => t ? 0.5 : 1};
+  pointer-events: ${({ $disabled: t }) => t ? "none" : "auto"};
 
   &:hover {
     transform: ${({ $disabled: t }) => t ? "none" : "scale(1.1)"};
@@ -21,30 +22,31 @@ const e = r.div`
   &:active {
     transform: ${({ $disabled: t }) => t ? "none" : "scale(0.95)"};
   }
-`, n = r.div`
+`, r = e.div`
   font-size: ${({ $size: t }) => typeof t == "number" ? `${t * 0.7}px` : "70%"};
   line-height: 1;
-  display: flex;
+  display: ${({ $visible: t }) => t ? "flex" : "none"};
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   transition: opacity 0.2s ease;
-`, a = r.div`
+`, i = e.div`
   position: absolute;
   top: 50%;
   left: 50%;
   width: ${({ $size: t }) => typeof t == "number" ? `${t * 0.7}px` : t};
   height: ${({ $size: t }) => typeof t == "number" ? `${t * 0.7}px` : t};
-  opacity: 0;
-  transition: opacity 0.2s ease;
   transform: translate(-50%, -50%);
   pointer-events: none;
+  display: 'flex';
+  opacity: ${({ $visible: t }) => t ? 1 : 0};
+  transition: opacity 0.2s ease;
 
-  ${e}:hover & {
+  ${o}:hover & {
     opacity: 1;
   }
-`, i = r.div`
+`, a = e.div`
   display: grid;
   grid-template-columns: repeat(${({ $columns: t }) => t}, 1fr);
   gap: ${({ $gap: t }) => t}px;
@@ -53,34 +55,24 @@ const e = r.div`
   border-radius: 12px;
   max-height: 400px;
   overflow-y: auto;
+  scrollbar-gutter: stable;
 
+  scrollbar-width: none;
+  -ms-overflow-style: none;
   &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
+    display: none;
   }
-`, c = r.div`
+`, p = e.div`
   width: 100%;
   max-width: ${({ $width: t }) => t};
   max-height: ${({ $height: t }) => t};
+  cursor: ${({ $disabled: t }) => t ? "default" : "pointer"};
 `;
 export {
-  a as LottieContainer,
-  n as StaticEmoji,
-  e as StickerContainer,
-  i as StickerGrid,
-  c as StickerGridContainer
+  i as LottieContainer,
+  r as StaticEmoji,
+  o as StickerContainer,
+  a as StickerGrid,
+  p as StickerGridContainer
 };
-//# sourceMappingURL=sticker-grid-styles.js.map
+//# sourceMappingURL=sticker-selector-styles.js.map

package/dist/features/stickers/sticker-selector/sticker-selector-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticker-selector-styles.js","sources":["../../../../src/features/stickers/sticker-selector/sticker-selector-styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StickerContainer = styled.div<{\n  $size: number | string;\n  $disabled?: boolean;\n}>`\n  position: relative;\n  width: ${({ $size }) => (typeof $size === 'number' ? `${$size}px` : $size)};\n  height: ${({ $size }) => (typeof $size === 'number' ? `${$size}px` : $size)};\n  cursor: ${({ $disabled }) => ($disabled ? 'none' : 'pointer')};\n  border-radius: 8px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  background-color: transparent;\n  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};\n  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};\n\n  &:hover {\n    transform: ${({ $disabled }) => ($disabled ? 'none' : 'scale(1.1)')};\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  &:active {\n    transform: ${({ $disabled }) => ($disabled ? 'none' : 'scale(0.95)')};\n  }\n`;\n\nexport const StaticEmoji = styled.div<{ $size: number | string; $visible: boolean }>`\n  font-size: ${({ $size }) => {\n    if (typeof $size === 'number') {\n      return `${$size * 0.7}px`;\n    }\n\n    return '70%';\n  }};\n  line-height: 1;\n  display: ${({ $visible }) => ($visible ? 'flex' : 'none')};\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  transition: opacity 0.2s ease;\n`;\n\nexport const LottieContainer = styled.div<{\n  $size: number | string;\n  $visible?: boolean;\n}>`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: ${({ $size }) => (typeof $size === 'number' ? `${$size * 0.7}px` : $size)};\n  height: ${({ $size }) => (typeof $size === 'number' ? `${$size * 0.7}px` : $size)};\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  display: 'flex';\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  transition: opacity 0.2s ease;\n\n  ${StickerContainer}:hover & {\n    opacity: 1;\n  }\n`;\n\nexport const StickerGrid = styled.div<{\n  $columns: number;\n  $gap: number;\n}>`\n  display: grid;\n  grid-template-columns: repeat(${({ $columns }) => $columns}, 1fr);\n  gap: ${({ $gap }) => $gap}px;\n  padding: 16px;\n  background-color: #2a2a2a;\n  border-radius: 12px;\n  max-height: 400px;\n  overflow-y: auto;\n  scrollbar-gutter: stable;\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nexport const StickerGridContainer = styled.div<{\n  $width: string;\n  $height: string;\n  $disabled?: boolean;\n}>`\n  width: 100%;\n  max-width: ${({ $width }) => $width};\n  max-height: ${({ $height }) => $height};\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};\n`;\n"],"names":["StickerContainer","styled","$size","$disabled","StaticEmoji","$visible","LottieContainer","StickerGrid","$columns","$gap","StickerGridContainer","$width","$height"],"mappings":";AAEO,MAAMA,IAAmBC,EAAO;AAAA;AAAA,WAK5B,CAAC,EAAE,OAAAC,EAAa,MAAA,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,CAAM;AAAA,YAChE,CAAC,EAAE,OAAAA,EAAa,MAAA,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,CAAM;AAAA,YACjE,CAAC,EAAE,WAAAC,EAAA,MAAiBA,IAAY,SAAS,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQlD,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,MAAM,CAAE;AAAA,oBACjC,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,SAAS,MAAO;AAAA;AAAA;AAAA,iBAGnD,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,SAAS,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKtD,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,SAAS,aAAc;AAAA;AAAA,GAI3DC,IAAcH,EAAO;AAAA,eACnB,CAAC,EAAE,OAAAC,QACV,OAAOA,KAAU,WACZ,GAAGA,IAAQ,GAAG,OAGhB,KACR;AAAA;AAAA,aAEU,CAAC,EAAE,UAAAG,EAAA,MAAgBA,IAAW,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ9CC,IAAkBL,EAAO;AAAA;AAAA;AAAA;AAAA,WAO3B,CAAC,EAAE,OAAAC,QAAa,OAAOA,KAAU,WAAW,GAAGA,IAAQ,GAAG,OAAOA,CAAM;AAAA,YACtE,CAAC,EAAE,OAAAA,QAAa,OAAOA,KAAU,WAAW,GAAGA,IAAQ,GAAG,OAAOA,CAAM;AAAA;AAAA;AAAA;AAAA,aAItE,CAAC,EAAE,UAAAG,EAAA,MAAgBA,IAAW,IAAI,CAAE;AAAA;AAAA;AAAA,IAG7CL,CAAgB;AAAA;AAAA;AAAA,GAKPO,IAAcN,EAAO;AAAA;AAAA,kCAKA,CAAC,EAAE,UAAAO,EAAS,MAAMA,CAAQ;AAAA,SACnD,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAedC,IAAuBT,EAAO;AAAA;AAAA,eAM5B,CAAC,EAAE,QAAAU,EAAO,MAAMA,CAAM;AAAA,gBACrB,CAAC,EAAE,SAAAC,EAAQ,MAAMA,CAAO;AAAA,YAC5B,CAAC,EAAE,WAAAT,EAAA,MAAiBA,IAAY,YAAY,SAAU;AAAA;"}

package/dist/features/stickers/sticker-selector/sticker-selector.js

@@ -0,0 +1,39 @@
+import { jsx as i } from "react/jsx-runtime";
+import { memo as u, useState as c, useCallback as f } from "react";
+import { stickerData as b } from "../sticker-data.js";
+import h from "./sticker.js";
+import { StickerGridContainer as $, StickerGrid as x } from "./sticker-selector-styles.js";
+const D = ({
+  stickers: s = b,
+  columns: a = 4,
+  gap: m = 8,
+  stickerSize: l = 72,
+  onStickerClick: t
+}) => {
+  const [d, o] = c(!1), r = d, p = f(
+    (e) => {
+      if (r) return;
+      t == null || t(e), o(!0);
+      const n = setTimeout(() => {
+        o(!1);
+      }, 5e3);
+      return () => clearTimeout(n);
+    },
+    [t, r]
+  );
+  return /* @__PURE__ */ i($, { $width: "350px", $height: "400px", $disabled: r, children: /* @__PURE__ */ i(x, { $columns: a, $gap: m, children: s.map((e) => /* @__PURE__ */ i(
+    h,
+    {
+      emoji: e.emoji,
+      lottieUrl: e.lottieUrl,
+      size: l,
+      onClick: () => p(e),
+      disabled: r
+    },
+    e.id
+  )) }) });
+}, G = u(D);
+export {
+  G as default
+};
+//# sourceMappingURL=sticker-selector.js.map

package/dist/features/stickers/sticker-selector/sticker-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticker-selector.js","sources":["../../../../src/features/stickers/sticker-selector/sticker-selector.tsx"],"sourcesContent":["import type { IStickerSelectorProps } from './sticker-selector-types';\n\nimport React, { memo, useCallback, useState } from 'react';\n\nimport { stickerData } from '../sticker-data';\nimport Sticker from './sticker';\nimport * as S from './sticker-selector-styles';\n\nconst StickerSelector: React.FC<IStickerSelectorProps> = ({\n  stickers = stickerData,\n  columns = 4,\n  gap = 8,\n  stickerSize = 72,\n  onStickerClick,\n}) => {\n  const [isTemporarilyDisabled, setIsTemporarilyDisabled] = useState(false);\n\n  const gridDisabled = isTemporarilyDisabled;\n\n  const handleStickerClick = useCallback(\n    (sticker: (typeof stickers)[0]) => {\n      if (gridDisabled) return;\n\n      onStickerClick?.(sticker);\n      setIsTemporarilyDisabled(true);\n\n      const timeout = setTimeout(() => {\n        setIsTemporarilyDisabled(false);\n      }, 5000);\n\n      return () => clearTimeout(timeout);\n    },\n    [onStickerClick, gridDisabled],\n  );\n\n  return (\n    <S.StickerGridContainer $width=\"350px\" $height=\"400px\" $disabled={gridDisabled}>\n      <S.StickerGrid $columns={columns} $gap={gap}>\n        {stickers.map(sticker => (\n          <Sticker\n            key={sticker.id}\n            emoji={sticker.emoji}\n            lottieUrl={sticker.lottieUrl}\n            size={stickerSize}\n            onClick={() => handleStickerClick(sticker)}\n            disabled={gridDisabled}\n          />\n        ))}\n      </S.StickerGrid>\n    </S.StickerGridContainer>\n  );\n};\n\nexport default memo(StickerSelector);\n"],"names":["StickerSelector","stickers","stickerData","columns","gap","stickerSize","onStickerClick","isTemporarilyDisabled","setIsTemporarilyDisabled","useState","gridDisabled","handleStickerClick","useCallback","sticker","timeout","jsx","S.StickerGridContainer","S.StickerGrid","Sticker","stickerSelector","memo"],"mappings":";;;;;AAQA,MAAMA,IAAmD,CAAC;AAAA,EACxD,UAAAC,IAAWC;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,KAAAC,IAAM;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,gBAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAuBC,CAAwB,IAAIC,EAAS,EAAK,GAElEC,IAAeH,GAEfI,IAAqBC;AAAA,IACzB,CAACC,MAAkC;AACjC,UAAIH,EAAc;AAElB,MAAAJ,KAAA,QAAAA,EAAiBO,IACjBL,EAAyB,EAAI;AAEvB,YAAAM,IAAU,WAAW,MAAM;AAC/B,QAAAN,EAAyB,EAAK;AAAA,SAC7B,GAAI;AAEA,aAAA,MAAM,aAAaM,CAAO;AAAA,IACnC;AAAA,IACA,CAACR,GAAgBI,CAAY;AAAA,EAAA;AAI7B,SAAA,gBAAAK,EAACC,GAAA,EAAuB,QAAO,SAAQ,SAAQ,SAAQ,WAAWN,GAChE,4BAACO,GAAA,EAAc,UAAUd,GAAS,MAAMC,GACrC,UAAAH,EAAS,IAAI,CACZY,MAAA,gBAAAE;AAAA,IAACG;AAAA,IAAA;AAAA,MAEC,OAAOL,EAAQ;AAAA,MACf,WAAWA,EAAQ;AAAA,MACnB,MAAMR;AAAA,MACN,SAAS,MAAMM,EAAmBE,CAAO;AAAA,MACzC,UAAUH;AAAA,IAAA;AAAA,IALLG,EAAQ;AAAA,EAAA,CAOhB,GACH,EACF,CAAA;AAEJ,GAEeM,IAAAC,EAAKpB,CAAe;"}

package/dist/features/stickers/sticker-selector/sticker.js

@@ -0,0 +1,56 @@
+import { jsxs as v, jsx as s } from "react/jsx-runtime";
+import { memo as S, useState as $, useRef as d, useCallback as n } from "react";
+import g from "../../ui/lottie-animation/lottie-animation.js";
+import { StickerContainer as k, StaticEmoji as L, LottieContainer as R } from "./sticker-selector-styles.js";
+const j = {
+  loop: !0,
+  autoplay: !1,
+  renderer: "canvas"
+}, x = ({
+  emoji: l,
+  lottieUrl: f,
+  size: o = 48,
+  onClick: i,
+  disabled: t = !1
+}) => {
+  const [c, a] = $(!1), r = d(null), u = n(() => {
+    var e;
+    (e = r.current) == null || e.play();
+  }, []), m = n(() => {
+    var e;
+    t || (e = r.current) == null || e.play(), a(!0);
+  }, [t]), h = n(() => {
+    var e;
+    t || (e = r.current) == null || e.goToAndStop(50, !0), a(!1);
+  }, [t]), p = n(() => {
+    !t && i && i();
+  }, [t, i]);
+  return /* @__PURE__ */ v(
+    k,
+    {
+      $size: o,
+      $disabled: t,
+      onPointerEnter: m,
+      onPointerLeave: h,
+      onClick: p,
+      children: [
+        /* @__PURE__ */ s(L, { $size: o, $visible: !c, children: l }),
+        /* @__PURE__ */ s(R, { $size: o, $visible: c, children: /* @__PURE__ */ s(
+          g,
+          {
+            ref: r,
+            src: f || "",
+            width: "100%",
+            height: "100%",
+            settings: j,
+            onRender: u
+          }
+        ) })
+      ]
+    }
+  );
+}, H = S(x);
+export {
+  H as default
+};
+//# sourceMappingURL=sticker.js.map