@alfalab/core-components 47.26.8-beta.0 → 47.26.8-beta.9323

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

@@ -14,7 +14,8 @@
 
     /* новые значения, используйте их */
 } :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 */
 
     /* новые значения, используйте их */
@@ -23,6 +24,7 @@
     /* stylelint-disable-next-line length-zero-no-unit */
     --gap-0: 0px;
     --gap-4: var(--gap-2xs);
+    --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
 } :root {
 } :root {
@@ -30,6 +32,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;
@@ -45,6 +48,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);
@@ -94,11 +98,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 {
@@ -113,6 +124,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 {
@@ -121,6 +134,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

@@ -65,7 +65,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.d.ts

@@ -7,8 +7,13 @@ type InputProps = Omit<BaseInputProps, 'FormControlComponent'> & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
@@ -18,8 +23,13 @@ declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "FormC
      * @default 1024
      */
     breakpoint?: number | undefined;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: "desktop" | "mobile" | undefined;
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/input/esm/Component.responsive.js

@@ -1,24 +1,24 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
-import { useMatchMedia } from '../../mq/esm';
-import { getComponentBreakpoint } from '../../shared/esm';
+import { useIsDesktop } from '../../mq/esm';
 import { InputDesktop } from './desktop/Component.desktop.js';
 import { InputMobile } from './mobile/Component.mobile.js';
 import '../../form-control/esm/desktop';
 import './components/base-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
+import '../../shared/esm';
 import '../../status-badge/esm';
 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) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
-    var query = "(min-width: ".concat(breakpoint, "px)");
-    var isDesktop = useMatchMedia(query, defaultMatchMediaValue)[0];
+    var breakpoint = _a.breakpoint, client = _a.client, _b = _a.defaultMatchMediaValue, defaultMatchMediaValue = _b === void 0 ? client === undefined ? undefined : client === 'desktop' : _b, restProps = __rest(_a, ["breakpoint", "client", "defaultMatchMediaValue"]);
+    var isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
     var Component = isDesktop ? InputDesktop : InputMobile;
     return React.createElement(Component, __assign({ ref: ref }, restProps));
 });

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;
     /**
      * Набор цветов для компонента
      */
