@cuemath/leap 3.2.9-pzd-0.3 → 3.2.10-hg1

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

@@ -1,108 +1,127 @@
-import { jsx as n, jsxs as V } from "react/jsx-runtime";
-import { memo as N, useState as T, useRef as Z, useMemo as u, useEffect as j, useCallback as m } from "react";
-import k from "../../ui/layout/flex-view.js";
-import O from "../../ui/lottie-animation/lottie-animation.js";
-import { usePostPuzzleToAssign as U } from "../api/puzzle-assign.js";
-import { PUZZLE_ASSIGN_ANIMATION as c } from "../constants/puzzle-container.js";
-import { getPuzzleCardLottie as v } from "../utils/puzzle-pattern.js";
-import { PuzzleContainer as C, PuzzleAssignedWrapper as y, PuzzleContentWrapper as D } from "./puzzle-container-styled.js";
-import L from "./puzzle-container-view.js";
-const G = {
-  loop: !1,
-  renderer: "svg",
-  autoPlay: !1
-}, M = N(
+import { jsx as i, jsxs as l, Fragment as w } from "react/jsx-runtime";
+import { memo as X, useState as z, useRef as j, useEffect as C, useCallback as c } from "react";
+import L from "../../../assets/line-icons/icons/check2.js";
+import O from "../../ui/image/image.js";
+import r from "../../ui/text/text.js";
+import { usePostPuzzleToAssign as B } from "../api/puzzle-assign.js";
+import D from "../comps/puzzle-card.js";
+import { PuzzleContainer as W, PuzzleContent as G, AssignedTag as K, PuzzleButton as S, PuzzleText as U, CheckMarkIcon as H } from "./puzzle-container-styled.js";
+const N = 1500, M = X(
   ({
-    triggerReveal: l = !1,
-    onFullyHidden: r,
-    onPuzzleClick: f,
-    puzzleData: _,
-    courseStream: z,
-    studentId: p
+    userType: A,
+    triggerReveal: o = !1,
+    onFullyHidden: s,
+    onPuzzleClick: d,
+    puzzleData: p,
+    courseStream: g,
+    studentId: u
   }) => {
     const {
-      image_hue: i,
-      image_url: g,
-      assigned: s,
-      title: d,
-      id: P,
-      node_id: A
-    } = _, [E, a] = T(s), o = Z(null), S = u(() => v(i), [i]), $ = u(
-      () => ({
-        node_id: A,
-        node_type: "PUZZLE_CARD"
-      }),
-      [A]
-    ), { post: h, isProcessing: I } = U({
-      onComplete: (e) => {
-        var t;
-        e ? a(!0) : ((t = o.current) == null || t.playSegments(c.REVEAL_ASSIGNED, !1), a(!1));
+      image_hue: m,
+      image_url: b,
+      assigned: e,
+      title: I,
+      id: h
+    } = p, [n, t] = z("hidden"), [f, P] = z(!1), a = j(null), { post: $, isProcessing: k } = B({
+      onComplete: (x) => {
+        x ? t("visible") : n === "visible" && t("assigning");
       }
     });
-    j(() => {
-      var e, t;
-      s || (l ? (e = o.current) == null || e.playSegments(c.REVEAL, !0) : ((t = o.current) == null || t.stop(), a(!1)));
-    }, [s, l]);
-    const w = m(() => {
-      s || h(
+    C(() => {
+      e || (o ? f ? t("assigned") : n === "hidden" && t("movingIn") : n !== "hidden" && n !== "movingOut" && t("movingOut"));
+    }, [o, f, e]), C(() => (n === "assigned" && !e && (a.current = setTimeout(() => {
+      t("movingOut");
+    }, N)), () => {
+      a.current && clearTimeout(a.current);
+    }), [n, e]);
+    const T = c(() => {
+      switch (n) {
+        case "movingIn":
+          t("revealing");
+          break;
+        case "revealing":
+          t("visible");
+          break;
+        case "assigning":
+          t("assigned"), P(!0);
+          break;
+        case "movingOut":
+          t("hidden"), s == null || s();
+          break;
+      }
+    }, [n, s]), v = c(() => {
+      e || $(
         {
-          puzzle_id: P
+          puzzle_id: h
         },
         {
-          studentId: p,
-          courseStream: z
+          studentId: u,
+          courseStream: g
         }
       );
-    }, [z, s, h, P, p]), R = m(() => {
-      f();
-    }, [f]), b = m(() => {
-      var e;
-      (e = o.current) == null || e.playSegments(c.REVEAL, !0);
-    }, []), x = u(
-      () => ({
-        name: "enterFrame",
-        callback: (e) => {
-          const { currentTime: t } = e;
-          t === 49 && a(!0), t === 101 && (r == null || r());
-        }
-      }),
-      [r]
-    );
-    return l ? s ? /* @__PURE__ */ n(C, { $justifyContent: "center", children: /* @__PURE__ */ n(
-      y,
-      {
-        $imageHue: i,
-        $background: `${i}_2`,
-        $widthX: 15.9375,
-        children: /* @__PURE__ */ n(L, { imageUrl: g, title: d, assigned: !0 })
-      }
-    ) }) : /* @__PURE__ */ n(C, { children: /* @__PURE__ */ V(k, { $heightX: 26, children: [
-      /* @__PURE__ */ n(
-        O,
+    }, [g, e, $, h, u]), _ = c(() => {
+      d();
+    }, [d]), E = () => n === "visible" || e ? /* @__PURE__ */ l(w, { children: [
+      /* @__PURE__ */ l(
+        G,
         {
-          src: S,
-          ref: o,
-          settings: G,
-          onRender: b,
-          eventListener: x,
-          animateOnIntersect: !0
+          $justifyContent: "center",
+          $alignItems: "center",
+          $width: "100%",
+          $height: "100%",
+          onClick: _,
+          title: "Click to preview",
+          $flexGapX: 1.5,
+          children: [
+            /* @__PURE__ */ i(O, { width: 136, height: 136, src: b, withLoader: !1, alt: "Puzzle" }),
+            /* @__PURE__ */ i(r, { $renderAs: "h4", children: I }),
+            e && /* @__PURE__ */ i(K, { $gap: 4, $gutter: 8, $background: "BLACK_1", children: /* @__PURE__ */ i(r, { $renderAs: "ac4", $color: "WHITE_1", children: "Assigned" }) })
+          ]
         }
       ),
-      /* @__PURE__ */ n(D, { $visible: E, $position: "absolute", children: /* @__PURE__ */ n(
-        L,
+      A === "TEACHER" && /* @__PURE__ */ i(
+        S,
         {
-          imageUrl: g,
-          title: d,
-          handleOnPuzzleClick: R,
-          handleAssign: w,
-          assigning: I,
-          analyticsProps: $
+          $background: "BLACK_1",
+          $widthX: 15.75,
+          $alignItems: "center",
+          $justifyContent: "center",
+          $gapX: 0.75,
+          $gutterX: 1,
+          onClick: v,
+          $disabled: e || k,
+          children: /* @__PURE__ */ i(r, { $renderAs: "ub1-bold", $color: e ? "BLACK_T_38" : "WHITE_1", children: e ? "Discuss in next class" : "Assign" })
         }
-      ) })
-    ] }) }) : null;
+      )
+    ] }) : n === "assigned" ? /* @__PURE__ */ l(U, { $alignItems: "center", $justifyContent: "center", $flexGap: 8, children: [
+      /* @__PURE__ */ i(
+        H,
+        {
+          $widthX: 2.5,
+          $heightX: 2.5,
+          $background: "WHITE",
+          $alignItems: "center",
+          $justifyContent: "center",
+          children: /* @__PURE__ */ i(L, {})
+        }
+      ),
+      /* @__PURE__ */ i(r, { $renderAs: "ab1-bold", $align: "center", $color: "WHITE", children: "Puzzle assigned" })
+    ] }) : null;
+    return n === "hidden" && !o ? null : /* @__PURE__ */ i(W, { children: /* @__PURE__ */ i(
+      D,
+      {
+        animationPhase: e ? void 0 : n,
+        onAnimationEnd: T,
+        imageHue: m ?? "BLUE",
+        heightX: 19,
+        widthX: 15.75,
+        backgroundColor: e ? `${m}_2` : void 0,
+        children: E()
+      }
+    ) });
   }
-), H = M;
+), F = M;
 export {
-  H as default
+  F as default
 };
 //# sourceMappingURL=puzzle-container.js.map

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    } = 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      }),\n      [nodeId],\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 imageUrl={imageUrl} title={title} assigned />\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","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/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/ui/sticker-grid/sticker-grid-styles.js

@@ -0,0 +1,86 @@
+import r from "styled-components";
+const e = r.div`
+  position: relative;
+  width: ${({ $size: t }) => typeof t == "number" ? `${t}px` : t};
+  height: ${({ $size: t }) => typeof t == "number" ? `${t}px` : t};
+  cursor: ${({ $disabled: t }) => t ? "none" : "pointer"};
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  background-color: transparent;
+  opacity: ${({ $disabled: t }) => t ? 0.5 : 1};
+
+  &:hover {
+    transform: ${({ $disabled: t }) => t ? "none" : "scale(1.1)"};
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &:active {
+    transform: ${({ $disabled: t }) => t ? "none" : "scale(0.95)"};
+  }
+`, n = r.div`
+  font-size: ${({ $size: t }) => typeof t == "number" ? `${t * 0.7}px` : "70%"};
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.2s ease;
+`, a = r.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;
+
+  ${e}:hover & {
+    opacity: 1;
+  }
+`, i = r.div`
+  display: grid;
+  grid-template-columns: repeat(${({ $columns: t }) => t}, 1fr);
+  gap: ${({ $gap: t }) => t}px;
+  padding: 16px;
+  background-color: #2a2a2a;
+  border-radius: 12px;
+  max-height: 400px;
+  overflow-y: auto;
+
+  &::-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);
+  }
+`, c = r.div`
+  width: 100%;
+  max-width: ${({ $width: t }) => t};
+  max-height: ${({ $height: t }) => t};
+`;
+export {
+  a as LottieContainer,
+  n as StaticEmoji,
+  e as StickerContainer,
+  i as StickerGrid,
+  c as StickerGridContainer
+};
+//# sourceMappingURL=sticker-grid-styles.js.map

package/dist/features/ui/sticker-grid/sticker-grid-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticker-grid-styles.js","sources":["../../../../src/features/ui/sticker-grid/sticker-grid-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\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 }>`\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: flex;\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<{ $size: number | string }>`\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  opacity: 0;\n  transition: opacity 0.2s ease;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\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\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: rgba(255, 255, 255, 0.3);\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: rgba(255, 255, 255, 0.5);\n  }\n`;\n\nexport const StickerGridContainer = styled.div<{\n  $width: string;\n  $height: string;\n}>`\n  width: 100%;\n  max-width: ${({ $width }) => $width};\n  max-height: ${({ $height }) => $height};\n`;\n"],"names":["StickerContainer","styled","$size","$disabled","StaticEmoji","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;AAAA;AAAA,iBAGpC,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUUG,IAAkBJ,EAAO;AAAA;AAAA;AAAA;AAAA,WAI3B,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;AAAA;AAAA,IAM/EF,CAAgB;AAAA;AAAA;AAAA,GAKPM,IAAcL,EAAO;AAAA;AAAA,kCAKA,CAAC,EAAE,UAAAM,EAAS,MAAMA,CAAQ;AAAA,SACnD,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0BdC,IAAuBR,EAAO;AAAA;AAAA,eAK5B,CAAC,EAAE,QAAAS,EAAO,MAAMA,CAAM;AAAA,gBACrB,CAAC,EAAE,SAAAC,EAAQ,MAAMA,CAAO;AAAA;"}

