@laerdal/life-react-components 1.2.2-dev.9.full → 1.3.0

package/dist/umd/Modals/ModalTypes.js

@@ -0,0 +1,20 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+});
+//# sourceMappingURL=ModalTypes.js.map

package/dist/umd/Modals/ModalTypes.js.map

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

package/dist/umd/NavItem/NavItem.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "styled-components", "../styles", "../styles/typography"], factory);
+    define(["exports", "styled-components", "../styles", "../styles/typography", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("styled-components"), require("../styles"), require("../styles/typography"));
+    factory(exports, require("styled-components"), require("../styles"), require("../styles/typography"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.styledComponents, global.styles, global.typography);
+    factory(mod.exports, global.styledComponents, global.styles, global.typography, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _styledComponents, _styles, _typography) {
+})(this, function (exports, _styledComponents, _styles, _typography, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -49,6 +49,7 @@
   }
 
   &.active:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     background-color: ${_styles.COLORS.neutral_20};
     color: ${_styles.COLORS.neutral_800};
     &:after {
@@ -65,6 +66,7 @@
   }
 
   &:hover:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
     background-color: ${_styles.COLORS.primary_20};
     color: ${_styles.COLORS.primary_700};
     &:after {
@@ -73,6 +75,7 @@
   }
 
   &:focus:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.focus};
     box-shadow: 0px 0px 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
     outline: none;
     &:after {

package/dist/umd/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentMStyling","ComponentTextStyle","COLORS","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","primary_20","primary_700","primary_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,QAAMA,OAAO,GAAGC,2BAAOC,GAAI;AAC3B,IAAIC,mCAAkBC,+BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBE,eAAOC,UAAW;AAC1C,aAAaD,eAAOE,WAAY;AAChC;AACA,0BAA0BF,eAAOG,WAAY;AAC7C;AACA;AACA;AACA;AACA,aAAaH,eAAOI,WAAY;AAChC,wBAAwBJ,eAAOK,WAAY;AAC3C;AACA,0BAA0BL,eAAOK,WAAY;AAC7C;AACA;AACA;AACA;AACA,wBAAwBL,eAAOM,UAAW;AAC1C,aAAaN,eAAOO,WAAY;AAChC;AACA,0BAA0BP,eAAOG,WAAY;AAC7C;AACA;AACA;AACA;AACA,8BAA8BH,eAAOQ,WAAY;AACjD;AACA;AACA,0BAA0BR,eAAOG,WAAY;AAC7C;AACA;AArDA,CAAA;oBAwDA,O","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\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    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    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    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.js"}
+{"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentMStyling","ComponentTextStyle","COLORS","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focus","primary_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,OAAO,GAAGC,2BAAOC,GAAI;AAC3B,IAAIC,mCAAkBC,+BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeG,oBAAUC,MAAO;AAChC,wBAAwBF,eAAOG,UAAW;AAC1C,aAAaH,eAAOI,WAAY;AAChC;AACA,0BAA0BJ,eAAOK,WAAY;AAC7C;AACA;AACA;AACA;AACA,aAAaL,eAAOM,WAAY;AAChC,wBAAwBN,eAAOO,WAAY;AAC3C;AACA,0BAA0BP,eAAOO,WAAY;AAC7C;AACA;AACA;AACA;AACA,eAAeN,oBAAUO,KAAM;AAC/B,wBAAwBR,eAAOS,UAAW;AAC1C,aAAaT,eAAOU,WAAY;AAChC;AACA,0BAA0BV,eAAOK,WAAY;AAC7C;AACA;AACA;AACA;AACA,eAAeJ,oBAAUU,KAAM;AAC/B,8BAA8BX,eAAOY,WAAY;AACjD;AACA;AACA,0BAA0BZ,eAAOK,WAAY;AAC7C;AACA;AAxDA,CAAA;oBA2DA,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.js"}

package/dist/umd/NotificationDot/NotificationDot.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", ".."], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../types", ".."], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require(".."));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../types"), require(".."));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global._);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.types, global._);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _types, _) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -80,22 +80,22 @@
   }
 
   const ContentWrapper = _styledComponents2.default.div`
-  width: ${props => props.size === 'small' ? '16px' : props.size === 'large' ? '24px' : '20px'};
-  height: ${props => props.size === 'small' ? '16px' : props.size === 'large' ? '24px' : '20px'};
-  padding: ${props => props.size === 'small' ? '3px' : props.size === 'large' ? '4px' : '4px'};
+  width: ${props => props.size === _types.Size.Small ? '16px' : props.size === _types.Size.Large ? '24px' : '20px'};
+  height: ${props => props.size === _types.Size.Small ? '16px' : props.size === _types.Size.Large ? '24px' : '20px'};
+  padding: ${props => props.size === _types.Size.Small ? '3px' : props.size === _types.Size.Large ? '4px' : '4px'};
   box-sizing: border-box;
 `;
   const Content = _styledComponents2.default.div`
   background-color: ${props => props.variant === 'positive' ? _.COLORS.correct_500 : _.COLORS.critical_500};
-  height: ${props => props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px'};
-  width: ${props => props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px'};
-  border-radius: ${props => props.size === 'small' ? '10px' : props.size === 'large' ? '16px' : '12px'};
-  border: ${props => props.size === 'small' ? '2px solid ' + _.COLORS.white : props.size === 'large' ? '3px solid ' + _.COLORS.white : '2px solid ' + _.COLORS.white};
+  height: ${props => props.size === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px'};
+  width: ${props => props.size === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px'};
+  border-radius: ${props => props.size === _types.Size.Small ? '10px' : props.size === _types.Size.Large ? '16px' : '12px'};
+  border: ${props => props.size === _types.Size.Small ? '2px solid ' + _.COLORS.white : props.size === _types.Size.Large ? '3px solid ' + _.COLORS.white : '2px solid ' + _.COLORS.white};
   box-sizing: border-box;
 `;
 
   const NotificationDot = ({
-    size = 'medium',
+    size = _types.Size.Medium,
     variant,
     testId
   }) => {
@@ -110,7 +110,6 @@
   };
 
   NotificationDot.propTypes = {
-    size: _propTypes2.default.string,
     variant: _propTypes2.default.oneOf(['critical', 'positive']).isRequired,
     testId: _propTypes2.default.string
   };

