✨(react) add Toast component

This component allows to create dynamic Toast appearing at the bottom
of the screen for few seconds.

packages/react/src/components/Toast/index.scss

@@ -0,0 +1,153 @@
+@use "../../utils/responsive" as *;
+
+.c__toast__container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-left: 3rem;
+  padding-bottom: 3rem;
+}
+
+@include media(sm) {
+  .c__toast__container {
+    padding: 0.5rem;
+    right: 0;
+
+    .c__toast {
+      width: 100%;
+      min-width: auto;
+      max-width: none;
+    }
+  }
+}
+
+.c__toast {
+  border-radius: 4px;
+  box-shadow: 0 2px 6px 2px #0C1A2B26;
+  background-color: var(--c--components--toast--background-color);
+  min-width: 18rem;
+  max-width: 27rem;
+  overflow: hidden;
+  will-change: transform;
+  color: var(--c--components--toast--color);
+  font-weight: var(--c--components--toast--font-weight);
+
+  &:not(.c__toast--no-animate) {
+    animation: slide-in var(--c--components--toast--slide-in-duration) ease;
+  }
+
+  &--disappear:not(.c__toast--no-animate) {
+    animation: slide-out var(--c--components--toast--slide-out-duration) ease forwards;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    justify-content: center;
+    flex-shrink: 0;
+
+    span {
+      font-size: var(--c--components--toast--icon-size);
+    }
+  }
+
+  &__content {
+    padding: 1rem;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: 0.5rem;
+
+    &__buttons {
+      flex-shrink: 0;
+    }
+
+    &__children {
+      flex-grow: 1;
+    }
+  }
+
+  .c__progress-bar {
+    --c--progress--color: var(--c--theme--colors--greyscale-600);
+  }
+
+  &--info {
+    .c__progress-bar {
+      --c--progress--color: var(--c--theme--colors--primary-500);
+    }
+
+    .c__toast__icon {
+      color: var(--c--theme--colors--primary-600);
+    }
+  }
+
+  &--success {
+    .c__progress-bar {
+      --c--progress--color: var(--c--theme--colors--success-500);
+    }
+
+    .c__toast__icon {
+      color: var(--c--theme--colors--success-600);
+    }
+  }
+
+  &--warning {
+    .c__progress-bar {
+      --c--progress--color: var(--c--theme--colors--warning-500);
+    }
+
+    .c__toast__icon {
+      color: var(--c--theme--colors--warning-600);
+    }
+  }
+
+  &--error {
+    .c__progress-bar {
+      --c--progress--color: var(--c--theme--colors--danger-500);
+    }
+
+    .c__toast__icon {
+      color: var(--c--theme--colors--danger-600);
+    }
+  }
+
+}
+
+@keyframes slide-out {
+  from {
+    transform: translateX(0)
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0
+  }
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateY(200px)
+  }
+}
+
+.c__progress-bar {
+  height: var(--c--components--toast--progress-bar-height);
+  --c--progress--color: var(--c--theme--colors--primary-500);
+
+  &__content {
+    height: 100%;
+    background-color: var(--c--progress--color);
+  }
+}
+