@megafon/ui-core 3.12.0 → 4.0.0-beta.10

package/dist/lib/components/TextField/TextField.js

@@ -13,6 +13,12 @@ require("core-js/modules/es.function.name");
 
 require("core-js/modules/es.object.values");
 
+require("core-js/modules/es.parse-float");
+
+require("core-js/modules/es.regexp.exec");
+
+require("core-js/modules/es.string.replace");
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -21,13 +27,13 @@ var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
 
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
-var _InputLabel = _interopRequireDefault(require("../InputLabel/InputLabel"));
-
-var _Paragraph = _interopRequireDefault(require("../Paragraph/Paragraph"));
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -53,11 +59,11 @@ var Show = function Show(props) {
   }));
 };
 
-var ErrorIcon = function ErrorIcon(props) {
+var ClearIcon = function ClearIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    className: "ErrorIcon__st0",
+    className: "ClearIcon__st0",
     d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
   }));
 };
@@ -70,6 +76,21 @@ var CheckedIcon = function CheckedIcon(props) {
   }));
 };
 
+var ResizeIcon = function ResizeIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    width: 12,
+    height: 12
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M1 11L11 1M7 11l4-4"
+  }));
+};
+
+var DEFAULT_PLACEHOLDERS = {
+  email: 'E-mail',
+  tel: 'Номер телефона',
+  password: 'Пароль',
+  text: 'Текст'
+};
 var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -80,10 +101,11 @@ var TextareaTypes = {
   FLEXIBLE: 'flexible'
 };
 exports.TextareaTypes = TextareaTypes;
-var TEXTAREA_MIN_HEIGHT = 96;
-var TEXTAREA_MAX_HEIGHT = 168;
-var ROW_HEIGHT = 24;
+var TEXTAREA_MIN_HEIGHT = 48;
+var TEXTAREA_MAX_HEIGHT = 144;
+var DEFAULT_LABEL_TOP_POSITION = 16;
 var DEFAULT_ROW_COUNT = 3;
