@alfalab/core-components 48.8.0-beta.0 → 48.8.0

package/modal/esm/Component.responsive.js

@@ -12,7 +12,7 @@ import './consts.js';
 import './Context.js';
 import '../../base-modal/esm';
 import './ResponsiveContext.js';
-import './layout.module-76675968.js';
+import './layout.module-d9a82675.js';
 import '../../navigation-bar-private/esm';
 import 'react-merge-refs';
 

package/modal/esm/components/controls/Component.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/esm';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-76675968.js';
+import { l as layoutStyles } from '../../layout.module-d9a82675.js';
 
 var styles = {"component":"modal__component_1mjg8"};
 require('./index.css');

package/modal/esm/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/esm';
 import '../../ResponsiveContext.js';
-import '../../layout.module-76675968.js';
+import '../../layout.module-d9a82675.js';

package/modal/esm/components/footer/Component.js

@@ -4,7 +4,7 @@ import { getDataTestId } from '../../../../shared/esm';
 import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-76675968.js';
+import { l as layoutStyles } from '../../layout.module-d9a82675.js';
 import '../../../../base-modal/esm';
 
 var desktopStyles = {"footer":"modal__footer_erd83","sticky":"modal__sticky_erd83","fullscreen":"modal__fullscreen_erd83","size-500":"modal__size-500_erd83","size-600":"modal__size-600_erd83","size-800":"modal__size-800_erd83","size-1140":"modal__size-1140_erd83"};

package/modal/esm/desktop/Component.desktop.js

@@ -12,7 +12,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/esm';
 import '../Context.js';
-import '../layout.module-76675968.js';
+import '../layout.module-d9a82675.js';
 import '../../../navigation-bar-private/esm';
 
 var ModalDesktopComponent = forwardRef(function (props, ref) { return (React.createElement(Modal, __assign({}, props, { ref: ref, view: 'desktop' }))); });

package/modal/esm/desktop/index.js

@@ -11,7 +11,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
 import '../../../shared/esm';
-import '../layout.module-76675968.js';
+import '../layout.module-d9a82675.js';
 import '../components/header/Component.js';
 import '../../../navigation-bar-private/esm';
 import '../Context.js';

package/modal/esm/index.js

@@ -10,7 +10,7 @@ import './Context.js';
 import '../../base-modal/esm';
 import './ResponsiveContext.js';
 import './components/controls/Component.js';
-import './layout.module-76675968.js';
+import './layout.module-d9a82675.js';
 import './components/footer/Component.js';
 import './components/header/Component.js';
 import '../../navigation-bar-private/esm';

package/modal/esm/mobile/Component.mobile.js

@@ -12,7 +12,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/esm';
 import '../Context.js';
-import '../layout.module-76675968.js';
+import '../layout.module-d9a82675.js';
 import '../../../navigation-bar-private/esm';
 
 var ModalMobileComponent = forwardRef(function (props, ref) { return (React.createElement(Modal, __assign({}, props, { ref: ref, view: 'mobile' }))); });

package/modal/esm/mobile/index.js

@@ -12,6 +12,6 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
 import '../../../shared/esm';
-import '../layout.module-76675968.js';
+import '../layout.module-d9a82675.js';
 import '../Context.js';
 import '../../../navigation-bar-private/esm';

package/modal/modern/Component.responsive.js

@@ -11,7 +11,7 @@ import './consts.js';
 import './Context.js';
 import '../../base-modal/modern';
 import './ResponsiveContext.js';
-import './layout.module-c25ec2c7.js';
+import './layout.module-0d520ad0.js';
 import '../../navigation-bar-private/modern';
 import 'react-merge-refs';
 

package/modal/modern/components/controls/Component.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-c25ec2c7.js';
+import { l as layoutStyles } from '../../layout.module-0d520ad0.js';
 
 const styles = {"component":"modal__component_1mjg8"};
 require('./index.css');

