From b6b3ea739194312c7ec238928480df83576a84bf Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Sun, 23 May 2021 16:55:48 +0300
Subject: [PATCH 01/10] fix button padding

---
 src/lib/global.ts             |  5 +++++
 src/ui/atoms/button/index.tsx | 13 ++-----------
 src/ui/atoms/button/usage.mdx |  3 +++
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/lib/global.ts b/src/lib/global.ts
index f73df53d..64520215 100644
--- a/src/lib/global.ts
+++ b/src/lib/global.ts
@@ -5,6 +5,11 @@ export const Global = styled.div`
     font-family: 'Helvetica Neue', sans-serif;
   }
 
+
+  button {
+    padding: 0;
+  }
+
   --palette-snow-1000: #000000;
   --palette-snow-500: #c0c0c0;
   --palette-snow-300: #e5e5e5;
diff --git a/src/ui/atoms/button/index.tsx b/src/ui/atoms/button/index.tsx
index f6135c3c..41eae294 100644
--- a/src/ui/atoms/button/index.tsx
+++ b/src/ui/atoms/button/index.tsx
@@ -30,19 +30,12 @@ const ButtonBase: React.FC<ButtonProps & Variant> = ({
 );
 
 export const Button = styled(ButtonBase)`
-  --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --local-horizontal: calc(
-    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
-  );
-  --local-gap: var(--local-vertical);
-  --local-compensate: var(--woly-const-m);
+  ${box}
 
   --local-text-color: var(--woly-shape-text-default);
   --local-shape-color: var(--woly-shape-default);
   --local-border-color: var(--woly-shape-default);
 
-  ${box}
-
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
@@ -54,9 +47,7 @@ export const Button = styled(ButtonBase)`
   line-height: var(--woly-line-height);
 
   background-color: var(--local-shape-color);
-  border-color: var(--local-border-color);
-  border-style: solid;
-  border-width: var(--woly-border-width);
+  border: var(--woly-border-width) solid var(--local-border-color);
   border-radius: var(--woly-rounding);
   outline: none;
 
diff --git a/src/ui/atoms/button/usage.mdx b/src/ui/atoms/button/usage.mdx
index 6de8493e..8c9963c1 100644
--- a/src/ui/atoms/button/usage.mdx
+++ b/src/ui/atoms/button/usage.mdx
@@ -59,6 +59,9 @@ Button can be used with icon on the left side.
 Size controlled by the `component-level` block property not from the props.
 
 <Playground>
+  <block.N>
+    <Button variant="primary" text="None" icon={<IconPlus />} />
+  </block.N>
   <block.S>
     <Button variant="primary" text="Small" icon={<IconPlus />} />
   </block.S>

From 5301bd475872ba5777a3bdcc9a760f954a303305 Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Mon, 24 May 2021 12:49:40 +0300
Subject: [PATCH 02/10] create toast component

---
 src/lib/global.ts                |   1 -
 src/ui/molecules/index.ts        |   1 +
 src/ui/molecules/toast/index.tsx |  98 ++++++++++++++++++
 src/ui/molecules/toast/usage.mdx | 170 +++++++++++++++++++++++++++++++
 4 files changed, 269 insertions(+), 1 deletion(-)
 create mode 100644 src/ui/molecules/toast/index.tsx
 create mode 100644 src/ui/molecules/toast/usage.mdx

diff --git a/src/lib/global.ts b/src/lib/global.ts
index 64520215..795bafd3 100644
--- a/src/lib/global.ts
+++ b/src/lib/global.ts
@@ -5,7 +5,6 @@ export const Global = styled.div`
     font-family: 'Helvetica Neue', sans-serif;
   }
 
-
   button {
     padding: 0;
   }
diff --git a/src/ui/molecules/index.ts b/src/ui/molecules/index.ts
index c9d75773..87323580 100644
--- a/src/ui/molecules/index.ts
+++ b/src/ui/molecules/index.ts
@@ -7,3 +7,4 @@ export { RadioButton } from './radio-button';
 export { Popover } from './popover';
 export { Select } from './select';
 export { Switch } from './switch';
