glints-aries 4.0.180 → 4.0.182

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.Interactive = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
+var _Button = require("../Button");
+var _Typography = require("../Typography");
+var _Alert = require("./Alert");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+_Alert.Alert.displayName = 'Alert';
+var _default = {
+  title: '@next/Alert',
+  component: _Alert.Alert,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, null, Story());
+  }]
+};
+exports["default"] = _default;
+var Template = function Template(args) {
+  var _useState = (0, _react.useState)(false),
+    showAlert = _useState[0],
+    setShowAlert = _useState[1];
+  var triggerAlert = function triggerAlert() {
+    setShowAlert(true);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    onClick: function onClick() {
+      return triggerAlert();
+    }
+  }, "Show Alert"), /*#__PURE__*/_react["default"].createElement(_Alert.Alert, (0, _extends2["default"])({}, args, {
+    show: showAlert,
+    onDismissed: function onDismissed() {
+      return setShowAlert(false);
+    }
+  })));
+};
+var Interactive = Template.bind({});
+exports.Interactive = Interactive;
+Interactive.args = {
+  title: 'Title',
+  content: 'Alert content',
+  status: 'info',
+  children: /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "body2",
+    color: "#017EB7"
+  }, "Learn more")
+};

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

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+exports.AlertContext = void 0;
+var _react = require("react");
+var AlertContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.AlertContext = AlertContext;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.AlertProvider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _AlertContext = require("./AlertContext");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var AlertProvider = function AlertProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(undefined),
+    state = _useState[0],
+    setState = _useState[1];
+  var showAlert = function showAlert(props) {
+    return setState((0, _extends2["default"])({}, props, {
+      show: true
+    }));
+  };
+  var closeAlert = function closeAlert() {
+    return setState({
+      show: false
+    });
+  };
+  var alertContextValue = (0, _extends2["default"])({}, state, {
+    showAlert: showAlert,
+    closeAlert: closeAlert
+  });
+  return /*#__PURE__*/_react["default"].createElement(_AlertContext.AlertContext.Provider, {
+    value: alertContextValue
+  }, children);
+};
+exports.AlertProvider = AlertProvider;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledAlertContentColumn = exports.StyledAlertContainer = exports.StyledAlertCloseIconContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _borderRadius = require("../utilities/borderRadius");
+var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
+var _colors = require("../utilities/colors");
+var _spacing = require("../utilities/spacing");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var StyledAlertContainer = _styledComponents["default"].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);}}"], _spacing.space12, _spacing.space8, _borderRadius.borderRadius4, _colors.Neutral.B18, _colors.Green.B89, _colors.Green.B61, _colors.Blue.S08, _colors.Blue.Brand, _colors.Orange.S42, _colors.Orange.S86, _colors.Red.B100, _colors.Red.B93, Breakpoints.large, _spacing.space8);
+exports.StyledAlertContainer = StyledAlertContainer;
+var StyledAlertCloseIconContainer = _styledComponents["default"].div.withConfig({
+  displayName: "AlertStyle__StyledAlertCloseIconContainer",
+  componentId: "sc-1e5i2kj-1"
+})(["cursor:pointer;&&& svg{fill:", ";}"], _colors.Neutral.B40);
+exports.StyledAlertCloseIconContainer = StyledAlertCloseIconContainer;
+var StyledAlertContentColumn = _styledComponents["default"].div.withConfig({
+  displayName: "AlertStyle__StyledAlertContentColumn",
+  componentId: "sc-1e5i2kj-2"
+})(["min-width:240px;max-width:560px;padding:0;@media (max-width:480px){min-width:unset;}"]);
+exports.StyledAlertContentColumn = StyledAlertContentColumn;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.AlertWithProvider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Alert = require("./Alert");
+var _useAlert2 = require("./useAlert");
+var _excluded = ["closeAlert"],
+  _excluded2 = ["show"];
+var AlertWithProvider = function AlertWithProvider() {
+  var _useAlert = (0, _useAlert2.useAlert)(),
+    closeAlert = _useAlert.closeAlert,
+    rest = (0, _objectWithoutPropertiesLoose2["default"])(_useAlert, _excluded);
+  var show = rest.show,
+    alertProps = (0, _objectWithoutPropertiesLoose2["default"])(rest, _excluded2);
+  if (!show) {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement(_Alert.Alert, (0, _extends2["default"])({}, alertProps, {
+    show: show,
+    onDismissed: function onDismissed() {
+      return closeAlert();
+    }
+  }));
+};
+exports.AlertWithProvider = AlertWithProvider;

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.Interactive = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Button = require("../Button");
+var _useAlert2 = require("./useAlert");
+var _AlertWithProvider = require("./AlertWithProvider");
+var _Decorators = require("../../../.storybook/Decorators");
+var _Typography = require("../Typography");
+_AlertWithProvider.AlertWithProvider.displayName = 'AlertWithProvider';
+var _default = {
+  title: '@next/AlertWithProvider',
+  component: _AlertWithProvider.AlertWithProvider
+};
+exports["default"] = _default;
+var Template = function Template(args) {
+  var _useAlert = (0, _useAlert2.useAlert)(),
+    showAlert = _useAlert.showAlert;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_AlertWithProvider.AlertWithProvider, null), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    onClick: function onClick() {
+      return showAlert((0, _extends2["default"])({}, args));
+    }
+  }, "Show Alert"));
+};
+var Interactive = Template.bind({});
+exports.Interactive = Interactive;
+Interactive.args = {
+  title: 'Title',
+  content: 'Alert content',
+  status: 'info',
+  children: /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "body2",
+    color: "#017EB7"
+  }, "Learn more")
+};
+Interactive.decorators = [_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/lib/@next/Alert/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+var _Alert = require("./Alert");
+Object.keys(_Alert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Alert[key]) return;
+  exports[key] = _Alert[key];
+});
+var _AlertProvider = require("./AlertProvider");
+Object.keys(_AlertProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AlertProvider[key]) return;
+  exports[key] = _AlertProvider[key];
+});
+var _AlertWithProvider = require("./AlertWithProvider");
+Object.keys(_AlertWithProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AlertWithProvider[key]) return;
+  exports[key] = _AlertWithProvider[key];
+});
+var _AlertContext = require("./AlertContext");
+Object.keys(_AlertContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AlertContext[key]) return;
+  exports[key] = _AlertContext[key];
+});
+var _useAlert = require("./useAlert");
+Object.keys(_useAlert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAlert[key]) return;
+  exports[key] = _useAlert[key];
+});

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

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useAlert = void 0;
+var _react = require("react");
+var _AlertContext = require("./AlertContext");
+var useAlert = function useAlert() {
+  var context = (0, _react.useContext)(_AlertContext.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;
+};
+exports.useAlert = useAlert;

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

@@ -4,8 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.StyledSuffixContainer = exports.StyledPrefixContainer = exports.StyledInput = exports.StyledContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _ = require("../..");
+var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
 var _colors = require("../utilities/colors");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var StyledContainer = _styledComponents["default"].div.withConfig({
   displayName: "InputStyle__StyledContainer",
   componentId: "sc-15z2mnd-0"
@@ -24,5 +26,5 @@ exports.StyledSuffixContainer = StyledSuffixContainer;
 var StyledInput = _styledComponents["default"].input.withConfig({
   displayName: "InputStyle__StyledInput",
   componentId: "sc-15z2mnd-3"
-})(["background:", ";box-sizing:border-box;border:1px solid ", ";border-radius:4px;padding:0 12px;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";flex:none;order:1;align-self:stretch;flex-grow:0;height:36px;&::placeholder{color:", ";}&:focus{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}@media (max-width:", "){font-size:14px;}"], _colors.Neutral.B100, _colors.Neutral.B68, _colors.Neutral.B18, _colors.Neutral.B40, _colors.Neutral.B100, _.Breakpoints.large);
+})(["background:", ";box-sizing:border-box;border:1px solid ", ";border-radius:4px;padding:0 12px;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";flex:none;order:1;align-self:stretch;flex-grow:0;height:36px;&::placeholder{color:", ";}&:focus{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}@media (max-width:", "){font-size:14px;}"], _colors.Neutral.B100, _colors.Neutral.B68, _colors.Neutral.B18, _colors.Neutral.B40, _colors.Neutral.B100, Breakpoints.large);
 exports.StyledInput = StyledInput;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.PageButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Typography = require("../Typography");
+var _PaginationStyle = require("./PaginationStyle");
+var _excluded = ["value", "active", "children", "onClick"];
+var PageButton = function PageButton(_ref) {
+  var value = _ref.value,
+    active = _ref.active,
+    children = _ref.children,
+    _onClick = _ref.onClick,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var content = children ? children : value;
+  return /*#__PURE__*/_react["default"].createElement(_PaginationStyle.StyledPageButton, (0, _extends2["default"])({
+    "data-active": active,
+    onClick: function onClick() {
+      return _onClick == null ? void 0 : _onClick(value);
+    }
+  }, props), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "body1"
+  }, content));
+};
+exports.PageButton = PageButton;

package/lib/@next/Pagination/Pagination.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Pagination = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _PageButton = require("./PageButton");
+var _PaginationStyle = require("./PaginationStyle");
+var _paginationUtils = require("./paginationUtils");
+var _Stepper = require("./Stepper");
+var _excluded = ["value"];
+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 ? _paginationUtils.defaultPageSize : _ref$pageSize,
+    onPageChanged = _ref.onPageChanged;
+  var pageList = [];
+  var totalPages = (0, _paginationUtils.getAllPages)(pageSize, totalItems);
+  var bufferSize = (0, _paginationUtils.getBufferSize)(_paginationUtils.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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
+    return /*#__PURE__*/_react["default"].createElement(_PageButton.PageButton, (0, _extends2["default"])({}, 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["default"].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["default"].createElement(Pager, {
+        key: _i,
+        value: _i
+      }));
+    }
+    var jumpPre = calculateNextJumpPage(-(bufferSize * 2 + 1));
+    var jumpNext = calculateNextJumpPage(bufferSize * 2 + 1);
+    var FirstPager = /*#__PURE__*/_react["default"].createElement(Pager, {
+      value: 1,
+      key: 1
+    });
+    var LastPager = /*#__PURE__*/_react["default"].createElement(Pager, {
+      value: totalPages,
+      key: totalPages
+    });
+    if (hasJumpPre) {
+      pageList.unshift( /*#__PURE__*/_react["default"].createElement(Pager, {
+        key: "jump-pre",
+        "data-testid": "previous-jumper",
+        value: jumpPre
+      }, "..."));
+      pageList.unshift(FirstPager);
+    }
+    if (hasJumpNext) {
+      pageList.push( /*#__PURE__*/_react["default"].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["default"].createElement(_Stepper.PreviousStepper, {
+    key: "prev-stepper",
+    value: currentPage - 1,
+    disabled: !hasPrevious || disabled,
+    onClick: handlePagerClick
+  }));
+  pageList.push( /*#__PURE__*/_react["default"].createElement(_Stepper.NextStepper, {
+    key: "next-stepper",
+    value: currentPage + 1,
+    disabled: !hasNext || disabled,
+    onClick: handlePagerClick
+  }));
+  return /*#__PURE__*/_react["default"].createElement(_PaginationStyle.StyledNav, null, pageList);
+};
+exports.Pagination = Pagination;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.Interactive = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _Pagination = require("./Pagination");
+var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
+var _excluded = ["currentPage"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+_Pagination.Pagination.displayName = 'Pagination';
+var _default = {
+  title: '@next/Pagination',
+  component: _Pagination.Pagination,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, null, Story());
+  }]
+};
+exports["default"] = _default;
+var Template = function Template(args) {
+  var _useState = (0, _react.useState)(1),
+    page = _useState[0],
+    setPage = _useState[1];
+  var currentPage = args.currentPage,
+    rest = (0, _objectWithoutPropertiesLoose2["default"])(args, _excluded);
+  (0, _react.useEffect)(function () {
+    setPage(currentPage);
+  }, [currentPage]);
+  return /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination, (0, _extends2["default"])({}, rest, {
+    currentPage: page,
+    onPageChanged: setPage
+  }));
+};
+var Interactive = Template.bind({});
+exports.Interactive = Interactive;
+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/lib/@next/Pagination/PaginationStyle.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledSimplePaginationInput = exports.StyledSimplePaginationButton = exports.StyledPageButton = exports.StyledNav = exports.StyledActiveSimplePaginationButton = exports.SimplePaginationStyledNav = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _NumberInput = require("../NumberInput");
+var _borderRadius = require("../utilities/borderRadius");
+var _colors = require("../utilities/colors");
+var _spacing = require("../utilities/spacing");
+var _PageButton = require("./PageButton");
+var StyledNav = _styledComponents["default"].nav.withConfig({
+  displayName: "PaginationStyle__StyledNav",
+  componentId: "sc-1hi5sa8-0"
+})(["display:flex;gap:10px;"]);
+exports.StyledNav = StyledNav;
+var SimplePaginationStyledNav = (0, _styledComponents["default"])(StyledNav).withConfig({
+  displayName: "PaginationStyle__SimplePaginationStyledNav",
+  componentId: "sc-1hi5sa8-1"
+})(["gap:4px;"]);
+exports.SimplePaginationStyledNav = SimplePaginationStyledNav;
+var StyledPageButton = _styledComponents["default"].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:", ";}"], _colors.Neutral.B100, _borderRadius.borderRadius2, _spacing.space4, _colors.Neutral.B18, _colors.Neutral.B95, _colors.Neutral.B85, _colors.Neutral.B40, _colors.Blue.S08, _colors.Blue.S99, _colors.Neutral.B85, _colors.Neutral.B95, _colors.Neutral.B85);
+exports.StyledPageButton = StyledPageButton;
+var StyledSimplePaginationButton = (0, _styledComponents["default"])(StyledPageButton).withConfig({
+  displayName: "PaginationStyle__StyledSimplePaginationButton",
+  componentId: "sc-1hi5sa8-3"
+})(["pointer-events:none;"]);
+exports.StyledSimplePaginationButton = StyledSimplePaginationButton;
+var StyledActiveSimplePaginationButton = (0, _styledComponents["default"])(function (props) {
+  return /*#__PURE__*/_react["default"].createElement(_PageButton.PageButton, props);
+}).withConfig({
+  displayName: "PaginationStyle__StyledActiveSimplePaginationButton",
+  componentId: "sc-1hi5sa8-4"
+})(["background:", ";color:", ";&:hover{background:", ";color:", ";}"], _colors.Blue.S08, _colors.Blue.S99, _colors.Neutral.B95, _colors.Neutral.B18);
+exports.StyledActiveSimplePaginationButton = StyledActiveSimplePaginationButton;
+var StyledSimplePaginationInput = (0, _styledComponents["default"])(_NumberInput.NumberInput).withConfig({
+  displayName: "PaginationStyle__StyledSimplePaginationInput",
+  componentId: "sc-1hi5sa8-5"
+})(["padding:0;text-align:center;height:32px;width:32px;"]);
+exports.StyledSimplePaginationInput = StyledSimplePaginationInput;

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

