@itcase/ui 1.3.31 → 1.3.33

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

@@ -0,0 +1,13 @@
+:root {
+  --divider-xl-height: 5px;
+  --divider-l-height: 4px;
+  --divider-m-height: 3px;
+  --divider-s-height: 2px;
+  --divider-xs-height: 1px;
+
+  --divider-xl-width: 5px;
+  --divider-l-width: 4px;
+  --divider-m-width: 3px;
+  --divider-s-width: 2px;
+  --divider-xs-width: 1px;
+}

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

@@ -25,3 +25,13 @@
     }
   }
 }
+:root {
+  --dot-size-s-width: 12px;
+  --dot-size-s-height: 12px;
+
+  --dot-size-m-width: 16px;
+  --dot-size-m-height: 16px;
+
+  --dot-size-l-width: 20px;
+  --dot-size-l-height: 20px;
+}

package/dist/css/components/Drawer/Drawer.css

@@ -50,3 +50,7 @@
     }
   }
 }
+:root {
+  --drawer-overlay-background: none;
+  --drawer-overlay-filter: blur(0);
+}

package/dist/css/components/Drawer/Drawer.tokens.css

@@ -0,0 +1,4 @@
+:root {
+  --drawer-overlay-background: none;
+  --drawer-overlay-filter: blur(0);
+}

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

@@ -127,3 +127,40 @@
     }
   }
 }
+:root {
+  --dropdown-item-size-xs-padding: 0;
+  --dropdown-item-size-xs-gap: 8px;
+
+  --dropdown-item-size-m-padding: 0px;
+  --dropdown-item-size-m-gap: 0px;
+
+  --dropdown-item-size-l-padding: 10px 12px;
+  --dropdown-item-size-l-gap: 12px;
+
+  --dropdown-normal-padding: 16px;
+  --dropdown-normal-gap: 16px;
+}
+@keyframes dropDownAnimationOpen {
+  0% {
+    visibility: hidden;
+    transform: translate3d(0, 8px, 0);
+    opacity: 0%;
+  }
+  100% {
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+    opacity: 100%;
+  }
+}
+@keyframes dropDownAnimationClose {
+  0% {
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+    opacity: 100%;
+  }
+  100% {
+    visibility: hidden;
+    transform: translate3d(0, 8px, 0);
+    opacity: 0%;
+  }
+}

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

@@ -2,8 +2,14 @@
   --dropdown-item-size-xs-padding: 0;
   --dropdown-item-size-xs-gap: 8px;
 
+  --dropdown-item-size-m-padding: 0px;
+  --dropdown-item-size-m-gap: 0px;
+
   --dropdown-item-size-l-padding: 10px 12px;
   --dropdown-item-size-l-gap: 12px;
+
+  --dropdown-normal-padding: 16px;
+  --dropdown-normal-gap: 16px;
 }
 
 @keyframes dropDownAnimationOpen {

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

@@ -176,4 +176,3 @@
     }
   }
 }
-

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

@@ -224,8 +224,4 @@
     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/HeroTitle/HeroTitle.css

@@ -15,11 +15,11 @@
       );
       background-size: 200%;
       border-radius: 6px;
-      animation: hero-title-skeleton 3s infinite linear;
+      animation: heroTitleSkeleton 3s infinite linear;
     }
   }
 }
