@megafon/ui-core 5.9.2 → 5.10.0

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

@@ -1,8 +1,23 @@
 import * as React from 'react';
+import SwiperCore from 'swiper';
+import { ThemeType as ArrowThemeType } from '../NavArrow/NavArrow';
 import './Banner.less';
+export declare const BackgroundColor: {
+    readonly TRANSPARENT: "transparent";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly GRADIENT: "gradient";
+    readonly LIGHT: "light";
+};
+declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
+export declare const Radius: {
+    readonly CORNERS: "corners";
+    readonly ROUNDED: "rounded";
+};
+export declare type RadiusType = typeof Radius[keyof typeof Radius];
 export declare const NavTheme: {
     readonly LIGHT: "light";
-    readonly GREEN: "green";
     readonly DARK: "dark";
 };
 declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
@@ -13,8 +28,13 @@ export interface IBannerProps {
     loop?: boolean;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
+        swiper?: string;
         slide?: string;
         arrow?: string;
+        arrowPrev?: string;
+        arrowNext?: string;
+        pagination?: string;
+        dot?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -34,10 +54,18 @@ export interface IBannerProps {
     autoPlayDelay?: number;
     /** Пауза автоматической прокрутки при наведении курсора на компонент */
     pauseOnHover?: boolean;
+    /** Фоновый цвет */
+    backgroundColor?: BackgroundColorType;
+    /** Радиус границы */
+    radius?: RadiusType;
     /** Цветовая тема навигации */
     navTheme?: NavThemeType;
+    /** Цветовая тема стрелок */
+    arrowTheme?: ArrowThemeType;
     /** Автоматическая высота слайдов */
     autoHeight?: boolean;
+    /** Ref на swiper */
+    getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */
     onNextClick?: (index: number) => void;
     /** Обработчик клика по стрелке "назад" (должен быть обернут в useCallback) */

package/dist/lib/components/Banner/Banner.js

@@ -5,7 +5,7 @@ function _typeof3(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "funct
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.NavTheme = void 0;
+exports["default"] = exports.NavTheme = exports.Radius = exports.BackgroundColor = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -39,9 +39,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 _swiper["default"].use([_swiper.Autoplay]);
 
+var BackgroundColor = {
+  TRANSPARENT: 'transparent',
+  GREEN: 'green',
+  PURPLE: 'purple',
+  SPB_SKY_0: 'spbSky0',
+  GRADIENT: 'gradient',
+  LIGHT: 'light'
+};
+exports.BackgroundColor = BackgroundColor;
+var Radius = {
+  CORNERS: 'corners',
+  ROUNDED: 'rounded'
+};
+exports.Radius = Radius;
 var NavTheme = {
   LIGHT: 'light',
-  GREEN: 'green',
   DARK: 'dark'
 };
 exports.NavTheme = NavTheme;
@@ -70,11 +83,18 @@ var Banner = function Banner(_ref) {
       _ref$loop = _ref.loop,
       loop = _ref$loop === void 0 ? false : _ref$loop,
       _ref$navTheme = _ref.navTheme,
-      navTheme = _ref$navTheme === void 0 ? 'light' : _ref$navTheme,
+      navTheme = _ref$navTheme === void 0 ? NavTheme.LIGHT : _ref$navTheme,
+      _ref$arrowTheme = _ref.arrowTheme,
+      arrowTheme = _ref$arrowTheme === void 0 ? _NavArrow.Theme.DARK : _ref$arrowTheme,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref$backgroundColor,
+      _ref$radius = _ref.radius,
+      radius = _ref$radius === void 0 ? Radius.ROUNDED : _ref$radius,
       _ref$autoHeight = _ref.autoHeight,
       autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
       _ref$children = _ref.children,
       children = _ref$children === void 0 ? [] : _ref$children,
+      getSwiper = _ref.getSwiper,
       onNextClick = _ref.onNextClick,
       onPrevClick = _ref.onPrevClick,
       onDotClick = _ref.onDotClick,
@@ -83,44 +103,49 @@ var Banner = function Banner(_ref) {
       _ref$pauseOnHover = _ref.pauseOnHover,
       pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover;
 
-  var _React$useState = React.useState(),
+  var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      swiperInstance = _React$useState2[0],
-      setSwiperInstance = _React$useState2[1];
+      isTouch = _React$useState2[0],
+      setTouch = _React$useState2[1];
 
-  var _React$useState3 = React.useState(true),
+  var _React$useState3 = React.useState(),
       _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-      isBeginning = _React$useState4[0],
-      setBeginning = _React$useState4[1];
+      swiperInstance = _React$useState4[0],
+      setSwiperInstance = _React$useState4[1];
 
-  var _React$useState5 = React.useState(false),
+  var _React$useState5 = React.useState(true),
       _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
-      isEnd = _React$useState6[0],
-      setEnd = _React$useState6[1];
+      isBeginning = _React$useState6[0],
+      setBeginning = _React$useState6[1];
 
-  var _React$useState7 = React.useState(autoPlay),
+  var _React$useState7 = React.useState(false),
       _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
-      isAutoPlaying = _React$useState8[0],
-      setAutoPlaying = _React$useState8[1];
+      isEnd = _React$useState8[0],
+      setEnd = _React$useState8[1];
 
-  var _React$useState9 = React.useState(0),
+  var _React$useState9 = React.useState(autoPlay),
       _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
-      activeIndex = _React$useState10[0],
-      setActiveIndex = _React$useState10[1];
+      isAutoPlaying = _React$useState10[0],
+      setAutoPlaying = _React$useState10[1];
 
-  var _React$useState11 = React.useState(autoPlayDelay),
+  var _React$useState11 = React.useState(0),
       _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
-      delay = _React$useState12[0],
-      setDelay = _React$useState12[1];
+      activeIndex = _React$useState12[0],
+      setActiveIndex = _React$useState12[1];
 
-  var _React$useState13 = React.useState(false),
+  var _React$useState13 = React.useState(autoPlayDelay),
       _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
-      isIncreasedDelay = _React$useState14[0],
-      setIsIncreasedDelay = _React$useState14[1];
+      delay = _React$useState14[0],
+      setDelay = _React$useState14[1];
 
+  var _React$useState15 = React.useState(false),
+      _React$useState16 = (0, _slicedToArray2["default"])(_React$useState15, 2),
+      isIncreasedDelay = _React$useState16[0],
+      setIsIncreasedDelay = _React$useState16[1];
+
+  var isSingleSlide = React.Children.count(children) === 1;
   var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
   var dotTimerDelay = delay / 1000;
-  var navArrowTheme = navTheme === NavTheme.DARK ? _NavArrow.Theme.DARK : _NavArrow.Theme.PURPLE;
   var rootRef = React.useRef(null);
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
@@ -190,6 +215,13 @@ var Banner = function Banner(_ref) {
     setActiveIndex(realIndex);
     onChange === null || onChange === void 0 ? void 0 : onChange(realIndex);
   }, [onChange]);
+  var handleSwiper = React.useCallback(function (swiper) {
+    setSwiperInstance(swiper);
+    getSwiper === null || getSwiper === void 0 ? void 0 : getSwiper(swiper);
+  }, [getSwiper]);
+  React.useEffect(function () {
+    setTouch((0, _uiHelpers.detectTouch)());
+  }, []);
   React.useEffect(function () {
     var rootElement = rootRef.current;
 
@@ -209,15 +241,18 @@ var Banner = function Banner(_ref) {
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'nav-theme': navTheme,
-      'auto-height': autoHeight
+      'auto-height': autoHeight,
+      'background-color': backgroundColor,
+      'no-touch': !isTouch,
+      radius: radius
     }, className),
     ref: rootRef
   }), /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
-    className: cn('swiper'),
+    className: cn('swiper', [classes.swiper]),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
     watchSlidesVisibility: true,
-    onSwiper: setSwiperInstance,
+    onSwiper: handleSwiper,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
     onFromEdge: handleFromEdge,
@@ -225,58 +260,69 @@ var Banner = function Banner(_ref) {
     onTouchEnd: increaseAutoplayDelay
   }), React.Children.map(children, function (child, i) {
     return /*#__PURE__*/React.createElement(_react2.SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
-      key: i,
-      className: cn('slide', classes === null || classes === void 0 ? void 0 : classes.slide)
-    }), child);
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+      className: cn('slide', [classes.slide]),
+      key: i
+    }), /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.cloneElement(child, {
+      backgroundColor: backgroundColor,
+      hasBottomOffset: !isSingleSlide
+    }));
+  })), !isSingleSlide && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    className: cn('arrow', {
+      prev: true,
+      theme: arrowTheme
+    }, [classes.arrow, classes.arrowPrev]),
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
     },
