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

package/dist/umd/GlobalNavigationBar/Logo.js

@@ -90,7 +90,7 @@
   svg {
     width: 66px;
     height: 36px;
-    color: ${props => props.color};
+    color: ${props => props.$color};
     ${_styles.BREAKPOINTS.MEDIUM} {
       width: 88px;
       height: 48px;
@@ -118,18 +118,18 @@
   const Name = _styledComponents2.default.span`
   margin-left: 8px;
   padding-left: 8px;
-  border-left: 1px solid ${props => props.color || _styles.COLORS.black};
+  border-left: 1px solid ${props => props.$color || _styles.COLORS.black};
   letter-spacing: -0.02em;
 
-  ${props => props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black)}
-  
+  ${props => props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black)}
+
   font-weight: 300 !important;
   line-height: 24px !important;
-  
+
   ${_styles.BREAKPOINTS.MEDIUM} {
     margin-left: 12px;
     padding-left: 12px;
-    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black)}
+    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black)}
   }
 `;
   const BetaTag = _styledComponents2.default.span`
@@ -140,7 +140,7 @@
   border-left: none;
   border-radius: 2px;
 
-  ${props => (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.color || _styles.COLORS.white)}
+  ${props => (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.white)}
 `;
 
   const Logo = ({
@@ -161,13 +161,13 @@
           onClick();
         }
       },
-      color: color
+      $color: color
     }, color === _styles.COLORS.white ? /*#__PURE__*/React.createElement(_assets.LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(_assets.LaerdalLogo, null), /*#__PURE__*/React.createElement(Name, {
-      color: color,
+      $color: color,
       noSizeChangeOnMobile: noSizeChangeOnMobile || false
     }, name), showBetaTag && /*#__PURE__*/React.createElement(BetaTag, {
       backgroundColor: betaTagBackgroundColor,
-      color: betaTagColor
+      $color: betaTagColor
     }, "BETA")));
   };
 

package/dist/umd/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","styled","props","color","BREAKPOINTS","MEDIUM","LogoContainer","div","Name","span","COLORS","black","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","BetaTag","accent2_500","name","showBetaTag","onClick","to","noSizeChangeOnMobile","betaTagBackgroundColor","betaTagColor","Logo","e"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,UAAU,GAAGC,gCAAM,oBAANA,CAAiC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcC,KAAD,IAAWA,KAAK,CAACC,KAAM;AACpC,MAAMC,oBAAYC,MAAO;AACzB;AACA;AACA;AACA;AAhBA,CAAA;AAmBA,QAAMC,aAAa,GAAGL,2BAAOM,GAAI;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIH,oBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhBA,CAAA;AAmBA,QAAMG,IAAI,GAAGP,2BAAOQ,IAAwD;AAC5E;AACA;AACA,2BAA4BP,KAAD,IAAWA,KAAK,CAALA,KAAAA,IAAeQ,eAAOC,KAAM;AAClE;AACA;AACA,IAAKT,KAAD,IAAWA,KAAK,CAALA,oBAAAA,GACHU,mCAAkBC,2BAAD,OAAjBD,EAA8CV,KAAK,CAALA,KAAAA,IAAeQ,eAD1DR,KACHU,CADGV,GAEHY,oCAAmBD,2BAAD,OAAlBC,EAA+CZ,KAAK,CAALA,KAAAA,IAAeQ,eAA5C,KAAlBI,CAA4E;AACxF;AACA;AACA;AACA;AACA,IAAIV,oBAAYC,MAAO;AACvB;AACA;AACA,MAAOH,KAAD,IAAWU,mCAAkBC,2BAAD,OAAjBD,EAA8CV,KAAK,CAALA,KAAAA,IAAeQ,eAA5C,KAAjBE,CAA2E;AAC5F;AAjBA,CAAA;AAoBA,QAAMG,OAAO,GAAGd,2BAAOQ,IAAmD;AAC1E,sBAAuBP,KAAD,IAAWA,KAAK,CAALA,eAAAA,IAAyBQ,eAAOM,WAAY;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,IAAKd,KAAD,IAAWY,oCAAmBD,2BAAD,aAAlBC,EAAqDZ,KAAK,CAALA,KAAAA,IAAeQ,eAAlD,KAAlBI,CAAkF;AARjG,CAAA;;AAsBA,QAAMU,IAAI,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,WAAA;AAAA,IAAA,OAAA;AAAA,IAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IAAA,oBAAA;AAAA,IAAA,sBAAA;AAAuFD,IAAAA;AAAvF,GAAD,KAAqJ;AAChK,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AACE,MAAA,EAAE,EAAEH,EAAE,IADR,GAAA;AAEE,MAAA,WAAW,EAAGK,CAAD,IAAYA,CAAC,CAF5B,cAE2BA,EAF3B;AAGE,MAAA,OAAO,EAAE,MAAM;AACb,YAAA,OAAA,EAAa;AACXN,UAAAA,OAAO;AACR;AANL,OAAA;AAQE,MAAA,KAAK,EAAEhB;AART,KAAA,EASGA,KAAK,KAAKO,eAAVP,KAAAA,GAAAA,aAAyB,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAzBA,IAAyB,CAAzBA,GAAAA,aAAgD,KAAA,CAAA,aAAA,CAAA,mBAAA,EATnD,IASmD,CATnD,EAAA,aAUE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,KAAK,EAAX,KAAA;AAAoB,MAAA,oBAAoB,EAAEkB,oBAAoB,IAAI;AAAlE,KAAA,EAVF,IAUE,CAVF,EAaGH,WAAW,IAAA,aACV,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAS,MAAA,eAAe,EAAxB,sBAAA;AAAkD,MAAA,KAAK,EAAEK;AAAzD,KAAA,EAhBR,MAgBQ,CAdJ,CADF,CADF;AADF,GAAA;;;AAVEN,IAAAA,I;AACAC,IAAAA,W;AACAC,IAAAA,O;AACAC,IAAAA,E;AACAjB,IAAAA,K;AACAkB,IAAAA,oB;AACAC,IAAAA,sB;AACAC,IAAAA,Y;;oBA6BF,I","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) => props.noSizeChangeOnMobile\n          ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)\n          : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","styled","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","Name","span","COLORS","black","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","BetaTag","accent2_500","name","showBetaTag","onClick","to","color","noSizeChangeOnMobile","betaTagBackgroundColor","betaTagColor","Logo","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

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

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

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

