Update SelectPanel.examples stories to no longer use styled-components (#6476)

Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>

Author: hectahertz

packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css

@@ -0,0 +1,27 @@
+/* CSS Module for SelectPanel examples stories */
+
+.ColorCircle {
+  width: 14px;
+  height: 14px;
+  border-radius: var(--borderRadius-full);
+  margin: auto;
+  border-width: var(--borderWidth-thin);
+  border-style: solid;
+}
+
+.CustomActionListItem {
+  margin-left: var(--base-size-8);
+  margin-right: var(--base-size-8);
+}
+
+.CustomActionListItem[data-is-active-descendant='activated-directly'] {
+  background-color: transparent;
+  outline: 2px solid var(--focus-outlineColor, var(--color-accent-emphasis));
+  outline-offset: -2px;
+}
+
+.TruncatedText {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

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

@@ -1,5 +1,4 @@
 import React, {useState, useMemo} from 'react'
-import Box from '../Box'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '../Button'
 import type {ItemInput} from '../deprecated/ActionList/List'
@@ -10,6 +9,7 @@ import {ActionList} from '../deprecated/ActionList'
 import FormControl from '../FormControl'
 import {Stack} from '../Stack'
 import {Dialog} from '../experimental'
+import styles from './SelectPanel.examples.stories.module.css'
 
 const meta: Meta<typeof SelectPanel> = {
   title: 'Components/SelectPanel/Examples',
@@ -29,15 +29,12 @@ const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; bod
 function getColorCircle(color: string) {
   return function () {
     return (
-      <Box
-        bg={color}
-        borderColor={color}
-        width={14}
-        height={14}
-        borderRadius={10}
-        margin="auto"
-        borderWidth="1px"
-        borderStyle="solid"
+      <div
+        className={styles.ColorCircle}
+        style={{
+          backgroundColor: color,
+          borderColor: color,
+        }}
       />
     )
   }
@@ -300,28 +297,9 @@ export const CustomItemRenderer = () => {
         onFilterChange={setFilter}
         overlayProps={{width: 'medium'}}
         renderItem={item => (
-          <ActionList.Item
-            {...item}
-            text={undefined}
-            sx={{
-              mx: 2,
-              '&[data-is-active-descendant="activated-directly"]': {
-                backgroundColor: 'transparent',
-                outline: '2px solid var(--focus-outlineColor, var(--color-accent-emphasis))',
-                outlineOffset: '-2px',
-              },
-            }}
-          >
+          <ActionList.Item {...item} text={undefined} className={styles.CustomActionListItem}>
             {' '}
-            <Box
-              sx={{
-                overflow: 'hidden',
-                whiteSpace: 'nowrap',
-                textOverflow: 'ellipsis',
-              }}
-            >
-              {item.text}
-            </Box>
+            <div className={styles.TruncatedText}>{item.text}</div>
           </ActionList.Item>
         )}
         message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}