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

*/
  min-height: 400px;
`;

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`
  font-family: ${customProperties.fontFamilyDefault};
  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;
  box-sizing: border-box;
`;

import { Grid, customProperties } from '@commercetools-frontend/ui-kit';
import { Suite, Spec } from '../../../test/percy';

export const routePath = '/grid';

const createList = size =>
  Array.from({ length: size }).map((_, index) => index + 1);

const Placeholder = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: pink;
  padding: 16px;
  font-size: 16px;
  font-family: ${customProperties.fontFamilyDefault};
`;

export const component = () => (
  
    
      
        {createList(6).map((el, index) => (
          
            {el}
          
        ))}