urfu-ui-kit-vanilla 1.0.29 → 1.0.32

package/package.json

@@ -3,7 +3,7 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "UNLICENSED",
   "private": false,
-  "version": "1.0.29",
+  "version": "1.0.32",
   "type": "module",
   "scripts": {
     "start": "vite serve playground",

package/playground/index.html

@@ -590,14 +590,25 @@
         <button class="u-tab-line-secondary">Tab</button>
       </section>
       <h2>Statuses</h2>
-      <section class="flex">
-        <span class="u-status-warning">status</span>
-        <span class="u-status-info">status</span>
-        <span class="u-status-neutral">status</span>
-        <span class="u-status-success">status</span>
-        <span class="u-status-danger">status</span>
-        <span class="u-status-intermediate">status</span>
-        <span class="u-status-prepared">status</span>
+      <section class="flex-container__2">
+        <div class="flex-item">
+          <span class="u-status u-status-warning">status</span>
+          <span class="u-status u-status-info">status</span>
+          <span class="u-status u-status-neutral">status</span>
+          <span class="u-status u-status-success">status</span>
+          <span class="u-status u-status-danger">status</span>
+          <span class="u-status u-status-intermediate">status</span>
+          <span class="u-status u-status-prepared">status</span>
+        </div>
+        <div class="flex-item">
+          <span class="u-status u-status-large u-status-warning">status</span>
+          <span class="u-status u-status-large u-status-info">status</span>
+          <span class="u-status u-status-large u-status-neutral">status</span>
+          <span class="u-status u-status-large u-status-success">status</span>
+          <span class="u-status u-status-large u-status-danger">status</span>
+          <span class="u-status u-status-large u-status-intermediate">status</span>
+          <span class="u-status u-status-large u-status-prepared">status</span>
+        </div>
       </section>
       <h2>Inputs</h2>
       <section>

package/playground/main.ts

@@ -3,7 +3,7 @@ import 'air-datepicker/air-datepicker.css';
 import "../src/main.less";
 
 new AirDatepicker('#airdatepicker', {
-    inline: true,
     toggleSelected: true,
     range: true,
+    position: "bottom right",
 })

package/src/main.css

@@ -79,16 +79,26 @@ button {
   scrollbar-width: thin;
   /*Толщина скролла thin, auto*/
 }
+.flex-container__2 {
+  display: flex;
+  column-gap: 15px;
+}
+.flex-container__2 > .flex-item {
+  flex: 0 0 50%;
+}
 .u-button {
   height: 48px;
   padding: 0 50px;
-  text-align: center;
   border-radius: 10px;
   border: none;
   font-weight: 500;
   font-size: 13px;
   white-space: nowrap;
   cursor: pointer;
+  display: inline-flex;
+  column-gap: 8px;
+  justify-content: center;
+  align-items: center;
   transition-property: color, background-color, border-color, background-image;
   transition-duration: 0.15s;
   transition-timing-function: ease-in-out;
@@ -108,7 +118,6 @@ button {
 .u-button .u-icon {
   position: relative;
   top: 1px;
-  margin-left: 8px;
 }
 .u-button .u-icon::before {
   color: inherit;
@@ -179,13 +188,16 @@ button {
 .u-button-cross {
   height: 48px;
   padding: 0 50px;
-  text-align: center;
   border-radius: 10px;
   border: none;
   font-weight: 500;
   font-size: 13px;
   white-space: nowrap;
   cursor: pointer;
+  display: inline-flex;
+  column-gap: 8px;
+  justify-content: center;
+  align-items: center;
   transition-property: color, background-color, border-color, background-image;
   transition-duration: 0.15s;
   transition-timing-function: ease-in-out;
@@ -200,6 +212,9 @@ button {
 .u-button-cross:hover {
   background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='26' transform='rotate(90 26 26)' fill='white'/%3E%3Cpath d='M20 20L31.5 32M32 20L20 32' stroke='%231E4391' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
 }
+.u-button-medium {
+  height: 44px;
+}
 .u-button-small {
   height: 38px;
   padding: 0 24px;
@@ -934,6 +949,9 @@ button {
 .u-file:hover {
   border: 1px solid #748AB9;
 }
+.u-file-disabled:hover {
+  border: none;
+}
 .u-file-icon {
   cursor: pointer;
   margin: auto;
@@ -966,6 +984,7 @@ button {
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
+  margin: 0;
   color: #748AB9;
   text-align: center;
   margin-bottom: 7px;
@@ -976,6 +995,7 @@ button {
   font-weight: 400;
   font-size: 16px;
   line-height: 22.4px;
+  margin: 0;
   color: #748AB9;
   text-align: center;
 }
@@ -983,6 +1003,7 @@ button {
   font-weight: 400;
   font-size: 12px;
   line-height: 16.8px;
+  margin: 0;
   color: #748AB9;
   text-align: center;
 }
@@ -1631,8 +1652,11 @@ button {
 .pagination-container__p,
 .pagination-container__limit,
 .pagination-container .pages {
-  font-size: 1rem;
-  line-height: 1.5;
+  /*table text*/
+  /*table text*/
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
 }
 .pagination-container__p {
   color: #545454;
@@ -1658,6 +1682,13 @@ button {
   justify-content: space-between;
   margin-left: 0.8rem;
   column-gap: 0.5rem;
+  user-select: none;
+}
+.pagination-container .pages * {
+  cursor: pointer;
+}
+.pagination-container .pages__arrow-btn.inactive {
+  cursor: not-allowed;
 }
 .pagination-container .pages-nums {
   display: flex;
@@ -1666,7 +1697,7 @@ button {
 }
 .pagination-container .pages-num {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   cursor: pointer;
   justify-content: center;
   width: 33px;
@@ -1683,109 +1714,61 @@ button {
   color: #fff;
   background: #1e4391;
 }
-.pagination-container .pages-num:hover {
-  background: rgba(30, 67, 145, 0.3);
+.pagination-container .pages-num:not(.pages-num-active):hover {
+  font-weight: 700;
+  color: #1e4391;
 }
 .pagination-container .pages-num:focus-visible {
   border: none;
   outline: none;
 }
-.u-status-warning {
+.u-status {
   display: flex;
   justify-content: center;
   align-items: center;
   width: max-content;
-  font-size: 12px;
-  line-height: 140%;
+  white-space: nowrap;
+  font-size: 10px;
+  line-height: 1.6;
   font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
+  height: 20px;
+  padding: 0 8px;
   border-radius: 8px;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+.u-status.u-status-large {
+  line-height: 1.4;
+  font-size: 12px;
+  padding: 0 12px;
+  height: 27px;
+  min-width: 45px;
+}
+.u-status-warning {
   background-color: #fcf4e6;
   color: #e98446;
 }
 .u-status-info {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
   background-color: #e7f2ff;
   color: #1e4391;
 }
 .u-status-neutral {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
   background-color: #eee;
   color: #222;
 }
 .u-status-success {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
   background-color: #edf7eb;
   color: #147246;
 }
 .u-status-danger {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
   background-color: #fdeaea;
   color: #ef302b;
 }
 .u-status-intermediate {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
-  background-color: #FCF4FF;
-  color: #742C8E;
+  background-color: #fcf4ff;
+  color: #742c8e;
 }
 .u-status-prepared {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  font-size: 12px;
-  line-height: 140%;
-  font-weight: 400;
-  height: 27px;
-  padding: 0 12px;
-  border-radius: 8px;
-  background-color: #E8FFFF;
+  background-color: #e8ffff;
   color: #007171;
 }
 .u-message {
@@ -1883,7 +1866,7 @@ button {
   color: #222222;
   background-repeat: no-repeat;
   background-position: top calc(50% - 1px) left 16px;
-  border: 2px solid rgba(184, 218, 255, 0.85);
+  border: 1px solid #748ab9;
   background-color: #E7F2FF;
   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%231E4391' stroke-width='2'%3E%3C/circle%3E%3Crect x='9' y='8' width='2' height='8' rx='1' fill='%231E4391'%3E%3C/rect%3E%3Ccircle cx='10' cy='6' r='1' fill='%231E4391'%3E%3C/circle%3E%3C/svg%3E");
 }
@@ -1910,8 +1893,8 @@ button {
   color: #222222;
   background-repeat: no-repeat;
   background-position: top calc(50% - 1px) left 16px;
-  border: 2px solid rgba(184, 218, 255, 0.85);
-  border-color: rgba(248, 215, 218, 0.85);
+  border: 1px solid #748ab9;
+  border-color: #F17F7C;
   background-color: #FDEAEA;
   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23EF302B' stroke-width='2'%3E%3C/circle%3E%3Ccircle cx='10' cy='15' r='1' fill='%23EF302B'%3E%3C/circle%3E%3Cpath d='M8.59357 6.49708C8.54286 5.68582 9.18716 5 10 5C10.8128 5 11.4571 5.68582 11.4064 6.49708L11.0624 12.0019C11.0273 12.563 10.5621 13 10 13C9.4379 13 8.97268 12.563 8.93762 12.0019L8.59357 6.49708Z' fill='%23EF302B'%3E%3C/path%3E%3C/svg%3E");
 }
@@ -1938,9 +1921,9 @@ button {
   color: #222222;
   background-repeat: no-repeat;
   background-position: top calc(50% - 1px) left 16px;
-  border: 2px solid rgba(184, 218, 255, 0.85);
+  border: 1px solid #748ab9;
   background-color: #EDF7EB;
-  border-color: rgba(212, 237, 218, 0.85);
+  border-color: #6EA68C;
   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23147246' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M6 10.5L9.10148 13.6015C9.31345 13.8134 9.663 13.7925 9.8482 13.5568L15 7' stroke='%23147246' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
 }
 .u-notification-success .u-notification-hide {
@@ -1966,8 +1949,8 @@ button {
   color: #222222;
   background-repeat: no-repeat;
   background-position: top calc(50% - 1px) left 16px;
-  border: 2px solid rgba(184, 218, 255, 0.85);
-  border-color: rgba(255, 243, 205, 0.85);
+  border: 1px solid #748ab9;
+  border-color: #EEB18C;
   background-color: #FCF4E6;
   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23E98446' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M9.24233 13C9.03869 13 8.87361 12.8349 8.87361 12.6313C8.87361 12.229 8.92092 11.8715 9.01552 11.5587C9.11013 11.2458 9.25795 10.9665 9.45898 10.7207C9.67184 10.4749 9.84922 10.2905 9.99113 10.1676C10.1449 10.0335 10.3696 9.86034 10.6652 9.64805C10.9017 9.48045 11.0791 9.34637 11.1973 9.24581C11.3274 9.13408 11.4693 8.99441 11.6231 8.82682C11.7886 8.64804 11.9069 8.4581 11.9778 8.25698C12.0488 8.05587 12.0843 7.82681 12.0843 7.56983C12.0843 7.20112 11.9897 6.8771 11.8004 6.59777C11.6231 6.30727 11.3747 6.08939 11.0554 5.94413C10.748 5.78771 10.3991 5.7095 10.0089 5.7095C9.42942 5.7095 8.92683 5.87709 8.50111 6.21229C8.33022 6.34607 8.19259 6.4989 8.08823 6.67078C7.82922 7.09735 7.45131 7.51955 6.95227 7.51955C6.4297 7.51955 5.99284 7.08288 6.12856 6.57825C6.30589 5.91891 6.6651 5.37233 7.20621 4.93855C7.99852 4.31285 8.93275 4 10.0089 4C11.1323 4 12.0783 4.32402 12.847 4.97207C13.6157 5.62012 14 6.48603 14 7.56983C14 7.97207 13.9527 8.32961 13.8581 8.64246C13.7635 8.95531 13.6157 9.24023 13.4146 9.49721C13.2136 9.74302 13.0362 9.93296 12.8825 10.067C12.7288 10.2011 12.51 10.3743 12.2262 10.5866C11.9778 10.7765 11.7945 10.9218 11.6763 11.0223C11.5698 11.1117 11.4339 11.2458 11.2683 11.4246C11.1146 11.6034 11.0022 11.7933 10.9313 11.9944C10.8721 12.1844 10.8426 12.3966 10.8426 12.6313C10.8426 12.8349 10.6775 13 10.4739 13H9.24233Z' fill='%23E98446'%3E%3C/path%3E%3Ccircle cx='10' cy='15' r='1' fill='%23E98446'%3E%3C/circle%3E%3C/svg%3E");
 }
@@ -2206,6 +2189,12 @@ button {
 .air-datepicker.-inline- {
   border: 1px solid #748AB9;
 }
+.air-datepicker--pointer::after {
+  content: none;
+}
+.air-datepicker.-active-:not(.-custom-position-) {
+  transform: translate(0, -12px);
+}
 .air-datepicker-nav {
   border: none;
 }
@@ -2417,6 +2406,13 @@ button {
 .air-datepicker-cell.-day-.-other-month-.-weekend-.-selected-.-range-to- {
   background-color: #EF302B;
 }
+.air-datepicker-cell.-day-.-other-month-.-selected- {
+  background-color: #1E4391;
+}
+.air-datepicker-cell.-day-.-other-month-.-selected-.-focus- {
+  background-color: #1E4391;
+  color: white;
+}
 .air-datepicker-cell.-month- {
   padding: 6px 12px;
   margin: auto;
@@ -2769,19 +2765,19 @@ button {
 .bg-blue {
   background-color: #1E4391;
 }
+.bg-blue-dark {
+  background-color: #0F2B5E;
+}
+.bg-blue-light {
+  background-color: #9FAECD;
+}
 .bg-red {
   background-color: #EF302B;
 }
-.bg-dark-blue {
-  background-color: #0F2B5E;
-}
-.bg-dark-red {
+.bg-red-dark {
   background-color: #C0231F;
 }
-.bg-light-blue {
-  background-color: #9FAECD;
-}
-.bg-light-red {
+.bg-red-light {
   background-color: #F58380;
 }
 .clr-transparent {
@@ -2890,86 +2886,6 @@ h5 {
   text-decoration: underline;
   text-underline-offset: 0.22em;
 }
-.pagination-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1.5rem 3.6rem;
-}
-.pagination-container__p,
-.pagination-container__limit,
-.pagination-container .pages {
-  /*table text*/
-  /*table text*/
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-}
-.pagination-container__p {
-  color: #545454;
-}
-.pagination-container__limit-wrapper {
-  display: inline-flex;
-  align-items: center;
-  column-gap: 16px;
-  padding-left: 1rem;
-}
-.pagination-container__limit {
-  font-weight: 600;
-  cursor: pointer;
-}
-.pagination-container .limit-active,
-.pagination-container__limit:hover {
-  font-weight: 700;
-  color: #1e4391;
-}
-.pagination-container .pages {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-left: 0.8rem;
-  column-gap: 0.5rem;
-  user-select: none;
-}
-.pagination-container .pages * {
-  cursor: pointer;
-}
-.pagination-container .pages__arrow-btn.inactive {
-  cursor: not-allowed;
-}
-.pagination-container .pages-nums {
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
-}
-.pagination-container .pages-num {
-  display: flex;
-  align-items: flex-end;
-  cursor: pointer;
-  justify-content: center;
-  width: 33px;
-  height: 32px;
-  border-radius: 8px;
-  padding: 8px;
-  box-sizing: border-box;
-  color: #545454;
-  border: none;
-  text-decoration: none;
-  background: transparent;
-}
-.pagination-container .pages-num-active {
-  color: #fff;
-  background: #1e4391;
-}
-.pagination-container .pages-num:not(.pages-num-active):hover {
-  font-weight: 700;
-  color: #1e4391;
-}
-.pagination-container .pages-num:focus-visible {
-  border: none;
-  outline: none;
-}
-
 * {
   box-sizing: border-box;
 }
@@ -3022,3 +2938,10 @@ button {
   scrollbar-width: thin;
   /*Толщина скролла thin, auto*/
 }
+.flex-container__2 {
+  display: flex;
+  column-gap: 15px;
+}
+.flex-container__2 > .flex-item {
+  flex: 0 0 50%;
+}

package/src/main.less

@@ -80,6 +80,15 @@ button {
   scrollbar-width: thin; /*Толщина скролла thin, auto*/
 }
 
+.flex-container__2 {
+  display: flex;
+  column-gap: 15px;
+}
+
+.flex-container__2 > .flex-item {
+  flex: 0 0 50%;
+}
+
 
 // страница показа
 

package/src/styles/components/airdatepicker.less

@@ -7,6 +7,12 @@
     &.-inline- {
         border: 1px solid @clr-secondary-cold;
     }
+    &--pointer::after {
+        content: none;
+    }
+    &.-active-:not(.-custom-position-) {
+        transform: translate(0, -12px);
+    }
     &-nav {
         border: none;
         &--action {
@@ -219,6 +225,13 @@
                 &.-weekend-.-selected-.-range-to- {
                     background-color: @clr-main-danger;
                 }
+                &.-selected- {
+                    background-color: @clr-main-primary;
+                    &.-focus- {
+                        background-color: @clr-main-primary;
+                        color: white;
+                    }
+                }
             }
         }
         &.-month- {

package/src/styles/components/button.less

@@ -3,13 +3,16 @@
 .button() {
     height: @height-main;
     padding: 0 50px;
-    text-align: center;
     border-radius: @radius;
     border: none;
     font-weight: 500;
     font-size: 13px;
     white-space: nowrap;
     cursor: pointer;
+    display: inline-flex;
+    column-gap: 8px;
+    justify-content: center;
+    align-items: center;
     .transition;
 }
 
@@ -44,7 +47,6 @@
     .u-icon {
         position: relative;
         top: 1px;
-        margin-left: 8px;
         &::before {
             color: inherit;
         }
@@ -121,6 +123,9 @@
             background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='26' transform='rotate(90 26 26)' fill='white'/%3E%3Cpath d='M20 20L31.5 32M32 20L20 32' stroke='%231E4391' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
         }
     }
+    &-medium {
+        height:@height-medium;
+    }
     &-small {
         height: @height-small;
         padding: 0 24px;

package/src/styles/components/input.less

@@ -449,6 +449,9 @@
     &:hover {
         border: 1px solid @clr-secondary-cold;
     }
+    &-disabled:hover {
+        border: none;
+    }
     &-icon {
         cursor: pointer;
         margin: auto;
@@ -477,17 +480,20 @@
     }
     &-title {
         .tt;
+        margin: 0;
         color: @clr-secondary-cold;
         text-align: center;
         margin-bottom: 7px;
         &-loading {
             .st;
+            margin: 0;
             color: @clr-secondary-cold;
             text-align: center;
         }
     }
     &-subtitle {
         .h5;
+        margin: 0;
         color: @clr-secondary-cold;
         text-align: center;
     }

package/src/styles/components/notification.less

@@ -13,7 +13,7 @@
     color: @clr-main-dark;
     background-repeat: no-repeat;
     background-position: top calc(50% - 1px) left 16px; 
-    border: 2px solid rgba(184, 218, 255, 0.85);
+    border: 1px solid #748ab9;
 }
 
 .notification-hide() {
@@ -36,7 +36,7 @@
     }
     &-fail {
         .notification;
-        border-color: rgba(248, 215, 218, 0.85);
+        border-color: #F17F7C;
         background-color: #FDEAEA;
         background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23EF302B' stroke-width='2'%3E%3C/circle%3E%3Ccircle cx='10' cy='15' r='1' fill='%23EF302B'%3E%3C/circle%3E%3Cpath d='M8.59357 6.49708C8.54286 5.68582 9.18716 5 10 5C10.8128 5 11.4571 5.68582 11.4064 6.49708L11.0624 12.0019C11.0273 12.563 10.5621 13 10 13C9.4379 13 8.97268 12.563 8.93762 12.0019L8.59357 6.49708Z' fill='%23EF302B'%3E%3C/path%3E%3C/svg%3E");
         .u-notification-hide {
@@ -47,7 +47,7 @@
     &-success {
         .notification;
         background-color: #EDF7EB;
-        border-color: rgba(212, 237, 218, 0.85);
+        border-color:#6EA68C;
         background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23147246' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M6 10.5L9.10148 13.6015C9.31345 13.8134 9.663 13.7925 9.8482 13.5568L15 7' stroke='%23147246' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
         .u-notification-hide {
             .notification-hide;
@@ -56,7 +56,7 @@
     }
     &-warning {
         .notification;
-        border-color: rgba(255, 243, 205, 0.85);
+        border-color: #EEB18C;
         background-color: #FCF4E6;
         background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23E98446' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M9.24233 13C9.03869 13 8.87361 12.8349 8.87361 12.6313C8.87361 12.229 8.92092 11.8715 9.01552 11.5587C9.11013 11.2458 9.25795 10.9665 9.45898 10.7207C9.67184 10.4749 9.84922 10.2905 9.99113 10.1676C10.1449 10.0335 10.3696 9.86034 10.6652 9.64805C10.9017 9.48045 11.0791 9.34637 11.1973 9.24581C11.3274 9.13408 11.4693 8.99441 11.6231 8.82682C11.7886 8.64804 11.9069 8.4581 11.9778 8.25698C12.0488 8.05587 12.0843 7.82681 12.0843 7.56983C12.0843 7.20112 11.9897 6.8771 11.8004 6.59777C11.6231 6.30727 11.3747 6.08939 11.0554 5.94413C10.748 5.78771 10.3991 5.7095 10.0089 5.7095C9.42942 5.7095 8.92683 5.87709 8.50111 6.21229C8.33022 6.34607 8.19259 6.4989 8.08823 6.67078C7.82922 7.09735 7.45131 7.51955 6.95227 7.51955C6.4297 7.51955 5.99284 7.08288 6.12856 6.57825C6.30589 5.91891 6.6651 5.37233 7.20621 4.93855C7.99852 4.31285 8.93275 4 10.0089 4C11.1323 4 12.0783 4.32402 12.847 4.97207C13.6157 5.62012 14 6.48603 14 7.56983C14 7.97207 13.9527 8.32961 13.8581 8.64246C13.7635 8.95531 13.6157 9.24023 13.4146 9.49721C13.2136 9.74302 13.0362 9.93296 12.8825 10.067C12.7288 10.2011 12.51 10.3743 12.2262 10.5866C11.9778 10.7765 11.7945 10.9218 11.6763 11.0223C11.5698 11.1117 11.4339 11.2458 11.2683 11.4246C11.1146 11.6034 11.0022 11.7933 10.9313 11.9944C10.8721 12.1844 10.8426 12.3966 10.8426 12.6313C10.8426 12.8349 10.6775 13 10.4739 13H9.24233Z' fill='%23E98446'%3E%3C/path%3E%3Ccircle cx='10' cy='15' r='1' fill='%23E98446'%3E%3C/circle%3E%3C/svg%3E");
         .u-notification-hide {

package/src/styles/components/status.less

@@ -1,56 +1,61 @@
 @import "../../main.less";
 
-.status() {
+
+.u-status {
     display: flex;
     justify-content: center;
     align-items: center;
     width: max-content;
-    font-size: 12px;
-    line-height: 140%;
+    white-space: nowrap;
+    font-size: 10px;
+    line-height: 1.6;
     font-weight: 400;
-    height: 27px;
-    padding: 0 12px;
+    height: 20px;
+    padding: 0 8px;
     border-radius: 8px;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+    &&-large {
+        line-height: 1.4;
+        font-size: 12px;
+        padding: 0 12px;
+        height: 27px;
+        min-width: 45px;
+    }
+
+    &-warning {
+        background-color: #fcf4e6;
+        color: #e98446;
+    }
+
+    &-info {
+        background-color: #e7f2ff;
+        color: #1e4391;
+    }
+
+    &-neutral {
+        background-color: #eee;
+        color: #222;
+    }
+
+    &-success {
+        background-color: #edf7eb;
+        color: #147246;
+    }
+
+    &-danger {
+        background-color: #fdeaea;
+        color: #ef302b;
+    }
+
+    &-intermediate {
+        background-color: #fcf4ff;
+        color: #742c8e;
+    }
+
+    &-prepared {
+        background-color: #e8ffff;
+        color: #007171;
+    }
 }
-
-.u-status-warning {
-    .status;
-    background-color: #fcf4e6;
-    color: #e98446;
-}
-
-.u-status-info {
-    .status;
-    background-color: #e7f2ff;
-    color: #1e4391;
-}
-
-.u-status-neutral {
-    .status;
-    background-color: #eee;
-    color: #222;
-}
-
-.u-status-success {
-    .status;
-    background-color: #edf7eb;
-    color: #147246;
-}
-
-.u-status-danger {
-    .status;
-    background-color: #fdeaea;
-    color: #ef302b;
-}
-
-.u-status-intermediate {
-    .status;
-    background-color: #FCF4FF;
-    color: #742C8E;
-}
-
-.u-status-prepared {
-    .status;
-    background-color: #E8FFFF;
-    color: #007171;
-}

package/src/styles/const/base.less

@@ -1,5 +1,6 @@
 @height-main: 48px;
 @height-secondary: 54px;
+@height-medium: 44px;
 @height-small: 38px;
 @radius: 10px;
 .transition() {

package/src/styles/special-classes/colors.less

@@ -10,27 +10,22 @@
     }
     &-blue {
         background-color: @clr-main-primary;
-    }
-    &-red {
-        background-color: @clr-main-danger;
-    }
-    &-dark {
-        &-blue {
+        &-dark {
             background-color: @clr-secondary-primary;
         }
-        &-red {
-            background-color: @clr-secondary-danger;
+        &-light {
+            background-color: @clr-secondary-chilly;
         }
     }
-    &-light {
-        &-blue {
-            background-color: @clr-secondary-chilly;
+    &-red {
+        background-color: @clr-main-danger;
+        &-dark {
+            background-color: @clr-secondary-danger;
         }
-        &-red {
+        &-light {
             background-color: @clr-secondary-focusing;
         }
     }
-    
 }
 //property: color
 .clr {