@laerdal/life-react-components 1.8.0-dev.30 → 1.8.0-dev.31.full

package/dist/GlobalNavigationBar/desktop/UserMenu.cjs

@@ -67,7 +67,7 @@ var UserSectionInfoName = _styledComponents.default.div(_templateObject10 || (_t
 
 var UserSectionInfoEmail = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_500));
 
-var UserSectionInfoLink = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
+var UserSectionInfoLink = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null));
 
 var UserSection = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n"])));
 

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

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

package/dist/GlobalNavigationBar/desktop/UserMenu.js

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

package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs

@@ -154,7 +154,10 @@ var MobileMenu = function MobileMenu(_ref) {
       action: current === null || current === void 0 ? void 0 : current.content.action,
       onSubMenuOpen: onSubMenuOpen
     }), (current === null || current === void 0 ? void 0 : current.footer) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileFooter, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {}), switcher && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {
+        height: '36px',
+        width: '66px'
+      }), switcher && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitcherLabel, {
           className: 'globalNav-toggler',
           children: "Switch site"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentTextStyle","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","query","MEDIUM","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MenuIconSubMenuButton,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useMediaQuery} from 'react-responsive';\nimport {useStackState} from '../../common/StackState';\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaQuery({query: BREAKPOINTS.MEDIUM.replace('@media ', '')});\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.cjs"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentTextStyle","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","query","MEDIUM","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MenuIconSubMenuButton,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useMediaQuery} from 'react-responsive';\nimport {useStackState} from '../../common/StackState';\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaQuery({query: BREAKPOINTS.MEDIUM.replace('@media ', '')});\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.cjs"}

package/dist/GlobalNavigationBar/mobile/MobileMenu.js

