@cuemath/leap 2.8.60-aa3 → 2.8.60-ag1

package/dist/features/chapters/chapters-list/chapter-item/chapter-item-styled.js

@@ -1,53 +1,118 @@
-import e from "styled-components";
-import d from "../../../ui/layout/flex-view.js";
-import p from "../../../ui/text/text.js";
-e.svg(({ theme: t }) => `
+import e, { keyframes as l, css as d } from "styled-components";
+import o from "../../../ui/layout/flex-view.js";
+import h from "../../../ui/text/text.js";
+const g = l`
+  0% {
+    transform: translate(100%, -100%) skewX(45deg);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(-150%, 100%) skewX(45deg);
+    opacity: 1;
+  }
+`, u = e(o)`
+  transition: scale 0.3s ease-in-out;
+`, x = e(o)`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    width: 40%;
+    height: 150%;
+    background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0.7) 0%,
+      rgba(255, 255, 255, 0.1) 35%,
+      rgba(255, 255, 255, 0.7) 40%,
+      rgba(255, 255, 255, 0.7) 80%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0;
+    transform: translate(100%, -100%) skew(45deg);
+    pointer-events: none;
+  }
+`, m = e.svg(({ theme: t }) => `
     position: absolute;
     z-index: ${t.zIndex.CHAPTER_PROGRESS_SVG};
     inset: 50%;
