@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/components/Hint/Hint.styles/Hint.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","t","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","mobileContent","mobileHintColor","contentCenter","hintTextAlign"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,mBACzBC,CADyB,EACf;AAChB,WAAOJ,GAAP;;AAEWI,IAAAA,CAAC,CAACC,SAFb;AAGeD,IAAAA,CAAC,CAACE,YAHjB;AAIiBF,IAAAA,CAAC,CAACG,cAJnB;AAKeH,IAAAA,CAAC,CAACI,YALjB;;AAOaJ,IAAAA,CAAC,CAACK,YAPf,EAO+BL,CAAC,CAACM,YAPjC;;;;AAWD,GAbgC;;AAejCC,EAAAA,aAfiC,yBAenBP,CAfmB,EAeT;AACtB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACQ,eADb;;;;AAKD,GArBgC;;AAuBjCC,EAAAA,aAvBiC,yBAuBnBT,CAvBmB,EAuBT;AACtB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACU,aADlB;;AAGD,GA3BgC,EAAD,CAA3B","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  content(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      color: ${t.hintColor};\n      font-size: ${t.hintFontSize};\n      line-height: ${t.hintLineHeight};\n      max-width: ${t.hintMaxWidth};\n      overflow-wrap: break-word;\n      padding: ${t.hintPaddingY} ${t.hintPaddingX};\n      word-break: break-word;\n      word-wrap: break-word;\n    `;\n  },\n\n  mobileContent(t: Theme) {\n    return css`\n      color: ${t.mobileHintColor};\n      max-width: 100%;\n      text-align: left;\n    `;\n  },\n\n  contentCenter(t: Theme) {\n    return css`\n      text-align: ${t.hintTextAlign};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Hint.styles.ts"],"names":["memoizeStyle","getStyles","emotion","content","t","css","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign"],"mappings":";;;AAGA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,OADW,mBACHC,CADG,EACO;AAChB,eAAOF,OAAO,CAACG,GAAf;;AAEWD,QAAAA,CAAC,CAACE,SAFb;AAGeF,QAAAA,CAAC,CAACG,YAHjB;AAIiBH,QAAAA,CAAC,CAACI,cAJnB;AAKeJ,QAAAA,CAAC,CAACK,YALjB;;AAOaL,QAAAA,CAAC,CAACM,YAPf,EAO+BN,CAAC,CAACO,YAPjC;;;;AAWD,OAbU;;AAeXC,MAAAA,aAfW,yBAeGR,CAfH,EAea;AACtB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACS,aADlB;;AAGD,OAnBU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    content(t: Theme) {\n      return emotion.css`\n        box-sizing: border-box;\n        color: ${t.hintColor};\n        font-size: ${t.hintFontSize};\n        line-height: ${t.hintLineHeight};\n        max-width: ${t.hintMaxWidth};\n        overflow-wrap: break-word;\n        padding: ${t.hintPaddingY} ${t.hintPaddingX};\n        word-break: break-word;\n        word-wrap: break-word;\n      `;\n    },\n\n    contentCenter(t: Theme) {\n      return emotion.css`\n        text-align: ${t.hintTextAlign};\n      `;\n    },\n  });\n"]}

package/components/Hint/Hint.styles.d.ts

@@ -1,6 +1,6 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     content(t: Theme): string;
-    mobileContent(t: Theme): string;
     contentCenter(t: Theme): string;
 };

package/components/Input/Input/Input.js

@@ -2,31 +2,69 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-var _excluded = ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars"];
+var _excluded = ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "role", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars", "corners", "aria-describedby", "aria-controls", "aria-label", "element"];
+
+var _class, _class2, _temp; // TODO: Enable this rule in functional components.
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
 
-var _class, _class2, _temp;
 
 import invariant from 'invariant';
 import React from 'react';
-import raf from 'raf';
-import { isIE11, isEdge } from "../../../lib/client";
+import warning from 'warning';
+import { globalObject } from '@skbkontur/global-object';
+import { isEdge, isIE11 } from "../../../lib/client";
 import { isKeyBackspace, isKeyDelete, someKeys } from "../../../lib/events/keyboard/identifiers";
 import { needsPolyfillPlaceholder } from "../../../lib/needsPolyfillPlaceholder";
