From 61284d57fc890442ddb5a8f1b01a6391982d7680 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Tue, 13 Aug 2024 14:47:13 +0800
Subject: [PATCH] cargo fmt & leptosfmt

---
 thaw/src/accordion/accordion_item.rs         |  20 +--
 thaw/src/accordion/mod.rs                    |   6 +-
 thaw/src/anchor/anchor_link.rs               |  11 +-
 thaw/src/anchor/mod.rs                       |   5 +-
 thaw/src/auto_complete/mod.rs                |  37 ++++--
 thaw/src/avatar/mod.rs                       |  85 +++++++------
 thaw/src/back_top/mod.rs                     |  27 ++--
 thaw/src/badge/badge.rs                      |  12 +-
 thaw/src/breadcrumb/mod.rs                   |  36 ++++--
 thaw/src/button/button_group.rs              |   3 +-
 thaw/src/button/mod.rs                       |  25 ++--
 thaw/src/calendar/mod.rs                     |  23 ++--
 thaw/src/card/card_footer.rs                 |   6 +-
 thaw/src/card/card_header.rs                 |  12 +-
 thaw/src/card/mod.rs                         |   5 +-
 thaw/src/checkbox/mod.rs                     |  56 ++++++---
 thaw/src/code/mod.rs                         |   5 +-
 thaw/src/color_picker/mod.rs                 |  10 +-
 thaw/src/combobox/combobox.rs                |  74 +++++++----
 thaw/src/combobox/combobox_option.rs         |  66 ++++++----
 thaw/src/combobox/combobox_option_group.rs   |   3 +-
 thaw/src/date_picker/mod.rs                  |   5 +-
 thaw/src/date_picker/panel/date_panel.rs     |   2 +-
 thaw/src/date_picker/panel/mod.rs            |  16 ++-
 thaw/src/date_picker/panel/month_panel.rs    |   2 +-
 thaw/src/date_picker/panel/year_panel.rs     |   2 +-
 thaw/src/dialog/dialog.rs                    |   4 +-
 thaw/src/dialog/dialog_actions.rs            |   6 +-
 thaw/src/dialog/dialog_body.rs               |   6 +-
 thaw/src/dialog/dialog_content.rs            |   6 +-
 thaw/src/dialog/dialog_title.rs              |   6 +-
 thaw/src/divider/mod.rs                      |  13 +-
 thaw/src/drawer/drawer_body.rs               |   4 +-
 thaw/src/drawer/drawer_header.rs             |   6 +-
 thaw/src/drawer/drawer_header_title.rs       |   8 +-
 thaw/src/drawer/inline_drawer.rs             |  17 +--
 thaw/src/drawer/overlay_drawer.rs            |  19 ++-
 thaw/src/grid/grid_item.rs                   |   5 +-
 thaw/src/grid/mod.rs                         |   5 +-
 thaw/src/image/mod.rs                        |   6 +-
 thaw/src/layout/layout_header.rs             |   6 +-
 thaw/src/layout/layout_sider.rs              |   6 +-
 thaw/src/layout/mod.rs                       |  12 +-
 thaw/src/loading_bar/loading_bar_provider.rs |   2 +-
 thaw/src/menu/menu_item.rs                   |   2 +-
 thaw/src/message_bar/message_bar.rs          |  99 +++++++++++----
 thaw/src/message_bar/message_bar_actions.rs  |   4 +-
 thaw/src/message_bar/message_bar_body.rs     |   6 +-
 thaw/src/message_bar/message_bar_title.rs    |   6 +-
 thaw/src/nav/nav_category.rs                 |  31 ++---
 thaw/src/nav/nav_drawer.rs                   |   9 +-
 thaw/src/nav/nav_item.rs                     |  32 ++---
 thaw/src/pagination/mod.rs                   |  62 ++++-----
 thaw/src/popover/mod.rs                      |   3 +-
 thaw/src/progress_bar/progress_bar.rs        |   3 +-
 thaw/src/progress_bar/progress_circle.rs     |   3 +-
 thaw/src/radio/mod.rs                        |  13 +-
 thaw/src/radio/radio_group.rs                |  11 +-
 thaw/src/scrollbar/mod.rs                    |  26 ++--
 thaw/src/skeleton/skeleton.rs                |   6 +-
 thaw/src/skeleton/skeleton_item.rs           |   5 +-
 thaw/src/slider/mod.rs                       |  11 +-
 thaw/src/slider/slider_label.rs              |   6 +-
 thaw/src/space/mod.rs                        |  12 +-
 thaw/src/spin_button/mod.rs                  |  44 +++++--
 thaw/src/spinner/mod.rs                      |  27 ++--
 thaw/src/switch/mod.rs                       |  27 ++--
 thaw/src/tab_list/mod.rs                     |   5 +-
 thaw/src/tab_list/tab.rs                     |  11 +-
 thaw/src/table/mod.rs                        |  58 +++------
 thaw/src/tag/mod.rs                          |  29 +++--
 thaw/src/text/mod.rs                         |  12 +-
 thaw/src/textarea/mod.rs                     |  14 +--
 thaw/src/time_picker/mod.rs                  |   2 +-
 thaw/src/toast/toast.rs                      |   6 +-
 thaw/src/toast/toast_body.rs                 |   8 +-
 thaw/src/toast/toast_footer.rs               |   6 +-
 thaw/src/toast/toast_title.rs                |  37 +++---
 thaw/src/toast/toaster.rs                    | 126 +++++++++----------
 thaw/src/toast/toaster_provider.rs           |   9 +-
 thaw/src/upload/mod.rs                       |   7 +-
 thaw/src/upload/upload_dragger.rs            |   6 +-
 82 files changed, 790 insertions(+), 685 deletions(-)

diff --git a/thaw/src/accordion/accordion_item.rs b/thaw/src/accordion/accordion_item.rs
index 2e48534..afc5a3a 100644
--- a/thaw/src/accordion/accordion_item.rs
+++ b/thaw/src/accordion/accordion_item.rs
@@ -50,23 +50,25 @@ pub fn AccordionItem(
                     type="button"
                     on:click=on_click
                 >
-                    <span
-                        class="thaw-accordion-header__expand-icon"
-                        aria-hidden="true"
-                    >
+                    <span class="thaw-accordion-header__expand-icon" aria-hidden="true">
                         <svg
                             fill="currentColor"
                             aria-hidden="true"
                             width="1em"
                             height="1em"
                             viewBox="0 0 20 20"
-                            style=move || if is_show_panel.get() {
-                                "transform: rotate(90deg)"
-                            } else {
-                                "transform: rotate(0deg)"
+                            style=move || {
+                                if is_show_panel.get() {
+                                    "transform: rotate(90deg)"
+                                } else {
+                                    "transform: rotate(0deg)"
+                                }
                             }
                         >
-                            <path d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z" fill="currentColor"></path>
+                            <path
+                                d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
+                                fill="currentColor"
+                            ></path>
                         </svg>
                     </span>
                     {(accordion_header.children)()}
diff --git a/thaw/src/accordion/mod.rs b/thaw/src/accordion/mod.rs
index 2ebff50..0e24cb0 100644
--- a/thaw/src/accordion/mod.rs
+++ b/thaw/src/accordion/mod.rs
@@ -24,11 +24,9 @@ pub fn Accordion(
         <Provider value=AccordionInjection {
             open_items,
             collapsible,
-            multiple
+            multiple,
         }>
-            <div class=class_list!["thaw-accordion", class]>
-                {children()}
-            </div>
+            <div class=class_list!["thaw-accordion", class]>{children()}</div>
         </Provider>
     }
 }
diff --git a/thaw/src/anchor/anchor_link.rs b/thaw/src/anchor/anchor_link.rs
index 7c545f0..de63a22 100644
--- a/thaw/src/anchor/anchor_link.rs
+++ b/thaw/src/anchor/anchor_link.rs
@@ -7,9 +7,11 @@ use thaw_utils::{class_list, StoredMaybeSignal};
 pub fn AnchorLink(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// The content of link.
-    #[prop(into)] title: MaybeSignal<String>,
+    #[prop(into)]
+    title: MaybeSignal<String>,
     /// The target of link.
-    #[prop(into)] href: String,
+    #[prop(into)]
+    href: String,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     let anchor = AnchorInjection::expect_context();
@@ -63,7 +65,10 @@ pub fn AnchorLink(
 
     view! {
         <div class=class_list![
-            "thaw-anchor-link", ("thaw-anchor-link--active", move || is_active.get()), class]>
+            "thaw-anchor-link",
+            ("thaw-anchor-link--active", move || is_active.get()),
+            class
+        ]>
             <a
                 href=href
                 class="thaw-anchor-link__title"
diff --git a/thaw/src/anchor/mod.rs b/thaw/src/anchor/mod.rs
index 43824c0..83d9896 100644
--- a/thaw/src/anchor/mod.rs
+++ b/thaw/src/anchor/mod.rs
@@ -107,10 +107,7 @@ pub fn Anchor(
     }
 
     view! {
-        <div
-            class=class_list!["thaw-anchor", class]
-            node_ref=anchor_ref
-        >
+        <div class=class_list!["thaw-anchor", class] node_ref=anchor_ref>
             <div class="thaw-anchor-rail">
                 <div
                     class="thaw-anchor-rail__bar"
diff --git a/thaw/src/auto_complete/mod.rs b/thaw/src/auto_complete/mod.rs
index 7b5ab3d..a4ae0e8 100644
--- a/thaw/src/auto_complete/mod.rs
+++ b/thaw/src/auto_complete/mod.rs
@@ -26,17 +26,21 @@ pub struct AutoCompleteSuffix {
 pub fn AutoComplete(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Input of autocomplete.
-    #[prop(optional, into)] value: Model<String>,
+    #[prop(optional, into)]
+    value: Model<String>,
     /// Autocomplete's placeholder.
-    #[prop(optional, into)] placeholder: MaybeProp<String>,
+    #[prop(optional, into)]
+    placeholder: MaybeProp<String>,
     // Whether to clear after selection.
     #[prop(optional, into)] clear_after_select: MaybeSignal<bool>,
     /// Whether to blur after selection.
-    #[prop(optional, into)] blur_after_select: MaybeSignal<bool>,
+    #[prop(optional, into)]
+    blur_after_select: MaybeSignal<bool>,
     // On select callback function.
     #[prop(optional, into)] on_select: Option<BoxOneCallback<String>>,
     /// Whether the input is disabled.
-    #[prop(optional, into)] disabled: MaybeSignal<bool>,
+    #[prop(optional, into)]
+    disabled: MaybeSignal<bool>,
     #[prop(optional)] auto_complete_prefix: Option<AutoCompletePrefix>,
     #[prop(optional)] auto_complete_suffix: Option<AutoCompleteSuffix>,
     #[prop(optional)] comp_ref: ComponentRef<AutoCompleteRef>,
@@ -147,15 +151,22 @@ pub fn AutoComplete(
                 placement=FollowerPlacement::BottomStart
                 width=FollowerWidth::Target
             >
-                <Provider value=AutoCompleteInjection{value, select_option, options}>
-                    <Listbox open=open_listbox.read_only() set_listbox listbox_ref class="thaw-auto-complete__listbox">
-                        {
-                            if let Some(children) = children {
-                                Either::Left(children())
-                            } else {
-                                Either::Right(())
-                            }
-                        }
+                <Provider value=AutoCompleteInjection {
+                    value,
+                    select_option,
+                    options,
+                }>
+                    <Listbox
+                        open=open_listbox.read_only()
+                        set_listbox
+                        listbox_ref
+                        class="thaw-auto-complete__listbox"
+                    >
+                        {if let Some(children) = children {
+                            Either::Left(children())
+                        } else {
+                            Either::Right(())
+                        }}
                     </Listbox>
                 </Provider>
             </Follower>
diff --git a/thaw/src/avatar/mod.rs b/thaw/src/avatar/mod.rs
index 1646deb..549f0b5 100644
--- a/thaw/src/avatar/mod.rs
+++ b/thaw/src/avatar/mod.rs
@@ -60,55 +60,62 @@ pub fn Avatar(
 
     view! {
         <span
-            class=class_list!["thaw-avatar", move || format!("thaw-avatar--{}", shape.get().as_str()), class]
+            class=class_list![
+                "thaw-avatar",
+                move || format!("thaw-avatar--{}", shape.get().as_str()),
+                class
+            ]
             style=move || style().unwrap_or_default()
             role="img"
             aria-label=move || name.with_value(|n| n.get())
         >
-            {
-                move || {
-                    let mut initials = initials.with_value(|i| i.get());
-                    if initials.is_none() {
-                        name.with_value(|name| {
-                            if let Some(name) = name.get() {
-                                initials = Some(initials_name(name));
-                            }
-                        });
-                    }
-                    view! {
-                        <OptionComp value=initials let:initials>
-                            <span class="thaw-avatar__initials">
-                                {initials}
-                            </span>
-                        </OptionComp>
-                    }
+            {move || {
+                let mut initials = initials.with_value(|i| i.get());
+                if initials.is_none() {
+                    name.with_value(|name| {
+                        if let Some(name) = name.get() {
+                            initials = Some(initials_name(name));
+                        }
+                    });
                 }
-            }
-            {
-                move || {
-                    let src = src.with_value(|s| s.get());
-                    view! {
-                        <OptionComp value=src let:src>
-                            <img src=src class="thaw-avatar__image"/>
-                        </OptionComp>
-                    }
+                view! {
+                    <OptionComp value=initials let:initials>
+                        <span class="thaw-avatar__initials">{initials}</span>
+                    </OptionComp>
                 }
-            }
-            {
-                move || {
-                    if is_show_default_icon.get() {
-                        Either::Left(view! {
+            }}
+            {move || {
+                let src = src.with_value(|s| s.get());
+                view! {
+                    <OptionComp value=src let:src>
+                        <img src=src class="thaw-avatar__image" />
+                    </OptionComp>
+                }
+            }}
+            {move || {
+                if is_show_default_icon.get() {
+                    Either::Left(
+                        view! {
                             <span aria-hidden="true" class="thaw-avatar__icon">
-                                <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
-                                    <path d="M10 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM7 6a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-2 5a2 2 0 0 0-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0 0 10 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0 0 17 13a2 2 0 0 0-2-2H5Zm-1 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0 1 10 17a8.16 8.16 0 0 1-4.33-1.05A3.36 3.36 0 0 1 4 13Z" fill="currentColor"></path>
+                                <svg
+                                    fill="currentColor"
+                                    aria-hidden="true"
+                                    width="1em"
+                                    height="1em"
+                                    viewBox="0 0 20 20"
+                                >
+                                    <path
+                                        d="M10 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM7 6a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-2 5a2 2 0 0 0-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0 0 10 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0 0 17 13a2 2 0 0 0-2-2H5Zm-1 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0 1 10 17a8.16 8.16 0 0 1-4.33-1.05A3.36 3.36 0 0 1 4 13Z"
+                                        fill="currentColor"
+                                    ></path>
                                 </svg>
                             </span>
-                        })
-                    } else {
-                        Either::Right(())
-                    }
+                        },
+                    )
+                } else {
+                    Either::Right(())
                 }
-            }
+            }}
         </span>
     }
 }
diff --git a/thaw/src/back_top/mod.rs b/thaw/src/back_top/mod.rs
index 58db86b..67bbe3a 100644
--- a/thaw/src/back_top/mod.rs
+++ b/thaw/src/back_top/mod.rs
@@ -95,17 +95,28 @@ pub fn BackTop(
                         data-thaw-id=config_provider.id().clone()
                         node_ref=back_top_ref
                         style=move || {
-                            display.get().map_or_else(|| format!("right: {}px; bottom: {}px", right.get(), bottom.get()), |d| d.to_string())
+                            display
+                                .get()
+                                .map_or_else(
+                                    || {
+                                        format!(
+                                            "right: {}px; bottom: {}px",
+                                            right.get(),
+                                            bottom.get(),
+                                        )
+                                    },
+                                    |d| d.to_string(),
+                                )
                         }
                         on:click=on_click
                     >
-                        {
-                            if let Some(children) = children {
-                                Either::Left(children())
-                            } else {
-                                Either::Right(view!{<Icon icon=icondata_ai::AiVerticalAlignTopOutlined/>})
-                            }
-                        }
+                        {if let Some(children) = children {
+                            Either::Left(children())
+                        } else {
+                            Either::Right(
+                                view! { <Icon icon=icondata_ai::AiVerticalAlignTopOutlined /> },
+                            )
+                        }}
                     </div>
                 </CSSTransition>
             </Teleport>
diff --git a/thaw/src/badge/badge.rs b/thaw/src/badge/badge.rs
index ab0383a..127580e 100644
--- a/thaw/src/badge/badge.rs
+++ b/thaw/src/badge/badge.rs
@@ -25,13 +25,11 @@ pub fn Badge(
             move || format!("thaw-badge--{}", color.get().as_str()),
             class
         ]>
-            {
-                if let Some(children) = children {
-                    Either::Left(children())
-                } else {
-                    Either::Right(())
-                }
-            }
+            {if let Some(children) = children {
+                Either::Left(children())
+            } else {
+                Either::Right(())
+            }}
         </div>
     }
 }
diff --git a/thaw/src/breadcrumb/mod.rs b/thaw/src/breadcrumb/mod.rs
index 4d6bae7..ebfda0b 100644
--- a/thaw/src/breadcrumb/mod.rs
+++ b/thaw/src/breadcrumb/mod.rs
@@ -9,10 +9,10 @@ pub fn Breadcrumb(
     mount_style("breadcrumb", include_str!("./breadcrumb.css"));
 
     view! {
-        <nav
-            class=class_list!["thaw-breadcrumb", class]
-        >
-            <ol role="list" class="thaw-breadcrumb__list">{children()}</ol>
+        <nav class=class_list!["thaw-breadcrumb", class]>
+            <ol role="list" class="thaw-breadcrumb__list">
+                {children()}
+            </ol>
         </nav>
     }
 }
@@ -22,23 +22,24 @@ pub fn BreadcrumbItem(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <li class=class_list!["thaw-breadcrumb-item", class]>
-            {children()}
-        </li>
-    }
+    view! { <li class=class_list!["thaw-breadcrumb-item", class]>{children()}</li> }
 }
 
 #[component]
 pub fn BreadcrumbButton(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Defines current sate of BreadcrumbButton.
-    #[prop(optional, into)] current: MaybeSignal<bool>,
+    #[prop(optional, into)]
+    current: MaybeSignal<bool>,
     children: Children,
 ) -> impl IntoView {
     view! {
         <button
-            class=class_list!["thaw-breadcrumb-button", ("thaw-breadcrumb-button--current", move || current.get()), class]
+            class=class_list![
+                "thaw-breadcrumb-button",
+                ("thaw-breadcrumb-button--current", move || current.get()),
+                class
+            ]
             aria-disabled=move || current.get().then(|| "true")
             aria-current=move || current.get().then(|| "page")
         >
@@ -51,8 +52,17 @@ pub fn BreadcrumbButton(
 pub fn BreadcrumbDivider(#[prop(optional, into)] class: MaybeProp<String>) -> impl IntoView {
     view! {
         <li class=class_list!["thaw-breadcrumb-divider", class] aria-hidden="true">
-            <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
-                <path d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z" fill="currentColor"></path>
+            <svg
+                fill="currentColor"
+                aria-hidden="true"
+                width="1em"
+                height="1em"
+                viewBox="0 0 20 20"
+            >
+                <path
+                    d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
+                    fill="currentColor"
+                ></path>
             </svg>
         </li>
     }
diff --git a/thaw/src/button/button_group.rs b/thaw/src/button/button_group.rs
index 4b1db52..d3edf2a 100644
--- a/thaw/src/button/button_group.rs
+++ b/thaw/src/button/button_group.rs
@@ -5,7 +5,8 @@ use thaw_utils::{class_list, mount_style};
 pub fn ButtonGroup(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Directions of buttons in the group.
-    #[prop(optional)] vertical: bool,
+    #[prop(optional)]
+    vertical: bool,
     children: Children,
 ) -> impl IntoView {
     mount_style("button-group", include_str!("./button-group.css"));
diff --git a/thaw/src/button/mod.rs b/thaw/src/button/mod.rs
index 1690f8c..619d027 100644
--- a/thaw/src/button/mod.rs
+++ b/thaw/src/button/mod.rs
@@ -125,24 +125,19 @@ pub fn Button(
             aria-disabled=move || disabled_focusable.get().then_some("true")
             on:click=on_click
         >
-             {
-
-                move || {
-                    let icon = icon.get();
-                    if let Some(icon) = icon {
-                        Either::Left(view!{<Icon icon=icon class="thaw-button__icon"/>})
-                    } else {
-                        Either::Right(())
-                    }
-                }
-            }
-            {
-                if let Some(children) = children {
-                    Either::Left(children())
+            {move || {
+                let icon = icon.get();
+                if let Some(icon) = icon {
+                    Either::Left(view! { <Icon icon=icon class="thaw-button__icon" /> })
                 } else {
                     Either::Right(())
                 }
-            }
+            }}
+            {if let Some(children) = children {
+                Either::Left(children())
+            } else {
+                Either::Right(())
+            }}
         </button>
     }
 }
diff --git a/thaw/src/calendar/mod.rs b/thaw/src/calendar/mod.rs
index 8775104..5943903 100644
--- a/thaw/src/calendar/mod.rs
+++ b/thaw/src/calendar/mod.rs
@@ -8,7 +8,8 @@ use thaw_utils::{class_list, mount_style, OptionModel};
 pub fn Calendar(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// selected date.
-    #[prop(optional, into)] value: OptionModel<NaiveDate>,
+    #[prop(optional, into)]
+    value: OptionModel<NaiveDate>,
 ) -> impl IntoView {
     mount_style("calendar", include_str!("./calendar.css"));
     let show_date = RwSignal::new(value.get_untracked().unwrap_or(now_date()));
@@ -87,9 +88,7 @@ pub fn Calendar(
     };
 
     view! {
-        <div
-            class=class_list!["thaw-calendar", class]
-        >
+        <div class=class_list!["thaw-calendar", class]>
             <div class="thaw-calendar__header">
                 <span class="thaw-calendar__header-title">
 
@@ -106,17 +105,9 @@ pub fn Calendar(
 
                 </span>
                 <ButtonGroup>
-                    <Button
-                        icon=icondata_ai::AiLeftOutlined
-                        on_click=previous_month
-                    />
-                    <Button on_click=today>
-                        "Today"
-                    </Button>
-                    <Button
-                        icon=icondata_ai::AiRightOutlined
-                        on_click=next_month
-                    />
+                    <Button icon=icondata_ai::AiLeftOutlined on_click=previous_month />
+                    <Button on_click=today>"Today"</Button>
+                    <Button icon=icondata_ai::AiRightOutlined on_click=next_month />
                 </ButtonGroup>
             </div>
             <div class="thaw-calendar__dates">
@@ -127,7 +118,7 @@ pub fn Calendar(
                         .into_iter()
                         .enumerate()
                         .map(|(index, date)| {
-                            view! { <CalendarItem value index=index date=date/> }
+                            view! { <CalendarItem value index=index date=date /> }
                         })
                         .collect_view()
                 }}
diff --git a/thaw/src/card/card_footer.rs b/thaw/src/card/card_footer.rs
index a18a96b..96e72ce 100644
--- a/thaw/src/card/card_footer.rs
+++ b/thaw/src/card/card_footer.rs
@@ -7,9 +7,5 @@ pub fn CardFooter(
     children: Children,
 ) -> impl IntoView {
     mount_style("card-footer", include_str!("./card-footer.css"));
-    view! {
-        <div class=class_list!["thaw-card-footer", class]>
-            {children()}
-        </div>
-    }
+    view! { <div class=class_list!["thaw-card-footer", class]>{children()}</div> }
 }
diff --git a/thaw/src/card/card_header.rs b/thaw/src/card/card_header.rs
index 2510763..769143b 100644
--- a/thaw/src/card/card_header.rs
+++ b/thaw/src/card/card_header.rs
@@ -12,18 +12,12 @@ pub fn CardHeader(
     mount_style("card-header", include_str!("./card-header.css"));
     view! {
         <div class=class_list!["thaw-card-header", class]>
-            <div class="thaw-card-header__header">
-                {children()}
-            </div>
+            <div class="thaw-card-header__header">{children()}</div>
             <OptionComp value=card_header_description let:description>
-                <div class="thaw-card-header__description">
-                    {(description.children)()}
-                </div>
+                <div class="thaw-card-header__description">{(description.children)()}</div>
             </OptionComp>
             <OptionComp value=card_header_action let:action>
-                <div class="thaw-card-header__action">
-                    {(action.children)()}
-                </div>
+                <div class="thaw-card-header__action">{(action.children)()}</div>
             </OptionComp>
         </div>
     }
diff --git a/thaw/src/card/mod.rs b/thaw/src/card/mod.rs
index 5a5d8fe..905d809 100644
--- a/thaw/src/card/mod.rs
+++ b/thaw/src/card/mod.rs
@@ -14,10 +14,7 @@ pub fn Card(#[prop(optional, into)] class: MaybeProp<String>, children: Children
     mount_style("card", include_str!("./card.css"));
 
     view! {
-        <div
-            class=class_list!["thaw-card", class]
-            role="group"
-        >
+        <div class=class_list!["thaw-card", class] role="group">
             {children()}
         </div>
     }
diff --git a/thaw/src/checkbox/mod.rs b/thaw/src/checkbox/mod.rs
index b34ecf7..6f35610 100644
--- a/thaw/src/checkbox/mod.rs
+++ b/thaw/src/checkbox/mod.rs
@@ -10,11 +10,14 @@ use thaw_utils::{class_list, mount_style, Model};
 pub fn Checkbox(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// The controlled value for the checkbox.
-    #[prop(optional, into)] checked: Model<bool>,
+    #[prop(optional, into)]
+    checked: Model<bool>,
     /// The value of the checkbox to be used in a checkbox group.
-    #[prop(optional, into)] value: Option<String>,
+    #[prop(optional, into)]
+    value: Option<String>,
     /// The Checkbox's label.
-    #[prop(optional, into)] label: MaybeProp<String>,
+    #[prop(optional, into)]
+    label: MaybeProp<String>,
 ) -> impl IntoView {
     mount_style("checkbox", include_str!("./checkbox.css"));
 
@@ -59,12 +62,11 @@ pub fn Checkbox(
     let checked = move || group_checked.get().unwrap_or_else(|| checked.get());
 
     view! {
-        <span
-            class=class_list![
-                "thaw-checkbox", ("thaw-checkbox--checked", checked),
-                class
-            ]
-        >
+        <span class=class_list![
+            "thaw-checkbox",
+            ("thaw-checkbox--checked", checked),
+            class
+        ]>
             <input
                 class="thaw-checkbox__input"
                 type="checkbox"
@@ -74,27 +76,41 @@ pub fn Checkbox(
                 on:change=on_change
             />
             <div aria-hidden="true" class="thaw-checkbox__indicator">
-                {
-                    move || if checked() {
+                {move || {
+                    if checked() {
                         view! {
-                            <svg fill="currentColor" aria-hidden="true" width="12" height="12" viewBox="0 0 12 12" style="display: inline;line-height: 0">
-                                <path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor"></path>
+                            <svg
+                                fill="currentColor"
+                                aria-hidden="true"
+                                width="12"
+                                height="12"
+                                viewBox="0 0 12 12"
+                                style="display: inline;line-height: 0"
+                            >
+                                <path
+                                    d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z"
+                                    fill="currentColor"
+                                ></path>
                             </svg>
-                        }.into()
+                        }
+                            .into()
                     } else {
                         None
                     }
-                }
+                }}
             </div>
-            {
-                move || if let Some(label) = label.get() {
+            {move || {
+                if let Some(label) = label.get() {
                     view! {
-                        <label class="thaw-checkbox__label" for=id.clone()>{label}</label>
-                    }.into()
+                        <label class="thaw-checkbox__label" for=id.clone()>
+                            {label}
+                        </label>
+                    }
+                        .into()
                 } else {
                     None
                 }
-            }
+            }}
         </span>
     }
 }
diff --git a/thaw/src/code/mod.rs b/thaw/src/code/mod.rs
index dc69690..33d617f 100644
--- a/thaw/src/code/mod.rs
+++ b/thaw/src/code/mod.rs
@@ -9,7 +9,10 @@ pub fn Code(
 ) -> impl IntoView {
     mount_style("code", include_str!("./code.css"));
     view! {
-        <code class=class_list!["thaw-code", class]>
+        <code class=class_list![
+            "thaw-code",
+            class
+        ]>
 
             {if let Some(inner_html) = inner_html {
                 EitherOf3::A(view! { <pre inner_html=inner_html></pre> })
diff --git a/thaw/src/color_picker/mod.rs b/thaw/src/color_picker/mod.rs
index e321ecb..3c7a4a9 100644
--- a/thaw/src/color_picker/mod.rs
+++ b/thaw/src/color_picker/mod.rs
@@ -158,8 +158,8 @@ pub fn ColorPicker(
                         data-thaw-id=config_provider.id().clone()
                     >
 
-                        <ColorPanel hue=hue.read_only() sv/>
-                        <HueSlider hue/>
+                        <ColorPanel hue=hue.read_only() sv />
+                        <HueSlider hue />
                     </div>
                 </CSSTransition>
             </Follower>
@@ -222,8 +222,7 @@ fn ColorPanel(hue: ReadSignal<f32>, sv: RwSignal<(f32, f32)>) -> impl IntoView {
                 style:background-image=move || {
                     format!("linear-gradient(90deg, white, hsl({}, 100%, 50%))", hue.get())
                 }
-            >
-            </div>
+            ></div>
             <div class="thaw-color-picker-popover__layer--shadowed"></div>
             <div
                 class="thaw-color-picker-popover__handle"
@@ -234,8 +233,7 @@ fn ColorPanel(hue: ReadSignal<f32>, sv: RwSignal<(f32, f32)>) -> impl IntoView {
                         sv.get().1 * 100.0,
                     )
                 }
-            >
-            </div>
+            ></div>
         </div>
     }
 }
diff --git a/thaw/src/combobox/combobox.rs b/thaw/src/combobox/combobox.rs
index a0e8637..ce5d8a7 100644
--- a/thaw/src/combobox/combobox.rs
+++ b/thaw/src/combobox/combobox.rs
@@ -10,7 +10,8 @@ pub fn Combobox(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] value: Model<String>,
     /// Selected option.
-    #[prop(optional, into)] selected_options: VecModel<String>,
+    #[prop(optional, into)]
+    selected_options: VecModel<String>,
     /// Whether the input is disabled.
     #[prop(optional, into)]
     disabled: MaybeSignal<bool>,
@@ -175,9 +176,7 @@ pub fn Combobox(
                     aria-expanded="true"
                     role="combobox"
                     class="thaw-combobox__input"
-                    prop:value=move || {
-                        value.get()
-                    }
+                    prop:value=move || { value.get() }
                     placeholder=move || placeholder.get()
                     disabled=move || disabled.get()
                     node_ref=input_ref
@@ -188,31 +187,45 @@ pub fn Combobox(
                         is_show_listbox.update(|show| *show = !*show);
                     }
                 />
-                {
-                    if clearable {
-                        view! {
-                            <span
+                {if clearable {
+                    view! {
+                        <span
+                            aria-hidden="true"
+                            class="thaw-combobox__clear-icon"
+                            style=move || {
+                                (!is_show_clear_icon.get())
+                                    .then(|| "display: none")
+                                    .unwrap_or_default()
+                            }
+                            node_ref=clear_icon_ref
+                        >
+                            <svg
+                                fill="currentColor"
                                 aria-hidden="true"
-                                class="thaw-combobox__clear-icon"
-                                style=move || (!is_show_clear_icon.get()).then(|| "display: none").unwrap_or_default()
-                                node_ref=clear_icon_ref
+                                width="1em"
+                                height="1em"
+                                viewBox="0 0 20 20"
                             >
-                                <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
-                                    <path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z" fill="currentColor"></path>
-                                </svg>
-                            </span>
-                        }.into()
-                    } else {
-                        None
+                                <path
+                                    d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+                                    fill="currentColor"
+                                ></path>
+                            </svg>
+                        </span>
                     }
-                }
+                        .into()
+                } else {
+                    None
+                }}
                 <span
                     aria-disabled=move || if disabled.get() { "true" } else { "" }
                     aria-expanded=move || is_show_listbox.get().to_string()
                     role="button"
                     aria-label="Open"
                     class="thaw-combobox__expand-icon"
-                    style=move || is_show_clear_icon.get().then(|| "display: none").unwrap_or_default()
+                    style=move || {
+                        is_show_clear_icon.get().then(|| "display: none").unwrap_or_default()
+                    }
                     on:click=move |_| {
                         if disabled.get_untracked() {
                             return;
@@ -223,9 +236,17 @@ pub fn Combobox(
                         }
                     }
                 >
-                    <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
-                        <path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor">
-                        </path>
+                    <svg
+                        fill="currentColor"
+                        aria-hidden="true"
+                        width="1em"
+                        height="1em"
+                        viewBox="0 0 20 20"
+                    >
+                        <path
+                            d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+                            fill="currentColor"
+                        ></path>
                     </svg>
                 </span>
             </div>
@@ -236,7 +257,12 @@ pub fn Combobox(
                 width=FollowerWidth::MinTarget
             >
                 <Provider value=combobox_injection>
-                    <Listbox open=is_show_listbox.read_only() set_listbox listbox_ref class="thaw-combobox__listbox">
+                    <Listbox
+                        open=is_show_listbox.read_only()
+                        set_listbox
+                        listbox_ref
+                        class="thaw-combobox__listbox"
+                    >
                         {children()}
                     </Listbox>
                 </Provider>
diff --git a/thaw/src/combobox/combobox_option.rs b/thaw/src/combobox/combobox_option.rs
index 552e4ba..716206c 100644
--- a/thaw/src/combobox/combobox_option.rs
+++ b/thaw/src/combobox/combobox_option.rs
@@ -62,33 +62,49 @@ pub fn ComboboxOption(
             ]
             on:click=on_click
         >
-            {
-                if combobox.multiselect {
-                    view! {
-                        <span aria-hidden="true" class="thaw-combobox-option__check-icon--multiselect">
-                            <If cond=is_selected>
-                                <Then slot>
-                                    <svg fill="currentColor" aria-hidden="true" width="12" height="12" viewBox="0 0 12 12">
-                                        <path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor"></path>
-                                    </svg>
-                                </Then>
-                            </If>
-                        </span>
-                    }.into_any()
-                } else {
-                    view! {
-                        <span aria-hidden="true" class="thaw-combobox-option__check-icon">
-                            <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
-                                <path d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z" fill="currentColor"></path>
-                            </svg>
-                        </span>
-                    }.into_any()
+            {if combobox.multiselect {
+                view! {
+                    <span aria-hidden="true" class="thaw-combobox-option__check-icon--multiselect">
+                        <If cond=is_selected>
+                            <Then slot>
+                                <svg
+                                    fill="currentColor"
+                                    aria-hidden="true"
+                                    width="12"
+                                    height="12"
+                                    viewBox="0 0 12 12"
+                                >
+                                    <path
+                                        d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z"
+                                        fill="currentColor"
+                                    ></path>
+                                </svg>
+                            </Then>
+                        </If>
+                    </span>
                 }
-            }
+                    .into_any()
+            } else {
+                view! {
+                    <span aria-hidden="true" class="thaw-combobox-option__check-icon">
+                        <svg
+                            fill="currentColor"
+                            aria-hidden="true"
+                            width="1em"
+                            height="1em"
+                            viewBox="0 0 20 20"
+                        >
+                            <path
+                                d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+                                fill="currentColor"
+                            ></path>
+                        </svg>
+                    </span>
+                }
+                    .into_any()
+            }}
             <OptionComp value=children let:children>
-                <Fallback slot>
-                    {text.get_value()}
-                </Fallback>
+                <Fallback slot>{text.get_value()}</Fallback>
                 {children()}
             </OptionComp>
         </div>
diff --git a/thaw/src/combobox/combobox_option_group.rs b/thaw/src/combobox/combobox_option_group.rs
index 6188551..b1bf8cb 100644
--- a/thaw/src/combobox/combobox_option_group.rs
+++ b/thaw/src/combobox/combobox_option_group.rs
@@ -5,7 +5,8 @@ use thaw_utils::{class_list, mount_style};
 pub fn ComboboxOptionGroup(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Label of the group.
-    #[prop(into)] label: String,
+    #[prop(into)]
+    label: String,
     children: Children,
 ) -> impl IntoView {
     mount_style(
diff --git a/thaw/src/date_picker/mod.rs b/thaw/src/date_picker/mod.rs
index 39ee46f..df3024f 100644
--- a/thaw/src/date_picker/mod.rs
+++ b/thaw/src/date_picker/mod.rs
@@ -10,7 +10,8 @@ use thaw_utils::{class_list, mount_style, now_date, ComponentRef, OptionModel};
 pub fn DatePicker(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Set the date picker value.
-    #[prop(optional, into)] value: OptionModel<NaiveDate>,
+    #[prop(optional, into)]
+    value: OptionModel<NaiveDate>,
 ) -> impl IntoView {
     mount_style("date-picker", include_str!("./date-picker.css"));
     let date_picker_ref = NodeRef::<html::Div>::new();
@@ -71,7 +72,7 @@ pub fn DatePicker(
             <div node_ref=date_picker_ref class=class_list!["thaw-date-picker", class]>
                 <Input value=show_date_text on_focus=open_panel on_blur=on_input_blur>
                     <InputSuffix slot>
-                        <Icon icon=icondata_ai::AiCalendarOutlined style="font-size: 18px"/>
+                        <Icon icon=icondata_ai::AiCalendarOutlined style="font-size: 18px" />
                     </InputSuffix>
                 </Input>
             </div>
diff --git a/thaw/src/date_picker/panel/date_panel.rs b/thaw/src/date_picker/panel/date_panel.rs
index b56960c..abb6d31 100644
--- a/thaw/src/date_picker/panel/date_panel.rs
+++ b/thaw/src/date_picker/panel/date_panel.rs
@@ -153,7 +153,7 @@ pub fn DatePanel(
                                         close_panel(Some(*date.deref()));
                                     }
                                 };
-                                view! { <DatePanelItem value date=date on:click=on_click/> }
+                                view! { <DatePanelItem value date=date on:click=on_click /> }
                             })
                             .collect_view()
                     }}
diff --git a/thaw/src/date_picker/panel/mod.rs b/thaw/src/date_picker/panel/mod.rs
index 7b22ce0..01697d1 100644
--- a/thaw/src/date_picker/panel/mod.rs
+++ b/thaw/src/date_picker/panel/mod.rs
@@ -83,14 +83,22 @@ pub fn Panel(
                         PanelVariant::Date => {
                             let close_panel = close_panel.clone();
                             view! {
-                                <DatePanel value=selected_date show_date close_panel panel_variant/>
-                            }.into_any()
+                                <DatePanel
+                                    value=selected_date
+                                    show_date
+                                    close_panel
+                                    panel_variant
+                                />
+                            }
+                                .into_any()
                         }
                         PanelVariant::Month => {
-                            view! { <MonthPanel date_panel_show_date=show_date panel_variant/> }.into_any()
+                            view! { <MonthPanel date_panel_show_date=show_date panel_variant /> }
+                                .into_any()
                         }
                         PanelVariant::Year => {
-                            view! { <YearPanel date_panel_show_date=show_date panel_variant/> }.into_any()
+                            view! { <YearPanel date_panel_show_date=show_date panel_variant /> }
+                                .into_any()
                         }
                     }
                 }}
diff --git a/thaw/src/date_picker/panel/month_panel.rs b/thaw/src/date_picker/panel/month_panel.rs
index ff0fc3e..8bb377c 100644
--- a/thaw/src/date_picker/panel/month_panel.rs
+++ b/thaw/src/date_picker/panel/month_panel.rs
@@ -61,7 +61,7 @@ pub fn MonthPanel(
                                 });
                             panel_variant.set(PanelVariant::Date);
                         };
-                        view! { <MonthPanelItem date_panel_show_date month on:click=on_click/> }
+                        view! { <MonthPanelItem date_panel_show_date month on:click=on_click /> }
                     })
                     .collect_view()}
 
diff --git a/thaw/src/date_picker/panel/year_panel.rs b/thaw/src/date_picker/panel/year_panel.rs
index 553f072..a07dbdf 100644
--- a/thaw/src/date_picker/panel/year_panel.rs
+++ b/thaw/src/date_picker/panel/year_panel.rs
@@ -62,7 +62,7 @@ pub fn YearPanel(
                                     });
                                 panel_variant.set(PanelVariant::Month);
                             };
-                            view! { <YearPanelItem date_panel_show_date year on:click=on_click/> }
+                            view! { <YearPanelItem date_panel_show_date year on:click=on_click /> }
                         })
                         .collect_view()
                 }}
diff --git a/thaw/src/dialog/dialog.rs b/thaw/src/dialog/dialog.rs
index 6c25133..4b09127 100644
--- a/thaw/src/dialog/dialog.rs
+++ b/thaw/src/dialog/dialog.rs
@@ -52,9 +52,7 @@ pub fn Dialog(
                             aria-hidden="true"
                         ></div>
                     </CSSTransition>
-                    <Provider value=DialogInjection{open}>
-                        {children()}
-                    </Provider>
+                    <Provider value=DialogInjection { open }>{children()}</Provider>
                 </div>
             </FocusTrap>
         </Teleport>
diff --git a/thaw/src/dialog/dialog_actions.rs b/thaw/src/dialog/dialog_actions.rs
index 5a02319..cc3d894 100644
--- a/thaw/src/dialog/dialog_actions.rs
+++ b/thaw/src/dialog/dialog_actions.rs
@@ -6,9 +6,5 @@ pub fn DialogActions(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <div class=class_list!["thaw-dialog-actions", class]>
-            {children()}
-        </div>
-    }
+    view! { <div class=class_list!["thaw-dialog-actions", class]>{children()}</div> }
 }
diff --git a/thaw/src/dialog/dialog_body.rs b/thaw/src/dialog/dialog_body.rs
index 18c60ee..ed70243 100644
--- a/thaw/src/dialog/dialog_body.rs
+++ b/thaw/src/dialog/dialog_body.rs
@@ -6,9 +6,5 @@ pub fn DialogBody(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <div class=class_list!["thaw-dialog-body", class]>
-            {children()}
-        </div>
-    }
+    view! { <div class=class_list!["thaw-dialog-body", class]>{children()}</div> }
 }
diff --git a/thaw/src/dialog/dialog_content.rs b/thaw/src/dialog/dialog_content.rs
index 288228e..598d57d 100644
--- a/thaw/src/dialog/dialog_content.rs
+++ b/thaw/src/dialog/dialog_content.rs
@@ -6,9 +6,5 @@ pub fn DialogContent(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <h2 class=class_list!["thaw-dialog-content", class]>
-            {children()}
-        </h2>
-    }
+    view! { <h2 class=class_list!["thaw-dialog-content", class]>{children()}</h2> }
 }
diff --git a/thaw/src/dialog/dialog_title.rs b/thaw/src/dialog/dialog_title.rs
index c928623..7c8cc77 100644
--- a/thaw/src/dialog/dialog_title.rs
+++ b/thaw/src/dialog/dialog_title.rs
@@ -6,9 +6,5 @@ pub fn DialogTitle(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <h2 class=class_list!["thaw-dialog-title", class]>
-            {children()}
-        </h2>
-    }
+    view! { <h2 class=class_list!["thaw-dialog-title", class]>{children()}</h2> }
 }
diff --git a/thaw/src/divider/mod.rs b/thaw/src/divider/mod.rs
index 49ab2f9..c1b455c 100644
--- a/thaw/src/divider/mod.rs
+++ b/thaw/src/divider/mod.rs
@@ -6,21 +6,24 @@ use thaw_utils::{class_list, mount_style};
 pub fn Divider(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// A divider can be horizontal (default) or vertical.
-    #[prop(optional, into)] vertical: MaybeSignal<bool>,
+    #[prop(optional, into)]
+    vertical: MaybeSignal<bool>,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     mount_style("divider", include_str!("./divider.css"));
 
     view! {
         <div
-            class=class_list!["thaw-divider", ("thaw-divider--vertical", move || vertical.get()), class]
+            class=class_list![
+                "thaw-divider",
+                ("thaw-divider--vertical", move || vertical.get()),
+                class
+            ]
             aria-orientation=move || if vertical.get() { "vertical" } else { "horizontal" }
             role="separator"
         >
             <OptionComp value=children let:children>
-                <div class="thaw-divider__wrapper">
-                    {children()}
-                </div>
+                <div class="thaw-divider__wrapper">{children()}</div>
             </OptionComp>
         </div>
     }
diff --git a/thaw/src/drawer/drawer_body.rs b/thaw/src/drawer/drawer_body.rs
index fda5874..8700c0b 100644
--- a/thaw/src/drawer/drawer_body.rs
+++ b/thaw/src/drawer/drawer_body.rs
@@ -9,9 +9,7 @@ pub fn DrawerBody(
 ) -> impl IntoView {
     view! {
         <Scrollbar>
-            <div class=class_list!["thaw-drawer-body", class]>
-                {children()}
-            </div>
+            <div class=class_list!["thaw-drawer-body", class]>{children()}</div>
         </Scrollbar>
     }
 }
diff --git a/thaw/src/drawer/drawer_header.rs b/thaw/src/drawer/drawer_header.rs
index 7bb202a..c261936 100644
--- a/thaw/src/drawer/drawer_header.rs
+++ b/thaw/src/drawer/drawer_header.rs
@@ -6,9 +6,5 @@ pub fn DrawerHeader(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <header class=class_list!["thaw-drawer-header", class]>
-            {children()}
-        </header>
-    }
+    view! { <header class=class_list!["thaw-drawer-header", class]>{children()}</header> }
 }
diff --git a/thaw/src/drawer/drawer_header_title.rs b/thaw/src/drawer/drawer_header_title.rs
index b1c90a9..44836f9 100644
--- a/thaw/src/drawer/drawer_header_title.rs
+++ b/thaw/src/drawer/drawer_header_title.rs
@@ -10,13 +10,9 @@ pub fn DrawerHeaderTitle(
 ) -> impl IntoView {
     view! {
         <div class=class_list!["thaw-drawer-header-title", class]>
-            <h2 class="thaw-drawer-header-title__heading">
-                {children()}
-            </h2>
+            <h2 class="thaw-drawer-header-title__heading">{children()}</h2>
             <OptionComp value=drawer_header_title_action let:action>
-                <div class="thaw-drawer-header-title__action">
-                    {(action.children)()}
-                </div>
+                <div class="thaw-drawer-header-title__action">{(action.children)()}</div>
             </OptionComp>
         </div>
     }
diff --git a/thaw/src/drawer/inline_drawer.rs b/thaw/src/drawer/inline_drawer.rs
index b2af52d..aa86577 100644
--- a/thaw/src/drawer/inline_drawer.rs
+++ b/thaw/src/drawer/inline_drawer.rs
@@ -7,11 +7,14 @@ use thaw_utils::{class_list, mount_style, Model};
 pub fn InlineDrawer(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Controls the open state of the Drawer.
-    #[prop(into)] open: Model<bool>,
+    #[prop(into)]
+    open: Model<bool>,
     /// Position of the drawer.
-    #[prop(optional, into)] position: MaybeSignal<DrawerPosition>,
+    #[prop(optional, into)]
+    position: MaybeSignal<DrawerPosition>,
     /// Size of the drawer.
-    #[prop(optional, into)] size: MaybeSignal<DrawerSize>,
+    #[prop(optional, into)]
+    size: MaybeSignal<DrawerSize>,
     children: Children,
 ) -> impl IntoView {
     mount_style("drawer", include_str!("./drawer.css"));
@@ -41,10 +44,10 @@ pub fn InlineDrawer(
                     class
                 ]
                 style=move || {
-                    let size = move || {format!("--thaw-drawer--size: {}", size.get().as_size_str(position))};
-                    display
-                        .get()
-                        .map_or_else(size, |d| d.to_string())
+                    let size = move || {
+                        format!("--thaw-drawer--size: {}", size.get().as_size_str(position))
+                    };
+                    display.get().map_or_else(size, |d| d.to_string())
                 }
                 node_ref=drawer_ref
             >
diff --git a/thaw/src/drawer/overlay_drawer.rs b/thaw/src/drawer/overlay_drawer.rs
index cc8378f..63fc3d7 100644
--- a/thaw/src/drawer/overlay_drawer.rs
+++ b/thaw/src/drawer/overlay_drawer.rs
@@ -14,7 +14,8 @@ pub fn OverlayDrawer(
     #[prop(default = true.into(), into)]
     mask_closeable: MaybeSignal<bool>,
     /// Whether to close drawer on Esc is pressed.
-    #[prop(optional, into)] close_on_esc: bool,
+    #[prop(optional, into)]
+    close_on_esc: bool,
     /// Position of the drawer.
     #[prop(optional, into)]
     position: MaybeSignal<DrawerPosition>,
@@ -55,7 +56,10 @@ pub fn OverlayDrawer(
     view! {
         <Teleport immediate=open.signal()>
             <FocusTrap disabled=!close_on_esc active=open.signal() on_esc>
-                <div class=class_list!["thaw-config-provider thaw-overlay-drawer-container", class] data-thaw-id=config_provider.id().clone()>
+                <div
+                    class=class_list!["thaw-config-provider thaw-overlay-drawer-container", class]
+                    data-thaw-id=config_provider.id().clone()
+                >
                     <CSSTransition
                         node_ref=mask_ref
                         appear=open.get_untracked()
@@ -88,10 +92,13 @@ pub fn OverlayDrawer(
                             ]
 
                             style=move || {
-                                let size = move || {format!("--thaw-drawer--size: {}", size.get().as_size_str(position))};
-                                display
-                                    .get()
-                                    .map_or_else(size, |d| d.to_string())
+                                let size = move || {
+                                    format!(
+                                        "--thaw-drawer--size: {}",
+                                        size.get().as_size_str(position),
+                                    )
+                                };
+                                display.get().map_or_else(size, |d| d.to_string())
                             }
                             node_ref=drawer_ref
                             role="dialog"
diff --git a/thaw/src/grid/grid_item.rs b/thaw/src/grid/grid_item.rs
index 4c8e3d6..06c23a2 100644
--- a/thaw/src/grid/grid_item.rs
+++ b/thaw/src/grid/grid_item.rs
@@ -41,10 +41,7 @@ pub fn GridItem(
     });
 
     view! {
-        <div
-            class=class_list!["thaw-grid-item", class]
-            style=move || style.get()
-        >
+        <div class=class_list!["thaw-grid-item", class] style=move || style.get()>
             {children()}
         </div>
     }
diff --git a/thaw/src/grid/mod.rs b/thaw/src/grid/mod.rs
index 8792c08..42b0df5 100644
--- a/thaw/src/grid/mod.rs
+++ b/thaw/src/grid/mod.rs
@@ -29,10 +29,7 @@ pub fn Grid(
 
     view! {
         <Provider value=GridInjection::new(x_gap)>
-            <div
-                class=class_list!["thaw-grid", class]
-                style=move || style.get()
-            >
+            <div class=class_list!["thaw-grid", class] style=move || style.get()>
                 {children()}
             </div>
         </Provider>
diff --git a/thaw/src/image/mod.rs b/thaw/src/image/mod.rs
index 9612659..5f115bd 100644
--- a/thaw/src/image/mod.rs
+++ b/thaw/src/image/mod.rs
@@ -11,9 +11,11 @@ pub fn Image(
     #[prop(optional, into)]
     alt: MaybeProp<String>,
     /// Image width.
-    #[prop(optional, into)] width: MaybeProp<String>,
+    #[prop(optional, into)]
+    width: MaybeProp<String>,
     /// Image height.
-    #[prop(optional, into)] height: MaybeProp<String>,
+    #[prop(optional, into)]
+    height: MaybeProp<String>,
     /// An image can appear square, circular, or rounded.
     #[prop(optional, into)]
     shape: MaybeSignal<ImageShape>,
diff --git a/thaw/src/layout/layout_header.rs b/thaw/src/layout/layout_header.rs
index 7b81fd8..4e8fcb0 100644
--- a/thaw/src/layout/layout_header.rs
+++ b/thaw/src/layout/layout_header.rs
@@ -6,9 +6,5 @@ pub fn LayoutHeader(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <div class=class_list!["thaw-layout-header", class]>
-            {children()}
-        </div>
-    }
+    view! { <div class=class_list!["thaw-layout-header", class]>{children()}</div> }
 }
diff --git a/thaw/src/layout/layout_sider.rs b/thaw/src/layout/layout_sider.rs
index 4716349..37d852e 100644
--- a/thaw/src/layout/layout_sider.rs
+++ b/thaw/src/layout/layout_sider.rs
@@ -6,9 +6,11 @@ use thaw_utils::{class_list, mount_style};
 pub fn LayoutSider(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Addtional classes for the scroll element.
-    #[prop(optional, into)] content_class: MaybeProp<String>,
+    #[prop(optional, into)]
+    content_class: MaybeProp<String>,
     /// Style of scrollable content node.
-    #[prop(optional, into)] content_style: MaybeProp<String>,
+    #[prop(optional, into)]
+    content_style: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
     mount_style("layout-sider", include_str!("./layout-sider.css"));
diff --git a/thaw/src/layout/mod.rs b/thaw/src/layout/mod.rs
index 8573f41..48d5b44 100644
--- a/thaw/src/layout/mod.rs
+++ b/thaw/src/layout/mod.rs
@@ -28,18 +28,22 @@ impl LayoutPosition {
 pub fn Layout(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Addtional classes for the layout element.
-    #[prop(optional, into)] content_class: MaybeProp<String>,
+    #[prop(optional, into)]
+    content_class: MaybeProp<String>,
     /// Style of scrollable content node.
-    #[prop(optional, into)] content_style: MaybeProp<String>,
+    #[prop(optional, into)]
+    content_style: MaybeProp<String>,
     /// static position will make it css position set to static.
     /// absolute position will make it css position set to absolute and left,
     /// right, top, bottom to 0. absolute position is very useful
     /// when you want to make content scroll in a fixed container or make
     /// the whole page's layout in a fixed position. You may need to change
     /// the style of the component to make it display as you expect.
-    #[prop(optional)] position: LayoutPosition,
+    #[prop(optional)]
+    position: LayoutPosition,
     /// Whether the component has sider inside. If so it must be true.
-    #[prop(optional, into)] has_sider: MaybeSignal<bool>,
+    #[prop(optional, into)]
+    has_sider: MaybeSignal<bool>,
     children: Children,
 ) -> impl IntoView {
     mount_style("layout", include_str!("./layout.css"));
diff --git a/thaw/src/loading_bar/loading_bar_provider.rs b/thaw/src/loading_bar/loading_bar_provider.rs
index 1e76097..53f382a 100644
--- a/thaw/src/loading_bar/loading_bar_provider.rs
+++ b/thaw/src/loading_bar/loading_bar_provider.rs
@@ -12,7 +12,7 @@ pub fn LoadingBarProvider(children: Children) -> impl IntoView {
             loading_bar_ref,
         }>
             {children()} <Teleport>
-                <LoadingBar comp_ref=loading_bar_ref/>
+                <LoadingBar comp_ref=loading_bar_ref />
             </Teleport>
         </Provider>
     }
diff --git a/thaw/src/menu/menu_item.rs b/thaw/src/menu/menu_item.rs
index 0dbca2f..ccfcd03 100644
--- a/thaw/src/menu/menu_item.rs
+++ b/thaw/src/menu/menu_item.rs
@@ -54,7 +54,7 @@ pub fn MenuItem(
                     </If>
                 </Fallback>
 
-                <Icon icon=icon style="font-size: 18px; margin-right: 8px"/>
+                <Icon icon=icon style="font-size: 18px; margin-right: 8px" />
             </OptionComp>
             <span style="flex-grow: 1">{children()}</span>
         </div>
diff --git a/thaw/src/message_bar/message_bar.rs b/thaw/src/message_bar/message_bar.rs
index 7a1da57..866d7bb 100644
--- a/thaw/src/message_bar/message_bar.rs
+++ b/thaw/src/message_bar/message_bar.rs
@@ -24,33 +24,80 @@ pub fn MessageBar(
             role="group"
         >
             <div class="thaw-message-bar__icon">
-                {
-                    move || match intent.get() {
-                        MessageBarIntent::Info => EitherOf4::A(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 => EitherOf4::B(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 => EitherOf4::C(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 => EitherOf4::D(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>
-                        }),
+                {move || match intent.get() {
+                    MessageBarIntent::Info => {
+                        EitherOf4::A(
+                            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 => {
+                        EitherOf4::B(
+                            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 => {
+                        EitherOf4::C(
+                            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 => {
+                        EitherOf4::D(
+                            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()}
diff --git a/thaw/src/message_bar/message_bar_actions.rs b/thaw/src/message_bar/message_bar_actions.rs
index 59d73a6..f67bb93 100644
--- a/thaw/src/message_bar/message_bar_actions.rs
+++ b/thaw/src/message_bar/message_bar_actions.rs
@@ -6,9 +6,7 @@ pub fn MessageBarActions(
     children: Children,
 ) -> impl IntoView {
     view! {
-        <div class="thaw-message-bar-actions">
-            {children()}
-        </div>
+        <div class="thaw-message-bar-actions">{children()}</div>
         <div class="tha-message-bar-actions__container-action">
             {(message_bar_container_action.children)()}
         </div>
diff --git a/thaw/src/message_bar/message_bar_body.rs b/thaw/src/message_bar/message_bar_body.rs
index bd65f05..b9d3c78 100644
--- a/thaw/src/message_bar/message_bar_body.rs
+++ b/thaw/src/message_bar/message_bar_body.rs
@@ -6,9 +6,5 @@ pub fn MessageBarBody(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <div class=class_list!["thaw-message-bar-body", class]>
-            {children()}
-        </div>
-    }
+    view! { <div class=class_list!["thaw-message-bar-body", class]>{children()}</div> }
 }
diff --git a/thaw/src/message_bar/message_bar_title.rs b/thaw/src/message_bar/message_bar_title.rs
index 3044c38..7ba2e4d 100644
--- a/thaw/src/message_bar/message_bar_title.rs
+++ b/thaw/src/message_bar/message_bar_title.rs
@@ -6,9 +6,5 @@ pub fn MessageBarTitle(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <span class=class_list!["thaw-message-bar-title", class]>
-            {children()}
-        </span>
-    }
+    view! { <span class=class_list!["thaw-message-bar-title", class]>{children()}</span> }
 }
diff --git a/thaw/src/nav/nav_category.rs b/thaw/src/nav/nav_category.rs
index d2550e6..3501032 100644
--- a/thaw/src/nav/nav_category.rs
+++ b/thaw/src/nav/nav_category.rs
@@ -77,17 +77,13 @@ pub fn NavCategory(
             on:click=on_click
             aria-expanded=move || is_show_group.get()
         >
-            {
-                move || {
-                    if let Some(icon) = item_icon.get() {
-                        Either::Left(view! {
-                            <Icon icon=icon style="font-size: 20px"/>
-                        })
-                    } else {
-                        Either::Right(())
-                    }
+            {move || {
+                if let Some(icon) = item_icon.get() {
+                    Either::Left(view! { <Icon icon=icon style="font-size: 20px" /> })
+                } else {
+                    Either::Right(())
                 }
-            }
+            }}
             {item_children()}
             <span aria-hidden="true" class="thaw-nav-category-item__expand-icon">
                 <svg
@@ -96,13 +92,18 @@ pub fn NavCategory(
                     width="20"
                     height="20"
                     viewBox="0 0 20 20"
-                    style=move || if is_show_group.get() {
-                        "transform: rotate(90deg)"
-                    } else {
-                        "transform: rotate(0deg)"
+                    style=move || {
+                        if is_show_group.get() {
+                            "transform: rotate(90deg)"
+                        } else {
+                            "transform: rotate(0deg)"
+                        }
                     }
                 >
-                    <path d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z" fill="currentColor"></path>
+                    <path
+                        d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
+                        fill="currentColor"
+                    ></path>
                 </svg>
             </span>
         </button>
diff --git a/thaw/src/nav/nav_drawer.rs b/thaw/src/nav/nav_drawer.rs
index d14a20e..da7937e 100644
--- a/thaw/src/nav/nav_drawer.rs
+++ b/thaw/src/nav/nav_drawer.rs
@@ -19,15 +19,16 @@ pub fn NavDrawer(
     mount_style("nav-drawer", include_str!("./nav-drawer.css"));
 
     view! {
-        <Provider value=NavDrawerInjection{ selected_value, selected_category_value }>
+        <Provider value=NavDrawerInjection {
+            selected_value,
+            selected_category_value,
+        }>
             <div class=class_list!["thaw-nav-drawer", class]>
                 <OptionComp value=nav_drawer_header let:header>
                     <header class="thaw-nav-drawer__header">{(header.children)()}</header>
                 </OptionComp>
                 <div class="thaw-nav-drawer__body">
-                    <Scrollbar>
-                        {children()}
-                    </Scrollbar>
+                    <Scrollbar>{children()}</Scrollbar>
                 </div>
                 <OptionComp value=nav_drawer_footer let:footer>
                     <footer class="thaw-nav-drawer__footer">{(footer.children)()}</footer>
diff --git a/thaw/src/nav/nav_item.rs b/thaw/src/nav/nav_item.rs
index baf1199..3d8d134 100644
--- a/thaw/src/nav/nav_item.rs
+++ b/thaw/src/nav/nav_item.rs
@@ -25,17 +25,13 @@ pub fn NavItem(
 
     let children = || {
         view! {
-            {
-                move || {
-                    if let Some(icon) = icon.get() {
-                        Either::Left(view! {
-                            <Icon icon=icon style="font-size: 20px"/>
-                        })
-                    } else {
-                        Either::Right(())
-                    }
+            {move || {
+                if let Some(icon) = icon.get() {
+                    Either::Left(view! { <Icon icon=icon style="font-size: 20px" /> })
+                } else {
+                    Either::Right(())
                 }
-            }
+            }}
             {children()}
         }
     };
@@ -49,7 +45,11 @@ pub fn NavItem(
     if let Some(href) = href {
         Either::Left(view! {
             <a
-                class=class_list!["thaw-nav-item", ("thaw-nav-item--selected", move || selected.get()), class]
+                class=class_list![
+                    "thaw-nav-item",
+                    ("thaw-nav-item--selected", move || selected.get()),
+                    class
+                ]
                 href=move || href.get()
                 on:click=on_click
             >
@@ -59,7 +59,11 @@ pub fn NavItem(
     } else {
         Either::Right(view! {
             <button
-                class=class_list!["thaw-nav-item", ("thaw-nav-item--selected", move || selected.get()), class]
+                class=class_list![
+                    "thaw-nav-item",
+                    ("thaw-nav-item--selected", move || selected.get()),
+                    class
+                ]
                 on:click=on_click
             >
                 {children()}
@@ -81,8 +85,8 @@ pub fn NavSubItem(
     });
 
     if let Some(href) = href {
-        Either::Left(view! { <NavItem class href icon value children/> })
+        Either::Left(view! { <NavItem class href icon value children /> })
     } else {
-        Either::Right(view! { <NavItem class icon value children/> })
+        Either::Right(view! { <NavItem class icon value children /> })
     }
 }
diff --git a/thaw/src/pagination/mod.rs b/thaw/src/pagination/mod.rs
index 8a392bf..310a6a0 100644
--- a/thaw/src/pagination/mod.rs
+++ b/thaw/src/pagination/mod.rs
@@ -7,11 +7,14 @@ use thaw_utils::{class_list, mount_style, Model};
 pub fn Pagination(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// The current page starts from 1.
-    #[prop(default = 1.into(), into)] page: Model<usize>,
+    #[prop(default = 1.into(), into)]
+    page: Model<usize>,
     /// The total numbers of pages.
-    #[prop(into)] page_count: MaybeSignal<usize>,
+    #[prop(into)]
+    page_count: MaybeSignal<usize>,
     /// Number of visible pages after and before the current page.
-    #[prop(default = 1.into(), into)] sibling_count: MaybeSignal<usize>,
+    #[prop(default = 1.into(), into)]
+    sibling_count: MaybeSignal<usize>,
 ) -> impl IntoView {
     mount_style("pagination", include_str!("./pagination.css"));
 
@@ -34,35 +37,38 @@ pub fn Pagination(
                 icon=icondata_ai::AiLeftOutlined
                 disabled=no_previous
             />
-            {
-                move || {
-                    use_pagination(page.get(), page_count.get(), sibling_count.get()).into_iter().map(|item| {
+            {move || {
+                use_pagination(page.get(), page_count.get(), sibling_count.get())
+                    .into_iter()
+                    .map(|item| {
                         if let PaginationItem::Number(nb) = item {
-                            Either::Left(view! {
-                                <Button
-                                    class="thaw-pagination-item"
-                                    appearance=Memo::new(move |_| if page.get() == nb {
-                                        ButtonAppearance::Primary
-                                    } else {
-                                        ButtonAppearance::Secondary
-                                    })
-                                    on_click=move |_| {
-                                        if page.get() != nb {
-                                            page.set(nb)
+                            Either::Left(
+                                view! {
+                                    <Button
+                                        class="thaw-pagination-item"
+                                        appearance=Memo::new(move |_| {
+                                            if page.get() == nb {
+                                                ButtonAppearance::Primary
+                                            } else {
+                                                ButtonAppearance::Secondary
+                                            }
+                                        })
+                                        on_click=move |_| {
+                                            if page.get() != nb {
+                                                page.set(nb)
+                                            }
                                         }
-                                    }
-                                >
-                                    {nb}
-                                </Button>
-                            })
+                                    >
+                                        {nb}
+                                    </Button>
+                                },
+                            )
                         } else {
-                            Either::Right(view! {
-                                <div class="thaw-pagination-item">"..."</div>
-                            })
+                            Either::Right(view! { <div class="thaw-pagination-item">"..."</div> })
                         }
-                    }).collect_view()
-                }
-            }
+                    })
+                    .collect_view()
+            }}
             <Button
                 class="thaw-pagination-item"
                 on_click=on_click_next
diff --git a/thaw/src/popover/mod.rs b/thaw/src/popover/mod.rs
index edbf740..006482d 100644
--- a/thaw/src/popover/mod.rs
+++ b/thaw/src/popover/mod.rs
@@ -146,8 +146,7 @@ pub fn Popover(
                         on:mouseleave=on_mouse_leave
                     >
                         {children()}
-                        <div class="thaw-popover-surface__angle">
-                        </div>
+                        <div class="thaw-popover-surface__angle"></div>
                     </div>
                 </CSSTransition>
             </Follower>
diff --git a/thaw/src/progress_bar/progress_bar.rs b/thaw/src/progress_bar/progress_bar.rs
index 9e4a4e9..7f419c1 100644
--- a/thaw/src/progress_bar/progress_bar.rs
+++ b/thaw/src/progress_bar/progress_bar.rs
@@ -36,8 +36,7 @@ pub fn ProgressBar(
             aria-valuemin="0"
             aria-valuenow=move || value.get()
         >
-            <div class="thaw-progress-bar__bar" style=style>
-            </div>
+            <div class="thaw-progress-bar__bar" style=style></div>
         </div>
     }
 }
diff --git a/thaw/src/progress_bar/progress_circle.rs b/thaw/src/progress_bar/progress_circle.rs
index a41787c..de3a6a8 100644
--- a/thaw/src/progress_bar/progress_circle.rs
+++ b/thaw/src/progress_bar/progress_circle.rs
@@ -86,7 +86,8 @@ pub fn ProgressCircle(
                     <div class="thaw-progress-circle__content thaw-progress-circle__content--text">
                         {move || value.get()} "%"
                     </div>
-                }.into_any()
+                }
+                    .into_any()
             }}
 
         </div>
diff --git a/thaw/src/radio/mod.rs b/thaw/src/radio/mod.rs
index c9354d4..421e835 100644
--- a/thaw/src/radio/mod.rs
+++ b/thaw/src/radio/mod.rs
@@ -46,15 +46,18 @@ pub fn Radio(
                 on:change=on_change
             />
             <div aria-hidden="true" class="thaw-radio__indicator"></div>
-            {
-                move || if let Some(label) = label.get() {
+            {move || {
+                if let Some(label) = label.get() {
                     view! {
-                        <label class="thaw-radio__label" for=id.clone()>{label}</label>
-                    }.into()
+                        <label class="thaw-radio__label" for=id.clone()>
+                            {label}
+                        </label>
+                    }
+                        .into()
                 } else {
                     None
                 }
-            }
+            }}
         </span>
     }
 }
diff --git a/thaw/src/radio/radio_group.rs b/thaw/src/radio/radio_group.rs
index eb2e2ed..41a7ed5 100644
--- a/thaw/src/radio/radio_group.rs
+++ b/thaw/src/radio/radio_group.rs
@@ -5,7 +5,8 @@ use thaw_utils::{class_list, OptionModel};
 pub fn RadioGroup(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// The selected Radio item in this group.
-    #[prop(optional, into)] value: OptionModel<String>,
+    #[prop(optional, into)]
+    value: OptionModel<String>,
     /// The name of this radio group.
     #[prop(optional, into)]
     name: Option<String>,
@@ -14,8 +15,12 @@ pub fn RadioGroup(
     let name = name.unwrap_or_else(|| uuid::Uuid::new_v4().to_string());
 
     view! {
-        <Provider value=RadioGroupInjection{ value, name }>
-            <div class=class_list!["thaw-radio-group", class] role="radiogroup" style="display: flex;align-items: flex-start">
+        <Provider value=RadioGroupInjection { value, name }>
+            <div
+                class=class_list!["thaw-radio-group", class]
+                role="radiogroup"
+                style="display: flex;align-items: flex-start"
+            >
                 {children()}
             </div>
         </Provider>
diff --git a/thaw/src/scrollbar/mod.rs b/thaw/src/scrollbar/mod.rs
index 5852329..6d4b37b 100644
--- a/thaw/src/scrollbar/mod.rs
+++ b/thaw/src/scrollbar/mod.rs
@@ -6,11 +6,14 @@ pub fn Scrollbar(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] style: MaybeProp<String>,
     /// Class name of content div.
-    #[prop(optional, into)] content_class: MaybeProp<String>,
+    #[prop(optional, into)]
+    content_class: MaybeProp<String>,
     /// Style of content div.
-    #[prop(optional, into)] content_style: MaybeProp<String>,
+    #[prop(optional, into)]
+    content_style: MaybeProp<String>,
     /// Size of scrollbar.
-    #[prop(default = 8)] size: u8,
+    #[prop(default = 8)]
+    size: u8,
     #[prop(optional)] comp_ref: Option<ComponentRef<ScrollbarRef>>,
     children: Children,
 ) -> impl IntoView {
@@ -299,15 +302,10 @@ pub fn Scrollbar(
 
             <div class="thaw-scrollbar__container" node_ref=container_ref on:scroll=on_scroll>
                 <div
-                    class=class_list![
-                        "thaw-scrollbar__content", content_class
-                    ]
+                    class=class_list!["thaw-scrollbar__content", content_class]
 
                     style=move || {
-                        format!(
-                            "width: fit-content; {}",
-                            content_style.get().unwrap_or_default(),
-                        )
+                        format!("width: fit-content; {}", content_style.get().unwrap_or_default())
                     }
 
                     node_ref=content_ref
@@ -318,7 +316,9 @@ pub fn Scrollbar(
             <div class="thaw-scrollbar__track--vertical" node_ref=y_track_ref>
                 <div
                     class="thaw-scrollabr__thumb"
-                    style:display=move || (!is_show_y_thumb.get()).then_some("none").unwrap_or_default()
+                    style:display=move || {
+                        (!is_show_y_thumb.get()).then_some("none").unwrap_or_default()
+                    }
                     style:height=move || format!("{}px", y_thumb_height.get())
                     style:top=move || format!("{}px", y_thumb_top.get())
                     on:mousedown=on_y_thumb_mousedown
@@ -327,7 +327,9 @@ pub fn Scrollbar(
             <div class="thaw-scrollbar__track--horizontal" node_ref=x_track_ref>
                 <div
                     class="thaw-scrollabr__thumb"
-                    style:display=move || (!is_show_x_thumb.get()).then_some("none").unwrap_or_default()
+                    style:display=move || {
+                        (!is_show_x_thumb.get()).then_some("none").unwrap_or_default()
+                    }
                     style:width=move || format!("{}px", x_thumb_width.get())
                     style:left=move || format!("{}px", x_thumb_left.get())
                     on:mousedown=on_x_thumb_mousedown
diff --git a/thaw/src/skeleton/skeleton.rs b/thaw/src/skeleton/skeleton.rs
index fe7a914..a4b0f2e 100644
--- a/thaw/src/skeleton/skeleton.rs
+++ b/thaw/src/skeleton/skeleton.rs
@@ -7,11 +7,7 @@ pub fn Skeleton(
     children: Children,
 ) -> impl IntoView {
     view! {
-        <div
-            role="progressbar"
-            aria-busy="true"
-            class=class_list!["thaw-skeleton", class]
-        >
+        <div role="progressbar" aria-busy="true" class=class_list!["thaw-skeleton", class]>
             {children()}
         </div>
     }
diff --git a/thaw/src/skeleton/skeleton_item.rs b/thaw/src/skeleton/skeleton_item.rs
index 5337941..ce56d2a 100644
--- a/thaw/src/skeleton/skeleton_item.rs
+++ b/thaw/src/skeleton/skeleton_item.rs
@@ -5,8 +5,5 @@ use thaw_utils::{class_list, mount_style};
 pub fn SkeletonItem(#[prop(optional, into)] class: MaybeProp<String>) -> impl IntoView {
     mount_style("skeleton-item", include_str!("./skeleton-item.css"));
 
-    view! {
-        <div class=class_list!["thaw-skeleton-item", class]>
-        </div>
-    }
+    view! { <div class=class_list!["thaw-skeleton-item", class]></div> }
 }
diff --git a/thaw/src/slider/mod.rs b/thaw/src/slider/mod.rs
index 7b6825d..f7ebf8f 100644
--- a/thaw/src/slider/mod.rs
+++ b/thaw/src/slider/mod.rs
@@ -76,10 +76,7 @@ pub fn Slider(
 
     view! {
         <Provider value=SliderInjection { max, min }>
-            <div
-                class=class_list!["thaw-slider", class]
-                style=css_vars
-            >
+            <div class=class_list!["thaw-slider", class] style=css_vars>
                 <input
                     min=move || min.get()
                     max=move || max.get()
@@ -91,10 +88,8 @@ pub fn Slider(
                     prop:value=move || current_value.get()
                     list=list_id.clone()
                 />
-                <div class="thaw-slider__rail">
-                </div>
-                <div class="thaw-slider__thumb">
-                </div>
+                <div class="thaw-slider__rail"></div>
+                <div class="thaw-slider__thumb"></div>
                 <OptionComp value=children let:children>
                     <datalist id=list_id class="thaw-slider__datalist">
                         {children()}
diff --git a/thaw/src/slider/slider_label.rs b/thaw/src/slider/slider_label.rs
index 256db5a..248b149 100644
--- a/thaw/src/slider/slider_label.rs
+++ b/thaw/src/slider/slider_label.rs
@@ -20,11 +20,7 @@ pub fn SliderLabel(
     };
 
     view! {
-        <option
-            class=class_list!["thaw-slider-label", class]
-            style=style
-            value=move || value.get()
-        >
+        <option class=class_list!["thaw-slider-label", class] style=style value=move || value.get()>
 
             {children()}
         </option>
diff --git a/thaw/src/space/mod.rs b/thaw/src/space/mod.rs
index 71242f3..eb2dd9a 100644
--- a/thaw/src/space/mod.rs
+++ b/thaw/src/space/mod.rs
@@ -16,13 +16,17 @@ pub enum SpaceGap {
 pub fn Space(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Space's gap.
-    #[prop(optional)] gap: SpaceGap,
+    #[prop(optional)]
+    gap: SpaceGap,
     /// Whether to lay out vertically.
-    #[prop(optional)] vertical: bool,
+    #[prop(optional)]
+    vertical: bool,
     ///  Vertical arrangement.
-    #[prop(optional, into)] align: MaybeProp<SpaceAlign>,
+    #[prop(optional, into)]
+    align: MaybeProp<SpaceAlign>,
     /// Horizontal arrangement.
-    #[prop(optional, into)] justify: MaybeProp<SpaceJustify>,
+    #[prop(optional, into)]
+    justify: MaybeProp<SpaceJustify>,
     children: ChildrenFragment,
 ) -> impl IntoView {
     mount_style("space", include_str!("./space.css"));
diff --git a/thaw/src/spin_button/mod.rs b/thaw/src/spin_button/mod.rs
index 44446fc..24099b5 100644
--- a/thaw/src/spin_button/mod.rs
+++ b/thaw/src/spin_button/mod.rs
@@ -78,9 +78,11 @@ where
     };
 
     view! {
-        <span
-            class=class_list!["thaw-spin-button", ("thaw-spin-button--disabled", move || disabled.get()), class]
-        >
+        <span class=class_list![
+            "thaw-spin-button",
+            ("thaw-spin-button--disabled", move || disabled.get()),
+            class
+        ]>
             <input
                 autocomplete="off"
                 role="spinbutton"
@@ -105,7 +107,10 @@ where
                 aria-label="Increment value"
                 type="button"
                 class="thaw-spin-button__increment-button"
-                class=("thaw-spin-button__increment-button--disabled", move || increment_disabled.get())
+                class=(
+                    "thaw-spin-button__increment-button--disabled",
+                    move || increment_disabled.get(),
+                )
                 disabled=move || disabled.get()
                 on:click=move |_| {
                     if !increment_disabled.get_untracked() {
@@ -113,8 +118,17 @@ where
                     }
                 }
             >
-                <svg fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
-                    <path d="M3.15 10.35c.2.2.5.2.7 0L8 6.21l4.15 4.14a.5.5 0 0 0 .7-.7l-4.5-4.5a.5.5 0 0 0-.7 0l-4.5 4.5a.5.5 0 0 0 0 .7Z" fill="currentColor"></path>
+                <svg
+                    fill="currentColor"
+                    aria-hidden="true"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                >
+                    <path
+                        d="M3.15 10.35c.2.2.5.2.7 0L8 6.21l4.15 4.14a.5.5 0 0 0 .7-.7l-4.5-4.5a.5.5 0 0 0-.7 0l-4.5 4.5a.5.5 0 0 0 0 .7Z"
+                        fill="currentColor"
+                    ></path>
                 </svg>
             </button>
             <button
@@ -123,15 +137,27 @@ where
                 type="button"
                 class="thaw-spin-button__decrement-button"
                 disabled=move || disabled.get()
-                class=("thaw-spin-button__decrement-button--disabled", move || decrement_disabled.get())
+                class=(
+                    "thaw-spin-button__decrement-button--disabled",
+                    move || decrement_disabled.get(),
+                )
                 on:click=move |_| {
                     if !decrement_disabled.get_untracked() {
                         update_value(value.get_untracked() - step_page.get_untracked());
                     }
                 }
             >
-                <svg fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
-                    <path d="M3.15 5.65c.2-.2.5-.2.7 0L8 9.79l4.15-4.14a.5.5 0 0 1 .7.7l-4.5 4.5a.5.5 0 0 1-.7 0l-4.5-4.5a.5.5 0 0 1 0-.7Z" fill="currentColor"></path>
+                <svg
+                    fill="currentColor"
+                    aria-hidden="true"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                >
+                    <path
+                        d="M3.15 5.65c.2-.2.5-.2.7 0L8 9.79l4.15-4.14a.5.5 0 0 1 .7.7l-4.5 4.5a.5.5 0 0 1-.7 0l-4.5-4.5a.5.5 0 0 1 0-.7Z"
+                        fill="currentColor"
+                    ></path>
                 </svg>
             </button>
         </span>
diff --git a/thaw/src/spinner/mod.rs b/thaw/src/spinner/mod.rs
index c7a8171..ea1e23c 100644
--- a/thaw/src/spinner/mod.rs
+++ b/thaw/src/spinner/mod.rs
@@ -55,26 +55,29 @@ pub fn Spinner(
 
     view! {
         <div
-            class=class_list!["thaw-spinner", move || format!("thaw-spinner--{}", size.get().as_str()), class]
+            class=class_list![
+                "thaw-spinner",
+                move || format!("thaw-spinner--{}", size.get().as_str()),
+                class
+            ]
             role="progressbar"
             aria-labelledby=labelledby
         >
             <span class="thaw-spinner__spinner">
                 <span class="thaw-spinner__spinner-tail"></span>
             </span>
-            {
-                move || {
-                    if let Some(label) = label.get() {
-                        view! {
-                            <label class="thaw-spinner__label" id=id.get_value()>
-                                {label}
-                            </label>
-                        }.into()
-                    } else {
-                        None
+            {move || {
+                if let Some(label) = label.get() {
+                    view! {
+                        <label class="thaw-spinner__label" id=id.get_value()>
+                            {label}
+                        </label>
                     }
+                        .into()
+                } else {
+                    None
                 }
-            }
+            }}
         </div>
     }
 }
diff --git a/thaw/src/switch/mod.rs b/thaw/src/switch/mod.rs
index dc52834..3ecc704 100644
--- a/thaw/src/switch/mod.rs
+++ b/thaw/src/switch/mod.rs
@@ -5,9 +5,11 @@ use thaw_utils::{class_list, mount_style, Model};
 pub fn Switch(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Defines the controlled checked state of the Switch.
-    #[prop(optional, into)] checked: Model<bool>,
+    #[prop(optional, into)]
+    checked: Model<bool>,
     /// The Switch's label.
-    #[prop(optional, into)] label: MaybeProp<String>,
+    #[prop(optional, into)]
+    label: MaybeProp<String>,
 ) -> impl IntoView {
     mount_style("switch", include_str!("./switch.css"));
 
@@ -30,19 +32,28 @@ pub fn Switch(
                 on:change=on_change
             />
             <div aria-hidden="true" class="thaw-switch__indicator thaw-switch__button">
-                <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
+                <svg
+                    fill="currentColor"
+                    aria-hidden="true"
+                    width="1em"
+                    height="1em"
+                    viewBox="0 0 20 20"
+                >
                     <path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" fill="currentColor"></path>
                 </svg>
             </div>
-            {
-                move || if let Some(label) = label.get() {
+            {move || {
+                if let Some(label) = label.get() {
                     view! {
-                        <label class="thaw-switch__label" for=id.clone()>{label}</label>
-                    }.into()
+                        <label class="thaw-switch__label" for=id.clone()>
+                            {label}
+                        </label>
+                    }
+                        .into()
                 } else {
                     None
                 }
-            }
+            }}
         </div>
     }
 }
diff --git a/thaw/src/tab_list/mod.rs b/thaw/src/tab_list/mod.rs
index 3ed89de..b0a4893 100644
--- a/thaw/src/tab_list/mod.rs
+++ b/thaw/src/tab_list/mod.rs
@@ -24,10 +24,7 @@ pub fn TabList(
             selected_value,
             registered_tabs,
         }>
-            <div
-                class=class_list!["thaw-tab-list", class]
-                role="tablist"
-            >
+            <div class=class_list!["thaw-tab-list", class] role="tablist">
                 {children()}
             </div>
         </Provider>
diff --git a/thaw/src/tab_list/tab.rs b/thaw/src/tab_list/tab.rs
index 3eba81e..767b47b 100644
--- a/thaw/src/tab_list/tab.rs
+++ b/thaw/src/tab_list/tab.rs
@@ -7,7 +7,8 @@ use thaw_utils::{class_list, mount_style};
 pub fn Tab(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// The indentifier of the tab.
-    #[prop(into)] value: String,
+    #[prop(into)]
+    value: String,
     children: Children,
 ) -> impl IntoView {
     mount_style("tab", include_str!("./tab.css"));
@@ -62,17 +63,13 @@ pub fn Tab(
 
     view! {
         <button
-            class=class_list![
-                "thaw-tab", ("thaw-tab--selected", move || selected.get()), class
-            ]
+            class=class_list!["thaw-tab", ("thaw-tab--selected", move || selected.get()), class]
             role="tab"
             aria-selected=move || if selected.get() { "true" } else { "false" }
             node_ref=tab_ref
             on:click=on_select
         >
-            <span class="thaw-tab__content">
-                {children()}
-            </span>
+            <span class="thaw-tab__content">{children()}</span>
         </button>
     }
 }
diff --git a/thaw/src/table/mod.rs b/thaw/src/table/mod.rs
index 92a34ba..e965f84 100644
--- a/thaw/src/table/mod.rs
+++ b/thaw/src/table/mod.rs
@@ -8,11 +8,7 @@ pub fn Table(
 ) -> impl IntoView {
     mount_style("table", include_str!("./table.css"));
 
-    view! {
-        <table class=class_list!["thaw-table", class]>
-            {children()}
-        </table>
-    }
+    view! { <table class=class_list!["thaw-table", class]>{children()}</table> }
 }
 
 #[component]
@@ -20,11 +16,7 @@ pub fn TableHeader(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <thead class=class_list!["thaw-table-header", class]>
-            {children()}
-        </thead>
-    }
+    view! { <thead class=class_list!["thaw-table-header", class]>{children()}</thead> }
 }
 
 #[component]
@@ -35,13 +27,11 @@ pub fn TableHeaderCell(
     view! {
         <th class=class_list!["thaw-table-header-cell", class]>
             <button class="thaw-table-header-cell__button" role="presentation">
-                {
-                    if let Some(children) = children  {
-                        Either::Left(children())
-                    } else {
-                        Either::Right(())
-                    }
-                }
+                {if let Some(children) = children {
+                    Either::Left(children())
+                } else {
+                    Either::Right(())
+                }}
             </button>
         </th>
     }
@@ -52,11 +42,7 @@ pub fn TableBody(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <tbody class=class_list!["thaw-table-body", class]>
-            {children()}
-        </tbody>
-    }
+    view! { <tbody class=class_list!["thaw-table-body", class]>{children()}</tbody> }
 }
 
 #[component]
@@ -64,11 +50,7 @@ pub fn TableRow(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <tr class=class_list!["thaw-table-row", class]>
-            {children()}
-        </tr>
-    }
+    view! { <tr class=class_list!["thaw-table-row", class]>{children()}</tr> }
 }
 
 #[component]
@@ -77,14 +59,14 @@ pub fn TableCell(
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
-        <td class=class_list!["thaw-table-cell", class]>
-            {
-                if let Some(children) = children  {
-                    Either::Left(children())
-                } else {
-                    Either::Right(())
-                }
-            }
+        <td class=class_list![
+            "thaw-table-cell", class
+        ]>
+            {if let Some(children) = children {
+                Either::Left(children())
+            } else {
+                Either::Right(())
+            }}
         </td>
     }
 }
@@ -94,9 +76,5 @@ pub fn TableCellLayout(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <div class=class_list!["thaw-table-cell-layout", class]>
-            {children()}
-        </div>
-    }
+    view! { <div class=class_list!["thaw-table-cell-layout", class]>{children()}</div> }
 }
diff --git a/thaw/src/tag/mod.rs b/thaw/src/tag/mod.rs
index 41be517..f0edb14 100644
--- a/thaw/src/tag/mod.rs
+++ b/thaw/src/tag/mod.rs
@@ -15,10 +15,8 @@ pub fn Tag(
     mount_style("tag", include_str!("./tag.css"));
 
     view! {
-        <span
-            class=class_list!["thaw-tag", ("thaw-tag--closable", move || closable.get()), class]
+        <span class=class_list!["thaw-tag", ("thaw-tag--closable", move || closable.get()), class]>
 
-        >
             <span class="thaw-tag__primary-text">{children()}</span>
 
             {move || {
@@ -30,13 +28,24 @@ pub fn Tag(
                     on_close(event);
                 };
                 if closable.get() {
-                    Either::Left(view! {
-                        <button class="thaw-tag__close" on:click=on_close>
-                            <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
-                                <path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z" fill="currentColor"></path>
-                            </svg>
-                        </button>
-                    })
+                    Either::Left(
+                        view! {
+                            <button class="thaw-tag__close" on:click=on_close>
+                                <svg
+                                    fill="currentColor"
+                                    aria-hidden="true"
+                                    width="1em"
+                                    height="1em"
+                                    viewBox="0 0 20 20"
+                                >
+                                    <path
+                                        d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+                                        fill="currentColor"
+                                    ></path>
+                                </svg>
+                            </button>
+                        },
+                    )
                 } else {
                     Either::Right(())
                 }
diff --git a/thaw/src/text/mod.rs b/thaw/src/text/mod.rs
index 2cbd262..b4722a8 100644
--- a/thaw/src/text/mod.rs
+++ b/thaw/src/text/mod.rs
@@ -11,9 +11,7 @@ pub fn Caption1(
     let class =
         Signal::derive(move || format!("thaw-caption-1 {}", class.get().unwrap_or_default()));
 
-    view! {
-        <Text tag children class style/>
-    }
+    view! { <Text tag children class style /> }
 }
 
 #[component]
@@ -27,9 +25,7 @@ pub fn Caption1Strong(
         format!("thaw-caption-1-strong {}", class.get().unwrap_or_default())
     });
 
-    view! {
-        <Text tag children class style/>
-    }
+    view! { <Text tag children class style /> }
 }
 
 #[component]
@@ -41,9 +37,7 @@ pub fn Body1(
 ) -> impl IntoView {
     let class = Signal::derive(move || format!("thaw-body-1 {}", class.get().unwrap_or_default()));
 
-    view! {
-        <Text tag children class style/>
-    }
+    view! { <Text tag children class style /> }
 }
 
 #[component]
diff --git a/thaw/src/textarea/mod.rs b/thaw/src/textarea/mod.rs
index 1577c97..e992fb3 100644
--- a/thaw/src/textarea/mod.rs
+++ b/thaw/src/textarea/mod.rs
@@ -72,14 +72,12 @@ pub fn Textarea(
     // }
 
     view! {
-        <span
-            class=class_list![
-                "thaw-textarea",
-                ("thaw-textarea--disabled", move || disabled.get()),
-                move || format!("thaw-textarea--resize-{}", resize.get().as_str()),
-                class
-            ]
-        >
+        <span class=class_list![
+            "thaw-textarea",
+            ("thaw-textarea--disabled", move || disabled.get()),
+            move || format!("thaw-textarea--resize-{}", resize.get().as_str()),
+            class
+        ]>
             <textarea
                 prop:value=move || {
                     value_trigger.track();
diff --git a/thaw/src/time_picker/mod.rs b/thaw/src/time_picker/mod.rs
index bd673bc..70b6a4f 100644
--- a/thaw/src/time_picker/mod.rs
+++ b/thaw/src/time_picker/mod.rs
@@ -75,7 +75,7 @@ pub fn TimePicker(
             <div node_ref=time_picker_ref class=class_list!["thaw-time-picker", class]>
                 <Input value=show_time_text on_focus=open_panel on_blur=on_input_blur>
                     <InputSuffix slot>
-                        <Icon icon=icondata_ai::AiClockCircleOutlined style="font-size: 18px"/>
+                        <Icon icon=icondata_ai::AiClockCircleOutlined style="font-size: 18px" />
                     </InputSuffix>
                 </Input>
             </div>
diff --git a/thaw/src/toast/toast.rs b/thaw/src/toast/toast.rs
index 6199378..4bb73a8 100644
--- a/thaw/src/toast/toast.rs
+++ b/thaw/src/toast/toast.rs
@@ -7,11 +7,7 @@ pub fn Toast(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <div class=class_list!["thaw-toast", class]>
-            {children()}
-        </div>
-    }
+    view! { <div class=class_list!["thaw-toast", class]>{children()}</div> }
 }
 
 #[derive(Default, Clone, Copy)]
diff --git a/thaw/src/toast/toast_body.rs b/thaw/src/toast/toast_body.rs
index 34ba062..4777887 100644
--- a/thaw/src/toast/toast_body.rs
+++ b/thaw/src/toast/toast_body.rs
@@ -7,13 +7,9 @@ pub fn ToastBody(
     children: Children,
 ) -> impl IntoView {
     view! {
-        <div class="thaw-toast-body">
-            {children()}
-        </div>
+        <div class="thaw-toast-body">{children()}</div>
         <OptionComp value=toast_body_subtitle let:subtitle>
-            <div class="thaw-toast-body__subtitle">
-                {(subtitle.children)()}
-            </div>
+            <div class="thaw-toast-body__subtitle">{(subtitle.children)()}</div>
         </OptionComp>
     }
 }
diff --git a/thaw/src/toast/toast_footer.rs b/thaw/src/toast/toast_footer.rs
index e825b0c..18ad103 100644
--- a/thaw/src/toast/toast_footer.rs
+++ b/thaw/src/toast/toast_footer.rs
@@ -6,9 +6,5 @@ pub fn ToastFooter(
     #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
-    view! {
-        <div class=class_list!["thaw-toast-footer", class]>
-            {children()}
-        </div>
-    }
+    view! { <div class=class_list!["thaw-toast-footer", class]>{children()}</div> }
 }
diff --git a/thaw/src/toast/toast_title.rs b/thaw/src/toast/toast_title.rs
index cb0aebd..2131f05 100644
--- a/thaw/src/toast/toast_title.rs
+++ b/thaw/src/toast/toast_title.rs
@@ -9,25 +9,30 @@ pub fn ToastTitle(
 ) -> impl IntoView {
     view! {
         <div class="thaw-toast-title__media">
-            {
-                if let Some(media) = toast_title_media {
-                    Either::Left((media.children)())
-                } else {
-                    Either::Right(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>
+            {if let Some(media) = toast_title_media {
+                Either::Left((media.children)())
+            } else {
+                Either::Right(
+                    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>
-                    })
-                }
-            }
-        </div>
-        <div class="thaw-toast-title">
-            {children()}
+                    },
+                )
+            }}
         </div>
+        <div class="thaw-toast-title">{children()}</div>
         <OptionComp value=toast_title_action let:action>
-            <div class="thaw-toast-title__action">
-                {(action.children)()}
-            </div>
+            <div class="thaw-toast-title__action">{(action.children)()}</div>
         </OptionComp>
     }
 }
diff --git a/thaw/src/toast/toaster.rs b/thaw/src/toast/toaster.rs
index 0674cc0..8ec7ed3 100644
--- a/thaw/src/toast/toaster.rs
+++ b/thaw/src/toast/toaster.rs
@@ -71,93 +71,87 @@ pub fn Toaster(
                 data-thaw-id=config_provider.id().clone()
             >
                 <div class="thaw-toaster thaw-toaster--top">
-                    <For
-                        each=move || top_id_list.get()
-                        key=|id| id.clone()
-                        let:id
-                    >
+                    <For each=move || top_id_list.get() key=|id| id.clone() let:id>
+                        {if let Some((view, options)) = toasts
+                            .try_update_value(|map| { map.remove(&id) })
+                            .flatten()
                         {
-                            if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
-                                Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
-                            } else {
-                                Either::Right(())
-                            }
-                        }
+                            Either::Left(
+                                view! { <ToasterContainer on_close view=view.take() options /> },
+                            )
+                        } else {
+                            Either::Right(())
+                        }}
                     </For>
                 </div>
                 <div class="thaw-toaster thaw-toaster--top-start">
-                    <For
-                        each=move || top_start_id_list.get()
-                        key=|id| id.clone()
-                        let:id
-                    >
+                    <For each=move || top_start_id_list.get() key=|id| id.clone() let:id>
+                        {if let Some((view, options)) = toasts
+                            .try_update_value(|map| { map.remove(&id) })
+                            .flatten()
                         {
-                            if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
-                                Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
-                            } else {
-                                Either::Right(())
-                            }
-                        }
+                            Either::Left(
+                                view! { <ToasterContainer on_close view=view.take() options /> },
+                            )
+                        } else {
+                            Either::Right(())
+                        }}
                     </For>
                 </div>
                 <div class="thaw-toaster thaw-toaster--top-end">
-                    <For
-                        each=move || top_end_id_list.get()
-                        key=|id| id.clone()
-                        let:id
-                    >
+                    <For each=move || top_end_id_list.get() key=|id| id.clone() let:id>
+                        {if let Some((view, options)) = toasts
+                            .try_update_value(|map| { map.remove(&id) })
+                            .flatten()
                         {
-                            if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
-                                Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
-                            } else {
-                                Either::Right(())
-                            }
-                        }
+                            Either::Left(
+                                view! { <ToasterContainer on_close view=view.take() options /> },
+                            )
+                        } else {
+                            Either::Right(())
+                        }}
                     </For>
                 </div>
                 <div class="thaw-toaster thaw-toaster--bottom">
-                    <For
-                        each=move || bottom_id_list.get()
-                        key=|id| id.clone()
-                        let:id
-                    >
+                    <For each=move || bottom_id_list.get() key=|id| id.clone() let:id>
+                        {if let Some((view, options)) = toasts
+                            .try_update_value(|map| { map.remove(&id) })
+                            .flatten()
                         {
-                            if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
-                                Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
-                            } else {
-                                Either::Right(())
-                            }
-                        }
+                            Either::Left(
+                                view! { <ToasterContainer on_close view=view.take() options /> },
+                            )
+                        } else {
+                            Either::Right(())
+                        }}
                     </For>
                 </div>
                 <div class="thaw-toaster thaw-toaster--bottom-start">
-                    <For
-                        each=move || bottom_start_id_list.get()
-                        key=|id| id.clone()
-                        let:id
-                    >
+                    <For each=move || bottom_start_id_list.get() key=|id| id.clone() let:id>
+                        {if let Some((view, options)) = toasts
+                            .try_update_value(|map| { map.remove(&id) })
+                            .flatten()
                         {
-                            if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
-                                Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
-                            } else {
-                                Either::Right(())
-                            }
-                        }
+                            Either::Left(
+                                view! { <ToasterContainer on_close view=view.take() options /> },
+                            )
+                        } else {
+                            Either::Right(())
+                        }}
                     </For>
                 </div>
                 <div class="thaw-toaster thaw-toaster--bottom-end">
-                    <For
-                        each=move || bottom_end_id_list.get()
-                        key=|id| id.clone()
-                        let:id
-                    >
+                    <For each=move || bottom_end_id_list.get() key=|id| id.clone() let:id>
+                        {if let Some((view, options)) = toasts
+                            .try_update_value(|map| { map.remove(&id) })
+                            .flatten()
                         {
-                            if let Some((view, options)) = toasts.try_update_value(|map| { map.remove(&id) }).flatten() {
-                                Either::Left(view! { <ToasterContainer on_close view=view.take() options/> })
-                            } else {
-                                Either::Right(())
-                            }
-                        }
+                            Either::Left(
+                                view! { <ToasterContainer on_close view=view.take() options /> },
+                            )
+                        } else {
+                            Either::Right(())
+                        }}
                     </For>
                 </div>
             </div>
diff --git a/thaw/src/toast/toaster_provider.rs b/thaw/src/toast/toaster_provider.rs
index 0504ef1..44cc9c8 100644
--- a/thaw/src/toast/toaster_provider.rs
+++ b/thaw/src/toast/toaster_provider.rs
@@ -4,14 +4,13 @@ use leptos::{context::Provider, prelude::*};
 #[component]
 pub fn ToasterProvider(
     /// The position the toast should render.
-    #[prop(optional)] position: ToastPosition,
+    #[prop(optional)]
+    position: ToastPosition,
     children: Children,
 ) -> impl IntoView {
     let (injection, receiver) = ToasterInjection::channel();
     view! {
-        <Toaster receiver position/>
-        <Provider value=injection>
-            {children()}
-        </Provider>
+        <Toaster receiver position />
+        <Provider value=injection>{children()}</Provider>
     }
 }
diff --git a/thaw/src/upload/mod.rs b/thaw/src/upload/mod.rs
index d7aaa9e..d003e20 100644
--- a/thaw/src/upload/mod.rs
+++ b/thaw/src/upload/mod.rs
@@ -80,12 +80,11 @@ pub fn Upload(
     };
 
     view! {
-        <div
-            class=class_list!["thaw-upload",
+        <div class=class_list![
+            "thaw-upload",
                 ("thaw-upload--drag-over", move || is_trigger_dragover.get()),
                 class
-            ]
-        >
+        ]>
             <input
                 class="thaw-upload__input"
                 node_ref=input_ref
diff --git a/thaw/src/upload/upload_dragger.rs b/thaw/src/upload/upload_dragger.rs
index 6899310..f7b603e 100644
--- a/thaw/src/upload/upload_dragger.rs
+++ b/thaw/src/upload/upload_dragger.rs
@@ -8,9 +8,5 @@ pub fn UploadDragger(
 ) -> impl IntoView {
     mount_style("upload-dragger", include_str!("./upload-dragger.css"));
 
-    view! {
-        <div class=class_list!["thaw-upload-dragger", class]>
-            {children()}
-        </div>
-    }
+    view! { <div class=class_list!["thaw-upload-dragger", class]>{children()}</div> }
 }