@laerdal/life-react-components 3.6.0 → 3.6.1

package/dist/GlobalNavigationBar/desktop/UserMenu.js

@@ -17,15 +17,29 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var UserMenuScrollContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
 var UserMenuPinnedContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
-var UserMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  width: 320px;\n\n  position: absolute;\n\n  &.show {\n    display: block;\n  }\n\n  top: 0;\n  right: 0;\n  z-index: ", ";\n  height: 100%;\n  flex-flow: column;\n\n\n  ", " {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ", " 0.2s ease-in-out;\n    box-shadow: ", ";\n    border-radius: 8px;\n    border: 1px solid ", ";\n    z-index: ", ";\n    padding: 24px 0;\n  }\n"])), COLORS.white, Z_INDEXES.off_canvas, Breakpoints.MEDIUM, flowDown, BOXSHADOWS.BOXSHADOW_CENTERED, COLORS.neutral_200, Z_INDEXES.fixed_menu);
-var MenuSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
+var UserMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  width: 320px;\n\n  position: absolute;\n\n  &.show {\n    display: block;\n  }\n\n  top: 0;\n  right: 0;\n  z-index: ", ";\n  height: 100%;\n  flex-flow: column;\n\n\n  ", " {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ", " 0.2s ease-in-out;\n    box-shadow: ", ";\n    border-radius: 8px;\n    border: 1px solid ", ";\n    z-index: ", ";\n    padding: 24px 0;\n  }\n"])), function (props) {
+  return COLORS.getColor('white', props.theme);
+}, Z_INDEXES.off_canvas, Breakpoints.MEDIUM, flowDown, BOXSHADOWS.BOXSHADOW_CENTERED, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, Z_INDEXES.fixed_menu);
+var MenuSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+});
 var SignOutActionWrapper = styled(MenuSection)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n"])));
-var MenuSectionHeader = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 4px 24px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
+var MenuSectionHeader = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 4px 24px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), function (props) {
+  return COLORS.getColor('neutral_20', props.theme);
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme));
+});
 var MenuSectionList = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"])), UserMenuSectionListStyling);
 var UserSectionAvatar = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  pointer-events: none;\n\n  button {\n    padding: 0 !important;\n  }\n\n  button > div {\n    width: 48px !important;\n    height: 48px !important;\n    border-radius: 50% !important;\n  }\n"])));
 var UserSectionInfo = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
