diff --git a/aspire/README.md b/aspire/README.md
index 621a7c895..cc93eeb3f 100644
--- a/aspire/README.md
+++ b/aspire/README.md
@@ -87,7 +87,7 @@ Should have these secrets
 > Parameters:DocumentationElasticApiKey = ****
 
 To set them:
-
+  
 ```bash
 dotnet user-secrets --project aspire set Parameters:DocumentationElasticApiKey <VALUE>
 ```
@@ -149,4 +149,3 @@ dotnet test tests-integration/Elastic.Assembler.IntegrationTests --filter "Fully
   - Network connectivity issues with Elasticsearch
 - **Performance optimization**: Subsequent test runs against the same Elasticsearch instance are significantly faster because indexing is skipped when data is already up-to-date
 - The base class `SearchTestBase` can be extended for additional search-related tests, providing consistent initialization and intelligent indexing behavior
-
diff --git a/src/Elastic.Documentation.Site/.parcelrc b/src/Elastic.Documentation.Site/.parcelrc
new file mode 100644
index 000000000..5d62400c3
--- /dev/null
+++ b/src/Elastic.Documentation.Site/.parcelrc
@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.svg": ["@parcel/transformer-svg-react"]
+  }
+}
diff --git a/src/Elastic.Documentation.Site/Assets/eui-icons-cache.ts b/src/Elastic.Documentation.Site/Assets/eui-icons-cache.ts
index 4e5a6f474..0228f8126 100644
--- a/src/Elastic.Documentation.Site/Assets/eui-icons-cache.ts
+++ b/src/Elastic.Documentation.Site/Assets/eui-icons-cache.ts
@@ -19,6 +19,7 @@ import { icon as EuiIconEmpty } from '@elastic/eui/es/components/icon/assets/emp
 import { icon as EuiIconError } from '@elastic/eui/es/components/icon/assets/error'
 import { icon as EuiIconFaceHappy } from '@elastic/eui/es/components/icon/assets/face_happy'
 import { icon as EuiIconFaceSad } from '@elastic/eui/es/components/icon/assets/face_sad'
+import { icon as EuiIconKqlFunction } from '@elastic/eui/es/components/icon/assets/kql_function'
 import { icon as EuiIconLogoElastic } from '@elastic/eui/es/components/icon/assets/logo_elastic'
 import { icon as EuiIconNewChat } from '@elastic/eui/es/components/icon/assets/new_chat'
 import { icon as EuiIconPlay } from '@elastic/eui/es/components/icon/assets/play'
@@ -29,6 +30,7 @@ import { icon as EuiIconSearch } from '@elastic/eui/es/components/icon/assets/se
 import { icon as EuiIconSortDown } from '@elastic/eui/es/components/icon/assets/sort_down'
 import { icon as EuiIconSortUp } from '@elastic/eui/es/components/icon/assets/sort_up'
 import { icon as EuiIconSparkles } from '@elastic/eui/es/components/icon/assets/sparkles'
+import { icon as EuiIconStop } from '@elastic/eui/es/components/icon/assets/stop'
 import { icon as EuiIconThumbDown } from '@elastic/eui/es/components/icon/assets/thumbDown'
 import { icon as EuiIconThumbUp } from '@elastic/eui/es/components/icon/assets/thumbUp'
 import { icon as EuiIconTrash } from '@elastic/eui/es/components/icon/assets/trash'
@@ -68,9 +70,11 @@ const iconMapping = {
     play: EuiIconPlay,
     sortUp: EuiIconSortUp,
     sortDown: EuiIconSortDown,
+    stop: EuiIconStop,
     arrowStart: EuiIconArrowStart,
     arrowEnd: EuiIconArrowEnd,
     comment: EuiIconComment,
+    kqlFunction: EuiIconKqlFunction,
 }
 
 appendIconComponentCache(iconMapping)
diff --git a/src/Elastic.Documentation.Site/Assets/global.d.ts b/src/Elastic.Documentation.Site/Assets/global.d.ts
index 5ec0fc014..cbd7d63b3 100644
--- a/src/Elastic.Documentation.Site/Assets/global.d.ts
+++ b/src/Elastic.Documentation.Site/Assets/global.d.ts
@@ -3,3 +3,9 @@ declare module '@elastic/highlightjs-esql' {
     const esql: LanguageFn
     export default esql
 }
+
+declare module '*.svg' {
+    import { ComponentType, SVGProps } from 'react'
+    const component: ComponentType<SVGProps<SVGSVGElement>>
+    export default component
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
index 66c1e5ec2..58157a01b 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
@@ -59,9 +59,7 @@ export const AskAiSuggestions = ({ disabled }: { disabled?: boolean }) => {
                     `}
                 >
                     <EuiButton
-                        iconType="newChat"
-                        color="primary"
-                        fullWidth
+                        color="text"
                         size="s"
                         onClick={() => {
                             if (!disabled) {
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.test.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.test.tsx
index 3210356dd..57c048b4b 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.test.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.test.tsx
@@ -1,99 +1,45 @@
+import { cooldownStore } from '../cooldown.store'
+import { modalStore } from '../modal.store'
 import { Chat } from './Chat'
+import { chatStore } from './chat.store'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 
-// Mock the chat store
-jest.mock('./chat.store', () => ({
-    chatStore: {
-        getState: jest.fn(),
-    },
-    useChatMessages: jest.fn(() => []),
-    useAiProvider: jest.fn(() => 'LlmGateway'),
-    useChatActions: jest.fn(() => ({
-        submitQuestion: jest.fn(),
-        clearChat: jest.fn(),
-        clearNon429Errors: jest.fn(),
-        setAiProvider: jest.fn(),
-    })),
+// Mock only external HTTP calls - fetchEventSource makes the actual API request
+jest.mock('@microsoft/fetch-event-source', () => ({
+    fetchEventSource: jest.fn(),
+    EventStreamContentType: 'text/event-stream',
 }))
 
-// Mock ChatMessageList
-jest.mock('./ChatMessageList', () => ({
-    ChatMessageList: () => <div data-testid="chat-message-list">Messages</div>,
-}))
-
-// Mock AskAiSuggestions
-jest.mock('./AskAiSuggestions', () => ({
-    AskAiSuggestions: () => (
-        <div data-testid="ask-ai-suggestions">Suggestions</div>
-    ),
-}))
-
-// Mock AiProviderSelector
-jest.mock('./AiProviderSelector', () => ({
-    AiProviderSelector: () => (
-        <div data-testid="ai-provider-selector">Provider Selector</div>
-    ),
-}))
-
-// Mock modal.store
-jest.mock('../modal.store', () => ({
-    useModalActions: jest.fn(() => ({
-        setModalMode: jest.fn(),
-        openModal: jest.fn(),
-        closeModal: jest.fn(),
-        toggleModal: jest.fn(),
-    })),
-}))
-
-// Mock cooldown hooks
-jest.mock('./useAskAiCooldown', () => ({
-    useIsAskAiCooldownActive: jest.fn(() => false),
-    useAskAiCooldown: jest.fn(() => null),
-    useAskAiCooldownActions: jest.fn(() => ({
-        setCooldown: jest.fn(),
-        updateCooldown: jest.fn(),
-        notifyCooldownFinished: jest.fn(),
-        acknowledgeCooldownFinished: jest.fn(),
-    })),
-}))
-
-jest.mock('../useCooldown', () => ({
-    useCooldown: jest.fn(),
-}))
-
-// Mock SearchOrAskAiErrorCallout
-jest.mock('../SearchOrAskAiErrorCallout', () => ({
-    SearchOrAskAiErrorCallout: () => null,
-}))
-
-const mockUseChatMessages = jest.mocked(
-    jest.requireMock('./chat.store').useChatMessages
-)
-const mockUseChatActions = jest.mocked(
-    jest.requireMock('./chat.store').useChatActions
-)
+// Helper to reset all stores to initial state
+const resetStores = () => {
+    chatStore.setState({
+        chatMessages: [],
+        conversationId: null,
+        aiProvider: 'LlmGateway',
+        scrollPosition: 0,
+    })
+    modalStore.setState({
+        isOpen: false,
+        mode: 'search',
+    })
+    cooldownStore.setState({
+        cooldowns: {
+            search: { cooldown: null, awaitingNewInput: false },
+            askAi: { cooldown: null, awaitingNewInput: false },
+        },
+    })
+}
 
 describe('Chat Component', () => {
-    const mockSubmitQuestion = jest.fn()
-    const mockClearChat = jest.fn()
-    const mockClearNon429Errors = jest.fn()
-
     beforeEach(() => {
         jest.clearAllMocks()
-        mockUseChatActions.mockReturnValue({
-            submitQuestion: mockSubmitQuestion,
-            clearChat: mockClearChat,
-            clearNon429Errors: mockClearNon429Errors,
-        })
+        resetStores()
     })
 
     describe('Empty state', () => {
         it('should show empty prompt when no messages', () => {
-            // Arrange
-            mockUseChatMessages.mockReturnValue([])
-
             // Act
             render(<Chat />)
 
@@ -102,139 +48,152 @@ describe('Chat Component', () => {
                 screen.getByText(/Hi! I'm the Elastic Docs AI Assistant/i)
             ).toBeInTheDocument()
             expect(
-                screen.getByText(/Ask me anything about Elasticsearch/i)
+                screen.getByText(
+                    /I'm here to help you find answers about Elastic/i
+                )
             ).toBeInTheDocument()
         })
 
-        it('should show suggestions when no messages', () => {
-            // Arrange
-            mockUseChatMessages.mockReturnValue([])
-
+        it('should show example questions when no messages', () => {
             // Act
             render(<Chat />)
 
             // Assert
-            expect(screen.getByText(/Try asking me:/i)).toBeInTheDocument()
+            expect(screen.getByText(/Example questions/i)).toBeInTheDocument()
         })
 
-        it('should not show "New conversation" button when no messages', () => {
-            // Arrange
-            mockUseChatMessages.mockReturnValue([])
-
+        it('should not show "Clear conversation" button when no messages', () => {
             // Act
             render(<Chat />)
 
             // Assert
             expect(
-                screen.queryByRole('button', { name: /new conversation/i })
+                screen.queryByRole('button', { name: /clear conversation/i })
             ).not.toBeInTheDocument()
         })
     })
 
     describe('With messages', () => {
-        const mockMessages = [
-            {
-                id: '1',
-                type: 'user' as const,
-                content: 'What is Elasticsearch?',
-                conversationId: 'thread-1',
-                timestamp: Date.now(),
-            },
-            {
-                id: '2',
-                type: 'ai' as const,
-                content: 'Elasticsearch is a search engine...',
+        const setupMessages = () => {
+            chatStore.setState({
+                chatMessages: [
+                    {
+                        id: '1',
+                        type: 'user',
+                        content: 'What is Elasticsearch?',
+                        conversationId: 'thread-1',
+                        timestamp: Date.now(),
+                    },
+                    {
+                        id: '2',
+                        type: 'ai',
+                        content:
+                            'Elasticsearch is a distributed search engine...',
+                        conversationId: 'thread-1',
+                        timestamp: Date.now(),
+                        status: 'complete',
+                    },
+                ],
                 conversationId: 'thread-1',
-                timestamp: Date.now(),
-                status: 'complete' as const,
-            },
-        ]
+            })
+        }
 
-        it('should show message list when there are messages', () => {
+        it('should show messages when there are messages', () => {
             // Arrange
-            mockUseChatMessages.mockReturnValue(mockMessages)
+            setupMessages()
 
             // Act
             render(<Chat />)
 
-            // Assert
-            expect(screen.getByTestId('chat-message-list')).toBeInTheDocument()
+            // Assert - real messages should be rendered
+            expect(
+                screen.getByText('What is Elasticsearch?')
+            ).toBeInTheDocument()
+            expect(
+                screen.getByText(
+                    /Elasticsearch is a distributed search engine/i
+                )
+            ).toBeInTheDocument()
             expect(
                 screen.queryByText(/Hi! I'm the Elastic Docs AI Assistant/i)
             ).not.toBeInTheDocument()
         })
 
-        it('should show "New conversation" button when there are messages', () => {
+        it('should show "Clear conversation" button when there are messages', () => {
             // Arrange
-            mockUseChatMessages.mockReturnValue(mockMessages)
+            setupMessages()
 
             // Act
             render(<Chat />)
 
             // Assert
             expect(
-                screen.getByRole('button', { name: /new conversation/i })
+                screen.getByRole('button', { name: /clear conversation/i })
             ).toBeInTheDocument()
         })
 
-        it('should call clearChat when "New conversation" is clicked', async () => {
+        it('should clear messages when "Clear conversation" is clicked', async () => {
             // Arrange
-            mockUseChatMessages.mockReturnValue(mockMessages)
+            setupMessages()
             const user = userEvent.setup()
 
             // Act
             render(<Chat />)
             await user.click(
-                screen.getByRole('button', { name: /new conversation/i })
+                screen.getByRole('button', { name: /clear conversation/i })
             )
 
-            // Assert
-            expect(mockClearChat).toHaveBeenCalledTimes(1)
+            // Assert - messages should be cleared
+            await waitFor(() => {
+                expect(chatStore.getState().chatMessages).toHaveLength(0)
+            })
         })
     })
 
     describe('Input and submission', () => {
         it('should render input field', () => {
-            // Arrange
-            mockUseChatMessages.mockReturnValue([])
-
             // Act
             render(<Chat />)
 
             // Assert
             expect(
-                screen.getByPlaceholderText(/Ask Elastic Docs AI Assistant/i)
+                screen.getByPlaceholderText(
+                    /Ask the Elastic Docs AI Assistant/i
+                )
             ).toBeInTheDocument()
         })
 
-        it('should submit question when Enter is pressed', async () => {
+        it('should add user message to store when question is submitted', async () => {
             // Arrange
-            mockUseChatMessages.mockReturnValue([])
             const user = userEvent.setup()
             const question = 'What is Kibana?'
 
             // Act
             render(<Chat />)
             const input = screen.getByPlaceholderText(
-                /Ask Elastic Docs AI Assistant/i
+                /Ask the Elastic Docs AI Assistant/i
             )
             await user.type(input, question)
             await user.keyboard('{Enter}')
 
-            // Assert
-            expect(mockSubmitQuestion).toHaveBeenCalledWith(question)
+            // Assert - user message should be in the store
+            await waitFor(() => {
+                const messages = chatStore.getState().chatMessages
+                expect(messages.length).toBeGreaterThanOrEqual(1)
+                expect(messages[0].type).toBe('user')
+                expect(messages[0].content).toBe(question)
+            })
         })
 
-        it('should submit question when Send button is clicked', async () => {
+        it('should add user message when Send button is clicked', async () => {
             // Arrange
-            mockUseChatMessages.mockReturnValue([])
             const user = userEvent.setup()
             const question = 'What is Kibana?'
 
             // Act
             render(<Chat />)
             const input = screen.getByPlaceholderText(
-                /Ask Elastic Docs AI Assistant/i
+                /Ask the Elastic Docs AI Assistant/i
             )
             await user.type(input, question)
             await user.click(
@@ -242,36 +201,37 @@ describe('Chat Component', () => {
             )
 
             // Assert
-            expect(mockSubmitQuestion).toHaveBeenCalledWith(question)
+            await waitFor(() => {
+                const messages = chatStore.getState().chatMessages
+                expect(messages[0].content).toBe(question)
+            })
         })
 
         it('should not submit empty question', async () => {
             // Arrange
-            mockUseChatMessages.mockReturnValue([])
             const user = userEvent.setup()
 
             // Act
             render(<Chat />)
             const input = screen.getByPlaceholderText(
-                /Ask Elastic Docs AI Assistant/i
+                /Ask the Elastic Docs AI Assistant/i
             )
             await user.type(input, '   ')
             await user.keyboard('{Enter}')
 
-            // Assert
-            expect(mockSubmitQuestion).not.toHaveBeenCalled()
+            // Assert - no messages should be added
+            expect(chatStore.getState().chatMessages).toHaveLength(0)
         })
 
         it('should clear input after submission', async () => {
             // Arrange
-            mockUseChatMessages.mockReturnValue([])
             const user = userEvent.setup()
 
             // Act
             render(<Chat />)
             const input = screen.getByPlaceholderText(
-                /Ask Elastic Docs AI Assistant/i
-            ) as HTMLInputElement
+                /Ask the Elastic Docs AI Assistant/i
+            ) as HTMLTextAreaElement
             await user.type(input, 'test question')
             await user.keyboard('{Enter}')
 
@@ -282,45 +242,20 @@ describe('Chat Component', () => {
         })
     })
 
-    describe('Auto-focus', () => {
-        it('should focus input when AI completes response', () => {
+    describe('Close modal', () => {
+        it('should close modal when close button is clicked', async () => {
             // Arrange
-            const streamingMessages = [
-                {
-                    id: '1',
-                    type: 'user' as const,
-                    content: 'Question',
-                    conversationId: 'thread-1',
-                    timestamp: Date.now(),
-                },
-                {
-                    id: '2',
-                    type: 'ai' as const,
-                    content: 'Answer...',
-                    conversationId: 'thread-1',
-                    timestamp: Date.now(),
-                    status: 'streaming' as const,
-                },
-            ]
-
-            mockUseChatMessages.mockReturnValue(streamingMessages)
-            const { rerender } = render(<Chat />)
-
-            // Act - simulate AI completing the response
-            const completeMessages = [
-                ...streamingMessages.slice(0, 1),
-                { ...streamingMessages[1], status: 'complete' as const },
-            ]
-            mockUseChatMessages.mockReturnValue(completeMessages)
-            rerender(<Chat />)
+            modalStore.setState({ isOpen: true })
+            const user = userEvent.setup()
 
-            // Assert
-            const input = screen.getByPlaceholderText(
-                /Ask Elastic Docs AI Assistant/i
+            // Act
+            render(<Chat />)
+            await user.click(
+                screen.getByRole('button', { name: /close ask ai modal/i })
             )
-            // In a real test environment, we'd check if focus() was called
-            // This is a limitation of jsdom
-            expect(input).toBeInTheDocument()
+
+            // Assert
+            expect(modalStore.getState().isOpen).toBe(false)
         })
     })
 })
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
index b8f306c0b..45ebb7559 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
@@ -1,283 +1,391 @@
-/** @jsxImportSource @emotion/react */
+import { InfoBanner } from '../InfoBanner'
+import { KeyboardShortcutsFooter } from '../KeyboardShortcutsFooter'
 import { SearchOrAskAiErrorCallout } from '../SearchOrAskAiErrorCallout'
-import { AiProviderSelector } from './AiProviderSelector'
+import AiIcon from '../ai-icon.svg'
+import { useModalActions } from '../modal.store'
 import { AskAiSuggestions } from './AskAiSuggestions'
+import { ChatInput } from './ChatInput'
 import { ChatMessageList } from './ChatMessageList'
-import { useChatActions, useChatMessages } from './chat.store'
+import {
+    ChatMessage,
+    useChatActions,
+    useChatMessages,
+    useChatScrollPosition,
+    useIsStreaming,
+} from './chat.store'
 import { useIsAskAiCooldownActive } from './useAskAiCooldown'
 import {
-    useEuiOverflowScroll,
-    EuiButtonEmpty,
     EuiButtonIcon,
-    EuiFieldText,
+    EuiEmptyPrompt,
     EuiFlexGroup,
     EuiFlexItem,
-    EuiEmptyPrompt,
+    EuiHorizontalRule,
+    EuiIcon,
     EuiSpacer,
-    EuiTitle,
+    EuiText,
+    EuiToolTip,
+    useEuiFontSize,
+    useEuiOverflowScroll,
     useEuiTheme,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
 
-const containerStyles = css`
-    height: 100%;
-    max-height: 70vh;
-    overflow: hidden;
-`
+export const Chat = () => {
+    const messages = useChatMessages()
+    const inputRef = useRef<HTMLTextAreaElement>(null)
+    const scrollRef = useRef<HTMLDivElement>(null)
 
-const scrollContainerStyles = css`
-    position: relative;
-    overflow: hidden;
-`
+    const handleScroll = useScrollPersistence(scrollRef)
+    useFocusOnComplete(inputRef)
 
-const scrollableStyles = css`
-    height: 100%;
-    overflow-y: auto;
-    scrollbar-gutter: stable;
-    padding: 1rem;
-`
+    const {
+        inputValue,
+        setInputValue,
+        handleSubmit,
+        handleAbort,
+        handleAbortReady,
+        isStreaming,
+        isCooldownActive,
+    } = useChatSubmit(scrollRef)
 
-const messagesStyles = css`
-    max-width: 800px;
-    margin: 0 auto;
-`
+    return (
+        <EuiFlexGroup
+            direction="column"
+            gutterSize="none"
+            css={containerStyles}
+        >
+            <ChatHeader />
 
-const scrollToBottom = (container: HTMLDivElement | null) => {
-    if (!container) return
-    container.scrollTop = container.scrollHeight
+            <ChatScrollArea
+                scrollRef={scrollRef}
+                onScroll={handleScroll}
+                messages={messages}
+                isCooldownActive={isCooldownActive}
+                onAbortReady={handleAbortReady}
+            />
+
+            <ChatInputArea
+                inputRef={inputRef}
+                value={inputValue}
+                onChange={setInputValue}
+                onSubmit={handleSubmit}
+                onAbort={handleAbort}
+                disabled={isCooldownActive}
+                isStreaming={isStreaming}
+            />
+
+            <InfoBanner />
+            <KeyboardShortcutsFooter shortcuts={KEYBOARD_SHORTCUTS} />
+        </EuiFlexGroup>
+    )
 }
 
-// Header shown when a conversation exists
-const NewConversationHeader = ({
-    onClick,
-    disabled,
-}: {
-    onClick: () => void
-    disabled?: boolean
-}) => (
-    <EuiFlexItem grow={false}>
-        <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
-            <EuiFlexItem grow={false}>
-                <EuiButtonEmpty
-                    size="xs"
-                    onClick={onClick}
-                    iconType="refresh"
-                    disabled={disabled}
+const ChatHeader = () => {
+    const { closeModal } = useModalActions()
+    const { clearChat } = useChatActions()
+    const messages = useChatMessages()
+    const { euiTheme } = useEuiTheme()
+    const smallFontsize = useEuiFontSize('s').fontSize
+    return (
+        <>
+            <div
+                css={css`
+                    padding-block: ${euiTheme.size.m};
+                    padding-inline: ${euiTheme.size.base};
+                    display: grid;
+                    height: 56px;
+                    grid-template-columns: 1fr auto auto;
+                    align-items: center;
+                `}
+            >
+                <div
+                    css={css`
+                        display: flex;
+                        align-items: center;
+                        gap: ${euiTheme.size.m};
+                    `}
                 >
-                    New conversation
-                </EuiButtonEmpty>
-            </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="s" />
-    </EuiFlexItem>
-)
+                    <EuiIcon type={AiIcon} />
+                    <span
+                        css={css`
+                            font-size: ${smallFontsize};
+                            font-weight: ${euiTheme.font.weight.medium};
+                        `}
+                    >
+                        Elastic Docs AI Assistant
+                    </span>
+                </div>
+                <div
+                    css={css`
+                        display: flex;
+                        gap: ${euiTheme.size.s};
+                    `}
+                >
+                    {messages.length > 0 && (
+                        <EuiToolTip content="Clear conversation">
+                            <EuiButtonIcon
+                                aria-label="Clear conversation"
+                                iconType="trash"
+                                color="text"
+                                onClick={() => clearChat()}
+                            />
+                        </EuiToolTip>
+                    )}
+                    <EuiButtonIcon
+                        aria-label="Close Ask AI modal"
+                        iconType="cross"
+                        color="text"
+                        onClick={() => closeModal()}
+                    />
+                </div>
+            </div>
+            <EuiHorizontalRule margin="none" />
+        </>
+    )
+}
 
-export const Chat = () => {
+interface ChatScrollAreaProps {
+    scrollRef: RefObject<HTMLDivElement>
+    onScroll: () => void
+    messages: ChatMessage[]
+    isCooldownActive: boolean
+    onAbortReady: (abort: () => void) => void
+}
+
+const ChatScrollArea = ({
+    scrollRef,
+    onScroll,
+    messages,
+    isCooldownActive,
+    onAbortReady,
+}: ChatScrollAreaProps) => {
     const { euiTheme } = useEuiTheme()
-    const messages = useChatMessages()
-    const { submitQuestion, clearChat, clearNon429Errors, cancelStreaming } =
-        useChatActions()
-    const isCooldownActive = useIsAskAiCooldownActive()
-    const inputRef = useRef<HTMLInputElement>(null)
-    const scrollRef = useRef<HTMLDivElement>(null)
-    const lastMessageStatusRef = useRef<string | null>(null)
-    const abortFunctionRef = useRef<(() => void) | null>(null)
-    const [inputValue, setInputValue] = useState('')
 
-    const dynamicScrollableStyles = css`
-        ${scrollableStyles}
+    const scrollableStyles = css`
+        height: 100%;
+        overflow-y: auto;
+        scrollbar-gutter: stable;
+        padding: ${euiTheme.size.l};
         ${useEuiOverflowScroll('y', true)}
     `
 
-    const isStreaming =
-        messages.length > 0 &&
-        messages[messages.length - 1].type === 'ai' &&
-        messages[messages.length - 1].status === 'streaming'
+    return (
+        <EuiFlexItem grow={true} css={scrollContainerStyles}>
+            <div ref={scrollRef} css={scrollableStyles} onScroll={onScroll}>
+                {messages.length === 0 ? (
+                    <ChatEmptyState disabled={isCooldownActive} />
+                ) : (
+                    <div css={messagesStyles}>
+                        <ChatMessageList
+                            messages={messages}
+                            onAbortReady={onAbortReady}
+                        />
+                    </div>
+                )}
+            </div>
+        </EuiFlexItem>
+    )
+}
 
-    const handleAbortReady = useCallback((abort: () => void) => {
-        abortFunctionRef.current = abort
-    }, [])
+const ChatEmptyState = ({ disabled }: { disabled: boolean }) => (
+    <>
+        <EuiEmptyPrompt
+            icon={<EuiIcon type={AiIcon} size="xxl" />}
+            title={<h2>Hi! I'm the Elastic Docs AI Assistant</h2>}
+            body={
+                <p>
+                    I'm here to help you find answers about Elastic, powered
+                    entirely by our technical documentation. How can I help?
+                </p>
+            }
+        />
+        <EuiSpacer size="s" />
+        <div>
+            <EuiText size="xs" color="subdued">
+                Example questions
+            </EuiText>
+            <EuiSpacer size="s" />
+            <AskAiSuggestions disabled={disabled} />
+        </div>
+        <div css={messagesStyles}>
+            <SearchOrAskAiErrorCallout error={null} domain="askAi" />
+        </div>
+    </>
+)
+
+interface ChatInputAreaProps {
+    inputRef: RefObject<HTMLTextAreaElement>
+    value: string
+    onChange: (value: string) => void
+    onSubmit: (question: string) => void
+    onAbort: () => void
+    disabled: boolean
+    isStreaming: boolean
+}
+
+const ChatInputArea = ({
+    inputRef,
+    value,
+    onChange,
+    onSubmit,
+    onAbort,
+    disabled,
+    isStreaming,
+}: ChatInputAreaProps) => {
+    const { euiTheme } = useEuiTheme()
+
+    return (
+        <EuiFlexItem grow={false}>
+            <EuiSpacer size="s" />
+            <div
+                css={css`
+                    position: relative;
+                    padding-inline: ${euiTheme.size.base};
+                `}
+            >
+                <ChatInput
+                    value={value}
+                    onChange={onChange}
+                    onSubmit={onSubmit}
+                    onAbort={onAbort}
+                    disabled={disabled}
+                    inputRef={inputRef}
+                    isStreaming={isStreaming}
+                />
+            </div>
+        </EuiFlexItem>
+    )
+}
+
+function useChatSubmit(scrollRef: RefObject<HTMLDivElement | null>) {
+    const { submitQuestion, clearNon429Errors, cancelStreaming } =
+        useChatActions()
+    const isCooldownActive = useIsAskAiCooldownActive()
+    const isStreaming = useIsStreaming()
+
+    const [inputValue, setInputValue] = useState('')
+    const abortRef = useRef<(() => void) | null>(null)
 
     useEffect(() => {
         if (!isStreaming) {
-            abortFunctionRef.current = null
+            abortRef.current = null
         }
     }, [isStreaming])
 
     const handleSubmit = useCallback(
         (question: string) => {
-            const trimmedQuestion = question.trim()
-            if (!trimmedQuestion || isCooldownActive) {
-                return
-            }
+            const trimmed = question.trim()
+            if (!trimmed || isCooldownActive) return
 
             clearNon429Errors()
-            submitQuestion(trimmedQuestion)
-
-            if (inputRef.current) {
-                inputRef.current.value = ''
-            }
+            submitQuestion(trimmed)
             setInputValue('')
 
-            // Scroll to bottom after new message
-            setTimeout(() => scrollToBottom(scrollRef.current), 100)
+            setTimeout(() => {
+                if (scrollRef.current) {
+                    scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+                }
+            }, 100)
         },
-        [submitQuestion, isCooldownActive, clearNon429Errors]
+        [submitQuestion, isCooldownActive, clearNon429Errors, scrollRef]
     )
 
-    const handleButtonClick = useCallback(() => {
-        if (isStreaming && abortFunctionRef.current) {
-            // Interrupt current query
-            abortFunctionRef.current()
-            abortFunctionRef.current = null
-            // Update message status from 'streaming' to 'complete'
+    const handleAbort = useCallback(() => {
+        if (abortRef.current) {
+            abortRef.current()
+            abortRef.current = null
             cancelStreaming()
-        } else if (inputRef.current) {
-            handleSubmit(inputRef.current.value)
         }
-    }, [isStreaming, handleSubmit, cancelStreaming])
+    }, [cancelStreaming])
+
+    const handleAbortReady = useCallback((abort: () => void) => {
+        abortRef.current = abort
+    }, [])
+
+    return {
+        inputValue,
+        setInputValue,
+        handleSubmit,
+        handleAbort,
+        handleAbortReady,
+        isStreaming,
+        isCooldownActive,
+    }
+}
+
+/**
+ * Manages scroll position persistence across modal open/close.
+ */
+function useScrollPersistence(scrollRef: RefObject<HTMLDivElement | null>) {
+    const savedPosition = useChatScrollPosition()
+    const { setScrollPosition } = useChatActions()
 
-    // Refocus input when AI answer transitions to complete
     useEffect(() => {
-        if (messages.length > 0) {
-            const lastMessage = messages[messages.length - 1]
-
-            // Track status transitions for AI messages
-            if (lastMessage.type === 'ai') {
-                const currentStatus = lastMessage.status
-                const previousStatus = lastMessageStatusRef.current
-
-                // If status changed from streaming to complete, focus input
-                if (
-                    previousStatus === 'streaming' &&
-                    currentStatus === 'complete'
-                ) {
-                    setTimeout(() => {
-                        inputRef.current?.focus()
-                    }, 100)
+        if (scrollRef.current && savedPosition > 0) {
+            requestAnimationFrame(() => {
+                if (scrollRef.current) {
+                    scrollRef.current.scrollTop = savedPosition
                 }
+            })
+        }
+    }, [])
 
-                // Update the tracked status
-                lastMessageStatusRef.current = currentStatus || null
-            }
+    const handleScroll = useCallback(() => {
+        if (scrollRef.current) {
+            setScrollPosition(scrollRef.current.scrollTop)
         }
-    }, [messages])
+    }, [setScrollPosition, scrollRef])
 
-    return (
-        <EuiFlexGroup
-            direction="column"
-            gutterSize="none"
-            css={containerStyles}
-        >
-            <EuiSpacer size="m" />
+    return handleScroll
+}
 
-            {messages.length > 0 && (
-                <NewConversationHeader
-                    onClick={clearChat}
-                    disabled={isCooldownActive}
-                />
-            )}
-
-            <EuiFlexItem grow={true} css={scrollContainerStyles}>
-                <div ref={scrollRef} css={dynamicScrollableStyles}>
-                    {messages.length === 0 ? (
-                        <>
-                            <EuiEmptyPrompt
-                                iconType="logoElastic"
-                                title={
-                                    <h2>
-                                        Hi! I'm the Elastic Docs AI Assistant
-                                    </h2>
-                                }
-                                body={
-                                    <>
-                                        <p>
-                                            I can help answer your questions
-                                            about Elastic documentation. <br />
-                                            Ask me anything about Elasticsearch,
-                                            Kibana, Observability, Security, and
-                                            more.
-                                        </p>
-                                        <EuiSpacer size="m" />
-                                        <AiProviderSelector />
-                                    </>
-                                }
-                                footer={
-                                    <>
-                                        <EuiTitle size="xxs">
-                                            <h3>Try asking me:</h3>
-                                        </EuiTitle>
-                                        <EuiSpacer size="s" />
-                                        <AskAiSuggestions
-                                            disabled={isCooldownActive}
-                                        />
-                                    </>
-                                }
-                            />
-                            {/* Show error callout when there's a cooldown, even on initial page */}
-                            <div css={messagesStyles}>
-                                <SearchOrAskAiErrorCallout
-                                    error={null}
-                                    domain="askAi"
-                                />
-                            </div>
-                        </>
-                    ) : (
-                        <div css={messagesStyles}>
-                            <ChatMessageList
-                                messages={messages}
-                                onAbortReady={handleAbortReady}
-                            />
-                        </div>
-                    )}
-                </div>
-            </EuiFlexItem>
+/**
+ * Auto-focuses input when AI response completes streaming.
+ */
+function useFocusOnComplete(inputRef: RefObject<HTMLTextAreaElement | null>) {
+    const messages = useChatMessages()
+    const lastStatusRef = useRef<string | null>(null)
 
-            {/* Input */}
-            <EuiFlexItem grow={false}>
-                <EuiSpacer size="s" />
-                <div
-                    css={css`
-                        position: relative;
-                        padding-inline: ${euiTheme.size.base};
-                    `}
-                >
-                    <EuiFieldText
-                        autoFocus
-                        inputRef={inputRef}
-                        fullWidth
-                        placeholder="Ask Elastic Docs AI Assistant"
-                        onChange={(e) => setInputValue(e.target.value)}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
-                                handleSubmit(e.currentTarget.value)
-                            }
-                        }}
-                        disabled={isCooldownActive}
-                    />
-                    <EuiButtonIcon
-                        aria-label={
-                            isStreaming ? 'Interrupt query' : 'Send message'
-                        }
-                        css={css`
-                            position: absolute;
-                            right: ${euiTheme.size.l};
-                            top: 50%;
-                            transform: translateY(-50%);
-                            border-radius: 9999px;
-                        `}
-                        color="primary"
-                        iconType={isStreaming ? 'cross' : 'comment'}
-                        display={
-                            inputValue.trim() || isStreaming ? 'fill' : 'base'
-                        }
-                        onClick={handleButtonClick}
-                        disabled={isCooldownActive}
-                    ></EuiButtonIcon>
-                </div>
-                <EuiSpacer size="m" />
-            </EuiFlexItem>
-        </EuiFlexGroup>
-    )
+    useEffect(() => {
+        const last = messages[messages.length - 1]
+        if (last?.type === 'ai') {
+            const currentStatus = last.status
+            const previousStatus = lastStatusRef.current
+
+            if (
+                previousStatus === 'streaming' &&
+                currentStatus === 'complete'
+            ) {
+                setTimeout(() => inputRef.current?.focus(), 100)
+            }
+
+            lastStatusRef.current = currentStatus || null
+        }
+    }, [messages, inputRef])
 }
