How to use the @artsy/palette.space function in @artsy/palette

{showMobileMenu && (
        <>
           toggleMobileNav(false)} />
          
        
      )}
    
  )
})

export const NavBarHeight = space(6) - 1 // border offset

const NavSection = ({ children, ...props }) => (
  
    {children}
  
)

const NavBarContainer = styled(Flex)`
  background-color: ${color("white100")};
  border-bottom: 1px solid ${color("black10")};
  position: relative;
  z-index: 3;
  height: ${NavBarHeight}px;
`

// FIXME: This needs to be cleaned up once we get proper icons

${props =>
    props.isFixed &&
    `
    position: absolute;
    bottom: 0;
    right: ${space(4)}px;
    left: ${props.hasImage ? "calc(50% + 40px)" : space(4) + "px"};
    background: white;
    border-top: 1px solid ${color("black10")};
  `};

return (
      
        
        
          {article.thumbnail_title}
        
      
    )
  }
}

export const ArticleLink = styled.a`
  text-decoration: none;
  display: flex;
  justify-content: left;
  margin-bottom: ${space(2)}px;
`

const ArticleImage = styled.img`
  min-width: 80px;
  height: 55px;
  margin-right: ${space(1)}px;
`

interface ShowMoreMetadataForFairs {
  sponsoredContent?: { pressReleaseUrl?: string; activationText?: string }
}

export const shouldShowFairBMWArtActivationLink = (data: ShowMoreMetadataForFairs) => {
  return data.sponsoredContent
}
const Logo = styled(Image)`
  height: 34;
  width: 34;
`
const PressReleaseContainer = styled(Flex)`
  flex-direction: row;
  margin-top: ${space(9)};
  padding-left: ${space(2)};
  padding-right: ${space(2)};
  margin-bottom: ${space(2)};
  align-items: center;
`

@screenTrack(props => ({
  context_screen: Schema.PageNames.BMWFairActivation,
  context_screen_owner_type: Schema.OwnerEntityTypes.Fair,
  context_screen_owner_slug: props.fair.slug,
  context_screen_owner_id: props.fair.internalID,
}))
export class FairBMWArtActivation extends React.Component {
  state = {
    sections: [],
  }

render() {
    const { item } = this.props
    const boxWidth = Dimensions.get("window").width - 62 - space(4) - space(1)
    const fairImage = item.image ? item.image.url : null
    return (
       this.handleTap(item)}>
        
          
            
          
          
            {!!item.name && (
              
                {item.name}
              
            )}
            {!!item.counts &&
              !!item.counts.partners && (

return hasOne ? (
      show && this.renderItem({ item: show }, true)
    ) : (
      <>
        
          {`${currentPage} of ${shows.length}`}
        
         (this.list = c as any)}
          data={shows}
          style={{ marginHorizontal: "auto" }}
          renderItem={this.renderItem}
          keyExtractor={item => item.id}
          onScroll={this.onScroll}
          showsHorizontalScrollIndicator={false}
          snapToInterval={this.cardWidth + space(1)}
          contentContainerStyle={{ paddingLeft: space(0.5), paddingRight: space(2) + space(0.3) }}
          scrollEventThrottle={299}
          directionalLockEnabled={true}
          overScrollMode="always"
          snapToAlignment="start"
          decelerationRate="fast"
          horizontal
        />
      
    )
  }
}

${pMedia.xs`
    min-width: 40px;
    min-height: 40px;
  `};
`

const AuthorContainer = styled(Flex)<{ color: string }>`
  color: ${props => props.color};

  a {
    color: ${props => props.color};
  }
`

const AuthorInfo = styled.span`
  margin-right: ${space(2)}px;
`

const TwitterHandle = styled.a`
  text-decoration: none;
  white-space: nowrap;

  ${Icon} {
    vertical-align: middle;
    margin: 0;
  }
`

`

export const LayoutButton = styled(Flex)`
  padding: 15px ${space(2)}px ${space(1)}px;
  border-right: 1px solid ${color("black30")};
  background: ${color("white100")};
  cursor: pointer;
  flex-direction: column;
  align-items: center;

  &:last-child {
    border-right: none;
  }

  svg {
    margin: 0 ${space(1)}px ${space(1)}px;
  }
`

const getControlsColor = hero => {
  const { type, url } = hero

  if (hero && type === "fullscreen" && url && url.length) {
    return "white"
  } else {
    return "black"
  }
}

all bidders. By bidding in an auction on Artsy, you are accepting
            our <a href="/conditions-of-sale">Conditions of Sale</a>. Please
            read them carefully before bidding.
          
        
      
    
  )
}

const AuctionWrapper = styled(Box)`
  max-width: 600px;
  margin: ${space(4)}px auto;
  padding: ${space(2)}px;
  ${media.xs`
    margin: ${space(1)}px auto;
  `};
`

const { width: windowWidth } = Dimensions.get("window")

const ImageView = styled(OpaqueImageView)<{ isFirst: boolean; aspectRatio: number }>`
  height: ${ITEM_HEIGHT};
  margin-top: ${p => (p.isFirst ? 150 : 0)};
  ${p =>
    p.isFirst &&
    `
      height: 200;
      width: ${windowWidth - space(2) - 80};
    `};
`

const PageList = styled(ScrollView)`
  height: ${ITEM_HEIGHT}px;
  padding-left: ${space(2)};
`