[Layout] What should the API look like for responsive props

[aveline]

Currently a few of our Layout components accept responsive properties but we are inconsistent in how that gets passed in.

Some components only accept the object so even if a user only needs one value for all breakpoints they still need to pass in the object and set the value on the xs breakpoint.

❌ spacing="5"
✅ spacing={{xs: "5"}}

Other component accept either a value for all breakpoints, or an object for different values per breakpoint

✅ spacing="5"
✅ spacing={{xs: "5"}}
✅ spacing={{xs: "5", sm: "8"}}

🌶️ We should be consistent in how values are passed in and accept either a value, or responsive object. When only a value is passed in, the component should handle setting it as the value for all the breakpoints.

Related discussion pertaining to the Columns component #7536
Example of a component that accepts both a value or object with breakpoints: AlphaStack