@alfalab/core-components 45.9.0-beta.3 → 45.10.0

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

@@ -140,7 +140,7 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type
      */
     disableUserInput?: boolean;
 };
-declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
+declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
     /**
      * Значение поля ввода
      */

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

@@ -4,11 +4,9 @@ var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
-var coreComponentsBadge = require('../../../../badge/cssm');
 var coreComponentsShared = require('../../../../shared/cssm');
+var coreComponentsStatusBadge = require('../../../../status-badge/cssm');
 var hooks = require('@alfalab/hooks');
-var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 var components_clearButton_Component = require('../clear-button/Component.js');
 var defaultColors = require('./default.module.css');
 var styles = require('./index.module.css');
@@ -95,12 +93,12 @@ 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 })),
+            clearButtonVisible && (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon') })),
             rightAddons,
             error && (React__default.default.createElement("div", { className: styles__default.default.errorIcon, "data-addon": 'error-icon' },
-                React__default.default.createElement(coreComponentsBadge.Badge, { view: 'icon', size: 'm', iconColor: 'negative', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, { className: styles__default.default.errorColorIcon }) }))),
+                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(coreComponentsBadge.Badge, { view: 'icon', size: 'm', iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: styles__default.default.successColorIcon }) }))))));
+                React__default.default.createElement(coreComponentsStatusBadge.StatusBadge, { view: 'positive-checkmark', size: 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,

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

@@ -1,8 +1,6 @@
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-border-link: #2288fa;
-    --color-light-status-negative: #ff4837;
-    --color-light-status-positive: #0cc44d; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-border-link: #2288fa; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -109,16 +107,12 @@
     display: var(--input-error-icon-not-alone-display);
 } button[class*='eye'] + .errorIcon {
     margin-right: var(--gap-s);
-} .errorColorIcon {
-    color: var(--color-light-status-negative);
 } .successIcon {
     display: var(--input-success-icon-display)
 } .successIcon:not(:only-child) {
         margin-left: var(--gap-2xs);
     } button[class*='eye'] + .successIcon {
     margin-right: var(--gap-s);
-} .successColorIcon {
-    color: var(--color-light-status-positive);
 } /* DISABLED STATE */ .input:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;

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

@@ -4,6 +4,7 @@ interface ClearButtonProps {
     disabled?: boolean;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     colors: 'default' | 'inverted';
+    dataTestId?: string;
 }
 declare const ClearButton: React.FC<ClearButtonProps>;
 export { ClearButton };

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

@@ -22,8 +22,8 @@ var colorStyles = {
 };
 var preventDefault = function (e) { return e.preventDefault(); };
 var ClearButton = function (_a) {
-    var colors = _a.colors, disabled = _a.disabled, onClick = _a.onClick;
-    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 },
+    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) })));
 };
 

package/input/cssm/utils.d.ts

@@ -6,5 +6,8 @@ declare function getInputTestIds(dataTestId: string): {
     rightAddons: string;
     error: string;
     hint: string;
+    errorIcon: string;
+    successIcon: string;
+    clearIcon: string;
 };
 export { getInputTestIds };

package/input/cssm/utils.js

@@ -11,6 +11,9 @@ function getInputTestIds(dataTestId) {
         rightAddons: coreComponentsShared.getDataTestId(dataTestId, 'form-control-right-addons'),
         error: coreComponentsShared.getDataTestId(dataTestId, 'form-control-error-message'),
         hint: coreComponentsShared.getDataTestId(dataTestId, 'form-control-hint'),
+        errorIcon: coreComponentsShared.getDataTestId(dataTestId, 'error-icon'),
+        successIcon: coreComponentsShared.getDataTestId(dataTestId, 'success-icon'),
+        clearIcon: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon'),
     };
 }
 

package/input/esm/Component.responsive.js

@@ -7,11 +7,9 @@ import '../../form-control/esm/desktop';
 import './components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../badge/esm';
 import '../../shared/esm';
+import '../../status-badge/esm';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import './components/clear-button/Component.js';
 import '../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

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

