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

package/dist/es/components/AudioPlayer/timerFormatUtil.js

@@ -1,25 +1,33 @@
-import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.parse-int.js";
+import "core-js/modules/es.array.concat.js";
+
 var getMinutes = function getMinutes(sec) {
   var min = parseInt("".concat(sec / 60), 10);
+
   if (min < 10) {
     return "0".concat(min);
   }
+
   return "".concat(min);
 };
 /**
  * @param {Number} sec
  * @returns {String}
  */
+
+
 var getSeconds = function getSeconds(sec) {
   if (sec < 10) {
     return "0".concat(sec);
   }
+
   return "".concat(sec);
 };
+
 var timerFormat = function timerFormat(sec) {
   var min = getMinutes(sec);
   var seconds = getSeconds(sec % 60);
   return "".concat(min, ":").concat(seconds);
 };
+
 export default timerFormat;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { Banner } from '@megafon/ui-core';
-type BannerBoxProps = React.ComponentProps<typeof Banner> & React.PropsWithChildren;
+declare type BannerBoxProps = React.ComponentProps<typeof Banner>;
 declare const BannerBox: React.FC<BannerBoxProps>;
 export default BannerBox;

package/dist/es/components/BannerBox/BannerBox.js

@@ -1,22 +1,31 @@
-import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 import * as React from 'react';
 import { Banner } from '@megafon/ui-core';
 import { cnCreate } from '@megafon/ui-helpers';
 var cn = cnCreate('mfui-banner-box');
+
 var BannerBox = function BannerBox(_a) {
   var children = _a.children,
-    props = __rest(_a, ["children"]);
+      props = __rest(_a, ["children"]);
+
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
   }, /*#__PURE__*/React.createElement(Banner, props, children));
 };
+
 export default BannerBox;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IconPosition, IBenefit, BackgroundType } from './types';
-import './style/BenefitsIcons.scss';
+import './style/BenefitsIcons.less';
 export interface IBenefitsIcons {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

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

@@ -1,38 +1,44 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.values.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 PropTypes from 'prop-types';
 import throttleTime from "../../constants/throttleTime";
 import BenefitsIconsTile from "./BenefitsIconsTile";
 import getMultiColumnConfig, { getOneColumnConfig } from "./helpers";
-import { IconPositionEnum, ItemsAlignEnum } from "./types";
+import { IconPositionEnum, ItemsAlignEnum, BackgroundEnum } 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;
+      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];
+      _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];
+      _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);
@@ -44,10 +50,12 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
   }, [iconPosition]);
   React.useEffect(function () {
     var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
+
     if (inOneColumn) {
       resizeHandler();
       window.addEventListener('resize', resizeHandlerThrottled);
     }
+
     return function () {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
@@ -74,11 +82,11 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
     }
   }, items.map(function (_ref2, i) {
     var title = _ref2.title,
-      text = _ref2.text,
-      icon = _ref2.icon,
-      alt = _ref2.alt,
-      itemClasses = _ref2.classes,
-      itemDataAttrs = _ref2.dataAttrs;
+        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]),
@@ -101,4 +109,37 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
     }));
   }))));
 };
+
+BenefitsIcons.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  iconPosition: PropTypes.oneOf(Object.values(IconPositionEnum)),
+  background: PropTypes.oneOf(Object.values(BackgroundEnum)),
+  inOneColumn: PropTypes.bool,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    dataAttrs: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    classes: PropTypes.shape({
+      root: PropTypes.string,
+      icon: PropTypes.string,
+      title: PropTypes.string,
+      text: PropTypes.string,
+      contentWrapper: PropTypes.string
+    }),
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+    icon: PropTypes.node.isRequired,
+    alt: PropTypes.string
+  }).isRequired).isRequired,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    item: PropTypes.string
+  })
+};
 export default BenefitsIcons;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IBenefit, IconPosition, BackgroundType } from './types';
