fix(stories): update Box stories to correctly render colors and layouts

[Aryan9inja]

Proposed changes (including videos or screenshots)

• Fixed the rendering of various color variants (bg='light', bg='tint', etc.) in the Box stories.
• Ensured layout-related props like padding, margin, border, and size are visually represented.
• Wrapped the stories in a flex container to showcase variants side-by-side.

Video proof of issue fix-

Recording.2025-07-30.151314.mp4

Issue(s)

Closes #1695

Further comments

Used SurfaceContext.Provider to ensure background color tokens are interpreted correctly when rendering Box variants. Considered alternatives like hardcoded background colors but chose context to align with design token usage across Fuselage.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 78b827e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Aryan9inja]

@Anxhul10 Done with branch renaming.

[Anxhul10]

@Anxhul10 Done with branch renaming.

rocket.chat follows specific branch name formats ,
eg - fix/render-box-layout
and to be type safe I will request some changes in pr but before that can you rename the branch to specific format .