refactor(edges): cleanup markup

packages/react/src/components/Edges/wrapEdge.tsx

@@ -202,7 +202,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     };
 
     return (
-      <svg className="react-flow__edgewrapper" style={{ zIndex }}>
+      <svg style={{ zIndex }}>
         <g
           className={cc([
             'react-flow__edge',

packages/react/src/container/EdgeRenderer/index.tsx

@@ -67,7 +67,7 @@ const EdgeRenderer = ({
 
   return (
     <div className="react-flow__edges">
-      <svg className="react-flow__container">
+      <svg className="react-flow__marker">
         <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />
       </svg>
 

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -96,7 +96,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 {#if !hidden}
-  <svg class="svelte-flow__edgewrapper" style:zIndex>
+  <svg style:zIndex>
     <g
       class={cc(['svelte-flow__edge', className])}
       class:animated

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <div class="svelte-flow__edges">
-  <svg class="svelte-flow__container">
+  <svg class="svelte-flow__marker">
     <MarkerDefinition />
   </svg>
 

packages/system/src/styles/style.css

@@ -20,7 +20,7 @@
   --controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 }
 
-.xy-flow__edgewrapper {
+.xy-flow__edges svg {
   overflow: visible;
   position: absolute;
   pointer-events: none;