@@ -125,7 +125,10 @@ var MobileMenu = function MobileMenu(_ref) {
       action: current === null || current === void 0 ? void 0 : current.content.action,
       onSubMenuOpen: onSubMenuOpen
     }), (current === null || current === void 0 ? void 0 : current.footer) && /*#__PURE__*/_jsxs(MobileFooter, {
-      children: [/*#__PURE__*/_jsx(LaerdalLogo, {}), switcher && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(LaerdalLogo, {
+        height: '36px',
+        width: '66px'
+      }), switcher && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(SwitcherLabel, {
           className: 'globalNav-toggler',
           children: "Switch site"

package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useMediaQuery","useStackState","Wrapper","div","off_canvas","SMALL","SwitcherLabel","MobileFooter","neutral_200","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","query","MEDIUM","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MenuIconSubMenuButton,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useMediaQuery} from 'react-responsive';\nimport {useStackState} from '../../common/StackState';\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaQuery({query: BREAKPOINTS.MEDIUM.replace('@media ', '')});\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useMediaQuery","useStackState","Wrapper","div","off_canvas","SMALL","SwitcherLabel","MobileFooter","neutral_200","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","query","MEDIUM","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MenuIconSubMenuButton,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useMediaQuery} from 'react-responsive';\nimport {useStackState} from '../../common/StackState';\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaQuery({query: BREAKPOINTS.MEDIUM.replace('@media ', '')});\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs

@@ -49,7 +49,7 @@ var ScrollableContainer = _styledComponents.default.div(_templateObject4 || (_te
 
 var MenuItemsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
 
-var MenuSectionContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), _styles.COLORS.neutral_200);
+var MenuSectionContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), _styles.COLORS.neutral_200);
 
 var MenuSectionHeader = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), _styles.COLORS.neutral_20, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_500));
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["HeaderText","styled","div","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","HeaderNote","ParagraphTextStyle","Regular","HeaderContainer","neutral_200","ScrollableContainer","Size","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","React","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":";;;;;;;;;;;;;;;AAAA;;AASA;;AACA;;AAYA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAGA,IAAMA,UAAU,GAAGC,0BAAOC,GAAV,uHACZ,+BAAkBC,2BAAmBC,IAArC,EAA2CC,eAAOC,WAAlD,CADY,EAEZC,oBAAYC,KAFA,EAGV,+BAAkBL,2BAAmBC,IAArC,EAA2CC,eAAOC,WAAlD,CAHU,CAAhB;;AAMA,IAAMG,UAAU,GAAGR,0BAAOC,GAAV,gGACZ,gCAAmBQ,2BAAmBC,OAAtC,EAA+CN,eAAOC,WAAtD,CADY,CAAhB;;AAGA,IAAMM,eAAe,GAAGX,0BAAOC,GAAV,6OAIQG,eAAOQ,WAJf,CAArB;;AAUA,IAAMC,mBAAmB,GAAGb,0BAAOC,GAAV,gRAYrB,8BAAiBa,YAAKC,KAAtB,CAZqB,CAAzB;;AAeA,IAAMC,kBAAkB,GAAGhB,0BAAOC,GAAV,gLAAxB;;AAOA,IAAMgB,oBAAoB,GAAGjB,0BAAOC,GAAV,+NAOEG,eAAOQ,WAPT,CAA1B;;AAWA,IAAMM,iBAAiB,GAAGlB,0BAAOC,GAAV,sPAMDG,eAAOe,UANN,EAQnB,+BAAkBjB,2BAAmBC,IAArC,EAA2CC,eAAOgB,WAAlD,CARmB,CAAvB;;AAWA,IAAMC,eAAe,GAAGrB,0BAAOC,GAAV,oIAArB;;AAMA,IAAMqB,eAAe,GAAGtB,0BAAOC,GAAV,uHACKG,eAAOQ,WADZ,CAArB;;AAIA,IAAMW,UAAU,GAAGvB,0BAAOC,GAAV,2HACZ,gCAAmBC,2BAAmBC,IAAtC,EAA4CC,eAAOC,WAAnD,CADY,EAEZC,oBAAYC,KAFA,EAGV,+BAAkBL,2BAAmBC,IAArC,EAA2CC,eAAOC,WAAlD,CAHU,CAAhB;;AAMA,IAAMmB,UAAU,GAAGxB,0BAAOC,GAAV,2HACZ,gCAAmBQ,2BAAmBC,OAAtC,EAA+CN,eAAOC,WAAtD,CADY,EAEZC,oBAAYC,KAFA,EAGV,+BAAkBE,2BAAmBC,OAArC,EAA8CN,eAAOC,WAArD,CAHU,CAAhB;;AAMA,IAAMoB,UAAU,GAAGzB,0BAAOC,GAAV,+IAEV,gCAAmBC,2BAAmBC,IAAtC,EAA4C,IAA5C,CAFU,EAGVG,oBAAYC,KAHF,EAIR,+BAAkBL,2BAAmBC,IAArC,EAA2C,IAA3C,CAJQ,CAAhB;;AASA,IAAMuB,eAAe,GAAG1B,0BAAOC,GAAV,iRAGKG,eAAOQ,WAHZ,EAMLR,eAAOe,UANF,EAQjBb,oBAAYC,KARK,CAArB;;AAaA,IAAMoB,eAAe,GAAG3B,0BAAOC,GAAV,4PAGKG,eAAOQ,WAHZ,EAOjBN,oBAAYC,KAPK,CAArB;;AAYA,IAAMqB,OAAO,GAAG5B,0BAAOC,GAAV,6MAAb;;AAkBA,IAAM4B,iBAAkE,GAAG,SAArEA,iBAAqE,OAMO;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,MAGI,QAHJA,MAGI;AAAA,MAFJC,MAEI,QAFJA,MAEI;AAAA,MADJC,aACI,QADJA,aACI;AAEhF,MAAMC,aAAa,GAAG,oCAAc;AAACC,IAAAA,KAAK,EAAE9B,oBAAYC,KAAZ,CAAkB8B,OAAlB,CAA0B,SAA1B,EAAqC,EAArC;AAAR,GAAd,CAAtB;;AAEA,6BAAkC,4CAAlC;AAAA,MAAOC,QAAP,wBAAOA,QAAP;AAAA,MAAiBC,aAAjB,wBAAiBA,aAAjB;;AAEA,wBAAoCC,eAAMC,QAAN,CAAe,KAAf,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,0BAA+C,6BAAiB;AAACC,IAAAA,cAAc,EAAE;AAAjB,GAAjB,CAA/C;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,UAA3B;AAAA,MAAuCC,IAAvC;;AAEAP,iBAAMQ,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAMC,YAAY,yBAAGF,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEE,YAAT,mEAAyB,CAA3C;AACA,QAAMC,YAAY,yBAAGH,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEG,YAAT,mEAAyB,CAA3C;AACAP,IAAAA,aAAa,CAACO,YAAY,GAAGD,YAAhB,CAAb;AACD,GAJD,EAIG,CAACnB,MAAD,EAASgB,UAAT,EAAqBC,IAArB,EAA2Bf,MAA3B,EAAmCC,MAAnC,EAA2CF,KAA3C,CAJH;;AAMA,MAAMoB,UAAU,GAAG,SAAbA,UAAa,CAACC,IAAD,EAAiGC,KAAjG,EAAmH;AACpI,YAAQD,IAAI,CAACE,IAAb;AACE,WAAK,SAAL;AACE,4BACE,sBAAC,oBAAD;AAAA,qBACGF,IAAI,CAACG,KAAL,iBAAc,qBAAC,iBAAD;AAAA,sBAAoBH,IAAI,CAACG;AAAzB,YADjB,eAEE,qBAAC,eAAD;AAAA,sBACGH,IAAI,CAACrB,KAAL,CAAWyB,GAAX,CAAe,UAACJ,IAAD,EAAOC,KAAP;AAAA,qBAAiBF,UAAU,CAACC,IAAD,EAAOC,KAAP,CAA3B;AAAA,aAAf;AADH,YAFF;AAAA,WAA2BA,KAA3B,CADF;;AAQF,WAAK,OAAL;AACE,4BAAO,qBAAC,kBAAD;AACU,UAAA,EAAE,EAAE,eAAeA,KAD7B;AAEU,UAAA,IAAI,EAAElB,aAAa,GAAGrB,YAAK2C,MAAR,GAAiB3C,YAAKC,KAFnD;AAGU,UAAA,MAAM,EAAE,KAHlB;AAIU,UAAA,IAAI,EAAE;AACJ2C,YAAAA,KAAK,EAAEN,IAAI,CAACG,KADR;AAEJI,YAAAA,QAAQ,EAAEP,IAAI,CAACO,QAFX;AAGJC,YAAAA,IAAI,EAAER,IAAI,CAACQ,IAHP;AAIJC,YAAAA,YAAY,EAAET,IAAI,CAACG,KAJf;AAKJO,YAAAA,SAAS,EAAEV,IAAI,CAACW;AALZ,WAJhB;AAWU,UAAA,SAAS,eAAE,qBAAC,kBAAD,CAAa,cAAb,KAXrB;AAYU,UAAA,cAAc,EAAE,wBAACC,CAAD,EAAO;AACrBA,YAAAA,CAAC,CAACC,WAAF,CAAcC,wBAAd;AACAhC,YAAAA,aAAa,IAAIA,aAAa,CAACkB,IAAD,CAA9B;AACD;AAfX,WAAeC,KAAf,CAAP;;AAgBF,WAAK,MAAL;AACA;AACE,4BACE,qBAAC,kBAAD;AACU,UAAA,EAAE,EAAE,eAAeA,KAD7B;AAEU,UAAA,MAAM,EAAE,CAACD,IAAI,CAACe,QAAN,IAAkB5B,aAAa,CAACa,IAAI,CAACgB,EAAN,EAAU,CAAC,CAAChB,IAAI,CAACiB,KAAjB,CAFjD;AAGU,UAAA,IAAI,EAAElC,aAAa,GAAGrB,YAAK2C,MAAR,GAAiB3C,YAAKC,KAHnD;AAIU,UAAA,IAAI,EAAE;AACJ2C,YAAAA,KAAK,EAAEN,IAAI,CAACgB,EADR;AAEJT,YAAAA,QAAQ,EAAEP,IAAI,CAACO,QAFX;AAGJC,YAAAA,IAAI,EAAER,IAAI,CAACQ,IAHP;AAIJC,YAAAA,YAAY,EAAET,IAAI,CAACG,KAJf;AAKJO,YAAAA,SAAS,EAAEV,IAAI,CAACW;AALZ,WAJhB;AAWU,UAAA,cAAc,EAAE,0BAAM;AACpBX,YAAAA,IAAI,CAACnB,MAAL,IAAemB,IAAI,CAACnB,MAAL,EAAf;AACAK,YAAAA,QAAQ,CAACc,IAAI,CAACgB,EAAN,EAAU,CAAC,CAAChB,IAAI,CAACe,QAAjB,CAAR;AACD;AAdX,WAAed,KAAf,CADF;AA7BJ;AA+CD,GAhDD;;AAkDA,sBACE,sBAAC,OAAD;AAAA,4BACE,sBAAC,mBAAD;AAAqB,MAAA,GAAG,EAAER,kBAA1B;AAAqD,MAAA,SAAS,EAAEH,UAAU,GAAG,YAAH,GAAkB,EAA5F;AAAA,iBAEI,CAAC,CAACZ,MAAF,iBACA,sBAAC,eAAD;AAAA,gCACE,qBAAC,UAAD;AAAA,oBAAaA,MAAM,CAACA;AAApB,UADF,EAEGA,MAAM,CAACiC,IAAP,iBAAe,qBAAC,UAAD;AAAA,oBAAajC,MAAM,CAACiC;AAApB,UAFlB;AAAA,QAHJ,eAQE,qBAAC,kBAAD;AAAA,kBACGhC,KADH,aACGA,KADH,uBACGA,KAAK,CAAEuC,MAAP,CAAc,UAAAC,CAAC;AAAA,iBAAI,CAACA,CAAC,CAACC,MAAP;AAAA,SAAf,EAA8BhB,GAA9B,CAAkC,UAACJ,IAAD,EAAOC,KAAP;AAAA,iBAAiBF,UAAU,CAACC,IAAD,EAAOC,KAAP,CAA3B;AAAA,SAAlC;AADH,QARF;AAAA,MADF,EAcI,CAAAtB,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAE0C,IAAP,CAAY,UAAAF,CAAC;AAAA,aAAIA,CAAC,CAACC,MAAN;AAAA,KAAb,mBACA,qBAAC,eAAD;AAAA,6BACE,qBAAC,kBAAD;AAAA,kBACGzC,KADH,aACGA,KADH,uBACGA,KAAK,CAAEuC,MAAP,CAAc,UAAAC,CAAC;AAAA,iBAAI,CAAC,CAACA,CAAC,CAACC,MAAR;AAAA,SAAf,EAA+BhB,GAA/B,CAAmC,UAACJ,IAAD,EAAOC,KAAP;AAAA,iBAAiBF,UAAU,CAACC,IAAD,EAAOC,KAAP,CAA3B;AAAA,SAAnC;AADH;AADF,MAfJ,EAuBIrB,MAAM,iBACN,sBAAC,eAAD;AAAA,8BACE,qBAAC,UAAD;AAAA,kBAAaA,MAAM,CAACF;AAApB,QADF,EAEGE,MAAM,CAAC+B,IAAP,iBAAe,qBAAC,UAAD;AAAA,kBAAa/B,MAAM,CAAC+B;AAApB,QAFlB,EAGG/B,MAAM,CAAC0C,IAAP,iBACC,qBAAC,UAAD;AAAA,+BACE,qBAAC,oBAAD;AAAW,UAAA,OAAO,EAAE,SAApB;AACW,UAAA,EAAE,EAAE1C,MAAM,CAAC0C,IAAP,CAAYC,EAD3B;AAEW,UAAA,MAAM,EAAE3C,MAAM,CAAC0C,IAAP,CAAYE,MAF/B;AAGW,UAAA,OAAO,EAAE5C,MAAM,CAAC0C,IAAP,CAAYG,OAHhC;AAIW,UAAA,IAAI,EAAE7C,MAAM,CAAC0C,IAAP,CAAYI,IAJ7B;AAAA,oBAKG9C,MAAM,CAAC0C,IAAP,CAAYnB;AALf;AADF,QAJJ;AAAA,MAxBJ,EAyCItB,MAAM,iBACN,qBAAC,eAAD;AAAA,6BACE,qBAAC,cAAD;AAAQ,QAAA,OAAO,EAAE,WAAjB;AACQ,QAAA,IAAI,EAAEE,aAAa,GAAGrB,YAAK2C,MAAR,GAAiB3C,YAAKC,KADjD;AAEQ,QAAA,QAAQ,EAAEkB,MAAM,CAAC0B,QAFzB;AAGQ,QAAA,IAAI,EAAE1B,MAAM,CAAC2B,IAHrB;AAIQ,QAAA,OAAO,EAAE3B,MAAM,CAACA,MAJxB;AAAA,kBAKGA,MAAM,CAACsB;AALV;AADF,MA1CJ;AAAA,IADF;AAuDD,CA/HD;;;AAPExB,EAAAA,K;AAIAG,EAAAA,a;;eAoIaL,iB","sourcesContent":["import React from 'react';\nimport {\n  MenuButton,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuNavigationItemTypeGroup,\n  MenuNavigationItemTypeItem,\n  MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst HeaderNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\nconst HeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\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  ${scrollBarStyling(Size.Small)}\n`;\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n                                                                              header,\n                                                                              items,\n                                                                              footer,\n                                                                              action,\n                                                                              onSubMenuOpen\n                                                                            }) => {\n\n  const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  const [scrollable, setScrollable] = React.useState(false);\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [header, dimensions, node, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>\n              {item.items.map((item, index) => renderItem(item, index))}\n            </MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return <MenuItem key={index}\n                         id={'menu-item-' + index}\n                         size={isSmallScreen ? Size.Medium : Size.Small}\n                         active={false}\n                         item={{\n                           value: item.label,\n                           disabled: item.disabled,\n                           icon: item.icon,\n                           displayLabel: item.label,\n                           noteLabel: item.note,\n                         }}\n                         iconRight={<SystemIcons.ArrowDropRight/>}\n                         onClickHandler={(e) => {\n                           e.nativeEvent.stopImmediatePropagation();\n                           onSubMenuOpen && onSubMenuOpen(item);\n                         }}/>\n      case 'item':\n      default:\n        return (\n          <MenuItem key={index}\n                    id={'menu-item-' + index}\n                    active={!item.external && isActiveRoute(item.to, !!item.exact)}\n                    size={isSmallScreen ? Size.Medium : Size.Small}\n                    item={{\n                      value: item.to,\n                      disabled: item.disabled,\n                      icon: item.icon,\n                      displayLabel: item.label,\n                      noteLabel: item.note,\n                    }}\n                    onClickHandler={() => {\n                      item.action && item.action();\n                      navigate(item.to, !!item.external);\n                    }}/>\n        );\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {\n          !!header &&\n          <HeaderContainer>\n            <HeaderText>{header.header}</HeaderText>\n            {header.note && <HeaderNote>{header.note}</HeaderNote>}\n          </HeaderContainer>\n        }\n        <MenuItemsContainer>\n          {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n        </MenuItemsContainer>\n      </ScrollableContainer>\n      {\n        items?.some(a => a.pinned) &&\n        <PinnedContainer>\n          <MenuItemsContainer>\n            {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n          </MenuItemsContainer>\n        </PinnedContainer>\n\n      }\n      {\n        footer &&\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link &&\n            <FooterLink>\n              <HyperLink variant={'default'}\n                         id={footer.link.id}\n                         target={footer.link.target}\n                         onClick={footer.link.onClick}\n                         href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          }\n        </FooterContainer>\n      }\n      {\n        action &&\n        <ActionContainer>\n          <Button variant={'secondary'}\n                  size={isSmallScreen ? Size.Medium : Size.Small}\n                  disabled={action.disabled}\n                  icon={action.icon}\n                  onClick={action.action}>\n            {action.label}\n          </Button>\n        </ActionContainer>\n      }\n    </Wrapper>\n  )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.cjs"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["HeaderText","styled","div","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","HeaderNote","ParagraphTextStyle","Regular","HeaderContainer","neutral_200","ScrollableContainer","Size","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","React","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  MenuButton,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuNavigationItemTypeGroup,\n  MenuNavigationItemTypeItem,\n  MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst HeaderNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\nconst HeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\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  ${scrollBarStyling(Size.Small)}\n`;\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n                                                                              header,\n                                                                              items,\n                                                                              footer,\n                                                                              action,\n                                                                              onSubMenuOpen\n                                                                            }) => {\n\n  const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  const [scrollable, setScrollable] = React.useState(false);\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [header, dimensions, node, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>\n              {item.items.map((item, index) => renderItem(item, index))}\n            </MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return <MenuItem key={index}\n                         id={'menu-item-' + index}\n                         size={isSmallScreen ? Size.Medium : Size.Small}\n                         active={false}\n                         item={{\n                           value: item.label,\n                           disabled: item.disabled,\n                           icon: item.icon,\n                           displayLabel: item.label,\n                           noteLabel: item.note,\n                         }}\n                         iconRight={<SystemIcons.ArrowDropRight/>}\n                         onClickHandler={(e) => {\n                           e.nativeEvent.stopImmediatePropagation();\n                           onSubMenuOpen && onSubMenuOpen(item);\n                         }}/>\n      case 'item':\n      default:\n        return (\n          <MenuItem key={index}\n                    id={'menu-item-' + index}\n                    active={!item.external && isActiveRoute(item.to, !!item.exact)}\n                    size={isSmallScreen ? Size.Medium : Size.Small}\n                    item={{\n                      value: item.to,\n                      disabled: item.disabled,\n                      icon: item.icon,\n                      displayLabel: item.label,\n                      noteLabel: item.note,\n                    }}\n                    onClickHandler={() => {\n                      item.action && item.action();\n                      navigate(item.to, !!item.external);\n                    }}/>\n        );\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {\n          !!header &&\n          <HeaderContainer>\n            <HeaderText>{header.header}</HeaderText>\n            {header.note && <HeaderNote>{header.note}</HeaderNote>}\n          </HeaderContainer>\n        }\n        <MenuItemsContainer>\n          {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n        </MenuItemsContainer>\n      </ScrollableContainer>\n      {\n        items?.some(a => a.pinned) &&\n        <PinnedContainer>\n          <MenuItemsContainer>\n            {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n          </MenuItemsContainer>\n        </PinnedContainer>\n\n      }\n      {\n        footer &&\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link &&\n            <FooterLink>\n              <HyperLink variant={'default'}\n                         id={footer.link.id}\n                         target={footer.link.target}\n                         onClick={footer.link.onClick}\n                         href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          }\n        </FooterContainer>\n      }\n      {\n        action &&\n        <ActionContainer>\n          <Button variant={'secondary'}\n                  size={isSmallScreen ? Size.Medium : Size.Small}\n                  disabled={action.disabled}\n                  icon={action.icon}\n                  onClick={action.action}>\n            {action.label}\n          </Button>\n        </ActionContainer>\n      }\n    </Wrapper>\n  )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.cjs"}

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js

@@ -22,7 +22,7 @@ var HeaderNote = styled.div(_templateObject2 || (_templateObject2 = _taggedTempl
 var HeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), COLORS.neutral_200);
 var ScrollableContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])), scrollBarStyling(Size.Small));
 var MenuItemsContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
