@alfalab/core-components-number-input 2.0.0 → 2.0.2

package/cssm/{Component.desktop.js → desktop/Component.desktop.js}

@@ -5,19 +5,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var desktop = require('@alfalab/core-components-input/cssm/desktop');
-var components_numberInput_Component = require('./components/number-input/Component.js');
+var components_numberInput_Component = require('../components/number-input/Component.js');
 require('react-merge-refs');
 require('@maskito/core');
 require('@maskito/react');
 require('classnames');
 require('@alfalab/core-components-shared/cssm');
-require('./utils.js');
-require('./components/steppers/Component.js');
+require('../utils.js');
+require('../components/steppers/Component.js');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');
-require('./components/steppers/index.module.css');
-require('./components/number-input/index.module.css');
+require('../components/steppers/default.module.css');
+require('../components/steppers/index.module.css');
+require('../components/steppers/inverted.module.css');
+require('../components/number-input/default.module.css');
+require('../components/number-input/index.module.css');
+require('../components/number-input/inverted.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/cssm/desktop/index.d.ts

@@ -1,2 +1,2 @@
-export { NumberInputDesktop, NumberInputDesktopProps } from "../Component.desktop";
+export { NumberInputDesktop, NumberInputDesktopProps } from "./Component.desktop";
 export {};

package/cssm/desktop/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component_desktop = require('../Component.desktop.js');
+var desktop_Component_desktop = require('./Component.desktop.js');
 require('tslib');
 require('react');
 require('@alfalab/core-components-input/cssm/desktop');
@@ -17,9 +17,13 @@ require('../components/steppers/Component.js');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');
+require('../components/steppers/default.module.css');
 require('../components/steppers/index.module.css');
+require('../components/steppers/inverted.module.css');
+require('../components/number-input/default.module.css');
 require('../components/number-input/index.module.css');
+require('../components/number-input/inverted.module.css');
 
 
 
-exports.NumberInputDesktop = Component_desktop.NumberInputDesktop;
+exports.NumberInputDesktop = desktop_Component_desktop.NumberInputDesktop;

package/cssm/index.js

@@ -18,8 +18,12 @@ require('./components/steppers/Component.js');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');
+require('./components/steppers/default.module.css');
 require('./components/steppers/index.module.css');
+require('./components/steppers/inverted.module.css');
+require('./components/number-input/default.module.css');
 require('./components/number-input/index.module.css');
+require('./components/number-input/inverted.module.css');
 
 
 

package/{esm → cssm/mobile}/Component.mobile.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { NumberInputProps } from "./components/number-input/index";
+import { NumberInputProps } from "../components/number-input/index";
 type NumberInputMobileProps = Omit<NumberInputProps, 'Input' | 'breakpoint' | 'view'>;
 declare const NumberInputMobile: React.ForwardRefExoticComponent<NumberInputMobileProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInputMobileProps, NumberInputMobile };

package/cssm/{Component.mobile.js → mobile/Component.mobile.js}

@@ -5,19 +5,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var mobile = require('@alfalab/core-components-input/cssm/mobile');
-var components_numberInput_Component = require('./components/number-input/Component.js');
+var components_numberInput_Component = require('../components/number-input/Component.js');
 require('react-merge-refs');
 require('@maskito/core');
 require('@maskito/react');
 require('classnames');
 require('@alfalab/core-components-shared/cssm');
-require('./utils.js');
-require('./components/steppers/Component.js');
+require('../utils.js');
+require('../components/steppers/Component.js');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');
-require('./components/steppers/index.module.css');
-require('./components/number-input/index.module.css');
+require('../components/steppers/default.module.css');
+require('../components/steppers/index.module.css');
+require('../components/steppers/inverted.module.css');
+require('../components/number-input/default.module.css');
+require('../components/number-input/index.module.css');
+require('../components/number-input/inverted.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/cssm/mobile/index.d.ts

@@ -1,2 +1,2 @@
-export { NumberInputMobile, NumberInputMobileProps } from "../Component.mobile";
+export { NumberInputMobile, NumberInputMobileProps } from "./Component.mobile";
 export {};

package/cssm/mobile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component_mobile = require('../Component.mobile.js');
+var mobile_Component_mobile = require('./Component.mobile.js');
 require('tslib');
 require('react');
 require('@alfalab/core-components-input/cssm/mobile');
@@ -17,9 +17,13 @@ require('../components/steppers/Component.js');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');
+require('../components/steppers/default.module.css');
 require('../components/steppers/index.module.css');
+require('../components/steppers/inverted.module.css');
+require('../components/number-input/default.module.css');
 require('../components/number-input/index.module.css');
+require('../components/number-input/inverted.module.css');
 
 
 
-exports.NumberInputMobile = Component_mobile.NumberInputMobile;
+exports.NumberInputMobile = mobile_Component_mobile.NumberInputMobile;

package/{cssm → desktop}/Component.desktop.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { NumberInputProps } from "./components/number-input/index";
+import { NumberInputProps } from "../components/number-input/index";
 type NumberInputDesktopProps = Omit<NumberInputProps, 'Input' | 'breakpoint' | 'view'>;
 declare const NumberInputDesktop: React.ForwardRefExoticComponent<NumberInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInputDesktopProps, NumberInputDesktop };

