@open-ui-kit/core 2.2.1 → 2.2.3

package/README.md

@@ -3,7 +3,7 @@
 A React component library and theme system built on Material UI, with Open UI Kit defaults for product interfaces.
 
 [![npm](https://img.shields.io/badge/npm-package-CB3837?logo=npm)](https://www.npmjs.com/package/@open-ui-kit/core)
-[![Storybook](https://img.shields.io/badge/storybook-view%20docs-ff69b4)](https://main--68cc22452afe30d90e4ca977.chromatic.com)
+[![Storybook](https://img.shields.io/badge/storybook-view%20docs-ff69b4)](https://open-ui-kit.outshift.ai/storybook/)
 [![License](https://img.shields.io/github/license/outshift-open/open-ui-kit)](../../LICENSE)
 
 ## What you get
@@ -123,7 +123,7 @@ yarn workspace @open-ui-kit/core storybook:build
 
 ## Documentation
 
-- Storybook: https://main--68cc22452afe30d90e4ca977.chromatic.com
+- Storybook: https://open-ui-kit.outshift.ai/storybook/
 - Installation guide: https://github.com/outshift-open/open-ui-kit/blob/main/docs/data/material/getting-started/installation/installation.md
 - Usage guide: https://github.com/outshift-open/open-ui-kit/blob/main/docs/data/material/getting-started/usage/usage.md
 - Theming guide: https://github.com/outshift-open/open-ui-kit/blob/main/docs/data/material/getting-started/theming/theming.md

package/index.cjs.js

@@ -8367,10 +8367,11 @@ const StyledBanner = material.styled(material.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}`,
@@ -8392,15 +8393,12 @@ const StyledBanner = material.styled(material.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",
         },
     },
@@ -12572,31 +12570,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,
@@ -12612,12 +12592,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",
 });
@@ -12658,12 +12639,12 @@ const StyledMessageRoot = material.styled(material.Box, {
     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));
@@ -12686,7 +12667,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 (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"