@cuemath/leap 3.2.15-as2 → 3.2.15-link.0

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import e from "styled-components";
 import n from "../layout/flex-view.js";
-const p = e.div`
+const r = e.div`
   position: absolute;
   top: ${({ $top: t }) => t}px;
   left: ${({ $left: t }) => t}px;
@@ -11,22 +11,15 @@ const p = e.div`
   align-items: end;
   z-index: ${({ $zIndex: t }) => t};
   pointer-events: none;
-`, r = e(n)`
-  div {
-    // Inner container of Lottie Component
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+`, p = e(n)`
+  overflow: hidden;
 
-  svg {
-    width: 33.84px !important;
-    height: 47.27px !important;
-    display: block;
+  & svg {
+    transform: scale(3.5) !important;
   }
 `;
 export {
-  r as NudgeLottieContainer,
-  p as NudgeWrapper
+  p as NudgeLottieContainer,
+  r as NudgeWrapper
 };
 //# sourceMappingURL=nudge-styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nudge-styled.js","sources":["../../../../src/features/ui/nudge/nudge-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\n\ninterface NudgeWrapperProps {\n  $top: number;\n  $left: number;\n  $zIndex: number;\n}\n\nexport const NudgeWrapper = styled.div<NudgeWrapperProps>`\n  position: absolute;\n  top: ${({ $top }) => $top}px;\n  left: ${({ $left }) => $left}px;\n  height: max-content;\n  width: max-content;\n  display: flex;\n  justify-content: center;\n  align-items: end;\n  z-index: ${({ $zIndex }) => $zIndex};\n  pointer-events: none;\n`;\n\nexport const NudgeLottieContainer = styled(FlexView)`\n  div {\n    // Inner container of Lottie Component\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  svg {\n    width: 33.84px !important;\n    height: 47.27px !important;\n    display: block;\n  }\n`;\n"],"names":["NudgeWrapper","styled","$top","$left","$zIndex","NudgeLottieContainer","FlexView"],"mappings":";;AAUO,MAAMA,IAAeC,EAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA,UACjB,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMjB,CAAC,EAAE,SAAAC,EAAQ,MAAMA,CAAO;AAAA;AAAA,GAIxBC,IAAuBJ,EAAOK,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"nudge-styled.js","sources":["../../../../src/features/ui/nudge/nudge-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\n\ninterface NudgeWrapperProps {\n  $top: number;\n  $left: number;\n  $zIndex: number;\n}\n\nexport const NudgeWrapper = styled.div<NudgeWrapperProps>`\n  position: absolute;\n  top: ${({ $top }) => $top}px;\n  left: ${({ $left }) => $left}px;\n  height: max-content;\n  width: max-content;\n  display: flex;\n  justify-content: center;\n  align-items: end;\n  z-index: ${({ $zIndex }) => $zIndex};\n  pointer-events: none;\n`;\n\nexport const NudgeLottieContainer = styled(FlexView)`\n  overflow: hidden;\n\n  & svg {\n    transform: scale(3.5) !important;\n  }\n`;\n"],"names":["NudgeWrapper","styled","$top","$left","$zIndex","NudgeLottieContainer","FlexView"],"mappings":";;AAUO,MAAMA,IAAeC,EAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA,UACjB,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMjB,CAAC,EAAE,SAAAC,EAAQ,MAAMA,CAAO;AAAA;AAAA,GAIxBC,IAAuBJ,EAAOK,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/ui/nudge/nudge.js