package/{Component.desktop.js → desktop/Component.desktop.js}

@@ -5,14 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var desktop = require('@alfalab/core-components-input/desktop');
-var components_numberInput_Component = require('./components/number-input/Component.js');
+var components_numberInput_Component = require('../components/number-input/Component.js');
 require('react-merge-refs');
 require('@maskito/core');
 require('@maskito/react');
 require('classnames');
 require('@alfalab/core-components-shared');
-require('./utils.js');
-require('./components/steppers/Component.js');
+require('../utils.js');
+require('../components/steppers/Component.js');
 require('@alfalab/core-components-icon-button');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');

package/desktop/index.d.ts

@@ -1,2 +1,2 @@
-export { NumberInputDesktop, NumberInputDesktopProps } from "../Component.desktop";
+export { NumberInputDesktop, NumberInputDesktopProps } from "./Component.desktop";
 export {};

package/desktop/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component_desktop = require('../Component.desktop.js');
+var desktop_Component_desktop = require('./Component.desktop.js');
 require('tslib');
 require('react');
 require('@alfalab/core-components-input/desktop');
@@ -20,4 +20,4 @@ require('@alfalab/icons-glyph/PlusMediumMIcon');
 
 
 
-exports.NumberInputDesktop = Component_desktop.NumberInputDesktop;
+exports.NumberInputDesktop = desktop_Component_desktop.NumberInputDesktop;

package/esm/components/number-input/Component.js

@@ -11,12 +11,22 @@ import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
 
-var styles = {"steppers":"number-input__steppers_1g1qu","steppersFocused":"number-input__steppersFocused_1g1qu","steppersDisable":"number-input__steppersDisable_1g1qu","s":"number-input__s_1g1qu","m":"number-input__m_1g1qu"};
+var defaultColors = {"steppers":"number-input__steppers_rxb9r","steppersFocused":"number-input__steppersFocused_rxb9r","steppersDisabled":"number-input__steppersDisabled_rxb9r"};
+require('./default.css')
+
+var styles = {"s":"number-input__s_ua8m2","m":"number-input__m_ua8m2"};
 require('./index.css')
 
+var invertedColors = {"steppers":"number-input__steppers_12art","steppersFocused":"number-input__steppersFocused_12art","steppersDisabled":"number-input__steppersDisabled_12art"};
+require('./inverted.css')
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 var NumberInput = forwardRef(function (_a, ref) {
     var _b;
-    var propValue = _a.value, onChange = _a.onChange, _c = _a.separator, separator = _c === void 0 ? ',' : _c, _d = _a.fractionLength, fractionLength = _d === void 0 ? MAX_DIGITS : _d, defaultValue = _a.defaultValue, Input = _a.Input, minProp = _a.min, maxProp = _a.max, rightAddons = _a.rightAddons, dataTestId = _a.dataTestId, disabled = _a.disabled, onBlur = _a.onBlur, onFocus = _a.onFocus; _a.view; var stepProp = _a.step, _e = _a.size, size = _e === void 0 ? 's' : _e, disableUserInput = _a.disableUserInput, clearProp = _a.clear, restProps = __rest(_a, ["value", "onChange", "separator", "fractionLength", "defaultValue", "Input", "min", "max", "rightAddons", "dataTestId", "disabled", "onBlur", "onFocus", "view", "step", "size", "disableUserInput", "clear"]);
+    var propValue = _a.value, onChange = _a.onChange, _c = _a.separator, separator = _c === void 0 ? ',' : _c, _d = _a.fractionLength, fractionLength = _d === void 0 ? MAX_DIGITS : _d, defaultValue = _a.defaultValue, Input = _a.Input, minProp = _a.min, maxProp = _a.max, rightAddons = _a.rightAddons, dataTestId = _a.dataTestId, disabled = _a.disabled, onBlur = _a.onBlur, onFocus = _a.onFocus; _a.view; var stepProp = _a.step, _e = _a.size, size = _e === void 0 ? 's' : _e, disableUserInput = _a.disableUserInput, clearProp = _a.clear, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, restProps = __rest(_a, ["value", "onChange", "separator", "fractionLength", "defaultValue", "Input", "min", "max", "rightAddons", "dataTestId", "disabled", "onBlur", "onFocus", "view", "step", "size", "disableUserInput", "clear", "colors"]);
     var min = Math.max(MIN_SAFE_INTEGER, minProp !== null && minProp !== void 0 ? minProp : MIN_SAFE_INTEGER);
     var max = Math.min(MAX_SAFE_INTEGER, maxProp !== null && maxProp !== void 0 ? maxProp : MAX_SAFE_INTEGER);
     var withStepper = stepProp !== undefined;
@@ -28,15 +38,15 @@ var NumberInput = forwardRef(function (_a, ref) {
             max: max,
         });
     }, [separator, fractionLength, min, max, withStepper]);
