hunk.code_window:   return {
       position: 'absolute',
       left: left ? left : horizontal ? '50%' : 'auto',
       top: top ? top : vertical ? '50%' : 'auto',
       right: right ? right : horizontal ? 'auto' : 'auto',
       bottom: bottom ? bottom : vertical ? 'auto' : 'auto',
       transform: `translate(${horizontal ? '-50%' : '0'}, ${
         vertical ? '-50%' : '0'
       })`,
     };
   };
  
hunk.labels: keep keep keep keep replace replace keep keep keep keep keep
hunk.after_edit:     right: right ? right : 'auto',
       bottom: bottom ? bottom : 'auto',
  
hunk.file_path: packages/component/src/styles/helper.ts
hunk.type: replace
file: import React, { PropsWithChildren, ReactNode, useState } from 'react';
  import {
    StyledHeader,
    StyledHeaderRightSide,
    StyledHeaderContainer,
    StyledBrowserWarning,
    StyledCloseButton,
  } from './styles';
  import { CloseIcon } from '@blocksuite/icons';
  import { useWarningMessage, shouldShowWarning } from './utils';
  import EditorOptionMenu from './header-right-items/EditorOptionMenu';
  import TrashButtonGroup from './header-right-items/TrashButtonGroup';
  import ThemeModeSwitch from './header-right-items/theme-mode-switch';
  import SyncUser from './header-right-items/SyncUser';
  
  const BrowserWarning = ({
    show,
    onClose,
  }: {
    show: boolean;
    onClose: () => void;
  }) => {
    return (
      <StyledBrowserWarning show={show}>
        {useWarningMessage()}
        <StyledCloseButton onClick={onClose}>
          <CloseIcon />
        </StyledCloseButton>
      </StyledBrowserWarning>
    );
  };
  
  type HeaderRightItemNames =
    | 'editorOptionMenu'
    | 'trashButtonGroup'
    | 'themeModeSwitch'
    | 'syncUser';
  
  const HeaderRightItems: Record<HeaderRightItemNames, ReactNode> = {
    editorOptionMenu: <EditorOptionMenu key="editorOptionMenu" />,
    trashButtonGroup: <TrashButtonGroup key="trashButtonGroup" />,
    themeModeSwitch: <ThemeModeSwitch key="themeModeSwitch" />,
    syncUser: <SyncUser key="syncUser" />,
  };
  
  export const Header = ({
    rightItems = ['syncUser', 'themeModeSwitch'],
    children,
  }: PropsWithChildren<{ rightItems?: HeaderRightItemNames[] }>) => {
    const [showWarning, setShowWarning] = useState(shouldShowWarning());
    return (
      <StyledHeaderContainer hasWarning={showWarning}>
        <BrowserWarning
          show={showWarning}
          onClose={() => {
            setShowWarning(false);
          }}
        />
        <StyledHeader hasWarning={showWarning} data-testid="editor-header-items">
          {children}
          <StyledHeaderRightSide>
            {rightItems.map(itemName => {
              return HeaderRightItems[itemName];
            })}
          </StyledHeaderRightSide>
        </StyledHeader>
      </StyledHeaderContainer>
    );
  };
  
  export default Header;
  