package/dist/features/ui/sticker-grid/sticker-grid.js

@@ -0,0 +1,24 @@
+import { jsx as m } from "react/jsx-runtime";
+import { memo as d } from "react";
+import n from "./sticker.js";
+import { StickerGridContainer as a, StickerGrid as f } from "./sticker-grid-styles.js";
+const h = ({
+  stickers: t,
+  columns: i = 4,
+  gap: e = 8,
+  stickerSize: p = 48,
+  onStickerClick: o
+}) => /* @__PURE__ */ m(a, { $width: "350px", $height: "400px", children: /* @__PURE__ */ m(f, { $columns: i, $gap: e, children: t.map((r) => /* @__PURE__ */ m(
+  n,
+  {
+    emoji: r.emoji,
+    lottieUrl: r.lottieUrl,
+    size: p,
+    onClick: () => o == null ? void 0 : o(r)
+  },
+  r.id
+)) }) }), $ = d(h);
+export {
+  $ as default
+};
+//# sourceMappingURL=sticker-grid.js.map

package/dist/features/ui/sticker-grid/sticker-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticker-grid.js","sources":["../../../../src/features/ui/sticker-grid/sticker-grid.tsx"],"sourcesContent":["import type { IStickerGridProps } from './sticker-grid-types';\n\nimport React, { memo } from 'react';\n\nimport Sticker from './sticker';\nimport { StickerGrid, StickerGridContainer } from './sticker-grid-styles';\n\nconst StickerGridComponent: React.FC<IStickerGridProps> = ({\n  stickers,\n  columns = 4,\n  gap = 8,\n  stickerSize = 48,\n  onStickerClick,\n}) => {\n  return (\n    <StickerGridContainer $width=\"350px\" $height=\"400px\">\n      <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={() => onStickerClick?.(sticker)}\n          />\n        ))}\n      </StickerGrid>\n    </StickerGridContainer>\n  );\n};\n\nexport default memo(StickerGridComponent);\n"],"names":["StickerGridComponent","stickers","columns","gap","stickerSize","onStickerClick","jsx","StickerGridContainer","StickerGrid","sticker","Sticker","stickerGrid","memo"],"mappings":";;;;AAOA,MAAMA,IAAoD,CAAC;AAAA,EACzD,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,KAAAC,IAAM;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,gBAAAC;AACF,MAEK,gBAAAC,EAAAC,GAAA,EAAqB,QAAO,SAAQ,SAAQ,SAC3C,UAAA,gBAAAD,EAACE,GAAY,EAAA,UAAUN,GAAS,MAAMC,GACnC,UAAAF,EAAS,IAAI,CACZQ,MAAA,gBAAAH;AAAA,EAACI;AAAA,EAAA;AAAA,IAEC,OAAOD,EAAQ;AAAA,IACf,WAAWA,EAAQ;AAAA,IACnB,MAAML;AAAA,IACN,SAAS,MAAMC,KAAA,gBAAAA,EAAiBI;AAAA,EAAO;AAAA,EAJlCA,EAAQ;AAAA,CAMhB,GACH,EACF,CAAA,GAIWE,IAAAC,EAAKZ,CAAoB;"}

