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

package/dist/esm/GlobalNavigationBar/Logo.js

@@ -16,7 +16,7 @@ const StyledLink = styled(Link)`
   svg {
     width: 66px;
     height: 36px;
-    color: ${props => props.color};
+    color: ${props => props.$color};
     ${BREAKPOINTS.MEDIUM} {
       width: 88px;
       height: 48px;
@@ -44,18 +44,18 @@ const LogoContainer = styled.div`
 const Name = styled.span`
   margin-left: 8px;
   padding-left: 8px;
-  border-left: 1px solid ${props => props.color || COLORS.black};
+  border-left: 1px solid ${props => props.$color || COLORS.black};
   letter-spacing: -0.02em;
 
-  ${props => props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}
-  
+  ${props => props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}
+
   font-weight: 300 !important;
   line-height: 24px !important;
-  
+
   ${BREAKPOINTS.MEDIUM} {
     margin-left: 12px;
     padding-left: 12px;
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}
   }
 `;
 const BetaTag = styled.span`
@@ -66,7 +66,7 @@ const BetaTag = styled.span`
   border-left: none;
   border-radius: 2px;
 
-  ${props => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}
+  ${props => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}
 `;
 
 const Logo = ({
@@ -87,13 +87,13 @@ const Logo = ({
         onClick();
       }
     },
-    color: color
+    $color: color
   }, color === COLORS.white ? /*#__PURE__*/React.createElement(LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(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/esm/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentXSStyling","StyledLink","props","color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"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) => 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":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentXSStyling","StyledLink","props","$color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"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/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js

@@ -7,6 +7,7 @@ import { Button, IconButton } from '../../Button';
 import { ArrowLineLeft, Close } from '../../icons/systemicons/SystemIcons';
 import { flowDown, Right, UserMenuSectionListStyling } from '../mobile/CommonStyles';
 import { ComponentSStyling } from '../../styles/typography';
+import { Z_INDEXES } from '../../styles/z-indexes';
 const Menu = styled.ul`
   list-style: none;
   margin: 0;
@@ -17,7 +18,7 @@ const Menu = styled.ul`
   animation: ${flowDown} 0.2s ease-in-out;
   position: absolute;
   border-radius: 4px;
-  z-index: 100;
+  z-index: ${Z_INDEXES.fixed_menu};
   height: 100%;
   width: 320px;
   padding-inline-start: 0;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","MenuLink","Button","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","ComponentSStyling","Menu","ul","white","SMALL","MenuSection","li","MenuSectionList","Top","div","neutral_600","Regular","LabelLine","span","neutral_20","StyledMenulink","MobileUserMenu","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","isExternal","display","margin","width","preventDefault"],"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":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","MenuLink","Button","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","ComponentSStyling","Z_INDEXES","Menu","ul","white","fixed_menu","SMALL","MenuSection","li","MenuSectionList","Top","div","neutral_600","Regular","LabelLine","span","neutral_20","StyledMenulink","MobileUserMenu","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","isExternal","display","margin","width","preventDefault"],"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/esm/GlobalNavigationBar/UserMenu/UserMenu.js

@@ -8,6 +8,7 @@ import MenuLink from './MenuLink';
 import { Size } from '../../types';
 import { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';
 import { ComponentXSStyling, HeadlineXXSStyling } from '../../styles/typography';
+import { Z_INDEXES } from '../../styles/z-indexes';
 const Menu = styled.ul`
   list-style: none;
   margin: 0;