@@ -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","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"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","fixed_menu","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';\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.fixed_menu};\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

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../../Button", "../../styles", "../Avatar", "./MenuLink", "../../types", "../mobile/CommonStyles", "../../styles/typography"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../../Button", "../../styles", "../Avatar", "./MenuLink", "../../types", "../mobile/CommonStyles", "../../styles/typography", "../../styles/z-indexes"], 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("../../types"), require("../mobile/CommonStyles"), require("../../styles/typography"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../Button"), require("../../styles"), require("../Avatar"), require("./MenuLink"), require("../../types"), require("../mobile/CommonStyles"), require("../../styles/typography"), require("../../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.styles, global.Avatar, global.MenuLink, global.types, global.CommonStyles, global.typography);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.styles, global.Avatar, global.MenuLink, global.types, global.CommonStyles, global.typography, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _styles, _Avatar, _MenuLink, _types, _CommonStyles, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _styles, _Avatar, _MenuLink, _types, _CommonStyles, _typography, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -97,7 +97,7 @@
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   border: 1px solid ${_styles.COLORS.neutral_200};
-  z-index: 100;
+  z-index: ${_zIndexes.Z_INDEXES.fixed_menu};
 
   .open & {
     display: block;

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

@@ -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","HeadlineXXSStyling","ComponentXSStyling","ComponentTextStyle","NameAndEmail","OrganizationName","span","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","UserMenu","React","e","document","element","onClick","Size"],"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, Size } 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  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\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  pointer-events: none;\n`;\n\nconst AvatarAndName = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ${HeadlineXXSStyling(COLORS.neutral_600)}\n  }\n  span {\n    margin: 0 0 0 20px;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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 sign-out\"\n              variant=\"secondary\"\n              size={Size.Large}\n              onClick={e => {\n                e.preventDefault();\n                signOut(e);\n              }}>\n              {signOutLabel}\n            </Button>\n          )}\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","neutral_200","Z_INDEXES","fixed_menu","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","Size"],"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, Size } from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\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: ${Z_INDEXES.fixed_menu};\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\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  pointer-events: none;\n`;\n\nconst AvatarAndName = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ${HeadlineXXSStyling(COLORS.neutral_600)}\n  }\n  span {\n    margin: 0 0 0 20px;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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 sign-out\"\n              variant=\"secondary\"\n              size={Size.Large}\n              onClick={e => {\n                e.preventDefault();\n                signOut(e);\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

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "styled-components", "../../styles", "react-router-dom", "../../styles/typography"], factory);
+    define(["exports", "styled-components", "../../styles", "react-router-dom", "../../styles/typography", "../../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("styled-components"), require("../../styles"), require("react-router-dom"), require("../../styles/typography"));
+    factory(exports, require("styled-components"), require("../../styles"), require("react-router-dom"), require("../../styles/typography"), require("../../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.styledComponents, global.styles, global.reactRouterDom, global.typography);
+    factory(mod.exports, global.styledComponents, global.styles, global.reactRouterDom, global.typography, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _styledComponents, _styles, _reactRouterDom, _typography) {
+})(this, function (exports, _styledComponents, _styles, _reactRouterDom, _typography, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -66,7 +66,7 @@
   top: 0;
   min-width: 300px;
   position: absolute;
-  z-index: 100;
+  z-index: ${_zIndexes.Z_INDEXES.off_canvas};
   align-items: center;
   width: 320px;
   padding-inline-start: 0;
@@ -120,7 +120,11 @@
   }
 `;
   const UserMenuSectionListStyling = exports.UserMenuSectionListStyling = _styledComponents.css`
+  li {
+    position: relative;
+  }
   li:hover:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
     background-color: ${_styles.COLORS.primary_20};
     a {
       color: ${_styles.COLORS.primary_600};
@@ -131,6 +135,7 @@
   }
 
   li:focus-within: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);
     a {
       outline: none;
@@ -138,6 +143,7 @@
   }
 
   li:active:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     background: ${_styles.COLORS.primary_100};
     box-shadow: none;
     a {

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

@@ -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;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"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","Menu","ul","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","primary_500","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","ComponentMStyling","ComponentTextStyle","MenuWrapper","props","flowDown"],"mappings":"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","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';\nimport {Z_INDEXES} from '../../styles/z-indexes';\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: ${Z_INDEXES.off_canvas};\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 {\n    position: relative;\n  }\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\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    z-index: ${Z_INDEXES.focus};\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    z-index: ${Z_INDEXES.active};\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/HyperLink/HyperLink.js

@@ -79,29 +79,80 @@
     };
   }
 
+  const _excluded = ["children", "target", "variant"];
+
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
+
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+
+    var key, i;
+
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+
+    return target;
+  }
+
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
   const StyledLink = _styledComponents2.default.a`
   ${props => props.variant === 'inverted' ? _styling.invertedStyle : _styling.defaultStyle}
   ${props => props.margin ? `margin: ${props.margin};` : ''}
 `;
 
