@megafon/ui-shared 6.0.0-beta.1 → 6.0.0-beta.2

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import './Card.scss';
-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?: React.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?: React.ReactElement;
     /** Обработчик клика по карточке */
     onClick?: () => void;
 }

package/dist/es/components/Card/Card.js

@@ -45,14 +45,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';
@@ -60,14 +62,18 @@ var Card = function Card(_ref5) {
     if (!image) {
       return null;
     }
+    var _image$position = image.position,
+      position = _image$position === void 0 ? 'top' : _image$position,
+      src = image.src,
+      alt = image.alt;
     return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.imgBox), {
       className: cn('img-box', {
-        position: image.position
+        position: position
       })
     }), /*#__PURE__*/React.createElement("img", {
       className: cn('img'),
-      src: image.src,
-      alt: image.alt
+      src: src,
+      alt: alt
     }));
   };
   var renderIcon = function renderIcon() {
@@ -79,6 +85,18 @@ var Card = function Card(_ref5) {
     }), icon);
   };
   var renderContent = function renderContent() {
+    if (markerList) {
+      return /*#__PURE__*/React.createElement("ul", {
+        className: cn('marker-list')
+      }, markerList.map(function (item, i) {
+        return /*#__PURE__*/React.createElement("li", {
+          className: cn('marker-item'),
+          key: i
+        }, convert(item.title, {}), !!item.note && /*#__PURE__*/React.createElement("span", {
+          className: cn('marker-note')
+        }, convert(item.note, {})));
+      }));
+    }
     if (textsList) {
       return /*#__PURE__*/React.createElement("div", {
         className: cn('texts')
@@ -193,10 +211,12 @@ 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.createElement(Header, {
+  }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, /*#__PURE__*/React.createElement(Header, {
     className: cn('title'),
     as: "h3",
     align: title.align
-  }, title.text), renderContent(), renderFooter());
+  }, title.text), badge), renderContent(), renderFooter());
 };
 export default Card;

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

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

package/dist/es/components/Container/Container.js

@@ -30,6 +30,8 @@ var Container = function Container(_ref) {
     }, [className]),
     ref: rootRef,
     id: id
-  }, /*#__PURE__*/React.createElement(ContentArea, null, children));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/React.createElement(ContentArea, null, children)));
 };
 export default Container;

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { PriceBadge } from '@megafon/ui-core';
 import './ImageBanner.scss';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
@@ -26,11 +25,6 @@ export declare const ImageVerticalAlign: {
     readonly BOTTOM: "bottom";
 };
 export type ImageVerticalAlignType = (typeof ImageVerticalAlign)[keyof typeof ImageVerticalAlign];
-type PriceBadgeTypes = React.ComponentProps<typeof PriceBadge>;
-export type PriceBadgePropsType = Pick<PriceBadgeTypes, 'iconType'> & {
-    /** Текст бейджа */
-    text: string;
-};
 export interface IImageBannerProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -43,22 +37,27 @@ export interface IImageBannerProps {
     classes?: {
         root?: string;
         image?: string;
+        imageSource?: string;
         title?: string;
         description?: string;
         cost?: string;
         badgesContainer?: string;
         badges?: string;
-        badge?: string;
         adBlock?: string;
+        children?: string;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
-    title: string | React.ReactNode | React.ReactNode[];
+    title?: string | React.ReactNode | React.ReactNode[];
     /** Текст-описание */
     description?: string | React.ReactNode | React.ReactNode[];
     /** Строка со стоимостью услуги */
     cost?: string;
+    /** Тег заголовка на разрешении экрана 0-767 */
+    headerLevelMobile?: 'h1' | 'h2';
+    /** Тег заголовка на разрешении экрана 768+ */
+    headerLevel?: 'h1' | 'h2';
     /** Фоновый цвет */
     backgroundColor?: BackgroundColorType;
     /** Радиус границы */
@@ -79,12 +78,11 @@ export interface IImageBannerProps {
     autoHeight?: boolean;
     /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
     isImageFullWidth?: boolean;
-    /** Данные для блока с бейджами */
-    badges?: PriceBadgePropsType[];
-    /** Дополнительный отступ снизу при использовании в баннере */
-    hasBottomOffset?: boolean;
+    /** Бейджи */
+    badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
-    adBlock?: JSX.Element;
+    adBlock?: JSX.Element | null;
+    children?: React.ReactNode;
 }
-declare const ImageBanner: React.FC<React.PropsWithChildren<IImageBannerProps>>;
+declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

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

@@ -1,10 +1,10 @@
 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.concat.js";
-import "core-js/modules/es.array.map.js";
 import * as 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 "./ImageBanner.css";
 export var BackgroundColor = {
@@ -71,32 +71,41 @@ 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);
@@ -106,7 +115,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",
@@ -114,17 +124,18 @@ var ImageBanner = function ImageBanner(_ref2) {
   }, typeof description === 'string' ? convert(description, titleConvertConfig) : description), !!cost && /*#__PURE__*/React.createElement("div", {
     className: cn('cost', [classes.cost])
   }, convert(cost, typographyConfig)), !!children && !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
-    className: cn('children')
+    className: cn('children', [classes.children])
   }, children));
   var renderImage = /*#__PURE__*/React.createElement("picture", {
     className: cn('picture', {
       '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
@@ -136,12 +147,9 @@ 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);
 };
 export default ImageBanner;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import './Card.scss';
-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?: React.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?: React.ReactElement;
     /** Обработчик клика по карточке */
     onClick?: () => void;
 }

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

@@ -54,14 +54,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';
@@ -69,14 +71,18 @@ var Card = function Card(_ref5) {
     if (!image) {
       return null;
     }
+    var _image$position = image.position,
+      position = _image$position === void 0 ? 'top' : _image$position,
+      src = image.src,
+      alt = image.alt;
     return /*#__PURE__*/React.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.createElement("img", {
       className: cn('img'),
-      src: image.src,
-      alt: image.alt
+      src: src,
+      alt: alt
     }));
   };
   var renderIcon = function renderIcon() {
@@ -88,6 +94,18 @@ var Card = function Card(_ref5) {
     }), icon);
   };
   var renderContent = function renderContent() {
+    if (markerList) {
+      return /*#__PURE__*/React.createElement("ul", {
+        className: cn('marker-list')
+      }, markerList.map(function (item, i) {
+        return /*#__PURE__*/React.createElement("li", {
+          className: cn('marker-item'),
+          key: i
+        }, (0, _uiHelpers.convert)(item.title, {}), !!item.note && /*#__PURE__*/React.createElement("span", {
+          className: cn('marker-note')
+        }, (0, _uiHelpers.convert)(item.note, {})));
+      }));
+    }
     if (textsList) {
       return /*#__PURE__*/React.createElement("div", {
         className: cn('texts')
@@ -202,10 +220,12 @@ 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.createElement(_uiCore.Header, {
+  }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, /*#__PURE__*/React.createElement(_uiCore.Header, {
     className: cn('title'),
     as: "h3",
     align: title.align
-  }, title.text), renderContent(), renderFooter());
+  }, title.text), badge), renderContent(), renderFooter());
 };
 var _default = exports["default"] = Card;

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

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