-var UserSectionInfoName = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-var UserSectionInfoEmail = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  word-break: break-all;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500));
+var UserSectionInfoName = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
+});
+var UserSectionInfoEmail = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  word-break: break-all;\n  ", "\n"])), function (props) {
+  return ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme));
+});
 var UserSectionInfoLink = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
 var UserSection = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n"])));
 var UserMenu = function UserMenu(_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"UserMenu.js","names":["React","styled","Button","BOXSHADOWS","COLORS","ComponentLStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","Size","flowDown","UserMenuSectionListStyling","SystemIcons","HyperLink","Breakpoints","MenuItem","useNavigationHelper","ProfileButton","UserMenuScrollContainer","div","UserMenuPinnedContainer","UserMenuWrapper","white","off_canvas","MEDIUM","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","Bold","neutral_500","MenuSectionList","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","neutral_600","UserSectionInfoEmail","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","navigate","isActiveRoute","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Button} from '../../Button';\r\nimport {\r\n  BOXSHADOWS,\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  Z_INDEXES\r\n} from '../../styles';\r\nimport {Size} from '../../types';\r\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\r\nimport {SystemIcons} from '../../icons';\r\nimport {HyperLink} from '../../HyperLink';\r\nimport {MenuNavigationItem, MenuNavigationSection, ProfileMenu} from '../types';\r\nimport Breakpoints from '../../styles/breakpoints';\r\nimport {MenuItem} from '../../MenuItem';\r\nimport {useNavigationHelper} from '../../common/NavigationHelper';\r\nimport {ProfileButton} from '../../ProfileButton';\r\n\r\nconst UserMenuScrollContainer = styled.div`\r\n  flex: 1;\r\n`;\r\n\r\nconst UserMenuPinnedContainer = styled.div``;\r\n\r\n\r\nconst UserMenuWrapper = styled.div`\r\n  margin: 0;\r\n  background-color: ${COLORS.white};\r\n  box-sizing: border-box;\r\n  display: none;\r\n  width: 320px;\r\n\r\n  position: absolute;\r\n\r\n  &.show {\r\n    display: block;\r\n  }\r\n\r\n  top: 0;\r\n  right: 0;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  height: 100%;\r\n  flex-flow: column;\r\n\r\n\r\n  ${Breakpoints.MEDIUM} {\r\n    flex-flow: initial;\r\n    top: initial;\r\n    right: initial;\r\n    height: initial;\r\n    animation: ${flowDown} 0.2s ease-in-out;\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n    border-radius: 8px;\r\n    border: 1px solid ${COLORS.neutral_200};\r\n    z-index: ${Z_INDEXES.fixed_menu};\r\n    padding: 24px 0;\r\n  }\r\n`;\r\n\r\n\r\nconst MenuSection = styled.div`\r\n  padding: 4px 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n\r\n  &.divider {\r\n    border-top: 1px solid ${COLORS.neutral_200};\r\n  }\r\n`;\r\n\r\nconst SignOutActionWrapper = styled(MenuSection)`\r\n  align-items: center;\r\n  justify-content: center;\r\n`;\r\n\r\nconst MenuSectionHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px 24px 4px 24px;\r\n  box-sizing: border-box;\r\n  min-height: 32px;\r\n  background-color: ${COLORS.neutral_20};\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\r\n`;\r\n\r\nconst MenuSectionList = styled.div`\r\n  margin: 0;\r\n  padding: 0;\r\n\r\n  ${UserMenuSectionListStyling};\r\n`;\r\n\r\n\r\nconst UserSectionAvatar = styled.div`\r\n  pointer-events: none;\r\n\r\n  button {\r\n    padding: 0 !important;\r\n  }\r\n\r\n  button > div {\r\n    width: 48px !important;\r\n    height: 48px !important;\r\n    border-radius: 50% !important;\r\n  }\r\n`;\r\n\r\nconst UserSectionInfo = styled.div`\r\n  padding: 2px 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n`;\r\n\r\nconst UserSectionInfoName = styled.div`\r\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n`;\r\n\r\nconst UserSectionInfoEmail = styled.div`\r\n  word-break: break-all;\r\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\r\n`;\r\n\r\nconst UserSectionInfoLink = styled.div`\r\n  padding: 2px 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst UserSection = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 0 24px 8px 24px;\r\n  gap: 16px;\r\n`;\r\n\r\ninterface UserMenuProps extends ProfileMenu {\r\n  show?: boolean;\r\n  onHideUserMenu: () => void;\r\n}\r\n\r\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\r\n\r\n  const {navigate, isActiveRoute} = useNavigationHelper();\r\n\r\n  React.useEffect(() => {\r\n    if (!onHideUserMenu) return;\r\n\r\n    function handleKeyPress(e: any) {\r\n      if (e.key === 'Escape' || e.key === 'Esc') {\r\n        onHideUserMenu();\r\n      }\r\n    }\r\n\r\n    document?.addEventListener('keydown', handleKeyPress, false);\r\n    return () => {\r\n      document?.removeEventListener('keydown', handleKeyPress, false);\r\n    };\r\n  }, [onHideUserMenu]);\r\n\r\n  const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\r\n    <MenuItem key={index}\r\n              id={`profile_${index}`}\r\n              active={!item.external && isActiveRoute(item.to, !!item.exact)}\r\n              item={{\r\n                value: item.to,\r\n                disabled: item.disabled,\r\n                icon: item.icon,\r\n                displayLabel: item.label,\r\n              }}\r\n              onClickHandler={(e) => {\r\n                item.action && item.action(e);\r\n                navigate(item.to, !!item.external);\r\n              }}/>\r\n\r\n  return (\r\n    <UserMenuWrapper onClick={onHideUserMenu}\r\n                     className={show ? 'show' : ''}\r\n                     role=\"menu\"\r\n                     aria-labelledby=\"UserMenuButton\">\r\n      <UserMenuScrollContainer>\r\n        <UserSection>\r\n          <UserSectionAvatar>\r\n            <ProfileButton onClick={() => {\r\n            }}\r\n                           tabIndex={-1}\r\n                           initials={user.firstName[0] + user.lastName[0]}/>\r\n          </UserSectionAvatar>\r\n          <UserSectionInfo>\r\n            <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\r\n            <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\r\n            {\r\n              user.link &&\r\n              <HyperLink variant={'default'}\r\n                         href={user.link.href}\r\n                         target={user.link.target}\r\n                         id={user.link.id}\r\n                         onClick={user.link.onClick}>\r\n                <UserSectionInfoLink>\r\n                  <span>\r\n                    {user.link.label}\r\n                  </span>\r\n                  {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\r\n                </UserSectionInfoLink>\r\n              </HyperLink>\r\n            }\r\n          </UserSectionInfo>\r\n        </UserSection>\r\n        {\r\n          sections.filter(a => !a.pinned).map((section, index) =>\r\n            <MenuSection key={index} className={section.divider ? 'divider' : ''}>\r\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\r\n              <MenuSectionList key={index}>\r\n                {section.items.map((item, index) => renderItem(item, section, index))}\r\n              </MenuSectionList>\r\n            </MenuSection>\r\n          )\r\n        }\r\n      </UserMenuScrollContainer>\r\n      <UserMenuPinnedContainer>\r\n        {\r\n          sections.filter(a => !!a.pinned).map((section, index) =>\r\n            <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\r\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\r\n              <MenuSectionList key={index}>\r\n                {section.items.map((item, index) => renderItem(item, section, index))}\r\n              </MenuSectionList>\r\n            </MenuSection>\r\n          )\r\n        }\r\n        {\r\n          signOut &&\r\n          <SignOutActionWrapper>\r\n            <Button width={'272px'}\r\n                    variant=\"secondary\"\r\n                    icon={<SystemIcons.Logout/>}\r\n                    size={Size.Large}\r\n                    onClick={e => {\r\n                      e.preventDefault();\r\n                      signOut?.action();\r\n                    }}>\r\n              {signOut?.label}\r\n            </Button>\r\n          </SignOutActionWrapper>\r\n        }\r\n      </UserMenuPinnedContainer>\r\n    </UserMenuWrapper>\r\n  );\r\n};\r\n\r\nexport default UserMenu;\r\n"],"mappings":"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"}
