@megafon/ui-core 8.2.1 → 8.4.0

package/dist/es/components/Banner/Banner.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner .mfui-banner__swiper-container{position:relative}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-banner__slide-content{height:100%}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}.mfui-banner .mfui-banner__arrow_theme_white{height:64px;width:64px}@media screen and (max-width:1023px){.mfui-banner .mfui-banner__arrow_theme_white{display:none}}.mfui-banner .mfui-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_prev{left:20px}}.mfui-banner .mfui-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_next{right:20px}}.mfui-banner .mfui-banner__arrow_prev.mfui-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-banner .mfui-banner__arrow_next.mfui-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:hover{scale:1.25}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:active{scale:1.125}.mfui-banner__pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;left:50%;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}.mfui-banner__pagination_bottom-offset{bottom:60px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-banner__pagination_bottom-offset{bottom:72px}}.mfui-banner_margin-top{margin-top:24px}.mfui-banner_radius_rounded .mfui-banner__swiper{border-radius:24px}@media screen and (max-width:767px){.mfui-banner_show-next-slide .mfui-banner__swiper{border-radius:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}.mfui-banner_show-next-slide .mfui-banner__slide-content{border-right:none;margin-right:0}.mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content{border-radius:24px}}.mfui-banner_background-color_green .mfui-banner__swiper{background-color:var(--brandGreen)}.mfui-banner_background-color_purple .mfui-banner__swiper{background-color:var(--brandPurple)}.mfui-banner_background-color_gradient .mfui-banner__swiper{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-banner_background-color_light .mfui-banner__swiper{background-color:#f6f2f9}.mfui-banner_background-color_spbSky0 .mfui-banner__swiper{background-color:var(--spbSky0)}
+h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner .mfui-banner__swiper-container{position:relative}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-banner__slide-content{height:100%}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}.mfui-banner .mfui-banner__arrow_theme_white{height:64px;width:64px}@media screen and (max-width:1023px){.mfui-banner .mfui-banner__arrow_theme_white{display:none}}.mfui-banner .mfui-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_prev{left:20px}}.mfui-banner .mfui-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_next{right:20px}}.mfui-banner .mfui-banner__arrow_prev.mfui-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-banner .mfui-banner__arrow_next.mfui-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:hover{scale:1.25}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:active{scale:1.125}.mfui-banner__pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;left:50%;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}.mfui-banner__pagination_position_top-in{left:0;margin-top:0;padding:0 24px;position:absolute;top:16px;width:100%}@media screen and (min-width:1280px){.mfui-banner__pagination_position_top-in{padding:0 80px}}.mfui-banner__pagination_type_flat{gap:4px}@media screen and (min-width:1280px){.mfui-banner__pagination_type_flat{gap:10px}}.mfui-banner__pagination_align_left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mfui-banner__pagination_bottom-offset{bottom:60px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-banner__pagination_bottom-offset{bottom:72px}}.mfui-banner_margin-top{margin-top:24px}.mfui-banner_radius_rounded .mfui-banner__swiper{border-radius:24px}@media screen and (max-width:767px){.mfui-banner_show-next-slide .mfui-banner__swiper{border-radius:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}.mfui-banner_show-next-slide .mfui-banner__slide-content{border-right:none;margin-right:0}.mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content{border-radius:24px}}.mfui-banner_background-color_green .mfui-banner__swiper{background-color:var(--brandGreen)}.mfui-banner_background-color_purple .mfui-banner__swiper{background-color:var(--brandPurple)}.mfui-banner_background-color_gradient .mfui-banner__swiper{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-banner_background-color_light .mfui-banner__swiper{background-color:#f6f2f9}.mfui-banner_background-color_spbSky0 .mfui-banner__swiper{background-color:var(--spbSky0)}

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

@@ -21,6 +21,22 @@ export declare const NavTheme: {
     readonly DARK: "dark";
 };
 type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
+export declare const PaginationTheme: {
+    readonly DEFAULT: "default";
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+};
+export type PaginationThemeType = (typeof PaginationTheme)[keyof typeof PaginationTheme];
+export declare const PaginationButtonType: {
+    readonly DOT: "dot";
+    readonly FLAT: "flat";
+};
+export type PaginationType = (typeof PaginationButtonType)[keyof typeof PaginationButtonType];
+export declare const PaginationPositionType: {
+    readonly BOTTOM_OUT: "bottom-out";
+    readonly TOP_IN: "top-in";
+};
+type PaginationPositionType = (typeof PaginationPositionType)[keyof typeof PaginationPositionType];
 export interface IBannerProps {
     /** Сss класс для внешнего контейнера */
     className?: string;
@@ -44,7 +60,17 @@ export interface IBannerProps {
         arrowNext?: Record<string, string>;
         pagination?: Record<string, string>;
         dot?: Record<string, string>;
+        dotSvg?: Record<string, string>;
+        dotInner?: Record<string, string>;
     };
+    /** Выравнивание блока пагинации */
+    paginationAlign?: 'center' | 'left';
+    /** Цветовая тема пагинации */
+    paginationTheme?: PaginationThemeType;
+    /** Тип кнопок пагинации */
+    paginationType?: PaginationType;
+    /** Расположение пагинации */
+    paginationPosition?: PaginationPositionType;
     /** Предполагается использование с наезжанием на баннер следующего за баннером элемента */
     withPaginationBottomOffset?: boolean;
     /** Автоматическая прокрутка */

package/dist/es/components/Banner/Banner.js

@@ -40,6 +40,19 @@ export var NavTheme = {
   LIGHT: 'light',
   DARK: 'dark'
 };
+export var PaginationTheme = {
+  DEFAULT: 'default',
+  LIGHT: 'light',
+  DARK: 'dark'
+};
+export var PaginationButtonType = {
+  DOT: 'dot',
+  FLAT: 'flat'
+};
+export var PaginationPositionType = {
+  BOTTOM_OUT: 'bottom-out',
+  TOP_IN: 'top-in'
+};
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
     delay: delay,
@@ -54,6 +67,10 @@ var Banner = function Banner(_ref) {
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     dataAttrs = _ref.dataAttrs,
+    paginationAlign = _ref.paginationAlign,
+    paginationTheme = _ref.paginationTheme,
+    paginationType = _ref.paginationType,
+    paginationPosition = _ref.paginationPosition,
     _ref$withPaginationBo = _ref.withPaginationBottomOffset,
     withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
     _ref$autoPlay = _ref.autoPlay,
@@ -236,19 +253,26 @@ var Banner = function Banner(_ref) {
   }));
   var renderPagination = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
+      type: paginationType,
+      align: paginationAlign,
+      position: paginationPosition,
       'bottom-offset': withPaginationBottomOffset
     }, [classes.pagination])
   }), children && React.Children.map(children, function (_, i) {
     return /*#__PURE__*/React.createElement(BannerDot, {
       className: cn('dot', [classes.dot]),
       dataAttrs: {
-        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1))
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1)),
+        svg: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dotSvg, i + 1)),
+        inner: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dotInner, i + 1))
       },
       key: i,
       index: i,
       isActive: i === activeIndex,
       showTimer: showDotTimer,
       timerDelay: dotTimerDelay,
+      type: paginationType,
+      theme: paginationTheme,
       onClick: handleDotClick
     });
   }));

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-banner-dot{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;justify-content:center;margin:-2px;padding:2px}.mfui-banner-dot:before{background-color:var(--spbSky2);border-radius:4px;content:"";display:block;height:8px;width:8px}.mfui-banner-dot_active{cursor:default}.mfui-banner-dot_active:before{background-color:var(--brandGreen);width:24px}.mfui-banner-dot_active .mfui-banner-dot__timer-inner{fill:var(--brandGreen)}.mfui-banner-dot_active.mfui-banner-dot_timer:before{background-color:var(--spbSky2)}.mfui-banner-dot__timer{border-radius:4px;display:block;height:8px;position:absolute;width:24px}.mfui-banner-dot__timer-inner{-webkit-animation:timer linear;animation:timer linear;-webkit-transform:scaleX(-1);transform:scaleX(-1);-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes timer{0%{width:100%}to{width:0}}@keyframes timer{0%{width:100%}to{width:0}}
+h1,h2,h3,h4,h5{margin:0}.mfui-banner-dot{background-color:var(--spbSky2);border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:8px;position:relative;width:8px}.mfui-banner-dot_active{background-color:var(--brandGreen);cursor:default;-webkit-transition:background-color .2s linear;transition:background-color .2s linear;width:24px}.mfui-banner-dot_active .mfui-banner-dot__timer-inner{fill:var(--brandGreen)}.mfui-banner-dot_active.mfui-banner-dot_has-timer{background-color:var(--spbSky2)}.mfui-banner-dot_type_flat{-webkit-box-flex:1;border-radius:24px;-ms-flex:1 1 auto;flex:1 1 auto;height:2px;width:auto}.mfui-banner-dot_type_flat .mfui-banner-dot__timer{height:100%;width:100%}.mfui-banner-dot_type_flat .mfui-banner-dot__timer-inner{-webkit-animation:timer-reversed linear;animation:timer-reversed linear;height:100%;-webkit-transform:scale(1);transform:scale(1);width:100%}.mfui-banner-dot_theme_light,.mfui-banner-dot_theme_light .mfui-banner-dot__timer{background-color:var(--stcWhite50)}.mfui-banner-dot_theme_light .mfui-banner-dot__timer-inner{fill:var(--stcWhite)}.mfui-banner-dot_theme_light.mfui-banner-dot_active{background-color:var(--stcWhite)}.mfui-banner-dot_theme_light.mfui-banner-dot_has-timer{background-color:transparent}.mfui-banner-dot_theme_dark,.mfui-banner-dot_theme_dark .mfui-banner-dot__timer{background-color:var(--stcBlack10)}.mfui-banner-dot_theme_dark .mfui-banner-dot__timer-inner{fill:var(--stcBlack)}.mfui-banner-dot_theme_dark.mfui-banner-dot_active{background-color:var(--stcBlack)}.mfui-banner-dot_theme_dark.mfui-banner-dot_has-timer{background-color:transparent}.mfui-banner-dot__timer{border-radius:4px;display:block;height:8px;left:0;position:absolute;top:0;width:24px}.mfui-banner-dot__timer-inner{-webkit-animation:timer linear;animation:timer linear;-webkit-transform:scaleX(-1);transform:scaleX(-1);-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes timer{0%{width:100%}to{width:0}}@keyframes timer{0%{width:100%}to{width:0}}@-webkit-keyframes timer-reversed{0%{width:0}to{width:100%}}@keyframes timer-reversed{0%{width:0}to{width:100%}}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type PaginationThemeType, type PaginationType } from './Banner';
 import './BannerDot.scss';
 export interface IBannerDotProps {
     className?: string;
@@ -11,6 +12,8 @@ export interface IBannerDotProps {
         svg?: Record<string, string>;
         inner?: Record<string, string>;
     };
+    type?: PaginationType;
+    theme?: PaginationThemeType;
     onClick: (index: number) => void;
 }
 declare const BannerDot: React.FC<IBannerDotProps>;

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

@@ -1,7 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { PaginationButtonType } from "./Banner";
 import "./BannerDot.css";
+var DOT_VIEW_BOX = '0 0 250 100';
+var DOT_RECT_PROPS = {
+  x: '0',
+  y: '0',
+  width: '250',
+  height: '100',
+  rx: '50',
+  ry: '50'
+};
 var cn = cnCreate('mfui-banner-dot');
 var BannerDot = function BannerDot(_ref) {
   var className = _ref.className,
@@ -10,30 +20,32 @@ var BannerDot = function BannerDot(_ref) {
     isActive = _ref.isActive,
     showTimer = _ref.showTimer,
     timerDelay = _ref.timerDelay,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? PaginationButtonType.DOT : _ref$type,
+    theme = _ref.theme,
     onClick = _ref.onClick;
+  var viewBox = type === PaginationButtonType.DOT ? DOT_VIEW_BOX : undefined;
+  var rectProps = type === PaginationButtonType.DOT ? DOT_RECT_PROPS : {};
+  var hasTimer = showTimer && isActive;
   var handleDotClick = React.useCallback(function () {
     onClick(index);
   }, [onClick, index]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
-      timer: showTimer
+      type: type,
+      theme: theme,
+      'has-timer': hasTimer
     }, className),
     onClick: handleDotClick
-  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg), {
+  }), hasTimer && /*#__PURE__*/React.createElement("svg", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg), {
     className: cn('timer'),
-    viewBox: "0 0 250 100"
-  }), /*#__PURE__*/React.createElement("rect", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
+    viewBox: viewBox
+  }), /*#__PURE__*/React.createElement("rect", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), rectProps, {
     className: cn('timer-inner'),
     style: {
       animationDuration: "".concat(timerDelay, "s")
-    },
-    x: "0",
-    y: "0",
-    width: "250",
-    height: "100",
-    rx: "50",
-    ry: "50"
+    }
   }))));
 };
 export default BannerDot;

