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

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

@@ -1,5 +1,5 @@
-import React, { Ref } from 'react';
-import './Container.less';
+import * as React from 'react';
+import './Container.scss';
 export declare const BackgroundColors: {
     readonly DEFAULT: "default";
     readonly LIGHT_GRAY: "light-gray";
@@ -7,12 +7,12 @@ export declare const BackgroundColors: {
     readonly GREEN: "green";
     readonly PURPLE: "purple";
 };
-declare type BackgroundColorType = typeof BackgroundColors[keyof typeof BackgroundColors];
-declare type Props = {
+type BackgroundColorType = (typeof BackgroundColors)[keyof typeof BackgroundColors];
+type Props = {
     /** Атрибут корневого тега */
     id?: string;
     /** Ссылка на корневой элемент */
-    rootRef?: Ref<HTMLDivElement>;
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Цвет фона */
@@ -23,6 +23,8 @@ declare type Props = {
     disablePaddingBottom?: boolean;
     /** Включить тень в нижней части компонента */
     bottomShadow?: boolean;
+    /** Дочерние элементы */
+    children?: React.ReactNode;
 };
 declare const Container: React.FC<Props>;
 export default Container;

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

@@ -1,8 +1,6 @@
-import "core-js/modules/es.object.values.js";
-import React from 'react';
+import * as React from 'react';
 import { ContentArea } from '@megafon/ui-core';
 import { cnCreate } from '@megafon/ui-helpers';
-import PropTypes from 'prop-types';
 import "./Container.css";
 export var BackgroundColors = {
   DEFAULT: 'default',
@@ -12,18 +10,17 @@ export var BackgroundColors = {
   PURPLE: 'purple'
 };
 var cn = cnCreate('mfui-container');
-
 var Container = function Container(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
-      backgroundColor = _ref$backgroundColor === void 0 ? 'default' : _ref$backgroundColor,
-      rootRef = _ref.rootRef,
-      id = _ref.id,
-      className = _ref.className,
-      children = _ref.children,
-      disablePaddingTop = _ref.disablePaddingTop,
-      disablePaddingBottom = _ref.disablePaddingBottom,
-      _ref$bottomShadow = _ref.bottomShadow,
-      bottomShadow = _ref$bottomShadow === void 0 ? false : _ref$bottomShadow;
+    backgroundColor = _ref$backgroundColor === void 0 ? 'default' : _ref$backgroundColor,
+    rootRef = _ref.rootRef,
+    id = _ref.id,
+    className = _ref.className,
+    children = _ref.children,
+    disablePaddingTop = _ref.disablePaddingTop,
+    disablePaddingBottom = _ref.disablePaddingBottom,
+    _ref$bottomShadow = _ref.bottomShadow,
+    bottomShadow = _ref$bottomShadow === void 0 ? false : _ref$bottomShadow;
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
       'bg-color': backgroundColor,
@@ -35,16 +32,4 @@ var Container = function Container(_ref) {
     id: id
   }, /*#__PURE__*/React.createElement(ContentArea, null, children));
 };
-
-Container.propTypes = {
-  id: PropTypes.string,
-  className: PropTypes.string,
-  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColors)),
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  disablePaddingTop: PropTypes.bool,
-  disablePaddingBottom: PropTypes.bool,
-  bottomShadow: PropTypes.bool
-};
 export default Container;

package/dist/es/components/DownloadLinks/DownloadLink.css

@@ -1,37 +1 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.mfui-download-link {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-.mfui-download-link__icon {
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  width: 40px;
-  height: 40px;
-  margin-right: 22px;
-  fill: var(--content);
-}
-@media screen and (max-width: 1023px) {
-  .mfui-download-link__icon {
-    width: 32px;
-    height: 32px;
-  }
-}
-.mfui-download-link__icon-svg {
-  width: inherit;
-  height: inherit;
-}
-.mfui-download-link__info {
-  margin: 0;
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--spbSky3);
-  text-transform: uppercase;
-}
+h1,h2,h3,h4,h5{margin:0}.mfui-download-link{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-download-link__icon{-ms-flex-negative:0;flex-shrink:0;height:40px;margin-right:22px;width:40px;fill:var(--content)}@media screen and (max-width:1023px){.mfui-download-link__icon{height:32px;width:32px}}.mfui-download-link__icon-svg{height:inherit;width:inherit}.mfui-download-link__info{color:var(--spbSky3);font-size:12px;line-height:18px;margin:0;text-transform:uppercase}

package/dist/es/components/DownloadLinks/DownloadLink.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './DownloadLink.less';
+import './DownloadLink.scss';
 export interface IDownloadLink {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

package/dist/es/components/DownloadLinks/DownloadLink.js

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.string.link.js";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.string.link.js";
 import * as React from 'react';
 import { TextLink } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import "./DownloadLink.css";
-
 var DownloadIcon = function DownloadIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 40 40"
@@ -14,36 +12,30 @@ var DownloadIcon = function DownloadIcon(props) {
     d: "M21 6v14l2.68-4 1.65 1-4.44 6.74h-1.77L14.68 17l1.65-1L19 20V6zM8 20H6a14 14 0 0028 0h-2a12 12 0 01-24 0z"
   }));
 };
-
 var cn = cnCreate('mfui-download-link');
-
 var DownloadLink = function DownloadLink(_ref) {
   var href = _ref.href,
-      text = _ref.text,
-      extension = _ref.extension,
-      fileSize = _ref.fileSize,
-      onClick = _ref.onClick,
-      className = _ref.className,
-      _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes,
-      rootRef = _ref.rootRef,
-      dataAttrs = _ref.dataAttrs,
-      disableDownload = _ref.disableDownload,
-      target = _ref.target,
-      rel = _ref.rel;
-
+    text = _ref.text,
+    extension = _ref.extension,
+    fileSize = _ref.fileSize,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    rootRef = _ref.rootRef,
+    dataAttrs = _ref.dataAttrs,
+    disableDownload = _ref.disableDownload,
+    target = _ref.target,
+    rel = _ref.rel;
   var setRelAttribute = function setRelAttribute() {
     if (rel) {
       return rel;
     }
-
     if (target && target !== '_self') {
       return 'noreferrer noopener';
     }
-
     return undefined;
   };
-
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className, classes.root]),
     ref: rootRef
@@ -66,27 +58,4 @@ var DownloadLink = function DownloadLink(_ref) {
     className: cn('info')
   }, "".concat(extension).concat(extension && fileSize ? ', ' : '').concat(fileSize))));
 };
-
-DownloadLink.propTypes = {
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    link: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  href: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  extension: PropTypes.string.isRequired,
-  fileSize: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-    link: PropTypes.string
-  }),
-  onClick: PropTypes.func,
-  disableDownload: PropTypes.bool,
-  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-  rel: PropTypes.string
-};
 export default DownloadLink;

package/dist/es/components/DownloadLinks/DownloadLinks.css