-    var _f = useState(false), focused = _f[0], setFocused = _f[1];
-    var _g = useState(function () {
+    var _g = useState(false), focused = _g[0], setFocused = _g[1];
+    var _h = useState(function () {
         if (defaultValue == null) {
             return withStepper ? fnUtils.clamp(0, min, max).toString() : '';
         }
         return fnUtils
             .clamp(parseNumber(maskitoTransform(defaultValue.toString(), maskOptions)), min, max)
             .toString();
-    }), value = _g[0], setValue = _g[1];
+    }), value = _h[0], setValue = _h[1];
     var maskRef = useMaskito({ options: maskOptions });
     useEffect(function () {
         if (propValue !== undefined) {
@@ -92,11 +102,11 @@ var NumberInput = forwardRef(function (_a, ref) {
     };
     return (React.createElement(Input, __assign({ maxLength: getMaxLength(value) }, restProps, { 
         // В iOS в цифровой клавиатуре невозможно ввести минус.
-        inputMode: min < 0 && os.isIOS() ? 'text' : 'decimal', ref: mergeRefs([ref, maskRef]), value: value, onInput: handleChange, dataTestId: dataTestId, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, size: size, disableUserInput: disableUserInput, clear: clearProp && /\d/.test(value), rightAddons: withStepper ? (React.createElement(React.Fragment, null,
+        inputMode: min < 0 && os.isIOS() ? 'text' : 'decimal', ref: mergeRefs([ref, maskRef]), value: value, onInput: handleChange, dataTestId: dataTestId, colors: colors, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, size: size, disableUserInput: disableUserInput, clear: clearProp && /\d/.test(value), rightAddons: withStepper ? (React.createElement(React.Fragment, null,
             rightAddons,
-            React.createElement(Steppers, { dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(styles.steppers, styles[size], (_b = {},
-                    _b[styles.steppersFocused] = focused,
-                    _b[styles.steppersDisable] = disabled,
+            React.createElement(Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(colorStyles[colors].steppers, styles[size], (_b = {},
+                    _b[colorStyles[colors].steppersFocused] = focused,
+                    _b[colorStyles[colors].steppersDisabled] = disabled,
                     _b)), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) })));
 });
 

package/esm/components/number-input/default.css

@@ -0,0 +1,24 @@
+/* hash: 1v873 */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-1500-inverted: #fff;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__steppers_rxb9r {
+    background-color: var(--color-light-neutral-1500-inverted);
+} .number-input__steppersFocused_rxb9r,
+.number-input__steppersDisabled_rxb9r {
+    background-color: var(--color-light-neutral-translucent-200);
+}

package/esm/components/number-input/index.css

@@ -1,8 +1,6 @@
-/* hash: ppwj9 */
+/* hash: wriah */
 :root {
-} /* deprecated */ :root {
-    --color-light-neutral-0: #fff;
-    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -18,13 +16,8 @@
     --gap-xs-neg: -8px;
 } :root {
 } :root {
-} .number-input__steppers_1g1qu {
-    background-color: var(--color-light-neutral-0);
-} .number-input__steppersFocused_1g1qu,
-.number-input__steppersDisable_1g1qu {
-    background-color: var(--color-light-neutral-translucent-200);
-} .number-input__s_1g1qu {
+} .number-input__s_ua8m2 {
     margin-right: var(--gap-xs-neg);
-} .number-input__m_1g1qu {
+} .number-input__m_ua8m2 {
     margin-right: var(--gap-2xs-neg);
 }

package/esm/components/number-input/inverted.css

@@ -0,0 +1,24 @@
+/* hash: 1vphq */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-1500: #0e0e0e;
+    --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__steppers_12art {
+    background-color: var(--color-light-neutral-1500);
+} .number-input__steppersFocused_12art,
+.number-input__steppersDisabled_12art {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/esm/components/steppers/Component.d.ts

@@ -9,6 +9,7 @@ type SteppersProps = {
     onIncrement: () => void;
     onDecrement: () => void;
     dataTestId?: string;
+    colors: 'default' | 'inverted';
 };
 declare const Steppers: React.FC<SteppersProps>;
 export { SteppersProps, Steppers };

package/esm/components/steppers/Component.js

@@ -5,20 +5,30 @@ import { getDataTestId } from '@alfalab/core-components-shared/esm';
 import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
 import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
 
-var styles = {"component":"number-input__component_1k8eq","separator":"number-input__separator_1k8eq","button":"number-input__button_1k8eq"};
+var defaultColors = {"separator":"number-input__separator_5558q"};
+require('./default.css')
+
+var styles = {"component":"number-input__component_dl4y5","separator":"number-input__separator_dl4y5","button":"number-input__button_dl4y5"};
 require('./index.css')
 
+var invertedColors = {"separator":"number-input__separator_898tm"};
+require('./inverted.css')
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 function preventDefault(e) {
     e.preventDefault();
 }
 var Steppers = function (_a) {
-    var className = _a.className, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, value = _a.value, min = _a.min, max = _a.max, disabled = _a.disabled, dataTestId = _a.dataTestId;
+    var className = _a.className, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, value = _a.value, min = _a.min, max = _a.max, disabled = _a.disabled, dataTestId = _a.dataTestId, colors = _a.colors;
     var decButtonDisabled = disabled || value <= min;
     var incButtonDisabled = disabled || value >= max;
     return (React.createElement("div", { className: cn(styles.component, className) },
-        React.createElement(IconButton, { disabled: decButtonDisabled, className: styles.button, icon: React.createElement(MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
-        React.createElement("div", { className: styles.separator }),
-        React.createElement(IconButton, { disabled: incButtonDisabled, className: styles.button, icon: React.createElement(PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
+        React.createElement(IconButton, { colors: colors, disabled: decButtonDisabled, className: styles.button, icon: React.createElement(MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
+        React.createElement("div", { className: cn(styles.separator, colorStyles[colors].separator) }),
+        React.createElement(IconButton, { colors: colors, disabled: incButtonDisabled, className: styles.button, icon: React.createElement(PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
 };
 
 export { Steppers };

package/esm/components/steppers/default.css

@@ -0,0 +1,20 @@
+/* hash: 1a2sq */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__separator_5558q {
+    background-color: var(--color-light-neutral-translucent-300);
+}

package/esm/components/steppers/index.css

@@ -1,7 +1,6 @@
-/* hash: 1x7ch */
+/* hash: 73hh8 */
 :root {
-} /* deprecated */ :root {
-    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -15,18 +14,17 @@
 } :root {
 } :root {
 } :root {
-} .number-input__component_1k8eq {
+} .number-input__component_dl4y5 {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     border-radius: 5px;
     transition: background-color 0.2s ease;
     overflow: visible;
-} .number-input__separator_1k8eq {
+} .number-input__separator_dl4y5 {
     height: 18px;
     width: 1px;
-    background-color: var(--color-light-neutral-translucent-300);
-} .number-input__button_1k8eq {
+} .number-input__button_dl4y5 {
     width: 40px;
     height: 40px;
 }

package/esm/components/steppers/inverted.css

@@ -0,0 +1,20 @@
+/* hash: 1eb6x */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__separator_898tm {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/esm/{Component.desktop.d.ts → desktop/Component.desktop.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { NumberInputProps } from "./components/number-input/index";
+import { NumberInputProps } from "../components/number-input/index";
 type NumberInputDesktopProps = Omit<NumberInputProps, 'Input' | 'breakpoint' | 'view'>;
 declare const NumberInputDesktop: React.ForwardRefExoticComponent<NumberInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInputDesktopProps, NumberInputDesktop };

package/esm/{Component.desktop.js → desktop/Component.desktop.js}

@@ -1,14 +1,14 @@
 import { __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { InputDesktop } from '@alfalab/core-components-input/esm/desktop';
-import { NumberInput } from './components/number-input/Component.js';
+import { NumberInput } from '../components/number-input/Component.js';
 import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import 'classnames';
 import '@alfalab/core-components-shared/esm';
-import './utils.js';
-import './components/steppers/Component.js';
+import '../utils.js';
+import '../components/steppers/Component.js';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';

package/esm/desktop/index.d.ts

@@ -1,2 +1,2 @@
-export { NumberInputDesktop, NumberInputDesktopProps } from "../Component.desktop";
+export { NumberInputDesktop, NumberInputDesktopProps } from "./Component.desktop";
 export {};

package/esm/desktop/index.js

@@ -1,4 +1,4 @@
-export { NumberInputDesktop } from '../Component.desktop.js';
+export { NumberInputDesktop } from './Component.desktop.js';
 import 'tslib';
 import 'react';
 import '@alfalab/core-components-input/esm/desktop';

package/{modern → esm/mobile}/Component.mobile.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { NumberInputProps } from "./components/number-input/index";
+import { NumberInputProps } from "../components/number-input/index";
 type NumberInputMobileProps = Omit<NumberInputProps, 'Input' | 'breakpoint' | 'view'>;
 declare const NumberInputMobile: React.ForwardRefExoticComponent<NumberInputMobileProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInputMobileProps, NumberInputMobile };

package/esm/{Component.mobile.js → mobile/Component.mobile.js}

@@ -1,14 +1,14 @@
 import { __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { InputMobile } from '@alfalab/core-components-input/esm/mobile';
-import { NumberInput } from './components/number-input/Component.js';
+import { NumberInput } from '../components/number-input/Component.js';
 import 'react-merge-refs';
 import '@maskito/core';
 import '@maskito/react';
 import 'classnames';
 import '@alfalab/core-components-shared/esm';
-import './utils.js';
-import './components/steppers/Component.js';
+import '../utils.js';
+import '../components/steppers/Component.js';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';

package/esm/mobile/index.d.ts

@@ -1,2 +1,2 @@
-export { NumberInputMobile, NumberInputMobileProps } from "../Component.mobile";
+export { NumberInputMobile, NumberInputMobileProps } from "./Component.mobile";
 export {};

package/esm/mobile/index.js

@@ -1,4 +1,4 @@
-export { NumberInputMobile } from '../Component.mobile.js';
+export { NumberInputMobile } from './Component.mobile.js';
 import 'tslib';
 import 'react';
 import '@alfalab/core-components-input/esm/mobile';

package/{Component.mobile.d.ts → mobile/Component.mobile.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { NumberInputProps } from "./components/number-input/index";
+import { NumberInputProps } from "../components/number-input/index";
 type NumberInputMobileProps = Omit<NumberInputProps, 'Input' | 'breakpoint' | 'view'>;
 declare const NumberInputMobile: React.ForwardRefExoticComponent<NumberInputMobileProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInputMobileProps, NumberInputMobile };

package/{Component.mobile.js → mobile/Component.mobile.js}

@@ -5,14 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var mobile = require('@alfalab/core-components-input/mobile');
-var components_numberInput_Component = require('./components/number-input/Component.js');
+var components_numberInput_Component = require('../components/number-input/Component.js');
 require('react-merge-refs');
 require('@maskito/core');
 require('@maskito/react');
 require('classnames');
 require('@alfalab/core-components-shared');
-require('./utils.js');
-require('./components/steppers/Component.js');
+require('../utils.js');
+require('../components/steppers/Component.js');
 require('@alfalab/core-components-icon-button');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');

package/mobile/index.d.ts

@@ -1,2 +1,2 @@
-export { NumberInputMobile, NumberInputMobileProps } from "../Component.mobile";
+export { NumberInputMobile, NumberInputMobileProps } from "./Component.mobile";
 export {};

package/mobile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component_mobile = require('../Component.mobile.js');
+var mobile_Component_mobile = require('./Component.mobile.js');
 require('tslib');
 require('react');
 require('@alfalab/core-components-input/mobile');
@@ -20,4 +20,4 @@ require('@alfalab/icons-glyph/PlusMediumMIcon');
 
 
 
-exports.NumberInputMobile = Component_mobile.NumberInputMobile;
+exports.NumberInputMobile = mobile_Component_mobile.NumberInputMobile;