@smartbooks-ai/layout 0.0.6 → 0.0.8

package/src/components/PageWithMenuLayout/MenuItemWithChildren/styles.ts

@@ -1,179 +0,0 @@
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDownRounded';
-import MuiListItemIcon from '@mui/material/ListItemIcon';
-import MuiListItemText, { listItemTextClasses } from '@mui/material/ListItemText';
-import MuiMenuItem, { menuItemClasses } from '@mui/material/MenuItem';
-import MuiMenuList from '@mui/material/MenuList';
-import { rem } from 'polished';
-
-import { shouldNotForwardPropsWithKeys } from '../../../utils/shouldNotForwardPropsWithKeys';
-
-const iconMargin = rem(-2);
-
-type MenuItemProps = {
-  isHighlighted: boolean;
-  elevation?: number;
-  isMenuOpen: boolean;
-  isTitle: boolean;
-};
-export const MenuItem = styled(
-  MuiMenuItem,
-  shouldNotForwardPropsWithKeys<MenuItemProps>(['isHighlighted', 'elevation', 'isMenuOpen', 'isTitle']),
-)<MenuItemProps>(
-  ({ theme, elevation = 0, isHighlighted, isMenuOpen, isTitle, disabled }) => css`
-    display: flex;
-
-    align-items: center;
-
-    padding: ${theme.my.spacing.xxs};
-    padding-left: 0;
-    margin-top: ${elevation === 0 && isMenuOpen && isTitle && theme.my.spacing.sm};
-    margin-left: ${!isMenuOpen ? `calc(${theme.my.spacing.xxs} - ${iconMargin})` : 0};
-
-    font: ${isHighlighted ? theme.my.font.nav2 : theme.my.font.nav1};
-
-    color: ${theme.my.colors.text.white};
-
-    transition:
-      font-weight 0.3s,
-      margin 0.3s;
-
-    &:hover {
-      background-color: ${theme.my.colors.background.hover};
-    }
-
-    ${disabled &&
-    css`
-      &.${menuItemClasses.disabled} {
-        text-transform: uppercase;
-
-        pointer-events: initial;
-
-        background-color: initial;
-
-        opacity: 1;
-      }
-    `};
-  `,
-);
-
-export const ListItemIcon = styled(MuiListItemIcon)`
-  /* Icons from MUI have small paddings, so we need to artificially move them 2px ⬅︎ */
-  margin-left: ${iconMargin};
-
-  /* Increasing specificity */
-  &&& {
-    min-width: 1.75rem;
-  }
-
-  color: ${({ theme }) => theme.my.colors.text.white};
-`;
-
-type ListItemTextProps = {
-  isHighlighted: boolean;
-  isTitle: boolean;
-  elevation: number;
-};
-export const ListItemText = styled(
-  MuiListItemText,
-  shouldNotForwardPropsWithKeys<ListItemTextProps>(['isHighlighted', 'elevation', 'isTitle']),
-)<ListItemTextProps>(
-  ({ theme, isHighlighted, elevation, isTitle }) => css`
-    margin-top: 0;
-    margin-bottom: 0;
-
-    white-space: nowrap;
-
-    .${listItemTextClasses.primary} {
-      padding-left: calc(${Math.max(elevation - 1, 0)} * ${theme.my.spacing.xxs});
-
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      font: ${isHighlighted ? theme.my.font.nav2 : theme.my.font.nav1};
-
-      transition: font 0.3s;
-
-      ${isTitle &&
-      css`
-        font-weight: 800;
-      `};
-    }
-  `,
-);
-
-export const ListItem = styled.section`
-  display: flex;
-
-  width: 100%;
-
-  overflow: hidden;
-`;
-
-type ArrowDownIconProps = {
-  isExpanded: boolean;
-  isVisible: boolean;
-};
-export const ArrowDownIcon = styled(
-  ArrowDropDownIcon,
-  shouldNotForwardPropsWithKeys<ArrowDownIconProps>(['isExpanded', 'isVisible']),
-)<ArrowDownIconProps>(
-  ({ isExpanded, isVisible, theme }) => css`
-    color: ${isExpanded ? theme.my.colors.primitives.common.white : theme.my.colors.primitives.darkNavy[300]};
-
-    opacity: ${isVisible ? 1 : 0};
-
-    transform: rotate(${isExpanded ? 180 : 0}deg);
-
-    transition:
-      transform 0.3s,
-      color 0.3s,
-      opacity 0.3s;
-  `,
-);
-
-type MenuListProps = {
-  elevation: number;
-};
-export const MenuList = styled(MuiMenuList, shouldNotForwardPropsWithKeys<MenuListProps>(['elevation']))<MenuListProps>`
-  padding-top: 0;
-  padding-bottom: 0;
-
-  overflow: auto;
-
-  background-color: ${({ elevation, theme }) =>
-    [
-      theme.my.colors.primitives.darkNavy[900],
-      theme.my.colors.primitives.darkNavy[800],
-      theme.my.colors.primitives.darkNavy[700],
-    ][elevation]};
-  border-radius: ${({ elevation, theme }) => elevation === 1 && theme.my.radius.md};
-`;
-
-type ActiveMenuItemIndicatorProps = {
-  visible: boolean;
-  isMenuOpen: boolean;
-};
-export const ActiveMenuItemIndicator = styled(
-  'div',
-  shouldNotForwardPropsWithKeys<ActiveMenuItemIndicatorProps>(['visible', 'isMenuOpen']),
-)<ActiveMenuItemIndicatorProps>(
-  ({ theme, visible, isMenuOpen }) => css`
-    display: inline-block;
-
-    width: ${isMenuOpen ? theme.my.spacing.xxxs : 0};
-    height: 1rem;
-
-    margin-right: ${theme.my.spacing.xxs};
-
-    background-color: transparent;
-    border-radius: ${theme.my.radius.sm};
-
-    transition: 0.3s;
-    ${visible &&
-    css`
-      background-color: ${theme.my.colors.secondary.main};
-    `};
-  `,
-);

