@itcase/ui 1.3.32 → 1.3.33

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

@@ -1,9 +1,37 @@
 :root {
-  --chips-size-xxs-padding: 0px 8px;
-  --chips-size-xs-padding: 1px 10px;
-  --chips-size-s-padding: 2px 10px;
-  --chips-size-m-padding: 4px 10px;
-  --chips-size-l-padding: 5px 10px;
-  --chips-size-xl-padding: 9px 10px;
-  --chips-size-xxl-padding: 13px 12px;
+  /* Size XXL */
+  --chips-xxl-gap: 0.5m;
+  --chips-xxl-padding: 2m 2m;
+  --chips-xxl-min-width: 48px;
+  --chips-xxl-min-height: 48px;
+  /* Size XL */
+  --chips-xl-gap: 0.5m;
+  --chips-xl-padding: 1m 1m;
+  --chips-xl-min-width: 40px;
+  --chips-xl-min-height: 40px;
+  /* Size L */
+  --chips-l-gap: 0.5m;
+  --chips-l-padding: 0.5m 0.5m;
+  --chips-l-min-width: 32px;
+  --chips-l-min-height: 32px;
+  /* Size M */
+  --chips-m-gap: 0.5m;
+  --chips-m-padding: 0.75m 1.25m;
+  --chips-m-min-width: 28px;
+  --chips-m-min-height: 28px;
+  /* Size S */
+  --chips-s-gap: 0.5m;
+  --chips-s-padding: 0.25m 0.5m;
+  --chips-s-min-width: 24px;
+  --chips-s-min-height: 24px;
+  /* Size XS */
+  --chips-xs-gap: 0.5m;
+  --chips-xs-padding: 0.5m 0.5m;
+  --chips-xs-min-width: 20px;
+  --chips-xs-min-height: 20px;
+  /* Size XXS */
+  --chips-xxs-gap: 0.5m;
+  --chips-xxs-padding: 0.25m 0.25m;
+  --chips-xxs-min-width: 16px;
+  --chips-xxs-min-height: 16px;
 }

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

@@ -116,9 +116,20 @@
 }
 
 :root {
-  --choice-item-background-hover: var(--color-surface-secondary);
+  --choice-item-size-xs-padding: 1px 8px;
+  --choice-item-size-s-padding: 5px 10px;
+  --choice-item-size-m-padding: 7px 12px;
+  --choice-item-size-l-padding: 9px 15px;
+  --choice-item-size-xl-padding: 13px 20px;
+  --choice-item-size-xxl-padding: 17px 25px;
+  --choice-item-size-tiny-padding: 1px 8px;
+  --choice-item-size-compact-padding: 5px 10px;
+  --choice-item-size-normal-padding: 7px 12px;
+  --choice-item-size-large-padding: 9px 15px;
 
+  --choice-item-background-hover: var(--color-surface-secondary);
   --choice-item-background-active: var(--color-surface-active);
-
   --choice-border-color: var(--color-surface-border-tertiary);
+
+  --choice-item-icon-padding: 0;
 }

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

@@ -10,8 +10,9 @@
   --choice-item-size-normal-padding: 7px 12px;
   --choice-item-size-large-padding: 9px 15px;
 
-  --choice-item-background-hover: var(--color-surface-primary-hover);
-  --choice-item-background-active: var(--color-surface-tertiary);
+  --choice-item-background-hover: var(--color-surface-secondary);
+  --choice-item-background-active: var(--color-surface-active);
+  --choice-border-color: var(--color-surface-border-tertiary);
 
-  --choice-item-icon-padding: 3px 2px;
+  --choice-item-icon-padding: 0;
 }

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

@@ -1226,3 +1226,54 @@ h2.react-datepicker__current-month {
     }
   }
 }
+:root {
+  --input-container-padding: 9px 15px;
+
+  --date-picker-input-min-width: 220px;
+  --date-picker-day-border-radius: 8px;
+
+  --date-picker-day-width: 35px;
+  --date-picker-day-height: 35px;
+
+  --date-picker-name-size: 16px;
+
+  --date-picker-name-weight: 400;
+  --date-picker-selected-weight: 400;
+
+  --date-picker-input-border-radius: 6px;
+
+  --date-picker-background: var(--color-surface-primary, #fff);
+  --date-picker-padding: 24px 12px;
+  --date-picker-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
+  --date-picker-border-radius: 12px;
+  --date-picker-border: 1px solid var(--color-surface-tertiary);
+
+  --date-picker-day-padding: 8px 0;
+  --date-picker-day-hover-background: var(--color-accent-tertiary);
+  --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
+
+  --date-picker-day-range-background: var(--color-accent-tertiary);
+  --date-picker-day-range-text-color: var(--color-accent-text-secondary);
+  --date-picker-day-range-border-radius: 0;
+  --date-picker-day-range-start-border-radius: 12px 0 0 12px;
+  --date-picker-day-range-end-border-radius: 0 12px 12px 0;
+
+  --date-picker-day-today-background: var(--color-surface-secondary);
+  --date-picker-day-today-border-radius: 12px;
+  --date-picker-day-today-text-color: var(--color-surface-text-primary);
+
+  --date-picker-day-weekend-background: var(--color-surface-primary);
+  --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);
+  --date-picker-day-weekend-outside-text-color: var(
+    --color-secondary-text-disabled
+  );
+
+  --date-picker-day-selected-background: var(--color-accent-primary);
+  --date-picker-day-selected-background-hover: var(
+    --color-accent-primary-hover
+  );
+  --date-picker-day-selected-text-color: var(--color-accent-text-primary);
+
+  --date-picker-day-outside-background: var(--color-surface-primary);
+  --date-picker-day-outside-text-color: var(--color-surface-text-quaternary);
+}

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

