@megafon/ui-shared 8.2.2 → 8.4.0

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { BackgroundType, CardDataType, SubtitleSizeType, TitleColorType } from './types';
+import './NumbersBox.scss';
+type CarouselProps = React.ComponentProps<typeof Carousel>;
+export interface INumbersBox {
+    /** Список карточек. Минимальное количество 3 карточки */
+    items: CardDataType[];
+    /** Визуальный эффект фона для карточки */
+    background?: BackgroundType;
+    /** Цвет текста заголовка карточки */
+    titleColor?: TitleColorType;
+    /** Размер дополнительного текста карточки */
+    subtitleSize?: SubtitleSizeType;
+    /** Тема навигации для карусели */
+    carouselNavTheme?: CarouselProps['navTheme'];
+    /** Цвет градиента для карусели */
+    carouselGradientColor?: CarouselProps['gradientColor'];
+    /** Дополнительный css класс для корневого элемента */
+    className?: string;
+    /** Дополнительные css классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        card?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        card?: Record<string, string>;
+    };
+    /** Ссылка на элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const NumbersBox: React.FC<INumbersBox>;
+export default NumbersBox;

package/dist/es/components/NumbersBox/NumbersBox.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { cnCreate, breakpoints, filterDataAttrs } from '@megafon/ui-helpers';
+import NumbersCard from "./components/NumbersCard/NumbersCard";
+import "./NumbersBox.css";
+var slidesSettings = _defineProperty(_defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 20
+}), breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 3,
+  spaceBetween: 20
+}), breakpoints.DESKTOP_SMALL_START, {
+  slidesPerView: 4,
+  spaceBetween: 20
+});
+var MIN_ITEMS_COUNT = 3;
+var FOUR_ITEMS = 4;
+var MIN_CAROUSEL_ITEMS_COUNT = 5;
+var cn = cnCreate('mfui-numbers-box');
+var NumbersBox = function NumbersBox(_ref) {
+  var items = _ref.items,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'shadow' : _ref$background,
+    _ref$titleColor = _ref.titleColor,
+    titleColor = _ref$titleColor === void 0 ? 'default' : _ref$titleColor,
+    _ref$subtitleSize = _ref.subtitleSize,
+    subtitleSize = _ref$subtitleSize === void 0 ? 'medium' : _ref$subtitleSize,
+    carouselNavTheme = _ref.carouselNavTheme,
+    carouselGradientColor = _ref.carouselGradientColor,
+    dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    classes = _ref.classes,
+    rootRef = _ref.rootRef;
+  if (items.length < MIN_ITEMS_COUNT) {
+    return null;
+  }
+  var showCarousel = items.length >= MIN_CAROUSEL_ITEMS_COUNT;
+  var isGridLayout = items.length === FOUR_ITEMS;
+  var hasLargeSpacing = background === 'none' && !showCarousel;
+  var renderItem = function renderItem(item, index) {
+    return /*#__PURE__*/React.createElement(NumbersCard, _extends({}, item, {
+      background: background,
+      titleColor: titleColor,
+      subtitleSize: subtitleSize,
+      dataAttrs: {
+        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, index + 1)
+      },
+      className: cn('card', [classes === null || classes === void 0 ? void 0 : classes.card]),
+      key: index + item.title
+    }));
+  };
+  var renderCarousel = function renderCarousel() {
+    return /*#__PURE__*/React.createElement(Carousel, {
+      slidesSettings: slidesSettings,
+      navTheme: carouselNavTheme,
+      gradient: true,
+      gradientColor: carouselGradientColor
+    }, items.map(renderItem));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      line: !showCarousel,
+      grid: isGridLayout,
+      spaced: hasLargeSpacing
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    ref: rootRef
+  }), showCarousel ? renderCarousel() : items.map(renderItem));
+};
+export default NumbersBox;

package/dist/es/components/NumbersBox/components/NumbersCard/NumbersCard.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-numbers-card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;color:var(--content);-ms-flex-direction:column;flex-direction:column;gap:4px;min-height:100%;padding:24px}@media screen and (min-width:1280px){.mfui-numbers-card{gap:8px;padding:32px}}.mfui-numbers-card_background_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-numbers-card_background_stroke{background-color:transparent;border:1px solid var(--spbSky2)}.mfui-numbers-card_background_gray{background-color:var(--spbSky0)}.mfui-numbers-card_background_none{background-color:transparent;border-radius:0;padding:0}.mfui-numbers-card__title{color:var(--brandGreen);font-size:36px;font-weight:600;font-weight:700;letter-spacing:.5px;line-height:30px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-numbers-card__title{font-size:36px;line-height:40px}}@media screen and (min-width:1024px){.mfui-numbers-card__title{font-size:44px;line-height:48px}}@media screen and (min-width:1280px){.mfui-numbers-card__title{font-size:52px;line-height:56px}}@media screen and (max-width:1023px){.mfui-numbers-card__title{letter-spacing:0;line-height:40px}}.mfui-numbers-card__title_color_night{color:var(--night)}.mfui-numbers-card__title_color_berry{color:var(--berry)}.mfui-numbers-card__title_color_flamingo{color:var(--flamingo)}.mfui-numbers-card__subtitle{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;overflow:hidden}@media screen and (min-width:1280px){.mfui-numbers-card__subtitle{font-size:20px;line-height:28px}}@media screen and (max-width:1023px){.mfui-numbers-card__subtitle{letter-spacing:0}}.mfui-numbers-card__subtitle_size_small{font-size:15px;font-weight:500;line-height:24px}

