@cuemath/leap 3.2.32 → 3.2.33-as2

package/dist/features/class-timer/clock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clock.js","sources":["../../../src/features/class-timer/clock.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../ui/types';\n\nimport { useState, useEffect, useCallback, useRef, memo } from 'react';\n\nimport Text from '../ui/text/text';\nimport { formatTimeInHHMMSS } from '../utils/utils';\nimport { getTime, TIMEOUT_INTERVAL } from './constants';\n\ninterface IClockProps {\n  completionTime?: number | null;\n  onComplete?: () => void;\n  startedOn: Date;\n  textVariant?: TTextVariants;\n  textColor?: TColorNames;\n}\n\nconst Clock = ({\n  completionTime = null,\n  onComplete = () => {},\n  startedOn,\n  textVariant = 'ab2-bold',\n  textColor,\n}: IClockProps) => {\n  const [elapsedTime, setElapsedTime] = useState(getTime(startedOn));\n  const timerRef = useRef<NodeJS.Timeout | null>(null);\n  const formattedTime = formatTimeInHHMMSS(elapsedTime);\n  const start = useRef<number | null>(null);\n  const timer = useCallback(() => {\n    const timestamp = performance.now();\n\n    const elapsed = timestamp - (start.current || 0);\n\n    if (elapsed >= 1000) {\n      setElapsedTime(getTime(startedOn));\n\n      start.current = performance.now();\n    }\n\n    timerRef.current = setTimeout(timer, TIMEOUT_INTERVAL);\n  }, [startedOn]);\n\n  useEffect(() => {\n    if (completionTime && elapsedTime >= completionTime && elapsedTime <= completionTime + 5) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n\n      onComplete();\n    }\n  }, [completionTime, elapsedTime, onComplete]);\n\n  useEffect(() => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n\n    if (start.current === null) {\n      start.current = performance.now();\n    }\n\n    timerRef.current = setTimeout(timer, TIMEOUT_INTERVAL);\n\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, [timer]);\n\n  if (elapsedTime < 0) return null;\n\n  return (\n    <Text $width={formattedTime.length > 5 ? 71 : 57} $renderAs={textVariant} $color={textColor}>\n      {formattedTime}\n    </Text>\n  );\n};\n\nexport default memo(Clock);\n"],"names":["Clock","completionTime","onComplete","startedOn","textVariant","textColor","elapsedTime","setElapsedTime","useState","getTime","timerRef","useRef","formattedTime","formatTimeInHHMMSS","start","timer","useCallback","TIMEOUT_INTERVAL","useEffect","jsx","Text","Clock$1","memo"],"mappings":";;;;;AAgBA,MAAMA,IAAQ,CAAC;AAAA,EACb,gBAAAC,IAAiB;AAAA,EACjB,YAAAC,IAAa,MAAM;AAAA,EAAC;AAAA,EACpB,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AACF,MAAmB;AACjB,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAASC,EAAQN,CAAS,CAAC,GAC3DO,IAAWC,EAA8B,IAAI,GAC7CC,IAAgBC,EAAmBP,CAAW,GAC9CQ,IAAQH,EAAsB,IAAI,GAClCI,IAAQC,EAAY,MAAM;AAK9B,IAJkB,YAAY,SAEDF,EAAM,WAAW,MAE/B,QACEP,EAAAE,EAAQN,CAAS,CAAC,GAE3BW,EAAA,UAAU,YAAY,QAGrBJ,EAAA,UAAU,WAAWK,GAAOE,CAAgB;AAAA,EAAA,GACpD,CAACd,CAAS,CAAC;AAgCV,SA9BJe,EAAU,MAAM;AACd,IAAIjB,KAAkBK,KAAeL,KAAkBK,KAAeL,IAAiB,MACjFS,EAAS,YACX,aAAaA,EAAS,OAAO,GAC7BA,EAAS,UAAU,OAGVR;EAEZ,GAAA,CAACD,GAAgBK,GAAaJ,CAAU,CAAC,GAE5CgB,EAAU,OACJR,EAAS,YACX,aAAaA,EAAS,OAAO,GAC7BA,EAAS,UAAU,OAGjBI,EAAM,YAAY,SACdA,EAAA,UAAU,YAAY,QAGrBJ,EAAA,UAAU,WAAWK,GAAOE,CAAgB,GAE9C,MAAM;AACX,IAAIP,EAAS,WACX,aAAaA,EAAS,OAAO;AAAA,EAC/B,IAED,CAACK,CAAK,CAAC,GAENT,IAAc,IAAU,OAGzB,gBAAAa,EAAAC,GAAA,EAAK,QAAQR,EAAc,SAAS,IAAI,KAAK,IAAI,WAAWR,GAAa,QAAQC,GAC/E,UACHO,EAAA,CAAA;AAEJ,GAEeS,IAAAC,EAAKtB,CAAK;"}

package/dist/features/class-timer/constants.js

