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

import styled from '@emotion/styled';
import { Box } from '@neo-one/react-common';
import { prop } from 'styled-tools';

export const Text = styled(Box)`
  color: ${prop('theme.gray0')};
  ${prop('theme.fonts.axiformaBook')};
  ${prop('theme.fontStyles.caption')};
`;

import styled from '@emotion/styled';
import { Box } from '@neo-one/react-common';
import { prop } from 'styled-tools';

export const ProblemCount = styled(Box)`
  color: ${prop('theme.gray0')};
  ${prop('theme.font.axiformaRegular')};
  ${prop('theme.fontStyles.body1')};
`;

import styled from '@emotion/styled';
import { Box } from '@neo-one/react-core';
import { prop } from 'styled-tools';
import background from '../static/img/background.svg';

export const Background = styled(Box)`
  background-color: ${prop('theme.black')};
  background-image: url('${background}');
`;

import styled from '@emotion/styled';
import { ButtonBase } from '@neo-one/react-core';
import { prop } from 'styled-tools';

export const IconButton = styled(ButtonBase)`
  color: ${prop('theme.black')};
  outline: none;
  cursor: pointer;
  padding: 2px 2px;

  &:hover {
    background-color: rgba(46, 40, 55, 0.25);
  }
`;

import styled from '@emotion/styled';
import { prop } from 'styled-tools';
import { Input } from './Input';

export const TextInput = styled(Input)`
  padding: 0 4px;
  outline: none;
  ${prop('theme.fonts.axiformaRegular')};
  ${prop('theme.fontStyles.subheading')};
  background-color: white;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.2);

  &:hover {
    border: 1px solid rgba(0, 0, 0, 0.3);
  }

  &:focus {
    border: 1px solid rgba(0, 0, 0, 0.3);
  }
`;

  (props: Props = {}): any => prop(path, prop(path, defaultValue)(theme))(props.theme)

) => `translate3d(${numberToPx(x)}, ${numberToPx(y)}, ${numberToPx(z)})`;

export const origin = (
  x: string | number = "center",
  y: string | number = "center"
) => `${numberToPx(x)} ${numberToPx(y)}`;

export const calc = (a?: string | number, b?: string | number) =>
  `calc(${numberToPx(a)} + ${numberToPx(b)})`;

export const minus = (v?: string | number) => `-${numberToPx(v)}`;

export const expand = ifProp(
  { expand: true },
  prop("defaultExpand", "center"),
  prop("expand")
);

export const slide = ifProp(
  { slide: true },
  prop("defaultSlide", "right"),
  prop("slide")
);

export const scaleWithProps = ifProp("expand", "scale(0.01)");

export const originWithProps = withProp(["originX", "originY"], (x, y) =>
  switchProp(
    expand,
    {
      center: origin(calc("50%", x), calc("50%", y)),
      top: origin(calc("50%", x), calc("100%", y)),

import styled, { css } from 'styled-components';
import { ifProp, prop, ifNotProp } from 'styled-tools';

export const CardContainer = styled.div`
  display: flex;
  flex-direction: ${prop('direction', 'row')};
  max-width: 100%;
  min-height: 145px;
  border-bottom: 1px solid #eee;
`;

export const ContentArea = styled.div`
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: ${prop('width', '90%')};
  border-right: ${ifNotProp('borderNone', '1px solid #eee', '0')};
`;

export const DetailsRow = styled.div`
  display: flex;
  width: 100%;
  margin-bottom: 20px;
  ${ifProp({direction: 'row'}, css`
    flex-direction: row;
    justify-content: space-between;
  `)}
`;

export const Information = styled.div`
  font-size: 11px;
`;