Update styles to always use arrays instead of sometimes object merging

[mmarcuccio]

Radium allows you to use (potentially nested) arrays of style objects that are later flattened and merged correctly. Currently, users of Snacks components can only specify a style object. We then sometimes combine this style with existing Snacks styles via the spread operator.

This can be problematic when the user needs to combine multiple style objects with the built in styles of the Snacks component. Also, if the user is passing in a nested object (e.g. a style object w/ a media query), only the top level object is merged while the nested object properties replace existing properties.

The property foo goes missing below:

const styleFromSnacks = { color: 'red', myMediaQuery: { foo: 1  } }
const styleFromUser = { myMediaQuery: { bar: 2 } }
const mergedStyles = {...styleFromSnacks, ...styleFromUser}
console.log(mergedStyles.myMediaQuery) // => {bar: 2}

Some places in the codebase use arrays, but others are merging objects directly.

To solve this issue, we could:

• Update all Snacks components' style prop to accept either an array or object.
• Stop using object spreading to combine styles. Instead, build an array of style objects.