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

package/dist/js/GlobalNavigationBar/GlobalNavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["HeaderWrapper","styled","header","COLORS","neutral_200","BREAKPOINTS","SMALL","MEDIUM","RowLayout","div","RightSide","MenuWrapper","props","isVisible","UserMenuWrapper","white","floatRight","offsetRight","window","innerWidth","HamburgerButton","button","GlobalNavigationBar","name","mainNavigationOptions","secondaryNavigationOptions","secondaryButton","actions","firstName","lastName","email","organizationName","signout","isAuthenticated","mobileActions","notifications","switcherAction","reverseRightSideOrder","showBetaTag","accountSection","organizationSection","supportSection","accountMenuHeader","signOutLabel","useUserMenu","mainLogoTo","trackLogoClick","testId","useMaxWidth","React","useState","showMenu","setShowMenu","showUserMenu","setShowUserMenu","showMobileUserMenu","setShowMobileUserMenu","menuRef","useRef","userMenuRef","rightSideRef","avatarRight","setAvatarRight","handleClickMenuAction","useEffect","handleResize","right","document","getElementById","getBoundingClientRect","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './MainMenu';\nimport Actions from './Actions';\nimport { PageWidth } from '../Layouts';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport RightSideNav from './RightSideNav';\nimport { NavOption, NavButton, ActionOptions, UserMenuItem } from '../types';\nimport MobileMenu from './mobile/MobileMenu';\nimport { Menu } from '../icons/systemicons/SystemIcons';\nimport UserMenu from './UserMenu/UserMenu';\nimport useClickOutside from '../hooks/useClickOutside';\nimport { Menu as MobileMenuWrapper } from './mobile/CommonStyles';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  margin: 0 0 0 auto;\n`;\n\nconst MenuWrapper = styled.div<MenuWrapperProps>`\n  background: rgba(0, 0, 0, 0.5);\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow-y: hidden;\n  bottom: 0;\n  right: 0;\n  z-index: 1;\n`;\n\nconst UserMenuWrapper = styled.div<UserMenuWrapperProps>`\n  background-color: ${COLORS.white};\n  display: flex;\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\n  position: absolute;\n  right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  top: 56px;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\ninterface UserMenuWrapperProps {\n  floatRight: boolean;\n  offsetRight: number | null | undefined;\n}\n\nconst HamburgerButton = styled.button`\n  border-width: 0;\n  background-color: ${COLORS.white};\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n  &:hover {\n    cursor: pointer;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\ninterface MenuWrapperProps {\n  isVisible: boolean;\n}\n\ntype Props = {\n  name?: string;\n  mainNavigationOptions?: NavOption[];\n  secondaryNavigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n  actions?: ActionOptions;\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n  organizationName?: string;\n  signout?: (e: any) => void;\n  isAuthenticated?: boolean;\n  mobileActions?: ActionOptions;\n  notifications?: NavOption[];\n  switcherAction?: () => void;\n  reverseRightSideOrder?: boolean;\n  showBetaTag?: boolean;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  accountMenuHeader?: string;\n  signOutLabel?: string;\n  useUserMenu?: boolean;\n  trackLogoClick?: () => void;\n  mainLogoTo?: string;\n  testId?: string;\n  useMaxWidth?: boolean;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n  name,\n  mainNavigationOptions,\n  secondaryNavigationOptions,\n  secondaryButton,\n  actions,\n  firstName,\n  lastName,\n  email,\n  organizationName,\n  signout,\n  isAuthenticated,\n  mobileActions,\n  notifications,\n  switcherAction,\n  reverseRightSideOrder = false,\n  showBetaTag,\n  accountSection,\n  organizationSection,\n  supportSection,\n  accountMenuHeader,\n  signOutLabel,\n  useUserMenu,\n  mainLogoTo,\n  trackLogoClick,\n  testId,\n  useMaxWidth = true,\n}: Props): React.ReactElement<Props> => {\n  const [showMenu, setShowMenu] = React.useState(false);\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n  const [showMobileUserMenu, setShowMobileUserMenu] = React.useState<boolean>(false);\n  const menuRef = React.useRef(null);\n  const userMenuRef = React.useRef<HTMLDivElement>(null);\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n  const handleClickMenuAction = () => {\n    setShowMenu(false);\n  };\n\n  useClickOutside(userMenuRef, () => (showUserMenu ? setShowUserMenu(false) : null));\n  useClickOutside(menuRef, () => {\n    if (showMenu) {\n      setShowMobileUserMenu(false);\n      setShowMenu(false);\n    }\n  });\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const right = document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right;\n      if (right) {\n        setAvatarRight(right);\n      }\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right]);\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={showBetaTag} onClick={trackLogoClick} to={mainLogoTo} />\n            {isAuthenticated && <MainMenu navigationOptions={mainNavigationOptions || []} rightSideRef={rightSideRef} />}\n            <RightSide className=\"GlobalNavigationRightSide\" ref={rightSideRef}>\n              {reverseRightSideOrder ? (\n                <>\n                  <Actions\n                    actions={actions}\n                    firstName={firstName || ''}\n                    lastName={lastName || ''}\n                    hideOnLowWidth={true}\n                    useUserMenu={useUserMenu}\n                    setShowUserMenu={setShowUserMenu}\n                  />\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\n                </>\n              ) : (\n                <>\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\n                  <Actions\n                    actions={actions}\n                    firstName={firstName || ''}\n                    lastName={lastName || ''}\n                    hideOnLowWidth={true}\n                    useUserMenu={useUserMenu}\n                    setShowUserMenu={setShowUserMenu}\n                  />\n                </>\n              )}\n              <HamburgerButton onClick={() => setShowMenu(!showMenu)} hidden={!isAuthenticated}>\n                <Menu size=\"24px\" />\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MenuWrapper className={showMenu ? 'open' : 'closed'} isVisible={showMenu}>\n        <MobileMenuWrapper ref={menuRef} onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n          <MobileMenu\n            name={name || ''}\n            clickMenuAction={() => {\n              setShowMobileUserMenu(false);\n              handleClickMenuAction();\n            }}\n            navigationOptions={mainNavigationOptions || []}\n            secondaryNavigationOptions={secondaryNavigationOptions}\n            secondaryButton={secondaryButton}\n            firstName={firstName || ''}\n            lastName={lastName || ''}\n            email={email || ''}\n            signout={signout}\n            notifications={notifications}\n            actions={mobileActions}\n            switcherAction={switcherAction}\n            isAuthenticated={isAuthenticated}\n            accountSection={accountSection || []}\n            organizationSection={organizationSection || []}\n            supportSection={supportSection || []}\n            accountMenuHeader={accountMenuHeader || ''}\n            signOutLabel={signOutLabel || ''}\n            organizationName={organizationName || ''}\n            useUserMenu={useUserMenu}\n            showUserMenu={showMobileUserMenu}\n            setShowUserMenu={setShowMobileUserMenu}\n          />\n        </MobileMenuWrapper>\n      </MenuWrapper>\n      {useUserMenu && (\n        <UserMenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : 'closed'} floatRight={false} offsetRight={avatarRight} data-testid=\"testUserMenuWrapper\">\n          <UserMenu\n            firstName={firstName || ''}\n            lastName={lastName || ''}\n            email={email || ''}\n            organizationName={organizationName || ''}\n            clickMenuAction={() => setShowUserMenu(false)}\n            accountSection={accountSection}\n            organizationSection={organizationSection}\n            supportSection={supportSection}\n            signOut={signout}\n            signOutLabel={signOutLabel || ''}\n          />\n        </UserMenuWrapper>\n      )}\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","MEDIUM","RowLayout","div","RightSide","MenuWrapper","props","isVisible","backdrop","UserMenuWrapper","white","floatRight","offsetRight","window","innerWidth","HamburgerButton","button","GlobalNavigationBar","name","mainNavigationOptions","secondaryNavigationOptions","secondaryButton","actions","firstName","lastName","email","organizationName","signout","isAuthenticated","mobileActions","notifications","switcherAction","reverseRightSideOrder","showBetaTag","accountSection","organizationSection","supportSection","accountMenuHeader","signOutLabel","useUserMenu","mainLogoTo","trackLogoClick","testId","useMaxWidth","React","useState","showMenu","setShowMenu","showUserMenu","setShowUserMenu","showMobileUserMenu","setShowMobileUserMenu","menuRef","useRef","userMenuRef","rightSideRef","avatarRight","setAvatarRight","handleClickMenuAction","useEffect","handleResize","right","document","getElementById","getBoundingClientRect","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './MainMenu';\nimport Actions from './Actions';\nimport { PageWidth } from '../Layouts';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport RightSideNav from './RightSideNav';\nimport { NavOption, NavButton, ActionOptions, UserMenuItem } from '../types';\nimport MobileMenu from './mobile/MobileMenu';\nimport { Menu } from '../icons/systemicons/SystemIcons';\nimport UserMenu from './UserMenu/UserMenu';\nimport useClickOutside from '../hooks/useClickOutside';\nimport { Menu as MobileMenuWrapper } from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  \n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n  \n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  margin: 0 0 0 auto;\n`;\n\nconst MenuWrapper = styled.div<MenuWrapperProps>`\n  background: rgba(0, 0, 0, 0.5);\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow-y: hidden;\n  bottom: 0;\n  right: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nconst UserMenuWrapper = styled.div<UserMenuWrapperProps>`\n  background-color: ${COLORS.white};\n  display: flex;\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\n  position: absolute;\n  right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  top: 56px;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\ninterface UserMenuWrapperProps {\n  floatRight: boolean;\n  offsetRight: number | null | undefined;\n}\n\nconst HamburgerButton = styled.button`\n  border-width: 0;\n  background-color: ${COLORS.white};\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n  &:hover {\n    cursor: pointer;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\ninterface MenuWrapperProps {\n  isVisible: boolean;\n}\n\ntype Props = {\n  name?: string;\n  mainNavigationOptions?: NavOption[];\n  secondaryNavigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n  actions?: ActionOptions;\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n  organizationName?: string;\n  signout?: (e: any) => void;\n  isAuthenticated?: boolean;\n  mobileActions?: ActionOptions;\n  notifications?: NavOption[];\n  switcherAction?: () => void;\n  reverseRightSideOrder?: boolean;\n  showBetaTag?: boolean;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  accountMenuHeader?: string;\n  signOutLabel?: string;\n  useUserMenu?: boolean;\n  trackLogoClick?: () => void;\n  mainLogoTo?: string;\n  testId?: string;\n  useMaxWidth?: boolean;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n  name,\n  mainNavigationOptions,\n  secondaryNavigationOptions,\n  secondaryButton,\n  actions,\n  firstName,\n  lastName,\n  email,\n  organizationName,\n  signout,\n  isAuthenticated,\n  mobileActions,\n  notifications,\n  switcherAction,\n  reverseRightSideOrder = false,\n  showBetaTag,\n  accountSection,\n  organizationSection,\n  supportSection,\n  accountMenuHeader,\n  signOutLabel,\n  useUserMenu,\n  mainLogoTo,\n  trackLogoClick,\n  testId,\n  useMaxWidth = true,\n}: Props): React.ReactElement<Props> => {\n  const [showMenu, setShowMenu] = React.useState(false);\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n  const [showMobileUserMenu, setShowMobileUserMenu] = React.useState<boolean>(false);\n  const menuRef = React.useRef(null);\n  const userMenuRef = React.useRef<HTMLDivElement>(null);\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n  const handleClickMenuAction = () => {\n    setShowMenu(false);\n  };\n\n  useClickOutside(userMenuRef, () => (showUserMenu ? setShowUserMenu(false) : null));\n  useClickOutside(menuRef, () => {\n    if (showMenu) {\n      setShowMobileUserMenu(false);\n      setShowMenu(false);\n    }\n  });\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const right = document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right;\n      if (right) {\n        setAvatarRight(right);\n      }\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right]);\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={showBetaTag} onClick={trackLogoClick} to={mainLogoTo} />\n            {isAuthenticated && <MainMenu navigationOptions={mainNavigationOptions || []} rightSideRef={rightSideRef} />}\n            <RightSide className=\"GlobalNavigationRightSide\" ref={rightSideRef}>\n              {reverseRightSideOrder ? (\n                <>\n                  <Actions\n                    actions={actions}\n                    firstName={firstName || ''}\n                    lastName={lastName || ''}\n                    hideOnLowWidth={true}\n                    useUserMenu={useUserMenu}\n                    setShowUserMenu={setShowUserMenu}\n                  />\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\n                </>\n              ) : (\n                <>\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\n                  <Actions\n                    actions={actions}\n                    firstName={firstName || ''}\n                    lastName={lastName || ''}\n                    hideOnLowWidth={true}\n                    useUserMenu={useUserMenu}\n                    setShowUserMenu={setShowUserMenu}\n                  />\n                </>\n              )}\n              <HamburgerButton onClick={() => setShowMenu(!showMenu)} hidden={!isAuthenticated}>\n                <Menu size=\"24px\" />\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MenuWrapper className={showMenu ? 'open' : 'closed'} isVisible={showMenu}>\n        <MobileMenuWrapper ref={menuRef} onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n          <MobileMenu\n            name={name || ''}\n            clickMenuAction={() => {\n              setShowMobileUserMenu(false);\n              handleClickMenuAction();\n            }}\n            navigationOptions={mainNavigationOptions || []}\n            secondaryNavigationOptions={secondaryNavigationOptions}\n            secondaryButton={secondaryButton}\n            firstName={firstName || ''}\n            lastName={lastName || ''}\n            email={email || ''}\n            signout={signout}\n            notifications={notifications}\n            actions={mobileActions}\n            switcherAction={switcherAction}\n            isAuthenticated={isAuthenticated}\n            accountSection={accountSection || []}\n            organizationSection={organizationSection || []}\n            supportSection={supportSection || []}\n            accountMenuHeader={accountMenuHeader || ''}\n            signOutLabel={signOutLabel || ''}\n            organizationName={organizationName || ''}\n            useUserMenu={useUserMenu}\n            showUserMenu={showMobileUserMenu}\n            setShowUserMenu={setShowMobileUserMenu}\n          />\n        </MobileMenuWrapper>\n      </MenuWrapper>\n      {useUserMenu && (\n        <UserMenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : 'closed'} floatRight={false} offsetRight={avatarRight} data-testid=\"testUserMenuWrapper\">\n          <UserMenu\n            firstName={firstName || ''}\n            lastName={lastName || ''}\n            email={email || ''}\n            organizationName={organizationName || ''}\n            clickMenuAction={() => setShowUserMenu(false)}\n            accountSection={accountSection}\n            organizationSection={organizationSection}\n            supportSection={supportSection}\n            signOut={signout}\n            signOutLabel={signOutLabel || ''}\n          />\n        </UserMenuWrapper>\n      )}\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.js"}

