@laerdal/life-react-components 1.4.1-dev.1 → 1.4.1-dev.12

package/dist/NotificationDot/NotificationDot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/NotificationDot/NotificationDot.tsx"],"names":["ContentWrapper","styled","div","props","size","Size","Small","Large","Content","variant","COLORS","correct_500","critical_500","white","NotificationDot","Medium","testId"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAQA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,oKACT,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADS,EAER,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFQ,EAGP,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,KAA5B,GAAqCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,KAA5B,GAAoC,KAApF;AAAA,CAHO,CAApB;;AAOA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,wNACS,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAN,KAAkB,UAAlB,GAA+BC,SAAOC,WAAtC,GAAoDD,SAAOE,YAAtE;AAAA,CADT,EAED,UAACT,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFC,EAGF,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAHE,EAIM,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAJN,EAKD,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,eAAeI,SAAOG,KAAlD,GAA2DV,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,eAAeG,SAAOG,KAAlD,GAA0D,eAAeH,SAAOG,KAAtJ;AAAA,CALC,CAAb;;AASA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAA2C;AAAA,uBAAzCV,IAAyC;AAAA,MAAzCA,IAAyC,0BAAlCC,YAAKU,MAA6B;AAAA,MAArBN,OAAqB,QAArBA,OAAqB;AAAA,MAAZO,MAAY,QAAZA,MAAY;AAC7G,sBACE,qBAAC,cAAD;AAAgB,IAAA,IAAI,EAAEZ,IAAtB;AAA4B,IAAA,OAAO,EAAEK,OAArC;AAAA,2BACE,qBAAC,OAAD;AAAS,MAAA,IAAI,EAAEL,IAAf;AAAqB,MAAA,OAAO,EAAEK,OAA9B;AAAuC,qBAAaO;AAApD;AADF,IADF;AAKD,CAND;;;AApBEP,EAAAA,O,4BAAS,U,EAAa,U;AACtBO,EAAAA,M;;eA2BaF,e","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  height: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  padding: ${(props) => props.size === Size.Small ? '3px' : (props.size === Size.Large ? '4px' : '4px')};\n  box-sizing: border-box;\n`;\n\nconst Content = styled.div<NotificationProps>`\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\n  height: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  width: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border: ${(props) => props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = Size.Medium, variant, testId}) => {\n  return (\n    <ContentWrapper size={size} variant={variant}>\n      <Content size={size} variant={variant} data-testid={testId}/>\n    </ContentWrapper>\n  );\n};\n\nexport default NotificationDot;\n"],"file":"NotificationDot.cjs"}

package/dist/NotificationDot/NotificationDot.js

@@ -0,0 +1,51 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { Size } from '../types';
+import { COLORS } from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ContentWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), function (props) {
+  return props.size === Size.Small ? '16px' : props.size === Size.Large ? '24px' : '20px';
+}, function (props) {
+  return props.size === Size.Small ? '16px' : props.size === Size.Large ? '24px' : '20px';
+}, function (props) {
+  return props.size === Size.Small ? '3px' : props.size === Size.Large ? '4px' : '4px';
+});
+var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  border: ", ";\n  box-sizing: border-box;\n"])), function (props) {
+  return props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500;
+}, function (props) {
+  return props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px';
+}, function (props) {
+  return props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px';
+}, function (props) {
+  return props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px';
+}, function (props) {
+  return props.size === Size.Small ? '2px solid ' + COLORS.white : props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white;
+});
+
+var NotificationDot = function NotificationDot(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? Size.Medium : _ref$size,
+      variant = _ref.variant,
+      testId = _ref.testId;
+  return /*#__PURE__*/_jsx(ContentWrapper, {
+    size: size,
+    variant: variant,
+    children: /*#__PURE__*/_jsx(Content, {
+      size: size,
+      variant: variant,
+      "data-testid": testId
+    })
+  });
+};
+
+NotificationDot.propTypes = {
+  variant: _pt.oneOf(['critical', 'positive']).isRequired,
+  testId: _pt.string
+};
+export default NotificationDot;
+//# sourceMappingURL=NotificationDot.js.map

