@salutejs/plasma-new-hope 0.339.0-canary.2299.18773440976.0 → 0.339.0-canary.2299.18840379933.0

package/es/components/TimePicker/TimePicker.css

@@ -77,19 +77,23 @@
 .Popover_styles_ji8em4_s1pd4d8a__439b9cc0{width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);}.Popover_styles_ji8em4_s1pd4d8a__439b9cc0::before{position:absolute;width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);-webkit-mask-image:var(--plasma-popover-arrow-mask-image);mask-image:var(--plasma-popover-arrow-mask-image);background:var(--plasma-popover-arrow-background);content:'';-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
 .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;}
 
+.TimePickerGrid_styles_mz2mkl_b1gxyazn__68be6be3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:10rem;}
+.TimePickerGrid_styles_mz2mkl_s5pkh4__68be6be3{background:var(--plasma-time-picker-grid-grid-background);border-radius:var(--plasma-time-picker-grid-grid-border-radius);width:var(--s5pkh4-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:var(--plasma-time-picker-grid-grid-padding);-webkit-flex:1 1 1;-ms-flex:1 1 1;flex:1 1 1;gap:var(--plasma-time-picker-grid-scrollbar-width);box-sizing:border-box;position:relative;height:var(--plasma-time-picker-grid-column-height);}
 
-.TimePicker_styles_ar3obv_s1ghbm1p__3866631e{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-box-shadow:var(--plasma-time-picker-textfield-box-shadow);--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_ar3obv_s1ghbm1p__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerError__3866631e{--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_ar3obv_s1ghbm1p__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerSuccess__3866631e{--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_ar3obv_b19h9m1x__3866631e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:var(--plasma-time-picker-width);margin-top:var(--plasma-time-picker-dropdown-margin-top);}.TimePicker_styles_ar3obv_b19h9m1x__3866631e .TimePicker_styles_ar3obv_popoverWrapper__3866631e,.TimePicker_styles_ar3obv_b19h9m1x__3866631e .TimePicker_styles_ar3obv_popoverTarget__3866631e{width:inherit;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerStretched__3866631e{width:100%;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerStretched__3866631e .TimePicker_styles_ar3obv_popoverRoot__3866631e{width:100%;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerFullWidth__3866631e{width:100%;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerPlacementRight__3866631e{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}
-.TimePicker_styles_ar3obv_slnaiay__3866631e{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;}
+.TimeColumn_styles_1nwjzgi_s1gom5ty__3e50ba9a{position:relative;width:100%;}
+.TimeColumn_styles_1nwjzgi_s1qroyi1__3e50ba9a{height:var(--plasma-time-picker-grid-item-height);padding:var(--plasma-time-picker-grid-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-grid-item-border-radius);cursor:pointer;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow:auto;font-family:var(--plasma-time-picker-grid-item-font-family);font-size:var(--plasma-time-picker-grid-item-font-size);font-style:var(--plasma-time-picker-grid-item-font-style);font-weight:var(--plasma-time-picker-grid-item-font-weight);-webkit-letter-spacing:var(--plasma-time-picker-grid-item-letter-spacing);-moz-letter-spacing:var(--plasma-time-picker-grid-item-letter-spacing);-ms-letter-spacing:var(--plasma-time-picker-grid-item-letter-spacing);letter-spacing:var(--plasma-time-picker-grid-item-letter-spacing);line-height:var(--plasma-time-picker-grid-item-line-height);}.TimeColumn_styles_1nwjzgi_s1qroyi1__3e50ba9a:hover{background:var(--plasma-time-picker-grid-item-hover-background);}.TimeColumn_styles_1nwjzgi_s1qroyi1__3e50ba9a.TimeColumn_styles_1nwjzgi__PlasmaTimePickerGridItemActive__3e50ba9a{background:var(--plasma-time-picker-grid-item-active-background);}.TimeColumn_styles_1nwjzgi_s1qroyi1__3e50ba9a.TimeColumn_styles_1nwjzgi__PlasmaTimePickerGridItemDisabled__3e50ba9a{cursor:not-allowed;opacity:var(--plasma-time-picker-grid-disabled-opacity);}
+.TimeColumn_styles_1nwjzgi_s1jwci1h__3e50ba9a{max-height:var(--s1jwci1h-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-grid-scrollbar-width);width:100%;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;-ms-overflow-style:none;}.TimeColumn_styles_1nwjzgi_s1jwci1h__3e50ba9a.TimeColumn_styles_1nwjzgi__PlasmaTimePickerGridColumnActive__3e50ba9a{border:0.125rem solid var(--plasma-time-picker-grid-item-hover-background);border-radius:var(--plasma-time-picker-grid-item-border-radius);}.TimeColumn_styles_1nwjzgi_s1jwci1h__3e50ba9a::-webkit-scrollbar{display:none;width:0;}
+.TimeColumn_styles_1nwjzgi_csx57j8__3e50ba9a{position:absolute;top:var(--plasma-time-picker-grid-scrollbar-margin);right:0;bottom:var(--plasma-time-picker-grid-scrollbar-margin);width:var(--plasma-time-picker-grid-scrollbar-width);opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;pointer-events:none;z-index:10;overflow:hidden;}.TimeColumn_styles_1nwjzgi_csx57j8__3e50ba9a.TimeColumn_styles_1nwjzgi__PlasmaTimePickerGridScrollbarVisible__3e50ba9a{opacity:1;pointer-events:auto;}
+.TimeColumn_styles_1nwjzgi_s1dh0qqv__3e50ba9a{position:relative;width:100%;height:100%;background:var(--plasma-time-picker-grid-scrollbar-track-color);border-radius:var(--plasma-time-picker-grid-scrollbar-width);}
+.TimeColumn_styles_1nwjzgi_s1h9xdi8__3e50ba9a{position:absolute;top:0;left:0;width:100%;background:var(--plasma-time-picker-grid-scrollbar-color);border-radius:var(--plasma-time-picker-grid-scrollbar-width);cursor:pointer;-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease;}.TimeColumn_styles_1nwjzgi_s1h9xdi8__3e50ba9a:hover{background:var(--plasma-time-picker-grid-scrollbar-color);}.TimeColumn_styles_1nwjzgi_s1h9xdi8__3e50ba9a:active{background:var(--plasma-time-picker-grid-scrollbar-track-color);}
+.TimeColumn_styles_1nwjzgi_s1dt15pt__3e50ba9a{width:100%;height:0%.125rem;}
+
+
+.TimePicker_styles_2lk4d9_s1ghbm1p__1d709ac3{--plasma-time-picker-grid-grid-background:var(--plasma-time-picker-ui-background);--plasma-time-picker-grid-grid-border-radius:var(--plasma-time-picker-ui-border-radius);--plasma-time-picker-grid-grid-width:var(--plasma-time-picker-ui-width);--plasma-time-picker-grid-grid-padding:var(--plasma-time-picker-ui-padding);--plasma-time-picker-grid-disabled-opacity:var(--plasma-time-picker-disabled-opacity);--plasma-time-picker-grid-column-height:var(--plasma-time-picker-column-height);--plasma-time-picker-grid-item-height:var(--plasma-time-picker-item-height);--plasma-time-picker-grid-item-border-radius:var(--plasma-time-picker-item-border-radius);--plasma-time-picker-grid-item-padding:var(--plasma-time-picker-item-padding);--plasma-time-picker-grid-item-hover-background:var(--plasma-time-picker-item-hover-background);--plasma-time-picker-grid-item-active-background:var(--plasma-time-picker-item-active-background);--plasma-time-picker-grid-item-font-family:var(--plasma-time-picker-item-font-family);--plasma-time-picker-grid-item-font-size:var(--plasma-time-picker-item-font-size);--plasma-time-picker-grid-item-font-style:var(--plasma-time-picker-item-font-style);--plasma-time-picker-grid-item-font-weight:var(--plasma-time-picker-item-font-weight);--plasma-time-picker-grid-item-letter-spacing:var(--plasma-time-picker-item-letter-spacing);--plasma-time-picker-grid-item-line-height:var(--plasma-time-picker-item-line-height);--plasma-time-picker-grid-scrollbar-width:var(--plasma-time-picker-scrollbar-width);--plasma-time-picker-grid-scrollbar-color:var(--plasma-time-picker-scrollbar-color);--plasma-time-picker-grid-scrollbar-track-color:var(--plasma-time-picker-scrollbar-track-color);--plasma-time-picker-grid-scrollbar-margin:var(--plasma-time-picker-scrollbar-margin);}
+.TimePicker_styles_2lk4d9_s19h9m1x__1d709ac3{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-box-shadow:var(--plasma-time-picker-textfield-box-shadow);--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_2lk4d9_s19h9m1x__1d709ac3.TimePicker_styles_2lk4d9_plasmaTimePickerError__1d709ac3{--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_2lk4d9_s19h9m1x__1d709ac3.TimePicker_styles_2lk4d9_plasmaTimePickerSuccess__1d709ac3{--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_2lk4d9_blnaiay__1d709ac3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:var(--plasma-time-picker-width);margin-top:var(--plasma-time-picker-dropdown-margin-top);}.TimePicker_styles_2lk4d9_blnaiay__1d709ac3 .TimePicker_styles_2lk4d9_popoverWrapper__1d709ac3,.TimePicker_styles_2lk4d9_blnaiay__1d709ac3 .TimePicker_styles_2lk4d9_popoverTarget__1d709ac3{width:inherit;}.TimePicker_styles_2lk4d9_blnaiay__1d709ac3.TimePicker_styles_2lk4d9_plasmaTimePickerStretched__1d709ac3{width:100%;}.TimePicker_styles_2lk4d9_blnaiay__1d709ac3.TimePicker_styles_2lk4d9_plasmaTimePickerStretched__1d709ac3 .TimePicker_styles_2lk4d9_popoverRoot__1d709ac3{width:100%;}.TimePicker_styles_2lk4d9_blnaiay__1d709ac3.TimePicker_styles_2lk4d9_plasmaTimePickerFullWidth__1d709ac3{width:100%;}.TimePicker_styles_2lk4d9_blnaiay__1d709ac3.TimePicker_styles_2lk4d9_plasmaTimePickerPlacementRight__1d709ac3{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}
+.TimePicker_styles_2lk4d9_sh0cawu__1d709ac3{background:var(--plasma-time-picker-ui-background);border-radius:var(--plasma-time-picker-ui-border-radius);width:var(--sh0cawu-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;}
 
 .base_nyid0i_bxyi89k__8a89f178[disabled]{opacity:var(--plasma-time-picker-disabled-opacity);cursor:not-allowed;}
 
 .base_zalfas_b13m44ib__f47929ae[readonly]{cursor:not-allowed;}
-
-.TimeColumn_styles_juymyb_s1okclyy__820070c4{position:relative;width:100%;}
-.TimeColumn_styles_juymyb_s14v4skc__820070c4{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);}.TimeColumn_styles_juymyb_s14v4skc__820070c4:hover{background:var(--plasma-time-picker-item-hover-background);}.TimeColumn_styles_juymyb_s14v4skc__820070c4.TimeColumn_styles_juymyb_plasmaTimePickerItemActive__820070c4{background:var(--plasma-time-picker-item-active-background);}
-.TimeColumn_styles_juymyb_s1mtrybc__820070c4{max-height:var(--s1mtrybc-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;}.TimeColumn_styles_juymyb_s1mtrybc__820070c4.TimeColumn_styles_juymyb_plasmaTimePickerColumnActive__820070c4{border:0.125rem solid var(--plasma-time-picker-item-hover-background);border-radius:var(--plasma-time-picker-item-border-radius);}.TimeColumn_styles_juymyb_s1mtrybc__820070c4::-webkit-scrollbar{display:none;width:0;}
-.TimeColumn_styles_juymyb_c3ksbzv__820070c4{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;}.TimeColumn_styles_juymyb_c3ksbzv__820070c4.TimeColumn_styles_juymyb_plasmaTimePickerScrollbarVisible__820070c4{opacity:1;pointer-events:auto;}
-.TimeColumn_styles_juymyb_s13lzs6z__820070c4{position:relative;width:100%;height:100%;background:var(--plasma-time-picker-scrollbar-track-color);border-radius:var(--plasma-time-picker-scrollbar-width);}
-.TimeColumn_styles_juymyb_svmgxvm__820070c4{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;}.TimeColumn_styles_juymyb_svmgxvm__820070c4:hover{background:var(--plasma-time-picker-scrollbar-color);}.TimeColumn_styles_juymyb_svmgxvm__820070c4:active{background:var(--plasma-time-picker-scrollbar-track-color);}
-.TimeColumn_styles_juymyb_s1bw3c91__820070c4{width:100%;height:0%.125rem;}

package/es/components/TimePicker/TimePicker.js

@@ -1,15 +1,14 @@
-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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import cls from 'classnames';
-import { range, delimiter, animateScrollTo, processTimeInput } from './utils/index.js';
-import { StyledPopover, StyledTimePicker, base, StyledInput } from './TimePicker.styles.js';
+import { delimiter, processTimeInput } from './utils/index.js';
+import { StyledPopover, StyledTimePickerGrid, base, StyledInput } 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';
 import { base as base$3 } from './variations/_disabled/base.js';
 import { base as base$4 } from './variations/_readonly/base.js';
 import { useKeyNavigation } from './hooks/useKeyboardNavigation.js';
-import { renderTimeColumn } from './ui/TimeColumn/TimeColumn.js';
 import { getPlacements } from '../../utils/getPopoverPlacement.js';
 
 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"];
@@ -61,17 +60,6 @@ var timePickerRoot = function timePickerRoot(Root) {
       onChange = _ref.onChange,
       rest = _objectWithoutProperties(_ref, _excluded);
     var inputRef = useRef(null);
-    var timeSelectRootRef = useRef(null);
-    var hoursColumnRef = useRef(null);
-    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);
@@ -90,147 +78,9 @@ var timePickerRoot = function timePickerRoot(Root) {
         currentColumn: null
       }),
       _useState6 = _slicedToArray(_useState5, 2),
-      activeTime = _useState6[0],
       setActiveTime = _useState6[1];
-    var _useState7 = useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      itemHeight = _useState8[0],
-      setItemHeight = _useState8[1];
-    var _useState9 = useState(0),
-      _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 minScrollbarTrackHeight = 20;
-    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, minScrollbarTrackHeight);
-      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) {
@@ -240,18 +90,6 @@ var timePickerRoot = function timePickerRoot(Root) {
         });
       };
     }, []);
-    useEffect(function () {
-      if (!isInnerOpen) {
-        return;
-      }
-      setTimeout(function () {
-        updateScrollbar(hoursColumnRef, setHoursScrollbar);
-        updateScrollbar(minutesColumnRef, setMinutesScrollbar);
-        if (columnsQuantity === 3) {
-          updateScrollbar(secondsColumnRef, setSecondsScrollbar);
-        }
-      }, 100);
-    }, [isInnerOpen, columnsQuantity, updateScrollbar]);
     useEffect(function () {
       if (!viewValue) {
         return;
@@ -278,102 +116,6 @@ var timePickerRoot = function timePickerRoot(Root) {
         setIsInnerOpen(false);
       }
     }, [disabled, readonly]);
-    useEffect(function () {
-      if (isInnerOpen && Object.keys(timeItemRefs.current).length > 0) {
-        var firstItem = Object.values(timeItemRefs.current)[0];
-        if (firstItem) {
-          setItemHeight(firstItem.offsetHeight);
-        }
-      }
-      if (isInnerOpen && hoursColumnRef.current) {
-        var computedStyle = getComputedStyle(hoursColumnRef.current);
-        var gapValue = parseFloat(computedStyle.gap || '0');
-        setGap(gapValue);
-      }
-    }, [isInnerOpen]);
-    useEffect(function () {
-      if (!isInnerOpen || itemHeight === 0) return;
-      var scrollToActiveItem = function scrollToActiveItem(columnRef, index) {
-        if (columnRef.current && index !== null) {
-          var scrollPosition = index * (itemHeight + gap);
-          animateScrollTo(columnRef.current, scrollPosition);
-          setTimeout(function () {
-            updateScrollbar(columnRef, setHoursScrollbar);
-          }, 300);
-        }
-      };
-      scrollToActiveItem(hoursColumnRef, activeTime.hours);
-      scrollToActiveItem(minutesColumnRef, activeTime.minutes);
-      scrollToActiveItem(secondsColumnRef, activeTime.seconds);
-    }, [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;
@@ -387,85 +129,23 @@ var timePickerRoot = function timePickerRoot(Root) {
       }
       onToggle === null || onToggle === void 0 || onToggle(newState);
     };
-    var handleCalendarRootClick = function handleCalendarRootClick(event) {
-      if (disabled || readonly) return;
-      if (isInnerOpen && stretched && event.target === (timeSelectRootRef === null || timeSelectRootRef === void 0 ? void 0 : timeSelectRootRef.current)) {
-        setIsInnerOpen(false);
-        onToggle === null || onToggle === void 0 || onToggle(false);
-      }
-    };
-    var handleTimeItemClick = function handleTimeItemClick(value, column) {
-      var isNextColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var currentTime = innerTime.split(delimiter);
-      var newTime = [];
-      if (format === 'HH:mm:ss') {
-        newTime = _toConsumableArray(currentTime);
-        while (newTime.length < 3) {
-          newTime.push('00');
-        }
-      } else {
-        newTime = _toConsumableArray(currentTime);
-        while (newTime.length < 2) {
-          newTime.push('00');
-        }
-        newTime = newTime.slice(0, 2);
-      }
-      switch (column) {
-        case 'hours':
-          newTime[0] = value;
-          if (!currentTime[1]) {
-            newTime[1] = '00';
-          }
-          if (format === 'HH:mm:ss' && !currentTime[2]) {
-            newTime[2] = '00';
-          }
-          break;
-        case 'minutes':
-          newTime[1] = value;
-          if (!currentTime[0]) {
-            newTime[0] = '00';
-          }
-          if (format === 'HH:mm:ss' && !currentTime[2]) {
-            newTime[2] = '00';
-          }
-          break;
-        case 'seconds':
-          if (format === 'HH:mm:ss') {
-            newTime[2] = value;
-            if (!currentTime[0]) {
-              newTime[0] = '00';
-            }
-            if (!currentTime[1]) {
-              newTime[1] = '00';
-            }
-          }
-          break;
+    var handleOnChange = function handleOnChange(event) {
+      var _timeString;
+      if (!event) {
+        return;
       }
-      var newTimeString = newTime.join(delimiter);
-      setInnerTime(newTimeString);
-      var nextColumn = null;
-      if (column === 'hours' && isNextColumn) {
-        nextColumn = 'minutes';
-      } else if (column === 'minutes' && isNextColumn) {
-        nextColumn = format === 'HH:mm:ss' ? 'seconds' : null;
-      } else {
-        nextColumn = activeTime.currentColumn;
+      var timeString = event.value;
+      if (format === 'HH:mm' && viewValue.length > 5) {
+        timeString = viewValue.substring(0, 5);
       }
-      var newActiveTime = {
-        hours: column === 'hours' ? parseInt(value, 10) : activeTime.hours,
-        minutes: column === 'minutes' ? parseInt(value, 10) : activeTime.minutes,
-        seconds: column === 'seconds' ? parseInt(value, 10) : activeTime.seconds,
-        currentColumn: nextColumn
-      };
-      setActiveTime(newActiveTime);
-      onChange === null || onChange === void 0 || onChange({
-        value: newTimeString,
-        timeValues: {
-          hh: parseInt(newTime[0], 10),
-          mm: parseInt(newTime[1], 10),
-          ss: format === 'HH:mm:ss' ? parseInt(newTime[2] || '0', 10) : null
-        }
+      setInnerTime((_timeString = timeString) !== null && _timeString !== void 0 ? _timeString : '');
+      setActiveTime({
+        hours: !Number.isNaN(event.timeValues.hour) ? event.timeValues.hour : null,
+        minutes: !Number.isNaN(event.timeValues.minute) ? event.timeValues.minute : null,
+        seconds: format === 'HH:mm:ss' && !Number.isNaN(event.timeValues.second) ? event.timeValues.second : null,
+        currentColumn: null
       });
+      onChange === null || onChange === void 0 || onChange(event);
     };
     var handleInputChange = function handleInputChange(event) {
       var input = event.target.value;
@@ -497,7 +177,6 @@ var timePickerRoot = function timePickerRoot(Root) {
       });
     };
     var handleKeyDown = function handleKeyDown(event) {
-      var _activeTime$currentCo, _activeTime$currentCo2, _activeTime$newColumn, _activeTime$newColumn2;
       if (event.key === 'Enter' && !isInnerOpen) {
         event.preventDefault();
         setIsInnerOpen(true);
@@ -507,74 +186,6 @@ var timePickerRoot = function timePickerRoot(Root) {
           });
         });
         onToggle === null || onToggle === void 0 || onToggle(true);
-        return;
-      }
-      if (!isInnerOpen) {
-        return;
-      }
-      var currentColumn = activeTime.currentColumn;
-      if (!currentColumn) {
-        return;
-      }
-      var newIndex = null;
-      var newColumn = currentColumn;
-      if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
-        event.preventDefault();
-      }
-      if (['ArrowRight'].includes(event.key) && currentColumn !== 'seconds') {
-        event.preventDefault();
-      }
-      if (['ArrowLeft'].includes(event.key) && currentColumn !== 'hours') {
-        event.preventDefault();
-      }
-      switch (event.key) {
-        case 'ArrowUp':
-          newIndex = Math.max(0, ((_activeTime$currentCo = activeTime[currentColumn]) !== null && _activeTime$currentCo !== void 0 ? _activeTime$currentCo : 0) - 1);
-          if (newIndex !== null) {
-            var value = newIndex.toString().padStart(2, '0');
-            handleTimeItemClick(value, currentColumn, false);
-          }
-          break;
-        case 'ArrowDown':
-        case 'Tab':
-          event.preventDefault();
-          newIndex = Math.min(currentColumn === 'hours' ? 23 : 59, ((_activeTime$currentCo2 = activeTime[currentColumn]) !== null && _activeTime$currentCo2 !== void 0 ? _activeTime$currentCo2 : 0) + 1);
-          if (newIndex !== null) {
-            var _value = newIndex.toString().padStart(2, '0');
-            handleTimeItemClick(_value, currentColumn, false);
-          }
-          break;
-        case 'ArrowRight':
-        case 'Enter':
-          if (currentColumn === 'hours') newColumn = 'minutes';else if (currentColumn === 'minutes' && format === 'HH:mm:ss') newColumn = 'seconds';
-          newIndex = (_activeTime$newColumn = activeTime[newColumn]) !== null && _activeTime$newColumn !== void 0 ? _activeTime$newColumn : 0;
-          setActiveTime(_objectSpread2(_objectSpread2({}, activeTime), {}, _defineProperty({
-            currentColumn: newColumn
-          }, newColumn, newIndex)));
-          if (currentColumn === 'seconds' && format === 'HH:mm:ss' || currentColumn === 'minutes' && format === 'HH:mm') {
-            setIsInnerOpen(false);
-          }
-          break;
-        case 'ArrowLeft':
-          if (currentColumn === 'minutes') {
-            newColumn = 'hours';
-          } else if (currentColumn === 'seconds') {
-            newColumn = 'minutes';
-          }
-          newIndex = (_activeTime$newColumn2 = activeTime[newColumn]) !== null && _activeTime$newColumn2 !== void 0 ? _activeTime$newColumn2 : 0;
-          setActiveTime(_objectSpread2(_objectSpread2({}, activeTime), {}, _defineProperty({
-            currentColumn: newColumn
-          }, newColumn, newIndex)));
-          if (currentColumn === 'hours') {
-            setIsInnerOpen(false);
-          }
-          break;
-      }
-    };
-    var handleTimeItemKeyDown = function handleTimeItemKeyDown(event, column, value) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        handleTimeItemClick(value, column);
       }
     };
     var handleOnKeyDown = function handleOnKeyDown(e) {
@@ -632,63 +243,16 @@ var timePickerRoot = function timePickerRoot(Root) {
       target: TimePickerInput,
       preventOverflow: false,
       align: dropdownAlign
-    }, /*#__PURE__*/React.createElement(Root, {
-      ref: timeSelectRootRef,
+    }, /*#__PURE__*/React.createElement(StyledTimePickerGrid, {
+      value: viewValue,
+      onChange: handleOnChange,
+      dropdownHeight: dropdownHeight,
+      dropdownWidth: dropdownWidth,
+      format: format,
       view: view,
       size: size,
-      disabled: disabled,
-      readonly: readonly,
-      onClick: handleCalendarRootClick,
-      className: dropdownAlign === 'right' ? classes.timePickerPlacementRight : '',
-      stretched: stretched
-    }, /*#__PURE__*/React.createElement(StyledTimePicker, {
-      width: dropdownWidth
-    }, renderTimeColumn({
-      values: hours,
-      dropdownHeight: dropdownHeight,
-      column: 'hours',
-      columnRef: hoursColumnRef,
-      scrollbarState: hoursScrollbar,
-      setScrollbar: setHoursScrollbar,
-      scrollbarRef: hoursScrollbarRef,
-      thumbRef: hoursThumbRef,
-      timeoutRef: hoursHideTimeoutRef,
-      timeItemRefs: timeItemRefs,
-      activeTime: activeTime,
-      handleTimeItemClick: handleTimeItemClick,
-      handleTimeItemKeyDown: handleTimeItemKeyDown,
-      createScrollbarDragHandler: createScrollbarDragHandler
-    }), renderTimeColumn({
-      values: minutes,
-      dropdownHeight: dropdownHeight,
-      column: 'minutes',
-      columnRef: minutesColumnRef,
-      scrollbarState: minutesScrollbar,
-      setScrollbar: setMinutesScrollbar,
-      scrollbarRef: minutesScrollbarRef,
-      thumbRef: minutesThumbRef,
-      timeoutRef: minutesHideTimeoutRef,
-      timeItemRefs: timeItemRefs,
-      activeTime: activeTime,
-      handleTimeItemClick: handleTimeItemClick,
-      handleTimeItemKeyDown: handleTimeItemKeyDown,
-      createScrollbarDragHandler: createScrollbarDragHandler
-    }), columnsQuantity === 3 && renderTimeColumn({
-      values: seconds,
-      dropdownHeight: dropdownHeight,
-      column: 'seconds',
-      columnRef: secondsColumnRef,
-      scrollbarState: secondsScrollbar,
-      setScrollbar: setSecondsScrollbar,
-      scrollbarRef: secondsScrollbarRef,
-      thumbRef: secondsThumbRef,
-      timeoutRef: secondsHideTimeoutRef,
-      timeItemRefs: timeItemRefs,
-      activeTime: activeTime,
-      handleTimeItemClick: handleTimeItemClick,
-      handleTimeItemKeyDown: handleTimeItemKeyDown,
-      createScrollbarDragHandler: createScrollbarDragHandler
-    })))));
+      disabled: disabled
+    })));
   });
 };
 var timePickerConfig = {