@megafon/ui-shared 6.4.0 → 7.0.0

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

@@ -1,6 +1,6 @@
-import React, { Ref } from 'react';
+import * as React from 'react';
 import SwiperCore from 'swiper';
-import './Instructions.less';
+import './Instructions.scss';
 export declare const pictureAlignTypes: {
     readonly LEFT: "left";
     readonly RIGHT: "right";
@@ -34,13 +34,13 @@ export declare const elementOrderTypes: {
     readonly DEFAULT: "default";
     readonly REVERSED: "reversed";
 };
-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 = {
+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 = {
     title: string | React.ReactNode | React.ReactNode[];
     mediaUrl: string;
     isVideo: boolean;
@@ -62,7 +62,7 @@ export interface IInstructionsProps {
         arrowNext?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: Ref<HTMLDivElement>;
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Дополнительные классы для внутренних элементов */
     classes?: {
         instructionItem?: string;
@@ -101,5 +101,5 @@ export interface IInstructionsProps {
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
 }
-declare const Instructions: React.FC<IInstructionsProps>;
+declare const Instructions: React.FC<React.PropsWithChildren<IInstructionsProps>>;
 export default Instructions;

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

@@ -1,43 +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["default"] = exports.elementOrderTypes = exports.arrowTheme = exports.pictureBackgroundColorTypes = exports.pictureMaskTypes = exports.pictureVerticalAlignTypes = exports.pictureAlignTypes = void 0;
-
+exports.pictureVerticalAlignTypes = exports.pictureMaskTypes = exports.pictureBackgroundColorTypes = exports.pictureAlignTypes = exports.elementOrderTypes = exports["default"] = exports.arrowTheme = 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 = _interopRequireDefault(require("react"));
-
+var React = _interopRequireWildcard(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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
+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 && {}.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(e) { return e && e.__esModule ? e : { "default": e }; }
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-var pictureAlignTypes = {
+
+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    ");
+}
+var pictureAlignTypes = exports.pictureAlignTypes = {
   LEFT: 'left',
   RIGHT: 'right'
 };
-exports.pictureAlignTypes = pictureAlignTypes;
-var pictureVerticalAlignTypes = {
+var pictureVerticalAlignTypes = exports.pictureVerticalAlignTypes = {
   CENTER: 'center',
   TOP: 'top',
   UNSET: 'unset'
 };
-exports.pictureVerticalAlignTypes = pictureVerticalAlignTypes;
-var pictureMaskTypes = {
+var pictureMaskTypes = exports.pictureMaskTypes = {
   ANDROID: 'android',
   ANDROID_CROPPED: 'android-cropped',
   NEW_IPHONE: 'new-iphone',
@@ -50,115 +50,97 @@ var pictureMaskTypes = {
   IPHONE_CROPPED: 'iphone-cropped',
   NONE: 'none'
 };
-exports.pictureMaskTypes = pictureMaskTypes;
-var pictureBackgroundColorTypes = {
+var pictureBackgroundColorTypes = exports.pictureBackgroundColorTypes = {
   SPB_SKY_0: 'spbSky0'
 };
-exports.pictureBackgroundColorTypes = pictureBackgroundColorTypes;
-var arrowTheme = {
+var arrowTheme = exports.arrowTheme = {
   PURPLE: 'purple',
   DARK: 'dark'
 };
-exports.arrowTheme = arrowTheme;
-var elementOrderTypes = {
+var elementOrderTypes = exports.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$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];
-
+    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,
+    showMobileNumeration = _ref.showMobileNumeration,
+    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];
   var isMobileReversed = elementOrder === 'reversed';
-
-  var getSwiperInstance = _react["default"].useCallback(function (swiper) {
+  var getSwiperInstance = React.useCallback(function (swiper) {
     setSwiperInstance(swiper);
     getSwiper && getSwiper(swiper);
   }, [getSwiper]);
-
-  var getActiveCustomClass = _react["default"].useCallback(function (articleIndex, activeIndex) {
+  var getActiveCustomClass = React.useCallback(function (articleIndex, activeIndex) {
     if (articleIndex !== activeIndex) {
       return undefined;
     }
-
     return activeInstructionItem;
   }, [activeInstructionItem]);
-
-  var handleArticleClick = _react["default"].useCallback(function (ind) {
+  var handleArticleClick = React.useCallback(function (ind) {
     return function () {
       setSlideIndex(ind);
       swiperInstance && swiperInstance.slideTo(ind);
     };
   }, [swiperInstance]);
-
-  var handleSlideChange = _react["default"].useCallback(function (_ref2) {
+  var handleSlideChange = React.useCallback(function (_ref2) {
     var activeIndex = _ref2.activeIndex;
     setSlideIndex(activeIndex);
   }, []);
-
-  var handlePrevClick = _react["default"].useCallback(function () {
+  var handlePrevClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
     }
-
     swiperInstance.slidePrev();
   }, [swiperInstance]);
-
-  var handleNextClick = _react["default"].useCallback(function () {
+  var handleNextClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
     }
-
     swiperInstance.slideNext();
   }, [swiperInstance]);
-
-  var renderVideo = _react["default"].useCallback(function (mediaUrl, index) {
-    return /*#__PURE__*/_react["default"].createElement("video", (0, _extends2["default"])({
+  var renderVideo = React.useCallback(function (mediaUrl, index) {
+    return /*#__PURE__*/React.createElement("video", (0, _extends2["default"])({
       loop: true,
       muted: true,
       autoPlay: true,
@@ -166,20 +148,19 @@ 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["default"].createElement("source", {
+    }, (0, _uiHelpers.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["default"].useCallback(function () {
-    return /*#__PURE__*/_react["default"].createElement("ul", {
+  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["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+      return /*#__PURE__*/React.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
@@ -188,9 +169,11 @@ var Instructions = function Instructions(_ref) {
       }));
     }));
   }, [instructionItems, dataAttrs, slideIndex, instructionItem, mobileInstructionItem, getActiveCustomClass, handleArticleClick, isMobileReversed]);
-
-  var renderSlider = _react["default"].useCallback(function () {
-    return /*#__PURE__*/_react["default"].createElement(_react2.Swiper, {
+  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,
@@ -198,12 +181,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["default"].createElement(_react2.SwiperSlide, {
+        isVideo = _ref3.isVideo,
+        imageAlt = _ref3.imageAlt;
+      return /*#__PURE__*/React.createElement(SwiperSlide, {
         className: swiperSlideCn,
         key: i + mediaUrl
-      }, isVideo ? renderVideo(mediaUrl, i) : /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({
+      }, isVideo ? renderVideo(mediaUrl, i) : /*#__PURE__*/React.createElement("img", (0, _extends2["default"])({
         alt: imageAlt,
         src: mediaUrl
       }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, i + 1), {
@@ -211,57 +194,51 @@ var Instructions = function Instructions(_ref) {
       })));
     }));
   }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, handleSlideChange]);
-
-  var renderTitle = _react["default"].useCallback(function (resolution) {
-    return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+  var renderTitle = React.useCallback(function (resolution) {
+    return /*#__PURE__*/React.createElement(_uiCore.Header, {
       className: cn('title', {
         resolution: resolution
       }),
       as: "h2"
     }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig));
   }, [title]);
-
-  var renderQrCode = _react["default"].useCallback(function () {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, instructionItems.map(function (_ref4, i) {
+  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["default"].createElement(_uiCore.Tile, {
+        qrCodeText = _ref4.qrCodeText;
+      return slideIndex === i && !!qrCode && /*#__PURE__*/React.createElement(_uiCore.Tile, {
         className: cn('qr-code'),
         radius: "rounded",
         shadowLevel: "default",
         key: qrCode
-      }, !!qrCodeText && /*#__PURE__*/_react["default"].createElement("div", {
+      }, !!qrCodeText && /*#__PURE__*/React.createElement("div", {
         className: cn('qr-code-text')
-      }, qrCodeText), /*#__PURE__*/_react["default"].createElement("img", {
+      }, qrCodeText), /*#__PURE__*/React.createElement("img", {
         src: qrCode,
         className: cn('qr-code-image'),
         alt: "QR-\u043A\u043E\u0434"
       }));
     }));
   }, [instructionItems, slideIndex]);
-
-  var renderText = _react["default"].useCallback(function () {
-    return /*#__PURE__*/_react["default"].createElement(_uiCore.Paragraph, {
+  var renderText = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
       className: cn('text', [additionalText]),
       hasMargin: false
     }, (0, _uiHelpers.convert)(text, _uiHelpers.textConvertConfig));
   }, [text, additionalText]);
-
-  var renderPicture = _react["default"].useCallback(function () {
+  var renderPicture = React.useCallback(function () {
     if (pictureMask === pictureMaskTypes.NONE) {
       return renderSlider();
     }
-
-    return /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: cn('img-wrapper'),
       "data-testid": "".concat(testIdPrefix, "-img-wrapper")
-    }, /*#__PURE__*/_react["default"].createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: cn('device-screen')
     }), renderSlider());
   }, [pictureMask, renderSlider]);
-
-  var renderDesktopArticles = _react["default"].useCallback(function () {
-    return /*#__PURE__*/_react["default"].createElement("ul", {
+  var renderDesktopArticles = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement("ul", {
       className: cn('articles-list', {
         'text-after': !!text,
         desktop: true
@@ -269,54 +246,51 @@ 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["default"].createElement("li", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+        React.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["default"].createElement("div", {
+        }), /*#__PURE__*/React.createElement("div", {
           className: cn('articles-item-dot')
-        }, /*#__PURE__*/_react["default"].createElement("span", {
+        }, /*#__PURE__*/React.createElement("span", {
           className: cn('articles-item-dot-number')
-        }, i + 1)), /*#__PURE__*/_react["default"].createElement("div", {
+        }, 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["default"].useCallback(function () {
-    return /*#__PURE__*/_react["default"].createElement("div", {
+  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["default"].createElement("div", {
+    }, /*#__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["default"].createElement("div", {
+      return slideIndex === i && /*#__PURE__*/React.createElement("div", {
         key: i,
         "data-index": i,
         className: cn('articles-title')
-      }, showMobileNumeration && /*#__PURE__*/_react["default"].createElement("span", {
+      }, showMobileNumeration && /*#__PURE__*/React.createElement("span", {
         className: cn('articles-num')
-      }, i + 1), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, i + 1), {
+      }, i + 1), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.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["default"].useCallback(function () {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_uiCore.NavArrow, {
+  var renderArrows = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_uiCore.NavArrow, {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
       },
@@ -326,7 +300,7 @@ var Instructions = function Instructions(_ref) {
       theme: arrowsTheme,
       disabled: slideIndex === 0,
       onClick: handlePrevClick
-    }), /*#__PURE__*/_react["default"].createElement(_uiCore.NavArrow, {
+    }), /*#__PURE__*/React.createElement(_uiCore.NavArrow, {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
       },
@@ -339,74 +313,30 @@ 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["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  return /*#__PURE__*/React.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["default"].createElement(_uiCore.Grid, {
+  }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
     hAlign: "center"
-  }, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
+  }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
     all: "12"
-  }, !!title && renderTitle('mobile'), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+  }, !!title && renderTitle('mobile'), /*#__PURE__*/React.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["default"].createElement("div", {
+  }, (0, _uiHelpers.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["default"].createElement("div", {
+  }, isMobileReversed && renderMobileArticles(), renderPicture(), !!showArrows && renderArrows(), renderQrCode()), renderMobileDots(), /*#__PURE__*/React.createElement("div", {
     className: cn('articles', {
       align: pictureAlign
     })
   }, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
 };
-
-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;
+var _default = exports["default"] = Instructions;

package/dist/lib/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/lib/components/NotificationBox/NotificationBox.d.ts

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