@@ -269,6 +269,7 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
      */
     FormControlComponent?: React.ElementType<Omit<import("../../../../form-control/components/base-form-control").BaseFormControlProps, "styles" | "colorStyles"> & {
         breakpoint?: number | undefined;
+        client?: "desktop" | "mobile" | undefined;
         defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
     } & React.RefAttributes<HTMLDivElement>> | undefined;
     /**

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

@@ -8,14 +8,15 @@ 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_vgm9n","hasInnerLabel":"input__hasInnerLabel_vgm9n","disableUserInput":"input__disableUserInput_vgm9n","error":"input__error_vgm9n"};
+var defaultColors = {"input":"input__input_xxf1a","hasInnerLabel":"input__hasInnerLabel_xxf1a","disableUserInput":"input__disableUserInput_xxf1a","error":"input__error_xxf1a"};
 require('./default.css');
 
-var styles = {"input":"input__input_4fl4d","hasInnerLabel":"input__hasInnerLabel_4fl4d","size-48":"input__size-48_4fl4d","size-56":"input__size-56_4fl4d","size-64":"input__size-64_4fl4d","size-72":"input__size-72_4fl4d","block":"input__block_4fl4d","errorIcon":"input__errorIcon_4fl4d","successIcon":"input__successIcon_4fl4d","disableUserInput":"input__disableUserInput_4fl4d","focusVisible":"input__focusVisible_4fl4d","onautofillstart":"input__onautofillstart_4fl4d","onautofillcancel":"input__onautofillcancel_4fl4d"};
+var styles = {"input":"input__input_17dw6","size-40":"input__size-40_17dw6","hasInnerLabel":"input__hasInnerLabel_17dw6","size-48":"input__size-48_17dw6","size-56":"input__size-56_17dw6","size-64":"input__size-64_17dw6","size-72":"input__size-72_17dw6","block":"input__block_17dw6","errorIcon":"input__errorIcon_17dw6","successIcon":"input__successIcon_17dw6","disableUserInput":"input__disableUserInput_17dw6","focusVisible":"input__focusVisible_17dw6","onautofillstart":"input__onautofillstart_17dw6","onautofillcancel":"input__onautofillcancel_17dw6"};
 require('./index.css');
 
-var invertedColors = {"input":"input__input_119ei","hasInnerLabel":"input__hasInnerLabel_119ei","disableUserInput":"input__disableUserInput_119ei","error":"input__error_119ei"};
+var invertedColors = {"input":"input__input_yv3v8","hasInnerLabel":"input__hasInnerLabel_yv3v8","disableUserInput":"input__disableUserInput_yv3v8","error":"input__error_yv3v8"};
 require('./inverted.css');
 
 var colorCommonStyles = {
@@ -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',
@@ -36,6 +38,7 @@ var inputTypesForSelectionRange = ['password', 'search', 'tel', 'text', 'url'];
 var BaseInput = React.forwardRef(function (_a, ref) {
     var _b, _c;
     var _d = _a.size, size = _d === void 0 ? 48 : _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 = __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"]);
+    var onKeyDown = restProps.onKeyDown;
     var uncontrolled = value === undefined;
     var readOnly = readOnlyProp || disableUserInput;
     var inputRef = useRef(null);
@@ -73,13 +76,37 @@ var BaseInput = React.forwardRef(function (_a, ref) {
         }
     }, [onBlur]);
     var handleInputChange = useCallback(function (event) {
+        var inputValue = event.target.value;
+        var target = event.target;
+        var isInputTypeNumber = target.getAttribute('type') === 'number';
+        var pattern = /[eE]/g;
+        if (isInputTypeNumber && pattern.test(inputValue)) {
+            inputValue = inputValue.replace(pattern, '');
+        }
         if (onChange) {
-            onChange(event, { value: event.target.value });
+            onChange(event, { value: inputValue });
         }
         if (uncontrolled) {
-            setStateValue(event.target.value);
+            setStateValue(inputValue);
         }
     }, [onChange, uncontrolled]);
+    var handleKeyDown = useCallback(function (event) {
+        /**
+         * По умолчанию в input[type=number] можно вводить числа типа 2e5 (200 000)
+         * Это ломает некоторое поведение, поэтому запрещаем ввод символов [eE]
+         * @see DS-6808
+         */
+        var key = event.key, target = event.target;
+        var eventTarget = target;
+        var isInputTypeNumber = eventTarget.getAttribute('type') === 'number';
+        if (isInputTypeNumber && (key === 'e' || key === 'E')) {
+            event.preventDefault();
+            return;
+        }
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    }, [onKeyDown]);
     var handleClear = useCallback(function (event) {
         if (!clearButtonVisible)
             return;
@@ -102,24 +129,24 @@ 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,
                 _c[styles[SIZE_TO_CLASSNAME_MAP[size]]] = hasInnerLabel,
                 _c[styles.hasInnerLabel] = hasInnerLabel,
                 _c[colorCommonStyles[colors].hasInnerLabel] = hasInnerLabel,
-                _c), inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onAnimationStart: handleAnimationStart, ref: mergeRefs([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined })))) : null;
+                _c), inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onKeyDown: handleKeyDown, onAnimationStart: handleAnimationStart, ref: mergeRefs([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined })))) : null;
 });
 
 export { BaseInput };

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

@@ -1,4 +1,4 @@
-/* hash: 4w5um */
+/* hash: 1bhns */
 :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-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -44,26 +44,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .input__input_vgm9n {
+} .input__input_xxf1a {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .input__input_vgm9n:-webkit-autofill {
+} .input__input_xxf1a:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
-} .input__input_vgm9n::placeholder {
+} .input__input_xxf1a::placeholder {
     color: var(--input-placeholder-color);
-} .input__hasInnerLabel_vgm9n::placeholder {
+} .input__hasInnerLabel_xxf1a::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .input__input_vgm9n:read-only:not(.input__disableUserInput_vgm9n) {
+} /* READ-ONLY STATE */ .input__input_xxf1a:read-only:not(.input__disableUserInput_xxf1a) {
     color: var(--input-read-only-color)
-} .input__input_vgm9n:read-only:not(.input__disableUserInput_vgm9n):focus::placeholder {
+} .input__input_xxf1a:read-only:not(.input__disableUserInput_xxf1a):focus::placeholder {
         color: var(--input-placeholder-color);
-    } /* DISABLED STATE */ .input__input_vgm9n:disabled {
+    } /* DISABLED STATE */ .input__input_xxf1a:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* FOCUS STATE */ .input__input_vgm9n:focus::placeholder {
+} /* FOCUS STATE */ .input__input_xxf1a:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} /* ERROR STATE */ .input__error_vgm9n {
+} /* ERROR STATE */ .input__error_xxf1a {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }

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

