@eclass/ui-kit 1.57.1 → 1.57.2

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

@@ -6797,6 +6797,7 @@ function Alert({
     p: "1rem",
     pr: canDismiss ? "1.75rem" : "1rem",
     position: "relative",
+    boxShadow: isFlash ? "0px 2px 8px 0px #5C5C5C33" : "",
     sx,
     children: [/* @__PURE__ */ jsxs(Box, {
       display: "flex",
@@ -7269,10 +7270,10 @@ function FlashNotification({
   message,
   state,
   show,
-  m: m2,
-  width
+  m: m2
 }) {
   const [shouldRenderToaster, setShouldRenderToaster] = useState(false);
+  const [isMobile] = useMediaQuery("(max-width: 425px)");
   useEffect(() => {
     if (typeof window !== "undefined" && !window[GLOBAL_TOASTER_FLAG]) {
       window[GLOBAL_TOASTER_FLAG] = true;
@@ -7285,15 +7286,21 @@ function FlashNotification({
       state,
       canDismiss: true,
       onClick: () => n.dismiss(t2.id),
-      width,
-      maxContent: !width,
       m: m2,
+      sx: {
+        w: "initial",
+        maxWidth: "initial",
+        ...isMobile && {
+          margin: "-4px -10px",
+          borderRadius: 0
+        }
+      },
       children: message
     }), {
       duration: state === "success" ? handleTime(message) : Infinity,
       id: alertStates[state].id
     });
-  }, [message, state, width, m2]);
+  }, [message, state, m2]);
   useEffect(() => {
     if (show) {
       showToast();
@@ -7307,13 +7314,24 @@ function FlashNotification({
         style: {
           background: "transparent",
           boxShadow: "none",
-          maxWidth: width != null ? width : "max-content"
+          maxWidth: "100vw",
+          padding: 0,
+          margin: 0
         }
+      },
+      containerStyle: {
+        left: 0,
+        right: 0,
+        ...isMobile && {
+          top: 0
+        },
+        padding: 0,
+        margin: 0
       }
     })
   });
 }
-const useFlashNotification = ({ state, message, width }) => {
+const useFlashNotification = ({ state, message }) => {
   const [show, setShow] = useState(false);
   useEffect(() => {
     if (show) {
@@ -7334,8 +7352,7 @@ const useFlashNotification = ({ state, message, width }) => {
     active,
     config: {
       state,
-      message,
-      width
+      message
     }
   };
 };