@megafon/ui-core 6.0.0-beta.3 → 6.0.0

package/dist/lib/colors/Colors.js

@@ -1,29 +1,50 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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;
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.symbol.description.js");
+
 require("core-js/modules/es.array.includes.js");
+
 require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
 require("core-js/modules/es.function.name.js");
+
 var React = _interopRequireWildcard(require("react"));
+
 var _uiHelpers = require("@megafon/ui-helpers");
+
 var _Grid = _interopRequireDefault(require("../components/Grid/Grid"));
+
 var _GridColumn = _interopRequireDefault(require("../components/Grid/GridColumn"));
+
 var _Header = _interopRequireDefault(require("../components/Header/Header"));
+
 var _Paragraph = _interopRequireDefault(require("../components/Paragraph/Paragraph"));
+
 var _Tile = _interopRequireDefault(require("../components/Tile/Tile"));
+
 var _ColorItem = _interopRequireDefault(require("./ColorItem/ColorItem"));
+
 var _colorsData = _interopRequireDefault(require("./colorsData"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 DiagramDark = function DiagramDark(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 260 261",
@@ -119,6 +140,7 @@ var DiagramDark = function DiagramDark(props) {
     fill: "#fff"
   }));
 };
+
 var DiagramLight = function DiagramLight(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 259 259",
@@ -201,44 +223,55 @@ var DiagramLight = function DiagramLight(props) {
     fill: "#fff"
   }));
 };
+
 var basic = _colorsData["default"].basic,
-  secondary = _colorsData["default"].secondary,
-  system = _colorsData["default"].system,
-  gradientColors = _colorsData["default"].gradientColors,
-  staticColors = _colorsData["default"].staticColors,
-  staticOpacity = _colorsData["default"].staticOpacity,
-  soft = _colorsData["default"].soft;
-// TODO: refactor this
+    secondary = _colorsData["default"].secondary,
+    system = _colorsData["default"].system,
+    gradientColors = _colorsData["default"].gradientColors,
+    staticColors = _colorsData["default"].staticColors,
+    staticOpacity = _colorsData["default"].staticOpacity,
+    soft = _colorsData["default"].soft; // TODO: refactor this
+
 var getThemeFromLocalStorage = function getThemeFromLocalStorage() {
   var theme = 'light';
+
   if (typeof window !== 'undefined') {
     var localStorageTheme = String(window.localStorage.getItem('theme'));
+
     if (['light', 'dark'].includes(localStorageTheme)) {
       theme = localStorageTheme;
     }
   }
+
   return theme;
 };
+
 var cn = (0, _uiHelpers.cnCreate)('colors');