package/src/components/PageWithMenuLayout/MenuSelect/index.tsx

@@ -1,78 +0,0 @@
-import { useState } from 'react';
-
-import { Fade } from '@mui/material';
-import useResizeObserver from 'use-resize-observer';
-
-import * as Styled from './styles';
-
-type Props = {
-  isExpanded: boolean;
-  renderMenuItems: (params: { closeMenu: () => void }) => React.ReactElement[];
-  startIcon?: React.ReactNode;
-  selectedOptionText?: string;
-  menuPosition?: 'top' | 'bottom';
-};
-
-export const MenuSelect: React.FC<Props> = ({
-  isExpanded,
-  renderMenuItems,
-  startIcon,
-  selectedOptionText,
-  menuPosition = 'bottom',
-}) => {
-  const openMenu: React.MouseEventHandler<HTMLElement> = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const closeMenu = () => {
-    setAnchorEl(undefined);
-  };
-  const [anchorEl, setAnchorEl] = useState<HTMLElement>();
-  const isMenuOpen = Boolean(anchorEl);
-
-  const menuItems = renderMenuItems({ closeMenu });
-
-  const { height: bodyHeight } = useResizeObserver({ ref: document.body });
-
-  return (
-    <>
-      <Styled.SelectorButton
-        isMenuExpanded={isExpanded}
-        variant="outlined"
-        aria-haspopup="true"
-        disableElevation={true}
-        onClick={openMenu}
-        endIcon={<Styled.UnfoldMoreIcon />}
-        fullWidth={true}
-        startIcon={startIcon}
-        disabled={!menuItems.length}
-      >
-        <Fade in={isExpanded}>
-          <Styled.SelectedOptionText>{selectedOptionText}</Styled.SelectedOptionText>
-        </Fade>
-      </Styled.SelectorButton>
-
-      <Styled.Menu
-        anchorEl={anchorEl}
-        open={isMenuOpen}
-        onClose={closeMenu}
-        sx={{ top: menuPosition === 'top' ? -4 : 4 }}
-        slotProps={{
-          paper: {
-            style: {
-              maxHeight:
-                anchorEl && bodyHeight ? bodyHeight - anchorEl?.getBoundingClientRect().bottom - 16 : undefined,
-            },
-          },
-        }}
-        anchorOrigin={
-          menuPosition === 'top' ? { horizontal: 'left', vertical: 'top' } : { horizontal: 'left', vertical: 'bottom' }
-        }
-        transformOrigin={
-          menuPosition === 'top' ? { horizontal: 'left', vertical: 'bottom' } : { horizontal: 'left', vertical: 'top' }
-        }
-      >
-        {menuItems}
-      </Styled.Menu>
-    </>
-  );
-};