package/dist/js/GlobalNavigationBar/Logo.js

@@ -32,23 +32,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"])), function (props) {
-  return props.color;
+  return props.$color;
 }, _styles.BREAKPOINTS.MEDIUM);
 
 var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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  ", " {\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"])), _styles.BREAKPOINTS.MEDIUM);
 
-var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n\n  ", "\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n    ", "\n  }\n"])), function (props) {
-  return props.color || _styles.COLORS.black;
+var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n    ", "\n  }\n"])), function (props) {
+  return props.$color || _styles.COLORS.black;
 }, function (props) {
-  return props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black);
+  return props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
-  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black);
+  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
 });
 
 var BetaTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ", "\n"])), function (props) {
   return props.backgroundColor || _styles.COLORS.accent2_500;
 }, function (props) {
-  return (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.color || _styles.COLORS.white);
+  return (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.white);
 });
 
 var Logo = function Logo(_ref) {
@@ -70,13 +70,13 @@ var Logo = function Logo(_ref) {
         _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/js/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,8UAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAAjC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACW,oBAAN,GACH,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CADG,GAEH,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAArE,CAFR;AAAA,CANM,EAaNR,oBAAYC,MAbN,EAgBJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CAAX;AAAA,CAhBI,CAAV;;AAoBA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,0NACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,KAAN,IAAeQ,eAAOS,KAA3E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHtB,KAAkH,QAAlHA,KAAkH;AAAA,MAA3GU,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFa,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEF,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAE,qBAACG,CAAD;AAAA,aAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,KAFf;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIL,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF,KAPH;AAQE,IAAA,KAAK,EAAErB;AART,KASGA,KAAK,KAAKQ,eAAOS,KAAjB,gBAAyB,oBAAC,wBAAD,OAAzB,gBAAgD,oBAAC,mBAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEjB,KAAb;AAAoB,IAAA,oBAAoB,EAAEU,oBAAoB,IAAI;AAAlE,KACGS,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEG,sBAA1B;AAAkD,IAAA,KAAK,EAAEC;AAAzD,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEL,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAtB,EAAAA,K;AACAU,EAAAA,oB;AACAa,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaN,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","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,0UAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAAlC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SACAA,KAAK,CAACW,oBAAN,GACI,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAArE,CADJ,GAEI,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAAtE,CAHJ;AAAA,CANM,EAcNR,oBAAYC,MAdN,EAiBJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAArE,CAAX;AAAA,CAjBI,CAAV;;AAqBA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,0NACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,MAAN,IAAgBQ,eAAOS,KAA5E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHC,KAAkH,QAAlHA,KAAkH;AAAA,MAA3Gb,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFc,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEH,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAE,qBAACI,CAAD;AAAA,aAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,KAFf;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIN,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF,KAPH;AAQE,IAAA,MAAM,EAAEE;AARV,KASGA,KAAK,KAAKf,eAAOS,KAAjB,gBAAyB,oBAAC,wBAAD,OAAzB,gBAAgD,oBAAC,mBAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAEM,KAAd;AAAqB,IAAA,oBAAoB,EAAEb,oBAAoB,IAAI;AAAnE,KACGS,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEI,sBAA1B;AAAkD,IAAA,MAAM,EAAEC;AAA1D,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEN,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAC,EAAAA,K;AACAb,EAAAA,oB;AACAc,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaP,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) =>\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/js/GlobalNavigationBar/UserMenu/MobileUserMenu.js

@@ -25,6 +25,8 @@ var _CommonStyles = require("../mobile/CommonStyles");
 
 var _typography = require("../../styles/typography");
 
+var _zIndexes = require("../../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,7 +37,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 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  ", " {\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    ", " {\n      width: 328px !important;\n    }\n  }\n\n  ", ";\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.SMALL, _styles.scrollBarStyling);
+var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\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    ", " {\n      width: 328px !important;\n    }\n  }\n\n  ", ";\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _zIndexes.Z_INDEXES.fixed_menu, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.SMALL, _styles.scrollBarStyling);
 
 var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
 

