@itcase/ui 1.8.159 → 1.8.160

package/dist/css/components/Checkmark/Checkmark.css

@@ -14,18 +14,69 @@
 }
 .checkmark {
   &_size {
-    @each $size, $scale in (xxl, xl, l, m, s, xs, xxs),
-      (1.2, 1, 0.8, 0.7, 0.7, 0.7, 0.8) {
-      &_$(size) {
-        width: var(--checkmark-$(size)-width);
-        height: var(--checkmark-$(size)-height);
-        min-width: var(--checkmark-$(size)-width);
-        min-height: var(--checkmark-$(size)-height);
+      &_xxl {
+        width: var(--checkmark-xxl-width);
+        height: var(--checkmark-xxl-height);
+        min-width: var(--checkmark-xxl-width);
+        min-height: var(--checkmark-xxl-height);
         & svg {
-          transform: scale($(scale));
+          transform: scale(1.2);
+        }
+      }
+      &_xl {
+        width: var(--checkmark-xl-width);
+        height: var(--checkmark-xl-height);
+        min-width: var(--checkmark-xl-width);
+        min-height: var(--checkmark-xl-height);
+        & svg {
+          transform: scale(1);
+        }
+      }
+      &_l {
+        width: var(--checkmark-l-width);
+        height: var(--checkmark-l-height);
+        min-width: var(--checkmark-l-width);
+        min-height: var(--checkmark-l-height);
+        & svg {
+          transform: scale(0.8);
+        }
+      }
+      &_m {
+        width: var(--checkmark-m-width);
+        height: var(--checkmark-m-height);
+        min-width: var(--checkmark-m-width);
+        min-height: var(--checkmark-m-height);
+        & svg {
+          transform: scale(0.7);
+        }
+      }
+      &_s {
+        width: var(--checkmark-s-width);
+        height: var(--checkmark-s-height);
+        min-width: var(--checkmark-s-width);
+        min-height: var(--checkmark-s-height);
+        & svg {
+          transform: scale(0.7);
+        }
+      }
+      &_xs {
+        width: var(--checkmark-xs-width);
+        height: var(--checkmark-xs-height);
+        min-width: var(--checkmark-xs-width);
+        min-height: var(--checkmark-xs-height);
+        & svg {
+          transform: scale(0.7);
+        }
+      }
+      &_xxs {
+        width: var(--checkmark-xxs-width);
+        height: var(--checkmark-xxs-height);
+        min-width: var(--checkmark-xxs-width);
+        min-height: var(--checkmark-xxs-height);
+        & svg {
+          transform: scale(0.8);
         }
       }
-    }
   }
 }
 :root {

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

@@ -6,16 +6,62 @@
   }
 }
 .chips {
-  @each $size in xxl, xl, l, m, s, xs, xxs {
-    &_size_$(size) {
+    &_size_xxl {
       ^&__inner {
-        min-width: var(--chips-$(size)-min-width);
-        min-height: var(--chips-$(size)-min-height);
-        padding: var(--chips-$(size)-padding);
-        gap: var(--chips-$(size)-gap);
+        min-width: var(--chips-xxl-min-width);
+        min-height: var(--chips-xxl-min-height);
+        padding: var(--chips-xxl-padding);
+        gap: var(--chips-xxl-gap);
+      }
+    }
+    &_size_xl {
+      ^&__inner {
+        min-width: var(--chips-xl-min-width);
+        min-height: var(--chips-xl-min-height);
+        padding: var(--chips-xl-padding);
+        gap: var(--chips-xl-gap);
+      }
+    }
+    &_size_l {
+      ^&__inner {
+        min-width: var(--chips-l-min-width);
+        min-height: var(--chips-l-min-height);
+        padding: var(--chips-l-padding);
+        gap: var(--chips-l-gap);
+      }
+    }
+    &_size_m {
+      ^&__inner {
+        min-width: var(--chips-m-min-width);
+        min-height: var(--chips-m-min-height);
+        padding: var(--chips-m-padding);
+        gap: var(--chips-m-gap);
+      }
+    }
+    &_size_s {
+      ^&__inner {
+        min-width: var(--chips-s-min-width);
+        min-height: var(--chips-s-min-height);
+        padding: var(--chips-s-padding);
+        gap: var(--chips-s-gap);
+      }
+    }
+    &_size_xs {
+      ^&__inner {
+        min-width: var(--chips-xs-min-width);
+        min-height: var(--chips-xs-min-height);
+        padding: var(--chips-xs-padding);
+        gap: var(--chips-xs-gap);
+      }
+    }
+    &_size_xxs {
+      ^&__inner {
+        min-width: var(--chips-xxs-min-width);
+        min-height: var(--chips-xxs-min-height);
+        padding: var(--chips-xxs-padding);
+        gap: var(--chips-xxs-gap);
       }
     }
-  }
 }
 .chips {
   &&_skeleton {

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

@@ -43,20 +43,90 @@
 }
 .choice__item {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
-        min-height: var(--choice-item-$(size)-min-height);
-        padding: var(--choice-item-$(size)-padding);
+      &_xxl {
+        min-height: var(--choice-item-xxl-min-height);
+        padding: var(--choice-item-xxl-padding);
         &^^&_icon {
-          width: var(--choice-item-icon-$(size)-width);
-          height: var(--choice-item-icon-$(size)-height);
+          width: var(--choice-item-icon-xxl-width);
+          height: var(--choice-item-icon-xxl-height);
           padding: 0;
         }
         ^^&-label {
-          gap: var(--choice-item-$(size)-gap);
+          gap: var(--choice-item-xxl-gap);
+        }
+      }
+      &_xl {
+        min-height: var(--choice-item-xl-min-height);
+        padding: var(--choice-item-xl-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-xl-width);
+          height: var(--choice-item-icon-xl-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-xl-gap);
+        }
+      }
+      &_l {
+        min-height: var(--choice-item-l-min-height);
+        padding: var(--choice-item-l-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-l-width);
+          height: var(--choice-item-icon-l-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-l-gap);
+        }
+      }
+      &_m {
+        min-height: var(--choice-item-m-min-height);
+        padding: var(--choice-item-m-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-m-width);
+          height: var(--choice-item-icon-m-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-m-gap);
+        }
+      }
+      &_s {
+        min-height: var(--choice-item-s-min-height);
+        padding: var(--choice-item-s-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-s-width);
+          height: var(--choice-item-icon-s-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-s-gap);
+        }
+      }
+      &_xs {
+        min-height: var(--choice-item-xs-min-height);
+        padding: var(--choice-item-xs-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-xs-width);
+          height: var(--choice-item-icon-xs-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-xs-gap);
+        }
+      }
+      &_xxs {
+        min-height: var(--choice-item-xxs-min-height);
+        padding: var(--choice-item-xxs-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-xxs-width);
+          height: var(--choice-item-icon-xxs-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-xxs-gap);
         }
       }