package/dist/NotificationDot/NotificationDot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/NotificationDot/NotificationDot.tsx"],"names":["React","styled","Size","COLORS","ContentWrapper","div","props","size","Small","Large","Content","variant","correct_500","critical_500","white","NotificationDot","Medium","testId"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,MAAR,QAAqB,IAArB;;AAQA,IAAMC,cAAc,GAAGH,MAAM,CAACI,GAAV,sJACT,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADS,EAER,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFQ,EAGP,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,KAA5B,GAAqCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,KAA5B,GAAoC,KAApF;AAAA,CAHO,CAApB;AAOA,IAAMC,OAAO,GAAGT,MAAM,CAACI,GAAV,0MACS,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACK,OAAN,KAAkB,UAAlB,GAA+BR,MAAM,CAACS,WAAtC,GAAoDT,MAAM,CAACU,YAAtE;AAAA,CADT,EAED,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFC,EAGF,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAHE,EAIM,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAJN,EAKD,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,eAAeL,MAAM,CAACW,KAAlD,GAA2DR,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,eAAeN,MAAM,CAACW,KAAlD,GAA0D,eAAeX,MAAM,CAACW,KAAtJ;AAAA,CALC,CAAb;;AASA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAA2C;AAAA,uBAAzCR,IAAyC;AAAA,MAAzCA,IAAyC,0BAAlCL,IAAI,CAACc,MAA6B;AAAA,MAArBL,OAAqB,QAArBA,OAAqB;AAAA,MAAZM,MAAY,QAAZA,MAAY;AAC7G,sBACE,KAAC,cAAD;AAAgB,IAAA,IAAI,EAAEV,IAAtB;AAA4B,IAAA,OAAO,EAAEI,OAArC;AAAA,2BACE,KAAC,OAAD;AAAS,MAAA,IAAI,EAAEJ,IAAf;AAAqB,MAAA,OAAO,EAAEI,OAA9B;AAAuC,qBAAaM;AAApD;AADF,IADF;AAKD,CAND;;;AApBEN,EAAAA,O,aAAS,U,EAAa,U;AACtBM,EAAAA,M;;AA2BF,eAAeF,eAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  height: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  padding: ${(props) => props.size === Size.Small ? '3px' : (props.size === Size.Large ? '4px' : '4px')};\n  box-sizing: border-box;\n`;\n\nconst Content = styled.div<NotificationProps>`\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\n  height: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  width: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border: ${(props) => props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = Size.Medium, variant, testId}) => {\n  return (\n    <ContentWrapper size={size} variant={variant}>\n      <Content size={size} variant={variant} data-testid={testId}/>\n    </ContentWrapper>\n  );\n};\n\nexport default NotificationDot;\n"],"file":"NotificationDot.js"}

package/dist/NotificationDot/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NotificationDot", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationDot.default;
+  }
+});
+
+var _NotificationDot = _interopRequireDefault(require("./NotificationDot"));
+//# sourceMappingURL=index.cjs.map

package/dist/NotificationDot/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/NotificationDot/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as NotificationDot } from './NotificationDot';"],"file":"index.cjs"}

package/dist/NotificationDot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/NotificationDot/index.ts"],"names":["default","NotificationDot"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,mBAA3C","sourcesContent":["export { default as NotificationDot } from './NotificationDot';"],"file":"index.js"}

package/dist/Paginator/Paginator.cjs

