From 348cc76c80f4b9e3be5e0b98d49529815f80fd2f Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 27 Jun 2024 22:28:10 +0800
Subject: [PATCH] feat: adds MessageBar component

---
 demo/src/app.rs                             |  8 +-
 demo/src/components/switch_version.rs       | 18 ++--
 demo/src/pages/components.rs                | 12 +--
 demo_markdown/docs/alert/mod.md             | 26 ------
 demo_markdown/docs/loading_bar/mod.md       | 11 ++-
 demo_markdown/docs/message/mod.md           | 11 ++-
 demo_markdown/docs/message_bar/mod.md       | 67 ++++++++++++++
 demo_markdown/src/lib.rs                    |  5 +-
 thaw/src/alert/alert.css                    | 27 ------
 thaw/src/alert/mod.rs                       | 96 ---------------------
 thaw/src/alert/theme.rs                     | 35 --------
 thaw/src/lib.rs                             |  6 +-
 thaw/src/message/mod.rs                     | 12 +--
 thaw/src/message_bar/message-bar.css        | 94 ++++++++++++++++++++
 thaw/src/message_bar/message_bar.rs         | 91 +++++++++++++++++++
 thaw/src/message_bar/message_bar_actions.rs | 21 +++++
 thaw/src/message_bar/message_bar_body.rs    | 10 +++
 thaw/src/message_bar/message_bar_title.rs   | 10 +++
 thaw/src/message_bar/mod.rs                 |  9 ++
 thaw/src/theme/color.rs                     | 21 +++++
 thaw/src/theme/mod.rs                       |  8 +-
 21 files changed, 374 insertions(+), 224 deletions(-)
 delete mode 100644 demo_markdown/docs/alert/mod.md
 create mode 100644 demo_markdown/docs/message_bar/mod.md
 delete mode 100644 thaw/src/alert/alert.css
 delete mode 100644 thaw/src/alert/mod.rs
 delete mode 100644 thaw/src/alert/theme.rs
 create mode 100644 thaw/src/message_bar/message-bar.css
 create mode 100644 thaw/src/message_bar/message_bar.rs
 create mode 100644 thaw/src/message_bar/message_bar_actions.rs
 create mode 100644 thaw/src/message_bar/message_bar_body.rs
 create mode 100644 thaw/src/message_bar/message_bar_title.rs
 create mode 100644 thaw/src/message_bar/mod.rs

diff --git a/demo/src/app.rs b/demo/src/app.rs
index d9bcb0b..41e9816 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -47,7 +47,6 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                 // <Route path="/nav-bar" view=NavBarPage/>
                 // <Route path="/toast" view=ToastPage/>
                 <Route path="/accordion" view=AccordionMdPage/>
-                <Route path="/alert" view=AlertMdPage/>
                 <Route path="/anchor" view=AnchorMdPage/>
                 <Route path="/auto-complete" view=AutoCompleteMdPage/>
                 <Route path="/avatar" view=AvatarMdPage/>
@@ -70,7 +69,8 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                 <Route path="/input" view=InputMdPage/>
                 <Route path="/layout" view=LayoutMdPage/>
                 <Route path="/loading-bar" view=LoadingBarMdPage/>
-                <Route path="/message" view=MessageMdPage/>
+                // <Route path="/message" view=MessageMdPage/>
+                <Route path="/message-bar" view=MessageBarMdPage/>
                 <Route path="/modal" view=ModalMdPage/>
                 <Route path="/popover" view=PopoverMdPage/>
                 <Route path="/progress" view=ProgressMdPage/>
