npm - @laerdal/life-react-components - Versions diffs - 1.0.1-dev.19.full → 1.0.1-dev.22.full - Mend

@laerdal/life-react-components 1.0.1-dev.19.full → 1.0.1-dev.22.full

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 (198) hide show

package/dist/umd/GlobalNavigationBar/RightSideNav.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../NavItem", "../styles", "../Button"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../NavItem", "../styles", "../Button", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../NavItem"), require("../styles"), require("../Button"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../NavItem"), require("../styles"), require("../Button"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.NavItem, global.styles, global.Button);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.NavItem, global.styles, global.Button, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _NavItem, _styles, _Button) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _NavItem, _styles, _Button, _typography) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -100,10 +100,10 @@
   }
 `;
   const SecondaryButton = (0, _styledComponents2.default)(_Button.Button)`
-  font-weight: bold;
-  font-size: 19px;
   height: 40px;
   margin: 0 8px;
+  ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset')}
 `;
   const RightSideNav = ({

package/dist/umd/GlobalNavigationBar/RightSideNav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","navigationOptions","RightSideNav","secondaryButton","preventFocusOnClick","e","getNavItem","navOption","label","no","action"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AASA~~,QAAMA,YAAY,GAAGC,2BAAOC,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB;AACA;AACA,IAAID,oBAAYE,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBA,CAAA;AAqBA,QAAMC,eAAe,GAAGL,gCAAM,cAANA,CAAe;AACvC;AACA;AACA;AACA;~~AAJA~~,CAAA;;AAYA,~~QAAMO~~,YAAY,GAAG,CAAC;AAAA,IAAA,iBAAA;AAAqBC,IAAAA;AAArB,GAAD,KAA8E;AACjG,UAAMC,mBAAmB,GAAIC,CAAD,IAAY;AACtCA,MAAAA,CAAC,CAADA,cAAAA;AADF,KAAA;;AAGA,UAAMC,UAAU,GAAIC,SAAD,IAA0B;AAC3C,UAAIA,SAAS,EAAb,QAAA,EAAyB;AACvB,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAS,UAAA,EAAE,EAAX,cAAA;AAAqB,UAAA,SAAS,EAA9B,UAAA;AAA0C,UAAA,GAAG,EAAEA,SAAS,EAAEC;AAA1D,SAAA,EACGD,SAAS,EAFd,KACE,CADF;AADF,OAAA,MAMO;AACL,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AACE,UAAA,EAAE,EADJ,uBAAA;AAEE,UAAA,KAAK,EAAEA,SAAS,EAFlB,KAAA;AAGE,UAAA,EAAE,EAAEA,SAAS,EAATA,EAAAA,IAHN,EAAA;AAIE,UAAA,GAAG,EAAEA,SAAS,EAJhB,KAAA;AAKE,UAAA,WAAW,EALb,mBAAA;AAME,UAAA,OAAO,EAAE,MAAM;AACb,gBAAIA,SAAS,EAAb,OAAA,EAAwB;AACtBA,cAAAA,SAAS,EAATA,OAAAA;AACD;AACF;AAVH,SAAA,EAWGA,SAAS,EAZd,KACE,CADF;AAeD;AAvBH,KAAA;;AAyBA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,EACGN,iBAAiB,EAAjBA,OAAAA,GAAAA,GAAAA,CAAiCQ,EAAE,IAAIH,UAAU,CADpD,EACoD,CAAjDL,CADH,EAGGE,eAAe,IAAA,aACd,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,MAAA,OAAO,EAAxB,WAAA;AAAqC,MAAA,OAAO,EAAEA,eAAe,EAAEO;AAA/D,KAAA,EACGP,eAAe,CANxB,KAKM,CAJJ,CADF;AA7BF,GAAA;;;AAJEF,IAAAA,iB;;oBA8CF,Y","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { NavLink } from 'react-router-dom';\n\nimport { NavItem } from '../NavItem';\nimport { NavButton, NavOption } from '../types';\nimport { BREAKPOINTS, ~~COLORS~~ } from '../styles';\nimport { Button } from '../~~Button~~';\n\nconst NavContainer = styled.div`\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n ${BREAKPOINTS.MEDIUM} {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n`;\n\nconst SecondaryButton = styled(Button)`\n ~~font-weight: bold;\n font-size: 19px;\n~~ height: 40px;\n margin: 0 8px;\n`;\n\ntype Props = {\n navigationOptions?: NavOption[];\n secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n const preventFocusOnClick = (e: any) => {\n e.preventDefault();\n };\n const getNavItem = (navOption: NavOption) => {\n if (navOption?.disabled) {\n return (\n <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n {navOption?.label}\n </NavItem>\n );\n } else {\n return (\n <NavItem\n as={NavLink}\n exact={navOption?.exact}\n to={navOption?.to \|\| ''}\n key={navOption?.label}\n onMouseDown={preventFocusOnClick}\n onClick={() => {\n if (navOption?.onClick) {\n navOption?.onClick();\n }\n }}>\n {navOption?.label}\n </NavItem>\n );\n }\n };\n return (\n <NavContainer>\n {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n {secondaryButton && (\n <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n {secondaryButton.label}\n </SecondaryButton>\n )}\n </NavContainer>\n );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}
1	+ {"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","ComponentMStyling","ComponentTextStyle","navigationOptions","RightSideNav","secondaryButton","preventFocusOnClick","e","getNavItem","navOption","label","no","action"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,QAAMA,YAAY,GAAGC,2BAAOC,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB;AACA;AACA,IAAID,oBAAYE,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBA,CAAA;AAqBA,QAAMC,eAAe,GAAGL,gCAAM,cAANA,CAAe;AACvC;AACA;AACA;AACA,IAAIM,mCAAkBC,2BAAD,IAAjBD,EAAiB,OAAjBA,CAAoD;AAJxD,CAAA;;AAYA,QAAMG,YAAY,GAAG,CAAC;AAAA,IAAA,iBAAA;AAAqBC,IAAAA;AAArB,GAAD,KAA8E;AACjG,UAAMC,mBAAmB,GAAIC,CAAD,IAAY;AACtCA,MAAAA,CAAC,CAADA,cAAAA;AADF,KAAA;;AAGA,UAAMC,UAAU,GAAIC,SAAD,IAA0B;AAC3C,UAAIA,SAAS,EAAb,QAAA,EAAyB;AACvB,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAS,UAAA,EAAE,EAAX,cAAA;AAAqB,UAAA,SAAS,EAA9B,UAAA;AAA0C,UAAA,GAAG,EAAEA,SAAS,EAAEC;AAA1D,SAAA,EACGD,SAAS,EAFd,KACE,CADF;AADF,OAAA,MAMO;AACL,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AACE,UAAA,EAAE,EADJ,uBAAA;AAEE,UAAA,KAAK,EAAEA,SAAS,EAFlB,KAAA;AAGE,UAAA,EAAE,EAAEA,SAAS,EAATA,EAAAA,IAHN,EAAA;AAIE,UAAA,GAAG,EAAEA,SAAS,EAJhB,KAAA;AAKE,UAAA,WAAW,EALb,mBAAA;AAME,UAAA,OAAO,EAAE,MAAM;AACb,gBAAIA,SAAS,EAAb,OAAA,EAAwB;AACtBA,cAAAA,SAAS,EAATA,OAAAA;AACD;AACF;AAVH,SAAA,EAWGA,SAAS,EAZd,KACE,CADF;AAeD;AAvBH,KAAA;;AAyBA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,EACGN,iBAAiB,EAAjBA,OAAAA,GAAAA,GAAAA,CAAiCQ,EAAE,IAAIH,UAAU,CADpD,EACoD,CAAjDL,CADH,EAGGE,eAAe,IAAA,aACd,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,MAAA,OAAO,EAAxB,WAAA;AAAqC,MAAA,OAAO,EAAEA,eAAe,EAAEO;AAA/D,KAAA,EACGP,eAAe,CANxB,KAKM,CAJJ,CADF;AA7BF,GAAA;;;AAJEF,IAAAA,iB;;oBA8CF,Y","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n ${BREAKPOINTS.MEDIUM} {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n`;\n\nconst SecondaryButton = styled(Button)`\n height: 40px;\n margin: 0 8px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n navigationOptions?: NavOption[];\n secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n const preventFocusOnClick = (e: any) => {\n e.preventDefault();\n };\n const getNavItem = (navOption: NavOption) => {\n if (navOption?.disabled) {\n return (\n <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n {navOption?.label}\n </NavItem>\n );\n } else {\n return (\n <NavItem\n as={NavLink}\n exact={navOption?.exact}\n to={navOption?.to \|\| ''}\n key={navOption?.label}\n onMouseDown={preventFocusOnClick}\n onClick={() => {\n if (navOption?.onClick) {\n navOption?.onClick();\n }\n }}>\n {navOption?.label}\n </NavItem>\n );\n }\n };\n return (\n <NavContainer>\n {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n {secondaryButton && (\n <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n {secondaryButton.label}\n </SecondaryButton>\n )}\n </NavContainer>\n );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}

package/dist/umd/GlobalNavigationBar/UserMenu/MenuLink.js CHANGED Viewed

@@ -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"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../../styles", "../../icons/systemicons/SystemIcons", "../../styles/typography"], 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"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../../styles"), require("../../icons/systemicons/SystemIcons"), require("../../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.styles, global.SystemIcons);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.styles, global.SystemIcons, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -84,16 +84,12 @@
   background: transparent;
   padding: 16px 25px;
-  color: ${_styles.COLORS.black};
   text-decoration: none;
   text-align: left;
   align-items: center;
   display: flex;
-  font-weight: normal;
-  font-size: 19px;
-  line-height: 23px;
-  color: ${_styles.COLORS.neutral_600};
+  ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
   svg {
     margin-right: 15px;
     color: ${_styles.COLORS.neutral_600};

package/dist/umd/GlobalNavigationBar/UserMenu/MenuLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","~~COLORS~~","~~black~~","neutral_600","InternalLink","styled","ExternalLink","a","IconsRightSide","div","to","menuText","isExternal","Icon","notification","extendedMenu","onClick","MenuLink","getRightSide","critical_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAMA~~,QAAMA,UAAU,GAAGC,qBAAI;AACvB;AACA;AACA;AACA;AACA~~,WAAWC,eAAOC,KAAM~~;~~AACxB;~~AACA;AACA;AACA;AACA;AACA~~;AACA;AACA~~,~~WAAWD~~,~~eAAOE~~,~~WAAY~~;~~AAC9B~~;AACA;AACA~~;AACA~~,~~aAAaF~~,~~eAAOE~~,WAAY;AAChC;~~AAlBA~~,CAAA;~~AAqBA~~,QAAMC,YAAY,GAAGC,gCAAM,uBAANA,CAAgB;AACrC,~~IAAIN~~,UAAW;AADf,CAAA;AAIA,~~QAAMO~~,YAAY,GAAGD,2BAAOE,CAAE;AAC9B,~~IAAIR~~,UAAW;AADf,CAAA;AAIA,~~QAAMS~~,cAAc,GAAGH,2BAAOI,GAAI;AAClC;AACA;AACA;AACA;AACA;AALA,CAAA;;AAkBA,QAAMQ,QAAQ,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,YAAA;AAAA,IAAA,YAAA;AAA8DD,IAAAA;AAA9D,GAAD,KAA4F;AAC3G,UAAME,YAAY,GAAG,MAAA,aACnB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EACGJ,YAAY,GAAA,aAAG,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAQ,MAAA,IAAI,EAAZ,MAAA;AAAoB,MAAA,KAAK,~~EAAEb~~,~~eAAOkB~~;AAAlC,KAAA,CAAH,GADf,IAAA,EAEGJ,YAAY,GAAA,aAAG,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,MAAA,IAAI,EAAlB,MAAA;AAA0B,MAAA,KAAK,~~EAAEd~~,~~eAAOE~~;AAAxC,KAAA,CAAH,GAHjB,IACE,CADF;;AAMA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EACGS,UAAU,GAAA,aACT,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AACE,MAAA,GAAG,EAAG,gBAAeF,EADvB,EAAA;AAEE,MAAA,IAAI,EAFN,EAAA;AAGE,MAAA,IAAI,EAHN,UAAA;AAIE,MAAA,SAAS,EAJX,cAAA;AAKE,MAAA,OAAO,EAAE,MAAM;AACb,YAAA,OAAA,EAAa;AACXM,UAAAA,OAAO;AACR;AACF;AATH,KAAA,EAUGH,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,IAAI,EAAC;AAAX,KAAA,CAVX,EAAA,aAWE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAXF,QAWE,CAXF,EAYGK,YAbM,EACT,CADS,GAAA,aAgBT,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AACE,MAAA,GAAG,EAAG,gBAAeR,EADvB,EAAA;AAEE,MAAA,EAAE,EAFJ,EAAA;AAGE,MAAA,IAAI,EAHN,UAAA;AAIE,MAAA,SAAS,EAJX,cAAA;AAKE,MAAA,OAAO,EAAE,MAAM;AACb,YAAA,OAAA,EAAa;AACXM,UAAAA,OAAO;AACR;AACF;AATH,KAAA,EAUGH,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,IAAI,EAAC;AAAX,KAAA,CAVX,EAAA,aAWE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAXF,QAWE,CAXF,EAYGK,YA9BT,EAkBM,CAjBJ,CADF;AAPF,GAAA;;;AATER,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,U;AACAC,IAAAA,I;AACAC,IAAAA,Y;AACAC,IAAAA,Y;AACAC,IAAAA,O;;oBA+CF,Q","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { NavLink } from 'react-router-dom';\nimport { COLORS } from '../../styles';\nimport { Bullet, ChevronRight } from '../../icons/systemicons/SystemIcons';\n\nconst LinkStyles = css`\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n ~~color: ${COLORS.black};\n~~ text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n ~~font-weight: normal;\~~n ~~font-size: 19px;\n line-height: 23px;\n color:~~ ${COLORS.neutral_600}~~;\n~~\n svg {\n margin-right: 15px;\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst InternalLink = styled(NavLink)`\n ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n margin: 0 0 0 auto;\n align-items: center;\n svg {\n margin-right: 0;\n }\n`;\n\ninterface MenuLinkProps {\n to: string;\n menuText: string;\n isExternal?: boolean;\n Icon?: any;\n notification?: boolean;\n extendedMenu?: boolean;\n onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n const getRightSide = () => (\n <IconsRightSide>\n {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n </IconsRightSide>\n );\n return (\n <li>\n {isExternal ? (\n <ExternalLink\n key={`ExternalLink_${to}`}\n href={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </ExternalLink>\n ) : (\n <InternalLink\n key={`InternalLink_${to}`}\n to={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </InternalLink>\n )}\n </li>\n );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}
1	+ {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","ComponentMStyling","ComponentTextStyle","COLORS","neutral_600","InternalLink","styled","ExternalLink","a","IconsRightSide","div","to","menuText","isExternal","Icon","notification","extendedMenu","onClick","MenuLink","getRightSide","critical_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,UAAU,GAAGC,qBAAI;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,mCAAkBC,2BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA,aAAaE,eAAOC,WAAY;AAChC;AAdA,CAAA;AAiBA,QAAMC,YAAY,GAAGC,gCAAM,uBAANA,CAAgB;AACrC,IAAIP,UAAW;AADf,CAAA;AAIA,QAAMQ,YAAY,GAAGD,2BAAOE,CAAE;AAC9B,IAAIT,UAAW;AADf,CAAA;AAIA,QAAMU,cAAc,GAAGH,2BAAOI,GAAI;AAClC;AACA;AACA;AACA;AACA;AALA,CAAA;;AAkBA,QAAMQ,QAAQ,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,YAAA;AAAA,IAAA,YAAA;AAA8DD,IAAAA;AAA9D,GAAD,KAA4F;AAC3G,UAAME,YAAY,GAAG,MAAA,aACnB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EACGJ,YAAY,GAAA,aAAG,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAQ,MAAA,IAAI,EAAZ,MAAA;AAAoB,MAAA,KAAK,EAAEZ,eAAOiB;AAAlC,KAAA,CAAH,GADf,IAAA,EAEGJ,YAAY,GAAA,aAAG,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,MAAA,IAAI,EAAlB,MAAA;AAA0B,MAAA,KAAK,EAAEb,eAAOC;AAAxC,KAAA,CAAH,GAHjB,IACE,CADF;;AAMA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EACGS,UAAU,GAAA,aACT,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AACE,MAAA,GAAG,EAAG,gBAAeF,EADvB,EAAA;AAEE,MAAA,IAAI,EAFN,EAAA;AAGE,MAAA,IAAI,EAHN,UAAA;AAIE,MAAA,SAAS,EAJX,cAAA;AAKE,MAAA,OAAO,EAAE,MAAM;AACb,YAAA,OAAA,EAAa;AACXM,UAAAA,OAAO;AACR;AACF;AATH,KAAA,EAUGH,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,IAAI,EAAC;AAAX,KAAA,CAVX,EAAA,aAWE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAXF,QAWE,CAXF,EAYGK,YAbM,EACT,CADS,GAAA,aAgBT,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AACE,MAAA,GAAG,EAAG,gBAAeR,EADvB,EAAA;AAEE,MAAA,EAAE,EAFJ,EAAA;AAGE,MAAA,IAAI,EAHN,UAAA;AAIE,MAAA,SAAS,EAJX,cAAA;AAKE,MAAA,OAAO,EAAE,MAAM;AACb,YAAA,OAAA,EAAa;AACXM,UAAAA,OAAO;AACR;AACF;AATH,KAAA,EAUGH,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,IAAI,EAAC;AAAX,KAAA,CAVX,EAAA,aAWE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAXF,QAWE,CAXF,EAYGK,YA9BT,EAkBM,CAjBJ,CADF;AAPF,GAAA;;;AATER,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,U;AACAC,IAAAA,I;AACAC,IAAAA,Y;AACAC,IAAAA,Y;AACAC,IAAAA,O;;oBA+CF,Q","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\n\nconst LinkStyles = css`\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n svg {\n margin-right: 15px;\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst InternalLink = styled(NavLink)`\n ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n margin: 0 0 0 auto;\n align-items: center;\n svg {\n margin-right: 0;\n }\n`;\n\ninterface MenuLinkProps {\n to: string;\n menuText: string;\n isExternal?: boolean;\n Icon?: any;\n notification?: boolean;\n extendedMenu?: boolean;\n onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n const getRightSide = () => (\n <IconsRightSide>\n {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n </IconsRightSide>\n );\n return (\n <li>\n {isExternal ? (\n <ExternalLink\n key={`ExternalLink_${to}`}\n href={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </ExternalLink>\n ) : (\n <InternalLink\n key={`InternalLink_${to}`}\n to={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </InternalLink>\n )}\n </li>\n );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}

package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../../styles", "./MenuLink", "../../Button", "../../icons/systemicons/SystemIcons", "../mobile/CommonStyles"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../../styles", "./MenuLink", "../../Button", "../../icons/systemicons/SystemIcons", "../mobile/CommonStyles", "../../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("./MenuLink"), require("../../Button"), require("../../icons/systemicons/SystemIcons"), require("../mobile/CommonStyles"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("./MenuLink"), require("../../Button"), require("../../icons/systemicons/SystemIcons"), require("../mobile/CommonStyles"), require("../../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.MenuLink, global.Button, global.SystemIcons, global.CommonStyles);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.MenuLink, global.Button, global.SystemIcons, global.CommonStyles, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _MenuLink, _Button, _SystemIcons, _CommonStyles) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _MenuLink, _Button, _SystemIcons, _CommonStyles, _typography) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -143,12 +143,11 @@
   h3 {
     margin-block-start: 0 !important;
     margin-block-end: 0 !important;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    font-weight: normal;
-    font-size: 16px;
-    color: inherit;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
     margin-left: 24px;
+    ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
   }
 `;
   const LabelLine = _styledComponents2.default.span`
@@ -162,7 +161,10 @@
   width: 100%;
   height: 48px;
   margin: 0;
-  line-height: 48px;
+  & a {
+    height: 100%;
+  }
 `;
   const MobileUserMenu = ({

package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","LabelLine","span","neutral_20","StyledMenulink","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","MobileUserMenu","React","e","document","element","label","display","margin","width"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, scrollBarStyling } from '../../styles';\n\nimport MenuLink from './MenuLink';\nimport { UserMenuItem } from '../../types';\nimport { Button, IconButton } from '../../Button';\nimport { ArrowLineLeft, Close } from '../../icons/systemicons/SystemIcons';\nimport { flowDown, Right, UserMenuSectionListStyling } from '../mobile/CommonStyles';\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 .signOutButton {\n height: 40px !important;\n width: 288px !important;\n\n ${BREAKPOINTS.SMALL} {\n width: 328px !important;\n }\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 ${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 font-weight: normal;\n font-size: 16px;\n color: inherit;\n margin-left: 24px;\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\nconst StyledMenulink = styled(MenuLink)`\n width: 100%;\n height: 48px;\n margin: 0;\n line-height: 48px;\n`;\n\ninterface Props {\n accountMenuHeader: string;\n firstName: string;\n lastName: string;\n email: string;\n organizationName: string;\n clickMenuAction: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n signOut?: (e: any) => void;\n signOutLabel?: string;\n}\n\nconst MobileUserMenu = ({\n accountMenuHeader,\n firstName,\n lastName,\n email,\n organizationName,\n clickMenuAction,\n accountSection,\n organizationSection,\n supportSection,\n signOut,\n signOutLabel,\n}: 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 key=\"MobileUserMenuTopSection\">\n <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n <h3>{accountMenuHeader}</h3>\n <Right>\n <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n <Close size=\"24px\" />\n </IconButton>\n </Right>\n </Top>\n {accountSection && accountSection?.length > 0 && (\n <MenuSection key=\"MobileAccountSection\">\n <LabelLine data-hj-suppress>{`${firstName} ${lastName}`}</LabelLine>\n <MenuSectionList>\n {accountSection?.map((element) => (\n <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n {organizationSection && organizationSection?.length > 0 && (\n <MenuSection key=\"MObileOrganizationSection\">\n <LabelLine>{organizationName \|\| ''}</LabelLine>\n <MenuSectionList>\n {organizationSection?.map((element) => (\n <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n {supportSection && supportSection?.length > 0 && (\n <MenuSection key=\"MobileSupportSection\">\n <LabelLine>{''}</LabelLine>\n <MenuSectionList>\n {supportSection?.map((element) => (\n <StyledMenulink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n {signOut && (\n <div key=\"SignoutButton\" style={{ display: 'flex', margin: 'auto 0 12px 0' }}>\n <Button\n style={{ width: '90%', margin: '0 auto' }}\n variant=\"secondary\"\n onClick={(e) => {\n e.preventDefault();\n signOut(e);\n }}>\n {signOutLabel}\n </Button>\n </div>\n )}\n </Menu>\n );\n};\n\nexport default MobileUserMenu;\n"],"file":"MobileUserMenu.js"}
1	+ {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.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","StyledMenulink","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","MobileUserMenu","React","e","document","element","label","display","margin","width"],"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 MenuLink from './MenuLink';\nimport {UserMenuItem} from '../../types';\nimport {Button, IconButton} from '../../Button';\nimport {ArrowLineLeft, Close} from '../../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../mobile/CommonStyles';\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 .signOutButton {\n height: 40px !important;\n width: 288px !important;\n\n ${BREAKPOINTS.SMALL} {\n width: 328px !important;\n }\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 ${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: 0;\n margin-inline-end: 0;\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\nconst StyledMenulink = styled(MenuLink)`\n width: 100%;\n height: 48px;\n margin: 0;\n \n & a {\n height: 100%;\n }\n`;\n\ninterface Props {\n accountMenuHeader: string;\n firstName: string;\n lastName: string;\n email: string;\n organizationName: string;\n clickMenuAction: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n signOut?: (e: any) => void;\n signOutLabel?: string;\n}\n\nconst MobileUserMenu = ({\n accountMenuHeader,\n firstName,\n lastName,\n email,\n organizationName,\n clickMenuAction,\n accountSection,\n organizationSection,\n supportSection,\n signOut,\n signOutLabel,\n}: 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 key=\"MobileUserMenuTopSection\">\n <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n <h3>{accountMenuHeader}</h3>\n <Right>\n <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n <Close size=\"24px\" />\n </IconButton>\n </Right>\n </Top>\n {accountSection && accountSection?.length > 0 && (\n <MenuSection key=\"MobileAccountSection\">\n <LabelLine data-hj-suppress>{`${firstName} ${lastName}`}</LabelLine>\n <MenuSectionList>\n {accountSection?.map((element) => (\n <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n {organizationSection && organizationSection?.length > 0 && (\n <MenuSection key=\"MObileOrganizationSection\">\n <LabelLine>{organizationName \|\| ''}</LabelLine>\n <MenuSectionList>\n {organizationSection?.map((element) => (\n <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n {supportSection && supportSection?.length > 0 && (\n <MenuSection key=\"MobileSupportSection\">\n <LabelLine>{''}</LabelLine>\n <MenuSectionList>\n {supportSection?.map((element) => (\n <StyledMenulink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n {signOut && (\n <div key=\"SignoutButton\" style={{ display: 'flex', margin: 'auto 0 12px 0' }}>\n <Button\n style={{ width: '90%', margin: '0 auto' }}\n variant=\"secondary\"\n onClick={(e) => {\n e.preventDefault();\n signOut(e);\n }}>\n {signOutLabel}\n </Button>\n </div>\n )}\n </Menu>\n );\n};\n\nexport default MobileUserMenu;\n"],"file":"MobileUserMenu.js"}

package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../../Button", "../../styles", "../Avatar", "./MenuLink", "../mobile/CommonStyles"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../../Button", "../../styles", "../Avatar", "./MenuLink", "../mobile/CommonStyles", "../../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../Button"), require("../../styles"), require("../Avatar"), require("./MenuLink"), require("../mobile/CommonStyles"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../Button"), require("../../styles"), require("../Avatar"), require("./MenuLink"), require("../mobile/CommonStyles"), require("../../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.styles, global.Avatar, global.MenuLink, global.CommonStyles);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.styles, global.Avatar, global.MenuLink, global.CommonStyles, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _styles, _Avatar, _MenuLink, _CommonStyles) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _styles, _Avatar, _MenuLink, _CommonStyles, _typography) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -139,18 +139,11 @@
   h5 {
     margin: 27px 0 0 20px;
-    font-style: normal;
-    font-weight: bold;
-    font-size: 20px;
-    line-height: 140%;
-    color: ${_styles.COLORS.neutral_600};
+    ${(0, _typography.HeadlineXXSStyling)(_styles.COLORS.neutral_600)}
   }
   span {
     margin: -5px 0 0 20px;
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 140%;
-    color: ${_styles.COLORS.neutral_600};
+    ${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
     top: -2px;
   }
 `;
@@ -159,10 +152,8 @@
   flex-direction: column;
 `;
   const OrganizationName = _styledComponents2.default.span`
-  font-weight: bold;
-  font-size: 14px;
-  color: ${_styles.COLORS.neutral_600};
   margin-left: 25px;
+  ${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600)}
 `;
   const UserMenu = ({

package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","neutral_200","MenuSection","li","neutral_100","MenuSectionList","UserMenuSectionListStyling","StyledAvatarContainer","AvatarAndName","div","neutral_600","NameAndEmail","OrganizationName","span","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","UserMenu","React","e","document","element","onClick","fontSize","lineHeight","boxSizing","borderRadius","height","display","justifyContent","alignItems","margin","width"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,QAAMA,IAAI,GAAGC,2BAAOC,EAAG;AACvB;AACA;AACA;AACA,sBAAsBC,eAAOC,KAAM;AACnC;AACA;AACA;AACA,uBAAuBC,sBAAS;AAChC,eAAeA,sBAAS;AACxB;AACA;AACA;AACA,sBAAsBF,eAAOG,WAAY;AACzC;AACA;AACA;AACA;AACA;AAlBA,CAAA;AAqBA,QAAMC,WAAW,GAAGN,2BAAOO,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBL,eAAOM,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBA,CAAA;AAqBA,QAAMC,eAAe,GAAGT,2BAAOC,EAAG;AAClC;AACA;AACA;AACA;AACA,IAAIS,wCAA2B;AAL/B,CAAA;AAQA,QAAMC,qBAAqB,GAAGX,gCAAM,uBAANA,CAAwB;AACtD;AADA,CAAA;AAIA,QAAMY,aAAa,GAAGZ,2BAAOa,GAAI;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaX,eAAOY,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,aAAaZ,eAAOY,WAAY;AAChC;AACA;AAnBA,CAAA;AAsBA,QAAMC,YAAY,GAAGf,2BAAOa,GAAI;AAChC;AACA;AAFA,CAAA;AAKA,QAAMG,gBAAgB,GAAGhB,2BAAOiB,IAAK;AACrC;AACA;AACA,WAAWf,eAAOY,WAAY;AAC9B;AAJA,CAAA;;AAoBA,QAAMc,QAAQ,GAAG,CAAC;AAAA,IAAA,SAAA;AAAA,IAAA,QAAA;AAAA,IAAA,KAAA;AAAA,IAAA,gBAAA;AAAA,IAAA,eAAA;AAAA,IAAA,cAAA;AAAA,IAAA,mBAAA;AAAA,IAAA,cAAA;AAAA,IAAA,OAAA;AAA+HD,IAAAA;AAA/H,GAAD,KAA0J;AACzKE,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,eAAA,cAAA,CAAA,CAAA,EAAgC;AAC9B,YAAIC,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AACpBR,UAAAA,eAAe;AAChB;AACF;;AAEDS,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,EAAb,eAAA;AAAgC,MAAA,IAAI,EAApC,MAAA;AAA4C,yBAAgB;AAA5D,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,MAAA,GAAG,EAAC;AAAnB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAuB,MAAA,WAAW,EAAE;AAApC,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAQ,MAAA,IAAI,EAAZ,EAAA;AAAkB,MAAA,SAAS,EAA3B,SAAA;AAAwC,MAAA,QAAQ,EAAhD,QAAA;AAA4D,MAAA,KAAK,EAAE3B,eAAnE,WAAA;AAAuF,MAAA,eAAe,EAAC;AAAvG,KAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAI,0BAAA;AAAJ,KAAA,EAAuB,GAAEgB,SAAU,IAAGC,QADxC,EACE,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAM,0BAAA;AAAN,KAAA,EAPN,KAOM,CAFF,CAJF,CADF,EAUGI,cAAc,IAAIA,cAAc,EAAdA,MAAAA,GAAlBA,CAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAa,MAAA,GAAG,EAAC;AAAjB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAA,EACG,cAAc,EAAd,GAAA,CAAoBS,OAAO,IAAA,aAC1B,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAU,MAAA,GAAG,EAAEA,OAAO,EAAtB,EAAA;AAA4B,MAAA,EAAE,EAAEA,OAAO,EAAvC,EAAA;AAA6C,MAAA,QAAQ,EAAEA,OAAO,EAA9D,KAAA;AAAuE,MAAA,IAAI,EAAEA,OAAO,EAApF,IAAA;AAA4F,MAAA,OAAO,EAAEA,OAAO,EAAEC;AAA9G,KAAA,CADD,CADH,CADF,CAXJ,EAoBGT,mBAAmB,IAAIA,mBAAmB,EAAnBA,MAAAA,GAAvBA,CAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAa,MAAA,GAAG,EAAC;AAAjB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,IAAA,EAAmBH,gBAAgB,IADrC,EACE,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAA,EACG,mBAAmB,EAAnB,GAAA,CAAyBW,OAAO,IAAA,aAC/B,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAU,MAAA,GAAG,EAAEA,OAAO,EAAtB,EAAA;AAA4B,MAAA,EAAE,EAAEA,OAAO,EAAvC,EAAA;AAA6C,MAAA,QAAQ,EAAEA,OAAO,EAA9D,KAAA;AAAuE,MAAA,IAAI,EAAEA,OAAO,EAApF,IAAA;AAA4F,MAAA,OAAO,EAAEA,OAAO,EAAEC;AAA9G,KAAA,CADD,CADH,CAFF,CArBJ,EAAA,aA+BE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAa,MAAA,GAAG,EAAC;AAAjB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAA,EACG,cAAc,EAAd,GAAA,CAAoBD,OAAO,IAAA,aAC1B,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAU,MAAA,GAAG,EAAEA,OAAO,EAAtB,EAAA;AAA4B,MAAA,UAAU,EAAEA,OAAO,CAA/C,UAAA;AAA4D,MAAA,EAAE,EAAEA,OAAO,EAAvE,EAAA;AAA6E,MAAA,QAAQ,EAAEA,OAAO,EAA9F,KAAA;AAAuG,MAAA,IAAI,EAAEA,OAAO,EAApH,IAAA;AAA4H,MAAA,OAAO,EAAEA,OAAO,EAAEC;AAA9I,KAAA,CADD,CADH,EAIGP,OAAO,IAAA,aACN,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AACE,MAAA,KAAK,EADP,KAAA;AAEE,MAAA,SAAS,EAFX,cAAA;AAGE,MAAA,OAAO,EAHT,WAAA;AAIE,MAAA,IAAI,EAJN,KAAA;AAKE,MAAA,OAAO,EAAEI,CAAC,IAAI;AACZA,QAAAA,CAAC,CAADA,cAAAA;AACAJ,QAAAA,OAAO,CAAPA,CAAO,CAAPA;AAPJ,OAAA;AASE,MAAA,KAAK,EAAE;AACLQ,QAAAA,QAAQ,EADH,MAAA;AAELC,QAAAA,UAAU,EAFL,MAAA;AAGLC,QAAAA,SAAS,EAHJ,YAAA;AAILC,QAAAA,YAAY,EAJP,KAAA;AAKLC,QAAAA,MAAM,EALD,MAAA;AAMLC,QAAAA,OAAO,EANF,MAAA;AAOLC,QAAAA,cAAc,EAPT,QAAA;AAQLC,QAAAA,UAAU,EARL,QAAA;AASLC,QAAAA,MAAM,EATD,oBAAA;AAULC,QAAAA,KAAK,EAAE;AAVF;AATT,KAAA,EAtCV,YAsCU,CALJ,CADF,CA/BF,CADF;AAdF,GAAA;;;AAZEzB,IAAAA,S;AACAC,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,gB;AACAC,IAAAA,e;AACAC,IAAAA,c;AACAC,IAAAA,mB;AACAC,IAAAA,c;AACAC,IAAAA,O;AACAC,IAAAA,Y;;oBAqFF,Q","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { COLORS } from '../../styles';\nimport Avatar, { AvatarContainer } from '../Avatar';\nimport MenuLink from './MenuLink';\nimport { UserMenuItem } from '../../types';\nimport { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';\n\nconst Menu = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n min-width: 312px;\n -webkit-animation: ${flowDown} 0.2s ease-in-out;\n animation: ${flowDown} 0.2s ease-in-out;\n position: absolute;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: 100;\n\n .open & {\n display: block;\n }\n`;\n\nconst MenuSection = styled.li`\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ${COLORS.neutral_100};\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\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 padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n margin: 25px 0 0 25px;\n`;\n\nconst AvatarAndName = styled.div`\n display: flex;\n flex-direction: row;\n\n h5 {\n margin: 27px 0 0 20px;\n font-style: normal;\n font-weight: bold;\n font-size: 20px;\n line-height: 140%;\n color: ${COLORS.neutral_600};\n }\n span {\n margin: -5px 0 0 20px;\n font-weight: normal;\n font-size: 14px;\n line-height: 140%;\n color: ${COLORS.neutral_600};\n top: -2px;\n }\n`;\n\nconst NameAndEmail = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n font-weight: bold;\n font-size: 14px;\n color: ${COLORS.neutral_600};\n margin-left: 25px;\n`;\n\ninterface Props {\n firstName: string;\n lastName: string;\n email: string;\n organizationName: string;\n clickMenuAction: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n signOut?: (e: any) => void;\n signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: 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={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <AvatarAndName key=\"AvatarAndNameSection\">\n <StyledAvatarContainer hidePadding={true}>\n <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </StyledAvatarContainer>\n <NameAndEmail>\n <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n <span data-hj-suppress>{email}</span>\n </NameAndEmail>\n </AvatarAndName>\n {accountSection && accountSection?.length > 0 && (\n <MenuSection key=\"MobileAccountSection\">\n <MenuSectionList>\n {accountSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n {organizationSection && organizationSection?.length > 0 && (\n <MenuSection key=\"MobileOrganizationSection\">\n <OrganizationName>{organizationName \|\| ''}</OrganizationName>\n <MenuSectionList>\n {organizationSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n <MenuSection key=\"MobileSupportSection\">\n <MenuSectionList>\n {supportSection?.map(element => (\n <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n {signOut && (\n <Button\n width=\"90%\"\n className=\"UserMenuLink\"\n variant=\"secondary\"\n size=\"big\"\n onClick={e => {\n e.preventDefault();\n signOut(e);\n }}\n style={{\n fontSize: '19px',\n lineHeight: '23px',\n boxSizing: 'border-box',\n borderRadius: '8px',\n height: '56px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n margin: '8px auto 12px auto',\n width: '90%',\n }}>\n {signOutLabel}\n </Button>\n )}\n </MenuSectionList>\n </MenuSection>\n </Menu>\n );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}
1	+ {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","neutral_200","MenuSection","li","neutral_100","MenuSectionList","UserMenuSectionListStyling","StyledAvatarContainer","AvatarAndName","div","HeadlineXXSStyling","ComponentXSStyling","ComponentTextStyle","NameAndEmail","OrganizationName","span","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","UserMenu","React","e","document","element","onClick","fontSize","lineHeight","boxSizing","borderRadius","height","display","justifyContent","alignItems","margin","width"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MenuLink from './MenuLink';\nimport {UserMenuItem} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\n\nconst Menu = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n min-width: 312px;\n -webkit-animation: ${flowDown} 0.2s ease-in-out;\n animation: ${flowDown} 0.2s ease-in-out;\n position: absolute;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: 100;\n\n .open & {\n display: block;\n }\n`;\n\nconst MenuSection = styled.li`\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ${COLORS.neutral_100};\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\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 padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n margin: 25px 0 0 25px;\n`;\n\nconst AvatarAndName = styled.div`\n display: flex;\n flex-direction: row;\n\n h5 {\n margin: 27px 0 0 20px;\n ${HeadlineXXSStyling(COLORS.neutral_600)}\n }\n span {\n margin: -5px 0 0 20px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n top: -2px;\n }\n`;\n\nconst NameAndEmail = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n margin-left: 25px;\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\ninterface Props {\n firstName: string;\n lastName: string;\n email: string;\n organizationName: string;\n clickMenuAction: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n signOut?: (e: any) => void;\n signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: 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={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <AvatarAndName key=\"AvatarAndNameSection\">\n <StyledAvatarContainer hidePadding={true}>\n <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </StyledAvatarContainer>\n <NameAndEmail>\n <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n <span data-hj-suppress>{email}</span>\n </NameAndEmail>\n </AvatarAndName>\n {accountSection && accountSection?.length > 0 && (\n <MenuSection key=\"MobileAccountSection\">\n <MenuSectionList>\n {accountSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n {organizationSection && organizationSection?.length > 0 && (\n <MenuSection key=\"MobileOrganizationSection\">\n <OrganizationName>{organizationName \|\| ''}</OrganizationName>\n <MenuSectionList>\n {organizationSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n <MenuSection key=\"MobileSupportSection\">\n <MenuSectionList>\n {supportSection?.map(element => (\n <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n {signOut && (\n <Button\n width=\"90%\"\n className=\"UserMenuLink\"\n variant=\"secondary\"\n size=\"big\"\n onClick={e => {\n e.preventDefault();\n signOut(e);\n }}\n style={{\n fontSize: '19px',\n lineHeight: '23px',\n boxSizing: 'border-box',\n borderRadius: '8px',\n height: '56px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n margin: '8px auto 12px auto',\n width: '90%',\n }}>\n {signOutLabel}\n </Button>\n )}\n </MenuSectionList>\n </MenuSection>\n </Menu>\n );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}

package/dist/umd/GlobalNavigationBar/mobile/CommonStyles.js CHANGED Viewed

@@ -113,7 +113,10 @@
     width: 80%;
     height: 48px;
     margin: 0 auto 0 12px;
-    line-height: 48px;
+    a {
+      height: 100%;
+    }
   }
 `;
   const UserMenuSectionListStyling = exports.UserMenuSectionListStyling = _styledComponents.css`

package/dist/umd/GlobalNavigationBar/mobile/CommonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","Menu","ul","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","css","primary_20","primary_600","primary_500","primary_100","primary_800","neutral_300","neutral_100","MenuLink","ComponentMStyling","ComponentTextStyle","MenuWrapper","props","flowDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,QAAMA,SAAS,WAATA,SAAS,GAAGC,2BAAOC,GAAI;AACpC;AACA;AAFO,CAAA;AAKA,QAAMC,MAAM,WAANA,MAAM,GAAGF,2BAAOG,MAAO;AACpC,sBAAsBC,eAAOC,KAAM;AACnC;AACA;AAHO,CAAA;AAMP,QAAMC,QAAQ,GAAGC,2BAAU;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,CAAA;AAWA,QAAMC,SAAS,GAAGD,2BAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,CAAA;AAWO,QAAME,IAAI,WAAJA,IAAI,GAAGT,2BAAOU,EAAG;AAC9B;AACA;AACA;AACA,sBAAsBN,eAAOC,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIM,oBAAYC,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA,yBAAyBN,QAAS;AAClC,iBAAiBA,QAAS;AAC1B;AACA;AACA;AACA;AACA,yBAAyBE,SAAU;AACnC,iBAAiBA,SAAU;AAC3B;AA9BO,CAAA;AAiCA,QAAMK,KAAK,WAALA,KAAK,GAAGb,2BAAOC,GAAI;AAChC;AACA;AAFO,CAAA;AAKA,QAAMa,QAAQ,WAARA,QAAQ,GAAGd,2BAAOe,IAAK;AACpC,WAAWX,eAAOY,WAAY;AAC9B;AACA;AACA;AAJO,CAAA;AAOA,QAAMC,WAAW,WAAXA,WAAW,GAAGjB,2BAAOkB,EAAG;AACrC;AACA;AACA;AACA;AACA;AACA;AANO,CAAA;AASA,QAAMC,eAAe,WAAfA,eAAe,GAAGnB,2BAAOU,EAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AATO~~,CAAA;~~AAYA~~,QAAMU,0BAA0B,WAA1BA,0BAA0B,GAAGC,qBAAI;AAC9C;AACA,wBAAwBjB,eAAOkB,UAAW;AAC1C;AACA,eAAelB,eAAOmB,WAAY;AAClC;AACA;AACA,eAAenB,eAAOmB,WAAY;AAClC;AACA;AACA;AACA;AACA,8BAA8BnB,eAAOoB,WAAY;AACjD;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBpB,eAAOqB,WAAY;AACrC;AACA;AACA,eAAerB,eAAOsB,WAAY;AAClC;AACA;AACA,eAAetB,eAAOsB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,eAAetB,eAAOuB,WAAY;AAClC;AACA;AACA,eAAevB,eAAOuB,WAAY;AAClC;AACA,wBAAwBvB,eAAOwB,WAAY;AAC3C;AArCO,CAAA;AAwCA,QAAMC,QAAQ,WAARA,QAAQ,GAAG7B,gCAAM,uBAANA,CAAgB;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,IAAI8B,mCAAkBC,+BAAD,OAAjBD,EAA8C1B,eAA7B,KAAjB0B,CAA4D;AAChE;AACA;AACA;AACA;AACA;AAZO,CAAA;AAeA,QAAME,WAAW,WAAXA,WAAW,GAAGhC,2BAAOC,GAAsB;AACxD,sBAAsBG,eAAOC,KAAM;AACnC,aAAc4B,KAAD,IAAYA,KAAK,CAALA,SAAAA,GAAAA,MAAAA,GAA2B,MAAQ;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB7B,eAAOC,KAAM;AAC/B;AAbO,CAAA;AAoBA,QAAM6B,QAAQ,WAARA,QAAQ,GAAG3B,2BAAU;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARO,CAAA","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';\n\nexport const RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const Button = styled.button`\n background-color: ${COLORS.white};\n font-weight: bold;\n border: 0;\n`;\n\nconst flowLeft = keyframes`\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst flowRight = keyframes`\n 0% {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(100%);\n }\n`;\n\nexport const Menu = styled.ul`\n height: 100%;\n list-style: none;\n margin: 0 auto 0 auto;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n right: 0;\n top: 0;\n min-width: 300px;\n position: absolute;\n z-index: 100;\n align-items: center;\n width: 320px;\n padding-inline-start: 0;\n\n ${BREAKPOINTS.SMALL} {\n min-width: 360px;\n }\n\n .open & {\n display: block;\n -webkit-animation: ${flowLeft} 0.3s ease-in-out;\n animation: ${flowLeft} 0.3s ease-in-out;\n }\n\n .closed & {\n display: block;\n -webkit-animation: ${flowRight} 0.3s ease-in-out;\n animation: ${flowRight} 0.3s ease-in-out;\n }\n`;\n\nexport const Right = styled.div`\n display: flex;\n margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n color: ${COLORS.neutral_600};\n font-weight: bold;\n font-size: 14px;\n margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n margin-top: 16px;\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nexport const MenuSectionList = styled.ul`\n list-style: none;\n padding: 0;\n\n li {\n width: 80%;\n height: 48px;\n margin: 0 auto 0 12px;\n ~~line-~~height: ~~48px;\~~n }\n`;\n\nexport const UserMenuSectionListStyling = css`\n li:hover:not(.disabled) {\n background-color: ${COLORS.primary_20};\n a {\n color: ${COLORS.primary_600};\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n li:focus-within:not(.disabled) {\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n background: ${COLORS.primary_100};\n box-shadow: none;\n a {\n color: ${COLORS.primary_800};\n }\n svg {\n color: ${COLORS.primary_800};\n }\n }\n\n .disabled {\n a {\n color: ${COLORS.neutral_300};\n }\n svg {\n color: ${COLORS.neutral_300};\n }\n background-color: ${COLORS.neutral_100};\n }\n`;\n\nexport const MenuLink = styled(NavLink)`\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n`;\n\nexport const MenuWrapper = styled.div<MenuWrapperProps>`\n background-color: ${COLORS.white};\n display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n\n &:focus-within,\n &:hover,\n &.open {\n background: ${COLORS.white};\n }\n`;\n\ninterface MenuWrapperProps {\n isVisible: boolean;\n}\n\nexport const flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n"],"file":"CommonStyles.js"}
1	+ {"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","Menu","ul","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","css","primary_20","primary_600","primary_500","primary_100","primary_800","neutral_300","neutral_100","MenuLink","ComponentMStyling","ComponentTextStyle","MenuWrapper","props","flowDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,QAAMA,SAAS,WAATA,SAAS,GAAGC,2BAAOC,GAAI;AACpC;AACA;AAFO,CAAA;AAKA,QAAMC,MAAM,WAANA,MAAM,GAAGF,2BAAOG,MAAO;AACpC,sBAAsBC,eAAOC,KAAM;AACnC;AACA;AAHO,CAAA;AAMP,QAAMC,QAAQ,GAAGC,2BAAU;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,CAAA;AAWA,QAAMC,SAAS,GAAGD,2BAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,CAAA;AAWO,QAAME,IAAI,WAAJA,IAAI,GAAGT,2BAAOU,EAAG;AAC9B;AACA;AACA;AACA,sBAAsBN,eAAOC,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIM,oBAAYC,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA,yBAAyBN,QAAS;AAClC,iBAAiBA,QAAS;AAC1B;AACA;AACA;AACA;AACA,yBAAyBE,SAAU;AACnC,iBAAiBA,SAAU;AAC3B;AA9BO,CAAA;AAiCA,QAAMK,KAAK,WAALA,KAAK,GAAGb,2BAAOC,GAAI;AAChC;AACA;AAFO,CAAA;AAKA,QAAMa,QAAQ,WAARA,QAAQ,GAAGd,2BAAOe,IAAK;AACpC,WAAWX,eAAOY,WAAY;AAC9B;AACA;AACA;AAJO,CAAA;AAOA,QAAMC,WAAW,WAAXA,WAAW,GAAGjB,2BAAOkB,EAAG;AACrC;AACA;AACA;AACA;AACA;AACA;AANO,CAAA;AASA,QAAMC,eAAe,WAAfA,eAAe,GAAGnB,2BAAOU,EAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAZO,CAAA;AAeA,QAAMU,0BAA0B,WAA1BA,0BAA0B,GAAGC,qBAAI;AAC9C;AACA,wBAAwBjB,eAAOkB,UAAW;AAC1C;AACA,eAAelB,eAAOmB,WAAY;AAClC;AACA;AACA,eAAenB,eAAOmB,WAAY;AAClC;AACA;AACA;AACA;AACA,8BAA8BnB,eAAOoB,WAAY;AACjD;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBpB,eAAOqB,WAAY;AACrC;AACA;AACA,eAAerB,eAAOsB,WAAY;AAClC;AACA;AACA,eAAetB,eAAOsB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,eAAetB,eAAOuB,WAAY;AAClC;AACA;AACA,eAAevB,eAAOuB,WAAY;AAClC;AACA,wBAAwBvB,eAAOwB,WAAY;AAC3C;AArCO,CAAA;AAwCA,QAAMC,QAAQ,WAARA,QAAQ,GAAG7B,gCAAM,uBAANA,CAAgB;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,IAAI8B,mCAAkBC,+BAAD,OAAjBD,EAA8C1B,eAA7B,KAAjB0B,CAA4D;AAChE;AACA;AACA;AACA;AACA;AAZO,CAAA;AAeA,QAAME,WAAW,WAAXA,WAAW,GAAGhC,2BAAOC,GAAsB;AACxD,sBAAsBG,eAAOC,KAAM;AACnC,aAAc4B,KAAD,IAAYA,KAAK,CAALA,SAAAA,GAAAA,MAAAA,GAA2B,MAAQ;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB7B,eAAOC,KAAM;AAC/B;AAbO,CAAA;AAoBA,QAAM6B,QAAQ,WAARA,QAAQ,GAAG3B,2BAAU;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARO,CAAA","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';\n\nexport const RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const Button = styled.button`\n background-color: ${COLORS.white};\n font-weight: bold;\n border: 0;\n`;\n\nconst flowLeft = keyframes`\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst flowRight = keyframes`\n 0% {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(100%);\n }\n`;\n\nexport const Menu = styled.ul`\n height: 100%;\n list-style: none;\n margin: 0 auto 0 auto;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n right: 0;\n top: 0;\n min-width: 300px;\n position: absolute;\n z-index: 100;\n align-items: center;\n width: 320px;\n padding-inline-start: 0;\n\n ${BREAKPOINTS.SMALL} {\n min-width: 360px;\n }\n\n .open & {\n display: block;\n -webkit-animation: ${flowLeft} 0.3s ease-in-out;\n animation: ${flowLeft} 0.3s ease-in-out;\n }\n\n .closed & {\n display: block;\n -webkit-animation: ${flowRight} 0.3s ease-in-out;\n animation: ${flowRight} 0.3s ease-in-out;\n }\n`;\n\nexport const Right = styled.div`\n display: flex;\n margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n color: ${COLORS.neutral_600};\n font-weight: bold;\n font-size: 14px;\n margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n margin-top: 16px;\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nexport const MenuSectionList = styled.ul`\n list-style: none;\n padding: 0;\n\n li {\n width: 80%;\n height: 48px;\n margin: 0 auto 0 12px;\n \n a {\n height: 100%;\n }\n }\n`;\n\nexport const UserMenuSectionListStyling = css`\n li:hover:not(.disabled) {\n background-color: ${COLORS.primary_20};\n a {\n color: ${COLORS.primary_600};\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n li:focus-within:not(.disabled) {\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n background: ${COLORS.primary_100};\n box-shadow: none;\n a {\n color: ${COLORS.primary_800};\n }\n svg {\n color: ${COLORS.primary_800};\n }\n }\n\n .disabled {\n a {\n color: ${COLORS.neutral_300};\n }\n svg {\n color: ${COLORS.neutral_300};\n }\n background-color: ${COLORS.neutral_100};\n }\n`;\n\nexport const MenuLink = styled(NavLink)`\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n`;\n\nexport const MenuWrapper = styled.div<MenuWrapperProps>`\n background-color: ${COLORS.white};\n display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n\n &:focus-within,\n &:hover,\n &.open {\n background: ${COLORS.white};\n }\n`;\n\ninterface MenuWrapperProps {\n isVisible: boolean;\n}\n\nexport const flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n"],"file":"CommonStyles.js"}

package/dist/umd/GlobalNavigationBar/mobile/MobileMenu.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../../styles", "../Actions", "../../icons/systemicons/SystemIcons", "./MobileActionMenu", "./CommonStyles", "react-router-dom", "../../Switcher", "../Avatar", "../UserMenu/MobileUserMenu", "../../Button", "../../assets"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../../styles", "../Actions", "../../icons/systemicons/SystemIcons", "./MobileActionMenu", "./CommonStyles", "react-router-dom", "../../Switcher", "../Avatar", "../UserMenu/MobileUserMenu", "../../Button", "../../assets", "../../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("../Actions"), require("../../icons/systemicons/SystemIcons"), require("./MobileActionMenu"), require("./CommonStyles"), require("react-router-dom"), require("../../Switcher"), require("../Avatar"), require("../UserMenu/MobileUserMenu"), require("../../Button"), require("../../assets"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("../Actions"), require("../../icons/systemicons/SystemIcons"), require("./MobileActionMenu"), require("./CommonStyles"), require("react-router-dom"), require("../../Switcher"), require("../Avatar"), require("../UserMenu/MobileUserMenu"), require("../../Button"), require("../../assets"), require("../../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Actions, global.SystemIcons, global.MobileActionMenu, global.CommonStyles, global.reactRouterDom, global.Switcher, global.Avatar, global.MobileUserMenu, global.Button, global.assets);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Actions, global.SystemIcons, global.MobileActionMenu, global.CommonStyles, global.reactRouterDom, global.Switcher, global.Avatar, global.MobileUserMenu, global.Button, global.assets, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Actions, _SystemIcons, _MobileActionMenu, _CommonStyles, _reactRouterDom, _Switcher, _Avatar, _MobileUserMenu, _Button, _assets) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Actions, _SystemIcons, _MobileActionMenu, _CommonStyles, _reactRouterDom, _Switcher, _Avatar, _MobileUserMenu, _Button, _assets, _typography) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -88,9 +88,8 @@
   }
   const SwitchButton = _styledComponents2.default.span`
-  color: ${_styles.COLORS.neutral_600};
-  font-size: 14px;
-  font-weight: bold;
+  ${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600)}
   padding: 0;
   border: 0;
   margin: 0 auto 0 12px;
@@ -116,9 +115,6 @@
   }
 `;
   const StyledNavItem = (0, _styledComponents2.default)(_Switcher.SwitcherMenuItem)`
-  font-style: normal;
-  font-weight: normal;
-  font-size: 19px;
   padding: 0 0 0 20px;
   margin: 0 2px;
@@ -127,7 +123,7 @@
   text-align: center;
   position: relative;
-  color: ${_styles.COLORS.black};
+  ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
   text-decoration: none;
   svg {

package/dist/umd/GlobalNavigationBar/mobile/MobileMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["SwitchButton","styled","span","COLORS","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","BottomRowLayout","BREAKPOINTS","SMALL","StyledNavItem","black","primary_500","primary_800","neutral_300","neutral_100","primary_600","primary_20","primary_100","SwitcherButton","name","navigationOptions","secondaryNavigationOptions","clickMenuAction","firstName","lastName","email","signout","isAuthenticated","notifications","switcherAction","accountSection","organizationSection","supportSection","accountMenuHeader","signOutLabel","organizationName","showUserMenu","setShowUserMenu","MobileMenu","React","notificationMenuRef","userMenuRef","userRef","location","actions","setShowNotificationMenu","fireAction","ref","action","isPressingEnter","e","showNotificationMenu","notification","no","label","padding","margin"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavButton, NavOption, ActionOptions, UserMenuItem } from '../../types';\nimport Actions from '../Actions';\nimport { Close, Notification, SwitchApp } from '../../icons/systemicons/SystemIcons';\nimport MobileActionMenu from './MobileActionMenu';\nimport { Right, RowLayout, MenuWrapper, MenuSection, MenuSectionList } from './CommonStyles';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport { SwitcherMenuItem } from '../../Switcher';\nimport Avatar, { AvatarContainer } from '../Avatar';\nimport MobileUserMenu from '../UserMenu/MobileUserMenu';\nimport { IconButton } from '../../Button';\nimport { LaerdalLogo } from '../../assets';\n\nconst SwitchButton = styled.span`\n color: ${COLORS.neutral_600};\n font-size: 14px;\n font-weight: bold;\n padding: 0;\n border: 0;\n margin: 0 auto 0 12px;\n line-height: 48px;\n`;\n\nconst BottomPinnedSection = styled.div`\n position: absolute;\n left: 0;\n width: 100%;\n bottom: 0;\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FirstRowLayout = styled(RowLayout)`\n margin-top: 10px;\n padding: 12px;\n`;\n\nconst BottomRowLayout = styled(RowLayout)`\n margin: 8px auto 0 0;\n width: 95%;\n height: 48px;\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n`;\n\nconst StyledNavItem = styled(SwitcherMenuItem)`\n font-style: normal;\n font-weight: normal;\n font-size: 19px;\n padding: 0 0 0 20px;\n margin: 0 2px;\n\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n color: ${COLORS.black};\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: 0;\n top: 0;\n bottom: 0;\n width: 4px;\n background-color: transparent;\n }\n\n &.active:not(.disabled) {\n font-weight: bold;\n &:after {\n background-color: ${COLORS.primary_500};\n }\n\n color: ${COLORS.primary_800};\n svg path {\n fill: ${COLORS.primary_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 &:after {\n background-color: ${COLORS.primary_500};\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`;\nconst SwitcherButton = styled.div`\n display: flex;\n margin-left: auto;\n\n line-height: 48px;\n button:last-child {\n margin: 0 !important;\n }\n`;\n\ntype Props = {\n name: string;\n navigationOptions?: NavOption[];\n secondaryNavigationOptions?: NavOption[];\n secondaryButton?: NavButton;\n actions?: ActionOptions;\n clickMenuAction: () => void;\n firstName: string;\n lastName: string;\n email: string;\n signout?: (e: any) => void;\n isAuthenticated?: boolean;\n notifications?: NavOption[];\n switcherAction?: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n accountMenuHeader: string;\n signOutLabel: string;\n organizationName: string;\n useUserMenu: boolean \| undefined;\n showUserMenu: boolean;\n setShowUserMenu: (show: boolean) => void;\n};\n\nconst MobileMenu = ({\n clickMenuAction,\n navigationOptions,\n actions,\n firstName,\n lastName,\n email,\n signout,\n notifications,\n accountSection,\n organizationSection,\n supportSection,\n switcherAction,\n accountMenuHeader,\n signOutLabel,\n organizationName,\n useUserMenu,\n showUserMenu,\n setShowUserMenu,\n}: Props) => {\n const [showNotificationMenu, setShowNotificationMenu] = React.useState<boolean>(false);\n const notificationMenuRef = React.useRef(null);\n const userMenuRef = React.useRef(null);\n const userRef = React.useRef(null);\n\n const location = useLocation();\n\n if (actions?.user) {\n actions.user = () => setShowUserMenu(true);\n }\n if (actions?.notification) {\n actions.notification = () => setShowNotificationMenu(true);\n }\n\n const fireAction = (action: (() => void) \| undefined, ref: React.MutableRefObject<HTMLButtonElement \| null> \| undefined = undefined) => {\n ref?.current?.blur();\n !!action && action();\n };\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n React.useEffect(() => {\n clickMenuAction();\n }, [location]);\n\n return (\n <>\n {actions?.notification && (\n <MenuWrapper ref={notificationMenuRef} className={showNotificationMenu ? 'open' : ''} isVisible={showNotificationMenu}>\n <MobileActionMenu\n name=\"Notifications\"\n clickMenuAction={() => setShowNotificationMenu(false)}\n navigationOptions={notifications}\n actionList={{\n notification: () => {},\n }}\n />\n </MenuWrapper>\n )}\n {actions?.user && (\n <MenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : ''} isVisible={showUserMenu}>\n <MobileUserMenu\n accountMenuHeader={accountMenuHeader}\n firstName={firstName}\n lastName={lastName}\n email={email}\n organizationName={organizationName}\n clickMenuAction={clickMenuAction}\n accountSection={accountSection}\n organizationSection={organizationSection}\n supportSection={supportSection}\n signOut={signout}\n signOutLabel={signOutLabel}\n />\n </MenuWrapper>\n )}\n <FirstRowLayout>\n {firstName && lastName && (\n <AvatarContainer\n id=\"avatarContainer\"\n ref={userRef}\n onClick={actions?.user}\n onKeyDown={(e: any) => (isPressingEnter(e) ? fireAction(actions?.user, userRef) : null)}\n inMobileMenu={true}\n hideOnLowWidth={false}>\n <Avatar size={36} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </AvatarContainer>\n )}\n {actions?.notification && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={false}\n isInMobileMenu={true}\n action={() => fireAction(actions?.notification)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification) : null)}>\n <Notification size=\"24px\" />\n </IconButton>\n )}\n <Right>\n <Actions\n actions={actions}\n firstName={firstName}\n lastName={lastName}\n isInMobileMenu={true}\n hideOnLowWidth={false}\n useUserMenu={useUserMenu}\n setShowUserMenu={setShowUserMenu}\n />\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => clickMenuAction()} isInMobileMenu={true}>\n <Close size=\"24px\" />\n </IconButton>\n </Right>\n </FirstRowLayout>\n <MenuSection>\n <MenuSectionList>\n {navigationOptions?.map((no) => (\n <li key={no.label}>\n <StyledNavItem\n as={NavLink}\n exact={no?.exact}\n to={no.to}\n onClick={() => {\n if (no?.onClick) {\n no?.onClick();\n }\n }}>\n {no.label}\n </StyledNavItem>\n </li>\n ))}\n </MenuSectionList>\n </MenuSection>\n\n <BottomPinnedSection>\n <MenuSection style={{ padding: '0 12px 12px 12px', margin: '0' }}>\n <MenuSectionList>\n <BottomRowLayout>\n <LaerdalLogo />\n {switcherAction && (\n <SwitcherButton>\n <SwitchButton onClick={() => switcherAction()}>Switch site</SwitchButton>{' '}\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={false}\n isInMobileMenu={true}\n id=\"globalNavAppsButton\"\n action={() => switcherAction()}\n onKeyPress={(e: any) => (isPressingEnter(e) ? switcherAction() : null)}>\n <SwitchApp size=\"24px\" />\n </IconButton>\n </SwitcherButton>\n )}\n </BottomRowLayout>\n </MenuSectionList>\n </MenuSection>\n </BottomPinnedSection>\n </>\n );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}
1	+ {"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["SwitchButton","styled","span","ComponentXSStyling","ComponentTextStyle","COLORS","BottomPinnedSection","div","neutral_200","FirstRowLayout","BottomRowLayout","BREAKPOINTS","SMALL","StyledNavItem","ComponentMStyling","primary_500","primary_800","neutral_300","neutral_100","primary_600","primary_20","primary_100","SwitcherButton","name","navigationOptions","secondaryNavigationOptions","clickMenuAction","firstName","lastName","email","signout","isAuthenticated","notifications","switcherAction","accountSection","organizationSection","supportSection","accountMenuHeader","signOutLabel","organizationName","showUserMenu","setShowUserMenu","MobileMenu","React","notificationMenuRef","userMenuRef","userRef","location","actions","setShowNotificationMenu","fireAction","ref","action","isPressingEnter","e","showNotificationMenu","notification","no","label","padding","margin"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\nimport {ActionOptions, NavButton, NavOption, UserMenuItem} from '../../types';\nimport Actions from '../Actions';\nimport {Close, Notification, SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport MobileActionMenu from './MobileActionMenu';\nimport {MenuSection, MenuSectionList, MenuWrapper, Right, RowLayout} from './CommonStyles';\nimport {NavLink, useLocation} from 'react-router-dom';\nimport {SwitcherMenuItem} from '../../Switcher';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MobileUserMenu from '../UserMenu/MobileUserMenu';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {ComponentMStyling, ComponentXSStyling} from '../../styles/typography';\n\nconst SwitchButton = styled.span`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n padding: 0;\n border: 0;\n margin: 0 auto 0 12px;\n line-height: 48px;\n`;\n\nconst BottomPinnedSection = styled.div`\n position: absolute;\n left: 0;\n width: 100%;\n bottom: 0;\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FirstRowLayout = styled(RowLayout)`\n margin-top: 10px;\n padding: 12px;\n`;\n\nconst BottomRowLayout = styled(RowLayout)`\n margin: 8px auto 0 0;\n width: 95%;\n height: 48px;\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n`;\n\nconst StyledNavItem = styled(SwitcherMenuItem)`\n padding: 0 0 0 20px;\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.black)}\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: 0;\n top: 0;\n bottom: 0;\n width: 4px;\n background-color: transparent;\n }\n\n &.active:not(.disabled) {\n font-weight: bold;\n &:after {\n background-color: ${COLORS.primary_500};\n }\n\n color: ${COLORS.primary_800};\n svg path {\n fill: ${COLORS.primary_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 &:after {\n background-color: ${COLORS.primary_500};\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`;\nconst SwitcherButton = styled.div`\n display: flex;\n margin-left: auto;\n\n line-height: 48px;\n button:last-child {\n margin: 0 !important;\n }\n`;\n\ntype Props = {\n name: string;\n navigationOptions?: NavOption[];\n secondaryNavigationOptions?: NavOption[];\n secondaryButton?: NavButton;\n actions?: ActionOptions;\n clickMenuAction: () => void;\n firstName: string;\n lastName: string;\n email: string;\n signout?: (e: any) => void;\n isAuthenticated?: boolean;\n notifications?: NavOption[];\n switcherAction?: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n accountMenuHeader: string;\n signOutLabel: string;\n organizationName: string;\n useUserMenu: boolean \| undefined;\n showUserMenu: boolean;\n setShowUserMenu: (show: boolean) => void;\n};\n\nconst MobileMenu = ({\n clickMenuAction,\n navigationOptions,\n actions,\n firstName,\n lastName,\n email,\n signout,\n notifications,\n accountSection,\n organizationSection,\n supportSection,\n switcherAction,\n accountMenuHeader,\n signOutLabel,\n organizationName,\n useUserMenu,\n showUserMenu,\n setShowUserMenu,\n}: Props) => {\n const [showNotificationMenu, setShowNotificationMenu] = React.useState<boolean>(false);\n const notificationMenuRef = React.useRef(null);\n const userMenuRef = React.useRef(null);\n const userRef = React.useRef(null);\n\n const location = useLocation();\n\n if (actions?.user) {\n actions.user = () => setShowUserMenu(true);\n }\n if (actions?.notification) {\n actions.notification = () => setShowNotificationMenu(true);\n }\n\n const fireAction = (action: (() => void) \| undefined, ref: React.MutableRefObject<HTMLButtonElement \| null> \| undefined = undefined) => {\n ref?.current?.blur();\n !!action && action();\n };\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n React.useEffect(() => {\n clickMenuAction();\n }, [location]);\n\n return (\n <>\n {actions?.notification && (\n <MenuWrapper ref={notificationMenuRef} className={showNotificationMenu ? 'open' : ''} isVisible={showNotificationMenu}>\n <MobileActionMenu\n name=\"Notifications\"\n clickMenuAction={() => setShowNotificationMenu(false)}\n navigationOptions={notifications}\n actionList={{\n notification: () => {},\n }}\n />\n </MenuWrapper>\n )}\n {actions?.user && (\n <MenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : ''} isVisible={showUserMenu}>\n <MobileUserMenu\n accountMenuHeader={accountMenuHeader}\n firstName={firstName}\n lastName={lastName}\n email={email}\n organizationName={organizationName}\n clickMenuAction={clickMenuAction}\n accountSection={accountSection}\n organizationSection={organizationSection}\n supportSection={supportSection}\n signOut={signout}\n signOutLabel={signOutLabel}\n />\n </MenuWrapper>\n )}\n <FirstRowLayout>\n {firstName && lastName && (\n <AvatarContainer\n id=\"avatarContainer\"\n ref={userRef}\n onClick={actions?.user}\n onKeyDown={(e: any) => (isPressingEnter(e) ? fireAction(actions?.user, userRef) : null)}\n inMobileMenu={true}\n hideOnLowWidth={false}>\n <Avatar size={36} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </AvatarContainer>\n )}\n {actions?.notification && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={false}\n isInMobileMenu={true}\n action={() => fireAction(actions?.notification)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification) : null)}>\n <Notification size=\"24px\" />\n </IconButton>\n )}\n <Right>\n <Actions\n actions={actions}\n firstName={firstName}\n lastName={lastName}\n isInMobileMenu={true}\n hideOnLowWidth={false}\n useUserMenu={useUserMenu}\n setShowUserMenu={setShowUserMenu}\n />\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => clickMenuAction()} isInMobileMenu={true}>\n <Close size=\"24px\" />\n </IconButton>\n </Right>\n </FirstRowLayout>\n <MenuSection>\n <MenuSectionList>\n {navigationOptions?.map((no) => (\n <li key={no.label}>\n <StyledNavItem\n as={NavLink}\n exact={no?.exact}\n to={no.to}\n onClick={() => {\n if (no?.onClick) {\n no?.onClick();\n }\n }}>\n {no.label}\n </StyledNavItem>\n </li>\n ))}\n </MenuSectionList>\n </MenuSection>\n\n <BottomPinnedSection>\n <MenuSection style={{ padding: '0 12px 12px 12px', margin: '0' }}>\n <MenuSectionList>\n <BottomRowLayout>\n <LaerdalLogo />\n {switcherAction && (\n <SwitcherButton>\n <SwitchButton onClick={() => switcherAction()}>Switch site</SwitchButton>{' '}\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={false}\n isInMobileMenu={true}\n id=\"globalNavAppsButton\"\n action={() => switcherAction()}\n onKeyPress={(e: any) => (isPressingEnter(e) ? switcherAction() : null)}>\n <SwitchApp size=\"24px\" />\n </IconButton>\n </SwitcherButton>\n )}\n </BottomRowLayout>\n </MenuSectionList>\n </MenuSection>\n </BottomPinnedSection>\n </>\n );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}