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

package/form-control/moderncssm/components/base-form-control/Component.d.ts

@@ -18,7 +18,7 @@ type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Набор цветов для компонента
      */
@@ -125,7 +125,7 @@ declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttribu
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Набор цветов для компонента
      */

package/form-control/moderncssm/components/base-form-control/Component.js

@@ -14,6 +14,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',
@@ -26,7 +27,7 @@ const BaseFormControl = React.forwardRef(({ block = false, size = 48, colors = '
             [commonStyles.hasLeftAddons]: leftAddons,
             [commonStyles.hasRightAddons]: rightAddons || error,
         }) },
-        label && labelView === 'outer' && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'label'), className: cn(commonStyles.above, styles.above, colorCommonStyles[colors].label) }, label)),
+        label && labelView === 'outer' && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'label'), className: cn(commonStyles.above, commonStyles[`size-${size}`], styles.above, colorCommonStyles[colors].label) }, label)),
         React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'inner'), ...restProps, className: cn(fieldClassName, commonStyles.inner, styles.inner, colorCommonStyles[colors].inner, colorStyles[colors].inner, {
                 [commonStyles.disabled]: disabled || readOnly,
                 [colorCommonStyles[colors].disabled]: disabled || readOnly,
@@ -46,11 +47,11 @@ const BaseFormControl = React.forwardRef(({ block = false, size = 48, colors = '
                     React.createElement("span", { className: commonStyles.hiddenLabel, "aria-hidden": true }, label),
                     React.createElement("div", { className: cn(commonStyles.label, colorCommonStyles[colors].label, labelClassName) },
                         React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'label'), className: commonStyles.labelInner }, label)))),
-                React.createElement("div", { className: commonStyles.input }, children)),
+                React.createElement("div", { className: cn(commonStyles.input, commonStyles[`size-${size}`]) }, children)),
             rightAddons && (React.createElement("div", { ...rightAddonsProps, "data-test-id": getDataTestId(dataTestId, 'right-addons'), className: cn(commonStyles.addons, commonStyles.rightAddons, addonsClassName, rightAddonsProps?.className) }, rightAddons))),
         bottomAddons,
-        errorMessage && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'error-message'), className: cn(commonStyles.sub, styles.error, colorCommonStyles[colors].error), role: 'alert' }, errorMessage)),
-        hint && !errorMessage && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'hint'), className: cn(commonStyles.sub, styles.sub, colorCommonStyles[colors].hint) }, hint))));
+        errorMessage && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'error-message'), className: cn(commonStyles.sub, commonStyles[`size-${size}`], styles.error, colorCommonStyles[colors].error), role: 'alert' }, errorMessage)),
+        hint && !errorMessage && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'hint'), className: cn(commonStyles.sub, commonStyles[`size-${size}`], styles.sub, colorCommonStyles[colors].hint) }, hint))));
 });
 
 export { BaseFormControl };

package/form-control/moderncssm/components/base-form-control/index.module.css

@@ -11,6 +11,7 @@
     /* error */
 
     /* height */
+    --form-control-40-min-height: var(--size-xs-height);
     --form-control-s-min-height: var(--size-s-height);
     --form-control-m-min-height: var(--size-m-height);
     --form-control-l-min-height: var(--size-l-height);
@@ -20,6 +21,7 @@
     /* paddings */
     --form-control-paddings: var(--gap-0) var(--gap-12);
     --form-control-xl-paddings: var(--gap-0) var(--gap-16);
+    --form-control-labeled-40-paddings: 19px var(--gap-8) 3px;
     --form-control-labeled-s-paddings: var(--gap-24) var(--gap-12) var(--gap-4);
     --form-control-labeled-m-paddings: 28px var(--gap-12) var(--gap-8);
     --form-control-labeled-l-paddings: var(--gap-32) var(--gap-12) var(--gap-12);
@@ -91,6 +93,10 @@
     font-family: var(--form-control-font-family);
 }
 
+.input.size-40 > * {
+    padding: 0 var(--gap-8);
+}
+
 .label {
     font-size: 16px;
     line-height: 20px;
@@ -135,9 +141,16 @@
     font-weight: 400;
     display: block;
     /* adjusting overall height 👌 */
-    margin-top: 6px;
+    margin-top: 6px
 }
 