-@keyframes hero-title-skeleton {
+@keyframes heroTitleSkeleton {
   0% {
     background-position: 200%;
   }

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

@@ -10,7 +10,7 @@
 }
 .icon {
   &_size {
-    @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144 {
+    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144 {
       &_$(size) {
         width: $(size)px;
         height: $(size)px;
@@ -29,11 +29,12 @@
   }
 }
 .icon_fill {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @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, inverse {
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover, inverse {
           &-$(color) {
             & svg {
               stroke: none;
@@ -42,8 +43,8 @@
           }
         }
       }
-      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
-        hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, quinary,
+        senary, accent, disabled, hover, inverse {
         &-$(color) {
           & svg {
             stroke: none;
@@ -55,10 +56,12 @@
   }
 }
 .icon_fill_hover {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @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  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover, inverse {
           &-$(color) {
             &:hover {
               & svg {
@@ -74,7 +77,7 @@
 }
 .icon_fill {
   &_size {
-    @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 72 {
+    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 72 {
       &_$(size) {
         width: $(size)px;
         height: $(size)px;
@@ -106,7 +109,7 @@
       ^^&__link,
       ^^&__item {
         text-decoration: none;
-        @each $size in 14, 16, 24, 32, 40, 56, 60, 72 {
+        @each $size in 14, 16, 20, 24, 32, 40, 56, 60, 72 {
           &^^^&_size_$(size) {
             & .badge {
               transform: translate(var(--icon-size-$(size)-badge-position));
@@ -132,4 +135,5 @@
 :root {
   --icon-transition: all 0.2s ease 0s;
   --icon-size-24-badge-position: 12px, 12px;
+  --icon-shape-rounded: 6px;
 }

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

@@ -1,3 +1,5 @@
 :root {
-  --icon-size-24-badge-position: 14px, -12px;
+  --icon-transition: all 0.2s ease 0s;
+  --icon-size-24-badge-position: 12px, 12px;
+  --icon-shape-rounded: 6px;
 }

package/dist/css/components/Image/Image.css

@@ -41,14 +41,14 @@
         var(--color-surface-secondary)
       );
       background-size: 200%;
-      animation: image-skeleton 3s infinite linear;
+      animation: imageSkeleton 3s infinite linear;
       ^^&__item {
-        opacity: 0;
+        opacity: 0%;
       }
     }
   }
 }
-@keyframes image-skeleton {
+@keyframes imageSkeleton {
   0% {
     background-position: 200%;
   }

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

@@ -83,3 +83,32 @@
     }
   }
 }
+:root {
+  --input-shape-rounded: 8px;
+
+  --input-size-xs-padding: 1px 8px;
+  --input-size-s-padding: 5px 10px;
+  --input-size-m-padding: 7px 12px;
+  --input-size-l-padding: 9px 15px;
+  --input-size-xl-padding: 13px 20px;
+  --input-size-xxl-padding: 17px 25px;
+
+  --input-size-tiny-padding: 1px 8px;
+  --input-size-compact-padding: 5px 10px;
+  --input-size-normal-padding: 7px 12px;
+  --input-size-large-padding: 9px 15px;
+
+  --input-success-border: var(--color-surface-border-tertiary);
+
+  --input-state-focus-border: var(--color-surface-border-quaternary);
+  --input-state-focus-background: none;
+  --input-state-error-border: var(--color-error-border-primary);
+  --input-state-error-background: none;
+  --input-state-required-border: var(--color-warning-text-primary);
+  --input-state-required-background: none;
+  --input-state-custom-border: var(--color-info-primary);
+  --input-state-custom-background: none;
+  --input-state-hover-border: var(--color-surface-border-quaternary);
+  --input-state-hover-background: none;
+  --input-caret-color: var(--color-accent-primary);
+}

package/dist/css/components/InputPassword/InputPassword.css

@@ -66,3 +66,26 @@
     }
   }
 }
+:root {
+  --input-password-size-xs-padding: 4px 8px;
+  --input-password-size-s-padding: 5px 10px;
+  --input-password-size-m-padding: 7px 12px;
+  --input-password-size-l-padding: 9px 15px;
+  --input-password-size-xl-padding: 15px 20px;
+  --input-password-size-xxl-padding: 18px 25px;
+
+  --input-password-size-tiny-padding: 4px 8px;
+  --input-password-size-compact-padding: 5px 10px;
+  --input-password-size-normal-padding: 7px 12px;
+  --input-password-size-large-padding: 9px 15px;
+
+  --input-password-state-focus-border: var(--color-active-border-primary);
+  --input-password-state-focus-background: none;
+  --input-password-state-error-border: var(--color-error-border-primary);
+  --input-password-state-error-background: none;
+  --input-password-state-success-border: var(--color-success-border-primary);
+  --input-password-state-success-background: none;
+  --input-password-state-hover-border: var(--color-surface-border-quaternary);
+  --input-password-state-hover-background: none;
+  --input-password-caret-color: var(--color-accent-primary);
+}

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

@@ -21,14 +21,14 @@
         var(--color-surface-secondary)
       );
       background-size: 200%;
-      animation: label-skeleton 3s infinite linear;
+      animation: labelSkeleton 3s infinite linear;
       ^^&__label {
         color: transparent;
       }
     }
   }
 }
-@keyframes label-skeleton {
+@keyframes labelSkeleton {
   0% {
     background-position: 200%;
   }
@@ -81,3 +81,22 @@ div.label {
     }
   }
 }
+:root {
+  --label-shape-rounded-default: 6px;
+
+  --label-size-xxl-shape-rounded: 12px;
+  --label-size-xl-shape-rounded: 6px;
+  --label-size-l-shape-rounded: 6px;
+  --label-size-m-shape-rounded: 12px;
+  --label-size-s-shape-rounded: 12px;
+  --label-size-xs-shape-rounded: 12px;
+  --label-size-xxs-shape-rounded: 12px;
+
+  --label-size-xxl-padding: 10px 10px;
+  --label-size-xl-padding: 7px 8px;
+  --label-size-l-padding: 4px 6px;
+  --label-size-m-padding: 2px 8px;
+  --label-size-s-padding: 2px 6px;
+  --label-size-xs-padding: 0px 4px;
+  --label-size-xxs-padding: 0px 4px;
+}

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

@@ -7,13 +7,13 @@
   --label-size-m-shape-rounded: 12px;
   --label-size-s-shape-rounded: 12px;
   --label-size-xs-shape-rounded: 12px;
-  --label-size-xxs-shape-rounded: 6px;
+  --label-size-xxs-shape-rounded: 12px;
 
   --label-size-xxl-padding: 10px 10px;
   --label-size-xl-padding: 7px 8px;
   --label-size-l-padding: 4px 6px;
   --label-size-m-padding: 2px 8px;
   --label-size-s-padding: 2px 6px;
-  --label-size-xs-padding: 1px 4px;
-  --label-size-xxs-padding: 1px 4px;
+  --label-size-xs-padding: 0px 4px;
+  --label-size-xxs-padding: 0px 4px;
 }

package/dist/css/components/Loader/Loader.css

@@ -12,18 +12,22 @@
   }
 }
 .loader {
-  &_set {
+  &_type {
     &_simple {
       ^^&__inner {
         width: auto;
         height: auto;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
       }
       ^^&__item {
         width: 12px;
         height: 12px;
+        margin: 4px;
         border-radius: 100%;
         display: inline-block;
-        margin: 4px;
         animation: loaderSimple 1.4s infinite ease-in-out both;
         &:first-child {
           animation-delay: -0.32s;
@@ -36,9 +40,12 @@
   }
 }
 @keyframes loaderSimple {
-  0%, 80%, 100% {
+  0%,
+  80%,
+  100% {
     transform: scale(0);
-  } 40% {
-    transform: scale(1.0);
+  }
+  40% {
+    transform: scale(1);
   }
 }

package/dist/css/components/Logo/Logo.css

@@ -1,12 +1,6 @@
 .logo {
   display: flex;
   flex-flow: column nowrap;
-  &__link {
-    font-size: 0;
-    &-second {
-      font-size: 0;
-    }
-  }
 }
 .logo {
   @each $val in stretch, flex-start, flex-end, center, baseline, auto {
@@ -26,14 +20,14 @@
       );
       background-size: 200%;
       border-radius: 6px;
-      animation: logo-skeleton 3s infinite linear;
+      animation: logoSkeleton 3s infinite linear;
       ^^&__image {
-        opacity: 0;
+        opacity: 0%;
       }
     }
   }
 }
-@keyframes logo-skeleton {
+@keyframes logoSkeleton {
   0% {
     background-position: 200%;
   }
@@ -53,13 +47,3 @@
     }
   }
 }
-:root {
-  --logo-size-l-width: 240px;
-  --logo-size-l-height: 90px;
-
-  --logo-size-m-width: 200px;
-  --logo-size-m-height: 75px;
-
-  --logo-size-s-width: 140px;
-  --logo-size-s-height: 52px;
-}

package/dist/css/components/Logo/Logo.tokens.css

@@ -1,10 +1,25 @@
 :root {
-  --logo-size-l-width: 240px;
+  /* --logo-size-l-width: 240px;
   --logo-size-l-height: 90px;
 
   --logo-size-m-width: 200px;
   --logo-size-m-height: 75px;
 
   --logo-size-s-width: 140px;
-  --logo-size-s-height: 52px;
+  --logo-size-s-height: 52px; */
+
+  --logo-size-xl-width: 194px;
+  --logo-size-xl-height: 102px;
+
+  --logo-size-l-width: 145px;
+  --logo-size-l-height: 77px;
+
+  --logo-size-m-width: 100px;
+  --logo-size-m-height: 53px;
+
+  --logo-size-s-width: 82px;
+  --logo-size-s-height: 43px;
+
+  --logo-size-xs-width: 52px;
+  --logo-size-xs-height: 27px;
 }

package/dist/css/components/Menu/Menu.css

@@ -54,4 +54,12 @@
     }
   }
 }
-@improt './css/menu_type_border.css';
+.menu {
+  &_type {
+    &_border {
+      width: var(--menu-type-border-width, auto);
+      border: var(--menu-type-border-border, none);
+      border-radius: var(--menu-type-border-border-radius, 0);
+    }
+  }
+}

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

@@ -80,13 +80,3 @@
     }
   }
 }
-
-:root {
-  --menu-item-size-xxs-padding: 0 4px;
-  --menu-item-size-xs-padding: 0 4px;
-  --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/MenuItem/MenuItem.tokens.css

@@ -1,9 +1,17 @@
 :root {
-  --menu-item-shape-rounded: 6px;
+  --menu-item-size-xxs-padding: 0 4px;
+  --menu-item-size-xs-padding: 0 4px;
+  --menu-item-size-s-padding: 3px 4px;
+  --menu-item-size-m-padding: 4px 12px;
+  --menu-item-size-l-padding: 6px 6px;
+  --menu-item-size-xl-padding: 10px 8px;
+  --menu-item-size-xxl-padding: 12px 10px;
+
+  --menu-item-shape-rounded: 20px;
+  --menu-item-set-subitem-padding-left: 36px;
 
   --menu-item-set-filter-padding: 10px 16px;
-  --menu-item-set-filter-border-right: 1px solid var(--color-surface-border-tertiary);
+  --menu-item-set-filter-border-right: 1px solid
+    var(--color-surface-border-tertiary);
   --menu-item-set-filter-active-color: var(--color-surface-item-accent);
-
-  --menu-item-set-subitem-padding-left: 32px;
 }

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

@@ -37,3 +37,6 @@
     width: 100%;
   }
 }
+:root {
+  --modal-max-width: 450px;
+}

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

@@ -0,0 +1,3 @@
+:root {
+  --modal-max-width: 450px;
+}

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

@@ -106,3 +106,28 @@
     }
   }
 }
