@megafon/ui-shared 6.0.0-beta.5 → 6.1.0

package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css

@@ -1 +1,90 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-benefits-icons-tile{border-radius:12px;min-height:100%;padding:24px}.mfui-benefits-icons-tile_background_transparent{padding:0}.mfui-benefits-icons-tile_background_gray{background-color:var(--spbSky0)}.mfui-benefits-icons-tile_background_green{background-color:var(--brandGreen20)}.mfui-benefits-icons-tile_background_purple{background-color:var(--brandPurple20)}.mfui-benefits-icons-tile .mfui-benefits-icons-tile__svg-icon{margin-bottom:10px}.mfui-benefits-icons-tile__content{font-size:15px;font-weight:400;line-height:24px}.mfui-benefits-icons-tile__title+.mfui-benefits-icons-tile__content{margin-top:4px}.mfui-benefits-icons-tile__text{margin-bottom:0}.mfui-benefits-icons-tile__img-icon{border-radius:8px;height:64px;width:64px}.mfui-benefits-icons-tile__svg-icon{height:40px;overflow:hidden;width:40px}.mfui-benefits-icons-tile__svg-icon svg{fill:var(--brandGreen)!important}.mfui-benefits-icons-tile_background_purple .mfui-benefits-icons-tile__svg-icon svg{fill:var(--brandPurple)!important}.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__inner{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__content-wrapper{padding-top:8px}.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__img-icon,.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__svg-icon{-ms-flex-negative:0;flex-shrink:0;margin-bottom:0;margin-right:14px}.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__inner{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__content-wrapper{padding-top:0}.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__img-icon,.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__svg-icon{-ms-flex-item-align:start;align-self:start}.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__inner{text-align:center}.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__img-icon,.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__svg-icon{margin-left:auto;margin-right:auto}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-benefits-icons-tile {
+  min-height: 100%;
+  padding: 24px;
+  border-radius: 12px;
+}
+.mfui-benefits-icons-tile_background_transparent {
+  padding: 0;
+}
+.mfui-benefits-icons-tile_background_gray {
+  background-color: var(--spbSky0);
+}
+.mfui-benefits-icons-tile_background_green {
+  background-color: var(--brandGreen20);
+}
+.mfui-benefits-icons-tile_background_purple {
+  background-color: var(--brandPurple20);
+}
+.mfui-benefits-icons-tile .mfui-benefits-icons-tile__svg-icon {
+  margin-bottom: 10px;
+}
+.mfui-benefits-icons-tile__content {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-benefits-icons-tile__title + .mfui-benefits-icons-tile__content {
+  margin-top: 4px;
+}
+.mfui-benefits-icons-tile__text {
+  margin-bottom: 0;
+}
+.mfui-benefits-icons-tile__img-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 8px;
+}
+.mfui-benefits-icons-tile__svg-icon {
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+}
+.mfui-benefits-icons-tile__svg-icon svg {
+  fill: var(--brandGreen) !important;
+}
+.mfui-benefits-icons-tile_background_purple .mfui-benefits-icons-tile__svg-icon svg {
+  fill: var(--brandPurple) !important;
+}
+.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__content-wrapper {
+  padding-top: 8px;
+}
+.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__svg-icon,
+.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__img-icon {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  margin-right: 14px;
+  margin-bottom: 0;
+}
+.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__inner {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__content-wrapper {
+  padding-top: 0;
+}
+.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__svg-icon,
+.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__img-icon {
+  -ms-flex-item-align: start;
+      align-self: start;
+}
+.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__inner {
+  text-align: center;
+}
+.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__svg-icon,
+.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__img-icon {
+  margin-right: auto;
+  margin-left: auto;
+}

package/dist/lib/components/BenefitsIcons/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+declare type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 export interface IBenefit {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -27,20 +27,20 @@ export declare const IconPositionEnum: {
     readonly CENTER_TOP: "center-top";
     readonly LEFT_SIDE: "left-side";
 };
-export type IconPosition = (typeof IconPositionEnum)[keyof typeof IconPositionEnum];
+export declare type IconPosition = typeof IconPositionEnum[keyof typeof IconPositionEnum];
 export declare const ItemsAlignEnum: {
     readonly LEFT: "left";
     readonly CENTER: "center";
 };
-export type ItemsAlignType = (typeof ItemsAlignEnum)[keyof typeof ItemsAlignEnum];
+export declare type ItemsAlignType = typeof ItemsAlignEnum[keyof typeof ItemsAlignEnum];
 export declare const BackgroundEnum: {
     readonly TRANSPARENT: "transparent";
     readonly GRAY: "gray";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
 };
-export type BackgroundType = (typeof BackgroundEnum)[keyof typeof BackgroundEnum];
-export type GridConfig = {
+export declare type BackgroundType = typeof BackgroundEnum[keyof typeof BackgroundEnum];
+export declare type GridConfig = {
     wide?: TGridSizeValues;
     desktop?: TGridSizeValues;
     tablet?: TGridSizeValues;

package/dist/lib/components/BenefitsIcons/types.js

@@ -3,19 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ItemsAlignEnum = exports.IconPositionEnum = exports.BackgroundEnum = void 0;
-var IconPositionEnum = exports.IconPositionEnum = {
+exports.BackgroundEnum = exports.ItemsAlignEnum = exports.IconPositionEnum = void 0;
+var IconPositionEnum = {
   LEFT_TOP: 'left-top',
   CENTER_TOP: 'center-top',
   LEFT_SIDE: 'left-side'
 };
-var ItemsAlignEnum = exports.ItemsAlignEnum = {
+exports.IconPositionEnum = IconPositionEnum;
+var ItemsAlignEnum = {
   LEFT: 'left',
   CENTER: 'center'
 };
-var BackgroundEnum = exports.BackgroundEnum = {
+exports.ItemsAlignEnum = ItemsAlignEnum;
+var BackgroundEnum = {
   TRANSPARENT: 'transparent',
   GRAY: 'gray',
   GREEN: 'green',
   PURPLE: 'purple'
-};
+};
+exports.BackgroundEnum = BackgroundEnum;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IBenefit, GridGutterSize } from './types';
-import './BenfitsPictures.scss';
+import './BenfitsPictures.less';
 export declare const ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
 export interface IBenefitsPicturesProps {
     /** Ссылка на корневой элемент */

package/dist/lib/components/BenefitsPictures/BenefitsPictures.js

@@ -1,56 +1,79 @@
 "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"] = exports.ONLY_LEFT_ALIGN_ITEMS_COUNT = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 require("core-js/modules/es.array.map.js");
+
 var React = _interopRequireWildcard(require("react"));
+
 var _uiCore = require("@megafon/ui-core");
+
 var _uiHelpers = require("@megafon/ui-helpers");
+
 var _htmr = _interopRequireDefault(require("htmr"));
+
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+
 var _helpers = _interopRequireWildcard(require("./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; }
+
+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 ONLY_LEFT_ALIGN_ITEMS_COUNT = exports.ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
+
+var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
+exports.ONLY_LEFT_ALIGN_ITEMS_COUNT = ONLY_LEFT_ALIGN_ITEMS_COUNT;
 var testIdPrefix = 'BenefitsPictures';
 var cn = (0, _uiHelpers.cnCreate)('mfui-benefits-pictures');
+
 var BenefitsPictures = function BenefitsPictures(_ref) {
   var items = _ref.items,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'left' : _ref$align,
-    _ref$textAlign = _ref.textAlign,
-    textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
-    _ref$imgAlign = _ref.imgAlign,
-    imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
-    _ref$gridGap = _ref.gridGap,
-    gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
-    rootRef = _ref.rootRef,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes;
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align,
+      _ref$textAlign = _ref.textAlign,
+      textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
+      _ref$imgAlign = _ref.imgAlign,
+      imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
+      _ref$gridGap = _ref.gridGap,
+      gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
+      rootRef = _ref.rootRef,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes;
   var isLargeGutter = gridGap === 'large';
   var isGridCenterAlign = align === 'center' && items.length !== ONLY_LEFT_ALIGN_ITEMS_COUNT;
+
   var _React$useState = React.useState(gridGap),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    currentGutter = _React$useState2[0],
-    setCurrentGutter = _React$useState2[1];
-  var resizeHandler = React.useCallback(function () {
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      currentGutter = _React$useState2[0],
+      setCurrentGutter = _React$useState2[1];
+
+  var resizeHandler = (0, React.useCallback)(function () {
     if (!isLargeGutter) {
       return;
     }
+
     if (window.innerWidth < _uiHelpers.breakpoints.DESKTOP_MIDDLE_START) {
       setCurrentGutter('medium');
     } else {
       setCurrentGutter('large');
     }
   }, [isLargeGutter]);
+
   var renderText = function renderText(text) {
     if (typeof text === 'string') {
       return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
@@ -61,8 +84,10 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
         }
       }, (0, _htmr["default"])(text));
     }
+
     return text;
   };
+
   React.useEffect(function () {
     var throttledResizeHandler = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
     resizeHandler();
@@ -86,9 +111,9 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     }
   }, items.map(function (_ref2, index) {
     var img = _ref2.img,
-      title = _ref2.title,
-      text = _ref2.text,
-      alt = _ref2.alt;
+        title = _ref2.title,
+        text = _ref2.text,
+        alt = _ref2.alt;
     return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({}, align === 'left' ? (0, _helpers.getLeftConfig)(items.length, index) : (0, _helpers["default"])(items.length, index, gridGap), {
       key: index
     }), /*#__PURE__*/React.createElement("div", {
@@ -117,4 +142,26 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     }, (0, _htmr["default"])(title)), !!text && renderText(text))));
   }))));
 };
-var _default = exports["default"] = BenefitsPictures;
+
+BenefitsPictures.propTypes = {
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string,
+    text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
+    img: _propTypes["default"].string.isRequired,
+    alt: _propTypes["default"].string
+  }).isRequired).isRequired,
+  align: _propTypes["default"].oneOf(['left', 'center']),
+  textAlign: _propTypes["default"].oneOf(['left', 'center', 'auto']),
+  imgAlign: _propTypes["default"].oneOf(['left', 'center', 'auto']),
+  gridGap: _propTypes["default"].oneOf(['medium', 'large']),
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    item: _propTypes["default"].string
+  })
+};
+var _default = BenefitsPictures;
+exports["default"] = _default;