@@ -140,7 +140,7 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type
      */
     disableUserInput?: boolean;
 };
-declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
+declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
     /**
      * Значение поля ввода
      */

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

@@ -2,11 +2,9 @@ import { __rest, __assign } from 'tslib';
 import React, { useRef, useState, useCallback, Fragment } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { Badge } from '../../../../badge/esm';
 import { getDataTestId } from '../../../../shared/esm';
+import { StatusBadge } from '../../../../status-badge/esm';
 import { useFocus } from '@alfalab/hooks';
-import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import { ClearButton } from '../clear-button/Component.js';
 import '../../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
@@ -14,7 +12,7 @@ import '@alfalab/icons-glyph/CrossCircleMIcon';
 var defaultColors = {"input":"input__input_eg1rv","hasInnerLabel":"input__hasInnerLabel_eg1rv","disableUserInput":"input__disableUserInput_eg1rv","error":"input__error_eg1rv"};
 require('./default.css');
 
-var styles = {"input":"input__input_1p1fb","hasInnerLabel":"input__hasInnerLabel_1p1fb","size-48":"input__size-48_1p1fb","size-56":"input__size-56_1p1fb","size-64":"input__size-64_1p1fb","size-72":"input__size-72_1p1fb","block":"input__block_1p1fb","errorIcon":"input__errorIcon_1p1fb","errorColorIcon":"input__errorColorIcon_1p1fb","successIcon":"input__successIcon_1p1fb","successColorIcon":"input__successColorIcon_1p1fb","focusVisible":"input__focusVisible_1p1fb","onautofillstart":"input__onautofillstart_1p1fb","onautofillcancel":"input__onautofillcancel_1p1fb"};
+var styles = {"input":"input__input_1p1fb","hasInnerLabel":"input__hasInnerLabel_1p1fb","size-48":"input__size-48_1p1fb","size-56":"input__size-56_1p1fb","size-64":"input__size-64_1p1fb","size-72":"input__size-72_1p1fb","block":"input__block_1p1fb","errorIcon":"input__errorIcon_1p1fb","successIcon":"input__successIcon_1p1fb","focusVisible":"input__focusVisible_1p1fb","onautofillstart":"input__onautofillstart_1p1fb","onautofillcancel":"input__onautofillcancel_1p1fb"};
 require('./index.css');
 
 var invertedColors = {"input":"input__input_39l17","hasInnerLabel":"input__hasInnerLabel_39l17","disableUserInput":"input__disableUserInput_39l17","error":"input__error_39l17"};
@@ -92,12 +90,12 @@ 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 })),
+            clearButtonVisible && (React.createElement(ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: getDataTestId(dataTestId, 'clear-icon') })),
             rightAddons,
             error && (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
-                React.createElement(Badge, { view: 'icon', size: 'm', iconColor: 'negative', content: React.createElement(ExclamationCircleMIcon, { className: styles.errorColorIcon }) }))),
+                React.createElement(StatusBadge, { view: 'negative-alert', size: 20, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
             success && !error && (React.createElement("div", { className: styles.successIcon },
-                React.createElement(Badge, { view: 'icon', size: 'm', iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, { className: styles.successColorIcon }) }))))));
+                React.createElement(StatusBadge, { view: 'positive-checkmark', size: 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,

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

@@ -1,9 +1,7 @@
 /* hash: 16880 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-border-link: #2288fa;
-    --color-light-status-negative: #ff4837;
-    --color-light-status-positive: #0cc44d; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-border-link: #2288fa; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -110,16 +108,12 @@
     display: var(--input-error-icon-not-alone-display);
 } button[class*='eye'] + .input__errorIcon_1p1fb {
     margin-right: var(--gap-s);
-} .input__errorColorIcon_1p1fb {
-    color: var(--color-light-status-negative);
 } .input__successIcon_1p1fb {
     display: var(--input-success-icon-display)
 } .input__successIcon_1p1fb:not(:only-child) {
         margin-left: var(--gap-2xs);
     } button[class*='eye'] + .input__successIcon_1p1fb {
     margin-right: var(--gap-s);
-} .input__successColorIcon_1p1fb {
-    color: var(--color-light-status-positive);
 } /* DISABLED STATE */ .input__input_1p1fb:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;

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

@@ -3,11 +3,9 @@ import 'tslib';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
-import '../../../../badge/esm';
 import '../../../../shared/esm';
+import '../../../../status-badge/esm';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../clear-button/Component.js';
 import '../../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

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

@@ -4,6 +4,7 @@ interface ClearButtonProps {
     disabled?: boolean;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     colors: 'default' | 'inverted';
+    dataTestId?: string;
 }
 declare const ClearButton: React.FC<ClearButtonProps>;
 export { ClearButton };

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

@@ -18,8 +18,8 @@ var colorStyles = {
 };
 var preventDefault = function (e) { return e.preventDefault(); };
 var ClearButton = function (_a) {
-    var colors = _a.colors, disabled = _a.disabled, onClick = _a.onClick;
-    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 },
+    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) })));
 };
 

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

