@megafon/ui-shared 8.14.0 → 8.14.2

package/dist/es/components/Instructions/Instructions.js

@@ -0,0 +1,362 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.map.js";
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import * as React from 'react';
+import { Button, Grid, GridColumn, Header, NavArrow, Paragraph, Tile } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs, titleConvertConfig, convert, textConvertConfig } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../helpers/setRelAttribute";
+import "./Instructions.css";
+var Swiper = null;
+var SwiperSlide = null;
+try {
+  // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+  var SwiperAll = require('swiper/react');
+  Swiper = SwiperAll.Swiper;
+  SwiperSlide = SwiperAll.SwiperSlide;
+} catch (e) {
+  // eslint-disable-next-line no-console
+  console.warn("\n        WARNING: megafon/ui-share is using the latest version of swiper.       \n        For more information about server-side rendering\n        please check the Instructions component documentation at:\n        https://ui.megafon.ru/components/instructions\n    ");
+}
+export var pictureAlignTypes = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+export var pictureVerticalAlignTypes = {
+  CENTER: 'center',
+  TOP: 'top',
+  UNSET: 'unset'
+};
+export var pictureMaskTypes = {
+  ANDROID: 'android',
+  ANDROID_CROPPED: 'android-cropped',
+  NEW_IPHONE: 'new-iphone',
+  BLACK_IPHONE: 'black-iphone',
+  WHITE_IPHONE: 'white-iphone',
+  LAPTOP: 'laptop',
+  LAPTOP_NEW: 'laptop-new',
+  IPHONE_12: 'iphone-12',
+  IPHONE_15: 'iphone-15',
+  IPHONE_CROPPED: 'iphone-cropped',
+  NONE: 'none'
+};
+export var pictureBackgroundColorTypes = {
+  SPB_SKY_0: 'spbSky0'
+};
+export var arrowTheme = {
+  PURPLE: 'purple',
+  DARK: 'dark'
+};
+export var elementOrderTypes = {
+  DEFAULT: 'default',
+  REVERSED: 'reversed'
+};
+var testIdPrefix = 'Instructions';
+var cn = cnCreate('mfui-instructions');
+var swiperSlideCn = cn('slide');
+var Instructions = function Instructions(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    instructionItem = _ref$classes2.instructionItem,
+    desktopInstructionItem = _ref$classes2.desktopInstructionItem,
+    mobileInstructionItem = _ref$classes2.mobileInstructionItem,
+    activeInstructionItem = _ref$classes2.activeInstructionItem,
+    desktopItemTitle = _ref$classes2.desktopItemTitle,
+    mobileItemTitle = _ref$classes2.mobileItemTitle,
+    instructionItemImg = _ref$classes2.instructionItemImg,
+    additionalText = _ref$classes2.additionalText,
+    arrowPrev = _ref$classes2.arrowPrev,
+    arrowNext = _ref$classes2.arrowNext,
+    buttonClass = _ref$classes2.button,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '' : _ref$title,
+    instructionItems = _ref.instructionItems,
+    itemsGap = _ref.itemsGap,
+    _ref$pictureAlign = _ref.pictureAlign,
+    pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
+    _ref$pictureVerticalA = _ref.pictureVerticalAlign,
+    pictureVerticalAlign = _ref$pictureVerticalA === void 0 ? 'center' : _ref$pictureVerticalA,
+    _ref$pictureMask = _ref.pictureMask,
+    pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
+    pictureBackgroundColor = _ref.pictureBackgroundColor,
+    getSwiper = _ref.getSwiper,
+    text = _ref.additionalText,
+    showArrows = _ref.showArrows,
+    _ref$arrowsTheme = _ref.arrowsTheme,
+    arrowsTheme = _ref$arrowsTheme === void 0 ? arrowTheme.DARK : _ref$arrowsTheme,
+    _ref$elementOrder = _ref.elementOrder,
+    elementOrder = _ref$elementOrder === void 0 ? 'default' : _ref$elementOrder,
+    showMobileNumeration = _ref.showMobileNumeration,
+    button = _ref.button,
+    children = _ref.children;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    swiperInstance = _React$useState2[0],
+    setSwiperInstance = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    slideIndex = _React$useState4[0],
+    setSlideIndex = _React$useState4[1];
+  var showButton = button === null || button === void 0 ? void 0 : button.title;
+  var isMobileReversed = elementOrder === 'reversed';
+  var getSwiperInstance = React.useCallback(function (swiper) {
+    setSwiperInstance(swiper);
+    getSwiper && getSwiper(swiper);
+  }, [getSwiper]);
+  var getActiveCustomClass = React.useCallback(function (articleIndex, activeIndex) {
+    if (articleIndex !== activeIndex) {
+      return undefined;
+    }
+    return activeInstructionItem;
+  }, [activeInstructionItem]);
+  var handleArticleClick = React.useCallback(function (ind) {
+    return function () {
+      setSlideIndex(ind);
+      swiperInstance && swiperInstance.slideTo(ind);
+    };
+  }, [swiperInstance]);
+  var handleSlideChange = React.useCallback(function (_ref2) {
+    var activeIndex = _ref2.activeIndex;
+    setSlideIndex(activeIndex);
+  }, []);
+  var handlePrevClick = React.useCallback(function () {
+    if (!swiperInstance) {
+      return;
+    }
+    swiperInstance.slidePrev();
+  }, [swiperInstance]);
+  var handleNextClick = React.useCallback(function () {
+    if (!swiperInstance) {
+      return;
+    }
+    swiperInstance.slideNext();
+  }, [swiperInstance]);
+  var renderVideo = React.useCallback(function (mediaUrl, index) {
+    return /*#__PURE__*/React.createElement("video", _extends({
+      loop: true,
+      muted: true,
+      autoPlay: true,
+      playsInline: true,
+      className: cn('swiper-img', {
+        video: true
+      })
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, index + 1)), /*#__PURE__*/React.createElement("source", {
+      src: mediaUrl,
+      type: "video/mp4"
+    }));
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
+  var renderMobileDots = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement("ul", {
+      className: cn('articles-dots', {
+        reversed: isMobileReversed
+      }),
+      "data-testid": "".concat(testIdPrefix, "-articles-dots-mobile")
+    }, instructionItems.map(function (_item, i) {
+      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+        key: i,
+        className: cn('articles-dot', {
+          active: slideIndex === i
+        }, [getActiveCustomClass(i, slideIndex), instructionItem, mobileInstructionItem]),
+        onClick: handleArticleClick(i)
+      }));
+    }));
+  }, [instructionItems, dataAttrs, slideIndex, instructionItem, mobileInstructionItem, getActiveCustomClass, handleArticleClick, isMobileReversed]);
+  var renderSlider = React.useCallback(function () {
+    if (!Swiper || !SwiperSlide) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return /*#__PURE__*/React.createElement(Swiper, {
+      noSwiping: false,
+      onSwiper: getSwiperInstance,
+      noSwipingClass: swiperSlideCn,
+      onSlideChange: handleSlideChange,
+      className: cn('swiper')
+    }, instructionItems.map(function (_ref3, i) {
+      var mediaUrl = _ref3.mediaUrl,
+        isVideo = _ref3.isVideo,
+        imageAlt = _ref3.imageAlt;
+      return /*#__PURE__*/React.createElement(SwiperSlide, {
+        className: swiperSlideCn,
+        key: i + mediaUrl
+      }, isVideo ? renderVideo(mediaUrl, i) : /*#__PURE__*/React.createElement("img", _extends({
+        alt: imageAlt,
+        src: mediaUrl
+      }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, i + 1), {
+        className: cn('swiper-img', [instructionItemImg])
+      })));
+    }));
+  }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, handleSlideChange]);
+  var renderTitle = React.useCallback(function (resolution) {
+    return /*#__PURE__*/React.createElement(Header, {
+      className: cn('title', {
+        resolution: resolution
+      }),
+      as: "h2"
+    }, convert(title, titleConvertConfig));
+  }, [title]);
+  var renderQrCode = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, instructionItems.map(function (_ref4, i) {
+      var qrCode = _ref4.qrCode,
+        qrCodeText = _ref4.qrCodeText;
+      return slideIndex === i && !!qrCode && /*#__PURE__*/React.createElement(Tile, {
+        className: cn('qr-code'),
+        radius: "rounded",
+        shadowLevel: "default",
+        key: qrCode
+      }, !!qrCodeText && /*#__PURE__*/React.createElement("div", {
+        className: cn('qr-code-text')
+      }, qrCodeText), /*#__PURE__*/React.createElement("img", {
+        src: qrCode,
+        className: cn('qr-code-image'),
+        alt: "QR-\u043A\u043E\u0434"
+      }));
+    }));
+  }, [instructionItems, slideIndex]);
+  var renderText = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(Paragraph, {
+      className: cn('text', [additionalText]),
+      hasMargin: false
+    }, convert(text, textConvertConfig));
+  }, [text, additionalText]);
+  var renderPicture = React.useCallback(function () {
+    if (pictureMask === pictureMaskTypes.NONE) {
+      return renderSlider();
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('img-wrapper'),
+      "data-testid": "".concat(testIdPrefix, "-img-wrapper")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('device-screen')
+    }), renderSlider());
+  }, [pictureMask, renderSlider]);
+  var renderDesktopArticles = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement("ul", {
+      className: cn('articles-list', {
+        'text-after': !!text,
+        desktop: true
+      }),
+      "data-testid": "".concat(testIdPrefix, "-articles-list-desktop")
+    }, instructionItems.map(function (_ref5, i) {
+      var itemTitle = _ref5.title;
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        React.createElement("li", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+          className: cn('articles-item', {
+            active: slideIndex === i
+          }, [getActiveCustomClass(i, slideIndex), instructionItem, desktopInstructionItem]),
+          "data-index": i,
+          onClick: handleArticleClick(i),
+          key: i
+        }), /*#__PURE__*/React.createElement("div", {
+          className: cn('articles-item-dot')
+        }, /*#__PURE__*/React.createElement("span", {
+          className: cn('articles-item-dot-number')
+        }, i + 1)), /*#__PURE__*/React.createElement("div", {
+          className: cn('articles-item-title', [desktopItemTitle])
+        }, itemTitle))
+      );
+    }));
+  }, [desktopInstructionItem, desktopItemTitle, getActiveCustomClass, handleArticleClick, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, instructionItem, instructionItems, slideIndex, text]);
+  var renderMobileArticles = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('articles-list', {
+        mobile: true
+      }),
+      "data-testid": "".concat(testIdPrefix, "-articles-list-mobile")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('articles-title-block', {
+        reversed: isMobileReversed,
+        'with-numeration': showMobileNumeration
+      })
+    }, instructionItems.map(function (_ref6, i) {
+      var itemTitle = _ref6.title;
+      return slideIndex === i && /*#__PURE__*/React.createElement("div", {
+        key: i,
+        "data-index": i,
+        className: cn('articles-title')
+      }, showMobileNumeration && /*#__PURE__*/React.createElement("span", {
+        className: cn('articles-num')
+      }, i + 1), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, i + 1), {
+        className: cn('articles-title-text', [mobileItemTitle])
+      }), itemTitle));
+    })));
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, instructionItems, mobileItemTitle, slideIndex, isMobileReversed, showMobileNumeration]);
+  var renderArrows = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavArrow, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
+      },
+      className: cn('arrow', {
+        prev: true
+      }, [arrowPrev]),
+      theme: arrowsTheme,
+      disabled: slideIndex === 0,
+      onClick: handlePrevClick
+    }), /*#__PURE__*/React.createElement(NavArrow, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
+      },
+      className: cn('arrow', {
+        next: true
+      }, [arrowNext]),
+      view: "next",
+      theme: arrowsTheme,
+      disabled: slideIndex === instructionItems.length - 1,
+      onClick: handleNextClick
+    }));
+  }, [handlePrevClick, handleNextClick, arrowsTheme, arrowPrev, arrowNext, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext, slideIndex, instructionItems.length]);
+  var renderButton = React.useCallback(function () {
+    var _ref7 = button || {},
+      buttonTitle = _ref7.title,
+      type = _ref7.type,
+      icon = _ref7.icon,
+      href = _ref7.href,
+      target = _ref7.target,
+      rel = _ref7.rel,
+      onClick = _ref7.onClick;
+    return /*#__PURE__*/React.createElement(Button, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      className: cn('button', [buttonClass]),
+      type: type,
+      theme: "green",
+      icon: icon,
+      href: href,
+      target: target,
+      rel: setRelAttribute(rel, target),
+      onClick: onClick
+    }, buttonTitle);
+  }, [button, buttonClass, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      mask: pictureMask,
+      reversed: isMobileReversed,
+      'items-gap': itemsGap
+    }),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Grid, {
+    hAlign: "center"
+  }, /*#__PURE__*/React.createElement(GridColumn, {
+    all: "12"
+  }, !!title && renderTitle('mobile'), /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('wrapper', {
+      'vertical-align': pictureVerticalAlign
+    })
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper)), /*#__PURE__*/React.createElement("div", {
+    className: cn('picture', {
+      align: pictureAlign,
+      background: pictureBackgroundColor
+    }),
+    "data-testid": "".concat(testIdPrefix, "-picture")
+  }, isMobileReversed && renderMobileArticles(), renderPicture(), !!showArrows && renderArrows(), renderQrCode()), renderMobileDots(), /*#__PURE__*/React.createElement("div", {
+    className: cn('articles', {
+      align: pictureAlign
+    })
+  }, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), showButton && renderButton(), children)))));
+};
+export default Instructions;

