@itcase/ui 1.0.96 → 1.0.99

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

@@ -12,54 +12,15 @@
   top: 6px;
   width: 9px;
 }
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
-  margin-left: -4px;
-  position: absolute;
-  width: 0;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-  box-sizing: content-box;
-  position: absolute;
-  border: 8px solid transparent;
-  height: 0;
-  width: 1px;
-  content: "";
-  z-index: -1;
-  border-width: 8px;
-  left: -8px;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
-  border-bottom-color: #aeaeae;
-}
 .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
-  top: 0;
-  margin-top: -8px;
-}
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-  border-top: none;
-  border-bottom-color: #f0f0f0;
-}
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-  top: 0;
-}
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
-  top: -1px;
-  border-bottom-color: #aeaeae;
+  fill: #f0f0f0;
+  color: #f0f0f0;
+  stroke: #aeaeae;
 }
 .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
-  bottom: 0;
-  margin-bottom: -8px;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
-  border-bottom: none;
-  border-top-color: #fff;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
-  bottom: 0;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
-  bottom: -1px;
-  border-top-color: #aeaeae;
+  fill: #fff;
+  color: #fff;
+  stroke: #aeaeae;
 }
 .react-datepicker-wrapper {
   display: inline-block;
@@ -75,9 +36,7 @@
   border-radius: 0.3rem;
   display: inline-block;
   position: relative;
-}
-.react-datepicker--time-only .react-datepicker__triangle {
-  left: 35px;
+  line-height: initial;
 }
 .react-datepicker--time-only .react-datepicker__time-container {
   border-left: 0;
@@ -87,36 +46,9 @@
   border-bottom-left-radius: 0.3rem;
   border-bottom-right-radius: 0.3rem;
 }
-.react-datepicker__triangle {
-  position: absolute;
-  left: 50px;
-}
 .react-datepicker-popper {
   z-index: 1;
-}
-.react-datepicker-popper[data-placement^=bottom] {
-  padding-top: 10px;
-}
-.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
-  left: auto;
-  right: 50px;
-}
-.react-datepicker-popper[data-placement^=top] {
-  padding-bottom: 10px;
-}
-.react-datepicker-popper[data-placement^=right] {
-  padding-left: 8px;
-}
-.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
-  left: auto;
-  right: 42px;
-}
-.react-datepicker-popper[data-placement^=left] {
-  padding-right: 8px;
-}
-.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
-  left: 42px;
-  right: auto;
+  line-height: 0;
 }
 .react-datepicker__header {
   text-align: center;
@@ -442,10 +374,10 @@
   background-color: #ff6803;
   color: #fff;
 }
