Update Spinner.examples.stories.tsx to no longer use styled-components (#6411)

Co-authored-by: Hector Garcia <[email protected]>

Author: liuliu-dev

packages/react/src/Spinner/Spinner.examples.stories.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import Spinner from './Spinner'
-import {Box, Button} from '..'
+import {Button} from '..'
 import {VisuallyHidden} from '../VisuallyHidden'
 import {AriaStatus} from '../live-region'
+import classes from './SpinnerStories.module.css'
 
 export default {
   title: 'Components/Spinner/Examples',
@@ -77,20 +78,20 @@ export const FullLifecycleVisibleLoadingText = () => {
   }
 
   return (
-    <Box sx={{display: 'flex', alignItems: 'flex-start', flexDirection: 'column', gap: '0.5em'}}>
-      <Button onClick={initiateLoading} sx={{mb: '1em'}}>
+    <div className={classes.LoadingExample}>
+      <Button onClick={initiateLoading} className={classes.LoadButton}>
         Load content
       </Button>
       {state !== 'done' && (
-        <Box sx={{alignItems: 'center', display: 'flex', gap: '0.25rem'}}>
+        <div className={classes.LoadingIndicator}>
           {state === 'loading' && <Spinner size="small" srText={null} />}
           <AriaStatus>{state === 'loading' ? 'Content is loading...' : ''}</AriaStatus>
-        </Box>
+        </div>
       )}
       <p>{loadedContent}</p>
       <VisuallyHidden>
         <AriaStatus>{state === 'done' && 'Content finished loading'}</AriaStatus>
       </VisuallyHidden>
-    </Box>
+    </div>
   )
 }

packages/react/src/Spinner/SpinnerStories.module.css

@@ -0,0 +1,16 @@
+.LoadingExample {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: var(--base-size-8);
+}
+
+.LoadingIndicator {
+  align-items: center;
+  display: flex;
+  gap: var(--base-size-4);
+}
+
+.LoadButton {
+  margin-bottom: var(--base-size-16);
+}