@skbkontur/react-ui 0.0.0-6dd088a035 → 0.0.0-70dd810c5c

package/cjs/components/Paging/ForwardIcon.d.ts

@@ -1,3 +1,6 @@
 export declare const ForwardIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
     size?: number | "small" | "medium" | "large" | undefined;
 }>;
+export declare const ForwardIconMobile: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/cjs/components/Paging/ForwardIcon.js

@@ -1,5 +1,8 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ForwardIcon = void 0;var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ForwardIconMobile = exports.ForwardIcon = void 0;var _react = _interopRequireDefault(require("react"));
 
+var _ArrowARightIcon16Light = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light");
+var _ArrowARightIcon20Light = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light");
+var _ArrowARightIcon24Regular = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular");
 var _ArrowCRightIcon16Light = require("../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon16Light");
 var _ArrowCRightIcon20Light = require("../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon20Light");
 var _ArrowCRightIcon24Regular = require("../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon24Regular");
@@ -12,4 +15,13 @@ var ForwardIcon = exports.ForwardIcon = (0, _iconSizer.iconSizer)(
     large: function large() {return /*#__PURE__*/_react.default.createElement(_ArrowCRightIcon24Regular.ArrowCRightIcon24Regular, null);}
   },
   'ForwardIcon'
+);
+
+var ForwardIconMobile = exports.ForwardIconMobile = (0, _iconSizer.iconSizer)(
+  {
+    small: function small() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon16Light.ArrowARightIcon16Light, null);},
+    medium: function medium() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon20Light.ArrowARightIcon20Light, null);},
+    large: function large() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon24Regular.ArrowARightIcon24Regular, null);}
+  },
+  'ForwardIconMobile'
 );

package/cjs/components/Paging/ForwardIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_ArrowCRightIcon16Light","_ArrowCRightIcon20Light","_ArrowCRightIcon24Regular","_iconSizer","ForwardIcon","exports","iconSizer","small","default","createElement","ArrowCRightIcon16Light","medium","ArrowCRightIcon20Light","large","ArrowCRightIcon24Regular"],"sources":["ForwardIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ArrowCRightIcon16Light } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon16Light';\nimport { ArrowCRightIcon20Light } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon20Light';\nimport { ArrowCRightIcon24Regular } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ForwardIcon = iconSizer(\n  {\n    small: () => <ArrowCRightIcon16Light />,\n    medium: () => <ArrowCRightIcon20Light />,\n    large: () => <ArrowCRightIcon24Regular />,\n  },\n  'ForwardIcon',\n);\n"],"mappings":"iKAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,yBAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;;AAEO,IAAMK,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,oBAAS;EAClC;IACEC,KAAK,EAAE,SAAAA,MAAA,uBAAMV,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACT,uBAAA,CAAAU,sBAAsB,MAAE,CAAC;IACvCC,MAAM,EAAE,SAAAA,OAAA,uBAAMd,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,uBAAA,CAAAW,sBAAsB,MAAE,CAAC;IACxCC,KAAK,EAAE,SAAAA,MAAA,uBAAMhB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACP,yBAAA,CAAAY,wBAAwB,MAAE,CAAC;EAC3C,CAAC;EACD;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_ArrowARightIcon16Light","_ArrowARightIcon20Light","_ArrowARightIcon24Regular","_ArrowCRightIcon16Light","_ArrowCRightIcon20Light","_ArrowCRightIcon24Regular","_iconSizer","ForwardIcon","exports","iconSizer","small","default","createElement","ArrowCRightIcon16Light","medium","ArrowCRightIcon20Light","large","ArrowCRightIcon24Regular","ForwardIconMobile","ArrowARightIcon16Light","ArrowARightIcon20Light","ArrowARightIcon24Regular"],"sources":["ForwardIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ArrowARightIcon16Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light';\nimport { ArrowARightIcon20Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light';\nimport { ArrowARightIcon24Regular } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular';\nimport { ArrowCRightIcon16Light } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon16Light';\nimport { ArrowCRightIcon20Light } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon20Light';\nimport { ArrowCRightIcon24Regular } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ForwardIcon = iconSizer(\n  {\n    small: () => <ArrowCRightIcon16Light />,\n    medium: () => <ArrowCRightIcon20Light />,\n    large: () => <ArrowCRightIcon24Regular />,\n  },\n  'ForwardIcon',\n);\n\nexport const ForwardIconMobile = iconSizer(\n  {\n    small: () => <ArrowARightIcon16Light />,\n    medium: () => <ArrowARightIcon20Light />,\n    large: () => <ArrowARightIcon24Regular />,\n  },\n  'ForwardIconMobile',\n);\n"],"mappings":"6LAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,yBAAA,GAAAH,OAAA;AACA,IAAAI,uBAAA,GAAAJ,OAAA;AACA,IAAAK,uBAAA,GAAAL,OAAA;AACA,IAAAM,yBAAA,GAAAN,OAAA;AACA,IAAAO,UAAA,GAAAP,OAAA;;AAEO,IAAMQ,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,oBAAS;EAClC;IACEC,KAAK,EAAE,SAAAA,MAAA,uBAAMb,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACT,uBAAA,CAAAU,sBAAsB,MAAE,CAAC;IACvCC,MAAM,EAAE,SAAAA,OAAA,uBAAMjB,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACR,uBAAA,CAAAW,sBAAsB,MAAE,CAAC;IACxCC,KAAK,EAAE,SAAAA,MAAA,uBAAMnB,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACP,yBAAA,CAAAY,wBAAwB,MAAE,CAAC;EAC3C,CAAC;EACD;AACF,CAAC;;AAEM,IAAMC,iBAAiB,GAAAV,OAAA,CAAAU,iBAAA,GAAG,IAAAT,oBAAS;EACxC;IACEC,KAAK,EAAE,SAAAA,MAAA,uBAAMb,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACZ,uBAAA,CAAAmB,sBAAsB,MAAE,CAAC;IACvCL,MAAM,EAAE,SAAAA,OAAA,uBAAMjB,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACX,uBAAA,CAAAmB,sBAAsB,MAAE,CAAC;IACxCJ,KAAK,EAAE,SAAAA,MAAA,uBAAMnB,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACV,yBAAA,CAAAmB,wBAAwB,MAAE,CAAC;EAC3C,CAAC;EACD;AACF,CAAC","ignoreList":[]}