package/dist/es/components/NotificationBox/NotificationBox.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-notification-box{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-notification-box:not(:first-child){margin-top:24px}.mfui-notification-box__notification{max-width:740px}.mfui-notification-box_align_left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mfui-notification-box_align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Notification } from '@megafon/ui-core';
+import './NotificationBox.scss';
+export declare const Align: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+};
+type AlignType = (typeof Align)[keyof typeof Align];
+type NotificationProps = React.ComponentProps<typeof Notification>;
+type NotificationBoxProps = Omit<NotificationProps, 'isColored'> & {
+    /** Горизонтальное выравнивание */
+    align?: AlignType;
+};
+declare const NotificationBox: React.FC<NotificationBoxProps>;
+export default NotificationBox;

package/dist/es/components/NotificationBox/NotificationBox.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.index-of.js";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import { Notification } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./NotificationBox.css";
+export var Align = {
+  LEFT: 'left',
+  CENTER: 'center'
+};
+var cn = cnCreate('mfui-notification-box');
+var NotificationBox = function NotificationBox(_a) {
+  var _a$align = _a.align,
+    align = _a$align === void 0 ? 'left' : _a$align,
+    restProps = __rest(_a, ["align"]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      align: align
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('notification')
+  }, /*#__PURE__*/React.createElement(Notification, _extends({}, restProps, {
+    isColored: false
+  }))));
+};
+export default NotificationBox;

