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

width: 100%;
`;

export const Name = styled(Label)`
  && {
    color: ${(props): string => props.theme.palette['grey-600']};
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: initial;
  }
`;

export const SizeOrError = styled(Typography.Text)`
  && {
    color: ${(props): string => props.theme.palette['grey-600']};
  }
`;

export const RemoveButtonWrapper = styled.div`
  display: none;
  background-color: #fff;
  z-index: 100;
  border: 0;
  border-radius: 8px;
  padding: 0;
  margin: 0;
  height: 16px;
  width: 16px;
  position: absolute;

}
`;

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;

  background-image: linear-gradient(
    to right,
    ${(props): string => props.theme.palette['grey-300']} 33%,
    rgba(255, 255, 255, 0) 0%
  );
  background-repeat: repeat-x;
  background-size: 4px 1px;
  background-position: top;
`;

export const ActionButtons = styled.div`

import styled, { SimpleInterpolation } from 'styled-components';
import Typography, { Label as TypographyLabel } from '@synerise/ds-typography';
import Button from '@synerise/ds-button';
import { IconContainer } from '@synerise/ds-icon/dist/Icon.styles';

export const Container = styled.div`
  width: 100%;
`;

export const Description = styled(Typography.Text)<{ hasError?: boolean }>`
  && {
    margin: ${(props): SimpleInterpolation => (props.hasError ? '4px 0 0' : '8px 0 0')};
    display: block;
    color: ${(props): string => props.theme.palette['grey-500']};
  }
`;

export const DropAreaContainer = styled.div<{ canUploadMore: boolean }>`
  width: 100%;
  margin: ${(props): string => (props.canUploadMore ? '12px 0 0' : '0')};
`;

export const DropAreaLabel = styled(Typography.Text)`
  color: ${(props): string => props.theme.palette['grey-500']};
  font-weight: 500;
`;

export const DropAreaLabel = styled(Typography.Text)`
  color: ${(props): string => props.theme.palette['grey-500']};
  font-weight: 500;
`;

export const LargeDropAreaLabel = styled(TypographyLabel)`
  && {
    font-size: 14px;
    margin: 4px 0 0;
    display: block;
    color: ${(props): string => props.theme.palette['grey-500']};
  }
`;

export const LargeDropAreaDescription = styled(Typography.Text)`
  && {
    margin: 4px 0 0;
    display: block;
    color: ${(props): string => props.theme.palette['grey-500']};
  }
`;

export const DropAreaButton = styled.button<{ isDropping?: boolean; hasError?: boolean; mode: string }>`
  display: flex;
  align-items: center;
  border: 1px dashed ${(props): string => props.theme.palette['grey-300']};
  padding: 11px 12px;
  border-radius: 3px;
  cursor: pointer;
  background-color: transparent;
  width: 100%;