@@ -4,11 +4,9 @@ import { FormControlDesktop } from '../../../form-control/esm/desktop';
 import { BaseInput } from '../components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../../badge/esm';
 import '../../../shared/esm';
+import '../../../status-badge/esm';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../components/clear-button/Component.js';
 import '../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

package/input/esm/desktop/index.js

@@ -5,11 +5,9 @@ import '../../../form-control/esm/desktop';
 import '../components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../../badge/esm';
 import '../../../shared/esm';
+import '../../../status-badge/esm';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../components/clear-button/Component.js';
 import '../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

package/input/esm/index.js

@@ -7,11 +7,9 @@ import '../../form-control/esm/desktop';
 import './components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../badge/esm';
 import '../../shared/esm';
+import '../../status-badge/esm';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import './components/clear-button/Component.js';
 import '../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

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

@@ -4,11 +4,9 @@ import { FormControlMobile } from '../../../form-control/esm/mobile';
 import { BaseInput } from '../components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../../badge/esm';
 import '../../../shared/esm';
+import '../../../status-badge/esm';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../components/clear-button/Component.js';
 import '../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

package/input/esm/mobile/index.js

@@ -5,11 +5,9 @@ import '../../../form-control/esm/mobile';
 import '../components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../../badge/esm';
 import '../../../shared/esm';
+import '../../../status-badge/esm';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../components/clear-button/Component.js';
 import '../../../button/esm';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

package/input/esm/utils.d.ts

@@ -6,5 +6,8 @@ declare function getInputTestIds(dataTestId: string): {
     rightAddons: string;
     error: string;
     hint: string;
+    errorIcon: string;
+    successIcon: string;
+    clearIcon: string;
 };
 export { getInputTestIds };

package/input/esm/utils.js

@@ -9,6 +9,9 @@ function getInputTestIds(dataTestId) {
         rightAddons: getDataTestId(dataTestId, 'form-control-right-addons'),
         error: getDataTestId(dataTestId, 'form-control-error-message'),
         hint: getDataTestId(dataTestId, 'form-control-hint'),
+        errorIcon: getDataTestId(dataTestId, 'error-icon'),
+        successIcon: getDataTestId(dataTestId, 'success-icon'),
+        clearIcon: getDataTestId(dataTestId, 'clear-icon'),
     };
 }
 

package/input/modern/Component.responsive.js

@@ -6,11 +6,9 @@ import '../../form-control/modern/desktop';
 import './components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../badge/modern';
 import '../../shared/modern';
+import '../../status-badge/modern';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import './components/clear-button/Component.js';
 import '../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

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

@@ -140,7 +140,7 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type
      */
     disableUserInput?: boolean;
 };
-declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
+declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
     /**
      * Значение поля ввода
      */

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

@@ -1,11 +1,9 @@
 import React, { useRef, useState, useCallback, Fragment } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { Badge } from '../../../../badge/modern';
 import { getDataTestId } from '../../../../shared/modern';