+var ROW_HEIGHT = 24;
 var cn = (0, _uiHelpers.cnCreate)('mfui-text-field');
 
 var TextField = function TextField(_ref) {
@@ -118,7 +140,8 @@ var TextField = function TextField(_ref) {
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? '' : _ref$value,
       verification = _ref.verification,
-      noticeText = _ref.noticeText,
+      _ref$noticeText = _ref.noticeText,
+      noticeText = _ref$noticeText === void 0 ? '' : _ref$noticeText,
       inputRef = _ref.inputRef,
       inputMode = _ref.inputMode,
       autoComplete = _ref.autoComplete,
@@ -137,33 +160,46 @@ var TextField = function TextField(_ref) {
       inputValue = _useState4[0],
       setInputValue = _useState4[1];
 
-  var _useState5 = (0, React.useState)(TEXTAREA_MIN_HEIGHT),
+  var _useState5 = (0, React.useState)(ROW_HEIGHT * DEFAULT_ROW_COUNT),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
       initialTextareaHeight = _useState6[0],
       setInitialTextareaHeight = _useState6[1];
 
   var _useState7 = (0, React.useState)(false),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      isTextareaResized = _useState8[0],
-      setIsTextareaResized = _useState8[1];
+      isMaxLimitExceeded = _useState8[0],
+      setIsMaxLimitExceeded = _useState8[1];
 
-  var _useState9 = (0, React.useState)(false),
+  var _useState9 = (0, React.useState)(noticeText),
       _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      isMaxLimitExceeded = _useState10[0],
-      setIsMaxLimitExceeded = _useState10[1];
+      displayedNoticeText = _useState10[0],
+      setDisplayedNoticeText = _useState10[1];
 
   var _useState11 = (0, React.useState)(false),
       _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      isTouch = _useState12[0],
-      setTouch = _useState12[1];
+      isTextareaResizeFocused = _useState12[0],
+      setIsTextareaResizeFocused = _useState12[1];
+
+  var _useState13 = (0, React.useState)(false),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      isTextareaResized = _useState14[0],
+      setIsTextareaResized = _useState14[1];
 
   var fieldNode = (0, React.useRef)();
+  var labelRef = (0, React.useRef)(null);
+  var resizerRef = (0, React.useRef)(null);
   var isPasswordType = (0, React.useMemo)(function () {
     return type === 'password';
   }, [type]);
   var isVisiblePassword = (0, React.useMemo)(function () {
     return isPasswordType && !isPasswordHidden;
   }, [isPasswordHidden, isPasswordType]);
+  var hasValue = isControlled ? !!value : !!inputValue;
+  var isValidVerification = verification === Verification.VALID;
+  var isErrorVerification = verification === Verification.ERROR;
+  var hasValueForClear = hasValue && !isPasswordType && !customIcon && !isValidVerification;
+  var hasClearIcon = !disabled && (hasValueForClear || isErrorVerification);
+  var actualPlaceholder = placeholder || DEFAULT_PLACEHOLDERS[type];
   var checkSymbolMaxLimit = (0, React.useCallback)(function () {
     var textareaValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
 
@@ -178,8 +214,47 @@ var TextField = function TextField(_ref) {
     checkSymbolMaxLimit(value);
   }, [value, checkSymbolMaxLimit, isControlled]);
   (0, React.useEffect)(function () {
-    setTouch((0, _uiHelpers.detectTouch)());
-  }, []);
+    noticeText && setDisplayedNoticeText(noticeText);
+  }, [noticeText]);
+  (0, React.useEffect)(function () {
+    if (!resizerRef.current || textarea !== TextareaTypes.FLEXIBLE) {
+      return;
+    }
+
+    var handleStartResize = function handleStartResize(downEvent) {
+      if (!fieldNode.current) {
+        return;
+      }
+
+      setIsTextareaResizeFocused(true);
+      downEvent.preventDefault();
+      var originalHeight = parseFloat(getComputedStyle(fieldNode.current).getPropertyValue('height').replace('px', ''));
+      var originalCoordinateY = downEvent.clientY || downEvent.touches[0].clientY;
+      var handleResize = (0, _lodash["default"])(function (moveEvent) {
+        var currentCoordinateY = moveEvent.clientY || moveEvent.touches[0].clientY;
+        var resizeHeight = originalHeight + (currentCoordinateY - originalCoordinateY);
+        var updatedHeight = resizeHeight < TEXTAREA_MIN_HEIGHT ? TEXTAREA_MIN_HEIGHT : resizeHeight;
+        setInitialTextareaHeight(updatedHeight);
+        setIsTextareaResized(true);
+      }, _throttleTime["default"].resizeTextarea);
+
+      var handleResizeCancel = function handleResizeCancel() {
+        setIsTextareaResizeFocused(false);
+        window.removeEventListener('mousemove', handleResize);
+        window.removeEventListener('touchmove', handleResize);
+        window.removeEventListener('mouseup', handleResizeCancel);
+        window.removeEventListener('touchend', handleResizeCancel);
+      };
+
+      window.addEventListener('mousemove', handleResize);
+      window.addEventListener('touchmove', handleResize);
+      window.addEventListener('mouseup', handleResizeCancel);
+      window.addEventListener('touchend', handleResizeCancel);
+    };
+
+    resizerRef.current.addEventListener('mousedown', handleStartResize);
+    resizerRef.current.addEventListener('touchstart', handleStartResize);
+  }, [textarea]);
   var togglePasswordHiding = (0, React.useCallback)(function () {
     return setPasswordHidden(function (prevPassState) {
       return !prevPassState;
@@ -187,17 +262,14 @@ var TextField = function TextField(_ref) {
   }, []);
 
   var setTextareaHeight = function setTextareaHeight() {
-    if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current)) {
+    if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) || isTextareaResized) {
       return;
     }
 
     var scrollHeight = fieldNode.current.scrollHeight;
-
-    if (!isTextareaResized) {
-      var extraRowCount = Math.round((scrollHeight - TEXTAREA_MIN_HEIGHT) / ROW_HEIGHT);
-      var newHeight = extraRowCount <= DEFAULT_ROW_COUNT ? TEXTAREA_MIN_HEIGHT + ROW_HEIGHT * extraRowCount : TEXTAREA_MAX_HEIGHT;
-      setInitialTextareaHeight(newHeight);
-    }
+    var extraRowCount = Math.round((scrollHeight - 28 - TEXTAREA_MIN_HEIGHT) / ROW_HEIGHT);
+    var newHeight = extraRowCount <= DEFAULT_ROW_COUNT ? TEXTAREA_MIN_HEIGHT + ROW_HEIGHT * extraRowCount : TEXTAREA_MAX_HEIGHT;
+    setInitialTextareaHeight(newHeight);
   };
 
   var handleInputChange = function handleInputChange(e) {
@@ -210,18 +282,27 @@ var TextField = function TextField(_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
 
-  var handleTextareaClick = function handleTextareaClick() {
-    if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current)) {
+  var handleNoticeTransitionEnd = (0, React.useCallback)(function () {
+    !noticeText && setDisplayedNoticeText(noticeText);
+  }, [noticeText]);
+
+  var handleTextareaScroll = function handleTextareaScroll() {
+    if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) || !(labelRef === null || labelRef === void 0 ? void 0 : labelRef.current)) {
       return;
     }
 
-    var textAreaHeight = fieldNode.current.offsetHeight;
-    setIsTextareaResized(textAreaHeight < initialTextareaHeight);
+    var scrollTop = fieldNode.current.scrollTop;
+
+    if (!scrollTop) {
+      labelRef.current.style.top = '';
+      return;
+    }
+
+    labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
   };
 
   var handleIconClick = (0, React.useCallback)(function (e) {
-    var ERROR = Verification.ERROR;
-    var isClearFuncAvailable = !customIcon && !onCustomIconClick && verification === ERROR;
+    var isClearFuncAvailable = !customIcon && !onCustomIconClick && hasClearIcon;
     var field = fieldNode.current;
     isPasswordType && togglePasswordHiding();
     onCustomIconClick === null || onCustomIconClick === void 0 ? void 0 : onCustomIconClick(e);
@@ -230,7 +311,7 @@ var TextField = function TextField(_ref) {
       setInputValue('');
       field === null || field === void 0 ? void 0 : field.focus();
     }
-  }, [isPasswordType, togglePasswordHiding, onCustomIconClick, verification, customIcon, isControlled]);
+  }, [isPasswordType, togglePasswordHiding, onCustomIconClick, customIcon, isControlled, hasClearIcon]);
   var handleFocus = (0, React.useCallback)(function (e) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
@@ -241,7 +322,6 @@ var TextField = function TextField(_ref) {
     return onBeforeMaskChange && onBeforeMaskChange(inputedValue, newState, oldState);
   }, [onBeforeMaskChange]);
   var textareaType = textarea === TextareaTypes.FLEXIBLE ? TextareaTypes.FLEXIBLE : TextareaTypes.FIXED;
