@itcase/ui 1.1.5 → 1.1.7

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

@@ -12,16 +12,6 @@
   top: 6px;
   width: 9px;
 }
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
-  fill: #f0f0f0;
-  color: #f0f0f0;
-  stroke: #aeaeae;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
-  fill: #fff;
-  color: #fff;
-  stroke: #aeaeae;
-}
 .react-datepicker-wrapper {
   display: inline-block;
   padding: 0;
@@ -50,6 +40,17 @@
   z-index: 1;
   line-height: 0;
 }
+.react-datepicker-popper .react-datepicker__triangle {
+  stroke: #aeaeae;
+}
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
+  fill: #f0f0f0;
+  color: #f0f0f0;
+}
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
+  fill: #fff;
+  color: #fff;
+}
 .react-datepicker__header {
   text-align: center;
   background-color: #f0f0f0;

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

@@ -1,19 +1,26 @@
 .dropdown {
-  display: flex;
   position: relative;
+  display: flex;
   &_set {
-    &_normal {
+    &_default {
       ^^&__wrapper {
+        padding: var(--dropdown-default-padding, 0);
         display: flex;
         flex-direction: column;
+      }
+    }
+    &_normal {
+      ^^&__wrapper {
         padding: var(--dropdown-normal-padding, 12px 0);
+        display: flex;
+        flex-direction: column;
       }
     }
     &_compact {
       ^^&__wrapper {
+        padding: var(--dropdown-compact-padding, 8px 0);
         display: flex;
         flex-direction: column;
-        padding: var(--dropdown-compact-padding, 8px 0);
       }
     }
   }
@@ -61,7 +68,24 @@
     justify-content: space-between;
     align-items: center;
     gap: 8px;
+
+    &-label {
+      display: block;
+    }
+  }
+}
+.dropdown {
+  &__item {
     &_set {
+      &_default {
+        min-width: 62px;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0;
+        ^^&-label {
+          padding: var(--dropdown-item-default-padding, 10px);
+        }
+      }
       &_normal {
         min-width: 240px;
         padding: var(--dropdown-item-normal-padding, 10px 12px 10px 16px);
@@ -71,18 +95,6 @@
         padding: var(--dropdown-item-compact-padding, 0 12px 0 16px);
       }
     }
-    &-label {
-      display: block;
-    }
-    &_size {
-      @each $size in normal, compact {
-        &_$(size) {
-          ^^&-label {
-            gap: var(--dropdown-item-size-$(size)-gap);
-          }
-        }
-      }
-    }
   }
 }
 .dropdown {
@@ -94,3 +106,17 @@
     }
   }
 }
+.dropdown {
+  &__item {
+    &_size {
+      @each $size in normal, compact {
+        &_$(size) {
+          gap: var(--dropdown-item-size-$(size)-gap);
+          ^^&-label {
+            gap: var(--dropdown-item-size-$(size)-label-gap);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -38,20 +38,14 @@
   }
 }
 .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) {
-      & > ^&__wrapper {
-        & > div {
-          align-content: $(val);
-        }
-      }
+      align-content: $(val);
     }
     &_align-items_$(val) {
-      & > ^&__wrapper {
-        & > div {
-          align-items: $(val);
-        }
-      }
+      align-items: $(val);
     }
   }
 }
@@ -86,16 +80,14 @@
   }
 }
 .grid {
-  @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-content_$(val) {
       justify-content: $(val);
     }
     &_justify-items_$(val) {
-      & > ^&__wrapper {
-        & > div {
-          justify-items: $(val);
-        }
-      }
+      justify-items: $(val);
     }
   }
 }

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

@@ -84,9 +84,9 @@
 :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;
+  --menu-item-size-s-padding: 3px 4px;
+  --menu-item-size-m-padding: 4px 4px;
+  --menu-item-size-l-padding: 6px 6px;
+  --menu-item-size-xl-padding: 10px 8px;
+  --menu-item-size-xxl-padding: 12px 10px;
 }

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

