@eclass/ui-kit 1.53.8 → 1.54.0

package/dist/eclass-ui-kit.es.js

@@ -51,46 +51,6 @@ const styles = {
     ".react-ripples": {
       h: "100%",
       display: "grid!important"
-    },
-    ".chakra-button": {
-      borderStyle: "none"
-    },
-    ".chakra-modal__content-container": {
-      padding: "1.87rem",
-      zIndex: "1400",
-      justifyContent: "center",
-      alignItems: "center",
-      overflow: "auto"
-    },
-    ".chakra-modal__content": {
-      borderRadius: "0.5rem",
-      background: "white",
-      color: "inherit",
-      zIndex: "1400",
-      maxWidth: "36.813rem",
-      boxShadow: "0px 4px 16px rgba(92, 92, 92, 0.2)"
-    },
-    ".chakra-modal__header": {
-      paddingInlineStart: "1.5rem",
-      paddingInlineEnd: "1.5rem",
-      fontSize: "1.25rem",
-      fontWeight: "700",
-      textAlign: "center",
-      ".chakra-icon": {
-        width: "13rem"
-      }
-    },
-    ".chakra-modal__close-btn": {
-      width: "2rem",
-      height: "2rem",
-      borderRadius: "0.5rem",
-      fontSize: "0.75rem",
-      position: "absolute",
-      top: "0.5rem",
-      right: "0.75rem",
-      color: "#60798E",
-      backgroundColor: "transparent",
-      borderStyle: "none"
     }
   })
 };
@@ -139,10 +99,26 @@ const typography = {
     outstanding: "Lora"
   }
 };
+const overlay = {
+  background: colors.neutral.darkCharcoal,
+  opacity: ".3!important"
+};
+const dialog = {
+  boxShadow: shadows.lg,
+  borderRadius: radii.big
+};
 const theme = extendTheme({
   colors,
   ...utils,
   ...typography,
+  components: {
+    Modal: {
+      baseStyle: {
+        overlay,
+        dialog
+      }
+    }
+  },
   styles
 });
 const vars = (value) => `var(--chakra-${value})`;
@@ -1494,6 +1470,7 @@ function Btn({
   return /* @__PURE__ */ jsx(Box, {
     margin: m2,
     sx: {
+      w: isFullWidth ? "100%" : "auto",
       ".react-ripples": {
         borderRadius,
         display: `${isFullWidth ? "grid" : "inline-flex!important"}`
@@ -3207,7 +3184,7 @@ function PaymentModal({
       backdropBlur: "2px"
     });
   }
-  const [overlay, setOverlay] = React.useState(/* @__PURE__ */ jsx(OverlayTwo, {}));
+  const [overlay2, setOverlay] = React.useState(/* @__PURE__ */ jsx(OverlayTwo, {}));
   React.useEffect(() => {
     if (showOverlay) {
       setOverlay(/* @__PURE__ */ jsx(OverlayTwo, {}));
@@ -3220,7 +3197,7 @@ function PaymentModal({
     size: "xl",
     blockScrollOnMount: false,
     closeOnOverlayClick: false,
-    children: [overlay, /* @__PURE__ */ jsxs(ModalContent, {
+    children: [overlay2, /* @__PURE__ */ jsxs(ModalContent, {
       marginTop: "0",
       marginBottom: ["25.75rem", "15.75rem"],
       children: [/* @__PURE__ */ jsxs(ModalHeader, {
@@ -3281,7 +3258,7 @@ function Footer({
     onOpen,
     onClose
   } = useDisclosure();
-  const [overlay, setOverlay] = React.useState(false);
+  const [overlay2, setOverlay] = React.useState(false);
   const cssButton = {
     backgroundColor: "transparent"
   };
@@ -3334,7 +3311,7 @@ function Footer({
     }), modalPaymentText && /* @__PURE__ */ jsx(PaymentModal, {
       isOpen,
       onClose,
-      showOverlay: overlay,
+      showOverlay: overlay2,
       onOpen,
       modalPaymentText
     })]