@cuemath/leap 3.0.20-gs1 → 3.0.20-j1

package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js

@@ -1,19 +1,19 @@
 import t from "styled-components";
-import i from "../../../ui/layout/flex-view.js";
-const n = t(i)`
+import r from "../../../ui/layout/flex-view.js";
+const n = t(r)`
   position: relative;
-`, s = t(i)`
+`, s = t(r)`
   position: absolute;
   border-radius: 100%;
   top: 216px;
   border: ${({ theme: o }) => `2px solid ${o.colors.BLACK_5}`};
-`, p = t(i)`
+`, p = t(r)`
   opacity: ${({ $isVisible: o }) => o ? 1 : 0};
   transition: opacity 0.5s ease-in-out;
-`, l = t.div`
+`, a = t.div`
   position: relative;
 `;
-t(i)`
+t(r)`
   position: relative;
   overflow: hidden;
   background: ${({ theme: o }) => o.colors.BLACK_2};
@@ -30,11 +30,14 @@ t.div`
   height: 100%;
   z-index: 2;
 `;
-const a = t(i)`
+const l = t(r)`
   position: absolute;
   top: 55%;
   right: 24px;
-`, c = t(i)`
+`, c = t(r)`
+  position: absolute;
+  top: 642px;
+`, d = t(r)`
   position: absolute;
   top: 55%;
   left: 24px;
@@ -49,8 +52,9 @@ export {
   s as CircularStepContainer,
   n as Container,
   p as ContentWrapper,
-  l as InputContainer,
-  a as NextButtonWrapper,
-  c as PrevButtonWrapper
+  c as FooterWrapper,
+  a as InputContainer,
+  l as NextButtonWrapper,
+  d as PrevButtonWrapper
 };
 //# sourceMappingURL=circular-step-wrapper-styled.js.map

package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n  position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)`\n  position: absolute;\n  border-radius: 100%;\n  top: 216px;\n  border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n`;\n\nconst ContentWrapper = styled(FlexView)<{ $isVisible: boolean }>`\n  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};\n  transition: opacity 0.5s ease-in-out;\n`;\n\nconst InputContainer = styled.div`\n  position: relative;\n`;\n\nconst CircularProgressContainer = styled(FlexView)<{\n  isVerticallyCentered?: boolean;\n}>`\n  position: relative;\n  overflow: hidden;\n  background: ${({ theme }) => theme.colors.BLACK_2};\n  border-radius: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const CircularProgress = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n`;\n\nconst NextButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  right: 24px;\n`;\nconst PrevButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  left: 24px;\n  button {\n    background-color: ${({ theme }) => theme.colors.BLACK_1};\n    svg {\n      color: ${({ theme }) => theme.colors.WHITE};\n    }\n  }\n`;\n\nexport {\n  NextButtonWrapper,\n  PrevButtonWrapper,\n  InputContainer,\n  Container,\n  CircularStepContainer,\n  CircularProgressContainer,\n  ContentWrapper,\n};\n"],"names":["Container","styled","FlexView","CircularStepContainer","theme","ContentWrapper","$isVisible","InputContainer","NextButtonWrapper","PrevButtonWrapper"],"mappings":";;AAIM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAwBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,YAIjC,CAAC,EAAE,OAAAE,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,GAGxDC,IAAiBJ,EAAOC,CAAQ;AAAA,aACzB,CAAC,EAAE,YAAAI,EAAA,MAAkBA,IAAa,IAAI,CAAE;AAAA;AAAA,GAI/CC,IAAiBN,EAAO;AAAA;AAAA;AAIIA,EAAOC,CAAQ;AAAA;AAAA;AAAA,gBAKjC,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAGZH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAAO,IAAoBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAKnCO,IAAoBR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKjB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,eAE5C,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n  position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)`\n  position: absolute;\n  border-radius: 100%;\n  top: 216px;\n  border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n`;\n\nconst ContentWrapper = styled(FlexView)<{ $isVisible: boolean }>`\n  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};\n  transition: opacity 0.5s ease-in-out;\n`;\n\nconst InputContainer = styled.div`\n  position: relative;\n`;\n\nconst CircularProgressContainer = styled(FlexView)<{\n  isVerticallyCentered?: boolean;\n}>`\n  position: relative;\n  overflow: hidden;\n  background: ${({ theme }) => theme.colors.BLACK_2};\n  border-radius: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const CircularProgress = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n`;\n\nconst NextButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  right: 24px;\n`;\n\nconst FooterWrapper = styled(FlexView)`\n  position: absolute;\n  top: 642px;\n`;\n\nconst PrevButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  left: 24px;\n  button {\n    background-color: ${({ theme }) => theme.colors.BLACK_1};\n    svg {\n      color: ${({ theme }) => theme.colors.WHITE};\n    }\n  }\n`;\n\nexport {\n  NextButtonWrapper,\n  PrevButtonWrapper,\n  InputContainer,\n  Container,\n  CircularStepContainer,\n  CircularProgressContainer,\n  ContentWrapper,\n  FooterWrapper,\n};\n"],"names":["Container","styled","FlexView","CircularStepContainer","theme","ContentWrapper","$isVisible","InputContainer","NextButtonWrapper","FooterWrapper","PrevButtonWrapper"],"mappings":";;AAIM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAwBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,YAIjC,CAAC,EAAE,OAAAE,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,GAGxDC,IAAiBJ,EAAOC,CAAQ;AAAA,aACzB,CAAC,EAAE,YAAAI,EAAA,MAAkBA,IAAa,IAAI,CAAE;AAAA;AAAA,GAI/CC,IAAiBN,EAAO;AAAA;AAAA;AAIIA,EAAOC,CAAQ;AAAA;AAAA;AAAA,gBAKjC,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAGZH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAAO,IAAoBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMnCO,IAAgBR,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAK/BQ,IAAoBT,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKjB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,eAE5C,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;"}

package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js

@@ -1,53 +1,54 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { memo as b, forwardRef as E, useRef as c, useState as $, useCallback as H, useEffect as B, useImperativeHandle as T, useLayoutEffect as j } from "react";
+import { memo as E, forwardRef as H, useRef as c, useState as g, useCallback as j, useEffect as B, useImperativeHandle as T, useLayoutEffect as F } from "react";
 import P from "../../../../assets/line-icons/icons/back2.js";
 import z from "../../../../assets/line-icons/icons/next2.js";
-import F from "../../../ui/animated-arc/animated-arc.js";
-import g from "../../../ui/buttons/icon-button/icon-button.js";
-import M from "../../../ui/layout/flex-view.js";
-import N from "../../../ui/lottie-animation/lottie-animation.js";
-import O from "../../../ui/separator/separator.js";
-import V from "../../../ui/text/text.js";
-import { Container as X, CircularStepContainer as D, ContentWrapper as K, InputContainer as Y, PrevButtonWrapper as _, NextButtonWrapper as q } from "./circular-step-wrapper-styled.js";
-const G = {
+import M from "../../../ui/animated-arc/animated-arc.js";
+import C from "../../../ui/buttons/icon-button/icon-button.js";
+import N from "../../../ui/layout/flex-view.js";
+import O from "../../../ui/lottie-animation/lottie-animation.js";
+import V from "../../../ui/separator/separator.js";
+import X from "../../../ui/text/text.js";
+import { Container as D, CircularStepContainer as K, ContentWrapper as Y, InputContainer as _, FooterWrapper as q, PrevButtonWrapper as G, NextButtonWrapper as J } from "./circular-step-wrapper-styled.js";
+const Q = {
   autoplay: !1,
   loop: !1,
   renderer: "canvas",
   rendererSettings: {
     preserveAspectRatio: "xMidYMin slice"
   }
-}, J = E(
+}, U = H(
   ({
-    children: C,
-    onGoBack: y,
-    onNext: I,
+    children: y,
+    onGoBack: I,
+    onNext: x,
     label: a,
-    showNext: x,
-    showPrevious: A,
+    showNext: A,
+    showPrevious: S,
     animation: r,
-    introFrames: S,
-    outroFrames: w,
+    introFrames: w,
+    outroFrames: R,
     isNextLoading: s,
-    progressAngle: l
-  }, R) => {
-    const t = c(null), o = c(null), [u, k] = $(), [v, m] = $(!1), i = c(null), L = H(() => {
-      r && t.current && (t.current.playSegments(S, !0), m(!0));
+    progressAngle: l,
+    footerElement: u
+  }, W) => {
+    const t = c(null), o = c(null), [m, k] = g(), [v, d] = g(!1), i = c(null), L = j(() => {
+      r && t.current && (t.current.playSegments(w, !0), d(!0));
     }, [r]);
     return B(() => () => {
       i.current && clearTimeout(i.current);
-    }, [r]), T(R, () => ({
-      playOutroAndFadeOut: async () => new Promise((W) => {
-        var f, p;
-        const d = () => {
-          var h;
-          W(), (h = t.current) == null || h.removeEventListener("complete", d);
+    }, [r]), T(W, () => ({
+      playOutroAndFadeOut: async () => new Promise((b) => {
+        var f, h;
+        const p = () => {
+          var $;
+          b(), ($ = t.current) == null || $.removeEventListener("complete", p);
         };
-        (f = t.current) == null || f.playSegments(w, !0), i.current = setTimeout(() => m(!1), 400), (p = t.current) == null || p.addEventListener("complete", d);
+        (f = t.current) == null || f.playSegments(R, !0), i.current = setTimeout(() => d(!1), 400), (h = t.current) == null || h.addEventListener("complete", p);
       })
-    })), j(() => {
+    })), F(() => {
       o.current && k(o.current.offsetHeight);
     }, []), /* @__PURE__ */ n(
-      X,
+      D,
       {
         $flex: 1,
         $flexDirection: "column",
@@ -57,19 +58,19 @@ const G = {
         $height: "100%",
         ref: o,
         children: [
-          u && /* @__PURE__ */ e(
-            N,
+          m && /* @__PURE__ */ e(
+            O,
             {
               width: 1280,
-              height: u,
+              height: m,
               src: r,
               ref: t,
               onRender: L,
-              settings: G
+              settings: Q
             }
           ),
           /* @__PURE__ */ n(
-            D,
+            K,
             {
               $width: 400,
               $height: 400,
@@ -78,7 +79,7 @@ const G = {
               $justifyContent: "center",
               children: [
                 l && /* @__PURE__ */ e(
-                  F,
+                  M,
                   {
                     radius: 200,
                     strokeWidth: 2,
@@ -88,35 +89,36 @@ const G = {
                     duration: 1
                   }
                 ),
-                /* @__PURE__ */ n(K, { $isVisible: v, $width: "100%", children: [
-                  a && /* @__PURE__ */ n(M, { $gutterX: 3.5, children: [
-                    /* @__PURE__ */ e(V, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: a }),
-                    /* @__PURE__ */ e(O, { heightX: 1 })
+                /* @__PURE__ */ n(Y, { $isVisible: v, $width: "100%", children: [
+                  a && /* @__PURE__ */ n(N, { $gutterX: 3.5, children: [
+                    /* @__PURE__ */ e(X, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: a }),
+                    /* @__PURE__ */ e(V, { heightX: 1 })
                   ] }),
-                  /* @__PURE__ */ e(Y, { children: C })
+                  /* @__PURE__ */ e(_, { children: y })
                 ] })
               ]
             }
           ),
-          A && /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(
-            g,
+          u && /* @__PURE__ */ e(q, { $alignItems: "center", $justifyContent: "center", children: u }),
+          S && /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
+            C,
             {
               Icon: P,
               renderAs: "secondary-dark",
               analyticsLabel: "Prev",
-              onClick: y,
+              onClick: I,
               disabled: s,
               size: "small"
             }
           ) }),
-          x && /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(
-            g,
+          A && /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(
+            C,
             {
               size: "small",
               Icon: z,
               renderAs: "secondary-dark",
               analyticsLabel: "Next",
-              onClick: I,
+              onClick: x,
               busy: s
             }
           ) })
@@ -124,8 +126,8 @@ const G = {
       }
     );
   }
-), se = b(J);
+), ue = E(U);
 export {
-  se as default
+  ue as default
 };
 //# sourceMappingURL=circular-step-wrapper.js.map

package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-step-wrapper.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ICircularStepRef, ICircularStepWrapperProps } from './circular-step-wrapper-types';\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  memo,\n  type Ref,\n} from 'react';\n\nimport Back2Icon from '../../../../assets/line-icons/icons/back2';\nimport Next2Icon from '../../../../assets/line-icons/icons/next2';\nimport AnimatedArc from '../../../ui/animated-arc/animated-arc';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './circular-step-wrapper-styled';\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n  rendererSettings: {\n    preserveAspectRatio: 'xMidYMin slice',\n  },\n};\n\nconst CircularStepWrapper = forwardRef<ICircularStepRef, ICircularStepWrapperProps>(\n  (\n    {\n      children,\n      onGoBack,\n      onNext,\n      label,\n      showNext,\n      showPrevious,\n      animation,\n      introFrames,\n      outroFrames,\n      isNextLoading,\n      progressAngle,\n    },\n    ref: Ref<ICircularStepRef>,\n  ) => {\n    const animationRef = useRef<ILottieAnimationRef | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [containerHeight, setContainerHeight] = useState<number | undefined>();\n    const [showContent, setShowContent] = useState(false);\n    const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n    const onLottieRender = useCallback(() => {\n      if (animation && animationRef.current) {\n        animationRef.current.playSegments(introFrames, true);\n        setShowContent(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [animation]);\n\n    useEffect(() => {\n      return () => {\n        if (timeoutRef.current) {\n          clearTimeout(timeoutRef.current);\n        }\n      };\n    }, [animation]);\n\n    useImperativeHandle(ref, () => ({\n      playOutroAndFadeOut: async () => {\n        return new Promise<void>(resolve => {\n          const handleComplete = () => {\n            resolve();\n            animationRef.current?.removeEventListener('complete', handleComplete);\n          };\n\n          animationRef.current?.playSegments(outroFrames, true);\n          timeoutRef.current = setTimeout(() => setShowContent(false), 400);\n          animationRef.current?.addEventListener('complete', handleComplete);\n        });\n      },\n    }));\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setContainerHeight(containerRef.current.offsetHeight);\n      }\n    }, []);\n\n    return (\n      <Styled.Container\n        $flex={1}\n        $flexDirection=\"column\"\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $width=\"100%\"\n        $height=\"100%\"\n        ref={containerRef}\n      >\n        {containerHeight && (\n          <LottieAnimation\n            width={1280}\n            height={containerHeight}\n            src={animation}\n            ref={animationRef}\n            onRender={onLottieRender}\n            settings={animationSettings}\n          />\n        )}\n        <Styled.CircularStepContainer\n          $width={400}\n          $height={400}\n          $background=\"REAL_BLACK\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n        >\n          {progressAngle && (\n            <AnimatedArc\n              radius={200}\n              strokeWidth={2}\n              color=\"WHITE\"\n              targetAngle={progressAngle}\n              mode=\"fade\"\n              duration={1}\n            />\n          )}\n          <Styled.ContentWrapper $isVisible={showContent} $width=\"100%\">\n            {label && (\n              <FlexView $gutterX={3.5}>\n                <Text $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n                  {label}\n                </Text>\n                <Separator heightX={1} />\n              </FlexView>\n            )}\n            <Styled.InputContainer>{children}</Styled.InputContainer>\n          </Styled.ContentWrapper>\n        </Styled.CircularStepContainer>\n        {showPrevious && (\n          <Styled.PrevButtonWrapper>\n            <IconButton\n              Icon={Back2Icon}\n              renderAs=\"secondary-dark\"\n              analyticsLabel=\"Prev\"\n              onClick={onGoBack}\n              disabled={isNextLoading}\n              size=\"small\"\n            />\n          </Styled.PrevButtonWrapper>\n        )}\n        {showNext && (\n          <Styled.NextButtonWrapper>\n            <IconButton\n              size=\"small\"\n              Icon={Next2Icon}\n              renderAs=\"secondary-dark\"\n              analyticsLabel=\"Next\"\n              onClick={onNext}\n              busy={isNextLoading}\n            />\n          </Styled.NextButtonWrapper>\n        )}\n      </Styled.Container>\n    );\n  },\n);\n\nexport default memo(CircularStepWrapper);\n"],"names":["animationSettings","CircularStepWrapper","forwardRef","children","onGoBack","onNext","label","showNext","showPrevious","animation","introFrames","outroFrames","isNextLoading","progressAngle","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","timeoutRef","onLottieRender","useCallback","useEffect","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","AnimatedArc","Styled.ContentWrapper","FlexView","Text","Separator","Styled.InputContainer","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","circularStepWrapper","memo"],"mappings":"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"}
+{"version":3,"file":"circular-step-wrapper.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ICircularStepRef, ICircularStepWrapperProps } from './circular-step-wrapper-types';\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  memo,\n  type Ref,\n} from 'react';\n\nimport Back2Icon from '../../../../assets/line-icons/icons/back2';\nimport Next2Icon from '../../../../assets/line-icons/icons/next2';\nimport AnimatedArc from '../../../ui/animated-arc/animated-arc';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './circular-step-wrapper-styled';\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n  rendererSettings: {\n    preserveAspectRatio: 'xMidYMin slice',\n  },\n};\n\nconst CircularStepWrapper = forwardRef<ICircularStepRef, ICircularStepWrapperProps>(\n  (\n    {\n      children,\n      onGoBack,\n      onNext,\n      label,\n      showNext,\n      showPrevious,\n      animation,\n      introFrames,\n      outroFrames,\n      isNextLoading,\n      progressAngle,\n      footerElement,\n    },\n    ref: Ref<ICircularStepRef>,\n  ) => {\n    const animationRef = useRef<ILottieAnimationRef | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [containerHeight, setContainerHeight] = useState<number | undefined>();\n    const [showContent, setShowContent] = useState(false);\n    const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n    const onLottieRender = useCallback(() => {\n      if (animation && animationRef.current) {\n        animationRef.current.playSegments(introFrames, true);\n        setShowContent(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [animation]);\n\n    useEffect(() => {\n      return () => {\n        if (timeoutRef.current) {\n          clearTimeout(timeoutRef.current);\n        }\n      };\n    }, [animation]);\n\n    useImperativeHandle(ref, () => ({\n      playOutroAndFadeOut: async () => {\n        return new Promise<void>(resolve => {\n          const handleComplete = () => {\n            resolve();\n            animationRef.current?.removeEventListener('complete', handleComplete);\n          };\n\n          animationRef.current?.playSegments(outroFrames, true);\n          timeoutRef.current = setTimeout(() => setShowContent(false), 400);\n          animationRef.current?.addEventListener('complete', handleComplete);\n        });\n      },\n    }));\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setContainerHeight(containerRef.current.offsetHeight);\n      }\n    }, []);\n\n    return (\n      <Styled.Container\n        $flex={1}\n        $flexDirection=\"column\"\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $width=\"100%\"\n        $height=\"100%\"\n        ref={containerRef}\n      >\n        {containerHeight && (\n          <LottieAnimation\n            width={1280}\n            height={containerHeight}\n            src={animation}\n            ref={animationRef}\n            onRender={onLottieRender}\n            settings={animationSettings}\n          />\n        )}\n        <Styled.CircularStepContainer\n          $width={400}\n          $height={400}\n          $background=\"REAL_BLACK\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n        >\n          {progressAngle && (\n            <AnimatedArc\n              radius={200}\n              strokeWidth={2}\n              color=\"WHITE\"\n              targetAngle={progressAngle}\n              mode=\"fade\"\n              duration={1}\n            />\n          )}\n          <Styled.ContentWrapper $isVisible={showContent} $width=\"100%\">\n            {label && (\n              <FlexView $gutterX={3.5}>\n                <Text $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n                  {label}\n                </Text>\n                <Separator heightX={1} />\n              </FlexView>\n            )}\n            <Styled.InputContainer>{children}</Styled.InputContainer>\n          </Styled.ContentWrapper>\n        </Styled.CircularStepContainer>\n        {footerElement && (\n          <Styled.FooterWrapper $alignItems=\"center\" $justifyContent=\"center\">\n            {footerElement}\n          </Styled.FooterWrapper>\n        )}\n        {showPrevious && (\n          <Styled.PrevButtonWrapper>\n            <IconButton\n              Icon={Back2Icon}\n              renderAs=\"secondary-dark\"\n              analyticsLabel=\"Prev\"\n              onClick={onGoBack}\n              disabled={isNextLoading}\n              size=\"small\"\n            />\n          </Styled.PrevButtonWrapper>\n        )}\n        {showNext && (\n          <Styled.NextButtonWrapper>\n            <IconButton\n              size=\"small\"\n              Icon={Next2Icon}\n              renderAs=\"secondary-dark\"\n              analyticsLabel=\"Next\"\n              onClick={onNext}\n              busy={isNextLoading}\n            />\n          </Styled.NextButtonWrapper>\n        )}\n      </Styled.Container>\n    );\n  },\n);\n\nexport default memo(CircularStepWrapper);\n"],"names":["animationSettings","CircularStepWrapper","forwardRef","children","onGoBack","onNext","label","showNext","showPrevious","animation","introFrames","outroFrames","isNextLoading","progressAngle","footerElement","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","timeoutRef","onLottieRender","useCallback","useEffect","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","AnimatedArc","Styled.ContentWrapper","FlexView","Text","Separator","Styled.InputContainer","Styled.FooterWrapper","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","circularStepWrapper","memo"],"mappings":"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"}

package/dist/features/auth/user-list/user-item/user-item.js

@@ -1,48 +1,49 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { memo as f, useCallback as h } from "react";
-import g from "../../../ui/avatar/avatar.js";
-import u from "../../../ui/separator/separator.js";
-import C from "../../../ui/text/text.js";
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { memo as g, useCallback as u } from "react";
+import A from "../../../ui/avatar/avatar.js";
+import C from "../../../ui/separator/separator.js";
+import I from "../../../ui/text/text.js";
+import { AVATAR_CONFIGURATIONS as m } from "../user-list-constants.js";
 import { UserItemCard as d } from "./user-item-styled.js";
-const I = ({
+const k = ({
   id: r,
-  phone: m,
-  username: n,
-  avatar: s,
-  index: a,
-  isLastItem: i,
-  onSelect: e,
-  avatarSize: c,
+  phone: n,
+  username: s,
+  avatar: i,
+  index: e,
+  isLastItem: c,
+  onSelect: o,
+  avatarSize: l,
   maxColumns: $,
-  cardSize: o
+  cardSize: a
 }) => {
-  const l = h(() => {
-    e(r);
-  }, [r, e]);
-  return /* @__PURE__ */ p(
+  const p = u(() => {
+    o(r);
+  }, [r, o]), f = i ?? m[e % m.length];
+  return /* @__PURE__ */ h(
     d,
     {
-      onClick: l,
+      onClick: p,
       maxColumns: $,
       $gutterX: 2,
       $gapX: 2.81,
-      $width: o,
-      $height: o,
+      $width: a,
+      $height: a,
       $alignItems: "center",
       $justifyContent: "center",
-      index: a,
-      isLastItem: i,
+      index: e,
+      isLastItem: c,
       $background: "BLACK_1",
       children: [
-        /* @__PURE__ */ t(g, { size: c, avatar: s }),
-        /* @__PURE__ */ t(u, { heightX: 0.5 }),
-        /* @__PURE__ */ t(C, { $color: "WHITE", $renderAs: "ab2", $align: "center", children: n || m })
+        /* @__PURE__ */ t(A, { size: l, avatar: f }),
+        /* @__PURE__ */ t(C, { heightX: 0.5 }),
+        /* @__PURE__ */ t(I, { $color: "WHITE", $renderAs: "ab2", $align: "center", children: s || n })
       ]
     },
     r
   );
-}, X = f(I);
+}, N = g(k);
 export {
-  X as default
+  N as default
 };
 //# sourceMappingURL=user-item.js.map

package/dist/features/auth/user-list/user-item/user-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-item.js","sources":["../../../../../src/features/auth/user-list/user-item/user-item.tsx"],"sourcesContent":["import type { IUserItemProps } from './user-item-types';\n\nimport { useCallback, type FC, memo } from 'react';\n\nimport Avatar from '../../../ui/avatar/avatar';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './user-item-styled';\n\nconst UserItem: FC<IUserItemProps> = ({\n  id,\n  phone,\n  username,\n  avatar,\n  index,\n  isLastItem,\n  onSelect,\n  avatarSize,\n  maxColumns,\n  cardSize,\n}) => {\n  const handleClick = useCallback(() => {\n    onSelect(id);\n  }, [id, onSelect]);\n\n  return (\n    <Styled.UserItemCard\n      key={id}\n      onClick={handleClick}\n      maxColumns={maxColumns}\n      $gutterX={2}\n      $gapX={2.81}\n      $width={cardSize}\n      $height={cardSize}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      index={index}\n      isLastItem={isLastItem}\n      $background=\"BLACK_1\"\n    >\n      <Avatar size={avatarSize} avatar={avatar} />\n      <Separator heightX={0.5} />\n      <Text $color=\"WHITE\" $renderAs=\"ab2\" $align=\"center\">\n        {username || phone}\n      </Text>\n    </Styled.UserItemCard>\n  );\n};\n\nexport default memo(UserItem);\n"],"names":["UserItem","id","phone","username","avatar","index","isLastItem","onSelect","avatarSize","maxColumns","cardSize","handleClick","useCallback","jsxs","Styled.UserItemCard","jsx","Avatar","Separator","Text","UserItem$1","memo"],"mappings":";;;;;;AASA,MAAMA,IAA+B,CAAC;AAAA,EACpC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAAC,IAAcC,EAAY,MAAM;AACpC,IAAAL,EAASN,CAAE;AAAA,EAAA,GACV,CAACA,GAAIM,CAAQ,CAAC;AAGf,SAAA,gBAAAM;AAAA,IAACC;AAAAA,IAAA;AAAA,MAEC,SAASH;AAAA,MACT,YAAAF;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQC;AAAA,MACR,SAASA;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAC,gBAAAS,EAAAC,GAAA,EAAO,MAAMR,GAAY,QAAAJ,EAAgB,CAAA;AAAA,QAC1C,gBAAAW,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,QACzB,gBAAAF,EAACG,KAAK,QAAO,SAAQ,WAAU,OAAM,QAAO,UACzC,UAAAf,KAAYD,EACf,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAjBKD;AAAA,EAAA;AAoBX,GAEekB,IAAAC,EAAKpB,CAAQ;"}
+{"version":3,"file":"user-item.js","sources":["../../../../../src/features/auth/user-list/user-item/user-item.tsx"],"sourcesContent":["import type { IUserItemProps } from './user-item-types';\n\nimport { useCallback, type FC, memo } from 'react';\n\nimport Avatar from '../../../ui/avatar/avatar';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { AVATAR_CONFIGURATIONS } from '../user-list-constants';\nimport * as Styled from './user-item-styled';\n\nconst UserItem: FC<IUserItemProps> = ({\n  id,\n  phone,\n  username,\n  avatar,\n  index,\n  isLastItem,\n  onSelect,\n  avatarSize,\n  maxColumns,\n  cardSize,\n}) => {\n  const handleClick = useCallback(() => {\n    onSelect(id);\n  }, [id, onSelect]);\n\n  const avatarSource = avatar ?? AVATAR_CONFIGURATIONS[index % AVATAR_CONFIGURATIONS.length];\n\n  return (\n    <Styled.UserItemCard\n      key={id}\n      onClick={handleClick}\n      maxColumns={maxColumns}\n      $gutterX={2}\n      $gapX={2.81}\n      $width={cardSize}\n      $height={cardSize}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      index={index}\n      isLastItem={isLastItem}\n      $background=\"BLACK_1\"\n    >\n      <Avatar size={avatarSize} avatar={avatarSource} />\n      <Separator heightX={0.5} />\n      <Text $color=\"WHITE\" $renderAs=\"ab2\" $align=\"center\">\n        {username || phone}\n      </Text>\n    </Styled.UserItemCard>\n  );\n};\n\nexport default memo(UserItem);\n"],"names":["UserItem","id","phone","username","avatar","index","isLastItem","onSelect","avatarSize","maxColumns","cardSize","handleClick","useCallback","avatarSource","AVATAR_CONFIGURATIONS","jsxs","Styled.UserItemCard","jsx","Avatar","Separator","Text","UserItem$1","memo"],"mappings":";;;;;;;AAUA,MAAMA,IAA+B,CAAC;AAAA,EACpC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAAC,IAAcC,EAAY,MAAM;AACpC,IAAAL,EAASN,CAAE;AAAA,EAAA,GACV,CAACA,GAAIM,CAAQ,CAAC,GAEXM,IAAeT,KAAUU,EAAsBT,IAAQS,EAAsB,MAAM;AAGvF,SAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MAEC,SAASL;AAAA,MACT,YAAAF;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQC;AAAA,MACR,SAASA;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAW,EAACC,GAAO,EAAA,MAAMV,GAAY,QAAQK,GAAc;AAAA,QAChD,gBAAAI,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,QACzB,gBAAAF,EAACG,KAAK,QAAO,SAAQ,WAAU,OAAM,QAAO,UACzC,UAAAjB,KAAYD,EACf,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAjBKD;AAAA,EAAA;AAoBX,GAEeoB,IAAAC,EAAKtB,CAAQ;"}

package/dist/features/auth/user-list/user-list-constants.js

@@ -0,0 +1,106 @@
+const a = [
+  [
+    { key: "layer-1", variant: 1, color: "#FF9999" },
+    { key: "layer-3", variant: 5 },
+    { key: "layer-4", variant: 18 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#E58600" },
+    { key: "layer-3", variant: 6 },
+    { key: "layer-4", variant: 9 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#00FF80" },
+    { key: "layer-3", variant: 17 },
+    { key: "layer-4", variant: 16 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#4CC3FF" },
+    { key: "layer-3", variant: 2 },
+    { key: "layer-4", variant: 9 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#00B259" },
+    { key: "layer-3", variant: 9 },
+    { key: "layer-4", variant: 2 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#0086E5" },
+    { key: "layer-3", variant: 8 },
+    { key: "layer-4", variant: 3 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#99E5FF" },
+    { key: "layer-3", variant: 14 },
+    { key: "layer-4", variant: 11 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#FF33DD" },
+    { key: "layer-3", variant: 6 },
+    { key: "layer-4", variant: 11 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#B366FF" },
+    { key: "layer-3", variant: 6 },
+    { key: "layer-4", variant: 6 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#CCCCCC" },
+    { key: "layer-3", variant: 11 },
+    { key: "layer-4", variant: 7 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#CCCCCC" },
+    { key: "layer-3", variant: 6 },
+    { key: "layer-4", variant: 16 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#E58600" },
+    { key: "layer-3", variant: 18 },
+    { key: "layer-4", variant: 8 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#0086E5" },
+    { key: "layer-3", variant: 8 },
+    { key: "layer-4", variant: 5 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#89F5BF" },
+    { key: "layer-3", variant: 16 },
+    { key: "layer-4", variant: 1 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#FF6A00" },
+    { key: "layer-3", variant: 4 },
+    { key: "layer-4", variant: 3 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#89F5BF" },
+    { key: "layer-3", variant: 3 },
+    { key: "layer-4", variant: 17 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#CCCCCC" },
+    { key: "layer-3", variant: 10 },
+    { key: "layer-4", variant: 3 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#99E5FF" },
+    { key: "layer-3", variant: 14 },
+    { key: "layer-4", variant: 1 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#F37070" },
+    { key: "layer-3", variant: 2 },
+    { key: "layer-4", variant: 16 }
+  ],
+  [
+    { key: "layer-1", variant: 1, color: "#FF470A" },
+    { key: "layer-3", variant: 18 },
+    { key: "layer-4", variant: 3 }
+  ]
+];
+export {
+  a as AVATAR_CONFIGURATIONS
+};
+//# sourceMappingURL=user-list-constants.js.map

package/dist/features/auth/user-list/user-list-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-list-constants.js","sources":["../../../../src/features/auth/user-list/user-list-constants.ts"],"sourcesContent":["import type { IAvatarLayer } from '../../ui/avatar/avatar-types';\n\nexport const AVATAR_CONFIGURATIONS: IAvatarLayer[][] = [\n  [\n    { key: 'layer-1', variant: 1, color: '#FF9999' },\n    { key: 'layer-3', variant: 5 },\n    { key: 'layer-4', variant: 18 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#E58600' },\n    { key: 'layer-3', variant: 6 },\n    { key: 'layer-4', variant: 9 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#00FF80' },\n    { key: 'layer-3', variant: 17 },\n    { key: 'layer-4', variant: 16 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#4CC3FF' },\n    { key: 'layer-3', variant: 2 },\n    { key: 'layer-4', variant: 9 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#00B259' },\n    { key: 'layer-3', variant: 9 },\n    { key: 'layer-4', variant: 2 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#0086E5' },\n    { key: 'layer-3', variant: 8 },\n    { key: 'layer-4', variant: 3 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#99E5FF' },\n    { key: 'layer-3', variant: 14 },\n    { key: 'layer-4', variant: 11 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#FF33DD' },\n    { key: 'layer-3', variant: 6 },\n    { key: 'layer-4', variant: 11 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#B366FF' },\n    { key: 'layer-3', variant: 6 },\n    { key: 'layer-4', variant: 6 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#CCCCCC' },\n    { key: 'layer-3', variant: 11 },\n    { key: 'layer-4', variant: 7 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#CCCCCC' },\n    { key: 'layer-3', variant: 6 },\n    { key: 'layer-4', variant: 16 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#E58600' },\n    { key: 'layer-3', variant: 18 },\n    { key: 'layer-4', variant: 8 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#0086E5' },\n    { key: 'layer-3', variant: 8 },\n    { key: 'layer-4', variant: 5 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#89F5BF' },\n    { key: 'layer-3', variant: 16 },\n    { key: 'layer-4', variant: 1 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#FF6A00' },\n    { key: 'layer-3', variant: 4 },\n    { key: 'layer-4', variant: 3 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#89F5BF' },\n    { key: 'layer-3', variant: 3 },\n    { key: 'layer-4', variant: 17 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#CCCCCC' },\n    { key: 'layer-3', variant: 10 },\n    { key: 'layer-4', variant: 3 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#99E5FF' },\n    { key: 'layer-3', variant: 14 },\n    { key: 'layer-4', variant: 1 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#F37070' },\n    { key: 'layer-3', variant: 2 },\n    { key: 'layer-4', variant: 16 },\n  ],\n  [\n    { key: 'layer-1', variant: 1, color: '#FF470A' },\n    { key: 'layer-3', variant: 18 },\n    { key: 'layer-4', variant: 3 },\n  ],\n];\n"],"names":["AVATAR_CONFIGURATIONS"],"mappings":"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"}

package/dist/features/chapters-v2/chapter-details/block-sections/block-section-view.js

@@ -1,106 +1,106 @@
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import L from "../../../../assets/line-icons/icons/more-vertical.js";
-import S from "../../../../assets/line-icons/icons/skip.js";
-import T from "../../../ui/context-menu/context-menu.js";
+import S from "../../../../assets/line-icons/icons/more-vertical.js";
+import I from "../../../../assets/line-icons/icons/skip.js";
+import O from "../../../ui/context-menu/context-menu.js";
 import c from "../../../ui/layout/flex-view.js";
-import $ from "../../../ui/text/text.js";
-import O from "../../comps/node-card/node-card.js";
+import u from "../../../ui/text/text.js";
+import T from "../../comps/node-card/node-card.js";
 import j from "../../comps/node-card/node-menu-options/node-menu-options.js";
 import { BLOCK_NAME as k } from "../../constants/block-constants.js";
 import { getSheetNLessonCount as y } from "../../utils/index.js";
-import { BlockSectionWrapper as H, BlockOptionsWrapper as M, BlockSheetContainer as W } from "./block-sections-styled.js";
+import { BlockSectionWrapper as M, BlockOptionsWrapper as B, BlockSheetContainer as K } from "./block-sections-styled.js";
 const q = ({
   userType: o,
-  imageHue: u,
-  blockData: m,
-  lessonIdx: l,
-  isLastBlock: g,
+  imageHue: m,
+  blockData: l,
+  lessonIdx: s,
+  isLastBlock: C,
   isGoalBlock: r,
-  onNodeAttempt: C,
+  onNodeAttempt: g,
   onNodeAssignAsHomework: x,
   onNodeMarkAsDone: _,
-  onNodeReattempt: E,
-  onNodeReview: b,
+  onNodeReattempt: b,
+  onNodeReview: E,
   onNodeView: N,
   onBlockSkipUnskip: i
 }) => {
-  const { block_type: s, name: p, sheets: a, permissions: w } = m, { can_skip: d, can_un_skip: e } = w, h = k[s], A = y(e, a.length, r, l), I = [
+  const { block_type: p, name: a, sheets: d, permissions: w } = l, { can_skip: h, can_un_skip: e } = w, f = k[p], A = y(e, d.length, r, s), L = [
     {
       id: "node-card-skip",
       label: e ? "Revert 'Skip'" : "Skip",
-      icon: S,
+      icon: I,
       disabled: !1,
-      onClick: () => i == null ? void 0 : i(m, d)
+      onClick: () => i == null ? void 0 : i(l, h)
     }
   ];
   return o === "STUDENT" && e ? null : /* @__PURE__ */ t(
-    H,
+    M,
     {
-      $background: r ? "WHITE_1" : "WHITE_3",
+      $background: r ? `${m}_1` : "WHITE_1",
       $gutterX: 1,
-      $lastBlock: g,
+      $lastBlock: C,
       $flexGap: 12,
       children: /* @__PURE__ */ n(c, { $flexGap: 12, children: [
         /* @__PURE__ */ n(c, { $flexDirection: "row", $alignItems: "center", $justifyContent: "space-between", children: [
           /* @__PURE__ */ n(c, { $opacity: e ? 0.5 : 1, children: [
             /* @__PURE__ */ n(
-              $,
+              u,
               {
                 $renderAs: "ac4",
                 $color: "BLACK_T_60",
                 $textDecoration: e ? "line-through" : "none",
                 children: [
-                  h === "Puzzles" ? p : h,
+                  f === "Puzzles" ? a : f,
                   " ",
                   A
                 ]
               }
             ),
-            !!r && !!l && /* @__PURE__ */ t(
-              $,
+            !!r && !!s && /* @__PURE__ */ t(
+              u,
               {
                 $renderAs: "ab2-bold",
                 $color: "BLACK_1",
                 $textDecoration: e ? "line-through" : "none",
-                children: p
+                children: a
               }
             )
           ] }),
-          o === "TEACHER" && (d || e) && /* @__PURE__ */ t(
-            T,
+          o === "TEACHER" && (h || e) && /* @__PURE__ */ t(
+            O,
             {
               targetElement: /* @__PURE__ */ t(
-                M,
+                B,
                 {
                   $width: 20,
                   $height: 20,
                   $justifyContent: "center",
                   $alignItems: "center",
-                  children: /* @__PURE__ */ t(L, { width: 16, height: 16 })
+                  children: /* @__PURE__ */ t(S, { width: 16, height: 16 })
                 }
               ),
-              menuElement: /* @__PURE__ */ t(j, { options: I }),
+              menuElement: /* @__PURE__ */ t(j, { options: L }),
               menuOffset: 5,
               menuZIndex: 4
             }
           )
         ] }),
-        /* @__PURE__ */ t(W, { $opacity: e ? 0.5 : 1, children: a.map((f) => /* @__PURE__ */ t(
-          O,
+        /* @__PURE__ */ t(K, { $opacity: e ? 0.5 : 1, children: d.map(($) => /* @__PURE__ */ t(
+          T,
           {
-            imageHue: u || "BLUE",
+            imageHue: m || "BLUE",
             userType: o,
-            nodeData: f,
-            blockType: s,
+            nodeData: $,
+            blockType: p,
             isSkipped: e,
-            onNodeAttempt: C,
+            onNodeAttempt: g,
             onNodeAssignAsHomework: x,
             onNodeMarkAsDone: _,
-            onNodeReattempt: E,
-            onNodeReview: b,
+            onNodeReattempt: b,
+            onNodeReview: E,
             onNodeView: N
           },
-          f.node_id
+          $.node_id
         )) })
       ] })
     }

package/dist/features/chapters-v2/chapter-details/block-sections/block-section-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"block-section-view.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-section-view.tsx"],"sourcesContent":["import type { INodeMenuOption } from '../../comps/node-card/node-menu-options/node-menu-options-types';\nimport type { IBlockSectionProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport MoreVerticalIcon from '../../../../assets/line-icons/icons/more-vertical';\nimport SkipIcon from '../../../../assets/line-icons/icons/skip';\nimport ContextMenu from '../../../ui/context-menu/context-menu';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport NodeCard from '../../comps/node-card/node-card';\nimport NodeMenuOptions from '../../comps/node-card/node-menu-options/node-menu-options';\nimport { BLOCK_NAME } from '../../constants/block-constants';\nimport { getSheetNLessonCount } from '../../utils';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSectionView: FC<IBlockSectionProps> = ({\n  userType,\n  imageHue,\n  blockData,\n  lessonIdx,\n  isLastBlock,\n  isGoalBlock,\n  onNodeAttempt,\n  onNodeAssignAsHomework,\n  onNodeMarkAsDone,\n  onNodeReattempt,\n  onNodeReview,\n  onNodeView,\n  onBlockSkipUnskip,\n}) => {\n  const { block_type: blockType, name, sheets, permissions } = blockData;\n\n  const { can_skip: canSkip, can_un_skip: canUnskip } = permissions;\n  const blockName = BLOCK_NAME[blockType];\n\n  const sheetNLessonCount = getSheetNLessonCount(canUnskip, sheets.length, isGoalBlock, lessonIdx);\n\n  const menuOptions: INodeMenuOption[] = [\n    {\n      id: 'node-card-skip',\n      label: canUnskip ? `Revert 'Skip'` : 'Skip',\n      icon: SkipIcon,\n      disabled: false,\n      onClick: () => onBlockSkipUnskip?.(blockData, canSkip),\n    },\n  ];\n\n  if (userType === 'STUDENT' && canUnskip) return null;\n\n  return (\n    <Styled.BlockSectionWrapper\n      $background={isGoalBlock ? `WHITE_1` : 'WHITE_3'}\n      $gutterX={1}\n      $lastBlock={isLastBlock}\n      $flexGap={12}\n    >\n      <FlexView $flexGap={12}>\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n          <FlexView $opacity={canUnskip ? 0.5 : 1}>\n            <Text\n              $renderAs=\"ac4\"\n              $color=\"BLACK_T_60\"\n              $textDecoration={canUnskip ? 'line-through' : 'none'}\n            >\n              {blockName === 'Puzzles' ? name : blockName} {sheetNLessonCount}\n            </Text>\n\n            {!!isGoalBlock && !!lessonIdx && (\n              <Text\n                $renderAs=\"ab2-bold\"\n                $color=\"BLACK_1\"\n                $textDecoration={canUnskip ? 'line-through' : 'none'}\n              >\n                {name}\n              </Text>\n            )}\n          </FlexView>\n\n          {userType === 'TEACHER' && (canSkip || canUnskip) && (\n            <ContextMenu\n              targetElement={\n                <Styled.BlockOptionsWrapper\n                  $width={20}\n                  $height={20}\n                  $justifyContent=\"center\"\n                  $alignItems=\"center\"\n                >\n                  <MoreVerticalIcon width={16} height={16} />\n                </Styled.BlockOptionsWrapper>\n              }\n              menuElement={<NodeMenuOptions options={menuOptions} />}\n              menuOffset={5}\n              menuZIndex={4}\n            />\n          )}\n        </FlexView>\n\n        <Styled.BlockSheetContainer $opacity={canUnskip ? 0.5 : 1}>\n          {sheets.map(nodeData => (\n            <NodeCard\n              key={nodeData.node_id}\n              imageHue={imageHue || 'BLUE'}\n              userType={userType}\n              nodeData={nodeData}\n              blockType={blockType}\n              isSkipped={canUnskip}\n              onNodeAttempt={onNodeAttempt}\n              onNodeAssignAsHomework={onNodeAssignAsHomework}\n              onNodeMarkAsDone={onNodeMarkAsDone}\n              onNodeReattempt={onNodeReattempt}\n              onNodeReview={onNodeReview}\n              onNodeView={onNodeView}\n            />\n          ))}\n        </Styled.BlockSheetContainer>\n      </FlexView>\n    </Styled.BlockSectionWrapper>\n  );\n};\n\nexport default BlockSectionView;\n"],"names":["BlockSectionView","userType","imageHue","blockData","lessonIdx","isLastBlock","isGoalBlock","onNodeAttempt","onNodeAssignAsHomework","onNodeMarkAsDone","onNodeReattempt","onNodeReview","onNodeView","onBlockSkipUnskip","blockType","name","sheets","permissions","canSkip","canUnskip","blockName","BLOCK_NAME","sheetNLessonCount","getSheetNLessonCount","menuOptions","SkipIcon","jsx","Styled.BlockSectionWrapper","jsxs","FlexView","Text","ContextMenu","Styled.BlockOptionsWrapper","MoreVerticalIcon","NodeMenuOptions","Styled.BlockSheetContainer","nodeData","NodeCard"],"mappings":"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"}
+{"version":3,"file":"block-section-view.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-section-view.tsx"],"sourcesContent":["import type { INodeMenuOption } from '../../comps/node-card/node-menu-options/node-menu-options-types';\nimport type { IBlockSectionProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport MoreVerticalIcon from '../../../../assets/line-icons/icons/more-vertical';\nimport SkipIcon from '../../../../assets/line-icons/icons/skip';\nimport ContextMenu from '../../../ui/context-menu/context-menu';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport NodeCard from '../../comps/node-card/node-card';\nimport NodeMenuOptions from '../../comps/node-card/node-menu-options/node-menu-options';\nimport { BLOCK_NAME } from '../../constants/block-constants';\nimport { getSheetNLessonCount } from '../../utils';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSectionView: FC<IBlockSectionProps> = ({\n  userType,\n  imageHue,\n  blockData,\n  lessonIdx,\n  isLastBlock,\n  isGoalBlock,\n  onNodeAttempt,\n  onNodeAssignAsHomework,\n  onNodeMarkAsDone,\n  onNodeReattempt,\n  onNodeReview,\n  onNodeView,\n  onBlockSkipUnskip,\n}) => {\n  const { block_type: blockType, name, sheets, permissions } = blockData;\n\n  const { can_skip: canSkip, can_un_skip: canUnskip } = permissions;\n  const blockName = BLOCK_NAME[blockType];\n\n  const sheetNLessonCount = getSheetNLessonCount(canUnskip, sheets.length, isGoalBlock, lessonIdx);\n\n  const menuOptions: INodeMenuOption[] = [\n    {\n      id: 'node-card-skip',\n      label: canUnskip ? `Revert 'Skip'` : 'Skip',\n      icon: SkipIcon,\n      disabled: false,\n      onClick: () => onBlockSkipUnskip?.(blockData, canSkip),\n    },\n  ];\n\n  if (userType === 'STUDENT' && canUnskip) return null;\n\n  return (\n    <Styled.BlockSectionWrapper\n      $background={isGoalBlock ? `${imageHue}_1` : 'WHITE_1'}\n      $gutterX={1}\n      $lastBlock={isLastBlock}\n      $flexGap={12}\n    >\n      <FlexView $flexGap={12}>\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n          <FlexView $opacity={canUnskip ? 0.5 : 1}>\n            <Text\n              $renderAs=\"ac4\"\n              $color=\"BLACK_T_60\"\n              $textDecoration={canUnskip ? 'line-through' : 'none'}\n            >\n              {blockName === 'Puzzles' ? name : blockName} {sheetNLessonCount}\n            </Text>\n\n            {!!isGoalBlock && !!lessonIdx && (\n              <Text\n                $renderAs=\"ab2-bold\"\n                $color=\"BLACK_1\"\n                $textDecoration={canUnskip ? 'line-through' : 'none'}\n              >\n                {name}\n              </Text>\n            )}\n          </FlexView>\n\n          {userType === 'TEACHER' && (canSkip || canUnskip) && (\n            <ContextMenu\n              targetElement={\n                <Styled.BlockOptionsWrapper\n                  $width={20}\n                  $height={20}\n                  $justifyContent=\"center\"\n                  $alignItems=\"center\"\n                >\n                  <MoreVerticalIcon width={16} height={16} />\n                </Styled.BlockOptionsWrapper>\n              }\n              menuElement={<NodeMenuOptions options={menuOptions} />}\n              menuOffset={5}\n              menuZIndex={4}\n            />\n          )}\n        </FlexView>\n\n        <Styled.BlockSheetContainer $opacity={canUnskip ? 0.5 : 1}>\n          {sheets.map(nodeData => (\n            <NodeCard\n              key={nodeData.node_id}\n              imageHue={imageHue || 'BLUE'}\n              userType={userType}\n              nodeData={nodeData}\n              blockType={blockType}\n              isSkipped={canUnskip}\n              onNodeAttempt={onNodeAttempt}\n              onNodeAssignAsHomework={onNodeAssignAsHomework}\n              onNodeMarkAsDone={onNodeMarkAsDone}\n              onNodeReattempt={onNodeReattempt}\n              onNodeReview={onNodeReview}\n              onNodeView={onNodeView}\n            />\n          ))}\n        </Styled.BlockSheetContainer>\n      </FlexView>\n    </Styled.BlockSectionWrapper>\n  );\n};\n\nexport default BlockSectionView;\n"],"names":["BlockSectionView","userType","imageHue","blockData","lessonIdx","isLastBlock","isGoalBlock","onNodeAttempt","onNodeAssignAsHomework","onNodeMarkAsDone","onNodeReattempt","onNodeReview","onNodeView","onBlockSkipUnskip","blockType","name","sheets","permissions","canSkip","canUnskip","blockName","BLOCK_NAME","sheetNLessonCount","getSheetNLessonCount","menuOptions","SkipIcon","jsx","Styled.BlockSectionWrapper","jsxs","FlexView","Text","ContextMenu","Styled.BlockOptionsWrapper","MoreVerticalIcon","NodeMenuOptions","Styled.BlockSheetContainer","nodeData","NodeCard"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
-import { jsxs as S, jsx as s } from "react/jsx-runtime";
-import { memo as w, useMemo as x } from "react";
+import { jsxs as w, jsx as n } from "react/jsx-runtime";
+import { memo as I, useMemo as x } from "react";
 import _ from "./block-section-view.js";
-import { ChapterDetailsWrapper as E } from "./block-sections-styled.js";
-const y = w((g) => {
+import { ChapterDetailsWrapper as R } from "./block-sections-styled.js";
+const L = I((g) => {
   const {
-    blocks: n,
-    imageHue: t,
+    blocks: t,
+    imageHue: s,
     userType: l,
     coreBlocksRef: h,
     onNodeAttempt: r,
@@ -18,30 +18,30 @@ const y = w((g) => {
   } = g;
   let u = 0;
   const { goalBlocks: a, nonGoalBlocks: B } = x(
-    () => n.reduce(
+    () => t.reduce(
       (o, e) => (e.section_code === "GOALS" || e.section_code === "READINESS" ? o.goalBlocks.push(e) : o.nonGoalBlocks.push(e), o),
       { goalBlocks: [], nonGoalBlocks: [] }
     ),
-    [n]
+    [t]
   );
-  return /* @__PURE__ */ S(
-    E,
+  return /* @__PURE__ */ w(
+    R,
     {
       $width: "100%",
-      $background: B.length ? "WHITE_3" : "WHITE_1",
+      $background: B.length ? "WHITE_1" : `${s}_1`,
       children: [
-        /* @__PURE__ */ s("div", { ref: h, children: a.map((o, e) => {
+        /* @__PURE__ */ n("div", { ref: h, children: a.map((o, e) => {
           const { block_type: A, block_id: N, permissions: G } = o;
           let f = 0;
-          const I = e === a.length - 1;
-          return A === "GOAL" && (G.can_un_skip || (u += 1), f = u), /* @__PURE__ */ s(
+          const S = e === a.length - 1;
+          return A === "GOAL" && (G.can_un_skip || (u += 1), f = u), /* @__PURE__ */ n(
             _,
             {
               blockData: o,
               userType: l,
-              isLastBlock: I,
+              isLastBlock: S,
               lessonIdx: f,
-              imageHue: t,
+              imageHue: s,
               isGoalBlock: !0,
               onNodeAttempt: r,
               onNodeAssignAsHomework: i,
@@ -56,12 +56,12 @@ const y = w((g) => {
         }) }),
         B.map((o) => {
           const { block_id: e } = o;
-          return /* @__PURE__ */ s(
+          return /* @__PURE__ */ n(
             _,
             {
               blockData: o,
               userType: l,
-              imageHue: t,
+              imageHue: s,
               onNodeAttempt: r,
               onNodeAssignAsHomework: i,
               onNodeMarkAsDone: c,
@@ -78,6 +78,6 @@ const y = w((g) => {
   );
 });
 export {
-  y as default
+  L as default
 };
 //# sourceMappingURL=block-sections.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"block-sections.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-sections.tsx"],"sourcesContent":["import type { IBlockSectionsProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo } from 'react';\n\nimport BlockSectionView from './block-section-view';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSections: FC<IBlockSectionsProps> = memo(props => {\n  const {\n    blocks,\n    imageHue,\n    userType,\n    coreBlocksRef,\n    onNodeAttempt,\n    onNodeAssignAsHomework,\n    onNodeMarkAsDone,\n    onNodeReattempt,\n    onNodeReview,\n    onNodeView,\n    onBlockSkipUnskip,\n  } = props;\n\n  let lessonCount = 0;\n\n  const { goalBlocks, nonGoalBlocks } = useMemo(\n    () =>\n      blocks.reduce(\n        (acc, block) => {\n          if (block.section_code === 'GOALS' || block.section_code === 'READINESS') {\n            acc.goalBlocks.push(block);\n          } else {\n            acc.nonGoalBlocks.push(block);\n          }\n\n          return acc;\n        },\n        { goalBlocks: [] as typeof blocks, nonGoalBlocks: [] as typeof blocks },\n      ),\n    [blocks],\n  );\n\n  return (\n    <Styled.ChapterDetailsWrapper\n      $width=\"100%\"\n      $background={!nonGoalBlocks.length ? `WHITE_1` : 'WHITE_3'}\n    >\n      <div ref={coreBlocksRef}>\n        {goalBlocks.map((blockData, idx) => {\n          const { block_type: blockType, block_id: blockId, permissions } = blockData;\n          let lessonIdx = 0;\n\n          const isLastBlock = idx === goalBlocks.length - 1;\n\n          if (blockType === 'GOAL') {\n            if (!permissions.can_un_skip) {\n              lessonCount += 1;\n            }\n\n            lessonIdx = lessonCount;\n          }\n\n          return (\n            <BlockSectionView\n              blockData={blockData}\n              userType={userType}\n              isLastBlock={isLastBlock}\n              key={blockId}\n              lessonIdx={lessonIdx}\n              imageHue={imageHue}\n              isGoalBlock\n              onNodeAttempt={onNodeAttempt}\n              onNodeAssignAsHomework={onNodeAssignAsHomework}\n              onNodeMarkAsDone={onNodeMarkAsDone}\n              onNodeReattempt={onNodeReattempt}\n              onNodeReview={onNodeReview}\n              onNodeView={onNodeView}\n              onBlockSkipUnskip={onBlockSkipUnskip}\n            />\n          );\n        })}\n      </div>\n\n      {nonGoalBlocks.map(blockData => {\n        const { block_id: blockId } = blockData;\n\n        return (\n          <BlockSectionView\n            key={blockId}\n            blockData={blockData}\n            userType={userType}\n            imageHue={imageHue}\n            onNodeAttempt={onNodeAttempt}\n            onNodeAssignAsHomework={onNodeAssignAsHomework}\n            onNodeMarkAsDone={onNodeMarkAsDone}\n            onNodeReattempt={onNodeReattempt}\n            onNodeReview={onNodeReview}\n            onNodeView={onNodeView}\n            onBlockSkipUnskip={onBlockSkipUnskip}\n          />\n        );\n      })}\n    </Styled.ChapterDetailsWrapper>\n  );\n});\n\nexport default BlockSections;\n"],"names":["BlockSections","memo","props","blocks","imageHue","userType","coreBlocksRef","onNodeAttempt","onNodeAssignAsHomework","onNodeMarkAsDone","onNodeReattempt","onNodeReview","onNodeView","onBlockSkipUnskip","lessonCount","goalBlocks","nonGoalBlocks","useMemo","acc","block","jsxs","Styled.ChapterDetailsWrapper","jsx","blockData","idx","blockType","blockId","permissions","lessonIdx","isLastBlock","BlockSectionView"],"mappings":";;;;AAQM,MAAAA,IAAyCC,EAAK,CAASC,MAAA;AACrD,QAAA;AAAA,IACJ,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,EACE,IAAAX;AAEJ,MAAIY,IAAc;AAEZ,QAAA,EAAE,YAAAC,GAAY,eAAAC,EAAA,IAAkBC;AAAA,IACpC,MACEd,EAAO;AAAA,MACL,CAACe,GAAKC,OACAA,EAAM,iBAAiB,WAAWA,EAAM,iBAAiB,cACvDD,EAAA,WAAW,KAAKC,CAAK,IAErBD,EAAA,cAAc,KAAKC,CAAK,GAGvBD;AAAA,MAET,EAAE,YAAY,CAAA,GAAqB,eAAe,GAAoB;AAAA,IACxE;AAAA,IACF,CAACf,CAAM;AAAA,EAAA;AAIP,SAAA,gBAAAiB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,aAAcL,EAAc,SAAqB,YAAZ;AAAA,MAErC,UAAA;AAAA,QAAA,gBAAAM,EAAC,SAAI,KAAKhB,GACP,YAAW,IAAI,CAACiB,GAAWC,MAAQ;AAClC,gBAAM,EAAE,YAAYC,GAAW,UAAUC,GAAS,aAAAC,EAAgB,IAAAJ;AAClE,cAAIK,IAAY;AAEV,gBAAAC,IAAcL,MAAQT,EAAW,SAAS;AAEhD,iBAAIU,MAAc,WACXE,EAAY,gBACAb,KAAA,IAGLc,IAAAd,IAIZ,gBAAAQ;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,WAAAP;AAAA,cACA,UAAAlB;AAAA,cACA,aAAAwB;AAAA,cAEA,WAAAD;AAAA,cACA,UAAAxB;AAAA,cACA,aAAW;AAAA,cACX,eAAAG;AAAA,cACA,wBAAAC;AAAA,cACA,kBAAAC;AAAA,cACA,iBAAAC;AAAA,cACA,cAAAC;AAAA,cACA,YAAAC;AAAA,cACA,mBAAAC;AAAA,YAAA;AAAA,YAVKa;AAAA,UAAA;AAAA,QAaV,CAAA,GACH;AAAA,QAECV,EAAc,IAAI,CAAaO,MAAA;AACxB,gBAAA,EAAE,UAAUG,EAAY,IAAAH;AAG5B,iBAAA,gBAAAD;AAAA,YAACQ;AAAA,YAAA;AAAA,cAEC,WAAAP;AAAA,cACA,UAAAlB;AAAA,cACA,UAAAD;AAAA,cACA,eAAAG;AAAA,cACA,wBAAAC;AAAA,cACA,kBAAAC;AAAA,cACA,iBAAAC;AAAA,cACA,cAAAC;AAAA,cACA,YAAAC;AAAA,cACA,mBAAAC;AAAA,YAAA;AAAA,YAVKa;AAAA,UAAA;AAAA,QAWP,CAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"block-sections.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-sections.tsx"],"sourcesContent":["import type { IBlockSectionsProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo } from 'react';\n\nimport BlockSectionView from './block-section-view';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSections: FC<IBlockSectionsProps> = memo(props => {\n  const {\n    blocks,\n    imageHue,\n    userType,\n    coreBlocksRef,\n    onNodeAttempt,\n    onNodeAssignAsHomework,\n    onNodeMarkAsDone,\n    onNodeReattempt,\n    onNodeReview,\n    onNodeView,\n    onBlockSkipUnskip,\n  } = props;\n\n  let lessonCount = 0;\n\n  const { goalBlocks, nonGoalBlocks } = useMemo(\n    () =>\n      blocks.reduce(\n        (acc, block) => {\n          if (block.section_code === 'GOALS' || block.section_code === 'READINESS') {\n            acc.goalBlocks.push(block);\n          } else {\n            acc.nonGoalBlocks.push(block);\n          }\n\n          return acc;\n        },\n        { goalBlocks: [] as typeof blocks, nonGoalBlocks: [] as typeof blocks },\n      ),\n    [blocks],\n  );\n\n  return (\n    <Styled.ChapterDetailsWrapper\n      $width=\"100%\"\n      $background={!nonGoalBlocks.length ? `${imageHue}_1` : 'WHITE_1'}\n    >\n      <div ref={coreBlocksRef}>\n        {goalBlocks.map((blockData, idx) => {\n          const { block_type: blockType, block_id: blockId, permissions } = blockData;\n          let lessonIdx = 0;\n\n          const isLastBlock = idx === goalBlocks.length - 1;\n\n          if (blockType === 'GOAL') {\n            if (!permissions.can_un_skip) {\n              lessonCount += 1;\n            }\n\n            lessonIdx = lessonCount;\n          }\n\n          return (\n            <BlockSectionView\n              blockData={blockData}\n              userType={userType}\n              isLastBlock={isLastBlock}\n              key={blockId}\n              lessonIdx={lessonIdx}\n              imageHue={imageHue}\n              isGoalBlock\n              onNodeAttempt={onNodeAttempt}\n              onNodeAssignAsHomework={onNodeAssignAsHomework}\n              onNodeMarkAsDone={onNodeMarkAsDone}\n              onNodeReattempt={onNodeReattempt}\n              onNodeReview={onNodeReview}\n              onNodeView={onNodeView}\n              onBlockSkipUnskip={onBlockSkipUnskip}\n            />\n          );\n        })}\n      </div>\n\n      {nonGoalBlocks.map(blockData => {\n        const { block_id: blockId } = blockData;\n\n        return (\n          <BlockSectionView\n            key={blockId}\n            blockData={blockData}\n            userType={userType}\n            imageHue={imageHue}\n            onNodeAttempt={onNodeAttempt}\n            onNodeAssignAsHomework={onNodeAssignAsHomework}\n            onNodeMarkAsDone={onNodeMarkAsDone}\n            onNodeReattempt={onNodeReattempt}\n            onNodeReview={onNodeReview}\n            onNodeView={onNodeView}\n            onBlockSkipUnskip={onBlockSkipUnskip}\n          />\n        );\n      })}\n    </Styled.ChapterDetailsWrapper>\n  );\n});\n\nexport default BlockSections;\n"],"names":["BlockSections","memo","props","blocks","imageHue","userType","coreBlocksRef","onNodeAttempt","onNodeAssignAsHomework","onNodeMarkAsDone","onNodeReattempt","onNodeReview","onNodeView","onBlockSkipUnskip","lessonCount","goalBlocks","nonGoalBlocks","useMemo","acc","block","jsxs","Styled.ChapterDetailsWrapper","jsx","blockData","idx","blockType","blockId","permissions","lessonIdx","isLastBlock","BlockSectionView"],"mappings":";;;;AAQM,MAAAA,IAAyCC,EAAK,CAASC,MAAA;AACrD,QAAA;AAAA,IACJ,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,EACE,IAAAX;AAEJ,MAAIY,IAAc;AAEZ,QAAA,EAAE,YAAAC,GAAY,eAAAC,EAAA,IAAkBC;AAAA,IACpC,MACEd,EAAO;AAAA,MACL,CAACe,GAAKC,OACAA,EAAM,iBAAiB,WAAWA,EAAM,iBAAiB,cACvDD,EAAA,WAAW,KAAKC,CAAK,IAErBD,EAAA,cAAc,KAAKC,CAAK,GAGvBD;AAAA,MAET,EAAE,YAAY,CAAA,GAAqB,eAAe,GAAoB;AAAA,IACxE;AAAA,IACF,CAACf,CAAM;AAAA,EAAA;AAIP,SAAA,gBAAAiB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,aAAcL,EAAc,SAA2B,YAAlB,GAAGZ,CAAQ;AAAA,MAEhD,UAAA;AAAA,QAAA,gBAAAkB,EAAC,SAAI,KAAKhB,GACP,YAAW,IAAI,CAACiB,GAAWC,MAAQ;AAClC,gBAAM,EAAE,YAAYC,GAAW,UAAUC,GAAS,aAAAC,EAAgB,IAAAJ;AAClE,cAAIK,IAAY;AAEV,gBAAAC,IAAcL,MAAQT,EAAW,SAAS;AAEhD,iBAAIU,MAAc,WACXE,EAAY,gBACAb,KAAA,IAGLc,IAAAd,IAIZ,gBAAAQ;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,WAAAP;AAAA,cACA,UAAAlB;AAAA,cACA,aAAAwB;AAAA,cAEA,WAAAD;AAAA,cACA,UAAAxB;AAAA,cACA,aAAW;AAAA,cACX,eAAAG;AAAA,cACA,wBAAAC;AAAA,cACA,kBAAAC;AAAA,cACA,iBAAAC;AAAA,cACA,cAAAC;AAAA,cACA,YAAAC;AAAA,cACA,mBAAAC;AAAA,YAAA;AAAA,YAVKa;AAAA,UAAA;AAAA,QAaV,CAAA,GACH;AAAA,QAECV,EAAc,IAAI,CAAaO,MAAA;AACxB,gBAAA,EAAE,UAAUG,EAAY,IAAAH;AAG5B,iBAAA,gBAAAD;AAAA,YAACQ;AAAA,YAAA;AAAA,cAEC,WAAAP;AAAA,cACA,UAAAlB;AAAA,cACA,UAAAD;AAAA,cACA,eAAAG;AAAA,cACA,wBAAAC;AAAA,cACA,kBAAAC;AAAA,cACA,iBAAAC;AAAA,cACA,cAAAC;AAAA,cACA,YAAAC;AAAA,cACA,mBAAAC;AAAA,YAAA;AAAA,YAVKa;AAAA,UAAA;AAAA,QAWP,CAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -4,12 +4,11 @@ import s from "../../../../assets/line-icons/icons/lock2.js";
 import e from "../../../ui/layout/flex-view.js";
 import d from "../../../ui/text/text.js";
 const b = t(e)(({ theme: o, $disabled: r }) => {
-  const { BLACK: i, BLACK_T_15: n, WHITE_5: p } = o.colors;
+  const { BLACK: i, BLACK_T_15: n } = o.colors;
   return `
     cursor: ${r ? "not-allowed" : "pointer"};
     position: relative;
     border-image: linear-gradient(to right, ${n} 0%, ${n} 100%);
