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 { MuiAvatar } from '@affine/component';
  import { styled } from '@affine/component';
  import { StyledPopperContainer } from '@affine/component';
  
  export const SelectorWrapper = styled('div')({
    width: '100%',
    height: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    ':hover': {
      cursor: 'pointer',
    },
  });
  
  export const Avatar = styled(MuiAvatar)({
    height: '28px',
    width: '28px',
  });
  
  export const WorkspaceName = styled('span')(({ theme }) => {
    return {
      marginLeft: '12px',
      lineHeight: 1,
      fontSize: '18px',
      fontWeight: 500,
      color: theme.colors.iconColor,
    };
  });
  
  export const SelectorPopperContainer = styled(StyledPopperContainer)(
    ({ theme }) => {
      return {
        width: '334px',
        boxShadow: theme.shadow.tooltip,
        padding: '24px 12px',
        backgroundColor: theme.colors.pageBackground,
        fontSize: theme.font.xs,
      };
    }
  );
  