-.react-datepicker__day--holidays .holiday-overlay,
-.react-datepicker__month-text--holidays .holiday-overlay,
-.react-datepicker__quarter-text--holidays .holiday-overlay,
-.react-datepicker__year-text--holidays .holiday-overlay {
+.react-datepicker__day--holidays .overlay,
+.react-datepicker__month-text--holidays .overlay,
+.react-datepicker__quarter-text--holidays .overlay,
+.react-datepicker__year-text--holidays .overlay {
   position: absolute;
   bottom: 100%;
   left: 50%;
@@ -465,10 +397,10 @@
 .react-datepicker__year-text--holidays:hover {
   background-color: #cf5300;
 }
-.react-datepicker__day--holidays:hover .holiday-overlay,
-.react-datepicker__month-text--holidays:hover .holiday-overlay,
-.react-datepicker__quarter-text--holidays:hover .holiday-overlay,
-.react-datepicker__year-text--holidays:hover .holiday-overlay {
+.react-datepicker__day--holidays:hover .overlay,
+.react-datepicker__month-text--holidays:hover .overlay,
+.react-datepicker__quarter-text--holidays:hover .overlay,
+.react-datepicker__year-text--holidays:hover .overlay {
   visibility: visible;
   opacity: 1;
 }
@@ -577,6 +509,23 @@
 .react-datepicker__year-text--disabled:hover {
   background-color: transparent;
 }
+.react-datepicker__day--disabled .overlay,
+.react-datepicker__month-text--disabled .overlay,
+.react-datepicker__quarter-text--disabled .overlay,
+.react-datepicker__year-text--disabled .overlay {
+  position: absolute;
+  bottom: 70%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
+  padding: 4px;
+  border-radius: 4px;
+  white-space: nowrap;
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s, opacity 0.3s ease-in-out;
+}
 .react-datepicker__input-container {
   position: relative;
   display: inline-block;

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

@@ -111,6 +111,14 @@
     }
   }
 }
+.grid {
+  &_scroll_horizontal {
+    min-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-accent-secondary) var(--color-surface-tertiary);
+  }
+}
 .grid {
   &_shape {
     &_rounded {

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

@@ -74,6 +74,14 @@
   }
 }
 
+.group {
+  ^& .width {
+    &_fixed {
+      width: 300px;
+    }
+  }
+}
+
 .group {
   &_wrap {
     @each $val in nowrap, wrap, wrap-reverse {

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

@@ -1,11 +1,14 @@
 .label {
   position: relative;
-  overflow: hidden;
   display: inline-flex;
   &__inner {
     width: 100%;
     font-size: 0;
     line-height: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
   }
 }
 .label {
@@ -59,6 +62,11 @@
     }
   }
 }
+div.label {
+  &__tooltip {
+    z-index: 12;
+  }
+}
 .label {
   &&_text-align {
     &_left {

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

@@ -1,13 +1,13 @@
 /**
- * Swiper 11.0.5
+ * Swiper 11.0.6
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
- * Copyright 2014-2023 Vladimir Kharlampidi
+ * Copyright 2014-2024 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: November 22, 2023
+ * Released on: February 5, 2024
  */
 
 /* FONT_START */

package/dist/css/components/Tooltip/Tooltip.css

@@ -1,7 +1,9 @@
 .tooltip {
+  width: fit-content;
   position: relative;
   display: flex;
-  animation: 0.5s tooltipShowAnimation ease;
+  visibility: hidden;
+  opacity: 0%;
 }
 
 @keyframes tooltipShowAnimation {
@@ -15,6 +17,17 @@
   }
 }
 
+@keyframes tooltipHideAnimation {
+  0% {
+    visibility: visible;
+    opacity: 100%;
+  }
+  100% {
+    visibility: hidden;
+    opacity: 0%;
+  }
+}
+
 .tooltip {
   &_size {
     @each $size in s, m, l {
@@ -44,16 +57,17 @@
     ^&__inner {
       position: relative;
       background-color: inherit;
+      z-index: 1;
     }
     &::after {
       content: '';
       display: block;
       position: absolute;
-      background-color: inherit;
+      background-color: var(--tooltip-arrow-color, #fff);
       width: var(--tooltip-arrow-width);
       height: var(--tooltip-arrow-height);
       border-radius: var(--tooltip-arrow-radius);
-      z-index: -1;
+      z-index: 0;
     }
   }
 }
@@ -91,6 +105,24 @@
   }
 }
 
+.tooltip {
+  &&_state_close {
+    visibility: hidden;
+    animation-duration: 0.2s;
+    animation-name: tooltipHideAnimation;
+    opacity: 0%;
+  }
+}
+
+.tooltip {
+  &&_state_open {
+    visibility: visible;
+    animation-duration: 0.5s;
+    animation-name: tooltipShowAnimation;
+    opacity: 100%;
+  }
+}
+
 :root {
   --tooltip-size-m-padding: 0;
   --tooltip-size-s-padding: 0;
@@ -101,4 +133,6 @@
   --tooltip-arrow-width: 14px;
   --tooltip-arrow-height: 14px;
   --tooltip-arrow-radius: 2px;
+
+  --tooltip-arrow-color: var(--color-surface-primary);
 }

package/dist/css/styles/align/align_vertical.css

@@ -7,17 +7,17 @@
         align-items: flex-start;
       }
       &-center {
-        align-items: center;
         text-align: center;
+        align-items: center;
       }
       &-right {
-        align-items: flex-end;
         text-align: right;
+        align-items: flex-end;
       }
       &-auto {
-        align-items: center;
-        text-align: center;
         justify-content: space-between;
+        text-align: center;
+        align-items: center;
       }
     }
     &^&_left {

package/dist/css/styles/border-color/border-color.css

@@ -2,8 +2,7 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-border {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active,
-          disabled, hover, invert {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover, invert {
           &-$(color) {
             border-width: 1px;
             border-color: var(--color-$(type)-border-$(color));

package/dist/css/styles/border-color/border-color_hover.css

@@ -0,0 +1,22 @@
+.border-color {
+  &_hover {
+    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+      &_$(type) {
+        &-border {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
+            &-$(color) {
+              &:hover {
+                border-color: var(--color-$(type)-border-$(color));
+              }
+              &-hover {
+                &:hover {
+                  border-color: var(--color-$(type)-border-$(color));
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,6 +1,5 @@
 .fill {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error, info, gradient,
-    warning {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning, gradient {
     &_$(type) {
       &-item {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
@@ -28,8 +27,7 @@
       }
     }
   }
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error,
-    info, warning {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
     &_$(type) {
       &-primary {
         background: var(--color-$(type)-primary);

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

@@ -1,6 +1,6 @@
 .fill {
   &_active {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
       &_$(type) {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active  {
           &-$(color) {
@@ -9,7 +9,7 @@
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
       &_$(type) {
         &-primary {
           &-active {

package/dist/css/styles/fill/fill_disabled.css

@@ -1,6 +1,6 @@
 .fill {
   &_disabled {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
       &_$(type) {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
           &-$(color) {
@@ -11,7 +11,7 @@
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
       &_$(type) {
         &-primary {
           background: var(--color-$(type)-primary);

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

@@ -1,6 +1,6 @@
 .fill {
   &_hover {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
       &_$(type) {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
           &-$(color) {
@@ -16,7 +16,7 @@
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
       &_$(type) {
         &-primary {
           &:hover {

package/dist/css/styles/fill-gradient/fill-gradient.css

@@ -1,7 +1,7 @@
 .fill-gradient {
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
-      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
         &-$(color) {
           @each $direction in left, top, right, bottom  {
             &-$(direction) {

package/dist/css/styles/hover/hover-fill-color.css

@@ -1,5 +1,5 @@
 .hover-fill-color {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
     &_$(type) {
       @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
         &-$(color) {

package/dist/css/styles/hover/hover-item-color.css

@@ -1,5 +1,5 @@
 .hover-item-color {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
     &_$(type) {
       &-item {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {

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

@@ -1,5 +1,5 @@
 .hover-text-color {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @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  {

package/dist/css/styles/mediaqueries.css

@@ -1,31 +1,17 @@
 :root {
-
   --mobile-tiny: 15em; /* 240px */
-
   --mobile-small: 20em; /* 320px */
-
   --mobile-medium: 23.435em; /* 375px */
-
   --mobile-large: 25.875em; /* 414px */
-
   --mobile-extra-large: 30em; /* 480px */
-
   --mobile-super-extra-large: 40em; /* 640px */
-
   --tablet: 48em; /* 768px */
-
   --desktop-small: 60em; /* 960px */
-
   --desktop-medium: 64em; /* 1024px */
-
   --desktop-normal: 72.5em; /* 1160px */
-
   --desktop-large: 80em; /* 1280px */
-
   --desktop-extra-large: 90em; /* 1441px */
-
   --desktop-super-extra-large: 120em; /* 1920px */
-
   --desktop-huge: 160em; /* 560px */
 }
 

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

@@ -1,9 +1,8 @@
 .text-color {
-  @each $type in accent, primary, secondary, tertiary, 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, invert {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, invert {
           &-$(color) {
             color: var(--color-$(type)-text-$(color));
           }

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

@@ -1,6 +1,6 @@
 .text-color {
   &_active {
-    @each $type in accent, primary, secondary, tertiary, 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  {

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

@@ -0,0 +1,23 @@
+.text-color {
+  &_hover {
+    @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 {
+            &-$(color) {
+              &:hover {
+                color: var(--color-$(type)-text-$(color));
+              }
+              &-hover {
+                &:hover {
+                  color: var(--color-$(type)-text-$(color)-hover);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/text-gradient/text-gradient.css

@@ -2,9 +2,6 @@
   &_primary {
     @mixin text-gradient-primary;
   }
-}
-
-.text-gradient {
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {