How to use the @synerise/ds-typography.macro.h200 function in @synerise/ds-typography

import styled from 'styled-components';
import { macro } from '@synerise/ds-typography';
import { IconContainer } from '@synerise/ds-icon/dist/Icon.styles';

// eslint-disable-next-line import/prefer-default-export
export const AddContentButtonWrapper = styled.div`
  display: flex;
  width: 100%;
  .ant-btn {
    ${macro.h200};
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent;
    color: ${({ theme }): string => theme.palette['grey-500']};
    svg {
      color: ${({ theme }): string => theme.palette['grey-500']};
      fill: ${({ theme }): string => theme.palette['grey-500']};
    }
    ${IconContainer} {
      margin-right: 12px;
    }

    &:hover {
      color: ${({ theme }): string => theme.palette['grey-600']};

import * as React from 'react';
import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
import Badge from 'antd/lib/badge';
import { macro } from '@synerise/ds-typography';

// eslint-disable-next-line react/jsx-props-no-spreading
export default styled(({ flag, outlined, ...rest }) => )`
&& {
  .ant-scroll-number-only{
    height: 18px;
    & > p {
      ${macro.h200};
      color: inherit;
      line-height: 18px;
      height: 18px;
    }
  }
  .ant-badge-count {
    box-shadow: none;
    height: 18px;
    padding: 0 5px;
    line-height: 18px;
    min-width: 18px;
  }
  ${(props): FlattenSimpleInterpolation | false =>
    css`
      ${props.outlined &&
        css`

}
`;

export const CardTabLabel = styled.span`
  ${macro.h300};
  color: ${({ theme }): string => theme.palette['grey-600']};
  line-height: 20px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
`;

export const CardTabTag = styled.div`
  ${macro.h200}
  color: ${({ theme }): string => theme.palette.white};
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
`;

export const CardTabPrefix = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 12px;