@cuemath/leap 3.2.11-j2 → 3.2.11-j3

package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js

@@ -1,7 +1,6 @@
-import o, { keyframes as r, css as e } from "styled-components";
+import r, { keyframes as a, css as t } from "styled-components";
 import s from "../../../ui/layout/flex-view.js";
-import a from "../../../ui/text/text.js";
-const m = o(s)``, i = r`
+const c = r(s)``, e = a`
   from {
     opacity: 0;
     transform: scale(0.95);
@@ -10,7 +9,7 @@ const m = o(s)``, i = r`
     opacity: 1;
     transform: scale(1);
   }
-`, n = r`
+`, i = a`
   from {
     opacity: 1;
     transform: scale(1);
@@ -19,47 +18,35 @@ const m = o(s)``, i = r`
     opacity: 0;
     transform: scale(0.95);
   }
-`, f = o(s)`
+`, l = r(s)`
   position: relative;
   top: -8px;
   width: fit-content;
   max-width: 90%;
-  border: 1px solid ${({ theme: t }) => t.colors.WHITE_T_15}
-  opacity: ${({ isVisible: t }) => t ? 1 : 0};
-  transform: ${({ isVisible: t }) => t ? "scale(1)" : "scale(0.95)"};
-  animation: ${({ isVisible: t }) => t ? e`
+  border: 1px solid ${({ theme: o }) => o.colors.WHITE_T_15}
+  opacity: ${({ isVisible: o }) => o ? 1 : 0};
+  transform: ${({ isVisible: o }) => o ? "scale(1)" : "scale(0.95)"};
+  animation: ${({ isVisible: o }) => o ? t`
+          ${e} 0.4s ease forwards
+        ` : t`
           ${i} 0.4s ease forwards
-        ` : e`
-          ${n} 0.4s ease forwards
         `};
   transition: all 0.4s ease;
   &::before {
     content: '';
     position: absolute;
-    left: -9px;
+    left: -8px;
     top: 50%;
     transform: translateY(-50%);
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
     border-bottom: 8px solid transparent;
-    border-right: 8px solid ${({ theme: t }) => t.colors.BLACK_5};
+    border-right: 8px solid ${({ theme: o }) => o.colors.BLACK_5};
   }
-`, p = r`
-  from {
-    width: 0;
-  }
-  to {
-    width: 100%;
-  }
-`, w = o(a)`
-  animation: ${p} 500ms steps(30, end);
-  overflow: hidden;
-  white-space: nowrap;
 `;
 export {
-  w as AnimatedText,
-  f as MessageWrapper,
-  m as Wrapper
+  l as MessageWrapper,
+  c as Wrapper
 };
 //# sourceMappingURL=animated-avatar-message-styled.js.map

package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"animated-avatar-message-styled.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nexport const Wrapper = styled(FlexView)``;\n\nconst fadeInScale = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\nconst fadeOutScale = keyframes`\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n`;\n\nexport const MessageWrapper = styled(FlexView)<{ isVisible: boolean }>`\n  position: relative;\n  top: -8px;\n  width: fit-content;\n  max-width: 90%;\n  border: 1px solid ${({ theme }) => theme.colors.WHITE_T_15}\n  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\n  transform: ${({ isVisible }) => (isVisible ? 'scale(1)' : 'scale(0.95)')};\n  animation: ${({ isVisible }) =>\n    isVisible\n      ? css`\n          ${fadeInScale} 0.4s ease forwards\n        `\n      : css`\n          ${fadeOutScale} 0.4s ease forwards\n        `};\n  transition: all 0.4s ease;\n  &::before {\n    content: '';\n    position: absolute;\n    left: -9px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 0;\n    height: 0;\n    border-top: 8px solid transparent;\n    border-bottom: 8px solid transparent;\n    border-right: 8px solid ${({ theme }) => theme.colors.BLACK_5};\n  }\n`;\n\nconst typewriter = keyframes`\n  from {\n    width: 0;\n  }\n  to {\n    width: 100%;\n  }\n`;\n\nexport const AnimatedText = styled(Text)`\n  animation: ${typewriter} 500ms steps(30, end);\n  overflow: hidden;\n  white-space: nowrap;\n`;\n"],"names":["Wrapper","styled","FlexView","fadeInScale","keyframes","fadeOutScale","MessageWrapper","theme","isVisible","css","typewriter","AnimatedText","Text"],"mappings":";;;AAKa,MAAAA,IAAUC,EAAOC,CAAQ,KAEhCC,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWdC,IAAeD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWRE,IAAiBL,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKvB,CAAC,EAAE,OAAAK,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,aAC/C,CAAC,EAAE,WAAAC,EAAA,MAAiBA,IAAY,IAAI,CAAE;AAAA,eACpC,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,aAAa,aAAc;AAAA,eAC3D,CAAC,EAAE,WAAAA,QACdA,IACIC;AAAA,YACIN,CAAW;AAAA,YAEfM;AAAA,YACIJ,CAAY;AAAA,SACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAYqB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAI3DG,IAAaN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASNO,IAAeV,EAAOW,CAAI;AAAA,eACxBF,CAAU;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"animated-avatar-message-styled.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const Wrapper = styled(FlexView)``;\n\nconst fadeInScale = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\nconst fadeOutScale = keyframes`\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n`;\n\nexport const MessageWrapper = styled(FlexView)<{ isVisible: boolean }>`\n  position: relative;\n  top: -8px;\n  width: fit-content;\n  max-width: 90%;\n  border: 1px solid ${({ theme }) => theme.colors.WHITE_T_15}\n  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\n  transform: ${({ isVisible }) => (isVisible ? 'scale(1)' : 'scale(0.95)')};\n  animation: ${({ isVisible }) =>\n    isVisible\n      ? css`\n          ${fadeInScale} 0.4s ease forwards\n        `\n      : css`\n          ${fadeOutScale} 0.4s ease forwards\n        `};\n  transition: all 0.4s ease;\n  &::before {\n    content: '';\n    position: absolute;\n    left: -8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 0;\n    height: 0;\n    border-top: 8px solid transparent;\n    border-bottom: 8px solid transparent;\n    border-right: 8px solid ${({ theme }) => theme.colors.BLACK_5};\n  }\n`;\n"],"names":["Wrapper","styled","FlexView","fadeInScale","keyframes","fadeOutScale","MessageWrapper","theme","isVisible","css"],"mappings":";;AAIa,MAAAA,IAAUC,EAAOC,CAAQ,KAEhCC,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWdC,IAAeD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWRE,IAAiBL,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKvB,CAAC,EAAE,OAAAK,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,aAC/C,CAAC,EAAE,WAAAC,EAAA,MAAiBA,IAAY,IAAI,CAAE;AAAA,eACpC,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,aAAa,aAAc;AAAA,eAC3D,CAAC,EAAE,WAAAA,QACdA,IACIC;AAAA,YACIN,CAAW;AAAA,YAEfM;AAAA,YACIJ,CAAY;AAAA,SACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAYqB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;"}