@@ -29,6 +29,7 @@
   min-height: 200px;
   max-width: var(--modal-max-width, 1200px);
   position: relative;
+  z-index: 100;
   &:focus {
     outline: 0;
   }

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

@@ -1,47 +1,70 @@
 .pagination {
+  width: 100%;
   display: flex;
-  padding: 0;
-  margin: 60px 0;
-  list-style: none;
-  gap: 16px;
+  justify-content: space-between;
+  align-items: center;
+  &__container {
+    padding: 0;
+    margin: 60px 0;
+    display: flex;
+    list-style: none;
+    gap: 16px;
+  }
+  &__count {
+    display: flex;
+    align-items: center;
+  }
+  &__input {
+    background: var(--color-surface-primary);
+    padding: 3px 7px;
+    border: 1px solid var(--color-surface-border-tertiary);
+    border-radius: 8px;
+    position: relative;
+    display: flex;
+    gap: 4px;
+  }
 }
 .pagination {
-  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
-    &_justify-content_$(val) {
-      justify-content: $(val);
+  &__container {
+    @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+      &_justify-content_$(val) {
+        justify-content: $(val);
+      }
     }
   }
 }
 .pagination {
-  margin: var(--paginator-margin, initial);
-  &__item {
-    width: var(--paginator-item-width, 40px);
-    height: var(--paginator-item-height, 40px);
-    background: var(--paginator-item-default-fill);
-    border: var(--paginator-item-border, solid 1px var(--paginator-item-default-border));
-    border-radius: var(--paginator-item-border-radius, 6px);
-    display: flex;
-    transition: var(--paginator-item-transition);
-    cursor: pointer;
-    &:hover {
-      background: var(--paginator-item-default-fill-hover);
-    }
-    &_break {
+  &__container {
+    margin: var(--paginator-margin, initial);
+    ^&__item {
+      width: var(--paginator-item-width, 40px);
+      height: var(--paginator-item-height, 40px);
+      background: var(--paginator-item-default-fill);
+      border: var(--paginator-item-border, solid 1px var(--paginator-item-default-border));
+      border-radius: var(--paginator-item-border-radius, 6px);
       display: flex;
-      ^&-link {
+      transition: var(--paginator-item-transition);
+      cursor: pointer;
+      &:hover {
+        background: var(--paginator-item-default-fill-hover);
+      }
+      &_break {
+        display: flex;
+        ^&-link {
+          display: flex;
+          align-items: flex-end;
+        }
+      }
+      &-link {
+        width: 100%;
+        height: 100%;
+        color: var(--paginator-item-default-text);
         display: flex;
-        align-items: flex-end;
+        justify-content: center;
+        align-items: center;
+        @mixin text-l;
       }
     }
-    &-link {
-      width: 100%;
-      height: 100%;
-      color: var(--paginator-item-default-text);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      @mixin text-l;
-    }
   }
 }
 .pagination {

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

@@ -1,32 +1,34 @@
 .pagination {
-  margin: var(--paginator-margin, initial);
-  &__item {
-    width: var(--paginator-item-width, 40px);
-    height: var(--paginator-item-height, 40px);
-    background: var(--paginator-item-default-fill);
-    border: var(--paginator-item-border, solid 1px var(--paginator-item-default-border));
-    border-radius: var(--paginator-item-border-radius, 6px);
-    display: flex;
-    transition: var(--paginator-item-transition);
-    cursor: pointer;
-    &:hover {
-      background: var(--paginator-item-default-fill-hover);
-    }
-    &_break {
+  &__container {
+    margin: var(--paginator-margin, initial);
+    ^&__item {
+      width: var(--paginator-item-width, 40px);
+      height: var(--paginator-item-height, 40px);
+      background: var(--paginator-item-default-fill);
+      border: var(--paginator-item-border, solid 1px var(--paginator-item-default-border));
+      border-radius: var(--paginator-item-border-radius, 6px);
       display: flex;
-      ^&-link {
+      transition: var(--paginator-item-transition);
+      cursor: pointer;
+      &:hover {
+        background: var(--paginator-item-default-fill-hover);
+      }
+      &_break {
         display: flex;
-        align-items: flex-end;
+        ^&-link {
+          display: flex;
+          align-items: flex-end;
+        }
+      }
+      &-link {
+        width: 100%;
+        height: 100%;
+        color: var(--paginator-item-default-text);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        @mixin text-l;
       }
-    }
-    &-link {
-      width: 100%;
-      height: 100%;
-      color: var(--paginator-item-default-text);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      @mixin text-l;
     }
   }
 }

package/dist/css/components/ScrollOnDrag/ScrollOnDrag.css

@@ -1,6 +1,31 @@
-.scrolldrag {
-  white-space: nowrap;
-  padding: 0 5px;
-  display: inline-block;
-  overflow: scroll hidden;
+/* *  {
+  user-select: none
+} */
+
+.scroll-on-drag {
+  &__wrapper {
+    width: 100%;
+    &.indiana-scroll-container {
+      overflow: auto;
+      &--dragging {
+        scroll-behavior: auto;
+      }
+      &--hide-scrollbars {
+        overflow: hidden;
+        overflow: -moz-scrollbars-none;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          width: 0 !important;
+          height: 0 !important;
+          background: transparent !important;
+          display: none !important;
+          appearance: none !important;
+        }
+      }
+      &--native-scroll {
+        overflow: auto;
+      }
+    }
+  }
 }

package/dist/css/components/Scrollbar/Scrollbar.css

@@ -1,2 +1,58 @@
 .scrollbar {
+  width: 100%;
+  height: 200px;
+  position: relative;
+  &__wrapper {
+    position: absolute;
+    inset: 0 10px 0 0;
+    overflow: hidden;
+    ^&__scroll {
+      min-width: 100%;
+      min-height: 100%;
+      padding: 0.05px;
+      &-content {
+        min-width: 100%;
+        min-height: 100%;
+        padding: 0.05px;
+      }
+    }
+  }
+  &__track {
+    &-y {
+      width: 8px;
+      height: 100%;
+      border-radius: 4px;
+      position: absolute;
+      overflow: hidden;
+      top: 0;
+      right: 0;
+      user-select: none;
+      &-item {
+        width: 100%;
+        background: rgba(0, 0, 0, 0.4);
+        border-radius: 4px;
+        cursor: pointer;
+      }
+    }
+    &-x {
+      width: calc(100% - 20px);
+      height: 10px;
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      position: absolute;
+      overflow: hidden;
+      display: none;
+      left: 10px;
+      bottom: 0;
+      user-select: none;
+      &-item {
+        width: 0;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.4);
+        border-radius: 4px;
+        display: none;
+        cursor: pointer;
+      }
+    }
+  }
 }

package/dist/css/components/Select/Select.css

@@ -83,6 +83,14 @@
   }
 }
 
+.select {
+  &_set {
+    &_reset {
+      min-width: auto;
+    }
+  }
+}
+
 .select {
   &__control {
     position: relative;
@@ -337,7 +345,7 @@
 .select {
   &__single-value {
     display: flex;
-    position: absolute;
+    /* position: absolute; */
   }
 }
 

package/dist/css/components/Select/css/__single-value/select__single-value.css

@@ -1,6 +1,6 @@
 .select {
   &__single-value {
     display: flex;
-    position: absolute;
+    /* position: absolute; */
   }
 }

package/dist/css/components/Swiper/Swiper.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.0.7
+ * Swiper 11.1.1
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: February 27, 2024
+ * Released on: April 9, 2024
  */
 
 /* FONT_START */

package/dist/css/styles/text-color/text-color_active.css

@@ -1,9 +1,11 @@
 .text-color {
   &_active {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface,
+      success, error, info, warning {
       &_$(type) {
         &-text {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
+            disabled, hover, invert {
             &-$(color) {
               color: var(--color-$(type)-text-$(color));
             }