@@ -118,9 +118,9 @@ fn TheProvider(children: Children) -> impl IntoView {
     view! {
         <ConfigProvider theme>
             <ThemeProvider theme>
-                <MessageProvider>
+                // <MessageProvider>
                     <LoadingBarProvider>{children()}</LoadingBarProvider>
-                </MessageProvider>
+                // </MessageProvider>
             </ThemeProvider>
         </ConfigProvider>
     }
diff --git a/demo/src/components/switch_version.rs b/demo/src/components/switch_version.rs
index 2c36d21..3a14f54 100644
--- a/demo/src/components/switch_version.rs
+++ b/demo/src/components/switch_version.rs
@@ -4,10 +4,10 @@ use thaw::*;
 #[component]
 pub fn SwitchVersion() -> impl IntoView {
     let options = vec![
-        SelectOption::new("main", "https://thawui.vercel.app".into()),
-        SelectOption::new("0.3.0", "https://thaw-gxcwse9r5-thaw.vercel.app".into()),
-        SelectOption::new("0.2.6", "https://thaw-mzh1656cm-thaw.vercel.app".into()),
-        SelectOption::new("0.2.5", "https://thaw-8og1kv8zs-thaw.vercel.app".into()),
+        ("main", "https://thawui.vercel.app"),
+        ("0.3.0", "https://thaw-gxcwse9r5-thaw.vercel.app"),
+        ("0.2.6", "https://thaw-mzh1656cm-thaw.vercel.app"),
+        ("0.2.5", "https://thaw-8og1kv8zs-thaw.vercel.app"),
     ];
 
     cfg_if::cfg_if! {
@@ -28,6 +28,14 @@ pub fn SwitchVersion() -> impl IntoView {
     }
 
     view! {
-        <Select value=version options/>
+        <Combobox>
+            {
+                options.into_iter().map(|option| view! {
+                    <ComboboxOption key=option.1>
+                        {option.0}
+                    </ComboboxOption>
+                }).collect_view()
+            }
+        </Combobox>
     }
 }
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index d32c3ce..924feff 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -139,10 +139,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "/components/accordion".into(),
                     label: "Accordion".into(),
                 },
-                MenuItemOption {
-                    value: "/components/alert".into(),
-                    label: "Alert".into(),
-                },
                 MenuItemOption {
                     value: "/components/anchor".into(),
                     label: "Anchor".into(),
@@ -231,9 +227,13 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "/components/loading-bar".into(),
                     label: "Loading Bar".into(),
                 },
+                // MenuItemOption {
+                //     value: "/components/message".into(),
+                //     label: "Message".into(),
+                // },
                 MenuItemOption {
-                    value: "/components/message".into(),
-                    label: "Message".into(),
+                    value: "/components/message-bar".into(),
+                    label: "Message Bar".into(),
                 },
                 MenuItemOption {
                     value: "/components/modal".into(),
diff --git a/demo_markdown/docs/alert/mod.md b/demo_markdown/docs/alert/mod.md
deleted file mode 100644
index 1241d24..0000000
--- a/demo_markdown/docs/alert/mod.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Alert
-
-```rust demo
-view! {
-    <Space vertical=true>
-        <Alert variant=AlertVariant::Success title="title">
-            "success"
-        </Alert>
-        <Alert variant=AlertVariant::Warning title="title">
-            "warning"
-        </Alert>
-        <Alert variant=AlertVariant::Error title="title">
-            "error"
-        </Alert>
-    </Space>
-}
-```
-
-### Alert Props
-
-| Name     | Type                                | Default              | Description                               |
-| -------- | ----------------------------------- | -------------------- | ----------------------------------------- |
-| class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the alert element. |
-| title    | `Option<MaybeSignal<String>>`       | `Default::default()` | Title of the alert.                       |
-| variant  | `MaybeSignal<AlertVariant>`         |                      | Alert variant.                            |
-| children | `Children`                          |                      | The content of the alert.                 |
diff --git a/demo_markdown/docs/loading_bar/mod.md b/demo_markdown/docs/loading_bar/mod.md
index f637aa2..56e1a68 100644
--- a/demo_markdown/docs/loading_bar/mod.md
+++ b/demo_markdown/docs/loading_bar/mod.md
@@ -1,8 +1,13 @@
 # Loading Bar
 
-<Alert variant=AlertVariant::Warning title="Prerequisite">
-    "If you want to use loading bar, you need to wrap the component where you call related methods inside LoadingBarProvider and use use_loading_bar to get the API."
-</Alert>
+<MessageBar layout=MessageBarLayout::Multiline intent=MessageBarIntent::Warning>
+    <MessageBarBody>
+      <h3 style="margin: 0">"Prerequisite"</h3>
+      <p>
+        "If you want to use loading bar, you need to wrap the component where you call related methods inside LoadingBarProvider and use use_loading_bar to get the API."
+      </p>
+    </MessageBarBody>
+</MessageBar>
 
 ```rust demo
 let loading_bar = use_loading_bar();
diff --git a/demo_markdown/docs/message/mod.md b/demo_markdown/docs/message/mod.md
index e7f7f42..e44eed9 100644
--- a/demo_markdown/docs/message/mod.md
+++ b/demo_markdown/docs/message/mod.md
@@ -1,8 +1,13 @@
 # Message
 
-<Alert variant=AlertVariant::Warning title="Prerequisite">
-    "If you want to use message, you need to wrap the component where you call related methods inside MessageProvider and use use_message to get the API."
-</Alert>
+<MessageBar layout=MessageBarLayout::Multiline intent=MessageBarIntent::Warning>
+    <MessageBarBody>
+      <h3 style="margin: 0">"Prerequisite"</h3>
+      <p>
+        "If you want to use message, you need to wrap the component where you call related methods inside MessageProvider and use use_message to get the API."
+      </p>
+    </MessageBarBody>
+</MessageBar>
 
 ```rust demo
 let message = use_message();
diff --git a/demo_markdown/docs/message_bar/mod.md b/demo_markdown/docs/message_bar/mod.md
new file mode 100644
index 0000000..8a8bc60
--- /dev/null
+++ b/demo_markdown/docs/message_bar/mod.md
@@ -0,0 +1,67 @@
+# MessageBar
+
+```rust demo
+view! {
+    <MessageBar>
+        <MessageBarBody>
+            <MessageBarTitle>Descriptive title</MessageBarTitle>
+            "Message providing information to the user with actionable insights."
+        </MessageBarBody>
+        <MessageBarActions>
+            <Button size=ButtonSize::Small>"Action"</Button>
+            <Button size=ButtonSize::Small>"Action"</Button>
+            <MessageBarContainerAction slot>
+                <Button size=ButtonSize::Small appearance=ButtonAppearance::Transparent>
+                    "X"
+                </Button>
+            </MessageBarContainerAction>
+        </MessageBarActions>
+    </MessageBar>
+}
+```
+
+### Intent
+
+```rust demo
+view! {
+    <Space vertical=true>
+        <MessageBar>
+            <MessageBarBody>
+                <MessageBarTitle>"Intent info"</MessageBarTitle>
+                "Message providing information to the user with actionable insights."
+            </MessageBarBody>
+        </MessageBar>
+        <MessageBar intent=MessageBarIntent::Warning>
+            <MessageBarBody>
+                <MessageBarTitle>"Intent warning"</MessageBarTitle>
+                "Message providing information to the user with actionable insights."
+            </MessageBarBody>
+        </MessageBar>
+        <MessageBar intent=MessageBarIntent::Error>
+            <MessageBarBody>
+                <MessageBarTitle>"Intent error"</MessageBarTitle>
+                "Message providing information to the user with actionable insights."
+            </MessageBarBody>
+        </MessageBar>
+        <MessageBar intent=MessageBarIntent::Success>
+            <MessageBarBody>
+                <MessageBarTitle>"Intent success"</MessageBarTitle>
+                "Message providing information to the user with actionable insights."
+            </MessageBarBody>
+        </MessageBar>
+    </Space>
+}
+```
+
+### Manual Layout
+
+```rust demo
+view! {
+    <MessageBar layout=MessageBarLayout::Multiline>
+        <MessageBarBody>
+          <h3 style="margin: 0">"Descriptive title"</h3>
+          <p>"Message providing information to the user with actionable insights."</p>
+        </MessageBarBody>
+    </MessageBar>
+}
+```
diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs
index d1e7060..2fbd2ef 100644
--- a/demo_markdown/src/lib.rs
+++ b/demo_markdown/src/lib.rs
@@ -29,7 +29,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         // "TabbarMdPage" => "../docs/_mobile/tabbar/mod.md",
         // "ToastMdPage" => "../docs/_mobile/toast/mod.md",
         "AccordionMdPage" => "../docs/accordion/mod.md",
-        "AlertMdPage" => "../docs/alert/mod.md",
+        // "AlertMdPage" => "../docs/alert/mod.md",
         "AnchorMdPage" => "../docs/anchor/mod.md",
         "AutoCompleteMdPage" => "../docs/auto_complete/mod.md",
         "AvatarMdPage" => "../docs/avatar/mod.md",
@@ -52,7 +52,8 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         "InputMdPage" => "../docs/input/mod.md",
         "LayoutMdPage" => "../docs/layout/mod.md",
         "LoadingBarMdPage" => "../docs/loading_bar/mod.md",
-        "MessageMdPage" => "../docs/message/mod.md",
+        // "MessageMdPage" => "../docs/message/mod.md",
+        "MessageBarMdPage" => "../docs/message_bar/mod.md",
         "ModalMdPage" => "../docs/modal/mod.md",
         "PopoverMdPage" => "../docs/popover/mod.md",
         "ProgressMdPage" => "../docs/progress/mod.md",
diff --git a/thaw/src/alert/alert.css b/thaw/src/alert/alert.css
deleted file mode 100644
index 3944dcd..0000000
--- a/thaw/src/alert/alert.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.thaw-alert {
-    position: relative;
-    padding: 14px 20px 14px 42px;
-    background-color: var(--thaw-background-color);
-    border: 1px solid var(--thaw-border-color);
-    border-radius: 3px;
-    line-height: 1.6;
-}
-
-.thaw-alert__icon {
-    position: absolute;
-    top: 12px;
-    left: 10px;
-    font-size: 24px;
-    color: var(--thaw-icon-color);
-}
-
-.thaw-alert__header {
-    font-size: 16px;
-    line-height: 19px;
-    font-weight: 500;
-}
-
-.thaw-alert__header + .thaw-alert__content {
-    margin-top: 8px;
-    font-size: 14px;
-}
diff --git a/thaw/src/alert/mod.rs b/thaw/src/alert/mod.rs
deleted file mode 100644
index 27880c1..0000000
--- a/thaw/src/alert/mod.rs
+++ /dev/null
@@ -1,96 +0,0 @@
-mod theme;
-
-pub use theme::AlertTheme;
-
-use crate::{theme::use_theme, Icon, Theme};
-use leptos::*;
-use thaw_components::OptionComp;
-use thaw_utils::{class_list, mount_style, OptionalProp};
-
-#[derive(Clone)]
-pub enum AlertVariant {
-    Success,
-    Warning,
-    Error,
-}
-
-impl AlertVariant {
-    fn theme_icon_color(&self, theme: &Theme) -> String {
-        match self {
-            AlertVariant::Success => theme.common.color_success.clone(),
-            AlertVariant::Warning => theme.common.color_warning.clone(),
-            AlertVariant::Error => theme.common.color_error.clone(),
-        }
-    }
-    fn theme_background_color(&self, theme: &Theme) -> String {
-        match self {
-            AlertVariant::Success => theme.alert.success_background_color.clone(),
-            AlertVariant::Warning => theme.alert.warning_background_color.clone(),
-            AlertVariant::Error => theme.alert.error_background_color.clone(),
-        }
-    }
-    fn theme_border_color(&self, theme: &Theme) -> String {
-        match self {
-            AlertVariant::Success => theme.alert.success_border_color.clone(),
-            AlertVariant::Warning => theme.alert.warning_border_color.clone(),
-            AlertVariant::Error => theme.alert.error_border_color.clone(),
-        }
-    }
-}
-
-#[component]
-pub fn Alert(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
-    #[prop(optional, into)] title: Option<MaybeSignal<String>>,
-    #[prop(into)] variant: MaybeSignal<AlertVariant>,
-    children: Children,
-) -> impl IntoView {
-    mount_style("alert", include_str!("./alert.css"));
-    let theme = use_theme(Theme::light);
-
-    let css_vars = create_memo({
-        let variant = variant.clone();
-
-        move |_| {
-            let mut css_vars = String::new();
-
-            theme.with(|theme| {
-                let variant = variant.get();
-                css_vars.push_str(&format!(
-                    "--thaw-icon-color: {};",
-                    variant.theme_icon_color(theme)
-                ));
-                css_vars.push_str(&format!(
-                    "--thaw-background-color: {};",
-                    variant.theme_background_color(theme)
-                ));
-                css_vars.push_str(&format!(
-                    "--thaw-border-color: {};",
-                    variant.theme_border_color(theme)
-                ));
-            });
-
-            css_vars
-        }
-    });
-    let icon = create_memo(move |_| match variant.get() {
-        AlertVariant::Success => icondata_ai::AiCheckCircleFilled,
-        AlertVariant::Warning => icondata_ai::AiExclamationCircleFilled,
-        AlertVariant::Error => icondata_ai::AiCloseCircleFilled,
-    });
-
-    view! {
-        <div
-            class=class_list!["thaw-alert", class.map(| c | move || c.get())]
-            style=move || css_vars.get()
-        >
-            <Icon icon class="thaw-alert__icon"/>
-            <div>
-                <OptionComp value=title let:title>
-                    <div class="thaw-alert__header">{move || title.get()}</div>
-                </OptionComp>
-                <div class="thaw-alert__content">{children()}</div>
-            </div>
-        </div>
-    }
-}
diff --git a/thaw/src/alert/theme.rs b/thaw/src/alert/theme.rs
deleted file mode 100644
index 3121e15..0000000
--- a/thaw/src/alert/theme.rs
+++ /dev/null
@@ -1,35 +0,0 @@
-use crate::theme::ThemeMethod;
-
-#[derive(Clone)]
-pub struct AlertTheme {
-    pub success_background_color: String,
-    pub success_border_color: String,
-    pub warning_background_color: String,
-    pub warning_border_color: String,
-    pub error_background_color: String,
-    pub error_border_color: String,
-}
-
-impl ThemeMethod for AlertTheme {
-    fn light() -> Self {
-        Self {
-            success_background_color: "#edf7f2".into(),
-            success_border_color: "#c5e7d5".into(),
-            warning_background_color: "#fef7ed".into(),
-            warning_border_color: "#fae0b5".into(),
-            error_background_color: "#fbeef1".into(),
-            error_border_color: "#f3cbd3".into(),
-        }
-    }
-
-    fn dark() -> Self {
-        Self {
-            success_background_color: "#2a947d40".into(),
-            success_border_color: "#2a947d59".into(),
-            warning_background_color: "#f08a0040".into(),
-            warning_border_color: "#f08a0059".into(),
-            error_background_color: "#d03a5240".into(),
-            error_border_color: "#d03a5259".into(),
-        }
-    }
-}
diff --git a/thaw/src/lib.rs b/thaw/src/lib.rs
index 0125ccf..d47cbc1 100644
--- a/thaw/src/lib.rs
+++ b/thaw/src/lib.rs
@@ -1,5 +1,4 @@
 mod accordion;
-mod alert;
 mod anchor;
 mod auto_complete;
 mod avatar;
@@ -24,13 +23,13 @@ mod input;
 mod layout;
 mod loading_bar;
 mod message;
+mod message_bar;
 mod modal;
 mod nav;
 mod popover;
 mod progress;
 mod radio;
 mod scrollbar;
-mod select;
 mod skeleton;
 mod slider;
 mod space;
@@ -47,7 +46,6 @@ mod time_picker;
 mod upload;
 
 pub use accordion::*;
-pub use alert::*;
 pub use anchor::*;
 pub use auto_complete::*;
 pub use avatar::*;
@@ -72,13 +70,13 @@ pub use input::*;
 pub use layout::*;
 pub use loading_bar::*;
 pub use message::*;
+pub use message_bar::*;
 pub use modal::*;
 pub use nav::*;
 pub use popover::*;
 pub use progress::*;
 pub use radio::*;
 pub use scrollbar::*;
-pub use select::*;
 pub use skeleton::*;
 pub use slider::*;
 pub use space::*;
diff --git a/thaw/src/message/mod.rs b/thaw/src/message/mod.rs
index 58ad70c..68c5f3c 100644
--- a/thaw/src/message/mod.rs
+++ b/thaw/src/message/mod.rs
@@ -52,12 +52,12 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
-        theme.with(|theme| {
-            css_vars.push_str(&format!(
-                "--thaw-background-color: {}",
-                theme.message.background_color
-            ))
-        });
+        // theme.with(|theme| {
+        //     css_vars.push_str(&format!(
+        //         "--thaw-background-color: {}",
+        //         theme.message.background_color
+        //     ))
+        // });
         css_vars
     });
     let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
