glints-aries 4.0.180 → 4.0.182

package/es/.storybook/Decorators.d.ts

@@ -0,0 +1,2 @@
+import { DecoratorFn } from '@storybook/react';
+export declare const withAlertProvider: DecoratorFn;

package/es/@next/Alert/Alert.js

@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+import { Icon } from '../Icon';
+import { Typography } from '../Typography';
+import { StyledAlertContainer, StyledAlertContentColumn, StyledAlertCloseIconContainer } from './AlertStyle';
+var iconNameStatusMap = {
+  success: 'ri-checkbox-circle-fill',
+  info: 'ri-information-fill',
+  warning: 'ri-error-warning-fill',
+  error: 'ri-error-warning-fill'
+};
+export var Alert = function Alert(_ref) {
+  var show = _ref.show,
+    title = _ref.title,
+    content = _ref.content,
+    status = _ref.status,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 4000 : _ref$duration,
+    children = _ref.children,
+    onDismissed = _ref.onDismissed;
+  useEffect(function () {
+    if (!show) {
+      return;
+    }
+    var timeId = setTimeout(function () {
+      onDismissed == null ? void 0 : onDismissed();
+    }, duration);
+    return function () {
+      clearTimeout(timeId);
+    };
+  }, [duration, onDismissed, show]);
+  var hasTitle = !!title;
+  var iconStatus = iconNameStatusMap[status];
+  if (status && !iconStatus) {
+    console.warn("Status \"" + status + "\" is not a valid Alert status, \"info\" will be used instead");
+  }
+  var iconName = iconStatus || iconNameStatusMap['info'];
+  if (!show) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(StyledAlertContainer, {
+    role: "alert",
+    "data-titled": hasTitle,
+    "data-status": status || 'info'
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
+    name: iconName
+  })), /*#__PURE__*/React.createElement("div", null, hasTitle && /*#__PURE__*/React.createElement(StyledAlertContentColumn, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "subtitle1"
+  }, title)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StyledAlertContentColumn, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, content))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StyledAlertContentColumn, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, children)))), /*#__PURE__*/React.createElement(StyledAlertCloseIconContainer, {
+    role: "button",
+    onClick: function onClick() {
+      return onDismissed == null ? void 0 : onDismissed();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close"
+  })));
+};

package/es/@next/Alert/Alert.stories.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState } from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+import { Alert } from './Alert';
+Alert.displayName = 'Alert';
+export default {
+  title: '@next/Alert',
+  component: Alert,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  var _useState = useState(false),
+    showAlert = _useState[0],
+    setShowAlert = _useState[1];
+  var triggerAlert = function triggerAlert() {
+    setShowAlert(true);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return triggerAlert();
+    }
+  }, "Show Alert"), /*#__PURE__*/React.createElement(Alert, _extends({}, args, {
+    show: showAlert,
+    onDismissed: function onDismissed() {
+      return setShowAlert(false);
+    }
+  })));
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  title: 'Title',
+  content: 'Alert content',
+  status: 'info',
+  children: /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "body2",
+    color: "#017EB7"
+  }, "Learn more")
+};

package/es/@next/Alert/AlertContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var AlertContext = /*#__PURE__*/createContext(undefined);

package/es/@next/Alert/AlertProvider.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState } from 'react';
+import { AlertContext } from './AlertContext';
+export var AlertProvider = function AlertProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(undefined),
+    state = _useState[0],
+    setState = _useState[1];
+  var showAlert = function showAlert(props) {
+    return setState(_extends({}, props, {
+      show: true
+    }));
+  };
+  var closeAlert = function closeAlert() {
+    return setState({
+      show: false
+    });
+  };
+  var alertContextValue = _extends({}, state, {
+    showAlert: showAlert,
+    closeAlert: closeAlert
+  });
+  return /*#__PURE__*/React.createElement(AlertContext.Provider, {
+    value: alertContextValue
+  }, children);
+};

