@alfalab/core-components 43.2.0 → 44.1.0

package/indicator/modern/index.css

@@ -1,12 +1,12 @@
-/* hash: olsk6 */
+/* hash: 1yddl */
 :root {
 } /* deprecated */ :root {
-    --color-light-bg-accent: #ef3124;
-    --color-light-bg-primary: #fff;
-    --color-light-border-key-inverted: #fff;
-    --color-light-specialbg-secondary-transparent: rgba(38, 55, 88, 0.06);
+    --color-light-accent-primary: #ef3124;
+    --color-light-neutral-0: #fff;
+    --color-light-neutral-1500-inverted: #fff;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-text-primary: #0e0e0e;
-    --color-static-text-primary-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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-static-text-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
@@ -25,7 +25,7 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .indicator__component_10u2c {
+} .indicator__component_1iln2 {
     position: relative;
     display: inline-flex;
     justify-content: center;
@@ -33,56 +33,56 @@
     box-sizing: content-box;
     flex-shrink: 0;
     border-radius: var(--border-radius-pill);
-    color: var(--color-static-text-primary-light);
-    background-color: var(--color-light-bg-accent);
-} .indicator__red_10u2c {
-    background-color: var(--color-light-bg-accent);
-    color: var(--color-static-text-primary-light)
-} .indicator__red_10u2c.indicator__border_10u2c {
-        outline: 2px solid var(--color-light-border-key-inverted);
-    } .indicator__white_10u2c {
-    background-color: var(--color-light-bg-primary);
+    color: var(--color-static-text-primary-inverted);
+    background-color: var(--color-light-accent-primary);
+} .indicator__red_1iln2 {
+    background-color: var(--color-light-accent-primary);
+    color: var(--color-static-text-primary-inverted)
+} .indicator__red_1iln2.indicator__border_1iln2 {
+        outline: 2px solid var(--color-light-neutral-1500-inverted);
+    } .indicator__white_1iln2 {
+    background-color: var(--color-light-neutral-0);
     color: var(--color-light-text-primary)
-} .indicator__white_10u2c.indicator__border_10u2c {
-        outline: 2px solid var(--color-light-border-key-inverted);
-    } .indicator__grey_10u2c {
-    background-color: var(--color-light-specialbg-secondary-transparent);
+} .indicator__white_1iln2.indicator__border_1iln2 {
+        outline: 2px solid var(--color-light-neutral-1500-inverted);
+    } .indicator__grey_1iln2 {
+    background-color: var(--color-light-neutral-translucent-200);
     color: var(--color-light-text-primary)
-} .indicator__grey_10u2c.indicator__border_10u2c {
-        outline: 2px solid var(--color-light-border-key-inverted);
-    } .indicator__xs_10u2c {
+} .indicator__grey_1iln2.indicator__border_1iln2 {
+        outline: 2px solid var(--color-light-neutral-1500-inverted);
+    } .indicator__xs_1iln2 {
     height: 8px;
     min-width: 8px;
-} .indicator__s_10u2c {
+} .indicator__s_1iln2 {
     height: 20px;
     min-width: 20px
-} .indicator__s_10u2c .indicator__content_10u2c {
+} .indicator__s_1iln2 .indicator__content_1iln2 {
         font-size: 11px;
         line-height: 16px;
         font-weight: 700;
         padding: 0 var(--gap-2xs);
-    } .indicator__m_10u2c {
+    } .indicator__m_1iln2 {
     height: 24px;
     min-width: 24px
-} .indicator__m_10u2c .indicator__content_10u2c {
+} .indicator__m_1iln2 .indicator__content_1iln2 {
         font-size: 14px;
         line-height: 20px;
         font-weight: 700;
         padding: 0 var(--gap-2xs);
-    } .indicator__l_10u2c {
+    } .indicator__l_1iln2 {
     height: 40px;
     min-width: 40px
-} .indicator__l_10u2c .indicator__content_10u2c {
+} .indicator__l_1iln2 .indicator__content_1iln2 {
         font-size: 14px;
         line-height: 20px;
         font-weight: 700;
         padding: 0 var(--gap-xs);
-    } .indicator__xl_10u2c .indicator__content_10u2c {
+    } .indicator__xl_1iln2 .indicator__content_1iln2 {
         font-size: 16px;
         line-height: 24px;
         font-weight: 700;
         padding: 0 var(--gap-s);
-    } .indicator__xxl_10u2c .indicator__content_10u2c {
+    } .indicator__xxl_1iln2 .indicator__content_1iln2 {
         font-size: 16px;
         line-height: 24px;
         font-weight: 700;

package/input/Component.responsive.js

@@ -10,12 +10,13 @@ require('./components/base-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('../badge');
-require('../button');
 require('../shared');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/CrossCircleMIcon');
 require('@alfalab/icons-glyph/ExclamationCircleMIcon');
+require('./components/clear-button/Component.js');
+require('../button');
+require('@alfalab/icons-glyph/CrossCircleMIcon');
 require('../form-control/mobile');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

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

@@ -130,7 +130,8 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type
      */
     FormControlComponent?: ElementType<FormControlProps & RefAttributes<HTMLDivElement>>;
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для FormControl используется модификатор -form-control
      */
     dataTestId?: string;
     /**
@@ -138,7 +139,7 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type
      */
     disableUserInput?: boolean;
 };
-declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "enterKeyHint"> & {
+declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
     /**
      * Значение поля ввода
      */
@@ -269,7 +270,8 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
         defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
     } & React.RefAttributes<HTMLDivElement>> | undefined;
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для FormControl используется модификатор -form-control
      */
     dataTestId?: string | undefined;
     /**

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

@@ -5,12 +5,13 @@ var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var coreComponentsBadge = require('../../../badge');
-var coreComponentsButton = require('../../../button');
 var coreComponentsShared = require('../../../shared');
 var hooks = require('@alfalab/hooks');
 var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
 var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
+var components_clearButton_Component = require('../clear-button/Component.js');
+require('../../../button');
+require('@alfalab/icons-glyph/CrossCircleMIcon');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -18,20 +19,19 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"input":"input__input_fhdyu","hasInnerLabel":"input__hasInnerLabel_fhdyu","clearIcon":"input__clearIcon_fhdyu","disableUserInput":"input__disableUserInput_fhdyu","error":"input__error_fhdyu"};
+var defaultColors = {"input":"input__input_1pige","hasInnerLabel":"input__hasInnerLabel_1pige","disableUserInput":"input__disableUserInput_1pige","error":"input__error_1pige"};
 require('./default.css');
 
-var styles = {"input":"input__input_h3wp1","hasInnerLabel":"input__hasInnerLabel_h3wp1","s":"input__s_h3wp1","m":"input__m_h3wp1","l":"input__l_h3wp1","xl":"input__xl_h3wp1","block":"input__block_h3wp1","clearIcon":"input__clearIcon_h3wp1","errorIcon":"input__errorIcon_h3wp1","errorColorIcon":"input__errorColorIcon_h3wp1","clearButton":"input__clearButton_h3wp1","successIcon":"input__successIcon_h3wp1","successColorIcon":"input__successColorIcon_h3wp1","focusVisible":"input__focusVisible_h3wp1","onautofillstart":"input__onautofillstart_h3wp1","onautofillcancel":"input__onautofillcancel_h3wp1"};
+var styles = {"input":"input__input_529vb","hasInnerLabel":"input__hasInnerLabel_529vb","s":"input__s_529vb","m":"input__m_529vb","l":"input__l_529vb","xl":"input__xl_529vb","block":"input__block_529vb","errorIcon":"input__errorIcon_529vb","errorColorIcon":"input__errorColorIcon_529vb","successIcon":"input__successIcon_529vb","successColorIcon":"input__successColorIcon_529vb","focusVisible":"input__focusVisible_529vb","onautofillstart":"input__onautofillstart_529vb","onautofillcancel":"input__onautofillcancel_529vb"};
 require('./index.css');
 
-var invertedColors = {"input":"input__input_1qhtf","hasInnerLabel":"input__hasInnerLabel_1qhtf","clearIcon":"input__clearIcon_1qhtf","disableUserInput":"input__disableUserInput_1qhtf","error":"input__error_1qhtf"};
+var invertedColors = {"input":"input__input_1gjod","hasInnerLabel":"input__hasInnerLabel_1gjod","disableUserInput":"input__disableUserInput_1gjod","error":"input__error_1gjod"};
 require('./inverted.css');
 
 var colorCommonStyles = {
     default: defaultColors,
     inverted: invertedColors,
 };
-var preventDefault = function (e) { return e.preventDefault(); };
 var BaseInput = React__default.default.forwardRef(function (_a, ref) {
     var _b, _c;
     var _d = _a.size, size = _d === void 0 ? 's' : _d, _e = _a.type, type = _e === void 0 ? 'text' : _e, _f = _a.block, block = _f === void 0 ? false : _f, _g = _a.colors, colors = _g === void 0 ? 'default' : _g, bottomAddons = _a.bottomAddons, dataTestId = _a.dataTestId, _h = _a.clear, clear = _h === void 0 ? false : _h, disabled = _a.disabled, error = _a.error, success = _a.success, hint = _a.hint, className = _a.className, fieldClassName = _a.fieldClassName, inputClassName = _a.inputClassName, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, rightAddonsProps = _a.rightAddonsProps, leftAddonsProps = _a.leftAddonsProps, focusedClassName = _a.focusedClassName, filledClassName = _a.filledClassName, label = _a.label, _j = _a.labelView, labelView = _j === void 0 ? 'inner' : _j, leftAddons = _a.leftAddons, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onClear = _a.onClear, onClick = _a.onClick, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, onAnimationStart = _a.onAnimationStart, rightAddons = _a.rightAddons, value = _a.value, defaultValue = _a.defaultValue, wrapperRef = _a.wrapperRef, readOnlyProp = _a.readOnly, FormControlComponent = _a.FormControlComponent, disableUserInput = _a.disableUserInput, restProps = tslib.__rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "rightAddonsProps", "leftAddonsProps", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "disableUserInput"]);
@@ -90,10 +90,9 @@ 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(coreComponentsButton.Button, { type: 'button', view: 'ghost', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles.clearButton, onClick: handleClear, tabIndex: -1, onMouseDown: preventDefault },
-                React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, { className: cn__default.default(styles.clearIcon, colorCommonStyles[colors].clearIcon) }))),
+            clearButtonVisible && (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: handleClear, disabled: disabled, colors: colors })),
             rightAddons,
-            error && (React__default.default.createElement("div", { className: styles.errorIcon },
+            error && (React__default.default.createElement("div", { className: styles.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.errorColorIcon }) }))),
             success && !error && (React__default.default.createElement("div", { className: styles.successIcon },
                 React__default.default.createElement(coreComponentsBadge.Badge, { view: 'icon', size: 'm', iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: styles.successColorIcon }) }))))));

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

@@ -1,10 +1,7 @@
-/* hash: 1mubm */
+/* hash: 1eogz */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-1500: #0e0e0e;
-    --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
-    --color-light-neutral-translucent-500-hover: rgba(5, 8, 29, 0.38);
-    --color-light-neutral-translucent-500-press: rgba(4, 4, 21, 0.47);
     --color-light-text-primary: #0e0e0e;
     --color-light-text-secondary: rgba(4, 4, 19, 0.55);
     --color-light-text-tertiary: rgba(5, 8, 29, 0.38); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -40,32 +37,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .input__input_fhdyu {
+} .input__input_1pige {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .input__input_fhdyu:-webkit-autofill {
+} .input__input_1pige:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
-} .input__input_fhdyu::placeholder {
+} .input__input_1pige::placeholder {
     color: var(--input-placeholder-color);
-} .input__hasInnerLabel_fhdyu::placeholder {
+} .input__hasInnerLabel_1pige::placeholder {
     color: var(--input-with-label-placeholder-color);
-} .input__clearIcon_fhdyu {
-    color: var(--color-light-neutral-translucent-500)
-} .input__clearIcon_fhdyu:hover {
-        color: var(--color-light-neutral-translucent-500-hover);
-    } .input__clearIcon_fhdyu:active {
-        color: var(--color-light-neutral-translucent-500-press);
-    } /* READ-ONLY STATE */ .input__input_fhdyu:read-only:not(.input__disableUserInput_fhdyu) {
+} /* READ-ONLY STATE */ .input__input_1pige:read-only:not(.input__disableUserInput_1pige) {
     color: var(--input-read-only-color)
-} .input__input_fhdyu:read-only:not(.input__disableUserInput_fhdyu):focus::placeholder {
+} .input__input_1pige:read-only:not(.input__disableUserInput_1pige):focus::placeholder {
         color: var(--input-placeholder-color);
-    } /* DISABLED STATE */ .input__input_fhdyu:disabled {
+    } /* DISABLED STATE */ .input__input_1pige:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* FOCUS STATE */ .input__input_fhdyu:focus::placeholder {
+} /* FOCUS STATE */ .input__input_1pige:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} /* ERROR STATE */ .input__error_fhdyu {
+} /* ERROR STATE */ .input__error_1pige {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }

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

@@ -1,4 +1,4 @@
-/* hash: 6888r */
+/* hash: fw99w */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
@@ -73,7 +73,7 @@
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
     --input-error-icon-not-alone-display: none;
-} .input__input_h3wp1 {
+} .input__input_529vb {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -88,93 +88,82 @@
     text-overflow: ellipsis;
     box-sizing: border-box;
     -webkit-appearance: none;
-} .input__input_h3wp1::placeholder {
+} .input__input_529vb::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
-} .input__hasInnerLabel_h3wp1::placeholder {
+} .input__hasInnerLabel_529vb::placeholder {
         opacity: 0;
-    } .input__hasInnerLabel_h3wp1.input__s_h3wp1 {
+    } .input__hasInnerLabel_529vb.input__s_529vb {
         height: var(--form-control-s-min-height);
-    } .input__hasInnerLabel_h3wp1.input__m_h3wp1 {
+    } .input__hasInnerLabel_529vb.input__m_529vb {
         height: var(--form-control-m-min-height);
-    } .input__hasInnerLabel_h3wp1.input__l_h3wp1 {
+    } .input__hasInnerLabel_529vb.input__l_529vb {
         height: var(--form-control-l-min-height);
-    } .input__hasInnerLabel_h3wp1.input__xl_h3wp1 {
+    } .input__hasInnerLabel_529vb.input__xl_529vb {
         height: var(--form-control-xl-min-height);
-    } .input__block_h3wp1 {
+    } .input__block_529vb {
     width: 100%;
-} .input__clearIcon_h3wp1 {
-    display: block;
-    transition: opacity 0.2s ease;
-} .input__errorIcon_h3wp1 {
+} .input__errorIcon_529vb {
     display: var(--input-error-icon-display)
-} .input__errorIcon_h3wp1:not(:only-child) {
+} .input__errorIcon_529vb:not(:only-child) {
         margin-left: var(--gap-2xs);
-    } * + .input__errorIcon_h3wp1 {
+    } * + .input__errorIcon_529vb {
     display: var(--input-error-icon-not-alone-display);
-} button[class*='eye'] + .input__errorIcon_h3wp1 {
+} button[class*='eye'] + .input__errorIcon_529vb {
     margin-right: var(--gap-s);
-} .input__errorColorIcon_h3wp1 {
+} .input__errorColorIcon_529vb {
     color: var(--color-light-status-negative);
-} .input__clearButton_h3wp1 + * {
-    margin-left: var(--gap-2xs);
-} .input__clearButton_h3wp1 + .input__errorIcon_h3wp1 {
-    display: var(--input-error-icon-display);
-} .input__successIcon_h3wp1 {
+} .input__successIcon_529vb {
     display: var(--input-success-icon-display)
-} .input__successIcon_h3wp1:not(:only-child) {
+} .input__successIcon_529vb:not(:only-child) {
         margin-left: var(--gap-2xs);
-    } button[class*='eye'] + .input__successIcon_h3wp1 {
+    } button[class*='eye'] + .input__successIcon_529vb {
     margin-right: var(--gap-s);
-} .input__successColorIcon_h3wp1 {
+} .input__successColorIcon_529vb {
     color: var(--color-light-status-positive);
-} /* DISABLED STATE */ .input__input_h3wp1:disabled {
+} /* DISABLED STATE */ .input__input_529vb:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
-} /* FOCUS STATE */ .input__input_h3wp1:focus.input__hasInnerLabel_h3wp1::placeholder {
+} /* FOCUS STATE */ .input__input_529vb:focus.input__hasInnerLabel_529vb::placeholder {
     opacity: 1;
-} .input__focusVisible_h3wp1 {
+} .input__focusVisible_529vb {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} /* READ-ONLY STATE */ .input__hasInnerLabel_h3wp1:read-only:focus::placeholder {
+} /* READ-ONLY STATE */ .input__hasInnerLabel_529vb:read-only:focus::placeholder {
     opacity: 0;
-} /* IE hide clear */ .input__input_h3wp1::-ms-clear {
-    display: none;
-    width: 0;
-    height: 0;
-} /* Убирает синюю заливку при автокомплите */ .input__input_h3wp1:-webkit-autofill:first-line, .input__input_h3wp1:-webkit-autofill:hover:first-line, .input__input_h3wp1:-webkit-autofill:focus:first-line, .input__input_h3wp1:-webkit-autofill:active:first-line {
+} /* Убирает синюю заливку при автокомплите */ .input__input_529vb:-webkit-autofill:first-line, .input__input_529vb:-webkit-autofill:hover:first-line, .input__input_529vb:-webkit-autofill:focus:first-line, .input__input_529vb:-webkit-autofill:active:first-line {
             font-size: 16px;
             line-height: 20px;
             font-weight: 400;
             font-family: var(--form-control-font-family);
-        } .input__input_h3wp1:-webkit-autofill,
-    .input__input_h3wp1:-webkit-autofill:hover,
-    .input__input_h3wp1:-webkit-autofill:focus,
-    .input__input_h3wp1:-webkit-autofill:active {
+        } .input__input_529vb:-webkit-autofill,
+    .input__input_529vb:-webkit-autofill:hover,
+    .input__input_529vb:-webkit-autofill:focus,
+    .input__input_529vb:-webkit-autofill:active {
 
         /* Hack from http://stackoverflow.com/a/29350537 */
         -webkit-transition: background-color 999999s ease-in-out 0s;
         transition: background-color 999999s ease-in-out 0s;
-    } .input__input_h3wp1:-webkit-autofill {
-        animation: input__onautofillstart_h3wp1 999999s forwards;
-    } .input__input_h3wp1:not(:-webkit-autofill) {
+    } .input__input_529vb:-webkit-autofill {
+        animation: input__onautofillstart_529vb 999999s forwards;
+    } .input__input_529vb:not(:-webkit-autofill) {
         /* Позволяет отслеживать autofill через js */
-        animation: input__onautofillcancel_h3wp1 999999s;
-    } /* Убирает нативные стрелочки при type=number */ .input__input_h3wp1::-webkit-outer-spin-button,
-    .input__input_h3wp1::-webkit-inner-spin-button {
+        animation: input__onautofillcancel_529vb 999999s;
+    } /* Убирает нативные стрелочки при type=number */ .input__input_529vb::-webkit-outer-spin-button,
+    .input__input_529vb::-webkit-inner-spin-button {
         -webkit-appearance: none;
-    } .input__input_h3wp1 {
+    } .input__input_529vb {
 
     /* Firefox */
-} .input__input_h3wp1[type='number'] {
+} .input__input_529vb[type='number'] {
         -moz-appearance: textfield;
-    } @keyframes input__onautofillstart_h3wp1 {
+    } @keyframes input__onautofillstart_529vb {
     from {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
     to {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0.01);
     }
-} @keyframes input__onautofillcancel_h3wp1 {
+} @keyframes input__onautofillcancel_529vb {
     from {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }

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

@@ -6,12 +6,13 @@ require('react');
 require('react-merge-refs');
 require('classnames');
 require('../../../badge');
-require('../../../button');
 require('../../../shared');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/CrossCircleMIcon');
 require('@alfalab/icons-glyph/ExclamationCircleMIcon');
+require('../clear-button/Component.js');
+require('../../../button');
+require('@alfalab/icons-glyph/CrossCircleMIcon');
 
 
 

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

@@ -1,10 +1,7 @@
-/* hash: 1dvjm */
+/* hash: 15poz */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-1500-inverted: #fff;
-    --color-light-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
-    --color-light-neutral-translucent-500-inverted-hover: rgba(233, 233, 250, 0.37);
-    --color-light-neutral-translucent-500-inverted-press: rgba(238, 238, 254, 0.46);
     --color-light-text-primary-inverted: #fff;
     --color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55);
     --color-light-text-tertiary-inverted: rgba(233, 233, 250, 0.37); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -40,32 +37,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .input__input_1qhtf {
+} .input__input_1gjod {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .input__input_1qhtf:-webkit-autofill {
+} .input__input_1gjod:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
-} .input__input_1qhtf::placeholder {
+} .input__input_1gjod::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .input__hasInnerLabel_1qhtf::placeholder {
+} .input__hasInnerLabel_1gjod::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} .input__clearIcon_1qhtf {
-    color: var(--color-light-neutral-translucent-500-inverted)
-} .input__clearIcon_1qhtf:hover {
-        color: var(--color-light-neutral-translucent-500-inverted-hover);
-    } .input__clearIcon_1qhtf:active {
-        color: var(--color-light-neutral-translucent-500-inverted-press);
-    } /* READ-ONLY STATE */ .input__input_1qhtf:read-only:not(.input__disableUserInput_1qhtf) {
+} /* READ-ONLY STATE */ .input__input_1gjod:read-only:not(.input__disableUserInput_1gjod) {
     color: var(--input-inverted-read-only-color)
-} .input__input_1qhtf:read-only:not(.input__disableUserInput_1qhtf):focus::placeholder {
+} .input__input_1gjod:read-only:not(.input__disableUserInput_1gjod):focus::placeholder {
         color: var(--input-inverted-placeholder-color);
-    } /* DISABLED STATE */ .input__input_1qhtf:disabled {
+    } /* DISABLED STATE */ .input__input_1gjod:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* FOCUS STATE */ .input__input_1qhtf:focus::placeholder {
+} /* FOCUS STATE */ .input__input_1gjod:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} /* ERROR STATE */ .input__error_1qhtf {
+} /* ERROR STATE */ .input__error_1gjod {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 }

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import React from 'react';
+interface ClearButtonProps {
+    disabled?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    colors: 'default' | 'inverted';
+}
+declare const ClearButton: React.FC<ClearButtonProps>;
+export { ClearButton };

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