@@ -22,7 +23,7 @@ const Menu = styled.ul`
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   border: 1px solid ${COLORS.neutral_200};
-  z-index: 100;
+  z-index: ${Z_INDEXES.fixed_menu};
 
   .open & {
     display: block;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["React","styled","Button","COLORS","ComponentTextStyle","Avatar","AvatarContainer","MenuLink","Size","flowDown","UserMenuSectionListStyling","ComponentXSStyling","HeadlineXXSStyling","Menu","ul","white","neutral_200","MenuSection","li","neutral_100","MenuSectionList","StyledAvatarContainer","AvatarAndName","div","neutral_600","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Large","preventDefault"],"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":["React","styled","Button","COLORS","ComponentTextStyle","Avatar","AvatarContainer","MenuLink","Size","flowDown","UserMenuSectionListStyling","ComponentXSStyling","HeadlineXXSStyling","Z_INDEXES","Menu","ul","white","neutral_200","fixed_menu","MenuSection","li","neutral_100","MenuSectionList","StyledAvatarContainer","AvatarAndName","div","neutral_600","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Large","preventDefault"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,QAAqB,cAArB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,cAAzC;AACA,OAAOC,MAAP,IAAgBC,eAAhB,QAAsC,WAAtC;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,SAAuBC,IAAvB,QAAmC,aAAnC;AACA,SAAQC,QAAR,EAAkBC,0BAAlB,QAAmD,wBAAnD;AACA,SAAQC,kBAAR,EAA4BC,kBAA5B,QAAqD,yBAArD;AACA,SAAQC,SAAR,QAAwB,wBAAxB;AAEA,MAAMC,IAAI,GAAGb,MAAM,CAACc,EAAG;AACvB;AACA;AACA;AACA,sBAAsBZ,MAAM,CAACa,KAAM;AACnC;AACA;AACA;AACA,uBAAuBP,QAAS;AAChC,eAAeA,QAAS;AACxB;AACA;AACA;AACA,sBAAsBN,MAAM,CAACc,WAAY;AACzC,aAAaJ,SAAS,CAACK,UAAW;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA5BA;AA8BA,MAAMC,WAAW,GAAGlB,MAAM,CAACmB,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBjB,MAAM,CAACkB,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAnBA;AAqBA,MAAMC,eAAe,GAAGrB,MAAM,CAACc,EAAG;AAClC;AACA;AACA;AACA;AACA,IAAIL,0BAA2B;AAC/B,CANA;AAQA,MAAMa,qBAAqB,GAAGtB,MAAM,CAACK,eAAD,CAAkB;AACtD;AACA;AACA,CAHA;AAKA,MAAMkB,aAAa,GAAGvB,MAAM,CAACwB,GAAI;AACjC;AACA;AACA;AACA;AACA;AACA,MAAMb,kBAAkB,CAACT,MAAM,CAACuB,WAAR,CAAqB;AAC7C;AACA;AACA;AACA,MAAMf,kBAAkB,CAACP,kBAAkB,CAACuB,OAApB,EAA6BxB,MAAM,CAACuB,WAApC,CAAiD;AACzE;AACA,CAZA;AAcA,MAAME,YAAY,GAAG3B,MAAM,CAACwB,GAAI;AAChC;AACA;AACA,CAHA;AAKA,MAAMI,gBAAgB,GAAG5B,MAAM,CAAC6B,IAAK;AACrC;AACA,IAAInB,kBAAkB,CAACP,kBAAkB,CAAC2B,IAApB,EAA0B5B,MAAM,CAACuB,WAAjC,CAA8C;AACpE,CAHA;;AAkBA,MAAMM,QAAQ,GAAG,CAAC;AAAEC,EAAAA,SAAF;AAAaC,EAAAA,QAAb;AAAuBC,EAAAA,KAAvB;AAA8BC,EAAAA,gBAA9B;AAAgDC,EAAAA,eAAhD;AAAiEC,EAAAA,cAAjE;AAAiFC,EAAAA,mBAAjF;AAAsGC,EAAAA,cAAtG;AAAsHC,EAAAA,OAAtH;AAA+HC,EAAAA;AAA/H,CAAD,KAA0J;AACzK1C,EAAAA,KAAK,CAAC2C,SAAN,CAAgB,MAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBT,QAAAA,eAAe;AAChB;AACF;;AAEDU,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,MAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACP,eAAD,CAXH;AAaA,sBACE,oBAAC,IAAD;AAAM,IAAA,OAAO,EAAEA,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB;AAA5D,kBACE,oBAAC,aAAD;AAAe,IAAA,GAAG,EAAC;AAAnB,kBACE,oBAAC,qBAAD;AAAuB,IAAA,WAAW,EAAE;AAApC,kBACE,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE,EAAd;AAAkB,IAAA,SAAS,EAAEJ,SAA7B;AAAwC,IAAA,QAAQ,EAAEC,QAAlD;AAA4D,IAAA,KAAK,EAAE/B,MAAM,CAAC+C,WAA1E;AAAuF,IAAA,eAAe,EAAC;AAAvG,IADF,CADF,eAIE,oBAAC,YAAD,qBACE;AAAI;AAAJ,KAAuB,GAAEjB,SAAU,IAAGC,QAAS,EAA/C,CADF,eAEE;AAAM;AAAN,KAAwBC,KAAxB,CAFF,CAJF,CADF,EAUGG,cAAc,IAAIA,cAAc,EAAEa,MAAhB,GAAyB,CAA3C,iBACC,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,eAAD,QACGb,cAAc,EAAEc,GAAhB,CAAoBC,OAAO,iBAC1B,oBAAC,QAAD;AAAU,IAAA,GAAG,EAAEA,OAAO,EAAEC,EAAxB;AAA4B,IAAA,EAAE,EAAED,OAAO,EAAEC,EAAzC;AAA6C,IAAA,QAAQ,EAAED,OAAO,EAAEE,KAAhE;AAAuE,IAAA,IAAI,EAAEF,OAAO,EAAEG,IAAtF;AAA4F,IAAA,OAAO,EAAEH,OAAO,EAAEI;AAA9G,IADD,CADH,CADF,CAXJ,EAoBGlB,mBAAmB,IAAIA,mBAAmB,EAAEY,MAArB,GAA8B,CAArD,iBACC,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,gBAAD,QAAmBf,gBAAgB,IAAI,EAAvC,CADF,eAEE,oBAAC,eAAD,QACGG,mBAAmB,EAAEa,GAArB,CAAyBC,OAAO,iBAC/B,oBAAC,QAAD;AAAU,IAAA,GAAG,EAAEA,OAAO,EAAEC,EAAxB;AAA4B,IAAA,EAAE,EAAED,OAAO,EAAEC,EAAzC;AAA6C,IAAA,QAAQ,EAAED,OAAO,EAAEE,KAAhE;AAAuE,IAAA,IAAI,EAAEF,OAAO,EAAEG,IAAtF;AAA4F,IAAA,OAAO,EAAEH,OAAO,EAAEI;AAA9G,IADD,CADH,CAFF,CArBJ,eA+BE,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,eAAD,QACGjB,cAAc,EAAEY,GAAhB,CAAoBC,OAAO,iBAC1B,oBAAC,QAAD;AAAU,IAAA,GAAG,EAAEA,OAAO,EAAEC,EAAxB;AAA4B,IAAA,UAAU,EAAED,OAAO,CAACK,UAAhD;AAA4D,IAAA,EAAE,EAAEL,OAAO,EAAEC,EAAzE;AAA6E,IAAA,QAAQ,EAAED,OAAO,EAAEE,KAAhG;AAAuG,IAAA,IAAI,EAAEF,OAAO,EAAEG,IAAtH;AAA4H,IAAA,OAAO,EAAEH,OAAO,EAAEI;AAA9I,IADD,CADH,EAIGhB,OAAO,iBACN,oBAAC,MAAD;AACE,IAAA,KAAK,EAAC,KADR;AAEE,IAAA,SAAS,EAAC,uBAFZ;AAGE,IAAA,OAAO,EAAC,WAHV;AAIE,IAAA,IAAI,EAAEjC,IAAI,CAACmD,KAJb;AAKE,IAAA,OAAO,EAAEd,CAAC,IAAI;AACZA,MAAAA,CAAC,CAACe,cAAF;AACAnB,MAAAA,OAAO,CAACI,CAAD,CAAP;AACD;AARH,KASGH,YATH,CALJ,CADF,CA/BF,CADF;AAsDD,CApED;;;AAZET,EAAAA,S;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,gB;AACAC,EAAAA,e;AACAC,EAAAA,c;AACAC,EAAAA,mB;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,Y;;AAyEF,eAAeV,QAAf","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/esm/GlobalNavigationBar/mobile/CommonStyles.js

@@ -2,6 +2,7 @@ import styled, { css, keyframes } from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../../styles';
 import { NavLink } from 'react-router-dom';
 import { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';
+import { Z_INDEXES } from '../../styles/z-indexes';
 export const RowLayout = styled.div`
   display: flex;
   align-items: center;
