@via-profit/ui-kit 0.4.0 → 0.6.0

package/esm/Modal/Drawer/DrawerHeader.js

@@ -0,0 +1,60 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Span from '../../Typography/Span';
+import DrawerCloseIcon from './DrawerCloseIcon';
+import Button from '../../Button';
+import { themePadding } from '../../ThemeProvider/tokens';
+const StyledDrawerHeader = styled.div `
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x}`;
+}};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const DrawerTitle = styled(Span) `
+  font-size: 1.3em;
+  font-weight: 600;
+  margin-right: 1em;
+`;
+const DrawerToolbar = styled.div `
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const StyledDrawerCloseButton = styled(Button) `
+  margin-left: ${props => (props.$withToolbar ? '1em' : 0)};
+  color: ${props => props.theme.color.textPrimary.toString()};
+  background: none;
+  width: auto;
+  height: auto;
+  padding: 0.6em;
+  font-size: 1em;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+const DrawerHeader = (props, ref) => {
+    const { header, children, showCloseButton, closeButtonLabel = 'Close', dialogID, onRequestClose } = props, nativeProps = __rest(props, ["header", "children", "showCloseButton", "closeButtonLabel", "dialogID", "onRequestClose"]);
+    return (React.createElement(StyledDrawerHeader, Object.assign({}, nativeProps, { ref: ref }),
+        typeof header !== 'undefined' && (React.createElement(DrawerTitle, { id: dialogID ? `${dialogID}-title` : undefined }, header)),
+        typeof children !== 'undefined' && React.createElement(DrawerToolbar, null, children),
+        typeof onRequestClose === 'function' && showCloseButton && (React.createElement(StyledDrawerCloseButton, { type: "button", "$withToolbar": typeof children !== 'undefined' && children !== null, "aria-label": closeButtonLabel, onClick: onRequestClose },
+            React.createElement(DrawerCloseIcon, null)))));
+};
+export default React.forwardRef(DrawerHeader);

package/esm/Modal/Drawer/DrawerInner.js