@@ -0,0 +1,191 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _styles = require("../styles");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _typography = require("../styles/typography");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _reactRouter = require("react-router");
+
+var _Button = require("../Button");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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 Container = _styledComponents.default.nav(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ", " {\n    width: 75%;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+
+var Items = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n"])));
+
+var Item = _styledComponents.default.li(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ", "\n\n    &:focus,\n    &:focus-within {\n      z-index: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n  & > a:active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n  & > a.active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.focus, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, _styles.COLORS.primary_800, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100);
+
+var Dots = (0, _styledComponents.default)(Item)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: not-allowed;\n  &:after{\n    ", "\n    content: '...';\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+var ItemContent = (0, _styledComponents.default)('div')(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ", "\n  }\n  &.active:hover:after{\n    background-color: ", "\n  }\n  &.active:active:after{\n    background-color: ", "\n  }\n"])), _styles.COLORS.primary_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800);
+
+var Step = function Step(_ref) {
+  var _ref$up = _ref.up,
+      up = _ref$up === void 0 ? true : _ref$up,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '' : _ref$target,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      page = _ref.page,
+      onPageChange = _ref.onPageChange,
+      id = _ref.id;
+  var history = (0, _reactRouter.useHistory)();
+
+  var handleButtonClick = function handleButtonClick() {
+    history.push(target);
+    onPageChange && onPageChange(page);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+    id: id,
+    action: function action(event) {
+      return handleButtonClick();
+    },
+    variant: 'secondary',
+    shape: 'circular',
+    disabled: disabled,
+    children: up ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ChevronRight, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ChevronLeft, {})
+  });
+};
+
+var Paginator = function Paginator(_ref2) {
+  var _ref2$pageCount = _ref2.pageCount,
+      pageCount = _ref2$pageCount === void 0 ? 1 : _ref2$pageCount,
+      _ref2$currentPage = _ref2.currentPage,
+      currentPage = _ref2$currentPage === void 0 ? 1 : _ref2$currentPage,
+      _ref2$baseUrl = _ref2.baseUrl,
+      baseUrl = _ref2$baseUrl === void 0 ? '' : _ref2$baseUrl,
+      _onPageChange = _ref2.onPageChange;
+  var pages = [];
+  var from = 2;
+  var to = 4;
+  if (pageCount === 0) return null;
+
+  if (pageCount > 1) {
+    if (currentPage >= 4 && currentPage <= pageCount - 2) {
+      from = currentPage - 1;
+      to = currentPage + 1;
+    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {
+      from = pageCount - 3;
+      to = pageCount - 1;
+    }
+
+    if (to > pageCount) {
+      to = pageCount;
+    }
+
+    for (var i = from; i <= to; i += 1) {
+      pages.push(i);
+    }
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Items, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Step, {
+        up: false,
+        target: "".concat(baseUrl, "/").concat(currentPage - 1),
+        page: currentPage - 1,
+        disabled: currentPage === 1,
+        onPageChange: function onPageChange() {
+          if (_onPageChange) _onPageChange(currentPage - 1);
+        },
+        id: "paginator-left"
+      }), pages.findIndex(function (item) {
+        return item === 1;
+      }) === -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.NavLink, {
+          to: "".concat(baseUrl, "/1"),
+          onClick: function onClick() {
+            if (_onPageChange) _onPageChange(1);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
+            className: currentPage === 1 ? 'active' : '',
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "1"
+            })
+          })
+        })
+      }), currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(function (item) {
+        return item === 1;
+      }) === -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Dots, {}), pages.map(function (page) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.NavLink, {
+            to: "".concat(baseUrl, "/").concat(page),
+            onClick: function onClick() {
+              if (_onPageChange) _onPageChange(page);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
+              className: currentPage === page ? 'active' : '',
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: page
+              })
+            })
+          })
+        }, page);
+      }), pageCount > 5 && currentPage <= pageCount - 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Dots, {}), pages.findIndex(function (item) {
+        return item === pageCount;
+      }) === -1 && pageCount !== 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.NavLink, {
+          to: "".concat(baseUrl, "/").concat(pageCount),
+          onClick: function onClick() {
+            if (_onPageChange) _onPageChange(pageCount);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
+            className: currentPage === pageCount ? 'active' : '',
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: pageCount
+            })
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Step, {
+        up: true,
+        target: "".concat(baseUrl, "/").concat(currentPage + 1),
+        page: currentPage + 1,
+        disabled: currentPage === pageCount,
+        onPageChange: function onPageChange() {
+          if (_onPageChange) _onPageChange(currentPage + 1);
+        },
+        id: "paginator-right"
+      })]
+    })
+  });
+};
+
+Paginator.propTypes = {
+  pageCount: _propTypes.default.number.isRequired,
+  currentPage: _propTypes.default.number.isRequired,
+  baseUrl: _propTypes.default.string.isRequired,
+  onPageChange: _propTypes.default.func
+};
+var _default = Paginator;
+exports.default = _default;
+//# sourceMappingURL=Paginator.cjs.map

