xladmin 0.3.3 → 0.3.4

package/dist/index.js

@@ -1061,7 +1061,7 @@ import { createContext as createContext3, useCallback as useCallback2, useContex
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import { Box, Paper, Stack, Typography } from "@mui/material";
+import { Box, Paper, Portal, Stack, Typography } from "@mui/material";
 import { alpha, useTheme } from "@mui/material/styles";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var DEFAULT_DURATION_MS = 3e3;
@@ -1144,7 +1144,7 @@ function AdminMessageViewport({
   items,
   onDismiss
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx4(Portal, { children: /* @__PURE__ */ jsx4(
     Box,
     {
       "aria-live": "polite",
@@ -1152,14 +1152,14 @@ function AdminMessageViewport({
         position: "fixed",
         top: { xs: 12, sm: 16 },
         right: { xs: 12, sm: 16 },
-        zIndex: (theme) => theme.zIndex.snackbar,
+        zIndex: (theme) => theme.zIndex.modal + 40,
         width: { xs: "calc(100vw - 24px)", sm: 360 },
         maxWidth: "100%",
         pointerEvents: "none"
       },
       children: /* @__PURE__ */ jsx4(Stack, { spacing: 1, children: items.map((item) => /* @__PURE__ */ jsx4(AdminMessageBubble, { item, onDismiss }, item.id)) })
     }
-  );
+  ) });
 }
 function AdminMessageBubble({
   item,
@@ -1177,9 +1177,9 @@ function AdminMessageBubble({
       sx: {
         pointerEvents: "auto",
         cursor: "pointer",
-        borderRadius: "14px",
+        borderRadius: "11px",
         px: 1.5,
-        py: 1.25,
+        py: 1.125,
         border: `1px solid ${appearance.borderColor}`,
         backgroundColor: appearance.backgroundColor,
         boxShadow: `0 14px 32px ${alpha("#000000", 0.22)}`,
@@ -1198,14 +1198,13 @@ function AdminMessageBubble({
           }
         }
       },
-      children: /* @__PURE__ */ jsxs2(Stack, { direction: "row", spacing: 1.25, alignItems: "flex-start", children: [
+      children: /* @__PURE__ */ jsxs2(Stack, { direction: "row", spacing: 1.125, alignItems: "center", children: [
         /* @__PURE__ */ jsx4(
           Box,
           {
             sx: {
-              width: 28,
-              height: 28,
-              mt: 0.125,
+              width: 26,
+              height: 26,
               borderRadius: "999px",
               display: "flex",
               alignItems: "center",
@@ -1222,10 +1221,14 @@ function AdminMessageBubble({
           {
             sx: {
               fontSize: 14,
-              lineHeight: 1.45,
+              lineHeight: 1.35,
               fontWeight: 500,
               color: "text.primary",
-              wordBreak: "break-word"
+              wordBreak: "break-word",
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              minHeight: 26
             },
             children: item.text
           }
@@ -1238,27 +1241,27 @@ function getBubbleAppearance(theme, kind) {
   if (kind === "success") {
     return {
       icon: CheckCircleOutlineIcon,
-      borderColor: alpha(theme.palette.success.main, 0.35),
-      backgroundColor: alpha(theme.palette.success.main, 0.12),
-      iconColor: theme.palette.success.light,
-      iconBackgroundColor: alpha(theme.palette.success.main, 0.16)
+      borderColor: alpha(theme.palette.success.main, 0.5),
+      backgroundColor: alpha(theme.palette.success.main, 0.18),
+      iconColor: theme.palette.success.main,
+      iconBackgroundColor: alpha(theme.palette.success.main, 0.24)
     };
   }
   if (kind === "error") {
     return {
       icon: ErrorOutlineIcon,
-      borderColor: alpha(theme.palette.error.main, 0.35),
-      backgroundColor: alpha(theme.palette.error.main, 0.12),
-      iconColor: theme.palette.error.light,
-      iconBackgroundColor: alpha(theme.palette.error.main, 0.16)
+      borderColor: alpha(theme.palette.error.main, 0.42),
+      backgroundColor: alpha(theme.palette.error.main, 0.14),
+      iconColor: theme.palette.error.main,
+      iconBackgroundColor: alpha(theme.palette.error.main, 0.18)
     };
   }
   return {
     icon: InfoOutlinedIcon,
-    borderColor: alpha(theme.palette.info.main, 0.35),
-    backgroundColor: alpha(theme.palette.info.main, 0.12),
-    iconColor: theme.palette.info.light,
-    iconBackgroundColor: alpha(theme.palette.info.main, 0.16)
+    borderColor: alpha(theme.palette.info.main, 0.42),
+    backgroundColor: alpha(theme.palette.info.main, 0.14),
+    iconColor: theme.palette.info.main,
+    iconBackgroundColor: alpha(theme.palette.info.main, 0.18)
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xladmin",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Framework-agnostic React + MUI admin frontend for xladmin.",
   "license": "MIT",
   "type": "module",