refactor(styling): dont inject styles

examples/nextjs/pages/_app.tsx

@@ -7,7 +7,7 @@ import '../styles/globals.css';
 // import '@react-flow/core/dist/theme-default.css';
 
 // this is a workaround for testing the theme. See explanation above.
-// import '../styles/theme-default.css';
+import '../styles/rf-style.css';
 
 const routes = [
   '/',

examples/nextjs/pages/index.tsx

@@ -1,20 +1,19 @@
 import React, { MouseEvent } from 'react';
 
 import {
+  MiniMap,
   ReactFlow,
+  Background,
+  BackgroundVariant,
+  Controls,
   ReactFlowProvider,
   Node,
   Edge,
   useReactFlow,
-} from '@react-flow/core';
-
-import { MiniMap } from '@react-flow/minimap';
-import { Background, BackgroundVariant } from '@react-flow/background';
-import { Controls } from '@react-flow/controls';
+} from '@react-flow/renderer';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
-  console.log('drag stop', node);
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 
 const initialNodes: Node[] = [

examples/nextjs/pages/theme-default.css

@@ -1,111 +0,0 @@
-.react-flow__edge {
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    outline: none;
-
-    .react-flow__edge-path {
-      stroke: #555;
-    }
-  }
-
-  &.animated path {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
-}
-
-.react-flow__edge-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-}
-
-.react-flow__edge-text {
-  font-size: 10px;
-}
-
-.react-flow__connection-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-}
-
-.react-flow__node {
-  cursor: grab;
-}
-
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-  background: #fff;
-  border-color: #1a192b;
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-
-  .react-flow__handle {
-    background: #1a192b;
-  }
-}
-
-.react-flow__node-default.selectable,
-.react-flow__node-input.selectable,
-.react-flow__node-output.selectable,
-.react-flow__node-group.selectable {
-  &:hover {
-    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-  }
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-  }
-}
-
-.react-flow__node-group {
-  background: rgba(240, 240, 240, 0.25);
-  border-color: #1a192b;
-}
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.react-flow__handle {
-  width: 6px;
-  height: 6px;
-  background: #555;
-  border: 1px solid white;
-  border-radius: 100%;
-
-  &.connectable {
-    cursor: crosshair;
-  }
-}