@laerdal/life-react-components 1.2.2-dev.11 → 1.2.2-dev.13

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","id","showModal","closeModal","children","modalHeight","modalWidth","modalOverflow","padding","minWidth","maxWidth","ModalContainer","React","componentDidMount","ReactModal","document","head","style","render","sizes","stylesConfiguration","styles"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: 100;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
+{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","id","showModal","closeModal","children","modalHeight","modalWidth","modalOverflow","padding","minWidth","maxWidth","ModalContainer","React","componentDidMount","ReactModal","document","head","style","render","sizes","stylesConfiguration","styles"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n\n.ReactModal__Body--open,\n.ReactModal__Html--open {\n  overflow: hidden;\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.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", "react-router", "../Button"], 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"), require("react-router"), require("../Button"));
+    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, global.reactRouter, global.Button);
+    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, _reactRouter, _Button) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography, _zIndexes, _reactRouter, _Button) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -113,22 +113,25 @@
 
     &: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;
-      z-index: 1;
     }
   }
   & > 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;

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","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 {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      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n      z-index: 1;\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  & > 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  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"}
+{"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/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"}

package/dist/umd/Switcher/SwitcherMenuItem.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "styled-components", "../styles", "../styles/typography"], factory);
+    define(["exports", "react", "styled-components", "../styles", "../styles/typography", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("styled-components"), require("../styles"), require("../styles/typography"));
+    factory(exports, require("react"), require("styled-components"), require("../styles"), require("../styles/typography"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.styledComponents, global.styles, global.typography);
+    factory(mod.exports, global.react, global.styledComponents, global.styles, global.typography, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _styledComponents, _styles, _typography) {
+})(this, function (exports, _react, _styledComponents, _styles, _typography, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -107,6 +107,7 @@
   }
 
   &.active:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     font-weight: bold;
     color: ${_styles.COLORS.neutral_800};
 
@@ -125,6 +126,7 @@
   }
 
   &:hover:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
     color: ${_styles.COLORS.primary_600};
     background-color: ${_styles.COLORS.primary_20};
 
@@ -134,6 +136,7 @@
   }
 
   &:active:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     color: ${_styles.COLORS.primary_800};
     background-color: ${_styles.COLORS.primary_100};
     box-shadow: none;
