@cuemath/leap 3.2.25-mb → 3.2.26

package/dist/features/ui/inputs/base-select-input/base-select-input.js

@@ -1,114 +1,124 @@
-import { jsxs as k, jsx as t } from "react/jsx-runtime";
-import { useMemo as W, useRef as T, useCallback as d } from "react";
-import X from "../../../../assets/line-icons/icons/cross.js";
-import H from "../../hooks/use-context-menu-click-handler.js";
-import q from "../base-input/base-input.js";
-import { Input as G } from "../text-input/text-input-styled.js";
-import { Container as J, OptionsContainer as K, OptionsWrapper as N, StyledChevronDownIcon as P, StyledDownIcon as Q } from "./base-select-input-styled.js";
-import U from "./select-option/select-option.js";
-import Y from "./select-section/select-section.js";
-const ae = (y) => {
+import { jsxs as V, jsx as t } from "react/jsx-runtime";
+import { useMemo as G, useRef as A, useCallback as d } from "react";
+import J from "../../../../assets/line-icons/icons/cross.js";
+import K from "../../hooks/use-context-menu-click-handler.js";
+import N from "../base-input/base-input.js";
+import { Input as P } from "../text-input/text-input-styled.js";
+import { Container as Q, OptionsContainer as U, OptionsWrapper as Y, StyledChevronDownIcon as Z, StyledDownIcon as _ } from "./base-select-input-styled.js";
+import ee from "./select-option/select-option.js";
+import ne from "./select-section/select-section.js";
+const he = (E) => {
   const {
-    label: C,
-    value: r,
+    label: b,
+    value: i,
     options: u,
     searchable: n = !1,
     searchText: g,
-    onCloseWithoutSelection: V,
-    onSearchTextChange: o,
-    onChange: b,
+    onCloseWithoutSelection: L,
+    onSearchTextChange: r,
+    onChange: v,
     renderAs: h,
-    width: A,
-    widthX: E,
+    width: R,
+    widthX: j,
     disabled: p,
-    willShowMessage: R,
-    mandatory: j,
-    size: v = "regular",
+    willShowMessage: z,
+    mandatory: B,
+    size: w = "regular",
     shape: m,
     theme: f = "light",
-    isTransparent: w = !1,
+    isTransparent: S = !1,
     renderOptionsAs: $ = "list",
-    errorMessage: z
-  } = y, i = $ === "section-list" && u, s = $ === "list" && u, I = W(() => {
-    var e, c;
+    errorMessage: D,
+    inputLabelOverrides: C
+  } = E, s = $ === "section-list" && u, l = $ === "list" && u, I = G(() => {
+    var e;
     if (n) return g;
-    if (i)
-      return (e = i.flatMap((l) => l.data).find(({ id: l }) => l === r)) == null ? void 0 : e.label;
-    if (s) return (c = s.find((l) => l.id === r)) == null ? void 0 : c.label;
-  }, [n, g, i, s, r]), S = T(null), x = T(null), { menuVisible: a, onMenuClick: B, hideMenu: M } = H(
-    S,
+    if (s) {
+      let o, a;
+      for (const T of s) {
+        const y = T.data.find(({ id: q }) => q === i);
+        if (y) {
+          o = T, a = y;
+          break;
+        }
+      }
+      return o && C ? C(o, a) : (a == null ? void 0 : a.label) || "";
+    }
+    if (l) return (e = l.find((o) => o.id === i)) == null ? void 0 : e.label;
+  }, [n, g, s, l, C, i]), k = A(null), x = A(null), { menuVisible: c, onMenuClick: F, hideMenu: O } = K(
+    k,
     void 0,
     !n,
-    V,
+    L,
     p
-  ), D = d(
+  ), W = d(
     (e) => {
-      n && o && o(e.target.value);
+      n && r && r(e.target.value);
     },
-    [o, n]
-  ), O = d(
-    (e, c) => {
-      M(), b(e, c);
+    [r, n]
+  ), M = d(
+    (e, o) => {
+      O(), v(e, o);
     },
-    [M, b]
-  ), F = d((e) => {
+    [O, v]
+  ), X = d((e) => {
     e.target.select(), setTimeout(() => {
       e.target.scrollIntoView({
         behavior: "smooth"
       });
     }, 300);
-  }, []), L = d(() => {
+  }, []), H = d(() => {
     var e;
-    o && (o(""), (e = x.current) == null || e.focus());
-  }, [o]);
-  return /* @__PURE__ */ k(J, { ref: S, $width: A, $widthX: E, onClick: B, children: [
+    r && (r(""), (e = x.current) == null || e.focus());
+  }, [r]);
+  return /* @__PURE__ */ V(Q, { ref: k, $width: R, $widthX: j, onClick: F, children: [
     /* @__PURE__ */ t(
-      q,
+      N,
       {
         renderAs: h,
-        label: C,
+        label: b,
         stickyLabel: !0,
         disabled: p,
-        willShowMessage: R,
-        size: v,
-        mandatory: j,
+        willShowMessage: z,
+        size: w,
+        mandatory: B,
         shape: m,
-        isTransparent: w,
+        isTransparent: S,
         inputElement: /* @__PURE__ */ t(
-          G,
+          P,
           {
             ref: x,
             $renderAs: h,
-            $size: v,
-            placeholder: I ? "" : C,
+            $size: w,
+            placeholder: I ? "" : b,
             disabled: p,
             readOnly: !n,
             value: I ?? "",
-            onFocus: n ? F : void 0,
-            onChange: n ? D : void 0,
-            $isTransparent: w
+            onFocus: n ? X : void 0,
+            onChange: n ? W : void 0,
+            $isTransparent: S
           }
         ),
-        siblingElement: n && a ? /* @__PURE__ */ t(X, { onClick: L }) : m === "curved" || m === "borderLess" ? /* @__PURE__ */ t(P, { $menuVisible: a, pointerEvents: "none" }) : /* @__PURE__ */ t(Q, { $menuVisible: a, pointerEvents: "none" }),
-        errorMessage: z
+        siblingElement: n && c ? /* @__PURE__ */ t(J, { onClick: H }) : m === "curved" || m === "borderLess" ? /* @__PURE__ */ t(Z, { $menuVisible: c, pointerEvents: "none" }) : /* @__PURE__ */ t(_, { $menuVisible: c, pointerEvents: "none" }),
+        errorMessage: D
       }
     ),
-    u.length > 0 && /* @__PURE__ */ t(K, { $visible: a, children: /* @__PURE__ */ k(N, { $renderAs: h, $theme: f, children: [
-      i && /* @__PURE__ */ t(
-        Y,
+    u.length > 0 && /* @__PURE__ */ t(U, { $visible: c, children: /* @__PURE__ */ V(Y, { $renderAs: h, $theme: f, children: [
+      s && /* @__PURE__ */ t(
+        ne,
         {
-          sectionOptions: i,
+          sectionOptions: s,
           theme: f,
-          value: r,
-          onChange: O
+          value: i,
+          onChange: M
         }
       ),
-      s && s.map((e) => /* @__PURE__ */ t(
-        U,
+      l && l.map((e) => /* @__PURE__ */ t(
+        ee,
         {
           option: e,
-          selected: e.id === r,
-          onChange: O,
+          selected: e.id === i,
+          onChange: M,
           theme: f
         },
         e.id
@@ -117,6 +127,6 @@ const ae = (y) => {
   ] });
 };
 export {
-  ae as default
+  he as default
 };
 //# sourceMappingURL=base-select-input.js.map

package/dist/features/ui/inputs/base-select-input/base-select-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-select-input.js","sources":["../../../../../src/features/ui/inputs/base-select-input/base-select-input.tsx"],"sourcesContent":["import type { ISectionOption } from '../../section-list/section-list-types';\nimport type { IBaseSelectInputProps, ISelectOption } from './base-select-input-types';\nimport type { ChangeEvent, FocusEvent, ReactElement } from 'react';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport useContextMenuClickHandler from '../../hooks/use-context-menu-click-handler';\nimport BaseInput from '../base-input/base-input';\nimport { Input } from '../text-input/text-input-styled';\nimport * as Styled from './base-select-input-styled';\nimport SelectOption from './select-option/select-option';\nimport SelectSection from './select-section/select-section';\n\nconst BaseSelectInput = <IDType extends string | number>(\n  props: IBaseSelectInputProps<IDType>,\n): ReactElement => {\n  const {\n    label,\n    value,\n    options,\n    searchable = false,\n    searchText,\n    onCloseWithoutSelection,\n    onSearchTextChange,\n    onChange,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    mandatory,\n    size = 'regular',\n    shape,\n    theme = 'light',\n    isTransparent = false,\n    renderOptionsAs = 'list',\n    errorMessage,\n  } = props;\n\n  const sectionOptions =\n    renderOptionsAs === 'section-list' && (options as ISectionOption<ISelectOption<IDType>>[]);\n  const selectOptions = renderOptionsAs === 'list' && (options as ISelectOption<IDType>[]);\n\n  const inputValue = useMemo(() => {\n    if (searchable) return searchText;\n\n    if (sectionOptions) {\n      return sectionOptions.flatMap(section => section.data).find(({ id }) => id === value)\n        ?.label as string;\n    }\n\n    if (selectOptions) return selectOptions.find(option => option.id === value)?.label;\n  }, [searchable, searchText, sectionOptions, selectOptions, value]);\n\n  const containerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const inputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;\n  const { menuVisible, onMenuClick, hideMenu } = useContextMenuClickHandler(\n    containerRef,\n    undefined,\n    !searchable,\n    onCloseWithoutSelection,\n    disabled,\n  );\n\n  const handleTextChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (searchable && onSearchTextChange) {\n        onSearchTextChange(e.target.value);\n      }\n    },\n    [onSearchTextChange, searchable],\n  );\n\n  const handleChange = useCallback<IBaseSelectInputProps<IDType>['onChange']>(\n    (id, option) => {\n      hideMenu();\n      onChange(id, option);\n    },\n    [hideMenu, onChange],\n  );\n\n  const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    e.target.select();\n    setTimeout(() => {\n      e.target.scrollIntoView({\n        behavior: 'smooth',\n      });\n    }, 300);\n  }, []);\n\n  const handleClear = useCallback(() => {\n    if (onSearchTextChange) {\n      onSearchTextChange('');\n      inputRef.current?.focus();\n    }\n  }, [onSearchTextChange]);\n\n  const downIcon =\n    shape === 'curved' || shape === 'borderLess' ? (\n      <Styled.StyledChevronDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    ) : (\n      <Styled.StyledDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    );\n\n  return (\n    <Styled.Container ref={containerRef} $width={width} $widthX={widthX} onClick={onMenuClick}>\n      <BaseInput\n        renderAs={renderAs}\n        label={label}\n        stickyLabel={true}\n        disabled={disabled}\n        willShowMessage={willShowMessage}\n        size={size}\n        mandatory={mandatory}\n        shape={shape}\n        isTransparent={isTransparent}\n        inputElement={\n          <Input\n            ref={inputRef}\n            $renderAs={renderAs}\n            $size={size}\n            placeholder={inputValue ? '' : label}\n            disabled={disabled}\n            readOnly={!searchable}\n            value={inputValue ?? ''}\n            onFocus={searchable ? handleFocus : undefined}\n            onChange={searchable ? handleTextChange : undefined}\n            $isTransparent={isTransparent}\n          />\n        }\n        siblingElement={searchable && menuVisible ? <CrossIcon onClick={handleClear} /> : downIcon}\n        errorMessage={errorMessage}\n      />\n\n      {options.length > 0 && (\n        <Styled.OptionsContainer $visible={menuVisible}>\n          <Styled.OptionsWrapper $renderAs={renderAs} $theme={theme}>\n            {sectionOptions && (\n              <SelectSection<IDType>\n                sectionOptions={sectionOptions}\n                theme={theme}\n                value={value}\n                onChange={handleChange}\n              />\n            )}\n\n            {selectOptions &&\n              selectOptions.map(option => (\n                <SelectOption<IDType>\n                  key={option.id}\n                  option={option}\n                  selected={option.id === value}\n                  onChange={handleChange}\n                  theme={theme}\n                />\n              ))}\n          </Styled.OptionsWrapper>\n        </Styled.OptionsContainer>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default BaseSelectInput;\n"],"names":["BaseSelectInput","props","label","value","options","searchable","searchText","onCloseWithoutSelection","onSearchTextChange","onChange","renderAs","width","widthX","disabled","willShowMessage","mandatory","size","shape","theme","isTransparent","renderOptionsAs","errorMessage","sectionOptions","selectOptions","inputValue","useMemo","_a","section","id","_b","option","containerRef","useRef","inputRef","menuVisible","onMenuClick","hideMenu","useContextMenuClickHandler","handleTextChange","useCallback","handleChange","handleFocus","handleClear","jsxs","Styled.Container","jsx","BaseInput","Input","CrossIcon","Styled.StyledChevronDownIcon","Styled.StyledDownIcon","Styled.OptionsContainer","Styled.OptionsWrapper","SelectSection","SelectOption"],"mappings":"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"}
+{"version":3,"file":"base-select-input.js","sources":["../../../../../src/features/ui/inputs/base-select-input/base-select-input.tsx"],"sourcesContent":["import type { ISectionOption } from '../../section-list/section-list-types';\nimport type { IBaseSelectInputProps, ISelectOption } from './base-select-input-types';\nimport type { ChangeEvent, FocusEvent, ReactElement } from 'react';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport useContextMenuClickHandler from '../../hooks/use-context-menu-click-handler';\nimport BaseInput from '../base-input/base-input';\nimport { Input } from '../text-input/text-input-styled';\nimport * as Styled from './base-select-input-styled';\nimport SelectOption from './select-option/select-option';\nimport SelectSection from './select-section/select-section';\n\nconst BaseSelectInput = <IDType extends string | number>(\n  props: IBaseSelectInputProps<IDType>,\n): ReactElement => {\n  const {\n    label,\n    value,\n    options,\n    searchable = false,\n    searchText,\n    onCloseWithoutSelection,\n    onSearchTextChange,\n    onChange,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    mandatory,\n    size = 'regular',\n    shape,\n    theme = 'light',\n    isTransparent = false,\n    renderOptionsAs = 'list',\n    errorMessage,\n    inputLabelOverrides,\n  } = props;\n\n  const sectionOptions =\n    renderOptionsAs === 'section-list' && (options as ISectionOption<ISelectOption<IDType>>[]);\n  const selectOptions = renderOptionsAs === 'list' && (options as ISelectOption<IDType>[]);\n\n  const inputValue = useMemo(() => {\n    if (searchable) return searchText;\n\n    if (sectionOptions) {\n      let foundSection, foundOption;\n\n      for (const section of sectionOptions) {\n        const option = section.data.find(({ id }) => id === value);\n\n        if (option) {\n          foundSection = section;\n          foundOption = option;\n\n          break;\n        }\n      }\n\n      if (foundSection && inputLabelOverrides)\n        return inputLabelOverrides(foundSection, foundOption);\n\n      return foundOption?.label || '';\n    }\n\n    if (selectOptions) return selectOptions.find(option => option.id === value)?.label;\n  }, [searchable, searchText, sectionOptions, selectOptions, inputLabelOverrides, value]);\n\n  const containerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const inputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;\n  const { menuVisible, onMenuClick, hideMenu } = useContextMenuClickHandler(\n    containerRef,\n    undefined,\n    !searchable,\n    onCloseWithoutSelection,\n    disabled,\n  );\n\n  const handleTextChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (searchable && onSearchTextChange) {\n        onSearchTextChange(e.target.value);\n      }\n    },\n    [onSearchTextChange, searchable],\n  );\n\n  const handleChange = useCallback<IBaseSelectInputProps<IDType>['onChange']>(\n    (id, option) => {\n      hideMenu();\n      onChange(id, option);\n    },\n    [hideMenu, onChange],\n  );\n\n  const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    e.target.select();\n    setTimeout(() => {\n      e.target.scrollIntoView({\n        behavior: 'smooth',\n      });\n    }, 300);\n  }, []);\n\n  const handleClear = useCallback(() => {\n    if (onSearchTextChange) {\n      onSearchTextChange('');\n      inputRef.current?.focus();\n    }\n  }, [onSearchTextChange]);\n\n  const downIcon =\n    shape === 'curved' || shape === 'borderLess' ? (\n      <Styled.StyledChevronDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    ) : (\n      <Styled.StyledDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    );\n\n  return (\n    <Styled.Container ref={containerRef} $width={width} $widthX={widthX} onClick={onMenuClick}>\n      <BaseInput\n        renderAs={renderAs}\n        label={label}\n        stickyLabel={true}\n        disabled={disabled}\n        willShowMessage={willShowMessage}\n        size={size}\n        mandatory={mandatory}\n        shape={shape}\n        isTransparent={isTransparent}\n        inputElement={\n          <Input\n            ref={inputRef}\n            $renderAs={renderAs}\n            $size={size}\n            placeholder={inputValue ? '' : label}\n            disabled={disabled}\n            readOnly={!searchable}\n            value={inputValue ?? ''}\n            onFocus={searchable ? handleFocus : undefined}\n            onChange={searchable ? handleTextChange : undefined}\n            $isTransparent={isTransparent}\n          />\n        }\n        siblingElement={searchable && menuVisible ? <CrossIcon onClick={handleClear} /> : downIcon}\n        errorMessage={errorMessage}\n      />\n\n      {options.length > 0 && (\n        <Styled.OptionsContainer $visible={menuVisible}>\n          <Styled.OptionsWrapper $renderAs={renderAs} $theme={theme}>\n            {sectionOptions && (\n              <SelectSection<IDType>\n                sectionOptions={sectionOptions}\n                theme={theme}\n                value={value}\n                onChange={handleChange}\n              />\n            )}\n\n            {selectOptions &&\n              selectOptions.map(option => (\n                <SelectOption<IDType>\n                  key={option.id}\n                  option={option}\n                  selected={option.id === value}\n                  onChange={handleChange}\n                  theme={theme}\n                />\n              ))}\n          </Styled.OptionsWrapper>\n        </Styled.OptionsContainer>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default BaseSelectInput;\n"],"names":["BaseSelectInput","props","label","value","options","searchable","searchText","onCloseWithoutSelection","onSearchTextChange","onChange","renderAs","width","widthX","disabled","willShowMessage","mandatory","size","shape","theme","isTransparent","renderOptionsAs","errorMessage","inputLabelOverrides","sectionOptions","selectOptions","inputValue","useMemo","foundSection","foundOption","section","option","id","_a","containerRef","useRef","inputRef","menuVisible","onMenuClick","hideMenu","useContextMenuClickHandler","handleTextChange","useCallback","handleChange","handleFocus","handleClear","jsxs","Styled.Container","jsx","BaseInput","Input","CrossIcon","Styled.StyledChevronDownIcon","Styled.StyledDownIcon","Styled.OptionsContainer","Styled.OptionsWrapper","SelectSection","SelectOption"],"mappings":"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"}

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

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

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

@@ -73,7 +73,7 @@ const p = a.div(
     }
   }
 `
-), d = a.div(
+), c = a.div(
   ({ $modalWidth: t }) => `
   max-height: calc(100vh - 142px);
   overflow-y: auto;
@@ -82,7 +82,7 @@ const p = a.div(
     max-height: 100vh;
   }
 }`
-), c = a.div(
+), m = a.div(
   ({ theme: { colors: t }, $modalWidth: o }) => `
   position: absolute;
   top: -56px;
@@ -100,7 +100,7 @@ const p = a.div(
     color: ${t.BLACK_1};
   }
 `
-), m = a.div`
+), d = a.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -151,36 +151,6 @@ const p = a.div(
   }
 `
 ), h = a.div(
-  ({ theme: { colors: t, zIndex: o }, $isClosing: e }) => `
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: ${t.TRANSPARENT};
-  display: flex;
-  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;
-    }
-  }
-`
-), x = a.div(
   ({ $isClosing: t }) => `
     width: 100%;
     height: max-content;
@@ -216,12 +186,11 @@ const p = a.div(
 );
 export {
   l as BaseModal,
-  d as BaseModalContent,
-  x as BottomSheetModal,
-  c as CloseButtonContainer,
+  c as BaseModalContent,
+  h as BottomSheetModal,
+  m as CloseButtonContainer,
   p as ModalContainer,
-  m as ModalLoaderWrapper,
-  f as SpotlightModal,
-  h as TransparentModalContainer
+  d as ModalLoaderWrapper,
+  f as SpotlightModal
 };
 //# 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 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\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","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,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,IAA4Bd,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,GAEMa,IAAmBf,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 }>(\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;"}

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

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