@megafon/ui-core 2.0.0-beta.99 → 2.1.2

package/dist/es/components/Notification/Notification.css

@@ -5,62 +5,207 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-notification__container {
+.mfui-notification {
   position: relative;
-  max-width: 688px;
-  padding: 12px 24px 12px 16px;
-  border-width: 1px;
-  border-style: solid;
-  border-left-width: 8px;
+  padding: 16px 12px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-notification {
+    padding: 20px 28px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-notification {
+    padding: 20px 32px;
+  }
+}
+.mfui-notification__container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.mfui-beta-notification__icon {
-  height: 20px;
+.mfui-notification__title {
+  margin-bottom: 8px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-notification__title {
+    margin-bottom: 4px;
+  }
+}
+.mfui-notification__title_close-padding {
+  padding-right: 20px;
+}
+.mfui-notification__text {
+  font-size: 15px;
+  line-height: 24px;
+  max-width: 100%;
+  margin: 0;
+}
+.mfui-notification__text_close-padding {
+  padding-right: 20px;
+}
+.mfui-notification__content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  -ms-flex-item-align: center;
+      align-self: center;
+  width: 100%;
+  max-width: 212px;
+  margin-left: 12px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-notification__content {
+    max-width: 540px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-notification__content {
+    max-width: 640px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-notification__content {
+    max-width: 840px;
+  }
+}
+.mfui-notification__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+.mfui-notification__attention-icon,
+.mfui-notification__icon-container svg {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+}
+.mfui-notification__link {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-top: 8px;
+  cursor: pointer;
+}
+.mfui-notification__right-arrow {
+  width: 20px;
   min-width: 20px;
+  height: 20px;
+  margin-top: 4px;
+  fill: #34AAF2;
+}
+.mfui-notification__close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+}
+.mfui-notification__close:hover {
+  background-color: rgba(237, 237, 237, 0.6);
+}
+.mfui-notification__close-icon {
   width: 20px;
-  margin-right: 16px;
-  top: 2px;
-  position: relative;
+  height: 20px;
+  fill: #333333;
+}
+@media screen and (min-width: 768px) {
+  .mfui-notification__close-icon {
+    width: 32px;
+    height: 32px;
+  }
 }
-.mfui-beta-notification_type_success .mfui-beta-notification__container {
-  border-color: #00B956;
+.mfui-notification_type_error .mfui-notification__icon-container {
+  background-color: #FFC4C9;
 }
-.mfui-beta-notification_type_success .mfui-beta-notification__icon {
+.mfui-notification_type_error .mfui-notification__icon-container svg {
+  /* stylelint-disable-line max-nesting-depth */
+  fill: #F62434;
+}
+.mfui-notification_type_success .mfui-notification__icon-container {
+  background-color: #DDFFEC;
+}
+.mfui-notification_type_success .mfui-notification__icon-container svg {
+  /* stylelint-disable-line max-nesting-depth */
   fill: #00B956;
 }
-.mfui-beta-notification_type_warning .mfui-beta-notification__container {
-  border-color: #FFA717;
+.mfui-notification_type_warning .mfui-notification__icon-container {
+  background-color: #FFEDD1;
 }
-.mfui-beta-notification_type_warning .mfui-beta-notification__icon {
+.mfui-notification_type_warning .mfui-notification__icon-container svg {
+  /* stylelint-disable-line max-nesting-depth */
   fill: #FFA717;
 }
-.mfui-beta-notification_type_error .mfui-beta-notification__container {
-  border-color: #F62434;
+.mfui-notification_type_info .mfui-notification__icon-container {
+  background-color: #E1FAFF;
 }
-.mfui-beta-notification_type_error .mfui-beta-notification__icon {
-  fill: #F62434;
+.mfui-notification_type_info .mfui-notification__icon-container svg {
+  /* stylelint-disable-line max-nesting-depth */
+  fill: #5BD9E5;
 }
-.mfui-beta-notification_short .mfui-beta-notification__container {
-  border: none;
-  max-width: 456px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  padding-left: 24px;
+.mfui-notification_colored .mfui-notification__icon-container {
+  background-color: #FFFFFF;
 }
-.mfui-beta-notification_short .mfui-beta-notification__icon {
-  fill: #FFFFFF;
+.mfui-notification_colored .mfui-notification__close:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.mfui-notification_colored.mfui-notification_type_error {
+  background-color: #F8505D;
 }
-.mfui-beta-notification_short .mfui-beta-notification__text {
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__title,
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__text,
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__link {
   color: #FFFFFF;
 }
-.mfui-beta-notification_short.mfui-beta-notification_type_success .mfui-beta-notification__container {
-  background-color: #00B956;
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__right-arrow {
+  fill: #FFFFFF;
+}
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container {
+  background-color: #FFFFFF33;
+}
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container svg {
+  /* stylelint-disable-line max-nesting-depth */
+  fill: #FFFFFF;
+}
+.mfui-notification_colored.mfui-notification_type_success {
+  background-color: #DDFFEC;
 }
-.mfui-beta-notification_short.mfui-beta-notification_type_warning .mfui-beta-notification__container {
-  background-color: #FFA717;
+.mfui-notification_colored.mfui-notification_type_warning {
+  background-color: #FFEDD1;
 }
-.mfui-beta-notification_short.mfui-beta-notification_type_error .mfui-beta-notification__container {
-  background-color: #F62434;
+.mfui-notification_colored.mfui-notification_type_info {
+  background-color: #E1FAFF;
 }

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

@@ -4,15 +4,43 @@ export declare const NotificationTypes: {
     readonly SUCCESS: "success";
     readonly WARNING: "warning";
     readonly ERROR: "error";
+    readonly INFO: "info";
 };
-declare type NotificationTypesType = typeof NotificationTypes[keyof typeof NotificationTypes];
+declare type NotificationType = typeof NotificationTypes[keyof typeof NotificationTypes];
+export declare const ShadowTypes: {
+    readonly ZERO: "zero";
+    readonly LOW: "low";
+    readonly HIGH: "high";
+    readonly HOVER: "hover";
+};
+declare type ShadowType = typeof ShadowTypes[keyof typeof ShadowTypes];
 export interface INotificationProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Тип отображения */
-    type?: NotificationTypesType;
-    /** Уменьшенный размер */
-    isShort?: boolean;
+    type?: NotificationType;
+    /** Уровень тени */
+    shadowLevel?: ShadowType;
+    /** Наличие фоновой заливки у уведомления */
+    isColored?: boolean;
+    /** Наличие кнопки-крестика "Закрыть" */
+    hasCloseButton?: boolean;
+    /** Заголовок */
+    title?: string;
+    /** Текст ссылки внизу уведомления */
+    link?: string;
+    /** rel - аргумент тега <a> для ссылки */
+    rel?: string;
+    /** href - аргумент тега <a> для ссылки */
+    href?: string;
+    /** target - аргумент тега <a> */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Обработчик на закрытие */
+    onClose?: () => void;
+    /** Обработчик клика по ссылке */
+    onLinkClick?: () => void;
 }
 declare const Notification: React.FC<INotificationProps>;
 export default Notification;

package/dist/es/components/Notification/Notification.js

@@ -1,20 +1,49 @@
 import "core-js/modules/es.object.values";
+import "core-js/modules/es.string.link";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
+import Header from "../Header/Header";
+import TextLink from "../TextLink/TextLink";
+import Tile from "../Tile/Tile";
 import "./Notification.css";
-import Paragraph from "../Paragraph/Paragraph";
-import cnCreate from "../../utils/cnCreate";
 
-var AttentionIcon = function AttentionIcon(props) {
+var ErrorIcon = function ErrorIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-8h2v8zm0-10h-2v-2h2v2z"
+    d: "M15 20.72V23h2v-2.28a2 2 0 10-2 0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 4a6 6 0 00-6 6v2H8v8a8 8 0 0016 0v-8h-2v-2a6 6 0 00-6-6zm-4 6a4 4 0 018 0v2h-8zm10 10a6 6 0 01-12 0v-6h12z"
   }));
 };
 
-var AttentionInvertIcon = function AttentionInvertIcon(props) {
+var RightArrow = function RightArrow(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8 13l3-3-3-3 1-1 4 4-4 4z"
+  }));
+};
+
+var WarningIcon = function WarningIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15 22h2v-2h-2v2zm0-4h2v-8h-2v8zm1 10C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zM6 16c0 5.5 4.5 10 10 10s10-4.5 10-10S21.5 6 16 6 6 10.5 6 16z"
+  }));
+};
+
+var SuccessIcon = function SuccessIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
+  }));
+};
+
+var InfoIcon = function InfoIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -22,86 +51,127 @@ var AttentionInvertIcon = function AttentionInvertIcon(props) {
   }));
 };
 
