How to use the @tinacms/styles.radius function in @tinacms/styles

transform: translate3d( 0, -2rem, 0 );
    opacity: 0;
  }

  100% {
    transform: translate3d( 0, 0, 0 );
    opacity: 1;
  }
`

export const ModalPopup: StyledComponent<'div', {}, {}> = styled.div`
  display: block;
  z-index: 1;
  overflow: visible; /* Keep this as "visible", select component needs to overflow */
  background-color: #f6f6f9;
  border-radius: ${radius('small')};
  margin: 2.5rem auto;
  width: 460px;
  max-width: 90%;
  animation: ${ModalPopupKeyframes} 150ms ease-out 1;
`

transform: translate3d( 0, -2rem, 0 );
    opacity: 0;
  }

  100% {
    transform: translate3d( 0, 0, 0 );
    opacity: 1;
  }
`

export const ModalPopup = styled.div`
  display: block;
  z-index: 1;
  overflow: visible; /* Keep this as "visible", select component needs to overflow */
  background-color: #f6f6f9;
  border-radius: ${radius('small')};
  margin: 2.5rem auto;
  width: 460px;
  max-width: 90%;
  animation: ${ModalPopupKeyframes} 150ms ease-out 1;
`

import * as React from 'react'
import styled, { css } from 'styled-components'
import { padding, color, radius, font } from '@tinacms/styles'

export interface InputProps {
  error?: boolean
  small?: boolean
  placeholder?: string
}

export const InputCss = css`
  padding: ${padding('small')};
  border-radius: ${radius('small')};
  background: ${color.grey(0)};
  font-size: ${font.size(2)};
  line-height: 1.35;
  position: relative;
  background-color: ${color.grey()};
  transition: all 85ms ease-out;
  border: 1px solid ${color.grey(2)};
  width: 100%;
  margin: 0;
  outline: none;
  box-shadow: 0 0 0 2px ${p => (p.error ? color.error() : 'transparent')};

  &:hover {
    box-shadow: 0 0 0 2px ${color.grey(3)};
  }

transform: translate3d(${p => (p.visible ? '0' : '-100%')}, 0, 0);
  overflow: hidden;
  padding: ${padding()};
  transition: all 250ms ease-out;
  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
`

const ModalActions = styled.div`
  display: flex;
  justify-content: space-between;
  border-radius: 0 0 ${radius('big')} ${radius('big')};
  overflow: hidden;
  ${Button} {
    border-radius: 0;
    flex: 1 0 auto;
  }
`

const SidebarToggleAnimation = keyframes`
  from {
    transform: translate3d(-100%,0,0);
  }

  to {
    transform: translate3d(0,0,0);
  }
`

display: block;
    margin: 0 0 ${padding()} 0;
    ${Emoji} {
      font-size: 1em;
    }
  }
  p {
    display: block;
    margin: 0 0 ${padding()} 0;
  }
`

const LinkButton = styled.a`
  text-align: center;
  border: 0;
  border-radius: ${radius('big')};
  border: 1px solid ${color.grey(2)};
  box-shadow: ${shadow('small')};
  font-weight: 500;
  cursor: pointer;
  font-size: ${font.size(0)};
  transition: all ${timing('short')} ease-out;
  background-color: white;
  color: ${color.grey(8)};
  padding: ${padding('small')} ${padding('big')} ${padding('small')} 3.5rem;
  position: relative;
  text-decoration: none;
  display: inline-block;
  ${Emoji} {
    font-size: 1.5rem;
    position: absolute;
    left: ${padding('big')};

${p =>
    p.isDragging &&
    css`
      border-radius: ${radius('small')};
      box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);

      svg {
        fill: ${color.grey(8)};
      }
      ${GroupLabel} {
        color: #0084ff;
      }

      ${DragHandle} {
        svg:first-child {
          opacity: 0;
        }
        svg:last-child {
          opacity: 1;
        }

svg {
      fill: ${color.grey(8)};
    }
    ${GroupLabel} {
      color: #0084ff;
    }
  }

  &:first-child {
    border-radius: 0.25rem 0.25rem 0 0;
  }

  &:nth-last-child(2) {
    border-radius: 0 0 0.25rem 0.25rem;
    &:first-child {
      border-radius: ${radius('small')};
    }
  }

  ${p =>
    p.isDragging &&
    css`
      border-radius: ${radius('small')};
      box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);

      svg {
        fill: ${color.grey(8)};
      }
      ${GroupLabel} {
        color: #0084ff;
      }

border-radius: ${radius('small')};
  background-color: ${color.grey(2)};
  color: ${color.grey(4)};
  line-height: 1.35;
  padding: 0.75rem 0;
  font-size: ${font.size(2)};
  font-weight: 500;
  transition: all 85ms ease-out;
  &:hover {
    opacity: 0.6;
  }
`

const StyledImage = styled.img`
  max-width: 100%;
  border-radius: ${radius('small')};
  transition: opacity ${timing('short')} ease-out;
  margin: 0;
  display: block;
`

const DeleteButton = styled(IconButton)`
  top: 0.5rem;
  right: 0.5rem;
  position: absolute;
  &:not(:hover) {
    fill: ${color.grey()};
    background-color: transparent;
    border-color: transparent;
  }
`

border-radius: ${radius('small')};
  background-color: ${color.grey(2)};
  color: ${color.grey(4)};
  line-height: 1.35;
  padding: 0.75rem 0;
  font-size: ${font.size(2)};
  font-weight: 500;
  transition: all 85ms ease-out;
  &:hover {
    opacity: 0.6;
  }
`

const StyledImage = styled.img`
  max-width: 100%;
  border-radius: ${radius('small')};
  transition: opacity ${timing('short')} ease-out;
  ${DropArea}:hover & {
    opacity: 0.6;
  }
`

export const ImageUpload = ({
  onDrop,
  value,
  previewSrc,
}: ImageUploadProps) => {
  const {
    getRootProps,
    getInputProps,
    isDragActive,
    isDragAccept,

)
}

const Label = function(field: GroupFieldDefinititon) {
  return {field.label || field.name}
}

const Header: StyledComponent<'div', {}, {}> = styled.div`
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid ${color.grey(2)};
  border-radius: ${radius('small')};
  margin: 0 0 1.5rem 0;
  overflow: visible;
  line-height: 1.35;
  padding: 0.75rem;
  color: #282828;
  background-color: white;

  svg {
    width: 1.5rem;
    height: auto;
    fill: ${color.grey(3)};
    transition: all 85ms ease-out;
  }

  &:hover {
    svg {