@megafon/ui-shared 6.0.0-beta.5 → 6.1.0

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React, { Ref } from 'react';
 import SwiperCore from 'swiper';
-import './Instructions.scss';
+import './Instructions.less';
 export declare const pictureAlignTypes: {
     readonly LEFT: "left";
     readonly RIGHT: "right";
@@ -34,13 +34,13 @@ export declare const elementOrderTypes: {
     readonly DEFAULT: "default";
     readonly REVERSED: "reversed";
 };
-type PictureAlignTypesType = (typeof pictureAlignTypes)[keyof typeof pictureAlignTypes];
-type PictureVerticalAlignTypesType = (typeof pictureVerticalAlignTypes)[keyof typeof pictureVerticalAlignTypes];
-type PictureMaskTypesType = (typeof pictureMaskTypes)[keyof typeof pictureMaskTypes];
-type PictureBackgroundColorsType = (typeof pictureBackgroundColorTypes)[keyof typeof pictureBackgroundColorTypes];
-type ArrowThemeType = (typeof arrowTheme)[keyof typeof arrowTheme];
-type ElementOrderType = (typeof elementOrderTypes)[keyof typeof elementOrderTypes];
-export type InstructionItemType = {
+declare type PictureAlignTypesType = typeof pictureAlignTypes[keyof typeof pictureAlignTypes];
+declare type PictureVerticalAlignTypesType = typeof pictureVerticalAlignTypes[keyof typeof pictureVerticalAlignTypes];
+declare type PictureMaskTypesType = typeof pictureMaskTypes[keyof typeof pictureMaskTypes];
+declare type PictureBackgroundColorsType = typeof pictureBackgroundColorTypes[keyof typeof pictureBackgroundColorTypes];
+declare type ArrowThemeType = typeof arrowTheme[keyof typeof arrowTheme];
+declare type ElementOrderType = typeof elementOrderTypes[keyof typeof elementOrderTypes];
+export declare type InstructionItemType = {
     title: string | React.ReactNode | React.ReactNode[];
     mediaUrl: string;
     isVideo: boolean;
@@ -62,7 +62,7 @@ export interface IInstructionsProps {
         arrowNext?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
+    rootRef?: Ref<HTMLDivElement>;
     /** Дополнительные классы для внутренних элементов */
     classes?: {
         instructionItem?: string;
@@ -96,8 +96,10 @@ export interface IInstructionsProps {
     arrowsTheme?: ArrowThemeType;
     /** Вертикальный порядок элементов на мобильных устройствах и планшетах */
     elementOrder?: ElementOrderType;
+    /** Показать нумерацию пунктов инструкции на мобильных устройствах */
+    showMobileNumeration?: boolean;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
 }
-declare const Instructions: React.FC<React.PropsWithChildren<IInstructionsProps>>;
+declare const Instructions: React.FC<IInstructionsProps>;
 export default Instructions;

package/dist/lib/components/Instructions/Instructions.js

@@ -1,33 +1,43 @@
 "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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pictureVerticalAlignTypes = exports.pictureMaskTypes = exports.pictureBackgroundColorTypes = exports.pictureAlignTypes = exports.elementOrderTypes = exports["default"] = exports.arrowTheme = void 0;
+exports["default"] = exports.elementOrderTypes = exports.arrowTheme = exports.pictureBackgroundColorTypes = exports.pictureMaskTypes = exports.pictureVerticalAlignTypes = exports.pictureAlignTypes = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 require("core-js/modules/es.array.map.js");
-var React = _interopRequireWildcard(require("react"));
+
+var _react = _interopRequireDefault(require("react"));
+
 var _uiCore = require("@megafon/ui-core");
+
 var _uiHelpers = require("@megafon/ui-helpers");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react2 = require("swiper/react");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 
-var pictureAlignTypes = exports.pictureAlignTypes = {
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+var pictureAlignTypes = {
   LEFT: 'left',
   RIGHT: 'right'
 };
-var pictureVerticalAlignTypes = exports.pictureVerticalAlignTypes = {
+exports.pictureAlignTypes = pictureAlignTypes;
+var pictureVerticalAlignTypes = {
   CENTER: 'center',
   TOP: 'top',
   UNSET: 'unset'
 };
-var pictureMaskTypes = exports.pictureMaskTypes = {
+exports.pictureVerticalAlignTypes = pictureVerticalAlignTypes;
+var pictureMaskTypes = {
   ANDROID: 'android',
   ANDROID_CROPPED: 'android-cropped',
   NEW_IPHONE: 'new-iphone',
@@ -40,96 +50,115 @@ var pictureMaskTypes = exports.pictureMaskTypes = {
   IPHONE_CROPPED: 'iphone-cropped',
   NONE: 'none'
 };
-var pictureBackgroundColorTypes = exports.pictureBackgroundColorTypes = {
+exports.pictureMaskTypes = pictureMaskTypes;
+var pictureBackgroundColorTypes = {
   SPB_SKY_0: 'spbSky0'
 };
-var arrowTheme = exports.arrowTheme = {
+exports.pictureBackgroundColorTypes = pictureBackgroundColorTypes;
+var arrowTheme = {
   PURPLE: 'purple',
   DARK: 'dark'
 };
-var elementOrderTypes = exports.elementOrderTypes = {
+exports.arrowTheme = arrowTheme;
+var elementOrderTypes = {
   DEFAULT: 'default',
   REVERSED: 'reversed'
 };
+exports.elementOrderTypes = elementOrderTypes;
 var testIdPrefix = 'Instructions';
 var cn = (0, _uiHelpers.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,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? '' : _ref$title,
-    instructionItems = _ref.instructionItems,
-    _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,
-    children = _ref.children;
-  var _React$useState = React.useState(),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    swiperInstance = _React$useState2[0],
-    setSwiperInstance = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-    slideIndex = _React$useState4[0],
-    setSlideIndex = _React$useState4[1];
+      rootRef = _ref.rootRef,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var instructionItem = _ref$classes.instructionItem,
+      desktopInstructionItem = _ref$classes.desktopInstructionItem,
+      mobileInstructionItem = _ref$classes.mobileInstructionItem,
+      activeInstructionItem = _ref$classes.activeInstructionItem,
+      desktopItemTitle = _ref$classes.desktopItemTitle,
+      mobileItemTitle = _ref$classes.mobileItemTitle,
+      instructionItemImg = _ref$classes.instructionItemImg,
+      additionalText = _ref$classes.additionalText,
+      arrowPrev = _ref$classes.arrowPrev,
+      arrowNext = _ref$classes.arrowNext,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      instructionItems = _ref.instructionItems,
+      _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,
+      children = _ref.children;
+
+  var _React$useState = _react["default"].useState(),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      swiperInstance = _React$useState2[0],
+      setSwiperInstance = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(0),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      slideIndex = _React$useState4[0],
+      setSlideIndex = _React$useState4[1];
+
   var isMobileReversed = elementOrder === 'reversed';
-  var getSwiperInstance = React.useCallback(function (swiper) {
+
+  var getSwiperInstance = _react["default"].useCallback(function (swiper) {
     setSwiperInstance(swiper);
     getSwiper && getSwiper(swiper);
   }, [getSwiper]);
-  var getActiveCustomClass = React.useCallback(function (articleIndex, activeIndex) {
+
+  var getActiveCustomClass = _react["default"].useCallback(function (articleIndex, activeIndex) {
     if (articleIndex !== activeIndex) {
       return undefined;
     }
+
     return activeInstructionItem;
   }, [activeInstructionItem]);
-  var handleArticleClick = React.useCallback(function (ind) {
+
+  var handleArticleClick = _react["default"].useCallback(function (ind) {
     return function () {
       setSlideIndex(ind);
       swiperInstance && swiperInstance.slideTo(ind);
     };
   }, [swiperInstance]);
-  var handleSlideChange = React.useCallback(function (_ref2) {
+
+  var handleSlideChange = _react["default"].useCallback(function (_ref2) {
     var activeIndex = _ref2.activeIndex;
     setSlideIndex(activeIndex);
   }, []);
-  var handlePrevClick = React.useCallback(function () {
+
+  var handlePrevClick = _react["default"].useCallback(function () {
     if (!swiperInstance) {
       return;
     }
+
     swiperInstance.slidePrev();
   }, [swiperInstance]);
-  var handleNextClick = React.useCallback(function () {
+
+  var handleNextClick = _react["default"].useCallback(function () {
     if (!swiperInstance) {
       return;
     }
+
     swiperInstance.slideNext();
   }, [swiperInstance]);
-  var renderVideo = React.useCallback(function (mediaUrl, index) {
-    return /*#__PURE__*/React.createElement("video", (0, _extends2["default"])({
+
+  var renderVideo = _react["default"].useCallback(function (mediaUrl, index) {
+    return /*#__PURE__*/_react["default"].createElement("video", (0, _extends2["default"])({
       loop: true,
       muted: true,
       autoPlay: true,
@@ -137,19 +166,20 @@ var Instructions = function Instructions(_ref) {
       className: cn('swiper-img', {
         video: true
       })
-    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, index + 1)), /*#__PURE__*/React.createElement("source", {
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, index + 1)), /*#__PURE__*/_react["default"].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", {
+
+  var renderMobileDots = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].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", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
         key: i,
         className: cn('articles-dot', {
           active: slideIndex === i
@@ -158,8 +188,9 @@ var Instructions = function Instructions(_ref) {
       }));
     }));
   }, [instructionItems, dataAttrs, slideIndex, instructionItem, mobileInstructionItem, getActiveCustomClass, handleArticleClick, isMobileReversed]);
-  var renderSlider = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement(_react2.Swiper, {
+
+  var renderSlider = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react2.Swiper, {
       noSwiping: false,
       onSwiper: getSwiperInstance,
       noSwipingClass: swiperSlideCn,
@@ -167,12 +198,12 @@ var Instructions = function Instructions(_ref) {
       className: cn('swiper')
     }, instructionItems.map(function (_ref3, i) {
       var mediaUrl = _ref3.mediaUrl,
-        isVideo = _ref3.isVideo,
-        imageAlt = _ref3.imageAlt;
-      return /*#__PURE__*/React.createElement(_react2.SwiperSlide, {
+          isVideo = _ref3.isVideo,
+          imageAlt = _ref3.imageAlt;
+      return /*#__PURE__*/_react["default"].createElement(_react2.SwiperSlide, {
         className: swiperSlideCn,
         key: i + mediaUrl
-      }, isVideo ? renderVideo(mediaUrl, i) : /*#__PURE__*/React.createElement("img", (0, _extends2["default"])({
+      }, isVideo ? renderVideo(mediaUrl, i) : /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({
         alt: imageAlt,
         src: mediaUrl
       }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, i + 1), {
@@ -180,51 +211,57 @@ var Instructions = function Instructions(_ref) {
       })));
     }));
   }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, handleSlideChange]);
-  var renderTitle = React.useCallback(function (resolution) {
-    return /*#__PURE__*/React.createElement(_uiCore.Header, {
+
+  var renderTitle = _react["default"].useCallback(function (resolution) {
+    return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
       className: cn('title', {
         resolution: resolution
       }),
       as: "h2"
     }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig));
   }, [title]);
-  var renderQrCode = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, instructionItems.map(function (_ref4, i) {
+
+  var renderQrCode = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, instructionItems.map(function (_ref4, i) {
       var qrCode = _ref4.qrCode,
-        qrCodeText = _ref4.qrCodeText;
-      return slideIndex === i && !!qrCode && /*#__PURE__*/React.createElement(_uiCore.Tile, {
+          qrCodeText = _ref4.qrCodeText;
+      return slideIndex === i && !!qrCode && /*#__PURE__*/_react["default"].createElement(_uiCore.Tile, {
         className: cn('qr-code'),
         radius: "rounded",
         shadowLevel: "default",
         key: qrCode
-      }, !!qrCodeText && /*#__PURE__*/React.createElement("div", {
+      }, !!qrCodeText && /*#__PURE__*/_react["default"].createElement("div", {
         className: cn('qr-code-text')
-      }, qrCodeText), /*#__PURE__*/React.createElement("img", {
+      }, qrCodeText), /*#__PURE__*/_react["default"].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(_uiCore.Paragraph, {
+
+  var renderText = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement(_uiCore.Paragraph, {
       className: cn('text', [additionalText]),
       hasMargin: false
     }, (0, _uiHelpers.convert)(text, _uiHelpers.textConvertConfig));
   }, [text, additionalText]);
-  var renderPicture = React.useCallback(function () {
+
+  var renderPicture = _react["default"].useCallback(function () {
     if (pictureMask === pictureMaskTypes.NONE) {
       return renderSlider();
     }
-    return /*#__PURE__*/React.createElement("div", {
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('img-wrapper'),
       "data-testid": "".concat(testIdPrefix, "-img-wrapper")
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('device-screen')
     }), renderSlider());
   }, [pictureMask, renderSlider]);
-  var renderDesktopArticles = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement("ul", {
+
+  var renderDesktopArticles = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement("ul", {
       className: cn('articles-list', {
         'text-after': !!text,
         desktop: true
@@ -232,47 +269,53 @@ var Instructions = function Instructions(_ref) {
       "data-testid": "".concat(testIdPrefix, "-articles-list-desktop")
     }, instructionItems.map(function (_ref5, i) {
       var itemTitle = _ref5.title;
-      return /*#__PURE__*/(
+      return (
+        /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        React.createElement("li", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+        _react["default"].createElement("li", (0, _extends2["default"])({}, (0, _uiHelpers.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", {
+        }), /*#__PURE__*/_react["default"].createElement("div", {
           className: cn('articles-item-dot')
-        }, /*#__PURE__*/React.createElement("span", {
+        }, /*#__PURE__*/_react["default"].createElement("span", {
           className: cn('articles-item-dot-number')
-        }, i + 1)), /*#__PURE__*/React.createElement("div", {
+        }, i + 1)), /*#__PURE__*/_react["default"].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", {
+
+  var renderMobileArticles = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('articles-list', {
         mobile: true
       }),
       "data-testid": "".concat(testIdPrefix, "-articles-list-mobile")
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('articles-title-block', {
-        reversed: isMobileReversed
+        reversed: isMobileReversed,
+        'with-numeration': showMobileNumeration
       })
     }, instructionItems.map(function (_ref6, i) {
       var itemTitle = _ref6.title;
-      return slideIndex === i && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+      return slideIndex === i && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
         key: i,
         "data-index": i
       }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, i + 1), {
         className: cn('articles-title', [mobileItemTitle])
-      }), itemTitle);
+      }), showMobileNumeration && /*#__PURE__*/_react["default"].createElement("span", {
+        className: cn('articles-num')
+      }, i + 1), itemTitle);
     })));
-  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, instructionItems, mobileItemTitle, slideIndex, isMobileReversed]);
-  var renderArrows = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_uiCore.NavArrow, {
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, instructionItems, mobileItemTitle, slideIndex, isMobileReversed, showMobileNumeration]);
+
+  var renderArrows = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_uiCore.NavArrow, {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
       },
@@ -282,7 +325,7 @@ var Instructions = function Instructions(_ref) {
       theme: arrowsTheme,
       disabled: slideIndex === 0,
       onClick: handlePrevClick
-    }), /*#__PURE__*/React.createElement(_uiCore.NavArrow, {
+    }), /*#__PURE__*/_react["default"].createElement(_uiCore.NavArrow, {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
       },
@@ -295,30 +338,74 @@ var Instructions = function Instructions(_ref) {
       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]);
-  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({
       mask: pictureMask,
       reversed: isMobileReversed
     }),
     ref: rootRef
-  }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
+  }), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
     hAlign: "center"
-  }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
     all: "12"
-  }, !!title && renderTitle('mobile'), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+  }, !!title && renderTitle('mobile'), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: cn('wrapper', {
       'vertical-align': pictureVerticalAlign
     })
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper)), /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper)), /*#__PURE__*/_react["default"].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", {
+  }, isMobileReversed && renderMobileArticles(), renderPicture(), !!showArrows && renderArrows(), renderQrCode()), renderMobileDots(), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('articles', {
       align: pictureAlign
     })
   }, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
 };
-var _default = exports["default"] = Instructions;
+
+Instructions.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    item: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    image: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    mobileItemText: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    wrapper: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    arrowPrev: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    arrowNext: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
+  classes: _propTypes["default"].shape({
+    instructionItem: _propTypes["default"].string,
+    desktopInstructionItem: _propTypes["default"].string,
+    mobileInstructionItem: _propTypes["default"].string,
+    activeInstructionItem: _propTypes["default"].string,
+    desktopItemTitle: _propTypes["default"].string,
+    mobileItemTitle: _propTypes["default"].string,
+    instructionItemImg: _propTypes["default"].string,
+    arrowPrev: _propTypes["default"].string,
+    arrowNext: _propTypes["default"].string
+  }),
+  title: _propTypes["default"].string,
+  additionalText: _propTypes["default"].string,
+  instructionItems: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
+    mediaUrl: _propTypes["default"].string.isRequired,
+    isVideo: _propTypes["default"].bool.isRequired,
+    imageAlt: _propTypes["default"].string
+  }).isRequired).isRequired,
+  pictureAlign: _propTypes["default"].oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT]),
+  pictureVerticalAlign: _propTypes["default"].oneOf([pictureVerticalAlignTypes.CENTER, pictureVerticalAlignTypes.TOP, pictureVerticalAlignTypes.UNSET]),
+  pictureMask: _propTypes["default"].oneOf([pictureMaskTypes.ANDROID, pictureMaskTypes.ANDROID_CROPPED, pictureMaskTypes.NEW_IPHONE, pictureMaskTypes.WHITE_IPHONE, pictureMaskTypes.BLACK_IPHONE, pictureMaskTypes.LAPTOP, pictureMaskTypes.LAPTOP_NEW, pictureMaskTypes.IPHONE_12, pictureMaskTypes.IPHONE_15, pictureMaskTypes.IPHONE_CROPPED, pictureMaskTypes.NONE]),
+  pictureBackgroundColor: _propTypes["default"].oneOf([pictureBackgroundColorTypes.SPB_SKY_0]),
+  showArrows: _propTypes["default"].bool,
+  arrowsTheme: _propTypes["default"].oneOf([arrowTheme.DARK, arrowTheme.PURPLE]),
+  elementOrder: _propTypes["default"].oneOf([elementOrderTypes.DEFAULT, elementOrderTypes.REVERSED]),
+  getSwiper: _propTypes["default"].func
+};
+var _default = Instructions;
+exports["default"] = _default;

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { Notification } from '@megafon/ui-core';
-import './NotificationBox.scss';
+import './style/NotificationBox.less';
 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'> & {
+declare type AlignType = typeof Align[keyof typeof Align];
+declare type NotificationProps = React.ComponentProps<typeof Notification>;
+declare type NotificationBoxProps = Omit<NotificationProps, 'isColored'> & {
     /** Горизонтальное выравнивание */
     align?: AlignType;
 };