@mitodl/smoot-design 3.4.0 → 3.5.0

package/dist/esm/components/Alert/Alert.stories.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Alert } from "./Alert";
+import Stack from "@mui/material/Stack";
+const meta = {
+    title: "smoot-design/Alert",
+    component: Alert,
+};
+export default meta;
+export const Basic = {
+    args: {
+        severity: "info",
+    },
+    render: (args) => (React.createElement(Alert, Object.assign({}, args),
+        "Alert with severity \"",
+        args.severity,
+        "\"")),
+};
+export const Closable = {
+    args: {
+        severity: "warning",
+        closable: true,
+    },
+    render: (args) => (React.createElement(Alert, Object.assign({}, args),
+        "Closable alert with severity \"",
+        args.severity,
+        "\"")),
+};
+export const Variants = {
+    argTypes: {
+        severity: {
+            table: {
+                disable: true,
+            },
+        },
+        closable: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    render: (args) => (React.createElement(Stack, { direction: "column", gap: 2, sx: { my: 2 } },
+        React.createElement(Alert, Object.assign({}, args, { severity: "info" }), "Alert with severity \"info\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "info" }), "Closable alert with severity \"info\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "success" }), "Alert with severity \"success\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "success" }), "Closable alert with severity \"success\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "warning" }), "Alert with severity \"warning\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "warning" }), "Closable alert with severity \"warning\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "error" }), "Alert with severity \"error\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "error" }), "Closable alert with severity \"error\""))),
+};

package/dist/esm/components/Input/Input.js

@@ -22,7 +22,7 @@ const responsiveSize = {
     small: "small",
     medium: "small",
     large: "medium",
-    chat: "medium",
+    chat: "chat",
     hero: "large",
 };
 const sizeStyles = ({ size, theme, multiline }) => css([
@@ -84,12 +84,14 @@ const sizeStyles = ({ size, theme, multiline }) => css([
     size === "chat" && {
         padding: "0 16px",
         borderRadius: "8px",
-        "&:hover:not(.Mui-disabled):not(.Mui-focused)": {
-            borderColor: theme.custom.colors.silverGrayLight,
-        },
-        "&.Mui-focused": {
-            borderColor: theme.custom.colors.silverGrayLight,
+        borderColor: theme.custom.colors.silverGrayLight,
+        "&:hover:not(.Mui-disabled), &.Mui-focused, :hover:not(.Mui-disabled):not(.Mui-focused)": {
+            boxShadow: "0px 8px 20px 0px rgba(120, 147, 172, 0.10)",
+            borderColor: theme.custom.colors.silverGray,
             outline: "none",
+            svg: {
+                fill: theme.custom.colors.lightRed,
+            },
         },
         ".Mit-AdornmentButton": {
             padding: "0 16px",