@open-ui-kit/core 2.2.2 → 2.2.3

package/index.esm.js

@@ -8322,10 +8322,11 @@ const StyledBanner = styled(Alert, {
     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}`,
@@ -8347,15 +8348,12 @@ const StyledBanner = styled(Alert, {
         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",
         },
     },
@@ -12527,31 +12525,13 @@ const getMessageIconColor = (theme, type) => {
     }
     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,
@@ -12567,12 +12547,13 @@ const getMessageIconStyles = (theme, type) => ({
     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",
 });
@@ -12613,12 +12594,12 @@ const StyledMessageRoot = styled(Box, {
     shouldForwardProp: (prop) => prop !== "messageType" && prop !== "hasTitle" && prop !== "hasAction",
 })(({ theme, messageType, hasTitle, hasAction }) => getMessageRootStyles(theme, messageType, hasTitle, hasAction));
 const StyledMessageContent = styled(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 = styled("p")(({ theme }) => getMessageTitleStyles(theme));
 const StyledMessageTitleRow = styled(Box, {
     shouldForwardProp: (prop) => prop !== "messageType",
-})(({ messageType }) => getMessageTitleRowStyles(messageType));
+})(() => getMessageTitleRowStyles());
 const StyledMessageText = styled("p")(({ theme }) => getMessageTextStyles(theme));
 const StyledMessageAction = styled("button")(({ theme }) => getMessageActionStyles(theme));
 const StyledMessageCloseButton = styled(IconButton)(({ theme }) => getMessageCloseStyles(theme));
@@ -12641,7 +12622,7 @@ const Message = (_a) => {
     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 (jsxs(StyledMessageRoot, Object.assign({ messageType: type, hasTitle: hasTitle, hasAction: hasAction, role: "status", sx: Array.isArray(sx) ? sx : sx ? [sx] : [] }, props, { children: [jsx(MessageIcon, { type: type }), jsxs(StyledMessageContent, { messageType: type, hasTitle: hasTitle, hasAction: hasAction, children: [title ? (jsxs(StyledMessageTitleRow, { messageType: type, children: [jsx(StyledMessageTitle, { children: title }), !hideClose && !hasAction ? (jsx(StyledMessageCloseButton, { "aria-label": "Close message", onClick: onClose, children: jsx(Close$1, {}) })) : null] })) : null, jsx(StyledMessageText, { children: children })] }), actionLabel ? (jsx(StyledMessageAction, { type: "button", onClick: onActionClick, children: actionLabel })) : null, !hideClose && (!hasTitle || hasAction) ? (jsx(StyledMessageCloseButton, { "aria-label": "Close message", onClick: onClose, children: jsx(Close$1, {}) })) : null] })));
+    return (jsxs(StyledMessageRoot, Object.assign({ messageType: type, hasTitle: hasTitle, hasAction: hasAction, role: "status", sx: Array.isArray(sx) ? sx : sx ? [sx] : [] }, props, { children: [jsx(MessageIcon, { type: type }), jsxs(StyledMessageContent, { hasTitle: hasTitle, hasAction: hasAction, children: [title ? (jsxs(StyledMessageTitleRow, { messageType: type, children: [jsx(StyledMessageTitle, { children: title }), !hideClose && !hasAction ? (jsx(StyledMessageCloseButton, { "aria-label": "Close message", onClick: onClose, children: jsx(Close$1, {}) })) : null] })) : null, jsx(StyledMessageText, { children: children })] }), actionLabel ? (jsx(StyledMessageAction, { type: "button", onClick: onActionClick, children: actionLabel })) : null, !hideClose && (!hasTitle || hasAction) ? (jsx(StyledMessageCloseButton, { "aria-label": "Close message", onClick: onClose, children: jsx(Close$1, {}) })) : null] })));
 };
 
 const getNavigationActiveBackground = (theme) => theme.palette.mode === "dark"