@megafon/ui-shared 8.1.0 → 8.2.0

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

@@ -50,6 +50,15 @@ export type InstructionItemType = {
     /** Текст для плашки с изображением QR-кода */
     qrCodeText?: string | React.ReactNode | React.ReactNode[];
 };
+export type ButtonType = {
+    title: string;
+    type?: 'primary' | 'outline';
+    icon?: React.JSX.Element;
+    href?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    rel?: string;
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
 export interface IInstructionsProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -60,6 +69,7 @@ export interface IInstructionsProps {
         wrapper?: Record<string, string>;
         arrowPrev?: Record<string, string>;
         arrowNext?: Record<string, string>;
+        button?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
@@ -75,11 +85,14 @@ export interface IInstructionsProps {
         additionalText?: string;
         arrowPrev?: string;
         arrowNext?: string;
+        button?: string;
     };
     /** Заголовок инструкции */
     title?: string;
     /** Пункты инструкции */
     instructionItems: InstructionItemType[];
+    /** Отступ между пунктами инструкции. DEPRECATED: 'large'  */
+    itemsGap?: 'medium' | 'large';
     /** Описание после инструкции */
     additionalText?: string;
     /** Расположение изображения по горизонтали */
@@ -98,6 +111,8 @@ export interface IInstructionsProps {
     elementOrder?: ElementOrderType;
     /** Показать нумерацию пунктов инструкции на мобильных устройствах */
     showMobileNumeration?: boolean;
+    /** Кнопка */
+    button?: ButtonType;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
 }

package/dist/es/components/Instructions/Instructions.js

@@ -4,8 +4,9 @@ import "core-js/modules/es.array.map.js";
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import * as React from 'react';
-import { Grid, GridColumn, Header, NavArrow, Paragraph, Tile } from '@megafon/ui-core';
+import { Button, Grid, GridColumn, Header, NavArrow, Paragraph, Tile } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs, titleConvertConfig, convert, textConvertConfig } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../helpers/setRelAttribute";
 import "./Instructions.css";
 var Swiper = null;
 var SwiperSlide = null;
@@ -69,9 +70,11 @@ var Instructions = function Instructions(_ref) {
     additionalText = _ref$classes2.additionalText,
     arrowPrev = _ref$classes2.arrowPrev,
     arrowNext = _ref$classes2.arrowNext,
+    buttonClass = _ref$classes2.button,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
     instructionItems = _ref.instructionItems,
+    itemsGap = _ref.itemsGap,
     _ref$pictureAlign = _ref.pictureAlign,
     pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
     _ref$pictureVerticalA = _ref.pictureVerticalAlign,
@@ -87,6 +90,7 @@ var Instructions = function Instructions(_ref) {
     _ref$elementOrder = _ref.elementOrder,
     elementOrder = _ref$elementOrder === void 0 ? 'default' : _ref$elementOrder,
     showMobileNumeration = _ref.showMobileNumeration,
+    button = _ref.button,
     children = _ref.children;
   var _React$useState = React.useState(),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -96,6 +100,7 @@ var Instructions = function Instructions(_ref) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     slideIndex = _React$useState4[0],
     setSlideIndex = _React$useState4[1];
+  var showButton = button === null || button === void 0 ? void 0 : button.title;
   var isMobileReversed = elementOrder === 'reversed';
   var getSwiperInstance = React.useCallback(function (swiper) {
     setSwiperInstance(swiper);
@@ -304,10 +309,34 @@ var Instructions = function Instructions(_ref) {
       onClick: handleNextClick
     }));
   }, [handlePrevClick, handleNextClick, arrowsTheme, arrowPrev, arrowNext, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext, slideIndex, instructionItems.length]);
+  var renderButton = React.useCallback(function () {
+    var _ref7 = button || {},
+      buttonTitle = _ref7.title,
+      type = _ref7.type,
+      icon = _ref7.icon,
+      href = _ref7.href,
+      target = _ref7.target,
+      rel = _ref7.rel,
+      onClick = _ref7.onClick;
+    return /*#__PURE__*/React.createElement(Button, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      className: cn('button', [buttonClass]),
+      type: type,
+      theme: "green",
+      icon: icon,
+      href: href,
+      target: target,
+      rel: setRelAttribute(rel, target),
+      onClick: onClick
+    }, buttonTitle);
+  }, [button, buttonClass, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       mask: pictureMask,
-      reversed: isMobileReversed
+      reversed: isMobileReversed,
+      'items-gap': itemsGap
     }),
     ref: rootRef
   }), /*#__PURE__*/React.createElement(Grid, {
@@ -328,6 +357,6 @@ var Instructions = function Instructions(_ref) {
     className: cn('articles', {
       align: pictureAlign
     })
-  }, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
+  }, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), showButton && renderButton(), children)))));
 };
 export default Instructions;