package/dist/js/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","ComponentTextStyle","Regular","LabelLine","span","neutral_20","StyledMenulink","MenuLink","MobileUserMenu","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","React","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":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","fixed_menu","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentTextStyle","Regular","LabelLine","span","neutral_20","StyledMenulink","MenuLink","MobileUserMenu","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","React","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/js/GlobalNavigationBar/UserMenu/UserMenu.js

@@ -27,6 +27,8 @@ var _CommonStyles = require("../mobile/CommonStyles");
 
 var _typography = require("../../styles/typography");
 
+var _zIndexes = require("../../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,7 +39,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 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 ", ";\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"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _styles.COLORS.neutral_200);
+var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 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 ", ";\n  z-index: ", ";\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"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _styles.COLORS.neutral_200, _zIndexes.Z_INDEXES.fixed_menu);
 
 var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\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"])), _styles.COLORS.neutral_100);
 

package/dist/js/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","AvatarContainer","AvatarAndName","div","neutral_600","ComponentTextStyle","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Size","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":["Menu","styled","ul","COLORS","white","flowDown","neutral_200","Z_INDEXES","fixed_menu","MenuSection","li","neutral_100","MenuSectionList","UserMenuSectionListStyling","StyledAvatarContainer","AvatarContainer","AvatarAndName","div","neutral_600","ComponentTextStyle","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Size","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';\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/js/GlobalNavigationBar/mobile/CommonStyles.js

