How to use the @crave/farmblocks-theme.fontSizes.SMALL function in @crave/farmblocks-theme

onClick={event => {
                  // We stop propagation to avoid giving focus to the main input
                  // This happens because the popover is inside the input wrapper
                  event.stopPropagation();
                }}
                fullScreenBreakpoint={fullScreenBreakpoint}
              >
                
                
                
              
            );
          }}
        />

.add("external, mini size", () => (
    
      Awesome Link
    
  ))
  .add("with left icon, mini size", () => (

import Button, { buttonTypes, buttonSizes } from "@crave/farmblocks-button";
import InputText from "@crave/farmblocks-input-text";
import { fontSizes } from "@crave/farmblocks-theme";
import { TooltipContent, POSITIONS } from "@crave/farmblocks-tooltip";
import { MdAdd, MdMinus } from "@crave/farmblocks-icon";

import selectorSizes from "../constants/selectorSizes";
import Wrapper from "../styledComponents/AmountSelector";

const selectorSizeToButtonSize = {
  [selectorSizes.SMALL]: buttonSizes.SMALL,
  [selectorSizes.MEDIUM]: buttonSizes.MEDIUM,
};

const selectorSizeToFontSize = {
  [selectorSizes.SMALL]: fontSizes.SMALL,
  [selectorSizes.MEDIUM]: fontSizes.MEDIUM,
};

const selectorSizeToIconSize = {
  [selectorSizes.SMALL]: 24,
  [selectorSizes.MEDIUM]: 32,
};

class AmountSelectors extends React.Component {
  constructor(props) {
    super(props);

    const { value } = this.props;
    const parsedValue = parseFloat(value) || 0;
    const displayValue = parsedValue.toFixed(2);

disabled
      />
      
      
      
    
  ))
  .add("small container", () => (

  .add("SMALL size", () => )
  .add("MEDIUM size", () => )

.add("SMALL size", () => (
    
  ))
  .add("MEDIUM size", () => (

const ifSmall = (smallValue, defaultValue) => props =>
  props.fontSize === fontSizes.SMALL ? smallValue : defaultValue;

.add("SMALL size", () => (
    <div style="{{">
      
    </div>
  ))
  .add("NEUTRAL type", () =&gt; (

const Label = ({
  className,
  children,
  moreInfoTooltipProps,
  moreInfoContent,
  ...props
}) => {
  return (
    <div>
      
        {children}
      

      {moreInfoContent &amp;&amp; (
        </div>

    withInfo()(() =&gt; <title size="{fontSizes.SMALL}">Awesome title</title>)
  )