+:root {
+  --paginator-margin: 0;
+
+  --paginator-item-width: 32px;
+  --paginator-item-height: 32px;
+  --paginator-item-border: none;
+  --paginator-item-border-radius: 50%;
+
+  --pagination-item-state-disabled-display: none;
+
+  --paginator-item-transition: all 0.2s ease 0s;
+
+  --paginator-item-default-fill: var(--color-surface-primary);
+  --paginator-item-default-fill-hover: var(--color-surface-primary-hover);
+  --paginator-item-default-text: var(--color-surface-text-primary);
+
+  --paginator-item-active-fill: var(--color-accent-primary);
+  --paginator-item-active-fill-hover: var(--color-accent-primary);
+  --paginator-item-active-text: var(--color-accent-text-primary);
+
+  --paginator-item-disabled-fill: none;
+  --paginator-item-disabled-fill-hover: none;
+  --paginator-item-disabled-text: var(--color-surface-text-primary);
+  --paginator-item-disabled-icon: var(--color-surface-item-disabled);
+}

package/dist/css/components/Radio/Radio.css

@@ -111,6 +111,3 @@
     }
   }
 }
-:root {
-  --radio-state-border-hover: var(--color-surface-border-tertiary);
-}

package/dist/css/components/Radio/Radio.tokens.css

@@ -1,3 +1,4 @@
 :root {
+  --radio-state-border-hover: var(--color-surface-border-tertiary);
   --radio-success-border: var(--color-surface-border-tertiary);
-}
+}

package/dist/css/components/ScrollToView/ScrollToView.css

@@ -1,12 +1,12 @@
 .scroll-to-view {
   &_text-color {
     &_hover {
-      @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 {
               &-$(color) {
                 &:hover {
                   .text,

package/dist/css/components/Search/Search.css

@@ -113,3 +113,19 @@
     }
   }
 }
+:root {
+  --search-input-normal-padding: 8px;
+  --search-input-normal-gap: 8px;
+  --search-input-normal-line-height: 24px;
+
+  --search-input-compact-padding: 8px;
+  --search-input-compact-gap: 4px;
+
+  --search-input-l-padding: 8px 7px;
+  --search-input-l-gap: 6px;
+
+  --search-input-s-padding: 2px 7px;
+  --search-input-s-gap: 6px;
+
+  --search-shape-rounded: 8px;
+}

package/dist/css/components/Search/Search.tokens.css

@@ -6,8 +6,11 @@
   --search-input-compact-padding: 8px;
   --search-input-compact-gap: 4px;
 
-  --search-input-l-padding: 6px 12px;
-  --search-input-l-gap: 4px;
+  --search-input-l-padding: 8px 7px;
+  --search-input-l-gap: 6px;
 
-  --search-shape-rounded: 4px;
+  --search-input-s-padding: 2px 7px;
+  --search-input-s-gap: 6px;
+
+  --search-shape-rounded: 8px;
 }

package/dist/css/components/Segmented/Segmented.css

@@ -115,3 +115,9 @@
     }
   }
 }
+:root {
+  --segmented-item-size-normal-padding: 12px 24px;
+  --segmented-item-size-compact-padding: 6px 16px;
+
+  --segmented-item-size-s-padding: 4px 16px;
+}

package/dist/css/components/Segmented/Segmented.tokens.css

@@ -1,4 +1,6 @@
 :root {
   --segmented-item-size-normal-padding: 12px 24px;
   --segmented-item-size-compact-padding: 6px 16px;
+
+  --segmented-item-size-s-padding: 4px 16px;
 }