-    }
   }
 }
 .choice {
@@ -99,15 +169,55 @@
     &_wrap {
       flex-wrap: wrap;
       &^^&_size {
-        @each $size in xxl, xl, l, m, s, xs, xxs {
-          &_$(size) {
-            gap: var(--choice-size-$(size)-row-gap)
-              var(--choice-size-$(size)-column-gap);
+          &_xxl {
+            gap: var(--choice-size-xxl-row-gap)
+              var(--choice-size-xxl-column-gap);
+            & .choice__item {
+              margin: 0;
+            }
+          }
+          &_xl {
+            gap: var(--choice-size-xl-row-gap)
+              var(--choice-size-xl-column-gap);
+            & .choice__item {
+              margin: 0;
+            }
+          }
+          &_l {
+            gap: var(--choice-size-l-row-gap)
+              var(--choice-size-l-column-gap);
+            & .choice__item {
+              margin: 0;
+            }
+          }
+          &_m {
+            gap: var(--choice-size-m-row-gap)
+              var(--choice-size-m-column-gap);
+            & .choice__item {
+              margin: 0;
+            }
+          }
+          &_s {
+            gap: var(--choice-size-s-row-gap)
+              var(--choice-size-s-column-gap);
+            & .choice__item {
+              margin: 0;
+            }
+          }
+          &_xs {
+            gap: var(--choice-size-xs-row-gap)
+              var(--choice-size-xs-column-gap);
+            & .choice__item {
+              margin: 0;
+            }
+          }
+          &_xxs {
+            gap: var(--choice-size-xxs-row-gap)
+              var(--choice-size-xxs-column-gap);
             & .choice__item {
               margin: 0;
             }
           }
-        }
       }
     }
     &_nowrap {

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

@@ -1,18 +1,88 @@
 .choice__item {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
-        min-height: var(--choice-item-$(size)-min-height);
-        padding: var(--choice-item-$(size)-padding);
+      &_xxl {
+        min-height: var(--choice-item-xxl-min-height);
+        padding: var(--choice-item-xxl-padding);
         &^^&_icon {
-          width: var(--choice-item-icon-$(size)-width);
-          height: var(--choice-item-icon-$(size)-height);
+          width: var(--choice-item-icon-xxl-width);
+          height: var(--choice-item-icon-xxl-height);
           padding: 0;
         }
         ^^&-label {
-          gap: var(--choice-item-$(size)-gap);
+          gap: var(--choice-item-xxl-gap);
+        }
+      }
+      &_xl {
+        min-height: var(--choice-item-xl-min-height);
+        padding: var(--choice-item-xl-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-xl-width);
+          height: var(--choice-item-icon-xl-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-xl-gap);
+        }
+      }
+      &_l {
+        min-height: var(--choice-item-l-min-height);
+        padding: var(--choice-item-l-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-l-width);
+          height: var(--choice-item-icon-l-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-l-gap);
+        }
+      }
+      &_m {
+        min-height: var(--choice-item-m-min-height);
+        padding: var(--choice-item-m-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-m-width);
+          height: var(--choice-item-icon-m-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-m-gap);
+        }
+      }
+      &_s {
+        min-height: var(--choice-item-s-min-height);
+        padding: var(--choice-item-s-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-s-width);
+          height: var(--choice-item-icon-s-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-s-gap);
+        }
+      }
+      &_xs {
+        min-height: var(--choice-item-xs-min-height);
+        padding: var(--choice-item-xs-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-xs-width);
+          height: var(--choice-item-icon-xs-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-xs-gap);
+        }
+      }
+      &_xxs {
+        min-height: var(--choice-item-xxs-min-height);
+        padding: var(--choice-item-xxs-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-xxs-width);
+          height: var(--choice-item-icon-xxs-height);
+          padding: 0;
+        }
+        ^^&-label {
+          gap: var(--choice-item-xxs-gap);
         }
       }