-import { MaskedInput } from "../../../internal/MaskedInput";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { InternalMaskedInput } from "../../../internal/InternalMaskedInput";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
-import { styles } from "../Input.styles";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { isFunction } from "../../../lib/utils";
+import { FocusControlWrapper } from "../../../internal/FocusControlWrapper";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
+import { InputLayout } from "../InputLayout/InputLayout";
+import { PolyfillPlaceholder } from "../InputLayout/PolyfillPlaceholder";
+import { getStyles } from "../Input.styles";
+export var inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'];
+/**
+ * @deprecated use SizeProp
+ */
+
+export var selectionAllowedTypes = ['text', 'password', 'tel', 'search', 'url'];
+export var selectionErrorMessage = function selectionErrorMessage(type, allowedTypes) {
+  if (allowedTypes === void 0) {
+    allowedTypes = selectionAllowedTypes;
+  }
+
+  return "<Input />. Selection is not supported by the type \"" + type + "\". Types that support selection: " + allowedTypes.map(function (i) {
+    return "\"" + i + "\"";
+  }).join(', ') + ". Reason: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange.";
+};
+export var maskForbiddenTypes = ['number', 'date', 'time'];
+export var maskAllowedTypes = inputTypes.filter(function (type) {
+  return !maskForbiddenTypes.includes(type);
+});
+export var maskErrorMessage = function maskErrorMessage(type, allowedTypes) {
+  if (allowedTypes === void 0) {
+    allowedTypes = maskAllowedTypes;
+  }
+
+  return "<Input />. Prop \"mask\" does not support type \"" + type + "\". Supported types: " + allowedTypes.map(function (i) {
+    return "\"" + i + "\"";
+  }).join(', ') + ".";
+};
 export var InputDataTids = {
   root: 'Input__root'
 };
+export
 /**
- * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
- *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
- */
-
-export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+* Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
+*  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
+*/
+var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
   function Input() {
@@ -37,13 +75,13 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Input.defaultProps);
     _this.state = {
       needsPolyfillPlaceholder: needsPolyfillPlaceholder,
       blinking: false,
       focused: false
     };
     _this.selectAllId = null;
