@cuemath/leap 2.8.61-as10 → 2.8.61-as12

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

@@ -1,181 +1,188 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { memo as ne, useRef as y, useState as oe, useLayoutEffect as ce, useCallback as E } from "react";
-import M from "../../assets/line-icons/icons/eye2.js";
-import ae from "../../assets/line-icons/icons/more-vertical.js";
-import se from "../../assets/line-icons/icons/redo.js";
-import le from "../chapters-v2/comps/node-card/node-card-tags.js";
-import { getNodeTypeBasedBgImage as de } from "../chapters-v2/utils/index.js";
-import { getNodeCardBasedIcon as ue } from "../chapters-v2/utils/node-card-utils.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { memo as de, useState as B, useRef as I, useLayoutEffect as ue, useCallback as s } from "react";
+import V from "../../assets/line-icons/icons/eye2.js";
+import he from "../../assets/line-icons/icons/more-vertical.js";
+import me from "../../assets/line-icons/icons/redo.js";
+import fe from "../chapters-v2/comps/node-card/node-card-tags.js";
+import { getNodeTypeBasedBgImage as pe } from "../chapters-v2/utils/index.js";
+import { getNodeCardBasedIcon as $e } from "../chapters-v2/utils/node-card-utils.js";
 import j from "../ui/arrow-tooltip/arrow-tooltip.js";
-import he from "../ui/buttons/clickable/clickable.js";
+import we from "../ui/buttons/clickable/clickable.js";
 import G from "../ui/hooks/use-context-menu-click-handler.js";
 import o from "../ui/layout/flex-view.js";
-import I from "../ui/text/text.js";
+import be from "../ui/lottie-animation/lottie-animation.js";
+import y from "../ui/text/text.js";
 import K from "./card-menu-options.js";