+{"version":3,"file":"UserMenu.js","names":["React","styled","Button","BOXSHADOWS","COLORS","ComponentLStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","Size","flowDown","UserMenuSectionListStyling","SystemIcons","HyperLink","Breakpoints","MenuItem","useNavigationHelper","ProfileButton","jsx","_jsx","jsxs","_jsxs","UserMenuScrollContainer","div","_templateObject","_taggedTemplateLiteral","UserMenuPinnedContainer","_templateObject2","UserMenuWrapper","_templateObject3","props","getColor","theme","off_canvas","MEDIUM","BOXSHADOW_CENTERED","fixed_menu","MenuSection","_templateObject4","SignOutActionWrapper","_templateObject5","MenuSectionHeader","_templateObject6","Bold","MenuSectionList","_templateObject7","UserSectionAvatar","_templateObject8","UserSectionInfo","_templateObject9","UserSectionInfoName","_templateObject10","UserSectionInfoEmail","_templateObject11","Regular","UserSectionInfoLink","_templateObject12","UserSection","_templateObject13","UserMenu","_ref","show","user","onHideUserMenu","sections","signOut","label","_useNavigationHelper","navigate","isActiveRoute","useEffect","_document","handleKeyPress","e","key","document","addEventListener","_document2","removeEventListener","renderItem","item","section","index","id","concat","active","external","to","exact","value","disabled","icon","displayLabel","onClickHandler","action","onClick","className","role","children","tabIndex","initials","firstName","lastName","email","link","variant","href","target","cloneElement","size","filter","a","pinned","map","divider","items","width","Logout","Large","preventDefault","propTypes","_pt","bool","func","isRequired"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Button} from '../../Button';\r\nimport {\r\n  BOXSHADOWS,\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  Z_INDEXES\r\n} from '../../styles';\r\nimport {Size} from '../../types';\r\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\r\nimport {SystemIcons} from '../../icons';\r\nimport {HyperLink} from '../../HyperLink';\r\nimport {MenuNavigationItem, MenuNavigationSection, ProfileMenu} from '../types';\r\nimport Breakpoints from '../../styles/breakpoints';\r\nimport {MenuItem} from '../../MenuItem';\r\nimport {useNavigationHelper} from '../../common/NavigationHelper';\r\nimport {ProfileButton} from '../../ProfileButton';\r\n\r\nconst UserMenuScrollContainer = styled.div`\r\n  flex: 1;\r\n`;\r\n\r\nconst UserMenuPinnedContainer = styled.div``;\r\n\r\n\r\nconst UserMenuWrapper = styled.div`\r\n  margin: 0;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  display: none;\r\n  width: 320px;\r\n\r\n  position: absolute;\r\n\r\n  &.show {\r\n    display: block;\r\n  }\r\n\r\n  top: 0;\r\n  right: 0;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  height: 100%;\r\n  flex-flow: column;\r\n\r\n\r\n  ${Breakpoints.MEDIUM} {\r\n    flex-flow: initial;\r\n    top: initial;\r\n    right: initial;\r\n    height: initial;\r\n    animation: ${flowDown} 0.2s ease-in-out;\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n    border-radius: 8px;\r\n    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    z-index: ${Z_INDEXES.fixed_menu};\r\n    padding: 24px 0;\r\n  }\r\n`;\r\n\r\n\r\nconst MenuSection = styled.div`\r\n  padding: 4px 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n\r\n  &.divider {\r\n    border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\nconst SignOutActionWrapper = styled(MenuSection)`\r\n  align-items: center;\r\n  justify-content: center;\r\n`;\r\n\r\nconst MenuSectionHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px 24px 4px 24px;\r\n  box-sizing: border-box;\r\n  min-height: 32px;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme))}\r\n`;\r\n\r\nconst MenuSectionList = styled.div`\r\n  margin: 0;\r\n  padding: 0;\r\n\r\n  ${UserMenuSectionListStyling};\r\n`;\r\n\r\n\r\nconst UserSectionAvatar = styled.div`\r\n  pointer-events: none;\r\n\r\n  button {\r\n    padding: 0 !important;\r\n  }\r\n\r\n  button > div {\r\n    width: 48px !important;\r\n    height: 48px !important;\r\n    border-radius: 50% !important;\r\n  }\r\n`;\r\n\r\nconst UserSectionInfo = styled.div`\r\n  padding: 2px 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n`;\r\n\r\nconst UserSectionInfoName = styled.div`\r\n  ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nconst UserSectionInfoEmail = styled.div`\r\n  word-break: break-all;\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme))}\r\n`;\r\n\r\nconst UserSectionInfoLink = styled.div`\r\n  padding: 2px 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst UserSection = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 0 24px 8px 24px;\r\n  gap: 16px;\r\n`;\r\n\r\ninterface UserMenuProps extends ProfileMenu {\r\n  show?: boolean;\r\n  onHideUserMenu: () => void;\r\n}\r\n\r\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\r\n\r\n  const {navigate, isActiveRoute} = useNavigationHelper();\r\n\r\n  React.useEffect(() => {\r\n    if (!onHideUserMenu) return;\r\n\r\n    function handleKeyPress(e: any) {\r\n      if (e.key === 'Escape' || e.key === 'Esc') {\r\n        onHideUserMenu();\r\n      }\r\n    }\r\n\r\n    document?.addEventListener('keydown', handleKeyPress, false);\r\n    return () => {\r\n      document?.removeEventListener('keydown', handleKeyPress, false);\r\n    };\r\n  }, [onHideUserMenu]);\r\n\r\n  const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\r\n    <MenuItem key={index}\r\n              id={`profile_${index}`}\r\n              active={!item.external && isActiveRoute(item.to, !!item.exact)}\r\n              item={{\r\n                value: item.to,\r\n                disabled: item.disabled,\r\n                icon: item.icon,\r\n                displayLabel: item.label,\r\n              }}\r\n              onClickHandler={(e) => {\r\n                item.action && item.action(e);\r\n                navigate(item.to, !!item.external);\r\n              }}/>\r\n\r\n  return (\r\n    <UserMenuWrapper onClick={onHideUserMenu}\r\n                     className={show ? 'show' : ''}\r\n                     role=\"menu\"\r\n                     aria-labelledby=\"UserMenuButton\">\r\n      <UserMenuScrollContainer>\r\n        <UserSection>\r\n          <UserSectionAvatar>\r\n            <ProfileButton onClick={() => {\r\n            }}\r\n                           tabIndex={-1}\r\n                           initials={user.firstName[0] + user.lastName[0]}/>\r\n          </UserSectionAvatar>\r\n          <UserSectionInfo>\r\n            <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\r\n            <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\r\n            {\r\n              user.link &&\r\n              <HyperLink variant={'default'}\r\n                         href={user.link.href}\r\n                         target={user.link.target}\r\n                         id={user.link.id}\r\n                         onClick={user.link.onClick}>\r\n                <UserSectionInfoLink>\r\n                  <span>\r\n                    {user.link.label}\r\n                  </span>\r\n                  {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\r\n                </UserSectionInfoLink>\r\n              </HyperLink>\r\n            }\r\n          </UserSectionInfo>\r\n        </UserSection>\r\n        {\r\n          sections.filter(a => !a.pinned).map((section, index) =>\r\n            <MenuSection key={index} className={section.divider ? 'divider' : ''}>\r\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\r\n              <MenuSectionList key={index}>\r\n                {section.items.map((item, index) => renderItem(item, section, index))}\r\n              </MenuSectionList>\r\n            </MenuSection>\r\n          )\r\n        }\r\n      </UserMenuScrollContainer>\r\n      <UserMenuPinnedContainer>\r\n        {\r\n          sections.filter(a => !!a.pinned).map((section, index) =>\r\n            <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\r\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\r\n              <MenuSectionList key={index}>\r\n                {section.items.map((item, index) => renderItem(item, section, index))}\r\n              </MenuSectionList>\r\n            </MenuSection>\r\n          )\r\n        }\r\n        {\r\n          signOut &&\r\n          <SignOutActionWrapper>\r\n            <Button width={'272px'}\r\n                    variant=\"secondary\"\r\n                    icon={<SystemIcons.Logout/>}\r\n                    size={Size.Large}\r\n                    onClick={e => {\r\n                      e.preventDefault();\r\n                      signOut?.action();\r\n                    }}>\r\n              {signOut?.label}\r\n            </Button>\r\n          </SignOutActionWrapper>\r\n        }\r\n      </UserMenuPinnedContainer>\r\n    </UserMenuWrapper>\r\n  );\r\n};\r\n\r\nexport default UserMenu;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/GlobalNavigationBar/desktop/__tests__/DesktopActions.test.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import DesktopActions, {DesktopActionsRef} from '../DesktopActions';
+import {act, render} from '../../../test-utils';
+import {DesktopMenuButtonTypes} from '../../types';
+import {SystemIcons} from '../../../icons';
+import {IconButtonStyled} from '../../../Button/Iconbutton';
+import {ProfileButtonContainer} from '../../../ProfileButton/ProfileButton';
+
+describe('DesktopActions', () => {
+  const profileSpy = jest.fn();
+  const actionSpy = jest.fn();
+  const switcherSpy = jest.fn();
+  const showSubMenuSpy = jest.fn();
+
+  const profile: DesktopMenuButtonTypes = {
+    type: 'profile',
+    action: profileSpy,
+  };
+
+  const action: DesktopMenuButtonTypes = {
+    type: 'action',
+    action: actionSpy,
+    icon: <SystemIcons.Search/>,
+  };
+
+  const switcher: DesktopMenuButtonTypes = {
+    type: 'switcher',
+    action: switcherSpy,
+  };
+
+
+  it('should render profile button', () => {
+    const wrapper = render(<DesktopActions buttons={[profile]} onShowUserMenu={showSubMenuSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`${ProfileButtonContainer}`)).toHaveLength(1);
+  });
+
+  it('should render action button', () => {
+    const wrapper = render(<DesktopActions buttons={[action]} onShowUserMenu={showSubMenuSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(1);
+  });
+
+  it('should render switcher button', () => {
+    const wrapper = render(<DesktopActions buttons={[switcher]} onShowUserMenu={showSubMenuSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`#globalNavAppsButton`)).toHaveLength(1);
+  });
+
+  it('should call profile action on profile button click', () => {
+    const wrapper = render(<DesktopActions buttons={[profile]} onShowUserMenu={showSubMenuSpy}/>)
+
+    act(() => {
+      wrapper.container.querySelector('button')!.click();
+    });
+
+    expect(profileSpy).toHaveBeenCalled();
+  });
+
+  it('should call on sub menu open when action is not specified on profile button click', () => {
+    const wrapper = render(<DesktopActions buttons={[{...profile, action: undefined}]}
+                                           onShowUserMenu={showSubMenuSpy}/>)
+
+    act(() => {
+      wrapper.container.querySelector('button')!.click();
+    });
+
+    expect(showSubMenuSpy).toHaveBeenCalled();
+  });
+
+  it('should call action on action button click', () => {
+    const wrapper = render(<DesktopActions buttons={[action]} onShowUserMenu={showSubMenuSpy}/>)
+
+    act(() => {
+      wrapper.container.querySelector('button')!.click();
+    });
+
+    expect(actionSpy).toHaveBeenCalled();
+  });
+
+  it('should call switcher action on switcher button click', () => {
+    const wrapper = render(<DesktopActions buttons={[switcher]} onShowUserMenu={showSubMenuSpy}/>)
+
+    act(() => {
+      wrapper.container.querySelector('button')!.click();
+    });
+
+    expect(switcherSpy).toHaveBeenCalled();
+  });
+
+
+  it('should not throw exceptions when buttons are removed', async () => {
+    const actionsRef = React.createRef<DesktopActionsRef>();
+
+    const wrapper = render(<DesktopActions ref={actionsRef}
+                                          buttons={[switcher, profile, action]}
+                                          onShowUserMenu={showSubMenuSpy}/>)
+
+    wrapper.rerender(<DesktopActions ref={actionsRef}
+                                     buttons={[]}
+                                     onShowUserMenu={showSubMenuSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`#globalNavAppsButton`)).toHaveLength(0);
+    expect(wrapper.container.querySelectorAll(`${ProfileButtonContainer}`)).toHaveLength(0);
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(0);
+  });
+
+});

