Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 15x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 6x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { CSSProperties } from "react";
import styled from "styled-components";
import { rotateReverse } from "ui/animations/animations";
const RotatingSVG = styled.svg`
animation: ${rotateReverse} 2s linear infinite;
`;
export const LoadingIcon = () => (
<RotatingSVG width="24" height="24" viewBox="0 0 24 24">
<path d="M23 12c0 1.042-.154 2.045-.425 3h-2.101c.335-.94.526-1.947.526-3 0-4.962-4.037-9-9-9-1.706 0-3.296.484-4.655 1.314l1.858 2.686h-6.994l2.152-7 1.849 2.673c1.684-1.049 3.659-1.673 5.79-1.673 6.074 0 11 4.925 11 11zm-6.354 7.692c-1.357.826-2.944 1.308-4.646 1.308-4.962 0-9-4.038-9-9 0-1.053.191-2.06.525-3h-2.1c-.271.955-.425 1.958-.425 3 0 6.075 4.925 11 11 11 2.127 0 4.099-.621 5.78-1.667l1.853 2.667 2.152-6.989h-6.994l1.855 2.681z" />
</RotatingSVG>
);
export const UpdateIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 12C0 18.627 5.373 24 12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12ZM19 11H14V19.5H10V11H5L12 4L19 11Z" />
</svg>
);
export const FolderIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M21.604 13l-1.272 7h-16.663l-1.272-7h19.207zm-14.604-11h-6v7h2v-5h3.084c1.38 1.612 2.577 3 4.916 3h10v2h2v-4h-12c-1.629 0-2.305-1.058-4-3zm17 9h-24l2 11h20l2-11z" />
</svg>
);
export const FolderFilledIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M11 5c-1.629 0-2.305-1.058-4-3h-7v20h24v-17h-13z" />
</svg>
);
export const DotsIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M6 12c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm9 0c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm9 0c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z" />
</svg>
);
export const CommentIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M21 0H24L14.5 24H11.5L21 0Z" fill="black" />
<path d="M9.5 4.63426e-06H12.5L3 24H0L9.5 4.63426e-06Z" fill="black" />
</svg>
);
export const DownloadIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M14.0556641,11 L19,11 L12,19 L5,11 L10.0871094,11 L10.0871094,0 L14.0556641,0 L14.0556641,11 Z M18.213,1.754 L17,3.353 C19.984,5.085 22,8.308 22,12 C22,17.514 17.514,22 12,22 C6.486,22 2,17.514 2,12 C2,8.308 4.016,5.085 7,3.353 L5.787,1.754 C2.322,3.857 0,7.651 0,12 C0,18.627 5.373,24 12,24 C18.627,24 24,18.627 24,12 C24,7.651 21.678,3.857 18.213,1.754 Z"
id="Shape"
/>
</svg>
);
export const FontIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M22 0h-20v6h1.999c0-1.174.397-3 2.001-3h4v16.874c0 1.174-.825 2.126-2 2.126h-1v2h9.999v-2h-.999c-1.174 0-2-.952-2-2.126v-16.874h4c1.649 0 2.02 1.826 2.02 3h1.98v-6z" />
</svg>
);
export const AngleIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="m2.019 11.993c0 5.518 4.48 9.998 9.998 9.998 5.517 0 9.997-4.48 9.997-9.998s-4.48-9.998-9.997-9.998c-5.518 0-9.998 4.48-9.998 9.998zm1.5 0c0-4.69 3.808-8.498 8.498-8.498s8.497 3.808 8.497 8.498-3.807 8.498-8.497 8.498-8.498-3.808-8.498-8.498zm4.715-1.528s1.505-1.502 3.259-3.255c.147-.146.338-.219.53-.219s.384.073.53.219c1.754 1.753 3.259 3.254 3.259 3.254.145.145.217.336.216.527 0 .191-.074.383-.22.53-.293.293-.766.294-1.057.004l-1.978-1.978v6.694c0 .413-.336.75-.75.75s-.75-.337-.75-.75v-6.694l-1.978 1.979c-.29.289-.762.286-1.055-.007-.147-.146-.22-.338-.221-.53-.001-.19.071-.38.215-.524z"
fillRule="nonzero"
/>
</svg>
);
export const TileValueIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3 7C3 4.79086 4.79086 3 7 3H17C19.2091 3 21 4.79086 21 7V17C21 19.2091 19.2091 21 17 21H7C4.79086 21 3 19.2091 3 17V7ZM12.5 15.5V8.5H19.5V9.5H14.5V11.5H17.5V12.5H14.5V15.5H12.5ZM5.5 14.5V15.5H11.5V14.5H9.5V8.5H5.5V9.5H7.5V14.5H5.5Z"
/>
</svg>
);
export const SquareRootIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.1578 4.50061C15.1319 4.55808 15.1039 4.63943 15.0847 4.7466L13.6438 21.1314C13.5869 21.7788 13.1195 22.316 12.4861 22.4618C11.8528 22.6076 11.1976 22.3289 10.8633 21.7716L6.65309 14.7524L6.12599 15.3512C5.57865 15.9731 4.63083 16.0335 4.00896 15.4862C3.3871 14.9388 3.32668 13.991 3.87402 13.3692L5.75748 11.2292C6.07378 10.8699 6.54261 10.6831 7.01938 10.7264C7.49615 10.7698 7.92357 11.0382 8.16982 11.4487L11.06 16.2673L12.101 4.42916C12.1038 4.39833 12.1074 4.36759 12.112 4.33699C12.2129 3.66813 12.4758 2.98661 12.9395 2.44618C13.4055 1.90317 14.1073 1.48123 14.955 1.50061H20C20.8284 1.50061 21.5 2.17218 21.5 3.00061C21.5 3.82904 20.8284 4.50061 20 4.50061H15.1578Z"
/>
</svg>
);
export const StackIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M21.698 10.658l2.302 1.342-12.002 7-11.998-7 2.301-1.342 9.697 5.658 9.7-5.658zm-9.7 10.657l-9.697-5.658-2.301 1.343 11.998 7 12.002-7-2.302-1.342-9.7 5.657zm12.002-14.315l-12.002-7-11.998 7 11.998 7 12.002-7z" />
</svg>
);
export const AutoColorIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M15.07 12.528l-1.68-1.4c.497-2.361.502-3.016 2.035-4.448 1.938-1.811 7.512-6.525 7.512-6.525.129-.108.271-.155.409-.155.342 0 .654.294.654.647 0 .104-.027.214-.088.322 0 0-3.418 6.509-4.846 8.748-1.127 1.771-1.769 1.896-3.996 2.811zm-1.043 1.301l-1.839-1.535c-4.084.043-2.717 4.559-6.696 4.559l-.49-.021c1.048 1.459 2.706 2.168 4.318 2.168 2.551 0 4.988-1.778 4.707-5.171zm3.973-.39v8.561h-16v-12h9.582c.154-.754.296-1.396.517-2h-12.099v16h20v-12.176c-.641.772-1.272 1.24-2 1.615z" />
</svg>
);
export const FlipHorizontalIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<g
transform="translate(12.000000, 12.000000) rotate(270.000000) translate(-12.000000, -12.000000) translate(1.000000, 1.000000)"
fillRule="nonzero"
>
<path d="M2.2,2.22222222 L12.87,7.77777778 L2.2,7.77777778 L2.2,2.22222222 M2.2,0 C0.99,0 0,0.888888889 0,2.22222222 L0,10 L22,10 L3.08,0.222222222 C2.75,0.111111111 2.53,0 2.2,0 L2.2,0 Z" />
<path d="M0,12 L0,19.7882151 C0,21.4571184 1.65,22.4584603 3.08,21.790899 L22,12 L0,12 Z" />
</g>
</svg>
);
export const FlipVerticalIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<g transform="translate(1.000000, 1.000000)" fillRule="nonzero">
<path d="M2.2,2.22222222 L12.87,7.77777778 L2.2,7.77777778 L2.2,2.22222222 M2.2,0 C0.99,0 0,0.888888889 0,2.22222222 L0,10 L22,10 L3.08,0.222222222 C2.75,0.111111111 2.53,0 2.2,0 L2.2,0 Z" />
<path d="M0,12 L0,19.7882151 C0,21.4571184 1.65,22.4584603 3.08,21.790899 L22,12 L0,12 Z" />
</g>
</svg>
);
export const SendToFrontIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<g fillRule="evenodd">
<path d="M20,7 C21.1045695,7 22,7.8954305 22,9 L22,20 C22,21.1045695 21.1045695,22 20,22 L9,22 C7.8954305,22 7,21.1045695 7,20 L7,9 C7,7.8954305 7.8954305,7 9,7 L20,7 Z M20,9 L9,9 L9,20 L20,20 L20,9 Z" />
<rect id="Rectangle" x="2" y="2" width="15" height="15" rx="2" />
</g>
</svg>
);
export const SendToBackIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<g fillRule="evenodd">
<path d="M20,7 C21.1045695,7 22,7.8954305 22,9 L22,20 C22,21.1045695 21.1045695,22 20,22 L9,22 C7.8954305,22 7,21.1045695 7,20 L7,15 L15,15 L15,7 L20,7 Z" />
<path d="M15,2 C16.1045695,2 17,2.8954305 17,4 L17,15 C17,16.1045695 16.1045695,17 15,17 L4,17 C2.8954305,17 2,16.1045695 2,15 L2,4 C2,2.8954305 2.8954305,2 4,2 L15,2 Z M15,4 L4,4 L4,15 L15,15 L15,4 Z" />
</g>
</svg>
);
export const OnionSkinIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<g fillRule="evenodd">
<path
d="M14,5 C18.9705627,5 23,9.02943725 23,14 C23,18.9705627 18.9705627,23 14,23 C9.02943725,23 5,18.9705627 5,14 C5,9.02943725 9.02943725,5 14,5 Z M8,1 C10.3799145,1 12.4824309,2.18768282 13.7471757,4.00267509 L14,4 C13.1029574,4 12.2335019,4.11811414 11.4063372,4.33963865 C10.5141711,3.50880379 9.31650429,3 8,3 C5.23857625,3 3,5.23857625 3,8 C3,9.31650429 3.50880379,10.5141711 4.34049558,11.4070846 C4.139084,12.1552012 4.02328838,12.9387284 4.00316272,13.7460077 C2.18768282,12.4824309 1,10.3799145 1,8 C1,4.13400675 4.13400675,1 8,1 Z"
fillRule="nonzero"
/>
</g>
</svg>
);
export const GridIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<g fillRule="evenodd">
<path
d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M5,19 L2,19 L2,22 L5,22 L5,19 Z M17,19 L13,19 L13,22 L17,22 L17,19 Z M11,19 L7,19 L7,22 L11,22 L11,19 Z M22,19 L19,19 L19,22 L22,22 L22,19 Z M5,13 L2,13 L2,17 L5,17 L5,13 Z M11,13 L7,13 L7,17 L11,17 L11,13 Z M17,13 L13,13 L13,17 L17,17 L17,13 Z M22,13 L19,13 L19,17 L22,17 L22,13 Z M5,7 L2,7 L2,11 L5,11 L5,7 Z M17,7 L13,7 L13,11 L17,11 L17,7 Z M11,7 L7,7 L7,11 L11,11 L11,7 Z M22,7 L19,7 L19,11 L22,11 L22,7 Z M5,2 L2,2 L2,5 L5,5 L5,2 Z M11,2 L7,2 L7,5 L11,5 L11,2 Z M17,2 L13,2 L13,5 L17,5 L17,2 Z M22,2 L19,2 L19,5 L22,5 L22,2 Z"
fillRule="nonzero"
/>
</g>
</svg>
);
export const AnimationIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 1v22h24v-22h-24zm4 20h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2v-2h2v2zm14 16h-12v-8h12v8zm0-10h-12v-8h12v8zm4 10h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2v-2h2v2z" />
</svg>
);
export const BackgroundIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M5 8.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5c0 .829-.672 1.5-1.5 1.5s-1.5-.671-1.5-1.5zm9 .5l-2.519 4-2.481-1.96-4 5.96h14l-5-8zm8-4v14h-20v-14h20zm2-2h-24v18h24v-18z" />
</svg>
);
export const SoundIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M9 18h-7v-12h7v12zm2-12v12l11 6v-24l-11 6z" />{" "}
</svg>
);
export const SongIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M 22.050781 0.0703125 L 7.050781 4.5 C 6.425781 4.695312 6 5.273438 6 5.929688 L 6 18.183594 C 5.507812 18.066406 5.003906 18.003906 4.5 18 C 2.015625 18 0 19.34375 0 21 C 0 22.65625 2.015625 24 4.5 24 C 6.984375 24 9 22.65625 9 21 L 9 10.046875 L 21 6.53125 L 21 15.183594 C 20.507812 15.066406 20.003906 15.003906 19.5 15 C 17.015625 15 15 16.34375 15 18 C 15 19.65625 17.015625 21 19.5 21 C 21.984375 21 24 19.65625 24 18 L 24 1.5 C 24 1.023438 23.773438 0.574219 23.386719 0.292969 C 23 0.0078125 22.503906 -0.0742188 22.050781 0.0703125 Z M 22.050781 0.0703125 " />
</svg>
);
export const DutyIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M 17.699219 17.8125 L 12.300781 17.8125 C 11.636719 17.8125 11.101562 17.28125 11.101562 16.625 L 11.101562 2.96875 L 6.898438 2.96875 L 6.898438 9.203125 C 6.898438 9.859375 6.363281 10.390625 5.699219 10.390625 L 0.300781 10.390625 C 0.132812 10.390625 0 10.257812 0 10.09375 L 0 8.90625 C 0 8.742188 0.132812 8.609375 0.300781 8.609375 L 5.101562 8.609375 L 5.101562 2.375 C 5.101562 1.71875 5.636719 1.1875 6.300781 1.1875 L 11.699219 1.1875 C 12.363281 1.1875 12.898438 1.71875 12.898438 2.375 L 12.898438 16.03125 L 17.101562 16.03125 L 17.101562 9.796875 C 17.101562 9.140625 17.636719 8.609375 18.300781 8.609375 L 23.699219 8.609375 C 23.867188 8.609375 24 8.742188 24 8.90625 L 24 10.09375 C 24 10.257812 23.867188 10.390625 23.699219 10.390625 L 18.898438 10.390625 L 18.898438 16.625 C 18.898438 17.28125 18.363281 17.8125 17.699219 17.8125 Z M 17.699219 17.8125" />
</svg>
);
export const WaveIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M 22.582031 9.6875 L 22.03125 9.523438 C 21.734375 9.433594 21.425781 9.601562 21.328125 9.902344 C 20.585938 12.238281 18.386719 16.03125 16.675781 16.03125 C 14.804688 16.03125 13.535156 12.550781 12.308594 9.1875 C 10.875 5.253906 9.390625 1.1875 6.324219 1.1875 C 3.132812 1.1875 0.636719 6.621094 0.0273438 8.5625 C -0.0195312 8.714844 -0.00390625 8.878906 0.0703125 9.019531 C 0.140625 9.164062 0.265625 9.265625 0.417969 9.3125 L 0.96875 9.476562 C 1.265625 9.566406 1.574219 9.398438 1.671875 9.097656 C 2.414062 6.761719 4.613281 2.96875 6.324219 2.96875 C 8.195312 2.96875 9.464844 6.449219 10.691406 9.8125 C 12.125 13.746094 13.609375 17.8125 16.675781 17.8125 C 19.867188 17.8125 22.363281 12.378906 22.972656 10.4375 C 23.019531 10.285156 23.003906 10.121094 22.929688 9.980469 C 22.859375 9.835938 22.734375 9.734375 22.582031 9.6875 Z M 22.582031 9.6875 " />
</svg>
);
export const NoiseIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M 22.5 0 L 1.5 0 C 0.671875 0 0 0.671875 0 1.5 L 0 22.5 C 0 23.328125 0.671875 24 1.5 24 L 22.5 24 C 23.328125 24 24 23.328125 24 22.5 L 24 1.5 C 24 0.671875 23.328125 0 22.5 0 Z M 21.75 21.75 L 2.25 21.75 L 2.25 2.25 L 21.75 2.25 Z M 20.25 20.25 L 20.25 16.125 L 16.125 16.125 L 16.125 20.25 Z M 20.25 12 L 20.25 7.875 L 16.125 7.875 L 16.125 12 Z M 3.75 3.75 L 3.75 7.875 L 7.875 7.875 L 7.875 3.75 Z M 16.125 3.75 L 12 3.75 L 12 7.875 L 16.125 7.875 Z M 7.875 20.25 L 12 20.25 L 12 16.125 L 7.875 16.125 Z M 12 7.875 L 7.875 7.875 L 7.875 12 L 12 12 Z M 12 16.125 L 16.125 16.125 L 16.125 12 L 12 12 Z M 7.875 12 L 3.75 12 L 3.75 16.125 L 7.875 16.125 Z M 7.875 12" />
</svg>
);
export const AudioOnIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M9 18h-7v-12h7v12zm2-12v12l11 6v-24l-11 6z" />
</svg>
);
export const AudioOffIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M22 1.269l-18.455 22.731-1.545-1.269 3.841-4.731h-1.827v-10h4.986v6.091l2.014-2.463v-3.628l5.365-2.981 4.076-5.019 1.545 1.269zm-10.986 15.926v.805l8.986 5v-16.873l-8.986 11.068z" />
</svg>
);
export const PianoIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0 0H22C23 0 24 1 24 2V22C24 23 23 24 22 24H0V0ZM22 2H2V4H14V6H22V2ZM22 8H14V10H2V12H14V14H22V8ZM14 18V16H22V22H2V18H14Z"
/>
</svg>
);
export const PianoInverseIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22 0H0V24H22C23 24 24 23 24 22V16H14V18H2V16V14V12H14V14H24V8H14V10H2V4H14V6H24V2C24 1 23 0 22 0Z"
/>
</svg>
);
export const TrackerIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M22.5 0H1.5C0.671875 0 0 0.671875 0 1.5V22.5C0 23.3281 0.671875 24 1.5 24H22.5C23.3281 24 24 23.3281 24 22.5V1.5C24 0.671875 23.3281 0 22.5 0ZM21.75 21.75H2.25V2.25H21.75V21.75Z" />
<circle r="2" transform="matrix(-1 0 0 1 18 17)" />
<circle r="2" transform="matrix(-1 0 0 1 12 17)" />
<circle r="2" transform="matrix(-1 0 0 1 6 17)" />
</svg>
);
export const SelectionIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M11 23v-2h-4v2h4zm8-20h3v2h2v-4h-5v2zm-19 14h2v-4h-2v4zm0-6h2v-4h-2v4zm2-6v-2h3v-2h-5v4h2zm22 2h-2v4h2v-4zm0 6h-2v4h2v-4zm-2 6v2h-3v2h5v-4h-2zm-17 2h-3v-2h-2v4h5v-2zm12 2v-2h-4v2h4zm-6-20v-2h-4v2h4zm6 0v-2h-4v2h4z" />
</svg>
);
export const SaveIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M14 3h2.997v5h-2.997v-5zm9 1v20h-22v-24h17.997l4.003 4zm-17 5h12v-7h-12v7zm14 4h-16v9h16v-9z" />
</svg>
);
export const CloneIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M18 6v-6h-18v18h6v6h18v-18h-6zm-12 10h-4v-14h14v4h-10v10zm16 6h-14v-14h14v14zm-3-8h-3v-3h-2v3h-3v2h3v3h2v-3h3v-2z" />
</svg>
);
export const TargetIcon = ({
className,
style,
}: {
className?: string;
style?: CSSProperties;
}) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
className={className}
style={style}
>
<path d="M24 11h-2.051c-.469-4.725-4.224-8.48-8.949-8.95v-2.05h-2v2.05c-4.725.47-8.48 4.225-8.949 8.95h-2.051v2h2.051c.469 4.725 4.224 8.48 8.949 8.95v2.05h2v-2.05c4.725-.469 8.48-4.225 8.949-8.95h2.051v-2zm-11 8.931v-3.931h-2v3.931c-3.611-.454-6.478-3.32-6.931-6.931h3.931v-2h-3.931c.453-3.611 3.32-6.477 6.931-6.931v3.931h2v-3.931c3.611.454 6.478 3.319 6.931 6.931h-3.931v2h3.931c-.453 3.611-3.32 6.477-6.931 6.931zm1-7.931c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2z" />
</svg>
);
export const ExportIcon = () => (
<svg
width="24"
height="24"
fillRule="evenodd"
clipRule="evenodd"
viewBox="0 0 24 24"
>
<path d="M16 2v7h-2v-5h-12v16h12v-5h2v7h-16v-20h16zm2 9v-4l6 5-6 5v-4h-10v-2h10z" />
</svg>
);
export const PlayIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M3 22v-20l18 10-18 10z" />
</svg>
);
export const PauseIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M11 22h-4v-20h4v20zm6-20h-4v20h4v-20z" />
</svg>
);
export const StopIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M2 2h20v20h-20z" />
</svg>
);
export const DebugIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M24 20.586l-2.831-2.832c.522-.79.831-1.735.831-2.754 0-2.761-2.238-5-5-5s-5 2.239-5 5 2.238 5 5 5c1.019 0 1.964-.309 2.755-.832l2.831 2.832 1.414-1.414zm-10-5.586c0-1.654 1.346-3 3-3s3 1.346 3 3-1.346 3-3 3-3-1.346-3-3zm-8.105-11.827c0-.647.535-1.173 1.193-1.173.784 0 1.354.736 1.149 1.48-.077.281-.035.58.117.829.333.553.902.895 1.646.899.733-.004 1.31-.341 1.647-.898.151-.25.193-.548.116-.829-.205-.744.364-1.481 1.149-1.481.66 0 1.191.526 1.191 1.173 0 .564-.4 1.029-.932 1.146-.267.059-.498.224-.641.456-.508.848.162 1.599.777 2.354-1.008.468-2.102.705-3.307.705-1.222 0-2.309-.232-3.312-.701.623-.767 1.295-1.501.779-2.358-.141-.231-.372-.397-.64-.456-.53-.117-.932-.582-.932-1.146zm4.105 11.827c0 2.432 1.249 4.577 3.137 5.832-.854.59-1.904 1.03-3.137 1.168-2.492-.278-4.243-1.788-5.113-3.286-.177-.304-.494-.329-.751-.216l-2.133.952c-.441.196-.962.002-1.162-.433-.2-.435-.004-.947.438-1.144l2.017-.898c.436-.195.719-.611.625-1.217-.088-.571-.577-.882-1.054-.882h-1.989c-.486 0-.878-.386-.878-.863 0-.478.392-.865.878-.865h2.002c.46 0 .941-.294 1.03-.925.068-.483-.232-.902-.645-1.062l-1.86-.723c-.45-.175-.672-.676-.494-1.12.178-.444.689-.663 1.139-.487l1.913.742c.245.095.594.064.784-.365.15-.339.32-.655.501-.954 1.423.831 2.99 1.246 4.752 1.246 1.412 0 2.723-.297 3.933-.848l.04.056c-2.344 1.131-3.973 3.519-3.973 6.292z" />
</svg>
);
export const PlayStartIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M2 3H6V21H2V3Z" />
<path d="M22 12L7 21L7 3L22 12Z" />
</svg>
);
export const NextIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M19 12l-18 12v-24l18 12zm4-11h-4v22h4v-22z" />
</svg>
);
export const PrevIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path
transform="rotate(180 12,12)"
d="M19 12l-18 12v-24l18 12zm4-11h-4v22h4v-22z"
/>
</svg>
);
export const JigsawIcon = () => (
<svg width="28" height="24" viewBox="0 0 28 24">
<path d="M3 24v-6.075c0-1.315 1-1.663 1.813-.847.399.398.73.922 1.708.922 1.087 0 2.479-1.108 2.479-3s-1.392-3-2.479-3c-.979 0-1.31.524-1.708.922-.813.816-1.813.469-1.813-.847v-6.075h6.075c1.315 0 1.663-1 .847-1.813-.398-.399-.922-.73-.922-1.708 0-1.087 1.108-2.479 3-2.479s3 1.392 3 2.479c0 .978-.524 1.309-.922 1.708-.816.813-.469 1.813.847 1.813h6.075v18h-18z" />
</svg>
);
export const PlusIcon = ({ title }: { title?: string }) => (
<svg width="24" height="24" viewBox="0 0 24 24">
{title && <title>{title}</title>}
<path d="M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z" />
</svg>
);
export const InstantiateIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm7 14h-5v5h-4v-5h-5v-4h5v-5h4v5h5v4z" />
</svg>
);
export const PinIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M11 17h2v5l-2 2v-7zm3.571-12c0-2.903 2.36-3.089 2.429-5h-10c.068 1.911 2.429 2.097 2.429 5 0 3.771-3.429 3.291-3.429 10h12c0-6.709-3.429-6.229-3.429-10z" />
</svg>
);
export const HelpIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z" />
</svg>
);
export const ResizeIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M6.426 10.668l-3.547-3.547-2.879 2.879v-10h10l-2.879 2.879 3.547 3.547-4.242 4.242zm11.148 2.664l3.547 3.547 2.879-2.879v10h-10l2.879-2.879-3.547-3.547 4.242-4.242zm-6.906 4.242l-3.547 3.547 2.879 2.879h-10v-10l2.879 2.879 3.547-3.547 4.242 4.242zm2.664-11.148l3.547-3.547-2.879-2.879h10v10l-2.879-2.879-3.547 3.547-4.242-4.242z" />
</svg>
);
export const MinusIcon = ({ title }: { title?: string }) => (
<svg width="24" height="24" viewBox="0 0 24 24">
{title && <title>{title}</title>}
<path d="M24 9h-24v6h24v-6z" />
</svg>
);
export const CloseIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" />
</svg>
);
export const SelectIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M4 0l16 12.279-6.78 1.138 4.256 8.676-3.902 1.907-4.281-8.758-5.293 4.581z" />
</svg>
);
export const PencilIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M18.363 8.464l1.433 1.431-12.67 12.669-7.125 1.436 1.439-7.127 12.665-12.668 1.431 1.431-12.255 12.224-.726 3.584 3.584-.723 12.224-12.257zm-.056-8.464l-2.815 2.817 5.691 5.692 2.817-2.821-5.693-5.688zm-12.318 18.718l11.313-11.316-.705-.707-11.313 11.314.705.709z" />
</svg>
);
export const PersonIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M19.5 15c-2.483 0-4.5 2.015-4.5 4.5s2.017 4.5 4.5 4.5 4.5-2.015 4.5-4.5-2.017-4.5-4.5-4.5zm2.5 5h-2v2h-1v-2h-2v-1h2v-2h1v2h2v1zm-7.18 4h-14.815l-.005-1.241c0-2.52.199-3.975 3.178-4.663 3.365-.777 6.688-1.473 5.09-4.418-4.733-8.729-1.35-13.678 3.732-13.678 6.751 0 7.506 7.595 3.64 13.679-1.292 2.031-2.64 3.63-2.64 5.821 0 1.747.696 3.331 1.82 4.5z" />
</svg>
);
export const LockIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M18 10v-4c0-3.313-2.687-6-6-6s-6 2.687-6 6v4h-3v14h18v-14h-3zm-10 0v-4c0-2.206 1.794-4 4-4s4 1.794 4 4v4h-8z" />
</svg>
);
export const LockOpenIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M8 10v-4c0-2.206 1.794-4 4-4 2.205 0 4 1.794 4 4v1h2v-1c0-3.313-2.687-6-6-6s-6 2.687-6 6v4h-3v14h18v-14h-13z" />
</svg>
);
export const BrickIcon = () => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M10 18v5h-10v-5h10zm10 0v5h-9v-5h9zm4-6v5h-7v-5h7zm-17 0v5h-7v-5h7zm9 0v5h-8v-5h8zm-6-6v5h-10v-5h10zm10 0v5h-9v-5h9zm-13-5v4h-7v-4h7zm8 0v4h-7v-4h7z" />
</svg>
);
export const PaintIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M8.997 13.985c.01 1.104-.88 2.008-1.986 2.015-1.105.009-2.005-.88-2.011-1.984-.01-1.105.879-2.005 1.982-2.016 1.106-.007 2.009.883 2.015 1.985zm-.978-3.986c-1.104.008-2.008-.88-2.015-1.987-.009-1.103.877-2.004 1.984-2.011 1.102-.01 2.008.877 2.012 1.982.012 1.107-.88 2.006-1.981 2.016zm7.981-4.014c.004 1.102-.881 2.008-1.985 2.015-1.106.01-2.008-.879-2.015-1.983-.011-1.106.878-2.006 1.985-2.015 1.101-.006 2.005.881 2.015 1.983zm-12 15.847c4.587.38 2.944-4.492 7.188-4.537l1.838 1.534c.458 5.537-6.315 6.772-9.026 3.003zm14.065-7.115c1.427-2.239 5.846-9.748 5.846-9.748.353-.623-.429-1.273-.975-.813 0 0-6.572 5.714-8.511 7.525-1.532 1.432-1.539 2.086-2.035 4.447l1.68 1.4c2.227-.915 2.868-1.04 3.995-2.811zm-12.622 4.806c-2.084-1.82-3.42-4.479-3.443-7.447-.044-5.51 4.406-10.03 9.92-10.075 3.838-.021 6.479 1.905 6.496 3.447l1.663-1.456c-1.01-2.223-4.182-4.045-8.176-3.992-6.623.055-11.955 5.466-11.903 12.092.023 2.912 1.083 5.57 2.823 7.635.958.492 2.123.329 2.62-.204zm12.797-1.906c1.059 1.97-1.351 3.37-3.545 3.992-.304.912-.803 1.721-1.374 2.311 5.255-.591 9.061-4.304 6.266-7.889-.459.685-.897 1.197-1.347 1.586z" />
</svg>
);
export const PaintBucketIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M21.143 9.667c-.733-1.392-1.914-3.05-3.617-4.753-2.977-2.978-5.478-3.914-6.785-3.914-.414 0-.708.094-.86.246l-1.361 1.36c-1.899-.236-3.42.106-4.294.983-.876.875-1.164 2.159-.792 3.523.492 1.806 2.305 4.049 5.905 5.375.038.323.157.638.405.885.588.588 1.535.586 2.121 0s.588-1.533.002-2.119c-.588-.587-1.537-.588-2.123-.001l-.17.256c-2.031-.765-3.395-1.828-4.232-2.9l3.879-3.875c.496 2.73 6.432 8.676 9.178 9.178l-7.115 7.107c-.234.153-2.798-.316-6.156-3.675-3.393-3.393-3.175-5.271-3.027-5.498l1.859-1.856c-.439-.359-.925-1.103-1.141-1.689l-2.134 2.131c-.445.446-.685 1.064-.685 1.82 0 1.634 1.121 3.915 3.713 6.506 2.764 2.764 5.58 4.243 7.432 4.243.648 0 1.18-.195 1.547-.562l8.086-8.078c.91.874-.778 3.538-.778 4.648 0 1.104.896 1.999 2 1.999 1.105 0 2-.896 2-2 0-3.184-1.425-6.81-2.857-9.34zm-16.209-5.371c.527-.53 1.471-.791 2.656-.761l-3.209 3.206c-.236-.978-.049-1.845.553-2.445zm9.292 4.079l-.03-.029c-1.292-1.292-3.803-4.356-3.096-5.063.715-.715 3.488 1.521 5.062 3.096.862.862 2.088 2.247 2.937 3.458-1.717-1.074-3.491-1.469-4.873-1.462z" />
</svg>
);
export const SquareIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M24 0h-24v24h24v-24z" />
</svg>
);
export const SquareIconSmall = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M20 4h-16v16h16v-16z" />
</svg>
);
export const EyeOpenIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 3c-2.21 0-4 1.791-4 4s1.79 4 4 4c2.209 0 4-1.791 4-4s-1.791-4-4-4zm-.004 3.999c-.564.564-1.479.564-2.044 0s-.565-1.48 0-2.044c.564-.564 1.479-.564 2.044 0s.565 1.479 0 2.044z" />
</svg>
);
export const EyeClosedIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M19.604 2.562l-3.346 3.137c-1.27-.428-2.686-.699-4.243-.699-7.569 0-12.015 6.551-12.015 6.551s1.928 2.951 5.146 5.138l-2.911 2.909 1.414 1.414 17.37-17.035-1.415-1.415zm-6.016 5.779c-3.288-1.453-6.681 1.908-5.265 5.206l-1.726 1.707c-1.814-1.16-3.225-2.65-4.06-3.66 1.493-1.648 4.817-4.594 9.478-4.594.927 0 1.796.119 2.61.315l-1.037 1.026zm-2.883 7.431l5.09-4.993c1.017 3.111-2.003 6.067-5.09 4.993zm13.295-4.221s-4.252 7.449-11.985 7.449c-1.379 0-2.662-.291-3.851-.737l1.614-1.583c.715.193 1.458.32 2.237.32 4.791 0 8.104-3.527 9.504-5.364-.729-.822-1.956-1.99-3.587-2.952l1.489-1.46c2.982 1.9 4.579 4.327 4.579 4.327z" />
</svg>
);
export const ArrowIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M21 12l-18 12v-24z" />
</svg>
);
export const StepIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M16 8v-4l8 8-8 8v-4h-5v-8h5zm-7 0h-2v8h2v-8zm-4.014 0h-1.986v8h1.986v-8zm-3.986 0h-1v8h1v-8z" />
</svg>
);
export const ArrowMoveIcon = ({ style }: { style?: CSSProperties }) => (
<svg width="24" height="24" viewBox="0 0 24 24" style={style}>
<path d="M16 8V4L24 12L16 20V16H12V8H16ZM10 8H6V16H10V8ZM4 8H0.0139771V16H4V8Z" />
</svg>
);
export const ArrowIdleIcon = ({ style }: { style?: CSSProperties }) => (
<svg width="24" height="24" viewBox="0 0 24 24" style={style}>
<path d="m16,8l0,-4l8,8l-8,8l0,-4l-16,0l0,-8l16,0z" />
</svg>
);
export const ArrowJumpIcon = ({ style }: { style?: CSSProperties }) => (
<svg width="24" height="24" viewBox="0 0 24 24" style={style}>
<path d="M16 15v4l8-8.035-8-7.965v4s-13.277 2.144-16 14c5.796-6.206 16-6 16-6z" />
</svg>
);
export const SearchIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z" />
</svg>
);
export const PriorityLowIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M 10.649 6.493 C 10.569 5.692 11.199 5 12 5 C 12.801 5 13.431 5.692 13.351 6.493 L 12.55 14.503 C 12.521 14.785 12.284 15 12 15 C 11.716 15 11.479 14.785 11.45 14.502 L 10.649 6.493 Z M 12 19.25 C 11.31 19.25 10.75 18.69 10.75 18 C 10.75 17.31 11.31 16.75 12 16.75 C 12.69 16.75 13.25 17.31 13.25 18 C 13.25 18.69 12.69 19.25 12 19.25 Z" />
</svg>
);
export const PriorityMediumIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M 8.17 6.493 C 8.09 5.692 8.72 5 9.521 5 C 10.322 5 10.952 5.692 10.872 6.493 L 10.071 14.503 C 10.042 14.785 9.805 15 9.521 15 C 9.237 15 9 14.785 8.971 14.502 L 8.17 6.493 Z M 9.521 19.25 C 8.831 19.25 8.271 18.69 8.271 18 C 8.271 17.31 8.831 16.75 9.521 16.75 C 10.211 16.75 10.771 17.31 10.771 18 C 10.771 18.69 10.211 19.25 9.521 19.25 Z" />
<path d="M 13.128 6.493 C 13.048 5.692 13.678 5 14.479 5 C 15.28 5 15.91 5.692 15.83 6.493 L 15.029 14.503 C 15 14.785 14.763 15 14.479 15 C 14.195 15 13.958 14.785 13.929 14.502 L 13.128 6.493 Z M 14.479 19.25 C 13.789 19.25 13.229 18.69 13.229 18 C 13.229 17.31 13.789 16.75 14.479 16.75 C 15.169 16.75 15.729 17.31 15.729 18 C 15.729 18.69 15.169 19.25 14.479 19.25 Z" />
</svg>
);
export const PriorityHighIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M 5.68 6.493 C 5.6 5.692 6.23 5 7.031 5 C 7.832 5 8.462 5.692 8.382 6.493 L 7.581 14.503 C 7.552 14.785 7.315 15 7.031 15 C 6.747 15 6.51 14.785 6.481 14.502 L 5.68 6.493 Z M 7.031 19.25 C 6.341 19.25 5.781 18.69 5.781 18 C 5.781 17.31 6.341 16.75 7.031 16.75 C 7.721 16.75 8.281 17.31 8.281 18 C 8.281 18.69 7.721 19.25 7.031 19.25 Z" />
<path d="M 10.638 6.493 C 10.558 5.692 11.188 5 11.989 5 C 12.79 5 13.42 5.692 13.34 6.493 L 12.539 14.503 C 12.51 14.785 12.273 15 11.989 15 C 11.705 15 11.468 14.785 11.439 14.502 L 10.638 6.493 Z M 11.989 19.25 C 11.299 19.25 10.739 18.69 10.739 18 C 10.739 17.31 11.299 16.75 11.989 16.75 C 12.679 16.75 13.239 17.31 13.239 18 C 13.239 18.69 12.679 19.25 11.989 19.25 Z" />
<path d="M 15.617 6.493 C 15.537 5.692 16.167 5 16.968 5 C 17.769 5 18.399 5.692 18.319 6.493 L 17.518 14.503 C 17.489 14.785 17.252 15 16.968 15 C 16.684 15 16.447 14.785 16.418 14.502 L 15.617 6.493 Z M 16.968 19.25 C 16.278 19.25 15.718 18.69 15.718 18 C 15.718 17.31 16.278 16.75 16.968 16.75 C 17.658 16.75 18.218 17.31 18.218 18 C 18.218 18.69 17.658 19.25 16.968 19.25 Z" />
</svg>
);
export const PriorityTileIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 0l-12 12 12 12 12-12-12-12zm-1 6h2v8h-2v-8zm1 12.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z" />
</svg>
);
export const EraserIcon = () => (
<svg
width="24"
height="24"
fillRule="evenodd"
clipRule="evenodd"
viewBox="0 0 24 24"
>
<path d="M5.662 23l-5.369-5.365c-.195-.195-.293-.45-.293-.707 0-.256.098-.512.293-.707l14.929-14.928c.195-.194.451-.293.707-.293.255 0 .512.099.707.293l7.071 7.073c.196.195.293.451.293.708 0 .256-.097.511-.293.707l-11.216 11.219h5.514v2h-12.343zm3.657-2l-5.486-5.486-1.419 1.414 4.076 4.072h2.829zm.456-11.429l-4.528 4.528 5.658 5.659 4.527-4.53-5.657-5.657z" />
</svg>
);
export const WandIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M4.908 2.081l-2.828 2.828 19.092 19.091 2.828-2.828-19.092-19.091zm2.121 6.363l-3.535-3.535 1.414-1.414 3.535 3.535-1.414 1.414zm1.731-5.845c1.232.376 2.197 1.341 2.572 2.573.377-1.232 1.342-2.197 2.573-2.573-1.231-.376-2.196-1.34-2.573-2.573-.375 1.232-1.34 2.197-2.572 2.573zm-5.348 6.954c-.498 1.635-1.777 2.914-3.412 3.413 1.635.499 2.914 1.777 3.412 3.411.499-1.634 1.778-2.913 3.412-3.411-1.634-.5-2.913-1.778-3.412-3.413zm9.553-3.165c.872.266 1.553.948 1.819 1.82.266-.872.948-1.554 1.819-1.82-.871-.266-1.553-.948-1.819-1.82-.266.871-.948 1.554-1.819 1.82zm4.426-6.388c-.303.994-1.082 1.772-2.075 2.076.995.304 1.772 1.082 2.077 2.077.303-.994 1.082-1.772 2.074-2.077-.992-.303-1.772-1.082-2.076-2.076z" />
</svg>
);
export const ActorIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M19 7.001c0 3.865-3.134 7-7 7s-7-3.135-7-7c0-3.867 3.134-7.001 7-7.001s7 3.134 7 7.001zm-1.598 7.18c-1.506 1.137-3.374 1.82-5.402 1.82-2.03 0-3.899-.685-5.407-1.822-4.072 1.793-6.593 7.376-6.593 9.821h24c0-2.423-2.6-8.006-6.598-9.819z" />
</svg>
);
export const TriggerIcon = () => (
<svg
width="24"
height="24"
fillRule="evenodd"
clipRule="evenodd"
viewBox="0 0 24 24"
>
<path d="M12 .001l12 12-12 12-12-12 12-12z" />
</svg>
);
export const SpriteIcon = () => (
<svg
width="24"
height="24"
viewBox="0 -4 24 28"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M24 0v24h-24v-24h24zm-6.118 16.064c-2.293-.529-4.427-.993-3.394-2.945 3.146-5.942.834-9.119-2.488-9.119-3.388 0-5.643 3.299-2.488 9.119 1.064 1.963-1.15 2.427-3.394 2.945-2.048.473-2.124 1.49-2.118 3.269l.004.667h15.993l.003-.646c.007-1.792-.062-2.815-2.118-3.29z" />
</svg>
);
export const TriangleIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M24 22h-24l12-20z" />
</svg>
);
export const SceneIcon = () => (
<svg
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M1.004 5.998l10.996-5.998 10.99 6.06-10.985 5.86-11.001-5.922zm11.996 7.675v10.327l10-5.362v-10.326l-10 5.361zm-2 0l-10-5.411v10.376l10 5.362v-10.327z" />
</svg>
);
export const CodeIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M5.485 3.567l6.488-3.279c.448-.199.904-.288 1.344-.288 1.863 0 3.477 1.629 3.287 3.616l-7.881 4.496c.118-2.088-1.173-4.035-3.238-4.545zm15.857 8.996c-.928-1.137-4.549-4.567-5.762-6.045l-8.855 5.069-1.083-1.354c1.16-.757 1.431-2.619.632-3.799-1.383-2.042-4.274-1.037-4.274 1.129 0 .653.263 1.412.909 2.225.018.023 7.109 8.25 8.531 9.873.768.874 1.081 1.8 1.061 2.71 8.836-5.572 7.833-4.958 7.996-5.065.98-.643 1.503-1.747 1.503-2.827 0-.691-.214-1.372-.658-1.916zm-13.562 5.937c-2.148 1.09-2.38 3.252-1.222 4.598.545.632 1.265.902 1.943.902 1.476 0 2.821-1.337 1.567-2.877-1.3-1.599-2.288-2.623-2.288-2.623z" />
</svg>
);
export const NumberIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M22.548 9l.452-2h-5.364l1.364-6h-2l-1.364 6h-5l1.364-6h-2l-1.364 6h-6.184l-.452 2h6.182l-1.364 6h-5.36l-.458 2h5.364l-1.364 6h2l1.364-6h5l-1.364 6h2l1.364-6h6.185l.451-2h-6.182l1.364-6h5.366zm-8.73 6h-5l1.364-6h5l-1.364 6z" />
</svg>
);
export const ExpressionIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M0.445923 0H23.5541V5.65642H19.4566V4.09756H9.22323L15.8426 12L9.22323 19.9024H19.4567V18.3436H23.5543V24H0.445923L10.4974 12L0.445923 0Z" />
</svg>
);
export const CrossIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M23 20.168l-8.185-8.187 8.185-8.174-2.832-2.807-8.182 8.179-8.176-8.179-2.81 2.81 8.186 8.196-8.186 8.184 2.81 2.81 8.203-8.192 8.18 8.192z" />{" "}
</svg>
);
export const DivideIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M21 1H16L3 22.5H8L21 1Z" />
</svg>
);
export const ModuloIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M21 1H16L3 22.5H8L21 1Z" />
<circle cx="2" cy="5" r="4" />
<circle cx="22" cy="19" r="4" />
</svg>
);
export const NotIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<rect x="9" y="0" width="6" height="15" rx="4"></rect>
<circle cx="12" cy="20" r="3"></circle>
</svg>
);
export const DiceIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5 1C2.79086 1 1 2.79086 1 5V19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5ZM6.5 9.25C8.01878 9.25 9.25 8.01878 9.25 6.5C9.25 4.98122 8.01878 3.75 6.5 3.75C4.98122 3.75 3.75 4.98122 3.75 6.5C3.75 8.01878 4.98122 9.25 6.5 9.25ZM20.25 6.5C20.25 8.01878 19.0188 9.25 17.5 9.25C15.9812 9.25 14.75 8.01878 14.75 6.5C14.75 4.98122 15.9812 3.75 17.5 3.75C19.0188 3.75 20.25 4.98122 20.25 6.5ZM6.5 20.25C8.01878 20.25 9.25 19.0188 9.25 17.5C9.25 15.9812 8.01878 14.75 6.5 14.75C4.98122 14.75 3.75 15.9812 3.75 17.5C3.75 19.0188 4.98122 20.25 6.5 20.25ZM20.25 17.5C20.25 19.0188 19.0188 20.25 17.5 20.25C15.9812 20.25 14.75 19.0188 14.75 17.5C14.75 15.9812 15.9812 14.75 17.5 14.75C19.0188 14.75 20.25 15.9812 20.25 17.5ZM12 14.75C13.5188 14.75 14.75 13.5188 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25C10.4812 9.25 9.25 10.4812 9.25 12C9.25 13.5188 10.4812 14.75 12 14.75Z"
/>
</svg>
);
export const CompassIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M14.145 8.633l-2.145-8.633-2.148 8.636c-.572.366-1.034.877-1.358 1.477l-8.494 1.887 8.494 1.887c.324.6.786 1.111 1.358 1.477l2.148 8.636 2.157-8.64c.571-.367 1.03-.879 1.353-1.479l8.49-1.881-8.492-1.884c-.324-.603-.788-1.116-1.363-1.483zm-2.145 5.367c-1.104 0-2-.896-2-2s.896-2 2-2 2 .896 2 2-.896 2-2 2zm7 5l-3.43-2.186c.474-.352.893-.771 1.245-1.245l2.185 3.431zm-3.521-11.882l3.521-2.117-2.119 3.519c-.386-.542-.86-1.015-1.402-1.402zm-6.955 9.767l-3.524 2.115 2.118-3.521c.387.543.862 1.018 1.406 1.406zm-1.34-8.453l-2.184-3.431 3.431 2.184c-.474.352-.894.772-1.247 1.247z" />
</svg>
);
export const TrueIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M21.5 2H2.5V7H9V22H15V7H21.5V2Z" />
</svg>
);
export const FalseIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M18.5 2H6V22H12V14.5H17V10.5H12V6.5H18.5V2Z" />
</svg>
);
export const VariableIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M12.7148438,22.1757812 L12.714,20.229 L12.7800926,20.2258391 C13.6949267,20.1603492 14.530599,19.9802517 15.2871094,19.6855469 C16.2597656,19.3066406 17.0253906,18.7519531 17.5839844,18.0214844 C18.1425781,17.2910156 18.421875,16.40625 18.421875,15.3671875 L18.421875,15.34375 C18.421875,14.0625 18.0097656,13.0683594 17.1855469,12.3613281 C16.3613281,11.6542969 15.1484375,11.1210938 13.546875,10.7617188 L12.714,10.579 L12.714,6.513 L12.8085938,6.52539062 C13.0585938,6.56835938 13.2929688,6.6328125 13.5117188,6.71875 C13.9492188,6.890625 14.3046875,7.14257812 14.578125,7.47460938 C14.8515625,7.80664062 15.015625,8.21875 15.0703125,8.7109375 L15.0820312,8.734375 L18.1875,8.72265625 L18.1992188,8.7109375 C18.1601562,7.71875 17.8769531,6.85742188 17.3496094,6.12695312 C16.8222656,5.39648438 16.0996094,4.83203125 15.1816406,4.43359375 C14.5390625,4.1546875 13.8208789,3.97339844 13.0270898,3.88972656 L12.714,3.863 L12.7148438,1.890625 L11.3671875,1.890625 L11.367,3.856 L11.2021123,3.86429398 C10.3338638,3.9304591 9.54123264,4.11241319 8.82421875,4.41015625 C7.90234375,4.79296875 7.17578125,5.33984375 6.64453125,6.05078125 C6.11328125,6.76171875 5.84765625,7.609375 5.84765625,8.59375 L5.84765625,8.6171875 C5.84765625,9.875 6.25390625,10.8671875 7.06640625,11.59375 C7.87890625,12.3203125 9.05078125,12.859375 10.5820312,13.2109375 L11.367,13.384 L11.367,17.597 L11.2177136,17.5815529 C10.8854432,17.5394611 10.5876116,17.469308 10.3242188,17.3710938 C9.86328125,17.1992188 9.50195312,16.9511719 9.24023438,16.6269531 C8.97851562,16.3027344 8.80859375,15.921875 8.73046875,15.484375 L8.73046875,15.4609375 L5.6015625,15.4609375 L5.58984375,15.484375 C5.62890625,16.5078125 5.92773438,17.375 6.48632812,18.0859375 C7.04492188,18.796875 7.79882812,19.3359375 8.74804688,19.703125 C9.48632812,19.9887153 10.3014082,20.1632427 11.193287,20.2267072 L11.367,20.236 L11.3671875,22.1757812 L12.7148438,22.1757812 Z M11.367,10.268 L11.2575,10.2376563 C10.59,10.0464062 10.0875,9.82265625 9.75,9.56640625 C9.328125,9.24609375 9.1171875,8.84375 9.1171875,8.359375 L9.1171875,8.3359375 C9.1171875,7.9765625 9.2265625,7.65625 9.4453125,7.375 C9.6640625,7.09375 9.98828125,6.87109375 10.4179688,6.70703125 C10.6635045,6.61328125 10.9422034,6.54631696 11.2540657,6.50613839 L11.367,6.495 L11.367,10.268 Z M12.714,17.6 L12.714,13.69 L12.8831676,13.7330514 C13.6502131,13.9410834 14.201527,14.1713423 14.5371094,14.4238281 C14.9472656,14.7324219 15.1523438,15.15625 15.1523438,15.6953125 L15.1523438,15.71875 C15.1523438,16.109375 15.0371094,16.4492188 14.8066406,16.7382812 C14.5761719,17.0273438 14.2304688,17.2480469 13.7695312,17.4003906 C13.5061384,17.4874442 13.2032047,17.5496253 12.8607302,17.586934 L12.714,17.6 Z"
fillRule="nonzero"
></path>
</svg>
);
export const ConstantIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M8.01006 4.00992C7.8413 4.02005 7.48524 4.04874 7.44473 4.05549C7.42111 4.06055 7.34517 4.07236 7.27598 4.08249C6.58747 4.18374 5.90402 4.46893 5.40282 4.86719C5.23745 4.99713 4.88475 5.35151 4.73963 5.53376C4.67719 5.61307 4.61475 5.6907 4.60125 5.70589C4.58944 5.72108 4.56412 5.75483 4.54725 5.78183C4.53206 5.80714 4.5135 5.83245 4.50843 5.83752C4.48143 5.85945 4.27387 6.1784 4.12874 6.41971C3.97011 6.68466 3.69673 7.20779 3.57186 7.49129C3.53642 7.57061 3.49085 7.67355 3.4706 7.7208C3.35079 7.98743 3.07572 8.70632 3.04872 8.82444C3.04535 8.83794 3.03522 8.88688 3.0251 8.93076C2.97953 9.1282 2.9981 9.42014 3.06391 9.54839C3.13141 9.67664 3.33729 9.71715 3.69167 9.67158C3.8908 9.64458 4.03593 9.59733 4.15405 9.51633C4.25699 9.44714 4.38356 9.31551 4.45612 9.20414C4.47975 9.16701 4.50337 9.13326 4.50843 9.1282C4.5135 9.12314 4.5405 9.08601 4.5675 9.04382C4.59619 9.00163 4.62487 8.95944 4.63162 8.95101C4.63837 8.94088 4.689 8.87338 4.74131 8.79913C4.91175 8.55781 5.13451 8.29287 5.30832 8.12749C5.79602 7.65836 6.18246 7.45754 6.77816 7.36473C6.87604 7.34785 6.98404 7.3411 7.33167 7.32254C7.64218 7.30567 7.6928 7.30735 7.76368 7.33098C7.94256 7.39004 7.96787 7.49636 7.92568 8.02287C7.92062 8.08699 7.91387 8.19837 7.90881 8.26756C7.88012 8.69957 7.83793 9.25814 7.82443 9.3982C7.79068 9.74583 7.78055 9.84034 7.75862 10.0732C7.72655 10.3938 7.70124 10.6335 7.68943 10.7229C7.68436 10.76 7.67255 10.8512 7.66411 10.9254C7.65399 10.9997 7.63543 11.1482 7.62193 11.2545C7.60842 11.3608 7.58986 11.4941 7.58142 11.5498C7.57299 11.6055 7.5578 11.7084 7.54767 11.7776C7.52236 11.9497 7.48355 12.1944 7.45148 12.3767C7.4363 12.4594 7.42111 12.5471 7.41773 12.5708C7.4093 12.6146 7.34686 12.942 7.33336 13.0011C7.31986 13.0686 7.29286 13.2036 7.28611 13.2373C7.24561 13.4365 7.16967 13.7487 7.06504 14.1402C6.81866 15.07 6.39847 15.934 5.74877 16.8571C5.70658 16.9178 5.65933 16.9853 5.64245 17.009C5.62727 17.0326 5.61039 17.0545 5.60533 17.0596C5.57664 17.0883 5.2982 17.5051 5.18345 17.6924C4.92694 18.1092 4.81388 18.3894 4.71769 18.8399C4.67212 19.0542 4.67381 19.4559 4.72106 19.6921C4.82906 20.222 5.15307 20.6321 5.62895 20.8481C6.04071 21.0337 6.55372 21.0303 7.07517 20.8397C7.20004 20.7958 7.47174 20.654 7.53417 20.6034C7.79068 20.3925 7.87168 20.3199 7.94087 20.2338C7.98643 20.1781 8.02862 20.1309 8.03368 20.1309C8.04043 20.1309 8.059 20.109 8.07418 20.0803C8.09106 20.0533 8.113 20.0212 8.12481 20.0094C8.13662 19.9976 8.16868 19.9537 8.19737 19.9115C8.50788 19.4643 8.84032 18.6864 9.02932 17.9641C9.17951 17.3903 9.35333 16.4791 9.45964 15.6927C9.57777 14.8371 9.6554 14.184 9.73302 13.4061C9.7364 13.3588 9.74315 13.2947 9.74821 13.2626C9.75665 13.1901 9.76677 13.0922 9.79884 12.7395C9.81234 12.5859 9.82753 12.4223 9.83259 12.3767C9.84103 12.2889 9.86803 11.9784 9.88321 11.8029C9.88828 11.7472 9.90009 11.6139 9.90853 11.5076C9.92371 11.3287 10.0148 10.1711 10.0351 9.89602C10.0402 9.83021 10.0469 9.72896 10.052 9.66821C10.0638 9.50958 10.0756 9.3442 10.0857 9.17039C10.0908 9.08601 10.0992 8.96957 10.1026 8.90882C10.1077 8.84807 10.1195 8.681 10.1279 8.53756C10.1903 7.5588 10.1954 7.52167 10.2545 7.42886C10.2697 7.40523 10.3186 7.36979 10.3608 7.35123C10.4401 7.3141 10.4435 7.3141 11.9859 7.30904C13.4405 7.30567 13.5367 7.30567 13.6143 7.33435C13.67 7.35629 13.7088 7.38498 13.7358 7.42379C13.7747 7.47948 13.7763 7.49298 13.7662 7.66005C13.7612 7.75792 13.7527 7.86424 13.7477 7.8963C13.7443 7.92836 13.7325 8.03468 13.7223 8.13256C13.7139 8.23043 13.6987 8.38569 13.6886 8.4785C13.6481 8.86157 13.6143 9.20414 13.5958 9.40664C13.5907 9.4522 13.584 9.52814 13.5789 9.57539C13.5553 9.80996 13.5553 9.80658 13.503 10.3601C13.4523 10.8967 13.422 11.2427 13.4101 11.3979C13.4068 11.4536 13.3983 11.5414 13.3933 11.592C13.3899 11.6426 13.3815 11.7371 13.3764 11.8029C13.3713 11.8671 13.3646 11.9582 13.3595 12.0054C13.3545 12.051 13.3477 12.1472 13.3426 12.2164C13.3089 12.699 13.2988 12.8458 13.2836 13.0804C13.2751 13.2255 13.265 13.401 13.26 13.4685C13.2549 13.536 13.2465 13.6828 13.2414 13.7942C13.2363 13.9056 13.2245 14.1638 13.2144 14.368C13.1806 15.0261 13.2245 16.2749 13.3021 16.9499C13.3123 17.0326 13.3224 17.1305 13.3275 17.1642C13.3308 17.1996 13.3426 17.279 13.3528 17.3414C13.3629 17.4055 13.373 17.4747 13.3764 17.4983C13.3815 17.5507 13.4304 17.8223 13.4507 17.9118C13.638 18.764 13.8641 19.3091 14.2354 19.7934C14.2809 19.8541 14.3299 19.9149 14.345 19.9301C14.3602 19.9436 14.399 19.9874 14.4311 20.0279C14.534 20.1545 14.8192 20.3992 15.0133 20.5291C15.5752 20.9038 16.1828 21.0506 16.8949 20.9848C17.2611 20.9493 17.7049 20.8194 18.0711 20.6371C18.2736 20.5376 18.5504 20.3671 18.6584 20.2794C19.0448 19.9588 19.2861 19.7208 19.4296 19.5183C19.4498 19.4879 19.4802 19.4491 19.4971 19.4323C19.5139 19.4137 19.5274 19.3934 19.5274 19.3867C19.5274 19.3799 19.5376 19.3631 19.5494 19.3512C19.654 19.2399 19.9156 18.7505 20.0556 18.4012C20.3206 17.7363 20.5686 16.6951 20.6176 16.0369C20.6513 15.5796 20.4168 15.2843 20.0084 15.2725C19.7299 15.2641 19.5106 15.3754 19.3789 15.5948C19.3503 15.6454 19.2912 15.7754 19.249 15.8834C19.0651 16.3728 18.9267 16.6242 18.7377 16.8166C18.5942 16.9651 18.5774 16.9786 18.4559 17.0528C18.0694 17.2857 17.5851 17.3228 17.1497 17.149C17.0316 17.1018 16.8679 17.009 16.7852 16.9415C16.7059 16.8756 16.5355 16.7018 16.4899 16.6411C16.4663 16.6107 16.4342 16.5685 16.4173 16.55C16.3616 16.4824 16.2047 16.1399 16.1541 15.9711C16.0545 15.6488 15.9921 15.2573 15.9701 14.8405C15.9398 14.2498 15.9668 12.7463 16.0258 11.7945C16.0511 11.3743 16.0866 10.8461 16.0933 10.7567C16.0984 10.701 16.1051 10.6132 16.1102 10.5626C16.176 9.78465 16.2553 9.00332 16.3296 8.411C16.4494 7.44742 16.4561 7.42379 16.6333 7.34448C16.6958 7.31579 16.8038 7.3141 18.1774 7.30567C19.4785 7.29892 19.6675 7.29385 19.7637 7.26854C19.8244 7.25335 19.9443 7.22804 20.0303 7.21285C20.1181 7.19766 20.2295 7.16729 20.2801 7.14535C20.4505 7.06941 20.5754 6.91922 20.6361 6.71672C20.6598 6.63403 20.6648 6.50071 20.6699 5.71095C20.675 5.10344 20.6716 4.75243 20.6581 4.65625C20.6243 4.3913 20.4961 4.19555 20.2936 4.09936C20.0708 3.99136 20.4455 3.99811 13.9755 4.00148C10.7405 4.00317 8.05731 4.00655 8.01006 4.00992Z" />
</svg>
);
interface ConnectIconProps {
connected: boolean;
title?: string;
}
export const ConnectIcon = ({ connected, title }: ConnectIconProps) => (
<svg width="24" height="24" viewBox="0 0 24 24">
{title && <title>{title}</title>}
<ellipse
ry="10"
id="svg_1"
cy="12"
cx="12"
strokeWidth="3"
stroke="#ccc"
fill="transparent"
/>
<circle cx="12" cy="12" r={connected ? 6 : 2} />
</svg>
);
export const CheckIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" />
</svg>
);
export const CaretDownIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" />
</svg>
);
export const CaretUpIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z" />
</svg>
);
export const CaretRightIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z" />
</svg>
);
export const StarIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" />
</svg>
);
export const StarOutlineIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 5.173l2.335 4.817 5.305.732-3.861 3.71.942 5.27-4.721-2.524-4.721 2.525.942-5.27-3.861-3.71 5.305-.733 2.335-4.817zm0-4.586l-3.668 7.568-8.332 1.151 6.064 5.828-1.48 8.279 7.416-3.967 7.416 3.966-1.48-8.279 6.064-5.827-8.332-1.15-3.668-7.569z" />
</svg>
);
export const UploadIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M17 22v2h-10v-2h10zm0-4h-10v2h10v-2zm-10-7v5h10v-5h6l-11-11-11 11h6z" />
</svg>
);
export const ListIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M19 11h-14v-2h14v2zm0 2h-14v2h14v-2zm0 4h-14v2h14v-2zm3-11v16h-20v-16h20zm2-6h-24v24h24v-24z" />
</svg>
);
export const BlankIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24" />
);
export const Bits8Icon = () => (
<svg width="24px" height="24px" viewBox="0 0 24 24">
<path
d="M12.140918,13.34375 C13.0194336,13.34375 13.7951172,13.2079102 14.4679688,12.9362305 C15.1408203,12.6645508 15.6651367,12.2862305 16.040918,11.8012695 C16.4166992,11.3163086 16.6045898,10.7564453 16.6045898,10.1216797 L16.6045898,10.1064453 C16.6045898,9.62910156 16.4941406,9.19746094 16.2732422,8.81152344 C16.0523437,8.42558594 15.7489258,8.10439453 15.3629883,7.84794922 C14.9770508,7.59150391 14.5352539,7.41503906 14.0375977,7.31855469 L14.0375977,7.27285156 C14.6774414,7.11542969 15.1979492,6.81962891 15.5991211,6.38544922 C16.000293,5.95126953 16.2008789,5.43457031 16.2008789,4.83535156 L16.2008789,4.82011719 C16.2008789,4.25136719 16.0282227,3.74482422 15.6829102,3.30048828 C15.3375977,2.85615234 14.8602539,2.50576172 14.2508789,2.24931641 C13.6415039,1.99287109 12.9381836,1.86464844 12.140918,1.86464844 C11.3436523,1.86464844 10.640332,1.99287109 10.030957,2.24931641 C9.42158203,2.50576172 8.94423828,2.85615234 8.59892578,3.30048828 C8.25361328,3.74482422 8.08095703,4.25136719 8.08095703,4.82011719 L8.08095703,4.83535156 C8.08095703,5.43457031 8.28027344,5.95126953 8.67890625,6.38544922 C9.07753906,6.81962891 9.59931641,7.11542969 10.2442383,7.27285156 L10.2442383,7.31855469 C9.74658203,7.41503906 9.30478516,7.59150391 8.91884766,7.84794922 C8.53291016,8.10439453 8.22949219,8.42558594 8.00859375,8.81152344 C7.78769531,9.19746094 7.67724609,9.62910156 7.67724609,10.1064453 L7.67724609,10.1216797 C7.67724609,10.7564453 7.86513672,11.3163086 8.24091797,11.8012695 C8.61669922,12.2862305 9.13974609,12.6645508 9.81005859,12.9362305 C10.4803711,13.2079102 11.2573242,13.34375 12.140918,13.34375 Z M12.140918,6.5796875 C11.7905273,6.5796875 11.4807617,6.51494141 11.2116211,6.38544922 C10.9424805,6.25595703 10.7317383,6.07695313 10.5793945,5.8484375 C10.4270508,5.61992188 10.3508789,5.35585938 10.3508789,5.05625 L10.3508789,5.04101563 C10.3508789,4.74140625 10.4270508,4.47734375 10.5793945,4.24882813 C10.7317383,4.0203125 10.9424805,3.84257813 11.2116211,3.715625 C11.4807617,3.58867188 11.7905273,3.52519531 12.140918,3.52519531 C12.4913086,3.52519531 12.7998047,3.58867188 13.0664062,3.715625 C13.3330078,3.84257813 13.5424805,4.0203125 13.6948242,4.24882813 C13.847168,4.47734375 13.9233398,4.74140625 13.9233398,5.04101563 L13.9233398,5.05625 C13.9233398,5.35585938 13.8484375,5.61992188 13.6986328,5.8484375 C13.5488281,6.07695313 13.3393555,6.25595703 13.0702148,6.38544922 C12.8010742,6.51494141 12.4913086,6.5796875 12.140918,6.5796875 Z M12.140918,11.6679688 C11.7397461,11.6679688 11.3842773,11.5956055 11.0745117,11.4508789 C10.7647461,11.3061523 10.5209961,11.1055664 10.3432617,10.8491211 C10.1655273,10.5926758 10.0766602,10.2994141 10.0766602,9.96933594 L10.0766602,9.95410156 C10.0766602,9.62402344 10.1642578,9.33076172 10.3394531,9.07431641 C10.5146484,8.81787109 10.7571289,8.61601563 11.0668945,8.46875 C11.3766602,8.32148438 11.734668,8.24785156 12.140918,8.24785156 C12.547168,8.24785156 12.9051758,8.32148438 13.2149414,8.46875 C13.524707,8.61601563 13.765918,8.81787109 13.9385742,9.07431641 C14.1112305,9.33076172 14.1975586,9.62402344 14.1975586,9.95410156 L14.1975586,9.96933594 C14.1975586,10.2994141 14.1099609,10.5926758 13.9347656,10.8491211 C13.7595703,11.1055664 13.5170898,11.3061523 13.2073242,11.4508789 C12.8975586,11.5956055 12.5420898,11.6679688 12.140918,11.6679688 Z M4.68496094,14.8722656 L4.68496094,22.2 L5.599,22.2 L7.54394531,22.2 C8.06529948,22.2 8.51048177,22.1179036 8.87949219,21.9537109 C9.2485026,21.7895182 9.53203125,21.5542318 9.73007813,21.2478516 C9.928125,20.9414714 10.0271484,20.575 10.0271484,20.1484375 L10.0271484,20.1382813 C10.0271484,19.8166667 9.96028646,19.5297526 9.8265625,19.2775391 C9.69283854,19.0253255 9.50410156,18.8196615 9.26035156,18.6605469 C9.01660156,18.5014323 8.72714844,18.4015625 8.39199219,18.3609375 L8.39199219,18.2796875 C8.62897135,18.2356771 8.8422526,18.1375 9.03183594,17.9851563 C9.22141927,17.8328125 9.37291667,17.6449219 9.48632812,17.4214844 C9.59973958,17.1980469 9.65644531,16.959375 9.65644531,16.7054688 L9.65644531,16.6953125 C9.65644531,16.3229167 9.56927083,16.0004557 9.39492188,15.7279297 C9.22057292,15.4554036 8.97174479,15.2446615 8.6484375,15.0957031 C8.32513021,14.9467448 7.93834635,14.8722656 7.48808594,14.8722656 L5.59902344,14.8722656 L5.14199219,14.8722656 L4.68496094,14.8722656 Z M5.599,15.68 L7.29511719,15.6796875 C7.74876302,15.6796875 8.10169271,15.7820964 8.35390625,15.9869141 C8.60611979,16.1917318 8.73222656,16.4803385 8.73222656,16.8527344 L8.73222656,16.8628906 C8.73222656,17.2488281 8.59257812,17.539974 8.31328125,17.7363281 C8.03398437,17.9326823 7.61673177,18.0308594 7.06152344,18.0308594 L5.599,18.031 L5.599,15.68 Z M5.599,18.818 L7.32050781,18.8179688 C7.70983073,18.8179688 8.03567708,18.8653646 8.29804688,18.9601563 C8.56041667,19.0549479 8.75761719,19.1971354 8.88964844,19.3867188 C9.02167969,19.5763021 9.08769531,19.8115885 9.08769531,20.0925781 L9.08769531,20.1027344 C9.08769531,20.522526 8.94550781,20.8424479 8.66113281,21.0625 C8.37675781,21.2825521 7.95865885,21.3925781 7.40683594,21.3925781 L5.599,21.393 L5.599,18.818 Z M12.5306641,22.2 L12.5306641,14.8722656 L11.6166016,14.8722656 L11.6166016,22.2 L12.5306641,22.2 Z M17.3142578,22.2 L17.3142578,15.6949219 L19.6755859,15.6949219 L19.6755859,14.8722656 L14.0388672,14.8722656 L14.0388672,15.6949219 L16.4001953,15.6949219 L16.4001953,22.2 L17.3142578,22.2 Z"
fillRule="nonzero"
></path>
</svg>
);
export const ColumnRightIcon = () => (
<svg width="24px" height="24px" viewBox="0 0 24 24">
<path d="M23,1 L23,23 L1,23 L1,1 L23,1 Z M21,3 L3,3 L3,21 L21,21 L21,3 Z M19,5 L19,19 L13,19 L13,5 L19,5 Z"></path>
</svg>
);
export const ColumnLeftIcon = () => (
<svg width="24px" height="24px" viewBox="0 0 24 24">
<path d="M23,1 L23,23 L1,23 L1,1 L23,1 Z M21,3 L3,3 L3,21 L21,21 L21,3 Z M11,5 L11,19 L5,19 L5,5 L11,5 Z"></path>
</svg>
);
export const NavigationIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M20 9h-17v-6h17l3 3-3 3zm-6 10h-4v5h4v-5zm0-19h-4v2h4v-2zm-10 11h17v6h-17l-3-3 3-3z" />
</svg>
);
export const Bits16Icon = () => (
<svg width="24px" height="24px" viewBox="0 0 24 24">
<path
d="M9.05214844,13.1 L9.05214844,2.10839844 L6.759375,2.10839844 L3.91816406,4.08125 L3.91816406,6.153125 L6.61464844,4.27929688 L6.75175781,4.27929688 L6.75175781,13.1 L9.05214844,13.1 Z M13.9195313,6.11123047 C14.0058594,5.62626953 14.1442383,5.20097656 14.334668,4.83535156 C14.5250977,4.46972656 14.7713867,4.1828125 15.0735352,3.97460938 C15.3756836,3.76640625 15.7400391,3.66230469 16.1666016,3.66230469 C16.4662109,3.66230469 16.7328125,3.71054688 16.9664062,3.80703125 C17.2,3.90351563 17.3993164,4.03681641 17.5643555,4.20693359 C17.7293945,4.37705078 17.8550781,4.57890625 17.9414062,4.8125 L17.971875,4.88105469 L20.2189453,4.88105469 L20.2037109,4.80488281 C20.0919922,4.23105469 19.8520508,3.72070313 19.4838867,3.27382813 C19.1157227,2.82695313 18.6472656,2.47402344 18.0785156,2.21503906 C17.5097656,1.95605469 16.8699219,1.8265625 16.1589844,1.8265625 C15.2246094,1.8265625 14.4171875,2.06015625 13.7367188,2.52734375 C13.05625,2.99453125 12.5319336,3.66611328 12.1637695,4.54208984 C11.7956055,5.41806641 11.6115234,6.46796875 11.6115234,7.69179688 L11.6115234,7.70703125 C11.6115234,8.67695313 11.7270508,9.51738281 11.9581055,10.2283203 C12.1891602,10.9392578 12.5116211,11.5283203 12.9254883,11.9955078 C13.3393555,12.4626953 13.8205078,12.8118164 14.3689453,13.0428711 C14.9173828,13.2739258 15.5115234,13.3894531 16.1513672,13.3894531 C16.9791016,13.3894531 17.709082,13.2193359 18.3413086,12.8791016 C18.9735352,12.5388672 19.4686523,12.0742188 19.8266602,11.4851563 C20.184668,10.8960938 20.3636719,10.2283203 20.3636719,9.48183594 L20.3636719,9.46660156 C20.3636719,8.77089844 20.2138672,8.15136719 19.9142578,7.60800781 C19.6146484,7.06464844 19.1957031,6.63808594 18.6574219,6.32832031 C18.1191406,6.01855469 17.4919922,5.86367188 16.7759766,5.86367188 C16.2732422,5.86367188 15.8339844,5.93857422 15.4582031,6.08837891 C15.0824219,6.23818359 14.7701172,6.43496094 14.5212891,6.67871094 C14.2724609,6.92246094 14.0794922,7.18652344 13.9423828,7.47089844 L13.793,7.471 L13.7952188,7.34582422 C13.8090313,6.91073047 13.8504688,6.49919922 13.9195313,6.11123047 Z M16.1361328,11.5613281 C15.7654297,11.5613281 15.4277344,11.4711914 15.1230469,11.290918 C14.8183594,11.1106445 14.5771484,10.865625 14.3994141,10.5558594 C14.2513021,10.2977214 14.1649034,10.0131348 14.1402181,9.70209961 L14.132,9.513 L14.1328125,9.5046875 C14.1328125,9.12382813 14.2229492,8.78740234 14.4032227,8.49541016 C14.5834961,8.20341797 14.8259766,7.97363281 15.1306641,7.80605469 C15.4353516,7.63847656 15.7755859,7.5546875 16.1513672,7.5546875 C16.5373047,7.5546875 16.8788086,7.64101563 17.1758789,7.81367188 C17.4729492,7.98632813 17.7078125,8.22119141 17.8804687,8.51826172 C18.053125,8.81533203 18.1394531,9.15683594 18.1394531,9.54277344 L18.1394531,9.55800781 C18.1394531,9.93378906 18.0493164,10.2727539 17.869043,10.5749023 C17.6887695,10.8770508 17.4475586,11.1169922 17.1454102,11.2947266 C16.8432617,11.4724609 16.5068359,11.5613281 16.1361328,11.5613281 Z M4.68496094,14.8722656 L4.68496094,22.2 L5.599,22.2 L7.54394531,22.2 C8.06529948,22.2 8.51048177,22.1179036 8.87949219,21.9537109 C9.2485026,21.7895182 9.53203125,21.5542318 9.73007813,21.2478516 C9.928125,20.9414714 10.0271484,20.575 10.0271484,20.1484375 L10.0271484,20.1382813 C10.0271484,19.8166667 9.96028646,19.5297526 9.8265625,19.2775391 C9.69283854,19.0253255 9.50410156,18.8196615 9.26035156,18.6605469 C9.01660156,18.5014323 8.72714844,18.4015625 8.39199219,18.3609375 L8.39199219,18.2796875 C8.62897135,18.2356771 8.8422526,18.1375 9.03183594,17.9851563 C9.22141927,17.8328125 9.37291667,17.6449219 9.48632812,17.4214844 C9.59973958,17.1980469 9.65644531,16.959375 9.65644531,16.7054688 L9.65644531,16.6953125 C9.65644531,16.3229167 9.56927083,16.0004557 9.39492188,15.7279297 C9.22057292,15.4554036 8.97174479,15.2446615 8.6484375,15.0957031 C8.32513021,14.9467448 7.93834635,14.8722656 7.48808594,14.8722656 L5.59902344,14.8722656 L5.14199219,14.8722656 L4.68496094,14.8722656 Z M5.599,15.68 L7.29511719,15.6796875 C7.74876302,15.6796875 8.10169271,15.7820964 8.35390625,15.9869141 C8.60611979,16.1917318 8.73222656,16.4803385 8.73222656,16.8527344 L8.73222656,16.8628906 C8.73222656,17.2488281 8.59257812,17.539974 8.31328125,17.7363281 C8.03398437,17.9326823 7.61673177,18.0308594 7.06152344,18.0308594 L5.599,18.031 L5.599,15.68 Z M5.599,18.818 L7.32050781,18.8179688 C7.70983073,18.8179688 8.03567708,18.8653646 8.29804688,18.9601563 C8.56041667,19.0549479 8.75761719,19.1971354 8.88964844,19.3867188 C9.02167969,19.5763021 9.08769531,19.8115885 9.08769531,20.0925781 L9.08769531,20.1027344 C9.08769531,20.522526 8.94550781,20.8424479 8.66113281,21.0625 C8.37675781,21.2825521 7.95865885,21.3925781 7.40683594,21.3925781 L5.599,21.393 L5.599,18.818 Z M12.5306641,22.2 L12.5306641,14.8722656 L11.6166016,14.8722656 L11.6166016,22.2 L12.5306641,22.2 Z M17.3142578,22.2 L17.3142578,15.6949219 L19.6755859,15.6949219 L19.6755859,14.8722656 L14.0388672,14.8722656 L14.0388672,15.6949219 L16.4001953,15.6949219 L16.4001953,22.2 L17.3142578,22.2 Z"
fillRule="nonzero"
></path>
</svg>
);
export const ParallaxIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M4 17.162l-2 .838v-12.972l12-5.028v2.507l-10 4.19v10.465zm18-11.162l-12 5.028v12.972l12-5.028v-12.972zm-14 3.697l10-4.19v-2.507l-12 5.028v12.972l2-.838v-10.465z" />
</svg>
);
export const PaletteIcon = () => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M1 12.155c2.256 3.97 4.55 7.918 6.879 11.845h-5.379c-.829 0-1.5-.675-1.5-1.5v-10.345zm2.85.859c3.278 1.952 12.866 7.658 13.121 7.805l-5.162 2.98c-.231.132-.49.201-.751.201-.549 0-1.037-.298-1.299-.75l-5.909-10.236zm1.9-12.813c-.23-.133-.489-.201-.75-.201-.524 0-1.026.277-1.299.75l-3.5 6.062c-.133.23-.201.489-.201.749 0 .527.278 1.028.75 1.3 2.936 1.695 14.58 8.7 17.516 10.396.718.413 1.633.168 2.048-.55l3.5-6.062c.133-.23.186-.488.186-.749 0-.52-.257-1.025-.734-1.3l-17.516-10.395m.25 3.944c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2" />
</svg>
);
export const CopyIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z" />
</svg>
);
export const AsteriskIcon = () => (
<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 455 455">
<polygon
points="347.49,227 454.5,165.212 394.508,61.288 287.5,123.077 287.5,0 167.5,0 167.5,123.077 60.492,61.288
0.499,165.212 107.51,227 0.5,288.788 60.492,392.712 167.5,330.923 167.5,455 287.5,455 287.5,330.923 394.508,392.712
454.501,288.788 "
/>
</svg>
);
export const CursorHorizontalIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M6 11v-4l-6 5 6 5v-4h12v4l6-5-6-5v4z" />
</svg>
);
export const CursorVeticalIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M13 6h4l-5-6-5 6h4v12h-4l5 6 5-6h-4z" />
</svg>
);
export const CursorDiagonalIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M8.465 7.05l2.828-3.05h-7.293v7.293l3.051-2.829 8.484 8.486-2.828 3.05h7.293v-7.292l-3.051 2.828z" />
</svg>
);
export const ArrowLeftRightIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M1.5 7.5H16.4953L16.499 10.875C16.499 11.3225 16.764 11.7277 17.1745 11.9063C17.5848 12.0849 18.0618 12.0037 18.39 11.6997L23.64 6.82472C24.12 6.37941 24.12 5.6205 23.64 5.17519L18.39 0.300188C18.0622 -0.00374974 17.5851 -0.0849841 17.1745 0.0935628C16.764 0.272438 16.499 0.677625 16.499 1.12481L16.4953 4.5H1.5C0.670781 4.5 0 5.17031 0 5.95781C0 6.74531 0.670781 7.5 1.5 7.5ZM22.5 16.5H7.50469L7.5 13.0828C7.5 12.6353 7.23506 12.2302 6.82453 12.0516C6.41719 11.9156 5.93906 11.9953 5.61094 12.3L0.360937 17.175C-0.119062 17.6203 -0.119062 18.3792 0.360937 18.8245L5.61094 23.6995C5.93869 24.0035 6.41578 24.0848 6.82641 23.9061C7.2375 23.7281 7.5 23.3203 7.5 22.875L7.50469 19.5H22.5C23.3292 19.5 24 18.8292 24 18C24 17.1708 23.3297 16.5 22.5 16.5Z" />
</svg>
);
export const SlopeIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M24 22h-24l24-20z" />
</svg>
);
export const InfoIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 18h-2v-6h-2v-2h4v8zm-1-9.75c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z" />
</svg>
);
export const BreakpointIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M15.728 3l5.272 5.272v7.456l-5.272 5.272h-7.456l-5.272-5.272v-7.456l5.272-5.272h7.456zm8.272 4.029v9.941l-7.029 7.03h-9.942l-7.029-7.029v-9.942l7.029-7.029h9.941l7.03 7.029zm-2 .829l-5.858-5.858h-8.284l-5.858 5.858v8.284l5.858 5.858h8.284l5.858-5.858v-8.284z" />{" "}
</svg>
);
export const SettingsIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M24 13.616v-3.232l-2.869-1.02c-.198-.687-.472-1.342-.811-1.955l1.308-2.751-2.285-2.285-2.751 1.307c-.613-.339-1.269-.613-1.955-.811l-1.021-2.869h-3.232l-1.021 2.869c-.686.198-1.342.471-1.955.811l-2.751-1.308-2.285 2.285 1.308 2.752c-.339.613-.614 1.268-.811 1.955l-2.869 1.02v3.232l2.869 1.02c.197.687.472 1.342.811 1.955l-1.308 2.751 2.285 2.286 2.751-1.308c.613.339 1.269.613 1.955.811l1.021 2.869h3.232l1.021-2.869c.687-.198 1.342-.472 1.955-.811l2.751 1.308 2.285-2.286-1.308-2.751c.339-.613.613-1.268.811-1.955l2.869-1.02zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z" />
</svg>
);
export const SadIcon = () => (
<svg width="1096" height="974" viewBox="0 0 1096 974" version="1.1">
<defs>
<path
d="M50,0 L846,-1.42108547e-14 C873.614237,-1.92835078e-14 896,22.3857625 896,50 L896,574 C896,684.45695 806.45695,774 696,774 L50,774 C22.3857625,774 3.38176876e-15,751.614237 0,724 L0,50 C-3.38176876e-15,22.3857625 22.3857625,5.07265313e-15 50,0 Z"
id="path-1"
/>
<filter
x="-0.6%"
y="-0.7%"
width="101.2%"
height="101.4%"
filterUnits="objectBoundingBox"
id="filter-2"
>
<feMorphology
radius="2"
operator="erode"
in="SourceAlpha"
result="shadowSpreadInner1"
/>
<feGaussianBlur
stdDeviation="0.5"
in="shadowSpreadInner1"
result="shadowBlurInner1"
/>
<feOffset
dx="0"
dy="-2"
in="shadowBlurInner1"
result="shadowOffsetInner1"
/>
<feComposite
in="shadowOffsetInner1"
in2="SourceAlpha"
operator="arithmetic"
k2="-1"
k3="1"
result="shadowInnerInner1"
/>
<feColorMatrix
values="0 0 0 0 0.415686275 0 0 0 0 0.415686275 0 0 0 0 0.415686275 0 0 0 0.5 0"
type="matrix"
in="shadowInnerInner1"
result="shadowMatrixInner1"
/>
<feMorphology
radius="2"
operator="erode"
in="SourceAlpha"
result="shadowSpreadInner2"
/>
<feGaussianBlur
stdDeviation="0.5"
in="shadowSpreadInner2"
result="shadowBlurInner2"
/>
<feOffset
dx="0"
dy="8"
in="shadowBlurInner2"
result="shadowOffsetInner2"
/>
<feComposite
in="shadowOffsetInner2"
in2="SourceAlpha"
operator="arithmetic"
k2="-1"
k3="1"
result="shadowInnerInner2"
/>
<feColorMatrix
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"
type="matrix"
in="shadowInnerInner2"
result="shadowMatrixInner2"
/>
<feMerge>
<feMergeNode in="shadowMatrixInner1" />
<feMergeNode in="shadowMatrixInner2" />
</feMerge>
</filter>
</defs>
<g
id="Artboard"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g
id="Group"
transform="translate(100.000000, 100.000000)"
fillRule="nonzero"
>
<g id="Rectangle-2">
<use
fill="black"
fillOpacity="1"
filter="url(#filter-2)"
xlinkHref="#path-1"
/>
<path
stroke="#979797"
strokeWidth="10"
d="M50,5 C25.1471863,5 5,25.1471863 5,50 L5,724 C5,748.852814 25.1471863,769 50,769 L696,769 C803.695526,769 891,681.695526 891,574 L891,50 C891,25.1471863 870.852814,5 846,5 L50,5 Z"
strokeLinejoin="bevel"
/>
</g>
<path
d="M819,76.9627119 L896,76.9627119 L896,104.949153 L0,104.949153 L0,76.9627119 L77,76.9627119 L77,0 L105,0 L105,76.9627119 L791,76.9627119 L791,0 L819,0 L819,76.9627119 Z"
id="Combined-Shape"
fill="#979797"
/>
<path
d="M114,193.908475 C100.192881,193.908475 89,205.101356 89,218.908475 L89,663.538983 C89,677.346102 100.192881,688.538983 114,688.538983 L662,688.538983 C742.081289,688.538983 807,623.620272 807,543.538983 L807,218.908475 C807,205.101356 795.807119,193.908475 782,193.908475 L114,193.908475 Z"
id="Rectangle"
stroke="#979797"
strokeWidth="10"
fill="#979797"
/>
</g>
<rect
id="Rectangle"
stroke="#979797"
strokeWidth="10"
fill="#FFFFFF"
fillRule="nonzero"
x="339.5"
y="354.254237"
width="417.875"
height="373.938983"
/>
<text
id=":-("
fontFamily="HelveticaNeue-Bold, Helvetica Neue"
fontSize="200"
fontWeight="bold"
fill="#979797"
>
<tspan x="450.4" y="596">
:-(
</tspan>
</text>
</g>
</svg>
);
|