-    transform: translate(-50%, -50%);
-  `);
-e.circle(
-  ({ theme: t, $progressCircle: o, $progress: r }) => {
-    const { GREY_2: n, BLACK: a } = t.colors, { gutter: s } = t.layout, i = s * 22.5, l = o ? i - r : r;
+    transform: translate(-50%, -50%) rotate(-90deg);
+  `), w = e.circle(
+  ({ theme: t, $progressCircle: r, $progress: s }) => {
+    const { GREY_2: n, BLACK: p } = t.colors, { gutter: a } = t.layout, i = a * 18.625, c = r ? i - s : s;
     return `
       stroke-dasharray: ${i};
-      stroke-dashoffset: ${l};
-      stroke: ${o ? a : n};
+      stroke-dashoffset: ${c};
+      stroke: ${r ? p : n};
 
-      stroke-width: ${s * 0.175}px;
+      stroke-width: ${a * 0.125}px;
       fill: none;
     `;
   }
-);
-const f = e.img(({ theme: t }) => {
-  const { gutter: o } = t.layout;
+), $ = e.img(({ theme: t }) => {
+  const { gutter: r } = t.layout;
+  return `
+    display: block;
+    width: ${r * 6}px;
+    height: ${r * 6}px;
+    border-radius: 50%;
+  `;
+}), y = e.div(({ theme: t }) => {
+  const { layout: r } = t;
   return `
-    width: ${o * 5}px;
-    height: ${o * 5}px;
-    border: 1px solid ${t.colors.BLACK_T_38};
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 2;
+
+    width: ${r.gutter * 1.25}px;
+    height: ${r.gutter * 1.25}px;
     border-radius: 50%;
+    background: ${t.colors.WHITE_1};
+    outline: 1px solid ${t.colors.BLACK_1};
   `;
-}), h = e(p)`
+}), C = e(h)`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   text-overflow: ellipsis;
   overflow: hidden;
-`, m = e(d)(({
-  theme: t,
-  $shouldHaveLeftBorder: o
-}) => {
-  const { WHITE_5: r } = t.colors;
-  return `
-    cursor: pointer;
-    border-right: ${o ? `1px solid ${r}` : "none"};
-    border-bottom: 1px solid ${r};
-  `;
-});
+`, v = e(o)`
+  cursor: pointer;
+  position: relative;
+  box-shadow: inset 0px 0px 0px 0.5px ${({ theme: t }) => t.colors.BLACK_T_15};
+  aspect-ratio: 1;
+
+  &:hover {
+    background: ${({ theme: t, $bgColor: r }) => r ? t.colors[r] : "none"};
+
+    ${u} {
+      scale: 1.05;
+    }
+
+    ${x}::after {
+      ${d`
+        animation: ${g} 1.2s ease-out forwards;
+      `}
+    }
+  }
+`;
 export {
-  f as ChapterImage,
-  m as ChapterItemWrapper,
-  h as ChapterName
+  $ as ChapterImage,
+  u as ChapterImageWrapper,
+  v as ChapterItemWrapper,
+  C as ChapterName,
+  m as ChapterProgressSVG,
+  w as ChapterProgressSVGCircle,
+  x as ChapterProgressWrapper,
+  y as StyledCheckIconWrapper
 };
 //# sourceMappingURL=chapter-item-styled.js.map

package/dist/features/chapters/chapters-list/chapter-item/chapter-item-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"chapter-item-styled.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nconst ChapterProgressSVG = styled.svg(({ theme }) => {\n  return `\n    position: absolute;\n    z-index: ${theme.zIndex.CHAPTER_PROGRESS_SVG};\n    inset: 50%;\n    transform: translate(-50%, -50%);\n  `;\n});\n\ninterface IChapterProgressSVGCircleProps {\n  $progressCircle?: boolean;\n  $progress: number;\n}\n\nconst ChapterProgressSVGCircle = styled.circle<IChapterProgressSVGCircleProps>(\n  ({ theme, $progressCircle, $progress }) => {\n    const { GREY_2, BLACK } = theme.colors;\n    const { gutter } = theme.layout;\n\n    const strokeDashArray = gutter * 22.5;\n    const strokeDashOffset = $progressCircle ? strokeDashArray - $progress : $progress;\n\n    return `\n      stroke-dasharray: ${strokeDashArray};\n      stroke-dashoffset: ${strokeDashOffset};\n      stroke: ${$progressCircle ? BLACK : GREY_2};\n\n      stroke-width: ${gutter * 0.175}px;\n      fill: none;\n    `;\n  },\n);\n\nconst ChapterImage = styled.img(({ theme }) => {\n  const { gutter } = theme.layout;\n\n  return `\n    width: ${gutter * 5}px;\n    height: ${gutter * 5}px;\n    border: 1px solid ${theme.colors.BLACK_T_38};\n    border-radius: 50%;\n  `;\n});\n\nconst ChapterName = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n`;\n\ninterface IChapterItemWrapperProps {\n  $shouldHaveLeftBorder: boolean;\n}\n\nconst ChapterItemWrapper = styled(FlexView)<IChapterItemWrapperProps>(({\n  theme,\n  $shouldHaveLeftBorder,\n}) => {\n  const { WHITE_5 } = theme.colors;\n\n  return `\n    cursor: pointer;\n    border-right: ${$shouldHaveLeftBorder ? `1px solid ${WHITE_5}` : 'none'};\n    border-bottom: 1px solid ${WHITE_5};\n  `;\n});\n\nexport {\n  ChapterImage,\n  ChapterItemWrapper,\n  ChapterName,\n  ChapterProgressSVG,\n  ChapterProgressSVGCircle,\n};\n"],"names":["styled","theme","$progressCircle","$progress","GREY_2","BLACK","gutter","strokeDashArray","strokeDashOffset","ChapterImage","ChapterName","Text","ChapterItemWrapper","FlexView","$shouldHaveLeftBorder","WHITE_5"],"mappings":";;;AAK2BA,EAAO,IAAI,CAAC,EAAE,OAAAC,QAChC;AAAA;AAAA,eAEMA,EAAM,OAAO,oBAAoB;AAAA;AAAA;AAAA,GAI/C;AAOgCD,EAAO;AAAA,EACtC,CAAC,EAAE,OAAAC,GAAO,iBAAAC,GAAiB,WAAAC,QAAgB;AACzC,UAAM,EAAE,QAAAC,GAAQ,OAAAC,MAAUJ,EAAM,QAC1B,EAAE,QAAAK,EAAO,IAAIL,EAAM,QAEnBM,IAAkBD,IAAS,MAC3BE,IAAmBN,IAAkBK,IAAkBJ,IAAYA;AAElE,WAAA;AAAA,0BACeI,CAAe;AAAA,2BACdC,CAAgB;AAAA,gBAC3BN,IAAkBG,IAAQD,CAAM;AAAA;AAAA,sBAE1BE,IAAS,KAAK;AAAA;AAAA;AAAA,EAGlC;AACF;AAEA,MAAMG,IAAeT,EAAO,IAAI,CAAC,EAAE,OAAAC,QAAY;AACvC,QAAA,EAAE,QAAAK,EAAO,IAAIL,EAAM;AAElB,SAAA;AAAA,aACIK,IAAS,CAAC;AAAA,cACTA,IAAS,CAAC;AAAA,wBACAL,EAAM,OAAO,UAAU;AAAA;AAAA;AAG/C,CAAC,GAEKS,IAAcV,EAAOW,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYzBC,IAAqBZ,EAAOa,CAAQ,EAA4B,CAAC;AAAA,EACrE,OAAAZ;AAAA,EACA,uBAAAa;AACF,MAAM;AACE,QAAA,EAAE,SAAAC,EAAQ,IAAId,EAAM;AAEnB,SAAA;AAAA;AAAA,oBAEWa,IAAwB,aAAaC,CAAO,KAAK,MAAM;AAAA,+BAC5CA,CAAO;AAAA;AAEtC,CAAC;"}
+{"version":3,"file":"chapter-item-styled.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../ui/types';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nconst shimmerEffect = keyframes`\n  0% {\n    transform: translate(100%, -100%) skewX(45deg);\n    opacity: 0;\n  }\n\n  100% {\n    transform: translate(-150%, 100%) skewX(45deg);\n    opacity: 1;\n  }\n`;\n\nconst ChapterImageWrapper = styled(FlexView)`\n  transition: scale 0.3s ease-in-out;\n`;\n\nconst ChapterProgressWrapper = styled(FlexView)`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  overflow: hidden;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n    width: 40%;\n    height: 150%;\n    background: linear-gradient(\n      to right,\n      rgba(255, 255, 255, 0.7) 0%,\n      rgba(255, 255, 255, 0.1) 35%,\n      rgba(255, 255, 255, 0.7) 40%,\n      rgba(255, 255, 255, 0.7) 80%,\n      rgba(255, 255, 255, 0) 100%\n    );\n    opacity: 0;\n    transform: translate(100%, -100%) skew(45deg);\n    pointer-events: none;\n  }\n`;\n\nconst ChapterProgressSVG = styled.svg(({ theme }) => {\n  return `\n    position: absolute;\n    z-index: ${theme.zIndex.CHAPTER_PROGRESS_SVG};\n    inset: 50%;\n    transform: translate(-50%, -50%) rotate(-90deg);\n  `;\n});\n\ninterface IChapterProgressSVGCircleProps {\n  $progressCircle?: boolean;\n  $progress: number;\n}\n\nconst ChapterProgressSVGCircle = styled.circle<IChapterProgressSVGCircleProps>(\n  ({ theme, $progressCircle, $progress }) => {\n    const { GREY_2, BLACK } = theme.colors;\n    const { gutter } = theme.layout;\n\n    const strokeDashArray = gutter * 18.625;\n    const strokeDashOffset = $progressCircle ? strokeDashArray - $progress : $progress;\n\n    return `\n      stroke-dasharray: ${strokeDashArray};\n      stroke-dashoffset: ${strokeDashOffset};\n      stroke: ${$progressCircle ? BLACK : GREY_2};\n\n      stroke-width: ${gutter * 0.125}px;\n      fill: none;\n    `;\n  },\n);\n\nconst ChapterImage = styled.img(({ theme }) => {\n  const { gutter } = theme.layout;\n\n  return `\n    display: block;\n    width: ${gutter * 6}px;\n    height: ${gutter * 6}px;\n    border-radius: 50%;\n  `;\n});\n\nconst StyledCheckIconWrapper = styled.div(({ theme }) => {\n  const { layout } = theme;\n\n  return `\n    position: absolute;\n    top: 5px;\n    right: 5px;\n    z-index: 2;\n\n    width: ${layout.gutter * 1.25}px;\n    height: ${layout.gutter * 1.25}px;\n    border-radius: 50%;\n    background: ${theme.colors.WHITE_1};\n    outline: 1px solid ${theme.colors.BLACK_1};\n  `;\n});\n\nconst ChapterName = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n`;\n\ninterface IChapterItemWrapperProps {\n  $bgColor?: TColorNames;\n}\n\nconst ChapterItemWrapper = styled(FlexView)<IChapterItemWrapperProps>`\n  cursor: pointer;\n  position: relative;\n  box-shadow: inset 0px 0px 0px 0.5px ${({ theme }) => theme.colors.BLACK_T_15};\n  aspect-ratio: 1;\n\n  &:hover {\n    background: ${({ theme, $bgColor }) => ($bgColor ? theme.colors[$bgColor] : 'none')};\n\n    ${ChapterImageWrapper} {\n      scale: 1.05;\n    }\n\n    ${ChapterProgressWrapper}::after {\n      ${css`\n        animation: ${shimmerEffect} 1.2s ease-out forwards;\n      `}\n    }\n  }\n`;\n\nexport {\n  ChapterImageWrapper,\n  ChapterProgressWrapper,\n  ChapterImage,\n  ChapterItemWrapper,\n  ChapterName,\n  ChapterProgressSVG,\n  ChapterProgressSVGCircle,\n  StyledCheckIconWrapper,\n};\n"],"names":["shimmerEffect","keyframes","ChapterImageWrapper","styled","FlexView","ChapterProgressWrapper","ChapterProgressSVG","theme","ChapterProgressSVGCircle","$progressCircle","$progress","GREY_2","BLACK","gutter","strokeDashArray","strokeDashOffset","ChapterImage","StyledCheckIconWrapper","layout","ChapterName","Text","ChapterItemWrapper","$bgColor","css"],"mappings":";;;AAOA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYhBC,IAAsBC,EAAOC,CAAQ;AAAA;AAAA,GAIrCC,IAAyBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6BxCE,IAAqBH,EAAO,IAAI,CAAC,EAAE,OAAAI,QAChC;AAAA;AAAA,eAEMA,EAAM,OAAO,oBAAoB;AAAA;AAAA;AAAA,GAI/C,GAOKC,IAA2BL,EAAO;AAAA,EACtC,CAAC,EAAE,OAAAI,GAAO,iBAAAE,GAAiB,WAAAC,QAAgB;AACzC,UAAM,EAAE,QAAAC,GAAQ,OAAAC,MAAUL,EAAM,QAC1B,EAAE,QAAAM,EAAO,IAAIN,EAAM,QAEnBO,IAAkBD,IAAS,QAC3BE,IAAmBN,IAAkBK,IAAkBJ,IAAYA;AAElE,WAAA;AAAA,0BACeI,CAAe;AAAA,2BACdC,CAAgB;AAAA,gBAC3BN,IAAkBG,IAAQD,CAAM;AAAA;AAAA,sBAE1BE,IAAS,KAAK;AAAA;AAAA;AAAA,EAGlC;AACF,GAEMG,IAAeb,EAAO,IAAI,CAAC,EAAE,OAAAI,QAAY;AACvC,QAAA,EAAE,QAAAM,EAAO,IAAIN,EAAM;AAElB,SAAA;AAAA;AAAA,aAEIM,IAAS,CAAC;AAAA,cACTA,IAAS,CAAC;AAAA;AAAA;AAGxB,CAAC,GAEKI,IAAyBd,EAAO,IAAI,CAAC,EAAE,OAAAI,QAAY;AACjD,QAAA,EAAE,QAAAW,EAAW,IAAAX;AAEZ,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMIW,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA,kBAEhBX,EAAM,OAAO,OAAO;AAAA,yBACbA,EAAM,OAAO,OAAO;AAAA;AAE7C,CAAC,GAEKY,IAAchB,EAAOiB,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYzBC,IAAqBlB,EAAOC,CAAQ;AAAA;AAAA;AAAA,wCAGF,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,kBAI5D,CAAC,EAAE,OAAAA,GAAO,UAAAe,QAAgBA,IAAWf,EAAM,OAAOe,CAAQ,IAAI,MAAO;AAAA;AAAA,MAEjFpB,CAAmB;AAAA;AAAA;AAAA;AAAA,MAInBG,CAAsB;AAAA,QACpBkB;AAAA,qBACavB,CAAa;AAAA,OAC3B;AAAA;AAAA;AAAA;"}