package/dist/es/components/Modal/_ModalContent/ModalContent.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
+h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--content)}@media screen and (min-width:768px){.mfui-modal-content__header-icon{height:40px;min-width:40px;width:40px}}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}

package/dist/es/components/Modal/_ModalContent/ModalContent.js

@@ -97,7 +97,11 @@ var ModalContent = function ModalContent(_ref) {
     }, classes === null || classes === void 0 ? void 0 : classes.headerBackButton),
     type: "button",
     onClick: onBackButtonClick
-  }), isSmallIcon ? /*#__PURE__*/React.createElement(ArrowLeft24, null) : /*#__PURE__*/React.createElement(ArrowLeft32, null));
+  }), isSmallIcon ? /*#__PURE__*/React.createElement(ArrowLeft24, {
+    className: cn('header-icon')
+  }) : /*#__PURE__*/React.createElement(ArrowLeft32, {
+    className: cn('header-icon')
+  }));
   var renderCloseButton = /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
     className: cn('header-button', {
       close: true,
@@ -105,7 +109,11 @@ var ModalContent = function ModalContent(_ref) {
     }, classes === null || classes === void 0 ? void 0 : classes.headerCloseButton),
     type: "button",
     onClick: onPopupClose
-  }), isSmallIcon ? /*#__PURE__*/React.createElement(Cancel24, null) : /*#__PURE__*/React.createElement(Cancel32, null));
+  }), isSmallIcon ? /*#__PURE__*/React.createElement(Cancel24, {
+    className: cn('header-icon')
+  }) : /*#__PURE__*/React.createElement(Cancel32, {
+    className: cn('header-icon')
+  }));
   var renderHeader = /*#__PURE__*/React.createElement("div", {
     className: cn('header', {
       shadow: showHeaderShadow

package/dist/es/components/Pagination/Pagination.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex}
+h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-pagination__input,.mfui-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-pagination__input-field{width:90px}

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

@@ -1,22 +1,31 @@
 import * as React from 'react';
+import { PaginationTypesType, ThemeType, ValueType } from './types';
 import './Pagination.scss';
-import { PaginationValueType } from './components/PaginationButton/PaginationButton';
 interface IPaginationProps {
+    /** Общее количество страниц */
+    totalPages: number;
+    /** Номер текущей страницы */
+    activePage: number;
+    /** Тип компонента. DEPRECATED: 'classic' */
+    type?: PaginationTypesType;
+    /** Цветовая тема компонента */
+    theme?: ThemeType;
+    /** Отобразить поле ввода номера страницы */
+    showSelectPage?: boolean;
+    /** Обработчик изменения активной страницы */
+    onChange: (value: ValueType) => void;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
         prev?: Record<string, string>;
         next?: Record<string, string>;
         button?: Record<string, string>;
+        skipPrev?: Record<string, string>;
+        skipNext?: Record<string, string>;
+        input?: Record<string, string>;
     };
-    /** Общее количество страниц */
-    totalPages: number;
-    /** Номер текущей страницы */
-    activePage: number;
-    /** Тема компонента */
-    theme?: 'default' | 'light';
-    /** Обработчик изменения активной страницы */
-    onChange: (value: PaginationValueType) => void;
 }
 declare const Pagination: React.FC<IPaginationProps>;
 export default Pagination;

package/dist/es/components/Pagination/Pagination.js

@@ -1,19 +1,38 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import "./Pagination.css";
+import Caption from "../Caption/Caption";
+import ValueField from "../ValueField/ValueField";
 import PaginationButtons from "./components/PaginationButtons/PaginationButtons";
-import PaginationNavigation from "./components/PaginationNavigation/PaginationNavigation";
-import usePagination, { Button } from "./usePagination";
+import PaginationNavigation, { HINTS } from "./components/PaginationNavigation/PaginationNavigation";
+import { getInputRangeValue, removeFirstZeros, setValueFieldTheme } from "./helpers";
+import { PaginationTypes } from "./types";
+import usePagination, { BUTTONS } from "./usePagination";
+import "./Pagination.css";
 var cn = cnCreate('mfui-pagination');
 var Pagination = function Pagination(_ref) {
   var totalPages = _ref.totalPages,
     activePage = _ref.activePage,
-    dataAttrs = _ref.dataAttrs,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? PaginationTypes.CLASSIC : _ref$type,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'default' : _ref$theme,
-    onChange = _ref.onChange;
-  var paginationItems = usePagination(totalPages, activePage);
+    showSelectPage = _ref.showSelectPage,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs;
+  var _usePagination = usePagination(type, totalPages, activePage),
+    paginationItems = _usePagination.paginationItems,
+    skipPrevPage = _usePagination.skipPrevPage,
+    skipNextPage = _usePagination.skipNextPage;
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    inputValue = _React$useState2[0],
+    setInputValue = _React$useState2[1];
+  var inputRef = React.useRef(null);
+  var isModernType = type === PaginationTypes.MODERN;
+  var buttonForm = isModernType ? 'brick' : 'round';
   var handleBackClick = React.useCallback(function () {
     onChange(activePage - 1);
   }, [activePage, onChange]);
@@ -21,36 +40,89 @@ var Pagination = function Pagination(_ref) {
     onChange(activePage + 1);
   }, [activePage, onChange]);
   var handlePageButtonClick = React.useCallback(function (value) {
+    if (value === BUTTONS.SKIP_PREV) {
+      onChange(skipPrevPage);
+      return;
+    }
+    if (value === BUTTONS.SKIP_NEXT) {
+      onChange(skipNextPage);
+      return;
+    }
     value && onChange(value);
-  }, [onChange]);
+  }, [onChange, skipNextPage, skipPrevPage]);
+  var handleInputSubmit = React.useCallback(function () {
+    var _a;
+    if (!inputValue) {
+      return;
+    }
+    var pageNumber = getInputRangeValue(inputValue, totalPages, BUTTONS.FIRST);
+    onChange(pageNumber);
+    setInputValue('');
+    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [inputValue, onChange, totalPages]);
+  var handleInputChange = React.useCallback(function (e) {
+    var targetValue = removeFirstZeros(e.target.value);
+    setInputValue(targetValue);
+  }, []);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn()
-  }), /*#__PURE__*/React.createElement(PaginationNavigation, {
+    className: cn([className])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, /*#__PURE__*/React.createElement(PaginationNavigation, {
+    className: cn('button'),
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
     },
     direction: "left",
-    disabled: activePage === Button.FIRST,
-    onClick: handleBackClick,
-    className: cn('button'),
-    theme: theme
+    form: buttonForm,
+    disabled: activePage === BUTTONS.FIRST,
+    hint: isModernType ? HINTS.PREV : null,
+    theme: theme,
+    onClick: handleBackClick
   }), /*#__PURE__*/React.createElement(PaginationButtons, {
     dataAttrs: {
-      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      button: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button,
+      skipNext: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.skipNext,
+      skipPrev: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.skipPrev
     },
     items: paginationItems,
     activeButton: activePage,
-    hiddenButton: Button.HIDDEN,
+    skipButtonPrev: BUTTONS.SKIP_PREV,
+    skipButtonNext: BUTTONS.SKIP_NEXT,
+    type: type,
+    form: buttonForm,
+    showHints: isModernType,
     theme: theme,
     onClick: handlePageButtonClick
   }), /*#__PURE__*/React.createElement(PaginationNavigation, {
+    className: cn('button'),
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
     },
+    direction: "right",
+    form: buttonForm,
     disabled: activePage === totalPages,
-    onClick: handleNextClick,
-    className: cn('button'),
-    theme: theme
-  }));
+    hint: isModernType ? HINTS.NEXT : null,
+    theme: theme,
+    onClick: handleNextClick
+  })), showSelectPage && /*#__PURE__*/React.createElement("div", {
+    className: cn('input')
+  }, /*#__PURE__*/React.createElement(Caption, {
+    className: cn('input-caption'),
+    color: theme === 'light' ? 'white' : 'default',
+    hasMargin: false
+  }, "\u041D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443"), /*#__PURE__*/React.createElement(ValueField, {
+    className: cn('input-field'),
+    isControlled: true,
+    placeholder: "\u2116",
+    theme: setValueFieldTheme(theme),
+    value: inputValue,
+    onChange: handleInputChange,
+    onBlur: handleInputSubmit,
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input
+    },
+    inputRef: inputRef
+  })));
 };
 export default Pagination;

