@megafon/ui-shared 2.0.0-beta.223 → 2.0.0-beta.227

package/dist/es/components/Table/Table.css

@@ -6,20 +6,38 @@ h5 {
   margin: 0;
 }
 .mfui-beta-table {
-  font-family: inherit;
-  font-size: 15px;
-  line-height: 24px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-track {
+  background-color: #EDEDED;
+}
+.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #D8D8D8;
+}
+.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-corner {
+  background-color: #FFFFFF;
+}
+.mfui-beta-table:not(.mfui-beta-table_touch) .mfui-beta-table__scroll {
+  scrollbar-color: #D8D8D8 #EDEDED;
+  scrollbar-width: thin;
 }
 .mfui-beta-table__scroll {
+  position: relative;
   display: grid;
   grid-template-columns: auto auto auto;
   max-width: 100%;
-  overflow: auto;
-  position: relative;
   border: 1px solid #D8D8D8;
+  overflow: auto;
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-table__scroll {
@@ -30,76 +48,76 @@ h5 {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
-  width: 100%;
+  z-index: 2;
   display: block;
-  grid-column-end: 4;
   grid-column-start: 1;
-  z-index: 2;
-  margin-bottom: -6px;
+  grid-column-end: 4;
+  width: 100%;
   height: 6px;
+  margin-bottom: -6px;
   background: linear-gradient(359.94deg, rgba(0, 0, 0, 0.0001) 0.06%, rgba(0, 0, 0, 0.03) 38.08%, rgba(0, 0, 0, 0.08) 74.98%);
 }
 .mfui-beta-table__left-shadow {
   position: -webkit-sticky;
   position: sticky;
-  z-index: 2;
-  width: 6px;
-  left: 0;
   top: 0;
   bottom: 0;
+  left: 0;
+  z-index: 2;
+  width: 6px;
   margin-right: -6px;
   background: -webkit-gradient(linear, right top, left top, color-stop(16.3%, rgba(0, 0, 0, 0.0001)), color-stop(51.81%, rgba(0, 0, 0, 0.03)), color-stop(86.27%, rgba(0, 0, 0, 0.08)));
   background: linear-gradient(270deg, rgba(0, 0, 0, 0.0001) 16.3%, rgba(0, 0, 0, 0.03) 51.81%, rgba(0, 0, 0, 0.08) 86.27%);
 }
 .mfui-beta-table__bottom-gradient {
-  display: block;
-  height: 48px;
-  width: 100%;
-  margin-top: -48px;
   position: -webkit-sticky;
   position: sticky;
-  z-index: 1;
   bottom: 0;
+  z-index: 1;
+  display: block;
+  grid-column-start: 1;
+  grid-column-end: 4;
+  width: 100%;
+  height: 48px;
+  margin-top: -48px;
   background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to top, #FFFFFF 25%, rgba(255, 255, 255, 0));
-  grid-column-end: 4;
-  grid-column-start: 1;
 }
 .mfui-beta-table__right-gradient {
-  display: block;
-  height: 100%;
-  width: 48px;
   position: -webkit-sticky;
   position: sticky;
-  z-index: 1;
   right: 0;
+  z-index: 1;
+  display: block;
+  width: 48px;
+  height: 100%;
   margin-left: -48px;
   background: -webkit-gradient(linear, right top, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to left, #FFFFFF 25%, rgba(255, 255, 255, 0));
 }
 .mfui-beta-table__table {
-  border-spacing: 0;
   border-width: 0;
   border-collapse: separate;
+  border-spacing: 0;
   background-color: #FFFFFF;
 }
 .mfui-beta-table__cell {
-  padding: 24px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  padding: 24px;
   background-color: #FFFFFF;
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-table__cell {
-    padding-left: 16px;
     padding-right: 16px;
+    padding-left: 16px;
   }
 }
 .mfui-beta-table__cell:first-child {
+  position: relative;
   left: 0;
-  min-width: 144px;
   width: 144px;
-  position: relative;
+  min-width: 144px;
   border-right: 1px solid #D8D8D8;
 }
 .mfui-beta-table__cell:not(:first-child) {
@@ -109,10 +127,10 @@ h5 {
   font-size: 12px;
   line-height: 16px;
   height: 72px;
-  background-color: #F6F6F6;
-  color: rgba(51, 51, 51, 0.5);
   padding-bottom: 12px;
+  color: rgba(51, 51, 51, 0.5);
   vertical-align: bottom;
+  background-color: #F6F6F6;
 }
 .mfui-beta-table__row:not(:last-child) .mfui-beta-table__cell {
   border-bottom: 1px solid #D8D8D8;
@@ -133,21 +151,3 @@ h5 {
 .mfui-beta-table_fix-column .mfui-beta-table__bottom-gradient {
   z-index: 3;
 }
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-track {
-  background-color: #EDEDED;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: #D8D8D8;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) ::-webkit-scrollbar-corner {
-  background-color: #FFFFFF;
-}
-.mfui-beta-table:not(.mfui-beta-table_touch) .mfui-beta-table__scroll {
-  scrollbar-color: #D8D8D8 #EDEDED;
-  scrollbar-width: thin;
-}

package/dist/es/components/TextBox/TextBoxPicture.css

@@ -0,0 +1,23 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-text-box-picture_margin_default {
+  margin: 16px 0;
+}
+.mfui-beta-text-box-picture_margin_big-top {
+  margin: 24px 0 16px;
+}
+.mfui-beta-text-box-picture_margin_big-bottom {
+  margin: 16px 0 24px;
+}
+.mfui-beta-text-box-picture_margin_big-vertical {
+  margin: 24px 0;
+}
+.mfui-beta-text-box-picture__img {
+  width: 100%;
+  height: 100%;
+}

package/dist/es/components/TextBox/TextBoxPicture.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import './TextBoxPicture.less';
+export declare const pictureMarginTypes: {
+    readonly DEFAULT: "default";
+    readonly BIG_TOP: "big-top";
+    readonly BIG_BOTTOM: "big-bottom";
+    readonly BIG_VERTICAL: "big-vertical";
+};
+declare type PictureMarginTypesType = typeof pictureMarginTypes[keyof typeof pictureMarginTypes];
+export interface ITextBoxPictureProps {
+    /** URL картинки */
+    url: string;
+    /** Значение вертикальных отступов */
+    margin?: PictureMarginTypesType;
+}
+declare const TextBoxPicture: React.FC<ITextBoxPictureProps>;
+export default TextBoxPicture;

package/dist/es/components/TextBox/TextBoxPicture.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./TextBoxPicture.css";
+export var pictureMarginTypes = {
+  DEFAULT: 'default',
+  BIG_TOP: 'big-top',
+  BIG_BOTTOM: 'big-bottom',
+  BIG_VERTICAL: 'big-vertical'
+};
+var cn = cnCreate('mfui-beta-text-box-picture');
+
+var TextBoxPicture = function TextBoxPicture(_ref) {
+  var url = _ref.url,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? pictureMarginTypes.DEFAULT : _ref$margin;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      margin: margin
+    })
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('img'),
+    src: url
+  }));
+};
+
+TextBoxPicture.propTypes = {
+  url: PropTypes.string.isRequired,
+  margin: PropTypes.oneOf([pictureMarginTypes.DEFAULT, pictureMarginTypes.BIG_TOP, pictureMarginTypes.BIG_BOTTOM, pictureMarginTypes.BIG_VERTICAL])
+};
+export default TextBoxPicture;

package/dist/es/components/VideoBanner/VideoBanner.css

@@ -11,26 +11,26 @@ h5 {
 }
 @media screen and (min-width: 1280px) {
   .mfui-beta-video-banner {
-    margin-left: -80px;
     margin-right: -80px;
+    margin-left: -80px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
   .mfui-beta-video-banner {
-    margin-left: -64px;
     margin-right: -64px;
+    margin-left: -64px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-beta-video-banner {
-    margin-left: -48px;
     margin-right: -48px;
+    margin-left: -48px;
   }
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-video-banner {
-    margin-left: -16px;
     margin-right: -16px;
+    margin-left: -16px;
   }
 }
 .mfui-beta-video-banner__wrapper {
@@ -76,18 +76,17 @@ h5 {
 .mfui-beta-video-banner__background-image,
 .mfui-beta-video-banner__video {
   position: absolute;
-  left: 50%;
   top: 50%;
+  left: 50%;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
-  max-width: 1440px;
 }
 .mfui-beta-video-banner__background-image {
   width: 100%;
   height: 100%;
+  background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  background-repeat: no-repeat;
 }
 .mfui-beta-video-banner__content {
   position: relative;
@@ -161,14 +160,14 @@ h5 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
   margin: -24px -10px 0;
 }
 @media screen and (max-width: 767px) {

package/dist/es/components/VideoBlock/VideoBlock.css

@@ -21,10 +21,10 @@ h5 {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  height: 100%;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  height: 100%;
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-video-block__content {
@@ -38,8 +38,8 @@ h5 {
 }
 @media screen and (min-width: 768px) {
   .mfui-beta-video-block__content {
-    padding-right: 20px;
     margin-right: 20px;
+    padding-right: 20px;
   }
 }
 .mfui-beta-video-block__header {
@@ -54,8 +54,8 @@ h5 {
   margin-top: 24px;
 }
 .mfui-beta-video-block__button {
-  margin-top: 32px;
   width: 171px;
+  margin-top: 32px;
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-video-block__button {

package/dist/es/index.d.ts

@@ -28,6 +28,7 @@ export { default as TableCell } from './components/Table/TableCell';
 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 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

@@ -28,6 +28,7 @@ export { default as TableCell } from "./components/Table/TableCell";
 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 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/BenefitsIcons/BenefitsIcons.d.ts

@@ -14,6 +14,8 @@ export interface IBenefitsIcons {
     classes?: {
         root?: string;
         item?: string;
+        grid?: string;
+        gridColumn?: string;
     };
 }
 declare const BenefitsIcons: React.FC<IBenefitsIcons>;

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

@@ -148,13 +148,16 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
   }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
+    className: classes.grid,
     guttersLeft: "medium",
     hAlign: hAlign
   }, items.map(function (_ref2, i) {
     var title = _ref2.title,
         text = _ref2.text,
         icon = _ref2.icon;
-    return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({}, getColumnConfig(iconPosition, items.length, i), {
+    return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({
+      className: classes.gridColumn
+    }, getColumnConfig(iconPosition, items.length, i), {
       key: i
     }), /*#__PURE__*/React.createElement(_BenefitsIconsTile["default"], {
       className: classes.item,

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

@@ -6,8 +6,8 @@ h5 {
   margin: 0;
 }
 .mfui-beta-benefits-icons {
-  font-size: 10px;
   overflow: hidden;
+  font-size: 10px;
 }
 .mfui-beta-benefits-icons__inner {
   margin-bottom: -48px;

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

@@ -23,8 +23,8 @@ h5 {
   margin-bottom: 0;
 }
 .mfui-beta-benefits-icons-tile__svg-icon {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   overflow: hidden;
 }
 .mfui-beta-benefits-icons-tile_icon-position_left-side {

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

@@ -11,8 +11,8 @@ h5 {
 }
 .mfui-beta-benefits-pictures__img_h-align_center {
   display: block;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }
 .mfui-beta-benefits-pictures__title {
   margin-bottom: 12px;

package/dist/lib/components/Breadcrumbs/Breadcrumbs.css

@@ -26,8 +26,8 @@ h5 {
 }
 .mfui-beta-breadcrumbs__item {
   position: relative;
-  padding-left: 22px;
   margin-right: 10px;
+  padding-left: 22px;
 }
 .mfui-beta-breadcrumbs__item:before {
   content: '→';

package/dist/lib/components/ButtonBanner/ButtonBanner.css

@@ -19,9 +19,9 @@ h5 {
 .mfui-beta-button-banner:before {
   content: '';
   position: absolute;
-  left: 0;
   top: 0;
   bottom: 0;
+  left: 0;
   width: 12px;
   background-color: #00B956;
   border-radius: 0 12px 12px 0;
@@ -33,8 +33,8 @@ h5 {
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-button-banner:before {
-    bottom: auto;
     right: 0;
+    bottom: auto;
     width: auto;
     height: 12px;
   }
@@ -45,8 +45,8 @@ h5 {
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-button-banner__content {
-    text-align: center;
     padding: 36px 16px 32px;
+    text-align: center;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
@@ -65,8 +65,6 @@ h5 {
   }
 }
 .mfui-beta-button-banner__media {
-  overflow: hidden;
-  height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -76,9 +74,11 @@ h5 {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  height: 100%;
+  padding: 0 20px;
+  overflow: hidden;
   background-repeat: no-repeat;
   background-position: center;
-  padding: 0 20px;
   border-radius: 0 8px 8px 0;
 }
 @media screen and (max-width: 767px) {

package/dist/lib/components/Card/Card.css

@@ -10,10 +10,10 @@ h5 {
   display: -ms-flexbox;
   display: flex;
   border-radius: 8px;
+  overflow: hidden;
+  background-color: #FFFFFF;
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
-  background-color: #FFFFFF;
-  overflow: hidden;
 }
 .mfui-beta-card__inner {
   display: -webkit-box;
@@ -28,9 +28,9 @@ h5 {
           flex-grow: 0;
   -ms-flex-negative: 1;
       flex-shrink: 1;
-  width: 100%;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  width: 100%;
   padding: 32px 20px;
 }
 @media screen and (max-width: 767px) {
@@ -39,7 +39,11 @@ h5 {
   }
 }
 .mfui-beta-card__text {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
   margin-top: 12px;
+  color: #333333;
 }
 .mfui-beta-card__btns-wrapper {
   display: -webkit-box;
@@ -47,14 +51,14 @@ h5 {
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-          justify-content: space-evenly;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding-top: 12px;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
   margin-top: auto;
+  padding-top: 12px;
 }
 .mfui-beta-card__btns-wrapper_left-align {
   -webkit-box-pack: start;
@@ -88,21 +92,21 @@ h5 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   margin-top: -32px;
-  margin-left: -20px;
   margin-right: -20px;
+  margin-left: -20px;
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-card__pic-wrapper_img {
     margin-top: -24px;
-    margin-left: -16px;
     margin-right: -16px;
+    margin-left: -16px;
   }
 }
 .mfui-beta-card__pic-wrapper_object-fit_fill img {

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

@@ -43,9 +43,9 @@ export interface ICard {
     /** Иконка в карточке */
     svgSrc?: React.ReactNode;
     /** Заголовок карточки */
-    title: string;
+    title: string | React.ReactNode[] | React.ReactNode;
     /** Текст карточки */
-    text?: string;
+    text?: string | React.ReactNode[] | React.ReactNode;
     /** Данные для кнопки */
     button?: IButton;
     /** Данные для ссылки */

package/dist/lib/components/Card/Card.js

@@ -156,8 +156,7 @@ var Card = function Card(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderImage(), /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
     as: "h3",
     className: cn('title')
-  }, title), !!text && /*#__PURE__*/_react["default"].createElement(_uiCore.Paragraph, {
-    hasMargin: false,
+  }, title), !!text && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('text')
   }, text), renderBtnsWrapper())));
 };
@@ -176,8 +175,8 @@ Card.propTypes = {
   }), _propTypes["default"].any])]),
   imageSrc: _propTypes["default"].string,
   svgSrc: _propTypes["default"].node,
-  title: _propTypes["default"].string.isRequired,
-  text: _propTypes["default"].string,
+  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
+  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
   button: _propTypes["default"].shape({
     title: _propTypes["default"].string.isRequired,
     href: _propTypes["default"].string.isRequired,

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

@@ -8,22 +8,6 @@ h5 {
 .mfui-beta-container {
   padding-bottom: 96px;
 }
-.mfui-beta-container_disable-padding-top {
-  padding-top: 0 !important;
-}
-.mfui-beta-container_disable-padding-bottom {
-  padding-bottom: 0 !important;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-container {
-    padding-bottom: 72px;
-  }
-}
-@media screen and (max-width: 767px) {
-  .mfui-beta-container {
-    padding-bottom: 48px;
-  }
-}
 .mfui-beta-container_bg-color_default {
   background-color: #FFFFFF;
 }
@@ -39,6 +23,16 @@ h5 {
 .mfui-beta-container_bg-color_purple {
   background-color: #731982;
 }
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-container {
+    padding-bottom: 72px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-container {
+    padding-bottom: 48px;
+  }
+}
 .mfui-beta-container_bg-color_default + .mfui-beta-container_bg-color_light-gray {
   padding-top: 96px;
 }
@@ -1897,10 +1891,18 @@ h5 {
     margin-top: 40px;
   }
 }
-.mfui-beta-container .mfui-beta-property + .mfui-beta-property,
+.mfui-beta-container .mfui-beta-property + .mfui-beta-property {
+  margin-top: 0 !important;
+}
 .mfui-beta-container .mfui-beta-property + .mfui-beta-button-link-box,
 .mfui-beta-container .mfui-beta-property + .mfui-beta-download-links {
-  margin-top: 0 !important;
+  margin-top: 48px;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-beta-container .mfui-beta-property + .mfui-beta-button-link-box,
+  .mfui-beta-container .mfui-beta-property + .mfui-beta-download-links {
+    margin-top: 32px;
+  }
 }
 .mfui-beta-container .mfui-beta-table + .mfui-beta-benefits-icons {
   margin-top: 56px;
@@ -2798,3 +2800,9 @@ h5 {
 .mfui-beta-container .mfui-beta-page-title + .mfui-beta-button-link-box {
   margin-top: 0 !important;
 }
+.mfui-beta-container_disable-padding-top {
+  padding-top: 0 !important;
+}
+.mfui-beta-container_disable-padding-bottom {
+  padding-bottom: 0 !important;
+}