@cuemath/leap 3.3.24 → 3.3.25-af-1

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

@@ -1,6 +1,6 @@
 import a from "styled-components";
-const l = a.div(
-  ({ theme: { colors: t, zIndex: o }, $isClosing: e, $blocking: i }) => `
+const p = a.div(
+  ({ theme: { colors: t, zIndex: o }, $isClosing: e }) => `
   position: fixed;
   top: 0;
   left: 0;
@@ -10,7 +10,6 @@ const l = a.div(
   backdrop-filter: blur(40px);
   display: flex;
   animation: ${e ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
-  pointer-events: ${i ? "auto" : "none"};
   z-index: ${o.MODAL};
 
   @keyframes backdropFadeIn {
@@ -31,7 +30,7 @@ const l = a.div(
     }
   }
 `
-), d = a.div(
+), l = a.div(
   ({ theme: { colors: t }, $isClosing: o, $width: e }) => `
   position: relative;
   align-self: center;
@@ -101,19 +100,19 @@ const l = a.div(
     color: ${t.BLACK_1};
   }
 `
-), f = a.div`
+), d = a.div`
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   width: 100%;
-`, r = 720, n = 800, s = 500, h = a.div(
+`, i = 720, r = 800, n = 500, f = a.div(
   ({ $isClosing: t }) => `
   position: absolute;
-  width: ${r}px;
+  width: ${i}px;
   height: 100%;
   left: 50%;
-  margin-left: ${-(r / 2)}px;
+  margin-left: ${-(i / 2)}px;
   clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);
   background: linear-gradient(
     180deg,
@@ -121,13 +120,13 @@ const l = a.div(
     rgba(0, 0, 0, 0) 100%
   );
   animation: openSpotlight;
-  animation-duration: ${n}ms;
+  animation-duration: ${r}ms;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
   opacity: 0;
   ${t ? `
       animation: closeSpotlight;
-      animation-duration: ${s}ms;
+      animation-duration: ${n}ms;
       animation-timing-function: linear;
       animation-fill-mode: forwards;
       opacity: 1;
@@ -151,38 +150,7 @@ const l = a.div(
     }
   }
 `
-), x = a.div(
-  ({ theme: { colors: t, zIndex: o }, $isClosing: e, $blocking: i }) => `
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: ${t.TRANSPARENT};
-  display: flex;
-  pointer-events: ${i ? "auto" : "none"};
-  animation: ${e ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
-  z-index: ${o.MODAL};
-
-  @keyframes backdropFadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  
-  @keyframes backdropFadeOut {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-`
-), g = a.div(
+), h = a.div(
   ({ $isClosing: t }) => `
     width: 100%;
     height: max-content;
@@ -217,13 +185,12 @@ const l = a.div(
   `
 );
 export {
-  d as BaseModal,
+  l as BaseModal,
   c as BaseModalContent,
-  g as BottomSheetModal,
+  h as BottomSheetModal,
   m as CloseButtonContainer,
-  l as ModalContainer,
-  f as ModalLoaderWrapper,
-  h as SpotlightModal,
-  x as TransparentModalContainer
+  p as ModalContainer,
+  d as ModalLoaderWrapper,
+  f as SpotlightModal
 };
 //# sourceMappingURL=modal-styled.js.map

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

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

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

@@ -1,65 +1,57 @@
-import { jsx as r, jsxs as b } from "react/jsx-runtime";
-import { captureException as v } from "@sentry/browser";
-import { memo as x, useCallback as g, Suspense as c } from "react";
-import { ErrorBoundary as h } from "react-error-boundary";
-import { useTheme as B } from "styled-components";
-import S from "../../../assets/line-icons/icons/cross.js";
-import d from "../error/error.js";
-import W from "../buttons/clickable/clickable.js";
-import w from "../layout/flex-view.js";
-import s from "../loader/app-loader/app-loader.js";
-import { EDeviceType as y } from "../theme/constants.js";
-import { ModalContainer as m, BottomSheetModal as A, ModalLoaderWrapper as k, SpotlightModal as L, TransparentModalContainer as T, BaseModal as j, CloseButtonContainer as D, BaseModalContent as I } from "./modal-styled.js";
-const R = x(({ modal: u, isClosing: o = !1, onClose: p }) => {
-  const { device: $ } = B(), C = $ <= y.MOBILE, { renderAs: l, element: e, modalWidth: t, isDismissable: f, renderOnMobileAs: M, blocking: i = !0 } = u, n = g((a) => {
-    v(a);
-  }, []), E = g((a) => {
-    a.stopPropagation();
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import { captureException as E } from "@sentry/browser";
+import { memo as v, useCallback as b, Suspense as n } from "react";
+import { ErrorBoundary as a } from "react-error-boundary";
+import { useTheme as x } from "styled-components";
+import B from "../../../assets/line-icons/icons/cross.js";
+import h from "../error/error.js";
+import S from "../buttons/clickable/clickable.js";
+import W from "../layout/flex-view.js";
+import c from "../loader/app-loader/app-loader.js";
+import { EDeviceType as w } from "../theme/constants.js";
+import { ModalContainer as d, BottomSheetModal as y, ModalLoaderWrapper as g, SpotlightModal as A, BaseModal as L, CloseButtonContainer as j, BaseModalContent as D } from "./modal-styled.js";
+const N = v(({ modal: u, isClosing: r = !1, onClose: m }) => {
+  const { device: C } = x(), k = C <= w.MOBILE, { renderAs: s, element: e, modalWidth: i, isDismissable: p, renderOnMobileAs: M } = u, t = b((l) => {
+    E(l);
+  }, []), $ = b((l) => {
+    l.stopPropagation();
   }, []);
-  return l === "bottom-sheet" || C && M === "bottom-sheet" ? /* @__PURE__ */ r(
-    m,
+  return s === "bottom-sheet" || k && M === "bottom-sheet" ? /* @__PURE__ */ o(d, { $isClosing: r, onClick: p ? m : () => null, children: /* @__PURE__ */ o(y, { $isClosing: r, onClick: $, children: /* @__PURE__ */ o(
+    a,
     {
-      $isClosing: o,
-      $blocking: i,
-      onClick: f ? p : () => null,
-      children: /* @__PURE__ */ r(A, { $isClosing: o, onClick: E, children: /* @__PURE__ */ r(
-        h,
-        {
-          fallback: /* @__PURE__ */ r(w, { $gap: 24, children: /* @__PURE__ */ r(d, { height: "100%" }) }),
-          onError: n,
-          children: /* @__PURE__ */ r(c, { fallback: /* @__PURE__ */ r(s, { height: "50vh" }), children: e })
-        }
-      ) })
+      fallback: /* @__PURE__ */ o(W, { $gap: 24, children: /* @__PURE__ */ o(h, { height: "100%" }) }),
+      onError: t,
+      children: /* @__PURE__ */ o(n, { fallback: /* @__PURE__ */ o(c, { height: "50vh" }), children: e })
     }
-  ) : l === "spotlight" ? /* @__PURE__ */ r(m, { $isClosing: o, $blocking: i, children: /* @__PURE__ */ r(
-    h,
+  ) }) }) : s === "spotlight" ? /* @__PURE__ */ o(d, { $isClosing: r, children: /* @__PURE__ */ o(
+    a,
     {
-      fallback: /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(d, { height: "100vh" }) }),
-      onError: n,
-      children: /* @__PURE__ */ b(
-        c,
+      fallback: /* @__PURE__ */ o(g, { children: /* @__PURE__ */ o(h, { height: "100vh" }) }),
+      onError: t,
+      children: /* @__PURE__ */ f(
+        n,
         {
-          fallback: /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(s, { height: "100vh" }) }),
+          fallback: /* @__PURE__ */ o(g, { children: /* @__PURE__ */ o(c, { height: "100vh" }) }),
           children: [
-            /* @__PURE__ */ r(L, { $isClosing: o }),
+            /* @__PURE__ */ o(A, { $isClosing: r }),
             e
           ]
         }
       )
     }
-  ) }) : l === "fullscreen-transparent" ? /* @__PURE__ */ r(T, { $isClosing: o, $blocking: i, children: e }) : /* @__PURE__ */ r(m, { $isClosing: o, $blocking: i, children: /* @__PURE__ */ b(j, { $isClosing: o, $width: t, children: [
-    f !== !1 && /* @__PURE__ */ r(D, { $modalWidth: t, children: /* @__PURE__ */ r(W, { label: "Close", onClick: p, children: /* @__PURE__ */ r(S, { width: 40, height: 40 }) }) }),
-    /* @__PURE__ */ r(I, { $modalWidth: t, children: /* @__PURE__ */ r(
-      h,
+  ) }) : /* @__PURE__ */ o(d, { $isClosing: r, children: /* @__PURE__ */ f(L, { $isClosing: r, $width: i, children: [
+    p !== !1 && /* @__PURE__ */ o(j, { $modalWidth: i, children: /* @__PURE__ */ o(S, { label: "Close", onClick: m, children: /* @__PURE__ */ o(B, { width: 40, height: 40 }) }) }),
+    /* @__PURE__ */ o(D, { $modalWidth: i, children: /* @__PURE__ */ o(
+      a,
       {
-        fallback: /* @__PURE__ */ r(d, { height: "50vh", size: "compact" }),
-        onError: n,
-        children: /* @__PURE__ */ r(c, { fallback: /* @__PURE__ */ r(s, { height: "50vh" }), children: e })
+        fallback: /* @__PURE__ */ o(h, { height: "50vh", size: "compact" }),
+        onError: t,
+        children: /* @__PURE__ */ o(n, { fallback: /* @__PURE__ */ o(c, { height: "50vh" }), children: e })
       }
     ) })
   ] }) });
 });
 export {
-  R as default
+  N 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';\nimport { useTheme } from 'styled-components';\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 { EDeviceType } from '../theme/constants';\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 { device } = useTheme();\n  const isMobile = device <= EDeviceType.MOBILE;\n  const { renderAs, element, modalWidth, isDismissable, renderOnMobileAs, blocking = true } = 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' || (isMobile && renderOnMobileAs === 'bottom-sheet')) {\n    return (\n      <Styled.ModalContainer\n        $isClosing={isClosing}\n        $blocking={blocking}\n        onClick={isDismissable ? onClose : () => null}\n      >\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} $blocking={blocking}>\n        <ErrorBoundary\n          fallback={\n            <Styled.ModalLoaderWrapper>\n              <Error height=\"100vh\" />\n            </Styled.ModalLoaderWrapper>\n          }\n          onError={sentryCaptureException}\n        >\n          <Suspense\n            fallback={\n              <Styled.ModalLoaderWrapper>\n                <AppLoader height=\"100vh\" />\n              </Styled.ModalLoaderWrapper>\n            }\n          >\n            <Styled.SpotlightModal $isClosing={isClosing} />\n            {element}\n          </Suspense>\n        </ErrorBoundary>\n      </Styled.ModalContainer>\n    );\n  }\n\n  if (renderAs === 'fullscreen-transparent') {\n    return (\n      <Styled.TransparentModalContainer $isClosing={isClosing} $blocking={blocking}>\n        {element}\n      </Styled.TransparentModalContainer>\n    );\n  }\n\n  return (\n    <Styled.ModalContainer $isClosing={isClosing} $blocking={blocking}>\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","device","useTheme","isMobile","EDeviceType","renderAs","element","modalWidth","isDismissable","renderOnMobileAs","blocking","sentryCaptureException","useCallback","error","captureException","handleStopPropagation","e","jsx","Styled.ModalContainer","Styled.BottomSheetModal","ErrorBoundary","FlexView","Error","Suspense","AppLoader","Styled.ModalLoaderWrapper","jsxs","Styled.SpotlightModal","Styled.TransparentModalContainer","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;;;;;;;;AAoBM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AACvE,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAWF,KAAUG,EAAY,QACjC,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,GAAe,kBAAAC,GAAkB,UAAAC,IAAW,GAAS,IAAAZ,GAEtFa,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,SAAIX,MAAa,kBAAmBF,KAAYM,MAAqB,iBAEjE,gBAAAQ;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,YAAYnB;AAAA,MACZ,WAAWW;AAAA,MACX,SAASF,IAAgBR,IAAU,MAAM;AAAA,MAEzC,4BAACmB,GAAA,EAAwB,YAAYpB,GAAW,SAASgB,GACvD,UAAA,gBAAAE;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,4BACGC,GAAS,EAAA,MAAM,IACd,UAAC,gBAAAJ,EAAAK,GAAA,EAAM,QAAO,OAAA,CAAO,EACvB,CAAA;AAAA,UAEF,SAASX;AAAA,UAET,UAAA,gBAAAM,EAACM,KAAS,UAAU,gBAAAN,EAACO,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQlB,EAAA,CAAA;AAAA,QAAA;AAAA,MAAA,GAE9D;AAAA,IAAA;AAAA,EAAA,IAKFD,MAAa,gCAEZa,GAAA,EAAsB,YAAYnB,GAAW,WAAWW,GACvD,UAAA,gBAAAO;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,4BACGK,GAAA,EACC,UAAC,gBAAAR,EAAAK,GAAA,EAAM,QAAO,QAAQ,CAAA,GACxB;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAe;AAAA,QAACH;AAAA,QAAA;AAAA,UACC,4BACGE,GAAA,EACC,UAAC,gBAAAR,EAAAO,GAAA,EAAU,QAAO,QAAQ,CAAA,GAC5B;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAP,EAACU,GAAA,EAAsB,YAAY5B,EAAW,CAAA;AAAA,YAC7CO;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA,IAIAD,MAAa,2BAEb,gBAAAY,EAACW,GAAA,EAAiC,YAAY7B,GAAW,WAAWW,GACjE,UACHJ,EAAA,CAAA,IAKD,gBAAAW,EAAAC,GAAA,EAAsB,YAAYnB,GAAW,WAAWW,GACvD,UAAA,gBAAAgB,EAACG,GAAA,EAAiB,YAAY9B,GAAW,QAAQQ,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBsB,GAAA,EAA4B,aAAavB,GACxC,4BAACwB,GAAU,EAAA,OAAM,SAAQ,SAAS/B,GAChC,4BAACgC,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,IAED,gBAAAf,EAAAgB,GAAA,EAAwB,aAAa1B,GACpC,UAAA,gBAAAU;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAW,gBAAAH,EAAAK,GAAA,EAAM,QAAO,QAAO,MAAK,WAAU;AAAA,QAC9C,SAASX;AAAA,QAET,UAAA,gBAAAM,EAACM,KAAS,UAAU,gBAAAN,EAACO,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQlB,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 { captureException } from '@sentry/browser';\nimport { memo, Suspense, useCallback } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport { useTheme } from 'styled-components';\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 { EDeviceType } from '../theme/constants';\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 { device } = useTheme();\n  const isMobile = device <= EDeviceType.MOBILE;\n  const { renderAs, element, modalWidth, isDismissable, renderOnMobileAs } = 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' || (isMobile && renderOnMobileAs === '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","device","useTheme","isMobile","EDeviceType","renderAs","element","modalWidth","isDismissable","renderOnMobileAs","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":";;;;;;;;;;;;AAoBM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AACvE,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAWF,KAAUG,EAAY,QACjC,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,GAAe,kBAAAC,EAAqB,IAAAX,GAErEY,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,SAAIV,MAAa,kBAAmBF,KAAYM,MAAqB,mCAEhEO,GAAA,EAAsB,YAAYjB,GAAW,SAASS,IAAgBR,IAAU,MAAM,MACrF,4BAACiB,GAAA,EAAwB,YAAYlB,GAAW,SAASe,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,UAAQjB,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA,EAE9D,CAAA,EACF,CAAA,IAIAD,MAAa,cAEZ,gBAAAa,EAAAF,GAAA,EAAsB,YAAYjB,GACjC,UAAA,gBAAAmB;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,YAAY3B,EAAW,CAAA;AAAA,YAC7CO;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA,IAKD,gBAAAY,EAAAF,GAAA,EAAsB,YAAYjB,GACjC,UAAC,gBAAA0B,EAAAE,GAAA,EAAiB,YAAY5B,GAAW,QAAQQ,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBoB,GAAA,EAA4B,aAAarB,GACxC,4BAACsB,GAAU,EAAA,OAAM,SAAQ,SAAS7B,GAChC,4BAAC8B,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,IAED,gBAAAZ,EAAAa,GAAA,EAAwB,aAAaxB,GACpC,UAAA,gBAAAW;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,UAAQjB,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA,GAE9D;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}

package/dist/features/{stickers/sticker-selector/comps/sticker/sticker-styled.js → ui/sticker-grid/sticker-grid-styles.js}

@@ -1,5 +1,5 @@
-import e from "styled-components";
-const n = e.div`
+import r from "styled-components";
+const e = r.div`
   position: relative;
   width: ${({ $size: t }) => typeof t == "number" ? `${t}px` : t};
   height: ${({ $size: t }) => typeof t == "number" ? `${t}px` : t};
@@ -12,8 +12,6 @@ const n = e.div`
   transition: all 0.2s ease;
   background-color: transparent;
   opacity: ${({ $disabled: t }) => t ? 0.5 : 1};
-  pointer-events: ${({ $disabled: t }) => t ? "none" : "auto"};
-  user-select: none;
 
   &:hover {
     transform: ${({ $disabled: t }) => t ? "none" : "scale(1.1)"};
@@ -23,34 +21,66 @@ const n = e.div`
   &:active {
     transform: ${({ $disabled: t }) => t ? "none" : "scale(0.95)"};
   }
-`, r = e.div`
+`, n = r.div`
   font-size: ${({ $size: t }) => typeof t == "number" ? `${t * 0.7}px` : "70%"};
   line-height: 1;
-  display: ${({ $visible: t }) => t ? "flex" : "none"};
+  display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   transition: opacity 0.2s ease;
-`, i = e.div`
+`, a = r.div`
   position: absolute;
   top: 50%;
   left: 50%;
   width: ${({ $size: t }) => typeof t == "number" ? `${t * 0.7}px` : t};
   height: ${({ $size: t }) => typeof t == "number" ? `${t * 0.7}px` : t};
+  opacity: 0;
+  transition: opacity 0.2s ease;
   transform: translate(-50%, -50%);
   pointer-events: none;
-  display: 'flex';
-  opacity: ${({ $visible: t }) => t ? 1 : 0};
-  transition: opacity 0.2s ease;
 
-  ${n}:hover & {
+  ${e}:hover & {
     opacity: 1;
   }
+`, i = r.div`
+  display: grid;
+  grid-template-columns: repeat(${({ $columns: t }) => t}, 1fr);
+  gap: ${({ $gap: t }) => t}px;
+  padding: 16px;
+  background-color: #2a2a2a;
+  border-radius: 12px;
+  max-height: 400px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+`, c = r.div`
+  width: 100%;
+  max-width: ${({ $width: t }) => t};
+  max-height: ${({ $height: t }) => t};
 `;
 export {
-  i as LottieContainer,
-  r as StaticEmoji,
-  n as StickerContainer
+  a as LottieContainer,
+  n as StaticEmoji,
+  e as StickerContainer,
+  i as StickerGrid,
+  c as StickerGridContainer
 };
-//# sourceMappingURL=sticker-styled.js.map
+//# sourceMappingURL=sticker-grid-styles.js.map

package/dist/features/ui/sticker-grid/sticker-grid-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticker-grid-styles.js","sources":["../../../../src/features/ui/sticker-grid/sticker-grid-styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StickerContainer = styled.div<{\n  $size: number | string;\n  $disabled?: boolean;\n}>`\n  position: relative;\n  width: ${({ $size }) => (typeof $size === 'number' ? `${$size}px` : $size)};\n  height: ${({ $size }) => (typeof $size === 'number' ? `${$size}px` : $size)};\n  cursor: ${({ $disabled }) => ($disabled ? 'none' : 'pointer')};\n  border-radius: 8px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  background-color: transparent;\n  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};\n\n  &:hover {\n    transform: ${({ $disabled }) => ($disabled ? 'none' : 'scale(1.1)')};\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  &:active {\n    transform: ${({ $disabled }) => ($disabled ? 'none' : 'scale(0.95)')};\n  }\n`;\n\nexport const StaticEmoji = styled.div<{ $size: number | string }>`\n  font-size: ${({ $size }) => {\n    if (typeof $size === 'number') {\n      return `${$size * 0.7}px`;\n    }\n\n    return '70%';\n  }};\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  transition: opacity 0.2s ease;\n`;\n\nexport const LottieContainer = styled.div<{ $size: number | string }>`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: ${({ $size }) => (typeof $size === 'number' ? `${$size * 0.7}px` : $size)};\n  height: ${({ $size }) => (typeof $size === 'number' ? `${$size * 0.7}px` : $size)};\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n\n  ${StickerContainer}:hover & {\n    opacity: 1;\n  }\n`;\n\nexport const StickerGrid = styled.div<{\n  $columns: number;\n  $gap: number;\n}>`\n  display: grid;\n  grid-template-columns: repeat(${({ $columns }) => $columns}, 1fr);\n  gap: ${({ $gap }) => $gap}px;\n  padding: 16px;\n  background-color: #2a2a2a;\n  border-radius: 12px;\n  max-height: 400px;\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: rgba(255, 255, 255, 0.3);\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: rgba(255, 255, 255, 0.5);\n  }\n`;\n\nexport const StickerGridContainer = styled.div<{\n  $width: string;\n  $height: string;\n}>`\n  width: 100%;\n  max-width: ${({ $width }) => $width};\n  max-height: ${({ $height }) => $height};\n`;\n"],"names":["StickerContainer","styled","$size","$disabled","StaticEmoji","LottieContainer","StickerGrid","$columns","$gap","StickerGridContainer","$width","$height"],"mappings":";AAEO,MAAMA,IAAmBC,EAAO;AAAA;AAAA,WAK5B,CAAC,EAAE,OAAAC,EAAa,MAAA,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,CAAM;AAAA,YAChE,CAAC,EAAE,OAAAA,EAAa,MAAA,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,CAAM;AAAA,YACjE,CAAC,EAAE,WAAAC,EAAA,MAAiBA,IAAY,SAAS,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQlD,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,MAAM,CAAE;AAAA;AAAA;AAAA,iBAGpC,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,SAAS,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKtD,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,SAAS,aAAc;AAAA;AAAA,GAI3DC,IAAcH,EAAO;AAAA,eACnB,CAAC,EAAE,OAAAC,QACV,OAAOA,KAAU,WACZ,GAAGA,IAAQ,GAAG,OAGhB,KACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUUG,IAAkBJ,EAAO;AAAA;AAAA;AAAA;AAAA,WAI3B,CAAC,EAAE,OAAAC,QAAa,OAAOA,KAAU,WAAW,GAAGA,IAAQ,GAAG,OAAOA,CAAM;AAAA,YACtE,CAAC,EAAE,OAAAA,QAAa,OAAOA,KAAU,WAAW,GAAGA,IAAQ,GAAG,OAAOA,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM/EF,CAAgB;AAAA;AAAA;AAAA,GAKPM,IAAcL,EAAO;AAAA;AAAA,kCAKA,CAAC,EAAE,UAAAM,EAAS,MAAMA,CAAQ;AAAA,SACnD,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0BdC,IAAuBR,EAAO;AAAA;AAAA,eAK5B,CAAC,EAAE,QAAAS,EAAO,MAAMA,CAAM;AAAA,gBACrB,CAAC,EAAE,SAAAC,EAAQ,MAAMA,CAAO;AAAA;"}

package/dist/features/ui/sticker-grid/sticker-grid.js

@@ -0,0 +1,24 @@
+import { jsx as m } from "react/jsx-runtime";
+import { memo as d } from "react";
+import n from "./sticker.js";
+import { StickerGridContainer as a, StickerGrid as f } from "./sticker-grid-styles.js";
+const h = ({
+  stickers: t,
+  columns: i = 4,
+  gap: e = 8,
+  stickerSize: p = 48,
+  onStickerClick: o
+}) => /* @__PURE__ */ m(a, { $width: "350px", $height: "400px", children: /* @__PURE__ */ m(f, { $columns: i, $gap: e, children: t.map((r) => /* @__PURE__ */ m(
+  n,
+  {
+    emoji: r.emoji,
+    lottieUrl: r.lottieUrl,
+    size: p,
+    onClick: () => o == null ? void 0 : o(r)
+  },
+  r.id
+)) }) }), $ = d(h);
+export {
+  $ as default
+};
+//# sourceMappingURL=sticker-grid.js.map

package/dist/features/ui/sticker-grid/sticker-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticker-grid.js","sources":["../../../../src/features/ui/sticker-grid/sticker-grid.tsx"],"sourcesContent":["import type { IStickerGridProps } from './sticker-grid-types';\n\nimport React, { memo } from 'react';\n\nimport Sticker from './sticker';\nimport { StickerGrid, StickerGridContainer } from './sticker-grid-styles';\n\nconst StickerGridComponent: React.FC<IStickerGridProps> = ({\n  stickers,\n  columns = 4,\n  gap = 8,\n  stickerSize = 48,\n  onStickerClick,\n}) => {\n  return (\n    <StickerGridContainer $width=\"350px\" $height=\"400px\">\n      <StickerGrid $columns={columns} $gap={gap}>\n        {stickers.map(sticker => (\n          <Sticker\n            key={sticker.id}\n            emoji={sticker.emoji}\n            lottieUrl={sticker.lottieUrl}\n            size={stickerSize}\n            onClick={() => onStickerClick?.(sticker)}\n          />\n        ))}\n      </StickerGrid>\n    </StickerGridContainer>\n  );\n};\n\nexport default memo(StickerGridComponent);\n"],"names":["StickerGridComponent","stickers","columns","gap","stickerSize","onStickerClick","jsx","StickerGridContainer","StickerGrid","sticker","Sticker","stickerGrid","memo"],"mappings":";;;;AAOA,MAAMA,IAAoD,CAAC;AAAA,EACzD,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,KAAAC,IAAM;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,gBAAAC;AACF,MAEK,gBAAAC,EAAAC,GAAA,EAAqB,QAAO,SAAQ,SAAQ,SAC3C,UAAA,gBAAAD,EAACE,GAAY,EAAA,UAAUN,GAAS,MAAMC,GACnC,UAAAF,EAAS,IAAI,CACZQ,MAAA,gBAAAH;AAAA,EAACI;AAAA,EAAA;AAAA,IAEC,OAAOD,EAAQ;AAAA,IACf,WAAWA,EAAQ;AAAA,IACnB,MAAML;AAAA,IACN,SAAS,MAAMC,KAAA,gBAAAA,EAAiBI;AAAA,EAAO;AAAA,EAJlCA,EAAQ;AAAA,CAMhB,GACH,EACF,CAAA,GAIWE,IAAAC,EAAKZ,CAAoB;"}

package/dist/features/ui/sticker-grid/sticker.js

@@ -0,0 +1,57 @@
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { memo as S, useState as v, useRef as L, useLayoutEffect as M, useCallback as i, useMemo as $ } from "react";
+import g from "../lottie-animation/lottie-animation.js";
+import { StickerContainer as k, StaticEmoji as E, LottieContainer as j } from "./sticker-grid-styles.js";
+const x = ({
+  emoji: a,
+  lottieUrl: c,
+  size: t = 48,
+  onClick: o,
+  disabled: e = !1
+}) => {
+  const [r, u] = v(!1), n = L(null);
+  M(() => {
+    n.current && n.current.playSegments([0, 1], !0);
+  }, []);
+  const f = i(() => {
+    e || u(!0);
+  }, [e]), m = i(() => {
+    e || u(!1);
+  }, [e]), l = i(() => {
+    !e && o && o();
+  }, [e, o]), h = $(
+    () => ({
+      loop: !0,
+      renderer: "canvas",
+      autoplay: r
+    }),
+    [r]
+  );
+  return /* @__PURE__ */ p(
+    k,
+    {
+      $size: t,
+      $disabled: e,
+      onMouseEnter: f,
+      onMouseLeave: m,
+      onClick: l,
+      children: [
+        !r && /* @__PURE__ */ s(E, { $size: t, children: a }),
+        c && /* @__PURE__ */ s(j, { $size: t, children: /* @__PURE__ */ s(
+          g,
+          {
+            ref: n,
+            src: c,
+            width: "100%",
+            height: "100%",
+            settings: h
+          }
+        ) })
+      ]
+    }
+  );
+}, d = S(x);
+export {
+  d as default
+};
+//# sourceMappingURL=sticker.js.map

package/dist/features/ui/sticker-grid/sticker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticker.js","sources":["../../../../src/features/ui/sticker-grid/sticker.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../lottie-animation/types';\nimport type { IStickerProps } from './sticker-grid-types';\n\nimport React, { useCallback, useMemo, useRef, useState, memo, useLayoutEffect } from 'react';\n\nimport LottieAnimation from '../lottie-animation/lottie-animation';\nimport { StickerContainer, StaticEmoji, LottieContainer } from './sticker-grid-styles';\n\nconst Sticker: React.FC<IStickerProps> = ({\n  emoji,\n  lottieUrl,\n  size = 48,\n  onClick,\n  disabled = false,\n}) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const lottieRef = useRef<ILottieAnimationRef>(null);\n\n  useLayoutEffect(() => {\n    if (lottieRef.current) {\n      lottieRef.current.playSegments([0, 1], true);\n    }\n  }, []);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!disabled) setIsHovered(true);\n  }, [disabled]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (!disabled) setIsHovered(false);\n  }, [disabled]);\n\n  const handleClick = useCallback(() => {\n    if (!disabled && onClick) onClick();\n  }, [disabled, onClick]);\n\n  const lottieSettings = useMemo(\n    () => ({\n      loop: true,\n      renderer: 'canvas',\n      autoplay: isHovered,\n    }),\n    [isHovered],\n  );\n\n  return (\n    <StickerContainer\n      $size={size}\n      $disabled={disabled}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onClick={handleClick}\n    >\n      {!isHovered && <StaticEmoji $size={size}>{emoji}</StaticEmoji>}\n\n      {lottieUrl && (\n        <LottieContainer $size={size}>\n          <LottieAnimation\n            ref={lottieRef}\n            src={lottieUrl}\n            width=\"100%\"\n            height=\"100%\"\n            settings={lottieSettings}\n          />\n        </LottieContainer>\n      )}\n    </StickerContainer>\n  );\n};\n\nexport default memo(Sticker);\n"],"names":["Sticker","emoji","lottieUrl","size","onClick","disabled","isHovered","setIsHovered","useState","lottieRef","useRef","useLayoutEffect","handleMouseEnter","useCallback","handleMouseLeave","handleClick","lottieSettings","useMemo","jsxs","StickerContainer","jsx","StaticEmoji","LottieContainer","LottieAnimation","Sticker$1","memo"],"mappings":";;;;AAQA,MAAMA,IAAmC,CAAC;AAAA,EACxC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAYC,EAA4B,IAAI;AAElD,EAAAC,EAAgB,MAAM;AACpB,IAAIF,EAAU,WACZA,EAAU,QAAQ,aAAa,CAAC,GAAG,CAAC,GAAG,EAAI;AAAA,EAE/C,GAAG,CAAE,CAAA;AAEC,QAAAG,IAAmBC,EAAY,MAAM;AACrC,IAACR,KAAUE,EAAa,EAAI;AAAA,EAAA,GAC/B,CAACF,CAAQ,CAAC,GAEPS,IAAmBD,EAAY,MAAM;AACrC,IAACR,KAAUE,EAAa,EAAK;AAAA,EAAA,GAChC,CAACF,CAAQ,CAAC,GAEPU,IAAcF,EAAY,MAAM;AAChC,IAAA,CAACR,KAAYD,KAAiBA;EAAA,GACjC,CAACC,GAAUD,CAAO,CAAC,GAEhBY,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAUX;AAAA,IAAA;AAAA,IAEZ,CAACA,CAAS;AAAA,EAAA;AAIV,SAAA,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOhB;AAAA,MACP,WAAWE;AAAA,MACX,cAAcO;AAAA,MACd,cAAcE;AAAA,MACd,SAASC;AAAA,MAER,UAAA;AAAA,QAAA,CAACT,KAAa,gBAAAc,EAACC,GAAY,EAAA,OAAOlB,GAAO,UAAMF,GAAA;AAAA,QAE/CC,KACC,gBAAAkB,EAACE,GAAgB,EAAA,OAAOnB,GACtB,UAAA,gBAAAiB;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,KAAKd;AAAA,YACL,KAAKP;AAAA,YACL,OAAM;AAAA,YACN,QAAO;AAAA,YACP,UAAUc;AAAA,UAAA;AAAA,QAAA,GAEd;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,GAEeQ,IAAAC,EAAKzB,CAAO;"}

package/dist/features/ui/stickers/constants.js

@@ -0,0 +1,6 @@
+const I = 32, E = 48;
+export {
+  E as STICKER_MAX_SIZE,
+  I as STICKER_MIN_SIZE
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/ui/stickers/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/features/ui/stickers/constants.ts"],"sourcesContent":["export const STICKER_MIN_SIZE = 32;\nexport const STICKER_MAX_SIZE = 48;\n"],"names":["STICKER_MIN_SIZE","STICKER_MAX_SIZE"],"mappings":"AAAO,MAAMA,IAAmB,IACnBC,IAAmB;"}

package/dist/features/ui/stickers/stickers-effects.js

@@ -0,0 +1,64 @@
+import { keyframes as r, css as t } from "styled-components";
+import { randomizeDuration as o } from "./stickers-utils.js";
+const s = r`
+  0% {
+    transform: translateY(0vh);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100vh);
+    opacity: 0;
+  }
+`, n = r`
+  0% {
+    transform: translateY(0vh);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh);
+    opacity: 0;
+  }
+`, e = r`
+  0% {
+    transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0vw) translateY(0vh) scale(1.25);
+    opacity: 0;
+  }
+`, m = r`
+  0% {
+    transform: translateX(0) translateY(0vh);
+    opacity: 1;
+  }
+  35% {
+    transform: translateX(0) translateY(-50vh) scale(1.25);
+    opacity: 1;
+  }
+  60% {
+    transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1.25);
+    opacity: 0.75;
+  }
+  100% {
+    transform: translateX(var(--from-x)) translateY(-110vh) scale(1.25);
+    opacity: 0;
+  }
+`, i = {
+  float_up: (a) => t`
+    animation: ${s} ${o(a)}ms ease-out forwards;
+  `,
+  fall_down: (a) => t`
+    animation: ${n} ${o(a)}ms ease-out forwards;
+  `,
+  burst_from_edges: (a) => t`
+    animation: ${e} ${o(a)}ms linear forwards;
+  `,
+  pop_expand: (a) => t`
+    animation: ${m} ${a}ms cubic-bezier(0.5, 0.1, 0.7, 1) forwards;
+  `
+};
+export {
+  i as effectAnimations
+};
+//# sourceMappingURL=stickers-effects.js.map

package/dist/features/ui/stickers/stickers-effects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stickers-effects.js","sources":["../../../../src/features/ui/stickers/stickers-effects.ts"],"sourcesContent":["import type { StickersProps } from './stickers-types';\n\nimport { keyframes, css } from 'styled-components';\n\nimport { randomizeDuration } from './stickers-utils';\n\nconst floatUp = keyframes`\n  0% {\n    transform: translateY(0vh);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(-100vh);\n    opacity: 0;\n  }\n`;\n\nconst fallDown = keyframes`\n  0% {\n    transform: translateY(0vh);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(100vh);\n    opacity: 0;\n  }\n`;\n\nconst burstFromEdges = keyframes`\n  0% {\n    transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(0vw) translateY(0vh) scale(1.25);\n    opacity: 0;\n  }\n`;\n\nconst popExpand = keyframes`\n  0% {\n    transform: translateX(0) translateY(0vh);\n    opacity: 1;\n  }\n  35% {\n    transform: translateX(0) translateY(-50vh) scale(1.25);\n    opacity: 1;\n  }\n  60% {\n    transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1.25);\n    opacity: 0.75;\n  }\n  100% {\n    transform: translateX(var(--from-x)) translateY(-110vh) scale(1.25);\n    opacity: 0;\n  }\n`;\n\nexport const effectAnimations: Record<\n  StickersProps['effect'],\n  (duration: number) => ReturnType<typeof css>\n> = {\n  float_up: (duration: number) => css`\n    animation: ${floatUp} ${randomizeDuration(duration)}ms ease-out forwards;\n  `,\n  fall_down: (duration: number) => css`\n    animation: ${fallDown} ${randomizeDuration(duration)}ms ease-out forwards;\n  `,\n  burst_from_edges: (duration: number) => css`\n    animation: ${burstFromEdges} ${randomizeDuration(duration)}ms linear forwards;\n  `,\n  pop_expand: (duration: number) => css`\n    animation: ${popExpand} ${duration}ms cubic-bezier(0.5, 0.1, 0.7, 1) forwards;\n  `,\n};\n"],"names":["floatUp","keyframes","fallDown","burstFromEdges","popExpand","effectAnimations","duration","css","randomizeDuration"],"mappings":";;AAMA,MAAMA,IAAUC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWVC,IAAWD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWXE,IAAiBF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWjBG,IAAYH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmBLI,IAGT;AAAA,EACF,UAAU,CAACC,MAAqBC;AAAA,iBACjBP,CAAO,IAAIQ,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAErD,WAAW,CAACA,MAAqBC;AAAA,iBAClBL,CAAQ,IAAIM,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAEtD,kBAAkB,CAACA,MAAqBC;AAAA,iBACzBJ,CAAc,IAAIK,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAE5D,YAAY,CAACA,MAAqBC;AAAA,iBACnBH,CAAS,IAAIE,CAAQ;AAAA;AAEtC;"}

package/dist/features/ui/stickers/stickers-styled.js

@@ -0,0 +1,29 @@
+import $, { css as s } from "styled-components";
+import { effectAnimations as n } from "./stickers-effects.js";
+const h = $.div`
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background: transparent;
+  pointer-events: none;
+`, a = $.div`
+  position: absolute;
+  z-index: 10;
+
+  left: ${({ x: t }) => `${t}%`};
+  top: ${({ y: t }) => `${t}%`};
+  width: ${({ size: t }) => `${t}px`};
+  height: ${({ size: t }) => `${t}px`};
+  font-size: ${({ size: t }) => `${t}px`};
+
+  ${({ effect: t, duration: i, fromX: o, fromY: e }) => o && e ? s`
+          ${n[t](i)}
+          --from-x: ${o};
+          --from-y: ${e};
+        ` : n[t](i)}
+`;
+export {
+  h as Container,
+  a as Sticker
+};
+//# sourceMappingURL=stickers-styled.js.map

package/dist/features/ui/stickers/stickers-styled.js.map

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