package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-pagination-button{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;font-weight:500;line-height:24px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:1px solid transparent;border-radius:50%;cursor:pointer;height:32px;padding:0;width:32px}.mfui-pagination-button svg{width:100%}.mfui-pagination-button:disabled{pointer-events:none}.mfui-pagination-button_active{border-color:var(--brandGreen);pointer-events:none}.mfui-pagination-button_theme_default{color:var(--content)}.mfui-pagination-button_theme_default svg{fill:var(--content)}.mfui-pagination-button_theme_default:hover{background-color:var(--spbSky0)}.mfui-pagination-button_theme_default.mfui-pagination-button_active{border-color:var(--brandGreen)}.mfui-pagination-button_theme_light{color:var(--stcWhite)}.mfui-pagination-button_theme_light svg{fill:var(--stcWhite)}.mfui-pagination-button_theme_light:hover{background-color:var(--stcWhite20)}.mfui-pagination-button_theme_light.mfui-pagination-button_active{border-color:var(--stcWhite)}
+h1,h2,h3,h4,h5{margin:0}.mfui-pagination-button{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:1px solid transparent;border-radius:50%;height:32px;justify-content:center;padding:0;width:32px;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:transparent;cursor:pointer}.mfui-pagination-button svg{width:100%}.mfui-pagination-button:disabled{pointer-events:none}.mfui-pagination-button_form_brick{border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box}.mfui-pagination-button_auto-width{min-width:32px;padding:0 8px;width:auto}.mfui-pagination-button_active{border-color:var(--brandGreen);pointer-events:none}.mfui-pagination-button_theme_default{color:var(--content)}.mfui-pagination-button_theme_default svg{fill:var(--content)}.mfui-pagination-button_theme_default:hover{background-color:var(--spbSky0)}.mfui-pagination-button_theme_default.mfui-pagination-button_active{border-color:var(--brandGreen);color:var(--brandGreen)}.mfui-pagination-button_theme_light{color:var(--stcWhite)}.mfui-pagination-button_theme_light svg{fill:var(--stcWhite)}.mfui-pagination-button_theme_light:hover{background-color:var(--stcWhite20)}.mfui-pagination-button_theme_light.mfui-pagination-button_active{border-color:var(--stcWhite)}.mfui-pagination-button_theme_gray{color:var(--content)}.mfui-pagination-button_theme_gray svg{fill:var(--content)}.mfui-pagination-button_theme_gray:hover{background-color:var(--base)}.mfui-pagination-button_theme_gray.mfui-pagination-button_active{border-color:var(--brandGreen);color:var(--brandGreen)}

