@cuemath/leap 3.2.31 → 3.2.32-m

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

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

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

@@ -1 +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  ILottieAnimationProps,\n  ILottieAnimationRef,\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<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n  const {\n    src,\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      playSegments: (segments: AnimationSegment) => {\n        animationInstance.current?.setSegment(segments[0], segments[1]);\n        animationInstance.current?.play();\n      },\n      play: () => {\n        animationInstance.current?.play();\n      },\n      pause: () => {\n        animationInstance.current?.pause();\n      },\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!canvasRef.current) return;\n\n    try {\n      animationInstance.current = new DotLottieWorker({\n        src,\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        onRender?.();\n      });\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.log(err);\n      onError?.();\n    }\n  }, [src, settings, onRender, onError]);\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      animationInstance.current?.destroy();\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        ref={canvasRef}\n        $renderWidth={width}\n        $renderHeight={height}\n        width={isNumW ? width : undefined}\n        height={isNumH ? height : undefined}\n      />\n    </FlexView>\n  );\n});\n\nexport default memo(DotLottieAnimation);\n"],"names":["DotLottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListeners","onRender","onError","canvasRef","useRef","animationInstance","useImperativeHandle","segments","_a","_b","useEffect","DotLottieWorker","err","name","callback","jsx","FlexView","Styled.Canvas","dotLottieAnimation","memo"],"mappings":";;;;;AAYA,MAAMA,IAAqBC,EAAuD,CAACC,GAAOC,MAAQ;AAC1F,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAA0B,IAAI,GAC1CC,IAAoBD,EAA+B,IAAI;AAE7D,SAAAE;AAAA,IACEX;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACY,MAA+B;;AAC5C,SAAAC,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B,WAAWD,EAAS,CAAC,GAAGA,EAAS,CAAC,KAC7DE,IAAAJ,EAAkB,YAAlB,QAAAI,EAA2B;AAAA,MAC7B;AAAA,MACA,MAAM,MAAM;;AACV,SAAAD,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,MAC7B;AAAA,MACA,OAAO,MAAM;;AACX,SAAAA,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,MAC7B;AAAA,IAAA;AAAA,IAEF,CAAC;AAAA,EAAA,GAGHE,EAAU,MAAM;AACV,QAACP,EAAU;AAEX,UAAA;AACgB,QAAAE,EAAA,UAAU,IAAIM,EAAgB;AAAA,UAC9C,KAAAf;AAAA,UACA,QAAQO,EAAU;AAAA,UAClB,UAAU;AAAA,UACV,MAAM;AAAA,UACN,cAAc;AAAA,YACZ,YAAY;AAAA,YACZ,kBAAkB,OAAO;AAAA,YACzB,mBAAmB;AAAA,UACrB;AAAA,UACA,GAAGJ;AAAA,QAAA,CACJ,GAED,sBAAsB,MAAM;AACf,UAAAE,KAAA,QAAAA;AAAA,QAAA,CACZ;AAAA,eACMW,GAAK;AAEZ,gBAAQ,IAAIA,CAAG,GACLV,KAAA,QAAAA;AAAA,MACZ;AAAA,KACC,CAACN,GAAKG,GAAUE,GAAUC,CAAO,CAAC,GAErCQ,EAAU,OACQV,KAAA,QAAAA,EAAA;AAAA,IACd,CAAC,EAAE,MAAAa,GAAM,UAAAC,QAAe;;AAAA,cAAAN,IAAAH,EAAkB,YAAlB,gBAAAG,EAA2B,iBAAiBK,GAAMC;AAAA;AAAA,KAGrE,MAAM;;AACK,IAAAd,KAAA,QAAAA,EAAA;AAAA,MACd,CAAC,EAAE,MAAAa,GAAM,UAAAC,QAAe;;AAAA,gBAAAN,IAAAH,EAAkB,YAAlB,gBAAAG,EAA2B,oBAAoBK,GAAMC;AAAA;AAAA,QAE/EN,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,EAAQ,IAEpC,CAACR,CAAc,CAAC,GAMhB,gBAAAe,EAAAC,GAAA,EAAS,QAAQnB,GAAO,SAASC,GAChC,UAAA,gBAAAiB;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,KAAKd;AAAA,MACL,cAAcN;AAAA,MACd,eAAeC;AAAA,MACf,OATS,OAAOD,KAAU,WASVA,IAAQ;AAAA,MACxB,QATS,OAAOC,KAAW,WASVA,IAAS;AAAA,IAAA;AAAA,EAE9B,EAAA,CAAA;AAEJ,CAAC,GAEcoB,IAAAC,EAAK3B,CAAkB;"}
+{"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/features/ui/lottie-animation/lottie-animation.js

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

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      setLoop: (loop: boolean) => {\n        if (animationInstance.current) {\n          animationInstance.current.loop = loop;\n        }\n      },\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","loop","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,SAAS,CAACG,MAAkB;AAC1B,QAAIR,EAAkB,YACpBA,EAAkB,QAAQ,OAAOQ;AAAA,MAErC;AAAA,IAAA;AAAA,IAEF,CAAC;AAAA,EAAA,GAGHC,EAAU,MAAM;AACd,QAAIC,IAAY;AA4CF,YA1CQ,YAAY;AAC5B,UAAA;AACI,cAAAC,IAAgB,MAAMC,EAAYrB,CAAG;AAI3C,8BAAsB,MAAM;AACtB,UAAA,CAACO,EAAU,WAAWY,MAERV,EAAA,UAAUa,EAAO,cAAc;AAAA,YAC/C,WAAWf,EAAU;AAAA,YACrB,eAAAa;AAAA,YACA,MAAM;AAAA,YACN,UAAU;AAAA,YACV,GAAGjB;AAAA,UAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,YACjC,CAAC,CAACa,CAAK,MAAM;;AACP,cAAAA,KAASA,EAAM,kBACjBT,IAAAL,EAAkB,YAAlB,QAAAK,EAA2B,UAE3BU,IAAAf,EAAkB,YAAlB,QAAAe,EAA2B;AAAA,YAE/B;AAAA,YACA,EAAE,WAAW,EAAE;AAAA,UAAA,GAGId,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAG7CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,QACvF,CACD;AAAA,eACMqB,GAAO;AACR,cAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,MACxD;AAAA,IAAA,MAKK,MAAM;;AACC,MAAAN,IAAA,IACRV,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,qBAEvDuB,GAAS,EAAA,KAAKnB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcyB,IAAAC,EAAKhC,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    onError,\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        onError?.();\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, onError]);\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","onError","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,SAAAC;AAAA,IACA,oBAAAC;AAAA,EACE,IAAAT,GAEEU,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEb;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACc,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;AA6CF,YA3CQ,YAAY;AAC5B,UAAA;AACI,cAAAC,IAAgB,MAAMC,EAAYvB,CAAG;AAI3C,8BAAsB,MAAM;AACtB,UAAA,CAACQ,EAAU,WAAWa,MAERX,EAAA,UAAUc,EAAO,cAAc;AAAA,YAC/C,WAAWhB,EAAU;AAAA,YACrB,eAAAc;AAAA,YACA,MAAM;AAAA,YACN,UAAU;AAAA,YACV,GAAGnB;AAAA,UAAA,CACJ,GAEGI,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,IAG7CH,KAAA,QAAAA,KACPD,KACFM,EAAkB,QAAQ,iBAAiBN,EAAc,MAAMA,EAAc,QAAQ;AAAA,QACvF,CACD;AAAA,eACMuB,GAAO;AACJ,cAAArB,KAAA,QAAAA,KACJ,MAAM,mCAAmCqB,CAAK,EAAE;AAAA,MACxD;AAAA,IAAA,MAKK,MAAM;;AACC,MAAAN,IAAA,IACRX,EAAkB,YAChBN,KACFM,EAAkB,QAAQ,oBAAoBN,EAAc,MAAMA,EAAc,QAAQ,GAGtFG,OACFQ,IAAAJ,EAAqB,YAArB,QAAAI,EAA8B,eAEhCL,EAAkB,QAAQ;IAC5B;AAAA,EACF,GACC,CAACV,GAAKI,GAAeC,GAAUE,GAAoBJ,GAAUG,CAAO,CAAC,qBAEhEsB,GAAS,EAAA,KAAKpB,GAAW,QAAQP,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEc2B,IAAAC,EAAKlC,CAAe;"}

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

