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

package/dist/es/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/es/components/Instructions/Instructions.js

@@ -1,11 +1,14 @@
 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 React from 'react';
 import { Grid, GridColumn, Header, NavArrow, Paragraph, Tile } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs, titleConvertConfig, convert, textConvertConfig } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import "./Instructions.css";
 export var pictureAlignTypes = {
@@ -44,47 +47,52 @@ export var elementOrderTypes = {
 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,
-    _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;
+      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.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    swiperInstance = _React$useState2[0],
-    setSwiperInstance = _React$useState2[1];
+      _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];
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      slideIndex = _React$useState4[0],
+      setSlideIndex = _React$useState4[1];
+
   var isMobileReversed = elementOrder === 'reversed';
   var getSwiperInstance = React.useCallback(function (swiper) {
     setSwiperInstance(swiper);
@@ -94,6 +102,7 @@ var Instructions = function Instructions(_ref) {
     if (articleIndex !== activeIndex) {
       return undefined;
     }
+
     return activeInstructionItem;
   }, [activeInstructionItem]);
   var handleArticleClick = React.useCallback(function (ind) {
@@ -110,12 +119,14 @@ var Instructions = function Instructions(_ref) {
     if (!swiperInstance) {
       return;
     }
+
     swiperInstance.slidePrev();
   }, [swiperInstance]);
   var handleNextClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
     }
+
     swiperInstance.slideNext();
   }, [swiperInstance]);
   var renderVideo = React.useCallback(function (mediaUrl, index) {
@@ -157,8 +168,8 @@ var Instructions = function Instructions(_ref) {
       className: cn('swiper')
     }, instructionItems.map(function (_ref3, i) {
       var mediaUrl = _ref3.mediaUrl,
-        isVideo = _ref3.isVideo,
-        imageAlt = _ref3.imageAlt;
+          isVideo = _ref3.isVideo,
+          imageAlt = _ref3.imageAlt;
       return /*#__PURE__*/React.createElement(SwiperSlide, {
         className: swiperSlideCn,
         key: i + mediaUrl
@@ -181,7 +192,7 @@ var Instructions = function Instructions(_ref) {
   var renderQrCode = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, instructionItems.map(function (_ref4, i) {
       var qrCode = _ref4.qrCode,
-        qrCodeText = _ref4.qrCodeText;
+          qrCodeText = _ref4.qrCodeText;
       return slideIndex === i && !!qrCode && /*#__PURE__*/React.createElement(Tile, {
         className: cn('qr-code'),
         radius: "rounded",
@@ -206,6 +217,7 @@ var Instructions = function Instructions(_ref) {
     if (pictureMask === pictureMaskTypes.NONE) {
       return renderSlider();
     }
+
     return /*#__PURE__*/React.createElement("div", {
       className: cn('img-wrapper'),
       "data-testid": "".concat(testIdPrefix, "-img-wrapper")
@@ -250,7 +262,8 @@ var Instructions = function Instructions(_ref) {
       "data-testid": "".concat(testIdPrefix, "-articles-list-mobile")
     }, /*#__PURE__*/React.createElement("div", {
       className: cn('articles-title-block', {
-        reversed: isMobileReversed
+        reversed: isMobileReversed,
+        'with-numeration': showMobileNumeration
       })
     }, instructionItems.map(function (_ref6, i) {
       var itemTitle = _ref6.title;
@@ -259,9 +272,11 @@ var Instructions = function Instructions(_ref) {
         "data-index": i
       }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, i + 1), {
         className: cn('articles-title', [mobileItemTitle])
-      }), itemTitle);
+      }), showMobileNumeration && /*#__PURE__*/React.createElement("span", {
+        className: cn('articles-num')
+      }, i + 1), itemTitle);
     })));
-  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, instructionItems, mobileItemTitle, slideIndex, isMobileReversed]);
+  }, [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: {
@@ -312,4 +327,46 @@ var Instructions = function Instructions(_ref) {
     })
   }, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
 };
+
+Instructions.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    item: PropTypes.objectOf(PropTypes.string.isRequired),
+    image: PropTypes.objectOf(PropTypes.string.isRequired),
+    mobileItemText: PropTypes.objectOf(PropTypes.string.isRequired),
+    wrapper: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowPrev: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowNext: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  classes: PropTypes.shape({
+    instructionItem: PropTypes.string,
+    desktopInstructionItem: PropTypes.string,
+    mobileInstructionItem: PropTypes.string,
+    activeInstructionItem: PropTypes.string,
+    desktopItemTitle: PropTypes.string,
+    mobileItemTitle: PropTypes.string,
+    instructionItemImg: PropTypes.string,
+    arrowPrev: PropTypes.string,
+    arrowNext: PropTypes.string
+  }),
+  title: PropTypes.string,
+  additionalText: PropTypes.string,
+  instructionItems: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+    mediaUrl: PropTypes.string.isRequired,
+    isVideo: PropTypes.bool.isRequired,
+    imageAlt: PropTypes.string
+  }).isRequired).isRequired,
+  pictureAlign: PropTypes.oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT]),
+  pictureVerticalAlign: PropTypes.oneOf([pictureVerticalAlignTypes.CENTER, pictureVerticalAlignTypes.TOP, pictureVerticalAlignTypes.UNSET]),
+  pictureMask: PropTypes.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.oneOf([pictureBackgroundColorTypes.SPB_SKY_0]),
+  showArrows: PropTypes.bool,
+  arrowsTheme: PropTypes.oneOf([arrowTheme.DARK, arrowTheme.PURPLE]),
+  elementOrder: PropTypes.oneOf([elementOrderTypes.DEFAULT, elementOrderTypes.REVERSED]),
+  getSwiper: PropTypes.func
+};
 export default Instructions;

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

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

