@laerdal/life-react-components 2.3.1-dev.1.full → 2.3.1-dev.3

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","MobileWrapper","UserMenuWrapper","white","props","offsetRight","hasWindow","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {SystemIcons} from '../icons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst MobileWrapper = styled.div`\n  ${BREAKPOINTS.LARGE} {\n    display: none !important;\n  }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n\n  profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                               profileComponent\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <MobileWrapper>\n                {!!profileComponent && profileComponent }\n              </MobileWrapper>\n\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}\n                              profileComponent= {profileComponent}\n                              />\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <SystemIcons.Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={!profileComponent ? profile : undefined}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
+{"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","MEDIUM","LARGE","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","MobileWrapper","UserMenuWrapper","white","props","offsetRight","hasWindow","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","border","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {SystemIcons} from '../icons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ${COLORS.neutral_200};\n    z-index: 5;\n  }\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst MobileWrapper = styled.div`\n  ${BREAKPOINTS.MEDIUM} {\n    display: none !important;\n  }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 80px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n\n  profileComponent?: React.ReactNode\n  border?: boolean;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                               profileComponent,\n                               border = true\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId} className={border ? 'border' : ''}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth} unsetMargin={true}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <MobileWrapper>\n                {!!profileComponent && profileComponent }\n              </MobileWrapper>\n\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}\n                              profileComponent= {profileComponent}\n                              />\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <SystemIcons.Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={!profileComponent ? profile : undefined}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/GlobalNavigationBar.d.ts

@@ -15,11 +15,12 @@ type GlobalNavigationBarProps = {
     desktop?: DesktopNavigationMenuProps;
     testId?: string;
     profileComponent?: React.ReactNode;
+    border?: boolean;
 };
 /**
  * @param props
  * @constructor
  * @description This component is a global navigation header bar
  */
-declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, maxWidth, profileComponent }: GlobalNavigationBarProps) => React.ReactElement<GlobalNavigationBarProps>;
+declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, maxWidth, profileComponent, border }: GlobalNavigationBarProps) => React.ReactElement<GlobalNavigationBarProps>;
 export default GlobalNavigationBar;

package/dist/GlobalNavigationBar/GlobalNavigationBar.js

@@ -25,13 +25,13 @@ import { hasWindow } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 56px;\n  }\n\n  ", " {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
+var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ", ";\n    z-index: 5;\n  }\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 64px;\n  }\n\n  ", " {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
 var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " button {\n    height: 56px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
-var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  ", " {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), BREAKPOINTS.XSMALL, HamburgerButton);
+var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " {\n    display: none;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), HamburgerButton);
 var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
