@mitodl/smoot-design 3.4.0 → 3.5.0

package/dist/cjs/bundles/RemoteAiChatDrawer/RemoteAiChatDrawer.stories.js

@@ -5,6 +5,7 @@ exports.StreamingResponses = void 0;
 const React = require("react");
 const RemoteAiChatDrawer_1 = require("./RemoteAiChatDrawer");
 const tiny_invariant_1 = require("tiny-invariant");
+const api_1 = require("../../components/AiChat/test-utils/api");
 const TEST_API_STREAMING = "http://localhost:4567/streaming";
 const INITIAL_MESSAGES = [
     {
@@ -58,6 +59,11 @@ const meta = {
                 }, title: "button frame" }),
             React.createElement(RemoteAiChatDrawer_1.AiChatDrawer, { messageOrigin: "http://localhost:6006" })));
     },
+    parameters: {
+        msw: {
+            handlers: api_1.handlers,
+        },
+    },
 };
 exports.default = meta;
 exports.StreamingResponses = {};

package/dist/cjs/components/AiChat/AiChat.js

@@ -24,6 +24,7 @@ const classnames_1 = require("classnames");
 const SrAnnouncer_1 = require("../SrAnnouncer/SrAnnouncer");
 const VisuallyHidden_1 = require("../VisuallyHidden/VisuallyHidden");
 const Typography_1 = require("@mui/material/Typography");