package/dist/GlobalNavigationBar/desktop/__tests__/ExtendedMainMenu.test.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {MenuNavigationItemTypeItem} from '../../types';
+import {render} from '../../../test-utils';
+import ExtendedMainMenu from '../ExtendedMainMenu';
+import { NavigationProvider } from '../../../Navigation';
+
+describe('ExtendedMainMenu', () => {
+  const menuClickSpy = jest.fn();
+  const items = [{
+    label: 'item1',
+    to: '#1'
+  },
+    {
+      label: 'item2',
+      to: '#2'
+    }] as MenuNavigationItemTypeItem[];
+
+  it('should render items', () => {
+    
+    const wrapper = render(
+        <NavigationProvider currentPath='' isActiveRoute={() => false} navigate={(path: string, isExternal: boolean) => {}}>
+          <ExtendedMainMenu clickMenuAction={menuClickSpy} navigationOptions={items}/>
+        </NavigationProvider>);
+
+    expect(wrapper.getByText('item1')).toBeDefined();
+    expect(wrapper.getByText('item2')).toBeDefined();
+  });
+});

package/dist/GlobalNavigationBar/desktop/__tests__/MainMenu.test.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {MenuNavigationItemTypeItem} from '../../types';
+import {fireEvent, render} from '../../../test-utils';
+import {IconButtonStyled} from '../../../Button/Iconbutton';
+import MainMenu from '../MainMenu';
+import { act } from "react";
+import { NavigationProvider } from '../../../Navigation';
+
+
+describe('MainMenu', () => {
+  const menuClickSpy = jest.fn();
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+  const items = [{
+    label: 'item1',
+    to: '#1'
+  },
+    {
+      label: 'item2',
+      to: '#2'
+    }] as MenuNavigationItemTypeItem[];
+
+  it('should render items', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MainMenu rightSideRef={{current: {offsetLeft: 10000}} as any} items={items}/></NavigationProvider>);
+
+    expect(wrapper.getByText('item1')).toBeDefined();
+    expect(wrapper.getByText('item2')).toBeDefined();
+  });
+
+  it('should not show extended menu if width is enough', () => {
+    const wrapper = render(
+      <NavigationProvider {...navProps}>
+        <MainMenu items={items}  rightSideRef={{current: {offsetLeft: 10000}} as any}/>
+      </NavigationProvider>
+    );
+
+    act(() => {
+      global.dispatchEvent(new Event('resize'));
+    })
+
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(0);
+  });
+
+  it('should show extended menu if width is not enough', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MainMenu rightSideRef={{current: {offsetLeft: 0}} as any}
+                                                   items={items}/></NavigationProvider>);
+
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(1);
+  });
+
+});

package/dist/GlobalNavigationBar/desktop/__tests__/RightSideNav.test.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {MenuNavigationItemTypeItem} from '../../types';
+import {render} from '../../../test-utils';
+import ExtendedMainMenu from '../ExtendedMainMenu';
+import {IconButtonStyled} from '../../../Button/Iconbutton';
+import MainMenu from '../MainMenu';
+import RightSideNav from '../RightSideNav';
+import { NavigationProvider } from '../../../Navigation';
+
+describe('RightSideNav', () => {
+  
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+
+  const items = [{
+    label: 'item1',
+    to: '#1'
+  },
+    {
+      label: 'item2',
+      to: '#2'
+    }] as MenuNavigationItemTypeItem[];
+
+  it('should render items', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><RightSideNav items={items}/></NavigationProvider>);
+
+    expect(wrapper.getByText('item1')).toBeDefined();
+    expect(wrapper.getByText('item2')).toBeDefined();
+  });
+
+  it('should render action', () => {
+    const wrapper = render(
+      <NavigationProvider {...navProps}>
+        <RightSideNav items={[]}
+                      action={{label: 'label', action: jest.fn()}}/>
+      </NavigationProvider>);
+
+    expect(wrapper.getByText('label')).toBeDefined();
+  });
+
+});

package/dist/GlobalNavigationBar/desktop/__tests__/UserMenu.test.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import UserMenu from '../UserMenu';
+import {act, fireEvent, render} from '../../../test-utils';
+import {ProfileMenu} from '../../types';
+import {ProfileButtonContainer} from '../../../ProfileButton/ProfileButton';
+import { NavigationProvider } from '../../../Navigation/NavigationProvider';
+
+
+
+describe('UserMenu', () => {
+
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+  it('should render profile icon', function () {
+    const props: ProfileMenu = {
+      user: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'email'
+      },
+      sections: []
+    }
+    const wrapper = render(<NavigationProvider {...navProps}><UserMenu {...props} onHideUserMenu={jest.fn()}/></NavigationProvider>);
+
+    expect(wrapper.container.querySelectorAll(`${ProfileButtonContainer}`)).toHaveLength(1);
+
+    wrapper.unmount();
+  });
+
+  it('should render label', function () {
+    const props: ProfileMenu = {
+      user: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'email'
+      },
+      sections: [],
+      label: 'label'
+    }
+    const wrapper = render(<NavigationProvider {...navProps}><UserMenu {...props} onHideUserMenu={jest.fn()}/></NavigationProvider>);
+
+    expect(wrapper.findByText('label')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('should render sign out button', function () {
+    const props: ProfileMenu = {
+      user: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'email'
+      },
+      sections: [],
+      signOut: {
+        action: jest.fn(),
+        label: 'sign out'
+      }
+    }
+    const wrapper = render(<NavigationProvider {...navProps}><UserMenu {...props} onHideUserMenu={jest.fn()}/></NavigationProvider>);
+
+    expect(wrapper.findByText('sign out')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('should render sections', function () {
+    const props: ProfileMenu = {
+      user: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'email'
+      },
+      sections: [{
+        label: 'label',
+        items: [{
+          label: 'item1',
+          to: '#'
+        }]
+      }],
+    }
+    const wrapper = render(<NavigationProvider {...navProps}>
+      <UserMenu {...props} onHideUserMenu={jest.fn()}/>
+    </NavigationProvider>);
+
+    expect(wrapper.getByText('item1')).toBeDefined();
+    expect(wrapper.getByText('label')).toBeDefined();
+
+    wrapper.unmount();
+  });
+
+  it('should close when item is clicked', async function () {
+    const props: ProfileMenu = {
+      user: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'email'
+      },
+      sections: [{
+        label: 'label',
+        items: [{
+          label: 'item1',
+          to: 'http://localhost',
+          external: true
+        }]
+      }],
+    };
+
+    const onClose = jest.fn();
+    const wrapper = render(<NavigationProvider {...navProps}> <UserMenu {...props} onHideUserMenu={onClose}/> </NavigationProvider>);
+
+    act(() => {
+      fireEvent.click(wrapper.getByText('item1'));
+    })
+
+    expect(onClose).toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
+
+});

package/dist/GlobalNavigationBar/index.cjs

@@ -10,7 +10,7 @@ var _exportNames = {
 Object.defineProperty(exports, "GlobalNavigationBar", {
   enumerable: true,
   get: function get() {
-    return _GlobalNavigationBar.default;
+    return _GlobalNavigationBar["default"];
   }
 });
 var _GlobalNavigationBar = _interopRequireDefault(require("./GlobalNavigationBar"));

package/dist/GlobalNavigationBar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/GlobalNavigationBar/index.tsx"],"sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\r\n\r\nexport * from './types';\r\n\r\nexport {GlobalNavigationBar};\r\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAEA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.cjs","names":["_GlobalNavigationBar","_interopRequireDefault","require","_types","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/GlobalNavigationBar/index.tsx"],"sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\r\n\r\nexport * from './types';\r\n\r\nexport {GlobalNavigationBar};\r\n"],"mappings":";;;;;;;;;;;;;;;AAAA,IAAAA,oBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAZ,MAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/dist/GlobalNavigationBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["GlobalNavigationBar"],"sources":["../../src/GlobalNavigationBar/index.tsx"],"sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\r\n\r\nexport * from './types';\r\n\r\nexport {GlobalNavigationBar};\r\n"],"mappings":"AAAA,OAAOA,mBAAmB,MAAM,uBAAuB;AAEvD,cAAc,SAAS;AAEvB,SAAQA,mBAAmB"}
+{"version":3,"file":"index.js","names":["GlobalNavigationBar"],"sources":["../../src/GlobalNavigationBar/index.tsx"],"sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\r\n\r\nexport * from './types';\r\n\r\nexport {GlobalNavigationBar};\r\n"],"mappings":"AAAA,OAAOA,mBAAmB,MAAM,uBAAuB;AAEvD,cAAc,SAAS;AAEvB,SAAQA,mBAAmB","ignoreList":[]}

package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs

@@ -12,42 +12,76 @@ var _styles = require("../../styles");
 var _reactRouterDom = require("react-router-dom");
 var _types = require("../../types");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
-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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var RowLayout = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var RowLayout = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n"])));
 exports.RowLayout = RowLayout;
-var Button = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"])), _styles.COLORS.white);
+var Button = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"])), function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+});
 exports.Button = Button;
-var flowLeft = (0, _styledComponents.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(100%);\n  }\n"])));
-var fadeOut = (0, _styledComponents.keyframes)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n"])));
+var flowLeft = (0, _styledComponents.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\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 = (0, _taggedTemplateLiteral2["default"])(["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(100%);\n  }\n"])));
+var fadeOut = (0, _styledComponents.keyframes)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n"])));
 exports.fadeOut = fadeOut;
