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

height: 24px;
  display: none;
  svg {
    color: ${({ theme }): string => theme.palette['grey-500']}
    fill: ${({ theme }): string => theme.palette['grey-500']} 
  }
  .ds-card-tabs__remove-icon {
    svg {
      color: ${({ theme }): string => theme.palette['red-600']}
      fill: ${({ theme }): string => theme.palette['red-600']} 
    }
  }
`;

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;

import styled from 'styled-components';
import { macro } from '@synerise/ds-typography';
import { ItemActionsWrapper } from '../ItemActions/ItemActions.styles';

export const ItemLabel = styled.span`
  ${macro.h300};
  color: ${({ theme }): string => theme.palette['grey-600']};
  height: 24px;
  display: inline-block;
  align-items: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  line-height: 24px;
  max-width: 100%;
`;

export const ItemLabelWrapper = styled.div`
  flex: 1;
  overflow: hidden;
  height: 24px;

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

export const TabLabel = styled.span`
  ${macro.h300}
  line-height: 20px;
  white-space: nowrap;
  color: ${({ theme }): string => theme.palette['grey-700']};
`;

export const TabContent = styled.div`
  display: flex;
  flex-direction: row;
  align-self: flex-start;
  align-items: center;
  justify-content: flex-start;
  height: 24px;
`;

export const TabContainer = styled.button`
  display: flex;