package/dist/umd/NotificationDot/NotificationDot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NotificationDot/NotificationDot.tsx"],"names":["size","variant","testId","ContentWrapper","styled","div","props","Content","COLORS","critical_500","white","NotificationDot"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,QAAMG,cAAc,GAAGC,2BAAOC,GAAuB;AACrD,WAAYC,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkC,MAAQ;AACnG,YAAaA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkC,MAAQ;AACpG,aAAcA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,KAAAA,GAAkCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,KAAAA,GAAiC,KAAO;AAClG;AAJA,CAAA;AAOA,QAAMC,OAAO,GAAGH,2BAAOC,GAAuB;AAC9C,sBAAuBC,KAAD,IAAWA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAA+BE,SAA/BF,WAAAA,GAAoDE,SAAOC,YAAa;AACzG,YAAaH,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkC,MAAQ;AACpG,WAAYA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkC,MAAQ;AACnG,mBAAoBA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkC,MAAQ;AAC3G,YAAaA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAyB,eAAeE,SAAxCF,KAAAA,GAAwDA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAyB,eAAeE,SAAxCF,KAAAA,GAAuD,eAAeE,SAAOE,KAAO;AACnK;AANA,CAAA;;AASA,QAAMC,eAA2D,GAAG,CAAC;AAACX,IAAAA,IAAI,GAAL,QAAA;AAAA,IAAA,OAAA;AAA2BE,IAAAA;AAA3B,GAAD,KAAwC;AAC1G,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAgB,MAAA,IAAI,EAApB,IAAA;AAA4B,MAAA,OAAO,EAAED;AAArC,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAS,MAAA,IAAI,EAAb,IAAA;AAAqB,MAAA,OAAO,EAA5B,OAAA;AAAuC,qBAAaC;AAApD,KAAA,CADF,CADF;AADF,GAAA;;;AArBEF,IAAAA,I;AACAC,IAAAA,O,6BAAS,U,EAAa,U;AACtBC,IAAAA,M;;oBA2BF,e","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: string;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === 'small' ? '16px' : (props.size === 'large' ? '24px' : '20px')};\n  height: ${(props) => props.size === 'small' ? '16px' : (props.size === 'large' ? '24px' : '20px')};\n  padding: ${(props) => props.size === 'small' ? '3px' : (props.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 === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  width: ${(props) => props.size === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === 'small' ? '10px' : (props.size === 'large' ? '16px' : '12px')};\n  border: ${(props) => props.size === 'small' ? '2px solid ' + COLORS.white : (props.size === 'large' ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({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"}
+{"version":3,"sources":["../../../src/NotificationDot/NotificationDot.tsx"],"names":["variant","testId","ContentWrapper","styled","div","props","Size","Content","COLORS","critical_500","white","NotificationDot","size"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,QAAME,cAAc,GAAGC,2BAAOC,GAAuB;AACrD,WAAYC,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAsCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AACzG,YAAaA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAsCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AAC1G,aAAcA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,KAAAA,GAAqCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,KAAAA,GAAoC,KAAO;AACxG;AAJA,CAAA;AAOA,QAAME,OAAO,GAAGJ,2BAAOC,GAAuB;AAC9C,sBAAuBC,KAAD,IAAWA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAA+BG,SAA/BH,WAAAA,GAAoDG,SAAOC,YAAa;AACzG,YAAaJ,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAsCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AAC1G,WAAYA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAsCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AACzG,mBAAoBA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAsCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AACjH,YAAaA,KAAD,IAAWA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAA4B,eAAeG,SAA3CH,KAAAA,GAA2DA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAA4B,eAAeG,SAA3CH,KAAAA,GAA0D,eAAeG,SAAOE,KAAO;AACzK;AANA,CAAA;;AASA,QAAMC,eAA2D,GAAG,CAAC;AAACC,IAAAA,IAAI,GAAGN,YAAR,MAAA;AAAA,IAAA,OAAA;AAA8BL,IAAAA;AAA9B,GAAD,KAA2C;AAC7G,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAgB,MAAA,IAAI,EAApB,IAAA;AAA4B,MAAA,OAAO,EAAED;AAArC,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAS,MAAA,IAAI,EAAb,IAAA;AAAqB,MAAA,OAAO,EAA5B,OAAA;AAAuC,qBAAaC;AAApD,KAAA,CADF,CADF;AADF,GAAA;;;AApBED,IAAAA,O,6BAAS,U,EAAa,U;AACtBC,IAAAA,M;;oBA2BF,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.js"}

package/dist/umd/NotificationDot/__tests__/NotificationDot.test.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["react", "@testing-library/react", "..", "../../styles/colors", "jest-styled-components"], factory);
+    define(["react", "@testing-library/react", "..", "../../types", "../../styles/colors", "jest-styled-components"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(require("react"), require("@testing-library/react"), require(".."), require("../../styles/colors"), require("jest-styled-components"));
+    factory(require("react"), require("@testing-library/react"), require(".."), require("../../types"), require("../../styles/colors"), require("jest-styled-components"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(global.react, global.react, global._, global.colors, global.jestStyledComponents);
+    factory(global.react, global.react, global._, global.types, global.colors, global.jestStyledComponents);
     global.undefined = mod.exports;
   }
-})(this, function (_react, _react3, _, _colors) {
+})(this, function (_react, _react3, _, _types, _colors) {
   "use strict";
 
   var _react2 = _interopRequireDefault(_react);
@@ -29,7 +29,7 @@
         getByTestId
       } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.NotificationDot, {
         variant: "positive",
-        size: "small",
+        size: _types.Size.Small,
         testId: "testId"
       }));
       expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors2.default.correct_500);