-  var hasScrolling = initialTextareaHeight >= TEXTAREA_MAX_HEIGHT || isTextareaResized;
   var commonParams = (0, _extends2["default"])((0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input)), {
     disabled: disabled,
     id: id,
@@ -252,7 +332,7 @@ var TextField = function TextField(_ref) {
     onFocus: handleFocus,
     onKeyUp: onKeyUp,
     maxLength: maxLength,
-    placeholder: placeholder,
+    placeholder: actualPlaceholder,
     required: required,
     inputMode: inputMode
   });
@@ -269,7 +349,8 @@ var TextField = function TextField(_ref) {
   var textareaParams = (0, _extends2["default"])((0, _extends2["default"])({}, commonParams), {
     className: cn('field', {
       type: textareaType,
-      scrolling: hasScrolling
+      textarea: textarea,
+      resized: isTextareaResizeFocused
     }, input)
   });
 
@@ -287,46 +368,64 @@ var TextField = function TextField(_ref) {
       case !!customIcon:
         return customIcon;
 
-      case verification === Verification.ERROR:
-        return /*#__PURE__*/React.createElement(ErrorIcon, {
+      case isPasswordType && isPasswordHidden:
+        return /*#__PURE__*/React.createElement(Hide, {
           className: cn('icon')
         });
 
-      case verification === Verification.VALID:
-        return /*#__PURE__*/React.createElement(CheckedIcon, {
+      case isPasswordType && !isPasswordHidden:
+        return /*#__PURE__*/React.createElement(Show, {
           className: cn('icon')
         });
 
-      case isPasswordType && isPasswordHidden:
-        return /*#__PURE__*/React.createElement(Hide, {
+      case isValidVerification:
+        return /*#__PURE__*/React.createElement(CheckedIcon, {
           className: cn('icon')
         });
 
-      case isPasswordType && !isPasswordHidden:
-        return /*#__PURE__*/React.createElement(Show, {
-          className: cn('icon')
+      case hasClearIcon:
+        return /*#__PURE__*/React.createElement(ClearIcon, {
+          className: cn('icon', {
+            clear: true
+          })
         });
 
       default:
-        return null;
+        return undefined;
     }
   };
 
+  var renderLabel = function renderLabel() {
+    var currentLabel = label || actualPlaceholder;
+    return /*#__PURE__*/React.createElement("label", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label), {
+      htmlFor: id,
+      className: cn('label'),
+      ref: labelRef
+    }), currentLabel, required && /*#__PURE__*/React.createElement("span", {
+      className: cn('require-mark')
+    }, "*"));
+  };
+
   var renderTextarea = function renderTextarea() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", (0, _extends2["default"])({}, textareaParams, {
-      onClick: handleTextareaClick,
+      onScroll: handleTextareaScroll,
       style: {
         height: "".concat(initialTextareaHeight, "px")
       },
       ref: getFieldNode
-    })));
+    })), renderLabel());
   };
 
   var renderIconBlock = function renderIconBlock() {
     var icon = getIcon();
-    return icon && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconBox), {
+
+    if (!icon) {
+      return undefined;
+    }
+
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconBox), {
       className: cn('icon-box', {
-        error: verification === Verification.ERROR && !customIcon,
+        error: isErrorVerification && !customIcon,
         password: isPasswordType,
         'custom-handler': !!onCustomIconClick
       }),
@@ -339,7 +438,7 @@ var TextField = function TextField(_ref) {
       inputRef: getFieldNode
     })) : /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, inputParams, {
       ref: getFieldNode
-    })), !hideIcon && renderIconBlock());
+    })), renderLabel(), !hideIcon && renderIconBlock());
   };
 
   var renderField = function renderField() {
@@ -357,32 +456,26 @@ var TextField = function TextField(_ref) {
     className: cn({
       disabled: disabled,
       theme: theme,
-      valid: verification === Verification.VALID,
-      error: verification === Verification.ERROR || isMaxLimitExceeded,
+      valid: isValidVerification,
+      error: isErrorVerification || isMaxLimitExceeded,
       icon: !hideIcon && (!!verification || !!customIcon || type === 'password') && !textarea,
       password: isPlaceholderShowed
     }, className)
-  }), label && /*#__PURE__*/React.createElement(_InputLabel["default"], {
-    dataAttrs: {
-      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label
-    },
-    htmlFor: id
-  }, label, required && /*#__PURE__*/React.createElement("span", {
-    className: cn('require-mark')
-  }, "*")), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('field-wrapper', {
-      'no-touch': !isTouch
+      textarea: textarea && textareaType
     })