package/dist/es/components/NumbersBox/NumbersBox.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-numbers-box{display:block}.mfui-numbers-box_line{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px}@media screen and (min-width:768px){.mfui-numbers-box_line{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.mfui-numbers-box_line .mfui-numbers-box__card{-webkit-box-flex:1;-ms-flex:1;flex:1}@media screen and (min-width:768px) and (max-width:1023px){.mfui-numbers-box_grid{display:grid;grid-gap:20px;grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:767px){.mfui-numbers-box_spaced{gap:40px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-numbers-box_spaced{-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;row-gap:40px}}

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { BackgroundType, CardDataType, SubtitleSizeType, TitleColorType } from './types';
+import './NumbersBox.scss';
+type CarouselProps = React.ComponentProps<typeof Carousel>;
+export interface INumbersBox {
+    /** Список карточек. Минимальное количество 3 карточки */
+    items: CardDataType[];
+    /** Визуальный эффект фона для карточки */
+    background?: BackgroundType;
+    /** Цвет текста заголовка карточки */
+    titleColor?: TitleColorType;
+    /** Размер дополнительного текста карточки */
+    subtitleSize?: SubtitleSizeType;
+    /** Тема навигации для карусели */
+    carouselNavTheme?: CarouselProps['navTheme'];
+    /** Цвет градиента для карусели */
+    carouselGradientColor?: CarouselProps['gradientColor'];
+    /** Дополнительный css класс для корневого элемента */
+    className?: string;
+    /** Дополнительные css классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        card?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        card?: Record<string, string>;
+    };
+    /** Ссылка на элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const NumbersBox: React.FC<INumbersBox>;
+export default NumbersBox;

package/dist/es/components/NumbersBox/NumbersBox.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { cnCreate, breakpoints, filterDataAttrs } from '@megafon/ui-helpers';
+import NumbersCard from "./components/NumbersCard/NumbersCard";
+import "./NumbersBox.css";
+var slidesSettings = _defineProperty(_defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 20
+}), breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 3,
+  spaceBetween: 20
+}), breakpoints.DESKTOP_SMALL_START, {
+  slidesPerView: 4,
+  spaceBetween: 20
+});
+var MIN_ITEMS_COUNT = 3;
+var FOUR_ITEMS = 4;
+var MIN_CAROUSEL_ITEMS_COUNT = 5;
+var cn = cnCreate('mfui-numbers-box');
+var NumbersBox = function NumbersBox(_ref) {
+  var items = _ref.items,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'shadow' : _ref$background,
+    _ref$titleColor = _ref.titleColor,
+    titleColor = _ref$titleColor === void 0 ? 'default' : _ref$titleColor,
+    _ref$subtitleSize = _ref.subtitleSize,
+    subtitleSize = _ref$subtitleSize === void 0 ? 'medium' : _ref$subtitleSize,
+    carouselNavTheme = _ref.carouselNavTheme,
+    carouselGradientColor = _ref.carouselGradientColor,
+    dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    classes = _ref.classes,
+    rootRef = _ref.rootRef;
+  if (items.length < MIN_ITEMS_COUNT) {
+    return null;
+  }
+  var showCarousel = items.length >= MIN_CAROUSEL_ITEMS_COUNT;
+  var isGridLayout = items.length === FOUR_ITEMS;
+  var hasLargeSpacing = background === 'none' && !showCarousel;
+  var renderItem = function renderItem(item, index) {
+    return /*#__PURE__*/React.createElement(NumbersCard, _extends({}, item, {
+      background: background,
+      titleColor: titleColor,
+      subtitleSize: subtitleSize,
+      dataAttrs: {
+        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, index + 1)
+      },
+      className: cn('card', [classes === null || classes === void 0 ? void 0 : classes.card]),
+      key: index + item.title
+    }));
+  };
+  var renderCarousel = function renderCarousel() {
+    return /*#__PURE__*/React.createElement(Carousel, {
+      slidesSettings: slidesSettings,
+      navTheme: carouselNavTheme,
+      gradient: true,
+      gradientColor: carouselGradientColor
+    }, items.map(renderItem));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      line: !showCarousel,
+      grid: isGridLayout,
+      spaced: hasLargeSpacing
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    ref: rootRef
+  }), showCarousel ? renderCarousel() : items.map(renderItem));
+};
+export default NumbersBox;