@@ -1,6 +1,6 @@
 import a from "styled-components";
-const p = a.div(
-  ({ theme: { colors: t, zIndex: o }, $isClosing: e }) => `
+const l = a.div(
+  ({ theme: { colors: t, zIndex: o }, $isClosing: e, $blocking: i }) => `
   position: fixed;
   top: 0;
   left: 0;
@@ -10,6 +10,7 @@ const p = a.div(
   backdrop-filter: blur(40px);
   display: flex;
   animation: ${e ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
+  pointer-events: ${i ? "auto" : "none"};
   z-index: ${o.MODAL};
 
   @keyframes backdropFadeIn {
@@ -30,7 +31,7 @@ const p = a.div(
     }
   }
 `
-), l = a.div(
+), d = a.div(
   ({ theme: { colors: t }, $isClosing: o, $width: e }) => `
   position: relative;
   align-self: center;
@@ -100,19 +101,19 @@ const p = a.div(
     color: ${t.BLACK_1};
   }
 `
-), d = a.div`
+), f = a.div`
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   width: 100%;
-`, i = 720, r = 800, n = 500, f = a.div(
+`, r = 720, n = 800, s = 500, h = a.div(
   ({ $isClosing: t }) => `
   position: absolute;
-  width: ${i}px;
+  width: ${r}px;
   height: 100%;
   left: 50%;
-  margin-left: ${-(i / 2)}px;
+  margin-left: ${-(r / 2)}px;
   clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);
   background: linear-gradient(
     180deg,
@@ -120,13 +121,13 @@ const p = a.div(
     rgba(0, 0, 0, 0) 100%
   );
   animation: openSpotlight;
-  animation-duration: ${r}ms;
+  animation-duration: ${n}ms;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
   opacity: 0;
   ${t ? `
       animation: closeSpotlight;
-      animation-duration: ${n}ms;
+      animation-duration: ${s}ms;
       animation-timing-function: linear;
       animation-fill-mode: forwards;
       opacity: 1;
@@ -150,7 +151,38 @@ const p = a.div(
     }
   }
 `
-), h = a.div(
+), x = a.div(
+  ({ theme: { colors: t, zIndex: o }, $isClosing: e, $blocking: i }) => `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${t.TRANSPARENT};
+  display: flex;
+  pointer-events: ${i ? "auto" : "none"};
+  animation: ${e ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
+  z-index: ${o.MODAL};
+
+  @keyframes backdropFadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes backdropFadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`
+), g = a.div(
   ({ $isClosing: t }) => `
     width: 100%;
     height: max-content;
@@ -185,12 +217,13 @@ const p = a.div(
   `
 );
 export {
-  l as BaseModal,
+  d as BaseModal,
   c as BaseModalContent,
-  h as BottomSheetModal,
+  g as BottomSheetModal,
   m as CloseButtonContainer,
-  p as ModalContainer,
-  d as ModalLoaderWrapper,
-  f as SpotlightModal
+  l as ModalContainer,
+  f as ModalLoaderWrapper,
+  h as SpotlightModal,
+  x 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    overflow: auto;\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,iBAQLA,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; $blocking?: boolean }>(\n  ({ theme: { colors, zIndex }, $isClosing, $blocking }) => `\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  pointer-events: ${$blocking ? 'auto' : 'none'};\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 TransparentModalContainer = styled.div<{ $isClosing?: boolean; $blocking?: boolean }>(\n  ({ theme: { colors, zIndex }, $isClosing, $blocking }) => `\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${colors.TRANSPARENT};\n  display: flex;\n  pointer-events: ${$blocking ? 'auto' : 'none'};\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\nconst BottomSheetModal = styled.div<{ $isClosing?: boolean }>(\n  ({ $isClosing }) => `\n    width: 100%;\n    height: max-content;\n    overflow: auto;\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  TransparentModalContainer,\n  SpotlightModal,\n  ModalLoaderWrapper,\n  BottomSheetModal,\n};\n"],"names":["ModalContainer","styled","colors","zIndex","$isClosing","$blocking","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","ModalLoaderWrapper","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal","TransparentModalContainer","BottomSheetModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,QAAAC,EAAO,GAAG,YAAAC,GAAY,WAAAC,EAAA,MAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMtCH,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBE,IAAa,oBAAoB,gBAAgB;AAAA,oBAC5CC,IAAY,SAAS,MAAM;AAAA,aAClCF,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBzB,GAKMG,IAAYL,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAE,GAAY,QAAAG,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKL,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA;AAAA,eAGhCE,IAAa,mBAAmB,aAClC;AAAA;AAAA;AAAA;AAAA,4BAI0BG,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,IAAmBP,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAQ,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBT,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAO,EAAkB,MAAA;AAAA;AAAA;AAAA;AAAA,WAI/BP,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGO,CAAW;AAAA;AAAA;AAAA,aAG1BP,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMS,IAAqBV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ5BW,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBd,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAG,EAAA,MAAiB;AAAA;AAAA,WAEXQ,CAAc;AAAA;AAAA;AAAA,iBAGR,EAAEA,IAAiB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQdC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDT,IACI;AAAA;AAAA,4BAEoBU,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,IAA4Bf,EAAO;AAAA,EACvC,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,QAAAC,EAAO,GAAG,YAAAC,GAAY,WAAAC,EAAA,MAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMtCH,EAAO,WAAW;AAAA;AAAA,oBAEpBG,IAAY,SAAS,MAAM;AAAA,eAChCD,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,GAEMc,IAAmBhB,EAAO;AAAA,EAC9B,CAAC,EAAE,YAAAG,EAAA,MAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQLA,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;"}

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