From 452ff9a8f4a70bf177c47437a32330fd2b4512a9 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 3 Nov 2023 09:24:34 -0700
Subject: [PATCH] Revert "[REVERT ME] Demo bug"

This reverts commit 611d30f0bacac932d6c64c6df6e13850f4d7ac10.
---
 .../selectable_templates/sitewide_search.tsx  | 100 ++++++++----------
 1 file changed, 43 insertions(+), 57 deletions(-)

diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx
index c784fe6e8be..cb80843b43c 100644
--- a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx
+++ b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx
@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { css } from '@emotion/react';
 
 import {
-  EuiHeader,
-  EuiHeaderSectionItem,
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
@@ -13,7 +11,6 @@ import {
   EuiSelectableTemplateSitewide,
   EuiSelectableTemplateSitewideOption,
   useEuiTheme,
-  EuiThemeProvider,
 } from '../../../../../src';
 
 export default () => {
@@ -93,61 +90,50 @@ export default () => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <EuiHeader theme="dark">
-      <EuiHeaderSectionItem>
-        <EuiSelectableTemplateSitewide
-          isLoading={isLoading}
-          onChange={onChange}
-          options={searchValueExists ? searchData : recentsWithIcon}
-          searchProps={{
-            append: '⌘K',
-            onKeyUpCapture: onKeyUpCapture,
-            className: 'customSearchClass',
-            inputRef: setSearchRef,
-          }}
-          listProps={{
-            className: 'customListClass',
-            css: css`
-              .euiSelectableTemplateSitewide__optionMeta--PINK {
-                font-weight: ${euiTheme.font.weight.medium};
-                color: ${euiTheme.colors.accentText};
-              }
-            `,
-          }}
-          popoverProps={{
-            className: 'customPopoverClass',
-          }}
-          popoverButton={
-            <EuiThemeProvider
-              colorMode="dark"
-              wrapperProps={{ cloneElement: true }}
-            >
-              <EuiButton color="text">Mobile toggle</EuiButton>
-            </EuiThemeProvider>
+    <EuiSelectableTemplateSitewide
+      isLoading={isLoading}
+      onChange={onChange}
+      options={searchValueExists ? searchData : recentsWithIcon}
+      searchProps={{
+        append: '⌘K',
+        onKeyUpCapture: onKeyUpCapture,
+        className: 'customSearchClass',
+        inputRef: setSearchRef,
+      }}
+      listProps={{
+        className: 'customListClass',
+        css: css`
+          .euiSelectableTemplateSitewide__optionMeta--PINK {
+            font-weight: ${euiTheme.font.weight.medium};
+            color: ${euiTheme.colors.accentText};
           }
-          popoverButtonBreakpoints={['xl']}
-          popoverFooter={
-            <EuiText color="subdued" size="xs">
-              <EuiFlexGroup
-                alignItems="center"
-                gutterSize="s"
-                responsive={false}
-                wrap
-              >
-                <EuiFlexItem grow={false}>
-                  {searchValueExists && <EuiLink>View more results</EuiLink>}
-                </EuiFlexItem>
-                <EuiFlexItem />
-                <EuiFlexItem grow={false}>Quickly search using</EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiBadge>Command + K</EuiBadge>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiText>
-          }
-        />
-      </EuiHeaderSectionItem>
-    </EuiHeader>
+        `,
+      }}
+      popoverProps={{
+        className: 'customPopoverClass',
+      }}
+      popoverButton={<EuiButton>Mobile toggle</EuiButton>}
+      popoverButtonBreakpoints={['xs', 's']}
+      popoverFooter={
+        <EuiText color="subdued" size="xs">
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+            responsive={false}
+            wrap
+          >
+            <EuiFlexItem grow={false}>
+              {searchValueExists && <EuiLink>View more results</EuiLink>}
+            </EuiFlexItem>
+            <EuiFlexItem />
+            <EuiFlexItem grow={false}>Quickly search using</EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBadge>Command + K</EuiBadge>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+      }
+    />
   );
 };