@@ -40,7 +40,7 @@
         getByTestId
       } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.NotificationDot, {
         variant: "critical",
-        size: "large",
+        size: _types.Size.Large,
         testId: "testId"
       }));
       expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors2.default.critical_500);

package/dist/umd/NotificationDot/__tests__/NotificationDot.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/NotificationDot/__tests__/NotificationDot.test.tsx"],"names":["describe","it","getByTestId","render","expect","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMAA,EAAAA,QAAQ,CAAA,qBAAA,EAAuB,MAAI;AAC/BC,IAAAA,EAAE,CAAA,yCAAA,EAA4C,YAAY;AACtD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,IAAI,EAAxC,OAAA;AAAiD,QAAA,MAAM,EAAC;AAAxD,OAAA,CADiBA,CAArB;AAGAC,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJH,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,yCAAA,EAA4C,YAAY;AACtD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,IAAI,EAAxC,OAAA;AAAiD,QAAA,MAAM,EAAC;AAAxD,OAAA,CADiBA,CAArB;AAGAC,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,YAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJH,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,0CAAA,EAA6C,YAAY;AACvD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,MAAM,EAAC;AAA3C,OAAA,CADiBA,CAArB;AAGAC,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,YAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJH,KAAE,CAAFA;AAjBJD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { NotificationDot } from '..';\nimport COLORS from '../../styles/colors';\n\ndescribe('<NotificationDot />',()=>{\n    it('renders positive small notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='positive' size='small' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.correct_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n\n    it('renders critical large notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' size='large' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + COLORS.white);\n    });\n\n    it('renders critical medium notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n});"],"file":"NotificationDot.test.js"}
+{"version":3,"sources":["../../../../src/NotificationDot/__tests__/NotificationDot.test.tsx"],"names":["describe","it","getByTestId","render","Size","expect","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAOAA,EAAAA,QAAQ,CAAA,qBAAA,EAAuB,MAAI;AAC/BC,IAAAA,EAAE,CAAA,yCAAA,EAA4C,YAAY;AACtD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,IAAI,EAAEC,YAA1C,KAAA;AAAsD,QAAA,MAAM,EAAC;AAA7D,OAAA,CADiBD,CAArB;AAGAE,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,WAAAA;AACAA,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJJ,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,yCAAA,EAA4C,YAAY;AACtD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,IAAI,EAAEC,YAA1C,KAAA;AAAsD,QAAA,MAAM,EAAC;AAA7D,OAAA,CADiBD,CAArB;AAGAE,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,YAAAA;AACAA,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJJ,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,0CAAA,EAA6C,YAAY;AACvD,YAAK;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aACvB,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAiB,QAAA,OAAO,EAAxB,UAAA;AAAoC,QAAA,MAAM,EAAC;AAA3C,OAAA,CADiBA,CAArB;AAGAE,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAiEC,iBAAjED,YAAAA;AACAA,MAAAA,MAAM,CAACH,WAAW,CAAlBG,QAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,QAAAA,EAAwD,eAAeC,iBAAvED,KAAAA;AALJJ,KAAE,CAAFA;AAjBJD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { NotificationDot } from '..';\nimport { Size } from '../../types';\nimport COLORS from '../../styles/colors';\n\ndescribe('<NotificationDot />',()=>{\n    it('renders positive small notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='positive' size={Size.Small} testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.correct_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n\n    it('renders critical large notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' size={Size.Large} testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + COLORS.white);\n    });\n\n    it('renders critical medium notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n});"],"file":"NotificationDot.test.js"}

package/dist/umd/Paginator/Paginator.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../styles", "../icons/systemicons/SystemIcons", "../styles/typography"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../styles", "../icons/systemicons/SystemIcons", "../styles/typography", "../styles/z-indexes", "react-router", "../Button"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../styles/typography"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../styles/typography"), require("../styles/z-indexes"), require("react-router"), require("../Button"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.styles, global.SystemIcons, global.typography);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.styles, global.SystemIcons, global.typography, global.zIndexes, global.reactRouter, global.Button);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography, _zIndexes, _reactRouter, _Button) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -96,7 +96,7 @@
 `;
   const Item = _styledComponents2.default.li`
   width: 48px;
-  height: 45px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -108,29 +108,30 @@
     width: 100%;
     height: 100%;
     text-decoration: none;
-    border-bottom: 3px solid transparent;
 
     ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
 
     &:focus,
     &:focus-within {
+      z-index: ${_zIndexes.Z_INDEXES.focus};
       box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
       outline-width: 0;
     }
   }
-
   & > a:hover {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
     color: ${_styles.COLORS.primary_800};
     background-color: ${_styles.COLORS.primary_20};
     box-shadow: none;
   }
   & > a:active {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     color: ${_styles.COLORS.primary_700};
     background-color: ${_styles.COLORS.primary_100};
     box-shadow: none;
   }
-
   & > a.active {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     color: ${_styles.COLORS.neutral_800};
     background-color: ${_styles.COLORS.neutral_20};
     cursor: default;
@@ -146,22 +147,36 @@
   }
 `;
   const Dots = (0, _styledComponents2.default)(Item)`
-  padding-top: 1%;
   cursor: not-allowed;
+  &:after{
+    ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
+    content: '...';
+  }
 `;
   const ItemContent = (0, _styledComponents2.default)('div')`
-  width: 100%;
   text-align:center;
-  display: table-cell;
-  vertical-align:middle;
-`;
-  const ItemSelected = (0, _styledComponents2.default)('div')`
+  display: flex;
   justify-content: center;