+import { StatusBadge } from '../../../../status-badge/modern';
 import { useFocus } from '@alfalab/hooks';
-import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import { ClearButton } from '../clear-button/Component.js';
 import '../../../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
@@ -13,7 +11,7 @@ import '@alfalab/icons-glyph/CrossCircleMIcon';
 const defaultColors = {"input":"input__input_eg1rv","hasInnerLabel":"input__hasInnerLabel_eg1rv","disableUserInput":"input__disableUserInput_eg1rv","error":"input__error_eg1rv"};
 require('./default.css');
 
-const styles = {"input":"input__input_1p1fb","hasInnerLabel":"input__hasInnerLabel_1p1fb","size-48":"input__size-48_1p1fb","size-56":"input__size-56_1p1fb","size-64":"input__size-64_1p1fb","size-72":"input__size-72_1p1fb","block":"input__block_1p1fb","errorIcon":"input__errorIcon_1p1fb","errorColorIcon":"input__errorColorIcon_1p1fb","successIcon":"input__successIcon_1p1fb","successColorIcon":"input__successColorIcon_1p1fb","focusVisible":"input__focusVisible_1p1fb","onautofillstart":"input__onautofillstart_1p1fb","onautofillcancel":"input__onautofillcancel_1p1fb"};
+const styles = {"input":"input__input_1p1fb","hasInnerLabel":"input__hasInnerLabel_1p1fb","size-48":"input__size-48_1p1fb","size-56":"input__size-56_1p1fb","size-64":"input__size-64_1p1fb","size-72":"input__size-72_1p1fb","block":"input__block_1p1fb","errorIcon":"input__errorIcon_1p1fb","successIcon":"input__successIcon_1p1fb","focusVisible":"input__focusVisible_1p1fb","onautofillstart":"input__onautofillstart_1p1fb","onautofillcancel":"input__onautofillcancel_1p1fb"};
 require('./index.css');
 
 const invertedColors = {"input":"input__input_39l17","hasInnerLabel":"input__hasInnerLabel_39l17","disableUserInput":"input__disableUserInput_39l17","error":"input__error_39l17"};
@@ -89,12 +87,12 @@ 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 })),
+            clearButtonVisible && (React.createElement(ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: getDataTestId(dataTestId, 'clear-icon') })),
             rightAddons,
             error && (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
-                React.createElement(Badge, { view: 'icon', size: 'm', iconColor: 'negative', content: React.createElement(ExclamationCircleMIcon, { className: styles.errorColorIcon }) }))),
+                React.createElement(StatusBadge, { view: 'negative-alert', size: 20, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
             success && !error && (React.createElement("div", { className: styles.successIcon },
-                React.createElement(Badge, { view: 'icon', size: 'm', iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, { className: styles.successColorIcon }) }))))));
+                React.createElement(StatusBadge, { view: 'positive-checkmark', size: 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,

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

@@ -1,9 +1,7 @@
 /* hash: 16880 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-border-link: #2288fa;
-    --color-light-status-negative: #ff4837;
-    --color-light-status-positive: #0cc44d; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-border-link: #2288fa; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -110,16 +108,12 @@
     display: var(--input-error-icon-not-alone-display);
 } button[class*='eye'] + .input__errorIcon_1p1fb {
     margin-right: var(--gap-s);
-} .input__errorColorIcon_1p1fb {
-    color: var(--color-light-status-negative);
 } .input__successIcon_1p1fb {
     display: var(--input-success-icon-display)
 } .input__successIcon_1p1fb:not(:only-child) {
         margin-left: var(--gap-2xs);
     } button[class*='eye'] + .input__successIcon_1p1fb {
     margin-right: var(--gap-s);
-} .input__successColorIcon_1p1fb {
-    color: var(--color-light-status-positive);
 } /* DISABLED STATE */ .input__input_1p1fb:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;

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

@@ -2,11 +2,9 @@ export { BaseInput } from './Component.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
-import '../../../../badge/modern';
 import '../../../../shared/modern';
+import '../../../../status-badge/modern';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../clear-button/Component.js';
 import '../../../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

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

@@ -4,6 +4,7 @@ interface ClearButtonProps {
     disabled?: boolean;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     colors: 'default' | 'inverted';
+    dataTestId?: string;
 }
 declare const ClearButton: React.FC<ClearButtonProps>;
 export { ClearButton };

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

@@ -17,7 +17,7 @@ const colorStyles = {
     inverted: invertedColors,
 };
 const preventDefault = (e) => e.preventDefault();
-const ClearButton = ({ colors, disabled, onClick }) => (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 },
+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) })));
 
 export { ClearButton };

package/input/modern/desktop/Component.desktop.js

@@ -3,11 +3,9 @@ import { FormControlDesktop } from '../../../form-control/modern/desktop';
 import { BaseInput } from '../components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../../badge/modern';
 import '../../../shared/modern';
+import '../../../status-badge/modern';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../components/clear-button/Component.js';
 import '../../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

package/input/modern/desktop/index.js

@@ -4,11 +4,9 @@ import '../../../form-control/modern/desktop';
 import '../components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../../badge/modern';
 import '../../../shared/modern';
+import '../../../status-badge/modern';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../components/clear-button/Component.js';
 import '../../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

package/input/modern/index.js

@@ -6,11 +6,9 @@ import '../../form-control/modern/desktop';
 import './components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../badge/modern';
 import '../../shared/modern';
+import '../../status-badge/modern';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import './components/clear-button/Component.js';
 import '../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

package/input/modern/mobile/Component.mobile.js

@@ -3,11 +3,9 @@ import { FormControlMobile } from '../../../form-control/modern/mobile';
 import { BaseInput } from '../components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../../badge/modern';
 import '../../../shared/modern';
+import '../../../status-badge/modern';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../components/clear-button/Component.js';
 import '../../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

package/input/modern/mobile/index.js

@@ -4,11 +4,9 @@ import '../../../form-control/modern/mobile';
 import '../components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../../badge/modern';
 import '../../../shared/modern';
+import '../../../status-badge/modern';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../components/clear-button/Component.js';
 import '../../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

package/input/modern/utils.d.ts

@@ -6,5 +6,8 @@ declare function getInputTestIds(dataTestId: string): {
     rightAddons: string;
     error: string;
     hint: string;
+    errorIcon: string;
+    successIcon: string;
+    clearIcon: string;
 };
 export { getInputTestIds };

package/input/modern/utils.js

@@ -9,6 +9,9 @@ function getInputTestIds(dataTestId) {
         rightAddons: getDataTestId(dataTestId, 'form-control-right-addons'),
         error: getDataTestId(dataTestId, 'form-control-error-message'),
         hint: getDataTestId(dataTestId, 'form-control-hint'),
+        errorIcon: getDataTestId(dataTestId, 'error-icon'),
+        successIcon: getDataTestId(dataTestId, 'success-icon'),
+        clearIcon: getDataTestId(dataTestId, 'clear-icon'),
     };
 }
 

package/input/utils.d.ts

@@ -6,5 +6,8 @@ declare function getInputTestIds(dataTestId: string): {
     rightAddons: string;
     error: string;
     hint: string;
+    errorIcon: string;
+    successIcon: string;
+    clearIcon: string;
 };
 export { getInputTestIds };

package/input/utils.js

@@ -11,6 +11,9 @@ function getInputTestIds(dataTestId) {
         rightAddons: coreComponentsShared.getDataTestId(dataTestId, 'form-control-right-addons'),
         error: coreComponentsShared.getDataTestId(dataTestId, 'form-control-error-message'),
         hint: coreComponentsShared.getDataTestId(dataTestId, 'form-control-hint'),
+        errorIcon: coreComponentsShared.getDataTestId(dataTestId, 'error-icon'),
+        successIcon: coreComponentsShared.getDataTestId(dataTestId, 'success-icon'),
+        clearIcon: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon'),
     };
 }