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

// eslint-disable-next-line react/jsx-props-no-spreading
export default styled(({ backgroundColor, hasStatus, pressed, ...rest }) => )`
  && {
    ${(props): string => applyBgColors(props)};
    ${(props): string | false => applyDisabledStyles(props)};
    transition: background 0.3s ease;

    .ant-avatar-string {
      width: 100%;
      height: 100%;
      left: 0;
      position: relative;
      transform: none !important;
      ${(props): string => applyFontSize(props)};
      ${macro.flexCentered}
      & > div {
        max-width: 100%;
        max-height: 100%;
        svg {
          width: 100%;
          height: 100%;
        }
      }
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;