@megafon/ui-shared 6.0.0-beta.3 → 6.0.0

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

@@ -1 +1,252 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-image-banner{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-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}@media screen and (min-width:1024px){.mfui-image-banner__picture{height:100%;max-width:672px;width:50%}}.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-height:150px;max-width:100%}@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{padding:0 80px;width:50%}}.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-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}@media screen and (max-width:767px){.mfui-image-banner__children{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}@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 80px}.mfui-image-banner_auto-height{height:auto}.mfui-image-banner_has-image .mfui-image-banner__content{padding-right:0}.mfui-image-banner_full-width .mfui-image-banner__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__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)}
+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;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-image-banner__picture {
+    width: 50%;
+    max-width: 672px;
+    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-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-image-banner__children {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+}
+@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);
+}

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './ImageBanner.scss';
+import React, { Ref } from 'react';
+import './ImageBanner.less';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
     readonly GREEN: "green";
@@ -8,23 +8,23 @@ export declare const BackgroundColor: {
     readonly GRADIENT: "gradient";
     readonly LIGHT: "light";
 };
-export type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
+export declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
 export declare const Radius: {
     readonly CORNERS: "corners";
     readonly ROUNDED: "rounded";
 };
-export type RadiusType = (typeof Radius)[keyof typeof Radius];
+export declare type RadiusType = typeof Radius[keyof typeof Radius];
 export declare const NavTheme: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
 };
-export type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
+export declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
 export declare const ImageVerticalAlign: {
     readonly TOP: "top";
     readonly CENTER: "center";
     readonly BOTTOM: "bottom";
 };
-export type ImageVerticalAlignType = (typeof ImageVerticalAlign)[keyof typeof ImageVerticalAlign];
+export declare type ImageVerticalAlignType = typeof ImageVerticalAlign[keyof typeof ImageVerticalAlign];
 export interface IImageBannerProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -47,7 +47,7 @@ export interface IImageBannerProps {
         children?: string;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
+    rootRef?: Ref<HTMLDivElement>;
     /** Заголовок */
     title?: string | React.ReactNode | React.ReactNode[];
     /** Текст-описание */
@@ -82,7 +82,6 @@ export interface IImageBannerProps {
     badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
     adBlock?: JSX.Element | null;
-    children?: React.ReactNode;
 }
 declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

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

@@ -1,22 +1,39 @@
 "use strict";
 
-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); }
+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); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Radius = exports.NavTheme = exports.ImageVerticalAlign = exports.BackgroundColor = void 0;
+exports["default"] = exports.ImageVerticalAlign = exports.NavTheme = exports.Radius = 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");
-var React = _interopRequireWildcard(require("react"));
+
+require("core-js/modules/es.object.values.js");
+
+var _react = _interopRequireDefault(require("react"));
+
 var _uiCore = require("@megafon/ui-core");
+
 var _uiHelpers = require("@megafon/ui-helpers");
-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; }
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var BackgroundColor = exports.BackgroundColor = {
+
+var BackgroundColor = {
   TRANSPARENT: 'transparent',
   GREEN: 'green',
   PURPLE: 'purple',
@@ -24,34 +41,41 @@ var BackgroundColor = exports.BackgroundColor = {
   GRADIENT: 'gradient',
   LIGHT: 'light'
 };
-var Radius = exports.Radius = {
+exports.BackgroundColor = BackgroundColor;
+var Radius = {
   CORNERS: 'corners',
   ROUNDED: 'rounded'
 };
-var NavTheme = exports.NavTheme = {
+exports.Radius = Radius;
+var NavTheme = {
   LIGHT: 'light',
   DARK: 'dark'
 };
-var ImageVerticalAlign = exports.ImageVerticalAlign = {
+exports.NavTheme = NavTheme;
+var 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.createElement(_uiCore.Header, {
+      return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
         className: cn('value'),
         as: "h3",
         color: "inherit"
@@ -59,97 +83,108 @@ 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.useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isMobile = _React$useState2[0],
-    setIsMobile = _React$useState2[1];
-  React.useEffect(function () {
+      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);
     };
   }, []);
+
   var navTheme = getTheme(backgroundColor);
   var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
-  var renderBadges = !!badges && /*#__PURE__*/React.createElement("div", {
+
+  var renderBadges = !!badges && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('badges', [classes.badges])
   }, badges);
-  var renderAdBlock = !!adBlock && /*#__PURE__*/React.createElement("div", {
+
+  var renderAdBlock = !!adBlock && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('ad-block', [classes.adBlock])
   }, adBlock);
-  var renderContent = /*#__PURE__*/React.createElement("div", {
+
+  var renderContent = /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('content')
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('badges-container', [classes.badgesContainer])
-  }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
+  }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/_react["default"].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.createElement(_uiCore.Header, {
+  }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/_react["default"].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.createElement("div", {
+  }, typeof description === 'string' ? (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig) : description), !!cost && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('cost', [classes.cost])
-  }, (0, _uiHelpers.convert)(cost, typographyConfig)), !!children && !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.convert)(cost, typographyConfig)), !!children && !!_react["default"].Children.count(children) && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('children', [classes.children])
   }, children));
-  var renderImage = /*#__PURE__*/React.createElement("picture", {
+
+  var renderImage = /*#__PURE__*/_react["default"].createElement("picture", {
     className: cn('picture', {
       'v-align': imageVerticalAlign
     })
-  }, /*#__PURE__*/React.createElement("source", {
+  }, /*#__PURE__*/_react["default"].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), {
+  }), /*#__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]),
     src: imageMobile || imageMobile2x,
     srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
     alt: imageAlt
   })));
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+
+  return /*#__PURE__*/_react["default"].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,
@@ -161,4 +196,46 @@ var ImageBanner = function ImageBanner(_ref2) {
     ref: rootRef
   }), renderContent, hasImage && renderImage);
 };
-var _default = exports["default"] = ImageBanner;
+
+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,
+    children: 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
+};
+var _default = ImageBanner;
+exports["default"] = _default;