-var MenuSectionContainer = styled.div(_templateObject6 || (_templateObject6 = _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 MenuSectionContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
 var MenuSectionHeader = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\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 MenuSectionList = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
 var PinnedContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","scrollBarStyling","Size","HyperLink","useMediaQuery","Button","useNavigationHelper","MenuItem","SystemIcons","useDimensionsRef","HeaderText","div","Bold","neutral_600","SMALL","HeaderNote","Regular","HeaderContainer","neutral_200","ScrollableContainer","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  MenuButton,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuNavigationItemTypeGroup,\n  MenuNavigationItemTypeItem,\n  MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst HeaderNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\nconst HeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\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  ${scrollBarStyling(Size.Small)}\n`;\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n                                                                              header,\n                                                                              items,\n                                                                              footer,\n                                                                              action,\n                                                                              onSubMenuOpen\n                                                                            }) => {\n\n  const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  const [scrollable, setScrollable] = React.useState(false);\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [header, dimensions, node, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>\n              {item.items.map((item, index) => renderItem(item, index))}\n            </MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return <MenuItem key={index}\n                         id={'menu-item-' + index}\n                         size={isSmallScreen ? Size.Medium : Size.Small}\n                         active={false}\n                         item={{\n                           value: item.label,\n                           disabled: item.disabled,\n                           icon: item.icon,\n                           displayLabel: item.label,\n                           noteLabel: item.note,\n                         }}\n                         iconRight={<SystemIcons.ArrowDropRight/>}\n                         onClickHandler={(e) => {\n                           e.nativeEvent.stopImmediatePropagation();\n                           onSubMenuOpen && onSubMenuOpen(item);\n                         }}/>\n      case 'item':\n      default:\n        return (\n          <MenuItem key={index}\n                    id={'menu-item-' + index}\n                    active={!item.external && isActiveRoute(item.to, !!item.exact)}\n                    size={isSmallScreen ? Size.Medium : Size.Small}\n                    item={{\n                      value: item.to,\n                      disabled: item.disabled,\n                      icon: item.icon,\n                      displayLabel: item.label,\n                      noteLabel: item.note,\n                    }}\n                    onClickHandler={() => {\n                      item.action && item.action();\n                      navigate(item.to, !!item.external);\n                    }}/>\n        );\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {\n          !!header &&\n          <HeaderContainer>\n            <HeaderText>{header.header}</HeaderText>\n            {header.note && <HeaderNote>{header.note}</HeaderNote>}\n          </HeaderContainer>\n        }\n        <MenuItemsContainer>\n          {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n        </MenuItemsContainer>\n      </ScrollableContainer>\n      {\n        items?.some(a => a.pinned) &&\n        <PinnedContainer>\n          <MenuItemsContainer>\n            {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n          </MenuItemsContainer>\n        </PinnedContainer>\n\n      }\n      {\n        footer &&\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link &&\n            <FooterLink>\n              <HyperLink variant={'default'}\n                         id={footer.link.id}\n                         target={footer.link.target}\n                         onClick={footer.link.onClick}\n                         href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          }\n        </FooterContainer>\n      }\n      {\n        action &&\n        <ActionContainer>\n          <Button variant={'secondary'}\n                  size={isSmallScreen ? Size.Medium : Size.Small}\n                  disabled={action.disabled}\n                  icon={action.icon}\n                  onClick={action.action}>\n            {action.label}\n          </Button>\n        </ActionContainer>\n      }\n    </Wrapper>\n  )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","scrollBarStyling","Size","HyperLink","useMediaQuery","Button","useNavigationHelper","MenuItem","SystemIcons","useDimensionsRef","HeaderText","div","Bold","neutral_600","SMALL","HeaderNote","Regular","HeaderContainer","neutral_200","ScrollableContainer","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  MenuButton,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuNavigationItemTypeGroup,\n  MenuNavigationItemTypeItem,\n  MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst HeaderNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\nconst HeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\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  ${scrollBarStyling(Size.Small)}\n`;\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n                                                                              header,\n                                                                              items,\n                                                                              footer,\n                                                                              action,\n                                                                              onSubMenuOpen\n                                                                            }) => {\n\n  const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  const [scrollable, setScrollable] = React.useState(false);\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [header, dimensions, node, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>\n              {item.items.map((item, index) => renderItem(item, index))}\n            </MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return <MenuItem key={index}\n                         id={'menu-item-' + index}\n                         size={isSmallScreen ? Size.Medium : Size.Small}\n                         active={false}\n                         item={{\n                           value: item.label,\n                           disabled: item.disabled,\n                           icon: item.icon,\n                           displayLabel: item.label,\n                           noteLabel: item.note,\n                         }}\n                         iconRight={<SystemIcons.ArrowDropRight/>}\n                         onClickHandler={(e) => {\n                           e.nativeEvent.stopImmediatePropagation();\n                           onSubMenuOpen && onSubMenuOpen(item);\n                         }}/>\n      case 'item':\n      default:\n        return (\n          <MenuItem key={index}\n                    id={'menu-item-' + index}\n                    active={!item.external && isActiveRoute(item.to, !!item.exact)}\n                    size={isSmallScreen ? Size.Medium : Size.Small}\n                    item={{\n                      value: item.to,\n                      disabled: item.disabled,\n                      icon: item.icon,\n                      displayLabel: item.label,\n                      noteLabel: item.note,\n                    }}\n                    onClickHandler={() => {\n                      item.action && item.action();\n                      navigate(item.to, !!item.external);\n                    }}/>\n        );\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {\n          !!header &&\n          <HeaderContainer>\n            <HeaderText>{header.header}</HeaderText>\n            {header.note && <HeaderNote>{header.note}</HeaderNote>}\n          </HeaderContainer>\n        }\n        <MenuItemsContainer>\n          {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n        </MenuItemsContainer>\n      </ScrollableContainer>\n      {\n        items?.some(a => a.pinned) &&\n        <PinnedContainer>\n          <MenuItemsContainer>\n            {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n          </MenuItemsContainer>\n        </PinnedContainer>\n\n      }\n      {\n        footer &&\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link &&\n            <FooterLink>\n              <HyperLink variant={'default'}\n                         id={footer.link.id}\n                         target={footer.link.target}\n                         onClick={footer.link.onClick}\n                         href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          }\n        </FooterContainer>\n      }\n      {\n        action &&\n        <ActionContainer>\n          <Button variant={'secondary'}\n                  size={isSmallScreen ? Size.Medium : Size.Small}\n                  disabled={action.disabled}\n                  icon={action.icon}\n                  onClick={action.action}>\n            {action.label}\n          </Button>\n        </ActionContainer>\n      }\n    </Wrapper>\n  )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.js"}

package/dist/MenuItem/MenuItem.cjs

@@ -53,20 +53,12 @@ var ItemIconRight = _styledComponents.default.div(_templateObject4 || (_template
 
 exports.ItemIconRight = ItemIconRight;
 
-var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: ", ";\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: ", ";\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), function (props) {
-  return props.size === _types.Size.Small ? 'auto 0 auto 10px' : props.size === _types.Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
-}, ItemLabel, ItemIcon, function (props) {
-  return props.size === _types.Size.Small ? '6px' : '8px';
-}, function (props) {
-  return props.size === _types.Size.Small ? '20px' : '';
-}, function (props) {
-  return props.size === _types.Size.Small ? '20px' : '';
-}, ItemIconRight);
+var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), ItemLabel, ItemIcon, ItemIconRight);
 
 exports.ItemContent = ItemContent;
 
 var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, ItemLabel, ItemIcon, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, ItemLabel, ItemIcon, _styles.COLORS.primary_700, _styles.focusStyles, _styles.COLORS.primary_100, ItemLabel, ItemIcon, _styles.COLORS.primary_800, _styles.COLORS.neutral_20, ItemLabel, ItemIcon, _styles.COLORS.neutral_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, ItemIcon, ItemLabel, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_100, ItemIcon, ItemLabel, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600);