package/dist/es/components/PictureBox/PictureBox.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-picture-box_mask_none .mfui-picture-box__image{border-radius:24px;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:414px;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width:1280px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:520px}}.mfui-picture-box_mask_mac-book .mfui-picture-box__image{border-top-left-radius:1.4% 2.2988505747%;border-top-right-radius:1.4% 2.2988505747%;height:87%;left:0;margin:0 auto;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:2%;width:82%}.mfui-picture-box__content{-ms-flex-item-align:center;align-self:center;margin-top:32px}@media screen and (min-width:1024px){.mfui-picture-box__content{margin-top:0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:44px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:44px}}.mfui-picture-box__button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px;margin-top:32px}.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(i/mac-book-1x.png);background-repeat:no-repeat;background-size:100% auto;padding-bottom:60.9%;position:relative}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-device-pixel-ratio:2),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx){.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(i/mac-book-2x.png)}}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import './PictureBox.scss';
+type ImageType = {
+    src: string;
+    src2x?: string;
+    align?: 'right' | 'left';
+    alt?: string;
+};
+type ButtonType = {
+    title?: string;
+    href?: string;
+    target?: '_self' | '_blank';
+    rel?: string;
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export interface IPictureBoxProps {
+    /** Изображение */
+    image: ImageType;
+    /** Кнопка */
+    button?: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Маска */
+    pictureMask?: 'mac-book' | 'none';
+    /** Дочерние элементы */
+    children: React.ReactNode;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Дополнительный класс корневого элемента */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+        image?: Record<string, string>;
+        mask?: Record<string, string>;
+        buttonsWrapper?: Record<string, string>;
+    };
+}
+declare const PictureBox: React.FC<IPictureBoxProps>;
+export default PictureBox;

package/dist/es/components/PictureBox/PictureBox.js

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import * as React from 'react';
+import { Button, Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./PictureBox.css";
+var cn = cnCreate('mfui-picture-box');
+var PictureBox = function PictureBox(_ref) {
+  var image = _ref.image,
+    button = _ref.button,
+    extraButton = _ref.extraButton,
+    _ref$pictureMask = _ref.pictureMask,
+    pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
+    dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    classes = _ref.classes,
+    rootRef = _ref.rootRef,
+    children = _ref.children;
+  var imageSrc = image.src,
+    imageSrc2x = image.src2x,
+    _image$align = image.align,
+    imageAlign = _image$align === void 0 ? 'left' : _image$align,
+    _image$alt = image.alt,
+    imageAlt = _image$alt === void 0 ? '' : _image$alt;
+  var imageOrder = imageAlign === 'left' ? '0' : '1';
+  var renderImg = function renderImg() {
+    var srcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
+    var img = /*#__PURE__*/React.createElement("img", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
+      className: cn('image'),
+      srcSet: srcSet,
+      src: imageSrc,
+      alt: imageAlt
+    }));
+    if (pictureMask !== 'none') {
+      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mask), {
+        className: cn('mask')
+      }), img);
+    }
+    return img;
+  };
+  var renderButtons = function renderButtons() {
+    if (!button && !extraButton) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.buttonsWrapper), {
+      className: cn('button-wrapper')
+    }), !!button && /*#__PURE__*/React.createElement(Button, {
+      href: button.href,
+      target: button.target,
+      rel: button.rel,
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.button
+      },
+      onClick: button.onClick
+    }, button.title), !!extraButton && /*#__PURE__*/React.createElement(Button, {
+      href: extraButton.href,
+      target: extraButton.target,
+      rel: extraButton.rel,
+      type: "outline",
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
+      },
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.extraButton
+      },
+      onClick: extraButton.onClick
+    }, extraButton.title));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      align: imageAlign,
+      mask: pictureMask
+    }, [classes === null || classes === void 0 ? void 0 : classes.root, className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Grid, {
+    guttersLeft: "medium"
+  }, /*#__PURE__*/React.createElement(GridColumn, {
+    all: "7",
+    tablet: "12",
+    mobile: "12",
+    orderWide: imageOrder,
+    orderDesktop: imageOrder
+  }, renderImg()), /*#__PURE__*/React.createElement(GridColumn, {
+    all: "5",
+    tablet: "12",
+    mobile: "12",
+    flex: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, children, renderButtons()))));
+};
+export default PictureBox;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Banner } from '@megafon/ui-core';
+export type PromoBannerPropsType = Omit<React.ComponentProps<typeof Banner>, 'autoHeight' | 'arrowTheme'>;
+declare const PromoBanner: React.FC<PromoBannerPropsType>;
+export default PromoBanner;

