Box: Support "initial" and "fit-content" for width

[cseas]

Problem

I'm working on implementing this design:

Which becomes this on mobile:

We want the last item to be on a separate line. Putting display: block on it messes up the alignment of the icon and text since their container has display: flex.

Code with the issue: https://github.com/razorpay/frontend-website/pull/2194/files#diff-1f2c8c5821f57c8376ada25679cfc0b957d02788758ba99df29d8ca16b1599b5R96

Suggestion

I could technically put another wrapper around the wrapper containing the icon and text and put a responsive display: block on that. But assuming the goal of the Layout primitives was to avoid wrapocalypse like this one.

Please support the "initial" and/or "fit-content" values for width on Box component. So we could write this:

<Box width={{ base: '100%', l: 'initial' }}>

This will render the correct layout:

[divyanshu013]

Besides these we should also add other relevant values in TS, eg. min-content, max-content, inherit, unset, etc. as part of this issue