package/dist/Paginator/Paginator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","focus","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useHistory} from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      z-index: ${Z_INDEXES.focus};\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n    box-shadow: none;\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const history = useHistory();\n\n  const handleButtonClick = () => {\n    history.push(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <ChevronRight/> : <ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.cjs"}

package/dist/Paginator/Paginator.d.ts

@@ -0,0 +1,8 @@
+declare type PaginatorProps = {
+    pageCount: number;
+    currentPage: number;
+    baseUrl: string;
+    onPageChange?: (page: number) => void;
+};
+declare const Paginator: ({ pageCount, currentPage, baseUrl, onPageChange }: PaginatorProps) => JSX.Element | null;
+export default Paginator;

package/dist/Paginator/Paginator.js

@@ -0,0 +1,162 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
+import { ChevronLeft, ChevronRight } from '../icons/systemicons/SystemIcons';
+import { ComponentMStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+import { useHistory } from 'react-router';
+import { IconButton } from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Container = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ", " {\n    width: 75%;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var Items = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n"])));
+var Item = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ", "\n\n    &:focus,\n    &:focus-within {\n      z-index: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n  & > a:active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n  & > a.active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: ", ";\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), Z_INDEXES.focus, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_20, Z_INDEXES.active, COLORS.primary_700, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.neutral_20, COLORS.primary_800, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100);
+var Dots = styled(Item)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  &:after{\n    ", "\n    content: '...';\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+var ItemContent = styled('div')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ", "\n  }\n  &.active:hover:after{\n    background-color: ", "\n  }\n  &.active:active:after{\n    background-color: ", "\n  }\n"])), COLORS.primary_500, COLORS.primary_700, COLORS.primary_800);
+
+var Step = function Step(_ref) {
+  var _ref$up = _ref.up,
+      up = _ref$up === void 0 ? true : _ref$up,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '' : _ref$target,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      page = _ref.page,
+      onPageChange = _ref.onPageChange,
+      id = _ref.id;
+  var history = useHistory();
+
+  var handleButtonClick = function handleButtonClick() {
+    history.push(target);
+    onPageChange && onPageChange(page);
+  };
+
+  return /*#__PURE__*/_jsx(IconButton, {
+    id: id,
+    action: function action(event) {
+      return handleButtonClick();
+    },
+    variant: 'secondary',
+    shape: 'circular',
+    disabled: disabled,
+    children: up ? /*#__PURE__*/_jsx(ChevronRight, {}) : /*#__PURE__*/_jsx(ChevronLeft, {})
+  });
+};
+
+var Paginator = function Paginator(_ref2) {
+  var _ref2$pageCount = _ref2.pageCount,
+      pageCount = _ref2$pageCount === void 0 ? 1 : _ref2$pageCount,
+      _ref2$currentPage = _ref2.currentPage,
+      currentPage = _ref2$currentPage === void 0 ? 1 : _ref2$currentPage,
+      _ref2$baseUrl = _ref2.baseUrl,
+      baseUrl = _ref2$baseUrl === void 0 ? '' : _ref2$baseUrl,
+      _onPageChange = _ref2.onPageChange;
+  var pages = [];
+  var from = 2;
+  var to = 4;
+  if (pageCount === 0) return null;
+
+  if (pageCount > 1) {
+    if (currentPage >= 4 && currentPage <= pageCount - 2) {
+      from = currentPage - 1;
+      to = currentPage + 1;
+    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {
+      from = pageCount - 3;
+      to = pageCount - 1;
+    }
+
+    if (to > pageCount) {
+      to = pageCount;
+    }
+
+    for (var i = from; i <= to; i += 1) {
+      pages.push(i);
+    }
+  }
+
+  return /*#__PURE__*/_jsx(Container, {
+    children: /*#__PURE__*/_jsxs(Items, {
+      children: [/*#__PURE__*/_jsx(Step, {
+        up: false,
+        target: "".concat(baseUrl, "/").concat(currentPage - 1),
+        page: currentPage - 1,
+        disabled: currentPage === 1,
+        onPageChange: function onPageChange() {
+          if (_onPageChange) _onPageChange(currentPage - 1);
+        },
+        id: "paginator-left"
+      }), pages.findIndex(function (item) {
+        return item === 1;
+      }) === -1 && /*#__PURE__*/_jsx(Item, {
+        children: /*#__PURE__*/_jsx(NavLink, {
+          to: "".concat(baseUrl, "/1"),
+          onClick: function onClick() {
+            if (_onPageChange) _onPageChange(1);
+          },
+          children: /*#__PURE__*/_jsx(ItemContent, {
+            className: currentPage === 1 ? 'active' : '',
+            children: /*#__PURE__*/_jsx("span", {
+              children: "1"
+            })
+          })
+        })
+      }), currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(function (item) {
+        return item === 1;
+      }) === -1 && /*#__PURE__*/_jsx(Dots, {}), pages.map(function (page) {
+        return /*#__PURE__*/_jsx(Item, {
+          children: /*#__PURE__*/_jsx(NavLink, {
+            to: "".concat(baseUrl, "/").concat(page),
+            onClick: function onClick() {
+              if (_onPageChange) _onPageChange(page);
+            },
+            children: /*#__PURE__*/_jsx(ItemContent, {
+              className: currentPage === page ? 'active' : '',
+              children: /*#__PURE__*/_jsx("span", {
+                children: page
+              })
+            })
+          })
+        }, page);
+      }), pageCount > 5 && currentPage <= pageCount - 3 && /*#__PURE__*/_jsx(Dots, {}), pages.findIndex(function (item) {
+        return item === pageCount;
+      }) === -1 && pageCount !== 1 && /*#__PURE__*/_jsx(Item, {
+        children: /*#__PURE__*/_jsx(NavLink, {
+          to: "".concat(baseUrl, "/").concat(pageCount),
+          onClick: function onClick() {
+            if (_onPageChange) _onPageChange(pageCount);
+          },
+          children: /*#__PURE__*/_jsx(ItemContent, {
+            className: currentPage === pageCount ? 'active' : '',
+            children: /*#__PURE__*/_jsx("span", {
+              children: pageCount
+            })
+          })
+        })
+      }), /*#__PURE__*/_jsx(Step, {
+        up: true,
+        target: "".concat(baseUrl, "/").concat(currentPage + 1),
+        page: currentPage + 1,
+        disabled: currentPage === pageCount,
+        onPageChange: function onPageChange() {
+          if (_onPageChange) _onPageChange(currentPage + 1);
+        },
+        id: "paginator-right"
+      })]
+    })
+  });
+};
+
+Paginator.propTypes = {
+  pageCount: _pt.number.isRequired,
+  currentPage: _pt.number.isRequired,
+  baseUrl: _pt.string.isRequired,
+  onPageChange: _pt.func
+};
+export default Paginator;
+//# sourceMappingURL=Paginator.js.map

package/dist/Paginator/Paginator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Paginator/Paginator.tsx"],"names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","ChevronLeft","ChevronRight","ComponentMStyling","Z_INDEXES","useHistory","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","focus","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useHistory} from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      z-index: ${Z_INDEXES.focus};\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n    box-shadow: none;\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const history = useHistory();\n\n  const handleButtonClick = () => {\n    history.push(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <ChevronRight/> : <ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}

package/dist/Paginator/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Paginator", {
+  enumerable: true,
+  get: function get() {
+    return _Paginator.default;
+  }
+});
+
+var _Paginator = _interopRequireDefault(require("./Paginator"));
+//# sourceMappingURL=index.cjs.map

package/dist/Paginator/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Paginator/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["import Paginator from './Paginator';\n\nexport { Paginator };\n"],"file":"index.cjs"}

package/dist/Paginator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Paginator/index.ts"],"names":["Paginator"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AAEA,SAASA,SAAT","sourcesContent":["import Paginator from './Paginator';\n\nexport { Paginator };\n"],"file":"index.js"}

