@megafon/ui-shared 3.0.0-beta.6 → 3.0.0

package/dist/es/components/TextWithIcon/TextWithIconItem.css

@@ -0,0 +1,49 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-text-with-icon-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon-item {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+.mfui-text-with-icon-item:not(:first-of-type) {
+  margin-top: 16px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon-item:not(:first-of-type) {
+    margin-top: 24px;
+  }
+}
+.mfui-text-with-icon-item__svg-icon {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  overflow: hidden;
+}
+@media screen and (min-width: 768px) {
+  .mfui-text-with-icon-item__svg-icon {
+    margin-right: 16px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon-item__text {
+    margin-top: 12px;
+    text-align: center;
+  }
+}

package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import './TextWithIconItem.less';
+export interface ITextWithIconItem {
+    /** Текст */
+    text: string;
+    /** Иконка */
+    icon: React.ReactNode;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+}
+declare const TextWithIconItem: React.FC<ITextWithIconItem>;
+export default TextWithIconItem;

package/dist/es/components/TextWithIcon/TextWithIconItem.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./TextWithIconItem.css";
+var cn = cnCreate('mfui-text-with-icon-item');
+
+var TextWithIconItem = function TextWithIconItem(_ref) {
+  var text = _ref.text,
+      icon = _ref.icon,
+      rootRef = _ref.rootRef,
+      dataAttrs = _ref.dataAttrs,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn([className]),
+    ref: rootRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
+    className: cn('svg-icon')
+  }, icon), /*#__PURE__*/React.createElement("div", {
+    className: cn('text')
+  }, text));
+};
+
+TextWithIconItem.propTypes = {
+  text: PropTypes.string.isRequired,
+  icon: PropTypes.node.isRequired,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string
+};
+export default TextWithIconItem;

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import './TitleDescriptionBox.less';
 export interface ITitleDescriptionBoxProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;

package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js

@@ -29,7 +29,7 @@ var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
       className: cn('description')
     }, description);
   }, [description]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'h-align': hAlign,
       'text-color': textColor
@@ -50,7 +50,9 @@ var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
 };
 
 TitleDescriptionBox.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),

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

