@cuemath/leap 3.5.59 → 3.5.60-link0

package/dist/features/chapters-v2/utils/node-card-utils.js

@@ -1,4 +1,4 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
 import N from "../../../assets/line-icons/icons/check2.js";
 import C from "../../../assets/line-icons/icons/exclamation.js";
 import h from "../../../assets/line-icons/icons/lock2.js";
@@ -9,12 +9,12 @@ import u from "../../ui/arrow-tooltip/arrow-tooltip.js";
 import S from "../../ui/text/text.js";
 import { InProgressIconWrapper as L } from "../comps/node-card/node-card-styled.js";
 import R from "../comps/tag/tag.js";
-const P = 60 * 60 * 24, g = 60 * 60, $ = 60, O = ["NOT_STARTED"], M = (e, r, n) => {
-  if (!e || r && !n)
+const P = 60 * 60 * 24, g = 60 * 60, $ = 60, O = ["NOT_STARTED"], M = (e, t, n) => {
+  if (!e || t && !n)
     return { isOverdue: !1, daysText: "", differenceInDays: 0, hoursLeft: 0, minutesLeft: 0 };
   const a = Math.floor(Date.now() / 1e3), c = e - a, s = Math.floor(c / g), T = Math.floor(c / $), i = Math.round(c / P), A = i < 0, E = i > 0 ? `${Math.abs(i)}D` : "", d = s > 0 ? Math.abs(s) : 0, I = T > 0 ? Math.abs(T) : 0;
   return { isOverdue: A, daysText: E, differenceInDays: i, hoursLeft: d, minutesLeft: I };
-}, b = (e, r, n, a) => a ? e < 1 ? `${r}m` : `${e}h` : n, m = (e, r, n = !1) => /* @__PURE__ */ p(
+}, b = (e, t, n, a) => a ? e < 1 && t > 0 ? `${t}m` : `${e}h` : n, _ = (e, t, n = !1) => /* @__PURE__ */ p(
   L,
   {
     $flexDirection: "row",
@@ -23,18 +23,18 @@ const P = 60 * 60 * 24, g = 60 * 60, $ = 60, O = ["NOT_STARTED"], M = (e, r, n)
     $borderRadius: 16,
     $paddingRight: n ? 0 : 6,
     $paddingLeft: e ? 6 : 0,
-    $background: r ? "RED" : "BLACK_1",
+    $background: t ? "RED" : "BLACK_1",
     children: [
-      e && /* @__PURE__ */ t(S, { $renderAs: "ub3-bold", $color: "WHITE", children: e }),
-      n && /* @__PURE__ */ t(D, {})
+      e && /* @__PURE__ */ r(S, { $renderAs: "ub3-bold", $color: "WHITE", children: e }),
+      n && /* @__PURE__ */ r(D, {})
     ]
   }
-), U = (e, r) => {
+), U = (e, t) => {
   if (typeof e == "number")
-    return r ? `${e}` : `${e}%`;
+    return t ? `${e}` : `${e}%`;
 }, Y = ({
   state: e,
-  isStudent: r,
+  isStudent: t,
   accuracy: n,
   dueDateTs: a,
   isMilestone: c,
@@ -44,19 +44,19 @@ const P = 60 * 60 * 24, g = 60 * 60, $ = 60, O = ["NOT_STARTED"], M = (e, r, n)
     a,
     c,
     s
-  ), I = !!(s && E <= 24 && E >= 0), f = b(E, d, i, I), _ = U(n, s);
+  ), I = !!(s && E <= 24 && E >= 0), f = b(E, d, i, I), m = U(n, s);
   if (!c && T && O.includes(e))
     return {
-      icon: /* @__PURE__ */ t(
+      icon: /* @__PURE__ */ r(
         u,
         {
           renderAs: "primary",
           position: "bottom",
           tooltipItem: "Complete now",
           zIndex: 10,
-          hidden: !r,
+          hidden: !t,
           parentWidth: "fit-content",
-          children: /* @__PURE__ */ t(l, { $background: "RED", $borderRadius: 16, $gapX: 0.24, $gutterX: 0.5, children: /* @__PURE__ */ t(S, { $renderAs: "ac4-black", $color: "WHITE", children: "OVERDUE" }) })
+          children: /* @__PURE__ */ r(l, { $background: "RED", $borderRadius: 16, $gapX: 0.24, $gutterX: 0.5, children: /* @__PURE__ */ r(S, { $renderAs: "ac4-black", $color: "WHITE", children: "OVERDUE" }) })
         }
       ),
       top: -10,
@@ -65,15 +65,15 @@ const P = 60 * 60 * 24, g = 60 * 60, $ = 60, O = ["NOT_STARTED"], M = (e, r, n)
   switch (e) {
     case "NOT_STARTED":
       return {
-        icon: /* @__PURE__ */ t(
+        icon: /* @__PURE__ */ r(
           u,
           {
             renderAs: "primary",
             position: "bottom",
             tooltipItem: A > 1 ? `${A} days left` : "Complete it today",
             zIndex: 10,
-            hidden: !r,
-            children: m(f, I)
+            hidden: !t,
+            children: _(f, I)
           }
         ),
         top: 0,
@@ -81,30 +81,30 @@ const P = 60 * 60 * 24, g = 60 * 60, $ = 60, O = ["NOT_STARTED"], M = (e, r, n)
       };
     case "LOCKED":
       return {
-        icon: /* @__PURE__ */ t(h, { width: 32, height: 32 }),
+        icon: /* @__PURE__ */ r(h, { width: 32, height: 32 }),
         top: -16,
         right: -16
       };
     case "IN_PROGRESS":
       return {
-        icon: m(f, I, !0)
+        icon: _(f, I, !0)
       };
     case "COMPLETED":
       return {
-        icon: /* @__PURE__ */ t(R, { Icon: N, label: _ }),
+        icon: /* @__PURE__ */ r(R, { Icon: N, label: m }),
         top: -10,
         right: -10
       };
     case "WAIT_FOR_REVIEW":
       return {
-        icon: /* @__PURE__ */ t(
+        icon: /* @__PURE__ */ r(
           u,
           {
             renderAs: "primary",
             position: "bottom",
-            tooltipItem: r ? "Waiting for teacher to review" : "Needs your review",
+            tooltipItem: t ? "Waiting for teacher to review" : "Needs your review",
             zIndex: 10,
-            children: /* @__PURE__ */ t(R, { Icon: C })
+            children: /* @__PURE__ */ r(R, { Icon: C })
           }
         ),
         top: -10,
@@ -112,7 +112,7 @@ const P = 60 * 60 * 24, g = 60 * 60, $ = 60, O = ["NOT_STARTED"], M = (e, r, n)
       };
     case "EXPIRED":
       return {
-        icon: /* @__PURE__ */ t(l, { $background: "WHITE_5", $borderRadius: 16, $gapX: 0.24, $gutterX: 0.5, children: /* @__PURE__ */ t(S, { $renderAs: "ub3", $color: "BLACK_1", children: "EXPIRED" }) }),
+        icon: /* @__PURE__ */ r(l, { $background: "WHITE_5", $borderRadius: 16, $gapX: 0.24, $gutterX: 0.5, children: /* @__PURE__ */ r(S, { $renderAs: "ub3", $color: "BLACK_1", children: "EXPIRED" }) }),
         top: -10,
         right: -10
       };

package/dist/features/chapters-v2/utils/node-card-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"node-card-utils.js","sources":["../../../../src/features/chapters-v2/utils/node-card-utils.tsx"],"sourcesContent":["import Check2Icon from '../../../assets/line-icons/icons/check2';\nimport ExclamationIcon from '../../../assets/line-icons/icons/exclamation';\nimport Lock2Icon from '../../../assets/line-icons/icons/lock2';\nimport StatusIcon from '../../../assets/line-icons/icons/status';\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport FlexView from '../..//ui/layout/flex-view';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport Text from '../../ui/text/text';\nimport { InProgressIconWrapper } from '../comps/node-card/node-card-styled';\nimport type { INodeCardTagsProps, INodeDataProps } from '../comps/node-card/node-card-types';\nimport Tag from '../comps/tag/tag';\n\ninterface IDueDateInfo {\n  isOverdue: boolean;\n  daysText: string;\n  differenceInDays: number;\n  hoursLeft: number;\n  minutesLeft: number;\n}\n\nconst SECONDS_PER_DAY = 60 * 60 * 24;\nconst SECONDS_PER_HOUR = 60 * 60;\nconst SECONDS_PER_MINUTE = 60;\nconst OVERDUE_TAG_STATES: INodeDataProps['state'][] = ['NOT_STARTED'];\n\nconst calculateDueDateInfo = (\n  dueDateTs?: number | null,\n  isMilestone?: boolean,\n  isMathFitCard?: boolean,\n): IDueDateInfo => {\n  if (!dueDateTs || (isMilestone && !isMathFitCard)) {\n    return { isOverdue: false, daysText: '', differenceInDays: 0, hoursLeft: 0, minutesLeft: 0 };\n  }\n\n  const currentTimestamp = Math.floor(Date.now() / 1000);\n  const differenceInSeconds = dueDateTs - currentTimestamp;\n  const differenceInHours = Math.floor(differenceInSeconds / SECONDS_PER_HOUR);\n  const differenceInMinutes = Math.floor(differenceInSeconds / SECONDS_PER_MINUTE);\n  const differenceInDays = Math.round(differenceInSeconds / SECONDS_PER_DAY);\n\n  const isOverdue = differenceInDays < 0;\n\n  const daysText = differenceInDays > 0 ? `${Math.abs(differenceInDays)}D` : '';\n  const hoursLeft = differenceInHours > 0 ? Math.abs(differenceInHours) : 0;\n  const minutesLeft = differenceInMinutes > 0 ? Math.abs(differenceInMinutes) : 0;\n\n  return { isOverdue, daysText, differenceInDays, hoursLeft, minutesLeft };\n};\n\nconst getTimeDisplayText = (\n  hoursLeft: number,\n  minutesLeft: number,\n  daysText: string,\n  showWarning: boolean,\n): string => {\n  if (showWarning) {\n    return hoursLeft < 1 ? `${minutesLeft}m` : `${hoursLeft}h`;\n  }\n\n  return daysText;\n};\n\nconst renderTimeDisplayIcon = (\n  timeDisplayText: string,\n  showWarning: boolean,\n  includeStatusIcon = false,\n) => {\n  return (\n    <InProgressIconWrapper\n      $flexDirection=\"row\"\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $borderRadius={16}\n      $paddingRight={includeStatusIcon ? 0 : 6}\n      $paddingLeft={timeDisplayText ? 6 : 0}\n      $background={showWarning ? 'RED' : 'BLACK_1'}\n    >\n      {timeDisplayText && (\n        <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n          {timeDisplayText}\n        </Text>\n      )}\n      {includeStatusIcon && <StatusIcon />}\n    </InProgressIconWrapper>\n  );\n};\n\nconst getAccuracyText = (accuracy?: number | null, isMathFitCard?: boolean): string | undefined => {\n  if (typeof accuracy !== 'number') return undefined;\n\n  return isMathFitCard ? `${accuracy}` : `${accuracy}%`;\n};\n\nconst getNodeStateBasedTagInfo = ({\n  state: nodeState,\n  isStudent,\n  accuracy,\n  dueDateTs,\n  isMilestone,\n  isMathFitCard,\n}: INodeCardTagsProps) => {\n  const { isOverdue, daysText, differenceInDays, hoursLeft, minutesLeft } = calculateDueDateInfo(\n    dueDateTs,\n    isMilestone,\n    isMathFitCard,\n  );\n  const showWarning = !!(isMathFitCard && hoursLeft <= 24 && hoursLeft >= 0);\n  const timeDisplayText = getTimeDisplayText(hoursLeft, minutesLeft, daysText, showWarning);\n  const accuracyText = getAccuracyText(accuracy, isMathFitCard);\n\n  if (!isMilestone && isOverdue && OVERDUE_TAG_STATES.includes(nodeState)) {\n    return {\n      icon: (\n        <ArrowTooltip\n          renderAs=\"primary\"\n          position=\"bottom\"\n          tooltipItem=\"Complete now\"\n          zIndex={10}\n          hidden={!isStudent}\n          parentWidth=\"fit-content\"\n        >\n          <FlexView $background=\"RED\" $borderRadius={16} $gapX={0.24} $gutterX={0.5}>\n            <Text $renderAs=\"ac4-black\" $color=\"WHITE\">\n              OVERDUE\n            </Text>\n          </FlexView>\n        </ArrowTooltip>\n      ),\n      top: -10,\n      right: -10,\n    };\n  }\n\n  switch (nodeState) {\n    case 'NOT_STARTED':\n      return {\n        icon: (\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"bottom\"\n            tooltipItem={\n              differenceInDays > 1 ? `${differenceInDays} days left` : 'Complete it today'\n            }\n            zIndex={10}\n            hidden={!isStudent}\n          >\n            {renderTimeDisplayIcon(timeDisplayText, showWarning)}\n          </ArrowTooltip>\n        ),\n        top: 0,\n        right: 0,\n      };\n    case 'LOCKED':\n      return {\n        icon: <Lock2Icon width={32} height={32} />,\n        top: -16,\n        right: -16,\n      };\n    case 'IN_PROGRESS':\n      return {\n        icon: renderTimeDisplayIcon(timeDisplayText, showWarning, true),\n      };\n    case 'COMPLETED':\n      return {\n        icon: <Tag Icon={Check2Icon} label={accuracyText} />,\n        top: -10,\n        right: -10,\n      };\n    case 'WAIT_FOR_REVIEW':\n      return {\n        icon: (\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"bottom\"\n            tooltipItem={isStudent ? 'Waiting for teacher to review' : 'Needs your review'}\n            zIndex={10}\n          >\n            <Tag Icon={ExclamationIcon} />\n          </ArrowTooltip>\n        ),\n        top: -10,\n        right: -10,\n      };\n\n    case 'EXPIRED':\n      return {\n        icon: (\n          <FlexView $background=\"WHITE_5\" $borderRadius={16} $gapX={0.24} $gutterX={0.5}>\n            <Text $renderAs=\"ub3\" $color=\"BLACK_1\">\n              EXPIRED\n            </Text>\n          </FlexView>\n        ),\n        top: -10,\n        right: -10,\n      };\n\n    default:\n      return {\n        icon: undefined,\n      };\n  }\n};\n\nconst getNodeCardBasedIcon = (nodeType: INodeDataProps['node_type']) => {\n  switch (nodeType) {\n    case 'LEVEL2':\n    case 'LEVEL3':\n    case 'HIDDEN_BASIC':\n      return {\n        lottie: LOTTIE.COMPETITIVE_ARENA,\n      };\n    case 'LEARNING':\n    case 'SAT_MATH_LEARNING':\n    case 'SAT_ENGLISH_LEARNING':\n      return {\n        lottie: LOTTIE.LEARN,\n      };\n    case 'RECAP':\n    case 'REMEDIAL':\n    case 'REVISION':\n    case 'PPT_BASIC':\n    case 'SAT_MATH_RECAP':\n    case 'SAT_ENGLISH_RECAP':\n      return {\n        lottie: LOTTIE.RECAP,\n      };\n    case 'DYNAMIC':\n    case 'ASSESSMENT':\n    case 'CHAPTER_ASSESSMENT':\n    case 'DIAGNOSTIC':\n    case 'TURING_ASSESSMENT':\n      return {\n        lottie: LOTTIE.TEST,\n      };\n    case 'PRACTICE':\n    case 'EXTRA_PRACTICE':\n    case 'TARGET_PRACTICE':\n    case 'MASTERY':\n    case 'TURING_PRACTICE':\n    case 'SAT_MATH_ASSESSMENT':\n    case 'SAT_ENGLISH_ASSESSMENT':\n      return {\n        lottie: LOTTIE.PRACTICE,\n      };\n    case 'PUZZLE':\n    case 'PUZZLE_EASY':\n    case 'PUZZLE_MEDIUM':\n    case 'PUZZLE_HARD':\n      return {\n        lottie: LOTTIE.PUZZLE,\n      };\n    case 'TURING_SUBJECTIVE':\n      return {\n        lottie: LOTTIE.SUBJECTIVE,\n      };\n    case 'TURING_BASIC':\n    case 'PYTHON_BASIC':\n    case 'PYTHON_VISUAL':\n      return {\n        lottie: LOTTIE.ACTIVITY,\n      };\n    case 'VIDEO':\n      return {\n        lottie: LOTTIE.VIDEO,\n      };\n    case 'PDF':\n      return {\n        lottie: LOTTIE.DOWNLOAD,\n      };\n    default:\n      return {\n        lottie: LOTTIE.PROJECT,\n      };\n  }\n};\n\nexport { getNodeStateBasedTagInfo, getNodeCardBasedIcon };\n"],"names":["SECONDS_PER_DAY","SECONDS_PER_HOUR","SECONDS_PER_MINUTE","OVERDUE_TAG_STATES","calculateDueDateInfo","dueDateTs","isMilestone","isMathFitCard","currentTimestamp","differenceInSeconds","differenceInHours","differenceInMinutes","differenceInDays","isOverdue","daysText","hoursLeft","minutesLeft","getTimeDisplayText","showWarning","renderTimeDisplayIcon","timeDisplayText","includeStatusIcon","jsxs","InProgressIconWrapper","Text","StatusIcon","getAccuracyText","accuracy","getNodeStateBasedTagInfo","nodeState","isStudent","accuracyText","jsx","ArrowTooltip","FlexView","Lock2Icon","Tag","Check2Icon","ExclamationIcon","getNodeCardBasedIcon","nodeType","LOTTIE"],"mappings":"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"}
+{"version":3,"file":"node-card-utils.js","sources":["../../../../src/features/chapters-v2/utils/node-card-utils.tsx"],"sourcesContent":["import Check2Icon from '../../../assets/line-icons/icons/check2';\nimport ExclamationIcon from '../../../assets/line-icons/icons/exclamation';\nimport Lock2Icon from '../../../assets/line-icons/icons/lock2';\nimport StatusIcon from '../../../assets/line-icons/icons/status';\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport FlexView from '../..//ui/layout/flex-view';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport Text from '../../ui/text/text';\nimport { InProgressIconWrapper } from '../comps/node-card/node-card-styled';\nimport type { INodeCardTagsProps, INodeDataProps } from '../comps/node-card/node-card-types';\nimport Tag from '../comps/tag/tag';\n\ninterface IDueDateInfo {\n  isOverdue: boolean;\n  daysText: string;\n  differenceInDays: number;\n  hoursLeft: number;\n  minutesLeft: number;\n}\n\nconst SECONDS_PER_DAY = 60 * 60 * 24;\nconst SECONDS_PER_HOUR = 60 * 60;\nconst SECONDS_PER_MINUTE = 60;\nconst OVERDUE_TAG_STATES: INodeDataProps['state'][] = ['NOT_STARTED'];\n\nconst calculateDueDateInfo = (\n  dueDateTs?: number | null,\n  isMilestone?: boolean,\n  isMathFitCard?: boolean,\n): IDueDateInfo => {\n  if (!dueDateTs || (isMilestone && !isMathFitCard)) {\n    return { isOverdue: false, daysText: '', differenceInDays: 0, hoursLeft: 0, minutesLeft: 0 };\n  }\n\n  const currentTimestamp = Math.floor(Date.now() / 1000);\n  const differenceInSeconds = dueDateTs - currentTimestamp;\n  const differenceInHours = Math.floor(differenceInSeconds / SECONDS_PER_HOUR);\n  const differenceInMinutes = Math.floor(differenceInSeconds / SECONDS_PER_MINUTE);\n  const differenceInDays = Math.round(differenceInSeconds / SECONDS_PER_DAY);\n\n  const isOverdue = differenceInDays < 0;\n\n  const daysText = differenceInDays > 0 ? `${Math.abs(differenceInDays)}D` : '';\n  const hoursLeft = differenceInHours > 0 ? Math.abs(differenceInHours) : 0;\n  const minutesLeft = differenceInMinutes > 0 ? Math.abs(differenceInMinutes) : 0;\n\n  return { isOverdue, daysText, differenceInDays, hoursLeft, minutesLeft };\n};\n\nconst getTimeDisplayText = (\n  hoursLeft: number,\n  minutesLeft: number,\n  daysText: string,\n  showWarning: boolean,\n): string => {\n  if (showWarning) {\n    return hoursLeft < 1 && minutesLeft > 0 ? `${minutesLeft}m` : `${hoursLeft}h`;\n  }\n\n  return daysText;\n};\n\nconst renderTimeDisplayIcon = (\n  timeDisplayText: string,\n  showWarning: boolean,\n  includeStatusIcon = false,\n) => {\n  return (\n    <InProgressIconWrapper\n      $flexDirection=\"row\"\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $borderRadius={16}\n      $paddingRight={includeStatusIcon ? 0 : 6}\n      $paddingLeft={timeDisplayText ? 6 : 0}\n      $background={showWarning ? 'RED' : 'BLACK_1'}\n    >\n      {timeDisplayText && (\n        <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n          {timeDisplayText}\n        </Text>\n      )}\n      {includeStatusIcon && <StatusIcon />}\n    </InProgressIconWrapper>\n  );\n};\n\nconst getAccuracyText = (accuracy?: number | null, isMathFitCard?: boolean): string | undefined => {\n  if (typeof accuracy !== 'number') return undefined;\n\n  return isMathFitCard ? `${accuracy}` : `${accuracy}%`;\n};\n\nconst getNodeStateBasedTagInfo = ({\n  state: nodeState,\n  isStudent,\n  accuracy,\n  dueDateTs,\n  isMilestone,\n  isMathFitCard,\n}: INodeCardTagsProps) => {\n  const { isOverdue, daysText, differenceInDays, hoursLeft, minutesLeft } = calculateDueDateInfo(\n    dueDateTs,\n    isMilestone,\n    isMathFitCard,\n  );\n  const showWarning = !!(isMathFitCard && hoursLeft <= 24 && hoursLeft >= 0);\n  const timeDisplayText = getTimeDisplayText(hoursLeft, minutesLeft, daysText, showWarning);\n  const accuracyText = getAccuracyText(accuracy, isMathFitCard);\n\n  if (!isMilestone && isOverdue && OVERDUE_TAG_STATES.includes(nodeState)) {\n    return {\n      icon: (\n        <ArrowTooltip\n          renderAs=\"primary\"\n          position=\"bottom\"\n          tooltipItem=\"Complete now\"\n          zIndex={10}\n          hidden={!isStudent}\n          parentWidth=\"fit-content\"\n        >\n          <FlexView $background=\"RED\" $borderRadius={16} $gapX={0.24} $gutterX={0.5}>\n            <Text $renderAs=\"ac4-black\" $color=\"WHITE\">\n              OVERDUE\n            </Text>\n          </FlexView>\n        </ArrowTooltip>\n      ),\n      top: -10,\n      right: -10,\n    };\n  }\n\n  switch (nodeState) {\n    case 'NOT_STARTED':\n      return {\n        icon: (\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"bottom\"\n            tooltipItem={\n              differenceInDays > 1 ? `${differenceInDays} days left` : 'Complete it today'\n            }\n            zIndex={10}\n            hidden={!isStudent}\n          >\n            {renderTimeDisplayIcon(timeDisplayText, showWarning)}\n          </ArrowTooltip>\n        ),\n        top: 0,\n        right: 0,\n      };\n    case 'LOCKED':\n      return {\n        icon: <Lock2Icon width={32} height={32} />,\n        top: -16,\n        right: -16,\n      };\n    case 'IN_PROGRESS':\n      return {\n        icon: renderTimeDisplayIcon(timeDisplayText, showWarning, true),\n      };\n    case 'COMPLETED':\n      return {\n        icon: <Tag Icon={Check2Icon} label={accuracyText} />,\n        top: -10,\n        right: -10,\n      };\n    case 'WAIT_FOR_REVIEW':\n      return {\n        icon: (\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"bottom\"\n            tooltipItem={isStudent ? 'Waiting for teacher to review' : 'Needs your review'}\n            zIndex={10}\n          >\n            <Tag Icon={ExclamationIcon} />\n          </ArrowTooltip>\n        ),\n        top: -10,\n        right: -10,\n      };\n\n    case 'EXPIRED':\n      return {\n        icon: (\n          <FlexView $background=\"WHITE_5\" $borderRadius={16} $gapX={0.24} $gutterX={0.5}>\n            <Text $renderAs=\"ub3\" $color=\"BLACK_1\">\n              EXPIRED\n            </Text>\n          </FlexView>\n        ),\n        top: -10,\n        right: -10,\n      };\n\n    default:\n      return {\n        icon: undefined,\n      };\n  }\n};\n\nconst getNodeCardBasedIcon = (nodeType: INodeDataProps['node_type']) => {\n  switch (nodeType) {\n    case 'LEVEL2':\n    case 'LEVEL3':\n    case 'HIDDEN_BASIC':\n      return {\n        lottie: LOTTIE.COMPETITIVE_ARENA,\n      };\n    case 'LEARNING':\n    case 'SAT_MATH_LEARNING':\n    case 'SAT_ENGLISH_LEARNING':\n      return {\n        lottie: LOTTIE.LEARN,\n      };\n    case 'RECAP':\n    case 'REMEDIAL':\n    case 'REVISION':\n    case 'PPT_BASIC':\n    case 'SAT_MATH_RECAP':\n    case 'SAT_ENGLISH_RECAP':\n      return {\n        lottie: LOTTIE.RECAP,\n      };\n    case 'DYNAMIC':\n    case 'ASSESSMENT':\n    case 'CHAPTER_ASSESSMENT':\n    case 'DIAGNOSTIC':\n    case 'TURING_ASSESSMENT':\n      return {\n        lottie: LOTTIE.TEST,\n      };\n    case 'PRACTICE':\n    case 'EXTRA_PRACTICE':\n    case 'TARGET_PRACTICE':\n    case 'MASTERY':\n    case 'TURING_PRACTICE':\n    case 'SAT_MATH_ASSESSMENT':\n    case 'SAT_ENGLISH_ASSESSMENT':\n      return {\n        lottie: LOTTIE.PRACTICE,\n      };\n    case 'PUZZLE':\n    case 'PUZZLE_EASY':\n    case 'PUZZLE_MEDIUM':\n    case 'PUZZLE_HARD':\n      return {\n        lottie: LOTTIE.PUZZLE,\n      };\n    case 'TURING_SUBJECTIVE':\n      return {\n        lottie: LOTTIE.SUBJECTIVE,\n      };\n    case 'TURING_BASIC':\n    case 'PYTHON_BASIC':\n    case 'PYTHON_VISUAL':\n      return {\n        lottie: LOTTIE.ACTIVITY,\n      };\n    case 'VIDEO':\n      return {\n        lottie: LOTTIE.VIDEO,\n      };\n    case 'PDF':\n      return {\n        lottie: LOTTIE.DOWNLOAD,\n      };\n    default:\n      return {\n        lottie: LOTTIE.PROJECT,\n      };\n  }\n};\n\nexport { getNodeStateBasedTagInfo, getNodeCardBasedIcon };\n"],"names":["SECONDS_PER_DAY","SECONDS_PER_HOUR","SECONDS_PER_MINUTE","OVERDUE_TAG_STATES","calculateDueDateInfo","dueDateTs","isMilestone","isMathFitCard","currentTimestamp","differenceInSeconds","differenceInHours","differenceInMinutes","differenceInDays","isOverdue","daysText","hoursLeft","minutesLeft","getTimeDisplayText","showWarning","renderTimeDisplayIcon","timeDisplayText","includeStatusIcon","jsxs","InProgressIconWrapper","Text","StatusIcon","getAccuracyText","accuracy","getNodeStateBasedTagInfo","nodeState","isStudent","accuracyText","jsx","ArrowTooltip","FlexView","Lock2Icon","Tag","Check2Icon","ExclamationIcon","getNodeCardBasedIcon","nodeType","LOTTIE"],"mappings":"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"}

package/dist/features/cue-canvas/bottombar/homework-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"homework-controls.js","sources":["../../../../src/features/cue-canvas/bottombar/homework-controls.tsx"],"sourcesContent":["import { memo, useCallback, useState, type FC } from 'react';\n\nimport CheckIcon from '../../../assets/line-icons/icons/check';\nimport ShareIcon from '../../../assets/line-icons/icons/share';\nimport Button from '../../ui/buttons/button/button';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { dataURIToBlob } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport type { IHomeWorkControllerProps } from './bottombar-types';\n\nconst HomeworkController: FC<IHomeWorkControllerProps> = props => {\n  const { width, onSendImageToChat, onMarkAsResolved } = props;\n  const { homeworkId, activeInstance, setHomeworkId } = useCueCanvasActions();\n  const [isBusy, setIsBusy] = useState(false);\n\n  const onSuccess = useCallback(() => {\n    activeInstance?.clearCanvas();\n    setHomeworkId(undefined);\n    setIsBusy(false);\n  }, [activeInstance, setHomeworkId]);\n\n  const getBoardSnapshot = useCallback(async () => {\n    if (!activeInstance) return;\n\n    const snapshot = await activeInstance?.getCanvasAsImage();\n\n    if (!snapshot) {\n      return;\n    }\n\n    const blobdata = dataURIToBlob(snapshot);\n\n    return [blobdata];\n  }, [activeInstance]);\n\n  const handleSendImageToChat = useCallback(async () => {\n    const snapshot = await getBoardSnapshot();\n\n    if (!homeworkId || !onSendImageToChat || !snapshot) return;\n\n    onSendImageToChat?.(homeworkId, snapshot, onSuccess);\n  }, [getBoardSnapshot, homeworkId, onSendImageToChat, onSuccess]);\n\n  const handleMarkAsResolved = useCallback(() => {\n    if (!homeworkId) return;\n    setIsBusy(true);\n    onMarkAsResolved?.(homeworkId, onSuccess);\n  }, [homeworkId, onMarkAsResolved, onSuccess]);\n\n  if (!homeworkId) return null;\n\n  if (isBusy) {\n    return (\n      <FlexView\n        $gapX={1}\n        $gutterX={0.5}\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $width={width}\n        $background=\"YELLOW_1\"\n      >\n        <Text $renderAs=\"body3\" $color=\"BLACK\">\n          Resolving....\n        </Text>\n      </FlexView>\n    );\n  }\n\n  return (\n    <FlexView\n      $flexDirection=\"row\"\n      $gapX={1}\n      $gutterX={0.5}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $width={width}\n      $background=\"YELLOW_1\"\n    >\n      <Button\n        label=\"Mark as reolved\"\n        onClick={handleMarkAsResolved}\n        renderAs={'primary'}\n        Icon={CheckIcon}\n        busy={isBusy}\n      />\n      <Separator width={16} />\n      <Button\n        label=\"Send CueBoard image to chat\"\n        onClick={handleSendImageToChat}\n        renderAs={'primary'}\n        Icon={ShareIcon}\n      />\n    </FlexView>\n  );\n};\n\nexport default memo(HomeworkController);\n"],"names":["HomeworkController","props","width","onSendImageToChat","onMarkAsResolved","homeworkId","activeInstance","setHomeworkId","useCueCanvasActions","isBusy","setIsBusy","useState","onSuccess","useCallback","getBoardSnapshot","snapshot","dataURIToBlob","handleSendImageToChat","handleMarkAsResolved","jsx","FlexView","Text","jsxs","Button","CheckIcon","Separator","ShareIcon","homeworkControls","memo"],"mappings":";;;;;;;;;;AAYA,MAAMA,IAAmD,CAASC,MAAA;AAChE,QAAM,EAAE,OAAAC,GAAO,mBAAAC,GAAmB,kBAAAC,EAAA,IAAqBH,GACjD,EAAE,YAAAI,GAAY,gBAAAC,GAAgB,eAAAC,MAAkBC,EAAoB,GACpE,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAYC,EAAY,MAAM;AAClC,IAAAP,KAAA,QAAAA,EAAgB,eAChBC,EAAc,MAAS,GACvBG,EAAU,EAAK;AAAA,EAAA,GACd,CAACJ,GAAgBC,CAAa,CAAC,GAE5BO,IAAmBD,EAAY,YAAY;AAC/C,QAAI,CAACP,EAAgB;AAEf,UAAAS,IAAW,OAAMT,KAAA,gBAAAA,EAAgB;AAEvC,WAAKS,IAME,CAFUC,EAAcD,CAAQ,CAEvB,IALd;AAAA,EAKc,GACf,CAACT,CAAc,CAAC,GAEbW,IAAwBJ,EAAY,YAAY;AAC9C,UAAAE,IAAW,MAAMD;AAEvB,IAAI,CAACT,KAAc,CAACF,KAAqB,CAACY,KAEtBZ,KAAA,QAAAA,EAAAE,GAAYU,GAAUH;AAAA,KACzC,CAACE,GAAkBT,GAAYF,GAAmBS,CAAS,CAAC,GAEzDM,IAAuBL,EAAY,MAAM;AAC7C,IAAKR,MACLK,EAAU,EAAI,GACdN,KAAA,QAAAA,EAAmBC,GAAYO;AAAA,EAC9B,GAAA,CAACP,GAAYD,GAAkBQ,CAAS,CAAC;AAExC,SAACP,IAEDI,IAEA,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,QAAQlB;AAAA,MACR,aAAY;AAAA,MAEZ,4BAACmB,GAAK,EAAA,WAAU,SAAQ,QAAO,SAAQ,UAEvC,iBAAA;AAAA,IAAA;AAAA,EAAA,IAMJ,gBAAAC;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,OAAO;AAAA,MACP,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,QAAQlB;AAAA,MACR,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAASL;AAAA,YACT,UAAU;AAAA,YACV,MAAMM;AAAA,YACN,MAAMf;AAAA,UAAA;AAAA,QACR;AAAA,QACA,gBAAAU,EAACM,GAAU,EAAA,OAAO,GAAI,CAAA;AAAA,QACtB,gBAAAN;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAASN;AAAA,YACT,UAAU;AAAA,YACV,MAAMS;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA1CoB;AA6C1B,GAEeC,IAAAC,EAAK5B,CAAkB;"}
+{"version":3,"file":"homework-controls.js","sources":["../../../../src/features/cue-canvas/bottombar/homework-controls.tsx"],"sourcesContent":["import { memo, useCallback, useState, type FC } from 'react';\n\nimport CheckIcon from '../../../assets/line-icons/icons/check';\nimport ShareIcon from '../../../assets/line-icons/icons/share';\nimport Button from '../../ui/buttons/button/button';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { dataURIToBlob } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport type { IHomeWorkControllerProps } from './bottombar-types';\n\nconst HomeworkController: FC<IHomeWorkControllerProps> = props => {\n  const { width, onSendImageToChat, onMarkAsResolved } = props;\n  const { homeworkId, activeInstance, setHomeworkId } = useCueCanvasActions();\n  const [isBusy, setIsBusy] = useState(false);\n\n  const onSuccess = useCallback(() => {\n    activeInstance?.clearCanvas();\n    setHomeworkId(undefined);\n    setIsBusy(false);\n  }, [activeInstance, setHomeworkId]);\n\n  const getBoardSnapshot = useCallback(async () => {\n    if (!activeInstance) return;\n\n    const snapshot = await activeInstance?.getCanvasAsImage();\n\n    if (!snapshot) {\n      return;\n    }\n\n    const blobdata = dataURIToBlob(snapshot);\n\n    return [blobdata];\n  }, [activeInstance]);\n\n  const handleSendImageToChat = useCallback(async () => {\n    const snapshot = await getBoardSnapshot();\n\n    if (!homeworkId || !onSendImageToChat || !snapshot) return;\n\n    onSendImageToChat?.(homeworkId, snapshot, onSuccess);\n  }, [getBoardSnapshot, homeworkId, onSendImageToChat, onSuccess]);\n\n  const handleMarkAsResolved = useCallback(() => {\n    if (!homeworkId) return;\n    setIsBusy(true);\n    onMarkAsResolved?.(homeworkId, onSuccess);\n  }, [homeworkId, onMarkAsResolved, onSuccess]);\n\n  if (!homeworkId) return null;\n\n  if (isBusy) {\n    return (\n      <FlexView\n        $gapX={1}\n        $gutterX={0.5}\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $width={width}\n        $background=\"YELLOW_1\"\n      >\n        <Text $renderAs=\"body3\" $color=\"BLACK\">\n          Resolving....\n        </Text>\n      </FlexView>\n    );\n  }\n\n  return (\n    <FlexView\n      $flexDirection=\"row\"\n      $gapX={1}\n      $gutterX={0.5}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $width={width}\n      $background=\"YELLOW_1\"\n    >\n      <Button\n        label=\"Mark as reolved\"\n        onClick={handleMarkAsResolved}\n        renderAs={'primary'}\n        Icon={CheckIcon}\n        busy={isBusy}\n      />\n      <Separator width={16} />\n      <Button\n        label=\"Send CueBoard image to chat\"\n        onClick={handleSendImageToChat}\n        renderAs={'primary'}\n        Icon={ShareIcon}\n      />\n    </FlexView>\n  );\n};\n\nexport default memo(HomeworkController);\n"],"names":["HomeworkController","props","width","onSendImageToChat","onMarkAsResolved","homeworkId","activeInstance","setHomeworkId","useCueCanvasActions","isBusy","setIsBusy","useState","onSuccess","useCallback","getBoardSnapshot","snapshot","dataURIToBlob","handleSendImageToChat","handleMarkAsResolved","jsx","FlexView","Text","jsxs","Button","CheckIcon","Separator","ShareIcon","HomeworkControls","memo"],"mappings":";;;;;;;;;;AAYA,MAAMA,IAAmD,CAASC,MAAA;AAChE,QAAM,EAAE,OAAAC,GAAO,mBAAAC,GAAmB,kBAAAC,EAAA,IAAqBH,GACjD,EAAE,YAAAI,GAAY,gBAAAC,GAAgB,eAAAC,MAAkBC,EAAoB,GACpE,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAYC,EAAY,MAAM;AAClC,IAAAP,KAAA,QAAAA,EAAgB,eAChBC,EAAc,MAAS,GACvBG,EAAU,EAAK;AAAA,EAAA,GACd,CAACJ,GAAgBC,CAAa,CAAC,GAE5BO,IAAmBD,EAAY,YAAY;AAC/C,QAAI,CAACP,EAAgB;AAEf,UAAAS,IAAW,OAAMT,KAAA,gBAAAA,EAAgB;AAEvC,WAAKS,IAME,CAFUC,EAAcD,CAAQ,CAEvB,IALd;AAAA,EAKc,GACf,CAACT,CAAc,CAAC,GAEbW,IAAwBJ,EAAY,YAAY;AAC9C,UAAAE,IAAW,MAAMD;AAEvB,IAAI,CAACT,KAAc,CAACF,KAAqB,CAACY,KAEtBZ,KAAA,QAAAA,EAAAE,GAAYU,GAAUH;AAAA,KACzC,CAACE,GAAkBT,GAAYF,GAAmBS,CAAS,CAAC,GAEzDM,IAAuBL,EAAY,MAAM;AAC7C,IAAKR,MACLK,EAAU,EAAI,GACdN,KAAA,QAAAA,EAAmBC,GAAYO;AAAA,EAC9B,GAAA,CAACP,GAAYD,GAAkBQ,CAAS,CAAC;AAExC,SAACP,IAEDI,IAEA,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,QAAQlB;AAAA,MACR,aAAY;AAAA,MAEZ,4BAACmB,GAAK,EAAA,WAAU,SAAQ,QAAO,SAAQ,UAEvC,iBAAA;AAAA,IAAA;AAAA,EAAA,IAMJ,gBAAAC;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,OAAO;AAAA,MACP,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,QAAQlB;AAAA,MACR,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAASL;AAAA,YACT,UAAU;AAAA,YACV,MAAMM;AAAA,YACN,MAAMf;AAAA,UAAA;AAAA,QACR;AAAA,QACA,gBAAAU,EAACM,GAAU,EAAA,OAAO,GAAI,CAAA;AAAA,QACtB,gBAAAN;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAASN;AAAA,YACT,UAAU;AAAA,YACV,MAAMS;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA1CoB;AA6C1B,GAEeC,IAAAC,EAAK5B,CAAkB;"}

package/dist/features/cue-canvas/sidebar/sidebar.js

@@ -3,15 +3,15 @@ import { memo as p, useState as d, useMemo as f } from "react";
 import c from "../../ui/layout/flex-view.js";
 import o from "../../ui/separator/separator.js";
 import l from "./homework/homework.js";
-import s from "./puzzles/puzzles.js";
-import { SideBarContainer as u } from "./sidebar-styled.js";
+import u from "./puzzles/puzzles.js";
+import { SideBarContainer as s } from "./sidebar-styled.js";
 import x from "./tiles/tile.js";
 const S = ({ grade: m, hwRequests: t }) => {
   const [r, i] = d(), a = f(() => r === "tile" ? "300px" : r === "homework" ? "248px" : r === "puzzle" ? "650px" : "auto", [r]);
-  return /* @__PURE__ */ e(u, { $activeSidebar: r, $width: a, children: /* @__PURE__ */ n(c, { $flexDirection: "row", children: [
+  return /* @__PURE__ */ e(s, { $activeSidebar: r, $width: a, children: /* @__PURE__ */ n(c, { $flexDirection: "row", children: [
     /* @__PURE__ */ e(x, { activeSidebar: r, setActiveSidebar: i }),
     /* @__PURE__ */ e(o, { width: 8 }),
-    /* @__PURE__ */ e(s, { grade: m, activeSidebar: r, setActiveSidebar: i }),
+    /* @__PURE__ */ e(u, { grade: m, activeSidebar: r, setActiveSidebar: i }),
     /* @__PURE__ */ e(o, { width: 8 }),
     t && t.length > 0 && /* @__PURE__ */ e(
       l,

package/dist/features/cue-canvas/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../../../src/features/cue-canvas/sidebar/sidebar.tsx"],"sourcesContent":["import { memo, useMemo, useState, type FC } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Homework from './homework/homework';\nimport type { IHomeWorkHelpRequestModelWithStudentName } from './homework/homework-types';\nimport Puzzles from './puzzles/puzzles';\nimport type { TActiveSidebar } from './puzzles/puzzles-type';\nimport { SideBarContainer } from './sidebar-styled';\nimport TileBar from './tiles/tile';\n\ninterface ISidebar {\n  grade?: string;\n  hwRequests?: IHomeWorkHelpRequestModelWithStudentName[];\n}\n\nconst Sidebar: FC<ISidebar> = ({ grade, hwRequests }) => {\n  const [activeSidebar, setActiveSidebar] = useState<TActiveSidebar | undefined>();\n\n  const width = useMemo(() => {\n    if (activeSidebar === 'tile') {\n      return '300px';\n    }\n\n    if (activeSidebar === 'homework') {\n      return '248px';\n    }\n\n    if (activeSidebar === 'puzzle') {\n      return '650px';\n    }\n\n    return 'auto';\n  }, [activeSidebar]);\n\n  return (\n    <SideBarContainer $activeSidebar={activeSidebar} $width={width}>\n      <FlexView $flexDirection=\"row\">\n        <TileBar activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n        <Separator width={8} />\n        <Puzzles grade={grade} activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n        <Separator width={8} />\n\n        {hwRequests && hwRequests.length > 0 && (\n          <Homework\n            activeSidebar={activeSidebar}\n            setActiveSidebar={setActiveSidebar}\n            hwRequests={hwRequests}\n          />\n        )}\n      </FlexView>\n    </SideBarContainer>\n  );\n};\n\nexport default memo(Sidebar);\n"],"names":["Sidebar","grade","hwRequests","activeSidebar","setActiveSidebar","useState","width","useMemo","jsx","SideBarContainer","jsxs","FlexView","TileBar","Separator","Puzzles","Homework","sidebar","memo"],"mappings":";;;;;;;;AAgBA,MAAMA,IAAwB,CAAC,EAAE,OAAAC,GAAO,YAAAC,QAAiB;AACvD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAqC,GAEzEC,IAAQC,EAAQ,MAChBJ,MAAkB,SACb,UAGLA,MAAkB,aACb,UAGLA,MAAkB,WACb,UAGF,QACN,CAACA,CAAa,CAAC;AAGhB,SAAA,gBAAAK,EAACC,KAAiB,gBAAgBN,GAAe,QAAQG,GACvD,UAAA,gBAAAI,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAQ,eAAAT,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,IAC3E,gBAAAI,EAACK,GAAU,EAAA,OAAO,EAAG,CAAA;AAAA,IACpB,gBAAAL,EAAAM,GAAA,EAAQ,OAAAb,GAAc,eAAAE,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,IACzF,gBAAAI,EAACK,GAAU,EAAA,OAAO,EAAG,CAAA;AAAA,IAEpBX,KAAcA,EAAW,SAAS,KACjC,gBAAAM;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,eAAAZ;AAAA,QACA,kBAAAC;AAAA,QACA,YAAAF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEec,IAAAC,EAAKjB,CAAO;"}
+{"version":3,"file":"sidebar.js","sources":["../../../../src/features/cue-canvas/sidebar/sidebar.tsx"],"sourcesContent":["import { memo, useMemo, useState, type FC } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Homework from './homework/homework';\nimport type { IHomeWorkHelpRequestModelWithStudentName } from './homework/homework-types';\nimport Puzzles from './puzzles/puzzles';\nimport type { TActiveSidebar } from './puzzles/puzzles-type';\nimport { SideBarContainer } from './sidebar-styled';\nimport TileBar from './tiles/tile';\n\ninterface ISidebar {\n  grade?: string;\n  hwRequests?: IHomeWorkHelpRequestModelWithStudentName[];\n}\n\nconst Sidebar: FC<ISidebar> = ({ grade, hwRequests }) => {\n  const [activeSidebar, setActiveSidebar] = useState<TActiveSidebar | undefined>();\n\n  const width = useMemo(() => {\n    if (activeSidebar === 'tile') {\n      return '300px';\n    }\n\n    if (activeSidebar === 'homework') {\n      return '248px';\n    }\n\n    if (activeSidebar === 'puzzle') {\n      return '650px';\n    }\n\n    return 'auto';\n  }, [activeSidebar]);\n\n  return (\n    <SideBarContainer $activeSidebar={activeSidebar} $width={width}>\n      <FlexView $flexDirection=\"row\">\n        <TileBar activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n        <Separator width={8} />\n        <Puzzles grade={grade} activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n        <Separator width={8} />\n\n        {hwRequests && hwRequests.length > 0 && (\n          <Homework\n            activeSidebar={activeSidebar}\n            setActiveSidebar={setActiveSidebar}\n            hwRequests={hwRequests}\n          />\n        )}\n      </FlexView>\n    </SideBarContainer>\n  );\n};\n\nexport default memo(Sidebar);\n"],"names":["Sidebar","grade","hwRequests","activeSidebar","setActiveSidebar","useState","width","useMemo","jsx","SideBarContainer","jsxs","FlexView","TileBar","Separator","Puzzles","Homework","Sidebar$1","memo"],"mappings":";;;;;;;;AAgBA,MAAMA,IAAwB,CAAC,EAAE,OAAAC,GAAO,YAAAC,QAAiB;AACvD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAqC,GAEzEC,IAAQC,EAAQ,MAChBJ,MAAkB,SACb,UAGLA,MAAkB,aACb,UAGLA,MAAkB,WACb,UAGF,QACN,CAACA,CAAa,CAAC;AAGhB,SAAA,gBAAAK,EAACC,KAAiB,gBAAgBN,GAAe,QAAQG,GACvD,UAAA,gBAAAI,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAQ,eAAAT,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,IAC3E,gBAAAI,EAACK,GAAU,EAAA,OAAO,EAAG,CAAA;AAAA,IACpB,gBAAAL,EAAAM,GAAA,EAAQ,OAAAb,GAAc,eAAAE,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,IACzF,gBAAAI,EAACK,GAAU,EAAA,OAAO,EAAG,CAAA;AAAA,IAEpBX,KAAcA,EAAW,SAAS,KACjC,gBAAAM;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,eAAAZ;AAAA,QACA,kBAAAC;AAAA,QACA,YAAAF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEec,IAAAC,EAAKjB,CAAO;"}

package/dist/features/cue-canvas/toolbar/toolbar.js

@@ -1,21 +1,25 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { memo as c, useEffect as l } from "react";
-import f from "../../ui/layout/flex-view.js";
-import { getUserTools as u } from "../cue-canvas-helpers.js";
-import { useCueCanvasActions as p } from "../hooks/use-cue-canvas-actions.js";
-import C from "./color-picker-menu.js";
-import b from "./tool.js";
-import v from "./whiteboard-toolbar.js";
-const x = c(function({ userType: t, renderAs: e }) {
-  const i = u(t, e), { activeInstance: o, activeTool: a, activeColor: m } = p();
-  return l(() => {
-    o && (o.setColor(m), o.setTool(a));
-  }, [o]), e === "whiteboard" ? /* @__PURE__ */ r(v, { tools: i, userType: t }) : /* @__PURE__ */ s(f, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.25, children: [
-    i.map((n) => /* @__PURE__ */ r(b, { tool: n, shouldAnimate: !0 }, n)),
-    /* @__PURE__ */ r(C, { userType: t, renderAs: "canvas" })
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { memo as l, useEffect as f } from "react";
+import u from "../../ui/layout/flex-view.js";
+import { getUserTools as p } from "../cue-canvas-helpers.js";
+import { useCueCanvasActions as C } from "../hooks/use-cue-canvas-actions.js";
+import b from "./color-picker-menu.js";
+import v from "./tool.js";
+import x from "./whiteboard-toolbar.js";
+const T = l(function({
+  userType: t,
+  renderAs: e,
+  withGutter: a = !0
+}) {
+  const i = p(t, e), { activeInstance: o, activeTool: m, activeColor: s } = C();
+  return f(() => {
+    o && (o.setColor(s), o.setTool(m));
+  }, [o]), e === "whiteboard" ? /* @__PURE__ */ r(x, { tools: i, userType: t, withGutter: a }) : /* @__PURE__ */ c(u, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.25, children: [
+    i.map((n) => /* @__PURE__ */ r(v, { tool: n, shouldAnimate: !0 }, n)),
+    /* @__PURE__ */ r(b, { userType: t, renderAs: "canvas" })
   ] });
-}), k = x;
+}), D = T;
 export {
-  k as default
+  D as default
 };
 //# sourceMappingURL=toolbar.js.map

package/dist/features/cue-canvas/toolbar/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import { memo, useEffect, type FC } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport type { IToolbarProps } from '../types/toolbar';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: FC<IToolbarProps> = memo(function Toolbar({ userType, renderAs }) {\n  const tools = getUserTools(userType, renderAs);\n  const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n\n  // This effect ensures that the selected tool and color are applied to the cueCanvas instance\n  // whenever it changes. For example, if a user selects a tool and color, then navigates to a\n  // different question (causing a new cueCanvas instance), the same tool and color will be set\n  // on the new instance.\n  // Disabling the exhaustive-deps rule here because we want to run this effect only\n  // when the cueCanvas instance is set, not on every tool & color change.\n  useEffect(() => {\n    if (cueCanvas) {\n      cueCanvas.setColor(activeColor);\n\n      cueCanvas.setTool(activeTool);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [cueCanvas]);\n\n  if (renderAs === 'whiteboard') {\n    return <WhiteboardToolbar tools={tools} userType={userType} />;\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.25}>\n      {tools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate />\n      ))}\n      <ColorPickerMenu userType={userType} renderAs=\"canvas\" />\n    </FlexView>\n  );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;AAUA,MAAMA,IAA6BC,EAAK,SAAiB,EAAE,UAAAC,GAAU,UAAAC,KAAY;AACzE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAiB/D,SATAC,EAAU,MAAM;AACd,IAAIJ,MACFA,EAAU,SAASE,CAAW,GAE9BF,EAAU,QAAQC,CAAU;AAAA,EAC9B,GAEC,CAACD,CAAS,CAAC,GAEVH,MAAa,eACR,gBAAAQ,EAACC,GAAkB,EAAA,OAAAR,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAW,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,MACrF,UAAA;AAAA,IAAMV,EAAA,IAAI,OACR,gBAAAO,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACA,gBAAAL,EAAAM,GAAA,EAAgB,UAAAf,GAAoB,UAAS,SAAS,CAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CAAC,GAEDgB,IAAelB;"}
+{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import { memo, useEffect, type FC } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport type { IToolbarProps } from '../types/toolbar';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: FC<IToolbarProps> = memo(function Toolbar({\n  userType,\n  renderAs,\n  withGutter = true,\n}) {\n  const tools = getUserTools(userType, renderAs);\n  const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n\n  // This effect ensures that the selected tool and color are applied to the cueCanvas instance\n  // whenever it changes. For example, if a user selects a tool and color, then navigates to a\n  // different question (causing a new cueCanvas instance), the same tool and color will be set\n  // on the new instance.\n  // Disabling the exhaustive-deps rule here because we want to run this effect only\n  // when the cueCanvas instance is set, not on every tool & color change.\n  useEffect(() => {\n    if (cueCanvas) {\n      cueCanvas.setColor(activeColor);\n\n      cueCanvas.setTool(activeTool);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [cueCanvas]);\n\n  if (renderAs === 'whiteboard') {\n    return <WhiteboardToolbar tools={tools} userType={userType} withGutter={withGutter} />;\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.25}>\n      {tools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate />\n      ))}\n      <ColorPickerMenu userType={userType} renderAs=\"canvas\" />\n    </FlexView>\n  );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","withGutter","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;AAUA,MAAMA,IAA6BC,EAAK,SAAiB;AAAA,EACvD,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAG;AACK,QAAAC,IAAQC,EAAaJ,GAAUC,CAAQ,GACvC,EAAE,gBAAgBI,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAiB/D,SATAC,EAAU,MAAM;AACd,IAAIJ,MACFA,EAAU,SAASE,CAAW,GAE9BF,EAAU,QAAQC,CAAU;AAAA,EAC9B,GAEC,CAACD,CAAS,CAAC,GAEVJ,MAAa,eACP,gBAAAS,EAAAC,GAAA,EAAkB,OAAAR,GAAc,UAAAH,GAAoB,YAAAE,EAAwB,CAAA,IAIpF,gBAAAU,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,MACrF,UAAA;AAAA,IAAMV,EAAA,IAAI,OACR,gBAAAO,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACA,gBAAAL,EAAAM,GAAA,EAAgB,UAAAhB,GAAoB,UAAS,SAAS,CAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CAAC,GAEDiB,IAAenB;"}

package/dist/features/cue-canvas/toolbar/whiteboard-toolbar.js

@@ -1,20 +1,30 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { memo as a } from "react";
-import l from "../../ui/layout/flex-view.js";
-import c from "./color-picker-menu.js";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { memo as l } from "react";
+import c from "../../ui/layout/flex-view.js";
+import p from "./color-picker-menu.js";
 import i from "./tool.js";
-const b = a(function({
+const T = l(function({
   tools: e,
-  userType: t
+  userType: t,
+  withGutter: m
 }) {
-  const m = e.slice(0, 4), n = e.slice(4);
-  return /* @__PURE__ */ s(l, { $flexDirection: "row", $alignItems: "center", $position: "relative", $flexGapX: 0.25, children: [
-    m.map((o) => /* @__PURE__ */ r(i, { tool: o, shouldAnimate: !0 }, o)),
-    /* @__PURE__ */ r(c, { userType: t, renderAs: "whiteboard" }),
-    n.map((o) => /* @__PURE__ */ r(i, { tool: o }, o))
-  ] });
+  const n = e.slice(0, 4), s = e.slice(4);
+  return /* @__PURE__ */ a(
+    c,
+    {
+      $flexDirection: "row",
+      $alignItems: "center",
+      $position: "relative",
+      $flexGapX: m ? 0.25 : 0,
+      children: [
+        n.map((o) => /* @__PURE__ */ r(i, { tool: o, shouldAnimate: !0 }, o)),
+        /* @__PURE__ */ r(p, { userType: t, renderAs: "whiteboard" }),
+        s.map((o) => /* @__PURE__ */ r(i, { tool: o }, o))
+      ]
+    }
+  );
 });
 export {
-  b as default
+  T as default
 };
 //# sourceMappingURL=whiteboard-toolbar.js.map

package/dist/features/cue-canvas/toolbar/whiteboard-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/whiteboard-toolbar.tsx"],"sourcesContent":["import { memo, type FC } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport type { IWhiteboardToolbar } from '../types/toolbar';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\n\nconst WhiteboardToolbar: FC<IWhiteboardToolbar> = memo(function WhiteboardToolbar({\n  tools,\n  userType,\n}) {\n  const writingTools = tools.slice(0, 4);\n  const otherTools = tools.slice(4);\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $position=\"relative\" $flexGapX={0.25}>\n      {writingTools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate={true} />\n      ))}\n      <ColorPickerMenu userType={userType} renderAs=\"whiteboard\" />\n      {otherTools.map(tool => (\n        <Tool tool={tool} key={tool} />\n      ))}\n    </FlexView>\n  );\n});\n\nexport default WhiteboardToolbar;\n"],"names":["WhiteboardToolbar","memo","tools","userType","writingTools","otherTools","jsxs","FlexView","jsx","Tool","tool","ColorPickerMenu"],"mappings":";;;;;AAOM,MAAAA,IAA4CC,EAAK,SAA2B;AAAA,EAChF,OAAAC;AAAA,EACA,UAAAC;AACF,GAAG;AACD,QAAMC,IAAeF,EAAM,MAAM,GAAG,CAAC,GAC/BG,IAAaH,EAAM,MAAM,CAAC;AAG9B,SAAA,gBAAAI,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,WAAU,YAAW,WAAW,MACjF,UAAA;AAAA,IAAaH,EAAA,IAAI,OACf,gBAAAI,EAAAC,GAAA,EAAK,MAAAC,GAAuB,eAAe,GAAA,GAArBA,CAA2B,CACnD;AAAA,IACA,gBAAAF,EAAAG,GAAA,EAAgB,UAAAR,GAAoB,UAAS,aAAa,CAAA;AAAA,IAC1DE,EAAW,IAAI,CAAAK,wBACbD,GAAK,EAAA,MAAAC,KAAiBA,CAAM,CAC9B;AAAA,EACH,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"whiteboard-toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/whiteboard-toolbar.tsx"],"sourcesContent":["import { memo, type FC } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport type { IWhiteboardToolbar } from '../types/toolbar';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\n\nconst WhiteboardToolbar: FC<IWhiteboardToolbar> = memo(function WhiteboardToolbar({\n  tools,\n  userType,\n  withGutter,\n}) {\n  const writingTools = tools.slice(0, 4);\n  const otherTools = tools.slice(4);\n\n  return (\n    <FlexView\n      $flexDirection=\"row\"\n      $alignItems=\"center\"\n      $position=\"relative\"\n      $flexGapX={withGutter ? 0.25 : 0}\n    >\n      {writingTools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate={true} />\n      ))}\n      <ColorPickerMenu userType={userType} renderAs=\"whiteboard\" />\n      {otherTools.map(tool => (\n        <Tool tool={tool} key={tool} />\n      ))}\n    </FlexView>\n  );\n});\n\nexport default WhiteboardToolbar;\n"],"names":["WhiteboardToolbar","memo","tools","userType","withGutter","writingTools","otherTools","jsxs","FlexView","jsx","Tool","tool","ColorPickerMenu"],"mappings":";;;;;AAOM,MAAAA,IAA4CC,EAAK,SAA2B;AAAA,EAChF,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,GAAG;AACD,QAAMC,IAAeH,EAAM,MAAM,GAAG,CAAC,GAC/BI,IAAaJ,EAAM,MAAM,CAAC;AAG9B,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,WAAWJ,IAAa,OAAO;AAAA,MAE9B,UAAA;AAAA,QAAaC,EAAA,IAAI,OACf,gBAAAI,EAAAC,GAAA,EAAK,MAAAC,GAAuB,eAAe,GAAA,GAArBA,CAA2B,CACnD;AAAA,QACA,gBAAAF,EAAAG,GAAA,EAAgB,UAAAT,GAAoB,UAAS,aAAa,CAAA;AAAA,QAC1DG,EAAW,IAAI,CAAAK,wBACbD,GAAK,EAAA,MAAAC,KAAiBA,CAAM,CAC9B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -1,6 +1,6 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { memo as F, useMemo as G, useState as j, useRef as _, useCallback as w, useLayoutEffect as K } from "react";
-import U from "../../assets/line-icons/icons/closed-eye.js";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { memo as U, useMemo as F, useState as G, useRef as b, useCallback as w, useLayoutEffect as j } from "react";
+import K from "../../assets/line-icons/icons/closed-eye.js";
 import y from "../chapters-v2/comps/node-card/node-card-tags.js";
 import { getNodeTypeBasedBgImage as V } from "../chapters-v2/utils/index.js";
 import { getNodeCardBasedIcon as Z } from "../chapters-v2/utils/node-card-utils.js";
@@ -12,8 +12,8 @@ import J from "../ui/lottie-animation/lottie-animation.js";
 import Q from "./card-title.js";
 import { EHWCardListEntityType as ee } from "./hw-card-list/hw-card-list-types.js";
 import A from "./node-progress.js";
-import { PuzzleCardWrapper as te, CardWrapper as re, IconWrapper as oe, BannerImageWrapper as ie, BannerImage as ne, HeaderText as de, SubHeaderText as se } from "./styles.js";
-const ae = { renderer: "canvas", autoplay: !1 }, le = ({
+import { PuzzleCardWrapper as re, CardWrapper as te, IconWrapper as oe, BannerImageWrapper as ie, BannerImage as ne, HeaderText as de, SubHeaderText as ae } from "./styles.js";
+const le = { renderer: "canvas", autoplay: !1 }, se = ({
   header: E,
   isInQueue: k,
   nodeData: i,
@@ -23,28 +23,28 @@ const ae = { renderer: "canvas", autoplay: !1 }, le = ({
   isMilestone: d = !1,
   puzzleHWCardRef: x,
   entityType: N,
-  state: t,
+  state: r,
   score: O,
-  imageUrl: f,
   mathFitCardRef: v
 }) => {
   const {
-    node_type: r,
+    node_type: t,
     accuracy: I,
     due_date_ts: o,
-    image_hue: s,
+    image_url: f,
+    image_hue: a,
     card_header: z = "",
     unlocked_on_ts: m,
     course_type: D,
     title: H
-  } = i, L = r === "PUZZLE_CARD", $ = N === ee.MATHFIT_TEST, g = n === "STUDENT" && t === "LOCKED", b = t === "LOCKED" || n === "TEACHER" && t !== "COMPLETED" && t !== "EXPIRED", S = G(() => t === "LOCKED" ? $ ? "Take test after class" : "Not available to student" : "Sheet is not completed yet", [t, $]), [X, R] = j(!1), p = _(null), B = V(r), T = _(null), { lottie: P } = Z(r), W = w(() => {
-    var a;
-    (a = T.current) == null || a.play();
+  } = i, L = t === "PUZZLE_CARD", g = N === ee.MATHFIT_TEST, $ = n === "STUDENT" && r === "LOCKED", _ = r === "LOCKED" || n === "TEACHER" && r !== "COMPLETED" && r !== "EXPIRED", S = F(() => r === "LOCKED" ? g ? "Take test after class" : "Not available to student" : "Sheet is not completed yet", [r, g]), [X, R] = G(!1), p = b(null), B = V(t), T = b(null), { lottie: P } = Z(t), W = w(() => {
+    var l;
+    (l = T.current) == null || l.play();
   }, []), M = w(() => {
-    var a;
-    (a = T.current) == null || a.stop();
+    var l;
+    (l = T.current) == null || l.stop();
   }, []);
-  return K(() => {
+  return j(() => {
     p.current && p.current.scrollHeight > p.current.clientHeight && R(!0);
   }, []), L ? /* @__PURE__ */ e(
     u,
@@ -52,31 +52,31 @@ const ae = { renderer: "canvas", autoplay: !1 }, le = ({
       renderAs: "primary",
       tooltipItem: "Solve puzzle after class",
       position: "bottom",
-      hidden: !g,
-      children: /* @__PURE__ */ e("div", { ref: x, children: /* @__PURE__ */ l(
-        te,
+      hidden: !$,
+      children: /* @__PURE__ */ e("div", { ref: x, children: /* @__PURE__ */ s(
+        re,
         {
           ref: h,
           $position: "relative",
-          $background: `${s}_2`,
-          $disabled: g,
+          $background: `${a}_2`,
+          $disabled: $,
           children: [
             /* @__PURE__ */ e(
               q,
               {
-                imageHue: s,
+                imageHue: a,
                 imageUrl: f ?? "",
                 title: H,
                 width: 126,
                 height: 159,
-                disabled: g
+                disabled: $
               }
             ),
             /* @__PURE__ */ e(
               y,
               {
-                nodeType: r,
-                state: t,
+                nodeType: t,
+                state: r,
                 accuracy: I,
                 dueDateTs: o,
                 isStudent: n === "STUDENT",
@@ -88,48 +88,48 @@ const ae = { renderer: "canvas", autoplay: !1 }, le = ({
               {
                 dueDate: o * 1e3,
                 unlockedOn: m * 1e3,
-                progressBg: `${s || "ORANGE"}_5`
+                progressBg: `${a || "ORANGE"}_5`
               }
             )
           ]
         }
       ) })
     }
-  ) : $ ? /* @__PURE__ */ e(
+  ) : g ? /* @__PURE__ */ e(
     u,
     {
       renderAs: "primary",
       tooltipItem: S,
       position: "bottom",
-      hidden: !b,
+      hidden: !_,
       children: /* @__PURE__ */ e("div", { ref: v, children: /* @__PURE__ */ e(
         Y,
         {
           score: O,
           dueDateTs: i.due_date_ts,
           nodeType: "DYNAMIC",
-          state: t,
+          state: r,
           subHeader: C,
           unlockedOnTs: i == null ? void 0 : i.unlocked_on_ts,
           userType: n,
-          isMathFitDisabled: b,
+          isMathFitDisabled: _,
           isMilestone: d,
           studentContainerRef: h
         }
       ) })
     }
-  ) : /* @__PURE__ */ l(
+  ) : /* @__PURE__ */ s(
     c,
     {
       ref: h,
       $widthX: 12.38,
       $position: "relative",
-      $background: `${s || "ORANGE"}_2`,
+      $background: `${a || "ORANGE"}_2`,
       onMouseEnter: W,
       onMouseLeave: M,
       children: [
-        /* @__PURE__ */ l(
-          re,
+        /* @__PURE__ */ s(
+          te,
           {
             $flexDirection: "row",
             $alignItems: "center",
@@ -150,10 +150,10 @@ const ae = { renderer: "canvas", autoplay: !1 }, le = ({
                   $position: "relative",
                   $alignItems: "center",
                   $justifyContent: "center",
-                  children: /* @__PURE__ */ e(J, { src: P, ref: T, settings: ae })
+                  children: /* @__PURE__ */ e(J, { src: P, ref: T, settings: le })
                 }
               ),
-              /* @__PURE__ */ e(Q, { cardHeader: z, nodeType: r, courseType: D }),
+              /* @__PURE__ */ e(Q, { cardHeader: z, nodeType: t, courseType: D }),
               k && /* @__PURE__ */ e(
                 u,
                 {
@@ -161,7 +161,7 @@ const ae = { renderer: "canvas", autoplay: !1 }, le = ({
                   tooltipItem: "Not visible to student",
                   position: "bottom",
                   zIndex: 6,
-                  children: /* @__PURE__ */ e(U, {})
+                  children: /* @__PURE__ */ e(K, {})
                 }
               ),
               !!f && /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e(ne, { src: f, alt: "Chapter image" }) })
@@ -171,8 +171,8 @@ const ae = { renderer: "canvas", autoplay: !1 }, le = ({
         /* @__PURE__ */ e(
           y,
           {
-            nodeType: r,
-            state: t,
+            nodeType: t,
+            state: r,
             accuracy: I,
             dueDateTs: o,
             isStudent: n === "STUDENT",
@@ -184,10 +184,10 @@ const ae = { renderer: "canvas", autoplay: !1 }, le = ({
           {
             dueDate: o * 1e3,
             unlockedOn: m * 1e3,
-            progressBg: `${s || "ORANGE"}_4`
+            progressBg: `${a || "ORANGE"}_4`
           }
         ),
-        /* @__PURE__ */ l(c, { $gutterX: 0.75, $gapX: 1, $flexRowGapX: 0.5, $background: "WHITE", children: [
+        /* @__PURE__ */ s(c, { $gutterX: 0.75, $gapX: 1, $flexRowGapX: 0.5, $background: "WHITE", children: [
           /* @__PURE__ */ e(
             u,
             {
@@ -201,7 +201,7 @@ const ae = { renderer: "canvas", autoplay: !1 }, le = ({
               children: /* @__PURE__ */ e(c, { $heightX: 2.5, children: /* @__PURE__ */ e(de, { ref: p, $renderAs: "ab3", children: E }) })
             }
           ),
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ s(
             c,
             {
               $flexDirection: "row",
@@ -209,7 +209,7 @@ const ae = { renderer: "canvas", autoplay: !1 }, le = ({
               $alignItems: "center",
               $justifyContent: "space-between",
               children: [
-                /* @__PURE__ */ e(se, { $renderAs: "ub3", $color: "BLACK_T_60", children: C }),
+                /* @__PURE__ */ e(ae, { $renderAs: "ub3", $color: "BLACK_T_60", children: C }),
                 /* @__PURE__ */ e(c, { $width: 32 })
               ]
             }
@@ -218,7 +218,7 @@ const ae = { renderer: "canvas", autoplay: !1 }, le = ({
       ]
     }
   );
-}, ye = F(le);
+}, ye = U(se);
 export {
   ye as default
 };