diff --git a/thaw/src/message_bar/message-bar.css b/thaw/src/message_bar/message-bar.css
new file mode 100644
index 0000000..ab8b0c9
--- /dev/null
+++ b/thaw/src/message_bar/message-bar.css
@@ -0,0 +1,94 @@
+.thaw-message-bar {
+    white-space: nowrap;
+    display: grid;
+    grid-template: "icon body secondaryActions actions" 1fr / auto 1fr auto auto;
+    padding-left: var(--spacingHorizontalM);
+    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+    border-radius: var(--borderRadiusMedium);
+    align-items: center;
+    min-height: 36px;
+    box-sizing: border-box;
+    background-color: var(--colorNeutralBackground3);
+}
+
+.thaw-message-bar.thaw-message-bar--multiline {
+    grid-template-areas:
+        "icon body actions"
+        "secondaryActions secondaryActions secondaryActions";
+    grid-template-columns: auto 1fr auto;
+    padding-top: var(--spacingVerticalMNudge);
+    align-items: start;
+    white-space: normal;
+}
+
+.thaw-message-bar--success {
+    border-color: var(--colorStatusSuccessBorder1);
+    background-color: var(--colorStatusSuccessBackground1);
+}
+
+.thaw-message-bar--success > .thaw-message-bar__icon {
+    color: var(--colorStatusSuccessForeground1);
+}
+
+.thaw-message-bar--warning {
+    border-color: var(--colorStatusWarningBorder1);
+    background-color: var(--colorStatusWarningBackground1);
+}
+
+.thaw-message-bar--warning > .thaw-message-bar__icon {
+    color: var(--colorStatusWarningForeground3);
+}
+
+.thaw-message-bar--error {
+    border-color: var(--colorStatusDangerBorder1);
+    background-color: var(--colorStatusDangerBackground1);
+}
+
+.thaw-message-bar--error > .thaw-message-bar__icon {
+    color: var(--colorStatusDangerForeground1);
+}
+
+.thaw-message-bar__icon {
+    grid-area: icon;
+    font-size: var(--fontSizeBase500);
+    margin-right: var(--spacingHorizontalS);
+    color: var(--colorNeutralForeground3);
+    display: flex;
+    align-items: center;
+}
+
+.thaw-message-bar__icon > svg {
+    display: inline;
+    line-height: 0;
+}
+
+.thaw-message-bar-body {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+    grid-area: body;
+    padding-right: var(--spacingHorizontalM);
+}
+
+.thaw-message-bar-title {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightSemibold);
+    line-height: var(--lineHeightBase300);
+}
+
+.thaw-message-bar-title::after {
+    content: " ";
+}
+
+.thaw-message-bar-actions {
+    grid-area: secondaryActions;
+    display: flex;
+    column-gap: var(--spacingHorizontalM);
+    padding-right: var(--spacingHorizontalM);
+}
+.tha-message-bar-actions__container-action {
+    grid-area: actions;
+    padding-right: var(--spacingHorizontalM);
+}
diff --git a/thaw/src/message_bar/message_bar.rs b/thaw/src/message_bar/message_bar.rs
new file mode 100644
index 0000000..d92975e
--- /dev/null
+++ b/thaw/src/message_bar/message_bar.rs
@@ -0,0 +1,91 @@
+use leptos::*;
+use thaw_utils::{class_list, mount_style, StoredMaybeSignal};
+
+#[component]
+pub fn MessageBar(
+    #[prop(optional, into)] layout: MaybeSignal<MessageBarLayout>,
+    #[prop(optional, into)] intent: MaybeSignal<MessageBarIntent>,
+    children: Children,
+) -> impl IntoView {
+    mount_style("message-bar", include_str!("./message-bar.css"));
+    let intent: StoredMaybeSignal<_> = intent.into();
+
+    view! {
+        <div
+            class=class_list![
+                "thaw-message-bar",
+                move || format!("thaw-message-bar--{}", intent.get().as_str()),
+                move || format!("thaw-message-bar--{}", layout.get().as_str())
+            ]
+            role="group"
+        >
+            <div class="thaw-message-bar__icon">
+                {
+                    move || match intent.get() {
+                        MessageBarIntent::Info => view! {
+                            <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
+                                <path d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0ZM9.5 8.91a.5.5 0 0 1 1 0V13.6a.5.5 0 0 1-1 0V8.9Zm-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z" fill="currentColor"></path>
+                            </svg>
+                        },
+                        MessageBarIntent::Success => view! {
+                            <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
+                                <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm3.36 5.65a.5.5 0 0 0-.64-.06l-.07.06L9 11.3 7.35 9.65l-.07-.06a.5.5 0 0 0-.7.7l.07.07 2 2 .07.06c.17.11.4.11.56 0l.07-.06 4-4 .07-.08a.5.5 0 0 0-.06-.63Z" fill="currentColor">
+                                </path>
+                            </svg>
+                        },
+                        MessageBarIntent::Warning => view! {
+                            <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
+                                <path d="M8.68 2.79a1.5 1.5 0 0 1 2.64 0l6.5 12A1.5 1.5 0 0 1 16.5 17h-13a1.5 1.5 0 0 1-1.32-2.21l6.5-12ZM10.5 7.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 1 0v-4Zm.25 6.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z" fill="currentColor">
+                                </path>
+                            </svg>
+                        },
+                        MessageBarIntent::Error => view! {
+                            <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
+                                <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16ZM7.8 7.11a.5.5 0 0 0-.63.06l-.06.07a.5.5 0 0 0 .06.64L9.3 10l-2.12 2.12-.06.07a.5.5 0 0 0 .06.64l.07.06c.2.13.47.11.64-.06L10 10.7l2.12 2.12.07.06c.2.13.46.11.64-.06l.06-.07a.5.5 0 0 0-.06-.64L10.7 10l2.12-2.12.06-.07a.5.5 0 0 0-.06-.64l-.07-.06a.5.5 0 0 0-.64.06L10 9.3 7.88 7.17l-.07-.06Z" fill="currentColor">
+                                </path>
+                            </svg>
+                        },
+                    }
+                }
+
+            </div>
+            {children()}
+        </div>
+    }
+}
+
+#[derive(Default, Clone)]
+pub enum MessageBarIntent {
+    #[default]
+    Info,
+    Success,
+    Warning,
+    Error,
+}
+
+impl MessageBarIntent {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            MessageBarIntent::Info => "into",
+            MessageBarIntent::Success => "success",
+            MessageBarIntent::Warning => "warning",
+            MessageBarIntent::Error => "error",
+        }
+    }
+}
+
+#[derive(Default, Clone)]
+pub enum MessageBarLayout {
+    #[default]
+    Singleline,
+    Multiline,
+}
+
+impl MessageBarLayout {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            MessageBarLayout::Singleline => "singleline",
+            MessageBarLayout::Multiline => "multiline",
+        }
+    }
+}
diff --git a/thaw/src/message_bar/message_bar_actions.rs b/thaw/src/message_bar/message_bar_actions.rs
new file mode 100644
index 0000000..67125cb
--- /dev/null
+++ b/thaw/src/message_bar/message_bar_actions.rs
@@ -0,0 +1,21 @@
+use leptos::*;
+
+#[component]
+pub fn MessageBarActions(
+    message_bar_container_action: MessageBarContainerAction,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <div class="thaw-message-bar-actions">
+            {children()}
+        </div>
+        <div class="tha-message-bar-actions__container-action">
+            {(message_bar_container_action.children)()}
+        </div>
+    }
+}
+
+#[slot]
+pub struct MessageBarContainerAction {
+    children: Children,
+}
diff --git a/thaw/src/message_bar/message_bar_body.rs b/thaw/src/message_bar/message_bar_body.rs
new file mode 100644
index 0000000..ff81683
--- /dev/null
+++ b/thaw/src/message_bar/message_bar_body.rs
@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn MessageBarBody(children: Children) -> impl IntoView {
+    view! {
+        <div class="thaw-message-bar-body">
+            {children()}
+        </div>
+    }
+}
diff --git a/thaw/src/message_bar/message_bar_title.rs b/thaw/src/message_bar/message_bar_title.rs
new file mode 100644
index 0000000..707723f
--- /dev/null
+++ b/thaw/src/message_bar/message_bar_title.rs
@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn MessageBarTitle(children: Children) -> impl IntoView {
+    view! {
+        <span class="thaw-message-bar-title">
+            {children()}
+        </span>
+    }
+}
diff --git a/thaw/src/message_bar/mod.rs b/thaw/src/message_bar/mod.rs
new file mode 100644
index 0000000..681255c
--- /dev/null
+++ b/thaw/src/message_bar/mod.rs
@@ -0,0 +1,9 @@
+mod message_bar;
+mod message_bar_actions;
+mod message_bar_body;
+mod message_bar_title;
+
+pub use message_bar::*;
+pub use message_bar_actions::*;
+pub use message_bar_body::*;
+pub use message_bar_title::*;
diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs
index 49bfa9b..7b6ee65 100644
--- a/thaw/src/theme/color.rs
+++ b/thaw/src/theme/color.rs
@@ -88,8 +88,15 @@ pub struct ColorTheme {
     pub color_palette_dark_orange_foreground_3: String,
     pub color_palette_dark_orange_border_1: String,
 
+    pub color_status_success_background_1: String,
     pub color_status_success_foreground_1: String,
+    pub color_status_success_border_1: String,
+    pub color_status_warning_background_1: String,
+    pub color_status_warning_foreground_3: String,
+    pub color_status_warning_border_1: String,
+    pub color_status_danger_background_1: String,
     pub color_status_danger_foreground_1: String,
+    pub color_status_danger_border_1: String,
 
     pub color_subtle_background: String,
     pub color_subtle_background_hover: String,
@@ -193,8 +200,15 @@ impl ColorTheme {
             color_palette_dark_orange_foreground_3: "#da3b01".into(),
             color_palette_dark_orange_border_1: "#f4bfab".into(),
 
+            color_status_success_background_1: "#f1faf1".into(),
             color_status_success_foreground_1: "#0e700e".into(),
+            color_status_success_border_1: "#9fd89f".into(),
+            color_status_warning_background_1: "#fff9f5".into(),
+            color_status_warning_foreground_3: "#bc4b09".into(),
+            color_status_warning_border_1: "#fdcfb4".into(),
+            color_status_danger_background_1: "#fdf3f4".into(),
             color_status_danger_foreground_1: "#b10e1c".into(),
+            color_status_danger_border_1: "#eeacb2".into(),
 
             color_subtle_background: "transparent".into(),
             color_subtle_background_hover: "#f5f5f5".into(),
@@ -298,8 +312,15 @@ impl ColorTheme {
             color_palette_dark_orange_foreground_3: "#e9835e".into(),
             color_palette_dark_orange_border_1: "#da3b01".into(),
 
+            color_status_success_background_1: "#052505".into(),
             color_status_success_foreground_1: "#54b054".into(),
+            color_status_success_border_1: "#107c10".into(),
+            color_status_warning_background_1: "#4a1e04".into(),
+            color_status_warning_foreground_3: "#f98845".into(),
+            color_status_warning_border_1: "#f7630c".into(),
+            color_status_danger_background_1: "#3b0509".into(),
             color_status_danger_foreground_1: "#dc626d".into(),
+            color_status_danger_border_1: "#c50f1f".into(),
 
             color_subtle_background: "transparent".into(),
             color_subtle_background_hover: "#383838".into(),
diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs
index 5270a75..6248064 100644
--- a/thaw/src/theme/mod.rs
+++ b/thaw/src/theme/mod.rs
@@ -2,7 +2,7 @@ mod color;
 mod common;
 
 use self::common::CommonTheme;
-use crate::{AlertTheme, AnchorTheme, MessageTheme, ProgressTheme};
+use crate::{AnchorTheme, ProgressTheme};
 pub use color::ColorTheme;
 use leptos::*;
 
@@ -16,8 +16,6 @@ pub struct Theme {
     pub name: String,
     pub common: CommonTheme,
     pub color: ColorTheme,
-    pub alert: AlertTheme,
-    pub message: MessageTheme,
     pub progress: ProgressTheme,
     pub anchor: AnchorTheme,
 }
@@ -28,8 +26,6 @@ impl Theme {
             name: "light".into(),
             common: CommonTheme::light(),
             color: ColorTheme::light(),
-            alert: AlertTheme::light(),
-            message: MessageTheme::light(),
             progress: ProgressTheme::light(),
             anchor: AnchorTheme::light(),
         }
@@ -39,8 +35,6 @@ impl Theme {
             name: "dark".into(),
             common: CommonTheme::dark(),
             color: ColorTheme::dark(),
-            alert: AlertTheme::dark(),
-            message: MessageTheme::dark(),
             progress: ProgressTheme::dark(),
             anchor: AnchorTheme::dark(),
         }