How to use the styled-tools.ifProp function in styled-tools

const transform = ({ x = "0px", y = "0px" } = {}) =>
  ifProp(
    { align: "center" },
    css`translateX(${ifProp(
      isVertical,
      x,
      `calc(${x} - 50%)`
    )}) translateY(${ifProp(isVertical, `calc(${y} - 50%)`, y)}) ${rotation}`,
    rotation
  );

const transform = ({ x = "0px", y = "0px" } = {}) =>
  ifProp(
    { align: "center" },
    css`translateX(${ifProp(
      isVertical,
      x,
      `calc(${x} - 50%)`
    )}) translateY(${ifProp(isVertical, `calc(${y} - 50%)`, y)}) ${rotation}`,
    rotation
  );

`

export const Field = css`
  display: flex;
  flex-direction: ${ifProp('horizontal', 'row', 'column')};
  align-items: ${ifProp('horizontal', 'center', 'unset')};
  flex: 1;
  white-space: ${ifProp('nowrap', 'nowrap', 'unset')};
  
  &:not(:last-child) {
    margin-bottom: ${t('base.spaceDouble')};
  }
  
  label {
    padding-bottom: ${ifNotProp('horizontal', t('base.spaceHalf'), 'unset')};
    margin-right: ${ifProp('horizontal', t('base.spaceDouble'), 'unset')};
    flex-basis: ${withProp(['horizontal', 'align'], (horizontal, align) => {
    return (horizontal && align)
      ? (align === true) ? `${preciseRm(20)}em` : align
      : 'auto'
  })};
    
    > label {
      padding-bottom: unset;
    }
  }
  
  ${ifNotProp('horizontal', css`
    > *:not(label):not(:last-child) {
      margin-bottom: ${t('base.spaceDouble')};
    }
  `)}

import React from 'react'
import PropTypes from 'prop-types'
import styled, { css, keyframes } from 'styled-components'
import { ifProp, prop } from 'styled-tools'

import { Icon, Button } from 'components'

const fadeIn = keyframes`
  0% { display: none; opacity: 0; }
  1% { display: block; opacity: 0; }
  100% { display: block; opacity: 1; }
`

const StyledButton = styled(Button)`
  max-width: ${props => props.hasText && !props.collapsed ? '100%' : '2.5em'};
  width: ${ifProp('hasText', 'auto', '2.5em')};
  padding: ${ifProp('hasText', '0 0.4375em', 0)};
  flex: 0 0 2.5em;
  box-sizing: border-box;
  ${ifProp('collapsed', css`
    overflow: hidden;
    transition: max-width 250ms ease-in-out;
    will-change: max-width;
    & .text {
      display: none;
    }
    &:hover {
      max-width: 100%;
      & .text {
        display: block;
        animation: ${fadeIn} 250ms;
      }

@media (min-width: ${prop('theme.breakpoints.sm')}) {
    margin-right: 36px;
    margin-bottom: 8px;
    margin-top: 12px;
  }
`;

const NavigationLink = styled(StyledRouterLinkBase)`
  display: flex;
  align-items: center;
  ${prop('theme.fontStyles.headline')};
  height: 100%;
  padding-top: 5px;
  ${ifProp('active', withProp('theme.accent', (color) => `color: ${color};`))};
  border-bottom: 5px solid ${ifProp('active', prop('theme.accent'), 'transparent')};
  text-decoration: none;

  &:hover {
    color: ${prop('theme.accent')};
  }

  &:focus {
    color: ${prop('theme.accent')};
  }

  &.active {
    color: ${prop('theme.accent')};
  }
`;

const FocusableLink = ToolbarFocusable.withComponent(Link);