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

package/dist/GlobalNavigationBar/GlobalNavigationBar.js

@@ -1,8 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
@@ -22,80 +19,146 @@ import DesktopActions from './desktop/DesktopActions';
 import { usePreviousImmediate } from 'rooks';
 import { useClickOutsideRef } from '../common';
 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  \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"])), function (props) {
-  return COLORS.getColor('neutral_200', props.theme);
-}, 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  ", " {\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.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"])), function (props) {
-  return COLORS.getColor('white', props.theme);
-}, BREAKPOINTS.LARGE, function (props) {
-  return props.$offsetRight && hasWindow() ? "".concat(window.innerWidth - props.$offsetRight + 296, "px") : '10%';
-});
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const HeaderWrapper = styled.header`
+  background: white;
+  box-sizing: border-box;
+  
+  &.border:after{
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    height: 1px;
+    background: ${props => COLORS.getColor('neutral_200', props.theme)};
+    z-index: 5;
+  }
+
+  z-index: ${Z_INDEXES.sticky_menu};
+  position: relative;
+
+  height: 48px;
+
+  ${BREAKPOINTS.MEDIUM} {
+    height: 64px;
+  }
+
+  ${BREAKPOINTS.LARGE} {
+    height: 80px;
+  }
+
+  @media all and (-ms-high-contrast: none) {
+    height: auto;
+  }
+
+  @media print {
+    border-bottom: none;
+  }
+`;
+const RowLayout = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const HamburgerButton = styled.div`
+  ${BREAKPOINTS.MEDIUM} {
+    display: none;
+  }
+`;
+const RightSide = styled.div`
+  display: flex;
+  align-items: center;
+
+  margin: 0 0 0 auto;
+
+  &.reverse {
+    ${HamburgerButton} {
+      order: -1;
+    }
+
+    flex-direction: row-reverse;
+  }
+`;
+const MobileMenuBackdrop = styled.div`
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  z-index: ${Z_INDEXES.backdrop};
+  visibility: hidden;
+
+  &.open {
+    visibility: visible;
+    animation: ${fadeIn} 0.3s ease-in-out;
+  }
+
+  &.closed {
+    visibility: hidden;
+    animation: ${fadeOut} 0.3s ease-in-out;
+  }
+
+  ${BREAKPOINTS.LARGE} {
+    visibility: hidden !important;
+  }
+`;
+const MobileWrapper = styled.div`
+  ${BREAKPOINTS.MEDIUM} {
+    display: none !important;
+  }
+`;
+const UserMenuWrapper = styled.div`
+  background-color: ${props => COLORS.getColor('white', props.theme)};
+  display: flex;
+  position: absolute;
+
+  ${BREAKPOINTS.LARGE} {
+    top: 80px;
+    right: ${props => props.$offsetRight && hasWindow() ? `${window.innerWidth - props.$offsetRight + 296}px` : '10%'};
+  }
+`;
 /**
  * @param props
  * @constructor
  * @description This component is a global navigation header bar
  */
-var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
-  var _actionsRef$current, _actionsRef$current$b, _actionsRef$current$b2, _actionsRef$current$b3, _desktop$items, _desktop$buttons;
-  var name = _ref.name,
-    isAuthenticated = _ref.isAuthenticated,
-    logo = _ref.logo,
-    profile = _ref.profile,
-    mobile = _ref.mobile,
-    desktop = _ref.desktop,
-    testId = _ref.testId,
-    _ref$useMaxWidth = _ref.useMaxWidth,
-    useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
-    maxWidth = _ref.maxWidth,
-    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],
-    setShowMobileMenu = _React$useState2[1];
-  var wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    showUserMenu = _React$useState4[0],
-    setShowUserMenu = _React$useState4[1];
-  var actionsRef = React.useRef(null);
-  var profileButtonRef = React.useRef();
-  profileButtonRef.current = actionsRef === null || actionsRef === void 0 ? void 0 : (_actionsRef$current = actionsRef.current) === null || _actionsRef$current === void 0 ? void 0 : (_actionsRef$current$b = _actionsRef$current.buttons) === null || _actionsRef$current$b === void 0 ? void 0 : (_actionsRef$current$b2 = _actionsRef$current$b.find(function (a) {
-    return a.type === 'profile';
-  })) === null || _actionsRef$current$b2 === void 0 ? void 0 : (_actionsRef$current$b3 = _actionsRef$current$b2.ref) === null || _actionsRef$current$b3 === void 0 ? void 0 : _actionsRef$current$b3.current;
-  var mobileMenuButtonRef = React.useRef(null);
-  var rightSideRef = React.useRef(null);
-  var _React$useState5 = React.useState(0),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    avatarRight = _React$useState6[0],
-    setAvatarRight = _React$useState6[1];
-  var userMenuRef = useClickOutsideRef(function () {
-    return setShowUserMenu(false);
-  }, [profileButtonRef]);
-  var mobileMenuRef = useClickOutsideRef(function () {
-    return setShowMobileMenu(false);
-  }, [mobileMenuButtonRef]);
-  React.useEffect(function () {
+const GlobalNavigationBar = _ref => {
+  let {
+    name,
+    isAuthenticated,
+    logo,
+    profile,
+    mobile,
+    desktop,
+    testId,
+    useMaxWidth = true,
+    maxWidth,
+    profileComponent,
+    border = true
+  } = _ref;
+  const [showMobileMenu, setShowMobileMenu] = React.useState(false);
+  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);
+  const [showUserMenu, setShowUserMenu] = React.useState(false);
+  const actionsRef = React.useRef(null);
+  const profileButtonRef = React.useRef(null);
+  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;
+  const mobileMenuButtonRef = React.useRef(null);
+  const rightSideRef = React.useRef(null);
+  const [avatarRight, setAvatarRight] = React.useState(0);
+  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);
+  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);
+  React.useEffect(() => {
     if (!profileButtonRef.current) return;
-    var handleResize = function handleResize() {
-      var _profileButtonRef$cur, _profileButtonRef$cur2;
-      var profileRightOffset = (_profileButtonRef$cur = profileButtonRef.current) === null || _profileButtonRef$cur === void 0 ? void 0 : (_profileButtonRef$cur2 = _profileButtonRef$cur.getBoundingClientRect()) === null || _profileButtonRef$cur2 === void 0 ? void 0 : _profileButtonRef$cur2.right;
+    const handleResize = () => {
+      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;
       setAvatarRight(profileRightOffset || 0);
     };
     handleResize();
     window.addEventListener('resize', handleResize);
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
+    return () => window.removeEventListener('resize', handleResize);
   }, [profileButtonRef.current]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(HeaderWrapper, {
@@ -108,40 +171,30 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
         children: /*#__PURE__*/_jsxs(RowLayout, {
           children: [/*#__PURE__*/_jsx(Logo, {
             name: name || '',
-            showBetaTag: logo === null || logo === void 0 ? void 0 : logo.showBetaTag,
-            onClick: logo === null || logo === void 0 ? void 0 : logo.onClick,
-            to: logo === null || logo === void 0 ? void 0 : logo.to
+            showBetaTag: logo?.showBetaTag,
+            onClick: logo?.onClick,
+            to: logo?.to
           }), isAuthenticated && /*#__PURE__*/_jsx(MainMenu, {
-            items: (desktop === null || desktop === void 0 ? void 0 : desktop.items.filter(function (a) {
-              return !a.pinned;
-            })) || [],
+            items: desktop?.items.filter(a => !a.pinned) || [],
             rightSideRef: rightSideRef
           }), /*#__PURE__*/_jsxs(RightSide, {
-            className: "".concat(desktop !== null && desktop !== void 0 && desktop.reverseRightSideOrder ? 'reverse' : ''),
+            className: `${desktop?.reverseRightSideOrder ? 'reverse' : ''}`,
             ref: rightSideRef,
             children: [/*#__PURE__*/_jsx(RightSideNav, {
-              items: desktop === null || desktop === void 0 ? void 0 : (_desktop$items = desktop.items) === null || _desktop$items === void 0 ? void 0 : _desktop$items.filter(function (a) {
-                return a.pinned && a.type == 'item';
-              }).map(function (x) {
-                return x;
-              }),
-              action: desktop === null || desktop === void 0 ? void 0 : desktop.action
+              items: desktop?.items?.filter(a => a.pinned && a.type == 'item').map(x => x),
+              action: desktop?.action
             }), /*#__PURE__*/_jsx(MobileWrapper, {
               children: !!profileComponent && profileComponent
             }), /*#__PURE__*/_jsx(DesktopActions, {
               ref: actionsRef,
-              buttons: desktop === null || desktop === void 0 ? void 0 : desktop.buttons,
-              onShowUserMenu: function onShowUserMenu() {
-                return setShowUserMenu(!showUserMenu);
-              },
-              user: profile === null || profile === void 0 ? void 0 : profile.user,
+              buttons: desktop?.buttons,
+              onShowUserMenu: () => setShowUserMenu(!showUserMenu),
+              user: profile?.user,
               profileComponent: profileComponent
             }), /*#__PURE__*/_jsx(HamburgerButton, {
               hidden: !isAuthenticated,
               children: /*#__PURE__*/_jsx(IconButton, {
-                action: function action() {
-                  return setShowMobileMenu(!showMobileMenu);
-                },
+                action: () => setShowMobileMenu(!showMobileMenu),
                 ref: mobileMenuButtonRef,
                 shape: 'circular',
                 variant: 'secondary',
@@ -161,23 +214,17 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
         "aria-labelledby": "UserMenuButton",
         children: /*#__PURE__*/_jsx(MobileMenu, _objectSpread(_objectSpread({}, mobile), {}, {
           show: showMobileMenu,
-          onClose: function onClose() {
-            return setShowMobileMenu(false);
-          },
+          onClose: () => setShowMobileMenu(false),
           profile: !profileComponent ? profile : undefined
         }))
       })
-    }), (desktop === null || desktop === void 0 ? void 0 : (_desktop$buttons = desktop.buttons) === null || _desktop$buttons === void 0 ? void 0 : _desktop$buttons.some(function (a) {
-      return a.type === 'profile';
-    })) && !!profile && /*#__PURE__*/_jsx(UserMenuWrapper, {
+    }), desktop?.buttons?.some(a => a.type === 'profile') && !!profile && /*#__PURE__*/_jsx(UserMenuWrapper, {
       ref: userMenuRef,
       $offsetRight: avatarRight,
       "data-testid": "testUserMenuWrapper",
       children: /*#__PURE__*/_jsx(UserMenu, _objectSpread(_objectSpread({}, profile), {}, {
         show: showUserMenu,
-        onHideUserMenu: function onHideUserMenu() {
-          return setShowUserMenu(false);
-        }
+        onHideUserMenu: () => setShowUserMenu(false)
       }))
     })]
   });

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

package/dist/GlobalNavigationBar/Logo.cjs

@@ -1,58 +1,120 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _reactRouterDom = require("react-router-dom");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _assets = require("../assets");
 var _styles = require("../styles");
 var _common = require("../common");
+var _HyperLink = require("../HyperLink/HyperLink");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var 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  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.getColor('black', props.theme);
-}, function (props) {
-  return props.$noSizeChangeOnMobile ? (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.getColor('black', props.theme)) : (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.getColor('black', props.theme));
-}, _styles.BREAKPOINTS.MEDIUM, function (props) {
-  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.getColor('black', props.theme));
-}, _styles.BREAKPOINTS.LARGE);
-var BetaTag = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ", "\n"])), function (props) {
-  return props.$backgroundColor || _styles.COLORS.getColor('accent2_500', props.theme);
-}, function (props) {
-  return (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.getColor('white', props.theme));
-});
-var Logo = function Logo(_ref) {
-  var name = _ref.name,
-    showBetaTag = _ref.showBetaTag,
-    _onClick = _ref.onClick,
-    to = _ref.to,
-    color = _ref.color,
-    noSizeChangeOnMobile = _ref.noSizeChangeOnMobile,
-    betaTagBackgroundColor = _ref.betaTagBackgroundColor,
-    betaTagColor = _ref.betaTagColor,
-    inverted = _ref.inverted;
-  var theme = (0, _styledComponents.useTheme)();
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const CustomizedLink = (0, _styledComponents.default)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.StyledLink, _objectSpread({}, props)))`
+  text-align: center;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  &:focus-within {
+    outline: none;
+  }
+  svg {
+    width: 66px;
+    height: 36px;
+    color: ${props => props.$color};
+    ${_styles.BREAKPOINTS.MEDIUM} {
+      width: 88px;
+      height: 48px;
+    }
+  }
+`;
+const LogoContainer = _styledComponents.default.div`
+  display: flex;
+  max-width: calc(100% - 48px);
+  overflow: hidden;
+  align-items: center;
+  height: 40px;
+  box-sizing: border-box;
+  padding: 24px 0;
+
+  ${_styles.BREAKPOINTS.LARGE} {
+    margin-top: 8px;
+    margin-bottom: 7px;
+  }
+
+  &:focus-within {
+    ${_styles.focusStyles}
+  }
+
+  &.inverted:focus-within {
+    ${_styles.invertedFocusStyles}
+  }
+`;
+const Name = _styledComponents.default.span`
+  margin-left: 8px;
+  padding-left: 8px;
+  border-left: 1px solid ${props => props.$color || _styles.COLORS.getColor('black', props.theme)};
+  letter-spacing: -0.02em;
+  max-width: 200px;
+  
+  white-space: nowrap;
+  overflow: hidden;
+
+  ${props => props.$noSizeChangeOnMobile ? (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.getColor('black', props.theme)) : (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.getColor('black', props.theme))}
+
+  font-weight: 300 !important;
+  line-height: 24px !important;
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.getColor('black', props.theme))};
+  }
+
+  ${_styles.BREAKPOINTS.LARGE} {
+    margin-left: 12px;
+    padding-left: 12px;
+  }
+`;
+const BetaTag = _styledComponents.default.span`
+  background-color: ${props => props.$backgroundColor || _styles.COLORS.getColor('accent2_500', props.theme)};
+  padding: 4px 8px;
+  margin-left: 8px;
+  margin-top: 2px;
+  border-left: none;
+  border-radius: 2px;
+
+  ${props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.getColor('white', props.theme))}
+`;
+const Logo = _ref => {
+  let {
+    name,
+    showBetaTag,
+    onClick,
+    to,
+    color,
+    noSizeChangeOnMobile,
+    betaTagBackgroundColor,
+    betaTagColor,
+    inverted
+  } = _ref;
+  const theme = (0, _styledComponents.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoContainer, {
     className: inverted ? 'inverted' : '',
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledLink, {
-      to: to || '/',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomizedLink, {
+      target: "_self",
+      $variant: "styleless",
+      href: to || '/',
       onMouseDown: _common.defaultOnMouseDownHandler,
-      onClick: function onClick() {
-        if (_onClick) {
-          _onClick();
+      onClick: () => {
+        if (onClick) {
+          onClick();
         }
       },
       $color: color,
@@ -69,16 +131,15 @@ var Logo = function Logo(_ref) {
   });
 };
 Logo.propTypes = {
-  name: _propTypes["default"].string.isRequired,
-  showBetaTag: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  to: _propTypes["default"].string,
-  color: _propTypes["default"].string,
-  noSizeChangeOnMobile: _propTypes["default"].bool,
-  betaTagBackgroundColor: _propTypes["default"].string,
-  betaTagColor: _propTypes["default"].string,
-  inverted: _propTypes["default"].bool
+  name: _propTypes.default.string.isRequired,
+  showBetaTag: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
+  to: _propTypes.default.string,
+  color: _propTypes.default.string,
+  noSizeChangeOnMobile: _propTypes.default.bool,
+  betaTagBackgroundColor: _propTypes.default.string,
+  betaTagColor: _propTypes.default.string,
+  inverted: _propTypes.default.bool
 };
-var _default = Logo;
-exports["default"] = _default;
+var _default = exports.default = Logo;
 //# sourceMappingURL=Logo.cjs.map