@cuemath/leap 3.2.16-pzd-beta-0.5 → 3.2.17-as1

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

@@ -1,120 +1,127 @@
-import { jsx as n, jsxs as T } from "react/jsx-runtime";
-import { memo as Z, useState as j, useRef as k, useMemo as u, useEffect as O, useCallback as m } from "react";
-import U from "../../ui/layout/flex-view.js";
-import v from "../../ui/lottie-animation/lottie-animation.js";
-import { usePostPuzzleToAssign as y } from "../api/puzzle-assign.js";
-import { PUZZLE_ASSIGN_ANIMATION as c } from "../constants/puzzle-container.js";
-import { getPuzzleCardLottie as D } from "../utils/puzzle-pattern.js";
-import { PuzzleContainer as E, PuzzleAssignedWrapper as G, PuzzleContentWrapper as M } from "./puzzle-container-styled.js";
-import S from "./puzzle-container-view.js";
-const W = {
-  loop: !1,
-  renderer: "svg",
-  autoPlay: !1
-}, X = Z(
+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: o,
-    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,
-      student_elo_rating: h,
-      current_elo_rating: _
-    } = $, [I, a] = j(s), r = k(null), w = u(() => D(i), [i]), R = u(
-      () => ({
-        node_id: A,
-        node_type: "PUZZLE_CARD",
-        student_elo_rating: h,
-        current_elo_rating: _
-      }),
-      [A, h, _]
-    ), { post: C, isProcessing: b } = y({
-      onComplete: (e) => {
-        var t;
-        e ? a(!0) : ((t = r.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");
       }
     });
-    O(() => {
-      var e, t;
-      s || (l ? (e = r.current) == null || e.playSegments(c.REVEAL, !0) : ((t = r.current) == null || t.stop(), a(!1)));
-    }, [s, l]);
-    const x = m(() => {
-      s || C(
+    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, C, P, p]), L = m(() => {
-      f();
-    }, [f]), V = m(() => {
-      var e;
-      (e = r.current) == null || e.playSegments(c.REVEAL, !0);
-    }, []), N = u(
-      () => ({
-        name: "enterFrame",
-        callback: (e) => {
-          const { currentTime: t } = e;
-          t === 49 && a(!0), t === 101 && (o == null || o());
-        }
-      }),
-      [o]
-    );
-    return l ? s ? /* @__PURE__ */ n(E, { $justifyContent: "center", children: /* @__PURE__ */ n(
-      G,
-      {
-        $imageHue: i,
-        $background: `${i}_2`,
-        $widthX: 15.9375,
-        children: /* @__PURE__ */ n(
-          S,
-          {
-            imageUrl: g,
-            handleOnPuzzleClick: L,
-            title: d,
-            assigned: !0
-          }
-        )
-      }
-    ) }) : /* @__PURE__ */ n(E, { children: /* @__PURE__ */ T(U, { $heightX: 26, children: [
-      /* @__PURE__ */ n(
-        v,
+    }, [g, e, $, h, u]), _ = c(() => {
+      d();
+    }, [d]), E = () => n === "visible" || e ? /* @__PURE__ */ l(w, { children: [
+      /* @__PURE__ */ l(
+        G,
         {
-          src: w,
-          ref: r,
-          settings: W,
-          onRender: V,
-          eventListener: N,
-          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(M, { $visible: I, $position: "absolute", children: /* @__PURE__ */ n(
+      A === "TEACHER" && /* @__PURE__ */ i(
         S,
         {
-          imageUrl: g,
-          title: d,
-          handleOnPuzzleClick: L,
-          handleAssign: x,
-          assigning: b,
-          analyticsProps: R
+          $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()
+      }
+    ) });
   }
-), te = X;
+), F = M;
 export {
-  te 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      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":";;;;;;;;;AAeA,MAAMA,IAA8B;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,GAEMC,IAAqDC;AAAA,EACzD,CAAC;AAAA,IACC,eAAAC,IAAgB;AAAA,IAChB,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,MACI;AACE,UAAA;AAAA,MACJ,WAAWC;AAAA,MACX,WAAWC;AAAA,MACX,UAAUC;AAAA,MACV,OAAAC;AAAA,MACA,IAAIC;AAAA,MACJ,SAASC;AAAA,MACT,oBAAAC;AAAA,MACA,oBAAAC;AAAA,IACE,IAAAV,GAEE,CAACW,GAAgBC,CAAiB,IAAIC,EAASR,CAAgB,GAE/DS,IAAkBC,EAAmC,IAAI,GACzDC,IAAkBC,EAAQ,MAAMC,EAAoBf,CAAQ,GAAG,CAACA,CAAQ,CAAC,GAEzEgB,IAAiBF;AAAA,MACrB,OAAO;AAAA,QACL,SAAST;AAAA,QACT,WAAW;AAAA,QACX,oBAAAC;AAAA,QACA,oBAAAC;AAAA,MAAA;AAAA,MAEF,CAACF,GAAQC,GAAoBC,CAAkB;AAAA,IAAA,GAG3C,EAAE,MAAMU,GAAoB,cAAAC,EAAA,IAAiBC,EAAsB;AAAA,MACvE,YAAY,CAACC,MAAyB;;AACpC,QAAIA,IAEFX,EAAkB,EAAI,MAEtBY,IAAAV,EAAgB,YAAhB,QAAAU,EAAyB,aAAaC,EAAwB,iBAAiB,KAE/Eb,EAAkB,EAAK;AAAA,MAE3B;AAAA,IAAA,CACD;AAED,IAAAc,EAAU,MAAM;;AACd,MAAKrB,MACCR,KACF2B,IAAAV,EAAgB,YAAhB,QAAAU,EAAyB,aAAaC,EAAwB,QAAQ,QAEtEE,IAAAb,EAAgB,YAAhB,QAAAa,EAAyB,QACzBf,EAAkB,EAAK;AAAA,IAE3B,GACC,CAACP,GAAkBR,CAAa,CAAC;AAE9B,UAAA+B,IAAeC,EAAY,MAAM;AACrC,MAAIxB,KAEJe;AAAA,QACE;AAAA,UACE,WAAWb;AAAA,QACb;AAAA,QACA;AAAA,UACE,WAAAL;AAAA,UACA,cAAAD;AAAA,QACF;AAAA,MAAA;AAAA,IACF,GACC,CAACA,GAAcI,GAAkBe,GAAoBb,GAAUL,CAAS,CAAC,GAEtE4B,IAAsBD,EAAY,MAAM;AAC9B,MAAA9B;IAAA,GACb,CAACA,CAAa,CAAC,GAEZgC,IAAmBF,EAAY,MAAM;;AACzC,OAAAL,IAAAV,EAAgB,YAAhB,QAAAU,EAAyB,aAAaC,EAAwB,QAAQ;AAAA,IACxE,GAAG,CAAE,CAAA,GAECO,IAAoBf;AAAA,MACxB,OAAO;AAAA,QACL,MAAM;AAAA,QACN,UAAU,CAACgB,MAA6B;AAChC,gBAAA,EAAE,aAAAC,EAAgB,IAAAD;AAExB,UAAIC,MAAgB,MAClBtB,EAAkB,EAAI,GAGpBsB,MAAgB,QACFpC,KAAA,QAAAA;AAAA,QAEpB;AAAA,MAAA;AAAA,MAEF,CAACA,CAAa;AAAA,IAAA;AAGhB,WAAKD,IAIDQ,IAEC,gBAAA8B,EAAAC,GAAA,EAAuB,iBAAgB,UACtC,UAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,WAAWlC;AAAA,QACX,aAAa,GAAGA,CAAQ;AAAA,QACxB,SAAS;AAAA,QAET,UAAA,gBAAAgC;AAAA,UAACG;AAAAA,UAAA;AAAA,YACC,UAAAlC;AAAA,YACA,qBAAA0B;AAAA,YACA,OAAAxB;AAAA,YACA,UAAQ;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAEJ,EAAA,CAAA,sBAKD8B,GAAA,EACC,UAAC,gBAAAG,EAAAC,GAAA,EAAS,UAAU,IAClB,UAAA;AAAA,MAAA,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,KAAKzB;AAAA,UACL,KAAKF;AAAA,UACL,UAAUpB;AAAA,UACV,UAAUqC;AAAA,UACV,eAAeC;AAAA,UACf,oBAAkB;AAAA,QAAA;AAAA,MACpB;AAAA,wBAECU,GAAA,EAA4B,UAAU/B,GAAgB,WAAU,YAC/D,UAAA,gBAAAwB;AAAA,QAACG;AAAAA,QAAA;AAAA,UACC,UAAAlC;AAAA,UACA,OAAAE;AAAA,UACA,qBAAAwB;AAAA,UACA,cAAAF;AAAA,UACA,WAAWP;AAAA,UACX,gBAAAF;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA,EACF,CAAA,EACF,CAAA,IA7CO;AAAA,EA+CX;AACF,GAEAwB,KAAehD;"}
+{"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/carousal/carousal-styles.js

@@ -0,0 +1,45 @@
+import n from "styled-components";
+const a = n.div`
+  margin-left: ${({ theme: t }) => t.layout.gutter}px;
+  overflow: hidden;
+  margin: ${({ wrapperMargin: t }) => t};
+`, o = n.div`
+  display: flex;
+  transition: transform 1s ease;
+  transform: ${({ position: t }) => `translateX(calc(${t} * (-100%)))`};
+`, s = n.div`
+  padding-right: ${({ theme: t }) => t.layout.gutter}px;
+  display: flex;
+  flex: 1 0 100%;
+  transition: opacity 1s ease;
+  padding: ${({ carouselSlotPadding: t }) => t};
+  ${({ slideAlign: t }) => t === "center" && `
+    display:flex;
+    justify-content: center;
+  `}
+`, l = n.div`
+  margin-top: 12px;
+  text-align: center;
+  ${({ flexCenterIndicators: t }) => t && `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `}
+`, d = n.span`
+  background: ${({ isCurrent: t, dotColor: e, inactiveDotColor: i }) => t ? e : i};
+  width: ${({ isCurrent: t, activeIndicatorSize: e }) => t ? e : "8px"};
+  height: ${({ isCurrent: t, activeIndicatorSize: e }) => t ? e : "8px"};
+  border-radius: 50%;
+  margin-right: 5px;
+  display: inline-block;
+  transition: background 0.5s ease;
+  cursor: pointer;
+`;
+export {
+  o as CarouselContainer,
+  s as CarouselSlot,
+  l as Container,
+  d as Dot,
+  a as Wrapper
+};
+//# sourceMappingURL=carousal-styles.js.map

package/dist/features/ui/carousal/carousal-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousal-styles.js","sources":["../../../../src/features/ui/carousal/carousal-styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\ninterface WrapperProps {\n  wrapperMargin?: string;\n}\n\nexport const Wrapper = styled.div<WrapperProps>`\n  margin-left: ${({ theme }) => theme.layout.gutter}px;\n  overflow: hidden;\n  margin: ${({ wrapperMargin }) => wrapperMargin};\n`;\n\ninterface CarouselContainerProps {\n  position: number;\n}\nexport const CarouselContainer = styled.div<CarouselContainerProps>`\n  display: flex;\n  transition: transform 1s ease;\n  transform: ${({ position }) => `translateX(calc(${position} * (-100%)))`};\n`;\n\ninterface CarouselSlotProps {\n  carouselSlotPadding?: string;\n  slideAlign?: string | null;\n}\nexport const CarouselSlot = styled.div<CarouselSlotProps>`\n  padding-right: ${({ theme }) => theme.layout.gutter}px;\n  display: flex;\n  flex: 1 0 100%;\n  transition: opacity 1s ease;\n  padding: ${({ carouselSlotPadding }) => carouselSlotPadding};\n  ${({ slideAlign }) =>\n    slideAlign === 'center' &&\n    `\n    display:flex;\n    justify-content: center;\n  `}\n`;\n\ninterface ContainerProps {\n  flexCenterIndicators?: boolean;\n}\nexport const Container = styled.div<ContainerProps>`\n  margin-top: 12px;\n  text-align: center;\n  ${({ flexCenterIndicators }) =>\n    flexCenterIndicators &&\n    `\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  `}\n`;\n\ninterface DotProps {\n  isCurrent: boolean;\n  dotColor: string;\n  inactiveDotColor: string;\n  activeIndicatorSize: string;\n}\nexport const Dot = styled.span<DotProps>`\n  background: ${({ isCurrent, dotColor, inactiveDotColor }) =>\n    isCurrent ? dotColor : inactiveDotColor};\n  width: ${({ isCurrent, activeIndicatorSize }) => (isCurrent ? activeIndicatorSize : '8px')};\n  height: ${({ isCurrent, activeIndicatorSize }) => (isCurrent ? activeIndicatorSize : '8px')};\n  border-radius: 50%;\n  margin-right: 5px;\n  display: inline-block;\n  transition: background 0.5s ease;\n  cursor: pointer;\n`;\n"],"names":["Wrapper","styled","theme","wrapperMargin","CarouselContainer","position","CarouselSlot","carouselSlotPadding","slideAlign","Container","flexCenterIndicators","Dot","isCurrent","dotColor","inactiveDotColor","activeIndicatorSize"],"mappings":";AAMO,MAAMA,IAAUC,EAAO;AAAA,iBACb,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,MAAM;AAAA;AAAA,YAEvC,CAAC,EAAE,eAAAC,EAAc,MAAMA,CAAa;AAAA,GAMnCC,IAAoBH,EAAO;AAAA;AAAA;AAAA,eAGzB,CAAC,EAAE,UAAAI,EAAe,MAAA,mBAAmBA,CAAQ,cAAc;AAAA,GAO7DC,IAAeL,EAAO;AAAA,mBAChB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,aAIxC,CAAC,EAAE,qBAAAK,EAAoB,MAAMA,CAAmB;AAAA,IACzD,CAAC,EAAE,YAAAC,EAAW,MACdA,MAAe,YACf;AAAA;AAAA;AAAA,GAGD;AAAA,GAMUC,IAAYR,EAAO;AAAA;AAAA;AAAA,IAG5B,CAAC,EAAE,sBAAAS,QACHA,KACA;AAAA;AAAA;AAAA;AAAA,GAID;AAAA,GASUC,IAAMV,EAAO;AAAA,gBACV,CAAC,EAAE,WAAAW,GAAW,UAAAC,GAAU,kBAAAC,QACpCF,IAAYC,IAAWC,CAAgB;AAAA,WAChC,CAAC,EAAE,WAAAF,GAAW,qBAAAG,EAA2B,MAAAH,IAAYG,IAAsB,KAAM;AAAA,YAChF,CAAC,EAAE,WAAAH,GAAW,qBAAAG,EAA2B,MAAAH,IAAYG,IAAsB,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/ui/carousal/carousal.js

@@ -0,0 +1,76 @@
+import { jsxs as G, Fragment as H, jsx as n } from "react/jsx-runtime";
+import { useState as J, useRef as M, useCallback as p, useEffect as j } from "react";
+import { getTheme as N } from "../theme/get-theme.js";
+import { Wrapper as Q, CarouselContainer as U, CarouselSlot as B, Container as V, Dot as X } from "./carousal-styles.js";
+const { colors: K } = N(), Y = ({
+  children: a,
+  initialPosition: b = 0,
+  infinite: f = !1,
+  slideDuration: y = 8e3,
+  dotColor: i = K.BLACK,
+  changeColor: x = () => null,
+  slideAlign: C = null,
+  inactiveDotColor: E = K.BLACK_T_15,
+  activeIndicatorSize: F = "8px",
+  flexCenterIndicators: W = !1,
+  isTestimonial: m = !1,
+  setColor: l = () => null,
+  setPosition: S = () => null,
+  carouselSlotPadding: v = "",
+  wrapperMargin: $ = "",
+  hideIndicators: q = !1,
+  autoScroll: I = !0,
+  nodeRef: u = null,
+  onChange: g = () => null
+}) => {
+  const [r, z] = J(b), A = M(null), o = p(
+    (t) => {
+      z(t), S(t), u && u.current && (u.current.position = t), g();
+    },
+    [S, u, g]
+  ), s = p(
+    (t, e = !1) => {
+      const _ = (Array.isArray(a) ? a : [a]).length;
+      let c = r;
+      m && l && l(c), t === "next" ? (c = r + 1, c > _ - 1 && (c = e ? 0 : r)) : (c = r - 1, c < 0 && (c = e ? _ - 1 : r)), c !== r && o(c);
+    },
+    [r, a, m, l, o]
+  ), h = p(() => s("next", f), [s, f]), k = p(() => s("prev", f), [s, f]), D = p(
+    (t) => {
+      m && l && l(r), t !== r && o(t);
+    },
+    [r, m, l, o]
+  );
+  j(() => (u && u.current && (u.current.next = h, u.current.prev = k, u.current.position = r), I && (A.current = setInterval(() => s("next", !0), y)), () => {
+    A.current && clearInterval(A.current);
+  }), [y, I, u, r, h, k, s]), j(() => {
+    x(r);
+  }, [r, x]);
+  const L = Array.isArray(a) ? a.length : 1;
+  return /* @__PURE__ */ G(H, { children: [
+    /* @__PURE__ */ n(Q, { wrapperMargin: $, children: /* @__PURE__ */ n(U, { position: r, children: Array.isArray(a) ? a.map((t, e) => /* @__PURE__ */ n(
+      B,
+      {
+        carouselSlotPadding: v,
+        slideAlign: C,
+        children: t
+      },
+      e
+    )) : /* @__PURE__ */ n(B, { carouselSlotPadding: v, slideAlign: C, children: a }) }) }),
+    L > 1 && !q && /* @__PURE__ */ n(V, { flexCenterIndicators: W, children: Array.from({ length: L }, (t, e) => /* @__PURE__ */ n(
+      X,
+      {
+        isCurrent: e === r,
+        onClick: () => D(e),
+        dotColor: i,
+        inactiveDotColor: E,
+        activeIndicatorSize: F
+      },
+      e
+    )) })
+  ] });
+}, R = Y;
+export {
+  R as default
+};
+//# sourceMappingURL=carousal.js.map

package/dist/features/ui/carousal/carousal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousal.js","sources":["../../../../src/features/ui/carousal/carousal.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\n\nimport { getTheme } from '../theme/get-theme';\nimport { CarouselContainer, CarouselSlot, Container, Dot, Wrapper } from './carousal-styles';\n\nconst { colors } = getTheme();\n\ninterface CarouselProps {\n  children: React.ReactNode[] | React.ReactNode;\n  initialPosition?: number;\n  infinite?: boolean;\n  slideDuration?: number;\n  dotColor?: string;\n  changeColor?: (position: number) => void;\n  slideAlign?: string | null;\n  inactiveDotColor?: string;\n  activeIndicatorSize?: string;\n  flexCenterIndicators?: boolean;\n  isTestimonial?: boolean;\n  setColor?: (position: number) => void;\n  setPosition?: (position: number) => void;\n  carouselSlotPadding?: string;\n  wrapperMargin?: string;\n  hideIndicators?: boolean;\n  autoScroll?: boolean;\n  nodeRef?: { current?: { next?: () => void; prev?: () => void; position?: number } } | null;\n  onChange?: () => void;\n}\n\nconst Carousel: React.FC<CarouselProps> = ({\n  children,\n  initialPosition = 0,\n  infinite = false,\n  slideDuration = 8000,\n  dotColor = colors.BLACK,\n  changeColor = () => null,\n  slideAlign = null,\n  inactiveDotColor = colors.BLACK_T_15,\n  activeIndicatorSize = '8px',\n  flexCenterIndicators = false,\n  isTestimonial = false,\n  setColor = () => null,\n  setPosition = () => null,\n  carouselSlotPadding = '',\n  wrapperMargin = '',\n  hideIndicators = false,\n  autoScroll = true,\n  nodeRef = null,\n  onChange = () => null,\n}) => {\n  const [position, setPositionState] = useState(initialPosition);\n  const autoSlideRef = useRef<NodeJS.Timeout | null>(null);\n\n  const slide = useCallback(\n    (newPosition: number) => {\n      setPositionState(newPosition);\n      setPosition(newPosition);\n      if (nodeRef && nodeRef.current) {\n        nodeRef.current.position = newPosition;\n      }\n      onChange();\n    },\n    [setPosition, nodeRef, onChange],\n  );\n\n  const changeSlide = useCallback(\n    (action: 'next' | 'prev', infiniteOverride = false) => {\n      const childrenArray = Array.isArray(children) ? children : [children];\n      const numItems = childrenArray.length;\n      let newPosition = position;\n\n      if (isTestimonial && setColor) {\n        setColor(newPosition);\n      }\n\n      if (action === 'next') {\n        newPosition = position + 1;\n        if (newPosition > numItems - 1) {\n          newPosition = infiniteOverride ? 0 : position;\n        }\n      } else {\n        newPosition = position - 1;\n        if (newPosition < 0) {\n          newPosition = infiniteOverride ? numItems - 1 : position;\n        }\n      }\n\n      if (newPosition !== position) slide(newPosition);\n    },\n    [position, children, isTestimonial, setColor, slide],\n  );\n\n  const nextSlide = useCallback(() => changeSlide('next', infinite), [changeSlide, infinite]);\n  const prevSlide = useCallback(() => changeSlide('prev', infinite), [changeSlide, infinite]);\n\n  const onIndicatorClick = useCallback(\n    (newPosition: number) => {\n      if (isTestimonial && setColor) {\n        setColor(position);\n      }\n\n      if (newPosition !== position) {\n        slide(newPosition);\n      }\n    },\n    [position, isTestimonial, setColor, slide],\n  );\n\n  useEffect(() => {\n    if (nodeRef && nodeRef.current) {\n      nodeRef.current.next = nextSlide;\n      nodeRef.current.prev = prevSlide;\n      nodeRef.current.position = position;\n    }\n\n    if (autoScroll) {\n      autoSlideRef.current = setInterval(() => changeSlide('next', true), slideDuration);\n    }\n\n    return () => {\n      if (autoSlideRef.current) {\n        clearInterval(autoSlideRef.current);\n      }\n    };\n  }, [slideDuration, autoScroll, nodeRef, position, nextSlide, prevSlide, changeSlide]);\n\n  useEffect(() => {\n    changeColor(position);\n  }, [position, changeColor]);\n\n  const carouselLength = Array.isArray(children) ? children.length : 1;\n\n  return (\n    <>\n      <Wrapper wrapperMargin={wrapperMargin}>\n        <CarouselContainer position={position}>\n          {Array.isArray(children) ? (\n            children.map((child, index) => (\n              <CarouselSlot\n                carouselSlotPadding={carouselSlotPadding}\n                key={index}\n                slideAlign={slideAlign}\n              >\n                {child}\n              </CarouselSlot>\n            ))\n          ) : (\n            <CarouselSlot carouselSlotPadding={carouselSlotPadding} slideAlign={slideAlign}>\n              {children}\n            </CarouselSlot>\n          )}\n        </CarouselContainer>\n      </Wrapper>\n      {carouselLength > 1 && !hideIndicators && (\n        <Container flexCenterIndicators={flexCenterIndicators}>\n          {Array.from({ length: carouselLength }, (_, index) => (\n            <Dot\n              key={index}\n              isCurrent={index === position}\n              onClick={() => onIndicatorClick(index)}\n              dotColor={dotColor}\n              inactiveDotColor={inactiveDotColor}\n              activeIndicatorSize={activeIndicatorSize}\n            />\n          ))}\n        </Container>\n      )}\n    </>\n  );\n};\n\nexport default Carousel;\n"],"names":["colors","getTheme","Carousel","children","initialPosition","infinite","slideDuration","dotColor","changeColor","slideAlign","inactiveDotColor","activeIndicatorSize","flexCenterIndicators","isTestimonial","setColor","setPosition","carouselSlotPadding","wrapperMargin","hideIndicators","autoScroll","nodeRef","onChange","position","setPositionState","useState","autoSlideRef","useRef","slide","useCallback","newPosition","changeSlide","action","infiniteOverride","numItems","nextSlide","prevSlide","onIndicatorClick","useEffect","carouselLength","jsxs","Fragment","jsx","Wrapper","CarouselContainer","child","index","CarouselSlot","Container","_","Dot","Carousel$1"],"mappings":"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"}

package/dist/features/worksheet/worksheet/worksheet-helpers.js

@@ -1,10 +1,10 @@
 import w from "../../../assets/line-icons/icons/bulb2.js";
 import S from "../../../assets/line-icons/icons/edit-star.js";
 import A from "../../../assets/line-icons/icons/edit2.js";
-import k from "../../../assets/line-icons/icons/question-letter.js";
-import L from "../../../assets/line-icons/icons/star2.js";
+import O from "../../../assets/line-icons/icons/question-letter.js";
+import R from "../../../assets/line-icons/icons/star2.js";
 import b from "../constants/events.js";
-import { OPTIONAL_ITEM_TYPES as O, ACTION_BAR_HEIGHT as R, QUESTION_WIDTH as C, SPLIT_QUESTION_WIDTH as N, CLOZE_FORMULA_RESPONSE_LIMIT as x } from "./constants.js";
+import { OPTIONAL_ITEM_TYPES as L, ACTION_BAR_HEIGHT as k, QUESTION_WIDTH as y, SPLIT_QUESTION_WIDTH as N, CLOZE_FORMULA_RESPONSE_LIMIT as x } from "./constants.js";
 import { QUESTION_TAGS as E } from "./worksheet-types.js";
 const Q = (e) => {
   switch (e) {
@@ -35,7 +35,7 @@ const Q = (e) => {
     return !1;
   const r = e.toLowerCase();
   return r === "intro" || r === "concept-intro";
-}, y = (e) => e.reduce((r, t) => {
+}, C = (e) => e.reduce((r, t) => {
   const [n, s] = t.split(":"), a = n == null ? void 0 : n.trim(), c = s == null ? void 0 : s.trim();
   return !a || !c ? r : {
     ...r,
@@ -61,9 +61,9 @@ const Q = (e) => {
           item_display_number: g,
           section_name: l,
           item_type: r ? o : void 0,
-          is_optional: o ? O.includes(o) : !1,
+          is_optional: o ? L.includes(o) : !1,
           item_tags: a.tags ?? [],
-          item_tags_map: y(a.tags ?? []),
+          item_tags_map: C(a.tags ?? []),
           question_number: h - (d ? 1 : 0),
           total_questions: _.length
         };
@@ -105,7 +105,7 @@ const Q = (e) => {
           item_number: c,
           item_display_number: c + 1,
           item_tags: a.tags ?? [],
-          item_tags_map: y(a.tags ?? []),
+          item_tags_map: C(a.tags ?? []),
           question_number: m,
           total_questions: i.length
         };
@@ -131,7 +131,7 @@ const Q = (e) => {
     });
   }
   return n;
-}, z = ({
+}, J = ({
   questions: e,
   initialQuestion: r,
   initialResponseId: t,
@@ -154,7 +154,7 @@ const Q = (e) => {
   if ((u = e[0]) != null && u.response_id)
     return e[0].response_id;
   throw new Error("Initial question not found");
-}, J = ({
+}, V = ({
   questions: e,
   responses: r,
   behavior: t,
@@ -206,7 +206,7 @@ function M(e, r) {
     }
   };
 }
-const V = (e) => e.reduce(
+const z = (e) => e.reduce(
   (r, t) => ({
     ...r,
     [t.response_id]: M(e, t.response_id)
@@ -217,9 +217,9 @@ const V = (e) => e.reduce(
   return {
     questionsContainerWidth: !e.some(
       (a) => a.questions.some((c) => c.stimulus_review)
-    ) ? C : N,
-    maxQuestionWidth: C,
-    actionbarHeight: t === "bottom" ? R : 0
+    ) ? y : N,
+    maxQuestionWidth: y,
+    actionbarHeight: t === "bottom" ? k : 0
   };
 }, Z = ({
   questions: e,
@@ -352,9 +352,9 @@ const V = (e) => e.reduce(
     case "practice-regular":
       return S;
     case "exit-ticket":
-      return k;
+      return O;
     case "advanced":
-      return L;
+      return R;
     default:
       return w;
   }
@@ -385,17 +385,16 @@ const V = (e) => e.reduce(
   bgColor: "BLACK",
   borderColor: "BLACK_4",
   textColor: "WHITE"
-}, ue = (e) => e ? `${e}_1` : "BLUE_1";
+};
 export {
   ie as checkIsClozeFormulaResponseInvalid,
-  z as getInitialQuestionId,
-  V as getInitialResponses,
-  J as getLastUnlockedQuestionIndex,
+  J as getInitialQuestionId,
+  z as getInitialResponses,
+  V as getLastUnlockedQuestionIndex,
   ne as getNavigationSectionBackgroundColor,
   ae as getNavigationSectionIcon,
   oe as getNavigationSectionName,
   ee as getPaperColorByQuestion,
-  ue as getPuzzleWorksheetBackgroundColor,
   te as getQuestionBackgroundImage,
   re as getQuestionBorderColor,
   M as getQuestionMetadata,