Update SegmentedControl.features.stories.tsx to no longer use styled-components (#6477)

Author: llastflowers

packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css

@@ -0,0 +1,15 @@
+.LabelAndCaptionContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4);
+}
+
+@media screen and (min-width: 768px) {
+  .LabelAndCaptionContainer {
+    flex-direction: row;
+  }
+}
+
+.LabelAndCaption {
+  flex-grow: 1;
+}

packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx

@@ -2,7 +2,8 @@ import {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {SegmentedControl} from '.'
 import {EyeIcon, FileCodeIcon, PeopleIcon} from '@primer/octicons-react'
-import {Box, Text} from '..'
+import {Text} from '..'
+import classes from './SegmentedControl.features.stories.module.css'
 
 export default {
   title: 'Components/SegmentedControl/Features',
@@ -122,29 +123,20 @@ export const IconOnly = () => (
 IconOnly.storyName = 'Icon only'
 
 export const AssociatedWithALabelAndCaption = () => (
-  <Box
-    display="flex"
-    sx={theme => ({
-      flexDirection: 'column',
-      gap: theme.space[1],
-      [`@media screen and (min-width: ${theme.breakpoints[1]})`]: {
-        flexDirection: 'row',
-      },
-    })}
-  >
-    <Box flexGrow={1}>
+  <div className={classes.LabelAndCaptionContainer}>
+    <div className={classes.LabelAndCaption}>
       <Text fontSize={2} fontWeight="bold" id="scLabel-vert" display="block">
         File view
       </Text>
       <Text color="fg.subtle" fontSize={1} id="scCaption-vert" display="block">
         Change the way the file is viewed
       </Text>
-    </Box>
+    </div>
     <SegmentedControl aria-labelledby="scLabel-vert" aria-describedby="scCaption-vert">
       <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>
       <SegmentedControl.Button>Raw</SegmentedControl.Button>
       <SegmentedControl.Button>Blame</SegmentedControl.Button>
     </SegmentedControl>
-  </Box>
+  </div>
 )
 AssociatedWithALabelAndCaption.storyName = '[Example] Associated with a label and caption'