@open-ui-kit/core 2.2.2 → 2.2.3

package/index.umd.js

@@ -8296,10 +8296,11 @@
         padding: "8px 4px 8px 12px",
         width: "800px",
         maxWidth: "100%",
-        height: "40px",
+        height: "auto",
         display: "flex",
+        flexDirection: "row",
+        alignItems: "flex-start",
         justifyContent: "center",
-        alignItems: "center",
         gap: "16px",
         borderRadius: 0,
         border: `1px solid ${getBannerColors(theme, status).border}`,
@@ -8321,15 +8322,12 @@
             padding: 0,
             width: "486px",
             maxWidth: "100%",
-            height: "24px",
-            display: "flex",
-            alignItems: "center",
+            height: "auto",
+            minWidth: 0,
             color: "inherit",
             "& .MuiTypography-root": {
-                display: "flex",
-                alignItems: "center",
                 color: "inherit",
-                height: "24px",
+                height: "auto",
                 letterSpacing: "0.15px",
             },
         },
@@ -12501,31 +12499,13 @@
         }
         return theme.palette.vars.successIconDefault;
     };
-    const getMessageTitleWidth = (type) => {
-        if (type === "warning") {
-            return "317px";
-        }
-        if (type === "info") {
-            return "339px";
-        }
-        return "319px";
-    };
-    const getMessageTitleContentWidth = (type) => {
-        if (type === "warning") {
-            return "249px";
-        }
-        if (type === "info") {
-            return "271px";
-        }
-        return "251px";
-    };
     const getMessageRootStyles = (theme, type, hasTitle, hasAction) => ({
         boxSizing: "border-box",
         display: "flex",
         flexDirection: "row",
         alignItems: hasTitle ? "flex-start" : "center",
-        width: hasAction ? "480px" : hasTitle ? getMessageTitleWidth(type) : "320px",
-        height: hasAction ? "64px" : hasTitle ? "92px" : "48px",
+        width: hasAction ? "480px" : "320px",
+        height: "auto",
         padding: "12px 16px",
         gap: "12px",
         background: theme.palette.vars.baseBackgroundWeak,
@@ -12541,12 +12521,13 @@
         width: "24px",
         height: "24px",
     });
-    const getMessageContentStyles = (type, hasTitle, hasAction) => (Object.assign(Object.assign(Object.assign({ display: "flex", flexDirection: hasTitle ? "column" : "row", alignItems: hasTitle ? "flex-start" : "center", flex: hasTitle ? "0 0 auto" : "1 1 auto", minWidth: 0 }, (hasTitle ? { width: getMessageTitleContentWidth(type) } : {})), { gap: hasTitle ? "4px" : "16px" }), (hasAction ? { paddingRight: "8px" } : {})));
-    const getMessageTitleRowStyles = (type) => ({
+    const getMessageContentStyles = (hasTitle, hasAction) => (Object.assign({ display: "flex", flexDirection: hasTitle ? "column" : "row", alignItems: hasTitle ? "flex-start" : "center", flex: "1 1 auto", minWidth: 0, width: "stretch", gap: hasTitle ? "4px" : "16px" }, (hasAction ? { paddingRight: "8px" } : {})));
+    const getMessageTitleRowStyles = () => ({
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
-        width: getMessageTitleContentWidth(type),
+        flex: "1 1 auto",
+        width: "stretch",
         height: "24px",
         gap: "4px",
     });
@@ -12587,12 +12568,12 @@
         shouldForwardProp: (prop) => prop !== "messageType" && prop !== "hasTitle" && prop !== "hasAction",
     })(({ theme, messageType, hasTitle, hasAction }) => getMessageRootStyles(theme, messageType, hasTitle, hasAction));
     const StyledMessageContent = material.styled(material.Box, {
-        shouldForwardProp: (prop) => prop !== "messageType" && prop !== "hasTitle" && prop !== "hasAction",
-    })(({ messageType, hasTitle, hasAction }) => getMessageContentStyles(messageType, hasTitle, hasAction));
+        shouldForwardProp: (prop) => prop !== "hasTitle" && prop !== "hasAction",
+    })(({ hasTitle, hasAction }) => getMessageContentStyles(hasTitle, hasAction));
     const StyledMessageTitle = material.styled("p")(({ theme }) => getMessageTitleStyles(theme));
     const StyledMessageTitleRow = material.styled(material.Box, {
         shouldForwardProp: (prop) => prop !== "messageType",
-    })(({ messageType }) => getMessageTitleRowStyles(messageType));
+    })(() => getMessageTitleRowStyles());
     const StyledMessageText = material.styled("p")(({ theme }) => getMessageTextStyles(theme));
     const StyledMessageAction = material.styled("button")(({ theme }) => getMessageActionStyles(theme));
     const StyledMessageCloseButton = material.styled(material.IconButton)(({ theme }) => getMessageCloseStyles(theme));