-    _this.blinkTimeout = 0;
     _this.input = null;
 
     _this.selectAll = function () {
@@ -53,19 +91,21 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     };
 
     _this.delaySelectAll = function () {
-      return _this.selectAllId = raf(_this.selectAll);
+      var _globalObject$request;
+
+      return _this.selectAllId = (_globalObject$request = globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(_this.selectAll)) != null ? _globalObject$request : null;
     };
 
     _this.cancelDelayedSelectAll = function () {
       if (_this.selectAllId) {
-        raf.cancel(_this.selectAllId);
+        globalObject.cancelAnimationFrame == null ? void 0 : globalObject.cancelAnimationFrame(_this.selectAllId);
         _this.selectAllId = null;
       }
     };
 
     _this.cancelBlink = function (callback) {
       if (_this.blinkTimeout) {
-        clearTimeout(_this.blinkTimeout);
+        globalObject.clearTimeout(_this.blinkTimeout);
         _this.blinkTimeout = 0;
 
         if (_this.state.blinking) {
@@ -82,8 +122,16 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       }
     };
 
+    _this.getInput = function (inputProps) {
+      if (_this.props.element) {
+        return /*#__PURE__*/React.cloneElement(_this.props.element, inputProps);
+      }
+
+      return _this.props.mask && !_this.canBeUsedWithMask ? _this.renderMaskedInput(inputProps, _this.props.mask) : /*#__PURE__*/React.createElement('input', inputProps);
+    };
+
     _this.renderMain = function (props) {
-      var _cx, _cx2;
+      var _this$emotion$cx, _this$emotion$cx2;
 
       var onMouseEnter = props.onMouseEnter,
           onMouseLeave = props.onMouseLeave,
@@ -93,6 +141,7 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
           onValueChange = props.onValueChange,
           width = props.width,
           error = props.error,
+          role = props.role,
           warning = props.warning,
           leftIcon = props.leftIcon,
           rightIcon = props.rightIcon,
@@ -111,24 +160,32 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
           prefix = props.prefix,
           suffix = props.suffix,
           formatChars = props.formatChars,
+          corners = props.corners,
+          ariaDescribedby = props['aria-describedby'],
+          ariaControls = props['aria-controls'],
+          ariaLabel = props['aria-label'],
+          element = props.element,
           rest = _objectWithoutPropertiesLoose(props, _excluded);
 
       var _this$state = _this.state,
           blinking = _this$state.blinking,
           focused = _this$state.focused;
+      var styles = getStyles(_this.emotion);
       var labelProps = {
-        className: cx(styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[styles.focus(_this.theme)] = focused, _cx[styles.blink(_this.theme)] = blinking, _cx[styles.borderless()] = borderless && !focused, _cx[styles.disabled(_this.theme)] = disabled, _cx[styles.warning(_this.theme)] = warning, _cx[styles.error(_this.theme)] = error, _cx[styles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _cx[styles.warningFallback(_this.theme)] = warning && (isIE11 || isEdge), _cx[styles.errorFallback(_this.theme)] = error && (isIE11 || isEdge), _cx)),
-        style: {
+        className: _this.emotion.cx(styles.root(_this.theme), _this.getSizeClassName(), (_this$emotion$cx = {}, _this$emotion$cx[styles.focus(_this.theme)] = focused && !warning && !error, _this$emotion$cx[styles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _this$emotion$cx[styles.blink(_this.theme)] = blinking, _this$emotion$cx[styles.borderless()] = borderless && !focused, _this$emotion$cx[styles.disabled(_this.theme)] = disabled, _this$emotion$cx[styles.warning(_this.theme)] = warning, _this$emotion$cx[styles.error(_this.theme)] = error, _this$emotion$cx[styles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _this$emotion$cx[styles.warningFallback(_this.theme)] = warning && (isIE11 || isEdge), _this$emotion$cx[styles.errorFallback(_this.theme)] = error && (isIE11 || isEdge), _this$emotion$cx)),
+        'aria-controls': ariaControls,
+        style: _extends({
           width: width
-        },
+        }, corners),
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onMouseOver: onMouseOver
       };
 
       var inputProps = _extends({}, rest, {
-        className: cx(styles.input(_this.theme), (_cx2 = {}, _cx2[styles.inputFocus(_this.theme)] = focused, _cx2[styles.inputDisabled(_this.theme)] = disabled, _cx2)),
+        className: _this.emotion.cx(styles.input(_this.theme), (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.inputFocus(_this.theme)] = focused, _this$emotion$cx2[styles.inputDisabled(_this.theme)] = disabled, _this$emotion$cx2)),
         value: value,
+        role: role,
         onChange: _this.handleChange,
         onFocus: _this.handleFocus,
         onKeyDown: _this.handleKeyDown,
@@ -138,16 +195,37 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
           textAlign: align
         },
         ref: _this.refInput,
-        type: 'text',
+        type: type,
         placeholder: !_this.isMaskVisible && !needsPolyfillPlaceholder ? placeholder : undefined,
-        disabled: disabled
+        disabled: disabled,
+        'aria-describedby': ariaDescribedby,
+        'aria-label': ariaLabel
       });
 
-      if (type === 'password') {
-        inputProps.type = type;
+      var input = /*#__PURE__*/React.createElement(FocusControlWrapper, {
+        onBlurWhenDisabled: _this.resetFocus
+      }, _this.getInput(inputProps));
+
+      if (isTheme2022(_this.theme)) {
+        return /*#__PURE__*/React.createElement(InputLayout, {
+          leftIcon: leftIcon,
+          rightIcon: rightIcon,
+          prefix: prefix,
+          suffix: suffix,
+          labelProps: labelProps,
+          context: {
+            disabled: Boolean(disabled),
+            focused: focused,
+            size: size
+          }
+        }, input, _this.state.needsPolyfillPlaceholder && /*#__PURE__*/React.createElement(PolyfillPlaceholder, {
+          isMaskVisible: _this.isMaskVisible,
+          value: value,
+          defaultValue: _this.props.defaultValue,
+          align: align
+        }, placeholder));
       }
 
-      var input = mask ? _this.renderMaskedInput(inputProps, mask) : /*#__PURE__*/React.createElement('input', inputProps);
       return /*#__PURE__*/React.createElement("label", _extends({
         "data-tid": InputDataTids.root
       }, labelProps), /*#__PURE__*/React.createElement("span", {
@@ -155,12 +233,12 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       }, _this.renderLeftIcon(), _this.renderPrefix()), /*#__PURE__*/React.createElement("span", {
         className: styles.wrapper()
       }, input, _this.renderPlaceholder()), /*#__PURE__*/React.createElement("span", {
-        className: cx(styles.sideContainer(), styles.rightContainer())
+        className: _this.emotion.cx(styles.sideContainer(), styles.rightContainer())
       }, _this.renderSuffix(), _this.renderRightIcon()));
     };
 
     _this.refInput = function (element) {
-      if (element instanceof MaskedInput) {
+      if (element instanceof InternalMaskedInput || element && 'input' in element) {
         _this.input = element.input;
       } else {
         _this.input = element;
@@ -193,7 +271,6 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       });
 
       if (_this.props.selectAllOnFocus) {
-        // https://github.com/facebook/react/issues/7769
         _this.input && !isIE11 ? _this.selectAll() : _this.delaySelectAll();
       }
 
@@ -242,18 +319,20 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       }
     };
 
-    _this.handleBlur = function (event) {
-      _this.setState({
+    _this.resetFocus = function () {
+      return _this.setState({
         focused: false
       });
+    };
 
-      if (_this.props.onBlur) {
-        _this.props.onBlur(event);
-      }
+    _this.handleBlur = function (event) {
+      _this.resetFocus();
+
+      _this.props.onBlur == null ? void 0 : _this.props.onBlur(event);
     };
 
     _this.renderPrefix = function () {
-      var _cx3;
+      var _this$emotion$cx3;
 
       var _this$props = _this.props,
           prefix = _this$props.prefix,
@@ -263,13 +342,14 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
         return null;
       }
 
+      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: cx(styles.prefix(_this.theme), (_cx3 = {}, _cx3[styles.prefixDisabled(_this.theme)] = disabled, _cx3))
+        className: _this.emotion.cx(styles.prefix(_this.theme), (_this$emotion$cx3 = {}, _this$emotion$cx3[styles.prefixDisabled(_this.theme)] = disabled, _this$emotion$cx3))
       }, prefix);
     };
 
     _this.renderSuffix = function () {
-      var _cx4;
+      var _this$emotion$cx4;
 
       var _this$props2 = _this.props,
           suffix = _this$props2.suffix,
@@ -279,8 +359,9 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
         return null;
       }
 
+      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: cx(styles.suffix(_this.theme), (_cx4 = {}, _cx4[styles.suffixDisabled(_this.theme)] = disabled, _cx4))
+        className: _this.emotion.cx(styles.suffix(_this.theme), (_this$emotion$cx4 = {}, _this$emotion$cx4[styles.suffixDisabled(_this.theme)] = disabled, _this$emotion$cx4))
       }, suffix);
     };
 
