@via-profit/ui-kit 0.4.0 → 0.6.0

package/Menu/context.d.ts

@@ -9,7 +9,7 @@ interface ActionSetMenuState {
     readonly type: 'setMenuState';
     readonly payload: Partial<MenuState>;
 }
-export declare const actionSetmenuState: (payload: ActionSetMenuState['payload']) => ActionSetMenuState;
+export declare const actionSetmenuState: (payload: ActionSetMenuState["payload"]) => ActionSetMenuState;
 export declare const defaultState: MenuState;
 interface MenuContextProviderProps {
     readonly children: React.ReactNode | readonly React.ReactNode[];

package/Menu/index.d.ts

@@ -6,6 +6,6 @@ export * from './MenuContainer';
 export * from './MenuItem';
 export * from './MenuList';
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: MenuProps<T, Multiple> & {
-    ref?: React.Ref<MenuRef> | undefined;
+    ref?: React.Ref<MenuRef>;
 }) => React.ReactElement;
 export default _default;

package/Modal/BaseModal/ModalInner.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
+const tokens_1 = require("../../ThemeProvider/tokens");
 const StyledModalInner = styled_1.default.div `
   opacity: 0;
   z-index: ${({ theme }) => theme.zIndex.modal};
@@ -24,6 +25,7 @@ const StyledModalInner = styled_1.default.div `
   pointer-events: all;
   position: relative;
   background-color: ${({ theme }) => theme.color.surface.toString()};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup')};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   margin-top: 2em;
   transition:

package/Modal/BaseModal/ModalWrapper.js

@@ -11,6 +11,32 @@ const TabManager_1 = __importDefault(require("../../utils/TabManager"));
  * Count of the modals which lock the body scroll
  */
 let bodyLocksCount = 0;
+const SCROLL_WIDTH_PROPERTY = '--modal-scroll-width';
+/**
+ * The first modal hides the scrollbar of the page and puts the margin of the same width instead,
+ * so the page does not move. The width is measured before the scrollbar is hidden:
+ * the scrollbar of the window, not of the body (`0` for the overlay scrollbars)
+ */
+const lockPageScroll = () => {
+    var _a;
+    if (bodyLocksCount === 0) {
+        const scrollWidth = Math.max(window.innerWidth - window.document.documentElement.clientWidth, 0);
+        window.document.documentElement.style.setProperty(SCROLL_WIDTH_PROPERTY, `${scrollWidth}px`);
+        (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.add('-modal-over');
+    }
+    bodyLocksCount += 1;
+};
+/**
+ * The last modal returns the scrollbar of the page
+ */
+const unlockPageScroll = () => {
+    var _a;
+    bodyLocksCount = Math.max(0, bodyLocksCount - 1);
+    if (bodyLocksCount === 0) {
+        (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.remove('-modal-over');
+        window.document.documentElement.style.removeProperty(SCROLL_WIDTH_PROPERTY);
+    }
+};
 const ModalWrapper = props => {
     const { children, isOpen: isOpenProp, autofocus = true } = props;
     const { state, dispatch } = (0, context_1.useContext)();
@@ -34,46 +60,16 @@ const ModalWrapper = props => {
             }
         };
     }, [isOpen, autofocus]);
