@cuemath/leap 3.2.11-j3 → 3.2.11-m

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

@@ -1 +1 @@
-{"version":3,"file":"error.js","sources":["../../../../src/features/ui/error/error.tsx"],"sourcesContent":["import type { TTextVariants } from '../types';\n\nimport React, { useCallback } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport Button from '../buttons/button/button';\nimport Image from '../image/image';\nimport FlexView from '../layout/flex-view';\nimport Text from '../text/text';\n\ninterface IErrorProps {\n  onTryAgain?: () => void;\n  height?: string | number;\n  theme?: 'light' | 'dark';\n  title?: string;\n  description?: string;\n  size?: 'compact' | 'full';\n}\n\ninterface IErrorConfig {\n  widthX: number;\n  heightX: number;\n  borderRadiusX: number;\n  marginBottomX: number;\n  title: TTextVariants;\n  description: TTextVariants;\n  imageWidth: number;\n  imageHeight: number;\n}\n\nconst ERROR_CONFIG: Record<'compact' | 'full', IErrorConfig> = {\n  compact: {\n    widthX: 10,\n    heightX: 5,\n    borderRadiusX: 1,\n    marginBottomX: 1,\n    title: 'h6',\n    description: 'body3',\n    imageWidth: 54,\n    imageHeight: 44,\n  },\n  full: {\n    widthX: 22.5,\n    heightX: 11.5,\n    borderRadiusX: 1,\n    marginBottomX: 1.5,\n    title: 'h4',\n    description: 'body2',\n    imageWidth: 122,\n    imageHeight: 100,\n  },\n};\n\nconst Error: React.FC<IErrorProps> = props => {\n  const { height, onTryAgain, theme = 'light', title, description, size = 'full' } = props;\n\n  const handleTryAgain = useCallback(() => {\n    if (onTryAgain) {\n      onTryAgain();\n    } else {\n      window.location.reload();\n    }\n  }, [onTryAgain]);\n\n  const textColor = theme === 'dark' ? 'WHITE_T_87' : 'BLACK_T_87';\n\n  return (\n    <FlexView $alignItems=\"center\" $justifyContent=\"center\" $height={height}>\n      <FlexView\n        $widthX={ERROR_CONFIG[size].widthX}\n        $heightX={ERROR_CONFIG[size].heightX}\n        $borderRadiusX={ERROR_CONFIG[size].borderRadiusX}\n        $marginBottomX={ERROR_CONFIG[size].marginBottomX}\n        $background=\"GREY_1\"\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n      >\n        <Image\n          width={ERROR_CONFIG[size].imageWidth}\n          height={ERROR_CONFIG[size].imageHeight}\n          src={ILLUSTRATIONS.ROCKET_BROKEN}\n          withLoader={false}\n        />\n      </FlexView>\n      <Text\n        $renderAs={ERROR_CONFIG[size].title}\n        $marginBottomX={0.5}\n        $color={textColor}\n        $align=\"center\"\n      >\n        {title ?? 'Oops! Looks like something went wrong'}\n      </Text>\n      <Text $renderAs=\"body2\" $align=\"center\" $marginBottomX={1.5} $color={textColor}>\n        {description ?? (\n          <>\n            Please try again. Alternatively if that does not work,\n            <br /> please contact support.\n          </>\n        )}\n      </Text>\n      <Button\n        label=\"Try again\"\n        onClick={handleTryAgain}\n        renderAs=\"primary\"\n        size=\"small\"\n        widthX={14}\n      />\n    </FlexView>\n  );\n};\n\nexport default Error;\n"],"names":["ERROR_CONFIG","Error","props","height","onTryAgain","theme","title","description","size","handleTryAgain","useCallback","textColor","FlexView","jsx","Image","ILLUSTRATIONS","Text","jsxs","Fragment","Button","Error$1"],"mappings":";;;;;;;AA8BA,MAAMA,IAAyD;AAAA,EAC7D,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,eAAe;AAAA,IACf,OAAO;AAAA,IACP,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,eAAe;AAAA,IACf,OAAO;AAAA,IACP,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AACF,GAEMC,IAA+B,CAASC,MAAA;AACtC,QAAA,EAAE,QAAAC,GAAQ,YAAAC,GAAY,OAAAC,IAAQ,SAAS,OAAAC,GAAO,aAAAC,GAAa,MAAAC,IAAO,OAAW,IAAAN,GAE7EO,IAAiBC,EAAY,MAAM;AACvC,IAAIN,IACSA,MAEX,OAAO,SAAS;EAClB,GACC,CAACA,CAAU,CAAC,GAETO,IAAYN,MAAU,SAAS,eAAe;AAEpD,2BACGO,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAAS,SAAST,GAC/D,UAAA;AAAA,IAAA,gBAAAU;AAAA,MAACD;AAAA,MAAA;AAAA,QACC,SAASZ,EAAaQ,CAAI,EAAE;AAAA,QAC5B,UAAUR,EAAaQ,CAAI,EAAE;AAAA,QAC7B,gBAAgBR,EAAaQ,CAAI,EAAE;AAAA,QACnC,gBAAgBR,EAAaQ,CAAI,EAAE;AAAA,QACnC,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,aAAY;AAAA,QAEZ,UAAA,gBAAAK;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAOd,EAAaQ,CAAI,EAAE;AAAA,YAC1B,QAAQR,EAAaQ,CAAI,EAAE;AAAA,YAC3B,KAAKO,EAAc;AAAA,YACnB,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,WAAWhB,EAAaQ,CAAI,EAAE;AAAA,QAC9B,gBAAgB;AAAA,QAChB,QAAQG;AAAA,QACR,QAAO;AAAA,QAEN,UAASL,KAAA;AAAA,MAAA;AAAA,IACZ;AAAA,IACA,gBAAAO,EAACG,GAAK,EAAA,WAAU,SAAQ,QAAO,UAAS,gBAAgB,KAAK,QAAQL,GAClE,UAAAJ,KACG,gBAAAU,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAA;AAAA,wBAEC,MAAG,EAAA;AAAA,MAAE;AAAA,IAAA,EAAA,CACR,EAEJ,CAAA;AAAA,IACA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAASV;AAAA,QACT,UAAS;AAAA,QACT,MAAK;AAAA,QACL,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,EAAA,CAAA;AAEJ,GAEAW,IAAenB;"}
+{"version":3,"file":"error.js","sources":["../../../../src/features/ui/error/error.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport Button from '../buttons/button/button';\nimport Image from '../image/image';\nimport FlexView from '../layout/flex-view';\nimport Text from '../text/text';\n\ninterface IErrorProps {\n  onTryAgain?: () => void;\n  height?: string | number;\n  theme?: 'light' | 'dark';\n  title?: string;\n  description?: string;\n}\n\nconst Error: React.FC<IErrorProps> = props => {\n  const { height, onTryAgain, theme = 'light', title, description } = props;\n  const handleTryAgain = useCallback(() => {\n    if (onTryAgain) {\n      onTryAgain();\n    } else {\n      window.location.reload();\n    }\n  }, [onTryAgain]);\n\n  const textColor = theme === 'dark' ? 'WHITE_T_87' : 'BLACK_T_87';\n\n  return (\n    <FlexView $alignItems=\"center\" $justifyContent=\"center\" $height={height}>\n      <FlexView\n        $widthX={22.5}\n        $heightX={11.5}\n        $borderRadiusX={1}\n        $marginBottomX={1.5}\n        $background=\"GREY_1\"\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n      >\n        <Image width={122} height={100} src={ILLUSTRATIONS.ROCKET_BROKEN} withLoader={false} />\n      </FlexView>\n      <Text $renderAs=\"h4\" $marginBottomX={0.5} $color={textColor} $align=\"center\">\n        {title ?? 'Oops! Looks like something went wrong'}\n      </Text>\n      <Text $renderAs=\"body2\" $align=\"center\" $marginBottomX={1.5} $color={textColor}>\n        {description ?? (\n          <>\n            Please try again. Alternatively if that does not work,\n            <br /> please contact support.\n          </>\n        )}\n      </Text>\n      <Button\n        label=\"Try again\"\n        onClick={handleTryAgain}\n        renderAs=\"primary\"\n        size=\"small\"\n        widthX={14}\n      />\n    </FlexView>\n  );\n};\n\nexport default Error;\n"],"names":["Error","props","height","onTryAgain","theme","title","description","handleTryAgain","useCallback","textColor","FlexView","jsx","Image","ILLUSTRATIONS","Text","jsxs","Fragment","Button","Error$1"],"mappings":";;;;;;;AAgBA,MAAMA,IAA+B,CAASC,MAAA;AAC5C,QAAM,EAAE,QAAAC,GAAQ,YAAAC,GAAY,OAAAC,IAAQ,SAAS,OAAAC,GAAO,aAAAC,EAAgB,IAAAL,GAC9DM,IAAiBC,EAAY,MAAM;AACvC,IAAIL,IACSA,MAEX,OAAO,SAAS;EAClB,GACC,CAACA,CAAU,CAAC,GAETM,IAAYL,MAAU,SAAS,eAAe;AAEpD,2BACGM,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAAS,SAASR,GAC/D,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAACD;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,aAAY;AAAA,QAEZ,UAAA,gBAAAC,EAACC,GAAM,EAAA,OAAO,KAAK,QAAQ,KAAK,KAAKC,EAAc,eAAe,YAAY,GAAO,CAAA;AAAA,MAAA;AAAA,IACvF;AAAA,IACA,gBAAAF,EAACG,GAAK,EAAA,WAAU,MAAK,gBAAgB,KAAK,QAAQL,GAAW,QAAO,UACjE,UAAAJ,KAAS,wCACZ,CAAA;AAAA,IACA,gBAAAM,EAACG,GAAK,EAAA,WAAU,SAAQ,QAAO,UAAS,gBAAgB,KAAK,QAAQL,GAClE,UAAAH,KACG,gBAAAS,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAA;AAAA,wBAEC,MAAG,EAAA;AAAA,MAAE;AAAA,IAAA,EAAA,CACR,EAEJ,CAAA;AAAA,IACA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAASV;AAAA,QACT,UAAS;AAAA,QACT,MAAK;AAAA,QACL,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,EAAA,CAAA;AAEJ,GAEAW,IAAelB;"}

package/dist/features/ui/image/image.js

@@ -14,7 +14,7 @@ const p = t(i)`
   overflow: hidden;
   position: relative;
 `, u = g(
-  ({ borderRadius: n = 0, borderColor: r, withLoader: a = !1, ...o }) => {
+  ({ borderRadius: n = 0, borderColor: r, withLoader: a, ...o }) => {
     const { width: s, height: d } = o, [m, l] = f(!0);
     return /* @__PURE__ */ h(
       L,

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

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../../src/features/ui/image/image.tsx"],"sourcesContent":["import type { IImageProps } from './image-types';\n\nimport { useState, memo } from 'react';\nimport styled from 'styled-components';\n\nimport { skeletonLoadingAnimation } from '../constants/style';\nimport FlexView from '../layout/flex-view';\n\nconst LoadingFlexView = styled(FlexView)`\n  animation: ${skeletonLoadingAnimation} 2s linear infinite;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n`;\n\nconst ImageWrapper = styled(FlexView)`\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Image: React.FC<IImageProps> = memo(\n  ({ borderRadius = 0, borderColor, withLoader = false, ...props }) => {\n    const { width, height } = props;\n    const [isLoading, setIsLoading] = useState(true);\n    const handleImgLoaded = () => {\n      setIsLoading(false);\n    };\n    const showLoader = isLoading && withLoader;\n\n    return (\n      <ImageWrapper\n        $width={width}\n        $height={height}\n        $borderColor={borderColor}\n        $borderRadius={borderRadius}\n      >\n        {showLoader && <LoadingFlexView $inherit={true} />}\n        <img onLoad={handleImgLoaded} {...props} />\n      </ImageWrapper>\n    );\n  },\n);\n\nexport default Image;\n"],"names":["LoadingFlexView","styled","FlexView","skeletonLoadingAnimation","ImageWrapper","Image","memo","borderRadius","borderColor","withLoader","props","width","height","isLoading","setIsLoading","useState","jsxs","jsx","Image$1"],"mappings":";;;;;AAQA,MAAMA,IAAkBC,EAAOC,CAAQ;AAAA,eACxBC,CAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjCC,IAAeH,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAK9BG,IAA+BC;AAAA,EACnC,CAAC,EAAE,cAAAC,IAAe,GAAG,aAAAC,GAAa,YAAAC,IAAa,IAAO,GAAGC,QAAY;AAC7D,UAAA,EAAE,OAAAC,GAAO,QAAAC,EAAW,IAAAF,GACpB,CAACG,GAAWC,CAAY,IAAIC,EAAS,EAAI;AAO7C,WAAA,gBAAAC;AAAA,MAACZ;AAAA,MAAA;AAAA,QACC,QAAQO;AAAA,QACR,SAASC;AAAA,QACT,cAAcJ;AAAA,QACd,eAAeD;AAAA,QAEd,UAAA;AAAA,UATcM,KAAaJ,KASb,gBAAAQ,EAACjB,GAAgB,EAAA,UAAU,GAAM,CAAA;AAAA,UAC/C,gBAAAiB,EAAA,OAAA,EAAI,QAbe,MAAM;AAC5B,YAAAH,EAAa,EAAK;AAAA,UAAA,GAYe,GAAGJ,EAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG/C;AACF,GAEAQ,IAAeb;"}
+{"version":3,"file":"image.js","sources":["../../../../src/features/ui/image/image.tsx"],"sourcesContent":["import type { IImageProps } from './image-types';\n\nimport { useState, memo } from 'react';\nimport styled from 'styled-components';\n\nimport { skeletonLoadingAnimation } from '../constants/style';\nimport FlexView from '../layout/flex-view';\n\nconst LoadingFlexView = styled(FlexView)`\n  animation: ${skeletonLoadingAnimation} 2s linear infinite;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n`;\n\nconst ImageWrapper = styled(FlexView)`\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Image: React.FC<IImageProps> = memo(\n  ({ borderRadius = 0, borderColor, withLoader, ...props }) => {\n    const { width, height } = props;\n    const [isLoading, setIsLoading] = useState(true);\n    const handleImgLoaded = () => {\n      setIsLoading(false);\n    };\n    const showLoader = isLoading && withLoader;\n\n    return (\n      <ImageWrapper\n        $width={width}\n        $height={height}\n        $borderColor={borderColor}\n        $borderRadius={borderRadius}\n      >\n        {showLoader && <LoadingFlexView $inherit={true} />}\n        <img onLoad={handleImgLoaded} {...props} />\n      </ImageWrapper>\n    );\n  },\n);\n\nexport default Image;\n"],"names":["LoadingFlexView","styled","FlexView","skeletonLoadingAnimation","ImageWrapper","Image","memo","borderRadius","borderColor","withLoader","props","width","height","isLoading","setIsLoading","useState","jsxs","jsx","Image$1"],"mappings":";;;;;AAQA,MAAMA,IAAkBC,EAAOC,CAAQ;AAAA,eACxBC,CAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjCC,IAAeH,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAK9BG,IAA+BC;AAAA,EACnC,CAAC,EAAE,cAAAC,IAAe,GAAG,aAAAC,GAAa,YAAAC,GAAY,GAAGC,QAAY;AACrD,UAAA,EAAE,OAAAC,GAAO,QAAAC,EAAW,IAAAF,GACpB,CAACG,GAAWC,CAAY,IAAIC,EAAS,EAAI;AAO7C,WAAA,gBAAAC;AAAA,MAACZ;AAAA,MAAA;AAAA,QACC,QAAQO;AAAA,QACR,SAASC;AAAA,QACT,cAAcJ;AAAA,QACd,eAAeD;AAAA,QAEd,UAAA;AAAA,UATcM,KAAaJ,KASb,gBAAAQ,EAACjB,GAAgB,EAAA,UAAU,GAAM,CAAA;AAAA,UAC/C,gBAAAiB,EAAA,OAAA,EAAI,QAbe,MAAM;AAC5B,YAAAH,EAAa,EAAK;AAAA,UAAA,GAYe,GAAGJ,EAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG/C;AACF,GAEAQ,IAAeb;"}

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

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

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

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

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

@@ -1,45 +1,19 @@
-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 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);
-  }, []);
-  return f === "spotlight" ? /* @__PURE__ */ r(c, { $isClosing: o, children: /* @__PURE__ */ r(
-    n,
-    {
-      fallback: /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(h, { height: "100vh" }) }),
-      onError: l,
-      children: /* @__PURE__ */ t(
-        a,
-        {
-          fallback: /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(d, { height: "100vh" }) }),
-          children: [
-            /* @__PURE__ */ r(M, { $isClosing: o }),
-            i
-          ]
-        }
-      )
-    }
-  ) }) : /* @__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,
-      {
-        fallback: /* @__PURE__ */ r(h, { height: "50vh", size: "compact" }),
-        onError: l,
-        children: /* @__PURE__ */ r(a, { fallback: /* @__PURE__ */ r(d, { height: "50vh" }), children: i })
-      }
-    ) })
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { memo as m } from "react";
+import h from "../../../assets/line-icons/icons/cross.js";
+import c from "../buttons/clickable/clickable.js";
+import { ModalContainer as n, SpotlightModal as f, TransparentModalContainer as p, BaseModal as C, CloseButtonContainer as $, BaseModalContent as u } from "./modal-styled.js";
+const W = m(({ modal: a, isClosing: o = !1, onClose: s }) => {
+  const { renderAs: t, element: r, modalWidth: l, isDismissable: d } = a;
+  return t === "spotlight" ? /* @__PURE__ */ i(n, { $isClosing: o, children: [
+    /* @__PURE__ */ e(f, { $isClosing: o }),
+    r
+  ] }) : t === "fullscreen-transparent" ? /* @__PURE__ */ e(p, { $isClosing: o, children: r }) : /* @__PURE__ */ e(n, { $isClosing: o, children: /* @__PURE__ */ i(C, { $isClosing: o, $width: l, children: [
+    d !== !1 && /* @__PURE__ */ e($, { $modalWidth: l, children: /* @__PURE__ */ e(c, { label: "Close", onClick: s, children: /* @__PURE__ */ e(h, { width: 40, height: 40 }) }) }),
+    /* @__PURE__ */ e(u, { $modalWidth: l, children: r })
   ] }) });
 });
 export {
-  I as default
+  W as default
 };
 //# sourceMappingURL=modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { captureException } from '@sentry/browser';\nimport { memo, Suspense, useCallback } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Error from '../../ui/error/error';\nimport Clickable from '../buttons/clickable/clickable';\nimport 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;"}
