@salutejs/plasma-new-hope 0.185.1-canary.32.11719082166.0 → 0.186.0-canary.1511.11718939010.0

package/es/index.css

@@ -807,3 +807,26 @@
 .IconButton_styles_1q2jfs2_shuaj1a__7aea03a6{--plasma-icon-button-color:var(--plasma-attach-icon-button-cancel-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-cancel-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-cancel-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-cancel-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-cancel-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-cancel-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-cancel-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-cancel-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-cancel-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-cancel-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-cancel-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-cancel-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-cancel-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-cancel-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-cancel-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-cancel-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-cancel-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-cancel-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-cancel-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-cancel-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-cancel-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-cancel-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-cancel-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-cancel-spinner-size);}
 
 .ViewContainer_yiqfcb_bemjbnt__5b2a6776{position:relative;}
+
+.Input_styles_fhgb95_i1s8bsh6__3bed5c8f{overflow-x:auto;overflow-y:hidden;-webkit-flex:1;-ms-flex:1;flex:1;cursor:var(--i1s8bsh6-0);-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.Input_styles_fhgb95_i1s8bsh6__3bed5c8f::-webkit-scrollbar{display:none;}
+.Input_styles_fhgb95_t6wb9c__3bed5c8f{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-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;box-sizing:border-box;}
+
+
+
+.Input_styles_fhgb95_d1n4jo6t__3bed5c8f{position:relative;}
+.Input_styles_fhgb95_i1tgbhg7__3bed5c8f{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:var(--i1tgbhg7-0);box-sizing:border-box;cursor:var(--i1tgbhg7-1);pointer-events:var(--i1tgbhg7-2);-webkit-transition:width 0.1s;transition:width 0.1s;}
+.Input_styles_fhgb95_i1il5xze__3bed5c8f{position:absolute;z-index:-999;visibility:hidden;top:0;left:0;opacity:0;height:0;white-space:pre;}
+
+.NumberInput_styles_jeawjl_bwds6g__9a871afb{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;}
+
+.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_sj0ab1b__884e17c8{--plasma-icon-button-color:var(--plasma-number-input_icon-button_color);--plasma-icon-button-background-color:var(--plasma-number-input_icon-button_background-color);--plasma-icon-button-color-hover:var(--plasma-number-input_icon-button_color-hover);--plasma-icon-button-background-color-hover:var(--plasma-number-input_icon-button_background-color-hover);--plasma-icon-button-color-active:var(--plasma-number-input_icon-button_color-active);--plasma-icon-button-background-color-active:var(--plasma-number-input_icon-button_background-color-active);}.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_sj0ab1b__884e17c8.base_tnfbb5_actionButtonDecrementDisabled__884e17c8,.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_sj0ab1b__884e17c8.base_tnfbb5_actionButtonIncrementDisabled__884e17c8{opacity:var(--plasma-number-input_action-button_disabled-opacity);cursor:not-allowed;}.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_sj0ab1b__884e17c8.base_tnfbb5_actionButtonDecrementDisabled__884e17c8:hover,.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_sj0ab1b__884e17c8.base_tnfbb5_actionButtonIncrementDisabled__884e17c8:hover,.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_sj0ab1b__884e17c8.base_tnfbb5_actionButtonDecrementDisabled__884e17c8:active,.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_sj0ab1b__884e17c8.base_tnfbb5_actionButtonIncrementDisabled__884e17c8:active{scale:none;color:var(--plasma-number-input_icon-button_color);background-color:var(--plasma-number-input_icon-button_background-color);}.base_tnfbb5_bhi37xj__884e17c8.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_i1s8bsh6__884e17c8.base_tnfbb5_manualInputNumberInput__884e17c8:focus-within{background-color:var(--plasma-number-input_background-color-focus);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border-color-focus);}.base_tnfbb5_bhi37xj__884e17c8.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_i1s8bsh6__884e17c8.base_tnfbb5_manualInputNumberInput__884e17c8.base_tnfbb5_errorAnimation__884e17c8{background-color:var(--plasma-number-input_background_error-color);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border_error-color);-webkit-animation:base_tnfbb5_shakingErrorBhi37xj__884e17c8 0.3s forwards;animation:base_tnfbb5_shakingErrorBhi37xj__884e17c8 0.3s forwards;}.base_tnfbb5_bhi37xj__884e17c8.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_i1s8bsh6__884e17c8.base_tnfbb5_manualInputNumberInput__884e17c8.base_tnfbb5_errorAnimation__884e17c8 .base_tnfbb5_i1tgbhg7__884e17c8{color:var(--plasma-number-input_error-color);-webkit-animation:base_tnfbb5_fadeErrorBhi37xj__884e17c8 0.3s forwards;animation:base_tnfbb5_fadeErrorBhi37xj__884e17c8 0.3s forwards;}.base_tnfbb5_bhi37xj__884e17c8.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_i1s8bsh6__884e17c8.base_tnfbb5_manualInputNumberInput__884e17c8.base_tnfbb5_errorAnimation__884e17c8:focus-within{background-color:var(--plasma-number-input_background_error-color);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border_error-color);}@-webkit-keyframes base_tnfbb5_shakingErrorBhi37xj__884e17c8{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@keyframes base_tnfbb5_shakingErrorBhi37xj__884e17c8{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@-webkit-keyframes base_tnfbb5_fadeErrorBhi37xj__884e17c8{50%{opacity:1;}100%{opacity:0;}}@keyframes base_tnfbb5_fadeErrorBhi37xj__884e17c8{50%{opacity:1;}100%{opacity:0;}}.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_s1ft73sv__884e17c8{--plasma-spinner-color:var(--plasma-number-input_loader-spinner_color);}.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_i1tgbhg7__884e17c8{color:var(--plasma-number-input_color);caret-color:var(--plasma-number-input_caret_color);}.base_tnfbb5_bhi37xj__884e17c8 .base_tnfbb5_az36kha__884e17c8{color:var(--plasma-number-input_additional-text_color);}
+
+.base_yqdmk4_b13wjeky__9b206d94{width:var(--plasma_private-number-input_width);min-width:var(--plasma-number-input_min-width);}.base_yqdmk4_b13wjeky__9b206d94 .base_yqdmk4_sj0ab1b__9b206d94{--plasma-icon-button-height:var(--plasma-number-input_icon-button_height);--plasma-icon-button-width:var(--plasma-number-input_icon-button_width);--plasma-icon-button-padding:var(--plasma-number-input_icon-button_padding);--plasma-icon-button-font-family:var(--plasma-number-input_icon-button_font-family);--plasma-icon-button-font-size:var(--plasma-number-input_icon-button_font-size);--plasma-icon-button-font-style:var(--plasma-number-input_icon-button_font-style);--plasma-icon-button-font-weight:var(--plasma-number-input_icon-button_font-weight);--plasma-icon-button-letter-spacing:var(--plasma-number-input_icon-button_letter-spacing);--plasma-icon-button-line-height:var(--plasma-number-input_icon-button_line-height);}.base_yqdmk4_b13wjeky__9b206d94 .base_yqdmk4_i1s8bsh6__9b206d94{margin:var(--plasma-number-input_input-wrapper_margin);}.base_yqdmk4_b13wjeky__9b206d94 .base_yqdmk4_t6wb9c__9b206d94{height:var(--plasma-number-input_text-wrapper_height);padding:var(--plasma-number-input_text-wrapper_padding);}.base_yqdmk4_b13wjeky__9b206d94 .base_yqdmk4_d1n4jo6t__9b206d94,.base_yqdmk4_b13wjeky__9b206d94 .base_yqdmk4_i1tgbhg7__9b206d94,.base_yqdmk4_b13wjeky__9b206d94 .base_yqdmk4_az36kha__9b206d94{font-family:var(--plasma-number-input_font-family);font-size:var(--plasma-number-input_font-size);font-style:var(--plasma-number-input_font-style);font-weight:var(--plasma-number-input_font-weight);-webkit-letter-spacing:var(--plasma-number-input_letter-spacing);-moz-letter-spacing:var(--plasma-number-input_letter-spacing);-ms-letter-spacing:var(--plasma-number-input_letter-spacing);letter-spacing:var(--plasma-number-input_letter-spacing);line-height:var(--plasma-number-input_line-height);}.base_yqdmk4_b13wjeky__9b206d94 .base_yqdmk4_az36kha__9b206d94.base_yqdmk4_textBefore__9b206d94{margin-right:var(--plasma-number-input_text-before_margin-right);}.base_yqdmk4_b13wjeky__9b206d94 .base_yqdmk4_az36kha__9b206d94.base_yqdmk4_textAfter__9b206d94{margin-left:var(--plasma-number-input_text-after_margin-left);}.base_yqdmk4_b13wjeky__9b206d94 .base_yqdmk4_s1ft73sv__9b206d94{--plasma-spinner-size:var(--plasma-number-input_loader-spinner_size);}
+
+.base_k05biw_b1l31q8y__7da7a6d0 .base_k05biw_sj0ab1b__7da7a6d0{--plasma-icon-button-radius:var(--plasma-number-input_icon-button_radius);}
+
+.base_dx9knv_b15uqx38__1d74109c .base_dx9knv_i1s8bsh6__1d74109c{background-color:var(--plasma-number-input_background-color);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border-color);}.base_dx9knv_b15uqx38__1d74109c .base_dx9knv_i1s8bsh6__1d74109c.base_dx9knv_manualInputNumberInput__1d74109c:hover{background-color:var(--plasma-number-input_background-color-hover);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border-color-hover);}
+
+.base_14s5rot_bpps6rw__6339f446 .base_14s5rot_i1s8bsh6__6339f446{border-radius:var(--plasma-number-input_input-wrapper_border-radius);}.base_14s5rot_bpps6rw__6339f446 .base_14s5rot_sj0ab1b__6339f446{--plasma_private-segmentation-border-radius:var(--plasma-number-input_icon-button_radius);}.base_14s5rot_bpps6rw__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_segmentedView__6339f446,.base_14s5rot_bpps6rw__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_solidView__6339f446{--plasma_private-segmentation-border-radius:var(--plasma-number-input_icon-button_segmentation_radius,var(--plasma-number-input_icon-button_radius));}.base_14s5rot_bpps6rw__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonDecrement__6339f446{border-radius:var(--plasma-number-input_icon-button_radius) var(--plasma_private-segmentation-border-radius) var(--plasma_private-segmentation-border-radius) var(--plasma-number-input_icon-button_radius);}.base_14s5rot_bpps6rw__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonIncrement__6339f446{border-radius:var(--plasma_private-segmentation-border-radius) var(--plasma-number-input_icon-button_radius) var(--plasma-number-input_icon-button_radius) var(--plasma_private-segmentation-border-radius);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_segmentedView__6339f446 .base_14s5rot_i1s8bsh6__6339f446{border-radius:var(--plasma-number-input_icon-button_segmentation_radius);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446{--plasma_private-number-input_top-box-shadow:inset 0 var(--plasma-number-input_input-border-width) var(--plasma-number-input_wrapper_border-color);--plasma_private-number-input_bottom-box-shadow:inset 0 calc(-1 * var(--plasma-number-input_input-border-width)) var(--plasma-number-input_wrapper_border-color);--plasma_private-number-input_left-box-shadow:inset var(--plasma-number-input_input-border-width) 0 var(--plasma-number-input_wrapper_border-color);--plasma_private-number-input_right-box-shadow:inset calc(-1 * var(--plasma-number-input_input-border-width)) 0 var(--plasma-number-input_wrapper_border-color);position:relative;}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446.base_14s5rot_numberInputFocused__6339f446:not(number-input-loading),.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446.base_14s5rot_numberInputFocused__6339f446:not(number-input-disabled){--plasma_private-number-input_top-box-shadow:inset 0 var(--plasma-number-input_input-border-width) var(--plasma-number-input_wrapper_border-color_focus);--plasma_private-number-input_bottom-box-shadow:inset 0 calc(-1 * var(--plasma-number-input_input-border-width)) var(--plasma-number-input_wrapper_border-color_focus);--plasma_private-number-input_left-box-shadow:inset var(--plasma-number-input_input-border-width) 0 var(--plasma-number-input_wrapper_border-color_focus);--plasma_private-number-input_right-box-shadow:inset calc(-1 * var(--plasma-number-input_input-border-width)) 0 var(--plasma-number-input_wrapper_border-color_focus);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446:before{content:'';position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:calc(100% - var(--plasma-number-input_icon-button_width) * 2);height:100%;background:var(--plasma-number-input_background-color-solid);box-shadow:var(--plasma_private-number-input_top-box-shadow),var(--plasma_private-number-input_bottom-box-shadow);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_i1s8bsh6__6339f446{position:relative;color:var(--plasma-number-input_color-solid);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_i1s8bsh6__6339f446:not(error-animation).base_14s5rot_manualInputNumberInput__6339f446:focus-within{background-color:var(--plasma-number-input_background-color-solid-focus);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border-color-solid-focus);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonDecrement__6339f446{box-shadow:var(--plasma_private-number-input_bottom-box-shadow),var(--plasma_private-number-input_top-box-shadow),var(--plasma_private-number-input_left-box-shadow);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonIncrement__6339f446{box-shadow:var(--plasma_private-number-input_bottom-box-shadow),var(--plasma_private-number-input_top-box-shadow),var(--plasma_private-number-input_right-box-shadow);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446:hover,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446:active{background-color:var(--plasma-number-input_icon-button_background-color);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446:hover{color:var(--plasma-number-input_icon-button_color_solid-hover);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446:active{color:var(--plasma-number-input_icon-button_color_solid-active);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonDecrementDisabled__6339f446,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonIncrementDisabled__6339f446{opacity:1;}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonDecrementDisabled__6339f446 svg,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonIncrementDisabled__6339f446 svg{opacity:var(--plasma-number-input_action-button_disabled-opacity);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonDecrementDisabled__6339f446:hover,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonIncrementDisabled__6339f446:hover,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonDecrementDisabled__6339f446:active,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonIncrementDisabled__6339f446:active{color:var(--plasma-number-input_icon-button_color);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonDecrementDisabled__6339f446:hover svg,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonIncrementDisabled__6339f446:hover svg,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonDecrementDisabled__6339f446:active svg,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonIncrementDisabled__6339f446:active svg{opacity:var(--plasma-number-input_action-button_disabled-opacity);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446.base_14s5rot_clearView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonDecrementDisabled__6339f446:hover,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446.base_14s5rot_clearView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonIncrementDisabled__6339f446:hover,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446.base_14s5rot_clearView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonDecrementDisabled__6339f446:active,.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446.base_14s5rot_clearView__6339f446 .base_14s5rot_sj0ab1b__6339f446.base_14s5rot_actionButtonIncrementDisabled__6339f446:active{background-color:transparent;}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_s1ft73sv__6339f446{--plasma-spinner-color:var(--plasma-number-input_loader-spinner_color-solid);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_i1tgbhg7__6339f446{caret-color:var(--plasma-number-input_caret_color-solid,var(--plasma-number-input_caret_color));}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_i1tgbhg7__6339f446:not(.base_14s5rot_errorAnimation__6339f446){color:var(--plasma-number-input_color-solid);}.base_14s5rot_bpps6rw__6339f446.base_14s5rot_solidView__6339f446 .base_14s5rot_az36kha__6339f446{color:var(--plasma-number-input_additional-text_color-solid);}
+
+.base_1sl0mh8_bmqk5v5__e93ebd2b.base_1sl0mh8_bmqk5v5__e93ebd2b.base_1sl0mh8_numberInputDisabled__e93ebd2b{pointer-events:none;opacity:var(--plasma-number-input_disabled-opacity);cursor:not-allowed;}

package/es/index.js

@@ -203,4 +203,6 @@ export { composeMask } from './components/Mask/Mask.js';
 export { attachConfig, attachRoot } from './components/Attach/Attach.js';
 export { tokens as attachTokens } from './components/Attach/Attach.tokens.js';
 export { viewContainerConfig, viewContainerRoot } from './components/ViewContainer/ViewContainer.js';
+export { numberInputConfig, numberInputRoot } from './components/NumberInput/NumberInput.js';
+export { classes as numberInputClasses, tokens as numberInputTokens } from './components/NumberInput/NumberInput.tokens.js';
 //# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.185.1-canary.32.11719082166.0",
+  "version": "0.186.0-canary.1511.11718939010.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -80,8 +80,8 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@salutejs/plasma-sb-utils": "0.183.1-canary.32.11719082166.0",
-    "@salutejs/plasma-themes": "0.22.1-canary.32.11719082166.0",
+    "@salutejs/plasma-sb-utils": "0.183.0-dev.0",
+    "@salutejs/plasma-themes": "0.22.0",
     "@storybook/addon-docs": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addons": "^7.6.17",
@@ -115,7 +115,7 @@
     "@linaria/react": "5.0.3",
     "@popperjs/core": "2.11.8",
     "@salutejs/input-core": "2.1.2",
-    "@salutejs/plasma-core": "1.185.1-canary.32.11719082166.0",
+    "@salutejs/plasma-core": "1.185.0-dev.0",
     "@salutejs/react-maskinput": "3.2.6",
     "classnames": "2.5.1",
     "dayjs": "1.11.11",
@@ -128,5 +128,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "36912411bf0eb29573bbea16fa838294445e95bc"
+  "gitHead": "767175963ede0a66f9c620e882e50515c0f21cfe"
 }

package/styled-components/cjs/components/NumberInput/NumberInput.js

@@ -0,0 +1,216 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.numberInputRoot = exports.numberInputConfig = void 0;
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _utils = /*#__PURE__*/require("../../utils");
+var _Icon = /*#__PURE__*/require("../_Icon");
+var _ui = /*#__PURE__*/require("./ui");
+var _NumberInput = /*#__PURE__*/require("./NumberInput.tokens");
+var _NumberInput2 = /*#__PURE__*/require("./NumberInput.styles");
+var _base = /*#__PURE__*/require("./variations/_view/base");
+var _base2 = /*#__PURE__*/require("./variations/_size/base");
+var _base3 = /*#__PURE__*/require("./variations/_shape/base");
+var _base4 = /*#__PURE__*/require("./variations/_background-type/base");
+var _base5 = /*#__PURE__*/require("./variations/_segmentation/base");
+var _base6 = /*#__PURE__*/require("./variations/_disabled/base");
+var _excluded = ["className", "style", "width", "value", "min", "max", "step", "isLoading", "loader", "size", "view", "clear", "shape", "segmentation", "inputBackgroundType", "disabled", "textBefore", "textAfter", "customIncrementButton", "incrementIcon", "customDecrementButton", "decrementIcon", "isManualInput", "onChange", "onIncrement", "onDecrement"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var numberInputRoot = exports.numberInputRoot = function numberInputRoot(Root) {
+  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+    var _ref2;
+    var className = _ref.className,
+      style = _ref.style,
+      width = _ref.width,
+      value = _ref.value,
+      min = _ref.min,
+      max = _ref.max,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 1 : _ref$step,
+      isLoading = _ref.isLoading,
+      loader = _ref.loader,
+      size = _ref.size,
+      view = _ref.view,
+      clear = _ref.clear,
+      shape = _ref.shape,
+      segmentation = _ref.segmentation,
+      _ref$inputBackgroundT = _ref.inputBackgroundType,
+      inputBackgroundType = _ref$inputBackgroundT === void 0 ? 'fill' : _ref$inputBackgroundT,
+      disabled = _ref.disabled,
+      textBefore = _ref.textBefore,
+      textAfter = _ref.textAfter,
+      customIncrementButton = _ref.customIncrementButton,
+      incrementIcon = _ref.incrementIcon,
+      customDecrementButton = _ref.customDecrementButton,
+      decrementIcon = _ref.decrementIcon,
+      isManualInput = _ref.isManualInput,
+      onChange = _ref.onChange,
+      onIncrement = _ref.onIncrement,
+      onDecrement = _ref.onDecrement,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var _useState = (0, _react.useState)((_ref2 = value !== null && value !== void 0 ? value : min) !== null && _ref2 !== void 0 ? _ref2 : 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerValue = _useState2[0],
+      setInnerValue = _useState2[1];
+    var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isInputFocused = _useState4[0],
+      setIsInputFocused = _useState4[1];
+    var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isAnimationRun = _useState6[0],
+      setIsAnimationRun = _useState6[1];
+    var innerWidth = width ? (0, _utils.getSizeValueFromProp)(width) : '100%';
+    var actionIconSize = size === 'xs' ? 'xs' : 's';
+    var solidViewClass = segmentation === 'solid' ? _NumberInput.classes.solidView : undefined;
+    var segmentedViewClass = segmentation === 'segmented' ? _NumberInput.classes.segmentedView : undefined;
+    var clearViewClass = clear ? _NumberInput.classes.clearView : undefined;
+    var disabledClass = disabled ? _NumberInput.classes.disabled : undefined;
+    var loadingClass = isLoading ? _NumberInput.classes.loading : undefined;
+    var focusedClass = isInputFocused ? _NumberInput.classes.focused : undefined;
+    var isMinValue = function isMinValue(currentValue) {
+      return min !== undefined && currentValue <= min;
+    };
+    var isMaxValue = function isMaxValue(currentValue) {
+      return max !== undefined && currentValue >= max;
+    };
+    var decrementButtonDisabled = isMinValue(Number(innerValue)) && !isAnimationRun || isLoading ? _NumberInput.classes.actionButtonDecrementDisabled : undefined;
+    var incrementButtonDisabled = isMaxValue(Number(innerValue)) && !isAnimationRun || isLoading ? _NumberInput.classes.actionButtonIncrementDisabled : undefined;
+    var handleDecrement = function handleDecrement() {
+      console.log(isAnimationRun);
+      if (isLoading || disabled || isAnimationRun) {
+        return;
+      }
+      var diffValue = Number(innerValue) - step;
+      var resValue = min !== undefined && diffValue <= min ? min : diffValue;
+      setInnerValue(resValue);
+      if (onDecrement) {
+        onDecrement(resValue);
+      }
+      if (onChange) {
+        onChange(null, resValue);
+      }
+    };
+    var handleIncrement = function handleIncrement() {
+      console.log(isAnimationRun);
+      if (isLoading || disabled || isAnimationRun) {
+        return;
+      }
+      var diffValue = Number(innerValue) + step;
+      var resValue = max !== undefined && diffValue >= max ? max : diffValue;
+      setInnerValue(resValue);
+      if (onIncrement) {
+        onIncrement(resValue);
+      }
+      if (onChange) {
+        onChange(null, resValue);
+      }
+    };
+    (0, _react.useEffect)(function () {
+      if (value === undefined || !(0, _utils.isNumber)(value)) {
+        return;
+      }
+      setInnerValue(function (prevValue) {
+        return prevValue !== value ? value : prevValue;
+      });
+    }, [value]);
+    return /*#__PURE__*/_react["default"].createElement(Root, _extends({
+      view: view,
+      size: size,
+      disabled: disabled,
+      clear: clear,
+      shape: shape,
+      segmentation: segmentation,
+      isLoading: isLoading
+    }, segmentation === 'solid' ? {
+      inputBackgroundType: 'clear'
+    } : {
+      inputBackgroundType: inputBackgroundType
+    }, {
+      className: (0, _utils.cx)(className, solidViewClass, segmentedViewClass, clearViewClass, disabledClass, loadingClass, focusedClass),
+      style: _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, _NumberInput.privateTokens.inputWidth, innerWidth))
+    }), customDecrementButton || /*#__PURE__*/_react["default"].createElement(_ui.ActionButton, {
+      className: (0, _utils.cx)(_NumberInput.classes.actionButtonDecrement, decrementButtonDisabled, solidViewClass, segmentedViewClass),
+      icon: decrementIcon || /*#__PURE__*/_react["default"].createElement(_Icon.IconMinus, {
+        color: "inherit",
+        size: actionIconSize
+      }),
+      onClick: handleDecrement
+    }), /*#__PURE__*/_react["default"].createElement(_ui.NumberInput, _extends({
+      ref: ref,
+      segmentation: segmentation,
+      value: innerValue,
+      min: min,
+      max: max,
+      isManualInput: isManualInput,
+      textBefore: textBefore,
+      textAfter: textAfter,
+      isLoading: isLoading,
+      loader: loader,
+      disabled: disabled,
+      isInputFocused: isInputFocused,
+      setIsInputFocused: setIsInputFocused,
+      setIsAnimationRun: setIsAnimationRun,
+      setInnerValue: setInnerValue,
+      onChange: onChange
+    }, rest)), customIncrementButton || /*#__PURE__*/_react["default"].createElement(_ui.ActionButton, {
+      className: (0, _utils.cx)(_NumberInput.classes.actionButtonIncrement, incrementButtonDisabled, solidViewClass, segmentedViewClass),
+      icon: incrementIcon || /*#__PURE__*/_react["default"].createElement(_Icon.IconPlus, {
+        color: "inherit",
+        size: actionIconSize
+      }),
+      onClick: handleIncrement
+    }));
+  });
+};
+var numberInputConfig = exports.numberInputConfig = {
+  name: 'NumberInput',
+  tag: 'div',
+  layout: numberInputRoot,
+  base: _NumberInput2.base,
+  variations: {
+    view: {
+      css: _base.base
+    },
+    size: {
+      css: _base2.base
+    },
+    shape: {
+      css: _base3.base
+    },
+    inputBackgroundType: {
+      css: _base4.base
+    },
+    segmentation: {
+      css: _base5.base
+    },
+    disabled: {
+      css: _base6.base,
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'l',
+    shape: 'cornered',
+    segmentation: 'default'
+  }
+};

package/styled-components/cjs/components/NumberInput/NumberInput.styles.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:flex;align-items:center;"]);

package/styled-components/cjs/components/NumberInput/NumberInput.template-doc.mdx

@@ -0,0 +1,214 @@
+---
+id: numberInput
+title: NumberInput
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# NumberInput
+Числовое поле. Поддерживает как ручной ввод, так и увеличение/уменьшение значения, 
+посредством нажатия соответствующих кнопок.
+
+## NumberInput
+<Description name="NumberInput" />
+<PropsTable name="NumberInput" />
+
+## Примеры
+
+### Вид числового поля
+Вид числового поля задается с помощью свойства `view`:
+
+```tsx live
+import React from 'react';
+import { NumberInput } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <NumberInput value={5} width={188} view="default" />
+            <NumberInput value={5} width={188} view="secondary" />
+            <NumberInput value={5} width={188} view="accent" />
+            <NumberInput value={5} width={188} view="clear" />
+        </div>
+    );
+}
+```
+
+### Модификация вида числового поля
+Числовое поле может иметь различные отступы внутри, влияющие на форму. Задается с помощью свойства `segmentation`:
+
+```tsx live
+import React from 'react';
+import { NumberInput } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <NumberInput value={5} width={188} view="default" segmentation="default" />
+            <NumberInput value={5} width={188} view="default" segmentation="segmented" />
+            <NumberInput value={5} width={188} view="default" segmentation="solid" />
+        </div>
+    );
+}
+```
+
+### Граница числового поля
+Граница числового поля задается с помощью свойства `shape`:
+
+```tsx live
+import React from 'react';
+import { NumberInput } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <NumberInput value={5} width={188} view="default" segmentation="default" shape="cornered" />
+            <NumberInput value={5} width={188} view="default" segmentation="solid" shape="cornered" />
+            <NumberInput value={5} width={188} view="default" segmentation="default" shape="pilled" />
+            <NumberInput value={5} width={188} view="default" segmentation="solid" shape="pilled" />
+        </div>
+    );
+}
+```
+
+### Размер числового поля
+Размер числового поля задается с помощью свойства `size`:
+
+```tsx live
+import React from 'react';
+import { NumberInput } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <NumberInput value={5} width={188} size="l" />
+            <NumberInput value={5} width={188} size="m" />
+            <NumberInput value={5} width={188} size="s" />
+            <NumberInput value={5} width={188} size="xs" />
+        </div>
+    );
+}
+```
+
+### Состояние загрузки числового поля
+Состояние загрузки числового поля определяется свойством `isLoading`:
+
+```tsx live
+import React from 'react';
+import { NumberInput } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <NumberInput value={5} size="l" width={188} isLoading />
+        </div>
+    );
+}
+```
+
+### Ручной ввод
+Режим ручного ввода включается свойством `isManualInput`:
+
+```tsx live
+import React from 'react';
+import { NumberInput } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <NumberInput value={5} size="l" width={188} isManualInput />
+        </div>
+    );
+}
+```
+
+### Кастомные иконки для кнопок
+Можно установить собственную иконку для кнопки используя 
+свойства `decrementIcon` и `incrementIcon` соответственно:
+
+```tsx live
+import React from 'react';
+import { NumberInput } from '@salutejs/{{ package }}';
+import { IconVolumeLevel1Fill, IconVolumeLevel2Fill } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <NumberInput 
+                value={5} 
+                size="l" 
+                incrementIcon={<IconVolumeLevel2Fill color="inherit"/>} 
+                decrementIcon={<IconVolumeLevel1Fill color="inherit"/>} 
+                width={188}
+            />
+        </div>
+    );
+}
+```
+
+### Кастомные кнопки увеличения/уменьшения значения
+Можно установить собственные кнопки используя свойства `customDecrementButton` и `customIncrementButton`. 
+В таком случае нужно определить функции по уменьшению/увелечению значения в поле.
+
+```tsx live
+import React, {useState} from 'react';
+import { NumberInput, IconButton } from '@salutejs/{{ package }}';
+import { IconVolumeLevel1Fill, IconVolumeLevel2Fill } from '@salutejs/plasma-icons';
+
+export function App() {
+    const [currentValue, setCurrentValue] = useState(0);
+
+    const min = 0;
+    const max = 10;
+    const step = 2
+
+    const handleIncrement = () => {
+        const diffValue = Number(currentValue) + step;
+        const resValue = currentValue >= max ? max : diffValue;
+
+        setCurrentValue(resValue);
+    };
+
+    const handleDecrement = () => {
+        const diffValue = Number(currentValue) - step;
+        const resValue = currentValue <= min ? min : diffValue;
+
+        setCurrentValue(resValue);
+    };
+
+    const CustomIncrementButton = () => (
+        <IconButton 
+            view={currentValue !== max ? "accent" : "critical"}
+            size="l"
+            disabled={currentValue === max}
+            onClick={handleIncrement}
+        >
+            <IconVolumeLevel2Fill color="inherit"/>
+        </IconButton>
+    )
+
+    const CustomDecrementButton = () => (
+        <IconButton 
+            view={currentValue !== min ? "accent" : "critical"}
+            size="l"
+            disabled={currentValue === min}
+            onClick={handleDecrement}
+        >
+            <IconVolumeLevel1Fill color="inherit"/>
+        </IconButton>
+    )
+
+    return (
+        <div>
+            <NumberInput 
+                value={currentValue}
+                step={step}
+                size="l" 
+                customIncrementButton={<CustomIncrementButton />} 
+                customDecrementButton={<CustomDecrementButton />}
+                width={188}
+            />
+        </div>
+    );
+}
+```

package/styled-components/cjs/components/NumberInput/NumberInput.tokens.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokens = exports.privateTokens = exports.classes = void 0;
+var classes = exports.classes = {
+  actionButtonDecrement: 'action-button-decrement',
+  actionButtonDecrementDisabled: 'action-button-decrement-disabled',
+  actionButtonIncrement: 'action-button-increment',
+  actionButtonIncrementDisabled: 'action-button-increment-disabled',
+  textBefore: 'text-before',
+  textAfter: 'text-after',
+  solidView: 'solid-view',
+  segmentedView: 'segmented-view',
+  clearView: 'clear-view',
+  errorAnimation: 'error-animation',
+  disabled: 'number-input-disabled',
+  loading: 'number-input-loading',
+  focused: 'number-input-focused',
+  manualInput: 'manual-input-number-input'
+};
+var privateTokens = exports.privateTokens = {
+  inputWidth: '--plasma_private-number-input_width',
+  segmentationBorderRadius: '--plasma_private-segmentation-border-radius',
+  segmentationInputBorderRadius: '--plasma_private-segmentation_input_border-radius',
+  topBoxShadow: '--plasma_private-number-input_top-box-shadow',
+  bottomBoxShadow: '--plasma_private-number-input_bottom-box-shadow',
+  leftBoxShadow: '--plasma_private-number-input_left-box-shadow',
+  rightBoxShadow: '--plasma_private-number-input_right-box-shadow'
+};
+var tokens = exports.tokens = {
+  // Root size tokens
+  rootMinWidth: '--plasma-number-input_min-width',
+  disabledOpacity: '--plasma-number-input_disabled-opacity',
+  rootBorderWidth: '--plasma-number-input_input-border-width',
+  wrapperBorderColor: '--plasma-number-input_wrapper_border-color',
+  wrapperBorderColorFocus: '--plasma-number-input_wrapper_border-color_focus',
+  // Action button view tokens
+  iconButtonColor: '--plasma-number-input_icon-button_color',
+  iconButtonBackgroundColor: '--plasma-number-input_icon-button_background-color',
+  iconButtonColorHover: '--plasma-number-input_icon-button_color-hover',
+  iconButtonColorSolidHover: '--plasma-number-input_icon-button_color_solid-hover',
+  iconButtonBackgroundColorHover: '--plasma-number-input_icon-button_background-color-hover',
+  iconButtonColorActive: '--plasma-number-input_icon-button_color-active',
+  iconButtonColorSolidActive: '--plasma-number-input_icon-button_color_solid-active',
+  iconButtonBackgroundColorActive: '--plasma-number-input_icon-button_background-color-active',
+  actionButtonDisabledOpacity: '--plasma-number-input_action-button_disabled-opacity',
+  // Action button size tokens
+  iconButtonHeight: '--plasma-number-input_icon-button_height',
+  iconButtonWidth: '--plasma-number-input_icon-button_width',
+  iconButtonPadding: '--plasma-number-input_icon-button_padding',
+  iconButtonRadius: '--plasma-number-input_icon-button_radius',
+  iconButtonSegmentationRadius: '--plasma-number-input_icon-button_segmentation_radius',
+  iconButtonFontFamily: '--plasma-number-input_icon-button_font-family',
+  iconButtonFontSize: '--plasma-number-input_icon-button_font-size',
+  iconButtonFontStyle: '--plasma-number-input_icon-button_font-style',
+  iconButtonFontWeight: '--plasma-number-input_icon-button_font-weight',
+  iconButtonLetterSpacing: '--plasma-number-input_icon-button_letter-spacing',
+  iconButtonLineHeight: '--plasma-number-input_icon-button_line-height',
+  // Input size tokens
+  inputWrapperBorderWidth: '--plasma-number-input_input-wrapper_border-width',
+  inputWrapperMargin: '--plasma-number-input_input-wrapper_margin',
+  inputWrapperBorderRadius: '--plasma-number-input_input-wrapper_border-radius',
+  textWrapperHeight: '--plasma-number-input_text-wrapper_height',
+  textWrapperPadding: '--plasma-number-input_text-wrapper_padding',
+  fontFamily: '--plasma-number-input_font-family',
+  fontStyle: '--plasma-number-input_font-style',
+  fontSize: '--plasma-number-input_font-size',
+  fontWeight: '--plasma-number-input_font-weight',
+  letterSpacing: '--plasma-number-input_letter-spacing',
+  lineHeight: '--plasma-number-input_line-height',
+  textBeforeMarginRight: '--plasma-number-input_text-before_margin-right',
+  textAfterMarginLeft: '--plasma-number-input_text-after_margin-left',
+  // Input view tokens
+  caretColor: '--plasma-number-input_caret_color',
+  caretColorSolid: '--plasma-number-input_caret_color-solid',
+  color: '--plasma-number-input_color',
+  colorSolid: '--plasma-number-input_color-solid',
+  backgroundColor: '--plasma-number-input_background-color',
+  backgroundColorHover: '--plasma-number-input_background-color-hover',
+  backgroundColorFocus: '--plasma-number-input_background-color-focus',
+  backgroundColorSolidFocus: '--plasma-number-input_background-color-solid-focus',
+  backgroundColorSolid: '--plasma-number-input_background-color-solid',
+  borderColor: '--plasma-number-input_border-color',
+  borderColorHover: '--plasma-number-input_border-color-hover',
+  borderColorFocus: '--plasma-number-input_border-color-focus',
+  borderColorSolidFocus: '--plasma-number-input_border-color-solid-focus',
+  borderColorSolid: '--plasma-number-input_border-color-solid',
+  additionalTextColor: '--plasma-number-input_additional-text_color',
+  additionalTextColorSolid: '--plasma-number-input_additional-text_color-solid',
+  errorColor: '--plasma-number-input_error-color',
+  backgroundErrorColor: '--plasma-number-input_background_error-color',
+  borderErrorColor: '--plasma-number-input_border_error-color',
+  // Loader tokens
+  loaderSpinnerSize: '--plasma-number-input_loader-spinner_size',
+  loaderSpinnerColor: '--plasma-number-input_loader-spinner_color',
+  loaderSpinnerColorSolid: '--plasma-number-input_loader-spinner_color-solid'
+};