🐛 Object passed to style prop gets mutated, which can lead to inconsistencies

[tjosepo]

Describe the bug

Because Orbit styleprops don't support all CSS properties, we sometimes have to pass an object to the styles property.

<Div styles={{ transition: "all 0.3s linear" }} />

It might be desireable to store the style object in a variable, to be able to reuse the styles across components:

const styles = { transition: "all 0.3s linear" }

return (
  <>
    <Div styles={styles} />
    <Div styles={styles} />
  </>
);

However, doing so might lead to hard-to-understand bugs, as the object that is passed to the style prop seems to be directly mutated by Orbit, which makes sharing the object potentially dangerous:

const styles = { transition: "all 0.3s linear" }

return (
  <>
    <Div backgroundColor="red" styles={styles} />
    <Div styles={styles} /> // ⚠️ This will have a red background color!!
  </>
);

Steps to reproduce

See above.

Expected results

Orbit should not mutate objects passed as props directly, as those might be shared between components.

Reproducible demo

https://codesandbox.io/embed/orbit-transition-style-bug-g6u27z?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=dark