package/modal/modern/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-c25ec2c7.js';
+import '../../layout.module-0d520ad0.js';

package/modal/modern/components/footer/Component.js

@@ -4,7 +4,7 @@ import { getDataTestId } from '../../../../shared/modern';
 import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-c25ec2c7.js';
+import { l as layoutStyles } from '../../layout.module-0d520ad0.js';
 import '../../../../base-modal/modern';
 
 const desktopStyles = {"footer":"modal__footer_erd83","sticky":"modal__sticky_erd83","fullscreen":"modal__fullscreen_erd83","size-500":"modal__size-500_erd83","size-600":"modal__size-600_erd83","size-800":"modal__size-800_erd83","size-1140":"modal__size-1140_erd83"};

package/modal/modern/desktop/Component.desktop.js

@@ -11,7 +11,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-c25ec2c7.js';
+import '../layout.module-0d520ad0.js';
 import '../../../navigation-bar-private/modern';
 
 const ModalDesktopComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'desktop' })));

package/modal/modern/desktop/index.js

@@ -10,7 +10,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
 import '../../../shared/modern';
-import '../layout.module-c25ec2c7.js';
+import '../layout.module-0d520ad0.js';
 import '../components/header/Component.js';
 import '../../../navigation-bar-private/modern';
 import '../Context.js';

package/modal/modern/index.js

@@ -9,7 +9,7 @@ import './Context.js';
 import '../../base-modal/modern';
 import './ResponsiveContext.js';
 import './components/controls/Component.js';
-import './layout.module-c25ec2c7.js';
+import './layout.module-0d520ad0.js';
 import './components/footer/Component.js';
 import './components/header/Component.js';
 import '../../navigation-bar-private/modern';

package/modal/modern/mobile/Component.mobile.js

@@ -11,7 +11,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-c25ec2c7.js';
+import '../layout.module-0d520ad0.js';
 import '../../../navigation-bar-private/modern';
 
 const ModalMobileComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'mobile' })));

package/modal/modern/mobile/index.js

@@ -11,6 +11,6 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
 import '../../../shared/modern';
-import '../layout.module-c25ec2c7.js';
+import '../layout.module-0d520ad0.js';
 import '../Context.js';
 import '../../../navigation-bar-private/modern';

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

@@ -19,7 +19,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var defaultColors = {"steppers":"number-input__steppers_zt1lr","steppersFocused":"number-input__steppersFocused_zt1lr","steppersDisabled":"number-input__steppersDisabled_zt1lr"};
 require('./default.css');
 
-var styles = {"size-48":"number-input__size-48_scim0","size-56":"number-input__size-56_scim0"};
+var styles = {"size-40":"number-input__size-40_scim0","size-48":"number-input__size-48_scim0","size-56":"number-input__size-56_scim0"};
 require('./index.css');
 
 var invertedColors = {"steppers":"number-input__steppers_aj7co","steppersFocused":"number-input__steppersFocused_aj7co","steppersDisabled":"number-input__steppersDisabled_aj7co"};
@@ -34,6 +34,7 @@ var SIZE_TO_CLASSNAME_MAP = {
     m: 'size-56',
     l: 'size-64',
     xl: 'size-72',
+    40: 'size-40',
     48: 'size-48',
     56: 'size-56',
     64: 'size-64',
@@ -122,7 +123,7 @@ var NumberInput = React.forwardRef(function (_a, ref) {
             React__default.default.createElement(components_steppers_Component.Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: utils.parseNumber(value), min: min, max: max, className: cn__default.default(colorStyles[colors].steppers, styles[SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
                     _b[colorStyles[colors].steppersFocused] = focused,
                     _b[colorStyles[colors].steppersDisabled] = disabled,
-                    _b)), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) })));
+                    _b)), onIncrement: handleIncrement, onDecrement: handleDecrement, size: size }))) : (rightAddons) })));
 });
 
 exports.NumberInput = NumberInput;

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

@@ -22,7 +22,10 @@
     --gap-8-neg: var(--gap-xs-neg);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .number-input__size-48_scim0 {
+} /* сбрасывает синюю подсветку при нажатии */ .number-input__size-40_scim0 {
+    margin-right: var(--gap-8-neg);
+    height: 32px;
+} .number-input__size-48_scim0 {
     margin-right: var(--gap-8-neg);
 } .number-input__size-56_scim0 {
     margin-right: var(--gap-4-neg);

package/number-input/components/steppers/Component.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
+import { InputProps } from "../../../input";
 type SteppersProps = {
     value: number;
     min: number;
@@ -10,6 +11,7 @@ type SteppersProps = {
     onDecrement: () => void;
     dataTestId?: string;
     colors: 'default' | 'inverted';
+    size: InputProps['size'];
 };
 declare const Steppers: React.FC<SteppersProps>;
 export { SteppersProps, Steppers };

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

@@ -5,7 +5,9 @@ var cn = require('classnames');
 var coreComponentsIconButton = require('../../../icon-button');
 var coreComponentsShared = require('../../../shared');
 var MinusMIcon = require('@alfalab/icons-glyph/MinusMIcon');
+var MinusSIcon = require('@alfalab/icons-glyph/MinusSIcon');
 var PlusMediumMIcon = require('@alfalab/icons-glyph/PlusMediumMIcon');
+var PlusSIcon = require('@alfalab/icons-glyph/PlusSIcon');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -29,13 +31,15 @@ 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, colors = _a.colors;
+    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, size = _a.size;
     var decButtonDisabled = disabled || value <= min;
     var incButtonDisabled = disabled || value >= max;
+    var MinusIconComponent = size === 40 ? MinusSIcon.MinusSIcon : MinusMIcon.MinusMIcon;
+    var PlusIconComponent = size === 40 ? PlusSIcon.PlusSIcon : PlusMediumMIcon.PlusMediumMIcon;
     return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className) },
-        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: decButtonDisabled, className: styles.button, icon: React__default.default.createElement(MinusMIcon.MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
+        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: decButtonDisabled, className: styles.button, icon: React__default.default.createElement(MinusIconComponent, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
         React__default.default.createElement("div", { className: cn__default.default(styles.separator, colorStyles[colors].separator) }),
-        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: incButtonDisabled, className: styles.button, icon: React__default.default.createElement(PlusMediumMIcon.PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
+        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: incButtonDisabled, className: styles.button, icon: React__default.default.createElement(PlusIconComponent, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
 };
 
 exports.Steppers = Steppers;

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

@@ -31,6 +31,7 @@ var SIZE_TO_CLASSNAME_MAP = {
     m: 'size-56',
     l: 'size-64',
     xl: 'size-72',
+    40: 'size-40',
     48: 'size-48',
     56: 'size-56',
     64: 'size-64',
@@ -119,7 +120,7 @@ var NumberInput = React.forwardRef(function (_a, ref) {
             React__default.default.createElement(components_steppers_Component.Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: utils.parseNumber(value), min: min, max: max, className: cn__default.default(colorStyles[colors].steppers, styles__default.default[SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
                     _b[colorStyles[colors].steppersFocused] = focused,
                     _b[colorStyles[colors].steppersDisabled] = disabled,
-                    _b)), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) })));
+                    _b)), onIncrement: handleIncrement, onDecrement: handleDecrement, size: size }))) : (rightAddons) })));
 });
 
 exports.NumberInput = NumberInput;

package/number-input/cssm/components/number-input/index.module.css

@@ -21,7 +21,10 @@
     --gap-8-neg: var(--gap-xs-neg);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .size-48 {
+} /* сбрасывает синюю подсветку при нажатии */ .size-40 {
+    margin-right: var(--gap-8-neg);
+    height: 32px;
+} .size-48 {
     margin-right: var(--gap-8-neg);
 } .size-56 {
     margin-right: var(--gap-4-neg);

package/number-input/cssm/components/steppers/Component.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
+import { InputProps } from "../../../../input";
 type SteppersProps = {
     value: number;
     min: number;
@@ -10,6 +11,7 @@ type SteppersProps = {
     onDecrement: () => void;
     dataTestId?: string;
     colors: 'default' | 'inverted';
+    size: InputProps['size'];
 };
 declare const Steppers: React.FC<SteppersProps>;
 export { SteppersProps, Steppers };

package/number-input/cssm/components/steppers/Component.js

@@ -5,7 +5,9 @@ var cn = require('classnames');
 var coreComponentsIconButton = require('../../../../icon-button/cssm');
 var coreComponentsShared = require('../../../../shared/cssm');
 var MinusMIcon = require('@alfalab/icons-glyph/MinusMIcon');
+var MinusSIcon = require('@alfalab/icons-glyph/MinusSIcon');
 var PlusMediumMIcon = require('@alfalab/icons-glyph/PlusMediumMIcon');
+var PlusSIcon = require('@alfalab/icons-glyph/PlusSIcon');
 var defaultColors = require('./default.module.css');
 var styles = require('./index.module.css');
 var invertedColors = require('./inverted.module.css');
@@ -26,13 +28,15 @@ 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, colors = _a.colors;
+    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, size = _a.size;
     var decButtonDisabled = disabled || value <= min;
     var incButtonDisabled = disabled || value >= max;
+    var MinusIconComponent = size === 40 ? MinusSIcon.MinusSIcon : MinusMIcon.MinusMIcon;
+    var PlusIconComponent = size === 40 ? PlusSIcon.PlusSIcon : PlusMediumMIcon.PlusMediumMIcon;
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className) },
-        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: decButtonDisabled, className: styles__default.default.button, icon: React__default.default.createElement(MinusMIcon.MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
+        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: decButtonDisabled, className: styles__default.default.button, icon: React__default.default.createElement(MinusIconComponent, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
         React__default.default.createElement("div", { className: cn__default.default(styles__default.default.separator, colorStyles[colors].separator) }),
-        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: incButtonDisabled, className: styles__default.default.button, icon: React__default.default.createElement(PlusMediumMIcon.PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
+        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: incButtonDisabled, className: styles__default.default.button, icon: React__default.default.createElement(PlusIconComponent, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
 };
 
 exports.Steppers = Steppers;

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

@@ -12,7 +12,9 @@ import './utils.js';
 import './components/steppers/Component.js';
 import '../../icon-button/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';
 
 var NumberInputResponsive = forwardRef(function (_a, ref) {
     var breakpoint = _a.breakpoint, client = _a.client, _b = _a.defaultMatchMediaValue, defaultMatchMediaValue = _b === void 0 ? client === undefined ? undefined : client === 'desktop' : _b, restProps = __rest(_a, ["breakpoint", "client", "defaultMatchMediaValue"]);

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

@@ -9,12 +9,14 @@ import { createMaskOptions, parseNumber, stringifyNumberWithoutExp, MAX_DIGITS,
 import { Steppers } from '../steppers/Component.js';
 import '../../../../icon-button/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';
 
 var defaultColors = {"steppers":"number-input__steppers_zt1lr","steppersFocused":"number-input__steppersFocused_zt1lr","steppersDisabled":"number-input__steppersDisabled_zt1lr"};
 require('./default.css');
 
-var styles = {"size-48":"number-input__size-48_scim0","size-56":"number-input__size-56_scim0"};
+var styles = {"size-40":"number-input__size-40_scim0","size-48":"number-input__size-48_scim0","size-56":"number-input__size-56_scim0"};
 require('./index.css');
 
 var invertedColors = {"steppers":"number-input__steppers_aj7co","steppersFocused":"number-input__steppersFocused_aj7co","steppersDisabled":"number-input__steppersDisabled_aj7co"};
@@ -29,6 +31,7 @@ var SIZE_TO_CLASSNAME_MAP = {
     m: 'size-56',
     l: 'size-64',
     xl: 'size-72',
+    40: 'size-40',
     48: 'size-48',
     56: 'size-56',
     64: 'size-64',
@@ -117,7 +120,7 @@ var NumberInput = forwardRef(function (_a, ref) {
             React.createElement(Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(colorStyles[colors].steppers, styles[SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
                     _b[colorStyles[colors].steppersFocused] = focused,
                     _b[colorStyles[colors].steppersDisabled] = disabled,
-                    _b)), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) })));
+                    _b)), onIncrement: handleIncrement, onDecrement: handleDecrement, size: size }))) : (rightAddons) })));
 });
 
 export { NumberInput };

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

@@ -22,7 +22,10 @@
     --gap-8-neg: var(--gap-xs-neg);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .number-input__size-48_scim0 {
+} /* сбрасывает синюю подсветку при нажатии */ .number-input__size-40_scim0 {
+    margin-right: var(--gap-8-neg);
+    height: 32px;
+} .number-input__size-48_scim0 {
     margin-right: var(--gap-8-neg);
 } .number-input__size-56_scim0 {
     margin-right: var(--gap-4-neg);

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

@@ -10,4 +10,6 @@ import '../../utils.js';
 import '../steppers/Component.js';
 import '../../../../icon-button/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';

package/number-input/esm/components/steppers/Component.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
+import { InputProps } from "../../../../input";
 type SteppersProps = {
     value: number;
     min: number;
@@ -10,6 +11,7 @@ type SteppersProps = {
     onDecrement: () => void;
     dataTestId?: string;
     colors: 'default' | 'inverted';
+    size: InputProps['size'];
 };
 declare const Steppers: React.FC<SteppersProps>;
 export { SteppersProps, Steppers };

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

@@ -3,7 +3,9 @@ import cn from 'classnames';
 import { IconButton } from '../../../../icon-button/esm';
 import { getDataTestId } from '../../../../shared/esm';
 import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
+import { MinusSIcon } from '@alfalab/icons-glyph/MinusSIcon';
 import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
+import { PlusSIcon } from '@alfalab/icons-glyph/PlusSIcon';
 
 var defaultColors = {"separator":"number-input__separator_ivd3j"};
 require('./default.css');
@@ -22,13 +24,15 @@ 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, colors = _a.colors;
+    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, size = _a.size;
     var decButtonDisabled = disabled || value <= min;
     var incButtonDisabled = disabled || value >= max;
+    var MinusIconComponent = size === 40 ? MinusSIcon : MinusMIcon;
+    var PlusIconComponent = size === 40 ? PlusSIcon : PlusMediumMIcon;
     return (React.createElement("div", { className: cn(styles.component, className) },
-        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(IconButton, { colors: colors, disabled: decButtonDisabled, className: styles.button, icon: React.createElement(MinusIconComponent, 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' })));
+        React.createElement(IconButton, { colors: colors, disabled: incButtonDisabled, className: styles.button, icon: React.createElement(PlusIconComponent, 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/number-input/esm/components/steppers/index.js

@@ -4,4 +4,6 @@ import 'classnames';
 import '../../../../icon-button/esm';
 import '../../../../shared/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';

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

@@ -11,7 +11,9 @@ import '../utils.js';
 import '../components/steppers/Component.js';
 import '../../../icon-button/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';
 
 var NumberInputDesktop = forwardRef(function (props, ref) { return React.createElement(NumberInput, __assign({}, props, { Input: InputDesktop, ref: ref, view: 'desktop' })); });
 

package/number-input/esm/desktop/index.js

@@ -12,4 +12,6 @@ import '../utils.js';
 import '../components/steppers/Component.js';
 import '../../../icon-button/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';

package/number-input/esm/index.js

@@ -13,4 +13,6 @@ import './utils.js';
 import './components/steppers/Component.js';
 import '../../icon-button/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';

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

@@ -11,7 +11,9 @@ import '../utils.js';
 import '../components/steppers/Component.js';
 import '../../../icon-button/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';
 
 var NumberInputMobile = forwardRef(function (props, ref) { return React.createElement(NumberInput, __assign({}, props, { Input: InputMobile, ref: ref, view: 'mobile' })); });
 

package/number-input/esm/mobile/index.js

@@ -12,4 +12,6 @@ import '../utils.js';
 import '../components/steppers/Component.js';
 import '../../../icon-button/esm';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';

package/number-input/modern/Component.responsive.js

@@ -11,7 +11,9 @@ import './utils.js';
 import './components/steppers/Component.js';
 import '../../icon-button/modern';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';
 
 const NumberInputResponsive = forwardRef(({ breakpoint, client, defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop', ...restProps }, ref) => {
     const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);

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

@@ -8,12 +8,14 @@ import { createMaskOptions, parseNumber, stringifyNumberWithoutExp, MAX_DIGITS,
 import { Steppers } from '../steppers/Component.js';
 import '../../../../icon-button/modern';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';
 
 const defaultColors = {"steppers":"number-input__steppers_zt1lr","steppersFocused":"number-input__steppersFocused_zt1lr","steppersDisabled":"number-input__steppersDisabled_zt1lr"};
 require('./default.css');
 
-const styles = {"size-48":"number-input__size-48_scim0","size-56":"number-input__size-56_scim0"};
+const styles = {"size-40":"number-input__size-40_scim0","size-48":"number-input__size-48_scim0","size-56":"number-input__size-56_scim0"};
 require('./index.css');
 
 const invertedColors = {"steppers":"number-input__steppers_aj7co","steppersFocused":"number-input__steppersFocused_aj7co","steppersDisabled":"number-input__steppersDisabled_aj7co"};
@@ -28,6 +30,7 @@ const SIZE_TO_CLASSNAME_MAP = {
     m: 'size-56',
     l: 'size-64',
     xl: 'size-72',
+    40: 'size-40',
     48: 'size-48',
     56: 'size-56',
     64: 'size-64',
@@ -111,7 +114,7 @@ const NumberInput = forwardRef(({ value: propValue, onChange, separator = ',', f
             React.createElement(Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(colorStyles[colors].steppers, styles[SIZE_TO_CLASSNAME_MAP[size]], {
                     [colorStyles[colors].steppersFocused]: focused,
                     [colorStyles[colors].steppersDisabled]: disabled,
-                }), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) }));
+                }), onIncrement: handleIncrement, onDecrement: handleDecrement, size: size }))) : (rightAddons) }));
 });
 
 export { NumberInput };

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

@@ -22,7 +22,10 @@
     --gap-8-neg: var(--gap-xs-neg);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .number-input__size-48_scim0 {
+} /* сбрасывает синюю подсветку при нажатии */ .number-input__size-40_scim0 {
+    margin-right: var(--gap-8-neg);
+    height: 32px;
+} .number-input__size-48_scim0 {
     margin-right: var(--gap-8-neg);
 } .number-input__size-56_scim0 {
     margin-right: var(--gap-4-neg);

package/number-input/modern/components/number-input/index.js

@@ -9,4 +9,6 @@ import '../../utils.js';
 import '../steppers/Component.js';
 import '../../../../icon-button/modern';
 import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/MinusSIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
+import '@alfalab/icons-glyph/PlusSIcon';

package/number-input/modern/components/steppers/Component.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
+import { InputProps } from "../../../../input";
 type SteppersProps = {
     value: number;
     min: number;
@@ -10,6 +11,7 @@ type SteppersProps = {
     onDecrement: () => void;
     dataTestId?: string;
     colors: 'default' | 'inverted';
+    size: InputProps['size'];
 };
 declare const Steppers: React.FC<SteppersProps>;
 export { SteppersProps, Steppers };