@itcase/ui 1.7.0 → 1.8.1

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

@@ -38,9 +38,9 @@
   }
 }
 .grid {
-  @each $val in auto, normal, stretch, center, start, end, space-around, space-between, space-evenly,
-    safe center, unsafe center, self-start, self-end, first, baseline, first, baseline,
-    last baseline {
+  @each $val in auto, normal, stretch, center, start, end, space-around,
+    space-between, space-evenly, safe center, unsafe center, self-start,
+    self-end, first, baseline, first, baseline, last baseline {
     &_align-content_$(val) {
       align-content: $(val);
     }
@@ -50,7 +50,18 @@
   }
 }
 .grid {
-  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+  @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
+    19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37,
+    38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56,
+    57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,
+    76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94,
+    95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110,
+    111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125,
+    126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140,
+    141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155,
+    156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170,
+    171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185,
+    186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200 {
     &_columns_$(val) {
       grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
@@ -101,7 +112,18 @@
   }
 }
 .grid {
-  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+  @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
+    19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37,
+    38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56,
+    57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,
+    76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94,
+    95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110,
+    111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125,
+    126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140,
+    141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155,
+    156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170,
+    171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185,
+    186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200 {
     &_rows_$(val) {
       grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
@@ -178,7 +200,19 @@
 }
 .grid {
   &__item {
-    @each $val in -1,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+      18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35,
+      36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53,
+      54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71,
+      72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89,
+      90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106,
+      107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121,
+      122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136,
+      137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151,
+      152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166,
+      167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181,
+      182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196,
+      197, 198, 199, 200 {
       &_column {
         &-start_$(val) {
           grid-column-start: $(val);
@@ -195,7 +229,10 @@
 }
 .grid {
   &__item {
-    @each $val in auto, legacy, normal, stretch, center, start, end, left, right, space-around, space-between, space-evenly, safe, center, unsafe center, self-start, self-end, left, right, baseline, first baseline, last baseline {
+    @each $val in auto, legacy, normal, stretch, center, start, end, left,
+      right, space-around, space-between, space-evenly, safe, center,
+      unsafe center, self-start, self-end, left, right, baseline,
+      first baseline, last baseline {
       &_justify-self_$(val) {
         justify-self: $(val);
       }
@@ -204,7 +241,8 @@
 }
 .grid {
   &__item {
-    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 {
+    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+      18, 19, 20, 21, 22, 23, 24 {
       &_row {
         &-start_$(val) {
           grid-row-start: $(val);
@@ -224,4 +262,8 @@
     display: grid;
     transition: var(--grid-row-transition);
   }
+}
+:root {
+  --grid-row-transition: all 0.2s ease 0s;
+  --grid-item-transition: all 0.2s ease 0s;
 }

package/dist/css/components/Grid/css/__item/grid__item_column.css

@@ -1,6 +1,18 @@
 .grid {
   &__item {
-    @each $val in -1,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+      18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35,
+      36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53,
+      54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71,
+      72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89,
+      90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106,
+      107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121,
+      122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136,
+      137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151,
+      152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166,
+      167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181,
+      182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196,
+      197, 198, 199, 200 {
       &_column {
         &-start_$(val) {
           grid-column-start: $(val);

package/dist/css/components/Grid/css/__item/grid__item_justify-self.css

@@ -1,6 +1,9 @@
 .grid {
   &__item {
-    @each $val in auto, legacy, normal, stretch, center, start, end, left, right, space-around, space-between, space-evenly, safe, center, unsafe center, self-start, self-end, left, right, baseline, first baseline, last baseline {
+    @each $val in auto, legacy, normal, stretch, center, start, end, left,
+      right, space-around, space-between, space-evenly, safe, center,
+      unsafe center, self-start, self-end, left, right, baseline,
+      first baseline, last baseline {
       &_justify-self_$(val) {
         justify-self: $(val);
       }

package/dist/css/components/Grid/css/__item/grid__item_row.css

@@ -1,6 +1,7 @@
 .grid {
   &__item {
-    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 {
+    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+      18, 19, 20, 21, 22, 23, 24 {
       &_row {
         &-start_$(val) {
           grid-row-start: $(val);

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

@@ -152,12 +152,21 @@
 }
 
 .group {
-  &_type {
-    &_horizontal_scroll {
+  &_scroll {
+    &_vertical {
+      position: relative;
+      ^^&__wrapper {
+        overflow: hidden scroll;
+        display: flex;
+      flex-direction: column;
+      }
+    }
+    &_horizontal {
+      position: relative;
       ^^&__wrapper {
+        overflow: scroll hidden;
         display: flex;
-        overflow-x: scroll;
-        overflow-y: hidden;
+        flex-direction: row;
       }
     }
   }

package/dist/css/components/Input/Input.css

@@ -19,10 +19,13 @@
   &:focus {
     outline: none;
   }
+
+  /*
   &:hover {
     background: var(--input-state-hover-background);
     border: solid 1px var(--input-state-hover-border);
   }
+  */
 }
 .input {
   &_shape {

package/dist/css/components/Link/Link.css

@@ -30,3 +30,20 @@
     }
   }
 }
+/* stylelint-disable prettier/prettier */
+.link {
+  &_shape {
+    &_rounded {
+      border-radius: var(--link-shape-rounded-default);
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+    &_geometric {
+      border-radius: 0;
+    }
+  }
+}
+:root {
+  --link-shape-rounded-default: 12px;
+}

package/dist/css/components/Pagination/Pagination.css

@@ -5,18 +5,21 @@
   align-items: center;
   &__container {
     padding: 0;
-    margin: 60px 0;
     display: flex;
     list-style: none;
-    gap: 16px;
+    gap: 12px;
   }
   &__count {
     display: flex;
     align-items: center;
+    gap: 8px;
+    &-text {
+      color: var(--surface-text-primary);
+      display: block;
+    }
   }
   &__input {
     background: var(--color-surface-primary);
-    padding: 3px 7px;
     border: solid 1px
       var(--pagination-input-color, --color-surface-border-tertiary);
     border-radius: 8px;
@@ -39,12 +42,11 @@
 }
 .pagination {
   &__container {
-    margin: var(--paginator-margin, initial);
+    margin: var(--paginator-margin);
     ^&__item {
-      min-width: var(--paginator-item-width);
-      min-height: var(--paginator-item-height);
+      width: var(--paginator-item-width);
+      height: var(--paginator-item-height);      
       background: var(--paginator-item-default-fill);
-      padding: 0 8px;
       border: var(
         --paginator-item-border,
         solid 1px var(--paginator-item-default-border)
@@ -70,7 +72,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        @mixin text-l;
+        @mixin text-m;
       }
     }
   }

package/dist/css/components/Pagination/css/__item/pagination__item.css

@@ -1,11 +1,10 @@
 .pagination {
   &__container {
-    margin: var(--paginator-margin, initial);
+    margin: var(--paginator-margin);
     ^&__item {
-      min-width: var(--paginator-item-width);
-      min-height: var(--paginator-item-height);
+      width: var(--paginator-item-width);
+      height: var(--paginator-item-height);      
       background: var(--paginator-item-default-fill);
-      padding: 0 8px;
       border: var(
         --paginator-item-border,
         solid 1px var(--paginator-item-default-border)
@@ -31,7 +30,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        @mixin text-l;
+        @mixin text-m;
       }
     }
   }

package/dist/css/styles/fill/fill_active.css

@@ -3,6 +3,20 @@
     @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
       senary, surface, error, success, warning, info, danger, disabled, gradient {
       &_$(type) {
+        &-item {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover {
+            &-$(color) {
+              background: var(--color-$(type)-item-$(color));
+              @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65,
+                75, 80, 85, 90, 95 {
+                &$(alpha) {
+                  background: var(--color-$(type)-item-$(color)-$(alpha));
+                }
+              }
+            }
+          }
+        }
         @each $color in primary, secondary, tertiary, quaternary, quinary,
           senary, accent, active {
           &-$(color) {

package/dist/css/styles/fill/fill_active_hover.css

@@ -4,6 +4,56 @@
       @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
         senary, surface, error, success, warning, info, danger, gradient {
         &_$(type) {
+          &-item {
+            @each $color in primary, secondary, tertiary, quaternary, quinary,
+              senary, accent, disabled, hover {
+              &-$(color) {
+                &:hover {
+                  background: var(--color-$(type)-item-$(color));
+                }
+                @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60,
+                  65, 75, 80, 85, 90, 95 {
+                  &$(alpha) {
+                    &:hover {
+                      background: var(--color-$(type)-item-$(color)-$(alpha));
+                    }
+                  }
+                }
+                &-hover {
+                  &:hover {
+                    background: var(--color-$(type)-item-$(color)-hover);
+                  }
+                  @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60,
+                    65, 75, 80, 85, 90, 95 {
+                    &$(alpha) {
+                      &:hover {
+                        background: var(
+                          --color-$(type)-item-$(color)-$(alpha)-hover
+                        );
+                      }
+                    }
+                  }
+                  &-active {
+                    &:hover {
+                      background: var(
+                        --color-$(type)-item-$(color)-active-hover
+                      );
+                    }
+                    @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55,
+                      60, 65, 75, 80, 85, 90, 95 {
+                      &$(alpha) {
+                        &:hover {
+                          background: var(
+                            --color-$(type)-item-$(color)-$(alpha)-active-hover
+                          );
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
           @each $color in primary, secondary, tertiary, quaternary {
             &-$(color) {
               &:hover {

package/dist/css/styles/fill/fill_hover.css

@@ -3,6 +3,39 @@
     @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
       senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
+        &-item {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover {
+            &-$(color) {
+              &:hover {
+                background: var(--color-$(type)-item-$(color));
+              }
+              @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65,
+                75, 80, 85, 90, 95 {
+                &$(alpha) {
+                  &:hover {
+                    background: var(--color-$(type)-item-$(color)-$(alpha));
+                  }
+                }
+              }
+              &-hover {
+                &:hover {
+                  background: var(--color-$(type)-item-$(color)-hover);
+                }
+                @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60,
+                  65, 75, 80, 85, 90, 95 {
+                  &$(alpha) {
+                    &:hover {
+                      background: var(
+                        --color-$(type)-item-$(color)-$(alpha)-hover
+                      );
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
         @each $color in primary, secondary, tertiary, quaternary, quinary,
           senary, accent, disabled, hover {
           &-$(color) {

package/dist/types/components/Choice/appearance/choiceAccent.d.ts

@@ -0,0 +1,11 @@
+declare const choiceAppearanceAccent: {
+    accentPrimary: {
+        fill: string;
+        fillActive: string;
+        labelTextActiveColor: string;
+        labelTextColor: string;
+        labelTextSize: string;
+        borderColor: string;
+    };
+};
+export { choiceAppearanceAccent };

package/dist/types/components/Choice/appearance/choiceSurface.d.ts

@@ -0,0 +1,22 @@
+declare const choiceAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        fillItem: string;
+        fillItemActive: string;
+        fillItemActiveHover: string;
+        fillItemHover: string;
+        labelTextActiveColor: string;
+        labelTextColor: string;
+        labelTextSize: string;
+    };
+    surfaceSecondary: {
+        fill: string;
+        fillItem: string;
+        fillItemActive: string;
+        fillItemHover: string;
+        labelTextActiveColor: string;
+        labelTextColor: string;
+        labelTextSize: string;
+    };
+};
+export { choiceAppearanceSurface };

package/dist/types/components/DatePicker/DatePicker.appearance.d.ts

@@ -1,2 +1,29 @@
-import { DatePickerAppearanceType } from './DatePicker.interface';
-export declare const datePickerAppearance: DatePickerAppearanceType;
+export declare const datePickerAppearance: {
+    surfacePrimary: {
+        datePicker: {
+            daySize: string;
+            dayTextColor: string;
+            dayTextShape: string;
+            dayTextSize: string;
+            iconItemFill: string;
+            monthTextColor: string;
+            monthTextSize: string;
+            monthTextWeight: string;
+            yearTextColor: string;
+            yearTextSize: string;
+            yearTextWeight: string;
+        };
+        input: {
+            width: string;
+            size: string;
+            fill: string;
+            fillHover: string;
+            borderColor: string;
+            textColor: string;
+            textSize: string;
+            caret: string;
+            placeholderTextColor: string;
+            shape: string;
+        };
+    };
+};

package/dist/types/components/DatePicker/appearance/datePickerSurface.d.ts

@@ -0,0 +1,30 @@
+declare const datePickerAppearanceSurface: {
+    surfacePrimary: {
+        datePicker: {
+            daySize: string;
+            dayTextColor: string;
+            dayTextShape: string;
+            dayTextSize: string;
+            iconItemFill: string;
+            monthTextColor: string;
+            monthTextSize: string;
+            monthTextWeight: string;
+            yearTextColor: string;
+            yearTextSize: string;
+            yearTextWeight: string;
+        };
+        input: {
+            width: string;
+            size: string;
+            fill: string;
+            fillHover: string;
+            borderColor: string;
+            textColor: string;
+            textSize: string;
+            caret: string;
+            placeholderTextColor: string;
+            shape: string;
+        };
+    };
+};
+export { datePickerAppearanceSurface };

package/dist/types/components/Pagination/appearance/paginationSurface.d.ts

@@ -0,0 +1,34 @@
+declare const paginationAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        fillHover: string;
+        gap: string;
+        marginPagesDisplayed: number;
+        pageCountDesc: string;
+        pageCountDescTextColor: string;
+        pageCountDescTextSize: string;
+        pageCountDropdownAlignment: string;
+        pageCountDropdownElevation: number;
+        pageCountDropdownFill: string;
+        pageCountDropdownItemDividerFill: string;
+        pageCountDropdownItemDividerSize: string;
+        pageCountDropdownItemFill: string;
+        pageCountDropdownItemFillActive: string;
+        pageCountDropdownItemFillActiveHover: string;
+        pageCountDropdownItemFillHover: string;
+        pageCountDropdownItemLabelAlign: string;
+        pageCountDropdownItemLabelColor: string;
+        pageCountDropdownItemLabelColorActive: string;
+        pageCountDropdownItemLabelSize: string;
+        pageCountDropdownItemShowDivider: boolean;
+        pageCountDropdownItemSize: string;
+        pageCountDropdownItemWidth: string;
+        pageCountDropdownShape: string;
+        pageCountInputIconColor: string;
+        pageCountInputIconFillSize: string;
+        pageCountInputTextColor: string;
+        pageCountInputTextSize: string;
+        pageRangeDisplayed: number;
+    };
+};
+export { paginationAppearanceSurface };

package/dist/types/components/Tab/Tab.interface.d.ts

@@ -70,8 +70,6 @@ interface TabProps extends TabThemeColor, StyleAttributes {
     set?: string;
 }
 interface TabGroupProps extends StyleAttributes {
-    id?: string;
-    [key: number | string | symbol]: any;
     align?: AlignProps;
     alignDirection?: AlignDirectionProps;
     borderColor?: BorderColorProps;
@@ -80,6 +78,7 @@ interface TabGroupProps extends StyleAttributes {
     children?: ReactNode;
     className?: string;
     contentAlign?: AlignProps;
+    dataTestId?: string;
     dataTour?: string;
     direction?: DirectionProps;
     fill?: FillProps;

package/dist/types/context/Notifications.d.ts

@@ -1,9 +1,10 @@
-import type { NotificationsProviderProps } from './Notifications.interface';
+import type { SimpleCallback } from '@itcase/types';
+import type { CreatedNotification, NotificationsProviderProps } from './Notifications.interface';
 declare function NotificationsProvider(props: NotificationsProviderProps): import("react/jsx-runtime").JSX.Element;
 declare function useNotifications(): never[];
 declare function useNotificationsAPI(): {
     hideNotifications: () => void;
-    showNotification: () => void;
+    showNotification: (notification: string | CreatedNotification, onClose?: SimpleCallback) => void;
     notificationStatuses: {
         error: string;
         info: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -96,21 +96,21 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
-    "@itcase/common": "^1.2.22",
-    "@itcase/config": "^1.0.40",
+    "@itcase/common": "^1.2.23",
+    "@itcase/config": "^1.0.41",
     "@itcase/icons": "^1.0.29",
     "@itcase/storybook-config": "^1.1.9",
     "@itcase/tokens-am": "^1.1.3",
     "@itcase/tokens-baikal": "^1.1.3",
-    "@itcase/types": "^1.0.2",
+    "@itcase/types": "^1.0.3",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.31.0",
-    "framer-motion": "^12.9.1",
+    "framer-motion": "^12.11.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "motion": "^12.9.1",
+    "motion": "^12.11.0",
     "rc-slider": "^11.1.8",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -118,7 +118,7 @@
     "react-dom": "^18.3.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha",
     "react-inlinesvg": "^4.2.0",
-    "react-modal-sheet": "^4.0.1",
+    "react-modal-sheet": "^4.4.0",
     "react-modern-drawer": "^1.4.0",
     "react-otp-input": "^3.1.1",
     "react-paginate": "^8.3.0",
@@ -130,11 +130,11 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "@itcase/lint": "^1.1.9",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
@@ -160,22 +160,22 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.25.1",
+    "eslint": "9.26.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.5.1",
+    "lint-staged": "^16.0.0",
     "npm": "^11.3.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "react-docgen-typescript": "^2.2.2",
     "react-svg": "^16.3.0",
-    "rollup": "^4.40.0",
+    "rollup": "^4.40.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.3",
     "storybook": "^8.6.12",
-    "stylelint": "^16.19.0",
+    "stylelint": "^16.19.1",
     "typescript": "^5.8.3"
   }
 }