+.sub.size-40 {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        margin-top: var(--gap-4);
+    }
+
 .above {
     font-size: 14px;
     line-height: 18px;
@@ -147,15 +160,47 @@
     margin-bottom: calc(var(--gap-12) / 2);
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
+    text-overflow: ellipsis
 }
 
+.above.size-40 {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        margin-bottom: var(--gap-4);
+    }
+
 .block {
     width: 100%;
 }
 
 /* SIZES */
 
+.size-40 .inner {
+        min-height: var(--form-control-40-min-height);
+        padding: var(--gap-0) var(--gap-4);
+    }
+
+.size-40 .hasInnerLabel .input > * {
+        padding: var(--form-control-labeled-40-paddings);
+    }
+
+.size-40 .label {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+        top: calc(var(--form-control-40-min-height) / 2);
+        left: var(--gap-8);
+    }
+
+.size-40 .addons.rightAddons {
+            padding-right: var(--gap-8);
+        }
+
+.size-40 .addons.leftAddons {
+            padding-left: var(--gap-8);
+        }
+
 .size-48 .inner {
     min-height: var(--form-control-s-min-height);
 }

package/form-control/moderncssm/desktop/desktop.module.css

@@ -20,6 +20,7 @@
     /* font */
 
     /* border-radius */
+    --form-control-40-border-radius: var(--border-radius-8);
     --form-control-s-border-radius: var(--border-radius-8);
     --form-control-m-border-radius: var(--border-radius-8);
     --form-control-l-border-radius: var(--border-radius-8);
@@ -48,6 +49,14 @@
 
 /* SIZES */
 
+.size-40 .inner {
+    border-radius: var(--form-control-40-border-radius)
+}
+
+.size-40 .inner:before {
+        left: 0;
+    }
+
 .size-48 .inner {
     border-radius: var(--form-control-s-border-radius);
 }

package/form-control/moderncssm/mobile/mobile.module.css

@@ -24,6 +24,7 @@
     --form-control-mobile-sub-paddings: var(--gap-0) var(--gap-4);
 
     /* border-radius mobile */
+    --form-control-mobile-40-border-radius: var(--border-radius-10);
     --form-control-mobile-s-border-radius: var(--border-radius-10);
     --form-control-mobile-m-border-radius: var(--border-radius-10);
     --form-control-mobile-l-border-radius: var(--border-radius-10);
@@ -48,6 +49,14 @@
 
 /* SIZES */
 
+.size-40 .inner {
+    border-radius: var(--form-control-mobile-40-border-radius)
+}
+
+.size-40 .inner:before {
+        left: 0;
+    }
+
 .size-48 .inner {
     border-radius: var(--form-control-mobile-s-border-radius);
 }

package/gallery/components/image-viewer/component.js

@@ -14,7 +14,7 @@ var utils_constants = require('../../utils/constants.js');
 var components_imageViewer_hooks = require('./hooks.js');
 var components_imageViewer_slide = require('./slide.js');
 require('swiper/swiper.min.css');
-var index_module = require('../../index.module-f7301c6b.js');
+var index_module = require('../../index.module-fdff6ab8.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/gallery/components/image-viewer/hooks.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var elementClosest = require('element-closest');
 var context = require('../../context.js');
-var index_module = require('../../index.module-f7301c6b.js');
+var index_module = require('../../index.module-fdff6ab8.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/gallery/components/image-viewer/single.js

@@ -6,7 +6,7 @@ var context = require('../../context.js');
 var utils_utils = require('../../utils/utils.js');
 var components_imageViewer_hooks = require('./hooks.js');
 var components_imageViewer_slide = require('./slide.js');
-var index_module = require('../../index.module-f7301c6b.js');
+var index_module = require('../../index.module-fdff6ab8.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/gallery/components/image-viewer/slide.js

@@ -8,7 +8,7 @@ var utils_utils = require('../../utils/utils.js');
 var utils_constants = require('../../utils/constants.js');
 var components_imageViewer_paths = require('./paths.js');
 var components_imageViewer_video_index = require('./video/index.js');
-var index_module = require('../../index.module-f7301c6b.js');
+var index_module = require('../../index.module-fdff6ab8.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/gallery/esm/Component.js

@@ -13,7 +13,7 @@ import { HeaderMobile } from './components/header-mobile/Component.js';
 import './utils/utils.js';
 import './components/image-viewer/hooks.js';
 import 'element-closest';
-import './index.module-33f1f2fa.js';
+import './index.module-55af563b.js';
 import './components/image-viewer/slide.js';
 import '../../typography/esm';
 import './utils/constants.js';

package/gallery/esm/components/image-viewer/component.js

@@ -12,7 +12,7 @@ import { TestIds } from '../../utils/constants.js';
 import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
 import 'swiper/swiper.min.css';
-import { s as styles } from '../../index.module-33f1f2fa.js';
+import { s as styles } from '../../index.module-55af563b.js';
 import 'element-closest';
 import '../../../../typography/esm';
 import './paths.js';

package/gallery/esm/components/image-viewer/hooks.js

@@ -1,7 +1,7 @@
 import { useContext, useRef, useCallback, useEffect } from 'react';
 import elementClosest from 'element-closest';
 import { GalleryContext } from '../../context.js';
-import { s as styles } from '../../index.module-33f1f2fa.js';
+import { s as styles } from '../../index.module-55af563b.js';
 
 var useHandleImageViewer = function () {
     var _a = useContext(GalleryContext), view = _a.view, onClose = _a.onClose, setImageMeta = _a.setImageMeta;

package/gallery/esm/components/image-viewer/index.js

@@ -12,7 +12,7 @@ import '../../utils/utils.js';
 import '../../utils/constants.js';
 import './hooks.js';
 import 'element-closest';
-import '../../index.module-33f1f2fa.js';
+import '../../index.module-55af563b.js';
 import './slide.js';
 import '../../../../typography/esm';
 import './paths.js';

package/gallery/esm/components/image-viewer/single.js

@@ -4,7 +4,7 @@ import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt } from '../../utils/utils.js';
 import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
-import { s as styles } from '../../index.module-33f1f2fa.js';
+import { s as styles } from '../../index.module-55af563b.js';
 import 'element-closest';
 import '../../../../typography/esm';
 import '../../utils/constants.js';

package/gallery/esm/components/image-viewer/slide.js

@@ -6,7 +6,7 @@ import { isSmallImage, isVideo, getImageAlt } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
 import { NoImagePaths } from './paths.js';
 import { Video } from './video/index.js';
-import { s as styles } from '../../index.module-33f1f2fa.js';
+import { s as styles } from '../../index.module-55af563b.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';

package/gallery/esm/components/index.js

@@ -33,7 +33,7 @@ import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import './image-viewer/hooks.js';
 import 'element-closest';
-import '../index.module-33f1f2fa.js';
+import '../index.module-55af563b.js';
 import './image-viewer/slide.js';
 import './image-viewer/paths.js';
 import './image-viewer/video/index.js';

package/gallery/esm/index.js

@@ -9,7 +9,7 @@ import './context.js';
 import './utils/utils.js';
 import './components/image-viewer/hooks.js';
 import 'element-closest';
-import './index.module-33f1f2fa.js';
+import './index.module-55af563b.js';
 import './components/image-viewer/slide.js';
 import '../../typography/esm';
 import './components/image-viewer/paths.js';

package/gallery/modern/Component.js

@@ -13,7 +13,7 @@ import { HeaderMobile } from './components/header-mobile/Component.js';
 import './utils/utils.js';
 import './components/image-viewer/hooks.js';
 import 'element-closest';
-import './index.module-f1cc8850.js';
+import './index.module-a7bb5fb3.js';
 import './components/image-viewer/slide.js';
 import '../../typography/modern';
 import './utils/constants.js';

package/gallery/modern/components/image-viewer/component.js

@@ -11,7 +11,7 @@ import { TestIds } from '../../utils/constants.js';
 import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
 import 'swiper/swiper.min.css';
-import { s as styles } from '../../index.module-f1cc8850.js';
+import { s as styles } from '../../index.module-a7bb5fb3.js';
 import 'element-closest';
 import '../../../../typography/modern';
 import './paths.js';

package/gallery/modern/components/image-viewer/hooks.js

@@ -1,7 +1,7 @@
 import { useContext, useRef, useCallback, useEffect } from 'react';
 import elementClosest from 'element-closest';
 import { GalleryContext } from '../../context.js';
-import { s as styles } from '../../index.module-f1cc8850.js';
+import { s as styles } from '../../index.module-a7bb5fb3.js';
 
 const useHandleImageViewer = () => {
     const { view, onClose, setImageMeta } = useContext(GalleryContext);

package/gallery/modern/components/image-viewer/index.js

@@ -11,7 +11,7 @@ import '../../utils/utils.js';
 import '../../utils/constants.js';
 import './hooks.js';
 import 'element-closest';
-import '../../index.module-f1cc8850.js';
+import '../../index.module-a7bb5fb3.js';
 import './slide.js';
 import '../../../../typography/modern';
 import './paths.js';

package/gallery/modern/components/image-viewer/single.js

@@ -4,7 +4,7 @@ import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt } from '../../utils/utils.js';
 import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
-import { s as styles } from '../../index.module-f1cc8850.js';
+import { s as styles } from '../../index.module-a7bb5fb3.js';
 import 'element-closest';
 import '../../../../typography/modern';
 import '../../utils/constants.js';

package/gallery/modern/components/image-viewer/slide.js

@@ -6,7 +6,7 @@ import { isSmallImage, isVideo, getImageAlt } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
 import { NoImagePaths } from './paths.js';
 import { Video } from './video/index.js';
-import { s as styles } from '../../index.module-f1cc8850.js';
+import { s as styles } from '../../index.module-a7bb5fb3.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';

package/gallery/modern/components/index.js

@@ -32,7 +32,7 @@ import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import './image-viewer/hooks.js';
 import 'element-closest';
-import '../index.module-f1cc8850.js';
+import '../index.module-a7bb5fb3.js';
 import './image-viewer/slide.js';
 import './image-viewer/paths.js';
 import './image-viewer/video/index.js';

package/gallery/modern/index.js

@@ -9,7 +9,7 @@ import './context.js';
 import './utils/utils.js';
 import './components/image-viewer/hooks.js';
 import 'element-closest';
-import './index.module-f1cc8850.js';
+import './index.module-a7bb5fb3.js';
 import './components/image-viewer/slide.js';
 import '../../typography/modern';
 import './components/image-viewer/paths.js';

package/input/components/base-input/Component.d.ts

@@ -23,7 +23,7 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Набор цветов для компонента
      */
@@ -161,7 +161,7 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Набор цветов для компонента
      */

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

@@ -18,7 +18,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var defaultColors = {"input":"input__input_7ky2u","hasInnerLabel":"input__hasInnerLabel_7ky2u","disableUserInput":"input__disableUserInput_7ky2u","error":"input__error_7ky2u"};
 require('./default.css');
 
-var styles = {"input":"input__input_l7ggy","hasInnerLabel":"input__hasInnerLabel_l7ggy","size-48":"input__size-48_l7ggy","size-56":"input__size-56_l7ggy","size-64":"input__size-64_l7ggy","size-72":"input__size-72_l7ggy","block":"input__block_l7ggy","errorIcon":"input__errorIcon_l7ggy","successIcon":"input__successIcon_l7ggy","disableUserInput":"input__disableUserInput_l7ggy","focusVisible":"input__focusVisible_l7ggy","onautofillstart":"input__onautofillstart_l7ggy","onautofillcancel":"input__onautofillcancel_l7ggy"};
+var styles = {"input":"input__input_l7ggy","size-40":"input__size-40_l7ggy","hasInnerLabel":"input__hasInnerLabel_l7ggy","size-48":"input__size-48_l7ggy","size-56":"input__size-56_l7ggy","size-64":"input__size-64_l7ggy","size-72":"input__size-72_l7ggy","block":"input__block_l7ggy","errorIcon":"input__errorIcon_l7ggy","successIcon":"input__successIcon_l7ggy","disableUserInput":"input__disableUserInput_l7ggy","focusVisible":"input__focusVisible_l7ggy","onautofillstart":"input__onautofillstart_l7ggy","onautofillcancel":"input__onautofillcancel_l7ggy"};
 require('./index.css');
 
 var invertedColors = {"input":"input__input_6a9i7","hasInnerLabel":"input__hasInnerLabel_6a9i7","disableUserInput":"input__disableUserInput_6a9i7","error":"input__error_6a9i7"};
@@ -33,6 +33,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',
@@ -133,17 +134,17 @@ var BaseInput = React__default.default.forwardRef(function (_a, ref) {
     var renderRightAddons = function () {
         var addonsVisible = clearButtonVisible || rightAddons || error || success;
         return (addonsVisible && (React__default.default.createElement(React.Fragment, null,
-            clearButtonVisible && (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon') })),
+            clearButtonVisible && (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon'), size: size })),
             rightAddons,
-            error && (React__default.default.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
-                React__default.default.createElement(coreComponentsStatusBadge.StatusBadge, { view: 'negative-alert', size: 20, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'error-icon') }))),
-            success && !error && (React__default.default.createElement("div", { className: styles.successIcon },
-                React__default.default.createElement(coreComponentsStatusBadge.StatusBadge, { view: 'positive-checkmark', size: 20, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'success-icon') }))))));
+            error && (React__default.default.createElement("div", { className: cn__default.default(styles.errorIcon, styles["size-".concat(size)]), "data-addon": 'error-icon' },
+                React__default.default.createElement(coreComponentsStatusBadge.StatusBadge, { view: 'negative-alert', size: size === 40 ? 16 : 20, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'error-icon') }))),
+            success && !error && (React__default.default.createElement("div", { className: cn__default.default(styles.successIcon, styles["size-".concat(size)]) },
+                React__default.default.createElement(coreComponentsStatusBadge.StatusBadge, { view: 'positive-checkmark', size: size === 40 ? 16 : 20, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'success-icon') }))))));
     };
     return FormControlComponent ? (React__default.default.createElement(FormControlComponent, { ref: wrapperRef, className: cn__default.default(className, focused && focusedClassName, filled && filledClassName), fieldClassName: cn__default.default(fieldClassName, (_b = {},
             _b[styles.focusVisible] = focusVisible,
             _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, readOnly: readOnlyProp, filled: filled || autofilled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control'), rightAddonsProps: rightAddonsProps, leftAddonsProps: leftAddonsProps },
-        React__default.default.createElement("input", tslib.__assign({}, restProps, { className: cn__default.default(styles.input, colorCommonStyles[colors].input, (_c = {},
+        React__default.default.createElement("input", tslib.__assign({}, restProps, { className: cn__default.default(styles.input, styles["size-".concat(size)], colorCommonStyles[colors].input, (_c = {},
                 _c[styles.disableUserInput] = disableUserInput,
                 _c[colorCommonStyles[colors].disableUserInput] = disableUserInput,
                 _c[colorCommonStyles[colors].error] = error,

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

@@ -15,12 +15,14 @@
 
     /* новые значения, используйте их */
 } :root { /* deprecated */
-    --gap-2xs: 4px; /* deprecated */ /* deprecated */
+    --gap-2xs: 4px; /* deprecated */
+    --gap-xs: 8px; /* deprecated */
     --gap-s: 12px; /* 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 */
 
     /* новые значения, используйте их */
     --gap-0: 0;
     --gap-4: var(--gap-2xs);
+    --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
 } :root {
 } :root {
@@ -28,6 +30,7 @@
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
     --disabled-cursor: not-allowed;
+    --size-xs-height: 40px;
     --size-s-height: 48px;
     --size-m-height: 56px;
     --size-l-height: 64px;
@@ -43,6 +46,7 @@
     /* error */
 
     /* height */
+    --form-control-40-min-height: var(--size-xs-height);
     --form-control-s-min-height: var(--size-s-height);
     --form-control-m-min-height: var(--size-m-height);
     --form-control-l-min-height: var(--size-l-height);
@@ -92,11 +96,18 @@
     outline: none;
     text-overflow: ellipsis;
     box-sizing: border-box;
-    -webkit-appearance: none;
-} .input__input_l7ggy::placeholder {
+    -webkit-appearance: none
+} .input__input_l7ggy.input__size-40_l7ggy {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+        padding: var(--gap-0) var(--gap-8);
+    } .input__input_l7ggy::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 } .input__hasInnerLabel_l7ggy::placeholder {
         opacity: 0;
+    } .input__hasInnerLabel_l7ggy.input__size-40_l7ggy {
+        height: var(--form-control-40-min-height);
     } .input__hasInnerLabel_l7ggy.input__size-48_l7ggy {
         height: var(--form-control-s-min-height);
     } .input__hasInnerLabel_l7ggy.input__size-56_l7ggy {
@@ -111,6 +122,8 @@
     display: var(--input-error-icon-display)
 } .input__errorIcon_l7ggy:not(:only-child) {
         margin-left: var(--gap-4);
+    } .input__errorIcon_l7ggy.input__size-40_l7ggy:not(:only-child) {
+        margin-left: 6px;
     } * + .input__errorIcon_l7ggy {
     display: var(--input-error-icon-not-alone-display);
 } button[class*='eye'] + .input__errorIcon_l7ggy {
@@ -119,6 +132,8 @@
     display: var(--input-success-icon-display)
 } .input__successIcon_l7ggy:not(:only-child) {
         margin-left: var(--gap-4);
+    } .input__successIcon_l7ggy.input__size-40_l7ggy:not(:only-child) {
+        margin-left: 6px;
     } button[class*='eye'] + .input__successIcon_l7ggy {
     margin-right: var(--gap-12);
 } /* DISABLED STATE */ .input__input_l7ggy:disabled {

package/input/components/clear-button/Component.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import React from 'react';
+import { BaseInputProps } from "../base-input/index";
 interface ClearButtonProps {
     disabled?: boolean;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     colors: 'default' | 'inverted';
     dataTestId?: string;
+    size?: BaseInputProps['size'];
 }
 declare const ClearButton: React.FC<ClearButtonProps>;
 export { ClearButton };

package/input/components/clear-button/Component.js

@@ -4,6 +4,7 @@ var React = require('react');
 var cn = require('classnames');
 var coreComponentsButton = require('../../../button');
 var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
+var CrossCircleSIcon = require('@alfalab/icons-glyph/CrossCircleSIcon');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -13,7 +14,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var defaultColors = {"clearIcon":"input__clearIcon_w1uiy"};
 require('./default.css');
 
-var styles = {"clearIcon":"input__clearIcon_1rhtk","clearButton":"input__clearButton_1rhtk"};
+var styles = {"clearIcon":"input__clearIcon_1rhtk","clearButton":"input__clearButton_1rhtk","size-40":"input__size-40_1rhtk"};
 require('./index.css');
 
 var invertedColors = {"clearIcon":"input__clearIcon_1w65b"};
@@ -25,9 +26,10 @@ var colorStyles = {
 };
 var preventDefault = function (e) { return e.preventDefault(); };
 var ClearButton = function (_a) {
-    var colors = _a.colors, disabled = _a.disabled, onClick = _a.onClick, dataTestId = _a.dataTestId;
-    return (React__default.default.createElement(coreComponentsButton.Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault, dataTestId: dataTestId },
-        React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, { className: cn__default.default(styles.clearIcon, colorStyles[colors].clearIcon) })));
+    var colors = _a.colors, disabled = _a.disabled, onClick = _a.onClick, dataTestId = _a.dataTestId, size = _a.size;
+    var IconComponent = size === 40 ? CrossCircleSIcon.CrossCircleSIcon : CrossCircleMIcon.CrossCircleMIcon;
+    return (React__default.default.createElement(coreComponentsButton.Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: cn__default.default(styles.clearButton, styles["size-".concat(size)]), onClick: onClick, tabIndex: -1, onMouseDown: preventDefault, dataTestId: dataTestId },
+        React__default.default.createElement(IconComponent, { className: cn__default.default(styles.clearIcon, colorStyles[colors].clearIcon) })));
 };
 
 exports.ClearButton = ClearButton;

package/input/components/clear-button/index.css

@@ -63,7 +63,9 @@
     display: block;
     transition: opacity 0.2s ease;
 } .input__clearButton_1rhtk + * {
-    margin-left: var(--gap-4);
-} .input__clearButton_1rhtk + [data-addon='error-icon'] {
+        margin-left: var(--gap-4);
+    } .input__clearButton_1rhtk.input__size-40_1rhtk + * {
+        margin-left: 6px;
+    } .input__clearButton_1rhtk + [data-addon='error-icon'] {
     display: var(--input-error-icon-display);
 }

package/input/cssm/components/base-input/Component.d.ts

@@ -23,7 +23,7 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Набор цветов для компонента
      */
@@ -161,7 +161,7 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Набор цветов для компонента
      */