function directionalProperty(property) {
    for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      values[_key - 1] = arguments[_key];
    }
    //  prettier-ignore
    var firstValue = values[0],
      _values$ = values[1],
      secondValue = _values$ === void 0 ? firstValue : _values$,
      _values$2 = values[2],
      thirdValue = _values$2 === void 0 ? firstValue : _values$2,
      _values$3 = values[3],
      fourthValue = _values$3 === void 0 ? secondValue : _values$3;
    var valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
    return generateStyles(property, valuesWithDefaults);
  }
Enables shorthand for direction-based properties. It accepts a property (hyphenated or camelCased) and up to four values that map to top, right, bottom, and left, respectively. You can optionally pass an empty string to get only the directional values as properties. You can also optionally pass a null argument for a directional value to ignore it.
@example
// Styles as object usage
const styles = {
  ...directionalProperty('padding', '12px', '24px', '36px', '48px')
}

// styled-components usage
const div = styled.div`
  ${directionalProperty('padding', '12px', '24px', '36px', '48px')}
`

// CSS as JS Output

div {
  'paddingTop': '12px',
  'paddingRight': '24px',
  'paddingBottom': '36px',
  'paddingLeft': '48px'
}