@megafon/ui-shared 6.0.0-beta.4 → 6.0.0

package/dist/lib/components/NotificationBox/style/NotificationBox.css

@@ -0,0 +1,28 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-notification-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-notification-box:not(:first-child) {
+  margin-top: 24px;
+}
+.mfui-notification-box__notification {
+  max-width: 740px;
+}
+.mfui-notification-box_align_left {
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+}
+.mfui-notification-box_align_center {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}

package/dist/lib/components/PageTitle/PageTitle.css

@@ -1 +1,80 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-page-title{display:inline-block;width:100%}.mfui-page-title__breadcrumbs{margin-top:32px}@media screen and (max-width:767px){.mfui-page-title__breadcrumbs{display:none}}.mfui-page-title__title{margin-top:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title{margin-top:100px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title{margin-top:90px}}@media screen and (max-width:767px){.mfui-page-title__title{margin-top:45px}}.mfui-page-title__badge{background-color:var(--brandPurple);color:var(--stcWhite);display:inline-block;font-size:12px;font-weight:500;line-height:18px;margin-top:16px;padding:2px 14px}@media screen and (min-width:1280px){.mfui-page-title__badge_under-breadcrumbs{margin-top:32px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__badge_under-breadcrumbs{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__badge_under-breadcrumbs{margin-top:16px}}@media screen and (min-width:1280px){.mfui-page-title__title_under-breadcrumbs{margin-top:60px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title_under-breadcrumbs{margin-top:50px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_under-breadcrumbs{margin-top:45px}}.mfui-page-title__badge+.mfui-page-title__title{margin-top:8px}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-page-title {
+  display: inline-block;
+  width: 100%;
+}
+.mfui-page-title__breadcrumbs {
+  margin-top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-page-title__breadcrumbs {
+    display: none;
+  }
+}
+.mfui-page-title__title {
+  margin-top: 110px;
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-page-title__title {
+    margin-top: 100px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-page-title__title {
+    margin-top: 90px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-page-title__title {
+    margin-top: 45px;
+  }
+}
+.mfui-page-title__badge {
+  font-size: 12px;
+  line-height: 18px;
+  display: inline-block;
+  margin-top: 16px;
+  padding: 2px 14px;
+  color: var(--stcWhite);
+  font-weight: 500;
+  background-color: var(--brandPurple);
+}
+@media screen and (min-width: 1280px) {
+  .mfui-page-title__badge_under-breadcrumbs {
+    margin-top: 32px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-page-title__badge_under-breadcrumbs {
+    margin-top: 24px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-page-title__badge_under-breadcrumbs {
+    margin-top: 16px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-page-title__title_under-breadcrumbs {
+    margin-top: 60px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-page-title__title_under-breadcrumbs {
+    margin-top: 50px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-page-title__title_under-breadcrumbs {
+    margin-top: 45px;
+  }
+}
+.mfui-page-title__badge + .mfui-page-title__title {
+  margin-top: 8px;
+}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import './PageTitle.less';
 import { Props as BreadcrumbsType } from '../Breadcrumbs/Breadcrumbs';
-import './PageTitle.scss';
-export type PageTitleProps = {
+export declare type PageTitleProps = {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/lib/components/PageTitle/PageTitle.js

@@ -1,33 +1,46 @@
 "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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
+
 var _uiCore = require("@megafon/ui-core");
+
 var _uiHelpers = require("@megafon/ui-helpers");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Breadcrumbs = _interopRequireDefault(require("../Breadcrumbs/Breadcrumbs"));
-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 testIdPrefix = 'PageTitle';
 var cn = (0, _uiHelpers.cnCreate)('mfui-page-title');
+
 var PageTitle = function PageTitle(_ref) {
   var dataAttrs = _ref.dataAttrs,
-    title = _ref.title,
-    breadcrumbs = _ref.breadcrumbs,
-    badge = _ref.badge,
-    _ref$isFullWidth = _ref.isFullWidth,
-    isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
-    _ref$hasBreadcrumbsMi = _ref.hasBreadcrumbsMicrodata,
-    hasBreadcrumbsMicrodata = _ref$hasBreadcrumbsMi === void 0 ? false : _ref$hasBreadcrumbsMi,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    rootRef = _ref.rootRef;
+      title = _ref.title,
+      breadcrumbs = _ref.breadcrumbs,
+      badge = _ref.badge,
+      _ref$isFullWidth = _ref.isFullWidth,
+      isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
+      _ref$hasBreadcrumbsMi = _ref.hasBreadcrumbsMicrodata,
+      hasBreadcrumbsMicrodata = _ref$hasBreadcrumbsMi === void 0 ? false : _ref$hasBreadcrumbsMi,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef;
   var isBreadcrumbs = !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length);
   var renderPageTitle = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, badge && /*#__PURE__*/React.createElement("div", {
@@ -68,4 +81,28 @@ var PageTitle = function PageTitle(_ref) {
     className: cn('breadcrumbs', [classes.breadcrumbs])
   }), isFullWidth ? renderPageTitle() : renderPageTitleWithGrid());
 };
-var _default = exports["default"] = PageTitle;
+
+PageTitle.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    breadcrumbs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    breadcrumbsLink: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
+  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
+  breadcrumbs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string.isRequired,
+    href: _propTypes["default"].string
+  }).isRequired),
+  badge: _propTypes["default"].string,
+  isFullWidth: _propTypes["default"].bool,
+  hasBreadcrumbsMicrodata: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    breadcrumbs: _propTypes["default"].string
+  }),
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])])
+};
+var _default = PageTitle;
+exports["default"] = _default;

package/dist/lib/components/Partners/Partners.css

@@ -1 +1,53 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-partners__tile:not(:last-child){margin-bottom:20px}@media screen and (max-width:767px){.mfui-partners__tile:not(:last-child){margin-bottom:16px}}.mfui-partners__tile-inner{-webkit-box-sizing:border-box;box-sizing:border-box;height:132px;padding:28px 48px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-partners__tile-inner{height:104px;padding:22px 37px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-partners__tile-inner{height:77px;padding:10px}}@media screen and (max-width:767px){.mfui-partners__tile-inner{height:60px;padding:8px}}.mfui-partners__img-wrapper{height:100%;position:relative;width:100%}.mfui-partners__tile-img{left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-partners__tile:not(:last-child) {
+  margin-bottom: 20px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-partners__tile:not(:last-child) {
+    margin-bottom: 16px;
+  }
+}
+.mfui-partners__tile-inner {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 132px;
+  padding: 28px 48px;
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-partners__tile-inner {
+    height: 104px;
+    padding: 22px 37px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-partners__tile-inner {
+    height: 77px;
+    padding: 10px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-partners__tile-inner {
+    height: 60px;
+    padding: 8px;
+  }
+}
+.mfui-partners__img-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.mfui-partners__tile-img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import './Partners.scss';
-export type ItemType = {
+import './Partners.less';
+export declare type ItemType = {
     src: string;
     href?: string;
     alt: string;

package/dist/lib/components/Partners/Partners.js

@@ -1,54 +1,73 @@
 "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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 require("core-js/modules/es.array.map.js");
+
 require("core-js/modules/es.array.slice.js");
+
 var React = _interopRequireWildcard(require("react"));
+
 var _uiCore = require("@megafon/ui-core");
+
 var _uiHelpers = require("@megafon/ui-helpers");
-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; }
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+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 _slidesSettings;
+
 var MAX_GRID_ITEMS_LENGTH = 8;
-var slidesSettings = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
+var slidesSettings = (_slidesSettings = {}, (0, _defineProperty2["default"])(_slidesSettings, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
   slidesPerView: 2,
   spaceBetween: 16
-}), _uiHelpers.breakpoints.MOBILE_MIDDLE_START, {
+}), (0, _defineProperty2["default"])(_slidesSettings, _uiHelpers.breakpoints.MOBILE_MIDDLE_START, {
   slidesPerView: 3,
   spaceBetween: 20
-}), _uiHelpers.breakpoints.DESKTOP_SMALL_START, {
+}), (0, _defineProperty2["default"])(_slidesSettings, _uiHelpers.breakpoints.DESKTOP_SMALL_START, {
   slidesPerView: 4,
   spaceBetween: 20
-});
+}), _slidesSettings);
 var testIdPrefix = 'Partners';
 var cn = (0, _uiHelpers.cnCreate)('mfui-partners');
+
 var Partners = function Partners(_ref) {
   var rootRef = _ref.rootRef,
-    _ref$classes = _ref.classes,
-    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
-    root = _ref$classes2.root,
-    itemClass = _ref$classes2.itemClass,
-    dataAttrs = _ref.dataAttrs,
-    className = _ref.className,
-    items = _ref.items,
-    onChange = _ref.onChange,
-    onNextClick = _ref.onNextClick,
-    onPrevClick = _ref.onPrevClick;
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var root = _ref$classes.root,
+      itemClass = _ref$classes.itemClass,
+      dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      items = _ref.items,
+      onChange = _ref.onChange,
+      onNextClick = _ref.onNextClick,
+      onPrevClick = _ref.onPrevClick;
   var renderItem = React.useCallback(function (item) {
     var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
     if (!item) {
       return null;
     }
+
     var src = item.src,
-      href = item.href,
-      alt = item.alt,
-      rel = item.rel;
+        href = item.href,
+        alt = item.alt,
+        rel = item.rel;
     return /*#__PURE__*/React.createElement(_uiCore.Tile, {
       href: href,
       rel: rel,
@@ -110,4 +129,29 @@ var Partners = function Partners(_ref) {
     className: cn([root, className])
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), items.length > MAX_GRID_ITEMS_LENGTH ? renderCarousel() : renderGrid());
 };
-var _default = exports["default"] = Partners;
+
+Partners.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    itemClass: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    item: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    href: PropTypes.string,
+    rel: PropTypes.string,
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string.isRequired
+  }).isRequired).isRequired,
+  onChange: PropTypes.func,
+  onNextClick: PropTypes.func,
+  onPrevClick: PropTypes.func
+};
+var _default = Partners;
+exports["default"] = _default;

package/dist/lib/components/PictureWithDescription/PictureWithDescription.css

@@ -1 +1,80 @@
-h1,h2,h3,h4,h5{margin:0}@media screen and (min-width:1024px){.mfui-picture-with-description{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}}.mfui-picture-with-description__title{margin-bottom:24px}.mfui-picture-with-description__picture{-ms-flex-item-align:start;align-self:flex-start;overflow:hidden;text-align:center}@media screen and (max-width:1023px){.mfui-picture-with-description__picture{margin:0 auto 32px}}@media screen and (min-width:1024px){.mfui-picture-with-description__picture{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:50%}.mfui-picture-with-description__picture_align_left{-webkit-box-ordinal-group:1;-ms-flex-order:0;margin-right:20px;order:0}}.mfui-picture-with-description__img{height:100%;max-width:550px;width:100%}.mfui-picture-with-description__content>:first-child{margin-top:0!important}.mfui-picture-with-description__content>:last-child{margin-bottom:0!important}@media screen and (min-width:1024px){.mfui-picture-with-description__articles{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:50%}.mfui-picture-with-description__articles_text-top-align{-ms-flex-item-align:start;align-self:flex-start}.mfui-picture-with-description__articles_align_right{margin-right:20px}}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description {
+    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;
+  }
+}
+.mfui-picture-with-description__title {
+  margin-bottom: 24px;
+}
+.mfui-picture-with-description__picture {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  overflow: hidden;
+  text-align: center;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-picture-with-description__picture {
+    margin: 0 auto 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__picture {
+    -webkit-box-ordinal-group: 3;
+        -ms-flex-order: 2;
+            order: 2;
+    width: 50%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__picture_align_left {
+    -webkit-box-ordinal-group: 1;
+        -ms-flex-order: 0;
+            order: 0;
+    margin-right: 20px;
+  }
+}
+.mfui-picture-with-description__img {
+  width: 100%;
+  max-width: 550px;
+  height: 100%;
+}
+.mfui-picture-with-description__content > :first-child {
+  margin-top: 0 !important;
+}
+.mfui-picture-with-description__content > :last-child {
+  margin-bottom: 0 !important;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__articles {
+    -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+            order: 1;
+    width: 50%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__articles_text-top-align {
+    -ms-flex-item-align: start;
+        align-self: flex-start;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-picture-with-description__articles_align_right {
+    margin-right: 20px;
+  }
+}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import './PictureWithDescription.scss';
+import './PictureWithDescription.less';
 export declare const pictureAlignTypes: {
     readonly LEFT: "left";
     readonly RIGHT: "right";
 };
-type PictureAlignTypesType = (typeof pictureAlignTypes)[keyof typeof pictureAlignTypes];
+declare type PictureAlignTypesType = typeof pictureAlignTypes[keyof typeof pictureAlignTypes];
 export interface IPictureWithDescriptionProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
@@ -25,8 +25,6 @@ export interface IPictureWithDescriptionProps {
     pictureAlt?: string;
     /** Выравнивание текста по верхнему краю */
     isTextTopAlign?: boolean;
-    /** Дочерний элемент компонента */
-    children?: React.ReactNode;
 }
 declare const PictureWithDescription: React.FC<IPictureWithDescriptionProps>;
 export default PictureWithDescription;

package/dist/lib/components/PictureWithDescription/PictureWithDescription.js

@@ -1,33 +1,46 @@
 "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.pictureAlignTypes = exports["default"] = void 0;
+exports["default"] = exports.pictureAlignTypes = void 0;
+
 var React = _interopRequireWildcard(require("react"));
+
 var _uiCore = require("@megafon/ui-core");
+
 var _uiHelpers = require("@megafon/ui-helpers");
-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; }
-var pictureAlignTypes = exports.pictureAlignTypes = {
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var pictureAlignTypes = {
   LEFT: 'left',
   RIGHT: 'right'
 };
+exports.pictureAlignTypes = pictureAlignTypes;
 var testIdPrefix = 'PictureWithDescription';
 var cn = (0, _uiHelpers.cnCreate)('mfui-picture-with-description');
+
 var PictureWithDescription = function PictureWithDescription(_ref) {
   var rootRef = _ref.rootRef,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    title = _ref.title,
-    pictureUrl = _ref.pictureUrl,
-    _ref$pictureAlign = _ref.pictureAlign,
-    pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
-    pictureAlt = _ref.pictureAlt,
-    isTextTopAlign = _ref.isTextTopAlign,
-    children = _ref.children;
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      title = _ref.title,
+      pictureUrl = _ref.pictureUrl,
+      _ref$pictureAlign = _ref.pictureAlign,
+      pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
+      pictureAlt = _ref.pictureAlt,
+      isTextTopAlign = _ref.isTextTopAlign,
+      children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
     className: cn([className, classes.root]),
     ref: rootRef
@@ -53,4 +66,21 @@ var PictureWithDescription = function PictureWithDescription(_ref) {
     className: cn('content')
   }, children)));
 };
-var _default = exports["default"] = PictureWithDescription;
+
+PictureWithDescription.propTypes = {
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    title: _propTypes["default"].string
+  }),
+  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
+  pictureUrl: _propTypes["default"].string.isRequired,
+  pictureAlign: _propTypes["default"].oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT]),
+  pictureAlt: _propTypes["default"].string,
+  isTextTopAlign: _propTypes["default"].bool
+};
+var _default = PictureWithDescription;
+exports["default"] = _default;