package/dist/es/components/NumbersBox/components/NumbersCard/NumbersCard.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { BackgroundType, SubtitleSizeType, TitleColorType } from '../../types';
+import './NumbersCard.scss';
+export interface INumbersCard {
+    title: string;
+    subtitle: string;
+    titleColor?: TitleColorType;
+    subtitleSize?: SubtitleSizeType;
+    background?: BackgroundType;
+    className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const NumbersCard: React.FC<INumbersCard>;
+export default NumbersCard;

package/dist/es/components/NumbersBox/components/NumbersCard/NumbersCard.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, convert, textConvertConfig } from '@megafon/ui-helpers';
+import "./NumbersCard.css";
+var cn = cnCreate('mfui-numbers-card');
+var NumbersCard = function NumbersCard(_ref) {
+  var title = _ref.title,
+    titleColor = _ref.titleColor,
+    subtitle = _ref.subtitle,
+    subtitleSize = _ref.subtitleSize,
+    background = _ref.background,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      background: background
+    }, [className])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), /*#__PURE__*/React.createElement("div", {
+    className: cn('title', {
+      color: titleColor
+    })
+  }, convert(title, {})), /*#__PURE__*/React.createElement("div", {
+    className: cn('subtitle', {
+      size: subtitleSize
+    })
+  }, convert(subtitle, textConvertConfig)));
+};
+export default NumbersCard;

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

@@ -0,0 +1,7 @@
+export type CardDataType = {
+    title: string;
+    subtitle: string;
+};
+export type TitleColorType = 'default' | 'night' | 'berry' | 'flamingo';
+export type SubtitleSizeType = 'small' | 'medium';
+export type BackgroundType = 'shadow' | 'stroke' | 'gray' | 'white' | 'none';

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

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

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

@@ -18,6 +18,7 @@ export interface IPartnersProps {
     classes?: {
         root?: string;
         itemClass?: string;
+        slide?: string;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/es/components/Partners/Partners.js

@@ -25,6 +25,7 @@ var Partners = function Partners(_ref) {
     _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
     root = _ref$classes2.root,
     itemClass = _ref$classes2.itemClass,
+    slide = _ref$classes2.slide,
     dataAttrs = _ref.dataAttrs,
     className = _ref.className,
     items = _ref.items,
@@ -77,6 +78,9 @@ var Partners = function Partners(_ref) {
     var topRow = items.slice(0, halfItemsLength);
     var bottomRow = items.slice(halfItemsLength);
     return /*#__PURE__*/React.createElement(Carousel, {
+      classes: {
+        slide: cn('slide', [slide])
+      },
       slidesSettings: slidesSettings,
       onChange: onChange,
       onNextClick: onNextClick,
@@ -95,7 +99,7 @@ var Partners = function Partners(_ref) {
         className: cn('slide')
       }, renderItem(item, i), renderItem(bottomRow[i], i));
     }));
-  }, [items, onChange, onNextClick, onPrevClick, renderItem]);
+  }, [items, slide, onChange, onNextClick, onPrevClick, renderItem]);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: rootRef,
     className: cn([root, className])

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

@@ -4,7 +4,7 @@ import { IPromoCardData, IPromoCardSettings } from './types';
 type CarouselProps = React.ComponentProps<typeof Carousel>;
 export interface IPromoCards extends IPromoCardSettings {
     /** Список карточек. Минимальное количество 2 карточки */
-    items: IPromoCardData[];
+    items?: IPromoCardData[];
     /** Тема навигации для карусели */
     carouselNavTheme?: CarouselProps['navTheme'];
     /** Цвет градиента для карусели */
@@ -23,6 +23,8 @@ export interface IPromoCards extends IPromoCardSettings {
     };
     /** Ссылка на элемент */
     rootRef?: React.Ref<HTMLDivElement>;
+    /** Дочерние элементы. Минимальное количество 2 элемента */
+    children?: React.ReactNode;
 }
 declare const PromoCards: React.FC<IPromoCards>;
 export default PromoCards;