package/dist/es/components/NumbersBox/components/NumbersCard/NumbersCard.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-numbers-card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;color:var(--content);-ms-flex-direction:column;flex-direction:column;gap:4px;min-height:100%;padding:24px}@media screen and (min-width:1280px){.mfui-numbers-card{gap:8px;padding:32px}}.mfui-numbers-card_background_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-numbers-card_background_stroke{background-color:transparent;border:1px solid var(--spbSky2)}.mfui-numbers-card_background_gray{background-color:var(--spbSky0)}.mfui-numbers-card_background_none{background-color:transparent;border-radius:0;padding:0}.mfui-numbers-card__title{color:var(--brandGreen);font-size:36px;font-weight:600;font-weight:700;letter-spacing:.5px;line-height:30px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-numbers-card__title{font-size:36px;line-height:40px}}@media screen and (min-width:1024px){.mfui-numbers-card__title{font-size:44px;line-height:48px}}@media screen and (min-width:1280px){.mfui-numbers-card__title{font-size:52px;line-height:56px}}@media screen and (max-width:1023px){.mfui-numbers-card__title{letter-spacing:0;line-height:40px}}.mfui-numbers-card__title_color_night{color:var(--night)}.mfui-numbers-card__title_color_berry{color:var(--berry)}.mfui-numbers-card__title_color_flamingo{color:var(--flamingo)}.mfui-numbers-card__subtitle{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;overflow:hidden}@media screen and (min-width:1280px){.mfui-numbers-card__subtitle{font-size:20px;line-height:28px}}@media screen and (max-width:1023px){.mfui-numbers-card__subtitle{letter-spacing:0}}.mfui-numbers-card__subtitle_size_small{font-size:15px;font-weight:500;line-height:24px}

