How to use the polished.padding function in polished

if (filter && filter.length > 2) {
      // eslint-disable-next-line no-shadow
      const nextContacts = contacts.filter(({firstName, lastName, address}) =>
        [firstName, lastName, address].some(x =>
          x.toLowerCase().includes(filter.toLowerCase())
        )
      )
      setFilteredContacts(nextContacts)
    } else {
      setFilteredContacts(contacts)
    }
  }, [contacts, filter])

  if (filteredContacts.length === 0) {
    return (
      
    )
  }

  return (
    
      {filteredContacts.map((contact, idx) => (
         {
            setCurrentIdx(idx)
            if (onSelectContact) {
              onSelectContact(contact)

`;

const Absolute = styled.div<{ height: number }>`
  position: absolute;
  bottom: ${props => props.height}px;
  display: flex;
  flex-direction: column;
`;

const Box = styled.div`
  border: 1px solid #bac9d4;
  background: ${props => props.theme.controlBackground};
  border-radius: ${borderRadius};
  box-shadow: 0 0.1875em 0.375em 0 #00000012,
    0 0.4375em 0.625em 0.4375em #32325d1a;
  ${padding(scale(-1))};
`;

const Triangle = styled.img`
  /* stylelint-disable unit-whitelist */
  margin-top: -1px;
  width: 29px;
  height: 15px;
  /* stylelint-enable */
`;

Triangle.defaultProps = { src: triangle };

export class Tooltip extends Component<
  {
    tooltip: ReactNode;
    children: ReactNode;

return (
    
      
        
          
          
        
        {hasAnswers ? (
          
            Waiting for the end of {currentPeriod}
          
        ) : (

export function TranslateButon({text}) {
  return (
    
      
          global.openExternal(
            `https://translate.google.com/#view=home&op=translate&sl=auto&tl=${
              global.locale
            }&text=${encodeURIComponent(text)}`
          )
        }
      >
        
          
          
          
        
      
    
  )
}

import { borderRadius as borderRadiusHelper, padding } from 'polished';

import styled from '../../styled-components';
import { borderRadius, scale } from '../../Theme';
import Typography from '../../Typography';

export const Option = styled(Typography)`
  cursor: pointer;
  margin: 0;
  ${padding(scale(-1), scale(1))};

  :hover {
    background-color: ${props => props.theme.optionHoverBackground};
  }

  :first-child {
    ${borderRadiusHelper('top', borderRadius)};
  }

  :last-child {
    ${borderRadiusHelper('bottom', borderRadius)};
  }
`;

export default Option;

color = theme.colors.danger
      text = 'Offline'
    } else {
      bg = syncing ? theme.colors.warning02 : theme.colors.success02
      color = syncing ? theme.colors.warning : theme.colors.success
      text = syncing ? 'Synchronizing' : 'Synchronized'
    }
  }

  return (

const shouldNext = !isLast
  return (
    
      
        
          {title}
          {desc && }
        
        {children}
      
      
        <button disabled="{isFirst}">
          Previous step
        </button>
        {shouldNext &amp;&amp; <button>Next step</button>}
        {shouldClose &amp;&amp; <button>Close</button>}
        {shouldSubmit &amp;&amp; (
          <button disabled="{isSubmitting}"> {</button>

>;

BasicButton.defaultProps = { as: 'button', type: 'button' };

export interface StyledButtonProps {
  large?: boolean;
  secondary?: boolean;
}

const StyledButton = styled(BasicButton)`
  background: ${props => !props.secondary && props.theme.primary};
  border: ${props => props.secondary && '.125em solid' + props.theme.primary};
  border-radius: ${borderRadius};
  color: ${props => (props.secondary ? props.theme.primary : 'white')};
  font-size: ${props => props.large && scale(1)};
  ${padding(scale(-1), scale(2))};
  ${transitions(
    ['opacity', 'background', 'color', 'box-shadow'],
    transitionDuration,
  )};
  user-select: none;

  :focus {
    box-shadow: ${props => props.theme.outline};
    outline: none;
  }

  &:focus,
  &:hover {
    background: ${props =>
      props.secondary ? props.theme.primary : props.theme.primaryDark};
    color: ${props => props.secondary && 'white'};

import { padding } from 'polished';
import React, { DetailedHTMLProps, HTMLAttributes } from 'react';
import {
  StyledComponentClass,
  ThemedOuterStyledProps,
} from 'styled-components';

import { Panel } from '../../atoms';
import { PanelProps } from '../../atoms/Panel/Panel';
import styled from '../../styled-components';
import Theme, { scale } from '../../Theme';
import Typography from '../../Typography';

const ActionPanelBody = styled.div`
  ${padding(scale(1), scale(2))};
`;

const ActionPanelFooter = styled(Typography)`
  background: ${props => props.theme.actionPanelBackground};
  border-top: 0.0416em solid ${props => props.theme.actionPanelBorder};
  display: block;
  padding: ${scale(1)};
  text-decoration: none;
` as StyledComponentClass<
  DetailedHTMLProps, HTMLDivElement>,
  Theme
>;

ActionPanelFooter.defaultProps = { as: 'footer' };

interface ActionPanelProps extends PanelProps {

import {
  StyledComponentClass,
  ThemedOuterStyledProps,
} from 'styled-components';

import styled from '../../styled-components';
import Theme, { borderRadius, scale, transitionDuration } from '../../Theme';
import Typography from '../../Typography';
import Icon, { icons } from '../Icon';

const InputContainer = styled.div<{ invert?: boolean }>`
  background: ${props => props.theme.controlBackground};
  border: 0.125em solid ${props => props.theme.controlBorder};
  border-radius: ${borderRadius};
  transition: border ${transitionDuration}, box-shadow ${transitionDuration};
  ${padding(scale(-1), scale(0))};
  flex-direction: ${props => (props.invert ? 'row-reverse' : 'row')};
  display: flex;
  :focus-within {
    outline: none;
    box-shadow: ${props => props.theme.outline};
  }
`;

const StyledInput = styled(Typography)`
  flex: 1;
  background: none;
  border: none;
  font-size: ${scale(0)};
  outline: none;

  ::placeholder {