-var CheckedIcon = function CheckedIcon(props) {
+var CancelIcon = function CancelIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 32 32",
-    enableBackground: "new 0 0 32 32"
-  }, props), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-    id: "CheckedIcon__a",
-    filterUnits: "userSpaceOnUse",
-    x: 0,
-    y: 0,
-    width: 32,
-    height: 32
-  }, /*#__PURE__*/React.createElement("feColorMatrix", {
-    values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
-  }))), /*#__PURE__*/React.createElement("mask", {
-    maskUnits: "userSpaceOnUse",
-    x: 0,
-    y: 0,
-    width: 32,
-    height: 32,
-    id: "CheckedIcon__b"
-  }, /*#__PURE__*/React.createElement("g", {
-    filter: "url(#CheckedIcon__a)"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    fill: "#fff"
-  }))), /*#__PURE__*/React.createElement("g", {
-    mask: "url(#CheckedIcon__b)"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M0 0h32v32H0z"
-  })));
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M20 18.586l6.364-6.364 1.414 1.414L21.414 20l6.364 6.364-1.414 1.414L20 21.414l-6.364 6.364-1.414-1.414L18.586 20l-6.364-6.364 1.414-1.414L20 18.586z"
+  }));
 };
 
 export var NotificationTypes = {
   SUCCESS: 'success',
   WARNING: 'warning',
-  ERROR: 'error'
+  ERROR: 'error',
+  INFO: 'info'
+};
+export var ShadowTypes = {
+  ZERO: 'zero',
+  LOW: 'low',
+  HIGH: 'high',
+  HOVER: 'hover'
 };
