## When to use `Box`, `sprinkles` and `style`

In order to prevent confusion when to use what from vanilla-extract.When there's a non-standard property (not defined in `sprinkles.css.ts`), use style.Example:

import { style } from '@vanilla-extract/css'

export const list = style({ listStyleType: 'none' })

Use sprinkles and style when there are both standard and non-standard properties.Example:

import { sprinkles } from '../css/sprinkles.css'
import { style } from '@vanilla-extract/css'

const input = style([sprinkles({ ... }), { ... }])

Use Box when there's only standard styles. This way there will be no need to create an extra .css.ts file. You can also use Box + style
defined classnames.Example:

import { Box } from '../Box'
import * as styles from ./Heading.css'

const Heading = () => (
  <Box as="h1" fontSize="48" fontFamily="body" className={styles.nonStandardStyles}>Hello</Box>
)

## Use Box only if using `sprinkles` props

there's no point in using Box if you don't use any sprinkles properties there. Use `div` + resetStyles + className (e.g. `style([reset.base, { styles }]))` instead (or even without reset cuz it's not needed everywhere).