diff --git a/dist/dsfr-plus.js b/dist/dsfr-plus.js
index e9888b3..0c9ba95 100644
--- a/dist/dsfr-plus.js
+++ b/dist/dsfr-plus.js
@@ -7936,33 +7936,35 @@ const Ad = ({
     )
   ] }) }) });
 }, Kd = me(({
-  className: t,
-  css: e = {},
-  hint: n,
-  id: r,
-  label: o,
+  checked: t,
+  className: e,
+  css: n = {},
+  hint: r,
+  id: o,
   imageComponent: i,
-  ...l
-}, s) => {
-  const u = r || ie();
-  return /* @__PURE__ */ O("div", { className: x("fr-radio-group", { "fr-radio-rich": i }, t), children: [
+  label: l,
+  ...s
+}, u) => {
+  const a = o || ie();
+  return /* @__PURE__ */ O("div", { className: x("fr-radio-group", { "fr-radio-rich": i }, e), children: [
     /* @__PURE__ */ m(
       "input",
       {
-        ref: s,
-        ...l,
+        checked: t,
+        id: a,
+        ref: u,
         type: "radio",
-        id: u
+        ...s
       }
     ),
     /* @__PURE__ */ O(
       "label",
       {
         className: x("fr-label"),
-        htmlFor: u,
+        htmlFor: a,
         children: [
-          o,
-          n && /* @__PURE__ */ m("p", { className: x("fr-hint-text"), children: n })
+          l,
+          r && /* @__PURE__ */ m("p", { className: x("fr-hint-text"), children: r })
         ]
       }
     ),
@@ -8969,10 +8971,10 @@ function Qc(t, e) {
 const ed = ({ autoDismissAfter: t = 3e3, description: e = "", id: n, remove: r = () => {
 }, title: o = "", type: i = "success" }) => {
   const l = {
+    error: "fr-icon-close-circle-fill",
     info: "fr-icon-information-fill",
-    warning: "fr-icon-error-warning-fill",
     success: "fr-icon-checkbox-circle-fill",
-    error: "fr-icon-close-circle-fill"
+    warning: "fr-icon-error-warning-fill"
   }, s = te(() => {
     var c;
     (c = document.getElementById(n)) == null || c.style.setProperty("animation", "toast-unmount 1000ms"), setTimeout(() => {
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 32847ac..5235d3e 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -1,19 +1,18 @@
 import { useCallback, useEffect } from 'react';
 
 import { Container, Row } from '../Grid';
+import { ToastTypeWithId } from './types';
 import { Text } from '../Typography';
 import usePausableTimer from './usePausableTimer';
 
-import { ToastTypeWithId } from './types';
-
 import './styles.scss';
 
 export const Toast = (({ autoDismissAfter = 3000, description = '', id, remove = () => { }, title = '', type = 'success' }: ToastTypeWithId) => {
   const icon = {
+    error: 'fr-icon-close-circle-fill',
     info: 'fr-icon-information-fill',
-    warning: 'fr-icon-error-warning-fill',
     success: 'fr-icon-checkbox-circle-fill',
-    error: 'fr-icon-close-circle-fill',
+    warning: 'fr-icon-error-warning-fill',
   };
 
   const removeSelf = useCallback(() => {
@@ -53,7 +52,7 @@ export const Toast = (({ autoDismissAfter = 3000, description = '', id, remove =
         onClick={() => remove(id)}
         className="toast-btn-close"
       >
-        <span className='fr-icon-close-line' />
+        <span className="fr-icon-close-line" />
       </button>
       <Container fluid className="toast-content">
         <Row>
diff --git a/src/components/Toast/styles.scss b/src/components/Toast/styles.scss
index 8167825..b680f5f 100644
--- a/src/components/Toast/styles.scss
+++ b/src/components/Toast/styles.scss
@@ -7,102 +7,56 @@
     transform: translateY(0);
   }
 }
-@keyframes toast-unmount {
+
+@keyframes toast-unfill {
   from {
-    transform: translateX(0);
+    height: 100%;
   }
 
   to {
-    transform: translateX(300%);
+    height: 0%
   }
 }
 
-@keyframes toast-unfill {
+@keyframes toast-unmount {
   from {
-    height: 100%;
+    transform: translateX(0);
   }
 
   to {
-    height: 0%
+    transform: translateX(300%);
   }
 }
 
 #toast-container {
-  position: fixed;
-  box-sizing: border-box;
-  z-index: 10000;
   bottom: 4px;
+  box-sizing: border-box;
   padding: 4px;
+  position: fixed;
+  z-index: 10000;
   > * {
     margin-top: 8px;
   }
+
   @media only screen and (min-width: 992px) {
     bottom: 30px;
-    right: 30px;
     padding: 24px;
-  }
-  .toast-info {
-    // border: 1px solid var(--info-main-525);
-    border-radius: 0.25rem;
-    --hover: var(--background-contrast-info-hover) !important;
-    --active: var(--background-contrast-info-active) !important;
-    background-color: var(--background-contrast-info) !important;
-    color: var(--text-default-info) !important;
-
-    >.toast-colored-box {
-      background-color: var(--info-main-525);
-    }
-  }
-  
-  .toast-warning {
-    // border: 1px solid var(--warning-main-525);
-    --hover: var(--background-contrast-warning-hover) !important;
-    --active: var(--background-contrast-warning-active) !important;
-    background-color: var(--background-contrast-warning) !important;
-    color: var(--text-default-warning) !important;
-    
-    >.toast-colored-box {
-      background-color: var(--warning-main-525);
-    }
-  }
-
-  .toast-success {
-    // border: 1px solid var(--success-main-525);
-    --hover: var(--background-contrast-success-hover) !important;
-    --active: var(--background-contrast-success-active) !important;
-    background-color: var(--background-contrast-success) !important;
-    color: var(--text-default-success) !important;
-    
-    
-    >.toast-colored-box {
-      background-color: var(--success-main-525);
-    }
-  }
-
-  .toast-error {
-    // border: 1px solid var(--error-main-525);
-    --hover: var(--background-contrast-error-hover) !important;
-    --active: var(--background-contrast-error-active) !important;
-    background-color: var(--background-contrast-error) !important;
-    color: var(--text-default-error) !important;
-
-    >.toast-colored-box {
-      background-color: var(--error-main-525);
-    }
+    right: 30px;
   }
   
   .toast {
+    align-items: flex-start;
+    animation: toast-mount .3s;
     border-radius: 0.25rem;
-    position: relative;
     box-shadow: 0 6px 18px 0 rgba(0, 0, 18, 0.16);
     display: flex;
     flex-wrap: nowrap;
-    align-items: flex-start;
     min-height: 40px;
-    width: calc(100vw - 8px);
-    top: 0;
+    position: relative;
     right: 0;
-    animation: toast-mount .3s;
+    top: 0;
+    width: calc(100vw - 8px);
+
     @media only screen and (min-width: 992px) {
       width: 400px;
     }
@@ -114,60 +68,104 @@
     }
     
     .toast-btn-close {
+      border-radius: 100%;
+      height: 32px;
       position: absolute;
       right: 2px;
       top: 2px;
-      border-radius: 100%;
-      height: 32px;
       width: 32px;
       
-      SPAN {
-        padding-bottom: 6px;
+      span {
         margin-right: 0px;
+        padding-bottom: 6px;
       }
 
       &:hover {
         background-color: var(--active-tint);
       }
     }
-
-    .toast-progress-bar {
-      animation-name: toast-unfill;
-      animation-timing-function: linear;
-      animation-play-state: running;
-      bottom: 0;
-      left: 0;
-      position: absolute;
-      width: 40px;
-      background: rgba(0, 0, 18, 0.16);
-    }
     
     .toast-colored-box {
-      border-top-left-radius: 0.25rem;
+      align-items: center;
       border-bottom-left-radius: 0.25rem;
-      width: 40px;
-      position: absolute;
-      top: 0;
+      border-top-left-radius: 0.25rem;
       bottom: 0;
       display: flex;
-      align-items: center;
       justify-content: center;
+      position: absolute;
+      top: 0;
+      width: 40px;
 
-      SPAN {
-        z-index: 100;
-        margin-left: 9px;
-        color: var(--background-alt-grey);
+      span {
         font-size: 1.8em;
+        margin-left: 9px;
+        z-index: 100;
       }
     }
 
     .toast-content {
-      margin: 0 40px;
-      width: 100%;
       display: flex;
-      padding: 8px;
       flex-direction: column;
       justify-content: space-between;
+      margin: 0 40px;
+      padding: 8px;
+      width: 100%;
+    }
+
+    .toast-progress-bar {
+      animation-name: toast-unfill;
+      animation-play-state: running;
+      animation-timing-function: linear;
+      background: rgba(0, 0, 18, 0.16);
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      width: 40px;
+    }
+  }
+
+  .toast-error {
+    --active: var(--background-contrast-error-active) !important;
+    --hover: var(--background-contrast-error-hover) !important;
+    background-color: var(--background-contrast-error) !important;
+    color: var(--text-default-error) !important;
+
+    >.toast-colored-box {
+      background-color: var(--error-main-525);
+    }
+  }
+
+  .toast-info {
+    --active: var(--background-contrast-info-active) !important;
+    --hover: var(--background-contrast-info-hover) !important;
+    background-color: var(--background-contrast-info) !important;
+    border-radius: 0.25rem;
+    color: var(--text-default-info) !important;
+
+    >.toast-colored-box {
+      background-color: var(--info-main-525);
+    }
+  }
+  
+  .toast-success {
+    --active: var(--background-contrast-success-active) !important;
+    --hover: var(--background-contrast-success-hover) !important;
+    background-color: var(--background-contrast-success) !important;
+    color: var(--text-default-success) !important;
+
+    >.toast-colored-box {
+      background-color: var(--success-main-525);
+    }
+  }
+
+  .toast-warning {
+    --active: var(--background-contrast-warning-active) !important;
+    --hover: var(--background-contrast-warning-hover) !important;
+    background-color: var(--background-contrast-warning) !important;
+    color: var(--text-default-warning) !important;
+    
+    >.toast-colored-box {
+      background-color: var(--warning-main-525);
     }
   }
 }
\ No newline at end of file