package/es/@next/Alert/AlertStyle.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { borderRadius4 } from '../utilities/borderRadius';
+import * as Breakpoints from '../utilities/breakpoints';
+import { Green, Neutral, Blue, Orange, Red } from '../utilities/colors';
+import { space12, space8 } from '../utilities/spacing';
+export var StyledAlertContainer = styled.div.withConfig({
+  displayName: "AlertStyle__StyledAlertContainer",
+  componentId: "sc-1e5i2kj-0"
+})(["position:fixed;top:90px;right:24px;display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:100;color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], space12, space8, borderRadius4, Neutral.B18, Green.B89, Green.B61, Blue.S08, Blue.Brand, Orange.S42, Orange.S86, Red.B100, Red.B93, Breakpoints.large, space8);
+export var StyledAlertCloseIconContainer = styled.div.withConfig({
+  displayName: "AlertStyle__StyledAlertCloseIconContainer",
+  componentId: "sc-1e5i2kj-1"
+})(["cursor:pointer;&&& svg{fill:", ";}"], Neutral.B40);
+export var StyledAlertContentColumn = styled.div.withConfig({
+  displayName: "AlertStyle__StyledAlertContentColumn",
+  componentId: "sc-1e5i2kj-2"
+})(["min-width:240px;max-width:560px;padding:0;@media (max-width:480px){min-width:unset;}"]);

package/es/@next/Alert/AlertWithProvider.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["closeAlert"],
+  _excluded2 = ["show"];
+import React from 'react';
+import { Alert } from './Alert';
+import { useAlert } from './useAlert';
+export var AlertWithProvider = function AlertWithProvider() {
+  var _useAlert = useAlert(),
+    closeAlert = _useAlert.closeAlert,
+    rest = _objectWithoutPropertiesLoose(_useAlert, _excluded);
+  var show = rest.show,
+    alertProps = _objectWithoutPropertiesLoose(rest, _excluded2);
+  if (!show) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Alert, _extends({}, alertProps, {
+    show: show,
+    onDismissed: function onDismissed() {
+      return closeAlert();
+    }
+  }));
+};

package/es/@next/Alert/AlertWithProvider.stories.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Button } from '../Button';
+import { useAlert } from './useAlert';
+import { AlertWithProvider } from './AlertWithProvider';
+import { withAlertProvider } from '../../../.storybook/Decorators';
+import { Typography } from '../Typography';
+AlertWithProvider.displayName = 'AlertWithProvider';
+export default {
+  title: '@next/AlertWithProvider',
+  component: AlertWithProvider
+};
+var Template = function Template(args) {
+  var _useAlert = useAlert(),
+    showAlert = _useAlert.showAlert;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AlertWithProvider, null), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return showAlert(_extends({}, args));
+    }
+  }, "Show Alert"));
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  title: 'Title',
+  content: 'Alert content',
+  status: 'info',
+  children: /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "body2",
+    color: "#017EB7"
+  }, "Learn more")
+};
+Interactive.decorators = [withAlertProvider];
+Interactive.parameters = {
+  docs: {
+    source: {
+      code: "\n      // Add \"AlertProvider\" in your root app \n      import { AlertProvider } from 'glints-aries/lib/@next';\n\n      // index.js\n      ReactDOM.render(\n        <AlertProvider>\n         <App />\n        </AlertProvider>,\n        document.getElementById('root')\n      );\n\n      // Add \"AlertWithProvider\" component in the root so it's accessible from anywhere\n      // app.js\n      <>\n        <AlertWithProvider />\n        <Dashboard />\n      </>  \n\n      // Call \"showAlert\" anywhere from your component\n      import { useAlert } from 'glints-aries/lib/@next';\n\n      const { showAlert } = useAlert();\n      <Button\n        onClick={() =>\n          showAlert({\n            title: 'Title',\n            content: 'Content',\n            children: <a href=\"#\">Learn more</a>,\n          })\n        }\n      >\n        Show Alert\n      </Button>\n      "
+    },
+    language: 'javascript',
+    type: 'auto'
+  }
+};

package/es/@next/Alert/index.js

@@ -0,0 +1,5 @@
+export * from './Alert';
+export * from './AlertProvider';
+export * from './AlertWithProvider';
+export * from './AlertContext';
+export * from './useAlert';

