@cuemath/leap 3.3.23 → 3.3.24-as2

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

@@ -23,10 +23,10 @@ const l = r(e)``, s = a`
   left: -12px;
   width: fit-content;
   max-width: 100%;
-  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`
+  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`
           ${s} 0.4s ease forwards
         ` : t`
           ${i} 0.4s ease forwards

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';\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  left: -12px;\n  width: fit-content;\n  max-width: 100%;\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;"}
+{"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  left: -12px;\n  width: fit-content;\n  max-width: 100%;\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,YAAAC,EAAA,MAAkBA,IAAa,IAAI,CAAE;AAAA,eACtC,CAAC,EAAE,YAAAA,EAAA,MAAkBA,IAAa,aAAa,aAAc;AAAA,eAC7D,CAAC,EAAE,YAAAA,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

@@ -21,7 +21,7 @@ const K = {
   height: N = "auto",
   idleFrames: A
 }) => {
-  const l = c(null), u = c(null), [x, n] = y(!1), [I, $] = y(!1), [M, C] = y(d), L = c(!1), m = c(A), i = E(() => {
+  const l = c(null), u = c(null), [$, n] = y(!1), [I, x] = y(!1), [M, C] = y(d), L = c(!1), m = c(A), i = E(() => {
     const e = l.current;
     if (!e) return;
     e.removeEventListener("complete", i), e.setLoop(!0);
@@ -46,12 +46,12 @@ const K = {
     h,
     () => ({
       fadeOutMessageAndPlayCompletion: () => new Promise((e) => {
-        s(!1), $(!1), o && I && (L.current = !1, g(o)), u.current = setTimeout(() => {
+        s(!1), x(!1), o && I && (L.current = !1, g(o)), u.current = setTimeout(() => {
           n(!1), e();
         }, b);
       }),
       playConfirmationFrames: () => new Promise((e) => {
-        I || (o && $(!0), L.current = !!m.current, g(v)), r && n(!1), u.current = setTimeout(() => {
+        I || (o && x(!0), L.current = !!m.current, g(v)), r && n(!1), u.current = setTimeout(() => {
           r && C(!0), n(!0), e();
         }, b);
       })
@@ -94,14 +94,14 @@ const K = {
             settings: K
           }
         ) }),
-        x && /* @__PURE__ */ a(R, { $flex: 1, children: /* @__PURE__ */ a(
+        $ && /* @__PURE__ */ a(R, { $flex: 1, children: /* @__PURE__ */ a(
           B,
           {
             $gutterX: 1,
             $gapX: 0.5,
             $background: "BLACK_3",
             $borderColor: "BLACK_5",
-            isVisible: x,
+            $isVisible: $,
             children: /* @__PURE__ */ a(G, { text: V, speed: 20 })
           }
         ) })

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';\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  completionFrames,\n  isConfirmationVisible,\n  ref,\n  height = 'auto',\n  idleFrames,\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 [isConfirmationAnimationPlayed, setIsConfirmationAnimationPlayed] = useState(false);\n  const [isConfirmationMessageVisible, setIsConfirmationMessageVisible] =\n    useState(isConfirmationVisible);\n  const shouldUseCustomIdleFrames = useRef(false);\n  const idleFramesRef = useRef(idleFrames);\n\n  const playIdleLoop = useCallback(() => {\n    const animation = animationRef.current;\n\n    if (!animation) return;\n\n    animation.removeEventListener('complete', playIdleLoop);\n    animation.setLoop(true);\n\n    const idleSegment =\n      shouldUseCustomIdleFrames.current && idleFramesRef.current\n        ? idleFramesRef.current\n        : ANIMATION_SEGMENTS.IDLE;\n\n    animation.playSegments(idleSegment, true);\n  }, []);\n\n  const handleLottieRender = useCallback(() => {\n    const animation = animationRef.current;\n\n    if (!animation) return;\n\n    animation.playSegments(ANIMATION_SEGMENTS.INITIAL, true);\n\n    const onComplete = () => {\n      animation.removeEventListener('complete', onComplete);\n      setIsMessageVisible(true);\n      onShowContent(true);\n      animation.playSegments(ANIMATION_SEGMENTS.FINAL, true);\n      animation.addEventListener('complete', playIdleLoop);\n    };\n\n    animation.addEventListener('complete', onComplete);\n  }, [onShowContent, playIdleLoop]);\n\n  const playAnimation = useCallback(\n    (frames: [number, number]) => {\n      const animation = animationRef.current;\n\n      if (!animation) return;\n\n      animation.setLoop(false);\n      animation.playSegments(frames, true);\n      animation.addEventListener('complete', playIdleLoop);\n    },\n    [playIdleLoop],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      fadeOutMessageAndPlayCompletion: () =>\n        new Promise<void>(resolve => {\n          onShowContent(false);\n          setIsConfirmationAnimationPlayed(false);\n          if (completionFrames && isConfirmationAnimationPlayed) {\n            shouldUseCustomIdleFrames.current = false;\n            playAnimation(completionFrames);\n          }\n          timeoutRef.current = setTimeout(() => {\n            setIsMessageVisible(false);\n            resolve();\n          }, FADE_TIMEOUT);\n        }),\n\n      playConfirmationFrames: () =>\n        new Promise<void>(resolve => {\n          if (!isConfirmationAnimationPlayed) {\n            if (completionFrames) {\n              setIsConfirmationAnimationPlayed(true);\n            }\n            shouldUseCustomIdleFrames.current = !!idleFramesRef.current;\n            playAnimation(confirmationFrames);\n          }\n\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    [\n      completionFrames,\n      confirmationFrames,\n      confirmationMessage,\n      isConfirmationAnimationPlayed,\n      onShowContent,\n      playAnimation,\n    ],\n  );\n\n  const displayMessage = useMemo(() => {\n    return isConfirmationMessageVisible && confirmationMessage ? confirmationMessage : message;\n  }, [isConfirmationMessageVisible, confirmationMessage, message]);\n\n  useEffect(() => {\n    idleFramesRef.current = idleFrames;\n  }, [idleFrames]);\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  return (\n    <Styled.Wrapper\n      $flexDirection=\"row\"\n      $justifyContent=\"flex-start\"\n      $alignItems=\"center\"\n      $flexColumnGapX={0.5}\n      $height={height}\n    >\n      <FlexView>\n        <LottieAnimation\n          width={118}\n          height={118}\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","completionFrames","isConfirmationVisible","ref","height","idleFrames","animationRef","useRef","timeoutRef","isMessageVisible","setIsMessageVisible","useState","isConfirmationAnimationPlayed","setIsConfirmationAnimationPlayed","isConfirmationMessageVisible","setIsConfirmationMessageVisible","shouldUseCustomIdleFrames","idleFramesRef","playIdleLoop","useCallback","animation","idleSegment","ANIMATION_SEGMENTS","handleLottieRender","onComplete","playAnimation","frames","useImperativeHandle","resolve","FADE_TIMEOUT","displayMessage","useMemo","useEffect","jsxs","Styled.Wrapper","jsx","FlexView","LottieAnimation","LOTTIE","Styled.MessageWrapper","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  completionFrames,\n  isConfirmationVisible,\n  ref,\n  height = 'auto',\n  idleFrames,\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 [isConfirmationAnimationPlayed, setIsConfirmationAnimationPlayed] = useState(false);\n  const [isConfirmationMessageVisible, setIsConfirmationMessageVisible] =\n    useState(isConfirmationVisible);\n  const shouldUseCustomIdleFrames = useRef(false);\n  const idleFramesRef = useRef(idleFrames);\n\n  const playIdleLoop = useCallback(() => {\n    const animation = animationRef.current;\n\n    if (!animation) return;\n\n    animation.removeEventListener('complete', playIdleLoop);\n    animation.setLoop(true);\n\n    const idleSegment =\n      shouldUseCustomIdleFrames.current && idleFramesRef.current\n        ? idleFramesRef.current\n        : ANIMATION_SEGMENTS.IDLE;\n\n    animation.playSegments(idleSegment, true);\n  }, []);\n\n  const handleLottieRender = useCallback(() => {\n    const animation = animationRef.current;\n\n    if (!animation) return;\n\n    animation.playSegments(ANIMATION_SEGMENTS.INITIAL, true);\n\n    const onComplete = () => {\n      animation.removeEventListener('complete', onComplete);\n      setIsMessageVisible(true);\n      onShowContent(true);\n      animation.playSegments(ANIMATION_SEGMENTS.FINAL, true);\n      animation.addEventListener('complete', playIdleLoop);\n    };\n\n    animation.addEventListener('complete', onComplete);\n  }, [onShowContent, playIdleLoop]);\n\n  const playAnimation = useCallback(\n    (frames: [number, number]) => {\n      const animation = animationRef.current;\n\n      if (!animation) return;\n\n      animation.setLoop(false);\n      animation.playSegments(frames, true);\n      animation.addEventListener('complete', playIdleLoop);\n    },\n    [playIdleLoop],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      fadeOutMessageAndPlayCompletion: () =>\n        new Promise<void>(resolve => {\n          onShowContent(false);\n          setIsConfirmationAnimationPlayed(false);\n          if (completionFrames && isConfirmationAnimationPlayed) {\n            shouldUseCustomIdleFrames.current = false;\n            playAnimation(completionFrames);\n          }\n          timeoutRef.current = setTimeout(() => {\n            setIsMessageVisible(false);\n            resolve();\n          }, FADE_TIMEOUT);\n        }),\n\n      playConfirmationFrames: () =>\n        new Promise<void>(resolve => {\n          if (!isConfirmationAnimationPlayed) {\n            if (completionFrames) {\n              setIsConfirmationAnimationPlayed(true);\n            }\n            shouldUseCustomIdleFrames.current = !!idleFramesRef.current;\n            playAnimation(confirmationFrames);\n          }\n\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    [\n      completionFrames,\n      confirmationFrames,\n      confirmationMessage,\n      isConfirmationAnimationPlayed,\n      onShowContent,\n      playAnimation,\n    ],\n  );\n\n  const displayMessage = useMemo(() => {\n    return isConfirmationMessageVisible && confirmationMessage ? confirmationMessage : message;\n  }, [isConfirmationMessageVisible, confirmationMessage, message]);\n\n  useEffect(() => {\n    idleFramesRef.current = idleFrames;\n  }, [idleFrames]);\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  return (\n    <Styled.Wrapper\n      $flexDirection=\"row\"\n      $justifyContent=\"flex-start\"\n      $alignItems=\"center\"\n      $flexColumnGapX={0.5}\n      $height={height}\n    >\n      <FlexView>\n        <LottieAnimation\n          width={118}\n          height={118}\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","completionFrames","isConfirmationVisible","ref","height","idleFrames","animationRef","useRef","timeoutRef","isMessageVisible","setIsMessageVisible","useState","isConfirmationAnimationPlayed","setIsConfirmationAnimationPlayed","isConfirmationMessageVisible","setIsConfirmationMessageVisible","shouldUseCustomIdleFrames","idleFramesRef","playIdleLoop","useCallback","animation","idleSegment","ANIMATION_SEGMENTS","handleLottieRender","onComplete","playAnimation","frames","useImperativeHandle","resolve","FADE_TIMEOUT","displayMessage","useMemo","useEffect","jsxs","Styled.Wrapper","jsx","FlexView","LottieAnimation","LOTTIE","Styled.MessageWrapper","AnimatedText","animatedAvatarMessage","memo"],"mappings":"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"}

package/dist/features/hooks/use-visibility-change.js

@@ -0,0 +1,12 @@
+import { useState as n, useCallback as l, useEffect as a } from "react";
+const o = () => {
+  const [t, e] = n(document.visibilityState === "visible"), i = l(() => {
+    const s = document.visibilityState === "visible";
+    e(s);
+  }, [e]);
+  return a(() => (document.addEventListener("visibilitychange", i), () => document.removeEventListener("visibilitychange", i)), [i]), t;
+}, c = o;
+export {
+  c as default
+};
+//# sourceMappingURL=use-visibility-change.js.map

package/dist/features/hooks/use-visibility-change.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-visibility-change.js","sources":["../../../src/features/hooks/use-visibility-change.tsx"],"sourcesContent":["import { useEffect, useState, useCallback } from 'react';\n\n/**\n * Custom hook to detect visibility change of the document.\n * Returns true if the document is visible, false otherwise.\n */\nconst useVisibilityChange = () => {\n  const [isVisible, setIsVisible] = useState(document.visibilityState === 'visible');\n\n  const onVisibilityChange = useCallback(() => {\n    const isVisibleState = document.visibilityState === 'visible';\n\n    setIsVisible(isVisibleState);\n  }, [setIsVisible]);\n\n  useEffect(() => {\n    document.addEventListener('visibilitychange', onVisibilityChange);\n\n    return () => document.removeEventListener('visibilitychange', onVisibilityChange);\n  }, [onVisibilityChange]);\n\n  return isVisible;\n};\n\nexport default useVisibilityChange;\n"],"names":["useVisibilityChange","isVisible","setIsVisible","useState","onVisibilityChange","useCallback","isVisibleState","useEffect","useVisibilityChange$1"],"mappings":";AAMA,MAAMA,IAAsB,MAAM;AAChC,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,SAAS,oBAAoB,SAAS,GAE3EC,IAAqBC,EAAY,MAAM;AACrC,UAAAC,IAAiB,SAAS,oBAAoB;AAEpD,IAAAJ,EAAaI,CAAc;AAAA,EAAA,GAC1B,CAACJ,CAAY,CAAC;AAEjB,SAAAK,EAAU,OACC,SAAA,iBAAiB,oBAAoBH,CAAkB,GAEzD,MAAM,SAAS,oBAAoB,oBAAoBA,CAAkB,IAC/E,CAACA,CAAkB,CAAC,GAEhBH;AACT,GAEAO,IAAeR;"}

package/dist/features/ui/constants/z-index.js

@@ -1,4 +1,4 @@
-const E = {
+const _ = {
   CHAPTER_CROWN_ICON: 4,
   CHAPTER_PLUS_ICON: 2,
   CHAPTER_PROGRESS_SVG: 2,
@@ -16,10 +16,13 @@ const E = {
   GOAL_CHAPTER_SHEETS_MENU: 4,
   JOURNEY_OVERLAY: 1e3,
   CHAPTER_COMPLETED_LOTTIE: 5,
+  EXTEND_CLASS_ANIMATION_1: 24,
+  EXTEND_CLASS_ANIMATION_2: 25,
+  EXTEND_CLASS_ANIMATION_3: 26,
   WINS_HEADER: 11
   // Header z-index for wins dashboard
 };
 export {
-  E as ZINDEX
+  _ as ZINDEX
 };
 //# sourceMappingURL=z-index.js.map

package/dist/features/ui/constants/z-index.js.map

@@ -1 +1 @@
-{"version":3,"file":"z-index.js","sources":["../../../../src/features/ui/constants/z-index.ts"],"sourcesContent":["const ZINDEX = {\n  CHAPTER_CROWN_ICON: 4,\n  CHAPTER_PLUS_ICON: 2,\n  CHAPTER_PROGRESS_SVG: 2,\n  LPAR_SHEET_ITEM_BOTTOM_DASH_BOX: 1,\n  LPAR_SHEET_ITEM_TOP_VERTICAL_ICON: 2,\n  MODAL: 20,\n  SAT_SUMMARY_SCORE: 25, //* SAT_SUMMARY_SCORE > MODAL\n  CANVAS_SCRIBBLING: 26, //* CANVAS_SCRIBBLING > Learnosity\n  TILE_CONTAINER: 30, //whiteboard\n  QUESTION_TIPS: -1,\n  DESMOS_CALCULATOR: 2,\n  GOAL_CHAPTER_SHEETS_MENU: 4,\n  JOURNEY_OVERLAY: 1000,\n  CHAPTER_COMPLETED_LOTTIE: 5,\n  WINS_HEADER: 11, // Header z-index for wins dashboard\n} as const;\n\nexport { ZINDEX };\n"],"names":["ZINDEX"],"mappings":"AAAA,MAAMA,IAAS;AAAA,EACb,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,iCAAiC;AAAA,EACjC,mCAAmC;AAAA,EACnC,OAAO;AAAA,EACP,mBAAmB;AAAA;AAAA,EACnB,mBAAmB;AAAA;AAAA,EACnB,gBAAgB;AAAA;AAAA,EAChB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,0BAA0B;AAAA,EAC1B,iBAAiB;AAAA,EACjB,0BAA0B;AAAA,EAC1B,aAAa;AAAA;AACf;"}
+{"version":3,"file":"z-index.js","sources":["../../../../src/features/ui/constants/z-index.ts"],"sourcesContent":["const ZINDEX = {\n  CHAPTER_CROWN_ICON: 4,\n  CHAPTER_PLUS_ICON: 2,\n  CHAPTER_PROGRESS_SVG: 2,\n  LPAR_SHEET_ITEM_BOTTOM_DASH_BOX: 1,\n  LPAR_SHEET_ITEM_TOP_VERTICAL_ICON: 2,\n  MODAL: 20,\n  SAT_SUMMARY_SCORE: 25, //* SAT_SUMMARY_SCORE > MODAL\n  CANVAS_SCRIBBLING: 26, //* CANVAS_SCRIBBLING > Learnosity\n  TILE_CONTAINER: 30, //whiteboard\n  QUESTION_TIPS: -1,\n  DESMOS_CALCULATOR: 2,\n  GOAL_CHAPTER_SHEETS_MENU: 4,\n  JOURNEY_OVERLAY: 1000,\n  CHAPTER_COMPLETED_LOTTIE: 5,\n  EXTEND_CLASS_ANIMATION_1: 24,\n  EXTEND_CLASS_ANIMATION_2: 25,\n  EXTEND_CLASS_ANIMATION_3: 26,\n  WINS_HEADER: 11, // Header z-index for wins dashboard\n} as const;\n\nexport { ZINDEX };\n"],"names":["ZINDEX"],"mappings":"AAAA,MAAMA,IAAS;AAAA,EACb,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,iCAAiC;AAAA,EACjC,mCAAmC;AAAA,EACnC,OAAO;AAAA,EACP,mBAAmB;AAAA;AAAA,EACnB,mBAAmB;AAAA;AAAA,EACnB,gBAAgB;AAAA;AAAA,EAChB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,0BAA0B;AAAA,EAC1B,iBAAiB;AAAA,EACjB,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,aAAa;AAAA;AACf;"}

package/dist/features/ui/timers/class-time/animate.js

@@ -0,0 +1,100 @@
+import { jsxs as u, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { memo as N, useState as k, useRef as w, useCallback as c, useEffect as f } from "react";
+import r from "styled-components";
+import O from "../../../../assets/line-icons/icons/plus.js";
+import D from "../../../hooks/use-audio-player.js";
+import R from "../../../hooks/use-previous.js";
+import X from "../../buttons/clickable/clickable.js";
+import a from "../../layout/flex-view.js";
+import m from "../../text/text.js";
+import I from "./animations/open-close.js";
+import { ANIMATION_TIME as i, TIME_LEFT_IDLE as F, LAST_FIVE as M, START_TIMER as y, EXTEND_IDLE as z, ALERT_AUDIO_LIST as V } from "./constants.js";
+const W = r(a)`
+  position: absolute;
+  top: -8px;
+  right: 8px;
+  z-index: ${({ theme: o }) => o.zIndex.EXTEND_CLASS_ANIMATION_3};
+`, v = r(m)`
+  padding-left: 4px;
+  padding-right: 8px;
+`, j = r(a)`
+  flex-flow: nowrap;
+  z-index: ${({ theme: o }) => o.zIndex.EXTEND_CLASS_ANIMATION_2};
+`, P = r(a)`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: ${({ theme: o }) => o.zIndex.EXTEND_CLASS_ANIMATION_1};
+`, B = (o) => {
+  const {
+    animateClock: t,
+    classStartedTime: E,
+    duration: x,
+    onExtendClass: _ = () => {
+    },
+    setAnimateClock: d,
+    setStartTimer: p,
+    showExtendIcon: C = !1
+  } = o, [$, s] = k(!1), l = w(null), A = R(t), T = D(V), n = Math.floor(x - (+/* @__PURE__ */ new Date() - E) / 1e3), h = C && n <= i.LAST_FIVE, L = c(() => {
+    d(!1);
+  }, [d]), b = c(() => {
+    p(!0), T("ALERT");
+  }, [T, p]), S = c(() => {
+    s(!1);
+  }, [s]);
+  return f(() => {
+    t && !A && (l.current = setTimeout(() => {
+      s(!0);
+    }, 1e3));
+  }, [t, A]), f(() => () => {
+    l.current && clearTimeout(l.current);
+  }, []), /* @__PURE__ */ u(g, { children: [
+    n <= i.LAST_FIVE && t && /* @__PURE__ */ e(P, {}),
+    /* @__PURE__ */ e(
+      I,
+      {
+        background: n <= i.LAST_FIVE ? "ORANGE_4" : "YELLOW_3",
+        onAnimationComplete: L,
+        onOpenAnimationComplete: b,
+        visible: t,
+        idleTime: F,
+        children: /* @__PURE__ */ u(
+          j,
+          {
+            $flexDirection: "row",
+            $alignItems: "center",
+            $width: "100%",
+            $justifyContent: "space-around",
+            $borderRadiusX: 1.25,
+            $gutterX: 0.35,
+            $gapX: 0.35,
+            $flexGapX: 0.25,
+            children: [
+              /* @__PURE__ */ e(m, { $renderAs: "ac3-black", children: n <= i.LAST_FIVE ? `0${M / 60}:00` : `${y / 60}:00` }),
+              /* @__PURE__ */ e(m, { $renderAs: "ac3-black", children: "Left" })
+            ]
+          }
+        )
+      }
+    ),
+    h && /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(
+      I,
+      {
+        onAnimationComplete: S,
+        background: "BLACK",
+        Icon: /* @__PURE__ */ e(X, { label: "Extend Class", onClick: _, children: /* @__PURE__ */ e(a, { $background: "WHITE", $borderRadiusX: 1.25, $borderColor: "BLACK_3", children: /* @__PURE__ */ e(O, { width: 16, height: 16 }) }) }),
+        size: 24,
+        visible: $,
+        idleTime: z,
+        children: /* @__PURE__ */ e(v, { $color: "WHITE", $renderAs: "body3", children: "Extend Class" })
+      }
+    ) })
+  ] });
+}, te = N(B);
+export {
+  te as default
+};
+//# sourceMappingURL=animate.js.map

package/dist/features/ui/timers/class-time/animate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.js","sources":["../../../../../src/features/ui/timers/class-time/animate.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useRef, memo } from 'react';\nimport styled from 'styled-components';\n\nimport PlusIcon from '../../../../assets/line-icons/icons/plus';\nimport useAudioPlayer from '../../../hooks/use-audio-player';\nimport usePrevious from '../../../hooks/use-previous';\nimport Clickable from '../../buttons/clickable/clickable';\nimport FlexView from '../../layout/flex-view';\nimport Text from '../../text/text';\nimport OpenCloseAnimation from './animations/open-close';\nimport {\n  ALERT_AUDIO_LIST,\n  ANIMATION_TIME,\n  EXTEND_IDLE,\n  LAST_FIVE,\n  START_TIMER,\n  TIME_LEFT_IDLE,\n} from './constants';\n\nconst IconWrapper = styled(FlexView)`\n  position: absolute;\n  top: -8px;\n  right: 8px;\n  z-index: ${({ theme }) => theme.zIndex.EXTEND_CLASS_ANIMATION_3};\n`;\n\nconst StyledText = styled(Text)`\n  padding-left: 4px;\n  padding-right: 8px;\n`;\n\nconst NoWrapRow = styled(FlexView)`\n  flex-flow: nowrap;\n  z-index: ${({ theme }) => theme.zIndex.EXTEND_CLASS_ANIMATION_2};\n`;\n\nconst OpacityWrapper = styled(FlexView)`\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: rgba(0, 0, 0, 0.4);\n  z-index: ${({ theme }) => theme.zIndex.EXTEND_CLASS_ANIMATION_1};\n`;\n\ninterface AnimateProps {\n  animateClock: boolean;\n  classStartedTime: number;\n  duration: number;\n  onExtendClass?: () => void;\n  setAnimateClock: (value: boolean) => void;\n  setStartTimer: (value: boolean) => void;\n  showExtendIcon?: boolean;\n}\n\nconst Animate = (props: AnimateProps) => {\n  const {\n    animateClock,\n    classStartedTime,\n    duration,\n    onExtendClass = () => {},\n    setAnimateClock,\n    setStartTimer,\n    showExtendIcon = false,\n  } = props;\n  const [animateTip, setAnimateTip] = useState(false);\n  const timer = useRef<NodeJS.Timeout | null>(null);\n\n  const previousAnimateClock = usePrevious(animateClock);\n  const playNotifSound = useAudioPlayer(ALERT_AUDIO_LIST);\n\n  const remainingTime = Math.floor(duration - (+new Date() - classStartedTime) / 1000); // in seconds\n  const showIcon = showExtendIcon && remainingTime <= ANIMATION_TIME.LAST_FIVE;\n\n  const onClockAnimationComplete = useCallback(() => {\n    setAnimateClock(false);\n  }, [setAnimateClock]);\n\n  const onOpenAnimationComplete = useCallback(() => {\n    setStartTimer(true);\n    playNotifSound('ALERT');\n  }, [playNotifSound, setStartTimer]);\n\n  const onAnimateComplete = useCallback(() => {\n    setAnimateTip(false);\n  }, [setAnimateTip]);\n\n  useEffect(() => {\n    if (animateClock && !previousAnimateClock) {\n      timer.current = setTimeout(() => {\n        setAnimateTip(true);\n      }, 1000);\n    }\n  }, [animateClock, previousAnimateClock]);\n\n  useEffect(() => {\n    return () => {\n      if (timer.current) {\n        clearTimeout(timer.current);\n      }\n    };\n  }, []);\n\n  return (\n    <>\n      {remainingTime <= ANIMATION_TIME.LAST_FIVE && animateClock && <OpacityWrapper />}\n      <OpenCloseAnimation\n        background={remainingTime <= ANIMATION_TIME.LAST_FIVE ? 'ORANGE_4' : 'YELLOW_3'}\n        onAnimationComplete={onClockAnimationComplete}\n        onOpenAnimationComplete={onOpenAnimationComplete}\n        visible={animateClock}\n        idleTime={TIME_LEFT_IDLE}\n      >\n        <NoWrapRow\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $width=\"100%\"\n          $justifyContent=\"space-around\"\n          $borderRadiusX={1.25}\n          $gutterX={0.35}\n          $gapX={0.35}\n          $flexGapX={0.25}\n        >\n          <Text $renderAs=\"ac3-black\">\n            {remainingTime <= ANIMATION_TIME.LAST_FIVE\n              ? `0${LAST_FIVE / 60}:00`\n              : `${START_TIMER / 60}:00`}\n          </Text>\n          <Text $renderAs=\"ac3-black\">Left</Text>\n        </NoWrapRow>\n      </OpenCloseAnimation>\n      {showIcon && (\n        <IconWrapper>\n          <OpenCloseAnimation\n            onAnimationComplete={onAnimateComplete}\n            background=\"BLACK\"\n            Icon={\n              <Clickable label=\"Extend Class\" onClick={onExtendClass}>\n                <FlexView $background=\"WHITE\" $borderRadiusX={1.25} $borderColor=\"BLACK_3\">\n                  <PlusIcon width={16} height={16} />\n                </FlexView>\n              </Clickable>\n            }\n            size={24}\n            visible={animateTip}\n            idleTime={EXTEND_IDLE}\n          >\n            <StyledText $color=\"WHITE\" $renderAs=\"body3\">\n              Extend Class\n            </StyledText>\n          </OpenCloseAnimation>\n        </IconWrapper>\n      )}\n    </>\n  );\n};\n\nexport default memo(Animate);\n"],"names":["IconWrapper","styled","FlexView","theme","StyledText","Text","NoWrapRow","OpacityWrapper","Animate","props","animateClock","classStartedTime","duration","onExtendClass","setAnimateClock","setStartTimer","showExtendIcon","animateTip","setAnimateTip","useState","timer","useRef","previousAnimateClock","usePrevious","playNotifSound","useAudioPlayer","ALERT_AUDIO_LIST","remainingTime","showIcon","ANIMATION_TIME","onClockAnimationComplete","useCallback","onOpenAnimationComplete","onAnimateComplete","useEffect","jsxs","Fragment","jsx","OpenCloseAnimation","TIME_LEFT_IDLE","LAST_FIVE","START_TIMER","Clickable","PlusIcon","EXTEND_IDLE","Animate$1","memo"],"mappings":"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"}

package/dist/features/ui/timers/class-time/animations/open-close.js

@@ -0,0 +1,93 @@
+import { jsxs as I, jsx as $ } from "react/jsx-runtime";
+import { memo as g, useState as p, useRef as y, useEffect as f } from "react";
+import d, { keyframes as w, css as h } from "styled-components";
+import x from "../../../layout/flex-view.js";
+const E = w`
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+`, R = w`
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+`, u = 1 * 1e3, X = 1.5 * 1e3, b = d(x)`
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+`, z = d.div`
+  position: absolute;
+  cursor: pointer;
+  z-index: 1;
+`, M = d(x)`
+  animation-name: ${({ $animate: t }) => t ? E : R};
+  max-width: fit-content;
+  animation-duration: ${u / 1e3}s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+  overflow: hidden;
+  white-space: nowrap;
+  height: 100%;
+  ${({ $isIcon: t, $size: i }) => t && h`
+      padding-left: ${i}px;
+    `};
+  ${({ $isVisible: t }) => !t && h`
+      visibility: hidden;
+    `};
+`, j = ({
+  background: t,
+  children: i,
+  Icon: n = null,
+  onAnimationComplete: s,
+  onOpenAnimationComplete: a,
+  size: T = null,
+  visible: r,
+  idleTime: l = X
+}) => {
+  const [e, m] = p(!1), o = y(!1);
+  return f(() => {
+    r && (o.current = !1, m(!0));
+  }, [r]), f(() => {
+    if (e) {
+      const c = setTimeout(() => {
+        o.current = !0, m(!1), a == null || a();
+      }, u + l);
+      return () => {
+        clearTimeout(c);
+      };
+    }
+  }, [e, a, l]), f(() => {
+    if (r && !e && o.current) {
+      const c = setTimeout(() => {
+        s == null || s();
+      }, u);
+      return () => {
+        clearTimeout(c);
+      };
+    }
+  }, [r, e, s]), /* @__PURE__ */ I(b, { $flexDirection: "row", $alignItems: "center", $borderRadius: 16, children: [
+    n && /* @__PURE__ */ $(z, { children: n }),
+    /* @__PURE__ */ $(
+      M,
+      {
+        $alignItems: "center",
+        $animate: e,
+        $background: t,
+        $borderRadius: 16,
+        $isIcon: !!n,
+        $isVisible: r,
+        $size: T,
+        children: i
+      }
+    )
+  ] });
+}, S = g(j);
+export {
+  S as default
+};
+//# sourceMappingURL=open-close.js.map

package/dist/features/ui/timers/class-time/animations/open-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"open-close.js","sources":["../../../../../../src/features/ui/timers/class-time/animations/open-close.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, memo } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport FlexView from '../../../layout/flex-view';\n\nconst FillAnimation = keyframes`\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0%);\n  }\n`;\n\nconst EmptyAnimation = keyframes`\n  0% {\n    transform: translateX(0%);\n  }\n  100% {\n    transform: translateX(-100%);\n  }\n`;\n\nconst ANIMATION_TIME = 1 * 1000; // 1 seconds\nconst IDLE_TIME = 1.5 * 1000;\n\nconst StyledRow = styled(FlexView)`\n  position: absolute;\n  z-index: 10;\n  overflow: hidden;\n`;\n\nconst IconWrapper = styled.div`\n  position: absolute;\n  cursor: pointer;\n  z-index: 1;\n`;\n\nconst Wrapper = styled(FlexView)<{\n  $animate: boolean;\n  $isIcon: boolean;\n  $isVisible: boolean;\n  $size: number | null;\n}>`\n  animation-name: ${({ $animate }) => ($animate ? FillAnimation : EmptyAnimation)};\n  max-width: fit-content;\n  animation-duration: ${ANIMATION_TIME / 1000}s;\n  animation-timing-function: ease-in-out;\n  animation-fill-mode: forwards;\n  overflow: hidden;\n  white-space: nowrap;\n  height: 100%;\n  ${({ $isIcon, $size }) =>\n    $isIcon &&\n    css`\n      padding-left: ${$size}px;\n    `};\n  ${({ $isVisible }) =>\n    !$isVisible &&\n    css`\n      visibility: hidden;\n    `};\n`;\n\ninterface OpenCloseAnimationProps {\n  background: 'ORANGE_4' | 'YELLOW_3' | 'BLACK';\n  children: React.ReactNode;\n  visible: boolean;\n  idleTime?: number;\n  Icon?: React.ReactNode;\n  onAnimationComplete?: () => void;\n  onOpenAnimationComplete?: () => void;\n  size?: number | null;\n}\n\nconst OpenCloseAnimation: React.FC<OpenCloseAnimationProps> = ({\n  background,\n  children,\n  Icon = null,\n  onAnimationComplete,\n  onOpenAnimationComplete,\n  size = null,\n  visible,\n  idleTime = IDLE_TIME,\n}) => {\n  const [animate, setAnimate] = useState(false);\n  const prevAnimate = useRef(false);\n\n  useEffect(() => {\n    if (visible) {\n      prevAnimate.current = false;\n      setAnimate(true);\n    }\n  }, [visible]);\n\n  useEffect(() => {\n    if (animate) {\n      const animateTimer = setTimeout(() => {\n        prevAnimate.current = true;\n        setAnimate(false);\n        onOpenAnimationComplete?.();\n      }, ANIMATION_TIME + idleTime);\n\n      return () => {\n        clearTimeout(animateTimer);\n      };\n    }\n  }, [animate, onOpenAnimationComplete, idleTime]);\n\n  useEffect(() => {\n    if (visible && !animate && prevAnimate.current) {\n      const hideTimer = setTimeout(() => {\n        onAnimationComplete?.();\n      }, ANIMATION_TIME);\n\n      return () => {\n        clearTimeout(hideTimer);\n      };\n    }\n  }, [visible, animate, onAnimationComplete]);\n\n  return (\n    <StyledRow $flexDirection=\"row\" $alignItems=\"center\" $borderRadius={16}>\n      {Icon && <IconWrapper>{Icon}</IconWrapper>}\n      <Wrapper\n        $alignItems=\"center\"\n        $animate={animate}\n        $background={background}\n        $borderRadius={16}\n        $isIcon={!!Icon}\n        $isVisible={visible}\n        $size={size}\n      >\n        {children}\n      </Wrapper>\n    </StyledRow>\n  );\n};\n\nexport default memo(OpenCloseAnimation);\n"],"names":["FillAnimation","keyframes","EmptyAnimation","ANIMATION_TIME","IDLE_TIME","StyledRow","styled","FlexView","IconWrapper","Wrapper","$animate","$isIcon","$size","css","$isVisible","OpenCloseAnimation","background","children","Icon","onAnimationComplete","onOpenAnimationComplete","size","visible","idleTime","animate","setAnimate","useState","prevAnimate","useRef","useEffect","animateTimer","hideTimer","jsx","OpenCloseAnimation$1","memo"],"mappings":";;;;AAKA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShBC,IAAiBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASjBE,IAAiB,IAAI,KACrBC,IAAY,MAAM,KAElBC,IAAYC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM3BC,IAAcF,EAAO;AAAA;AAAA;AAAA;AAAA,GAMrBG,IAAUH,EAAOC,CAAQ;AAAA,oBAMX,CAAC,EAAE,UAAAG,EAAA,MAAgBA,IAAWV,IAAgBE,CAAe;AAAA;AAAA,wBAEzDC,IAAiB,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMzC,CAAC,EAAE,SAAAQ,GAAS,OAAAC,EAAA,MACZD,KACAE;AAAA,sBACkBD,CAAK;AAAA,KACtB;AAAA,IACD,CAAC,EAAE,YAAAE,EAAW,MACd,CAACA,KACDD;AAAA;AAAA,KAEC;AAAA,GAcCE,IAAwD,CAAC;AAAA,EAC7D,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,UAAAC,IAAWnB;AACb,MAAM;AACJ,QAAM,CAACoB,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAcC,EAAO,EAAK;AAEhC,SAAAC,EAAU,MAAM;AACd,IAAIP,MACFK,EAAY,UAAU,IACtBF,EAAW,EAAI;AAAA,EACjB,GACC,CAACH,CAAO,CAAC,GAEZO,EAAU,MAAM;AACd,QAAIL,GAAS;AACL,YAAAM,IAAe,WAAW,MAAM;AACpC,QAAAH,EAAY,UAAU,IACtBF,EAAW,EAAK,GACUL,KAAA,QAAAA;AAAA,MAAA,GACzBjB,IAAiBoB,CAAQ;AAE5B,aAAO,MAAM;AACX,qBAAaO,CAAY;AAAA,MAAA;AAAA,IAE7B;AAAA,EACC,GAAA,CAACN,GAASJ,GAAyBG,CAAQ,CAAC,GAE/CM,EAAU,MAAM;AACd,QAAIP,KAAW,CAACE,KAAWG,EAAY,SAAS;AACxC,YAAAI,IAAY,WAAW,MAAM;AACX,QAAAZ,KAAA,QAAAA;AAAA,SACrBhB,CAAc;AAEjB,aAAO,MAAM;AACX,qBAAa4B,CAAS;AAAA,MAAA;AAAA,IAE1B;AAAA,EACC,GAAA,CAACT,GAASE,GAASL,CAAmB,CAAC,qBAGvCd,GAAU,EAAA,gBAAe,OAAM,aAAY,UAAS,eAAe,IACjE,UAAA;AAAA,IAAQa,KAAA,gBAAAc,EAACxB,KAAa,UAAKU,EAAA,CAAA;AAAA,IAC5B,gBAAAc;AAAA,MAACvB;AAAA,MAAA;AAAA,QACC,aAAY;AAAA,QACZ,UAAUe;AAAA,QACV,aAAaR;AAAA,QACb,eAAe;AAAA,QACf,SAAS,CAAC,CAACE;AAAA,QACX,YAAYI;AAAA,QACZ,OAAOD;AAAA,QAEN,UAAAJ;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ,GAEegB,IAAAC,EAAKnB,CAAkB;"}

package/dist/features/ui/timers/class-time/animations/ripple.js

@@ -0,0 +1,44 @@
+import { jsx as r } from "react/jsx-runtime";
+import { memo as a } from "react";
+import p, { css as $, keyframes as m } from "styled-components";
+import x from "../../../layout/flex-view.js";
+import { getTheme as d } from "../../../theme/get-theme.js";
+const f = d(), { colors: l } = f, u = (e) => {
+  const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
+  return t && t[1] && t[2] && t[3] ? [parseInt(t[1], 16), parseInt(t[2], 16), parseInt(t[3], 16)] : null;
+}, s = (e, t) => {
+  const n = u(e);
+  return n ? `rgba(${n.join(", ")}, ${t})` : null;
+}, c = (e) => m`
+  0% {
+    box-shadow: 
+      0 2px 5px ${e},
+      0 0 0 0 ${e},
+      0 0 0 2px ${s(e, 0.5)},
+      0 0 0 5px ${s(e, 0.5)};
+  }
+  100% {
+    box-shadow:
+      0 2px 5px ${s(e, 0.5)},
+      0 0 0 2px ${s(e, 0.5)},
+      0 0 0 5px ${s(e, 0.5)},
+      0 0 0 10px ${s(e, 0)};
+  }
+`, b = p.div`
+  ${({ $visible: e, $borderRadius: t, $color: n }) => e && $`
+      animation: ${c(n)} 1s linear infinite;
+      background: transparent;
+      border-radius: ${t}px;
+      z-index: 1;
+    `};
+`, g = ({
+  children: e,
+  visible: t = !1,
+  color: n = "YELLOW_1",
+  borderRadius: i = 24,
+  ...o
+}) => /* @__PURE__ */ r(x, { $position: "relative", $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ r(b, { $visible: t, $color: l[n], $borderRadius: i, ...o, children: e }) }), w = a(g);
+export {
+  w as default
+};
+//# sourceMappingURL=ripple.js.map

package/dist/features/ui/timers/class-time/animations/ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.js","sources":["../../../../../../src/features/ui/timers/class-time/animations/ripple.tsx"],"sourcesContent":["import type { TColorNames } from '../../../types';\n\nimport { memo, type ReactNode } from 'react';\nimport styled, { keyframes, css } from 'styled-components';\n\nimport FlexView from '../../../layout/flex-view';\nimport { getTheme } from '../../../theme/get-theme';\n\nconst theme = getTheme();\nconst { colors: COLORS } = theme;\n\nconst toRGB = (hex: string): number[] | null => {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n  return result && result[1] && result[2] && result[3]\n    ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n    : null;\n};\n\nconst toRGBA = (hex: string, alpha: number): string | null => {\n  const rgb = toRGB(hex);\n\n  return rgb ? `rgba(${rgb.join(', ')}, ${alpha})` : null;\n};\n\nconst pulse = (color: string) => keyframes`\n  0% {\n    box-shadow: \n      0 2px 5px ${color},\n      0 0 0 0 ${color},\n      0 0 0 2px ${toRGBA(color, 0.5)},\n      0 0 0 5px ${toRGBA(color, 0.5)};\n  }\n  100% {\n    box-shadow:\n      0 2px 5px ${toRGBA(color, 0.5)},\n      0 0 0 2px ${toRGBA(color, 0.5)},\n      0 0 0 5px ${toRGBA(color, 0.5)},\n      0 0 0 10px ${toRGBA(color, 0)};\n  }\n`;\n\ninterface PulseProps {\n  $visible: boolean;\n  $borderRadius: number;\n  $color: string;\n}\n\nconst Pulse = styled.div<PulseProps>`\n  ${({ $visible, $borderRadius, $color }) =>\n    $visible &&\n    css`\n      animation: ${pulse($color)} 1s linear infinite;\n      background: transparent;\n      border-radius: ${$borderRadius}px;\n      z-index: 1;\n    `};\n`;\n\ninterface PulsatingProps {\n  children: ReactNode;\n  visible?: boolean;\n  color?: TColorNames;\n  borderRadius?: number;\n}\n\nconst Pulsating = ({\n  children,\n  visible = false,\n  color = 'YELLOW_1',\n  borderRadius = 24,\n  ...other\n}: PulsatingProps) => (\n  <FlexView $position=\"relative\" $alignItems=\"center\" $justifyContent=\"center\">\n    <Pulse $visible={visible} $color={COLORS[color]} $borderRadius={borderRadius} {...other}>\n      {children}\n    </Pulse>\n  </FlexView>\n);\n\nexport default memo(Pulsating);\n"],"names":["theme","getTheme","COLORS","toRGB","hex","result","toRGBA","alpha","rgb","pulse","color","keyframes","Pulse","styled","$visible","$borderRadius","$color","css","Pulsating","children","visible","borderRadius","other","jsx","FlexView","Ripple","memo"],"mappings":";;;;;AAQA,MAAMA,IAAQC,EAAS,GACjB,EAAE,QAAQC,EAAW,IAAAF,GAErBG,IAAQ,CAACC,MAAiC;AACxC,QAAAC,IAAS,4CAA4C,KAAKD,CAAG;AAEnE,SAAOC,KAAUA,EAAO,CAAC,KAAKA,EAAO,CAAC,KAAKA,EAAO,CAAC,IAC/C,CAAC,SAASA,EAAO,CAAC,GAAG,EAAE,GAAG,SAASA,EAAO,CAAC,GAAG,EAAE,GAAG,SAASA,EAAO,CAAC,GAAG,EAAE,CAAC,IAC1E;AACN,GAEMC,IAAS,CAACF,GAAaG,MAAiC;AACtD,QAAAC,IAAML,EAAMC,CAAG;AAEd,SAAAI,IAAM,QAAQA,EAAI,KAAK,IAAI,CAAC,KAAKD,CAAK,MAAM;AACrD,GAEME,IAAQ,CAACC,MAAkBC;AAAA;AAAA;AAAA,kBAGfD,CAAK;AAAA,gBACPA,CAAK;AAAA,kBACHJ,EAAOI,GAAO,GAAG,CAAC;AAAA,kBAClBJ,EAAOI,GAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIlBJ,EAAOI,GAAO,GAAG,CAAC;AAAA,kBAClBJ,EAAOI,GAAO,GAAG,CAAC;AAAA,kBAClBJ,EAAOI,GAAO,GAAG,CAAC;AAAA,mBACjBJ,EAAOI,GAAO,CAAC,CAAC;AAAA;AAAA,GAU7BE,IAAQC,EAAO;AAAA,IACjB,CAAC,EAAE,UAAAC,GAAU,eAAAC,GAAe,QAAAC,QAC5BF,KACAG;AAAA,mBACeR,EAAMO,CAAM,CAAC;AAAA;AAAA,uBAETD,CAAa;AAAA;AAAA,KAE/B;AAAA,GAUCG,IAAY,CAAC;AAAA,EACjB,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAV,IAAQ;AAAA,EACR,cAAAW,IAAe;AAAA,EACf,GAAGC;AACL,MACE,gBAAAC,EAACC,KAAS,WAAU,YAAW,aAAY,UAAS,iBAAgB,UAClE,UAAC,gBAAAD,EAAAX,GAAA,EAAM,UAAUQ,GAAS,QAAQlB,EAAOQ,CAAK,GAAG,eAAeW,GAAe,GAAGC,GAC/E,UAAAH,EACH,CAAA,EACF,CAAA,GAGaM,IAAAC,EAAKR,CAAS;"}

package/dist/features/ui/timers/class-time/class-time-animations.js

@@ -0,0 +1,28 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import s from "styled-components";
+import t from "../../layout/flex-view.js";
+import l from "./animate.js";
+import a from "./animations/ripple.js";
+const f = s(t)`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: ${({ theme: i }) => i.zIndex.EXTEND_CLASS_ANIMATION_1};
+`, g = ({
+  children: i,
+  showRipple: r,
+  rippleColor: e,
+  showExtendOverlay: m,
+  warningProps: n
+}) => /* @__PURE__ */ p(t, { $position: "relative", $flexDirection: "row", $alignItems: "center", children: [
+  m && /* @__PURE__ */ o(f, {}),
+  /* @__PURE__ */ o(a, { color: e, visible: r, children: i }),
+  /* @__PURE__ */ o(l, { ...n })
+] });
+export {
+  g as default
+};
+//# sourceMappingURL=class-time-animations.js.map

package/dist/features/ui/timers/class-time/class-time-animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-time-animations.js","sources":["../../../../../src/features/ui/timers/class-time/class-time-animations.tsx"],"sourcesContent":["import type { TColorNames } from '../../types';\nimport type { ReactNode } from 'react';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../layout/flex-view';\nimport Animate from './animate';\nimport Ripple from './animations/ripple';\n\nconst OpacityWrapper = styled(FlexView)`\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: rgba(0, 0, 0, 0.4);\n  z-index: ${({ theme }) => theme.zIndex.EXTEND_CLASS_ANIMATION_1};\n`;\n\ninterface IClassTimeAnimationsProps {\n  children: ReactNode;\n  showRipple: boolean;\n  rippleColor: TColorNames;\n  showExtendOverlay: boolean;\n  warningProps: {\n    animateClock: boolean;\n    classStartedTime: number;\n    duration: number;\n    showExtendIcon: boolean;\n    onExtendClass?: () => void;\n    setAnimateClock: (value: boolean) => void;\n    setStartTimer: (value: boolean) => void;\n  };\n}\n\nconst ClassTimeAnimations = ({\n  children,\n  showRipple,\n  rippleColor,\n  showExtendOverlay,\n  warningProps,\n}: IClassTimeAnimationsProps) => {\n  return (\n    <FlexView $position=\"relative\" $flexDirection=\"row\" $alignItems=\"center\">\n      {showExtendOverlay && <OpacityWrapper />}\n      <Ripple color={rippleColor} visible={showRipple}>\n        {children}\n      </Ripple>\n      <Animate {...warningProps} />\n    </FlexView>\n  );\n};\n\nexport default ClassTimeAnimations;\n"],"names":["OpacityWrapper","styled","FlexView","theme","ClassTimeAnimations","children","showRipple","rippleColor","showExtendOverlay","warningProps","Ripple","jsx","Animate"],"mappings":";;;;;AASA,MAAMA,IAAiBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOzB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,wBAAwB;AAAA,GAmB3DC,IAAsB,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AACF,wBAEKP,GAAS,EAAA,WAAU,YAAW,gBAAe,OAAM,aAAY,UAC7D,UAAA;AAAA,EAAAM,uBAAsBR,GAAe,EAAA;AAAA,oBACrCU,GAAO,EAAA,OAAOH,GAAa,SAASD,GAClC,UAAAD,GACH;AAAA,EACA,gBAAAM,EAACC,GAAS,EAAA,GAAGH,GAAc;AAC7B,EAAA,CAAA;"}

package/dist/features/ui/timers/class-time/class-time.js

@@ -0,0 +1,34 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { memo as s } from "react";
+import n from "../../../../assets/line-icons/icons/clock2.js";
+import l from "../../../hooks/use-visibility-change.js";
+import i from "../../layout/flex-view.js";
+import c from "../clock/clock.js";
+import a from "../timer/timer.js";
+import p from "./class-time-animations.js";
+import { IconWrapper as f } from "./constants.js";
+import { useClassTimeLogic as $ } from "./use-class-time-logic.js";
+const d = (e) => {
+  const t = l(), o = $(e, t);
+  return o.shouldRender ? /* @__PURE__ */ r(i, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ r(p, { ...o.animationProps, children: /* @__PURE__ */ m(
+    i,
+    {
+      $flexDirection: "row",
+      $alignItems: "center",
+      $background: "GREY_1",
+      $borderRadiusX: 1.25,
+      $gutterX: 0.5,
+      $gapX: 0.25,
+      $flexGapX: 0.25,
+      $position: "relative",
+      children: [
+        /* @__PURE__ */ r(f, { $iconColor: o.clockColor, children: /* @__PURE__ */ r(n, {}) }),
+        o.startTimer ? /* @__PURE__ */ r(a, { ...o.timerProps }) : /* @__PURE__ */ r(c, { ...o.clockProps })
+      ]
+    }
+  ) }) }) : null;
+}, w = s(d);
+export {
+  w as default
+};
+//# sourceMappingURL=class-time.js.map

package/dist/features/ui/timers/class-time/class-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-time.js","sources":["../../../../../src/features/ui/timers/class-time/class-time.tsx"],"sourcesContent":["import type { IClassTimeProps } from './class-time-types';\n\nimport { memo } from 'react';\n\nimport Clock2Icon from '../../../../assets/line-icons/icons/clock2';\nimport useVisibilityChange from '../../../hooks/use-visibility-change';\nimport FlexView from '../../layout/flex-view';\nimport Clock from '../clock/clock';\nimport Timer from '../timer/timer';\nimport ClassTimeAnimations from './class-time-animations';\nimport { IconWrapper } from './constants';\nimport { useClassTimeLogic } from './use-class-time-logic';\n\nconst ClassTime = (props: IClassTimeProps) => {\n  const isTabActive = useVisibilityChange();\n\n  const logic = useClassTimeLogic(props, isTabActive);\n\n  if (!logic.shouldRender) {\n    return null;\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n      <ClassTimeAnimations {...logic.animationProps}>\n        <FlexView\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $background=\"GREY_1\"\n          $borderRadiusX={1.25}\n          $gutterX={0.5}\n          $gapX={0.25}\n          $flexGapX={0.25}\n          $position=\"relative\"\n        >\n          <IconWrapper $iconColor={logic.clockColor}>\n            <Clock2Icon />\n          </IconWrapper>\n          {logic.startTimer ? <Timer {...logic.timerProps} /> : <Clock {...logic.clockProps} />}\n        </FlexView>\n      </ClassTimeAnimations>\n    </FlexView>\n  );\n};\n\nexport default memo(ClassTime);\n"],"names":["ClassTime","props","isTabActive","useVisibilityChange","logic","useClassTimeLogic","jsx","FlexView","ClassTimeAnimations","jsxs","IconWrapper","Clock2Icon","Timer","Clock","classTime","memo"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAY,CAACC,MAA2B;AAC5C,QAAMC,IAAcC,KAEdC,IAAQC,EAAkBJ,GAAOC,CAAW;AAE9C,SAACE,EAAM,eAKT,gBAAAE,EAACC,GAAS,EAAA,gBAAe,OAAM,aAAY,UACzC,UAAC,gBAAAD,EAAAE,GAAA,EAAqB,GAAGJ,EAAM,gBAC7B,UAAA,gBAAAK;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,aAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW;AAAA,MACX,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAD,EAACI,KAAY,YAAYN,EAAM,YAC7B,UAAA,gBAAAE,EAACK,IAAW,CAAA,GACd;AAAA,QACCP,EAAM,aAAc,gBAAAE,EAAAM,GAAA,EAAO,GAAGR,EAAM,YAAY,IAAM,gBAAAE,EAAAO,GAAA,EAAO,GAAGT,EAAM,WAAY,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAEvF,CAAA,EACF,CAAA,IAtBO;AAwBX,GAEeU,IAAAC,EAAKf,CAAS;"}

package/dist/features/ui/timers/class-time/constants.js

@@ -0,0 +1,30 @@
+import e from "styled-components";
+import n from "../../layout/flex-view.js";
+const _ = e(n)`
+  svg {
+    color: ${(t) => t.theme.colors[t.$iconColor]};
+  }
+`, o = 60 * 10, r = 60 * 5, I = {
+  LAST_TEN: o + 2,
+  LAST_FIVE: r + 2
+}, L = 2e3, A = 1500, l = [
+  {
+    name: "ALERT",
+    url: "https://static.qumath.in/static/intel-student/cmpress/alert.mp3"
+  }
+], i = ({
+  remainingTime: t,
+  extendedTime: c,
+  extendedTimeStarted: s
+}) => t <= r ? "ORANGE_3" : t <= o || c || s ? "YELLOW_3" : "BLACK_3";
+export {
+  l as ALERT_AUDIO_LIST,
+  I as ANIMATION_TIME,
+  A as EXTEND_IDLE,
+  _ as IconWrapper,
+  r as LAST_FIVE,
+  o as START_TIMER,
+  L as TIME_LEFT_IDLE,
+  i as getClockColor
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/ui/timers/class-time/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../src/features/ui/timers/class-time/constants.ts"],"sourcesContent":["import type { TColorNames } from '../../types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../layout/flex-view';\n\nconst IconWrapper = styled(FlexView)<{ $iconColor: TColorNames }>`\n  svg {\n    color: ${props => props.theme.colors[props.$iconColor]};\n  }\n`;\n\nconst START_TIMER = 60 * 10; // 10 minutes\nconst LAST_FIVE = 60 * 5; // 5 minutes\nconst ANIMATION_TIME = {\n  LAST_TEN: START_TIMER + 2,\n  LAST_FIVE: LAST_FIVE + 2,\n};\n\nconst TIME_LEFT_IDLE = 2000;\nconst EXTEND_IDLE = 1500;\n\ninterface IClockColorParams {\n  remainingTime: number;\n  extendedTime: number;\n  extendedTimeStarted: boolean;\n}\n\nexport const ALERT_AUDIO_LIST = [\n  {\n    name: 'ALERT',\n    url: 'https://static.qumath.in/static/intel-student/cmpress/alert.mp3',\n  },\n];\n\nconst getClockColor = ({\n  remainingTime,\n  extendedTime,\n  extendedTimeStarted,\n}: IClockColorParams): TColorNames => {\n  if (remainingTime <= LAST_FIVE) return 'ORANGE_3';\n\n  if (remainingTime <= START_TIMER || extendedTime || extendedTimeStarted) return 'YELLOW_3';\n\n  return 'BLACK_3';\n};\n\nexport {\n  getClockColor,\n  IconWrapper,\n  ANIMATION_TIME,\n  START_TIMER,\n  LAST_FIVE,\n  TIME_LEFT_IDLE,\n  EXTEND_IDLE,\n};\n"],"names":["IconWrapper","styled","FlexView","props","START_TIMER","LAST_FIVE","ANIMATION_TIME","TIME_LEFT_IDLE","EXTEND_IDLE","ALERT_AUDIO_LIST","getClockColor","remainingTime","extendedTime","extendedTimeStarted"],"mappings":";;AAMM,MAAAA,IAAcC,EAAOC,CAAQ;AAAA;AAAA,aAEtB,OAASC,EAAM,MAAM,OAAOA,EAAM,UAAU,CAAC;AAAA;AAAA,GAIpDC,IAAc,KAAK,IACnBC,IAAY,KAAK,GACjBC,IAAiB;AAAA,EACrB,UAAUF,IAAc;AAAA,EACxB,WAAWC,IAAY;AACzB,GAEME,IAAiB,KACjBC,IAAc,MAQPC,IAAmB;AAAA,EAC9B;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF,GAEMC,IAAgB,CAAC;AAAA,EACrB,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,qBAAAC;AACF,MACMF,KAAiBN,IAAkB,aAEnCM,KAAiBP,KAAeQ,KAAgBC,IAA4B,aAEzE;"}