How to use the @crave/farmblocks-button.buttonSizes.MEDIUM function in @crave/farmblocks-button

onClick={this.onCancel}
                size={buttonSizes.MEDIUM}
              >
                {cancelButtonText}
              
              <button id="save-button"> {
                  this.onReplace(this.state.editedValue);
                }}
                onMouseDown={e =&gt; {
                  // We do this in order to avoid onBlur event on input
                  e.preventDefault();
                }}
                type={buttonTypes.SECONDARY}
                size={buttonSizes.MEDIUM}
              &gt;
                {saveButtonText}
              </button>
            
          )}
        
      );
    }
  };

zIndex={props.zIndex}
          width={props.width}
          maxHeight={props.maxHeight}
        >
          <ul>{props.children}</ul>
        
      
    
  
);

Dropdown.defaultProps = {
  handleSelection: () =&gt; false,
  text: "",
  align: "left",
  size: buttonSizes.MEDIUM,
};

Dropdown.propTypes = {
  handleSelection: PropTypes.func,
  children: PropTypes.node.isRequired,
  text: PropTypes.string,
  align: PropTypes.oneOf(["left", "right"]),
  zIndex: PropTypes.number,
  size: PropTypes.oneOf(values(buttonSizes)),
  width: PropTypes.string,
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  maxHeight: PropTypes.string,
  className: PropTypes.string,
};

export default Dropdown;

import * as React from "react";
import PropTypes from "prop-types";
import values from "object.values";
import { Transition } from "react-spring/renderprops.cjs";
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);

customCell={() => (
            <div>
              <button type="{buttonTypes.SECONDARY}" size="{buttonSizes.MEDIUM}">}
                onClick={action(`button clicked`)}
              &gt;
                Connect
              </button>
            </div>
          )}
        /&gt;

onClick={props.onCancel}
          className="cancel"
        >
          {props.cancelLabel}
        
      

      {props.children}

      <footer>
        <button loading="{props.loading}" size="{buttonSizes.MEDIUM}" type="{buttonTypes.SECONDARY}" id="{`${id}-save`}">
          {props.saveLabel}
        </button>
      </footer>

      {extraContent}
    
  );
};

helpText="Have questions about account setup?"
      helpLinkText="Get support"
      onHelpLinkClick={action("onHelpLinkClick")}
      actions={[
        <button size="{buttonSizes.MEDIUM}">,
        </button><button size="{buttonSizes.MEDIUM}" type="{buttonTypes.PRIMARY}">,
      ]}
      helpImageSrc="https://crave-whatsgood-sandbox.imgix.net/businesses/32/inventory/8fae5d32-f6d4-47bb-8062-e4e85c47788b.png"
    /&gt;
  ))
  .add("without link", () =&gt; (</button>