+
+// ============================================================================
+// Constants & Styles (implementation details)
+// ============================================================================
+
+const KEYBOARD_SHORTCUTS = [
+    { keys: ['⌘K'], label: 'to search' },
+    { keys: ['Esc'], label: 'to close' },
+]
+
+const containerStyles = css`
+    height: 100%;
+    max-height: 70vh;
+    overflow: hidden;
+`
+
+const scrollContainerStyles = css`
+    position: relative;
+    overflow: hidden;
+`
+
+const messagesStyles = css`
+    max-width: 800px;
+    margin: 0 auto;
+`
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatInput.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatInput.tsx
new file mode 100644
index 000000000..75be4ce75
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatInput.tsx
@@ -0,0 +1,170 @@
+import { ElasticAiAssistantButtonIcon } from '../ElasticAiAssitant'
+import { euiShadow, useEuiScrollBar, useEuiTheme } from '@elastic/eui'
+import { css } from '@emotion/react'
+import { useCallback, useEffect, useRef } from 'react'
+
+const CONFIG = {
+    MAX_LINES: 10,
+    MIN_HEIGHT: 48,
+    BORDER_RADIUS: 24,
+    BUTTON_SIZE: 32,
+} as const
+
+interface ChatInputProps {
+    value: string
+    onChange: (value: string) => void
+    onSubmit: (value: string) => void
+    onAbort?: () => void
+    disabled?: boolean
+    placeholder?: string
+    inputRef?: React.MutableRefObject<HTMLTextAreaElement | null>
+    isStreaming?: boolean
+}
+
+export const ChatInput = ({
+    value,
+    onChange,
+    onSubmit,
+    onAbort,
+    disabled = false,
+    placeholder = 'Ask the Elastic Docs AI Assistant',
+    inputRef,
+    isStreaming = false,
+}: ChatInputProps) => {
+    const { euiTheme } = useEuiTheme()
+    const scollbarStyling = useEuiScrollBar()
+    const shadowStyling = euiShadow(useEuiTheme(), 's')
+    const internalRef = useRef<HTMLTextAreaElement | null>(null)
+
+    const textareaRefCallback = useCallback(
+        (element: HTMLTextAreaElement | null) => {
+            internalRef.current = element
+            if (inputRef) {
+                inputRef.current = element
+            }
+        },
+        [inputRef]
+    )
+
+    // Adjust height based on content
+    useEffect(() => {
+        const textarea = internalRef.current
+        if (!textarea) return
+
+        // Calculate max height from computed styles
+        const computedStyle = window.getComputedStyle(textarea)
+        const lineHeight = parseFloat(computedStyle.lineHeight) || 20
+        const verticalPadding =
+            parseFloat(computedStyle.paddingTop) +
+            parseFloat(computedStyle.paddingBottom)
+        const maxHeight = lineHeight * CONFIG.MAX_LINES + verticalPadding
+
+        if (!value.trim()) {
+            textarea.style.height = `${CONFIG.MIN_HEIGHT}px`
+            return
+        }
+
+        textarea.style.height = 'auto'
+        textarea.style.height = `${Math.min(
+            Math.max(textarea.scrollHeight, CONFIG.MIN_HEIGHT),
+            maxHeight
+        )}px`
+    }, [value])
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault()
+            if (!isStreaming) {
+                onSubmit(value)
+            }
+        }
+    }
+
+    const hasContent = value.trim().length > 0
+
+    return (
+        <div
+            css={css`
+                ${shadowStyling};
+                display: flex;
+                align-items: center;
+                gap: ${euiTheme.size.base};
+                border-radius: ${CONFIG.BORDER_RADIUS}px;
+                border: ${euiTheme.border.thin};
+                border-color: ${euiTheme.border.color};
+                background-color: ${disabled
+                    ? euiTheme.colors.lightestShade
+                    : euiTheme.colors.emptyShade};
+                padding-right: 8px;
+                min-height: ${CONFIG.MIN_HEIGHT}px;
+                cursor: ${disabled ? 'not-allowed' : 'auto'};
+                outline: 2px solid transparent;
+                outline-offset: -1px;
+
+                &:focus-within {
+                    border-color: ${euiTheme.colors.primary};
+                    outline-color: ${euiTheme.colors.primary};
+                }
+                &:hover {
+                    border-color: ${euiTheme.colors.borderBasePlain};
+                }
+            `}
+        >
+            <textarea
+                ref={textareaRefCallback}
+                name="chat-input"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                onKeyDown={handleKeyDown}
+                disabled={disabled}
+                placeholder={placeholder}
+                autoFocus
+                spellCheck={false}
+                rows={1}
+                css={css`
+                    ${scollbarStyling};
+                    flex: 1;
+                    resize: none;
+                    border: none;
+                    outline: none !important;
+                    background: transparent;
+                    min-height: 48px;
+                    padding: 12px 20px;
+                    overflow-y: auto;
+                    box-sizing: border-box;
+                    color: ${euiTheme.colors.textParagraph};
+                    font-family: ${euiTheme.font.family};
+
+                    &:focus,
+                    &:focus-visible,
+                    &:active {
+                        outline: none !important;
+                        border: none !important;
+                        box-shadow: none !important;
+                    }
+
+                    &:disabled {
+                        color: ${euiTheme.colors.textDisabled};
+                        cursor: not-allowed;
+                    }
+
+                    &::placeholder {
+                        color: ${euiTheme.colors.textDisabled};
+                    }
+                `}
+            />
+            <ElasticAiAssistantButtonIcon
+                fill={hasContent || isStreaming}
+                iconType={isStreaming ? 'stop' : 'kqlFunction'}
+                aria-label={isStreaming ? 'Stop streaming' : 'Send message'}
+                css={css`
+                    inline-size: ${CONFIG.BUTTON_SIZE}px;
+                    block-size: ${CONFIG.BUTTON_SIZE}px;
+                    border-radius: 9999px;
+                `}
+                onClick={() => (isStreaming ? onAbort?.() : onSubmit(value))}
+                disabled={disabled || (!hasContent && !isStreaming)}
+            />
+        </div>
+    )
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.test.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.test.tsx
index 7f4f5327b..b3f0c63ce 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.test.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.test.tsx
@@ -1,101 +1,23 @@
+import { cooldownStore } from '../cooldown.store'
 import { ApiError } from '../errorHandling'
 import { ChatMessage } from './ChatMessage'
 import { ChatMessage as ChatMessageType } from './chat.store'
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
 