+{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Clickable from '../buttons/clickable/clickable';\nimport * as Styled from './modal-styled';\n\n/**\n * Modal component that renders modal content with close button\n * Handles animation state for entry and exit transitions\n */\nconst Modal: FC<IModalProps> = memo(({ modal, isClosing = false, onClose }) => {\n  const { renderAs, element, modalWidth, isDismissable } = modal;\n\n  if (renderAs === 'spotlight') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing}>\n        <Styled.SpotlightModal $isClosing={isClosing} />\n        {element}\n      </Styled.ModalContainer>\n    );\n  }\n\n  if (renderAs === 'fullscreen-transparent') {\n    return (\n      <Styled.TransparentModalContainer $isClosing={isClosing}>\n        {element}\n      </Styled.TransparentModalContainer>\n    );\n  }\n\n  return (\n    <Styled.ModalContainer $isClosing={isClosing}>\n      <Styled.BaseModal $isClosing={isClosing} $width={modalWidth}>\n        {isDismissable !== false && (\n          <Styled.CloseButtonContainer $modalWidth={modalWidth}>\n            <Clickable label=\"Close\" onClick={onClose}>\n              <CrossIcon width={40} height={40} />\n            </Clickable>\n          </Styled.CloseButtonContainer>\n        )}\n        <Styled.BaseModalContent $modalWidth={modalWidth}>{element}</Styled.BaseModalContent>\n      </Styled.BaseModal>\n    </Styled.ModalContainer>\n  );\n});\n\nexport default Modal;\n"],"names":["Modal","memo","modal","isClosing","onClose","renderAs","element","modalWidth","isDismissable","jsxs","Styled.ModalContainer","jsx","Styled.SpotlightModal","Styled.TransparentModalContainer","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;AAaM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AAC7E,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,MAAkBN;AAEzD,SAAIG,MAAa,cAEZ,gBAAAI,EAAAC,GAAA,EAAsB,YAAYP,GACjC,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAsB,YAAYT,EAAW,CAAA;AAAA,IAC7CG;AAAA,EACH,EAAA,CAAA,IAIAD,MAAa,6CAEZQ,GAAA,EAAiC,YAAYV,GAC3C,UACHG,EAAA,CAAA,IAKD,gBAAAK,EAAAD,GAAA,EAAsB,YAAYP,GACjC,UAAC,gBAAAM,EAAAK,GAAA,EAAiB,YAAYX,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBO,GAAA,EAA4B,aAAaR,GACxC,4BAACS,GAAU,EAAA,OAAM,SAAQ,SAASZ,GAChC,4BAACa,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,sBAEDC,GAAA,EAAwB,aAAaX,GAAa,UAAQD,GAAA;AAAA,EAAA,EAC7D,CAAA,EACF,CAAA;AAEJ,CAAC;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"streak-icon-styled.js","sources":["../../../../src/features/ui/streak-icon/streak-icon-styled.tsx"],"sourcesContent":["import type { IStreakWrapperProps } from './streak-icon-types';\n\nimport styled, { keyframes } from 'styled-components';\n\nconst fadeInFadeOut = keyframes`\n66%{\n  opacity: 0;\n}\n33%{\n  opacity: 1;\n}\n`;\n\nexport const StreakWrapper = styled.div<IStreakWrapperProps>`\n  height: 32px;\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: ${({ isInteractive }) => (isInteractive ? 'pointer' : 'default')};\n`;\n\nexport const StreakStaticBg = styled.div`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  border-radius: 24px;\n`;\n\nexport const StreakBg = styled.div<{ $blinkDuration: number; $blinkDelay: number }>`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.RED};\n  border-radius: 32px;\n  animation: ${fadeInFadeOut}\n    ${({ $blinkDelay, $blinkDuration }) => `${$blinkDuration + $blinkDelay}ms linear infinite`};\n`;\n\nexport const StreakContent = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  padding-top: 6px;\n  z-index: 1;\n`;\n\nexport const StreakImg = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n`;\n\nexport const StyledImg = styled.img`\n  width: 100%;\n  height: 100%;\n`;\n"],"names":["fadeInFadeOut","keyframes","StreakWrapper","styled","isInteractive","StreakStaticBg","theme","StreakBg","$blinkDelay","$blinkDuration","StreakContent","StreakImg","StyledImg"],"mappings":";AAIA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxB,CAAC,EAAE,eAAAC,EAAA,MAAqBA,IAAgB,YAAY,SAAU;AAAA,GAG7DC,IAAiBF,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItCC,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIf,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,GAAG;AAAA;AAAA,eAEhCN,CAAa;AAAA,MACtB,CAAC,EAAE,aAAAQ,GAAa,gBAAAC,QAAqB,GAAGA,IAAiBD,CAAW,oBAAoB;AAAA,GAGjFE,IAAgBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYvBQ,IAAYR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBS,IAAYT,EAAO;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"streak-icon-styled.js","sources":["../../../../src/features/ui/streak-icon/streak-icon-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nconst fadeInFadeOut = keyframes`\n66%{\n  opacity: 0;\n}\n33%{\n  opacity: 1;\n}\n`;\n\nexport const StreakWrapper = styled.div`\n  height: 32px;\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n`;\n\nexport const StreakStaticBg = styled.div`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  border-radius: 24px;\n`;\n\nexport const StreakBg = styled.div<{ $blinkDuration: number; $blinkDelay: number }>`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.RED};\n  border-radius: 32px;\n  animation: ${fadeInFadeOut}\n    ${({ $blinkDelay, $blinkDuration }) => `${$blinkDuration + $blinkDelay}ms linear infinite`};\n`;\n\nexport const StreakContent = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  padding-top: 6px;\n  z-index: 1;\n`;\n\nexport const StreakImg = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n`;\n\nexport const StyledImg = styled.img`\n  width: 100%;\n  height: 100%;\n`;\n"],"names":["fadeInFadeOut","keyframes","StreakWrapper","styled","StreakStaticBg","theme","StreakBg","$blinkDelay","$blinkDuration","StreakContent","StreakImg","StyledImg"],"mappings":";AAEA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUvBC,IAAiBD,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItCC,IAAWH,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIf,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,GAAG;AAAA;AAAA,eAEhCL,CAAa;AAAA,MACtB,CAAC,EAAE,aAAAO,GAAa,gBAAAC,QAAqB,GAAGA,IAAiBD,CAAW,oBAAoB;AAAA,GAGjFE,IAAgBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYvBO,IAAYP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBQ,IAAYR,EAAO;AAAA;AAAA;AAAA;"}

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

@@ -1,22 +1,20 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { memo as i } from "react";
-import S from "../../../assets/illustrations/streak-green.svg.js";
-import l from "../../../assets/illustrations/streak-white.svg.js";
-import c from "../text/text.js";
-import { BLINK_DURATION as k, BLINK_DELAY as p } from "./constants.js";
-import { StreakWrapper as s, StreakStaticBg as f, StreakBg as d, StreakContent as I, StreakImg as $, StyledImg as o } from "./streak-icon-styled.js";
-const g = i(
-  ({ value: a, blink: t = !1, isInteractive: m = !0, ...n }) => /* @__PURE__ */ e(s, { isInteractive: m, ...n, children: [
-    /* @__PURE__ */ r(f, {}),
-    t && /* @__PURE__ */ r(d, { $blinkDuration: k, $blinkDelay: p }),
-    /* @__PURE__ */ e(I, { children: [
-      /* @__PURE__ */ r($, { children: t ? /* @__PURE__ */ r(o, { src: l, alt: "Streak" }) : /* @__PURE__ */ r(o, { src: S, alt: "Streak" }) }),
-      /* @__PURE__ */ r(c, { $renderAs: "ab3-bold", $color: "WHITE", $align: "center", children: a })
-    ] })
+import { memo as n } from "react";
+import i from "../../../assets/illustrations/streak-green.svg.js";
+import S from "../../../assets/illustrations/streak-white.svg.js";
+import l from "../text/text.js";
+import { BLINK_DURATION as c, BLINK_DELAY as k } from "./constants.js";
+import { StreakWrapper as p, StreakStaticBg as s, StreakBg as f, StreakContent as d, StreakImg as I, StyledImg as o } from "./streak-icon-styled.js";
+const $ = n(({ value: a, blink: t = !1, ...m }) => /* @__PURE__ */ e(p, { ...m, children: [
+  /* @__PURE__ */ r(s, {}),
+  t && /* @__PURE__ */ r(f, { $blinkDuration: c, $blinkDelay: k }),
+  /* @__PURE__ */ e(d, { children: [
+    /* @__PURE__ */ r(I, { children: t ? /* @__PURE__ */ r(o, { src: S, alt: "Streak" }) : /* @__PURE__ */ r(o, { src: i, alt: "Streak" }) }),
+    /* @__PURE__ */ r(l, { $renderAs: "ab3-bold", $color: "WHITE", $align: "center", children: a })
   ] })
-), G = g;
+] })), A = $;
 export {
-  g as StreakIcon,
-  G as default
+  $ as StreakIcon,
+  A as default
 };
 //# sourceMappingURL=streak-icon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"streak-icon.js","sources":["../../../../src/features/ui/streak-icon/streak-icon.tsx"],"sourcesContent":["import type { IStreakIconProps } from './streak-icon-types';\n\nimport React, { memo } from 'react';\n\nimport StreakGreenSVG from '../../../assets/illustrations/streak-green.svg';\nimport StreakWhiteSVG from '../../../assets/illustrations/streak-white.svg';\nimport Text from '../text/text';\nimport { BLINK_DELAY, BLINK_DURATION } from './constants';\nimport * as S from './streak-icon-styled';\n\nexport const StreakIcon: React.FC<IStreakIconProps> = memo(\n  ({ value, blink = false, isInteractive = true, ...rest }) => {\n    return (\n      <S.StreakWrapper isInteractive={isInteractive} {...rest}>\n        <S.StreakStaticBg />\n        {blink && <S.StreakBg $blinkDuration={BLINK_DURATION} $blinkDelay={BLINK_DELAY} />}\n        <S.StreakContent>\n          <S.StreakImg>\n            {blink ? (\n              <S.StyledImg src={StreakWhiteSVG} alt=\"Streak\" />\n            ) : (\n              <S.StyledImg src={StreakGreenSVG} alt=\"Streak\" />\n            )}\n          </S.StreakImg>\n          <Text $renderAs=\"ab3-bold\" $color=\"WHITE\" $align=\"center\">\n            {value}\n          </Text>\n        </S.StreakContent>\n      </S.StreakWrapper>\n    );\n  },\n);\n\nexport default StreakIcon;\n"],"names":["StreakIcon","memo","value","blink","isInteractive","rest","S.StreakWrapper","jsx","S.StreakStaticBg","S.StreakBg","BLINK_DURATION","BLINK_DELAY","jsxs","S.StreakContent","S.StreakImg","S.StyledImg","StreakWhiteSVG","StreakGreenSVG","Text","StreakIcon$1"],"mappings":";;;;;;;AAUO,MAAMA,IAAyCC;AAAA,EACpD,CAAC,EAAE,OAAAC,GAAO,OAAAC,IAAQ,IAAO,eAAAC,IAAgB,IAAM,GAAGC,0BAE7CC,GAAA,EAAgB,eAAAF,GAA+B,GAAGC,GACjD,UAAA;AAAA,IAAC,gBAAAE,EAAAC,GAAA,EAAiB;AAAA,IACjBL,uBAAUM,GAAA,EAAW,gBAAgBC,GAAgB,aAAaC,GAAa;AAAA,IAChF,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EACE,UAAAX,sBACEY,GAAA,EAAY,KAAKC,GAAgB,KAAI,UAAS,sBAE9CD,GAAA,EAAY,KAAKE,GAAgB,KAAI,SAAS,CAAA,GAEnD;AAAA,MACA,gBAAAV,EAACW,KAAK,WAAU,YAAW,QAAO,SAAQ,QAAO,UAC9C,UACHhB,EAAA,CAAA;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAGN,GAEAiB,IAAenB;"}
+{"version":3,"file":"streak-icon.js","sources":["../../../../src/features/ui/streak-icon/streak-icon.tsx"],"sourcesContent":["import type { IStreakIconProps } from './streak-icon-types';\n\nimport React, { memo } from 'react';\n\nimport StreakGreenSVG from '../../../assets/illustrations/streak-green.svg';\nimport StreakWhiteSVG from '../../../assets/illustrations/streak-white.svg';\nimport Text from '../text/text';\nimport { BLINK_DELAY, BLINK_DURATION } from './constants';\nimport * as S from './streak-icon-styled';\n\nexport const StreakIcon: React.FC<IStreakIconProps> = memo(({ value, blink = false, ...rest }) => {\n  return (\n    <S.StreakWrapper {...rest}>\n      <S.StreakStaticBg />\n      {blink && <S.StreakBg $blinkDuration={BLINK_DURATION} $blinkDelay={BLINK_DELAY} />}\n      <S.StreakContent>\n        <S.StreakImg>\n          {blink ? (\n            <S.StyledImg src={StreakWhiteSVG} alt=\"Streak\" />\n          ) : (\n            <S.StyledImg src={StreakGreenSVG} alt=\"Streak\" />\n          )}\n        </S.StreakImg>\n        <Text $renderAs=\"ab3-bold\" $color=\"WHITE\" $align=\"center\">\n          {value}\n        </Text>\n      </S.StreakContent>\n    </S.StreakWrapper>\n  );\n});\n\nexport default StreakIcon;\n"],"names":["StreakIcon","memo","value","blink","rest","jsxs","S.StreakWrapper","jsx","S.StreakStaticBg","S.StreakBg","BLINK_DURATION","BLINK_DELAY","S.StreakContent","S.StreakImg","S.StyledImg","StreakWhiteSVG","StreakGreenSVG","Text","StreakIcon$1"],"mappings":";;;;;;;AAUa,MAAAA,IAAyCC,EAAK,CAAC,EAAE,OAAAC,GAAO,OAAAC,IAAQ,IAAO,GAAGC,QAElF,gBAAAC,EAAAC,GAAA,EAAiB,GAAGF,GACnB,UAAA;AAAA,EAAC,gBAAAG,EAAAC,GAAA,EAAiB;AAAA,EACjBL,uBAAUM,GAAA,EAAW,gBAAgBC,GAAgB,aAAaC,GAAa;AAAA,EAChF,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAL,EAAAM,GAAA,EACE,UAAAV,sBACEW,GAAA,EAAY,KAAKC,GAAgB,KAAI,UAAS,sBAE9CD,GAAA,EAAY,KAAKE,GAAgB,KAAI,SAAS,CAAA,GAEnD;AAAA,IACA,gBAAAT,EAACU,KAAK,WAAU,YAAW,QAAO,SAAQ,QAAO,UAC9C,UACHf,EAAA,CAAA;AAAA,EAAA,GACF;AACF,EAAA,CAAA,CAEH,GAEDgB,IAAelB;"}

package/dist/features/ui/text/text.js

@@ -1,54 +1,50 @@
-import { useMemo as C } from "react";
-import F from "styled-components";
-import { EDeviceType as y } from "../theme/constants.js";
-const $ = F.div(
+import k from "styled-components";
+const x = k.div(
   ({
-    theme: g,
-    $renderAs: t,
+    theme: f,
+    $renderAs: c,
     $color: n,
-    $align: T = "left",
-    $width: e,
-    $widthX: f,
-    $marginBottom: o,
-    $marginBottomX: r,
+    $align: y = "left",
+    $width: t,
+    $widthX: o,
+    $marginBottom: e,
+    $marginBottomX: i,
     $alignSelf: l,
-    $opacity: b = 1,
-    $inline: v,
-    $textDecoration: x,
-    $whiteSpace: a,
-    $renderOnMobileAs: c,
-    $renderOnTabletAs: i
+    $opacity: u = 1,
+    $inline: m,
+    $textDecoration: p,
+    $whiteSpace: $
   }) => {
-    const { text: E, colors: m, layout: u, device: p } = g, L = C(() => p <= y.MOBILE ? c || i || t : p <= y.TABLET && i || t, [p, t, c, i]), {
-      fontFamily: h,
-      fontSize: k,
-      lineHeight: z,
+    const { text: b, colors: r, layout: a } = f, {
+      fontFamily: g,
+      fontSize: d,
+      lineHeight: T,
       letterSpacing: s,
-      textTransform: d = "none"
-    } = E[L];
+      textTransform: h = "none"
+    } = b[c];
     return `
-      display: ${v ? "inline-block" : "block"};
-      font-family: ${h};
-      font-size: ${k}px;
-      text-align: ${T};
-      line-height: ${z}px;
-      text-transform: ${d};
+      display: ${m ? "inline-block" : "block"};
+      font-family: ${g};
+      font-size: ${d}px;
+      text-align: ${y};
+      line-height: ${T}px;
+      text-transform: ${h};
       ${typeof s == "number" ? `letter-spacing: ${s}px;` : ""}
-      color: ${n ? m[n] : m.BLACK};
-      opacity: ${b};
-      width: ${e ? `${e}` : "auto"}${typeof e == "number" ? "px" : ""};
-      ${f ? `width: ${f * u.gutter}px;` : ""}
-      margin-bottom: ${o ? `${o}` : "initial"}${typeof o == "number" ? "px" : ""};
-      ${r ? `margin-bottom: ${r * u.gutter}px;` : ""}
+      color: ${n ? r[n] : r.BLACK};
+      opacity: ${u};
+      width: ${t ? `${t}` : "auto"}${typeof t == "number" ? "px" : ""};
+      ${o ? `width: ${o * a.gutter}px;` : ""}
+      margin-bottom: ${e ? `${e}` : "initial"}${typeof e == "number" ? "px" : ""};
+      ${i ? `margin-bottom: ${i * a.gutter}px;` : ""}
       ${l ? `align-self: ${l};` : ""}
-      ${x ? `text-decoration: ${x};` : ""}
-      ${a ? `white-space: ${a};` : ""}
+      ${p ? `text-decoration: ${p};` : ""}
+      ${$ ? `white-space: ${$};` : ""}
     `;
   }
 );
-$.displayName = "Text";
-const M = $;
+x.displayName = "Text";
+const v = x;
 export {
-  M as default
+  v as default
 };
 //# sourceMappingURL=text.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../src/features/ui/text/text.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../types';\n\nimport { useMemo } from 'react';\nimport styled from 'styled-components';\n\nimport { EDeviceType } from '../theme/constants';\n\nexport interface TextProps {\n  $renderAs: TTextVariants;\n  $color?: TColorNames;\n  $align?: 'auto' | 'left' | 'right' | 'center' | 'justify';\n  $alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n  $opacity?: number | undefined;\n  $width?: number | string;\n  $widthX?: number;\n  $marginBottom?: number;\n  $marginBottomX?: number;\n  $inline?: boolean;\n  $textDecoration?: string;\n  $whiteSpace?: 'pre-line' | 'normal' | 'pre-wrap' | 'no-wrap' | 'pre' | 'break-spaces';\n  $renderOnMobileAs?: TTextVariants;\n  $renderOnTabletAs?: TTextVariants;\n}\n\n/**\n * @param $renderAs (fallback for any device), @param $renderOnMobileAs, @param $renderOnTabletAs - The text variant to render as (ah1-ah4, ab1-ab3, ac1-ac4, ub1-ub3), anything else is deprecated\n */\nconst Text = styled.div<TextProps>(\n  ({\n    theme,\n    $renderAs,\n    $color,\n    $align = 'left',\n    $width,\n    $widthX,\n    $marginBottom,\n    $marginBottomX,\n    $alignSelf,\n    $opacity = 1,\n    $inline,\n    $textDecoration,\n    $whiteSpace,\n    $renderOnMobileAs,\n    $renderOnTabletAs,\n  }) => {\n    const { text, colors, layout, device } = theme;\n    const renderAs = useMemo(() => {\n      if (device <= EDeviceType.MOBILE) {\n        return $renderOnMobileAs || $renderOnTabletAs || $renderAs;\n      }\n\n      if (device <= EDeviceType.TABLET) {\n        return $renderOnTabletAs || $renderAs;\n      }\n\n      return $renderAs;\n    }, [device, $renderAs, $renderOnMobileAs, $renderOnTabletAs]);\n\n    const {\n      fontFamily,\n      fontSize,\n      lineHeight,\n      letterSpacing,\n      textTransform = 'none',\n    } = text[renderAs];\n\n    return `\n      display: ${$inline ? 'inline-block' : 'block'};\n      font-family: ${fontFamily};\n      font-size: ${fontSize}px;\n      text-align: ${$align};\n      line-height: ${lineHeight}px;\n      text-transform: ${textTransform};\n      ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n      color: ${$color ? colors[$color] : colors.BLACK};\n      opacity: ${$opacity};\n      width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n      margin-bottom: ${$marginBottom ? `${$marginBottom}` : 'initial'}${\n        typeof $marginBottom === 'number' ? 'px' : ''\n      };\n      ${$marginBottomX ? `margin-bottom: ${$marginBottomX * layout.gutter}px;` : ''}\n      ${$alignSelf ? `align-self: ${$alignSelf};` : ''}\n      ${$textDecoration ? `text-decoration: ${$textDecoration};` : ''}\n      ${$whiteSpace ? `white-space: ${$whiteSpace};` : ''}\n    `;\n  },\n);\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"names":["Text","styled","theme","$renderAs","$color","$align","$width","$widthX","$marginBottom","$marginBottomX","$alignSelf","$opacity","$inline","$textDecoration","$whiteSpace","$renderOnMobileAs","$renderOnTabletAs","text","colors","layout","device","renderAs","useMemo","EDeviceType","fontFamily","fontSize","lineHeight","letterSpacing","textTransform","Text$1"],"mappings":";;;AA2BA,MAAMA,IAAOC,EAAO;AAAA,EAClB,CAAC;AAAA,IACC,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,GAAQ,QAAAC,MAAWlB,GACnCmB,IAAWC,EAAQ,MACnBF,KAAUG,EAAY,SACjBR,KAAqBC,KAAqBb,IAG/CiB,KAAUG,EAAY,UACjBP,KAAqBb,GAI7B,CAACiB,GAAQjB,GAAWY,GAAmBC,CAAiB,CAAC,GAEtD;AAAA,MACJ,YAAAQ;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC,IAAgB;AAAA,IAAA,IACdX,EAAKI,CAAQ;AAEV,WAAA;AAAA,iBACMT,IAAU,iBAAiB,OAAO;AAAA,qBAC9BY,CAAU;AAAA,mBACZC,CAAQ;AAAA,oBACPpB,CAAM;AAAA,qBACLqB,CAAU;AAAA,wBACPE,CAAa;AAAA,QAC7B,OAAOD,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA,eACvEvB,IAASc,EAAOd,CAAM,IAAIc,EAAO,KAAK;AAAA,iBACpCP,CAAQ;AAAA,eACVL,IAAS,GAAGA,CAAM,KAAK,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,QAC7EC,IAAU,UAAUA,IAAUY,EAAO,MAAM,QAAQ,EAAE;AAAA,uBACtCX,IAAgB,GAAGA,CAAa,KAAK,SAAS,GAC7D,OAAOA,KAAkB,WAAW,OAAO,EAC7C;AAAA,QACEC,IAAiB,kBAAkBA,IAAiBU,EAAO,MAAM,QAAQ,EAAE;AAAA,QAC3ET,IAAa,eAAeA,CAAU,MAAM,EAAE;AAAA,QAC9CG,IAAkB,oBAAoBA,CAAe,MAAM,EAAE;AAAA,QAC7DC,IAAc,gBAAgBA,CAAW,MAAM,EAAE;AAAA;AAAA,EAEvD;AACF;AAEAd,EAAK,cAAc;AAEnB,MAAA6B,IAAe7B;"}
+{"version":3,"file":"text.js","sources":["../../../../src/features/ui/text/text.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../types';\n\nimport styled from 'styled-components';\n\nexport interface TextProps {\n  $renderAs: TTextVariants;\n  $color?: TColorNames;\n  $align?: 'auto' | 'left' | 'right' | 'center' | 'justify';\n  $alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n  $opacity?: number | undefined;\n  $width?: number | string;\n  $widthX?: number;\n  $marginBottom?: number;\n  $marginBottomX?: number;\n  $inline?: boolean;\n  $textDecoration?: string;\n  $whiteSpace?: 'pre-line' | 'normal' | 'pre-wrap' | 'no-wrap' | 'pre' | 'break-spaces';\n}\n\n/**\n * @param $renderAs - The text variant to render as (ah1-ah4, ab1-ab3, ac1-ac4, ub1-ub3), anything else is deprecated\n */\nconst Text = styled.div<TextProps>(\n  ({\n    theme,\n    $renderAs,\n    $color,\n    $align = 'left',\n    $width,\n    $widthX,\n    $marginBottom,\n    $marginBottomX,\n    $alignSelf,\n    $opacity = 1,\n    $inline,\n    $textDecoration,\n    $whiteSpace,\n  }) => {\n    const { text, colors, layout } = theme;\n    const {\n      fontFamily,\n      fontSize,\n      lineHeight,\n      letterSpacing,\n      textTransform = 'none',\n    } = text[$renderAs];\n\n    return `\n      display: ${$inline ? 'inline-block' : 'block'};\n      font-family: ${fontFamily};\n      font-size: ${fontSize}px;\n      text-align: ${$align};\n      line-height: ${lineHeight}px;\n      text-transform: ${textTransform};\n      ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n      color: ${$color ? colors[$color] : colors.BLACK};\n      opacity: ${$opacity};\n      width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n      margin-bottom: ${$marginBottom ? `${$marginBottom}` : 'initial'}${\n        typeof $marginBottom === 'number' ? 'px' : ''\n      };\n      ${$marginBottomX ? `margin-bottom: ${$marginBottomX * layout.gutter}px;` : ''}\n      ${$alignSelf ? `align-self: ${$alignSelf};` : ''}\n      ${$textDecoration ? `text-decoration: ${$textDecoration};` : ''}\n      ${$whiteSpace ? `white-space: ${$whiteSpace};` : ''}\n    `;\n  },\n);\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"names":["Text","styled","theme","$renderAs","$color","$align","$width","$widthX","$marginBottom","$marginBottomX","$alignSelf","$opacity","$inline","$textDecoration","$whiteSpace","text","colors","layout","fontFamily","fontSize","lineHeight","letterSpacing","textTransform","Text$1"],"mappings":";AAsBA,MAAMA,IAAOC,EAAO;AAAA,EAClB,CAAC;AAAA,IACC,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,EAAA,IAAWf,GAC3B;AAAA,MACJ,YAAAgB;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC,IAAgB;AAAA,IAAA,IACdP,EAAKZ,CAAS;AAEX,WAAA;AAAA,iBACMS,IAAU,iBAAiB,OAAO;AAAA,qBAC9BM,CAAU;AAAA,mBACZC,CAAQ;AAAA,oBACPd,CAAM;AAAA,qBACLe,CAAU;AAAA,wBACPE,CAAa;AAAA,QAC7B,OAAOD,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA,eACvEjB,IAASY,EAAOZ,CAAM,IAAIY,EAAO,KAAK;AAAA,iBACpCL,CAAQ;AAAA,eACVL,IAAS,GAAGA,CAAM,KAAK,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,QAC7EC,IAAU,UAAUA,IAAUU,EAAO,MAAM,QAAQ,EAAE;AAAA,uBACtCT,IAAgB,GAAGA,CAAa,KAAK,SAAS,GAC7D,OAAOA,KAAkB,WAAW,OAAO,EAC7C;AAAA,QACEC,IAAiB,kBAAkBA,IAAiBQ,EAAO,MAAM,QAAQ,EAAE;AAAA,QAC3EP,IAAa,eAAeA,CAAU,MAAM,EAAE;AAAA,QAC9CG,IAAkB,oBAAoBA,CAAe,MAAM,EAAE;AAAA,QAC7DC,IAAc,gBAAgBA,CAAW,MAAM,EAAE;AAAA;AAAA,EAEvD;AACF;AAEAd,EAAK,cAAc;AAEnB,MAAAuB,IAAevB;"}