@cuemath/leap 3.2.33 → 3.2.34-mb

package/dist/features/ui/modals/modal.js

@@ -1,55 +1,63 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import { captureException as u } from "@sentry/browser";
-import { memo as $, useCallback as g, Suspense as n } from "react";
-import { ErrorBoundary as a } from "react-error-boundary";
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { captureException as C } from "@sentry/browser";
+import { memo as M, useCallback as b, Suspense as h } from "react";
+import { ErrorBoundary as c } from "react-error-boundary";
 import E from "../../../assets/line-icons/icons/cross.js";
-import h from "../error/error.js";
-import M from "../buttons/clickable/clickable.js";
-import x from "../layout/flex-view.js";
-import c from "../loader/app-loader/app-loader.js";
-import { ModalContainer as d, BottomSheetModal as v, ModalLoaderWrapper as C, SpotlightModal as B, BaseModal as S, CloseButtonContainer as W, BaseModalContent as w } from "./modal-styled.js";
-const q = $(({ modal: b, isClosing: o = !1, onClose: m }) => {
-  const { renderAs: s, element: e, modalWidth: l, isDismissable: p } = b, i = g((t) => {
-    u(t);
-  }, []), k = g((t) => {
-    t.stopPropagation();
+import d from "../error/error.js";
+import x from "../buttons/clickable/clickable.js";
+import v from "../layout/flex-view.js";
+import s from "../loader/app-loader/app-loader.js";
+import { ModalContainer as m, BottomSheetModal as B, ModalLoaderWrapper as k, SpotlightModal as S, TransparentModalContainer as W, BaseModal as w, CloseButtonContainer as j, BaseModalContent as y } from "./modal-styled.js";
+const G = M(({ modal: $, isClosing: o = !1, onClose: p }) => {
+  const { renderAs: i, element: e, modalWidth: t, isDismissable: f, blocking: l = !0 } = $, n = b((a) => {
+    C(a);
+  }, []), u = b((a) => {
+    a.stopPropagation();
   }, []);
-  return s === "bottom-sheet" ? /* @__PURE__ */ r(d, { $isClosing: o, onClick: p ? m : () => null, children: /* @__PURE__ */ r(v, { $isClosing: o, onClick: k, children: /* @__PURE__ */ r(
-    a,
+  return i === "bottom-sheet" ? /* @__PURE__ */ r(
+    m,
     {
-      fallback: /* @__PURE__ */ r(x, { $gap: 24, children: /* @__PURE__ */ r(h, { height: "100%" }) }),
-      onError: i,
-      children: /* @__PURE__ */ r(n, { fallback: /* @__PURE__ */ r(c, { height: "50vh" }), children: e })
+      $isClosing: o,
+      $blocking: l,
+      onClick: f ? p : () => null,
+      children: /* @__PURE__ */ r(B, { $isClosing: o, onClick: u, children: /* @__PURE__ */ r(
+        c,
+        {
+          fallback: /* @__PURE__ */ r(v, { $gap: 24, children: /* @__PURE__ */ r(d, { height: "100%" }) }),
+          onError: n,
+          children: /* @__PURE__ */ r(h, { fallback: /* @__PURE__ */ r(s, { height: "50vh" }), children: e })
+        }
+      ) })
     }
-  ) }) }) : s === "spotlight" ? /* @__PURE__ */ r(d, { $isClosing: o, children: /* @__PURE__ */ r(
-    a,
+  ) : i === "spotlight" ? /* @__PURE__ */ r(m, { $isClosing: o, $blocking: l, children: /* @__PURE__ */ r(
+    c,
     {
-      fallback: /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(h, { height: "100vh" }) }),
-      onError: i,
-      children: /* @__PURE__ */ f(
-        n,
+      fallback: /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(d, { height: "100vh" }) }),
+      onError: n,
+      children: /* @__PURE__ */ g(
+        h,
         {
-          fallback: /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(c, { height: "100vh" }) }),
+          fallback: /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(s, { height: "100vh" }) }),
           children: [
-            /* @__PURE__ */ r(B, { $isClosing: o }),
+            /* @__PURE__ */ r(S, { $isClosing: o }),
             e
           ]
         }
       )
     }
-  ) }) : /* @__PURE__ */ r(d, { $isClosing: o, children: /* @__PURE__ */ f(S, { $isClosing: o, $width: l, children: [
-    p !== !1 && /* @__PURE__ */ r(W, { $modalWidth: l, children: /* @__PURE__ */ r(M, { label: "Close", onClick: m, children: /* @__PURE__ */ r(E, { width: 40, height: 40 }) }) }),
-    /* @__PURE__ */ r(w, { $modalWidth: l, children: /* @__PURE__ */ r(
-      a,
+  ) }) : i === "fullscreen-transparent" ? /* @__PURE__ */ r(W, { $isClosing: o, $blocking: l, children: e }) : /* @__PURE__ */ r(m, { $isClosing: o, $blocking: l, children: /* @__PURE__ */ g(w, { $isClosing: o, $width: t, children: [
+    f !== !1 && /* @__PURE__ */ r(j, { $modalWidth: t, children: /* @__PURE__ */ r(x, { label: "Close", onClick: p, children: /* @__PURE__ */ r(E, { width: 40, height: 40 }) }) }),
+    /* @__PURE__ */ r(y, { $modalWidth: t, children: /* @__PURE__ */ r(
+      c,
       {
-        fallback: /* @__PURE__ */ r(h, { height: "50vh", size: "compact" }),
-        onError: i,
-        children: /* @__PURE__ */ r(n, { fallback: /* @__PURE__ */ r(c, { height: "50vh" }), children: e })
+        fallback: /* @__PURE__ */ r(d, { height: "50vh", size: "compact" }),
+        onError: n,
+        children: /* @__PURE__ */ r(h, { fallback: /* @__PURE__ */ r(s, { height: "50vh" }), children: e })
       }
     ) })
   ] }) });
 });
 export {
-  q as default
+  G as default
 };
 //# sourceMappingURL=modal.js.map

package/dist/features/ui/modals/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { captureException } from '@sentry/browser';\nimport { memo, Suspense, useCallback } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Error from '../../ui/error/error';\nimport Clickable from '../buttons/clickable/clickable';\nimport FlexView from '../layout/flex-view';\nimport AppLoader from '../loader/app-loader/app-loader';\nimport * as Styled from './modal-styled';\n\n/**\n * Modal component that renders modal content with close button\n * Handles animation state for entry and exit transitions\n */\nconst Modal: FC<IModalProps> = memo(({ modal, isClosing = false, onClose }) => {\n  const { renderAs, element, modalWidth, isDismissable } = modal;\n\n  const sentryCaptureException = useCallback((error: Error) => {\n    captureException(error);\n  }, []);\n\n  const handleStopPropagation = useCallback((e: React.MouseEvent) => {\n    e.stopPropagation();\n  }, []);\n\n  if (renderAs === 'bottom-sheet') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing} onClick={isDismissable ? onClose : () => null}>\n        <Styled.BottomSheetModal $isClosing={isClosing} onClick={handleStopPropagation}>\n          <ErrorBoundary\n            fallback={\n              <FlexView $gap={24}>\n                <Error height=\"100%\" />\n              </FlexView>\n            }\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BottomSheetModal>\n      </Styled.ModalContainer>\n    );\n  }\n\n  if (renderAs === 'spotlight') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing}>\n        <ErrorBoundary\n          fallback={\n            <Styled.ModalLoaderWrapper>\n              <Error height=\"100vh\" />\n            </Styled.ModalLoaderWrapper>\n          }\n          onError={sentryCaptureException}\n        >\n          <Suspense\n            fallback={\n              <Styled.ModalLoaderWrapper>\n                <AppLoader height=\"100vh\" />\n              </Styled.ModalLoaderWrapper>\n            }\n          >\n            <Styled.SpotlightModal $isClosing={isClosing} />\n            {element}\n          </Suspense>\n        </ErrorBoundary>\n      </Styled.ModalContainer>\n    );\n  }\n\n  return (\n    <Styled.ModalContainer $isClosing={isClosing}>\n      <Styled.BaseModal $isClosing={isClosing} $width={modalWidth}>\n        {isDismissable !== false && (\n          <Styled.CloseButtonContainer $modalWidth={modalWidth}>\n            <Clickable label=\"Close\" onClick={onClose}>\n              <CrossIcon width={40} height={40} />\n            </Clickable>\n          </Styled.CloseButtonContainer>\n        )}\n        <Styled.BaseModalContent $modalWidth={modalWidth}>\n          <ErrorBoundary\n            fallback={<Error height=\"50vh\" size=\"compact\" />}\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BaseModalContent>\n      </Styled.BaseModal>\n    </Styled.ModalContainer>\n  );\n});\n\nexport default Modal;\n"],"names":["Modal","memo","modal","isClosing","onClose","renderAs","element","modalWidth","isDismissable","sentryCaptureException","useCallback","error","captureException","handleStopPropagation","e","Styled.ModalContainer","Styled.BottomSheetModal","jsx","ErrorBoundary","FlexView","Error","Suspense","AppLoader","Styled.ModalLoaderWrapper","jsxs","Styled.SpotlightModal","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;;;;;;AAkBM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AAC7E,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,MAAkBN,GAEnDO,IAAyBC,EAAY,CAACC,MAAiB;AAC3D,IAAAC,EAAiBD,CAAK;AAAA,EACxB,GAAG,CAAE,CAAA,GAECE,IAAwBH,EAAY,CAACI,MAAwB;AACjE,IAAAA,EAAE,gBAAgB;AAAA,EACpB,GAAG,CAAE,CAAA;AAEL,SAAIT,MAAa,mCAEZU,GAAA,EAAsB,YAAYZ,GAAW,SAASK,IAAgBJ,IAAU,MAAM,MACrF,4BAACY,GAAA,EAAwB,YAAYb,GAAW,SAASU,GACvD,UAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGC,GAAS,EAAA,MAAM,IACd,UAAC,gBAAAF,EAAAG,GAAA,EAAM,QAAO,OAAA,CAAO,EACvB,CAAA;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAQ,EAACI,KAAS,UAAU,gBAAAJ,EAACK,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQhB,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA,EAE9D,CAAA,EACF,CAAA,IAIAD,MAAa,cAEZ,gBAAAY,EAAAF,GAAA,EAAsB,YAAYZ,GACjC,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGK,GAAA,EACC,UAAC,gBAAAN,EAAAG,GAAA,EAAM,QAAO,QAAQ,CAAA,GACxB;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAe;AAAA,QAACH;AAAA,QAAA;AAAA,UACC,4BACGE,GAAA,EACC,UAAC,gBAAAN,EAAAK,GAAA,EAAU,QAAO,QAAQ,CAAA,GAC5B;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAL,EAACQ,GAAA,EAAsB,YAAYtB,EAAW,CAAA;AAAA,YAC7CG;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA,IAKD,gBAAAW,EAAAF,GAAA,EAAsB,YAAYZ,GACjC,UAAC,gBAAAqB,EAAAE,GAAA,EAAiB,YAAYvB,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBmB,GAAA,EAA4B,aAAapB,GACxC,4BAACqB,GAAU,EAAA,OAAM,SAAQ,SAASxB,GAChC,4BAACyB,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,IAED,gBAAAZ,EAAAa,GAAA,EAAwB,aAAavB,GACpC,UAAA,gBAAAU;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAW,gBAAAD,EAAAG,GAAA,EAAM,QAAO,QAAO,MAAK,WAAU;AAAA,QAC9C,SAASX;AAAA,QAET,UAAA,gBAAAQ,EAACI,KAAS,UAAU,gBAAAJ,EAACK,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQhB,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA,GAE9D;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { captureException } from '@sentry/browser';\nimport { memo, Suspense, useCallback } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Error from '../../ui/error/error';\nimport Clickable from '../buttons/clickable/clickable';\nimport FlexView from '../layout/flex-view';\nimport AppLoader from '../loader/app-loader/app-loader';\nimport * as Styled from './modal-styled';\n\n/**\n * Modal component that renders modal content with close button\n * Handles animation state for entry and exit transitions\n */\nconst Modal: FC<IModalProps> = memo(({ modal, isClosing = false, onClose }) => {\n  const { renderAs, element, modalWidth, isDismissable, blocking = true } = modal;\n\n  const sentryCaptureException = useCallback((error: Error) => {\n    captureException(error);\n  }, []);\n\n  const handleStopPropagation = useCallback((e: React.MouseEvent) => {\n    e.stopPropagation();\n  }, []);\n\n  if (renderAs === 'bottom-sheet') {\n    return (\n      <Styled.ModalContainer\n        $isClosing={isClosing}\n        $blocking={blocking}\n        onClick={isDismissable ? onClose : () => null}\n      >\n        <Styled.BottomSheetModal $isClosing={isClosing} onClick={handleStopPropagation}>\n          <ErrorBoundary\n            fallback={\n              <FlexView $gap={24}>\n                <Error height=\"100%\" />\n              </FlexView>\n            }\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BottomSheetModal>\n      </Styled.ModalContainer>\n    );\n  }\n\n  if (renderAs === 'spotlight') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing} $blocking={blocking}>\n        <ErrorBoundary\n          fallback={\n            <Styled.ModalLoaderWrapper>\n              <Error height=\"100vh\" />\n            </Styled.ModalLoaderWrapper>\n          }\n          onError={sentryCaptureException}\n        >\n          <Suspense\n            fallback={\n              <Styled.ModalLoaderWrapper>\n                <AppLoader height=\"100vh\" />\n              </Styled.ModalLoaderWrapper>\n            }\n          >\n            <Styled.SpotlightModal $isClosing={isClosing} />\n            {element}\n          </Suspense>\n        </ErrorBoundary>\n      </Styled.ModalContainer>\n    );\n  }\n\n  if (renderAs === 'fullscreen-transparent') {\n    return (\n      <Styled.TransparentModalContainer $isClosing={isClosing} $blocking={blocking}>\n        {element}\n      </Styled.TransparentModalContainer>\n    );\n  }\n\n  return (\n    <Styled.ModalContainer $isClosing={isClosing} $blocking={blocking}>\n      <Styled.BaseModal $isClosing={isClosing} $width={modalWidth}>\n        {isDismissable !== false && (\n          <Styled.CloseButtonContainer $modalWidth={modalWidth}>\n            <Clickable label=\"Close\" onClick={onClose}>\n              <CrossIcon width={40} height={40} />\n            </Clickable>\n          </Styled.CloseButtonContainer>\n        )}\n        <Styled.BaseModalContent $modalWidth={modalWidth}>\n          <ErrorBoundary\n            fallback={<Error height=\"50vh\" size=\"compact\" />}\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BaseModalContent>\n      </Styled.BaseModal>\n    </Styled.ModalContainer>\n  );\n});\n\nexport default Modal;\n"],"names":["Modal","memo","modal","isClosing","onClose","renderAs","element","modalWidth","isDismissable","blocking","sentryCaptureException","useCallback","error","captureException","handleStopPropagation","e","jsx","Styled.ModalContainer","Styled.BottomSheetModal","ErrorBoundary","FlexView","Error","Suspense","AppLoader","Styled.ModalLoaderWrapper","jsxs","Styled.SpotlightModal","Styled.TransparentModalContainer","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;;;;;;AAkBM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AAC7E,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,GAAe,UAAAC,IAAW,GAAS,IAAAP,GAEpEQ,IAAyBC,EAAY,CAACC,MAAiB;AAC3D,IAAAC,EAAiBD,CAAK;AAAA,EACxB,GAAG,CAAE,CAAA,GAECE,IAAwBH,EAAY,CAACI,MAAwB;AACjE,IAAAA,EAAE,gBAAgB;AAAA,EACpB,GAAG,CAAE,CAAA;AAEL,SAAIV,MAAa,iBAEb,gBAAAW;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,YAAYd;AAAA,MACZ,WAAWM;AAAA,MACX,SAASD,IAAgBJ,IAAU,MAAM;AAAA,MAEzC,4BAACc,GAAA,EAAwB,YAAYf,GAAW,SAASW,GACvD,UAAA,gBAAAE;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,4BACGC,GAAS,EAAA,MAAM,IACd,UAAC,gBAAAJ,EAAAK,GAAA,EAAM,QAAO,OAAA,CAAO,EACvB,CAAA;AAAA,UAEF,SAASX;AAAA,UAET,UAAA,gBAAAM,EAACM,KAAS,UAAU,gBAAAN,EAACO,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQjB,EAAA,CAAA;AAAA,QAAA;AAAA,MAAA,GAE9D;AAAA,IAAA;AAAA,EAAA,IAKFD,MAAa,gCAEZY,GAAA,EAAsB,YAAYd,GAAW,WAAWM,GACvD,UAAA,gBAAAO;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,4BACGK,GAAA,EACC,UAAC,gBAAAR,EAAAK,GAAA,EAAM,QAAO,QAAQ,CAAA,GACxB;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAe;AAAA,QAACH;AAAA,QAAA;AAAA,UACC,4BACGE,GAAA,EACC,UAAC,gBAAAR,EAAAO,GAAA,EAAU,QAAO,QAAQ,CAAA,GAC5B;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAP,EAACU,GAAA,EAAsB,YAAYvB,EAAW,CAAA;AAAA,YAC7CG;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA,IAIAD,MAAa,2BAEb,gBAAAW,EAACW,GAAA,EAAiC,YAAYxB,GAAW,WAAWM,GACjE,UACHH,EAAA,CAAA,IAKD,gBAAAU,EAAAC,GAAA,EAAsB,YAAYd,GAAW,WAAWM,GACvD,UAAA,gBAAAgB,EAACG,GAAA,EAAiB,YAAYzB,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBqB,GAAA,EAA4B,aAAatB,GACxC,4BAACuB,GAAU,EAAA,OAAM,SAAQ,SAAS1B,GAChC,4BAAC2B,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,IAED,gBAAAf,EAAAgB,GAAA,EAAwB,aAAazB,GACpC,UAAA,gBAAAS;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAW,gBAAAH,EAAAK,GAAA,EAAM,QAAO,QAAO,MAAK,WAAU;AAAA,QAC9C,SAASX;AAAA,QAET,UAAA,gBAAAM,EAACM,KAAS,UAAU,gBAAAN,EAACO,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQjB,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA,GAE9D;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { ChannelStatus } from '@cuemath/cue-message-broker';
 import { ComponentType } from 'react';
 import type { Config } from '@lottiefiles/dotlottie-web';
 import { Context } from 'react';
+import type { Data } from '@lottiefiles/dotlottie-web';
 import type { DefaultTheme } from 'styled-components';
 import { DetailedHTMLProps } from 'react';
 import type { Dispatch } from 'react';
@@ -398,7 +399,7 @@ export declare const DesmosCalculator: FC<IDesmosCalculatorProps>;
 
 export declare const DigitalMeter: FC<IDigitalMeterProps>;
 
-export declare const DotLottieAnimation: NamedExoticComponent<ILottieAnimationProps & RefAttributes<ILottieAnimationRef>>;
+export declare const DotLottieAnimation: NamedExoticComponent<IDotLottieAnimationProps & RefAttributes<IDotLottieAnimationRef>>;
 
 export declare const DownIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
@@ -628,7 +629,6 @@ 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;
@@ -642,9 +642,7 @@ 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: {
@@ -1461,6 +1459,15 @@ declare interface IDigitalMeterProps {
     actAsTimer?: boolean;
 }
 
+declare type IDotLottieAnimationProps = XOR<WithSrc, WithData> & SharedProps;
+
+declare interface IDotLottieAnimationRef {
+    play: () => void;
+    pause: () => void;
+    playSegments: (segments: AnimationSegment) => void;
+    setFrame: (frame: number) => void;
+}
+
 declare interface IDrawerProps {
     isOpen: boolean;
     onClose?: () => void;
@@ -2121,19 +2128,13 @@ 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;
@@ -2167,7 +2168,6 @@ 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;
@@ -2178,9 +2178,6 @@ 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;
@@ -2219,8 +2216,6 @@ 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;
@@ -2236,8 +2231,6 @@ 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;
@@ -2247,12 +2240,10 @@ 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;
@@ -2262,7 +2253,6 @@ 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;
@@ -2283,23 +2273,6 @@ declare interface ILogger {
     (eventName: string, data?: Record<string, unknown>): void;
 }
 
-declare interface ILottieAnimationProps {
-    src: string;
-    width?: string | number;
-    height?: string | number;
-    settings?: Partial<LottieSettings>;
-    eventListeners?: {
-        name: EventType;
-        callback: EventListener_2<EventType>;
-    }[];
-    onRender?: () => void;
-    onError?: () => void;
-}
-
-declare interface ILottieAnimationRef {
-    playSegments: (segments: AnimationSegment, forceFlag?: boolean) => void;
-}
-
 declare interface ILPARChapterProps extends ILPARSheetCallbacks {
     userType: TUserTypes;
     chapterData: TLPARChapterData;
@@ -2638,11 +2611,13 @@ export declare interface IModal {
     /** Content to display inside the modal */
     element: ReactElement;
     /** Rendering style of the modal */
-    renderAs?: 'modal' | 'fullscreen' | 'spotlight' | 'bottom-sheet';
+    renderAs?: 'modal' | 'fullscreen' | 'spotlight' | 'bottom-sheet' | 'fullscreen-transparent';
     /** Whether the modal can be dismissed by clicking outside or ESC key (default: true) */
     isDismissable?: boolean;
     /** Whether the modal requires authentication to view (default: true) */
     isPrivate?: boolean;
+    /** If true, disables interaction behind modal (default: true) */
+    blocking?: boolean;
     /** Width of the modal in CSS units (e.g., '500px', '80vw') */
     modalWidth: string;
 }
@@ -3489,14 +3464,22 @@ declare interface IStepperProps {
     currentStep: number;
 }
 
-declare interface IStickerData {
+export declare interface IStickerData {
     id: string;
     emoji: string;
     lottieUrl?: string;
-    name?: string;
+    name: string;
+}
+
+export declare interface IStickerProps {
+    emoji: string;
+    lottieUrl?: string;
+    size?: number | string;
+    onClick?: () => void;
+    disabled?: boolean;
 }
 
-declare interface IStickerGridProps {
+export declare interface IStickerSelectorGridProps {
     stickers: IStickerData[];
     columns?: number;
     gap?: number;
@@ -3504,6 +3487,22 @@ declare interface IStickerGridProps {
     onStickerClick?: (sticker: IStickerData) => void;
 }
 
+export declare interface IStickerSelectorProps {
+    triggerNode: React.ReactNode;
+    studentClassroomId: string;
+    gridConfig: Omit<Partial<IStickerSelectorGridProps>, 'stickers' | 'onStickerClick'>;
+    tooltipConfig: Omit<Partial<IArrowTooltipProps>, 'children' | 'tooltipItem' | 'hidden' | 'alwaysVisible'>;
+    visible: boolean;
+    onToggle: () => void;
+}
+
+export declare interface IStickersProps {
+    stickers: string[];
+    effect: TStickerEffects;
+    count: number;
+    duration: number;
+}
+
 declare interface IStreakIconProps extends React.HTMLProps<HTMLDivElement> {
     value: number;
     blink?: boolean;
@@ -4516,7 +4515,6 @@ 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;
@@ -4622,8 +4620,6 @@ 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;
@@ -5092,6 +5088,18 @@ export declare const SENTRY_IGNORED_ERRORS: Array<string | RegExp>;
 
 export declare const Separator: React_2.FC<ISeparatorProps>;
 
+declare type SharedProps = {
+    width?: string | number;
+    height?: string | number;
+    settings?: Partial<LottieSettings>;
+    eventListeners?: {
+        name: EventType;
+        callback: EventListener_2<EventType>;
+    }[];
+    onRender?: () => void;
+    onError?: () => void;
+};
+
 export declare const SHEET_ACTIONS: {
     readonly START: "START";
     readonly RESUME: "RESUME";
@@ -5198,22 +5206,15 @@ declare const STICKER_BADGE: {
     AWESOME: string;
 };
 
-declare type StickerEffect = 'burst_from_edges' | 'pop_expand' | 'float_up' | 'fall_down';
+export declare const stickerData: IStickerData[];
 
 export declare const StickerFilledIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const StickerIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
-export declare const Stickers: React_2.NamedExoticComponent<StickersProps>;
-
-declare interface StickersProps {
-    stickers: string[];
-    effect: StickerEffect;
-    count: number;
-    duration: number;
-}
+export declare const StickersEffects: React_2.NamedExoticComponent<IStickersProps>;
 
-export declare const StickersSelector: React_2.NamedExoticComponent<IStickerGridProps>;
+export declare const StickersSelector: React_2.NamedExoticComponent<IStickerSelectorProps>;
 
 export declare const StreakIcon: React_2.FC<IStreakIconProps>;
 
@@ -6154,7 +6155,7 @@ declare type TRenderAs_2 = 'canvas' | 'whiteboard';
 declare type TRewardHomeData = {
     user_badges: TBadgeData[] | [];
     user_rewards: TRewardsData[] | [];
-    user_stickers: TStickerData[] | [];
+    user_stickers: TStickerData_2[] | [];
 };
 
 declare type TRewardsData = {
@@ -6282,7 +6283,18 @@ export declare type TSkillStatus = 'pending' | 'completed';
 
 export declare type TSocialAuthProvider = 'google' | 'apple';
 
-declare type TStickerData = {
+export declare type TStickerData = {
+    id: string;
+    sticker: string;
+    lottie?: string;
+    x: number;
+    y: number;
+    size: number;
+    fromX?: string;
+    fromY?: string;
+};
+
+declare type TStickerData_2 = {
     actor_id: string;
     badge_id: string;
     badge_type: string;
@@ -6295,6 +6307,8 @@ declare type TStickerData = {
     user_type: string;
 };
 
+export declare type TStickerEffects = 'burst-from-edges' | 'pop-expand' | 'float-up' | 'fall-down';
+
 export declare type TStreakStatus = 'pending' | 'completed';
 
 declare type TStyleAttrubutes = NonNullable<HTMLAttributes<HTMLDivElement>['style']>;
@@ -6675,6 +6689,18 @@ export declare enum WebViewEvent {
  */
 export declare const WHITELIST_EVENTS: Record<string, PLUGIN_NAME[]>;
 
+declare type WithData = {
+    data: Data;
+};
+
+declare type Without<T, K extends keyof any> = {
+    [P in Exclude<keyof T, K>]?: never;
+};
+
+declare type WithSrc = {
+    src: string;
+};
+
 export declare const Worksheet: NamedExoticComponent<IWorksheetContainerProps & RefAttributes<IWorksheetRef>>;
 
 export declare const WORKSHEET_ACTION_BAR_HEIGHT = 56;
@@ -6687,6 +6713,8 @@ export declare const WORKSHEET_TOP_NAVIGATION_HEIGHT = 48;
 
 export declare const WORKSHEET_V3_NODE_TYPES: TNodeTypeProps[];
 
+declare type XOR<T, U> = (T & Without<U, keyof T>) | (U & Without<T, keyof U>);
+
 declare const ZINDEX: {
     readonly CHAPTER_CROWN_ICON: 4;
     readonly CHAPTER_PLUS_ICON: 2;