-import me from "./node-progress.js";
-import { CardContainer as fe, CardWrapper as pe, IconWrapper as $e, BannerImageWrapper as we, BannerImage as be, HeaderText as ge, SubHeaderText as Ce, MenuWrapper as ke, CardKebabMenuWrapper as _e, StyledMinus2Icon as Te } from "./styles.js";
-const ye = ({
-  header: x,
+import ge from "./node-progress.js";
+import { CardContainer as Ce, CardWrapper as ke, IconWrapper as _e, BannerImageWrapper as Te, BannerImage as Ee, HeaderText as Ie, SubHeaderText as ye, MenuWrapper as ve, CardKebabMenuWrapper as xe, StyledMinus2Icon as Re } from "./styles.js";
+const Ae = ({
+  header: v,
   nodeData: r,
-  subHeader: L,
+  subHeader: z,
   userType: P,
   userMilestoneId: t,
-  onNodeUnassign: s,
-  onNodeReattempt: l,
-  onNodeView: m,
-  onNodeReview: i,
-  onNodeAttempt: f,
-  renderAs: z,
-  shouldOpenOnRight: F
+  onNodeUnassign: l,
+  onNodeReattempt: d,
+  onNodeView: f,
+  onNodeReview: n,
+  onNodeAttempt: p,
+  renderAs: F,
+  shouldOpenOnRight: Y
 }) => {
-  const c = z === "homework", {
-    node_type: d,
-    state: Y,
-    accuracy: q,
-    due_date_ts: p,
-    image_url: v,
-    image_hue: H,
-    card_header: J = "",
-    permissions: Q,
-    user_node_id: u,
-    unlocked_on_ts: R,
-    user_milestone_id: $
-  } = r, Z = de(d), A = ue(d), w = y(null), b = y(null), a = y(null), { menuVisible: O, onMenuClick: U } = G(w), { menuVisible: D, onMenuClick: S } = G(b), [N, ee] = oe(!1), {
-    can_start: W,
-    can_resume: X,
-    can_review: g,
-    can_teacher_review: B,
-    can_unassign: re,
-    can_reset: C
-  } = Q, k = P === "STUDENT";
-  ce(() => {
-    a.current && a.current.scrollHeight > a.current.clientHeight && ee(!0);
+  const c = F === "homework", {
+    node_type: u,
+    state: q,
+    accuracy: J,
+    due_date_ts: $,
+    image_url: x,
+    image_hue: R,
+    card_header: Q = "",
+    permissions: Z,
+    user_node_id: h,
+    unlocked_on_ts: A,
+    user_milestone_id: w
+  } = r, [U, H] = B(!1), D = pe(u), { icon: N, lottie: ee } = $e(u), b = I(null), g = I(null), a = I(null), { menuVisible: O, onMenuClick: re } = G(b), { menuVisible: te, onMenuClick: M } = G(g), [ne, ie] = B(!1), {
+    can_start: S,
+    can_resume: W,
+    can_review: C,
+    can_teacher_review: X,
+    can_unassign: oe,
+    can_reset: k
+  } = Z, _ = P === "STUDENT";
+  ue(() => {
+    a.current && a.current.scrollHeight > a.current.clientHeight && ie(!0);
   }, [a]);
-  const _ = E(() => {
-    if (W || X) {
-      if (typeof f != "function")
+  const T = s(() => {
+    if (S || W) {
+      if (typeof p != "function")
         throw new Error("onNodeAttempt must be a function");
-      f(r);
+      p(r);
       return;
     }
-    if (C && !c) {
-      S();
+    if (k && !c) {
+      M();
       return;
     }
-    if (g) {
-      if (typeof i != "function")
+    if (C) {
+      if (typeof n != "function")
         throw new Error("onReview must be a function");
-      if (!u)
+      if (!h)
         throw new Error("user node id must be present to review the sheet");
-      i(r, t);
+      n(r, t);
       return;
     }
   }, [
+    S,
     W,
-    X,
-    C,
+    k,
     c,
-    g,
-    f,
+    C,
+    p,
     r,
-    S,
-    i,
-    u,
+    M,
+    n,
+    h,
     t
-  ]), T = E(() => {
-    if (B) {
-      if (typeof i != "function")
+  ]), E = s(() => {
+    if (X) {
+      if (typeof n != "function")
         throw new Error("onNodeReview must be a function");
-      if (!u)
+      if (!h)
         throw new Error("user node id must be present to review the sheet");
-      i(r, t || $);
+      n(r, t || w);
       return;
     }
-    if (typeof m != "function")
+    if (typeof f != "function")
       throw new Error("onNodeView must be a function");
-    m(r, t || $);
+    f(r, t || w);
   }, [
-    B,
+    X,
     t,
     r,
-    i,
-    $,
-    m,
-    u
-  ]), h = E(
-    (V) => {
-      switch (V) {
+    n,
+    w,
+    f,
+    h
+  ]), m = s(
+    (L) => {
+      switch (L) {
         case "teacher-card-view":
-          T();
+          E();
           return;
         case "student-card-click":
-          _();
+          T();
           return;
         case "teacher-card-unassign":
-          s == null || s(r, t);
+          l == null || l(r, t);
           return;
         case "student-card-reattempt":
-          l == null || l(r, t);
+          d == null || d(r, t);
           return;
         default:
-          throw new Error(`No callback function for ${V}`);
+          throw new Error(`No callback function for ${L}`);
       }
     },
-    [r, l, s, _, T, t]
-  ), te = [
+    [r, d, l, T, E, t]
+  ), ce = s(() => {
+    H(!0);
+  }, []), ae = s(() => {
+    H(!1);
+  }, []), se = [
     {
       id: "teacher-card-view",
       label: "View",
-      icon: M,
+      icon: V,
       disabled: !1,
-      onClick: h
+      onClick: m
     },
     {
       id: "teacher-card-unassign",
       label: "Unassign",
-      icon: Te,
-      disabled: c ? !1 : !re,
-      onClick: h
+      icon: Re,
+      disabled: c ? !1 : !oe,
+      onClick: m
     }
-  ], ie = [
+  ], le = [
     {
       id: "student-card-click",
       label: "Review",
-      icon: M,
-      disabled: !g,
-      onClick: h
+      icon: V,
+      disabled: !C,
+      onClick: m
     },
     {
       id: "student-card-reattempt",
       label: "Reattempt",
-      icon: se,
-      disabled: !C,
-      onClick: h
+      icon: me,
+      disabled: !k,
+      onClick: m
     }
   ];
-  return /* @__PURE__ */ n(fe, { $position: "relative", $width: "fit-content", children: [
-    /* @__PURE__ */ e(he, { onClick: k ? _ : T, label: "homework-card", children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ i(Ce, { $position: "relative", $width: "fit-content", children: [
+    /* @__PURE__ */ e(we, { onClick: _ ? T : E, label: "homework-card", children: /* @__PURE__ */ i(
       o,
       {
-        ref: b,
+        ref: g,
         $widthX: 12.38,
         $position: "relative",
-        $background: `${H || "ORANGE"}_2`,
+        $background: `${R || "ORANGE"}_2`,
+        onMouseEnter: ce,
+        onMouseLeave: ae,
         children: [
-          /* @__PURE__ */ n(
-            pe,
+          /* @__PURE__ */ i(
+            ke,
             {
               $flexDirection: "row",
               $alignItems: "center",
               $width: "100%",
               $heightX: 3.5,
-              $bgImage: Z,
+              $bgImage: D,
               $gutterX: 0.78125,
               $flexGap: 8.5,
               $position: "relative",
               children: [
                 /* @__PURE__ */ e(
-                  $e,
+                  _e,
                   {
                     $width: 31,
                     $height: 31,
@@ -184,44 +191,45 @@ const ye = ({
                     $position: "relative",
                     $alignItems: "center",
                     $justifyContent: "center",
-                    children: A && /* @__PURE__ */ e(A, { width: 20, height: 20 })
+                    children: U ? /* @__PURE__ */ e(be, { src: ee }) : /* @__PURE__ */ e(N, { width: 20, height: 20 })
                   }
                 ),
-                d === "MASTERY" ? /* @__PURE__ */ n(o, { children: [
-                  /* @__PURE__ */ e(o, { $background: "BLACK_T_60", $width: "fit-content", $gutterX: 0.25, children: /* @__PURE__ */ e(I, { $color: "WHITE", $renderAs: "ac4-black", children: "Smart" }) }),
-                  /* @__PURE__ */ e(I, { $renderAs: "ac4-black", children: "Practice" })
-                ] }) : /* @__PURE__ */ e(I, { $renderAs: "ac4-black", children: J }),
-                !!v && /* @__PURE__ */ e(we, { children: /* @__PURE__ */ e(be, { src: v, alt: "Chapter image" }) })
+                u === "MASTERY" ? /* @__PURE__ */ i(o, { children: [
+                  /* @__PURE__ */ e(o, { $background: "BLACK_T_60", $width: "fit-content", $gutterX: 0.25, children: /* @__PURE__ */ e(y, { $color: "WHITE", $renderAs: "ac4-black", children: "Smart" }) }),
+                  /* @__PURE__ */ e(y, { $renderAs: "ac4-black", children: "Practice" })
+                ] }) : /* @__PURE__ */ e(y, { $renderAs: "ac4-black", children: Q }),
+                !!x && /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ e(Ee, { src: x, alt: "Chapter image" }) })
               ]
             }
           ),
           /* @__PURE__ */ e(
-            le,
+            fe,
             {
-              nodeType: d,
-              state: Y,
-              accuracy: q,
-              dueDateTs: p
+              nodeType: u,
+              state: q,
+              accuracy: J,
+              dueDateTs: $
             }
           ),
-          p && R && /* @__PURE__ */ e(
-            me,
+          $ && A && /* @__PURE__ */ e(
+            ge,
             {
-              dueDate: p * 1e3,
-              unlockedOn: R * 1e3,
-              progressBg: `${H || "ORANGE"}_4`
+              dueDate: $ * 1e3,
+              unlockedOn: A * 1e3,
+              progressBg: `${R || "ORANGE"}_4`
             }
           ),
-          /* @__PURE__ */ n(o, { $gutterX: 0.75, $gapX: 1, $flexRowGapX: 0.5, $background: "WHITE", children: [
+          /* @__PURE__ */ i(o, { $gutterX: 0.75, $gapX: 1, $flexRowGapX: 0.5, $background: "WHITE", children: [
             /* @__PURE__ */ e(
               j,
               {
                 renderAs: "primary",
                 position: "bottom",
-                tooltipItem: x,
-                hidden: !N,
+                tooltipItem: v,
+                hidden: !ne,
                 parentWidth: "auto",
-                children: /* @__PURE__ */ e(o, { $heightX: 2.5, children: /* @__PURE__ */ e(ge, { ref: a, $renderAs: "ab3", children: x }) })
+                zIndex: 2,
+                children: /* @__PURE__ */ e(o, { $heightX: 2.5, children: /* @__PURE__ */ e(Ie, { ref: a, $renderAs: "ab3", children: v }) })
               }
             ),
             /* @__PURE__ */ e(
@@ -231,24 +239,24 @@ const ye = ({
                 $heightX: 1.25,
                 $alignItems: "center",
                 $justifyContent: "space-between",
-                children: /* @__PURE__ */ e(Ce, { $renderAs: "ub3", $color: "BLACK_T_60", children: L })
+                children: /* @__PURE__ */ e(ye, { $renderAs: "ub3", $color: "BLACK_T_60", children: z })
               }
             )
           ] })
         ]
       }
     ) }),
-    k && !c && /* @__PURE__ */ e(
+    _ && !c && /* @__PURE__ */ e(
       K,
       {
         $width: 200,
-        options: ie,
-        triggerRef: b,
-        visible: D,
+        options: le,
+        triggerRef: g,
+        visible: te,
         shouldOpenOnRight: !1
       }
     ),
-    !k && /* @__PURE__ */ n(ke, { $position: "absolute", $width: "fit-content", $borderRadiusX: 2, children: [
+    !_ && /* @__PURE__ */ i(ve, { $position: "absolute", $width: "fit-content", $borderRadiusX: 2, children: [
       /* @__PURE__ */ e(
         j,
         {
@@ -259,13 +267,13 @@ const ye = ({
           parentWidth: "100%",
           hidden: !c || O,
           children: /* @__PURE__ */ e(
-            _e,
+            xe,
             {
               $alignItems: "center",
               $justifyContent: "center",
-              ref: w,
-              onClick: U,
-              children: /* @__PURE__ */ e(ae, { width: 16, height: 16 })
+              ref: b,
+              onClick: re,
+              children: /* @__PURE__ */ e(he, { width: 16, height: 16 })
             }
           )
         }
@@ -273,16 +281,16 @@ const ye = ({
       /* @__PURE__ */ e(
         K,
         {
-          options: te,
-          triggerRef: w,
+          options: se,
+          triggerRef: b,
           visible: O,
-          shouldOpenOnRight: F
+          shouldOpenOnRight: Y
         }
       )
     ] })
   ] });
-}, Ke = ne(ye);
+}, Je = de(Ae);
 export {
-  Ke as default
+  Je as default
 };
 //# sourceMappingURL=homework-card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"homework-card.js","sources":["../../../src/features/homework/homework-card.tsx"],"sourcesContent":["import type {\n  INodeCardCallbacks,\n  INodeDataProps,\n} from '../chapters-v2/comps/node-card/node-card-types';\nimport type { TUserTypes } from '../ui/types';\nimport type { IHomeworkData } from './hw-card-list/api/get-homeworks';\n\nimport { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport Eye2Icon from '../../assets/line-icons/icons/eye2';\nimport MoreVerticalIcon from '../../assets/line-icons/icons/more-vertical';\nimport RedoIcon from '../../assets/line-icons/icons/redo';\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 ArrowTooltip from '../ui/arrow-tooltip/arrow-tooltip';\nimport Clickable from '../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\nimport CardMenuOptions from './card-menu-options';\nimport NodeProgress from './node-progress';\nimport * as Styled from './styles';\n\ninterface IHomeworkCardProps extends INodeCardCallbacks {\n  header: string;\n  nodeData: INodeDataProps | IHomeworkData;\n  subHeader: string;\n  userType: TUserTypes;\n  userMilestoneId?: string;\n  renderAs: 'homework' | 'milestone';\n  shouldOpenOnRight: boolean;\n}\n\nconst HomeworkCard = ({\n  header,\n  nodeData,\n  subHeader,\n  userType,\n  userMilestoneId,\n  onNodeUnassign,\n  onNodeReattempt,\n  onNodeView,\n  onNodeReview,\n  onNodeAttempt,\n  renderAs,\n  shouldOpenOnRight,\n}: IHomeworkCardProps) => {\n  const isHomeWork = renderAs === 'homework';\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    permissions,\n    user_node_id: userNodeId,\n    unlocked_on_ts: unlockedOnTs,\n    user_milestone_id: milestoneId,\n  } = nodeData;\n  const bgImage = getNodeTypeBasedBgImage(nodeType);\n  const NodeCardIcon = getNodeCardBasedIcon(nodeType);\n  const teacherContainerRef = useRef<HTMLDivElement>(null);\n  const studentContainerRef = useRef<HTMLDivElement>(null);\n  const titleTextRef = useRef<HTMLDivElement>(null);\n  const { menuVisible: teacherMenuVisible, onMenuClick: onTeacherMenuClick } =\n    useContextMenuClickHandler(teacherContainerRef);\n  const { menuVisible: studentMenuVisible, onMenuClick: onStudentMenuClick } =\n    useContextMenuClickHandler(studentContainerRef);\n  const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n\n  const {\n    can_start: canStart,\n    can_resume: canResume,\n    can_review: canReview,\n    can_teacher_review: canTeacherReview,\n    can_unassign: canUnassign,\n    can_reset: canReset,\n  } = permissions;\n  const isStudent = userType === 'STUDENT';\n\n  useLayoutEffect(() => {\n    if (\n      titleTextRef.current &&\n      titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n    ) {\n      setShowTitleTooltip(true);\n    }\n  }, [titleTextRef]);\n\n  const onStudentView = useCallback(() => {\n    if (canStart || canResume) {\n      if (typeof onNodeAttempt !== 'function') {\n        throw new Error('onNodeAttempt must be a function');\n      }\n\n      onNodeAttempt(nodeData);\n\n      return;\n    }\n\n    if (canReset && !isHomeWork) {\n      onStudentMenuClick();\n\n      return;\n    }\n\n    if (canReview) {\n      if (typeof onNodeReview !== 'function') {\n        throw new Error('onReview must be a function');\n      }\n\n      if (!userNodeId) {\n        throw new Error('user node id must be present to review the sheet');\n      }\n      onNodeReview(nodeData, userMilestoneId);\n\n      return;\n    }\n  }, [\n    canStart,\n    canResume,\n    canReset,\n    isHomeWork,\n    canReview,\n    onNodeAttempt,\n    nodeData,\n    onStudentMenuClick,\n    onNodeReview,\n    userNodeId,\n    userMilestoneId,\n  ]);\n\n  const onTeacherView = useCallback(() => {\n    if (canTeacherReview) {\n      if (typeof onNodeReview !== 'function') {\n        throw new Error('onNodeReview must be a function');\n      }\n\n      if (!userNodeId) {\n        throw new Error('user node id must be present to review the sheet');\n      }\n\n      onNodeReview(nodeData, userMilestoneId || milestoneId);\n\n      return;\n    }\n\n    if (typeof onNodeView !== 'function') {\n      throw new Error('onNodeView must be a function');\n    }\n\n    onNodeView(nodeData, userMilestoneId || milestoneId);\n  }, [\n    canTeacherReview,\n    userMilestoneId,\n    nodeData,\n    onNodeReview,\n    milestoneId,\n    onNodeView,\n    userNodeId,\n  ]);\n\n  const handleOnMenuOptionClick = useCallback(\n    (optionId: string) => {\n      switch (optionId) {\n        case 'teacher-card-view':\n          onTeacherView();\n\n          return;\n        case 'student-card-click':\n          onStudentView();\n\n          return;\n        case 'teacher-card-unassign':\n          onNodeUnassign?.(nodeData, userMilestoneId);\n\n          return;\n        case 'student-card-reattempt':\n          onNodeReattempt?.(nodeData, userMilestoneId);\n\n          return;\n        default:\n          throw new Error(`No callback function for ${optionId}`);\n      }\n    },\n    [nodeData, onNodeReattempt, onNodeUnassign, onStudentView, onTeacherView, userMilestoneId],\n  );\n\n  const teacherOptions = [\n    {\n      id: 'teacher-card-view',\n      label: 'View',\n      icon: Eye2Icon,\n      disabled: false,\n      onClick: handleOnMenuOptionClick,\n    },\n    {\n      id: 'teacher-card-unassign',\n      label: 'Unassign',\n      icon: Styled.StyledMinus2Icon,\n      disabled: isHomeWork ? false : !canUnassign,\n      onClick: handleOnMenuOptionClick,\n    },\n  ];\n\n  const studentOptions = [\n    {\n      id: 'student-card-click',\n      label: 'Review',\n      icon: Eye2Icon,\n      disabled: !canReview,\n      onClick: handleOnMenuOptionClick,\n    },\n    {\n      id: 'student-card-reattempt',\n      label: 'Reattempt',\n      icon: RedoIcon,\n      disabled: !canReset,\n      onClick: handleOnMenuOptionClick,\n    },\n  ];\n\n  return (\n    <Styled.CardContainer $position=\"relative\" $width=\"fit-content\">\n      <Clickable onClick={isStudent ? onStudentView : onTeacherView} label=\"homework-card\">\n        <FlexView\n          ref={studentContainerRef}\n          $widthX={12.38}\n          $position=\"relative\"\n          $background={`${imageHue || 'ORANGE'}_2`}\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              {NodeCardIcon && <NodeCardIcon width={20} height={20} />}\n            </Styled.IconWrapper>\n            {nodeType === 'MASTERY' ? (\n              <FlexView>\n                <FlexView $background=\"BLACK_T_60\" $width=\"fit-content\" $gutterX={0.25}>\n                  <Text $color=\"WHITE\" $renderAs=\"ac4-black\">\n                    Smart\n                  </Text>\n                </FlexView>\n                <Text $renderAs=\"ac4-black\">Practice</Text>\n              </FlexView>\n            ) : (\n              <Text $renderAs=\"ac4-black\">{cardHeader}</Text>\n            )}\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          />\n          {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              hidden={!showTitleTooltip}\n              parentWidth=\"auto\"\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>\n          </FlexView>\n        </FlexView>\n      </Clickable>\n      {isStudent && !isHomeWork && (\n        <CardMenuOptions\n          $width={200}\n          options={studentOptions}\n          triggerRef={studentContainerRef}\n          visible={studentMenuVisible}\n          shouldOpenOnRight={false}\n        />\n      )}\n      {!isStudent && (\n        <Styled.MenuWrapper $position=\"absolute\" $width=\"fit-content\" $borderRadiusX={2}>\n          <ArrowTooltip\n            renderAs=\"primary\"\n            tooltipItem=\"Review\"\n            position=\"bottom\"\n            zIndex={5}\n            parentWidth=\"100%\"\n            hidden={!isHomeWork || teacherMenuVisible}\n          >\n            <Styled.CardKebabMenuWrapper\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n              ref={teacherContainerRef}\n              onClick={onTeacherMenuClick}\n            >\n              <MoreVerticalIcon width={16} height={16} />\n            </Styled.CardKebabMenuWrapper>\n          </ArrowTooltip>\n          <CardMenuOptions\n            options={teacherOptions}\n            triggerRef={teacherContainerRef}\n            visible={teacherMenuVisible}\n            shouldOpenOnRight={shouldOpenOnRight}\n          />\n        </Styled.MenuWrapper>\n      )}\n    </Styled.CardContainer>\n  );\n};\n\nexport default memo(HomeworkCard);\n"],"names":["HomeworkCard","header","nodeData","subHeader","userType","userMilestoneId","onNodeUnassign","onNodeReattempt","onNodeView","onNodeReview","onNodeAttempt","renderAs","shouldOpenOnRight","isHomeWork","nodeType","state","accuracy","dueDateTs","imageUrl","imageHue","cardHeader","permissions","userNodeId","unlockedOnTs","milestoneId","bgImage","getNodeTypeBasedBgImage","NodeCardIcon","getNodeCardBasedIcon","teacherContainerRef","useRef","studentContainerRef","titleTextRef","teacherMenuVisible","onTeacherMenuClick","useContextMenuClickHandler","studentMenuVisible","onStudentMenuClick","showTitleTooltip","setShowTitleTooltip","useState","canStart","canResume","canReview","canTeacherReview","canUnassign","canReset","isStudent","useLayoutEffect","onStudentView","useCallback","onTeacherView","handleOnMenuOptionClick","optionId","teacherOptions","Eye2Icon","Styled.StyledMinus2Icon","studentOptions","RedoIcon","Styled.CardContainer","jsx","Clickable","jsxs","FlexView","Styled.CardWrapper","Styled.IconWrapper","Text","Styled.BannerImageWrapper","Styled.BannerImage","NodeCardTags","NodeProgress","ArrowTooltip","Styled.HeaderText","Styled.SubHeaderText","CardMenuOptions","Styled.MenuWrapper","Styled.CardKebabMenuWrapper","MoreVerticalIcon","HomeworkCard$1","memo"],"mappings":"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"}
+{"version":3,"file":"homework-card.js","sources":["../../../src/features/homework/homework-card.tsx"],"sourcesContent":["import type {\n  INodeCardCallbacks,\n  INodeDataProps,\n} from '../chapters-v2/comps/node-card/node-card-types';\nimport type { TUserTypes } from '../ui/types';\nimport type { IHomeworkData } from './hw-card-list/api/get-homeworks';\n\nimport { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport Eye2Icon from '../../assets/line-icons/icons/eye2';\nimport MoreVerticalIcon from '../../assets/line-icons/icons/more-vertical';\nimport RedoIcon from '../../assets/line-icons/icons/redo';\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 ArrowTooltip from '../ui/arrow-tooltip/arrow-tooltip';\nimport Clickable from '../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../ui/layout/flex-view';\nimport LottieAnimation from '../ui/lottie-animation/lottie-animation';\nimport Text from '../ui/text/text';\nimport CardMenuOptions from './card-menu-options';\nimport NodeProgress from './node-progress';\nimport * as Styled from './styles';\n\ninterface IHomeworkCardProps extends INodeCardCallbacks {\n  header: string;\n  nodeData: INodeDataProps | IHomeworkData;\n  subHeader: string;\n  userType: TUserTypes;\n  userMilestoneId?: string;\n  renderAs: 'homework' | 'milestone';\n  shouldOpenOnRight: boolean;\n}\n\nconst HomeworkCard = ({\n  header,\n  nodeData,\n  subHeader,\n  userType,\n  userMilestoneId,\n  onNodeUnassign,\n  onNodeReattempt,\n  onNodeView,\n  onNodeReview,\n  onNodeAttempt,\n  renderAs,\n  shouldOpenOnRight,\n}: IHomeworkCardProps) => {\n  const isHomeWork = renderAs === 'homework';\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    permissions,\n    user_node_id: userNodeId,\n    unlocked_on_ts: unlockedOnTs,\n    user_milestone_id: milestoneId,\n  } = nodeData;\n\n  const [renderLottie, setRenderLottie] = useState(false);\n  const bgImage = getNodeTypeBasedBgImage(nodeType);\n  const { icon: NodeCardIcon, lottie: nodeCardLottie } = getNodeCardBasedIcon(nodeType);\n  const teacherContainerRef = useRef<HTMLDivElement>(null);\n  const studentContainerRef = useRef<HTMLDivElement>(null);\n  const titleTextRef = useRef<HTMLDivElement>(null);\n  const { menuVisible: teacherMenuVisible, onMenuClick: onTeacherMenuClick } =\n    useContextMenuClickHandler(teacherContainerRef);\n  const { menuVisible: studentMenuVisible, onMenuClick: onStudentMenuClick } =\n    useContextMenuClickHandler(studentContainerRef);\n  const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n\n  const {\n    can_start: canStart,\n    can_resume: canResume,\n    can_review: canReview,\n    can_teacher_review: canTeacherReview,\n    can_unassign: canUnassign,\n    can_reset: canReset,\n  } = permissions;\n  const isStudent = userType === 'STUDENT';\n\n  useLayoutEffect(() => {\n    if (\n      titleTextRef.current &&\n      titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n    ) {\n      setShowTitleTooltip(true);\n    }\n  }, [titleTextRef]);\n\n  const onStudentView = useCallback(() => {\n    if (canStart || canResume) {\n      if (typeof onNodeAttempt !== 'function') {\n        throw new Error('onNodeAttempt must be a function');\n      }\n\n      onNodeAttempt(nodeData);\n\n      return;\n    }\n\n    if (canReset && !isHomeWork) {\n      onStudentMenuClick();\n\n      return;\n    }\n\n    if (canReview) {\n      if (typeof onNodeReview !== 'function') {\n        throw new Error('onReview must be a function');\n      }\n\n      if (!userNodeId) {\n        throw new Error('user node id must be present to review the sheet');\n      }\n      onNodeReview(nodeData, userMilestoneId);\n\n      return;\n    }\n  }, [\n    canStart,\n    canResume,\n    canReset,\n    isHomeWork,\n    canReview,\n    onNodeAttempt,\n    nodeData,\n    onStudentMenuClick,\n    onNodeReview,\n    userNodeId,\n    userMilestoneId,\n  ]);\n\n  const onTeacherView = useCallback(() => {\n    if (canTeacherReview) {\n      if (typeof onNodeReview !== 'function') {\n        throw new Error('onNodeReview must be a function');\n      }\n\n      if (!userNodeId) {\n        throw new Error('user node id must be present to review the sheet');\n      }\n\n      onNodeReview(nodeData, userMilestoneId || milestoneId);\n\n      return;\n    }\n\n    if (typeof onNodeView !== 'function') {\n      throw new Error('onNodeView must be a function');\n    }\n\n    onNodeView(nodeData, userMilestoneId || milestoneId);\n  }, [\n    canTeacherReview,\n    userMilestoneId,\n    nodeData,\n    onNodeReview,\n    milestoneId,\n    onNodeView,\n    userNodeId,\n  ]);\n\n  const handleOnMenuOptionClick = useCallback(\n    (optionId: string) => {\n      switch (optionId) {\n        case 'teacher-card-view':\n          onTeacherView();\n\n          return;\n        case 'student-card-click':\n          onStudentView();\n\n          return;\n        case 'teacher-card-unassign':\n          onNodeUnassign?.(nodeData, userMilestoneId);\n\n          return;\n        case 'student-card-reattempt':\n          onNodeReattempt?.(nodeData, userMilestoneId);\n\n          return;\n        default:\n          throw new Error(`No callback function for ${optionId}`);\n      }\n    },\n    [nodeData, onNodeReattempt, onNodeUnassign, onStudentView, onTeacherView, userMilestoneId],\n  );\n\n  const handleOnMouseEnter = useCallback(() => {\n    setRenderLottie(true);\n  }, []);\n\n  const handleOnMouseLeave = useCallback(() => {\n    setRenderLottie(false);\n  }, []);\n\n  const teacherOptions = [\n    {\n      id: 'teacher-card-view',\n      label: 'View',\n      icon: Eye2Icon,\n      disabled: false,\n      onClick: handleOnMenuOptionClick,\n    },\n    {\n      id: 'teacher-card-unassign',\n      label: 'Unassign',\n      icon: Styled.StyledMinus2Icon,\n      disabled: isHomeWork ? false : !canUnassign,\n      onClick: handleOnMenuOptionClick,\n    },\n  ];\n\n  const studentOptions = [\n    {\n      id: 'student-card-click',\n      label: 'Review',\n      icon: Eye2Icon,\n      disabled: !canReview,\n      onClick: handleOnMenuOptionClick,\n    },\n    {\n      id: 'student-card-reattempt',\n      label: 'Reattempt',\n      icon: RedoIcon,\n      disabled: !canReset,\n      onClick: handleOnMenuOptionClick,\n    },\n  ];\n\n  return (\n    <Styled.CardContainer $position=\"relative\" $width=\"fit-content\">\n      <Clickable onClick={isStudent ? onStudentView : onTeacherView} label=\"homework-card\">\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              {renderLottie ? (\n                <LottieAnimation src={nodeCardLottie} />\n              ) : (\n                <NodeCardIcon width={20} height={20} />\n              )}\n            </Styled.IconWrapper>\n            {nodeType === 'MASTERY' ? (\n              <FlexView>\n                <FlexView $background=\"BLACK_T_60\" $width=\"fit-content\" $gutterX={0.25}>\n                  <Text $color=\"WHITE\" $renderAs=\"ac4-black\">\n                    Smart\n                  </Text>\n                </FlexView>\n                <Text $renderAs=\"ac4-black\">Practice</Text>\n              </FlexView>\n            ) : (\n              <Text $renderAs=\"ac4-black\">{cardHeader}</Text>\n            )}\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          />\n          {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              hidden={!showTitleTooltip}\n              parentWidth=\"auto\"\n              zIndex={2}\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>\n          </FlexView>\n        </FlexView>\n      </Clickable>\n      {isStudent && !isHomeWork && (\n        <CardMenuOptions\n          $width={200}\n          options={studentOptions}\n          triggerRef={studentContainerRef}\n          visible={studentMenuVisible}\n          shouldOpenOnRight={false}\n        />\n      )}\n      {!isStudent && (\n        <Styled.MenuWrapper $position=\"absolute\" $width=\"fit-content\" $borderRadiusX={2}>\n          <ArrowTooltip\n            renderAs=\"primary\"\n            tooltipItem=\"Review\"\n            position=\"bottom\"\n            zIndex={5}\n            parentWidth=\"100%\"\n            hidden={!isHomeWork || teacherMenuVisible}\n          >\n            <Styled.CardKebabMenuWrapper\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n              ref={teacherContainerRef}\n              onClick={onTeacherMenuClick}\n            >\n              <MoreVerticalIcon width={16} height={16} />\n            </Styled.CardKebabMenuWrapper>\n          </ArrowTooltip>\n          <CardMenuOptions\n            options={teacherOptions}\n            triggerRef={teacherContainerRef}\n            visible={teacherMenuVisible}\n            shouldOpenOnRight={shouldOpenOnRight}\n          />\n        </Styled.MenuWrapper>\n      )}\n    </Styled.CardContainer>\n  );\n};\n\nexport default memo(HomeworkCard);\n"],"names":["HomeworkCard","header","nodeData","subHeader","userType","userMilestoneId","onNodeUnassign","onNodeReattempt","onNodeView","onNodeReview","onNodeAttempt","renderAs","shouldOpenOnRight","isHomeWork","nodeType","state","accuracy","dueDateTs","imageUrl","imageHue","cardHeader","permissions","userNodeId","unlockedOnTs","milestoneId","renderLottie","setRenderLottie","useState","bgImage","getNodeTypeBasedBgImage","NodeCardIcon","nodeCardLottie","getNodeCardBasedIcon","teacherContainerRef","useRef","studentContainerRef","titleTextRef","teacherMenuVisible","onTeacherMenuClick","useContextMenuClickHandler","studentMenuVisible","onStudentMenuClick","showTitleTooltip","setShowTitleTooltip","canStart","canResume","canReview","canTeacherReview","canUnassign","canReset","isStudent","useLayoutEffect","onStudentView","useCallback","onTeacherView","handleOnMenuOptionClick","optionId","handleOnMouseEnter","handleOnMouseLeave","teacherOptions","Eye2Icon","Styled.StyledMinus2Icon","studentOptions","RedoIcon","Styled.CardContainer","jsx","Clickable","jsxs","FlexView","Styled.CardWrapper","Styled.IconWrapper","LottieAnimation","Text","Styled.BannerImageWrapper","Styled.BannerImage","NodeCardTags","NodeProgress","ArrowTooltip","Styled.HeaderText","Styled.SubHeaderText","CardMenuOptions","Styled.MenuWrapper","Styled.CardKebabMenuWrapper","MoreVerticalIcon","HomeworkCard$1","memo"],"mappings":"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"}

package/dist/features/homework/hw-card-list/hw-card-list-styled.js

@@ -1,12 +1,12 @@
-import t from "styled-components";
+import t, { css as i } from "styled-components";
 import e from "../../ui/layout/flex-view.js";
-const r = t(e)`
+const s = t(e)`
   overflow-x: hidden;
   overflow-y: visible;
   padding: 16px 0px 92px 0px;
   margin-bottom: -92px;
   margin-top: -16px;
-`, p = t(e)`
+`, l = t(e)`
   right: ${({ right: o }) => o};
   left: ${({ left: o }) => o};
   width: 32px;
@@ -18,12 +18,25 @@ const r = t(e)`
   path {
     fill: ${({ theme: o }) => o.colors.WHITE};
   }
-`, l = t(e)(
-  ({ $disablePointerEvents: o }) => `
+`, a = t(e)(
+  ({ $disablePointerEvents: o, theme: n }) => `
     position: relative;
-    pointer-events: ${o ? "none" : "auto"};
+    pointer-events: auto;
+    z-index: 1;
+    ${o && i`
+        pointer-events: none;
+        :after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: ${n.colors.GREY_3};
+        }
+      `}
   `
-), s = t(e)`
+), c = t(e)`
   cursor: pointer;
   height: 100%;
   right: ${({ right: o }) => o};
@@ -32,9 +45,9 @@ const r = t(e)`
   z-index: 5;
 `;
 export {
-  l as ContentWrapper,
-  s as HoverZone,
-  p as ScrollButton,
-  r as ScrollContainer
+  a as ContentWrapper,
+  c as HoverZone,
+  l as ScrollButton,
+  s as ScrollContainer
 };
 //# sourceMappingURL=hw-card-list-styled.js.map

package/dist/features/homework/hw-card-list/hw-card-list-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"hw-card-list-styled.js","sources":["../../../../src/features/homework/hw-card-list/hw-card-list-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\n\nexport const ScrollContainer = styled(FlexView)`\n  overflow-x: hidden;\n  overflow-y: visible;\n  padding: 16px 0px 92px 0px;\n  margin-bottom: -92px;\n  margin-top: -16px;\n`;\n\nexport const ScrollButton = styled(FlexView)<{ $visible: boolean; right: string; left: string }>`\n  right: ${({ right }) => right};\n  left: ${({ left }) => left};\n  width: 32px;\n  cursor: pointer;\n  transition: opacity 0.3s ease-in-out;\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};\n  z-index: 10;\n  path {\n    fill: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n\nexport const ContentWrapper = styled(FlexView)<{ $disablePointerEvents: boolean }>(\n  ({ $disablePointerEvents }) => `\n    position: relative;\n    pointer-events: ${$disablePointerEvents ? 'none' : 'auto'};\n  `,\n);\n\nexport const HoverZone = styled(FlexView)<{ right: string; left: string }>`\n  cursor: pointer;\n  height: 100%;\n  right: ${({ right }) => right};\n  left: ${({ left }) => left};\n  pointer-events: all;\n  z-index: 5;\n`;\n"],"names":["ScrollContainer","styled","FlexView","ScrollButton","right","left","$visible","theme","ContentWrapper","$disablePointerEvents","HoverZone"],"mappings":";;AAIa,MAAAA,IAAkBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjCC,IAAeF,EAAOC,CAAQ;AAAA,WAChC,CAAC,EAAE,OAAAE,EAAM,MAAMA,CAAK;AAAA,UACrB,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA;AAAA;AAAA;AAAA,aAIf,CAAC,EAAE,UAAAC,EAAA,MAAgBA,IAAW,IAAI,CAAE;AAAA,oBAC7B,CAAC,EAAE,UAAAA,EAAA,MAAgBA,IAAW,SAAS,MAAO;AAAA;AAAA;AAAA,YAGtD,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,GAIhCC,IAAiBP,EAAOC,CAAQ;AAAA,EAC3C,CAAC,EAAE,uBAAAO,EAAA,MAA4B;AAAA;AAAA,sBAEXA,IAAwB,SAAS,MAAM;AAAA;AAE7D,GAEaC,IAAYT,EAAOC,CAAQ;AAAA;AAAA;AAAA,WAG7B,CAAC,EAAE,OAAAE,EAAM,MAAMA,CAAK;AAAA,UACrB,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"hw-card-list-styled.js","sources":["../../../../src/features/homework/hw-card-list/hw-card-list-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\n\nexport const ScrollContainer = styled(FlexView)`\n  overflow-x: hidden;\n  overflow-y: visible;\n  padding: 16px 0px 92px 0px;\n  margin-bottom: -92px;\n  margin-top: -16px;\n`;\n\nexport const ScrollButton = styled(FlexView)<{ $visible: boolean; right: string; left: string }>`\n  right: ${({ right }) => right};\n  left: ${({ left }) => left};\n  width: 32px;\n  cursor: pointer;\n  transition: opacity 0.3s ease-in-out;\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};\n  z-index: 10;\n  path {\n    fill: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n\nexport const ContentWrapper = styled(FlexView)<{ $disablePointerEvents: boolean }>(\n  ({ $disablePointerEvents, theme }) => `\n    position: relative;\n    pointer-events: auto;\n    z-index: 1;\n    ${\n      $disablePointerEvents &&\n      css`\n        pointer-events: none;\n        :after {\n          content: '';\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          background: ${theme.colors.GREY_3};\n        }\n      `\n    }\n  `,\n);\n\nexport const HoverZone = styled(FlexView)<{ right: string; left: string }>`\n  cursor: pointer;\n  height: 100%;\n  right: ${({ right }) => right};\n  left: ${({ left }) => left};\n  pointer-events: all;\n  z-index: 5;\n`;\n"],"names":["ScrollContainer","styled","FlexView","ScrollButton","right","left","$visible","theme","ContentWrapper","$disablePointerEvents","css","HoverZone"],"mappings":";;AAIa,MAAAA,IAAkBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjCC,IAAeF,EAAOC,CAAQ;AAAA,WAChC,CAAC,EAAE,OAAAE,EAAM,MAAMA,CAAK;AAAA,UACrB,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA;AAAA;AAAA;AAAA,aAIf,CAAC,EAAE,UAAAC,EAAA,MAAgBA,IAAW,IAAI,CAAE;AAAA,oBAC7B,CAAC,EAAE,UAAAA,EAAA,MAAgBA,IAAW,SAAS,MAAO;AAAA;AAAA;AAAA,YAGtD,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,GAIhCC,IAAiBP,EAAOC,CAAQ;AAAA,EAC3C,CAAC,EAAE,uBAAAO,GAAuB,OAAAF,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA,MAKlCE,KACAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASkBH,EAAM,OAAO,MAAM;AAAA;AAAA,OAGvC;AAAA;AAEJ,GAEaI,IAAYV,EAAOC,CAAQ;AAAA;AAAA;AAAA,WAG7B,CAAC,EAAE,OAAAE,EAAM,MAAMA,CAAK;AAAA,UACrB,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA;AAAA;AAAA;"}

package/dist/index.d.ts

@@ -3654,6 +3654,7 @@ export declare const LOTTIE: {
     COLOR_1: string;
     COLOR_2: string;
     COLOR_3: string;
+    COMPETITIVE_ARENA: string;
     DIFFICULT: string;
     EASY: string;
     ELITE_CIRCLE: string;
@@ -3666,6 +3667,7 @@ export declare const LOTTIE: {
     GOLD_3: string;
     INFINITE_BUTTON_BG: string;
     INFINITE_BUTTON_SYMBOL: string;
+    LEARN: string;
     LEVELUP_RINGS: string;
     MEDIUM: string;
     NUDGE_TAP: string;
@@ -3685,8 +3687,12 @@ export declare const LOTTIE: {
     POINT50: string;
     POINT5: string;
     POINT60: string;
+    PRACTICE: string;
     PROFICIENT1X: string;
+    PROJECT: string;
+    PUZZLE: string;
     RANDOM_MODE_SEGMENT_LOTTIE: string;
+    RECAP: string;
     SEQUENCE_MODE_SEGMENT_LOTTIE: string;
     SILVER_1: string;
     SILVER_2: string;
@@ -3699,10 +3705,12 @@ export declare const LOTTIE: {
     TABLE_SEGMENT_STAR: string;
     TARGET_ACHIEVED_TEXT: string;
     TEACHER_VALIDATION: string;
+    TEST: string;
     TOTAL_STREAK: string;
     TOTAL_TIME: string;
     TOTAL_TIME_SPENT: string;
     TOURNAMENT_RIPPLE: string;
+    VIDEO: string;
 };
 
 export declare const LPARChapter: FC<ILPARChapterProps>;
@@ -4003,6 +4011,8 @@ export declare const RadioCard: <IDType extends string | number>({ options, valu
 
 export declare const RadioInput: <IDType extends string | number>({ options, value, onChange, numColumns, }: IRadioInputProps<IDType>) => JSX.Element;
 
+export declare const RecapIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+
 export declare const RecentChapters: FC<RecentChaptersProps>;
 
 declare interface RecentChaptersProps {