package/dist/lib/components/BenefitsPictures/BenfitsPictures.css

@@ -1 +1,43 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-benefits-pictures{overflow:hidden}.mfui-benefits-pictures__inner{margin-bottom:-40px}@media screen and (min-width:768px){.mfui-benefits-pictures__inner{margin-bottom:-48px}}.mfui-benefits-pictures__item{margin-bottom:40px}@media screen and (min-width:768px){.mfui-benefits-pictures__item{margin-bottom:48px}}.mfui-benefits-pictures__content_h-align_center{text-align:center}.mfui-benefits-pictures__img{border-radius:12px;margin-bottom:32px;max-width:100%;vertical-align:top}.mfui-benefits-pictures__img_h-align_center{display:block;margin-left:auto;margin-right:auto}.mfui-benefits-pictures__title{margin-bottom:12px}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-benefits-pictures {
+  overflow: hidden;
+}
+.mfui-benefits-pictures__inner {
+  margin-bottom: -40px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-benefits-pictures__inner {
+    margin-bottom: -48px;
+  }
+}
+.mfui-benefits-pictures__item {
+  margin-bottom: 40px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-benefits-pictures__item {
+    margin-bottom: 48px;
+  }
+}
+.mfui-benefits-pictures__content_h-align_center {
+  text-align: center;
+}
+.mfui-benefits-pictures__img {
+  max-width: 100%;
+  margin-bottom: 32px;
+  border-radius: 12px;
+  vertical-align: top;
+}
+.mfui-benefits-pictures__img_h-align_center {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+}
+.mfui-benefits-pictures__title {
+  margin-bottom: 12px;
+}

