@alfalab/core-components 44.5.1-beta.4 → 44.6.0-beta.0

package/slider/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1w4ql */
+/* hash: 1lif0 */
 :root {
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
@@ -43,32 +43,32 @@
     /* Отступы по бокам — на мобилке thumb не должен заходить за края контрола */
     --slider-origin-width: 100%;
     --slider-origin-right: 0;
-} .slider__component_1qn63 {
+} .slider__component_1a6bt {
     width: 100%;
     padding-top: var(--slider-progress-s-height);
     position: relative
-} .slider__component_1qn63 .noUi-base:hover .noUi-connects {
+} .slider__component_1a6bt .noUi-base:hover .noUi-connects {
             background: var(--slider-progress-hover-background);
-        } .slider__component_1qn63 .noUi-base:hover .noUi-connect {
+        } .slider__component_1a6bt .noUi-base:hover .noUi-connect {
             background: var(--slider-progress-hover-color);
-        } .slider__component_1qn63 .noUi-handle:hover .noUi-touch-area {
+        } .slider__component_1a6bt .noUi-handle:hover .noUi-touch-area {
         background: var(--slider-thumb-hover-color);
-    } .slider__component_1qn63 .noUi-handle:active .noUi-touch-area {
+    } .slider__component_1a6bt .noUi-handle:active .noUi-touch-area {
         background: var(--slider-thumb-active-color);
-    } .slider__component_1qn63 .noUi-base {
+    } .slider__component_1a6bt .noUi-base {
         position: absolute;
         width: 100%;
         height: var(--slider-clickable-area-size);
         transform: translateY(-50%);
 
         cursor: pointer;
-    } .slider__component_1qn63 .noUi-origin {
+    } .slider__component_1a6bt .noUi-origin {
         width: var(--slider-origin-width);
         position: absolute;
         top: 0;
         right: var(--slider-origin-right);
         height: 0;
-    } .slider__component_1qn63 .noUi-connects {
+    } .slider__component_1a6bt .noUi-connects {
         width: 100%;
         height: 100%;
         position: relative;
@@ -76,7 +76,7 @@
         transition: background 0.15s;
         z-index: 1;
         overflow: hidden;
-    } .slider__component_1qn63 .noUi-connect {
+    } .slider__component_1a6bt .noUi-connect {
         background: var(--slider-progress-color);
         position: absolute;
         z-index: 1;
@@ -87,7 +87,7 @@
         transform-style: flat;
         will-change: transform;
         transform-origin: 0 0;
-    } .slider__component_1qn63 .noUi-handle {
+    } .slider__component_1a6bt .noUi-handle {
         position: absolute;
         top: calc((var(--slider-thumb-half-size) - var(--slider-clickable-area-half-size)) * -1);
         right: calc(var(--slider-thumb-half-size) * -1);
@@ -101,12 +101,12 @@
         cursor: grab;
         outline: none;
         transition: background 0.15s;
-    } .slider__component_1qn63 .noUi-touch-area {
+    } .slider__component_1a6bt .noUi-touch-area {
         border-radius: var(--border-radius-circle);
         background: var(--slider-thumb-color);
         width: 100%;
         height: 100%;
-    } .slider__component_1qn63 .noUi-pips {
+    } .slider__component_1a6bt .noUi-pips {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
@@ -115,29 +115,29 @@
         color: var(--color-light-text-secondary);
         position: relative;
         width: 100%;
-    } .slider__component_1qn63 .noUi-marker {
+    } .slider__component_1a6bt .noUi-marker {
         display: none;
-    } .slider__component_1qn63 .noUi-value {
+    } .slider__component_1a6bt .noUi-value {
         position: absolute;
         white-space: nowrap;
         text-align: center;
         top: 0;
         transform: translateX(-50%)
-    } .slider__component_1qn63 .noUi-value:nth-child(2) {
+    } .slider__component_1a6bt .noUi-value:nth-child(2) {
             transform: none;
-        } .slider__component_1qn63 .noUi-value:last-child {
+        } .slider__component_1a6bt .noUi-value:last-child {
             transform: translateX(-100%);
-        } .slider__s_1qn63 .noUi-base {
+        } .slider__s_1a6bt .noUi-base {
         border-radius: var(--slider-progress-s-border-radius);
         top: calc(var(--slider-progress-s-height) / 2);
-    } .slider__s_1qn63 .noUi-connects {
+    } .slider__s_1a6bt .noUi-connects {
         top: calc(var(--slider-clickable-area-half-size) - var(--slider-progress-s-height) / 2);
         height: var(--slider-progress-s-height);
         border-radius: var(--slider-progress-s-border-radius);
-    } .slider__m_1qn63 .noUi-base {
+    } .slider__m_1a6bt .noUi-base {
         border-radius: var(--slider-progress-m-border-radius);
         top: calc(var(--slider-progress-m-height) / 2);
-    } .slider__m_1qn63 .noUi-connects {
+    } .slider__m_1a6bt .noUi-connects {
         top: calc(var(--slider-clickable-area-half-size) - var(--slider-progress-m-height) / 2);
         height: var(--slider-progress-m-height);
         border-radius: var(--slider-progress-m-border-radius);

package/slider-input/Component.d.ts

@@ -80,6 +80,14 @@ type SliderInputProps = Omit<InputProps, 'min' | 'max' | 'step' | 'value' | 'typ
     onSliderChange?: (payload: {
         value: number;
     }) => void;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onSliderStart?: SliderProps['onStart'];
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onSliderEnd?: SliderProps['onEnd'];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -162,6 +170,14 @@ declare const SliderInput: React.ForwardRefExoticComponent<Omit<InputProps, "val
     onSliderChange?: ((payload: {
         value: number;
     }) => void) | undefined;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onSliderStart?: SliderProps['onStart'];
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onSliderEnd?: SliderProps['onEnd'];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/slider-input/Component.js

@@ -11,12 +11,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"slider-input__component_16wwr","block":"slider-input__block_16wwr","slider":"slider-input__slider_16wwr","xl":"slider-input__xl_16wwr","hidePips":"slider-input__hidePips_16wwr","field":"slider-input__field_16wwr","s":"slider-input__s_16wwr","m":"slider-input__m_16wwr","l":"slider-input__l_16wwr","input":"slider-input__input_16wwr","steps":"slider-input__steps_16wwr","info":"slider-input__info_16wwr","hasLabel":"slider-input__hasLabel_16wwr","focused":"slider-input__focused_16wwr","filled":"slider-input__filled_16wwr"};
+var styles = {"component":"slider-input__component_1jr2t","block":"slider-input__block_1jr2t","slider":"slider-input__slider_1jr2t","xl":"slider-input__xl_1jr2t","hidePips":"slider-input__hidePips_1jr2t","field":"slider-input__field_1jr2t","s":"slider-input__s_1jr2t","m":"slider-input__m_1jr2t","l":"slider-input__l_1jr2t","input":"slider-input__input_1jr2t","steps":"slider-input__steps_1jr2t","info":"slider-input__info_1jr2t","hasLabel":"slider-input__hasLabel_1jr2t","focused":"slider-input__focused_1jr2t","filled":"slider-input__filled_1jr2t"};
 require('./index.css');
 
 var SliderInput = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var className = _a.className, inputClassName = _a.inputClassName, sliderClassName = _a.sliderClassName, stepsClassName = _a.stepsClassName, focusedClassName = _a.focusedClassName, fieldClassName = _a.fieldClassName, _e = _a.value, value = _e === void 0 ? '' : _e, _f = _a.min, min = _f === void 0 ? 0 : _f, _g = _a.max, max = _g === void 0 ? 100 : _g, _h = _a.step, step = _h === void 0 ? 1 : _h, block = _a.block, _j = _a.steps, steps = _j === void 0 ? [] : _j, _k = _a.sliderValue, sliderValue = _k === void 0 ? +value : _k, _l = _a.size, size = _l === void 0 ? 's' : _l, label = _a.label, info = _a.info, disabled = _a.disabled, readOnly = _a.readOnly, onChange = _a.onChange, onInputChange = _a.onInputChange, onSliderChange = _a.onSliderChange, rightAddons = _a.rightAddons, _m = _a.Input, Input = _m === void 0 ? coreComponentsInput.Input : _m, _o = _a.customInputProps, customInputProps = _o === void 0 ? {} : _o, error = _a.error, hint = _a.hint, pips = _a.pips, range = _a.range, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["className", "inputClassName", "sliderClassName", "stepsClassName", "focusedClassName", "fieldClassName", "value", "min", "max", "step", "block", "steps", "sliderValue", "size", "label", "info", "disabled", "readOnly", "onChange", "onInputChange", "onSliderChange", "rightAddons", "Input", "customInputProps", "error", "hint", "pips", "range", "dataTestId"]);