-  }, renderField()), /*#__PURE__*/React.createElement("div", {
+  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && /*#__PURE__*/React.createElement("div", {
+    className: cn('resizer'),
+    ref: resizerRef
+  }, /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
     className: cn('wrap')
-  }, noticeText && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
-    className: cn('text', {
-      error: verification === Verification.ERROR,
-      success: verification === Verification.VALID
-    })
-  }), noticeText), symbolCounter && /*#__PURE__*/React.createElement(_Paragraph["default"], {
-    size: "small",
-    hasMargin: false,
+  }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('notice-text', {
+      active: !!noticeText
+    }),
+    onTransitionEnd: handleNoticeTransitionEnd
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice)), displayedNoticeText), symbolCounter && /*#__PURE__*/React.createElement("span", {
     className: cn('counter', {
       error: isMaxLimitExceeded
     })

package/dist/lib/constants/throttleTime.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
     resize: number;
+    resizeTextarea: number;
 };
 export default _default;

package/dist/lib/constants/throttleTime.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _default = {
-  resize: 300
+  resize: 300,
+  resizeTextarea: 100
 };
 exports["default"] = _default;

package/dist/lib/index.d.ts

@@ -3,6 +3,7 @@ export { default as Banner } from './components/Banner/Banner';
 export { default as BannerDot } from './components/Banner/BannerDot';
 export { default as Button } from './components/Button/Button';
 export { default as Calendar } from './components/Calendar/Calendar';
+export { default as Caption } from './components/Caption/Caption';
 export { default as Carousel } from './components/Carousel/Carousel';
 export { default as Checkbox } from './components/Checkbox/Checkbox';
 export { default as checkBreakpointsPropTypes } from './components/Carousel/checkBreakpointsPropTypes';
@@ -14,7 +15,6 @@ export { default as Grid } from './components/Grid/Grid';
 export { default as GridColumn } from './components/Grid/GridColumn';
 export { default as Header } from './components/Header/Header';
 export { default as helpers } from './components/Pagination/helpers';
-export { default as InputLabel } from './components/InputLabel/InputLabel';
 export { default as Link } from './components/Link/Link';
 export { default as List } from './components/List/List';
 export { default as ListItem } from './components/List/ListItem';

package/dist/lib/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "Calendar", {
     return _Calendar["default"];
   }
 });
