| 
					
				 | 
			
			
				@@ -2,79 +2,78 @@ import React from "react"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import oc from "open-color"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 // We inline font-awesome icons in order to save on js size rather than including the font awesome react library 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-export const SHAPES = 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        // fa-mouse-pointer 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <svg viewBox="0 0 320 512" className=""> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          <path d="M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      value: "selection", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        // fa-square 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <svg viewBox="0 0 448 512"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      value: "rectangle", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        // custom 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <svg viewBox="0 0 223.646 223.646"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          <path d="M111.823 0L16.622 111.823 111.823 223.646 207.025 111.823z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      value: "diamond", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        // fa-circle 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <svg viewBox="0 0 512 512"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      value: "ellipse", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        // fa-long-arrow-alt-right 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <svg viewBox="0 0 448 512" className="rtl-mirror"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          <path d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      value: "arrow", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        // custom 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <svg viewBox="0 0 6 6"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          <line 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            x1="0" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            y1="3" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            x2="6" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            y2="3" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            stroke={oc.black} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            strokeLinecap="round" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      value: "line", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        // fa-font 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <svg viewBox="0 0 448 512"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          <path d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      value: "text", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  ] as const; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+export const SHAPES = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      // fa-mouse-pointer 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <svg viewBox="0 0 320 512" className=""> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <path d="M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    value: "selection", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      // fa-square 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <svg viewBox="0 0 448 512"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    value: "rectangle", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      // custom 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <svg viewBox="0 0 223.646 223.646"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <path d="M111.823 0L16.622 111.823 111.823 223.646 207.025 111.823z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    value: "diamond", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      // fa-circle 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <svg viewBox="0 0 512 512"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    value: "ellipse", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      // fa-long-arrow-alt-right 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <svg viewBox="0 0 448 512" className="rtl-mirror"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <path d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    value: "arrow", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      // custom 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <svg viewBox="0 0 6 6"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <line 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          x1="0" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          y1="3" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          x2="6" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          y2="3" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          stroke={oc.black} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          strokeLinecap="round" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    value: "line", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    icon: ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      // fa-font 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <svg viewBox="0 0 448 512"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <path d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </svg> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    value: "text", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+] as const; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 export const shapesShortcutKeys = SHAPES.map((shape, index) => [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   shape.value[0], 
			 |