@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/GlobalNavigationBar/desktop/UserMenu.js

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 import * as React from 'react';
 import styled from 'styled-components';
 import { Button } from '../../Button';
@@ -11,22 +9,120 @@ import { SystemIcons } from '../../icons';
 import { HyperLink } from '../../HyperLink';
 import Breakpoints from '../../styles/breakpoints';
 import { MenuItem } from '../../MenuItem';
-import { useNavigationHelper } from '../../common/NavigationHelper';
+import { useNavigation } from '../../Navigation/NavigationProvider';
 import { ProfileButton } from '../../ProfileButton';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const UserMenuScrollContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
-const UserMenuPinnedContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
-const 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"])), props => COLORS.getColor('white', props.theme), Z_INDEXES.off_canvas, Breakpoints.MEDIUM, flowDown, BOXSHADOWS.BOXSHADOW_CENTERED, props => COLORS.getColor('neutral_200', props.theme), Z_INDEXES.fixed_menu);
-const 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"])), props => COLORS.getColor('neutral_200', props.theme));
-const SignOutActionWrapper = styled(MenuSection)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n"])));
-const 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"])), props => COLORS.getColor('neutral_20', props.theme), props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme)));
-const MenuSectionList = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"])), UserMenuSectionListStyling);
-const 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"])));
-const UserSectionInfo = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
-const UserSectionInfoName = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n"])), props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)));
-const UserSectionInfoEmail = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  word-break: break-all;\n  ", "\n"])), props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme)));
-const 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));
-const UserSection = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n"])));
+const UserMenuScrollContainer = styled.div`
+  flex: 1;
+`;
+const UserMenuPinnedContainer = styled.div``;
+const UserMenuWrapper = styled.div`
+  margin: 0;
+  background-color: ${props => COLORS.getColor('white', props.theme)};
+  box-sizing: border-box;
+  display: none;
+  width: 320px;
+
+  position: absolute;
+
+  &.show {
+    display: block;
+  }
+
+  top: 0;
+  right: 0;
+  z-index: ${Z_INDEXES.off_canvas};
+  height: 100%;
+  flex-flow: column;
+
+
+  ${Breakpoints.MEDIUM} {
+    flex-flow: initial;
+    top: initial;
+    right: initial;
+    height: initial;
+    animation: ${flowDown} 0.2s ease-in-out;
+    box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};
+    border-radius: 8px;
+    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+    z-index: ${Z_INDEXES.fixed_menu};
+    padding: 24px 0;
+  }
+`;
+const MenuSection = styled.div`
+  padding: 4px 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &.divider {
+    border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  }
+`;
+const SignOutActionWrapper = styled(MenuSection)`
+  align-items: center;
+  justify-content: center;
+`;
+const MenuSectionHeader = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 8px 24px 4px 24px;
+  box-sizing: border-box;
+  min-height: 32px;
+  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};
+
+  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme))}
+`;
+const MenuSectionList = styled.div`
+  margin: 0;
+  padding: 0;
+
+  ${UserMenuSectionListStyling};
+`;
+const UserSectionAvatar = styled.div`
+  pointer-events: none;
+
+  button {
+    padding: 0 !important;
+  }
+
+  button > div {
+    width: 48px !important;
+    height: 48px !important;
+    border-radius: 50% !important;
+  }
+`;
+const UserSectionInfo = styled.div`
+  padding: 2px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const UserSectionInfoName = styled.div`
+  ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+`;
+const UserSectionInfoEmail = styled.div`
+  word-break: break-all;
+  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme))}
+`;
+const UserSectionInfoLink = styled.div`
+  padding: 2px 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const UserSection = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 0 24px 8px 24px;
+  gap: 16px;
+`;
 const UserMenu = _ref => {
   let {
     show,
@@ -39,24 +135,22 @@ const UserMenu = _ref => {
   const {
     navigate,
     isActiveRoute
-  } = useNavigationHelper();
+  } = useNavigation();
   React.useEffect(() => {
-    var _document;
     if (!onHideUserMenu) return;
     function handleKeyPress(e) {
       if (e.key === 'Escape' || e.key === 'Esc') {
         onHideUserMenu();
       }
     }
-    (_document = document) === null || _document === void 0 || _document.addEventListener('keydown', handleKeyPress, false);
+    document?.addEventListener('keydown', handleKeyPress, false);
     return () => {
-      var _document2;
-      (_document2 = document) === null || _document2 === void 0 || _document2.removeEventListener('keydown', handleKeyPress, false);
+      document?.removeEventListener('keydown', handleKeyPress, false);
     };
   }, [onHideUserMenu]);
   const renderItem = (item, section, index) => /*#__PURE__*/_jsx(MenuItem, {
-    id: "profile_".concat(index),
-    active: !item.external && isActiveRoute(item.to, !!item.exact),
+    id: `profile_${index}`,
+    active: !item.external && !!isActiveRoute && isActiveRoute(item.to, !!item.exact),
     item: {
       value: item.to,
       disabled: item.disabled,
@@ -65,7 +159,7 @@ const UserMenu = _ref => {
     },
     onClickHandler: e => {
       item.action && item.action(e);
-      navigate(item.to, !!item.external);
+      navigate && navigate(item.to, !!item.external);
     }
   }, index);
   return /*#__PURE__*/_jsxs(UserMenuWrapper, {
@@ -84,12 +178,12 @@ const UserMenu = _ref => {
         }), /*#__PURE__*/_jsxs(UserSectionInfo, {
           children: [/*#__PURE__*/_jsx(UserSectionInfoName, {
             "data-hj-suppress": true,
-            children: "".concat(user.firstName, " ").concat(user.lastName)
+            children: `${user.firstName} ${user.lastName}`
           }), /*#__PURE__*/_jsx(UserSectionInfoEmail, {
             "data-hj-suppress": true,
             children: user.email
           }), user.link && /*#__PURE__*/_jsx(HyperLink, {
-            variant: 'default',
+            variant: 'styleless',
             href: user.link.href,
             target: user.link.target,
             id: user.link.id,
@@ -127,9 +221,9 @@ const UserMenu = _ref => {
           size: Size.Large,
           onClick: e => {
             e.preventDefault();
-            signOut === null || signOut === void 0 || signOut.action();
+            signOut?.action();
           },
-          children: signOut === null || signOut === void 0 ? void 0 : signOut.label
+          children: signOut?.label
         })
       })]
     })]

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","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","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":[]}
+{"version":3,"file":"UserMenu.js","names":["React","styled","Button","BOXSHADOWS","COLORS","ComponentLStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","Size","flowDown","UserMenuSectionListStyling","SystemIcons","HyperLink","Breakpoints","MenuItem","useNavigation","ProfileButton","jsx","_jsx","jsxs","_jsxs","UserMenuScrollContainer","div","UserMenuPinnedContainer","UserMenuWrapper","props","getColor","theme","off_canvas","MEDIUM","BOXSHADOW_CENTERED","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","Bold","MenuSectionList","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","UserSectionInfoEmail","Regular","UserSectionInfoLink","UserSection","UserMenu","_ref","show","user","onHideUserMenu","sections","signOut","label","navigate","isActiveRoute","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","id","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 {useNavigation} from '../../Navigation/NavigationProvider';\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} = useNavigation();\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 && 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 && 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={'styleless'}\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/index.d.ts

@@ -1,3 +1,3 @@
-import GlobalNavigationBar from './GlobalNavigationBar';
-export * from './types';
-export { GlobalNavigationBar };
+import GlobalNavigationBar from './GlobalNavigationBar';
+export * from './types';
+export { GlobalNavigationBar };

package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs

@@ -1,35 +1,228 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flowDown = exports.fadeOut = exports.fadeIn = exports.UserMenuSectionListStyling = exports.SiteName = exports.ScrollableContainer = exports.RowLayout = exports.Right = exports.MobileMenuWrapper = exports.MobileHeaderText = exports.MobileHeaderNote = exports.MobileHeaderContainer = exports.MenuSectionList = exports.MenuSection = exports.MenuLink = exports.Menu = exports.Button = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.flowDown = exports.fadeOut = exports.fadeIn = exports.UserMenuSectionListStyling = exports.SiteName = exports.ScrollableContainer = exports.RowLayout = exports.Right = exports.MobileMenuWrapper = exports.MobileHeaderText = exports.MobileHeaderNote = exports.MobileHeaderContainer = exports.MenuSectionList = exports.MenuSection = exports.Menu = exports.Button = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-const RowLayout = exports.RowLayout = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
-const Button = exports.Button = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"])), props => _styles.COLORS.getColor('white', props.theme));
-const 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"])));
-const 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"])));
-const fadeOut = exports.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"])));
-const fadeIn = exports.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"])));
-const Menu = exports.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"])), props => _styles.COLORS.getColor('white', props.theme), _styles.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, flowLeft, flowRight);
-const Right = exports.Right = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
-const SiteName = exports.SiteName = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), props => _styles.COLORS.getColor('neutral_600', props.theme));
-const MenuSection = exports.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"])));
-const MenuSectionList = exports.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"])));
-const UserMenuSectionListStyling = exports.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, props => _styles.COLORS.getColor('primary_20', props.theme), props => _styles.COLORS.getColor('primary_600', props.theme), props => _styles.COLORS.getColor('primary_600', props.theme), _styles.Z_INDEXES.focus, _styles.focusStyles, _styles.Z_INDEXES.active, props => _styles.COLORS.getColor('primary_100', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('neutral_100', props.theme));
-const MenuLink = exports.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"])), props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)));
-const flowDown = exports.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"])));
-const MobileMenuWrapper = exports.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"])));
-const ScrollableContainer = exports.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));
-const MobileHeaderText = exports.MobileHeaderText = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme)), _styles.BREAKPOINTS.SMALL, props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme)));
-const MobileHeaderNote = exports.MobileHeaderNote = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  word-break: break-all;\n  ", "\n"])), props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme)));
-const MobileHeaderContainer = exports.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"])), props => _styles.COLORS.getColor('neutral_200', props.theme));
+const RowLayout = exports.RowLayout = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+`;
+const Button = exports.Button = _styledComponents.default.button`
+  background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+  font-weight: bold;
+  border: 0;
+`;
+const flowLeft = (0, _styledComponents.keyframes)`
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const flowRight = (0, _styledComponents.keyframes)`
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(100%);
+  }
+`;
+const fadeOut = exports.fadeOut = (0, _styledComponents.keyframes)`
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+`;
+const fadeIn = exports.fadeIn = (0, _styledComponents.keyframes)`
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
+  to {
+    opacity: 1;
+    visibility: visible;
+  }
+`;
+const Menu = exports.Menu = _styledComponents.default.div`
+  height: 100%;
+  background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+  box-sizing: border-box;
+  right: 0;
+  top: 0;
+  position: absolute;
+  z-index: ${_styles.Z_INDEXES.off_canvas};
+  align-items: center;
+
+  width: 320px;
+
+  ${_styles.BREAKPOINTS.SMALL} {
+    width: 400px;
+  }
+
+  .open & {
+    visibility: visible;
+    display: flex;
+    animation: ${flowLeft} 0.3s ease-in-out;
+  }
+
+  .closed & {
+    visibility: hidden;
+    animation: ${flowRight} 0.3s ease-in-out;
+  }
+`;
+const Right = exports.Right = _styledComponents.default.div`
+  display: flex;
+  margin-left: auto;
+`;
+const SiteName = exports.SiteName = _styledComponents.default.span`
+  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+  font-weight: bold;
+  font-size: 14px;
+  margin-left: 4px;
+`;
+const MenuSection = exports.MenuSection = _styledComponents.default.li`
+  margin-top: 16px;
+
+  .disabled-link {
+    color: #21212150;
+    pointer-events: none;
+    key-events: none;
+  }
+`;
+const MenuSectionList = exports.MenuSectionList = _styledComponents.default.ul`
+  list-style: none;
+  padding: 0;
+
+  li {
+    width: 80%;
+    height: 48px;
+    margin: 0 auto 0 12px;
+
+    a {
+      height: 100%;
+    }
+  }
+`;
+const UserMenuSectionListStyling = exports.UserMenuSectionListStyling = (0, _styledComponents.css)`
+  li {
+    position: relative;
+  }
+
+  li:hover:not(.disabled) {
+    z-index: ${_styles.Z_INDEXES.hover};
+    background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+
+    a {
+      color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
+    }
+
+    svg {
+      color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
+    }
+  }
+
+  li:focus-within:not(.disabled) {
+    z-index: ${_styles.Z_INDEXES.focus};
+
+    ${_styles.focusStyles}
+    a {
+      outline: none;
+    }
+  }
+
+  li:active:not(.disabled) {
+    z-index: ${_styles.Z_INDEXES.active};
+    background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+
+    a {
+      color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    }
+
+    svg {
+      color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    }
+  }
+
+  .disabled {
+    a {
+      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    }
+
+    svg {
+      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    }
+
+    background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+  }
+`;
+const flowDown = exports.flowDown = (0, _styledComponents.keyframes)`
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const MobileMenuWrapper = exports.MobileMenuWrapper = _styledComponents.default.div`
+  width: 100%;
+  box-sizing: border-box;
+  flex-flow: column;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+`;
+const ScrollableContainer = exports.ScrollableContainer = _styledComponents.default.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: 100%;
+
+  &.scrollable {
+    margin-right: 6px;
+    padding-right: 10px;
+  }
+
+  ${(0, _styles.scrollBarStyling)(_types.Size.Small)}
+  ::-webkit-scrollbar-track {
+    margin: 8px;
+  }
+`;
+const MobileHeaderText = exports.MobileHeaderText = _styledComponents.default.div`
+  ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
+  ${_styles.BREAKPOINTS.SMALL} {
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
+  }
+`;
+const MobileHeaderNote = exports.MobileHeaderNote = _styledComponents.default.div`
+  word-break: break-all;
+  ${props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+`;
+const MobileHeaderContainer = exports.MobileHeaderContainer = _styledComponents.default.div`
+  margin: 0 24px;
+  padding-bottom: 8px;
+  box-sizing: border-box;
+  border-bottom: 1px solid ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+  display: flex;
+  flex-direction: column;
+`;
 //# sourceMappingURL=CommonStyles.cjs.map

package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map

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