@cuemath/leap 3.3.14 → 3.3.15-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.js

@@ -0,0 +1,130 @@
+import { jsx as c, jsxs as D } from "react/jsx-runtime";
+import { memo as X, useMemo as d, useState as x, useCallback as p, useEffect as E, useRef as G } from "react";
+import j from "../../../../assets/line-icons/icons/clock2.js";
+import W from "../../../hooks/use-visibility-change.js";
+import S from "../../layout/flex-view.js";
+import Y from "../clock/clock.js";
+import q from "../timer/timer.js";
+import z from "./animate.js";
+import B from "./animations/ripple.js";
+import { START_TIMER as H, getClockColor as J, ANIMATION_TIME as k, LAST_FIVE as K, IconWrapper as P } from "./constants.js";
+const Q = (M) => {
+  const {
+    classDuration: e,
+    classStartedTime: i,
+    extendedTime: n,
+    ongoing: y,
+    onComplete: o,
+    onExtendClass: L,
+    onExtendedTimeStart: f,
+    showExtendIcon: F = !1
+  } = M, m = (+/* @__PURE__ */ new Date() - +i) / 1e3, s = W(), h = d(() => n ? Math.floor(e - m) <= n * 60 : !1, [e, n, m]), [a, N] = x(h), l = Math.floor(e - m), C = d(
+    () => e + +i / 1e3,
+    [e, i]
+  ), $ = d(() => !!(m >= e - H || a || n), [m, e, a, n]), [I, A] = x(!1), [R, b] = x($), v = J({
+    remainingTime: l,
+    extendedTime: n || 0,
+    extendedTimeStarted: a
+  }), T = p(() => {
+    N(!0), f == null || f();
+  }, [f]), u = p(() => {
+    A(!0);
+  }, []), w = d(
+    () => [
+      {
+        at: k.LAST_TEN,
+        callback: u,
+        id: "rem-10min"
+      },
+      {
+        at: k.LAST_FIVE,
+        callback: u,
+        id: "rem-5min"
+      }
+    ],
+    [u]
+  ), O = p(() => {
+    if (n && !a) {
+      T();
+      return;
+    }
+    o == null || o();
+  }, [n, a, o, T]);
+  E(() => {
+    const t = +/* @__PURE__ */ new Date() / 1e3 >= +i / 1e3 + e && e;
+    s && t && (o == null || o());
+  }, [e, i, s, o]), E(() => {
+    s && h && !a && T();
+  }, [s, T, a, h]), E(() => {
+    e && i && s && b($);
+  }, [i, e, $, s]);
+  const _ = G(/* @__PURE__ */ new Set()), r = d(
+    () => w.filter((t) => {
+      const g = t.id || `multi-reminder-${t.at}`;
+      return !_.current.has(g) && l >= t.at;
+    }).sort((t, g) => g.at - t.at)[0],
+    [w, l]
+  ), V = p(() => {
+    if (!r) return;
+    const t = r.id || `multi-reminder-${r.at}`;
+    _.current.add(t), typeof r.callback == "function" && r.callback();
+  }, [r]);
+  return !y || m >= 0 && l <= 0 ? null : /* @__PURE__ */ c(S, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ D(S, { $position: "relative", $flexDirection: "row", $alignItems: "center", children: [
+    /* @__PURE__ */ c(
+      z,
+      {
+        animateClock: I,
+        classStartedTime: +i,
+        duration: e,
+        onExtendClass: L,
+        setAnimateClock: A,
+        setStartTimer: b,
+        showExtendIcon: !a && F
+      }
+    ),
+    /* @__PURE__ */ c(
+      B,
+      {
+        color: l <= K ? "ORANGE_3" : "YELLOW_3",
+        visible: !I && R,
+        children: /* @__PURE__ */ D(
+          S,
+          {
+            $flexDirection: "row",
+            $alignItems: "center",
+            $background: "GREY_1",
+            $borderRadiusX: 1.25,
+            $gutterX: 0.5,
+            $gapX: 0.25,
+            $flexGapX: 0.25,
+            $position: "relative",
+            children: [
+              /* @__PURE__ */ c(P, { $iconColor: v, children: /* @__PURE__ */ c(j, {}) }),
+              s && (R ? /* @__PURE__ */ c(
+                q,
+                {
+                  endTime: C,
+                  onComplete: O,
+                  reminder: r == null ? void 0 : r.at,
+                  onReminder: V
+                },
+                C
+              ) : /* @__PURE__ */ c(
+                Y,
+                {
+                  completionTime: e - k.LAST_TEN,
+                  onComplete: u,
+                  startedOn: new Date(i)
+                }
+              ))
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
+}, me = X(Q);
+export {
+  me 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 { useState, useCallback, useEffect, useMemo, useRef, 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 Animate from './animate';\nimport Ripple from './animations/ripple';\nimport { ANIMATION_TIME, getClockColor, IconWrapper, LAST_FIVE, START_TIMER } from './constants';\n\nconst ClassTime = (props: IClassTimeProps) => {\n  const {\n    classDuration,\n    classStartedTime,\n    extendedTime,\n    ongoing,\n    onComplete,\n    onExtendClass,\n    onExtendedTimeStart,\n    showExtendIcon = false,\n  } = props;\n\n  const elapsedTime = (+new Date() - +classStartedTime) / 1000;\n  const isTabActive = useVisibilityChange();\n\n  const hasExtendedTimeStarted = useMemo(() => {\n    if (!extendedTime) return false;\n\n    const orgRemainingTime = Math.floor(classDuration - elapsedTime);\n\n    return orgRemainingTime <= extendedTime * 60;\n  }, [classDuration, extendedTime, elapsedTime]);\n\n  const [extendedTimeStarted, setExtendedTimeStarted] = useState(hasExtendedTimeStarted);\n  const remainingTime = Math.floor(classDuration - elapsedTime); // in seconds\n  const endTime = useMemo(\n    () => classDuration + +classStartedTime / 1000,\n    [classDuration, classStartedTime],\n  );\n\n  const canStartTimer = useMemo(() => {\n    return !!(elapsedTime >= classDuration - START_TIMER || extendedTimeStarted || extendedTime);\n  }, [elapsedTime, classDuration, extendedTimeStarted, extendedTime]);\n\n  const [animateClock, setAnimateClock] = useState(false);\n  const [startTimer, setStartTimer] = useState(canStartTimer);\n  const clockColor = getClockColor({\n    remainingTime,\n    extendedTime: extendedTime || 0,\n    extendedTimeStarted,\n  });\n\n  const handleStartExtendedTime = useCallback(() => {\n    setExtendedTimeStarted(true);\n    onExtendedTimeStart?.();\n  }, [onExtendedTimeStart]);\n\n  const handleStartAnimation = useCallback(() => {\n    setAnimateClock(true);\n  }, []);\n\n  const animationReminders = useMemo(\n    () => [\n      {\n        at: ANIMATION_TIME.LAST_TEN,\n        callback: handleStartAnimation,\n        id: 'rem-10min',\n      },\n\n      {\n        at: ANIMATION_TIME.LAST_FIVE,\n        callback: handleStartAnimation,\n        id: 'rem-5min',\n      },\n    ],\n    [handleStartAnimation],\n  );\n\n  const handleTimerComplete = useCallback(() => {\n    if (extendedTime && !extendedTimeStarted) {\n      handleStartExtendedTime();\n\n      return;\n    }\n    onComplete?.();\n  }, [extendedTime, extendedTimeStarted, onComplete, handleStartExtendedTime]);\n\n  useEffect(() => {\n    const isClassCompleted =\n      +new Date() / 1000 >= +classStartedTime / 1000 + classDuration && classDuration;\n\n    if (isTabActive && isClassCompleted) {\n      onComplete?.();\n    }\n  }, [classDuration, classStartedTime, isTabActive, onComplete]);\n\n  useEffect(() => {\n    if (isTabActive && hasExtendedTimeStarted && !extendedTimeStarted) {\n      handleStartExtendedTime();\n    }\n  }, [isTabActive, handleStartExtendedTime, extendedTimeStarted, hasExtendedTimeStarted]);\n\n  useEffect(() => {\n    if (classDuration && classStartedTime && isTabActive) {\n      setStartTimer(canStartTimer);\n    }\n  }, [classStartedTime, classDuration, canStartTimer, isTabActive]);\n\n  const firedReminders = useRef<Set<string>>(new Set());\n  const nextReminder = useMemo(\n    () =>\n      animationReminders\n        .filter((r: (typeof animationReminders)[number]) => {\n          const key = r.id || `multi-reminder-${r.at}`;\n          const alreadyFired = firedReminders.current.has(key);\n\n          return !alreadyFired && remainingTime >= r.at;\n        })\n        .sort((a: { at: number }, b: { at: number }) => b.at - a.at)[0],\n    [animationReminders, remainingTime],\n  );\n\n  const handleMultiReminder = useCallback(() => {\n    if (!nextReminder) return;\n\n    const key = nextReminder.id || `multi-reminder-${nextReminder.at}`;\n\n    firedReminders.current.add(key);\n\n    if (typeof nextReminder.callback === 'function') {\n      nextReminder.callback();\n    }\n  }, [nextReminder]);\n\n  if (!ongoing || (elapsedTime >= 0 && remainingTime <= 0)) {\n    return null;\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n      <FlexView $position=\"relative\" $flexDirection=\"row\" $alignItems=\"center\">\n        <Animate\n          animateClock={animateClock}\n          classStartedTime={+classStartedTime}\n          duration={classDuration}\n          onExtendClass={onExtendClass}\n          setAnimateClock={setAnimateClock}\n          setStartTimer={setStartTimer}\n          showExtendIcon={!extendedTimeStarted && showExtendIcon}\n        />\n        <Ripple\n          color={remainingTime <= LAST_FIVE ? 'ORANGE_3' : 'YELLOW_3'}\n          visible={!animateClock && startTimer}\n        >\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={clockColor}>\n              <Clock2Icon />\n            </IconWrapper>\n            {isTabActive &&\n              (startTimer ? (\n                <Timer\n                  endTime={endTime}\n                  key={endTime}\n                  onComplete={handleTimerComplete}\n                  reminder={nextReminder?.at}\n                  onReminder={handleMultiReminder}\n                />\n              ) : (\n                <Clock\n                  completionTime={classDuration - ANIMATION_TIME.LAST_TEN}\n                  onComplete={handleStartAnimation}\n                  startedOn={new Date(classStartedTime)}\n                />\n              ))}\n          </FlexView>\n        </Ripple>\n      </FlexView>\n    </FlexView>\n  );\n};\n\nexport default memo(ClassTime);\n"],"names":["ClassTime","props","classDuration","classStartedTime","extendedTime","ongoing","onComplete","onExtendClass","onExtendedTimeStart","showExtendIcon","elapsedTime","isTabActive","useVisibilityChange","hasExtendedTimeStarted","useMemo","extendedTimeStarted","setExtendedTimeStarted","useState","remainingTime","endTime","canStartTimer","START_TIMER","animateClock","setAnimateClock","startTimer","setStartTimer","clockColor","getClockColor","handleStartExtendedTime","useCallback","handleStartAnimation","animationReminders","ANIMATION_TIME","handleTimerComplete","useEffect","isClassCompleted","firedReminders","useRef","nextReminder","r","key","a","b","handleMultiReminder","jsx","FlexView","jsxs","Animate","Ripple","LAST_FIVE","IconWrapper","Clock2Icon","Timer","Clock","classTime","memo"],"mappings":"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"}