@vention/machine-ui 6.0.3 → 6.0.5

package/index.esm.js

@@ -4771,6 +4771,7 @@ const useStyles$L = tss.withParams().create(({
 const getDefaultProps = (severity, setVisible) => {
   return {
     size: "medium",
+    appearance: "subtle",
     leftIcon: getAlertIcon(severity),
     onCloseButtonClick: () => setVisible(false)
   };
@@ -4870,24 +4871,25 @@ function getRootMaxWidth(isSingleLine, isFullWidth) {
   if (isSingleLine) return "inherit";
   return "560px";
 }
+function getLeftIconMarginRight(size, appearance) {
+  if (appearance === "elevated") return "16px";
+  return size === "small" ? "8px" : "12px";
+}
 const useStyles$K = tss.withParams().create(({
   isSingleLine,
   severity,
   size,
   isFullWidth,
+  appearance,
   theme,
   hasControlProps
 }) => {
   const {
-    backgroundColor,
-    borderColor,
     iconColor
   } = getAlertColors(severity, theme);
   const textSize = getFontSize$1(size);
   return {
-    root: {
-      backgroundColor: backgroundColor,
-      border: `${size === "large" ? 2 : 1}px solid var(--Border-Default-border-default, ${borderColor})`,
+    root: Object.assign(Object.assign({}, getSurfaceStyles(appearance, severity, size, theme)), {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -4899,12 +4901,11 @@ const useStyles$K = tss.withParams().create(({
       width: isFullWidth ? "100%" : "fit-content",
       minWidth: "inherit",
       maxWidth: getRootMaxWidth(isSingleLine, isFullWidth),
-      borderRadius: "4px",
       padding: getAlertPadding({
         isSingleLine,
         size
       })
-    },
+    }),
     alertGridContainer: {
       flexWrap: "nowrap",
       lineHeight: "0px",
@@ -4957,7 +4958,7 @@ const useStyles$K = tss.withParams().create(({
       item: true,
       size: size === "small" ? 16 : 24,
       width: "fit-content",
-      marginRight: size === "small" ? "8px" : "12px",
+      marginRight: getLeftIconMarginRight(size, appearance),
       alignSelf: isSingleLine ? "center" : "normal"
     },
     rightIcon: {
@@ -4986,6 +4987,25 @@ const getRootHeight = alertProps => {
   };
   return heights[alertProps.size];
 };
+const getSurfaceStyles = (appearance, severity, size, theme) => {
+  if (appearance === "elevated") {
+    return {
+      backgroundColor: theme.palette.background.surface1,
+      border: `1px solid ${theme.palette.border.default}`,
+      borderRadius: "8px",
+      boxShadow: theme.shadows[4]
+    };
+  }
+  const {
+    backgroundColor,
+    borderColor
+  } = getAlertColors(severity, theme);
+  return {
+    backgroundColor,
+    border: `${size === "large" ? 2 : 1}px solid var(--Border-Default-border-default, ${borderColor})`,
+    borderRadius: "4px"
+  };
+};
 const getAlertColors = (severity, theme) => {
   switch (severity) {
     case "warn":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "6.0.3",
+  "version": "6.0.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/lib/components/vention-alert/vention-alert-utils.d.ts

@@ -18,5 +18,6 @@ export interface VentionAlertProps {
     isCloseable?: boolean;
     isSingleLine?: boolean;
     isFullWidth?: boolean;
+    appearance?: "subtle" | "elevated";
 }
 export declare function getGapSpaceForContent(isSingleLine: boolean, size: VentionAlertProps["size"]): "0px" | "12px" | "8px";