-    className: cn('arrow', {
-      prev: true
-    }, [classes.arrow]),
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
-    theme: navArrowTheme
+    theme: arrowTheme
   }), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    className: cn('arrow', {
+      next: true,
+      theme: arrowTheme
+    }, [classes.arrow, classes.arrowNext]),
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
     },
-    className: cn('arrow', {
-      next: true
-    }, [classes.arrow]),
     view: "next",
     onClick: handleNextClick,
     disabled: !loop && isEnd,
-    theme: navArrowTheme
+    theme: arrowTheme
   }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
       theme: navTheme,
       'bottom-offset': withPaginationBottomOffset
-    })
+    }, [classes.pagination])
   }), React.Children.map(children, function (_, i) {
     return /*#__PURE__*/React.createElement(_BannerDot["default"], {
+      className: cn('dot', [classes.dot]),
       dataAttrs: {
         root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1))
       },
       key: i,
-      className: cn('dot'),
       index: i,
       isActive: i === activeIndex,
       showTimer: showDotTimer,
       timerDelay: dotTimerDelay,
+      theme: navTheme,
       onClick: handleDotClick
     });
-  })));
+  }))));
 };
 
 Banner.propTypes = {
   className: PropTypes.string,
   loop: PropTypes.bool,
   classes: PropTypes.shape({
-    slide: PropTypes.string
+    swiper: PropTypes.string,
+    slide: PropTypes.string,
+    arrow: PropTypes.string,
+    arrowPrev: PropTypes.string,
+    arrowNext: PropTypes.string,
+    pagination: PropTypes.string,
+    dot: PropTypes.string
   }),
-  withPaginationBottomOffset: PropTypes.bool,
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     swiper: PropTypes.objectOf(PropTypes.string.isRequired),
@@ -286,11 +332,16 @@ Banner.propTypes = {
     pagination: PropTypes.objectOf(PropTypes.string.isRequired),
     dot: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
+  withPaginationBottomOffset: PropTypes.bool,
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
   pauseOnHover: PropTypes.bool,
+  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
+  radius: PropTypes.oneOf(Object.values(Radius)),
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),
+  arrowTheme: PropTypes.oneOf(Object.values(_NavArrow.Theme)),
   autoHeight: PropTypes.bool,
+  getSwiper: PropTypes.func,
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,
   onDotClick: PropTypes.func,

package/dist/lib/components/Banner/BannerDot.css

@@ -1,4 +1,5 @@
 .mfui-banner-dot {
+  position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -11,60 +12,65 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   padding: 2px;
-  border-radius: 50%;
   cursor: pointer;
 }
 .mfui-banner-dot:before {
   content: '';
   display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
   background-color: var(--stcWhite50);
 }
+.mfui-banner-dot_theme_light.mfui-banner-dot_active:before {
+  background-color: var(--stcWhite);
+}
+.mfui-banner-dot_theme_light.mfui-banner-dot_active .mfui-banner-dot__timer-inner {
+  fill: var(--stcWhite);
+}
+.mfui-banner-dot_theme_dark.mfui-banner-dot_active:before {
+  background-color: var(--brandGreen);
+}
+.mfui-banner-dot_theme_dark.mfui-banner-dot_active .mfui-banner-dot__timer-inner {
+  fill: var(--brandGreen);
+}
 .mfui-banner-dot_active {
-  padding: 0;
   cursor: default;
 }
 .mfui-banner-dot_active:before {
-  background-color: var(--stcWhite);
+  width: 24px;
 }
 .mfui-banner-dot_active.mfui-banner-dot_timer:before {
-  display: none;
+  background-color: var(--stcWhite50);
 }
 .mfui-banner-dot__timer {
+  position: absolute;
   display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  -webkit-transform: rotate(90deg);
-          transform: rotate(90deg);
+  width: 24px;
+  height: 8px;
+  border-radius: 4px;
 }
-.mfui-banner-dot__timer-circle {
+.mfui-banner-dot__timer-inner {
   -webkit-transform: scale(-1, 1);
           transform: scale(-1, 1);
   -webkit-transform-origin: center;
           transform-origin: center;
   -webkit-animation: timer linear;
           animation: timer linear;
-  fill: var(--stcWhite50);
-  stroke: var(--base);
-  stroke-width: 100;
-  stroke-dasharray: 1000;
 }
 @-webkit-keyframes timer {
   0% {
-    stroke-dashoffset: -350;
+    width: 100%;
   }
   100% {
-    stroke-dashoffset: 0;
+    width: 0;
   }
 }
 @keyframes timer {
   0% {
-    stroke-dashoffset: -350;
+    width: 100%;
   }
   100% {
-    stroke-dashoffset: 0;
+    width: 0;
   }
 }

package/dist/lib/components/Banner/BannerDot.d.ts

@@ -1,15 +1,22 @@
 import * as React from 'react';
 import './BannerDot.less';
+export declare const BannerDotTheme: {
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+};
+declare type BannerDotThemeType = typeof BannerDotTheme[keyof typeof BannerDotTheme];
 export interface IBannerDotProps {
     className?: string;
     index: number;
     isActive: boolean;
     showTimer: boolean;
     timerDelay: number;
+    /** Цветовая тема */
+    theme?: BannerDotThemeType;
     dataAttrs?: {
         root?: Record<string, string>;
         svg?: Record<string, string>;
-        circle?: Record<string, string>;
+        inner?: Record<string, string>;
     };
     onClick: (index: number) => void;
 }

package/dist/lib/components/Banner/BannerDot.js

@@ -5,10 +5,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.BannerDotTheme = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+require("core-js/modules/es.object.values.js");
+
 var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -21,6 +23,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var BannerDotTheme = {
+  LIGHT: 'light',
+  DARK: 'dark'
+};
+exports.BannerDotTheme = BannerDotTheme;
 var cn = (0, _uiHelpers.cnCreate)('mfui-banner-dot');
 
 var BannerDot = function BannerDot(_ref) {
@@ -30,6 +37,8 @@ var BannerDot = function BannerDot(_ref) {
       isActive = _ref.isActive,
       showTimer = _ref.showTimer,
       timerDelay = _ref.timerDelay,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? BannerDotTheme.LIGHT : _ref$theme,
       onClick = _ref.onClick;
   var handleDotClick = React.useCallback(function () {
     onClick(index);
@@ -37,20 +46,24 @@ var BannerDot = function BannerDot(_ref) {
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
-      timer: showTimer
+      timer: showTimer,
+      theme: theme
     }, className),
     onClick: handleDotClick
   }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     className: cn('timer'),
-    viewBox: "0 0 100 100"
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg)), /*#__PURE__*/React.createElement("circle", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.circle), {
-    className: cn('timer-circle'),
+    viewBox: "0 0 300 100"
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg)), /*#__PURE__*/React.createElement("rect", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
+    className: cn('timer-inner'),
     style: {
       animationDuration: "".concat(timerDelay, "s")
     },
-    cx: "50",
-    cy: "50",
-    r: "50"
+    x: "0",
+    y: "0",
+    width: "300",
+    height: "100",
+    rx: "50",
+    ry: "50"
   }))));
 };
 
