@cuemath/leap 3.2.16-link.2 → 3.2.16-mb

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

@@ -1,32 +1,32 @@
-import { jsx as E } from "react/jsx-runtime";
-import g from "lottie-web";
-import { memo as w, forwardRef as A, useRef as u, useImperativeHandle as b, useEffect as I } from "react";
-import $ from "../layout/flex-view.js";
-import { fetchLottie as x } from "./helper.js";
-const O = A((v, L) => {
+import { jsx as y } from "react/jsx-runtime";
+import E from "lottie-web";
+import { memo as A, forwardRef as w, useRef as u, useImperativeHandle as b, useEffect as I } from "react";
+import S from "../layout/flex-view.js";
+import { fetchLottie as $ } from "./helper.js";
+const x = w((v, L) => {
   const {
     src: m,
     width: h = "100%",
-    height: y = "100%",
+    height: g = "100%",
     settings: l,
-    eventListener: n,
-    onRender: o,
+    eventListener: o,
+    onRender: i,
     animateOnIntersect: c
   } = v, a = u(null), r = u(null), s = u(null);
   return b(
     L,
     () => ({
-      playSegments: (t, i) => {
+      playSegments: (t, n) => {
         var e;
-        return (e = r.current) == null ? void 0 : e.playSegments(t, i);
+        return (e = r.current) == null ? void 0 : e.playSegments(t, n);
       },
-      addEventListener: (t, i) => {
+      addEventListener: (t, n) => {
         var e;
-        return (e = r.current) == null ? void 0 : e.addEventListener(t, i);
+        return (e = r.current) == null ? void 0 : e.addEventListener(t, n);
       },
-      removeEventListener: (t, i) => {
+      removeEventListener: (t, n) => {
         var e;
-        return (e = r.current) == null ? void 0 : e.removeEventListener(t, i);
+        return (e = r.current) == null ? void 0 : e.removeEventListener(t, n);
       },
       play: () => {
         var t;
@@ -35,6 +35,10 @@ const O = A((v, L) => {
       stop: () => {
         var t;
         return (t = r.current) == null ? void 0 : t.stop();
+      },
+      goToAndStop: (t, n) => {
+        var e;
+        return (e = r.current) == null ? void 0 : e.goToAndStop(t, n);
       }
     }),
     []
@@ -42,32 +46,32 @@ const O = A((v, L) => {
     let t = !1;
     return (async () => {
       try {
-        const e = await x(m);
+        const e = await $(m);
         requestAnimationFrame(() => {
-          !a.current || t || (r.current = g.loadAnimation({
+          !a.current || t || (r.current = E.loadAnimation({
             container: a.current,
             animationData: e,
             loop: !0,
             autoplay: !0,
             ...l
           }), c && (s.current = new IntersectionObserver(
-            ([f]) => {
-              var d, p;
-              f && f.isIntersecting ? (d = r.current) == null || d.play() : (p = r.current) == null || p.pause();
+            ([d]) => {
+              var f, p;
+              d && d.isIntersecting ? (f = r.current) == null || f.play() : (p = r.current) == null || p.pause();
             },
             { threshold: 0 }
-          ), s.current.observe(a.current)), o == null || o(), n && r.current.addEventListener(n.name, n.callback));
+          ), s.current.observe(a.current)), i == null || i(), o && r.current.addEventListener(o.name, o.callback));
         });
       } catch (e) {
         throw Error(`Error loading Lottie animation: ${e}`);
       }
     })(), () => {
       var e;
-      t = !0, r.current && (n && r.current.removeEventListener(n.name, n.callback), c && ((e = s.current) == null || e.disconnect()), r.current.destroy());
+      t = !0, r.current && (o && r.current.removeEventListener(o.name, o.callback), c && ((e = s.current) == null || e.disconnect()), r.current.destroy());
     };
-  }, [m, n, o, c, l]), /* @__PURE__ */ E($, { ref: a, $width: h, $height: y });
-}), D = w(O);
+  }, [m, o, i, c, l]), /* @__PURE__ */ y(S, { ref: a, $width: h, $height: g });
+}), q = A(x);
 export {
-  D as default
+  q as default
 };
 //# sourceMappingURL=lottie-animation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationEventName, AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n  const {\n    src,\n    width = '100%',\n    height = '100%',\n    settings,\n    eventListener,\n    onRender,\n    animateOnIntersect,\n  } = props;\n\n  const container = useRef<HTMLDivElement>(null);\n  const animationInstance = useRef<AnimationItem | null>(null);\n  const intersectionObserver = useRef<IntersectionObserver | null>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      playSegments: (segments: AnimationSegment, forceFlag?: boolean) =>\n        animationInstance.current?.playSegments(segments, forceFlag),\n      addEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.addEventListener(eventName as AnimationEventName, callback),\n      removeEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.removeEventListener(eventName as AnimationEventName, callback),\n      play: () => animationInstance.current?.play(),\n      stop: () => animationInstance.current?.stop(),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    let destroyed = false;\n\n    const loadAnimation = async () => {\n      try {\n        const animationData = await fetchLottie(src);\n\n        // Wait for layout\n        // NOTE: Do not remove this as this is needed to fix canvas rendering on first layout.\n        requestAnimationFrame(() => {\n          if (!container.current || destroyed) return;\n\n          animationInstance.current = lottie.loadAnimation({\n            container: container.current,\n            animationData,\n            loop: true,\n            autoplay: true,\n            ...settings,\n          });\n\n          if (animateOnIntersect) {\n            intersectionObserver.current = new IntersectionObserver(\n              ([entry]) => {\n                if (entry && entry.isIntersecting) {\n                  animationInstance.current?.play();\n                } else {\n                  animationInstance.current?.pause();\n                }\n              },\n              { threshold: 0 },\n            );\n\n            intersectionObserver.current.observe(container.current);\n          }\n\n          onRender?.();\n          if (eventListener) {\n            animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n          }\n        });\n      } catch (error) {\n        throw Error(`Error loading Lottie animation: ${error}`);\n      }\n    };\n\n    loadAnimation();\n\n    return () => {\n      destroyed = true;\n      if (animationInstance.current) {\n        if (eventListener) {\n          animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n        }\n\n        if (animateOnIntersect) {\n          intersectionObserver.current?.disconnect();\n        }\n        animationInstance.current.destroy();\n      }\n    };\n  }, [src, eventListener, onRender, animateOnIntersect, settings]);\n\n  return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","animateOnIntersect","container","useRef","animationInstance","intersectionObserver","useImperativeHandle","segments","forceFlag","_a","eventName","callback","useEffect","destroyed","animationData","fetchLottie","lottie","entry","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACa,GAA4BC,MACzC;;AAAA,gBAAAC,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,aAAaF,GAAUC;AAAA;AAAA,MACpD,kBAAkB,CAACE,GAAmBC,MACpC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,iBAAiBC,GAAiCC;AAAA;AAAA,MAC/E,qBAAqB,CAACD,GAAmBC,MACvC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,oBAAoBC,GAAiCC;AAAA;AAAA,MAClF,MAAM,MAAM;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,MACvC,MAAM,MAAM;;AAAA,gBAAAA,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,IAAK;AAAA,IAE9C,CAAC;AAAA,EAAA,GAGHG,EAAU,MAAM;AACd,QAAIC,IAAY;AA4CF,YA1CQ,YAAY;AAC5B,UAAA;AACI,cAAAC,IAAgB,MAAMC,EAAYpB,CAAG;AAI3C,8BAAsB,MAAM;AACtB,UAAA,CAACO,EAAU,WAAWW,MAERT,EAAA,UAAUY,EAAO,cAAc;AAAA,YAC/C,WAAWd,EAAU;AAAA,YACrB,eAAAY;AAAA,YACA,MAAM;AAAA,YACN,UAAU;AAAA,YACV,GAAGhB;AAAA,UAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,YACjC,CAAC,CAACY,CAAK,MAAM;;AACP,cAAAA,KAASA,EAAM,kBACjBR,IAAAL,EAAkB,YAAlB,QAAAK,EAA2B,UAE3BS,IAAAd,EAAkB,YAAlB,QAAAc,EAA2B;AAAA,YAE/B;AAAA,YACA,EAAE,WAAW,EAAE;AAAA,UAAA,GAGIb,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAG7CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,QACvF,CACD;AAAA,eACMoB,GAAO;AACR,cAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,MACxD;AAAA,IAAA,MAKK,MAAM;;AACC,MAAAN,IAAA,IACRT,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFQ,IAAAJ,EAAqB,YAArB,QAAAI,EAA8B,eAEhCL,EAAkB,QAAQ;IAC5B;AAAA,EACF,GACC,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDsB,GAAS,EAAA,KAAKlB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcwB,IAAAC,EAAK/B,CAAe;"}
+{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationEventName, AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n  const {\n    src,\n    width = '100%',\n    height = '100%',\n    settings,\n    eventListener,\n    onRender,\n    animateOnIntersect,\n  } = props;\n\n  const container = useRef<HTMLDivElement>(null);\n  const animationInstance = useRef<AnimationItem | null>(null);\n  const intersectionObserver = useRef<IntersectionObserver | null>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      playSegments: (segments: AnimationSegment, forceFlag?: boolean) =>\n        animationInstance.current?.playSegments(segments, forceFlag),\n      addEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.addEventListener(eventName as AnimationEventName, callback),\n      removeEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.removeEventListener(eventName as AnimationEventName, callback),\n      play: () => animationInstance.current?.play(),\n      stop: () => animationInstance.current?.stop(),\n      goToAndStop: (v, f) => animationInstance.current?.goToAndStop(v, f),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    let destroyed = false;\n\n    const loadAnimation = async () => {\n      try {\n        const animationData = await fetchLottie(src);\n\n        // Wait for layout\n        // NOTE: Do not remove this as this is needed to fix canvas rendering on first layout.\n        requestAnimationFrame(() => {\n          if (!container.current || destroyed) return;\n\n          animationInstance.current = lottie.loadAnimation({\n            container: container.current,\n            animationData,\n            loop: true,\n            autoplay: true,\n            ...settings,\n          });\n\n          if (animateOnIntersect) {\n            intersectionObserver.current = new IntersectionObserver(\n              ([entry]) => {\n                if (entry && entry.isIntersecting) {\n                  animationInstance.current?.play();\n                } else {\n                  animationInstance.current?.pause();\n                }\n              },\n              { threshold: 0 },\n            );\n\n            intersectionObserver.current.observe(container.current);\n          }\n\n          onRender?.();\n          if (eventListener) {\n            animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n          }\n        });\n      } catch (error) {\n        throw Error(`Error loading Lottie animation: ${error}`);\n      }\n    };\n\n    loadAnimation();\n\n    return () => {\n      destroyed = true;\n      if (animationInstance.current) {\n        if (eventListener) {\n          animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n        }\n\n        if (animateOnIntersect) {\n          intersectionObserver.current?.disconnect();\n        }\n        animationInstance.current.destroy();\n      }\n    };\n  }, [src, eventListener, onRender, animateOnIntersect, settings]);\n\n  return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","animateOnIntersect","container","useRef","animationInstance","intersectionObserver","useImperativeHandle","segments","forceFlag","_a","eventName","callback","v","f","useEffect","destroyed","animationData","fetchLottie","lottie","entry","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACa,GAA4BC,MACzC;;AAAA,gBAAAC,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,aAAaF,GAAUC;AAAA;AAAA,MACpD,kBAAkB,CAACE,GAAmBC,MACpC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,iBAAiBC,GAAiCC;AAAA;AAAA,MAC/E,qBAAqB,CAACD,GAAmBC,MACvC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,oBAAoBC,GAAiCC;AAAA;AAAA,MAClF,MAAM,MAAM;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,MACvC,MAAM,MAAM;;AAAA,gBAAAA,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,MACvC,aAAa,CAACG,GAAGC,MAAM;;AAAA,gBAAAJ,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,YAAYG,GAAGC;AAAA;AAAA,IAAC;AAAA,IAEpE,CAAC;AAAA,EAAA,GAGHC,EAAU,MAAM;AACd,QAAIC,IAAY;AA4CF,YA1CQ,YAAY;AAC5B,UAAA;AACI,cAAAC,IAAgB,MAAMC,EAAYtB,CAAG;AAI3C,8BAAsB,MAAM;AACtB,UAAA,CAACO,EAAU,WAAWa,MAERX,EAAA,UAAUc,EAAO,cAAc;AAAA,YAC/C,WAAWhB,EAAU;AAAA,YACrB,eAAAc;AAAA,YACA,MAAM;AAAA,YACN,UAAU;AAAA,YACV,GAAGlB;AAAA,UAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,YACjC,CAAC,CAACc,CAAK,MAAM;;AACP,cAAAA,KAASA,EAAM,kBACjBV,IAAAL,EAAkB,YAAlB,QAAAK,EAA2B,UAE3BW,IAAAhB,EAAkB,YAAlB,QAAAgB,EAA2B;AAAA,YAE/B;AAAA,YACA,EAAE,WAAW,EAAE;AAAA,UAAA,GAGIf,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAG7CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,QACvF,CACD;AAAA,eACMsB,GAAO;AACR,cAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,MACxD;AAAA,IAAA,MAKK,MAAM;;AACC,MAAAN,IAAA,IACRX,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFQ,IAAAJ,EAAqB,YAArB,QAAAI,EAA8B,eAEhCL,EAAkB,QAAQ;IAC5B;AAAA,EACF,GACC,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDwB,GAAS,EAAA,KAAKpB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEc0B,IAAAC,EAAKjC,CAAe;"}

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

@@ -1,16 +1,16 @@
-import a from "styled-components";
-const p = a.div(
-  ({ theme: { colors: t, zIndex: o }, $isClosing: e }) => `
+import e from "styled-components";
+const s = e.div(
+  ({ theme: { colors: a, zIndex: t }, $isClosing: o }) => `
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${t.BLACK_T_60};
+  background-color: ${a.BLACK_T_60};
   backdrop-filter: blur(40px);
   display: flex;
-  animation: ${e ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
-  z-index: ${o.MODAL};
+  animation: ${o ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
+  z-index: ${t.MODAL};
 
   @keyframes backdropFadeIn {
     from {
@@ -30,20 +30,20 @@ const p = a.div(
     }
   }
 `
-), l = a.div(
-  ({ theme: { colors: t }, $isClosing: o, $width: e }) => `
+), c = e.div(
+  ({ theme: { colors: a }, $isClosing: t, $width: o }) => `
   position: relative;
   align-self: center;
   margin: 0 auto;
-  width: ${e};
-  background-color: ${t.WHITE_1};
-  border: 1px solid ${t.BLACK_1};
+  width: ${o};
+  background-color: ${a.WHITE_1};
+  border: 1px solid ${a.BLACK_1};
   transform-origin: center center;
-  animation: ${o ? "modalDisappear" : "modalAppear"} 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
+  animation: ${t ? "modalDisappear" : "modalAppear"} 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
   box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);
   
   /* Responsive behavior for smaller screens */
-  @media (max-width: calc(${e} + 80px)) {
+  @media (max-width: calc(${o} + 80px)) {
     width: 100%;
     max-width: 100%;
     height: 100%;
@@ -73,41 +73,35 @@ const p = a.div(
     }
   }
 `
-), c = a.div(
-  ({ $modalWidth: t }) => `
+), l = e.div(
+  ({ $modalWidth: a }) => `
   max-height: calc(100vh - 142px);
   overflow-y: auto;
 
-  @media (max-width: calc(${t} + 80px)) {
+  @media (max-width: calc(${a} + 80px)) {
     max-height: 100vh;
   }
 }`
-), m = a.div(
-  ({ theme: { colors: t }, $modalWidth: o }) => `
+), d = e.div(
+  ({ theme: { colors: a }, $modalWidth: t }) => `
   position: absolute;
   top: -56px;
   right: -40px;
-  color: ${t.WHITE_1};
+  color: ${a.WHITE_1};
   transition: all 0.2s ease;
   
   &:hover {
     transform: scale(1.05);
   }
 
-  @media (max-width: calc(${o} + 80px)) {
+  @media (max-width: calc(${t} + 80px)) {
     top: 16px;
     right: 16px;
-    color: ${t.BLACK_1};
+    color: ${a.BLACK_1};
   }
 `
-), d = a.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  width: 100%;
-`, i = 720, r = 800, n = 500, f = a.div(
-  ({ $isClosing: t }) => `
+), i = 720, r = 800, n = 500, m = e.div(
+  ({ $isClosing: a }) => `
   position: absolute;
   width: ${i}px;
   height: 100%;
@@ -124,7 +118,7 @@ const p = a.div(
   animation-timing-function: linear;
   animation-fill-mode: forwards;
   opacity: 0;
-  ${t ? `
+  ${a ? `
       animation: closeSpotlight;
       animation-duration: ${n}ms;
       animation-timing-function: linear;
@@ -150,48 +144,43 @@ const p = a.div(
     }
   }
 `
-), h = a.div(
-  ({ $isClosing: t }) => `
-    width: 100%;
-    height: max-content;
-    background: white; // Remove
-    overflow: scroll;
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    animation: ${t ? "slideOut" : "slideIn"} 0.3s forwards;
+), f = e.div(
+  ({ theme: { colors: a, zIndex: t }, $isClosing: o }) => `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${a.TRANSPARENT};
+  display: flex;
+  animation: ${o ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
+  z-index: ${t.MODAL};
 
-    @keyframes slideIn {
-      from {
-        transform: translateY(100%);
-        opacity: 0;
-      }
-      to {
-        transform: translateY(0%);
-        opacity: 1;
-      }
+  @keyframes backdropFadeIn {
+    from {
+      opacity: 0;
     }
-
-    @keyframes slideOut {
-      from {
-        transform: translateY(0%);
-        opacity: 1;
-      }
-      to {
-        transform: translateY(100%);
-        opacity: 0;
-      }
-    }
-  `
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes backdropFadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`
 );
 export {
-  l as BaseModal,
-  c as BaseModalContent,
-  h as BottomSheetModal,
-  m as CloseButtonContainer,
-  p as ModalContainer,
-  d as ModalLoaderWrapper,
-  f as SpotlightModal
+  c as BaseModal,
+  l as BaseModalContent,
+  d as CloseButtonContainer,
+  s as ModalContainer,
+  m as SpotlightModal,
+  f as TransparentModalContainer
 };
 //# sourceMappingURL=modal-styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n  ({ theme: { colors, zIndex }, $isClosing }) => `\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${colors.BLACK_T_60};\n  backdrop-filter: blur(40px);\n  display: flex;\n  animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n  z-index: ${zIndex.MODAL};\n\n  @keyframes backdropFadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  \n  @keyframes backdropFadeOut {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n  $isClosing?: boolean;\n  $width: string;\n}>(\n  ({ theme: { colors }, $isClosing, $width }) => `\n  position: relative;\n  align-self: center;\n  margin: 0 auto;\n  width: ${$width};\n  background-color: ${colors.WHITE_1};\n  border: 1px solid ${colors.BLACK_1};\n  transform-origin: center center;\n  animation: ${\n    $isClosing ? 'modalDisappear' : 'modalAppear'\n  } 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;\n  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);\n  \n  /* Responsive behavior for smaller screens */\n  @media (max-width: calc(${$width} + 80px)) {\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    border: none;\n  }\n  \n  @keyframes modalAppear {\n    0% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n    100% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n  }\n  \n  @keyframes modalDisappear {\n    0% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n    100% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n  }\n`,\n);\n\n/**\n * Scrollable content container inside the modal\n */\nconst BaseModalContent = styled.div<{ $modalWidth: string }>(\n  ({ $modalWidth }) => `\n  max-height: calc(100vh - 142px);\n  overflow-y: auto;\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    max-height: 100vh;\n  }\n}`,\n);\n\n/**\n * Container for the close button with responsive positioning\n */\nconst CloseButtonContainer = styled.div<{ $modalWidth: string }>(\n  ({ theme: { colors }, $modalWidth }) => `\n  position: absolute;\n  top: -56px;\n  right: -40px;\n  color: ${colors.WHITE_1};\n  transition: all 0.2s ease;\n  \n  &:hover {\n    transform: scale(1.05);\n  }\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    top: 16px;\n    right: 16px;\n    color: ${colors.BLACK_1};\n  }\n`,\n);\n\nconst ModalLoaderWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  width: 100%;\n`;\n\nconst spotlightWidth = 720;\nconst spotlightAnimationStartDuration = 800;\nconst spotlightAnimationEndDuration = 500;\n\nconst SpotlightModal = styled.div<{\n  $isClosing?: boolean;\n}>(\n  ({ $isClosing }) => `\n  position: absolute;\n  width: ${spotlightWidth}px;\n  height: 100%;\n  left: 50%;\n  margin-left: ${-(spotlightWidth / 2)}px;\n  clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 1) 0%,\n    rgba(0, 0, 0, 0) 100%\n  );\n  animation: openSpotlight;\n  animation-duration: ${spotlightAnimationStartDuration}ms;\n  animation-timing-function: linear;\n  animation-fill-mode: forwards;\n  opacity: 0;\n  ${\n    $isClosing\n      ? `\n      animation: closeSpotlight;\n      animation-duration: ${spotlightAnimationEndDuration}ms;\n      animation-timing-function: linear;\n      animation-fill-mode: forwards;\n      opacity: 1;\n    `\n      : ''\n  }\n\n  @keyframes openSpotlight {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes closeSpotlight {\n    from {\n      transform: rotateY(0);\n    }\n    to {\n      transform: rotateY(90deg);\n    }\n  }\n`,\n);\n\nconst BottomSheetModal = styled.div<{ $isClosing?: boolean }>(\n  ({ $isClosing }) => `\n    width: 100%;\n    height: max-content;\n    background: white; // Remove\n    overflow: scroll;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    animation: ${$isClosing ? 'slideOut' : 'slideIn'} 0.3s forwards;\n\n    @keyframes slideIn {\n      from {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n      to {\n        transform: translateY(0%);\n        opacity: 1;\n      }\n    }\n\n    @keyframes slideOut {\n      from {\n        transform: translateY(0%);\n        opacity: 1;\n      }\n      to {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n    }\n  `,\n);\n\nexport {\n  ModalContainer,\n  BaseModal,\n  BaseModalContent,\n  CloseButtonContainer,\n  SpotlightModal,\n  ModalLoaderWrapper,\n  BottomSheetModal,\n};\n"],"names":["ModalContainer","styled","colors","zIndex","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","ModalLoaderWrapper","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal","BottomSheetModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,QAAAC,EAAO,GAAG,YAAAC,QAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM3BF,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBE,IAAa,oBAAoB,gBAAgB;AAAA,aACnDD,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBzB,GAKME,IAAYJ,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAE,GAAY,QAAAE,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKJ,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA;AAAA,eAGhCE,IAAa,mBAAmB,aAClC;AAAA;AAAA;AAAA;AAAA,4BAI0BE,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BlC,GAKMC,IAAmBN,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAO,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBR,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAM,EAAkB,MAAA;AAAA;AAAA;AAAA;AAAA,WAI/BN,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGM,CAAW;AAAA;AAAA;AAAA,aAG1BN,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMQ,IAAqBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ5BU,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBb,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAG,EAAA,MAAiB;AAAA;AAAA,WAEXO,CAAc;AAAA;AAAA;AAAA,iBAGR,EAAEA,IAAiB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQdC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDR,IACI;AAAA;AAAA,4BAEoBS,CAA6B;AAAA;AAAA;AAAA;AAAA,QAKjD,EACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBF,GAEME,IAAmBd,EAAO;AAAA,EAC9B,CAAC,EAAE,YAAAG,EAAA,MAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASLA,IAAa,aAAa,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpD;"}
+{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n  ({ theme: { colors, zIndex }, $isClosing }) => `\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${colors.BLACK_T_60};\n  backdrop-filter: blur(40px);\n  display: flex;\n  animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n  z-index: ${zIndex.MODAL};\n\n  @keyframes backdropFadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  \n  @keyframes backdropFadeOut {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n  $isClosing?: boolean;\n  $width: string;\n}>(\n  ({ theme: { colors }, $isClosing, $width }) => `\n  position: relative;\n  align-self: center;\n  margin: 0 auto;\n  width: ${$width};\n  background-color: ${colors.WHITE_1};\n  border: 1px solid ${colors.BLACK_1};\n  transform-origin: center center;\n  animation: ${\n    $isClosing ? 'modalDisappear' : 'modalAppear'\n  } 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;\n  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);\n  \n  /* Responsive behavior for smaller screens */\n  @media (max-width: calc(${$width} + 80px)) {\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    border: none;\n  }\n  \n  @keyframes modalAppear {\n    0% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n    100% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n  }\n  \n  @keyframes modalDisappear {\n    0% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n    100% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n  }\n`,\n);\n\n/**\n * Scrollable content container inside the modal\n */\nconst BaseModalContent = styled.div<{ $modalWidth: string }>(\n  ({ $modalWidth }) => `\n  max-height: calc(100vh - 142px);\n  overflow-y: auto;\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    max-height: 100vh;\n  }\n}`,\n);\n\n/**\n * Container for the close button with responsive positioning\n */\nconst CloseButtonContainer = styled.div<{ $modalWidth: string }>(\n  ({ theme: { colors }, $modalWidth }) => `\n  position: absolute;\n  top: -56px;\n  right: -40px;\n  color: ${colors.WHITE_1};\n  transition: all 0.2s ease;\n  \n  &:hover {\n    transform: scale(1.05);\n  }\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    top: 16px;\n    right: 16px;\n    color: ${colors.BLACK_1};\n  }\n`,\n);\n\nconst spotlightWidth = 720;\nconst spotlightAnimationStartDuration = 800;\nconst spotlightAnimationEndDuration = 500;\n\nconst SpotlightModal = styled.div<{\n  $isClosing?: boolean;\n}>(\n  ({ $isClosing }) => `\n  position: absolute;\n  width: ${spotlightWidth}px;\n  height: 100%;\n  left: 50%;\n  margin-left: ${-(spotlightWidth / 2)}px;\n  clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 1) 0%,\n    rgba(0, 0, 0, 0) 100%\n  );\n  animation: openSpotlight;\n  animation-duration: ${spotlightAnimationStartDuration}ms;\n  animation-timing-function: linear;\n  animation-fill-mode: forwards;\n  opacity: 0;\n  ${\n    $isClosing\n      ? `\n      animation: closeSpotlight;\n      animation-duration: ${spotlightAnimationEndDuration}ms;\n      animation-timing-function: linear;\n      animation-fill-mode: forwards;\n      opacity: 1;\n    `\n      : ''\n  }\n\n  @keyframes openSpotlight {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes closeSpotlight {\n    from {\n      transform: rotateY(0);\n    }\n    to {\n      transform: rotateY(90deg);\n    }\n  }\n`,\n);\n\nconst TransparentModalContainer = styled.div<{ $isClosing?: boolean }>(\n  ({ theme: { colors, zIndex }, $isClosing }) => `\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${colors.TRANSPARENT};\n  display: flex;\n  animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n  z-index: ${zIndex.MODAL};\n\n  @keyframes backdropFadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  \n  @keyframes backdropFadeOut {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n`,\n);\n\nexport {\n  ModalContainer,\n  BaseModal,\n  BaseModalContent,\n  CloseButtonContainer,\n  SpotlightModal,\n  TransparentModalContainer,\n};\n"],"names":["ModalContainer","styled","colors","zIndex","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal","TransparentModalContainer"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,QAAAC,EAAO,GAAG,YAAAC,QAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM3BF,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBE,IAAa,oBAAoB,gBAAgB;AAAA,aACnDD,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBzB,GAKME,IAAYJ,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAE,GAAY,QAAAE,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKJ,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA;AAAA,eAGhCE,IAAa,mBAAmB,aAClC;AAAA;AAAA;AAAA;AAAA,4BAI0BE,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BlC,GAKMC,IAAmBN,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAO,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBR,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAM,EAAkB,MAAA;AAAA;AAAA;AAAA;AAAA,WAI/BN,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGM,CAAW;AAAA;AAAA;AAAA,aAG1BN,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMQ,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBZ,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAG,EAAA,MAAiB;AAAA;AAAA,WAEXM,CAAc;AAAA;AAAA;AAAA,iBAGR,EAAEA,IAAiB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQdC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDP,IACI;AAAA;AAAA,4BAEoBQ,CAA6B;AAAA;AAAA;AAAA;AAAA,QAKjD,EACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBF,GAEME,IAA4Bb,EAAO;AAAA,EACvC,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,QAAAC,EAAO,GAAG,YAAAC,QAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM3BF,EAAO,WAAW;AAAA;AAAA,eAEzBE,IAAa,oBAAoB,gBAAgB;AAAA,aACnDD,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBzB;"}

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

@@ -1,55 +1,19 @@
-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 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();
-  }, []);
-  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,
-    {
-      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 })
-    }
-  ) }) }) : s === "spotlight" ? /* @__PURE__ */ r(d, { $isClosing: o, children: /* @__PURE__ */ r(
-    a,
-    {
-      fallback: /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(h, { height: "100vh" }) }),
-      onError: i,
-      children: /* @__PURE__ */ f(
-        n,
-        {
-          fallback: /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(c, { height: "100vh" }) }),
-          children: [
-            /* @__PURE__ */ r(B, { $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,
-      {
-        fallback: /* @__PURE__ */ r(h, { height: "50vh", size: "compact" }),
-        onError: i,
-        children: /* @__PURE__ */ r(n, { fallback: /* @__PURE__ */ r(c, { height: "50vh" }), children: e })
-      }
-    ) })
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { memo as m } from "react";
+import h from "../../../assets/line-icons/icons/cross.js";
+import c from "../buttons/clickable/clickable.js";
+import { ModalContainer as n, SpotlightModal as f, TransparentModalContainer as p, BaseModal as C, CloseButtonContainer as $, BaseModalContent as u } from "./modal-styled.js";
+const W = m(({ modal: a, isClosing: o = !1, onClose: s }) => {
+  const { renderAs: t, element: r, modalWidth: l, isDismissable: d } = a;
+  return t === "spotlight" ? /* @__PURE__ */ i(n, { $isClosing: o, children: [
+    /* @__PURE__ */ e(f, { $isClosing: o }),
+    r
+  ] }) : t === "fullscreen-transparent" ? /* @__PURE__ */ e(p, { $isClosing: o, children: r }) : /* @__PURE__ */ e(n, { $isClosing: o, children: /* @__PURE__ */ i(C, { $isClosing: o, $width: l, children: [
+    d !== !1 && /* @__PURE__ */ e($, { $modalWidth: l, children: /* @__PURE__ */ e(c, { label: "Close", onClick: s, children: /* @__PURE__ */ e(h, { width: 40, height: 40 }) }) }),
+    /* @__PURE__ */ e(u, { $modalWidth: l, children: r })
   ] }) });
 });
 export {
-  q as default
+  W 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 { memo } from 'react';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Clickable from '../buttons/clickable/clickable';\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  if (renderAs === 'spotlight') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing}>\n        <Styled.SpotlightModal $isClosing={isClosing} />\n        {element}\n      </Styled.ModalContainer>\n    );\n  }\n\n  if (renderAs === 'fullscreen-transparent') {\n    return (\n      <Styled.TransparentModalContainer $isClosing={isClosing}>\n        {element}\n      </Styled.TransparentModalContainer>\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}>{element}</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","jsxs","Styled.ModalContainer","jsx","Styled.SpotlightModal","Styled.TransparentModalContainer","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;AAaM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AAC7E,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,MAAkBN;AAEzD,SAAIG,MAAa,cAEZ,gBAAAI,EAAAC,GAAA,EAAsB,YAAYP,GACjC,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAsB,YAAYT,EAAW,CAAA;AAAA,IAC7CG;AAAA,EACH,EAAA,CAAA,IAIAD,MAAa,6CAEZQ,GAAA,EAAiC,YAAYV,GAC3C,UACHG,EAAA,CAAA,IAKD,gBAAAK,EAAAD,GAAA,EAAsB,YAAYP,GACjC,UAAC,gBAAAM,EAAAK,GAAA,EAAiB,YAAYX,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBO,GAAA,EAA4B,aAAaR,GACxC,4BAACS,GAAU,EAAA,OAAM,SAAQ,SAASZ,GAChC,4BAACa,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,sBAEDC,GAAA,EAAwB,aAAaX,GAAa,UAAQD,GAAA;AAAA,EAAA,EAC7D,CAAA,EACF,CAAA;AAEJ,CAAC;"}

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

@@ -1,6 +1,6 @@
 import e from "styled-components";
 import n from "../layout/flex-view.js";
-const p = e.div`
+const r = e.div`
   position: absolute;
   top: ${({ $top: t }) => t}px;
   left: ${({ $left: t }) => t}px;
@@ -11,22 +11,15 @@ const p = e.div`
   align-items: end;
   z-index: ${({ $zIndex: t }) => t};
   pointer-events: none;
-`, r = e(n)`
-  div {
-    // Inner container of Lottie Component
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+`, p = e(n)`
+  overflow: hidden;
 
-  svg {
-    width: 33.84px !important;
-    height: 47.27px !important;
-    display: block;
+  & svg {
+    transform: scale(3.5) !important;
   }
 `;
 export {
-  r as NudgeLottieContainer,
-  p as NudgeWrapper
+  p as NudgeLottieContainer,
+  r as NudgeWrapper
 };
 //# sourceMappingURL=nudge-styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nudge-styled.js","sources":["../../../../src/features/ui/nudge/nudge-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\n\ninterface NudgeWrapperProps {\n  $top: number;\n  $left: number;\n  $zIndex: number;\n}\n\nexport const NudgeWrapper = styled.div<NudgeWrapperProps>`\n  position: absolute;\n  top: ${({ $top }) => $top}px;\n  left: ${({ $left }) => $left}px;\n  height: max-content;\n  width: max-content;\n  display: flex;\n  justify-content: center;\n  align-items: end;\n  z-index: ${({ $zIndex }) => $zIndex};\n  pointer-events: none;\n`;\n\nexport const NudgeLottieContainer = styled(FlexView)`\n  div {\n    // Inner container of Lottie Component\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  svg {\n    width: 33.84px !important;\n    height: 47.27px !important;\n    display: block;\n  }\n`;\n"],"names":["NudgeWrapper","styled","$top","$left","$zIndex","NudgeLottieContainer","FlexView"],"mappings":";;AAUO,MAAMA,IAAeC,EAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA,UACjB,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMjB,CAAC,EAAE,SAAAC,EAAQ,MAAMA,CAAO;AAAA;AAAA,GAIxBC,IAAuBJ,EAAOK,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"nudge-styled.js","sources":["../../../../src/features/ui/nudge/nudge-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\n\ninterface NudgeWrapperProps {\n  $top: number;\n  $left: number;\n  $zIndex: number;\n}\n\nexport const NudgeWrapper = styled.div<NudgeWrapperProps>`\n  position: absolute;\n  top: ${({ $top }) => $top}px;\n  left: ${({ $left }) => $left}px;\n  height: max-content;\n  width: max-content;\n  display: flex;\n  justify-content: center;\n  align-items: end;\n  z-index: ${({ $zIndex }) => $zIndex};\n  pointer-events: none;\n`;\n\nexport const NudgeLottieContainer = styled(FlexView)`\n  overflow: hidden;\n\n  & svg {\n    transform: scale(3.5) !important;\n  }\n`;\n"],"names":["NudgeWrapper","styled","$top","$left","$zIndex","NudgeLottieContainer","FlexView"],"mappings":";;AAUO,MAAMA,IAAeC,EAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA,UACjB,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMjB,CAAC,EAAE,SAAAC,EAAQ,MAAMA,CAAO;AAAA;AAAA,GAIxBC,IAAuBJ,EAAOK,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/ui/nudge/nudge.js

@@ -1,18 +1,17 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { memo as n } from "react";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import { LOTTIE as d } from "../../../assets/lottie/lottie.js";
-import p from "../lottie-animation/lottie-animation.js";
-import { NudgeWrapper as f, NudgeLottieContainer as s } from "./nudge-styled.js";
-const u = ({
-  content: o,
-  nudgePointerX: r = 0,
-  nudgePointerY: e = 0,
+import m from "../lottie-animation/lottie-animation.js";
+import { NudgeWrapper as p, NudgeLottieContainer as s } from "./nudge-styled.js";
+const f = ({
+  content: r,
+  nudgePointerX: e = 0,
+  nudgePointerY: o = 0,
   zIndex: i = 100
-}) => /* @__PURE__ */ m(f, { $top: e, $left: r, $zIndex: i, children: [
-  /* @__PURE__ */ t(s, { $height: 60, $width: 60, children: /* @__PURE__ */ t(p, { src: d.NUDGE_TAP }) }),
-  o
-] }), N = n(u);
+}) => /* @__PURE__ */ n(p, { $top: o, $left: e, $zIndex: i, children: [
+  /* @__PURE__ */ t(s, { $height: 64, $width: 64, children: /* @__PURE__ */ t(m, { src: d.NUDGE_TAP }) }),
+  r
+] }), g = f;
 export {
-  N as default
+  g as default
 };
 //# sourceMappingURL=nudge.js.map

package/dist/features/ui/nudge/nudge.js.map

@@ -1 +1 @@
-{"version":3,"file":"nudge.js","sources":["../../../../src/features/ui/nudge/nudge.tsx"],"sourcesContent":["import type { INudgeProps } from './nudge-types';\n\nimport React, { memo } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport LottieAnimation from '../lottie-animation/lottie-animation';\nimport * as S from './nudge-styled';\n\nconst Nudge: React.FC<INudgeProps> = ({\n  content,\n  nudgePointerX = 0,\n  nudgePointerY = 0,\n  zIndex = 100,\n}) => {\n  return (\n    <S.NudgeWrapper $top={nudgePointerY} $left={nudgePointerX} $zIndex={zIndex}>\n      <S.NudgeLottieContainer $height={60} $width={60}>\n        <LottieAnimation src={LOTTIE.NUDGE_TAP} />\n      </S.NudgeLottieContainer>\n      {content}\n    </S.NudgeWrapper>\n  );\n};\n\nexport default memo(Nudge);\n"],"names":["Nudge","content","nudgePointerX","nudgePointerY","zIndex","jsxs","S.NudgeWrapper","jsx","S.NudgeLottieContainer","LottieAnimation","LOTTIE","Nudge$1","memo"],"mappings":";;;;;AAQA,MAAMA,IAA+B,CAAC;AAAA,EACpC,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,QAAAC,IAAS;AACX,MAEI,gBAAAC,EAACC,GAAA,EAAe,MAAMH,GAAe,OAAOD,GAAe,SAASE,GAClE,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAuB,SAAS,IAAI,QAAQ,IAC3C,UAAA,gBAAAD,EAACE,GAAgB,EAAA,KAAKC,EAAO,UAAA,CAAW,EAC1C,CAAA;AAAA,EACCT;AACH,EAAA,CAAA,GAIWU,IAAAC,EAAKZ,CAAK;"}
+{"version":3,"file":"nudge.js","sources":["../../../../src/features/ui/nudge/nudge.tsx"],"sourcesContent":["import type { INudgeProps } from './nudge-types';\n\nimport React from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport LottieAnimation from '../lottie-animation/lottie-animation';\nimport * as S from './nudge-styled';\n\nconst Nudge: React.FC<INudgeProps> = ({\n  content,\n  nudgePointerX = 0,\n  nudgePointerY = 0,\n  zIndex = 100,\n}) => {\n  return (\n    <S.NudgeWrapper $top={nudgePointerY} $left={nudgePointerX} $zIndex={zIndex}>\n      <S.NudgeLottieContainer $height={64} $width={64}>\n        <LottieAnimation src={LOTTIE.NUDGE_TAP} />\n      </S.NudgeLottieContainer>\n      {content}\n    </S.NudgeWrapper>\n  );\n};\n\nexport default Nudge;\n"],"names":["Nudge","content","nudgePointerX","nudgePointerY","zIndex","jsxs","S.NudgeWrapper","jsx","S.NudgeLottieContainer","LottieAnimation","LOTTIE","Nudge$1"],"mappings":";;;;AAQA,MAAMA,IAA+B,CAAC;AAAA,EACpC,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,QAAAC,IAAS;AACX,MAEI,gBAAAC,EAACC,GAAA,EAAe,MAAMH,GAAe,OAAOD,GAAe,SAASE,GAClE,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAuB,SAAS,IAAI,QAAQ,IAC3C,UAAA,gBAAAD,EAACE,GAAgB,EAAA,KAAKC,EAAO,UAAA,CAAW,EAC1C,CAAA;AAAA,EACCT;AACH,EAAA,CAAA,GAIJU,IAAeX;"}

package/dist/features/ui/streak-icon/streak-icon-styled.js

@@ -1,4 +1,4 @@
-import i, { keyframes as o } from "styled-components";
+import t, { keyframes as o } from "styled-components";
 const n = o`
 66%{
   opacity: 0;
@@ -6,29 +6,29 @@ const n = o`
 33%{
   opacity: 1;
 }
-`, a = i.div`
+`, a = t.div`
   height: 32px;
   width: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  cursor: ${({ isInteractive: t }) => t ? "pointer" : "default"};
-`, s = i.div`
+  cursor: pointer;
+`, s = t.div`
   height: 90%;
   width: 90%;
   position: absolute;
-  background: ${({ theme: t }) => t.colors.BLACK_1};
+  background: ${({ theme: i }) => i.colors.BLACK_1};
   border-radius: 24px;
-`, d = i.div`
+`, d = t.div`
   height: 90%;
   width: 90%;
   position: absolute;
-  background: ${({ theme: t }) => t.colors.RED};
+  background: ${({ theme: i }) => i.colors.RED};
   border-radius: 32px;
   animation: ${n}
-    ${({ $blinkDelay: t, $blinkDuration: e }) => `${e + t}ms linear infinite`};
-`, c = i.div`
+    ${({ $blinkDelay: i, $blinkDuration: e }) => `${e + i}ms linear infinite`};
+`, c = t.div`
   height: 100%;
   width: 100%;
   display: flex;
@@ -38,22 +38,22 @@ const n = o`
   align-self: center;
   padding-top: 6px;
   z-index: 1;
-`, l = i.div`
+`, p = t.div`
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-`, p = i.img`
+`, l = t.img`
   width: 100%;
   height: 100%;
 `;
 export {
   d as StreakBg,
   c as StreakContent,
-  l as StreakImg,
+  p as StreakImg,
   s as StreakStaticBg,
   a as StreakWrapper,
-  p as StyledImg
+  l as StyledImg
 };
 //# sourceMappingURL=streak-icon-styled.js.map