@@ -0,0 +1,145 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import ModalInner from '../BaseModal/ModalInner';
+const StyledDrawerBottomInner = styled(ModalInner) `
+  position: fixed;
+  margin: 0;
+  left: 0;
+  right: 0;
+  bottom: -100%;
+  max-height: 90%;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
+  border-top-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border-top-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  transition:
+    opacity 120ms ease-out,
+    bottom 600ms ease-out;
+  ${({ isOpen }) => isOpen &&
+    css `
+      opacity: 1;
+      bottom: 0;
+      transition:
+        opacity 100ms ease-out,
+        bottom 240ms ease-out;
+    `}
+`;
+const StyledDrawerTopInner = styled(ModalInner) `
+  position: fixed;
+  margin: 0;
+  left: 0;
+  right: 0;
+  top: -100%;
+  opacity: 0;
+  max-height: 90%;
+  display: flex;
+  flex-direction: column;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
+  border-bottom-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border-bottom-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  transition:
+    top 600ms ease-out,
+    opacity 120ms ease-out;
+  ${({ isOpen }) => isOpen &&
+    css `
+      opacity: 1;
+      top: 0;
+      transition:
+        top 240ms ease-out,
+        opacity 100ms ease-out;
+    `}
+`;
+const StyledDrawerRightInner = styled(ModalInner) `
+  position: fixed;
+  margin: 0;
+  right: -100%;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
+  border-top-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border-bottom-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  transition:
+    right 600ms ease-out,
+    opacity 120ms ease-out;
+  ${({ isOpen }) => isOpen &&
+    css `
+      opacity: 1;
+      right: 0;
+      transition:
+        right 240ms ease-out,
+        opacity 100ms ease-out;
+    `}
+`;
+const StyledDrawerLeftInner = styled(ModalInner) `
+  position: fixed;
+  margin: 0;
+  left: -100%;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
+  border-top-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border-bottom-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  transition:
+    left 600ms ease-out,
+    opacity 120ms ease-out;
+  ${({ isOpen }) => isOpen &&
+    css `
+      opacity: 1;
+      left: 0;
+      transition:
+        left 240ms ease-out,
+        opacity 100ms ease-out;
+    `}
+`;
+const DrawerInner = (props, ref) => {
+    const { children, isOpen, anchor, onRequestClose, dialogID } = props, nativeProps = __rest(props, ["children", "isOpen", "anchor", "onRequestClose", "dialogID"]);
+    const Element = React.useMemo(() => {
+        switch (anchor) {
+            case 'top':
+                return StyledDrawerTopInner;
+            case 'left':
+                return StyledDrawerLeftInner;
+            case 'right':
+                return StyledDrawerRightInner;
+            case 'bottom':
+            default:
+                return StyledDrawerBottomInner;
+        }
+    }, [anchor]);
+    return (React.createElement(Element, Object.assign({ role: "dialog", "aria-modal": "true", isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(DrawerInner);

package/esm/Modal/Drawer/index.js

@@ -0,0 +1,49 @@
+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;
+};
+import * as React from 'react';
+import BaseModal from '../BaseModal';
+import DrawerInner from './DrawerInner';
+import Container from './DrawerContainer';
+import Header from './DrawerHeader';
+import Content from './DrawerContent';
+import Footer from './DrawerFooter';
+import Overlay from '../BaseModal/ModalOverlay';
+import useDialogID from '../BaseModal/useDialogID';
+const Drawer = props => {
+    const { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides"]);
+    const hasFooter = React.useMemo(() => typeof footer !== 'undefined' && footer !== null, [footer]);
+    const hasHeader = React.useMemo(() => typeof header !== 'undefined' ||
+        typeof toolbar !== 'undefined' ||
+        typeof showCloseButton !== 'undefined', [showCloseButton, header, toolbar]);
+    const dialogID = useDialogID('drawer');
+    const hasTitle = typeof header !== 'undefined' && header !== null;
+    // Created once: a component created during the render is a new type on every render,
+    // so React would remount the whole drawer content (inputs lose the focus and the state)
+    const Inner = React.useMemo(() => React.forwardRef(function Inner(innerProps, ref) {
+        return (React.createElement(DrawerInner, Object.assign({ anchor: anchor, dialogID: dialogID, "aria-labelledby": hasTitle ? `${dialogID}-title` : undefined, ref: ref }, innerProps)));
+    }), [anchor, dialogID, hasTitle]);
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || Header,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || Content,
+        Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || Footer,
+        Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || Overlay,
+    }), [overrides]);
+    const modalOverrides = React.useMemo(() => ({ Overlay: overridesMap.Overlay, Inner }), [overridesMap.Overlay, Inner]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(BaseModal, Object.assign({ onRequestClose: onRequestClose }, otherProps, { overrides: modalOverrides }),
+            React.createElement(overridesMap.Container, { anchor: anchor },
+                hasHeader && (React.createElement(overridesMap.Header, { showCloseButton: showCloseButton, closeButtonLabel: closeButtonLabel, dialogID: dialogID, header: header, onRequestClose: onRequestClose }, toolbar)),
+                React.createElement(overridesMap.Content, { anchor: anchor }, children),
+                hasFooter && React.createElement(overridesMap.Footer, { anchor: anchor }, footer)))));
+};
+export default Drawer;

package/esm/Modal/MessageBox/MessageBoxContainer.js

@@ -0,0 +1,23 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Container = styled.div `
+  display: flex;
+  flex-flow: column;
+  min-width: 20em;
+`;
+const MessageBoxContainer = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (React.createElement(Container, Object.assign({ role: "dialog", "aria-modal": "true", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(MessageBoxContainer);

package/esm/Modal/MessageBox/MessageBoxContent.js

@@ -0,0 +1,26 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { themePadding } from '../../ThemeProvider/tokens';
+const Content = styled.div `
+  flex: 1;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x}`;
+}};
+`;
+const MessageBoxContent = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (React.createElement(Content, Object.assign({ id: `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(MessageBoxContent);

package/esm/Modal/MessageBox/MessageBoxFooter.js

@@ -0,0 +1,44 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Button from '../../Button';
+import { themePadding } from '../../ThemeProvider/tokens';
+const Footer = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x}`;
+}};
+
+  & > button {
+    border-radius: 0;
+  }
+
+  & > button:first-of-type {
+    border-top-left-radius: 1em;
+    border-bottom-left-radius: 1em;
+  }
+
+  & > button:last-child {
+    border-top-right-radius: 1em;
+    border-bottom-right-radius: 1em;
+  }
+`;
+const MessageBoxFooter = (props, ref) => {
+    const { onRequestClose, okButtonLabel } = props, nativeProps = __rest(props, ["onRequestClose", "okButtonLabel"]);
+    return (React.createElement(Footer, Object.assign({}, nativeProps, { ref: ref }),
+        React.createElement(Button, { onClick: onRequestClose }, typeof okButtonLabel === 'undefined' ? 'OK' : okButtonLabel)));
+};
+export default React.forwardRef(MessageBoxFooter);

package/esm/Modal/MessageBox/MessageBoxHeader.js

@@ -0,0 +1,30 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { themePadding } from '../../ThemeProvider/tokens';
+const Header = styled.div `
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x} 0 ${x}`;
+}};
+`;
+const HeaderTitle = styled.div `
+  font-size: 1.4rem;
+  font-weight: 600;
+`;
+const MessageBoxHeader = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (React.createElement(Header, Object.assign({}, nativeProps, { ref: ref }),
+        React.createElement(HeaderTitle, { id: `${dialogID}-title` }, children)));
+};
+export default React.forwardRef(MessageBoxHeader);

package/esm/Modal/MessageBox/index.js

@@ -0,0 +1,47 @@
+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;
+};
+import * as React from 'react';
+import BaseModal from '../BaseModal';
+import Container from './MessageBoxContainer';
+import Content from './MessageBoxContent';
+import Footer from './MessageBoxFooter';
+import Header from './MessageBoxHeader';
+import Overlay from '../BaseModal/ModalOverlay';
+import useDialogID from '../BaseModal/useDialogID';
+const MessageBox = props => {
+    const { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = props, otherProps = __rest(props, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
+    const dialogID = useDialogID('dialog-message');
+    const buttonRef = React.useRef(null);
+    React.useEffect(() => {
+        setTimeout(() => {
+            if (isOpen && buttonRef.current) {
+                buttonRef.current.focus();
+            }
+        }, 15);
+    }, [isOpen]);
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || Content,
+        Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || Footer,
+        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || Header,
+        Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || Overlay,
+    }), [overrides]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(BaseModal, Object.assign({ onRequestClose: onRequestClose, isOpen: isOpen, overrides: {
+                Overlay: overridesMap.Overlay,
+            } }, otherProps),
+            React.createElement(overridesMap.Container, { dialogID: dialogID },
+                React.createElement(overridesMap.Header, { dialogID: dialogID }, header),
+                React.createElement(overridesMap.Content, { dialogID: dialogID }, children),
+                React.createElement(overridesMap.Footer, { dialogID: dialogID, onRequestClose: onRequestClose, okButtonLabel: okButtonLabel })))));
+};
+export default MessageBox;

package/esm/Modal/index.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Dialog from './Dialog';
+import ConfirmBox from './ConfirmBox';
+import MessageBox from './MessageBox';
+import Drawer from './Drawer';
+export * from './Dialog';
+export * from './ConfirmBox';
+export * from './MessageBox';
+export * from './Drawer';
+const isDialog = (props) => ('variant' in props && props.variant === 'dialog') || typeof props.variant === 'undefined';
+const isConfirmBox = (props) => 'variant' in props && props.variant === 'confirm-box';
+const isMessageBox = (props) => 'variant' in props && props.variant === 'message-box';
+const isDrawer = (props) => 'variant' in props && props.variant === 'drawer';
+const Modal = props => {
+    if (isDialog(props)) {
+        return React.createElement(Dialog, Object.assign({}, props));
+    }
+    if (isConfirmBox(props)) {
+        return React.createElement(ConfirmBox, Object.assign({}, props));
+    }
+    if (isMessageBox(props)) {
+        return React.createElement(MessageBox, Object.assign({}, props));
+    }
+    if (isDrawer(props)) {
+        return React.createElement(Drawer, Object.assign({}, props));
+    }
+    const { variant } = props;
+    throw new Error(`Expected «variant» property is «dialog», «drawer», «message-box» or «confirm-box», but got «${variant}»`);
+};
+export default Modal;

package/esm/NoSSR/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+const NoSSR = props => {
+    const { fallback, children } = props;
+    const [mountedState, setMountedState] = React.useState(false);
+    React.useEffect(() => {
+        setMountedState(true);
+    }, []);
+    return mountedState ? React.createElement(React.Fragment, null, children) : React.createElement(React.Fragment, null, fallback ? fallback : null);
+};
+export default NoSSR;

package/esm/Pagination/PaginationContainer.js

@@ -0,0 +1,29 @@
+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;
+};
+import React from 'react';
+import styled from '@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.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.createElement(StyledNav, Object.assign({ "$size": size }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(PaginationContainer);

package/esm/Pagination/PaginationGap.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { controlHeight } from '../ThemeProvider/tokens';
+const StyledGap = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.6em;
+  height: ${({ theme }) => controlHeight(theme)};
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+  user-select: none;
+`;
+/**
+ * The skipped range of the pages
+ */
+const PaginationGap = (props, ref) => (React.createElement(StyledGap, Object.assign({ "aria-hidden": true }, props, { ref: ref }), "\u2026"));
+export default React.forwardRef(PaginationGap);

