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

package/dist/lib/components/ImageBanner/ImageBanner.css

@@ -1,248 +1 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.mfui-image-banner {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  overflow: hidden;
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: row;
-            flex-direction: row;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    height: 420px;
-  }
-}
-.mfui-image-banner__picture {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  max-width: 672px;
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner__picture {
-    width: 50%;
-    height: 100%;
-  }
-}
-.mfui-image-banner__picture_v-align_top {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-}
-.mfui-image-banner__picture_v-align_center {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-.mfui-image-banner__picture_v-align_bottom {
-  -webkit-box-align: end;
-      -ms-flex-align: end;
-          align-items: flex-end;
-}
-.mfui-image-banner__image {
-  display: block;
-  max-width: 100%;
-  max-height: 150px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-image-banner__image {
-    max-height: 230px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner__image {
-    max-height: 100%;
-    -o-object-fit: contain;
-       object-fit: contain;
-  }
-}
-.mfui-image-banner__content {
-  z-index: 1;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-@media screen and (max-width: 1023px) {
-  .mfui-image-banner__content {
-    padding: 24px;
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-image-banner__content {
-    text-align: center;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner__content {
-    width: 50%;
-    padding: 0 80px;
-  }
-}
-.mfui-image-banner__description {
-  margin-top: 16px;
-  white-space: pre-wrap;
-}
-.mfui-image-banner__cost {
-  font-size: 15px;
-  line-height: 24px;
-  font-weight: 500;
-  margin-top: 16px;
-}
-.mfui-image-banner__value {
-  display: inline;
-  margin: 0 4px;
-}
-@media screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-image-banner__value {
-    line-height: 21px;
-  }
-}
-.mfui-image-banner__title,
-.mfui-image-banner__text {
-  white-space: pre-wrap;
-}
-.mfui-image-banner__children {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  gap: 16px;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  margin-top: 32px;
-}
-@media screen and (min-width: 768px) {
-  .mfui-image-banner__children {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: row;
-            flex-direction: row;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner__children {
-    -webkit-box-pack: start;
-        -ms-flex-pack: start;
-            justify-content: flex-start;
-  }
-}
-@media screen and (max-width: 1023px) {
-  .mfui-image-banner__badges-container {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    gap: 8px;
-  }
-}
-.mfui-image-banner__badges {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-.mfui-image-banner__ad-block {
-  margin: 0 0 16px auto;
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner__ad-block {
-    position: absolute;
-    top: 24px;
-    right: 24px;
-  }
-}
-.mfui-image-banner_radius_rounded {
-  border-radius: 24px;
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner_auto-height .mfui-image-banner__content {
-    padding: 48px 80px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner_auto-height {
-    height: auto;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner_has-image .mfui-image-banner__content {
-    padding-right: 0;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner_full-width .mfui-image-banner__image {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    display: block;
-    max-width: unset;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__image {
-    width: 100%;
-    height: 100%;
-    -o-object-fit: cover;
-       object-fit: cover;
-  }
-}
-.mfui-image-banner_background-color_green {
-  background-color: var(--brandGreen);
-}
-.mfui-image-banner_background-color_purple {
-  background-color: var(--brandPurple);
-}
-.mfui-image-banner_background-color_gradient {
-  background: -webkit-gradient(linear, right top, left top, from(#ADA6BA), to(#F6F2F9));
-  background: linear-gradient(270deg, #ADA6BA 0%, #F6F2F9 100%);
-}
-.mfui-image-banner_background-color_light {
-  background-color: #F6F2F9;
-}
-.mfui-image-banner_background-color_spbSky0 {
-  background-color: var(--spbSky0);
-}
-.mfui-image-banner_text-color_light .mfui-image-banner__content {
-  color: var(--stcWhite);
-}
-.mfui-image-banner_text-color_dark .mfui-image-banner__content {
-  color: var(--stcBlack);
-}
+h1,h2,h3,h4,h5{margin:0}.mfui-image-banner{overflow:hidden;position:relative}@media screen and (min-width:1024px){.mfui-image-banner{height:420px;padding:0 80px}.mfui-image-banner__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;height:100%;justify-content:space-between}}.mfui-image-banner__picture{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:1024px){.mfui-image-banner__picture{height:100%;width:356px}}@media screen and (min-width:1280px){.mfui-image-banner__picture{width:408px}}.mfui-image-banner__picture_v-align_top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-image-banner__picture_v-align_center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-image-banner__picture_v-align_bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-image-banner__background-image{display:block;max-height:250px;max-width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__background-image{max-height:280px}}@media screen and (min-width:1024px){.mfui-image-banner__background-image{max-height:100%;-o-object-fit:contain;object-fit:contain}}.mfui-image-banner__content{z-index:1}@media screen and (max-width:1023px){.mfui-image-banner__content{padding:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__content{text-align:center}}@media screen and (max-width:1023px){.mfui-image-banner_bottom-offset .mfui-image-banner__content{padding-bottom:72px}}.mfui-image-banner__description{margin-top:16px;white-space:pre-wrap}.mfui-image-banner__cost{font-size:15px;font-weight:500;line-height:24px;margin-top:16px}.mfui-image-banner__value{display:inline;margin:0 4px}@media screen and (max-width:1023px),screen and (min-width:1024px) and (max-width:1279px){.mfui-image-banner__value{line-height:21px}}.mfui-image-banner__text,.mfui-image-banner__title{white-space:pre-wrap}.mfui-image-banner__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}@media screen and (min-width:768px){.mfui-image-banner__children{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}@media screen and (min-width:1024px){.mfui-image-banner__children{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}}@media screen and (max-width:1023px){.mfui-image-banner__badges-container{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}}.mfui-image-banner__badges{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;margin-bottom:16px}.mfui-image-banner__ad-block{margin:0 0 16px auto}@media screen and (min-width:1024px){.mfui-image-banner__ad-block{position:absolute;right:24px;top:24px}}.mfui-image-banner_radius_rounded{border-radius:24px}@media screen and (min-width:1024px){.mfui-image-banner_auto-height .mfui-image-banner__content{padding:48px 0}.mfui-image-banner_auto-height{height:auto}.mfui-image-banner_full-width .mfui-image-banner__background-image{bottom:0;display:block;max-width:unset;position:absolute;right:0}.mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__background-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}}.mfui-image-banner_background-color_green{background-color:var(--brandGreen)}.mfui-image-banner_background-color_purple{background-color:var(--brandPurple)}.mfui-image-banner_background-color_gradient{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-image-banner_background-color_light{background-color:#f6f2f9}.mfui-image-banner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-image-banner_text-color_light .mfui-image-banner__content{color:var(--stcWhite)}.mfui-image-banner_text-color_dark .mfui-image-banner__content{color:var(--stcBlack)}

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

@@ -1,5 +1,6 @@
-import React, { Ref } from 'react';
-import './ImageBanner.less';
+import * as React from 'react';
+import { PriceBadge } from '@megafon/ui-core';
+import './ImageBanner.scss';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
     readonly GREEN: "green";
@@ -8,23 +9,28 @@ export declare const BackgroundColor: {
     readonly GRADIENT: "gradient";
     readonly LIGHT: "light";
 };
-export declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
+export type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
 export declare const Radius: {
     readonly CORNERS: "corners";
     readonly ROUNDED: "rounded";
 };
-export declare type RadiusType = typeof Radius[keyof typeof Radius];
+export type RadiusType = (typeof Radius)[keyof typeof Radius];
 export declare const NavTheme: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
 };
-export declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
+export type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
 export declare const ImageVerticalAlign: {
     readonly TOP: "top";
     readonly CENTER: "center";
     readonly BOTTOM: "bottom";
 };
-export declare type ImageVerticalAlignType = typeof ImageVerticalAlign[keyof typeof ImageVerticalAlign];
+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?: {
@@ -37,26 +43,22 @@ export interface IImageBannerProps {
     classes?: {
         root?: string;
         image?: string;
-        imageSource?: string;
         title?: string;
         description?: string;
         cost?: string;
         badgesContainer?: string;
         badges?: string;
+        badge?: string;
         adBlock?: string;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: Ref<HTMLDivElement>;
+    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;
     /** Радиус границы */
@@ -77,10 +79,12 @@ export interface IImageBannerProps {
     autoHeight?: boolean;
     /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
     isImageFullWidth?: boolean;
-    /** Бейджи */
-    badges?: JSX.Element[] | JSX.Element;
+    /** Данные для блока с бейджами */
+    badges?: PriceBadgePropsType[];
+    /** Дополнительный отступ снизу при использовании в баннере */
+    hasBottomOffset?: boolean;
     /** Элемент блока с рекламой */
-    adBlock?: JSX.Element | null;
+    adBlock?: JSX.Element;
 }
-declare const ImageBanner: React.FC<IImageBannerProps>;
+declare const ImageBanner: React.FC<React.PropsWithChildren<IImageBannerProps>>;
 export default ImageBanner;

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

@@ -1,39 +1,22 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ImageVerticalAlign = exports.NavTheme = exports.Radius = exports.BackgroundColor = void 0;
-
+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.object.values.js");
-
-var _react = _interopRequireDefault(require("react"));
-
+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");
-
-var PropTypes = _interopRequireWildcard(require("prop-types"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var BackgroundColor = {
+var BackgroundColor = exports.BackgroundColor = {
   TRANSPARENT: 'transparent',
   GREEN: 'green',
   PURPLE: 'purple',
@@ -41,41 +24,34 @@ var BackgroundColor = {
   GRADIENT: 'gradient',
   LIGHT: 'light'
 };
-exports.BackgroundColor = BackgroundColor;
-var Radius = {
+var Radius = exports.Radius = {
   CORNERS: 'corners',
   ROUNDED: 'rounded'
 };
-exports.Radius = Radius;
-var NavTheme = {
+var NavTheme = exports.NavTheme = {
   LIGHT: 'light',
   DARK: 'dark'
 };
-exports.NavTheme = NavTheme;
-var ImageVerticalAlign = {
+var ImageVerticalAlign = exports.ImageVerticalAlign = {
   TOP: 'top',
   CENTER: 'center',
   BOTTOM: 'bottom'
 };
-exports.ImageVerticalAlign = ImageVerticalAlign;
-
 var getTheme = function getTheme(backgrounColor) {
   switch (backgrounColor) {
     case BackgroundColor.GREEN:
     case BackgroundColor.PURPLE:
       return NavTheme.LIGHT;
-
     default:
       return NavTheme.DARK;
   }
 };
-
 var cn = (0, _uiHelpers.cnCreate)('mfui-image-banner');
 var typographyConfig = {
   b: {
     component: function component(_ref) {
       var children = _ref.children;
-      return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+      return /*#__PURE__*/React.createElement(_uiCore.Header, {
         className: cn('value'),
         as: "h3",
         color: "inherit"
@@ -83,158 +59,98 @@ var typographyConfig = {
     }
   }
 };
-
 var ImageBanner = function ImageBanner(_ref2) {
   var dataAttrs = _ref2.dataAttrs,
-      className = _ref2.className,
-      _ref2$classes = _ref2.classes,
-      classes = _ref2$classes === void 0 ? {} : _ref2$classes,
-      rootRef = _ref2.rootRef,
-      _ref2$imageMobile = _ref2.imageMobile,
-      imageMobile = _ref2$imageMobile === void 0 ? '' : _ref2$imageMobile,
-      _ref2$imageMobile2x = _ref2.imageMobile2x,
-      imageMobile2x = _ref2$imageMobile2x === void 0 ? '' : _ref2$imageMobile2x,
-      _ref2$imageDesktop = _ref2.imageDesktop,
-      imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
-      _ref2$imageDesktop2x = _ref2.imageDesktop2x,
-      imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
-      _ref2$imageAlt = _ref2.imageAlt,
-      imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
-      _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
-      imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
-      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,
-      badges = _ref2.badges,
-      adBlock = _ref2.adBlock,
-      _ref2$children = _ref2.children,
-      children = _ref2$children === void 0 ? [] : _ref2$children;
-
-  var _React$useState = _react["default"].useState(false),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      isMobile = _React$useState2[0],
-      setIsMobile = _React$useState2[1];
-
-  _react["default"].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);
-    };
-  }, []);
-
+    className = _ref2.className,
+    _ref2$classes = _ref2.classes,
+    classes = _ref2$classes === void 0 ? {} : _ref2$classes,
+    rootRef = _ref2.rootRef,
+    _ref2$imageMobile = _ref2.imageMobile,
+    imageMobile = _ref2$imageMobile === void 0 ? '' : _ref2$imageMobile,
+    _ref2$imageMobile2x = _ref2.imageMobile2x,
+    imageMobile2x = _ref2$imageMobile2x === void 0 ? '' : _ref2$imageMobile2x,
+    _ref2$imageDesktop = _ref2.imageDesktop,
+    imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
+    _ref2$imageDesktop2x = _ref2.imageDesktop2x,
+    imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
+    _ref2$imageAlt = _ref2.imageAlt,
+    imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
+    _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
+    imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
+    title = _ref2.title,
+    description = _ref2.description,
+    cost = _ref2.cost,
+    _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,
+    adBlock = _ref2.adBlock,
+    _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? [] : _ref2$children;
   var navTheme = getTheme(backgroundColor);
   var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
-
-  var renderBadges = !!badges && /*#__PURE__*/_react["default"].createElement("div", {
+  var renderBadges = !!badges.length && /*#__PURE__*/React.createElement("div", {
     className: cn('badges', [classes.badges])
-  }, badges);
-
-  var renderAdBlock = !!adBlock && /*#__PURE__*/_react["default"].createElement("div", {
+  }, 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);
+  }));
+  var renderAdBlock = !!adBlock && /*#__PURE__*/React.createElement("div", {
     className: cn('ad-block', [classes.adBlock])
   }, adBlock);
-
-  var renderContent = /*#__PURE__*/_react["default"].createElement("div", {
+  var renderContent = /*#__PURE__*/React.createElement("div", {
     className: cn('content')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: cn('badges-container', [classes.badgesContainer])
-  }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+  }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
     className: cn('title', [classes.title]),
-    color: "inherit",
-    as: isMobile ? headerLevelMobile : headerLevel
-  }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+    color: "inherit"
+  }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(_uiCore.Header, {
     className: cn('description', [classes.description]),
     as: "h5",
     color: "inherit"
-  }, typeof description === 'string' ? (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig) : description), !!cost && /*#__PURE__*/_react["default"].createElement("div", {
+  }, 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["default"].Children.count(children) && /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _uiHelpers.convert)(cost, typographyConfig)), !!children && !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
     className: cn('children')
   }, children));
-
-  var renderImage = /*#__PURE__*/_react["default"].createElement("picture", {
+  var renderImage = /*#__PURE__*/React.createElement("picture", {
     className: cn('picture', {
       'v-align': imageVerticalAlign
     })
-  }, /*#__PURE__*/_react["default"].createElement("source", {
-    className: classes.imageSource,
+  }, /*#__PURE__*/React.createElement("source", {
     media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
     srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
-  }), /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
-    className: cn('image', [classes.image]),
+  }), /*#__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]),
     src: imageMobile || imageMobile2x,
     srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
     alt: imageAlt
   })));
-
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'background-color': backgroundColor,
       'text-color': navTheme,
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
+      'bottom-offset': hasBottomOffset && !hasImage,
       radius: radius
     }, [className, classes.root]),
     ref: rootRef
-  }), renderContent, hasImage && renderImage);
-};
-
-ImageBanner.propTypes = {
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    image: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-    image: PropTypes.string,
-    imageSource: PropTypes.string,
-    title: PropTypes.string,
-    description: PropTypes.string,
-    cost: PropTypes.string,
-    badgesContainer: PropTypes.string,
-    badges: PropTypes.string,
-    badge: PropTypes.string,
-    adBlock: PropTypes.string
-  }),
-  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)]),
-  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,
-  imageMobile2x: PropTypes.string,
-  imageDesktop: PropTypes.string,
-  imageDesktop2x: PropTypes.string,
-  imageAlt: PropTypes.string,
-  imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
-  autoHeight: PropTypes.bool,
-  isImageFullWidth: PropTypes.bool,
-  badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
-  adBlock: PropTypes.element
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, renderContent, hasImage && renderImage));
 };
-var _default = ImageBanner;
-exports["default"] = _default;
+var _default = exports["default"] = ImageBanner;