-  const HyperLink = ({
-    id,
-    className,
-    variant,
-    href,
-    margin,
-    children,
-    target
-  }) => {
-    return /*#__PURE__*/React.createElement(StyledLink, {
-      id: id,
-      className: className,
+  const HyperLink = _ref => {
+    let {
+      children,
+      target = '_blank',
+      variant = 'default'
+    } = _ref,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    return /*#__PURE__*/React.createElement(StyledLink, _extends({}, props, {
       variant: variant,
-      href: href,
-      target: target || "_blank",
-      rel: "noopener noreferrer",
-      margin: margin
-    }, children);
+      target: target,
+      rel: "noopener noreferrer"
+    }), children);
   };
 
   HyperLink.propTypes = {

package/dist/umd/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,QAAMA,UAAU,GAAGC,2BAAOC,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAAAA,sBAAAA,GAA+CC,qBAAc;AAC7E,IAAKD,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACE,MAAhCF,GAAAA,GAA4C,EAAI;AALhE,CAAA;;AAkBA,QAAMS,SAAyC,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,SAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAkDC,IAAAA;AAAlD,GAAD,KAAuE;AACvH,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAY,MAAA,EAAE,EAAd,EAAA;AAAoB,MAAA,SAAS,EAA7B,SAAA;AAA0C,MAAA,OAAO,EAAjD,OAAA;AAA4D,MAAA,IAAI,EAAhE,IAAA;AAAwE,MAAA,MAAM,EAAEA,MAAM,IAAtF,QAAA;AAAoG,MAAA,GAAG,EAAvG,qBAAA;AAA8H,MAAA,MAAM,EAAER;AAAtI,KAAA,EADF,QACE,CADF;AADF,GAAA;;;AATEC,IAAAA,E;AACAC,IAAAA,O,6BAAS,S,EAAY,U;AACrBC,IAAAA,I;AACAC,IAAAA,Q;AACAJ,IAAAA,M;AACAK,IAAAA,Q;AACAC,IAAAA,S;;oBAWF,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\ninterface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<Props> = ({ id, className, variant, href, margin, children, target }: Props) => {\n  return (\n    <StyledLink id={id} className={className} variant={variant} href={href} target={target || \"_blank\"} rel=\"noopener noreferrer\" margin={margin}>\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
+{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,QAAMA,UAAU,GAAGC,2BAAOC,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAAAA,sBAAAA,GAA+CC,qBAAc;AAC7E,IAAKD,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACE,MAAhCF,GAAAA,GAA4C,EAAI;AALhE,CAAA;;AAkBA,QAAMS,SAAkD,GAAG,IAAA,IAAoF;AAAA,QAAnF;AAAA,MAAA,QAAA;AAAYC,MAAAA,MAAM,GAAlB,QAAA;AAA+BN,MAAAA,OAAO,GAAG;AAAzC,QAAmF,IAAA;AAAA,QAA5BJ,KAA4B,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AAC7I,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA;AAAuB,MAAA,OAAO,EAA9B,OAAA;AAAyC,MAAA,MAAM,EAA/C,MAAA;AAAyD,MAAA,GAAG,EAAC;AAA7D,KAAA,CAAA,EADF,QACE,CADF;AADF,GAAA;;;AATEG,IAAAA,E;AACAC,IAAAA,O,6BAAS,S,EAAY,U;AACrBC,IAAAA,I;AACAC,IAAAA,Q;AACAJ,IAAAA,M;AACAK,IAAAA,Q;AACAC,IAAAA,S;;oBAWF,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}

package/dist/umd/InputFields/Checkbox.js

@@ -81,11 +81,9 @@
 
   const StyledCheckBox = _styledComponents2.default.div`
   display: flex;
-  flex-direction: row;
   width: 100%;
   min-height: 48px;
   min-width: 48px;
-  align-items: center;
 
   ${props => props.margin ? `margin: ${props.margin};` : ''}
   cursor: pointer;
@@ -96,14 +94,14 @@
     pointer-events: none;
   }
 
-  .icon {
+  .checkbox-icon {
     margin: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    width: 36px;
     height: 36px;
+    min-width: 36px;
     border-radius: 50%;
 
     svg {
@@ -111,27 +109,36 @@
     }
   }
 
-  .label {
+  .checkbox-label {
     user-select: none;
     cursor: inherit;
   }
 
   &.small {
     ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
+    .checkbox-label {
+      padding-top: 14px;
+    }
   }
 
   &.medium {
     ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
+    .checkbox-label {
+      padding-top: 12px;
+    }
   }
 
   &.large {
     ${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
+    .checkbox-label {
+      padding-top: 12px;
+    }
   }
 
   &:not(.disabled):focus {
     outline: none;
 
-    .icon {
+    .checkbox-icon {
       background-color: ${_styles.COLORS.white};
       box-shadow: 0 0 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
 
@@ -142,7 +149,7 @@
   }
 
   &:not(.disabled):hover {
-    .icon {
+    .checkbox-icon {
       background-color: ${_styles.COLORS.primary_20};
 
       svg {
@@ -152,7 +159,7 @@
   }
 
   &:not(.disabled):active {
-    .icon {
+    .checkbox-icon {
       background: ${_styles.COLORS.primary_100};
       box-shadow: none;
 
@@ -168,16 +175,16 @@
 
     color: ${_styles.COLORS.neutral_300};
 
-    .icon,
-    .label {
+    .checkbox-icon,
+    .checkbox-label {
       pointer-events: none;
     }
 
-    .icon{
+    .checkbox-icon{
       background-color: ${_styles.COLORS.white};
     }
 
-    .icon svg {
+    .checkbox-icon svg {
       color: ${_styles.COLORS.neutral_300};
     }
   }
@@ -192,7 +199,8 @@
     disabled,
     margin,
     size,
-    semiSelected
+    semiSelected,
+    children
   }, ref) => {
     const onKeyPress = e => {
       if (e.keyCode === 13 && !disabled) {
@@ -223,7 +231,7 @@
       onMouseDown: e => e.preventDefault()
     }, /*#__PURE__*/React.createElement("div", {
       id: id,
-      className: 'icon'
+      className: 'checkbox-icon'
     }, selected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOn, {
       className: iconPointerEventsTransparent ? "pointerTransparent" : "",
       size: "24px"
@@ -234,9 +242,12 @@
       className: iconPointerEventsTransparent ? "pointerTransparent" : "",
       size: "24px"
     })), label && /*#__PURE__*/React.createElement("label", {
-      className: 'label',
+      className: 'checkbox-label',
+      htmlFor: id
+    }, label), !label && /*#__PURE__*/React.createElement("label", {
+      className: 'checkbox-label',
       htmlFor: id
-    }, label));
+    }, children));
   });
   Checkbox.propTypes = {
     id: _propTypes2.default.string.isRequired,