package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js

@@ -1,36 +1,37 @@
-import { jsxs as v, jsx as l } from "react/jsx-runtime";
-import { memo as y, useRef as $, useState as g, useEffect as o, useCallback as N, useImperativeHandle as R, useMemo as V } from "react";
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import { memo as h, useRef as T, useState as $, useEffect as o, useCallback as N, useImperativeHandle as R, useMemo as V } from "react";
 import { LOTTIE as _ } from "../../../../assets/lottie/lottie.js";
-import E from "../../../ui/layout/flex-view.js";
+import x from "../../../ui/layout/flex-view.js";
 import O from "../../../ui/lottie-animation/lottie-animation.js";
-import { ANIMATION_SEGMENTS as x, FADE_TIMEOUT as L } from "./animated-avatar-message-constants.js";
-import { Wrapper as j, MessageWrapper as C, AnimatedText as D } from "./animated-avatar-message-styled.js";
+import { ANIMATION_SEGMENTS as E, FADE_TIMEOUT as L } from "./animated-avatar-message-constants.js";
+import { Wrapper as j, MessageWrapper as C } from "./animated-avatar-message-styled.js";
+import D from "./animated-text/animated-text.js";
 const F = {
   autoplay: !1,
   loop: !1,
   renderer: "canvas"
-}, S = ({
-  message: u,
+}, X = ({
+  message: n,
   confirmationMessage: e,
   onShowContent: t,
   confirmationFrames: c,
   isConfirmationVisible: m,
   ref: M
 }) => {
-  const r = $(null), n = $(null), [p, i] = g(!1), [f, d] = g(m);
+  const r = T(null), u = T(null), [p, i] = $(!1), [f, d] = $(m);
   o(() => () => {
-    n.current && clearTimeout(n.current);
+    u.current && clearTimeout(u.current);
   }, []), o(() => {
     d(m);
   }, [m]), o(() => {
     i(!0), t(!0);
-  }, [u, t]);
-  const h = N(() => {
+  }, [n, t]);
+  const v = N(() => {
     var a, A;
-    (a = r.current) == null || a.playSegments(x.INITIAL, !0);
+    (a = r.current) == null || a.playSegments(E.INITIAL, !0);
     const s = () => {
-      var I, T;
-      (I = r.current) == null || I.removeEventListener("complete", s), i(!0), t(!0), (T = r.current) == null || T.playSegments(x.FINAL, !0);
+      var g, I;
+      (g = r.current) == null || g.removeEventListener("complete", s), i(!0), t(!0), (I = r.current) == null || I.playSegments(E.FINAL, !0);
     };
     (A = r.current) == null || A.addEventListener("complete", s);
   }, [t]);
@@ -38,21 +39,21 @@ const F = {
     M,
     () => ({
       fadeOutMessage: () => new Promise((s) => {
-        t(!1), n.current = setTimeout(() => {
+        t(!1), u.current = setTimeout(() => {
           i(!1), s();
         }, L);
       }),
       playConfirmationFrames: () => new Promise((s) => {
         var a;
-        (a = r.current) == null || a.playSegments(c, !0), e && i(!1), n.current = setTimeout(() => {
+        (a = r.current) == null || a.playSegments(c, !0), e && i(!1), u.current = setTimeout(() => {
           e && d(!0), i(!0), s();
         }, L);
       })
     }),
     [c, e, t]
   );
-  const b = V(() => f && e ? e : u, [f, e, u]);
-  return /* @__PURE__ */ v(
+  const y = V(() => f && e ? e : n, [f, e, n]);
+  return /* @__PURE__ */ b(
     j,
     {
       $flexDirection: "row",
@@ -60,18 +61,18 @@ const F = {
       $alignItems: "center",
       $flexColumnGapX: 0.5,
       children: [
-        /* @__PURE__ */ l(E, { $width: 80, $height: 80, children: /* @__PURE__ */ l(
+        /* @__PURE__ */ l(x, { $width: 80, $height: 80, children: /* @__PURE__ */ l(
           O,
           {
             width: 80,
             height: 80,
             src: _.ANIMATED_AVATAR,
             ref: r,
-            onRender: h,
+            onRender: v,
             settings: F
           }
         ) }),
-        p && /* @__PURE__ */ l(E, { $flex: 1, children: /* @__PURE__ */ l(
+        p && /* @__PURE__ */ l(x, { $flex: 1, children: /* @__PURE__ */ l(
           C,
           {
             $gutterX: 1,
@@ -79,14 +80,14 @@ const F = {
             $background: "BLACK_3",
             $borderColor: "BLACK_5",
             isVisible: p,
-            children: /* @__PURE__ */ l(D, { $renderAs: "ab2", $color: "WHITE", $whiteSpace: "pre-line", children: b })
+            children: /* @__PURE__ */ l(D, { text: y, speed: 20 })
           }
         ) })
       ]
     }
   );
-}, K = y(S);
+}, H = h(X);
 export {
-  K as default
+  H as default
 };
 //# sourceMappingURL=animated-avatar-message.js.map

package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"animated-avatar-message.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { IAnimatedAvatarMessageProps } from './animated-avatar-message-types';\n\nimport {\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n  useEffect,\n  type FC,\n  useMemo,\n  memo,\n} from 'react';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport { ANIMATION_SEGMENTS, FADE_TIMEOUT } from './animated-avatar-message-constants';\nimport * as Styled from './animated-avatar-message-styled';\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nconst AnimatedAvatarMessage: FC<IAnimatedAvatarMessageProps> = ({\n  message,\n  confirmationMessage,\n  onShowContent,\n  confirmationFrames,\n  isConfirmationVisible,\n  ref,\n}) => {\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [isMessageVisible, setIsMessageVisible] = useState(false);\n  const [isConfirmationMessageVisible, setIsConfirmationMessageVisible] =\n    useState(isConfirmationVisible);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    setIsConfirmationMessageVisible(isConfirmationVisible);\n  }, [isConfirmationVisible]);\n\n  useEffect(() => {\n    setIsMessageVisible(true);\n    onShowContent(true);\n  }, [message, onShowContent]);\n\n  const handleLottieRender = useCallback(() => {\n    animationRef.current?.playSegments(ANIMATION_SEGMENTS.INITIAL, true);\n    const onComplete = () => {\n      animationRef.current?.removeEventListener('complete', onComplete);\n      setIsMessageVisible(true);\n      onShowContent(true);\n\n      animationRef.current?.playSegments(ANIMATION_SEGMENTS.FINAL, true);\n    };\n\n    animationRef.current?.addEventListener('complete', onComplete);\n  }, [onShowContent]);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      fadeOutMessage: () =>\n        new Promise<void>(resolve => {\n          onShowContent(false);\n          timeoutRef.current = setTimeout(() => {\n            setIsMessageVisible(false);\n            resolve();\n          }, FADE_TIMEOUT);\n        }),\n\n      playConfirmationFrames: () =>\n        new Promise<void>(resolve => {\n          animationRef.current?.playSegments(confirmationFrames, true);\n          if (confirmationMessage) {\n            setIsMessageVisible(false);\n          }\n          timeoutRef.current = setTimeout(() => {\n            if (confirmationMessage) {\n              setIsConfirmationMessageVisible(true);\n            }\n            setIsMessageVisible(true);\n            resolve();\n          }, FADE_TIMEOUT);\n        }),\n    }),\n    [confirmationFrames, confirmationMessage, onShowContent],\n  );\n\n  const displayMessage = useMemo(() => {\n    return isConfirmationMessageVisible && confirmationMessage ? confirmationMessage : message;\n  }, [isConfirmationMessageVisible, confirmationMessage, message]);\n\n  return (\n    <Styled.Wrapper\n      $flexDirection=\"row\"\n      $justifyContent=\"flex-start\"\n      $alignItems=\"center\"\n      $flexColumnGapX={0.5}\n    >\n      <FlexView $width={80} $height={80}>\n        <LottieAnimation\n          width={80}\n          height={80}\n          src={LOTTIE.ANIMATED_AVATAR}\n          ref={animationRef}\n          onRender={handleLottieRender}\n          settings={animationSettings}\n        />\n      </FlexView>\n      {isMessageVisible && (\n        <FlexView $flex={1}>\n          <Styled.MessageWrapper\n            $gutterX={1}\n            $gapX={0.5}\n            $background=\"BLACK_3\"\n            $borderColor=\"BLACK_5\"\n            isVisible={isMessageVisible}\n          >\n            <Styled.AnimatedText $renderAs=\"ab2\" $color=\"WHITE\" $whiteSpace=\"pre-line\">\n              {displayMessage}\n            </Styled.AnimatedText>\n          </Styled.MessageWrapper>\n        </FlexView>\n      )}\n    </Styled.Wrapper>\n  );\n};\n\nexport default memo(AnimatedAvatarMessage);\n"],"names":["animationSettings","AnimatedAvatarMessage","message","confirmationMessage","onShowContent","confirmationFrames","isConfirmationVisible","ref","animationRef","useRef","timeoutRef","isMessageVisible","setIsMessageVisible","useState","isConfirmationMessageVisible","setIsConfirmationMessageVisible","useEffect","handleLottieRender","useCallback","_a","ANIMATION_SEGMENTS","onComplete","_b","useImperativeHandle","resolve","FADE_TIMEOUT","displayMessage","useMemo","jsxs","Styled.Wrapper","jsx","FlexView","LottieAnimation","LOTTIE","Styled.MessageWrapper","Styled.AnimatedText","animatedAvatarMessage","memo"],"mappings":"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"}
+{"version":3,"file":"animated-avatar-message.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { IAnimatedAvatarMessageProps } from './animated-avatar-message-types';\n\nimport {\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n  useEffect,\n  type FC,\n  useMemo,\n  memo,\n} from 'react';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport { ANIMATION_SEGMENTS, FADE_TIMEOUT } from './animated-avatar-message-constants';\nimport * as Styled from './animated-avatar-message-styled';\nimport AnimatedText from './animated-text/animated-text';\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nconst AnimatedAvatarMessage: FC<IAnimatedAvatarMessageProps> = ({\n  message,\n  confirmationMessage,\n  onShowContent,\n  confirmationFrames,\n  isConfirmationVisible,\n  ref,\n}) => {\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [isMessageVisible, setIsMessageVisible] = useState(false);\n  const [isConfirmationMessageVisible, setIsConfirmationMessageVisible] =\n    useState(isConfirmationVisible);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    setIsConfirmationMessageVisible(isConfirmationVisible);\n  }, [isConfirmationVisible]);\n\n  useEffect(() => {\n    setIsMessageVisible(true);\n    onShowContent(true);\n  }, [message, onShowContent]);\n\n  const handleLottieRender = useCallback(() => {\n    animationRef.current?.playSegments(ANIMATION_SEGMENTS.INITIAL, true);\n    const onComplete = () => {\n      animationRef.current?.removeEventListener('complete', onComplete);\n      setIsMessageVisible(true);\n      onShowContent(true);\n\n      animationRef.current?.playSegments(ANIMATION_SEGMENTS.FINAL, true);\n    };\n\n    animationRef.current?.addEventListener('complete', onComplete);\n  }, [onShowContent]);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      fadeOutMessage: () =>\n        new Promise<void>(resolve => {\n          onShowContent(false);\n          timeoutRef.current = setTimeout(() => {\n            setIsMessageVisible(false);\n            resolve();\n          }, FADE_TIMEOUT);\n        }),\n\n      playConfirmationFrames: () =>\n        new Promise<void>(resolve => {\n          animationRef.current?.playSegments(confirmationFrames, true);\n          if (confirmationMessage) {\n            setIsMessageVisible(false);\n          }\n          timeoutRef.current = setTimeout(() => {\n            if (confirmationMessage) {\n              setIsConfirmationMessageVisible(true);\n            }\n            setIsMessageVisible(true);\n            resolve();\n          }, FADE_TIMEOUT);\n        }),\n    }),\n    [confirmationFrames, confirmationMessage, onShowContent],\n  );\n\n  const displayMessage = useMemo(() => {\n    return isConfirmationMessageVisible && confirmationMessage ? confirmationMessage : message;\n  }, [isConfirmationMessageVisible, confirmationMessage, message]);\n\n  return (\n    <Styled.Wrapper\n      $flexDirection=\"row\"\n      $justifyContent=\"flex-start\"\n      $alignItems=\"center\"\n      $flexColumnGapX={0.5}\n    >\n      <FlexView $width={80} $height={80}>\n        <LottieAnimation\n          width={80}\n          height={80}\n          src={LOTTIE.ANIMATED_AVATAR}\n          ref={animationRef}\n          onRender={handleLottieRender}\n          settings={animationSettings}\n        />\n      </FlexView>\n      {isMessageVisible && (\n        <FlexView $flex={1}>\n          <Styled.MessageWrapper\n            $gutterX={1}\n            $gapX={0.5}\n            $background=\"BLACK_3\"\n            $borderColor=\"BLACK_5\"\n            isVisible={isMessageVisible}\n          >\n            <AnimatedText text={displayMessage} speed={20} />\n          </Styled.MessageWrapper>\n        </FlexView>\n      )}\n    </Styled.Wrapper>\n  );\n};\n\nexport default memo(AnimatedAvatarMessage);\n"],"names":["animationSettings","AnimatedAvatarMessage","message","confirmationMessage","onShowContent","confirmationFrames","isConfirmationVisible","ref","animationRef","useRef","timeoutRef","isMessageVisible","setIsMessageVisible","useState","isConfirmationMessageVisible","setIsConfirmationMessageVisible","useEffect","handleLottieRender","useCallback","_a","ANIMATION_SEGMENTS","onComplete","_b","useImperativeHandle","resolve","FADE_TIMEOUT","displayMessage","useMemo","jsxs","Styled.Wrapper","jsx","FlexView","LottieAnimation","LOTTIE","Styled.MessageWrapper","AnimatedText","animatedAvatarMessage","memo"],"mappings":"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"}

package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js

@@ -0,0 +1,10 @@
+import r from "styled-components";
+import e from "../../../../ui/text/text.js";
+const p = r(e)`
+  white-space: pre-wrap;
+  word-break: break-word;
+`;
+export {
+  p as AnimatedText
+};
+//# sourceMappingURL=animated-text-styled.js.map

package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-text-styled.js","sources":["../../../../../../src/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport Text from '../../../../ui/text/text';\n\nexport const AnimatedText = styled(Text)`\n  white-space: pre-wrap;\n  word-break: break-word;\n`;\n"],"names":["AnimatedText","styled","Text"],"mappings":";;AAIa,MAAAA,IAAeC,EAAOC,CAAI;AAAA;AAAA;AAAA;"}

package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js

@@ -0,0 +1,17 @@
+import { jsx as i } from "react/jsx-runtime";
+import { memo as o, useState as l, useEffect as m } from "react";
+import { AnimatedText as c } from "./animated-text-styled.js";
+const f = ({ text: e, speed: r = 30 }) => {
+  const [s, n] = l(0);
+  return m(() => {
+    n(0);
+    const a = setInterval(() => {
+      n((t) => t >= e.length ? (clearInterval(a), t) : t + 1);
+    }, r);
+    return () => clearInterval(a);
+  }, [e, r]), /* @__PURE__ */ i(c, { $renderAs: "ab2", $color: "WHITE", children: e.slice(0, s) });
+}, T = o(f);
+export {
+  T as default
+};
+//# sourceMappingURL=animated-text.js.map

package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-text.js","sources":["../../../../../../src/features/auth/comps/animated-avatar-message/animated-text/animated-text.tsx"],"sourcesContent":["import type { IAnimatedTextProps } from './animated-text-types';\n\nimport React, { useEffect, useState, memo } from 'react';\n\nimport * as Styled from './animated-text-styled';\n\nconst AnimatedText: React.FC<IAnimatedTextProps> = ({ text, speed = 30 }) => {\n  const [visibleChars, setVisibleChars] = useState(0);\n\n  useEffect(() => {\n    setVisibleChars(0);\n\n    const interval = setInterval(() => {\n      setVisibleChars(prev => {\n        if (prev >= text.length) {\n          clearInterval(interval);\n\n          return prev;\n        }\n\n        return prev + 1;\n      });\n    }, speed);\n\n    return () => clearInterval(interval);\n  }, [text, speed]);\n\n  return (\n    <Styled.AnimatedText $renderAs=\"ab2\" $color=\"WHITE\">\n      {text.slice(0, visibleChars)}\n    </Styled.AnimatedText>\n  );\n};\n\nexport default memo(AnimatedText);\n"],"names":["AnimatedText","text","speed","visibleChars","setVisibleChars","useState","useEffect","interval","prev","jsx","Styled.AnimatedText","AnimatedText$1","memo"],"mappings":";;;AAMA,MAAMA,IAA6C,CAAC,EAAE,MAAAC,GAAM,OAAAC,IAAQ,SAAS;AAC3E,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAS,CAAC;AAElD,SAAAC,EAAU,MAAM;AACd,IAAAF,EAAgB,CAAC;AAEX,UAAAG,IAAW,YAAY,MAAM;AACjC,MAAAH,EAAgB,CAAQI,MAClBA,KAAQP,EAAK,UACf,cAAcM,CAAQ,GAEfC,KAGFA,IAAO,CACf;AAAA,OACAN,CAAK;AAED,WAAA,MAAM,cAAcK,CAAQ;AAAA,EAAA,GAClC,CAACN,GAAMC,CAAK,CAAC,GAGb,gBAAAO,EAAAC,GAAA,EAAoB,WAAU,OAAM,QAAO,SACzC,UAAKT,EAAA,MAAM,GAAGE,CAAY,EAC7B,CAAA;AAEJ,GAEeQ,IAAAC,EAAKZ,CAAY;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.2.11-j2",
+  "version": "3.2.11-j3",
   "type": "module",
   "files": [
     "dist"