@@ -289,9 +370,23 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
 
   var _proto = Input.prototype;
 
+  _proto.outputMaskError = function outputMaskError() {
+    warning(!(this.props.mask && this.canBeUsedWithMask), maskErrorMessage(this.getProps().type));
+  };
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.outputMaskError();
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (this.props.type !== prevProps.type || this.props.mask !== prevProps.mask) {
+      this.outputMaskError();
+    }
+  };
+
   _proto.componentWillUnmount = function componentWillUnmount() {
     if (this.blinkTimeout) {
-      clearTimeout(this.blinkTimeout);
+      globalObject.clearTimeout(this.blinkTimeout);
     }
 
     this.cancelDelayedSelectAll();
@@ -344,7 +439,7 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     this.setState({
       blinking: true
     }, function () {
-      _this2.blinkTimeout = window.setTimeout(_this2.cancelBlink, 150);
+      _this2.blinkTimeout = globalObject.setTimeout(_this2.cancelBlink, 150);
     });
   }
   /**
@@ -355,34 +450,54 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   ;
 
   _proto.setSelectionRange = function setSelectionRange(start, end) {
+    var _globalObject$documen,
+        _this$props$value,
+        _this3 = this; // https://github.com/facebook/react/issues/7769
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+
+
+    if (!selectionAllowedTypes.includes(this.getProps().type)) {
+      warning(false, selectionErrorMessage(this.getProps().type));
+      return;
+    }
+
     if (!this.input) {
       throw new Error('Cannot call "setSelectionRange" on unmounted Input');
     }
 
-    if (document.activeElement !== this.input) {
+    if (((_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.activeElement) !== this.input) {
       this.focus();
     }
 
-    this.input.setSelectionRange(start, end);
+    if (this.props.mask && this.props.value && ((_this$props$value = this.props.value) == null ? void 0 : _this$props$value.length) < this.props.mask.length) {
+      globalObject.setTimeout(function () {
+        var _this3$input;
+
+        (_this3$input = _this3.input) == null ? void 0 : _this3$input.setSelectionRange(start, end);
+      }, 150);
+    } else {
+      var _this$input;
+
+      (_this$input = this.input) == null ? void 0 : _this$input.setSelectionRange(start, end);
+    }
   };
 
   _proto.render = function render() {
-    var _this3 = this;
-
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this3.theme = theme;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-        rootNodeRef: _this3.setRootNode
-      }, _this3.props), _this3.renderMain);
+    var _this4 = this;
+
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this4.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+        _this4.theme = theme;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this4.setRootNode
+        }, _this4.props), _this4.renderMain);
+      });
     });
-  }
-  /**
-  * @public
-  */
-  ;
+  };
 
   _proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {
-    return /*#__PURE__*/React.createElement(MaskedInput, _extends({}, inputProps, {
+    return /*#__PURE__*/React.createElement(InternalMaskedInput, _extends({}, inputProps, {
       mask: mask,
       maskChar: this.props.maskChar,
       alwaysShowMask: this.props.alwaysShowMask,
@@ -398,7 +513,9 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       right = false;
     }
 
-    switch (this.props.size) {
+    var styles = getStyles(this.emotion);
+
+    switch (this.getProps().size) {
       case 'large':
         return right ? styles.rightIconLarge(this.theme) : styles.leftIconLarge(this.theme);
 
@@ -420,16 +537,17 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   };
 
   _proto.renderIcon = function renderIcon(icon, sizeClassName) {
-    var _cx5;
+    var _this$emotion$cx5;
 
     if (!icon) {
       return null;
     }
 
     var disabled = this.props.disabled;
-    var iconNode = icon instanceof Function ? icon() : icon;
+    var iconNode = isFunction(icon) ? icon() : icon;
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement("span", {
-      className: cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[styles.iconDisabled()] = disabled, _cx5))
+      className: this.emotion.cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), (_this$emotion$cx5 = {}, _this$emotion$cx5[styles.iconFocus(this.theme)] = this.state.focused, _this$emotion$cx5[styles.iconDisabled()] = disabled, _this$emotion$cx5))
     }, iconNode);
   };
 
@@ -439,10 +557,11 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     var placeholder = null;
 
     if (this.state.needsPolyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value && !this.props.defaultValue) {
-      var _cx6;
+      var _this$emotion$cx6;
 
+      var styles = getStyles(this.emotion);
       placeholder = /*#__PURE__*/React.createElement("div", {
-        className: cx(styles.placeholder(this.theme), (_cx6 = {}, _cx6[styles.placeholderDisabled(this.theme)] = disabled, _cx6[styles.placeholderFocus(this.theme)] = focused, _cx6)),
+        className: this.emotion.cx(styles.placeholder(this.theme), (_this$emotion$cx6 = {}, _this$emotion$cx6[styles.placeholderDisabled(this.theme)] = disabled, _this$emotion$cx6[styles.placeholderFocus(this.theme)] = focused, _this$emotion$cx6)),
         style: {
           textAlign: this.props.align || 'inherit'
         }
@@ -453,18 +572,20 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   };
 
   _proto.getSizeClassName = function getSizeClassName() {
-    var _cx7, _cx8, _cx9;
+    var _this$emotion$cx7, _this$emotion$cx8, _this$emotion$cx9;
+
+    var styles = getStyles(this.emotion);
 
-    switch (this.props.size) {
+    switch (this.getProps().size) {
       case 'large':
-        return cx((_cx7 = {}, _cx7[styles.sizeLarge(this.theme)] = true, _cx7[styles.sizeLargeFallback(this.theme)] = isIE11 || isEdge, _cx7));
+        return this.emotion.cx((_this$emotion$cx7 = {}, _this$emotion$cx7[styles.sizeLarge(this.theme)] = true, _this$emotion$cx7[styles.sizeLargeFallback(this.theme)] = isIE11 || isEdge, _this$emotion$cx7));
 
       case 'medium':
-        return cx((_cx8 = {}, _cx8[styles.sizeMedium(this.theme)] = true, _cx8[styles.sizeMediumFallback(this.theme)] = isIE11 || isEdge, _cx8));
+        return this.emotion.cx((_this$emotion$cx8 = {}, _this$emotion$cx8[styles.sizeMedium(this.theme)] = true, _this$emotion$cx8[styles.sizeMediumFallback(this.theme)] = isIE11 || isEdge, _this$emotion$cx8));
 
       case 'small':
       default:
-        return cx((_cx9 = {}, _cx9[styles.sizeSmall(this.theme)] = true, _cx9[styles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _cx9));
+        return this.emotion.cx((_this$emotion$cx9 = {}, _this$emotion$cx9[styles.sizeSmall(this.theme)] = true, _this$emotion$cx9[styles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _this$emotion$cx9));
     }
   };
 
@@ -477,9 +598,21 @@ export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       var focused = this.state.focused;
       return Boolean(mask && (focused || alwaysShowMask));
     }
+  }, {
+    key: "canBeUsedWithMask",
+    get: function get() {
+      return maskForbiddenTypes.includes(this.getProps().type);
+    }
+    /**
+    * Работает с типами `text`, `password`, `tel`, `search`, `url`
+    * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
+    * @public
+    */
+
   }]);
 
   return Input;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Input', _class2.defaultProps = {
-  size: 'small'
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Input', _class2.displayName = 'Input', _class2.defaultProps = {
+  size: 'small',
+  type: 'text'
 }, _temp)) || _class;