+  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600);
 };
 
 exports.DropdownButtonCSS = DropdownButtonCSS;
@@ -95,7 +87,6 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [item.showDividerAbove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "divider"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemContent, {
-      size: size,
       children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemIcon, {
         children: item.icon
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemLabel, {

package/dist/MenuItem/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Size","Small","Large","css","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","white","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_200","primary_600","MenuItem","React","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","defaultOnMouseDownHandler","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n    margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\n      svg {\n        display: block;\n        margin: auto;\n        height:${props=>props.size===Size.Small?'20px':''};\n        width:${props=>props.size===Size.Small?'20px':''};\n      }\n    }\n\n    ${ItemIconRight} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${ItemLabel}, ${ItemIcon} {\n      color: ${COLORS.neutral_600};\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ${COLORS.primary_20};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_700};\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ${focusStyles}\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ${COLORS.primary_100};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.neutral_800};\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_700};\n      }      \n\n      &::after {\n        background-color: ${COLORS.primary_700};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_800};\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent size={size}>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","css","Size","Small","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","Large","white","CommonInteractionStyling","neutral_20","primary_500","neutral_500","primary_20","primary_600","primary_100","primary_800","neutral_200","MenuItem","React","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","defaultOnMouseDownHandler","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${ItemIconRight} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}

package/dist/MenuItem/MenuItem.d.ts

@@ -17,9 +17,7 @@ export declare const DropdownButton: import("styled-components").StyledComponent
 export declare const ItemLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemIconRight: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {
-    size: Size;
-}, never>;
+export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownButtonCSS: (size?: Size | undefined) => import("styled-components").FlattenSimpleInterpolation;
 declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default MenuItem;