+export { Toast } from './toast';
diff --git a/src/ui/molecules/toast/index.tsx b/src/ui/molecules/toast/index.tsx
new file mode 100644
index 00000000..4dd38696
--- /dev/null
+++ b/src/ui/molecules/toast/index.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import styled, { StyledComponent } from 'styled-components';
+import { Variant } from 'lib/types';
+import { box } from 'ui/elements';
+
+interface ToastProps {
+  action?: React.ReactNode;
+  className?: string;
+  icon?: React.ReactNode;
+  outlined?: boolean;
+}
+
+const ToastBase: React.FC<ToastProps & Variant> = ({
+  action,
+  children,
+  className,
+  icon,
+  outlined = false,
+  variant = 'secondary',
+}) => (
+  <div className={className} data-outlined={outlined} data-variant={variant}>
+    {icon && <span data-toast-icon>{icon}</span>}
+    <div data-content>{children}</div>
+    {action && <span data-action>{action}</span>}
+  </div>
+);
+
+export const Toast = styled(ToastBase)`
+  --local-text-color: var(--woly-shape-text-default);
+  --local-shape-color: var(--woly-shape-default);
+  --local-border-color: var(--woly-shape-default);
+  --local-toast-gap: max(9px, calc(1px * var(--woly-component-level) * var(--woly-main-level)));
+
+  ${box}
+
+  display: flex;
+  flex-wrap: nowrap;
+  
+  min-width: fit-content;
+  max-width: 75%;
+
+  color: var(--local-text-color);
+  font-size: var(--woly-font-size);
+  line-height: var(--woly-line-height);
+
+  background-color: var(--local-shape-color);
+  border: var(--woly-border-width) solid var(--local-border-color);
+  border-radius: var(--woly-rounding);
+  outline: none;
+
+  &[data-outlined='true'] {
+    color: var(--local-shape-color);
+
+    background-color: transparent;
+
+    [data-toast-icon] {
+      svg > path {
+        fill: var(--local-shape-color);
+      }
+    }
+  }
+
+  [data-content] {
+    display: flex;
+    flex: 1;
+    flex-wrap: nowrap;
+  }
+  
+  [data-toast-icon] {
+    --woly-component-level: 0;
+    --local-icon-size: var(--woly-line-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--local-icon-size);
+    height: var(--local-icon-size);
+  }
+
+  [data-action] {
+    --woly-component-level: 0;
+    display: flex;
+    align-items: center;
+
+    & > *:not(:last-child) {
+      margin-right: var(--local-toast-gap);
+    }
+  }
+
+  &:hover {
+    --local-text-color: var(--woly-shape-text-hover);
+    --local-border-color: var(--woly-shape-hover);
+    --local-shape-color: var(--woly-shape-hover);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
+  }
+` as StyledComponent<'div', Record<string, unknown>, ToastProps & Variant>;
diff --git a/src/ui/molecules/toast/usage.mdx b/src/ui/molecules/toast/usage.mdx
new file mode 100644
index 00000000..9a7cdc53
--- /dev/null
+++ b/src/ui/molecules/toast/usage.mdx
@@ -0,0 +1,170 @@
+---
+name: toast
+category: molecules
+package: 'woly'
+---
+
+import { Button, Toast } from 'ui';
+import { IconPlus, IconSearch } from 'static/icons';
+import { block, Playground, State } from 'lib/playground';
+
+`Toasts` are lightweight notifications designed to mimic the push notifications.
+Toasts are intended to be small interruptions to your visitors or users,
+and therefore should contain minimal, to-the-point, non-interactive content.
+
+### Example
+Siple Toast with text only
+
+<Playground>
+  <block.L>
+    <Toast
+      variant="primary"
+      outlined
+    >
+      Режим предпросмотра таблицы
+    </Toast>
+  </block.L>
+</Playground>
+
+### Icons
+
+Toast can be used with icon on the left side.
+
+<Playground>
+  <block.L>
+    <Toast
+      icon={<IconPlus />}
+      variant="primary"
+      outlined
+    >
+      Перетащите файл формата XLS 
+    </Toast>
+  </block.L>
+</Playground>
+
+Toast can also consist action block
+
+<Playground>
+  <block.L style={{ width: '1200px' }}>
+    <Toast
+      variant="primary"
+      outlined
+      action={
+        <>
+          <Button
+            icon={<IconSearch />}
+            onClick={() => console.info('IconClose clicked')}
+            variant="primary"
+            text="Submit"
+          />
+          <Button
+            icon={<IconSearch />}
+            onClick={() => console.info('IconClose clicked')}
+            variant="secondary"
+            text="Cancel"
+            outlined
+          />
+        </>
+      }
+    >
+      Перетащите файл формата XLS, чтобы обновить данные о тарифах
+    </Toast>
+  </block.L>
+</Playground>
+
+Or even both 
+
+<Playground>
+  <block.L style={{ width: '1200px' }}>
+    <Toast
+      icon={<IconPlus />}
+      variant="primary"
+      outlined
+      action={
+        <>
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="primary"
+            text="Submit"
+          />
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="primary"
+            text="Cancel"
+            outlined
+          />
+        </>
+      }
+    >
+      Сохраните изменения, чтобы выйти из режима предпросмотра
+    </Toast>
+  </block.L>
+</Playground>
+
+### Variants
+
+<Playground>
+  <block.L style={{ width: '1200px' }}>
+    <Toast
+      icon={<IconPlus />}
+      variant="secondary"
+      outlined
+      action={
+        <>
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="secondary"
+            text="Submit"
+            outlined
+          />
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="secondary"
+            text="Cancel"
+            outlined
+          />
+        </>
+      }
+    >
+      Сохраните изменения, чтобы выйти из режима предпросмотра
+    </Toast>
+  </block.L>
+</Playground>
+
+<Playground>
+  <block.L style={{ width: '1200px' }}>
+    <Toast
+      icon={<IconPlus />}
+      variant="primary"
+      outlined
+      action={
+        <>
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="primary"
+            text="Submit"
+            outlined
+          />
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="primary"
+            text="Cancel"
+            outlined
+          />
+        </>
+      }
+    >
+      Сохраните изменения, чтобы выйти из режима предпросмотра
+    </Toast>
+  </block.L>
+</Playground>
+
+
+### Props
+
+| Name       | Type               | Default       | Description                                                           |
+| ---------- | ------------------ | ------------- | --------------------------------------------------------------------- |
+| `action`   | `React.ReactNode`  | `null`        | Block of action items (ex. One element or grop that can be clicked)   |
+| `content`  | `React.ReactNode`  | `null`        | Component to show the icon near the text (ex.: Icon on the left side) |
+| `children` | ``React.ReactNode` | `null`        | Content block                                                         |
+| `variant`  | `string`           | `'secondary'` | Variant prop to style InputPassword component                         |

From cb5396530e4ce19bb97e11440214bea11cc39173 Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Mon, 24 May 2021 13:14:38 +0300
Subject: [PATCH 03/10] fix lint styles

---
 src/ui/molecules/toast/index.tsx |  4 ++--
 src/ui/molecules/toast/usage.mdx | 17 +++++------------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/ui/molecules/toast/index.tsx b/src/ui/molecules/toast/index.tsx
index 4dd38696..0cbb3f35 100644
--- a/src/ui/molecules/toast/index.tsx
+++ b/src/ui/molecules/toast/index.tsx
@@ -35,7 +35,7 @@ export const Toast = styled(ToastBase)`
 
   display: flex;
   flex-wrap: nowrap;