@@ -1,22 +1,26 @@
 :root {
   --input-container-padding: 9px 15px;
 
-  --date-picker-name-size: 18px;
+  --date-picker-input-min-width: 220px;
+  --date-picker-day-border-radius: 8px;
+
+  --date-picker-day-width: 35px;
+  --date-picker-day-height: 35px;
+
+  --date-picker-name-size: 16px;
+
   --date-picker-name-weight: 400;
   --date-picker-selected-weight: 400;
 
   --date-picker-input-border-radius: 6px;
 
-  --date-picker-background: var(--color-surface-primary);
+  --date-picker-background: var(--color-surface-primary, #fff);
   --date-picker-padding: 24px 12px;
   --date-picker-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
   --date-picker-border-radius: 12px;
   --date-picker-border: 1px solid var(--color-surface-tertiary);
 
-  --date-picker-day-width: 40px;
-  --date-picker-day-height: 40px;
   --date-picker-day-padding: 8px 0;
-  --date-picker-day-border-radius: 6px;
   --date-picker-day-hover-background: var(--color-accent-tertiary);
   --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
 
@@ -32,10 +36,14 @@
 
   --date-picker-day-weekend-background: var(--color-surface-primary);
   --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);
-  --date-picker-day-weekend-outside-text-color: var(--color-secondary-text-disabled);
+  --date-picker-day-weekend-outside-text-color: var(
+    --color-secondary-text-disabled
+  );
 
   --date-picker-day-selected-background: var(--color-accent-primary);
-  --date-picker-day-selected-background-hover: var(--color-accent-primary-hover);
+  --date-picker-day-selected-background-hover: var(
+    --color-accent-primary-hover
+  );
   --date-picker-day-selected-text-color: var(--color-accent-text-primary);
 
   --date-picker-day-outside-background: var(--color-surface-primary);

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

@@ -7,8 +7,8 @@
   &_size {
     @each $size in xs, s, m, l, xl {
       &_$(size) {
-        height: var(--divider-size-$(size)-height);
-        min-height: var(--divider-size-$(size)-height);
+        height: var(--divider-$(size)-height);
+        min-height: var(--divider-$(size)-height);
       }
     }
   }
@@ -17,8 +17,8 @@
       &^^&_size {
         @each $size in xs, s, m, l, xl {
           &_$(size) {
-            height: var(--divider-size-$(size)-height);
-            min-height: var(--divider-size-$(size)-height);
+            height: var(--divider-$(size)-height);
+            min-height: var(--divider-$(size)-height);
           }
         }
       }
@@ -27,9 +27,9 @@
       &^^&_size {
         @each $size in xs, s, m, l, xl {
           &_$(size) {
-            width: var(--divider-size-$(size)-width);
+            width: var(--divider-$(size)-width);
             height: auto;
-            min-width: var(--divider-size-$(size)-height);
+            min-width: var(--divider-$(size)-height);
           }
         }
       }
@@ -50,3 +50,16 @@
     }
   }
 }
+: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/Divider/Divider.tokens.css

@@ -1,12 +1,13 @@
 :root {
-  --divider-size-xs-height: 1px;
-  --divider-size-s-height: 2px;
-  --divider-size-m-height: 3px;
-  --divider-size-l-height: 4px;
-  --divider-size-xl-height: 5px;
-  --divider-size-xs-width: 1px;
-  --divider-size-s-width: 2px;
-  --divider-size-m-width: 3px;
-  --divider-size-l-width: 4px;
-  --divider-size-xl-width: 5px;
-}
+  --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/Icon/Icon.css

@@ -132,3 +132,8 @@
     }
   }
 }
+: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,4 +1,5 @@
 :root {
   --icon-transition: all 0.2s ease 0s;
   --icon-size-24-badge-position: 12px, 12px;
+  --icon-shape-rounded: 6px;
 }

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

@@ -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/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/MenuItem/MenuItem.tokens.css

@@ -2,16 +2,16 @@
   --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-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: 6px;
+
+  --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-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/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;
 }