@megafon/ui-core 3.10.0 → 4.0.0-beta.2

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/Calendar/components/Month/Month.js

@@ -10,9 +10,9 @@ var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M12 6v8l-5-4z",
     fillRule: "evenodd",
-    clipRule: "evenodd"
+    clipRule: "evenodd",
+    d: "M12 6v8l-5-4z"
   }));
 };
 
@@ -20,9 +20,9 @@ var ArrowRight = function ArrowRight(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M8 14V6l5 4z",
     fillRule: "evenodd",
-    clipRule: "evenodd"
+    clipRule: "evenodd",
+    d: "M8 14V6l5 4z"
   }));
 };
 

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/Logo/Logo.js

@@ -8,30 +8,14 @@ import "./Logo.css";
 
 var greenHorizontalImg = function greenHorizontalImg(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 623 112",
-    fill: "none"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M608.292 31.117V51.95h-27.978V31.117h-13.769v55.067h13.769V63.951h27.978v22.233h13.842V31.117h-13.842z",
-    fill: "#00B956"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M367.31 29.865c4.417 0 9.056 2.43 11.338 7.436l22.53 48.883h-14.652l-4.933-11.632h-28.567l-4.933 11.632h-14.652l22.53-48.883c2.282-5.007 6.921-7.436 11.339-7.436zm-1.105 13.693l-8.467 19.951h19.143l-8.467-19.95c-.221-.663-.736-.81-1.104-.81-.369 0-.81.22-1.105.81z",
-    fill: "#00B956"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M214.533 21.178c-6.48 0-10.603 3.46-13.622 10.38l-17.965 41.374-17.965-41.374c-3.018-6.92-7.142-10.38-13.621-10.38-6.037 0-12.296 4.343-12.296 13.693v51.313h13.769v-49.84l18.112 41.08c2.43 5.742 6.332 9.349 12.001 9.349 5.67 0 9.572-3.607 12.002-9.35l18.112-41.08v49.841h13.768v-51.24c0-9.423-6.258-13.766-12.295-13.766zm36.445 53.227a1.163 1.163 0 01-1.178-1.178v-9.644h34.384V52.319H249.8v-8.393c0-.662.515-1.178 1.178-1.178h34.016V31.117h-40.79c-4.785 0-8.172 3.975-8.172 8.171v38.577c0 4.196 3.46 8.172 8.172 8.172h40.79V74.405h-34.016zm57.429 11.779V44c0-.663.516-1.178 1.179-1.178h34.015V31.19h-40.789c-4.786 0-8.173 3.976-8.173 8.172v46.822h13.768z",
-    fill: "#00B956"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M528.259 30.307c20.837 0 29.157 8.981 29.157 28.27 0 18.994-8.468 28.122-29.304 28.122h-4.565c-20.837 0-29.304-9.128-29.304-28.122 0-19.289 8.246-28.27 29.157-28.27h4.859zm-4.638 44.981h4.417c11.412 0 15.977-5.153 15.977-16.711v-.074c0-11.19-4.27-16.712-15.977-16.712h-4.417c-12.075 0-15.978 5.522-15.978 16.712v.074c0 11.558 4.492 16.711 15.978 16.711zm-95.127-52.785h27.316c20.321 0 28.493 10.307 28.567 28.27 0 2.797-.221 5.374-.589 7.804-2.135 12.736-9.645 20.54-28.715 20.54h-5.963v7.067h-13.769v-7.067h-6.037c-19.07 0-26.58-7.804-28.715-20.54-.442-2.43-.589-5.006-.589-7.804 0-17.963 8.099-28.27 28.494-28.27zm6.774 44.982h-6.332c-9.351 0-12.664-3.46-14.726-8.908-.81-2.135-.81-4.786-.81-7.804 0-11.706 5.449-16.712 13.4-16.712h8.468v33.424zm34.825-8.908c-2.061 5.448-5.448 8.908-14.725 8.908h-6.332V34.06h8.467c7.952 0 13.4 4.933 13.4 16.712 0 3.018 0 5.669-.81 7.804zM62.86 58.135V1.227c27.242 3.313 48.373 26.577 48.447 54.7 0 30.478-24.74 55.214-55.22 55.214a58.32 58.32 0 01-5.081-.221V63.215a.58.58 0 01.589-.59h6.774c2.43 0 4.49-1.987 4.49-4.49zM61.682 86.11a6.913 6.913 0 01-6.921-6.92 6.913 6.913 0 016.92-6.92 6.913 6.913 0 016.922 6.92 6.913 6.913 0 01-6.921 6.92zm9.277-6.92a6.913 6.913 0 006.92 6.92 6.913 6.913 0 006.922-6.92 6.913 6.913 0 00-6.921-6.92 6.913 6.913 0 00-6.921 6.92zm16.198 0a6.913 6.913 0 006.92 6.92A6.913 6.913 0 00101 79.19a6.913 6.913 0 00-6.921-6.92 6.913 6.913 0 00-6.921 6.92z",
+    viewBox: "0 0 304 55"
+  }, props), /*#__PURE__*/React.createElement("g", {
     fill: "#00B956"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M30.3.7v27.8c0 1.3-1 2.2-2.2 2.2h-3.3c-.2 0-.3.2-.3.3v23.3c.8 0 1.6.2 2.5.2 14.9 0 27-12.1 27-27C54 13.8 43.7 2.3 30.3.7zm-.6 41.6c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3.2 1.8-1.4 3.3-3.3 3.3zm7.9 0c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.3 3.3-3.3 3.3zm8 0c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.4 3.3-3.3 3.3z"
   }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M.792 56C.792 25.521 25.531.785 56.012.785h.148v54.626a.58.58 0 01-.59.589h-6.92c-2.356.074-4.27 2.061-4.344 4.417v49.546C19.42 104.589.792 82.503.792 56zm37.697-16.638a6.913 6.913 0 006.921 6.92 6.913 6.913 0 006.921-6.92 6.913 6.913 0 00-6.92-6.92 6.913 6.913 0 00-6.922 6.92z",
-    fill: "#00B956"
-  }));
+    d: "M27 .6C12.1.6 0 12.7 0 27.6c0 13.1 9.1 23.8 21.3 26.3V29.6c0-1.1 1-2 2-2.2h3.3c.2 0 .3-.2.3-.3L27 .6zm-5.2 22.2c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.5 3.3-3.3 3.3zm275.5-7.5v10.2h-13.6V15.3h-6.9v27h6.9V31.4h13.6v10.9h6.7v-27zm-112.4 3.1c-1.1-2.4-3.3-3.7-5.5-3.7s-4.5 1.3-5.5 3.7l-10.9 24h7.2l2.4-5.7h14l2.4 5.7h7.2l-11.3-24zm-10.4 12.9l4.1-9.9c.2-.3.3-.3.5-.3s.5 0 .5.3l4.1 9.9h-9.2zm-70-20.8c-3.2 0-5.2 1.7-6.7 5.1l-8.7 20.3-8.8-20.4c-1.4-3.3-3.5-5.1-6.7-5.1-3 0-6 2-6 6.7v25.1h6.7V18l8.9 20.1c1.1 2.9 3.2 4.6 5.9 4.6 2.9 0 4.8-1.7 5.9-4.6l8.9-20.1v24.5h6.7V17.4c-.1-4.7-3.1-6.9-6.1-6.9zm17.9 26.1c-.3 0-.7-.3-.7-.7v-4.8h16.8v-5.5h-16.8v-4.1c0-.3.3-.7.7-.7h16.7v-5.7h-20c-2.4 0-4 1.9-4 4V38c0 2 1.7 4 4 4h20v-5.7h-16.7v.3zm28 5.7V21.7c0-.3.3-.7.7-.7h16.7v-5.7h-20c-2.4 0-4 1.9-4 4v22.9l6.6.1zm122-13.4c0-9.4-4.1-13.8-14.3-13.8h-2.4c-10.2 0-14.3 4.5-14.3 13.8 0 9.2 4.1 13.8 14.3 13.8h2.2c10.4-.2 14.5-4.6 14.5-13.8zM257.9 37h-2.2c-5.5 0-7.8-2.5-7.8-8.1 0-5.4 1.9-8.1 7.8-8.1h2.2c5.7 0 7.8 2.7 7.8 8.1 0 5.5-2.1 8.1-7.8 8.1zm-35.2-25.9h-13.4c-10 0-14 5.1-14 13.8 0 1.4.2 2.7.3 3.8 1.1 6.2 4.8 10 14.1 10h3v3.5h6.7v-3.5h2.9c9.4 0 13.1-3.8 14.1-10 .2-1.1.3-2.4.3-3.8-.1-8.7-4.2-13.8-14-13.8zm-10.2 22h-3c-4.6 0-6.2-1.7-7.2-4.5-.3-1-.3-2.4-.3-3.8 0-5.7 2.7-8.1 6.5-8.1h4.1v16.4h-.1zm17.2-4.2c-1 2.7-2.7 4.5-7.2 4.5h-3V16.9h4.1c3.8 0 6.5 2.4 6.5 8.1-.1 1.5-.1 2.7-.4 3.9z"
+  })));
 };
 
 var greenVerticalImg = function greenVerticalImg(props) {

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

@@ -17,12 +17,6 @@ declare type ShadowType = typeof ShadowTypes[keyof typeof ShadowTypes];
 export interface INotificationProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
-    /** Дополнительные классы для корневого и внутренних элементов */
-    classes?: {
-        root?: string;
-        container?: string;
-        content?: string;
-    };
     /** Тип отображения */
     type?: NotificationType;
     /** Уровень тени */

package/dist/es/components/Notification/Notification.js

@@ -77,11 +77,6 @@ var cn = cnCreate('mfui-notification');
 
 var Notification = function Notification(_ref) {
   var className = _ref.className,
-      _ref$classes = _ref.classes;
-  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
-  var rootClass = _ref$classes.root,
-      containerClass = _ref$classes.container,
-      contentClass = _ref$classes.content,
       children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'info' : _ref$type,
@@ -148,13 +143,13 @@ var Notification = function Notification(_ref) {
     className: cn({
       type: type,
       colored: isColored
-    }, [className, rootClass])
+    }, className)
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn('container', [containerClass])
+    className: cn('container')
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('icon-container')
   }, renderIcon()), /*#__PURE__*/React.createElement("div", {
-    className: cn('content', [contentClass])
+    className: cn('content')
   }, title && /*#__PURE__*/React.createElement(Header, {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
@@ -179,11 +174,6 @@ var Notification = function Notification(_ref) {
 Notification.propTypes = {
   type: PropTypes.oneOf(Object.values(NotificationTypes)),
   className: PropTypes.string,
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-    container: PropTypes.string,
-    content: PropTypes.string
-  }),
   shadowLevel: PropTypes.oneOf(Object.values(ShadowTypes)),
   isColored: PropTypes.bool,
   hasCloseButton: PropTypes.bool,

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/Select/Select.js

@@ -337,7 +337,7 @@ var Select = function Select(_ref) {
 
     return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
       className: cn('title', {
-        placeholder: !!placeholder && currentValue === undefined
+        placeholder: !!placeholder && !currentValue
       }, [classes === null || classes === void 0 ? void 0 : classes.title]),
       role: "button",
       tabIndex: 0,

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/Switcher/Switcher.d.ts

@@ -5,7 +5,6 @@ export interface ISwitcherProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
-        input?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/es/components/Switcher/Switcher.js

@@ -40,7 +40,7 @@ var Switcher = function Switcher(_ref) {
       size: textSize,
       left: true
     })
-  }, children), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+  }, children), /*#__PURE__*/React.createElement("div", {
     className: cn('input', {
       checked: checked,
       disabled: disabled,
@@ -50,7 +50,7 @@ var Switcher = function Switcher(_ref) {
     onClick: handleChange,
     onKeyDown: handleChange,
     tabIndex: isInteractiveDisabled ? undefined : 0
-  }), showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
+  }, showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
     className: cn('loader')
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('pointer')
@@ -63,8 +63,7 @@ var Switcher = function Switcher(_ref) {
 
 Switcher.propTypes = {
   dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    input: PropTypes.objectOf(PropTypes.string.isRequired)
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
   textSize: PropTypes.oneOf(['small', 'medium']),