package/es/@next/Alert/useAlert.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { AlertContext } from './AlertContext';
+export var useAlert = function useAlert() {
+  var context = useContext(AlertContext);
+  if (!context) {
+    throw new Error('No AlertContext was provided via "AlertProvider", to use this hooks you must provide them in your app root.');
+  }
+  return context;
+};

package/es/@next/Input/InputStyle.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Breakpoints } from '../..';
+import * as Breakpoints from '../utilities/breakpoints';
 import { Neutral, Red } from '../utilities/colors';
 export var StyledContainer = styled.div.withConfig({
   displayName: "InputStyle__StyledContainer",

package/es/@next/Pagination/PageButton.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "active", "children", "onClick"];
+import React from 'react';
+import { Typography } from '../Typography';
+import { StyledPageButton } from './PaginationStyle';
+export var PageButton = function PageButton(_ref) {
+  var value = _ref.value,
+    active = _ref.active,
+    children = _ref.children,
+    _onClick = _ref.onClick,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var content = children ? children : value;
+  return /*#__PURE__*/React.createElement(StyledPageButton, _extends({
+    "data-active": active,
+    onClick: function onClick() {
+      return _onClick == null ? void 0 : _onClick(value);
+    }
+  }, props), /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, content));
+};

package/es/@next/Pagination/Pagination.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value"];
+import React from 'react';
+import { PageButton } from './PageButton';
+import { StyledNav } from './PaginationStyle';
+import { defaultBufferSize, defaultPageSize, getAllPages, getBufferSize } from './paginationUtils';
+import { NextStepper, PreviousStepper } from './Stepper';
+export var Pagination = function Pagination(_ref) {
+  var _ref$totalItems = _ref.totalItems,
+    totalItems = _ref$totalItems === void 0 ? 1 : _ref$totalItems,
+    _ref$currentPage = _ref.currentPage,
+    currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
+    disabled = _ref.disabled,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? defaultPageSize : _ref$pageSize,
+    onPageChanged = _ref.onPageChanged;
+  var pageList = [];
+  var totalPages = getAllPages(pageSize, totalItems);
+  var bufferSize = getBufferSize(defaultBufferSize, totalPages);
+  var beginFoldPage = 1 + 2 + bufferSize;
+  var endFoldPage = totalPages - 2 - bufferSize;
+  var handlePagerClick = function handlePagerClick(value) {
+    if (value < 1 || value > totalPages) {
+      return;
+    }
+    onPageChanged == null ? void 0 : onPageChanged(value);
+  };
+  var Pager = function Pager(_ref2) {
+    var value = _ref2.value,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+    return /*#__PURE__*/React.createElement(PageButton, _extends({}, props, {
+      value: value,
+      onClick: handlePagerClick,
+      disabled: disabled,
+      active: currentPage === value
+    }));
+  };
+  if (
+  // beginPage(1 page) + bufferSize * 2 + endPage(1 page) + ...(2 pages)
+  totalPages <= 4 + bufferSize * 2 || currentPage === beginFoldPage && currentPage === endFoldPage) {
+    for (var i = 1; i <= totalPages; i++) {
+      pageList.push( /*#__PURE__*/React.createElement(Pager, {
+        key: i,
+        value: i
+      }));
+    }
+  } else {
+    var left = 1;
+    var right = totalPages;
+    var hasJumpPre = true;
+    var hasJumpNext = true;
+    var calculateNextJumpPage = function calculateNextJumpPage(jumpPage) {
+      var minCurrent = totalPages > 0 ? 1 : 0;
+      var nextPage = Math.min(totalPages, Math.max(minCurrent, currentPage + jumpPage));
+      return nextPage;
+    };
+
+    // when first and last page not within reach from current page
+    if (currentPage > beginFoldPage && currentPage < endFoldPage) {
+      right = currentPage + bufferSize;
+      left = currentPage - bufferSize;
+      // first page is within reach from current page
+    } else if (currentPage <= beginFoldPage) {
+      hasJumpPre = false;
+      left = 1;
+      right = Math.max(beginFoldPage, bufferSize + currentPage);
+      // last page within reach from current page
+    } else if (currentPage >= endFoldPage) {
+      hasJumpNext = false;
+      right = totalPages;
+      left = Math.min(endFoldPage, currentPage - bufferSize);
+    }
+    for (var _i = left; _i <= right; _i++) {
+      pageList.push( /*#__PURE__*/React.createElement(Pager, {
+        key: _i,
+        value: _i
+      }));
+    }
+    var jumpPre = calculateNextJumpPage(-(bufferSize * 2 + 1));
+    var jumpNext = calculateNextJumpPage(bufferSize * 2 + 1);
+    var FirstPager = /*#__PURE__*/React.createElement(Pager, {
+      value: 1,
+      key: 1
+    });
+    var LastPager = /*#__PURE__*/React.createElement(Pager, {
+      value: totalPages,
+      key: totalPages
+    });
+    if (hasJumpPre) {
+      pageList.unshift( /*#__PURE__*/React.createElement(Pager, {
+        key: "jump-pre",
+        "data-testid": "previous-jumper",
+        value: jumpPre
+      }, "..."));
+      pageList.unshift(FirstPager);
+    }
+    if (hasJumpNext) {
+      pageList.push( /*#__PURE__*/React.createElement(Pager, {
+        key: "jump-next",
+        "data-testid": "next-jumper",
+        value: jumpNext
+      }, "..."));
+      pageList.push(LastPager);
+    }
+  }
+  var hasPrevious = currentPage - 1 > 0;
+  var hasNext = currentPage + 1 <= totalPages;
+  pageList.unshift( /*#__PURE__*/React.createElement(PreviousStepper, {
+    key: "prev-stepper",
+    value: currentPage - 1,
+    disabled: !hasPrevious || disabled,
+    onClick: handlePagerClick
+  }));
+  pageList.push( /*#__PURE__*/React.createElement(NextStepper, {
+    key: "next-stepper",
+    value: currentPage + 1,
+    disabled: !hasNext || disabled,
+    onClick: handlePagerClick
+  }));
+  return /*#__PURE__*/React.createElement(StyledNav, null, pageList);
+};