-var cn = cnCreate('mfui-beta-notification');
+var cn = cnCreate('mfui-notification');
 
 var Notification = function Notification(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'success' : _ref$type,
-      _ref$isShort = _ref.isShort,
-      isShort = _ref$isShort === void 0 ? false : _ref$isShort,
+  var className = _ref.className,
       children = _ref.children,
-      className = _ref.className;
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'info' : _ref$type,
+      _ref$shadowLevel = _ref.shadowLevel,
+      shadowLevel = _ref$shadowLevel === void 0 ? 'zero' : _ref$shadowLevel,
+      _ref$isColored = _ref.isColored,
+      isColored = _ref$isColored === void 0 ? true : _ref$isColored,
+      hasCloseButton = _ref.hasCloseButton,
+      title = _ref.title,
+      link = _ref.link,
+      rel = _ref.rel,
+      href = _ref.href,
+      target = _ref.target,
+      icon = _ref.icon,
+      onClose = _ref.onClose,
+      onLinkClick = _ref.onLinkClick;
+
+  var renderLink = function renderLink() {
+    return /*#__PURE__*/React.createElement(TextLink, {
+      className: cn('link'),
+      onClick: onLinkClick,
+      rel: rel,
+      href: href,
+      target: target
+    }, link, /*#__PURE__*/React.createElement(RightArrow, {
+      className: cn('right-arrow')
+    }));
+  };
 
   var renderIcon = function renderIcon() {
-    if (type === NotificationTypes.SUCCESS) {
-      return /*#__PURE__*/React.createElement(CheckedIcon, {
-        className: cn('icon')
-      });
+    if (icon) {
+      return icon;
     }
 
-    return isShort ? /*#__PURE__*/React.createElement(AttentionInvertIcon, {
-      className: cn('icon')
-    }) : /*#__PURE__*/React.createElement(AttentionIcon, {
-      className: cn('icon')
-    });
+    var SUCCESS = NotificationTypes.SUCCESS,
+        ERROR = NotificationTypes.ERROR,
+        WARNING = NotificationTypes.WARNING;
+
+    switch (type) {
+      case SUCCESS:
+        return /*#__PURE__*/React.createElement(SuccessIcon, null);
+
+      case ERROR:
+        return /*#__PURE__*/React.createElement(ErrorIcon, null);
+
+      case WARNING:
+        return /*#__PURE__*/React.createElement(WarningIcon, null);
+
+      default:
+        return /*#__PURE__*/React.createElement(InfoIcon, null);
+    }
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Tile, {
+    radius: "rounded",
+    shadowLevel: shadowLevel,
     className: cn({
       type: type,
-      "short": isShort
+      colored: isColored
     }, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('container')
-  }, renderIcon(), /*#__PURE__*/React.createElement(Paragraph, {
-    className: cn('text'),
-    hasMargin: false
-  }, children)));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-container')
+  }, renderIcon()), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, title && /*#__PURE__*/React.createElement(Header, {
+    as: "h5",
+    className: cn('title', {
+      'close-padding': hasCloseButton
+    })
+  }, title), /*#__PURE__*/React.createElement("p", {
+    className: cn('text', {
+      'close-padding': hasCloseButton && !title
+    })
+  }, children), link && renderLink())), hasCloseButton && /*#__PURE__*/React.createElement("button", {
+    className: cn('close'),
+    type: "button",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(CancelIcon, {
+    className: cn('close-icon')
+  })));
 };
 
 Notification.propTypes = {
   type: PropTypes.oneOf(Object.values(NotificationTypes)),
-  isShort: PropTypes.bool
+  className: PropTypes.string,
+  shadowLevel: PropTypes.oneOf(Object.values(ShadowTypes)),
+  isColored: PropTypes.bool,
+  hasCloseButton: PropTypes.bool,
+  title: PropTypes.string,
+  link: PropTypes.string,
+  rel: PropTypes.string,
+  href: PropTypes.string,
+  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+  icon: PropTypes.element,
+  onClose: PropTypes.func,
+  onLinkClick: PropTypes.func
 };
 export default Notification;

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