package/dist/Services/functions.cjs

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createUUID = createUUID;
+
+function createUUID() {
+  var dt = new Date().getTime(); // eslint-disable-next-line func-names
+
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    // eslint-disable-next-line no-bitwise
+    var r = (dt + Math.random() * 16) % 16 | 0;
+    dt = Math.floor(dt / 16); // eslint-disable-next-line no-bitwise
+
+    return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
+  });
+}
+//# sourceMappingURL=functions.cjs.map

package/dist/Services/functions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Services/functions.ts"],"names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"mappings":";;;;;;;AAAO,SAASA,UAAT,GAAsB;AAC3B,MAAIC,EAAE,GAAG,IAAIC,IAAJ,GAAWC,OAAX,EAAT,CAD2B,CAE3B;;AACA,SAAO,uCAAuCC,OAAvC,CAA+C,OAA/C,EAAwD,UAASC,CAAT,EAAY;AACzE;AACA,QAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAL,KAAgB,EAAtB,IAA4B,EAA5B,GAAiC,CAA3C;AACAP,IAAAA,EAAE,GAAGM,IAAI,CAACE,KAAL,CAAWR,EAAE,GAAG,EAAhB,CAAL,CAHyE,CAIzE;;AACA,WAAO,CAACI,CAAC,KAAK,GAAN,GAAYC,CAAZ,GAAiBA,CAAC,GAAG,GAAL,GAAY,GAA7B,EAAkCI,QAAlC,CAA2C,EAA3C,CAAP;AACD,GANM,CAAP;AAOD","sourcesContent":["export function createUUID() {\n  let dt = new Date().getTime();\n  // eslint-disable-next-line func-names\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    // eslint-disable-next-line no-bitwise\n    const r = (dt + Math.random() * 16) % 16 | 0;\n    dt = Math.floor(dt / 16);\n    // eslint-disable-next-line no-bitwise\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n  });\n}\n"],"file":"functions.cjs"}

