Update Box.features.stories.tsx to no longer use styled-components

[Copilot]

This PR migrates packages/react/src/Box/Box.features.stories.tsx away from using styled-components and the sx prop, replacing them with CSS Modules and standard HTML elements.

Changes Made

• Created Box.features.stories.module.css with 7 CSS classes using CSS variables for consistent theming
• Replaced all Box components with standard HTML div elements
• Converted sx prop usage to CSS Module classes with appropriate styling:
  • Border styles using var(--borderWidth-thin) and var(--borderColor-default)
  • Padding using var(--base-size-16)
  • Flexbox layout with flex-grow: 1 for the middle item
  • CSS Grid with grid-template-columns: 1fr 1fr and gap spacing

Before

export const Border = () => (
  <Box sx={{borderWidth: 1, borderStyle: 'solid', borderColor: 'border.default', p: 3}}>
    Box with border
  </Box>
)

After

export const Border = () => <div className={classes.Border}>Box with border</div>

The visual appearance and behavior of all stories remains identical, but the implementation now uses performant CSS Modules instead of runtime-generated styles from styled-components.

All tests pass and Storybook builds successfully with these changes.

Fixes #6567.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6306a71

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