package/dist/es/components/PromoBanner/PromoBanner.js

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

package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-promo-banner-slide{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:24px;-ms-flex-direction:column;flex-direction:column;min-height:100%;overflow:hidden}.mfui-promo-banner-slide_background_dark-violet{background-image:-webkit-gradient(linear,right top,left top,from(#ada6ba),color-stop(108%,#f6f2f9));background-image:linear-gradient(270deg,#ada6ba,#f6f2f9 108%)}.mfui-promo-banner-slide_background_light-violet{background:#f6f2f9}.mfui-promo-banner-slide__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;gap:24px;padding:32px 20px 12px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__container{padding:38px 40px}}@media screen and (min-width:768px){.mfui-promo-banner-slide__container{gap:32px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:308px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__container{padding:34px 64px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__container{padding:42px 80px}}.mfui-promo-banner-slide__content{color:var(--stcBlack)}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__content{max-width:350px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__content{max-width:450px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__content{max-width:645px}}.mfui-promo-banner-slide__title{margin-bottom:12px}@media screen and (min-width:1280px){.mfui-promo-banner-slide__description{margin-right:82px}}.mfui-promo-banner-slide__buttons-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}@media screen and (min-width:768px){.mfui-promo-banner-slide__buttons-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.mfui-promo-banner-slide__picture{display:block;height:150px;position:relative;z-index:0}@media screen and (min-width:768px){.mfui-promo-banner-slide__picture{height:100%;position:absolute;top:0}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__picture{left:404px;width:523px}}@media screen and (min-width:1024px){.mfui-promo-banner-slide__picture{width:696px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__picture{left:534px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__picture{left:744px}}.mfui-promo-banner-slide__image{height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-promo-banner-slide__image{-o-object-fit:contain;object-fit:contain}}

package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import './PromoBannerSlide.scss';
+type ButtonType = {
+    /** Заголовок */
+    title?: string;
+    /** Ссылка */
+    href?: string;
+    /** Target - свойство тега <a> */
+    target?: '_self' | '_blank';
+    /** Rel - атрибут тега <a> */
+    rel?: string;
+    /** Обработчик клика по кнопке */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+type ImageType = {
+    /** Изображение на разрешении экрана 1024+ */
+    desktopSrc: string;
+    /** Изображение 2x на разрешении экрана 1024+ */
+    desktopSrc2x?: string;
+    /** Изображение на разрешении экрана 768-1023 */
+    tabletSrc: string;
+    /** Изображение 2x на разрешении экрана 768-1023 */
+    tabletSrc2x?: string;
+    /** Изображение на разрешении экрана 0-767 */
+    mobileSrc: string;
+    /** Изображение 2x на разрешении экрана 0-767 */
+    mobileSrc2x?: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+};
+export interface IPromoBannerSlideProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Заголовок */
+    title: string | React.ReactNode | React.ReactNode[];
+    /** Текст-описание */
+    description: string | React.ReactNode | React.ReactNode[];
+    /** Кнопка */
+    button?: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Изображение */
+    image: ImageType;
+    /** Фон */
+    background?: 'light-violet' | 'dark-violet';
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        image?: Record<string, string>;
+        desktopImageSource?: Record<string, string>;
+        tabletImageSource?: Record<string, string>;
+        buttonsWrapper?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const PromoBannerSlide: React.FC<IPromoBannerSlideProps>;
+export default PromoBannerSlide;

package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.js

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.array.concat.js";
+import * as React from 'react';
+import { Button, Header, Paragraph } from '@megafon/ui-core';
+import { cnCreate, convert, filterDataAttrs, breakpoints, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
+import "./PromoBannerSlide.css";
+var cn = cnCreate('mfui-promo-banner-slide');
+var PromoBannerSlide = function PromoBannerSlide(_ref) {
+  var className = _ref.className,
+    title = _ref.title,
+    description = _ref.description,
+    button = _ref.button,
+    extraButton = _ref.extraButton,
+    image = _ref.image,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'dark-violet' : _ref$background,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
+  var renderButtons = function renderButtons() {
+    if (!button && !extraButton) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: cn('buttons-wrapper')
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.buttonsWrapper)), !!button && /*#__PURE__*/React.createElement(Button, {
+      href: button.href,
+      target: button.target,
+      rel: button.rel,
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.button
+      },
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      onClick: button.onClick
+    }, button.title), !!extraButton && /*#__PURE__*/React.createElement(Button, {
+      href: extraButton.href,
+      target: extraButton.target,
+      rel: extraButton.rel,
+      type: "outline",
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.extraButton
+      },
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
+      },
+      onClick: extraButton.onClick
+    }, extraButton.title));
+  };
+  var renderImage = function renderImage() {
+    var desktopSrc = image.desktopSrc,
+      desktopSrc2x = image.desktopSrc2x,
+      tabletSrc = image.tabletSrc,
+      tabletSrc2x = image.tabletSrc2x,
+      mobileSrc = image.mobileSrc,
+      mobileSrc2x = image.mobileSrc2x,
+      alt = image.alt;
+    var desktopSrcSet = desktopSrc2x ? "".concat(desktopSrc, ", ").concat(desktopSrc2x, " 2x") : desktopSrc;
+    var tabletSrcSet = tabletSrc2x ? "".concat(tabletSrc, ", ").concat(tabletSrc2x, " 2x") : tabletSrc;
+    var mobileSrcSet = mobileSrc2x ? "".concat(mobileSrc, ", ").concat(mobileSrc2x, " 2x") : mobileSrc;
+    return /*#__PURE__*/React.createElement("picture", {
+      className: cn('picture')
+    }, /*#__PURE__*/React.createElement("source", _extends({
+      media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
+      srcSet: desktopSrcSet
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.desktopImageSource))), /*#__PURE__*/React.createElement("source", _extends({
+      media: "(min-width: ".concat(breakpoints.MOBILE_BIG_START, "px)"),
+      srcSet: tabletSrcSet
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tabletImageSource))), /*#__PURE__*/React.createElement("img", _extends({
+      className: cn('image'),
+      src: mobileSrc,
+      srcSet: mobileSrcSet,
+      alt: alt || ''
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image))));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      background: background
+    }, [classes === null || classes === void 0 ? void 0 : classes.root, className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: cn('title'),
+    as: "h2",
+    color: "inherit"
+  }, typeof title === 'string' ? convert(title, titleConvertConfig) : title), /*#__PURE__*/React.createElement(Paragraph, {
+    className: cn('description'),
+    hasMargin: false,
+    color: "inherit"
+  }, typeof description === 'string' ? convert(description, textConvertConfig) : description)), renderButtons()), renderImage());
+};
+export default PromoBannerSlide;

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

