Hoverbox.js

// Stylistically its nicer to keep type defs out of the component block.
type Props = {
  selected?: boolean
}
// Not 100% sure but you might have to add styled-system props here, 
// or get the property type definitions from Box and extend with `selected`
// In that case, your Props type would look like
type Props = BoxProps & {
  selected?: boolean
}

// This is the way you wrote it, which is totally fine.
const HoverBox = styled(Box)<Props>`
  background-color: ${(p) =>
    p.selected ? p.theme.colors.washedGray : p.theme.colors.white};
  pointer: cursor;
  &:hover {
    background-color: ${(p) => p.theme.colors.washedGray};
  }
`;

// Here's another way. It lets you have terser conditional style specificiation (changing style based on props)
// at the cost of some extra typing syntax and general syntax weirdness. I would probably not extend existing components
// this way, but I havn't tried to either.

// Worth noting that there are existing conflicts between styled-system types and React DOM property types. Props like
// `color` and `width` exist in both styled-system components and React components, but with different type defs.
// I'm trying to work this out Indigo-side now. Writing them this way has exposed this minor issue.
import styled from "styled-components";
import css, { SystemStyleObject } from "@styled-system/css";
import {
  border,
  BorderProps,
  color,
  ColorProps,
  flexbox,
  FlexboxProps,
  layout,
  LayoutProps,
  position,
  PositionProps,
  space,
  SpaceProps,
} from "styled-system";
import { IndigoSystemStyleProp } from './tokens'

type Props = React.HTMLProps<HTMLDivElement> & 
  BorderProps &
  ColorProps &
  FlexboxProps &
  LayoutProps &
  PositionProps &
  SpaceProps & {
    collapse?: boolean;
    pitch?: IndigoSystemStyleProp;
  };

const Col:React.FunctionComponent<Props> = styled.div(({ pitch, collapse = false }:Props) => css({
  display: 'flex',
  flexDirection: 'column',
  // Handle collapse prop
  width: collapse ? "" : "100%",
  // Handle applying pitch prop
  '& > *': { marginTop: pitch },
  '& :first-child': { marginTop: 0 },
}  as SystemStyleObject), border, color, flexbox, layout, position, space);