@cuemath/leap 3.2.23-mb → 3.2.25-mb

package/dist/features/stickers/stickers-effects/stickers-cache.js

@@ -0,0 +1,19 @@
+const o = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map();
+async function r(t) {
+  if (o.has(t))
+    return o.get(t);
+  if (n.has(t))
+    return n.get(t);
+  const i = fetch(t).then(async (e) => {
+    if (!e.ok) return null;
+    const a = t.endsWith(".lottie") ? await e.arrayBuffer() : await e.json();
+    return o.set(t, a), a;
+  }).catch((e) => (console.error("Lottie preload error:", e), null)).finally(() => {
+    n.delete(t);
+  });
+  return n.set(t, i), i;
+}
+export {
+  r as preloadLottieFile
+};
+//# sourceMappingURL=stickers-cache.js.map

package/dist/features/stickers/stickers-effects/stickers-cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stickers-cache.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-cache.ts"],"sourcesContent":["import type { Data } from '@lottiefiles/dotlottie-web';\n\nconst lottieCache = new Map<string, Data>();\nconst lottiePromises = new Map<string, Promise<Data | null>>();\n\nexport async function preloadLottieFile(url: string): Promise<Data | null> {\n  if (lottieCache.has(url)) {\n    return lottieCache.get(url)!;\n  }\n\n  if (lottiePromises.has(url)) {\n    return lottiePromises.get(url)!;\n  }\n\n  const fetchPromise = fetch(url)\n    .then(async res => {\n      if (!res.ok) return null;\n\n      const isLottieFile = url.endsWith('.lottie');\n      const data = isLottieFile ? await res.arrayBuffer() : await res.json();\n\n      lottieCache.set(url, data);\n\n      return data;\n    })\n    .catch(err => {\n      // eslint-disable-next-line no-console\n      console.error('Lottie preload error:', err);\n\n      return null;\n    })\n    .finally(() => {\n      lottiePromises.delete(url);\n    });\n\n  lottiePromises.set(url, fetchPromise);\n\n  return fetchPromise;\n}\n"],"names":["lottieCache","lottiePromises","preloadLottieFile","url","fetchPromise","res","data","err"],"mappings":"AAEA,MAAMA,wBAAkB,OAClBC,wBAAqB;AAE3B,eAAsBC,EAAkBC,GAAmC;AACrE,MAAAH,EAAY,IAAIG,CAAG;AACd,WAAAH,EAAY,IAAIG,CAAG;AAGxB,MAAAF,EAAe,IAAIE,CAAG;AACjB,WAAAF,EAAe,IAAIE,CAAG;AAG/B,QAAMC,IAAe,MAAMD,CAAG,EAC3B,KAAK,OAAME,MAAO;AACb,QAAA,CAACA,EAAI,GAAW,QAAA;AAGd,UAAAC,IADeH,EAAI,SAAS,SAAS,IACf,MAAME,EAAI,gBAAgB,MAAMA,EAAI;AAEpD,WAAAL,EAAA,IAAIG,GAAKG,CAAI,GAElBA;AAAA,EAAA,CACR,EACA,MAAM,CAAOC,OAEJ,QAAA,MAAM,yBAAyBA,CAAG,GAEnC,KACR,EACA,QAAQ,MAAM;AACb,IAAAN,EAAe,OAAOE,CAAG;AAAA,EAAA,CAC1B;AAEY,SAAAF,EAAA,IAAIE,GAAKC,CAAY,GAE7BA;AACT;"}

package/dist/features/stickers/stickers-effects/stickers-effects.js

@@ -1,43 +1,54 @@
-import { jsx as o, Fragment as D } from "react/jsx-runtime";
-import { memo as f, useState as l, useEffect as E } from "react";
-import g from "../../ui/lottie-animation/lottie-animation.js";
-import { generateStickerData as F } from "./stickers-effects-helper.js";
-import { Container as z, Sticker as T } from "./stickers-effects-styled.js";
-const $ = f(({ lottie: t, sticker: e, size: r }) => {
-  const [i, s] = l(!1);
-  return !t || i ? /* @__PURE__ */ o(D, { children: e }) : /* @__PURE__ */ o(g, { src: t, width: r, height: r, onError: () => s(!0) });
-}), b = ({ stickers: t, effect: e, count: r, duration: i }) => {
-  const [s, a] = l([]);
-  return E(() => {
-    const c = F({
-      count: r,
-      effect: e,
+import { jsx as s, Fragment as E } from "react/jsx-runtime";
+import { memo as u, useState as f, useEffect as d } from "react";
+import F from "../../ui/dot-lottie-animations/dot-lottie-animation.js";
+import { preloadLottieFile as g } from "./stickers-cache.js";
+import { generateStickerData as z } from "./stickers-effects-helper.js";
+import { Container as L, Sticker as T } from "./stickers-effects-styled.js";
+const $ = u(({ url: t, sticker: o, size: a }) => {
+  const [i, m] = f(), [n, e] = f(!1);
+  return d(() => {
+    let r = !0;
+    if (t)
+      return g(t).then((c) => {
+        r && (c ? m(c) : e(!0));
+      }).catch(() => {
+        r && e(!0);
+      }), () => {
+        r = !1;
+      };
+  }, [t]), !t || n || !i ? /* @__PURE__ */ s(E, { children: o }) : /* @__PURE__ */ s(F, { data: i, width: a, height: a, onError: () => e(!0) });
+}), b = ({ stickers: t, effect: o, count: a, duration: i }) => {
+  const [m, n] = f([]);
+  return d(() => {
+    const e = z({
+      count: a,
+      effect: o,
       stickers: t,
       minSize: 32,
       maxSize: 48
     });
-    a(c);
-    const m = setTimeout(() => a([]), i);
-    return () => clearTimeout(m);
-  }, [t, e, r, i]), /* @__PURE__ */ o(z, { children: s.map((c, m) => {
-    const { id: k, sticker: u, lottie: S, x: h, y: p, size: n, fromX: d, fromY: x } = c;
-    return /* @__PURE__ */ o(
+    n(e);
+    const r = setTimeout(() => n([]), i);
+    return () => clearTimeout(r);
+  }, [t, o, a, i]), /* @__PURE__ */ s(L, { children: m.map((e, r) => {
+    const { id: c, sticker: h, lottie: k, x: p, y: S, size: l, fromX: D, fromY: x } = e;
+    return /* @__PURE__ */ s(
       T,
       {
-        effect: e,
+        effect: o,
         duration: i,
-        fromX: d,
+        fromX: D,
         fromY: x,
-        x: h,
-        y: p,
-        size: n,
-        children: /* @__PURE__ */ o($, { lottie: S, sticker: u, size: n })
+        x: p,
+        y: S,
+        size: l,
+        children: /* @__PURE__ */ s($, { url: k, sticker: h, size: l })
       },
-      `${k}-${m}`
+      `${c}-${r}`
     );
   }) });
-}, L = f(b);
+}, W = u(b);
 export {
-  L as default
+  W as default
 };
 //# sourceMappingURL=stickers-effects.js.map

package/dist/features/stickers/stickers-effects/stickers-effects.js.map

@@ -1 +1 @@
-{"version":3,"file":"stickers-effects.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects.tsx"],"sourcesContent":["import type { TStickerData, IStickersProps } from './stickers-effects-types';\n\nimport React, { memo, useEffect, useState } from 'react';\n\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { generateStickerData } from './stickers-effects-helper';\nimport * as S from './stickers-effects-styled';\n\nconst StickerWithFallback: React.FC<{\n  lottie?: string;\n  sticker: string;\n  size: number;\n}> = memo(({ lottie, sticker, size }) => {\n  const [failed, setFailed] = useState(false);\n\n  if (!lottie || failed) return <>{sticker}</>;\n\n  return (\n    <LottieAnimation src={lottie} width={size} height={size} onError={() => setFailed(true)} />\n  );\n});\n\nconst StickersEffects: React.FC<IStickersProps> = ({ stickers, effect, count, duration }) => {\n  const [stickersData, setStickersData] = useState<ReturnType<typeof generateStickerData>>([]);\n\n  useEffect(() => {\n    const stickerData = generateStickerData({\n      count,\n      effect,\n      stickers,\n      minSize: 32,\n      maxSize: 48,\n    });\n\n    setStickersData(stickerData);\n\n    const timeout = setTimeout(() => setStickersData([]), duration);\n\n    return () => clearTimeout(timeout);\n  }, [stickers, effect, count, duration]);\n\n  return (\n    <S.Container>\n      {stickersData.map((data: TStickerData, i) => {\n        const { id, sticker, lottie, x, y, size, fromX, fromY } = data;\n\n        return (\n          <S.Sticker\n            key={`${id}-${i}`}\n            effect={effect}\n            duration={duration}\n            fromX={fromX}\n            fromY={fromY}\n            x={x}\n            y={y}\n            size={size}\n          >\n            <StickerWithFallback lottie={lottie} sticker={sticker} size={size} />\n          </S.Sticker>\n        );\n      })}\n    </S.Container>\n  );\n};\n\nexport default memo(StickersEffects);\n"],"names":["StickerWithFallback","memo","lottie","sticker","size","failed","setFailed","useState","jsx","LottieAnimation","StickersEffects","stickers","effect","count","duration","stickersData","setStickersData","useEffect","stickerData","generateStickerData","timeout","S.Container","data","i","id","x","y","fromX","fromY","S.Sticker","stickersEffects"],"mappings":";;;;;AAQA,MAAMA,IAIDC,EAAK,CAAC,EAAE,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,QAAW;AACvC,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SAAI,CAACL,KAAUG,2BAAkB,UAAQF,EAAA,CAAA,IAGtC,gBAAAK,EAAAC,GAAA,EAAgB,KAAKP,GAAQ,OAAOE,GAAM,QAAQA,GAAM,SAAS,MAAME,EAAU,EAAI,EAAG,CAAA;AAE7F,CAAC,GAEKI,IAA4C,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAe;AAC3F,QAAM,CAACC,GAAcC,CAAe,IAAIT,EAAiD,CAAE,CAAA;AAE3F,SAAAU,EAAU,MAAM;AACd,UAAMC,IAAcC,EAAoB;AAAA,MACtC,OAAAN;AAAA,MACA,QAAAD;AAAA,MACA,UAAAD;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,IAAA,CACV;AAED,IAAAK,EAAgBE,CAAW;AAE3B,UAAME,IAAU,WAAW,MAAMJ,EAAgB,CAAE,CAAA,GAAGF,CAAQ;AAEvD,WAAA,MAAM,aAAaM,CAAO;AAAA,KAChC,CAACT,GAAUC,GAAQC,GAAOC,CAAQ,CAAC,GAGpC,gBAAAN,EAACa,GAAA,EACE,YAAa,IAAI,CAACC,GAAoBC,MAAM;AACrC,UAAA,EAAE,IAAAC,GAAI,SAAArB,GAAS,QAAAD,GAAQ,GAAAuB,GAAG,GAAAC,GAAG,MAAAtB,GAAM,OAAAuB,GAAO,OAAAC,EAAU,IAAAN;AAGxD,WAAA,gBAAAd;AAAA,MAACqB;AAAAA,MAAA;AAAA,QAEC,QAAAjB;AAAA,QACA,UAAAE;AAAA,QACA,OAAAa;AAAA,QACA,OAAAC;AAAA,QACA,GAAAH;AAAA,QACA,GAAAC;AAAA,QACA,MAAAtB;AAAA,QAEA,UAAC,gBAAAI,EAAAR,GAAA,EAAoB,QAAAE,GAAgB,SAAAC,GAAkB,MAAAC,GAAY;AAAA,MAAA;AAAA,MAT9D,GAAGoB,CAAE,IAAID,CAAC;AAAA,IAAA;AAAA,EAYpB,CAAA,EACH,CAAA;AAEJ,GAEeO,IAAA7B,EAAKS,CAAe;"}
+{"version":3,"file":"stickers-effects.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects.tsx"],"sourcesContent":["import type { TStickerData, IStickersProps } from './stickers-effects-types';\nimport type { Data } from '@lottiefiles/dotlottie-web';\n\nimport React, { memo, useEffect, useState } from 'react';\n\nimport DotLottieAnimation from '../../ui/dot-lottie-animations/dot-lottie-animation';\nimport { preloadLottieFile } from './stickers-cache';\nimport { generateStickerData } from './stickers-effects-helper';\nimport * as S from './stickers-effects-styled';\n\nconst StickerWithFallback: React.FC<{\n  url?: string;\n  sticker: string;\n  size: number;\n}> = memo(({ url, sticker, size }) => {\n  const [data, setData] = useState<Data>();\n  const [failed, setFailed] = useState(false);\n\n  useEffect(() => {\n    let isMounted = true;\n\n    if (!url) return;\n\n    preloadLottieFile(url)\n      .then(result => {\n        if (isMounted) {\n          if (result) {\n            setData(result);\n          } else {\n            setFailed(true);\n          }\n        }\n      })\n      .catch(() => {\n        if (isMounted) setFailed(true);\n      });\n\n    return () => {\n      isMounted = false;\n    };\n  }, [url]);\n\n  if (!url || failed || !data) {\n    return <>{sticker}</>;\n  }\n\n  return (\n    <DotLottieAnimation data={data} width={size} height={size} onError={() => setFailed(true)} />\n  );\n});\n\nconst StickersEffects: React.FC<IStickersProps> = ({ stickers, effect, count, duration }) => {\n  const [stickersData, setStickersData] = useState<ReturnType<typeof generateStickerData>>([]);\n\n  useEffect(() => {\n    const stickerData = generateStickerData({\n      count,\n      effect,\n      stickers,\n      minSize: 32,\n      maxSize: 48,\n    });\n\n    setStickersData(stickerData);\n\n    const timeout = setTimeout(() => setStickersData([]), duration);\n\n    return () => clearTimeout(timeout);\n  }, [stickers, effect, count, duration]);\n\n  return (\n    <S.Container>\n      {stickersData.map((data: TStickerData, i) => {\n        const { id, sticker, lottie, x, y, size, fromX, fromY } = data;\n\n        return (\n          <S.Sticker\n            key={`${id}-${i}`}\n            effect={effect}\n            duration={duration}\n            fromX={fromX}\n            fromY={fromY}\n            x={x}\n            y={y}\n            size={size}\n          >\n            <StickerWithFallback url={lottie} sticker={sticker} size={size} />\n          </S.Sticker>\n        );\n      })}\n    </S.Container>\n  );\n};\n\nexport default memo(StickersEffects);\n"],"names":["StickerWithFallback","memo","url","sticker","size","data","setData","useState","failed","setFailed","useEffect","isMounted","preloadLottieFile","result","jsx","DotLottieAnimation","StickersEffects","stickers","effect","count","duration","stickersData","setStickersData","stickerData","generateStickerData","timeout","S.Container","i","id","lottie","x","y","fromX","fromY","S.Sticker","stickersEffects"],"mappings":";;;;;;AAUA,MAAMA,IAIDC,EAAK,CAAC,EAAE,KAAAC,GAAK,SAAAC,GAAS,MAAAC,QAAW;AACpC,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAe,GACjC,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AA0B1C,SAxBAG,EAAU,MAAM;AACd,QAAIC,IAAY;AAEhB,QAAKT;AAEa,aAAAU,EAAAV,CAAG,EAClB,KAAK,CAAUW,MAAA;AACd,QAAIF,MACEE,IACFP,EAAQO,CAAM,IAEdJ,EAAU,EAAI;AAAA,MAElB,CACD,EACA,MAAM,MAAM;AACP,QAAAE,OAAqB,EAAI;AAAA,MAAA,CAC9B,GAEI,MAAM;AACC,QAAAA,IAAA;AAAA,MAAA;AAAA,EACd,GACC,CAACT,CAAG,CAAC,GAEJ,CAACA,KAAOM,KAAU,CAACH,2BACX,UAAQF,EAAA,CAAA,IAIlB,gBAAAW,EAACC,GAAmB,EAAA,MAAAV,GAAY,OAAOD,GAAM,QAAQA,GAAM,SAAS,MAAMK,EAAU,EAAI,EAAG,CAAA;AAE/F,CAAC,GAEKO,IAA4C,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAe;AAC3F,QAAM,CAACC,GAAcC,CAAe,IAAIf,EAAiD,CAAE,CAAA;AAE3F,SAAAG,EAAU,MAAM;AACd,UAAMa,IAAcC,EAAoB;AAAA,MACtC,OAAAL;AAAA,MACA,QAAAD;AAAA,MACA,UAAAD;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,IAAA,CACV;AAED,IAAAK,EAAgBC,CAAW;AAE3B,UAAME,IAAU,WAAW,MAAMH,EAAgB,CAAE,CAAA,GAAGF,CAAQ;AAEvD,WAAA,MAAM,aAAaK,CAAO;AAAA,KAChC,CAACR,GAAUC,GAAQC,GAAOC,CAAQ,CAAC,GAGpC,gBAAAN,EAACY,GAAA,EACE,YAAa,IAAI,CAACrB,GAAoBsB,MAAM;AACrC,UAAA,EAAE,IAAAC,GAAI,SAAAzB,GAAS,QAAA0B,GAAQ,GAAAC,GAAG,GAAAC,GAAG,MAAA3B,GAAM,OAAA4B,GAAO,OAAAC,EAAU,IAAA5B;AAGxD,WAAA,gBAAAS;AAAA,MAACoB;AAAAA,MAAA;AAAA,QAEC,QAAAhB;AAAA,QACA,UAAAE;AAAA,QACA,OAAAY;AAAA,QACA,OAAAC;AAAA,QACA,GAAAH;AAAA,QACA,GAAAC;AAAA,QACA,MAAA3B;AAAA,QAEA,UAAC,gBAAAU,EAAAd,GAAA,EAAoB,KAAK6B,GAAQ,SAAA1B,GAAkB,MAAAC,GAAY;AAAA,MAAA;AAAA,MAT3D,GAAGwB,CAAE,IAAID,CAAC;AAAA,IAAA;AAAA,EAYpB,CAAA,EACH,CAAA;AAEJ,GAEeQ,IAAAlC,EAAKe,CAAe;"}

package/dist/features/ui/dot-lottie-animations/dot-lottie-animation-styled.js

@@ -0,0 +1,9 @@
+import p from "styled-components";
+const a = p.canvas`
+  ${({ $renderWidth: o }) => typeof o == "number" ? `width: ${o}px;` : `width: ${o};`}
+  ${({ $renderHeight: o }) => typeof o == "number" ? `height: ${o}px;` : `height: ${o};`}
+`;
+export {
+  a as Canvas
+};
+//# sourceMappingURL=dot-lottie-animation-styled.js.map

package/dist/features/ui/dot-lottie-animations/dot-lottie-animation-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dot-lottie-animation-styled.js","sources":["../../../../src/features/ui/dot-lottie-animations/dot-lottie-animation-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Canvas = styled.canvas<{\n  $renderWidth: string | number;\n  $renderHeight: string | number;\n}>`\n  ${({ $renderWidth }) =>\n    typeof $renderWidth === 'number' ? `width: ${$renderWidth}px;` : `width: ${$renderWidth};`}\n  ${({ $renderHeight }) =>\n    typeof $renderHeight === 'number' ? `height: ${$renderHeight}px;` : `height: ${$renderHeight};`}\n`;\n"],"names":["Canvas","styled","$renderWidth","$renderHeight"],"mappings":";AAEO,MAAMA,IAASC,EAAO;AAAA,IAIzB,CAAC,EAAE,cAAAC,EAAa,MAChB,OAAOA,KAAiB,WAAW,UAAUA,CAAY,QAAQ,UAAUA,CAAY,GAAG;AAAA,IAC1F,CAAC,EAAE,eAAAC,EAAc,MACjB,OAAOA,KAAkB,WAAW,WAAWA,CAAa,QAAQ,WAAWA,CAAa,GAAG;AAAA;"}

package/dist/features/ui/dot-lottie-animations/dot-lottie-animation.js

@@ -0,0 +1,93 @@
+import { jsx as d } from "react/jsx-runtime";
+import { DotLottieWorker as v } from "../../../node_modules/@lottiefiles/dotlottie-web/dist/index.js";
+import { memo as w, forwardRef as x, useRef as p, useImperativeHandle as A, useEffect as h } from "react";
+import R from "../layout/flex-view.js";
+import { Canvas as $ } from "./dot-lottie-animation-styled.js";
+const E = x(
+  (y, g) => {
+    const {
+      src: s,
+      data: f,
+      width: i = "100%",
+      height: a = "100%",
+      settings: l,
+      eventListeners: o,
+      onRender: u,
+      onError: c
+    } = y, m = p(null), t = p(null);
+    return A(
+      g,
+      () => ({
+        play: () => {
+          var e;
+          (e = t.current) == null || e.play();
+        },
+        pause: () => {
+          var e;
+          (e = t.current) == null || e.pause();
+        },
+        playSegments: (e) => {
+          var r, n;
+          (r = t.current) == null || r.setSegment(e[0], e[1]), (n = t.current) == null || n.play();
+        },
+        setFrame: (e) => {
+          var r;
+          (r = t.current) == null || r.setFrame(e);
+        }
+      }),
+      []
+    ), h(() => {
+      if (!m.current) return;
+      let e = !1;
+      return (() => {
+        try {
+          t.current = new v({
+            src: s,
+            data: f,
+            canvas: m.current,
+            autoplay: !0,
+            loop: !1,
+            renderConfig: {
+              autoResize: !0,
+              devicePixelRatio: window.devicePixelRatio,
+              freezeOnOffscreen: !0
+            },
+            ...l
+          }), requestAnimationFrame(() => {
+            e || u == null || u();
+          });
+        } catch (n) {
+          console.log(n), c == null || c();
+        }
+      })(), () => {
+        e = !0, t.current && (t.current.destroy(), t.current = null);
+      };
+    }, [s, l, u, c, f]), h(() => (o == null || o.forEach(
+      ({ name: e, callback: r }) => {
+        var n;
+        return (n = t.current) == null ? void 0 : n.addEventListener(e, r);
+      }
+    ), () => {
+      o == null || o.forEach(
+        ({ name: e, callback: r }) => {
+          var n;
+          return (n = t.current) == null ? void 0 : n.removeEventListener(e, r);
+        }
+      );
+    }), [o]), /* @__PURE__ */ d(R, { $width: i, $height: a, children: /* @__PURE__ */ d(
+      $,
+      {
+        ref: m,
+        $renderWidth: i,
+        $renderHeight: a,
+        width: typeof i == "number" ? i : void 0,
+        height: typeof a == "number" ? a : void 0
+      },
+      s
+    ) });
+  }
+), C = w(E);
+export {
+  C as default
+};
+//# sourceMappingURL=dot-lottie-animation.js.map

package/dist/features/ui/dot-lottie-animations/dot-lottie-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dot-lottie-animation.js","sources":["../../../../src/features/ui/dot-lottie-animations/dot-lottie-animation.tsx"],"sourcesContent":["import type {\n  AnimationSegment,\n  IDotLottieAnimationProps,\n  IDotLottieAnimationRef,\n} from './dot-lottie-types';\n\nimport { DotLottieWorker } from '@lottiefiles/dotlottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport * as Styled from './dot-lottie-animation-styled';\n\nconst DotLottieAnimation = forwardRef<IDotLottieAnimationRef, IDotLottieAnimationProps>(\n  (props, ref) => {\n    const {\n      src,\n      data,\n      width = '100%',\n      height = '100%',\n      settings,\n      eventListeners,\n      onRender,\n      onError,\n    } = props;\n\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const animationInstance = useRef<DotLottieWorker | null>(null);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        play: () => {\n          animationInstance.current?.play();\n        },\n        pause: () => {\n          animationInstance.current?.pause();\n        },\n        playSegments: (segments: AnimationSegment) => {\n          animationInstance.current?.setSegment(segments[0], segments[1]);\n          animationInstance.current?.play();\n        },\n        setFrame: (frame: number) => {\n          animationInstance.current?.setFrame(frame);\n        },\n      }),\n      [],\n    );\n\n    useEffect(() => {\n      if (!canvasRef.current) return;\n\n      let destroyed = false;\n\n      const loadAnimation = () => {\n        try {\n          animationInstance.current = new DotLottieWorker({\n            src,\n            data,\n            canvas: canvasRef.current!,\n            autoplay: true,\n            loop: false,\n            renderConfig: {\n              autoResize: true,\n              devicePixelRatio: window.devicePixelRatio,\n              freezeOnOffscreen: true,\n            },\n            ...settings,\n          });\n\n          requestAnimationFrame(() => {\n            if (destroyed) return;\n            onRender?.();\n          });\n        } catch (err) {\n          // eslint-disable-next-line no-console\n          console.log(err);\n          onError?.();\n        }\n      };\n\n      loadAnimation();\n\n      return () => {\n        destroyed = true;\n        if (animationInstance.current) {\n          animationInstance.current.destroy();\n          animationInstance.current = null;\n        }\n      };\n    }, [src, settings, onRender, onError, data]);\n\n    useEffect(() => {\n      eventListeners?.forEach(\n        ({ name, callback }) => animationInstance.current?.addEventListener(name, callback),\n      );\n\n      return () => {\n        eventListeners?.forEach(\n          ({ name, callback }) => animationInstance.current?.removeEventListener(name, callback),\n        );\n      };\n    }, [eventListeners]);\n\n    const isNumW = typeof width === 'number';\n    const isNumH = typeof height === 'number';\n\n    return (\n      <FlexView $width={width} $height={height}>\n        <Styled.Canvas\n          key={src}\n          ref={canvasRef}\n          $renderWidth={width}\n          $renderHeight={height}\n          width={isNumW ? width : undefined}\n          height={isNumH ? height : undefined}\n        />\n      </FlexView>\n    );\n  },\n);\n\nexport default memo(DotLottieAnimation);\n"],"names":["DotLottieAnimation","forwardRef","props","ref","src","data","width","height","settings","eventListeners","onRender","onError","canvasRef","useRef","animationInstance","useImperativeHandle","_a","segments","_b","frame","useEffect","destroyed","DotLottieWorker","err","name","callback","jsx","FlexView","Styled.Canvas","DotLottieAnimation$1","memo"],"mappings":";;;;;AAYA,MAAMA,IAAqBC;AAAA,EACzB,CAACC,GAAOC,MAAQ;AACR,UAAA;AAAA,MACJ,KAAAC;AAAA,MACA,MAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,QAAAC,IAAS;AAAA,MACT,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,SAAAC;AAAA,IACE,IAAAT,GAEEU,IAAYC,EAA0B,IAAI,GAC1CC,IAAoBD,EAA+B,IAAI;AAE7D,WAAAE;AAAA,MACEZ;AAAA,MACA,OAAO;AAAA,QACL,MAAM,MAAM;;AACV,WAAAa,IAAAF,EAAkB,YAAlB,QAAAE,EAA2B;AAAA,QAC7B;AAAA,QACA,OAAO,MAAM;;AACX,WAAAA,IAAAF,EAAkB,YAAlB,QAAAE,EAA2B;AAAA,QAC7B;AAAA,QACA,cAAc,CAACC,MAA+B;;AAC5C,WAAAD,IAAAF,EAAkB,YAAlB,QAAAE,EAA2B,WAAWC,EAAS,CAAC,GAAGA,EAAS,CAAC,KAC7DC,IAAAJ,EAAkB,YAAlB,QAAAI,EAA2B;AAAA,QAC7B;AAAA,QACA,UAAU,CAACC,MAAkB;;AACT,WAAAH,IAAAF,EAAA,YAAA,QAAAE,EAAS,SAASG;AAAA,QACtC;AAAA,MAAA;AAAA,MAEF,CAAC;AAAA,IAAA,GAGHC,EAAU,MAAM;AACV,UAAA,CAACR,EAAU,QAAS;AAExB,UAAIS,IAAY;AA6BF,cA3BQ,MAAM;AACtB,YAAA;AACgB,UAAAP,EAAA,UAAU,IAAIQ,EAAgB;AAAA,YAC9C,KAAAlB;AAAA,YACA,MAAAC;AAAA,YACA,QAAQO,EAAU;AAAA,YAClB,UAAU;AAAA,YACV,MAAM;AAAA,YACN,cAAc;AAAA,cACZ,YAAY;AAAA,cACZ,kBAAkB,OAAO;AAAA,cACzB,mBAAmB;AAAA,YACrB;AAAA,YACA,GAAGJ;AAAA,UAAA,CACJ,GAED,sBAAsB,MAAM;AAC1B,YAAIa,KACOX,KAAA,QAAAA;AAAA,UAAA,CACZ;AAAA,iBACMa,GAAK;AAEZ,kBAAQ,IAAIA,CAAG,GACLZ,KAAA,QAAAA;AAAA,QACZ;AAAA,MAAA,MAKK,MAAM;AACC,QAAAU,IAAA,IACRP,EAAkB,YACpBA,EAAkB,QAAQ,WAC1BA,EAAkB,UAAU;AAAA,MAC9B;AAAA,IACF,GACC,CAACV,GAAKI,GAAUE,GAAUC,GAASN,CAAI,CAAC,GAE3Ce,EAAU,OACQX,KAAA,QAAAA,EAAA;AAAA,MACd,CAAC,EAAE,MAAAe,GAAM,UAAAC,QAAe;;AAAA,gBAAAT,IAAAF,EAAkB,YAAlB,gBAAAE,EAA2B,iBAAiBQ,GAAMC;AAAA;AAAA,OAGrE,MAAM;AACK,MAAAhB,KAAA,QAAAA,EAAA;AAAA,QACd,CAAC,EAAE,MAAAe,GAAM,UAAAC,QAAe;;AAAA,kBAAAT,IAAAF,EAAkB,YAAlB,gBAAAE,EAA2B,oBAAoBQ,GAAMC;AAAA;AAAA;AAAA,IAC/E,IAED,CAAChB,CAAc,CAAC,GAMhB,gBAAAiB,EAAAC,GAAA,EAAS,QAAQrB,GAAO,SAASC,GAChC,UAAA,gBAAAmB;AAAA,MAACE;AAAAA,MAAA;AAAA,QAEC,KAAKhB;AAAA,QACL,cAAcN;AAAA,QACd,eAAeC;AAAA,QACf,OAVS,OAAOD,KAAU,WAUVA,IAAQ;AAAA,QACxB,QAVS,OAAOC,KAAW,WAUVA,IAAS;AAAA,MAAA;AAAA,MALrBH;AAAA,IAOT,EAAA,CAAA;AAAA,EAEJ;AACF,GAEeyB,IAAAC,EAAK9B,CAAkB;"}

package/dist/index.d.ts

@@ -2,10 +2,14 @@ import type { ButtonHTMLAttributes } from 'react';
 import type { Channel } from '@cuemath/cue-message-broker';
 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';
+import type { EventListener as EventListener_2 } from '@lottiefiles/dotlottie-web';
+import type { EventType } from '@lottiefiles/dotlottie-web';
 import { FC } from 'react';
 import type { FormEvent } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -74,6 +78,8 @@ export declare const AnimatedArc: React_2.FC<IAnimatedArcProps>;
 
 export declare const AnimatedAvatarMessage: NamedExoticComponent<IAnimatedAvatarMessageProps>;
 
+declare type AnimationSegment = [number, number];
+
 export declare const AppLoader: FC<IAppLoaderProps>;
 
 export declare const ArcButton: NamedExoticComponent<IArcButtonProps & {
@@ -363,6 +369,8 @@ export declare const DesmosCalculator: FC<IDesmosCalculatorProps>;
 
 export declare const DigitalMeter: FC<IDigitalMeterProps>;
 
+export declare const DotLottieAnimation: NamedExoticComponent<IDotLottieAnimationProps & RefAttributes<IDotLottieAnimationRef>>;
+
 export declare const DownIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const DraftIcon: React.FC<React.SVGProps<SVGSVGElement>>;
@@ -1412,6 +1420,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;
@@ -4524,6 +4541,8 @@ export declare const LOTTIE: {
     VIDEO: string;
 };
 
+declare type LottieSettings = Omit<Config, 'src' | 'canvas'>;
+
 export declare const LPARChapter: FC<ILPARChapterProps>;
 
 export declare const LPARMilestoneChapter: FC<ILPARMilestoneChapter>;
@@ -4932,6 +4951,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";
@@ -6486,6 +6517,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;
@@ -6498,6 +6541,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;