npm - @laerdal/life-react-components - Versions diffs - 1.2.2-dev.8 → 1.2.2-dev.9 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

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

	@@ -1 +1 @@
1	- {"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":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAYA~~,QAAMA,IAAI,GAAGC,2BAAOC,EAAG;AACvB;AACA;AACA,sBAAsBC,eAAOC,KAAM;AACnC;AACA;AACA,uBAAuBC,sBAAS;AAChC,eAAeA,sBAAS;AACxB;AACA;AACA~~,aAAaC,oBAAUC,UAAW~~;~~AAClC~~;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,wBAAiB;AAxBrB,CAAA;AA2BA,QAAMC,WAAW,~~GAAGV~~,~~2BAAOW~~,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,CAAA;AAWA,QAAMC,eAAe,~~GAAGZ~~,2BAAOC,EAAG;AAClC;AACA;AACA;AACA;AACA;AACA,~~IAAIY~~,wCAA2B;AAN/B,CAAA;AASA,QAAMC,GAAG,~~GAAGd~~,~~2BAAOe~~,GAAI;AACvB;AACA;AACA;AACA;AACA,~~WAAWb~~,~~eAAOc~~,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBC,2BAAD,OAAjBD,EAAiB,SAAjBA,CAAyD;AAC/D;AAfA,CAAA;AAkBA,QAAME,SAAS,~~GAAGnB~~,~~2BAAOoB~~,IAAK;AAC9B;AACA,~~sBAAsBlB~~,~~eAAOmB~~,UAAW;AACxC;AACA;AACA;AALA,CAAA;;AAeA,QAAMK,kBAAkB,GAAG,CAAC;AAAA,IAAA,MAAA;AAAA,IAAA,cAAA;AAAA,IAAA,eAAA;AAA2CD,IAAAA;AAA3C,GAAD,KAAkE;AAC3FE,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,eAAA,cAAA,CAAA,CAAA,EAAgC;AAC9B,YAAIC,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AACpBJ,UAAAA,eAAe;AAChB;AACF;;AAEDK,MAAAA,QAAQ,CAARA,gBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AACA,aAAO,MAAM;AACXA,QAAAA,QAAQ,CAARA,mBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AADF,OAAA;AARFF,KAAAA,EAWG,CAXHA,eAWG,CAXHA;AAaA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,OAAO,EAAE,MAAM,CAArB,CAAA;AAAyB,MAAA,IAAI,EAA7B,MAAA;AAAqC,yBAAgB;AAArD,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,OAAO,EAAnB,WAAA;AAAgC,MAAA,KAAK,EAArC,UAAA;AAAiD,MAAA,MAAM,EAAvD,eAAA;AAA0E,MAAA,cAAc,EAAE;AAA1F,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,IAAI,EAAnB,MAAA;AAA2B,MAAA,KAAK,~~EAAEzB~~,~~eAAOc~~;AAAzC,KAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAJF,MAIE,CAJF,EAAA,aAKE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,OAAO,EAAnB,WAAA;AAAgC,MAAA,KAAK,EAArC,UAAA;AAAiD,MAAA,MAAM,EAAvD,eAAA;AAA0E,MAAA,cAAc,EAAE;AAA1F,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,MAAA,IAAI,EAAC;AAAZ,KAAA,CADF,CADF,CALF,CADF,EAYGS,QAAQ,IAAIA,QAAQ,EAARA,MAAAA,GAAZA,CAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EADF,cACE,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAA,EACG,QAAQ,EAAR,GAAA,CAAeK,OAAD,IAAA,aACb,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAkB,MAAA,GAAG,EAAEA,OAAO,EAA9B,EAAA;AAAoC,MAAA,KAAK,EAAEA,OAAO,EAAlD,KAAA;AAA2D,MAAA,IAAI,EAAEA,OAAO,CAACC;AAAzE,KAAA,CADD,CADH,CAFF,CAbJ,CADF;AAdF,GAAA;;;AANET,IAAAA,M;AACAC,IAAAA,c;AACAC,IAAAA,e;AACAC,IAAAA,Q;;oBA4CF,kB","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"}
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"}

package/dist/umd/Switcher/SwitcherMenuItem.js CHANGED Viewed

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

	@@ -1 +1 @@
1	- {"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"}
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"}

package/dist/umd/Tabs/HorizontalTabs.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "../styles", "styled-components", "../styles/typography", "../styles/z-indexes"], factory);
+    define(["exports", "prop-types", "react", "../styles", "styled-components", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("../styles"), require("styled-components"), require("../styles/typography"), require("../styles/z-indexes"));
+    factory(exports, require("prop-types"), require("react"), require("../styles"), require("styled-components"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styles, global.styledComponents, global.typography, global.zIndexes);
+    factory(mod.exports, global.propTypes, global.react, global.styles, global.styledComponents, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styles, _styledComponents, _typography, _zIndexes) {
+})(this, function (exports, _propTypes, _react, _styles, _styledComponents, _typography) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -100,7 +100,8 @@
   const TabSideFill = _styledComponents2.default.div`
   position: absolute;
   border-bottom: 1px solid ${_styles.COLORS.neutral_100};
-  bottom: 0;
+  height: Calc(100% - 1px);
+  z-index: 1;
   width: 100%;
   &.fill {
@@ -111,6 +112,7 @@
   color: ${_styles.COLORS.neutral_800};
   border: none;
   background-color: transparent;
+  z-index: 2;
   cursor: pointer;
   padding: 0px;
@@ -128,7 +130,6 @@
   }
   &:hover {
-    z-index: ${_zIndexes.Z_INDEXES.hover};
     div {
       background: ${_styles.COLORS.primary_20};
       color: ${_styles.COLORS.primary_700};
@@ -141,14 +142,8 @@
       }
     }
   }
-  &.selected{
-    z-index: ${_zIndexes.Z_INDEXES.active};
-  }
   &:focus {
-    z-index: ${_zIndexes.Z_INDEXES.focus};
-    outline: none;
     div {
       color: ${_styles.COLORS.primary_800};
       box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;

package/dist/umd/Tabs/HorizontalTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","neutral_300","Z_INDEXES","hover","primary_20","primary_700","active","focus","primary_800","focus_25","primary_500","primary_100","ComponentXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","size","tabs","sideFill","fullWidth","onTabChange","value","selected","to","disabled","HorizontalTabs","doTabChange","document","tab","index","width","length"],"mappings":"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","sourcesContent":["/*\n Import React libraries.\n /\nimport as React from 'react';\n\n/*\n Import custom styles.\n /\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/\n Import third-party libraries.\n /\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n position: absolute;\n border-bottom: 1px solid ${COLORS.neutral_100};\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ${COLORS.white};\n }\n`;\n\nconst TabButton = styled.button`\n color: ${COLORS.neutral_800};\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &.disabled {\n &:hover, &:focus {\n cursor: not-allowed;\n \n div {\n color: ${COLORS.neutral_300};\n box-shadow: none !important;\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n div {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n \n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n }\n &.selected{\n z-index: ${Z_INDEXES.active};\n }\n \n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n \n div {\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n \n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n \n &.selected {\n background-color: ${COLORS.white};\n border-top: 2px solid ${COLORS.primary_500};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n \n &:focus {\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n \n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n \n &:active {\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n \n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n \n &.disabled {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n box-shadow: none !important;\n \n &:hover, &:focus {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.size-XS {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-S {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-M {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-L {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n size: HorizontalTabSizes;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n value: string;\n selected: boolean;\n to: string;\n disabled?: boolean;\n}\n\ntype HorizontalTabSizes = 'XS' \| 'S' \| 'M' \| 'L';\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n /\n Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n return (\n <HorizontalTabContainer>\n <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => (\n <TabButton\n key={`${tab}_${index}`}\n style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n onClick={() => !tab.disabled && doTabChange(tab.to)}>\n <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n {tab.value}\n </div>\n </TabButton>\n ))}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}
1	+ {"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","neutral_300","primary_20","primary_700","primary_800","focus_25","focus","primary_500","primary_100","ComponentXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","size","tabs","sideFill","fullWidth","onTabChange","value","selected","to","disabled","HorizontalTabs","doTabChange","document","tab","index","width","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAIA;AACA,QAAMA,sBAAsB,GAAGC,2BAAOC,GAAI;AAC1C;AACA;AACA;AACA;AAJA,CAAA;AAOA,QAAMC,WAAW,GAAGF,2BAAOC,GAAI;AAC/B;AACA,6BAA6BE,eAAOC,WAAY;AAChD;AACA;AACA;AACA;AACA;AACA,kBAAkBD,eAAOE,KAAM;AAC/B;AATA,CAAA;AAYA,QAAMC,SAAS,GAAGN,2BAAOO,MAAO;AAChC,WAAWJ,eAAOK,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBL,eAAOM,WAAY;AACpC;AACA;AACA,iBAAiBN,eAAOM,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBN,eAAOO,UAAW;AACtC,eAAeP,eAAOQ,WAAY;AAClC;AACA;AACA,gCAAgCR,eAAOQ,WAAY;AACnD;AACA,iCAAiCR,eAAOC,WAAY;AACpD,kCAAkCD,eAAOC,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,eAAeD,eAAOS,WAAY;AAClC,iCAAiCT,eAAOU,QAAS,iBAAgBV,eAAOW,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCX,eAAOS,WAAY;AACnD;AACA,iCAAiCT,eAAOC,WAAY;AACpD,kCAAkCD,eAAOC,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBD,eAAOO,UAAW;AACtC,eAAeP,eAAOQ,WAAY;AAClC;AACA;AACA,gCAAgCR,eAAOQ,WAAY;AACnD;AACA,iCAAiCR,eAAOC,WAAY;AACpD,kCAAkCD,eAAOC,WAAY;AACrD;AACA;AACA;AACA;AACA,0BAA0BD,eAAOE,KAAM;AACvC,8BAA8BF,eAAOY,WAAY;AACjD;AACA,+BAA+BZ,eAAOC,WAAY;AAClD,gCAAgCD,eAAOC,WAAY;AACnD;AACA;AACA;AACA,eAAeD,eAAOS,WAAY;AAClC,iCAAiCT,eAAOU,QAAS,iBAAgBV,eAAOW,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCX,eAAOS,WAAY;AACnD;AACA,iCAAiCT,eAAOC,WAAY;AACpD,kCAAkCD,eAAOC,WAAY;AACrD;AACA;AACA;AACA;AACA,oBAAoBD,eAAOa,WAAY;AACvC,eAAeb,eAAOS,WAAY;AAClC,iCAAiCT,eAAOU,QAAS,iBAAgBV,eAAOW,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCX,eAAOS,WAAY;AACnD;AACA,iCAAiCT,eAAOC,WAAY;AACpD,kCAAkCD,eAAOC,WAAY;AACrD;AACA;AACA;AACA;AACA,eAAeD,eAAOM,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,iBAAiBN,eAAOM,WAAY;AACpC;AACA;AACA;AACA;AACA,QAAQQ,oCAAmBC,2BAAD,OAAlBD,EAAkB,IAAlBA,CAAqD;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,mCAAkBD,2BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBF,2BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBH,2BAAD,OAAjBG,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AA5IA,CAAA,C,CA+IA;;AAkBA,QAAMU,cAAc,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,SAAA;AAAmCL,IAAAA;AAAnC,GAAD,KAA0E;AAC/F;AACF;AACA;AACA;AACE,UAAMM,WAAW,GAAIH,EAAD,IAAsB;AACxC;AACAH,MAAAA,WAAW,CAF6B,EAE7B,CAAXA,CAFwC,CAIxC;;AACA,UAAIO,QAAQ,CAARA,aAAAA,YAAJ,WAAA,EAAmD;AACjDA,QAAAA,QAAQ,CAARA,aAAAA,CAAAA,IAAAA;AACD;AAPH,KAAA;;AAUA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAa,MAAA,SAAS,EAAG,GAAET,QAAQ,GAAA,MAAA,GAAY,EAAG;AAAlD,KAAA,CADF,EAEGD,IAAI,CAAJA,GAAAA,CAAS,CAAA,GAAA,EAAA,KAAA,KAAA,aACR,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AACE,MAAA,GAAG,EAAG,GAAEW,GAAI,IAAGC,KADjB,EAAA;AAEE,MAAA,KAAK,EAAEV,SAAS,GAAG;AAAEW,QAAAA,KAAK,EAAG,GAAE,MAAMb,IAAI,CAACc,MAAO;AAA9B,OAAH,GAFlB,EAAA;AAGE,MAAA,SAAS,EAAG,QAAOf,IAAK,IAAGY,GAAG,CAAHA,QAAAA,GAAAA,UAAAA,GAA4B,EAAG,IAAGA,GAAG,CAAHA,QAAAA,GAAAA,UAAAA,GAA4B,EAH3F,EAAA;AAIE,MAAA,OAAO,EAAE,MAAM,CAACA,GAAG,CAAJ,QAAA,IAAiBF,WAAW,CAACE,GAAG,CAAJ,EAAA;AAJ7C,KAAA,EAAA,aAKE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAG,QAAOZ,IAAK,IAAGY,GAAG,CAAHA,QAAAA,GAAAA,UAAAA,GAA4B,EAAG,IAAGA,GAAG,CAAHA,QAAAA,GAAAA,UAAAA,GAA4B,EAAG;AAAjG,KAAA,EACGA,GAAG,CAVd,KASQ,CALF,CADDX,CAFH,CADF;AAfF,GAAA;;;AAhBED,IAAAA,I,6BAcwB,I,EAAO,G,EAAM,G,EAAM,G;AAb3CC,IAAAA,I;AAOAI,MAAAA,K;AACAC,MAAAA,Q;AACAC,MAAAA,E;AACAC,MAAAA,Q;;AATAN,IAAAA,Q;AACAC,IAAAA,S;AACAC,IAAAA,W;;oBA6CF,c","sourcesContent":["/*\n Import React libraries.\n /\nimport as React from 'react';\n\n/*\n Import custom styles.\n /\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/\n Import third-party libraries.\n /\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n position: absolute;\n border-bottom: 1px solid ${COLORS.neutral_100};\n height: Calc(100% - 1px);\n z-index: 1;\n width: 100%;\n\n &.fill {\n background: ${COLORS.white};\n }\n`;\n\nconst TabButton = styled.button`\n color: ${COLORS.neutral_800};\n border: none;\n background-color: transparent;\n z-index: 2;\n cursor: pointer;\n padding: 0px;\n\n &.disabled {\n &:hover, &:focus {\n cursor: not-allowed;\n \n div {\n color: ${COLORS.neutral_300};\n box-shadow: none !important;\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n }\n\n &:hover {\n div {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n \n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n }\n \n &:focus {\n div {\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n \n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n \n &.selected {\n background-color: ${COLORS.white};\n border-top: 2px solid ${COLORS.primary_500};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n \n &:focus {\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n \n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n \n &:active {\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n \n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n \n &.disabled {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n box-shadow: none !important;\n \n &:hover, &:focus {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.size-XS {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-S {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-M {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-L {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n size: HorizontalTabSizes;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n value: string;\n selected: boolean;\n to: string;\n disabled?: boolean;\n}\n\ntype HorizontalTabSizes = 'XS' \| 'S' \| 'M' \| 'L';\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n /\n Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n return (\n <HorizontalTabContainer>\n <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => (\n <TabButton\n key={`${tab}_${index}`}\n style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n onClick={() => !tab.disabled && doTabChange(tab.to)}>\n <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n {tab.value}\n </div>\n </TabButton>\n ))}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}

package/dist/umd/Tabs/TabLink.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../NotificationDot", "../styles", "../styles/z-indexes"], factory);
+    define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../NotificationDot", "../styles"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../NotificationDot"), require("../styles"), require("../styles/z-indexes"));
+    factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../NotificationDot"), require("../styles"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.NotificationDot, global.styles, global.zIndexes);
+    factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.NotificationDot, global.styles);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _NotificationDot, _styles, _zIndexes) {
+})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _NotificationDot, _styles) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -100,7 +100,6 @@
   }
   &:focus {
-    z-index: ${_zIndexes.Z_INDEXES.focus};
     background-color: ${_styles.COLORS.white};
     box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
     outline: none;
@@ -111,31 +110,24 @@
   }
   &.active {
-    z-index: ${_zIndexes.Z_INDEXES.active};
     background-color: ${_styles.COLORS.neutral_20};
   }
   &.active:hover {
     background-color: ${_styles.COLORS.primary_20};
   }
   &.active:focus {
     background-color: ${_styles.COLORS.white};
   }
   &:hover {
-    z-index: ${_zIndexes.Z_INDEXES.hover};
     background-color: ${_styles.COLORS.primary_20};
     color: ${_styles.COLORS.primary_600};
   }
   &:active {
-    z-index: ${_zIndexes.Z_INDEXES.active};
     box-shadow: none;
     background-color: ${_styles.COLORS.primary_100};
     color: ${_styles.COLORS.primary_800};
   }
   &.active {
     &::after {
       position: absolute;
@@ -146,16 +138,17 @@
       left: -1px;
       background-color: ${_styles.COLORS.primary_500};
-      border-radius: 2px;
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
     }
   }
   &.active:hover {
     &::after {
       background-color: ${_styles.COLORS.primary_600};
     }
   }
   &.active:active {
     background-color: ${_styles.COLORS.primary_100};
@@ -163,15 +156,12 @@
       background-color: ${_styles.COLORS.primary_800};
     }
   }
   &:disabled {
     box-shadow: none;
     background-color: ${_styles.COLORS.white};
     span {
       color: ${_styles.COLORS.neutral_300};
     }
     &::after {
       background-color: ${_styles.COLORS.white};
     }

package/dist/umd/Tabs/TabLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["disabled","requiredLine","optionalLine","onLinkClick","testId","showNotificationDot","size","variant","StyledTabLink","styled","COLORS","neutral_600","props","~~Z_INDEXES","focus","~~white","~~active","~~neutral_20","primary_20","~~hover","~~primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","exact","location","ref","React","to","OptionalLineIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAyBA~~,QAAMQ,aAAa,GAAGC,gCAAM,uBAANA,CAAoC;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,eAAOC,WAAY;AAC9B;AACA,sBAAuBC,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAiBF,eAAjBE,WAAAA,GAAsC,aAAe;AACvF,YAAaA,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,aAAAA,GAAiC,SAAW;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~eAAeC~~,~~oBAAUC~~,KAAM;~~AAC/B,wBAAwBJ,eAAOK,KAAM;~~AACrC;AACA;AACA;AACA;AACA,~~0BAA0BL~~,~~eAAOK~~,KAAM;AACvC;AACA;AACA;AACA;AACA,~~eAAeF~~,~~oBAAUG~~,~~MAAO;AAChC,wBAAwBN,eAAOO,~~UAAW;AAC1C;AACA;AACA~~;AACA~~,~~wBAAwBP~~,~~eAAOQ~~,UAAW;AAC1C;AACA;AACA~~;AACA~~,~~wBAAwBR~~,~~eAAOK~~,KAAM;AACrC;AACA;AACA;AACA,~~eAAeF~~,~~oBAAUM~~,~~KAAM;AAC/B,wBAAwBT,eAAOQ,~~UAAW;AAC1C,~~aAAaR~~,~~eAAOU~~,WAAY;AAChC;AACA;AACA;AACA,~~eAAeP,oBAAUG,MAAO;AAChC;AACA,~~wBAAwBN,~~eAAOW~~,WAAY;AAC3C,~~aAAaX~~,~~eAAOY~~,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA~~;AACA~~,~~0BAA0BZ~~,~~eAAOa~~,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~0BAA0Bb~~,~~eAAOU~~,WAAY;AAC7C;AACA;AACA;AACA~~;AACA~~,~~wBAAwBV~~,~~eAAOW~~,WAAY;AAC3C;AACA;AACA,~~0BAA0BX~~,~~eAAOY~~,WAAY;AAC7C;AACA;AACA;AACA;AACA~~;AACA~~,~~wBAAwBZ~~,~~eAAOK~~,KAAM;AACrC;AACA~~;AACA~~,~~eAAeL~~,~~eAAOc~~,WAAY;AAClC;AACA;AACA~~;AACA~~,~~0BAA0Bd~~,~~eAAOK~~,KAAM;AACvC;AACA;~~AAhGA~~,CAAA;~~AAmGA~~,~~QAAMU~~,2BAA2B,~~GAAGhB~~,~~2BAAOiB~~,GAAI;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,CAAA;AAUA,QAAMC,UAAU,~~GAAGlB~~,~~2BAAOiB~~,GAAI;AAC9B;AACA;AACA;AACA;AACA;AALA,CAAA;AAQA,QAAME,aAAa,~~GAAGnB~~,~~2BAAOiB~~,GAAI;AACjC;AADA,CAAA;AAIA,QAAMG,kBAAkB,~~GAAGpB~~,~~2BAAOiB~~,GAAI;AACtC;AADA,CAAA;AAIA,QAAMI,mBAAmB,~~GAAGrB~~,~~2BAAOiB~~,GAAI;AACvC;AADA,CAAA;;AAIA,QAAMK,OAAO,GAAG,CAAC;AAAA,IAAA,EAAA;~~AAAM/B~~,IAAAA,QAAQ,GAAd,KAAA;~~AAAwBgC~~,IAAAA,KAAK,GAA7B,KAAA;AAAA,IAAA,YAAA;AAAA,IAAA,YAAA;AAAA,IAAA,gBAAA;AAAA,IAAA,WAAA;AAAA,IAAA,MAAA;~~AAA0G3B~~,IAAAA,mBAAmB,GAA7H,KAAA;AAAuIC,IAAAA,IAAI,GAA3I,OAAA;AAAuJC,IAAAA,OAAO,GAAG;AAAjK,GAAD,KAAiM;AAC/M,~~UAAM0B~~,QAAQ,GAAd,kCAAA;AACA,UAAMC,GAAG,GAAGC,KAAK,CAALA,MAAAA,CAAZ,IAAYA,CAAZ;AAEA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AACE,MAAA,EAAE,EAAEC,EAAE,CADR,QACMA,EADN;AAEE,MAAA,eAAe,EAFjB,QAAA;AAGE,MAAA,QAAQ,EAHV,QAAA;AAIE,MAAA,KAAK,EAJP,KAAA;AAKE,MAAA,IAAI,EALN,KAAA;AAME,uBAAeA,EAAE,KAAKH,QAAQ,CANhC,QAAA;AAOE,MAAA,OAAO,EAAE,MAAM;AACbC,QAAAA,GAAG,EAAHA,OAAAA,EAAAA,IAAAA;;AACA,YAAA,WAAA,EAAiB;~~AACf/B~~,UAAAA,WAAW;AACZ;AAXL,OAAA;AAaE,MAAA,GAAG,EAbL,GAAA;AAcE,qBAAaC;AAdf,KAAA,EAAA,aAeE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAA,EAAA,aACA,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAFF,YAEE,CADF,CADA,EAIC,YAAY,IAAZ,gBAAA,GAAA,aACC,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA,IAAA,~~EACGiC~~,gBAAgB,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAkB,MAAA,IAAI,EAAC;AAAvB,KAAA,CADvB,~~EAEGnC~~,YAAY,KAAZA,SAAAA,IAAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHlC,YAGkC,CAFjC,CADD,GAKGA,YAAY,GAAA,aACd,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAFY,YAEZ,CADF,CADc,GAAA,aAKd,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EA7BJ,IA6BI,CAdF,CAfF,EAAA,aAgCE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,IAAA,EACGG,mBAAmB,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,gCAAA,EAAA;AAAiB,MAAA,MAAM,EAAvB,iBAAA;AAA0C,MAAA,IAAI,EAA9C,IAAA;AAAsD,MAAA,OAAO,EAAEE;AAA/D,KAAA,CAD1B,CAhCF,CADF;AAJF,GAAA;;;~~AAjJEP~~,IAAAA,Q;AACAC,IAAAA,Y;AACAC,IAAAA,Y;AAEAC,IAAAA,W;AACAC,IAAAA,M;AACAC,IAAAA,mB;AACAC,IAAAA,I;AACAC,IAAAA,O,6BAAU,U,EAAa,U;;~~oBAqLzB~~,O","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\~~nimport {Z_INDEXES} from '../styles/z-indexes';\~~n\ntype TabLinkProps = {\n disabled?: boolean;\n requiredLine: string;\n optionalLine?: string;\n OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n onLinkClick?: () => void;\n testId?: string;\n showNotificationDot?: boolean;\n size?: string;\n variant?: 'positive' \| 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n disabled?: boolean;\n exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ${COLORS.neutral_600};\n\n background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n border-left: 1px solid transparent;\n text-decoration: none;\n position: relative;\n border-radius: 2px;\n\n &:not(:last-child) {\n margin-bottom: 4px;\n }\n\n &:focus {\n ~~z-index: ${Z_INDEXES.focus};\n~~ background-color: ${COLORS.white};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n\n &::after {\n background-color: ${COLORS.white};\n }\n }\n\n &.active {\n ~~z-index: ${Z_INDEXES.active};\n~~ background-color: ${COLORS.neutral_20};\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &.active:focus {\n background-color: ${COLORS.white};\n }\n\n &:hover {\n ~~z-index: ${Z_INDEXES.hover};\n~~ background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n\n &:active {\n ~~z-index: ${Z_INDEXES.active};\n~~ box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n box-shadow: none;\n background-color: ${COLORS.white};\n\n span {\n color: ${COLORS.neutral_300};\n }\n\n &::after {\n background-color: ${COLORS.white};\n }\n }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n display: flex;\n flex-direction: row;\n span {\n margin: 0 0 0 4px !important;\n font-size: 12px;\n line-height: 16px;\n }\n`;\n\nconst TopWrapper = styled.div`\n display: flex;\n flex-direction: row;\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n`;\n\nconst TextContainer = styled.div`\n width: 100%;\n`;\n\nconst StyledNotification = styled.div`\n margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = 'small', variant = 'critical' }: TabLinkProps) => {\n const location = useLocation();\n const ref = React.useRef<any>(null);\n\n return (\n <StyledTabLink\n to={to.toString()}\n activeClassName=\"active\"\n disabled={disabled}\n exact={exact}\n role=\"tab\"\n aria-selected={to === location.pathname}\n onClick={() => {\n ref?.current?.blur();\n if (onLinkClick) {\n onLinkClick();\n }\n }}\n ref={ref}\n data-testid={testId}>\n <TextContainer> \n <TopWrapper>\n <span>{requiredLine}</span> \n </TopWrapper>\n {optionalLine && OptionalLineIcon ? (\n <OptionalLineWrapperWithIcon>\n {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n {optionalLine !== undefined && <span>{optionalLine}</span>}\n </OptionalLineWrapperWithIcon>\n ) : optionalLine ? (\n <OptionalLineWrapper>\n <span>{optionalLine}</span>\n </OptionalLineWrapper>\n ) : (\n <></>\n )}\n </TextContainer>\n <StyledNotification>\n {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n </StyledNotification>\n </StyledTabLink>\n );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
1	+ {"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["disabled","requiredLine","optionalLine","onLinkClick","testId","showNotificationDot","size","variant","StyledTabLink","styled","COLORS","neutral_600","props","white","neutral_20","primary_20","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","exact","location","ref","React","to","OptionalLineIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\n\ntype TabLinkProps = {\n disabled?: boolean;\n requiredLine: string;\n optionalLine?: string;\n OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n onLinkClick?: () => void;\n testId?: string;\n showNotificationDot?: boolean;\n size?: string;\n variant?: 'positive' \| 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n disabled?: boolean;\n exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ${COLORS.neutral_600};\n\n background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n border-left: 1px solid transparent;\n text-decoration: none;\n position: relative;\n border-radius: 2px;\n\n &:not(:last-child) {\n margin-bottom: 4px;\n }\n\n &:focus {\n background-color: ${COLORS.white};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline: none;\n\n &::after {\n background-color: ${COLORS.white};\n }\n }\n\n &.active {\n background-color: ${COLORS.neutral_20};\n }\n &.active:hover {\n background-color: ${COLORS.primary_20};\n }\n &.active:focus {\n background-color: ${COLORS.white};\n }\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n &:active {\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ${COLORS.primary_500};\n\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n }\n }\n &.active:hover {\n &::after {\n background-color: ${COLORS.primary_600};\n }\n }\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n &:disabled {\n box-shadow: none;\n background-color: ${COLORS.white};\n span {\n color: ${COLORS.neutral_300};\n }\n &::after {\n background-color: ${COLORS.white};\n }\n }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n display: flex;\n flex-direction: row;\n span {\n margin: 0 0 0 4px !important;\n font-size: 12px;\n line-height: 16px;\n }\n`;\n\nconst TopWrapper = styled.div`\n display: flex;\n flex-direction: row;\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n`;\n\nconst TextContainer = styled.div`\n width: 100%;\n`;\n\nconst StyledNotification = styled.div`\n margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = 'small', variant = 'critical' }: TabLinkProps) => {\n const location = useLocation();\n const ref = React.useRef<any>(null);\n\n return (\n <StyledTabLink\n to={to.toString()}\n activeClassName=\"active\"\n disabled={disabled}\n exact={exact}\n role=\"tab\"\n aria-selected={to === location.pathname}\n onClick={() => {\n ref?.current?.blur();\n if (onLinkClick) {\n onLinkClick();\n }\n }}\n ref={ref}\n data-testid={testId}>\n <TextContainer> \n <TopWrapper>\n <span>{requiredLine}</span> \n </TopWrapper>\n {optionalLine && OptionalLineIcon ? (\n <OptionalLineWrapperWithIcon>\n {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n {optionalLine !== undefined && <span>{optionalLine}</span>}\n </OptionalLineWrapperWithIcon>\n ) : optionalLine ? (\n <OptionalLineWrapper>\n <span>{optionalLine}</span>\n </OptionalLineWrapper>\n ) : (\n <></>\n )}\n </TextContainer>\n <StyledNotification>\n {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n </StyledNotification>\n </StyledTabLink>\n );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}

package/dist/umd/Toasters/ToastContext.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "styled-components", "../Services/functions", "./Toast", "../types", "../styles/z-indexes"], factory);
+    define(["exports", "react", "styled-components", "../Services/functions", "./Toast", "../types"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("styled-components"), require("../Services/functions"), require("./Toast"), require("../types"), require("../styles/z-indexes"));
+    factory(exports, require("react"), require("styled-components"), require("../Services/functions"), require("./Toast"), require("../types"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.styledComponents, global.functions, global.Toast, global.types, global.zIndexes);
+    factory(mod.exports, global.react, global.styledComponents, global.functions, global.Toast, global.types);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _styledComponents, _functions, _Toast, _types, _zIndexes) {
+})(this, function (exports, _react, _styledComponents, _functions, _Toast, _types) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -138,7 +138,7 @@
   const ToastContext = exports.ToastContext = React.createContext({});
   const ToastBucket = _styledComponents2.default.div`
   position: fixed;
-  z-index: ${_zIndexes.Z_INDEXES.toast};
+  z-index: 9999;
   display: flex;
   flex-direction: column-reverse;
 `;

package/dist/umd/Toasters/ToastContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["ToastContext","React","ToastBucket","styled","div","~~Z_INDEXES","toast","~~ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","add","id","setToasts","prev","options","remove","toasts","t","functions","addToast","removeToast","ToastPosition"],"mappings":";;;;;;;;;;;;;;;;;;;~~UA4HO~~,Q,GAAA,Q;;~~MA5HP~~,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAkBA~~;AAEO,QAAMA,YAAY,WAAZA,YAAY,GAAGC,KAAK,CAALA,aAAAA,CAArB,EAAqBA,CAArB;AAEP,QAAMC,WAAW,GAAGC,2BAAOC,GAAI;AAC/B;AACA~~,aAAaC,oBAAUC,KAAM~~;~~AAC7B~~;AACA;AAJA,CAAA;AAOA,QAAMC,kBAAkB,~~GAAGJ~~,gCAAM,WAANA,CAAoB;AAC/C;AACA;AAFA,CAAA;AAKA,~~QAAMK~~,oBAAoB,~~GAAGL~~,gCAAM,WAANA,CAAoB;AACjD;AACA;AACA;AAHA,CAAA;AAMA,~~QAAMM~~,mBAAmB,~~GAAGN~~,gCAAM,WAANA,CAAoB;AAChD;AACA;AAFA,CAAA;AAKA,~~QAAMO~~,qBAAqB,~~GAAGP~~,gCAAM,WAANA,CAAoB;AAClD;AACA;AAFA,CAAA;AAKA,~~QAAMQ~~,uBAAuB,~~GAAGR~~,gCAAM,WAANA,CAAoB;AACpD;AACA;AACA;AAHA,CAAA;AAMA,~~QAAMS~~,sBAAsB,~~GAAGT~~,gCAAM,WAANA,CAAoB;AACnD;AACA;AAFA,CAAA;;AAKO,~~QAAMU~~,aAAuB,WAAvBA,aAAuB,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAiC;AACtE,UAAM,CAAA,MAAA,EAAA,SAAA,~~IAAsBb~~,KAAK,CAALA,QAAAA,CAA5B,EAA4BA,CAA5B;;AAEA,~~UAAMc~~,GAAG,GAAG,CAAA,OAAA,EAAA,OAAA,KAAyC;AACnD,YAAMC,EAAE,GAAR,4BAAA;AACAC,MAAAA,SAAS,CAACC,IAAI,IAAI,CAAC,GAAD,IAAA,EAAU;AAAA,QAAA,EAAA;AAAA,QAAA,OAAA;AAAeC,QAAAA;AAAf,OAAV,CAAT,CAATF;AAFF,KAAA;;AAKA,UAAMG,MAAM,GAAIJ,EAAD,IAAgBC,SAAS,CAACI,MAAM,CAANA,MAAAA,CAAcC,CAAC,IAAIA,CAAC,CAADA,EAAAA,KAA5D,EAAyCD,CAAD,CAAxC;;AAEA,UAAME,SAAS,GAAG,KAAK,CAAL,OAAA,CAAc,MAAM;AACpC,aAAO;AAAEC,QAAAA,QAAQ,EAAV,GAAA;AAAiBC,QAAAA,WAAW,EAAEL;AAA9B,OAAP;AADgB,KAAA,EAEf,CAFH,MAEG,CAFe,CAAlB;AAIA,WAAA,aACE,KAAA,CAAA,aAAA,CAAC,YAAD,CAAA,QAAA,EAAA;AAAuB,MAAA,KAAK,EAAA,aAAA,CAAA;AAAIC,QAAAA;AAAJ,OAAA,EAAA,SAAA;AAA5B,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,IAAA,EACG,MAAM,CAAN,MAAA,CACSC,CAAC,IAAIA,CAAC,CAADA,OAAAA,CAAAA,QAAAA,KAAuBI,qBADrC,OAAA,EAAA,GAAA,CAEMJ,CAAC,IAAA,aACJ,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAO,MAAA,GAAG,EAAEA,CAAC,CAAb,EAAA;AAAkB,MAAA,OAAO,EAAEA,CAAC,CAA5B,OAAA;AAAsC,MAAA,MAAM,EAAE,MAAMF,MAAM,CAACE,CAAC,CAA5D,EAA0D,CAA1D;AAAkE,MAAA,OAAO,EAAEA,CAAC,CAACH;AAA7E,KAAA,CAHH,CADH,CADF,EAAA,aAQE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,EACG,MAAM,CAAN,MAAA,CACSG,CAAC,IAAIA,CAAC,CAADA,OAAAA,CAAAA,QAAAA,KAAuBI,qBADrC,SAAA,EAAA,GAAA,CAEMJ,CAAC,IAAA,aACJ,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAO,MAAA,GAAG,EAAEA,CAAC,CAAb,EAAA;AAAkB,MAAA,OAAO,EAAEA,CAAC,CAA5B,OAAA;AAAsC,MAAA,MAAM,EAAE,MAAMF,MAAM,CAACE,CAAC,CAA5D,EAA0D,CAA1D;AAAkE,MAAA,OAAO,EAAEA,CAAC,CAACH;AAA7E,KAAA,CAHH,CADH,CARF,EAAA,aAeE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EACG,MAAM,CAAN,MAAA,CACSG,CAAC,IAAIA,CAAC,CAADA,OAAAA,CAAAA,QAAAA,KAAuBI,qBADrC,QAAA,EAAA,GAAA,CAEMJ,CAAC,IAAA,aACJ,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAO,MAAA,GAAG,EAAEA,CAAC,CAAb,EAAA;AAAkB,MAAA,OAAO,EAAEA,CAAC,CAA5B,OAAA;AAAsC,MAAA,MAAM,EAAE,MAAMF,MAAM,CAACE,CAAC,CAA5D,EAA0D,CAA1D;AAAkE,MAAA,OAAO,EAAEA,CAAC,CAACH;AAA7E,KAAA,CAHH,CADH,CAfF,EAAA,aAsBE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EACG,MAAM,CAAN,MAAA,CACSG,CAAC,IAAIA,CAAC,CAADA,OAAAA,CAAAA,QAAAA,KAAuBI,qBADrC,UAAA,EAAA,GAAA,CAEMJ,CAAC,IAAA,aACJ,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAO,MAAA,GAAG,EAAEA,CAAC,CAAb,EAAA;AAAkB,MAAA,OAAO,EAAEA,CAAC,CAA5B,OAAA;AAAsC,MAAA,MAAM,EAAE,MAAMF,MAAM,CAACE,CAAC,CAA5D,EAA0D,CAA1D;AAAkE,MAAA,OAAO,EAAEA,CAAC,CAACH;AAA7E,KAAA,CAHH,CADH,CAtBF,EAAA,aA6BE,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,IAAA,EACG,MAAM,CAAN,MAAA,CACSG,CAAC,IAAIA,CAAC,CAADA,OAAAA,CAAAA,QAAAA,KAAuBI,qBADrC,YAAA,EAAA,GAAA,CAEMJ,CAAC,IAAA,aACJ,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAO,MAAA,GAAG,EAAEA,CAAC,CAAb,EAAA;AAAkB,MAAA,OAAO,EAAEA,CAAC,CAA5B,OAAA;AAAsC,MAAA,MAAM,EAAE,MAAMF,MAAM,CAACE,CAAC,CAA5D,EAA0D,CAA1D;AAAkE,MAAA,OAAO,EAAEA,CAAC,CAACH;AAA7E,KAAA,CAHH,CADH,CA7BF,EAAA,aAoCE,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA,IAAA,EACG,MAAM,CAAN,MAAA,CACSG,CAAC,IAAIA,CAAC,CAADA,OAAAA,CAAAA,QAAAA,KAAuBI,qBADrC,WAAA,EAAA,GAAA,CAEMJ,CAAC,IAAA,aACJ,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAO,MAAA,GAAG,EAAEA,CAAC,CAAb,EAAA;AAAkB,MAAA,OAAO,EAAEA,CAAC,CAA5B,OAAA;AAAsC,MAAA,MAAM,EAAE,MAAMF,MAAM,CAACE,CAAC,CAA5D,EAA0D,CAA1D;AAAkE,MAAA,OAAO,EAAEA,CAAC,CAACH;AAA7E,KAAA,CAHH,CADH,CApCF,EADF,QACE,CADF;AAdK,GAAA;;AA+DA,WAAA,QAAA,GAAoB;AACzB,UAAM;AAAEK,MAAAA;AAAF,~~QAAevB~~,KAAK,CAALA,UAAAA,CAArB,YAAqBA,CAArB;AACA,WAAO;~~AACLuB~~,MAAAA;AADK,KAAP;AAGD","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\~~nimport {Z_INDEXES} from '../styles/z-indexes';\~~n\ntype ProviderProps = {\n children?: any;\n};\n\ninterface toast {\n options: ToastOptions;\n id: string;\n content: any;\n}\ntype ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => void; removeToast: (id: string) => void };\n\n/export const ToastContext = React.createContext<ToasterValueProps>(null);/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n position: fixed;\n z-index: ~~${Z_INDEXES.toast}~~;\n display: flex;\n flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n top: 16px;\n left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n top: 16px;\n left: 50%;\n transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n top: 16px;\n right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n bottom: 16px;\n left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n bottom: 16px;\n left: 50%;\n transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n bottom: 16px;\n right: 5%;\n`;\n\nexport const ToastProvider: React.FC = ({ children }: ProviderProps) => {\n const [toasts, setToasts] = React.useState<toast[]>([]);\n\n const add = (content: any, options: ToastOptions) => {\n const id = createUUID();\n setToasts(prev => [...prev, { id, content, options }]);\n };\n\n const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n const functions = React.useMemo(() => {\n return { addToast: add, removeToast: remove };\n }, [toasts]);\n\n return (\n <ToastContext.Provider value={{ toasts, ...functions }}>\n <ToastBucketTopLeft>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPLEFT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopLeft>\n <ToastBucketTopMiddle>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopMiddle>\n <ToastBucketTopRight>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopRight>\n <ToastBucketBottomLeft>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomLeft>\n <ToastBucketBottomMiddle>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomMiddle>\n <ToastBucketBottomRight>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomRight>\n {children}\n </ToastContext.Provider>\n );\n};\n\nexport function useToast() {\n const { addToast } = React.useContext(ToastContext);\n return {\n addToast,\n };\n}\n"],"file":"ToastContext.js"}
1	+ {"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["ToastContext","React","ToastBucket","styled","div","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","add","id","setToasts","prev","options","remove","toasts","t","functions","addToast","removeToast","ToastPosition"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\n\ntype ProviderProps = {\n children?: any;\n};\n\ninterface toast {\n options: ToastOptions;\n id: string;\n content: any;\n}\ntype ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => void; removeToast: (id: string) => void };\n\n/export const ToastContext = React.createContext<ToasterValueProps>(null);/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n position: fixed;\n z-index: 9999;\n display: flex;\n flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n top: 16px;\n left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n top: 16px;\n left: 50%;\n transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n top: 16px;\n right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n bottom: 16px;\n left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n bottom: 16px;\n left: 50%;\n transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n bottom: 16px;\n right: 5%;\n`;\n\nexport const ToastProvider: React.FC = ({ children }: ProviderProps) => {\n const [toasts, setToasts] = React.useState<toast[]>([]);\n\n const add = (content: any, options: ToastOptions) => {\n const id = createUUID();\n setToasts(prev => [...prev, { id, content, options }]);\n };\n\n const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n const functions = React.useMemo(() => {\n return { addToast: add, removeToast: remove };\n }, [toasts]);\n\n return (\n <ToastContext.Provider value={{ toasts, ...functions }}>\n <ToastBucketTopLeft>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPLEFT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopLeft>\n <ToastBucketTopMiddle>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopMiddle>\n <ToastBucketTopRight>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopRight>\n <ToastBucketBottomLeft>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomLeft>\n <ToastBucketBottomMiddle>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomMiddle>\n <ToastBucketBottomRight>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomRight>\n {children}\n </ToastContext.Provider>\n );\n};\n\nexport function useToast() {\n const { addToast } = React.useContext(ToastContext);\n return {\n addToast,\n };\n}\n"],"file":"ToastContext.js"}

package/dist/umd/Tooltips/TooltipStyles.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "styled-components", "../types", "../styles", "../styles/typography", "../styles/z-indexes"], factory);
+    define(["exports", "styled-components", "../types", "../styles", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("styled-components"), require("../types"), require("../styles"), require("../styles/typography"), require("../styles/z-indexes"));
+    factory(exports, require("styled-components"), require("../types"), require("../styles"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.styledComponents, global.types, global.styles, global.typography, global.zIndexes);
+    factory(mod.exports, global.styledComponents, global.types, global.styles, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _styledComponents, _types, _styles, _typography, _zIndexes) {
+})(this, function (exports, _styledComponents, _types, _styles, _typography) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -43,11 +43,11 @@
     border-radius: 2px;
     width: max-content;
     height: ${props => props.height};
-    max-width: 34em;
+    max-width: 34ems;
     background: ${_styles.COLORS.primary_800};
     position: absolute;
     opacity: 0;
-    z-index: ${_zIndexes.Z_INDEXES.tooltip};
+    z-index: 1;
     ${props => props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : ''}
     ${props => props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : ''}

package/dist/umd/Tooltips/TooltipStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","Tooltip","styled","div","props","ComponentSStyling","ComponentTextStyle","COLORS","ComponentXSStyling","ComponentMStyling","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","~~Z_INDEXES","tooltip","~~withArrow","align","position","TooltipTrigger","css","TooltipContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAMA~~,QAAMA,cAAc,GAAIC,IAAD,IAA4B;AACjD,WAAOA,IAAI,IAAIC,YAARD,MAAAA,GAAAA,KAAAA,GAA+B,CAAA,IAAA,IAASA,IAAI,IAAIC,YAAlB,KAAC,GAAD,MAAC,GAAtC,MAAA;AADF,GAAA;;AAIO,QAAMC,OAAO,WAAPA,OAAO,GAAGC,2BAAOC,GAM3B;AACH;AACA;AACA,MAAMC,KAAK,IAAKA,KAAK,CAALA,IAAAA,IAAcJ,YAAdI,KAAAA,IAA4BA,KAAK,CAALA,IAAAA,IAAcJ,YAA1CI,MAAAA,GAAwDC,mCAAkBC,2BAAD,OAAjBD,EAA8CE,eAAtGH,KAAwDC,CAAxDD,GAAsH,EAAI;AAC1I,MAAMA,KAAK,IAAKA,KAAK,CAALA,IAAAA,IAAcJ,YAAdI,MAAAA,GAA6BI,oCAAmBF,2BAAD,OAAlBE,EAA+CD,eAA5EH,KAA6BI,CAA7BJ,GAA4F,EAAI;AAChH,MAAMA,KAAK,IAAKA,KAAK,CAALA,IAAAA,IAAcJ,YAAdI,MAAAA,GAA4BK,mCAAkBH,2BAAD,OAAjBG,EAA8CF,eAA1EH,KAA4BK,CAA5BL,GAA0F,EAAI;AAC9G,MAAMA,KAAK,IAAKA,KAAK,CAALA,KAAAA,IAAAA,QAAAA,GAAAA,qBAAAA,GAAkD,EAAI;AACtE,kBAAkBM,mBAAWC,YAAa;AAC1C;AACA,eAAeP,KAAK,IAAIA,KAAK,CAALA,IAAAA,IAAcJ,YAAdI,MAAAA,GAAAA,SAAAA,GAAwCA,KAAK,CAALA,IAAAA,IAAcJ,YAAdI,MAAAA,GAAAA,UAAAA,GAAyC,UAAW;AACpH;AACA;AACA,cAAcA,KAAK,IAAIA,KAAK,CAACQ,MAAO;AACpC;AACA,kBAAkBL,eAAOM,WAAY;AACrC;AACA;AACA~~,eAAeC,oBAAUC,OAAQ~~;~~AACjC~~,~~MAAMX~~,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,KAAAA,GAAAA,eAAAA,GAA4CA,KAAK,CAALA,QAAAA,IAAAA,QAAAA,GAAAA,YAAAA,GAA4C,EAAI;AAC5G;AACA,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,GAAAA,4DAAAA,GAA0F,EAAI;AAC9G,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,OAAAA,GAAAA,qDAAAA,GAAoF,EAAI;AACxG;AACA,MAAMA,KAAK,IACLA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,IAA4BA,KAAK,CAALA,QAAAA,IAA5BA,OAAAA,GAAAA,EAAAA,GAEIA,KAAK,CAALA,KAAAA,IAAAA,OAAAA,GAAAA,WAAAA,GAEAA,KAAK,CAALA,KAAAA,IAAAA,KAAAA,GAAAA,YAAAA,GAEA,yCAA0C;AACpD;AACA;AACA;AACA,MAAMA,KAAK,IAAK,CAACA,KAAK,CAAN,SAAA,GAAA,gBAAA,GAAsC,EAAI;AAC1D;AACA;AACA,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,KAAAA,GAAAA,YAAAA,GAAyCA,KAAK,CAALA,QAAAA,IAAAA,QAAAA,GAAAA,eAAAA,GAA+C,EAAI;AAC5G;AACA,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,OAAAA,GAAAA,uDAAAA,GAAsF,EAAI;AAC1G,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,GAAAA,sDAAAA,GAAoF,EAAI;AACxG;AACA,MAAMA,KAAK,IACLA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,IAA4BA,KAAK,CAALA,QAAAA,IAA5BA,OAAAA,GAAAA,EAAAA,GACAA,KAAK,CAALA,KAAAA,IAAAA,OAAAA,GAA0B,SAAQN,cAAc,CAACM,KAAK,CAAN,IAAA,CAAhDA,GAAAA,GAAkEA,KAAK,CAALA,KAAAA,IAAAA,KAAAA,GAAwB,UAASN,cAAc,CAACM,KAAK,CAAN,IAAA,CAA/CA,GAAAA,GAAiE,YAAa;AACtJ;AACA,MAAMA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,GAAAA,EAAAA,GAAgC,oBAAsB;AACtE;AACA;AACA;AACA,oBAAoBA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,KAAAA,GAA0BG,eAA1BH,WAAAA,GAA+C,aAAe;AAC5F,sBAAsBA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,OAAAA,GAA4BG,eAA5BH,WAAAA,GAAiD,aAAe;AAChG,sBAAsBA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,QAAAA,GAA6BG,eAA7BH,WAAAA,GAAkD,aAAe;AACjG,sBAAsBA,KAAK,IAAKA,KAAK,CAALA,QAAAA,IAAAA,MAAAA,GAA2BG,eAA3BH,WAAAA,GAAgD,aAAe;AAC/F;AA5DO,CAAA;AA+DPH,EAAAA,OAAO,CAAPA,YAAAA,GAAuB;~~AACrBe~~,IAAAA,SAAS,EADY,KAAA;~~AAErBjB~~,IAAAA,IAAI,EAAEC,YAFe,KAAA;AAGrBY,IAAAA,MAAM,EAHe,MAAA;~~AAIrBK~~,IAAAA,KAAK,EAJgB,QAAA;AAKrBC,IAAAA,QAAQ,EAAE;AALW,~~GAAvBjB~~;AAQO,~~QAAMkB~~,cAAc,WAAdA,cAAc,GAAGC,qBAAI;AAClC,~~YAAYnB~~,OAAQ,oBAAmBA,OAAQ,aAAYA,OAAQ;AACnE;AACA;AACA;AACA;AALO,CAAA;AAQA,~~QAAMoB~~,gBAAgB,WAAhBA,gBAAgB,~~GAAGnB~~,2BAAOC,GAAI;AAC3C;AACA;AACA;AACA,~~IAAIgB~~,cAAe;AAJZ,CAAA","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\~~nimport {Z_INDEXES} from '../styles/z-indexes';\~~n\nconst distanceToEdge = (size: Size \| undefined) => {\n return size == Size.XSmall ? '8px' : (!size \|\| size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n withArrow?: boolean;\n size?: Size;\n height?: string;\n align?: 'start' \| 'end' \| 'center' \| undefined;\n position?: 'top' \| 'right' \| 'bottom' \| 'left' \| undefined;\n}>`\n\n pointer-events: none;\n ${props => (props.size == Size.Small \|\| props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n \n padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n border-radius: 2px;\n width: max-content;\n height: ${props => props.height};\n max-width: ~~34em~~;\n background: ${COLORS.primary_800};\n position: absolute; \n opacity: 0; \n z-index: ~~${Z_INDEXES.tooltip}~~;\n ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n \n ${props =>\n props.position == 'left' \|\| props.position == 'right'\n ? ''\n : props.align == 'start'\n ? 'left: 0%;'\n : props.align == 'end'\n ? 'right: 0%;'\n : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n ${props => (!props.withArrow ? 'display: none;' : '')}\n content: \"\";\n position: absolute;\n ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n \n ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n ${props =>\n props.position == 'left' \|\| props.position == 'right' ? '' : \n props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n }\n`;\n\nTooltip.defaultProps = {\n withArrow: false,\n size: Size.Small,\n height: 'auto',\n align: 'center',\n position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n opacity: 1;\n transition: 0.5s;\n transition-delay: 1s;\n }\n`;\n\nexport const TooltipContainer = styled.div`\n display: inline-block;\n position: relative;\n\n ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}
1	+ {"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","Tooltip","styled","div","props","ComponentSStyling","ComponentTextStyle","COLORS","ComponentXSStyling","ComponentMStyling","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","withArrow","align","position","TooltipTrigger","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst distanceToEdge = (size: Size \| undefined) => {\n return size == Size.XSmall ? '8px' : (!size \|\| size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n withArrow?: boolean;\n size?: Size;\n height?: string;\n align?: 'start' \| 'end' \| 'center' \| undefined;\n position?: 'top' \| 'right' \| 'bottom' \| 'left' \| undefined;\n}>`\n\n pointer-events: none;\n ${props => (props.size == Size.Small \|\| props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n \n padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n border-radius: 2px;\n width: max-content;\n height: ${props => props.height};\n max-width: 34ems;\n background: ${COLORS.primary_800};\n position: absolute; \n opacity: 0; \n z-index: 1;\n ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n \n ${props =>\n props.position == 'left' \|\| props.position == 'right'\n ? ''\n : props.align == 'start'\n ? 'left: 0%;'\n : props.align == 'end'\n ? 'right: 0%;'\n : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n ${props => (!props.withArrow ? 'display: none;' : '')}\n content: \"\";\n position: absolute;\n ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n \n ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n ${props =>\n props.position == 'left' \|\| props.position == 'right' ? '' : \n props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n }\n`;\n\nTooltip.defaultProps = {\n withArrow: false,\n size: Size.Small,\n height: 'auto',\n align: 'center',\n position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n opacity: 1;\n transition: 0.5s;\n transition-delay: 1s;\n }\n`;\n\nexport const TooltipContainer = styled.div`\n display: inline-block;\n position: relative;\n\n ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.2.2-dev.8",
+  "version": "1.2.2-dev.9",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [
@@ -12,23 +12,9 @@
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/plugin-proposal-object-rest-spread": "^7.10.3",
-    "@babel/plugin-transform-typescript": "^7.10.3",
-    "@babel/preset-env": "^7.10.3",
-    "@babel/preset-react": "^7.10.1",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^26.0.24",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
     "animated-scroll-to": "^2.2.0",
-    "babel-plugin-inline-react-svg": "^2.0.1",
-    "cross-env": "^7.0.3",
-    "fs-extra": "^9.0.1",
-    "glob": "^7.1.6",
     "moment": "^2.29.1",
     "react-datepicker": "^3.7.0",
     "react-modal": "^3.11.2",
@@ -69,6 +55,11 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.10.1",
+    "@babel/plugin-proposal-class-properties": "^7.10.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.10.3",
+    "@babel/plugin-transform-typescript": "^7.10.3",
+    "@babel/preset-env": "^7.10.3",
+    "@babel/preset-react": "^7.10.1",
     "@babel/plugin-proposal-export-default-from": "^7.10.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.2",
@@ -80,7 +71,9 @@
     "@types/styled-components": "^5.1.0",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "babel-plugin-typescript-to-proptypes": "^1.3.2",
+    "babel-plugin-inline-react-svg": "^2.0.1",
     "concurrently": "^5.2.0",
+    "cross-env": "^7.0.3",
     "jest": "^26.6.3",
     "jest-styled-components": "^7.0.5",
     "jest-svg-transformer": "^1.0.0",
@@ -91,10 +84,8 @@
     "ts-jest": "^26.5.6"
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0"
+    "react": "^16 || ^17",
+    "react-router-dom": "^5"
   },
   "keywords": [],
   "license": "UNLICENSED",

package/dist/esm/styles/z-indexes.js DELETED Viewed

@@ -1,14 +0,0 @@
-export const Z_INDEXES = {
-  hover: '1',
-  active: '2',
-  focus: '3',
-  dropdown: '1000',
-  sticky_menu: '1020',
-  fixed_menu: '1030',
-  backdrop: '1040',
-  off_canvas: '1050',
-  modal: '1060',
-  toast: '1070',
-  tooltip: '1080'
-};
-//# sourceMappingURL=z-indexes.js.map

package/dist/esm/styles/z-indexes.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip"],"mappings":"AAAA,OAAO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,KAAK,EAAE,GADgB;AAEvBC,EAAAA,MAAM,EAAE,GAFe;AAGvBC,EAAAA,KAAK,EAAE,GAHgB;AAMvBC,EAAAA,QAAQ,EAAE,MANa;AAOvBC,EAAAA,WAAW,EAAE,MAPU;AAQvBC,EAAAA,UAAU,EAAE,MARW;AASvBC,EAAAA,QAAQ,EAAE,MATa;AAUvBC,EAAAA,UAAU,EAAE,MAVW;AAWvBC,EAAAA,KAAK,EAAE,MAXgB;AAYvBC,EAAAA,KAAK,EAAE,MAZgB;AAavBC,EAAAA,OAAO,EAAE;AAbc,CAAlB","sourcesContent":["export const Z_INDEXES = {\n hover: '1',\n active: '2',\n focus: '3',\n\n\n dropdown: '1000',\n sticky_menu: '1020',\n fixed_menu: '1030',\n backdrop: '1040',\n off_canvas: '1050',\n modal: '1060',\n toast: '1070',\n tooltip: '1080',\n}\n"],"file":"z-indexes.js"}