@@ -6,7 +6,7 @@ export interface IContent {
     /** Текст-описание */
     description: string | React.ReactNode[] | React.ReactNode;
     /** Текст кнопки */
-    buttonTitle: string;
+    buttonTitle?: string;
     /** Добавляет атрибут download для тега <a> компонента Button */
     buttonDownload?: boolean;
     /** Ссылка на кнопке */

package/dist/es/components/VideoBlock/VideoBlock.js

@@ -81,7 +81,7 @@ var VideoBlock = function VideoBlock(_ref) {
       className: cn('header')
     }, title), /*#__PURE__*/React.createElement("div", {
       className: cn('description', [classes.description])
-    }, description), /*#__PURE__*/React.createElement(Button, {
+    }, description), buttonTitle && /*#__PURE__*/React.createElement(Button, {
       className: cn('button', [classes.button]),
       href: href,
       onClick: onButtonClick,
@@ -100,7 +100,7 @@ var VideoBlock = function VideoBlock(_ref) {
         orderTablet: "2",
         orderMobile: "2",
         key: "column-content"
-      }, renderContent && renderContent(content)));
+      }, renderContent(content)));
     }
 
     columns.push( /*#__PURE__*/React.createElement(GridColumn, {
@@ -139,7 +139,7 @@ VideoBlock.propTypes = {
     title: PropTypes.string.isRequired,
     description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     href: PropTypes.string,
-    buttonTitle: PropTypes.string.isRequired,
+    buttonTitle: PropTypes.string,
     buttonDownload: PropTypes.bool,
     onButtonClick: PropTypes.func
   }),

package/dist/es/index.d.ts

@@ -29,6 +29,8 @@ export { default as TableRow } from './components/Table/TableRow';
 export { default as TabsBox } from './components/TabsBox/TabsBox';
 export { default as TextBox } from './components/TextBox/TextBox';
 export { default as TextBoxPicture } from './components/TextBox/TextBoxPicture';
+export { default as TextWithIcon } from './components/TextWithIcon/TextWithIcon';
+export { default as TextWithIconItem } from './components/TextWithIcon/TextWithIconItem';
 export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
 export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
 export { default as VideoBlock } from './components/VideoBlock/VideoBlock';

package/dist/es/index.js

@@ -29,6 +29,8 @@ export { default as TableRow } from "./components/Table/TableRow";
 export { default as TabsBox } from "./components/TabsBox/TabsBox";
 export { default as TextBox } from "./components/TextBox/TextBox";
 export { default as TextBoxPicture } from "./components/TextBox/TextBoxPicture";
+export { default as TextWithIcon } from "./components/TextWithIcon/TextWithIcon";
+export { default as TextWithIconItem } from "./components/TextWithIcon/TextWithIconItem";
 export { default as TitleDescriptionBox } from "./components/TitleDescriptionBox/TitleDescriptionBox";
 export { default as VideoBanner } from "./components/VideoBanner/VideoBanner";
 export { default as VideoBlock } from "./components/VideoBlock/VideoBlock";

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import './AccordionBox.less';
 export interface IAccordionBox {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
@@ -15,8 +15,6 @@ export interface IAccordionBox {
     isFullWidth?: boolean;
     /** Центрирование по горизонтали для расширения 1280+ */
     hCenterAlignWide?: boolean;
-    /** Вертикальные отступы */
-    hasVerticalPaddings?: boolean;
     /** Дополнительный класс для корнеовго элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */

package/dist/lib/components/AccordionBox/AccordionBox.js

@@ -58,7 +58,9 @@ var AccordionBox = function AccordionBox(_a) {
 };
 
 AccordionBox.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
@@ -66,7 +68,6 @@ AccordionBox.propTypes = {
   isFullWidth: PropTypes.bool,
   isOpened: PropTypes.bool,
   hCenterAlignWide: PropTypes.bool,
-  hasVerticalPaddings: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,

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

@@ -16,9 +16,9 @@ export declare const ImageScaling: {
 };
 declare type ImageScalingType = typeof ImageScaling[keyof typeof ImageScaling];
 export interface IButtonBannerProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Дополнительный css класс для корневого элемента */
     className?: string;

package/dist/lib/components/ButtonBanner/ButtonBanner.js

@@ -79,7 +79,7 @@ var ButtonBanner = function ButtonBanner(_ref) {
     download: buttonDownload
   }, buttonText);
 
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       image: !!imageUrl,
       scaling: imageScaling
@@ -110,7 +110,9 @@ var ButtonBanner = function ButtonBanner(_ref) {
 };
 
 ButtonBanner.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

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

@@ -1,9 +1,9 @@
 import React, { Ref } from 'react';
 import './ButtonLinkBox.less';
 export interface IButtonLinkBoxProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js

@@ -46,7 +46,7 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       onButtonClick = _ref.onButtonClick,
       onLinkClick = _ref.onLinkClick;
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'h-align': hAlign
     }, [className, classes.root]),
@@ -73,7 +73,9 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
 };
 
 ButtonLinkBox.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

package/dist/lib/components/Container/Container.css

@@ -344,6 +344,9 @@ h5 {
 .mfui-container .mfui-title-description-box + .mfui-download-links {
   margin-top: 32px;
 }
+.mfui-container .mfui-title-description-box + .mfui-text-with-icon {
+  margin-top: 24px;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-title-description-box + .mfui-benefits-icons {
     margin-top: 48px;
@@ -2230,6 +2233,9 @@ h5 {
 .mfui-container .mfui-text-box + .mfui-download-links {
   margin-top: 32px;
 }
+.mfui-container .mfui-text-box + .mfui-text-with-icon {
+  margin-top: 32px;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-text-box + .mfui-benefits-icons {
     margin-top: 48px;
@@ -2869,6 +2875,163 @@ h5 {
 .mfui-container .mfui-page-title + .mfui-button-link-box {
   margin-top: 0 !important;
 }
+.mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-cards-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-video-block {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-partners {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-instructions {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-property {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-table {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-download-links {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-text-box {
+  margin-top: 32px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-store-banner {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-button-banner {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-steps {
+  margin-top: 40px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-video-block {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-partners {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-instructions {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-property {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-table {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-download-links {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-text-box {
+    margin-top: 32px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-steps {
+    margin-top: 48px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-video-block {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-partners {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-instructions {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-property {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-table {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-download-links {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-text-box {
+    margin-top: 32px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-steps {
+    margin-top: 56px;
+  }
+}
 .mfui-container_disable-padding-top {
   padding-top: 0 !important;
 }

package/dist/lib/components/StoreBanner/StoreBanner.css

@@ -159,7 +159,16 @@ h5 {
   display: flex;
 }
 .mfui-store-banner__qr-code {
+  -ms-flex-item-align: center;
+      align-self: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 90px;
+  height: 90px;
   margin-right: 16px;
+  border: 1px solid var(--spbSky1);
+  border-radius: 8px;
+  background-color: var(--base);
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__qr-code {
@@ -180,6 +189,9 @@ h5 {
 .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
+  margin-right: 8px;
+  margin-bottom: 10px;
+  margin-left: 8px;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__store-link {
@@ -187,9 +199,8 @@ h5 {
     height: 35px;
   }
 }
-.mfui-store-banner__store-link:not(:last-child) {
-  margin-right: 16px;
-  margin-bottom: 10px;
+.mfui-store-banner__store-link:last-child {
+  margin-bottom: 0;
 }
 .mfui-store-banner__stores {
   display: -webkit-box;
@@ -208,6 +219,11 @@ h5 {
             justify-content: center;
   }
 }
+@media screen and (min-width: 768px) {
+  .mfui-store-banner__stores {
+    margin-left: -8px;
+  }
+}
 .mfui-store-banner__text {
   margin-bottom: 32px;
 }
@@ -229,16 +245,10 @@ h5 {
   -o-object-fit: contain;
      object-fit: contain;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-store-banner__links_three .mfui-store-banner__qr-code {
-    width: 120px;
-    height: 120px;
-  }
-}
 @media screen and (min-width: 1280px) {
   .mfui-store-banner__links_three .mfui-store-banner__qr-code {
-    max-width: 88px;
-    max-height: 88px;
+    max-width: 90px;
+    max-height: 90px;
   }
 }
 .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
@@ -260,12 +270,6 @@ h5 {
     margin: 0 auto;
   }
 }
-.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link {
-  margin-right: 16px;
-}
-.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link:not(:first-child) {
-  margin-right: 0;
-}
 .mfui-store-banner__links_three .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
@@ -284,8 +288,3 @@ h5 {
     margin-bottom: 16px;
   }
 }
-@media screen and (max-width: 1023px) {
-  .mfui-store-banner__links_three .mfui-store-banner__store-link:not(:first-child) {
-    margin-right: 0;
-  }
-}

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

@@ -56,9 +56,9 @@ export interface IStoreBannerProps {
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
 }
 declare const StoreBanner: React.FC<IStoreBannerProps>;

package/dist/lib/components/StoreBanner/StoreBanner.js

@@ -75,7 +75,7 @@ var StoreBanner = function StoreBanner(_ref) {
       mask: deviceMask
     }, [className, rootClassName]),
     ref: rootRef
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('container')
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('grid')
@@ -162,8 +162,10 @@ StoreBanner.propTypes = {
   rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
     current: _propTypes["default"].elementType
   }), _propTypes["default"].any])]),
-  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
-  theme: _propTypes["default"].oneOf(Object.values(Theme))
+  theme: _propTypes["default"].oneOf(Object.values(Theme)),
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  })
 };
 var _default = StoreBanner;
 exports["default"] = _default;

package/dist/lib/components/TextBox/TextBox.css

@@ -14,3 +14,12 @@ h5 {
 .mfui-text-box_text-center {
   text-align: center;
 }
+.mfui-text-box .mfui-text-with-icon {
+  margin: 24px 0;
+}
+.mfui-text-box .mfui-text-with-icon + .mfui-header {
+  margin-top: 32px;
+}
+.mfui-text-box .mfui-text-box-picture + .mfui-text-with-icon {
+  margin: 32px 0 24px;
+}

package/dist/lib/components/TextWithIcon/TextWithIcon.css

@@ -0,0 +1,15 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-text-with-icon__header {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon__header {
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ITextWithIconItem } from './TextWithIconItem';
+import './TextWithIcon.less';
+export interface ITextWithIconProps {
+    /** Заголовок */
+    title?: string;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Допустимый дочерний компонент */
+    children: React.ReactElement<ITextWithIconItem>[] | React.ReactElement<ITextWithIconItem>;
+}
+declare const TextWithIcon: React.FC<ITextWithIconProps>;
+export default TextWithIcon;