package/dist/MenuItem/MenuItem.js

@@ -5,11 +5,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import * as React from 'react';
 import styled, { css } from 'styled-components';
-import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { COLORS, ComponentTextStyle } from '../styles';
 import { LockedOn } from '../icons/systemicons/SystemIcons';
 import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
-import { defaultOnMouseDownHandler } from '../common';
+import { CommonInteractionStyling, defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var DropdownButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
@@ -18,17 +18,9 @@ export var DropdownButton = styled.button(_templateObject || (_templateObject =
 export var ItemLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 export var ItemIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
 export var ItemIconRight = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
-export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: ", ";\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: ", ";\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), function (props) {
-  return props.size === Size.Small ? 'auto 0 auto 10px' : props.size === Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
-}, ItemLabel, ItemIcon, function (props) {
-  return props.size === Size.Small ? '6px' : '8px';
-}, function (props) {
-  return props.size === Size.Small ? '20px' : '';
-}, function (props) {
-  return props.size === Size.Small ? '20px' : '';
-}, ItemIconRight);
+export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), ItemLabel, ItemIcon, ItemIconRight);
 export var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, ItemLabel, ItemIcon, COLORS.neutral_600, COLORS.primary_20, ItemLabel, ItemIcon, COLORS.primary_700, focusStyles, COLORS.primary_100, ItemLabel, ItemIcon, COLORS.primary_800, COLORS.neutral_20, ItemLabel, ItemIcon, COLORS.neutral_800, COLORS.primary_500, COLORS.neutral_500, COLORS.primary_20, ItemIcon, ItemLabel, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, ItemIcon, ItemLabel, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600);
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, CommonInteractionStyling, COLORS.neutral_20, COLORS.primary_500, COLORS.neutral_500, COLORS.primary_20, COLORS.primary_600, COLORS.primary_500, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600);
 };
 var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _item$displayLabel;
