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

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

@@ -30,6 +30,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',
@@ -130,17 +131,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__default.default.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__default.default.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__default.default.errorIcon, styles__default.default["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__default.default.successIcon, styles__default.default["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__default.default.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__default.default.input, colorCommonStyles[colors].input, (_c = {},
+        React__default.default.createElement("input", tslib.__assign({}, restProps, { className: cn__default.default(styles__default.default.input, styles__default.default["size-".concat(size)], colorCommonStyles[colors].input, (_c = {},
                 _c[styles__default.default.disableUserInput] = disableUserInput,
                 _c[colorCommonStyles[colors].disableUserInput] = disableUserInput,
                 _c[colorCommonStyles[colors].error] = error,

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

@@ -14,12 +14,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 {
@@ -27,6 +29,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;
@@ -42,6 +45,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);
@@ -91,11 +95,18 @@
     outline: none;
     text-overflow: ellipsis;
     box-sizing: border-box;
-    -webkit-appearance: none;
-} .input::placeholder {
+    -webkit-appearance: none
+} .input.size-40 {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+        padding: var(--gap-0) var(--gap-8);
+    } .input::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 } .hasInnerLabel::placeholder {
         opacity: 0;
+    } .hasInnerLabel.size-40 {
+        height: var(--form-control-40-min-height);
     } .hasInnerLabel.size-48 {
         height: var(--form-control-s-min-height);
     } .hasInnerLabel.size-56 {
@@ -110,6 +121,8 @@
     display: var(--input-error-icon-display)
 } .errorIcon:not(:only-child) {
         margin-left: var(--gap-4);
+    } .errorIcon.size-40:not(:only-child) {
+        margin-left: 6px;
     } * + .errorIcon {
     display: var(--input-error-icon-not-alone-display);
 } button[class*='eye'] + .errorIcon {
@@ -118,6 +131,8 @@
     display: var(--input-success-icon-display)
 } .successIcon:not(:only-child) {
         margin-left: var(--gap-4);
+    } .successIcon.size-40:not(:only-child) {
+        margin-left: 6px;
     } button[class*='eye'] + .successIcon {
     margin-right: var(--gap-12);
 } /* DISABLED STATE */ .input:disabled {

package/input/cssm/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/cssm/components/clear-button/Component.js

@@ -4,6 +4,7 @@ var React = require('react');
 var cn = require('classnames');
 var coreComponentsButton = require('../../../../button/cssm');
 var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
+var CrossCircleSIcon = require('@alfalab/icons-glyph/CrossCircleSIcon');
 var defaultColors = require('./default.module.css');
 var styles = require('./index.module.css');
 var invertedColors = require('./inverted.module.css');
@@ -22,9 +23,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__default.default.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault, dataTestId: dataTestId },
-        React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, { className: cn__default.default(styles__default.default.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__default.default.clearButton, styles__default.default["size-".concat(size)]), onClick: onClick, tabIndex: -1, onMouseDown: preventDefault, dataTestId: dataTestId },
+        React__default.default.createElement(IconComponent, { className: cn__default.default(styles__default.default.clearIcon, colorStyles[colors].clearIcon) })));
 };
 
 exports.ClearButton = ClearButton;

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

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

package/input/esm/Component.responsive.js

@@ -13,6 +13,7 @@ import '@alfalab/hooks';
 import './components/clear-button/Component.js';
 import '../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 import '../../form-control/esm/mobile';
 
 var Input = forwardRef(function (_a, ref) {

package/input/esm/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/esm/components/base-input/Component.js

@@ -8,11 +8,12 @@ import { useFocus, useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { ClearButton } from '../clear-button/Component.js';
 import '../../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 
 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"};
@@ -27,6 +28,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',
@@ -127,17 +129,17 @@ var BaseInput = React.forwardRef(function (_a, ref) {
     var renderRightAddons = function () {
         var addonsVisible = clearButtonVisible || rightAddons || error || success;
         return (addonsVisible && (React.createElement(Fragment, null,
-            clearButtonVisible && (React.createElement(ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: getDataTestId(dataTestId, 'clear-icon') })),
+            clearButtonVisible && (React.createElement(ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: getDataTestId(dataTestId, 'clear-icon'), size: size })),
             rightAddons,
-            error && (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
-                React.createElement(StatusBadge, { view: 'negative-alert', size: 20, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
-            success && !error && (React.createElement("div", { className: styles.successIcon },
-                React.createElement(StatusBadge, { view: 'positive-checkmark', size: 20, dataTestId: getDataTestId(dataTestId, 'success-icon') }))))));
+            error && (React.createElement("div", { className: cn(styles.errorIcon, styles["size-".concat(size)]), "data-addon": 'error-icon' },
+                React.createElement(StatusBadge, { view: 'negative-alert', size: size === 40 ? 16 : 20, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
+            success && !error && (React.createElement("div", { className: cn(styles.successIcon, styles["size-".concat(size)]) },
+                React.createElement(StatusBadge, { view: 'positive-checkmark', size: size === 40 ? 16 : 20, dataTestId: getDataTestId(dataTestId, 'success-icon') }))))));
     };
     return FormControlComponent ? (React.createElement(FormControlComponent, { ref: wrapperRef, className: cn(className, focused && focusedClassName, filled && filledClassName), fieldClassName: cn(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: getDataTestId(dataTestId, 'form-control'), rightAddonsProps: rightAddonsProps, leftAddonsProps: leftAddonsProps },
-        React.createElement("input", __assign({}, restProps, { className: cn(styles.input, colorCommonStyles[colors].input, (_c = {},
+        React.createElement("input", __assign({}, restProps, { className: cn(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/esm/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/esm/components/base-input/index.js

@@ -9,3 +9,4 @@ import '@alfalab/hooks';
 import '../clear-button/Component.js';
 import '../../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';

package/input/esm/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/esm/components/clear-button/Component.js

@@ -2,11 +2,12 @@ import React from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../button/esm';
 import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
+import { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon';
 
 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"};
@@ -18,9 +19,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.createElement(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.createElement(CrossCircleMIcon, { className: cn(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 : CrossCircleMIcon;
+    return (React.createElement(Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: cn(styles.clearButton, styles["size-".concat(size)]), onClick: onClick, tabIndex: -1, onMouseDown: preventDefault, dataTestId: dataTestId },
+        React.createElement(IconComponent, { className: cn(styles.clearIcon, colorStyles[colors].clearIcon) })));
 };
 
 export { ClearButton };

package/input/esm/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/esm/components/clear-button/index.js

@@ -3,3 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';

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

@@ -10,6 +10,7 @@ import '@alfalab/hooks';
 import '../components/clear-button/Component.js';
 import '../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 
 var InputDesktop = forwardRef(function (restProps, ref) { return (React.createElement(BaseInput, __assign({}, restProps, { FormControlComponent: FormControlDesktop, ref: ref }))); });
 

package/input/esm/desktop/index.js

@@ -11,3 +11,4 @@ import '@alfalab/hooks';
 import '../components/clear-button/Component.js';
 import '../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';

package/input/esm/index.js

@@ -13,5 +13,6 @@ import '@alfalab/hooks';
 import './components/clear-button/Component.js';
 import '../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 import './mobile/Component.mobile.js';
 import '../../form-control/esm/mobile';

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

@@ -10,6 +10,7 @@ import '@alfalab/hooks';
 import '../components/clear-button/Component.js';
 import '../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 
 var InputMobile = forwardRef(function (restProps, ref) { return (React.createElement(BaseInput, __assign({}, restProps, { FormControlComponent: FormControlMobile, ref: ref }))); });
 

package/input/esm/mobile/index.js

@@ -11,3 +11,4 @@ import '@alfalab/hooks';
 import '../components/clear-button/Component.js';
 import '../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';

package/input/esm/shared/index.js

@@ -4,4 +4,5 @@ import 'react';
 import 'classnames';
 import '../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 import '../../../shared/esm';

package/input/modern/Component.responsive.js

@@ -12,6 +12,7 @@ import '@alfalab/hooks';
 import './components/clear-button/Component.js';
 import '../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 import '../../form-control/modern/mobile';
 
 const Input = forwardRef(({ breakpoint, client, defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop', ...restProps }, ref) => {

package/input/modern/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/modern/components/base-input/Component.js

@@ -7,11 +7,12 @@ import { useFocus, useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { ClearButton } from '../clear-button/Component.js';
 import '../../../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 
 const defaultColors = {"input":"input__input_7ky2u","hasInnerLabel":"input__hasInnerLabel_7ky2u","disableUserInput":"input__disableUserInput_7ky2u","error":"input__error_7ky2u"};
 require('./default.css');
 
-const 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"};
+const 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');
 
 const invertedColors = {"input":"input__input_6a9i7","hasInnerLabel":"input__hasInnerLabel_6a9i7","disableUserInput":"input__disableUserInput_6a9i7","error":"input__error_6a9i7"};
@@ -26,6 +27,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',
@@ -124,17 +126,17 @@ const BaseInput = React.forwardRef(({ size = 48, type = 'text', block = false, c
     const renderRightAddons = () => {
         const addonsVisible = clearButtonVisible || rightAddons || error || success;
         return (addonsVisible && (React.createElement(Fragment, null,
-            clearButtonVisible && (React.createElement(ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: getDataTestId(dataTestId, 'clear-icon') })),
+            clearButtonVisible && (React.createElement(ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: getDataTestId(dataTestId, 'clear-icon'), size: size })),
             rightAddons,
-            error && (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
-                React.createElement(StatusBadge, { view: 'negative-alert', size: 20, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
-            success && !error && (React.createElement("div", { className: styles.successIcon },
-                React.createElement(StatusBadge, { view: 'positive-checkmark', size: 20, dataTestId: getDataTestId(dataTestId, 'success-icon') }))))));
+            error && (React.createElement("div", { className: cn(styles.errorIcon, styles[`size-${size}`]), "data-addon": 'error-icon' },
+                React.createElement(StatusBadge, { view: 'negative-alert', size: size === 40 ? 16 : 20, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
+            success && !error && (React.createElement("div", { className: cn(styles.successIcon, styles[`size-${size}`]) },
+                React.createElement(StatusBadge, { view: 'positive-checkmark', size: size === 40 ? 16 : 20, dataTestId: getDataTestId(dataTestId, 'success-icon') }))))));
     };
     return FormControlComponent ? (React.createElement(FormControlComponent, { ref: wrapperRef, className: cn(className, focused && focusedClassName, filled && filledClassName), fieldClassName: cn(fieldClassName, {
             [styles.focusVisible]: focusVisible,
         }), 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: getDataTestId(dataTestId, 'form-control'), rightAddonsProps: rightAddonsProps, leftAddonsProps: leftAddonsProps },
-        React.createElement("input", { ...restProps, className: cn(styles.input, colorCommonStyles[colors].input, {
+        React.createElement("input", { ...restProps, className: cn(styles.input, styles[`size-${size}`], colorCommonStyles[colors].input, {
                 [styles.disableUserInput]: disableUserInput,
                 [colorCommonStyles[colors].disableUserInput]: disableUserInput,
                 [colorCommonStyles[colors].error]: error,

package/input/modern/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/modern/components/base-input/index.js

@@ -8,3 +8,4 @@ import '@alfalab/hooks';
 import '../clear-button/Component.js';
 import '../../../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';

package/input/modern/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/modern/components/clear-button/Component.js

@@ -2,11 +2,12 @@ import React from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../button/modern';
 import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
+import { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon';
 
 const defaultColors = {"clearIcon":"input__clearIcon_w1uiy"};
 require('./default.css');
 
-const styles = {"clearIcon":"input__clearIcon_1rhtk","clearButton":"input__clearButton_1rhtk"};
+const styles = {"clearIcon":"input__clearIcon_1rhtk","clearButton":"input__clearButton_1rhtk","size-40":"input__size-40_1rhtk"};
 require('./index.css');
 
 const invertedColors = {"clearIcon":"input__clearIcon_1w65b"};
@@ -17,7 +18,10 @@ const colorStyles = {
     inverted: invertedColors,
 };
 const preventDefault = (e) => e.preventDefault();
-const ClearButton = ({ colors, disabled, onClick, dataTestId, }) => (React.createElement(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.createElement(CrossCircleMIcon, { className: cn(styles.clearIcon, colorStyles[colors].clearIcon) })));
+const ClearButton = ({ colors, disabled, onClick, dataTestId, size, }) => {
+    const IconComponent = size === 40 ? CrossCircleSIcon : CrossCircleMIcon;
+    return (React.createElement(Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: cn(styles.clearButton, styles[`size-${size}`]), onClick: onClick, tabIndex: -1, onMouseDown: preventDefault, dataTestId: dataTestId },
+        React.createElement(IconComponent, { className: cn(styles.clearIcon, colorStyles[colors].clearIcon) })));
+};
 
 export { ClearButton };