package/dist/es/components/NumbersBox/components/NumbersCard/NumbersCard.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { BackgroundType, SubtitleSizeType, TitleColorType } from '../../types';
+import './NumbersCard.scss';
+export interface INumbersCard {
+    title: string;
+    subtitle: string;
+    titleColor?: TitleColorType;
+    subtitleSize?: SubtitleSizeType;
+    background?: BackgroundType;
+    className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const NumbersCard: React.FC<INumbersCard>;
+export default NumbersCard;

package/dist/es/components/NumbersBox/components/NumbersCard/NumbersCard.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, convert, textConvertConfig } from '@megafon/ui-helpers';
+import "./NumbersCard.css";
+var cn = cnCreate('mfui-numbers-card');
+var NumbersCard = function NumbersCard(_ref) {
+  var title = _ref.title,
+    titleColor = _ref.titleColor,
+    subtitle = _ref.subtitle,
+    subtitleSize = _ref.subtitleSize,
+    background = _ref.background,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      background: background
+    }, [className])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), /*#__PURE__*/React.createElement("div", {
+    className: cn('title', {
+      color: titleColor
+    })
+  }, convert(title, {})), /*#__PURE__*/React.createElement("div", {
+    className: cn('subtitle', {
+      size: subtitleSize
+    })
+  }, convert(subtitle, textConvertConfig)));
+};
+export default NumbersCard;

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