@@ -1,27 +1,37 @@
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.values.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];
+
+  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";
+import PropTypes from 'prop-types';
+import "./style/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"]);
+      align = _a$align === void 0 ? 'left' : _a$align,
+      restProps = __rest(_a, ["align"]);
+
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
       align: align
@@ -32,4 +42,8 @@ var NotificationBox = function NotificationBox(_a) {
     isColored: false
   }))));
 };
+
+NotificationBox.propTypes = {
+  align: PropTypes.oneOf(Object.values(Align))
+};
 export default NotificationBox;

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

@@ -0,0 +1,28 @@
+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/PageTitle/PageTitle.css

@@ -1 +1,80 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-page-title{display:inline-block;width:100%}.mfui-page-title__breadcrumbs{margin-top:32px}@media screen and (max-width:767px){.mfui-page-title__breadcrumbs{display:none}}.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__badge+.mfui-page-title__title{margin-top:8px}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-page-title {
+  display: inline-block;
+  width: 100%;
+}
+.mfui-page-title__breadcrumbs {
+  margin-top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-page-title__breadcrumbs {
+    display: none;
+  }
+}
+.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 {
+  font-size: 12px;
+  line-height: 18px;
+  display: inline-block;
+  margin-top: 16px;
+  padding: 2px 14px;
+  color: var(--stcWhite);
+  font-weight: 500;
+  background-color: var(--brandPurple);
+}
+@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__badge + .mfui-page-title__title {
+  margin-top: 8px;
+}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import './PageTitle.less';
 import { Props as BreadcrumbsType } from '../Breadcrumbs/Breadcrumbs';
-import './PageTitle.scss';
-export type PageTitleProps = {
+export declare type PageTitleProps = {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/es/components/PageTitle/PageTitle.js

@@ -2,23 +2,25 @@ import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { Header, Grid, GridColumn } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
+import PropTypes from 'prop-types';
 import "./PageTitle.css";
+import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
 var testIdPrefix = 'PageTitle';
 var cn = cnCreate('mfui-page-title');
+
 var PageTitle = function PageTitle(_ref) {
   var dataAttrs = _ref.dataAttrs,
-    title = _ref.title,
-    breadcrumbs = _ref.breadcrumbs,
-    badge = _ref.badge,
-    _ref$isFullWidth = _ref.isFullWidth,
-    isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
-    _ref$hasBreadcrumbsMi = _ref.hasBreadcrumbsMicrodata,
-    hasBreadcrumbsMicrodata = _ref$hasBreadcrumbsMi === void 0 ? false : _ref$hasBreadcrumbsMi,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    rootRef = _ref.rootRef;
+      title = _ref.title,
+      breadcrumbs = _ref.breadcrumbs,
+      badge = _ref.badge,
+      _ref$isFullWidth = _ref.isFullWidth,
+      isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
+      _ref$hasBreadcrumbsMi = _ref.hasBreadcrumbsMicrodata,
+      hasBreadcrumbsMicrodata = _ref$hasBreadcrumbsMi === void 0 ? false : _ref$hasBreadcrumbsMi,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef;
   var isBreadcrumbs = !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length);
   var renderPageTitle = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, badge && /*#__PURE__*/React.createElement("div", {
@@ -59,4 +61,27 @@ var PageTitle = function PageTitle(_ref) {
     className: cn('breadcrumbs', [classes.breadcrumbs])
   }), isFullWidth ? renderPageTitle() : renderPageTitleWithGrid());
 };
+
+PageTitle.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    breadcrumbs: PropTypes.objectOf(PropTypes.string.isRequired),
+    breadcrumbsLink: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string
+  }).isRequired),
+  badge: PropTypes.string,
+  isFullWidth: PropTypes.bool,
+  hasBreadcrumbsMicrodata: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    breadcrumbs: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
 export default PageTitle;

package/dist/es/components/Partners/Partners.css

@@ -1 +1,53 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-partners__tile:not(:last-child){margin-bottom:20px}@media screen and (max-width:767px){.mfui-partners__tile:not(:last-child){margin-bottom:16px}}.mfui-partners__tile-inner{-webkit-box-sizing:border-box;box-sizing:border-box;height:132px;padding:28px 48px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-partners__tile-inner{height:104px;padding:22px 37px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-partners__tile-inner{height:77px;padding:10px}}@media screen and (max-width:767px){.mfui-partners__tile-inner{height:60px;padding:8px}}.mfui-partners__img-wrapper{height:100%;position:relative;width:100%}.mfui-partners__tile-img{left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-partners__tile:not(:last-child) {
+  margin-bottom: 20px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-partners__tile:not(:last-child) {
+    margin-bottom: 16px;
+  }
+}
+.mfui-partners__tile-inner {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 132px;
+  padding: 28px 48px;
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-partners__tile-inner {
+    height: 104px;
+    padding: 22px 37px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-partners__tile-inner {
+    height: 77px;
+    padding: 10px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-partners__tile-inner {
+    height: 60px;
+    padding: 8px;
+  }
+}
+.mfui-partners__img-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.mfui-partners__tile-img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import './Partners.scss';
-export type ItemType = {
+import './Partners.less';
+export declare type ItemType = {
     src: string;
     href?: string;
     alt: string;