-  margin: 0 20%;
-  border-radius: 4px;
-  text-align: center;
-  height: 4px;
-  background-color: ${_styles.COLORS.primary_500}
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  
+  &.active:after{
+    content: '';
+    position: absolute;
+    bottom: 4px;
+    width: 32px;
+    border-radius: 4px;
+    height: 4px;
+    background-color: ${_styles.COLORS.primary_500}
+  }
+  &.active:hover:after{
+    background-color: ${_styles.COLORS.primary_700}
+  }
+  &.active:active:after{
+    background-color: ${_styles.COLORS.primary_800}
+  }
 `;
 
   const Step = ({
@@ -170,30 +185,22 @@
     disabled = false,
     page,
     onPageChange,
-    testId
+    id
   }) => {
-    if (disabled) return /*#__PURE__*/React.createElement(Item, {
-      style: {
-        cursor: 'not-allowed'
-      },
-      "data-testid": `${testId}_Disabled`
-    }, up ? /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {
-      size: "20",
-      color: _styles.COLORS.neutral_300
-    }) : /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, {
-      size: "20",
-      color: _styles.COLORS.neutral_300
-    }));
-    return /*#__PURE__*/React.createElement(Item, {
-      "data-testid": `${testId}_Enabled`
-    }, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
-      to: target,
-      onClick: () => {
-        if (onPageChange) onPageChange(page);
-      }
-    }, up ? /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {
-      size: "20"
-    }) : /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, null)));
+    const history = (0, _reactRouter.useHistory)();
+
+    const handleButtonClick = () => {
+      history.push(target);
+      onPageChange && onPageChange(page);
+    };
+
+    return /*#__PURE__*/React.createElement(_Button.IconButton, {
+      id: id,
+      action: event => handleButtonClick(),
+      variant: 'secondary',
+      shape: 'circular',
+      disabled: disabled
+    }, up ? /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, null) : /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, null));
   };
 
   const Paginator = ({
@@ -233,29 +240,31 @@
       onPageChange: () => {
         if (onPageChange) onPageChange(currentPage - 1);
       },
-      testId: "Test-StepLeft"
+      id: "paginator-left"
     }), pages.findIndex(item => item === 1) === -1 && /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
       to: `${baseUrl}/1`,
       onClick: () => {
         if (onPageChange) onPageChange(1);
       }
-    }, /*#__PURE__*/React.createElement(ItemContent, null, /*#__PURE__*/React.createElement("span", null, "1"), currentPage === 1 && /*#__PURE__*/React.createElement(ItemSelected, null)))), currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && /*#__PURE__*/React.createElement(Dots, null, /*#__PURE__*/React.createElement(_SystemIcons.MoreHorizontal, {
-      color: _styles.COLORS.neutral_600
-    })), pages.map(page => /*#__PURE__*/React.createElement(Item, {
+    }, /*#__PURE__*/React.createElement(ItemContent, {
+      className: currentPage === 1 ? 'active' : ''
+    }, /*#__PURE__*/React.createElement("span", null, "1")))), currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && /*#__PURE__*/React.createElement(Dots, null), pages.map(page => /*#__PURE__*/React.createElement(Item, {
       key: page
     }, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
       to: `${baseUrl}/${page}`,
       onClick: () => {
         if (onPageChange) onPageChange(page);
       }
-    }, /*#__PURE__*/React.createElement(ItemContent, null, /*#__PURE__*/React.createElement("span", null, page), currentPage === page && /*#__PURE__*/React.createElement(ItemSelected, null))))), pageCount > 5 && currentPage <= pageCount - 3 && /*#__PURE__*/React.createElement(Dots, null, /*#__PURE__*/React.createElement(_SystemIcons.MoreHorizontal, {
-      color: _styles.COLORS.neutral_600
-    })), pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
+    }, /*#__PURE__*/React.createElement(ItemContent, {
+      className: currentPage === page ? 'active' : ''
+    }, /*#__PURE__*/React.createElement("span", null, page))))), pageCount > 5 && currentPage <= pageCount - 3 && /*#__PURE__*/React.createElement(Dots, null), pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
       to: `${baseUrl}/${pageCount}`,
       onClick: () => {
         if (onPageChange) onPageChange(pageCount);
       }
-    }, /*#__PURE__*/React.createElement(ItemContent, null, /*#__PURE__*/React.createElement("span", null, pageCount), currentPage === pageCount && /*#__PURE__*/React.createElement(ItemSelected, null)))), /*#__PURE__*/React.createElement(Step, {
+    }, /*#__PURE__*/React.createElement(ItemContent, {
+      className: currentPage === pageCount ? 'active' : ''
+    }, /*#__PURE__*/React.createElement("span", null, pageCount)))), /*#__PURE__*/React.createElement(Step, {
       up: true,
       target: `${baseUrl}/${currentPage + 1}`,
       page: currentPage + 1,
@@ -263,7 +272,7 @@
       onPageChange: () => {
         if (onPageChange) onPageChange(currentPage + 1);
       },
-      testId: "Test-StepRight"
+      id: "paginator-right"
     })));
   };
 

package/dist/umd/Paginator/Paginator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","COLORS","primary_800","primary_20","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","ItemSelected","primary_500","pageCount","currentPage","baseUrl","onPageChange","Step","up","target","disabled","testId","cursor","neutral_300","Paginator","pages","from","to","i","item","neutral_600","page"],"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, MoreHorizontal} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\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: 45px;\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    border-bottom: 3px solid transparent;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n\n  & > a:hover {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n    box-shadow: none;\n  }\n  & > a:active {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n  }\n\n  & > a.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  padding-top: 1%;\n  cursor: not-allowed;\n`;\n\nconst ItemContent = styled('div')`\n  width: 100%;\n  text-align:center;\n  display: table-cell;\n  vertical-align:middle;\n`\nconst ItemSelected = styled('div')`\n  justify-content: center;\n  margin: 0 20%;\n  border-radius: 4px;\n  text-align: center;\n  height: 4px;\n  background-color: ${COLORS.primary_500}\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  testId,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  testId?: string;\n}) => {\n  if (disabled)\n    return (\n      <Item style={{ cursor: 'not-allowed' }} data-testid={`${testId}_Disabled`}>\n        {up ? <ChevronRight size=\"20\" color={COLORS.neutral_300} /> : <ChevronLeft size=\"20\" color={COLORS.neutral_300} />}\n      </Item>\n    );\n  return (\n    <Item data-testid={`${testId}_Enabled`}>\n      <NavLink\n        to={target}\n        onClick={() => {\n          if (onPageChange) onPageChange(page);\n        }}>\n        {up ? <ChevronRight size=\"20\" /> : <ChevronLeft />}\n      </NavLink>\n    </Item>\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\n          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          testId=\"Test-StepLeft\"\n        />\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>\n                 <span>1</span>\n                 {currentPage === 1 && <ItemSelected />}\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\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>\n                 <span>{page}</span>\n                 {currentPage === page && <ItemSelected />}\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots>\n            <MoreHorizontal color={COLORS.neutral_600} />\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>\n                 <span>{pageCount}</span>\n                 {currentPage === pageCount && <ItemSelected />}\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step\n          up\n          target={`${baseUrl}/${currentPage + 1}`}\n          page={currentPage + 1}\n          disabled={currentPage === pageCount}\n          onPageChange={() => {\n            if (onPageChange) onPageChange(currentPage + 1);\n          }}\n          testId=\"Test-StepRight\"\n        />\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}
+{"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","COLORS","Z_INDEXES","focus","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","pageCount","currentPage","baseUrl","onPageChange","Step","up","target","disabled","id","history","handleButtonClick","event","Paginator","pages","from","to","i","item","page"],"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/umd/Paginator/__tests__/Paginator.test.js

@@ -86,7 +86,7 @@
       history.push(route);
       const {
         queryByText,
-        getByTestId
+        container
       } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_reactRouter.Router, {
         history: history
       }, /*#__PURE__*/_react2.default.createElement(_index.Paginator, {
@@ -96,11 +96,11 @@
         onPageChange: () => {}
       })));
       expect(queryByText('1')).toBeDefined();
-      expect(getByTestId('Test-StepLeft_Disabled')).toBeDefined();
-      expect(getByTestId('Test-StepRight_Enabled')).toBeDefined();
+      expect(container.querySelector('#paginator-left')).toBeDefined();
+      expect(container.querySelector('#paginator-right')).toBeDefined();
       expect(queryByText('6')).toBeDefined(); // Click on stepper to the right. Expect to be taken from 1 to 2
 
-      getByTestId('Test-StepRight_Enabled').children[0].click();
+      container.querySelector('#paginator-right')?.click();
       expect(history.location.pathname).toBe('/2'); // Click directly on 6. Expect to be taken to /6
 
       queryByText('6')?.click();

package/dist/umd/Paginator/__tests__/Paginator.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Paginator/__tests__/Paginator.test.tsx"],"names":["jest","useLocation","pathname","describe","it","history","route","getByTestId","render","expect","queryByText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOAA,EAAAA,IAAI,CAAJA,IAAAA,CAAAA,kBAAAA,EAA8B,MAAA,aAAA,CAAA,aAAA,CAAA,EAAA,EACzBA,IAAI,CAAJA,aAAAA,CADyB,kBACzBA,CADyB,CAAA,EAAA,EAAA,EAAA;AAE5BC,IAAAA,WAAW,EAAE,OAAO;AAClBC,MAAAA,QAAQ,EAAE;AADQ,KAAP;AAFe,GAAA,CAA9BF;AAOAG,EAAAA,QAAQ,CAAA,eAAA,EAAkB,MAAM;AAC9BC,IAAAA,EAAE,CAAA,mBAAA,EAAsB,YAAY;AAClC,YAAMC,OAAO,GAAb,mCAAA;AACA,YAAMC,KAAK,GAAX,IAAA;AACAD,MAAAA,OAAO,CAAPA,IAAAA,CAAAA,KAAAA;AACA,YAAM;AAAA,QAAA,WAAA;AAAeE,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,mBAAA,EAAA;AAAQ,QAAA,OAAO,EAAEH;AAAjB,OAAA,EAAA,aACE,gBAAA,aAAA,CAAA,gBAAA,EAAA;AAAW,QAAA,SAAS,EAApB,CAAA;AAAyB,QAAA,WAAW,EAApC,CAAA;AAAyC,QAAA,OAAO,EAAhD,EAAA;AAAoD,QAAA,YAAY,EAAE,MAAM,CAAE;AAA1E,OAAA,CADF,CADmCG,CAArC;AAKAC,MAAAA,MAAM,CAACC,WAAW,CAAlBD,GAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,wBAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,wBAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACC,WAAW,CAAlBD,GAAkB,CAAZ,CAANA,CAZkC,WAYlCA,GAZkC,CAclC;;AACCF,MAAAA,WAAW,CAAXA,wBAAW,CAAXA,CAAAA,QAAAA,CAAD,CAACA,EAAD,KAACA;AACDE,MAAAA,MAAM,CAACJ,OAAO,CAAPA,QAAAA,CAAPI,QAAM,CAANA,CAAAA,IAAAA,CAhBkC,IAgBlCA,EAhBkC,CAkBlC;;AACAC,MAAAA,WAAW,CAAXA,GAAW,CAAXA,EAAAA,KAAAA;AACAD,MAAAA,MAAM,CAACJ,OAAO,CAAPA,QAAAA,CAAPI,QAAM,CAANA,CAAAA,IAAAA,CAAAA,IAAAA;AApBFL,KAAE,CAAFA;AADFD,GAAQ,CAARA","sourcesContent":["import React, { useState } from 'react';\nimport { render } from '@testing-library/react';\nimport { Paginator } from '../index';\nimport { Router } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport 'jest-styled-components';\n\njest.mock('react-router-dom', () => ({\n  ...jest.requireActual('react-router-dom'),\n  useLocation: () => ({\n    pathname: 'localhost:3000/test',\n  }),\n}));\n\ndescribe('<Paginator />', () => {\n  it('Renders Paginator', async () => {\n    const history = createMemoryHistory();\n    const route = '/1';\n    history.push(route);\n    const { queryByText, getByTestId } = render(\n      <Router history={history}>\n        <Paginator pageCount={6} currentPage={1} baseUrl=\"\" onPageChange={() => {}} />\n      </Router>,\n    );\n    expect(queryByText('1')).toBeDefined();\n    expect(getByTestId('Test-StepLeft_Disabled')).toBeDefined();\n    expect(getByTestId('Test-StepRight_Enabled')).toBeDefined();\n    expect(queryByText('6')).toBeDefined();\n\n    // Click on stepper to the right. Expect to be taken from 1 to 2\n    (getByTestId('Test-StepRight_Enabled').children[0] as HTMLElement).click();\n    expect(history.location.pathname).toBe('/2');\n\n    // Click directly on 6. Expect to be taken to /6\n    queryByText('6')?.click();\n    expect(history.location.pathname).toBe('/6');\n  });\n});\n"],"file":"Paginator.test.js"}
+{"version":3,"sources":["../../../../src/Paginator/__tests__/Paginator.test.tsx"],"names":["jest","useLocation","pathname","describe","it","history","route","container","render","expect","queryByText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOAA,EAAAA,IAAI,CAAJA,IAAAA,CAAAA,kBAAAA,EAA8B,MAAA,aAAA,CAAA,aAAA,CAAA,EAAA,EACzBA,IAAI,CAAJA,aAAAA,CADyB,kBACzBA,CADyB,CAAA,EAAA,EAAA,EAAA;AAE5BC,IAAAA,WAAW,EAAE,OAAO;AAClBC,MAAAA,QAAQ,EAAE;AADQ,KAAP;AAFe,GAAA,CAA9BF;AAOAG,EAAAA,QAAQ,CAAA,eAAA,EAAkB,MAAM;AAC9BC,IAAAA,EAAE,CAAA,mBAAA,EAAsB,YAAY;AAClC,YAAMC,OAAO,GAAb,mCAAA;AACA,YAAMC,KAAK,GAAX,IAAA;AACAD,MAAAA,OAAO,CAAPA,IAAAA,CAAAA,KAAAA;AACA,YAAM;AAAA,QAAA,WAAA;AAAeE,QAAAA;AAAf,UAA6BC,qBAAM,aACvC,gBAAA,aAAA,CAAA,mBAAA,EAAA;AAAQ,QAAA,OAAO,EAAEH;AAAjB,OAAA,EAAA,aACE,gBAAA,aAAA,CAAA,gBAAA,EAAA;AAAW,QAAA,SAAS,EAApB,CAAA;AAAyB,QAAA,WAAW,EAApC,CAAA;AAAyC,QAAA,OAAO,EAAhD,EAAA;AAAoD,QAAA,YAAY,EAAE,MAAM,CAAE;AAA1E,OAAA,CADF,CADiCG,CAAnC;AAMAC,MAAAA,MAAM,CAACC,WAAW,CAAlBD,GAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,SAAS,CAATA,aAAAA,CAAPE,iBAAOF,CAAD,CAANE,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,SAAS,CAATA,aAAAA,CAAPE,kBAAOF,CAAD,CAANE,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACC,WAAW,CAAlBD,GAAkB,CAAZ,CAANA,CAbkC,WAalCA,GAbkC,CAelC;;AACCF,MAAAA,SAAS,CAATA,aAAAA,CAAD,kBAACA,GAAD,KAACA;AACDE,MAAAA,MAAM,CAACJ,OAAO,CAAPA,QAAAA,CAAPI,QAAM,CAANA,CAAAA,IAAAA,CAjBkC,IAiBlCA,EAjBkC,CAmBlC;;AACAC,MAAAA,WAAW,CAAXA,GAAW,CAAXA,EAAAA,KAAAA;AACAD,MAAAA,MAAM,CAACJ,OAAO,CAAPA,QAAAA,CAAPI,QAAM,CAANA,CAAAA,IAAAA,CAAAA,IAAAA;AArBFL,KAAE,CAAFA;AADFD,GAAQ,CAARA","sourcesContent":["import React, { useState } from 'react';\nimport { render } from '@testing-library/react';\nimport { Paginator } from '../index';\nimport { Router } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport 'jest-styled-components';\n\njest.mock('react-router-dom', () => ({\n  ...jest.requireActual('react-router-dom'),\n  useLocation: () => ({\n    pathname: 'localhost:3000/test',\n  }),\n}));\n\ndescribe('<Paginator />', () => {\n  it('Renders Paginator', async () => {\n    const history = createMemoryHistory();\n    const route = '/1';\n    history.push(route);\n    const { queryByText, container } = render(\n      <Router history={history}>\n        <Paginator pageCount={6} currentPage={1} baseUrl=\"\" onPageChange={() => {}} />\n      </Router>,\n    );\n\n    expect(queryByText('1')).toBeDefined();\n    expect(container.querySelector('#paginator-left')).toBeDefined();\n    expect(container.querySelector('#paginator-right')).toBeDefined();\n    expect(queryByText('6')).toBeDefined();\n\n    // Click on stepper to the right. Expect to be taken from 1 to 2\n    (container.querySelector('#paginator-right') as HTMLElement)?.click();\n    expect(history.location.pathname).toBe('/2');\n\n    // Click directly on 6. Expect to be taken to /6\n    queryByText('6')?.click();\n    expect(history.location.pathname).toBe('/6');\n  });\n});\n"],"file":"Paginator.test.js"}

package/dist/umd/Switcher/MobileSwitcherMenu.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../Button", "../icons/systemicons/SystemIcons", "../GlobalNavigationBar/mobile/CommonStyles", "./SwitcherMenuItem", "../styles/typography"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../Button", "../icons/systemicons/SystemIcons", "../GlobalNavigationBar/mobile/CommonStyles", "./SwitcherMenuItem", "../styles/typography", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../GlobalNavigationBar/mobile/CommonStyles"), require("./SwitcherMenuItem"), require("../styles/typography"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../GlobalNavigationBar/mobile/CommonStyles"), require("./SwitcherMenuItem"), require("../styles/typography"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Button, global.SystemIcons, global.CommonStyles, global.SwitcherMenuItem, global.typography);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Button, global.SystemIcons, global.CommonStyles, global.SwitcherMenuItem, global.typography, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Button, _SystemIcons, _CommonStyles, _SwitcherMenuItem, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Button, _SystemIcons, _CommonStyles, _SwitcherMenuItem, _typography, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -91,7 +91,7 @@
   animation: ${_CommonStyles.flowDown} 0.2s ease-in-out;
   position: absolute;
   border-radius: 4px;
-  z-index: 100;
+  z-index: ${_zIndexes.Z_INDEXES.off_canvas};
   height: 100%;
   width: 320px;
   padding-inline-start: 0;

package/dist/umd/Switcher/MobileSwitcherMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentSStyling","ComponentTextStyle","LabelLine","span","neutral_20","header","elementsHeader","clickMenuAction","elements","MobileSwitcherMenu","React","e","document","element","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: 100;\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
+{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentSStyling","ComponentTextStyle","LabelLine","span","neutral_20","header","elementsHeader","clickMenuAction","elements","MobileSwitcherMenu","React","e","document","element","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}