package/dist/Services/functions.js

@@ -0,0 +1,12 @@
+export function createUUID() {
+  var dt = new Date().getTime(); // eslint-disable-next-line func-names
+
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    // eslint-disable-next-line no-bitwise
+    var r = (dt + Math.random() * 16) % 16 | 0;
+    dt = Math.floor(dt / 16); // eslint-disable-next-line no-bitwise
+
+    return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
+  });
+}
+//# sourceMappingURL=functions.js.map

package/dist/Services/functions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Services/functions.ts"],"names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"mappings":"AAAA,OAAO,SAASA,UAAT,GAAsB;AAC3B,MAAIC,EAAE,GAAG,IAAIC,IAAJ,GAAWC,OAAX,EAAT,CAD2B,CAE3B;;AACA,SAAO,uCAAuCC,OAAvC,CAA+C,OAA/C,EAAwD,UAASC,CAAT,EAAY;AACzE;AACA,QAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAL,KAAgB,EAAtB,IAA4B,EAA5B,GAAiC,CAA3C;AACAP,IAAAA,EAAE,GAAGM,IAAI,CAACE,KAAL,CAAWR,EAAE,GAAG,EAAhB,CAAL,CAHyE,CAIzE;;AACA,WAAO,CAACI,CAAC,KAAK,GAAN,GAAYC,CAAZ,GAAiBA,CAAC,GAAG,GAAL,GAAY,GAA7B,EAAkCI,QAAlC,CAA2C,EAA3C,CAAP;AACD,GANM,CAAP;AAOD","sourcesContent":["export function createUUID() {\n  let dt = new Date().getTime();\n  // eslint-disable-next-line func-names\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    // eslint-disable-next-line no-bitwise\n    const r = (dt + Math.random() * 16) % 16 | 0;\n    dt = Math.floor(dt / 16);\n    // eslint-disable-next-line no-bitwise\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n  });\n}\n"],"file":"functions.js"}