@@ -0,0 +1,87 @@
+"use strict";
+
+exports.__esModule = true;
+exports.SimplePagination = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Typography = require("../Typography");
+var _PaginationStyle = require("./PaginationStyle");
+var _paginationUtils = require("./paginationUtils");
+var _Stepper = require("./Stepper");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 ? _paginationUtils.defaultPageSize : _ref$pageSize,
+    onPageChanged = _ref.onPageChanged;
+  var _useState = (0, _react.useState)(false),
+    editMode = _useState[0],
+    setEditMode = _useState[1];
+  var totalPages = (0, _paginationUtils.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["default"].createElement(_PaginationStyle.SimplePaginationStyledNav, null, /*#__PURE__*/_react["default"].createElement(_Stepper.PreviousStepper, {
+    value: currentPage - 1,
+    disabled: !hasPrevious || disabled,
+    onClick: handlePageNumberChange
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    "data-testid": "current-page-btn",
+    onClick: handleEditMode
+  }, !editMode && /*#__PURE__*/_react["default"].createElement(_PaginationStyle.StyledActiveSimplePaginationButton, {
+    value: currentPage,
+    disabled: disabled,
+    onClick: handlePageNumberChange
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "body1"
+  }, currentPage)), editMode && /*#__PURE__*/_react["default"].createElement(_PaginationStyle.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["default"].createElement(_PaginationStyle.StyledSimplePaginationButton, {
+    disabled: disabled
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "body1"
+  }, "/")), /*#__PURE__*/_react["default"].createElement(_PaginationStyle.StyledSimplePaginationButton, {
+    disabled: disabled
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "body1"
+  }, totalPages)), /*#__PURE__*/_react["default"].createElement(_Stepper.NextStepper, {
+    value: currentPage + 1,
+    disabled: !hasNext || disabled,
+    onClick: handlePageNumberChange
+  }));
+};
+exports.SimplePagination = SimplePagination;