package/dist/features/chapters/chapters-list/chapter-item/chapter-item.js

@@ -1,58 +1,87 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { memo as C, useState as x, useRef as w, useCallback as T, useLayoutEffect as _ } from "react";
-import { useTheme as y } from "styled-components";
-import j from "../../../milestone/create/comps/milestone-progress-v2/milestone-progress-v2.js";
-import A from "../../../ui/arrow-tooltip/arrow-tooltip.js";
-import I from "../../../ui/layout/flex-view.js";
-import { ChapterItemWrapper as L, ChapterImage as b, ChapterName as H } from "./chapter-item-styled.js";
-const V = C(
-  ({ milestoneId: t, userType: m, chapter: s, onChapterClick: a, itemIndex: i }) => {
-    const p = y(), { gutter: r } = p.layout, f = !!((i + 1) % 2), { name: l, image_url: h, user_chapter_progress: n } = s, { total_core_sheets: u } = n, [d, g] = x(!1), e = w(null), $ = T(() => {
-      a(s, t);
-    }, [s, t, a]);
-    return _(() => {
-      e.current && e.current.scrollHeight > e.current.clientHeight && g(!0);
-    }, [e]), /* @__PURE__ */ c(
-      L,
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { memo as C, useState as x, useRef as I, useCallback as w, useLayoutEffect as T } from "react";
+import y from "../../../../assets/line-icons/icons/check2.js";
+import _ from "../../../ui/arrow-tooltip/arrow-tooltip.js";
+import S from "../../../ui/layout/flex-view.js";
+import { ChapterItemWrapper as b, ChapterImageWrapper as k, ChapterProgressWrapper as P, ChapterProgressSVG as W, ChapterProgressSVGCircle as l, ChapterImage as j, StyledCheckIconWrapper as A, ChapterName as H } from "./chapter-item-styled.js";
+const R = C(
+  ({ milestoneId: r, chapter: o, onChapterClick: a, itemIndex: p }) => {
+    const {
+      name: n,
+      image_url: h,
+      progress_stat: m,
+      image_hue: g
+    } = o, { completed: c = 0, total: d = 0 } = m || {}, [$, u] = x(!1), t = I(null), s = c > 0 ? Math.floor((c / d || 1) * 100) : 0, f = w(() => {
+      a(o, r);
+    }, [o, r, a]);
+    return T(() => {
+      t.current && t.current.scrollHeight > t.current.clientHeight && u(!0);
+    }, [t]), /* @__PURE__ */ i(
+      b,
       {
-        $justifyContent: "flex-start",
-        $gap: r * 1.25,
-        $gutter: r * 1.25,
-        $flexDirection: "row",
-        $flexColumnGap: r,
-        $shouldHaveLeftBorder: f,
-        onClick: $,
-        id: `milestone-chapter-${t}-${i}`,
+        id: `milestone-chapter-${r || ""}-${p}`,
+        $alignItems: "center",
+        $gapX: 1,
+        $gutterX: 1,
+        $flexGap: 8,
+        $background: "WHITE_1",
+        onClick: f,
         className: "goal-widget-chapter-item",
+        $bgColor: `${g}_1`,
         children: [
-          /* @__PURE__ */ o(b, { src: h, alt: "Chapter Image" }),
-          /* @__PURE__ */ c(I, { $justifyContent: "center", $flexRowGap: r * 0.75, children: [
-            /* @__PURE__ */ o(
-              A,
-              {
-                renderAs: "primary",
-                position: "bottom",
-                tooltipItem: l,
-                hidden: !d,
-                widthX: 21.75,
-                children: /* @__PURE__ */ o(H, { ref: e, $renderAs: "ab2", $color: "BLACK_T_87", children: l })
-              }
-            ),
-            !!u && /* @__PURE__ */ o(
-              j,
-              {
-                userType: m,
-                milestoneId: t,
-                progressInfo: n
-              }
-            )
-          ] })
+          /* @__PURE__ */ i(
+            k,
+            {
+              $width: "fit-content",
+              $position: "relative",
+              $justifyContent: "center",
+              $alignItems: "center",
+              children: [
+                /* @__PURE__ */ e(P, { children: /* @__PURE__ */ i(W, { width: "96px", height: "96px", children: [
+                  /* @__PURE__ */ e(l, { $progress: 0, r: "47", cx: "48", cy: "48" }),
+                  /* @__PURE__ */ e(
+                    l,
+                    {
+                      $progressCircle: !0,
+                      $progress: s * 2.98,
+                      r: "47",
+                      cx: "48",
+                      cy: "48"
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ e(j, { src: h, alt: "Chapter Image" }),
+                s === 100 && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { width: 20, height: 20 }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(S, { $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ e(
+            _,
+            {
+              renderAs: "primary",
+              position: "bottom",
+              tooltipItem: n,
+              hidden: !$,
+              widthX: 21.75,
+              zIndex: 5,
+              children: /* @__PURE__ */ e(
+                H,
+                {
+                  ref: t,
+                  $renderAs: "ab2",
+                  $color: "BLACK_T_87",
+                  $align: "center",
+                  children: n
+                }
+              )
+            }
+          ) })
         ]
       }
     );
   }
 );
 export {
-  V as default
+  R as default
 };
 //# sourceMappingURL=chapter-item.js.map

package/dist/features/chapters/chapters-list/chapter-item/chapter-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"chapter-item.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item.tsx"],"sourcesContent":["import type { IChapterItemProps } from './chapter-item-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useLayoutEffect, useRef, useState, memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport MilestoneProgressInfoV2 from '../../../milestone/create/comps/milestone-progress-v2/milestone-progress-v2';\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../../ui/layout/flex-view';\nimport * as Styled from './chapter-item-styled';\n\nconst ChapterItem: FC<IChapterItemProps> = memo(\n  ({ milestoneId, userType, chapter, onChapterClick, itemIndex }) => {\n    const theme = useTheme();\n    const { gutter } = theme.layout;\n    const isOddIndex = !!((itemIndex + 1) % 2);\n    const { name, image_url: imageUrl, user_chapter_progress: chapterStats } = chapter;\n    const { total_core_sheets: totalLessons } = chapterStats;\n    const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n    const titleTextRef = useRef<HTMLDivElement>(null);\n\n    const handleOnChapterClick = useCallback(() => {\n      onChapterClick(chapter, milestoneId);\n    }, [chapter, milestoneId, onChapterClick]);\n\n    useLayoutEffect(() => {\n      if (\n        titleTextRef.current &&\n        titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n      ) {\n        setShowTitleTooltip(true);\n      }\n    }, [titleTextRef]);\n\n    return (\n      <Styled.ChapterItemWrapper\n        $justifyContent={'flex-start'}\n        $gap={gutter * 1.25}\n        $gutter={gutter * 1.25}\n        $flexDirection=\"row\"\n        $flexColumnGap={gutter}\n        $shouldHaveLeftBorder={isOddIndex}\n        onClick={handleOnChapterClick}\n        id={`milestone-chapter-${milestoneId}-${itemIndex}`}\n        className=\"goal-widget-chapter-item\"\n      >\n        <Styled.ChapterImage src={imageUrl} alt=\"Chapter Image\" />\n        <FlexView $justifyContent=\"center\" $flexRowGap={gutter * 0.75}>\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"bottom\"\n            tooltipItem={name}\n            hidden={!showTitleTooltip}\n            widthX={21.75}\n          >\n            <Styled.ChapterName ref={titleTextRef} $renderAs=\"ab2\" $color=\"BLACK_T_87\">\n              {name}\n            </Styled.ChapterName>\n          </ArrowTooltip>\n          {!!totalLessons && (\n            <MilestoneProgressInfoV2\n              userType={userType}\n              milestoneId={milestoneId}\n              progressInfo={chapterStats}\n            />\n          )}\n        </FlexView>\n      </Styled.ChapterItemWrapper>\n    );\n  },\n);\n\nexport default ChapterItem;\n"],"names":["ChapterItem","memo","milestoneId","userType","chapter","onChapterClick","itemIndex","theme","useTheme","gutter","isOddIndex","name","imageUrl","chapterStats","totalLessons","showTitleTooltip","setShowTitleTooltip","useState","titleTextRef","useRef","handleOnChapterClick","useCallback","useLayoutEffect","jsxs","Styled.ChapterItemWrapper","jsx","Styled.ChapterImage","FlexView","ArrowTooltip","Styled.ChapterName","MilestoneProgressInfoV2"],"mappings":";;;;;;;AAWA,MAAMA,IAAqCC;AAAA,EACzC,CAAC,EAAE,aAAAC,GAAa,UAAAC,GAAU,SAAAC,GAAS,gBAAAC,GAAgB,WAAAC,QAAgB;AACjE,UAAMC,IAAQC,KACR,EAAE,QAAAC,EAAO,IAAIF,EAAM,QACnBG,IAAa,CAAC,GAAGJ,IAAY,KAAK,IAClC,EAAE,MAAAK,GAAM,WAAWC,GAAU,uBAAuBC,EAAiB,IAAAT,GACrE,EAAE,mBAAmBU,EAAiB,IAAAD,GACtC,CAACE,GAAkBC,CAAmB,IAAIC,EAAS,EAAK,GACxDC,IAAeC,EAAuB,IAAI,GAE1CC,IAAuBC,EAAY,MAAM;AAC7C,MAAAhB,EAAeD,GAASF,CAAW;AAAA,IAClC,GAAA,CAACE,GAASF,GAAaG,CAAc,CAAC;AAEzC,WAAAiB,EAAgB,MAAM;AACpB,MACEJ,EAAa,WACbA,EAAa,QAAQ,eAAeA,EAAa,QAAQ,gBAEzDF,EAAoB,EAAI;AAAA,IAC1B,GACC,CAACE,CAAY,CAAC,GAGf,gBAAAK;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,iBAAiB;AAAA,QACjB,MAAMf,IAAS;AAAA,QACf,SAASA,IAAS;AAAA,QAClB,gBAAe;AAAA,QACf,gBAAgBA;AAAA,QAChB,uBAAuBC;AAAA,QACvB,SAASU;AAAA,QACT,IAAI,qBAAqBlB,CAAW,IAAII,CAAS;AAAA,QACjD,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAmB,EAACC,GAAA,EAAoB,KAAKd,GAAU,KAAI,iBAAgB;AAAA,4BACvDe,GAAS,EAAA,iBAAgB,UAAS,aAAalB,IAAS,MACvD,UAAA;AAAA,YAAA,gBAAAgB;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,UAAS;AAAA,gBACT,aAAajB;AAAA,gBACb,QAAQ,CAACI;AAAA,gBACT,QAAQ;AAAA,gBAER,UAAA,gBAAAU,EAACI,GAAA,EAAmB,KAAKX,GAAc,WAAU,OAAM,QAAO,cAC3D,UACHP,EAAA,CAAA;AAAA,cAAA;AAAA,YACF;AAAA,YACC,CAAC,CAACG,KACD,gBAAAW;AAAA,cAACK;AAAA,cAAA;AAAA,gBACC,UAAA3B;AAAA,gBACA,aAAAD;AAAA,gBACA,cAAcW;AAAA,cAAA;AAAA,YAChB;AAAA,UAAA,GAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"chapter-item.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item.tsx"],"sourcesContent":["import type { IChapterItemProps } from './chapter-item-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useLayoutEffect, useRef, useState, memo } from 'react';\n\nimport Check2Icon from '../../../../assets/line-icons/icons/check2';\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../../ui/layout/flex-view';\nimport * as Styled from './chapter-item-styled';\n\nconst ChapterItem: FC<IChapterItemProps> = memo(\n  ({ milestoneId, chapter, onChapterClick, itemIndex }) => {\n    const {\n      name,\n      image_url: imageUrl,\n      progress_stat: chapterProgressStat,\n      image_hue: imageHue,\n    } = chapter;\n    const { completed = 0, total = 0 } = chapterProgressStat || {};\n    const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n    const titleTextRef = useRef<HTMLDivElement>(null);\n\n    const completionPercentage = completed > 0 ? Math.floor((completed / total || 1) * 100) : 0;\n\n    const handleOnChapterClick = useCallback(() => {\n      onChapterClick(chapter, milestoneId);\n    }, [chapter, milestoneId, onChapterClick]);\n\n    useLayoutEffect(() => {\n      if (\n        titleTextRef.current &&\n        titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n      ) {\n        setShowTitleTooltip(true);\n      }\n    }, [titleTextRef]);\n\n    return (\n      <Styled.ChapterItemWrapper\n        id={`milestone-chapter-${milestoneId || ''}-${itemIndex}`}\n        $alignItems=\"center\"\n        $gapX={1}\n        $gutterX={1}\n        $flexGap={8}\n        $background=\"WHITE_1\"\n        onClick={handleOnChapterClick}\n        className=\"goal-widget-chapter-item\"\n        $bgColor={`${imageHue}_1`}\n      >\n        <Styled.ChapterImageWrapper\n          $width=\"fit-content\"\n          $position=\"relative\"\n          $justifyContent=\"center\"\n          $alignItems=\"center\"\n        >\n          <Styled.ChapterProgressWrapper>\n            <Styled.ChapterProgressSVG width=\"96px\" height=\"96px\">\n              <Styled.ChapterProgressSVGCircle $progress={0} r=\"47\" cx=\"48\" cy=\"48\" />\n              <Styled.ChapterProgressSVGCircle\n                $progressCircle\n                $progress={completionPercentage * 2.98}\n                r=\"47\"\n                cx=\"48\"\n                cy=\"48\"\n              />\n            </Styled.ChapterProgressSVG>\n          </Styled.ChapterProgressWrapper>\n\n          <Styled.ChapterImage src={imageUrl} alt=\"Chapter Image\" />\n\n          {completionPercentage === 100 && (\n            <Styled.StyledCheckIconWrapper>\n              <Check2Icon width={20} height={20} />\n            </Styled.StyledCheckIconWrapper>\n          )}\n        </Styled.ChapterImageWrapper>\n\n        <FlexView $justifyContent=\"center\" $alignItems=\"center\">\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"bottom\"\n            tooltipItem={name}\n            hidden={!showTitleTooltip}\n            widthX={21.75}\n            zIndex={5}\n          >\n            <Styled.ChapterName\n              ref={titleTextRef}\n              $renderAs=\"ab2\"\n              $color=\"BLACK_T_87\"\n              $align=\"center\"\n            >\n              {name}\n            </Styled.ChapterName>\n          </ArrowTooltip>\n        </FlexView>\n      </Styled.ChapterItemWrapper>\n    );\n  },\n);\n\nexport default ChapterItem;\n"],"names":["ChapterItem","memo","milestoneId","chapter","onChapterClick","itemIndex","name","imageUrl","chapterProgressStat","imageHue","completed","total","showTitleTooltip","setShowTitleTooltip","useState","titleTextRef","useRef","completionPercentage","handleOnChapterClick","useCallback","useLayoutEffect","jsxs","Styled.ChapterItemWrapper","Styled.ChapterImageWrapper","jsx","Styled.ChapterProgressWrapper","Styled.ChapterProgressSVG","Styled.ChapterProgressSVGCircle","Styled.ChapterImage","Styled.StyledCheckIconWrapper","Check2Icon","FlexView","ArrowTooltip","Styled.ChapterName"],"mappings":";;;;;;AAUA,MAAMA,IAAqCC;AAAA,EACzC,CAAC,EAAE,aAAAC,GAAa,SAAAC,GAAS,gBAAAC,GAAgB,WAAAC,QAAgB;AACjD,UAAA;AAAA,MACJ,MAAAC;AAAA,MACA,WAAWC;AAAA,MACX,eAAeC;AAAA,MACf,WAAWC;AAAA,IACT,IAAAN,GACE,EAAE,WAAAO,IAAY,GAAG,OAAAC,IAAQ,EAAE,IAAIH,KAAuB,IACtD,CAACI,GAAkBC,CAAmB,IAAIC,EAAS,EAAK,GACxDC,IAAeC,EAAuB,IAAI,GAE1CC,IAAuBP,IAAY,IAAI,KAAK,OAAOA,IAAYC,KAAS,KAAK,GAAG,IAAI,GAEpFO,IAAuBC,EAAY,MAAM;AAC7C,MAAAf,EAAeD,GAASD,CAAW;AAAA,IAClC,GAAA,CAACC,GAASD,GAAaE,CAAc,CAAC;AAEzC,WAAAgB,EAAgB,MAAM;AACpB,MACEL,EAAa,WACbA,EAAa,QAAQ,eAAeA,EAAa,QAAQ,gBAEzDF,EAAoB,EAAI;AAAA,IAC1B,GACC,CAACE,CAAY,CAAC,GAGf,gBAAAM;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,IAAI,qBAAqBpB,KAAe,EAAE,IAAIG,CAAS;AAAA,QACvD,aAAY;AAAA,QACZ,OAAO;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,aAAY;AAAA,QACZ,SAASa;AAAA,QACT,WAAU;AAAA,QACV,UAAU,GAAGT,CAAQ;AAAA,QAErB,UAAA;AAAA,UAAA,gBAAAY;AAAA,YAACE;AAAAA,YAAA;AAAA,cACC,QAAO;AAAA,cACP,WAAU;AAAA,cACV,iBAAgB;AAAA,cAChB,aAAY;AAAA,cAEZ,UAAA;AAAA,gBAAC,gBAAAC,EAAAC,GAAA,EACC,UAAC,gBAAAJ,EAAAK,GAAA,EAA0B,OAAM,QAAO,QAAO,QAC7C,UAAA;AAAA,kBAAC,gBAAAF,EAAAG,GAAA,EAAgC,WAAW,GAAG,GAAE,MAAK,IAAG,MAAK,IAAG,KAAK,CAAA;AAAA,kBACtE,gBAAAH;AAAA,oBAACG;AAAAA,oBAAA;AAAA,sBACC,iBAAe;AAAA,sBACf,WAAWV,IAAuB;AAAA,sBAClC,GAAE;AAAA,sBACF,IAAG;AAAA,sBACH,IAAG;AAAA,oBAAA;AAAA,kBACL;AAAA,gBAAA,EAAA,CACF,EACF,CAAA;AAAA,kCAECW,GAAA,EAAoB,KAAKrB,GAAU,KAAI,iBAAgB;AAAA,gBAEvDU,MAAyB,OACvB,gBAAAO,EAAAK,GAAA,EACC,UAAC,gBAAAL,EAAAM,GAAA,EAAW,OAAO,IAAI,QAAQ,GAAA,CAAI,EACrC,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,UAEC,gBAAAN,EAAAO,GAAA,EAAS,iBAAgB,UAAS,aAAY,UAC7C,UAAA,gBAAAP;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,UAAS;AAAA,cACT,aAAa1B;AAAA,cACb,QAAQ,CAACM;AAAA,cACT,QAAQ;AAAA,cACR,QAAQ;AAAA,cAER,UAAA,gBAAAY;AAAA,gBAACS;AAAAA,gBAAA;AAAA,kBACC,KAAKlB;AAAA,kBACL,WAAU;AAAA,kBACV,QAAO;AAAA,kBACP,QAAO;AAAA,kBAEN,UAAAT;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/features/chapters/chapters-list/chapters-list-styled.js

@@ -1,14 +1,15 @@
 import r from "styled-components";
 import { MILESTONE_WIDGET_MIN_HEIGHT as o } from "../../milestone/constants.js";
-import p from "../../ui/layout/flex-view.js";
-const s = r(p)`
+import i from "../../ui/layout/flex-view.js";
+const s = r(i)`
   position: relative;
   min-height: ${o}px;
 `, n = r.div`
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   align-content: start;
-`, d = r.div(({ theme: t }) => `
+`;
+r.div(({ theme: t }) => `
     position: absolute;
     bottom: ${t.layout.gutter}px;
     right: ${t.layout.gutter}px;
@@ -16,7 +17,6 @@ const s = r(p)`
     border-radius: 50%;
   `);
 export {
-  d as AddChapterIconWrapper,
   s as ChaptersListContainer,
   n as ChaptersWrapper
 };

package/dist/features/chapters/chapters-list/chapters-list-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"chapters-list-styled.js","sources":["../../../../src/features/chapters/chapters-list/chapters-list-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { MILESTONE_WIDGET_MIN_HEIGHT } from '../../milestone/constants';\nimport FlexView from '../../ui/layout/flex-view';\n\nconst ChaptersListContainer = styled(FlexView)`\n  position: relative;\n  min-height: ${MILESTONE_WIDGET_MIN_HEIGHT}px;\n`;\n\nconst ChaptersWrapper = styled.div`\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  align-content: start;\n`;\n\nconst AddChapterIconWrapper = styled.div(({ theme }) => {\n  return `\n    position: absolute;\n    bottom: ${theme.layout.gutter}px;\n    right: ${theme.layout.gutter}px;\n    box-shadow: 0px 10px 20px 0px ${theme.colors.BLACK_T_20};\n    border-radius: 50%;\n  `;\n});\n\nexport { ChaptersListContainer, ChaptersWrapper, AddChapterIconWrapper };\n"],"names":["ChaptersListContainer","styled","FlexView","MILESTONE_WIDGET_MIN_HEIGHT","ChaptersWrapper","AddChapterIconWrapper","theme"],"mappings":";;;AAKM,MAAAA,IAAwBC,EAAOC,CAAQ;AAAA;AAAA,gBAE7BC,CAA2B;AAAA,GAGrCC,IAAkBH,EAAO;AAAA;AAAA;AAAA;AAAA,GAMzBI,IAAwBJ,EAAO,IAAI,CAAC,EAAE,OAAAK,QACnC;AAAA;AAAA,cAEKA,EAAM,OAAO,MAAM;AAAA,aACpBA,EAAM,OAAO,MAAM;AAAA,oCACIA,EAAM,OAAO,UAAU;AAAA;AAAA,GAG1D;"}
+{"version":3,"file":"chapters-list-styled.js","sources":["../../../../src/features/chapters/chapters-list/chapters-list-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { MILESTONE_WIDGET_MIN_HEIGHT } from '../../milestone/constants';\nimport FlexView from '../../ui/layout/flex-view';\n\nconst ChaptersListContainer = styled(FlexView)`\n  position: relative;\n  min-height: ${MILESTONE_WIDGET_MIN_HEIGHT}px;\n`;\n\nconst ChaptersWrapper = styled.div`\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  align-content: start;\n`;\n\nconst AddChapterIconWrapper = styled.div(({ theme }) => {\n  return `\n    position: absolute;\n    bottom: ${theme.layout.gutter}px;\n    right: ${theme.layout.gutter}px;\n    box-shadow: 0px 10px 20px 0px ${theme.colors.BLACK_T_20};\n    border-radius: 50%;\n  `;\n});\n\nexport { ChaptersListContainer, ChaptersWrapper, AddChapterIconWrapper };\n"],"names":["ChaptersListContainer","styled","FlexView","MILESTONE_WIDGET_MIN_HEIGHT","ChaptersWrapper","theme"],"mappings":";;;AAKM,MAAAA,IAAwBC,EAAOC,CAAQ;AAAA;AAAA,gBAE7BC,CAA2B;AAAA,GAGrCC,IAAkBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAMDA,EAAO,IAAI,CAAC,EAAE,OAAAI,QACnC;AAAA;AAAA,cAEKA,EAAM,OAAO,MAAM;AAAA,aACpBA,EAAM,OAAO,MAAM;AAAA,oCACIA,EAAM,OAAO,UAAU;AAAA;AAAA,GAG1D;"}

package/dist/features/chapters/chapters-list/chapters-list.js

@@ -1,84 +1,79 @@
-import { jsxs as i, jsx as r, Fragment as T } from "react/jsx-runtime";
-import { memo as b, useCallback as y } from "react";
+import { jsxs as m, jsx as r, Fragment as A } from "react/jsx-runtime";
+import { memo as T, useCallback as b } from "react";
 import { IMAGES as g } from "../../../assets/images/images.js";
-import k from "../../../assets/line-icons/icons/plus2.js";
-import x from "../../ui/arrow-tooltip/arrow-tooltip.js";
-import E from "../../ui/buttons/button/button.js";
-import I from "../../ui/buttons/icon-button/icon-button.js";
+import k from "../../ui/arrow-tooltip/arrow-tooltip.js";
+import x from "../../ui/buttons/button/button.js";
 import { useUIContext as $ } from "../../ui/context/context.js";
-import d from "../../ui/separator/separator.js";
-import L from "../../ui/text/text.js";
-import X from "./chapter-item/chapter-item.js";
-import { ChaptersListContainer as h, ChaptersWrapper as M, AddChapterIconWrapper as S } from "./chapters-list-styled.js";
-const j = b(
-  ({ milestoneId: t, canUpdatePlan: n, chapters: a, ...C }) => {
-    const { isGoalCreation: s, userType: o, onChapterClick: f, onAddChapter: e, isMilestoneActive: p } = C, A = o === "TEACHER" && e && n, { onClick: c } = $(), m = y(() => {
-      c({
+import l from "../../ui/separator/separator.js";
+import y from "../../ui/text/text.js";
+import E from "./chapter-item/chapter-item.js";
+import { ChaptersListContainer as c, ChaptersWrapper as X } from "./chapters-list-styled.js";
+const I = T(
+  ({ milestoneId: t, canUpdatePlan: d, chapters: o, ...h }) => {
+    const { isGoalCreation: i, userType: a, onChapterClick: C, onAddChapter: e, isMilestoneActive: n } = h, { onClick: s } = $(), f = b(() => {
+      s({
         label: "add_chapter_icon",
         props: {
           milestone_id: t
         }
-      }), e == null || e({ milestoneId: t, isGoalCreation: s });
-    }, [t, s, e, c]);
-    return a.length ? /* @__PURE__ */ i(h, { children: [
-      /* @__PURE__ */ r(M, { children: a.map((l, u) => {
-        const { id: _ } = l;
-        return /* @__PURE__ */ r(
-          X,
-          {
-            milestoneId: t,
-            userType: o,
-            chapter: l,
-            onChapterClick: f,
-            itemIndex: u
-          },
-          _
-        );
-      }) }),
-      A && /* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(
-        I,
+      }), e == null || e({ milestoneId: t, isGoalCreation: i });
+    }, [t, i, e, s]);
+    return o.length ? /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(X, { children: o.map((p, u) => {
+      const { id: _ } = p;
+      return /* @__PURE__ */ r(
+        E,
         {
-          Icon: k,
-          renderAs: "secondary",
-          size: "small",
-          analyticsLabel: "add_chapter_icon",
-          onClick: m
-        }
-      ) })
-    ] }) : /* @__PURE__ */ i(h, { $gapX: 6.75, $alignItems: "center", $justifyContent: "center", children: [
-      /* @__PURE__ */ r("img", { src: g.EMPTY_MIX_TESTS, alt: "empty_mix_tests" }),
-      /* @__PURE__ */ r(d, { heightX: 2 }),
-      o === "TEACHER" ? /* @__PURE__ */ i(T, { children: [
-        /* @__PURE__ */ r(
-          x,
-          {
-            renderAs: "primary",
-            position: "bottom",
-            hidden: p,
-            tooltipItem: "Plan is completed",
-            children: /* @__PURE__ */ r(
-              E,
+          milestoneId: t,
+          userType: a,
+          chapter: p,
+          onChapterClick: C,
+          itemIndex: u
+        },
+        _
+      );
+    }) }) }) : /* @__PURE__ */ m(
+      c,
+      {
+        $gapX: 6.75,
+        $alignItems: "center",
+        $justifyContent: "center",
+        $background: "WHITE",
+        children: [
+          /* @__PURE__ */ r("img", { src: g.EMPTY_MIX_TESTS, alt: "empty_mix_tests" }),
+          /* @__PURE__ */ r(l, { heightX: 2 }),
+          a === "TEACHER" ? /* @__PURE__ */ m(A, { children: [
+            /* @__PURE__ */ r(
+              k,
               {
-                widthX: 10,
                 renderAs: "primary",
-                shape: "square",
-                size: "small",
-                label: "Add chapter",
-                onClick: m,
-                disabled: !p || !n,
-                analyticsProps: {
-                  milestone_id: t
-                }
+                position: "bottom",
+                hidden: n,
+                tooltipItem: "Plan is completed",
+                children: /* @__PURE__ */ r(
+                  x,
+                  {
+                    widthX: 10,
+                    renderAs: "primary",
+                    shape: "square",
+                    size: "small",
+                    label: "Add chapter",
+                    onClick: f,
+                    disabled: !n || !d,
+                    analyticsProps: {
+                      milestone_id: t
+                    }
+                  }
+                )
               }
-            )
-          }
-        ),
-        /* @__PURE__ */ r(d, { heightX: 2 })
-      ] }) : /* @__PURE__ */ r(L, { $renderAs: "ab2-bold", $color: "BLACK_T_87", children: "Wait for the teacher to add a chapter" })
-    ] });
+            ),
+            /* @__PURE__ */ r(l, { heightX: 2 })
+          ] }) : /* @__PURE__ */ r(y, { $renderAs: "ab2-bold", $color: "BLACK_T_87", children: "Wait for the teacher to add a chapter" })
+        ]
+      }
+    );
   }
-), K = j;
+), O = I;
 export {
-  K as default
+  O as default
 };
 //# sourceMappingURL=chapters-list.js.map

package/dist/features/chapters/chapters-list/chapters-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"chapters-list.js","sources":["../../../../src/features/chapters/chapters-list/chapters-list.tsx"],"sourcesContent":["import type { IChaptersListProps } from './chapters-list-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport { IMAGES } from '../../../assets/images/images';\nimport Plus2Icon from '../../../assets/line-icons/icons/plus2';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport Button from '../../ui/buttons/button/button';\nimport IconButton from '../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../ui/context/context';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport ChapterItem from './chapter-item/chapter-item';\nimport * as Styled from './chapters-list-styled';\n\nconst ChaptersList: FC<IChaptersListProps> = memo(\n  ({ milestoneId, canUpdatePlan, chapters, ...restChaptersList }) => {\n    const { isGoalCreation, userType, onChapterClick, onAddChapter, isMilestoneActive } =\n      restChaptersList;\n\n    const canAddChapter = userType === 'TEACHER' && onAddChapter && canUpdatePlan;\n    const { onClick: trackOnClick } = useUIContext();\n\n    const handleOnAddChapter = useCallback(() => {\n      trackOnClick({\n        label: 'add_chapter_icon',\n        props: {\n          milestone_id: milestoneId,\n        },\n      });\n      onAddChapter?.({ milestoneId, isGoalCreation });\n    }, [milestoneId, isGoalCreation, onAddChapter, trackOnClick]);\n\n    if (!chapters.length) {\n      return (\n        <Styled.ChaptersListContainer $gapX={6.75} $alignItems=\"center\" $justifyContent=\"center\">\n          <img src={IMAGES.EMPTY_MIX_TESTS} alt=\"empty_mix_tests\" />\n          <Separator heightX={2} />\n          {userType === 'TEACHER' ? (\n            <>\n              <ArrowTooltip\n                renderAs=\"primary\"\n                position=\"bottom\"\n                hidden={isMilestoneActive}\n                tooltipItem=\"Plan is completed\"\n              >\n                <Button\n                  widthX={10}\n                  renderAs=\"primary\"\n                  shape=\"square\"\n                  size=\"small\"\n                  label=\"Add chapter\"\n                  onClick={handleOnAddChapter}\n                  disabled={!isMilestoneActive || !canUpdatePlan}\n                  analyticsProps={{\n                    milestone_id: milestoneId,\n                  }}\n                />\n              </ArrowTooltip>\n              <Separator heightX={2} />\n            </>\n          ) : (\n            <Text $renderAs=\"ab2-bold\" $color=\"BLACK_T_87\">\n              Wait for the teacher to add a chapter\n            </Text>\n          )}\n        </Styled.ChaptersListContainer>\n      );\n    }\n\n    return (\n      <Styled.ChaptersListContainer>\n        <Styled.ChaptersWrapper>\n          {chapters.map((chapter, idx) => {\n            const { id } = chapter;\n\n            return (\n              <ChapterItem\n                key={id}\n                milestoneId={milestoneId}\n                userType={userType}\n                chapter={chapter}\n                onChapterClick={onChapterClick}\n                itemIndex={idx}\n              />\n            );\n          })}\n        </Styled.ChaptersWrapper>\n        {canAddChapter && (\n          <Styled.AddChapterIconWrapper>\n            <IconButton\n              Icon={Plus2Icon}\n              renderAs=\"secondary\"\n              size=\"small\"\n              analyticsLabel=\"add_chapter_icon\"\n              onClick={handleOnAddChapter}\n            />\n          </Styled.AddChapterIconWrapper>\n        )}\n      </Styled.ChaptersListContainer>\n    );\n  },\n);\n\nexport default ChaptersList;\n"],"names":["ChaptersList","memo","milestoneId","canUpdatePlan","chapters","restChaptersList","isGoalCreation","userType","onChapterClick","onAddChapter","isMilestoneActive","canAddChapter","trackOnClick","useUIContext","handleOnAddChapter","useCallback","jsxs","Styled.ChaptersListContainer","jsx","Styled.ChaptersWrapper","chapter","idx","id","ChapterItem","Styled.AddChapterIconWrapper","IconButton","Plus2Icon","IMAGES","Separator","Fragment","ArrowTooltip","Button","Text","ChaptersList$1"],"mappings":";;;;;;;;;;;;AAgBA,MAAMA,IAAuCC;AAAA,EAC3C,CAAC,EAAE,aAAAC,GAAa,eAAAC,GAAe,UAAAC,GAAU,GAAGC,QAAuB;AACjE,UAAM,EAAE,gBAAAC,GAAgB,UAAAC,GAAU,gBAAAC,GAAgB,cAAAC,GAAc,mBAAAC,EAC9D,IAAAL,GAEIM,IAAgBJ,MAAa,aAAaE,KAAgBN,GAC1D,EAAE,SAASS,EAAa,IAAIC,EAAa,GAEzCC,IAAqBC,EAAY,MAAM;AAC9B,MAAAH,EAAA;AAAA,QACX,OAAO;AAAA,QACP,OAAO;AAAA,UACL,cAAcV;AAAA,QAChB;AAAA,MAAA,CACD,GACcO,KAAA,QAAAA,EAAA,EAAE,aAAAP,GAAa,gBAAAI,EAAA;AAAA,OAC7B,CAACJ,GAAaI,GAAgBG,GAAcG,CAAY,CAAC;AAExD,WAACR,EAAS,SAsCZ,gBAAAY,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EACE,YAAS,IAAI,CAACC,GAASC,MAAQ;AACxB,cAAA,EAAE,IAAAC,EAAO,IAAAF;AAGb,eAAA,gBAAAF;AAAA,UAACK;AAAA,UAAA;AAAA,YAEC,aAAArB;AAAA,YACA,UAAAK;AAAA,YACA,SAAAa;AAAA,YACA,gBAAAZ;AAAA,YACA,WAAWa;AAAA,UAAA;AAAA,UALNC;AAAA,QAAA;AAAA,MAQV,CAAA,GACH;AAAA,MACCX,KACC,gBAAAO,EAACM,GAAA,EACC,UAAA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,MAAMC;AAAA,UACN,UAAS;AAAA,UACT,MAAK;AAAA,UACL,gBAAe;AAAA,UACf,SAASZ;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAEJ,EAAA,CAAA,IAhEE,gBAAAE,EAACC,GAAA,EAA6B,OAAO,MAAM,aAAY,UAAS,iBAAgB,UAC9E,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAI,EAAA,KAAKS,EAAO,iBAAiB,KAAI,mBAAkB;AAAA,MACxD,gBAAAT,EAACU,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,MACtBrB,MAAa,YAEV,gBAAAS,EAAAa,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAX;AAAA,UAACY;AAAA,UAAA;AAAA,YACC,UAAS;AAAA,YACT,UAAS;AAAA,YACT,QAAQpB;AAAA,YACR,aAAY;AAAA,YAEZ,UAAA,gBAAAQ;AAAA,cAACa;AAAA,cAAA;AAAA,gBACC,QAAQ;AAAA,gBACR,UAAS;AAAA,gBACT,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,SAASjB;AAAA,gBACT,UAAU,CAACJ,KAAqB,CAACP;AAAA,gBACjC,gBAAgB;AAAA,kBACd,cAAcD;AAAA,gBAChB;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,QACA,gBAAAgB,EAACU,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,MAAA,EAAA,CACzB,IAEC,gBAAAV,EAAAc,GAAA,EAAK,WAAU,YAAW,QAAO,cAAa,UAE/C,yCAAA;AAAA,IAEJ,EAAA,CAAA;AAAA,EAmCN;AACF,GAEAC,IAAejC;"}
+{"version":3,"file":"chapters-list.js","sources":["../../../../src/features/chapters/chapters-list/chapters-list.tsx"],"sourcesContent":["import type { IChaptersListProps } from './chapters-list-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport { IMAGES } from '../../../assets/images/images';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport Button from '../../ui/buttons/button/button';\nimport { useUIContext } from '../../ui/context/context';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport ChapterItem from './chapter-item/chapter-item';\nimport * as Styled from './chapters-list-styled';\n\nconst ChaptersList: FC<IChaptersListProps> = memo(\n  ({ milestoneId, canUpdatePlan, chapters, ...restChaptersList }) => {\n    const { isGoalCreation, userType, onChapterClick, onAddChapter, isMilestoneActive } =\n      restChaptersList;\n\n    const { onClick: trackOnClick } = useUIContext();\n\n    const handleOnAddChapter = useCallback(() => {\n      trackOnClick({\n        label: 'add_chapter_icon',\n        props: {\n          milestone_id: milestoneId,\n        },\n      });\n      onAddChapter?.({ milestoneId, isGoalCreation });\n    }, [milestoneId, isGoalCreation, onAddChapter, trackOnClick]);\n\n    if (!chapters.length) {\n      return (\n        <Styled.ChaptersListContainer\n          $gapX={6.75}\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n          $background=\"WHITE\"\n        >\n          <img src={IMAGES.EMPTY_MIX_TESTS} alt=\"empty_mix_tests\" />\n          <Separator heightX={2} />\n          {userType === 'TEACHER' ? (\n            <>\n              <ArrowTooltip\n                renderAs=\"primary\"\n                position=\"bottom\"\n                hidden={isMilestoneActive}\n                tooltipItem=\"Plan is completed\"\n              >\n                <Button\n                  widthX={10}\n                  renderAs=\"primary\"\n                  shape=\"square\"\n                  size=\"small\"\n                  label=\"Add chapter\"\n                  onClick={handleOnAddChapter}\n                  disabled={!isMilestoneActive || !canUpdatePlan}\n                  analyticsProps={{\n                    milestone_id: milestoneId,\n                  }}\n                />\n              </ArrowTooltip>\n              <Separator heightX={2} />\n            </>\n          ) : (\n            <Text $renderAs=\"ab2-bold\" $color=\"BLACK_T_87\">\n              Wait for the teacher to add a chapter\n            </Text>\n          )}\n        </Styled.ChaptersListContainer>\n      );\n    }\n\n    return (\n      <Styled.ChaptersListContainer>\n        <Styled.ChaptersWrapper>\n          {chapters.map((chapter, idx) => {\n            const { id } = chapter;\n\n            return (\n              <ChapterItem\n                key={id}\n                milestoneId={milestoneId}\n                userType={userType}\n                chapter={chapter}\n                onChapterClick={onChapterClick}\n                itemIndex={idx}\n              />\n            );\n          })}\n        </Styled.ChaptersWrapper>\n      </Styled.ChaptersListContainer>\n    );\n  },\n);\n\nexport default ChaptersList;\n"],"names":["ChaptersList","memo","milestoneId","canUpdatePlan","chapters","restChaptersList","isGoalCreation","userType","onChapterClick","onAddChapter","isMilestoneActive","trackOnClick","useUIContext","handleOnAddChapter","useCallback","jsx","Styled.ChaptersListContainer","Styled.ChaptersWrapper","chapter","idx","id","ChapterItem","jsxs","IMAGES","Separator","Fragment","ArrowTooltip","Button","Text","ChaptersList$1"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAuCC;AAAA,EAC3C,CAAC,EAAE,aAAAC,GAAa,eAAAC,GAAe,UAAAC,GAAU,GAAGC,QAAuB;AACjE,UAAM,EAAE,gBAAAC,GAAgB,UAAAC,GAAU,gBAAAC,GAAgB,cAAAC,GAAc,mBAAAC,EAC9D,IAAAL,GAEI,EAAE,SAASM,EAAa,IAAIC,EAAa,GAEzCC,IAAqBC,EAAY,MAAM;AAC9B,MAAAH,EAAA;AAAA,QACX,OAAO;AAAA,QACP,OAAO;AAAA,UACL,cAAcT;AAAA,QAChB;AAAA,MAAA,CACD,GACcO,KAAA,QAAAA,EAAA,EAAE,aAAAP,GAAa,gBAAAI,EAAA;AAAA,OAC7B,CAACJ,GAAaI,GAAgBG,GAAcE,CAAY,CAAC;AAExD,WAACP,EAAS,SA2CX,gBAAAW,EAAAC,GAAA,EACC,UAAC,gBAAAD,EAAAE,GAAA,EACE,UAASb,EAAA,IAAI,CAACc,GAASC,MAAQ;AACxB,YAAA,EAAE,IAAAC,EAAO,IAAAF;AAGb,aAAA,gBAAAH;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,aAAAnB;AAAA,UACA,UAAAK;AAAA,UACA,SAAAW;AAAA,UACA,gBAAAV;AAAA,UACA,WAAWW;AAAA,QAAA;AAAA,QALNC;AAAA,MAAA;AAAA,IAMP,CAEH,GACH,EACF,CAAA,IA1DE,gBAAAE;AAAA,MAACN;AAAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,aAAY;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAI,EAAA,KAAKQ,EAAO,iBAAiB,KAAI,mBAAkB;AAAA,UACxD,gBAAAR,EAACS,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,UACtBjB,MAAa,YAEV,gBAAAe,EAAAG,GAAA,EAAA,UAAA;AAAA,YAAA,gBAAAV;AAAA,cAACW;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,UAAS;AAAA,gBACT,QAAQhB;AAAA,gBACR,aAAY;AAAA,gBAEZ,UAAA,gBAAAK;AAAA,kBAACY;AAAA,kBAAA;AAAA,oBACC,QAAQ;AAAA,oBACR,UAAS;AAAA,oBACT,OAAM;AAAA,oBACN,MAAK;AAAA,oBACL,OAAM;AAAA,oBACN,SAASd;AAAA,oBACT,UAAU,CAACH,KAAqB,CAACP;AAAA,oBACjC,gBAAgB;AAAA,sBACd,cAAcD;AAAA,oBAChB;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YACF;AAAA,YACA,gBAAAa,EAACS,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,UAAA,EAAA,CACzB,IAEC,gBAAAT,EAAAa,GAAA,EAAK,WAAU,YAAW,QAAO,cAAa,UAE/C,yCAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EA0BV;AACF,GAEAC,IAAe7B;"}