-    const getScrollWidth = react_1.default.useCallback(() => {
-        var _a;
-        const outer = window.document.createElement('div');
-        const inner = window.document.createElement('div');
-        const isVerticalScrollbar = window.document.body.scrollHeight > window.document.body.clientHeight;
-        if (!isVerticalScrollbar) {
-            return 0;
-        }
-        let widthNoScroll = 0;
-        let widthWithScroll = 0;
-        outer.style.visibility = 'hidden';
-        outer.style.width = '100px';
-        window.document.body.appendChild(outer);
-        widthNoScroll = outer.offsetWidth;
-        // force scrollbars
-        outer.style.overflow = 'scroll';
-        // add innerdiv
-        inner.style.width = '100%';
-        outer.appendChild(inner);
-        widthWithScroll = inner.offsetWidth;
-        // remove div
-        (_a = outer.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(outer);
-        return widthNoScroll - widthWithScroll;
-    }, []);
     const lockBody = react_1.default.useCallback(() => {
-        var _a;
         if (!bodyLockedRef.current) {
             bodyLockedRef.current = true;
-            bodyLocksCount += 1;
-            (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.add('-modal-over');
+            lockPageScroll();
         }
     }, []);
     const unlockBody = react_1.default.useCallback(() => {
-        var _a;
         if (bodyLockedRef.current) {
             bodyLockedRef.current = false;
-            bodyLocksCount = Math.max(0, bodyLocksCount - 1);
-            if (bodyLocksCount === 0) {
-                (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.remove('-modal-over');
-            }
+            unlockPageScroll();
         }
     }, []);
     /**
@@ -165,13 +161,10 @@ const ModalWrapper = props => {
     return react_1.default.useMemo(() => isMounted ? (react_1.default.createElement("div", { ref: containerRef, tabIndex: -1, id: id },
         children,
         react_1.default.createElement(react_2.Global, { styles: (0, react_2.css) `
-              :root {
-                --modal-scroll-width: ${getScrollWidth()}px;
-              }
               body.-modal-over {
                 overflow: hidden;
-                margin-right: var(--modal-scroll-width);
+                margin-right: var(${SCROLL_WIDTH_PROPERTY}, 0px);
               }
-            ` }))) : null, [children, getScrollWidth, isMounted, id]);
+            ` }))) : null, [children, isMounted, id]);
 };
 exports.default = ModalWrapper;

package/Modal/BaseModal/context.d.ts

@@ -18,7 +18,7 @@ export type ActionSetState = {
 };
 export type Action = ActionSetState;
 export declare const defaultState: State;
-export declare const actionSetState: (payload: ActionSetState['payload']) => ActionSetState;
+export declare const actionSetState: (payload: ActionSetState["payload"]) => ActionSetState;
 export interface ContextProviderProps {
     readonly children: React.ReactNode | readonly React.ReactNode[];
     readonly initialState: Omit<State, 'isMounted'>;

package/Modal/ConfirmBox/ConfirmBoxContent.js

@@ -16,9 +16,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../../ThemeProvider/tokens");
 const StyledConfirmBoxContent = styled_1.default.div `
   flex: 1;
-  padding: 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
 `;
 const ConfirmBoxContent = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);

package/Modal/ConfirmBox/ConfirmBoxFooter.js

@@ -17,11 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Button_1 = __importDefault(require("../../Button"));
+const tokens_1 = require("../../ThemeProvider/tokens");
 const StyledConfirmBoxFooter = styled_1.default.div `
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: 1em 1em 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
 
   & > button {
     border-radius: 0;

package/Modal/ConfirmBox/ConfirmBoxHeader.js

@@ -16,8 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../../ThemeProvider/tokens");
 const StyedConfirmBoxHeader = styled_1.default.div `
-  padding: 1em 1em 0 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x} 0 ${x}`;
+}};
 `;
 const ConfirmBoxTitle = styled_1.default.div `
   font-size: 1.4rem;

package/Modal/Dialog/DialogInner.js

@@ -17,8 +17,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const ModalInner_1 = __importDefault(require("../BaseModal/ModalInner"));
+const tokens_1 = require("../../ThemeProvider/tokens");
 const StyledDialogInner = (0, styled_1.default)(ModalInner_1.default) `
-  padding: 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
 `;
 const DialogInner = (props, ref) => {
     const { children, dialogID } = props, restProps = __rest(props, ["children", "dialogID"]);

package/Modal/Dialog/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/Modal/Drawer/DrawerCloseIcon.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_1 = require("react");

package/Modal/Drawer/DrawerFooter.js

@@ -16,8 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../../ThemeProvider/tokens");
 const StyledDrawerFooter = styled_1.default.div `
-  padding: 0.5em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `calc(${y} / 2) ${x}`;
+}};
 `;
 const DrawerFooter = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);

package/Modal/Drawer/DrawerHeader.d.ts

@@ -31,20 +31,20 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
     /**
      * Display close button in the header
      */
-    readonly showCloseButton?: boolean | undefined;
+    readonly showCloseButton?: boolean;
     /**
      * Accessible label of the close button\
      * \
      * **Default**: `'Close'`
      */
-    readonly closeButtonLabel?: string | undefined;
+    readonly closeButtonLabel?: string;
     /**
      * Drawer unique ID, the title gets the `${dialogID}-title` id for `aria-labelledby`
      */
-    readonly dialogID?: string | undefined;
+    readonly dialogID?: string;
     /**
      * On close request
      */
-    readonly onRequestClose?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
+    readonly onRequestClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Modal/Drawer/DrawerHeader.js

@@ -19,8 +19,12 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const Span_1 = __importDefault(require("../../Typography/Span"));
 const DrawerCloseIcon_1 = __importDefault(require("./DrawerCloseIcon"));
 const Button_1 = __importDefault(require("../../Button"));
+const tokens_1 = require("../../ThemeProvider/tokens");
 const StyledDrawerHeader = styled_1.default.div `
-  padding: 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
   display: flex;
   align-items: center;
   justify-content: space-between;

package/Modal/Drawer/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/Modal/MessageBox/MessageBoxContent.js

@@ -16,9 +16,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../../ThemeProvider/tokens");
 const Content = styled_1.default.div `
   flex: 1;
-  padding: 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
 `;
 const MessageBoxContent = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);

package/Modal/MessageBox/MessageBoxFooter.js

@@ -17,11 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Button_1 = __importDefault(require("../../Button"));
+const tokens_1 = require("../../ThemeProvider/tokens");
 const Footer = styled_1.default.div `
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: 1em 1em 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
 
   & > button {
     border-radius: 0;

package/Modal/MessageBox/MessageBoxHeader.js

@@ -16,8 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../../ThemeProvider/tokens");
 const Header = styled_1.default.div `
-  padding: 1em 1em 0 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x} 0 ${x}`;
+}};
 `;
 const HeaderTitle = styled_1.default.div `
   font-size: 1.4rem;

package/Modal/MessageBox/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/Modal/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };

package/Pagination/PaginationContainer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type PaginationSize = 'medium' | 'small';
+export type PaginationContainerProps = React.HTMLAttributes<HTMLElement> & {
+    readonly size?: PaginationSize;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    readonly size?: PaginationSize;
+} & React.RefAttributes<HTMLElement>>;
+export default _default;

package/Pagination/PaginationContainer.js

@@ -0,0 +1,34 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+/**
+ * The sizes of the buttons are in `em`, so the small variant only changes the font size.
+ * The height of the buttons is the height of the controls: `theme.padding.control`
+ */
+const StyledNav = styled_1.default.nav `
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  font-size: ${({ $size }) => ($size === 'small' ? '0.8em' : '1em')};
+`;
+const PaginationContainer = (props, ref) => {
+    const { size = 'medium', children } = props, nativeProps = __rest(props, ["size", "children"]);
+    return (react_1.default.createElement(StyledNav, Object.assign({ "$size": size }, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(PaginationContainer);

package/Pagination/PaginationGap.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type PaginationGapProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const _default: React.ForwardRefExoticComponent<PaginationGapProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Pagination/PaginationGap.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
+const StyledGap = styled_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.6em;
+  height: ${({ theme }) => (0, tokens_1.controlHeight)(theme)};
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+  user-select: none;
+`;
+/**
+ * The skipped range of the pages
+ */
+const PaginationGap = (props, ref) => (react_1.default.createElement(StyledGap, Object.assign({ "aria-hidden": true }, props, { ref: ref }), "\u2026"));
+exports.default = react_1.default.forwardRef(PaginationGap);

package/Pagination/PaginationIcons.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type PaginationIconProps = React.SVGAttributes<SVGSVGElement>;
+export declare const IconPrevious: React.ForwardRefExoticComponent<PaginationIconProps & React.RefAttributes<SVGSVGElement>>;
+export declare const IconNext: React.ForwardRefExoticComponent<PaginationIconProps & React.RefAttributes<SVGSVGElement>>;
+export declare const IconFirst: React.ForwardRefExoticComponent<PaginationIconProps & React.RefAttributes<SVGSVGElement>>;
+export declare const IconLast: React.ForwardRefExoticComponent<PaginationIconProps & React.RefAttributes<SVGSVGElement>>;

package/Pagination/PaginationIcons.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconLast = exports.IconFirst = exports.IconNext = exports.IconPrevious = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Path = styled_1.default.path `
+  fill: currentColor;
+`;
+const createIcon = (path, displayName) => {
+    const Icon = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true }, props, { ref: ref }),
+        react_1.default.createElement(Path, { d: path })));
+    Icon.displayName = displayName;
+    return react_1.default.forwardRef(Icon);
+};
+exports.IconPrevious = createIcon('M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z', 'IconPrevious');
+exports.IconNext = createIcon('M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z', 'IconNext');
+exports.IconFirst = createIcon('M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M12.41,16.59L7.82,12L12.41,7.41L11,6L5,12L11,18L12.41,16.59Z', 'IconFirst');
+exports.IconLast = createIcon('M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M11.59,7.41L16.18,12L11.59,16.59L13,18L19,12L13,6L11.59,7.41Z', 'IconLast');

package/Pagination/PaginationItem.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ButtonProps } from '../Button';
+import type { PaginationItemKind } from './usePagination';
+export type PaginationItemProps = ButtonProps & {
+    /**
+     * What the button does: opens a page or goes to the first, previous, next or last page
+     */
+    readonly kind: PaginationItemKind;
+    /**
+     * The page the button opens, starts from 1
+     */
+    readonly page: number;
+    /**
+     * The button of the current page
+     */
+    readonly selected?: boolean;
+    /**
+     * The not selected page in the `standard` variant: a soft fill instead of the surface color,
+     * so the buttons are visible on the surface
+     */
+    readonly soft?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<import("../Button/ButtonBase").ButtonBaseProps & {
+    readonly variant?: "standard" | "outlined" | "plain";
+} & {
+    /**
+     * What the button does: opens a page or goes to the first, previous, next or last page
+     */
+    readonly kind: PaginationItemKind;
+    /**
+     * The page the button opens, starts from 1
+     */
+    readonly page: number;
+    /**
+     * The button of the current page
+     */
+    readonly selected?: boolean;
+    /**
+     * The not selected page in the `standard` variant: a soft fill instead of the surface color,
+     * so the buttons are visible on the surface
+     */
+    readonly soft?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;