package/dist/es/components/PromoCards/PromoCards.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.is-array.js";
 import "core-js/modules/es.array.map.js";
 import * as React from 'react';
 import { Carousel } from '@megafon/ui-core';
@@ -25,10 +26,23 @@ var PromoCards = function PromoCards(_ref) {
     dataAttrs = _ref.dataAttrs,
     className = _ref.className,
     classes = _ref.classes,
-    rootRef = _ref.rootRef;
-  if (items.length < MIN_ITEMS_COUNT) {
+    rootRef = _ref.rootRef,
+    children = _ref.children;
+  var itemsLength = (items === null || items === void 0 ? void 0 : items.length) || 0;
+  var childrenLength = Array.isArray(children) ? children.length : 0;
+  if ((childrenLength || itemsLength) < MIN_ITEMS_COUNT) {
     return null;
   }
+  var renderItems = (items || []).map(function (item, i) {
+    return /*#__PURE__*/React.createElement(PromoCard, _extends({}, item, {
+      className: classes === null || classes === void 0 ? void 0 : classes.card,
+      dataAttrs: {
+        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
+      },
+      background: background,
+      key: i + item.title
+    }));
+  });
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className, classes === null || classes === void 0 ? void 0 : classes.root]),
     ref: rootRef
@@ -37,15 +51,6 @@ var PromoCards = function PromoCards(_ref) {
     navTheme: carouselNavTheme,
     gradient: true,
     gradientColor: carouselGradientColor
-  }, items.map(function (item, i) {
-    return /*#__PURE__*/React.createElement(PromoCard, _extends({}, item, {
-      background: background,
-      dataAttrs: {
-        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
-      },
-      className: classes === null || classes === void 0 ? void 0 : classes.card,
-      key: i + item.title
-    }));
-  })));
+  }, childrenLength ? children : renderItems));
 };
 export default PromoCards;

package/dist/es/components/PromoCards/components/PromoCard/PromoCard.d.ts

