@salutejs/plasma-new-hope 0.337.0-canary.2184.17907394393.0 → 0.337.0-canary.2184.17968380115.0

package/es/components/TimePicker/TimePicker.css

@@ -14,8 +14,8 @@
 
 .base_z7a2uf_b10o15xy__b340e41b .base_z7a2uf_hgy0im1__b340e41b{--plasma-tooltip-padding-top:var(--plasma-textfield__tooltip-padding-top);--plasma-tooltip-padding-right:var(--plasma-textfield__tooltip-padding-right);--plasma-tooltip-padding-bottom:var(--plasma-textfield__tooltip-padding-bottom);--plasma-tooltip-padding-left:var(--plasma-textfield__tooltip-padding-left);--plasma-tooltip-min-height:var(--plasma-textfield__tooltip-min-height);--plasma-tooltip-border-radius:var(--plasma-textfield__tooltip-border-radius);--plasma-tooltip-text-font-family:var(--plasma-textfield__tooltip-text-font-family);--plasma-tooltip-text-font-size:var(--plasma-textfield__tooltip-text-font-size);--plasma-tooltip-text-font-style:var(--plasma-textfield__tooltip-text-font-style);--plasma-tooltip-text-font-weight:var(--plasma-textfield__tooltip-text-font-weight);--plasma-tooltip-text-font-letter-spacing:var(--plasma-textfield__tooltip-text-font-letter-spacing);--plasma-tooltip-text-font-line-height:var(--plasma-textfield__tooltip-text-font-line-height);--plasma-tooltip-content-left-margin:var(--plasma-textfield__tooltip-content-left-margin);--plasma-tooltip-arrow-mask-width:var(--plasma-textfield__tooltip-arrow-mask-width);--plasma-tooltip-arrow-mask-height:var(--plasma-textfield__tooltip-arrow-mask-height);--plasma-tooltip-arrow-mask-image:var(--plasma-textfield__tooltip-arrow-mask-image);--plasma-tooltip-arrow-height:var(--plasma-textfield__tooltip-arrow-height);--plasma-tooltip-arrow-edge-margin:var(--plasma-textfield__tooltip-arrow-edge-margin);--plasma-tooltip-arrow-background:var(--plasma-textfield__tooltip-arrow-background);}
 
-.Tooltip_styles_1bh0sd0_teczcv4__e6cc0309{padding:var(--plasma-tooltip-padding-top) var(--plasma-tooltip-padding-right) var(--plasma-tooltip-padding-bottom) var(--plasma-tooltip-padding-left);min-height:var(--plasma-tooltip-min-height);box-sizing:border-box;background-color:var(--plasma-tooltip-background-color);border-radius:var(--plasma-tooltip-border-radius);box-shadow:var(--plasma-tooltip-box-shadow);color:var(--plasma-tooltip-color);font-family:var(--plasma-tooltip-text-font-family);font-size:var(--plasma-tooltip-text-font-size);font-style:var(--plasma-tooltip-text-font-style);font-weight:var(--plasma-tooltip-text-font-weight);-webkit-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-moz-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-ms-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);line-height:var(--plasma-tooltip-text-font-line-height);max-width:var(--teczcv4-0);min-width:var(--teczcv4-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
-.Tooltip_styles_1bh0sd0_s1j361h1__e6cc0309{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--plasma-tooltip-content-left-margin);height:var(--plasma-tooltip-text-font-line-height);}
+.Tooltip_styles_uldg0s_teczcv4__f329846b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--plasma-tooltip-padding-top) var(--plasma-tooltip-padding-right) var(--plasma-tooltip-padding-bottom) var(--plasma-tooltip-padding-left);min-height:var(--plasma-tooltip-min-height);max-width:var(--teczcv4-0);min-width:var(--teczcv4-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;background-color:var(--plasma-tooltip-background-color);border-radius:var(--plasma-tooltip-border-radius);box-shadow:var(--plasma-tooltip-box-shadow);color:var(--plasma-tooltip-color);font-family:var(--plasma-tooltip-text-font-family);font-size:var(--plasma-tooltip-text-font-size);font-style:var(--plasma-tooltip-text-font-style);font-weight:var(--plasma-tooltip-text-font-weight);-webkit-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-moz-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-ms-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);line-height:var(--plasma-tooltip-text-font-line-height);box-sizing:border-box;word-break:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
+.Tooltip_styles_uldg0s_s1j361h1__f329846b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--plasma-tooltip-content-left-margin);height:var(--plasma-tooltip-text-font-line-height);}
 
 .Tooltip_1qsg6ij_s1cz8cv8__da7f9e0a{--plasma-popover-arrow-mask-width:var(--plasma-tooltip-arrow-mask-width);--plasma-popover-arrow-mask-height:var(--plasma-tooltip-arrow-mask-height);--plasma-popover-arrow-mask-image:var(--plasma-tooltip-arrow-mask-image);--plasma-popover-arrow-background:var(--plasma-tooltip-arrow-background);--plasma-popover-arrow-height:var(--plasma-tooltip-arrow-height);--plasma-popover-arrow-edge-margin:var(--plasma-tooltip-arrow-edge-margin);}
 