package/dist/lib/components/Container/Container.js

@@ -38,6 +38,8 @@ var Container = function Container(_ref) {
     }, [className]),
     ref: rootRef,
     id: id
-  }, /*#__PURE__*/React.createElement(_uiCore.ContentArea, null, children));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/React.createElement(_uiCore.ContentArea, null, children)));
 };
 var _default = exports["default"] = Container;

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { PriceBadge } from '@megafon/ui-core';
 import './ImageBanner.scss';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
@@ -26,11 +25,6 @@ export declare const ImageVerticalAlign: {
     readonly BOTTOM: "bottom";
 };
 export type ImageVerticalAlignType = (typeof ImageVerticalAlign)[keyof typeof ImageVerticalAlign];
-type PriceBadgeTypes = React.ComponentProps<typeof PriceBadge>;
-export type PriceBadgePropsType = Pick<PriceBadgeTypes, 'iconType'> & {
-    /** Текст бейджа */
-    text: string;
-};
 export interface IImageBannerProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -43,22 +37,27 @@ export interface IImageBannerProps {
     classes?: {
         root?: string;
         image?: string;
+        imageSource?: string;
         title?: string;
         description?: string;
         cost?: string;
         badgesContainer?: string;
         badges?: string;
-        badge?: string;
         adBlock?: string;
+        children?: string;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
-    title: string | React.ReactNode | React.ReactNode[];
+    title?: string | React.ReactNode | React.ReactNode[];
     /** Текст-описание */
     description?: string | React.ReactNode | React.ReactNode[];
     /** Строка со стоимостью услуги */
     cost?: string;
+    /** Тег заголовка на разрешении экрана 0-767 */
+    headerLevelMobile?: 'h1' | 'h2';
+    /** Тег заголовка на разрешении экрана 768+ */
+    headerLevel?: 'h1' | 'h2';
     /** Фоновый цвет */
     backgroundColor?: BackgroundColorType;
     /** Радиус границы */
@@ -79,12 +78,11 @@ export interface IImageBannerProps {
     autoHeight?: boolean;
     /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
     isImageFullWidth?: boolean;
-    /** Данные для блока с бейджами */
-    badges?: PriceBadgePropsType[];
-    /** Дополнительный отступ снизу при использовании в баннере */
-    hasBottomOffset?: boolean;
+    /** Бейджи */
+    badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
-    adBlock?: JSX.Element;
+    adBlock?: JSX.Element | null;
+    children?: React.ReactNode;
 }
-declare const ImageBanner: React.FC<React.PropsWithChildren<IImageBannerProps>>;
+declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

package/dist/lib/components/ImageBanner/ImageBanner.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Radius = exports.NavTheme = exports.ImageVerticalAlign = exports.BackgroundColor = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.symbol.js");
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.array.concat.js");
-require("core-js/modules/es.array.map.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiCore = require("@megafon/ui-core");
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -80,32 +80,41 @@ 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 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isMobile = _React$useState2[0],
+    setIsMobile = _React$useState2[1];
+  React.useEffect(function () {
+    var mediaQuery = window.matchMedia("(max-width: ".concat(_uiHelpers.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(_uiCore.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);
@@ -115,7 +124,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     className: cn('badges-container', [classes.badgesContainer])
   }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
     className: cn('title', [classes.title]),
-    color: "inherit"
+    color: "inherit",
+    as: isMobile ? headerLevelMobile : headerLevel
   }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(_uiCore.Header, {
     className: cn('description', [classes.description]),
     as: "h5",
@@ -123,17 +133,18 @@ var ImageBanner = function ImageBanner(_ref2) {
   }, typeof description === 'string' ? (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig) : description), !!cost && /*#__PURE__*/React.createElement("div", {
     className: cn('cost', [classes.cost])
   }, (0, _uiHelpers.convert)(cost, typographyConfig)), !!children && !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
-    className: cn('children')
+    className: cn('children', [classes.children])
   }, children));
   var renderImage = /*#__PURE__*/React.createElement("picture", {
     className: cn('picture', {
       'v-align': imageVerticalAlign
     })
   }, /*#__PURE__*/React.createElement("source", {
+    className: classes.imageSource,
     media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
     srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
   }), /*#__PURE__*/React.createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.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
@@ -145,12 +156,9 @@ 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);
 };
 var _default = exports["default"] = ImageBanner;