@itcase/ui 1.0.80 → 1.0.82

package/dist/css/components/Button/Button.css

@@ -1,14 +1,13 @@
 .button {
   text-decoration: none;
   background: none;
+  padding: 0;
+  margin: 0;
   border: solid 0 #fff;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
   transition: var(--button-transition);
   &__loader {
     width: 100%;
@@ -34,7 +33,7 @@
 .button {
   &_shape {
     &_rounded {
-      border-radius: var(--button-shape-rounded-default);
+      border-radius: var(--button-shape-rounded-default, 6px);
       @each $size in xs, s, m, l, xl, xxl {
         &.button_size_$(size) {
           border-radius: var(--button-size-$(size)-shape-rounded);
@@ -329,43 +328,33 @@
   }
 }
 :root {
-  --button-shape-rounded-default: 6px;
   --button-transition: all 0.2s ease 0s;
-
   --button-size-xxs-padding: 4px 12px;
   --button-size-xxs-icon-padding: 0px;
   --button-size-xxs-gap: 6px;
   --button-size-xxs-shape-rounded: 6px;
-
   --button-size-xs-padding: 2px 8px;
   --button-size-xs-icon-padding: 0px;
   --button-size-xs-gap: 6px;
   --button-size-xs-shape-rounded: 6px;
-
   --button-size-s-padding: 4px 16px;
   --button-size-s-icon-padding: 0px;
   --button-size-s-gap: 6px;
   --button-size-s-shape-rounded: 6px;
-
   --button-size-m-padding: 8px 24px;
   --button-size-m-icon-padding: 10px;
   --button-size-m-gap: 6px;
   --button-size-m-shape-rounded: 6px;
-
   --button-size-l-padding: 12px 32px;
   --button-size-l-icon-padding: 0px;
   --button-size-l-gap: 6px;
   --button-size-l-shape-rounded: 6px;
-
   --button-size-xl-padding: 16px 32px;
   --button-size-xl-icon-padding: 0px;
   --button-size-xl-gap: 6px;
   --button-size-xl-shape-rounded: 6px;
-
   --button-size-xxl-padding: 24px 40px;
   --button-size-xxl-icon-padding: 0px;
   --button-size-xxl-gap: 6px;
   --button-size-xxl-shape-rounded: 6px;
 }
-
-

package/dist/css/components/Cell/Cell.css

@@ -2,36 +2,26 @@
   &__wrapper {
     ^&__data {
       display: flex;
-      flex-flow: column nowrap;
-      flex: 1;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 8px;
     }
     ^&__icon {
-      padding: 8px 0 0 0;
-      display: flex;
-      gap: 16px;
-      &-before {
-        display: flex;
-        padding: 0 16px 0 0;
-        align-items: center;
-      }
-      &-after {
-        display: flex;
-        padding: 0 0 0 16px;
-        align-items: center;
-      }
     }
   }
 }
 .cell {
-  &_direction {
-    &_vertical {
-      ^^&__data {
+  &__wrapper {
+    &_direction {
+      &_vertical {
+        display: flex;
+        flex-direction: column;
       }
-    }
-    &_horizontal {
-      ^^&__data {
-        flex-flow: row;
+      &_horizontal {
+        display: flex;
+        flex-direction: row;
         justify-content: space-between;
+        gap: 20px;
       }
     }
   }

package/dist/css/components/Chips/Chips.css

@@ -46,7 +46,7 @@
 .chips {
   &_shape {
     &_rounded {
-      border-radius: var(--chips-shape-rounded-default);
+      border-radius: var(--chips-shape-rounded-default, 6px);
       @each $size in xxs, xs, s, m, l, xl, xxl {
         &.chips_size_$(size) {
           border-radius: var(--chips-size-$(size)-shape-rounded);
@@ -60,7 +60,6 @@
 }
 
 :root {
-  --chips-shape-rounded-default: 6px;
   --chips-size-xxs-shape-rounded: 6px;
   --chips-size-xs-shape-rounded: 6px;
   --chips-size-s-shape-rounded: 6px;

package/dist/css/components/Choice/Choice.css

@@ -10,7 +10,7 @@
 .choice {
   &_shape {
     &_rounded {
-      border-radius: 8px;
+      border-radius: var(--choice-shape-rounded, 8px);
       overflow: hidden;
     }
     &_circular {
@@ -20,7 +20,7 @@
 }
 .choice {
   &_size {
-    @each $size in tiny, compact, normal {
+    @each $size in xs, s, m, l, xl, xxl, tiny, compact, normal, large {
       &_$(size) {
         ^^&__item {
           &-label {
@@ -33,14 +33,13 @@
 }
 .choice__item {
   min-width: 30px;
-  border-width: 0;
   position: relative;
   display: flex;
   &:hover {
     background: var(--choice-item-background-hover);
   }
   &:not(:last-child) {
-    border-right-width: 1px;
+    border-right: 1px solid var(--choice-border-color);
   }
   &_active {
     background: var(--choice-item-background-active);
@@ -69,4 +68,5 @@
 :root {
   --choice-item-background-hover: var(--color-surface-secondary);
   --choice-item-background-active: var(--color-surface-active);
+  --choice-border-color: var(--color-surface-border-tertiary);
 }

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -1,13 +1,12 @@
 .choice__item {
   min-width: 30px;
-  border-width: 0;
   position: relative;
   display: flex;
   &:hover {
     background: var(--choice-item-background-hover);
   }
   &:not(:last-child) {
-    border-right-width: 1px;
+    border-right: 1px solid var(--choice-border-color);
   }
   &_active {
     background: var(--choice-item-background-active);

package/dist/css/components/Code/Code.css

@@ -25,7 +25,7 @@
 .code__input {
   &_shape {
     &_rounded {
-      border-radius: 8px;
+      border-radius: var(--code-input-shape-rounded, 8px);
     }
     &_circular {
       border-radius: 50%;

package/dist/css/components/ContextMenu/ContextMenu.css

@@ -1,11 +1,10 @@
 .context-menu__item {
-  cursor: pointer;
   &-wrapper {
     display: flex;
   }
   &-title {
-    flex: 1;
     white-space: nowrap;
+    flex: 1;
   }
 }
 
@@ -17,8 +16,8 @@
 .context-menu {
   &_shape {
     &_rounded {
+      border-radius: var(--context-menu-shape-rounded, 12px);
       overflow: hidden;
-      border-radius: var(--context-menu-shape-rounded-default);
     }
     &_circular {
       border-radius: 50%;
@@ -37,7 +36,3 @@
     }
   }
 }
-
-:root {
-  --context-menu-shape-rounded-default: 12px;
-}

package/dist/css/components/ContextMenu/css/__item/context-menu__item.css

@@ -1,10 +1,9 @@
 .context-menu__item {
-  cursor: pointer;
   &-wrapper {
     display: flex;
   }
   &-title {
-    flex: 1;
     white-space: nowrap;
+    flex: 1;
   }
 }

package/dist/css/components/DadataHintField/DadataHintField.css

@@ -2,6 +2,7 @@
   &__container {
     width: 100%;
     ^&__input {
+      height: auto;
       color: var(--react-dadata-color);
       padding: var(--react-dadata-padding);
       border: 1px solid var(--react-dadata-border);

package/dist/css/components/DatePicker/DatePicker.css

@@ -899,6 +899,18 @@
                   border-radius: var(--date-picker-day-range-end-border-radius) !important;
                 }
               }
+              &-start.react-datepicker__day--range-end {
+                border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                &:hover {
+                  border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                }
+              }
+              &.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
+                border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                &:hover {
+                  border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                }
+              }
             }
             &--today {
               background: var(--date-picker-day-today-background);
@@ -1069,6 +1081,14 @@
     }
   }
   &__input {
+    &-container {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      & .input {
+        min-width: 256px;
+      }
+    }
     &-time-container {
       text-align: center;
       padding: 4px;
@@ -1089,6 +1109,15 @@
       }
     }
   }
+  &__clear-icon {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+  }
+  &__clear-label {
+    width: 100%;
+  }
   &-wrapper {
     width: 100%;
     ^&__input-container {
@@ -1160,6 +1189,7 @@
   --date-picker-day-range-border-radius: 0;
   --date-picker-day-range-start-border-radius: 12px 0 0 12px;
   --date-picker-day-range-end-border-radius: 0 12px 12px 0;
+  --date-picker-day-range-start-end-border-radius: 12px;
   --date-picker-day-today-background: var(--color-surface-secondary);
   --date-picker-day-today-text-color: var(--color-surface-text-primary);
   --date-picker-day-weekend-background: var(--color-surface-primary);

package/dist/css/components/Divider/Divider.css

@@ -5,58 +5,28 @@
 }
 .divider {
   &_size {
-    &_xs {
-      height: 1px;
-    }
-    &_s {
-      height: 2px;
-    }
-    &_m {
-      height: 3px;
-    }
-    &_l {
-      height: 4px;
-    }
-    &_xl {
-      height: 5px;
+    @each $size in xs, s, m, l, xl {
+      &_$(size) {
+        height: var(--divider-size-$(size)-height);
+      }
     }
   }
   &_direction {
     &_horizontal {
       &^^&_size {
-        &_xs {
-          height: 1px;
-        }
-        &_s {
-          height: 2px;
-        }
-        &_m {
-          height: 3px;
-        }
-        &_l {
-          height: 4px;
-        }
-        &_xl {
-          height: 5px;
+        @each $size in xs, s, m, l, xl {
+          &_$(size) {
+            height: var(--divider-size-$(size)-height);
+          }
         }
       }
     }
     &_vertical {
       &^^&_size {
-        &_xs {
-          width: 1px;
-        }
-        &_s {
-          width: 2px;
-        }
-        &_m {
-          width: 3px;
-        }
-        &_l {
-          width: 4px;
-        }
-        &_xl {
-          width: 5px;
+        @each $size in xs, s, m, l, xl {
+          &_$(size) {
+            width: var(--divider-size-$(size)-width);
+          }
         }
       }
     }
@@ -76,3 +46,15 @@
     }
   }
 }
+:root {
+  --divider-size-xs-height: 1px;
+  --divider-size-s-height: 2px;
+  --divider-size-m-height: 3px;
+  --divider-size-l-height: 4px;
+  --divider-size-xl-height: 5px;
+  --divider-size-xs-width: 1px;
+  --divider-size-s-width: 2px;
+  --divider-size-m-width: 3px;
+  --divider-size-l-width: 4px;
+  --divider-size-xl-width: 5px;
+}

package/dist/css/components/Dot/Dot.css

@@ -1,14 +1,14 @@
 .dot {
 }
 .dot {
-  min-width: var(--dot-width);
-  min-height: var(--dot-height);
-  max-width: var(--dot-width);
-  max-height: var(--dot-height);
+  min-width: var(--dot-width, 16px);
+  min-height: var(--dot-height, 16px);
+  max-width: var(--dot-width, 16px);
+  max-height: var(--dot-height, 16px);
 }
 .dot_shape {
   &_rounded {
-    border-radius: 12px;
+    border-radius: var(--dot-shape-rounded, 12px);
   }
   &_circular {
     border-radius: 50%;
@@ -17,7 +17,3 @@
     border-radius: 0;
   }
 }
-:root {
-  --dot-width: 16px;
-  --dot-height: 16px;
-}

package/dist/css/components/Dropdown/Dropdown.css

@@ -85,3 +85,12 @@
     }
   }
 }
+.dropdown {
+  &__item {
+    &_shape {
+      &_rounded {
+        border-radius: var(--dropdown-item-shape-rounded, 4px);
+      }
+    }
+  }
+}

package/dist/css/components/Flex/Flex.css

@@ -74,7 +74,7 @@
 .flex {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--flex-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;
@@ -159,7 +159,7 @@
   &__item {
     &_shape {
       &_rounded {
-        border-radius: 12px;
+        border-radius: var(--flex-item-shape-rounded, 12px);
       }
       &_circular {
         border-radius: 50%;

package/dist/css/components/Flex/css/__item/flex__item_shape.css

@@ -2,7 +2,7 @@
   &__item {
     &_shape {
       &_rounded {
-        border-radius: 12px;
+        border-radius: var(--flex-item-shape-rounded, 12px);
       }
       &_circular {
         border-radius: 50%;

package/dist/css/components/Grid/Grid.css

@@ -112,7 +112,7 @@
 .grid {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--grid-shape-rounded, 12px);
     }
   }
 }

package/dist/css/components/Group/Group.css

@@ -46,7 +46,7 @@
 .group {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--group-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;

package/dist/css/components/Icon/Icon.css

@@ -116,7 +116,7 @@
 }
 .icon_shape {
   &_rounded {
-    border-radius: 12px;
+    border-radius: var(--icon-shape-rounded, 12px);
   }
   &_circular {
     border-radius: 50%;

package/dist/css/components/Label/Label.css

@@ -23,7 +23,7 @@
 .label {
   &_shape {
     &_rounded {
-      border-radius: var(--label-shape-rounded-default);
+      border-radius: var(--label-shape-rounded-default, 6px);
       @each $size in xxs, xs, s, m, l, xl, xxl {
         &.label_size_$(size) {
           border-radius: var(--label-size-$(size)-shape-rounded);

package/dist/css/components/MenuItem/MenuItem.css

@@ -37,7 +37,7 @@
 .menu-item {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--menu-item-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;
@@ -54,3 +54,13 @@
     }
   }
 }
+
+:root {
+  --menu-item-size-xxs-padding: 0 4px;
+  --menu-item-size-xs-padding: 0 4px;
+  --menu-item-size-s-padding: 1px 4px;
+  --menu-item-size-m-padding: 2px 4px;
+  --menu-item-size-l-padding: 4px 6px;
+  --menu-item-size-xl-padding: 7px 8px;
+  --menu-item-size-xxl-padding: 4px 10px;
+}

package/dist/css/components/Modal/Modal.css

@@ -17,7 +17,7 @@
 }
 .modal-shape {
   &_rounded {
-    border-radius: 20px;
+    border-radius: var(--modal-shape-rounded, 20px);
   }
   &_circular {
     border-radius: 50%;

package/dist/css/components/Notification/Notification.css

@@ -27,20 +27,13 @@
   &_set {
     &_float {
       width: 100%;
-      border-radius: 8px;
+      padding: var(--notification-item-set-float-padding, 12px 16px);
+      border-radius: var(--notification-item-set-float-border-radius, 8px);
+      @mixin elevation-8;
       ^^&-wrapper {
-        padding: 12px 16px;
-        border-radius: 8px;
-        position: relative;
         display: flex;
         flex-direction: column;
         gap: 4px;
-        @mixin elevation-8;
-      }
-      ^^&-close {
-        position: absolute;
-        top: 16px;
-        right: 12px;
       }
     }
   }
@@ -50,8 +43,7 @@
     &_top {
       width: 100%;
       ^^&-wrapper {
-        padding: 12px 0;
-        position: relative;
+        padding: var(--notification-item-set-top-padding, 12px 0);
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -65,11 +57,29 @@
   &_set {
     &_form {
       width: 100%;
+      padding: var(--notification-item-set-form-padding, 12px 16px);
+      border-radius: var(--notification-item-set-form-border-radius, 8px);
       ^^&-wrapper {
         text-align: left;
-        padding: 12px 16px;
-        border-radius: 8px;
-        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+  }
+}
+.notification__item {
+  &_set {
+    &_toast {
+      width: 100%;
+      background: var(--color-surface-primary);
+      padding: var(--notification-item-set-toast-padding, 12px 16px);
+      border-radius: var(--notification-item-set-toast-border-radius, 8px);
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      @mixin elevation-8;
+      ^^&-wrapper {
         display: flex;
         flex-direction: column;
         gap: 4px;
@@ -80,8 +90,8 @@
 .notification__item {
   &_status {
     &_success {
+      background: var(--color-success-primary);
       ^^&-wrapper {
-        background: var(--color-success-primary);
         ^^^&-title {
           color: var(--color-success-text-secondary);
         }
@@ -91,8 +101,8 @@
       }
     }
     &_error {
+      background: var(--color-error-primary);
       ^^&-wrapper {
-        background: var(--color-error-primary);
         ^^^&-title {
           color: var(--color-error-text-secondary);
         }
@@ -102,8 +112,8 @@
       }
     }
     &_warning {
+      background: var(--color-primary-primary);
       ^^&-wrapper {
-        background: var(--color-primary-primary);
         ^^^&-title {
           color: var(--color-primary-text-primary);
         }
@@ -117,13 +127,16 @@
 .notification__item {
   &_type {
     &_close-button {
-      ^^&-title {
-        margin-right: 40px;
-      }
-      ^^&-close {
-        position: absolute;
-        top: 12px;
-        right: 16px;
+      ^^&-wrapper {
+        position: relative;
+        ^^^&-title {
+          margin-right: 40px;
+        }
+        ^^^&-close {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
       }
     }
   }

package/dist/css/components/Notification/css/__item/notification__item_set_float.css

@@ -2,20 +2,13 @@
   &_set {
     &_float {
       width: 100%;
-      border-radius: 8px;
+      padding: var(--notification-item-set-float-padding, 12px 16px);
+      border-radius: var(--notification-item-set-float-border-radius, 8px);
+      @mixin elevation-8;
       ^^&-wrapper {
-        padding: 12px 16px;
-        border-radius: 8px;
-        position: relative;
         display: flex;
         flex-direction: column;
         gap: 4px;
-        @mixin elevation-8;
-      }
-      ^^&-close {
-        position: absolute;
-        top: 16px;
-        right: 12px;
       }
     }
   }