+    var className = _a.className, inputClassName = _a.inputClassName, sliderClassName = _a.sliderClassName, stepsClassName = _a.stepsClassName, focusedClassName = _a.focusedClassName, fieldClassName = _a.fieldClassName, _e = _a.value, value = _e === void 0 ? '' : _e, _f = _a.min, min = _f === void 0 ? 0 : _f, _g = _a.max, max = _g === void 0 ? 100 : _g, _h = _a.step, step = _h === void 0 ? 1 : _h, block = _a.block, _j = _a.steps, steps = _j === void 0 ? [] : _j, _k = _a.sliderValue, sliderValue = _k === void 0 ? +value : _k, _l = _a.size, size = _l === void 0 ? 's' : _l, label = _a.label, info = _a.info, disabled = _a.disabled, readOnly = _a.readOnly, onChange = _a.onChange, onInputChange = _a.onInputChange, onSliderChange = _a.onSliderChange, onSliderStart = _a.onSliderStart, onSliderEnd = _a.onSliderEnd, rightAddons = _a.rightAddons, _m = _a.Input, Input = _m === void 0 ? coreComponentsInput.Input : _m, _o = _a.customInputProps, customInputProps = _o === void 0 ? {} : _o, error = _a.error, hint = _a.hint, pips = _a.pips, range = _a.range, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["className", "inputClassName", "sliderClassName", "stepsClassName", "focusedClassName", "fieldClassName", "value", "min", "max", "step", "block", "steps", "sliderValue", "size", "label", "info", "disabled", "readOnly", "onChange", "onInputChange", "onSliderChange", "onSliderStart", "onSliderEnd", "rightAddons", "Input", "customInputProps", "error", "hint", "pips", "range", "dataTestId"]);
     var getValidInputValue = React.useCallback(function (inputValue) {
         var number = parseInt(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString().replace(/\s/g, ''), 10);
         return inputValue === '' || Number.isNaN(number) ? '' : Math.abs(number);
@@ -39,7 +39,7 @@ var SliderInput = React.forwardRef(function (_a, ref) {
             _b[styles.hasLabel] = label,
             _b[styles.hasError] = Boolean(error),
             _b), styles[size], className), "data-test-id": dataTestId },
-        React__default.default.createElement(Input, tslib.__assign({}, restProps, customInputProps, { ref: ref, value: value.toString(), onChange: handleInputChange, block: true, size: size, label: label, disabled: disabled, readOnly: readOnly, className: cn__default.default(inputClassName, styles.input), focusedClassName: cn__default.default(focusedClassName, styles.focused), fieldClassName: cn__default.default(fieldClassName, styles.field, (_c = {}, _c[styles.disabled] = disabled, _c), styles[size]), inputMode: 'numeric', pattern: '[0-9]*', error: error, hint: hint, bottomAddons: !disabled && (React__default.default.createElement(coreComponentsSlider.Slider, { min: min, max: max, step: step, onChange: handleSliderChange, value: Number.isNaN(sliderValue) || !sliderValue ? min : sliderValue, disabled: disabled || readOnly, className: cn__default.default(styles.slider, styles[size], (_d = {}, _d[styles.hidePips] = error || hint, _d), sliderClassName), pips: pips, range: range })), rightAddons: (info || rightAddons) && (React__default.default.createElement(React.Fragment, null,
+        React__default.default.createElement(Input, tslib.__assign({}, restProps, customInputProps, { ref: ref, value: value.toString(), onChange: handleInputChange, block: true, size: size, label: label, disabled: disabled, readOnly: readOnly, className: cn__default.default(inputClassName, styles.input), focusedClassName: cn__default.default(focusedClassName, styles.focused), fieldClassName: cn__default.default(fieldClassName, styles.field, (_c = {}, _c[styles.disabled] = disabled, _c), styles[size]), inputMode: 'numeric', pattern: '[0-9]*', error: error, hint: hint, bottomAddons: !disabled && (React__default.default.createElement(coreComponentsSlider.Slider, { min: min, max: max, step: step, onStart: onSliderStart, onEnd: onSliderEnd, onChange: handleSliderChange, value: Number.isNaN(sliderValue) || !sliderValue ? min : sliderValue, disabled: disabled || readOnly, className: cn__default.default(styles.slider, styles[size], (_d = {}, _d[styles.hidePips] = error || hint, _d), sliderClassName), pips: pips, range: range })), rightAddons: (info || rightAddons) && (React__default.default.createElement(React.Fragment, null,
                 info && React__default.default.createElement("span", { className: styles.info }, info),
                 rightAddons)) })),
         steps.length > 0 && !error && (React__default.default.createElement("div", { className: cn__default.default(styles.steps, stepsClassName) }, steps.map(function (stepLabel, i) {

package/slider-input/cssm/Component.d.ts

@@ -80,6 +80,14 @@ type SliderInputProps = Omit<InputProps, 'min' | 'max' | 'step' | 'value' | 'typ
     onSliderChange?: (payload: {
         value: number;
     }) => void;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onSliderStart?: SliderProps['onStart'];
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onSliderEnd?: SliderProps['onEnd'];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -162,6 +170,14 @@ declare const SliderInput: React.ForwardRefExoticComponent<Omit<InputProps, "val
     onSliderChange?: ((payload: {
         value: number;
     }) => void) | undefined;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onSliderStart?: SliderProps['onStart'];
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onSliderEnd?: SliderProps['onEnd'];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/slider-input/cssm/Component.js

@@ -15,7 +15,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var SliderInput = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var className = _a.className, inputClassName = _a.inputClassName, sliderClassName = _a.sliderClassName, stepsClassName = _a.stepsClassName, focusedClassName = _a.focusedClassName, fieldClassName = _a.fieldClassName, _e = _a.value, value = _e === void 0 ? '' : _e, _f = _a.min, min = _f === void 0 ? 0 : _f, _g = _a.max, max = _g === void 0 ? 100 : _g, _h = _a.step, step = _h === void 0 ? 1 : _h, block = _a.block, _j = _a.steps, steps = _j === void 0 ? [] : _j, _k = _a.sliderValue, sliderValue = _k === void 0 ? +value : _k, _l = _a.size, size = _l === void 0 ? 's' : _l, label = _a.label, info = _a.info, disabled = _a.disabled, readOnly = _a.readOnly, onChange = _a.onChange, onInputChange = _a.onInputChange, onSliderChange = _a.onSliderChange, rightAddons = _a.rightAddons, _m = _a.Input, Input = _m === void 0 ? coreComponentsInput.Input : _m, _o = _a.customInputProps, customInputProps = _o === void 0 ? {} : _o, error = _a.error, hint = _a.hint, pips = _a.pips, range = _a.range, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["className", "inputClassName", "sliderClassName", "stepsClassName", "focusedClassName", "fieldClassName", "value", "min", "max", "step", "block", "steps", "sliderValue", "size", "label", "info", "disabled", "readOnly", "onChange", "onInputChange", "onSliderChange", "rightAddons", "Input", "customInputProps", "error", "hint", "pips", "range", "dataTestId"]);
+    var className = _a.className, inputClassName = _a.inputClassName, sliderClassName = _a.sliderClassName, stepsClassName = _a.stepsClassName, focusedClassName = _a.focusedClassName, fieldClassName = _a.fieldClassName, _e = _a.value, value = _e === void 0 ? '' : _e, _f = _a.min, min = _f === void 0 ? 0 : _f, _g = _a.max, max = _g === void 0 ? 100 : _g, _h = _a.step, step = _h === void 0 ? 1 : _h, block = _a.block, _j = _a.steps, steps = _j === void 0 ? [] : _j, _k = _a.sliderValue, sliderValue = _k === void 0 ? +value : _k, _l = _a.size, size = _l === void 0 ? 's' : _l, label = _a.label, info = _a.info, disabled = _a.disabled, readOnly = _a.readOnly, onChange = _a.onChange, onInputChange = _a.onInputChange, onSliderChange = _a.onSliderChange, onSliderStart = _a.onSliderStart, onSliderEnd = _a.onSliderEnd, rightAddons = _a.rightAddons, _m = _a.Input, Input = _m === void 0 ? coreComponentsInput.Input : _m, _o = _a.customInputProps, customInputProps = _o === void 0 ? {} : _o, error = _a.error, hint = _a.hint, pips = _a.pips, range = _a.range, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["className", "inputClassName", "sliderClassName", "stepsClassName", "focusedClassName", "fieldClassName", "value", "min", "max", "step", "block", "steps", "sliderValue", "size", "label", "info", "disabled", "readOnly", "onChange", "onInputChange", "onSliderChange", "onSliderStart", "onSliderEnd", "rightAddons", "Input", "customInputProps", "error", "hint", "pips", "range", "dataTestId"]);
     var getValidInputValue = React.useCallback(function (inputValue) {
         var number = parseInt(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString().replace(/\s/g, ''), 10);
         return inputValue === '' || Number.isNaN(number) ? '' : Math.abs(number);
@@ -38,7 +38,7 @@ var SliderInput = React.forwardRef(function (_a, ref) {
             _b[styles__default.default.hasLabel] = label,
             _b[styles__default.default.hasError] = Boolean(error),
             _b), styles__default.default[size], className), "data-test-id": dataTestId },
-        React__default.default.createElement(Input, tslib.__assign({}, restProps, customInputProps, { ref: ref, value: value.toString(), onChange: handleInputChange, block: true, size: size, label: label, disabled: disabled, readOnly: readOnly, className: cn__default.default(inputClassName, styles__default.default.input), focusedClassName: cn__default.default(focusedClassName, styles__default.default.focused), fieldClassName: cn__default.default(fieldClassName, styles__default.default.field, (_c = {}, _c[styles__default.default.disabled] = disabled, _c), styles__default.default[size]), inputMode: 'numeric', pattern: '[0-9]*', error: error, hint: hint, bottomAddons: !disabled && (React__default.default.createElement(coreComponentsSlider.Slider, { min: min, max: max, step: step, onChange: handleSliderChange, value: Number.isNaN(sliderValue) || !sliderValue ? min : sliderValue, disabled: disabled || readOnly, className: cn__default.default(styles__default.default.slider, styles__default.default[size], (_d = {}, _d[styles__default.default.hidePips] = error || hint, _d), sliderClassName), pips: pips, range: range })), rightAddons: (info || rightAddons) && (React__default.default.createElement(React.Fragment, null,
+        React__default.default.createElement(Input, tslib.__assign({}, restProps, customInputProps, { ref: ref, value: value.toString(), onChange: handleInputChange, block: true, size: size, label: label, disabled: disabled, readOnly: readOnly, className: cn__default.default(inputClassName, styles__default.default.input), focusedClassName: cn__default.default(focusedClassName, styles__default.default.focused), fieldClassName: cn__default.default(fieldClassName, styles__default.default.field, (_c = {}, _c[styles__default.default.disabled] = disabled, _c), styles__default.default[size]), inputMode: 'numeric', pattern: '[0-9]*', error: error, hint: hint, bottomAddons: !disabled && (React__default.default.createElement(coreComponentsSlider.Slider, { min: min, max: max, step: step, onStart: onSliderStart, onEnd: onSliderEnd, onChange: handleSliderChange, value: Number.isNaN(sliderValue) || !sliderValue ? min : sliderValue, disabled: disabled || readOnly, className: cn__default.default(styles__default.default.slider, styles__default.default[size], (_d = {}, _d[styles__default.default.hidePips] = error || hint, _d), sliderClassName), pips: pips, range: range })), rightAddons: (info || rightAddons) && (React__default.default.createElement(React.Fragment, null,
                 info && React__default.default.createElement("span", { className: styles__default.default.info }, info),
                 rightAddons)) })),
         steps.length > 0 && !error && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.steps, stepsClassName) }, steps.map(function (stepLabel, i) {

package/slider-input/esm/Component.d.ts

@@ -80,6 +80,14 @@ type SliderInputProps = Omit<InputProps, 'min' | 'max' | 'step' | 'value' | 'typ
     onSliderChange?: (payload: {
         value: number;
     }) => void;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onSliderStart?: SliderProps['onStart'];
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onSliderEnd?: SliderProps['onEnd'];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -162,6 +170,14 @@ declare const SliderInput: React.ForwardRefExoticComponent<Omit<InputProps, "val
     onSliderChange?: ((payload: {
         value: number;
     }) => void) | undefined;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onSliderStart?: SliderProps['onStart'];
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onSliderEnd?: SliderProps['onEnd'];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/slider-input/esm/Component.js

@@ -4,12 +4,12 @@ import cn from 'classnames';
 import { Input } from '../../input/esm';
 import { Slider } from '../../slider/esm';
 
-var styles = {"component":"slider-input__component_16wwr","block":"slider-input__block_16wwr","slider":"slider-input__slider_16wwr","xl":"slider-input__xl_16wwr","hidePips":"slider-input__hidePips_16wwr","field":"slider-input__field_16wwr","s":"slider-input__s_16wwr","m":"slider-input__m_16wwr","l":"slider-input__l_16wwr","input":"slider-input__input_16wwr","steps":"slider-input__steps_16wwr","info":"slider-input__info_16wwr","hasLabel":"slider-input__hasLabel_16wwr","focused":"slider-input__focused_16wwr","filled":"slider-input__filled_16wwr"};
+var styles = {"component":"slider-input__component_1jr2t","block":"slider-input__block_1jr2t","slider":"slider-input__slider_1jr2t","xl":"slider-input__xl_1jr2t","hidePips":"slider-input__hidePips_1jr2t","field":"slider-input__field_1jr2t","s":"slider-input__s_1jr2t","m":"slider-input__m_1jr2t","l":"slider-input__l_1jr2t","input":"slider-input__input_1jr2t","steps":"slider-input__steps_1jr2t","info":"slider-input__info_1jr2t","hasLabel":"slider-input__hasLabel_1jr2t","focused":"slider-input__focused_1jr2t","filled":"slider-input__filled_1jr2t"};
 require('./index.css');
 
 var SliderInput = forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var className = _a.className, inputClassName = _a.inputClassName, sliderClassName = _a.sliderClassName, stepsClassName = _a.stepsClassName, focusedClassName = _a.focusedClassName, fieldClassName = _a.fieldClassName, _e = _a.value, value = _e === void 0 ? '' : _e, _f = _a.min, min = _f === void 0 ? 0 : _f, _g = _a.max, max = _g === void 0 ? 100 : _g, _h = _a.step, step = _h === void 0 ? 1 : _h, block = _a.block, _j = _a.steps, steps = _j === void 0 ? [] : _j, _k = _a.sliderValue, sliderValue = _k === void 0 ? +value : _k, _l = _a.size, size = _l === void 0 ? 's' : _l, label = _a.label, info = _a.info, disabled = _a.disabled, readOnly = _a.readOnly, onChange = _a.onChange, onInputChange = _a.onInputChange, onSliderChange = _a.onSliderChange, rightAddons = _a.rightAddons, _m = _a.Input, Input$1 = _m === void 0 ? Input : _m, _o = _a.customInputProps, customInputProps = _o === void 0 ? {} : _o, error = _a.error, hint = _a.hint, pips = _a.pips, range = _a.range, dataTestId = _a.dataTestId, restProps = __rest(_a, ["className", "inputClassName", "sliderClassName", "stepsClassName", "focusedClassName", "fieldClassName", "value", "min", "max", "step", "block", "steps", "sliderValue", "size", "label", "info", "disabled", "readOnly", "onChange", "onInputChange", "onSliderChange", "rightAddons", "Input", "customInputProps", "error", "hint", "pips", "range", "dataTestId"]);
+    var className = _a.className, inputClassName = _a.inputClassName, sliderClassName = _a.sliderClassName, stepsClassName = _a.stepsClassName, focusedClassName = _a.focusedClassName, fieldClassName = _a.fieldClassName, _e = _a.value, value = _e === void 0 ? '' : _e, _f = _a.min, min = _f === void 0 ? 0 : _f, _g = _a.max, max = _g === void 0 ? 100 : _g, _h = _a.step, step = _h === void 0 ? 1 : _h, block = _a.block, _j = _a.steps, steps = _j === void 0 ? [] : _j, _k = _a.sliderValue, sliderValue = _k === void 0 ? +value : _k, _l = _a.size, size = _l === void 0 ? 's' : _l, label = _a.label, info = _a.info, disabled = _a.disabled, readOnly = _a.readOnly, onChange = _a.onChange, onInputChange = _a.onInputChange, onSliderChange = _a.onSliderChange, onSliderStart = _a.onSliderStart, onSliderEnd = _a.onSliderEnd, rightAddons = _a.rightAddons, _m = _a.Input, Input$1 = _m === void 0 ? Input : _m, _o = _a.customInputProps, customInputProps = _o === void 0 ? {} : _o, error = _a.error, hint = _a.hint, pips = _a.pips, range = _a.range, dataTestId = _a.dataTestId, restProps = __rest(_a, ["className", "inputClassName", "sliderClassName", "stepsClassName", "focusedClassName", "fieldClassName", "value", "min", "max", "step", "block", "steps", "sliderValue", "size", "label", "info", "disabled", "readOnly", "onChange", "onInputChange", "onSliderChange", "onSliderStart", "onSliderEnd", "rightAddons", "Input", "customInputProps", "error", "hint", "pips", "range", "dataTestId"]);
     var getValidInputValue = useCallback(function (inputValue) {
         var number = parseInt(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString().replace(/\s/g, ''), 10);
         return inputValue === '' || Number.isNaN(number) ? '' : Math.abs(number);
@@ -32,7 +32,7 @@ var SliderInput = forwardRef(function (_a, ref) {
             _b[styles.hasLabel] = label,
             _b[styles.hasError] = Boolean(error),
             _b), styles[size], className), "data-test-id": dataTestId },
-        React.createElement(Input$1, __assign({}, restProps, customInputProps, { ref: ref, value: value.toString(), onChange: handleInputChange, block: true, size: size, label: label, disabled: disabled, readOnly: readOnly, className: cn(inputClassName, styles.input), focusedClassName: cn(focusedClassName, styles.focused), fieldClassName: cn(fieldClassName, styles.field, (_c = {}, _c[styles.disabled] = disabled, _c), styles[size]), inputMode: 'numeric', pattern: '[0-9]*', error: error, hint: hint, bottomAddons: !disabled && (React.createElement(Slider, { min: min, max: max, step: step, onChange: handleSliderChange, value: Number.isNaN(sliderValue) || !sliderValue ? min : sliderValue, disabled: disabled || readOnly, className: cn(styles.slider, styles[size], (_d = {}, _d[styles.hidePips] = error || hint, _d), sliderClassName), pips: pips, range: range })), rightAddons: (info || rightAddons) && (React.createElement(Fragment, null,
+        React.createElement(Input$1, __assign({}, restProps, customInputProps, { ref: ref, value: value.toString(), onChange: handleInputChange, block: true, size: size, label: label, disabled: disabled, readOnly: readOnly, className: cn(inputClassName, styles.input), focusedClassName: cn(focusedClassName, styles.focused), fieldClassName: cn(fieldClassName, styles.field, (_c = {}, _c[styles.disabled] = disabled, _c), styles[size]), inputMode: 'numeric', pattern: '[0-9]*', error: error, hint: hint, bottomAddons: !disabled && (React.createElement(Slider, { min: min, max: max, step: step, onStart: onSliderStart, onEnd: onSliderEnd, onChange: handleSliderChange, value: Number.isNaN(sliderValue) || !sliderValue ? min : sliderValue, disabled: disabled || readOnly, className: cn(styles.slider, styles[size], (_d = {}, _d[styles.hidePips] = error || hint, _d), sliderClassName), pips: pips, range: range })), rightAddons: (info || rightAddons) && (React.createElement(Fragment, null,
                 info && React.createElement("span", { className: styles.info }, info),
                 rightAddons)) })),
         steps.length > 0 && !error && (React.createElement("div", { className: cn(styles.steps, stepsClassName) }, steps.map(function (stepLabel, i) {

package/slider-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: jkn4c */
+/* hash: yk5qd */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-700: #898991;
@@ -72,57 +72,57 @@
     --slider-input-progress-hover-bg-color: var(--color-light-neutral-700);
     --slider-input-origin-width: calc(100% - 16px);
     --slider-input-origin-right: 8px;
-} .slider-input__component_16wwr {
+} .slider-input__component_1jr2t {
     position: relative;
     display: inline-block;
-} .slider-input__block_16wwr {
+} .slider-input__block_1jr2t {
     display: block;
-} .slider-input__slider_16wwr {
+} .slider-input__slider_1jr2t {
     width: calc(100% - var(--slider-input-progress-margin-horizontal) * 2);
     margin-left: var(--slider-input-progress-margin-horizontal);
     margin-right: var(--slider-input-progress-margin-horizontal);
     margin-top: calc(var(--slider-progress-s-height) / -2);
     transform: translateY(-1px)
-} .slider-input__slider_16wwr.slider-input__xl_16wwr {
+} .slider-input__slider_1jr2t.slider-input__xl_1jr2t {
         width: calc(100% - var(--slider-input-xl-progress-margin-horizontal) * 2);
         margin-left: var(--slider-input-xl-progress-margin-horizontal);
         margin-right: var(--slider-input-xl-progress-margin-horizontal);
-    } .slider-input__slider_16wwr .noUi-base {
+    } .slider-input__slider_1jr2t .noUi-base {
         border-radius: var(--slider-input-progress-border-radius);
-    } .slider-input__slider_16wwr .noUi-base:hover > .noUi-connects {
+    } .slider-input__slider_1jr2t .noUi-base:hover > .noUi-connects {
             background-color: var(--slider-input-progress-hover-bg-color);
-        } .slider-input__slider_16wwr .noUi-connects {
+        } .slider-input__slider_1jr2t .noUi-connects {
         border-radius: var(--slider-input-progress-border-radius);
         background-color: var(--slider-input-progress-bg-color);
-    } .slider-input__slider_16wwr .noUi-origin {
+    } .slider-input__slider_1jr2t .noUi-origin {
         width: var(--slider-input-origin-width);
         right: var(--slider-input-origin-right);
-    } .slider-input__slider_16wwr {
+    } .slider-input__slider_1jr2t {
 
     /* TODO исправить на 6px когда слайдеру добавят position: absolute */
-} .slider-input__slider_16wwr + * {
+} .slider-input__slider_1jr2t + * {
         margin-top: 5px;
-    } .slider-input__hidePips_16wwr .noUi-pips {
+    } .slider-input__hidePips_1jr2t .noUi-pips {
         display: none;
-    } .slider-input__component_16wwr .slider-input__field_16wwr.slider-input__s_16wwr {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__s_1jr2t {
         border-bottom-left-radius: var(--slider-input-s-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-s-border-bottom-radius);
-    } .slider-input__component_16wwr .slider-input__field_16wwr.slider-input__m_16wwr {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__m_1jr2t {
         border-bottom-left-radius: var(--slider-input-m-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-m-border-bottom-radius);
-    } .slider-input__component_16wwr .slider-input__field_16wwr.slider-input__l_16wwr {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__l_1jr2t {
         border-bottom-left-radius: var(--slider-input-l-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-l-border-bottom-radius);
-    } .slider-input__component_16wwr .slider-input__field_16wwr.slider-input__xl_16wwr {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__xl_1jr2t {
         border-bottom-left-radius: var(--slider-input-xl-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-xl-border-bottom-radius);
-    } .slider-input__input_16wwr input,
-    .slider-input__input_16wwr input + div {
+    } .slider-input__input_1jr2t input,
+    .slider-input__input_1jr2t input + div {
         font-weight: var(--slider-input-font-weight);
         font-variant-numeric: tabular-nums;
-    } .slider-input__input_16wwr input::placeholder {
+    } .slider-input__input_1jr2t input::placeholder {
         font-weight: 400;
-    } .slider-input__steps_16wwr {
+    } .slider-input__steps_1jr2t {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -131,7 +131,7 @@
     justify-content: space-between;
     margin-top: var(--gap-xs);
     color: var(--slider-input-steps-color);
-} .slider-input__info_16wwr {
+} .slider-input__info_1jr2t {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -141,24 +141,24 @@
     opacity: 0;
     transition: 0.2s ease;
     visibility: hidden;
-} .slider-input__s_16wwr.slider-input__hasLabel_16wwr .slider-input__info_16wwr:first-child {
+} .slider-input__s_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-s-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__m_16wwr.slider-input__hasLabel_16wwr .slider-input__info_16wwr:first-child {
+} .slider-input__m_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-m-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__l_16wwr.slider-input__hasLabel_16wwr .slider-input__info_16wwr:first-child {
+} .slider-input__l_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-l-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__xl_16wwr.slider-input__hasLabel_16wwr .slider-input__info_16wwr:first-child {
+} .slider-input__xl_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-xl-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__focused_16wwr .slider-input__info_16wwr,
-.slider-input__filled_16wwr .slider-input__info_16wwr {
+} .slider-input__focused_1jr2t .slider-input__info_1jr2t,
+.slider-input__filled_1jr2t .slider-input__info_1jr2t {
     visibility: visible;
     opacity: 1;
 }

package/slider-input/index.css

@@ -1,4 +1,4 @@
-/* hash: jkn4c */
+/* hash: yk5qd */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-700: #898991;
@@ -72,57 +72,57 @@
     --slider-input-progress-hover-bg-color: var(--color-light-neutral-700);
     --slider-input-origin-width: calc(100% - 16px);
     --slider-input-origin-right: 8px;
-} .slider-input__component_16wwr {
+} .slider-input__component_1jr2t {
     position: relative;
     display: inline-block;
-} .slider-input__block_16wwr {
+} .slider-input__block_1jr2t {
     display: block;
-} .slider-input__slider_16wwr {
+} .slider-input__slider_1jr2t {
     width: calc(100% - var(--slider-input-progress-margin-horizontal) * 2);
     margin-left: var(--slider-input-progress-margin-horizontal);
     margin-right: var(--slider-input-progress-margin-horizontal);
     margin-top: calc(var(--slider-progress-s-height) / -2);
     transform: translateY(-1px)
-} .slider-input__slider_16wwr.slider-input__xl_16wwr {
+} .slider-input__slider_1jr2t.slider-input__xl_1jr2t {
         width: calc(100% - var(--slider-input-xl-progress-margin-horizontal) * 2);
         margin-left: var(--slider-input-xl-progress-margin-horizontal);
         margin-right: var(--slider-input-xl-progress-margin-horizontal);
-    } .slider-input__slider_16wwr .noUi-base {
+    } .slider-input__slider_1jr2t .noUi-base {
         border-radius: var(--slider-input-progress-border-radius);
-    } .slider-input__slider_16wwr .noUi-base:hover > .noUi-connects {
+    } .slider-input__slider_1jr2t .noUi-base:hover > .noUi-connects {
             background-color: var(--slider-input-progress-hover-bg-color);
-        } .slider-input__slider_16wwr .noUi-connects {
+        } .slider-input__slider_1jr2t .noUi-connects {
         border-radius: var(--slider-input-progress-border-radius);
         background-color: var(--slider-input-progress-bg-color);
-    } .slider-input__slider_16wwr .noUi-origin {
+    } .slider-input__slider_1jr2t .noUi-origin {
         width: var(--slider-input-origin-width);
         right: var(--slider-input-origin-right);
-    } .slider-input__slider_16wwr {
+    } .slider-input__slider_1jr2t {
 
     /* TODO исправить на 6px когда слайдеру добавят position: absolute */
-} .slider-input__slider_16wwr + * {
+} .slider-input__slider_1jr2t + * {
         margin-top: 5px;
-    } .slider-input__hidePips_16wwr .noUi-pips {
+    } .slider-input__hidePips_1jr2t .noUi-pips {
         display: none;
-    } .slider-input__component_16wwr .slider-input__field_16wwr.slider-input__s_16wwr {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__s_1jr2t {
         border-bottom-left-radius: var(--slider-input-s-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-s-border-bottom-radius);
-    } .slider-input__component_16wwr .slider-input__field_16wwr.slider-input__m_16wwr {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__m_1jr2t {
         border-bottom-left-radius: var(--slider-input-m-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-m-border-bottom-radius);
-    } .slider-input__component_16wwr .slider-input__field_16wwr.slider-input__l_16wwr {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__l_1jr2t {
         border-bottom-left-radius: var(--slider-input-l-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-l-border-bottom-radius);
-    } .slider-input__component_16wwr .slider-input__field_16wwr.slider-input__xl_16wwr {
+    } .slider-input__component_1jr2t .slider-input__field_1jr2t.slider-input__xl_1jr2t {
         border-bottom-left-radius: var(--slider-input-xl-border-bottom-radius);
         border-bottom-right-radius: var(--slider-input-xl-border-bottom-radius);
-    } .slider-input__input_16wwr input,
-    .slider-input__input_16wwr input + div {
+    } .slider-input__input_1jr2t input,
+    .slider-input__input_1jr2t input + div {
         font-weight: var(--slider-input-font-weight);
         font-variant-numeric: tabular-nums;
-    } .slider-input__input_16wwr input::placeholder {
+    } .slider-input__input_1jr2t input::placeholder {
         font-weight: 400;
-    } .slider-input__steps_16wwr {
+    } .slider-input__steps_1jr2t {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -131,7 +131,7 @@
     justify-content: space-between;
     margin-top: var(--gap-xs);
     color: var(--slider-input-steps-color);
-} .slider-input__info_16wwr {
+} .slider-input__info_1jr2t {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -141,24 +141,24 @@
     opacity: 0;
     transition: 0.2s ease;
     visibility: hidden;
-} .slider-input__s_16wwr.slider-input__hasLabel_16wwr .slider-input__info_16wwr:first-child {
+} .slider-input__s_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-s-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__m_16wwr.slider-input__hasLabel_16wwr .slider-input__info_16wwr:first-child {
+} .slider-input__m_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-m-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__l_16wwr.slider-input__hasLabel_16wwr .slider-input__info_16wwr:first-child {
+} .slider-input__l_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-l-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__xl_16wwr.slider-input__hasLabel_16wwr .slider-input__info_16wwr:first-child {
+} .slider-input__xl_1jr2t.slider-input__hasLabel_1jr2t .slider-input__info_1jr2t:first-child {
     padding: var(--form-control-labeled-xl-paddings);
     padding-left: 0;
     padding-right: 0;
-} .slider-input__focused_16wwr .slider-input__info_16wwr,
-.slider-input__filled_16wwr .slider-input__info_16wwr {
+} .slider-input__focused_1jr2t .slider-input__info_1jr2t,
+.slider-input__filled_1jr2t .slider-input__info_1jr2t {
     visibility: visible;
     opacity: 1;
 }

package/slider-input/modern/Component.d.ts

@@ -80,6 +80,14 @@ type SliderInputProps = Omit<InputProps, 'min' | 'max' | 'step' | 'value' | 'typ
     onSliderChange?: (payload: {
         value: number;
     }) => void;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onSliderStart?: SliderProps['onStart'];
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onSliderEnd?: SliderProps['onEnd'];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -162,6 +170,14 @@ declare const SliderInput: React.ForwardRefExoticComponent<Omit<InputProps, "val
     onSliderChange?: ((payload: {
         value: number;
     }) => void) | undefined;
+    /**
+     * Обработчик начала перетаскивания ползунка
+     */
+    onSliderStart?: SliderProps['onStart'];
+    /**
+     * Обработчик окончания перетаскивания ползунка
+     */
+    onSliderEnd?: SliderProps['onEnd'];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/slider-input/modern/Component.js

@@ -3,10 +3,10 @@ import cn from 'classnames';
 import { Input } from '../../input/modern';
 import { Slider } from '../../slider/modern';
 
-const styles = {"component":"slider-input__component_16wwr","block":"slider-input__block_16wwr","slider":"slider-input__slider_16wwr","xl":"slider-input__xl_16wwr","hidePips":"slider-input__hidePips_16wwr","field":"slider-input__field_16wwr","s":"slider-input__s_16wwr","m":"slider-input__m_16wwr","l":"slider-input__l_16wwr","input":"slider-input__input_16wwr","steps":"slider-input__steps_16wwr","info":"slider-input__info_16wwr","hasLabel":"slider-input__hasLabel_16wwr","focused":"slider-input__focused_16wwr","filled":"slider-input__filled_16wwr"};
+const styles = {"component":"slider-input__component_1jr2t","block":"slider-input__block_1jr2t","slider":"slider-input__slider_1jr2t","xl":"slider-input__xl_1jr2t","hidePips":"slider-input__hidePips_1jr2t","field":"slider-input__field_1jr2t","s":"slider-input__s_1jr2t","m":"slider-input__m_1jr2t","l":"slider-input__l_1jr2t","input":"slider-input__input_1jr2t","steps":"slider-input__steps_1jr2t","info":"slider-input__info_1jr2t","hasLabel":"slider-input__hasLabel_1jr2t","focused":"slider-input__focused_1jr2t","filled":"slider-input__filled_1jr2t"};
 require('./index.css');
 
-const SliderInput = forwardRef(({ className, inputClassName, sliderClassName, stepsClassName, focusedClassName, fieldClassName, value = '', min = 0, max = 100, step = 1, block, steps = [], sliderValue = +value, size = 's', label, info, disabled, readOnly, onChange, onInputChange, onSliderChange, rightAddons, Input: Input$1 = Input, customInputProps = {}, error, hint, pips, range, dataTestId, ...restProps }, ref) => {
+const SliderInput = forwardRef(({ className, inputClassName, sliderClassName, stepsClassName, focusedClassName, fieldClassName, value = '', min = 0, max = 100, step = 1, block, steps = [], sliderValue = +value, size = 's', label, info, disabled, readOnly, onChange, onInputChange, onSliderChange, onSliderStart, onSliderEnd, rightAddons, Input: Input$1 = Input, customInputProps = {}, error, hint, pips, range, dataTestId, ...restProps }, ref) => {
     const getValidInputValue = useCallback((inputValue) => {
         const number = parseInt(inputValue?.toString().replace(/\s/g, ''), 10);
         return inputValue === '' || Number.isNaN(number) ? '' : Math.abs(number);
@@ -29,7 +29,7 @@ const SliderInput = forwardRef(({ className, inputClassName, sliderClassName, st
             [styles.hasLabel]: label,
             [styles.hasError]: Boolean(error),
         }, styles[size], className), "data-test-id": dataTestId },
-        React.createElement(Input$1, { ...restProps, ...customInputProps, ref: ref, value: value.toString(), onChange: handleInputChange, block: true, size: size, label: label, disabled: disabled, readOnly: readOnly, className: cn(inputClassName, styles.input), focusedClassName: cn(focusedClassName, styles.focused), fieldClassName: cn(fieldClassName, styles.field, { [styles.disabled]: disabled }, styles[size]), inputMode: 'numeric', pattern: '[0-9]*', error: error, hint: hint, bottomAddons: !disabled && (React.createElement(Slider, { min: min, max: max, step: step, onChange: handleSliderChange, value: Number.isNaN(sliderValue) || !sliderValue ? min : sliderValue, disabled: disabled || readOnly, className: cn(styles.slider, styles[size], { [styles.hidePips]: error || hint }, sliderClassName), pips: pips, range: range })), rightAddons: (info || rightAddons) && (React.createElement(Fragment, null,
+        React.createElement(Input$1, { ...restProps, ...customInputProps, ref: ref, value: value.toString(), onChange: handleInputChange, block: true, size: size, label: label, disabled: disabled, readOnly: readOnly, className: cn(inputClassName, styles.input), focusedClassName: cn(focusedClassName, styles.focused), fieldClassName: cn(fieldClassName, styles.field, { [styles.disabled]: disabled }, styles[size]), inputMode: 'numeric', pattern: '[0-9]*', error: error, hint: hint, bottomAddons: !disabled && (React.createElement(Slider, { min: min, max: max, step: step, onStart: onSliderStart, onEnd: onSliderEnd, onChange: handleSliderChange, value: Number.isNaN(sliderValue) || !sliderValue ? min : sliderValue, disabled: disabled || readOnly, className: cn(styles.slider, styles[size], { [styles.hidePips]: error || hint }, sliderClassName), pips: pips, range: range })), rightAddons: (info || rightAddons) && (React.createElement(Fragment, null,
                 info && React.createElement("span", { className: styles.info }, info),
                 rightAddons)) }),
         steps.length > 0 && !error && (React.createElement("div", { className: cn(styles.steps, stepsClassName) }, steps.map((stepLabel, i) => isValidElement(stepLabel) ? (cloneElement(stepLabel, { key: i })) : (React.createElement("span", { key: i.toString() }, stepLabel)))))));