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

import styled from 'styled-components';
import Typography from '@synerise/ds-typography';

export const TitleContainer = styled.div`
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  && {
    .close-modal {
      line-height: 1;
    }
  }
`;

export const Title = styled(Typography.Title)`
  width: 100%;
  color: ${(props): string => props.theme.palette['grey-800']};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  && {
    margin: 0;
  }
`;

export const Description = styled(Typography.Text)`
  font-weight: normal;
  display: block;
  padding: 12px 0 0;
  margin: 8px 0 0;

flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;

  ${(props): FlattenSimpleInterpolation | false =>
    !!props.isContentful &&
    css`
      margin: 0 0 24px;
    `};
`;

export const HeaderSideChildren = styled.div`
  padding-left: 24px;
`;

export const Title = styled(Typography.Title)<{ fat: boolean }>`
  && {
    display: flex;
    align-items: center;
    height: ${(props): string => (props.fat ? '32px' : '20px')};
    margin: 0;
  }
`;

export const Description = styled.p`
  && {
    margin: 6px 0 0;
  }
`;

export const HeaderContent = styled.div<{ compact?: boolean; hasIcon: boolean }>`
  width: 100%;