package/esm/Pagination/PaginationIcons.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from '@emotion/styled';
+const Path = styled.path `
+  fill: currentColor;
+`;
+const createIcon = (path, displayName) => {
+    const Icon = (props, ref) => (React.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.createElement(Path, { d: path })));
+    Icon.displayName = displayName;
+    return React.forwardRef(Icon);
+};
+export const IconPrevious = createIcon('M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z', 'IconPrevious');
+export const IconNext = createIcon('M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z', 'IconNext');
+export const 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');
+export const 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/esm/Pagination/PaginationItem.js

@@ -0,0 +1,54 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import Button from '../Button';
+import { controlHeight } from '../ThemeProvider/tokens';
+/**
+ * `&&` raises the specificity above the own styles of the button.
+ * The button is a square of the height of the controls, the numbers of several digits make it wider
+ */
+const StyledButton = styled(Button) `
+  && {
+    box-sizing: border-box;
+    min-width: ${({ theme }) => controlHeight(theme)};
+    height: ${({ theme }) => controlHeight(theme)};
+    padding: 0 0.6em;
+    justify-content: center;
+    font-variant-numeric: tabular-nums;
+  }
+
+  ${({ $soft, disabled, theme }) => $soft &&
+    css `
+      && {
+        background-color: ${theme.color.textPrimary.alpha(0.06).toString()};
+        color: ${disabled
+        ? theme.color.textPrimary.alpha(0.3).toString()
+        : theme.color.textPrimary.toString()};
+      }
+
+      &&:hover {
+        background-color: ${disabled
+        ? theme.color.textPrimary.alpha(0.06).toString()
+        : theme.color.textPrimary.alpha(0.1).toString()};
+      }
+    `}
+`;
+/**
+ * The button of the page or of the navigation (first, previous, next, last)
+ */
+const PaginationItem = (props, ref) => {
+    const { selected, soft, kind, page } = props, buttonProps = __rest(props, ["selected", "soft", "kind", "page"]);
+    return (React.createElement(StyledButton, Object.assign({ type: "button", "aria-current": selected ? 'page' : undefined, "data-kind": kind, "$soft": Boolean(soft) }, buttonProps, { ref: ref })));
+};
+export default React.forwardRef(PaginationItem);

