@alfalab/core-components 32.0.0-beta.0 → 32.0.1

package/icon-view/modern/components/base-shape/index.css

@@ -1,4 +1,4 @@
-/* hash: 16pvc */
+/* hash: 1ghfj */
 :root {
     --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
     --color-light-text-secondary-transparent: rgba(11, 31, 53, 0.7);
@@ -11,24 +11,24 @@
 
     /* Hard up */
 }
-.icon-view__componentWrapper_7fb4a {
+.icon-view__componentWrapper_ashxf {
     position: relative;
     display: inline-flex;
 }
-.icon-view__component_7fb4a {
+.icon-view__component_ashxf {
     display: flex;
     position: relative;
     color: var(--color-light-text-secondary-transparent);
 }
-.icon-view__bg_7fb4a {
+.icon-view__bg_ashxf {
     fill: #f3f4f5;
 }
-.icon-view__border_7fb4a {
+.icon-view__border_ashxf {
     stroke: var(--color-light-specialbg-component);
     stroke-width: 1px;
     fill: transparent;
 }
-.icon-view__children_7fb4a {
+.icon-view__children_ashxf {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -38,11 +38,11 @@
     left: 50%;
     transform: translate(-50%, -50%)
 }
-.icon-view__children_7fb4a svg {
+.icon-view__children_ashxf svg {
         width: 100%;
         height: 100%;
     }
-.icon-view__addons_7fb4a {
+.icon-view__addons_ashxf {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -50,87 +50,87 @@
     position: absolute;
     line-height: 0
 }
-.icon-view__addons_7fb4a svg {
+.icon-view__addons_ashxf svg {
         width: 100%;
         height: 100%;
     }
-.icon-view__size_40_7fb4a .icon-view__children_7fb4a {
+.icon-view__size_40_ashxf .icon-view__children_ashxf {
         width: 24px;
         height: 24px;
     }
-.icon-view__size_40_7fb4a .icon-view__addons_7fb4a {
+.icon-view__size_40_ashxf .icon-view__addons_ashxf {
         width: 18px;
         height: 18px;
     }
-.icon-view__size_40_7fb4a .icon-view__topAddons_7fb4a {
+.icon-view__size_40_ashxf .icon-view__topAddons_ashxf {
         top: -8px;
         right: -8px;
     }
-.icon-view__size_40_7fb4a .icon-view__bottomAddons_7fb4a {
+.icon-view__size_40_ashxf .icon-view__bottomAddons_ashxf {
         bottom: -8px;
         right: -8px;
     }
-.icon-view__size_48_7fb4a .icon-view__children_7fb4a {
+.icon-view__size_48_ashxf .icon-view__children_ashxf {
         width: 24px;
         height: 24px;
     }
-.icon-view__size_48_7fb4a .icon-view__addons_7fb4a {
+.icon-view__size_48_ashxf .icon-view__addons_ashxf {
         width: 18px;
         height: 18px;
     }
-.icon-view__size_48_7fb4a .icon-view__topAddons_7fb4a {
+.icon-view__size_48_ashxf .icon-view__topAddons_ashxf {
         top: -4px;
         right: -4px;
     }
-.icon-view__size_48_7fb4a .icon-view__bottomAddons_7fb4a {
+.icon-view__size_48_ashxf .icon-view__bottomAddons_ashxf {
         bottom: -4px;
         right: -4px;
     }
-.icon-view__size_64_7fb4a .icon-view__children_7fb4a {
+.icon-view__size_64_ashxf .icon-view__children_ashxf {
         width: 32px;
         height: 32px;
     }
-.icon-view__size_64_7fb4a .icon-view__addons_7fb4a {
+.icon-view__size_64_ashxf .icon-view__addons_ashxf {
         width: 18px;
         height: 18px;
     }
-.icon-view__size_64_7fb4a .icon-view__topAddons_7fb4a {
+.icon-view__size_64_ashxf .icon-view__topAddons_ashxf {
         top: -2px;
         right: -2px;
     }
-.icon-view__size_64_7fb4a .icon-view__bottomAddons_7fb4a {
+.icon-view__size_64_ashxf .icon-view__bottomAddons_ashxf {
         bottom: -2px;
         right: -2px;
     }
-.icon-view__size_80_7fb4a .icon-view__children_7fb4a {
+.icon-view__size_80_ashxf .icon-view__children_ashxf {
         width: 48px;
         height: 48px;
     }
-.icon-view__size_80_7fb4a .icon-view__addons_7fb4a {
+.icon-view__size_80_ashxf .icon-view__addons_ashxf {
         width: 24px;
         height: 24px;
     }
-.icon-view__size_80_7fb4a .icon-view__topAddons_7fb4a {
+.icon-view__size_80_ashxf .icon-view__topAddons_ashxf {
         top: -4px;
         right: -4px;
     }
-.icon-view__size_80_7fb4a .icon-view__bottomAddons_7fb4a {
+.icon-view__size_80_ashxf .icon-view__bottomAddons_ashxf {
         bottom: -4px;
         right: -4px;
     }
-.icon-view__size_128_7fb4a .icon-view__children_7fb4a {
+.icon-view__size_128_ashxf .icon-view__children_ashxf {
         width: 60px;
         height: 60px;
     }
-.icon-view__size_128_7fb4a .icon-view__addons_7fb4a {
+.icon-view__size_128_ashxf .icon-view__addons_ashxf {
         width: 40px;
         height: 40px;
     }
-.icon-view__size_128_7fb4a .icon-view__topAddons_7fb4a {
+.icon-view__size_128_ashxf .icon-view__topAddons_ashxf {
         top: -8px;
         right: -8px;
     }
-.icon-view__size_128_7fb4a .icon-view__bottomAddons_7fb4a {
+.icon-view__size_128_ashxf .icon-view__bottomAddons_ashxf {
         bottom: -8px;
         right: -8px;
     }

package/icon-view/super-ellipse.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-ad6d71a1.js');
+require('./tslib.es6-b6aff022.js');
 require('react');
 require('classnames');
 require('./components/base-shape/utils.js');

package/input/Component.d.ts

@@ -42,6 +42,10 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' |
      * Лейбл компонента
      */
     label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
     /**
      * Атрибут type
      */
@@ -158,6 +162,10 @@ declare const Input: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttribu
      * Лейбл компонента
      */
     label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: "inner" | "outer" | undefined;
     /**
      * Атрибут type
      */

package/input/Component.js

@@ -53,13 +53,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"input":"input__input_bi1sj","hasLabel":"input__hasLabel_bi1sj","block":"input__block_bi1sj","clearIcon":"input__clearIcon_bi1sj","errorIcon":"input__errorIcon_bi1sj","clearButton":"input__clearButton_bi1sj","successIcon":"input__successIcon_bi1sj","focusVisible":"input__focusVisible_bi1sj","onautofillstart":"input__onautofillstart_bi1sj","onautofillcancel":"input__onautofillcancel_bi1sj"};
+var styles = {"input":"input__input_1dhqc","hasInnerLabel":"input__hasInnerLabel_1dhqc","block":"input__block_1dhqc","clearIcon":"input__clearIcon_1dhqc","errorIcon":"input__errorIcon_1dhqc","clearButton":"input__clearButton_1dhqc","successIcon":"input__successIcon_1dhqc","focusVisible":"input__focusVisible_1dhqc","onautofillstart":"input__onautofillstart_1dhqc","onautofillcancel":"input__onautofillcancel_1dhqc"};
 require('./index.css');
 
-var defaultColors = {"input":"input__input_hp5md","hasLabel":"input__hasLabel_hp5md","clearIcon":"input__clearIcon_hp5md","errorIcon":"input__errorIcon_hp5md","successIcon":"input__successIcon_hp5md","error":"input__error_hp5md"};
+var defaultColors = {"input":"input__input_1fcey","hasInnerLabel":"input__hasInnerLabel_1fcey","clearIcon":"input__clearIcon_1fcey","errorIcon":"input__errorIcon_1fcey","successIcon":"input__successIcon_1fcey","error":"input__error_1fcey"};
 require('./default.css');
 
-var invertedColors = {"input":"input__input_5iizo","hasLabel":"input__hasLabel_5iizo","clearIcon":"input__clearIcon_5iizo","errorIcon":"input__errorIcon_5iizo","successIcon":"input__successIcon_5iizo","error":"input__error_5iizo"};
+var invertedColors = {"input":"input__input_1o9tu","hasInnerLabel":"input__hasInnerLabel_1o9tu","clearIcon":"input__clearIcon_1o9tu","errorIcon":"input__errorIcon_1o9tu","successIcon":"input__successIcon_1o9tu","error":"input__error_1o9tu"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -68,16 +68,17 @@ var colorStyles = {
 };
 var Input = 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, focusedClassName = _a.focusedClassName, filledClassName = _a.filledClassName, label = _a.label, 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, readOnly = _a.readOnly, restProps = __rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly"]);
+    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, 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, readOnly = _a.readOnly, restProps = __rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly"]);
     var uncontrolled = value === undefined;
     var inputRef = React.useRef(null);
     var focusVisible = hooks.useFocus(inputRef, 'keyboard')[0];
-    var _j = React.useState(restProps.autoFocus), focused = _j[0], setFocused = _j[1];
-    var _k = React.useState(defaultValue || ''), stateValue = _k[0], setStateValue = _k[1];
+    var _k = React.useState(restProps.autoFocus), focused = _k[0], setFocused = _k[1];
+    var _l = React.useState(defaultValue || ''), stateValue = _l[0], setStateValue = _l[1];
     var filled = Boolean(uncontrolled ? stateValue : value);
-    var _l = React.useState(false), autofilled = _l[0], setAutofilled = _l[1];
+    var _m = React.useState(false), autofilled = _m[0], setAutofilled = _m[1];
     // отображаем крестик только для заполненного и активного инпута
     var clearButtonVisible = clear && filled && !disabled && !readOnly;
+    var hasInnerLabel = label && labelView === 'inner';
     var handleInputFocus = React.useCallback(function (event) {
         if (!readOnly) {
             setFocused(true);
@@ -130,12 +131,12 @@ var Input = React__default['default'].forwardRef(function (_a, ref) {
     };
     return (React__default['default'].createElement(coreComponentsFormControl.FormControl, { ref: wrapperRef, className: cn__default['default'](className, focused && focusedClassName, filled && filledClassName), fieldClassName: cn__default['default'](fieldClassName, (_b = {},
             _b[styles.focusVisible] = focusVisible,
-            _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, filled: filled || autofilled || focused, focused: focused, error: error, label: label, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp },
+            _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, 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 },
         React__default['default'].createElement("input", __assign({}, restProps, { className: cn__default['default'](styles.input, colorStyles[colors].input, (_c = {},
                 _c[styles.error] = error,
                 _c[colorStyles[colors].error] = error,
-                _c[styles.hasLabel] = label,
-                _c[colorStyles[colors].hasLabel] = label,
+                _c[styles.hasInnerLabel] = hasInnerLabel,
+                _c[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
                 _c), inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onAnimationStart: handleAnimationStart, ref: mergeRefs__default['default']([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined }))));
 });
 /**

package/input/cssm/Component.d.ts

@@ -42,6 +42,10 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' |
      * Лейбл компонента
      */
     label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
     /**
      * Атрибут type
      */
@@ -158,6 +162,10 @@ declare const Input: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttribu
      * Лейбл компонента
      */
     label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: "inner" | "outer" | undefined;
     /**
      * Атрибут type
      */

package/input/cssm/Component.js

@@ -65,16 +65,17 @@ var colorStyles = {
 };
 var Input = 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, focusedClassName = _a.focusedClassName, filledClassName = _a.filledClassName, label = _a.label, 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, readOnly = _a.readOnly, restProps = __rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly"]);
+    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, 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, readOnly = _a.readOnly, restProps = __rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly"]);
     var uncontrolled = value === undefined;
     var inputRef = React.useRef(null);
     var focusVisible = hooks.useFocus(inputRef, 'keyboard')[0];
-    var _j = React.useState(restProps.autoFocus), focused = _j[0], setFocused = _j[1];
-    var _k = React.useState(defaultValue || ''), stateValue = _k[0], setStateValue = _k[1];
+    var _k = React.useState(restProps.autoFocus), focused = _k[0], setFocused = _k[1];
+    var _l = React.useState(defaultValue || ''), stateValue = _l[0], setStateValue = _l[1];
     var filled = Boolean(uncontrolled ? stateValue : value);
-    var _l = React.useState(false), autofilled = _l[0], setAutofilled = _l[1];
+    var _m = React.useState(false), autofilled = _m[0], setAutofilled = _m[1];
     // отображаем крестик только для заполненного и активного инпута
     var clearButtonVisible = clear && filled && !disabled && !readOnly;
+    var hasInnerLabel = label && labelView === 'inner';
     var handleInputFocus = React.useCallback(function (event) {
         if (!readOnly) {
             setFocused(true);
@@ -127,12 +128,12 @@ var Input = React__default['default'].forwardRef(function (_a, ref) {
     };
     return (React__default['default'].createElement(coreComponentsFormControl.FormControl, { ref: wrapperRef, className: cn__default['default'](className, focused && focusedClassName, filled && filledClassName), fieldClassName: cn__default['default'](fieldClassName, (_b = {},
             _b[styles__default['default'].focusVisible] = focusVisible,
-            _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, filled: filled || autofilled || focused, focused: focused, error: error, label: label, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp },
+            _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, 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 },
         React__default['default'].createElement("input", __assign({}, restProps, { className: cn__default['default'](styles__default['default'].input, colorStyles[colors].input, (_c = {},
                 _c[styles__default['default'].error] = error,
                 _c[colorStyles[colors].error] = error,
-                _c[styles__default['default'].hasLabel] = label,
-                _c[colorStyles[colors].hasLabel] = label,
+                _c[styles__default['default'].hasInnerLabel] = hasInnerLabel,
+                _c[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
                 _c), inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onAnimationStart: handleAnimationStart, ref: mergeRefs__default['default']([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined }))));
 });
 /**

package/input/cssm/default.module.css

@@ -29,6 +29,10 @@
 
     /* error */
     --input-error-color: var(--color-light-text-primary);
+
+    /* display */
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
 .input {
     color: var(--input-color);
@@ -41,7 +45,7 @@
 .input::placeholder {
     color: var(--input-placeholder-color);
 }
-.hasLabel::placeholder {
+.hasInnerLabel::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 .clearIcon {

package/input/cssm/index.module.css

@@ -14,9 +14,38 @@
 }
 :root {
     --focus-color: var(--color-light-border-link);
+    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
     --disabled-cursor: not-allowed;
 }
 :root {
+
+    /* disabled */
+
+    /* focus */
+
+    /* hover */
+
+    /* error */
+
+    /* height */
+
+    /* paddings */
+
+    /* disabled */
+
+    /* font */
+    --form-control-font-family: var(--font-family);
+}
+:root {
+
+    /* disabled */
+
+    /* read-only */
+
+    /* error */
+
+    /* display */
     --input-error-icon-display: block;
     --input-success-icon-display: block;
 
@@ -43,7 +72,7 @@
 .input::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 }
-.hasLabel::placeholder {
+.hasInnerLabel::placeholder {
     opacity: 0;
 }
 .block {
@@ -97,7 +126,7 @@
     opacity: 1;
 }
 /* FOCUS STATE */
-.input:focus.hasLabel::placeholder {
+.input:focus.hasInnerLabel::placeholder {
     opacity: 1;
 }
 .focusVisible {
@@ -105,7 +134,7 @@
     outline-offset: 2px;
 }
 /* READ-ONLY STATE */
-.hasLabel:read-only:focus::placeholder {
+.hasInnerLabel:read-only:focus::placeholder {
     opacity: 0;
 }
 /* IE hide clear */

package/input/cssm/inverted.module.css

@@ -29,6 +29,10 @@
 
     /* error */
     --input-inverted-error-color: var(--color-light-text-primary-inverted);
+
+    /* display */
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
 .input {
     color: var(--input-inverted-color);
@@ -41,7 +45,7 @@
 .input::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.hasLabel::placeholder {
+.hasInnerLabel::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
 .clearIcon {

package/input/cssm/vars.css

@@ -0,0 +1,20 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+
+    /* disabled */
+
+    /* read-only */
+
+    /* error */
+
+    /* display */
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
+}

package/input/default.css

@@ -1,4 +1,4 @@
-/* hash: z05rg */
+/* hash: 1kzgt */
 :root {
     --color-light-graphic-primary: #0b1f35;
     --color-light-text-primary: #0b1f35;
@@ -30,48 +30,52 @@
 
     /* error */
     --input-error-color: var(--color-light-text-primary);
+
+    /* display */
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
-.input__input_hp5md {
+.input__input_1fcey {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.input__input_hp5md:-webkit-autofill {
+.input__input_1fcey:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.input__input_hp5md::placeholder {
+.input__input_1fcey::placeholder {
     color: var(--input-placeholder-color);
 }
-.input__hasLabel_hp5md::placeholder {
+.input__hasInnerLabel_1fcey::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.input__clearIcon_hp5md {
+.input__clearIcon_1fcey {
     color: var(--color-light-graphic-primary);
 }
-.input__errorIcon_hp5md {
+.input__errorIcon_1fcey {
     background-image: var(--input-error-icon);
 }
-.input__successIcon_hp5md {
+.input__successIcon_1fcey {
     background-image: var(--input-success-icon);
 }
 /* READ-ONLY STATE */
-.input__input_hp5md:read-only {
+.input__input_1fcey:read-only {
     color: var(--input-read-only-color)
 }
-.input__input_hp5md:read-only:focus::placeholder {
+.input__input_1fcey:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.input__input_hp5md:disabled {
+.input__input_1fcey:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.input__input_hp5md:focus::placeholder {
+.input__input_1fcey:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.input__error_hp5md {
+.input__error_1fcey {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }

package/input/esm/Component.d.ts

@@ -42,6 +42,10 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' |
      * Лейбл компонента
      */
     label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
     /**
      * Атрибут type
      */
@@ -158,6 +162,10 @@ declare const Input: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttribu
      * Лейбл компонента
      */
     label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: "inner" | "outer" | undefined;
     /**
      * Атрибут type
      */

package/input/esm/Component.js

@@ -45,13 +45,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"input":"input__input_bi1sj","hasLabel":"input__hasLabel_bi1sj","block":"input__block_bi1sj","clearIcon":"input__clearIcon_bi1sj","errorIcon":"input__errorIcon_bi1sj","clearButton":"input__clearButton_bi1sj","successIcon":"input__successIcon_bi1sj","focusVisible":"input__focusVisible_bi1sj","onautofillstart":"input__onautofillstart_bi1sj","onautofillcancel":"input__onautofillcancel_bi1sj"};
+var styles = {"input":"input__input_1dhqc","hasInnerLabel":"input__hasInnerLabel_1dhqc","block":"input__block_1dhqc","clearIcon":"input__clearIcon_1dhqc","errorIcon":"input__errorIcon_1dhqc","clearButton":"input__clearButton_1dhqc","successIcon":"input__successIcon_1dhqc","focusVisible":"input__focusVisible_1dhqc","onautofillstart":"input__onautofillstart_1dhqc","onautofillcancel":"input__onautofillcancel_1dhqc"};
 require('./index.css');
 
-var defaultColors = {"input":"input__input_hp5md","hasLabel":"input__hasLabel_hp5md","clearIcon":"input__clearIcon_hp5md","errorIcon":"input__errorIcon_hp5md","successIcon":"input__successIcon_hp5md","error":"input__error_hp5md"};
+var defaultColors = {"input":"input__input_1fcey","hasInnerLabel":"input__hasInnerLabel_1fcey","clearIcon":"input__clearIcon_1fcey","errorIcon":"input__errorIcon_1fcey","successIcon":"input__successIcon_1fcey","error":"input__error_1fcey"};
 require('./default.css');
 
-var invertedColors = {"input":"input__input_5iizo","hasLabel":"input__hasLabel_5iizo","clearIcon":"input__clearIcon_5iizo","errorIcon":"input__errorIcon_5iizo","successIcon":"input__successIcon_5iizo","error":"input__error_5iizo"};
+var invertedColors = {"input":"input__input_1o9tu","hasInnerLabel":"input__hasInnerLabel_1o9tu","clearIcon":"input__clearIcon_1o9tu","errorIcon":"input__errorIcon_1o9tu","successIcon":"input__successIcon_1o9tu","error":"input__error_1o9tu"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -60,16 +60,17 @@ var colorStyles = {
 };
 var Input = React.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, focusedClassName = _a.focusedClassName, filledClassName = _a.filledClassName, label = _a.label, 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, readOnly = _a.readOnly, restProps = __rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly"]);
+    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, 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, readOnly = _a.readOnly, restProps = __rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly"]);
     var uncontrolled = value === undefined;
     var inputRef = useRef(null);
     var focusVisible = useFocus(inputRef, 'keyboard')[0];
-    var _j = useState(restProps.autoFocus), focused = _j[0], setFocused = _j[1];
-    var _k = useState(defaultValue || ''), stateValue = _k[0], setStateValue = _k[1];
+    var _k = useState(restProps.autoFocus), focused = _k[0], setFocused = _k[1];
+    var _l = useState(defaultValue || ''), stateValue = _l[0], setStateValue = _l[1];
     var filled = Boolean(uncontrolled ? stateValue : value);
-    var _l = useState(false), autofilled = _l[0], setAutofilled = _l[1];
+    var _m = useState(false), autofilled = _m[0], setAutofilled = _m[1];
     // отображаем крестик только для заполненного и активного инпута
     var clearButtonVisible = clear && filled && !disabled && !readOnly;
+    var hasInnerLabel = label && labelView === 'inner';
     var handleInputFocus = useCallback(function (event) {
         if (!readOnly) {
             setFocused(true);
@@ -122,12 +123,12 @@ var Input = React.forwardRef(function (_a, ref) {
     };
     return (React.createElement(FormControl, { 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, filled: filled || autofilled || focused, focused: focused, error: error, label: label, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp },
+            _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, 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 },
         React.createElement("input", __assign({}, restProps, { className: cn(styles.input, colorStyles[colors].input, (_c = {},
                 _c[styles.error] = error,
                 _c[colorStyles[colors].error] = error,
-                _c[styles.hasLabel] = label,
-                _c[colorStyles[colors].hasLabel] = label,
+                _c[styles.hasInnerLabel] = hasInnerLabel,
+                _c[colorStyles[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 }))));
 });
 /**