@@ -0,0 +1,7 @@
+export type CardDataType = {
+    title: string;
+    subtitle: string;
+};
+export type TitleColorType = 'default' | 'night' | 'berry' | 'flamingo';
+export type SubtitleSizeType = 'small' | 'medium';
+export type BackgroundType = 'shadow' | 'stroke' | 'gray' | 'white' | 'none';

package/dist/es/components/NumbersBox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es/components/PageTitle/PageTitle.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-page-title{display:inline-block;width:100%}.mfui-page-title__title{margin-top:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title{margin-top:100px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title{margin-top:90px}}@media screen and (max-width:767px){.mfui-page-title__title{margin-top:45px}}.mfui-page-title__badge{background-color:var(--brandPurple);color:var(--stcWhite);display:inline-block;font-size:12px;font-weight:500;line-height:18px;margin-top:16px;padding:2px 14px}@media screen and (min-width:1280px){.mfui-page-title__badge_under-breadcrumbs{margin-top:32px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__badge_under-breadcrumbs{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__badge_under-breadcrumbs{margin-top:16px}}@media screen and (min-width:1280px){.mfui-page-title__title_under-breadcrumbs{margin-top:60px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title_under-breadcrumbs{margin-top:50px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_under-breadcrumbs{margin-top:45px}}.mfui-page-title__title_single.mfui-page-title__title_margin-top_small{margin-top:48px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_single.mfui-page-title__title_margin-top_small{margin-top:40px}}@media screen and (max-width:767px){.mfui-page-title__title_single.mfui-page-title__title_margin-top_small{margin-top:32px}}.mfui-page-title__description{color:inherit;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin-top:24px;white-space:pre-wrap}@media screen and (max-width:767px){.mfui-page-title__description{margin-top:16px}}.mfui-page-title__badge+.mfui-page-title__title{margin-top:8px}

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Props as BreadcrumbsType } from '../Breadcrumbs/Breadcrumbs';
+import './PageTitle.scss';
+export type PageTitleProps = {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        breadcrumbs?: Record<string, string>;
+        breadcrumbsLink?: Record<string, string>;
+    };
+    /** Текст заголовка */
+    title: string | React.ReactNode | React.ReactNode[];
+    /** Описание */
+    description?: string | React.ReactNode | React.ReactNode[];
+    /** Хлебные крошки */
+    breadcrumbs?: BreadcrumbsType['items'];
+    /** Текст бейджа */
+    badge?: string;
+    /** Растягивание компонента на всю доступную ширину */
+    isFullWidth?: boolean;
+    /** Включить микроразметку для хлебных крошек */
+    hasBreadcrumbsMicrodata?: boolean;
+    /** Отступ сверху */
+    marginTop?: 'default' | 'small';
+    /** Класс для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        title?: string;
+        breadcrumbs?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.RefObject<HTMLDivElement>;
+};
+declare const PageTitle: React.FC<PageTitleProps>;
+export default PageTitle;