@cuemath/leap 3.2.31 → 3.2.32

package/dist/features/homework/homework-card-view.js

@@ -5,17 +5,17 @@ import I from "../chapters-v2/comps/node-card/node-card-tags.js";
 import { getNodeTypeBasedBgImage as P } from "../chapters-v2/utils/index.js";
 import { getNodeCardBasedIcon as U } from "../chapters-v2/utils/node-card-utils.js";
 import G from "../puzzles/comps/puzzle-card.js";
-import g from "../ui/arrow-tooltip/arrow-tooltip.js";
+import h from "../ui/arrow-tooltip/arrow-tooltip.js";
 import a from "../ui/layout/flex-view.js";
 import j from "../ui/lottie-animation/lottie-animation.js";
 import V from "./card-title.js";
 import _ from "./node-progress.js";
 import { PuzzleCardWrapper as K, CardWrapper as Z, IconWrapper as F, BannerImageWrapper as M, BannerImage as q, HeaderText as J, SubHeaderText as Q } from "./styles.js";
 const Y = { renderer: "canvas", autoplay: !1 }, ee = ({
-  header: h,
+  header: $,
   isInQueue: C,
   nodeData: E,
-  studentContainerRef: $,
+  studentContainerRef: f,
   subHeader: x,
   userType: c,
   isMilestone: d = !1,
@@ -24,7 +24,7 @@ const Y = { renderer: "canvas", autoplay: !1 }, ee = ({
   const {
     node_type: t,
     state: m,
-    accuracy: f,
+    accuracy: T,
     due_date_ts: r,
     image_url: p,
     image_hue: o,
@@ -32,29 +32,29 @@ const Y = { renderer: "canvas", autoplay: !1 }, ee = ({
     unlocked_on_ts: s,
     course_type: A,
     title: k
-  } = E, D = t === "PUZZLE_CARD", T = c === "STUDENT" && m === "LOCKED", [N, v] = L(!1), l = b(null), H = P(t), u = b(null), { lottie: S } = U(t), O = w(() => {
+  } = E, D = t === "PUZZLE_CARD", u = c === "STUDENT" && m === "LOCKED", [N, v] = L(!1), l = b(null), H = P(t), g = b(null), { lottie: S } = U(t), O = w(() => {
     var i;
-    (i = u.current) == null || i.play();
+    (i = g.current) == null || i.play();
   }, []), X = w(() => {
     var i;
-    (i = u.current) == null || i.stop();
+    (i = g.current) == null || i.stop();
   }, []);
   return R(() => {
     l.current && l.current.scrollHeight > l.current.clientHeight && v(!0);
   }, []), D ? /* @__PURE__ */ e(
-    g,
+    h,
     {
       renderAs: "primary",
       tooltipItem: "Solve puzzle after class",
       position: "bottom",
-      hidden: !T,
+      hidden: !u,
       children: /* @__PURE__ */ e("div", { ref: y, children: /* @__PURE__ */ n(
         K,
         {
-          ref: $,
+          ref: f,
           $position: "relative",
           $background: `${o}_2`,
-          $disabled: T,
+          $disabled: u,
           children: [
             /* @__PURE__ */ e(
               G,
@@ -63,7 +63,8 @@ const Y = { renderer: "canvas", autoplay: !1 }, ee = ({
                 imageUrl: p ?? "",
                 title: k,
                 width: 126,
-                height: 159
+                height: 159,
+                disabled: u
               }
             ),
             /* @__PURE__ */ e(
@@ -71,7 +72,7 @@ const Y = { renderer: "canvas", autoplay: !1 }, ee = ({
               {
                 nodeType: t,
                 state: m,
-                accuracy: f,
+                accuracy: T,
                 dueDateTs: r,
                 isStudent: c === "STUDENT",
                 isMilestone: d
@@ -92,7 +93,7 @@ const Y = { renderer: "canvas", autoplay: !1 }, ee = ({
   ) : /* @__PURE__ */ n(
     a,
     {
-      ref: $,
+      ref: f,
       $widthX: 12.38,
       $position: "relative",
       $background: `${o || "ORANGE"}_2`,
@@ -121,12 +122,12 @@ const Y = { renderer: "canvas", autoplay: !1 }, ee = ({
                   $position: "relative",
                   $alignItems: "center",
                   $justifyContent: "center",
-                  children: /* @__PURE__ */ e(j, { src: S, ref: u, settings: Y })
+                  children: /* @__PURE__ */ e(j, { src: S, ref: g, settings: Y })
                 }
               ),
               /* @__PURE__ */ e(V, { cardHeader: z, nodeType: t, courseType: A }),
               C && /* @__PURE__ */ e(
-                g,
+                h,
                 {
                   renderAs: "primary",
                   tooltipItem: "Not visible to student",
@@ -144,7 +145,7 @@ const Y = { renderer: "canvas", autoplay: !1 }, ee = ({
           {
             nodeType: t,
             state: m,
-            accuracy: f,
+            accuracy: T,
             dueDateTs: r,
             isStudent: c === "STUDENT",
             isMilestone: d
@@ -160,16 +161,16 @@ const Y = { renderer: "canvas", autoplay: !1 }, ee = ({
         ),
         /* @__PURE__ */ n(a, { $gutterX: 0.75, $gapX: 1, $flexRowGapX: 0.5, $background: "WHITE", children: [
           /* @__PURE__ */ e(
-            g,
+            h,
             {
               renderAs: "primary",
               position: "bottom",
-              tooltipItem: h,
+              tooltipItem: $,
               width: 300,
               hidden: !N,
               parentWidth: "auto",
               zIndex: 6,
-              children: /* @__PURE__ */ e(a, { $heightX: 2.5, children: /* @__PURE__ */ e(J, { ref: l, $renderAs: "ab3", children: h }) })
+              children: /* @__PURE__ */ e(a, { $heightX: 2.5, children: /* @__PURE__ */ e(J, { ref: l, $renderAs: "ab3", children: $ }) })
             }
           ),
           /* @__PURE__ */ n(

package/dist/features/homework/homework-card-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"homework-card-view.js","sources":["../../../src/features/homework/homework-card-view.tsx"],"sourcesContent":["import type { INodeDataProps } from '../chapters-v2/comps/node-card/node-card-types';\nimport type { ILottieAnimationRef } from '../ui/lottie-animation/types';\nimport type { TUserTypes } from '../ui/types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport ClosedEyeIcon from '../../assets/line-icons/icons/closed-eye';\nimport NodeCardTags from '../chapters-v2/comps/node-card/node-card-tags';\nimport { getNodeTypeBasedBgImage } from '../chapters-v2/utils';\nimport { getNodeCardBasedIcon } from '../chapters-v2/utils/node-card-utils';\nimport PuzzleCard from '../puzzles/comps/puzzle-card';\nimport ArrowTooltip from '../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../ui/layout/flex-view';\nimport LottieAnimation from '../ui/lottie-animation/lottie-animation';\nimport CardTitle from './card-title';\nimport NodeProgress from './node-progress';\nimport * as Styled from './styles';\n\nconst renderSettings = { renderer: 'canvas', autoplay: false };\n\ninterface IHomeworkCardViewProps {\n  header: string;\n  isInQueue?: boolean;\n  nodeData: INodeDataProps;\n  studentContainerRef: React.RefObject<HTMLDivElement>;\n  subHeader: string;\n  userType: TUserTypes;\n  isMilestone?: boolean;\n  puzzleHWCardRef?: React.RefObject<HTMLDivElement>;\n}\n\nconst HomeworkView: FC<IHomeworkCardViewProps> = ({\n  header,\n  isInQueue,\n  nodeData,\n  studentContainerRef,\n  subHeader,\n  userType,\n  isMilestone = false,\n  puzzleHWCardRef,\n}) => {\n  const {\n    node_type: nodeType,\n    state,\n    accuracy,\n    due_date_ts: dueDateTs,\n    image_url: imageUrl,\n    image_hue: imageHue,\n    card_header: cardHeader = '',\n    unlocked_on_ts: unlockedOnTs,\n    course_type: courseType,\n    title,\n  } = nodeData;\n  const isPuzzleCard = nodeType === 'PUZZLE_CARD';\n  const isPuzzleDisabled = userType === 'STUDENT' && state === 'LOCKED';\n\n  const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n  const titleTextRef = useRef<HTMLDivElement>(null);\n  const bgImage = getNodeTypeBasedBgImage(nodeType);\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n  const { lottie: nodeCardLottie } = getNodeCardBasedIcon(nodeType);\n\n  const handleOnMouseEnter = useCallback(() => {\n    animationRef.current?.play();\n  }, []);\n\n  const handleOnMouseLeave = useCallback(() => {\n    animationRef.current?.stop();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (\n      titleTextRef.current &&\n      titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n    ) {\n      setShowTitleTooltip(true);\n    }\n  }, []);\n\n  if (isPuzzleCard) {\n    return (\n      <ArrowTooltip\n        renderAs=\"primary\"\n        tooltipItem=\"Solve puzzle after class\"\n        position=\"bottom\"\n        hidden={!isPuzzleDisabled}\n      >\n        <div ref={puzzleHWCardRef}>\n          <Styled.PuzzleCardWrapper\n            ref={studentContainerRef}\n            $position=\"relative\"\n            $background={`${imageHue}_2`}\n            $disabled={isPuzzleDisabled}\n          >\n            <PuzzleCard\n              imageHue={imageHue}\n              imageUrl={imageUrl ?? ''}\n              title={title}\n              width={126}\n              height={159}\n            />\n\n            <NodeCardTags\n              nodeType={nodeType}\n              state={state}\n              accuracy={accuracy}\n              dueDateTs={dueDateTs}\n              isStudent={userType === 'STUDENT'}\n              isMilestone={isMilestone}\n            />\n            {!isMilestone && dueDateTs && unlockedOnTs && (\n              <NodeProgress\n                dueDate={dueDateTs * 1000}\n                unlockedOn={unlockedOnTs * 1000}\n                progressBg={`${imageHue || 'ORANGE'}_5`}\n              />\n            )}\n          </Styled.PuzzleCardWrapper>\n        </div>\n      </ArrowTooltip>\n    );\n  }\n\n  return (\n    <FlexView\n      ref={studentContainerRef}\n      $widthX={12.38}\n      $position=\"relative\"\n      $background={`${imageHue || 'ORANGE'}_2`}\n      onMouseEnter={handleOnMouseEnter}\n      onMouseLeave={handleOnMouseLeave}\n    >\n      <Styled.CardWrapper\n        $flexDirection=\"row\"\n        $alignItems=\"center\"\n        $width=\"100%\"\n        $heightX={3.5}\n        $bgImage={bgImage}\n        $gutterX={0.78125}\n        $flexGap={8.5}\n        $position=\"relative\"\n      >\n        <Styled.IconWrapper\n          $width={31}\n          $height={31}\n          $borderRadiusX={2}\n          $background=\"WHITE_1\"\n          $position=\"relative\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n        >\n          <LottieAnimation src={nodeCardLottie} ref={animationRef} settings={renderSettings} />\n        </Styled.IconWrapper>\n        <CardTitle cardHeader={cardHeader} nodeType={nodeType} courseType={courseType} />\n        {isInQueue && (\n          <ArrowTooltip\n            renderAs=\"primary\"\n            tooltipItem=\"Not visible to student\"\n            position=\"bottom\"\n            zIndex={6}\n          >\n            <ClosedEyeIcon />\n          </ArrowTooltip>\n        )}\n        {!!imageUrl && (\n          <Styled.BannerImageWrapper>\n            <Styled.BannerImage src={imageUrl} alt=\"Chapter image\" />\n          </Styled.BannerImageWrapper>\n        )}\n      </Styled.CardWrapper>\n      <NodeCardTags\n        nodeType={nodeType}\n        state={state}\n        accuracy={accuracy}\n        dueDateTs={dueDateTs}\n        isStudent={userType === 'STUDENT'}\n        isMilestone={isMilestone}\n      />\n      {!isMilestone && dueDateTs && unlockedOnTs && (\n        <NodeProgress\n          dueDate={dueDateTs * 1000}\n          unlockedOn={unlockedOnTs * 1000}\n          progressBg={`${imageHue || 'ORANGE'}_4`}\n        />\n      )}\n      <FlexView $gutterX={0.75} $gapX={1} $flexRowGapX={0.5} $background=\"WHITE\">\n        <ArrowTooltip\n          renderAs=\"primary\"\n          position=\"bottom\"\n          tooltipItem={header}\n          width={300}\n          hidden={!showTitleTooltip}\n          parentWidth=\"auto\"\n          zIndex={6}\n        >\n          <FlexView $heightX={2.5}>\n            <Styled.HeaderText ref={titleTextRef} $renderAs=\"ab3\">\n              {header}\n            </Styled.HeaderText>\n          </FlexView>\n        </ArrowTooltip>\n        <FlexView\n          $flexDirection=\"row\"\n          $heightX={1.25}\n          $alignItems=\"center\"\n          $justifyContent=\"space-between\"\n        >\n          <Styled.SubHeaderText $renderAs=\"ub3\" $color=\"BLACK_T_60\">\n            {subHeader}\n          </Styled.SubHeaderText>\n          <FlexView $width={32} />\n        </FlexView>\n      </FlexView>\n    </FlexView>\n  );\n};\n\nexport default memo(HomeworkView);\n"],"names":["renderSettings","HomeworkView","header","isInQueue","nodeData","studentContainerRef","subHeader","userType","isMilestone","puzzleHWCardRef","nodeType","state","accuracy","dueDateTs","imageUrl","imageHue","cardHeader","unlockedOnTs","courseType","title","isPuzzleCard","isPuzzleDisabled","showTitleTooltip","setShowTitleTooltip","useState","titleTextRef","useRef","bgImage","getNodeTypeBasedBgImage","animationRef","nodeCardLottie","getNodeCardBasedIcon","handleOnMouseEnter","useCallback","_a","handleOnMouseLeave","useLayoutEffect","jsx","ArrowTooltip","jsxs","Styled.PuzzleCardWrapper","PuzzleCard","NodeCardTags","NodeProgress","FlexView","Styled.CardWrapper","Styled.IconWrapper","LottieAnimation","CardTitle","ClosedEyeIcon","Styled.BannerImageWrapper","Styled.BannerImage","Styled.HeaderText","Styled.SubHeaderText","HomeworkCardView","memo"],"mappings":"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"}
+{"version":3,"file":"homework-card-view.js","sources":["../../../src/features/homework/homework-card-view.tsx"],"sourcesContent":["import type { INodeDataProps } from '../chapters-v2/comps/node-card/node-card-types';\nimport type { ILottieAnimationRef } from '../ui/lottie-animation/types';\nimport type { TUserTypes } from '../ui/types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport ClosedEyeIcon from '../../assets/line-icons/icons/closed-eye';\nimport NodeCardTags from '../chapters-v2/comps/node-card/node-card-tags';\nimport { getNodeTypeBasedBgImage } from '../chapters-v2/utils';\nimport { getNodeCardBasedIcon } from '../chapters-v2/utils/node-card-utils';\nimport PuzzleCard from '../puzzles/comps/puzzle-card';\nimport ArrowTooltip from '../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../ui/layout/flex-view';\nimport LottieAnimation from '../ui/lottie-animation/lottie-animation';\nimport CardTitle from './card-title';\nimport NodeProgress from './node-progress';\nimport * as Styled from './styles';\n\nconst renderSettings = { renderer: 'canvas', autoplay: false };\n\ninterface IHomeworkCardViewProps {\n  header: string;\n  isInQueue?: boolean;\n  nodeData: INodeDataProps;\n  studentContainerRef: React.RefObject<HTMLDivElement>;\n  subHeader: string;\n  userType: TUserTypes;\n  isMilestone?: boolean;\n  puzzleHWCardRef?: React.RefObject<HTMLDivElement>;\n}\n\nconst HomeworkView: FC<IHomeworkCardViewProps> = ({\n  header,\n  isInQueue,\n  nodeData,\n  studentContainerRef,\n  subHeader,\n  userType,\n  isMilestone = false,\n  puzzleHWCardRef,\n}) => {\n  const {\n    node_type: nodeType,\n    state,\n    accuracy,\n    due_date_ts: dueDateTs,\n    image_url: imageUrl,\n    image_hue: imageHue,\n    card_header: cardHeader = '',\n    unlocked_on_ts: unlockedOnTs,\n    course_type: courseType,\n    title,\n  } = nodeData;\n  const isPuzzleCard = nodeType === 'PUZZLE_CARD';\n  const isPuzzleDisabled = userType === 'STUDENT' && state === 'LOCKED';\n\n  const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n  const titleTextRef = useRef<HTMLDivElement>(null);\n  const bgImage = getNodeTypeBasedBgImage(nodeType);\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n  const { lottie: nodeCardLottie } = getNodeCardBasedIcon(nodeType);\n\n  const handleOnMouseEnter = useCallback(() => {\n    animationRef.current?.play();\n  }, []);\n\n  const handleOnMouseLeave = useCallback(() => {\n    animationRef.current?.stop();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (\n      titleTextRef.current &&\n      titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n    ) {\n      setShowTitleTooltip(true);\n    }\n  }, []);\n\n  if (isPuzzleCard) {\n    return (\n      <ArrowTooltip\n        renderAs=\"primary\"\n        tooltipItem=\"Solve puzzle after class\"\n        position=\"bottom\"\n        hidden={!isPuzzleDisabled}\n      >\n        <div ref={puzzleHWCardRef}>\n          <Styled.PuzzleCardWrapper\n            ref={studentContainerRef}\n            $position=\"relative\"\n            $background={`${imageHue}_2`}\n            $disabled={isPuzzleDisabled}\n          >\n            <PuzzleCard\n              imageHue={imageHue}\n              imageUrl={imageUrl ?? ''}\n              title={title}\n              width={126}\n              height={159}\n              disabled={isPuzzleDisabled}\n            />\n\n            <NodeCardTags\n              nodeType={nodeType}\n              state={state}\n              accuracy={accuracy}\n              dueDateTs={dueDateTs}\n              isStudent={userType === 'STUDENT'}\n              isMilestone={isMilestone}\n            />\n            {!isMilestone && dueDateTs && unlockedOnTs && (\n              <NodeProgress\n                dueDate={dueDateTs * 1000}\n                unlockedOn={unlockedOnTs * 1000}\n                progressBg={`${imageHue || 'ORANGE'}_5`}\n              />\n            )}\n          </Styled.PuzzleCardWrapper>\n        </div>\n      </ArrowTooltip>\n    );\n  }\n\n  return (\n    <FlexView\n      ref={studentContainerRef}\n      $widthX={12.38}\n      $position=\"relative\"\n      $background={`${imageHue || 'ORANGE'}_2`}\n      onMouseEnter={handleOnMouseEnter}\n      onMouseLeave={handleOnMouseLeave}\n    >\n      <Styled.CardWrapper\n        $flexDirection=\"row\"\n        $alignItems=\"center\"\n        $width=\"100%\"\n        $heightX={3.5}\n        $bgImage={bgImage}\n        $gutterX={0.78125}\n        $flexGap={8.5}\n        $position=\"relative\"\n      >\n        <Styled.IconWrapper\n          $width={31}\n          $height={31}\n          $borderRadiusX={2}\n          $background=\"WHITE_1\"\n          $position=\"relative\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n        >\n          <LottieAnimation src={nodeCardLottie} ref={animationRef} settings={renderSettings} />\n        </Styled.IconWrapper>\n        <CardTitle cardHeader={cardHeader} nodeType={nodeType} courseType={courseType} />\n        {isInQueue && (\n          <ArrowTooltip\n            renderAs=\"primary\"\n            tooltipItem=\"Not visible to student\"\n            position=\"bottom\"\n            zIndex={6}\n          >\n            <ClosedEyeIcon />\n          </ArrowTooltip>\n        )}\n        {!!imageUrl && (\n          <Styled.BannerImageWrapper>\n            <Styled.BannerImage src={imageUrl} alt=\"Chapter image\" />\n          </Styled.BannerImageWrapper>\n        )}\n      </Styled.CardWrapper>\n      <NodeCardTags\n        nodeType={nodeType}\n        state={state}\n        accuracy={accuracy}\n        dueDateTs={dueDateTs}\n        isStudent={userType === 'STUDENT'}\n        isMilestone={isMilestone}\n      />\n      {!isMilestone && dueDateTs && unlockedOnTs && (\n        <NodeProgress\n          dueDate={dueDateTs * 1000}\n          unlockedOn={unlockedOnTs * 1000}\n          progressBg={`${imageHue || 'ORANGE'}_4`}\n        />\n      )}\n      <FlexView $gutterX={0.75} $gapX={1} $flexRowGapX={0.5} $background=\"WHITE\">\n        <ArrowTooltip\n          renderAs=\"primary\"\n          position=\"bottom\"\n          tooltipItem={header}\n          width={300}\n          hidden={!showTitleTooltip}\n          parentWidth=\"auto\"\n          zIndex={6}\n        >\n          <FlexView $heightX={2.5}>\n            <Styled.HeaderText ref={titleTextRef} $renderAs=\"ab3\">\n              {header}\n            </Styled.HeaderText>\n          </FlexView>\n        </ArrowTooltip>\n        <FlexView\n          $flexDirection=\"row\"\n          $heightX={1.25}\n          $alignItems=\"center\"\n          $justifyContent=\"space-between\"\n        >\n          <Styled.SubHeaderText $renderAs=\"ub3\" $color=\"BLACK_T_60\">\n            {subHeader}\n          </Styled.SubHeaderText>\n          <FlexView $width={32} />\n        </FlexView>\n      </FlexView>\n    </FlexView>\n  );\n};\n\nexport default memo(HomeworkView);\n"],"names":["renderSettings","HomeworkView","header","isInQueue","nodeData","studentContainerRef","subHeader","userType","isMilestone","puzzleHWCardRef","nodeType","state","accuracy","dueDateTs","imageUrl","imageHue","cardHeader","unlockedOnTs","courseType","title","isPuzzleCard","isPuzzleDisabled","showTitleTooltip","setShowTitleTooltip","useState","titleTextRef","useRef","bgImage","getNodeTypeBasedBgImage","animationRef","nodeCardLottie","getNodeCardBasedIcon","handleOnMouseEnter","useCallback","_a","handleOnMouseLeave","useLayoutEffect","jsx","ArrowTooltip","jsxs","Styled.PuzzleCardWrapper","PuzzleCard","NodeCardTags","NodeProgress","FlexView","Styled.CardWrapper","Styled.IconWrapper","LottieAnimation","CardTitle","ClosedEyeIcon","Styled.BannerImageWrapper","Styled.BannerImage","Styled.HeaderText","Styled.SubHeaderText","HomeworkCardView","memo"],"mappings":"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"}

package/dist/features/homework/styles.js

@@ -2,7 +2,7 @@ import r from "styled-components";
 import n from "../../assets/line-icons/icons/minus2.js";
 import e from "../ui/layout/flex-view.js";
 import i from "../ui/text/text.js";
-const l = r(e)(({ theme: o }) => `
+const c = r(e)(({ theme: o }) => `
     cursor: pointer;
     width: 24px;
     height: 24px;
@@ -108,27 +108,26 @@ const k = r(e)`
   width: 100%;
   height: 100%;
   opacity: 0.5;
-`, y = r(e)`
+`, C = r(e)`
   position: absolute;
   right: 42px;
   top: 24px;
-`, C = r(e)(({ $disabled: o }) => o ? `
-      opacity: 0.5;
+`, $ = r(e)(({ $disabled: o }) => o ? `
       cursor: not-allowed;
     ` : "cursor: pointer");
 export {
   f as BannerImage,
   h as BannerImageWrapper,
   v as BlurContainer,
-  y as BlurFlexView,
+  C as BlurFlexView,
   x as CardContainer,
-  l as CardKebabMenuWrapper,
+  c as CardKebabMenuWrapper,
   u as CardMenuOptionsWrapper,
   b as CardWrapper,
   m as HeaderText,
   w as IconWrapper,
   k as MenuWrapper,
-  C as PuzzleCardWrapper,
+  $ as PuzzleCardWrapper,
   g as StyledMinus2Icon,
   d as SubHeaderText
 };

package/dist/features/homework/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../src/features/homework/styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport Minus2Icon from '../../assets/line-icons/icons/minus2';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\n\ninterface ICardWrapperProps {\n  $bgImage: string;\n}\ninterface ICardOptionsMenuWrapperProps {\n  $visible: boolean;\n  $shouldopenonright: boolean;\n}\n\nexport const CardKebabMenuWrapper = styled(FlexView)(({ theme }) => {\n  return `\n    cursor: pointer;\n    width: 24px;\n    height: 24px;\n    \n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\nexport const SubHeaderText = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nexport const CardMenuOptionsWrapper = styled(FlexView)<ICardOptionsMenuWrapperProps>(({\n  $shouldopenonright,\n  $visible,\n}) => {\n  return `\n    cursor: pointer;\n    position: absolute;\n    z-index: 6;\n    top: calc(100% + 4px);\n    right: ${$shouldopenonright ? 0 : 'auto'};\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0});\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.4);\n    z-index: 10;\n  `;\n});\n\nexport const CardContainer = styled(FlexView)`\n  border: 1px solid ${({ theme }) => theme.colors.BLACK_T_15};\n  border-top-width: 2px;\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.BLACK};\n    border-top-width: 2px;\n  }\n`;\n\nexport const CardWrapper = styled(FlexView)<ICardWrapperProps>(({ $bgImage }) => {\n  if ($bgImage) {\n    return `\n      background-image: url(${$bgImage});\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-position: center;\n      overflow: hidden;\n    `;\n  }\n\n  return 'overflow: hidden;';\n});\n\nexport const IconWrapper = styled(FlexView)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const BannerImageWrapper = styled(FlexView)`\n  position: absolute;\n  right: -18px;\n  top: -4px;\n`;\n\nexport const BannerImage = styled.img(({ theme }) => {\n  const { gutter } = theme.layout;\n\n  return `\n    border: 1px solid ${theme.colors.BLACK_T_15};\n    width: ${gutter * 4}px;\n    height: ${gutter * 4}px;\n    border-radius: 50%;\n  `;\n});\n\nexport const StyledMinus2Icon = styled(Minus2Icon)`\n  path {\n    stroke: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n\nexport const HeaderText = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: break-spaces;\n`;\n\ninterface ICardOptionWrapperProps {\n  $disabled?: boolean;\n}\ninterface ICardOptionsProps {\n  $top: number;\n  $left: number;\n}\n\nexport const CardOptions = styled(FlexView)<ICardOptionsProps>``;\n\nexport const CardOptionWrapper = styled(FlexView)<ICardOptionWrapperProps>(({\n  theme,\n  $disabled,\n}) => {\n  return `\n    cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n    \n    &:hover {\n      background: ${$disabled ? 'transparent' : theme.colors.BLACK};\n    };\n    \n    path {\n      fill: ${theme.colors.WHITE_1};\n    }\n  `;\n});\n\nexport const OptionText = styled(Text)`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n  position: absolute;\n  z-index: 6;\n  top: calc(100% - 36px);\n  right: 12px;\n  transform-origin: top;\n  transform: scaleY(1);\n`;\n\nexport const BlurContainer = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.5;\n`;\n\nexport const BlurFlexView = styled(FlexView)`\n  position: absolute;\n  right: 42px;\n  top: 24px;\n`;\n\nexport const PuzzleCardWrapper = styled(FlexView)<{ $disabled?: boolean }>(({ $disabled }) => {\n  if ($disabled)\n    return `\n      opacity: 0.5;\n      cursor: not-allowed;\n    `;\n\n  return 'cursor: pointer';\n});\n"],"names":["CardKebabMenuWrapper","styled","FlexView","theme","SubHeaderText","Text","CardMenuOptionsWrapper","$shouldopenonright","$visible","CardContainer","CardWrapper","$bgImage","IconWrapper","BannerImageWrapper","BannerImage","gutter","StyledMinus2Icon","Minus2Icon","HeaderText","$disabled","MenuWrapper","BlurContainer","BlurFlexView","PuzzleCardWrapper"],"mappings":";;;;AAcO,MAAMA,IAAuBC,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAEYC,IAAgBH,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ3BC,IAAyBL,EAAOC,CAAQ,EAAgC,CAAC;AAAA,EACpF,oBAAAK;AAAA,EACA,UAAAC;AACF,MACS;AAAA;AAAA;AAAA;AAAA;AAAA,aAKID,IAAqB,IAAI,MAAM;AAAA;AAAA,wBAEpBC,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,GAK9B,GAEYC,IAAgBR,EAAOC,CAAQ;AAAA,sBACtB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,wBAGpC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,GAK5CO,IAAcT,EAAOC,CAAQ,EAAqB,CAAC,EAAE,UAAAS,QAC5DA,IACK;AAAA,8BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,QAQ7B,mBACR,GAEYC,IAAcX,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM7BW,IAAqBZ,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMpCY,IAAcb,EAAO,IAAI,CAAC,EAAE,OAAAE,QAAY;AAC7C,QAAA,EAAE,QAAAY,EAAO,IAAIZ,EAAM;AAElB,SAAA;AAAA,wBACeA,EAAM,OAAO,UAAU;AAAA,aAClCY,IAAS,CAAC;AAAA,cACTA,IAAS,CAAC;AAAA;AAAA;AAGxB,CAAC,GAEYC,IAAmBf,EAAOgB,CAAU;AAAA;AAAA,cAEnC,CAAC,EAAE,OAAAd,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,GAIlCe,IAAajB,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBVJ,EAAOC,CAAQ;AAETD,EAAOC,CAAQ,EAA2B,CAAC;AAAA,EAC1E,OAAAC;AAAA,EACA,WAAAgB;AACF,MACS;AAAA,cACKA,IAAY,gBAAgB,SAAS;AAAA;AAAA;AAAA,oBAG/BA,IAAY,gBAAgBhB,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,cAIpDA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGjC;AAEyBF,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAMxB,MAAAe,IAAcnB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS7BmB,IAAgBpB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS/BoB,IAAerB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM9BqB,IAAoBtB,EAAOC,CAAQ,EAA2B,CAAC,EAAE,WAAAiB,QACxEA,IACK;AAAA;AAAA;AAAA,QAKF,iBACR;"}
+{"version":3,"file":"styles.js","sources":["../../../src/features/homework/styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport Minus2Icon from '../../assets/line-icons/icons/minus2';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\n\ninterface ICardWrapperProps {\n  $bgImage: string;\n}\ninterface ICardOptionsMenuWrapperProps {\n  $visible: boolean;\n  $shouldopenonright: boolean;\n}\n\nexport const CardKebabMenuWrapper = styled(FlexView)(({ theme }) => {\n  return `\n    cursor: pointer;\n    width: 24px;\n    height: 24px;\n    \n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\nexport const SubHeaderText = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nexport const CardMenuOptionsWrapper = styled(FlexView)<ICardOptionsMenuWrapperProps>(({\n  $shouldopenonright,\n  $visible,\n}) => {\n  return `\n    cursor: pointer;\n    position: absolute;\n    z-index: 6;\n    top: calc(100% + 4px);\n    right: ${$shouldopenonright ? 0 : 'auto'};\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0});\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.4);\n    z-index: 10;\n  `;\n});\n\nexport const CardContainer = styled(FlexView)`\n  border: 1px solid ${({ theme }) => theme.colors.BLACK_T_15};\n  border-top-width: 2px;\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.BLACK};\n    border-top-width: 2px;\n  }\n`;\n\nexport const CardWrapper = styled(FlexView)<ICardWrapperProps>(({ $bgImage }) => {\n  if ($bgImage) {\n    return `\n      background-image: url(${$bgImage});\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-position: center;\n      overflow: hidden;\n    `;\n  }\n\n  return 'overflow: hidden;';\n});\n\nexport const IconWrapper = styled(FlexView)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const BannerImageWrapper = styled(FlexView)`\n  position: absolute;\n  right: -18px;\n  top: -4px;\n`;\n\nexport const BannerImage = styled.img(({ theme }) => {\n  const { gutter } = theme.layout;\n\n  return `\n    border: 1px solid ${theme.colors.BLACK_T_15};\n    width: ${gutter * 4}px;\n    height: ${gutter * 4}px;\n    border-radius: 50%;\n  `;\n});\n\nexport const StyledMinus2Icon = styled(Minus2Icon)`\n  path {\n    stroke: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n\nexport const HeaderText = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: break-spaces;\n`;\n\ninterface ICardOptionWrapperProps {\n  $disabled?: boolean;\n}\ninterface ICardOptionsProps {\n  $top: number;\n  $left: number;\n}\n\nexport const CardOptions = styled(FlexView)<ICardOptionsProps>``;\n\nexport const CardOptionWrapper = styled(FlexView)<ICardOptionWrapperProps>(({\n  theme,\n  $disabled,\n}) => {\n  return `\n    cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n    \n    &:hover {\n      background: ${$disabled ? 'transparent' : theme.colors.BLACK};\n    };\n    \n    path {\n      fill: ${theme.colors.WHITE_1};\n    }\n  `;\n});\n\nexport const OptionText = styled(Text)`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n  position: absolute;\n  z-index: 6;\n  top: calc(100% - 36px);\n  right: 12px;\n  transform-origin: top;\n  transform: scaleY(1);\n`;\n\nexport const BlurContainer = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.5;\n`;\n\nexport const BlurFlexView = styled(FlexView)`\n  position: absolute;\n  right: 42px;\n  top: 24px;\n`;\n\nexport const PuzzleCardWrapper = styled(FlexView)<{ $disabled?: boolean }>(({ $disabled }) => {\n  if ($disabled)\n    return `\n      cursor: not-allowed;\n    `;\n\n  return 'cursor: pointer';\n});\n"],"names":["CardKebabMenuWrapper","styled","FlexView","theme","SubHeaderText","Text","CardMenuOptionsWrapper","$shouldopenonright","$visible","CardContainer","CardWrapper","$bgImage","IconWrapper","BannerImageWrapper","BannerImage","gutter","StyledMinus2Icon","Minus2Icon","HeaderText","$disabled","MenuWrapper","BlurContainer","BlurFlexView","PuzzleCardWrapper"],"mappings":";;;;AAcO,MAAMA,IAAuBC,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAEYC,IAAgBH,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ3BC,IAAyBL,EAAOC,CAAQ,EAAgC,CAAC;AAAA,EACpF,oBAAAK;AAAA,EACA,UAAAC;AACF,MACS;AAAA;AAAA;AAAA;AAAA;AAAA,aAKID,IAAqB,IAAI,MAAM;AAAA;AAAA,wBAEpBC,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,GAK9B,GAEYC,IAAgBR,EAAOC,CAAQ;AAAA,sBACtB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,wBAGpC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,GAK5CO,IAAcT,EAAOC,CAAQ,EAAqB,CAAC,EAAE,UAAAS,QAC5DA,IACK;AAAA,8BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,QAQ7B,mBACR,GAEYC,IAAcX,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM7BW,IAAqBZ,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMpCY,IAAcb,EAAO,IAAI,CAAC,EAAE,OAAAE,QAAY;AAC7C,QAAA,EAAE,QAAAY,EAAO,IAAIZ,EAAM;AAElB,SAAA;AAAA,wBACeA,EAAM,OAAO,UAAU;AAAA,aAClCY,IAAS,CAAC;AAAA,cACTA,IAAS,CAAC;AAAA;AAAA;AAGxB,CAAC,GAEYC,IAAmBf,EAAOgB,CAAU;AAAA;AAAA,cAEnC,CAAC,EAAE,OAAAd,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,GAIlCe,IAAajB,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBVJ,EAAOC,CAAQ;AAETD,EAAOC,CAAQ,EAA2B,CAAC;AAAA,EAC1E,OAAAC;AAAA,EACA,WAAAgB;AACF,MACS;AAAA,cACKA,IAAY,gBAAgB,SAAS;AAAA;AAAA;AAAA,oBAG/BA,IAAY,gBAAgBhB,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,cAIpDA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGjC;AAEyBF,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAMxB,MAAAe,IAAcnB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS7BmB,IAAgBpB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS/BoB,IAAerB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM9BqB,IAAoBtB,EAAOC,CAAQ,EAA2B,CAAC,EAAE,WAAAiB,QACxEA,IACK;AAAA;AAAA,QAIF,iBACR;"}

package/dist/features/puzzles/comps/puzzle-card-styled.js

@@ -1,12 +1,13 @@
 import e from "styled-components";
-import r from "../../ui/layout/flex-view.js";
+import t from "../../ui/layout/flex-view.js";
 import i from "../../ui/text/text.js";
 import { getPuzzleCardPattern as p } from "../utils/puzzle-pattern.js";
-const n = e(r)`
+const n = e(t)`
   position: relative;
-  cursor: pointer;
+  cursor: ${({ $disabled: o }) => o ? "not-allowed" : "pointer"};
+  opacity: ${({ $disabled: o }) => o ? 0.5 : 1};
 
-  box-shadow: inset 0px 0px 0px 4px ${({ theme: o, $imageHue: t }) => o.colors[`${t}_4`]};
+  box-shadow: inset 0px 0px 0px 4px ${({ theme: o, $imageHue: r }) => o.colors[`${r}_4`]};
 
   background-image: ${({ $imageHue: o }) => `url(${p(o)})`};
   background-size: cover;
@@ -21,7 +22,7 @@ const n = e(r)`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: break-spaces;
-`, b = e(r)`
+`, b = e(t)`
   position: absolute;
   top: -16px;
   right: -15px;

package/dist/features/puzzles/comps/puzzle-card-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-card-styled.js","sources":["../../../../src/features/puzzles/comps/puzzle-card-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\nconst PuzzleWrapper = styled(FlexView)<{ $animationPhase?: string; $imageHue: THueNames }>`\n  position: relative;\n  cursor: pointer;\n\n  box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n\n  background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n  background-size: cover;\n\n  &:hover {\n    outline: 1px solid ${({ theme }) => theme.colors.BLACK_1};\n  }\n`;\n\nconst Title = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: break-spaces;\n`;\n\nconst StickerWrapper = styled(FlexView)`\n  position: absolute;\n  top: -16px;\n  right: -15px;\n`;\n\nexport { PuzzleWrapper, Title, StickerWrapper };\n"],"names":["PuzzleWrapper","styled","FlexView","theme","$imageHue","getPuzzleCardPattern","Title","Text","StickerWrapper"],"mappings":";;;;AAQM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,sCAIC,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgBD,EAAM,OAAO,GAAGC,CAAS,IAAI,CAAC;AAAA;AAAA,sBAExE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,yBAIzD,CAAC,EAAE,OAAAD,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItDG,IAAQL,EAAOM,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASnBC,IAAiBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"puzzle-card-styled.js","sources":["../../../../src/features/puzzles/comps/puzzle-card-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\ninterface IPuzzleWrapperProps {\n  $animationPhase?: string;\n  $imageHue: THueNames;\n  $disabled?: boolean;\n}\n\nconst PuzzleWrapper = styled(FlexView)<IPuzzleWrapperProps>`\n  position: relative;\n  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};\n  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};\n\n  box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n\n  background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n  background-size: cover;\n\n  &:hover {\n    outline: 1px solid ${({ theme }) => theme.colors.BLACK_1};\n  }\n`;\n\nconst Title = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: break-spaces;\n`;\n\nconst StickerWrapper = styled(FlexView)`\n  position: absolute;\n  top: -16px;\n  right: -15px;\n`;\n\nexport { PuzzleWrapper, Title, StickerWrapper };\n"],"names":["PuzzleWrapper","styled","FlexView","$disabled","theme","$imageHue","getPuzzleCardPattern","Title","Text","StickerWrapper"],"mappings":";;;;AAcM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA,YAEzB,CAAC,EAAE,WAAAC,EAAA,MAAiBA,IAAY,gBAAgB,SAAU;AAAA,aACzD,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,MAAM,CAAE;AAAA;AAAA,sCAEf,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgBD,EAAM,OAAO,GAAGC,CAAS,IAAI,CAAC;AAAA;AAAA,sBAExE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,yBAIzD,CAAC,EAAE,OAAAD,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItDG,IAAQN,EAAOO,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASnBC,IAAiBR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/puzzles/comps/puzzle-card.js

@@ -1,19 +1,19 @@
 import { jsx as i, jsxs as f } from "react/jsx-runtime";
-import { memo as P, useRef as _, useMemo as y, useCallback as s } from "react";
+import { memo as _, useRef as b, useMemo as y, useCallback as s } from "react";
 import S from "../../ui/buttons/clickable/clickable.js";
-import b from "../../ui/image/image.js";
-import A from "../../ui/layout/flex-view.js";
-import Z from "../../ui/lottie-animation/lottie-animation.js";
-import { PUZZLE_ANALYTICS_EVENTS as k } from "../puzzle-analytics-events.js";
-import { getPuzzleStickerLottie as x } from "../utils/puzzle-feedback-celebration.js";
-import { PuzzleWrapper as M, Title as j, StickerWrapper as v } from "./puzzle-card-styled.js";
-const R = {
+import A from "../../ui/image/image.js";
+import Z from "../../ui/layout/flex-view.js";
+import k from "../../ui/lottie-animation/lottie-animation.js";
+import { PUZZLE_ANALYTICS_EVENTS as x } from "../puzzle-analytics-events.js";
+import { getPuzzleStickerLottie as M } from "../utils/puzzle-feedback-celebration.js";
+import { PuzzleWrapper as j, Title as v, StickerWrapper as R } from "./puzzle-card-styled.js";
+const T = {
   autoplay: !1,
   loop: !0,
   renderer: "canvas"
-}, G = P(
+}, I = _(
   ({
-    imageHue: c,
+    imageHue: a,
     imageUrl: u,
     title: h,
     height: $ = "100%",
@@ -21,22 +21,23 @@ const R = {
     onCardClick: n,
     userNodeId: o,
     rewards: r,
-    studentId: a,
-    nodeId: m
+    studentId: c,
+    nodeId: m,
+    disabled: L = !1
   }) => {
-    const { sticker: p } = (r == null ? void 0 : r[0]) || {}, l = _(null), L = y(
+    const { sticker: p } = (r == null ? void 0 : r[0]) || {}, l = b(null), g = y(
       () => ({
         node_id: m,
-        student_id: a,
+        student_id: c,
         node_type: "PUZZLE_CARD"
       }),
-      [m, a]
-    ), e = p ? x(p) : void 0, g = s(() => {
+      [m, c]
+    ), e = p ? M(p) : void 0, d = s(() => {
       o && (n == null || n(o));
     }, [n, o]), E = s(() => {
       var t;
       e && ((t = l.current) == null || t.play());
-    }, [e]), d = s(() => {
+    }, [e]), P = s(() => {
       var t;
       e && ((t = l.current) == null || t.stop());
     }, [e]);
@@ -44,31 +45,32 @@ const R = {
       S,
       {
         label: "",
-        analyticsLabel: k.PUZZLE_VIEWED,
-        analyticsProps: L,
-        onClick: g,
+        analyticsLabel: x.PUZZLE_VIEWED,
+        analyticsProps: g,
+        onClick: d,
         children: /* @__PURE__ */ f(
-          M,
+          j,
           {
             $width: z,
             $height: $,
             $justifyContent: "center",
             $alignItems: "center",
-            $imageHue: c,
-            $background: `${c}_2`,
+            $imageHue: a,
+            $background: `${a}_2`,
+            $disabled: L,
             onMouseEnter: E,
-            onMouseLeave: d,
+            onMouseLeave: P,
             children: [
-              /* @__PURE__ */ f(A, { $justifyContent: "center", $alignItems: "center", $flexGap: 12, children: [
-                /* @__PURE__ */ i(b, { src: u ?? "", width: 68, height: 68, withLoader: !1, alt: "Puzzle" }),
-                /* @__PURE__ */ i(j, { $renderAs: "ab3", $align: "center", $width: "80%", children: h })
+              /* @__PURE__ */ f(Z, { $justifyContent: "center", $alignItems: "center", $flexGap: 12, children: [
+                /* @__PURE__ */ i(A, { src: u ?? "", width: 68, height: 68, withLoader: !1, alt: "Puzzle" }),
+                /* @__PURE__ */ i(v, { $renderAs: "ab3", $align: "center", $width: "80%", children: h })
               ] }),
-              e && /* @__PURE__ */ i(v, { $widthX: 2.5, $heightX: 2.5, children: /* @__PURE__ */ i(
-                Z,
+              e && /* @__PURE__ */ i(R, { $widthX: 2.5, $heightX: 2.5, children: /* @__PURE__ */ i(
+                k,
                 {
                   src: e,
                   ref: l,
-                  settings: R
+                  settings: T
                 }
               ) })
             ]
@@ -79,6 +81,6 @@ const R = {
   }
 );
 export {
-  G as default
+  I as default
 };
 //# sourceMappingURL=puzzle-card.js.map

package/dist/features/puzzles/comps/puzzle-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-card.js","sources":["../../../../src/features/puzzles/comps/puzzle-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\nimport type { IPuzzleCardProps } from './puzzle-card-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useMemo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { PUZZLE_ANALYTICS_EVENTS } from '../puzzle-analytics-events';\nimport { getPuzzleStickerLottie } from '../utils/puzzle-feedback-celebration';\nimport * as Styled from './puzzle-card-styled';\n\nconst puzzleStickerLottieSettings = {\n  autoplay: false,\n  loop: true,\n  renderer: 'canvas',\n};\n\nconst PuzzleCard: FC<IPuzzleCardProps> = memo(\n  ({\n    imageHue,\n    imageUrl,\n    title,\n    height = '100%',\n    width = '100%',\n    onCardClick,\n    userNodeId,\n    rewards,\n    studentId,\n    nodeId,\n  }) => {\n    const { sticker } = rewards?.[0] || {};\n\n    const lottieAnimationRef = useRef<ILottieAnimationRef | null>(null);\n\n    const analyticsProps = useMemo(\n      () => ({\n        node_id: nodeId,\n        student_id: studentId,\n        node_type: 'PUZZLE_CARD',\n      }),\n      [nodeId, studentId],\n    );\n\n    const puzzleStickerLottie = sticker ? getPuzzleStickerLottie(sticker) : undefined;\n\n    const handleCardClick = useCallback(() => {\n      if (userNodeId) {\n        onCardClick?.(userNodeId);\n      }\n    }, [onCardClick, userNodeId]);\n\n    const handleOnMouseEnter = useCallback(() => {\n      if (puzzleStickerLottie) lottieAnimationRef.current?.play();\n    }, [puzzleStickerLottie]);\n\n    const handleOnMouseLeave = useCallback(() => {\n      if (puzzleStickerLottie) lottieAnimationRef.current?.stop();\n    }, [puzzleStickerLottie]);\n\n    return (\n      <Clickable\n        label=\"\"\n        analyticsLabel={PUZZLE_ANALYTICS_EVENTS.PUZZLE_VIEWED}\n        analyticsProps={analyticsProps}\n        onClick={handleCardClick}\n      >\n        <Styled.PuzzleWrapper\n          $width={width}\n          $height={height}\n          $justifyContent=\"center\"\n          $alignItems=\"center\"\n          $imageHue={imageHue}\n          $background={`${imageHue}_2`}\n          onMouseEnter={handleOnMouseEnter}\n          onMouseLeave={handleOnMouseLeave}\n        >\n          <FlexView $justifyContent=\"center\" $alignItems=\"center\" $flexGap={12}>\n            <Image src={imageUrl ?? ''} width={68} height={68} withLoader={false} alt=\"Puzzle\" />\n\n            <Styled.Title $renderAs=\"ab3\" $align=\"center\" $width=\"80%\">\n              {title}\n            </Styled.Title>\n          </FlexView>\n\n          {puzzleStickerLottie && (\n            <Styled.StickerWrapper $widthX={2.5} $heightX={2.5}>\n              <LottieAnimation\n                src={puzzleStickerLottie}\n                ref={lottieAnimationRef}\n                settings={puzzleStickerLottieSettings}\n              />\n            </Styled.StickerWrapper>\n          )}\n        </Styled.PuzzleWrapper>\n      </Clickable>\n    );\n  },\n);\n\nexport default PuzzleCard;\n"],"names":["puzzleStickerLottieSettings","PuzzleCard","memo","imageHue","imageUrl","title","height","width","onCardClick","userNodeId","rewards","studentId","nodeId","sticker","lottieAnimationRef","useRef","analyticsProps","useMemo","puzzleStickerLottie","getPuzzleStickerLottie","handleCardClick","useCallback","handleOnMouseEnter","_a","handleOnMouseLeave","jsx","Clickable","PUZZLE_ANALYTICS_EVENTS","jsxs","Styled.PuzzleWrapper","FlexView","Image","Styled.Title","Styled.StickerWrapper","LottieAnimation"],"mappings":";;;;;;;;;AAcA,MAAMA,IAA8B;AAAA,EAClC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAmCC;AAAA,EACvC,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,SAAAC,EAAQ,KAAIH,KAAA,gBAAAA,EAAU,OAAM,CAAA,GAE9BI,IAAqBC,EAAmC,IAAI,GAE5DC,IAAiBC;AAAA,MACrB,OAAO;AAAA,QACL,SAASL;AAAA,QACT,YAAYD;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,MAEb,CAACC,GAAQD,CAAS;AAAA,IAAA,GAGdO,IAAsBL,IAAUM,EAAuBN,CAAO,IAAI,QAElEO,IAAkBC,EAAY,MAAM;AACxC,MAAIZ,MACFD,KAAA,QAAAA,EAAcC;AAAA,IAChB,GACC,CAACD,GAAaC,CAAU,CAAC,GAEtBa,IAAqBD,EAAY,MAAM;;AACvC,MAAAH,OAAwCK,IAAAT,EAAA,YAAA,QAAAS,EAAS;AAAA,IAAK,GACzD,CAACL,CAAmB,CAAC,GAElBM,IAAqBH,EAAY,MAAM;;AACvC,MAAAH,OAAwCK,IAAAT,EAAA,YAAA,QAAAS,EAAS;AAAA,IAAK,GACzD,CAACL,CAAmB,CAAC;AAGtB,WAAA,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,gBAAgBC,EAAwB;AAAA,QACxC,gBAAAX;AAAA,QACA,SAASI;AAAA,QAET,UAAA,gBAAAQ;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,QAAQtB;AAAA,YACR,SAASD;AAAA,YACT,iBAAgB;AAAA,YAChB,aAAY;AAAA,YACZ,WAAWH;AAAA,YACX,aAAa,GAAGA,CAAQ;AAAA,YACxB,cAAcmB;AAAA,YACd,cAAcE;AAAA,YAEd,UAAA;AAAA,cAAA,gBAAAI,EAACE,KAAS,iBAAgB,UAAS,aAAY,UAAS,UAAU,IAChE,UAAA;AAAA,gBAAC,gBAAAL,EAAAM,GAAA,EAAM,KAAK3B,KAAY,IAAI,OAAO,IAAI,QAAQ,IAAI,YAAY,IAAO,KAAI,SAAS,CAAA;AAAA,gBAEnF,gBAAAqB,EAACO,GAAA,EAAa,WAAU,OAAM,QAAO,UAAS,QAAO,OAClD,UACH3B,EAAA,CAAA;AAAA,cAAA,GACF;AAAA,cAECa,uBACEe,GAAA,EAAsB,SAAS,KAAK,UAAU,KAC7C,UAAA,gBAAAR;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACC,KAAKhB;AAAA,kBACL,KAAKJ;AAAA,kBACL,UAAUd;AAAA,gBAAA;AAAA,cAAA,GAEd;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"puzzle-card.js","sources":["../../../../src/features/puzzles/comps/puzzle-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\nimport type { IPuzzleCardProps } from './puzzle-card-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useMemo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { PUZZLE_ANALYTICS_EVENTS } from '../puzzle-analytics-events';\nimport { getPuzzleStickerLottie } from '../utils/puzzle-feedback-celebration';\nimport * as Styled from './puzzle-card-styled';\n\nconst puzzleStickerLottieSettings = {\n  autoplay: false,\n  loop: true,\n  renderer: 'canvas',\n};\n\nconst PuzzleCard: FC<IPuzzleCardProps> = memo(\n  ({\n    imageHue,\n    imageUrl,\n    title,\n    height = '100%',\n    width = '100%',\n    onCardClick,\n    userNodeId,\n    rewards,\n    studentId,\n    nodeId,\n    disabled = false,\n  }) => {\n    const { sticker } = rewards?.[0] || {};\n\n    const lottieAnimationRef = useRef<ILottieAnimationRef | null>(null);\n\n    const analyticsProps = useMemo(\n      () => ({\n        node_id: nodeId,\n        student_id: studentId,\n        node_type: 'PUZZLE_CARD',\n      }),\n      [nodeId, studentId],\n    );\n\n    const puzzleStickerLottie = sticker ? getPuzzleStickerLottie(sticker) : undefined;\n\n    const handleCardClick = useCallback(() => {\n      if (userNodeId) {\n        onCardClick?.(userNodeId);\n      }\n    }, [onCardClick, userNodeId]);\n\n    const handleOnMouseEnter = useCallback(() => {\n      if (puzzleStickerLottie) lottieAnimationRef.current?.play();\n    }, [puzzleStickerLottie]);\n\n    const handleOnMouseLeave = useCallback(() => {\n      if (puzzleStickerLottie) lottieAnimationRef.current?.stop();\n    }, [puzzleStickerLottie]);\n\n    return (\n      <Clickable\n        label=\"\"\n        analyticsLabel={PUZZLE_ANALYTICS_EVENTS.PUZZLE_VIEWED}\n        analyticsProps={analyticsProps}\n        onClick={handleCardClick}\n      >\n        <Styled.PuzzleWrapper\n          $width={width}\n          $height={height}\n          $justifyContent=\"center\"\n          $alignItems=\"center\"\n          $imageHue={imageHue}\n          $background={`${imageHue}_2`}\n          $disabled={disabled}\n          onMouseEnter={handleOnMouseEnter}\n          onMouseLeave={handleOnMouseLeave}\n        >\n          <FlexView $justifyContent=\"center\" $alignItems=\"center\" $flexGap={12}>\n            <Image src={imageUrl ?? ''} width={68} height={68} withLoader={false} alt=\"Puzzle\" />\n\n            <Styled.Title $renderAs=\"ab3\" $align=\"center\" $width=\"80%\">\n              {title}\n            </Styled.Title>\n          </FlexView>\n\n          {puzzleStickerLottie && (\n            <Styled.StickerWrapper $widthX={2.5} $heightX={2.5}>\n              <LottieAnimation\n                src={puzzleStickerLottie}\n                ref={lottieAnimationRef}\n                settings={puzzleStickerLottieSettings}\n              />\n            </Styled.StickerWrapper>\n          )}\n        </Styled.PuzzleWrapper>\n      </Clickable>\n    );\n  },\n);\n\nexport default PuzzleCard;\n"],"names":["puzzleStickerLottieSettings","PuzzleCard","memo","imageHue","imageUrl","title","height","width","onCardClick","userNodeId","rewards","studentId","nodeId","disabled","sticker","lottieAnimationRef","useRef","analyticsProps","useMemo","puzzleStickerLottie","getPuzzleStickerLottie","handleCardClick","useCallback","handleOnMouseEnter","_a","handleOnMouseLeave","jsx","Clickable","PUZZLE_ANALYTICS_EVENTS","jsxs","Styled.PuzzleWrapper","FlexView","Image","Styled.Title","Styled.StickerWrapper","LottieAnimation"],"mappings":";;;;;;;;;AAcA,MAAMA,IAA8B;AAAA,EAClC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAmCC;AAAA,EACvC,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,EAAA,MACP;AACJ,UAAM,EAAE,SAAAC,EAAQ,KAAIJ,KAAA,gBAAAA,EAAU,OAAM,CAAA,GAE9BK,IAAqBC,EAAmC,IAAI,GAE5DC,IAAiBC;AAAA,MACrB,OAAO;AAAA,QACL,SAASN;AAAA,QACT,YAAYD;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,MAEb,CAACC,GAAQD,CAAS;AAAA,IAAA,GAGdQ,IAAsBL,IAAUM,EAAuBN,CAAO,IAAI,QAElEO,IAAkBC,EAAY,MAAM;AACxC,MAAIb,MACFD,KAAA,QAAAA,EAAcC;AAAA,IAChB,GACC,CAACD,GAAaC,CAAU,CAAC,GAEtBc,IAAqBD,EAAY,MAAM;;AACvC,MAAAH,OAAwCK,IAAAT,EAAA,YAAA,QAAAS,EAAS;AAAA,IAAK,GACzD,CAACL,CAAmB,CAAC,GAElBM,IAAqBH,EAAY,MAAM;;AACvC,MAAAH,OAAwCK,IAAAT,EAAA,YAAA,QAAAS,EAAS;AAAA,IAAK,GACzD,CAACL,CAAmB,CAAC;AAGtB,WAAA,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,gBAAgBC,EAAwB;AAAA,QACxC,gBAAAX;AAAA,QACA,SAASI;AAAA,QAET,UAAA,gBAAAQ;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,QAAQvB;AAAA,YACR,SAASD;AAAA,YACT,iBAAgB;AAAA,YAChB,aAAY;AAAA,YACZ,WAAWH;AAAA,YACX,aAAa,GAAGA,CAAQ;AAAA,YACxB,WAAWU;AAAA,YACX,cAAcU;AAAA,YACd,cAAcE;AAAA,YAEd,UAAA;AAAA,cAAA,gBAAAI,EAACE,KAAS,iBAAgB,UAAS,aAAY,UAAS,UAAU,IAChE,UAAA;AAAA,gBAAC,gBAAAL,EAAAM,GAAA,EAAM,KAAK5B,KAAY,IAAI,OAAO,IAAI,QAAQ,IAAI,YAAY,IAAO,KAAI,SAAS,CAAA;AAAA,gBAEnF,gBAAAsB,EAACO,GAAA,EAAa,WAAU,OAAM,QAAO,UAAS,QAAO,OAClD,UACH5B,EAAA,CAAA;AAAA,cAAA,GACF;AAAA,cAECc,uBACEe,GAAA,EAAsB,SAAS,KAAK,UAAU,KAC7C,UAAA,gBAAAR;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACC,KAAKhB;AAAA,kBACL,KAAKJ;AAAA,kBACL,UAAUf;AAAA,gBAAA;AAAA,cAAA,GAEd;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/features/trial-session/comps/learning-plan/index.js

@@ -1,8 +1,8 @@
 import { jsx as t, jsxs as N, Fragment as O } from "react/jsx-runtime";
 import w from "../../../../node_modules/lodash.throttle/index.js";
 import { useRef as g, useCallback as i, useMemo as F, useEffect as u } from "react";
-import j from "../../../chapters-v2/chapter-details/chapter-details.js";
-import { useGetChapterData as G } from "../../../chapters/api/chapter.js";
+import { useGetChapterDetails as j } from "../../../chapters-v2/api/chapter.js";
+import G from "../../../chapters-v2/chapter-details/chapter-details.js";
 import H from "../../../milestone/milestone-list-container/milestone-list-container.js";
 import M from "../../../ui/buttons/button/button.js";
 import X from "../../../ui/layout/flex-view.js";
@@ -24,7 +24,7 @@ const ae = () => {
     isProcessing: R,
     isProcessingFailed: $,
     error: f
-  } = G(), C = i(() => {
+  } = j(), C = i(() => {
     c && n && P(c, void 0, {
       studentId: n
     }).then(() => {
@@ -100,7 +100,7 @@ const ae = () => {
       $isScrollable: r,
       id: "milestone-list-element-container",
       children: c && m ? /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t(
-        j,
+        G,
         {
           userChapterId: m.id,
           studentId: n,

package/dist/features/trial-session/comps/learning-plan/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/features/trial-session/comps/learning-plan/index.tsx"],"sourcesContent":["import type { IChapterDataProps } from '../../../chapters/chapter/chapter-types';\n\nimport throttle from 'lodash.throttle';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport ChapterDetails from '../../../chapters-v2/chapter-details/chapter-details';\nimport { useGetChapterData } from '../../../chapters/api/chapter';\nimport MilestoneList from '../../../milestone/milestone-list-container/milestone-list-container';\nimport Button from '../../../ui/buttons/button/button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport AppLoader from '../../../ui/loader/app-loader/app-loader';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport * as Styled from './learning-plan-styled';\nimport { useLearningPlanScrollSync } from './use-learning-plan-scroll-sync';\n\nconst LearningPlan: React.FC = () => {\n  const { trialHomeData, studentId, formData, isTeacher, updateSlideConfig } =\n    useTrialSessionContext();\n  const {\n    demo_info: { student_classroom_id: studentClassroomId, stream },\n  } = trialHomeData || {};\n  const { name = '', chapterId } = formData || {};\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollPointsRef = useRef<number[]>([]);\n  const isSendingScrollPointsRef = useRef(false);\n\n  const {\n    publishScrollEvents,\n    closeChannel,\n    scrollPoints: receivedScrollPoints,\n  } = useLearningPlanScrollSync(studentClassroomId);\n\n  const {\n    get: getChapterData,\n    data: chapterData,\n    isProcessing,\n    isProcessingFailed,\n    error,\n  } = useGetChapterData();\n\n  const fetchChapter = useCallback(() => {\n    if (chapterId && studentId) {\n      getChapterData(chapterId, undefined, {\n        studentId,\n      }).then(() => {\n        const scrollElement = containerRef.current;\n\n        scrollElement?.scrollTo({\n          top: 0,\n          behavior: 'smooth',\n        });\n      });\n    }\n  }, [getChapterData, studentId, chapterId]);\n\n  const handleOnChapterClick = useCallback(\n    (chapter: IChapterDataProps) => {\n      updateSlideConfig({\n        chapterId: chapter.id,\n      });\n    },\n    [updateSlideConfig],\n  );\n\n  const handleOnBackIconClick = useCallback(() => {\n    updateSlideConfig({\n      chapterId: undefined,\n    });\n  }, [updateSlideConfig]);\n\n  const sendScrollPoints = useCallback(() => {\n    if (scrollPointsRef.current.length === 0 || isSendingScrollPointsRef.current) return;\n\n    isSendingScrollPointsRef.current = true;\n\n    if (publishScrollEvents) {\n      publishScrollEvents({\n        eventName: 'TRIAL_SESSION_GOAL_PLAN_SCROLL',\n        eventPayload: {\n          scrollPoints: scrollPointsRef.current,\n        },\n      });\n    }\n\n    scrollPointsRef.current = [];\n    isSendingScrollPointsRef.current = false;\n  }, [publishScrollEvents]);\n\n  const throttleSend = useMemo(() => throttle(sendScrollPoints, 500), [sendScrollPoints]);\n\n  const handleScroll = useCallback(() => {\n    const scrollPoint = containerRef.current?.scrollTop || 0;\n\n    scrollPointsRef.current.push(scrollPoint);\n\n    throttleSend();\n  }, [throttleSend]);\n\n  useEffect(() => {\n    fetchChapter();\n  }, [fetchChapter]);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      if ((chapterData && isTeacher) || isTeacher) {\n        const scrollElement = containerRef.current;\n\n        scrollElement.addEventListener('scroll', handleScroll);\n\n        return () => {\n          if (scrollElement) {\n            scrollElement.removeEventListener('scroll', handleScroll);\n          }\n        };\n      }\n    }\n  }, [isTeacher, chapterData, handleScroll]);\n\n  useEffect(() => {\n    const scrollElement = containerRef.current;\n\n    if (\n      receivedScrollPoints &&\n      Array.isArray(receivedScrollPoints) &&\n      !isTeacher &&\n      scrollElement\n    ) {\n      const averageScroll = Math.floor(\n        receivedScrollPoints.reduce((a, b) => a + b, 0) / receivedScrollPoints.length,\n      );\n\n      scrollElement.scrollTo({\n        top: averageScroll,\n        behavior: 'smooth',\n      });\n    }\n  }, [receivedScrollPoints, isTeacher]);\n\n  useEffect(() => {\n    return () => {\n      closeChannel();\n    };\n  }, [closeChannel]);\n\n  if (isProcessing) {\n    return <AppLoader height=\"100%\" />;\n  }\n\n  if (isProcessingFailed) {\n    return (\n      <FlexView $height=\"100%\" $flexGapX={1.5} $alignItems=\"center\" $justifyContent=\"center\">\n        <Text $renderAs=\"h6\">{error?.message || 'Oops! Something went wrong.'}</Text>\n        <Button\n          widthX={14}\n          size=\"small\"\n          shape=\"square\"\n          renderAs=\"primary\"\n          label=\"Try again\"\n          onClick={fetchChapter}\n        />\n      </FlexView>\n    );\n  }\n\n  return (\n    <Styled.Container ref={containerRef} $isScrollable={isTeacher}>\n      <Styled.Wrapper\n        $clickable={isTeacher}\n        $gutterX={2}\n        $isScrollable={isTeacher}\n        id=\"milestone-list-element-container\"\n      >\n        {chapterId && chapterData ? (\n          <>\n            <Styled.ChapterWrapper>\n              <ChapterDetails\n                userChapterId={chapterData.id}\n                studentId={studentId}\n                userType={isTeacher ? 'TEACHER' : 'STUDENT'}\n                onExit={handleOnBackIconClick}\n              />\n            </Styled.ChapterWrapper>\n          </>\n        ) : (\n          <MilestoneList\n            userType={isTeacher ? 'TEACHER' : 'STUDENT'}\n            studentName={name}\n            studentId={studentId}\n            studentClassroomId={studentClassroomId}\n            milestoneType=\"DRAFT\"\n            onChapterClick={handleOnChapterClick}\n            courseStream={stream}\n            isTrialSession\n          />\n        )}\n      </Styled.Wrapper>\n    </Styled.Container>\n  );\n};\n\nexport default LearningPlan;\n"],"names":["LearningPlan","trialHomeData","studentId","formData","isTeacher","updateSlideConfig","useTrialSessionContext","studentClassroomId","stream","name","chapterId","containerRef","useRef","scrollPointsRef","isSendingScrollPointsRef","publishScrollEvents","closeChannel","receivedScrollPoints","useLearningPlanScrollSync","getChapterData","chapterData","isProcessing","isProcessingFailed","error","useGetChapterData","fetchChapter","useCallback","scrollElement","handleOnChapterClick","chapter","handleOnBackIconClick","sendScrollPoints","throttleSend","useMemo","throttle","handleScroll","scrollPoint","_a","useEffect","averageScroll","a","b","jsx","AppLoader","jsxs","FlexView","Text","Button","Styled.Container","Styled.Wrapper","Fragment","Styled.ChapterWrapper","ChapterDetails","MilestoneList"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/features/trial-session/comps/learning-plan/index.tsx"],"sourcesContent":["import type { IChapterDataProps } from '../../../chapters/chapter/chapter-types';\n\nimport throttle from 'lodash.throttle';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { useGetChapterDetails } from '../../../chapters-v2/api/chapter';\nimport ChapterDetails from '../../../chapters-v2/chapter-details/chapter-details';\nimport MilestoneList from '../../../milestone/milestone-list-container/milestone-list-container';\nimport Button from '../../../ui/buttons/button/button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport AppLoader from '../../../ui/loader/app-loader/app-loader';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport * as Styled from './learning-plan-styled';\nimport { useLearningPlanScrollSync } from './use-learning-plan-scroll-sync';\n\nconst LearningPlan: React.FC = () => {\n  const { trialHomeData, studentId, formData, isTeacher, updateSlideConfig } =\n    useTrialSessionContext();\n  const {\n    demo_info: { student_classroom_id: studentClassroomId, stream },\n  } = trialHomeData || {};\n  const { name = '', chapterId } = formData || {};\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollPointsRef = useRef<number[]>([]);\n  const isSendingScrollPointsRef = useRef(false);\n\n  const {\n    publishScrollEvents,\n    closeChannel,\n    scrollPoints: receivedScrollPoints,\n  } = useLearningPlanScrollSync(studentClassroomId);\n\n  const {\n    get: getChapterData,\n    data: chapterData,\n    isProcessing,\n    isProcessingFailed,\n    error,\n  } = useGetChapterDetails();\n\n  const fetchChapter = useCallback(() => {\n    if (chapterId && studentId) {\n      getChapterData(chapterId, undefined, {\n        studentId,\n      }).then(() => {\n        const scrollElement = containerRef.current;\n\n        scrollElement?.scrollTo({\n          top: 0,\n          behavior: 'smooth',\n        });\n      });\n    }\n  }, [getChapterData, studentId, chapterId]);\n\n  const handleOnChapterClick = useCallback(\n    (chapter: IChapterDataProps) => {\n      updateSlideConfig({\n        chapterId: chapter.id,\n      });\n    },\n    [updateSlideConfig],\n  );\n\n  const handleOnBackIconClick = useCallback(() => {\n    updateSlideConfig({\n      chapterId: undefined,\n    });\n  }, [updateSlideConfig]);\n\n  const sendScrollPoints = useCallback(() => {\n    if (scrollPointsRef.current.length === 0 || isSendingScrollPointsRef.current) return;\n\n    isSendingScrollPointsRef.current = true;\n\n    if (publishScrollEvents) {\n      publishScrollEvents({\n        eventName: 'TRIAL_SESSION_GOAL_PLAN_SCROLL',\n        eventPayload: {\n          scrollPoints: scrollPointsRef.current,\n        },\n      });\n    }\n\n    scrollPointsRef.current = [];\n    isSendingScrollPointsRef.current = false;\n  }, [publishScrollEvents]);\n\n  const throttleSend = useMemo(() => throttle(sendScrollPoints, 500), [sendScrollPoints]);\n\n  const handleScroll = useCallback(() => {\n    const scrollPoint = containerRef.current?.scrollTop || 0;\n\n    scrollPointsRef.current.push(scrollPoint);\n\n    throttleSend();\n  }, [throttleSend]);\n\n  useEffect(() => {\n    fetchChapter();\n  }, [fetchChapter]);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      if ((chapterData && isTeacher) || isTeacher) {\n        const scrollElement = containerRef.current;\n\n        scrollElement.addEventListener('scroll', handleScroll);\n\n        return () => {\n          if (scrollElement) {\n            scrollElement.removeEventListener('scroll', handleScroll);\n          }\n        };\n      }\n    }\n  }, [isTeacher, chapterData, handleScroll]);\n\n  useEffect(() => {\n    const scrollElement = containerRef.current;\n\n    if (\n      receivedScrollPoints &&\n      Array.isArray(receivedScrollPoints) &&\n      !isTeacher &&\n      scrollElement\n    ) {\n      const averageScroll = Math.floor(\n        receivedScrollPoints.reduce((a, b) => a + b, 0) / receivedScrollPoints.length,\n      );\n\n      scrollElement.scrollTo({\n        top: averageScroll,\n        behavior: 'smooth',\n      });\n    }\n  }, [receivedScrollPoints, isTeacher]);\n\n  useEffect(() => {\n    return () => {\n      closeChannel();\n    };\n  }, [closeChannel]);\n\n  if (isProcessing) {\n    return <AppLoader height=\"100%\" />;\n  }\n\n  if (isProcessingFailed) {\n    return (\n      <FlexView $height=\"100%\" $flexGapX={1.5} $alignItems=\"center\" $justifyContent=\"center\">\n        <Text $renderAs=\"h6\">{error?.message || 'Oops! Something went wrong.'}</Text>\n        <Button\n          widthX={14}\n          size=\"small\"\n          shape=\"square\"\n          renderAs=\"primary\"\n          label=\"Try again\"\n          onClick={fetchChapter}\n        />\n      </FlexView>\n    );\n  }\n\n  return (\n    <Styled.Container ref={containerRef} $isScrollable={isTeacher}>\n      <Styled.Wrapper\n        $clickable={isTeacher}\n        $gutterX={2}\n        $isScrollable={isTeacher}\n        id=\"milestone-list-element-container\"\n      >\n        {chapterId && chapterData ? (\n          <>\n            <Styled.ChapterWrapper>\n              <ChapterDetails\n                userChapterId={chapterData.id}\n                studentId={studentId}\n                userType={isTeacher ? 'TEACHER' : 'STUDENT'}\n                onExit={handleOnBackIconClick}\n              />\n            </Styled.ChapterWrapper>\n          </>\n        ) : (\n          <MilestoneList\n            userType={isTeacher ? 'TEACHER' : 'STUDENT'}\n            studentName={name}\n            studentId={studentId}\n            studentClassroomId={studentClassroomId}\n            milestoneType=\"DRAFT\"\n            onChapterClick={handleOnChapterClick}\n            courseStream={stream}\n            isTrialSession\n          />\n        )}\n      </Styled.Wrapper>\n    </Styled.Container>\n  );\n};\n\nexport default LearningPlan;\n"],"names":["LearningPlan","trialHomeData","studentId","formData","isTeacher","updateSlideConfig","useTrialSessionContext","studentClassroomId","stream","name","chapterId","containerRef","useRef","scrollPointsRef","isSendingScrollPointsRef","publishScrollEvents","closeChannel","receivedScrollPoints","useLearningPlanScrollSync","getChapterData","chapterData","isProcessing","isProcessingFailed","error","useGetChapterDetails","fetchChapter","useCallback","scrollElement","handleOnChapterClick","chapter","handleOnBackIconClick","sendScrollPoints","throttleSend","useMemo","throttle","handleScroll","scrollPoint","_a","useEffect","averageScroll","a","b","jsx","AppLoader","jsxs","FlexView","Text","Button","Styled.Container","Styled.Wrapper","Fragment","Styled.ChapterWrapper","ChapterDetails","MilestoneList"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.2.31",
+  "version": "3.2.32",
   "type": "module",
   "files": [
     "dist"
@@ -96,5 +96,6 @@
     "vite-plugin-dts": "3.6.4",
     "vite-plugin-svgr": "3.2.0",
     "vite-tsconfig-paths": "^4.2.2"
-  }
+  },
+  "packageManager": "yarn@4.4.1"
 }

package/dist/features/chapters/api/chapter.js

@@ -1,10 +0,0 @@
-import { createGetAPI as r } from "@cuemath/rest-api";
-import { BASE_URL_V3 as a } from "../../../constants/api.js";
-const { useGet: p, invalidate: m } = r({
-  getURL: (e, s, { studentId: t }) => `${a}/users/${t}/user-chapters/${e} `
-});
-export {
-  m as invalidateGetChapter,
-  p as useGetChapterData
-};
-//# sourceMappingURL=chapter.js.map

package/dist/features/chapters/api/chapter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chapter.js","sources":["../../../../src/features/chapters/api/chapter.ts"],"sourcesContent":["import type { IChapterDataProps } from '../chapter/chapter-types';\n\nimport { createGetAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL_V3 } from '../../../constants/api';\n\nconst { useGet: useGetChapterData, invalidate: invalidateGetChapter } = createGetAPI<\n  IChapterDataProps,\n  void,\n  { studentId: string }\n>({\n  getURL: (userChapterId: string, _, { studentId }) =>\n    `${BASE_URL_V3}/users/${studentId}/user-chapters/${userChapterId} `,\n});\n\nexport { useGetChapterData, invalidateGetChapter };\n"],"names":["useGetChapterData","invalidateGetChapter","createGetAPI","userChapterId","_","studentId","BASE_URL_V3"],"mappings":";;AAMA,MAAM,EAAE,QAAQA,GAAmB,YAAYC,EAAA,IAAyBC,EAItE;AAAA,EACA,QAAQ,CAACC,GAAuBC,GAAG,EAAE,WAAAC,EAAA,MACnC,GAAGC,CAAW,UAAUD,CAAS,kBAAkBF,CAAa;AACpE,CAAC;"}