package/esm/Pagination/getPaginationItems.js

@@ -0,0 +1,40 @@
+const range = (start, end) => Array.from({ length: Math.max(end - start + 1, 0) }, (_, index) => start + index);
+/**
+ * Returns the items of the pagination: the boundary pages, the current page with the siblings
+ * and the gaps instead of the skipped ranges. The pages start from 1.
+ * The count of the items does not depend on the current page, so the buttons do not jump
+ *
+ * @example getPaginationItems({ count: 10, page: 5, siblings: 1, boundaries: 1 })
+ * // 1 … 4 5 6 … 10
+ */
+const getPaginationItems = (params) => {
+    const { count, siblings, boundaries } = params;
+    const page = Math.min(Math.max(params.page, 1), Math.max(count, 1));
+    // boundaries on both sides + current + siblings + two gaps
+    if (count <= boundaries * 2 + siblings * 2 + 3) {
+        return range(1, count).map(item => ({ type: 'page', page: item }));
+    }
+    const startPages = range(1, boundaries);
+    const endPages = range(count - boundaries + 1, count);
+    // the window of the siblings keeps its size near the start and the end
+    const siblingsStart = Math.max(Math.min(page - siblings, count - boundaries - siblings * 2 - 1), boundaries + 2);
+    const siblingsEnd = Math.min(Math.max(page + siblings, boundaries + siblings * 2 + 2), count - boundaries - 1);
+    const items = startPages.map(item => ({ type: 'page', page: item }));
+    // a gap of one page is shown as the page itself
+    if (siblingsStart > boundaries + 2) {
+        items.push({ type: 'gap-start' });
+    }
+    else if (boundaries + 1 < count - boundaries) {
+        items.push({ type: 'page', page: boundaries + 1 });
+    }
+    range(siblingsStart, siblingsEnd).forEach(item => items.push({ type: 'page', page: item }));
+    if (siblingsEnd < count - boundaries - 1) {
+        items.push({ type: 'gap-end' });
+    }
+    else if (count - boundaries > boundaries) {
+        items.push({ type: 'page', page: count - boundaries });
+    }
+    endPages.forEach(item => items.push({ type: 'page', page: item }));
+    return items;
+};
+export default getPaginationItems;