package/dist/lib/components/BenefitsPictures/helpers.d.ts

@@ -1,8 +1,8 @@
 import { GridConfig } from './types';
 declare const columnSize: GridConfig;
 declare const isOddIndex: (index: number) => boolean;
-declare const getEvenOffset: (index: number) => '1' | undefined;
-declare const getOddOffset: (index: number) => '1' | undefined;
+declare const getEvenOffset: (index: number) => "1" | undefined;
+declare const getOddOffset: (index: number) => "1" | undefined;
 declare const getLeftConfig: (count: number, index: number) => GridConfig;
 declare const getCenterMediumConfig: (count: number, index: number) => GridConfig;
 declare const getCenterLargeConfig: (count: number, index: number) => GridConfig;

package/dist/lib/components/BenefitsPictures/helpers.js

@@ -3,24 +3,38 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isOddIndex = exports.getOddOffset = exports.getLeftConfig = exports.getEvenOffset = exports.getCenterMediumConfig = exports.getCenterLargeConfig = exports["default"] = exports.columnSize = void 0;
+exports.getCenterLargeConfig = exports.getCenterMediumConfig = exports.getLeftConfig = exports.getOddOffset = exports.getEvenOffset = exports.isOddIndex = exports.columnSize = exports["default"] = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var columnSize = exports.columnSize = {
+
+var columnSize = {
   wide: '4',
   desktop: '4',
   tablet: '5'
 };
-var isOddIndex = exports.isOddIndex = function isOddIndex(index) {
+exports.columnSize = columnSize;
+
+var isOddIndex = function isOddIndex(index) {
   return !((index + 1) % 2);
 };
-var getEvenOffset = exports.getEvenOffset = function getEvenOffset(index) {
+
+exports.isOddIndex = isOddIndex;
+
+var getEvenOffset = function getEvenOffset(index) {
   return isOddIndex(index) ? '1' : undefined;
 };
-var getOddOffset = exports.getOddOffset = function getOddOffset(index) {
+
+exports.getEvenOffset = getEvenOffset;
+
+var getOddOffset = function getOddOffset(index) {
   return isOddIndex(index) ? undefined : '1';
 };
-var getLeftConfig = exports.getLeftConfig = function getLeftConfig(count, index) {
+
+exports.getOddOffset = getOddOffset;
+
+var getLeftConfig = function getLeftConfig(count, index) {
   switch (count) {
     case 2:
     case 4:
@@ -29,18 +43,23 @@ var getLeftConfig = exports.getLeftConfig = function getLeftConfig(count, index)
         leftOffsetDesktop: getEvenOffset(index),
         leftOffsetTablet: getEvenOffset(index)
       });
+
     default:
       return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
         leftOffsetTablet: getEvenOffset(index)
       });
   }
 };
-var getCenterMediumConfig = exports.getCenterMediumConfig = function getCenterMediumConfig(count, index) {
+
+exports.getLeftConfig = getLeftConfig;
+
+var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
   switch (count) {
     case 3:
       return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
         leftOffsetTablet: getOddOffset(index)
       });
+
     case 4:
       return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
         rightOffsetWide: getOddOffset(index),
@@ -50,6 +69,7 @@ var getCenterMediumConfig = exports.getCenterMediumConfig = function getCenterMe
         rightOffsetTablet: getEvenOffset(index),
         leftOffsetTablet: getOddOffset(index)
       });