-  
+
   min-width: fit-content;
   max-width: 75%;
 
@@ -65,7 +65,7 @@ export const Toast = styled(ToastBase)`
     flex: 1;
     flex-wrap: nowrap;
   }
-  
+
   [data-toast-icon] {
     --woly-component-level: 0;
     --local-icon-size: var(--woly-line-height);
diff --git a/src/ui/molecules/toast/usage.mdx b/src/ui/molecules/toast/usage.mdx
index 9a7cdc53..fba7cd89 100644
--- a/src/ui/molecules/toast/usage.mdx
+++ b/src/ui/molecules/toast/usage.mdx
@@ -13,14 +13,12 @@ Toasts are intended to be small interruptions to your visitors or users,
 and therefore should contain minimal, to-the-point, non-interactive content.
 
 ### Example
+
 Siple Toast with text only
 
 <Playground>
   <block.L>
-    <Toast
-      variant="primary"
-      outlined
-    >
+    <Toast variant="primary" outlined>
       Режим предпросмотра таблицы
     </Toast>
   </block.L>
@@ -32,12 +30,8 @@ Toast can be used with icon on the left side.
 
 <Playground>
   <block.L>
-    <Toast
-      icon={<IconPlus />}
-      variant="primary"
-      outlined
-    >
-      Перетащите файл формата XLS 
+    <Toast icon={<IconPlus />} variant="primary" outlined>
+      Перетащите файл формата XLS
     </Toast>
   </block.L>
 </Playground>
@@ -72,7 +66,7 @@ Toast can also consist action block
   </block.L>
 </Playground>
 
-Or even both 
+Or even both
 
 <Playground>
   <block.L style={{ width: '1200px' }}>
@@ -159,7 +153,6 @@ Or even both
   </block.L>
 </Playground>
 
-
 ### Props
 
 | Name       | Type               | Default       | Description                                                           |

From 58c3a029c64c61f3328a2416dc09803f92a87c4f Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Fri, 28 May 2021 12:52:19 +0300
Subject: [PATCH 04/10] resolve comments

---
 src/lib/global.ts                | 4 ----
 src/ui/molecules/toast/index.tsx | 6 +++---
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/lib/global.ts b/src/lib/global.ts
index 795bafd3..f73df53d 100644
--- a/src/lib/global.ts
+++ b/src/lib/global.ts
@@ -5,10 +5,6 @@ export const Global = styled.div`
     font-family: 'Helvetica Neue', sans-serif;
   }
 