@@ -1,36 +1 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-@media screen and (min-width: 1024px) {
-  .mfui-download-links__column:nth-child(n + 4) {
-    margin-top: 24px;
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-download-links__column:nth-child(n + 3) {
-    margin-top: 24px;
-  }
-}
-@media screen and (max-width: 767px) {
-  .mfui-download-links__column:not(:first-child) {
-    margin-top: 24px;
-  }
-}
-@media screen and (min-width: 768px) {
-  .mfui-download-links_count_2 .mfui-download-links__column:nth-child(n + 2) {
-    margin-top: 24px;
-  }
-}
-@media screen and (min-width: 768px) {
-  .mfui-download-links_count_3 .mfui-download-links__column:nth-child(n + 3),
-  .mfui-download-links_count_4 .mfui-download-links__column:nth-child(n + 3) {
-    margin-top: 24px;
-  }
-}
-.mfui-download-links__item:not(:first-child) {
-  margin-top: 24px;
-}
+h1,h2,h3,h4,h5{margin:0}@media screen and (min-width:1024px){.mfui-download-links__column:nth-child(n+4){margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-download-links__column:nth-child(n+3){margin-top:24px}}@media screen and (max-width:767px){.mfui-download-links__column:not(:first-child){margin-top:24px}}@media screen and (min-width:768px){.mfui-download-links_count_2 .mfui-download-links__column:nth-child(n+2),.mfui-download-links_count_3 .mfui-download-links__column:nth-child(n+3),.mfui-download-links_count_4 .mfui-download-links__column:nth-child(n+3){margin-top:24px}}.mfui-download-links__item:not(:first-child){margin-top:24px}

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { GridColumn } from '@megafon/ui-core';
-import './DownloadLinks.less';
+import './DownloadLinks.scss';
 import { IDownloadLink } from './DownloadLink';
-declare type GridColumnType = React.ComponentProps<typeof GridColumn>;
-declare type ColumnConfig = {
+type GridColumnType = React.ComponentProps<typeof GridColumn>;
+type ColumnConfig = {
     wide?: GridColumnType['wide'];
     desktop?: GridColumnType['desktop'];
     tablet?: GridColumnType['tablet'];

package/dist/es/components/DownloadLinks/DownloadLinks.js

@@ -3,7 +3,6 @@ import "core-js/modules/es.array.map.js";
 import * as React from 'react';
 import { Grid, GridColumn } from '@megafon/ui-core';
 import { cnCreate } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import "./DownloadLinks.css";
 export var getColumnConfig = function getColumnConfig(itemsCount) {
   switch (true) {
@@ -14,7 +13,6 @@ export var getColumnConfig = function getColumnConfig(itemsCount) {
           mobile: '12'
         };
       }
-
     case itemsCount <= 4:
       {
         return {
@@ -22,7 +20,6 @@ export var getColumnConfig = function getColumnConfig(itemsCount) {
           mobile: '12'
         };
       }
-
     default:
       {
         return {
@@ -36,12 +33,10 @@ export var getColumnConfig = function getColumnConfig(itemsCount) {
 };
 var testIdPrefix = 'DownloadLinks';
 var cn = cnCreate('mfui-download-links');
-
 var DownloadLinks = function DownloadLinks(_ref) {
   var _ref$inOneColumn = _ref.inOneColumn,
-      inOneColumn = _ref$inOneColumn === void 0 ? false : _ref$inOneColumn,
-      children = _ref.children;
-
+    inOneColumn = _ref$inOneColumn === void 0 ? false : _ref$inOneColumn,
+    children = _ref.children;
   if (inOneColumn) {
     return /*#__PURE__*/React.createElement("div", {
       className: cn(),
@@ -52,7 +47,6 @@ var DownloadLinks = function DownloadLinks(_ref) {
       }, child);
     }));
   }
-
   var itemsCount = React.Children.count(children);
   var columnConfig = getColumnConfig(itemsCount);
   return /*#__PURE__*/React.createElement("div", {
@@ -67,9 +61,4 @@ var DownloadLinks = function DownloadLinks(_ref) {
     }), child);
   })));
 };
-
-DownloadLinks.propTypes = {
-  inOneColumn: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]).isRequired
-};
 export default DownloadLinks;

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

@@ -1,3 +1,6 @@
-import React from 'react';
-declare const FaqWrapper: React.FC;
+import * as React from 'react';
+interface IFaqWrapper {
+    children?: React.ReactNode;
+}
+declare const FaqWrapper: React.FC<IFaqWrapper>;
 export default FaqWrapper;

package/dist/es/components/FaqWrapper/FaqWrapper.js

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import * as React from 'react';
 var FaqWrapper = function FaqWrapper(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
@@ -7,5 +6,4 @@ var FaqWrapper = function FaqWrapper(_ref) {
     itemType: "http://schema.org/FAQPage"
   }, children);
 };
-
 export default FaqWrapper;

package/dist/es/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)}