@@ -42,7 +43,7 @@ export const Menu = styled.ul`
   top: 0;
   min-width: 300px;
   position: absolute;
-  z-index: 100;
+  z-index: ${Z_INDEXES.off_canvas};
   align-items: center;
   width: 320px;
   padding-inline-start: 0;
@@ -96,7 +97,11 @@ export const MenuSectionList = styled.ul`
   }
 `;
 export const UserMenuSectionListStyling = css`
+  li {
+    position: relative;
+  }
   li:hover:not(.disabled) {
+    z-index: ${Z_INDEXES.hover};
     background-color: ${COLORS.primary_20};
     a {
       color: ${COLORS.primary_600};
@@ -107,6 +112,7 @@ export const UserMenuSectionListStyling = css`
   }
 
   li:focus-within:not(.disabled) {
+    z-index: ${Z_INDEXES.focus};
     box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
     a {
       outline: none;
@@ -114,6 +120,7 @@ export const UserMenuSectionListStyling = css`
   }
 
   li:active:not(.disabled) {
+    z-index: ${Z_INDEXES.active};
     background: ${COLORS.primary_100};
     box-shadow: none;
     a {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["styled","css","keyframes","BREAKPOINTS","COLORS","NavLink","ComponentMStyling","ComponentTextStyle","RowLayout","div","Button","button","white","flowLeft","flowRight","Menu","ul","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","primary_20","primary_600","primary_500","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","MenuWrapper","props","isVisible","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';\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":["styled","css","keyframes","BREAKPOINTS","COLORS","NavLink","ComponentMStyling","ComponentTextStyle","Z_INDEXES","RowLayout","div","Button","button","white","flowLeft","flowRight","Menu","ul","off_canvas","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","hover","primary_20","primary_600","focus","primary_500","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","MenuWrapper","props","isVisible","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/esm/HyperLink/HyperLink.js

@@ -1,4 +1,12 @@
 import _pt from "prop-types";
+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; }
+
 import * as React from 'react';
 import styled from 'styled-components';
 import { defaultStyle, invertedStyle } from './styling';
@@ -7,24 +15,19 @@ const StyledLink = styled.a`
   ${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/esm/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","id","className","href","children","target","disabled"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;AAEA,MAAMC,UAAU,GAAGH,MAAM,CAACI,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAAc;AAC7E,IAAKI,KAAD,IAAYA,KAAK,CAACE,MAAN,GAAgB,WAAUF,KAAK,CAACE,MAAO,GAAvC,GAA4C,EAAI;AAChE,CANA;;AAkBA,MAAMC,SAAyC,GAAG,CAAC;AAAEC,EAAAA,EAAF;AAAMC,EAAAA,SAAN;AAAiBJ,EAAAA,OAAjB;AAA0BK,EAAAA,IAA1B;AAAgCJ,EAAAA,MAAhC;AAAwCK,EAAAA,QAAxC;AAAkDC,EAAAA;AAAlD,CAAD,KAAuE;AACvH,sBACE,oBAAC,UAAD;AAAY,IAAA,EAAE,EAAEJ,EAAhB;AAAoB,IAAA,SAAS,EAAEC,SAA/B;AAA0C,IAAA,OAAO,EAAEJ,OAAnD;AAA4D,IAAA,IAAI,EAAEK,IAAlE;AAAwE,IAAA,MAAM,EAAEE,MAAM,IAAI,QAA1F;AAAoG,IAAA,GAAG,EAAC,qBAAxG;AAA8H,IAAA,MAAM,EAAEN;AAAtI,KACGK,QADH,CADF;AAKD,CAND;;;AATEH,EAAAA,E;AACAH,EAAAA,O,aAAS,S,EAAY,U;AACrBK,EAAAA,I;AACAG,EAAAA,Q;AACAP,EAAAA,M;AACAK,EAAAA,Q;AACAF,EAAAA,S;;AAWF,eAAeF,SAAf","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":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;AAEA,MAAMC,UAAU,GAAGH,MAAM,CAACI,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAAc;AAC7E,IAAKI,KAAD,IAAYA,KAAK,CAACE,MAAN,GAAgB,WAAUF,KAAK,CAACE,MAAO,GAAvC,GAA4C,EAAI;AAChE,CANA;;AAkBA,MAAMC,SAAkD,GAAG,QAAoF;AAAA,MAAnF;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAM,GAAG,QAArB;AAA+BJ,IAAAA,OAAO,GAAG;AAAzC,GAAmF;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,oBAAC,UAAD,eAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEI,MAAjD;AAAyD,IAAA,GAAG,EAAC;AAA7D,MACGD,QADH,CADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAL,EAAAA,O,aAAS,S,EAAY,U;AACrBM,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;AAWF,eAAeN,SAAf","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/esm/InputFields/Checkbox.js

@@ -7,11 +7,9 @@ import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
 const StyledCheckBox = styled.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;
@@ -22,14 +20,14 @@ const StyledCheckBox = styled.div`
     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 {
@@ -37,27 +35,36 @@ const StyledCheckBox = styled.div`
     }
   }
 
-  .label {
+  .checkbox-label {
     user-select: none;
     cursor: inherit;
   }
 
   &.small {
     ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .checkbox-label {
+      padding-top: 14px;
+    }
   }
 
   &.medium {
     ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .checkbox-label {
+      padding-top: 12px;
+    }
   }
 
   &.large {
     ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .checkbox-label {
+      padding-top: 12px;
+    }
   }
 
   &:not(.disabled):focus {
     outline: none;
 
-    .icon {
+    .checkbox-icon {
       background-color: ${COLORS.white};
       box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
 
@@ -68,7 +75,7 @@ const StyledCheckBox = styled.div`
   }
 
   &:not(.disabled):hover {
-    .icon {
+    .checkbox-icon {
       background-color: ${COLORS.primary_20};
 
       svg {
@@ -78,7 +85,7 @@ const StyledCheckBox = styled.div`
   }
 
   &:not(.disabled):active {
-    .icon {
+    .checkbox-icon {
       background: ${COLORS.primary_100};
       box-shadow: none;
 
@@ -94,16 +101,16 @@ const StyledCheckBox = styled.div`
 
     color: ${COLORS.neutral_300};
 
-    .icon,
-    .label {
+    .checkbox-icon,
+    .checkbox-label {
       pointer-events: none;
     }
 
-    .icon{
+    .checkbox-icon{
       background-color: ${COLORS.white};
     }
 
-    .icon svg {
+    .checkbox-icon svg {
       color: ${COLORS.neutral_300};
     }
   }
@@ -118,7 +125,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   disabled,
   margin,
   size,
-  semiSelected
+  semiSelected,
+  children
 }, ref) => {
   const onKeyPress = e => {
     if (e.keyCode === 13 && !disabled) {
@@ -149,7 +157,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     onMouseDown: e => e.preventDefault()
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: 'icon'
+    className: 'checkbox-icon'
   }, selected ? /*#__PURE__*/React.createElement(CheckboxOn, {
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
@@ -160,9 +168,12 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     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: _pt.string.isRequired,

package/dist/esm/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","ref","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ${COLORS.white};\n    }\n\n    .icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                       id,\n                                                       selected,\n                                                       select,\n                                                       label,\n                                                       showWarning,\n                                                       iconPointerEventsTransparent,\n                                                       disabled,\n                                                       margin,\n                                                       size,\n                                                       semiSelected\n                                                     }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","ref","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/dist/esm/InputFields/DatepickerField.js

@@ -34,6 +34,7 @@ import { ComponentTextStyle, scrollBarStyling } from '../styles';
 import { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';
 import 'react-datepicker/dist/react-datepicker.css';
 import { ComponentMStyling, ComponentSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
 /**
  * Add custom types.
  */
@@ -42,6 +43,11 @@ import { ComponentMStyling, ComponentSStyling } from '../styles/typography';
  * Add custom styles.
  */
 const DatePickerContainer = styled.div`
+  
+  .react-datepicker-popper{
+    z-index: ${Z_INDEXES.dropdown};  
+  }
+
   > div {
     display: block;
     ${props => props.margin ? `margin: ${props.margin};` : ''}