+
 var Colors = function Colors() {
   var _React$useState = React.useState(getThemeFromLocalStorage()),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    currentTheme = _React$useState2[0],
-    setCurrentTheme = _React$useState2[1];
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      currentTheme = _React$useState2[0],
+      setCurrentTheme = _React$useState2[1];
+
   var _React$useState3 = React.useState(false),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-    setLoad = _React$useState4[1];
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      setLoad = _React$useState4[1];
+
   React.useEffect(function () {
     function load() {
       setLoad(true);
     }
   }, []);
+
   var getCurrentColorValue = function getCurrentColorValue(code) {
     return typeof document !== 'undefined' ? document.documentElement.style.getPropertyValue("--".concat(code)) : '';
   };
+
   React.useEffect(function () {
     // theme switcher from src/gatsby-theme-docz/components/SideBar/index.tsx
     var themeSwitcher = document.querySelector('[data-current-theme]');
+
     if (themeSwitcher) {
       var themeSwitcherObserver = new MutationObserver(function (mutationsList) {
         var data = mutationsList[0];
@@ -253,8 +286,10 @@ var Colors = function Colors() {
         return themeSwitcherObserver.disconnect();
       };
     }
+
     return undefined;
   }, []);
+
   var renderUnderline = function renderUnderline() {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('underline')
@@ -262,10 +297,11 @@ var Colors = function Colors() {
       className: cn('pointer')
     }));
   };
+
   var renderBasicColors = function renderBasicColors() {
     var title = basic.title,
-      _basic$colorsGroup = basic.colorsGroup,
-      colorsGroup = _basic$colorsGroup === void 0 ? [] : _basic$colorsGroup;
+        _basic$colorsGroup = basic.colorsGroup,
+        colorsGroup = _basic$colorsGroup === void 0 ? [] : _basic$colorsGroup;
     return /*#__PURE__*/React.createElement("div", {
       className: cn('line')
     }, /*#__PURE__*/React.createElement(_Header["default"], {
@@ -273,7 +309,7 @@ var Colors = function Colors() {
       className: cn('group-title')
     }, title), /*#__PURE__*/React.createElement(_Grid["default"], null, colorsGroup.map(function (_ref, index) {
       var description = _ref.description,
-        colors = _ref.colors;
+          colors = _ref.colors;
       return /*#__PURE__*/React.createElement(_GridColumn["default"], {
         key: description,
         className: cn('basic-group'),
@@ -283,9 +319,9 @@ var Colors = function Colors() {
         className: cn('list')
       }, colors.map(function (_ref2) {
         var name = _ref2.name,
-          code = _ref2.code,
-          _ref2$border = _ref2.border,
-          border = _ref2$border === void 0 ? '' : _ref2$border;
+            code = _ref2.code,
+            _ref2$border = _ref2.border,
+            border = _ref2$border === void 0 ? '' : _ref2$border;
         return /*#__PURE__*/React.createElement(_ColorItem["default"], {
           className: cn('item'),
           colorName: name,
@@ -298,8 +334,10 @@ var Colors = function Colors() {
       }, description));
     })));
   };
+
   var renderColorBlock = function renderColorBlock(items) {
     var _a, _b;
+
     return /*#__PURE__*/React.createElement("div", {
       className: cn('line')
     }, /*#__PURE__*/React.createElement(_Header["default"], {
@@ -309,11 +347,11 @@ var Colors = function Colors() {
       className: cn('list')
     }, (_a = items.colorsList) === null || _a === void 0 ? void 0 : _a.colors.map(function (_ref3) {
       var name = _ref3.name,
-        code = _ref3.code,
-        _ref3$gradient = _ref3.gradient,
-        gradient = _ref3$gradient === void 0 ? '' : _ref3$gradient,
-        _ref3$border = _ref3.border,
-        border = _ref3$border === void 0 ? '' : _ref3$border;
+          code = _ref3.code,
+          _ref3$gradient = _ref3.gradient,
+          gradient = _ref3$gradient === void 0 ? '' : _ref3$gradient,
+          _ref3$border = _ref3.border,
+          border = _ref3$border === void 0 ? '' : _ref3$border;
       return /*#__PURE__*/React.createElement(_ColorItem["default"], {
         className: cn('item'),
         colorName: name,
@@ -326,12 +364,13 @@ var Colors = function Colors() {
       className: cn('description')
     }, (_b = items.colorsList) === null || _b === void 0 ? void 0 : _b.description));
   };
+
   var renderSoftColors = function renderSoftColors() {
-    var _soft$colorsList = soft.colorsList,
-      _soft$colorsList2 = _soft$colorsList === void 0 ? {} : _soft$colorsList,
-      _soft$colorsList2$col = _soft$colorsList2.colors,
-      colors = _soft$colorsList2$col === void 0 ? [] : _soft$colorsList2$col,
-      description = _soft$colorsList2.description;
+    var _soft$colorsList = soft.colorsList;
+    _soft$colorsList = _soft$colorsList === void 0 ? {} : _soft$colorsList;
+    var _soft$colorsList$colo = _soft$colorsList.colors,
+        colors = _soft$colorsList$colo === void 0 ? [] : _soft$colorsList$colo,
+        description = _soft$colorsList.description;
     return /*#__PURE__*/React.createElement("div", {
       className: cn('soft-list')
     }, /*#__PURE__*/React.createElement("div", {
@@ -340,9 +379,9 @@ var Colors = function Colors() {
       })
     }, colors.map(function (_ref4) {
       var name = _ref4.name,
-        code = _ref4.code,
-        _ref4$parentColor = _ref4.parentColor,
-        parentColor = _ref4$parentColor === void 0 ? '' : _ref4$parentColor;
+          code = _ref4.code,
+          _ref4$parentColor = _ref4.parentColor,
+          parentColor = _ref4$parentColor === void 0 ? '' : _ref4$parentColor;
       return /*#__PURE__*/React.createElement(_ColorItem["default"], {
         className: cn('item', {
           soft: true
@@ -356,6 +395,7 @@ var Colors = function Colors() {
       className: cn('description')
     }, description));
   };
+
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
   }, /*#__PURE__*/React.createElement(_Header["default"], {
@@ -400,4 +440,6 @@ var Colors = function Colors() {
     className: cn('diagram')
   }, currentTheme === 'light' && /*#__PURE__*/React.createElement(DiagramLight, null), currentTheme === 'dark' && /*#__PURE__*/React.createElement(DiagramDark, null)), renderSoftColors()))));
 };
-var _default = exports["default"] = Colors;
+
+var _default = Colors;
+exports["default"] = _default;

package/dist/lib/colors/colorsData.d.ts

@@ -1,20 +1,20 @@
-type ColorType = {
+declare type ColorType = {
     name: string;
     code: string;
     border?: string;
     parentColor?: string;
     gradient?: string;
 };
-type ColorsListType = {
+declare type ColorsListType = {
     description: string;
     colors: ColorType[];
 };
-export type ColorsItemType = {
+export declare type ColorsItemType = {
     title: string;
     colorsList?: ColorsListType;
     colorsGroup?: ColorsListType[];
 };
-export type ColorsType = {
+export declare type ColorsType = {
     [key: string]: ColorsItemType;
 };
 declare const colors: ColorsType;

package/dist/lib/colors/colorsData.js

@@ -240,4 +240,5 @@ var colors = {
     }
   }
 };
-var _default = exports["default"] = colors;
+var _default = colors;
+exports["default"] = _default;

package/dist/lib/components/Accordion/Accordion.css

@@ -1 +1,89 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-accordion{background:var(--spbSky0);border-radius:12px}.mfui-accordion+.mfui-accordion{margin-top:8px}@media screen and (min-width:768px){.mfui-accordion+.mfui-accordion{margin-top:12px}}.mfui-accordion__title-wrap{border-radius:12px;cursor:pointer;outline:none;padding:16px 44px 16px 16px;position:relative;-webkit-transition:background-color .3s;transition:background-color .3s}@media screen and (min-width:768px){.mfui-accordion__title-wrap{padding:24px 56px 24px 24px}}.mfui-accordion__title-wrap:hover{background-color:var(--spbSky1)}@media screen and (max-width:1023px){.mfui-accordion__title-wrap:focus{background-color:inherit}}.mfui-accordion__icon-box{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:20px;top:50%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--stcWhite);border-radius:50%;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);height:24px;justify-content:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:24px}@media screen and (min-width:768px){.mfui-accordion__icon-box{height:32px;right:24px;width:32px}}.mfui-accordion__icon{height:20px;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;width:20px}@media screen and (min-width:768px){.mfui-accordion__icon{height:32px;width:32px}}.mfui-accordion__content-inner{padding:4px 20px 20px 16px}@media screen and (min-width:768px){.mfui-accordion__content-inner{padding:4px 24px 20px}}.mfui-accordion_opened .mfui-accordion__icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
+.mfui-accordion {
+  border-radius: 12px;
+  background: var(--spbSky0);
+}
+.mfui-accordion + .mfui-accordion {
+  margin-top: 8px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion + .mfui-accordion {
+    margin-top: 12px;
+  }
+}
+.mfui-accordion__title-wrap {
+  position: relative;
+  padding: 16px 44px 16px 16px;
+  border-radius: 12px;
+  outline: none;
+  cursor: pointer;
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion__title-wrap {
+    padding: 24px 56px 24px 24px;
+  }
+}
+.mfui-accordion__title-wrap:hover {
+  background-color: var(--spbSky1);
+}
+@media screen and (max-width: 1023px) {
+  .mfui-accordion__title-wrap:focus {
+    background-color: inherit;
+  }
+}
+.mfui-accordion__icon-box {
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion__icon-box {
+    right: 24px;
+    width: 32px;
+    height: 32px;
+  }
+}
+.mfui-accordion__icon {
+  width: 20px;
+  height: 20px;
+  -webkit-transition: -webkit-transform 0.6s;
+  transition: -webkit-transform 0.6s;
+  transition: transform 0.6s;
+  transition: transform 0.6s, -webkit-transform 0.6s;
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion__icon {
+    width: 32px;
+    height: 32px;
+  }
+}
+.mfui-accordion__content-inner {
+  padding: 4px 20px 20px 16px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion__content-inner {
+    padding: 4px 24px 20px;
+  }
+}
+.mfui-accordion_opened .mfui-accordion__icon {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IHeaderProps } from '../Header/Header';
-import './Accordion.scss';
+import './Accordion.less';
 export interface IAccordionProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
@@ -36,7 +36,6 @@ export interface IAccordionProps {
         arrowUp?: Record<string, string>;
         arrowDown?: Record<string, string>;
     };
-    children?: React.ReactNode;
     /** Обработчик клика */
     onClickAccordion?: (isOpened: boolean) => void;
 }

package/dist/lib/components/Accordion/Accordion.js

@@ -1,19 +1,32 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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;
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
+
 var _uiHelpers = require("@megafon/ui-helpers");
-var _Collapse = _interopRequireDefault(require("../_Collapse/Collapse"));
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _Collapse = _interopRequireDefault(require("../Collapse/Collapse"));
+
 var _Header = _interopRequireDefault(require("../Header/Header"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
@@ -23,42 +36,49 @@ var ArrowDown = function ArrowDown(props) {
     clipRule: "evenodd"
   }));
 };
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-accordion');
+
 var Accordion = function Accordion(_ref) {
   var rootRef = _ref.rootRef,
-    title = _ref.title,
-    _ref$titleTag = _ref.titleTag,
-    titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
-    _ref$isOpened = _ref.isOpened,
-    isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
-    _ref$hasMicrodata = _ref.hasMicrodata,
-    hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
-    openedClass = _ref$classes2.openedClass,
-    rootPropsClasses = _ref$classes2.root,
-    collapsePropsClasses = _ref$classes2.collapse,
-    titleWrapPropsClasses = _ref$classes2.titleWrap,
-    titlePropsClasses = _ref$classes2.title,
-    dataAttrs = _ref.dataAttrs,
-    onClickAccordion = _ref.onClickAccordion,
-    children = _ref.children;
+      title = _ref.title,
+      _ref$titleTag = _ref.titleTag,
+      titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
+      _ref$isOpened = _ref.isOpened,
+      isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
+      _ref$hasMicrodata = _ref.hasMicrodata,
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+      className = _ref.className,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var openedClass = _ref$classes.openedClass,
+      rootPropsClasses = _ref$classes.root,
+      collapsePropsClasses = _ref$classes.collapse,
+      titleWrapPropsClasses = _ref$classes.titleWrap,
+      titlePropsClasses = _ref$classes.title,
+      dataAttrs = _ref.dataAttrs,
+      onClickAccordion = _ref.onClickAccordion,
+      children = _ref.children;
+
   var _React$useState = React.useState(isOpened),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isOpenedState = _React$useState2[0],
-    setIsOpenedState = _React$useState2[1];
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isOpenedState = _React$useState2[0],
+      setIsOpenedState = _React$useState2[1];
+
   React.useEffect(function () {
     setIsOpenedState(isOpened);
   }, [isOpened]);
+
   var handleClickTitle = function handleClickTitle(e) {
     if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
       onClickAccordion === null || onClickAccordion === void 0 ? void 0 : onClickAccordion(!isOpenedState);
       setIsOpenedState(!isOpenedState);
     }
   };
+
   var openedClassName = isOpenedState ? openedClass : undefined;
   var arrowDataAttrs = isOpenedState ? dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp : dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown;
+
   var renderContent = function renderContent() {
     if (hasMicrodata) {
       return /*#__PURE__*/React.createElement("div", {
@@ -69,8 +89,10 @@ var Accordion = function Accordion(_ref) {
         itemProp: "text"
       }, children));
     }
+
     return children;
   };
+
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
@@ -103,4 +125,37 @@ var Accordion = function Accordion(_ref) {
     isOpened: isOpenedState
   }, renderContent()));
 };
-var _default = exports["default"] = Accordion;
+
+Accordion.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
+  isOpened: PropTypes.bool,
+  hasMicrodata: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    openedClass: PropTypes.string,
+    root: PropTypes.string,
+    collapse: PropTypes.string,
+    titleWrap: PropTypes.string,
+    title: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    header: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    collapse: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired),
+      inner: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  onClickAccordion: PropTypes.func
+};
+var _default = Accordion;
+exports["default"] = _default;

package/dist/lib/components/Avatar/Avatar.css

@@ -1 +1,52 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:15px;font-weight:500;height:40px;justify-content:center;overflow:hidden;width:40px}.mfui-avatar__text{display:block}.mfui-avatar__image{background-color:var(--base);height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-avatar__placeholder{opacity:.3}.mfui-avatar_color_green{background-color:var(--brandGreen20);color:var(--brandGreen)}.mfui-avatar_color_green .mfui-avatar__placeholder{fill:var(--brandGreen)}.mfui-avatar_color_gray{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-avatar_color_gray .mfui-avatar__placeholder{fill:var(--spbSky3)}.mfui-avatar_size_auto{font-size:inherit;height:100%;width:100%}
+.mfui-avatar {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  font-weight: 500;
+  font-size: 15px;
+}
+.mfui-avatar__text {
+  display: block;
+}
+.mfui-avatar__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  background-color: var(--base);
+}
+.mfui-avatar__placeholder {
+  opacity: 0.3;
+}
+.mfui-avatar_color_green {
+  color: var(--brandGreen);
+  background-color: var(--brandGreen20);
+}
+.mfui-avatar_color_green .mfui-avatar__placeholder {
+  fill: var(--brandGreen);
+}
+.mfui-avatar_color_gray {
+  color: var(--spbSky3);
+  background-color: var(--spbSky0);
+}
+.mfui-avatar_color_gray .mfui-avatar__placeholder {
+  fill: var(--spbSky3);
+}
+.mfui-avatar_size_auto {
+  width: 100%;
+  height: 100%;
+  font-size: inherit;
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './Avatar.scss';
+import './Avatar.less';
 export interface IAvatarProps {
     /** Ссылка на изображение. Имеет приоритет над текстом */
     src?: string;