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

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './Container.scss';
+import React, { Ref } from 'react';
+import './Container.less';
 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";
 };
-type BackgroundColorType = (typeof BackgroundColors)[keyof typeof BackgroundColors];
-type Props = {
+declare type BackgroundColorType = typeof BackgroundColors[keyof typeof BackgroundColors];
+declare type Props = {
     /** Атрибут корневого тега */
     id?: string;
     /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
+    rootRef?: Ref<HTMLDivElement>;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Цвет фона */
@@ -23,8 +23,6 @@ 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,6 +1,8 @@
-import * as React from 'react';
+import "core-js/modules/es.object.values.js";
+import 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',
@@ -10,17 +12,18 @@ 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,
@@ -34,4 +37,16 @@ var Container = function Container(_ref) {
     className: cn('inner')
   }, /*#__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 +1,37 @@
-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}
+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;
+}

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

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

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

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.string.link.js";
+import "core-js/modules/es.array.concat.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"
@@ -12,30 +14,36 @@ 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
@@ -58,4 +66,27 @@ 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 +1,36 @@
-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}
+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;
+}

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.scss';
+import './DownloadLinks.less';
 import { IDownloadLink } from './DownloadLink';
-type GridColumnType = React.ComponentProps<typeof GridColumn>;
-type ColumnConfig = {
+declare type GridColumnType = React.ComponentProps<typeof GridColumn>;
+declare type ColumnConfig = {
     wide?: GridColumnType['wide'];
     desktop?: GridColumnType['desktop'];
     tablet?: GridColumnType['tablet'];

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

@@ -3,6 +3,7 @@ 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) {
@@ -13,6 +14,7 @@ export var getColumnConfig = function getColumnConfig(itemsCount) {
           mobile: '12'
         };
       }
+
     case itemsCount <= 4:
       {
         return {
@@ -20,6 +22,7 @@ export var getColumnConfig = function getColumnConfig(itemsCount) {
           mobile: '12'
         };
       }
+
     default:
       {
         return {
@@ -33,10 +36,12 @@ 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(),
@@ -47,6 +52,7 @@ var DownloadLinks = function DownloadLinks(_ref) {
       }, child);
     }));
   }
+
   var itemsCount = React.Children.count(children);
   var columnConfig = getColumnConfig(itemsCount);
   return /*#__PURE__*/React.createElement("div", {
@@ -61,4 +67,9 @@ 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,6 +1,3 @@
-import * as React from 'react';
-interface IFaqWrapper {
-    children?: React.ReactNode;
-}
-declare const FaqWrapper: React.FC<IFaqWrapper>;
+import React from 'react';
+declare const FaqWrapper: React.FC;
 export default FaqWrapper;

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

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

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