@broxus/react-uikit 0.17.3 → 0.18.0

package/dist/esm/styles/variables.scss

@@ -606,159 +606,6 @@ $container-padding-horizontal-s:                                $global-gutter !
 $container-padding-horizontal-m:                                $global-medium-gutter !default;
 
 
-// Countdown
-// ========================================================================
-
-$countdown-number-line-height:                                  0.8 !default;
-$countdown-number-font-size:                                    2rem !default; // 32px
-$countdown-number-font-size-s:                                  4rem !default; // 64px
-$countdown-number-font-size-m:                                  6rem !default; // 96px
-
-$countdown-separator-line-height:                               1.6 !default;
-$countdown-separator-font-size:                                 1rem !default; // 16px
-$countdown-separator-font-size-s:                               2rem !default; // 32px
-$countdown-separator-font-size-m:                               3rem !default; // 48px
-
-
-// DatePicker
-// ========================================================================
-
-$datepicker-button-font-size:                                   $global-font-size !default;
-$datepicker-button-line-height:                                 $global-control-large-height !default;
-$datepicker-button-padding-horizontal:                          $global-small-gutter !default;
-$datepicker-body-padding-vertical:                              $global-small-gutter !default;
-$datepicker-body-padding-horizontal:                            $global-gutter !default;
-$datepicker-cell-border-radius:                                 $global-small-border-radius !default;
-$datepicker-cell-height:                                        $global-control-height !default;
-$datepicker-cell-width:                                         $global-control-height * 1.05 !default;
-$datepicker-cell-padding:                                       $global-xsmall-gutter !default;
-$datepicker-cell-color:                                         $global-color !default;
-$datepicker-cell-hover-background:                              $global-secondary-background !default;
-$datepicker-cell-active-background:                             $global-primary-background !default;
-$datepicker-cell-active-color:                                  $global-inverse-color !default;
-$datepicker-cell-disabled-background:                           $global-muted-background !default;
-$datepicker-cell-disabled-color:                                $global-muted-color !default;
-$datepicker-time-column-height:                                 252px !default;
-$datepicker-time-column-width:                                  60px !default;
-$datepicker-time-cell-height:                                   28px !default;
-$datepicker-dropdown-background:                                $global-muted-background !default;
-$datepicker-dropdown-border:                                    $global-border !default;
-$datepicker-dropdown-border-style:                              $global-border-style !default;
-$datepicker-dropdown-border-width:                              $global-border-width !default;
-$datepicker-dropdown-border-radius:                             $global-border-radius !default;
-
-
-// Description list
-// ========================================================================
-
-$description-list-term-color:                                   $global-emphasis-color !default;
-$description-list-term-margin-top:                              $global-margin !default;
-$description-list-term-font-size:                               $global-small-font-size !default;
-$description-list-term-font-weight:                             500 !default;
-$description-list-term-text-transform:                          uppercase !default;
-$description-list-divider-term-margin-top:                      $global-margin !default;
-$description-list-divider-term-border-width:                    $global-border-width !default;
-$description-list-divider-term-border:                          $global-border !default;
-$inverse-description-list-term-color:                           $inverse-global-emphasis-color !default;
-
-
-// Divider
-// ========================================================================
-
-$divider-margin-vertical:                                       $global-margin !default;
-$divider-icon-width:                                            50px !default;
-$divider-icon-height:                                           20px !default;
-$divider-icon-color:                                            $global-border !default;
-$divider-icon-line-top:                                         50% !default;
-$divider-icon-line-width:                                       100% !default;
-$divider-icon-line-border-width:                                $global-border-width !default;
-$divider-icon-line-border:                                      $global-border !default;
-$divider-small-width:                                           100px !default;
-$divider-small-border-width:                                    $global-border-width !default;
-$divider-small-border:                                          $global-border !default;
-$divider-vertical-height:                                       100px !default;
-$divider-vertical-border-width:                                 $global-border-width !default;
-$divider-vertical-border:                                       $global-border !default;
-$internal-divider-icon-image:                                   'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A' !default;
-
-// Inverse
-$inverse-divider-icon-color:                                    $inverse-global-border !default;
-$inverse-divider-icon-line-border:                              $inverse-global-border !default;
-$inverse-divider-small-border:                                  $inverse-global-border !default;
-$inverse-divider-vertical-border:                               $inverse-global-border !default;
-
-
-// Dotnav
-// ========================================================================
-
-$dotnav-margin-horizontal:                                      12px !default;
-$dotnav-margin-vertical:                                        $dotnav-margin-horizontal !default;
-$dotnav-item-width:                                             10px !default;
-$dotnav-item-height:                                            $dotnav-item-width !default;
-$dotnav-item-border-radius:                                     50% !default;
-$dotnav-item-background:                                        rgba($global-color, 20%) !default;
-$dotnav-item-hover-background:                                  rgba($global-color, 60%) !default;
-$dotnav-item-onclick-background:                                rgba($global-color, 20%) !default;
-$dotnav-item-active-background:                                 rgba($global-color, 60%) !default;
-
-// Inverse
-$inverse-dotnav-item-background:                                rgba($inverse-global-color, 50%) !default;
-$inverse-dotnav-item-hover-background:                          rgba($inverse-global-color, 90%) !default;
-$inverse-dotnav-item-onclick-background:                        rgba($inverse-global-color, 50%) !default;
-$inverse-dotnav-item-active-background:                         rgba($inverse-global-color, 90%) !default;
-
-
-// Drawer
-// ========================================================================
-
-$drawer-content-background:                                     $global-background !default;
-$drawer-content-padding:                                        $global-gutter !default;
-$drawer-mask-background:                                        rgb(0 0 0 / 30%) !default;
-$drawer-mask-background:                                        rgb(0 0 0 / 30%) !default;
-$drawer-z-index:                                                $global-z-index + 30 !default;
-$drawer-transition-duration:                                    $transition-medium-fast-duration !default;
-$drawer-close-position:                                         $global-small-margin !default;
-$drawer-close-padding:                                          5px !default;
-
-
-// Drop
-// ========================================================================
-
-$drop-z-index:                                                  $global-z-index + 20 !default;
-$drop-width:                                                    300px !default;
-$drop-margin:                                                   $global-margin !default;
-
-
-// Dropdown
-// ========================================================================
-
-$dropdown-color-mode:                                           light !default;
-$dropdown-z-index:                                              $global-z-index + 20 !default;
-$dropdown-min-width:                                            200px !default;
-$dropdown-padding:                                              15px !default;
-$dropdown-background:                                           $global-muted-background !default;
-$dropdown-border-radius:                                        $global-border-radius !default;
-$dropdown-color:                                                $global-color !default;
-$dropdown-margin:                                               $global-small-margin !default;
-$dropdown-nav-item-color:                                       $global-muted-color !default;
-$dropdown-nav-item-hover-color:                                 $global-color !default;
-$dropdown-nav-header-color:                                     $global-emphasis-color !default;
-$dropdown-nav-divider-border-width:                             $global-border-width !default;
-$dropdown-nav-divider-border:                                   $global-border !default;
-$dropdown-nav-sublist-item-color:                               $global-muted-color !default;
-$dropdown-nav-sublist-item-hover-color:                         $global-color !default;
-
-// Inverse
-$inverse-dropdown-background:                                   $inverse-global-muted-background !default;
-$inverse-dropdown-color:                                        $inverse-global-color !default;
-$inverse-dropdown-nav-item-color:                               $inverse-global-muted-color !default;
-$inverse-dropdown-nav-item-hover-color:                         $inverse-global-color !default;
-$inverse-dropdown-nav-header-color:                             $inverse-global-emphasis-color !default;
-$inverse-dropdown-nav-divider-border:                           $inverse-global-border !default;
-$inverse-dropdown-nav-sublist-item-color:                       $inverse-global-muted-color !default;
-$inverse-dropdown-nav-sublist-item-hover-color:                 $inverse-global-color !default;
-
-
 // Form
 // ========================================================================
 
