How to use the @tds/shared-styles.borders.circular function in @tds/shared-styles

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

import { borders } from '@tds/shared-styles'
import { safeRest } from '@tds/util-helpers'

import { warn } from '../../shared/utils/warn'

const StyledImage = styled.img({
  height: 'auto',
  maxWidth: '100%',
})
const StyledRoundedImage = styled(StyledImage)(borders.rounded)
const StyledCircularImage = styled(StyledImage)(borders.circular)

/**
 * @version ./package.json
 */
const Image = ({ src, width, height, alt, rounded, ...rest }) => {
  const isCircle = rounded === 'circle'
  const isCorners = rounded === 'corners'
  const isSquare = width === height

  if (isCircle && !isSquare) {
    warn(
      'Image',
      'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.'
    )
  }