@laerdal/life-react-components 1.4.1-dev.10 → 1.4.1-dev.14

package/dist/Modals/ModalTypes.cjs

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=ModalTypes.cjs.map

package/dist/Modals/ModalTypes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"ModalTypes.cjs"}

package/dist/Modals/index.cjs

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.default;
+  }
+});
+Object.defineProperty(exports, "ModalBody", {
+  enumerable: true,
+  get: function get() {
+    return _ModalStyles.ModalBody;
+  }
+});
+Object.defineProperty(exports, "ModalCloseButton", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.ModalCloseButton;
+  }
+});
+Object.defineProperty(exports, "ModalContainer", {
+  enumerable: true,
+  get: function get() {
+    return _ModalContainer.default;
+  }
+});
+Object.defineProperty(exports, "ModalDialog", {
+  enumerable: true,
+  get: function get() {
+    return _ModalDialog.default;
+  }
+});
+Object.defineProperty(exports, "ModalFooter", {
+  enumerable: true,
+  get: function get() {
+    return _ModalStyles.ModalFooter;
+  }
+});
+Object.defineProperty(exports, "ModalHeader", {
+  enumerable: true,
+  get: function get() {
+    return _ModalStyles.ModalHeader;
+  }
+});
+Object.defineProperty(exports, "ModalTitle", {
+  enumerable: true,
+  get: function get() {
+    return _ModalStyles.ModalTitle;
+  }
+});
+
+var _Modal = _interopRequireWildcard(require("./Modal"));
+
+var _ModalContainer = _interopRequireDefault(require("./ModalContainer"));
+
+var _ModalStyles = require("./ModalStyles");
+
+var _ModalDialog = _interopRequireDefault(require("./ModalDialog"));
+
+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; }
+//# sourceMappingURL=index.cjs.map

package/dist/Modals/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modals/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog };\n\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton} from './ModalTypes';\n"],"file":"index.cjs"}

package/dist/NavItem/NavItem.cjs

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _templateObject;
+
+var NavItem = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ", ";\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.neutral_800, _styles.COLORS.primary_600, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_600);
+
+var _default = NavItem;
+exports.default = _default;
+//# sourceMappingURL=NavItem.cjs.map

package/dist/NavItem/NavItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focus","primary_500"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,uiCACT,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CADS,EAwBEC,oBAAUC,MAxBZ,EAyBWH,eAAOI,UAzBlB,EA0BAJ,eAAOK,WA1BP,EA4BaL,eAAOM,WA5BpB,EAiCAN,eAAOO,WAjCP,EAkCWP,eAAOQ,WAlClB,EAoCaR,eAAOQ,WApCpB,EAyCEN,oBAAUO,KAzCZ,EA0CWT,eAAOU,UA1ClB,EA2CAV,eAAOW,WA3CP,EA6CaX,eAAOM,WA7CpB,EAkDEJ,oBAAUU,KAlDZ,EAmDiBZ,eAAOa,WAnDxB,EAsDab,eAAOM,WAtDpB,CAAb;;eA2DeX,O","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.cjs"}

package/dist/NavItem/index.cjs

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

package/dist/NavItem/index.cjs.map

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

package/dist/NotificationDot/NotificationDot.cjs

@@ -0,0 +1,74 @@
+"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 _types = require("../types");
+
+var _ = require("..");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+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 ContentWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), function (props) {
+  return props.size === _types.Size.Small ? '16px' : props.size === _types.Size.Large ? '24px' : '20px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '16px' : props.size === _types.Size.Large ? '24px' : '20px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '3px' : props.size === _types.Size.Large ? '4px' : '4px';
+});
+
+var Content = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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 === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '2px solid ' + _.COLORS.white : props.size === _types.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 ? _types.Size.Medium : _ref$size,
+      variant = _ref.variant,
+      testId = _ref.testId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentWrapper, {
+    size: size,
+    variant: variant,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+      size: size,
+      variant: variant,
+      "data-testid": testId
+    })
+  });
+};
+
+NotificationDot.propTypes = {
+  variant: _propTypes.default.oneOf(['critical', 'positive']).isRequired,
+  testId: _propTypes.default.string
+};
+var _default = NotificationDot;
+exports.default = _default;
+//# sourceMappingURL=NotificationDot.cjs.map

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/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/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/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"}