How to use the grommet/utils/mixins.parseMetricToNum function in grommet

padding-right: ${(props) => {
    const widgetsBox = props.numWidgets *
      (24 + (2 * parseMetricToNum(props.theme.global.edgeSize.small)));

    // eslint-disable-next-line no-mixed-operators
    return widgetsBox + (parseMetricToNum(props.theme.global.spacing) / 2) -
    parseMetricToNum(props.theme.global.input.border.width);
  }}px;
`;

padding-right: ${(props) => {
    const widgetsBox = props.numWidgets *
      (24 + (2 * parseMetricToNum(props.theme.global.edgeSize.small)));

    // eslint-disable-next-line no-mixed-operators
    return widgetsBox + (parseMetricToNum(props.theme.global.spacing) / 2) -
    parseMetricToNum(props.theme.global.input.border.width);
  }}px;
`;

padding-right: ${(props) => {
    const widgetsBox = props.numWidgets *
      (24 + (2 * parseMetricToNum(props.theme.global.edgeSize.small)));

    // eslint-disable-next-line no-mixed-operators
    return widgetsBox + (parseMetricToNum(props.theme.global.spacing) / 2) -
    parseMetricToNum(props.theme.global.input.border.width);
  }}px;
`;

line-height: ${props => (
    parseMetricToNum(props.theme.global.lineHeight) / parseMetricToNum(props.theme.global.font.size)
  )};
  ${props => props.theme.global.colors.text &&

${props => props.first && `
    left: ${parseMetricToNum(props.theme.global.edgeSize.xxsmall) - 1}px;
  `}
  ${props => props.second && `

padding: ${props => (
    (parseMetricToNum(props.theme.global.spacing) / 2) -
    parseMetricToNum(props.theme.global.input.border.width)
  )}px;
  border: ${props => props.theme.global.input.border.width} solid ${props => props.theme.global.input.border.color};

${props => props.second && `
    left: ${parseMetricToNum(props.theme.global.edgeSize.xxsmall) + 1}px;
  `}
  ${props => props.resizing && `

padding: ${props => (
    (parseMetricToNum(props.theme.global.spacing) / 2) -
    parseMetricToNum(props.theme.global.input.border.width)
  )}px;
  border: ${props => props.theme.global.input.border.width} solid ${props => props.theme.global.input.border.color};

  font-size: ${props => `${(parseMetricToNum(props.theme.global.font.size) / 16) * 1}em`};
  line-height: ${props => (