package/src/components/PageWithMenuLayout/MenuSelect/styles.ts

@@ -1,97 +0,0 @@
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import MuiUnfoldMoreIcon from '@mui/icons-material/UnfoldMoreRounded';
-import Button, { buttonClasses } from '@mui/material/Button';
-import MuiMenu, { menuClasses } from '@mui/material/Menu';
-
-import { shouldNotForwardPropsWithKeys } from '../../../utils/shouldNotForwardPropsWithKeys';
-
-type SelectorButtonProps = {
-  isMenuExpanded: boolean;
-};
-export const SelectorButton = styled(
-  Button,
-  shouldNotForwardPropsWithKeys<SelectorButtonProps>(['isMenuExpanded']),
-)<SelectorButtonProps>(
-  ({ theme, isMenuExpanded, disabled }) => css`
-    display: ${disabled && 'none'};
-
-    justify-content: flex-start;
-
-    min-width: 0;
-    height: 2.375rem;
-
-    padding-right: calc(${theme.my.spacing.xxxs} - 0.0625rem);
-    padding-left: calc(${theme.my.spacing.xxxs} - 0.0625rem);
-
-    text-overflow: ellipsis;
-
-    color: ${theme.my.colors.primitives.common.white};
-
-    white-space: nowrap;
-
-    border-radius: ${theme.my.radius.md};
-
-    transition:
-      height 0.3s,
-      padding 0.3s;
-
-    :hover {
-      &.${buttonClasses.outlined} {
-        border-color: ${theme.my.colors.primitives.common.white};
-      }
-    }
-
-    ${isMenuExpanded &&
-    css`
-      height: 3rem;
-
-      padding-right: ${theme.my.spacing.xxs};
-      padding-left: ${theme.my.spacing.xxs};
-    `}
-
-    .${buttonClasses.startIcon} {
-      width: 1.75rem;
-      height: 1.75rem;
-
-      margin-right: 0;
-      margin-left: 0;
-
-      transition: 0.3s;
-
-      ${isMenuExpanded &&
-      css`
-        width: 2rem;
-        height: 2rem;
-      `}
-    }
-
-    .${buttonClasses.endIcon} {
-      margin-right: ${theme.my.spacing.xxxs};
-    }
-  `,
-);
-
-export const SelectedOptionText = styled.span`
-  flex: 1;
-
-  padding-left: ${({ theme }) => theme.my.spacing.xxs};
-
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  font: ${({ theme }) => theme.my.font.highlight3};
-
-  text-align: left;
-`;
-
-export const Menu = styled(MuiMenu)`
-  .${menuClasses.root} {
-    padding: 0;
-  }
-`;
-
-export const UnfoldMoreIcon = styled(MuiUnfoldMoreIcon)`
-  width: 1rem;
-  height: 1rem;
-`;

package/src/components/PageWithMenuLayout/MultiSubscriptionsMenuItems/ConsolidationIcon.tsx

@@ -1,6 +0,0 @@
-const ConsolidationIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 36 36" {...props}>
-    <path d="M9.8 18.8h16.4v3.08h1.6V17.2h-9V14h-1.6v3.2h-9v4.68h1.6zM14 23H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2M4 31v-6h10v6ZM32 23H22a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2m-10 8v-6h10v6ZM13 13h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H13a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2m0-8h10v6H13Z" />
-  </svg>
-);
-export default ConsolidationIcon;

package/src/components/PageWithMenuLayout/MultiSubscriptionsMenuItems/MultiSubscriptionsMenuItems.tsx