@@ -0,0 +1,12 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-pagination {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './Pagination.less';
+interface IPagination {
+    /** Общее количество страниц */
+    totalPages: number;
+    /** Номер текущей страницы */
+    activePage: number;
+    /** Тема компонента */
+    theme?: 'default' | 'light';
+    /** Обработчик изменения активной страницы */
+    onChange: (value: number) => void;
+}
+declare const Pagination: React.FC<IPagination>;
+export default Pagination;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import "./Pagination.css";
+import PaginationButtons from "./components/PaginationButtons/PaginationButtons";
+import PaginationNavigation from "./components/PaginationNavigation/PaginationNavigation";
+import usePagination, { Button } from "./usePagination";
+var cn = cnCreate('mfui-pagination');
+
+var Pagination = function Pagination(_ref) {
+  var totalPages = _ref.totalPages,
+      activePage = _ref.activePage,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+      onChange = _ref.onChange;
+  var paginationItems = usePagination(totalPages, activePage);
+  var handleBackClick = React.useCallback(function () {
+    onChange(activePage - 1);
+  }, [activePage, onChange]);
+  var handleNextClick = React.useCallback(function () {
+    onChange(activePage + 1);
+  }, [activePage, onChange]);
+  var handlePageButtonClick = React.useCallback(function (value) {
+    onChange(value);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(PaginationNavigation, {
+    direction: "left",
+    disabled: activePage === Button.FIRST,
+    onClick: handleBackClick,
+    className: cn('button'),
+    theme: theme
+  }), /*#__PURE__*/React.createElement(PaginationButtons, {
+    items: paginationItems,
+    activeButton: activePage,
+    hiddenButton: Button.HIDDEN,
+    theme: theme,
+    onClick: handlePageButtonClick
+  }), /*#__PURE__*/React.createElement(PaginationNavigation, {
+    disabled: activePage === totalPages,
+    onClick: handleNextClick,
+    className: cn('button'),
+    theme: theme
+  }));
+};
+
+Pagination.propTypes = {
+  totalPages: PropTypes.number.isRequired,
+  activePage: PropTypes.number.isRequired,
+  theme: PropTypes.oneOf(['default', 'light']),
+  onChange: PropTypes.func.isRequired
+};
+export default Pagination;

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

@@ -0,0 +1,62 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-pagination-button {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 50%;
+  border: 1px solid transparent;
+  background-color: transparent;
+  cursor: pointer;
+}
+.mfui-pagination-button svg {
+  width: 100%;
+}
+.mfui-pagination-button:disabled {
+  pointer-events: none;
+}
+.mfui-pagination-button_active {
+  border-color: #00B956;
+  pointer-events: none;
+}
+.mfui-pagination-button_theme_default {
+  color: #333333;
+}
+.mfui-pagination-button_theme_default svg {
+  fill: #333333;
+}
+.mfui-pagination-button_theme_default:hover {
+  background-color: #F6F6F6;
+}
+.mfui-pagination-button_theme_default.mfui-pagination-button_active {
+  border-color: #00B956;
+}
+.mfui-pagination-button_theme_light {
+  color: #FFFFFF;
+}
+.mfui-pagination-button_theme_light svg {
+  fill: #FFFFFF;
+}
+.mfui-pagination-button_theme_light:hover {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+.mfui-pagination-button_theme_light.mfui-pagination-button_active {
+  border-color: #FFFFFF;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './PaginationButton.less';
+declare type ValueType = string | number;
+export interface IPaginationButton {
+    disabled?: boolean;
+    isActive?: boolean;
+    theme?: 'default' | 'light';
+    className?: string;
+    onClick?: (value?: ValueType) => void;
+    value?: ValueType;
+}
+declare const PaginationButton: React.FC<IPaginationButton>;
+export default PaginationButton;