ui/docs/public/illustrations/keyboard-shortcuts-dark.svg

<svg width="444" height="160" viewBox="0 0 444 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_5983)">
<g filter="url(#filter0_f_993_5983)">
<rect x="112.809" y="113" width="24" height="32" transform="rotate(36 112.809 113)" fill="url(#paint0_radial_993_5983)"/>
</g>
<g filter="url(#filter1_f_993_5983)">
<rect x="274.809" y="64" width="24" height="32" transform="rotate(36 274.809 64)" fill="url(#paint1_radial_993_5983)"/>
</g>
<rect width="444" height="160" rx="8" fill="url(#paint2_linear_993_5983)" fill-opacity="0.12"/>
<rect x="11" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="39" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="67" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="95" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="123" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="151" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="179" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="207" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="235" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="263" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="291" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="320" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="348" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="376" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="404" y="29" width="29" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="325" y="128" width="23" height="21" rx="2" fill="url(#paint3_linear_993_5983)" fill-opacity="0.16"/>
<rect x="353" y="140" width="23.7037" height="9" rx="2" fill="url(#paint4_linear_993_5983)" fill-opacity="0.16"/>
<rect x="381.642" y="140" width="23.7037" height="9" rx="2" fill="url(#paint5_linear_993_5983)" fill-opacity="0.16"/>
<rect x="409.296" y="140" width="23.7037" height="9" rx="2" fill="url(#paint6_linear_993_5983)" fill-opacity="0.16"/>
<rect x="381.642" y="128" width="23.7037" height="9" rx="2" fill="url(#paint7_linear_993_5983)" fill-opacity="0.16"/>
<rect x="11" y="128" width="23" height="21" rx="2" fill="url(#paint8_linear_993_5983)" fill-opacity="0.16"/>
<rect x="39" y="128" width="23" height="21" rx="2" fill="url(#paint9_linear_993_5983)" fill-opacity="0.16"/>
<rect x="67" y="128" width="23" height="21" rx="2" fill="url(#paint10_linear_993_5983)" fill-opacity="0.16"/>
<rect x="95" y="128" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.3"/>
<rect x="95.5" y="128.5" width="22" height="20" rx="1.5" stroke="#475569" stroke-opacity="0.2"/>
<rect x="95.5" y="128.5" width="22" height="20" rx="1.5" stroke="url(#paint11_linear_993_5983)" stroke-opacity="0.5"/>
<rect x="293" y="128" width="27" height="21" rx="2" fill="url(#paint12_linear_993_5983)" fill-opacity="0.16"/>
<rect x="123" y="128" width="165" height="21" rx="2" fill="url(#paint13_linear_993_5983)" fill-opacity="0.16"/>
<rect x="327" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="299" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="271" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="243" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="215" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="187" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="159" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="131" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="103" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="75" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="355" y="103" width="78" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="11" y="103" width="59" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="393" y="53" width="40" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="365" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="337" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="309" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="281" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="253" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="225" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="197" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="169" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="141" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="113" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="85" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="57" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="11" y="53" width="41" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="60" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="88" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="116" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="144" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="172" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="200" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="228" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="256" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.3"/>
<rect x="256.5" y="78.5" width="22" height="20" rx="1.5" stroke="#475569" stroke-opacity="0.2"/>
<rect x="256.5" y="78.5" width="22" height="20" rx="1.5" stroke="url(#paint14_linear_993_5983)" stroke-opacity="0.5"/>
<rect x="284" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="312" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="340" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="368" y="78" width="65" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="11" y="78" width="44" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="11" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="39" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="67" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="95" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="123" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="151" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="179" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="207" y="10" width="24" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="236" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="264" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="292" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="320" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="348" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="376" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<rect x="404" y="10" width="29" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
<path d="M264 94V83H265.383V87.9814L270.189 83H271.934L267.654 87.3843L272 94H270.321L266.667 88.4057L265.383 89.71V94H264Z" fill="#94A3B8"/>
<path d="M109.75 139.5H108.5V137.5H109.75C110.195 137.5 110.63 137.368 111 137.121C111.37 136.874 111.658 136.522 111.829 136.111C111.999 135.7 112.044 135.248 111.957 134.811C111.87 134.375 111.656 133.974 111.341 133.659C111.026 133.344 110.625 133.13 110.189 133.043C109.752 132.956 109.3 133.001 108.889 133.171C108.478 133.342 108.126 133.63 107.879 134C107.632 134.37 107.5 134.805 107.5 135.25V136.5H105.5V135.25C105.5 134.805 105.368 134.37 105.121 134C104.874 133.63 104.522 133.342 104.111 133.171C103.7 133.001 103.248 132.956 102.811 133.043C102.375 133.13 101.974 133.344 101.659 133.659C101.344 133.974 101.13 134.375 101.043 134.811C100.956 135.248 101.001 135.7 101.171 136.111C101.342 136.522 101.63 136.874 102 137.121C102.37 137.368 102.805 137.5 103.25 137.5H104.5V139.5H103.25C102.805 139.5 102.37 139.632 102 139.879C101.63 140.126 101.342 140.478 101.171 140.889C101.001 141.3 100.956 141.752 101.043 142.189C101.13 142.625 101.344 143.026 101.659 143.341C101.974 143.656 102.375 143.87 102.811 143.957C103.248 144.044 103.7 143.999 104.111 143.829C104.522 143.658 104.874 143.37 105.121 143C105.368 142.63 105.5 142.195 105.5 141.75V140.5H107.5V141.75C107.5 142.195 107.632 142.63 107.879 143C108.126 143.37 108.478 143.658 108.889 143.829C109.3 143.999 109.752 144.044 110.189 143.957C110.625 143.87 111.026 143.656 111.341 143.341C111.656 143.026 111.87 142.625 111.957 142.189C112.044 141.752 111.999 141.3 111.829 140.889C111.658 140.478 111.37 140.126 111 139.879C110.63 139.632 110.195 139.5 109.75 139.5ZM108.5 135.25C108.5 135.003 108.573 134.761 108.711 134.556C108.848 134.35 109.043 134.19 109.272 134.095C109.5 134.001 109.751 133.976 109.994 134.024C110.236 134.072 110.459 134.191 110.634 134.366C110.809 134.541 110.928 134.764 110.976 135.006C111.024 135.249 110.999 135.5 110.905 135.728C110.81 135.957 110.65 136.152 110.444 136.289C110.239 136.427 109.997 136.5 109.75 136.5H108.5V135.25ZM102 135.25C102 134.918 102.132 134.601 102.366 134.366C102.601 134.132 102.918 134 103.25 134C103.582 134 103.899 134.132 104.134 134.366C104.368 134.601 104.5 134.918 104.5 135.25V136.5H103.25C102.919 136.498 102.602 136.366 102.368 136.132C102.134 135.898 102.002 135.581 102 135.25ZM104.5 141.75C104.5 141.997 104.427 142.239 104.289 142.444C104.152 142.65 103.957 142.81 103.728 142.905C103.5 142.999 103.249 143.024 103.006 142.976C102.764 142.928 102.541 142.809 102.366 142.634C102.191 142.459 102.072 142.236 102.024 141.994C101.976 141.751 102.001 141.5 102.095 141.272C102.19 141.043 102.35 140.848 102.556 140.711C102.761 140.573 103.003 140.5 103.25 140.5H104.5V141.75ZM105.5 137.5H107.5V139.5H105.5V137.5ZM109.75 143C109.419 142.998 109.102 142.866 108.868 142.632C108.634 142.398 108.502 142.081 108.5 141.75V140.5H109.75C110.082 140.5 110.399 140.632 110.634 140.866C110.868 141.101 111 141.418 111 141.75C111 142.082 110.868 142.399 110.634 142.634C110.399 142.868 110.082 143 109.75 143Z" fill="#94A3B8"/>
<rect x="0.5" y="0.5" width="443" height="159" rx="7.5" stroke="url(#paint15_linear_993_5983)" stroke-opacity="0.5"/>
</g>
<defs>
<filter id="filter0_f_993_5983" x="82" y="101" width="62.2256" height="63.9954" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_993_5983"/>
</filter>
<filter id="filter1_f_993_5983" x="244" y="52" width="62.2256" height="63.9954" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_993_5983"/>
</filter>
<radialGradient id="paint0_radial_993_5983" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(124.809 129) rotate(90) scale(16 12)">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint1_radial_993_5983" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(286.809 80) rotate(90) scale(16 12)">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint2_linear_993_5983" x1="222" y1="0" x2="222" y2="88.5496" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_993_5983" x1="336.52" y1="119.214" x2="330.425" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_993_5983" x1="364.873" y1="136.235" x2="363.746" y2="148.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint5_linear_993_5983" x1="393.515" y1="136.235" x2="392.388" y2="148.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear_993_5983" x1="421.169" y1="136.235" x2="420.042" y2="148.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint7_linear_993_5983" x1="393.515" y1="124.235" x2="392.388" y2="136.902" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear_993_5983" x1="22.5202" y1="119.214" x2="16.4252" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint9_linear_993_5983" x1="50.5202" y1="119.214" x2="44.4252" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint10_linear_993_5983" x1="78.5202" y1="119.214" x2="72.4252" y2="147.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint11_linear_993_5983" x1="117.406" y1="126.25" x2="103.679" y2="128.103" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint12_linear_993_5983" x1="306.524" y1="119.214" x2="301.269" y2="148.046" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint13_linear_993_5983" x1="205.645" y1="119.214" x2="204.757" y2="148.978" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint14_linear_993_5983" x1="278.406" y1="76.25" x2="264.679" y2="78.1028" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint15_linear_993_5983" x1="222" y1="0" x2="222" y2="88.5496" gradientUnits="userSpaceOnUse">
<stop stop-color="#475569"/>
<stop offset="1" stop-color="#475569" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_993_5983">
<rect width="444" height="160" fill="white"/>
</clipPath>
</defs>
</svg>