@@ -76,11 +76,15 @@
 .Popover_styles_ji8em4_s16xlixz__439b9cc0{position:absolute;z-index:var(--s16xlixz-0);opacity:0;visibility:hidden;box-shadow:var(--plasma-popover-box-shadow);}.Popover_styles_ji8em4_s16xlixz__439b9cc0.Popover_styles_ji8em4_popoverAnimate__439b9cc0{-webkit-transition:opacity 0.2s ease-in-out,-webkit-transform 0s ease-in-out,visibility 0.2s;-webkit-transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}.Popover_styles_ji8em4_s16xlixz__439b9cc0.Popover_styles_ji8em4_popoverOpen__439b9cc0{opacity:1;visibility:visible;}.Popover_styles_ji8em4_s16xlixz__439b9cc0:before{content:'';display:block;position:absolute;background:transparent;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{bottom:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{right:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{left:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{bottom:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{bottom:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:unset !important;bottom:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-end']:before{top:unset;left:0;right:0;height:var(--plasma-popover-arrow-height);bottom:calc(-1 * var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-end']:before{top:calc(-1 * var(--plasma-popover-arrow-height));left:0;right:0;bottom:var(--plasma-popover-arrow-height);height:var(--plasma-popover-arrow-height);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;right:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;left:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}
 
 
-.TimePicker_styles_1ie9d7j_s1ghbm1p__dc9c5ed2{width:100%;--plasma-textfield-color:var(--plasma-time-picker-textfield-color);--plasma-textfield__placeholder-color:var(--plasma-time-picker-textfield-placeholder-color);--plasma-textfield__placeholder-color-focus:var(--plasma-timepicker-textfield__placeholder-color-focus);--plasma-textfield__caret-color:var(--plasma-time-picker-textfield-caret-color);--plasma-textfield-focus-color:var(--plasma-time-picker-textfield-focus-color);--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-focus);--plasma-textfield-border-color:var(--plasma-time-picker_range-border-color);--plasma-textfield-border-color-hover:var(--plasma-time-picker_range-border-color-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker_range-border-color-focus);--plasma-textfield-color-readonly:var(--plasma-time-picker-textfield-color-readonly);--plasma-textfield-bg-color-readonly:var(--plasma-time-picker-textfield-background-color-readonly);--plasma-textfield-border-color-readonly:var(--plasma-time-picker-textfield-border-color-readonly);--plasma-textfield__placeholder-color-readonly:var(--plasma-time-picker-textfield-placeholder-color-readonly);--plasma-textfield-height:var(--plasma-time-picker-textfield-height);--plasma-textfield-border-width:var(--plasma-time-picker-textfield-border-width);--plasma-textfield-border-radius:var(--plasma-time-picker-textfield-border-radius);--plasma-textfield-padding:var(--plasma-time-picker-textfield-padding);--plasma-textfield-placement_inner__label-padding:var(--plasma-time-picker-placement_inner__label-padding);--plasma-textfield-placement_inner__content-padding:var(--plasma-time-picker-placement_inner__content-padding);--plasma-textfield__label-offset:var(--plasma-time-picker__label-offset);--plasma-textfield__label-font-family:var(--plasma-time-picker__label-font-family);--plasma-textfield__label-font-style:var(--plasma-time-picker__label-font-style);--plasma-textfield__label-font-size:var(--plasma-time-picker__label-font-size);--plasma-textfield__label-font-weight:var(--plasma-time-picker__label-font-weight);--plasma-textfield__label-letter-spacing:var(--plasma-time-picker__label-letter-spacing);--plasma-textfield__label-line-height:var(--plasma-time-picker__label-line-height);--plasma-textfield-placement_inner__label-font-family:var(--plasma-time-picker-placement_inner__label-font-family);--plasma-textfield-placement_inner__label-font-size:var(--plasma-time-picker-placement_inner__label-font-size);--plasma-textfield-placement_inner__label-font-style:var(--plasma-time-picker-placement_inner__label-font-style);--plasma-textfield-placement_inner__label-font-weight:var(--plasma-time-picker-placement_inner__label-font-weight);--plasma-textfield-placement_inner__label-letter-spacing:var(--plasma-time-picker-placement_inner__label-letter-spacing);--plasma-textfield-placement_inner__label-line-height:var(--plasma-time-picker-placement_inner__label-line-height);--plasma-textfield__label-color-readonly:var(--plasma-time-picker__label-color-readonly);--plasma-textfield__indicator-color:var(--plasma-time-picker__indicator-color);--plasma-textfield__indicator-size-inner:var(--plasma-time-picker__indicator-size);--plasma-textfield__indicator-size-outer:var(--plasma-time-picker__indicator-size-outer);--plasma-textfield__indicator-placement-inner:var(--plasma-time-picker__indicator-placement);--plasma-textfield__indicator-placement-outer:var(--plasma-time-picker__indicator-placement-outer);--plasma-textfield__indicator-placement-inner-right:var(--plasma-time-picker__indicator-placement-right);--plasma-textfield__indicator-placement-outer-right:var(--plasma-time-picker__indicator-placement-outer-right);--plasma-textfield__left-content-margin:var(--plasma-time-picker-textfield__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-time-picker-textfield__right-content-margin);--plasma-textfield-font-family:var(--plasma-time-picker-textfield-font-family);--plasma-textfield-font-size:var(--plasma-time-picker-textfield-font-size);--plasma-textfield-font-style:var(--plasma-time-picker-textfield-font-style);--plasma-textfield-font-weight:var(--plasma-time-picker-textfield-font-weight);--plasma-textfield-letter-spacing:var(--plasma-time-picker-textfield-letter-spacing);--plasma-textfield-line-height:var(--plasma-time-picker-textfield-line-height);--plasma-textfield-disabled-opacity:var(--plasma-time-picker-disabled-opacity);--plasma-textfield__before-text-color:var(--plasma-time-picker-textfield__before-text-color);--plasma-textfield__after-text-color:var(--plasma-time-picker-textfield__after-text-color);--plasma-textfield__before-text-margin:var(--plasma-time-picker-textfield__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-time-picker-textfield__after-text-margin);--plasma-textfield-content-slot-color:var(--plasma-time-picker-textfield__content-color,var(--plasma-time-picker-textfield-color));--plasma-textfield-content-right-slot-color:var(--plasma-time-picker-textfield__content-right-color,var(--plasma-textfield-content-slot-color));--plasma-textfield-content-right-slot-color-hover:var(--plasma-time-picker-textfield__content-right-color-hover,var(--plasma-textfield-content-right-slot-color));}.TimePicker_styles_1ie9d7j_s1ghbm1p__dc9c5ed2.TimePicker_styles_1ie9d7j_plasmaTimePickerError__dc9c5ed2{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-error);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-error-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-error-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-error);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-error-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-error-focus);}.TimePicker_styles_1ie9d7j_s1ghbm1p__dc9c5ed2.TimePicker_styles_1ie9d7j_plasmaTimePickerSuccess__dc9c5ed2{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-success);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-success-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-success-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-success);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-success-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-success-focus);}
-.TimePicker_styles_1ie9d7j_b19h9m1x__dc9c5ed2{display:inline-block;width:var(--plasma-time-picker-width);}.TimePicker_styles_1ie9d7j_b19h9m1x__dc9c5ed2 .TimePicker_styles_1ie9d7j_popoverWrapper__dc9c5ed2,.TimePicker_styles_1ie9d7j_b19h9m1x__dc9c5ed2 .TimePicker_styles_1ie9d7j_popoverTarget__dc9c5ed2{width:inherit;}.TimePicker_styles_1ie9d7j_b19h9m1x__dc9c5ed2.TimePicker_styles_1ie9d7j_plasmaTimePickerStretched__dc9c5ed2{width:100%;}.TimePicker_styles_1ie9d7j_b19h9m1x__dc9c5ed2.TimePicker_styles_1ie9d7j_plasmaTimePickerStretched__dc9c5ed2 .TimePicker_styles_1ie9d7j_popoverRoot__dc9c5ed2{width:100%;}.TimePicker_styles_1ie9d7j_b19h9m1x__dc9c5ed2.TimePicker_styles_1ie9d7j_plasmaTimePickerFullWidth__dc9c5ed2{width:100%;}
-.TimePicker_styles_1ie9d7j_slnaiay__dc9c5ed2{background:var(--plasma-time-picker-ui-background);border-radius:var(--plasma-time-picker-ui-border-radius);width:var(--slnaiay-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:var(--plasma-time-picker-ui-padding);-webkit-flex:1 1 1;-ms-flex:1 1 1;flex:1 1 1;box-sizing:border-box;position:relative;}
-.TimePicker_styles_1ie9d7j_sh0cawu__dc9c5ed2{height:var(--plasma-time-picker-item-height);padding:var(--plasma-time-picker-item-padding);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:0.05s;transition:0.05s;border-radius:var(--plasma-time-picker-item-border-radius);cursor:pointer;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-family:var(--plasma-time-picker-item-font-family);font-size:var(--plasma-time-picker-item-font-size);font-style:var(--plasma-time-picker-item-font-style);font-weight:var(--plasma-time-picker-item-font-weight);-webkit-letter-spacing:var(--plasma-time-picker-item-letter-spacing);-moz-letter-spacing:var(--plasma-time-picker-item-letter-spacing);-ms-letter-spacing:var(--plasma-time-picker-item-letter-spacing);letter-spacing:var(--plasma-time-picker-item-letter-spacing);line-height:var(--plasma-time-picker-item-line-height);}.TimePicker_styles_1ie9d7j_sh0cawu__dc9c5ed2:hover{background:var(--plasma-time-picker-item-hover-background);}.TimePicker_styles_1ie9d7j_sh0cawu__dc9c5ed2.TimePicker_styles_1ie9d7j_plasmaTimePickerItemActive__dc9c5ed2{background:var(--plasma-time-picker-item-active-background);}
-.TimePicker_styles_1ie9d7j_s15lrh1g__dc9c5ed2{max-height:var(--s15lrh1g-0);overflow-y:scroll;-webkit-flex:1;-ms-flex:1;flex:1;z-index:3;padding:calc(var(--plasma-time-picker-scrollbar-width) / 2);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-time-picker-scrollbar-width);width:100%;}.TimePicker_styles_1ie9d7j_s15lrh1g__dc9c5ed2.TimePicker_styles_1ie9d7j_plasmaTimePickerColumnActive__dc9c5ed2{border:0.125rem solid var(--plasma-time-picker-item-hover-background);border-radius:var(--plasma-time-picker-item-border-radius);}.TimePicker_styles_1ie9d7j_s15lrh1g__dc9c5ed2::-webkit-scrollbar{width:var(--plasma-time-picker-scrollbar-width);height:var(--plasma-time-picker-scrollbar-width);}.TimePicker_styles_1ie9d7j_s15lrh1g__dc9c5ed2::-webkit-scrollbar-track{background:var(--plasma-time-picker-scrollbar-track-color);border-radius:var(--plasma-time-picker-scrollbar-width);}.TimePicker_styles_1ie9d7j_s15lrh1g__dc9c5ed2::-webkit-scrollbar-thumb{background:var(--plasma-time-picker-scrollbar-color);border-radius:var(--plasma-time-picker-scrollbar-width);}
+.TimePicker_styles_7l6ler_s1ghbm1p__7c9ab2c4{width:100%;--plasma-textfield-color:var(--plasma-time-picker-textfield-color);--plasma-textfield__placeholder-color:var(--plasma-time-picker-textfield-placeholder-color);--plasma-textfield__placeholder-color-focus:var(--plasma-timepicker-textfield__placeholder-color-focus);--plasma-textfield__caret-color:var(--plasma-time-picker-textfield-caret-color);--plasma-textfield-focus-color:var(--plasma-time-picker-textfield-focus-color);--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-focus);--plasma-textfield-border-color:var(--plasma-time-picker_range-border-color);--plasma-textfield-border-color-hover:var(--plasma-time-picker_range-border-color-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker_range-border-color-focus);--plasma-textfield-color-readonly:var(--plasma-time-picker-textfield-color-readonly);--plasma-textfield-bg-color-readonly:var(--plasma-time-picker-textfield-background-color-readonly);--plasma-textfield-border-color-readonly:var(--plasma-time-picker-textfield-border-color-readonly);--plasma-textfield__placeholder-color-readonly:var(--plasma-time-picker-textfield-placeholder-color-readonly);--plasma-textfield-height:var(--plasma-time-picker-textfield-height);--plasma-textfield-border-width:var(--plasma-time-picker-textfield-border-width);--plasma-textfield-border-radius:var(--plasma-time-picker-textfield-border-radius);--plasma-textfield-padding:var(--plasma-time-picker-textfield-padding);--plasma-textfield-placement_inner__label-padding:var(--plasma-time-picker-placement_inner__label-padding);--plasma-textfield-placement_inner__content-padding:var(--plasma-time-picker-placement_inner__content-padding);--plasma-textfield__label-offset:var(--plasma-time-picker__label-offset);--plasma-textfield__label-font-family:var(--plasma-time-picker__label-font-family);--plasma-textfield__label-font-style:var(--plasma-time-picker__label-font-style);--plasma-textfield__label-font-size:var(--plasma-time-picker__label-font-size);--plasma-textfield__label-font-weight:var(--plasma-time-picker__label-font-weight);--plasma-textfield__label-letter-spacing:var(--plasma-time-picker__label-letter-spacing);--plasma-textfield__label-line-height:var(--plasma-time-picker__label-line-height);--plasma-textfield-placement_inner__label-font-family:var(--plasma-time-picker-placement_inner__label-font-family);--plasma-textfield-placement_inner__label-font-size:var(--plasma-time-picker-placement_inner__label-font-size);--plasma-textfield-placement_inner__label-font-style:var(--plasma-time-picker-placement_inner__label-font-style);--plasma-textfield-placement_inner__label-font-weight:var(--plasma-time-picker-placement_inner__label-font-weight);--plasma-textfield-placement_inner__label-letter-spacing:var(--plasma-time-picker-placement_inner__label-letter-spacing);--plasma-textfield-placement_inner__label-line-height:var(--plasma-time-picker-placement_inner__label-line-height);--plasma-textfield__label-color-readonly:var(--plasma-time-picker__label-color-readonly);--plasma-textfield__indicator-color:var(--plasma-time-picker__indicator-color);--plasma-textfield__indicator-size-inner:var(--plasma-time-picker__indicator-size);--plasma-textfield__indicator-size-outer:var(--plasma-time-picker__indicator-size-outer);--plasma-textfield__indicator-placement-inner:var(--plasma-time-picker__indicator-placement);--plasma-textfield__indicator-placement-outer:var(--plasma-time-picker__indicator-placement-outer);--plasma-textfield__indicator-placement-inner-right:var(--plasma-time-picker__indicator-placement-right);--plasma-textfield__indicator-placement-outer-right:var(--plasma-time-picker__indicator-placement-outer-right);--plasma-textfield__left-content-margin:var(--plasma-time-picker-textfield__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-time-picker-textfield__right-content-margin);--plasma-textfield-font-family:var(--plasma-time-picker-textfield-font-family);--plasma-textfield-font-size:var(--plasma-time-picker-textfield-font-size);--plasma-textfield-font-style:var(--plasma-time-picker-textfield-font-style);--plasma-textfield-font-weight:var(--plasma-time-picker-textfield-font-weight);--plasma-textfield-letter-spacing:var(--plasma-time-picker-textfield-letter-spacing);--plasma-textfield-line-height:var(--plasma-time-picker-textfield-line-height);--plasma-textfield-disabled-opacity:var(--plasma-time-picker-disabled-opacity);--plasma-textfield__before-text-color:var(--plasma-time-picker-textfield__before-text-color);--plasma-textfield__after-text-color:var(--plasma-time-picker-textfield__after-text-color);--plasma-textfield__before-text-margin:var(--plasma-time-picker-textfield__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-time-picker-textfield__after-text-margin);--plasma-textfield-content-slot-color:var(--plasma-time-picker-textfield__content-color,var(--plasma-time-picker-textfield-color));--plasma-textfield-content-right-slot-color:var(--plasma-time-picker-textfield__content-right-color,var(--plasma-textfield-content-slot-color));--plasma-textfield-content-right-slot-color-hover:var(--plasma-time-picker-textfield__content-right-color-hover,var(--plasma-textfield-content-right-slot-color));}.TimePicker_styles_7l6ler_s1ghbm1p__7c9ab2c4.TimePicker_styles_7l6ler_plasmaTimePickerError__7c9ab2c4{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-error);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-error-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-error-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-error);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-error-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-error-focus);}.TimePicker_styles_7l6ler_s1ghbm1p__7c9ab2c4.TimePicker_styles_7l6ler_plasmaTimePickerSuccess__7c9ab2c4{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-success);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-success-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-success-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-success);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-success-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-success-focus);}
+.TimePicker_styles_7l6ler_b19h9m1x__7c9ab2c4{display:inline-block;width:var(--plasma-time-picker-width);}.TimePicker_styles_7l6ler_b19h9m1x__7c9ab2c4 .TimePicker_styles_7l6ler_popoverWrapper__7c9ab2c4,.TimePicker_styles_7l6ler_b19h9m1x__7c9ab2c4 .TimePicker_styles_7l6ler_popoverTarget__7c9ab2c4{width:inherit;}.TimePicker_styles_7l6ler_b19h9m1x__7c9ab2c4.TimePicker_styles_7l6ler_plasmaTimePickerStretched__7c9ab2c4{width:100%;}.TimePicker_styles_7l6ler_b19h9m1x__7c9ab2c4.TimePicker_styles_7l6ler_plasmaTimePickerStretched__7c9ab2c4 .TimePicker_styles_7l6ler_popoverRoot__7c9ab2c4{width:100%;}.TimePicker_styles_7l6ler_b19h9m1x__7c9ab2c4.TimePicker_styles_7l6ler_plasmaTimePickerFullWidth__7c9ab2c4{width:100%;}
+.TimePicker_styles_7l6ler_slnaiay__7c9ab2c4{background:var(--plasma-time-picker-ui-background);border-radius:var(--plasma-time-picker-ui-border-radius);width:var(--slnaiay-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:var(--plasma-time-picker-ui-padding);-webkit-flex:1 1 1;-ms-flex:1 1 1;flex:1 1 1;gap:var(--plasma-time-picker-scrollbar-width);box-sizing:border-box;position:relative;}
+.TimePicker_styles_7l6ler_sh0cawu__7c9ab2c4{height:var(--plasma-time-picker-item-height);padding:var(--plasma-time-picker-item-padding);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:0.05s;transition:0.05s;border-radius:var(--plasma-time-picker-item-border-radius);cursor:pointer;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow:auto;font-family:var(--plasma-time-picker-item-font-family);font-size:var(--plasma-time-picker-item-font-size);font-style:var(--plasma-time-picker-item-font-style);font-weight:var(--plasma-time-picker-item-font-weight);-webkit-letter-spacing:var(--plasma-time-picker-item-letter-spacing);-moz-letter-spacing:var(--plasma-time-picker-item-letter-spacing);-ms-letter-spacing:var(--plasma-time-picker-item-letter-spacing);letter-spacing:var(--plasma-time-picker-item-letter-spacing);line-height:var(--plasma-time-picker-item-line-height);}.TimePicker_styles_7l6ler_sh0cawu__7c9ab2c4:hover{background:var(--plasma-time-picker-item-hover-background);}.TimePicker_styles_7l6ler_sh0cawu__7c9ab2c4.TimePicker_styles_7l6ler_plasmaTimePickerItemActive__7c9ab2c4{background:var(--plasma-time-picker-item-active-background);}
+.TimePicker_styles_7l6ler_s15lrh1g__7c9ab2c4{max-height:var(--s15lrh1g-0);overflow-y:scroll;-webkit-flex:1;-ms-flex:1;flex:1;z-index:3;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-time-picker-scrollbar-width);width:100%;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;-ms-overflow-style:none;}.TimePicker_styles_7l6ler_s15lrh1g__7c9ab2c4.TimePicker_styles_7l6ler_plasmaTimePickerColumnActive__7c9ab2c4{border:0.125rem solid var(--plasma-time-picker-item-hover-background);border-radius:var(--plasma-time-picker-item-border-radius);}.TimePicker_styles_7l6ler_s15lrh1g__7c9ab2c4::-webkit-scrollbar{display:none;width:0;}
+.TimePicker_styles_7l6ler_c18qymw0__7c9ab2c4{position:absolute;top:var(--plasma-time-picker-scrollbar-margin);right:0;bottom:var(--plasma-time-picker-scrollbar-margin);width:var(--plasma-time-picker-scrollbar-width);opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;pointer-events:none;z-index:10;overflow:hidden;}.TimePicker_styles_7l6ler_c18qymw0__7c9ab2c4.TimePicker_styles_7l6ler_plasmaTimePickerScrollbarVisible__7c9ab2c4{opacity:1;pointer-events:auto;}
+.TimePicker_styles_7l6ler_s1wgh6jw__7c9ab2c4{position:relative;width:100%;height:100%;background:var(--plasma-time-picker-scrollbar-track-color);border-radius:var(--plasma-time-picker-scrollbar-width);}
+.TimePicker_styles_7l6ler_s1qrdw7l__7c9ab2c4{position:absolute;top:0;left:0;width:100%;background:var(--plasma-time-picker-scrollbar-color);border-radius:var(--plasma-time-picker-scrollbar-width);cursor:pointer;-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease;}.TimePicker_styles_7l6ler_s1qrdw7l__7c9ab2c4:hover{background:var(--plasma-time-picker-scrollbar-color);}.TimePicker_styles_7l6ler_s1qrdw7l__7c9ab2c4:active{background:var(--plasma-time-picker-scrollbar-track-color);}
+.TimePicker_styles_7l6ler_sa62th__7c9ab2c4{width:100%;height:0%.125rem;}
 
 .base_nyid0i_bxyi89k__8a89f178[disabled]{opacity:var(--plasma-time-picker-disabled-opacity);cursor:not-allowed;}
 