package/es/@next/Pagination/Pagination.stories.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["currentPage"];
+import React, { useEffect, useState } from 'react';
+import { Pagination } from './Pagination';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+Pagination.displayName = 'Pagination';
+export default {
+  title: '@next/Pagination',
+  component: Pagination,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  var _useState = useState(1),
+    page = _useState[0],
+    setPage = _useState[1];
+  var currentPage = args.currentPage,
+    rest = _objectWithoutPropertiesLoose(args, _excluded);
+  useEffect(function () {
+    setPage(currentPage);
+  }, [currentPage]);
+  return /*#__PURE__*/React.createElement(Pagination, _extends({}, rest, {
+    currentPage: page,
+    onPageChanged: setPage
+  }));
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  totalItems: 200,
+  pageSize: 10
+};
+Interactive.parameters = {
+  docs: {
+    source: {
+      code: "  const [currentPage, setCurrentPage] = useState(1);\n\n      return (\n        <Pagination\n          {...args}\n          currentPage={currentPage}\n          onPageChanged={setCurrentPage}\n        />\n      );",
+      language: 'javascript',
+      type: 'auto'
+    }
+  }
+};

package/es/@next/Pagination/PaginationStyle.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+import { NumberInput } from '../NumberInput';
+import { borderRadius2 } from '../utilities/borderRadius';
+import { Blue, Neutral } from '../utilities/colors';
+import { space4 } from '../utilities/spacing';
+import { PageButton } from './PageButton';
+export var StyledNav = styled.nav.withConfig({
+  displayName: "PaginationStyle__StyledNav",
+  componentId: "sc-1hi5sa8-0"
+})(["display:flex;gap:10px;"]);
+export var SimplePaginationStyledNav = styled(StyledNav).withConfig({
+  displayName: "PaginationStyle__SimplePaginationStyledNav",
+  componentId: "sc-1hi5sa8-1"
+})(["gap:4px;"]);
+export var StyledPageButton = styled.button.withConfig({
+  displayName: "PaginationStyle__StyledPageButton",
+  componentId: "sc-1hi5sa8-2"
+})(["cursor:pointer;height:32px;min-width:32px;border:0;background:", ";border-radius:", ";padding:", ";color:", ";&:hover{background:", ";}&:disabled{color:", ";}svg{fill:", ";width:24px;height:24px;}&[data-active='true']{background:", ";color:", ";}&:disabled svg{fill:", ";}&[data-active='true']:disabled{background:", ";color:", ";}"], Neutral.B100, borderRadius2, space4, Neutral.B18, Neutral.B95, Neutral.B85, Neutral.B40, Blue.S08, Blue.S99, Neutral.B85, Neutral.B95, Neutral.B85);
+export var StyledSimplePaginationButton = styled(StyledPageButton).withConfig({
+  displayName: "PaginationStyle__StyledSimplePaginationButton",
+  componentId: "sc-1hi5sa8-3"
+})(["pointer-events:none;"]);
+export var StyledActiveSimplePaginationButton = styled(function (props) {
+  return /*#__PURE__*/React.createElement(PageButton, props);
+}).withConfig({
+  displayName: "PaginationStyle__StyledActiveSimplePaginationButton",
+  componentId: "sc-1hi5sa8-4"
+})(["background:", ";color:", ";&:hover{background:", ";color:", ";}"], Blue.S08, Blue.S99, Neutral.B95, Neutral.B18);
+export var StyledSimplePaginationInput = styled(NumberInput).withConfig({
+  displayName: "PaginationStyle__StyledSimplePaginationInput",
+  componentId: "sc-1hi5sa8-5"
+})(["padding:0;text-align:center;height:32px;width:32px;"]);