-import './style/BenefitsIconsTile.scss';
+import './style/BenefitsIconsTile.less';
 export interface IBenefitsIconsTile extends IBenefit {
     iconPosition?: IconPosition;
     background?: BackgroundType;

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

@@ -1,21 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { Header } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import { IconPositionEnum, BackgroundEnum } from "./types";
 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;
+      _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", {
@@ -25,11 +30,13 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
         "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,
@@ -48,4 +55,24 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
     className: cn('content', [classes.text])
   }, text))));
 };
+
+BenefitsIconsTile.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    icon: PropTypes.string,
+    title: PropTypes.string,
+    text: PropTypes.string,
+    contentWrapper: PropTypes.string
+  }),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  iconPosition: PropTypes.oneOf(Object.values(IconPositionEnum)),
+  background: PropTypes.oneOf(Object.values(BackgroundEnum)),
+  icon: PropTypes.node.isRequired,
+  alt: PropTypes.string
+};
 export default BenefitsIconsTile;

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

@@ -1,8 +1,8 @@
-import { GridConfig, IconPosition } from './types';
+import { GridConfig } 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;
+declare const getOneColumnConfig: (iconPosition: "left-top" | "center-top" | "left-side") => GridConfig;
+declare const getMultiColumnConfig: (iconPosition: "left-top" | "center-top" | "left-side", count: number, index: number) => GridConfig;
 export default getMultiColumnConfig;
 export { getLeftSideConfig, getLeftTopConfig, getCenterTopConfig, getOneColumnConfig };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { IconPositionEnum } from "./types";
-// left-aligned column with left side icon
+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 = {
@@ -8,6 +8,7 @@ var getLeftSideConfig = function getLeftSideConfig(count, index) {
     desktop: '5',
     tablet: '10'
   };
+
   switch (count) {
     case 2:
     case 4:
@@ -15,16 +16,19 @@ var getLeftSideConfig = function getLeftSideConfig(count, index) {
         leftOffsetWide: everySecondWithoutOffset,
         leftOffsetDesktop: everySecondWithoutOffset
       });
+
     default:
       return _extends(_extends({}, columnSize), {
         leftOffsetDesktop: everySecondWithoutOffset
       });
   }
-};
-// left-aligned column with left-aligned icon on top
+}; // 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 {
@@ -35,6 +39,7 @@ var getLeftTopConfig = function getLeftTopConfig(count, index) {
         leftOffsetDesktop: everySecondWithoutOffset,
         leftOffsetTablet: everySecondWithoutOffset
       };
+
     case 4:
       return {
         wide: '3',
@@ -43,6 +48,7 @@ var getLeftTopConfig = function getLeftTopConfig(count, index) {
         leftOffsetDesktop: everySecondWithoutOffset,
         leftOffsetTablet: everySecondWithoutOffset
       };
+
     default:
       return {
         wide: '3',
@@ -52,12 +58,14 @@ var getLeftTopConfig = function getLeftTopConfig(count, index) {
         leftOffsetTablet: everySecondWithoutOffset
       };
   }
-};
-// center-aligned column with center-aligned icon on top
+}; // 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 {
@@ -69,6 +77,7 @@ var getCenterTopConfig = function getCenterTopConfig(count, index) {
         rightOffsetTablet: everyOddWithRightOffset,
         rightOffsetDesktop: everyOddWithRightOffset
       };
+
     default:
       return {
         wide: '4',
@@ -77,6 +86,7 @@ var getCenterTopConfig = function getCenterTopConfig(count, index) {
       };
   }
 };
+
 var getOneColumnConfig = function getOneColumnConfig(iconPosition) {
   return iconPosition !== IconPositionEnum.CENTER_TOP ? {
     wide: '10',
@@ -88,15 +98,19 @@ var getOneColumnConfig = function getOneColumnConfig(iconPosition) {
     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

@@ -1 +1,38 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-benefits-icons{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}}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-benefits-icons {
+  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

@@ -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/es/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/es/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 {
     /** Ссылка на корневой элемент */