How to use the polished.margin function in polished

>
      
        
          
        
        
          
            Terminate identity

return (
    
      
        Are both keywords relevant to the flip?
      
      
        
          {haveWords ? (
            
              {words.map(({name, desc}, idx) => (

setNewFirstName(e.target.value)}
        />
         setNewLastName(e.target.value)}
        />
      

      
        <button> {
            onSave(newFirstName, newLastName)
          }}
        &gt;
          Done
        </button>
      
    
  )
}

function FlipList(props) {
  return (
    
  )
}

function Hint({label, value}) {
  return (
    
      
      
    
  )
}

...margin(0, 'auto'),
          width: rem(560),
        }}
      >
        
          {hint.words &&
            hint.words.map(({name, desc}) => (
              
                {name}
                {desc}
              
            ))}
        
        
      
      

caption: 'Submit flip',
      title: `Submit flip (${composeHint(flip.hint)})`,
      desc: `Make sure it is not possible to read the shuffled images as a meaningful story?`,
      children: ,
    },
  ]

  return (
    <>
      
        
          {steps.map(({caption}, idx) => (
             setStep(idx)}
              css={{
                ...margin(0, theme.spacings.xlarge, 0, 0),
                cursor: 'pointer',
              }}
            >
              {idx <= step ? (
                
              ) : (

)
).then(plugins =>
  plugins.map(({ default: plugin }, index) => ({
    ...plugin,
    name: process.env.AVAILABLE_PLUGINS[index],
  }))
)

const Container = glamorous.h1({
  padding: 20,
})

const Box = glamorous.div({
  display: 'inline-flex',
  padding: 10,
  ...margin(5, 2, 20),
  backgroundColor: '#fff',
  borderRadius: 200,
  boxShadow: `
    0 0 0 0.5px rgba(0, 0, 0, 0.1),
    0 1px 10px rgba(0, 0, 0, 0.1)
  `,
})

const Label = glamorous.label({
  display: 'block',
})

const Hr = glamorous.div({
  height: '1px',
  marginTop: 10,
  marginBottom: 10,

function Avatar({username, size = 80}) {
  const src = username
    ? `https://robohash.org/${username}`
    : 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
  return (
    <img style="{{" height="{size}" width="{size}" alt="{username}" src="{src}">
  )
}

<label>Encrypted private key</label>
        <input style="{{" type="text" value="{key}"> setKey(e.target.value)}
        /&gt;
        <label>Password</label>
        <input style="{{" type="password" value="{password}"> setPassword(e.target.value)}
        /&gt;
        <button disabled="{!password" type="submit">
          Import
        </button>
      
    
  )
}