@megafon/ui-shared 8.14.0 → 8.14.2

package/dist/es/components/BenefitsIcons/BenefitsIcons.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, breakpoints, filterDataAttrs } from '@megafon/ui-helpers';
+import throttle from 'lodash.throttle';
+import throttleTime from "../../constants/throttleTime";
+import BenefitsIconsTile from "./BenefitsIconsTile";
+import getMultiColumnConfig, { getOneColumnConfig } from "./helpers";
+import { IconPositionEnum, ItemsAlignEnum } from "./types";
+import "./style/BenefitsIcons.css";
+var testIdPrefix = 'BenefitsIcons';
+var cn = cnCreate('mfui-benefits-icons');
+var BenefitsIcons = function BenefitsIcons(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef,
+    _ref$iconPosition = _ref.iconPosition,
+    iconPosition = _ref$iconPosition === void 0 ? 'left-top' : _ref$iconPosition,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'transparent' : _ref$background,
+    _ref$inOneColumn = _ref.inOneColumn,
+    inOneColumn = _ref$inOneColumn === void 0 ? false : _ref$inOneColumn,
+    items = _ref.items,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var _React$useState = React.useState(iconPosition === IconPositionEnum.CENTER_TOP ? 'center' : 'left'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    itemsAlign = _React$useState2[0],
+    setItemsAlign = _React$useState2[1];
+  var _React$useState3 = React.useState(iconPosition),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    localIconPosition = _React$useState4[0],
+    setLocalIconPosition = _React$useState4[1];
+  var resizeHandler = React.useCallback(function () {
+    if (window.innerWidth <= breakpoints.MOBILE_MIDDLE_END) {
+      setItemsAlign(ItemsAlignEnum.CENTER);
+      setLocalIconPosition(IconPositionEnum.CENTER_TOP);
+    } else {
+      setItemsAlign(ItemsAlignEnum.LEFT);
+      setLocalIconPosition(iconPosition);
+    }
+  }, [iconPosition]);
+  React.useEffect(function () {
+    var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
+    if (inOneColumn) {
+      resizeHandler();
+      window.addEventListener('resize', resizeHandlerThrottled);
+    }
+    return function () {
+      window.removeEventListener('resize', resizeHandlerThrottled);
+    };
+  }, [iconPosition, inOneColumn, resizeHandler]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'one-column': inOneColumn,
+      background: background
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/React.createElement(Grid, {
+    className: classes.grid,
+    guttersLeft: "medium",
+    hAlign: itemsAlign,
+    dataAttrs: {
+      root: {
+        'data-testid': "".concat(testIdPrefix, "-grid-root")
+      },
+      container: {
+        'data-testid': "".concat(testIdPrefix, "-grid-container")
+      }
+    }
+  }, items.map(function (_ref2, i) {
+    var title = _ref2.title,
+      text = _ref2.text,
+      icon = _ref2.icon,
+      alt = _ref2.alt,
+      itemClasses = _ref2.classes,
+      itemDataAttrs = _ref2.dataAttrs;
+    var columnConfig = inOneColumn ? getOneColumnConfig(iconPosition) : getMultiColumnConfig(iconPosition, items.length, i);
+    return /*#__PURE__*/React.createElement(GridColumn, _extends({
+      className: cn('column', [classes.gridColumn]),
+      key: i,
+      dataAttrs: {
+        root: {
+          'data-testid': "".concat(testIdPrefix, "-grid-column")
+        }
+      }
+    }, columnConfig), /*#__PURE__*/React.createElement(BenefitsIconsTile, {
+      className: cn('tile', [classes.item]),
+      classes: itemClasses,
+      dataAttrs: itemDataAttrs,
+      title: title,
+      text: text,
+      icon: icon,
+      background: background,
+      iconPosition: localIconPosition,
+      alt: alt
+    }));
+  }))));
+};
+export default BenefitsIcons;

package/dist/es/components/BenefitsIcons/BenefitsIconsTile.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IBenefit, IconPosition, BackgroundType } from './types';
+import './style/BenefitsIconsTile.scss';
+export interface IBenefitsIconsTile extends IBenefit {
+    iconPosition?: IconPosition;
+    background?: BackgroundType;
+    className?: string;
+}
+declare const BenefitsIconsTile: React.FC<IBenefitsIconsTile>;
+export default BenefitsIconsTile;

