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

package/dist/es/components/Tile/Tile.css

@@ -5,44 +5,45 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-tile {
+.mfui-tile {
   background-color: #FFFFFF;
 }
-.mfui-beta-tile_radius_rounded {
+.mfui-tile_radius_rounded {
   border-radius: 8px;
 }
-.mfui-beta-tile_pointer {
+.mfui-tile_pointer {
   cursor: pointer;
 }
-.mfui-beta-tile_theme_light.mfui-beta-tile_shadow_low {
+.mfui-tile_theme_light.mfui-tile_shadow_low {
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
 }
-.mfui-beta-tile_theme_light.mfui-beta-tile_shadow_high {
+.mfui-tile_theme_light.mfui-tile_shadow_high {
   -webkit-box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
           box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
 }
-.mfui-beta-tile_theme_light.mfui-beta-tile_shadow_hover {
+.mfui-tile_theme_light.mfui-tile_shadow_hover,
+.mfui-tile_theme_light.mfui-tile_interactive:hover {
   -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
           box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
 }
-.mfui-beta-tile_theme_dark.mfui-beta-tile_shadow_low {
+.mfui-tile_theme_dark.mfui-tile_shadow_low {
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.45);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.45);
 }
-.mfui-beta-tile_theme_dark.mfui-beta-tile_shadow_high {
+.mfui-tile_theme_dark.mfui-tile_shadow_high {
   -webkit-box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25);
           box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25);
 }
-.mfui-beta-tile_theme_dark.mfui-beta-tile_shadow_hover {
+.mfui-tile_theme_dark.mfui-tile_shadow_hover,
+.mfui-tile_theme_dark.mfui-tile_interactive:hover {
   -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
           box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
 }
-.mfui-beta-tile__link {
+.mfui-tile__link {
   color: inherit;
 }
-.mfui-beta-tile__link,
-.mfui-beta-tile__link:hover {
+.mfui-tile__link,
+.mfui-tile__link:hover {
   text-decoration: none;
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import './Tile.less';
-import { IDataAttributes } from './../../utils/dataAttrs';
 export declare const Theme: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
@@ -18,7 +18,7 @@ export declare const Shadow: {
     readonly HOVER: "hover";
 };
 declare type ShadowType = typeof Shadow[keyof typeof Shadow];
-export interface ITileProps extends IDataAttributes {
+export interface ITileProps extends IFilterDataAttrs {
     /** Ссылка */
     href?: string;
     /** Тема */

package/dist/es/components/Tile/Tile.js

@@ -1,11 +1,9 @@
 import "core-js/modules/es.object.values";
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
-import cnCreate from "../../utils/cnCreate";
 import "./Tile.css";
-import filterDataAttrs from "./../../utils/dataAttrs";
 export var Theme = {
   LIGHT: 'light',
   DARK: 'dark'
@@ -20,7 +18,7 @@ export var Shadow = {
   HIGH: 'high',
   HOVER: 'hover'
 };
-var cn = cnCreate('mfui-beta-tile');
+var cn = cnCreate('mfui-tile');
 
 var Tile = function Tile(_ref) {
   var href = _ref.href,
@@ -37,33 +35,20 @@ var Tile = function Tile(_ref) {
       onClick = _ref.onClick,
       dataAttrs = _ref.dataAttrs;
 
-  var _React$useState = React.useState(shadowLevel),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      currentShadow = _React$useState2[0],
-      setCurrentShadow = _React$useState2[1];
-
   var handleClick = function handleClick(e) {
     onClick && onClick(e);
   };
 
-  var handleHoverTile = function handleHoverTile() {
-    isInteractive && setCurrentShadow(Shadow.HOVER);
-  };
-
-  var handleMouseLeave = function handleMouseLeave() {
-    setCurrentShadow(shadowLevel);
-  };
-
+  var isPointer = !!href || isInteractive;
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       theme: theme,
       radius: radius,
-      shadow: currentShadow,
-      pointer: !!href
+      shadow: shadowLevel,
+      pointer: isPointer,
+      interactive: isInteractive
     }, className),
-    onClick: handleClick,
-    onMouseEnter: handleHoverTile,
-    onMouseLeave: handleMouseLeave
+    onClick: handleClick
   }, filterDataAttrs(dataAttrs)), href && /*#__PURE__*/React.createElement("a", {
     href: href,
     className: cn('link')

package/dist/es/components/Tooltip/Tooltip.css

@@ -5,30 +5,43 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-tooltip {
-  padding: 14px;
-  pointer-events: none;
-  visibility: hidden;
+.mfui-tooltip {
   z-index: 100;
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+  -webkit-transition-property: opacity, visibility;
+  transition-property: opacity, visibility;
+  pointer-events: none;
 }
-.mfui-beta-tooltip_open {
+.mfui-tooltip_open {
   visibility: visible;
+  opacity: 1;
   pointer-events: all;
 }
-.mfui-beta-tooltip_size_small .mfui-beta-tooltip__content {
+.mfui-tooltip_paddings_small .mfui-tooltip__content {
   padding: 8px 16px;
 }
-.mfui-beta-tooltip_size_medium .mfui-beta-tooltip__content {
+.mfui-tooltip_paddings_medium .mfui-tooltip__content {
   padding: 24px;
 }
-.mfui-beta-tooltip__arrow {
-  height: 12px;
-  width: 12px;
+.mfui-tooltip__content {
+  position: relative;
+  z-index: 1;
+}
+.mfui-tooltip__content-shadow {
   position: absolute;
+  z-index: -1;
 }
-.mfui-beta-tooltip__arrow:before {
+.mfui-tooltip__arrow {
+  width: 12px;
   height: 12px;
+  position: absolute;
+}
+.mfui-tooltip__arrow:before {
   width: 12px;
+  height: 12px;
   content: '';
   position: absolute;
   top: 0;
@@ -37,15 +50,15 @@ h5 {
           transform: rotate(45deg);
   background-color: #FFFFFF;
 }
-.mfui-beta-tooltip__arrow-shadow {
-  height: 12px;
+.mfui-tooltip__arrow-shadow {
   width: 12px;
+  height: 12px;
   position: absolute;
   z-index: -1;
 }
-.mfui-beta-tooltip__arrow-shadow:before {
-  height: 12px;
+.mfui-tooltip__arrow-shadow:before {
   width: 12px;
+  height: 12px;
   content: '';
   position: absolute;
   top: 0;
@@ -55,23 +68,63 @@ h5 {
   -webkit-box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.15);
           box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.15);
 }
-.mfui-beta-tooltip[data-popper-placement='right'] > .mfui-beta-tooltip__arrow,
-.mfui-beta-tooltip[data-popper-placement='right'] > .mfui-beta-tooltip__arrow-shadow {
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-shadow {
   right: calc(100% - 20px);
 }
-.mfui-beta-tooltip[data-popper-placement='left'] > .mfui-beta-tooltip__arrow,
-.mfui-beta-tooltip[data-popper-placement='left'] > .mfui-beta-tooltip__arrow-shadow {
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__content {
+  -webkit-transform: translateX(14px);
+          transform: translateX(14px);
+}
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__content-shadow {
+  top: 0;
+  right: -14px;
+  bottom: 0;
+  left: 14px;
+}
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-shadow {
   left: calc(100% - 20px);
 }
-.mfui-beta-tooltip[data-popper-placement='top'] > .mfui-beta-tooltip__arrow,
-.mfui-beta-tooltip[data-popper-placement='top'] > .mfui-beta-tooltip__arrow-shadow {
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__content {
+  -webkit-transform: translateX(-14px);
+          transform: translateX(-14px);
+}
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__content-shadow {
+  top: 0;
+  right: 14px;
+  bottom: 0;
+  left: -14px;
+}
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-shadow {
   top: calc(100% - 20px);
 }
-.mfui-beta-tooltip[data-popper-placement='bottom'] > .mfui-beta-tooltip__arrow,
-.mfui-beta-tooltip[data-popper-placement='bottom'] > .mfui-beta-tooltip__arrow-shadow {
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__content {
+  -webkit-transform: translateY(-14px);
+          transform: translateY(-14px);
+}
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__content-shadow {
+  top: -14px;
+  right: 0;
+  bottom: 14px;
+  left: 0;
+}
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow-shadow {
   bottom: calc(100% - 20px);
 }
-.mfui-beta-tooltip[data-popper-escaped='true'] {
-  pointer-events: none;
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__content {
+  -webkit-transform: translateY(14px);
+          transform: translateY(14px);
+}
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__content-shadow {
+  top: 14px;
+  right: 0;
+  bottom: -14px;
+  left: 0;
+}
+.mfui-tooltip[data-popper-escaped='true'] {
   visibility: hidden;
+  pointer-events: none;
 }

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

@@ -7,11 +7,12 @@ export declare const Placement: {
     readonly BOTTOM: "bottom";
 };
 declare type PlacementType = typeof Placement[keyof typeof Placement];
-export declare const Size: {
+export declare const Paddings: {
+    readonly NONE: "none";
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
 };
-declare type SizeType = typeof Size[keyof typeof Size];
+declare type PaddingsType = typeof Paddings[keyof typeof Paddings];
 export declare const TriggerEvent: {
     readonly HOVER: "hover";
     readonly CLICK: "click";
@@ -21,20 +22,33 @@ declare type TriggerEventType = typeof TriggerEvent[keyof typeof TriggerEvent];
 export interface ITooltipProps {
     /** Позиционирование относительно триггер-элемента */
     placement?: PlacementType;
+    /** Направления перестроения тултипа при переполнении */
+    fallbackPlacements?: PlacementType[];
     /** Размер отступов от контента */
-    size?: SizeType;
+    paddings?: PaddingsType;
     /** Тип взаимодействия с триггер-элементом для показа тултипа */
     triggerEvent?: TriggerEventType;
-    /** Триггер-элемент */
+    /** Реф на элемент, за границы которого тултип не сможет выйти. По умолчанию viewport  */
+    boundaryElement?: React.RefObject<HTMLElement>;
+    /** Реф на триггер-элемент */
     triggerElement: React.RefObject<HTMLElement>;
+    /** Реф элемента, на который указывает стрелка тултипа. По умолчанию стрелка указывает на triggerElement. */
+    targetElement?: React.RefObject<HTMLElement>;
     /** Управление состоянием. Компонент поддерживает контроллируемое и неконтроллируемое состояние. */
     isOpened?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        arrow?: string;
+        content?: string;
+        contentShadow?: string;
+    };
     /** Обработчик на открытие */
     onOpen?: (e: MouseEvent) => void;
     /** Обработчик на закрытие */
-    onClose?: (e: MouseEvent) => void;
+    onClose?: (e: MouseEvent | FocusEvent) => void;
 }
 declare const Tooltip: React.FC<ITooltipProps>;
 export default Tooltip;

package/dist/es/components/Tooltip/Tooltip.js

@@ -4,19 +4,29 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import { cnCreate, detectTouch } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import { usePopper } from 'react-popper';
-import cnCreate from "../../utils/cnCreate";
-import detectTouch from "../../utils/detectTouch";
 import Tile from "../Tile/Tile";
 import "./Tooltip.css";
+var TOOLTIP_PADDING_FOR_FLIP = 14;
+var MOUSE_KEY = 'mousedown';
+var KEYBOARD_ENTER_KEY = 'Enter';
+var KEYBOARD_NUMPAD_ENTER_KEY = 'NumpadEnter';
+var TOUCH_KEY = 'touchstart';
 export var Placement = {
   LEFT: 'left',
   TOP: 'top',
   RIGHT: 'right',
   BOTTOM: 'bottom'
 };
-export var Size = {
+
+var checkEventIsClickOrEnterPress = function checkEventIsClickOrEnterPress(e) {
+  return e.type === TOUCH_KEY || e.type === MOUSE_KEY || e.code === KEYBOARD_ENTER_KEY || e.code === KEYBOARD_NUMPAD_ENTER_KEY;
+};
+
+export var Paddings = {
+  NONE: 'none',
   SMALL: 'small',
   MEDIUM: 'medium'
 };
@@ -25,23 +35,35 @@ export var TriggerEvent = {
   CLICK: 'click',
   CONTROLLED: 'controlled'
 };
-var cn = cnCreate('mfui-beta-tooltip');
+var cn = cnCreate('mfui-tooltip');
 
 var Tooltip = function Tooltip(_ref) {
   var className = _ref.className,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'top' : _ref$placement,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      _ref$fallbackPlacemen = _ref.fallbackPlacements,
+      fallbackPlacements = _ref$fallbackPlacemen === void 0 ? ['left', 'right', 'top', 'bottom'] : _ref$fallbackPlacemen,
+      _ref$paddings = _ref.paddings,
+      paddings = _ref$paddings === void 0 ? 'medium' : _ref$paddings,
       _ref$triggerEvent = _ref.triggerEvent,
       triggerEvent = _ref$triggerEvent === void 0 ? 'hover' : _ref$triggerEvent,
+      boundaryElement = _ref.boundaryElement,
       triggerElement = _ref.triggerElement,
+      targetElement = _ref.targetElement,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
       children = _ref.children,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var rootClassName = _ref$classes.root,
+      arrowClassName = _ref$classes.arrow,
+      contentClassName = _ref$classes.content,
+      contentShadowClassName = _ref$classes.contentShadow,
       onOpen = _ref.onOpen,
       onClose = _ref.onClose;
   var currentTrigger = triggerElement.current;
+  var currentTarget = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.current) || currentTrigger;
+  var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -72,7 +94,8 @@ var Tooltip = function Tooltip(_ref) {
       }, {
         name: 'flip',
         options: {
-          fallbackPlacements: ['left', 'right', 'top', 'bottom']
+          fallbackPlacements: fallbackPlacements,
+          padding: TOOLTIP_PADDING_FOR_FLIP
         }
       }, {
         name: 'eventListeners',
@@ -80,11 +103,16 @@ var Tooltip = function Tooltip(_ref) {
           scroll: isOpen,
           resize: isOpen
         }
+      }, {
+        name: 'preventOverflow',
+        options: {
+          boundary: currentBoundary
+        }
       }]
     };
-  }, [placement, arrowElement, isOpen]);
+  }, [placement, arrowElement, currentBoundary, isOpen]);
 
-  var _usePopper = usePopper(currentTrigger, popperElement, options),
+  var _usePopper = usePopper(currentTarget, popperElement, options),
       styles = _usePopper.styles,
       attributes = _usePopper.attributes,
       update = _usePopper.update;
@@ -102,7 +130,7 @@ var Tooltip = function Tooltip(_ref) {
     return setIsTouchDevice(detectTouch());
   }, [detectTouch, setIsTouchDevice]);
   var clickEvent = useMemo(function () {
-    return isTouchDevice ? 'touchstart' : 'mousedown';
+    return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
   }, [isTouchDevice]);
   var triggerEventName = useMemo(function () {
     return isTouchDevice ? 'click' : triggerEvent;
@@ -114,6 +142,10 @@ var Tooltip = function Tooltip(_ref) {
     }
   }, [isOpen, onOpen, setIsOpen]);
   var handleClick = useCallback(function (e) {
+    if (!checkEventIsClickOrEnterPress(e)) {
+      return;
+    }
+
     setIsOpen(function (open) {
       return !open;
     });
@@ -133,25 +165,43 @@ var Tooltip = function Tooltip(_ref) {
       onClose && onClose(e);
     }
   }, [onClose, currentTrigger, popperElement, setIsOpen]);
+  var handleBlurEvent = useCallback(function (e) {
+    setIsOpen(false);
+    onClose && onClose(e);
+  }, [onClose, setIsOpen]);
   useEffect(function () {
     if (triggerEventName === TriggerEvent.HOVER) {
-      currentTrigger && currentTrigger.addEventListener('mouseenter', handleMouseEnter);
+      if (currentTrigger) {
+        currentTrigger.addEventListener('mouseenter', handleMouseEnter);
+        currentTrigger.addEventListener('focus', handleMouseEnter);
+      }
 
       if (isOpen) {
         document.addEventListener('mouseover', handleOutsideEvent);
+        currentTrigger && currentTrigger.addEventListener('blur', handleBlurEvent);
       } else {
         document.removeEventListener('mouseover', handleOutsideEvent);
+        currentTrigger && currentTrigger.removeEventListener('blur', handleBlurEvent);
       }
 
       return function () {
-        currentTrigger && currentTrigger.removeEventListener('mouseenter', handleMouseEnter);
+        if (currentTrigger) {
+          currentTrigger.removeEventListener('mouseenter', handleMouseEnter);
+          currentTrigger.removeEventListener('focus', handleMouseEnter);
+        }
+
         document.removeEventListener('mouseover', handleOutsideEvent);
       };
     }
+
+    return undefined;
   }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleMouseEnter]);
   useEffect(function () {
     if (triggerEventName === TriggerEvent.CLICK) {
-      currentTrigger && currentTrigger.addEventListener(clickEvent, handleClick);
+      if (currentTrigger) {
+        currentTrigger.addEventListener(clickEvent, handleClick);
+        currentTrigger.addEventListener('keydown', handleClick);
+      }
 
       if (isOpen) {
         document.addEventListener(clickEvent, handleOutsideEvent);
@@ -160,38 +210,51 @@ var Tooltip = function Tooltip(_ref) {
       }
 
       return function () {
-        currentTrigger && currentTrigger.removeEventListener(clickEvent, handleClick);
+        if (currentTrigger) {
+          currentTrigger.removeEventListener(clickEvent, handleClick);
+          currentTrigger.removeEventListener('keydown', handleClick);
+        }
+
         document.removeEventListener(clickEvent, handleOutsideEvent);
       };
     }
+
+    return undefined;
   }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: cn([className], {
-      size: size,
+    className: cn({
+      paddings: paddings,
       open: isOpen
-    }),
+    }, [className, rootClassName]),
     ref: setPopperElement,
     style: styles.popper
   }, attributes.popper), /*#__PURE__*/React.createElement("div", {
     ref: setArrowElement,
-    className: cn('arrow'),
+    className: cn('arrow', [arrowClassName]),
     style: styles.arrow
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('arrow-shadow'),
     style: styles.arrow
   }), /*#__PURE__*/React.createElement(Tile, {
+    className: cn('content', [contentClassName])
+  }, children), /*#__PURE__*/React.createElement(Tile, {
     shadowLevel: "high",
-    className: cn('content')
-  }, children));
+    className: cn('content-shadow', [contentShadowClassName])
+  }));
 };
 
 Tooltip.propTypes = {
   placement: PropTypes.oneOf(Object.values(Placement)),
-  size: PropTypes.oneOf(Object.values(Size)),
+  fallbackPlacements: PropTypes.arrayOf(PropTypes.oneOf(Object.values(Placement)).isRequired),
+  paddings: PropTypes.oneOf(Object.values(Paddings)),
   triggerEvent: PropTypes.oneOf(Object.values(TriggerEvent)),
+  boundaryElement: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   triggerElement: function triggerElement(props, propName, componentName, location) {
     var prop = props[propName];
-    var isObject = _typeof(prop) === 'object' && prop !== null;
+    var isObject = _typeof(prop) === 'object' && prop !== null; // eslint-disable-next-line no-prototype-builtins
+
     var hasPropCurrent = isObject && prop.hasOwnProperty('current');
 
     if (prop === undefined) {
@@ -204,8 +267,17 @@ Tooltip.propTypes = {
 
     return null;
   },
+  targetElement: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   isOpened: PropTypes.bool,
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    arrow: PropTypes.string,
+    content: PropTypes.string,
+    contentShadow: PropTypes.string
+  }),
   onOpen: PropTypes.func,
   onClose: PropTypes.func
 };

package/dist/es/index.d.ts

@@ -1,24 +1,19 @@
 export { default as Accordion } from './components/Accordion/Accordion';
 export { default as Banner } from './components/Banner/Banner';
 export { default as BannerDot } from './components/Banner/BannerDot';
-export { default as breakpoints } from './constants/breakpoints';
 export { default as Button } from './components/Button/Button';
 export { default as Calendar } from './components/Calendar/Calendar';
 export { default as Carousel } from './components/Carousel/Carousel';
 export { default as Checkbox } from './components/Checkbox/Checkbox';
 export { default as checkBreakpointsPropTypes } from './components/Carousel/checkBreakpointsPropTypes';
-export { default as cnCreate } from './utils/cnCreate';
 export { default as Collapse } from './components/Collapse/Collapse';
 export { default as ContentArea } from './components/ContentArea/ContentArea';
-export { default as convert } from './utils/convert';
 export { default as Counter } from './components/Counter/Counter';
-export { default as dataAttrs } from './utils/dataAttrs';
 export { default as Day } from './components/Calendar/components/Day/Day';
-export { default as detectTouch } from './utils/detectTouch';
 export { default as Grid } from './components/Grid/Grid';
 export { default as GridColumn } from './components/Grid/GridColumn';
 export { default as Header } from './components/Header/Header';
-export { default as IconButton } from './components/IconButton/IconButton';
+export { default as helpers } from './components/Pagination/helpers';
 export { default as InputLabel } from './components/InputLabel/InputLabel';
 export { default as Link } from './components/Link/Link';
 export { default as List } from './components/List/List';
@@ -27,6 +22,10 @@ export { default as Logo } from './components/Logo/Logo';
 export { default as Month } from './components/Calendar/components/Month/Month';
 export { default as NavArrow } from './components/NavArrow/NavArrow';
 export { default as Notification } from './components/Notification/Notification';
+export { default as Pagination } from './components/Pagination/Pagination';
+export { default as PaginationButton } from './components/Pagination/components/PaginationButton/PaginationButton';
+export { default as PaginationButtons } from './components/Pagination/components/PaginationButtons/PaginationButtons';
+export { default as PaginationNavigation } from './components/Pagination/components/PaginationNavigation/PaginationNavigation';
 export { default as Paragraph } from './components/Paragraph/Paragraph';
 export { default as Preloader } from './components/Preloader/Preloader';
 export { default as RadioButton } from './components/RadioButton/RadioButton';
@@ -37,6 +36,6 @@ export { default as Tab } from './components/Tabs/Tab';
 export { default as Tabs } from './components/Tabs/Tabs';
 export { default as TextField } from './components/TextField/TextField';
 export { default as TextLink } from './components/TextLink/TextLink';
-export { default as throttleTime } from './constants/throttleTime';
 export { default as Tile } from './components/Tile/Tile';
 export { default as Tooltip } from './components/Tooltip/Tooltip';
+export { default as usePagination } from './components/Pagination/usePagination';