@@ -0,0 +1,33 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsButton = require('../../../button');
+var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var defaultColors = {"clearIcon":"input__clearIcon_9d24f"};
+require('./default.css');
+
+var styles = {"clearIcon":"input__clearIcon_11lmr","clearButton":"input__clearButton_11lmr"};
+require('./index.css');
+
+var invertedColors = {"clearIcon":"input__clearIcon_1h5gd"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+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: 'ghost', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault },
+        React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, { className: cn__default.default(styles.clearIcon, colorStyles[colors].clearIcon) })));
+};
+
+exports.ClearButton = ClearButton;

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

@@ -0,0 +1,37 @@
+/* hash: 1nj1q */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
+    --color-light-neutral-translucent-500-hover: rgba(5, 8, 29, 0.38);
+    --color-light-neutral-translucent-500-press: rgba(4, 4, 21, 0.47); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+
+    /* disabled */
+
+    /* read-only */
+
+    /* error */
+
+    /* display */
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
+} .input__clearIcon_9d24f {
+    color: var(--color-light-neutral-translucent-500)
+} .input__clearIcon_9d24f:hover {
+        color: var(--color-light-neutral-translucent-500-hover);
+    } .input__clearIcon_9d24f:active {
+        color: var(--color-light-neutral-translucent-500-press);
+    }