package/dist/features/ui/sticker-grid/sticker.js

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

package/dist/features/ui/sticker-grid/sticker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticker.js","sources":["../../../../src/features/ui/sticker-grid/sticker.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../lottie-animation/types';\nimport type { IStickerProps } from './sticker-grid-types';\n\nimport React, { useCallback, useMemo, useRef, useState, memo, useLayoutEffect } from 'react';\n\nimport LottieAnimation from '../lottie-animation/lottie-animation';\nimport { StickerContainer, StaticEmoji, LottieContainer } from './sticker-grid-styles';\n\nconst Sticker: React.FC<IStickerProps> = ({\n  emoji,\n  lottieUrl,\n  size = 48,\n  onClick,\n  disabled = false,\n}) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const lottieRef = useRef<ILottieAnimationRef>(null);\n\n  useLayoutEffect(() => {\n    if (lottieRef.current) {\n      lottieRef.current.playSegments([0, 1], true);\n    }\n  }, []);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!disabled) setIsHovered(true);\n  }, [disabled]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (!disabled) setIsHovered(false);\n  }, [disabled]);\n\n  const handleClick = useCallback(() => {\n    if (!disabled && onClick) onClick();\n  }, [disabled, onClick]);\n\n  const lottieSettings = useMemo(\n    () => ({\n      loop: true,\n      renderer: 'canvas',\n      autoplay: isHovered,\n    }),\n    [isHovered],\n  );\n\n  return (\n    <StickerContainer\n      $size={size}\n      $disabled={disabled}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onClick={handleClick}\n    >\n      {!isHovered && <StaticEmoji $size={size}>{emoji}</StaticEmoji>}\n\n      {lottieUrl && (\n        <LottieContainer $size={size}>\n          <LottieAnimation\n            ref={lottieRef}\n            src={lottieUrl}\n            width=\"100%\"\n            height=\"100%\"\n            settings={lottieSettings}\n          />\n        </LottieContainer>\n      )}\n    </StickerContainer>\n  );\n};\n\nexport default memo(Sticker);\n"],"names":["Sticker","emoji","lottieUrl","size","onClick","disabled","isHovered","setIsHovered","useState","lottieRef","useRef","useLayoutEffect","handleMouseEnter","useCallback","handleMouseLeave","handleClick","lottieSettings","useMemo","jsxs","StickerContainer","jsx","StaticEmoji","LottieContainer","LottieAnimation","Sticker$1","memo"],"mappings":";;;;AAQA,MAAMA,IAAmC,CAAC;AAAA,EACxC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAYC,EAA4B,IAAI;AAElD,EAAAC,EAAgB,MAAM;AACpB,IAAIF,EAAU,WACZA,EAAU,QAAQ,aAAa,CAAC,GAAG,CAAC,GAAG,EAAI;AAAA,EAE/C,GAAG,CAAE,CAAA;AAEC,QAAAG,IAAmBC,EAAY,MAAM;AACrC,IAACR,KAAUE,EAAa,EAAI;AAAA,EAAA,GAC/B,CAACF,CAAQ,CAAC,GAEPS,IAAmBD,EAAY,MAAM;AACrC,IAACR,KAAUE,EAAa,EAAK;AAAA,EAAA,GAChC,CAACF,CAAQ,CAAC,GAEPU,IAAcF,EAAY,MAAM;AAChC,IAAA,CAACR,KAAYD,KAAiBA;EAAA,GACjC,CAACC,GAAUD,CAAO,CAAC,GAEhBY,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAUX;AAAA,IAAA;AAAA,IAEZ,CAACA,CAAS;AAAA,EAAA;AAIV,SAAA,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOhB;AAAA,MACP,WAAWE;AAAA,MACX,cAAcO;AAAA,MACd,cAAcE;AAAA,MACd,SAASC;AAAA,MAER,UAAA;AAAA,QAAA,CAACT,KAAa,gBAAAc,EAACC,GAAY,EAAA,OAAOlB,GAAO,UAAMF,GAAA;AAAA,QAE/CC,KACC,gBAAAkB,EAACE,GAAgB,EAAA,OAAOnB,GACtB,UAAA,gBAAAiB;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,KAAKd;AAAA,YACL,KAAKP;AAAA,YACL,OAAM;AAAA,YACN,QAAO;AAAA,YACP,UAAUc;AAAA,UAAA;AAAA,QAAA,GAEd;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,GAEeQ,IAAAC,EAAKzB,CAAO;"}