@@ -1,4 +1,4 @@
-/* hash: 1dv8i */
+/* hash: 1fd84 */
 :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-status-info: #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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,7 +15,8 @@
 
     /* новые значения, используйте их */
 } :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 */
 
     /* новые значения, используйте их */
@@ -24,6 +25,7 @@
     /* stylelint-disable-next-line length-zero-no-unit */
     --gap-0: 0px;
     --gap-4: var(--gap-2xs);
+    --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
 } :root {
 } :root {
@@ -31,6 +33,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;
@@ -46,6 +49,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);
@@ -81,7 +85,7 @@
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
     --input-error-icon-not-alone-display: none;
-} .input__input_4fl4d {
+} .input__input_17dw6 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -95,80 +99,91 @@
     outline: none;
     text-overflow: ellipsis;
     box-sizing: border-box;
-    -webkit-appearance: none;
-} .input__input_4fl4d::placeholder {
+    -webkit-appearance: none
+} .input__input_17dw6.input__size-40_17dw6 {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+        padding: var(--gap-0) var(--gap-8);
+    } .input__input_17dw6::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
-} .input__hasInnerLabel_4fl4d::placeholder {
+} .input__hasInnerLabel_17dw6::placeholder {
         opacity: 0;
-    } .input__hasInnerLabel_4fl4d.input__size-48_4fl4d {
+    } .input__hasInnerLabel_17dw6.input__size-40_17dw6 {
+        height: var(--form-control-40-min-height);
+    } .input__hasInnerLabel_17dw6.input__size-48_17dw6 {
         height: var(--form-control-s-min-height);
-    } .input__hasInnerLabel_4fl4d.input__size-56_4fl4d {
+    } .input__hasInnerLabel_17dw6.input__size-56_17dw6 {
         height: var(--form-control-m-min-height);
-    } .input__hasInnerLabel_4fl4d.input__size-64_4fl4d {
+    } .input__hasInnerLabel_17dw6.input__size-64_17dw6 {
         height: var(--form-control-l-min-height);
-    } .input__hasInnerLabel_4fl4d.input__size-72_4fl4d {
+    } .input__hasInnerLabel_17dw6.input__size-72_17dw6 {
         height: var(--form-control-xl-min-height);
-    } .input__block_4fl4d {
+    } .input__block_17dw6 {
     width: 100%;
-} .input__errorIcon_4fl4d {
+} .input__errorIcon_17dw6 {
     display: var(--input-error-icon-display)
-} .input__errorIcon_4fl4d:not(:only-child) {
+} .input__errorIcon_17dw6:not(:only-child) {
         margin-left: var(--gap-4);
-    } * + .input__errorIcon_4fl4d {
+    } .input__errorIcon_17dw6.input__size-40_17dw6:not(:only-child) {
+        margin-left: 6px;
+    } * + .input__errorIcon_17dw6 {
     display: var(--input-error-icon-not-alone-display);
-} button[class*='eye'] + .input__errorIcon_4fl4d {
+} button[class*='eye'] + .input__errorIcon_17dw6 {
     margin-right: var(--gap-12);
-} .input__successIcon_4fl4d {
+} .input__successIcon_17dw6 {
     display: var(--input-success-icon-display)
-} .input__successIcon_4fl4d:not(:only-child) {
+} .input__successIcon_17dw6:not(:only-child) {
         margin-left: var(--gap-4);
-    } button[class*='eye'] + .input__successIcon_4fl4d {
+    } .input__successIcon_17dw6.input__size-40_17dw6:not(:only-child) {
+        margin-left: 6px;
+    } button[class*='eye'] + .input__successIcon_17dw6 {
     margin-right: var(--gap-12);
-} /* DISABLED STATE */ .input__input_4fl4d:disabled {
+} /* DISABLED STATE */ .input__input_17dw6:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
-} /* FOCUS STATE */ .input__input_4fl4d:focus.input__hasInnerLabel_4fl4d::placeholder,
-.input__input_4fl4d:focus.input__hasInnerLabel_4fl4d.input__disableUserInput_4fl4d::placeholder {
+} /* FOCUS STATE */ .input__input_17dw6:focus.input__hasInnerLabel_17dw6::placeholder,
+.input__input_17dw6:focus.input__hasInnerLabel_17dw6.input__disableUserInput_17dw6::placeholder {
     opacity: 1;
-} .input__focusVisible_4fl4d {
+} .input__focusVisible_17dw6 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} /* READ-ONLY STATE */ .input__hasInnerLabel_4fl4d:read-only:focus::placeholder {
+} /* READ-ONLY STATE */ .input__hasInnerLabel_17dw6:read-only:focus::placeholder {
     opacity: 0;
-} /* Убирает синюю заливку при автокомплите */ .input__input_4fl4d:-webkit-autofill:first-line, .input__input_4fl4d:-webkit-autofill:hover:first-line, .input__input_4fl4d:-webkit-autofill:focus:first-line, .input__input_4fl4d:-webkit-autofill:active:first-line {
+} /* Убирает синюю заливку при автокомплите */ .input__input_17dw6:-webkit-autofill:first-line, .input__input_17dw6:-webkit-autofill:hover:first-line, .input__input_17dw6:-webkit-autofill:focus:first-line, .input__input_17dw6:-webkit-autofill:active:first-line {
             font-size: 16px;
             line-height: 20px;
             font-weight: 400;
             font-family: var(--form-control-font-family);
-        } .input__input_4fl4d:-webkit-autofill,
-    .input__input_4fl4d:-webkit-autofill:hover,
-    .input__input_4fl4d:-webkit-autofill:focus,
-    .input__input_4fl4d:-webkit-autofill:active {
+        } .input__input_17dw6:-webkit-autofill,
+    .input__input_17dw6:-webkit-autofill:hover,
+    .input__input_17dw6:-webkit-autofill:focus,
+    .input__input_17dw6:-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_4fl4d:-webkit-autofill {
-        animation: input__onautofillstart_4fl4d 999999s forwards;
-    } .input__input_4fl4d:not(:-webkit-autofill) {
+    } .input__input_17dw6:-webkit-autofill {
+        animation: input__onautofillstart_17dw6 999999s forwards;
+    } .input__input_17dw6:not(:-webkit-autofill) {
         /* Позволяет отслеживать autofill через js */
-        animation: input__onautofillcancel_4fl4d 999999s;
-    } /* Убирает нативные стрелочки при type=number */ .input__input_4fl4d::-webkit-outer-spin-button,
-    .input__input_4fl4d::-webkit-inner-spin-button {
+        animation: input__onautofillcancel_17dw6 999999s;
+    } /* Убирает нативные стрелочки при type=number */ .input__input_17dw6::-webkit-outer-spin-button,
+    .input__input_17dw6::-webkit-inner-spin-button {
         -webkit-appearance: none;
-    } .input__input_4fl4d {
+    } .input__input_17dw6 {
 
     /* Firefox */
-} .input__input_4fl4d[type='number'] {
+} .input__input_17dw6[type='number'] {
         -moz-appearance: textfield;
-    } @keyframes input__onautofillstart_4fl4d {
+    } @keyframes input__onautofillstart_17dw6 {
     from {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
     to {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0.01);
     }
-} @keyframes input__onautofillcancel_4fl4d {
+} @keyframes input__onautofillcancel_17dw6 {
     from {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }

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/base-input/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1uyhv */
+/* hash: 12ivr */
 :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-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
@@ -44,26 +44,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .input__input_119ei {
+} .input__input_yv3v8 {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .input__input_119ei:-webkit-autofill {
+} .input__input_yv3v8:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
-} .input__input_119ei::placeholder {
+} .input__input_yv3v8::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .input__hasInnerLabel_119ei::placeholder {
+} .input__hasInnerLabel_yv3v8::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .input__input_119ei:read-only:not(.input__disableUserInput_119ei) {
+} /* READ-ONLY STATE */ .input__input_yv3v8:read-only:not(.input__disableUserInput_yv3v8) {
     color: var(--input-inverted-read-only-color)
-} .input__input_119ei:read-only:not(.input__disableUserInput_119ei):focus::placeholder {
+} .input__input_yv3v8:read-only:not(.input__disableUserInput_yv3v8):focus::placeholder {
         color: var(--input-inverted-placeholder-color);
-    } /* DISABLED STATE */ .input__input_119ei:disabled {
+    } /* DISABLED STATE */ .input__input_yv3v8:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* FOCUS STATE */ .input__input_119ei:focus::placeholder {
+} /* FOCUS STATE */ .input__input_yv3v8:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} /* ERROR STATE */ .input__error_119ei {
+} /* ERROR STATE */ .input__error_yv3v8 {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 }