-// Mock EuiCallOut and EuiSpacer for SearchOrAskAiErrorCallout
-jest.mock('@elastic/eui', () => {
-    const actual = jest.requireActual('@elastic/eui')
-    return {
-        ...actual,
-        EuiCallOut: ({
-            title,
-            children,
-            color,
-            iconType,
-            size,
-        }: {
-            title: string
-            children: React.ReactNode
-            color: string
-            iconType: string
-            size: string
-        }) => (
-            <div
-                data-testid="eui-callout"
-                data-title={title}
-                data-color={color}
-                data-icon-type={iconType}
-                data-size={size}
-            >
-                {children}
-            </div>
-        ),
-        EuiSpacer: ({ size }: { size: string }) => (
-            <div data-testid="eui-spacer" data-size={size} />
-        ),
-    }
-})
-
-// Mock domain-specific cooldown hooks
-jest.mock('../Search/useSearchCooldown', () => ({
-    useSearchErrorCalloutState: jest.fn(() => ({
-        hasActiveCooldown: false,
-        countdown: null,
-        awaitingNewInput: false,
-    })),
-}))
-
-jest.mock('../AskAi/useAskAiCooldown', () => ({
-    useAskAiErrorCalloutState: jest.fn(() => ({
-        hasActiveCooldown: false,
-        countdown: null,
-        awaitingNewInput: false,
-    })),
-}))
-
-// Mock errorHandling utilities
-jest.mock('../errorHandling', () => {
-    const actual = jest.requireActual('../errorHandling')
-    return {
-        ...actual,
-        getErrorMessage: jest.fn((error: ApiError | Error | null) => {
-            if (!error) return 'Unknown error'
-            if ('statusCode' in error) {
-                return `Error ${error.statusCode}: ${error.message}`
-            }
-            return error.message
-        }),
-        isApiError: jest.fn((error: ApiError | Error | null) => {
-            return (
-                error instanceof Error &&
-                'statusCode' in error &&
-                error.name === 'ApiError'
-            )
-        }),
-        isRateLimitError: jest.fn((error: ApiError | Error | null) => {
-            return (
-                error instanceof Error &&
-                'statusCode' in error &&
-                (error as ApiError).statusCode === 429
-            )
-        }),
-    }
-})
-
-// Mock rate limit handlers
-jest.mock('./useAskAiRateLimitHandler', () => ({
-    useAskAiRateLimitHandler: jest.fn(),
-}))
-
-jest.mock('../Search/useSearchRateLimitHandler', () => ({
-    useSearchRateLimitHandler: jest.fn(),
-}))
+// Reset cooldown store between tests
+const resetStores = () => {
+    cooldownStore.setState({
+        cooldowns: {
+            search: { cooldown: null, awaitingNewInput: false },
+            askAi: { cooldown: null, awaitingNewInput: false },
+        },
+    })
+}
 
 describe('ChatMessage Component', () => {
     beforeEach(() => {
-        jest.clearAllMocks()
+        resetStores()
     })
 
     describe('User messages', () => {
@@ -117,7 +39,7 @@ describe('ChatMessage Component', () => {
             ).toBeInTheDocument()
         })
 
-        it('should display user icon', () => {
+        it('should mark message as user type', () => {
             // Act
             render(<ChatMessage message={userMessage} />)
 
@@ -151,7 +73,7 @@ describe('ChatMessage Component', () => {
             ).toBeInTheDocument()
         })
 
-        it('should show feedback buttons', () => {
+        it('should show feedback buttons when complete', () => {
             // Act
             render(<ChatMessage message={aiMessage} />)
 
@@ -168,7 +90,7 @@ describe('ChatMessage Component', () => {
             ).toBeInTheDocument()
         })
 
-        it('should display Elastic logo icon', () => {
+        it('should have correct data attributes', () => {
             // Act
             render(<ChatMessage message={aiMessage} />)
 
@@ -179,11 +101,7 @@ describe('ChatMessage Component', () => {
                 )[0]
                 .closest('[data-message-type="ai"]')
             expect(messageElement).toBeInTheDocument()
-            // Check for logo icon
-            const logoIcon = messageElement?.querySelector(
-                '[data-type="logoElastic"]'
-            )
-            expect(logoIcon).toBeInTheDocument()
+            expect(messageElement).toHaveAttribute('data-message-id', '2')
         })
     })
 
@@ -197,12 +115,11 @@ describe('ChatMessage Component', () => {
             status: 'streaming',
         }
 
-        it('should show loading icon when streaming', () => {
+        it('should render streaming content', () => {
             // Act
             render(<ChatMessage message={streamingMessage} />)
 
             // Assert
-            // Loading elastic icon should be present
             const messageElement = screen
                 .getByText(/Elasticsearch is\.\.\./i)
                 .closest('[data-message-type="ai"]')
@@ -219,54 +136,44 @@ describe('ChatMessage Component', () => {
                     name: /^This answer was helpful$/i,
                 })
             ).not.toBeInTheDocument()
-            expect(
-                screen.queryByRole('button', {
-                    name: /^This answer was not helpful$/i,
-                })
-            ).not.toBeInTheDocument()
         })
     })
 
     describe('AI messages - error', () => {
-        const testError = new Error('Test error') as ApiError
-        testError.name = 'ApiError'
-        testError.statusCode = 500
-
-        const errorMessage: ChatMessageType = {
-            id: '4',
-            type: 'ai',
-            content: 'Previous content...',
-            conversationId: 'thread-1',
-            timestamp: Date.now(),
-            status: 'error',
-            error: testError,
+        const createErrorMessage = (): ChatMessageType => {
+            const testError = new Error('Server error') as ApiError
+            testError.name = 'ApiError'
+            testError.statusCode = 500
+
+            return {
+                id: '4',
+                type: 'ai',
+                content: '',
+                conversationId: 'thread-1',
+                timestamp: Date.now(),
+                status: 'error',
+                error: testError,
+            }
         }
 
-        it('should show error message', () => {
+        it('should show error callout when status is error', () => {
             // Act
-            render(<ChatMessage message={errorMessage} />)
+            render(<ChatMessage message={createErrorMessage()} />)
 
-            // Assert
-            const callout = screen.getByTestId('eui-callout')
-            expect(callout).toBeInTheDocument()
-            expect(callout).toHaveAttribute(
-                'data-title',
-                'Sorry, there was an error'
-            )
-            expect(callout).toHaveTextContent('Test error')
+            // Assert - error callout should be visible with title
+            expect(
+                screen.getByText(/sorry, there was an error/i)
+            ).toBeInTheDocument()
         })
 
-        it('should display previous content before error occurred', () => {
+        it('should display error guidance for 5xx errors', () => {
             // Act
-            render(<ChatMessage message={errorMessage} />)
+            render(<ChatMessage message={createErrorMessage()} />)
 
-            // Assert
-            // When there's an error, the content is hidden, only the error callout is shown
-            expect(screen.getByTestId('eui-callout')).toBeInTheDocument()
-            // The content is not rendered when hasError is true
+            // Assert - 5xx errors show generic guidance
             expect(
-                screen.queryByText(/Previous content/i)
-            ).not.toBeInTheDocument()
+                screen.getByText(/We are unable to process your request/i)
+            ).toBeInTheDocument()
         })
     })
 
@@ -280,11 +187,11 @@ describe('ChatMessage Component', () => {
             status: 'complete',
         }
 
-        it('should render markdown content', () => {
+        it('should render markdown as HTML', () => {
             // Act
             render(<ChatMessage message={messageWithMarkdown} />)
 
-            // Assert - EuiMarkdownFormat will render the markdown
+            // Assert - Bold text should be rendered
             expect(screen.getByText(/Bold text/)).toBeInTheDocument()
         })
     })
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
index ba2d5af15..8e1231325 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
@@ -1,5 +1,6 @@
 import { initCopyButton } from '../../../copybutton'
 import { hljs } from '../../../hljs'
+import { aiGradients } from '../ElasticAiAssitant'
 import { SearchOrAskAiErrorCallout } from '../SearchOrAskAiErrorCallout'
 import { ApiError } from '../errorHandling'
 import { AskAiEvent, ChunkEvent, EventTypes } from './AskAiEvent'
@@ -13,7 +14,6 @@ import {
     EuiFlexGroup,
     EuiFlexItem,
     EuiIcon,
-    EuiLoadingElastic,
     EuiPanel,
     EuiSpacer,
     EuiText,
@@ -127,7 +127,8 @@ const getToolCallStatus = (event: AskAiEvent): string => {
 // Helper function for computing AI status - time-based latest status
 const computeAiStatus = (
     events: AskAiEvent[],
-    isComplete: boolean
+    isComplete: boolean,
+    content: string
 ): string | null => {
     if (isComplete) return null
 
@@ -151,7 +152,17 @@ const computeAiStatus = (
     // Get the most recent status-worthy event
     const latestEvent = statusEvents[statusEvents.length - 1]
 
-    if (!latestEvent) return STATUS_MESSAGES.THINKING
+    // If no events but we have content, we're generating
+    // (streaming managed by singleton manager outside React)
+    if (!latestEvent) {
+        if (content) {
+            if (content.includes('<!--REFERENCES')) {
+                return STATUS_MESSAGES.GATHERING
+            }
+            return STATUS_MESSAGES.GENERATING
+        }
+        return STATUS_MESSAGES.THINKING
+    }
 
     switch (latestEvent.type) {
         case EventTypes.REASONING:
@@ -191,38 +202,46 @@ const ActionBar = ({
     content: string
     onRetry?: () => void
 }) => (
-    <EuiFlexGroup responsive={false} component="span" gutterSize="none">
+    <EuiFlexGroup
+        responsive={false}
+        component="span"
+        gutterSize="none"
+        direction="rowReverse"
+    >
         <EuiFlexItem grow={false}>
-            <EuiToolTip content="This answer was helpful">
+            <EuiToolTip content="Not helpful">
                 <EuiButtonIcon
-                    aria-label="This answer was helpful"
-                    iconType="thumbUp"
-                    color="success"
-                    size="s"
+                    aria-label="This answer was not helpful"
+                    iconType="thumbDown"
+                    color="danger"
+                    size="xs"
+                    iconSize="s"
                 />
             </EuiToolTip>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-            <EuiToolTip content="This answer was not helpful">
+            <EuiToolTip content="Mark as helpful">
                 <EuiButtonIcon
-                    aria-label="This answer was not helpful"
-                    iconType="thumbDown"
-                    color="danger"
-                    size="s"
+                    aria-label="This answer was helpful"
+                    iconType="thumbUp"
+                    color="success"
+                    size="xs"
+                    iconSize="s"
                 />
             </EuiToolTip>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
             <EuiCopy
                 textToCopy={content}
-                beforeMessage="Copy markdown"
+                beforeMessage="Copy as markdown"
                 afterMessage="Copied!"
             >
                 {(copy) => (
                     <EuiButtonIcon
                         aria-label="Copy markdown"
                         iconType="copy"
-                        size="s"
+                        size="xs"
+                        iconSize="s"
                         onClick={copy}
                     />
                 )}
@@ -236,6 +255,7 @@ const ActionBar = ({
                         iconType="refresh"
                         onClick={onRetry}
                         size="s"
+                        iconSize="s"
                     />
                 </EuiToolTip>
             </EuiFlexItem>
@@ -256,27 +276,67 @@ export const ChatMessage = ({
 
     if (isUser) {
         return (
-            <div
-                data-message-type="user"
-                data-message-id={message.id}
-                css={css`
-                    max-width: 50%;
-                    justify-self: flex-end;
-                `}
-            >
-                <EuiPanel
-                    paddingSize="s"
-                    hasShadow={false}
-                    hasBorder={true}
+            <>
+                <EuiSpacer size="l" />
+                <div
+                    data-message-type="user"
+                    data-message-id={message.id}
                     css={css`
-                        border-radius: ${euiTheme.border.radius.medium};
-                        background-color: ${euiTheme.colors
-                            .backgroundLightText};
+                        max-width: 50%;
+                        justify-self: flex-end;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: flex-end;
+                        .copy-button {
+                            visibility: hidden;
+                        }
+                        &:hover .copy-button {
+                            visibility: visible;
+                        }
                     `}
                 >
-                    <EuiText size="s">{message.content}</EuiText>
-                </EuiPanel>
-            </div>
+                    <EuiPanel
+                        paddingSize="none"
+                        hasShadow={false}
+                        hasBorder={false}
+                        css={css`
+                            color: white;
+                            border-radius: 24px 24px 2px 24px;
+                            padding-inline: ${euiTheme.size.base};
+                            padding-block: ${euiTheme.size.m};
+                            background: ${aiGradients.dark};
+                        `}
+                    >
+                        <EuiText
+                            size="s"
+                            css={css`
+                                white-space: pre-wrap;
+                            `}
+                        >
+                            {message.content}
+                        </EuiText>
+                    </EuiPanel>
+                    <EuiSpacer size="xs" />
+
+                    <EuiCopy
+                        textToCopy={message.content}
+                        beforeMessage="Copy"
+                        afterMessage="Copied!"
+                    >
+                        {(copy) => (
+                            <EuiButtonIcon
+                                className="copy-button"
+                                aria-label="Copy"
+                                iconType="copy"
+                                iconSize="s"
+                                color="text"
+                                size="xs"
+                                onClick={copy}
+                            />
+                        )}
+                    </EuiCopy>
+                </div>
+            </>
         )
     }
 
@@ -313,8 +373,8 @@ export const ChatMessage = ({
     }, [mainContent])
 
     const rawAiStatus = useMemo(
-        () => computeAiStatus(events, isComplete),
-        [events, isComplete]
+        () => computeAiStatus(events, isComplete, content),
+        [events, isComplete, content]
     )
 
     // Apply minimum display time to prevent status flickering
@@ -347,39 +407,10 @@ export const ChatMessage = ({
             data-message-type="ai"
             data-message-id={message.id}
         >
-            {!hasError && (
-                <EuiFlexItem grow={false}>
-                    <div
-                        css={css`
-                            block-size: 32px;
-                            inline-size: 32px;
-                            border-radius: 50%;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                        `}
-                    >
-                        {isLoading ? (
-                            <EuiLoadingElastic
-                                size="xl"
-                                css={css`
-                                    margin-top: -1px;
-                                `}
-                            />
-                        ) : (
-                            <EuiIcon
-                                name="Elastic Docs AI"
-                                size="xl"
-                                type="logoElastic"
-                            />
-                        )}
-                    </div>
-                </EuiFlexItem>
-            )}
             {!hasError && shouldRenderContent && (
                 <EuiFlexItem>
                     <EuiPanel
-                        paddingSize="m"
+                        paddingSize="none"
                         hasShadow={false}
                         hasBorder={false}
                         css={css`
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx
index 39fe514c2..87d028564 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx
@@ -1,7 +1,6 @@
 import { ChatMessage } from './ChatMessage'
 import { StreamingAiMessage } from './StreamingAiMessage'
 import { ChatMessage as ChatMessageType } from './chat.store'
-import { EuiSpacer } from '@elastic/eui'
 import * as React from 'react'
 import { useMemo } from 'react'
 
@@ -35,7 +34,6 @@ export const ChatMessageList = ({
                             showError={message.id === lastErrorMessageId}
                         />
                     )}
-                    {index < messages.length - 1 && <EuiSpacer size="l" />}
                 </React.Fragment>
             ))}
         </>
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/MessageThrottler.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/MessageThrottler.ts
new file mode 100644
index 000000000..a5b05127b
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/MessageThrottler.ts
@@ -0,0 +1,66 @@
+/**
+ * Message throttler for controlling the speed of streaming updates.
+ * Non-React version that can be used in Zustand stores or other non-component code.
+ */
+
+const DEFAULT_THROTTLE_DELAY_MS = 25
+
+export interface MessageThrottlerOptions<T> {
+    delayInMs?: number
+    onMessage: (message: T) => void
+}
+
+export class MessageThrottler<T> {
+    private queue: T[] = []
+    private timer: ReturnType<typeof setTimeout> | null = null
+    private isProcessing = false
+    private delayInMs: number
+    private onMessage: (message: T) => void
+
+    constructor({
+        delayInMs = DEFAULT_THROTTLE_DELAY_MS,
+        onMessage,
+    }: MessageThrottlerOptions<T>) {
+        this.delayInMs = delayInMs
+        this.onMessage = onMessage
+    }
+
+    private processNext = () => {
+        if (this.queue.length === 0) {
+            this.isProcessing = false
+            this.timer = null
+            return
+        }
+
+        const nextMessage = this.queue.shift()!
+        this.onMessage(nextMessage)
+
+        if (this.queue.length > 0) {
+            this.timer = setTimeout(this.processNext, this.delayInMs)
+        } else {
+            this.isProcessing = false
+            this.timer = null
+        }
+    }
+
+    push(message: T): void {
+        this.queue.push(message)
+        if (!this.isProcessing) {
+            this.isProcessing = true
+            this.timer = setTimeout(this.processNext, this.delayInMs)
+        }
+    }
+
+    clear(): void {
+        if (this.timer) {
+            clearTimeout(this.timer)
+            this.timer = null
+        }
+        this.queue = []
+        this.isProcessing = false
+    }
+
+    get pending(): number {
+        return this.queue.length
+    }
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/RelatedResources.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/RelatedResources.tsx
index ea44b403e..5861c340f 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/RelatedResources.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/RelatedResources.tsx
@@ -1,16 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import {
-    EuiFlexGroup,
-    EuiFlexItem,
     EuiText,
     EuiLink,
     EuiSpacer,
-    EuiIcon,
-    EuiPanel,
     useEuiTheme,
+    useEuiFontSize,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
-import * as React from 'react'
 
 interface Reference {
     url: string
@@ -55,6 +51,7 @@ const parseReferences = (jsonString: string): Reference[] => {
 export const References = ({ referencesJson }: ReferencesProps) => {
     const references = parseReferences(referencesJson)
     const { euiTheme } = useEuiTheme()
+    const smallFontsize = useEuiFontSize('xs')
 
     if (references.length === 0) {
         return null
@@ -62,8 +59,37 @@ export const References = ({ referencesJson }: ReferencesProps) => {
 
     return (
         <>
-            <EuiSpacer size="l" />
-            <EuiPanel
+            <EuiSpacer size="s" />
+            <ul>
+                {references.map((ref, index) => (
+                    <li key={index}>
+                        <div
+                            css={css`
+                                border: 1px solid ${euiTheme.border.color};
+                                padding: ${euiTheme.size.s};
+                                padding-top: 3px;
+                                border-radius: ${euiTheme.border.radius.small};
+                                display: inline-block;
+                                margin-top: ${euiTheme.size.s};
+                            `}
+                        >
+                            <EuiLink
+                                href={ref.url}
+                                target="_blank"
+                                css={css`
+                                    ${smallFontsize};
+                                `}
+                            >
+                                {ref.title}
+                            </EuiLink>
+                            <EuiText size="xs" color="subdued">
+                                {ref.description}
+                            </EuiText>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+            {/* <EuiPanel
                 hasShadow={false}
                 paddingSize="m"
                 grow={false}
@@ -72,9 +98,6 @@ export const References = ({ referencesJson }: ReferencesProps) => {
                 `}
             >
                 <div>
-                    <EuiText size="s">
-                        <strong>Related resources:</strong>
-                    </EuiText>
                     <EuiSpacer size="s" />
                     <EuiFlexGroup direction="column" gutterSize="m">
                         {references.map((ref, index) => (
@@ -121,7 +144,7 @@ export const References = ({ referencesJson }: ReferencesProps) => {
                         ))}
                     </EuiFlexGroup>
                 </div>
-            </EuiPanel>
+            </EuiPanel> */}
         </>
     )
 }
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/StreamingAiMessage.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/StreamingAiMessage.tsx
index 069e1c4ba..ea42d9ac1 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/StreamingAiMessage.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/StreamingAiMessage.tsx
@@ -1,13 +1,12 @@
-import { ApiError } from '../errorHandling'
-import { EventTypes } from './AskAiEvent'
+/**
+ * StreamingAiMessage - Renders an AI message that may be streaming.
+ *
+ * Streaming is managed by the Zustand store, which persists across
+ * component mounts/unmounts. This component simply renders from the store.
+ */
 import { ChatMessage } from './ChatMessage'
-import {
-    ChatMessage as ChatMessageType,
-    useChatActions,
-    useConversationId,
-} from './chat.store'
-import { useAskAi } from './useAskAi'
-import { useEffect, useRef } from 'react'
+import { ChatMessage as ChatMessageType, useChatActions } from './chat.store'
+import { useCallback, useEffect } from 'react'
 
 interface StreamingAiMessageProps {
     message: ChatMessageType
@@ -22,94 +21,26 @@ export const StreamingAiMessage = ({
     onAbortReady,
     showError,
 }: StreamingAiMessageProps) => {
-    const {
-        updateAiMessage,
-        hasMessageBeenSent,
-        markMessageAsSent,
-        setConversationId,
-    } = useChatActions()
-    const conversationId = useConversationId()
-    const contentRef = useRef('')
+    const { abortMessage, cancelStreaming } = useChatActions()
 
-    const { events, sendQuestion, abort, error } = useAskAi({
-        conversationId: conversationId ?? undefined,
-        onEvent: (event) => {
-            if (event.type === EventTypes.CONVERSATION_START) {
-                // Capture conversationId from backend on first request
-                if (event.conversationId && !conversationId) {
-                    setConversationId(event.conversationId)
-                }
-            } else if (event.type === EventTypes.MESSAGE_CHUNK) {
-                contentRef.current += event.content
-            } else if (event.type === EventTypes.ERROR) {
-                // Handle error events from the stream
-                const error = new Error(
-                    event.message || 'An error occurred'
-                ) as ApiError
-                error.statusCode = 500
-                updateAiMessage(
-                    message.id,
-                    event.message || 'An error occurred',
-                    'error',
-                    error
-                )
-            } else if (event.type === EventTypes.CONVERSATION_END) {
-                updateAiMessage(
-                    message.id,
-                    message.content || contentRef.current,
-                    'complete'
-                )
-            }
-        },
-        onError: (error: ApiError | Error | null) => {
-            updateAiMessage(
-                message.id,
-                message.content || error?.message || 'Error occurred',
-                'error',
-                error
-            )
-        },
-    })
+    // Create abort function for this specific message
+    const handleAbort = useCallback(() => {
+        abortMessage(message.id)
+        cancelStreaming()
+    }, [message.id, abortMessage, cancelStreaming])
 
-    // Expose abort function to parent when this is the last message
+    // Expose abort function to parent when this is the last message and streaming
     useEffect(() => {
-        if (isLast && message.status === 'streaming') {
-            onAbortReady?.(abort)
+        if (isLast && message.status === 'streaming' && onAbortReady) {
+            onAbortReady(handleAbort)
         }
-    }, [isLast, message.status, abort, onAbortReady])
-
-    useEffect(() => {
-        if (
-            isLast &&
-            message.status === 'streaming' &&
-            message.question &&
-            !hasMessageBeenSent(message.id)
-        ) {
-            markMessageAsSent(message.id)
-            contentRef.current = ''
-            sendQuestion(message.question)
-        }
-    }, [
-        isLast,
-        message.status,
-        message.question,
-        message.id,
-        sendQuestion,
-        hasMessageBeenSent,
-        markMessageAsSent,
-    ])
-
-    // Always use contentRef.current if it has content (regardless of status)
-    // This way we don't need to save to message.content and can just use streamingContent
-    const streamingContentToPass =
-        isLast && contentRef.current ? contentRef.current : undefined
+    }, [isLast, message.status, onAbortReady, handleAbort])
 
     return (
         <ChatMessage
             message={message}
-            events={isLast ? events : []}
-            streamingContent={streamingContentToPass}
-            error={message.error || (isLast && error ? error : undefined)}
+            events={message.reasoning || []}
+            error={message.error ?? undefined}
             showError={showError}
         />
     )
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/chat.store.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/chat.store.ts
index 1296bd511..857179f76 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/chat.store.ts
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/chat.store.ts
@@ -1,4 +1,18 @@
-import { ApiError, isRateLimitError } from '../errorHandling'
+import { logError, logWarn } from '../../../telemetry/logging'
+import { cooldownStore } from '../cooldown.store'
+import {
+    ApiError,
+    createApiErrorFromResponse,
+    isApiError,
+    isRateLimitError,
+} from '../errorHandling'
+import { AskAiEvent, AskAiEventSchema } from './AskAiEvent'
+import { MessageThrottler } from './MessageThrottler'
+import {
+    fetchEventSource,
+    EventSourceMessage,
+    EventStreamContentType,
+} from '@microsoft/fetch-event-source'
 import { v4 as uuidv4 } from 'uuid'
 import { create } from 'zustand/react'
 
@@ -13,15 +27,37 @@ export interface ChatMessage {
     status?: 'streaming' | 'complete' | 'error'
     question?: string // For AI messages, store the question
     error?: ApiError | Error | null
+    reasoning?: AskAiEvent[] // Reasoning steps for status display (search, tool calls, etc.)
 }
 
-// Track which AI messages have had their requests sent (persists across remounts)
-const sentAiMessageIds = new Set<string>()
+const API_ENDPOINT = '/docs/_api/v1/ask-ai/stream'
+const MESSAGE_THROTTLE_MS = 25
+
+interface ActiveStream {
+    controller: AbortController
+    content: string
+    throttler: MessageThrottler<AskAiEvent>
+}
+
+// Active streams stored outside the reactive state (non-serializable)
+const activeStreams = new Map<string, ActiveStream>()
+
+/**
+ * Compute SHA256 hash for CloudFront + Lambda Function URL with OAC
+ */
+async function computeSHA256(data: string): Promise<string> {
+    const encoder = new TextEncoder()
+    const dataBuffer = encoder.encode(data)
+    const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer)
+    const hashArray = Array.from(new Uint8Array(hashBuffer))
+    return hashArray.map((b) => ('0' + b.toString(16)).slice(-2)).join('')
+}
 
 interface ChatState {
     chatMessages: ChatMessage[]
     conversationId: string | null
     aiProvider: AiProvider
+    scrollPosition: number
     actions: {
         submitQuestion: (question: string) => void
         updateAiMessage: (
@@ -30,57 +66,61 @@ interface ChatState {
             status: ChatMessage['status'],
             error?: ApiError | Error | null
         ) => void
+        addReasoningToMessage: (id: string, event: AskAiEvent) => void
         setConversationId: (conversationId: string) => void
         setAiProvider: (provider: AiProvider) => void
         clearChat: () => void
         clearNon429Errors: () => void
-        hasMessageBeenSent: (id: string) => boolean
-        markMessageAsSent: (id: string) => void
         cancelStreaming: () => void
+        abortMessage: (messageId: string) => void
+        isStreaming: (messageId: string) => boolean
+        setScrollPosition: (position: number) => void
     }
 }
 
-export const chatStore = create<ChatState>((set) => ({
+export const chatStore = create<ChatState>((set, get) => ({
     chatMessages: [],
-    conversationId: null, // Start with null - will be set by backend on first request
-    aiProvider: 'LlmGateway', // Default to LLM Gateway
+    conversationId: null,
+    aiProvider: 'LlmGateway',
+    scrollPosition: 0,
     actions: {
         submitQuestion: (question: string) => {
-            set((state) => {
-                const userMessage: ChatMessage = {
-                    id: uuidv4(),
-                    type: 'user',
-                    content: question,
-                    conversationId: state.conversationId ?? '',
-                    timestamp: Date.now(),
-                }
+            const state = get()
+            const aiMessageId = uuidv4()
 
-                const aiMessage: ChatMessage = {
-                    id: uuidv4(),
-                    type: 'ai',
-                    content: '',
-                    question,
-                    conversationId: state.conversationId ?? '',
-                    timestamp: Date.now(),
-                    status: 'streaming',
-                }
+            const userMessage: ChatMessage = {
+                id: uuidv4(),
+                type: 'user',
+                content: question,
+                conversationId: state.conversationId ?? '',
+                timestamp: Date.now(),
+            }
 
-                return {
-                    chatMessages: [
-                        ...state.chatMessages,
-                        userMessage,
-                        aiMessage,
-                    ],
-                }
+            const aiMessage: ChatMessage = {
+                id: aiMessageId,
+                type: 'ai',
+                content: '',
+                question,
+                conversationId: state.conversationId ?? '',
+                timestamp: Date.now(),
+                status: 'streaming',
+                reasoning: [],
+            }
+
+            set({
+                chatMessages: [...state.chatMessages, userMessage, aiMessage],
             })
+
+            // Start streaming (runs outside React lifecycle)
+            startStream(
+                aiMessageId,
+                question,
+                state.conversationId,
+                state.aiProvider
+            )
         },
 
-        updateAiMessage: (
-            id: string,
-            content: string,
-            status: ChatMessage['status'],
-            error: ApiError | Error | null = null
-        ) => {
+        updateAiMessage: (id, content, status, error = null) => {
             set((state) => ({
                 chatMessages: state.chatMessages.map((msg) =>
                     msg.id === id ? { ...msg, content, status, error } : msg
@@ -88,16 +128,31 @@ export const chatStore = create<ChatState>((set) => ({
             }))
         },
 
-        setConversationId: (conversationId: string) => {
+        addReasoningToMessage: (id, event) => {
+            set((state) => ({
+                chatMessages: state.chatMessages.map((msg) =>
+                    msg.id === id && msg.reasoning
+                        ? { ...msg, reasoning: [...msg.reasoning, event] }
+                        : msg
+                ),
+            }))
+        },
+
+        setConversationId: (conversationId) => {
             set({ conversationId })
         },
 
-        setAiProvider: (provider: AiProvider) => {
+        setAiProvider: (provider) => {
             set({ aiProvider: provider })
         },
 
         clearChat: () => {
-            sentAiMessageIds.clear()
+            // Abort all active streams and clear their throttlers
+            for (const [, stream] of activeStreams) {
+                stream.throttler.clear()
+                stream.controller.abort()
+            }
+            activeStreams.clear()
             set({ chatMessages: [], conversationId: null })
         },
 
@@ -121,13 +176,18 @@ export const chatStore = create<ChatState>((set) => ({
             }))
         },
 
-        hasMessageBeenSent: (id: string) => sentAiMessageIds.has(id),
-
-        markMessageAsSent: (id: string) => {
-            sentAiMessageIds.add(id)
-        },
-
         cancelStreaming: () => {
+            const state = get()
+            state.chatMessages.forEach((msg) => {
+                if (msg.type === 'ai' && msg.status === 'streaming') {
+                    const stream = activeStreams.get(msg.id)
+                    if (stream) {
+                        stream.throttler.clear()
+                        stream.controller.abort()
+                        activeStreams.delete(msg.id)
+                    }
+                }
+            })
             set((state) => ({
                 chatMessages: state.chatMessages.map((msg) =>
                     msg.type === 'ai' && msg.status === 'streaming'
@@ -136,11 +196,222 @@ export const chatStore = create<ChatState>((set) => ({
                 ),
             }))
         },
+
+        abortMessage: (messageId) => {
+            const stream = activeStreams.get(messageId)
+            if (stream) {
+                stream.throttler.clear()
+                stream.controller.abort()
+                activeStreams.delete(messageId)
+            }
+        },
+
+        isStreaming: (messageId) => activeStreams.has(messageId),
+
+        setScrollPosition: (position) => {
+            set({ scrollPosition: position })
+        },
     },
 }))
 
+/**
+ * Start streaming for a message. Runs outside React lifecycle.
+ */
+async function startStream(
+    messageId: string,
+    question: string,
+    conversationId: string | null,
+    aiProvider: AiProvider
+): Promise<void> {
+    if (activeStreams.has(messageId)) return
+
+    const controller = new AbortController()
+
+    // Create a throttler for this stream to control update frequency
+    const throttler = new MessageThrottler<AskAiEvent>({
+        delayInMs: MESSAGE_THROTTLE_MS,
+        onMessage: (event) => handleStreamEvent(messageId, event),
+    })
+
+    activeStreams.set(messageId, { controller, content: '', throttler })
+
+    const payload = {
+        message: question,
+        ...(conversationId && { conversationId }),
+    }
+
+    try {
+        const bodyString = JSON.stringify(payload)
+        const contentHash = await computeSHA256(bodyString)
+
+        await fetchEventSource(API_ENDPOINT, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-amz-content-sha256': contentHash,
+                'X-AI-Provider': aiProvider,
+            },
+            body: bodyString,
+            signal: controller.signal,
+            openWhenHidden: true,
+
+            onopen: async (response) => {
+                if (
+                    response.ok &&
+                    response.headers
+                        .get('content-type')
+                        ?.includes(EventStreamContentType)
+                ) {
+                    return
+                }
+                if (!response.ok) {
+                    const error =
+                        (await createApiErrorFromResponse(response)) ??
+                        new Error('Request failed')
+                    controller.abort()
+                    handleStreamError(messageId, error)
+                    throw error
+                }
+                throw new Error('Invalid response')
+            },
+
+            onmessage: (msg: EventSourceMessage) => {
+                if (msg.event === 'FatalError') {
+                    handleStreamError(messageId, new Error(msg.data))
+                    return
+                }
+                if (!msg.data?.trim()) return
+
+                try {
+                    const rawData = JSON.parse(msg.data)
+                    const result = AskAiEventSchema.safeParse(rawData)
+                    if (!result.success) {
+                        logWarn('Failed to parse AskAi event', {
+                            'error.type': 'validation',
+                            'error.issues': JSON.stringify(result.error.issues),
+                        })
+                        return
+                    }
+                    // Push to throttler instead of handling directly
+                    throttler.push(result.data)
+                } catch (error) {
+                    logWarn('Failed to parse SSE message', {
+                        'error.message':
+                            error instanceof Error
+                                ? error.message
+                                : String(error),
+                    })
+                }
+            },
+
+            onerror: (err) => {
+                // Don't treat abort as an error - it's normal when user cancels
+                if (err instanceof Error && err.name === 'AbortError') {
+                    return null
+                }
+                if (isApiError(err)) {
+                    controller.abort()
+                    handleStreamError(messageId, err)
+                    return null
+                }
+                const error =
+                    err instanceof Error
+                        ? err
+                        : new Error(err?.message || 'Connection error')
+                handleStreamError(messageId, error)
+                return undefined
+            },
+
+            onclose: () => {
+                // Don't clear throttler here - let pending events drain naturally.
+                // The conversation_end event will handle cleanup when it's processed.
+            },
+        })
+    } catch (error) {
+        if (error instanceof Error && error.name !== 'AbortError') {
+            handleStreamError(messageId, error as ApiError | Error)
+        }
+        // Only clear on actual errors, not normal close
+        const stream = activeStreams.get(messageId)
+        if (stream) {
+            stream.throttler.clear()
+            activeStreams.delete(messageId)
+        }
+    }
+}
+
+function handleStreamEvent(messageId: string, event: AskAiEvent): void {
+    const stream = activeStreams.get(messageId)
+    if (!stream) return
+
+    const { actions } = chatStore.getState()
+
+    // Add event to message reasoning for status display (search, tool calls, etc.)
+    actions.addReasoningToMessage(messageId, event)
+
+    if (event.type === 'conversation_start' && event.conversationId) {
+        actions.setConversationId(event.conversationId)
+    } else if (event.type === 'message_chunk') {
+        stream.content += event.content
+        actions.updateAiMessage(messageId, stream.content, 'streaming')
+    } else if (event.type === 'error') {
+        const error = new Error(
+            event.message || 'An error occurred'
+        ) as ApiError
+        error.statusCode = 500
+        actions.updateAiMessage(
+            messageId,
+            event.message || 'An error occurred',
+            'error',
+            error
+        )
+        stream.throttler.clear()
+        activeStreams.delete(messageId)
+    } else if (event.type === 'conversation_end') {
+        actions.updateAiMessage(messageId, stream.content, 'complete')
+        stream.throttler.clear()
+        activeStreams.delete(messageId)
+    }
+}
+
+function handleStreamError(messageId: string, error: ApiError | Error): void {
+    // Log real errors (not cancellations)
+    if (error.name !== 'AbortError') {
+        logError('AskAi stream error', {
+            'error.message': error.message,
+            'error.name': error.name,
+            ...(isApiError(error) && { 'error.statusCode': error.statusCode }),
+        })
+    }
+
+    const stream = activeStreams.get(messageId)
+    const content = stream?.content || ''
+
+    const { actions } = chatStore.getState()
+    actions.updateAiMessage(
+        messageId,
+        content || error.message || 'Error occurred',
+        'error',
+        error
+    )
+
+    if (isApiError(error) && isRateLimitError(error) && error.retryAfter) {
+        cooldownStore.getState().actions.setCooldown('askAi', error.retryAfter)
+    }
+
+    activeStreams.delete(messageId)
+}
+
+// Selectors
 export const useChatMessages = () => chatStore((state) => state.chatMessages)
 export const useConversationId = () =>
     chatStore((state) => state.conversationId)
 export const useAiProvider = () => chatStore((state) => state.aiProvider)
+export const useChatScrollPosition = () =>
+    chatStore((state) => state.scrollPosition)
 export const useChatActions = () => chatStore((state) => state.actions)
+export const useIsStreaming = () =>
+    chatStore((state) => {
+        const last = state.chatMessages[state.chatMessages.length - 1]
+        return last?.type === 'ai' && last?.status === 'streaming'
+    })
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAi.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAi.ts
deleted file mode 100644
index 2005224a9..000000000
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAi.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-import { ApiError, isRateLimitError, isApiError } from '../errorHandling'
-import { AskAiEvent, AskAiEventSchema } from './AskAiEvent'
-import { useAiProvider } from './chat.store'
-import { useAskAiCooldown, useAskAiCooldownActions } from './useAskAiCooldown'
-import { useFetchEventSource } from './useFetchEventSource'
-import { useMessageThrottling } from './useMessageThrottling'
-import { EventSourceMessage } from '@microsoft/fetch-event-source'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import * as z from 'zod'
-
-// Constants
-const MESSAGE_THROTTLE_MS = 25 // Throttle messages to prevent UI flooding
-
-export const AskAiRequestSchema = z.object({
-    message: z.string(),
-    conversationId: z.string().optional(),
-})
-
-export type AskAiRequest = z.infer<typeof AskAiRequestSchema>
-
-export interface UseAskAiResponse {
-    events: AskAiEvent[]
-    abort: () => void
-    error: ApiError | Error | null
-    sendQuestion: (question: string) => Promise<void>
-}
-
-interface Props {
-    onEvent?: (event: AskAiEvent) => void
-    onError?: (error: Error) => void
-    conversationId?: string
-}
-
-export const useAskAi = (props: Props): UseAskAiResponse => {
-    const [events, setEvents] = useState<AskAiEvent[]>([])
-    const [error, setError] = useState<ApiError | Error | null>(null)
-    const storeCooldown = useAskAiCooldown()
-    const { setCooldown } = useAskAiCooldownActions()
-    const lastSentQuestionRef = useRef<string>('')
-
-    // Get AI provider from store (user-controlled via UI)
-    const aiProvider = useAiProvider()
-
-    // Prepare headers with AI provider
-    const headers = useMemo(
-        () => ({
-            'X-AI-Provider': aiProvider,
-        }),
-        [aiProvider]
-    )
-
-    const { processMessage, clearQueue } = useMessageThrottling<AskAiEvent>({
-        delayInMs: MESSAGE_THROTTLE_MS,
-        onMessage: (event) => {
-            setEvents((prev) => [...prev, event])
-            props.onEvent?.(event)
-        },
-    })
-
-    const onMessage = useCallback(
-        (sseEvent: EventSourceMessage) => {
-            try {
-                // Parse JSON first
-                const rawData = JSON.parse(sseEvent.data)
-
-                // Use safeParse with reportInput to include input data in validation errors
-                const result = AskAiEventSchema.safeParse(rawData, {
-                    reportInput: true,
-                })
-
-                if (!result.success) {
-                    // Log detailed validation errors with input data
-                    console.error('[AI Provider] Failed to parse SSE event:', {
-                        eventId: sseEvent.id || 'unknown',
-                        eventType: sseEvent.event || 'unknown',
-                        rawEventData: sseEvent.data,
-                        validationErrors: result.error.issues,
-                    })
-                    throw new Error(
-                        `Event validation failed: ${result.error.issues.map((e) => `${e.path.join('.')}: ${e.message}`).join('; ')}`
-                    )
-                }
-
-                processMessage(result.data)
-            } catch (error) {
-                // Handle JSON parsing errors or other unexpected errors
-                if (
-                    error instanceof Error &&
-                    error.message.includes('Event validation failed')
-                ) {
-                    // Already logged above, just re-throw
-                    throw error
-                }
-
-                // Log JSON parsing or other errors
-                console.error('[AI Provider] Failed to parse SSE event:', {
-                    eventId: sseEvent.id || 'unknown',
-                    eventType: sseEvent.event || 'unknown',
-                    rawEventData: sseEvent.data,
-                    error:
-                        error instanceof Error ? error.message : String(error),
-                    errorStack:
-                        error instanceof Error ? error.stack : undefined,
-                })
-
-                throw new Error(
-                    `Event parsing failed: ${error instanceof Error ? error.message : String(error)}`
-                )
-            }
-        },
-        [processMessage]
-    )
-
-    const { sendMessage, abort } = useFetchEventSource<AskAiRequest>({
-        apiEndpoint: '/docs/_api/v1/ask-ai/stream',
-        headers,
-        onMessage,
-        onError: (error) => {
-            if (!error) return
-            console.error('[AI Provider] Error in useFetchEventSource:', {
-                errorMessage: error.message,
-                errorStack: error.stack,
-                errorName: error.name,
-                fullError: error,
-            })
-            setError(error)
-            if (
-                isApiError(error) &&
-                isRateLimitError(error) &&
-                error.retryAfter
-            ) {
-                setCooldown(error.retryAfter)
-            }
-            if (error) {
-                props.onError?.(error)
-            }
-        },
-    })
-
-    const sendQuestion = useCallback(
-        async (question: string) => {
-            // Prevent sending during cooldown period (check store cooldown)
-            if (storeCooldown !== null && storeCooldown > 0) {
-                return
-            }
-
-            if (question.trim() && question !== lastSentQuestionRef.current) {
-                abort()
-                setError(null)
-                setEvents([])
-                clearQueue()
-                lastSentQuestionRef.current = question
-                const payload = createAskAiRequest(
-                    question,
-                    props.conversationId
-                )
-
-                try {
-                    await sendMessage(payload)
-                } catch (error) {
-                    if (error instanceof Error) {
-                        setError(error)
-                        throw error
-                    }
-                }
-            }
-        },
-        [props.conversationId, sendMessage, abort, clearQueue, storeCooldown]
-    )
-
-    useEffect(() => {
-        return () => {
-            setError(null)
-            setEvents([])
-            clearQueue()
-        }
-    }, [clearQueue])
-
-    return {
-        events,
-        error,
-        sendQuestion,
-        abort: () => {
-            abort()
-            clearQueue()
-        },
-    }
-}
-
-function createAskAiRequest(
-    message: string,
-    conversationId?: string
-): AskAiRequest {
-    return AskAiRequestSchema.parse({
-        message,
-        conversationId,
-    })
-}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useFetchEventSource.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useFetchEventSource.ts
deleted file mode 100644
index 6336840a2..000000000
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useFetchEventSource.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import {
-    createApiErrorFromResponse,
-    ApiError,
-    isApiError,
-} from '../errorHandling'
-import {
-    fetchEventSource,
-    EventSourceMessage,
-    EventStreamContentType,
-} from '@microsoft/fetch-event-source'
-import { useRef, useCallback } from 'react'
-
-/**
- * Computes SHA256 hash of the request body for CloudFront + Lambda Function URL with OAC.
- * Required by AWS CloudFront when using Origin Access Control with Lambda Function URLs.
- * See: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-lambda.html
- */
-async function computeSHA256(data: string): Promise<string> {
-    const encoder = new TextEncoder()
-    const dataBuffer = encoder.encode(data)
-    const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer)
-    const hashArray = Array.from(new Uint8Array(hashBuffer))
-    return hashArray.map((b) => ('0' + b.toString(16)).slice(-2)).join('')
-}
-
-// Simple wrapper interface around fetch-event-source
-export interface UseFetchEventSourceOptions {
-    apiEndpoint: string
-    headers?: Record<string, string>
-    onMessage?: (event: EventSourceMessage) => void
-    onError?: (error: ApiError | Error | null) => void
-    onOpen?: (response: Response) => Promise<void>
-    onClose?: () => void
-}
-
-export interface UseFetchEventSourceReturn<TPayload> {
-    sendMessage: (payload: TPayload) => Promise<void>
-    abort: () => void
-}
-
-class FatalError extends Error {}
-
-export function useFetchEventSource<TPayload>({
-    apiEndpoint,
-    headers,
-    onMessage,
-    onError,
-    onOpen,
-    onClose,
-}: UseFetchEventSourceOptions): UseFetchEventSourceReturn<TPayload> {
-    const abortControllerRef = useRef<AbortController | null>(null)
-
-    const abort = useCallback(() => {
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort()
-            abortControllerRef.current = null
-        }
-    }, [])
-
-    const sendMessage = useCallback(
-        async (payload: TPayload) => {
-            // Always create a completely fresh AbortController for each request
-            // This prevents StrictMode from using an already-aborted controller
-            const controller = new AbortController()
-            abortControllerRef.current = controller
-
-            try {
-                // Stringify payload once to ensure hash matches the exact body sent
-                const bodyString = JSON.stringify(payload)
-
-                // Compute SHA256 hash for CloudFront + Lambda Function URL with OAC
-                // This proves body integrity from client to CloudFront
-                const contentHash = await computeSHA256(bodyString)
-
-                await fetchEventSource(apiEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'x-amz-content-sha256': contentHash, // Required for CloudFront OAC
-                        ...headers,
-                    },
-                    body: bodyString,
-                    signal: controller.signal, // Use local controller, not ref
-                    openWhenHidden: true, // Keep connection alive when tab is hidden
-                    onopen: async (response: Response) => {
-                        if (
-                            response.ok &&
-                            response.headers
-                                .get('content-type')
-                                ?.includes(EventStreamContentType)
-                        ) {
-                            onOpen?.(response)
-                            return
-                        } else if (!response.ok) {
-                            // Create an error with status code and headers
-                            const error =
-                                await createApiErrorFromResponse(response)
-
-                            // Abort immediately to stop retries for any API error
-                            controller.abort()
-
-                            onError?.(error)
-                            throw error
-                        } else {
-                            throw new FatalError()
-                        }
-                    },
-                    onmessage: (msg: EventSourceMessage) => {
-                        if (msg.event === 'FatalError') {
-                            throw new FatalError(msg.data)
-                        }
-                        if (!msg.data || !msg.data.trim()) {
-                            return
-                        }
-                        onMessage?.(msg)
-                    },
-                    onerror: (err) => {
-                        if (isApiError(err)) {
-                            // Abort immediately to stop retries for any API error
-                            controller.abort()
-                            onError?.(err)
-                            // Return null to stop retrying immediately
-                            return null
-                        } else {
-                            const error =
-                                err instanceof Error
-                                    ? err
-                                    : (new Error(
-                                          err?.message || 'Connection error'
-                                      ) as ApiError)
-                            onError?.(error)
-                            return undefined
-                        }
-                    },
-                    onclose: () => {
-                        onClose?.()
-                    },
-                })
-            } catch (error) {
-                if (isApiError(error as Error | ApiError | null)) {
-                    onError?.(error as ApiError)
-                } else if (
-                    error instanceof Error &&
-                    error.name !== 'AbortError'
-                ) {
-                    onError?.(error)
-                }
-            }
-        },
-        [apiEndpoint, headers, onMessage, onError, onOpen, onClose]
-    )
-
-    return {
-        sendMessage,
-        abort,
-    }
-}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useMessageThrottling.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useMessageThrottling.ts
deleted file mode 100644
index de5dfc45e..000000000
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useMessageThrottling.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useRef, useCallback, useEffect } from 'react'
-
-// Configuration for typing simulation
-const DEFAULT_TYPING_DELAY_MS = 75
-
-export interface UseMessageThrottlingOptions<T> {
-    delayInMs?: number
-    onMessage: (message: T) => void
-}
-
-export interface UseMessageThrottlingReturn<T> {
-    processMessage: (message: T) => void
-    clearQueue: () => void
-}
-
-export function useMessageThrottling<T>({
-    delayInMs = DEFAULT_TYPING_DELAY_MS,
-    onMessage,
-}: UseMessageThrottlingOptions<T>): UseMessageThrottlingReturn<T> {
-    const messageQueueRef = useRef<T[]>([])
-    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-    const isProcessingRef = useRef<boolean>(false)
-
-    const processNextMessage = useCallback(() => {
-        if (messageQueueRef.current.length === 0) {
-            isProcessingRef.current = false
-            timerRef.current = null
-            return
-        }
-
-        const nextMessage = messageQueueRef.current.shift()!
-        onMessage(nextMessage)
-
-        if (messageQueueRef.current.length > 0) {
-            timerRef.current = setTimeout(processNextMessage, delayInMs)
-        } else {
-            isProcessingRef.current = false
-            timerRef.current = null
-        }
-    }, [onMessage, delayInMs])
-
-    const processMessage = useCallback(
-        (message: T) => {
-            messageQueueRef.current.push(message)
-            if (!isProcessingRef.current) {
-                isProcessingRef.current = true
-                timerRef.current = setTimeout(processNextMessage, delayInMs)
-            }
-        },
-        [processNextMessage, delayInMs]
-    )
-
-    const clearQueue = useCallback(() => {
-        if (timerRef.current) {
-            clearTimeout(timerRef.current)
-            timerRef.current = null
-        }
-        messageQueueRef.current = []
-        isProcessingRef.current = false
-    }, [])
-
-    useEffect(() => {
-        return () => {
-            clearQueue()
-        }
-    }, [clearQueue])
-
-    return {
-        processMessage,
-        clearQueue,
-    }
-}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useStatusMinDisplay.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useStatusMinDisplay.ts
index 236bb5b4d..1c3633cc0 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useStatusMinDisplay.ts
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useStatusMinDisplay.ts
@@ -16,9 +16,8 @@ const STATUS_MIN_DISPLAY_TIME_MS = 2000
  * Statuses that should always show immediately, bypassing the minimum display time
  */
 const IMMEDIATE_STATUSES: string[] = [
-    // 'Generating',
-    // 'Gathering resources',
-    // 'Searching Elastic\'s Docs for' // Search queries should show immediately
+    'Generating', // Show immediately when content starts streaming
+    'Gathering resources',
 ]
 
 /**
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/ElasticAiAssitant.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/ElasticAiAssitant.tsx
new file mode 100644
index 000000000..9d450e0d9
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/ElasticAiAssitant.tsx
@@ -0,0 +1,92 @@
+import AiIcon from './ai-icon.svg'
+import {
+    EuiButton,
+    EuiButtonIcon,
+    EuiButtonIconPropsForButton,
+} from '@elastic/eui'
+import { css } from '@emotion/react'
+import { ComponentProps } from 'react'
+
+type ButtonProps = ComponentProps<typeof EuiButton>
+
+// Reusable gradient values
+export const aiGradients = {
+    light: 'linear-gradient(99deg, #d9e8ff 3.97%, #ece2fe 65.6%)',
+    dark: 'linear-gradient(131deg, #1750ba 2.98%, #731dcf 66.24%)',
+} as const
+
+const buttonLightCss = css`
+    background: ${aiGradients.light};
+`
+
+const buttonFillCss = css`
+    background: ${aiGradients.dark};
+
+    /* Make the icon white */
+    .euiIcon {
+        filter: brightness(0) invert(1);
+    }
+`
+
+const textGradientCss = css`
+    background: ${aiGradients.dark};
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+`
+
+const textWhiteCss = css`
+    color: white;
+`
+
+const buttonIconLightCss = css`
+    background: ${aiGradients.light};
+`
+
+const buttonIconFillCss = css`
+    background: ${aiGradients.dark};
+
+    /* Make the icon white */
+    .euiIcon {
+        filter: brightness(0) invert(1);
+    }
+`
+
+export const ElasticAiAssistantButton = ({
+    children,
+    fill = false,
+    ...rest
+}: ButtonProps) => {
+    return (
+        <EuiButton
+            css={fill ? buttonFillCss : buttonLightCss}
+            size="s"
+            fill
+            iconType={AiIcon}
+            {...rest}
+        >
+            <span css={fill ? textWhiteCss : textGradientCss}>{children}</span>
+        </EuiButton>
+    )
+}
+
+type AiButtonIconProps = {
+    fill?: boolean
+} & Partial<Pick<EuiButtonIconPropsForButton, 'iconType'>> &
+    Omit<EuiButtonIconPropsForButton, 'iconType'>
+
+export const ElasticAiAssistantButtonIcon = ({
+    fill = false,
+    iconType = AiIcon,
+    'aria-label': ariaLabel = 'AI Assistant',
+    ...rest
+}: AiButtonIconProps) => {
+    return (
+        <EuiButtonIcon
+            css={fill ? buttonIconFillCss : buttonIconLightCss}
+            iconType={iconType}
+            aria-label={ariaLabel}
+            {...rest}
+        />
+    )
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/InfoBanner.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/InfoBanner.tsx
index a8c37bc0d..b30911d76 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/InfoBanner.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/InfoBanner.tsx
@@ -1,7 +1,7 @@
 import {
     EuiBetaBadge,
-    EuiHorizontalRule,
     EuiLink,
+    EuiSpacer,
     EuiText,
     useEuiTheme,
 } from '@elastic/eui'
@@ -10,18 +10,15 @@ import { css } from '@emotion/react'
 export const InfoBanner = () => {
     const { euiTheme } = useEuiTheme()
     return (
-        <div
-            css={css`
-                padding: 0 ${euiTheme.size.base} ${euiTheme.size.base};
-            `}
-        >
-            <EuiHorizontalRule margin="m" />
+        <div>
+            <EuiSpacer size="m" />
             <div
                 css={css`
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     gap: ${euiTheme.size.s};
+                    padding: 0 ${euiTheme.size.base} ${euiTheme.size.base};
                 `}
             >
                 <EuiBetaBadge
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/KeyboardShortcutsFooter.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/KeyboardShortcutsFooter.tsx
new file mode 100644
index 000000000..143c8e347
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/KeyboardShortcutsFooter.tsx
@@ -0,0 +1,113 @@
+import { availableIcons } from '../../eui-icons-cache'
+import { EuiIcon, EuiText, useEuiTheme } from '@elastic/eui'
+import { css } from '@emotion/react'
+import React from 'react'
+
+export interface KeyboardShortcut {
+    keys: string[]
+    label: string
+}
+
+interface KeyboardShortcutsFooterProps {
+    shortcuts: KeyboardShortcut[]
+}
+
+export const KeyboardShortcutsFooter = ({
+    shortcuts,
+}: KeyboardShortcutsFooterProps) => {
+    const { euiTheme } = useEuiTheme()
+    return (
+        <div
+            css={css`
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: ${euiTheme.size.m};
+                background-color: ${euiTheme.colors.backgroundBaseSubdued};
+                border-bottom-right-radius: ${euiTheme.size.s};
+                border-bottom-left-radius: ${euiTheme.size.s};
+                padding-inline: ${euiTheme.size.base};
+                padding-block: ${euiTheme.size.m};
+            `}
+        >
+            {shortcuts.map((shortcut, index) => (
+                <KeyboardIconsWithLabel
+                    key={index}
+                    keys={shortcut.keys}
+                    label={shortcut.label}
+                />
+            ))}
+        </div>
+    )
+}
+
+const KeyboardKey = ({ children }: { children: React.ReactNode }) => {
+    const { euiTheme } = useEuiTheme()
+    return (
+        <span
+            css={css`
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+                background-color: ${euiTheme.colors.backgroundLightText};
+                min-width: ${euiTheme.size.l};
+                height: ${euiTheme.size.l};
+                border-radius: ${euiTheme.border.radius.small};
+                padding-inline: ${euiTheme.size.xs};
+            `}
+        >
+            {children}
+        </span>
+    )
+}
+
+const KeyboardIcon = ({ type }: { type: string }) => {
+    const { euiTheme } = useEuiTheme()
+    return (
+        <KeyboardKey>
+            {availableIcons.includes(type) ? (
+                <EuiIcon type={type} size="s" />
+            ) : (
+                <EuiText
+                    size="xs"
+                    css={css`
+                        margin-inline: ${euiTheme.size.xs};
+                    `}
+                >
+                    {type}
+                </EuiText>
+            )}
+        </KeyboardKey>
+    )
+}
+
+const KeyboardIconsWithLabel = ({
+    keys,
+    label,
+}: {
+    keys: string[]
+    label: string
+}) => {
+    const { euiTheme } = useEuiTheme()
+    return (
+        <span
+            css={css`
+                display: flex;
+                align-items: center;
+                gap: ${euiTheme.size.xs};
+            `}
+        >
+            <span
+                css={css`
+                    display: flex;
+                    gap: ${euiTheme.size.xs};
+                `}
+            >
+                {keys.map((key, index) => (
+                    <KeyboardIcon type={key} key={key + index} />
+                ))}
+            </span>
+            <EuiText size="s">{label}</EuiText>
+        </span>
+    )
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.test.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.test.tsx
index 21010931b..c9567660e 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.test.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.test.tsx
@@ -1,151 +1,89 @@
+import { chatStore } from '../AskAi/chat.store'
+import { cooldownStore } from '../cooldown.store'
+import { modalStore } from '../modal.store'
 import { Search } from './Search'
-import { render, screen, waitFor, act } from '@testing-library/react'
+import { searchStore } from './search.store'
+import { SearchResultItem } from './useSearchQuery'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 
-/*
- * Note: These tests use mock verification for store actions.
- *
- * Unlike pure unit tests, the Search component's main responsibility is
- * orchestrating the handoff from search to chat (calling clearChat,
- * submitQuestion, setModalMode in the right order). Testing these calls
- * verifies the integration/workflow, not just implementation details.
- *
- * For full E2E behavior testing without mocks, see integration tests.
- */
-
-// Mock dependencies
-jest.mock('./search.store', () => ({
-    useSearchTerm: jest.fn(() => ''),
-    usePageNumber: jest.fn(() => 0),
-    useSearchActions: jest.fn(() => ({
-        setSearchTerm: jest.fn(),
-        clearSearchTerm: jest.fn(),
-        setPageNumber: jest.fn(),
-    })),
+// Mock external HTTP calls
+jest.mock('@microsoft/fetch-event-source', () => ({
+    fetchEventSource: jest.fn(),
+    EventStreamContentType: 'text/event-stream',
 }))
 
-jest.mock('../AskAi/chat.store', () => ({
-    useChatActions: jest.fn(() => ({
-        submitQuestion: jest.fn(),
-        clearChat: jest.fn(),
-        clearNon429Errors: jest.fn(),
-        setAiProvider: jest.fn(),
-    })),
-}))
-
-jest.mock('../modal.store', () => ({
-    useModalActions: jest.fn(() => ({
-        setModalMode: jest.fn(),
-        openModal: jest.fn(),
-        closeModal: jest.fn(),
-        toggleModal: jest.fn(),
-    })),
-}))
-
-jest.mock('./useSearchCooldown', () => ({
-    useIsSearchCooldownActive: jest.fn(() => false),
-    useSearchCooldown: jest.fn(() => null),
-    useIsSearchAwaitingNewInput: jest.fn(() => false),
-    useSearchCooldownActions: jest.fn(() => ({
-        setCooldown: jest.fn(),
-        updateCooldown: jest.fn(),
-        notifyCooldownFinished: jest.fn(),
-        acknowledgeCooldownFinished: jest.fn(),
-    })),
-}))
-
-jest.mock('../AskAi/useAskAiCooldown', () => ({
-    useIsAskAiCooldownActive: jest.fn(() => false),
-}))
-
-jest.mock('../useCooldown', () => ({
-    useCooldown: jest.fn(),
-}))
-
-// Use the real SearchResults component - its dependencies are already mocked
-
-const mockUseSearchQuery = jest.fn(() => ({
-    isLoading: false,
-    isFetching: false,
-    data: null as {
-        results: Array<{
-            url: string
-            title: string
-            description: string
-            score: number
-            parents: Array<{ url: string; title: string }>
-        }>
-        totalResults: number
-        pageCount: number
-        pageNumber: number
-        pageSize: number
-    } | null,
-    error: null as Error | null,
-    cancelQuery: jest.fn(),
-}))
-
-jest.mock('./useSearchQuery', () => ({
-    useSearchQuery: () => mockUseSearchQuery(),
-}))
-
-// Mock SearchOrAskAiErrorCallout
-jest.mock('../SearchOrAskAiErrorCallout', () => ({
-    SearchOrAskAiErrorCallout: () => null,
-}))
-
-// Mock rate limit handlers
-jest.mock('./useSearchRateLimitHandler', () => ({
-    useSearchRateLimitHandler: jest.fn(),
-}))
-
-jest.mock('../AskAi/useAskAiRateLimitHandler', () => ({
-    useAskAiRateLimitHandler: jest.fn(),
-}))
+// Mock fetch for search API
+const mockFetch = jest.fn()
+global.fetch = mockFetch
+
+// Helper to create a fresh QueryClient for each test
+const createTestQueryClient = () =>
+    new QueryClient({
+        defaultOptions: {
+            queries: {
+                retry: false,
+                gcTime: 0,
+            },
+        },
+    })
 
-const mockUseSearchTerm = jest.mocked(
-    jest.requireMock('./search.store').useSearchTerm
-)
-const mockUseSearchActions = jest.mocked(
-    jest.requireMock('./search.store').useSearchActions
-)
-const mockUseChatActions = jest.mocked(
-    jest.requireMock('../AskAi/chat.store').useChatActions
-)
-const mockUseModalActions = jest.mocked(
-    jest.requireMock('../modal.store').useModalActions
-)
+// Wrapper with QueryClient
+const TestWrapper = ({ children }: { children: React.ReactNode }) => {
+    const queryClient = createTestQueryClient()
+    return (
+        <QueryClientProvider client={queryClient}>
+            {children}
+        </QueryClientProvider>
+    )
+}
+
+// Helper to reset all stores
+const resetStores = () => {
+    searchStore.setState({ searchTerm: '', page: 1 })
+    chatStore.setState({
+        chatMessages: [],
+        conversationId: null,
+        aiProvider: 'LlmGateway',
+        scrollPosition: 0,
+    })
+    modalStore.setState({ isOpen: false, mode: 'search' })
+    cooldownStore.setState({
+        cooldowns: {
+            search: { cooldown: null, awaitingNewInput: false },
+            askAi: { cooldown: null, awaitingNewInput: false },
+        },
+    })
+}
+
+// Helper to mock successful search response
+const mockSearchResponse = (results: SearchResultItem[] = []) => {
+    mockFetch.mockResolvedValue({
+        ok: true,
+        json: () =>
+            Promise.resolve({
+                results,
+                totalResults: results.length,
+                pageCount: 1,
+                pageNumber: 1,
+                pageSize: 10,
+            }),
+    })
+}
 
 describe('Search Component', () => {
-    const mockSetSearchTerm = jest.fn()
-    const mockSubmitQuestion = jest.fn()
-    const mockClearChat = jest.fn()
-    const mockSetModalMode = jest.fn()
-
     beforeEach(() => {
         jest.clearAllMocks()
-        mockUseSearchActions.mockReturnValue({
-            setSearchTerm: mockSetSearchTerm,
-            clearSearchTerm: jest.fn(),
-            setPageNumber: jest.fn(),
-        })
-        mockUseChatActions.mockReturnValue({
-            submitQuestion: mockSubmitQuestion,
-            clearChat: mockClearChat,
-            setAiProvider: jest.fn(),
-        })
-        mockUseModalActions.mockReturnValue({
-            setModalMode: mockSetModalMode,
-        })
+        resetStores()
+        mockSearchResponse([])
     })
 
     describe('Search input', () => {
         it('should render search input field', () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('')
-
             // Act
-            render(<Search />)
+            render(<Search />, { wrapper: TestWrapper })
 
             // Assert
             expect(
@@ -153,571 +91,285 @@ describe('Search Component', () => {
             ).toBeInTheDocument()
         })
 
-        it('should display current search term', () => {
+        it('should update store when input changes', async () => {
             // Arrange
-            const searchTerm = 'elasticsearch'
-            mockUseSearchTerm.mockReturnValue(searchTerm)
+            const user = userEvent.setup()
 
             // Act
-            render(<Search />)
+            render(<Search />, { wrapper: TestWrapper })
+            const input = screen.getByPlaceholderText(/search in docs/i)
+            await user.type(input, 'elasticsearch')
 
             // Assert
-            const input = screen.getByPlaceholderText(
-                /search in docs/i
-            ) as HTMLInputElement
-            expect(input.value).toBe(searchTerm)
+            expect(searchStore.getState().searchTerm).toBe('elasticsearch')
         })
 
-        it('should call setSearchTerm when input changes', async () => {
+        it('should display search term from store', () => {
             // Arrange
-            mockUseSearchTerm.mockReturnValue('')
-            const user = userEvent.setup()
+            searchStore.setState({ searchTerm: 'kibana' })
 
             // Act
-            render(<Search />)
-            const input = screen.getByPlaceholderText(/search in docs/i)
-            await user.type(input, 'kibana')
+            render(<Search />, { wrapper: TestWrapper })
 
             // Assert
-            expect(mockSetSearchTerm).toHaveBeenCalled()
+            const input = screen.getByPlaceholderText(
+                /search in docs/i
+            ) as HTMLInputElement
+            expect(input.value).toBe('kibana')
         })
     })
 
     describe('Ask AI button', () => {
         it('should not show Ask AI button when search term is empty', () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('')
-
             // Act
-            render(<Search />)
+            render(<Search />, { wrapper: TestWrapper })
 
             // Assert
             expect(
-                screen.queryByRole('button', { name: /ask ai/i })
+                screen.queryByRole('button', { name: /tell me more about/i })
             ).not.toBeInTheDocument()
         })
 
         it('should show Ask AI button when search term exists', () => {
             // Arrange
-            mockUseSearchTerm.mockReturnValue('elasticsearch')
+            searchStore.setState({ searchTerm: 'elasticsearch' })
 
             // Act
-            render(<Search />)
+            render(<Search />, { wrapper: TestWrapper })
 
             // Assert
             expect(
                 screen.getByRole('button', { name: /tell me more about/i })
             ).toBeInTheDocument()
-            expect(screen.getByText(/elasticsearch/i)).toBeInTheDocument()
         })
 
-        it('should trigger chat actions when Ask AI button is clicked', async () => {
+        it('should trigger chat when Ask AI button is clicked', async () => {
             // Arrange
-            const searchTerm = 'what is kibana'
-            mockUseSearchTerm.mockReturnValue(searchTerm)
+            searchStore.setState({ searchTerm: 'what is kibana' })
             const user = userEvent.setup()
 
             // Act
-            render(<Search />)
+            render(<Search />, { wrapper: TestWrapper })
             await user.click(
                 screen.getByRole('button', { name: /tell me more about/i })
             )
 
-            // Assert - verify the workflow is triggered
-            expect(mockClearChat).toHaveBeenCalled()
-            expect(mockSubmitQuestion).toHaveBeenCalledWith(searchTerm)
-            expect(mockSetModalMode).toHaveBeenCalledWith('askAi')
+            // Assert - chat store should have user message and mode should change
+            await waitFor(() => {
+                const messages = chatStore.getState().chatMessages
+                expect(messages.length).toBeGreaterThanOrEqual(1)
+                expect(messages[0].content).toBe('what is kibana')
+            })
+            expect(modalStore.getState().mode).toBe('askAi')
         })
 
         it('should not submit whitespace-only search term', async () => {
             // Arrange
-            mockUseSearchTerm.mockReturnValue('   ')
+            searchStore.setState({ searchTerm: '   ' })
             const user = userEvent.setup()
 
             // Act
-            render(<Search />)
-            await user.click(
-                screen.getByRole('button', { name: /tell me more about/i })
-            )
+            render(<Search />, { wrapper: TestWrapper })
+            // Button should still be visible for whitespace
+            const button = screen.queryByRole('button', {
+                name: /tell me more about/i,
+            })
+            if (button) {
+                await user.click(button)
+            }
 
-            // Assert - submission should be blocked
-            expect(mockSubmitQuestion).not.toHaveBeenCalled()
+            // Assert - chat should not be triggered
+            expect(chatStore.getState().chatMessages).toHaveLength(0)
         })
     })
 
     describe('Search on Enter', () => {
-        it('should trigger chat workflow when Enter is pressed', async () => {
+        it('should trigger chat when Enter is pressed with valid search', async () => {
             // Arrange
-            const searchTerm = 'elasticsearch query'
-            mockUseSearchTerm.mockReturnValue(searchTerm)
+            searchStore.setState({ searchTerm: 'elasticsearch query' })
             const user = userEvent.setup()
 
             // Act
-            render(<Search />)
+            render(<Search />, { wrapper: TestWrapper })
             const input = screen.getByPlaceholderText(/search in docs/i)
             await user.click(input)
             await user.keyboard('{Enter}')
 
-            // Assert - same workflow as clicking button
-            expect(mockClearChat).toHaveBeenCalled()
-            expect(mockSubmitQuestion).toHaveBeenCalledWith(searchTerm)
-            expect(mockSetModalMode).toHaveBeenCalledWith('askAi')
+            // Assert
+            await waitFor(() => {
+                const messages = chatStore.getState().chatMessages
+                expect(messages[0]?.content).toBe('elasticsearch query')
+            })
         })
 
         it('should not submit empty search on Enter', async () => {
             // Arrange
-            mockUseSearchTerm.mockReturnValue('')
             const user = userEvent.setup()
 
             // Act
-            render(<Search />)
+            render(<Search />, { wrapper: TestWrapper })
             const input = screen.getByPlaceholderText(/search in docs/i)
             await user.click(input)
             await user.keyboard('{Enter}')
 
             // Assert
-            expect(mockSubmitQuestion).not.toHaveBeenCalled()
+            expect(chatStore.getState().chatMessages).toHaveLength(0)
         })
     })
 
     describe('Search results', () => {
-        it('should render SearchResults component', () => {
+        it('should fetch and display search results', async () => {
             // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
-            mockUseSearchQuery.mockReturnValue({
-                isLoading: false,
-                isFetching: false,
-                data: {
-                    results: [],
-                    totalResults: 0,
-                    pageCount: 1,
-                    pageNumber: 1,
-                    pageSize: 10,
+            mockSearchResponse([
+                {
+                    type: 'doc',
+                    url: '/test1',
+                    title: 'Test Result 1',
+                    description: 'Description 1',
+                    score: 0.9,
+                    parents: [],
                 },
-                error: null,
-                cancelQuery: jest.fn(),
-            })
-
-            // Act
-            render(<Search />)
-
-            // Assert - SearchResults renders a div with data-search-results attribute
-            expect(
-                document.querySelector('[data-search-results]')
-            ).toBeInTheDocument()
-        })
-    })
-
-    describe('Search cancellation', () => {
-        const mockCancelQuery = jest.fn()
-
-        beforeEach(() => {
-            mockCancelQuery.mockClear()
-            mockUseSearchQuery.mockReturnValue({
-                isLoading: false,
-                isFetching: false,
-                data: null,
-                error: null,
-                cancelQuery: mockCancelQuery,
-            })
-        })
-
-        it('should provide cancelQuery function from useSearchQuery', () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('')
-
-            // Act
-            render(<Search />)
-
-            // Assert - verify the hook is called and returns cancelQuery
-            expect(mockUseSearchQuery).toHaveBeenCalled()
-        })
-    })
-
-    describe('Return key icon visibility', () => {
-        it('should show return key icon when input is focused', async () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('elasticsearch')
-            const user = userEvent.setup()
-
-            // Act
-            render(<Search />)
-            const input = screen.getByPlaceholderText(/search in docs/i)
-            await user.click(input)
-
-            // Assert - return key icon should be visible
-            const returnKeyIcon = document.querySelector('.return-key-icon')
-            expect(returnKeyIcon).toBeInTheDocument()
-            expect(returnKeyIcon).toHaveStyle({ visibility: 'visible' })
-        })
-
-        it('should hide return key icon when input loses focus', async () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('elasticsearch')
-            const user = userEvent.setup()
-
-            // Act
-            render(<Search />)
-            // Input is auto-focused, so icon should be visible initially
-            const returnKeyIcon = document.querySelector('.return-key-icon')
-            expect(returnKeyIcon).toHaveStyle({ visibility: 'visible' })
-
-            // Blur the input
-            await act(async () => {
-                await user.click(document.body)
-            })
-
-            // Assert - return key icon should be hidden after blur
-            await waitFor(() => {
-                expect(returnKeyIcon).toHaveStyle({ visibility: 'hidden' })
-            })
-        })
-
-        it('should show return key icon when Ask AI button is focused', async () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('elasticsearch')
-            const user = userEvent.setup()
+            ])
+            searchStore.setState({ searchTerm: 'test' })
 
             // Act
-            render(<Search />)
-            await user.tab() // Tab to focus the button
-
-            // Assert - return key icon should be visible when button is focused
-            // Note: CSS :focus selector makes it visible, but we can check the icon exists
-            const returnKeyIcon = document.querySelector('.return-key-icon')
-            expect(returnKeyIcon).toBeInTheDocument()
+            render(<Search />, { wrapper: TestWrapper })
+
+            // Assert - wait for debounced search and result
+            await waitFor(
+                () => {
+                    expect(
+                        screen.getByText('Test Result 1')
+                    ).toBeInTheDocument()
+                },
+                { timeout: 1000 }
+            )
         })
     })
 
     describe('Arrow key navigation', () => {
         beforeEach(() => {
-            mockUseSearchQuery.mockReturnValue({
-                isLoading: false,
-                isFetching: false,
-                data: {
-                    results: [
-                        {
-                            url: '/test1',
-                            title: 'Test Result 1',
-                            description: 'Description 1',
-                            score: 0.9,
-                            parents: [],
-                        },
-                        {
-                            url: '/test2',
-                            title: 'Test Result 2',
-                            description: 'Description 2',
-                            score: 0.8,
-                            parents: [],
-                        },
-                        {
-                            url: '/test3',
-                            title: 'Test Result 3',
-                            description: 'Description 3',
-                            score: 0.7,
-                            parents: [],
-                        },
-                    ],
-                    totalResults: 3,
-                    pageCount: 1,
-                    pageNumber: 1,
-                    pageSize: 10,
+            mockSearchResponse([
+                {
+                    type: 'doc',
+                    url: '/test1',
+                    title: 'Test Result 1',
+                    description: 'Description 1',
+                    score: 0.9,
+                    parents: [],
                 },
-                error: null,
-                cancelQuery: jest.fn(),
-            })
-        })
-
-        it('should navigate from input to first list item on ArrowDown', async () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
-            const user = userEvent.setup()
-
-            // Act
-            render(<Search />)
-            const input = screen.getByPlaceholderText(/search in docs/i)
-            await act(async () => {
-                await user.click(input)
-                await user.keyboard('{ArrowDown}')
-            })
-
-            // Assert - first list item should be focused
-            await waitFor(() => {
-                const firstItem = screen.getByText('Test Result 1').closest('a')
-                expect(firstItem).toHaveFocus()
-            })
-        })
-
-        it('should navigate between list items with ArrowDown', async () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
-            const user = userEvent.setup()
-
-            // Act
-            render(<Search />)
-            const firstItem = screen.getByText('Test Result 1').closest('a')
-            if (!firstItem) throw new Error('First item not found')
-
-            await act(async () => {
-                firstItem.focus()
-                await user.keyboard('{ArrowDown}')
-            })
-
-            // Assert - second item should be focused
-            const secondItem = screen.getByText('Test Result 2').closest('a')
-            expect(secondItem).toHaveFocus()
-        })
-
-        it('should navigate between list items with ArrowUp', async () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
-            const user = userEvent.setup()
-
-            // Act
-            render(<Search />)
-            const secondItem = screen.getByText('Test Result 2').closest('a')
-            if (!secondItem) throw new Error('Second item not found')
-
-            await act(async () => {
-                secondItem.focus()
-                await user.keyboard('{ArrowUp}')
-            })
-
-            // Assert - first item should be focused
-            const firstItem = screen.getByText('Test Result 1').closest('a')
-            expect(firstItem).toHaveFocus()
-        })
-
-        it('should navigate from last list item to Ask AI button on ArrowDown', async () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
-            const user = userEvent.setup()
-
-            // Act
-            render(<Search />)
-            const lastItem = screen.getByText('Test Result 3').closest('a')
-            if (!lastItem) throw new Error('Last item not found')
-
-            await act(async () => {
-                lastItem.focus()
-                await user.keyboard('{ArrowDown}')
-            })
-
-            // Assert - Ask AI button should be focused
-            await waitFor(() => {
-                const askAiButton = screen.getByRole('button', {
-                    name: /tell me more about/i,
-                })
-                expect(askAiButton).toHaveFocus()
-            })
+                {
+                    type: 'doc',
+                    url: '/test2',
+                    title: 'Test Result 2',
+                    description: 'Description 2',
+                    score: 0.8,
+                    parents: [],
+                },
+            ])
         })
 
-        it('should navigate from first list item to input on ArrowUp', async () => {
+        it('should navigate from input to first result on ArrowDown', async () => {
             // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
+            searchStore.setState({ searchTerm: 'test' })
             const user = userEvent.setup()
 
             // Act
-            render(<Search />)
-            const firstItem = screen.getByText('Test Result 1').closest('a')
-            if (!firstItem) throw new Error('First item not found')
-
-            await act(async () => {
-                firstItem.focus()
-                await user.keyboard('{ArrowUp}')
-            })
+            render(<Search />, { wrapper: TestWrapper })
 
-            // Assert - input should be focused
+            // Wait for results to load
             await waitFor(() => {
-                const input = screen.getByPlaceholderText(/search in docs/i)
-                expect(input).toHaveFocus()
+                expect(screen.getByText('Test Result 1')).toBeInTheDocument()
             })
-        })
-
-        it('should navigate from Ask AI button to last list item on ArrowUp', async () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
-            const user = userEvent.setup()
 
-            // Act
-            render(<Search />)
-            const askAiButton = screen.getByRole('button', {
-                name: /tell me more about/i,
-            })
-            await act(async () => {
-                askAiButton.focus()
-                await user.keyboard('{ArrowUp}')
-            })
+            const input = screen.getByPlaceholderText(/search in docs/i)
+            await user.click(input)
+            await user.keyboard('{ArrowDown}')
 
-            // Assert - last list item should be focused
+            // Assert
             await waitFor(() => {
-                const lastItem = screen.getByText('Test Result 3').closest('a')
-                expect(lastItem).toHaveFocus()
+                const firstResult = screen
+                    .getByText('Test Result 1')
+                    .closest('a')
+                expect(firstResult).toHaveFocus()
             })
         })
 
-        it('should navigate from input to Ask AI button when there are no results', async () => {
+        it('should navigate between results with ArrowDown', async () => {
             // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
-            mockUseSearchQuery.mockReturnValue({
-                isLoading: false,
-                isFetching: false,
-                data: {
-                    results: [],
-                    totalResults: 0,
-                    pageCount: 1,
-                    pageNumber: 1,
-                    pageSize: 10,
-                },
-                error: null,
-                cancelQuery: jest.fn(),
-            })
+            searchStore.setState({ searchTerm: 'test' })
             const user = userEvent.setup()
 
             // Act
-            render(<Search />)
-            const input = screen.getByPlaceholderText(/search in docs/i)
-            await act(async () => {
-                await user.click(input)
-                await user.keyboard('{ArrowDown}')
-            })
+            render(<Search />, { wrapper: TestWrapper })
 
-            // Assert - Ask AI button should be focused (fallback when no results)
             await waitFor(() => {
-                const askAiButton = screen.getByRole('button', {
-                    name: /tell me more about/i,
-                })
-                expect(askAiButton).toHaveFocus()
-            })
-        })
-
-        it('should navigate from Ask AI button to input when there are no results', async () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
-            mockUseSearchQuery.mockReturnValue({
-                isLoading: false,
-                isFetching: false,
-                data: {
-                    results: [],
-                    totalResults: 0,
-                    pageCount: 1,
-                    pageNumber: 1,
-                    pageSize: 10,
-                },
-                error: null,
-                cancelQuery: jest.fn(),
+                expect(screen.getByText('Test Result 1')).toBeInTheDocument()
             })
-            const user = userEvent.setup()
 
-            // Act
-            render(<Search />)
-            const askAiButton = screen.getByRole('button', {
-                name: /tell me more about/i,
-            })
-            await act(async () => {
-                askAiButton.focus()
-                await user.keyboard('{ArrowUp}')
-            })
+            const firstResult = screen.getByText('Test Result 1').closest('a')!
+            firstResult.focus()
+            await user.keyboard('{ArrowDown}')
 
-            // Assert - input should be focused
-            await waitFor(() => {
-                const input = screen.getByPlaceholderText(/search in docs/i)
-                expect(input).toHaveFocus()
-            })
+            // Assert
+            const secondResult = screen.getByText('Test Result 2').closest('a')
+            expect(secondResult).toHaveFocus()
         })
     })
 
     describe('Loading states', () => {
-        it('should show loading spinner when isLoading is true', () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
-            mockUseSearchQuery.mockReturnValue({
-                isLoading: true,
-                isFetching: false,
-                data: null,
-                error: null,
-                cancelQuery: jest.fn(),
-            })
-
-            // Act
-            render(<Search />)
-
-            // Assert - check that the loading spinner exists (it has aria-label="Loading" without trailing space)
-            const progressbars = screen.getAllByRole('progressbar')
-            const spinner = progressbars.find(
-                (el) => el.getAttribute('aria-label') === 'Loading'
+        it('should show loading spinner when fetching', async () => {
+            // Arrange - slow response
+            mockFetch.mockImplementation(
+                () =>
+                    new Promise((resolve) =>
+                        setTimeout(
+                            () =>
+                                resolve({
+                                    ok: true,
+                                    json: () =>
+                                        Promise.resolve({
+                                            results: [],
+                                            totalResults: 0,
+                                            pageCount: 1,
+                                            pageNumber: 1,
+                                            pageSize: 10,
+                                        }),
+                                }),
+                            500
+                        )
+                    )
             )
-            expect(spinner).toBeInTheDocument()
-        })
-
-        it('should show loading spinner when isFetching is true', () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
-            mockUseSearchQuery.mockReturnValue({
-                isLoading: false,
-                isFetching: true,
-                data: null,
-                error: null,
-                cancelQuery: jest.fn(),
-            })
+            searchStore.setState({ searchTerm: 'test' })
 
             // Act
-            render(<Search />)
-
-            // Assert
-            expect(screen.getByRole('progressbar')).toBeInTheDocument()
-        })
-    })
-
-    describe('Input value synchronization', () => {
-        it('should use searchTerm directly from store', () => {
-            // Arrange
-            mockUseSearchTerm.mockReturnValue('test search')
-            render(<Search />)
-            const input = screen.getByPlaceholderText(
-                /search in docs/i
-            ) as HTMLInputElement
-
-            // Assert - input value should match searchTerm from store
-            expect(input.value).toBe('test search')
-
-            // Act - update search term in store
-            mockUseSearchTerm.mockReturnValue('updated search')
-            const { rerender } = render(<Search />)
-            rerender(<Search />)
+            render(<Search />, { wrapper: TestWrapper })
 
-            // Assert - input should reflect updated value
-            expect(input.value).toBe('updated search')
+            // Assert - loading spinner should appear
+            await waitFor(() => {
+                const spinner = screen.queryByRole('progressbar')
+                // Spinner appears during loading
+                expect(spinner || screen.queryByText('test')).toBeTruthy()
+            })
         })
     })
 
-    describe('Esc button', () => {
-        it('should call clearSearchTerm and closeModal when Esc button is clicked', async () => {
+    describe('Close modal', () => {
+        it('should close modal and clear search when close button is clicked', async () => {
             // Arrange
-            mockUseSearchTerm.mockReturnValue('test')
-            const mockClearSearchTerm = jest.fn()
-            const mockCloseModal = jest.fn()
-            mockUseSearchActions.mockReturnValue({
-                setSearchTerm: jest.fn(),
-                clearSearchTerm: mockClearSearchTerm,
-                setPageNumber: jest.fn(),
-            })
-            mockUseModalActions.mockReturnValue({
-                setModalMode: jest.fn(),
-                openModal: jest.fn(),
-                closeModal: mockCloseModal,
-                toggleModal: jest.fn(),
-            })
+            modalStore.setState({ isOpen: true })
+            searchStore.setState({ searchTerm: 'test' })
             const user = userEvent.setup()
 
             // Act
-            render(<Search />)
-            const escButton = screen.getByRole('button', { name: /esc/i })
-            await user.click(escButton)
+            render(<Search />, { wrapper: TestWrapper })
+            await user.click(
+                screen.getByRole('button', { name: /close search modal/i })
+            )
 
             // Assert
-            expect(mockClearSearchTerm).toHaveBeenCalled()
-            expect(mockCloseModal).toHaveBeenCalled()
+            expect(modalStore.getState().isOpen).toBe(false)
+            expect(searchStore.getState().searchTerm).toBe('')
         })
     })
 })
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.tsx
index 9367cd23e..c727e4c23 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.tsx
@@ -1,7 +1,7 @@
-import { availableIcons } from '../../../eui-icons-cache'
 import { useChatActions } from '../AskAi/chat.store'
 import { useIsAskAiCooldownActive } from '../AskAi/useAskAiCooldown'
 import { InfoBanner } from '../InfoBanner'
+import { KeyboardShortcutsFooter } from '../KeyboardShortcutsFooter'
 import { SearchOrAskAiErrorCallout } from '../SearchOrAskAiErrorCallout'
 import { useModalActions } from '../modal.store'
 import { SearchResults } from './SearchResults/SearchResults'
@@ -13,16 +13,16 @@ import { useSearchQuery } from './useSearchQuery'
 import {
     EuiFieldText,
     EuiSpacer,
-    EuiButton,
     EuiHorizontalRule,
     EuiIcon,
     EuiLoadingSpinner,
     EuiText,
     useEuiTheme,
     useEuiFontSize,
+    EuiButtonIcon,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
-import React, { useState } from 'react'
+import React from 'react'
 
 export const Search = () => {
     const searchTerm = useSearchTerm()
@@ -31,9 +31,7 @@ export const Search = () => {
     const { setModalMode, closeModal } = useModalActions()
     const isSearchCooldownActive = useIsSearchCooldownActive()
     const isAskAiCooldownActive = useIsAskAiCooldownActive()
-    const [isInputFocused, setIsInputFocused] = useState(false)
     const { isLoading, isFetching } = useSearchQuery()
-    const xsFontSize = useEuiFontSize('xs').fontSize
     const mFontSize = useEuiFontSize('m').fontSize
     const { euiTheme } = useEuiTheme()
 
@@ -72,7 +70,6 @@ export const Search = () => {
             {!searchTerm.trim() && (
                 <SearchOrAskAiErrorCallout error={null} domain="search" />
             )}
-
             <div
                 css={css`
                     display: grid;
@@ -101,46 +98,36 @@ export const Search = () => {
                     placeholder="Search in Docs"
                     value={searchTerm}
                     onChange={handleSearchInputChange}
-                    onFocus={() => setIsInputFocused(true)}
-                    onBlur={() => setIsInputFocused(false)}
                     onKeyDown={handleInputKeyDown}
                     disabled={isSearchCooldownActive}
                 />
-                <EuiButton
-                    css={`
-                        block-size: 20px;
-                        font-size: ${xsFontSize};
-                        padding-inline: ${euiTheme.size.s};
-                        border-radius: ${euiTheme.border.radius.small};
-                    `}
-                    size="s"
+                <EuiButtonIcon
+                    aria-label="Close search modal"
+                    iconType="cross"
                     color="text"
-                    minWidth={false}
                     onClick={handleCloseModal}
-                >
-                    Esc
-                </EuiButton>
+                />
             </div>
 
             <SearchResults
                 onKeyDown={handleListItemKeyDown}
                 setItemRef={setItemRef}
             />
+            <EuiHorizontalRule margin="none" />
             {searchTerm && (
                 <div
                     css={css`
                         padding-inline: ${euiTheme.size.base};
                     `}
                 >
-                    <EuiSpacer size="s" />
+                    <EuiSpacer size="m" />
                     <EuiText color="subdued" size="xs">
                         Ask AI assistant
                     </EuiText>
-                    <EuiSpacer size="m" />
+                    <EuiSpacer size="s" />
                     <TellMeMoreButton
                         ref={buttonRef}
                         term={searchTerm}
-                        isInputFocused={isInputFocused}
                         onAsk={handleAskAiClick}
                         onArrowUp={focusLastAvailable}
                     />
@@ -153,108 +140,12 @@ export const Search = () => {
     )
 }
 
-const SearchFooter = () => {
-    const { euiTheme } = useEuiTheme()
-    return (
-        <>
-            <EuiHorizontalRule margin="none" />
-            <div
-                css={css`
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    gap: ${euiTheme.size.m};
-                    background-color: ${euiTheme.colors.backgroundBaseSubdued};
-                    border-bottom-right-radius: ${euiTheme.border.radius.small};
-                    border-bottom-left-radius: ${euiTheme.border.radius.small};
-                    padding-inline: ${euiTheme.size.base};
-                    padding-block: ${euiTheme.size.m};
-                `}
-            >
-                <KeyboardIconsWithLabel
-                    types={['returnKey']}
-                    label="to select"
-                />
-                <KeyboardIconsWithLabel
-                    types={['sortUp', 'sortDown']}
-                    label="to navigate"
-                />
-                <KeyboardIconsWithLabel types={['Esc']} label="to close" />
-            </div>
-        </>
-    )
-}
-
-interface KeyboardIconProps {
-    type: string
-}
-
-const KeyboardKey = ({ children }: { children: React.ReactNode }) => {
-    const { euiTheme } = useEuiTheme()
-    return (
-        <span
-            css={css`
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                background-color: ${euiTheme.colors.backgroundLightText};
-                min-width: ${euiTheme.size.l};
-                height: ${euiTheme.size.l};
-                border-radius: ${euiTheme.border.radius.small};
-                padding-inline: ${euiTheme.size.xs};
-            `}
-        >
-            {children}
-        </span>
-    )
-}
-
-const KeyboardIcon = ({ type }: KeyboardIconProps) => {
-    const { euiTheme } = useEuiTheme()
-    return (
-        <KeyboardKey>
-            {availableIcons.includes(type) ? (
-                <EuiIcon type={type} size="s" />
-            ) : (
-                <EuiText
-                    size="xs"
-                    css={css`
-                        margin-inline: ${euiTheme.size.xs};
-                    `}
-                >
-                    {type}
-                </EuiText>
-            )}
-        </KeyboardKey>
-    )
-}
+const SEARCH_KEYBOARD_SHORTCUTS = [
+    { keys: ['returnKey'], label: 'to select' },
+    { keys: ['sortUp', 'sortDown'], label: 'to navigate' },
+    { keys: ['Esc'], label: 'to close' },
+]
 
-const KeyboardIconsWithLabel = ({
-    types,
-    label,
-}: {
-    types: string[]
-    label: string
-}) => {
-    const { euiTheme } = useEuiTheme()
-    return (
-        <span
-            css={css`
-                display: flex;
-                gap: ${euiTheme.size.xs};
-            `}
-        >
-            <span
-                css={css`
-                    display: flex;
-                    gap: ${euiTheme.size.xs};
-                `}
-            >
-                {types.map((type, index) => (
-                    <KeyboardIcon type={types[index]} key={type + index} />
-                ))}
-            </span>
-            <span>{label}</span>
-        </span>
-    )
-}
+const SearchFooter = () => (
+    <KeyboardShortcutsFooter shortcuts={SEARCH_KEYBOARD_SHORTCUTS} />
+)
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResults.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResults.tsx
index 1ec3b7a11..be3b234ba 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResults.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResults.tsx
@@ -172,7 +172,7 @@ export const SearchResults = ({
                                 </ul>
                             }
                             loadedContent={
-                                data && (
+                                data ? (
                                     <ul>
                                         {filteredResults.map(
                                             (result, index) => (
@@ -188,6 +188,8 @@ export const SearchResults = ({
                                             )
                                         )}
                                     </ul>
+                                ) : (
+                                    <div>No results</div>
                                 )
                             }
                         />
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/TellMeMoreButton.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/TellMeMoreButton.tsx
index 34ec57456..3280fac12 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/TellMeMoreButton.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/TellMeMoreButton.tsx
@@ -1,106 +1,50 @@
 import { useIsAskAiCooldownActive } from '../AskAi/useAskAiCooldown'
-import { EuiButton, EuiIcon, useEuiTheme } from '@elastic/eui'
+import { ElasticAiAssistantButton } from '../ElasticAiAssitant'
+import { useEuiTheme } from '@elastic/eui'
 import { css } from '@emotion/react'
 import { forwardRef } from 'react'
 
-const gradientContainerStyles = css`
-    @keyframes gradientMove {
-        from {
-            background-position: 0% 0%;
-        }
-        to {
-            background-position: 100% 0%;
-        }
-    }
-    padding: var(--outline-size);
-    background: linear-gradient(
-        90deg,
-        #f04e98 0%,
-        #02bcb7 25%,
-        #f04e98 50%,
-        #02bcb7 75%,
-        #f04e98 100%
-    );
-    background-size: 200% 100%;
-    background-position: 0% 0%;
-    border-radius: 4px;
-    animation: gradientMove 3s ease infinite;
-`
-
 interface TellMeMoreButtonProps {
     term: string
     onAsk: () => void
     onArrowUp?: () => void
-    isInputFocused: boolean
 }
 
 export const TellMeMoreButton = forwardRef<
     HTMLButtonElement,
     TellMeMoreButtonProps
->(({ term, onAsk, onArrowUp, isInputFocused }, ref) => {
+>(({ term, onAsk, onArrowUp }, ref) => {
     const isAskAiCooldownActive = useIsAskAiCooldownActive()
     const { euiTheme } = useEuiTheme()
 
-    const highlightedTextStyles = css`
-        font-weight: ${euiTheme.font.weight.bold};
-        color: ${euiTheme.colors.link};
-    `
-
     return (
-        <div css={gradientContainerStyles}>
-            <EuiButton
-                buttonRef={ref}
-                iconType="sparkles"
+        <ElasticAiAssistantButton
+            buttonRef={ref}
+            fullWidth
+            css={css`
+                height: 40px;
+                & > span {
+                    justify-content: flex-start;
+                }
+            `}
+            onClick={onAsk}
+            disabled={isAskAiCooldownActive}
+            onKeyDown={(e) => {
+                if (e.key === 'ArrowUp') {
+                    e.preventDefault()
+                    onArrowUp?.()
+                }
+            }}
+        >
+            <span>Tell me more about</span>{' '}
+            <span
                 css={css`
-                    & > span {
-                        display: flex;
-                        align-items: center;
-                        justify-content: flex-start;
-                        width: 100%;
-                        gap: ${euiTheme.size.s};
-                    }
-                    border: none;
-                    position: relative;
-                    :focus .return-key-icon {
-                        visibility: visible;
-                    }
+                    font-weight: ${euiTheme.font.weight.bold};
                 `}
-                color="text"
-                fullWidth
-                onClick={onAsk}
-                disabled={isAskAiCooldownActive}
-                onKeyDown={(e) => {
-                    if (e.key === 'ArrowUp') {
-                        e.preventDefault()
-                        onArrowUp?.()
-                    }
-                }}
             >
-                <span
-                    css={css`
-                        flex: 1;
-                        min-width: 0;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        text-align: left;
-                    `}
-                >
-                    Tell me more about&nbsp;
-                    <span css={highlightedTextStyles}>{term}</span>
-                </span>
-                <EuiIcon
-                    className="return-key-icon"
-                    css={css`
-                        visibility: ${isInputFocused ? 'visible' : 'hidden'};
-                        flex-shrink: 0;
-                    `}
-                    type="returnKey"
-                    color="subdued"
-                    size="m"
-                />
-            </EuiButton>
-        </div>
+                {term}
+            </span>
+        </ElasticAiAssistantButton>
     )
 })
 
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useKeyboardNavigation.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useKeyboardNavigation.ts
index 70b601027..826ae703e 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useKeyboardNavigation.ts
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useKeyboardNavigation.ts
@@ -46,6 +46,7 @@ export const useKeyboardNavigation = (
 
     const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter') {
+            e.preventDefault()
             onEnter?.()
         } else if (e.key === 'ArrowDown') {
             e.preventDefault()
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAi.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAi.tsx
index 20819238b..f6ab19e54 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAi.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAi.tsx
@@ -1,16 +1,24 @@
 import { SearchOrAskAiButton } from './SearchOrAskAiButton'
+import { EuiProvider } from '@elastic/eui'
 import r2wc from '@r2wc/react-to-web-component'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import * as React from 'react'
 import { StrictMode } from 'react'
 
+const queryClient = new QueryClient()
+
 const SearchOrAskAi = () => {
-    const queryClient = new QueryClient()
     return (
         <StrictMode>
-            <QueryClientProvider client={queryClient}>
-                <SearchOrAskAiButton />
-            </QueryClientProvider>
+            <EuiProvider
+                colorMode="light"
+                globalStyles={false}
+                utilityClasses={false}
+            >
+                <QueryClientProvider client={queryClient}>
+                    <SearchOrAskAiButton />
+                </QueryClientProvider>
+            </EuiProvider>
         </StrictMode>
     )
 }
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx
index 2a5354893..5e2542c80 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx
@@ -1,7 +1,13 @@
-/** @jsxImportSource @emotion/react */
 import '../../eui-icons-cache'
-import { useSearchActions, useSearchTerm } from './Search/search.store'
-import { useModalActions, useModalIsOpen } from './modal.store'
+import { ElasticAiAssistantButton } from './ElasticAiAssitant'
+import { useSearchTerm } from './Search/search.store'
+import AiIcon from './ai-icon.svg'
+import {
+    ModalMode,
+    useModalActions,
+    useModalIsOpen,
+    useModalMode,
+} from './modal.store'
 import {
     EuiButton,
     EuiPortal,
@@ -11,6 +17,8 @@ import {
     EuiTextTruncate,
     EuiText,
     EuiLoadingSpinner,
+    useEuiTheme,
+    EuiToolTip,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
 import { useQuery } from '@tanstack/react-query'
@@ -24,10 +32,11 @@ const SearchOrAskAiModal = lazy(() =>
 )
 
 export const SearchOrAskAiButton = () => {
+    const { euiTheme } = useEuiTheme()
     const searchTerm = useSearchTerm()
-    const { clearSearchTerm } = useSearchActions()
     const isModalOpen = useModalIsOpen()
-    const { openModal, closeModal, toggleModal } = useModalActions()
+    const modalMode = useModalMode()
+    const { openModal, closeModal, setModalMode } = useModalActions()
 
     const { data: isApiAvailable } = useQuery({
         queryKey: ['api-health'],
@@ -46,6 +55,7 @@ export const SearchOrAskAiButton = () => {
         top: 48px;
         width: 640px;
         max-width: 100%;
+        border-radius: ${euiTheme.size.s};
     `
 
     const loadingCss = css`
@@ -55,33 +65,65 @@ export const SearchOrAskAiButton = () => {
         padding: 2rem;
     `
 
+    const openAndSetModalMode = (mode: ModalMode) => {
+        setModalMode(mode)
+        if (!isModalOpen) {
+            openModal()
+        }
+    }
+
+    const openAskAiModal = () => openAndSetModalMode('askAi')
+    const openSearchModal = () => openAndSetModalMode('search')
+
     useEffect(() => {
         const handleKeydown = (event: KeyboardEvent) => {
             if (event.key === 'Escape') {
-                clearSearchTerm()
                 closeModal()
             }
             if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
                 event.preventDefault()
-                toggleModal()
+                openSearchModal()
+            }
+
+            if (
+                (event.metaKey || event.ctrlKey) &&
+                event.code === 'Semicolon'
+            ) {
+                event.preventDefault()
+                openAskAiModal()
             }
         }
         window.addEventListener('keydown', handleKeydown)
         return () => {
             window.removeEventListener('keydown', handleKeydown)
         }
-    }, [])
+    }, [isModalOpen, modalMode])
 
     if (!isApiAvailable) {
         return null
     }
 
     return (
-        <>
+        <div
+            css={css`
+                display: flex;
+                gap: ${euiTheme.size.base};
+            `}
+        >
+            <EuiToolTip content="Keyboard shortcut: ⌘;">
+                <ElasticAiAssistantButton
+                    size="s"
+                    iconType={AiIcon}
+                    onClick={openAskAiModal}
+                >
+                    Ask AI Assistant
+                </ElasticAiAssistantButton>
+            </EuiToolTip>
+
             <EuiButton
                 size="s"
                 color="text"
-                onClick={openModal}
+                onClick={openSearchModal}
                 iconType="search"
             >
                 <EuiText
@@ -97,7 +139,7 @@ export const SearchOrAskAiButton = () => {
                                 truncation="end"
                             />
                         ) : (
-                            'Search or ask AI'
+                            'Search in Docs'
                         )}
                     </span>
                 </EuiText>
@@ -128,6 +170,6 @@ export const SearchOrAskAiButton = () => {
                     </EuiOverlayMask>
                 </EuiPortal>
             )}
-        </>
+        </div>
     )
 }
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
index 94aade940..c79106eed 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
@@ -8,22 +8,12 @@ import {
     useSearchCooldown,
     useSearchCooldownActions,
 } from './Search/useSearchCooldown'
-import { useModalActions, useModalMode } from './modal.store'
+import { useModalMode } from './modal.store'
 import { useCooldown } from './useCooldown'
-import {
-    EuiTabbedContent,
-    EuiIcon,
-    type EuiTabbedContentTab,
-    useEuiTheme,
-} from '@elastic/eui'
-import { css } from '@emotion/react'
 import * as React from 'react'
-import { useMemo } from 'react'
 
 export const SearchOrAskAiModal = React.memo(() => {
-    const { euiTheme } = useEuiTheme()
     const modalMode = useModalMode()
-    const { setModalMode } = useModalActions()
 
     // Manage cooldown countdowns at the modal level so they continue running when switching tabs
     const searchCooldown = useSearchCooldown()
@@ -44,40 +34,5 @@ export const SearchOrAskAiModal = React.memo(() => {
         cooldown: askAiCooldown,
         onCooldownFinished: () => notifyAskAiCooldownFinished(),
     })
-
-    const tabs: EuiTabbedContentTab[] = useMemo(
-        () => [
-            {
-                id: 'search',
-                name: 'Search',
-                prepend: <EuiIcon type="search" />,
-                content: <Search />,
-            },
-            {
-                id: 'askAi',
-                name: 'Ask AI',
-                prepend: <EuiIcon type="sparkles" />,
-                content: <Chat />,
-            },
-        ],
-        []
-    )
-
-    const selectedTab = tabs.find((tab) => tab.id === modalMode) || tabs[0]
-
-    return (
-        <>
-            <EuiTabbedContent
-                css={css`
-                    .euiTabs {
-                        padding-inline: ${euiTheme.size.base};
-                    }
-                `}
-                tabs={tabs}
-                selectedTab={selectedTab}
-                onTabClick={(tab) => setModalMode(tab.id as 'search' | 'askAi')}
-            />
-            {/*<ModalFooter />*/}
-        </>
-    )
+    return modalMode === 'search' ? <Search /> : <Chat />
 })
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/ai-icon.svg b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/ai-icon.svg
new file mode 100644
index 000000000..901d4e87e
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/ai-icon.svg
@@ -0,0 +1,24 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 7H15V16H9V7Z" fill="url(#paint0_linear_382_1202)"/>
+<path d="M1 11.5C1 9.01472 3.01472 7 5.5 7H7V16H5.5C3.01472 16 1 13.9853 1 11.5Z" fill="url(#paint1_linear_382_1202)"/>
+<path d="M15 3C15 4.65685 13.6569 6 12 6C10.3431 6 9 4.65685 9 3C9 1.34315 10.3431 0 12 0C13.6569 0 15 1.34315 15 3Z" fill="url(#paint2_linear_382_1202)"/>
+<path d="M1.5 5.75C1.5 2.71243 3.96243 0.25 7 0.25V5.75H1.5Z" fill="url(#paint3_linear_382_1202)"/>
+<defs>
+<linearGradient id="paint0_linear_382_1202" x1="-0.53125" y1="-2.5" x2="15.3422" y2="9.5049" gradientUnits="userSpaceOnUse">
+<stop offset="0.168292" stop-color="#0B64DD"/>
+<stop offset="0.83" stop-color="#731DCF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_382_1202" x1="-0.53125" y1="-2.5" x2="15.3422" y2="9.5049" gradientUnits="userSpaceOnUse">
+<stop offset="0.168292" stop-color="#0B64DD"/>
+<stop offset="0.83" stop-color="#731DCF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_382_1202" x1="-0.53125" y1="-2.5" x2="15.3422" y2="9.5049" gradientUnits="userSpaceOnUse">
+<stop offset="0.168292" stop-color="#0B64DD"/>
+<stop offset="0.83" stop-color="#731DCF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_382_1202" x1="-0.53125" y1="-2.5" x2="15.3422" y2="9.5049" gradientUnits="userSpaceOnUse">
+<stop offset="0.168292" stop-color="#0B64DD"/>
+<stop offset="0.83" stop-color="#731DCF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/Elastic.Documentation.Site/jest.config.js b/src/Elastic.Documentation.Site/jest.config.js
index 4a03866fa..dca9f48a0 100644
--- a/src/Elastic.Documentation.Site/jest.config.js
+++ b/src/Elastic.Documentation.Site/jest.config.js
@@ -1,9 +1,11 @@
+/* global process, module */
 const isCI = process.env.CI === 'true'
 
 module.exports = {
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
   transform: {
+    '^.+\\.svg$': '<rootDir>/svgTransform.js',
     '^.+\\.(ts|tsx)$': [
       'babel-jest',
       {
diff --git a/src/Elastic.Documentation.Site/package-lock.json b/src/Elastic.Documentation.Site/package-lock.json
index 52b01aee6..afef964bd 100644
--- a/src/Elastic.Documentation.Site/package-lock.json
+++ b/src/Elastic.Documentation.Site/package-lock.json
@@ -51,7 +51,8 @@
         "@babel/preset-typescript": "7.27.1",
         "@elastic/synthetics": "1.20.0",
         "@eslint/js": "9.39.1",
-        "@parcel/reporter-bundle-analyzer": "2.16.0",
+        "@parcel/reporter-bundle-analyzer": "2.16.1",
+        "@parcel/transformer-svg-react": "2.16.1",
         "@tailwindcss/postcss": "4.1.17",
         "@testing-library/jest-dom": "6.9.1",
         "@testing-library/react": "16.3.0",
@@ -68,13 +69,14 @@
         "jest-environment-jsdom": "30.2.0",
         "jest-transform-stub": "2.0.0",
         "moment": "2.30.1",
-        "parcel": "2.16.0",
+        "parcel": "2.16.1",
         "postcss": "8.5.6",
         "postcss-import": "16.1.1",
         "prettier": "3.6.2",
         "prettier-plugin-tailwindcss": "0.7.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
+        "svgo": "^3.3.2",
         "text-diff": "1.0.1",
         "typescript": "^5.9.3",
         "typescript-eslint": "8.46.4",
@@ -4341,6 +4343,7 @@
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -4354,6 +4357,7 @@
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -4367,6 +4371,7 @@
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -4380,6 +4385,7 @@
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -4393,6 +4399,7 @@
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -4406,6 +4413,7 @@
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -4739,22 +4747,22 @@
       }
     },
     "node_modules/@parcel/bundler-default": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/bundler-default/-/bundler-default-2.16.0.tgz",
-      "integrity": "sha512-8kY+TUhir7qm+TgSMeMd8CP2PVoZjXamiZ8+mbXws4jKw6IrIVDQf8TkBZKGk7ncKJEteiX4ybbmiPjho8cHuA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/bundler-default/-/bundler-default-2.16.1.tgz",
+      "integrity": "sha512-ruy+Yt96Jre2+5PSE4qcH7ETarIuQ+OIY8hejOQ53inVgu9QlvBJf/L2PhNkumHN2zA6m5f0m/MhB+amaee5ew==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/graph": "3.6.0",
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/graph": "3.6.1",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -4762,15 +4770,15 @@
       }
     },
     "node_modules/@parcel/cache": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.16.0.tgz",
-      "integrity": "sha512-stBGOio+z2qjnSJNl1vJTNqjgLyzDFp+tUOKgaLJ8Vmn67jYccoGLTNApw2mhB3HtQuoz/5eudGHSvhqMpMyTg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.16.1.tgz",
+      "integrity": "sha512-qDlHQQ7RDfSi5MBnuFGCfQYiQQomsA5aZLntO5MCRD62VnMf9qz/RrCqpGFGOooljMoUaeVl0Q8ARvorRJJi8w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/fs": "2.16.0",
-        "@parcel/logger": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/fs": "2.16.1",
+        "@parcel/logger": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "lmdb": "2.8.5"
       },
       "engines": {
@@ -4781,13 +4789,13 @@
         "url": "https://opencollective.com/parcel"
       },
       "peerDependencies": {
-        "@parcel/core": "^2.16.0"
+        "@parcel/core": "^2.16.1"
       }
     },
     "node_modules/@parcel/codeframe": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.16.0.tgz",
-      "integrity": "sha512-wXpHOOE5o0c55AiUMCwkIrVCFeJzBfZpjhn07WQUUk57gGts5R67bMsoeoizvBhI748l6iSU7rPZSSrXc8NoRg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.16.1.tgz",
+      "integrity": "sha512-KLy9Fvf37SX6/wek2SUPw8A/W0kChcNXPUNeCIYWUFI4USAZ5KvesXS5RHUnrJTaR0XzD0Qia+MFJPgp6kuazQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4802,17 +4810,17 @@
       }
     },
     "node_modules/@parcel/compressor-raw": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/compressor-raw/-/compressor-raw-2.16.0.tgz",
-      "integrity": "sha512-tl8/iCPlInfD3YLo1s/kA9/o7XdrYNBuGsAj4VOFqplH+2FINb48XPzp7Z4VGOB2q8qokt2gohTGfuNPGIX2pw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/compressor-raw/-/compressor-raw-2.16.1.tgz",
+      "integrity": "sha512-44sHWuEyGwUvs2bG1t/hsBP0lR06HO2btrXhkUGL+HX6D8cZrkZfSBFnUrGYZURYRybyx8qkhcogf5SU5rbwAQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0"
+        "@parcel/plugin": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -4820,77 +4828,77 @@
       }
     },
     "node_modules/@parcel/config-default": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/config-default/-/config-default-2.16.0.tgz",
-      "integrity": "sha512-az5gWXyztHekV1Dpz3nNT3iz5SqHh2924XCb2w+VyNDtnLhLNQ+X7NJd0na+EbWd9KBJYEdVYDPVDy1bEei0lQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@parcel/bundler-default": "2.16.0",
-        "@parcel/compressor-raw": "2.16.0",
-        "@parcel/namer-default": "2.16.0",
-        "@parcel/optimizer-css": "2.16.0",
-        "@parcel/optimizer-html": "2.16.0",
-        "@parcel/optimizer-image": "2.16.0",
-        "@parcel/optimizer-svg": "2.16.0",
-        "@parcel/optimizer-swc": "2.16.0",
-        "@parcel/packager-css": "2.16.0",
-        "@parcel/packager-html": "2.16.0",
-        "@parcel/packager-js": "2.16.0",
-        "@parcel/packager-raw": "2.16.0",
-        "@parcel/packager-svg": "2.16.0",
-        "@parcel/packager-wasm": "2.16.0",
-        "@parcel/reporter-dev-server": "2.16.0",
-        "@parcel/resolver-default": "2.16.0",
-        "@parcel/runtime-browser-hmr": "2.16.0",
-        "@parcel/runtime-js": "2.16.0",
-        "@parcel/runtime-rsc": "2.16.0",
-        "@parcel/runtime-service-worker": "2.16.0",
-        "@parcel/transformer-babel": "2.16.0",
-        "@parcel/transformer-css": "2.16.0",
-        "@parcel/transformer-html": "2.16.0",
-        "@parcel/transformer-image": "2.16.0",
-        "@parcel/transformer-js": "2.16.0",
-        "@parcel/transformer-json": "2.16.0",
-        "@parcel/transformer-node": "2.16.0",
-        "@parcel/transformer-postcss": "2.16.0",
-        "@parcel/transformer-posthtml": "2.16.0",
-        "@parcel/transformer-raw": "2.16.0",
-        "@parcel/transformer-react-refresh-wrap": "2.16.0",
-        "@parcel/transformer-svg": "2.16.0"
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/config-default/-/config-default-2.16.1.tgz",
+      "integrity": "sha512-jBgbHW73MrEdiKH6LISLw5TZ2oVvyLm3GaYzwNkcRTUtSh6aRVjxvCWePdxy41dcwnMC/ABLsamtN4wokAKKSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@parcel/bundler-default": "2.16.1",
+        "@parcel/compressor-raw": "2.16.1",
+        "@parcel/namer-default": "2.16.1",
+        "@parcel/optimizer-css": "2.16.1",
+        "@parcel/optimizer-html": "2.16.1",
+        "@parcel/optimizer-image": "2.16.1",
+        "@parcel/optimizer-svg": "2.16.1",
+        "@parcel/optimizer-swc": "2.16.1",
+        "@parcel/packager-css": "2.16.1",
+        "@parcel/packager-html": "2.16.1",
+        "@parcel/packager-js": "2.16.1",
+        "@parcel/packager-raw": "2.16.1",
+        "@parcel/packager-svg": "2.16.1",
+        "@parcel/packager-wasm": "2.16.1",
+        "@parcel/reporter-dev-server": "2.16.1",
+        "@parcel/resolver-default": "2.16.1",
+        "@parcel/runtime-browser-hmr": "2.16.1",
+        "@parcel/runtime-js": "2.16.1",
+        "@parcel/runtime-rsc": "2.16.1",
+        "@parcel/runtime-service-worker": "2.16.1",
+        "@parcel/transformer-babel": "2.16.1",
+        "@parcel/transformer-css": "2.16.1",
+        "@parcel/transformer-html": "2.16.1",
+        "@parcel/transformer-image": "2.16.1",
+        "@parcel/transformer-js": "2.16.1",
+        "@parcel/transformer-json": "2.16.1",
+        "@parcel/transformer-node": "2.16.1",
+        "@parcel/transformer-postcss": "2.16.1",
+        "@parcel/transformer-posthtml": "2.16.1",
+        "@parcel/transformer-raw": "2.16.1",
+        "@parcel/transformer-react-refresh-wrap": "2.16.1",
+        "@parcel/transformer-svg": "2.16.1"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/parcel"
       },
       "peerDependencies": {
-        "@parcel/core": "^2.16.0"
+        "@parcel/core": "^2.16.1"
       }
     },
     "node_modules/@parcel/core": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.16.0.tgz",
-      "integrity": "sha512-erH9GdLe8Boie0mCO8hXn8Qt/pCACsOFlKp8UHNMlPaizUtCDkCOQqwmSi+VyrJ3dMMCOc/qBwTSGAJaJE8/Kw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-tza8oKYaPopGBwroGJKv7BrTg1lxTycS7SANIizxMB9FxDsAkq4vPny5/KHpFBcW3UTCGBvvNAG1oaVzeWF5Pg==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "@mischnic/json-sourcemap": "^0.1.1",
-        "@parcel/cache": "2.16.0",
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/events": "2.16.0",
-        "@parcel/feature-flags": "2.16.0",
-        "@parcel/fs": "2.16.0",
-        "@parcel/graph": "3.6.0",
-        "@parcel/logger": "2.16.0",
-        "@parcel/package-manager": "2.16.0",
-        "@parcel/plugin": "2.16.0",
-        "@parcel/profiler": "2.16.0",
-        "@parcel/rust": "2.16.0",
+        "@parcel/cache": "2.16.1",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/events": "2.16.1",
+        "@parcel/feature-flags": "2.16.1",
+        "@parcel/fs": "2.16.1",
+        "@parcel/graph": "3.6.1",
+        "@parcel/logger": "2.16.1",
+        "@parcel/package-manager": "2.16.1",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/profiler": "2.16.1",
+        "@parcel/rust": "2.16.1",
         "@parcel/source-map": "^2.1.1",
-        "@parcel/types": "2.16.0",
-        "@parcel/utils": "2.16.0",
-        "@parcel/workers": "2.16.0",
+        "@parcel/types": "2.16.1",
+        "@parcel/utils": "2.16.1",
+        "@parcel/workers": "2.16.1",
         "base-x": "^3.0.11",
         "browserslist": "^4.24.5",
         "clone": "^2.1.2",
@@ -4910,9 +4918,9 @@
       }
     },
     "node_modules/@parcel/core/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -4923,9 +4931,9 @@
       }
     },
     "node_modules/@parcel/diagnostic": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.16.0.tgz",
-      "integrity": "sha512-z5MeMwFegaA23wseltLykVV9OxsKkY3BiEje/Dt7ttVivwNWFKHDuXB8vbZTDArUooixUH3s/RJhTFI46VJc2A==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.16.1.tgz",
+      "integrity": "sha512-PJl7/QGsPboAMVFZId31iGMMY70AllZNOtYka9rTZRjTiBhZw4VrAG/RdqqKzjVuL6fZhurmfcwWzj+3gx8ccg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4941,9 +4949,9 @@
       }
     },
     "node_modules/@parcel/error-overlay": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/error-overlay/-/error-overlay-2.16.0.tgz",
-      "integrity": "sha512-ZcXOZc548Tjms0z7uaE4iUKHul32CpX5dCnEdum9PExxCLNCCxm4JgoO+dWeZXjNQDi8Opz9N3GU4wnF7WVzhg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/error-overlay/-/error-overlay-2.16.1.tgz",
+      "integrity": "sha512-9vZq5ijoAn+JjodXc5FNy6ZQ2qpqSAaKDs+wCi4JrZMJJx7+dXZ31xtbpmP2SzG2Wppf8KhS/dOGmtQh65jT8Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4955,9 +4963,9 @@
       }
     },
     "node_modules/@parcel/events": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.16.0.tgz",
-      "integrity": "sha512-PI7dryJLPYCe4jNzo7XWAzbUPUuD50Nd76GTdzaHhmcQfZnPrtWAu73UmP3yYqpbv97TtWSiCJyrJWPTDU/REA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.16.1.tgz",
+      "integrity": "sha512-+U7Trb2W8fm8w/OjwQpWN/Tepiwim/YNXuyPrhikFnsrg6QDdDTD/8/km4ah8Bzr0u4hIrn1k32InwDMCF5sig==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4969,9 +4977,9 @@
       }
     },
     "node_modules/@parcel/feature-flags": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/feature-flags/-/feature-flags-2.16.0.tgz",
-      "integrity": "sha512-GiRpLx0x8dZdWCpftk6OE0lp0Cc8oUyBssPiobigpSA8vgxrCz/zLbs83R/K70p+wPBb+ye4eEiR67+KCwcSXg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/feature-flags/-/feature-flags-2.16.1.tgz",
+      "integrity": "sha512-MY/z4gKZWk0MKvP+gpU42kiE9W4f9NM1fSCa1OcdqF7IUJDDM41CDJ9rbwSQrroDddIViaNzsLo7aSYVI/C7aA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4983,18 +4991,18 @@
       }
     },
     "node_modules/@parcel/fs": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.16.0.tgz",
-      "integrity": "sha512-nRp4BhJm1V8tPu68WjRvu5kbBjTwWXYzqwpGoWwHFmZQQ2J1/Ye28x1NY3awxSVGyXsEy2sEO4s7rLyd0EW2pA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.16.1.tgz",
+      "integrity": "sha512-/akyrCaurd8rfgXuT6tDAK6I1JfW56TFJmzfIwuFSPbRy3YVu4JKN1g2PShpOLPdnqfWZNCcsd+yuuMFVhA2HA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/feature-flags": "2.16.0",
-        "@parcel/rust": "2.16.0",
-        "@parcel/types-internal": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/feature-flags": "2.16.1",
+        "@parcel/rust": "2.16.1",
+        "@parcel/types-internal": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "@parcel/watcher": "^2.0.7",
-        "@parcel/workers": "2.16.0"
+        "@parcel/workers": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0"
@@ -5004,17 +5012,17 @@
         "url": "https://opencollective.com/parcel"
       },
       "peerDependencies": {
-        "@parcel/core": "^2.16.0"
+        "@parcel/core": "^2.16.1"
       }
     },
     "node_modules/@parcel/graph": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-3.6.0.tgz",
-      "integrity": "sha512-ShxOzS0FdyXJ7gwit7CSPuQCbU0bXkB+kZyrXgj0UmgIDYDMYO02T+UIlH4AReEzqcZq3An+sDOx+UKRM8j8Uw==",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-3.6.1.tgz",
+      "integrity": "sha512-82sjbjrSPK5BXH0tb65tQl/qvo/b2vsyA5F6z3SaQ/c3A5bmv5RxTvse1AgOb0St0lZ7ALaZibj1qZFBUyjdqw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/feature-flags": "2.16.0",
+        "@parcel/feature-flags": "2.16.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
@@ -5026,14 +5034,14 @@
       }
     },
     "node_modules/@parcel/logger": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.16.0.tgz",
-      "integrity": "sha512-/K6UVVCtS1KOkH9xxuH9u2xV3348mb+Fb33K/OUs5wnpfmo0TtrzodjLyMpQG6KrofmYKSNzA5petp7+cf3aug==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.16.1.tgz",
+      "integrity": "sha512-w9Qpp5S79fqn6nh/VqVYG4kCbIeW45zdPvYJMFgE90zhBRLrOnqw06cRZQdKj24C7/kdqOFFbrJ3B5uTsYeS0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/events": "2.16.0"
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/events": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0"
@@ -5044,9 +5052,9 @@
       }
     },
     "node_modules/@parcel/markdown-ansi": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.16.0.tgz",
-      "integrity": "sha512-NxlmF/JAmsq9Yf/8q2+WEHFkcQ/cDoVOUx6ETDM8icDaQ8kXJbZSKAMOWnsB1EF0757UST77kX9zw/V6tyXqnw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.16.1.tgz",
+      "integrity": "sha512-4Qww9KkGrVrY/JyD2NtrdUmyufKOqGg3t6hkE4UqQBPb+GZd+TQi6i1mjWvOE6r9AF53x5PAZZ13f/HfllU2qA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5061,19 +5069,19 @@
       }
     },
     "node_modules/@parcel/namer-default": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/namer-default/-/namer-default-2.16.0.tgz",
-      "integrity": "sha512-pRb6Bz32Xl65CZ1LzKAa8ADGyPyrJ724tq2IToqH5JQ8bFGNXF7Tg/qrv582CjHS5dJb/HB7LizfWaliHiG5DA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/namer-default/-/namer-default-2.16.1.tgz",
+      "integrity": "sha512-vs4djcAt3HoQri6g8itdCzFTiFXwcVNfFDqa9By1pTdq/aKWapJWZaes2KCf2ey2FoEafS0tOIA90n124PM00A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5081,17 +5089,17 @@
       }
     },
     "node_modules/@parcel/node-resolver-core": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@parcel/node-resolver-core/-/node-resolver-core-3.7.0.tgz",
-      "integrity": "sha512-YIK7wtjO7biRoXNRdFR0uSYPY0FwvCA77xlJCOTX1+jeACj8BPwLKOMFJKCA89pBr7iHyTNzZ3ppVGsX8flMag==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@parcel/node-resolver-core/-/node-resolver-core-3.7.1.tgz",
+      "integrity": "sha512-xY+mzz1a5L22HvwkCHtt1fRZa8pD8znXLB8NLnqdu/xa7FGwWNgA2ukFPSlNGwwI5aw3jQylERP8Mr6/qLsefQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@mischnic/json-sourcemap": "^0.1.1",
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/fs": "2.16.0",
-        "@parcel/rust": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/fs": "2.16.1",
+        "@parcel/rust": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "nullthrows": "^1.1.1",
         "semver": "^7.7.1"
       },
@@ -5104,9 +5112,9 @@
       }
     },
     "node_modules/@parcel/node-resolver-core/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -5117,23 +5125,23 @@
       }
     },
     "node_modules/@parcel/optimizer-css": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/optimizer-css/-/optimizer-css-2.16.0.tgz",
-      "integrity": "sha512-QTrMOVknU4DmKzmnTxQx69ZZxoDYyTIWhpflDLSvUaLSXk2yi0SMBMcsEdA0W4bhORn6nj8toGwi04vbGVuQtA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/optimizer-css/-/optimizer-css-2.16.1.tgz",
+      "integrity": "sha512-MIbeqxqcbtGksiNzIvFeMU++gsBl8MafQRghQxsB1kAMl49i+Cnj/Kp3qKkHd+Bb2XXlx7TagGtXCnCrtxdJjw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
         "@parcel/source-map": "^2.1.1",
-        "@parcel/utils": "2.16.0",
+        "@parcel/utils": "2.16.1",
         "browserslist": "^4.24.5",
         "lightningcss": "^1.30.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5141,19 +5149,19 @@
       }
     },
     "node_modules/@parcel/optimizer-html": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/optimizer-html/-/optimizer-html-2.16.0.tgz",
-      "integrity": "sha512-T8VvsdCwLb/l3a/eHF2lJfeGO6Z4znKjvnBAvtyLwtFVVNnJasJLo9Cuan4bcnVM8etzbxjg1Qs/9c1hzWsBYg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/optimizer-html/-/optimizer-html-2.16.1.tgz",
+      "integrity": "sha512-AwrecuOOuWqlon+rWJsQuXyJ70ivTbjm505NTBKoQYdVeEbO6pZYYeuF8ZKh0Qq+zOCy47397RgEuiuwLf9t2g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0",
-        "@parcel/utils": "2.16.0"
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1",
+        "@parcel/utils": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5161,44 +5169,44 @@
       }
     },
     "node_modules/@parcel/optimizer-image": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/optimizer-image/-/optimizer-image-2.16.0.tgz",
-      "integrity": "sha512-CVAitXbtKfVxxmOjieeI/YSwSFKx+In3MjP4jFpuYwgDT0TsgsyweBkADQMfEcBjeIPiCXLzzf/GSVIDY7hgwA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/optimizer-image/-/optimizer-image-2.16.1.tgz",
+      "integrity": "sha512-vlQW0DJQ0XTmM/rNwJUuLbTeB31CwyH2yb2RMZfByAGGodpy2vxt51NS/KyV1mNcJRBtW2Li+XVzYSb14dF5Bw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0",
-        "@parcel/utils": "2.16.0",
-        "@parcel/workers": "2.16.0"
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1",
+        "@parcel/utils": "2.16.1",
+        "@parcel/workers": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/parcel"
       },
       "peerDependencies": {
-        "@parcel/core": "^2.16.0"
+        "@parcel/core": "^2.16.1"
       }
     },
     "node_modules/@parcel/optimizer-svg": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/optimizer-svg/-/optimizer-svg-2.16.0.tgz",
-      "integrity": "sha512-fx9VK28bXaFz0dWs3rIOQM0t8nAWXE62o4JIcIAZND5/6ij1y4/Fap791agvH4SKxNPFu/a/KEmF50SRfcSwkw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/optimizer-svg/-/optimizer-svg-2.16.1.tgz",
+      "integrity": "sha512-dpAlCrbITPQr5RpuSjr91pfkQumxOzyiaRM39kMwjsTrYa2/F/JCoPKJZMSMyODvB9MZAz2qfGkWbj/Xb+a1NQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0",
-        "@parcel/utils": "2.16.0"
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1",
+        "@parcel/utils": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5206,22 +5214,22 @@
       }
     },
     "node_modules/@parcel/optimizer-swc": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/optimizer-swc/-/optimizer-swc-2.16.0.tgz",
-      "integrity": "sha512-AwakRkMBzDWNrXbm5eJtuBvjCSyp6J730MCltZtiSWLtFbvkXMCt1BQ6Ug91NHq/zA2HTo3RYh96wTMRSRQa2w==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/optimizer-swc/-/optimizer-swc-2.16.1.tgz",
+      "integrity": "sha512-mZtrISSio541K4IH0cT90c143YOvAhOs04RrBGs12WjtHOVTASt0V3gVhstP4W3HvtVNbkJ4mAtUiuC7xtuHJw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
         "@parcel/source-map": "^2.1.1",
-        "@parcel/utils": "2.16.0",
+        "@parcel/utils": "2.16.1",
         "@swc/core": "^1.11.24",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5229,19 +5237,19 @@
       }
     },
     "node_modules/@parcel/package-manager": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.16.0.tgz",
-      "integrity": "sha512-YDOLTcDFYJn3VeEYktO8Yrpw+kaWsLGHOUhPPrw3uaQsqNPi4wIRMsuhcFa9fAL5OlFX56I9iD/yciUiULOFXw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.16.1.tgz",
+      "integrity": "sha512-HDMT0+L7kMBG+YgkxaNv/1nobFRgygte9e0QuYiSVMngdbYvXw9Yy8tEDeWEAOKWs0rGtPXJD6k9gP8/Aa3VQw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/fs": "2.16.0",
-        "@parcel/logger": "2.16.0",
-        "@parcel/node-resolver-core": "3.7.0",
-        "@parcel/types": "2.16.0",
-        "@parcel/utils": "2.16.0",
-        "@parcel/workers": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/fs": "2.16.1",
+        "@parcel/logger": "2.16.1",
+        "@parcel/node-resolver-core": "3.7.1",
+        "@parcel/types": "2.16.1",
+        "@parcel/utils": "2.16.1",
+        "@parcel/workers": "2.16.1",
         "@swc/core": "^1.11.24",
         "semver": "^7.7.1"
       },
@@ -5253,13 +5261,13 @@
         "url": "https://opencollective.com/parcel"
       },
       "peerDependencies": {
-        "@parcel/core": "^2.16.0"
+        "@parcel/core": "^2.16.1"
       }
     },
     "node_modules/@parcel/package-manager/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -5270,22 +5278,22 @@
       }
     },
     "node_modules/@parcel/packager-css": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/packager-css/-/packager-css-2.16.0.tgz",
-      "integrity": "sha512-T36uCm/RUZ6h33O8NsjOoTH0if/FWyXuBWenVeQgQZrlYR+wZBsZSV8CElBMCmrFJ5BdSG1RybXPwvkATpJeig==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/packager-css/-/packager-css-2.16.1.tgz",
+      "integrity": "sha512-N4Ex89dqoprdDoSusM2qveQcpl9zdaQmZtW81xIMFK5+ruaBcKy6Rzyao8LWnbg4wfeNVE0zVkZEq7k3oxbCBA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
         "@parcel/source-map": "^2.1.1",
-        "@parcel/utils": "2.16.0",
+        "@parcel/utils": "2.16.1",
         "lightningcss": "^1.30.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5293,20 +5301,20 @@
       }
     },
     "node_modules/@parcel/packager-html": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/packager-html/-/packager-html-2.16.0.tgz",
-      "integrity": "sha512-d9NBtvJAGM8shnLfwDwF0VMP5P2F5Euvjbrv4FaqbivypzDBhjalE+EnC6eGtLNTCTg9o1CxxZmsTC/FVdu2yQ==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/packager-html/-/packager-html-2.16.1.tgz",
+      "integrity": "sha512-QleJQl63DC2AaIQ2rHS3d46zhGrIoxBz1QKDfgYoG+YxpG8nAKFgI3YBCMNwUYU4pVpNWxmLP/MRKNz9hVxL9Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0",
-        "@parcel/types": "2.16.0",
-        "@parcel/utils": "2.16.0"
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1",
+        "@parcel/types": "2.16.1",
+        "@parcel/utils": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5314,24 +5322,24 @@
       }
     },
     "node_modules/@parcel/packager-js": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/packager-js/-/packager-js-2.16.0.tgz",
-      "integrity": "sha512-2YHeFFFsh8KSqlfMfGVlAsDjwHZkGp99GRN+WnGAHlYzmDODve92yb94d5Zs22cDRzP6v/E5NMTYWu1dlUg/Wg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/packager-js/-/packager-js-2.16.1.tgz",
+      "integrity": "sha512-jTxUhGVqZdierdjeGCJiuVBSBU8iVqp3A0BT/RCpcB0YYY3dymDHTQrAFw8h2kJ0ZcfQEr6BeFIU4RBTuM1xow==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1",
         "@parcel/source-map": "^2.1.1",
-        "@parcel/types": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/types": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "globals": "^13.24.0",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5368,17 +5376,17 @@
       }
     },
     "node_modules/@parcel/packager-raw": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/packager-raw/-/packager-raw-2.16.0.tgz",
-      "integrity": "sha512-jY/t/PXpNTK6EwLBSTJPGTB8FYmhqHtj4Am/JVQkJkxgB8h8diivxsReZYNfDt9J9pVxSk+lcZCdOZXf1ZtmWw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/packager-raw/-/packager-raw-2.16.1.tgz",
+      "integrity": "sha512-EYTGl4uKGu0HVFlCZtUcwo+aNr8/9BiXZyY1crd4SRF1cioKYpgLZKv31z1uNiaDrTxIRH8hWNnjPWAxj382NA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0"
+        "@parcel/plugin": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5386,20 +5394,20 @@
       }
     },
     "node_modules/@parcel/packager-svg": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/packager-svg/-/packager-svg-2.16.0.tgz",
-      "integrity": "sha512-NVmpVjRe2Lr7htrxsscy4ExSRUN+YiMvPmxp9ZxoDnrGerqa66B5/Rh7HOhx7Vo9wuH5LCpFAWYhgkhXH6qrqQ==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/packager-svg/-/packager-svg-2.16.1.tgz",
+      "integrity": "sha512-DQJtFyjurSDu135vvDd0DDFjyaTS8eX9Gl8wS33fPh31PgeqbSYGSe6vtlIw5NHWSTgqvxGmwAf1HYY9WgEGTw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0",
-        "@parcel/types": "2.16.0",
-        "@parcel/utils": "2.16.0"
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1",
+        "@parcel/types": "2.16.1",
+        "@parcel/utils": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5407,17 +5415,17 @@
       }
     },
     "node_modules/@parcel/packager-wasm": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/packager-wasm/-/packager-wasm-2.16.0.tgz",
-      "integrity": "sha512-r+oCqaFfUB1f6CEQyWbkAjwfGrt2flNA3JguBJ8zCyDrx3fWI+isYufg2CP92ZJyOBTIU63iCi88YgcMLynL1g==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/packager-wasm/-/packager-wasm-2.16.1.tgz",
+      "integrity": "sha512-Do/5Cr4yckpWqeQyhiPqwDbbg+nwj20BGIP9edYIL9XAmCh8ARBwntFWmcSpeNdGp+DSJKQ28SgWCT/5cyyoig==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0"
+        "@parcel/plugin": "2.16.1"
       },
       "engines": {
         "node": ">=16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5425,13 +5433,13 @@
       }
     },
     "node_modules/@parcel/plugin": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.16.0.tgz",
-      "integrity": "sha512-Rdk5e/VGmMp6s2DmC0AbjWYmea3Vv8Tx1SC5ln+lf+qRlhndrbFV9o5QKirTY9C8GWd20qH1ZqOxPDEzK/YSGA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.16.1.tgz",
+      "integrity": "sha512-/5hdgMFjd4pRZelfzWVAEWEH51qCHGB6I3z4mV3i8Teh0zsOgoHJrn1t+sVYkhKPDOMs16XAkx2iCMvEcktDrA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/types": "2.16.0"
+        "@parcel/types": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0"
@@ -5442,15 +5450,15 @@
       }
     },
     "node_modules/@parcel/profiler": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/profiler/-/profiler-2.16.0.tgz",
-      "integrity": "sha512-xm6fVTA1V/Co7JuJfkNtZJsKsvq0RSpoE7JjiNtKLCMh+Lim6w7dxc6CEBqGImhR/9YbwteY6/gVFwkvCdLvLg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/profiler/-/profiler-2.16.1.tgz",
+      "integrity": "sha512-9VKswpixK5CggxqoEoThiusnRbqU48QIWwmGQhaTV9iBYi9m/LhEYUoTa8K/KQ70yJknghMMNc1JfAvt2bfh5w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/events": "2.16.0",
-        "@parcel/types-internal": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/events": "2.16.1",
+        "@parcel/types-internal": "2.16.1",
         "chrome-trace-event": "^1.0.2"
       },
       "engines": {
@@ -5462,19 +5470,19 @@
       }
     },
     "node_modules/@parcel/reporter-bundle-analyzer": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/reporter-bundle-analyzer/-/reporter-bundle-analyzer-2.16.0.tgz",
-      "integrity": "sha512-81EazkM7YjeFvzRRlKKV8kmLfLXfWlfLqlpC8jFRXthC43aZtdqMnzRgi9Q+6FIB7Ft3vnMXZPqRs4cn7+XgUg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/reporter-bundle-analyzer/-/reporter-bundle-analyzer-2.16.1.tgz",
+      "integrity": "sha512-pyPU0BMvVC1uSHsR7EZcLhDRhbsHNCFqdo8HnMrW7xcCC7M7A48nUzFayFw0re8ZdmcO46dWqF3Iu4esTGWjaQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5482,21 +5490,21 @@
       }
     },
     "node_modules/@parcel/reporter-cli": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/reporter-cli/-/reporter-cli-2.16.0.tgz",
-      "integrity": "sha512-76U06/aSGTO8UTEBJb+tIvNAH/2aOfWVTsP4QQym//Lf8fmXJnLaCDsJmiNAXjW44rnzjNQ7qzRrbwH7W5u7FA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/reporter-cli/-/reporter-cli-2.16.1.tgz",
+      "integrity": "sha512-+P4Nvg5a2GnOpsIf93U75JjPgltrAmGTCVyRpbeBo45uFBvHGKPX5O7Vn7rl1wWunNobOAxn6F9JxPCApcw79A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/types": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/types": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "chalk": "^4.1.2",
         "term-size": "^2.2.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5504,20 +5512,20 @@
       }
     },
     "node_modules/@parcel/reporter-dev-server": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/reporter-dev-server/-/reporter-dev-server-2.16.0.tgz",
-      "integrity": "sha512-n5XXh1S/oMQ8ItSm/nG5sPFb+1WBZPGtvDUd8gxvmO8lfZ7fo53l0TS5KshMvNqx0F208Erwi+/II78piqCrYA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/reporter-dev-server/-/reporter-dev-server-2.16.1.tgz",
+      "integrity": "sha512-xTVhfnt3Se5BTLC/Dp4pBmytqdZcVyqDExJ39N9mi76/CW0XNDcMqRFACxQltu/ahxmUYYyFtpiXis5Daf9xzQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/codeframe": "2.16.0",
-        "@parcel/plugin": "2.16.0",
+        "@parcel/codeframe": "2.16.1",
+        "@parcel/plugin": "2.16.1",
         "@parcel/source-map": "^2.1.1",
-        "@parcel/utils": "2.16.0"
+        "@parcel/utils": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5525,20 +5533,20 @@
       }
     },
     "node_modules/@parcel/reporter-tracer": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/reporter-tracer/-/reporter-tracer-2.16.0.tgz",
-      "integrity": "sha512-OHNQiz9c2F7nak8ztkuK+9ui9e5f9Qz5uEYPNHssyEIj4zLeenhnFEVSzUVXJdrqY0A3+xE8bFuQLi+PS+nbFQ==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/reporter-tracer/-/reporter-tracer-2.16.1.tgz",
+      "integrity": "sha512-MDDzZx5j0yer+jTP/gBEPiMDzOAeKy7I0pLyPuntwKWnAiaG+TRaQPp8xXQhW6ZxIQIqsHkfUJoTksuFTla+tA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "chrome-trace-event": "^1.0.3",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5546,18 +5554,18 @@
       }
     },
     "node_modules/@parcel/resolver-default": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/resolver-default/-/resolver-default-2.16.0.tgz",
-      "integrity": "sha512-HvzVXPn8j/ElbNkqAHa7wHOzqCWTwAEv4pWJVnguuqL9m7ZC2INDsp3XJR1LOA5UqBYRhkBrvWK69v4sA21a9w==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/resolver-default/-/resolver-default-2.16.1.tgz",
+      "integrity": "sha512-UmnZClD4nWusNTpfC7WaNUfPNnNbjgrIR1l3kOAU+X/b/HJWczzMNIZGTw3rypV0df6XpQlrUrHc85NJ6aRlLA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/node-resolver-core": "3.7.0",
-        "@parcel/plugin": "2.16.0"
+        "@parcel/node-resolver-core": "3.7.1",
+        "@parcel/plugin": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5565,18 +5573,18 @@
       }
     },
     "node_modules/@parcel/runtime-browser-hmr": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/runtime-browser-hmr/-/runtime-browser-hmr-2.16.0.tgz",
-      "integrity": "sha512-tRPoFwUVtzE7ufOtIr1CHdh8SH3772FI1JlFCV0//tEWbj9iSk1bcK0g05Yj4dW4hW2SjqTcVo59Kw50Zeh7/Q==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/runtime-browser-hmr/-/runtime-browser-hmr-2.16.1.tgz",
+      "integrity": "sha512-W8Os+1ORHLJmzX+av76DQkyX4RLndhhB4u1o43P55UfAaV3URcc2I0tNQ/wZKA7qU2DhcdoXijMok7VRUfS0jw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/utils": "2.16.0"
+        "@parcel/plugin": "2.16.1",
+        "@parcel/utils": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5584,20 +5592,20 @@
       }
     },
     "node_modules/@parcel/runtime-js": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/runtime-js/-/runtime-js-2.16.0.tgz",
-      "integrity": "sha512-othbtwC7AG3SnDkzGpRXEwsY2/+INydJXSORogTEN/GSUQyci606pTfuU/eF9D22wVDdaVSYUhhJPTDdxksu9w==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/runtime-js/-/runtime-js-2.16.1.tgz",
+      "integrity": "sha512-Ck7DJw1QmeYiQ17z0Q3mtDl6fH1VPrORmygb2CYcGAIOfIbvXV74vRss1NqpScU8QTjN0qpL4Ve8txwoISgIAg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5605,20 +5613,20 @@
       }
     },
     "node_modules/@parcel/runtime-rsc": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/runtime-rsc/-/runtime-rsc-2.16.0.tgz",
-      "integrity": "sha512-5T+mNRrsA9zxkbdaV4rxqRc7CJP77/oNpajDPWcBWDELM8q42be0Sr5zYoAG28jcnQBf88u2rqPVpNtNxoM/ZA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/runtime-rsc/-/runtime-rsc-2.16.1.tgz",
+      "integrity": "sha512-waNc2gBWxfaUcvPtPAtjWwRLYLuMPHyu+JMgHV7txsv3JZnPNieUvTPbqeARbpsVpk2xTgFnAGS3HBfw5QW/Eg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 12.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5626,19 +5634,19 @@
       }
     },
     "node_modules/@parcel/runtime-service-worker": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/runtime-service-worker/-/runtime-service-worker-2.16.0.tgz",
-      "integrity": "sha512-YOkWJbY08IiUXUSudPwJXJKn7CycTCSzsfbhdG+bhvVdPWGv7DpMoPDSq3IL9/99JZe7iXcOnibxCmoJqZA6WQ==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/runtime-service-worker/-/runtime-service-worker-2.16.1.tgz",
+      "integrity": "sha512-YiM/SS8rk/sBFdA8YFxlviO5FhAjzjBVAzzlnNG0qe3xLmqBfzHzW+RNf0/KblWRhxHCwmUDmzgE2ybaDeL3Lw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5646,9 +5654,9 @@
       }
     },
     "node_modules/@parcel/rust": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/rust/-/rust-2.16.0.tgz",
-      "integrity": "sha512-9ZBiwCCm9OYa2f1rjkXtPUIa0qbKPmpdTqtNHC+5ieRxClvk+m/mxsO1Ag+GbNJrJ8qFYliL3Ha0ZK4d1BrVKw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/rust/-/rust-2.16.1.tgz",
+      "integrity": "sha512-lQkf14MLKZSY/P8j1lrOgFvMCt95dO+VdXIIM2aHjbxnzYSIGgHIt2XDVtKULE+DexaYZbleA0tTnX8AABUIyQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5659,14 +5667,14 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "@parcel/rust-darwin-arm64": "2.16.0",
-        "@parcel/rust-darwin-x64": "2.16.0",
-        "@parcel/rust-linux-arm-gnueabihf": "2.16.0",
-        "@parcel/rust-linux-arm64-gnu": "2.16.0",
-        "@parcel/rust-linux-arm64-musl": "2.16.0",
-        "@parcel/rust-linux-x64-gnu": "2.16.0",
-        "@parcel/rust-linux-x64-musl": "2.16.0",
-        "@parcel/rust-win32-x64-msvc": "2.16.0"
+        "@parcel/rust-darwin-arm64": "2.16.1",
+        "@parcel/rust-darwin-x64": "2.16.1",
+        "@parcel/rust-linux-arm-gnueabihf": "2.16.1",
+        "@parcel/rust-linux-arm64-gnu": "2.16.1",
+        "@parcel/rust-linux-arm64-musl": "2.16.1",
+        "@parcel/rust-linux-x64-gnu": "2.16.1",
+        "@parcel/rust-linux-x64-musl": "2.16.1",
+        "@parcel/rust-win32-x64-msvc": "2.16.1"
       },
       "peerDependencies": {
         "napi-wasm": "^1.1.2"
@@ -5678,9 +5686,9 @@
       }
     },
     "node_modules/@parcel/rust-darwin-arm64": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/rust-darwin-arm64/-/rust-darwin-arm64-2.16.0.tgz",
-      "integrity": "sha512-rdNl1jq34VflBzduQjcOH9SBJPW+Dy1w5XL7hQ5OEAOkRTP1/3mvh98iVYeB3e+RMjRNE/Ipn/rz2KXXku6e6g==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/rust-darwin-arm64/-/rust-darwin-arm64-2.16.1.tgz",
+      "integrity": "sha512-6J1pnznHYzH1TOQbDZmbGa6bXNW+KXbD+XIihvQOid42DLGJNXRmwMmCU3en/759lF/pfmzmR7sm6wPKaKGfbg==",
       "cpu": [
         "arm64"
       ],
@@ -5699,9 +5707,9 @@
       }
     },
     "node_modules/@parcel/rust-darwin-x64": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/rust-darwin-x64/-/rust-darwin-x64-2.16.0.tgz",
-      "integrity": "sha512-tozUnjBPfnCjk6HVZCUKNdgFWw4WsLRTJdnsTYBIERrfj858VN0rdOGlVesLFYNSUquoAO+aHtRdT/JqYW7ozA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/rust-darwin-x64/-/rust-darwin-x64-2.16.1.tgz",
+      "integrity": "sha512-NDZpxleSeJ0yPx4OobDcj+z5x6RzsWmuA1RXBDuCKhf2kyXKP3+kfmrQew/7Q0r9uKA5pqCIw0W4eFqy4IoqIA==",
       "cpu": [
         "x64"
       ],
@@ -5720,9 +5728,9 @@
       }
     },
     "node_modules/@parcel/rust-linux-arm-gnueabihf": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/rust-linux-arm-gnueabihf/-/rust-linux-arm-gnueabihf-2.16.0.tgz",
-      "integrity": "sha512-FX/XrQm5BkLfHHBsUA1t7tYGTkNN4vr/t9ZuADUQCWng+m8g7BB78zWxkjoqayn5zTJAfjjQp42lSZzahtT59A==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/rust-linux-arm-gnueabihf/-/rust-linux-arm-gnueabihf-2.16.1.tgz",
+      "integrity": "sha512-xLLcbMP38ya8/z5esp3ypN2htxO9AsY4uQqF2rigIUZ2abQwL4MPKxfVZtrExWdcrcWiFUbiwn3+GKu/0M9Yow==",
       "cpu": [
         "arm"
       ],
@@ -5741,9 +5749,9 @@
       }
     },
     "node_modules/@parcel/rust-linux-arm64-gnu": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/rust-linux-arm64-gnu/-/rust-linux-arm64-gnu-2.16.0.tgz",
-      "integrity": "sha512-zmnWuclEQDQMhbB8jQw9f1VbnSs6EB2RApg16qs5Co/dhZVozMwJngdkZ6mq5aW8ut+PKYrxIPcVsm7WtVOOfg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/rust-linux-arm64-gnu/-/rust-linux-arm64-gnu-2.16.1.tgz",
+      "integrity": "sha512-asZlimUq1wBmj2PDcoBSKD1SJvcLf1mXTcYGojOsA3dqkOOz7fGz7oubqZYn6IM+02cUDO4ekH+YBV6Eo7XlTg==",
       "cpu": [
         "arm64"
       ],
@@ -5762,9 +5770,9 @@
       }
     },
     "node_modules/@parcel/rust-linux-arm64-musl": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/rust-linux-arm64-musl/-/rust-linux-arm64-musl-2.16.0.tgz",
-      "integrity": "sha512-bL3PzFEg0azmdFaf34yHAXukk2MjNSuiITPVOj9Cq65qAk7lb4+9nuGIwrCMr1+R1yCamrL31GgG61qp0X97xg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/rust-linux-arm64-musl/-/rust-linux-arm64-musl-2.16.1.tgz",
+      "integrity": "sha512-japSgrHYDD+uNHQ8TEdEhpiWu0zWMVBE48W3HJ5FKkwUOY51whZa8w0lhYW88ykUDYtEEd1ipvflv0fSDFY1jw==",
       "cpu": [
         "arm64"
       ],
@@ -5783,9 +5791,9 @@
       }
     },
     "node_modules/@parcel/rust-linux-x64-gnu": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/rust-linux-x64-gnu/-/rust-linux-x64-gnu-2.16.0.tgz",
-      "integrity": "sha512-yvuDTyuhMtwZjB1xGFmCC/UsZjEpMTAanJHAVX9b+tJnn7ArG7Q75Az/JpZsru6KAXiTo1krI54vTE87zzwkIg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/rust-linux-x64-gnu/-/rust-linux-x64-gnu-2.16.1.tgz",
+      "integrity": "sha512-A2LHDou7QDsKn3qlE+DHTBFqnjk0Hy1dhVEJgPgvW4N0XMa4x2JEcnLI9oFZ4KDXyMLGs0H6/smZ88zSdFoF3w==",
       "cpu": [
         "x64"
       ],
@@ -5804,9 +5812,9 @@
       }
     },
     "node_modules/@parcel/rust-linux-x64-musl": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/rust-linux-x64-musl/-/rust-linux-x64-musl-2.16.0.tgz",
-      "integrity": "sha512-0q6ESCVe9uHVuQWuEGGDMJwjezliTsEWMcqn7oeQoKXaZJZQpW0UAuzNcNmpiHmeJdifYT9XuxVOo/a8IgOXhg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/rust-linux-x64-musl/-/rust-linux-x64-musl-2.16.1.tgz",
+      "integrity": "sha512-C+WgGbmIV1XxXUgNJdXpfZazqizYBvy7aesh8Z74QrlY99an/puQufd4kSbvwySN5iMGPSpN0VlyAUjDZLv9rQ==",
       "cpu": [
         "x64"
       ],
@@ -5825,9 +5833,9 @@
       }
     },
     "node_modules/@parcel/rust-win32-x64-msvc": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/rust-win32-x64-msvc/-/rust-win32-x64-msvc-2.16.0.tgz",
-      "integrity": "sha512-IVWpXF1VY+Xgi6ylXaZttAF5+WjazPyxRJUZlC31taYwpfZ4LzmsV8NYlj5ehjTL8d28SKDBoAnOQJwDRe8z8Q==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/rust-win32-x64-msvc/-/rust-win32-x64-msvc-2.16.1.tgz",
+      "integrity": "sha512-m8LoaBJfw5nv/4elM/jNNhWL5/HqBHNQnrbnN89e8sxn4L/zv9bPoXqHOuZglXwyB5velw1MGonX9Be/aK00ag==",
       "cpu": [
         "x64"
       ],
@@ -5858,16 +5866,16 @@
       }
     },
     "node_modules/@parcel/transformer-babel": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-babel/-/transformer-babel-2.16.0.tgz",
-      "integrity": "sha512-jlaFyGlRKFbAI8370bcuEzmsZENqdw9ATCowpB/XkKgUlYe6iplMlKLy4EquqSR6axqfxBRMoSCcKFkROuLI9g==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-babel/-/transformer-babel-2.16.1.tgz",
+      "integrity": "sha512-/wjA5RaptiRMp+IxYOMiGlKDaymiEpwMJOPFvW0kDjvhrl40SqGfP4GgY3jV3N2GdC5jBpesDvo2RYd4/xaT9g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
         "@parcel/source-map": "^2.1.1",
-        "@parcel/utils": "2.16.0",
+        "@parcel/utils": "2.16.1",
         "browserslist": "^4.24.5",
         "json5": "^2.2.3",
         "nullthrows": "^1.1.1",
@@ -5875,7 +5883,7 @@
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5883,9 +5891,9 @@
       }
     },
     "node_modules/@parcel/transformer-babel/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -5896,23 +5904,23 @@
       }
     },
     "node_modules/@parcel/transformer-css": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-css/-/transformer-css-2.16.0.tgz",
-      "integrity": "sha512-WSUITzJl2/2uU04WnCLAwhZJ8RAaRvNQ64fMr4LauWa72gzqXgh3+1egddBiAT7e5IndVJ0AYFywLBVegwKOOA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-css/-/transformer-css-2.16.1.tgz",
+      "integrity": "sha512-4lcrJFE1EdZ2z0Px0ynH+Eajg1vIoZzdqqz2x3UgWrkYVM4WHpZe/w7r2OCafyuobhJR4XYKTqxIYdHo4xWpiw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
         "@parcel/source-map": "^2.1.1",
-        "@parcel/utils": "2.16.0",
+        "@parcel/utils": "2.16.1",
         "browserslist": "^4.24.5",
         "lightningcss": "^1.30.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5920,19 +5928,19 @@
       }
     },
     "node_modules/@parcel/transformer-html": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-html/-/transformer-html-2.16.0.tgz",
-      "integrity": "sha512-CKAoB5yOovL3GyZlnm7lRUa3IfaSS/bEjjTy6F6RU7G4sMRgJu16AQfI4/uTJAA6iuW1ugNyza2DhWQ9xfbhaw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-html/-/transformer-html-2.16.1.tgz",
+      "integrity": "sha512-9OP4f5JSKeDMP1LGJx4BMcMTqiF+uc+3Sum4zrlMBN6EuhYlj02IpcsHMWxZuY0uow/nnwY+aB3X83Bk3AFC1Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0"
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -5940,38 +5948,38 @@
       }
     },
     "node_modules/@parcel/transformer-image": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-image/-/transformer-image-2.16.0.tgz",
-      "integrity": "sha512-sW4CM6P2YMUyAICCMocTLvVVqnxmlBwkP+SrIZvNElDUu0CygOa92cA3rdepHi+tF1GN6ZvNwNyQbZGAIKVxgw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-image/-/transformer-image-2.16.1.tgz",
+      "integrity": "sha512-VyV8LMIK+7jtELpHky9MhD1hZl6YQ9F7LWIsPhrJ938HJEDwEQbZmiAJmMY9IV5kBOhhF3eGXSr/uSFA/F+Wcw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/utils": "2.16.0",
-        "@parcel/workers": "2.16.0",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/utils": "2.16.1",
+        "@parcel/workers": "2.16.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "peerDependencies": {
-        "@parcel/core": "^2.16.0"
+        "@parcel/core": "^2.16.1"
       }
     },
     "node_modules/@parcel/transformer-js": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-js/-/transformer-js-2.16.0.tgz",
-      "integrity": "sha512-VRTFEJ/N13MFvwJPwilPET6gHJ0ZdFbCK26uO7uyL1eMGMvWStTXEQXvhLqtMfvDcQPnwkF5XGJL5JsGpcBFFA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-js/-/transformer-js-2.16.1.tgz",
+      "integrity": "sha512-GPQ3X9UqrlLDBg06u7rG+IZNT9Kl+7+6gY7qJkrw4If1JnmW5O+xVR8zHe/P+6BvxJnOg0iFqzUueZacYHmHzw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1",
         "@parcel/source-map": "^2.1.1",
-        "@parcel/utils": "2.16.0",
-        "@parcel/workers": "2.16.0",
+        "@parcel/utils": "2.16.1",
+        "@parcel/workers": "2.16.1",
         "@swc/helpers": "^0.5.0",
         "browserslist": "^4.24.5",
         "nullthrows": "^1.1.1",
@@ -5980,20 +5988,20 @@
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/parcel"
       },
       "peerDependencies": {
-        "@parcel/core": "^2.16.0"
+        "@parcel/core": "^2.16.1"
       }
     },
     "node_modules/@parcel/transformer-js/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -6004,18 +6012,18 @@
       }
     },
     "node_modules/@parcel/transformer-json": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-json/-/transformer-json-2.16.0.tgz",
-      "integrity": "sha512-qX6Zg+j7HezY+W2TNjJ+VPUsIviNdTuMn39W9M0YEd0WLKh0x7XD4oprVivvgD0Vbm04FUcTQEN1jAF3CAVeGw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-json/-/transformer-json-2.16.1.tgz",
+      "integrity": "sha512-LdRdPZiBPvSKHr0KeDnLpGxqPen1OV3nvkrjZex28TluaiHFLPOCC4AQOcJ4xhDNPCzt1bONjJ6QhkYjfogNqw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
+        "@parcel/plugin": "2.16.1",
         "json5": "^2.2.3"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -6023,17 +6031,17 @@
       }
     },
     "node_modules/@parcel/transformer-node": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-node/-/transformer-node-2.16.0.tgz",
-      "integrity": "sha512-Mavmjj6SfP0Lhu751G47EFtExZIJyD+V2C5PzdATTaT+cw0MzQgfLH8s4p0CI27MAuyFesm8WTA0lgUtcfzMSw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-node/-/transformer-node-2.16.1.tgz",
+      "integrity": "sha512-gclbMgvT8jNyTMFb5PeH0wni8N66dGMWgy381HZrRbkcb4KAw+PGLznrDng72Qyo/OxvEwK/IVkACz6EVoBygA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0"
+        "@parcel/plugin": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -6041,16 +6049,16 @@
       }
     },
     "node_modules/@parcel/transformer-postcss": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-postcss/-/transformer-postcss-2.16.0.tgz",
-      "integrity": "sha512-h+Qnn49UE5RywpuXMHN8Iufjvc7MMqHQc0sPNvwoLBXJXJcb3ul7WEY+DGXs90KsUY1B6JAqKtz9+pzqXZMwIg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-postcss/-/transformer-postcss-2.16.1.tgz",
+      "integrity": "sha512-fw252N0Lx3sZ2+XwiwhAD1350k5wx0Ez4c83wm8cVMsMSV4qW5LHFmfh2+2iHYxbUj0vqCPCmo1hoiNvmixqKg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "clone": "^2.1.2",
         "nullthrows": "^1.1.1",
         "postcss-value-parser": "^4.2.0",
@@ -6058,7 +6066,7 @@
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -6066,9 +6074,9 @@
       }
     },
     "node_modules/@parcel/transformer-postcss/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -6079,18 +6087,18 @@
       }
     },
     "node_modules/@parcel/transformer-posthtml": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-posthtml/-/transformer-posthtml-2.16.0.tgz",
-      "integrity": "sha512-mvHQNzFO1xPq+/7McjxF7+Zb2zAgksNbSXKi8/OuMRiNO3eDD/r1jWRWKNQZHWUkSx/vS7JJ5Y1ACI5INLxWww==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-posthtml/-/transformer-posthtml-2.16.1.tgz",
+      "integrity": "sha512-QUdA4Q3nw2WPPkFeVzvTxq4tOkAxOmm1miP8FjXTeM6kOoYI296HIhqqMhiXj6BZ4J+zc/J+WpUCkYFDfEWScA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/utils": "2.16.0"
+        "@parcel/plugin": "2.16.1",
+        "@parcel/utils": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -6098,17 +6106,17 @@
       }
     },
     "node_modules/@parcel/transformer-raw": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-raw/-/transformer-raw-2.16.0.tgz",
-      "integrity": "sha512-LJXwH2rQAo6mOU6uG0IGQIN7KLC2sS8bl6aqf1YMcKk6ZEvylQkP0hUvRYja2IRzPoxjpdcAP5WC4e/Z8S1Vzg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-raw/-/transformer-raw-2.16.1.tgz",
+      "integrity": "sha512-wiNtbiXsXpdHNO1hGqTQNYQKKuwGcfz7pL/3Em+ucyqeaURXhRQVs5QIwCGIvHiVlS/5OrxPoVWSNA6d0oicAg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/plugin": "2.16.0"
+        "@parcel/plugin": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -6116,20 +6124,20 @@
       }
     },
     "node_modules/@parcel/transformer-react-refresh-wrap": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-react-refresh-wrap/-/transformer-react-refresh-wrap-2.16.0.tgz",
-      "integrity": "sha512-s6O5oJ0pUtZey6unI0mz2WIOpAVLCn5+hlou4YH7FXOiMvSJ2PU2rakk+EZk6K/R+TStYM0hQKSwJkiiN0m7Rg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-react-refresh-wrap/-/transformer-react-refresh-wrap-2.16.1.tgz",
+      "integrity": "sha512-mUIA80/KtT3lz1Zep0t5VDqndSg0pqnkVdpBAn3QUABtT/2KR6Kr6YxFsxGAAN0BZ+Xnx92uPmQjhlkviVAk6g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/error-overlay": "2.16.0",
-        "@parcel/plugin": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/error-overlay": "2.16.1",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "react-refresh": "^0.16.0"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -6137,19 +6145,41 @@
       }
     },
     "node_modules/@parcel/transformer-svg": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/transformer-svg/-/transformer-svg-2.16.0.tgz",
-      "integrity": "sha512-c4KpIqqbsvsh/ZxLTo0d7/IEVa/jR/+LZ1kFzBWXKvMBzbvqo63J6s3VGk61gPFV9JkSW3UI5LAMbJn/HDXycw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-svg/-/transformer-svg-2.16.1.tgz",
+      "integrity": "sha512-OBB0kDjDAAgNzcVqxo/igd+iQL3EDbo8C36JzvH07zR72OXErAdJhTdgtfRq4fqFtMyLyBLT/s3Z37c1GzLoCQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/plugin": "2.16.0",
-        "@parcel/rust": "2.16.0"
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/rust": "2.16.1"
       },
       "engines": {
         "node": ">= 16.0.0",
-        "parcel": "2.16.0"
+        "parcel": "^2.16.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/transformer-svg-react": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-svg-react/-/transformer-svg-react-2.16.1.tgz",
+      "integrity": "sha512-Gox/FsYfDEexJDXburG9xxtCc+9sO7oToJ+Ak29Hwm2jJFNlJ+9cYzuOBmLuMvLntKrYwR78Qp9Dd5V5zFOtCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/plugin": "2.16.1",
+        "@parcel/utils": "2.16.1",
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0"
+      },
+      "engines": {
+        "node": ">= 16.0.0",
+        "parcel": "^2.16.1"
       },
       "funding": {
         "type": "opencollective",
@@ -6157,41 +6187,41 @@
       }
     },
     "node_modules/@parcel/types": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.16.0.tgz",
-      "integrity": "sha512-EKsMTqqfiutQIiYKHEJHHeugIymPqM+D+CphhyewAIjxVLk6PTjEQW0ytIbbdOXGAgnK60OFiIKqZAxZ5Hf2dw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.16.1.tgz",
+      "integrity": "sha512-RFeomuzV/0Ze0jyzzx0u/eB4bXX6ISxrARA3k/3c7MQ+jaoY67+ELd8FwPV6ZmLqvvYIFdGiCZl6ascCABKwgg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/types-internal": "2.16.0",
-        "@parcel/workers": "2.16.0"
+        "@parcel/types-internal": "2.16.1",
+        "@parcel/workers": "2.16.1"
       }
     },
     "node_modules/@parcel/types-internal": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/types-internal/-/types-internal-2.16.0.tgz",
-      "integrity": "sha512-tibAjOY8iyMDzFp5B9jEZPfHYlNvXpw7/msUVebAE6gZ7A8ymWXG8YzMvin6gvWIVTCsYoOkkRsZARvpRcSspQ==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/types-internal/-/types-internal-2.16.1.tgz",
+      "integrity": "sha512-HVCHm0uFyJMsu30bAfm/pd0RNsXRWX0mUXaDHzGJRZ2Yer53JA6elRwkgrPz1KosBA+OuNU/G8atXfCxPMXdKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/feature-flags": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/feature-flags": "2.16.1",
         "@parcel/source-map": "^2.1.1",
         "utility-types": "^3.11.0"
       }
     },
     "node_modules/@parcel/utils": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.16.0.tgz",
-      "integrity": "sha512-Jc5npvJ5T45goEIbDwsQKX3AtfhLIF2t6G496XhbjcH3aeFLrnIbg1iaitQWvgxdjrt73h8PPNphDkREZ/H7WA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.16.1.tgz",
+      "integrity": "sha512-aoY6SCfAY7X6L39PFOsWNNcAobmJr4AJEgco+PJ2UAPFiHhkBZfUofXCwna5GHH5uqXZx6u3rAHiCUrM3bEDXg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/codeframe": "2.16.0",
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/logger": "2.16.0",
-        "@parcel/markdown-ansi": "2.16.0",
-        "@parcel/rust": "2.16.0",
+        "@parcel/codeframe": "2.16.1",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/logger": "2.16.1",
+        "@parcel/markdown-ansi": "2.16.1",
+        "@parcel/rust": "2.16.1",
         "@parcel/source-map": "^2.1.1",
         "chalk": "^4.1.2",
         "nullthrows": "^1.1.1"
@@ -6514,17 +6544,17 @@
       }
     },
     "node_modules/@parcel/workers": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.16.0.tgz",
-      "integrity": "sha512-JVdAtTWRONbP4X8Me1qRE5sMGIkSKAcUb8fZdjCUPJxsBwcJwzYicYFuahxVVGj2sYzjLi0TzlvmXMK7tVvffA==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.16.1.tgz",
+      "integrity": "sha512-yEUAjBrSgo5MYAAQbncYbw1m9WrNiJs+xKdfdHNUrOHlT7G+v62HJAZJWJsvyGQBE2nchSO+bEPgv+kxAF8mIA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/logger": "2.16.0",
-        "@parcel/profiler": "2.16.0",
-        "@parcel/types-internal": "2.16.0",
-        "@parcel/utils": "2.16.0",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/logger": "2.16.1",
+        "@parcel/profiler": "2.16.1",
+        "@parcel/types-internal": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
@@ -6535,7 +6565,7 @@
         "url": "https://opencollective.com/parcel"
       },
       "peerDependencies": {
-        "@parcel/core": "^2.16.0"
+        "@parcel/core": "^2.16.1"
       }
     },
     "node_modules/@pkgjs/parseargs": {
@@ -6649,55 +6679,353 @@
       "dependencies": {
         "@r2wc/core": "^1.3.0"
       },
-      "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.34.38",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.38.tgz",
+      "integrity": "sha512-HpkxMmc2XmZKhvaKIZZThlHmx1L0I/V1hWK1NubtlFnr6ZqdiOpV72TKudZUNQjZNsyDBay72qFEhEvb+bcwcA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@sinonjs/commons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
+      "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/fake-timers": {
+      "version": "13.0.5",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-13.0.5.tgz",
+      "integrity": "sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.1"
+      }
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+      "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+      "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+      "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+      "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/@svgr/core/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@svgr/core/node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/@sinclair/typebox": {
-      "version": "0.34.38",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.38.tgz",
-      "integrity": "sha512-HpkxMmc2XmZKhvaKIZZThlHmx1L0I/V1hWK1NubtlFnr6ZqdiOpV72TKudZUNQjZNsyDBay72qFEhEvb+bcwcA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@sinonjs/commons": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
-      "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+      "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
       "dev": true,
-      "license": "BSD-3-Clause",
+      "license": "MIT",
       "dependencies": {
-        "type-detect": "4.0.8"
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@sinonjs/fake-timers": {
-      "version": "13.0.5",
-      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-13.0.5.tgz",
-      "integrity": "sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==",
+    "node_modules/@svgr/hast-util-to-babel-ast/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@sinonjs/commons": "^3.0.1"
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/@standard-schema/spec": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
-      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
     },
     "node_modules/@swc/core": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.13.5.tgz",
-      "integrity": "sha512-WezcBo8a0Dg2rnR82zhwoR6aRNxeTGfK5QCD6TQ+kg3xx/zNT02s/0o+81h/3zhvFSB24NtqEr8FTw88O5W/JQ==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.3.tgz",
+      "integrity": "sha512-Qd8eBPkUFL4eAONgGjycZXj1jFCBW8Fd+xF0PzdTlBCWQIV1xnUT7B93wUANtW3KGjl3TRcOyxwSx/u/jyKw/Q==",
       "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@swc/counter": "^0.1.3",
-        "@swc/types": "^0.1.24"
+        "@swc/types": "^0.1.25"
       },
       "engines": {
         "node": ">=10"
@@ -6707,16 +7035,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.13.5",
-        "@swc/core-darwin-x64": "1.13.5",
-        "@swc/core-linux-arm-gnueabihf": "1.13.5",
-        "@swc/core-linux-arm64-gnu": "1.13.5",
-        "@swc/core-linux-arm64-musl": "1.13.5",
-        "@swc/core-linux-x64-gnu": "1.13.5",
-        "@swc/core-linux-x64-musl": "1.13.5",
-        "@swc/core-win32-arm64-msvc": "1.13.5",
-        "@swc/core-win32-ia32-msvc": "1.13.5",
-        "@swc/core-win32-x64-msvc": "1.13.5"
+        "@swc/core-darwin-arm64": "1.15.3",
+        "@swc/core-darwin-x64": "1.15.3",
+        "@swc/core-linux-arm-gnueabihf": "1.15.3",
+        "@swc/core-linux-arm64-gnu": "1.15.3",
+        "@swc/core-linux-arm64-musl": "1.15.3",
+        "@swc/core-linux-x64-gnu": "1.15.3",
+        "@swc/core-linux-x64-musl": "1.15.3",
+        "@swc/core-win32-arm64-msvc": "1.15.3",
+        "@swc/core-win32-ia32-msvc": "1.15.3",
+        "@swc/core-win32-x64-msvc": "1.15.3"
       },
       "peerDependencies": {
         "@swc/helpers": ">=0.5.17"
@@ -6728,9 +7056,9 @@
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.13.5.tgz",
-      "integrity": "sha512-lKNv7SujeXvKn16gvQqUQI5DdyY8v7xcoO3k06/FJbHJS90zEwZdQiMNRiqpYw/orU543tPaWgz7cIYWhbopiQ==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.3.tgz",
+      "integrity": "sha512-AXfeQn0CvcQ4cndlIshETx6jrAM45oeUrK8YeEY6oUZU/qzz0Id0CyvlEywxkWVC81Ajpd8TQQ1fW5yx6zQWkQ==",
       "cpu": [
         "arm64"
       ],
@@ -6745,9 +7073,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.13.5.tgz",
-      "integrity": "sha512-ILd38Fg/w23vHb0yVjlWvQBoE37ZJTdlLHa8LRCFDdX4WKfnVBiblsCU9ar4QTMNdeTBEX9iUF4IrbNWhaF1Ng==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.3.tgz",
+      "integrity": "sha512-p68OeCz1ui+MZYG4wmfJGvcsAcFYb6Sl25H9TxWl+GkBgmNimIiRdnypK9nBGlqMZAcxngNPtnG3kEMNnvoJ2A==",
       "cpu": [
         "x64"
       ],
@@ -6762,9 +7090,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.13.5.tgz",
-      "integrity": "sha512-Q6eS3Pt8GLkXxqz9TAw+AUk9HpVJt8Uzm54MvPsqp2yuGmY0/sNaPPNVqctCX9fu/Nu8eaWUen0si6iEiCsazQ==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.3.tgz",
+      "integrity": "sha512-Nuj5iF4JteFgwrai97mUX+xUOl+rQRHqTvnvHMATL/l9xE6/TJfPBpd3hk/PVpClMXG3Uvk1MxUFOEzM1JrMYg==",
       "cpu": [
         "arm"
       ],
@@ -6779,9 +7107,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.13.5.tgz",
-      "integrity": "sha512-aNDfeN+9af+y+M2MYfxCzCy/VDq7Z5YIbMqRI739o8Ganz6ST+27kjQFd8Y/57JN/hcnUEa9xqdS3XY7WaVtSw==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.3.tgz",
+      "integrity": "sha512-2Nc/s8jE6mW2EjXWxO/lyQuLKShcmTrym2LRf5Ayp3ICEMX6HwFqB1EzDhwoMa2DcUgmnZIalesq2lG3krrUNw==",
       "cpu": [
         "arm64"
       ],
@@ -6796,9 +7124,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.13.5.tgz",
-      "integrity": "sha512-9+ZxFN5GJag4CnYnq6apKTnnezpfJhCumyz0504/JbHLo+Ue+ZtJnf3RhyA9W9TINtLE0bC4hKpWi8ZKoETyOQ==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.3.tgz",
+      "integrity": "sha512-j4SJniZ/qaZ5g8op+p1G9K1z22s/EYGg1UXIb3+Cg4nsxEpF5uSIGEE4mHUfA70L0BR9wKT2QF/zv3vkhfpX4g==",
       "cpu": [
         "arm64"
       ],
@@ -6813,9 +7141,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.13.5.tgz",
-      "integrity": "sha512-WD530qvHrki8Ywt/PloKUjaRKgstQqNGvmZl54g06kA+hqtSE2FTG9gngXr3UJxYu/cNAjJYiBifm7+w4nbHbA==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.3.tgz",
+      "integrity": "sha512-aKttAZnz8YB1VJwPQZtyU8Uk0BfMP63iDMkvjhJzRZVgySmqt/apWSdnoIcZlUoGheBrcqbMC17GGUmur7OT5A==",
       "cpu": [
         "x64"
       ],
@@ -6830,9 +7158,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.13.5.tgz",
-      "integrity": "sha512-Luj8y4OFYx4DHNQTWjdIuKTq2f5k6uSXICqx+FSabnXptaOBAbJHNbHT/06JZh6NRUouaf0mYXN0mcsqvkhd7Q==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.3.tgz",
+      "integrity": "sha512-oe8FctPu1gnUsdtGJRO2rvOUIkkIIaHqsO9xxN0bTR7dFTlPTGi2Fhk1tnvXeyAvCPxLIcwD8phzKg6wLv9yug==",
       "cpu": [
         "x64"
       ],
@@ -6847,9 +7175,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.13.5.tgz",
-      "integrity": "sha512-cZ6UpumhF9SDJvv4DA2fo9WIzlNFuKSkZpZmPG1c+4PFSEMy5DFOjBSllCvnqihCabzXzpn6ykCwBmHpy31vQw==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.3.tgz",
+      "integrity": "sha512-L9AjzP2ZQ/Xh58e0lTRMLvEDrcJpR7GwZqAtIeNLcTK7JVE+QineSyHp0kLkO1rttCHyCy0U74kDTj0dRz6raA==",
       "cpu": [
         "arm64"
       ],
@@ -6864,9 +7192,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.13.5.tgz",
-      "integrity": "sha512-C5Yi/xIikrFUzZcyGj9L3RpKljFvKiDMtyDzPKzlsDrKIw2EYY+bF88gB6oGY5RGmv4DAX8dbnpRAqgFD0FMEw==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.3.tgz",
+      "integrity": "sha512-B8UtogMzErUPDWUoKONSVBdsgKYd58rRyv2sHJWKOIMCHfZ22FVXICR4O/VwIYtlnZ7ahERcjayBHDlBZpR0aw==",
       "cpu": [
         "ia32"
       ],
@@ -6881,9 +7209,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.13.5.tgz",
-      "integrity": "sha512-YrKdMVxbYmlfybCSbRtrilc6UA8GF5aPmGKBdPvjrarvsmf4i7ZHGCEnLtfOMd3Lwbs2WUZq3WdMbozYeLU93Q==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.3.tgz",
+      "integrity": "sha512-SpZKMR9QBTecHeqpzJdYEfgw30Oo8b/Xl6rjSzBt1g0ZsXyy60KLXrp6IagQyfTYqNYE/caDvwtF2FPn7pomog==",
       "cpu": [
         "x64"
       ],
@@ -7442,6 +7770,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -8791,6 +9129,7 @@
       "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.11.tgz",
       "integrity": "sha512-xz7wQ8xDhdyP7tQxwdteLYeFfS68tSMNCZ/Y37WJ4bhGfKPpqEIlmIyueQHqOyoPhE6xNUqjzRr8ra0eF9VRvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "safe-buffer": "^5.0.1"
       }
@@ -8828,6 +9167,13 @@
         "node": "*"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -9088,6 +9434,7 @@
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.0"
       }
@@ -9140,6 +9487,7 @@
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
       "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.8"
       }
@@ -9329,12 +9677,92 @@
         "tiny-invariant": "^1.0.6"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
       "dev": true
     },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/cssstyle": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
@@ -9493,6 +9921,63 @@
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
     "node_modules/dompurify": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
@@ -9501,11 +9986,45 @@
         "@types/trusted-types": "^2.0.7"
       }
     },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dot-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/dotenv": {
       "version": "16.6.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
       "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=12"
       },
@@ -9518,6 +10037,7 @@
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-11.0.7.tgz",
       "integrity": "sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "dotenv": "^16.4.5"
       },
@@ -12921,6 +13441,23 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lower-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -13060,6 +13597,13 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
@@ -13196,6 +13740,7 @@
       "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.5.tgz",
       "integrity": "sha512-UjkUHN0yqp9RWKy0Lplhh+wlpdt9oQBYgULZOiFhV3VclSF1JnSQWZ5r9gORQlNYaUKQoR8itv7g7z1xDDuACA==",
       "dev": true,
+      "license": "MIT",
       "optionalDependencies": {
         "msgpackr-extract": "^3.0.2"
       }
@@ -13206,6 +13751,7 @@
       "integrity": "sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "node-gyp-build-optional-packages": "5.2.2"
@@ -13223,10 +13769,11 @@
       }
     },
     "node_modules/msgpackr-extract/node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "optional": true,
       "engines": {
         "node": ">=8"
@@ -13237,6 +13784,7 @@
       "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz",
       "integrity": "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==",
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "detect-libc": "^2.0.1"
@@ -13287,6 +13835,24 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/no-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
@@ -13361,6 +13927,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -13511,24 +14090,24 @@
       "license": "BlueOak-1.0.0"
     },
     "node_modules/parcel": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/parcel/-/parcel-2.16.0.tgz",
-      "integrity": "sha512-4sgnoYixTR6Qq6265tjmufXQj7wxvZo4VJHrYfbnfWQWfW5CgF80IiM+dy050pYgtBAMvh+8vJDDYiSto1YPUA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@parcel/config-default": "2.16.0",
-        "@parcel/core": "2.16.0",
-        "@parcel/diagnostic": "2.16.0",
-        "@parcel/events": "2.16.0",
-        "@parcel/feature-flags": "2.16.0",
-        "@parcel/fs": "2.16.0",
-        "@parcel/logger": "2.16.0",
-        "@parcel/package-manager": "2.16.0",
-        "@parcel/reporter-cli": "2.16.0",
-        "@parcel/reporter-dev-server": "2.16.0",
-        "@parcel/reporter-tracer": "2.16.0",
-        "@parcel/utils": "2.16.0",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/parcel/-/parcel-2.16.1.tgz",
+      "integrity": "sha512-VImOEXHLdrSuG6/jX2DucrCSju/idmtLUhwS5cCy7CrWDDA1af7qdHHD038kHYXWqUIAmzHkRsp/8oRxBqNfVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@parcel/config-default": "2.16.1",
+        "@parcel/core": "2.16.1",
+        "@parcel/diagnostic": "2.16.1",
+        "@parcel/events": "2.16.1",
+        "@parcel/feature-flags": "2.16.1",
+        "@parcel/fs": "2.16.1",
+        "@parcel/logger": "2.16.1",
+        "@parcel/package-manager": "2.16.1",
+        "@parcel/reporter-cli": "2.16.1",
+        "@parcel/reporter-dev-server": "2.16.1",
+        "@parcel/reporter-tracer": "2.16.1",
+        "@parcel/utils": "2.16.1",
         "chalk": "^4.1.2",
         "commander": "^12.1.0",
         "get-port": "^4.2.0"
@@ -14971,6 +15550,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/snake-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/snakecase-keys": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/snakecase-keys/-/snakecase-keys-4.0.1.tgz",
@@ -15263,6 +15860,49 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/svgo": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/src/Elastic.Documentation.Site/package.json b/src/Elastic.Documentation.Site/package.json
index bf4f1feac..dfdfd7e0a 100644
--- a/src/Elastic.Documentation.Site/package.json
+++ b/src/Elastic.Documentation.Site/package.json
@@ -49,7 +49,8 @@
     "@babel/preset-typescript": "7.27.1",
     "@elastic/synthetics": "1.20.0",
     "@eslint/js": "9.39.1",
-    "@parcel/reporter-bundle-analyzer": "2.16.0",
+    "@parcel/reporter-bundle-analyzer": "2.16.1",
+    "@parcel/transformer-svg-react": "2.16.1",
     "@tailwindcss/postcss": "4.1.17",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
@@ -66,13 +67,14 @@
     "jest-environment-jsdom": "30.2.0",
     "jest-transform-stub": "2.0.0",
     "moment": "2.30.1",
-    "parcel": "2.16.0",
+    "parcel": "2.16.1",
     "postcss": "8.5.6",
     "postcss-import": "16.1.1",
     "prettier": "3.6.2",
     "prettier-plugin-tailwindcss": "0.7.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "svgo": "^3.3.2",
     "text-diff": "1.0.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "8.46.4",
diff --git a/src/Elastic.Documentation.Site/svgTransform.js b/src/Elastic.Documentation.Site/svgTransform.js
new file mode 100644
index 000000000..fe4a25b94
--- /dev/null
+++ b/src/Elastic.Documentation.Site/svgTransform.js
@@ -0,0 +1,49 @@
+/* global require, module */
+/* eslint-disable @typescript-eslint/no-require-imports */
+'use strict'
+
+/**
+ * Jest transformer for SVG files.
+ * Converts SVG files into React components using @svgr/core,
+ * matching the behavior of @parcel/transformer-svg-react.
+ *
+ * Based on: https://stackoverflow.com/questions/58603201/jest-cannot-load-svg-file
+ */
+
+const { transform } = require('@svgr/core')
+
+module.exports = {
+  process(sourceText, sourcePath) {
+    // Use @svgr/core to transform SVG to React component
+    const jsxCode = transform.sync(sourceText, {
+      plugins: ['@svgr/plugin-jsx'],
+      jsxRuntime: 'automatic',
+      exportType: 'default',
+    })
+
+    // Transform JSX to JS with Babel
+    const babel = require('@babel/core')
+    const result = babel.transformSync(jsxCode, {
+      presets: [
+        ['@babel/preset-env', { targets: { node: 'current' } }],
+        ['@babel/preset-react', { runtime: 'automatic' }],
+      ],
+      filename: sourcePath,
+    })
+
+    // The Babel output uses `exports.default = SvgComponent`
+    // We need to add __esModule flag and module.exports for proper interop
+    // See: https://stackoverflow.com/a/77814587
+    const code = `
+${result.code}
+module.exports = exports.default;
+module.exports.default = exports.default;
+module.exports.__esModule = true;
+`
+    return { code }
+  },
+
+  getCacheKey() {
+    return 'svgTransform-v2'
+  },
+}