@@ -0,0 +1,27 @@
+import c from "styled-components";
+import n from "../ui/layout/flex-view.js";
+const s = c(n)`
+  svg {
+    color: ${(o) => o.theme.colors[o.$iconColor]};
+  }
+`, t = 60 * 10, e = 60 * 5, L = {
+  LAST_TEN: t + 2,
+  LAST_FIVE: e + 2
+}, A = 2e3, l = 1500, i = 250, m = ({
+  remainingTime: o,
+  updateWithExtendedTime: r,
+  extendedTime: T,
+  extendedTimeStarted: E
+}) => o <= e ? "ORANGE_3" : o <= t || r && T || E ? "YELLOW_3" : "BLACK_3", M = (o) => Math.floor(((/* @__PURE__ */ new Date()).getTime() - o.getTime()) / 1e3);
+export {
+  L as ANIMATION_TIME,
+  l as EXTEND_IDLE,
+  s as IconWrapper,
+  e as LAST_FIVE,
+  t as START_TIMER,
+  i as TIMEOUT_INTERVAL,
+  A as TIME_LEFT_IDLE,
+  m as getClockColor,
+  M as getTime
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/class-timer/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/features/class-timer/constants.ts"],"sourcesContent":["import type { TColorNames } from '../ui/types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../ui/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;\nconst TIMEOUT_INTERVAL = 250;\n\ninterface IClockColorParams {\n  remainingTime: number;\n  updateWithExtendedTime: boolean;\n  extendedTime: number;\n  extendedTimeStarted: boolean;\n}\n\nconst getClockColor = ({\n  remainingTime,\n  updateWithExtendedTime,\n  extendedTime,\n  extendedTimeStarted,\n}: IClockColorParams): TColorNames => {\n  if (remainingTime <= LAST_FIVE) return 'ORANGE_3';\n\n  if (\n    remainingTime <= START_TIMER ||\n    (updateWithExtendedTime && extendedTime) ||\n    extendedTimeStarted\n  )\n    return 'YELLOW_3';\n\n  return 'BLACK_3';\n};\n\nconst getTime = (startedOn: Date): number => {\n  return Math.floor((new Date().getTime() - startedOn.getTime()) / 1000);\n};\n\nexport {\n  getClockColor,\n  getTime,\n  IconWrapper,\n  ANIMATION_TIME,\n  START_TIMER,\n  LAST_FIVE,\n  TIME_LEFT_IDLE,\n  EXTEND_IDLE,\n  TIMEOUT_INTERVAL,\n};\n"],"names":["IconWrapper","styled","FlexView","props","START_TIMER","LAST_FIVE","ANIMATION_TIME","TIME_LEFT_IDLE","EXTEND_IDLE","TIMEOUT_INTERVAL","getClockColor","remainingTime","updateWithExtendedTime","extendedTime","extendedTimeStarted","getTime","startedOn"],"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,MACdC,IAAmB,KASnBC,IAAgB,CAAC;AAAA,EACrB,eAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,qBAAAC;AACF,MACMH,KAAiBN,IAAkB,aAGrCM,KAAiBP,KAChBQ,KAA0BC,KAC3BC,IAEO,aAEF,WAGHC,IAAU,CAACC,MACR,KAAK,QAAO,oBAAI,KAAK,GAAE,YAAYA,EAAU,QAAQ,KAAK,GAAI;"}

package/dist/features/class-timer/timer.js

@@ -0,0 +1,68 @@
+import { jsxs as I, jsx as n } from "react/jsx-runtime";
+import { memo as b, useState as A, useRef as f, useCallback as E, useEffect as p } from "react";
+import M from "styled-components";
+import R from "../../assets/line-icons/icons/clock2.js";
+import k from "../ui/layout/flex-view.js";
+import $ from "../ui/text/text.js";
+import { formatTimeInHHMMSS as X } from "../utils/utils.js";
+import { TIMEOUT_INTERVAL as T, IconWrapper as D } from "./constants.js";
+const G = M(k)`
+  border-radius: 20px;
+  position: relative;
+  z-index: 7;
+  gap: 8px;
+`, S = ({
+  styledTimer: d = !1,
+  backgroundColor: h = "GREY_1",
+  endTime: c,
+  // Default 1 minute from now
+  onComplete: u = () => {
+  },
+  onReminder: i,
+  reminder: m,
+  iconColor: g = "ORANGE_4",
+  textColor: a = "BLACK",
+  textVariant: s = "ac3-black"
+}) => {
+  const [e, w] = A(Math.ceil(c - Date.now() / 1e3)), r = f(null), t = f(null), l = E(() => {
+    if (performance.now() - (t.current || 0) >= 1e3) {
+      const x = Math.ceil(c - Date.now() / 1e3);
+      w(x), t.current = performance.now();
+    }
+    r.current = setTimeout(l, T);
+  }, [c]);
+  p(() => (r.current && (clearTimeout(r.current), r.current = null), t.current === null && (t.current = performance.now()), r.current = setTimeout(l, T), () => {
+    r.current && clearTimeout(r.current);
+  }), [l]), p(() => {
+    m && i && e === m && i(), e <= 0 && (r.current && (clearTimeout(r.current), r.current = null), u());
+  }, [m, i, u, e]);
+  const o = X(e);
+  return d ? /* @__PURE__ */ I(
+    G,
+    {
+      $flexDirection: "row",
+      $alignItems: "center",
+      $background: h,
+      $borderRadiusX: 1.25,
+      $gutterX: 0.75,
+      $gapX: 0.15,
+      $flexGapX: 0.25,
+      children: [
+        /* @__PURE__ */ n(D, { $iconColor: g, children: /* @__PURE__ */ n(R, {}) }),
+        /* @__PURE__ */ n(
+          $,
+          {
+            $width: o.length > 5 ? 71 : 57,
+            $renderAs: s,
+            $color: a,
+            children: o
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ n($, { $width: o.length > 5 ? 71 : 57, $renderAs: s, $color: a, children: o });
+}, z = b(S);
+export {
+  z as default
+};
+//# sourceMappingURL=timer.js.map

package/dist/features/class-timer/timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.js","sources":["../../../src/features/class-timer/timer.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../ui/types';\n\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport Clock2Icon from '../../assets/line-icons/icons/clock2';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\nimport { formatTimeInHHMMSS } from '../utils/utils';\nimport { IconWrapper, TIMEOUT_INTERVAL } from './constants';\n\ninterface ITimeWrapperProps {\n  backgroundColor?: TColorNames;\n}\n\nconst TimeWrapper = styled(FlexView)<ITimeWrapperProps>`\n  border-radius: 20px;\n  position: relative;\n  z-index: 7;\n  gap: 8px;\n`;\n\ninterface ITimerProps {\n  styledTimer?: boolean;\n  backgroundColor?: TColorNames;\n  endTime: number;\n  onComplete?: () => void;\n  onReminder?: () => void;\n  reminder?: number;\n  iconColor?: TColorNames;\n  textColor?: TColorNames;\n  textVariant?: TTextVariants;\n}\n\nconst Timer = ({\n  styledTimer = false,\n  backgroundColor = 'GREY_1',\n  endTime, // Default 1 minute from now\n  onComplete = () => {},\n  onReminder,\n  reminder,\n  iconColor = 'ORANGE_4',\n  textColor = 'BLACK',\n  textVariant = 'ac3-black',\n}: ITimerProps) => {\n  const [remainingTime, setRemainingTime] = useState(Math.ceil(endTime - Date.now() / 1000));\n  const timerRef = useRef<NodeJS.Timeout | null>(null);\n  const start = useRef<number | null>(null);\n  const timer = useCallback(() => {\n    const timestamp = performance.now();\n    const elapsed = timestamp - (start.current || 0);\n\n    if (elapsed >= 1000) {\n      // only if 1s has elapsed\n      const rt = Math.ceil(endTime - Date.now() / 1000);\n\n      setRemainingTime(rt);\n      start.current = performance.now();\n    }\n\n    timerRef.current = setTimeout(timer, TIMEOUT_INTERVAL);\n  }, [endTime]);\n\n  useEffect(() => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n\n    if (start.current === null) {\n      start.current = performance.now();\n    }\n\n    timerRef.current = setTimeout(timer, TIMEOUT_INTERVAL);\n\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, [timer]);\n\n  useEffect(() => {\n    if (reminder && onReminder && remainingTime === reminder) {\n      onReminder();\n    }\n\n    if (remainingTime <= 0) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n      onComplete();\n    }\n  }, [reminder, onReminder, onComplete, remainingTime]);\n  const formattedTime = formatTimeInHHMMSS(remainingTime);\n\n  if (styledTimer) {\n    return (\n      <TimeWrapper\n        $flexDirection=\"row\"\n        $alignItems=\"center\"\n        $background={backgroundColor}\n        $borderRadiusX={1.25}\n        $gutterX={0.75}\n        $gapX={0.15}\n        $flexGapX={0.25}\n      >\n        <IconWrapper $iconColor={iconColor}>\n          <Clock2Icon />\n        </IconWrapper>\n        <Text\n          $width={formattedTime.length > 5 ? 71 : 57}\n          $renderAs={textVariant}\n          $color={textColor}\n        >\n          {formattedTime}\n        </Text>\n      </TimeWrapper>\n    );\n  }\n\n  return (\n    <Text $width={formattedTime.length > 5 ? 71 : 57} $renderAs={textVariant} $color={textColor}>\n      {formattedTime}\n    </Text>\n  );\n};\n\nexport default memo(Timer);\n"],"names":["TimeWrapper","styled","FlexView","Timer","styledTimer","backgroundColor","endTime","onComplete","onReminder","reminder","iconColor","textColor","textVariant","remainingTime","setRemainingTime","useState","timerRef","useRef","start","timer","useCallback","rt","TIMEOUT_INTERVAL","useEffect","formattedTime","formatTimeInHHMMSS","jsxs","jsx","IconWrapper","Clock2Icon","Text","Timer$1","memo"],"mappings":";;;;;;;;AAeA,MAAMA,IAAcC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAmB7BC,IAAQ,CAAC;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,iBAAAC,IAAkB;AAAA,EAClB,SAAAC;AAAA;AAAA,EACA,YAAAC,IAAa,MAAM;AAAA,EAAC;AAAA,EACpB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAChB,MAAmB;AACjB,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,KAAK,KAAKT,IAAU,KAAK,QAAQ,GAAI,CAAC,GACnFU,IAAWC,EAA8B,IAAI,GAC7CC,IAAQD,EAAsB,IAAI,GAClCE,IAAQC,EAAY,MAAM;AAI9B,QAHkB,YAAY,SACDF,EAAM,WAAW,MAE/B,KAAM;AAEnB,YAAMG,IAAK,KAAK,KAAKf,IAAU,KAAK,IAAA,IAAQ,GAAI;AAEhD,MAAAQ,EAAiBO,CAAE,GACbH,EAAA,UAAU,YAAY;IAC9B;AAES,IAAAF,EAAA,UAAU,WAAWG,GAAOG,CAAgB;AAAA,EAAA,GACpD,CAAChB,CAAO,CAAC;AAEZ,EAAAiB,EAAU,OACJP,EAAS,YACX,aAAaA,EAAS,OAAO,GAC7BA,EAAS,UAAU,OAGjBE,EAAM,YAAY,SACdA,EAAA,UAAU,YAAY,QAGrBF,EAAA,UAAU,WAAWG,GAAOG,CAAgB,GAE9C,MAAM;AACX,IAAIN,EAAS,WACX,aAAaA,EAAS,OAAO;AAAA,EAC/B,IAED,CAACG,CAAK,CAAC,GAEVI,EAAU,MAAM;AACV,IAAAd,KAAYD,KAAcK,MAAkBJ,KACnCD,KAGTK,KAAiB,MACfG,EAAS,YACX,aAAaA,EAAS,OAAO,GAC7BA,EAAS,UAAU,OAEVT;KAEZ,CAACE,GAAUD,GAAYD,GAAYM,CAAa,CAAC;AAC9C,QAAAW,IAAgBC,EAAmBZ,CAAa;AAEtD,SAAIT,IAEA,gBAAAsB;AAAA,IAAC1B;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,aAAaK;AAAA,MACb,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAsB,EAACC,GAAY,EAAA,YAAYlB,GACvB,UAAA,gBAAAiB,EAACE,IAAW,CAAA,GACd;AAAA,QACA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,QAAQN,EAAc,SAAS,IAAI,KAAK;AAAA,YACxC,WAAWZ;AAAA,YACX,QAAQD;AAAA,YAEP,UAAAa;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAMH,gBAAAG,EAAAG,GAAA,EAAK,QAAQN,EAAc,SAAS,IAAI,KAAK,IAAI,WAAWZ,GAAa,QAAQD,GAC/E,UACHa,EAAA,CAAA;AAEJ,GAEeO,IAAAC,EAAK7B,CAAK;"}

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

@@ -15,7 +15,10 @@ const _ = {
   DESMOS_CALCULATOR: 2,
   GOAL_CHAPTER_SHEETS_MENU: 4,
   JOURNEY_OVERLAY: 1e3,
-  CHAPTER_COMPLETED_LOTTIE: 5
+  CHAPTER_COMPLETED_LOTTIE: 5,
+  EXTEND_CLASS_ANIMATION_1: 24,
+  EXTEND_CLASS_ANIMATION_2: 25,
+  EXTEND_CLASS_ANIMATION_3: 26
 };
 export {
   _ as ZINDEX

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} 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;AAC5B;"}
+{"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} 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;AAC5B;"}

package/dist/features/ui/drawer/drawer-styled.js

@@ -10,6 +10,7 @@ const a = o.div`
   height: 100%;
   z-index: ${({ $zIndex: t }) => t ?? 999};
   pointer-events: ${({ $isOpen: t }) => t ? "auto" : "none"};
+  overflow: hidden;
 `, s = o(e)`
   position: absolute;
   top: 0;
@@ -19,7 +20,8 @@ const a = o.div`
   transform: ${({ $isOpen: t, $position: i }) => t ? "translateX(0)" : i === "left" ? "translateX(-100%)" : "translateX(100%)"};
   transition: transform 0.3s ease-in-out;
   height: 100%;
-`, p = o(e)`
+  overflow-y: auto;
+`, l = o(e)`
   position: absolute;
   inset: 0;
   backdrop-filter: blur(40px);
@@ -27,7 +29,7 @@ const a = o.div`
   transition: opacity 0.3s ease-in-out;
 `;
 export {
-  p as DrawerBackdrop,
+  l as DrawerBackdrop,
   a as DrawerContainer,
   s as DrawerPanel
 };

package/dist/features/ui/drawer/drawer-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-styled.js","sources":["../../../../src/features/ui/drawer/drawer-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\n\ninterface DrawerContainerProps {\n  $isOpen: boolean;\n  $position: 'left' | 'right';\n  $zIndex?: number;\n}\n\ninterface DrawerPanelProps extends DrawerContainerProps {\n  $drawerWidth: number | string;\n}\n\nexport const DrawerContainer = styled.div<DrawerContainerProps>`\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: ${({ $position }) => ($position === 'left' ? 0 : 'auto')};\n  right: ${({ $position }) => ($position === 'right' ? 0 : 'auto')};\n  width: 100%;\n  height: 100%;\n  z-index: ${({ $zIndex }) => $zIndex ?? 999};\n  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};\n`;\n\nexport const DrawerPanel = styled(FlexView)<DrawerPanelProps>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  ${({ $position }) => ($position === 'left' ? 'left: 0;' : 'right: 0;')}\n  width: ${({ $drawerWidth }) =>\n    typeof $drawerWidth === 'number' ? `${$drawerWidth}px` : $drawerWidth};\n  transform: ${({ $isOpen, $position }) =>\n    $isOpen ? 'translateX(0)' : $position === 'left' ? 'translateX(-100%)' : 'translateX(100%)'};\n  transition: transform 0.3s ease-in-out;\n  height: 100%;\n`;\n\nexport const DrawerBackdrop = styled(FlexView)<{ $isOpen: boolean }>`\n  position: absolute;\n  inset: 0;\n  backdrop-filter: blur(40px);\n  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};\n  transition: opacity 0.3s ease-in-out;\n`;\n"],"names":["DrawerContainer","styled","$position","$zIndex","$isOpen","DrawerPanel","FlexView","$drawerWidth","DrawerBackdrop"],"mappings":";;AAcO,MAAMA,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA,UAI5B,CAAC,EAAE,WAAAC,QAAiBA,MAAc,SAAS,IAAI,MAAO;AAAA,WACrD,CAAC,EAAE,WAAAA,QAAiBA,MAAc,UAAU,IAAI,MAAO;AAAA;AAAA;AAAA,aAGrD,CAAC,EAAE,SAAAC,QAAcA,KAAW,GAAG;AAAA,oBACxB,CAAC,EAAE,SAAAC,EAAA,MAAeA,IAAU,SAAS,MAAO;AAAA,GAGnDC,IAAcJ,EAAOK,CAAQ;AAAA;AAAA;AAAA;AAAA,IAItC,CAAC,EAAE,WAAAJ,QAAiBA,MAAc,SAAS,aAAa,WAAY;AAAA,WAC7D,CAAC,EAAE,cAAAK,EACV,MAAA,OAAOA,KAAiB,WAAW,GAAGA,CAAY,OAAOA,CAAY;AAAA,eAC1D,CAAC,EAAE,SAAAH,GAAS,WAAAF,QACvBE,IAAU,kBAAkBF,MAAc,SAAS,sBAAsB,kBAAkB;AAAA;AAAA;AAAA,GAKlFM,IAAiBP,EAAOK,CAAQ;AAAA;AAAA;AAAA;AAAA,aAIhC,CAAC,EAAE,SAAAF,EAAA,MAAeA,IAAU,IAAI,CAAE;AAAA;AAAA;"}
+{"version":3,"file":"drawer-styled.js","sources":["../../../../src/features/ui/drawer/drawer-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\n\ninterface DrawerContainerProps {\n  $isOpen: boolean;\n  $position: 'left' | 'right';\n  $zIndex?: number;\n}\n\ninterface DrawerPanelProps extends DrawerContainerProps {\n  $drawerWidth: number | string;\n}\n\nexport const DrawerContainer = styled.div<DrawerContainerProps>`\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: ${({ $position }) => ($position === 'left' ? 0 : 'auto')};\n  right: ${({ $position }) => ($position === 'right' ? 0 : 'auto')};\n  width: 100%;\n  height: 100%;\n  z-index: ${({ $zIndex }) => $zIndex ?? 999};\n  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};\n  overflow: hidden;\n`;\n\nexport const DrawerPanel = styled(FlexView)<DrawerPanelProps>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  ${({ $position }) => ($position === 'left' ? 'left: 0;' : 'right: 0;')}\n  width: ${({ $drawerWidth }) =>\n    typeof $drawerWidth === 'number' ? `${$drawerWidth}px` : $drawerWidth};\n  transform: ${({ $isOpen, $position }) =>\n    $isOpen ? 'translateX(0)' : $position === 'left' ? 'translateX(-100%)' : 'translateX(100%)'};\n  transition: transform 0.3s ease-in-out;\n  height: 100%;\n  overflow-y: auto;\n`;\n\nexport const DrawerBackdrop = styled(FlexView)<{ $isOpen: boolean }>`\n  position: absolute;\n  inset: 0;\n  backdrop-filter: blur(40px);\n  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};\n  transition: opacity 0.3s ease-in-out;\n`;\n"],"names":["DrawerContainer","styled","$position","$zIndex","$isOpen","DrawerPanel","FlexView","$drawerWidth","DrawerBackdrop"],"mappings":";;AAcO,MAAMA,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA,UAI5B,CAAC,EAAE,WAAAC,QAAiBA,MAAc,SAAS,IAAI,MAAO;AAAA,WACrD,CAAC,EAAE,WAAAA,QAAiBA,MAAc,UAAU,IAAI,MAAO;AAAA;AAAA;AAAA,aAGrD,CAAC,EAAE,SAAAC,QAAcA,KAAW,GAAG;AAAA,oBACxB,CAAC,EAAE,SAAAC,EAAA,MAAeA,IAAU,SAAS,MAAO;AAAA;AAAA,GAInDC,IAAcJ,EAAOK,CAAQ;AAAA;AAAA;AAAA;AAAA,IAItC,CAAC,EAAE,WAAAJ,QAAiBA,MAAc,SAAS,aAAa,WAAY;AAAA,WAC7D,CAAC,EAAE,cAAAK,EACV,MAAA,OAAOA,KAAiB,WAAW,GAAGA,CAAY,OAAOA,CAAY;AAAA,eAC1D,CAAC,EAAE,SAAAH,GAAS,WAAAF,QACvBE,IAAU,kBAAkBF,MAAc,SAAS,sBAAsB,kBAAkB;AAAA;AAAA;AAAA;AAAA,GAMlFM,IAAiBP,EAAOK,CAAQ;AAAA;AAAA;AAAA;AAAA,aAIhC,CAAC,EAAE,SAAAF,EAAA,MAAeA,IAAU,IAAI,CAAE;AAAA;AAAA;"}

package/dist/features/utils/utils.js

@@ -1,22 +1,22 @@
-import { addYears as s } from "../../node_modules/date-fns/addYears.js";
-const i = (r) => Array.isArray(r) && r.length > 0, c = (r) => {
-  const t = (a) => a.toString().padStart(2, "0"), o = Math.floor(r / 3600), e = Math.floor(r % 3600 / 60), n = r % 60;
-  return o > 0 ? `${t(o)}:${t(e)}:${t(n)}` : `${t(e)}:${t(n)}`;
-}, l = (r) => {
-  let t = null;
-  return { promise: new Promise((e) => {
-    t = setTimeout(() => {
-      e("resolved");
-    }, r);
-  }), timerId: t };
-}, p = () => {
-  const t = s(/* @__PURE__ */ new Date(), 1);
-  return Math.floor(t.getTime() / 1e3);
+import { addYears as m } from "../../node_modules/date-fns/addYears.js";
+const c = (t) => Array.isArray(t) && t.length > 0, l = (t, e = !0) => {
+  const r = (s) => s.toString().padStart(2, "0"), o = Math.floor(t / 3600), n = Math.floor(t % 3600 / 60), a = t % 60;
+  return e ? o > 0 ? `${r(o)}:${r(n)}:${r(a)}` : `${r(n)}:${r(a)}` : `${r(n)}:${r(a)}`;
+}, p = (t) => {
+  let e = null;
+  return { promise: new Promise((o) => {
+    e = setTimeout(() => {
+      o("resolved");
+    }, t);
+  }), timerId: e };
+}, u = () => {
+  const e = m(/* @__PURE__ */ new Date(), 1);
+  return Math.floor(e.getTime() / 1e3);
 };
 export {
-  l as delay,
-  p as epochTimestampAfterOneYear,
-  c as formatTimeInHHMMSS,
-  i as isNonEmptyArray
+  p as delay,
+  u as epochTimestampAfterOneYear,
+  l as formatTimeInHHMMSS,
+  c as isNonEmptyArray
 };
 //# sourceMappingURL=utils.js.map

package/dist/features/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/features/utils/utils.ts"],"sourcesContent":["import { addYears } from 'date-fns';\n\nconst isNonEmptyArray = (array: unknown) => {\n  return Array.isArray(array) && array.length > 0;\n};\n\n// format the time in HH:MM:SS\nconst formatTimeInHHMMSS = (seconds: number) => {\n  const pad = (num: number) => num.toString().padStart(2, '0');\n\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = seconds % 60;\n\n  return h > 0 ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;\n};\n\nconst delay = (delayInMs: number) => {\n  let timerId: ReturnType<typeof setTimeout> | null = null;\n  const promise = new Promise(res => {\n    timerId = setTimeout(() => {\n      res('resolved');\n    }, delayInMs);\n  });\n\n  return { promise, timerId };\n};\n\nconst epochTimestampAfterOneYear = () => {\n  const today = new Date();\n  const oneYearLater = addYears(today, 1);\n\n  return Math.floor(oneYearLater.getTime() / 1000);\n};\n\nexport { isNonEmptyArray, formatTimeInHHMMSS, delay, epochTimestampAfterOneYear };\n"],"names":["isNonEmptyArray","array","formatTimeInHHMMSS","seconds","pad","num","h","m","s","delay","delayInMs","timerId","res","epochTimestampAfterOneYear","oneYearLater","addYears"],"mappings":";AAEM,MAAAA,IAAkB,CAACC,MAChB,MAAM,QAAQA,CAAK,KAAKA,EAAM,SAAS,GAI1CC,IAAqB,CAACC,MAAoB;AACxC,QAAAC,IAAM,CAACC,MAAgBA,EAAI,WAAW,SAAS,GAAG,GAAG,GAErDC,IAAI,KAAK,MAAMH,IAAU,IAAI,GAC7BI,IAAI,KAAK,MAAOJ,IAAU,OAAQ,EAAE,GACpCK,IAAIL,IAAU;AAEb,SAAAG,IAAI,IAAI,GAAGF,EAAIE,CAAC,CAAC,IAAIF,EAAIG,CAAC,CAAC,IAAIH,EAAII,CAAC,CAAC,KAAK,GAAGJ,EAAIG,CAAC,CAAC,IAAIH,EAAII,CAAC,CAAC;AACtE,GAEMC,IAAQ,CAACC,MAAsB;AACnC,MAAIC,IAAgD;AAO7C,SAAA,EAAE,SANO,IAAI,QAAQ,CAAOC,MAAA;AACjC,IAAAD,IAAU,WAAW,MAAM;AACzB,MAAAC,EAAI,UAAU;AAAA,OACbF,CAAS;AAAA,EAAA,CACb,GAEiB,SAAAC;AACpB,GAEME,IAA6B,MAAM;AAEjC,QAAAC,IAAeC,sBADH,QACmB,CAAC;AAEtC,SAAO,KAAK,MAAMD,EAAa,YAAY,GAAI;AACjD;"}
+{"version":3,"file":"utils.js","sources":["../../../src/features/utils/utils.ts"],"sourcesContent":["import { addYears } from 'date-fns';\n\nconst isNonEmptyArray = (array: unknown) => {\n  return Array.isArray(array) && array.length > 0;\n};\n\n// format the time in HH:MM:SS\nconst formatTimeInHHMMSS = (seconds: number, includeHours: boolean = true) => {\n  const pad = (num: number) => num.toString().padStart(2, '0');\n\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = seconds % 60;\n\n  if (!includeHours) {\n    return `${pad(m)}:${pad(s)}`;\n  }\n\n  return h > 0 ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;\n};\n\nconst delay = (delayInMs: number) => {\n  let timerId: ReturnType<typeof setTimeout> | null = null;\n  const promise = new Promise(res => {\n    timerId = setTimeout(() => {\n      res('resolved');\n    }, delayInMs);\n  });\n\n  return { promise, timerId };\n};\n\nconst epochTimestampAfterOneYear = () => {\n  const today = new Date();\n  const oneYearLater = addYears(today, 1);\n\n  return Math.floor(oneYearLater.getTime() / 1000);\n};\n\nexport { isNonEmptyArray, formatTimeInHHMMSS, delay, epochTimestampAfterOneYear };\n"],"names":["isNonEmptyArray","array","formatTimeInHHMMSS","seconds","includeHours","pad","num","h","m","s","delay","delayInMs","timerId","res","epochTimestampAfterOneYear","oneYearLater","addYears"],"mappings":";AAEM,MAAAA,IAAkB,CAACC,MAChB,MAAM,QAAQA,CAAK,KAAKA,EAAM,SAAS,GAI1CC,IAAqB,CAACC,GAAiBC,IAAwB,OAAS;AACtE,QAAAC,IAAM,CAACC,MAAgBA,EAAI,WAAW,SAAS,GAAG,GAAG,GAErDC,IAAI,KAAK,MAAMJ,IAAU,IAAI,GAC7BK,IAAI,KAAK,MAAOL,IAAU,OAAQ,EAAE,GACpCM,IAAIN,IAAU;AAEpB,SAAKC,IAIEG,IAAI,IAAI,GAAGF,EAAIE,CAAC,CAAC,IAAIF,EAAIG,CAAC,CAAC,IAAIH,EAAII,CAAC,CAAC,KAAK,GAAGJ,EAAIG,CAAC,CAAC,IAAIH,EAAII,CAAC,CAAC,KAH3D,GAAGJ,EAAIG,CAAC,CAAC,IAAIH,EAAII,CAAC,CAAC;AAI9B,GAEMC,IAAQ,CAACC,MAAsB;AACnC,MAAIC,IAAgD;AAO7C,SAAA,EAAE,SANO,IAAI,QAAQ,CAAOC,MAAA;AACjC,IAAAD,IAAU,WAAW,MAAM;AACzB,MAAAC,EAAI,UAAU;AAAA,OACbF,CAAS;AAAA,EAAA,CACb,GAEiB,SAAAC;AACpB,GAEME,IAA6B,MAAM;AAEjC,QAAAC,IAAeC,sBADH,QACmB,CAAC;AAEtC,SAAO,KAAK,MAAMD,EAAa,YAAY,GAAI;AACjD;"}

package/dist/index.d.ts

@@ -320,10 +320,14 @@ export declare const CircularStepWrapper: NamedExoticComponent<ICircularStepWrap
 
 export declare const ClaimUserAccount: NamedExoticComponent<IClaimUserAccountProps>;
 
+export declare const ClassTime: MemoExoticComponent<(props: IClassTimeProps) => JSX.Element | null>;
+
 export declare const Clickable: React_2.FC<IClickableProps>;
 
 export declare const ClipboardIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
+export declare const Clock: MemoExoticComponent<({ completionTime, onComplete, startedOn, textVariant, textColor, }: IClockProps) => JSX.Element | null>;
+
 export declare const Clock2Icon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const ClockIcon: React.FC<React.SVGProps<SVGSVGElement>>;
@@ -569,6 +573,8 @@ declare interface FlexViewProps {
     $flex?: number;
 }
 
+export declare const formatTimeInHHMMSS: (seconds: number, includeHours?: boolean) => string;
+
 export declare interface Game extends BaseProject {
     isPlayed: boolean;
 }
@@ -628,6 +634,7 @@ export declare const GIF: {
     GAMES: string;
     JIGII_WAVE: string;
     LEARNING_SESSION: string;
+    LEARNING_SESSION_GRID_BG: string;
     MAX_WAVE: string;
     PUZZLES: string;
     SCHOOL_SUCCESS: string;
@@ -641,7 +648,9 @@ export declare const GIF: {
     TRACK_PROGRESS: string;
     VINNIE_WAVE: string;
     WAY_FORWARD: string;
+    WAY_FORWARD_GRID_BG: string;
     YOUR_GOALS: string;
+    YOUR_GOALS_GRID_BG: string;
 };
 
 declare const GOAL_CATEGORY: {
@@ -1272,6 +1281,25 @@ export declare interface IClassTimeAlertConfig {
     onComplete: () => void;
 }
 
+declare interface IClassTimeProps {
+    backgroundColor?: TColorNames;
+    onAnimation?: () => void;
+    onComplete?: () => void;
+    onExtendClass?: () => void;
+    onExtendedTimeStart?: () => void;
+    onTMinusOne?: () => void;
+    showExtendIcon?: boolean;
+    showExtendText?: boolean;
+    status?: {
+        class_duration: number;
+        classStartedTime: Date;
+        extended_time: number;
+        ongoing: boolean;
+    } | null;
+    updateWithExtendedTime?: boolean;
+    multiReminders: MultiReminder[];
+}
+
 export declare interface IClickableAnalyticsProps {
     label?: string;
     analyticsLabel?: string;
@@ -1285,6 +1313,14 @@ declare interface IClickableProps extends IClickableAnalyticsProps {
     children: React_2.ReactNode;
 }
 
+declare interface IClockProps {
+    completionTime?: number | null;
+    onComplete?: () => void;
+    startedOn: Date;
+    textVariant?: TTextVariants;
+    textColor?: TColorNames;
+}
+
 declare interface ICoachMarkCompletion {
     CIRCLE_ACTIVITIES_INTRO_JOURNEY: boolean;
     CIRCLE_LEADERBOARD_INTRO_JOURNEY: boolean;
@@ -2118,13 +2154,19 @@ export declare const ILLUSTRATIONS: {
     ALIEN_2: string;
     ALIEN_3: string;
     ALIEN_4: string;
+    ARROW_BOARD_GREEN: string;
     BLUE_CLIP: string;
+    BOOK_CHECKED_GREEN: string;
+    BOOK_CHECKED_ORANGE: string;
+    BOOK_CHECKED_PURPLE: string;
     BOOK_GREEN: string;
     BOOK_OPEN_BLUE: string;
     BOOK_ORANGE: string;
     BOOK_YELLOW: string;
     BULLET_YELLOW: string;
     CALENDAR_BLUE: string;
+    CALENDAR_CHECK_GREEN: string;
+    CALENDAR_CROSS_ORANGE: string;
     CALENDAR_GRAY: string;
     CALENDAR_GREEN: string;
     CALENDAR_PURPLE: string;
@@ -2158,6 +2200,7 @@ export declare const ILLUSTRATIONS: {
     DURATION_90MIN_GRAY: string;
     EARTH_GREEN: string;
     ELLIPSE_CLIP: string;
+    EQUAL_OUTLINED: string;
     FEMALE_AVATAR: string;
     GAME_PLAY: string;
     GLOBE_WITH_BLUE_FILL: string;
@@ -2168,6 +2211,9 @@ export declare const ILLUSTRATIONS: {
     GREEN_BALLOON: string;
     GREEN_FACE: string;
     HANDSHAKE: string;
+    HANDSHAKE_GREEN: string;
+    HEART_OUTLINED: string;
+    KNOWLEDGE_BLUE: string;
     LEARNED_SHIELD_GRAY: string;
     LEARNED_SHIELD_GREEN: string;
     LEARNT: string;
@@ -2206,6 +2252,8 @@ export declare const ILLUSTRATIONS: {
     ORANGE_FACE: string;
     PARENT_AVATAR: string;
     PEOPLE_WITH_ORANGE_FILL: string;
+    PLATFORM_GREEN: string;
+    PLATFORM_PURPLE: string;
     PLAY: string;
     PLAY_ICON: string;
     POINTS_SUM: string;
@@ -2221,6 +2269,8 @@ export declare const ILLUSTRATIONS: {
     PUZZLE_PATTERN_PURPLE: string;
     PUZZLE_PATTERN_YELLOW: string;
     PUZZLE_STUDENT: string;
+    RADIAL_GRADIENT_BG: string;
+    RADIAL_GRADIENT_BG_2: string;
     REFUND_POLICY: string;
     REFUND_POLICY_WITH_HEADPHONE: string;
     REPORT_404: string;
@@ -2230,10 +2280,12 @@ export declare const ILLUSTRATIONS: {
     SMILEY: string;
     STAR_ORANGE: string;
     STAR_ORANGE_FILLED: string;
+    STAR_OUTLINED: string;
     STAR_WITH_GREEN_FILL: string;
     STREAK_GREEN: string;
     STREAK_WHITE: string;
     STRIPE_BLURPLE: string;
+    STUDENT_AVATAR: string;
     TEST_DIFFICULTY_EASY: string;
     TEST_DIFFICULTY_HARD: string;
     TEST_DIFFICULTY_MEDIUM: string;
@@ -2243,6 +2295,7 @@ export declare const ILLUSTRATIONS: {
     TROPHY_BLUE_FILLED: string;
     TROPHY_CIRCLE: string;
     TROPHY_GREEN: string;
+    TROPHY_OUTLINED: string;
     TRUSTPILOT: string;
     TWO_STARS_FILLED: string;
     UP_ARROW: string;
@@ -3824,6 +3877,18 @@ declare interface ITimeLeftTimelineProps {
     showRemainingTime?: boolean;
 }
 
+declare interface ITimerProps {
+    styledTimer?: boolean;
+    backgroundColor?: TColorNames;
+    endTime: number;
+    onComplete?: () => void;
+    onReminder?: () => void;
+    reminder?: number;
+    iconColor?: TColorNames;
+    textColor?: TColorNames;
+    textVariant?: TTextVariants;
+}
+
 declare interface ITimeStampsResponseModel {
     current: number;
     start_timestamp: number;
@@ -4496,6 +4561,7 @@ export declare const LOTTIE: {
     BRONZE_1: string;
     BRONZE_2: string;
     BRONZE_3: string;
+    CALENDAR_HOUR_GLASS_ORANGE: string;
     CENT: string;
     CHAPTER_COMPLETED: string;
     CIRCULAR_LOADER: string;
@@ -4601,6 +4667,8 @@ export declare const LOTTIE: {
     TABLE_MODE_STAR: string;
     TABLE_SEGMENT_STAR: string;
     TARGET_ACHIEVED_TEXT: string;
+    TEACHER_FOUND: string;
+    TEACHER_SEARCH: string;
     TEACHER_VALIDATION: string;
     TEST: string;
     TOTAL_STREAK: string;
@@ -4652,6 +4720,13 @@ export declare const MoreVerticalIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const MorningIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
+declare interface MultiReminder {
+    at: number;
+    callback: () => void;
+    id?: string;
+    persist?: boolean;
+}
+
 export declare const MultiTabBlocker: FC<PropsWithChildren<IMultiTabBlockerProps>>;
 
 export declare const Next2Icon: React.FC<React.SVGProps<SVGSVGElement>>;
@@ -5510,6 +5585,8 @@ export declare const TickIcon: React.FC<React.SVGProps<SVGSVGElement>>;
  */
 export declare const TimeLeftTimeline: React_2.FC<ITimeLeftTimelineProps>;
 
+export declare const Timer: MemoExoticComponent<({ styledTimer, backgroundColor, endTime, onComplete, onReminder, reminder, iconColor, textColor, textVariant, }: ITimerProps) => JSX.Element>;
+
 export declare type TInclassChannelMetadata = {
     syncModule?: {
         name: 'MILESTONE_CREATE' | 'MILESTONE_EDIT' | 'MILESTONE_REVIEW';
@@ -6611,6 +6688,12 @@ export declare const useTrialSessionMessageBroker: IUseTrialSessionMessageBroker
 
 export declare const useUIContext: () => UIContextProps;
 
+/**
+ * Custom hook to detect visibility change of the document.
+ * Returns true if the document is visible, false otherwise.
+ */
+export declare const useVisibilityChange: () => boolean;
+
 export declare const useWorksheetLayout: IUseWorksheetLayout;
 
 export declare const useZoomDisable: () => void;
@@ -6679,6 +6762,9 @@ declare const ZINDEX: {
     readonly GOAL_CHAPTER_SHEETS_MENU: 4;
     readonly JOURNEY_OVERLAY: 1000;
     readonly CHAPTER_COMPLETED_LOTTIE: 5;
+    readonly EXTEND_CLASS_ANIMATION_1: 24;
+    readonly EXTEND_CLASS_ANIMATION_2: 25;
+    readonly EXTEND_CLASS_ANIMATION_3: 26;
 };
 
 export { }