@eclass/ui-kit 1.54.1 → 1.54.3

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

@@ -1,4 +1,4 @@
-import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text, HStack, Heading, List, ListItem, Link, Modal, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, MenuButton, MenuGroup, Menu, MenuList } from "@chakra-ui/react";
+import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text, HStack, Heading, List, ListItem, Link, Modal as Modal$1, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, MenuButton, MenuGroup, Menu, MenuList } from "@chakra-ui/react";
 import * as React from "react";
 import React__default, { useEffect, useCallback, useState } from "react";
 const main = {
@@ -51,6 +51,9 @@ const styles = {
     ".react-ripples": {
       h: "100%",
       display: "grid!important"
+    },
+    ".chakra-button": {
+      borderStyle: "none"
     }
   })
 };
@@ -3190,7 +3193,7 @@ function PaymentModal({
       setOverlay(/* @__PURE__ */ jsx(OverlayTwo, {}));
     }
   }, [showOverlay]);
-  return /* @__PURE__ */ jsxs(Modal, {
+  return /* @__PURE__ */ jsxs(Modal$1, {
     isCentered: true,
     isOpen,
     onClose,
@@ -3244,7 +3247,7 @@ function PaymentModal({
     })]
   });
 }
-Modal.displayName = "Modal";
+Modal$1.displayName = "Modal";
 function Footer({
   modalPaymentText
 }) {
@@ -4112,6 +4115,268 @@ const useFlashNotification = ({ state, message }) => {
     }
   };
 };