-  button {
-    padding: 0;
-  }
-
   --palette-snow-1000: #000000;
   --palette-snow-500: #c0c0c0;
   --palette-snow-300: #e5e5e5;
diff --git a/src/ui/molecules/toast/index.tsx b/src/ui/molecules/toast/index.tsx
index 0cbb3f35..56d8aef4 100644
--- a/src/ui/molecules/toast/index.tsx
+++ b/src/ui/molecules/toast/index.tsx
@@ -19,7 +19,7 @@ const ToastBase: React.FC<ToastProps & Variant> = ({
   variant = 'secondary',
 }) => (
   <div className={className} data-outlined={outlined} data-variant={variant}>
-    {icon && <span data-toast-icon>{icon}</span>}
+    {icon && <span data-icon="toast">{icon}</span>}
     <div data-content>{children}</div>
     {action && <span data-action>{action}</span>}
   </div>
@@ -53,7 +53,7 @@ export const Toast = styled(ToastBase)`
 
     background-color: transparent;
 
-    [data-toast-icon] {
+    [data-icon='toast'] {
       svg > path {
         fill: var(--local-shape-color);
       }
@@ -66,7 +66,7 @@ export const Toast = styled(ToastBase)`
     flex-wrap: nowrap;
   }
 
-  [data-toast-icon] {
+  [data-icon='toast'] {
     --woly-component-level: 0;
     --local-icon-size: var(--woly-line-height);
     display: flex;

From 08ae0de03e9f65ae1ca031d903e0ed49afd5deee Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Mon, 31 May 2021 12:42:49 +0300
Subject: [PATCH 05/10] fix toast styles and description

---
 src/ui/molecules/toast/index.tsx | 1 +
 src/ui/molecules/toast/usage.mdx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ui/molecules/toast/index.tsx b/src/ui/molecules/toast/index.tsx
index 56d8aef4..b5116623 100644
--- a/src/ui/molecules/toast/index.tsx
+++ b/src/ui/molecules/toast/index.tsx
@@ -34,6 +34,7 @@ export const Toast = styled(ToastBase)`
   ${box}
 
   display: flex;
+  align-items: center;
   flex-wrap: nowrap;
 
   min-width: fit-content;
diff --git a/src/ui/molecules/toast/usage.mdx b/src/ui/molecules/toast/usage.mdx
index fba7cd89..338913b8 100644
--- a/src/ui/molecules/toast/usage.mdx
+++ b/src/ui/molecules/toast/usage.mdx
@@ -160,4 +160,4 @@ Or even both
 | `action`   | `React.ReactNode`  | `null`        | Block of action items (ex. One element or grop that can be clicked)   |
 | `content`  | `React.ReactNode`  | `null`        | Component to show the icon near the text (ex.: Icon on the left side) |
 | `children` | ``React.ReactNode` | `null`        | Content block                                                         |
-| `variant`  | `string`           | `'secondary'` | Variant prop to style InputPassword component                         |
+| `variant`  | `string`           | `'secondary'` | Variant prop to style Toast component                         |

From afa8d88d8f46bd5547667abb82cae9e88437062b Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Mon, 31 May 2021 12:49:42 +0300
Subject: [PATCH 06/10] fix toast styles and description

---
 src/ui/molecules/toast/usage.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/molecules/toast/usage.mdx b/src/ui/molecules/toast/usage.mdx
index 338913b8..af08fc4e 100644
--- a/src/ui/molecules/toast/usage.mdx
+++ b/src/ui/molecules/toast/usage.mdx
@@ -160,4 +160,4 @@ Or even both
 | `action`   | `React.ReactNode`  | `null`        | Block of action items (ex. One element or grop that can be clicked)   |
 | `content`  | `React.ReactNode`  | `null`        | Component to show the icon near the text (ex.: Icon on the left side) |
 | `children` | ``React.ReactNode` | `null`        | Content block                                                         |
-| `variant`  | `string`           | `'secondary'` | Variant prop to style Toast component                         |
+| `variant`  | `string`           | `'secondary'` | Variant prop to style Toast component                                 |

From 56343822c16d9a0d76b6de50be83e720f92ad3a1 Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Fri, 18 Jun 2021 18:07:55 +0300
Subject: [PATCH 07/10] fix usage

---
 src/ui/molecules/toast/usage.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/molecules/toast/usage.mdx b/src/ui/molecules/toast/usage.mdx
index af08fc4e..99b94924 100644
--- a/src/ui/molecules/toast/usage.mdx
+++ b/src/ui/molecules/toast/usage.mdx
@@ -8,8 +8,8 @@ import { Button, Toast } from 'ui';
 import { IconPlus, IconSearch } from 'static/icons';
 import { block, Playground, State } from 'lib/playground';
 
-`Toasts` are lightweight notifications designed to mimic the push notifications.
-Toasts are intended to be small interruptions to your visitors or users,
+`Toast` is lightweight notification designed to mimic the push notifications.
+Toast is intended to be small interruptions to your visitors or users,
 and therefore should contain minimal, to-the-point, non-interactive content.
 
 ### Example

From c7f318a2c1a2b024eb5ad436832536938eb50e89 Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Fri, 18 Jun 2021 18:12:20 +0300
Subject: [PATCH 08/10] update lint

---
 src/ui/atoms/button/index.tsx    | 8 +++++++-
 src/ui/molecules/toast/usage.mdx | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/ui/atoms/button/index.tsx b/src/ui/atoms/button/index.tsx
index 59f37952..0ba1a8a4 100644
--- a/src/ui/atoms/button/index.tsx
+++ b/src/ui/atoms/button/index.tsx
@@ -32,7 +32,13 @@ const ButtonBase: React.FC<ButtonProps & Variant> = ({
   variant = 'secondary',
   ...p
 }) => (
-  <button type={type} data-fullWidth={fullWidth} data-outlined={outlined} data-variant={variant} {...p}>
+  <button
+    type={type}
+    data-fullWidth={fullWidth}
+    data-outlined={outlined}
+    data-variant={variant}
+    {...p}
+  >
     {icon && <span data-icon="left">{icon}</span>}
     <span data-text>{text}</span>
   </button>
diff --git a/src/ui/molecules/toast/usage.mdx b/src/ui/molecules/toast/usage.mdx
index 78011985..fbe4db60 100644
--- a/src/ui/molecules/toast/usage.mdx
+++ b/src/ui/molecules/toast/usage.mdx
@@ -160,5 +160,5 @@ Or even both
 | `action`   | `React.ReactNode`  | `null`        | Block of action items (ex. One element or grop that can be clicked)   |
 | `content`  | `React.ReactNode`  | `null`        | Component to show the icon near the text (ex.: Icon on the left side) |
 | `children` | ``React.ReactNode` | `null`        | Content block                                                         |
-| `outlined` | `boolean`          | `false`       | Change toast`s view from filled to outlined                        |
+| `outlined` | `boolean`          | `false`       | Change toast`s view from filled to outlined                           |
 | `variant`  | `string`           | `'secondary'` | Variant prop to style Toast component                                 |

From 1e5f0263122cebd3d22030ef54ece03a54ddd8e9 Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Fri, 18 Jun 2021 18:16:30 +0300
Subject: [PATCH 09/10] update lint

---
 src/ui/atoms/button/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/ui/atoms/button/index.tsx b/src/ui/atoms/button/index.tsx
index 0ba1a8a4..ffbcfb89 100644
--- a/src/ui/atoms/button/index.tsx
+++ b/src/ui/atoms/button/index.tsx
@@ -55,9 +55,8 @@ export const Button = styled(ButtonBase)`
   flex-wrap: nowrap;
   justify-content: center;
 
-  padding: 0;
-
   box-sizing: border-box;
+  padding: 0;
 
   color: var(--local-text-color);
   font-size: var(--woly-font-size);

From e147bd75c392b29c7acdb6d6ad2b1d1a39ef77ce Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Fri, 18 Jun 2021 18:20:18 +0300
Subject: [PATCH 10/10] update lint

---
 src/ui/atoms/button/index.tsx    | 1 -
 src/ui/molecules/toast/index.tsx | 5 ++---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/ui/atoms/button/index.tsx b/src/ui/atoms/button/index.tsx
index ffbcfb89..46493f78 100644
--- a/src/ui/atoms/button/index.tsx
+++ b/src/ui/atoms/button/index.tsx
@@ -46,7 +46,6 @@ const ButtonBase: React.FC<ButtonProps & Variant> = ({
 
 export const Button = styled(ButtonBase)`
   ${box}
-
   --local-text-color: var(--woly-shape-text-default);
   --local-shape-color: var(--woly-shape-default);
   --local-border-color: var(--woly-shape-default);
diff --git a/src/ui/molecules/toast/index.tsx b/src/ui/molecules/toast/index.tsx
index b5116623..1bd234d5 100644
--- a/src/ui/molecules/toast/index.tsx
+++ b/src/ui/molecules/toast/index.tsx
@@ -26,16 +26,15 @@ const ToastBase: React.FC<ToastProps & Variant> = ({
 );
 
 export const Toast = styled(ToastBase)`
+  ${box}
   --local-text-color: var(--woly-shape-text-default);
   --local-shape-color: var(--woly-shape-default);
   --local-border-color: var(--woly-shape-default);
   --local-toast-gap: max(9px, calc(1px * var(--woly-component-level) * var(--woly-main-level)));
 
-  ${box}
-
   display: flex;
-  align-items: center;
   flex-wrap: nowrap;
+  align-items: center;
 
   min-width: fit-content;
   max-width: 75%;