package/es/components/TimePicker/TimePicker.js

@@ -1,8 +1,8 @@
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
 import cls from 'classnames';
 import { range, animateScrollTo, processTimeInput } from './utils/index.js';
-import { StyledPopover, StyledTimePicker, base, StyledInput, StyledTimeColumn, StyledTimeItem } from './TimePicker.styles.js';
+import { StyledPopover, StyledTimePicker, base, StyledInput, StyledTimeColumn, StyledTimeItem, StyledEmpty, CustomScrollbar, ScrollbarTrack, ScrollbarThumb } from './TimePicker.styles.js';
 import { classes } from './TimePicker.tokens.js';
 import { base as base$2 } from './variations/_size/base.js';
 import { base as base$1 } from './variations/_view/base.js';
@@ -11,6 +11,7 @@ import { base as base$4 } from './variations/_readonly/base.js';
 import { useKeyNavigation } from './hooks/useKeyboardNavigation.js';
 import { getPlacements } from '../../utils/getPopoverPlacement.js';
 
+var _StyledEmpty;
 var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "disabled", "readonly", "frame", "usePortal", "closeOnOverlayClick", "closeOnEsc", "offset", "stretched", "dropdownAlign", "dropdownWidth", "dropdownHeight", "columnsQuantity", "onToggle", "onFocus", "onChange"];
 var timePickerRoot = function timePickerRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -65,6 +66,15 @@ var timePickerRoot = function timePickerRoot(Root) {
     var minutesColumnRef = useRef(null);
     var secondsColumnRef = useRef(null);
     var timeItemRefs = useRef({});
+    var hoursScrollbarRef = useRef(null);
+    var minutesScrollbarRef = useRef(null);
+    var secondsScrollbarRef = useRef(null);
+    var hoursThumbRef = useRef(null);
+    var minutesThumbRef = useRef(null);
+    var secondsThumbRef = useRef(null);
+    var hoursHideTimeoutRef = useRef(null);
+    var minutesHideTimeoutRef = useRef(null);
+    var secondsHideTimeoutRef = useRef(null);
     var _useState = useState(opened),
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
@@ -90,11 +100,156 @@ var timePickerRoot = function timePickerRoot(Root) {
       _useState10 = _slicedToArray(_useState9, 2),
       gap = _useState10[0],
       setGap = _useState10[1];
+    var _useState11 = useState({
+        isVisible: false,
+        thumbHeight: 0,
+        thumbPosition: 0,
+        isDragging: false
+      }),
+      _useState12 = _slicedToArray(_useState11, 2),
+      hoursScrollbar = _useState12[0],
+      setHoursScrollbar = _useState12[1];
+    var _useState13 = useState({
+        isVisible: false,
+        thumbHeight: 0,
+        thumbPosition: 0,
+        isDragging: false
+      }),
+      _useState14 = _slicedToArray(_useState13, 2),
+      minutesScrollbar = _useState14[0],
+      setMinutesScrollbar = _useState14[1];
+    var _useState15 = useState({
+        isVisible: false,
+        thumbHeight: 0,
+        thumbPosition: 0,
+        isDragging: false
+      }),
+      _useState16 = _slicedToArray(_useState15, 2),
+      secondsScrollbar = _useState16[0],
+      setSecondsScrollbar = _useState16[1];
     var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
     var format = columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm';
     var hours = range(24);
     var minutes = range(60);
     var seconds = range(60);
+    var calculateScrollbar = useCallback(function (columnRef) {
+      if (!columnRef.current) return {
+        thumbHeight: 0,
+        thumbPosition: 0
+      };
+      var _columnRef$current = columnRef.current,
+        scrollTop = _columnRef$current.scrollTop,
+        scrollHeight = _columnRef$current.scrollHeight,
+        clientHeight = _columnRef$current.clientHeight;
+      var trackHeight = clientHeight;
+      var thumbHeight = Math.max(trackHeight / scrollHeight * trackHeight, 20); // Минимальная высота 20px
+      var maxScroll = scrollHeight - clientHeight;
+      var thumbPosition = maxScroll > 0 ? scrollTop / maxScroll * (trackHeight - thumbHeight) : 0;
+      return {
+        thumbHeight: thumbHeight,
+        thumbPosition: thumbPosition
+      };
+    }, []);
+    var showScrollbarWithDelay = useCallback(function (setScrollbar, timeoutRef, columnRef) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      updateScrollbar(columnRef, setScrollbar, true);
+      timeoutRef.current = setTimeout(function () {
+        setScrollbar(function (prev) {
+          return _objectSpread2(_objectSpread2({}, prev), {}, {
+            isVisible: false
+          });
+        });
+        timeoutRef.current = null;
+      }, 2000);
+    }, []);
+    var updateScrollbar = useCallback(function (columnRef, setScrollbar) {
+      var show = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      if (!columnRef.current) return;
+      var _calculateScrollbar = calculateScrollbar(columnRef),
+        thumbHeight = _calculateScrollbar.thumbHeight,
+        thumbPosition = _calculateScrollbar.thumbPosition;
+      setScrollbar(function (prev) {
+        return _objectSpread2(_objectSpread2({}, prev), {}, {
+          thumbHeight: thumbHeight,
+          thumbPosition: thumbPosition,
+          isVisible: show || prev.isVisible
+        });
+      });
+    }, [calculateScrollbar]);
+    var handleColumnScroll = useCallback(function (columnRef, setScrollbar, timeoutRef) {
+      showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
+    }, [showScrollbarWithDelay]);
+    var createScrollbarDragHandler = useCallback(function (columnRef, setScrollbar, timeoutRef) {
+      return function (e) {
+        e.preventDefault();
+        var thumb = e.currentTarget;
+        var track = thumb.parentElement;
+        if (!columnRef.current || !track) return;
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
+        var startY = e.clientY;
+        var startThumbPosition = parseFloat(thumb.style.top || '0');
+        var trackRect = track.getBoundingClientRect();
+        var trackHeight = trackRect.height;
+        var thumbHeight = thumb.offsetHeight;
+        var _columnRef$current2 = columnRef.current,
+          scrollHeight = _columnRef$current2.scrollHeight,
+          clientHeight = _columnRef$current2.clientHeight;
+        var maxScroll = scrollHeight - clientHeight;
+        var handleMouseMove = function handleMouseMove(moveEvent) {
+          var deltaY = moveEvent.clientY - startY;
+          var newThumbPosition = Math.max(0, Math.min(trackHeight - thumbHeight, startThumbPosition + deltaY));
+          var scrollPercentage = newThumbPosition / (trackHeight - thumbHeight);
+          var newScrollTop = scrollPercentage * maxScroll;
+          if (columnRef.current) {
+            columnRef.current.scrollTop = newScrollTop;
+          }
+          setScrollbar(function (prev) {
+            return _objectSpread2(_objectSpread2({}, prev), {}, {
+              thumbPosition: newThumbPosition,
+              isDragging: true,
+              isVisible: true
+            });
+          });
+        };
+        var handleMouseUp = function handleMouseUp() {
+          document.removeEventListener('mousemove', handleMouseMove);
+          document.removeEventListener('mouseup', handleMouseUp);
+          setScrollbar(function (prev) {
+            return _objectSpread2(_objectSpread2({}, prev), {}, {
+              isDragging: false
+            });
+          });
+          showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+      };
+    }, [showScrollbarWithDelay]);
+    useEffect(function () {
+      return function () {
+        [hoursHideTimeoutRef, minutesHideTimeoutRef, secondsHideTimeoutRef].forEach(function (timeoutRef) {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+          }
+        });
+      };
+    }, []);
+    useEffect(function () {
+      if (isInnerOpen) {
+        setTimeout(function () {
+          updateScrollbar(hoursColumnRef, setHoursScrollbar);
+          updateScrollbar(minutesColumnRef, setMinutesScrollbar);
+          if (columnsQuantity === 3) {
+            updateScrollbar(secondsColumnRef, setSecondsScrollbar);
+          }
+        }, 100);
+      }
+    }, [isInnerOpen, columnsQuantity, updateScrollbar]);
     useEffect(function () {
       if (viewValue) {
         var timeString = viewValue;
@@ -139,12 +294,89 @@ var timePickerRoot = function timePickerRoot(Root) {
         if (columnRef.current && index !== null) {
           var scrollPosition = index * (itemHeight + gap);
           animateScrollTo(columnRef.current, scrollPosition);
+          setTimeout(function () {
+            if (columnRef === hoursColumnRef) {
+              updateScrollbar(hoursColumnRef, setHoursScrollbar);
+            } else if (columnRef === minutesColumnRef) {
+              updateScrollbar(minutesColumnRef, setMinutesScrollbar);
+            } else if (columnRef === secondsColumnRef) {
+              updateScrollbar(secondsColumnRef, setSecondsScrollbar);
+            }
+          }, 300);
         }
       };
       scrollToActiveItem(hoursColumnRef, activeTime.hours);
       scrollToActiveItem(minutesColumnRef, activeTime.minutes);
       scrollToActiveItem(secondsColumnRef, activeTime.seconds);
-    }, [activeTime, isInnerOpen, itemHeight]);
+    }, [activeTime, isInnerOpen, itemHeight, gap, updateScrollbar]);
+    useEffect(function () {
+      var hoursColumn = hoursColumnRef.current;
+      var minutesColumn = minutesColumnRef.current;
+      var secondsColumn = secondsColumnRef.current;
+      var handleHoursScroll = function handleHoursScroll() {
+        return handleColumnScroll(hoursColumnRef, setHoursScrollbar, hoursHideTimeoutRef);
+      };
+      var handleMinutesScroll = function handleMinutesScroll() {
+        return handleColumnScroll(minutesColumnRef, setMinutesScrollbar, minutesHideTimeoutRef);
+      };
+      var handleSecondsScroll = function handleSecondsScroll() {
+        return handleColumnScroll(secondsColumnRef, setSecondsScrollbar, secondsHideTimeoutRef);
+      };
+      if (hoursColumn) {
+        hoursColumn.addEventListener('scroll', handleHoursScroll);
+      }
+      if (minutesColumn) {
+        minutesColumn.addEventListener('scroll', handleMinutesScroll);
+      }
+      if (secondsColumn) {
+        secondsColumn.addEventListener('scroll', handleSecondsScroll);
+      }
+      return function () {
+        if (hoursColumn) {
+          hoursColumn.removeEventListener('scroll', handleHoursScroll);
+        }
+        if (minutesColumn) {
+          minutesColumn.removeEventListener('scroll', handleMinutesScroll);
+        }
+        if (secondsColumn) {
+          secondsColumn.removeEventListener('scroll', handleSecondsScroll);
+        }
+      };
+    }, [isInnerOpen, handleColumnScroll]);
+    useEffect(function () {
+      var hoursColumn = hoursColumnRef.current;
+      var minutesColumn = minutesColumnRef.current;
+      var secondsColumn = secondsColumnRef.current;
+      var handleHoursMouseEnter = function handleHoursMouseEnter() {
+        return showScrollbarWithDelay(setHoursScrollbar, hoursHideTimeoutRef, hoursColumnRef);
+      };
+      var handleMinutesMouseEnter = function handleMinutesMouseEnter() {
+        return showScrollbarWithDelay(setMinutesScrollbar, minutesHideTimeoutRef, minutesColumnRef);
+      };
+      var handleSecondsMouseEnter = function handleSecondsMouseEnter() {
+        return showScrollbarWithDelay(setSecondsScrollbar, secondsHideTimeoutRef, secondsColumnRef);
+      };
+      if (hoursColumn) {
+        hoursColumn.addEventListener('mouseenter', handleHoursMouseEnter);
+      }
+      if (minutesColumn) {
+        minutesColumn.addEventListener('mouseenter', handleMinutesMouseEnter);
+      }
+      if (secondsColumn) {
+        secondsColumn.addEventListener('mouseenter', handleSecondsMouseEnter);
+      }
+      return function () {
+        if (hoursColumn) {
+          hoursColumn.removeEventListener('mouseenter', handleHoursMouseEnter);
+        }
+        if (minutesColumn) {
+          minutesColumn.removeEventListener('mouseenter', handleMinutesMouseEnter);
+        }
+        if (secondsColumn) {
+          secondsColumn.removeEventListener('mouseenter', handleSecondsMouseEnter);
+        }
+      };
+    }, [isInnerOpen, showScrollbarWithDelay]);
     var handleToggle = function handleToggle() {
       if (disabled || readonly) return;
       var newState = !isInnerOpen;
@@ -375,11 +607,17 @@ var timePickerRoot = function timePickerRoot(Root) {
       labelPlacement: labelPlacement,
       keepPlaceholder: keepPlaceholder
     });
