npm - @cuemath/leap - Versions diffs - 3.2.21-tp-beta-0.3 → 3.2.23-mb - Mend

@cuemath/leap 3.2.21-tp-beta-0.3 → 3.2.23-mb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/dist/features/stickers/sticker-selector/sticker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sticker.js","sources":["../../../../src/features/stickers/sticker-selector/sticker.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\nimport type { IStickerProps } from './sticker-selector-types';\n\nimport React, { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport * as S from './sticker-selector-styles';\n\nconst Sticker: React.FC<IStickerProps> = ({\n emoji,\n lottieUrl,\n size = 48,\n onClick,\n disabled = false,\n}) => {\n const [isLoaded, setIsLoaded] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const lottieRef = useRef<ILottieAnimationRef>(null);\n\n const handleRender = useCallback(() => {\n if (!lottieRef.current) return;\n\n lottieRef.current.goToAndStop(0, true);\n setIsLoaded(true);\n\n if (isHovered) lottieRef.current.play();\n }, [isHovered]);\n\n useEffect(() => {\n if (!lottieRef.current || !isLoaded) return;\n\n if (isHovered) {\n lottieRef.current.play();\n } else {\n lottieRef.current.goToAndStop(0, true);\n }\n }, [isHovered, isLoaded]);\n\n const handleMouseEnter = useCallback(() => {\n if (!disabled) setIsHovered(true);\n }, [disabled]);\n\n const handleMouseLeave = useCallback(() => {\n if (!disabled) setIsHovered(false);\n }, [disabled]);\n\n const handleClick = useCallback(() => {\n if (!disabled && onClick) onClick();\n }, [disabled, onClick]);\n\n return (\n <S.StickerContainer\n $size={size}\n $disabled={disabled}\n onPointerEnter={handleMouseEnter}\n onPointerLeave={handleMouseLeave}\n onClick={handleClick}\n >\n {!isHovered && (\n <S.StaticEmoji $size={size} $visible={!isHovered}>\n {emoji}\n </S.StaticEmoji>\n )}\n\n <S.LottieContainer $size={size} $visible={isHovered}>\n {lottieUrl && (\n <LottieAnimation\n ref={lottieRef}\n src={lottieUrl}\n width=\"100%\"\n height=\"100%\"\n settings={{\n loop: true,\n autoplay: false,\n renderer: 'canvas',\n }}\n onRender={handleRender}\n />\n )}\n </S.LottieContainer>\n </S.StickerContainer>\n );\n};\n\nexport default memo(Sticker);\n"],"names":["Sticker","emoji","lottieUrl","size","onClick","disabled","isLoaded","setIsLoaded","useState","isHovered","setIsHovered","lottieRef","useRef","handleRender","useCallback","useEffect","handleMouseEnter","handleMouseLeave","handleClick","jsxs","S.StickerContainer","jsx","S.StaticEmoji","S.LottieContainer","LottieAnimation","Sticker$1","memo"],"mappings":";;;;AAQA,MAAMA,IAAmC,CAAC;AAAA,EACxC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAAM;AACJ,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1CG,IAAYC,EAA4B,IAAI,GAE5CC,IAAeC,EAAY,MAAM;AACjC,IAACH,EAAU,YAELA,EAAA,QAAQ,YAAY,GAAG,EAAI,GACrCJ,EAAY,EAAI,GAEZE,KAAqBE,EAAA,QAAQ,KAAK;AAAA,EAAA,GACrC,CAACF,CAAS,CAAC;AAEd,EAAAM,EAAU,MAAM;AACd,IAAI,CAACJ,EAAU,WAAW,CAACL,MAEvBG,IACFE,EAAU,QAAQ,SAERA,EAAA,QAAQ,YAAY,GAAG,EAAI;AAAA,EACvC,GACC,CAACF,GAAWH,CAAQ,CAAC;AAElB,QAAAU,IAAmBF,EAAY,MAAM;AACrC,IAACT,KAAUK,EAAa,EAAI;AAAA,EAAA,GAC/B,CAACL,CAAQ,CAAC,GAEPY,IAAmBH,EAAY,MAAM;AACrC,IAACT,KAAUK,EAAa,EAAK;AAAA,EAAA,GAChC,CAACL,CAAQ,CAAC,GAEPa,IAAcJ,EAAY,MAAM;AAChC,IAAA,CAACT,KAAYD,KAAiBA;EAAA,GACjC,CAACC,GAAUD,CAAO,CAAC;AAGpB,SAAA,gBAAAe;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAOjB;AAAA,MACP,WAAWE;AAAA,MACX,gBAAgBW;AAAA,MAChB,gBAAgBC;AAAA,MAChB,SAASC;AAAA,MAER,UAAA;AAAA,QAAC,CAAAT,KACC,gBAAAY,EAAAC,GAAA,EAAc,OAAOnB,GAAM,UAAU,CAACM,GACpC,UACHR,EAAA,CAAA;AAAA,QAGF,gBAAAoB,EAACE,GAAA,EAAkB,OAAOpB,GAAM,UAAUM,GACvC,UACCP,KAAA,gBAAAmB;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,KAAKb;AAAA,YACL,KAAKT;AAAA,YACL,OAAM;AAAA,YACN,QAAO;AAAA,YACP,UAAU;AAAA,cACR,MAAM;AAAA,cACN,UAAU;AAAA,cACV,UAAU;AAAA,YACZ;AAAA,YACA,UAAUW;AAAA,UAAA;AAAA,QAAA,GAGhB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeY,IAAAC,EAAK1B,CAAO;"}

package/dist/features/{ui/stickers/stickers-effects.js → stickers/stickers-effects/effects.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { keyframes as r, css as t } from "styled-components";
-import { randomizeDuration as o } from "./stickers-utils.js";
+import { randomizeDuration as o } from "./stickers-effects-helper.js";
 const s = r`
   0% {
     transform: translateY(0vh);
@@ -45,20 +45,20 @@ const s = r`
     opacity: 0;
   }
 `, i = {
-  float_up: (a) => t`
+  "float-up": (a) => t`
     animation: ${s} ${o(a)}ms ease-out forwards;
   `,
-  fall_down: (a) => t`
+  "fall-down": (a) => t`
     animation: ${n} ${o(a)}ms ease-out forwards;
   `,
-  burst_from_edges: (a) => t`
+  "burst-from-edges": (a) => t`
     animation: ${e} ${o(a)}ms linear forwards;
   `,
-  pop_expand: (a) => t`
+  "pop-expand": (a) => t`
     animation: ${m} ${a}ms cubic-bezier(0.5, 0.1, 0.7, 1) forwards;
   `
 };
 export {
   i as effectAnimations
 };
-//# sourceMappingURL=stickers-effects.js.map
+//# sourceMappingURL=effects.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"effects.js","sources":["../../../../src/features/stickers/stickers-effects/effects.ts"],"sourcesContent":["import type { IStickersProps } from './stickers-effects-types';\n\nimport { keyframes, css } from 'styled-components';\n\nimport { randomizeDuration } from './stickers-effects-helper';\n\nconst floatUp = keyframes`\n 0% {\n transform: translateY(0vh);\n opacity: 1;\n }\n 100% {\n transform: translateY(-100vh);\n opacity: 0;\n }\n`;\n\nconst fallDown = keyframes`\n 0% {\n transform: translateY(0vh);\n opacity: 1;\n }\n 100% {\n transform: translateY(100vh);\n opacity: 0;\n }\n`;\n\nconst burstFromEdges = keyframes`\n 0% {\n transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1);\n opacity: 1;\n }\n 100% {\n transform: translateX(0vw) translateY(0vh) scale(1.25);\n opacity: 0;\n }\n`;\n\nconst popExpand = keyframes`\n 0% {\n transform: translateX(0) translateY(0vh);\n opacity: 1;\n }\n 35% {\n transform: translateX(0) translateY(-50vh) scale(1.25);\n opacity: 1;\n }\n 60% {\n transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1.25);\n opacity: 0.75;\n }\n 100% {\n transform: translateX(var(--from-x)) translateY(-110vh) scale(1.25);\n opacity: 0;\n }\n`;\n\nexport const effectAnimations: Record<\n IStickersProps['effect'],\n (duration: number) => ReturnType<typeof css>\n> = {\n 'float-up': (duration: number) => css`\n animation: ${floatUp} ${randomizeDuration(duration)}ms ease-out forwards;\n `,\n 'fall-down': (duration: number) => css`\n animation: ${fallDown} ${randomizeDuration(duration)}ms ease-out forwards;\n `,\n 'burst-from-edges': (duration: number) => css`\n animation: ${burstFromEdges} ${randomizeDuration(duration)}ms linear forwards;\n `,\n 'pop-expand': (duration: number) => css`\n animation: ${popExpand} ${duration}ms cubic-bezier(0.5, 0.1, 0.7, 1) forwards;\n `,\n};\n"],"names":["floatUp","keyframes","fallDown","burstFromEdges","popExpand","effectAnimations","duration","css","randomizeDuration"],"mappings":";;AAMA,MAAMA,IAAUC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWVC,IAAWD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWXE,IAAiBF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWjBG,IAAYH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmBLI,IAGT;AAAA,EACF,YAAY,CAACC,MAAqBC;AAAA,iBACnBP,CAAO,IAAIQ,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAErD,aAAa,CAACA,MAAqBC;AAAA,iBACpBL,CAAQ,IAAIM,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAEtD,oBAAoB,CAACA,MAAqBC;AAAA,iBAC3BJ,CAAc,IAAIK,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAE5D,cAAc,CAACA,MAAqBC;AAAA,iBACrBH,CAAS,IAAIE,CAAQ;AAAA;AAEtC;"}

package/dist/features/stickers/stickers-effects/stickers-effects-helper.js ADDED Viewed

@@ -0,0 +1,86 @@
+import { stickerData as b } from "../sticker-data.js";
+const w = (o, e) => {
+  const t = Math.ceil(e / 4), a = Math.floor(o / t), h = o % t, p = ["top", "right", "bottom", "left"][a] ?? "left", r = (h + 0.5) / t * 100, m = (Math.random() - 0.5) * 25, s = Math.min(Math.max(r + m, 0), 100), c = 45 + Math.random() * 10, i = 45 + Math.random() * 10;
+  let d = 0, n = 0;
+  switch (p) {
+    case "top":
+      d = s - c, n = -i + m;
+      break;
+    case "right":
+      d = 100 - c + m, n = s - i;
+      break;
+    case "bottom":
+      d = s - c, n = 100 - i + m;
+      break;
+    case "left":
+      d = -c + m, n = s - i;
+      break;
+  }
+  return {
+    fromX: `${d}vw`,
+    fromY: `${n}vh`,
+    x: c,
+    y: i
+  };
+}, v = (o, e = 10) => {
+  const t = [];
+  let a = 0;
+  const h = o;
+  for (; t.length < o && a < h; ) {
+    const l = Math.floor(Math.random() * (100 - 2 * e) + e);
+    t.every((p) => Math.abs(p - l) >= e) && t.push(l), a++;
+  }
+  for (; t.length < o; )
+    t.push(Math.floor(Math.random() * (100 - 2 * e) + e));
+  return t;
+};
+function P({
+  count: o,
+  effect: e,
+  stickers: t,
+  minSize: a,
+  maxSize: h
+}) {
+  const l = 100 / o * 2, p = () => Math.random() * (h - a) + a, r = [], m = ["float-up", "fall-down"].includes(e) ? v(o, l) : [];
+  for (let s = 0; s < o; s++) {
+    const c = t[s % t.length] ?? "", { emoji: i = "", lottieUrl: d } = b.find(({ id: f }) => f === c) || {}, n = p(), u = m[s], M = { id: c, sticker: i, lottie: d, size: n };
+    switch (e) {
+      case "float-up":
+        r.push({ ...M, x: u, y: 110 + (Math.random() - 0.5) * n });
+        break;
+      case "fall-down":
+        r.push({ ...M, x: u, y: -10 + (Math.random() - 0.5) * n });
+        break;
+      case "burst-from-edges": {
+        const { x: f, y: x, fromX: g, fromY: k } = w(s, o);
+        r.push({ ...M, x: f, y: x, fromX: g, fromY: k, size: n });
+        break;
+      }
+      case "pop-expand":
+        r.push({
+          ...M,
+          x: 50,
+          y: 100,
+          fromX: `${(Math.random() - 0.5) * 27.5}vw`,
+          fromY: `${-50 - Math.random() * 27.5}vh`
+        });
+        break;
+      default:
+        r.push({
+          ...M,
+          x: Math.random() * 100,
+          y: Math.random() * 100
+        });
+    }
+  }
+  return r;
+}
+const X = (o, e = 0.2) => {
+  const t = o * e, a = o - t, h = o + t;
+  return Math.floor(Math.random() * (h - a + 1)) + a;
+};
+export {
+  P as generateStickerData,
+  X as randomizeDuration
+};
+//# sourceMappingURL=stickers-effects-helper.js.map

package/dist/features/stickers/stickers-effects/stickers-effects-helper.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stickers-effects-helper.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects-helper.ts"],"sourcesContent":["import type { TStickerData, IStickersProps } from './stickers-effects-types';\n\nimport { stickerData } from '../sticker-data';\n\nconst getBurstPosition = (\n index: number,\n total: number,\n): {\n fromX: string;\n fromY: string;\n x: number;\n y: number;\n} => {\n const countPerSide = Math.ceil(total / 4);\n const sideIndex = Math.floor(index / countPerSide);\n const pos = index % countPerSide;\n\n const sides = ['top', 'right', 'bottom', 'left'] as const;\n const side = sides[sideIndex] ?? 'left';\n\n const basePercent = ((pos + 0.5) / countPerSide) * 100;\n const jitter = (Math.random() - 0.5) * 25;\n const edgePercent = Math.min(Math.max(basePercent + jitter, 0), 100);\n\n const centerX = 45 + Math.random() * 10;\n const centerY = 45 + Math.random() * 10;\n\n let fromX = 0;\n let fromY = 0;\n\n switch (side) {\n case 'top':\n fromX = edgePercent - centerX;\n fromY = -centerY + jitter;\n break;\n case 'right':\n fromX = 100 - centerX + jitter;\n fromY = edgePercent - centerY;\n break;\n case 'bottom':\n fromX = edgePercent - centerX;\n fromY = 100 - centerY + jitter;\n break;\n case 'left':\n fromX = -centerX + jitter;\n fromY = edgePercent - centerY;\n break;\n }\n\n return {\n fromX: `${fromX}vw`,\n fromY: `${fromY}vh`,\n x: centerX,\n y: centerY,\n };\n};\n\nconst getRandomNonOverlappingPositions = (count: number, buffer = 10): number[] => {\n const used: number[] = [];\n let attempts = 0;\n const maxAttempts = count;\n\n while (used.length < count && attempts < maxAttempts) {\n const value = Math.floor(Math.random() * (100 - 2 * buffer) + buffer);\n\n if (used.every(v => Math.abs(v - value) >= buffer)) {\n used.push(value);\n }\n attempts++;\n }\n\n while (used.length < count) {\n used.push(Math.floor(Math.random() * (100 - 2 * buffer) + buffer));\n }\n\n return used;\n};\n\nexport function generateStickerData({\n count,\n effect,\n stickers,\n minSize,\n maxSize,\n}: {\n count: number;\n effect: IStickersProps['effect'];\n stickers: string[];\n minSize: number;\n maxSize: number;\n}): TStickerData[] {\n const buffer = (100 / count) * 2;\n const getSize = () => Math.random() * (maxSize - minSize) + minSize;\n const result: TStickerData[] = [];\n const xPositions = ['float-up', 'fall-down'].includes(effect)\n ? getRandomNonOverlappingPositions(count, buffer)\n : [];\n\n for (let i = 0; i < count; i++) {\n const stickerId = stickers[i % stickers.length] ?? '';\n const { emoji: sticker = '', lottieUrl: lottie } =\n stickerData.find(({ id }) => id === stickerId) || {};\n\n const size = getSize();\n const x = xPositions[i]!;\n const common = { id: stickerId, sticker, lottie, size };\n\n switch (effect) {\n case 'float-up':\n result.push({ ...common, x, y: 110 + (Math.random() - 0.5) * size });\n break;\n\n case 'fall-down':\n result.push({ ...common, x, y: -10 + (Math.random() - 0.5) * size });\n break;\n\n case 'burst-from-edges': {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { x, y, fromX, fromY } = getBurstPosition(i, count);\n\n result.push({ ...common, x, y, fromX, fromY, size });\n break;\n }\n\n case 'pop-expand':\n result.push({\n ...common,\n x: 50,\n y: 100,\n fromX: `${(Math.random() - 0.5) * 27.5}vw`,\n fromY: `${-50 - Math.random() * 27.5}vh`,\n });\n break;\n\n default:\n result.push({\n ...common,\n x: Math.random() * 100,\n y: Math.random() * 100,\n });\n }\n }\n\n return result;\n}\n\nexport const randomizeDuration = (base: number, variancePercent = 0.2): number => {\n const delta = base * variancePercent;\n const min = base - delta;\n const max = base + delta;\n\n return Math.floor(Math.random() * (max - min + 1)) + min;\n};\n"],"names":["getBurstPosition","index","total","countPerSide","sideIndex","pos","side","basePercent","jitter","edgePercent","centerX","centerY","fromX","fromY","getRandomNonOverlappingPositions","count","buffer","used","attempts","maxAttempts","value","v","generateStickerData","effect","stickers","minSize","maxSize","getSize","result","xPositions","i","stickerId","sticker","lottie","stickerData","id","size","x","common","y","randomizeDuration","base","variancePercent","delta","min","max"],"mappings":";AAIA,MAAMA,IAAmB,CACvBC,GACAC,MAMG;AACH,QAAMC,IAAe,KAAK,KAAKD,IAAQ,CAAC,GAClCE,IAAY,KAAK,MAAMH,IAAQE,CAAY,GAC3CE,IAAMJ,IAAQE,GAGdG,IADQ,CAAC,OAAO,SAAS,UAAU,MAAM,EAC5BF,CAAS,KAAK,QAE3BG,KAAgBF,IAAM,OAAOF,IAAgB,KAC7CK,KAAU,KAAK,OAAO,IAAI,OAAO,IACjCC,IAAc,KAAK,IAAI,KAAK,IAAIF,IAAcC,GAAQ,CAAC,GAAG,GAAG,GAE7DE,IAAU,KAAK,KAAK,OAAA,IAAW,IAC/BC,IAAU,KAAK,KAAK,OAAA,IAAW;AAErC,MAAIC,IAAQ,GACRC,IAAQ;AAEZ,UAAQP,GAAM;AAAA,IACZ,KAAK;AACH,MAAAM,IAAQH,IAAcC,GACtBG,IAAQ,CAACF,IAAUH;AACnB;AAAA,IACF,KAAK;AACH,MAAAI,IAAQ,MAAMF,IAAUF,GACxBK,IAAQJ,IAAcE;AACtB;AAAA,IACF,KAAK;AACH,MAAAC,IAAQH,IAAcC,GACtBG,IAAQ,MAAMF,IAAUH;AACxB;AAAA,IACF,KAAK;AACH,MAAAI,IAAQ,CAACF,IAAUF,GACnBK,IAAQJ,IAAcE;AACtB;AAAA,EACJ;AAEO,SAAA;AAAA,IACL,OAAO,GAAGC,CAAK;AAAA,IACf,OAAO,GAAGC,CAAK;AAAA,IACf,GAAGH;AAAA,IACH,GAAGC;AAAA,EAAA;AAEP,GAEMG,IAAmC,CAACC,GAAeC,IAAS,OAAiB;AACjF,QAAMC,IAAiB,CAAA;AACvB,MAAIC,IAAW;AACf,QAAMC,IAAcJ;AAEpB,SAAOE,EAAK,SAASF,KAASG,IAAWC,KAAa;AAC9C,UAAAC,IAAQ,KAAK,MAAM,KAAK,YAAY,MAAM,IAAIJ,KAAUA,CAAM;AAEhE,IAAAC,EAAK,MAAM,CAAKI,MAAA,KAAK,IAAIA,IAAID,CAAK,KAAKJ,CAAM,KAC/CC,EAAK,KAAKG,CAAK,GAEjBF;AAAA,EACF;AAEO,SAAAD,EAAK,SAASF;AACd,IAAAE,EAAA,KAAK,KAAK,MAAM,KAAK,YAAY,MAAM,IAAID,KAAUA,CAAM,CAAC;AAG5D,SAAAC;AACT;AAEO,SAASK,EAAoB;AAAA,EAClC,OAAAP;AAAA,EACA,QAAAQ;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AACF,GAMmB;AACX,QAAAV,IAAU,MAAMD,IAAS,GACzBY,IAAU,MAAM,KAAK,OAAO,KAAKD,IAAUD,KAAWA,GACtDG,IAAyB,CAAA,GACzBC,IAAa,CAAC,YAAY,WAAW,EAAE,SAASN,CAAM,IACxDT,EAAiCC,GAAOC,CAAM,IAC9C,CAAA;AAEJ,WAASc,IAAI,GAAGA,IAAIf,GAAOe,KAAK;AAC9B,UAAMC,IAAYP,EAASM,IAAIN,EAAS,MAAM,KAAK,IAC7C,EAAE,OAAOQ,IAAU,IAAI,WAAWC,MACtCC,EAAY,KAAK,CAAC,EAAE,IAAAC,EAAG,MAAMA,MAAOJ,CAAS,KAAK,CAAA,GAE9CK,IAAOT,KACPU,IAAIR,EAAWC,CAAC,GAChBQ,IAAS,EAAE,IAAIP,GAAW,SAAAC,GAAS,QAAAC,GAAQ,MAAAG;AAEjD,YAAQb,GAAQ;AAAA,MACd,KAAK;AACH,QAAAK,EAAO,KAAK,EAAE,GAAGU,GAAQ,GAAAD,GAAG,GAAG,OAAO,KAAK,OAAO,IAAI,OAAOD,EAAM,CAAA;AACnE;AAAA,MAEF,KAAK;AACH,QAAAR,EAAO,KAAK,EAAE,GAAGU,GAAQ,GAAAD,GAAG,GAAG,OAAO,KAAK,OAAO,IAAI,OAAOD,EAAM,CAAA;AACnE;AAAA,MAEF,KAAK,oBAAoB;AAEjB,cAAA,EAAE,GAAAC,GAAG,GAAAE,GAAG,OAAA3B,GAAO,OAAAC,EAAM,IAAIb,EAAiB8B,GAAGf,CAAK;AAEjD,QAAAa,EAAA,KAAK,EAAE,GAAGU,GAAQ,GAAAD,GAAG,GAAAE,GAAG,OAAA3B,GAAO,OAAAC,GAAO,MAAAuB,EAAM,CAAA;AACnD;AAAA,MACF;AAAA,MAEA,KAAK;AACH,QAAAR,EAAO,KAAK;AAAA,UACV,GAAGU;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,OAAO,IAAI,KAAK,OAAO,IAAI,OAAO,IAAI;AAAA,UACtC,OAAO,GAAG,MAAM,KAAK,WAAW,IAAI;AAAA,QAAA,CACrC;AACD;AAAA,MAEF;AACE,QAAAV,EAAO,KAAK;AAAA,UACV,GAAGU;AAAA,UACH,GAAG,KAAK,OAAA,IAAW;AAAA,UACnB,GAAG,KAAK,OAAA,IAAW;AAAA,QAAA,CACpB;AAAA,IACL;AAAA,EACF;AAEO,SAAAV;AACT;AAEO,MAAMY,IAAoB,CAACC,GAAcC,IAAkB,QAAgB;AAChF,QAAMC,IAAQF,IAAOC,GACfE,IAAMH,IAAOE,GACbE,IAAMJ,IAAOE;AAEZ,SAAA,KAAK,MAAM,KAAK,OAAA,KAAYE,IAAMD,IAAM,EAAE,IAAIA;AACvD;"}

package/dist/features/{ui/stickers/stickers-styled.js → stickers/stickers-effects/stickers-effects-styled.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import $, { css as s } from "styled-components";
-import { effectAnimations as n } from "./stickers-effects.js";
+import { effectAnimations as n } from "./effects.js";
 const h = $.div`
   position: relative;
   width: 100vw;
@@ -26,4 +26,4 @@ export {
   h as Container,
   a as Sticker
 };
-//# sourceMappingURL=stickers-styled.js.map
+//# sourceMappingURL=stickers-effects-styled.js.map

package/dist/features/stickers/stickers-effects/stickers-effects-styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stickers-effects-styled.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects-styled.ts"],"sourcesContent":["import type { IStickersProps } from './stickers-effects-types';\n\nimport styled, { css } from 'styled-components';\n\nimport { effectAnimations } from './effects';\n\nexport const Container = styled.div`\n position: relative;\n width: 100vw;\n height: 100vh;\n background: transparent;\n pointer-events: none;\n`;\n\nexport const Sticker = styled.div<{\n effect: IStickersProps['effect'];\n duration: number;\n fromX?: string;\n fromY?: string;\n x: number;\n y: number;\n size: number;\n}>`\n position: absolute;\n z-index: 10;\n\n left: ${({ x }) => `${x}%`};\n top: ${({ y }) => `${y}%`};\n width: ${({ size }) => `${size}px`};\n height: ${({ size }) => `${size}px`};\n font-size: ${({ size }) => `${size}px`};\n\n ${({ effect, duration, fromX, fromY }) =>\n fromX && fromY\n ? css`\n ${effectAnimations[effect](duration)}\n --from-x: ${fromX};\n --from-y: ${fromY};\n `\n : effectAnimations[effect](duration)}\n`;\n"],"names":["Container","styled","Sticker","x","y","size","effect","duration","fromX","fromY","css","effectAnimations"],"mappings":";;AAMO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBC,IAAUD,EAAO;AAAA;AAAA;AAAA;AAAA,UAYpB,CAAC,EAAE,GAAAE,EAAQ,MAAA,GAAGA,CAAC,GAAG;AAAA,SACnB,CAAC,EAAE,GAAAC,EAAQ,MAAA,GAAGA,CAAC,GAAG;AAAA,WAChB,CAAC,EAAE,MAAAC,EAAW,MAAA,GAAGA,CAAI,IAAI;AAAA,YACxB,CAAC,EAAE,MAAAA,EAAW,MAAA,GAAGA,CAAI,IAAI;AAAA,eACtB,CAAC,EAAE,MAAAA,EAAW,MAAA,GAAGA,CAAI,IAAI;AAAA;AAAA,IAEpC,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,OAAAC,GAAO,OAAAC,QAC5BD,KAASC,IACLC;AAAA,YACIC,EAAiBL,CAAM,EAAEC,CAAQ,CAAC;AAAA,sBACxBC,CAAK;AAAA,sBACLC,CAAK;AAAA,YAEnBE,EAAiBL,CAAM,EAAEC,CAAQ,CAAC;AAAA;"}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"stickers-effects.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects.tsx"],"sourcesContent":["import type { TStickerData, IStickersProps } from './stickers-effects-types';\n\nimport React, { memo, useEffect, useState } from 'react';\n\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { generateStickerData } from './stickers-effects-helper';\nimport * as S from './stickers-effects-styled';\n\nconst StickerWithFallback: React.FC<{\n lottie?: string;\n sticker: string;\n size: number;\n}> = memo(({ lottie, sticker, size }) => {\n const [failed, setFailed] = useState(false);\n\n if (!lottie || failed) return <>{sticker}</>;\n\n return (\n <LottieAnimation src={lottie} width={size} height={size} onError={() => setFailed(true)} />\n );\n});\n\nconst StickersEffects: React.FC<IStickersProps> = ({ stickers, effect, count, duration }) => {\n const [stickersData, setStickersData] = useState<ReturnType<typeof generateStickerData>>([]);\n\n useEffect(() => {\n const stickerData = generateStickerData({\n count,\n effect,\n stickers,\n minSize: 32,\n maxSize: 48,\n });\n\n setStickersData(stickerData);\n\n const timeout = setTimeout(() => setStickersData([]), duration);\n\n return () => clearTimeout(timeout);\n }, [stickers, effect, count, duration]);\n\n return (\n <S.Container>\n {stickersData.map((data: TStickerData, i) => {\n const { id, sticker, lottie, x, y, size, fromX, fromY } = data;\n\n return (\n <S.Sticker\n key={`${id}-${i}`}\n effect={effect}\n duration={duration}\n fromX={fromX}\n fromY={fromY}\n x={x}\n y={y}\n size={size}\n >\n <StickerWithFallback lottie={lottie} sticker={sticker} size={size} />\n </S.Sticker>\n );\n })}\n </S.Container>\n );\n};\n\nexport default memo(StickersEffects);\n"],"names":["StickerWithFallback","memo","lottie","sticker","size","failed","setFailed","useState","jsx","LottieAnimation","StickersEffects","stickers","effect","count","duration","stickersData","setStickersData","useEffect","stickerData","generateStickerData","timeout","S.Container","data","i","id","x","y","fromX","fromY","S.Sticker","stickersEffects"],"mappings":";;;;;AAQA,MAAMA,IAIDC,EAAK,CAAC,EAAE,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,QAAW;AACvC,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SAAI,CAACL,KAAUG,2BAAkB,UAAQF,EAAA,CAAA,IAGtC,gBAAAK,EAAAC,GAAA,EAAgB,KAAKP,GAAQ,OAAOE,GAAM,QAAQA,GAAM,SAAS,MAAME,EAAU,EAAI,EAAG,CAAA;AAE7F,CAAC,GAEKI,IAA4C,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAe;AAC3F,QAAM,CAACC,GAAcC,CAAe,IAAIT,EAAiD,CAAE,CAAA;AAE3F,SAAAU,EAAU,MAAM;AACd,UAAMC,IAAcC,EAAoB;AAAA,MACtC,OAAAN;AAAA,MACA,QAAAD;AAAA,MACA,UAAAD;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,IAAA,CACV;AAED,IAAAK,EAAgBE,CAAW;AAE3B,UAAME,IAAU,WAAW,MAAMJ,EAAgB,CAAE,CAAA,GAAGF,CAAQ;AAEvD,WAAA,MAAM,aAAaM,CAAO;AAAA,KAChC,CAACT,GAAUC,GAAQC,GAAOC,CAAQ,CAAC,GAGpC,gBAAAN,EAACa,GAAA,EACE,YAAa,IAAI,CAACC,GAAoBC,MAAM;AACrC,UAAA,EAAE,IAAAC,GAAI,SAAArB,GAAS,QAAAD,GAAQ,GAAAuB,GAAG,GAAAC,GAAG,MAAAtB,GAAM,OAAAuB,GAAO,OAAAC,EAAU,IAAAN;AAGxD,WAAA,gBAAAd;AAAA,MAACqB;AAAAA,MAAA;AAAA,QAEC,QAAAjB;AAAA,QACA,UAAAE;AAAA,QACA,OAAAa;AAAA,QACA,OAAAC;AAAA,QACA,GAAAH;AAAA,QACA,GAAAC;AAAA,QACA,MAAAtB;AAAA,QAEA,UAAC,gBAAAI,EAAAR,GAAA,EAAoB,QAAAE,GAAgB,SAAAC,GAAkB,MAAAC,GAAY;AAAA,MAAA;AAAA,MAT9D,GAAGoB,CAAE,IAAID,CAAC;AAAA,IAAA;AAAA,EAYpB,CAAA,EACH,CAAA;AAEJ,GAEeO,IAAA7B,EAAKS,CAAe;"}

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

@@ -1,32 +1,33 @@
-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,
-    onRender: o,
-    animateOnIntersect: c
-  } = v, a = u(null), r = u(null), s = u(null);
-  return b(
-    L,
+    settings: d,
+    eventListener: o,
+    onRender: i,
+    onError: a,
+    animateOnIntersect: s
+  } = L, c = m(null), r = m(null), u = m(null);
+  return I(
+    h,
     () => ({
-      playSegments: (t, i) => {
+      playSegments: (t, n) => {
         var e;
-        return (e = r.current) == null ? void 0 : e.playSegments(t, i);
+        return (e = r.current) == null ? void 0 : e.playSegments(t, n);
       },
-      addEventListener: (t, i) => {
+      addEventListener: (t, n) => {
         var e;
-        return (e = r.current) == null ? void 0 : e.addEventListener(t, i);
+        return (e = r.current) == null ? void 0 : e.addEventListener(t, n);
       },
-      removeEventListener: (t, i) => {
+      removeEventListener: (t, n) => {
         var e;
-        return (e = r.current) == null ? void 0 : e.removeEventListener(t, i);
+        return (e = r.current) == null ? void 0 : e.removeEventListener(t, n);
       },
       play: () => {
         var t;
@@ -35,37 +36,41 @@ const O = A((v, L) => {
       stop: () => {
         var t;
         return (t = r.current) == null ? void 0 : t.stop();
+      },
+      goToAndStop: (t, n) => {
+        var e;
+        return (e = r.current) == null ? void 0 : e.goToAndStop(t, n);
       }
     }),
     []
-  ), I(() => {
+  ), S(() => {
     let t = !1;
     return (async () => {
       try {
-        const e = await x(m);
+        const e = await x(l);
         requestAnimationFrame(() => {
-          !a.current || t || (r.current = g.loadAnimation({
-            container: a.current,
+          !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)), o == null || o(), 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 (e) {
-        throw Error(`Error loading Lottie animation: ${e}`);
+        throw a == null || a(), Error(`Error loading Lottie animation: ${e}`);
       }
     })(), () => {
       var e;
-      t = !0, r.current && (n && r.current.removeEventListener(n.name, n.callback), c && ((e = s.current) == null || e.disconnect()), r.current.destroy());
+      t = !0, r.current && (o && r.current.removeEventListener(o.name, o.callback), s && ((e = u.current) == null || e.disconnect()), r.current.destroy());
     };
-  }, [m, n, o, 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 CHANGED Viewed

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

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

@@ -73,7 +73,7 @@ const p = a.div(
     }
   }
 `
-), c = a.div(
+), d = a.div(
   ({ $modalWidth: t }) => `
   max-height: calc(100vh - 142px);
   overflow-y: auto;
@@ -82,7 +82,7 @@ const p = a.div(
     max-height: 100vh;
   }
 }`
-), m = a.div(
+), c = a.div(
   ({ theme: { colors: t }, $modalWidth: o }) => `
   position: absolute;
   top: -56px;
@@ -100,7 +100,7 @@ const p = a.div(
     color: ${t.BLACK_1};
   }
 `
-), d = a.div`
+), m = a.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -151,6 +151,36 @@ 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;
@@ -186,11 +216,12 @@ const p = a.div(
 );
 export {
   l as BaseModal,
-  c as BaseModalContent,
-  h as BottomSheetModal,
-  m as CloseButtonContainer,
+  d as BaseModalContent,
+  x as BottomSheetModal,
+  c as CloseButtonContainer,
   p as ModalContainer,
-  d as ModalLoaderWrapper,
-  f as SpotlightModal
+  m as ModalLoaderWrapper,
+  f as SpotlightModal,
+  h as TransparentModalContainer
 };
 //# sourceMappingURL=modal-styled.js.map

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

	@@ -1 +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;"}
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;"}

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

@@ -1,35 +1,35 @@
 import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import { captureException as u } from "@sentry/browser";
-import { memo as $, useCallback as g, Suspense as n } from "react";
-import { ErrorBoundary as a } from "react-error-boundary";
-import E from "../../../assets/line-icons/icons/cross.js";
-import h from "../error/error.js";
-import M from "../buttons/clickable/clickable.js";
+import { 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 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 "../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();
   }, []);
-  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 l === "bottom-sheet" ? /* @__PURE__ */ r(s, { $isClosing: o, onClick: p ? m : () => null, children: /* @__PURE__ */ r(v, { $isClosing: o, onClick: b, children: /* @__PURE__ */ r(
+    h,
     {
-      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 })
+      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 })
     }
-  ) }) }) : s === "spotlight" ? /* @__PURE__ */ r(d, { $isClosing: o, children: /* @__PURE__ */ r(
-    a,
+  ) }) }) : l === "spotlight" ? /* @__PURE__ */ r(s, { $isClosing: o, children: /* @__PURE__ */ r(
+    h,
     {
-      fallback: /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(h, { height: "100vh" }) }),
-      onError: i,
+      fallback: /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(c, { height: "100vh" }) }),
+      onError: t,
       children: /* @__PURE__ */ f(
-        n,
+        a,
         {
-          fallback: /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(c, { height: "100vh" }) }),
+          fallback: /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(d, { height: "100vh" }) }),
           children: [
             /* @__PURE__ */ r(B, { $isClosing: o }),
             e
@@ -37,14 +37,14 @@ const q = $(({ modal: b, isClosing: o = !1, onClose: m }) => {
         }
       )
     }
-  ) }) : /* @__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,
+  ) }) : 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,
       {
-        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(c, { height: "50vh", size: "compact" }),
+        onError: t,
+        children: /* @__PURE__ */ r(a, { fallback: /* @__PURE__ */ r(d, { height: "50vh" }), children: e })
       }
     ) })
   ] }) });

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

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