diff --git a/.changeset/new-mangos-fold.md b/.changeset/new-mangos-fold.md
deleted file mode 100644
index 55929a994c9..00000000000
--- a/.changeset/new-mangos-fold.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/react": minor
----
-
-SelectPanel: Implement empty state (behind ff)
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-colorblind-linux.png
deleted file mode 100644
index c8493aad1bd..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-colorblind-modern-action-list--true-linux.png
deleted file mode 100644
index eb4d308d64d..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-colorblind-modern-action-list--true-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-dimmed-linux.png
deleted file mode 100644
index b86f6e84846..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-dimmed-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-dimmed-modern-action-list--true-linux.png
deleted file mode 100644
index 639bd1c8bcb..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-dimmed-modern-action-list--true-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-high-contrast-linux.png
deleted file mode 100644
index 9f418e05f37..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-high-contrast-modern-action-list--true-linux.png
deleted file mode 100644
index 0187b5d0afb..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-high-contrast-modern-action-list--true-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-linux.png
deleted file mode 100644
index e2440902da4..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-modern-action-list--true-linux.png
deleted file mode 100644
index eb4d308d64d..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-modern-action-list--true-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-tritanopia-linux.png
deleted file mode 100644
index e2440902da4..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-tritanopia-modern-action-list--true-linux.png
deleted file mode 100644
index eb4d308d64d..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-dark-tritanopia-modern-action-list--true-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-colorblind-linux.png
deleted file mode 100644
index 6e8caf4cac2..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-colorblind-modern-action-list--true-linux.png
deleted file mode 100644
index 498f43b7b50..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-colorblind-modern-action-list--true-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-high-contrast-linux.png
deleted file mode 100644
index f4a0743991b..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-high-contrast-modern-action-list--true-linux.png
deleted file mode 100644
index 245dd42872f..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-high-contrast-modern-action-list--true-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-linux.png
deleted file mode 100644
index 6e8caf4cac2..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-modern-action-list--true-linux.png
deleted file mode 100644
index 498f43b7b50..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-modern-action-list--true-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-tritanopia-linux.png
deleted file mode 100644
index 6e8caf4cac2..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-tritanopia-modern-action-list--true-linux.png
deleted file mode 100644
index 498f43b7b50..00000000000
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variations-and-Scroll-light-tritanopia-modern-action-list--true-linux.png and /dev/null differ
diff --git a/e2e/components/SelectPanel.test.ts b/e2e/components/SelectPanel.test.ts
index 10c4bb90356..49198328841 100644
--- a/e2e/components/SelectPanel.test.ts
+++ b/e2e/components/SelectPanel.test.ts
@@ -20,7 +20,7 @@ const scenarios = matrix({
       name: 'With Placeholder for Search Input',
     },
     {id: 'components-selectpanel-examples--above-tall-body', name: 'Above Tall Body'},
-    {id: 'components-selectpanel-examples--height-variations-and-scroll', name: 'Height Variations and Scroll'},
+    {id: 'components-selectpanel-examples--height-variantions-and-scroll', name: 'Height Variantions and Scroll'},
     {
       id: 'components-selectpanel-examples--height-initial-with-overflowing-items-story',
       name: 'Height Initial with Overflowing Items',
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.module.css b/packages/react/src/FilteredActionList/FilteredActionList.module.css
deleted file mode 100644
index 93312579243..00000000000
--- a/packages/react/src/FilteredActionList/FilteredActionList.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.Container {
-  display: flex;
-  height: 100%;
-  overflow: auto;
-  flex-grow: 1;
-}
diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
index e4ee594fd25..e2dab51eae7 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
@@ -14,7 +14,6 @@ import {VisuallyHidden} from '../VisuallyHidden'
 import type {SxProp} from '../sx'
 import type {FilteredActionListLoadingType} from './FilteredActionListLoaders'
 import {FilteredActionListLoadingTypes, FilteredActionListBodyLoader} from './FilteredActionListLoaders'
-import classes from './FilteredActionList.module.css'
 import {ActionListContainerContext} from '../ActionList/ActionListContainerContext'
 
 import {isValidElementType} from 'react-is'
@@ -33,7 +32,6 @@ export interface FilteredActionListProps
   onInputRefChanged?: (ref: React.RefObject<HTMLInputElement>) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
   inputRef?: React.RefObject<HTMLInputElement>
-  message?: React.ReactNode
   className?: string
   announcementsEnabled?: boolean
 }
@@ -56,7 +54,6 @@ export function FilteredActionList({
   sx,
   groupMetadata,
   showItemDividers,
-  message,
   className,
   selectionVariant,
   announcementsEnabled = true,
@@ -153,47 +150,6 @@ export function FilteredActionList({
     return itemsInGroup
   }
 
-  function getBodyContent() {
-    if (loading && scrollContainerRef.current && loadingType.appearsInBody) {
-      return <FilteredActionListBodyLoader loadingType={loadingType} height={scrollContainerRef.current.clientHeight} />
-    }
-    if (message) {
-      return message
-    }
-
-    return (
-      <ActionListContainerContext.Provider
-        value={{
-          container: 'FilteredActionList',
-          listRole: 'listbox',
-          selectionAttribute: 'aria-selected',
-          selectionVariant,
-          enableFocusZone: true,
-        }}
-      >
-        <ActionList ref={listRef} showDividers={showItemDividers} {...listProps} id={listId} sx={{flexGrow: 1}}>
-          {groupMetadata?.length
-            ? groupMetadata.map((group, index) => {
-                return (
-                  <ActionList.Group key={index}>
-                    <ActionList.GroupHeading variant={group.header?.variant ? group.header.variant : undefined}>
-                      {group.header?.title ? group.header.title : `Group ${group.groupId}`}
-                    </ActionList.GroupHeading>
-                    {getItemListForEachGroup(group.groupId).map((item, index) => {
-                      const key = item.key ?? item.id?.toString() ?? index.toString()
-                      return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
-                    })}
-                  </ActionList.Group>
-                )
-              })
-            : items.map((item, index) => {
-                const key = item.key ?? item.id?.toString() ?? index.toString()
-                return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
-              })}
-        </ActionList>
-      </ActionListContainerContext.Provider>
-    )
-  }
   useAnnouncements(items, listRef, inputRef, enableAnnouncements)
 
   return (
@@ -227,9 +183,42 @@ export function FilteredActionList({
         />
       </StyledHeader>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
-      <div ref={scrollContainerRef} className={classes.Container}>
-        {getBodyContent()}
-      </div>
+      <Box ref={scrollContainerRef} overflow="auto" display="flex" flexGrow={1}>
+        {loading && scrollContainerRef.current && loadingType.appearsInBody ? (
+          <FilteredActionListBodyLoader loadingType={loadingType} height={scrollContainerRef.current.clientHeight} />
+        ) : (
+          <ActionListContainerContext.Provider
+            value={{
+              container: 'FilteredActionList',
+              listRole: 'listbox',
+              selectionAttribute: 'aria-selected',
+              selectionVariant,
+              enableFocusZone: true,
+            }}
+          >
+            <ActionList ref={listRef} showDividers={showItemDividers} {...listProps} id={listId} sx={{flexGrow: 1}}>
+              {groupMetadata?.length
+                ? groupMetadata.map((group, index) => {
+                    return (
+                      <ActionList.Group key={index}>
+                        <ActionList.GroupHeading variant={group.header?.variant ? group.header.variant : undefined}>
+                          {group.header?.title ? group.header.title : `Group ${group.groupId}`}
+                        </ActionList.GroupHeading>
+                        {getItemListForEachGroup(group.groupId).map((item, index) => {
+                          const key = item.key ?? item.id?.toString() ?? index.toString()
+                          return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
+                        })}
+                      </ActionList.Group>
+                    )
+                  })
+                : items.map((item, index) => {
+                    const key = item.key ?? item.id?.toString() ?? index.toString()
+                    return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
+                  })}
+            </ActionList>
+          </ActionListContainerContext.Provider>
+        )}
+      </Box>
     </Box>
   )
 }
diff --git a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
index 89f76426e17..168e79e4ebb 100644
--- a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
@@ -9,21 +9,13 @@ import type {ItemInput} from '../deprecated/ActionList/List'
 import {FeatureFlags} from '../FeatureFlags'
 import FormControl from '../FormControl'
 
-const meta: Meta<typeof SelectPanel> = {
+const meta = {
   title: 'Components/SelectPanel/Dev',
   component: SelectPanel,
 } satisfies Meta<typeof SelectPanel>
 
 export default meta
 
-const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; body: string} => {
-  return {
-    variant: 'empty',
-    title: `No language found for \`${filter}\``,
-    body: 'Adjust your search term to find other languages',
-  }
-}
-
 function getColorCircle(color: string) {
   return function () {
     return (
@@ -116,7 +108,6 @@ export const WithCss = () => {
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
           className="testCustomClassnameMono"
-          message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </FeatureFlags>
@@ -168,7 +159,6 @@ export const WithSx = () => {
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
           sx={{fontFamily: 'Times New Roman'}}
-          message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </FeatureFlags>
@@ -221,7 +211,6 @@ export const WithSxAndCSS = () => {
           onFilterChange={setFilter}
           sx={{fontFamily: 'Times New Roman'}}
           className="testCustomClassnameMono"
-          message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </FeatureFlags>
diff --git a/packages/react/src/SelectPanel/SelectPanel.docs.json b/packages/react/src/SelectPanel/SelectPanel.docs.json
index ba48ce18d94..d28e8c92ea5 100644
--- a/packages/react/src/SelectPanel/SelectPanel.docs.json
+++ b/packages/react/src/SelectPanel/SelectPanel.docs.json
@@ -150,48 +150,7 @@
       "type": "string | React.ReactElement",
       "defaultValue": "null",
       "description": "Footer rendered at the end of the panel"
-    },
-    {
-      "name": "message",
-      "type": "{title: string | React.ReactElement; variant: 'empty' | 'error' | 'warning';  body: React.ReactNode;}",
-      "defaultValue": "A default empty message is provided by default if this option is not supplied",
-      "description": "Message to display in the panel in case of error or empty results"
-    },
-    {
-      "name": "notice",
-      "type": "{text: string | React.ReactElement; variant: 'empty' | 'error' | 'warning';}",
-      "description": "Optional notice to display on top of the panel"
     }
   ],
-  "subcomponents": [
-    {
-      "name": "SelectPanel.Message",
-      "props": [
-        {
-          "name": "title",
-          "type": "string",
-          "description": "A title for the message"
-        },
-        {
-          "name": "variant",
-          "type": "'empty' | 'error' | 'warning'",
-          "description": "The variant of the message",
-          "required": true
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "defaultValue": "",
-          "description": "Custom className"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "defaultValue": "",
-          "required": true,
-          "description": "The message to display"
-        }
-      ]
-    }
-  ]
+  "subcomponents": []
 }
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index 2f2eea43248..36abedbf65f 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -11,21 +11,13 @@ import FormControl from '../FormControl'
 import {Stack} from '../Stack'
 import {Dialog} from '../experimental'
 
-const meta: Meta<typeof SelectPanel> = {
+const meta = {
   title: 'Components/SelectPanel/Examples',
   component: SelectPanel,
 } satisfies Meta<typeof SelectPanel>
 
 export default meta
 
-const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; body: string} => {
-  return {
-    variant: 'empty',
-    title: `No language found for \`${filter}\``,
-    body: 'Adjust your search term to find other languages',
-  }
-}
-
 function getColorCircle(color: string) {
   return function () {
     return (
@@ -90,7 +82,6 @@ export const HeightInitialWithOverflowingItemsStory = () => {
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -136,7 +127,6 @@ export const HeightInitialWithUnderflowingItemsStory = () => {
         onFilterChange={setFilter}
         showItemDividers={true}
         overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -159,7 +149,7 @@ export const HeightInitialWithUnderflowingItemsAfterFetch = () => {
     [fetchedItems, filter, selected],
   )
   // design guidelines say to sort selected items first
-  const selectedItemsSortedFirst = filteredItems.sort((a, b) => {
+  const selectedItemsSortedFirst = fetchedItems.sort((a, b) => {
     const aIsSelected = selected.some(selectedItem => selectedItem.text === a.text)
     const bIsSelected = selected.some(selectedItem => selectedItem.text === b.text)
     if (aIsSelected && !bIsSelected) return -1
@@ -189,14 +179,13 @@ export const HeightInitialWithUnderflowingItemsAfterFetch = () => {
         placeholder="Select labels" // button text when no items are selected
         open={open}
         onOpenChange={onOpenChange}
-        loading={filteredItems.length === 0 && !filter}
+        loading={filteredItems.length === 0}
         items={selectedItemsSortedFirst}
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         showItemDividers={true}
         overlayProps={{width: 'small', height, maxHeight: 'xsmall'}}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -239,7 +228,6 @@ export const AboveTallBody = () => {
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         showItemDividers={true}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
       <div
         style={{
@@ -257,7 +245,7 @@ export const AboveTallBody = () => {
   )
 }
 
-export const HeightVariationsAndScroll = () => {
+export const HeightVariantionsAndScroll = () => {
   const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items]
   const [filter, setFilter] = useState('')
   // Example A
@@ -305,7 +293,6 @@ export const HeightVariationsAndScroll = () => {
           onFilterChange={setFilter}
           showItemDividers={true}
           overlayProps={{height: 'medium'}}
-          message={selectedItemsSortedFirstA.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
       <br />
@@ -329,7 +316,6 @@ export const HeightVariationsAndScroll = () => {
             height: 'auto',
             maxHeight: 'medium',
           }}
-          message={selectedItemsSortedFirstB.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </>
@@ -404,7 +390,6 @@ export const CustomItemRenderer = () => {
             </Box>
           </ActionList.Item>
         )}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -454,7 +439,6 @@ export const ItemsInScope = () => {
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -500,7 +484,6 @@ export const RepositionAfterLoading = () => {
           selected={selected}
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
-          message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </Stack>
     </>
@@ -548,7 +531,6 @@ export const SelectPanelRepositionInsideDialog = () => {
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
           overlayProps={{anchorSide: 'outside-top'}}
-          message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </Stack>
     </Dialog>
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
index c6c6cedb2d8..637340a5268 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -3,7 +3,6 @@ import type {Meta, StoryObj} from '@storybook/react'
 import Box from '../Box'
 import {Button} from '../Button'
 import type {ItemInput, GroupedListProps} from '../deprecated/ActionList/List'
-import Link from '../Link'
 import {SelectPanel, type SelectPanelProps} from './SelectPanel'
 import {
   AlertIcon,
@@ -19,43 +18,18 @@ import {
   VersionsIcon,
 } from '@primer/octicons-react'
 import useSafeTimeout from '../hooks/useSafeTimeout'
-import ToggleSwitch from '../ToggleSwitch'
-import Text from '../Text'
 import FormControl from '../FormControl'
+import Link from '../Link'
 import {SegmentedControl} from '../SegmentedControl'
 import {Stack} from '../Stack'
 
-const meta: Meta<typeof SelectPanel> = {
+const meta = {
   title: 'Components/SelectPanel/Features',
   component: SelectPanel,
 } satisfies Meta<SelectPanelProps>
 
 export default meta
 
-const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; body: string} => {
-  return {
-    variant: 'empty',
-    title: `No language found for \`${filter}\``,
-    body: 'Adjust your search term to find other languages',
-  }
-}
-
-const EmptyMessage: {variant: 'empty'; title: string; body: React.ReactElement} = {
-  variant: 'empty',
-  title: `You haven't created any projects yet`,
-  body: (
-    <>
-      <Link href="https://github.com/projects">Start your first project</Link> to organise your issues.
-    </>
-  ),
-}
-
-const ErrorMessage: {variant: 'error'; title: string; body: string} = {
-  variant: 'error',
-  title: 'Oops',
-  body: 'Something went wrong.',
-}
-
 function getColorCircle(color: string) {
   return function () {
     return (
@@ -123,7 +97,6 @@ export const WithItemDividers = () => {
         onFilterChange={setFilter}
         showItemDividers={true}
         width="medium"
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -169,7 +142,6 @@ export const WithPlaceholderForSearchInput = () => {
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         width="medium"
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -207,7 +179,6 @@ export const SingleSelect = () => {
         onFilterChange={setFilter}
         onCancel={() => setOpen(false)}
         width="medium"
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -252,7 +223,6 @@ export const MultiSelect = () => {
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         width="medium"
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -295,7 +265,6 @@ export const WithExternalAnchor = () => {
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         width="medium"
-        message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -344,7 +313,6 @@ export const WithFooter = () => {
           </Button>
         }
         width="medium"
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -524,7 +492,6 @@ export const WithGroups = () => {
         onFilterChange={setFilter}
         overlayProps={{width: 'large', height: 'xlarge'}}
         width="medium"
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -569,7 +536,6 @@ export const WithLabelVisuallyHidden = () => {
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         width="medium"
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -617,7 +583,6 @@ export const WithLabelInternally = () => {
       onSelectedChange={setSelected}
       onFilterChange={setFilter}
       width="medium"
-      message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
     />
   )
 }
@@ -629,12 +594,10 @@ export const AsyncFetch: StoryObj<SelectPanelProps> = {
     const [open, setOpen] = useState(false)
     const filterTimerId = useRef<number | null>(null)
     const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
-    const [query, setQuery] = useState('')
 
     const fetchItems = (query: string) => {
       if (filterTimerId.current) {
         safeClearTimeout(filterTimerId.current)
-        setQuery(query)
       }
 
       filterTimerId.current = safeSetTimeout(() => {
@@ -672,122 +635,6 @@ export const AsyncFetch: StoryObj<SelectPanelProps> = {
         height={height}
         initialLoadingType={initialLoadingType}
         width="medium"
-        message={filteredItems.length === 0 ? NoResultsMessage(query) : undefined}
-      />
-    )
-  },
-  args: {
-    initialLoadingType: 'spinner',
-    height: 'medium',
-  },
-  argTypes: {
-    initialLoadingType: {
-      control: 'select',
-      options: ['spinner', 'skeleton'],
-    },
-    height: {
-      control: 'select',
-      options: ['auto', 'xsmall', 'small', 'medium', 'large', 'xlarge'],
-    },
-  },
-}
-
-export const CustomisedNoInitialItems = () => {
-  const [selected, setSelected] = React.useState<ItemInput[]>([])
-  const [filteredItems, setFilteredItems] = React.useState<ItemInput[]>([])
-  const [open, setOpen] = useState(false)
-  const [filter, setFilter] = useState<string>('')
-  const onFilterChange = (value: string = '') => {
-    setFilter(value)
-    setTimeout(() => {
-      // fetch the items
-      setFilteredItems([])
-    }, 0)
-  }
-  const [isError, setIsError] = React.useState(false)
-
-  const onClick = React.useCallback(() => {
-    setIsError(!isError)
-  }, [setIsError, isError])
-
-  function getMessage(): {variant: 'empty' | 'error'; title: string; body: string | React.ReactElement} {
-    if (isError) return ErrorMessage
-    else if (filter) return NoResultsMessage(filter)
-    else return EmptyMessage
-  }
-
-  return (
-    <>
-      <Text id="toggle" fontWeight={'bold'} fontSize={2}>
-        Enable Error State :{isError ? 'On' : 'Off'}
-      </Text>
-      <ToggleSwitch onClick={onClick} checked={isError} aria-labelledby="toggle" />
-      <SelectPanel
-        title="Set projects"
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </Button>
-        )}
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={onFilterChange}
-        width="medium"
-        height="large"
-        message={getMessage()}
-      />
-    </>
-  )
-}
-
-export const CustomisedNoResults: StoryObj<typeof SelectPanel> = {
-  render: ({initialLoadingType, height}) => {
-    const [selected, setSelected] = React.useState<ItemInput[]>([])
-    const [filteredItems, setFilteredItems] = React.useState<ItemInput[]>([])
-    const [filterValue, setFilterValue] = React.useState<string>('')
-    const [open, setOpen] = useState(false)
-    const filterTimerId = useRef<number | null>(null)
-    const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
-    const onFilterChange = (value: string) => {
-      setFilterValue(value)
-      if (filterTimerId.current) {
-        safeClearTimeout(filterTimerId.current)
-      }
-
-      filterTimerId.current = safeSetTimeout(() => {
-        setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(value.toLowerCase())))
-      }, 2000) as unknown as number
-    }
-
-    return (
-      <SelectPanel
-        title="Select labels"
-        subtitle="Use labels to organize issues and pull requests"
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button
-            trailingAction={TriangleDownIcon}
-            aria-labelledby={` ${ariaLabelledBy}`}
-            {...anchorProps}
-            aria-haspopup="dialog"
-          >
-            {children ?? 'Select Labels'}
-          </Button>
-        )}
-        placeholderText="Filter labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={onFilterChange}
-        showItemDividers={true}
-        initialLoadingType={initialLoadingType}
-        height={height}
-        overlayProps={{maxHeight: height === 'auto' || height === 'initial' ? 'xlarge' : height}}
-        message={filteredItems.length === 0 ? NoResultsMessage(filterValue) : undefined}
       />
     )
   },
diff --git a/packages/react/src/SelectPanel/SelectPanel.module.css b/packages/react/src/SelectPanel/SelectPanel.module.css
index e737e17f13b..9b3acb44a17 100644
--- a/packages/react/src/SelectPanel/SelectPanel.module.css
+++ b/packages/react/src/SelectPanel/SelectPanel.module.css
@@ -1,8 +1,3 @@
-.Overlay {
-  /* CSS variables values are passed in via styles */
-  --max-height: 0;
-}
-
 .Wrapper {
   display: flex;
   height: inherit;
@@ -79,45 +74,6 @@
   max-height: inherit;
 }
 
-.Message {
-  display: flex;
-  height: 100%;
-  min-height: min(calc(var(--max-height) - 150px), 324px); /* maxHeight of dialog - (header & footer) */
-  padding: var(--base-size-24);
-  text-align: center;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-  gap: var(--base-size-4);
-
-  a {
-    color: inherit;
-    text-decoration: underline;
-  }
-}
-
-.MessageTitle {
-  font-size: var(--text-body-size-medium);
-  font-weight: var(--base-text-weight-semibold);
-}
-
-.MessageBody {
-  font-size: var(--text-body-size-small);
-  color: var(--fgColor-muted);
-  align-items: center;
-  gap: var(--stack-gap-condensed);
-}
-
-.MessageIcon {
-  margin-bottom: var(--base-size-8);
-  color: var(--fgColor-attention);
-
-  &:where([data-variant='error']) {
-    color: var(--fgColor-danger);
-  }
-}
-
 .ResponsiveCloseButton {
   display: none;
 
diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
index 96e8e20c23f..24d0ba377d5 100644
--- a/packages/react/src/SelectPanel/SelectPanel.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
@@ -8,7 +8,7 @@ import {SelectPanel} from '../SelectPanel'
 import type {ItemInput} from '../deprecated/ActionList/List'
 import FormControl from '../FormControl'
 
-const meta: Meta<typeof SelectPanel> = {
+const meta = {
   title: 'Components/SelectPanel',
   component: SelectPanel,
 } satisfies Meta<typeof SelectPanel>
@@ -101,15 +101,6 @@ export const Default = () => {
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         width="medium"
-        message={
-          selectedItemsSortedFirst.length === 0
-            ? {
-                variant: 'empty',
-                title: `No language found for \`${filter}\``,
-                body: 'Adjust your search term to find other languages',
-              }
-            : undefined
-        }
       />
     </FormControl>
   )
diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx
index f8112d38010..d00754bf453 100644
--- a/packages/react/src/SelectPanel/SelectPanel.test.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx
@@ -491,97 +491,6 @@ for (const useModernActionList of [false, true]) {
         )
       }
 
-      const SelectPanelWithCustomMessages: React.FC<{items: SelectPanelProps['items']}> = ({items}) => {
-        const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
-        const [filter, setFilter] = React.useState('')
-        const [open, setOpen] = React.useState(false)
-
-        const onSelectedChange = (selected: SelectPanelProps['items']) => {
-          setSelected(selected)
-        }
-
-        const emptyMessage: {variant: 'empty'; title: string; body: string} = {
-          variant: 'empty',
-          title: "You haven't created any projects yet",
-          body: 'Start your first project to organise your issues',
-        }
-
-        const noResultsMessage = (filter: string): {variant: 'empty'; title: string; body: string} => ({
-          variant: 'empty',
-          title: `No language found for ${filter}`,
-          body: 'Adjust your search term to find other languages',
-        })
-
-        const filteredItems = items.filter(item => item.text?.includes(filter))
-
-        function getMessage() {
-          if (filteredItems.length === 0 && !filter) {
-            return emptyMessage
-          }
-          if (filteredItems.length === 0 && filter) {
-            return noResultsMessage(filter)
-          }
-          return undefined
-        }
-
-        return (
-          <ThemeProvider>
-            <SelectPanel
-              title="test title"
-              subtitle="test subtitle"
-              items={filteredItems}
-              placeholder="Select items"
-              placeholderText="Filter items"
-              selected={selected}
-              onSelectedChange={onSelectedChange}
-              filterValue={filter}
-              onFilterChange={value => {
-                setFilter(value)
-              }}
-              open={open}
-              onOpenChange={isOpen => {
-                setOpen(isOpen)
-              }}
-              message={getMessage()}
-            />
-          </ThemeProvider>
-        )
-      }
-
-      function NoItemAvailableSelectPanel() {
-        const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
-        const [filter, setFilter] = React.useState('')
-        const [open, setOpen] = React.useState(false)
-
-        const onSelectedChange = (selected: SelectPanelProps['items']) => {
-          setSelected(selected)
-        }
-
-        const items: SelectPanelProps['items'] = []
-
-        return (
-          <ThemeProvider>
-            <SelectPanel
-              title="test title"
-              subtitle="test subtitle"
-              items={items.filter(item => item.text?.includes(filter))}
-              placeholder="Select items"
-              placeholderText="Filter items"
-              selected={selected}
-              onSelectedChange={onSelectedChange}
-              filterValue={filter}
-              onFilterChange={value => {
-                setFilter(value)
-              }}
-              open={open}
-              onOpenChange={isOpen => {
-                setOpen(isOpen)
-              }}
-            />
-          </ThemeProvider>
-        )
-      }
-
       describe('filtering', () => {
         it('should filter the list of items when the user types into the input', async () => {
           const user = userEvent.setup()
@@ -743,76 +652,6 @@ for (const useModernActionList of [false, true]) {
         })
       })
 
-      describe('Empty state', () => {
-        // This is only implemented with the feature flag (for now)
-        if (!useModernActionList) return
-
-        it('should display the default empty state message when there is no matching item after filtering (No custom message is provided)', async () => {
-          const user = userEvent.setup()
-
-          renderWithFlag(<FilterableSelectPanel />, useModernActionList)
-
-          await user.click(screen.getByText('Select items'))
-
-          expect(screen.getAllByRole('option')).toHaveLength(3)
-
-          await user.type(document.activeElement!, 'something')
-          expect(screen.getByText("You haven't created any items yet")).toBeVisible()
-          expect(screen.getByText('Please add or create new items to populate the list.')).toBeVisible()
-        })
-
-        it('should display the default empty state message when there is no item after the initial load (No custom message is provided)', async () => {
-          const user = userEvent.setup()
-
-          renderWithFlag(<NoItemAvailableSelectPanel />, useModernActionList)
-
-          await waitFor(async () => {
-            await user.click(screen.getByText('Select items'))
-            expect(screen.getByText("You haven't created any items yet")).toBeVisible()
-            expect(screen.getByText('Please add or create new items to populate the list.')).toBeVisible()
-          })
-        })
-        it('should display the custom empty state message when there is no matching item after filtering', async () => {
-          const user = userEvent.setup()
-
-          renderWithFlag(
-            <SelectPanelWithCustomMessages
-              items={[
-                {
-                  text: 'item one',
-                },
-                {
-                  text: 'item two',
-                },
-                {
-                  text: 'item three',
-                },
-              ]}
-            />,
-            useModernActionList,
-          )
-
-          await user.click(screen.getByText('Select items'))
-
-          expect(screen.getAllByRole('option')).toHaveLength(3)
-
-          await user.type(document.activeElement!, 'something')
-          expect(screen.getByText('No language found for something')).toBeVisible()
-          expect(screen.getByText('Adjust your search term to find other languages')).toBeVisible()
-        })
-
-        it('should display the custom empty state message when there is no item after the initial load', async () => {
-          const user = userEvent.setup()
-
-          renderWithFlag(<SelectPanelWithCustomMessages items={[]} />, useModernActionList)
-
-          await waitFor(async () => {
-            await user.click(screen.getByText('Select items'))
-            expect(screen.getByText("You haven't created any projects yet")).toBeVisible()
-            expect(screen.getByText('Start your first project to organise your issues')).toBeVisible()
-          })
-        })
-      })
       describe('with footer', () => {
         function SelectPanelWithFooter() {
           const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 0758d4a6b2f..3154baa1682 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -10,13 +10,13 @@ import Heading from '../Heading'
 import type {OverlayProps} from '../Overlay'
 import type {TextInputProps} from '../TextInput'
 import type {ItemProps, ItemInput} from './types'
-import {SelectPanelMessage} from './SelectPanelMessage'
 
 import {Button, IconButton} from '../Button'
 import {useProvidedRefOrCreate} from '../hooks'
 import type {FocusZoneHookSettings} from '../hooks/useFocusZone'
 import {useId} from '../hooks/useId'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
+import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion'
 import useSafeTimeout from '../hooks/useSafeTimeout'
 import type {FilteredActionListLoadingType} from '../FilteredActionList/FilteredActionListLoaders'
 import {FilteredActionListLoadingTypes} from '../FilteredActionList/FilteredActionListLoaders'
@@ -24,18 +24,11 @@ import {useFeatureFlag} from '../FeatureFlags'
 import {announce} from '@primer/live-region-element'
 import classes from './SelectPanel.module.css'
 import {clsx} from 'clsx'
-import {heightMap} from '../Overlay/Overlay'
 
 // we add a delay so that it does not interrupt default screen reader announcement and queues after it
 const delayMs = 500
 const loadingDelayMs = 1000
 
-const DefaultEmptyMessage = (
-  <SelectPanelMessage variant="empty" title="You haven't created any items yet" key="empty-message">
-    Please add or create new items to populate the list.
-  </SelectPanelMessage>
-)
-
 const getItemWithActiveDescendant = (
   listRef: React.RefObject<HTMLElement>,
   items: FilteredActionListProps['items'],
@@ -51,7 +44,7 @@ const getItemWithActiveDescendant = (
   const activeItem = items[index] as ItemInput | undefined
 
   const text = activeItem?.text
-  const selected = activeItemElement.getAttribute('aria-selected') === 'true'
+  const selected = activeItem?.selected
 
   return {index, text, selected}
 }
@@ -134,21 +127,15 @@ interface SelectPanelBaseProps {
     text: string | React.ReactElement
     variant: 'info' | 'warning' | 'error'
   }
-  message?: {
-    title: string
-    body: string | React.ReactElement
-    variant: 'empty' | 'error' | 'warning'
-  }
   onCancel?: () => void
 }
 
-export type SelectPanelProps = React.PropsWithChildren<
-  SelectPanelBaseProps &
-    Omit<FilteredActionListProps, 'selectionVariant'> &
-    Pick<AnchoredOverlayProps, 'open' | 'height' | 'width'> &
-    AnchoredOverlayWrapperAnchorProps &
-    (SelectPanelSingleSelection | SelectPanelMultiSelection)
->
+export type SelectPanelProps = SelectPanelBaseProps &
+  Omit<FilteredActionListProps, 'selectionVariant'> &
+  Pick<AnchoredOverlayProps, 'open' | 'height' | 'width'> &
+  AnchoredOverlayWrapperAnchorProps &
+  (SelectPanelSingleSelection | SelectPanelMultiSelection)
+
 function isMultiSelectVariant(
   selected: SelectPanelSingleSelection['selected'] | SelectPanelMultiSelection['selected'],
 ): selected is SelectPanelMultiSelection['selected'] {
@@ -202,7 +189,6 @@ export function SelectPanel({
   height,
   width,
   id,
-  message,
   notice,
   onCancel,
   ...listProps
@@ -286,15 +272,13 @@ export function SelectPanel({
 
   useEffect(() => {
     if (open) {
-      if (!usingModernActionList) {
-        if (items.length === 0) {
-          announceNoItems()
+      if (items.length === 0 && !usingModernActionList) {
+        announceNoItems()
+      } else {
+        if (listContainerElement) {
+          announceItemsChanged(items, {current: listContainerElement})
         } else {
-          if (listContainerElement) {
-            announceItemsChanged(items, {current: listContainerElement})
-          } else {
-            setNeedItemsChangedAnnouncement(true)
-          }
+          setNeedItemsChangedAnnouncement(true)
         }
       }
     }
@@ -307,7 +291,7 @@ export function SelectPanel({
       return
     }
 
-    if (isLoading || items.length > 0) {
+    if (isLoading) {
       setIsLoading(false)
       setDataLoadedOnce(true)
     }
@@ -449,172 +433,167 @@ export function SelectPanel({
     error: <StopIcon size={16} />,
   }
 
-  function getMessage() {
-    // If there is no items after the first load, show the no items state
-    if (items.length === 0 && !message) {
-      return DefaultEmptyMessage
-    } else if (message) {
-      return (
-        <SelectPanelMessage title={message.title} variant={message.variant}>
-          {message.body}
-        </SelectPanelMessage>
-      )
-    }
-  }
-
   return (
-    <AnchoredOverlay
-      renderAnchor={renderMenuAnchor}
-      anchorRef={anchorRef}
-      open={open}
-      onOpen={onOpen}
-      onClose={onClose}
-      overlayProps={{
-        role: 'dialog',
-        'aria-labelledby': titleId,
-        'aria-describedby': subtitle ? subtitleId : undefined,
-        ...overlayProps,
-        style: {
-          '--max-height': overlayProps?.maxHeight ? heightMap[overlayProps.maxHeight] : heightMap['large'],
-        } as React.CSSProperties,
-      }}
-      focusTrapSettings={focusTrapSettings}
-      focusZoneSettings={focusZoneSettings}
-      height={height}
-      width={width}
-      anchorId={id}
-      variant={{regular: 'anchored', narrow: 'fullscreen'}}
-      pinPosition={!height}
-      className={classes.Overlay}
-    >
-      <Box
-        sx={enabled ? undefined : {display: 'flex', flexDirection: 'column', height: 'inherit', maxHeight: 'inherit'}}
-        className={enabled ? classes.Wrapper : undefined}
+    <LiveRegion>
+      <AnchoredOverlay
+        renderAnchor={renderMenuAnchor}
+        anchorRef={anchorRef}
+        open={open}
+        onOpen={onOpen}
+        onClose={onClose}
+        overlayProps={{
+          role: 'dialog',
+          'aria-labelledby': titleId,
+          'aria-describedby': subtitle ? subtitleId : undefined,
+          ...overlayProps,
+        }}
+        focusTrapSettings={focusTrapSettings}
+        focusZoneSettings={focusZoneSettings}
+        height={height}
+        width={width}
+        anchorId={id}
+        variant={{regular: 'anchored', narrow: 'fullscreen'}}
+        pinPosition={!height}
       >
+        <LiveRegionOutlet />
+        {usingModernActionList ? null : (
+          <Message
+            value={
+              filterValue === ''
+                ? 'Showing all items'
+                : items.length <= 0
+                  ? 'No matching items'
+                  : `${items.length} matching ${items.length === 1 ? 'item' : 'items'}`
+            }
+          />
+        )}
         <Box
-          sx={
-            enabled
-              ? undefined
-              : {
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  paddingTop: 2,
-                  paddingRight: 2,
-                  paddingLeft: 2,
-                }
-          }
-          className={enabled ? classes.Header : undefined}
+          sx={enabled ? undefined : {display: 'flex', flexDirection: 'column', height: 'inherit', maxHeight: 'inherit'}}
+          className={enabled ? classes.Wrapper : undefined}
         >
-          <div>
-            <Heading
-              as="h1"
-              id={titleId}
-              sx={enabled ? undefined : {fontSize: 1, marginLeft: 2}}
-              className={enabled ? classes.Title : undefined}
-            >
-              {title}
-            </Heading>
-            {subtitle ? (
-              <Box
-                id={subtitleId}
-                sx={enabled ? undefined : {marginLeft: 2, fontSize: 0, color: 'fg.muted'}}
-                className={enabled ? classes.Subtitle : undefined}
-              >
-                {subtitle}
-              </Box>
-            ) : null}
-          </div>
-          {onCancel && (
-            <IconButton
-              type="button"
-              variant="invisible"
-              icon={XIcon}
-              aria-label="Cancel and close"
-              sx={enabled ? undefined : {display: ['inline-grid', 'inline-grid', 'none', 'none']}}
-              className={enabled ? classes.ResponsiveCloseButton : undefined}
-              onClick={() => {
-                onCancel()
-                onClose('escape')
-              }}
-            />
-          )}
-        </Box>
-        {notice && (
-          <div aria-live="polite" data-variant={notice.variant} className={classes.Notice}>
-            {iconForNoticeVariant[notice.variant]}
-            <div>{notice.text}</div>
-          </div>
-        )}
-        <FilteredActionList
-          filterValue={filterValue}
-          onFilterChange={onFilterChange}
-          onListContainerRefChanged={onListContainerRefChanged}
-          onInputRefChanged={onInputRefChanged}
-          placeholderText={placeholderText}
-          {...listProps}
-          role="listbox"
-          // browsers give aria-labelledby precedence over aria-label so we need to make sure
-          // we don't accidentally override props.aria-label
-          aria-labelledby={listProps['aria-label'] ? undefined : titleId}
-          aria-multiselectable={isMultiSelectVariant(selected) ? 'true' : 'false'}
-          selectionVariant={isMultiSelectVariant(selected) ? 'multiple' : 'single'}
-          items={itemsToRender}
-          textInputProps={extendedTextInputProps}
-          loading={loading || isLoading}
-          loadingType={loadingType()}
-          // hack because the deprecated ActionList does not support this prop
-          {...{
-            message: getMessage(),
-          }}
-          // inheriting height and maxHeight ensures that the FilteredActionList is never taller
-          // than the Overlay (which would break scrolling the items)
-          sx={enabled ? sx : {...sx, height: 'inherit', maxHeight: 'inherit'}}
-          className={enabled ? clsx(className, classes.FilteredActionList) : className}
-          announcementsEnabled={usingModernActionList}
-        />
-        {footer ? (
           <Box
             sx={
               enabled
                 ? undefined
                 : {
                     display: 'flex',
-                    borderTop: '1px solid',
-                    borderColor: 'border.default',
-                    padding: 2,
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    paddingTop: 2,
+                    paddingRight: 2,
+                    paddingLeft: 2,
                   }
             }
-            className={enabled ? classes.Footer : undefined}
+            className={enabled ? classes.Header : undefined}
           >
-            {footer}
-          </Box>
-        ) : isMultiSelectVariant(selected) ? (
-          /* Save and Cancel buttons are only useful for multiple selection, single selection instantly closes the panel */
-          <div className={clsx(classes.Footer, classes.ResponsiveFooter)}>
-            {/* we add a save and cancel button on narrow screens when SelectPanel is full-screen */}
+            <div>
+              <Heading
+                as="h1"
+                id={titleId}
+                sx={enabled ? undefined : {fontSize: 1, marginLeft: 2}}
+                className={enabled ? classes.Title : undefined}
+              >
+                {title}
+              </Heading>
+              {subtitle ? (
+                <Box
+                  id={subtitleId}
+                  sx={enabled ? undefined : {marginLeft: 2, fontSize: 0, color: 'fg.muted'}}
+                  className={enabled ? classes.Subtitle : undefined}
+                >
+                  {subtitle}
+                </Box>
+              ) : null}
+            </div>
             {onCancel && (
-              <Button
-                size="medium"
+              <IconButton
+                type="button"
+                variant="invisible"
+                icon={XIcon}
+                aria-label="Cancel and close"
+                sx={enabled ? undefined : {display: ['inline-grid', 'inline-grid', 'none', 'none']}}
+                className={enabled ? classes.ResponsiveCloseButton : undefined}
                 onClick={() => {
                   onCancel()
                   onClose('escape')
                 }}
-              >
-                Cancel
-              </Button>
+              />
             )}
-            <Button
-              variant="primary"
-              size="medium"
-              block={onCancel ? false : true}
-              onClick={() => onClose('click-outside')}
+          </Box>
+          {notice && (
+            <div aria-live="polite" data-variant={notice.variant} className={classes.Notice}>
+              {iconForNoticeVariant[notice.variant]}
+              <div>{notice.text}</div>
+            </div>
+          )}
+          <FilteredActionList
+            filterValue={filterValue}
+            onFilterChange={onFilterChange}
+            onListContainerRefChanged={onListContainerRefChanged}
+            onInputRefChanged={onInputRefChanged}
+            placeholderText={placeholderText}
+            {...listProps}
+            role="listbox"
+            // browsers give aria-labelledby precedence over aria-label so we need to make sure
+            // we don't accidentally override props.aria-label
+            aria-labelledby={listProps['aria-label'] ? undefined : titleId}
+            aria-multiselectable={isMultiSelectVariant(selected) ? 'true' : 'false'}
+            selectionVariant={isMultiSelectVariant(selected) ? 'multiple' : 'single'}
+            items={itemsToRender}
+            textInputProps={extendedTextInputProps}
+            loading={loading || isLoading}
+            loadingType={loadingType()}
+            // inheriting height and maxHeight ensures that the FilteredActionList is never taller
+            // than the Overlay (which would break scrolling the items)
+            sx={enabled ? sx : {...sx, height: 'inherit', maxHeight: 'inherit'}}
+            className={enabled ? clsx(className, classes.FilteredActionList) : className}
+            announcementsEnabled={usingModernActionList}
+          />
+          {footer ? (
+            <Box
+              sx={
+                enabled
+                  ? undefined
+                  : {
+                      display: 'flex',
+                      borderTop: '1px solid',
+                      borderColor: 'border.default',
+                      padding: 2,
+                    }
+              }
+              className={enabled ? classes.Footer : undefined}
             >
-              Save
-            </Button>
-          </div>
-        ) : null}
-      </Box>
-    </AnchoredOverlay>
+              {footer}
+            </Box>
+          ) : isMultiSelectVariant(selected) ? (
+            /* Save and Cancel buttons are only useful for multiple selection, single selection instantly closes the panel */
+            <div className={clsx(classes.Footer, classes.ResponsiveFooter)}>
+              {/* we add a save and cancel button on narrow screens when SelectPanel is full-screen */}
+              {onCancel && (
+                <Button
+                  size="medium"
+                  onClick={() => {
+                    onCancel()
+                    onClose('escape')
+                  }}
+                >
+                  Cancel
+                </Button>
+              )}
+              <Button
+                variant="primary"
+                size="medium"
+                block={onCancel ? false : true}
+                onClick={() => onClose('click-outside')}
+              >
+                Save
+              </Button>
+            </div>
+          ) : null}
+        </Box>
+      </AnchoredOverlay>
+    </LiveRegion>
   )
 }
+
+SelectPanel.displayName = 'SelectPanel'
diff --git a/packages/react/src/SelectPanel/SelectPanelMessage.tsx b/packages/react/src/SelectPanel/SelectPanelMessage.tsx
deleted file mode 100644
index a2f099d231d..00000000000
--- a/packages/react/src/SelectPanel/SelectPanelMessage.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import Text from '../Text'
-import Octicon from '../Octicon'
-import {AlertIcon} from '@primer/octicons-react'
-import classes from './SelectPanel.module.css'
-import {clsx} from 'clsx'
-
-export type SelectPanelMessageProps = {
-  children: React.ReactNode
-  title: string
-  variant: 'empty' | 'error' | 'warning'
-  className?: string
-}
-
-export const SelectPanelMessage: React.FC<SelectPanelMessageProps> = ({variant, title, children, className}) => {
-  return (
-    <div className={clsx(classes.Message, className)}>
-      {variant !== 'empty' ? <Octicon icon={AlertIcon} className={classes.MessageIcon} data-variant={variant} /> : null}
-      <Text className={classes.MessageTitle}>{title}</Text>
-      <Text className={classes.MessageBody}>{children}</Text>
-    </div>
-  )
-}
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 3c38372326f..8405ba30bd8 100755
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -1142,8 +1142,8 @@ const components = new Map([
           name: 'Above Tall Body',
         },
         {
-          id: 'components-selectpanel-examples--height-variations-and-scroll',
-          name: 'Height Variations and Scroll',
+          id: 'components-selectpanel-examples--height-variantions-and-scroll',
+          name: 'Height Variantions and Scroll',
         },
         {
           id: 'components-selectpanel-examples--height-initial-with-overflowing-items-story',