-    var renderTimeColumn = function renderTimeColumn(values, column, columnRef) {
-      return /*#__PURE__*/React.createElement(StyledTimeColumn, {
+    var renderTimeColumn = function renderTimeColumn(values, column, columnRef, scrollbarState, setScrollbar, scrollbarRef, thumbRef, timeoutRef) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          position: 'relative',
+          width: '100%'
+        }
+      }, /*#__PURE__*/React.createElement(StyledTimeColumn, {
         key: column,
         ref: columnRef,
-        height: dropdownHeight
+        height: dropdownHeight,
+        className: classes.timeColumn
       }, values.map(function (value, index) {
         return /*#__PURE__*/React.createElement(StyledTimeItem, {
           key: value,
@@ -394,7 +632,17 @@ var timePickerRoot = function timePickerRoot(Root) {
             return handleTimeItemKeyDown(e, column, value);
           }
         }, value);
-      }));
+      }), _StyledEmpty || (_StyledEmpty = /*#__PURE__*/React.createElement(StyledEmpty, null))), /*#__PURE__*/React.createElement(CustomScrollbar, {
+        ref: scrollbarRef,
+        className: cls(_defineProperty({}, classes.scrollbarVisible, scrollbarState.isVisible))
+      }, /*#__PURE__*/React.createElement(ScrollbarTrack, null, /*#__PURE__*/React.createElement(ScrollbarThumb, {
+        ref: thumbRef,
+        style: {
+          height: "".concat(scrollbarState.thumbHeight, "px"),
+          top: "".concat(scrollbarState.thumbPosition, "px")
+        },
+        onMouseDown: createScrollbarDragHandler(columnRef, setScrollbar, timeoutRef)
+      }))));
     };
     return /*#__PURE__*/React.createElement(Root, _extends({
       stretched: stretched,
@@ -427,7 +675,7 @@ var timePickerRoot = function timePickerRoot(Root) {
       stretched: stretched
     }, /*#__PURE__*/React.createElement(StyledTimePicker, {
       width: dropdownWidth
-    }, renderTimeColumn(hours, 'hours', hoursColumnRef), renderTimeColumn(minutes, 'minutes', minutesColumnRef), columnsQuantity === 3 && renderTimeColumn(seconds, 'seconds', secondsColumnRef)))));
+    }, renderTimeColumn(hours, 'hours', hoursColumnRef, hoursScrollbar, setHoursScrollbar, hoursScrollbarRef, hoursThumbRef, hoursHideTimeoutRef), renderTimeColumn(minutes, 'minutes', minutesColumnRef, minutesScrollbar, setMinutesScrollbar, minutesScrollbarRef, minutesThumbRef, minutesHideTimeoutRef), columnsQuantity === 3 && renderTimeColumn(seconds, 'seconds', secondsColumnRef, secondsScrollbar, setSecondsScrollbar, secondsScrollbarRef, secondsThumbRef, secondsHideTimeoutRef)))));
   });
 };
 var timePickerConfig = {