@@ -59,12 +72,13 @@ BannerDot.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     svg: PropTypes.objectOf(PropTypes.string.isRequired),
-    circle: PropTypes.objectOf(PropTypes.string.isRequired)
+    inner: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   index: PropTypes.number.isRequired,
   isActive: PropTypes.bool.isRequired,
   showTimer: PropTypes.bool.isRequired,
   timerDelay: PropTypes.number.isRequired,
+  theme: PropTypes.oneOf(Object.values(BannerDotTheme)),
   onClick: PropTypes.func.isRequired
 };
 var _default = BannerDot;

package/dist/lib/components/Button/Button.css

@@ -736,6 +736,12 @@
   display: block;
   width: 100%;
 }
+@media screen and (max-width: 767px) {
+  .mfui-button_full-width-mobile {
+    display: block;
+    width: 100%;
+  }
+}
 .mfui-button.mfui-button_type_primary.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover,

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

@@ -70,6 +70,8 @@ export interface IButtonProps {
     sizeMobile?: ButtonSizesType;
     /** Растянуть на полную ширину контейнера */
     fullWidth?: boolean;
+    /** Растянуть на полную ширину контейнера на разрешении экрана 0-767 */
+    fullWidthMobile?: boolean;
     /** Показать загрузку */
     showLoader?: boolean;
     /** Показать стелку */

package/dist/lib/components/Button/Button.js

@@ -104,6 +104,8 @@ var Button = function Button(_ref) {
       sizeMobile = _ref.sizeMobile,
       _ref$fullWidth = _ref.fullWidth,
       fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$fullWidthMobile = _ref.fullWidthMobile,
+      fullWidthMobile = _ref$fullWidthMobile === void 0 ? false : _ref$fullWidthMobile,
       _ref$showLoader = _ref.showLoader,
       showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
       _ref$showArrow = _ref.showArrow,
@@ -238,6 +240,7 @@ var Button = function Button(_ref) {
       'size-tablet': sizeTablet,
       'size-mobile': sizeMobile,
       'full-width': fullWidth,
+      'full-width-mobile': fullWidthMobile,
       loading: showLoader,
       'no-touch': !isTouch,
       'content-type': contentType,
@@ -283,6 +286,7 @@ Button.propTypes = {
   sizeTablet: _propTypes["default"].oneOf(Object.values(ButtonSizes)),
   sizeMobile: _propTypes["default"].oneOf(Object.values(ButtonSizes)),
   fullWidth: _propTypes["default"].bool,
+  fullWidthMobile: _propTypes["default"].bool,
   showLoader: _propTypes["default"].bool,
   showArrow: _propTypes["default"].bool,
   icon: _propTypes["default"].element,

package/dist/lib/components/ContentView/ContentView.css

@@ -48,9 +48,15 @@
 }
 .mfui-content-view__title {
   font-weight: 500;
-  font-size: 20px;
-  line-height: 28px;
-  letter-spacing: 0.5px;
+  font-size: 18px;
+  line-height: 24px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-content-view__title {
+    font-size: 20px;
+    line-height: 28px;
+    letter-spacing: 0.5px;
+  }
 }
 .mfui-content-view__text {
   font-size: 15px;
@@ -93,6 +99,5 @@
 }
 .mfui-content-view_fullscreen .mfui-content-view__buttons {
   margin-top: auto;
-  padding-top: 24px;
   padding-bottom: 24px;
 }

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

@@ -13,6 +13,12 @@ declare type ElementType = {
 export interface IContentViewProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        title?: string;
+        button?: string;
+        link?: string;
+    };
     /** Заголовок */
     title: string;
     /** Тип встроенного изображения */

package/dist/lib/components/ContentView/ContentView.js

@@ -29,6 +29,8 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-content-view');
 
 var ContentView = function ContentView(_ref) {
   var className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
       title = _ref.title,
       type = _ref.type,
       _ref$alt = _ref.alt,
@@ -55,12 +57,13 @@ var ContentView = function ContentView(_ref) {
     src: src,
     alt: alt
   }), /*#__PURE__*/React.createElement("div", {
-    className: cn('title')
+    className: cn('title', [classes.title])
   }, title), !!children && /*#__PURE__*/React.createElement("div", {
     className: cn('text')
   }, children)), showButtons && /*#__PURE__*/React.createElement("div", {
     className: cn('buttons')
   }, !!(buttonParams === null || buttonParams === void 0 ? void 0 : buttonParams.text) && /*#__PURE__*/React.createElement(_Button["default"], {
+    className: cn('button', [classes.button]),
     href: buttonParams.href,
     target: buttonParams.target,
     onClick: buttonParams.onClick,
@@ -68,6 +71,7 @@ var ContentView = function ContentView(_ref) {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
     }
   }, buttonParams.text), !!(linkParams === null || linkParams === void 0 ? void 0 : linkParams.text) && /*#__PURE__*/React.createElement(_Button["default"], {
+    className: cn('link', [classes.link]),
     type: "text",
     href: linkParams.href,
     target: linkParams.target,

package/dist/lib/components/NavArrow/NavArrow.css

@@ -45,3 +45,19 @@
 .mfui-nav-arrow_theme_dark:active {
   background-color: var(--buttonDown);
 }
+.mfui-nav-arrow_theme_white {
+  background-color: var(--stcWhite);
+  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.mfui-nav-arrow_theme_white:hover {
+  -webkit-box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
+          box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
+}
+.mfui-nav-arrow_theme_white:active {
+  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
+}
+.mfui-nav-arrow_theme_white .mfui-nav-arrow__icon {
+  fill: var(--stcBlack);
+}

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

@@ -3,12 +3,13 @@ import './NavArrow.less';
 export declare const Theme: {
     readonly PURPLE: "purple";
     readonly DARK: "dark";
+    readonly WHITE: "white";
 };
 export declare const View: {
     readonly PREV: "prev";
     readonly NEXT: "next";
 };
-declare type ThemeType = typeof Theme[keyof typeof Theme];
+export declare type ThemeType = typeof Theme[keyof typeof Theme];
 declare type ViewType = typeof View[keyof typeof View];
 export interface INavArrowProps {
     dataAttrs?: {