package/cjs/components/Paging/NavigationHelper.d.ts

@@ -1,7 +1,8 @@
 import type React from 'react';
+import type { Theme } from '../../lib/theming/Theme';
 export interface KeyDescriptionType {
     name: string;
     checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;
 }
-export declare const getKeyName: () => string;
-export declare const checkKeyPressed: (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>) => boolean;
+export declare const getKeyName: (t: Theme) => string;
+export declare const checkKeyPressed: (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>, theme: Theme) => boolean;

package/cjs/components/Paging/NavigationHelper.js

@@ -3,6 +3,8 @@
 var _client = require("../../lib/client");
 
 
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+
 
 
 
@@ -10,12 +12,12 @@ var _client = require("../../lib/client");
 
 var keyDescription = null;
 
-var getKeyDescription = function getKeyDescription() {return keyDescription || (keyDescription = createKeyDescription());};
+var getKeyDescription = function getKeyDescription(theme) {return keyDescription || (keyDescription = createKeyDescription(theme));};
 
-var createKeyDescription = function createKeyDescription() {return (
+var createKeyDescription = function createKeyDescription(theme) {return (
     _client.isMac ?
     {
-      name: 'Alt',
+      name: (0, _ThemeHelpers.isThemeGTE)(theme, '5.3') ? '⌥' : 'Alt',
       checkPressed: function checkPressed(event) {return event.altKey;}
     } :
     {
@@ -23,6 +25,6 @@ var createKeyDescription = function createKeyDescription() {return (
       checkPressed: function checkPressed(event) {return event.ctrlKey;}
     });};
 
-var getKeyName = exports.getKeyName = function getKeyName() {return getKeyDescription().name;};
-var checkKeyPressed = exports.checkKeyPressed = function checkKeyPressed(event) {return (
-    getKeyDescription().checkPressed(event));};
+var getKeyName = exports.getKeyName = function getKeyName(t) {return getKeyDescription(t).name;};
+var checkKeyPressed = exports.checkKeyPressed = function checkKeyPressed(event, theme) {return (
+    getKeyDescription(theme).checkPressed(event));};

package/cjs/components/Paging/NavigationHelper.js.map

@@ -1 +1 @@
-{"version":3,"names":["_client","require","keyDescription","getKeyDescription","createKeyDescription","isMac","name","checkPressed","event","altKey","ctrlKey","getKeyName","exports","checkKeyPressed"],"sources":["NavigationHelper.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { isMac } from '../../lib/client';\nimport type { Nullable } from '../../typings/utility-types';\n\nexport interface KeyDescriptionType {\n  name: string;\n  checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;\n}\n\nlet keyDescription: Nullable<KeyDescriptionType> = null;\n\nconst getKeyDescription = () => keyDescription || (keyDescription = createKeyDescription());\n\nconst createKeyDescription = () =>\n  isMac\n    ? {\n        name: 'Alt',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.altKey,\n      }\n    : {\n        name: 'Ctrl',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.ctrlKey,\n      };\n\nexport const getKeyName = () => getKeyDescription().name;\nexport const checkKeyPressed = (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>) =>\n  getKeyDescription().checkPressed(event);\n"],"mappings":";;AAEA,IAAAA,OAAA,GAAAC,OAAA;;;;;;;;AAQA,IAAIC,cAA4C,GAAG,IAAI;;AAEvD,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA,UAASD,cAAc,KAAKA,cAAc,GAAGE,oBAAoB,CAAC,CAAC,CAAC;;AAE3F,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAA;IACxBC,aAAK;IACD;MACEC,IAAI,EAAE,KAAK;MACXC,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACC,MAAM;IACzF,CAAC;IACD;MACEH,IAAI,EAAE,MAAM;MACZC,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACE,OAAO;IAC1F,CAAC;;AAEA,IAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAA,UAASR,iBAAiB,CAAC,CAAC,CAACG,IAAI;AACjD,IAAMO,eAAe,GAAAD,OAAA,CAAAC,eAAA,GAAG,SAAlBA,eAAeA,CAAIL,KAAuD;IACrFL,iBAAiB,CAAC,CAAC,CAACI,YAAY,CAACC,KAAK,CAAC","ignoreList":[]}
+{"version":3,"names":["_client","require","_ThemeHelpers","keyDescription","getKeyDescription","theme","createKeyDescription","isMac","name","isThemeGTE","checkPressed","event","altKey","ctrlKey","getKeyName","exports","t","checkKeyPressed"],"sources":["NavigationHelper.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { isMac } from '../../lib/client';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers';\n\nexport interface KeyDescriptionType {\n  name: string;\n  checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;\n}\n\nlet keyDescription: Nullable<KeyDescriptionType> = null;\n\nconst getKeyDescription = (theme: Theme) => keyDescription || (keyDescription = createKeyDescription(theme));\n\nconst createKeyDescription = (theme: Theme) =>\n  isMac\n    ? {\n        name: isThemeGTE(theme, '5.3') ? '⌥' : 'Alt',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.altKey,\n      }\n    : {\n        name: 'Ctrl',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.ctrlKey,\n      };\n\nexport const getKeyName = (t: Theme) => getKeyDescription(t).name;\nexport const checkKeyPressed = (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>, theme: Theme) =>\n  getKeyDescription(theme).checkPressed(event);\n"],"mappings":";;AAEA,IAAAA,OAAA,GAAAC,OAAA;;;AAGA,IAAAC,aAAA,GAAAD,OAAA;;;;;;;AAOA,IAAIE,cAA4C,GAAG,IAAI;;AAEvD,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,KAAY,UAAKF,cAAc,KAAKA,cAAc,GAAGG,oBAAoB,CAACD,KAAK,CAAC,CAAC;;AAE5G,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAID,KAAY;IACxCE,aAAK;IACD;MACEC,IAAI,EAAE,IAAAC,wBAAU,EAACJ,KAAK,EAAE,KAAK,CAAC,GAAG,GAAG,GAAG,KAAK;MAC5CK,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACC,MAAM;IACzF,CAAC;IACD;MACEJ,IAAI,EAAE,MAAM;MACZE,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACE,OAAO;IAC1F,CAAC;;AAEA,IAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAIE,CAAQ,UAAKZ,iBAAiB,CAACY,CAAC,CAAC,CAACR,IAAI;AAC1D,IAAMS,eAAe,GAAAF,OAAA,CAAAE,eAAA,GAAG,SAAlBA,eAAeA,CAAIN,KAAuD,EAAEN,KAAY;IACnGD,iBAAiB,CAACC,KAAK,CAAC,CAACK,YAAY,CAACC,KAAK,CAAC","ignoreList":[]}

package/cjs/components/Paging/Paging.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { Nullable } from '../../typings/utility-types';
 import type { CommonProps } from '../../internal/CommonWrapper';
+import type { TGetRootNode } from '../../lib/rootNode';
+import type { SizeProp } from '../../lib/types/props';
 export interface ItemComponentProps {
     /** Определяет, является ли страница текущей. */
     active: boolean;
@@ -18,12 +20,15 @@ export interface ItemComponentProps {
 export interface PagingProps extends CommonProps {
     activePage: number;
     /** Компонент обертки по умолчанию.
-     * @default <span /> */
+     * @default <span/> */
     component?: React.ComponentType<ItemComponentProps>;
     /** Задает функцию, которая вызывается при переключении страницы. */
     onPageChange: (pageNumber: number) => void;
     /** Задает общее количество страниц. */
     pagesCount: number;
+    /** Задает размер контрола.
+     * @default 'small', начиная с версии темы 5.3. До этого по умолчанию стоит старый размер 'legacy'. */
+    size?: SizeProp;
     /** Делает компонент недоступным. */
     disabled?: boolean;
     /** Отключает навигационные подсказки.
@@ -58,12 +63,14 @@ export declare class Paging extends React.PureComponent<PagingProps, PagingState
     static displayName: string;
     static defaultProps: DefaultProps;
     private getProps;
-    static propTypes: {};
+    getRootNode: TGetRootNode;
     private setRootNode;
     static isForward(pageNumber: number | 'forward'): boolean;
     state: PagingState;
     private theme;
     private readonly locale;
+    private isMobile;
+    private sizeClassNames;
     private addedGlobalListener;
     private container;
     componentDidMount(): void;
@@ -97,5 +104,9 @@ export declare class Paging extends React.PureComponent<PagingProps, PagingState
     private addGlobalListener;
     private removeGlobalListener;
     private refContainer;
+    private getPagingSizeClassNames;
+    private getDotsIcon;
+    private getForwardIcon;
+    private getSize;
 }
 export {};

package/cjs/components/Paging/Paging.js

@@ -1,5 +1,4 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.PagingDataTids = exports.Paging = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _propTypes = require("prop-types");
 var _globalObject = require("@skbkontur/global-object");
 
 var _isInstanceOf = require("../../lib/isInstanceOf");
@@ -11,6 +10,7 @@ var _utils = require("../../lib/utils");
 var _client = require("../../lib/client");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
@@ -18,6 +18,8 @@ var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/getVisualStateDataAttributes");
+var _ResponsiveLayout = require("../ResponsiveLayout");
+
 
 var _Paging2 = require("./Paging.styles");
 var NavigationHelper = _interopRequireWildcard(require("./NavigationHelper"));
@@ -25,7 +27,8 @@ var _PagingHelper = require("./PagingHelper");
 
 var _locale = require("./locale");
 var _PagingDefaultComponent = require("./PagingDefaultComponent");
-var _ForwardIcon = require("./ForwardIcon");var _dec, _class, _Paging;
+var _ForwardIcon = require("./ForwardIcon");
+var _DotsIcon = require("./DotsIcon");var _dec, _class, _Paging;
 
 var IGNORE_EVENT_TAGS = ['input', 'textarea'];
 
@@ -79,6 +82,11 @@ var IGNORE_EVENT_TAGS = ['input', 'textarea'];
 
 
 
+
+
+
+
+
 
 
 
@@ -95,6 +103,13 @@ var PagingDataTids = exports.PagingDataTids = {
 
 
 
+
+
+
+
+
+
+
 /**
  * Постраничная навигация `Paging` (пейджинг или пагинация) — способ представления большого количества однородной информации, когда контент разбивается на страницы.
  */var
@@ -126,6 +141,8 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
 
 
+
+
     addedGlobalListener = false;_this.
     container = null;_this.
 
@@ -184,6 +201,17 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
 
 
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -219,50 +247,55 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
         _react.default.createElement("span", {
           "data-tid": PagingDataTids.dots,
           key: key,
-          className: (0, _Emotion.cx)((_cx = {}, _cx[_Paging2.styles.dots(_this.theme)] = true, _cx[_Paging2.styles.dotsDisabled(_this.theme)] = _this.props.disabled, _cx)) },
+          className: (0, _Emotion.cx)(_Paging2.styles.dots(_this.theme), _this.sizeClassNames.dots, (_cx = {}, _cx[
+          _Paging2.styles.dotsDisabled(_this.theme)] = _this.props.disabled, _cx)
+          ) },
 
-        '...'
+        _this.getDotsIcon()
         ));
 
     };_this.
 
-    renderForwardLink = function (disabled, focused) {
-      var classes = (0, _Emotion.cx)(
+    renderForwardLink = function (disabled, focused) {var _cx2;
+      var classNames = (0, _Emotion.cx)(
         _Paging2.styles.pageLink(_this.theme),
+        _this.sizeClassNames.pageLink,
         _Paging2.styles.forwardLink(_this.theme),
-        focused && _Paging2.styles.pageLinkFocused(_this.theme),
-        (disabled || _this.props.disabled) && _Paging2.styles.forwardLinkDisabled(_this.theme)
+        _this.sizeClassNames.forwardLink, (_cx2 = {}, _cx2[
+
+        _Paging2.styles.pageLinkFocused(_this.theme)] = focused, _cx2[
+        _Paging2.styles.forwardLinkDisabled(_this.theme)] = disabled || _this.props.disabled, _cx2)
+
       );
       var Component = _this.getProps().component;
       var forward = _this.locale.forward;
 
-      var forwardIcon = /*#__PURE__*/_react.default.createElement(_ForwardIcon.ForwardIcon, { size: parseInt(_this.theme.pagingForwardIconSize), style: { marginLeft: 4 } });
+      var forwardIcon = _this.getForwardIcon();
 
       return /*#__PURE__*/(
         _react.default.createElement(Component, (0, _extends2.default)({
           key: 'forward',
           "data-tid": PagingDataTids.forwardLink,
           active: false,
-          className: classes,
+          className: classNames,
           onClick: disabled ? _utils.emptyHandler : _this.goForward,
           tabIndex: -1,
           pageNumber: 'forward' },
         (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ disabled: disabled })),
 
-        _this.props.caption || forward,
+        !_this.isMobile && (_this.props.caption || forward),
         forwardIcon
         ));
 
     };_this.
 
-    renderPageLink = function (pageNumber, active, focused) {var _cx2;
+    renderPageLink = function (pageNumber, active, focused) {var _cx3;
       var disabled = _this.props.disabled;
-      var classes = (0, _Emotion.cx)((_cx2 = {}, _cx2[
-      _Paging2.styles.pageLink(_this.theme)] = true, _cx2[
-      _Paging2.styles.pageLinkFocused(_this.theme)] = focused, _cx2[
-      _Paging2.styles.pageLinkDisabled(_this.theme)] = disabled, _cx2[
-      _Paging2.styles.pageLinkCurrent(_this.theme)] = active, _cx2[
-      _Paging2.styles.pageLinkCurrentDisabled(_this.theme)] = active && disabled, _cx2)
+      var classNames = (0, _Emotion.cx)(_Paging2.styles.pageLink(_this.theme), _this.sizeClassNames.pageLink, (_cx3 = {}, _cx3[
+      _Paging2.styles.pageLinkFocused(_this.theme)] = focused, _cx3[
+      _Paging2.styles.pageLinkDisabled(_this.theme)] = disabled, _cx3[
+      _Paging2.styles.pageLinkCurrent(_this.theme)] = active, _cx3[
+      _Paging2.styles.pageLinkCurrentDisabled(_this.theme)] = active && disabled, _cx3)
       );
       var Component = _this.getProps().component;
       var handleClick = function handleClick() {return _this.goToPage(pageNumber);};
@@ -278,14 +311,14 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
         _react.default.createElement(Component, {
           "data-tid": PagingDataTids.pageLink,
           active: active,
-          className: classes,
+          className: classNames,
           onClick: handleClick,
           tabIndex: -1,
           pageNumber: pageNumber },
 
         pageNumber
         ),
-        active && _this.renderNavigationHint()
+        active && !_this.isMobile && _this.renderNavigationHint()
         ));
 
     };_this.
@@ -304,7 +337,7 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
         hint = /*#__PURE__*/
         _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
         _react.default.createElement("span", { className: canGoBackward ? '' : _Paging2.styles.transparent() }, '←'), /*#__PURE__*/
-        _react.default.createElement("span", null, NavigationHelper.getKeyName()), /*#__PURE__*/
+        _react.default.createElement("span", null, NavigationHelper.getKeyName(_this.theme)), /*#__PURE__*/
         _react.default.createElement("span", { className: canGoForward ? '' : _Paging2.styles.transparent() }, '→')
         );
 
@@ -341,11 +374,11 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
         return;
       }
 
-      if (NavigationHelper.checkKeyPressed(e) && isArrowLeft) {
+      if (NavigationHelper.checkKeyPressed(e, _this.theme) && isArrowLeft) {
         _this.setState({ focusedItem: null }, _this.goBackward);
         return;
       }
-      if (NavigationHelper.checkKeyPressed(e) && isArrowRight) {
+      if (NavigationHelper.checkKeyPressed(e, _this.theme) && isArrowRight) {
         _this.setState({ focusedItem: null }, _this.goForward);
         return;
       }
@@ -390,7 +423,7 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
     };_this.
 
     getItems = function () {
-      return (0, _PagingHelper.getItems)(_this.props.activePage, _this.props.pagesCount).concat('forward');
+      return (0, _PagingHelper.getItems)(_this.props.activePage, _this.props.pagesCount, _this.isMobile).concat('forward');
     };_this.
 
     getFocusedItem = function () {
@@ -489,29 +522,66 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
     refContainer = function (element) {
       _this.container = element;
-    };return _this;}(0, _inheritsLoose2.default)(Paging, _React$PureComponent);Paging.isForward = function isForward(pageNumber) /* %checks */{return pageNumber === 'forward';};var _proto = Paging.prototype;_proto.componentDidMount = function componentDidMount() {var useGlobalListener = this.getProps().useGlobalListener;if (useGlobalListener) {this.addGlobalListener();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var useGlobalListener = this.getProps().useGlobalListener;if (!prevProps.useGlobalListener && useGlobalListener) {this.addGlobalListener();}if (prevProps.useGlobalListener && !useGlobalListener) {this.removeGlobalListener();}if (prevProps.useGlobalListener !== useGlobalListener) {this.setState({ keyboardControl: useGlobalListener });}};_proto.componentWillUnmount = function componentWillUnmount() {this.removeGlobalListener();};_proto.render = function render() {var _this2 = this;if (this.props.pagesCount < 2) {return null;}return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx3;var _this$getProps = this.getProps(),useGlobalListener = _this$getProps.useGlobalListener;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ disabled: this.props.disabled })), /*#__PURE__*/_react.default.createElement("span", { tabIndex: this.props.disabled ? -1 : 0, "data-tid": PagingDataTids.root, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_Paging2.styles.paging(this.theme)] = true, _cx3[_Paging2.styles.pagingDisabled()] = this.props.disabled, _cx3)), onKeyDown: useGlobalListener ? undefined : this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, ref: this.refContainer }, this.getItems().map(this.renderItem)));};return Paging;}(_react.default.PureComponent), _Paging.__KONTUR_REACT_UI__ = 'Paging', _Paging.displayName = 'Paging', _Paging.defaultProps = { component: _PagingDefaultComponent.PagingDefaultComponent, useGlobalListener: false }, _Paging.propTypes = {}, _Paging)) || _class) || _class);
-
-
-Paging.propTypes = {
-  /**
-   * Current active page
-   */
-  activePage: _propTypes.number.isRequired,
-
-  /**
-   * React component that would be used for rendering items
-   *
-   * Usefull for router integration
-   */
-  component: _propTypes.func,
-
-  /**
-   * Total page count
-   */
-  pagesCount: _propTypes.number.isRequired,
-
-  /**
-   * Calls when page has been changed
-   */
-  onPageChange: _propTypes.func.isRequired
-};
+    };_this.
+
+    getPagingSizeClassNames = function () {
+      var size = _this.getSize();
+      switch (size) {
+        case 'legacy':
+          return {
+            root: _Paging2.styles.pagingLegacy(_this.theme),
+            dots: _Paging2.styles.dotsLegacy(_this.theme),
+            forwardLink: _Paging2.styles.forwardLinkLegacy(_this.theme),
+            pageLink: _Paging2.styles.pageLinkLegacy(_this.theme)
+          };
+        case 'small':
+          return {
+            root: _Paging2.styles.pagingSmall(_this.theme),
+            dots: _Paging2.styles.dotsSmall(_this.theme),
+            forwardLink: _Paging2.styles.forwardLinkSmall(_this.theme),
+            pageLink: _Paging2.styles.pageLinkSmall(_this.theme)
+          };
+        case 'medium':
+          return {
+            root: _Paging2.styles.pagingMedium(_this.theme),
+            dots: _Paging2.styles.dotsMedium(_this.theme),
+            forwardLink: _this.isMobile ?
+            _Paging2.styles.forwardLinkMediumMobile(_this.theme) :
+            _Paging2.styles.forwardLinkMedium(_this.theme),
+            pageLink: _Paging2.styles.pageLinkMedium(_this.theme)
+          };
+        case 'large':
+          return {
+            root: _Paging2.styles.pagingLarge(_this.theme),
+            dots: _Paging2.styles.dotsLarge(_this.theme),
+            forwardLink: _this.isMobile ? _Paging2.styles.forwardLinkLargeMobile(_this.theme) : _Paging2.styles.forwardLinkLarge(_this.theme),
+            pageLink: _Paging2.styles.pageLinkLarge(_this.theme)
+          };
+        default:
+          throw new TypeError("Invalid size prop: '" + _this.props.size + "'");
+      }
+    };_this.
+
+    getDotsIcon = function () {
+      var size = _this.getSize();
+      return size === 'legacy' ? '...' : /*#__PURE__*/_react.default.createElement(_DotsIcon.DotsIcon, { size: size });
+    };_this.
+
+    getForwardIcon = function () {
+      var size = _this.getSize();
+      var iconSize = size === 'legacy' ? parseInt(_this.theme.pagingForwardIconSize) : size;
+      return _this.isMobile ? /*#__PURE__*/
+      _react.default.createElement(_ForwardIcon.ForwardIconMobile, { size: iconSize }) : /*#__PURE__*/
+
+      _react.default.createElement(_ForwardIcon.ForwardIcon, { size: iconSize, style: { marginLeft: 4 } });
+
+    };_this.
+
+    getSize = function () {
+      if (_this.props.size) {
+        return _this.isMobile && _this.props.size === 'small' ? 'medium' : _this.props.size;
+      }
+
+      var defaultSize = (0, _ThemeHelpers.isThemeGTE)(_this.theme, '5.3') ? 'small' : 'legacy';
+      return _this.isMobile && defaultSize === 'small' ? 'medium' : defaultSize;
+    };return _this;}(0, _inheritsLoose2.default)(Paging, _React$PureComponent);Paging.isForward = function isForward(pageNumber) {return pageNumber === 'forward';};var _proto = Paging.prototype;_proto.componentDidMount = function componentDidMount() {var useGlobalListener = this.getProps().useGlobalListener;if (useGlobalListener) {this.addGlobalListener();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var useGlobalListener = this.getProps().useGlobalListener;if (!prevProps.useGlobalListener && useGlobalListener) {this.addGlobalListener();}if (prevProps.useGlobalListener && !useGlobalListener) {this.removeGlobalListener();}if (prevProps.useGlobalListener !== useGlobalListener) {this.setState({ keyboardControl: useGlobalListener });}};_proto.componentWillUnmount = function componentWillUnmount() {this.removeGlobalListener();};_proto.render = function render() {var _this2 = this;if (this.props.pagesCount < 2) {return null;}return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var isMobile = _ref.isMobile;_this2.isMobile = isMobile && (0, _ThemeHelpers.isThemeGTE)(_this2.theme, '5.3');_this2.sizeClassNames = _this2.getPagingSizeClassNames();return _this2.renderMain();});});};_proto.renderMain = function renderMain() {var _cx4,_this3 = this;var _this$getProps = this.getProps(),useGlobalListener = _this$getProps.useGlobalListener;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ disabled: this.props.disabled })), /*#__PURE__*/_react.default.createElement("span", { tabIndex: this.props.disabled ? -1 : 0, "data-tid": PagingDataTids.root, className: (0, _Emotion.cx)(_Paging2.styles.paging(), this.sizeClassNames.root, (_cx4 = {}, _cx4[_Paging2.styles.pagingMobile()] = this.isMobile, _cx4[_Paging2.styles.pagingDisabled()] = this.props.disabled, _cx4)), onKeyDown: useGlobalListener ? undefined : this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, ref: this.refContainer }, this.getItems().map(function (item, index) {return _this3.renderItem(item, index);})));};return Paging;}(_react.default.PureComponent), _Paging.__KONTUR_REACT_UI__ = 'Paging', _Paging.displayName = 'Paging', _Paging.defaultProps = { component: _PagingDefaultComponent.PagingDefaultComponent, useGlobalListener: false }, _Paging)) || _class) || _class);