+
     default:
       return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
         rightOffsetWide: getOddOffset(index),
@@ -57,7 +77,10 @@ var getCenterMediumConfig = exports.getCenterMediumConfig = function getCenterMe
       });
   }
 };
-var getCenterLargeConfig = exports.getCenterLargeConfig = function getCenterLargeConfig(count, index) {
+
+exports.getCenterMediumConfig = getCenterMediumConfig;
+
+var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
   switch (count) {
     case 4:
       return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
@@ -68,24 +91,32 @@ var getCenterLargeConfig = exports.getCenterLargeConfig = function getCenterLarg
         leftOffsetTablet: getOddOffset(index),
         rightOffsetTablet: getEvenOffset(index)
       });
+
     case 3:
       return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
         leftOffsetTablet: getOddOffset(index)
       });
+
     default:
       return (0, _extends2["default"])({}, columnSize);
   }
 };
+
+exports.getCenterLargeConfig = getCenterLargeConfig;
+
 var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
   switch (gutterSize) {
     case 'medium':
       {
         return getCenterMediumConfig(count, index);
       }
+
     default:
       {
         return getCenterLargeConfig(count, index);
       }
   }
 };
-var _default = exports["default"] = getCenterConfig;
+
+var _default = getCenterConfig;
+exports["default"] = _default;