package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.d.ts

@@ -1,17 +1,22 @@
 import React from 'react';
+import { ValueType, ThemeType, ButtonFormType } from '../../types';
 import './PaginationButton.scss';
-export type PaginationValueType = string | number;
 export interface IPaginationButtonProps {
+    theme?: ThemeType;
+    form?: ButtonFormType;
+    value?: ValueType;
     disabled?: boolean;
     isActive?: boolean;
-    theme?: 'default' | 'light';
-    value?: PaginationValueType;
+    autoWidth?: boolean;
     className?: string;
     dataAttrs?: {
         root?: Record<string, string>;
     };
     children?: React.ReactNode;
-    onClick?: (value?: PaginationValueType) => void;
+    onClick?: (value?: ValueType) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    rootRef?: React.Ref<HTMLButtonElement>;
 }
 declare const PaginationButton: React.FC<IPaginationButtonProps>;
 export default PaginationButton;

package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.js

@@ -10,22 +10,32 @@ var PaginationButton = function PaginationButton(_ref) {
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    form = _ref.form,
+    autoWidth = _ref.autoWidth,
     className = _ref.className,
     children = _ref.children,
     onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
     value = _ref.value,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
   var handleClick = function handleClick() {
     onClick === null || onClick === void 0 ? void 0 : onClick(value);
   };
   return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
-      theme: theme
+      theme: theme,
+      form: form,
+      'auto-width': autoWidth
     }, className),