@@ -867,7 +714,6 @@ $control-warning-border:                                        $global-warning-
 $control-warning-color:                                         $global-warning-background !default;
 $control-danger-border:                                         $global-danger-background !default;
 $control-danger-color:                                          $global-danger-background !default;
-$control-danger-color:                                          $global-danger-background !default;
 $control-blank-border-style:                                    dashed !default;
 $control-blank-focus-border:                                    darken($global-muted-background, 5%) !default;
 $control-affix-margin:                                          $global-small-margin !default;
@@ -914,83 +760,172 @@ $checkbox-checked-icon-border-width:                            2px !default;
 $checkbox-indeterminate-size:                                   $checkbox-size - 10px !default;
 
 
-// Radio
+// Countdown
 // ========================================================================
 
-$radio-size:                                                    20px !default;
-$radio-background:                                              $control-background !default;
-$radio-border-width:                                            $control-border-width !default;
-$radio-border:                                                  $control-border !default;
-$radio-hover-border:                                            $global-primary-border !default;
-$radio-focus-background:                                        $control-focus-background !default;
-$radio-focus-border:                                            $control-focus-border !default;
-$radio-checked-background:                                      transparent !default;
-$radio-checked-border:                                          $global-primary-border !default;
-$radio-checked-icon-color:                                      $global-primary-background !default;
-$radio-control-background:                                      rgba($control-background, 45%) !default;
-$radio-checked-control-background:                              rgba($radio-checked-icon-color, 15%) !default;
-$radio-checked-control-color:                                   $global-primary-background !default;
-$radio-disabled-background:                                     $control-disabled-background !default;
-$radio-disabled-border:                                         $control-disabled-border !default;
-$radio-disabled-icon-color:                                     $global-emphasis-color !default;
+$countdown-number-line-height:                                  0.8 !default;
+$countdown-number-font-size:                                    2rem !default; // 32px
+$countdown-number-font-size-s:                                  4rem !default; // 64px
+$countdown-number-font-size-m:                                  6rem !default; // 96px
+
+$countdown-separator-line-height:                               1.6 !default;
+$countdown-separator-font-size:                                 1rem !default; // 16px
+$countdown-separator-font-size-s:                               2rem !default; // 32px
+$countdown-separator-font-size-m:                               3rem !default; // 48px
 
 
-// Select
+// DatePicker
 // ========================================================================
 
