How to use the @commercetools-frontend/ui-kit.customProperties.spacingXs function in @commercetools-frontend/ui-kit

box-sizing: border-box;
  font-size: 8pt;
  font-family: monospace;
  color: ${customProperties.colorSurface};
`;

const PropLabel = styled.span`
  font-weight: bold;
  padding: 0 ${customProperties.spacingXs};
  min-width: 140px;
  display: inline-block;
  box-sizing: border-box;
`;

const PropValue = styled.span`
  padding: 0 ${customProperties.spacingXs};
  box-sizing: border-box;
`;

const Box = styled.div`
  background-color: ${getThemedProperty('colorSurface')};
`;

const Pill = props => {
  const value = (() => {
    if (React.isValidElement(props.value)) return 'React Element';
    if (
      Array.isArray(props.value) &&
      props.value.every(element => React.isValidElement(element))
    )
      return '[React Element]';
    try {

{({ css: makeClassName }) => (
        
      )}