@@ -1,120 +0,0 @@
-import { Fragment, useEffect, useState } from 'react';
-
-import {
-  Business as BusinessIcon,
-  ExpandLess as ExpandLessIcon,
-  ExpandMore as ExpandMoreIcon,
-} from '@mui/icons-material';
-import { Collapse, Divider, List, ListItemIcon, MenuItem, Tooltip } from '@mui/material';
-import { AvailableCompany, AvailableTenant } from '@smartbooks-ai/api-client';
-
-import ConsolidationIcon from './ConsolidationIcon';
-import * as Styled from './styles';
-
-import { assertNever } from '../../../utils/assertNever';
-
-type Props = {
-  selectedTenant?: AvailableTenant;
-  tenants: AvailableTenant[];
-  onCompanySelected: (company: AvailableCompany) => void;
-  selectedCompanyCode: string | undefined;
-};
-
-export const MultiSubscriptionsMenuItems: React.FC<Props> = ({
-  selectedTenant,
-  tenants,
-  onCompanySelected,
-  selectedCompanyCode,
-}) => {
-  const [openTenants, setOpenTenants] = useState<string[]>([]);
-
-  const toggleTenant = (tenantCode: string) => {
-    if (openTenants.includes(tenantCode)) {
-      setOpenTenants(openTenants.filter((a) => a !== tenantCode));
-    } else {
-      setOpenTenants([...openTenants, tenantCode]);
-    }
-  };
-
-  useEffect(() => {
-    if (selectedTenant) {
-      setOpenTenants([selectedTenant.code]);
-    }
-  }, [selectedTenant]);
-
-  const sortedTenants = tenants.toSorted((a, b) => (a.description || '').localeCompare(b.description || ''));
-
-  const [highlightedCompanyMenuItem, setHighlightedCompanyMenuItem] = useState<HTMLElement | null>(null);
-
-  return (
-    <>
-      {sortedTenants.map((tenant) => {
-        const sortedCompanies = tenant.companies.toSorted((a, b) =>
-          a.companyType === 'consolidation' && b.companyType !== 'consolidation'
-            ? -1
-            : a.companyType !== 'consolidation' && b.companyType === 'consolidation'
-              ? 1
-              : (a.description || '').localeCompare(b.description || ''),
-        );
-        const isOpen = tenants.length === 1 || openTenants.includes(tenant.code);
-
-        return (
-          <Fragment key={tenant.code}>
-            {tenants.length > 1 && (
-              <MenuItem onClick={() => toggleTenant(tenant.code)}>
-                {tenant.description}
-
-                <ListItemIcon sx={{ marginLeft: '1em' }}>
-                  {isOpen ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
-                </ListItemIcon>
-              </MenuItem>
-            )}
-            <Collapse
-              in={isOpen}
-              timeout="auto"
-              unmountOnExit={true}
-              onEntered={() => {
-                if (tenant.code === selectedTenant?.code)
-                  highlightedCompanyMenuItem?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-              }}
-            >
-              <List component="div" disablePadding={true}>
-                <Divider />
-
-                {sortedCompanies.map((company) => (
-                  <MenuItem
-                    key={company.code}
-                    onClick={() => onCompanySelected(company)}
-                    selected={company.code === selectedCompanyCode}
-                    autoFocus={company.code === selectedCompanyCode}
-                    ref={(el) => {
-                      if (company.code === selectedCompanyCode) setHighlightedCompanyMenuItem(el);
-                    }}
-                  >
-                    <ListItemIcon>
-                      {company.companyType === 'consolidation' ? (
-                        <Tooltip title="Consolidation" disableInteractive={true}>
-                          <Styled.IconContainer>
-                            <ConsolidationIcon fontSize="inherit" />
-                          </Styled.IconContainer>
-                        </Tooltip>
-                      ) : company.companyType === 'regular' ? (
-                        <Styled.IconContainer>
-                          <BusinessIcon fontSize="inherit" />
-                        </Styled.IconContainer>
-                      ) : (
-                        assertNever(company.companyType)
-                      )}
-                    </ListItemIcon>
-
-                    {company.description}
-                  </MenuItem>
-                ))}
-              </List>
-            </Collapse>
-          </Fragment>
-        );
-      })}
-    </>
-  );
-};

package/src/components/PageWithMenuLayout/MultiSubscriptionsMenuItems/consolidation.svg

@@ -1,8 +0,0 @@
-<svg fill="currentColor" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-  <polygon
-    points="9.8 18.8 26.2 18.8 26.2 21.88 27.8 21.88 27.8 17.2 18.8 17.2 18.8 14 17.2 14 17.2 17.2 8.2 17.2 8.2 21.88 9.8 21.88 9.8 18.8">
-  </polygon>
-  <path d="M14,23H4a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2H14a2,2,0,0,0,2-2V25A2,2,0,0,0,14,23ZM4,31V25H14v6Z"></path>
-  <path d="M32,23H22a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2H32a2,2,0,0,0,2-2V25A2,2,0,0,0,32,23ZM22,31V25H32v6Z"></path>
-  <path d="M13,13H23a2,2,0,0,0,2-2V5a2,2,0,0,0-2-2H13a2,2,0,0,0-2,2v6A2,2,0,0,0,13,13Zm0-8H23v6H13Z"></path>
-</svg>

package/src/components/PageWithMenuLayout/MultiSubscriptionsMenuItems/index.ts

@@ -1 +0,0 @@
-export { MultiSubscriptionsMenuItems } from './MultiSubscriptionsMenuItems';

package/src/components/PageWithMenuLayout/MultiSubscriptionsMenuItems/styles.ts

@@ -1,10 +0,0 @@
-import styled from '@emotion/styled';
-
-export const IconContainer = styled.div`
-  position: relative;
-
-  width: 1.25rem;
-  height: 1.25rem;
-
-  font-size: 1.25rem;
-`;

package/src/components/PageWithMenuLayout/PageWithMenuLayout.tsx

@@ -1,103 +0,0 @@
-import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
-import Fade from '@mui/material/Fade';
-import MenuList from '@mui/material/MenuList';
-import { AvailableCompany } from '@smartbooks-ai/api-client';
-import { createPortal } from 'react-dom';
-import { NavLink, Outlet } from 'react-router';
-
-import LogoHeaderImage from './LogoHeaderImage';
-import LogoHeaderText from './LogoHeaderText';
-import { AppSelect, MenuItemWithChildren, UserProfileSelect } from './index';
-import * as Styled from './styles';
-import { MenuStructure } from './types';
-import { useMenuToggle } from './useMenuToggle';
-
-import { UserProfile } from '../../security/UserProfile';
-
-export type PageWithMenuLayoutProps = {
-  resolvedCompanyCode?: string;
-  topMenu?: MenuStructure;
-  bottomMenu: MenuStructure;
-  profile: UserProfile | null;
-  tenantCode?: string;
-  switchToCompany: (company: AvailableCompany) => Promise<void>;
-  logout: () => void;
-  additionalOutletContent?: React.ReactNode;
-};
-
-export const PageWithMenuLayout: React.FC<PageWithMenuLayoutProps> = ({
-  resolvedCompanyCode,
-  topMenu,
-  bottomMenu,
-  profile,
-  tenantCode,
-  switchToCompany,
-  logout,
-  additionalOutletContent,
-}) => {
-  const { isExpanded, openMenu, toggleIsExpanded } = useMenuToggle();
-
-  return (
-    <>
-      <Styled.LockMenuButton onClick={toggleIsExpanded} isExpanded={isExpanded}>
-        <KeyboardArrowLeftIcon fontSize="inherit" />
-      </Styled.LockMenuButton>
-
-      {createPortal(
-        <Styled.Drawer open={isExpanded} variant="permanent">
-          <Styled.Header>
-            <Styled.LogoContainer>
-              <NavLink to="/">
-                <LogoHeaderImage height={24} />
-              </NavLink>
-            </Styled.LogoContainer>
-
-            <Fade in={isExpanded}>
-              <NavLink to="/">
-                <LogoHeaderText height={12} />
-              </NavLink>
-            </Fade>
-          </Styled.Header>
-          <AppSelect
-            tenantCode={tenantCode}
-            companyCode={resolvedCompanyCode}
-            isExpanded={isExpanded}
-            profile={profile}
-            onCompanyClicked={switchToCompany}
-          />
-
-          <Styled.TopMenuList>
-            {topMenu?.map((firstLevelItem) => (
-              <MenuItemWithChildren
-                key={firstLevelItem.title}
-                menuItem={firstLevelItem}
-                isMenuOpen={isExpanded}
-                openMenu={openMenu}
-              />
-            ))}
-          </Styled.TopMenuList>
-
-          <MenuList disablePadding={true}>
-            {bottomMenu?.map((firstLevelItem) => (
-              <MenuItemWithChildren
-                key={firstLevelItem.title}
-                menuItem={firstLevelItem}
-                isMenuOpen={isExpanded}
-                openMenu={openMenu}
-              />
-            ))}
-          </MenuList>
-
-          <UserProfileSelect isTextVisible={isExpanded} profile={profile} logout={logout} />
-        </Styled.Drawer>,
-        document.body,
-      )}
-
-      <Styled.Main isLocked={isExpanded}>
-        <Outlet />
-
-        {additionalOutletContent}
-      </Styled.Main>
-    </>
-  );
-};

package/src/components/PageWithMenuLayout/UserProfileSelect/index.tsx

@@ -1,64 +0,0 @@
-import { useState } from 'react';
-
-import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
-import { Fade } from '@mui/material';
-import MenuItem from '@mui/material/MenuItem';
-import { GlobalRole } from '@smartbooks-ai/api-client';
-
-import * as Styled from './styles';
-
-import { useIsAuthorized } from '../../../hooks/useIsAuthorized';
-import { useToggle } from '../../../hooks/useToggle';
-import { UserProfile } from '../../../security/ProfileContext';
-import * as MenuItemWithChildrenStyled from '../MenuItemWithChildren/styles';
-
-type Props = {
-  isTextVisible: boolean;
-  profile: UserProfile | null;
-  logout: () => void;
-};
-
-export const UserProfileSelect: React.FC<Props> = ({ isTextVisible, profile, logout }) => {
-  const { value: isMenuOpen, switchOn: openMenu, switchOff: closeMenu } = useToggle();
-  const getIsAuthorized = useIsAuthorized();
-
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-
-  return (
-    <>
-      <MenuItemWithChildrenStyled.MenuItem
-        isTitle={false}
-        isMenuOpen={isTextVisible}
-        ref={setAnchorEl}
-        isHighlighted={false}
-        onClick={openMenu}
-      >
-        <MenuItemWithChildrenStyled.ListItemIcon>
-          <AccountCircleRoundedIcon fontSize="small" />
-        </MenuItemWithChildrenStyled.ListItemIcon>
-
-        <Fade in={isTextVisible}>
-          <MenuItemWithChildrenStyled.ListItemText elevation={0} isHighlighted={false} isTitle={false}>
-            {profile?.displayName ?? 'My account'}
-          </MenuItemWithChildrenStyled.ListItemText>
-        </Fade>
-
-        <MenuItemWithChildrenStyled.ArrowDownIcon isExpanded={isMenuOpen} isVisible={isTextVisible} />
-      </MenuItemWithChildrenStyled.MenuItem>
-
-      <Styled.Menu
-        anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
-        transformOrigin={{ horizontal: 'left', vertical: 'bottom' }}
-        anchorEl={anchorEl}
-        open={isMenuOpen}
-        onClose={closeMenu}
-      >
-        <MenuItem disabled={true}>{profile?.email}</MenuItem>
-        {getIsAuthorized({ globalRole: GlobalRole.GlobalAdmin }) && (
-          <MenuItem onClick={() => window.open('/ac/ga', '_blank')}>System admin</MenuItem>
-        )}
-        <MenuItem onClick={logout}>Logout</MenuItem>
-      </Styled.Menu>
-    </>
-  );
-};

package/src/components/PageWithMenuLayout/UserProfileSelect/styles.ts

@@ -1,8 +0,0 @@
-import styled from '@emotion/styled';
-import MuiMenu, { menuClasses } from '@mui/material/Menu';
-
-export const Menu = styled(MuiMenu)`
-  .${menuClasses.root} {
-    padding: 0;
-  }
-`;

package/src/components/PageWithMenuLayout/index.ts

@@ -1,8 +0,0 @@
-export { AppSelect } from './AppSelect';
-export { MenuSelect } from './MenuSelect';
-export { MultiSubscriptionsMenuItems } from './MultiSubscriptionsMenuItems';
-export { MenuItemWithChildren } from './MenuItemWithChildren/MenuItemWithChildren';
-export { UserProfileSelect } from './UserProfileSelect';
-export { PageWithMenuLayout } from './PageWithMenuLayout';
-export { default as LogoHeaderImage } from './LogoHeaderImage';
-export { default as LogoHeaderText } from './LogoHeaderText';