@laerdal/life-react-components 1.2.2-dev.7 → 1.2.2-dev.8

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", "../types", ".."], factory);
+    define(["exports", "prop-types", "react", "styled-components", ".."], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../types"), require(".."));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require(".."));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.types, global._);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global._);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _types, _) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -80,22 +80,22 @@
   }
 
   const ContentWrapper = _styledComponents2.default.div`
-  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'};
+  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'};
   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 === _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};
+  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};
   box-sizing: border-box;
 `;
 
   const NotificationDot = ({
-    size = _types.Size.Medium,
+    size = 'medium',
     variant,
     testId
   }) => {
@@ -110,6 +110,7 @@
   };
 
   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":["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"}
+{"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"}

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", "..", "../../types", "../../styles/colors", "jest-styled-components"], factory);
+    define(["react", "@testing-library/react", "..", "../../styles/colors", "jest-styled-components"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(require("react"), require("@testing-library/react"), require(".."), require("../../types"), require("../../styles/colors"), require("jest-styled-components"));
+    factory(require("react"), require("@testing-library/react"), require(".."), require("../../styles/colors"), require("jest-styled-components"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(global.react, global.react, global._, global.types, global.colors, global.jestStyledComponents);
+    factory(global.react, global.react, global._, global.colors, global.jestStyledComponents);
     global.undefined = mod.exports;
   }
-})(this, function (_react, _react3, _, _types, _colors) {
+})(this, function (_react, _react3, _, _colors) {
   "use strict";
 
   var _react2 = _interopRequireDefault(_react);
@@ -29,7 +29,7 @@
         getByTestId
       } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.NotificationDot, {
         variant: "positive",
-        size: _types.Size.Small,
+        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: _types.Size.Large,
+        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","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"}
+{"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"}

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"], 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"));
   } 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.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -114,23 +114,27 @@
 
     &: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;

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","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';\nimport {Z_INDEXES} from '../styles/z-indexes';\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      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\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\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  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"}

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: _types.Size.Medium,
+      size: "medium",
       color: "#ffffff"
     })));
   };