@@ -1,18 +1,17 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { memo as n } from "react";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import { LOTTIE as d } from "../../../assets/lottie/lottie.js";
-import p from "../lottie-animation/lottie-animation.js";
-import { NudgeWrapper as f, NudgeLottieContainer as s } from "./nudge-styled.js";
-const u = ({
-  content: o,
-  nudgePointerX: r = 0,
-  nudgePointerY: e = 0,
+import m from "../lottie-animation/lottie-animation.js";
+import { NudgeWrapper as p, NudgeLottieContainer as s } from "./nudge-styled.js";
+const f = ({
+  content: r,
+  nudgePointerX: e = 0,
+  nudgePointerY: o = 0,
   zIndex: i = 100
-}) => /* @__PURE__ */ m(f, { $top: e, $left: r, $zIndex: i, children: [
-  /* @__PURE__ */ t(s, { $height: 60, $width: 60, children: /* @__PURE__ */ t(p, { src: d.NUDGE_TAP }) }),
-  o
-] }), N = n(u);
+}) => /* @__PURE__ */ n(p, { $top: o, $left: e, $zIndex: i, children: [
+  /* @__PURE__ */ t(s, { $height: 64, $width: 64, children: /* @__PURE__ */ t(m, { src: d.NUDGE_TAP }) }),
+  r
+] }), g = f;
 export {
-  N as default
+  g as default
 };
 //# sourceMappingURL=nudge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nudge.js","sources":["../../../../src/features/ui/nudge/nudge.tsx"],"sourcesContent":["import type { INudgeProps } from './nudge-types';\n\nimport React, { memo } from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport LottieAnimation from '../lottie-animation/lottie-animation';\nimport * as S from './nudge-styled';\n\nconst Nudge: React.FC<INudgeProps> = ({\n  content,\n  nudgePointerX = 0,\n  nudgePointerY = 0,\n  zIndex = 100,\n}) => {\n  return (\n    <S.NudgeWrapper $top={nudgePointerY} $left={nudgePointerX} $zIndex={zIndex}>\n      <S.NudgeLottieContainer $height={60} $width={60}>\n        <LottieAnimation src={LOTTIE.NUDGE_TAP} />\n      </S.NudgeLottieContainer>\n      {content}\n    </S.NudgeWrapper>\n  );\n};\n\nexport default memo(Nudge);\n"],"names":["Nudge","content","nudgePointerX","nudgePointerY","zIndex","jsxs","S.NudgeWrapper","jsx","S.NudgeLottieContainer","LottieAnimation","LOTTIE","Nudge$1","memo"],"mappings":";;;;;AAQA,MAAMA,IAA+B,CAAC;AAAA,EACpC,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,QAAAC,IAAS;AACX,MAEI,gBAAAC,EAACC,GAAA,EAAe,MAAMH,GAAe,OAAOD,GAAe,SAASE,GAClE,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAuB,SAAS,IAAI,QAAQ,IAC3C,UAAA,gBAAAD,EAACE,GAAgB,EAAA,KAAKC,EAAO,UAAA,CAAW,EAC1C,CAAA;AAAA,EACCT;AACH,EAAA,CAAA,GAIWU,IAAAC,EAAKZ,CAAK;"}
+{"version":3,"file":"nudge.js","sources":["../../../../src/features/ui/nudge/nudge.tsx"],"sourcesContent":["import type { INudgeProps } from './nudge-types';\n\nimport React from 'react';\n\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport LottieAnimation from '../lottie-animation/lottie-animation';\nimport * as S from './nudge-styled';\n\nconst Nudge: React.FC<INudgeProps> = ({\n  content,\n  nudgePointerX = 0,\n  nudgePointerY = 0,\n  zIndex = 100,\n}) => {\n  return (\n    <S.NudgeWrapper $top={nudgePointerY} $left={nudgePointerX} $zIndex={zIndex}>\n      <S.NudgeLottieContainer $height={64} $width={64}>\n        <LottieAnimation src={LOTTIE.NUDGE_TAP} />\n      </S.NudgeLottieContainer>\n      {content}\n    </S.NudgeWrapper>\n  );\n};\n\nexport default Nudge;\n"],"names":["Nudge","content","nudgePointerX","nudgePointerY","zIndex","jsxs","S.NudgeWrapper","jsx","S.NudgeLottieContainer","LottieAnimation","LOTTIE","Nudge$1"],"mappings":";;;;AAQA,MAAMA,IAA+B,CAAC;AAAA,EACpC,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,QAAAC,IAAS;AACX,MAEI,gBAAAC,EAACC,GAAA,EAAe,MAAMH,GAAe,OAAOD,GAAe,SAASE,GAClE,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAuB,SAAS,IAAI,QAAQ,IAC3C,UAAA,gBAAAD,EAACE,GAAgB,EAAA,KAAKC,EAAO,UAAA,CAAW,EAC1C,CAAA;AAAA,EACCT;AACH,EAAA,CAAA,GAIJU,IAAeX;"}

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