+const Alert_1 = require("../Alert/Alert");
 const classes = {
     root: "MitAiChat--root",
     title: "MitAiChat--title",
@@ -34,6 +35,7 @@ const classes = {
     messageRowAssistant: "MitAiChat--messageRowAssistant",
     message: "MitAiChat--message",
     input: "MitAiChat--input",
+    bottomSection: "MitAiChat--bottomSection",
 };
 const ChatContainer = styled_1.default.div({
     width: "100%",
@@ -66,10 +68,9 @@ const MessagesContainer = (0, styled_1.default)(ScrollSnap_1.ScrollSnap)({
     display: "flex",
     flexDirection: "column",
     flex: 1,
-    paddingTop: "14px",
-    paddingBottom: "24px",
+    padding: "14px 0",
     overflow: "auto",
-    gap: "24px",
+    gap: "16px",
 });
 const MessageRow = styled_1.default.div({
     display: "flex",
@@ -87,16 +88,18 @@ const Message = styled_1.default.div(({ theme }) => (Object.assign(Object.assign
         marginTop: 0,
     }, "p:last-of-type": {
         marginBottom: 0,
+    }, "ol, ul": {
+        paddingInlineStart: "32px",
+        li: {
+            margin: "16px 0",
+        },
+    }, ul: {
+        marginInlineStart: "-16px",
     }, a: {
         color: theme.custom.colors.red,
         fontWeight: "normal",
     }, borderRadius: "12px", [`.${classes.messageRowAssistant} &`]: {
-        border: `1px solid ${theme.custom.colors.lightGray2}`,
-        borderRadius: "0px 8px 8px 8px",
-        svg: {
-            fill: theme.custom.colors.silverGrayDark,
-            display: "block",
-        },
+        padding: "12px 16px 12px 0",
     }, [`.${classes.messageRowUser} &`]: {
         borderRadius: "8px 0px 8px 8px",
         backgroundColor: theme.custom.colors.lightGray1,
@@ -117,20 +120,18 @@ const RobotIcon = (0, styled_1.default)(react_1.RiRobot2Line)({
     width: "40px",
     height: "40px",
 });
-const StyledInput = (0, styled_1.default)(Input_1.Input)(({ theme }) => ({
-    backgroundColor: theme.custom.colors.lightGray1,
-    borderRadius: "8px",
-    border: `1px solid ${theme.custom.colors.lightGray2}`,
-}));
 const StyledSendButton = (0, styled_1.default)(react_1.RiSendPlaneFill)(({ theme }) => ({
     fill: theme.custom.colors.red,
 }));
 const StyledStopButton = (0, styled_1.default)(react_1.RiStopFill)(({ theme }) => ({
     fill: theme.custom.colors.red,
 }));
+const BottomSection = styled_1.default.div({
+    paddingTop: "12px",
+});
 const Disclaimer = (0, styled_1.default)(Typography_1.default)(({ theme }) => ({
     color: theme.custom.colors.silverGrayDark,
-    marginTop: "16px",
+    marginTop: "14px",
     textAlign: "center",
 }));
 const ChatTitle = (0, styled_1.default)(({ title, askTimTitle, onClose, className }) => {
@@ -165,7 +166,7 @@ const AiChatInternal = function AiChat(_a) {
         const prefix = Math.random().toString().slice(2);
         return initMsgs.map((m, i) => (Object.assign(Object.assign({}, m), { id: `initial-${prefix}-${i}` })));
     }, [initMsgs]);
-    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, stop, } = (0, utils_1.useAiChat)(requestOpts, {
+    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, stop, error, } = (0, utils_1.useAiChat)(requestOpts, {
         initialMessages: initialMessages,
         id: chatId,
     });
@@ -181,7 +182,7 @@ const AiChatInternal = function AiChat(_a) {
         });
     }, [parseContent, unparsed, initialMessages]);
     const showStarters = messages.length === initialMessages.length;
-    const waiting = !showStarters && ((_b = messages[messages.length - 1]) === null || _b === void 0 ? void 0 : _b.role) === "user";
+    const waiting = !showStarters && !error && ((_b = messages[messages.length - 1]) === null || _b === void 0 ? void 0 : _b.role) === "user";
     const stoppable = isLoading && ((_c = messages[messages.length - 1]) === null || _c === void 0 ? void 0 : _c.role) !== "user";
     const scrollToBottom = () => {
         var _a;
@@ -207,24 +208,26 @@ const AiChatInternal = function AiChat(_a) {
                 } }, m.content))))) : null,
             waiting ? (React.createElement(MessageRow, { className: (0, classnames_1.default)(classes.messageRow, classes.messageRowAssistant), key: "loading" },
                 React.createElement(Message, null,
-                    React.createElement(react_1.RiMoreFill, null)))) : null),
-        React.createElement("form", { onSubmit: (e) => {
-                e.preventDefault();
-                if (isLoading && stoppable) {
-                    stop();
-                }
-                else {
-                    scrollToBottom();
-                    handleSubmit(e);
-                }
-            } },
-            React.createElement(StyledInput, { fullWidth: true, size: "chat", className: classes.input, placeholder: placeholder, name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange, endAdornment: isLoading ? (React.createElement(Input_1.AdornmentButton, { "aria-label": "Stop", onClick: stop, disabled: !stoppable },
-                    React.createElement(StyledStopButton, null))) : (React.createElement(Input_1.AdornmentButton, { "aria-label": "Send", type: "submit", disabled: !input, onClick: (e) => {
+                    React.createElement(react_1.RiMoreFill, null)))) : null,
+            error ? (React.createElement(Alert_1.Alert, { severity: "error", closable: true }, "An unexpected error has occurred.")) : null),
+        React.createElement(BottomSection, { className: classes.bottomSection },
+            React.createElement("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    if (isLoading && stoppable) {
+                        stop();
+                    }
+                    else {
                         scrollToBottom();
                         handleSubmit(e);
-                    } },
-                    React.createElement(StyledSendButton, null))) })),
-        React.createElement(Disclaimer, { variant: "body3" }, "AI-generated content may be incorrect."),
+                    }
+                } },
+                React.createElement(Input_1.Input, { fullWidth: true, size: "chat", className: classes.input, placeholder: placeholder, name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange, endAdornment: isLoading ? (React.createElement(Input_1.AdornmentButton, { "aria-label": "Stop", onClick: stop, disabled: !stoppable },
+                        React.createElement(StyledStopButton, null))) : (React.createElement(Input_1.AdornmentButton, { "aria-label": "Send", type: "submit", onClick: (e) => {
+                            scrollToBottom();
+                            handleSubmit(e);
+                        } },
+                        React.createElement(StyledSendButton, null))) })),
+            React.createElement(Disclaimer, { variant: "body3" }, "AI-generated content may be incorrect.")),
         React.createElement(SrAnnouncer_1.SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: lastMsg.role === "assistant" ? lastMsg.content : "" })));
 };
 const AiChat = (props) => (

package/dist/cjs/components/AiChat/AiChat.stories.d.ts

@@ -9,3 +9,7 @@ export declare const StreamingResponses: Story;
  * to text via `parseContent`.
  */
 export declare const JsonResponses: Story;
+/**
+ * This story shows the component's builtin markdown styling.
+ */
+export declare const MarkdownStyling: Story;

package/dist/cjs/components/AiChat/AiChat.stories.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JsonResponses = exports.StreamingResponses = void 0;
+exports.MarkdownStyling = exports.JsonResponses = exports.StreamingResponses = void 0;
 const React = require("react");
 const AiChat_1 = require("./AiChat");
-const story_utils_1 = require("./story-utils");
 const styled_1 = require("@emotion/styled");
 const test_1 = require("@storybook/test");
+const api_1 = require("./test-utils/api");
 const TEST_API_STREAMING = "http://localhost:4567/streaming";
 const TEST_API_JSON = "http://localhost:4567/json";
 const INITIAL_MESSAGES = [
@@ -34,6 +34,9 @@ const Container = styled_1.default.div({
 const meta = {
     title: "smoot-design/AI/AiChat",
     component: AiChat_1.AiChat,
+    parameters: {
+        msw: { handlers: api_1.handlers },
+    },
     render: (args) => React.createElement(AiChat_1.AiChat, Object.assign({}, args)),
     decorators: (Story) => {
         return (React.createElement(Container, null,
@@ -58,18 +61,6 @@ const meta = {
             table: { readonly: true }, // See above
         },
     },
-    beforeEach: () => {
-        const originalFetch = window.fetch;
-        window.fetch = (url, opts) => {
-            if (url === TEST_API_STREAMING) {
-                return (0, story_utils_1.mockStreaming)();
-            }
-            else if (url === TEST_API_JSON) {
-                return (0, story_utils_1.mockJson)();
-            }
-            return originalFetch(url, opts);
-        };
-    },
 };
 exports.default = meta;
 exports.StreamingResponses = {};
@@ -86,3 +77,38 @@ exports.JsonResponses = {
         },
     },
 };
+const DEMO_MARKDOWN = `This shows default markdown styling. Here's a list:
+- Item 1 lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+- Item 2
+- Item 3
+    - Item 3.1
+    - Item 3.2
+- Item 4
+    1. Item 4.1
+    2. Item 4.2
+    3. Item 4.3
+
+Here is a longer paragraph and **bold text** and *italic text*. Lorem ipsum dolor sit amet, consectetur adipiscing elit
+sed do eiusmod tempor [incididunt](https://mit.edu) ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+
+And some inline code, \`\`<inline></inline>\`\` and code block:
+\`\`\`
+def f(x):
+    print(x)
+\`\`\`
+`;
+/**
+ * This story shows the component's builtin markdown styling.
+ */
+exports.MarkdownStyling = {
+    args: {
+        title: "Markdown Styles",
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        initialMessages: [
+            {
+                role: "assistant",
+                content: DEMO_MARKDOWN,
+            },
+        ],
+    },
+};

package/dist/cjs/components/AiChat/AiChat.test.js

@@ -17,17 +17,18 @@ const AiChat_1 = require("./AiChat");
 const ThemeProvider_1 = require("../ThemeProvider/ThemeProvider");
 const React = require("react");
 const en_1 = require("@faker-js/faker/locale/en");
+const msw_1 = require("msw");
+const node_1 = require("msw/node");
 const counter = jest.fn(); // use jest.fn as counter because it resets on each test
-const mockFetch = jest.mocked(jest.fn(() => {
+const API_URL = "http://localhost:4567/test";
+const server = (0, node_1.setupServer)(msw_1.http.post(API_URL, () => __awaiter(void 0, void 0, void 0, function* () {
     const count = counter.mock.calls.length;
     counter();
-    return Promise.resolve(new Response(`AI Response ${count}`, {
-        headers: {
-            "Content-Type": "application/json",
-        },
-    }));
-}));
-window.fetch = mockFetch;
+    return msw_1.HttpResponse.text(`AI Response ${count}`);
+})));
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
 jest.mock("react-markdown", () => {
     return {
         __esModule: true,
@@ -60,9 +61,9 @@ describe("AiChat", () => {
             { content: en_1.faker.lorem.sentence() },
             { content: en_1.faker.lorem.sentence() },
         ];
-        const view = (0, react_1.render)(React.createElement(AiChat_1.AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" }, placeholder: "Type a message..." }, props)), { wrapper: ThemeProvider_1.ThemeProvider });
+        const view = (0, react_1.render)(React.createElement(AiChat_1.AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: API_URL }, placeholder: "Type a message..." }, props)), { wrapper: ThemeProvider_1.ThemeProvider });
         const rerender = (newProps) => {
-            view.rerender(React.createElement(AiChat_1.AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, newProps)));
+            view.rerender(React.createElement(AiChat_1.AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: API_URL } }, newProps)));
         };
         return { initialMessages, conversationStarters, rerender };
     };
@@ -108,11 +109,11 @@ describe("AiChat", () => {
         yield whenCount(getMessages, 3);
     }));
     test("transformBody is called before sending requests", () => __awaiter(void 0, void 0, void 0, function* () {
+        const mockFetch = jest.spyOn(window, "fetch");
         const fakeBody = { message: en_1.faker.lorem.sentence() };
-        const apiUrl = en_1.faker.internet.url();
         const transformBody = jest.fn(() => fakeBody);
         const { initialMessages } = setup({
-            requestOpts: { apiUrl, transformBody },
+            requestOpts: { apiUrl: API_URL, transformBody },
         });
         yield user_event_1.default.click(react_1.screen.getByPlaceholderText("Type a message..."));
         yield user_event_1.default.paste("User message");
@@ -122,16 +123,15 @@ describe("AiChat", () => {
             expect.objectContaining({ content: "User message", role: "user" }),
         ]);
         expect(mockFetch).toHaveBeenCalledTimes(1);
-        expect(mockFetch).toHaveBeenCalledWith(apiUrl, expect.objectContaining({
+        expect(mockFetch).toHaveBeenCalledWith(API_URL, expect.objectContaining({
             body: JSON.stringify(fakeBody),
         }));
     }));
     test("parseContent is called on the API-received message content", () => __awaiter(void 0, void 0, void 0, function* () {
         const fakeBody = { message: en_1.faker.lorem.sentence() };
-        const apiUrl = en_1.faker.internet.url();
         const transformBody = jest.fn(() => fakeBody);
         const { initialMessages, conversationStarters } = setup({
-            requestOpts: { apiUrl, transformBody },
+            requestOpts: { apiUrl: API_URL, transformBody },
             parseContent: jest.fn((content) => `Parsed: ${content}`),
         });
         yield user_event_1.default.click(getConversationStarters()[0]);
@@ -151,12 +151,20 @@ describe("AiChat", () => {
     }));
     test("Passes extra attributes to root", () => {
         const fakeBody = { message: en_1.faker.lorem.sentence() };
-        const apiUrl = en_1.faker.internet.url();
         const transformBody = jest.fn(() => fakeBody);
         setup({
-            requestOpts: { apiUrl, transformBody },
+            requestOpts: { apiUrl: API_URL, transformBody },
             parseContent: jest.fn((content) => `Parsed: ${content}`),
         });
         expect(react_1.screen.getByTestId("ai-chat")).toBeInTheDocument();
     });
+    test("If the API returns an error, an alert is shown", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup();
+        server.use(msw_1.http.post(API_URL, () => __awaiter(void 0, void 0, void 0, function* () {
+            return new msw_1.HttpResponse(null, { status: 500 });
+        })));
+        yield user_event_1.default.click(getConversationStarters()[0]);
+        const alert = yield react_1.screen.findByRole("alert");
+        expect(alert).toHaveTextContent("An unexpected error has occurred");
+    }));
 });

package/dist/cjs/components/AiChat/test-utils/api.d.ts

@@ -0,0 +1,2 @@
+declare const handlers: import("msw").HttpHandler[];
+export { handlers };

package/dist/{esm/components/AiChat/story-utils.js → cjs/components/AiChat/test-utils/api.js}

@@ -1,3 +1,4 @@
+"use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,6 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handlers = void 0;
+const msw_1 = require("msw");
 const SAMPLE_RESPONSES = [
     `For exploring AI applications in business, I recommend the following course from MIT:
 
@@ -37,63 +41,85 @@ Here are some courses on linear algebra that you can explore:
 These courses provide a comprehensive introduction to linear algebra and its applications across various fields.
 <!-- Comment! -->
 `,
+    `Here are some courses on quantum computing that offer certificates:
+
+1. [Introduction to Quantum Computing](https://xpro.mit.edu/courses/course-v1:xPRO+QCFx1/)
+   - **Description**: This is the first course in the Quantum Computing Fundamentals professional certificate program. You can earn a Professional Certificate and CEUs by completing both courses in the program. Alternatively, you can take this course individually for a certificate of completion and CEUs.
+   - **Offered by**: MIT xPRO
+   - **Instructors**: Isaac Chuang, William Oliver, Peter Shor, Aram Harrow
+
+2. [Practical Realities of Quantum Computation and Quantum Communication](https://xpro.mit.edu/courses/course-v1:xPRO+QCRx1/)
+   - **Description**: This course is part of the Quantum Computing Realities professional certificate program. Completing both courses in the program will earn you a Professional Certificate and CEUs. You can also take this course individually for a certificate of completion and CEUs.
+   - **Offered by**: MIT xPRO
+   - **Instructors**: Isaac Chuang, William Oliver, Peter Shor, Aram Harrow
+
+These courses are part of professional certificate programs, and you can choose to complete the entire program or take individual courses for certification.`,
 ];
 const rand = (min, max) => {
     // min and max included
     return Math.floor(Math.random() * (max - min + 1) + min);
 };
-const mockStreaming = function mockApi() {
-    return __awaiter(this, void 0, void 0, function* () {
-        let timerId;
-        const response = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
-        const chunks = response.split(" ").reduce((acc, word) => {
-            const last = acc[acc.length - 1];
-            if (acc.length === 0) {
-                acc.push(word);
-            }
-            else if (Math.random() < 0.75) {
-                acc[acc.length - 1] = `${last} ${word}`;
-            }
-            else {
-                acc.push(` ${word}`);
-            }
-            return acc;
-        }, []);
-        const num = chunks.length;
-        let i = 0;
-        yield new Promise((resolve) => setTimeout(resolve, 800));
-        const body = new ReadableStream({
-            start(controller) {
-                timerId = setInterval(() => {
-                    const msg = new TextEncoder().encode(chunks[i]);
-                    controller.enqueue(msg);
-                    i++;
-                    if (i === num) {
-                        controller.close();
-                        clearInterval(timerId);
-                    }
-                }, 100);
-            },
-            cancel() {
-                if (timerId) {
+const getReadableStream = () => {
+    let timerId;
+    const response = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
+    const chunks = response.split(" ").reduce((acc, word) => {
+        const last = acc[acc.length - 1];
+        if (acc.length === 0) {
+            acc.push(word);
+        }
+        else if (Math.random() < 0.75) {
+            acc[acc.length - 1] = `${last} ${word}`;
+        }
+        else {
+            acc.push(` ${word}`);
+        }
+        return acc;
+    }, []);
+    const num = chunks.length;
+    let i = 0;
+    return new ReadableStream({
+        start(controller) {
+            timerId = setInterval(() => {
+                const msg = new TextEncoder().encode(chunks[i]);
+                controller.enqueue(msg);
+                i++;
+                if (i === num) {
+                    controller.close();
                     clearInterval(timerId);
                 }
-            },
-        });
-        return Promise.resolve(new Response(body, {
-            headers: {
-                "Content-Type": "text/event-stream",
-            },
-        }));
+            }, 100);
+        },
+        cancel() {
+            if (timerId) {
+                clearInterval(timerId);
+            }
+        },
     });
 };
-const mockJson = () => __awaiter(void 0, void 0, void 0, function* () {
-    const message = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
-    yield new Promise((res) => setTimeout(res, 1000));
-    return Promise.resolve(new Response(JSON.stringify({ message }), {
-        headers: {
-            "Content-Type": "application/json",
-        },
-    }));
-});
-export { mockStreaming, mockJson };
+const handlers = [
+    msw_1.http.post("http://localhost:4567/streaming", (_a) => __awaiter(void 0, [_a], void 0, function* ({ request }) {
+        yield (0, msw_1.delay)(600);
+        const body = getReadableStream();
+        const requestBody = yield request.json();
+        if (Array.isArray(requestBody)) {
+            const last = requestBody[requestBody.length - 1];
+            const { content } = last;
+            if (content === "error") {
+                return new msw_1.HttpResponse("Internal Server Error", {
+                    status: 500,
+                });
+            }
+        }
+        return new msw_1.HttpResponse(body, {
+            headers: {
+                "Content-Type": "text/plain",
+            },
+        });
+    })),
+    msw_1.http.post("http://localhost:4567/json", () => __awaiter(void 0, void 0, void 0, function* () {
+        const message = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
+        yield (0, msw_1.delay)(800);
+        return msw_1.HttpResponse.json({ message });
+    })),
+];
+exports.handlers = handlers;

package/dist/cjs/components/Alert/Alert.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { AlertColor } from "@mui/material/Alert";
+type AlertProps = {
+    visible?: boolean;
+    closable?: boolean;
+    className?: string;
+    severity?: AlertColor;
+    /**
+     * Alert Content
+     */
+    children?: React.ReactNode;
+};
+declare const Alert: React.FC<AlertProps>;
+export { Alert };
+export type { AlertProps };

package/dist/cjs/components/Alert/Alert.js

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+const React = require("react");
+const styled_1 = require("@emotion/styled");
+const Alert_1 = require("@mui/material/Alert");
+const getColor = (theme, severity) => {
+    return {
+        info: theme.custom.colors.blue,
+        success: theme.custom.colors.green,
+        warning: theme.custom.colors.orange,
+        error: theme.custom.colors.lightRed,
+    }[severity];
+};
+const AlertStyled = (0, styled_1.default)(Alert_1.default)(({ theme, severity }) => ({
+    padding: "11px 16px",
+    borderRadius: 4,
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: getColor(theme, severity),
+    background: "#FFF",
+    ".MuiAlert-message": Object.assign(Object.assign({}, theme.typography.body2), { color: theme.custom.colors.darkGray2, alignSelf: "center" }),
+    "> div": {
+        paddingTop: 0,
+        paddingBottom: 0,
+    },
+    ".MuiAlert-icon": {
+        marginRight: 8,
+        svg: {
+            width: 16,
+            fill: getColor(theme, severity),
+        },
+    },
+    button: {
+        padding: 0,
+        ":hover": {
+            margin: 0,
+            background: "none",
+        },
+    },
+}));
+const Hidden = styled_1.default.span({ display: "none" });
+const Alert = ({ visible = true, severity = "info", closable, children, className, }) => {
+    const [_visible, setVisible] = React.useState(visible);
+    const id = React.useId();
+    const onCloseClick = () => {
+        setVisible(false);
+    };
+    React.useEffect(() => {
+        setVisible(visible);
+    }, [visible]);
+    if (!_visible) {
+        return null;
+    }
+    return (React.createElement(AlertStyled, { severity: severity, onClose: closable ? onCloseClick : undefined, role: "alert", "aria-describedby": id, className: className },
+        children,
+        React.createElement(Hidden, { id: id },
+            severity,
+            " message")));
+};
+exports.Alert = Alert;

package/dist/cjs/components/Alert/Alert.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Basic: Story;
+export declare const Closable: Story;
+export declare const Variants: Story;

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variants = exports.Closable = exports.Basic = void 0;
+const React = require("react");
+const Alert_1 = require("./Alert");
+const Stack_1 = require("@mui/material/Stack");
+const meta = {
+    title: "smoot-design/Alert",
+    component: Alert_1.Alert,
+};
+exports.default = meta;
+exports.Basic = {
+    args: {
+        severity: "info",
+    },
+    render: (args) => (React.createElement(Alert_1.Alert, Object.assign({}, args),
+        "Alert with severity \"",
+        args.severity,
+        "\"")),
+};
+exports.Closable = {
+    args: {
+        severity: "warning",
+        closable: true,
+    },
+    render: (args) => (React.createElement(Alert_1.Alert, Object.assign({}, args),
+        "Closable alert with severity \"",
+        args.severity,
+        "\"")),
+};
+exports.Variants = {
+    argTypes: {
+        severity: {
+            table: {
+                disable: true,
+            },
+        },
+        closable: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    render: (args) => (React.createElement(Stack_1.default, { direction: "column", gap: 2, sx: { my: 2 } },
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { severity: "info" }), "Alert with severity \"info\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { closable: true, severity: "info" }), "Closable alert with severity \"info\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { severity: "success" }), "Alert with severity \"success\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { closable: true, severity: "success" }), "Closable alert with severity \"success\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { severity: "warning" }), "Alert with severity \"warning\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { closable: true, severity: "warning" }), "Closable alert with severity \"warning\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { severity: "error" }), "Alert with severity \"error\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { closable: true, severity: "error" }), "Closable alert with severity \"error\""))),
+};