@@ -55,7 +47,6 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [item.showDividerAbove && /*#__PURE__*/_jsx("div", {
       className: "divider"
     }), /*#__PURE__*/_jsxs(ItemContent, {
-      size: size,
       children: [item.icon && /*#__PURE__*/_jsx(ItemIcon, {
         children: item.icon
       }), /*#__PURE__*/_jsxs(ItemLabel, {

package/dist/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","focusStyles","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Small","Large","Regular","neutral_600","Medium","white","primary_20","primary_700","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_200","primary_600","MenuItem","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAAqBC,MAArB,EAA6BC,kBAA7B,EAAiDC,WAAjD,QAAmE,WAAnE;AACA,SAAsBC,QAAtB,QAAqC,kCAArC;AACA,SAAiBC,IAAjB,QAA4B,UAA5B;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,QAAsE,sBAAtE;AAEA,SAAkCC,yBAAlC,QAAkE,WAAlE;;;AAaA,OAAO,IAAMC,cAAc,GAAGX,MAAM,CAACY,MAAV,gFACvB,UAACC,KAAD;AAAA,SAAWC,iBAAiB,CAACD,KAAK,CAACE,IAAP,CAA5B;AAAA,CADuB,CAApB;AAIP,OAAO,IAAMC,SAAS,GAAGhB,MAAM,CAACiB,GAAV,uEAAf;AAEP,OAAO,IAAMC,QAAQ,GAAGlB,MAAM,CAACiB,GAAV,uEAAd;AAEP,OAAO,IAAME,aAAa,GAAGnB,MAAM,CAACiB,GAAV,mHAAnB;AAKP,OAAO,IAAMG,WAAW,GAAGpB,MAAM,CAACiB,GAAV,0jBACV,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACE,IAAN,KAAaT,IAAI,CAACe,KAAlB,GAAwB,kBAAxB,GAA4CR,KAAK,CAACE,IAAN,KAAaT,IAAI,CAACgB,KAAlB,GAAwB,kBAAxB,GAA2C,kBAAzF;AAAA,CADK,EAMlBN,SANkB,EAalBE,QAbkB,EAcF,UAAAL,KAAK;AAAA,SAAEA,KAAK,CAACE,IAAN,KAAaT,IAAI,CAACe,KAAlB,GAAwB,KAAxB,GAA8B,KAAhC;AAAA,CAdH,EAkBP,UAAAR,KAAK;AAAA,SAAEA,KAAK,CAACE,IAAN,KAAaT,IAAI,CAACe,KAAlB,GAAwB,MAAxB,GAA+B,EAAjC;AAAA,CAlBE,EAmBR,UAAAR,KAAK;AAAA,SAAEA,KAAK,CAACE,IAAN,KAAaT,IAAI,CAACe,KAAlB,GAAwB,MAAxB,GAA+B,EAAjC;AAAA,CAnBG,EAuBlBF,aAvBkB,CAAjB;AAiCP,OAAO,IAAML,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,EAAiB;AAChD,SAAOd,GAAP,w5DACIc,IAAI,IAAIT,IAAI,CAACe,KAAb,IAAsBZ,iBAAiB,CAACN,kBAAkB,CAACoB,OAApB,EAA6BrB,MAAM,CAACsB,WAApC,CAD3C,EAEIT,IAAI,IAAIT,IAAI,CAACmB,MAAb,IAAuBjB,iBAAiB,CAACL,kBAAkB,CAACoB,OAApB,EAA6BrB,MAAM,CAACsB,WAApC,CAF5C,EAGIT,IAAI,IAAIT,IAAI,CAACgB,KAAb,IAAsBf,iBAAiB,CAACJ,kBAAkB,CAACoB,OAApB,EAA6BrB,MAAM,CAACsB,WAApC,CAH3C,EAUgBT,IAAI,IAAIT,IAAI,CAACgB,KAAb,GAAqB,MAArB,GAA8BP,IAAI,IAAIT,IAAI,CAACmB,MAAb,GAAsB,MAAtB,GAA+B,MAV7E,EAWsBvB,MAAM,CAACwB,KAX7B,EAuBIV,SAvBJ,EAuBkBE,QAvBlB,EAwBahB,MAAM,CAACsB,WAxBpB,EA4BkBtB,MAAM,CAACyB,UA5BzB,EA6BMX,SA7BN,EA6BoBE,QA7BpB,EA8BehB,MAAM,CAAC0B,WA9BtB,EAmCMxB,WAnCN,EAuCkBF,MAAM,CAAC2B,WAvCzB,EAwCMb,SAxCN,EAwCoBE,QAxCpB,EAyCehB,MAAM,CAAC4B,WAzCtB,EA8CkB5B,MAAM,CAAC6B,UA9CzB,EAgDMf,SAhDN,EAgDoBE,QAhDpB,EAiDehB,MAAM,CAAC8B,WAjDtB,EA2D0B9B,MAAM,CAAC+B,WA3DjC,EAqEa/B,MAAM,CAACgC,WArEpB,EAyEwBhC,MAAM,CAACyB,UAzE/B,EA2EMT,QA3EN,EA2EmBF,SA3EnB,EA4Eed,MAAM,CAAC0B,WA5EtB,EAgF0B1B,MAAM,CAAC0B,WAhFjC,EAqFwB1B,MAAM,CAAC2B,WArF/B,EAuFMX,QAvFN,EAuFmBF,SAvFnB,EAwFed,MAAM,CAAC4B,WAxFtB,EA4F0B5B,MAAM,CAAC4B,WA5FjC,EAmGa5B,MAAM,CAACiC,WAnGpB,EAuGwBjC,MAAM,CAACyB,UAvG/B,EAwGazB,MAAM,CAACkC,WAxGpB;AA2GD,CA5GM;AA8GP,IAAMC,QAAQ,gBAAGtC,KAAK,CAACuC,UAAN,CAAmD,gBAQ3CC,GAR2C,EAQnC;AAAA;;AAAA,MAP7BC,MAO6B,QAP7BA,MAO6B;AAAA,MAN7BC,IAM6B,QAN7BA,IAM6B;AAAA,MAL7BC,cAK6B,QAL7BA,cAK6B;AAAA,uBAJ7B3B,IAI6B;AAAA,MAJ7BA,IAI6B,0BAJtBT,IAAI,CAACmB,MAIiB;AAAA,MAH7BkB,SAG6B,QAH7BA,SAG6B;AAAA,MAF7BC,QAE6B,QAF7BA,QAE6B;AAAA,MAD7BC,SAC6B,QAD7BA,SAC6B;AAAA,MAA7BC,EAA6B,QAA7BA,EAA6B;AAC/B,sBACE,MAAC,cAAD;AACI,IAAA,IAAI,EAAC,QADT;AAEI,IAAA,IAAI,EAAE/B,IAFV;AAGI,IAAA,QAAQ,EAAE0B,IAAI,CAACM,QAAL,IAAiBN,IAAI,CAACO,MAHpC;AAII,IAAA,QAAQ,EAAEJ,QAJd;AAKI,IAAA,WAAW,EAAElC,yBALjB;AAMI,IAAA,GAAG,EAAE6B,GANT;AAOI,IAAA,OAAO,EAAEG,cAPb;AAQI,IAAA,SAAS,EAAGC,SAAS,GAAG,GAAZ,IAAmBF,IAAI,CAACO,MAAL,GAAc,QAAd,GAAyB,EAA5C,IAAkD,GAAlD,IAAyDP,IAAI,CAACQ,gBAAL,GAAwB,oBAAxB,GAA+C,EAAxG,IAA8G,GAA9G,IAAqHT,MAAM,GAAG,QAAH,GAAc,EAAzI,CARhB;AASI,IAAA,EAAE,EAAEM,EATR;AAAA,eAUKL,IAAI,CAACQ,gBAAL,iBAAyB;AAAK,MAAA,SAAS,EAAC;AAAf,MAV9B,eAWI,MAAC,WAAD;AAAa,MAAA,IAAI,EAAElC,IAAnB;AAAA,iBACG0B,IAAI,CAACS,IAAL,iBAAa,KAAC,QAAD;AAAA,kBAAWT,IAAI,CAACS;AAAhB,QADhB,eAEE,MAAC,SAAD;AAAA,gCACI;AAAA,kCACE;AAAA,4CAAMT,IAAI,CAACU,YAAX,mEAA2BV,IAAI,CAACW;AAAhC,YADF,EAEGX,IAAI,CAACY,SAAL,iBAAkB;AAAK,YAAA,KAAK,EAAE;AAAEC,cAAAA,QAAQ,EAAE,MAAZ;AAAoBC,cAAAA,UAAU,EAAE;AAAhC,aAAZ;AAAA,sBAAuDd,IAAI,CAACY;AAA5D,YAFrB;AAAA,UADJ,EAMIZ,IAAI,CAACO,MAAL,iBACA,KAAC,aAAD;AAAA,iCACE,KAAC,QAAD;AAAU,YAAA,KAAK,EAAE9C,MAAM,CAACsD,WAAxB;AAAqC,YAAA,SAAS,EAAC,aAA/C;AAA6D,YAAA,IAAI,EAAC;AAAlE;AADF,UAPJ,EAYI,CAACf,IAAI,CAACO,MAAN,IAAgB,CAAC,CAACH,SAAlB,iBACA,KAAC,aAAD;AAAA,iCACG9C,KAAK,CAAC0D,YAAN,CAAmBZ,SAAnB,EAA8B;AAACF,YAAAA,SAAS,EAAE,aAAZ;AAA2B5B,YAAAA,IAAI,EAAE;AAAjC,WAA9B;AADH,UAbJ;AAAA,QAFF;AAAA,MAXJ;AAAA,IADF;AAoCD,CA7CgB,CAAjB;;AArKG2B,EAAAA,c;AACAF,EAAAA,M;AACAM,EAAAA,E;AAEAH,EAAAA,S;AACAC,EAAAA,Q;AACAC,EAAAA,S;;AA8MH,eAAeR,QAAf","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n    margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\n      svg {\n        display: block;\n        margin: auto;\n        height:${props=>props.size===Size.Small?'20px':''};\n        width:${props=>props.size===Size.Small?'20px':''};\n      }\n    }\n\n    ${ItemIconRight} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${ItemLabel}, ${ItemIcon} {\n      color: ${COLORS.neutral_600};\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ${COLORS.primary_20};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_700};\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ${focusStyles}\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ${COLORS.primary_100};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.neutral_800};\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_700};\n      }      \n\n      &::after {\n        background-color: ${COLORS.primary_700};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_800};\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent size={size}>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","CommonInteractionStyling","defaultOnMouseDownHandler","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Small","Regular","neutral_600","Medium","Large","white","neutral_20","primary_500","neutral_500","primary_20","primary_600","primary_100","primary_800","neutral_200","MenuItem","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${ItemIconRight} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}

package/dist/styles/colors.cjs

@@ -85,7 +85,6 @@ var COLORS = {
   critical_800: '#6B0613',
   neutral_20: '#FAFAFA',
   // 020 Core
-  neutral_50: '#F2F2F2',
   neutral_100: '#E5E5E5',
   neutral_200: '#CCCCCC',
   neutral_300: '#B3B3B3',

package/dist/styles/colors.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":";;;;;;AAAA,IAAMA,MAAM,GAAG;AACbC,EAAAA,KAAK,EAAE,SADM;AACK;AAClBC,EAAAA,KAAK,EAAE,SAFM;AAEK;AAClBC,EAAAA,IAAI,EAAG,SAHM;AAGK;AAClBC,EAAAA,OAAO,EAAE,SAJI;AAIO;AACpBC,EAAAA,OAAO,EAAE,SALI;AAKO;AACpBC,EAAAA,OAAO,EAAE,SANI;AAMO;AACpBC,EAAAA,OAAO,EAAE,SAPI;AAOO;AACpBC,EAAAA,OAAO,EAAE,SARI;AAQO;AACpBC,EAAAA,QAAQ,EAAE,SATG;AASQ;AAErBC,EAAAA,UAAU,EAAE,SAXC;AAYbC,EAAAA,WAAW,EAAE,SAZA;AAabC,EAAAA,WAAW,EAAE,SAbA;AAcbC,EAAAA,WAAW,EAAE,SAdA;AAebC,EAAAA,WAAW,EAAE,SAfA;AAgBbC,EAAAA,WAAW,EAAE,SAhBA;AAgBW;AACxBC,EAAAA,WAAW,EAAE,SAjBA;AAkBbC,EAAAA,WAAW,EAAE,SAlBA;AAmBbC,EAAAA,WAAW,EAAE,SAnBA;AAqBbC,EAAAA,UAAU,EAAG,SArBA;AAsBbC,EAAAA,WAAW,EAAE,SAtBA;AAuBbC,EAAAA,WAAW,EAAE,SAvBA;AAwBbC,EAAAA,WAAW,EAAE,SAxBA;AAyBbC,EAAAA,WAAW,EAAE,SAzBA;AA0BbC,EAAAA,WAAW,EAAE,SA1BA;AA0BW;AACxBC,EAAAA,WAAW,EAAE,SA3BA;AA4BbC,EAAAA,WAAW,EAAE,SA5BA;AA6BbC,EAAAA,WAAW,EAAE,SA7BA;AA+BbC,EAAAA,UAAU,EAAG,SA/BA;AAgCbC,EAAAA,WAAW,EAAE,SAhCA;AAiCbC,EAAAA,WAAW,EAAE,SAjCA;AAiCW;AACxBC,EAAAA,WAAW,EAAE,SAlCA;AAmCbC,EAAAA,WAAW,EAAE,SAnCA;AAoCbC,EAAAA,WAAW,EAAE,SApCA;AAqCbC,EAAAA,WAAW,EAAE,SArCA;AAsCbC,EAAAA,WAAW,EAAE,SAtCA;AAuCbC,EAAAA,WAAW,EAAE,SAvCA;AAyCbC,EAAAA,UAAU,EAAG,SAzCA;AA0CbC,EAAAA,WAAW,EAAE,SA1CA;AA2CbC,EAAAA,WAAW,EAAE,SA3CA;AA4CbC,EAAAA,WAAW,EAAE,SA5CA;AA6CbC,EAAAA,WAAW,EAAE,SA7CA;AA6CW;AACxBC,EAAAA,WAAW,EAAE,SA9CA;AA+CbC,EAAAA,WAAW,EAAE,SA/CA;AAgDbC,EAAAA,WAAW,EAAE,SAhDA;AAiDbC,EAAAA,WAAW,EAAE,SAjDA;AAmDbC,EAAAA,UAAU,EAAG,SAnDA;AAoDbC,EAAAA,WAAW,EAAE,SApDA;AAqDbC,EAAAA,WAAW,EAAE,SArDA;AAsDbC,EAAAA,WAAW,EAAE,SAtDA;AAuDbC,EAAAA,WAAW,EAAE,SAvDA;AAuDW;AACxBC,EAAAA,WAAW,EAAE,SAxDA;AAyDbC,EAAAA,WAAW,EAAE,SAzDA;AA0DbC,EAAAA,WAAW,EAAE,SA1DA;AA2DbC,EAAAA,WAAW,EAAE,SA3DA;AA6DbC,EAAAA,WAAW,EAAG,SA7DD;AA8DbC,EAAAA,YAAY,EAAE,SA9DD;AA+DbC,EAAAA,YAAY,EAAE,SA/DD;AAgEbC,EAAAA,YAAY,EAAE,SAhED;AAiEbC,EAAAA,YAAY,EAAE,SAjED;AAkEbC,EAAAA,YAAY,EAAE,SAlED;AAkEY;AACzBC,EAAAA,YAAY,EAAE,SAnED;AAoEbC,EAAAA,YAAY,EAAE,SApED;AAqEbC,EAAAA,YAAY,EAAE,SArED;AAuEbC,EAAAA,UAAU,EAAG,SAvEA;AAuEW;AACxBC,EAAAA,UAAU,EAAG,SAxEA;AAyEbC,EAAAA,WAAW,EAAE,SAzEA;AA0EbC,EAAAA,WAAW,EAAE,SA1EA;AA2EbC,EAAAA,WAAW,EAAE,SA3EA;AA4EbC,EAAAA,WAAW,EAAE,SA5EA;AA6EbC,EAAAA,WAAW,EAAE,SA7EA;AA8EbC,EAAAA,WAAW,EAAE,SA9EA;AA+EbC,EAAAA,WAAW,EAAE,SA/EA;AAgFbC,EAAAA,WAAW,EAAE,SAhFA;AAkFbC,EAAAA,KAAK,EAAE,uBAlFM;AAkFmB;AAChCC,EAAAA,QAAQ,EAAE,0BAnFG;AAmFyB;AAEtCC,EAAAA,cAAc,EAAE,+GArFH;AAuFbC,EAAAA,UAAU,EAAE,SAvFC;AAwFbC,EAAAA,aAAa,EAAE,SAxFF;AAyFbC,EAAAA,aAAa,EAAE,SAzFF;AA0FbC,EAAAA,WAAW,EAAE;AA1FA,CAAf;eA6FehF,M","sourcesContent":["const COLORS = {\n  black: '#1F1F1F', // Neutrals / Black\n  white: '#FFFFFF', // Neutrals / White\n  grey:  '#949494', // Neutrals / grey\n  primary: '#2E7FA1', // Brand / Primary - Core 500\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\n  correct: '#37A851', // Semantic / Correct - Core 400\n  warning: '#E97116', // Semantic / Warning  - Core 400\n  critical: '#DC3449', // Semantic / Critical - Core 500\n\n  primary_20: '#F1FBFE',\n  primary_100: '#D4E9F2',\n  primary_200: '#A9D3E5',\n  primary_300: '#7FBCD7',\n  primary_400: '#519DBD',\n  primary_500: '#2E7FA1', // 500 Core\n  primary_600: '#276D8B',\n  primary_700: '#215369',\n  primary_800: '#163746',\n\n  accent1_20:  '#EDFCFB',\n  accent1_100: '#C8EEEC',\n  accent1_200: '#98D8D5',\n  accent1_300: '#6BC2BE',\n  accent1_400: '#3EA39E',\n  accent1_500: '#25837E', // 500 Core\n  accent1_600: '#23716D',\n  accent1_700: '#145653',\n  accent1_800: '#0F3937',\n\n  accent2_20:  '#FFFAEE',\n  accent2_100: '#F8E2BF',\n  accent2_200: '#EAC785', // 200 Core\n  accent2_300: '#D6AD61',\n  accent2_400: '#B58E45',\n  accent2_500: '#92702F',\n  accent2_600: '#806128',\n  accent2_700: '#604920',\n  accent2_800: '#42300F',\n\n  correct_20:  '#ECFEF1',\n  correct_100: '#CCEED2',\n  correct_200: '#A0D9AD',\n  correct_300: '#77C589',\n  correct_400: '#37A851', // 400 Core\n  correct_500: '#14892F',\n  correct_600: '#13772A',\n  correct_700: '#025A15',\n  correct_800: '#003D0E',\n\n  warning_20:  '#FEF7F1',\n  warning_100: '#FCDDC5',\n  warning_200: '#F8C096',\n  warning_300: '#F4A162',\n  warning_400: '#E97116', // 400 Core\n  warning_500: '#C45402',\n  warning_600: '#AD4B00',\n  warning_700: '#803700',\n  warning_800: '#572600',\n\n  critical_20:  '#FEF5F7',\n  critical_100: '#FDDEE2',\n  critical_200: '#FDBAC2',\n  critical_300: '#FD96A4',\n  critical_400: '#FC5A6F',\n  critical_500: '#DC3449', // 500 Core\n  critical_600: '#C32238',\n  critical_700: '#9C0D1D',\n  critical_800: '#6B0613',\n\n  neutral_20:  '#FAFAFA', // 020 Core\n  neutral_50:  '#F2F2F2',\n  neutral_100: '#E5E5E5',\n  neutral_200: '#CCCCCC',\n  neutral_300: '#B3B3B3',\n  neutral_400: '#949494',\n  neutral_500: '#767676',\n  neutral_600: '#666666',\n  neutral_700: '#4D4D4D',\n  neutral_800: '#333333',\n\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n  toast_info: '#2E7FA1',\n  toast_success: '#37A851',\n  toast_warning: '#E97116',\n  toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.cjs"}
+{"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":"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","sourcesContent":["const COLORS = {\n  black: '#1F1F1F', // Neutrals / Black\n  white: '#FFFFFF', // Neutrals / White\n  grey:  '#949494', // Neutrals / grey\n  primary: '#2E7FA1', // Brand / Primary - Core 500\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\n  correct: '#37A851', // Semantic / Correct - Core 400\n  warning: '#E97116', // Semantic / Warning  - Core 400\n  critical: '#DC3449', // Semantic / Critical - Core 500\n\n  primary_20: '#F1FBFE',\n  primary_100: '#D4E9F2',\n  primary_200: '#A9D3E5',\n  primary_300: '#7FBCD7',\n  primary_400: '#519DBD',\n  primary_500: '#2E7FA1', // 500 Core\n  primary_600: '#276D8B',\n  primary_700: '#215369',\n  primary_800: '#163746',\n\n  accent1_20:  '#EDFCFB',\n  accent1_100: '#C8EEEC',\n  accent1_200: '#98D8D5',\n  accent1_300: '#6BC2BE',\n  accent1_400: '#3EA39E',\n  accent1_500: '#25837E', // 500 Core\n  accent1_600: '#23716D',\n  accent1_700: '#145653',\n  accent1_800: '#0F3937',\n\n  accent2_20:  '#FFFAEE',\n  accent2_100: '#F8E2BF',\n  accent2_200: '#EAC785', // 200 Core\n  accent2_300: '#D6AD61',\n  accent2_400: '#B58E45',\n  accent2_500: '#92702F',\n  accent2_600: '#806128',\n  accent2_700: '#604920',\n  accent2_800: '#42300F',\n\n  correct_20:  '#ECFEF1',\n  correct_100: '#CCEED2',\n  correct_200: '#A0D9AD',\n  correct_300: '#77C589',\n  correct_400: '#37A851', // 400 Core\n  correct_500: '#14892F',\n  correct_600: '#13772A',\n  correct_700: '#025A15',\n  correct_800: '#003D0E',\n\n  warning_20:  '#FEF7F1',\n  warning_100: '#FCDDC5',\n  warning_200: '#F8C096',\n  warning_300: '#F4A162',\n  warning_400: '#E97116', // 400 Core\n  warning_500: '#C45402',\n  warning_600: '#AD4B00',\n  warning_700: '#803700',\n  warning_800: '#572600',\n\n  critical_20:  '#FEF5F7',\n  critical_100: '#FDDEE2',\n  critical_200: '#FDBAC2',\n  critical_300: '#FD96A4',\n  critical_400: '#FC5A6F',\n  critical_500: '#DC3449', // 500 Core\n  critical_600: '#C32238',\n  critical_700: '#9C0D1D',\n  critical_800: '#6B0613',\n\n  neutral_20:  '#FAFAFA', // 020 Core\n  neutral_100: '#E5E5E5',\n  neutral_200: '#CCCCCC',\n  neutral_300: '#B3B3B3',\n  neutral_400: '#949494',\n  neutral_500: '#767676',\n  neutral_600: '#666666',\n  neutral_700: '#4D4D4D',\n  neutral_800: '#333333',\n\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n  toast_info: '#2E7FA1',\n  toast_success: '#37A851',\n  toast_warning: '#E97116',\n  toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.cjs"}

package/dist/styles/colors.d.ts

@@ -63,7 +63,6 @@ declare const COLORS: {
     critical_700: string;
     critical_800: string;
     neutral_20: string;
-    neutral_50: string;
     neutral_100: string;
     neutral_200: string;
     neutral_300: string;

package/dist/styles/colors.js

@@ -79,7 +79,6 @@ var COLORS = {
   critical_800: '#6B0613',
   neutral_20: '#FAFAFA',
   // 020 Core
-  neutral_50: '#F2F2F2',
   neutral_100: '#E5E5E5',
   neutral_200: '#CCCCCC',
   neutral_300: '#B3B3B3',

package/dist/styles/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":"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","sourcesContent":["const COLORS = {\n  black: '#1F1F1F', // Neutrals / Black\n  white: '#FFFFFF', // Neutrals / White\n  grey:  '#949494', // Neutrals / grey\n  primary: '#2E7FA1', // Brand / Primary - Core 500\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\n  correct: '#37A851', // Semantic / Correct - Core 400\n  warning: '#E97116', // Semantic / Warning  - Core 400\n  critical: '#DC3449', // Semantic / Critical - Core 500\n\n  primary_20: '#F1FBFE',\n  primary_100: '#D4E9F2',\n  primary_200: '#A9D3E5',\n  primary_300: '#7FBCD7',\n  primary_400: '#519DBD',\n  primary_500: '#2E7FA1', // 500 Core\n  primary_600: '#276D8B',\n  primary_700: '#215369',\n  primary_800: '#163746',\n\n  accent1_20:  '#EDFCFB',\n  accent1_100: '#C8EEEC',\n  accent1_200: '#98D8D5',\n  accent1_300: '#6BC2BE',\n  accent1_400: '#3EA39E',\n  accent1_500: '#25837E', // 500 Core\n  accent1_600: '#23716D',\n  accent1_700: '#145653',\n  accent1_800: '#0F3937',\n\n  accent2_20:  '#FFFAEE',\n  accent2_100: '#F8E2BF',\n  accent2_200: '#EAC785', // 200 Core\n  accent2_300: '#D6AD61',\n  accent2_400: '#B58E45',\n  accent2_500: '#92702F',\n  accent2_600: '#806128',\n  accent2_700: '#604920',\n  accent2_800: '#42300F',\n\n  correct_20:  '#ECFEF1',\n  correct_100: '#CCEED2',\n  correct_200: '#A0D9AD',\n  correct_300: '#77C589',\n  correct_400: '#37A851', // 400 Core\n  correct_500: '#14892F',\n  correct_600: '#13772A',\n  correct_700: '#025A15',\n  correct_800: '#003D0E',\n\n  warning_20:  '#FEF7F1',\n  warning_100: '#FCDDC5',\n  warning_200: '#F8C096',\n  warning_300: '#F4A162',\n  warning_400: '#E97116', // 400 Core\n  warning_500: '#C45402',\n  warning_600: '#AD4B00',\n  warning_700: '#803700',\n  warning_800: '#572600',\n\n  critical_20:  '#FEF5F7',\n  critical_100: '#FDDEE2',\n  critical_200: '#FDBAC2',\n  critical_300: '#FD96A4',\n  critical_400: '#FC5A6F',\n  critical_500: '#DC3449', // 500 Core\n  critical_600: '#C32238',\n  critical_700: '#9C0D1D',\n  critical_800: '#6B0613',\n\n  neutral_20:  '#FAFAFA', // 020 Core\n  neutral_50:  '#F2F2F2',\n  neutral_100: '#E5E5E5',\n  neutral_200: '#CCCCCC',\n  neutral_300: '#B3B3B3',\n  neutral_400: '#949494',\n  neutral_500: '#767676',\n  neutral_600: '#666666',\n  neutral_700: '#4D4D4D',\n  neutral_800: '#333333',\n\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n  toast_info: '#2E7FA1',\n  toast_success: '#37A851',\n  toast_warning: '#E97116',\n  toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.js"}
+{"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":"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","sourcesContent":["const COLORS = {\n  black: '#1F1F1F', // Neutrals / Black\n  white: '#FFFFFF', // Neutrals / White\n  grey:  '#949494', // Neutrals / grey\n  primary: '#2E7FA1', // Brand / Primary - Core 500\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\n  correct: '#37A851', // Semantic / Correct - Core 400\n  warning: '#E97116', // Semantic / Warning  - Core 400\n  critical: '#DC3449', // Semantic / Critical - Core 500\n\n  primary_20: '#F1FBFE',\n  primary_100: '#D4E9F2',\n  primary_200: '#A9D3E5',\n  primary_300: '#7FBCD7',\n  primary_400: '#519DBD',\n  primary_500: '#2E7FA1', // 500 Core\n  primary_600: '#276D8B',\n  primary_700: '#215369',\n  primary_800: '#163746',\n\n  accent1_20:  '#EDFCFB',\n  accent1_100: '#C8EEEC',\n  accent1_200: '#98D8D5',\n  accent1_300: '#6BC2BE',\n  accent1_400: '#3EA39E',\n  accent1_500: '#25837E', // 500 Core\n  accent1_600: '#23716D',\n  accent1_700: '#145653',\n  accent1_800: '#0F3937',\n\n  accent2_20:  '#FFFAEE',\n  accent2_100: '#F8E2BF',\n  accent2_200: '#EAC785', // 200 Core\n  accent2_300: '#D6AD61',\n  accent2_400: '#B58E45',\n  accent2_500: '#92702F',\n  accent2_600: '#806128',\n  accent2_700: '#604920',\n  accent2_800: '#42300F',\n\n  correct_20:  '#ECFEF1',\n  correct_100: '#CCEED2',\n  correct_200: '#A0D9AD',\n  correct_300: '#77C589',\n  correct_400: '#37A851', // 400 Core\n  correct_500: '#14892F',\n  correct_600: '#13772A',\n  correct_700: '#025A15',\n  correct_800: '#003D0E',\n\n  warning_20:  '#FEF7F1',\n  warning_100: '#FCDDC5',\n  warning_200: '#F8C096',\n  warning_300: '#F4A162',\n  warning_400: '#E97116', // 400 Core\n  warning_500: '#C45402',\n  warning_600: '#AD4B00',\n  warning_700: '#803700',\n  warning_800: '#572600',\n\n  critical_20:  '#FEF5F7',\n  critical_100: '#FDDEE2',\n  critical_200: '#FDBAC2',\n  critical_300: '#FD96A4',\n  critical_400: '#FC5A6F',\n  critical_500: '#DC3449', // 500 Core\n  critical_600: '#C32238',\n  critical_700: '#9C0D1D',\n  critical_800: '#6B0613',\n\n  neutral_20:  '#FAFAFA', // 020 Core\n  neutral_100: '#E5E5E5',\n  neutral_200: '#CCCCCC',\n  neutral_300: '#B3B3B3',\n  neutral_400: '#949494',\n  neutral_500: '#767676',\n  neutral_600: '#666666',\n  neutral_700: '#4D4D4D',\n  neutral_800: '#333333',\n\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n  toast_info: '#2E7FA1',\n  toast_success: '#37A851',\n  toast_warning: '#E97116',\n  toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.8.0-dev.30",
+  "version": "1.8.0-dev.31.full",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [