How to use the @commercetools-uikit/design-system.customProperties.spacingXs function in @commercetools-uikit/design-system

const CalendarHeader = props => {
  const intl = useIntl();
  // https://codepen.io/mudassir0909/pen/eIHqB

  // we prevent all our defined onClicks inside of the CalendarHeader
  // from blurring our input.
  const onMouseDown = React.useCallback(event => {
    event.preventDefault();
  }, []);
  return (
    <div>
      
        
          }
          /&gt;
        
        </div>

const getOffsetMargin = ({ placement }) => {
  const position = (placement && placement.split('-')[0]) || '';
  switch (position) {
    case 'left':
    case 'right':
      return `0 ${vars.spacingXs}`;
    case 'top':
    case 'bottom':
      return `${vars.spacingXs} 0`;
    default:
      return '';
  }
};

const getTextareaStyles = (props, theme) => {
  const baseStyles = [
    getInputStyles(props, theme),
    css`
      padding: ${vars.spacingXs} ${vars.spacingS};
      line-height: ${sizeInputLineHeight};
      flex: auto;
      word-break: break-all;
      white-space: pre-wrap;
      resize: vertical;
    `,
  ];
  return baseStyles;
};

span {
            color: ${props.isDisabled
              ? overwrittenVars.colorNeutral
              : getTextColor(props.tone, false, overwrittenVars)};
          }

          svg * {
            fill: ${props.isDisabled
              ? overwrittenVars.colorNeutral
              : getTextColor(props.tone, false, overwrittenVars)};
          }

          * + span,
          * + svg {
            margin-left: ${vars.spacingXs};
          }

          ${!props.isDisabled
            ? `
            &:hover,
            &:focus {
              span {
                color: ${getTextColor(props.tone, true, overwrittenVars)};
              }
              svg * {
                fill: ${getTextColor(props.tone, true, overwrittenVars)};
              }
            }`
            : ''}
        `;
      }}

{(() => {
            if (this.state.hasNetworkError)
              return (
                <div>
                  
                </div>
              );

            if (
              this.state.results.length === 0 &amp;&amp;
              this.state.searchText.trim().length &gt; 0
            )
              return (

const getCalendarIconContainerStyles = (props, state) => {
  const baseIconStyles = css`
    align-items: center;
    box-sizing: border-box;
    background-color: ${vars.backgroundColorForInput};
    border: 1px solid ${vars.borderColorForInput};
    height: ${vars.sizeHeightInput};
    display: flex;
    padding: ${vars.spacingXs};
    border-top-right-radius: ${vars.borderRadiusForInput};
    border-bottom-right-radius: ${vars.borderRadiusForInput};
    outline: 0;
    transition: color ${vars.transitionStandard},
      border-color ${vars.transitionStandard};
    &:active,
    &:focus {
      border-color: ${vars.borderColorForInputWhenFocused};
    }
  `;
  if (props.isDisabled) {
    return [
      baseIconStyles,
      css`
        cursor: not-allowed;
        background-color: ${vars.backgroundColorForInputWhenDisabled};

isToggled={props.isToggled}
      isDisabled={props.isDisabled}
      css={[
        css`
          display: flex;
          align-items: center;
          padding: 0 ${vars.spacingM};
          height: ${vars.bigButtonHeight};
        `,
      ].concat(containerStyles)}
    >
      
        {Boolean(props.iconLeft) && (
          <span>
            {React.cloneElement(props.iconLeft, {
              color: getIconColor(props),
            })}
          </span>
        )}
        <span>{props.label}</span>
      
    
  );
};

const getHighPrecisionWrapperStyles = ({ isDisabled }) => css`
  position: absolute;
  top: 0;
  right: 0;
  margin-right: ${vars.spacingXs};
  height: 100%;
  display: flex;
  align-items: center;
  cursor: ${isDisabled ? 'not-allowed' : 'default'};
  justify-content: center;
`;

>
    
      <span>
        {React.cloneElement(props.iconLeft, {
          size: 'big',
          color: props.isDisabled ? 'neutral60' : 'solid',
        })}
      </span>

const getPadding = scale => {
  switch (scale) {
    case 'xs':
      return vars.spacingXs;
    case 's':
      return vars.spacingS;
    case 'm':
      return vars.spacingM;
    case 'l':
      return vars.spacingL;
    case 'xl':
      return vars.spacingXl;
    default:
      return 0;
  }
};