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

const getInputStyles = () => css`
  width: 100%;
  text-align: center;
  border: 0;
  border-top: 1px solid ${vars.colorNeutral90};
  padding: 10px 0;
  outline: 0;
  font-size: ${vars.fontSizeDefault};
  margin-top: ${vars.spacingS};
  color: ${vars.colorSolid};

  :disabled {
    /* Fixes background color in Firefox */
    background-color: ${vars.colorSurface};
  }
`;
const DateCalendarTimeInput = props => (

const getButtonStyles = (isDisabled, isActive, tone, size) => {
  const baseStyles = css`
    align-items: center;
    color: ${vars.colorSurface};
    transition: background-color ${vars.transitionLinear80Ms};
    font-size: ${vars.fontSizeDefault};
    ${getSizeStyles(size)}
  `;
  // "disabled" takes precendece over "active"
  if (isDisabled) {
    return [
      baseStyles,
      css`
        &,
        &:active,
        &:hover {
          background-color: ${vars.colorAccent98};
          color: ${vars.colorNeutral60};
          box-shadow: 0 0 0 1px ${vars.colorNeutral} inset;
        }
      `,
    ];

/*
    We don't want a change in a component's height resulting in diffs of the
    remaining states below it, so we establish a min-height for each spec to
    prevent that.
  */
  min-height: ${props => `${getContainerHeight(props.size)}px`};
`;

const Label = styled.div`
  font-family: ${customProperties.fontFamilyDefault};
  font-weight: bold;
  box-sizing: border-box;
  background-color: #774caf;
  padding: 5px;
  color: ${customProperties.colorSurface};
  font-size: ${customProperties.fontSizeDefault};
`;

const PropList = styled.div`
  background-color: #894ac3;
  padding: 5px;
  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;

render() {
    return (
      <div>
        
        </div>

const propsToOmit = ['onClick'];

const Button = styled.button`
  text-decoration: none;
  border: none;
  background: none;
  box-sizing: border-box;
  display: inline-flex;
  outline: 0;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
  color: inherit;
  font: inherit;
  font-size: ${vars.fontSizeDefault};
  font-family: inherit;

  &:disabled {
    cursor: not-allowed;
  }
`;

const AccessibleButton = React.forwardRef((props, ref) => {
  const { onClick } = props;

  const handleClick = React.useCallback(
    event => {
      if (props.isDisabled) {
        event.preventDefault();
        return false;
      }

const getInputContainerStyles = () => css`
  width: 100%;
  align-items: center;
  display: flex;
  font-size: ${vars.fontSizeDefault};
  font-family: inherit;
`;

const Label = props => (
  <div>
    {props.children}
  </div>
);

const asProps = shouldUseLinkTag ? { as: Link } : { as: props.as };

  const buttonAttributes = {
    'data-track-component': 'SecondaryButton',
    ...filterInvalidAttributes(props),
    ...(shouldUseLinkTag ? { to: props.linkTo } : {}),
  };

  const containerStyles = [
    css`
      display: inline-flex;
      background-color: ${vars.colorSurface};
      border-radius: ${vars.borderRadius6};
      box-shadow: ${vars.shadow7};
      color: ${vars.colorSolid};
      font-size: ${vars.fontSizeDefault};
      transition: background-color ${vars.transitionLinear80Ms},
        box-shadow ${vars.transitionEaseinout150Ms};
    `,
    getStateStyles(props.isDisabled, isActive, props.theme),
    getThemeStyles(props.theme),
  ];

  return (

const getContainerStyles = ({ isCondensed, theme }) => {
  const baseStyles = css`
    font-family: inherit;
    box-shadow: ${vars.shadow1};
    color: ${vars.colorSolid};
    border-radius: ${vars.borderRadius6};
    position: relative;
    min-width: 550px;
    font-size: ${vars.fontSizeDefault};
    padding: 0;
    background-color: ${theme === 'light'
      ? vars.colorSurface
      : vars.colorNeutral95};
  `;

  if (isCondensed) {
    return [
      baseStyles,
      css`
        min-width: 0;
      `,
    ];
  }
  return baseStyles;
};

const Avatar = props => (
  <div>
    </div>