/* @refresh reload */
import { Show, createEffect, createSignal } from 'solid-js'
import { render } from 'solid-js/web'
import {
HotkeysProvider,
createHotkey,
formatForDisplay,
} from '@tanstack/solid-hotkeys'
import { hotkeysDevtoolsPlugin } from '@tanstack/solid-hotkeys-devtools'
import { TanStackDevtools } from '@tanstack/solid-devtools'
import type { Hotkey } from '@tanstack/solid-hotkeys'
import './index.css'
function App() {
const [lastHotkey, setLastHotkey] = createSignal<Hotkey | null>(null)
const [saveCount, setSaveCount] = createSignal(0)
const [incrementCount, setIncrementCount] = createSignal(0)
const [enabled, setEnabled] = createSignal(true)
const [activeTab, setActiveTab] = createSignal(1)
const [navigationCount, setNavigationCount] = createSignal(0)
const [functionKeyCount, setFunctionKeyCount] = createSignal(0)
const [multiModifierCount, setMultiModifierCount] = createSignal(0)
const [editingKeyCount, setEditingKeyCount] = createSignal(0)
const [modalOpen, setModalOpen] = createSignal(false)
const [editorContent, setEditorContent] = createSignal('')
const [sidebarShortcutCount, setSidebarShortcutCount] = createSignal(0)
const [modalShortcutCount, setModalShortcutCount] = createSignal(0)
const [editorShortcutCount, setEditorShortcutCount] = createSignal(0)
const [sidebarRef, setSidebarRef] = createSignal<HTMLDivElement | null>(null)
const [modalRef, setModalRef] = createSignal<HTMLDivElement | null>(null)
const [editorRef, setEditorRef] = createSignal<HTMLTextAreaElement | null>(
null,
)
createHotkey('Mod+S', (_event, { hotkey, parsedHotkey }) => {
setLastHotkey(hotkey)
setSaveCount((c) => c + 1)
console.log('Hotkey triggered:', hotkey)
console.log('Parsed hotkey:', parsedHotkey)
})
createHotkey(
'Mod+K',
(_event, { hotkey }) => {
setLastHotkey(hotkey)
setIncrementCount((c) => c + 1)
},
{ requireReset: true },
)
createHotkey(
'Mod+E',
(_event, { hotkey }) => {
setLastHotkey(hotkey)
alert('This hotkey can be toggled!')
},
() => ({ enabled: enabled() }),
)
createHotkey('Mod+1', () => {
setLastHotkey('Mod+1')
setActiveTab(1)
})
createHotkey('Mod+2', () => {
setLastHotkey('Mod+2')
setActiveTab(2)
})
createHotkey('Mod+3', () => {
setLastHotkey('Mod+3')
setActiveTab(3)
})
createHotkey('Mod+4', () => {
setLastHotkey('Mod+4')
setActiveTab(4)
})
createHotkey('Mod+5', () => {
setLastHotkey('Mod+5')
setActiveTab(5)
})
createHotkey('Shift+ArrowUp', () => {
setLastHotkey('Shift+ArrowUp')
setNavigationCount((c) => c + 1)
})
createHotkey('Shift+ArrowDown', () => {
setLastHotkey('Shift+ArrowDown')
setNavigationCount((c) => c + 1)
})
createHotkey('Alt+ArrowLeft', () => {
setLastHotkey('Alt+ArrowLeft')
setNavigationCount((c) => c + 1)
})
createHotkey('Alt+ArrowRight', () => {
setLastHotkey('Alt+ArrowRight')
setNavigationCount((c) => c + 1)
})
createHotkey('Mod+Home', () => {
setLastHotkey('Mod+Home')
setNavigationCount((c) => c + 1)
})
createHotkey('Mod+End', () => {
setLastHotkey('Mod+End')
setNavigationCount((c) => c + 1)
})
createHotkey('Control+PageUp', () => {
setLastHotkey('Control+PageUp')
setNavigationCount((c) => c + 1)
})
createHotkey('Control+PageDown', () => {
setLastHotkey('Control+PageDown')
setNavigationCount((c) => c + 1)
})
createHotkey('Meta+F4', () => {
setLastHotkey('Alt+F4')
setFunctionKeyCount((c) => c + 1)
alert('Alt+F4 pressed (normally closes window)')
})
createHotkey('Control+F5', () => {
setLastHotkey('Control+F5')
setFunctionKeyCount((c) => c + 1)
})
createHotkey('Mod+F1', () => {
setLastHotkey('Mod+F1')
setFunctionKeyCount((c) => c + 1)
})
createHotkey('Shift+F10', () => {
setLastHotkey('Shift+F10')
setFunctionKeyCount((c) => c + 1)
})
createHotkey('Mod+Shift+S', () => {
setLastHotkey('Mod+Shift+S')
setMultiModifierCount((c) => c + 1)
})
createHotkey('Mod+Shift+Z', () => {
setLastHotkey('Mod+Shift+Z')
setMultiModifierCount((c) => c + 1)
})
createHotkey({ key: 'A', ctrl: true, alt: true }, () => {
setLastHotkey('Control+Alt+A')
setMultiModifierCount((c) => c + 1)
})
createHotkey('Control+Shift+N', () => {
setLastHotkey('Control+Shift+N')
setMultiModifierCount((c) => c + 1)
})
createHotkey('Mod+Alt+T', () => {
setLastHotkey('Mod+Alt+T')
setMultiModifierCount((c) => c + 1)
})
createHotkey('Control+Alt+Shift+X', () => {
setLastHotkey('Control+Alt+Shift+X')
setMultiModifierCount((c) => c + 1)
})
createHotkey('Mod+Enter', () => {
setLastHotkey('Mod+Enter')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Shift+Enter', () => {
setLastHotkey('Shift+Enter')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Mod+Backspace', () => {
setLastHotkey('Mod+Backspace')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Mod+Delete', () => {
setLastHotkey('Mod+Delete')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Control+Tab', () => {
setLastHotkey('Control+Tab')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Shift+Tab', () => {
setLastHotkey('Shift+Tab')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Mod+Space', () => {
setLastHotkey('Mod+Space')
setEditingKeyCount((c) => c + 1)
})
createHotkey({ key: 'Escape' }, () => {
setLastHotkey(null)
setSaveCount(0)
setIncrementCount(0)
setNavigationCount(0)
setFunctionKeyCount(0)
setMultiModifierCount(0)
setEditingKeyCount(0)
setActiveTab(1)
})
createHotkey('F12', () => {
setLastHotkey('F12')
setFunctionKeyCount((c) => c + 1)
})
createEffect(() => {
if (modalOpen()) {
modalRef()?.focus()
}
})
createHotkey(
'Mod+B',
() => {
setLastHotkey('Mod+B')
setSidebarShortcutCount((c) => c + 1)
alert(
'Sidebar shortcut triggered! This only works when the sidebar area is focused.',
)
},
() => ({ target: sidebarRef() }),
)
createHotkey(
'Mod+N',
() => {
setLastHotkey('Mod+N')
setSidebarShortcutCount((c) => c + 1)
},
() => ({ target: sidebarRef() }),
)
createHotkey(
'Escape',
() => {
setLastHotkey('Escape')
setModalShortcutCount((c) => c + 1)
setModalOpen(false)
},
() => ({ target: modalRef(), enabled: modalOpen() }),
)
createHotkey(
'Mod+Enter',
() => {
setLastHotkey('Mod+Enter')
setModalShortcutCount((c) => c + 1)
alert('Modal submit shortcut!')
},
() => ({ target: modalRef(), enabled: modalOpen() }),
)
createHotkey(
'Mod+S',
() => {
setLastHotkey('Mod+S')
setEditorShortcutCount((c) => c + 1)
const content = editorContent()
alert(
`Editor content saved: "${content.substring(0, 50)}${content.length > 50 ? '...' : ''}"`,
)
},
() => ({ target: editorRef() }),
)
createHotkey(
'Mod+/',
() => {
setLastHotkey('Mod+/')
setEditorShortcutCount((c) => c + 1)
setEditorContent((prev) => prev + '\n// Comment added via shortcut')
},
() => ({ target: editorRef() }),
)
createHotkey(
'Mod+K',
() => {
setLastHotkey('Mod+K')
setEditorShortcutCount((c) => c + 1)
setEditorContent('')
},
() => ({ target: editorRef() }),
)
createHotkey('J', () => {
setLastHotkey('J')
setEditorShortcutCount((c) => c + 1)
})
return (
<div class="app">
<header>
<h1>createHotkey</h1>
<p>
Register keyboard shortcuts with callback context containing the
hotkey and parsed hotkey information.
</p>
</header>
<main>
<section class="demo-section">
<h2>Basic Hotkey</h2>
<p>
Press <kbd>{formatForDisplay('Mod+S')}</kbd> to trigger
</p>
<div class="counter">Save triggered: {saveCount()}x</div>
<pre class="code-block">{`createHotkey('Mod+S', (_event, { hotkey, parsedHotkey }) => {
console.log('Hotkey:', hotkey)
console.log('Parsed:', parsedHotkey)
})`}</pre>
</section>
<section class="demo-section">
<h2>With requireReset</h2>
<p>
Hold <kbd>{formatForDisplay('Mod+K')}</kbd> — only increments once
until you release all keys
</p>
<div class="counter">Increment: {incrementCount()}</div>
<p class="hint">
This prevents repeated triggering while holding the keys down.
Release all keys to allow re-triggering.
</p>
<pre class="code-block">{`createHotkey(
'Mod+K',
(event, { hotkey }) => {
setCount(c => c + 1)
},
{ requireReset: true }
)`}</pre>
</section>
<section class="demo-section">
<h2>Conditional Hotkey</h2>
<p>
<kbd>{formatForDisplay('Mod+E')}</kbd> is currently{' '}
<strong>{enabled() ? 'enabled' : 'disabled'}</strong>
</p>
<button onClick={() => setEnabled((e) => !e)}>
{enabled() ? 'Disable' : 'Enable'} Hotkey
</button>
<pre class="code-block">{`const [enabled, setEnabled] = createSignal(true)
createHotkey(
'Mod+E',
(event, { hotkey }) => {
alert('Triggered!')
},
() => ({ enabled: enabled() })
)`}</pre>
</section>
<section class="demo-section">
<h2>Number Key Combinations</h2>
<p>Common for tab/section switching:</p>
<div class="hotkey-grid">
<div>
<kbd>{formatForDisplay('Mod+1')}</kbd> → Tab 1
</div>
<div>
<kbd>{formatForDisplay('Mod+2')}</kbd> → Tab 2
</div>
<div>
<kbd>{formatForDisplay('Mod+3')}</kbd> → Tab 3
</div>
<div>
<kbd>{formatForDisplay('Mod+4')}</kbd> → Tab 4
</div>
<div>
<kbd>{formatForDisplay('Mod+5')}</kbd> → Tab 5
</div>
</div>
<div class="counter">Active Tab: {activeTab()}</div>
<pre class="code-block">{`createHotkey('Mod+1', () => setActiveTab(1))
createHotkey('Mod+2', () => setActiveTab(2))
`}</pre>
</section>
<section class="demo-section">
<h2>Navigation Key Combinations</h2>
<p>Selection and navigation shortcuts:</p>
<div class="hotkey-grid">
<div>
<kbd>{formatForDisplay('Shift+ArrowUp')}</kbd> — Select up
</div>
<div>
<kbd>{formatForDisplay('Shift+ArrowDown')}</kbd> — Select down
</div>
<div>
<kbd>{formatForDisplay('Alt+ArrowLeft')}</kbd> — Navigate back
</div>
<div>
<kbd>{formatForDisplay('Alt+ArrowRight')}</kbd> — Navigate forward
</div>
<div>
<kbd>{formatForDisplay('Mod+Home')}</kbd> — Go to start
</div>
<div>
<kbd>{formatForDisplay('Mod+End')}</kbd> — Go to end
</div>
<div>
<kbd>{formatForDisplay('Control+PageUp')}</kbd> — Previous page
</div>
<div>
<kbd>{formatForDisplay('Control+PageDown')}</kbd> — Next page
</div>
</div>
<div class="counter">Navigation triggered: {navigationCount()}x</div>
<pre class="code-block">{`createHotkey('Shift+ArrowUp', () => selectUp())
createHotkey('Alt+ArrowLeft', () => navigateBack())
createHotkey('Mod+Home', () => goToStart())
createHotkey('Control+PageUp', () => previousPage())`}</pre>
</section>
<section class="demo-section">
<h2>Function Key Combinations</h2>
<p>System and application shortcuts:</p>
<div class="hotkey-grid">
<div>
<kbd>{formatForDisplay('Alt+F4')}</kbd> — Close window
</div>
<div>
<kbd>{formatForDisplay('Control+F5')}</kbd> — Hard refresh
</div>
<div>
<kbd>{formatForDisplay('Mod+F1')}</kbd> — Help
</div>
<div>
<kbd>{formatForDisplay('Shift+F10')}</kbd> — Context menu
</div>
<div>
<kbd>{formatForDisplay('F12')}</kbd> — DevTools
</div>
</div>
<div class="counter">
Function keys triggered: {functionKeyCount()}x
</div>
<pre class="code-block">{`createHotkey('Alt+F4', () => closeWindow())
createHotkey('Control+F5', () => hardRefresh())
createHotkey('Mod+F1', () => showHelp())
createHotkey('F12', () => openDevTools())`}</pre>
</section>
<section class="demo-section">
<h2>Multi-Modifier Combinations</h2>
<p>Complex shortcuts with multiple modifiers:</p>
<div class="hotkey-grid">
<div>
<kbd>{formatForDisplay('Mod+Shift+S')}</kbd> — Save As
</div>
<div>
<kbd>{formatForDisplay('Mod+Shift+Z')}</kbd> — Redo
</div>
<div>
<kbd>{formatForDisplay('Control+Alt+A')}</kbd> — Special action
</div>
<div>
<kbd>{formatForDisplay('Control+Shift+N')}</kbd> — New incognito
</div>
<div>
<kbd>{formatForDisplay('Mod+Alt+T')}</kbd> — Toggle theme
</div>
<div>
<kbd>{formatForDisplay('Control+Alt+Shift+X')}</kbd> — Triple
modifier
</div>
</div>
<div class="counter">
Multi-modifier triggered: {multiModifierCount()}x
</div>
<pre class="code-block">{`createHotkey('Mod+Shift+S', () => saveAs())
createHotkey('Mod+Shift+Z', () => redo())
createHotkey('Control+Alt+A', () => specialAction())
createHotkey('Control+Alt+Shift+X', () => complexAction())`}</pre>
</section>
<section class="demo-section">
<h2>Editing Key Combinations</h2>
<p>Text editing and form shortcuts:</p>
<div class="hotkey-grid">
<div>
<kbd>{formatForDisplay('Mod+Enter')}</kbd> — Submit form
</div>
<div>
<kbd>{formatForDisplay('Shift+Enter')}</kbd> — New line
</div>
<div>
<kbd>{formatForDisplay('Mod+Backspace')}</kbd> — Delete word
</div>
<div>
<kbd>{formatForDisplay('Mod+Delete')}</kbd> — Delete forward
</div>
<div>
<kbd>{formatForDisplay('Control+Tab')}</kbd> — Next tab
</div>
<div>
<kbd>{formatForDisplay('Shift+Tab')}</kbd> — Previous field
</div>
<div>
<kbd>{formatForDisplay('Mod+Space')}</kbd> — Toggle
</div>
</div>
<div class="counter">
Editing keys triggered: {editingKeyCount()}x
</div>
<pre class="code-block">{`createHotkey('Mod+Enter', () => submitForm())
createHotkey('Shift+Enter', () => insertNewline())
createHotkey('Mod+Backspace', () => deleteWord())
createHotkey('Control+Tab', () => nextTab())
createHotkey('Mod+Space', () => toggle())`}</pre>
</section>
<Show when={lastHotkey()} keyed>
{(hotkey) => (
<div class="info-box">
<strong>Last triggered:</strong> {formatForDisplay(hotkey)}
</div>
)}
</Show>
<p class="hint">
Press <kbd>Escape</kbd> to reset all counters
</p>
<section class="demo-section scoped-section">
<h2>Scoped Keyboard Shortcuts</h2>
<p>
Shortcuts can be scoped to specific DOM elements using the{' '}
<code>target</code> option. Use an accessor for reactive targets:{' '}
<code>() => ({ target: ref() })</code>
</p>
<div class="scoped-grid">
<div class="scoped-area" ref={setSidebarRef} tabIndex={0}>
<h3>Sidebar (Scoped Area)</h3>
<p>Click here to focus, then try:</p>
<div class="hotkey-list">
<div>
<kbd>{formatForDisplay('Mod+B')}</kbd> — Trigger sidebar
action
</div>
<div>
<kbd>{formatForDisplay('Mod+N')}</kbd> — New item
</div>
</div>
<div class="counter">
Sidebar shortcuts: {sidebarShortcutCount()}x
</div>
<p class="hint">
These shortcuts only work when this sidebar area is focused or
contains focus.
</p>
</div>
<div class="scoped-area">
<h3>Modal Dialog</h3>
<button onClick={() => setModalOpen(true)}>Open Modal</button>
<Show when={modalOpen()}>
<div class="modal-overlay" onClick={() => setModalOpen(false)}>
<div
class="modal-content"
ref={setModalRef}
tabIndex={0}
onClick={(e) => e.stopPropagation()}
>
<h3>Modal Dialog (Scoped)</h3>
<p>Try these shortcuts while modal is open:</p>
<div class="hotkey-list">
<div>
<kbd>{formatForDisplay('Escape')}</kbd> — Close modal
</div>
<div>
<kbd>{formatForDisplay('Mod+Enter')}</kbd> — Submit
</div>
</div>
<div class="counter">
Modal shortcuts: {modalShortcutCount()}x
</div>
<p class="hint">
These shortcuts only work when the modal is open and
focused. The Escape key here won't conflict with the
global Escape handler.
</p>
<button onClick={() => setModalOpen(false)}>Close</button>
</div>
</div>
</Show>
</div>
<div class="scoped-area">
<h3>Text Editor (Scoped)</h3>
<p>Focus the editor below and try:</p>
<div class="hotkey-list">
<div>
<kbd>{formatForDisplay('Mod+S')}</kbd> — Save editor content
</div>
<div>
<kbd>{formatForDisplay('Mod+/')}</kbd> — Add comment
</div>
<div>
<kbd>{formatForDisplay('Mod+K')}</kbd> — Clear editor
</div>
<div>
<kbd>J</kbd> — Single key (test ignoreInputs)
</div>
</div>
<textarea
ref={setEditorRef}
class="scoped-editor"
value={editorContent()}
onInput={(e) => setEditorContent(e.currentTarget.value)}
placeholder="Focus here and try the shortcuts above..."
rows={8}
/>
<div class="counter">
Editor shortcuts: {editorShortcutCount()}x
</div>
<p class="hint">
These shortcuts only work when the editor is focused. Notice
that <kbd>{formatForDisplay('Mod+S')}</kbd> here doesn't
conflict with the global <kbd>{formatForDisplay('Mod+S')}</kbd>{' '}
shortcut.
</p>
</div>
</div>
<pre class="code-block">{`// Scoped to a signal (Solid pattern)
const [sidebarRef, setSidebarRef] = createSignal<HTMLDivElement | null>(null)
createHotkey(
'Mod+B',
() => console.log('Sidebar shortcut!'),
() => ({ target: sidebarRef() })
)
// Scoped to a modal (only when open)
const [modalRef, setModalRef] = createSignal<HTMLDivElement | null>(null)
const [isOpen, setIsOpen] = createSignal(false)
createHotkey(
'Escape',
() => setIsOpen(false),
() => ({ target: modalRef(), enabled: isOpen() })
)
// Scoped to an editor
const [editorRef, setEditorRef] = createSignal<HTMLTextAreaElement | null>(null)
createHotkey(
'Mod+S',
() => saveEditorContent(),
() => ({ target: editorRef() })
)`}</pre>
</section>
</main>
<TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
</div>
)
}
const root = document.getElementById('root')!
render(
() => (
<HotkeysProvider>
<App />
</HotkeysProvider>
),
root,
)
/* @refresh reload */
import { Show, createEffect, createSignal } from 'solid-js'
import { render } from 'solid-js/web'
import {
HotkeysProvider,
createHotkey,
formatForDisplay,
} from '@tanstack/solid-hotkeys'
import { hotkeysDevtoolsPlugin } from '@tanstack/solid-hotkeys-devtools'
import { TanStackDevtools } from '@tanstack/solid-devtools'
import type { Hotkey } from '@tanstack/solid-hotkeys'
import './index.css'
function App() {
const [lastHotkey, setLastHotkey] = createSignal<Hotkey | null>(null)
const [saveCount, setSaveCount] = createSignal(0)
const [incrementCount, setIncrementCount] = createSignal(0)
const [enabled, setEnabled] = createSignal(true)
const [activeTab, setActiveTab] = createSignal(1)
const [navigationCount, setNavigationCount] = createSignal(0)
const [functionKeyCount, setFunctionKeyCount] = createSignal(0)
const [multiModifierCount, setMultiModifierCount] = createSignal(0)
const [editingKeyCount, setEditingKeyCount] = createSignal(0)
const [modalOpen, setModalOpen] = createSignal(false)
const [editorContent, setEditorContent] = createSignal('')
const [sidebarShortcutCount, setSidebarShortcutCount] = createSignal(0)
const [modalShortcutCount, setModalShortcutCount] = createSignal(0)
const [editorShortcutCount, setEditorShortcutCount] = createSignal(0)
const [sidebarRef, setSidebarRef] = createSignal<HTMLDivElement | null>(null)
const [modalRef, setModalRef] = createSignal<HTMLDivElement | null>(null)
const [editorRef, setEditorRef] = createSignal<HTMLTextAreaElement | null>(
null,
)
createHotkey('Mod+S', (_event, { hotkey, parsedHotkey }) => {
setLastHotkey(hotkey)
setSaveCount((c) => c + 1)
console.log('Hotkey triggered:', hotkey)
console.log('Parsed hotkey:', parsedHotkey)
})
createHotkey(
'Mod+K',
(_event, { hotkey }) => {
setLastHotkey(hotkey)
setIncrementCount((c) => c + 1)
},
{ requireReset: true },
)
createHotkey(
'Mod+E',
(_event, { hotkey }) => {
setLastHotkey(hotkey)
alert('This hotkey can be toggled!')
},
() => ({ enabled: enabled() }),
)
createHotkey('Mod+1', () => {
setLastHotkey('Mod+1')
setActiveTab(1)
})
createHotkey('Mod+2', () => {
setLastHotkey('Mod+2')
setActiveTab(2)
})
createHotkey('Mod+3', () => {
setLastHotkey('Mod+3')
setActiveTab(3)
})
createHotkey('Mod+4', () => {
setLastHotkey('Mod+4')
setActiveTab(4)
})
createHotkey('Mod+5', () => {
setLastHotkey('Mod+5')
setActiveTab(5)
})
createHotkey('Shift+ArrowUp', () => {
setLastHotkey('Shift+ArrowUp')
setNavigationCount((c) => c + 1)
})
createHotkey('Shift+ArrowDown', () => {
setLastHotkey('Shift+ArrowDown')
setNavigationCount((c) => c + 1)
})
createHotkey('Alt+ArrowLeft', () => {
setLastHotkey('Alt+ArrowLeft')
setNavigationCount((c) => c + 1)
})
createHotkey('Alt+ArrowRight', () => {
setLastHotkey('Alt+ArrowRight')
setNavigationCount((c) => c + 1)
})
createHotkey('Mod+Home', () => {
setLastHotkey('Mod+Home')
setNavigationCount((c) => c + 1)
})
createHotkey('Mod+End', () => {
setLastHotkey('Mod+End')
setNavigationCount((c) => c + 1)
})
createHotkey('Control+PageUp', () => {
setLastHotkey('Control+PageUp')
setNavigationCount((c) => c + 1)
})
createHotkey('Control+PageDown', () => {
setLastHotkey('Control+PageDown')
setNavigationCount((c) => c + 1)
})
createHotkey('Meta+F4', () => {
setLastHotkey('Alt+F4')
setFunctionKeyCount((c) => c + 1)
alert('Alt+F4 pressed (normally closes window)')
})
createHotkey('Control+F5', () => {
setLastHotkey('Control+F5')
setFunctionKeyCount((c) => c + 1)
})
createHotkey('Mod+F1', () => {
setLastHotkey('Mod+F1')
setFunctionKeyCount((c) => c + 1)
})
createHotkey('Shift+F10', () => {
setLastHotkey('Shift+F10')
setFunctionKeyCount((c) => c + 1)
})
createHotkey('Mod+Shift+S', () => {
setLastHotkey('Mod+Shift+S')
setMultiModifierCount((c) => c + 1)
})
createHotkey('Mod+Shift+Z', () => {
setLastHotkey('Mod+Shift+Z')
setMultiModifierCount((c) => c + 1)
})
createHotkey({ key: 'A', ctrl: true, alt: true }, () => {
setLastHotkey('Control+Alt+A')
setMultiModifierCount((c) => c + 1)
})
createHotkey('Control+Shift+N', () => {
setLastHotkey('Control+Shift+N')
setMultiModifierCount((c) => c + 1)
})
createHotkey('Mod+Alt+T', () => {
setLastHotkey('Mod+Alt+T')
setMultiModifierCount((c) => c + 1)
})
createHotkey('Control+Alt+Shift+X', () => {
setLastHotkey('Control+Alt+Shift+X')
setMultiModifierCount((c) => c + 1)
})
createHotkey('Mod+Enter', () => {
setLastHotkey('Mod+Enter')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Shift+Enter', () => {
setLastHotkey('Shift+Enter')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Mod+Backspace', () => {
setLastHotkey('Mod+Backspace')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Mod+Delete', () => {
setLastHotkey('Mod+Delete')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Control+Tab', () => {
setLastHotkey('Control+Tab')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Shift+Tab', () => {
setLastHotkey('Shift+Tab')
setEditingKeyCount((c) => c + 1)
})
createHotkey('Mod+Space', () => {
setLastHotkey('Mod+Space')
setEditingKeyCount((c) => c + 1)
})
createHotkey({ key: 'Escape' }, () => {
setLastHotkey(null)
setSaveCount(0)
setIncrementCount(0)
setNavigationCount(0)
setFunctionKeyCount(0)
setMultiModifierCount(0)
setEditingKeyCount(0)
setActiveTab(1)
})
createHotkey('F12', () => {
setLastHotkey('F12')
setFunctionKeyCount((c) => c + 1)
})
createEffect(() => {
if (modalOpen()) {
modalRef()?.focus()
}
})
createHotkey(
'Mod+B',
() => {
setLastHotkey('Mod+B')
setSidebarShortcutCount((c) => c + 1)
alert(
'Sidebar shortcut triggered! This only works when the sidebar area is focused.',
)
},
() => ({ target: sidebarRef() }),
)
createHotkey(
'Mod+N',
() => {
setLastHotkey('Mod+N')
setSidebarShortcutCount((c) => c + 1)
},
() => ({ target: sidebarRef() }),
)
createHotkey(
'Escape',
() => {
setLastHotkey('Escape')
setModalShortcutCount((c) => c + 1)
setModalOpen(false)
},
() => ({ target: modalRef(), enabled: modalOpen() }),
)
createHotkey(
'Mod+Enter',
() => {
setLastHotkey('Mod+Enter')
setModalShortcutCount((c) => c + 1)
alert('Modal submit shortcut!')
},
() => ({ target: modalRef(), enabled: modalOpen() }),
)
createHotkey(
'Mod+S',
() => {
setLastHotkey('Mod+S')
setEditorShortcutCount((c) => c + 1)
const content = editorContent()
alert(
`Editor content saved: "${content.substring(0, 50)}${content.length > 50 ? '...' : ''}"`,
)
},
() => ({ target: editorRef() }),
)
createHotkey(
'Mod+/',
() => {
setLastHotkey('Mod+/')
setEditorShortcutCount((c) => c + 1)
setEditorContent((prev) => prev + '\n// Comment added via shortcut')
},
() => ({ target: editorRef() }),
)
createHotkey(
'Mod+K',
() => {
setLastHotkey('Mod+K')
setEditorShortcutCount((c) => c + 1)
setEditorContent('')
},
() => ({ target: editorRef() }),
)
createHotkey('J', () => {
setLastHotkey('J')
setEditorShortcutCount((c) => c + 1)
})
return (
<div class="app">
<header>
<h1>createHotkey</h1>
<p>
Register keyboard shortcuts with callback context containing the
hotkey and parsed hotkey information.
</p>
</header>
<main>
<section class="demo-section">
<h2>Basic Hotkey</h2>
<p>
Press <kbd>{formatForDisplay('Mod+S')}</kbd> to trigger
</p>
<div class="counter">Save triggered: {saveCount()}x</div>
<pre class="code-block">{`createHotkey('Mod+S', (_event, { hotkey, parsedHotkey }) => {
console.log('Hotkey:', hotkey)
console.log('Parsed:', parsedHotkey)
})`}</pre>
</section>
<section class="demo-section">
<h2>With requireReset</h2>
<p>
Hold <kbd>{formatForDisplay('Mod+K')}</kbd> — only increments once
until you release all keys
</p>
<div class="counter">Increment: {incrementCount()}</div>
<p class="hint">
This prevents repeated triggering while holding the keys down.
Release all keys to allow re-triggering.
</p>
<pre class="code-block">{`createHotkey(
'Mod+K',
(event, { hotkey }) => {
setCount(c => c + 1)
},
{ requireReset: true }
)`}</pre>
</section>
<section class="demo-section">
<h2>Conditional Hotkey</h2>
<p>
<kbd>{formatForDisplay('Mod+E')}</kbd> is currently{' '}
<strong>{enabled() ? 'enabled' : 'disabled'}</strong>
</p>
<button onClick={() => setEnabled((e) => !e)}>
{enabled() ? 'Disable' : 'Enable'} Hotkey
</button>
<pre class="code-block">{`const [enabled, setEnabled] = createSignal(true)
createHotkey(
'Mod+E',
(event, { hotkey }) => {
alert('Triggered!')
},
() => ({ enabled: enabled() })
)`}</pre>
</section>
<section class="demo-section">
<h2>Number Key Combinations</h2>
<p>Common for tab/section switching:</p>
<div class="hotkey-grid">
<div>
<kbd>{formatForDisplay('Mod+1')}</kbd> → Tab 1
</div>
<div>
<kbd>{formatForDisplay('Mod+2')}</kbd> → Tab 2
</div>
<div>
<kbd>{formatForDisplay('Mod+3')}</kbd> → Tab 3
</div>
<div>
<kbd>{formatForDisplay('Mod+4')}</kbd> → Tab 4
</div>
<div>
<kbd>{formatForDisplay('Mod+5')}</kbd> → Tab 5
</div>
</div>
<div class="counter">Active Tab: {activeTab()}</div>
<pre class="code-block">{`createHotkey('Mod+1', () => setActiveTab(1))
createHotkey('Mod+2', () => setActiveTab(2))
`}</pre>
</section>
<section class="demo-section">
<h2>Navigation Key Combinations</h2>
<p>Selection and navigation shortcuts:</p>
<div class="hotkey-grid">
<div>
<kbd>{formatForDisplay('Shift+ArrowUp')}</kbd> — Select up
</div>
<div>
<kbd>{formatForDisplay('Shift+ArrowDown')}</kbd> — Select down
</div>
<div>
<kbd>{formatForDisplay('Alt+ArrowLeft')}</kbd> — Navigate back
</div>
<div>
<kbd>{formatForDisplay('Alt+ArrowRight')}</kbd> — Navigate forward
</div>
<div>
<kbd>{formatForDisplay('Mod+Home')}</kbd> — Go to start
</div>
<div>
<kbd>{formatForDisplay('Mod+End')}</kbd> — Go to end
</div>
<div>
<kbd>{formatForDisplay('Control+PageUp')}</kbd> — Previous page
</div>
<div>
<kbd>{formatForDisplay('Control+PageDown')}</kbd> — Next page
</div>
</div>
<div class="counter">Navigation triggered: {navigationCount()}x</div>
<pre class="code-block">{`createHotkey('Shift+ArrowUp', () => selectUp())
createHotkey('Alt+ArrowLeft', () => navigateBack())
createHotkey('Mod+Home', () => goToStart())
createHotkey('Control+PageUp', () => previousPage())`}</pre>
</section>
<section class="demo-section">
<h2>Function Key Combinations</h2>
<p>System and application shortcuts:</p>
<div class="hotkey-grid">
<div>
<kbd>{formatForDisplay('Alt+F4')}</kbd> — Close window
</div>
<div>
<kbd>{formatForDisplay('Control+F5')}</kbd> — Hard refresh
</div>
<div>
<kbd>{formatForDisplay('Mod+F1')}</kbd> — Help
</div>
<div>
<kbd>{formatForDisplay('Shift+F10')}</kbd> — Context menu
</div>
<div>
<kbd>{formatForDisplay('F12')}</kbd> — DevTools
</div>
</div>
<div class="counter">
Function keys triggered: {functionKeyCount()}x
</div>
<pre class="code-block">{`createHotkey('Alt+F4', () => closeWindow())
createHotkey('Control+F5', () => hardRefresh())
createHotkey('Mod+F1', () => showHelp())
createHotkey('F12', () => openDevTools())`}</pre>
</section>
<section class="demo-section">
<h2>Multi-Modifier Combinations</h2>
<p>Complex shortcuts with multiple modifiers:</p>
<div class="hotkey-grid">
<div>
<kbd>{formatForDisplay('Mod+Shift+S')}</kbd> — Save As
</div>
<div>
<kbd>{formatForDisplay('Mod+Shift+Z')}</kbd> — Redo
</div>
<div>
<kbd>{formatForDisplay('Control+Alt+A')}</kbd> — Special action
</div>
<div>
<kbd>{formatForDisplay('Control+Shift+N')}</kbd> — New incognito
</div>
<div>
<kbd>{formatForDisplay('Mod+Alt+T')}</kbd> — Toggle theme
</div>
<div>
<kbd>{formatForDisplay('Control+Alt+Shift+X')}</kbd> — Triple
modifier
</div>
</div>
<div class="counter">
Multi-modifier triggered: {multiModifierCount()}x
</div>
<pre class="code-block">{`createHotkey('Mod+Shift+S', () => saveAs())
createHotkey('Mod+Shift+Z', () => redo())
createHotkey('Control+Alt+A', () => specialAction())
createHotkey('Control+Alt+Shift+X', () => complexAction())`}</pre>
</section>
<section class="demo-section">
<h2>Editing Key Combinations</h2>
<p>Text editing and form shortcuts:</p>
<div class="hotkey-grid">
<div>
<kbd>{formatForDisplay('Mod+Enter')}</kbd> — Submit form
</div>
<div>
<kbd>{formatForDisplay('Shift+Enter')}</kbd> — New line
</div>
<div>
<kbd>{formatForDisplay('Mod+Backspace')}</kbd> — Delete word
</div>
<div>
<kbd>{formatForDisplay('Mod+Delete')}</kbd> — Delete forward
</div>
<div>
<kbd>{formatForDisplay('Control+Tab')}</kbd> — Next tab
</div>
<div>
<kbd>{formatForDisplay('Shift+Tab')}</kbd> — Previous field
</div>
<div>
<kbd>{formatForDisplay('Mod+Space')}</kbd> — Toggle
</div>
</div>
<div class="counter">
Editing keys triggered: {editingKeyCount()}x
</div>
<pre class="code-block">{`createHotkey('Mod+Enter', () => submitForm())
createHotkey('Shift+Enter', () => insertNewline())
createHotkey('Mod+Backspace', () => deleteWord())
createHotkey('Control+Tab', () => nextTab())
createHotkey('Mod+Space', () => toggle())`}</pre>
</section>
<Show when={lastHotkey()} keyed>
{(hotkey) => (
<div class="info-box">
<strong>Last triggered:</strong> {formatForDisplay(hotkey)}
</div>
)}
</Show>
<p class="hint">
Press <kbd>Escape</kbd> to reset all counters
</p>
<section class="demo-section scoped-section">
<h2>Scoped Keyboard Shortcuts</h2>
<p>
Shortcuts can be scoped to specific DOM elements using the{' '}
<code>target</code> option. Use an accessor for reactive targets:{' '}
<code>() => ({ target: ref() })</code>
</p>
<div class="scoped-grid">
<div class="scoped-area" ref={setSidebarRef} tabIndex={0}>
<h3>Sidebar (Scoped Area)</h3>
<p>Click here to focus, then try:</p>
<div class="hotkey-list">
<div>
<kbd>{formatForDisplay('Mod+B')}</kbd> — Trigger sidebar
action
</div>
<div>
<kbd>{formatForDisplay('Mod+N')}</kbd> — New item
</div>
</div>
<div class="counter">
Sidebar shortcuts: {sidebarShortcutCount()}x
</div>
<p class="hint">
These shortcuts only work when this sidebar area is focused or
contains focus.
</p>
</div>
<div class="scoped-area">
<h3>Modal Dialog</h3>
<button onClick={() => setModalOpen(true)}>Open Modal</button>
<Show when={modalOpen()}>
<div class="modal-overlay" onClick={() => setModalOpen(false)}>
<div
class="modal-content"
ref={setModalRef}
tabIndex={0}
onClick={(e) => e.stopPropagation()}
>
<h3>Modal Dialog (Scoped)</h3>
<p>Try these shortcuts while modal is open:</p>
<div class="hotkey-list">
<div>
<kbd>{formatForDisplay('Escape')}</kbd> — Close modal
</div>
<div>
<kbd>{formatForDisplay('Mod+Enter')}</kbd> — Submit
</div>
</div>
<div class="counter">
Modal shortcuts: {modalShortcutCount()}x
</div>
<p class="hint">
These shortcuts only work when the modal is open and
focused. The Escape key here won't conflict with the
global Escape handler.
</p>
<button onClick={() => setModalOpen(false)}>Close</button>
</div>
</div>
</Show>
</div>
<div class="scoped-area">
<h3>Text Editor (Scoped)</h3>
<p>Focus the editor below and try:</p>
<div class="hotkey-list">
<div>
<kbd>{formatForDisplay('Mod+S')}</kbd> — Save editor content
</div>
<div>
<kbd>{formatForDisplay('Mod+/')}</kbd> — Add comment
</div>
<div>
<kbd>{formatForDisplay('Mod+K')}</kbd> — Clear editor
</div>
<div>
<kbd>J</kbd> — Single key (test ignoreInputs)
</div>
</div>
<textarea
ref={setEditorRef}
class="scoped-editor"
value={editorContent()}
onInput={(e) => setEditorContent(e.currentTarget.value)}
placeholder="Focus here and try the shortcuts above..."
rows={8}
/>
<div class="counter">
Editor shortcuts: {editorShortcutCount()}x
</div>
<p class="hint">
These shortcuts only work when the editor is focused. Notice
that <kbd>{formatForDisplay('Mod+S')}</kbd> here doesn't
conflict with the global <kbd>{formatForDisplay('Mod+S')}</kbd>{' '}
shortcut.
</p>
</div>
</div>
<pre class="code-block">{`// Scoped to a signal (Solid pattern)
const [sidebarRef, setSidebarRef] = createSignal<HTMLDivElement | null>(null)
createHotkey(
'Mod+B',
() => console.log('Sidebar shortcut!'),
() => ({ target: sidebarRef() })
)
// Scoped to a modal (only when open)
const [modalRef, setModalRef] = createSignal<HTMLDivElement | null>(null)
const [isOpen, setIsOpen] = createSignal(false)
createHotkey(
'Escape',
() => setIsOpen(false),
() => ({ target: modalRef(), enabled: isOpen() })
)
// Scoped to an editor
const [editorRef, setEditorRef] = createSignal<HTMLTextAreaElement | null>(null)
createHotkey(
'Mod+S',
() => saveEditorContent(),
() => ({ target: editorRef() })
)`}</pre>
</section>
</main>
<TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
</div>
)
}
const root = document.getElementById('root')!
render(
() => (
<HotkeysProvider>
<App />
</HotkeysProvider>
),
root,
)
'%3e%3cg%20fill-rule='nonzero'%3e%3cpath%20d='m1099.4%20549.4v-12.5h-21.3l-12.5%2012.5z'%20fill='%23ff8b00'/%3e%3cpath%20d='m1123.4%20518.4h-26.7l-12.6%2012.5h39.3z'%20fill='%2355b2c6'/%3e%3cpath%20d='m1053.2%20561.9%206.4-6.4h21.6v12.5h-28z'%20fill='%23f00'/%3e%3cpath%20d='m1057.9%20543.3h13.8l12.6-12.5h-26.4z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1042.8%20561.9h10.4l12.4-12.5h-22.8z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1096.7%20518.4-6.4%206.4h-40.8v-12.5h47.2z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m828.6%20559.7h-19.6l-3.4%208.4h-8.6l18.1-42.4h7.5l18.1%2042.4h-8.7zm-2.7-6.7-7.1-17.3-7.1%2017.3z'%20fill='%23031c4c'/%3e%3cpath%20d='m960.1%20541.3c2.5-3.7%208.8-4.1%2011.4-4.1v7.2c-3.2%200-6.4.1-8.3%201.5s-2.9%203.3-2.9%205.6v16.6h-7.8v-30.9h7.5z'%20fill='%23031c4c'/%3e%3c/g%3e%3cpath%20d='m975.8%20537.2h7.8v30.9h-7.8z'%20fill='%23031c4c'/%3e%3cpath%20d='m975.8%20523.4h7.8v9.2h-7.8z'%20fill='%23031c4c'/%3e%3cpath%20d='m1022.3%20523.4v44.7h-7.5l-.2-4.7c-1.1%201.6-2.5%202.9-4.2%203.9-1.7.9-3.8%201.4-6.2%201.4-2.1%200-4.1-.4-5.8-1.1-1.8-.8-3.4-1.8-4.7-3.2s-2.4-3.1-3.1-5c-.8-1.9-1.1-4.1-1.1-6.5s.4-4.6%201.1-6.6c.8-2%201.8-3.7%203.1-5.1s2.9-2.5%204.7-3.3%203.7-1.2%205.8-1.2c2.4%200%204.4.4%206.1%201.3s3.1%202.1%204.2%203.8v-18.3h7.8zm-16.4%2038.6c2.6%200%204.6-.9%206.2-2.6s2.4-4%202.4-6.8-.8-5-2.4-6.8c-1.6-1.7-3.6-2.6-6.2-2.6-2.5%200-4.6.9-6.1%202.6-1.6%201.7-2.4%204-2.4%206.8s.8%205%202.4%206.7c1.6%201.8%203.6%202.7%206.1%202.7'%20fill='%23031c4c'%20fill-rule='nonzero'/%3e%3cpath%20d='m885.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23031c4c'%20fill-rule='nonzero'/%3e%3cpath%20d='m946.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23031c4c'%20fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e)
'%3e%3cpath%20d='M117.436%20207.036V154.604L118.529%20153.51H129.452L130.545%20154.604V207.036L129.452%20208.13H118.529L117.436%20207.036Z'%20fill='%2305BDBA'/%3e%3cpath%20d='M117.436%2053.5225V1.09339L118.529%200H129.452L130.545%201.09339V53.5225L129.452%2054.6159H118.529L117.436%2053.5225Z'%20fill='%2305BDBA'/%3e%3cpath%20d='M69.9539%20169.238H68.4094L60.6869%20161.512V159.967L78.7201%20141.938L86.8976%20141.942L87.9948%20143.031V151.209L69.9539%20169.238Z'%20fill='%2305BDBA'/%3e%3cpath%20d='M69.9462%2038.8917H68.4017L60.6792%2046.6181V48.1626L78.7124%2066.192L86.8899%2066.1882L87.9871%2065.0986V56.9212L69.9462%2038.8917Z'%20fill='%2305BDBA'/%3e%3cpath%20d='M1.09339%2097.5104H75.3711L76.4645%2098.6038V109.526L75.3711%20110.62H1.09339L0%20109.526V98.6038L1.09339%2097.5104Z'%20fill='%2305BDBA'/%3e%3cpath%20d='M440.999%2097.5104H510.91L512.004%2098.6038V109.526L510.91%20110.62H436.633L435.539%20109.526L439.905%2098.6038L440.999%2097.5104Z'%20fill='%2305BDBA'/%3e%3cpath%20d='M212.056%20108.727L210.963%20109.821H177.079L175.986%20110.914C175.986%20113.101%20178.173%20119.657%20186.916%20119.657C190.196%20119.657%20193.472%20118.564%20194.566%20116.377L195.659%20115.284H208.776L209.869%20116.377C208.776%20122.934%20203.313%20132.774%20186.916%20132.774C168.336%20132.774%20159.589%20119.657%20159.589%20104.357C159.589%2089.0576%20168.332%2075.9408%20185.822%2075.9408C203.313%2075.9408%20212.056%2089.0576%20212.056%20104.357V108.731V108.727ZM195.659%2097.7971C195.659%2096.7037%20194.566%2089.0538%20185.822%2089.0538C177.079%2089.0538%20175.986%2096.7037%20175.986%2097.7971L177.079%2098.8905H194.566L195.659%2097.7971Z'%20fill='%23014847'/%3e%3cpath%20d='M242.66%20115.284C242.66%20117.47%20243.753%20118.564%20245.94%20118.564H255.776L256.87%20119.657V130.587L255.776%20131.681H245.94C236.103%20131.681%20227.36%20127.307%20227.36%20115.284V91.2368L226.266%2090.1434H218.617L217.523%2089.05V78.1199L218.617%2077.0265H226.266L227.36%2075.9332V66.0965L228.453%2065.0031H241.57L242.663%2066.0965V75.9332L243.757%2077.0265H255.78L256.874%2078.1199V89.05L255.78%2090.1434H243.757L242.663%2091.2368V115.284H242.66Z'%20fill='%23014847'/%3e%3cpath%20d='M283.1%20131.681H269.983L268.889%20130.587V56.2636L269.983%2055.1702H283.1L284.193%2056.2636V130.587L283.1%20131.681Z'%20fill='%23014847'/%3e%3cpath%20d='M312.61%2068.2871H299.493L298.399%2067.1937V56.2636L299.493%2055.1702H312.61L313.703%2056.2636V67.1937L312.61%2068.2871ZM312.61%20131.681H299.493L298.399%20130.587V78.1237L299.493%2077.0304H312.61L313.703%2078.1237V130.587L312.61%20131.681Z'%20fill='%23014847'/%3e%3cpath%20d='M363.98%2056.2636V67.1937L362.886%2068.2871H353.05C350.863%2068.2871%20349.769%2069.3805%20349.769%2071.5672V75.9408L350.863%2077.0342H361.793L362.886%2078.1276V89.0576L361.793%2090.151H350.863L349.769%2091.2444V130.591L348.676%20131.684H335.559L334.466%20130.591V91.2444L333.372%2090.151H325.723L324.629%2089.0576V78.1276L325.723%2077.0342H333.372L334.466%2075.9408V71.5672C334.466%2059.5438%20343.209%2055.1702%20353.046%2055.1702H362.882L363.976%2056.2636H363.98Z'%20fill='%23014847'/%3e%3cpath%20d='M404.42%20132.774C400.046%20143.704%20395.677%20150.261%20380.373%20150.261H374.906L373.813%20149.167V138.237L374.906%20137.144H380.373C385.836%20137.144%20386.929%20136.05%20388.023%20132.77V131.677L370.536%2089.05V78.1199L371.63%2077.0265H381.466L382.56%2078.1199L395.677%20115.284H396.77L409.887%2078.1199L410.98%2077.0265H420.817L421.91%2078.1199V89.05L404.424%20132.77L404.42%20132.774Z'%20fill='%23014847'/%3e%3cpath%20d='M135.454%20131.681L134.361%20130.587L134.368%2098.9172C134.368%2093.4541%20132.22%2089.2182%20125.625%2089.0806C122.234%2088.9926%20118.354%2089.0729%20114.209%2089.2488L113.59%2089.8834L113.598%20130.587L112.504%20131.681H99.3913L98.2979%20130.587V77.5388L99.3913%2076.4454L128.901%2076.1778C143.685%2076.1778%20149.668%2086.3356%20149.668%2097.8009V130.587L148.575%20131.681H135.454Z'%20fill='%23014847'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_235_8'%3e%3crect%20width='512'%20height='208.126'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%207.58621C0%203.39646%203.44137%200%207.68651%200H36.8952C41.1404%200%2044.5817%203.39646%2044.5817%207.58621V32.104C44.5817%2036.4386%2039.0241%2038.3197%2036.3287%2034.8976L27.902%2024.1991V37.1724C27.902%2040.9432%2024.8048%2044%2020.9842%2044H7.68651C3.44137%2044%200%2040.6035%200%2036.4138V7.58621ZM7.68651%206.06897C6.83748%206.06897%206.14921%206.74826%206.14921%207.58621V36.4138C6.14921%2037.2517%206.83748%2037.931%207.68651%2037.931H21.2148C21.6393%2037.931%2021.7528%2037.5914%2021.7528%2037.1724V19.7752C21.7528%2015.4407%2027.3104%2013.5594%2030.0059%2016.9816L38.4325%2027.6801V7.58621C38.4325%206.74826%2038.5129%206.06897%2037.6639%206.06897H7.68651Z'%20fill='%2332C0ED'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%207.58621C0%203.39646%203.44137%200%207.68651%200H36.8952C41.1404%200%2044.5817%203.39646%2044.5817%207.58621V32.104C44.5817%2036.4386%2039.0241%2038.3197%2036.3287%2034.8976L27.902%2024.1991V37.1724C27.902%2040.9432%2024.8048%2044%2020.9842%2044H7.68651C3.44137%2044%200%2040.6035%200%2036.4138V7.58621ZM7.68651%206.06897C6.83748%206.06897%206.14921%206.74826%206.14921%207.58621V36.4138C6.14921%2037.2517%206.83748%2037.931%207.68651%2037.931H21.2148C21.6393%2037.931%2021.7528%2037.5914%2021.7528%2037.1724V19.7752C21.7528%2015.4407%2027.3104%2013.5594%2030.0059%2016.9816L38.4325%2027.6801V7.58621C38.4325%206.74826%2038.5129%206.06897%2037.6639%206.06897H7.68651Z'%20fill='url(%23paint0_linear_8138_23)'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%207.58621C0%203.39646%203.44137%200%207.68651%200H36.8952C41.1404%200%2044.5817%203.39646%2044.5817%207.58621V32.104C44.5817%2036.4386%2039.0241%2038.3197%2036.3287%2034.8976L27.902%2024.1991V37.1724C27.902%2040.9432%2024.8048%2044%2020.9842%2044H7.68651C3.44137%2044%200%2040.6035%200%2036.4138V7.58621ZM7.68651%206.06897C6.83748%206.06897%206.14921%206.74826%206.14921%207.58621V36.4138C6.14921%2037.2517%206.83748%2037.931%207.68651%2037.931H21.2148C21.6393%2037.931%2021.7528%2037.5914%2021.7528%2037.1724V19.7752C21.7528%2015.4407%2027.3104%2013.5594%2030.0059%2016.9816L38.4325%2027.6801V7.58621C38.4325%206.74826%2038.5129%206.06897%2037.6639%206.06897H7.68651Z'%20fill='url(%23paint1_linear_8138_23)'%20fill-opacity='0.35'/%3e%3cpath%20d='M36.8954%200C41.1406%200%2044.5819%203.39646%2044.5819%207.58621V32.104C44.5819%2036.4386%2039.0243%2038.3197%2036.3289%2034.8976L27.9022%2024.1991V37.1724C27.9022%2040.9432%2024.805%2044%2020.9844%2044C21.4089%2044%2021.753%2043.6604%2021.753%2043.2414V19.7752C21.753%2015.4407%2027.3106%2013.5594%2030.0061%2016.9816L38.4327%2027.6801V1.51724C38.4327%200.679292%2037.7445%200%2036.8954%200Z'%20fill='%2363F655'/%3e%3cpath%20d='M75.1561%2012.9622V24.4706L63.8496%2012.9622H57.9648V31.7844H63.332V19.4155L75.6465%2031.7844H80.5232V12.9622H75.1561Z'%20fill='%231A1A1A'/%3e%3cpath%20d='M90.4724%2027.5898V24.2555H102.487V20.2491H90.4724V17.1569H105.048V12.9622H84.9963V31.7844H105.348V27.5898H90.4724Z'%20fill='%231A1A1A'/%3e%3cpath%20d='M119.61%2032.4029C127.157%2032.4029%20132.061%2028.746%20132.061%2022.3733C132.061%2016.0006%20127.157%2012.3438%20119.61%2012.3438C112.063%2012.3438%20107.187%2016.0006%20107.187%2022.3733C107.187%2028.746%20112.063%2032.4029%20119.61%2032.4029ZM119.61%2027.9393C115.415%2027.9393%20112.826%2025.9226%20112.826%2022.3733C112.826%2018.824%20115.442%2016.8073%20119.61%2016.8073C123.806%2016.8073%20126.394%2018.824%20126.394%2022.3733C126.394%2025.9226%20123.806%2027.9393%20119.61%2027.9393Z'%20fill='%231A1A1A'/%3e%3cpath%20d='M152.632%2012.9622V24.4706L141.326%2012.9622H135.441V31.7844H140.808V19.4155L153.123%2031.7844H157.999V12.9622H152.632Z'%20fill='%231A1A1A'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_8138_23'%20x1='44.5818'%20y1='44'%20x2='5.96033'%20y2='-0.503114'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%232EF51C'/%3e%3cstop%20offset='1'%20stop-color='%232EF51C'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_8138_23'%20x1='44.5817'%20y1='44'%20x2='18.194'%20y2='33.6003'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0.9'/%3e%3cstop%20offset='1'%20stop-color='%231A1A1A'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_8138_23'%3e%3crect%20width='158'%20height='44'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
'/%3e%3c/svg%3e)
'%3e%3cg%20fill-rule='nonzero'%3e%3cpath%20d='m1099.4%20549.4v-12.5h-21.3l-12.5%2012.5z'%20fill='%23ff8b00'/%3e%3cpath%20d='m1123.4%20518.4h-26.7l-12.6%2012.5h39.3z'%20fill='%2355b2c6'/%3e%3cpath%20d='m1053.2%20561.9%206.4-6.4h21.6v12.5h-28z'%20fill='%23f00'/%3e%3cpath%20d='m1057.9%20543.3h13.8l12.6-12.5h-26.4z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1042.8%20561.9h10.4l12.4-12.5h-22.8z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1096.7%20518.4-6.4%206.4h-40.8v-12.5h47.2z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m828.6%20559.7h-19.6l-3.4%208.4h-8.6l18.1-42.4h7.5l18.1%2042.4h-8.7zm-2.7-6.7-7.1-17.3-7.1%2017.3z'%20fill='%23fff'/%3e%3cpath%20d='m960.1%20541.3c2.5-3.7%208.8-4.1%2011.4-4.1v7.2c-3.2%200-6.4.1-8.3%201.5s-2.9%203.3-2.9%205.6v16.6h-7.8v-30.9h7.5z'%20fill='%23fff'/%3e%3c/g%3e%3cpath%20d='m975.8%20537.2h7.8v30.9h-7.8z'%20fill='%23fff'/%3e%3cpath%20d='m975.8%20523.4h7.8v9.2h-7.8z'%20fill='%23fff'/%3e%3cpath%20d='m1022.3%20523.4v44.7h-7.5l-.2-4.7c-1.1%201.6-2.5%202.9-4.2%203.9-1.7.9-3.8%201.4-6.2%201.4-2.1%200-4.1-.4-5.8-1.1-1.8-.8-3.4-1.8-4.7-3.2s-2.4-3.1-3.1-5c-.8-1.9-1.1-4.1-1.1-6.5s.4-4.6%201.1-6.6c.8-2%201.8-3.7%203.1-5.1s2.9-2.5%204.7-3.3%203.7-1.2%205.8-1.2c2.4%200%204.4.4%206.1%201.3s3.1%202.1%204.2%203.8v-18.3h7.8zm-16.4%2038.6c2.6%200%204.6-.9%206.2-2.6s2.4-4%202.4-6.8-.8-5-2.4-6.8c-1.6-1.7-3.6-2.6-6.2-2.6-2.5%200-4.6.9-6.1%202.6-1.6%201.7-2.4%204-2.4%206.8s.8%205%202.4%206.7c1.6%201.8%203.6%202.7%206.1%202.7'%20fill='%23fff'%20fill-rule='nonzero'/%3e%3cpath%20d='m885.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23fff'%20fill-rule='nonzero'/%3e%3cpath%20d='m946.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23fff'%20fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e)
'%3e%3cpath%20d='M117.436%20207.036V154.604L118.529%20153.51H129.452L130.545%20154.604V207.036L129.452%20208.13H118.529L117.436%20207.036Z'%20fill='%2332E6E2'/%3e%3cpath%20d='M117.436%2053.5225V1.09339L118.529%200H129.452L130.545%201.09339V53.5225L129.452%2054.6159H118.529L117.436%2053.5225Z'%20fill='%2332E6E2'/%3e%3cpath%20d='M69.9539%20169.238H68.4094L60.6869%20161.512V159.967L78.7201%20141.938L86.8976%20141.942L87.9948%20143.031V151.209L69.9539%20169.238Z'%20fill='%2332E6E2'/%3e%3cpath%20d='M69.9462%2038.8917H68.4017L60.6792%2046.6181V48.1626L78.7124%2066.192L86.8899%2066.1882L87.9871%2065.0986V56.9212L69.9462%2038.8917Z'%20fill='%2332E6E2'/%3e%3cpath%20d='M1.09339%2097.5104H75.3711L76.4645%2098.6038V109.526L75.3711%20110.62H1.09339L0%20109.526V98.6038L1.09339%2097.5104Z'%20fill='%2332E6E2'/%3e%3cpath%20d='M440.999%2097.5104H510.91L512.004%2098.6038V109.526L510.91%20110.62H436.633L435.539%20109.526L439.905%2098.6038L440.999%2097.5104Z'%20fill='%2332E6E2'/%3e%3cpath%20d='M212.056%20108.727L210.963%20109.821H177.079L175.986%20110.914C175.986%20113.101%20178.173%20119.657%20186.916%20119.657C190.196%20119.657%20193.472%20118.564%20194.566%20116.377L195.659%20115.284H208.776L209.869%20116.377C208.776%20122.934%20203.313%20132.774%20186.916%20132.774C168.336%20132.774%20159.589%20119.657%20159.589%20104.357C159.589%2089.0576%20168.332%2075.9408%20185.822%2075.9408C203.313%2075.9408%20212.056%2089.0576%20212.056%20104.357V108.731V108.727ZM195.659%2097.7971C195.659%2096.7037%20194.566%2089.0538%20185.822%2089.0538C177.079%2089.0538%20175.986%2096.7037%20175.986%2097.7971L177.079%2098.8905H194.566L195.659%2097.7971Z'%20fill='white'/%3e%3cpath%20d='M242.66%20115.284C242.66%20117.47%20243.753%20118.564%20245.94%20118.564H255.776L256.87%20119.657V130.587L255.776%20131.681H245.94C236.103%20131.681%20227.36%20127.307%20227.36%20115.284V91.2368L226.266%2090.1434H218.617L217.523%2089.05V78.1199L218.617%2077.0265H226.266L227.36%2075.9332V66.0965L228.453%2065.0031H241.57L242.663%2066.0965V75.9332L243.757%2077.0265H255.78L256.874%2078.1199V89.05L255.78%2090.1434H243.757L242.663%2091.2368V115.284H242.66Z'%20fill='white'/%3e%3cpath%20d='M283.1%20131.681H269.983L268.889%20130.587V56.2636L269.983%2055.1702H283.1L284.193%2056.2636V130.587L283.1%20131.681Z'%20fill='white'/%3e%3cpath%20d='M312.61%2068.2871H299.493L298.399%2067.1937V56.2636L299.493%2055.1702H312.61L313.703%2056.2636V67.1937L312.61%2068.2871ZM312.61%20131.681H299.493L298.399%20130.587V78.1237L299.493%2077.0304H312.61L313.703%2078.1237V130.587L312.61%20131.681Z'%20fill='white'/%3e%3cpath%20d='M363.98%2056.2636V67.1937L362.886%2068.2871H353.05C350.863%2068.2871%20349.769%2069.3805%20349.769%2071.5672V75.9408L350.863%2077.0342H361.793L362.886%2078.1276V89.0576L361.793%2090.151H350.863L349.769%2091.2444V130.591L348.676%20131.684H335.559L334.466%20130.591V91.2444L333.372%2090.151H325.723L324.629%2089.0576V78.1276L325.723%2077.0342H333.372L334.466%2075.9408V71.5672C334.466%2059.5438%20343.209%2055.1702%20353.046%2055.1702H362.882L363.976%2056.2636H363.98Z'%20fill='white'/%3e%3cpath%20d='M404.42%20132.774C400.046%20143.704%20395.677%20150.261%20380.373%20150.261H374.906L373.813%20149.167V138.237L374.906%20137.144H380.373C385.836%20137.144%20386.929%20136.05%20388.023%20132.77V131.677L370.536%2089.05V78.1199L371.63%2077.0265H381.466L382.56%2078.1199L395.677%20115.284H396.77L409.887%2078.1199L410.98%2077.0265H420.817L421.91%2078.1199V89.05L404.424%20132.77L404.42%20132.774Z'%20fill='white'/%3e%3cpath%20d='M135.454%20131.681L134.361%20130.587L134.368%2098.9172C134.368%2093.4541%20132.22%2089.2182%20125.625%2089.0806C122.234%2088.9926%20118.354%2089.0729%20114.209%2089.2488L113.59%2089.8834L113.598%20130.587L112.504%20131.681H99.3913L98.2979%20130.587V77.5388L99.3913%2076.4454L128.901%2076.1778C143.685%2076.1778%20149.668%2086.3356%20149.668%2097.8009V130.587L148.575%20131.681H135.454Z'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_235_26'%3e%3crect%20width='512'%20height='208.126'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%207.58621C0%203.39646%203.44137%200%207.68651%200H36.8952C41.1404%200%2044.5817%203.39646%2044.5817%207.58621V32.104C44.5817%2036.4386%2039.0241%2038.3197%2036.3287%2034.8976L27.902%2024.1991V37.1724C27.902%2040.9432%2024.8048%2044%2020.9842%2044H7.68651C3.44137%2044%200%2040.6035%200%2036.4138V7.58621ZM7.68651%206.06897C6.83748%206.06897%206.14921%206.74826%206.14921%207.58621V36.4138C6.14921%2037.2517%206.83748%2037.931%207.68651%2037.931H21.2148C21.6393%2037.931%2021.7528%2037.5914%2021.7528%2037.1724V19.7752C21.7528%2015.4407%2027.3104%2013.5594%2030.0059%2016.9816L38.4325%2027.6801V7.58621C38.4325%206.74826%2038.5129%206.06897%2037.6639%206.06897H7.68651Z'%20fill='url(%23paint1_linear_10558_11751)'/%3e%3cpath%20d='M36.8954%200C41.1406%200%2044.5819%203.39646%2044.5819%207.58621V32.104C44.5819%2036.4386%2039.0243%2038.3197%2036.3289%2034.8976L27.9022%2024.1991V37.1724C27.9022%2040.9432%2024.805%2044%2020.9844%2044C21.4089%2044%2021.753%2043.6604%2021.753%2043.2414V19.7752C21.753%2015.4407%2027.3106%2013.5594%2030.0061%2016.9816L38.4327%2027.6801V1.51724C38.4327%200.679292%2037.7445%200%2036.8954%200Z'%20fill='%23B9FFB3'/%3e%3cpath%20d='M75.1561%2012.9622V24.4706L63.8496%2012.9622H57.9648V31.7844H63.332V19.4155L75.6465%2031.7844H80.5232V12.9622H75.1561Z'%20fill='white'/%3e%3cpath%20d='M90.4725%2027.5898V24.2555H102.487V20.2491H90.4725V17.1569H105.048V12.9622H84.9964V31.7844H105.348V27.5898H90.4725Z'%20fill='white'/%3e%3cpath%20d='M119.61%2032.4029C127.157%2032.4029%20132.061%2028.746%20132.061%2022.3733C132.061%2016.0006%20127.157%2012.3438%20119.61%2012.3438C112.063%2012.3438%20107.187%2016.0006%20107.187%2022.3733C107.187%2028.746%20112.063%2032.4029%20119.61%2032.4029ZM119.61%2027.9393C115.415%2027.9393%20112.826%2025.9226%20112.826%2022.3733C112.826%2018.824%20115.442%2016.8073%20119.61%2016.8073C123.806%2016.8073%20126.394%2018.824%20126.394%2022.3733C126.394%2025.9226%20123.806%2027.9393%20119.61%2027.9393Z'%20fill='white'/%3e%3cpath%20d='M152.632%2012.9622V24.4706L141.326%2012.9622H135.441V31.7844H140.808V19.4155L153.123%2031.7844H157.999V12.9622H152.632Z'%20fill='white'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_10558_11751'%20x1='44.5818'%20y1='44'%20x2='5.96033'%20y2='-0.503116'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23B9FFB3'/%3e%3cstop%20offset='1'%20stop-color='%23B9FFB3'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_10558_11751'%20x1='44.5817'%20y1='44'%20x2='18.194'%20y2='33.6003'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%231A1A1A'%20stop-opacity='0.9'/%3e%3cstop%20offset='1'%20stop-color='%231A1A1A'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
'%3e%3cpath%20d='M255.264%2025.3765H279.579L297.086%2097.519C300.332%20111.135%20300.976%20119.244%20300.976%20119.244H301.304C301.304%20119.244%20302.435%20111.306%20305.681%2097.519L322.373%2025.3765H349.934L367.599%2097.519C371.003%20111.622%20371.818%20119.244%20371.818%20119.244H372.304C372.304%20119.244%20372.632%20111.622%20375.866%2097.519L392.729%2025.3765H417.043L386.249%20143.717H359.174L340.536%2072.0612C336.646%2056.4997%20336.318%2049.5334%20336.318%2049.5334H335.99C335.99%2049.5334%20335.661%2056.4997%20332.099%2072.0612L314.592%20143.717H286.715L255.264%2025.3765Z'%20fill='white'/%3e%3cpath%20d='M412.984%20100.726C412.984%2073.6509%20430.491%2056.1442%20456.921%2056.1442C483.181%2056.1442%20500.688%2073.6509%20500.688%20100.726C500.688%20127.958%20483.181%20145.635%20456.921%20145.635C430.503%20145.623%20412.984%20127.958%20412.984%20100.726ZM477.99%20100.726C477.99%2083.2189%20469.565%2073.3227%20456.921%2073.3227C443.305%2073.3227%20435.682%2084.3495%20435.682%20100.726C435.682%20118.561%20444.107%20128.445%20456.921%20128.445C470.537%20128.445%20477.99%20117.418%20477.99%20100.726Z'%20fill='white'/%3e%3cpath%20d='M511.545%2057.4711H533.101V73.3609H533.587C537.319%2065.0938%20546.231%2056.8267%20561.464%2056.8267C564.054%2056.8267%20565.683%2057.155%20566.813%2057.4711V79.0263H566.169C566.169%2079.0263%20564.224%2078.3819%20558.875%2078.3819C542.182%2078.3819%20533.101%2088.266%20533.101%20106.745V143.704H511.545V57.4711Z'%20fill='white'/%3e%3cpath%20d='M576.868%2025.3765H598.423V63.3079C598.423%2085.6776%20598.095%2089.7261%20598.095%2089.7261H598.423L630.519%2057.4723H657.424L619.833%2094.7592L663.442%20143.717H637.984L606.532%20108.047L598.423%20115.986V143.705H576.868V25.3765Z'%20fill='white'/%3e%3cpath%20d='M663.757%2084.9796C663.757%2048.5072%20686.455%2024.1923%20720.496%2024.1923C754.537%2024.1923%20777.235%2048.5072%20777.235%2084.9796C777.235%20121.452%20754.537%20145.767%20720.496%20145.767C686.455%20145.767%20663.757%20121.452%20663.757%2084.9796ZM753.722%2084.9796C753.722%2060.1784%20740.434%2043.474%20720.483%2043.474C700.533%2043.474%20687.257%2060.1784%20687.257%2084.9796C687.257%20109.781%20700.545%20126.485%20720.483%20126.485C740.422%20126.485%20753.722%20109.781%20753.722%2084.9796Z'%20fill='white'/%3e%3cpath%20d='M785.488%20104.326H810.131C810.131%20118.271%20819.699%20126.052%20834.288%20126.052C846.603%20126.052%20855.041%20119.888%20855.041%20111.135C855.041%20101.25%20848.561%2098.6488%20827.966%2094.6003C809.158%2090.868%20789.22%2084.5461%20789.22%2059.9029C789.22%2039.3203%20806.727%2023.7587%20833.473%2023.7587C861.35%2023.7587%20878.541%2038.3477%20878.541%2060.3892H853.898C853.898%2049.6906%20845.631%2043.0405%20833.473%2043.0405C821.158%2043.0405%20813.535%2049.0341%20813.535%2057.7875C813.535%2067.0272%20818.884%2070.5893%20835.419%2073.9934C859.892%2079.1847%20880%2081.9323%20880%20109.165C880%20130.745%20861.192%20145.333%20833.473%20145.333C805.268%20145.333%20785.488%20128.957%20785.488%20104.326Z'%20fill='white'/%3e%3cpath%20d='M0%2084.0003C0%2087.6782%200.967855%2091.356%202.83904%2094.5177L36.7785%20153.299C40.2628%20159.299%2045.5537%20164.203%2052.1351%20166.397C65.1044%20170.72%2078.5253%20165.171%2084.9131%20154.073L93.1076%20139.878L60.7813%2084.0003L94.9143%2024.8321L103.109%2010.6369C105.561%206.37836%20108.851%202.89408%20112.723%200.119568H109.174H60.0715C50.8446%200.119568%2042.3275%205.02337%2037.7463%2013.0243L2.83904%2073.483C0.967855%2076.6446%200%2080.3225%200%2084.0003Z'%20fill='white'/%3e%3cpath%20d='M193.571%2083.9997C193.571%2080.3219%20192.603%2076.644%20190.732%2073.4824L156.341%2013.9271C149.953%202.89352%20136.532%20-2.65551%20123.563%201.60305C116.982%203.79685%20111.691%208.70065%20108.206%2014.7013L100.464%2028.0577L132.79%2083.9997L98.6569%20143.168L90.4624%20157.363C88.0105%20161.557%2084.7198%20165.106%2080.8484%20167.88H84.3972H133.5C142.727%20167.88%20151.244%20162.977%20155.825%20154.976L190.732%2094.5171C192.603%2091.3554%20193.571%2087.6776%20193.571%2083.9997Z'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1647_45'%3e%3crect%20width='880'%20height='168'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
'/%3e%3c/svg%3e)