-$select-border:                                                 $control-border !default;
-$select-border-style:                                           $control-border-style !default;
-$select-border-width:                                           $control-border-width !default;
-$select-border-radius:                                          $control-border-radius !default;
-$select-hover-border:                                           $control-hover-border !default;
-$select-focus-border:                                           $control-focus-border !default;
-$select-disabled-border:                                        $control-disabled-border !default;
-$select-height:                                                 $control-height !default;
-$select-small-height:                                           $control-small-height !default;
-$select-medium-height:                                          $control-medium-height !default;
-$select-large-height:                                           $control-large-height !default;
-$select-arrow-icon-size:                                        24px !default;
-$select-gutter:                                                 5px !default;
-$select-small-gutter:                                           5px !default;
-$select-medium-gutter:                                          15px !default;
-$select-large-gutter:                                           12px !default;
-$select-selector-padding-horizontal:                            $control-padding-horizontal !default;
-$select-selector-medium-padding-horizontal:                     $control-medium-padding-horizontal !default;
-$select-selector-large-padding-horizontal:                      $control-large-padding-horizontal !default;
-$select-selection-search-input-color:                           $control-color !default;
-$select-selection-placeholder-color:                            $control-placeholder-color !default;
-$select-selection-item-background:                              $global-background !default;
-$select-selection-item-border-radius:                           $control-border-radius !default;
-$select-selection-item-font-size:                               14px !default;
-$select-selection-item-line-height:                             24px !default;
-$select-selection-item-remove-icon-size:                        $select-selection-item-font-size !default;
-$select-selection-item-remove-icon-hover-color:                 $global-primary-background !default;
-$select-dropdown-background:                                    darken($global-background, 5%) !default;
-$select-dropdown-border:                                        $control-border !default;
-$select-dropdown-border-style:                                  $control-border-style !default;
-$select-dropdown-border-width:                                  $control-border-width !default;
-$select-dropdown-border-radius:                                 $control-border-radius !default;
-$select-icon-color:                                             $control-icon-color !default;
-$select-icon-hover-color:                                       $control-icon-hover-color !default;
-$select-icon-disabled-color:                                    $control-disabled-color !default;
-$select-item-color:                                             $control-color !default;
-$select-item-line-height:                                       24px !default;
-$select-item-active-background:                                 $global-default-background !default;
-$select-item-selected-background:                               darken($global-background, 10%) !default;
-$select-item-selected-state-color:                              $global-primary-background !default;
-$select-item-disabled-color:                                    $control-disabled-color !default;
-$select-item-group-color:                                       $global-muted-color !default;
-$select-item-group-font-size:                                   $global-small-font-size !default;
-$select-item-group-text-transform:                              uppercase !default;
+$datepicker-border:                                             $control-border !default;
+$datepicker-border-style:                                       $control-border-style !default;
+$datepicker-border-width:                                       $control-border-width !default;
+$datepicker-height:                                             $control-height - $datepicker-border-width * 2 !default;
+$datepicker-small-height:                                       $control-small-height - $datepicker-border-width * 2 !default;
+$datepicker-medium-height:                                      $control-medium-height - $datepicker-border-width * 2 !default;
+$datepicker-large-height:                                       $control-large-height - $datepicker-border-width * 2 !default;
+$datepicker-success-border:                                     $control-success-border !default;
+$datepicker-success-color:                                      $control-success-color !default;
+$datepicker-warning-border:                                     $control-warning-border !default;
+$datepicker-warning-color:                                      $control-warning-color !default;
+$datepicker-danger-border:                                      $control-danger-border !default;
+$datepicker-danger-color:                                       $control-danger-color !default;
+$datepicker-blank-border-style:                                 $control-blank-border-style !default;
+$datepicker-blank-focus-border:                                 $control-blank-focus-border !default;
+$datepicker-button-font-size:                                   $global-font-size !default;
+$datepicker-button-line-height:                                 $global-control-large-height !default;
+$datepicker-button-padding-horizontal:                          $global-small-gutter !default;
+$datepicker-body-padding-vertical:                              $global-small-gutter !default;
+$datepicker-body-padding-horizontal:                            $global-gutter !default;
+$datepicker-cell-border-radius:                                 $global-small-border-radius !default;
+$datepicker-cell-height:                                        $global-control-height !default;
+$datepicker-cell-width:                                         $global-control-height * 1.05 !default;
+$datepicker-cell-padding:                                       $global-xsmall-gutter !default;
+$datepicker-cell-color:                                         $global-color !default;
+$datepicker-cell-hover-background:                              $global-secondary-background !default;
+$datepicker-cell-active-background:                             $global-primary-background !default;
+$datepicker-cell-active-color:                                  $global-inverse-color !default;
+$datepicker-cell-disabled-background:                           $global-muted-background !default;
+$datepicker-cell-disabled-color:                                $global-muted-color !default;
+$datepicker-time-column-height:                                 252px !default;
+$datepicker-time-column-width:                                  60px !default;
+$datepicker-time-cell-height:                                   28px !default;
+$datepicker-dropdown-background:                                $global-muted-background !default;
+$datepicker-dropdown-border:                                    $global-border !default;
+$datepicker-dropdown-border-style:                              $global-border-style !default;
+$datepicker-dropdown-border-width:                              $global-border-width !default;
+$datepicker-dropdown-border-radius:                             $global-border-radius !default;
 
 
-// Textarea
+// Description list
 // ========================================================================
 
-$textarea-counter-background:                                   $global-default-background;
-$textarea-counter-border-radius:                                $control-border-radius;
-$textarea-counter-color:                                        $global-muted-color;
-$textarea-counter-font-size:                                    0.8em;
+$description-list-term-color:                                   $global-emphasis-color !default;
+$description-list-term-margin-top:                              $global-margin !default;
+$description-list-term-font-size:                               $global-small-font-size !default;
+$description-list-term-font-weight:                             500 !default;
+$description-list-term-text-transform:                          uppercase !default;
+$description-list-divider-term-margin-top:                      $global-margin !default;
+$description-list-divider-term-border-width:                    $global-border-width !default;
+$description-list-divider-term-border:                          $global-border !default;
+$inverse-description-list-term-color:                           $inverse-global-emphasis-color !default;
+
+
+// Divider
+// ========================================================================
+
+$divider-margin-vertical:                                       $global-margin !default;
+$divider-icon-width:                                            50px !default;
+$divider-icon-height:                                           20px !default;
+$divider-icon-color:                                            $global-border !default;
+$divider-icon-line-top:                                         50% !default;
+$divider-icon-line-width:                                       100% !default;
+$divider-icon-line-border-width:                                $global-border-width !default;
+$divider-icon-line-border:                                      $global-border !default;
+$divider-small-width:                                           100px !default;
+$divider-small-border-width:                                    $global-border-width !default;
+$divider-small-border:                                          $global-border !default;
+$divider-vertical-height:                                       100px !default;
+$divider-vertical-border-width:                                 $global-border-width !default;
+$divider-vertical-border:                                       $global-border !default;
+$internal-divider-icon-image:                                   'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A' !default;
+
+// Inverse
+$inverse-divider-icon-color:                                    $inverse-global-border !default;
+$inverse-divider-icon-line-border:                              $inverse-global-border !default;
+$inverse-divider-small-border:                                  $inverse-global-border !default;
+$inverse-divider-vertical-border:                               $inverse-global-border !default;
+
+
+// Dotnav
+// ========================================================================
+
+$dotnav-margin-horizontal:                                      12px !default;
+$dotnav-margin-vertical:                                        $dotnav-margin-horizontal !default;
+$dotnav-item-width:                                             10px !default;
+$dotnav-item-height:                                            $dotnav-item-width !default;
+$dotnav-item-border-radius:                                     50% !default;
+$dotnav-item-background:                                        rgba($global-color, 20%) !default;
+$dotnav-item-hover-background:                                  rgba($global-color, 60%) !default;
+$dotnav-item-onclick-background:                                rgba($global-color, 20%) !default;
+$dotnav-item-active-background:                                 rgba($global-color, 60%) !default;
+
+// Inverse
+$inverse-dotnav-item-background:                                rgba($inverse-global-color, 50%) !default;
+$inverse-dotnav-item-hover-background:                          rgba($inverse-global-color, 90%) !default;
+$inverse-dotnav-item-onclick-background:                        rgba($inverse-global-color, 50%) !default;
+$inverse-dotnav-item-active-background:                         rgba($inverse-global-color, 90%) !default;
+
+
+// Drawer
+// ========================================================================
+
+$drawer-content-background:                                     $global-background !default;
+$drawer-content-padding:                                        $global-gutter !default;
+$drawer-mask-background:                                        rgb(0 0 0 / 30%) !default;
+$drawer-mask-background:                                        rgb(0 0 0 / 30%) !default;
+$drawer-z-index:                                                $global-z-index + 30 !default;
+$drawer-transition-duration:                                    $transition-medium-fast-duration !default;
+$drawer-close-position:                                         $global-small-margin !default;
+$drawer-close-padding:                                          5px !default;
+
+
+// Drop
+// ========================================================================
+
+$drop-z-index:                                                  $global-z-index + 20 !default;
+$drop-width:                                                    300px !default;
+$drop-margin:                                                   $global-margin !default;
+
+
+// Dropdown
+// ========================================================================
+
+$dropdown-color-mode:                                           light !default;
+$dropdown-z-index:                                              $global-z-index + 20 !default;
+$dropdown-min-width:                                            200px !default;
+$dropdown-padding:                                              15px !default;
+$dropdown-background:                                           $global-muted-background !default;
+$dropdown-border-radius:                                        $global-border-radius !default;
+$dropdown-color:                                                $global-color !default;
+$dropdown-margin:                                               $global-small-margin !default;
+$dropdown-nav-item-color:                                       $global-muted-color !default;
+$dropdown-nav-item-hover-color:                                 $global-color !default;
+$dropdown-nav-header-color:                                     $global-emphasis-color !default;
+$dropdown-nav-divider-border-width:                             $global-border-width !default;
+$dropdown-nav-divider-border:                                   $global-border !default;
+$dropdown-nav-sublist-item-color:                               $global-muted-color !default;
+$dropdown-nav-sublist-item-hover-color:                         $global-color !default;
+
+// Inverse
+$inverse-dropdown-background:                                   $inverse-global-muted-background !default;
+$inverse-dropdown-color:                                        $inverse-global-color !default;
+$inverse-dropdown-nav-item-color:                               $inverse-global-muted-color !default;
+$inverse-dropdown-nav-item-hover-color:                         $inverse-global-color !default;
+$inverse-dropdown-nav-header-color:                             $inverse-global-emphasis-color !default;
+$inverse-dropdown-nav-divider-border:                           $inverse-global-border !default;
+$inverse-dropdown-nav-sublist-item-color:                       $inverse-global-muted-color !default;
+$inverse-dropdown-nav-sublist-item-hover-color:                 $inverse-global-color !default;
 
 
 // Grid
@@ -1470,6 +1405,27 @@ $progress-background:                                           $global-muted-ba
 $progress-bar-background:                                       $global-primary-background !default;
 
 
+// Radio
+// ========================================================================
+
+$radio-size:                                                    20px !default;
+$radio-background:                                              $control-background !default;
+$radio-border-width:                                            $control-border-width !default;
+$radio-border:                                                  $control-border !default;
+$radio-hover-border:                                            $global-primary-border !default;
+$radio-focus-background:                                        $control-focus-background !default;
+$radio-focus-border:                                            $control-focus-border !default;
+$radio-checked-background:                                      transparent !default;
+$radio-checked-border:                                          $global-primary-border !default;
+$radio-checked-icon-color:                                      $global-primary-background !default;
+$radio-control-background:                                      rgba($control-background, 45%) !default;
+$radio-checked-control-background:                              rgba($radio-checked-icon-color, 15%) !default;
+$radio-checked-control-color:                                   $global-primary-background !default;
+$radio-disabled-background:                                     $control-disabled-background !default;
+$radio-disabled-border:                                         $control-disabled-border !default;
+$radio-disabled-icon-color:                                     $global-emphasis-color !default;
+
+
 // Search
 // ========================================================================
 
@@ -1530,6 +1486,55 @@ $section-tertiary-background:                                   $global-tertiary
 $section-tertiary-color-mode:                                   light !default;
 
 