-var MobileWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " {\n    display: none !important;\n  }\n"])), BREAKPOINTS.LARGE);
-var UserMenuWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 56px;\n    right: ", ";\n  }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
+var MobileWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " {\n    display: none !important;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var UserMenuWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 80px;\n    right: ", ";\n  }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
   return props.offsetRight && hasWindow() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
 });
 /**
@@ -51,7 +51,9 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
     _ref$useMaxWidth = _ref.useMaxWidth,
     useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
     maxWidth = _ref.maxWidth,
-    profileComponent = _ref.profileComponent;
+    profileComponent = _ref.profileComponent,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? true : _ref$border;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     showMobileMenu = _React$useState2[0],
@@ -94,9 +96,11 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(HeaderWrapper, {
       "data-testid": testId,
+      className: border ? 'border' : '',
       children: /*#__PURE__*/_jsx(PageWidth, {
         useMaxWidth: useMaxWidth,
         maxWidth: maxWidth,
+        unsetMargin: true,
         children: /*#__PURE__*/_jsxs(RowLayout, {
           children: [/*#__PURE__*/_jsx(Logo, {
             name: name || '',
@@ -183,7 +187,8 @@ GlobalNavigationBar.propTypes = {
     showBetaTag: _pt.bool
   }),
   testId: _pt.string,
-  profileComponent: _pt.node
+  profileComponent: _pt.node,
+  border: _pt.bool
 };
 export default GlobalNavigationBar;
 //# sourceMappingURL=GlobalNavigationBar.js.map

package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","SystemIcons","UserMenu","fadeIn","fadeOut","Menu","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","hasWindow","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","MobileWrapper","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {SystemIcons} from '../icons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst MobileWrapper = styled.div`\n  ${BREAKPOINTS.LARGE} {\n    display: none !important;\n  }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n\n  profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                               profileComponent\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <MobileWrapper>\n                {!!profileComponent && profileComponent }\n              </MobileWrapper>\n\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}\n                              profileComponent= {profileComponent}\n                              />\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <SystemIcons.Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={!profileComponent ? profile : undefined}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
+{"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","SystemIcons","UserMenu","fadeIn","fadeOut","Menu","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","hasWindow","HeaderWrapper","header","neutral_200","sticky_menu","MEDIUM","LARGE","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","MobileWrapper","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","border","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {SystemIcons} from '../icons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ${COLORS.neutral_200};\n    z-index: 5;\n  }\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst MobileWrapper = styled.div`\n  ${BREAKPOINTS.MEDIUM} {\n    display: none !important;\n  }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 80px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n\n  profileComponent?: React.ReactNode\n  border?: boolean;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                               profileComponent,\n                               border = true\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId} className={border ? 'border' : ''}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth} unsetMargin={true}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <MobileWrapper>\n                {!!profileComponent && profileComponent }\n              </MobileWrapper>\n\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}\n                              profileComponent= {profileComponent}\n                              />\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <SystemIcons.Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={!profileComponent ? profile : undefined}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/Logo.cjs

@@ -21,10 +21,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"])), function (props) {
   return props.$color;
 }, _styles.BREAKPOINTS.MEDIUM);
-var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), _styles.BREAKPOINTS.LARGE, _styles.focusStyles, _styles.invertedFocusStyles);
-var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 168px;\n  ", " {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"])), function (props) {
+var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), _styles.BREAKPOINTS.LARGE, _styles.focusStyles, _styles.invertedFocusStyles);
+var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"])), function (props) {
   return props.$color || _styles.COLORS.black;
-}, _styles.BREAKPOINTS.SMALL, function (props) {
+}, function (props) {
   return props.noSizeChangeOnMobile ? (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
   return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);

package/dist/GlobalNavigationBar/Logo.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.cjs","names":["StyledLink","styled","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","LARGE","focusStyles","invertedFocusStyles","Name","span","COLORS","black","SMALL","noSizeChangeOnMobile","ComponentMStyling","ComponentTextStyle","Regular","ComponentXSStyling","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 168px;\n  ${BREAKPOINTS.SMALL} {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAU,GAAG,IAAAC,yBAAM,EAACC,oBAAI,CAAC,+VAWlB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAC9BC,mBAAW,CAACC,MAAM,CAKvB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACO,GAAG,kaAU5BH,mBAAW,CAACI,KAAK,EAMfC,mBAAW,EAIXC,2BAAmB,CAExB;AAED,IAAMC,IAAI,GAAGX,yBAAM,CAACY,IAAI,sdAGG,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK;AAAA,GAG9DV,mBAAW,CAACW,KAAK,EAOjB,UAACb,KAAK;EAAA,OACNA,KAAK,CAACc,oBAAoB,GACtB,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC,GAC3E,IAAAM,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAKhFV,mBAAW,CAACC,MAAM,EAChB,UAACH,KAAK;EAAA,OAAK,IAAAe,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAGxFV,mBAAW,CAACI,KAAK,CAIpB;AAED,IAAMa,OAAO,GAAGrB,yBAAM,CAACY,IAAI,wOACL,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACoB,eAAe,IAAIT,cAAM,CAACU,WAAW;AAAA,GAOxE,UAACrB,KAAK;EAAA,OAAK,IAAAkB,0BAAkB,EAACF,0BAAkB,CAACM,aAAa,EAAEtB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACY,KAAK,CAAC;AAAA,EAChG;AAcD,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAkK;EAAA,IAA5JC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAO,QAAPA,OAAO;IAAEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEf,oBAAoB,QAApBA,oBAAoB;IAAEgB,sBAAsB,QAAtBA,sBAAsB;IAAEC,YAAY,QAAZA,YAAY;IAAEC,QAAQ,QAARA,QAAQ;EACzH,oBACE,qBAAC,aAAa;IAAC,SAAS,EAAEA,QAAQ,GAAG,UAAU,GAAG,EAAG;IAAA,uBACnD,sBAAC,UAAU;MACT,EAAE,EAAEJ,EAAE,IAAI,GAAI;MACd,WAAW,EAAEK,iCAA0B;MACvC,OAAO,EAAE,mBAAM;QACb,IAAIN,QAAO,EAAE;UACXA,QAAO,EAAE;QACX;MACF,CAAE;MACF,MAAM,EAAEE,KAAM;MAAA,WACbA,KAAK,KAAKlB,cAAM,CAACY,KAAK,gBAAG,qBAAC,wBAAgB,KAAG,gBAAG,qBAAC,mBAAW,KAAG,eAChE,qBAAC,IAAI;QAAC,MAAM,EAAEM,KAAM;QAAC,oBAAoB,EAAEf,oBAAoB,IAAI,KAAM;QAAA,UACtEW;MAAI,EACA,EACNC,WAAW,iBACV,qBAAC,OAAO;QAAC,eAAe,EAAEI,sBAAuB;QAAC,MAAM,EAAEC,YAAa;QAAA,UAAC;MAExE,EACD;IAAA;EACU,EACC;AAEpB,CAAC;AAAC;EAnCAN,IAAI;EACJC,WAAW;EACXC,OAAO;EACPC,EAAE;EACFC,KAAK;EACLf,oBAAoB;EACpBgB,sBAAsB;EACtBC,YAAY;EACZC,QAAQ;AAAA;AAAA,eA6BKR,IAAI;AAAA"}
+{"version":3,"file":"Logo.cjs","names":["StyledLink","styled","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","LARGE","focusStyles","invertedFocusStyles","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentMStyling","ComponentTextStyle","Regular","ComponentXSStyling","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAU,GAAG,IAAAC,yBAAM,EAACC,oBAAI,CAAC,+VAWlB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAC9BC,mBAAW,CAACC,MAAM,CAKvB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACO,GAAG,2YAS5BH,mBAAW,CAACI,KAAK,EAMfC,mBAAW,EAIXC,2BAAmB,CAExB;AAED,IAAMC,IAAI,GAAGX,yBAAM,CAACY,IAAI,gbAGG,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK;AAAA,GAO9D,UAACZ,KAAK;EAAA,OACNA,KAAK,CAACa,oBAAoB,GACtB,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC,GAC3E,IAAAK,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAKhFV,mBAAW,CAACC,MAAM,EAChB,UAACH,KAAK;EAAA,OAAK,IAAAc,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAGxFV,mBAAW,CAACI,KAAK,CAIpB;AAED,IAAMY,OAAO,GAAGpB,yBAAM,CAACY,IAAI,wOACL,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACmB,eAAe,IAAIR,cAAM,CAACS,WAAW;AAAA,GAOxE,UAACpB,KAAK;EAAA,OAAK,IAAAiB,0BAAkB,EAACF,0BAAkB,CAACM,aAAa,EAAErB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACW,KAAK,CAAC;AAAA,EAChG;AAcD,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAkK;EAAA,IAA5JC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAO,QAAPA,OAAO;IAAEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEf,oBAAoB,QAApBA,oBAAoB;IAAEgB,sBAAsB,QAAtBA,sBAAsB;IAAEC,YAAY,QAAZA,YAAY;IAAEC,QAAQ,QAARA,QAAQ;EACzH,oBACE,qBAAC,aAAa;IAAC,SAAS,EAAEA,QAAQ,GAAG,UAAU,GAAG,EAAG;IAAA,uBACnD,sBAAC,UAAU;MACT,EAAE,EAAEJ,EAAE,IAAI,GAAI;MACd,WAAW,EAAEK,iCAA0B;MACvC,OAAO,EAAE,mBAAM;QACb,IAAIN,QAAO,EAAE;UACXA,QAAO,EAAE;QACX;MACF,CAAE;MACF,MAAM,EAAEE,KAAM;MAAA,WACbA,KAAK,KAAKjB,cAAM,CAACW,KAAK,gBAAG,qBAAC,wBAAgB,KAAG,gBAAG,qBAAC,mBAAW,KAAG,eAChE,qBAAC,IAAI;QAAC,MAAM,EAAEM,KAAM;QAAC,oBAAoB,EAAEf,oBAAoB,IAAI,KAAM;QAAA,UACtEW;MAAI,EACA,EACNC,WAAW,iBACV,qBAAC,OAAO;QAAC,eAAe,EAAEI,sBAAuB;QAAC,MAAM,EAAEC,YAAa;QAAA,UAAC;MAExE,EACD;IAAA;EACU,EACC;AAEpB,CAAC;AAAC;EAnCAN,IAAI;EACJC,WAAW;EACXC,OAAO;EACPC,EAAE;EACFC,KAAK;EACLf,oBAAoB;EACpBgB,sBAAsB;EACtBC,YAAY;EACZC,QAAQ;AAAA;AAAA,eA6BKR,IAAI;AAAA"}

package/dist/GlobalNavigationBar/Logo.js

@@ -13,10 +13,10 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var StyledLink = styled(Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"])), function (props) {
   return props.$color;
 }, BREAKPOINTS.MEDIUM);
-var LogoContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), BREAKPOINTS.LARGE, focusStyles, invertedFocusStyles);
-var Name = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 168px;\n  ", " {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"])), function (props) {
+var LogoContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), BREAKPOINTS.LARGE, focusStyles, invertedFocusStyles);
+var Name = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"])), function (props) {
   return props.$color || COLORS.black;
-}, BREAKPOINTS.SMALL, function (props) {
+}, function (props) {
   return props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);
 }, BREAKPOINTS.MEDIUM, function (props) {
   return ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);

package/dist/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","MEDIUM","LogoContainer","div","LARGE","Name","span","black","SMALL","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 168px;\n  ${BREAKPOINTS.SMALL} {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,WAAW,EAAEC,gBAAgB,QAAQ,WAAW;AACzD,SAAQC,WAAW,EAAEC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,mBAAmB,QAAO,WAAW;AACnG,SAASC,iBAAiB,EAAEC,kBAAkB,QAAQ,WAAW;AACjE,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,UAAU,GAAGX,MAAM,CAACD,IAAI,CAAC,iVAWlB,UAACa,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAC9BV,WAAW,CAACW,MAAM,CAKvB;AAED,IAAMC,aAAa,GAAGf,MAAM,CAACgB,GAAG,oZAU5Bb,WAAW,CAACc,KAAK,EAMfX,WAAW,EAIXC,mBAAmB,CAExB;AAED,IAAMW,IAAI,GAAGlB,MAAM,CAACmB,IAAI,wcAGG,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,IAAIT,MAAM,CAACgB,KAAK;AAAA,GAG9DjB,WAAW,CAACkB,KAAK,EAOjB,UAACT,KAAK;EAAA,OACNA,KAAK,CAACU,oBAAoB,GACtBd,iBAAiB,CAACH,kBAAkB,CAACkB,OAAO,EAAEX,KAAK,CAACC,MAAM,IAAIT,MAAM,CAACgB,KAAK,CAAC,GAC3EX,kBAAkB,CAACJ,kBAAkB,CAACkB,OAAO,EAAEX,KAAK,CAACC,MAAM,IAAIT,MAAM,CAACgB,KAAK,CAAC;AAAA,GAKhFjB,WAAW,CAACW,MAAM,EAChB,UAACF,KAAK;EAAA,OAAKJ,iBAAiB,CAACH,kBAAkB,CAACkB,OAAO,EAAEX,KAAK,CAACC,MAAM,IAAIT,MAAM,CAACgB,KAAK,CAAC;AAAA,GAGxFjB,WAAW,CAACc,KAAK,CAIpB;AAED,IAAMO,OAAO,GAAGxB,MAAM,CAACmB,IAAI,0NACL,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACa,eAAe,IAAIrB,MAAM,CAACsB,WAAW;AAAA,GAOxE,UAACd,KAAK;EAAA,OAAKH,kBAAkB,CAACJ,kBAAkB,CAACsB,aAAa,EAAEf,KAAK,CAACC,MAAM,IAAIT,MAAM,CAACwB,KAAK,CAAC;AAAA,EAChG;AAcD,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAkK;EAAA,IAA5JC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAO,QAAPA,OAAO;IAAEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEZ,oBAAoB,QAApBA,oBAAoB;IAAEa,sBAAsB,QAAtBA,sBAAsB;IAAEC,YAAY,QAAZA,YAAY;IAAEC,QAAQ,QAARA,QAAQ;EACzH,oBACE,KAAC,aAAa;IAAC,SAAS,EAAEA,QAAQ,GAAG,UAAU,GAAG,EAAG;IAAA,uBACnD,MAAC,UAAU;MACT,EAAE,EAAEJ,EAAE,IAAI,GAAI;MACd,WAAW,EAAEvB,yBAA0B;MACvC,OAAO,EAAE,mBAAM;QACb,IAAIsB,QAAO,EAAE;UACXA,QAAO,EAAE;QACX;MACF,CAAE;MACF,MAAM,EAAEE,KAAM;MAAA,WACbA,KAAK,KAAK9B,MAAM,CAACwB,KAAK,gBAAG,KAAC,gBAAgB,KAAG,gBAAG,KAAC,WAAW,KAAG,eAChE,KAAC,IAAI;QAAC,MAAM,EAAEM,KAAM;QAAC,oBAAoB,EAAEZ,oBAAoB,IAAI,KAAM;QAAA,UACtEQ;MAAI,EACA,EACNC,WAAW,iBACV,KAAC,OAAO;QAAC,eAAe,EAAEI,sBAAuB;QAAC,MAAM,EAAEC,YAAa;QAAA,UAAC;MAExE,EACD;IAAA;EACU,EACC;AAEpB,CAAC;AAAC;EAnCAN,IAAI;EACJC,WAAW;EACXC,OAAO;EACPC,EAAE;EACFC,KAAK;EACLZ,oBAAoB;EACpBa,sBAAsB;EACtBC,YAAY;EACZC,QAAQ;AAAA;AA6BV,eAAeR,IAAI"}
+{"version":3,"file":"Logo.js","names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","MEDIUM","LogoContainer","div","LARGE","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs

@@ -23,7 +23,7 @@ var _excluded = ["placement", "type", "action"],
 var _templateObject, _templateObject2;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
 var ProfileWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 8px;\n"])));
 var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var buttons = _ref.buttons,

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

@@ -1 +1 @@
-{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","LARGE","ProfileWrapper","DesktopActions","React","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n`;\n\nconst ProfileWrapper = styled.div`\n  margin: 0 8px;\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\n        else\n          return <ProfileWrapper>\n            <ProfileButton key={index}\n                           ref={elRefs[index]}\n                           hideOnLowWidth={true}\n                           onClick={e => {\n                             item.action ? item.action(e?.target) : onShowUserMenu()\n                           }}\n                           icon={!user && <SystemIcons.User/>}\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                           {...rest}/>\n          </ProfileWrapper>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SystemIcons.SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}
+{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","ProfileWrapper","DesktopActions","React","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n`;\n\nconst ProfileWrapper = styled.div`\n  margin: 0 8px;\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\n        else\n          return <ProfileWrapper>\n            <ProfileButton key={index}\n                           ref={elRefs[index]}\n                           hideOnLowWidth={true}\n                           onClick={e => {\n                             item.action ? item.action(e?.target) : onShowUserMenu()\n                           }}\n                           icon={!user && <SystemIcons.User/>}\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                           {...rest}/>\n          </ProfileWrapper>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SystemIcons.SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/DesktopActions.js

@@ -16,7 +16,7 @@ import { ProfileButton } from '../../ProfileButton';
 import { SystemIcons } from '../../icons';
 import { BREAKPOINTS } from '../../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n"])), BREAKPOINTS.LARGE);
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n"])), BREAKPOINTS.MEDIUM);
 var ProfileWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0 8px;\n"])));
 var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var buttons = _ref.buttons,

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

@@ -1 +1 @@
-{"version":3,"file":"DesktopActions.js","names":["React","styled","IconButton","ProfileButton","SystemIcons","BREAKPOINTS","Wrapper","div","LARGE","ProfileWrapper","DesktopActions","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n`;\n\nconst ProfileWrapper = styled.div`\n  margin: 0 8px;\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\n        else\n          return <ProfileWrapper>\n            <ProfileButton key={index}\n                           ref={elRefs[index]}\n                           hideOnLowWidth={true}\n                           onClick={e => {\n                             item.action ? item.action(e?.target) : onShowUserMenu()\n                           }}\n                           icon={!user && <SystemIcons.User/>}\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                           {...rest}/>\n          </ProfileWrapper>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SystemIcons.SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}
+{"version":3,"file":"DesktopActions.js","names":["React","styled","IconButton","ProfileButton","SystemIcons","BREAKPOINTS","Wrapper","div","MEDIUM","ProfileWrapper","DesktopActions","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n`;\n\nconst ProfileWrapper = styled.div`\n  margin: 0 8px;\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\n        else\n          return <ProfileWrapper>\n            <ProfileButton key={index}\n                           ref={elRefs[index]}\n                           hideOnLowWidth={true}\n                           onClick={e => {\n                             item.action ? item.action(e?.target) : onShowUserMenu()\n                           }}\n                           icon={!user && <SystemIcons.User/>}\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                           {...rest}/>\n          </ProfileWrapper>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SystemIcons.SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/MainMenu.cjs

@@ -27,7 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ", " {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
+var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ", " {\n    display: flex;\n  }\n  \n  ", " {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
 var NavButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 0;\n"])), _styles.COLORS.white);
 var ExtendedMenuWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: ", ";\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), function (props) {
   return props.floatRight ? 'auto' : 'unset';

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

@@ -1 +1 @@
-{"version":3,"file":"MainMenu.cjs","names":["NavContainer","styled","div","BREAKPOINTS","LARGE","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","React","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {NavLink} from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport {NavItem} from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport {COLORS, BREAKPOINTS} from '../../styles';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  items: MenuNavigationItemTypeItem[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (!extendedMenuRef?.current?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\n      setShowExtendedMenu(false);\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length])\n\n  const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n    if (index > numberOfItemsAllowed - 2) return null\n\n    const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n    return item?.disabled\n      ? <NavItem as={NavButton}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 to={item.to || ''}\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n                 {...rest}>\n        {item?.label}\n      </NavItem>\n  }\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            ref={menuButtonRef}\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => {\n              setShowExtendedMenu(!showExtendedMenu)\n            }}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n                              navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MainMenu.cjs","names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","LARGE","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","React","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {NavLink} from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport {NavItem} from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport {COLORS, BREAKPOINTS} from '../../styles';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n  \n  ${BREAKPOINTS.LARGE} {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  items: MenuNavigationItemTypeItem[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (!extendedMenuRef?.current?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\n      setShowExtendedMenu(false);\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length])\n\n  const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n    if (index > numberOfItemsAllowed - 2) return null\n\n    const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n    return item?.disabled\n      ? <NavItem as={NavButton}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 to={item.to || ''}\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n                 {...rest}>\n        {item?.label}\n      </NavItem>\n  }\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            ref={menuButtonRef}\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => {\n              setShowExtendedMenu(!showExtendedMenu)\n            }}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n                              navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/MainMenu.js

@@ -18,7 +18,7 @@ import { IconButton } from '../../Button';
 import { defaultOnMouseDownHandler } from '../../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ", " {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), BREAKPOINTS.LARGE);
+var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ", " {\n    display: flex;\n  }\n  \n  ", " {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
 var NavButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0;\n"])), COLORS.white);
 var ExtendedMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: ", ";\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), function (props) {
   return props.floatRight ? 'auto' : 'unset';

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

@@ -1 +1 @@
-{"version":3,"file":"MainMenu.js","names":["React","NavLink","styled","NavItem","SystemIcons","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","defaultOnMouseDownHandler","NavContainer","div","LARGE","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {NavLink} from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport {NavItem} from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport {COLORS, BREAKPOINTS} from '../../styles';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  items: MenuNavigationItemTypeItem[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (!extendedMenuRef?.current?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\n      setShowExtendedMenu(false);\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length])\n\n  const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n    if (index > numberOfItemsAllowed - 2) return null\n\n    const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n    return item?.disabled\n      ? <NavItem as={NavButton}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 to={item.to || ''}\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n                 {...rest}>\n        {item?.label}\n      </NavItem>\n  }\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            ref={menuButtonRef}\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => {\n              setShowExtendedMenu(!showExtendedMenu)\n            }}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n                              navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MainMenu.js","names":["React","NavLink","styled","NavItem","SystemIcons","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","defaultOnMouseDownHandler","NavContainer","div","MEDIUM","LARGE","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {NavLink} from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport {NavItem} from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport {COLORS, BREAKPOINTS} from '../../styles';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n  \n  ${BREAKPOINTS.LARGE} {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  items: MenuNavigationItemTypeItem[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (!extendedMenuRef?.current?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\n      setShowExtendedMenu(false);\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length])\n\n  const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n    if (index > numberOfItemsAllowed - 2) return null\n\n    const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n    return item?.disabled\n      ? <NavItem as={NavButton}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 to={item.to || ''}\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n                 {...rest}>\n        {item?.label}\n      </NavItem>\n  }\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            ref={menuButtonRef}\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => {\n              setShowExtendedMenu(!showExtendedMenu)\n            }}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n                              navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,OAAO,QAAO,kBAAkB;AACxC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,OAAO,QAAO,eAAe;AACrC,SAAQC,WAAW,QAAO,aAAa;AACvC,SAAQC,MAAM,EAAEC,WAAW,QAAO,cAAc;AAChD,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,SAAQC,UAAU,QAAO,cAAc;AACvC,SAAQC,yBAAyB,QAAO,cAAc;AAAC;AAAA;AAGvD,IAAMC,YAAY,GAAGR,MAAM,CAACS,GAAG,mTAQ3BL,WAAW,CAACM,MAAM,EAIlBN,WAAW,CAACO,KAAK,CAOpB;AAED,IAAMC,SAAS,GAAGZ,MAAM,CAACa,MAAM,6GACfV,MAAM,CAACW,KAAK,CAE3B;AAMD,IAAMC,mBAAmB,GAAGf,MAAM,CAACS,GAAG,0SAErB,UAAAO,KAAK;EAAA,OAAKA,KAAK,CAACC,UAAU,GAAG,MAAM,GAAG,OAAO;AAAA,CAAC,EAa7Cd,MAAM,CAACW,KAAK,CAE7B;AAED,IAAMI,eAAe,GAAGlB,MAAM,CAACS,GAAG,gGAEjC;AAOD,IAAMU,QAAQ,GAAG,SAAXA,QAAQ,OAAgE;EAAA,IAA3DC,KAAK,QAALA,KAAK;IAAEC,YAAY,QAAZA,YAAY;EACpC,sBAAgDvB,KAAK,CAACwB,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9DC,gBAAgB;IAAEC,mBAAmB;EAC5C,IAAMC,eAAe,GAAG3B,KAAK,CAAC4B,MAAM,CAAM,IAAI,CAAC;EAC/C,IAAMC,aAAa,GAAG7B,KAAK,CAAC4B,MAAM,CAAoB,IAAI,CAAC;EAC3D,IAAME,WAA+D,GAAG9B,KAAK,CAAC4B,MAAM,CAAC,IAAI,CAAC;EAC1F,uBAAwD5B,KAAK,CAACwB,QAAQ,CAAS,CAAC,CAAC;IAAA;IAA1EO,oBAAoB;IAAEC,uBAAuB;EAEpD,IAAMC,WAAW,GAAG,GAAG;EACvB,IAAMC,+BAA+B,GAAG,SAAlCA,+BAA+B,GAAS;IAC5C,IAAIX,YAAY,aAAZA,YAAY,eAAZA,YAAY,CAAEY,OAAO,IAAIL,WAAW,aAAXA,WAAW,eAAXA,WAAW,CAAEK,OAAO,EAAE;MAAA;MACjD,IAAMC,MAAM,GAAGC,IAAI,CAACC,KAAK,CAAC,CAAC,CAAAf,YAAY,aAAZA,YAAY,gDAAZA,YAAY,CAAEY,OAAO,0DAArB,sBAAuBI,UAAU,KAAGT,WAAW,aAAXA,WAAW,+CAAXA,WAAW,CAAEK,OAAO,yDAApB,qBAAsBI,UAAU,KAAIN,WAAW,CAAC;MAC/G,IAAIG,MAAM,KAAKL,oBAAoB,EAAE;QACnCC,uBAAuB,CAACI,MAAM,CAAC;MACjC;IACF;EACF,CAAC;EAED,IAAMI,6BAA6B,GAAG,SAAhCA,6BAA6B,GAAS;IAC1Cd,mBAAmB,CAAC,KAAK,CAAC;EAC5B,CAAC;EAED,IAAMe,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,CAAM,EAAK;IAAA;IACrC,IAAI,EAACf,eAAe,aAAfA,eAAe,wCAAfA,eAAe,CAAEQ,OAAO,kDAAxB,sBAA0BQ,QAAQ,CAACD,CAAC,CAACE,MAAM,CAAC,KAAI,EAACf,aAAa,aAAbA,aAAa,wCAAbA,aAAa,CAAEM,OAAO,kDAAtB,sBAAwBQ,QAAQ,CAACD,CAAC,CAACE,MAAM,CAAC,GAAE;MAChGlB,mBAAmB,CAAC,KAAK,CAAC;IAC5B;EACF,CAAC;EAED1B,KAAK,CAAC6C,SAAS,CAAC,YAAM;IACpBX,+BAA+B,EAAE;IACjC;IACAY,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEN,kBAAkB,CAAC;IACtDO,MAAM,CAACD,gBAAgB,CAAC,QAAQ,EAAEb,+BAA+B,CAAC;IAClE,OAAO,YAAM;MACX;MACAY,QAAQ,CAACG,mBAAmB,CAAC,OAAO,EAAER,kBAAkB,CAAC;MACzDO,MAAM,CAACC,mBAAmB,CAAC,QAAQ,EAAEf,+BAA+B,CAAC;IACvE,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAENlC,KAAK,CAAC6C,SAAS,CAAC,YAAM;IACpBX,+BAA+B,EAAE;EACnC,CAAC,EAAE,CAACZ,KAAK,CAAC4B,MAAM,CAAC,CAAC;EAElB,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,IAAgC,EAAEC,KAAa,EAAK;IAEtE,IAAIA,KAAK,GAAGtB,oBAAoB,GAAG,CAAC,EAAE,OAAO,IAAI;IAEjD,IAAOuB,IAAI,GAAyEF,IAAI,CAAjFE,IAAI;MAAEC,EAAE,GAAqEH,IAAI,CAA3EG,EAAE;MAAEC,KAAK,GAA8DJ,IAAI,CAAvEI,KAAK;MAAEC,QAAQ,GAAoDL,IAAI,CAAhEK,QAAQ;MAAEC,QAAQ,GAA0CN,IAAI,CAAtDM,QAAQ;MAAEC,MAAM,GAAkCP,IAAI,CAA5CO,MAAM;MAAEC,KAAK,GAA2BR,IAAI,CAApCQ,KAAK;MAAEC,IAAI,GAAqBT,IAAI,CAA7BS,IAAI;MAAEC,MAAM,GAAaV,IAAI,CAAvBU,MAAM;MAAKC,IAAI,4BAAIX,IAAI;IAExF,OAAOA,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEK,QAAQ,gBACjB,KAAC,OAAO;MAAC,EAAE,EAAE3C,SAAU;MACd,SAAS,EAAC,UAAU;MAEpB,WAAW,EAAEL,yBAA0B;MAAA,UAC/C2C,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEQ;IAAK,GAFER,IAAI,CAACQ,KAAK,CAGhB,gBACR,KAAC,OAAO;MAAC,EAAE,EAAE3D,OAAQ;MACZ,EAAE,EAAEmD,IAAI,CAACG,EAAE,IAAI,EAAG;MAElB,WAAW,EAAE9C,yBAA0B;MACvC,OAAO,EAAE,iBAACiC,CAAmB;QAAA,OAAKU,IAAI,CAACO,MAAM,IAAIP,IAAI,CAACO,MAAM,CAACjB,CAAC,CAAC;MAAA;IAAC,GAC5DqB,IAAI;MAAA,UAChBX,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEQ;IAAK,IAJER,IAAI,CAACQ,KAAK,CAKhB;EACd,CAAC;EAED,oBACE,MAAC,YAAY;IAAC,SAAS,EAAC,0BAA0B;IAAC,GAAG,EAAE9B,WAAY;IAAC,IAAI,EAAEL,gBAAiB;IAAA,WACzFH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE0C,GAAG,CAACb,UAAU,CAAC,EACtB7B,KAAK,CAAC4B,MAAM,GAAG,CAAC,GAAGnB,oBAAoB,iBACtC,MAAC,eAAe;MAAA,wBACd,KAAC,UAAU;QACT,GAAG,EAAEF,aAAc;QACnB,OAAO,EAAE,WAAY;QACrB,KAAK,EAAE,UAAW;QAClB,MAAM,EAAE,kBAAM;UACZH,mBAAmB,CAAC,CAACD,gBAAgB,CAAC;QACxC,CAAE;QAAA,uBACF,KAAC,WAAW,CAAC,cAAc;UAAC,IAAI,EAAC;QAAM;MAAE,EAC9B,eACb,KAAC,mBAAmB;QAAC,GAAG,EAAEE,eAAgB;QAAC,SAAS,EAAEF,gBAAgB,GAAG,MAAM,GAAG,EAAG;QAAC,UAAU,EAAE,KAAM;QAAA,uBACtG,KAAC,gBAAgB;UAAC,eAAe,EAAEe,6BAA8B;UAC/C,iBAAiB,EAAElB,KAAK,CAAC2C,KAAK,CAAClC,oBAAoB,GAAG,CAAC;QAAE;MAAE,EACzD;IAAA,EAEzB;EAAA,EACY;AAEnB,CAAC;AAAC;EA5FAT,KAAK;AAAA;AA8FP,eAAeD,QAAQ"}