@@ -1,54 +1,56 @@
-import { useMemo as C } from "react";
-import F from "styled-components";
+import { useMemo as F } from "react";
+import H from "styled-components";
 import { EDeviceType as y } from "../theme/constants.js";
-const $ = F.div(
+const g = H.div(
   ({
-    theme: g,
+    theme: T,
     $renderAs: t,
     $color: n,
-    $align: T = "left",
+    $align: b = "left",
     $width: e,
     $widthX: f,
     $marginBottom: o,
     $marginBottomX: r,
     $alignSelf: l,
-    $opacity: b = 1,
-    $inline: v,
+    $opacity: v = 1,
+    $inline: E,
     $textDecoration: x,
     $whiteSpace: a,
     $renderOnMobileAs: c,
-    $renderOnTabletAs: i
+    $renderOnTabletAs: i,
+    $cursor: m
   }) => {
-    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,
-      letterSpacing: s,
-      textTransform: d = "none"
-    } = E[L];
+    const { text: L, colors: u, layout: s, device: p } = T, h = F(() => p <= y.MOBILE ? c || i || t : p <= y.TABLET && i || t, [p, t, c, i]), {
+      fontFamily: k,
+      fontSize: z,
+      lineHeight: d,
+      letterSpacing: $,
+      textTransform: C = "none"
+    } = L[h];
     return `
-      display: ${v ? "inline-block" : "block"};
-      font-family: ${h};
-      font-size: ${k}px;
-      text-align: ${T};
-      line-height: ${z}px;
-      text-transform: ${d};
-      ${typeof s == "number" ? `letter-spacing: ${s}px;` : ""}
-      color: ${n ? m[n] : m.BLACK};
-      opacity: ${b};
+      display: ${E ? "inline-block" : "block"};
+      font-family: ${k};
+      font-size: ${z}px;
+      text-align: ${b};
+      line-height: ${d}px;
+      text-transform: ${C};
+      ${typeof $ == "number" ? `letter-spacing: ${$}px;` : ""}
+      color: ${n ? u[n] : u.BLACK};
+      opacity: ${v};
       width: ${e ? `${e}` : "auto"}${typeof e == "number" ? "px" : ""};
-      ${f ? `width: ${f * u.gutter}px;` : ""}
+      ${f ? `width: ${f * s.gutter}px;` : ""}
       margin-bottom: ${o ? `${o}` : "initial"}${typeof o == "number" ? "px" : ""};
-      ${r ? `margin-bottom: ${r * u.gutter}px;` : ""}
+      ${r ? `margin-bottom: ${r * s.gutter}px;` : ""}
       ${l ? `align-self: ${l};` : ""}
       ${x ? `text-decoration: ${x};` : ""}
       ${a ? `white-space: ${a};` : ""}
+      ${m ? `cursor: ${m};` : ""}
     `;
   }
 );
-$.displayName = "Text";
-const M = $;
+g.displayName = "Text";
+const N = g;
 export {
-  M as default
+  N 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 { 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  $cursor?: 'pointer' | 'default' | 'text' | 'not-allowed' | 'move' | 'help';\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    $cursor,\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      ${$cursor ? `cursor: ${$cursor};` : ''}\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","$cursor","text","colors","layout","device","renderAs","useMemo","EDeviceType","fontFamily","fontSize","lineHeight","letterSpacing","textTransform","Text$1"],"mappings":";;;AA4BA,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,IACA,SAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,GAAQ,QAAAC,MAAWnB,GACnCoB,IAAWC,EAAQ,MACnBF,KAAUG,EAAY,SACjBT,KAAqBC,KAAqBb,IAG/CkB,KAAUG,EAAY,UACjBR,KAAqBb,GAI7B,CAACkB,GAAQlB,GAAWY,GAAmBC,CAAiB,CAAC,GAEtD;AAAA,MACJ,YAAAS;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC,IAAgB;AAAA,IAAA,IACdX,EAAKI,CAAQ;AAEV,WAAA;AAAA,iBACMV,IAAU,iBAAiB,OAAO;AAAA,qBAC9Ba,CAAU;AAAA,mBACZC,CAAQ;AAAA,oBACPrB,CAAM;AAAA,qBACLsB,CAAU;AAAA,wBACPE,CAAa;AAAA,QAC7B,OAAOD,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA,eACvExB,IAASe,EAAOf,CAAM,IAAIe,EAAO,KAAK;AAAA,iBACpCR,CAAQ;AAAA,eACVL,IAAS,GAAGA,CAAM,KAAK,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,QAC7EC,IAAU,UAAUA,IAAUa,EAAO,MAAM,QAAQ,EAAE;AAAA,uBACtCZ,IAAgB,GAAGA,CAAa,KAAK,SAAS,GAC7D,OAAOA,KAAkB,WAAW,OAAO,EAC7C;AAAA,QACEC,IAAiB,kBAAkBA,IAAiBW,EAAO,MAAM,QAAQ,EAAE;AAAA,QAC3EV,IAAa,eAAeA,CAAU,MAAM,EAAE;AAAA,QAC9CG,IAAkB,oBAAoBA,CAAe,MAAM,EAAE;AAAA,QAC7DC,IAAc,gBAAgBA,CAAW,MAAM,EAAE;AAAA,QACjDG,IAAU,WAAWA,CAAO,MAAM,EAAE;AAAA;AAAA,EAE1C;AACF;AAEAjB,EAAK,cAAc;AAEnB,MAAA8B,IAAe9B;"}

package/dist/features/ui/theme/button.js

@@ -1,48 +1,48 @@
-const e = (i) => ({ sizes: {
+const d = (a) => ({ sizes: {
   xsmall: {
-    height: i * 2,
-    paddingHorizontal: i * 1.375,
+    height: a * 2,
+    paddingHorizontal: a * 1.375,
     textVariant: "ub3-bold",
     borderWidth: 1,
-    iconSize: i,
-    iconPadding: i * 0.25,
-    loaderSize: i * 1.25
+    iconSize: a,
+    iconPadding: a * 0.25,
+    loaderSize: a * 1.25
   },
   small: {
-    height: i * 2.5,
-    paddingHorizontal: i * 1.625,
+    height: a * 2.5,
+    paddingHorizontal: a * 1.625,
     textVariant: "ub2-bold",
     borderWidth: 1,
-    iconSize: i * 1.25,
-    iconPadding: i * 0.375,
-    loaderSize: i * 1.5
+    iconSize: a * 1.25,
+    iconPadding: a * 0.375,
+    loaderSize: a * 1.5
   },
   regular: {
-    height: i * 3,
-    paddingHorizontal: i * 1.875,
+    height: a * 3,
+    paddingHorizontal: a * 1.875,
     textVariant: "ub1-bold",
     borderWidth: 1,
-    iconSize: i * 1.5,
-    iconPadding: i * 0.5,
-    loaderSize: i * 1.75
+    iconSize: a * 1.5,
+    iconPadding: a * 0.5,
+    loaderSize: a * 1.75
   },
   medium: {
-    height: i * 3.5,
-    paddingHorizontal: i * 2.125,
+    height: a * 3.5,
+    paddingHorizontal: a * 2.125,
     textVariant: "ub1-bold",
     borderWidth: 1.5,
-    iconSize: i * 1.5,
-    iconPadding: i * 0.5,
-    loaderSize: i * 2
+    iconSize: a * 1.5,
+    iconPadding: a * 0.5,
+    loaderSize: a * 2
   },
   large: {
-    height: i * 4,
-    paddingHorizontal: i * 2.375,
+    height: a * 4,
+    paddingHorizontal: a * 2.375,
     textVariant: "ub1-bold",
     borderWidth: 2,
-    iconSize: i * 1.5,
-    iconPadding: i * 0.5,
-    loaderSize: i * 2.25
+    iconSize: a * 1.5,
+    iconPadding: a * 0.5,
+    loaderSize: a * 2.25
   }
 }, variants: {
   primary: {
@@ -129,6 +129,57 @@ const e = (i) => ({ sizes: {
       active: "BLACK",
       disabled: "WHITE_T_15"
     }
+  },
+  black: {
+    backgroundColorName: {
+      inactive: "BLACK_1",
+      active: "BLACK_T_60",
+      disabled: "BLACK_T_15"
+    },
+    borderColorName: {
+      inactive: "BLACK_1",
+      active: "BLACK_1",
+      disabled: "BLACK_T_15"
+    },
+    colorName: {
+      inactive: "WHITE_1",
+      active: "WHITE_1",
+      disabled: "WHITE_T_87"
+    }
+  },
+  "black-dark": {
+    backgroundColorName: {
+      inactive: "BLACK_1",
+      active: "BLACK_4",
+      disabled: "WHITE_T_10"
+    },
+    borderColorName: {
+      inactive: "WHITE_1",
+      active: "WHITE_1",
+      disabled: "WHITE_T_15"
+    },
+    colorName: {
+      inactive: "WHITE_1",
+      active: "WHITE_1",
+      disabled: "WHITE_T_38"
+    }
+  },
+  "yellow-dark": {
+    backgroundColorName: {
+      inactive: "YELLOW_4",
+      active: "YELLOW_3",
+      disabled: "WHITE_T_10"
+    },
+    borderColorName: {
+      inactive: "WHITE",
+      active: "WHITE",
+      disabled: "WHITE_T_15"
+    },
+    colorName: {
+      inactive: "BLACK_1",
+      active: "BLACK_1",
+      disabled: "WHITE_T_38"
+    }
   }
   // 'yellow': {
   //   backgroundColorName: {
@@ -147,23 +198,6 @@ const e = (i) => ({ sizes: {
   //     disabled: 'BLACK_T_35',
   //   },
   // },
-  // 'yellow-dark': {
-  //   backgroundColorName: {
-  //     inactive: 'YELLOW_4',
-  //     active: 'WHITE_4',
-  //     disabled: 'WHITE_T_40',
-  //   },
-  //   borderColorName: {
-  //     inactive: 'BLACK_4',
-  //     active: 'BLACK_4',
-  //     disabled: 'WHITE_T_40',
-  //   },
-  //   colorName: {
-  //     inactive: 'BLACK_4',
-  //     active: 'BLACK_4',
-  //     disabled: 'WHITE_T_40',
-  //   },
-  // },
   // 'white': {
   //   backgroundColorName: {
   //     inactive: 'WHITE_1',
@@ -198,42 +232,8 @@ const e = (i) => ({ sizes: {
   //     disabled: 'WHITE_T_40',
   //   },
   // },
-  // 'black': {
-  //   backgroundColorName: {
-  //     inactive: 'BLACK_4',
-  //     active: 'BLACK_T_60',
-  //     disabled: 'BLACK_T_35',
-  //   },
-  //   borderColorName: {
-  //     inactive: 'BLACK_4',
-  //     active: 'BLACK_4',
-  //     disabled: 'BLACK_T_35',
-  //   },
-  //   colorName: {
-  //     inactive: 'WHITE_4',
-  //     active: 'WHITE_4',
-  //     disabled: 'BLACK_T_35',
-  //   },
-  // },
-  // 'black-dark': {
-  //   backgroundColorName: {
-  //     inactive: 'BLACK_4',
-  //     active: 'WHITE_T_40',
-  //     disabled: 'WHITE_T_40',
-  //   },
-  //   borderColorName: {
-  //     inactive: 'WHITE_4',
-  //     active: 'WHITE_4',
-  //     disabled: 'WHITE_T_40',
-  //   },
-  //   colorName: {
-  //     inactive: 'WHITE_4',
-  //     active: 'WHITE_4',
-  //     disabled: 'WHITE_T_40',
-  //   },
-  // },
 } });
 export {
-  e as default
+  d as default
 };
 //# sourceMappingURL=button.js.map