package/es/@next/Pagination/SimplePagination.js

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { Typography } from '../Typography';
+import { StyledActiveSimplePaginationButton, StyledSimplePaginationInput, StyledSimplePaginationButton, SimplePaginationStyledNav } from './PaginationStyle';
+import { defaultPageSize, getAllPages } from './paginationUtils';
+import { NextStepper, PreviousStepper } from './Stepper';
+export var SimplePagination = function SimplePagination(_ref) {
+  var _ref$totalItems = _ref.totalItems,
+    totalItems = _ref$totalItems === void 0 ? 1 : _ref$totalItems,
+    _ref$currentPage = _ref.currentPage,
+    currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
+    disabled = _ref.disabled,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? defaultPageSize : _ref$pageSize,
+    onPageChanged = _ref.onPageChanged;
+  var _useState = useState(false),
+    editMode = _useState[0],
+    setEditMode = _useState[1];
+  var totalPages = getAllPages(pageSize, totalItems);
+  var hasPrevious = currentPage - 1 > 0;
+  var hasNext = currentPage + 1 <= totalPages;
+  var handlePageNumberChange = function handlePageNumberChange(value) {
+    var page = value;
+    if (value < 1) {
+      page = 1;
+    }
+    if (value > totalPages) {
+      page = totalPages;
+    }
+    onPageChanged == null ? void 0 : onPageChanged(page);
+  };
+  var handleEditMode = function handleEditMode() {
+    if (editMode) {
+      return;
+    }
+    setEditMode(true);
+  };
+  var handleFocus = function handleFocus(e) {
+    e.target.select();
+  };
+  return /*#__PURE__*/React.createElement(SimplePaginationStyledNav, null, /*#__PURE__*/React.createElement(PreviousStepper, {
+    value: currentPage - 1,
+    disabled: !hasPrevious || disabled,
+    onClick: handlePageNumberChange
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-testid": "current-page-btn",
+    onClick: handleEditMode
+  }, !editMode && /*#__PURE__*/React.createElement(StyledActiveSimplePaginationButton, {
+    value: currentPage,
+    disabled: disabled,
+    onClick: handlePageNumberChange
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, currentPage)), editMode && /*#__PURE__*/React.createElement(StyledSimplePaginationInput, {
+    "data-testid": "current-page-input",
+    autoFocus: true,
+    onFocus: handleFocus,
+    onChange: function onChange(e) {
+      handlePageNumberChange(Number(e.currentTarget.value));
+    },
+    onBlur: function onBlur() {
+      return setEditMode(false);
+    },
+    value: currentPage
+  })), /*#__PURE__*/React.createElement(StyledSimplePaginationButton, {
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, "/")), /*#__PURE__*/React.createElement(StyledSimplePaginationButton, {
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, totalPages)), /*#__PURE__*/React.createElement(NextStepper, {
+    value: currentPage + 1,
+    disabled: !hasNext || disabled,
+    onClick: handlePageNumberChange
+  }));
+};