-var fadeIn = (0, _styledComponents.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n"])));
+var fadeIn = (0, _styledComponents.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n"])));
 exports.fadeIn = fadeIn;
-var Menu = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  background-color: ", ";\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n\n  width: 320px;\n\n  ", " {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), _styles.COLORS.white, _styles.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, flowLeft, flowRight);
+var Menu = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 100%;\n  background-color: ", ";\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n\n  width: 320px;\n\n  ", " {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, _styles.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, flowLeft, flowRight);
 exports.Menu = Menu;
-var Right = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
+var Right = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin-left: auto;\n"])));
 exports.Right = Right;
-var SiteName = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), _styles.COLORS.neutral_600);
+var SiteName = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_600', props.theme);
+});
 exports.SiteName = SiteName;
-var MenuSection = _styledComponents.default.li(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
+var MenuSection = _styledComponents["default"].li(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
 exports.MenuSection = MenuSection;
-var MenuSectionList = _styledComponents.default.ul(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+var MenuSectionList = _styledComponents["default"].ul(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\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)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n\n    ", "\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n\n    background-color: ", ";\n  }\n"])), _styles.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.Z_INDEXES.focus, _styles.focusStyles, _styles.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);
+var UserMenuSectionListStyling = (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n\n    ", "\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n\n    background-color: ", ";\n  }\n"])), _styles.Z_INDEXES.hover, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_600', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_600', props.theme);
+}, _styles.Z_INDEXES.focus, _styles.focusStyles, _styles.Z_INDEXES.active, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+});
 exports.UserMenuSectionListStyling = UserMenuSectionListStyling;