package/dist/lib/components/BenefitsPictures/types.d.ts

@@ -9,8 +9,8 @@ export interface IBenefit {
     /** Значение тега alt для изображения */
     alt?: string;
 }
-type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
-export type GridConfig = {
+declare type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+export declare type GridConfig = {
     wide?: TGridSizeValues;
     desktop?: TGridSizeValues;
     tablet?: TGridSizeValues;
@@ -21,5 +21,5 @@ export type GridConfig = {
     rightOffsetTablet?: TGridSizeValues;
     rightOffsetWide?: TGridSizeValues;
 };
-export type GridGutterSize = 'large' | 'medium';
+export declare type GridGutterSize = 'large' | 'medium';
 export {};

package/dist/lib/components/BenefitsPictures/types.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

package/dist/lib/components/BlogBox/BlogBox.css

@@ -0,0 +1,92 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-blog-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    -webkit-column-gap: 20px;
+       -moz-column-gap: 20px;
+            column-gap: 20px;
+    row-gap: 24px;
+  }
+}
+.mfui-blog-box__list_row {
+  grid-template-columns: repeat(6, 1fr);
+}
+.mfui-blog-box__list_row .mfui-blog-box__item {
+  grid-column-end: span 2;
+}
+.mfui-blog-box__list_row-size_1 .mfui-blog-box__item {
+  grid-column-start: 3;
+}
+.mfui-blog-box__list_row-size_2 .mfui-blog-box__item:first-child {
+  grid-column-start: 2;
+}
+.mfui-blog-box__item_view_thumbnail {
+  margin-top: 16px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__item_view_thumbnail {
+    grid-column-start: 1;
+    grid-column-end: 2;
+    margin-top: 0;
+  }
+}
+.mfui-blog-box__item_view_full {
+  margin-bottom: 24px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-blog-box__item_view_full {
+    margin-bottom: 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__item_view_full {
+    grid-row-start: 1;
+    grid-row-end: 4;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    margin-bottom: 0;
+  }
+}
+.mfui-blog-box__button-wrapper {
+  margin-top: 32px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-blog-box__button-wrapper {
+    margin-top: 40px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box__button-wrapper {
+    margin-top: 56px;
+  }
+}
+.mfui-blog-box__button {
+  min-width: 208px;
+}
+.mfui-blog-box_align-left {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+.mfui-blog-box_align-left .mfui-blog-box__item:first-child {
+  grid-column-start: 1;
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ButtonType, TileDataType } from './types';
+import './BlogBox.less';
+export interface IBlogBox {
+    /** Статьи (не более 4, остальные будут проигнорированы) */
+    items: TileDataType[];
+    /** Кнопка */
+    button?: ButtonType;
+    /** Выравнивание по левому краю (при количестве статей менее трех) */
+    hasAlignLeft?: boolean;
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+        button?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        list?: Record<string, string>;
+        item?: Record<string, string>;
+        button?: Record<string, string>;
+    };
+}
+declare const BlogBox: React.FC<IBlogBox>;
+export default BlogBox;