-    outline: 1px solid ${p};
 
     .node-card-border {
       position: absolute;
@@ -59,7 +58,7 @@ t(s)(({}) => `
     width: 28px;
     height: 28px;
   `);
-const W = t(e)(({
+const w = t(e)(({
   theme: o,
   $paddingRight: r,
   $paddingLeft: i
@@ -78,7 +77,7 @@ const W = t(e)(({
       fill: ${p};
     }
   `;
-}), w = t(d)(() => `
+}), W = t(d)(() => `
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
@@ -111,11 +110,11 @@ const W = t(e)(({
   `);
 export {
   f as IconWrapper,
-  W as InProgressIconWrapper,
+  w as InProgressIconWrapper,
   b as NodeCardContainer,
   $ as NodeCardContentWrapper,
   m as NodeCardInfoWrapper,
-  w as NodeCardTitle,
+  W as NodeCardTitle,
   k as NodeKebabMenuWrapper,
   C as NodeMenuOptionsWrapper,
   I as SheetTagWrapper,

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

@@ -1 +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  $disabled: boolean;\n  $isSheetLocked?: boolean;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({ theme, $disabled }) => {\n  const { BLACK, BLACK_T_15, WHITE_5 } = 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    outline: 1px solid ${WHITE_5};\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    &:hover {\n      ${\n        !$disabled &&\n        `\n          outline: 1px solid ${BLACK};\n        `\n      }    \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","theme","$disabled","BLACK","BLACK_T_15","WHITE_5","StyledImportantIcon","ImportantIcon","layout","NodeCardInfoWrapper","$bgImage","IconWrapper","NodeCardContentWrapper","SheetTagWrapper","$top","$right","Lock2Icon","InProgressIconWrapper","$paddingRight","$paddingLeft","BLACK_1","WHITE_1","NodeCardTitle","Text","NodeKebabMenuWrapper","NodeMenuOptionsWrapper","$visible"],"mappings":";;;;;AAYM,MAAAA,IAAoBC,EAAOC,CAAQ,EAAsB,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgB;AACvF,QAAM,EAAE,OAAAC,GAAO,YAAAC,GAAY,SAAAC,EAAA,IAAYJ,EAAM;AAEtC,SAAA;AAAA,cACKC,IAAY,gBAAgB,SAAS;AAAA;AAAA,8CAELE,CAAU,QAAQA,CAAU;AAAA,yBACjDC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAexB,CAACH,KACD;AAAA,+BACuBC,CAAK;AAAA,SAE9B;AAAA;AAAA;AAGN,CAAC,GAEKG,IAAsBP,EAAOQ,CAAa,EAAE,CAAC,EAAE,OAAAN,QAAY;AACzD,QAAA,EAAE,QAAAO,EAAW,IAAAP;AAEZ,SAAA;AAAA,aACIO,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAKlC,CAAC,GAMKC,IAAsBV,EAAOC,CAAQ,EAAwB,CAAC,EAAE,UAAAU,QAC7D;AAAA,4BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnC,GAEKC,IAAcZ,EAAOC,CAAQ;AAAA;AAAA,GAI7BY,IAAyBb,EAAOC,CAAQ,EAAE,MACvC;AAAA;AAAA;AAAA,GAIR,GAOKa,IAAkBd,EAAOC,CAAQ,EAAoB,CAAC,EAAE,MAAAc,GAAM,QAAAC,QAC3D;AAAA;AAAA,SAEAD,KAAQ,CAAC;AAAA,WACPC,KAAU,CAAC;AAAA;AAAA,CAGrB;AAEsBhB,EAAOiB,CAAS,EAAE,CAAC,OACjC;AAAA;AAAA;AAAA,GAIR;AAED,MAAMC,IAAwBlB,EAAOC,CAAQ,EAAmD,CAAC;AAAA,EAC/F,OAAAC;AAAA,EACA,eAAAiB;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,SAAAC,MAAYpB,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWkB,CAAY;AAAA,qBACXD,CAAa;AAAA,kBAChBE,CAAO;AAAA;AAAA;AAAA,cAGXC,CAAO;AAAA;AAAA;AAGrB,CAAC,GAEKC,IAAgBvB,EAAOwB,CAAI,EAAE,MAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOR,GAEKC,IAAuBzB,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QACxC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAMKwB,IAAyB1B,EAAOC,CAAQ,EAA2B,CAAC,EAAE,OAAAC,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;"}
+{"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  $disabled: boolean;\n  $isSheetLocked?: boolean;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({ theme, $disabled }) => {\n  const { 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\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    &:hover {\n      ${\n        !$disabled &&\n        `\n          outline: 1px solid ${BLACK};\n        `\n      }    \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","theme","$disabled","BLACK","BLACK_T_15","StyledImportantIcon","ImportantIcon","layout","NodeCardInfoWrapper","$bgImage","IconWrapper","NodeCardContentWrapper","SheetTagWrapper","$top","$right","Lock2Icon","InProgressIconWrapper","$paddingRight","$paddingLeft","BLACK_1","WHITE_1","NodeCardTitle","Text","NodeKebabMenuWrapper","NodeMenuOptionsWrapper","$visible"],"mappings":";;;;;AAYM,MAAAA,IAAoBC,EAAOC,CAAQ,EAAsB,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgB;AACvF,QAAM,EAAE,OAAAC,GAAO,YAAAC,MAAeH,EAAM;AAE7B,SAAA;AAAA,cACKC,IAAY,gBAAgB,SAAS;AAAA;AAAA,8CAELE,CAAU,QAAQA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAelE,CAACF,KACD;AAAA,+BACuBC,CAAK;AAAA,SAE9B;AAAA;AAAA;AAGN,CAAC,GAEKE,IAAsBN,EAAOO,CAAa,EAAE,CAAC,EAAE,OAAAL,QAAY;AACzD,QAAA,EAAE,QAAAM,EAAW,IAAAN;AAEZ,SAAA;AAAA,aACIM,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAKlC,CAAC,GAMKC,IAAsBT,EAAOC,CAAQ,EAAwB,CAAC,EAAE,UAAAS,QAC7D;AAAA,4BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnC,GAEKC,IAAcX,EAAOC,CAAQ;AAAA;AAAA,GAI7BW,IAAyBZ,EAAOC,CAAQ,EAAE,MACvC;AAAA;AAAA;AAAA,GAIR,GAOKY,IAAkBb,EAAOC,CAAQ,EAAoB,CAAC,EAAE,MAAAa,GAAM,QAAAC,QAC3D;AAAA;AAAA,SAEAD,KAAQ,CAAC;AAAA,WACPC,KAAU,CAAC;AAAA;AAAA,CAGrB;AAEsBf,EAAOgB,CAAS,EAAE,CAAC,OACjC;AAAA;AAAA;AAAA,GAIR;AAED,MAAMC,IAAwBjB,EAAOC,CAAQ,EAAmD,CAAC;AAAA,EAC/F,OAAAC;AAAA,EACA,eAAAgB;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,SAAAC,MAAYnB,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWiB,CAAY;AAAA,qBACXD,CAAa;AAAA,kBAChBE,CAAO;AAAA;AAAA;AAAA,cAGXC,CAAO;AAAA;AAAA;AAGrB,CAAC,GAEKC,IAAgBtB,EAAOuB,CAAI,EAAE,MAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOR,GAEKC,IAAuBxB,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QACxC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAMKuB,IAAyBzB,EAAOC,CAAQ,EAA2B,CAAC,EAAE,OAAAC,GAAO,UAAAwB,QAC1E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASeA,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKXxB,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC;"}

package/dist/features/chapters-v2/utils/index.js

@@ -34,9 +34,8 @@ const s = (E) => {
       return e.NODE_CUSTOM_TEST_BG;
   }
 }, T = (E, r, c, t) => {
-  if (!c) return `(${r})`;
   if (!(E || !t))
-    return `${t}`;
+    return c ? `${t}` : `(${r})`;
 };
 export {
   s as getChapterCompletionPercentage,

package/dist/features/chapters-v2/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/features/chapters-v2/utils/index.ts"],"sourcesContent":["import type { IChapterProgressStats } from '../chapter-details/chapter-details-types';\nimport type { INodeDataProps } from '../comps/node-card/node-card-types';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\n\n// This function calculates the completion percentage of a chapter based on progress stats.\n// If no progress stats are provided, it returns 0.\n// It uses the `mandatory` field from the progress stats to determine the completed and total items.\n// It returns an integer representing the percentage of completion, rounded down to the nearest whole number.\nconst getChapterCompletionPercentage = (progressStats: IChapterProgressStats | null) => {\n  if (!progressStats) return 0;\n\n  const { mandatory } = progressStats;\n  const { completed, total } = mandatory;\n\n  if (total === 0) {\n    return 0;\n  }\n\n  const percentage = Math.floor((completed / total) * 100);\n\n  return percentage;\n};\n\nconst getNodeTypeBasedBgImage = (nodeType: INodeDataProps['node_type']) => {\n  switch (nodeType) {\n    case 'LEARNING':\n    case 'LEVEL2':\n    case 'LEVEL3':\n      return ILLUSTRATIONS.NODE_LEARN_BG;\n    case 'RECAP':\n    case 'REMEDIAL':\n    case 'REVISION':\n      return ILLUSTRATIONS.NODE_RECAP_BG;\n\n    case 'DYNAMIC':\n    case 'ASSESSMENT':\n    case 'CHAPTER_ASSESSMENT':\n    case 'DIAGNOSTIC':\n      return ILLUSTRATIONS.NODE_CUSTOM_TEST_BG;\n\n    case 'PRACTICE':\n    case 'EXTRA_PRACTICE':\n    case 'TARGET_PRACTICE':\n    case 'MASTERY':\n      return ILLUSTRATIONS.NODE_PRACTICE_BG;\n\n    case 'PUZZLE':\n    case 'PUZZLE_EASY':\n    case 'PUZZLE_MEDIUM':\n    case 'PUZZLE_HARD':\n      return ILLUSTRATIONS.NODE_PUZZLE_BG;\n\n    case 'VIDEO':\n      return ILLUSTRATIONS.NODE_VIDEO_BG;\n\n    default:\n      return ILLUSTRATIONS.NODE_CUSTOM_TEST_BG;\n  }\n};\n\nconst getSheetNLessonCount = (\n  isSkipped: boolean,\n  sheetsLength: number,\n  isGoalBlock?: boolean,\n  lessonIdx?: number,\n) => {\n  if (!isGoalBlock) return `(${sheetsLength})`;\n\n  if (isSkipped || !lessonIdx) return undefined;\n\n  return `${lessonIdx}`;\n};\n\nexport { getChapterCompletionPercentage, getNodeTypeBasedBgImage, getSheetNLessonCount };\n"],"names":["getChapterCompletionPercentage","progressStats","mandatory","completed","total","getNodeTypeBasedBgImage","nodeType","ILLUSTRATIONS","getSheetNLessonCount","isSkipped","sheetsLength","isGoalBlock","lessonIdx"],"mappings":";AASM,MAAAA,IAAiC,CAACC,MAAgD;AAClF,MAAA,CAACA,EAAsB,QAAA;AAErB,QAAA,EAAE,WAAAC,EAAc,IAAAD,GAChB,EAAE,WAAAE,GAAW,OAAAC,EAAU,IAAAF;AAE7B,SAAIE,MAAU,IACL,IAGU,KAAK,MAAOD,IAAYC,IAAS,GAAG;AAGzD,GAEMC,IAA0B,CAACC,MAA0C;AACzE,UAAQA,GAAU;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOC,EAAc;AAAA,IACvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB;AACE,aAAOA,EAAc;AAAA,EACzB;AACF,GAEMC,IAAuB,CAC3BC,GACAC,GACAC,GACAC,MACG;AACH,MAAI,CAACD,EAAoB,QAAA,IAAID,CAAY;AAErC,MAAA,EAAAD,KAAa,CAACG;AAElB,WAAO,GAAGA,CAAS;AACrB;"}
+{"version":3,"file":"index.js","sources":["../../../../src/features/chapters-v2/utils/index.ts"],"sourcesContent":["import type { IChapterProgressStats } from '../chapter-details/chapter-details-types';\nimport type { INodeDataProps } from '../comps/node-card/node-card-types';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\n\n// This function calculates the completion percentage of a chapter based on progress stats.\n// If no progress stats are provided, it returns 0.\n// It uses the `mandatory` field from the progress stats to determine the completed and total items.\n// It returns an integer representing the percentage of completion, rounded down to the nearest whole number.\nconst getChapterCompletionPercentage = (progressStats: IChapterProgressStats | null) => {\n  if (!progressStats) return 0;\n\n  const { mandatory } = progressStats;\n  const { completed, total } = mandatory;\n\n  if (total === 0) {\n    return 0;\n  }\n\n  const percentage = Math.floor((completed / total) * 100);\n\n  return percentage;\n};\n\nconst getNodeTypeBasedBgImage = (nodeType: INodeDataProps['node_type']) => {\n  switch (nodeType) {\n    case 'LEARNING':\n    case 'LEVEL2':\n    case 'LEVEL3':\n      return ILLUSTRATIONS.NODE_LEARN_BG;\n    case 'RECAP':\n    case 'REMEDIAL':\n    case 'REVISION':\n      return ILLUSTRATIONS.NODE_RECAP_BG;\n\n    case 'DYNAMIC':\n    case 'ASSESSMENT':\n    case 'CHAPTER_ASSESSMENT':\n    case 'DIAGNOSTIC':\n      return ILLUSTRATIONS.NODE_CUSTOM_TEST_BG;\n\n    case 'PRACTICE':\n    case 'EXTRA_PRACTICE':\n    case 'TARGET_PRACTICE':\n    case 'MASTERY':\n      return ILLUSTRATIONS.NODE_PRACTICE_BG;\n\n    case 'PUZZLE':\n    case 'PUZZLE_EASY':\n    case 'PUZZLE_MEDIUM':\n    case 'PUZZLE_HARD':\n      return ILLUSTRATIONS.NODE_PUZZLE_BG;\n\n    case 'VIDEO':\n      return ILLUSTRATIONS.NODE_VIDEO_BG;\n\n    default:\n      return ILLUSTRATIONS.NODE_CUSTOM_TEST_BG;\n  }\n};\n\nconst getSheetNLessonCount = (\n  isSkipped: boolean,\n  sheetsLength: number,\n  isGoalBlock?: boolean,\n  lessonIdx?: number,\n) => {\n  if (isSkipped || !lessonIdx) return undefined;\n\n  if (!isGoalBlock) return `(${sheetsLength})`;\n\n  return `${lessonIdx}`;\n};\n\nexport { getChapterCompletionPercentage, getNodeTypeBasedBgImage, getSheetNLessonCount };\n"],"names":["getChapterCompletionPercentage","progressStats","mandatory","completed","total","getNodeTypeBasedBgImage","nodeType","ILLUSTRATIONS","getSheetNLessonCount","isSkipped","sheetsLength","isGoalBlock","lessonIdx"],"mappings":";AASM,MAAAA,IAAiC,CAACC,MAAgD;AAClF,MAAA,CAACA,EAAsB,QAAA;AAErB,QAAA,EAAE,WAAAC,EAAc,IAAAD,GAChB,EAAE,WAAAE,GAAW,OAAAC,EAAU,IAAAF;AAE7B,SAAIE,MAAU,IACL,IAGU,KAAK,MAAOD,IAAYC,IAAS,GAAG;AAGzD,GAEMC,IAA0B,CAACC,MAA0C;AACzE,UAAQA,GAAU;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOC,EAAc;AAAA,IACvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB;AACE,aAAOA,EAAc;AAAA,EACzB;AACF,GAEMC,IAAuB,CAC3BC,GACAC,GACAC,GACAC,MACG;AACC,MAAA,EAAAH,KAAa,CAACG;AAElB,WAAKD,IAEE,GAAGC,CAAS,KAFM,IAAIF,CAAY;AAG3C;"}

package/dist/index.d.ts

@@ -1062,6 +1062,7 @@ declare interface ICircularStepWrapperProps {
     showPrevious?: boolean;
     isNextLoading?: boolean;
     progressAngle?: number;
+    footerElement?: JSX.Element;
 }
 
 declare interface IClaimUserAccountProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.0.20-gs1",
+  "version": "3.0.20-j1",
   "type": "module",
   "files": [
     "dist"