-    }
   }
 }

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

@@ -15,14 +15,30 @@
 }
 .code__input {
   &_size {
-    @each $size in xl, l, m, s {
-      &_$(size) {
-        min-width: var(--code-input-size-$(size)-width);
-        min-height: var(--code-input-size-$(size)-height);
-        max-width: var(--code-input-size-$(size)-width);
-        max-height: var(--code-input-size-$(size)-height);
+      &_xl {
+        min-width: var(--code-input-size-xl-width);
+        min-height: var(--code-input-size-xl-height);
+        max-width: var(--code-input-size-xl-width);
+        max-height: var(--code-input-size-xl-height);
+      }
+      &_l {
+        min-width: var(--code-input-size-l-width);
+        min-height: var(--code-input-size-l-height);
+        max-width: var(--code-input-size-l-width);
+        max-height: var(--code-input-size-l-height);
+      }
+      &_m {
+        min-width: var(--code-input-size-m-width);
+        min-height: var(--code-input-size-m-height);
+        max-width: var(--code-input-size-m-width);
+        max-height: var(--code-input-size-m-height);
+      }
+      &_s {
+        min-width: var(--code-input-size-s-width);
+        min-height: var(--code-input-size-s-height);
+        max-width: var(--code-input-size-s-width);
+        max-height: var(--code-input-size-s-height);
       }
-    }
   }
   &[type='number']::-webkit-outer-spin-button,
   &[type='number']::-webkit-inner-spin-button {
@@ -35,13 +51,41 @@
 }
 .code {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
+      &_xxl {
         ^^&__wrapper {
-          gap: var(--code-size-$(size)-gap);
+          gap: var(--code-size-xxl-gap);
+        }
+      }
+      &_xl {
+        ^^&__wrapper {
+          gap: var(--code-size-xl-gap);
+        }
+      }
+      &_l {
+        ^^&__wrapper {
+          gap: var(--code-size-l-gap);
+        }
+      }
+      &_m {
+        ^^&__wrapper {
+          gap: var(--code-size-m-gap);
+        }
+      }
+      &_s {
+        ^^&__wrapper {
+          gap: var(--code-size-s-gap);
+        }
+      }
+      &_xs {
+        ^^&__wrapper {
+          gap: var(--code-size-xs-gap);
+        }
+      }
+      &_xxs {
+        ^^&__wrapper {
+          gap: var(--code-size-xxs-gap);
         }
       }
-    }
   }
 }
 .code__input {

package/dist/css/components/DatePeriod/DatePeriod.css

@@ -32,21 +32,71 @@
 }
 .date-period {
   &_size {
-    @each $size in xxs, xs, s, m, l, xl, xxl {
-      &_$(size) {
-        min-width: var(--date-period-$(size)-min-width);
-        min-height: var(--date-period-$(size)-min-height);
-        padding: var(--date-period-$(size)-padding);
+      &_xxs {
+        min-width: var(--date-period-xxs-min-width);
+        min-height: var(--date-period-xxs-min-height);
+        padding: var(--date-period-xxs-padding);
+      }
+      &_xs {
+        min-width: var(--date-period-xs-min-width);
+        min-height: var(--date-period-xs-min-height);
+        padding: var(--date-period-xs-padding);
+      }
+      &_s {
+        min-width: var(--date-period-s-min-width);
+        min-height: var(--date-period-s-min-height);
+        padding: var(--date-period-s-padding);
+      }
+      &_m {
+        min-width: var(--date-period-m-min-width);
+        min-height: var(--date-period-m-min-height);
+        padding: var(--date-period-m-padding);
+      }
+      &_l {
+        min-width: var(--date-period-l-min-width);
+        min-height: var(--date-period-l-min-height);
+        padding: var(--date-period-l-padding);
+      }
+      &_xl {
+        min-width: var(--date-period-xl-min-width);
+        min-height: var(--date-period-xl-min-height);
+        padding: var(--date-period-xl-padding);
+      }
+      &_xxl {
+        min-width: var(--date-period-xxl-min-width);
+        min-height: var(--date-period-xxl-min-height);
+        padding: var(--date-period-xxl-padding);
       }
-    }
   }
   &__datepicker-input_size {
-    @each $inputSize in xxs, xs, s, m, l, xl, xxl {
-      input&_$(inputSize) {
-        padding: var(--date-period-datepicker-input-$(inputSize)-padding);
-        min-height: var(--date-period-datepicker-input-$(inputSize)-min-height);
+      input&_xxs {
+        padding: var(--date-period-datepicker-input-xxs-padding);
+        min-height: var(--date-period-datepicker-input-xxs-min-height);
+      }
+      input&_xs {
+        padding: var(--date-period-datepicker-input-xs-padding);
+        min-height: var(--date-period-datepicker-input-xs-min-height);
+      }
+      input&_s {
+        padding: var(--date-period-datepicker-input-s-padding);
+        min-height: var(--date-period-datepicker-input-s-min-height);
+      }
+      input&_m {
+        padding: var(--date-period-datepicker-input-m-padding);
+        min-height: var(--date-period-datepicker-input-m-min-height);
+      }
+      input&_l {
+        padding: var(--date-period-datepicker-input-l-padding);
+        min-height: var(--date-period-datepicker-input-l-min-height);
+      }
+      input&_xl {
+        padding: var(--date-period-datepicker-input-xl-padding);
+        min-height: var(--date-period-datepicker-input-xl-min-height);
+      }
+      input&_xxl {
+        padding: var(--date-period-datepicker-input-xxl-padding);
+        min-height: var(--date-period-datepicker-input-xxl-min-height);
       }
-    }
   }
 }
 :root {

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

@@ -5,33 +5,53 @@
 }
 .divider {
   &_size {
-    @each $size in l, m, s {
-      &_$(size) {
-        height: var(--divider-$(size)-height);
-        min-height: var(--divider-$(size)-height);
+      &_l {
+        height: var(--divider-l-height);
+        min-height: var(--divider-l-height);
+      }
+      &_m {
+        height: var(--divider-m-height);
+        min-height: var(--divider-m-height);
+      }
+      &_s {
+        height: var(--divider-s-height);
+        min-height: var(--divider-s-height);
       }
-    }
   }
   &_direction {
     &_horizontal {
       &^^&_size {
-        @each $size in l, m, s {
-          &_$(size) {
-            height: var(--divider-$(size)-height);
-            min-height: var(--divider-$(size)-height);
+          &_l {
+            height: var(--divider-l-height);
+            min-height: var(--divider-l-height);
+          }
+          &_m {
+            height: var(--divider-m-height);
+            min-height: var(--divider-m-height);
+          }
+          &_s {
+            height: var(--divider-s-height);
+            min-height: var(--divider-s-height);
           }
-        }
       }
     }
     &_vertical {
       &^^&_size {
-        @each $size in l, m, s {
-          &_$(size) {
-            width: var(--divider-$(size)-width);
+          &_l {
+            width: var(--divider-l-width);
+            height: auto;
+            min-width: var(--divider-l-height);
+          }
+          &_m {
+            width: var(--divider-m-width);
+            height: auto;
+            min-width: var(--divider-m-height);
+          }
+          &_s {
+            width: var(--divider-s-width);
             height: auto;
-            min-width: var(--divider-$(size)-height);
+            min-width: var(--divider-s-height);
           }
-        }
       }
     }
   }

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

@@ -2,14 +2,48 @@
 }
 .dot {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
-        min-width: var(--dot-size-$(size)-width);
-        min-height: var(--dot-size-$(size)-height);
-        max-width: var(--dot-size-$(size)-width);
-        max-height: var(--dot-size-$(size)-height);
+      &_xxl {
+        min-width: var(--dot-size-xxl-width);
+        min-height: var(--dot-size-xxl-height);
+        max-width: var(--dot-size-xxl-width);
+        max-height: var(--dot-size-xxl-height);
+      }
+      &_xl {
+        min-width: var(--dot-size-xl-width);
+        min-height: var(--dot-size-xl-height);
+        max-width: var(--dot-size-xl-width);
+        max-height: var(--dot-size-xl-height);
+      }
+      &_l {
+        min-width: var(--dot-size-l-width);
+        min-height: var(--dot-size-l-height);
+        max-width: var(--dot-size-l-width);
+        max-height: var(--dot-size-l-height);
+      }
+      &_m {
+        min-width: var(--dot-size-m-width);
+        min-height: var(--dot-size-m-height);
+        max-width: var(--dot-size-m-width);
+        max-height: var(--dot-size-m-height);
+      }
+      &_s {
+        min-width: var(--dot-size-s-width);
+        min-height: var(--dot-size-s-height);
+        max-width: var(--dot-size-s-width);
+        max-height: var(--dot-size-s-height);
+      }
+      &_xs {
+        min-width: var(--dot-size-xs-width);
+        min-height: var(--dot-size-xs-height);
+        max-width: var(--dot-size-xs-width);
+        max-height: var(--dot-size-xs-height);
+      }
+      &_xxs {
+        min-width: var(--dot-size-xxs-width);
+        min-height: var(--dot-size-xxs-height);
+        max-width: var(--dot-size-xxs-width);
+        max-height: var(--dot-size-xxs-height);
       }
-    }
   }
 }
 .dot {