@megafon/ui-core 3.6.0 → 4.0.0-beta.0

package/CHANGELOG.md

@@ -3,28 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [3.6.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.3...@megafon/ui-core@3.6.0) (2022-04-25)
+# [4.0.0-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.3-beta.1...@megafon/ui-core@4.0.0-beta.0) (2022-05-24)
 
 
-### Bug Fixes
+### Features
 
-* **calendar:** fix go to start day after user choice ([8bbce10](https://github.com/MegafonWebLab/megafon-ui/commit/8bbce102d204f7ea7706158f3e6540c86ed3aada))
+* **caption:** add new Caption component; update .smallFont() less mixin ([603bed3](https://github.com/MegafonWebLab/megafon-ui/commit/603bed3ce782676b22381e3d4df5dae141fb015c))
+* **paragraph:** remove prop size; add new prop; add 'pale' option to colors ([ef15841](https://github.com/MegafonWebLab/megafon-ui/commit/ef15841474473739d3ac88da7a8737e183ff288a))
 
 
-### Features
+### BREAKING CHANGES
 
-* **tooltip:** added prop isPortal for tooltip ([e6f6d17](https://github.com/MegafonWebLab/megafon-ui/commit/e6f6d1749cd99f065c50bac4eb6a9b3592653f8d))
+* **caption:** .smallFont() less mixin line-height rule now set to 18px instead of 16px
+either accept new rules or manually add line-height: 16px in your components
+* **paragraph:** prop 'size' is no longer exists.
+use component Caption instead of Paragraph size="small"
 
 
 
 
 
-## [3.5.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.2...@megafon/ui-core@3.5.3) (2022-04-18)
+## [3.5.3-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.3-beta.0...@megafon/ui-core@3.5.3-beta.1) (2022-05-06)
 
+**Note:** Version bump only for package @megafon/ui-core
 
-### Bug Fixes
 
-* **switcher:** fix safari bugs ([65274bc](https://github.com/MegafonWebLab/megafon-ui/commit/65274bc3c5e7385109afff94a8ff3f712c9af097))
+
+
+
+## [3.5.3-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.2...@megafon/ui-core@3.5.3-beta.0) (2022-04-13)
+
+**Note:** Version bump only for package @megafon/ui-core
 
 
 

package/dist/es/colors/Colors.css

@@ -2,6 +2,8 @@
   margin: 0 -80px;
   padding: 56px 80px 40px;
   background-color: var(--spbSky0);
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
 }
 @media screen and (max-width: 1120px) {
   .colors__inner {
@@ -90,6 +92,8 @@
   font-size: 12px;
   line-height: 18px;
   text-align: center;
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
 }
 @media screen and (max-width: 1023px) {
   .colors__description {

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.css

@@ -1,6 +1,6 @@
 .mfui-price-badge {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

package/dist/es/components/Badges/components/PromoBadge/PromoBadge.css

@@ -30,6 +30,6 @@
 .mfui-promo-badge__text {
   font-family: inherit;
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   font-weight: 500;
 }

package/dist/es/components/Badges/components/TimerBadge/TimerBadge.css

@@ -32,7 +32,7 @@
 }
 .mfui-timer-badge__text {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   font-family: inherit;
   margin-left: 2px;
   font-weight: 500;

package/dist/es/components/Calendar/Calendar.js

@@ -20,7 +20,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { START_DATE, END_DATE, useDatepicker, useMonth } from '@datepicker-react/hooks';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import differenceInDays from 'date-fns/differenceInDays';
@@ -53,17 +53,6 @@ var dayLabelFormat = function dayLabelFormat(date) {
 var monthLabelFormat = function monthLabelFormat(date) {
   return formatDate(date, 'LLLL');
 };
-/* List of cases to check on component change:
-
-- Should correctly choose value and trigger callbacks with correct arguments on dates choose.
-- Should set 1 day period if start and end date is equal
-- Should correctly increase period if choose earlier start date
-- Should correctly change start date of selected period if chosen date in period closer to current start date
-- Should correctly change end date of selected period if chosen date in period closer to current end date
-- Should correctly highlights period if start date chosen and hover on possible end date
-
-*/
-
 
 var cn = cnCreate('mfui-calendar');
 
@@ -102,7 +91,6 @@ var Calendar = function Calendar(_ref) {
       hoveredDate = _useState4[0],
       setHoveredDate = _useState4[1];
 
-  var isUserChoice = useRef(false);
   var stateStartDate = calendarState.startDate,
       stateEndDate = calendarState.endDate,
       stateFocusedInput = calendarState.focusedInput;
@@ -123,13 +111,10 @@ var Calendar = function Calendar(_ref) {
       goToDate = _a.goToDate,
       pickerProps = __rest(_a, ["firstDayOfWeek", "activeMonths", "goToPreviousMonths", "goToNextMonths", "goToDate"]);
 
-  useEffect(function () {
-    isUserChoice.current = false;
-  }, [startDate]);
   useEffect(function () {
     var propsStartDate = calendarStateFromProps.startDate;
     setCalendarState(calendarStateFromProps);
-    !isUserChoice.current && propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
+    propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calendarStateFromProps]);
 
   var getCalendarState = function getCalendarState(date) {
@@ -194,7 +179,6 @@ var Calendar = function Calendar(_ref) {
     var nextStartDate = nextState.startDate,
         nextEndDate = nextState.endDate;
     setCalendarState(nextState);
-    isUserChoice.current = true;
     onChange === null || onChange === void 0 ? void 0 : onChange(nextStartDate, nextEndDate);
   };
 

package/dist/es/components/Calendar/components/Day/Day.css

@@ -21,7 +21,7 @@
           user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
 }
 .mfui-day:last-child {
   padding-right: 0;

package/dist/es/components/Calendar/components/Month/Month.css

@@ -56,7 +56,7 @@
 }
 .mfui-month__weekday {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   width: 20px;
   height: 16px;
   color: var(--content);

package/dist/es/components/Caption/Caption.css

@@ -0,0 +1,48 @@
+.mfui-caption {
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  margin: 0;
+}
+.mfui-caption_variant_normal {
+  font-weight: 400;
+}
+.mfui-caption_variant_medium {
+  font-weight: 600;
+}
+.mfui-caption_space_wide {
+  line-height: 18px;
+}
+.mfui-caption_space_tight {
+  line-height: 14px;
+}
+.mfui-caption_align_left {
+  text-align: left;
+}
+.mfui-caption_align_center {
+  text-align: center;
+}
+.mfui-caption_align_right {
+  text-align: right;
+}
+.mfui-caption_has-margin {
+  margin: 0 0 16px;
+}
+.mfui-caption_color_inherit {
+  color: inherit;
+}
+.mfui-caption_color_default {
+  color: var(--content);
+}
+.mfui-caption_color_gray {
+  color: var(--spbSky3);
+}
+.mfui-caption_color_white {
+  color: var(--stcWhite);
+}
+.mfui-caption_color_green {
+  color: var(--brandGreen);
+}
+.mfui-caption_color_purple {
+  color: var(--brandPurple);
+}

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import './Caption.less';
+declare const COLORS: {
+    readonly INHERIT: "inherit";
+    readonly DEFAULT: "default";
+    readonly GRAY: "gray";
+    readonly WHITE: "white";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+declare type ColorType = typeof COLORS[keyof typeof COLORS];
+export interface ICaptionProps {
+    /** Выравнивание по горизонтали */
+    align?: 'left' | 'center' | 'right';
+    /** Поведение текста при встраивании в широкий или узкий контейнер */
+    space?: 'wide' | 'tight';
+    /** Начертание шрифта: обычный или полужирный */
+    variant?: 'normal' | 'medium';
+    /** Вертикальный отступ */
+    hasMargin?: boolean;
+    /** Цвет текста */
+    color?: ColorType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Caption: React.FC<ICaptionProps>;
+export default Caption;

package/dist/es/components/Caption/Caption.js

@@ -0,0 +1,51 @@
+import "core-js/modules/es.object.values";
+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 "./Caption.css";
+var COLORS = {
+  INHERIT: 'inherit',
+  DEFAULT: 'default',
+  GRAY: 'gray',
+  WHITE: 'white',
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+var cn = cnCreate('mfui-caption');
+
+var Caption = function Caption(_ref) {
+  var align = _ref.align,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      _ref$space = _ref.space,
+      space = _ref$space === void 0 ? 'wide' : _ref$space,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
+      className = _ref.className,
+      _ref$hasMargin = _ref.hasMargin,
+      hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("p", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      align: align,
+      color: color,
+      space: space,
+      variant: variant,
+      'has-margin': hasMargin
+    }, className)
+  }), children);
+};
+
+Caption.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  space: PropTypes.oneOf(['wide', 'tight']),
+  variant: PropTypes.oneOf(['normal', 'medium']),
+  hasMargin: PropTypes.bool,
+  color: PropTypes.oneOf(Object.values(COLORS))
+};
+export default Caption;

package/dist/es/components/Paragraph/Paragraph.css

@@ -1,5 +1,7 @@
 .mfui-paragraph {
   font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
   margin: 0;
   font-weight: 400;
 }
@@ -12,13 +14,11 @@
 .mfui-paragraph_align_right {
   text-align: right;
 }
-.mfui-paragraph_size_regular {
-  font-size: 15px;
+.mfui-paragraph_space_wide {
   line-height: 24px;
 }
-.mfui-paragraph_size_small {
-  font-size: 12px;
-  line-height: 16px;
+.mfui-paragraph_space_tight {
+  line-height: 18px;
 }
 .mfui-paragraph_has-margin {
   margin: 0 0 16px;
@@ -29,6 +29,9 @@
 .mfui-paragraph_color_default {
   color: var(--content);
 }
+.mfui-paragraph_color_gray {
+  color: var(--spbSky3);
+}
 .mfui-paragraph_color_white {
   color: var(--stcWhite);
 }

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

@@ -3,6 +3,7 @@ import './Paragraph.less';
 declare const COLORS: {
     readonly INHERIT: "inherit";
     readonly DEFAULT: "default";
+    readonly GRAY: "gray";
     readonly WHITE: "white";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
@@ -11,9 +12,9 @@ declare type ColorType = typeof COLORS[keyof typeof COLORS];
 export interface IParagraphProps {
     /** Выравнивание по горизонтали */
     align?: 'left' | 'center' | 'right';
-    /** Размер шрифта */
-    size?: 'regular' | 'small';
-    /** Вертикальный отступ (включен по умолчанию) */
+    /** Поведение текста при встраивании в широкий или узкий контейнер */
+    space?: 'wide' | 'tight';
+    /** Вертикальный отступ */
     hasMargin?: boolean;
     /** Цвет текста */
     color?: ColorType;

package/dist/es/components/Paragraph/Paragraph.js

@@ -7,6 +7,7 @@ import "./Paragraph.css";
 var COLORS = {
   INHERIT: 'inherit',
   DEFAULT: 'default',
+  GRAY: 'gray',
   WHITE: 'white',
   GREEN: 'green',
   PURPLE: 'purple'
@@ -14,11 +15,11 @@ var COLORS = {
 var cn = cnCreate('mfui-paragraph');
 
 var Paragraph = function Paragraph(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'regular' : _ref$size,
-      align = _ref.align,
+  var align = _ref.align,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'default' : _ref$color,
+      _ref$space = _ref.space,
+      space = _ref$space === void 0 ? 'wide' : _ref$space,
       className = _ref.className,
       _ref$hasMargin = _ref.hasMargin,
       hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
@@ -26,9 +27,9 @@ var Paragraph = function Paragraph(_ref) {
       children = _ref.children;
   return /*#__PURE__*/React.createElement("p", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
-      size: size,
       align: align,
       color: color,
+      space: space,
       'has-margin': hasMargin
     }, className)
   }), children);
@@ -39,7 +40,7 @@ Paragraph.propTypes = {
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   align: PropTypes.oneOf(['left', 'center', 'right']),
-  size: PropTypes.oneOf(['regular', 'small']),
+  space: PropTypes.oneOf(['wide', 'tight']),
   hasMargin: PropTypes.bool,
   color: PropTypes.oneOf(Object.values(COLORS))
 };

package/dist/es/components/RadioButton/RadioButton.css

@@ -60,7 +60,7 @@
 }
 .mfui-radio-button__text_size_small {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
 }
 .mfui-radio-button__text_size_medium {
   font-size: 15px;

package/dist/es/components/Switcher/Switcher.css

@@ -13,7 +13,7 @@
 }
 .mfui-switcher__content_size_small {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
 }
 .mfui-switcher__content_left {
   margin-right: 12px;
@@ -84,9 +84,6 @@
   border-radius: 15.5px;
   overflow: hidden;
   background-color: var(--spbSky1);
-  outline: none;
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
   cursor: pointer;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;

package/dist/es/components/TextField/TextField.js

@@ -8,8 +8,8 @@ import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
 import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import InputMask from 'react-input-mask';
+import Caption from "../Caption/Caption";
 import InputLabel from "../InputLabel/InputLabel";
-import Paragraph from "../Paragraph/Paragraph";
 import "./TextField.css";
 
 var Hide = function Hide(props) {
@@ -359,8 +359,7 @@ var TextField = function TextField(_ref) {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
     })
-  }), noticeText), symbolCounter && /*#__PURE__*/React.createElement(Paragraph, {
-    size: "small",
+  }), noticeText), symbolCounter && /*#__PURE__*/React.createElement(Caption, {
     hasMargin: false,
     className: cn('counter', {
       error: isMaxLimitExceeded

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

@@ -37,8 +37,6 @@ export interface ITooltipProps {
     targetElement?: React.RefObject<HTMLElement>;
     /** Управление состоянием. Компонент поддерживает контроллируемое и неконтроллируемое состояние. */
     isOpened?: boolean;
-    /** Отрендерить компонент в корневой элементе страницы body */
-    isPortal?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

package/dist/es/components/Tooltip/Tooltip.js

@@ -6,7 +6,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { cnCreate, detectTouch, checkNativeEventIsClickOrEnterPress, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import Tile from "../Tile/Tile";
 import "./Tooltip.css";
@@ -46,8 +45,6 @@ var Tooltip = function Tooltip(_ref) {
       targetElement = _ref.targetElement,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
-      _ref$isPortal = _ref.isPortal,
-      isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
       children = _ref.children,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -61,7 +58,6 @@ var Tooltip = function Tooltip(_ref) {
   var currentTrigger = triggerElement.current;
   var currentTarget = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.current) || currentTrigger;
   var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
-  var portalElem = React.useRef(null);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -219,16 +215,7 @@ var Tooltip = function Tooltip(_ref) {
 
     return undefined;
   }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick, clickEvent]);
-  useEffect(function () {
-    return function () {
-      if (portalElem.current) {
-        document.body.removeChild(portalElem.current);
-      }
-
-      portalElem.current = null;
-    };
-  }, []);
-  var template = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       paddings: paddings,
       open: isOpen
@@ -251,18 +238,6 @@ var Tooltip = function Tooltip(_ref) {
     shadowLevel: "high",
     className: cn('content-shadow', [contentShadowClassName])
   }));
-  /* Не в эффекте, чтобы не создавать лишний перерендер компонента. Из-за синхронности кода в return уже будет элемент */
-
-  if (isPortal && !portalElem.current && typeof window !== 'undefined') {
-    portalElem.current = document.createElement('div');
-    document.body.appendChild(portalElem.current);
-  }
-
-  if (isPortal && portalElem.current) {
-    return portalElem.current ? ReactDOM.createPortal(template, portalElem.current) : null;
-  }
-
-  return template;
 };
 
 Tooltip.propTypes = {
@@ -293,7 +268,6 @@ Tooltip.propTypes = {
     current: PropTypes.elementType
   }), PropTypes.any])]),
   isOpened: PropTypes.bool,
-  isPortal: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

package/dist/es/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';

package/dist/es/index.js

@@ -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";

package/dist/lib/colors/Colors.css

@@ -2,6 +2,8 @@
   margin: 0 -80px;
   padding: 56px 80px 40px;
   background-color: var(--spbSky0);
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
 }
 @media screen and (max-width: 1120px) {
   .colors__inner {
@@ -90,6 +92,8 @@
   font-size: 12px;
   line-height: 18px;
   text-align: center;
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
 }
 @media screen and (max-width: 1023px) {
   .colors__description {

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.css

@@ -1,6 +1,6 @@
 .mfui-price-badge {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.css

@@ -30,6 +30,6 @@
 .mfui-promo-badge__text {
   font-family: inherit;
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   font-weight: 500;
 }

package/dist/lib/components/Badges/components/TimerBadge/TimerBadge.css

@@ -32,7 +32,7 @@
 }
 .mfui-timer-badge__text {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   font-family: inherit;
   margin-left: 2px;
   font-weight: 500;

package/dist/lib/components/Calendar/Calendar.js

@@ -86,17 +86,6 @@ var dayLabelFormat = function dayLabelFormat(date) {
 var monthLabelFormat = function monthLabelFormat(date) {
   return formatDate(date, 'LLLL');
 };
-/* List of cases to check on component change:
-
-- Should correctly choose value and trigger callbacks with correct arguments on dates choose.
-- Should set 1 day period if start and end date is equal
-- Should correctly increase period if choose earlier start date
-- Should correctly change start date of selected period if chosen date in period closer to current start date
-- Should correctly change end date of selected period if chosen date in period closer to current end date
-- Should correctly highlights period if start date chosen and hover on possible end date
-
-*/
-
 
 var cn = (0, _uiHelpers.cnCreate)('mfui-calendar');
 
@@ -135,7 +124,6 @@ var Calendar = function Calendar(_ref) {
       hoveredDate = _useState4[0],
       setHoveredDate = _useState4[1];
 
-  var isUserChoice = (0, _react.useRef)(false);
   var stateStartDate = calendarState.startDate,
       stateEndDate = calendarState.endDate,
       stateFocusedInput = calendarState.focusedInput;
@@ -156,13 +144,10 @@ var Calendar = function Calendar(_ref) {
       goToDate = _a.goToDate,
       pickerProps = __rest(_a, ["firstDayOfWeek", "activeMonths", "goToPreviousMonths", "goToNextMonths", "goToDate"]);
 
-  (0, _react.useEffect)(function () {
-    isUserChoice.current = false;
-  }, [startDate]);
   (0, _react.useEffect)(function () {
     var propsStartDate = calendarStateFromProps.startDate;
     setCalendarState(calendarStateFromProps);
-    !isUserChoice.current && propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
+    propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calendarStateFromProps]);
 
   var getCalendarState = function getCalendarState(date) {
@@ -227,7 +212,6 @@ var Calendar = function Calendar(_ref) {
     var nextStartDate = nextState.startDate,
         nextEndDate = nextState.endDate;
     setCalendarState(nextState);
-    isUserChoice.current = true;
     onChange === null || onChange === void 0 ? void 0 : onChange(nextStartDate, nextEndDate);
   };
 

package/dist/lib/components/Calendar/components/Day/Day.css

@@ -21,7 +21,7 @@
           user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
 }
 .mfui-day:last-child {
   padding-right: 0;

package/dist/lib/components/Calendar/components/Month/Month.css

@@ -56,7 +56,7 @@
 }
 .mfui-month__weekday {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
   width: 20px;
   height: 16px;
   color: var(--content);

package/dist/lib/components/Caption/Caption.css

@@ -0,0 +1,48 @@
+.mfui-caption {
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  margin: 0;
+}
+.mfui-caption_variant_normal {
+  font-weight: 400;
+}
+.mfui-caption_variant_medium {
+  font-weight: 600;
+}
+.mfui-caption_space_wide {
+  line-height: 18px;
+}
+.mfui-caption_space_tight {
+  line-height: 14px;
+}
+.mfui-caption_align_left {
+  text-align: left;
+}
+.mfui-caption_align_center {
+  text-align: center;
+}
+.mfui-caption_align_right {
+  text-align: right;
+}
+.mfui-caption_has-margin {
+  margin: 0 0 16px;
+}
+.mfui-caption_color_inherit {
+  color: inherit;
+}
+.mfui-caption_color_default {
+  color: var(--content);
+}
+.mfui-caption_color_gray {
+  color: var(--spbSky3);
+}
+.mfui-caption_color_white {
+  color: var(--stcWhite);
+}
+.mfui-caption_color_green {
+  color: var(--brandGreen);
+}
+.mfui-caption_color_purple {
+  color: var(--brandPurple);
+}

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import './Caption.less';
+declare const COLORS: {
+    readonly INHERIT: "inherit";
+    readonly DEFAULT: "default";
+    readonly GRAY: "gray";
+    readonly WHITE: "white";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+declare type ColorType = typeof COLORS[keyof typeof COLORS];
+export interface ICaptionProps {
+    /** Выравнивание по горизонтали */
+    align?: 'left' | 'center' | 'right';
+    /** Поведение текста при встраивании в широкий или узкий контейнер */
+    space?: 'wide' | 'tight';
+    /** Начертание шрифта: обычный или полужирный */
+    variant?: 'normal' | 'medium';
+    /** Вертикальный отступ */
+    hasMargin?: boolean;
+    /** Цвет текста */
+    color?: ColorType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Caption: React.FC<ICaptionProps>;
+export default Caption;

package/dist/lib/components/Caption/Caption.js

@@ -0,0 +1,71 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("core-js/modules/es.object.values");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var COLORS = {
+  INHERIT: 'inherit',
+  DEFAULT: 'default',
+  GRAY: 'gray',
+  WHITE: 'white',
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-caption');
+
+var Caption = function Caption(_ref) {
+  var align = _ref.align,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      _ref$space = _ref.space,
+      space = _ref$space === void 0 ? 'wide' : _ref$space,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
+      className = _ref.className,
+      _ref$hasMargin = _ref.hasMargin,
+      hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("p", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      align: align,
+      color: color,
+      space: space,
+      variant: variant,
+      'has-margin': hasMargin
+    }, className)
+  }), children);
+};
+
+Caption.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  space: PropTypes.oneOf(['wide', 'tight']),
+  variant: PropTypes.oneOf(['normal', 'medium']),
+  hasMargin: PropTypes.bool,
+  color: PropTypes.oneOf(Object.values(COLORS))
+};
+var _default = Caption;
+exports["default"] = _default;

package/dist/lib/components/Paragraph/Paragraph.css

@@ -1,5 +1,7 @@
 .mfui-paragraph {
   font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
   margin: 0;
   font-weight: 400;
 }
@@ -12,13 +14,11 @@
 .mfui-paragraph_align_right {
   text-align: right;
 }
-.mfui-paragraph_size_regular {
-  font-size: 15px;
+.mfui-paragraph_space_wide {
   line-height: 24px;
 }
-.mfui-paragraph_size_small {
-  font-size: 12px;
-  line-height: 16px;
+.mfui-paragraph_space_tight {
+  line-height: 18px;
 }
 .mfui-paragraph_has-margin {
   margin: 0 0 16px;
@@ -29,6 +29,9 @@
 .mfui-paragraph_color_default {
   color: var(--content);
 }
+.mfui-paragraph_color_gray {
+  color: var(--spbSky3);
+}
 .mfui-paragraph_color_white {
   color: var(--stcWhite);
 }

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

@@ -3,6 +3,7 @@ import './Paragraph.less';
 declare const COLORS: {
     readonly INHERIT: "inherit";
     readonly DEFAULT: "default";
+    readonly GRAY: "gray";
     readonly WHITE: "white";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
@@ -11,9 +12,9 @@ declare type ColorType = typeof COLORS[keyof typeof COLORS];
 export interface IParagraphProps {
     /** Выравнивание по горизонтали */
     align?: 'left' | 'center' | 'right';
-    /** Размер шрифта */
-    size?: 'regular' | 'small';
-    /** Вертикальный отступ (включен по умолчанию) */
+    /** Поведение текста при встраивании в широкий или узкий контейнер */
+    space?: 'wide' | 'tight';
+    /** Вертикальный отступ */
     hasMargin?: boolean;
     /** Цвет текста */
     color?: ColorType;

package/dist/lib/components/Paragraph/Paragraph.js

@@ -26,6 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var COLORS = {
   INHERIT: 'inherit',
   DEFAULT: 'default',
+  GRAY: 'gray',
   WHITE: 'white',
   GREEN: 'green',
   PURPLE: 'purple'
@@ -33,11 +34,11 @@ var COLORS = {
 var cn = (0, _uiHelpers.cnCreate)('mfui-paragraph');
 
 var Paragraph = function Paragraph(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'regular' : _ref$size,
-      align = _ref.align,
+  var align = _ref.align,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'default' : _ref$color,
+      _ref$space = _ref.space,
+      space = _ref$space === void 0 ? 'wide' : _ref$space,
       className = _ref.className,
       _ref$hasMargin = _ref.hasMargin,
       hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
@@ -45,9 +46,9 @@ var Paragraph = function Paragraph(_ref) {
       children = _ref.children;
   return /*#__PURE__*/React.createElement("p", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
-      size: size,
       align: align,
       color: color,
+      space: space,
       'has-margin': hasMargin
     }, className)
   }), children);
@@ -58,7 +59,7 @@ Paragraph.propTypes = {
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   align: PropTypes.oneOf(['left', 'center', 'right']),
-  size: PropTypes.oneOf(['regular', 'small']),
+  space: PropTypes.oneOf(['wide', 'tight']),
   hasMargin: PropTypes.bool,
   color: PropTypes.oneOf(Object.values(COLORS))
 };

package/dist/lib/components/RadioButton/RadioButton.css

@@ -60,7 +60,7 @@
 }
 .mfui-radio-button__text_size_small {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
 }
 .mfui-radio-button__text_size_medium {
   font-size: 15px;

package/dist/lib/components/Switcher/Switcher.css

@@ -13,7 +13,7 @@
 }
 .mfui-switcher__content_size_small {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
 }
 .mfui-switcher__content_left {
   margin-right: 12px;
@@ -84,9 +84,6 @@
   border-radius: 15.5px;
   overflow: hidden;
   background-color: var(--spbSky1);
-  outline: none;
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
   cursor: pointer;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;

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

@@ -25,9 +25,9 @@ var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
-var _InputLabel = _interopRequireDefault(require("../InputLabel/InputLabel"));
+var _Caption = _interopRequireDefault(require("../Caption/Caption"));
 
-var _Paragraph = _interopRequireDefault(require("../Paragraph/Paragraph"));
+var _InputLabel = _interopRequireDefault(require("../InputLabel/InputLabel"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -380,8 +380,7 @@ var TextField = function TextField(_ref) {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
     })
-  }), noticeText), symbolCounter && /*#__PURE__*/React.createElement(_Paragraph["default"], {
-    size: "small",
+  }), noticeText), symbolCounter && /*#__PURE__*/React.createElement(_Caption["default"], {
     hasMargin: false,
     className: cn('counter', {
       error: isMaxLimitExceeded

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

@@ -37,8 +37,6 @@ export interface ITooltipProps {
     targetElement?: React.RefObject<HTMLElement>;
     /** Управление состоянием. Компонент поддерживает контроллируемое и неконтроллируемое состояние. */
     isOpened?: boolean;
-    /** Отрендерить компонент в корневой элементе страницы body */
-    isPortal?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

package/dist/lib/components/Tooltip/Tooltip.js

@@ -23,8 +23,6 @@ var _uiHelpers = require("@megafon/ui-helpers");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _reactPopper = require("react-popper");
 
 var _Tile = _interopRequireDefault(require("../Tile/Tile"));
@@ -74,8 +72,6 @@ var Tooltip = function Tooltip(_ref) {
       targetElement = _ref.targetElement,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
-      _ref$isPortal = _ref.isPortal,
-      isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
       children = _ref.children,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -90,8 +86,6 @@ var Tooltip = function Tooltip(_ref) {
   var currentTarget = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.current) || currentTrigger;
   var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
 
-  var portalElem = _react["default"].useRef(null);
-
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       popperElement = _useState2[0],
@@ -248,17 +242,7 @@ var Tooltip = function Tooltip(_ref) {
 
     return undefined;
   }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick, clickEvent]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      if (portalElem.current) {
-        document.body.removeChild(portalElem.current);
-      }
-
-      portalElem.current = null;
-    };
-  }, []);
-
-  var template = /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       paddings: paddings,
       open: isOpen
@@ -281,19 +265,6 @@ var Tooltip = function Tooltip(_ref) {
     shadowLevel: "high",
     className: cn('content-shadow', [contentShadowClassName])
   }));
-  /* Не в эффекте, чтобы не создавать лишний перерендер компонента. Из-за синхронности кода в return уже будет элемент */
-
-
-  if (isPortal && !portalElem.current && typeof window !== 'undefined') {
-    portalElem.current = document.createElement('div');
-    document.body.appendChild(portalElem.current);
-  }
-
-  if (isPortal && portalElem.current) {
-    return portalElem.current ? _reactDom["default"].createPortal(template, portalElem.current) : null;
-  }
-
-  return template;
 };
 
 Tooltip.propTypes = {
@@ -324,7 +295,6 @@ Tooltip.propTypes = {
     current: _propTypes["default"].elementType
   }), _propTypes["default"].any])]),
   isOpened: _propTypes["default"].bool,
-  isPortal: _propTypes["default"].bool,
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({
     root: _propTypes["default"].string,

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';

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() {
@@ -290,6 +296,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"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "3.6.0",
+  "version": "4.0.0-beta.0",
   "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.1",
+    "@megafon/ui-icons": "^2.0.0-beta.1",
     "@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": "87e4483070e37f017a90358648860a5f4139bae1"
+  "gitHead": "2c242a4715a634e9ff1bd635e05ddacb1ae33a4a"
 }

package/styles/base.less

@@ -73,7 +73,7 @@
 
 .smallFont() {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
 }
 
 h1,