-var MenuLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\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, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black));
+var MenuLink = (0, _styledComponents["default"])(_reactRouterDom.NavLink)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
+});
 exports.MenuLink = MenuLink;
-var flowDown = (0, _styledComponents.keyframes)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var flowDown = (0, _styledComponents.keyframes)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
 exports.flowDown = flowDown;
-var MobileMenuWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+var MobileMenuWrapper = _styledComponents["default"].div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
 exports.MobileMenuWrapper = MobileMenuWrapper;
-var ScrollableContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
+var ScrollableContainer = _styledComponents["default"].div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
 exports.ScrollableContainer = ScrollableContainer;
-var MobileHeaderText = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+var MobileHeaderText = _styledComponents["default"].div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme));
+}, _styles.BREAKPOINTS.SMALL, function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme));
+});
 exports.MobileHeaderText = MobileHeaderText;
-var MobileHeaderNote = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  word-break: break-all;\n  ", "\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+var MobileHeaderNote = _styledComponents["default"].div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["\n  word-break: break-all;\n  ", "\n"])), function (props) {
+  return (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme));
+});
 exports.MobileHeaderNote = MobileHeaderNote;
-var MobileHeaderContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"])), _styles.COLORS.neutral_200);
+var MobileHeaderContainer = _styledComponents["default"].div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+});
 exports.MobileHeaderContainer = MobileHeaderContainer;
 //# sourceMappingURL=CommonStyles.cjs.map