🐛 Can't overwrite paddingX with paddingLeft or paddingRight

[tjosepo]

Describe the bug

When the paddingX styleprop is used, it becomes impossible to overwrite the padding with paddingLeft or paddingRight.

This can be a pitfall when creating custom components that can use prop spreading to get styles from a parent.

Steps to reproduce

function MyCustomComponent(props: DivProps) {
  return (
    <Div paddingX="20px" {...props}>
      Hello there!
    </Div>
  );
}

function App() {
  return <MyCustomComponent paddingLeft="50px" />; // ⚠️ This padding will NOT be applied! It will stay 20px.
}

Expected results

Because paddingLeft is more specific than paddingX, I expect it to take precedence over the paddingX rule.

Reproducible demo

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