npm - @cuemath/leap - Versions diffs - 3.2.21-m → 3.2.22-m - Mend

@cuemath/leap 3.2.21-m → 3.2.22-m

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 (70) hide show

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

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

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

@@ -0,0 +1 @@

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

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"dot-lottie-animation.js","sources":["../../../../src/features/ui/dot-lottie-animations/dot-lottie-animation.tsx"],"sourcesContent":["import type {\n AnimationSegment,\n ILottieAnimationProps,\n ILottieAnimationRef,\n} from './dot-lottie-types';\n\nimport { DotLottieWorker } from '@lottiefiles/dotlottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport * as Styled from './dot-lottie-animation-styled';\n\nconst DotLottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n const { src, width = '100%', height = '100%', settings, eventListeners, onRender } = props;\n\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const animationInstance = useRef<DotLottieWorker | null>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n playSegments: (segments: AnimationSegment) => {\n animationInstance.current?.setSegment(segments[0], segments[1]);\n animationInstance.current?.play();\n },\n play: () => {\n animationInstance.current?.play();\n },\n pause: () => {\n animationInstance.current?.pause();\n },\n }),\n [],\n );\n\n useEffect(() => {\n if (!canvasRef.current) return;\n\n animationInstance.current = new DotLottieWorker({\n src,\n canvas: canvasRef.current,\n autoplay: true,\n loop: false,\n renderConfig: {\n autoResize: true,\n devicePixelRatio: window.devicePixelRatio,\n freezeOnOffscreen: true,\n },\n ...settings,\n });\n\n onRender?.();\n }, [src, settings, onRender]);\n\n useEffect(() => {\n eventListeners?.forEach(\n ({ name, callback }) => animationInstance.current?.addEventListener(name, callback),\n );\n\n return () => {\n eventListeners?.forEach(\n ({ name, callback }) => animationInstance.current?.removeEventListener(name, callback),\n );\n animationInstance.current?.destroy();\n };\n }, [eventListeners]);\n\n const isNumW = typeof width === 'number';\n const isNumH = typeof height === 'number';\n\n return (\n <FlexView $width={width} $height={height}>\n <Styled.Canvas\n ref={canvasRef}\n $renderWidth={width}\n $renderHeight={height}\n width={isNumW ? width : undefined}\n height={isNumH ? height : undefined}\n />\n </FlexView>\n );\n});\n\nexport default memo(DotLottieAnimation);\n"],"names":["DotLottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListeners","onRender","canvasRef","useRef","animationInstance","useImperativeHandle","segments","_a","_b","useEffect","DotLottieWorker","name","callback","jsx","FlexView","Styled.Canvas","dotLottieAnimation","memo"],"mappings":";;;;;AAYA,MAAMA,IAAqBC,EAAuD,CAACC,GAAOC,MAAQ;AAC1F,QAAA,EAAE,KAAAC,GAAK,OAAAC,IAAQ,QAAQ,QAAAC,IAAS,QAAQ,UAAAC,GAAU,gBAAAC,GAAgB,UAAAC,EAAa,IAAAP,GAE/EQ,IAAYC,EAA0B,IAAI,GAC1CC,IAAoBD,EAA+B,IAAI;AAE7D,SAAAE;AAAA,IACEV;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACW,MAA+B;;AAC5C,SAAAC,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B,WAAWD,EAAS,CAAC,GAAGA,EAAS,CAAC,KAC7DE,IAAAJ,EAAkB,YAAlB,QAAAI,EAA2B;AAAA,MAC7B;AAAA,MACA,MAAM,MAAM;;AACV,SAAAD,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,MAC7B;AAAA,MACA,OAAO,MAAM;;AACX,SAAAA,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,MAC7B;AAAA,IAAA;AAAA,IAEF,CAAC;AAAA,EAAA,GAGHE,EAAU,MAAM;AACV,IAACP,EAAU,YAEGE,EAAA,UAAU,IAAIM,EAAgB;AAAA,MAC9C,KAAAd;AAAA,MACA,QAAQM,EAAU;AAAA,MAClB,UAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAc;AAAA,QACZ,YAAY;AAAA,QACZ,kBAAkB,OAAO;AAAA,QACzB,mBAAmB;AAAA,MACrB;AAAA,MACA,GAAGH;AAAA,IAAA,CACJ,GAEUE,KAAA,QAAAA;AAAA,EACV,GAAA,CAACL,GAAKG,GAAUE,CAAQ,CAAC,GAE5BQ,EAAU,OACQT,KAAA,QAAAA,EAAA;AAAA,IACd,CAAC,EAAE,MAAAW,GAAM,UAAAC,QAAe;;AAAA,cAAAL,IAAAH,EAAkB,YAAlB,gBAAAG,EAA2B,iBAAiBI,GAAMC;AAAA;AAAA,KAGrE,MAAM;;AACK,IAAAZ,KAAA,QAAAA,EAAA;AAAA,MACd,CAAC,EAAE,MAAAW,GAAM,UAAAC,QAAe;;AAAA,gBAAAL,IAAAH,EAAkB,YAAlB,gBAAAG,EAA2B,oBAAoBI,GAAMC;AAAA;AAAA,QAE/EL,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,EAAQ,IAEpC,CAACP,CAAc,CAAC,GAMhB,gBAAAa,EAAAC,GAAA,EAAS,QAAQjB,GAAO,SAASC,GAChC,UAAA,gBAAAe;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,cAAcL;AAAA,MACd,eAAeC;AAAA,MACf,OATS,OAAOD,KAAU,WASVA,IAAQ;AAAA,MACxB,QATS,OAAOC,KAAW,WASVA,IAAS;AAAA,IAAA;AAAA,EAE9B,EAAA,CAAA;AAEJ,CAAC,GAEckB,IAAAC,EAAKzB,CAAkB;"}