+Object.defineProperty(exports, "Caption", {
+  enumerable: true,
+  get: function get() {
+    return _Caption["default"];
+  }
+});
 Object.defineProperty(exports, "Carousel", {
   enumerable: true,
   get: function get() {
@@ -99,12 +105,6 @@ Object.defineProperty(exports, "helpers", {
     return _helpers["default"];
   }
 });
-Object.defineProperty(exports, "InputLabel", {
-  enumerable: true,
-  get: function get() {
-    return _InputLabel["default"];
-  }
-});
 Object.defineProperty(exports, "Link", {
   enumerable: true,
   get: function get() {
@@ -290,6 +290,8 @@ var _Button = _interopRequireDefault(require("./components/Button/Button"));
 
 var _Calendar = _interopRequireDefault(require("./components/Calendar/Calendar"));
 
+var _Caption = _interopRequireDefault(require("./components/Caption/Caption"));
+
 var _Carousel = _interopRequireDefault(require("./components/Carousel/Carousel"));
 
 var _Checkbox = _interopRequireDefault(require("./components/Checkbox/Checkbox"));
@@ -312,8 +314,6 @@ var _Header = _interopRequireDefault(require("./components/Header/Header"));
 
 var _helpers = _interopRequireDefault(require("./components/Pagination/helpers"));
 
-var _InputLabel = _interopRequireDefault(require("./components/InputLabel/InputLabel"));
-
 var _Link = _interopRequireDefault(require("./components/Link/Link"));
 
 var _List = _interopRequireDefault(require("./components/List/List"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "3.12.0",
+  "version": "4.0.0-beta.10",
   "files": [
     "dist",
     "styles"
@@ -54,7 +54,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^1.2.2",
+    "@megafon/ui-icons": "^2.0.0-beta.2",
     "@svgr/core": "^2.4.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.5",
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "937a89d31be941889706301984fdbf6c1e1852b2"
+  "gitHead": "75acee9cdcd3587e1456557bea652554d134c30d"
 }

package/styles/base.less

@@ -57,6 +57,9 @@
 @contentVerticalIndentMobileSM: 48px;
 @maxContentWidth: 1440px;
 
+// TRANSITIONS
+@defaultTransitionTiming: 0.3s;
+
 // MIXINS
 .Graphik() {
     font-family: Graphik, Arial, sans-serif;
@@ -73,7 +76,7 @@
 
 .smallFont() {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
 }
 
 h1,

package/dist/es/components/InputLabel/InputLabel.css

@@ -1,5 +0,0 @@
-.mfui-input-label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: 500;
-}

package/dist/es/components/InputLabel/InputLabel.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import './InputLabel.less';
-export interface IInputLabelProps {
-    htmlFor?: string;
-    dataAttrs?: {
-        root?: Record<string, string>;
-    };
-}
-declare const InputLabel: React.FC<IInputLabelProps>;
-export default InputLabel;

package/dist/es/components/InputLabel/InputLabel.js

@@ -1,24 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
-import "./InputLabel.css";
-var cn = cnCreate('mfui-input-label');
-
-var InputLabel = function InputLabel(_ref) {
-  var htmlFor = _ref.htmlFor,
-      dataAttrs = _ref.dataAttrs,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement("label", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    htmlFor: htmlFor,
-    className: cn()
-  }), children);
-};
-
-InputLabel.propTypes = {
-  htmlFor: PropTypes.string,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  })
-};
-export default InputLabel;

package/dist/lib/components/InputLabel/InputLabel.css

@@ -1,5 +0,0 @@
-.mfui-input-label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: 500;
-}

package/dist/lib/components/InputLabel/InputLabel.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import './InputLabel.less';
-export interface IInputLabelProps {
-    htmlFor?: string;
-    dataAttrs?: {
-        root?: Record<string, string>;
-    };
-}
-declare const InputLabel: React.FC<IInputLabelProps>;
-export default InputLabel;