+// Select
+// ========================================================================
+
+$select-border:                                                 $control-border !default;
+$select-border-style:                                           $control-border-style !default;
+$select-border-width:                                           $control-border-width !default;
+$select-border-radius:                                          $control-border-radius !default;
+$select-hover-border:                                           $control-hover-border !default;
+$select-focus-border:                                           $control-focus-border !default;
+$select-disabled-border:                                        $control-disabled-border !default;
+$select-height:                                                 $control-height !default;
+$select-small-height:                                           $control-small-height !default;
+$select-medium-height:                                          $control-medium-height !default;
+$select-large-height:                                           $control-large-height !default;
+$select-arrow-icon-size:                                        24px !default;
+$select-gutter:                                                 5px !default;
+$select-small-gutter:                                           5px !default;
+$select-medium-gutter:                                          15px !default;
+$select-large-gutter:                                           12px !default;
+$select-selector-padding-horizontal:                            $control-padding-horizontal !default;
+$select-selector-medium-padding-horizontal:                     $control-medium-padding-horizontal !default;
+$select-selector-large-padding-horizontal:                      $control-large-padding-horizontal !default;
+$select-selection-search-input-color:                           $control-color !default;
+$select-selection-placeholder-color:                            $control-placeholder-color !default;
+$select-selection-item-background:                              $global-background !default;
+$select-selection-item-border-radius:                           $control-border-radius !default;
+$select-selection-item-font-size:                               14px !default;
+$select-selection-item-line-height:                             24px !default;
+$select-selection-item-remove-icon-size:                        $select-selection-item-font-size !default;
+$select-selection-item-remove-icon-hover-color:                 $global-primary-background !default;
+$select-dropdown-background:                                    darken($global-background, 5%) !default;
+$select-dropdown-border:                                        $control-border !default;
+$select-dropdown-border-style:                                  $control-border-style !default;
+$select-dropdown-border-width:                                  $control-border-width !default;
+$select-dropdown-border-radius:                                 $control-border-radius !default;
+$select-icon-color:                                             $control-icon-color !default;
+$select-icon-hover-color:                                       $control-icon-hover-color !default;
+$select-icon-disabled-color:                                    $control-disabled-color !default;
+$select-item-color:                                             $control-color !default;
+$select-item-line-height:                                       24px !default;
+$select-item-active-background:                                 $global-default-background !default;
+$select-item-selected-background:                               darken($global-background, 10%) !default;
+$select-item-selected-state-color:                              $global-primary-background !default;
+$select-item-disabled-color:                                    $control-disabled-color !default;
+$select-item-group-color:                                       $global-muted-color !default;
+$select-item-group-font-size:                                   $global-small-font-size !default;
+$select-item-group-text-transform:                              uppercase !default;
+
+
 // Slidenav
 // ========================================================================
 
@@ -1756,6 +1761,15 @@ $inverse-text-secondary-color:                                  $inverse-global-
 $inverse-text-tertiary-color:                                   $inverse-global-primary-background !default;
 
 
+// Textarea
+// ========================================================================
+
+$textarea-counter-background:                                   $global-default-background;
+$textarea-counter-border-radius:                                $control-border-radius;
+$textarea-counter-color:                                        $global-muted-color;
+$textarea-counter-font-size:                                    0.8em;
+
+
 // Thumbnav
 // ========================================================================
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@broxus/react-uikit",
-    "version": "0.17.3",
+    "version": "0.18.0",
     "description": "React-based UIkit library",
     "license": "AGPL-3.0",
     "keywords": [
@@ -51,7 +51,7 @@
         "styles:copy": "npx yarn styles:cjs:copy & npx yarn styles:esm:copy",
         "styles:cjs:copy": "npx copyfiles \"src/**/*.scss\" -u 1 dist/cjs",
         "styles:esm:copy": "npx copyfiles \"src/**/*.scss\" -u 1 dist/esm",
-        "watch:js": "npx chokidar \"src/**/*.{ts,tsx}\" -c \"npx yarn build:esm\"",
+        "watch:js": "npx chokidar \"src/**/*.{ts,tsx}\" -c \"npx yarn build:esm -- --incremental\"",
         "watch:styles": "npx chokidar \"src/**/*.scss\" -c \"npx yarn styles:esm:copy\"",
         "dev": "npx yarn watch:js & npx yarn watch:styles",
         "lint": "npx eslint src --ext .ts,.tsx",
@@ -60,29 +60,33 @@
         "prepare": "npx yarn cleanup && npx yarn build"
     },
     "dependencies": {
-        "@broxus/js-utils": "^1.3.13",
+        "@broxus/js-utils": "^1.3.14",
+        "@rc-component/collapse": "^1.0.1",
+        "@rc-component/dialog": "^1.2.0",
+        "@rc-component/drawer": "^1.0.0",
+        "@rc-component/dropdown": "^1.0.0",
+        "@rc-component/input-number": "^1.0.0",
+        "@rc-component/motion": "^1.1.4",
+        "@rc-component/picker": "^1.1.0",
+        "@rc-component/resize-observer": "^1.0.0",
+        "@rc-component/select": "^1.0.0",
+        "@rc-component/switch": "^1.0.0",
+        "@rc-component/tabs": "^1.3.0",
+        "@rc-component/textarea": "^1.0.0",
+        "@rc-component/trigger": "^3.1.0",
+        "@rc-component/util": "^1.2.1",
         "classnames": "^2.5.1",
-        "rc-collapse": "^3.9.0",
-        "rc-dialog": "^9.6.0",
-        "rc-drawer": "^7.2.0",
-        "rc-dropdown": "^4.2.1",
-        "rc-input-number": "^9.4.0",
-        "rc-motion": "^2.9.5",
-        "rc-overflow": "^1.3.2",
-        "rc-picker": "^4.9.1",
-        "rc-select": "^14.16.4",
+        "rc-motion": "npm:@rc-component/motion@^1.1.4",
+        "rc-overflow": "^1.4.1",
+        "rc-resize-observer": "npm:@rc-component/resize-observer@^1.0.0",
         "rc-slider": "^11.1.8",
-        "rc-switch": "^4.1.0",
-        "rc-tabs": "^15.5.0",
-        "rc-textarea": "^1.9.0",
-        "rc-trigger": "^5.3.4",
-        "rc-util": "^5.44.3",
+        "rc-util": "npm:@rc-component/util@^1.2.1",
         "shallowequal": "^1.1.0",
-        "uikit": "^3.21.16"
+        "uikit": "^3.23.1"
     },
     "peerDependencies": {
-        "react": "^16.8.0 || ^17.x || ^18.x",
-        "react-dom": "^16.8.0 || ^17.x || ^18.x"
+        "react": "^16.8.0 || ^17.x || ^18.x || ^19.x",
+        "react-dom": "^16.8.0 || ^17.x || ^18.x || ^19.x"
     },
-    "gitHead": "9a66284d83d7f221635a5dc89a7171d99c6284cd"
+    "gitHead": "671089ea81dba897bc0db5aff16d1819966956c1"
 }