@@ -2,10 +2,13 @@ import * as React from 'react';
 import { IPromoCardData, IPromoCardSettings } from '../../types';
 import './PromoCard.scss';
 export interface IPromoCard extends IPromoCardData, IPromoCardSettings {
+    /** Дополнительный css класс для корневого элемента */
     className?: string;
+    /** Дополнительные css классы для корневого элемента */
     classes?: {
         root?: string;
     };
+    /** Дополнительные data атрибуты к корневому и внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
         image?: Record<string, string>;

package/dist/es/components/PromoCards/components/PromoCard/PromoCard.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.string.link.js";
 import * as React from 'react';
-import { Button, Header, Paragraph } from '@megafon/ui-core';
+import { Button, Header, Paragraph, PriceBadge, PromoBadge } from '@megafon/ui-core';
 import { cnCreate, convert, filterDataAttrs } from '@megafon/ui-helpers';
 import { setRelAttribute } from "../../../../helpers/setRelAttribute";
 import "./PromoCard.css";
@@ -16,6 +16,10 @@ var PromoCard = function PromoCard(_ref) {
     image = _ref.image,
     logo = _ref.logo,
     badge = _ref.badge,
+    _ref$promoBadge = _ref.promoBadge,
+    promoBadge = _ref$promoBadge === void 0 ? null : _ref$promoBadge,
+    _ref$priceBadge = _ref.priceBadge,
+    priceBadge = _ref$priceBadge === void 0 ? null : _ref$priceBadge,
     className = _ref.className,
     classes = _ref.classes,
     dataAttrs = _ref.dataAttrs,
@@ -28,7 +32,40 @@ var PromoCard = function PromoCard(_ref) {
     linkTarget = _link$target === void 0 ? '_self' : _link$target,
     linkRel = link.rel,
     linkTitle = link.title;
+  var _ref2 = promoBadge || {},
+    promoBadgeText = _ref2.text,
+    promoBadgeColor = _ref2.color;
+  var _ref3 = priceBadge || {},
+    priceBadgeText = _ref3.text,
+    priceBadgeIcon = _ref3.iconType,
+    priceBadgeTheme = _ref3.theme;
   var imageSrcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
+  var hasBadge = !!promoBadgeText || !!priceBadgeText || !!badge;
+  var renderBadge = React.useMemo(function () {
+    switch (true) {
+      case !!promoBadgeText:
+        return /*#__PURE__*/React.createElement(PromoBadge, {
+          className: cn('badge'),
+          dataAttrs: {
+            root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge
+          },
+          color: promoBadgeColor
+        }, promoBadgeText);
+      case !!priceBadgeText:
+        return /*#__PURE__*/React.createElement(PriceBadge, {
+          className: cn('badge'),
+          dataAttrs: {
+            root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge
+          },
+          iconType: priceBadgeIcon,
+          theme: priceBadgeTheme
+        }, priceBadgeText);
+      default:
+        return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge), {
+          className: cn('badge')
+        }), badge);
+    }
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge, promoBadgeText, promoBadgeColor, priceBadgeText, priceBadgeIcon, priceBadgeTheme, badge]);
   return /*#__PURE__*/React.createElement("a", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       background: background
@@ -45,9 +82,7 @@ var PromoCard = function PromoCard(_ref) {
     alt: imageAlt || ''
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('content')
-  }, !!badge && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge), {
-    className: cn('badge')
-  }), badge), !!(logo === null || logo === void 0 ? void 0 : logo.src) && !badge && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.logo), {
+  }, hasBadge && renderBadge, !!(logo === null || logo === void 0 ? void 0 : logo.src) && !hasBadge && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.logo), {
     className: cn('logo')
   }), /*#__PURE__*/React.createElement("img", {
     className: cn('logo-img'),

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

@@ -1,3 +1,5 @@
+import type { IPriceBadgeProps } from '@megafon/ui-core/dist/lib/components/Badges/PriceBadge/PriceBadge';
+import type { IPromoBadgeProps } from '@megafon/ui-core/dist/lib/components/Badges/PromoBadge/PromoBadge';
 type ImageType = {
     src: string;
     src2x?: string;
@@ -13,16 +15,37 @@ type LinkType = {
     target?: '_self' | '_blank';
     rel?: string;
 };
+type PromoBadgeType = {
+    text: string;
+    color: IPromoBadgeProps['color'];
+};
+type PriceBadgeType = {
+    text: string;
+    iconType?: IPriceBadgeProps['iconType'];
+    theme?: IPriceBadgeProps['theme'];
+};
 export interface IPromoCardSettings {
+    /** Фон карточки */
     background?: 'gray' | 'white' | 'shadow';
 }
 export interface IPromoCardData {
+    /** Заголовок карточки */
     title: string;
+    /** Подзаголовок карточки */
     subtitle?: string;
+    /** Параметры для ссылки в карточке */
     link: LinkType;
+    /** Параметры для изображения в карточке */
     image: ImageType;
+    /** Параметры для логотипа в карточке */
     logo?: LogoType;
+    /** Бейдж в карточке */
     badge?: React.ReactElement | null;
+    /** Параметры для отображения компонента PromoBadge в карточке */
+    promoBadge?: PromoBadgeType | null;
+    /** Параметры для отображения компонента PriceBadge в карточке */
+    priceBadge?: PriceBadgeType | null;
+    /** Обработчик клика по карточке */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 }
 export {};

package/dist/es/index.d.ts

@@ -28,6 +28,8 @@ export { default as InfoCard } from './components/InfoCards/components/InfoCard/
 export { default as InfoCards } from './components/InfoCards/InfoCards';
 export { default as Instructions } from './components/Instructions/Instructions';
 export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
+export { default as NumbersBox } from './components/NumbersBox/NumbersBox';
+export { default as NumbersCard } from './components/NumbersBox/components/NumbersCard/NumbersCard';
 export { default as PageTitle } from './components/PageTitle/PageTitle';
 export { default as Partners } from './components/Partners/Partners';
 export { default as PictureBox } from './components/PictureBox/PictureBox';

package/dist/es/index.js

@@ -28,6 +28,8 @@ export { default as InfoCard } from "./components/InfoCards/components/InfoCard/
 export { default as InfoCards } from "./components/InfoCards/InfoCards";
 export { default as Instructions } from "./components/Instructions/Instructions";
 export { default as NotificationBox } from "./components/NotificationBox/NotificationBox";
+export { default as NumbersBox } from "./components/NumbersBox/NumbersBox";
+export { default as NumbersCard } from "./components/NumbersBox/components/NumbersCard/NumbersCard";
 export { default as PageTitle } from "./components/PageTitle/PageTitle";
 export { default as Partners } from "./components/Partners/Partners";
 export { default as PictureBox } from "./components/PictureBox/PictureBox";

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

@@ -1 +1 @@
-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{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/lib/components/BenefitsIcons/types.d.ts

@@ -37,6 +37,8 @@ export declare const BackgroundEnum: {
     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 = {

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

@@ -17,5 +17,7 @@ var BackgroundEnum = exports.BackgroundEnum = {
   TRANSPARENT: 'transparent',
   GRAY: 'gray',
   GREEN: 'green',
-  PURPLE: 'purple'
+  PURPLE: 'purple',
+  WHITE: 'white',
+  STROKE: 'stroke'
 };