@megafon/ui-shared 5.14.0 → 5.16.0

package/dist/es/components/ImageBanner/ImageBanner.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.values.js";
 import React from 'react';
-import { Header, PriceBadge } from '@megafon/ui-core';
+import { Header } from '@megafon/ui-core';
 import { breakpoints, cnCreate, filterDataAttrs, convert, titleConvertConfig } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./ImageBanner.css";
@@ -77,32 +77,45 @@ var ImageBanner = function ImageBanner(_ref2) {
       title = _ref2.title,
       description = _ref2.description,
       cost = _ref2.cost,
+      _ref2$headerLevelMobi = _ref2.headerLevelMobile,
+      headerLevelMobile = _ref2$headerLevelMobi === void 0 ? 'h1' : _ref2$headerLevelMobi,
+      _ref2$headerLevel = _ref2.headerLevel,
+      headerLevel = _ref2$headerLevel === void 0 ? 'h1' : _ref2$headerLevel,
       _ref2$backgroundColor = _ref2.backgroundColor,
       backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
       _ref2$radius = _ref2.radius,
       radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
       autoHeight = _ref2.autoHeight,
       isImageFullWidth = _ref2.isImageFullWidth,
-      _ref2$badges = _ref2.badges,
-      badges = _ref2$badges === void 0 ? [] : _ref2$badges,
-      hasBottomOffset = _ref2.hasBottomOffset,
+      badges = _ref2.badges,
       adBlock = _ref2.adBlock,
       _ref2$children = _ref2.children,
       children = _ref2$children === void 0 ? [] : _ref2$children;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isMobile = _React$useState2[0],
+      setIsMobile = _React$useState2[1];
+
+  React.useEffect(function () {
+    var mediaQuery = window.matchMedia("(max-width: ".concat(breakpoints.MOBILE_MIDDLE_END, "px)"));
+
+    var handleMediaChange = function handleMediaChange(_ref3) {
+      var matches = _ref3.matches;
+      setIsMobile(matches);
+    };
+
+    setIsMobile(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleMediaChange);
+    return function () {
+      mediaQuery.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
   var navTheme = getTheme(backgroundColor);
   var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
-  var renderBadges = !!badges.length && /*#__PURE__*/React.createElement("div", {
+  var renderBadges = !!badges && /*#__PURE__*/React.createElement("div", {
     className: cn('badges', [classes.badges])
-  }, badges.map(function (_ref3) {
-    var text = _ref3.text,
-        iconType = _ref3.iconType;
-    return /*#__PURE__*/React.createElement(PriceBadge, {
-      className: classes.badge,
-      theme: navTheme,
-      iconType: iconType,
-      key: text
-    }, text);
-  }));
+  }, badges);
   var renderAdBlock = !!adBlock && /*#__PURE__*/React.createElement("div", {
     className: cn('ad-block', [classes.adBlock])
   }, adBlock);
@@ -112,7 +125,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     className: cn('badges-container', [classes.badgesContainer])
   }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(Header, {
     className: cn('title', [classes.title]),
-    color: "inherit"
+    color: "inherit",
+    as: isMobile ? headerLevelMobile : headerLevel
   }, typeof title === 'string' ? convert(title, titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(Header, {
     className: cn('description', [classes.description]),
     as: "h5",
@@ -127,10 +141,11 @@ var ImageBanner = function ImageBanner(_ref2) {
       'v-align': imageVerticalAlign
     })
   }, /*#__PURE__*/React.createElement("source", {
+    className: classes.imageSource,
     media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
     srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
   }), /*#__PURE__*/React.createElement("img", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
-    className: cn('background-image', [classes.image]),
+    className: cn('image', [classes.image]),
     src: imageMobile || imageMobile2x,
     srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
     alt: imageAlt
@@ -142,13 +157,10 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
-      'bottom-offset': hasBottomOffset && !hasImage,
       radius: radius
     }, [className, classes.root]),
     ref: rootRef
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cn('wrapper')
-  }, renderContent, hasImage && renderImage));
+  }), renderContent, hasImage && renderImage);
 };
 
 ImageBanner.propTypes = {
@@ -160,6 +172,7 @@ ImageBanner.propTypes = {
   classes: PropTypes.shape({
     root: PropTypes.string,
     image: PropTypes.string,
+    imageSource: PropTypes.string,
     title: PropTypes.string,
     description: PropTypes.string,
     cost: PropTypes.string,
@@ -171,9 +184,11 @@ ImageBanner.propTypes = {
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   cost: PropTypes.string,
+  headerLevelMobile: PropTypes.oneOf(['h1', 'h2']),
+  headerLevel: PropTypes.oneOf(['h1', 'h2']),
   backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
   radius: PropTypes.oneOf(Object.values(Radius)),
   imageMobile: PropTypes.string,
@@ -184,11 +199,7 @@ ImageBanner.propTypes = {
   imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
   autoHeight: PropTypes.bool,
   isImageFullWidth: PropTypes.bool,
-  badges: PropTypes.arrayOf(PropTypes.shape({
-    iconType: PropTypes.oneOf(['timer', 'price', 'check', 'attention', 'info', 'profile']).isRequired,
-    text: PropTypes.string.isRequired
-  }).isRequired),
-  hasBottomOffset: PropTypes.bool,
+  badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
   adBlock: PropTypes.element
 };
 export default ImageBanner;

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

@@ -14,18 +14,16 @@ h5 {
           align-items: center;
 }
 .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;
-  }
+  margin-top: 12px;
 }
 .mfui-text-with-icon-item__svg-icon {
-  width: 40px;
-  min-width: 40px;
-  height: 40px;
-  min-height: 40px;
+  width: 44px;
+  min-width: 44px;
+  height: 44px;
+  min-height: 44px;
   margin-right: 16px;
+  padding: 6px;
+  border: 1px solid var(--spbSky2);
+  border-radius: 50%;
   overflow: hidden;
 }

package/dist/es/helpers/getColumnConfig.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("../../../ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
+export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("@megafon/ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;

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

@@ -42,6 +42,7 @@ h5 {
   -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
           box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
+.mfui-card_link.mfui-card_view_hover-shadow:hover,
 .mfui-card_link.mfui-card_view_shadow:hover {
   -webkit-box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
           box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
@@ -60,6 +61,18 @@ h5 {
     padding: 32px;
   }
 }
+.mfui-card__header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 12px;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: start;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
 .mfui-card__icon {
   width: 40px;
   height: 40px;
@@ -67,23 +80,24 @@ h5 {
 }
 .mfui-card__img-box {
   position: relative;
-  margin-bottom: 24px;
   padding-bottom: 56.25%;
   border-radius: 12px;
   overflow: hidden;
 }
+.mfui-card__img-box_position_top {
+  margin: -6px -6px 24px -6px;
+}
 @media screen and (min-width: 1280px) {
-  .mfui-card__img-box {
-    margin-bottom: 32px;
+  .mfui-card__img-box_position_top {
+    margin: -12px -12px 32px -12px;
   }
 }
 .mfui-card__img-box_position_bottom {
-  margin-top: 24px;
-  margin-bottom: 0;
+  margin: 24px -6px 0 -6px;
 }
 @media screen and (min-width: 1280px) {
   .mfui-card__img-box_position_bottom {
-    margin-top: 32px;
+    margin: 32px -12px 0 -12px;
   }
 }
 .mfui-card__img {
@@ -101,6 +115,35 @@ h5 {
   -webkit-transform: scale(1.2);
           transform: scale(1.2);
 }
+.mfui-card__marker-list {
+  margin: 16px 0 0 0;
+  padding: 0;
+  list-style-type: none;
+}
+.mfui-card__marker-item {
+  position: relative;
+  padding-left: 20px;
+}
+.mfui-card__marker-item:not(:last-child) {
+  margin-bottom: 12px;
+}
+.mfui-card__marker-item:before {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--stcBlack20);
+  opacity: 0.8;
+}
+.mfui-card__marker-note {
+  display: block;
+  margin: 4px 0 0 0;
+  padding: 0;
+  font-weight: 500;
+}
 .mfui-card__texts {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -117,6 +160,9 @@ h5 {
   margin: 0;
   padding-left: 24px;
 }
+.mfui-card__texts ul {
+  list-style-type: disc;
+}
 .mfui-card__texts-title {
   font-weight: 500;
 }

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

@@ -1,6 +1,6 @@
-import React, { Ref } from 'react';
+import React, { ReactElement, Ref } from 'react';
 import './Card.less';
-import { ButtonType, FeaturesList, IconsList, Image, Link, Price, TextsList, Title } from './types';
+import { ButtonType, FeaturesList, IconsList, Image, Link, MarkerList, Price, TextsList, Title } from './types';
 export interface ICard {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -22,7 +22,7 @@ export interface ICard {
     rootRef?: Ref<HTMLDivElement | HTMLAnchorElement>;
     isFullHeight?: boolean;
     /** Вид */
-    view?: 'shadow' | 'background';
+    view?: 'shadow' | 'hover-shadow' | 'background';
     /** Ссылка для карточки */
     link?: Link;
     /** Изображение */
@@ -31,6 +31,8 @@ export interface ICard {
     icon?: React.ReactNode;
     /** Заголовок */
     title: Title;
+    /** Маркированный список */
+    markerList?: MarkerList;
     /** Список текстов */
     textsList?: TextsList;
     /** Список характеристик */
@@ -43,6 +45,8 @@ export interface ICard {
     button?: ButtonType;
     /** Дополнительная кнопка */
     extraButton?: ButtonType;
+    /** Бейдж */
+    badge?: ReactElement;
     /** Обработчик клика по карточке */
     onClick?: () => void;
 }

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

@@ -62,14 +62,16 @@ var Card = function Card(_ref5) {
       image = _ref5.image,
       icon = _ref5.icon,
       title = _ref5.title,
+      markerList = _ref5.markerList,
       textsList = _ref5.textsList,
       featuresList = _ref5.featuresList,
       iconsList = _ref5.iconsList,
       price = _ref5.price,
       button = _ref5.button,
       extraButton = _ref5.extraButton,
+      badge = _ref5.badge,
       onClick = _ref5.onClick;
-  var isOnlyTitle = !image && !icon && !textsList && !featuresList && !iconsList && !price && !button && !extraButton;
+  var isOnlyTitle = !image && !icon && !markerList && !textsList && !featuresList && !iconsList && !price && !button && !extraButton;
   var isLink = (link === null || link === void 0 ? void 0 : link.href) && !button && !extraButton;
   var isBottomImage = (image === null || image === void 0 ? void 0 : image.position) === 'bottom';
   var ElementType = isLink ? 'a' : 'div';
@@ -79,14 +81,18 @@ var Card = function Card(_ref5) {
       return null;
     }
 
+    var _image$position = image.position,
+        position = _image$position === void 0 ? 'top' : _image$position,
+        src = image.src,
+        alt = image.alt;
     return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.imgBox), {
       className: cn('img-box', {
-        position: image.position
+        position: position
       })
     }), /*#__PURE__*/_react["default"].createElement("img", {
       className: cn('img'),
-      src: image.src,
-      alt: image.alt
+      src: src,
+      alt: alt
     }));
   };
 
@@ -101,6 +107,19 @@ var Card = function Card(_ref5) {
   };
 
   var renderContent = function renderContent() {
+    if (markerList) {
+      return /*#__PURE__*/_react["default"].createElement("ul", {
+        className: cn('marker-list')
+      }, markerList.map(function (item, i) {
+        return /*#__PURE__*/_react["default"].createElement("li", {
+          className: cn('marker-item'),
+          key: i
+        }, (0, _uiHelpers.convert)(item.title, {}), !!item.note && /*#__PURE__*/_react["default"].createElement("span", {
+          className: cn('marker-note')
+        }, (0, _uiHelpers.convert)(item.note, {})));
+      }));
+    }
+
     if (textsList) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: cn('texts')
@@ -225,11 +244,13 @@ var Card = function Card(_ref5) {
     target: isLink ? link === null || link === void 0 ? void 0 : link.target : undefined,
     onClick: isLink ? onClick : undefined,
     ref: rootRef
-  }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+  }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('header')
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
     className: cn('title'),
     as: "h3",
     align: title.align
-  }, title.text), renderContent(), renderFooter());
+  }, title.text), badge), renderContent(), renderFooter());
 };
 
 Card.propTypes = {

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

@@ -20,6 +20,12 @@ export declare type Title = {
     /** Выравнивание */
     align?: 'left' | 'center';
 };
+export declare type MarkerList = {
+    /** Заголовок */
+    title: string;
+    /** Примечание */
+    note?: string;
+}[];
 export declare type TextsList = {
     /** Заголовок */
     title?: string;

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

@@ -8,9 +8,10 @@ h5 {
 .mfui-container {
   position: relative;
   padding-bottom: 96px;
+  border-radius: 24px;
 }
 .mfui-container_bg-color_default {
-  background-color: var(--base);
+  background-color: var(--background);
 }
 .mfui-container_bg-color_light-gray {
   background-color: var(--spbSky0);
@@ -105,6 +106,14 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_light-gray) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_light-gray + .mfui-container_bg-color_light-gray {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray {
   padding-top: 96px;
 }
@@ -118,6 +127,14 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_gray) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_light-gray + .mfui-container_bg-color_green {
   padding-top: 96px;
 }
@@ -131,6 +148,14 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_green) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_light-gray + .mfui-container_bg-color_green {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple {
   padding-top: 96px;
 }
@@ -144,6 +169,14 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_purple) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_gray + .mfui-container_bg-color_default {
   padding-top: 96px;
 }
@@ -170,6 +203,22 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_gray:has( + .mfui-container_bg-color_light-gray) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.mfui-container_bg-color_gray:has( + .mfui-container_bg-color_gray) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_gray + .mfui-container_bg-color_gray {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_gray + .mfui-container_bg-color_green {
   padding-top: 96px;
 }
@@ -183,6 +232,14 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_gray:has( + .mfui-container_bg-color_green) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_gray + .mfui-container_bg-color_green {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_gray + .mfui-container_bg-color_purple {
   padding-top: 96px;
 }
@@ -196,6 +253,14 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_gray:has( + .mfui-container_bg-color_purple) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_gray + .mfui-container_bg-color_purple {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_green + .mfui-container_bg-color_default {
   padding-top: 96px;
 }
@@ -222,6 +287,14 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_green:has( + .mfui-container_bg-color_light-gray) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_green + .mfui-container_bg-color_light-gray {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_green + .mfui-container_bg-color_gray {
   padding-top: 96px;
 }
@@ -235,6 +308,22 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_green:has( + .mfui-container_bg-color_gray) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_green + .mfui-container_bg-color_gray {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.mfui-container_bg-color_green:has( + .mfui-container_bg-color_green) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_green + .mfui-container_bg-color_green {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_green + .mfui-container_bg-color_purple {
   padding-top: 96px;
 }
@@ -248,6 +337,14 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_green:has( + .mfui-container_bg-color_purple) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_green + .mfui-container_bg-color_purple {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_purple + .mfui-container_bg-color_default {
   padding-top: 96px;
 }
@@ -274,6 +371,14 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_purple:has( + .mfui-container_bg-color_light-gray) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_purple + .mfui-container_bg-color_gray {
   padding-top: 96px;
 }
@@ -287,6 +392,14 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_purple:has( + .mfui-container_bg-color_gray) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_purple + .mfui-container_bg-color_gray {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container_bg-color_purple + .mfui-container_bg-color_green {
   padding-top: 96px;
 }
@@ -300,6 +413,22 @@ h5 {
     padding-top: 48px;
   }
 }
+.mfui-container_bg-color_purple:has( + .mfui-container_bg-color_green) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_purple + .mfui-container_bg-color_green {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.mfui-container_bg-color_purple:has( + .mfui-container_bg-color_purple) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.mfui-container_bg-color_purple + .mfui-container_bg-color_purple {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .mfui-container .mfui-title-description-box + .mfui-benefits-icons {
   margin-top: 56px;
 }