@@ -148,6 +151,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;
   }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["StyledSwitcherItem","styled","div","ComponentMStyling","ComponentTextStyle","COLORS","neutral_800","primary_500","neutral_300","neutral_100","primary_600","primary_20","primary_800","primary_100","A","a","SwitcherMenuItem","as","testId","window","url","disabled","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,kBAAkB,GAAGC,2BAAOC,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,mCAAkBC,2BAAD,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,aAAaE,eAAOC,WAAY;AAChC;AACA;AACA,0BAA0BD,eAAOE,WAAY;AAC7C;AACA;AACA;AACA,cAAcF,eAAOC,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaD,eAAOG,WAAY;AAChC,wBAAwBH,eAAOI,WAAY;AAC3C;AACA;AACA;AACA,aAAaJ,eAAOK,WAAY;AAChC,wBAAwBL,eAAOM,UAAW;AAC1C;AACA;AACA,cAAcN,eAAOK,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaL,eAAOO,WAAY;AAChC,wBAAwBP,eAAOQ,WAAY;AAC3C;AACA;AACA;AACA,0BAA0BR,eAAOE,WAAY;AAC7C;AACA;AACA;AACA,cAAcF,eAAOO,WAAY;AACjC;AACA;AACA;AACA;AACA,8BAA8BP,eAAOE,WAAY;AACjD;AACA;AAzEA,CAAA;AA4EA,QAAMO,CAAC,GAAGb,2BAAOc,CAAjB,EAAA;;AAEA,QAAMC,gBAAgB,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,GAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAA8BC,IAAAA,EAAE,GAAhC,CAAA;AAAsCC,IAAAA;AAAtC,GAAD,KAAA,aACvB,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,IAAA,OAAO,EAAE,MAAOC,MAAM,CAANA,QAAAA,CAAAA,IAAAA,GAAuBC,GAAG,IAD5C,EAAA;AAEE,IAAA,EAAE,EAFJ,EAAA;AAGE,IAAA,IAAI,EAAEA,GAAG,IAHX,EAAA;AAIE,IAAA,MAAM,EAJR,SAAA;AAKE,IAAA,GAAG,EALL,KAAA;AAME,IAAA,SAAS,EAAEC,QAAQ,GAAA,UAAA,GANrB,EAAA;AAOE,mBAAaH;AAPf,GAAA,EAQGI,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,IAAA,IAAI,EAAV,MAAA;AAAkB,IAAA,KAAK,EAAC;AAAxB,GAAA,CARX,EADF,KACE,CADF;;oBAcA,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst StyledSwitcherItem = styled.div`\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.primary_800};\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  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}
+{"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["StyledSwitcherItem","styled","div","ComponentMStyling","ComponentTextStyle","COLORS","Z_INDEXES","active","neutral_800","primary_500","neutral_300","neutral_100","hover","primary_600","primary_20","primary_800","primary_100","focus","A","a","SwitcherMenuItem","as","testId","window","url","disabled","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,kBAAkB,GAAGC,2BAAOC,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,mCAAkBC,2BAAD,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,eAAeG,oBAAUC,MAAO;AAChC;AACA,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA,0BAA0BH,eAAOI,WAAY;AAC7C;AACA;AACA;AACA,cAAcJ,eAAOG,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaH,eAAOK,WAAY;AAChC,wBAAwBL,eAAOM,WAAY;AAC3C;AACA;AACA;AACA,eAAeL,oBAAUM,KAAM;AAC/B,aAAaP,eAAOQ,WAAY;AAChC,wBAAwBR,eAAOS,UAAW;AAC1C;AACA;AACA,cAAcT,eAAOQ,WAAY;AACjC;AACA;AACA;AACA;AACA,eAAeP,oBAAUC,MAAO;AAChC,aAAaF,eAAOU,WAAY;AAChC,wBAAwBV,eAAOW,WAAY;AAC3C;AACA;AACA;AACA,0BAA0BX,eAAOI,WAAY;AAC7C;AACA;AACA;AACA,cAAcJ,eAAOU,WAAY;AACjC;AACA;AACA;AACA;AACA,eAAeT,oBAAUW,KAAM;AAC/B,8BAA8BZ,eAAOI,WAAY;AACjD;AACA;AA7EA,CAAA;AAgFA,QAAMS,CAAC,GAAGjB,2BAAOkB,CAAjB,EAAA;;AAEA,QAAMC,gBAAgB,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,GAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAA8BC,IAAAA,EAAE,GAAhC,CAAA;AAAsCC,IAAAA;AAAtC,GAAD,KAAA,aACvB,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,IAAA,OAAO,EAAE,MAAOC,MAAM,CAANA,QAAAA,CAAAA,IAAAA,GAAuBC,GAAG,IAD5C,EAAA;AAEE,IAAA,EAAE,EAFJ,EAAA;AAGE,IAAA,IAAI,EAAEA,GAAG,IAHX,EAAA;AAIE,IAAA,MAAM,EAJR,SAAA;AAKE,IAAA,GAAG,EALL,KAAA;AAME,IAAA,SAAS,EAAEC,QAAQ,GAAA,UAAA,GANrB,EAAA;AAOE,mBAAaH;AAPf,GAAA,EAQGI,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,IAAA,IAAI,EAAV,MAAA;AAAkB,IAAA,KAAK,EAAC;AAAxB,GAAA,CARX,EADF,KACE,CADF;;oBAcA,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst StyledSwitcherItem = styled.div`\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.primary_800};\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  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}

package/dist/umd/Table/Table.js

@@ -463,7 +463,7 @@
       cellSpacing: "0",
       "data-testid": "TestTable"
     }, renderHeader(), renderBody(), renderFooter()), showLoadingIndicator && /*#__PURE__*/React.createElement(_TableStyles.TableLoadingIndicator, null, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
-      size: "medium",
+      size: _types.Size.Medium,
       color: "#ffffff"
     })));
   };