+    type: "button",
     disabled: disabled,
     onClick: handleClick,
-    type: "button"
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    ref: rootRef
   }), children);
 };
 export default PaginationButton;

package/dist/es/components/Pagination/components/PaginationButtons/PaginationButtons.css

@@ -1 +1 @@
-.mfui-pagination-buttons{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination-buttons__button{-ms-flex-negative:0;flex-shrink:0;margin:0 4px}
+h1,h2,h3,h4,h5{margin:0}.mfui-pagination-buttons{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination-buttons__button{-ms-flex-negative:0;flex-shrink:0;margin:0 4px}@media screen and (max-width:767px){.mfui-pagination-buttons__button{margin:0 2px}}.mfui-pagination-buttons__button_form_brick{margin:0 2px}@media screen and (max-width:767px){.mfui-pagination-buttons__button_form_brick{margin:0}}

package/dist/es/components/Pagination/components/PaginationButtons/PaginationButtons.d.ts

@@ -1,15 +1,21 @@
 import React from 'react';
-import { PaginationValueType } from '../PaginationButton/PaginationButton';
+import { ValueType, ThemeType, ButtonFormType, PaginationTypesType } from '../../types';
 import './PaginationButtons.scss';
-interface IPaginationButtonsProps {
+export interface IPaginationButtonsProps {
     items: Array<string | number>;
-    theme?: 'default' | 'light';
+    type: PaginationTypesType;
+    form: ButtonFormType;
+    theme: ThemeType;
+    showHints: boolean;
     activeButton: number;
-    hiddenButton: string;
+    skipButtonPrev: string;
+    skipButtonNext: string;
     dataAttrs?: {
-        root?: Record<string, string>;
+        button?: Record<string, string>;
+        skipNext?: Record<string, string>;
+        skipPrev?: Record<string, string>;
     };
-    onClick: (value?: PaginationValueType) => void;
+    onClick: (value?: ValueType) => void;
 }
 declare const PaginationButtons: React.FC<IPaginationButtonsProps>;
 export default PaginationButtons;