@@ -15,6 +15,8 @@ var _reactRouterDom = require("react-router-dom");
 
 var _typography = require("../../styles/typography");
 
+var _zIndexes = require("../../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,7 +35,7 @@ exports.Button = Button;
 var flowLeft = (0, _styledComponents.keyframes)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
 var flowRight = (0, _styledComponents.keyframes)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n"])));
 
-var Menu = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ", ";\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  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.SMALL, flowLeft, flowLeft, flowRight, flowRight);
+var Menu = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: 0;\n  top: 0;\n  min-width: 300px;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n  width: 320px;\n  padding-inline-start: 0;\n\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, flowLeft, flowLeft, flowRight, flowRight);
 
 exports.Menu = Menu;
 
@@ -52,7 +54,7 @@ exports.MenuSection = MenuSection;
 var MenuSectionList = _styledComponents.default.ul(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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"])));
 
 exports.MenuSectionList = MenuSectionList;
-var UserMenuSectionListStyling = (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  li:hover:not(.disabled) {\n    background-color: ", ";\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    background: ", ";\n    box-shadow: none;\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n    background-color: ", ";\n  }\n"])), _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
+var UserMenuSectionListStyling = (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  li {\n    position: relative;\n  }\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n    box-shadow: 0px 0px 8px ", ", 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: ", ";\n    background: ", ";\n    box-shadow: none;\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n    background-color: ", ";\n  }\n"])), _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
 exports.UserMenuSectionListStyling = UserMenuSectionListStyling;
 var MenuLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ", "\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
 exports.MenuLink = MenuLink;

package/dist/js/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","NavLink","ComponentTextStyle","Regular","black","MenuWrapper","props","isVisible","flowDown"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,iHAAf;;;;AAKA,IAAMC,MAAM,GAAGF,0BAAOG,MAAV,yIACGC,eAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,uMAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,uMAAf;;AAWO,IAAME,IAAI,GAAGT,0BAAOU,EAAV,opBAIKN,eAAOC,KAJZ,EAgBbM,oBAAYC,KAhBC,EAsBQN,QAtBR,EAuBAA,QAvBA,EA4BQE,SA5BR,EA6BAA,SA7BA,CAAV;;;;AAiCA,IAAMK,KAAK,GAAGb,0BAAOC,GAAV,iHAAX;;;;AAKA,IAAMa,QAAQ,GAAGd,0BAAOe,IAAV,yJACVX,eAAOY,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGjB,0BAAOkB,EAAV,gMAAjB;;;;AASA,IAAMC,eAAe,GAAGnB,0BAAOU,EAAV,uOAArB;;;AAeA,IAAMU,0BAA0B,OAAGC,qBAAH,2oBAEfjB,eAAOkB,UAFQ,EAIxBlB,eAAOmB,WAJiB,EAOxBnB,eAAOmB,WAPiB,EAYTnB,eAAOoB,WAZE,EAmBrBpB,eAAOqB,WAnBc,EAsBxBrB,eAAOsB,WAtBiB,EAyBxBtB,eAAOsB,WAzBiB,EA+BxBtB,eAAOuB,WA/BiB,EAkCxBvB,eAAOuB,WAlCiB,EAoCfvB,eAAOwB,WApCQ,CAAhC;;AAwCA,IAAMC,QAAQ,GAAG,+BAAOC,uBAAP,CAAH,8QAOjB,mCAAkBC,+BAAmBC,OAArC,EAA8C5B,eAAO6B,KAArD,CAPiB,CAAd;;;AAeA,IAAMC,WAAW,GAAGlC,0BAAOC,GAAV,iRACFG,eAAOC,KADL,EAEX,UAAC8B,KAAD;AAAA,SAAYA,KAAK,CAACC,SAAN,GAAkB,MAAlB,GAA2B,MAAvC;AAAA,CAFW,EAYNhC,eAAOC,KAZD,CAAjB;;;AAoBA,IAAMgC,QAAQ,OAAG9B,2BAAH,0MAAd","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","NavLink","ComponentTextStyle","Regular","black","MenuWrapper","props","isVisible","flowDown"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,iHAAf;;;;AAKA,IAAMC,MAAM,GAAGF,0BAAOG,MAAV,yIACGC,eAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,uMAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,uMAAf;;AAWO,IAAME,IAAI,GAAGT,0BAAOU,EAAV,qpBAIKN,eAAOC,KAJZ,EAWJM,oBAAUC,UAXN,EAgBbC,oBAAYC,KAhBC,EAsBQR,QAtBR,EAuBAA,QAvBA,EA4BQE,SA5BR,EA6BAA,SA7BA,CAAV;;;;AAiCA,IAAMO,KAAK,GAAGf,0BAAOC,GAAV,iHAAX;;;;AAKA,IAAMe,QAAQ,GAAGhB,0BAAOiB,IAAV,yJACVb,eAAOc,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGnB,0BAAOoB,EAAV,gMAAjB;;;;AASA,IAAMC,eAAe,GAAGrB,0BAAOU,EAAV,uOAArB;;;AAeA,IAAMY,0BAA0B,OAAGC,qBAAH,6uBAKxBZ,oBAAUa,KALc,EAMfpB,eAAOqB,UANQ,EAQxBrB,eAAOsB,WARiB,EAWxBtB,eAAOsB,WAXiB,EAgBxBf,oBAAUgB,KAhBc,EAiBTvB,eAAOwB,WAjBE,EAwBxBjB,oBAAUkB,MAxBc,EAyBrBzB,eAAO0B,WAzBc,EA4BxB1B,eAAO2B,WA5BiB,EA+BxB3B,eAAO2B,WA/BiB,EAqCxB3B,eAAO4B,WArCiB,EAwCxB5B,eAAO4B,WAxCiB,EA0Cf5B,eAAO6B,WA1CQ,CAAhC;;AA8CA,IAAMC,QAAQ,GAAG,+BAAOC,uBAAP,CAAH,8QAOjB,mCAAkBC,+BAAmBC,OAArC,EAA8CjC,eAAOkC,KAArD,CAPiB,CAAd;;;AAeA,IAAMC,WAAW,GAAGvC,0BAAOC,GAAV,iRACFG,eAAOC,KADL,EAEX,UAACmC,KAAD;AAAA,SAAYA,KAAK,CAACC,SAAN,GAAkB,MAAlB,GAA2B,MAAvC;AAAA,CAFW,EAYNrC,eAAOC,KAZD,CAAjB;;;AAoBA,IAAMqC,QAAQ,OAAGnC,2BAAH,0MAAd","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/js/HyperLink/HyperLink.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     id: string;
     variant: 'default' | 'inverted';
     href: string;
@@ -8,5 +8,5 @@ interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     children?: any;
     className?: string;
 }
-declare const HyperLink: React.FunctionComponent<Props>;
+declare const HyperLink: React.FunctionComponent<HyperlinkProps>;
 export default HyperLink;

package/dist/js/HyperLink/HyperLink.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styling = require("./styling");
 
+var _excluded = ["children", "target", "variant"];
+
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -23,6 +25,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var StyledLink = _styledComponents.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), function (props) {
@@ -32,22 +40,18 @@ var StyledLink = _styledComponents.default.a(_templateObject || (_templateObject
 });
 
 var HyperLink = function HyperLink(_ref) {
-  var id = _ref.id,
-      className = _ref.className,
-      variant = _ref.variant,
-      href = _ref.href,
-      margin = _ref.margin,
-      children = _ref.children,
-      target = _ref.target;
-  return /*#__PURE__*/React.createElement(StyledLink, {
-    id: id,
-    className: className,
+  var children = _ref.children,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_blank' : _ref$target,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+      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/js/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","variant","invertedStyle","defaultStyle","margin","HyperLink","id","className","href","children","target","disabled"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAGC,0BAAOC,CAAV,wFAIZ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BC,sBAA/B,GAA+CC,qBAA3D;AAAA,CAJY,EAKZ,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,MAAN,qBAA0BJ,KAAK,CAACI,MAAhC,SAA4C,EAAxD;AAAA,CALY,CAAhB;;AAkBA,IAAMC,SAAyC,GAAG,SAA5CA,SAA4C,OAAuE;AAAA,MAApEC,EAAoE,QAApEA,EAAoE;AAAA,MAAhEC,SAAgE,QAAhEA,SAAgE;AAAA,MAArDN,OAAqD,QAArDA,OAAqD;AAAA,MAA5CO,IAA4C,QAA5CA,IAA4C;AAAA,MAAtCJ,MAAsC,QAAtCA,MAAsC;AAAA,MAA9BK,QAA8B,QAA9BA,QAA8B;AAAA,MAApBC,MAAoB,QAApBA,MAAoB;AACvH,sBACE,oBAAC,UAAD;AAAY,IAAA,EAAE,EAAEJ,EAAhB;AAAoB,IAAA,SAAS,EAAEC,SAA/B;AAA0C,IAAA,OAAO,EAAEN,OAAnD;AAA4D,IAAA,IAAI,EAAEO,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;AACAL,EAAAA,O,4BAAS,S,EAAY,U;AACrBO,EAAAA,I;AACAG,EAAAA,Q;AACAP,EAAAA,M;AACAK,EAAAA,Q;AACAF,EAAAA,S;;eAWaF,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","variant","invertedStyle","defaultStyle","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAGC,0BAAOC,CAAV,wFAIZ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BC,sBAA/B,GAA+CC,qBAA3D;AAAA,CAJY,EAKZ,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,MAAN,qBAA0BJ,KAAK,CAACI,MAAhC,SAA4C,EAAxD;AAAA,CALY,CAAhB;;AAkBA,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDN,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,oBAAC,UAAD,eAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEM,MAAjD;AAAyD,IAAA,GAAG,EAAC;AAA7D,MACGD,QADH,CADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAP,EAAAA,O,4BAAS,S,EAAY,U;AACrBQ,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;eAWaN,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/js/InputFields/Checkbox.js

@@ -31,7 +31,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var StyledCheckBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\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: ", ";\n    }\n  }\n\n  .label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ", ";\n    }\n\n    .icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var StyledCheckBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\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: ", ";\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .checkbox-icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ", ";\n    }\n\n    .checkbox-icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _styles.COLORS.black, function (props) {
   return props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600;
@@ -49,7 +49,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       disabled = _ref.disabled,
       margin = _ref.margin,
       size = _ref.size,
-      semiSelected = _ref.semiSelected;
+      semiSelected = _ref.semiSelected,
+      children = _ref.children;
 
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
@@ -82,7 +83,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: 'icon'
+    className: 'checkbox-icon'
   }, selected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOn, {
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
@@ -93,9 +94,12 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   })), label && /*#__PURE__*/React.createElement("label", {
-    className: 'label',
+    className: 'checkbox-label',
     htmlFor: id
-  }, label));
+  }, label), !label && /*#__PURE__*/React.createElement("label", {
+    className: 'checkbox-label',
+    htmlFor: id
+  }, children));
 });
 Checkbox.propTypes = {
   id: _propTypes.default.string.isRequired,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","onKeyPress","e","keyCode","handleClick","Size","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":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","onKeyPress","e","keyCode","handleClick","Size","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"}