Update SideNav.dev.stories.tsx to no longer use styled-components

[Copilot]

As part of the migration away from styled-components, this PR updates packages/react/src/stories/deprecated/SideNav.dev.stories.tsx to use CSS modules instead of the deprecated Box component.

Changes Made

• Removed Box import: The Box component was removed from the imports as it relies on styled-components
• Created CSS module: Added SideNav.dev.module.css with equivalent styles for the container and menu header
• Replaced Box components with div elements: The two Box components in the LightweightVariant story were replaced with div elements using CSS classes
• Updated styling approach: Converted from styled-system props to CSS custom properties following the project's design token conventions

CSS Classes Added

• .ContainerBox: Provides border, padding, background, and max-width styling for the outer container
• .MenuHeader: Provides border-bottom, margin, and padding styling for the menu header section

The visual appearance of the stories remains unchanged while removing the dependency on styled-components infrastructure.

Fixes #6526.

---

💬 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: baa033c

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

[Copilot]

Pull Request Overview

This PR migrates the SideNav dev stories from using the deprecated Box component (which relies on styled-components) to CSS modules as part of the broader styled-components migration effort.

• Removed Box component dependency and replaced with standard div elements
• Added CSS module with equivalent styling using design token CSS custom properties
• Updated the LightweightVariant story to use the new CSS classes while maintaining visual appearance

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/react/src/stories/deprecated/SideNav.dev.stories.tsx	Removed Box import, added CSS module import, replaced Box components with div elements using CSS classes
packages/react/src/stories/deprecated/SideNav.dev.module.css	Added CSS module with ContainerBox and MenuHeader classes using design token CSS custom properties

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[hectahertz]

@copilot can you run npm format?

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	90.13 KB (0%)
packages/react/dist/browser.umd.js	90.31 KB (0%)

[Copilot]

@copilot can you run npm format?

Done! Ran npm format and committed the formatting changes (88bb34f). The CSS file was updated to include a proper newline at the end.