package/dist/es/components/BenefitsIcons/BenefitsIconsTile.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { Header } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./style/BenefitsIconsTile.css";
+var testIdPrefix = 'BenefitsIconsTile';
+var cn = cnCreate('mfui-benefits-icons-tile');
+var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    title = _ref.title,
+    text = _ref.text,
+    icon = _ref.icon,
+    iconPosition = _ref.iconPosition,
+    background = _ref.background,
+    alt = _ref.alt,
+    className = _ref.className;
+  var renderIcon = function renderIcon() {
+    if (typeof icon === 'string') {
+      return /*#__PURE__*/React.createElement("img", {
+        className: cn('img-icon', [classes.icon]),
+        src: icon,
+        alt: alt,
+        "data-testid": "".concat(testIdPrefix, "-img")
+      });
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('svg-icon', [classes.icon]),
+      "data-testid": "".concat(testIdPrefix, "-svg")
+    }, icon);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'icon-position': iconPosition,
+      background: background,
+      image: typeof icon === 'string'
+    }, [className, classes.root]),
+    "data-testid": "".concat(testIdPrefix, "-root")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
+    className: cn('content-wrapper', [classes.contentWrapper])
+  }, title && /*#__PURE__*/React.createElement(Header, {
+    className: cn('title', [classes.title]),
+    as: "h5"
+  }, title), text && /*#__PURE__*/React.createElement("div", {
+    className: cn('content', [classes.text])
+  }, text))));
+};
+export default BenefitsIconsTile;

package/dist/es/components/BenefitsIcons/helpers.d.ts

@@ -0,0 +1,8 @@
+import { GridConfig, IconPosition } from './types';
+declare const getLeftSideConfig: (count: number, index: number) => GridConfig;
+declare const getLeftTopConfig: (count: number, index: number) => GridConfig;
+declare const getCenterTopConfig: (count: number, index: number) => GridConfig;
+declare const getOneColumnConfig: (iconPosition: IconPosition) => GridConfig;
+declare const getMultiColumnConfig: (iconPosition: IconPosition, count: number, index: number) => GridConfig;
+export default getMultiColumnConfig;
+export { getLeftSideConfig, getLeftTopConfig, getCenterTopConfig, getOneColumnConfig };