package/dist/features/ui/grade-selector/grade-selector.js CHANGED Viewed

@@ -1,40 +1,46 @@
-import { jsx as r } from "react/jsx-runtime";
-import { GradeSelectorWrapper as a } from "./grade-selector-styled.js";
-import f from "./grade-tab.js";
-function d({
-  selectedValue: t,
-  onSelect: o,
-  tabsWidth: i,
-  width: l,
-  grades: m,
-  renderAs: n,
-  size: c,
-  layoutAlignment: p
+import { jsx as c } from "react/jsx-runtime";
+import { useMemo as h } from "react";
+import { useTheme as s } from "styled-components";
+import { EDeviceType as f } from "../theme/constants.js";
+import { GradeSelectorWrapper as x } from "./grade-selector-styled.js";
+import E from "./grade-tab.js";
+function I({
+  selectedValue: i,
+  onSelect: n,
+  tabsWidth: p,
+  width: u,
+  grades: l,
+  renderAs: d,
+  size: e,
+  sizeOnMobile: m,
+  sizeOnTablet: t,
+  layoutAlignment: a
 }) {
-  return /* @__PURE__ */ r(
-    a,
+  const { device: o } = s(), G = h(() => o <= f.MOBILE ? m || t || e : o <= f.TABLET && t || e, [o, e, m, t]);
+  return /* @__PURE__ */ c(
+    x,
     {
-      width: l,
-      layoutAlignment: p,
+      width: u,
+      layoutAlignment: a,
       $alignItems: "center",
       $flexDirection: "row",
-      children: m.map((e) => /* @__PURE__ */ r(
-        f,
+      children: l.map((r) => /* @__PURE__ */ c(
+        E,
         {
-          label: e === "0" ? "KG" : e,
-          selected: t === e,
-          width: i,
-          onSelect: o,
-          renderAs: n,
-          size: c,
-          grade: e
+          label: r === "0" ? "KG" : r,
+          selected: i === r,
+          width: p,
+          onSelect: n,
+          renderAs: d,
+          size: G,
+          grade: r
         },
-        e
+        r
       ))
     }
   );
 }
 export {
-  d as default
+  I as default
 };
 //# sourceMappingURL=grade-selector.js.map

package/dist/features/ui/grade-selector/grade-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"grade-selector.js","sources":["../../../../src/features/ui/grade-selector/grade-selector.tsx"],"sourcesContent":["import type { IGradeSelectorProps } from './grade-selector-types';\nimport type { ReactElement } from 'react';\n\nimport * as Styled from './grade-selector-styled';\nimport GradeTab from './grade-tab';\n\nfunction GradeSelector({\n selectedValue,\n onSelect,\n tabsWidth,\n width,\n grades,\n renderAs,\n size,\n layoutAlignment,\n}: IGradeSelectorProps): ReactElement {\n return (\n <Styled.GradeSelectorWrapper\n width={width}\n layoutAlignment={layoutAlignment}\n $alignItems=\"center\"\n $flexDirection=\"row\"\n >\n {grades.map(grade => {\n return (\n <GradeTab\n key={grade}\n label={grade === '0' ? 'KG' : grade}\n selected={selectedValue === grade}\n width={tabsWidth}\n onSelect={onSelect}\n renderAs={renderAs}\n size={~~size~~}\n grade={grade}\n />\n );\n })}\n </Styled.GradeSelectorWrapper>\n );\n}\n\nexport default GradeSelector;\n"],"names":["GradeSelector","selectedValue","onSelect","tabsWidth","width","grades","renderAs","size","layoutAlignment","jsx","Styled.GradeSelectorWrapper","grade","GradeTab"],"mappings":"~~;;;AAMA~~,SAASA,EAAc;AAAA,EACrB,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AACF,GAAsC;~~AAElC~~,SAAA,~~gBAAAC~~;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,~~OAAAN~~;AAAA,MACA,~~iBAAAI~~;AAAA,MACA,aAAY;AAAA,MACZ,gBAAe;AAAA,MAEd,~~UAAAH~~,EAAO,IAAI,~~CAASM~~,MAEjB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,OAAOD,MAAU,MAAM,OAAOA;AAAA,UAC9B,~~UAAUV~~,~~MAAkBU~~;AAAA,UAC5B,~~OAAOR~~;AAAA,UACP,UAAAD;AAAA,UACA,UAAAI;AAAA,UACA,~~MAAAC~~;AAAA,~~UACA~~,~~OAAAI~~;AAAA,QAAA;AAAA,QAPKA;AAAA,MAAA,CAUV;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1	+ {"version":3,"file":"grade-selector.js","sources":["../../../../src/features/ui/grade-selector/grade-selector.tsx"],"sourcesContent":["import type { IGradeSelectorProps } from './grade-selector-types';\n\nimport { useMemo, type ReactElement } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { EDeviceType } from '../theme/constants';\nimport * as Styled from './grade-selector-styled';\nimport GradeTab from './grade-tab';\n\nfunction GradeSelector({\n selectedValue,\n onSelect,\n tabsWidth,\n width,\n grades,\n renderAs,\n size,\n sizeOnMobile,\n sizeOnTablet,\n layoutAlignment,\n}: IGradeSelectorProps): ReactElement {\n const { device } = useTheme();\n const renderSize = useMemo(() => {\n if (device <= EDeviceType.MOBILE) {\n return sizeOnMobile \|\| sizeOnTablet \|\| size;\n }\n\n if (device <= EDeviceType.TABLET) {\n return sizeOnTablet \|\| size;\n }\n\n return size;\n }, [device, size, sizeOnMobile, sizeOnTablet]);\n\n return (\n <Styled.GradeSelectorWrapper\n width={width}\n layoutAlignment={layoutAlignment}\n $alignItems=\"center\"\n $flexDirection=\"row\"\n >\n {grades.map(grade => {\n return (\n <GradeTab\n key={grade}\n label={grade === '0' ? 'KG' : grade}\n selected={selectedValue === grade}\n width={tabsWidth}\n onSelect={onSelect}\n renderAs={renderAs}\n size={renderSize}\n grade={grade}\n />\n );\n })}\n </Styled.GradeSelectorWrapper>\n );\n}\n\nexport default GradeSelector;\n"],"names":["GradeSelector","selectedValue","onSelect","tabsWidth","width","grades","renderAs","size","sizeOnMobile","sizeOnTablet","layoutAlignment","device","useTheme","renderSize","useMemo","EDeviceType","jsx","Styled.GradeSelectorWrapper","grade","GradeTab"],"mappings":";;;;;;AASA,SAASA,EAAc;AAAA,EACrB,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AACF,GAAsC;AAC9B,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAaC,EAAQ,MACrBH,KAAUI,EAAY,SACjBP,KAAgBC,KAAgBF,IAGrCI,KAAUI,EAAY,UACjBN,KAAgBF,GAIxB,CAACI,GAAQJ,GAAMC,GAAcC,CAAY,CAAC;AAG3C,SAAA,gBAAAO;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAb;AAAA,MACA,iBAAAM;AAAA,MACA,aAAY;AAAA,MACZ,gBAAe;AAAA,MAEd,UAAAL,EAAO,IAAI,CAASa,MAEjB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,OAAOD,MAAU,MAAM,OAAOA;AAAA,UAC9B,UAAUjB,MAAkBiB;AAAA,UAC5B,OAAOf;AAAA,UACP,UAAAD;AAAA,UACA,UAAAI;AAAA,UACA,MAAMO;AAAA,UACN,OAAAK;AAAA,QAAA;AAAA,QAPKA;AAAA,MAAA,CAUV;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/features/ui/inputs/base-input/base-input.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
 import { useTheme as g } from "styled-components";
 import { Container as x, Wrapper as z, InputWrapper as f, Error as L, HelperText as y, SiblingWrapper as R, Label as E } from "./base-input-styled.js";
-const k = (h) => {
+const H = ($) => {
   const {
-    label: a,
-    stickyLabel: $,
+    label: l,
+    stickyLabel: h,
     renderAs: e,
     width: b,
     widthX: c,
@@ -19,8 +19,8 @@ const k = (h) => {
     shape: t,
     isTransparent: p = !1,
     helperText: o
-  } = h, { input: T } = g();
-  return /* @__PURE__ */ r(x, { $width: b, $widthX: c, $size: s, $willShowMessage: u, children: /* @__PURE__ */ l(
+  } = $, { input: T } = g();
+  return /* @__PURE__ */ r(x, { $width: b, $widthX: c, $size: s, $willShowMessage: u, children: /* @__PURE__ */ a(
     z,
     {
       $renderAs: e,
@@ -29,7 +29,7 @@ const k = (h) => {
       $shape: t,
       $isTransparent: p,
       children: [
-        /* @__PURE__ */ l(f, { children: [
+        /* @__PURE__ */ a(f, { children: [
           w,
           n && /* @__PURE__ */ r(L, { $renderAs: "body3", $inputRenderAs: e, children: n }),
           o && !n && /* @__PURE__ */ r(y, { $renderAs: "ub3", $inputRenderAs: e, children: o })
@@ -44,18 +44,18 @@ const k = (h) => {
             children: d
           }
         ) : void 0,
-        a && t !== "curved" && /* @__PURE__ */ l(
+        l && t !== "curved" && /* @__PURE__ */ a(
           E,
           {
             $renderAs: T.sizes[s].labelTextVariant,
             $inputRenderAs: e,
             $size: s,
-            $stickyLabel: $,
+            $stickyLabel: h,
             $disabled: i,
             $shape: t,
             $isTransparent: p,
             children: [
-              a,
+              l,
               A && /* @__PURE__ */ r("span", { children: "*" })
             ]
           }
@@ -63,7 +63,7 @@ const k = (h) => {
       ]
     }
   ) });
-};
+}, k = H;
 export {
   k as default
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n Container,\n Error,\n InputWrapper,\n Label,\n SiblingWrapper,\n Wrapper,\n HelperText,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n const {\n label,\n stickyLabel,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n inputElement,\n siblingElement,\n siblingPosition,\n size,\n errorMessage,\n mandatory,\n shape,\n isTransparent = false,\n helperText,\n } = props;\n const { input } = useTheme();\n const showLabel = label && shape !== 'curved';\n const showHelperText = helperText && !errorMessage;\n\n return (\n <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n <Wrapper\n $renderAs={renderAs}\n $size={size}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n <InputWrapper>\n {inputElement}\n {errorMessage && (\n <Error $renderAs=\"body3\" $inputRenderAs={renderAs}>\n {errorMessage}\n </Error>\n )}\n {showHelperText && (\n <HelperText $renderAs=\"ub3\" $inputRenderAs={renderAs}>\n {helperText}\n </HelperText>\n )}\n </InputWrapper>\n {siblingElement ? (\n <SiblingWrapper\n $inputRenderAs={renderAs}\n $disabled={disabled}\n $size={size}\n $siblingPosition={siblingPosition ?? 'right'}\n >\n {siblingElement}\n </SiblingWrapper>\n ) : undefined}\n {showLabel && (\n <Label\n $renderAs={input.sizes[size].labelTextVariant}\n $inputRenderAs={renderAs}\n $size={size}\n $stickyLabel={stickyLabel}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n {label}\n {mandatory && <span>*</span>}\n </Label>\n )}\n </Wrapper>\n </Container>\n );\n};\n\nexport default BaseInput;\n"],"names":["BaseInput","props","label","stickyLabel","renderAs","width","widthX","disabled","willShowMessage","inputElement","siblingElement","siblingPosition","size","errorMessage","mandatory","shape","isTransparent","helperText","input","useTheme","jsx","Container","jsxs","Wrapper","InputWrapper","Error","HelperText","SiblingWrapper","Label"],"mappings":";;;AAeA,MAAMA,IAAuC,CAASC,MAAA;AAC9C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,EACE,IAAAhB,GACE,EAAE,OAAAiB,MAAUC;AAKhB,SAAA,gBAAAC,EAACC,KAAU,QAAQhB,GAAO,SAASC,GAAQ,OAAOM,GAAM,kBAAkBJ,GACxE,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWnB;AAAA,MACX,OAAOQ;AAAA,MACP,WAAWL;AAAA,MACX,QAAQQ;AAAA,MACR,gBAAgBC;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAM,EAACE,GACE,EAAA,UAAA;AAAA,UAAAf;AAAA,UACAI,KACE,gBAAAO,EAAAK,GAAA,EAAM,WAAU,SAAQ,gBAAgBrB,GACtC,UACHS,GAAA;AAAA,UAhBaI,KAAc,CAACJ,KAmB3B,gBAAAO,EAAAM,GAAA,EAAW,WAAU,OAAM,gBAAgBtB,GACzC,UACHa,GAAA;AAAA,QAAA,GAEJ;AAAA,QACCP,IACC,gBAAAU;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,gBAAgBvB;AAAA,YAChB,WAAWG;AAAA,YACX,OAAOK;AAAA,YACP,kBAAkBD,KAAmB;AAAA,YAEpC,UAAAD;AAAA,UAAA;AAAA,QAED,IAAA;AAAA,QAlCQR,KAASa,MAAU,YAoC7B,gBAAAO;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,WAAWV,EAAM,MAAMN,CAAI,EAAE;AAAA,YAC7B,gBAAgBR;AAAA,YAChB,OAAOQ;AAAA,YACP,cAAcT;AAAA,YACd,WAAWI;AAAA,YACX,QAAQQ;AAAA,YACR,gBAAgBC;AAAA,YAEf,UAAA;AAAA,cAAAd;AAAA,cACAY,KAAc,gBAAAM,EAAA,QAAA,EAAK,UAAC,IAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n Container,\n Error,\n InputWrapper,\n Label,\n SiblingWrapper,\n Wrapper,\n HelperText,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n const {\n label,\n stickyLabel,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n inputElement,\n siblingElement,\n siblingPosition,\n size,\n errorMessage,\n mandatory,\n shape,\n isTransparent = false,\n helperText,\n } = props;\n const { input } = useTheme();\n const showLabel = label && shape !== 'curved';\n const showHelperText = helperText && !errorMessage;\n\n return (\n <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n <Wrapper\n $renderAs={renderAs}\n $size={size}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n <InputWrapper>\n {inputElement}\n {errorMessage && (\n <Error $renderAs=\"body3\" $inputRenderAs={renderAs}>\n {errorMessage}\n </Error>\n )}\n {showHelperText && (\n <HelperText $renderAs=\"ub3\" $inputRenderAs={renderAs}>\n {helperText}\n </HelperText>\n )}\n </InputWrapper>\n {siblingElement ? (\n <SiblingWrapper\n $inputRenderAs={renderAs}\n $disabled={disabled}\n $size={size}\n $siblingPosition={siblingPosition ?? 'right'}\n >\n {siblingElement}\n </SiblingWrapper>\n ) : undefined}\n {showLabel && (\n <Label\n $renderAs={input.sizes[size].labelTextVariant}\n $inputRenderAs={renderAs}\n $size={size}\n $stickyLabel={stickyLabel}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n {label}\n {mandatory && <span>*</span>}\n </Label>\n )}\n </Wrapper>\n </Container>\n );\n};\n\nexport default BaseInput;\n"],"names":["BaseInput","props","label","stickyLabel","renderAs","width","widthX","disabled","willShowMessage","inputElement","siblingElement","siblingPosition","size","errorMessage","mandatory","shape","isTransparent","helperText","input","useTheme","jsx","Container","jsxs","Wrapper","InputWrapper","Error","HelperText","SiblingWrapper","Label","BaseInput$1"],"mappings":";;;AAeA,MAAMA,IAAuC,CAASC,MAAA;AAC9C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,EACE,IAAAhB,GACE,EAAE,OAAAiB,MAAUC;AAKhB,SAAA,gBAAAC,EAACC,KAAU,QAAQhB,GAAO,SAASC,GAAQ,OAAOM,GAAM,kBAAkBJ,GACxE,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWnB;AAAA,MACX,OAAOQ;AAAA,MACP,WAAWL;AAAA,MACX,QAAQQ;AAAA,MACR,gBAAgBC;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAM,EAACE,GACE,EAAA,UAAA;AAAA,UAAAf;AAAA,UACAI,KACE,gBAAAO,EAAAK,GAAA,EAAM,WAAU,SAAQ,gBAAgBrB,GACtC,UACHS,GAAA;AAAA,UAhBaI,KAAc,CAACJ,KAmB3B,gBAAAO,EAAAM,GAAA,EAAW,WAAU,OAAM,gBAAgBtB,GACzC,UACHa,GAAA;AAAA,QAAA,GAEJ;AAAA,QACCP,IACC,gBAAAU;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,gBAAgBvB;AAAA,YAChB,WAAWG;AAAA,YACX,OAAOK;AAAA,YACP,kBAAkBD,KAAmB;AAAA,YAEpC,UAAAD;AAAA,UAAA;AAAA,QAED,IAAA;AAAA,QAlCQR,KAASa,MAAU,YAoC7B,gBAAAO;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,WAAWV,EAAM,MAAMN,CAAI,EAAE;AAAA,YAC7B,gBAAgBR;AAAA,YAChB,OAAOQ;AAAA,YACP,cAAcT;AAAA,YACd,WAAWI;AAAA,YACX,QAAQQ;AAAA,YACR,gBAAgBC;AAAA,YAEf,UAAA;AAAA,cAAAd;AAAA,cACAY,KAAc,gBAAAM,EAAA,QAAA,EAAK,UAAC,IAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ,GAEAS,IAAe7B;"}

package/dist/features/ui/inputs/text-input/text-input.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as I } from "react";
 import T from "../base-input/base-input.js";
-import { Input as b } from "./text-input-styled.js";
-const i = "regular", g = I((o, p) => {
+import { Input as g } from "./text-input-styled.js";
+const i = "regular", $ = I((o, l) => {
   const {
     type: e,
-    label: l,
+    label: p,
     value: t,
     renderAs: r,
     width: m,
@@ -14,43 +14,44 @@ const i = "regular", g = I((o, p) => {
     willShowMessage: d,
     siblingElement: f,
     errorMessage: c,
-    shape: h,
-    isTransparent: n,
-    helperText: w,
+    shape: b,
+    isTransparent: a,
+    helperText: h,
+    stickyLabel: w,
     ...x
   } = o;
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ n(
     T,
     {
       renderAs: r,
-      label: l,
-      stickyLabel: !!t || e === "date",
+      label: p,
+      stickyLabel: !!t || e === "date" || w,
       width: m,
       widthX: u,
       disabled: s,
       willShowMessage: d,
       size: i,
-      shape: h,
+      shape: b,
       errorMessage: c,
-      helperText: w,
-      isTransparent: n,
-      inputElement: /* @__PURE__ */ a(
-        b,
+      helperText: h,
+      isTransparent: a,
+      inputElement: /* @__PURE__ */ n(
+        g,
         {
-          ref: p,
+          ref: l,
           type: e,
           value: t ?? "",
           $renderAs: r,
           $size: i,
           disabled: s,
-          $isTransparent: n,
+          $isTransparent: a,
           ...x
         }
       ),
       siblingElement: f
     }
   );
-}), z = g;
+}), z = $;
 export {
   z as default
 };

package/dist/features/ui/inputs/text-input/text-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n const {\n type,\n label,\n value,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n siblingElement,\n errorMessage,\n shape,\n isTransparent,\n helperText,\n ...rest\n } = props;\n\n return (\n <BaseInput\n renderAs={renderAs}\n label={label}\n stickyLabel={!!value \|\| type === 'date'}\n width={width}\n widthX={widthX}\n disabled={disabled}\n willShowMessage={willShowMessage}\n size={SIZE}\n shape={shape}\n errorMessage={errorMessage}\n helperText={helperText}\n isTransparent={isTransparent}\n inputElement={\n <Styled.Input\n ref={ref}\n type={type}\n value={value ?? ''}\n $renderAs={renderAs}\n $size={SIZE}\n disabled={disabled}\n $isTransparent={isTransparent}\n {...rest}\n />\n }\n siblingElement={siblingElement}\n />\n );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","helperText","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EACD,~~IAAAf~~;AAGF,SAAA,~~gBAAAgB~~;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,~~UAAAZ~~;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS;AAAA,~~MACjC~~,~~OAAAI~~;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,YAAAG;AAAA,MACA,eAAAD;AAAA,MACA,cACE,~~gBAAAG~~;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,~~KAAAjB~~;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UACf,~~GAAGE~~;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,~~gBAAAL~~;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,~~GAEDS~~,~~IAAerB~~;"}
1	+ {"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n const {\n type,\n label,\n value,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n siblingElement,\n errorMessage,\n shape,\n isTransparent,\n helperText,\n stickyLabel,\n ...rest\n } = props;\n\n return (\n <BaseInput\n renderAs={renderAs}\n label={label}\n stickyLabel={!!value \|\| type === 'date' \|\| stickyLabel}\n width={width}\n widthX={widthX}\n disabled={disabled}\n willShowMessage={willShowMessage}\n size={SIZE}\n shape={shape}\n errorMessage={errorMessage}\n helperText={helperText}\n isTransparent={isTransparent}\n inputElement={\n <Styled.Input\n ref={ref}\n type={type}\n value={value ?? ''}\n $renderAs={renderAs}\n $size={SIZE}\n disabled={disabled}\n $isTransparent={isTransparent}\n {...rest}\n />\n }\n siblingElement={siblingElement}\n />\n );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","helperText","stickyLabel","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAhB;AAGF,SAAA,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAb;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS,UAAUa;AAAA,MAC3C,OAAAT;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,YAAAG;AAAA,MACA,eAAAD;AAAA,MACA,cACE,gBAAAI;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAlB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UACf,GAAGG;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDU,IAAetB;"}

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

@@ -1,5 +1,5 @@
 import a from "styled-components";
-const s = a.div(
+const p = a.div(
   ({ theme: { colors: t, zIndex: o }, $isClosing: e }) => `
   position: fixed;
   top: 0;
@@ -82,7 +82,7 @@ const s = a.div(
     max-height: 100vh;
   }
 }`
-), d = a.div(
+), m = a.div(
   ({ theme: { colors: t }, $modalWidth: o }) => `
   position: absolute;
   top: -56px;
@@ -100,13 +100,13 @@ const s = a.div(
     color: ${t.BLACK_1};
   }
 `
-), m = a.div`
+), d = a.div`
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   width: 100%;
-`, i = 720, r = 800, n = 500, h = a.div(
+`, i = 720, r = 800, n = 500, f = a.div(
   ({ $isClosing: t }) => `
   position: absolute;
   width: ${i}px;
@@ -150,13 +150,47 @@ const s = a.div(
     }
   }
 `
+), h = a.div(
+  ({ $isClosing: t }) => `
+    width: 100%;
+    height: max-content;
+    overflow: auto;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    animation: ${t ? "slideOut" : "slideIn"} 0.3s forwards;
+    @keyframes slideIn {
+      from {
+        transform: translateY(100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0%);
+        opacity: 1;
+      }
+    }
+    @keyframes slideOut {
+      from {
+        transform: translateY(0%);
+        opacity: 1;
+      }
+      to {
+        transform: translateY(100%);
+        opacity: 0;
+      }
+    }
+  `
 );
 export {
   l as BaseModal,
   c as BaseModalContent,
-  d as CloseButtonContainer,
-  s as ModalContainer,
-  m as ModalLoaderWrapper,
-  h as SpotlightModal
+  h as BottomSheetModal,
+  m as CloseButtonContainer,
+  p as ModalContainer,
+  d as ModalLoaderWrapper,
+  f as SpotlightModal
 };
 //# 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\nexport {\n ModalContainer,\n BaseModal,\n BaseModalContent,\n CloseButtonContainer,\n SpotlightModal,\n ModalLoaderWrapper,\n};\n"],"names":["ModalContainer","styled","colors","zIndex","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","ModalLoaderWrapper","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal"],"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;"}
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;"}

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

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

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 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 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","~~jsx~~","Styled.ModalContainer","~~ErrorBoundary~~","~~Styled.ModalLoaderWrapper~~","~~Error~~","~~jsxs~~","Suspense","AppLoader","Styled.SpotlightModal","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":"~~;;;;;;;;;AAiBM~~,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;AAEL,~~SAAIN~~,MAAa,~~cAEZ~~,gBAAAQ,~~EAAAC~~,GAAA,EAAsB,~~YAAYX~~,GACjC,UAAA,~~gBAAAU~~;AAAA,~~IAACE~~;AAAA,IAAA;AAAA,MACC,~~4BACGC~~,GAAA,EACC,UAAC,~~gBAAAH~~,~~EAAAI~~,GAAA,EAAM,QAAO,QAAQ,CAAA,GACxB;AAAA,MAEF,~~SAASR~~;AAAA,MAET,UAAA,~~gBAAAS~~;AAAA,~~QAACC~~;AAAA,QAAA;AAAA,UACC,~~4BACGH~~,GAAA,EACC,UAAC,~~gBAAAH~~,~~EAAAO~~,GAAA,EAAU,QAAO,QAAQ,CAAA,GAC5B;AAAA,UAGF,UAAA;AAAA,YAAA,~~gBAAAP~~,EAACQ,GAAA,EAAsB,~~YAAYlB~~,EAAW,CAAA;AAAA,YAC7CG;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA,IAKD,~~gBAAAO~~,~~EAAAC~~,GAAA,EAAsB,~~YAAYX~~,GACjC,UAAC,~~gBAAAe~~,~~EAAAI~~,GAAA,EAAiB,~~YAAYnB~~,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,~~wBAChBe~~,GAAA,EAA4B,~~aAAahB~~,GACxC,~~4BAACiB~~,GAAU,EAAA,OAAM,SAAQ,~~SAASpB~~,GAChC,~~4BAACqB~~,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,IAED,gBAAAZ,EAAAa,GAAA,EAAwB,~~aAAanB~~,GACpC,UAAA,~~gBAAAM~~;AAAA,~~MAACE~~;AAAA,MAAA;AAAA,QACC,UAAW,~~gBAAAF~~,~~EAAAI~~,GAAA,EAAM,QAAO,QAAO,MAAK,WAAU;AAAA,QAC9C,~~SAASR~~;AAAA,QAET,UAAA,~~gBAAAI~~,~~EAACM~~,KAAS,UAAU,~~gBAAAN~~,~~EAACO~~,KAAU,QAAO,OAAO,CAAA,GAAK,~~UAAQd~~,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 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;"}