@cuemath/leap 2.9.7-rj-3 → 2.9.8-as1

package/dist/features/chapters-v2/chapter-details/chapter-banner/chapter-banner.js

@@ -0,0 +1,98 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { memo as D, useMemo as d } from "react";
+import { ILLUSTRATIONS as b } from "../../../../assets/illustrations/illustrations.js";
+import g from "../../../../assets/line-icons/icons/check2.js";
+import V from "../../../ui/image/image.js";
+import n from "../../../ui/layout/flex-view.js";
+import i from "../../../ui/text/text.js";
+import C from "../../comps/tag/tag.js";
+import { getChapterCompletionPercentage as W } from "../../utils/index.js";
+import { BannerContainer as M, BannerImageWrapper as O, BannerImage as X, ChapterProgressSVG as j, ChapterProgressSVGCircle as $, StyledImportantIcon as f, StyledCheckIcon as H, BannerTitleWrapper as N } from "./chapter-banner-styled.js";
+const a = 52, l = 54, c = 54, re = D((I) => {
+  const { progressStats: o, imageHue: S, title: x, imageUrl: R, bannerRef: u } = I, t = d(() => W(o), [o]), { iconTopVal: E, iconLeftVal: w } = d(() => {
+    const h = (-(t === 100 ? 60 : t) * 3.6 - 180) * Math.PI / 180, A = c + a * Math.sin(h), B = l + a * Math.cos(h);
+    return {
+      iconLeftVal: A,
+      iconTopVal: B
+    };
+  }, [t]);
+  if (!o) return null;
+  const { mandatory: T, optional: _, classwork: k } = o, { completed: y = 0, total: s = 0 } = T || {}, { completed: G = 0, total: p = 0 } = _ || {}, { completed: L = 0, total: m = 0 } = k || {}, P = m > 0 && L === m;
+  return /* @__PURE__ */ e(
+    M,
+    {
+      $flexDirection: "row",
+      $justifyContent: "center",
+      $alignItems: "center",
+      $widthX: 50,
+      $background: `${S}_4`,
+      ref: u,
+      children: /* @__PURE__ */ r(n, { $height: 168, $position: "relative", children: [
+        /* @__PURE__ */ e(
+          V,
+          {
+            width: "100%",
+            height: "168px",
+            src: b.CHAPTER_HEADER_BG,
+            alt: "Chapter header background",
+            withLoader: !0
+          }
+        ),
+        /* @__PURE__ */ r(O, { children: [
+          /* @__PURE__ */ e(X, { src: R, alt: "Chapter image" }),
+          /* @__PURE__ */ r(j, { width: "108px", height: "108px", children: [
+            /* @__PURE__ */ e(
+              $,
+              {
+                $progress: 0,
+                r: a,
+                cx: l,
+                cy: c
+              }
+            ),
+            /* @__PURE__ */ e(
+              $,
+              {
+                $progressCircle: !0,
+                $progressBackground: "BLACK",
+                $progress: 3.3 * t,
+                r: a,
+                cx: l,
+                cy: c
+              }
+            )
+          ] }),
+          t > 0 && /* @__PURE__ */ e(f, { $progress: !0, $top: E, $left: w }),
+          t === 100 && /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(C, { Icon: g }) })
+        ] }),
+        /* @__PURE__ */ r(N, { $flexGap: 4, children: [
+          /* @__PURE__ */ e(i, { $renderAs: "ah4-bold", children: x }),
+          /* @__PURE__ */ r(n, { $flexDirection: "row", $alignItems: "center", $flexGapX: 2.75, children: [
+            !!s && /* @__PURE__ */ r(n, { $position: "relative", $flexDirection: "row", children: [
+              /* @__PURE__ */ e(f, {}),
+              /* @__PURE__ */ r(n, { $flexDirection: "row", $alignItems: "center", $flexGap: 8, children: [
+                /* @__PURE__ */ r(i, { $renderAs: "ab2", children: [
+                  "Core - ",
+                  y,
+                  "/",
+                  s
+                ] }),
+                P && /* @__PURE__ */ e(C, { Icon: g, label: "CW" })
+              ] })
+            ] }),
+            p > 0 && /* @__PURE__ */ r(i, { $renderAs: "ab2", children: [
+              "Supplementary - ",
+              G,
+              "/",
+              p
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+});
+export {
+  re as default
+};
+//# sourceMappingURL=chapter-banner.js.map

package/dist/features/chapters-v2/chapter-details/chapter-banner/chapter-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chapter-banner.js","sources":["../../../../../src/features/chapters-v2/chapter-details/chapter-banner/chapter-banner.tsx"],"sourcesContent":["import type { IChapterBannerProps } from './chapter-banner-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport Check2Icon from '../../../../assets/line-icons/icons/check2';\nimport Image from '../../../ui/image/image';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport Tag from '../../comps/tag/tag';\nimport { getChapterCompletionPercentage } from '../../utils';\nimport * as Styled from './chapter-banner-styled';\n\nconst PROGRESS_CIRCLE_RADIUS = 52;\nconst PROGRESS_CIRCLE_CENTER_X = 54;\nconst PROGRESS_CIRCLE_CENTER_Y = 54;\n\n// This component renders a banner for a chapter, displaying its title, progress, and associated tags.\n// It includes an image, progress visualization, and details about the chapter's core and supplementary sheets.\n// It calculates the completion percentage and dynamically positions an icon based on progress.\nconst ChapterBanner: FC<IChapterBannerProps> = memo(props => {\n  const { progressStats, imageHue, title, imageUrl, bannerRef } = props;\n\n  const completionPercentage = useMemo(() => {\n    return getChapterCompletionPercentage(progressStats);\n  }, [progressStats]);\n\n  const { iconTopVal, iconLeftVal } = useMemo(() => {\n    //* Calculate the position of the important icon based on the completion percentage\n    //* Convert degrees to radians\n    const angleInDegree = completionPercentage === 100 ? 60 : completionPercentage;\n\n    const angleInRadian = ((-angleInDegree * 3.6 - 180) * Math.PI) / 180;\n    const positionX = PROGRESS_CIRCLE_CENTER_Y + PROGRESS_CIRCLE_RADIUS * Math.sin(angleInRadian);\n    const positionY = PROGRESS_CIRCLE_CENTER_X + PROGRESS_CIRCLE_RADIUS * Math.cos(angleInRadian);\n\n    return {\n      iconLeftVal: positionX,\n      iconTopVal: positionY,\n    };\n  }, [completionPercentage]);\n\n  if (!progressStats) return null;\n\n  const { mandatory, optional, classwork: classWork } = progressStats;\n  const { completed: completedMandatorySheets = 0, total: totalMandatorySheets = 0 } =\n    mandatory || {};\n  const { completed: completedOptionalSheets = 0, total: totalOptionalSheets = 0 } = optional || {};\n  const { completed: completedClassWorkSheets = 0, total: totalClassWorkSheets = 0 } =\n    classWork || {};\n  const showClassWorkTag =\n    totalClassWorkSheets > 0 && completedClassWorkSheets === totalClassWorkSheets;\n\n  return (\n    <Styled.BannerContainer\n      $flexDirection=\"row\"\n      $justifyContent=\"center\"\n      $alignItems=\"center\"\n      $widthX={50}\n      $background={`${imageHue}_4`}\n      ref={bannerRef}\n    >\n      <FlexView $height={168} $position=\"relative\">\n        <Image\n          width=\"100%\"\n          height=\"168px\"\n          src={ILLUSTRATIONS.CHAPTER_HEADER_BG}\n          alt=\"Chapter header background\"\n          withLoader\n        />\n        <Styled.BannerImageWrapper>\n          <Styled.BannerImage src={imageUrl} alt=\"Chapter image\" />\n          <Styled.ChapterProgressSVG width=\"108px\" height=\"108px\">\n            <Styled.ChapterProgressSVGCircle\n              $progress={0}\n              r={PROGRESS_CIRCLE_RADIUS}\n              cx={PROGRESS_CIRCLE_CENTER_X}\n              cy={PROGRESS_CIRCLE_CENTER_Y}\n            />\n            <Styled.ChapterProgressSVGCircle\n              $progressCircle\n              $progressBackground={'BLACK'}\n              $progress={3.3 * completionPercentage}\n              r={PROGRESS_CIRCLE_RADIUS}\n              cx={PROGRESS_CIRCLE_CENTER_X}\n              cy={PROGRESS_CIRCLE_CENTER_Y}\n            />\n          </Styled.ChapterProgressSVG>\n\n          {completionPercentage > 0 && (\n            <Styled.StyledImportantIcon $progress $top={iconTopVal} $left={iconLeftVal} />\n          )}\n\n          {completionPercentage === 100 && (\n            <Styled.StyledCheckIcon>\n              <Tag Icon={Check2Icon} />\n            </Styled.StyledCheckIcon>\n          )}\n        </Styled.BannerImageWrapper>\n        <Styled.BannerTitleWrapper $flexGap={4}>\n          <Text $renderAs=\"ah4-bold\">{title}</Text>\n          <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={2.75}>\n            {!!totalMandatorySheets && (\n              <FlexView $position=\"relative\" $flexDirection=\"row\">\n                <Styled.StyledImportantIcon />\n                <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGap={8}>\n                  <Text $renderAs=\"ab2\">\n                    Core - {completedMandatorySheets}/{totalMandatorySheets}\n                  </Text>\n                  {showClassWorkTag && <Tag Icon={Check2Icon} label=\"CW\" />}\n                </FlexView>\n              </FlexView>\n            )}\n            {totalOptionalSheets > 0 && (\n              <Text $renderAs=\"ab2\">\n                Supplementary - {completedOptionalSheets}/{totalOptionalSheets}\n              </Text>\n            )}\n          </FlexView>\n        </Styled.BannerTitleWrapper>\n      </FlexView>\n    </Styled.BannerContainer>\n  );\n});\n\nexport default ChapterBanner;\n"],"names":["PROGRESS_CIRCLE_RADIUS","PROGRESS_CIRCLE_CENTER_X","PROGRESS_CIRCLE_CENTER_Y","ChapterBanner","memo","props","progressStats","imageHue","title","imageUrl","bannerRef","completionPercentage","useMemo","getChapterCompletionPercentage","iconTopVal","iconLeftVal","angleInRadian","positionX","positionY","mandatory","optional","classWork","completedMandatorySheets","totalMandatorySheets","completedOptionalSheets","totalOptionalSheets","completedClassWorkSheets","totalClassWorkSheets","showClassWorkTag","jsx","Styled.BannerContainer","jsxs","FlexView","Image","ILLUSTRATIONS","Styled.BannerImageWrapper","Styled.BannerImage","Styled.ChapterProgressSVG","Styled.ChapterProgressSVGCircle","Styled.StyledImportantIcon","Styled.StyledCheckIcon","Tag","Check2Icon","Styled.BannerTitleWrapper","Text"],"mappings":"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"}

package/dist/features/chapters-v2/chapter-details/chapter-details-styled.js

@@ -0,0 +1,51 @@
+import o from "styled-components";
+import r from "../../ui/layout/flex-view.js";
+const a = o.div(({ theme: t }) => `
+    height: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(204, 204, 204, 0.25);
+    z-index: 2;
+
+    & * {
+      pointer-events: none;
+    }
+
+    & img {
+      top: 50%;
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: ${t.layout.gutter * 5}px;
+      height: ${t.layout.gutter * 5}px;
+      filter: brightness(0);
+    }
+  `), p = o(r)(
+  ({ $disablePointerEvents: t, theme: e }) => `
+      position: relative;
+      margin: 0 auto;
+      pointer-events: ${t ? "none" : "auto"};
+      border: 1px solid ${e.colors.WHITE_5};
+      border-top: none;
+    `
+), s = o(r)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 6;
+`, l = o(r)(({ theme: t }) => `
+    position: sticky;
+    top: ${t.layout.gutter}px;
+    transform: translateX(${t.layout.gutter}px);
+    z-index: 6;
+  `);
+export {
+  s as BackButtonContainer,
+  l as BackButtonWrapper,
+  p as ContentWrapper,
+  a as LoaderWrapper
+};
+//# sourceMappingURL=chapter-details-styled.js.map

package/dist/features/chapters-v2/chapter-details/chapter-details-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chapter-details-styled.js","sources":["../../../../src/features/chapters-v2/chapter-details/chapter-details-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\n\nconst LoaderWrapper = styled.div(({ theme }) => {\n  return `\n    height: 100%;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background: rgba(204, 204, 204, 0.25);\n    z-index: 2;\n\n    & * {\n      pointer-events: none;\n    }\n\n    & img {\n      top: 50%;\n      position: absolute;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: ${theme.layout.gutter * 5}px;\n      height: ${theme.layout.gutter * 5}px;\n      filter: brightness(0);\n    }\n  `;\n});\n\nconst ContentWrapper = styled(FlexView)<{ $disablePointerEvents: boolean }>(\n  ({ $disablePointerEvents, theme }) => `\n      position: relative;\n      margin: 0 auto;\n      pointer-events: ${$disablePointerEvents ? 'none' : 'auto'};\n      border: 1px solid ${theme.colors.WHITE_5};\n      border-top: none;\n    `,\n);\n\nconst BackButtonContainer = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 6;\n`;\n\nconst BackButtonWrapper = styled(FlexView)(({ theme }) => {\n  return `\n    position: sticky;\n    top: ${theme.layout.gutter}px;\n    transform: translateX(${theme.layout.gutter}px);\n    z-index: 6;\n  `;\n});\n\nexport { ContentWrapper, LoaderWrapper, BackButtonContainer, BackButtonWrapper };\n"],"names":["LoaderWrapper","styled","theme","ContentWrapper","FlexView","$disablePointerEvents","BackButtonContainer","BackButtonWrapper"],"mappings":";;AAIA,MAAMA,IAAgBC,EAAO,IAAI,CAAC,EAAE,OAAAC,QAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAmBMA,EAAM,OAAO,SAAS,CAAC;AAAA,gBACtBA,EAAM,OAAO,SAAS,CAAC;AAAA;AAAA;AAAA,GAItC,GAEKC,IAAiBF,EAAOG,CAAQ;AAAA,EACpC,CAAC,EAAE,uBAAAC,GAAuB,OAAAH,EAAA,MAAY;AAAA;AAAA;AAAA,wBAGhBG,IAAwB,SAAS,MAAM;AAAA,0BACrCH,EAAM,OAAO,OAAO;AAAA;AAAA;AAG9C,GAEMI,IAAsBL,EAAOG,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAOrCG,IAAoBN,EAAOG,CAAQ,EAAE,CAAC,EAAE,OAAAF,QACrC;AAAA;AAAA,WAEEA,EAAM,OAAO,MAAM;AAAA,4BACFA,EAAM,OAAO,MAAM;AAAA;AAAA,GAG9C;"}

package/dist/features/chapters-v2/chapter-details/chapter-details.js

@@ -0,0 +1,129 @@
+import { jsxs as m, jsx as t, Fragment as b } from "react/jsx-runtime";
+import { memo as w, useCallback as L, useEffect as p } from "react";
+import { ILLUSTRATIONS as N } from "../../../assets/illustrations/illustrations.js";
+import _ from "../../../assets/line-icons/icons/back2.js";
+import { useJourney as v } from "../../journey/use-journey/use-journey.js";
+import D from "../../ui/buttons/button/button.js";
+import E from "../../ui/buttons/icon-button/icon-button.js";
+import P from "../../ui/layout/flex-view.js";
+import T from "../../ui/loader/app-loader/app-loader.js";
+import j from "../../ui/text/text.js";
+import { useGetChapterDetails as J } from "../api/chapter.js";
+import F from "./block-sections/block-sections.js";
+import H from "./chapter-banner/chapter-banner.js";
+import { ContentWrapper as O, BackButtonContainer as U, BackButtonWrapper as W, LoaderWrapper as X } from "./chapter-details-styled.js";
+const z = w((f) => {
+  const {
+    userChapterId: n,
+    studentId: i,
+    userType: a,
+    onBlockSkipUnskip: g,
+    onNodeAttempt: u,
+    onNodeAttemptLocationChange: C,
+    onNodeMarkAsDone: k,
+    onNodeReattempt: y,
+    onNodeReview: A,
+    onNodeView: B,
+    onExit: $,
+    startChapterPageJourney: s,
+    chapterPageRef: x,
+    bannerRef: I,
+    coreBlocksRef: R,
+    canStartJourney: c
+  } = f, { isJourneyActive: l } = v(), {
+    get: h,
+    data: e,
+    isProcessing: r,
+    isProcessingFailed: S,
+    isStale: d
+  } = J(), o = L(() => {
+    h(n, void 0, { studentId: i });
+  }, [h, n, i]);
+  return p(() => {
+    o();
+  }, [o]), p(() => {
+    e && c && !l && s && s({
+      chapterDetails: e,
+      userChapterId: n,
+      studentId: i,
+      userType: a
+    });
+  }, [
+    c,
+    e,
+    l,
+    s,
+    i,
+    n,
+    a
+  ]), p(() => {
+    !r && d && o();
+  }, [o, r, d]), S ? /* @__PURE__ */ m(P, { $flexGapX: 1.5, $height: "100vh", $justifyContent: "center", $alignItems: "center", children: [
+    /* @__PURE__ */ t(j, { $renderAs: "h6", children: "Oops! Something went wrong. Please try again later." }),
+    /* @__PURE__ */ t(
+      D,
+      {
+        widthX: 14,
+        size: "small",
+        shape: "square",
+        renderAs: "primary",
+        label: "Try again",
+        onClick: o
+      }
+    )
+  ] }) : !e && r ? /* @__PURE__ */ t(T, { height: "80vh" }) : /* @__PURE__ */ m(
+    O,
+    {
+      ref: x,
+      $widthX: 50,
+      $disablePointerEvents: r,
+      $justifyContent: "center",
+      $alignItems: "center",
+      children: [
+        a === "TEACHER" && /* @__PURE__ */ t(U, { $height: "100%", children: /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(
+          E,
+          {
+            Icon: _,
+            renderAs: "secondary-gray",
+            analyticsLabel: "chapter_page_exit",
+            size: "xsmall",
+            onClick: $
+          }
+        ) }) }),
+        r && /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t("img", { src: N.LOADER_1, alt: "loader" }) }),
+        e && /* @__PURE__ */ m(b, { children: [
+          /* @__PURE__ */ t(
+            H,
+            {
+              title: e.name,
+              imageHue: e.image_hue,
+              imageUrl: e.image_url,
+              progressStats: e == null ? void 0 : e.progress_stat,
+              bannerRef: I
+            }
+          ),
+          /* @__PURE__ */ t(
+            F,
+            {
+              imageHue: e.image_hue,
+              userType: a,
+              blocks: e.blocks,
+              onBlockSkipUnskip: g,
+              onNodeAttempt: u,
+              onNodeAttemptLocationChange: C,
+              onNodeMarkAsDone: k,
+              onNodeReattempt: y,
+              onNodeReview: A,
+              onNodeView: B,
+              coreBlocksRef: R
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}), ae = z;
+export {
+  ae as default
+};
+//# sourceMappingURL=chapter-details.js.map

package/dist/features/chapters-v2/chapter-details/chapter-details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chapter-details.js","sources":["../../../../src/features/chapters-v2/chapter-details/chapter-details.tsx"],"sourcesContent":["import type { IChapterDetails } from './chapter-details-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport Back2Icon from '../../../assets/line-icons/icons/back2';\nimport { useJourney } from '../../journey/use-journey/use-journey';\nimport Button from '../../ui/buttons/button/button';\nimport IconButton from '../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../ui/layout/flex-view';\nimport AppLoader from '../../ui/loader/app-loader/app-loader';\nimport Text from '../../ui/text/text';\nimport { useGetChapterDetails } from '../api/chapter';\nimport BlockSections from './block-sections/block-sections';\nimport ChapterBanner from './chapter-banner/chapter-banner';\nimport * as Styled from './chapter-details-styled';\n\nconst ChapterDetails: FC<IChapterDetails> = memo(props => {\n  const {\n    userChapterId,\n    studentId,\n    userType,\n    onBlockSkipUnskip,\n    onNodeAttempt,\n    onNodeAttemptLocationChange,\n    onNodeMarkAsDone,\n    onNodeReattempt,\n    onNodeReview,\n    onNodeView,\n    onExit,\n    startChapterPageJourney,\n    chapterPageRef,\n    bannerRef,\n    coreBlocksRef,\n    canStartJourney,\n  } = props;\n  const { isJourneyActive } = useJourney();\n  const {\n    get: getChapterDetails,\n    data: chapterDetails,\n    isProcessing,\n    isProcessingFailed,\n    isStale,\n  } = useGetChapterDetails();\n\n  const fetchChapterDetails = useCallback(() => {\n    getChapterDetails(userChapterId, undefined, { studentId });\n  }, [getChapterDetails, userChapterId, studentId]);\n\n  useEffect(() => {\n    fetchChapterDetails();\n  }, [fetchChapterDetails]);\n\n  useEffect(() => {\n    if (chapterDetails && canStartJourney && !isJourneyActive && startChapterPageJourney) {\n      startChapterPageJourney({\n        chapterDetails: chapterDetails,\n        userChapterId,\n        studentId,\n        userType,\n      });\n    }\n  }, [\n    canStartJourney,\n    chapterDetails,\n    isJourneyActive,\n    startChapterPageJourney,\n    studentId,\n    userChapterId,\n    userType,\n  ]);\n\n  useEffect(() => {\n    if (!isProcessing && isStale) {\n      fetchChapterDetails();\n    }\n  }, [fetchChapterDetails, isProcessing, isStale]);\n\n  if (isProcessingFailed) {\n    return (\n      <FlexView $flexGapX={1.5} $height=\"100vh\" $justifyContent=\"center\" $alignItems=\"center\">\n        <Text $renderAs=\"h6\">Oops! Something went wrong. Please try again later.</Text>\n        <Button\n          widthX={14}\n          size=\"small\"\n          shape=\"square\"\n          renderAs=\"primary\"\n          label=\"Try again\"\n          onClick={fetchChapterDetails}\n        />\n      </FlexView>\n    );\n  }\n\n  if (!chapterDetails && isProcessing) {\n    return <AppLoader height=\"80vh\" />;\n  }\n\n  return (\n    <Styled.ContentWrapper\n      ref={chapterPageRef}\n      $widthX={50}\n      $disablePointerEvents={isProcessing}\n      $justifyContent=\"center\"\n      $alignItems=\"center\"\n    >\n      {userType === 'TEACHER' && (\n        <Styled.BackButtonContainer $height=\"100%\">\n          <Styled.BackButtonWrapper>\n            <IconButton\n              Icon={Back2Icon}\n              renderAs=\"secondary-gray\"\n              analyticsLabel=\"chapter_page_exit\"\n              size=\"xsmall\"\n              onClick={onExit}\n            />\n          </Styled.BackButtonWrapper>\n        </Styled.BackButtonContainer>\n      )}\n\n      {isProcessing && (\n        <Styled.LoaderWrapper>\n          <img src={ILLUSTRATIONS.LOADER_1} alt=\"loader\" />\n        </Styled.LoaderWrapper>\n      )}\n\n      {chapterDetails && (\n        <>\n          <ChapterBanner\n            title={chapterDetails.name}\n            imageHue={chapterDetails.image_hue}\n            imageUrl={chapterDetails.image_url}\n            progressStats={chapterDetails?.progress_stat}\n            bannerRef={bannerRef}\n          />\n          <BlockSections\n            imageHue={chapterDetails.image_hue}\n            userType={userType}\n            blocks={chapterDetails.blocks}\n            onBlockSkipUnskip={onBlockSkipUnskip}\n            onNodeAttempt={onNodeAttempt}\n            onNodeAttemptLocationChange={onNodeAttemptLocationChange}\n            onNodeMarkAsDone={onNodeMarkAsDone}\n            onNodeReattempt={onNodeReattempt}\n            onNodeReview={onNodeReview}\n            onNodeView={onNodeView}\n            coreBlocksRef={coreBlocksRef}\n          />\n        </>\n      )}\n    </Styled.ContentWrapper>\n  );\n});\n\nexport default ChapterDetails;\n"],"names":["ChapterDetails","memo","props","userChapterId","studentId","userType","onBlockSkipUnskip","onNodeAttempt","onNodeAttemptLocationChange","onNodeMarkAsDone","onNodeReattempt","onNodeReview","onNodeView","onExit","startChapterPageJourney","chapterPageRef","bannerRef","coreBlocksRef","canStartJourney","isJourneyActive","useJourney","getChapterDetails","chapterDetails","isProcessing","isProcessingFailed","isStale","useGetChapterDetails","fetchChapterDetails","useCallback","useEffect","jsxs","FlexView","jsx","Text","Button","AppLoader","Styled.ContentWrapper","Styled.BackButtonContainer","Styled.BackButtonWrapper","IconButton","Back2Icon","Styled.LoaderWrapper","ILLUSTRATIONS","Fragment","ChapterBanner","BlockSections","ChapterDetails$1"],"mappings":"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"}

package/dist/features/chapters-v2/comps/node-card/border-path-animation.js

@@ -0,0 +1,13 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+const o = () => /* @__PURE__ */ r("svg", { className: "node-card-border", viewBox: "0 0 170 56", preserveAspectRatio: "none", children: [
+  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ r("linearGradient", { id: "gradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+    /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "black" }),
+    /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "gray" })
+  ] }) }),
+  /* @__PURE__ */ e("rect", { className: "border-path", x: "0", y: "0", width: "100%", height: "100%" }),
+  /* @__PURE__ */ e("rect", { className: "border-path-animation", x: "0", y: "0", width: "100%", height: "100%" })
+] });
+export {
+  o as default
+};
+//# sourceMappingURL=border-path-animation.js.map

package/dist/features/chapters-v2/comps/node-card/border-path-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-path-animation.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/border-path-animation.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nconst BorderPathAnimation: FC = () => {\n  return (\n    <svg className=\"node-card-border\" viewBox=\"0 0 170 56\" preserveAspectRatio=\"none\">\n      <defs>\n        <linearGradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" stopColor=\"black\" />\n          <stop offset=\"100%\" stopColor=\"gray\" />\n        </linearGradient>\n      </defs>\n      <rect className=\"border-path\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" />\n      <rect className=\"border-path-animation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" />\n    </svg>\n  );\n};\n\nexport default BorderPathAnimation;\n"],"names":["BorderPathAnimation","jsx","jsxs"],"mappings":";AAEA,MAAMA,IAA0B,wBAE3B,OAAI,EAAA,WAAU,oBAAmB,SAAQ,cAAa,qBAAoB,QACzE,UAAA;AAAA,EAAA,gBAAAC,EAAC,QACC,EAAA,UAAA,gBAAAC,EAAC,kBAAe,EAAA,IAAG,YAAW,IAAG,MAAK,IAAG,MAAK,IAAG,QAAO,IAAG,MACzD,UAAA;AAAA,IAAA,gBAAAD,EAAC,QAAK,EAAA,QAAO,MAAK,WAAU,SAAQ;AAAA,IACnC,gBAAAA,EAAA,QAAA,EAAK,QAAO,QAAO,WAAU,QAAO;AAAA,EAAA,EAAA,CACvC,EACF,CAAA;AAAA,EACA,gBAAAA,EAAC,QAAK,EAAA,WAAU,eAAc,GAAE,KAAI,GAAE,KAAI,OAAM,QAAO,QAAO,OAAO,CAAA;AAAA,EACrE,gBAAAA,EAAC,QAAK,EAAA,WAAU,yBAAwB,GAAE,KAAI,GAAE,KAAI,OAAM,QAAO,QAAO,OAAO,CAAA;AACjF,EAAA,CAAA;"}

package/dist/features/chapters-v2/comps/node-card/node-card-styled.js

@@ -0,0 +1,159 @@
+import t from "styled-components";
+import d from "../../../../assets/line-icons/icons/important.js";
+import l from "../../../../assets/line-icons/icons/lock2.js";
+import e from "../../../ui/layout/flex-view.js";
+import c from "../../../ui/text/text.js";
+const m = t(e)(({
+  $showOutline: o,
+  theme: r,
+  $disabled: n,
+  $isSheetLocked: a
+}) => {
+  const { BLACK_1: p, BLACK: s, BLACK_T_15: i } = r.colors;
+  return `
+    cursor: ${n ? "not-allowed" : "pointer"};
+    position: relative;
+    border-image: linear-gradient(to right, ${i} 0%, ${i} 100%);
+    ${o && `outline: 1px solid ${i};`};
+
+    .node-card-border {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      background: transparent;
+    }
+
+    .node-card-border > .border-path {
+      fill: none;
+      stroke: ${i};
+      stroke-width: 1.5;
+    }
+
+    .node-card-border > .border-path-animation {
+      fill: none;
+      stroke: ${s};
+      stroke-width: 1.5;
+      //* view box size 170 + 56 + 170 + 56 = 452
+      //* 452 / 2 = 226
+      stroke-dasharray: 226 226;
+      stroke-dashoffset: 0;
+
+      animation: dashmove 6s linear infinite;
+    }
+    
+    @keyframes dashmove {
+      to {
+        stroke-dashoffset: -900;
+      }
+    }
+    
+    &:hover {
+      ${!n && `
+          .node-card-border > .border-path-animation {
+            stroke: ${p};
+            stroke-dasharray: 452;
+            animation: none;
+          }
+        `}
+
+      ${o && !a && `outline: 1px solid ${s};`};
+    }
+  `;
+}), g = t(d)(({ theme: o }) => {
+  const { layout: r } = o;
+  return `
+    width: ${r.gutter * 0.75}px;
+    height: ${r.gutter * 0.75}px;
+    position: absolute;
+    top: -2.5px;
+    right: -2.5px;
+  `;
+}), $ = t(e)(({ $bgImage: o }) => `
+    background-image: url(${o});
+
+    & .context-menu {
+      justify-self: flex-end;
+      margin-left: auto;
+    }
+  `), k = t(e)`
+  border-radius: 50%;
+`, w = t(e)(() => `
+    position: relative;
+    padding: 12px 8px 12px 12px;
+  `), I = t(e)(({ $top: o, $right: r }) => `
+  position: absolute;
+  top: ${o ?? 0}px;
+  right: ${r ?? 0}px;
+  z-index: 3;
+`);
+t(l)(({}) => `
+    width: 28px;
+    height: 28px;
+  `);
+const v = t(e)(({
+  theme: o,
+  $paddingRight: r,
+  $paddingLeft: n
+}) => {
+  const { BLACK_1: a, WHITE_1: p } = o.colors;
+  return `
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    padding: 0px;
+    padding-left: ${n}px;
+    padding-right: ${r}px;
+    background: ${a};
+
+    path {
+      fill: ${p};
+    }
+  `;
+}), y = t(c)(() => `
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  `), C = t(e)(({ theme: o }) => `
+    cursor: pointer;
+    
+    &:hover {
+      border-radius: 50%;
+      background: ${o.colors.WHITE_5}; 
+    }
+  `), W = t(e)(({ theme: o, $visible: r }) => `
+    cursor: pointer;
+
+    position: absolute;
+    z-index: 6;
+    top: calc(100% + 4px);
+    left: 0;
+
+    transform-origin: top;
+    transform: scaleY(${r ? 1 : 0});
+    opacity: ${r ? 1 : 0};
+    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    
+    &:hover {
+      border-radius: 50%;
+      background: ${o.colors.WHITE_5}; 
+    }
+  `);
+export {
+  k as IconWrapper,
+  v as InProgressIconWrapper,
+  m as NodeCardContainer,
+  w as NodeCardContentWrapper,
+  $ as NodeCardInfoWrapper,
+  y as NodeCardTitle,
+  C as NodeKebabMenuWrapper,
+  W as NodeMenuOptionsWrapper,
+  I as SheetTagWrapper,
+  g as StyledImportantIcon
+};
+//# sourceMappingURL=node-card-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"node-card-styled.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/node-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport ImportantIcon from '../../../../assets/line-icons/icons/important';\nimport Lock2Icon from '../../../../assets/line-icons/icons/lock2';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\ninterface INodeCardContainer {\n  $showOutline?: boolean;\n  $disabled: boolean;\n  $isSheetLocked?: boolean;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({\n  $showOutline,\n  theme,\n  $disabled,\n  $isSheetLocked,\n}) => {\n  const { BLACK_1, BLACK, BLACK_T_15 } = theme.colors;\n\n  return `\n    cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n    position: relative;\n    border-image: linear-gradient(to right, ${BLACK_T_15} 0%, ${BLACK_T_15} 100%);\n    ${$showOutline && `outline: 1px solid ${BLACK_T_15};`};\n\n    .node-card-border {\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 2;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      background: transparent;\n    }\n\n    .node-card-border > .border-path {\n      fill: none;\n      stroke: ${BLACK_T_15};\n      stroke-width: 1.5;\n    }\n\n    .node-card-border > .border-path-animation {\n      fill: none;\n      stroke: ${BLACK};\n      stroke-width: 1.5;\n      //* view box size 170 + 56 + 170 + 56 = 452\n      //* 452 / 2 = 226\n      stroke-dasharray: 226 226;\n      stroke-dashoffset: 0;\n\n      animation: dashmove 6s linear infinite;\n    }\n    \n    @keyframes dashmove {\n      to {\n        stroke-dashoffset: -900;\n      }\n    }\n    \n    &:hover {\n      ${\n        !$disabled &&\n        `\n          .node-card-border > .border-path-animation {\n            stroke: ${BLACK_1};\n            stroke-dasharray: 452;\n            animation: none;\n          }\n        `\n      }\n\n      ${$showOutline && !$isSheetLocked && `outline: 1px solid ${BLACK};`};\n    }\n  `;\n});\n\nconst StyledImportantIcon = styled(ImportantIcon)(({ theme }) => {\n  const { layout } = theme;\n\n  return `\n    width: ${layout.gutter * 0.75}px;\n    height: ${layout.gutter * 0.75}px;\n    position: absolute;\n    top: -2.5px;\n    right: -2.5px;\n  `;\n});\n\ninterface INodeCardInfoWrapper {\n  $bgImage: string;\n}\n\nconst NodeCardInfoWrapper = styled(FlexView)<INodeCardInfoWrapper>(({ $bgImage }) => {\n  return `\n    background-image: url(${$bgImage});\n\n    & .context-menu {\n      justify-self: flex-end;\n      margin-left: auto;\n    }\n  `;\n});\n\nconst IconWrapper = styled(FlexView)`\n  border-radius: 50%;\n`;\n\nconst NodeCardContentWrapper = styled(FlexView)(() => {\n  return `\n    position: relative;\n    padding: 12px 8px 12px 12px;\n  `;\n});\n\ninterface ISheetTagWrapper {\n  $top?: number;\n  $right?: number;\n}\n\nconst SheetTagWrapper = styled(FlexView)<ISheetTagWrapper>(({ $top, $right }) => {\n  return `\n  position: absolute;\n  top: ${$top ?? 0}px;\n  right: ${$right ?? 0}px;\n  z-index: 3;\n`;\n});\n\nconst StyledLockIcon = styled(Lock2Icon)(({}) => {\n  return `\n    width: 28px;\n    height: 28px;\n  `;\n});\n\nconst InProgressIconWrapper = styled(FlexView)<{ $paddingRight: number; $paddingLeft: number }>(({\n  theme,\n  $paddingRight,\n  $paddingLeft,\n}) => {\n  const { BLACK_1, WHITE_1 } = theme.colors;\n\n  return `\n    position: absolute;\n    top: -10px;\n    right: -10px;\n    padding: 0px;\n    padding-left: ${$paddingLeft}px;\n    padding-right: ${$paddingRight}px;\n    background: ${BLACK_1};\n\n    path {\n      fill: ${WHITE_1};\n    }\n  `;\n});\n\nconst NodeCardTitle = styled(Text)(() => {\n  return `\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  `;\n});\n\nconst NodeKebabMenuWrapper = styled(FlexView)(({ theme }) => {\n  return `\n    cursor: pointer;\n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\ninterface INodeOptionsMenuWrapper {\n  $visible: boolean;\n}\n\nconst NodeMenuOptionsWrapper = styled(FlexView)<INodeOptionsMenuWrapper>(({ theme, $visible }) => {\n  return `\n    cursor: pointer;\n\n    position: absolute;\n    z-index: 6;\n    top: calc(100% + 4px);\n    left: 0;\n\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0});\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\nexport {\n  NodeCardContainer,\n  StyledImportantIcon,\n  NodeCardInfoWrapper,\n  IconWrapper,\n  NodeCardContentWrapper,\n  SheetTagWrapper,\n  StyledLockIcon,\n  InProgressIconWrapper,\n  NodeCardTitle,\n  NodeKebabMenuWrapper,\n  NodeMenuOptionsWrapper,\n};\n"],"names":["NodeCardContainer","styled","FlexView","$showOutline","theme","$disabled","$isSheetLocked","BLACK_1","BLACK","BLACK_T_15","StyledImportantIcon","ImportantIcon","layout","NodeCardInfoWrapper","$bgImage","IconWrapper","NodeCardContentWrapper","SheetTagWrapper","$top","$right","Lock2Icon","InProgressIconWrapper","$paddingRight","$paddingLeft","WHITE_1","NodeCardTitle","Text","NodeKebabMenuWrapper","NodeMenuOptionsWrapper","$visible"],"mappings":";;;;;AAaA,MAAMA,IAAoBC,EAAOC,CAAQ,EAAsB,CAAC;AAAA,EAC9D,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,OAAAC,GAAO,YAAAC,EAAA,IAAeL,EAAM;AAEtC,SAAA;AAAA,cACKC,IAAY,gBAAgB,SAAS;AAAA;AAAA,8CAELI,CAAU,QAAQA,CAAU;AAAA,MACpEN,KAAgB,sBAAsBM,CAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAezCA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMVD,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBb,CAACH,KACD;AAAA;AAAA,sBAEcE,CAAO;AAAA;AAAA;AAAA;AAAA,SAKvB;AAAA;AAAA,QAEEJ,KAAgB,CAACG,KAAkB,sBAAsBE,CAAK,GAAG;AAAA;AAAA;AAGzE,CAAC,GAEKE,IAAsBT,EAAOU,CAAa,EAAE,CAAC,EAAE,OAAAP,QAAY;AACzD,QAAA,EAAE,QAAAQ,EAAW,IAAAR;AAEZ,SAAA;AAAA,aACIQ,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAKlC,CAAC,GAMKC,IAAsBZ,EAAOC,CAAQ,EAAwB,CAAC,EAAE,UAAAY,QAC7D;AAAA,4BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnC,GAEKC,IAAcd,EAAOC,CAAQ;AAAA;AAAA,GAI7Bc,IAAyBf,EAAOC,CAAQ,EAAE,MACvC;AAAA;AAAA;AAAA,GAIR,GAOKe,IAAkBhB,EAAOC,CAAQ,EAAoB,CAAC,EAAE,MAAAgB,GAAM,QAAAC,QAC3D;AAAA;AAAA,SAEAD,KAAQ,CAAC;AAAA,WACPC,KAAU,CAAC;AAAA;AAAA,CAGrB;AAEsBlB,EAAOmB,CAAS,EAAE,CAAC,OACjC;AAAA;AAAA;AAAA,GAIR;AAED,MAAMC,IAAwBpB,EAAOC,CAAQ,EAAmD,CAAC;AAAA,EAC/F,OAAAE;AAAA,EACA,eAAAkB;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAhB,GAAS,SAAAiB,MAAYpB,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWmB,CAAY;AAAA,qBACXD,CAAa;AAAA,kBAChBf,CAAO;AAAA;AAAA;AAAA,cAGXiB,CAAO;AAAA;AAAA;AAGrB,CAAC,GAEKC,IAAgBxB,EAAOyB,CAAI,EAAE,MAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOR,GAEKC,IAAuB1B,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAE,QACxC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAMKwB,IAAyB3B,EAAOC,CAAQ,EAA2B,CAAC,EAAE,OAAAE,GAAO,UAAAyB,QAC1E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASeA,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKXzB,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC;"}

package/dist/features/chapters-v2/comps/node-card/node-card-tags.js

@@ -0,0 +1,16 @@
+import { jsx as m } from "react/jsx-runtime";
+import { memo as p } from "react";
+import { getNodeStateBasedTagInfo as S } from "../../utils/node-card-utils.js";
+import { SheetTagWrapper as T } from "./node-card-styled.js";
+const h = p((o) => {
+  const { state: e, accuracy: t, nodeType: a, dueDateTs: c, isStudent: r } = o, d = ["DYNAMIC", "ASSESSMENT", "CHAPTER_ASSESSMENT"].includes(a) ? t : void 0, {
+    icon: n,
+    top: s,
+    right: i
+  } = S(e, !!r, d, c);
+  return /* @__PURE__ */ m(T, { $top: s, $right: i, children: n });
+});
+export {
+  h as default
+};
+//# sourceMappingURL=node-card-tags.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"node-card-tags.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/node-card-tags.tsx"],"sourcesContent":["import type { INodeCardTagsProps } from './node-card-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { getNodeStateBasedTagInfo } from '../../utils/node-card-utils';\nimport * as Styled from './node-card-styled';\n\nconst NodeCardTags: FC<INodeCardTagsProps> = memo(props => {\n  const { state, accuracy, nodeType, dueDateTs, isStudent } = props;\n  const dynamicNodeTypes = ['DYNAMIC', 'ASSESSMENT', 'CHAPTER_ASSESSMENT'];\n  const isDynamicNode = dynamicNodeTypes.includes(nodeType);\n  const accuracyValue = isDynamicNode ? accuracy : undefined;\n\n  const {\n    icon: NodeTagIcon,\n    top,\n    right,\n  } = getNodeStateBasedTagInfo(state, !!isStudent, accuracyValue, dueDateTs);\n\n  return (\n    <Styled.SheetTagWrapper $top={top} $right={right}>\n      {NodeTagIcon}\n    </Styled.SheetTagWrapper>\n  );\n});\n\nexport default NodeCardTags;\n"],"names":["NodeCardTags","memo","props","state","accuracy","nodeType","dueDateTs","isStudent","accuracyValue","NodeTagIcon","top","right","getNodeStateBasedTagInfo","jsx","Styled.SheetTagWrapper"],"mappings":";;;;AAQM,MAAAA,IAAuCC,EAAK,CAASC,MAAA;AACzD,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,WAAAC,GAAW,WAAAC,EAAc,IAAAL,GAGtDM,IAFmB,CAAC,WAAW,cAAc,oBAAoB,EAChC,SAASH,CAAQ,IAClBD,IAAW,QAE3C;AAAA,IACJ,MAAMK;AAAA,IACN,KAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,IACEC,EAAyBT,GAAO,CAAC,CAACI,GAAWC,GAAeF,CAAS;AAGvE,SAAA,gBAAAO,EAACC,GAAA,EAAuB,MAAMJ,GAAK,QAAQC,GACxC,UACHF,EAAA,CAAA;AAEJ,CAAC;"}

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

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+import { memo as o } from "react";
+import n from "./student-actions/student-actions.js";
+import i from "./teacher-actions/teacher-actions.js";
+const f = o((t) => {
+  const { userType: r } = t;
+  return r === "STUDENT" ? /* @__PURE__ */ e(n, { ...t, isStudent: !0 }) : /* @__PURE__ */ e(i, { ...t });
+});
+export {
+  f as default
+};
+//# sourceMappingURL=node-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"node-card.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/node-card.tsx"],"sourcesContent":["import type { INodeCardProps } from './node-card-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport StudentActions from './student-actions/student-actions';\nimport TeacherActions from './teacher-actions/teacher-actions';\n\nconst NodeCard: FC<INodeCardProps> = memo(props => {\n  const { userType } = props;\n  const isStudent = userType === 'STUDENT';\n\n  if (isStudent) {\n    return <StudentActions {...props} isStudent />;\n  }\n\n  return <TeacherActions {...props} />;\n});\n\nexport default NodeCard;\n"],"names":["NodeCard","memo","props","userType","jsx","StudentActions","TeacherActions"],"mappings":";;;;AAQM,MAAAA,IAA+BC,EAAK,CAASC,MAAA;AAC3C,QAAA,EAAE,UAAAC,EAAa,IAAAD;AAGrB,SAFkBC,MAAa,YAGrB,gBAAAC,EAAAC,GAAA,EAAgB,GAAGH,GAAO,WAAS,GAAC,CAAA,IAGvC,gBAAAE,EAACE,GAAgB,EAAA,GAAGJ,EAAO,CAAA;AACpC,CAAC;"}

package/dist/features/chapters-v2/comps/node-card/node-menu-options/node-menu-option.js

@@ -0,0 +1,30 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { memo as p, useCallback as a } from "react";
+import s from "../../../../ui/text/text.js";
+import { NodeOptionWrapper as m } from "./node-menu-options-styled.js";
+const $ = ({ option: n }) => {
+  const { icon: r, label: l, id: e, disabled: o, onClick: i } = n, c = a(() => {
+    o || i(e);
+  }, [o, e, i]);
+  return /* @__PURE__ */ d(
+    m,
+    {
+      $flexDirection: "row",
+      $alignItems: "center",
+      $flexGap: 8,
+      $gapX: 0.5,
+      $gutterX: 1,
+      $opacity: o ? 0.5 : 1,
+      $disabled: o,
+      onClick: c,
+      children: [
+        /* @__PURE__ */ t(r, { width: 20, height: 20 }),
+        /* @__PURE__ */ t(s, { $renderAs: "ub3", $color: "WHITE", children: l })
+      ]
+    }
+  );
+}, b = p($);
+export {
+  b as default
+};
+//# sourceMappingURL=node-menu-option.js.map

package/dist/features/chapters-v2/comps/node-card/node-menu-options/node-menu-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-menu-option.js","sources":["../../../../../../src/features/chapters-v2/comps/node-card/node-menu-options/node-menu-option.tsx"],"sourcesContent":["import type { INodeMenuOption } from './node-menu-options-types';\n\nimport { memo, useCallback } from 'react';\n\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './node-menu-options-styled';\n\nconst NodeMenuOption = ({ option }: { option: INodeMenuOption }) => {\n  const { icon: OptionIcon, label, id, disabled, onClick } = option;\n\n  const handleNodeOptionClick = useCallback(() => {\n    if (!disabled) {\n      onClick(id);\n    }\n  }, [disabled, id, onClick]);\n\n  return (\n    <Styled.NodeOptionWrapper\n      $flexDirection=\"row\"\n      $alignItems=\"center\"\n      $flexGap={8}\n      $gapX={0.5}\n      $gutterX={1}\n      $opacity={disabled ? 0.5 : 1}\n      $disabled={disabled}\n      onClick={handleNodeOptionClick}\n    >\n      <OptionIcon width={20} height={20} />\n      <Text $renderAs=\"ub3\" $color=\"WHITE\">\n        {label}\n      </Text>\n    </Styled.NodeOptionWrapper>\n  );\n};\n\nexport default memo(NodeMenuOption);\n"],"names":["NodeMenuOption","option","OptionIcon","label","id","disabled","onClick","handleNodeOptionClick","useCallback","jsxs","Styled.NodeOptionWrapper","jsx","Text","NodeMenuOption$1","memo"],"mappings":";;;;AAOA,MAAMA,IAAiB,CAAC,EAAE,QAAAC,QAA0C;AAClE,QAAM,EAAE,MAAMC,GAAY,OAAAC,GAAO,IAAAC,GAAI,UAAAC,GAAU,SAAAC,EAAY,IAAAL,GAErDM,IAAwBC,EAAY,MAAM;AAC9C,IAAKH,KACHC,EAAQF,CAAE;AAAA,EAEX,GAAA,CAACC,GAAUD,GAAIE,CAAO,CAAC;AAGxB,SAAA,gBAAAG;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAUL,IAAW,MAAM;AAAA,MAC3B,WAAWA;AAAA,MACX,SAASE;AAAA,MAET,UAAA;AAAA,QAAA,gBAAAI,EAACT,GAAW,EAAA,OAAO,IAAI,QAAQ,IAAI;AAAA,0BAClCU,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UACHT,GAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeU,IAAAC,EAAKd,CAAc;"}

package/dist/features/chapters-v2/comps/node-card/node-menu-options/node-menu-options-styled.js

@@ -0,0 +1,32 @@
+import o from "styled-components";
+import t from "../../../../ui/layout/flex-view.js";
+import i from "../../../../ui/text/text.js";
+const s = o(t)(({}) => `
+      box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.40);
+      width: 180px;
+      position: relative;
+      left: 0;
+      top: 0;
+    `), x = o(t)(({ theme: r, $disabled: e }) => `
+        cursor: ${e ? "not-allowed" : "pointer"};
+
+        &:hover {
+            background: ${r.colors.BLACK};
+        };
+
+        path {
+            fill: ${r.colors.WHITE_1};
+        }
+    `);
+o(i)(() => `
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    `);
+export {
+  x as NodeOptionWrapper,
+  s as NodeOptions
+};
+//# sourceMappingURL=node-menu-options-styled.js.map

package/dist/features/chapters-v2/comps/node-card/node-menu-options/node-menu-options-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-menu-options-styled.js","sources":["../../../../../../src/features/chapters-v2/comps/node-card/node-menu-options/node-menu-options-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\n\nconst NodeOptions = styled(FlexView)(({}) => {\n  return `\n      box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.40);\n      width: 180px;\n      position: relative;\n      left: 0;\n      top: 0;\n    `;\n});\n\ninterface INodeOptionWrapper {\n  $disabled?: boolean;\n}\n\nconst NodeOptionWrapper = styled(FlexView)<INodeOptionWrapper>(({ theme, $disabled }) => {\n  return `\n        cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n\n        &:hover {\n            background: ${theme.colors.BLACK};\n        };\n\n        path {\n            fill: ${theme.colors.WHITE_1};\n        }\n    `;\n});\n\nconst NodeOptionText = styled(Text)(() => {\n  return `\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n    `;\n});\n\nexport { NodeOptions, NodeOptionWrapper, NodeOptionText };\n"],"names":["NodeOptions","styled","FlexView","NodeOptionWrapper","theme","$disabled","Text"],"mappings":";;;AAKA,MAAMA,IAAcC,EAAOC,CAAQ,EAAE,CAAC,CAAA,MAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOR,GAMKC,IAAoBF,EAAOC,CAAQ,EAAsB,CAAC,EAAE,OAAAE,GAAO,WAAAC,QAChE;AAAA,kBACSA,IAAY,gBAAgB,SAAS;AAAA;AAAA;AAAA,0BAG7BD,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,oBAIxBA,EAAM,OAAO,OAAO;AAAA;AAAA,KAGvC;AAEsBH,EAAOK,CAAI,EAAE,MAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOR;"}