@@ -43,7 +43,7 @@ var PromoCards = function PromoCards(_ref) {
       dataAttrs: {
         root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
       },
-      className: cn([classes === null || classes === void 0 ? void 0 : classes.card]),
+      className: classes === null || classes === void 0 ? void 0 : classes.card,
       key: i + item.title
     }));
   })));

package/dist/es/components/Stepper/StepperItem.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(i/separator.png) 2 repeat;border-image:url(i/separator.png) 2 repeat;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 24px);min-height:2px;position:absolute;top:19px;width:calc(100% - 36px)}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto;right:0}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(i/separator-vertical.png) 2 repeat;border-image:url(i/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}
+h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 24px);min-height:2px;position:absolute;top:19px;width:calc(100% - 36px)}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto;right:0}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(img/separator-vertical.png) 2 repeat;border-image:url(img/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}

package/dist/es/index.d.ts

@@ -30,7 +30,10 @@ export { default as Instructions } from './components/Instructions/Instructions'
 export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
 export { default as PageTitle } from './components/PageTitle/PageTitle';
 export { default as Partners } from './components/Partners/Partners';
+export { default as PictureBox } from './components/PictureBox/PictureBox';
 export { default as PictureWithDescription } from './components/PictureWithDescription/PictureWithDescription';
+export { default as PromoBanner } from './components/PromoBanner/PromoBanner';
+export { default as PromoBannerSlide } from './components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide';
 export { default as PromoCard } from './components/PromoCards/components/PromoCard/PromoCard';
 export { default as PromoCards } from './components/PromoCards/PromoCards';
 export { default as Property } from './components/Property/Property';

package/dist/es/index.js

@@ -30,7 +30,10 @@ export { default as Instructions } from "./components/Instructions/Instructions"
 export { default as NotificationBox } from "./components/NotificationBox/NotificationBox";
 export { default as PageTitle } from "./components/PageTitle/PageTitle";
 export { default as Partners } from "./components/Partners/Partners";
+export { default as PictureBox } from "./components/PictureBox/PictureBox";
 export { default as PictureWithDescription } from "./components/PictureWithDescription/PictureWithDescription";
+export { default as PromoBanner } from "./components/PromoBanner/PromoBanner";
+export { default as PromoBannerSlide } from "./components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide";
 export { default as PromoCard } from "./components/PromoCards/components/PromoCard/PromoCard";
 export { default as PromoCards } from "./components/PromoCards/PromoCards";
 export { default as Property } from "./components/Property/Property";