@cuemath/leap 3.0.19 → 3.0.20-j

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/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.19",
+  "version": "3.0.20-j",
   "type": "module",
   "files": [
     "dist"