package/dist/features/ui/stickers/constants.js

@@ -0,0 +1,6 @@
+const I = 32, E = 48;
+export {
+  E as STICKER_MAX_SIZE,
+  I as STICKER_MIN_SIZE
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/ui/stickers/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/features/ui/stickers/constants.ts"],"sourcesContent":["export const STICKER_MIN_SIZE = 32;\nexport const STICKER_MAX_SIZE = 48;\n"],"names":["STICKER_MIN_SIZE","STICKER_MAX_SIZE"],"mappings":"AAAO,MAAMA,IAAmB,IACnBC,IAAmB;"}

package/dist/features/ui/stickers/stickers-effects.js

@@ -0,0 +1,64 @@
+import { keyframes as r, css as t } from "styled-components";
+import { randomizeDuration as o } from "./stickers-utils.js";
+const s = r`
+  0% {
+    transform: translateY(0vh);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100vh);
+    opacity: 0;
+  }
+`, n = r`
+  0% {
+    transform: translateY(0vh);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh);
+    opacity: 0;
+  }
+`, e = r`
+  0% {
+    transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0vw) translateY(0vh) scale(1.25);
+    opacity: 0;
+  }
+`, m = r`
+  0% {
+    transform: translateX(0) translateY(0vh);
+    opacity: 1;
+  }
+  35% {
+    transform: translateX(0) translateY(-50vh) scale(1.25);
+    opacity: 1;
+  }
+  60% {
+    transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1.25);
+    opacity: 0.75;
+  }
+  100% {
+    transform: translateX(var(--from-x)) translateY(-110vh) scale(1.25);
+    opacity: 0;
+  }
+`, i = {
+  float_up: (a) => t`
+    animation: ${s} ${o(a)}ms ease-out forwards;
+  `,
+  fall_down: (a) => t`
+    animation: ${n} ${o(a)}ms ease-out forwards;
+  `,
+  burst_from_edges: (a) => t`
+    animation: ${e} ${o(a)}ms linear forwards;
+  `,
+  pop_expand: (a) => t`
+    animation: ${m} ${a}ms cubic-bezier(0.5, 0.1, 0.7, 1) forwards;
+  `
+};
+export {
+  i as effectAnimations
+};
+//# sourceMappingURL=stickers-effects.js.map

package/dist/features/ui/stickers/stickers-effects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stickers-effects.js","sources":["../../../../src/features/ui/stickers/stickers-effects.ts"],"sourcesContent":["import type { StickersProps } from './stickers-types';\n\nimport { keyframes, css } from 'styled-components';\n\nimport { randomizeDuration } from './stickers-utils';\n\nconst floatUp = keyframes`\n  0% {\n    transform: translateY(0vh);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(-100vh);\n    opacity: 0;\n  }\n`;\n\nconst fallDown = keyframes`\n  0% {\n    transform: translateY(0vh);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(100vh);\n    opacity: 0;\n  }\n`;\n\nconst burstFromEdges = keyframes`\n  0% {\n    transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(0vw) translateY(0vh) scale(1.25);\n    opacity: 0;\n  }\n`;\n\nconst popExpand = keyframes`\n  0% {\n    transform: translateX(0) translateY(0vh);\n    opacity: 1;\n  }\n  35% {\n    transform: translateX(0) translateY(-50vh) scale(1.25);\n    opacity: 1;\n  }\n  60% {\n    transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1.25);\n    opacity: 0.75;\n  }\n  100% {\n    transform: translateX(var(--from-x)) translateY(-110vh) scale(1.25);\n    opacity: 0;\n  }\n`;\n\nexport const effectAnimations: Record<\n  StickersProps['effect'],\n  (duration: number) => ReturnType<typeof css>\n> = {\n  float_up: (duration: number) => css`\n    animation: ${floatUp} ${randomizeDuration(duration)}ms ease-out forwards;\n  `,\n  fall_down: (duration: number) => css`\n    animation: ${fallDown} ${randomizeDuration(duration)}ms ease-out forwards;\n  `,\n  burst_from_edges: (duration: number) => css`\n    animation: ${burstFromEdges} ${randomizeDuration(duration)}ms linear forwards;\n  `,\n  pop_expand: (duration: number) => css`\n    animation: ${popExpand} ${duration}ms cubic-bezier(0.5, 0.1, 0.7, 1) forwards;\n  `,\n};\n"],"names":["floatUp","keyframes","fallDown","burstFromEdges","popExpand","effectAnimations","duration","css","randomizeDuration"],"mappings":";;AAMA,MAAMA,IAAUC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWVC,IAAWD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWXE,IAAiBF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWjBG,IAAYH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmBLI,IAGT;AAAA,EACF,UAAU,CAACC,MAAqBC;AAAA,iBACjBP,CAAO,IAAIQ,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAErD,WAAW,CAACA,MAAqBC;AAAA,iBAClBL,CAAQ,IAAIM,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAEtD,kBAAkB,CAACA,MAAqBC;AAAA,iBACzBJ,CAAc,IAAIK,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAE5D,YAAY,CAACA,MAAqBC;AAAA,iBACnBH,CAAS,IAAIE,CAAQ;AAAA;AAEtC;"}

package/dist/features/ui/stickers/stickers-styled.js

@@ -0,0 +1,29 @@
+import $, { css as s } from "styled-components";
+import { effectAnimations as n } from "./stickers-effects.js";
+const h = $.div`
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background: transparent;
+  pointer-events: none;
+`, a = $.div`
+  position: absolute;
+  z-index: 10;
+
+  left: ${({ x: t }) => `${t}%`};
+  top: ${({ y: t }) => `${t}%`};
+  width: ${({ size: t }) => `${t}px`};
+  height: ${({ size: t }) => `${t}px`};
+  font-size: ${({ size: t }) => `${t}px`};
+
+  ${({ effect: t, duration: i, fromX: o, fromY: e }) => o && e ? s`
+          ${n[t](i)}
+          --from-x: ${o};
+          --from-y: ${e};
+        ` : n[t](i)}
+`;
+export {
+  h as Container,
+  a as Sticker
+};
+//# sourceMappingURL=stickers-styled.js.map