package/es/@next/Pagination/SimplePagination.stories.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["currentPage"];
+import React, { useEffect, useState } from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { SimplePagination } from './SimplePagination';
+SimplePagination.displayName = 'Pagination';
+export default {
+  title: '@next/SimplePagination',
+  component: SimplePagination,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  var _useState = useState(1),
+    page = _useState[0],
+    setPage = _useState[1];
+  var currentPage = args.currentPage,
+    rest = _objectWithoutPropertiesLoose(args, _excluded);
+  useEffect(function () {
+    setPage(currentPage);
+  }, [currentPage]);
+  return /*#__PURE__*/React.createElement(SimplePagination, _extends({}, rest, {
+    currentPage: page,
+    onPageChanged: setPage
+  }));
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  totalItems: 200,
+  pageSize: 10
+};
+Interactive.parameters = {
+  docs: {
+    source: {
+      code: "  const [currentPage, setCurrentPage] = useState(1);\n\n      return (\n        <SimplePagination\n          {...args}\n          currentPage={currentPage}\n          onPageChanged={setCurrentPage}\n        />\n      );",
+      language: 'javascript',
+      type: 'auto'
+    }
+  }
+};

package/es/@next/Pagination/Stepper.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Icon } from '../Icon';
+import { PageButton } from './PageButton';
+export var PreviousStepper = function PreviousStepper(props) {
+  return /*#__PURE__*/React.createElement(PageButton, _extends({
+    "data-testid": "previous-page"
+  }, props), /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-left-line"
+  }));
+};
+export var NextStepper = function NextStepper(props) {
+  return /*#__PURE__*/React.createElement(PageButton, _extends({
+    "data-testid": "next-page"
+  }, props), /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-right-line"
+  }));
+};

package/es/@next/Pagination/index.js

@@ -0,0 +1,3 @@
+export * from './Pagination';
+export * from './SimplePagination';
+export { PaginationProps } from './paginationUtils';

package/es/@next/Pagination/paginationUtils.js

@@ -0,0 +1,15 @@
+export var defaultPageSize = 10;
+export var defaultBufferSize = 2;
+export var getAllPages = function getAllPages(pageSize, total) {
+  if (pageSize < 1) {
+    console.warn('pageSize must be above 0');
+    return 0;
+  }
+  return Math.ceil(total / pageSize);
+};
+export var getBufferSize = function getBufferSize(bufferSize, allPages) {
+  var min = 0;
+  var max = Math.floor(allPages / 2) - 1;
+  var newBufferSize = Math.max(bufferSize, min);
+  return Math.min(newBufferSize, max);
+};

package/es/@next/index.js

@@ -5,6 +5,7 @@ import * as Colors from './utilities/colors';
 import * as DropShadow from './utilities/dropShadow';
 import * as Fonts from './utilities/fonts';
 import * as Spacing from './utilities/spacing';
+export { Alert, AlertContext, AlertContextProps, AlertProps, AlertProvider, AlertWithProvider, useAlert } from './Alert';
 export { Avatar, AvatarProps } from './Avatar';
 export { Badge, BadgeProps } from './Badge';
 export { Banner, BannerProps } from './Banner';
@@ -12,6 +13,7 @@ export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochrom
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Divider } from './Divider';
 export { Icon, IconProps } from './Icon';
+export { Pagination, SimplePagination, PaginationProps } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';