@@ -12615,7 +12596,7 @@
         var { actionLabel, children, hideClose = false, onActionClick, onClose, sx, title, type = "success" } = _a, props = __rest(_a, ["actionLabel", "children", "hideClose", "onActionClick", "onClose", "sx", "title", "type"]);
         const hasTitle = Boolean(title);
         const hasAction = Boolean(actionLabel);
-        return (jsxRuntime.jsxs(StyledMessageRoot, Object.assign({ messageType: type, hasTitle: hasTitle, hasAction: hasAction, role: "status", sx: Array.isArray(sx) ? sx : sx ? [sx] : [] }, props, { children: [jsxRuntime.jsx(MessageIcon, { type: type }), jsxRuntime.jsxs(StyledMessageContent, { messageType: type, hasTitle: hasTitle, hasAction: hasAction, children: [title ? (jsxRuntime.jsxs(StyledMessageTitleRow, { messageType: type, children: [jsxRuntime.jsx(StyledMessageTitle, { children: title }), !hideClose && !hasAction ? (jsxRuntime.jsx(StyledMessageCloseButton, { "aria-label": "Close message", onClick: onClose, children: jsxRuntime.jsx(iconsMaterial.Close, {}) })) : null] })) : null, jsxRuntime.jsx(StyledMessageText, { children: children })] }), actionLabel ? (jsxRuntime.jsx(StyledMessageAction, { type: "button", onClick: onActionClick, children: actionLabel })) : null, !hideClose && (!hasTitle || hasAction) ? (jsxRuntime.jsx(StyledMessageCloseButton, { "aria-label": "Close message", onClick: onClose, children: jsxRuntime.jsx(iconsMaterial.Close, {}) })) : null] })));
+        return (jsxRuntime.jsxs(StyledMessageRoot, Object.assign({ messageType: type, hasTitle: hasTitle, hasAction: hasAction, role: "status", sx: Array.isArray(sx) ? sx : sx ? [sx] : [] }, props, { children: [jsxRuntime.jsx(MessageIcon, { type: type }), jsxRuntime.jsxs(StyledMessageContent, { hasTitle: hasTitle, hasAction: hasAction, children: [title ? (jsxRuntime.jsxs(StyledMessageTitleRow, { messageType: type, children: [jsxRuntime.jsx(StyledMessageTitle, { children: title }), !hideClose && !hasAction ? (jsxRuntime.jsx(StyledMessageCloseButton, { "aria-label": "Close message", onClick: onClose, children: jsxRuntime.jsx(iconsMaterial.Close, {}) })) : null] })) : null, jsxRuntime.jsx(StyledMessageText, { children: children })] }), actionLabel ? (jsxRuntime.jsx(StyledMessageAction, { type: "button", onClick: onActionClick, children: actionLabel })) : null, !hideClose && (!hasTitle || hasAction) ? (jsxRuntime.jsx(StyledMessageCloseButton, { "aria-label": "Close message", onClick: onClose, children: jsxRuntime.jsx(iconsMaterial.Close, {}) })) : null] })));
     };
 
     const getNavigationActiveBackground = (theme) => theme.palette.mode === "dark"