package/dist/es/components/BenefitsIcons/helpers.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { IconPositionEnum } from "./types";
+// left-aligned column with left side icon
+var getLeftSideConfig = function getLeftSideConfig(count, index) {
+  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
+  var columnSize = {
+    wide: '4',
+    desktop: '5',
+    tablet: '10'
+  };
+  switch (count) {
+    case 2:
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetWide: everySecondWithoutOffset,
+        leftOffsetDesktop: everySecondWithoutOffset
+      });
+    default:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetDesktop: everySecondWithoutOffset
+      });
+  }
+};
+// left-aligned column with left-aligned icon on top
+var getLeftTopConfig = function getLeftTopConfig(count, index) {
+  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
+  var everyThirdWithoutOffset = index % 3 ? '1' : undefined;
+  switch (count) {
+    case 2:
+      return {
+        wide: '4',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetWide: everySecondWithoutOffset,
+        leftOffsetDesktop: everySecondWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+    case 4:
+      return {
+        wide: '3',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetDesktop: everySecondWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+    default:
+      return {
+        wide: '3',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetWide: everyThirdWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+  }
+};
+// center-aligned column with center-aligned icon on top
+var getCenterTopConfig = function getCenterTopConfig(count, index) {
+  var isEvenIndex = !(index % 2);
+  var everyEvenWithLeftOffset = isEvenIndex ? '1' : undefined;
+  var everyOddWithRightOffset = isEvenIndex ? undefined : '1';
+  switch (count) {
+    case 4:
+      return {
+        wide: '3',
+        desktop: '5',
+        tablet: '5',
+        leftOffsetDesktop: everyEvenWithLeftOffset,
+        leftOffsetTablet: everyEvenWithLeftOffset,
+        rightOffsetTablet: everyOddWithRightOffset,
+        rightOffsetDesktop: everyOddWithRightOffset
+      };
+    default:
+      return {
+        wide: '4',
+        desktop: '4',
+        tablet: '4'
+      };
+  }
+};
+var getOneColumnConfig = function getOneColumnConfig(iconPosition) {
+  return iconPosition !== IconPositionEnum.CENTER_TOP ? {
+    wide: '10',
+    desktop: '10',
+    tablet: '10'
+  } : {
+    wide: '12',
+    desktop: '12',
+    tablet: '12'
+  };
+};
+var getMultiColumnConfig = function getMultiColumnConfig(iconPosition, count, index) {
+  switch (iconPosition) {
+    case IconPositionEnum.LEFT_TOP:
+      return getLeftTopConfig(count, index);
+    case IconPositionEnum.CENTER_TOP:
+      return getCenterTopConfig(count, index);
+    default:
+      return getLeftSideConfig(count, index);
+  }
+};
+export default getMultiColumnConfig;
+export { getLeftSideConfig, getLeftTopConfig, getCenterTopConfig, getOneColumnConfig };

package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-benefits-icons{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.mfui-benefits-icons__inner{margin-bottom:-20px}.mfui-benefits-icons_background_transparent .mfui-benefits-icons__inner{margin-bottom:-48px}.mfui-benefits-icons__column{margin-bottom:20px}.mfui-benefits-icons_background_transparent .mfui-benefits-icons__column{margin-bottom:48px}.mfui-benefits-icons_one-column .mfui-benefits-icons__inner{margin-bottom:-24px}@media screen and (max-width:767px){.mfui-benefits-icons_one-column .mfui-benefits-icons__inner{margin-bottom:-32px}}.mfui-benefits-icons_one-column .mfui-benefits-icons__column{margin-bottom:24px}@media screen and (max-width:767px){.mfui-benefits-icons_one-column .mfui-benefits-icons__column{margin-bottom:32px}}

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-benefits-icons-tile{border-radius:24px;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_background_white{background-color:var(--base)}.mfui-benefits-icons-tile_background_stroke{border:1px solid var(--spbSky2)}.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}

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

@@ -0,0 +1,54 @@
+type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+export interface IBenefit {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        icon?: string;
+        title?: string;
+        text?: string;
+        contentWrapper?: string;
+    };
+    /** Заголовок бенефита */
+    title?: string | React.ReactNode | React.ReactNode[];
+    /** Основной текст в бенефите */
+    text?: string | React.ReactNode | React.ReactNode[];
+    /** Иконка */
+    icon: React.ReactNode;
+    /** Атрибут alt для изображения */
+    alt?: string;
+}
+export declare const IconPositionEnum: {
+    readonly LEFT_TOP: "left-top";
+    readonly CENTER_TOP: "center-top";
+    readonly LEFT_SIDE: "left-side";
+};
+export 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 const BackgroundEnum: {
+    readonly TRANSPARENT: "transparent";
+    readonly GRAY: "gray";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+    readonly WHITE: "white";
+    readonly STROKE: "stroke";
+};
+export type BackgroundType = (typeof BackgroundEnum)[keyof typeof BackgroundEnum];
+export type GridConfig = {
+    wide?: TGridSizeValues;
+    desktop?: TGridSizeValues;
+    tablet?: TGridSizeValues;
+    leftOffsetWide?: TGridSizeValues;
+    leftOffsetDesktop?: TGridSizeValues;
+    leftOffsetTablet?: TGridSizeValues;
+    rightOffsetDesktop?: TGridSizeValues;
+    rightOffsetTablet?: TGridSizeValues;
+};
+export {};

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

@@ -0,0 +1,17 @@
+export var IconPositionEnum = {
+  LEFT_TOP: 'left-top',
+  CENTER_TOP: 'center-top',
+  LEFT_SIDE: 'left-side'
+};
+export var ItemsAlignEnum = {
+  LEFT: 'left',
+  CENTER: 'center'
+};
+export var BackgroundEnum = {
+  TRANSPARENT: 'transparent',
+  GRAY: 'gray',
+  GREEN: 'green',
+  PURPLE: 'purple',
+  WHITE: 'white',
+  STROKE: 'stroke'
+};

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { IBenefit, GridGutterSize } from './types';
+import './BenfitsPictures.scss';
+export declare const ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
+export interface IBenefitsPicturesProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Данные для бенефитов */
+    items: IBenefit[];
+    /** Горизонтальное выравнивание бенефитов */
+    align?: 'left' | 'center';
+    /** Горизонтальное выравнивание текста */
+    textAlign?: 'left' | 'center' | 'auto';
+    /** Горизонтальное выравнивание изображения */
+    imgAlign?: 'left' | 'center' | 'auto';
+    /** Расстояние между бенефитами */
+    gridGap?: GridGutterSize;
+    /** Дополнительный css класс для корневого элемента */
+    className?: string;
+    /** Дополнительные css классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+    };
+}
+declare const BenefitsPictures: React.FC<IBenefitsPicturesProps>;
+export default BenefitsPictures;

package/dist/es/components/BenefitsPictures/BenefitsPictures.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
+import { breakpoints, cnCreate } from '@megafon/ui-helpers';
+import convert from 'htmr';
+import throttle from 'lodash.throttle';
+import throttleTime from "../../constants/throttleTime";
+import getCenterConfig, { getLeftConfig } from "./helpers";
+import "./BenfitsPictures.css";
+export var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
+var testIdPrefix = 'BenefitsPictures';
+var cn = 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;
+  var isLargeGutter = gridGap === 'large';
+  var isGridCenterAlign = align === 'center' && items.length !== ONLY_LEFT_ALIGN_ITEMS_COUNT;
+  var _React$useState = React.useState(gridGap),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentGutter = _React$useState2[0],
+    setCurrentGutter = _React$useState2[1];
+  var resizeHandler = React.useCallback(function () {
+    if (!isLargeGutter) {
+      return;
+    }
+    if (window.innerWidth < breakpoints.DESKTOP_MIDDLE_START) {
+      setCurrentGutter('medium');
+    } else {
+      setCurrentGutter('large');
+    }
+  }, [isLargeGutter]);
+  var renderText = function renderText(text) {
+    if (typeof text === 'string') {
+      return /*#__PURE__*/React.createElement(Paragraph, {
+        dataAttrs: {
+          root: {
+            'data-testid': "".concat(testIdPrefix, "-paragraph")
+          }
+        }
+      }, convert(text));
+    }
+    return text;
+  };
+  React.useEffect(function () {
+    var throttledResizeHandler = throttle(resizeHandler, throttleTime.resize);
+    resizeHandler();
+    window.addEventListener('resize', throttledResizeHandler);
+    return function () {
+      return window.removeEventListener('resize', throttledResizeHandler);
+    };
+  }, [resizeHandler]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/React.createElement(Grid, {
+    guttersLeft: currentGutter,
+    hAlign: isGridCenterAlign ? 'center' : 'left',
+    dataAttrs: {
+      container: {
+        'data-testid': "".concat(testIdPrefix, "-grid-container")
+      }
+    }
+  }, items.map(function (_ref2, index) {
+    var img = _ref2.img,
+      title = _ref2.title,
+      text = _ref2.text,
+      alt = _ref2.alt;
+    return /*#__PURE__*/React.createElement(GridColumn, _extends({}, align === 'left' ? getLeftConfig(items.length, index) : getCenterConfig(items.length, index, gridGap), {
+      key: index
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cn('item', [classes.item]),
+      "data-testid": "".concat(testIdPrefix, "-item")
+    }, /*#__PURE__*/React.createElement("img", {
+      className: cn('img', {
+        'h-align': imgAlign === 'auto' ? align : imgAlign
+      }),
+      src: img,
+      alt: alt,
+      "data-testid": "".concat(testIdPrefix, "-img")
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cn('content', {
+        'h-align': textAlign === 'auto' ? align : textAlign
+      }),
+      "data-testid": "".concat(testIdPrefix, "-content")
+    }, !!title && /*#__PURE__*/React.createElement(Header, {
+      className: cn('title'),
+      as: "h3",
+      dataAttrs: {
+        root: {
+          'data-testid': "".concat(testIdPrefix, "-title")
+        }
+      }
+    }, convert(title)), !!text && renderText(text))));
+  }))));
+};
+export default BenefitsPictures;

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