+const StyledModalFooter = ModalFooter;
+const ModalButtons = ({
+  buttons,
+  buttonsCenter,
+  buttonsColumn,
+  buttonsInside,
+  isDesktop,
+  px,
+  py
+}) => {
+  if (!buttons || buttons && buttons.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  const buttonFull = !isDesktop && buttonsColumn;
+  const hasLoading = buttons.some((button) => button.isLoading);
+  return /* @__PURE__ */ jsx(StyledModalFooter, {
+    as: "footer",
+    flexDirection: buttonFull ? "column" : "row",
+    gap: "24px",
+    justifyContent: buttonsCenter ? "center" : "flex-start",
+    pb: buttonsInside ? 0 : py,
+    pt: py,
+    px: buttonsInside ? 0 : px,
+    children: buttons.map((button, index2) => {
+      var _a, _b;
+      if ((button == null ? void 0 : button.type) === "secondary") {
+        return /* @__PURE__ */ jsx(BtnSecondary, {
+          onClick: () => button.action(),
+          isFullWidth: buttonFull,
+          isLoading: button.isLoading,
+          disabled: (_a = button.isDisabled) != null ? _a : hasLoading,
+          children: button.text
+        }, index2);
+      }
+      return /* @__PURE__ */ jsx(BtnPrimary, {
+        onClick: () => button.action(),
+        isFullWidth: buttonFull,
+        isLoading: button.isLoading,
+        disabled: (_b = button.isDisabled) != null ? _b : hasLoading,
+        children: button.text
+      }, index2);
+    })
+  });
+};
+const Modal = ({
+  buttons,
+  buttonsCenter,
+  buttonsColumn = true,
+  buttonsInside,
+  children,
+  closeOnOverlayClick = true,
+  fixedSubtitle,
+  isOpen,
+  onClose,
+  title,
+  withoutMargin = false,
+  scrollBehavior = "outside"
+}) => {
+  const py = "32px";
+  const px = "24px";
+  const [isDesktop] = useMediaQuery("(min-width: 641px)");
+  const hasLoading = (buttons == null ? void 0 : buttons.length) && buttons.some((button) => button.isLoading);
+  const handleClose = () => {
+    if (hasLoading)
+      return;
+    return onClose();
+  };
+  const isInside = scrollBehavior === "inside";
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs(Modal$1, {
+      closeOnOverlayClick: hasLoading ? false : closeOnOverlayClick,
+      isOpen,
+      motionPreset: "scale",
+      onClose: handleClose,
+      scrollBehavior,
+      children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
+        maxH: isInside ? "100dvh" : "auto",
+        minH: "300px",
+        padding: 0,
+        width: "100%",
+        sx: {
+          borderRadius: isDesktop ? "8px" : 0,
+          height: isDesktop ? "auto" : "100dvh",
+          mt: isDesktop ? "48px" : 0,
+          marginX: isDesktop ? "auto" : 0,
+          mb: 0,
+          maxH: isInside ? "calc(100dvh - 96px)" : "auto",
+          maxWidth: isDesktop ? "600px" : "100%"
+        },
+        children: [/* @__PURE__ */ jsx(ModalHeader, {
+          bg: vars("colors-main-deepSkyBlue"),
+          borderTopRadius: isDesktop ? "8px" : 0,
+          color: vars("colors-neutral-white"),
+          fontFamily: "Roboto",
+          fontSize: isDesktop ? "20px" : "18px",
+          fontWeight: 700,
+          lineHeight: 1,
+          mb: withoutMargin ? 0 : "32px",
+          paddingY: px,
+          textAlign: "center",
+          children: title
+        }), closeOnOverlayClick && /* @__PURE__ */ jsx(ModalCloseButton, {
+          color: vars("colors-neutral-white"),
+          h: "12px",
+          p: "22px",
+          right: 0,
+          top: 0,
+          w: "12px",
+          _focus: {
+            boxShadow: "none"
+          }
+        }), (fixedSubtitle == null ? void 0 : fixedSubtitle.trim()) && /* @__PURE__ */ jsx(Box, {
+          as: "p",
+          fontSize: "14px",
+          lineHeight: "19px",
+          mb: py,
+          textAlign: "center",
+          px,
+          children: fixedSubtitle
+        }), children && /* @__PURE__ */ jsxs(ModalBody, {
+          px: withoutMargin ? 0 : px,
+          py: 0,
+          mb: (buttons == null ? void 0 : buttons.length) === 0 ? py : buttonsInside ? py : 0,
+          children: [children, buttonsInside && buttons && buttons.length > 0 && /* @__PURE__ */ jsx(ModalButtons, {
+            buttons,
+            buttonsCenter,
+            buttonsColumn,
+            buttonsInside: true,
+            isDesktop,
+            px,
+            py
+          })]
+        }), !buttonsInside && /* @__PURE__ */ jsx(ModalButtons, {
+          buttons,
+          buttonsCenter,
+          buttonsColumn,
+          isDesktop,
+          px,
+          py
+        })]
+      })]
+    })
+  });
+};
+const Loading$1 = ({
+  fill = vars("colors-main-deepSkyBlue")
+}) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    "data-testid": "loading-svg",
+    id: "prefix__eXySq0EBKm11",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 38 20",
+    shapeRendering: "geometricPrecision",
+    textRendering: "geometricPrecision",
+    width: 50,
+    height: 35,
+    children: [/* @__PURE__ */ jsx("style", {
+      dangerouslySetInnerHTML: {
+        __html: "@keyframes eXySq0EBKm12_f_o{0%,33.333333%,to{fill-opacity:.4}66.666667%{fill-opacity:1;animation-timing-function:cubic-bezier(.42,0,.58,1)}}@keyframes eXySq0EBKm13_f_o{0%,66.666667%,to{fill-opacity:.4}33.333333%{fill-opacity:1;animation-timing-function:cubic-bezier(.42,0,.58,1)}}@keyframes eXySq0EBKm14_f_o{0%{fill-opacity:1;animation-timing-function:cubic-bezier(.42,0,.58,1)}33.333333%,66.666667%{fill-opacity:.4}to{fill-opacity:1}}"
+      }
+    }), /* @__PURE__ */ jsx("circle", {
+      r: 2.502,
+      transform: "translate(29.526 10)",
+      fill,
+      fillOpacity: 0.4,
+      style: {
+        animation: "eXySq0EBKm12_f_o 600ms linear infinite normal forwards"
+      }
+    }), /* @__PURE__ */ jsx("circle", {
+      r: 2.502,
+      transform: "translate(19 10)",
+      fill,
+      fillOpacity: 0.4,
+      style: {
+        animation: "eXySq0EBKm13_f_o 600ms linear infinite normal forwards"
+      }
+    }), /* @__PURE__ */ jsx("circle", {
+      r: 2.053,
+      transform: "matrix(1.21764 0 0 1.21764 8.562 10.002)",
+      fill,
+      style: {
+        animation: "eXySq0EBKm14_f_o 600ms linear infinite normal forwards"
+      }
+    })]
+  });
+};
+const ModalAlertNew = ({
+  type,
+  isOpen,
+  onClose,
+  title,
+  description,
+  buttons,
+  status
+}) => {
+  const [isDesktop] = useMediaQuery("(min-width: 641px)");
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs(Modal$1, {
+      closeOnOverlayClick: false,
+      isOpen,
+      motionPreset: "scale",
+      onClose,
+      closeOnEsc: type !== "loading",
+      children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
+        borderRadius: "8px",
+        p: 0,
+        m: "10vh auto 0",
+        sx: {
+          maxWidth: isDesktop ? "589px" : "343px"
+        },
+        children: [/* @__PURE__ */ jsxs(ModalBody, {
+          p: "32px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          gap: "16px",
+          fontFamily: "Roboto",
+          children: [type === "loading" ? /* @__PURE__ */ jsx(Loading$1, {}) : /* @__PURE__ */ jsx(Box, {
+            display: "flex",
+            justifyContent: "center",
+            children: alertColorStates[status != null ? status : "info"].icon
+          }), title && /* @__PURE__ */ jsx(Box, {
+            as: "p",
+            fontWeight: "700",
+            fontSize: isDesktop ? "20px" : "18px",
+            lineHeight: "24px",
+            children: title
+          }), description && /* @__PURE__ */ jsx(Box, {
+            as: "p",
+            fontSize: "16px",
+            lineHeight: "24px",
+            children: description
+          })]
+        }), type === "info" && (buttons == null ? void 0 : buttons.length) && /* @__PURE__ */ jsx(Box, {
+          display: "flex",
+          borderTop: `1px solid ${vars("colors-neutral-platinum")}`,
+          sx: {
+            button: {
+              borderRight: `1px solid ${vars("colors-neutral-platinum")}`,
+              fontFamily: "Roboto",
+              fontSize: "16px",
+              fontWeight: 500,
+              lineHeight: "21px",
+              p: "16px",
+              textDecor: "none",
+              width: "100%",
+              "&:last-child": {
+                borderRight: "none"
+              }
+            }
+          },
+          children: buttons.map((button, index2) => /* @__PURE__ */ jsx(BtnLink, {
+            as: "button",
+            onClick: () => button.action(),
+            children: button.text
+          }, index2))
+        })]
+      })]
+    })
+  });
+};
 function ModalAlert({
   showModal,
   typeAlert,
@@ -4127,7 +4392,7 @@ function ModalAlert({
     }
   };
   const showBorder = optionsButton.length > 1;
-  return /* @__PURE__ */ jsxs(Modal, {
+  return /* @__PURE__ */ jsxs(Modal$1, {
     id: "modal-alert",
     isOpen: showModal,
     onClose: () => {
@@ -6564,5 +6829,5 @@ const EventsList = ({
     })]
   });
 };
-export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index as Icons, Label, ModalAlert, NavBarButton, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index as Icons, Label, Modal, ModalAlert, ModalAlertNew, NavBarButton, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map