@@ -0,0 +1 @@
+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}

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

@@ -0,0 +1,11 @@
+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 getLeftConfig: (count: number, index: number) => GridConfig;
+declare const getCenterMediumConfig: (count: number, index: number) => GridConfig;
+declare const getCenterLargeConfig: (count: number, index: number) => GridConfig;
+declare const getCenterConfig: (count: number, index: number, gutterSize: string) => GridConfig;
+export default getCenterConfig;
+export { columnSize, isOddIndex, getEvenOffset, getOddOffset, getLeftConfig, getCenterMediumConfig, getCenterLargeConfig, };

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

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/extends";
+var columnSize = {
+  wide: '4',
+  desktop: '4',
+  tablet: '5'
+};
+var isOddIndex = function isOddIndex(index) {
+  return !((index + 1) % 2);
+};
+var getEvenOffset = function getEvenOffset(index) {
+  return isOddIndex(index) ? '1' : undefined;
+};
+var getOddOffset = function getOddOffset(index) {
+  return isOddIndex(index) ? undefined : '1';
+};
+var getLeftConfig = function getLeftConfig(count, index) {
+  switch (count) {
+    case 2:
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetWide: getEvenOffset(index),
+        leftOffsetDesktop: getEvenOffset(index),
+        leftOffsetTablet: getEvenOffset(index)
+      });
+    default:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetTablet: getEvenOffset(index)
+      });
+  }
+};
+var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
+  switch (count) {
+    case 3:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetTablet: getOddOffset(index)
+      });
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        rightOffsetWide: getOddOffset(index),
+        leftOffsetWide: getEvenOffset(index),
+        rightOffsetDesktop: getEvenOffset(index),
+        leftOffsetDesktop: getOddOffset(index),
+        rightOffsetTablet: getEvenOffset(index),
+        leftOffsetTablet: getOddOffset(index)
+      });
+    default:
+      return _extends(_extends({}, columnSize), {
+        rightOffsetWide: getOddOffset(index),
+        leftOffsetWide: getEvenOffset(index)
+      });
+  }
+};
+var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
+  switch (count) {
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetWide: getOddOffset(index),
+        rightOffsetWide: getEvenOffset(index),
+        leftOffsetDesktop: getOddOffset(index),
+        rightOffsetDesktop: getEvenOffset(index),
+        leftOffsetTablet: getOddOffset(index),
+        rightOffsetTablet: getEvenOffset(index)
+      });
+    case 3:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetTablet: getOddOffset(index)
+      });
+    default:
+      return _extends({}, columnSize);
+  }
+};
+var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
+  switch (gutterSize) {
+    case 'medium':
+      {
+        return getCenterMediumConfig(count, index);
+      }
+    default:
+      {
+        return getCenterLargeConfig(count, index);
+      }
+  }
+};
+export default getCenterConfig;
+export { columnSize, isOddIndex, getEvenOffset, getOddOffset, getLeftConfig, getCenterMediumConfig, getCenterLargeConfig };

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

@@ -0,0 +1,24 @@
+export interface IBenefit {
+    /** Заголовок бенефита */
+    title?: string;
+    /** Основной текст в бенефите */
+    text?: string | React.ReactNode | React.ReactNode[];
+    /** Изображение */
+    img: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+}
+type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+export type GridConfig = {
+    wide?: TGridSizeValues;
+    desktop?: TGridSizeValues;
+    tablet?: TGridSizeValues;
+    leftOffsetWide?: TGridSizeValues;
+    leftOffsetDesktop?: TGridSizeValues;
+    leftOffsetTablet?: TGridSizeValues;
+    rightOffsetDesktop?: TGridSizeValues;
+    rightOffsetTablet?: TGridSizeValues;
+    rightOffsetWide?: TGridSizeValues;
+};
+export type GridGutterSize = 'large' | 'medium';
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/es/components/BlogBox/BlogBox.css

@@ -0,0 +1 @@
+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{-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;display:grid;grid-template-columns:1fr 1fr;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-end:2;grid-column-start:1;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-column-end:3;grid-column-start:2;grid-row-end:4;grid-row-start:1;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/es/components/BlogBox/BlogBox.d.ts

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