From 94463cd0be6968f006b5548791267e564f5fba1f Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 9 Aug 2022 18:42:12 +0200
Subject: [PATCH 1/4] refactor(styling): dont inject styles

---
 examples/nextjs/package.json                  |   5 +-
 examples/nextjs/pages/_app.tsx                |   2 +-
 examples/nextjs/pages/index.tsx               |  13 +-
 examples/nextjs/pages/theme-default.css       | 111 ---
 examples/nextjs/postcss.config.json           |   1 +
 .../nextjs/styles/rf-base.css                 | 170 ++---
 examples/nextjs/styles/rf-style.css           | 267 +++++++
 examples/nextjs/styles/theme-default.css      |  83 ---
 package.json                                  |   2 +
 packages/background/README.md                 |  10 +
 packages/bundle/README.md                     |  16 +
 packages/{renderer => bundle}/package.json    |   9 +-
 packages/bundle/src/base.css                  |   3 +
 packages/{renderer => bundle}/src/index.ts    |   0
 packages/bundle/src/style.css                 |   3 +
 packages/controls/README.md                   |  10 +
 packages/controls/package.json                |  12 +-
 packages/controls/src/Controls.tsx            |  21 +-
 packages/controls/src/style.css               |  28 +
 packages/controls/src/style.ts                |  31 -
 packages/core/README.md                       |   8 +
 packages/core/package.json                    |   4 +-
 .../core/src/components/Nodes/wrapNode.tsx    |   1 +
 .../core/src/container/FlowRenderer/Pane.tsx  |  34 +
 .../core/src/container/FlowRenderer/index.tsx |   6 +-
 .../core/src/container/ReactFlow/index.tsx    |   4 -
 .../core/src/container/ZoomPane/index.tsx     |   5 +-
 packages/core/src/store/initialState.ts       |   1 +
 packages/core/src/styles/base.css             |  25 +
 packages/core/src/styles/init.css             | 216 ++++++
 packages/core/src/styles/style.css            |  66 ++
 packages/core/src/styles/theme-default.css    |  83 ---
 packages/core/src/types/general.ts            |   1 +
 packages/css-utils/package.json               |   8 -
 packages/css-utils/src/index.ts               |  10 -
 packages/minimap/README.md                    |  10 +
 packages/minimap/package.json                 |  12 +-
 packages/minimap/src/MiniMap.tsx              |  40 +-
 packages/minimap/src/{style.ts => style.css}  |   5 +-
 packages/renderer/src/theme-default.css       |   1 -
 postcss.config.js                             |   1 +
 yarn.lock                                     | 667 +++++++++++++++++-
 42 files changed, 1481 insertions(+), 524 deletions(-)
 delete mode 100644 examples/nextjs/pages/theme-default.css
 rename packages/core/src/styles/base.ts => examples/nextjs/styles/rf-base.css (69%)
 create mode 100644 examples/nextjs/styles/rf-style.css
 delete mode 100644 examples/nextjs/styles/theme-default.css
 create mode 100644 packages/background/README.md
 create mode 100644 packages/bundle/README.md
 rename packages/{renderer => bundle}/package.json (68%)
 create mode 100644 packages/bundle/src/base.css
 rename packages/{renderer => bundle}/src/index.ts (100%)
 create mode 100644 packages/bundle/src/style.css
 create mode 100644 packages/controls/README.md
 create mode 100644 packages/controls/src/style.css
 delete mode 100644 packages/controls/src/style.ts
 create mode 100644 packages/core/README.md
 create mode 100644 packages/core/src/container/FlowRenderer/Pane.tsx
 create mode 100644 packages/core/src/styles/base.css
 create mode 100644 packages/core/src/styles/init.css
 create mode 100644 packages/core/src/styles/style.css
 delete mode 100644 packages/core/src/styles/theme-default.css
 delete mode 100644 packages/css-utils/package.json
 delete mode 100644 packages/css-utils/src/index.ts
 create mode 100644 packages/minimap/README.md
 rename packages/minimap/src/{style.ts => style.css} (53%)
 delete mode 100644 packages/renderer/src/theme-default.css

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index 65430d75..b6906e6b 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "yarn run copystyles && next dev",
-    "copystyles": "cp ../../packages/core/src/styles/theme-default.css ./styles/theme-default.css",
+    "dev": "next dev",
+    "copystyles": "cp ../../node_modules/@react-flow/renderer/dist/style.css ./styles/rf-style.css",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -27,6 +27,7 @@
     "eslint-config-next": "12.2.2",
     "postcss": "^8.4.16",
     "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^7.7.2"
   }
diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
index 6abeae0a..ce2b55b9 100755
--- a/examples/nextjs/pages/_app.tsx
+++ b/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 = [
   '/',
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
index b7d70cf7..0df7753e 100755
--- a/examples/nextjs/pages/index.tsx
+++ b/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[] = [
diff --git a/examples/nextjs/pages/theme-default.css b/examples/nextjs/pages/theme-default.css
deleted file mode 100644
index ec788aa7..00000000
--- a/examples/nextjs/pages/theme-default.css
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/examples/nextjs/postcss.config.json b/examples/nextjs/postcss.config.json
index 314c7555..e3efa910 100644
--- a/examples/nextjs/postcss.config.json
+++ b/examples/nextjs/postcss.config.json
@@ -1,6 +1,7 @@
 {
   "plugins": [
     "postcss-nested",
+    "postcss-import",
     "postcss-flexbugs-fixes",
     [
       "postcss-preset-env",
diff --git a/packages/core/src/styles/base.ts b/examples/nextjs/styles/rf-base.css
similarity index 69%
rename from packages/core/src/styles/base.ts
rename to examples/nextjs/styles/rf-base.css
index e1abe38e..7546dc30 100644
--- a/packages/core/src/styles/base.ts
+++ b/examples/nextjs/styles/rf-base.css
@@ -1,4 +1,5 @@
-const style = `
+/* these are very simple styles so that it doesnt look broken */
+/* these are the necessary styles for React Flow */
 .react-flow__container {
   position: absolute;
   width: 100%;
@@ -6,221 +7,222 @@ const style = `
   top: 0;
   left: 0;
 }
-
 .react-flow__pane {
   z-index: 1;
 }
-
 .react-flow__viewport {
   transform-origin: 0 0;
   z-index: 2;
   pointer-events: none;
 }
-
 .react-flow__renderer {
   z-index: 4;
 }
-
 .react-flow__selectionpane {
   z-index: 5;
 }
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(150, 150, 180, 0.1);
-  border: 1px dotted rgba(155, 155, 155, 0.8);
-}
-
 .react-flow__nodesselection-rect:focus,
 .react-flow__nodesselection-rect:focus-visible {
   outline: none;
 }
-
 .react-flow .react-flow__edges {
   pointer-events: none;
   overflow: visible;
 }
-
-.react-flow__connection {
-  pointer-events: none;
-}
-
-.react-flow__connection.animated {
-  stroke-dasharray: 5;
-  animation: dashdraw 0.5s linear infinite;
-}
-
-.react-flow .react-flow__connectionline {
-  z-index: 1001;
-}
-
-.react-flow__connectionline path, .react-flow__edge path {
-  fill: none;
-}
-
-.react-flow__edge-path, .react-flow__connection-path {
+.react-flow__edge-path,
+.react-flow__connection-path {
   stroke: #b1b1b7;
   stroke-width: 1;
 }
-
 .react-flow__edge {
   pointer-events: visibleStroke;
 }
-
 .react-flow__edge.animated path {
   stroke-dasharray: 5;
+  -webkit-animation: dashdraw 0.5s linear infinite;
   animation: dashdraw 0.5s linear infinite;
 }
-
 .react-flow__edge.inactive {
   pointer-events: none;
 }
-
-.react-flow__edge.selected, .react-flow__edge:focus, .react-flow__edge:focus-visible {
+.react-flow__edge.selected,
+.react-flow__edge:focus,
+.react-flow__edge:focus-visible {
   outline: none;
 }
-
 .react-flow__edge.selected .react-flow__edge-path,
 .react-flow__edge:focus .react-flow__edge-path,
 .react-flow__edge:focus-visible .react-flow__edge-path {
   stroke: #555;
 }
-
-@keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-
 .react-flow__edge-textwrapper {
   pointer-events: all;
 }
-
-.react-flow__edge-text {
-  pointer-events: none;
-  user-select: none;
-}
-
 .react-flow__edge-textbg {
   fill: white;
 }
-
+.react-flow__edge .react-flow__edge-text {
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.react-flow__connection {
+  pointer-events: none;
+}
+.react-flow__connection.animated {
+  stroke-dasharray: 5;
+  -webkit-animation: dashdraw 0.5s linear infinite;
+  animation: dashdraw 0.5s linear infinite;
+}
+.react-flow__connectionline {
+  z-index: 1001;
+}
 .react-flow__nodes {
   pointer-events: none;
   transform-origin: 0 0;
 }
-
 .react-flow__node {
   position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
   user-select: none;
   pointer-events: all;
   transform-origin: 0 0;
   box-sizing: border-box;
   background-color: white;
+  cursor: -webkit-grab;
   cursor: grab;
-  border: 1px solid #bbb;
 }
-
-.react-flow__node.selected,
-.react-flow__node:focus,
-.react-flow__node:focus-visible  {
-  outline: none;
-  border: 1px solid #555;
-}
-
 .react-flow__nodesselection {
   z-index: 3;
   transform-origin: left top;
   pointer-events: none;
 }
-
 .react-flow__nodesselection-rect {
   position: absolute;
   pointer-events: all;
+  cursor: -webkit-grab;
   cursor: grab;
 }
-
 .react-flow__handle {
   position: absolute;
   pointer-events: none;
   min-width: 5px;
   min-height: 5px;
-  background-color: #333;
 }
-
 .react-flow__handle.connectable {
   pointer-events: all;
 }
-
 .react-flow__handle-bottom {
   top: auto;
   left: 50%;
   bottom: -4px;
   transform: translate(-50%, 0);
 }
-
 .react-flow__handle-top {
   left: 50%;
   top: -4px;
   transform: translate(-50%, 0);
 }
-
 .react-flow__handle-left {
   top: 50%;
   left: -4px;
   transform: translate(0, -50%);
 }
-
 .react-flow__handle-right {
   right: -4px;
   top: 50%;
   transform: translate(0, -50%);
 }
-
 .react-flow__edgeupdater {
   cursor: move;
   pointer-events: all;
 }
-
 .react-flow__panel {
   position: absolute;
   z-index: 1000;
   margin: 15px;
 }
-
 .react-flow__panel.top {
   top: 0;
 }
-
 .react-flow__panel.bottom {
   bottom: 0;
 }
-
 .react-flow__panel.left {
   left: 0;
 }
-
 .react-flow__panel.right {
   right: 0;
 }
-
 .react-flow__panel.center {
   left: 50%;
   transform: translateX(-50%);
 }
-
 .react-flow__attribution {
   font-size: 10px;
   background: rgba(255, 255, 255, 0.5);
   padding: 2px 3px;
-  color: #999;
   margin: 0;
 }
-
 .react-flow__attribution a {
-  color: #555;
   text-decoration: none;
+  color: #999;
+}
+@-webkit-keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+.react-flow__node {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bbb;
+}
+.react-flow__node.selected,
+.react-flow__node:focus,
+.react-flow__node:focus-visible {
+  outline: none;
+  border: 1px solid #555;
+}
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(150, 150, 180, 0.1);
+  border: 1px dotted rgba(155, 155, 155, 0.8);
+}
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+.react-flow__controls-button {
+  border: none;
+  background: #fefefe;
+  border-bottom: 1px solid #eee;
+  box-sizing: content-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  padding: 5px;
+}
+.react-flow__controls-button:hover {
+  background: #f4f4f4;
+}
+.react-flow__controls-button svg {
+  width: 100%;
+  max-width: 12px;
+  max-height: 12px;
+}
+.react-flow__minimap {
+  background-color: #fff;
 }
-`;
-
-export default style;
diff --git a/examples/nextjs/styles/rf-style.css b/examples/nextjs/styles/rf-style.css
new file mode 100644
index 00000000..101daba1
--- /dev/null
+++ b/examples/nextjs/styles/rf-style.css
@@ -0,0 +1,267 @@
+/* these are the necessary styles for React Flow */
+.react-flow__container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.react-flow__pane {
+  z-index: 1;
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+.react-flow__pane.dragging {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+.react-flow__viewport {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.react-flow__renderer {
+  z-index: 4;
+}
+.react-flow__selectionpane {
+  z-index: 5;
+}
+.react-flow__nodesselection-rect:focus,
+.react-flow__nodesselection-rect:focus-visible {
+  outline: none;
+}
+.react-flow .react-flow__edges {
+  pointer-events: none;
+  overflow: visible;
+}
+.react-flow__edge-path,
+.react-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+.react-flow__edge {
+  pointer-events: visibleStroke;
+  cursor: pointer;
+}
+.react-flow__edge.animated path {
+    stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+            animation: dashdraw 0.5s linear infinite;
+  }
+.react-flow__edge.inactive {
+    pointer-events: none;
+  }
+.react-flow__edge.selected,
+  .react-flow__edge:focus,
+  .react-flow__edge:focus-visible {
+    outline: none;
+  }
+.react-flow__edge.selected .react-flow__edge-path,
+  .react-flow__edge:focus .react-flow__edge-path,
+  .react-flow__edge:focus-visible .react-flow__edge-path {
+    stroke: #555;
+  }
+.react-flow__edge-textwrapper {
+    pointer-events: all;
+  }
+.react-flow__edge-textbg {
+    fill: white;
+  }
+.react-flow__edge .react-flow__edge-text {
+    pointer-events: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+.react-flow__connection {
+  pointer-events: none;
+}
+.react-flow__connection.animated {
+    stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+            animation: dashdraw 0.5s linear infinite;
+  }
+.react-flow__connectionline {
+  z-index: 1001;
+}
+.react-flow__nodes {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+.react-flow__node {
+  position: absolute;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  background-color: white;
+  cursor: -webkit-grab;
+  cursor: grab;
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #1a192b;
+}
+.react-flow__node.dragging {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+.react-flow__nodesselection {
+  z-index: 3;
+  transform-origin: left top;
+  pointer-events: none;
+}
+.react-flow__nodesselection-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+.react-flow__handle {
+  position: absolute;
+  pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
+  width: 6px;
+  height: 6px;
+  background: #1a192b;
+  border: 1px solid white;
+  border-radius: 100%;
+}
+.react-flow__handle.connectable {
+    pointer-events: all;
+    cursor: crosshair;
+  }
+.react-flow__handle-bottom {
+    top: auto;
+    left: 50%;
+    bottom: -4px;
+    transform: translate(-50%, 0);
+  }
+.react-flow__handle-top {
+    left: 50%;
+    top: -4px;
+    transform: translate(-50%, 0);
+  }
+.react-flow__handle-left {
+    top: 50%;
+    left: -4px;
+    transform: translate(0, -50%);
+  }
+.react-flow__handle-right {
+    right: -4px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+.react-flow__edgeupdater {
+  cursor: move;
+  pointer-events: all;
+}
+.react-flow__panel {
+  position: absolute;
+  z-index: 1000;
+  margin: 15px;
+}
+.react-flow__panel.top {
+    top: 0;
+  }
+.react-flow__panel.bottom {
+    bottom: 0;
+  }
+.react-flow__panel.left {
+    left: 0;
+  }
+.react-flow__panel.right {
+    right: 0;
+  }
+.react-flow__panel.center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+.react-flow__attribution {
+  font-size: 10px;
+  background: rgba(255, 255, 255, 0.5);
+  padding: 2px 3px;
+  margin: 0;
+}
+.react-flow__attribution a {
+    text-decoration: none;
+    color: #999;
+  }
+@-webkit-keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+.react-flow__edge.updating .react-flow__edge-path {
+      stroke: #777;
+    }
+.react-flow__edge-text {
+    font-size: 10px;
+  }
+.react-flow__node.selectable:hover {
+      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+    }
+.react-flow__node.selectable.selected,
+    .react-flow__node.selectable:focus,
+    .react-flow__node.selectable:focus-visible {
+      box-shadow: 0 0 0 0.5px #1a192b;
+      outline: none;
+    }
+.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);
+}
+.react-flow__nodesselection-rect:focus,
+  .react-flow__nodesselection-rect:focus-visible,
+  .react-flow__selection:focus,
+  .react-flow__selection:focus-visible {
+    outline: none;
+  }
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+.react-flow__controls-button {
+    border: none;
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    box-sizing: content-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    padding: 5px;
+  }
+.react-flow__controls-button:hover {
+      background: #f4f4f4;
+    }
+.react-flow__controls-button svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+    }
+.react-flow__minimap {
+  background-color: #fff;
+}
diff --git a/examples/nextjs/styles/theme-default.css b/examples/nextjs/styles/theme-default.css
deleted file mode 100644
index 27821037..00000000
--- a/examples/nextjs/styles/theme-default.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.react-flow__edge {
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
-}
-
-.react-flow__edge-text {
-  font-size: 10px;
-}
-
-.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;
-  border-color: #1a192b;
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    border: none;
-    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 {
-    border: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-}
-
-.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;
-  }
-}
diff --git a/package.json b/package.json
index e0ebb4d3..37f41225 100644
--- a/package.json
+++ b/package.json
@@ -34,12 +34,14 @@
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",
     "autoprefixer": "^10.4.8",
+    "cssnano": "^5.1.12",
     "cypress": "^10.3.1",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "latest",
     "postcss": "^8.4.16",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.7.1",
diff --git a/packages/background/README.md b/packages/background/README.md
new file mode 100644
index 00000000..0c664fa9
--- /dev/null
+++ b/packages/background/README.md
@@ -0,0 +1,10 @@
+# @react-flow/background
+
+Background component for React Flow.
+
+## Installation 
+
+```sh 
+npm install @react-flow/background
+```
+
diff --git a/packages/bundle/README.md b/packages/bundle/README.md
new file mode 100644
index 00000000..eab39176
--- /dev/null
+++ b/packages/bundle/README.md
@@ -0,0 +1,16 @@
+# @react-flow/bundle
+
+Bundles:
+
+* @react-flow/core
+* @react-flow/background
+* @react-flow/controls
+* @react-flow/minimap
+
+
+## Installation 
+
+```sh 
+npm install @react-flow/bundle
+```
+
diff --git a/packages/renderer/package.json b/packages/bundle/package.json
similarity index 68%
rename from packages/renderer/package.json
rename to packages/bundle/package.json
index 9c81cc0b..7cc0acd6 100644
--- a/packages/renderer/package.json
+++ b/packages/bundle/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "@react-flow/renderer",
+  "name": "@react-flow/bundle",
   "version": "11.0.0",
-  "description": "The main React Flow package that comes with all the essentials.",
-  "main": "dist/react-flow-renderer.cjs.js",
-  "module": "dist/react-flow-renderer.esm.js",
+  "description": "The bundled React Flow package that comes with all the essentials.",
+  "main": "dist/react-flow-bundle.cjs.js",
+  "module": "dist/react-flow-bundle.esm.js",
   "license": "MIT",
   "scripts": {
     "build": "postcss src/*.css --config ../../postcss.config.json --dir dist"
@@ -22,6 +22,7 @@
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.14",
     "postcss-cli": "^10.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6"
   }
diff --git a/packages/bundle/src/base.css b/packages/bundle/src/base.css
new file mode 100644
index 00000000..5e12a875
--- /dev/null
+++ b/packages/bundle/src/base.css
@@ -0,0 +1,3 @@
+@import '../../core/src/styles/base.css';
+@import '../../controls/src/style.css';
+@import '../../minimap/src/style.css';
diff --git a/packages/renderer/src/index.ts b/packages/bundle/src/index.ts
similarity index 100%
rename from packages/renderer/src/index.ts
rename to packages/bundle/src/index.ts
diff --git a/packages/bundle/src/style.css b/packages/bundle/src/style.css
new file mode 100644
index 00000000..1532e747
--- /dev/null
+++ b/packages/bundle/src/style.css
@@ -0,0 +1,3 @@
+@import '../../core/src/styles/style.css';
+@import '../../controls/src/style.css';
+@import '../../minimap/src/style.css';
diff --git a/packages/controls/README.md b/packages/controls/README.md
new file mode 100644
index 00000000..23deb61f
--- /dev/null
+++ b/packages/controls/README.md
@@ -0,0 +1,10 @@
+# @react-flow/controls
+
+Controls component for React Flow.
+
+## Installation 
+
+```sh 
+npm install @react-flow/controls
+```
+
diff --git a/packages/controls/package.json b/packages/controls/package.json
index f4662873..567ada2f 100644
--- a/packages/controls/package.json
+++ b/packages/controls/package.json
@@ -5,13 +5,23 @@
   "main": "dist/react-flow-controls.cjs.js",
   "module": "dist/react-flow-controls.esm.js",
   "license": "MIT",
+  "scripts": {
+    "build": "postcss src/*.css --config ../../postcss.config.json --dir dist"
+  },
   "dependencies": {
     "@react-flow/core": "^11.0.0",
-    "@react-flow/css-utils": "^11.0.0",
     "classcat": "^5.0.3"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "postcss-cli": "^10.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-import": "^14.1.0",
+    "postcss-nested": "^5.0.6"
   }
 }
diff --git a/packages/controls/src/Controls.tsx b/packages/controls/src/Controls.tsx
index ebf4d5e4..124a6ca1 100644
--- a/packages/controls/src/Controls.tsx
+++ b/packages/controls/src/Controls.tsx
@@ -1,13 +1,6 @@
 import { memo, FC, useEffect, useState, PropsWithChildren } from 'react';
 import cc from 'classcat';
-import {
-  useStore,
-  useStoreApi,
-  useReactFlow,
-  ReactFlowState,
-  Panel,
-} from '@react-flow/core';
-import { injectStyle } from '@react-flow/css-utils';
+import { useStore, useStoreApi, useReactFlow, ReactFlowState, Panel } from '@react-flow/core';
 
 import PlusIcon from './Icons/Plus';
 import MinusIcon from './Icons/Minus';
@@ -15,14 +8,10 @@ import FitviewIcon from './Icons/FitView';
 import LockIcon from './Icons/Lock';
 import UnlockIcon from './Icons/Unlock';
 import ControlButton from './ControlButton';
-import baseStyle from './style';
 
 import { ControlProps } from './types';
 
-injectStyle(baseStyle);
-
-const isInteractiveSelector = (s: ReactFlowState) =>
-  s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
+const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
 
 const Controls: FC<PropsWithChildren<ControlProps>> = ({
   style,
@@ -77,11 +66,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
   };
 
   return (
-    <Panel
-      className={cc(['react-flow__controls', className])}
-      position={position}
-      style={style}
-    >
+    <Panel className={cc(['react-flow__controls', className])} position={position} style={style}>
       {showZoom && (
         <>
           <ControlButton
diff --git a/packages/controls/src/style.css b/packages/controls/src/style.css
new file mode 100644
index 00000000..289c5060
--- /dev/null
+++ b/packages/controls/src/style.css
@@ -0,0 +1,28 @@
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+
+  &-button {
+    border: none;
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    box-sizing: content-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+
+    &:hover {
+      background: #f4f4f4;
+    }
+
+    svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+    }
+  }
+}
diff --git a/packages/controls/src/style.ts b/packages/controls/src/style.ts
deleted file mode 100644
index 69d02241..00000000
--- a/packages/controls/src/style.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-const style = `
-.react-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-}
-
-.react-flow__controls-button {
-  border: none;
-  background: #fefefe;
-  border-bottom: 1px solid #eee;
-  box-sizing: content-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  user-select: none;
-  padding: 5px;
-}
-
-.react-flow__controls-button svg {
-  width: 100%;
-  max-width: 12px;
-  max-height: 12px;
-}
-
-.react-flow__controls-button:hover {
-  background: #f4f4f4;
-}`;
-
-export default style;
diff --git a/packages/core/README.md b/packages/core/README.md
new file mode 100644
index 00000000..2c70320e
--- /dev/null
+++ b/packages/core/README.md
@@ -0,0 +1,8 @@
+# @react-flow/core
+
+## Installation 
+
+```sh 
+npm install @react-flow/core
+```
+
diff --git a/packages/core/package.json b/packages/core/package.json
index 6ef21c4f..910133b2 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -13,11 +13,10 @@
     "url": "https://github.com/wbkd/react-flow.git"
   },
   "scripts": {
-    "build": "postcss src/styles/*.css --config ../../postcss.config.json --dir dist"
+    "build": "postcss src/styles/{base,style}.css --config ../../postcss.config.json --dir dist"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.0",
-    "@react-flow/css-utils": "^11.0.0",
     "classcat": "^5.0.3",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
@@ -38,6 +37,7 @@
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.14",
     "postcss-cli": "^10.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6"
   }
diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx
index aeb2a42e..108a3ceb 100644
--- a/packages/core/src/components/Nodes/wrapNode.tsx
+++ b/packages/core/src/components/Nodes/wrapNode.tsx
@@ -149,6 +149,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
             selected,
             selectable: isSelectable,
             parent: isParent,
+            dragging,
           },
         ])}
         ref={nodeRef}
diff --git a/packages/core/src/container/FlowRenderer/Pane.tsx b/packages/core/src/container/FlowRenderer/Pane.tsx
new file mode 100644
index 00000000..113945bf
--- /dev/null
+++ b/packages/core/src/container/FlowRenderer/Pane.tsx
@@ -0,0 +1,34 @@
+import { MouseEvent } from 'react';
+import cc from 'classcat';
+
+import { useStore } from '../../hooks/useStore';
+import { containerStyle } from '../../styles';
+import type { ReactFlowState } from '../../types';
+import type { FlowRendererProps } from '.';
+
+type PaneProps = Pick<FlowRendererProps, 'onClick' | 'onContextMenu' | 'onWheel'> & {
+  onMouseEnter?: (event: MouseEvent) => void;
+  onMouseMove?: (event: MouseEvent) => void;
+  onMouseLeave?: (event: MouseEvent) => void;
+};
+
+const selector = (s: ReactFlowState) => s.paneDragging;
+
+function Pane({ onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onWheel }: PaneProps) {
+  const dragging = useStore(selector);
+
+  return (
+    <div
+      className={cc(['react-flow__pane', { dragging }])}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseMove={onMouseMove}
+      onMouseLeave={onMouseLeave}
+      onContextMenu={onContextMenu}
+      onWheel={onWheel}
+      style={containerStyle}
+    />
+  );
+}
+
+export default Pane;
diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx
index d5f65014..99725dfe 100644
--- a/packages/core/src/container/FlowRenderer/index.tsx
+++ b/packages/core/src/container/FlowRenderer/index.tsx
@@ -7,9 +7,9 @@ import { GraphViewProps } from '../GraphView';
 import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
+import Pane from './Pane';
 
 import { ReactFlowState } from '../../types';
-import { containerStyle } from '../../styles';
 
 export type FlowRendererProps = Omit<
   GraphViewProps,
@@ -110,15 +110,13 @@ const FlowRenderer = ({
           disableKeyboardA11y={disableKeyboardA11y}
         />
       )}
-      <div
-        className="react-flow__pane"
+      <Pane
         onClick={onClick}
         onMouseEnter={onPaneMouseEnter}
         onMouseMove={onPaneMouseMove}
         onMouseLeave={onPaneMouseLeave}
         onContextMenu={onContextMenu}
         onWheel={onWheel}
-        style={containerStyle}
       />
     </ZoomPane>
   );
diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx
index fdce46cc..4af5484f 100644
--- a/packages/core/src/container/ReactFlow/index.tsx
+++ b/packages/core/src/container/ReactFlow/index.tsx
@@ -1,6 +1,5 @@
 import { CSSProperties, forwardRef, useId } from 'react';
 import cc from 'classcat';
-import { injectStyle } from '@react-flow/css-utils';
 
 import Attribution from '../../components/Attribution';
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
@@ -9,9 +8,6 @@ import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import SelectionListener from '../../components/SelectionListener';
 import StoreUpdater from '../../components/StoreUpdater';
-import baseStyle from '../../styles/base';
-
-injectStyle(baseStyle);
 
 import {
   ConnectionLineType,
diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx
index 3c3f7352..6f4f2a40 100644
--- a/packages/core/src/container/ZoomPane/index.tsx
+++ b/packages/core/src/container/ZoomPane/index.tsx
@@ -169,7 +169,9 @@ const ZoomPane = ({
     if (d3Zoom) {
       d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
         isZoomingOrPanning.current = true;
-
+        if (event.sourceEvent?.type === 'mousedown') {
+          store.setState({ paneDragging: true });
+        }
         if (onMoveStart) {
           const flowTransform = eventToFlowTransform(event.transform);
           prevTransform.current = flowTransform;
@@ -184,6 +186,7 @@ const ZoomPane = ({
     if (d3Zoom) {
       d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
         isZoomingOrPanning.current = false;
+        store.setState({ paneDragging: false });
 
         if (onMoveEnd && viewChanged(prevTransform.current, event.transform)) {
           const flowTransform = eventToFlowTransform(event.transform);
diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts
index 151c8475..a40093de 100644
--- a/packages/core/src/store/initialState.ts
+++ b/packages/core/src/store/initialState.ts
@@ -30,6 +30,7 @@ const initialState: ReactFlowStore = {
   connectionPosition: { x: 0, y: 0 },
   connectionMode: ConnectionMode.Strict,
   domNode: null,
+  paneDragging: false,
 
   snapGrid: [15, 15],
   snapToGrid: false,
diff --git a/packages/core/src/styles/base.css b/packages/core/src/styles/base.css
new file mode 100644
index 00000000..b32c2e23
--- /dev/null
+++ b/packages/core/src/styles/base.css
@@ -0,0 +1,25 @@
+/* these are very simple styles so that it doesnt look broken */
+@import './init.css';
+
+.react-flow__handle {
+  background-color: #333;
+}
+
+.react-flow__node {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bbb;
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    border: 1px solid #555;
+  }
+}
+
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(150, 150, 180, 0.1);
+  border: 1px dotted rgba(155, 155, 155, 0.8);
+}
diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css
new file mode 100644
index 00000000..3536691d
--- /dev/null
+++ b/packages/core/src/styles/init.css
@@ -0,0 +1,216 @@
+/* these are the necessary styles for React Flow */
+.react-flow__container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.react-flow__pane {
+  z-index: 1;
+  cursor: grab;
+
+  &.dragging {
+    cursor: grabbing;
+  }
+}
+
+.react-flow__viewport {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.react-flow__renderer {
+  z-index: 4;
+}
+
+.react-flow__selectionpane {
+  z-index: 5;
+}
+
+.react-flow__nodesselection-rect:focus,
+.react-flow__nodesselection-rect:focus-visible {
+  outline: none;
+}
+
+.react-flow .react-flow__edges {
+  pointer-events: none;
+  overflow: visible;
+}
+
+.react-flow__edge-path,
+.react-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+
+.react-flow__edge {
+  pointer-events: visibleStroke;
+  cursor: pointer;
+
+  &.animated path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  &.inactive {
+    pointer-events: none;
+  }
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  &.selected .react-flow__edge-path,
+  &:focus .react-flow__edge-path,
+  &:focus-visible .react-flow__edge-path {
+    stroke: #555;
+  }
+
+  &-textwrapper {
+    pointer-events: all;
+  }
+
+  &-textbg {
+    fill: white;
+  }
+
+  .react-flow__edge-text {
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
+.react-flow__connection {
+  pointer-events: none;
+
+  &.animated {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+}
+
+.react-flow__connectionline {
+  z-index: 1001;
+}
+
+.react-flow__nodes {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.react-flow__node {
+  position: absolute;
+  user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  background-color: white;
+  cursor: grab;
+
+  &.dragging {
+    cursor: grabbing;
+  }
+}
+
+.react-flow__nodesselection {
+  z-index: 3;
+  transform-origin: left top;
+  pointer-events: none;
+
+  &-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: grab;
+  }
+}
+
+.react-flow__handle {
+  position: absolute;
+  pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
+
+  &.connectable {
+    pointer-events: all;
+  }
+
+  &-bottom {
+    top: auto;
+    left: 50%;
+    bottom: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  &-top {
+    left: 50%;
+    top: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  &-left {
+    top: 50%;
+    left: -4px;
+    transform: translate(0, -50%);
+  }
+
+  &-right {
+    right: -4px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+}
+
+.react-flow__edgeupdater {
+  cursor: move;
+  pointer-events: all;
+}
+
+.react-flow__panel {
+  position: absolute;
+  z-index: 1000;
+  margin: 15px;
+
+  &.top {
+    top: 0;
+  }
+
+  &.bottom {
+    bottom: 0;
+  }
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.react-flow__attribution {
+  font-size: 10px;
+  background: rgba(255, 255, 255, 0.5);
+  padding: 2px 3px;
+  margin: 0;
+
+  a {
+    text-decoration: none;
+    color: #999;
+  }
+}
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
diff --git a/packages/core/src/styles/style.css b/packages/core/src/styles/style.css
new file mode 100644
index 00000000..7d1f8daf
--- /dev/null
+++ b/packages/core/src/styles/style.css
@@ -0,0 +1,66 @@
+@import './init.css';
+
+.react-flow__edge {
+  &.updating {
+    .react-flow__edge-path {
+      stroke: #777;
+    }
+  }
+
+  &-text {
+    font-size: 10px;
+  }
+}
+
+.react-flow__node {
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #1a192b;
+
+  &.selectable {
+    &:hover {
+      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+    }
+
+    &.selected,
+    &:focus,
+    &:focus-visible {
+      box-shadow: 0 0 0 0.5px #1a192b;
+      outline: none;
+    }
+  }
+
+  &-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: #1a192b;
+  border: 1px solid white;
+  border-radius: 100%;
+
+  &.connectable {
+    cursor: crosshair;
+  }
+}
diff --git a/packages/core/src/styles/theme-default.css b/packages/core/src/styles/theme-default.css
deleted file mode 100644
index 27821037..00000000
--- a/packages/core/src/styles/theme-default.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.react-flow__edge {
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
-}
-
-.react-flow__edge-text {
-  font-size: 10px;
-}
-
-.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;
-  border-color: #1a192b;
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    border: none;
-    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 {
-    border: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-}
-
-.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;
-  }
-}
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index 83802ca5..0f124405 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -137,6 +137,7 @@ export type ReactFlowStore = {
   hasDefaultNodes: boolean;
   hasDefaultEdges: boolean;
   domNode: HTMLDivElement | null;
+  paneDragging: boolean;
 
   d3Zoom: ZoomBehavior<Element, unknown> | null;
   d3Selection: D3Selection<Element, unknown, null, undefined> | null;
diff --git a/packages/css-utils/package.json b/packages/css-utils/package.json
deleted file mode 100644
index df9a7f60..00000000
--- a/packages/css-utils/package.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "name": "@react-flow/css-utils",
-  "version": "11.0.0",
-  "description": "Utils for handling styles.",
-  "main": "dist/react-flow-css-utils.cjs.js",
-  "module": "dist/react-flow-css-utils.esm.js",
-  "license": "MIT"
-}
diff --git a/packages/css-utils/src/index.ts b/packages/css-utils/src/index.ts
deleted file mode 100644
index 52c704ca..00000000
--- a/packages/css-utils/src/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export function injectStyle(css: string) {
-  if (typeof document === 'undefined') return;
-
-  const head = document.head || document.getElementsByTagName('head')[0];
-  const style = document.createElement('style');
-
-  head.prepend(style);
-
-  style.appendChild(document.createTextNode(css));
-}
diff --git a/packages/minimap/README.md b/packages/minimap/README.md
new file mode 100644
index 00000000..76dafe39
--- /dev/null
+++ b/packages/minimap/README.md
@@ -0,0 +1,10 @@
+# @react-flow/minimap
+
+Mini map component for React Flow.
+
+## Installation 
+
+```sh 
+npm install @react-flow/minimap
+```
+
diff --git a/packages/minimap/package.json b/packages/minimap/package.json
index a352aaec..25907948 100644
--- a/packages/minimap/package.json
+++ b/packages/minimap/package.json
@@ -5,14 +5,24 @@
   "main": "dist/react-flow-minimap.cjs.js",
   "module": "dist/react-flow-minimap.esm.js",
   "license": "MIT",
+  "scripts": {
+    "build": "postcss src/*.css --config ../../postcss.config.json --dir dist"
+  },
   "dependencies": {
     "@react-flow/core": "^11.0.0",
-    "@react-flow/css-utils": "^11.0.0",
     "classcat": "^5.0.3",
     "zustand": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "postcss-cli": "^10.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-import": "^14.1.0",
+    "postcss-nested": "^5.0.6"
   }
 }
diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx
index f56452a3..6e390b1d 100644
--- a/packages/minimap/src/MiniMap.tsx
+++ b/packages/minimap/src/MiniMap.tsx
@@ -2,22 +2,11 @@
 import { memo, useId } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
-import {
-  useStore,
-  getRectOfNodes,
-  ReactFlowState,
-  Rect,
-  Panel,
-  getBoundsOfRects,
-} from '@react-flow/core';
-import { injectStyle } from '@react-flow/css-utils';
+import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@react-flow/core';
 
 import MiniMapNode from './MiniMapNode';
-import baseStyle from './style';
 import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
 
-injectStyle(baseStyle);
-
 declare const window: any;
 
 const defaultWidth = 200;
@@ -35,15 +24,11 @@ const selector = (s: ReactFlowState) => {
   return {
     nodes: nodes.filter((node) => !node.hidden && node.width && node.height),
     viewBB,
-    boundingRect:
-      nodes.length > 0
-        ? getBoundsOfRects(getRectOfNodes(nodes), viewBB)
-        : viewBB,
+    boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB,
   };
 };
 
-const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
-  func instanceof Function ? func : () => func;
+const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
 
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 
@@ -75,18 +60,11 @@ function MiniMap({
   const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
   const width = viewWidth + offset * 2;
   const height = viewHeight + offset * 2;
-  const shapeRendering =
-    typeof window === 'undefined' || !!window.chrome
-      ? 'crispEdges'
-      : 'geometricPrecision';
+  const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
   const labelledBy = `${ARIA_LABEL_KEY}-${minimapId}`;
 
   return (
-    <Panel
-      position={position}
-      style={style}
-      className={cc(['react-flow__minimap', className])}
-    >
+    <Panel position={position} style={style} className={cc(['react-flow__minimap', className])}>
       <svg
         width={elementWidth}
         height={elementHeight}
@@ -115,12 +93,8 @@ function MiniMap({
         })}
         <path
           className="react-flow__minimap-mask"
-          d={`M${x - offset},${y - offset}h${width + offset * 2}v${
-            height + offset * 2
-          }h${-width - offset * 2}z
-        M${viewBB.x},${viewBB.y}h${viewBB.width}v${
-            viewBB.height
-          }h${-viewBB.width}z`}
+          d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
           fill={maskColor}
           fillRule="evenodd"
         />
diff --git a/packages/minimap/src/style.ts b/packages/minimap/src/style.css
similarity index 53%
rename from packages/minimap/src/style.ts
rename to packages/minimap/src/style.css
index c1650df2..dbb9a931 100644
--- a/packages/minimap/src/style.ts
+++ b/packages/minimap/src/style.css
@@ -1,6 +1,3 @@
-const style = `
 .react-flow__minimap {
   background-color: #fff;
-}`;
-
-export default style;
+}
diff --git a/packages/renderer/src/theme-default.css b/packages/renderer/src/theme-default.css
deleted file mode 100644
index 8271aae5..00000000
--- a/packages/renderer/src/theme-default.css
+++ /dev/null
@@ -1 +0,0 @@
-@import '@react-flow/core/dist/theme-default.css';
diff --git a/postcss.config.js b/postcss.config.js
index e0a03cdb..92aba0ac 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   plugins: [
     require('postcss-nested'),
+    require('postcss-combine-duplicated-selectors'),
     require('autoprefixer'),
     require('postcss-import'),
   ],
diff --git a/yarn.lock b/yarn.lock
index 4faa1b08..19a63d6d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2187,13 +2187,38 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@react-flow/bundle@workspace:packages/bundle":
+  version: 0.0.0-use.local
+  resolution: "@react-flow/bundle@workspace:packages/bundle"
+  dependencies:
+    "@react-flow/background": 11.0.0
+    "@react-flow/controls": 11.0.0
+    "@react-flow/core": 11.0.0
+    "@react-flow/minimap": 11.0.0
+    autoprefixer: ^10.4.8
+    postcss: ^8.4.14
+    postcss-cli: ^10.0.0
+    postcss-combine-duplicated-selectors: ^10.0.3
+    postcss-import: ^14.1.0
+    postcss-nested: ^5.0.6
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  languageName: unknown
+  linkType: soft
+
 "@react-flow/controls@11.0.0, @react-flow/controls@workspace:packages/controls":
   version: 0.0.0-use.local
   resolution: "@react-flow/controls@workspace:packages/controls"
   dependencies:
     "@react-flow/core": ^11.0.0
-    "@react-flow/css-utils": ^11.0.0
+    autoprefixer: ^10.4.8
     classcat: ^5.0.3
+    postcss: ^8.4.16
+    postcss-cli: ^10.0.0
+    postcss-combine-duplicated-selectors: ^10.0.3
+    postcss-import: ^14.1.0
+    postcss-nested: ^5.0.6
   peerDependencies:
     react: ">=18"
     react-dom: ">=18"
@@ -2205,7 +2230,6 @@ __metadata:
   resolution: "@react-flow/core@workspace:packages/core"
   dependencies:
     "@babel/runtime": ^7.18.0
-    "@react-flow/css-utils": ^11.0.0
     "@types/d3": ^7.4.0
     "@types/react": ^18.0.15
     autoprefixer: ^10.4.8
@@ -2215,6 +2239,7 @@ __metadata:
     d3-zoom: ^3.0.0
     postcss: ^8.4.14
     postcss-cli: ^10.0.0
+    postcss-combine-duplicated-selectors: ^10.0.3
     postcss-import: ^14.1.0
     postcss-nested: ^5.0.6
     zustand: ^4.0.0
@@ -2224,41 +2249,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-flow/css-utils@^11.0.0, @react-flow/css-utils@workspace:packages/css-utils":
-  version: 0.0.0-use.local
-  resolution: "@react-flow/css-utils@workspace:packages/css-utils"
-  languageName: unknown
-  linkType: soft
-
 "@react-flow/minimap@11.0.0, @react-flow/minimap@workspace:packages/minimap":
   version: 0.0.0-use.local
   resolution: "@react-flow/minimap@workspace:packages/minimap"
   dependencies:
     "@react-flow/core": ^11.0.0
-    "@react-flow/css-utils": ^11.0.0
-    classcat: ^5.0.3
-    zustand: ^4.0.0
-  peerDependencies:
-    react: ^18.1.0
-    react-dom: ">=18"
-  languageName: unknown
-  linkType: soft
-
-"@react-flow/renderer@workspace:packages/renderer":
-  version: 0.0.0-use.local
-  resolution: "@react-flow/renderer@workspace:packages/renderer"
-  dependencies:
-    "@react-flow/background": 11.0.0
-    "@react-flow/controls": 11.0.0
-    "@react-flow/core": 11.0.0
-    "@react-flow/minimap": 11.0.0
     autoprefixer: ^10.4.8
-    postcss: ^8.4.14
+    classcat: ^5.0.3
+    postcss: ^8.4.16
     postcss-cli: ^10.0.0
+    postcss-combine-duplicated-selectors: ^10.0.3
     postcss-import: ^14.1.0
     postcss-nested: ^5.0.6
+    zustand: ^4.0.0
   peerDependencies:
-    react: ^18.1.0
+    react: ">=18"
     react-dom: ">=18"
   languageName: unknown
   linkType: soft
@@ -2389,6 +2394,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@trysound/sax@npm:0.2.0":
+  version: 0.2.0
+  resolution: "@trysound/sax@npm:0.2.0"
+  checksum: 11226c39b52b391719a2a92e10183e4260d9651f86edced166da1d95f39a0a1eaa470e44d14ac685ccd6d3df7e2002433782872c0feeb260d61e80f21250e65c
+  languageName: node
+  linkType: hard
+
 "@types/d3-array@npm:*":
   version: 3.0.3
   resolution: "@types/d3-array@npm:3.0.3"
@@ -3431,6 +3443,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"boolbase@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "boolbase@npm:1.0.0"
+  checksum: 3e25c80ef626c3a3487c73dbfc70ac322ec830666c9ad915d11b701142fab25ec1e63eff2c450c74347acfd2de854ccde865cd79ef4db1683f7c7b046ea43bb0
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -3468,7 +3487,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.20.2, browserslist@npm:^4.20.3, browserslist@npm:^4.21.0, browserslist@npm:^4.21.2, browserslist@npm:^4.21.3":
+"browserslist@npm:^4.0.0, browserslist@npm:^4.16.6, browserslist@npm:^4.20.2, browserslist@npm:^4.20.3, browserslist@npm:^4.21.0, browserslist@npm:^4.21.2, browserslist@npm:^4.21.3":
   version: 4.21.3
   resolution: "browserslist@npm:4.21.3"
   dependencies:
@@ -3581,6 +3600,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-api@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "caniuse-api@npm:3.0.0"
+  dependencies:
+    browserslist: ^4.0.0
+    caniuse-lite: ^1.0.0
+    lodash.memoize: ^4.1.2
+    lodash.uniq: ^4.5.0
+  checksum: db2a229383b20d0529b6b589dde99d7b6cb56ba371366f58cbbfa2929c9f42c01f873e2b6ef641d4eda9f0b4118de77dbb2805814670bdad4234bf08e720b0b4
+  languageName: node
+  linkType: hard
+
+"caniuse-lite@npm:^1.0.0":
+  version: 1.0.30001374
+  resolution: "caniuse-lite@npm:1.0.30001374"
+  checksum: a75656e971d7ef2af4d2f3529a4620ae1a45d09460601fbc34b26f6867f31bbca006f71d8840291c471a2f01fc1994044f319a5660241ffaf35a2d84535af442
+  languageName: node
+  linkType: hard
+
 "caniuse-lite@npm:^1.0.30001332, caniuse-lite@npm:^1.0.30001335, caniuse-lite@npm:^1.0.30001370":
   version: 1.0.30001370
   resolution: "caniuse-lite@npm:1.0.30001370"
@@ -3793,6 +3831,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"colord@npm:^2.9.1":
+  version: 2.9.2
+  resolution: "colord@npm:2.9.2"
+  checksum: 2aa6a9b3abbce74ba3c563886cfeb433ea0d7df5ad6f4a560005eddab1ddf7c0fc98f39b09b599767a19c86dd3837b77f66f036e479515d4b17347006dbd6d9f
+  languageName: node
+  linkType: hard
+
 "colorette@npm:^2.0.16":
   version: 2.0.19
   resolution: "colorette@npm:2.0.19"
@@ -3823,6 +3868,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "commander@npm:7.2.0"
+  checksum: 53501cbeee61d5157546c0bef0fedb6cdfc763a882136284bed9a07225f09a14b82d2a84e7637edfd1a679fb35ed9502fd58ef1d091e6287f60d790147f68ddc
+  languageName: node
+  linkType: hard
+
 "common-tags@npm:^1.8.0":
   version: 1.8.2
   resolution: "common-tags@npm:1.8.2"
@@ -3919,6 +3971,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-declaration-sorter@npm:^6.3.0":
+  version: 6.3.0
+  resolution: "css-declaration-sorter@npm:6.3.0"
+  peerDependencies:
+    postcss: ^8.0.9
+  checksum: 69ce1c2e0e854c043dccbb613f15e2911e2e12dd656d18cdae831baa6a6a8f9ef0d6560c456e3b41d28835e5e013bfdf9114eeba206564b1513ea968a3633c1f
+  languageName: node
+  linkType: hard
+
 "css-has-pseudo@npm:^3.0.4":
   version: 3.0.4
   resolution: "css-has-pseudo@npm:3.0.4"
@@ -3943,6 +4004,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-select@npm:^4.1.3":
+  version: 4.3.0
+  resolution: "css-select@npm:4.3.0"
+  dependencies:
+    boolbase: ^1.0.0
+    css-what: ^6.0.1
+    domhandler: ^4.3.1
+    domutils: ^2.8.0
+    nth-check: ^2.0.1
+  checksum: d6202736839194dd7f910320032e7cfc40372f025e4bf21ca5bf6eb0a33264f322f50ba9c0adc35dadd342d3d6fae5ca244779a4873afbfa76561e343f2058e0
+  languageName: node
+  linkType: hard
+
+"css-tree@npm:^1.1.2, css-tree@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "css-tree@npm:1.1.3"
+  dependencies:
+    mdn-data: 2.0.14
+    source-map: ^0.6.1
+  checksum: 79f9b81803991b6977b7fcb1588799270438274d89066ce08f117f5cdb5e20019b446d766c61506dd772c839df84caa16042d6076f20c97187f5abe3b50e7d1f
+  languageName: node
+  linkType: hard
+
+"css-what@npm:^6.0.1":
+  version: 6.1.0
+  resolution: "css-what@npm:6.1.0"
+  checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe
+  languageName: node
+  linkType: hard
+
 "cssdb@npm:^6.6.3":
   version: 6.6.3
   resolution: "cssdb@npm:6.6.3"
@@ -3959,6 +4050,76 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssnano-preset-default@npm:^5.2.12":
+  version: 5.2.12
+  resolution: "cssnano-preset-default@npm:5.2.12"
+  dependencies:
+    css-declaration-sorter: ^6.3.0
+    cssnano-utils: ^3.1.0
+    postcss-calc: ^8.2.3
+    postcss-colormin: ^5.3.0
+    postcss-convert-values: ^5.1.2
+    postcss-discard-comments: ^5.1.2
+    postcss-discard-duplicates: ^5.1.0
+    postcss-discard-empty: ^5.1.1
+    postcss-discard-overridden: ^5.1.0
+    postcss-merge-longhand: ^5.1.6
+    postcss-merge-rules: ^5.1.2
+    postcss-minify-font-values: ^5.1.0
+    postcss-minify-gradients: ^5.1.1
+    postcss-minify-params: ^5.1.3
+    postcss-minify-selectors: ^5.2.1
+    postcss-normalize-charset: ^5.1.0
+    postcss-normalize-display-values: ^5.1.0
+    postcss-normalize-positions: ^5.1.1
+    postcss-normalize-repeat-style: ^5.1.1
+    postcss-normalize-string: ^5.1.0
+    postcss-normalize-timing-functions: ^5.1.0
+    postcss-normalize-unicode: ^5.1.0
+    postcss-normalize-url: ^5.1.0
+    postcss-normalize-whitespace: ^5.1.1
+    postcss-ordered-values: ^5.1.3
+    postcss-reduce-initial: ^5.1.0
+    postcss-reduce-transforms: ^5.1.0
+    postcss-svgo: ^5.1.0
+    postcss-unique-selectors: ^5.1.1
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 3d6c05e7719f05c577c3123dc8f823ddc055ec5402ee8184cea1832c209a87ab11aa2aa2cba3e6f4ae6e144c1f3f5122fad1bc7c3086bc3441770f2733e03f58
+  languageName: node
+  linkType: hard
+
+"cssnano-utils@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "cssnano-utils@npm:3.1.0"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 975c84ce9174cf23bb1da1e9faed8421954607e9ea76440cd3bb0c1bea7e17e490d800fca5ae2812d1d9e9d5524eef23ede0a3f52497d7ccc628e5d7321536f2
+  languageName: node
+  linkType: hard
+
+"cssnano@npm:^5.1.12":
+  version: 5.1.12
+  resolution: "cssnano@npm:5.1.12"
+  dependencies:
+    cssnano-preset-default: ^5.2.12
+    lilconfig: ^2.0.3
+    yaml: ^1.10.2
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 5bc6a6195e7fe2065fbe6002dd09ce23f125956679232c823d9f28914e4ea7b72714b67c86e3b5369861253eb74c4df3079a9b839b8ddebe60e1f81d2292e224
+  languageName: node
+  linkType: hard
+
+"csso@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "csso@npm:4.2.0"
+  dependencies:
+    css-tree: ^1.1.2
+  checksum: 380ba9663da3bcea58dee358a0d8c4468bb6539be3c439dc266ac41c047217f52fd698fb7e4b6b6ccdfb8cf53ef4ceed8cc8ceccb8dfca2aa628319826b5b998
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2":
   version: 3.1.0
   resolution: "csstype@npm:3.1.0"
@@ -4327,6 +4488,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-serializer@npm:^1.0.1":
+  version: 1.4.1
+  resolution: "dom-serializer@npm:1.4.1"
+  dependencies:
+    domelementtype: ^2.0.1
+    domhandler: ^4.2.0
+    entities: ^2.0.0
+  checksum: fbb0b01f87a8a2d18e6e5a388ad0f7ec4a5c05c06d219377da1abc7bb0f674d804f4a8a94e3f71ff15f6cb7dcfc75704a54b261db672b9b3ab03da6b758b0b22
+  languageName: node
+  linkType: hard
+
+"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
+  version: 2.3.0
+  resolution: "domelementtype@npm:2.3.0"
+  checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
+  languageName: node
+  linkType: hard
+
+"domhandler@npm:^4.2.0, domhandler@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "domhandler@npm:4.3.1"
+  dependencies:
+    domelementtype: ^2.2.0
+  checksum: 4c665ceed016e1911bf7d1dadc09dc888090b64dee7851cccd2fcf5442747ec39c647bb1cb8c8919f8bbdd0f0c625a6bafeeed4b2d656bbecdbae893f43ffaaa
+  languageName: node
+  linkType: hard
+
+"domutils@npm:^2.8.0":
+  version: 2.8.0
+  resolution: "domutils@npm:2.8.0"
+  dependencies:
+    dom-serializer: ^1.0.1
+    domelementtype: ^2.2.0
+    domhandler: ^4.2.0
+  checksum: abf7434315283e9aadc2a24bac0e00eab07ae4313b40cc239f89d84d7315ebdfd2fb1b5bf750a96bc1b4403d7237c7b2ebf60459be394d625ead4ca89b934391
+  languageName: node
+  linkType: hard
+
 "duplexer@npm:~0.1.1":
   version: 0.1.2
   resolution: "duplexer@npm:0.1.2"
@@ -4392,6 +4591,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "entities@npm:2.2.0"
+  checksum: 19010dacaf0912c895ea262b4f6128574f9ccf8d4b3b65c7e8334ad0079b3706376360e28d8843ff50a78aabcb8f08f0a32dbfacdc77e47ed77ca08b713669b3
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -6343,7 +6549,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^2.0.5":
+"lilconfig@npm:^2.0.3, lilconfig@npm:^2.0.5":
   version: 2.0.6
   resolution: "lilconfig@npm:2.0.6"
   checksum: 40a3cd72f103b1be5975f2ac1850810b61d4053e20ab09be8d3aeddfe042187e1ba70b4651a7e70f95efa1642e7dc8b2ae395b317b7d7753b241b43cef7c0f7d
@@ -6434,6 +6640,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.memoize@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "lodash.memoize@npm:4.1.2"
+  checksum: 9ff3942feeccffa4f1fafa88d32f0d24fdc62fd15ded5a74a5f950ff5f0c6f61916157246744c620173dddf38d37095a92327d5fd3861e2063e736a5c207d089
+  languageName: node
+  linkType: hard
+
 "lodash.merge@npm:^4.6.2":
   version: 4.6.2
   resolution: "lodash.merge@npm:4.6.2"
@@ -6455,6 +6668,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.uniq@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "lodash.uniq@npm:4.5.0"
+  checksum: a4779b57a8d0f3c441af13d9afe7ecff22dd1b8ce1129849f71d9bbc8e8ee4e46dfb4b7c28f7ad3d67481edd6e51126e4e2a6ee276e25906d10f7140187c392d
+  languageName: node
+  linkType: hard
+
 "lodash@npm:^4.17.15, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
@@ -6575,6 +6795,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdn-data@npm:2.0.14":
+  version: 2.0.14
+  resolution: "mdn-data@npm:2.0.14"
+  checksum: 9d0128ed425a89f4cba8f787dca27ad9408b5cb1b220af2d938e2a0629d17d879a34d2cb19318bdb26c3f14c77dd5dfbae67211f5caaf07b61b1f2c5c8c7dc16
+  languageName: node
+  linkType: hard
+
 "meow@npm:^6.0.0":
   version: 6.1.1
   resolution: "meow@npm:6.1.1"
@@ -6966,6 +7193,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"normalize-url@npm:^6.0.1":
+  version: 6.1.0
+  resolution: "normalize-url@npm:6.1.0"
+  checksum: 4a4944631173e7d521d6b80e4c85ccaeceb2870f315584fa30121f505a6dfd86439c5e3fdd8cd9e0e291290c41d0c3599f0cb12ab356722ed242584c30348e50
+  languageName: node
+  linkType: hard
+
 "npm-bundled@npm:^1.1.1":
   version: 1.1.2
   resolution: "npm-bundled@npm:1.1.2"
@@ -7017,6 +7251,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nth-check@npm:^2.0.1":
+  version: 2.1.1
+  resolution: "nth-check@npm:2.1.1"
+  dependencies:
+    boolbase: ^1.0.0
+  checksum: 5afc3dafcd1573b08877ca8e6148c52abd565f1d06b1eb08caf982e3fa289a82f2cae697ffb55b5021e146d60443f1590a5d6b944844e944714a5b549675bcd3
+  languageName: node
+  linkType: hard
+
 "object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
@@ -7392,6 +7635,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-calc@npm:^8.2.3":
+  version: 8.2.4
+  resolution: "postcss-calc@npm:8.2.4"
+  dependencies:
+    postcss-selector-parser: ^6.0.9
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.2
+  checksum: 314b4cebb0c4ed0cf8356b4bce71eca78f5a7842e6a3942a3bba49db168d5296b2bd93c3f735ae1c616f2651d94719ade33becc03c73d2d79c7394fb7f73eabb
+  languageName: node
+  linkType: hard
+
 "postcss-clamp@npm:^4.1.0":
   version: 4.1.0
   resolution: "postcss-clamp@npm:4.1.0"
@@ -7460,6 +7715,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-colormin@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "postcss-colormin@npm:5.3.0"
+  dependencies:
+    browserslist: ^4.16.6
+    caniuse-api: ^3.0.0
+    colord: ^2.9.1
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 3d3e3cc25071407fb73d68541ca1039ebd154fceb649041461a8a3cab0400cc89b42dbb34a4eeaf573be4ba2370ce23af5e01aff5e03a8d72275f40605577212
+  languageName: node
+  linkType: hard
+
+"postcss-combine-duplicated-selectors@npm:^10.0.3":
+  version: 10.0.3
+  resolution: "postcss-combine-duplicated-selectors@npm:10.0.3"
+  dependencies:
+    postcss-selector-parser: ^6.0.4
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 45c3dff41d0cddb510752ed92fe8c7fc66e5cf88f4988314655419d3ecdf1dc66f484a25ee73f4f292da5da851a0fdba0ec4d59bdedeee935d05b26d31d997ed
+  languageName: node
+  linkType: hard
+
+"postcss-convert-values@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "postcss-convert-values@npm:5.1.2"
+  dependencies:
+    browserslist: ^4.20.3
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: b1615daf12d3425bf4edee9451de402702f41019ccfc85f7883d87438becf533b3061a5a3567865029c534147a6c90e89b4c42ae6741c768c879a68d35aea812
+  languageName: node
+  linkType: hard
+
 "postcss-custom-media@npm:^8.0.2":
   version: 8.0.2
   resolution: "postcss-custom-media@npm:8.0.2"
@@ -7504,6 +7796,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-discard-comments@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "postcss-discard-comments@npm:5.1.2"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: abfd064ebc27aeaf5037643dd51ffaff74d1fa4db56b0523d073ace4248cbb64ffd9787bd6924b0983a9d0bd0e9bf9f10d73b120e50391dc236e0d26c812fa2a
+  languageName: node
+  linkType: hard
+
+"postcss-discard-duplicates@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-discard-duplicates@npm:5.1.0"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 88d6964201b1f4ed6bf7a32cefe68e86258bb6e42316ca01d9b32bdb18e7887d02594f89f4a2711d01b51ea6e3fcca8c54be18a59770fe5f4521c61d3eb6ca35
+  languageName: node
+  linkType: hard
+
+"postcss-discard-empty@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-discard-empty@npm:5.1.1"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 970adb12fae5c214c0768236ad9a821552626e77dedbf24a8213d19cc2c4a531a757cd3b8cdd3fc22fb1742471b8692a1db5efe436a71236dec12b1318ee8ff4
+  languageName: node
+  linkType: hard
+
+"postcss-discard-overridden@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-discard-overridden@npm:5.1.0"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: d64d4a545aa2c81b22542895cfcddc787d24119f294d35d29b0599a1c818b3cc51f4ee80b80f5a0a09db282453dd5ac49f104c2117cc09112d0ac9b40b499a41
+  languageName: node
+  linkType: hard
+
 "postcss-double-position-gradients@npm:^3.1.1":
   version: 3.1.2
   resolution: "postcss-double-position-gradients@npm:3.1.2"
@@ -7657,6 +7985,80 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-merge-longhand@npm:^5.1.6":
+  version: 5.1.6
+  resolution: "postcss-merge-longhand@npm:5.1.6"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+    stylehacks: ^5.1.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 327b5474d9e84b8d8aed3e24444938cbf1274326d357b551b700203f03f7bcb615381b92b933770ffe35b154677205af08875373413f2c5e625c34730599707b
+  languageName: node
+  linkType: hard
+
+"postcss-merge-rules@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "postcss-merge-rules@npm:5.1.2"
+  dependencies:
+    browserslist: ^4.16.6
+    caniuse-api: ^3.0.0
+    cssnano-utils: ^3.1.0
+    postcss-selector-parser: ^6.0.5
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: fcbc415999a35248dcce03064a5456123663507b05ff0f1de5c97b6effc68014ab0ffd5f06e71cf08d401f037932e271b7db33124c73260f3630a1441212a0c8
+  languageName: node
+  linkType: hard
+
+"postcss-minify-font-values@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-minify-font-values@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 35e858fa41efa05acdeb28f1c76579c409fdc7eabb1744c3bd76e895bb9fea341a016746362a67609688ab2471f587202b9a3e14ea28ad677754d663a2777ece
+  languageName: node
+  linkType: hard
+
+"postcss-minify-gradients@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-minify-gradients@npm:5.1.1"
+  dependencies:
+    colord: ^2.9.1
+    cssnano-utils: ^3.1.0
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 27354072a07c5e6dab36731103b94ca2354d4ed3c5bc6aacfdf2ede5a55fa324679d8fee5450800bc50888dbb5e9ed67569c0012040c2be128143d0cebb36d67
+  languageName: node
+  linkType: hard
+
+"postcss-minify-params@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "postcss-minify-params@npm:5.1.3"
+  dependencies:
+    browserslist: ^4.16.6
+    cssnano-utils: ^3.1.0
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 2d218f6b82474310c866b690210595a5e6a4c695f174f9100b018adb4a171bd67b1adaba26c241b3d41a4ea0f4962e0f5a77cf12ae60d9db76f80b0c7cbd6bcd
+  languageName: node
+  linkType: hard
+
+"postcss-minify-selectors@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "postcss-minify-selectors@npm:5.2.1"
+  dependencies:
+    postcss-selector-parser: ^6.0.5
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 6fdbc84f99a60d56b43df8930707da397775e4c36062a106aea2fd2ac81b5e24e584a1892f4baa4469fa495cb87d1422560eaa8f6c9d500f9f0b691a5f95bab5
+  languageName: node
+  linkType: hard
+
 "postcss-nested@npm:^5.0.6":
   version: 5.0.6
   resolution: "postcss-nested@npm:5.0.6"
@@ -7680,6 +8082,105 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-normalize-charset@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-charset@npm:5.1.0"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: e79d92971fc05b8b3c9b72f3535a574e077d13c69bef68156a0965f397fdf157de670da72b797f57b0e3bac8f38155b5dd1735ecab143b9cc4032d72138193b4
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-display-values@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-display-values@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: b6eb7b9b02c3bdd62bbc54e01e2b59733d73a1c156905d238e178762962efe0c6f5104544da39f32cade8a4fb40f10ff54b63a8ebfbdff51e8780afb9fbdcf86
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-positions@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-normalize-positions@npm:5.1.1"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: d9afc233729c496463c7b1cdd06732469f401deb387484c3a2422125b46ec10b4af794c101f8c023af56f01970b72b535e88373b9058ecccbbf88db81662b3c4
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-repeat-style@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-normalize-repeat-style@npm:5.1.1"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 2c6ad2b0ae10a1fda156b948c34f78c8f1e185513593de4d7e2480973586675520edfec427645fa168c337b0a6b3ceca26f92b96149741ca98a9806dad30d534
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-string@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-string@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 6e549c6e5b2831e34c7bdd46d8419e2278f6af1d5eef6d26884a37c162844e60339340c57e5e06058cdbe32f27fc6258eef233e811ed2f71168ef2229c236ada
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-timing-functions@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-timing-functions@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: da550f50e90b0b23e17b67449a7d1efd1aa68288e66d4aa7614ca6f5cc012896be1972b7168eee673d27da36504faccf7b9f835c0f7e81243f966a42c8c030aa
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-unicode@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-unicode@npm:5.1.0"
+  dependencies:
+    browserslist: ^4.16.6
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 3570c90050f190811b5dbf7b4cf4f30f0b627c1ba5fbe5ad332e8b0aa7ef14b3d0aa2af1cb1074d0267aec8c9771e28866d867c8a8a0c433b6c34e50445f9c16
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-url@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-url@npm:5.1.0"
+  dependencies:
+    normalize-url: ^6.0.1
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 3bd4b3246d6600230bc827d1760b24cb3101827ec97570e3016cbe04dc0dd28f4dbe763245d1b9d476e182c843008fbea80823061f1d2219b96f0d5c724a24c0
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-whitespace@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-normalize-whitespace@npm:5.1.1"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 12d8fb6d1c1cba208cc08c1830959b7d7ad447c3f5581873f7e185f99a9a4230c43d3af21ca12c818e4690a5085a95b01635b762ad4a7bef69d642609b4c0e19
+  languageName: node
+  linkType: hard
+
 "postcss-opacity-percentage@npm:^1.1.2":
   version: 1.1.2
   resolution: "postcss-opacity-percentage@npm:1.1.2"
@@ -7687,6 +8188,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-ordered-values@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "postcss-ordered-values@npm:5.1.3"
+  dependencies:
+    cssnano-utils: ^3.1.0
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 6f3ca85b6ceffc68aadaf319d9ee4c5ac16d93195bf8cba2d1559b631555ad61941461cda6d3909faab86e52389846b2b36345cff8f0c3f4eb345b1b8efadcf9
+  languageName: node
+  linkType: hard
+
 "postcss-overflow-shorthand@npm:^3.0.3":
   version: 3.0.4
   resolution: "postcss-overflow-shorthand@npm:3.0.4"
@@ -7786,6 +8299,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-reduce-initial@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-reduce-initial@npm:5.1.0"
+  dependencies:
+    browserslist: ^4.16.6
+    caniuse-api: ^3.0.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 2cb10fa3fa7d7df9e4376df64d19177debd5cfe6d8fde52327d27de425eb28d5d85fa45c857cf7c0aed35d16455b6f4762b53959480f92a1dfa4b51a1d780a32
+  languageName: node
+  linkType: hard
+
+"postcss-reduce-transforms@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-reduce-transforms@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 0c6af2cba20e3ff63eb9ad045e634ddfb9c3e5c0e614c020db2a02f3aa20632318c4ede9e0c995f9225d9a101e673de91c0a6e10bb2fa5da6d6c75d15a55882f
+  languageName: node
+  linkType: hard
+
 "postcss-replace-overflow-wrap@npm:^4.0.0":
   version: 4.0.0
   resolution: "postcss-replace-overflow-wrap@npm:4.0.0"
@@ -7818,7 +8354,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.6, postcss-selector-parser@npm:^6.0.9":
+"postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.6, postcss-selector-parser@npm:^6.0.9":
   version: 6.0.10
   resolution: "postcss-selector-parser@npm:6.0.10"
   dependencies:
@@ -7828,6 +8364,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-svgo@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-svgo@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+    svgo: ^2.7.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: d86eb5213d9f700cf5efe3073799b485fb7cacae0c731db3d7749c9c2b1c9bc85e95e0baeca439d699ff32ea24815fc916c4071b08f67ed8219df229ce1129bd
+  languageName: node
+  linkType: hard
+
+"postcss-unique-selectors@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-unique-selectors@npm:5.1.1"
+  dependencies:
+    postcss-selector-parser: ^6.0.5
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 637e7b786e8558265775c30400c54b6b3b24d4748923f4a39f16a65fd0e394f564ccc9f0a1d3c0e770618a7637a7502ea1d0d79f731d429cb202255253c23278
+  languageName: node
+  linkType: hard
+
 "postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
@@ -8062,6 +8621,7 @@ __metadata:
     next: 12.2.2
     postcss: ^8.4.16
     postcss-flexbugs-fixes: ^5.0.2
+    postcss-import: ^14.1.0
     postcss-nested: ^5.0.6
     postcss-preset-env: ^7.7.2
     react: 18.2.0
@@ -8082,12 +8642,14 @@ __metadata:
     "@typescript-eslint/eslint-plugin": latest
     "@typescript-eslint/parser": latest
     autoprefixer: ^10.4.8
+    cssnano: ^5.1.12
     cypress: ^10.3.1
     eslint: ^8.21.0
     eslint-config-prettier: ^8.5.0
     eslint-plugin-prettier: ^4.2.1
     eslint-plugin-react: latest
     postcss: ^8.4.16
+    postcss-combine-duplicated-selectors: ^10.0.3
     postcss-import: ^14.1.0
     postcss-nested: ^5.0.6
     prettier: ^2.7.1
@@ -8655,7 +9217,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.6.0":
+"source-map@npm:^0.6.0, source-map@npm:^0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
   checksum: 59ce8640cf3f3124f64ac289012c2b8bd377c238e316fb323ea22fbfe83da07d81e000071d7242cad7a23cd91c7de98e4df8830ec3f133cb6133a5f6e9f67bc2
@@ -8759,6 +9321,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stable@npm:^0.1.8":
+  version: 0.1.8
+  resolution: "stable@npm:0.1.8"
+  checksum: 2ff482bb100285d16dd75cd8f7c60ab652570e8952c0bfa91828a2b5f646a0ff533f14596ea4eabd48bb7f4aeea408dce8f8515812b975d958a4cc4fa6b9dfeb
+  languageName: node
+  linkType: hard
+
 "start-server-and-test@npm:^1.14.0":
   version: 1.14.0
   resolution: "start-server-and-test@npm:1.14.0"
@@ -8907,6 +9476,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylehacks@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "stylehacks@npm:5.1.0"
+  dependencies:
+    browserslist: ^4.16.6
+    postcss-selector-parser: ^6.0.4
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 310b3452c11fd443b0d327aa2d5b43ae7479407339204b7ad11cf2e16d33b690c1cbf47a21b737ef112411e53563f0f996c5fa3642d135c896329950a008277f
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -8941,6 +9522,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svgo@npm:^2.7.0":
+  version: 2.8.0
+  resolution: "svgo@npm:2.8.0"
+  dependencies:
+    "@trysound/sax": 0.2.0
+    commander: ^7.2.0
+    css-select: ^4.1.3
+    css-tree: ^1.1.3
+    csso: ^4.2.0
+    picocolors: ^1.0.0
+    stable: ^0.1.8
+  bin:
+    svgo: bin/svgo
+  checksum: b92f71a8541468ffd0b81b8cdb36b1e242eea320bf3c1a9b2c8809945853e9d8c80c19744267eb91cabf06ae9d5fff3592d677df85a31be4ed59ff78534fa420
+  languageName: node
+  linkType: hard
+
 "tar@npm:^6.1.11, tar@npm:^6.1.2":
   version: 6.1.11
   resolution: "tar@npm:6.1.11"
@@ -9505,6 +10103,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^1.10.2":
+  version: 1.10.2
+  resolution: "yaml@npm:1.10.2"
+  checksum: ce4ada136e8a78a0b08dc10b4b900936912d15de59905b2bf415b4d33c63df1d555d23acb2a41b23cf9fb5da41c256441afca3d6509de7247daa062fd2c5ea5f
+  languageName: node
+  linkType: hard
+
 "yaml@npm:^2.1.1":
   version: 2.1.1
   resolution: "yaml@npm:2.1.1"

From affae72f7e203f8185af2457ba63993e43c56020 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 9 Aug 2022 18:47:36 +0200
Subject: [PATCH 2/4] refactor(deps): cleanup

---
 package.json |   1 -
 yarn.lock    | 595 +--------------------------------------------------
 2 files changed, 4 insertions(+), 592 deletions(-)

diff --git a/package.json b/package.json
index 37f41225..86c41241 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,6 @@
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",
     "autoprefixer": "^10.4.8",
-    "cssnano": "^5.1.12",
     "cypress": "^10.3.1",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
diff --git a/yarn.lock b/yarn.lock
index 19a63d6d..b162b833 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2394,13 +2394,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@trysound/sax@npm:0.2.0":
-  version: 0.2.0
-  resolution: "@trysound/sax@npm:0.2.0"
-  checksum: 11226c39b52b391719a2a92e10183e4260d9651f86edced166da1d95f39a0a1eaa470e44d14ac685ccd6d3df7e2002433782872c0feeb260d61e80f21250e65c
-  languageName: node
-  linkType: hard
-
 "@types/d3-array@npm:*":
   version: 3.0.3
   resolution: "@types/d3-array@npm:3.0.3"
@@ -3443,13 +3436,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"boolbase@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "boolbase@npm:1.0.0"
-  checksum: 3e25c80ef626c3a3487c73dbfc70ac322ec830666c9ad915d11b701142fab25ec1e63eff2c450c74347acfd2de854ccde865cd79ef4db1683f7c7b046ea43bb0
-  languageName: node
-  linkType: hard
-
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -3487,7 +3473,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.0.0, browserslist@npm:^4.16.6, browserslist@npm:^4.20.2, browserslist@npm:^4.20.3, browserslist@npm:^4.21.0, browserslist@npm:^4.21.2, browserslist@npm:^4.21.3":
+"browserslist@npm:^4.20.2, browserslist@npm:^4.20.3, browserslist@npm:^4.21.0, browserslist@npm:^4.21.2, browserslist@npm:^4.21.3":
   version: 4.21.3
   resolution: "browserslist@npm:4.21.3"
   dependencies:
@@ -3600,25 +3586,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-api@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "caniuse-api@npm:3.0.0"
-  dependencies:
-    browserslist: ^4.0.0
-    caniuse-lite: ^1.0.0
-    lodash.memoize: ^4.1.2
-    lodash.uniq: ^4.5.0
-  checksum: db2a229383b20d0529b6b589dde99d7b6cb56ba371366f58cbbfa2929c9f42c01f873e2b6ef641d4eda9f0b4118de77dbb2805814670bdad4234bf08e720b0b4
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.0":
-  version: 1.0.30001374
-  resolution: "caniuse-lite@npm:1.0.30001374"
-  checksum: a75656e971d7ef2af4d2f3529a4620ae1a45d09460601fbc34b26f6867f31bbca006f71d8840291c471a2f01fc1994044f319a5660241ffaf35a2d84535af442
-  languageName: node
-  linkType: hard
-
 "caniuse-lite@npm:^1.0.30001332, caniuse-lite@npm:^1.0.30001335, caniuse-lite@npm:^1.0.30001370":
   version: 1.0.30001370
   resolution: "caniuse-lite@npm:1.0.30001370"
@@ -3831,13 +3798,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colord@npm:^2.9.1":
-  version: 2.9.2
-  resolution: "colord@npm:2.9.2"
-  checksum: 2aa6a9b3abbce74ba3c563886cfeb433ea0d7df5ad6f4a560005eddab1ddf7c0fc98f39b09b599767a19c86dd3837b77f66f036e479515d4b17347006dbd6d9f
-  languageName: node
-  linkType: hard
-
 "colorette@npm:^2.0.16":
   version: 2.0.19
   resolution: "colorette@npm:2.0.19"
@@ -3868,13 +3828,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^7.2.0":
-  version: 7.2.0
-  resolution: "commander@npm:7.2.0"
-  checksum: 53501cbeee61d5157546c0bef0fedb6cdfc763a882136284bed9a07225f09a14b82d2a84e7637edfd1a679fb35ed9502fd58ef1d091e6287f60d790147f68ddc
-  languageName: node
-  linkType: hard
-
 "common-tags@npm:^1.8.0":
   version: 1.8.2
   resolution: "common-tags@npm:1.8.2"
@@ -3971,15 +3924,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-declaration-sorter@npm:^6.3.0":
-  version: 6.3.0
-  resolution: "css-declaration-sorter@npm:6.3.0"
-  peerDependencies:
-    postcss: ^8.0.9
-  checksum: 69ce1c2e0e854c043dccbb613f15e2911e2e12dd656d18cdae831baa6a6a8f9ef0d6560c456e3b41d28835e5e013bfdf9114eeba206564b1513ea968a3633c1f
-  languageName: node
-  linkType: hard
-
 "css-has-pseudo@npm:^3.0.4":
   version: 3.0.4
   resolution: "css-has-pseudo@npm:3.0.4"
@@ -4004,36 +3948,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-select@npm:^4.1.3":
-  version: 4.3.0
-  resolution: "css-select@npm:4.3.0"
-  dependencies:
-    boolbase: ^1.0.0
-    css-what: ^6.0.1
-    domhandler: ^4.3.1
-    domutils: ^2.8.0
-    nth-check: ^2.0.1
-  checksum: d6202736839194dd7f910320032e7cfc40372f025e4bf21ca5bf6eb0a33264f322f50ba9c0adc35dadd342d3d6fae5ca244779a4873afbfa76561e343f2058e0
-  languageName: node
-  linkType: hard
-
-"css-tree@npm:^1.1.2, css-tree@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "css-tree@npm:1.1.3"
-  dependencies:
-    mdn-data: 2.0.14
-    source-map: ^0.6.1
-  checksum: 79f9b81803991b6977b7fcb1588799270438274d89066ce08f117f5cdb5e20019b446d766c61506dd772c839df84caa16042d6076f20c97187f5abe3b50e7d1f
-  languageName: node
-  linkType: hard
-
-"css-what@npm:^6.0.1":
-  version: 6.1.0
-  resolution: "css-what@npm:6.1.0"
-  checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe
-  languageName: node
-  linkType: hard
-
 "cssdb@npm:^6.6.3":
   version: 6.6.3
   resolution: "cssdb@npm:6.6.3"
@@ -4050,76 +3964,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssnano-preset-default@npm:^5.2.12":
-  version: 5.2.12
-  resolution: "cssnano-preset-default@npm:5.2.12"
-  dependencies:
-    css-declaration-sorter: ^6.3.0
-    cssnano-utils: ^3.1.0
-    postcss-calc: ^8.2.3
-    postcss-colormin: ^5.3.0
-    postcss-convert-values: ^5.1.2
-    postcss-discard-comments: ^5.1.2
-    postcss-discard-duplicates: ^5.1.0
-    postcss-discard-empty: ^5.1.1
-    postcss-discard-overridden: ^5.1.0
-    postcss-merge-longhand: ^5.1.6
-    postcss-merge-rules: ^5.1.2
-    postcss-minify-font-values: ^5.1.0
-    postcss-minify-gradients: ^5.1.1
-    postcss-minify-params: ^5.1.3
-    postcss-minify-selectors: ^5.2.1
-    postcss-normalize-charset: ^5.1.0
-    postcss-normalize-display-values: ^5.1.0
-    postcss-normalize-positions: ^5.1.1
-    postcss-normalize-repeat-style: ^5.1.1
-    postcss-normalize-string: ^5.1.0
-    postcss-normalize-timing-functions: ^5.1.0
-    postcss-normalize-unicode: ^5.1.0
-    postcss-normalize-url: ^5.1.0
-    postcss-normalize-whitespace: ^5.1.1
-    postcss-ordered-values: ^5.1.3
-    postcss-reduce-initial: ^5.1.0
-    postcss-reduce-transforms: ^5.1.0
-    postcss-svgo: ^5.1.0
-    postcss-unique-selectors: ^5.1.1
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 3d6c05e7719f05c577c3123dc8f823ddc055ec5402ee8184cea1832c209a87ab11aa2aa2cba3e6f4ae6e144c1f3f5122fad1bc7c3086bc3441770f2733e03f58
-  languageName: node
-  linkType: hard
-
-"cssnano-utils@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "cssnano-utils@npm:3.1.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 975c84ce9174cf23bb1da1e9faed8421954607e9ea76440cd3bb0c1bea7e17e490d800fca5ae2812d1d9e9d5524eef23ede0a3f52497d7ccc628e5d7321536f2
-  languageName: node
-  linkType: hard
-
-"cssnano@npm:^5.1.12":
-  version: 5.1.12
-  resolution: "cssnano@npm:5.1.12"
-  dependencies:
-    cssnano-preset-default: ^5.2.12
-    lilconfig: ^2.0.3
-    yaml: ^1.10.2
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 5bc6a6195e7fe2065fbe6002dd09ce23f125956679232c823d9f28914e4ea7b72714b67c86e3b5369861253eb74c4df3079a9b839b8ddebe60e1f81d2292e224
-  languageName: node
-  linkType: hard
-
-"csso@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "csso@npm:4.2.0"
-  dependencies:
-    css-tree: ^1.1.2
-  checksum: 380ba9663da3bcea58dee358a0d8c4468bb6539be3c439dc266ac41c047217f52fd698fb7e4b6b6ccdfb8cf53ef4ceed8cc8ceccb8dfca2aa628319826b5b998
-  languageName: node
-  linkType: hard
-
 "csstype@npm:^3.0.2":
   version: 3.1.0
   resolution: "csstype@npm:3.1.0"
@@ -4488,44 +4332,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-serializer@npm:^1.0.1":
-  version: 1.4.1
-  resolution: "dom-serializer@npm:1.4.1"
-  dependencies:
-    domelementtype: ^2.0.1
-    domhandler: ^4.2.0
-    entities: ^2.0.0
-  checksum: fbb0b01f87a8a2d18e6e5a388ad0f7ec4a5c05c06d219377da1abc7bb0f674d804f4a8a94e3f71ff15f6cb7dcfc75704a54b261db672b9b3ab03da6b758b0b22
-  languageName: node
-  linkType: hard
-
-"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
-  version: 2.3.0
-  resolution: "domelementtype@npm:2.3.0"
-  checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
-  languageName: node
-  linkType: hard
-
-"domhandler@npm:^4.2.0, domhandler@npm:^4.3.1":
-  version: 4.3.1
-  resolution: "domhandler@npm:4.3.1"
-  dependencies:
-    domelementtype: ^2.2.0
-  checksum: 4c665ceed016e1911bf7d1dadc09dc888090b64dee7851cccd2fcf5442747ec39c647bb1cb8c8919f8bbdd0f0c625a6bafeeed4b2d656bbecdbae893f43ffaaa
-  languageName: node
-  linkType: hard
-
-"domutils@npm:^2.8.0":
-  version: 2.8.0
-  resolution: "domutils@npm:2.8.0"
-  dependencies:
-    dom-serializer: ^1.0.1
-    domelementtype: ^2.2.0
-    domhandler: ^4.2.0
-  checksum: abf7434315283e9aadc2a24bac0e00eab07ae4313b40cc239f89d84d7315ebdfd2fb1b5bf750a96bc1b4403d7237c7b2ebf60459be394d625ead4ca89b934391
-  languageName: node
-  linkType: hard
-
 "duplexer@npm:~0.1.1":
   version: 0.1.2
   resolution: "duplexer@npm:0.1.2"
@@ -4591,13 +4397,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^2.0.0":
-  version: 2.2.0
-  resolution: "entities@npm:2.2.0"
-  checksum: 19010dacaf0912c895ea262b4f6128574f9ccf8d4b3b65c7e8334ad0079b3706376360e28d8843ff50a78aabcb8f08f0a32dbfacdc77e47ed77ca08b713669b3
-  languageName: node
-  linkType: hard
-
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -6549,7 +6348,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^2.0.3, lilconfig@npm:^2.0.5":
+"lilconfig@npm:^2.0.5":
   version: 2.0.6
   resolution: "lilconfig@npm:2.0.6"
   checksum: 40a3cd72f103b1be5975f2ac1850810b61d4053e20ab09be8d3aeddfe042187e1ba70b4651a7e70f95efa1642e7dc8b2ae395b317b7d7753b241b43cef7c0f7d
@@ -6640,13 +6439,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.memoize@npm:^4.1.2":
-  version: 4.1.2
-  resolution: "lodash.memoize@npm:4.1.2"
-  checksum: 9ff3942feeccffa4f1fafa88d32f0d24fdc62fd15ded5a74a5f950ff5f0c6f61916157246744c620173dddf38d37095a92327d5fd3861e2063e736a5c207d089
-  languageName: node
-  linkType: hard
-
 "lodash.merge@npm:^4.6.2":
   version: 4.6.2
   resolution: "lodash.merge@npm:4.6.2"
@@ -6668,13 +6460,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.uniq@npm:^4.5.0":
-  version: 4.5.0
-  resolution: "lodash.uniq@npm:4.5.0"
-  checksum: a4779b57a8d0f3c441af13d9afe7ecff22dd1b8ce1129849f71d9bbc8e8ee4e46dfb4b7c28f7ad3d67481edd6e51126e4e2a6ee276e25906d10f7140187c392d
-  languageName: node
-  linkType: hard
-
 "lodash@npm:^4.17.15, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
@@ -6795,13 +6580,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdn-data@npm:2.0.14":
-  version: 2.0.14
-  resolution: "mdn-data@npm:2.0.14"
-  checksum: 9d0128ed425a89f4cba8f787dca27ad9408b5cb1b220af2d938e2a0629d17d879a34d2cb19318bdb26c3f14c77dd5dfbae67211f5caaf07b61b1f2c5c8c7dc16
-  languageName: node
-  linkType: hard
-
 "meow@npm:^6.0.0":
   version: 6.1.1
   resolution: "meow@npm:6.1.1"
@@ -7193,13 +6971,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-url@npm:^6.0.1":
-  version: 6.1.0
-  resolution: "normalize-url@npm:6.1.0"
-  checksum: 4a4944631173e7d521d6b80e4c85ccaeceb2870f315584fa30121f505a6dfd86439c5e3fdd8cd9e0e291290c41d0c3599f0cb12ab356722ed242584c30348e50
-  languageName: node
-  linkType: hard
-
 "npm-bundled@npm:^1.1.1":
   version: 1.1.2
   resolution: "npm-bundled@npm:1.1.2"
@@ -7251,15 +7022,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nth-check@npm:^2.0.1":
-  version: 2.1.1
-  resolution: "nth-check@npm:2.1.1"
-  dependencies:
-    boolbase: ^1.0.0
-  checksum: 5afc3dafcd1573b08877ca8e6148c52abd565f1d06b1eb08caf982e3fa289a82f2cae697ffb55b5021e146d60443f1590a5d6b944844e944714a5b549675bcd3
-  languageName: node
-  linkType: hard
-
 "object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
@@ -7635,18 +7397,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-calc@npm:^8.2.3":
-  version: 8.2.4
-  resolution: "postcss-calc@npm:8.2.4"
-  dependencies:
-    postcss-selector-parser: ^6.0.9
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.2
-  checksum: 314b4cebb0c4ed0cf8356b4bce71eca78f5a7842e6a3942a3bba49db168d5296b2bd93c3f735ae1c616f2651d94719ade33becc03c73d2d79c7394fb7f73eabb
-  languageName: node
-  linkType: hard
-
 "postcss-clamp@npm:^4.1.0":
   version: 4.1.0
   resolution: "postcss-clamp@npm:4.1.0"
@@ -7715,20 +7465,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-colormin@npm:^5.3.0":
-  version: 5.3.0
-  resolution: "postcss-colormin@npm:5.3.0"
-  dependencies:
-    browserslist: ^4.16.6
-    caniuse-api: ^3.0.0
-    colord: ^2.9.1
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 3d3e3cc25071407fb73d68541ca1039ebd154fceb649041461a8a3cab0400cc89b42dbb34a4eeaf573be4ba2370ce23af5e01aff5e03a8d72275f40605577212
-  languageName: node
-  linkType: hard
-
 "postcss-combine-duplicated-selectors@npm:^10.0.3":
   version: 10.0.3
   resolution: "postcss-combine-duplicated-selectors@npm:10.0.3"
@@ -7740,18 +7476,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-convert-values@npm:^5.1.2":
-  version: 5.1.2
-  resolution: "postcss-convert-values@npm:5.1.2"
-  dependencies:
-    browserslist: ^4.20.3
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: b1615daf12d3425bf4edee9451de402702f41019ccfc85f7883d87438becf533b3061a5a3567865029c534147a6c90e89b4c42ae6741c768c879a68d35aea812
-  languageName: node
-  linkType: hard
-
 "postcss-custom-media@npm:^8.0.2":
   version: 8.0.2
   resolution: "postcss-custom-media@npm:8.0.2"
@@ -7796,42 +7520,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-discard-comments@npm:^5.1.2":
-  version: 5.1.2
-  resolution: "postcss-discard-comments@npm:5.1.2"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: abfd064ebc27aeaf5037643dd51ffaff74d1fa4db56b0523d073ace4248cbb64ffd9787bd6924b0983a9d0bd0e9bf9f10d73b120e50391dc236e0d26c812fa2a
-  languageName: node
-  linkType: hard
-
-"postcss-discard-duplicates@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-discard-duplicates@npm:5.1.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 88d6964201b1f4ed6bf7a32cefe68e86258bb6e42316ca01d9b32bdb18e7887d02594f89f4a2711d01b51ea6e3fcca8c54be18a59770fe5f4521c61d3eb6ca35
-  languageName: node
-  linkType: hard
-
-"postcss-discard-empty@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-discard-empty@npm:5.1.1"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 970adb12fae5c214c0768236ad9a821552626e77dedbf24a8213d19cc2c4a531a757cd3b8cdd3fc22fb1742471b8692a1db5efe436a71236dec12b1318ee8ff4
-  languageName: node
-  linkType: hard
-
-"postcss-discard-overridden@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-discard-overridden@npm:5.1.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: d64d4a545aa2c81b22542895cfcddc787d24119f294d35d29b0599a1c818b3cc51f4ee80b80f5a0a09db282453dd5ac49f104c2117cc09112d0ac9b40b499a41
-  languageName: node
-  linkType: hard
-
 "postcss-double-position-gradients@npm:^3.1.1":
   version: 3.1.2
   resolution: "postcss-double-position-gradients@npm:3.1.2"
@@ -7985,80 +7673,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-merge-longhand@npm:^5.1.6":
-  version: 5.1.6
-  resolution: "postcss-merge-longhand@npm:5.1.6"
-  dependencies:
-    postcss-value-parser: ^4.2.0
-    stylehacks: ^5.1.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 327b5474d9e84b8d8aed3e24444938cbf1274326d357b551b700203f03f7bcb615381b92b933770ffe35b154677205af08875373413f2c5e625c34730599707b
-  languageName: node
-  linkType: hard
-
-"postcss-merge-rules@npm:^5.1.2":
-  version: 5.1.2
-  resolution: "postcss-merge-rules@npm:5.1.2"
-  dependencies:
-    browserslist: ^4.16.6
-    caniuse-api: ^3.0.0
-    cssnano-utils: ^3.1.0
-    postcss-selector-parser: ^6.0.5
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: fcbc415999a35248dcce03064a5456123663507b05ff0f1de5c97b6effc68014ab0ffd5f06e71cf08d401f037932e271b7db33124c73260f3630a1441212a0c8
-  languageName: node
-  linkType: hard
-
-"postcss-minify-font-values@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-minify-font-values@npm:5.1.0"
-  dependencies:
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 35e858fa41efa05acdeb28f1c76579c409fdc7eabb1744c3bd76e895bb9fea341a016746362a67609688ab2471f587202b9a3e14ea28ad677754d663a2777ece
-  languageName: node
-  linkType: hard
-
-"postcss-minify-gradients@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-minify-gradients@npm:5.1.1"
-  dependencies:
-    colord: ^2.9.1
-    cssnano-utils: ^3.1.0
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 27354072a07c5e6dab36731103b94ca2354d4ed3c5bc6aacfdf2ede5a55fa324679d8fee5450800bc50888dbb5e9ed67569c0012040c2be128143d0cebb36d67
-  languageName: node
-  linkType: hard
-
-"postcss-minify-params@npm:^5.1.3":
-  version: 5.1.3
-  resolution: "postcss-minify-params@npm:5.1.3"
-  dependencies:
-    browserslist: ^4.16.6
-    cssnano-utils: ^3.1.0
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 2d218f6b82474310c866b690210595a5e6a4c695f174f9100b018adb4a171bd67b1adaba26c241b3d41a4ea0f4962e0f5a77cf12ae60d9db76f80b0c7cbd6bcd
-  languageName: node
-  linkType: hard
-
-"postcss-minify-selectors@npm:^5.2.1":
-  version: 5.2.1
-  resolution: "postcss-minify-selectors@npm:5.2.1"
-  dependencies:
-    postcss-selector-parser: ^6.0.5
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 6fdbc84f99a60d56b43df8930707da397775e4c36062a106aea2fd2ac81b5e24e584a1892f4baa4469fa495cb87d1422560eaa8f6c9d500f9f0b691a5f95bab5
-  languageName: node
-  linkType: hard
-
 "postcss-nested@npm:^5.0.6":
   version: 5.0.6
   resolution: "postcss-nested@npm:5.0.6"
@@ -8082,105 +7696,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize-charset@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-normalize-charset@npm:5.1.0"
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: e79d92971fc05b8b3c9b72f3535a574e077d13c69bef68156a0965f397fdf157de670da72b797f57b0e3bac8f38155b5dd1735ecab143b9cc4032d72138193b4
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-display-values@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-normalize-display-values@npm:5.1.0"
-  dependencies:
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: b6eb7b9b02c3bdd62bbc54e01e2b59733d73a1c156905d238e178762962efe0c6f5104544da39f32cade8a4fb40f10ff54b63a8ebfbdff51e8780afb9fbdcf86
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-positions@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-normalize-positions@npm:5.1.1"
-  dependencies:
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: d9afc233729c496463c7b1cdd06732469f401deb387484c3a2422125b46ec10b4af794c101f8c023af56f01970b72b535e88373b9058ecccbbf88db81662b3c4
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-repeat-style@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-normalize-repeat-style@npm:5.1.1"
-  dependencies:
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 2c6ad2b0ae10a1fda156b948c34f78c8f1e185513593de4d7e2480973586675520edfec427645fa168c337b0a6b3ceca26f92b96149741ca98a9806dad30d534
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-string@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-normalize-string@npm:5.1.0"
-  dependencies:
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 6e549c6e5b2831e34c7bdd46d8419e2278f6af1d5eef6d26884a37c162844e60339340c57e5e06058cdbe32f27fc6258eef233e811ed2f71168ef2229c236ada
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-timing-functions@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-normalize-timing-functions@npm:5.1.0"
-  dependencies:
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: da550f50e90b0b23e17b67449a7d1efd1aa68288e66d4aa7614ca6f5cc012896be1972b7168eee673d27da36504faccf7b9f835c0f7e81243f966a42c8c030aa
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-unicode@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-normalize-unicode@npm:5.1.0"
-  dependencies:
-    browserslist: ^4.16.6
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 3570c90050f190811b5dbf7b4cf4f30f0b627c1ba5fbe5ad332e8b0aa7ef14b3d0aa2af1cb1074d0267aec8c9771e28866d867c8a8a0c433b6c34e50445f9c16
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-url@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-normalize-url@npm:5.1.0"
-  dependencies:
-    normalize-url: ^6.0.1
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 3bd4b3246d6600230bc827d1760b24cb3101827ec97570e3016cbe04dc0dd28f4dbe763245d1b9d476e182c843008fbea80823061f1d2219b96f0d5c724a24c0
-  languageName: node
-  linkType: hard
-
-"postcss-normalize-whitespace@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-normalize-whitespace@npm:5.1.1"
-  dependencies:
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 12d8fb6d1c1cba208cc08c1830959b7d7ad447c3f5581873f7e185f99a9a4230c43d3af21ca12c818e4690a5085a95b01635b762ad4a7bef69d642609b4c0e19
-  languageName: node
-  linkType: hard
-
 "postcss-opacity-percentage@npm:^1.1.2":
   version: 1.1.2
   resolution: "postcss-opacity-percentage@npm:1.1.2"
@@ -8188,18 +7703,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-ordered-values@npm:^5.1.3":
-  version: 5.1.3
-  resolution: "postcss-ordered-values@npm:5.1.3"
-  dependencies:
-    cssnano-utils: ^3.1.0
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 6f3ca85b6ceffc68aadaf319d9ee4c5ac16d93195bf8cba2d1559b631555ad61941461cda6d3909faab86e52389846b2b36345cff8f0c3f4eb345b1b8efadcf9
-  languageName: node
-  linkType: hard
-
 "postcss-overflow-shorthand@npm:^3.0.3":
   version: 3.0.4
   resolution: "postcss-overflow-shorthand@npm:3.0.4"
@@ -8299,29 +7802,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-reduce-initial@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-reduce-initial@npm:5.1.0"
-  dependencies:
-    browserslist: ^4.16.6
-    caniuse-api: ^3.0.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 2cb10fa3fa7d7df9e4376df64d19177debd5cfe6d8fde52327d27de425eb28d5d85fa45c857cf7c0aed35d16455b6f4762b53959480f92a1dfa4b51a1d780a32
-  languageName: node
-  linkType: hard
-
-"postcss-reduce-transforms@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-reduce-transforms@npm:5.1.0"
-  dependencies:
-    postcss-value-parser: ^4.2.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 0c6af2cba20e3ff63eb9ad045e634ddfb9c3e5c0e614c020db2a02f3aa20632318c4ede9e0c995f9225d9a101e673de91c0a6e10bb2fa5da6d6c75d15a55882f
-  languageName: node
-  linkType: hard
-
 "postcss-replace-overflow-wrap@npm:^4.0.0":
   version: 4.0.0
   resolution: "postcss-replace-overflow-wrap@npm:4.0.0"
@@ -8354,7 +7834,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.6, postcss-selector-parser@npm:^6.0.9":
+"postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.6, postcss-selector-parser@npm:^6.0.9":
   version: 6.0.10
   resolution: "postcss-selector-parser@npm:6.0.10"
   dependencies:
@@ -8364,29 +7844,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-svgo@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "postcss-svgo@npm:5.1.0"
-  dependencies:
-    postcss-value-parser: ^4.2.0
-    svgo: ^2.7.0
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: d86eb5213d9f700cf5efe3073799b485fb7cacae0c731db3d7749c9c2b1c9bc85e95e0baeca439d699ff32ea24815fc916c4071b08f67ed8219df229ce1129bd
-  languageName: node
-  linkType: hard
-
-"postcss-unique-selectors@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "postcss-unique-selectors@npm:5.1.1"
-  dependencies:
-    postcss-selector-parser: ^6.0.5
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 637e7b786e8558265775c30400c54b6b3b24d4748923f4a39f16a65fd0e394f564ccc9f0a1d3c0e770618a7637a7502ea1d0d79f731d429cb202255253c23278
-  languageName: node
-  linkType: hard
-
 "postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
@@ -8642,7 +8099,6 @@ __metadata:
     "@typescript-eslint/eslint-plugin": latest
     "@typescript-eslint/parser": latest
     autoprefixer: ^10.4.8
-    cssnano: ^5.1.12
     cypress: ^10.3.1
     eslint: ^8.21.0
     eslint-config-prettier: ^8.5.0
@@ -9217,7 +8673,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.6.0, source-map@npm:^0.6.1":
+"source-map@npm:^0.6.0":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
   checksum: 59ce8640cf3f3124f64ac289012c2b8bd377c238e316fb323ea22fbfe83da07d81e000071d7242cad7a23cd91c7de98e4df8830ec3f133cb6133a5f6e9f67bc2
@@ -9321,13 +8777,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stable@npm:^0.1.8":
-  version: 0.1.8
-  resolution: "stable@npm:0.1.8"
-  checksum: 2ff482bb100285d16dd75cd8f7c60ab652570e8952c0bfa91828a2b5f646a0ff533f14596ea4eabd48bb7f4aeea408dce8f8515812b975d958a4cc4fa6b9dfeb
-  languageName: node
-  linkType: hard
-
 "start-server-and-test@npm:^1.14.0":
   version: 1.14.0
   resolution: "start-server-and-test@npm:1.14.0"
@@ -9476,18 +8925,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylehacks@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "stylehacks@npm:5.1.0"
-  dependencies:
-    browserslist: ^4.16.6
-    postcss-selector-parser: ^6.0.4
-  peerDependencies:
-    postcss: ^8.2.15
-  checksum: 310b3452c11fd443b0d327aa2d5b43ae7479407339204b7ad11cf2e16d33b690c1cbf47a21b737ef112411e53563f0f996c5fa3642d135c896329950a008277f
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -9522,23 +8959,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svgo@npm:^2.7.0":
-  version: 2.8.0
-  resolution: "svgo@npm:2.8.0"
-  dependencies:
-    "@trysound/sax": 0.2.0
-    commander: ^7.2.0
-    css-select: ^4.1.3
-    css-tree: ^1.1.3
-    csso: ^4.2.0
-    picocolors: ^1.0.0
-    stable: ^0.1.8
-  bin:
-    svgo: bin/svgo
-  checksum: b92f71a8541468ffd0b81b8cdb36b1e242eea320bf3c1a9b2c8809945853e9d8c80c19744267eb91cabf06ae9d5fff3592d677df85a31be4ed59ff78534fa420
-  languageName: node
-  linkType: hard
-
 "tar@npm:^6.1.11, tar@npm:^6.1.2":
   version: 6.1.11
   resolution: "tar@npm:6.1.11"
@@ -10103,13 +9523,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^1.10.2":
-  version: 1.10.2
-  resolution: "yaml@npm:1.10.2"
-  checksum: ce4ada136e8a78a0b08dc10b4b900936912d15de59905b2bf415b4d33c63df1d555d23acb2a41b23cf9fb5da41c256441afca3d6509de7247daa062fd2c5ea5f
-  languageName: node
-  linkType: hard
-
 "yaml@npm:^2.1.1":
   version: 2.1.1
   resolution: "yaml@npm:2.1.1"

From 0f835a29612b216f2efa464ddc48594574ce3977 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 9 Aug 2022 18:55:32 +0200
Subject: [PATCH 3/4] chore(examples): only use bundle

---
 examples/nextjs/pages/Backgrounds/index.tsx   | 20 +---
 .../pages/ControlledUncontrolled/index.tsx    |  5 +-
 .../CustomConnectionLine/ConnectionLine.tsx   | 18 +---
 .../pages/CustomConnectionLine/index.tsx      | 10 +-
 .../pages/CustomNode/ColorSelectorNode.tsx    | 33 +------
 examples/nextjs/pages/CustomNode/index.tsx    |  6 +-
 examples/nextjs/pages/DefaultNodes/index.tsx  | 12 +--
 .../pages/DragHandle/DragHandleNode.tsx       | 18 +---
 examples/nextjs/pages/DragNDrop/index.tsx     | 10 +-
 examples/nextjs/pages/EdgeTypes/index.tsx     |  5 +-
 examples/nextjs/pages/EdgeTypes/utils.ts      | 14 +--
 examples/nextjs/pages/Edges/CustomEdge.tsx    | 11 +--
 examples/nextjs/pages/Edges/CustomEdge2.tsx   |  9 +-
 examples/nextjs/pages/Edges/index.tsx         | 22 ++---
 examples/nextjs/pages/Empty/index.tsx         | 13 +--
 .../FloatingEdges/FloatingConnectionLine.tsx  | 23 +----
 .../pages/FloatingEdges/FloatingEdge.tsx      | 31 ++-----
 examples/nextjs/pages/FloatingEdges/index.tsx |  5 +-
 examples/nextjs/pages/FloatingEdges/utils.ts  |  7 +-
 examples/nextjs/pages/Hidden/index.tsx        |  7 +-
 examples/nextjs/pages/Interaction/index.tsx   | 48 +++-------
 examples/nextjs/pages/Layouting/index.tsx     |  7 +-
 .../pages/Layouting/initial-elements.ts       |  2 +-
 examples/nextjs/pages/MultiFlows/index.tsx    |  5 +-
 examples/nextjs/pages/NestedNodes/index.tsx   | 10 +-
 .../nextjs/pages/NodeTypeChange/index.tsx     | 20 +---
 .../pages/NodeTypesObjectChange/index.tsx     |  7 +-
 examples/nextjs/pages/Overview/index.tsx      | 92 ++++++-------------
 examples/nextjs/pages/Provider/Sidebar.tsx    | 11 +--
 examples/nextjs/pages/Provider/index.tsx      | 10 +-
 .../nextjs/pages/SaveRestore/Controls.tsx     | 11 +--
 examples/nextjs/pages/SaveRestore/index.tsx   |  7 +-
 examples/nextjs/pages/Stress/index.tsx        |  8 +-
 examples/nextjs/pages/Stress/utils.ts         |  7 +-
 examples/nextjs/pages/Subflow/DebugNode.tsx   |  6 +-
 examples/nextjs/pages/Subflow/index.tsx       | 24 ++---
 examples/nextjs/pages/Switch/index.tsx        | 18 +---
 examples/nextjs/pages/TouchDevice/index.tsx   | 26 +-----
 .../nextjs/pages/Undirectional/CustomNode.tsx | 10 +-
 examples/nextjs/pages/Undirectional/index.tsx |  5 +-
 examples/nextjs/pages/UpdatableEdge/index.tsx | 19 ++--
 examples/nextjs/pages/UpdateNode/index.tsx    | 19 +---
 examples/nextjs/pages/UseKeyPress/index.tsx   |  2 +-
 examples/nextjs/pages/UseReactFlow/index.tsx  | 14 +--
 .../UseUpdateNodeInternals/CustomNode.tsx     |  6 +-
 .../pages/UseUpdateNodeInternals/index.tsx    | 12 +--
 examples/nextjs/pages/Validation/index.tsx    | 20 +---
 examples/nextjs/pages/index.tsx               |  2 +-
 48 files changed, 194 insertions(+), 513 deletions(-)

diff --git a/examples/nextjs/pages/Backgrounds/index.tsx b/examples/nextjs/pages/Backgrounds/index.tsx
index 9af3cbde..fa3eaec6 100644
--- a/examples/nextjs/pages/Backgrounds/index.tsx
+++ b/examples/nextjs/pages/Backgrounds/index.tsx
@@ -5,13 +5,10 @@ import {
   Node,
   ReactFlowProvider,
   useNodesState,
-} from '@react-flow/core';
-
-import {
   Background,
   BackgroundProps,
   BackgroundVariant,
-} from '@react-flow/background';
+} from '@react-flow/bundle';
 
 import styles from './style.module.css';
 
@@ -23,10 +20,7 @@ const initialNodes: Node[] = [
   },
 ];
 
-const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({
-  id,
-  bgProps,
-}) => {
+const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
 
   return (
@@ -41,14 +35,8 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({
 const Backgrounds: FC = () => (
   <div className={styles.wrapper}>
     <Flow id="flow-a" bgProps={{ variant: BackgroundVariant.Dots }} />
-    <Flow
-      id="flow-b"
-      bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }}
-    />
-    <Flow
-      id="flow-c"
-      bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }}
-    />
+    <Flow id="flow-b" bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }} />
+    <Flow id="flow-c" bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }} />
   </div>
 );
 
diff --git a/examples/nextjs/pages/ControlledUncontrolled/index.tsx b/examples/nextjs/pages/ControlledUncontrolled/index.tsx
index 1f3871ad..37b68d3f 100644
--- a/examples/nextjs/pages/ControlledUncontrolled/index.tsx
+++ b/examples/nextjs/pages/ControlledUncontrolled/index.tsx
@@ -7,8 +7,9 @@ import {
   ReactFlowProvider,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
-import { Background, BackgroundVariant } from '@react-flow/background';
+  Background,
+  BackgroundVariant,
+} from '@react-flow/bunde';
 
 const defaultNodes: Node[] = [
   {
diff --git a/examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx b/examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx
index fb14ef1a..8a552f44 100644
--- a/examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx
+++ b/examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx
@@ -1,12 +1,7 @@
 import React, { FC } from 'react';
-import { ConnectionLineComponentProps } from '@react-flow/core';
+import { ConnectionLineComponentProps } from '@react-flow/bundle';
 
-const ConnectionLine: FC<ConnectionLineComponentProps> = ({
-  fromX,
-  fromY,
-  toX,
-  toY,
-}) => {
+const ConnectionLine: FC<ConnectionLineComponentProps> = ({ fromX, fromY, toX, toY }) => {
   return (
     <g>
       <path
@@ -16,14 +11,7 @@ const ConnectionLine: FC<ConnectionLineComponentProps> = ({
         className="animated"
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
       />
-      <circle
-        cx={toX}
-        cy={toY}
-        fill="#fff"
-        r={3}
-        stroke="#222"
-        strokeWidth={1.5}
-      />
+      <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
     </g>
   );
 };
diff --git a/examples/nextjs/pages/CustomConnectionLine/index.tsx b/examples/nextjs/pages/CustomConnectionLine/index.tsx
index aa430f2f..360aa6d4 100644
--- a/examples/nextjs/pages/CustomConnectionLine/index.tsx
+++ b/examples/nextjs/pages/CustomConnectionLine/index.tsx
@@ -7,8 +7,9 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
-import { Background, BackgroundVariant } from '@react-flow/background';
+  Background,
+  BackgroundVariant,
+} from '@react-flow/bundle';
 
 import ConnectionLine from './ConnectionLine';
 
@@ -25,10 +26,7 @@ const initialEdges: Edge[] = [];
 const ConnectionLineFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
     <ReactFlow
diff --git a/examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx b/examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx
index 0c2434b1..622e2266 100644
--- a/examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx
+++ b/examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx
@@ -1,11 +1,5 @@
 import React, { memo, FC, CSSProperties } from 'react';
-import {
-  Handle,
-  Position,
-  NodeProps,
-  Connection,
-  Edge,
-} from '@react-flow/renderer';
+import { Handle, Position, NodeProps, Connection, Edge } from '@react-flow/bundle';
 
 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
@@ -15,27 +9,16 @@ const sourceHandleStyleB: CSSProperties = {
   top: 'auto',
 };
 
-const onConnect = (params: Connection | Edge) =>
-  console.log('handle onConnect', params);
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
 
 const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
   return (
     <>
-      <Handle
-        type="target"
-        position={Position.Left}
-        style={targetHandleStyle}
-        onConnect={onConnect}
-      />
+      <Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
       <div>
         Custom Color Picker Node: <strong>{data.color}</strong>
       </div>
-      <input
-        className="nodrag"
-        type="color"
-        onChange={data.onChange}
-        defaultValue={data.color}
-      />
+      <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
       <Handle
         type="source"
         position={Position.Right}
@@ -46,13 +29,7 @@ const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
           console.log('You trigger mousedown event', e);
         }}
       />
-      <Handle
-        type="source"
-        position={Position.Right}
-        id="b"
-        style={sourceHandleStyleB}
-        isConnectable={isConnectable}
-      />
+      <Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} isConnectable={isConnectable} />
     </>
   );
 };
diff --git a/examples/nextjs/pages/CustomNode/index.tsx b/examples/nextjs/pages/CustomNode/index.tsx
index 43bfaedf..84e7894f 100644
--- a/examples/nextjs/pages/CustomNode/index.tsx
+++ b/examples/nextjs/pages/CustomNode/index.tsx
@@ -11,7 +11,7 @@ import {
   Connection,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import ColorSelectorNode from './ColorSelectorNode';
 
@@ -120,9 +120,7 @@ const CustomNodeFlow = () => {
   }, []);
 
   const onConnect = (connection: Connection) =>
-    setEdges((eds) =>
-      addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds)
-    );
+    setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds));
 
   return (
     <ReactFlow
diff --git a/examples/nextjs/pages/DefaultNodes/index.tsx b/examples/nextjs/pages/DefaultNodes/index.tsx
index 2330fba6..d51019f2 100644
--- a/examples/nextjs/pages/DefaultNodes/index.tsx
+++ b/examples/nextjs/pages/DefaultNodes/index.tsx
@@ -5,8 +5,9 @@ import {
   Node,
   Edge,
   ReactFlowProvider,
-} from '@react-flow/core';
-import { Background, BackgroundVariant } from '@react-flow/background';
+  Background,
+  BackgroundVariant,
+} from '@react-flow/bundle';
 
 const defaultNodes: Node[] = [
   {
@@ -77,12 +78,7 @@ const DefaultNodes = () => {
   };
 
   return (
-    <ReactFlow
-      defaultNodes={defaultNodes}
-      defaultEdges={defaultEdges}
-      defaultEdgeOptions={defaultEdgeOptions}
-      fitView
-    >
+    <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} defaultEdgeOptions={defaultEdgeOptions} fitView>
       <Background variant={BackgroundVariant.Lines} />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
diff --git a/examples/nextjs/pages/DragHandle/DragHandleNode.tsx b/examples/nextjs/pages/DragHandle/DragHandleNode.tsx
index 716ab781..5343f437 100644
--- a/examples/nextjs/pages/DragHandle/DragHandleNode.tsx
+++ b/examples/nextjs/pages/DragHandle/DragHandleNode.tsx
@@ -1,15 +1,8 @@
 import React, { memo, FC } from 'react';
 
-import {
-  Handle,
-  Position,
-  NodeProps,
-  Connection,
-  Edge,
-} from '@react-flow/core';
+import { Handle, Position, NodeProps, Connection, Edge } from '@react-flow/bundle';
 
-const onConnect = (params: Connection | Edge) =>
-  console.log('handle onConnect', params);
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
 
 const labelStyle = {
   display: 'flex',
@@ -28,12 +21,11 @@ const dragHandleStyle = {
 const ColorSelectorNode: FC<NodeProps> = () => {
   return (
     <>
-      <Handle type='target' position={Position.Left} onConnect={onConnect} />
+      <Handle type="target" position={Position.Left} onConnect={onConnect} />
       <div style={labelStyle}>
-        Only draggable here →{' '}
-        <span className='custom-drag-handle' style={dragHandleStyle} />
+        Only draggable here → <span className="custom-drag-handle" style={dragHandleStyle} />
       </div>
-      <Handle type='source' position={Position.Right} />
+      <Handle type="source" position={Position.Right} />
     </>
   );
 };
diff --git a/examples/nextjs/pages/DragNDrop/index.tsx b/examples/nextjs/pages/DragNDrop/index.tsx
index cd9b4b89..b1b6a048 100644
--- a/examples/nextjs/pages/DragNDrop/index.tsx
+++ b/examples/nextjs/pages/DragNDrop/index.tsx
@@ -9,8 +9,8 @@ import {
   Node,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
-import { Controls } from '@react-flow/controls';
+  Controls,
+} from '@react-flow/bundle';
 
 import Sidebar from './Sidebar';
 
@@ -34,13 +34,11 @@ let id = 0;
 const getId = () => `dndnode_${id++}`;
 
 const DnDFlow = () => {
-  const [reactFlowInstance, setReactFlowInstance] =
-    useState<ReactFlowInstance>();
+  const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance>();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const onConnect = (params: Connection | Edge) =>
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
   const onInit = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi);
 
   const onDrop = (event: DragEvent) => {
diff --git a/examples/nextjs/pages/EdgeTypes/index.tsx b/examples/nextjs/pages/EdgeTypes/index.tsx
index 5f020ca4..2877239a 100644
--- a/examples/nextjs/pages/EdgeTypes/index.tsx
+++ b/examples/nextjs/pages/EdgeTypes/index.tsx
@@ -14,7 +14,7 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import { getElements } from './utils';
 
@@ -31,8 +31,7 @@ const deleteKeyCode = ['AltLeft+KeyD', 'Backspace'];
 const EdgeTypesFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) =>
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
 
   return (
     <ReactFlow
diff --git a/examples/nextjs/pages/EdgeTypes/utils.ts b/examples/nextjs/pages/EdgeTypes/utils.ts
index bb4dc6ad..f837aa88 100644
--- a/examples/nextjs/pages/EdgeTypes/utils.ts
+++ b/examples/nextjs/pages/EdgeTypes/utils.ts
@@ -1,4 +1,4 @@
-import { Edge, Node, Position } from '@react-flow/core';
+import { Edge, Node, Position } from '@react-flow/bundle';
 
 const nodeWidth = 80;
 const nodeGapWidth = nodeWidth * 2;
@@ -54,18 +54,10 @@ const getNodeId = (): string => (id++).toString();
 export function getElements(): { nodes: Node[]; edges: Edge[] } {
   const initialElements = { nodes: [] as Node[], edges: [] as Edge[] };
 
-  for (
-    let sourceTargetIndex = 0;
-    sourceTargetIndex < sourceTargetPositions.length;
-    sourceTargetIndex++
-  ) {
+  for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
     const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex];
 
-    for (
-      let edgeTypeIndex = 0;
-      edgeTypeIndex < edgeTypes.length;
-      edgeTypeIndex++
-    ) {
+    for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
       const currEdgeType = edgeTypes[edgeTypeIndex];
 
       for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
diff --git a/examples/nextjs/pages/Edges/CustomEdge.tsx b/examples/nextjs/pages/Edges/CustomEdge.tsx
index e2ec0cb5..a51c86af 100644
--- a/examples/nextjs/pages/Edges/CustomEdge.tsx
+++ b/examples/nextjs/pages/Edges/CustomEdge.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { EdgeProps, getBezierPath } from '@react-flow/core';
+import { EdgeProps, getBezierPath } from '@react-flow/bundle';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,
@@ -22,14 +22,9 @@ const CustomEdge: FC<EdgeProps> = ({
 
   return (
     <>
-      <path id={id} className='react-flow__edge-path' d={edgePath} />
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
       <text>
-        <textPath
-          href={`#${id}`}
-          style={{ fontSize: '12px' }}
-          startOffset='50%'
-          textAnchor='middle'
-        >
+        <textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" textAnchor="middle">
           {data.text}
         </textPath>
       </text>
diff --git a/examples/nextjs/pages/Edges/CustomEdge2.tsx b/examples/nextjs/pages/Edges/CustomEdge2.tsx
index cd1f810a..cb446f07 100644
--- a/examples/nextjs/pages/Edges/CustomEdge2.tsx
+++ b/examples/nextjs/pages/Edges/CustomEdge2.tsx
@@ -1,10 +1,5 @@
 import React, { FC } from 'react';
-import {
-  EdgeProps,
-  getBezierPath,
-  EdgeText,
-  getBezierEdgeCenter,
-} from '@react-flow/core';
+import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from '@react-flow/bundle';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,
@@ -33,7 +28,7 @@ const CustomEdge: FC<EdgeProps> = ({
 
   return (
     <>
-      <path id={id} className='react-flow__edge-path' d={edgePath} />
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
       <EdgeText
         x={centerX}
         y={centerY}
diff --git a/examples/nextjs/pages/Edges/index.tsx b/examples/nextjs/pages/Edges/index.tsx
index 18b3bd02..f60ee9ab 100644
--- a/examples/nextjs/pages/Edges/index.tsx
+++ b/examples/nextjs/pages/Edges/index.tsx
@@ -12,23 +12,18 @@ import {
   Node,
   useEdgesState,
   useNodesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';
 
-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 onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
-const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) =>
-  console.log('dblclick', edge);
-const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) =>
-  console.log('enter', edge);
-const onEdgeMouseMove = (_: MouseEvent, edge: Edge) =>
-  console.log('move', edge);
-const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) =>
-  console.log('leave', edge);
+const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('dblclick', edge);
+const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('enter', edge);
+const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('move', edge);
+const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('leave', edge);
 
 const initialNodes: Node[] = [
   {
@@ -189,10 +184,7 @@ const defaultViewport = {
 const EdgesFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
     <ReactFlow
diff --git a/examples/nextjs/pages/Empty/index.tsx b/examples/nextjs/pages/Empty/index.tsx
index 5ee4413f..8e65aa72 100644
--- a/examples/nextjs/pages/Empty/index.tsx
+++ b/examples/nextjs/pages/Empty/index.tsx
@@ -12,13 +12,11 @@ import {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
-  console.log('flow loaded:', reactFlowInstance);
+const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
-  console.log('drag stop', node);
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 
 const buttonStyle: CSSProperties = {
   position: 'absolute',
@@ -31,10 +29,7 @@ const EmptyFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const onConnect = useCallback(
-    (params: Connection | Edge) => setEdges((els) => addEdge(params, els)),
-    [setEdges]
-  );
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]);
   const addRandomNode = () => {
     const nodeId = (nodes.length + 1).toString();
     const newNode: Node = {
diff --git a/examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx b/examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx
index 3bd4d562..1930bf73 100644
--- a/examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx
+++ b/examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx
@@ -1,9 +1,5 @@
 import React, { FC } from 'react';
-import {
-  getBezierPath,
-  ConnectionLineComponentProps,
-  Node,
-} from '@react-flow/core';
+import { getBezierPath, ConnectionLineComponentProps, Node } from '@react-flow/bundle';
 
 import { getEdgeParams } from './utils';
 
@@ -37,21 +33,8 @@ const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
 
   return (
     <g>
-      <path
-        fill='none'
-        stroke='#222'
-        strokeWidth={1.5}
-        className='animated'
-        d={d}
-      />
-      <circle
-        cx={targetX}
-        cy={targetY}
-        fill='#fff'
-        r={3}
-        stroke='#222'
-        strokeWidth={1.5}
-      />
+      <path fill="none" stroke="#222" strokeWidth={1.5} className="animated" d={d} />
+      <circle cx={targetX} cy={targetY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
     </g>
   );
 };
diff --git a/examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx b/examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx
index e0a3a432..1187d70c 100644
--- a/examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx
+++ b/examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx
@@ -1,10 +1,5 @@
 import React, { FC, useMemo, CSSProperties } from 'react';
-import {
-  EdgeProps,
-  useStore,
-  getBezierPath,
-  ReactFlowState,
-} from '@react-flow/core';
+import { EdgeProps, useStore, getBezierPath, ReactFlowState } from '@react-flow/bundle';
 
 import { getEdgeParams } from './utils';
 
@@ -13,23 +8,14 @@ const nodeSelector = (s: ReactFlowState) => s.nodeInternals;
 const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
   const nodeInternals = useStore(nodeSelector);
 
-  const sourceNode = useMemo(
-    () => nodeInternals.get(source),
-    [source, nodeInternals]
-  );
-  const targetNode = useMemo(
-    () => nodeInternals.get(target),
-    [target, nodeInternals]
-  );
+  const sourceNode = useMemo(() => nodeInternals.get(source), [source, nodeInternals]);
+  const targetNode = useMemo(() => nodeInternals.get(target), [target, nodeInternals]);
 
   if (!sourceNode || !targetNode) {
     return null;
   }
 
-  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
-    sourceNode,
-    targetNode
-  );
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
 
   const d = getBezierPath({
     sourceX: sx,
@@ -41,13 +27,8 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
   });
 
   return (
-    <g className='react-flow__connection'>
-      <path
-        id={id}
-        className='react-flow__edge-path'
-        d={d}
-        style={style as CSSProperties}
-      />
+    <g className="react-flow__connection">
+      <path id={id} className="react-flow__edge-path" d={d} style={style as CSSProperties} />
     </g>
   );
 };
diff --git a/examples/nextjs/pages/FloatingEdges/index.tsx b/examples/nextjs/pages/FloatingEdges/index.tsx
index d24b7ca0..11f7ae38 100644
--- a/examples/nextjs/pages/FloatingEdges/index.tsx
+++ b/examples/nextjs/pages/FloatingEdges/index.tsx
@@ -9,7 +9,7 @@ import {
   Connection,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import styles from './style.module.css';
 
@@ -17,8 +17,7 @@ import FloatingConnectionLine from './FloatingConnectionLine';
 import FloatingEdge from './FloatingEdge';
 import { createElements } from './utils';
 
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
-  reactFlowInstance.fitView();
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
 
 const { nodes: initialNodes, edges: initialEdges } =
   typeof window !== 'undefined' ? createElements() : { nodes: [], edges: [] };
diff --git a/examples/nextjs/pages/FloatingEdges/utils.ts b/examples/nextjs/pages/FloatingEdges/utils.ts
index 5e8f50b9..9f12d22a 100644
--- a/examples/nextjs/pages/FloatingEdges/utils.ts
+++ b/examples/nextjs/pages/FloatingEdges/utils.ts
@@ -1,11 +1,8 @@
-import React, { Position, XYPosition, Node, Edge } from '@react-flow/core';
+import { Position, XYPosition, Node, Edge } from '@react-flow/bundle';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
-function getNodeIntersection(
-  intersectionNode: Node,
-  targetNode: Node
-): XYPosition {
+function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPosition {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
 
   const {
diff --git a/examples/nextjs/pages/Hidden/index.tsx b/examples/nextjs/pages/Hidden/index.tsx
index 1e860359..c11b28ec 100644
--- a/examples/nextjs/pages/Hidden/index.tsx
+++ b/examples/nextjs/pages/Hidden/index.tsx
@@ -8,10 +8,9 @@ import {
   Node,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
-
-import { Controls } from '@react-flow/controls';
-import { MiniMap } from '@react-flow/minimap';
+  MiniMap,
+  Controls,
+} from '@react-flow/bundle';
 
 const initialNodes: Node[] = [
   {
diff --git a/examples/nextjs/pages/Interaction/index.tsx b/examples/nextjs/pages/Interaction/index.tsx
index 26e12a73..efff90b6 100644
--- a/examples/nextjs/pages/Interaction/index.tsx
+++ b/examples/nextjs/pages/Interaction/index.tsx
@@ -1,8 +1,4 @@
-import React, {
-  useState,
-  MouseEvent as ReactMouseEvent,
-  WheelEvent,
-} from 'react';
+import React, { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
 import {
   ReactFlow,
   addEdge,
@@ -13,10 +9,9 @@ import {
   Viewport,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
-
-import { Controls } from '@react-flow/controls';
-import { MiniMap } from '@react-flow/minimap';
+  Controls,
+  MiniMap,
+} from '@react-flow/bundle';
 
 const initialNodes: Node[] = [
   {
@@ -35,27 +30,19 @@ const initialEdges: Edge[] = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const onNodeDragStart = (_: ReactMouseEvent, node: Node) =>
-  console.log('drag start', node);
-const onNodeDragStop = (_: ReactMouseEvent, node: Node) =>
-  console.log('drag stop', node);
-const onNodeClick = (_: ReactMouseEvent, node: Node) =>
-  console.log('click', node);
-const onEdgeClick = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('click', edge);
-const onPaneClick = (event: ReactMouseEvent) =>
-  console.log('onPaneClick', event);
+const onNodeDragStart = (_: ReactMouseEvent, node: Node) => console.log('drag start', node);
+const onNodeDragStop = (_: ReactMouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('click', node);
+const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edge);
+const onPaneClick = (event: ReactMouseEvent) => console.log('onPaneClick', event);
 const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
-const onPaneContextMenu = (event: ReactMouseEvent) =>
-  console.log('onPaneContextMenu', event);
-const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) =>
-  console.log('onMoveEnd', viewport);
+const onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event);
+const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) => console.log('onMoveEnd', viewport);
 
 const InteractionFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) =>
-    setEdges((els) => addEdge(params, els));
+  const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));
 
   const [isSelectable, setIsSelectable] = useState<boolean>(false);
   const [isDraggable, setIsDraggable] = useState<boolean>(false);
@@ -63,15 +50,12 @@ const InteractionFlow = () => {
   const [zoomOnScroll, setZoomOnScroll] = useState<boolean>(false);
   const [zoomOnPinch, setZoomOnPinch] = useState<boolean>(false);
   const [panOnScroll, setPanOnScroll] = useState<boolean>(false);
-  const [panOnScrollMode, setPanOnScrollMode] = useState<PanOnScrollMode>(
-    PanOnScrollMode.Free
-  );
+  const [panOnScrollMode, setPanOnScrollMode] = useState<PanOnScrollMode>(PanOnScrollMode.Free);
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState<boolean>(false);
   const [panOnDrag, setPanOnDrag] = useState<boolean>(true);
   const [captureZoomClick, setCaptureZoomClick] = useState<boolean>(false);
   const [captureZoomScroll, setCaptureZoomScroll] = useState<boolean>(false);
-  const [captureElementClick, setCaptureElementClick] =
-    useState<boolean>(false);
+  const [captureElementClick, setCaptureElementClick] = useState<boolean>(false);
 
   return (
     <ReactFlow
@@ -180,9 +164,7 @@ const InteractionFlow = () => {
             <select
               id="panonscrollmode"
               value={panOnScrollMode}
-              onChange={(event) =>
-                setPanOnScrollMode(event.target.value as PanOnScrollMode)
-              }
+              onChange={(event) => setPanOnScrollMode(event.target.value as PanOnScrollMode)}
               className="react-flow__panonscrollmode"
             >
               <option value="free">free</option>
diff --git a/examples/nextjs/pages/Layouting/index.tsx b/examples/nextjs/pages/Layouting/index.tsx
index b4e1f029..a8fdc747 100644
--- a/examples/nextjs/pages/Layouting/index.tsx
+++ b/examples/nextjs/pages/Layouting/index.tsx
@@ -11,7 +11,7 @@ import {
   useEdgesState,
   MarkerType,
   EdgeMarker,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import dagre from 'dagre';
 
@@ -78,10 +78,7 @@ const LayoutFlow = () => {
       eds.map((e) => ({
         ...e,
         markerEnd: {
-          type:
-            (e.markerEnd as EdgeMarker)?.type === MarkerType.Arrow
-              ? MarkerType.ArrowClosed
-              : MarkerType.Arrow,
+          type: (e.markerEnd as EdgeMarker)?.type === MarkerType.Arrow ? MarkerType.ArrowClosed : MarkerType.Arrow,
         },
       }))
     );
diff --git a/examples/nextjs/pages/Layouting/initial-elements.ts b/examples/nextjs/pages/Layouting/initial-elements.ts
index 78b1ea54..11d1b09c 100644
--- a/examples/nextjs/pages/Layouting/initial-elements.ts
+++ b/examples/nextjs/pages/Layouting/initial-elements.ts
@@ -1,4 +1,4 @@
-import { Node, Edge, XYPosition, MarkerType } from '@react-flow/core';
+import { Node, Edge, XYPosition, MarkerType } from '@react-flow/bundle';
 
 const position: XYPosition = { x: 0, y: 0 };
 
diff --git a/examples/nextjs/pages/MultiFlows/index.tsx b/examples/nextjs/pages/MultiFlows/index.tsx
index 610e4ea7..62708846 100644
--- a/examples/nextjs/pages/MultiFlows/index.tsx
+++ b/examples/nextjs/pages/MultiFlows/index.tsx
@@ -11,7 +11,7 @@ import {
   useNodesState,
   useEdgesState,
   MarkerType,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import styles from './multiflows.module.css';
 
@@ -58,8 +58,7 @@ const Flow: FC<{ id: string }> = ({ id }) => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onConnect = (params: Edge | Connection) =>
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = (params: Edge | Connection) => setEdges((eds) => addEdge(params, eds));
 
   return (
     <ReactFlowProvider>
diff --git a/examples/nextjs/pages/NestedNodes/index.tsx b/examples/nextjs/pages/NestedNodes/index.tsx
index c05f171e..21e1bb2c 100644
--- a/examples/nextjs/pages/NestedNodes/index.tsx
+++ b/examples/nextjs/pages/NestedNodes/index.tsx
@@ -11,10 +11,9 @@ import {
   Edge,
   ReactFlowInstance,
   Connection,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
-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 onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
@@ -110,10 +109,7 @@ const NestedFlow = () => {
     },
     [setEdges]
   );
-  const onInit = useCallback(
-    (reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance),
-    []
-  );
+  const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
 
   const updatePos = () => {
     setNodes((nds) => {
diff --git a/examples/nextjs/pages/NodeTypeChange/index.tsx b/examples/nextjs/pages/NodeTypeChange/index.tsx
index 2f68fe32..6a6406fe 100644
--- a/examples/nextjs/pages/NodeTypeChange/index.tsx
+++ b/examples/nextjs/pages/NodeTypeChange/index.tsx
@@ -1,15 +1,6 @@
 import React, { CSSProperties, useCallback } from 'react';
 
-import {
-  ReactFlow,
-  addEdge,
-  Node,
-  Position,
-  Connection,
-  Edge,
-  useNodesState,
-  useEdgesState,
-} from '@react-flow/core';
+import { ReactFlow, addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
 
 const initialNodes: Node[] = [
   {
@@ -29,9 +20,7 @@ const initialNodes: Node[] = [
   },
 ];
 
-const initialEdges: Edge[] = [
-  { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
-];
+const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true }];
 
 const buttonStyle: CSSProperties = {
   position: 'absolute',
@@ -43,10 +32,7 @@ const buttonStyle: CSSProperties = {
 const NodeTypeChangeFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
   const changeType = () => {
     setNodes((nds) =>
       nds.map((node) => {
diff --git a/examples/nextjs/pages/NodeTypesObjectChange/index.tsx b/examples/nextjs/pages/NodeTypesObjectChange/index.tsx
index a92dfb66..5c51fd76 100644
--- a/examples/nextjs/pages/NodeTypesObjectChange/index.tsx
+++ b/examples/nextjs/pages/NodeTypesObjectChange/index.tsx
@@ -11,7 +11,7 @@ import {
   NodeTypes,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 const initialNodes: Node[] = [
   {
@@ -68,10 +68,7 @@ const NodeTypeChangeFlow = () => {
   const [nodeTypesId, setNodeTypesId] = useState<string>('a');
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const onConnect = useCallback(
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
   const changeType = () => setNodeTypesId((nt) => (nt === 'a' ? 'b' : 'a'));
 
   return (
diff --git a/examples/nextjs/pages/Overview/index.tsx b/examples/nextjs/pages/Overview/index.tsx
index 4fb86b24..8104fc3e 100644
--- a/examples/nextjs/pages/Overview/index.tsx
+++ b/examples/nextjs/pages/Overview/index.tsx
@@ -1,8 +1,4 @@
-import React, {
-  MouseEvent as ReactMouseEvent,
-  CSSProperties,
-  useCallback,
-} from 'react';
+import React, { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react';
 
 import {
   ReactFlow,
@@ -16,63 +12,42 @@ import {
   useNodesState,
   useEdgesState,
   OnSelectionChangeParams,
-} from '@react-flow/core';
+  Controls,
+  Background,
+  MiniMap,
+} from '@react-flow/bundle';
 
-import { Controls } from '@react-flow/controls';
-import { Background } from '@react-flow/background';
-import { MiniMap } from '@react-flow/minimap';
-
-const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
-  console.log('drag start', node, nodes);
-const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
-  console.log('drag', node, nodes);
-const onNodeDragStop = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
-  console.log('drag stop', node, nodes);
-const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) =>
-  console.log('node double click', node);
-const onPaneClick = (event: ReactMouseEvent) =>
-  console.log('pane click', event);
-const onPaneScroll = (event?: ReactMouseEvent) =>
-  console.log('pane scroll', event);
-const onPaneContextMenu = (event: ReactMouseEvent) =>
-  console.log('pane context menu', event);
-const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) =>
-  console.log('selection drag', nodes);
-const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) =>
-  console.log('selection drag start', nodes);
-const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) =>
-  console.log('selection drag stop', nodes);
+const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
+const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
+const onNodeDragStop = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
+const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) => console.log('node double click', node);
+const onPaneClick = (event: ReactMouseEvent) => console.log('pane click', event);
+const onPaneScroll = (event?: ReactMouseEvent) => console.log('pane scroll', event);
+const onPaneContextMenu = (event: ReactMouseEvent) => console.log('pane context menu', event);
+const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
+const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
+const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
 const onSelectionContextMenu = (event: ReactMouseEvent, nodes: Node[]) => {
   event.preventDefault();
   console.log('selection context menu', nodes);
 };
-const onNodeClick = (_: ReactMouseEvent, node: Node) =>
-  console.log('node click:', node);
+const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('node click:', node);
 
-const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) =>
-  console.log('selection change', nodes, edges);
+const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) => console.log('selection change', nodes, edges);
 const onInit = (reactFlowInstance: ReactFlowInstance) => {
   console.log('pane ready:', reactFlowInstance);
 };
 
-const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) =>
-  console.log('zoom/move start', viewport);
-const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) =>
-  console.log('zoom/move end', viewport);
-const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('edge context menu', edge);
-const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('edge mouse enter', edge);
-const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('edge mouse move', edge);
-const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('edge mouse leave', edge);
-const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('edge double click', edge);
+const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move start', viewport);
+const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move end', viewport);
+const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) => console.log('edge context menu', edge);
+const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
+const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);
+const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
+const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) => console.log('edge double click', edge);
 const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes);
 const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges);
-const onPaneMouseMove = (e: ReactMouseEvent) =>
-  console.log('pane move', e.clientX);
+const onPaneMouseMove = (e: ReactMouseEvent) => console.log('pane move', e.clientX);
 
 const initialNodes: Node[] = [
   {
@@ -122,11 +97,7 @@ const initialNodes: Node[] = [
       label: (
         <>
           You can find the docs on{' '}
-          <a
-            href="https://github.com/wbkd/react-flow"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <a href="https://github.com/wbkd/react-flow" target="_blank" rel="noopener noreferrer">
             Github
           </a>
         </>
@@ -215,10 +186,7 @@ const nodeColor = (n: Node): string => {
 const OverviewFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
     <ReactFlow
@@ -259,11 +227,7 @@ const OverviewFlow = () => {
       onEdgesDelete={onEdgesDelete}
       onPaneMouseMove={onPaneMouseMove}
     >
-      <MiniMap
-        nodeStrokeColor={nodeStrokeColor}
-        nodeColor={nodeColor}
-        nodeBorderRadius={2}
-      />
+      <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
       <Controls />
       <Background color="#aaa" gap={25} />
     </ReactFlow>
diff --git a/examples/nextjs/pages/Provider/Sidebar.tsx b/examples/nextjs/pages/Provider/Sidebar.tsx
index 365e4787..0eaec64a 100644
--- a/examples/nextjs/pages/Provider/Sidebar.tsx
+++ b/examples/nextjs/pages/Provider/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useStore, useStoreApi } from '@react-flow/core';
+import { useStore, useStoreApi } from '@react-flow/bundle';
 
 import styles from './provider.module.css';
 
@@ -16,19 +16,16 @@ const Sidebar = () => {
   return (
     <aside className={styles.aside}>
       <div className={styles.description}>
-        This is an example of how you can access the internal state outside of
-        the ReactFlow component.
+        This is an example of how you can access the internal state outside of the ReactFlow component.
       </div>
       <div className={styles.title}>Zoom & pan transform</div>
       <div className={styles.transform}>
-        [{transform[0].toFixed(2)}, {transform[1].toFixed(2)},{' '}
-        {transform[2].toFixed(2)}]
+        [{transform[0].toFixed(2)}, {transform[1].toFixed(2)}, {transform[2].toFixed(2)}]
       </div>
       <div className={styles.title}>Nodes</div>
       {Array.from(nodeInternals).map(([, node]) => (
         <div key={node.id}>
-          Node {node.id} - x: {node.position.x.toFixed(2)}, y:{' '}
-          {node.position.y.toFixed(2)}
+          Node {node.id} - x: {node.position.x.toFixed(2)}, y: {node.position.y.toFixed(2)}
         </div>
       ))}
 
diff --git a/examples/nextjs/pages/Provider/index.tsx b/examples/nextjs/pages/Provider/index.tsx
index 041a636c..58f31e00 100644
--- a/examples/nextjs/pages/Provider/index.tsx
+++ b/examples/nextjs/pages/Provider/index.tsx
@@ -11,15 +11,14 @@ import {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import Sidebar from './Sidebar';
 
 import styles from './provider.module.css';
 
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
-  console.log('pane ready:', reactFlowInstance);
+const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('pane ready:', reactFlowInstance);
 
 const initialNodes: Node[] = [
   {
@@ -41,10 +40,7 @@ const initialEdges: Edge[] = [
 const ProviderFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
-    (params: Edge | Connection) => setEdges((els) => addEdge(params, els)),
-    [setEdges]
-  );
+  const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
 
   return (
     <div className={styles.providerflow}>
diff --git a/examples/nextjs/pages/SaveRestore/Controls.tsx b/examples/nextjs/pages/SaveRestore/Controls.tsx
index 73d360d1..dd419485 100644
--- a/examples/nextjs/pages/SaveRestore/Controls.tsx
+++ b/examples/nextjs/pages/SaveRestore/Controls.tsx
@@ -1,10 +1,5 @@
 import React, { memo, useCallback, Dispatch, FC } from 'react';
-import {
-  useReactFlow,
-  Edge,
-  Node,
-  ReactFlowJsonObject,
-} from '@react-flow/core';
+import { useReactFlow, Edge, Node, ReactFlowJsonObject } from '@react-flow/bundle';
 import localforage from 'localforage';
 
 import styles from './save.module.css';
@@ -33,9 +28,7 @@ const Controls: FC<ControlsProps> = ({ setNodes, setEdges }) => {
 
   const onRestore = useCallback(() => {
     const restoreFlow = async () => {
-      const flow: ReactFlowJsonObject | null = await localforage.getItem(
-        flowKey
-      );
+      const flow: ReactFlowJsonObject | null = await localforage.getItem(flowKey);
 
       if (flow) {
         const { x, y, zoom } = flow.viewport;
diff --git a/examples/nextjs/pages/SaveRestore/index.tsx b/examples/nextjs/pages/SaveRestore/index.tsx
index 5604f24a..90b14859 100644
--- a/examples/nextjs/pages/SaveRestore/index.tsx
+++ b/examples/nextjs/pages/SaveRestore/index.tsx
@@ -8,7 +8,7 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 import Controls from './Controls';
 
 const initialNodes: Node[] = [
@@ -21,10 +21,7 @@ const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
 const SaveRestore = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
     <ReactFlowProvider>
diff --git a/examples/nextjs/pages/Stress/index.tsx b/examples/nextjs/pages/Stress/index.tsx
index 4f250aed..1003477e 100644
--- a/examples/nextjs/pages/Stress/index.tsx
+++ b/examples/nextjs/pages/Stress/index.tsx
@@ -10,10 +10,10 @@ import {
   addEdge,
   applyEdgeChanges,
   EdgeChange,
-} from '@react-flow/core';
-import { Controls } from '@react-flow/controls';
-import { Background } from '@react-flow/background';
-import { MiniMap } from '@react-flow/minimap';
+  Controls,
+  Background,
+  MiniMap,
+} from '@react-flow/bundle';
 
 import { getNodesAndEdges } from './utils';
 
diff --git a/examples/nextjs/pages/Stress/utils.ts b/examples/nextjs/pages/Stress/utils.ts
index 94be9b1e..db965ffc 100644
--- a/examples/nextjs/pages/Stress/utils.ts
+++ b/examples/nextjs/pages/Stress/utils.ts
@@ -1,14 +1,11 @@
-import { Node, Edge } from '@react-flow/core';
+import { Node, Edge } from '@react-flow/bundle';
 
 type ElementsCollection = {
   nodes: Node[];
   edges: Edge[];
 };
 
-export function getNodesAndEdges(
-  xElements: number = 10,
-  yElements: number = 10
-): ElementsCollection {
+export function getNodesAndEdges(xElements = 10, yElements = 10): ElementsCollection {
   const initialNodes = [];
   const initialEdges: Edge[] = [];
   let nodeId = 1;
diff --git a/examples/nextjs/pages/Subflow/DebugNode.tsx b/examples/nextjs/pages/Subflow/DebugNode.tsx
index edc5cb36..91d04b54 100644
--- a/examples/nextjs/pages/Subflow/DebugNode.tsx
+++ b/examples/nextjs/pages/Subflow/DebugNode.tsx
@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';
 
-import { Handle, NodeProps, Position } from '@react-flow/core';
+import { Handle, NodeProps, Position } from '@react-flow/bundle';
 
 const infoStyle: CSSProperties = { fontSize: 11 };
 const idStyle: CSSProperties = {
@@ -14,12 +14,12 @@ const idStyle: CSSProperties = {
 const DebugNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
   return (
     <>
-      <Handle type='target' position={Position.Top} />
+      <Handle type="target" position={Position.Top} />
       <div style={idStyle}>{id}</div>
       <div style={infoStyle}>
         x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
       </div>
-      <Handle type='source' position={Position.Bottom} />
+      <Handle type="source" position={Position.Bottom} />
     </>
   );
 };
diff --git a/examples/nextjs/pages/Subflow/index.tsx b/examples/nextjs/pages/Subflow/index.tsx
index f91a4589..d19a8ce4 100644
--- a/examples/nextjs/pages/Subflow/index.tsx
+++ b/examples/nextjs/pages/Subflow/index.tsx
@@ -9,17 +9,15 @@ import {
   MarkerType,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
-import { Controls } from '@react-flow/controls';
-import { Background } from '@react-flow/background';
-import { MiniMap } from '@react-flow/minimap';
+  Controls,
+  MiniMap,
+  Background,
+} from '@react-flow/bundle';
 
 import DebugNode from './DebugNode';
 
-const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) =>
-  console.log('drag', node, nodes);
-const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) =>
-  console.log('drag stop', node, nodes);
+const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
+const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
@@ -150,14 +148,8 @@ const Subflow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onConnect = useCallback(
-    (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
-    [setEdges]
-  );
-  const onInit = useCallback(
-    (reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance),
-    []
-  );
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
+  const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
 
   const updatePos = () => {
     setNodes((nds) => {
diff --git a/examples/nextjs/pages/Switch/index.tsx b/examples/nextjs/pages/Switch/index.tsx
index feddf573..7096b3fc 100644
--- a/examples/nextjs/pages/Switch/index.tsx
+++ b/examples/nextjs/pages/Switch/index.tsx
@@ -1,16 +1,7 @@
 import React, { MouseEvent, useCallback } from 'react';
-import {
-  ReactFlow,
-  addEdge,
-  Node,
-  Connection,
-  Edge,
-  useNodesState,
-  useEdgesState,
-} from '@react-flow/core';
+import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
 
-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 nodesA: Node[] = [
@@ -96,10 +87,7 @@ const BasicFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(nodesA);
   const [edges, setEdges, onEdgesChange] = useEdgesState(edgesA);
 
-  const onConnect = useCallback(
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
     <ReactFlow
diff --git a/examples/nextjs/pages/TouchDevice/index.tsx b/examples/nextjs/pages/TouchDevice/index.tsx
index e4f219bc..910a99f8 100644
--- a/examples/nextjs/pages/TouchDevice/index.tsx
+++ b/examples/nextjs/pages/TouchDevice/index.tsx
@@ -1,14 +1,5 @@
 import React, { useCallback } from 'react';
-import {
-  ReactFlow,
-  Node,
-  Edge,
-  useNodesState,
-  useEdgesState,
-  Position,
-  Connection,
-  addEdge,
-} from '@react-flow/core';
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from '@react-flow/bundle';
 
 import styles from './touch-device.module.css';
 
@@ -34,20 +25,11 @@ const initialEdges: Edge[] = [];
 const TouchDeviceFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
-    (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
-    [setEdges]
-  );
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
   const onConnectStart = useCallback(() => console.log('connect start'), []);
   const onConnectEnd = useCallback(() => console.log('connect end'), []);
-  const onClickConnectStart = useCallback(
-    () => console.log('click connect start'),
-    []
-  );
-  const onClickConnectEnd = useCallback(
-    () => console.log('click connect end'),
-    []
-  );
+  const onClickConnectStart = useCallback(() => console.log('click connect start'), []);
+  const onClickConnectEnd = useCallback(() => console.log('click connect end'), []);
 
   return (
     <ReactFlow
diff --git a/examples/nextjs/pages/Undirectional/CustomNode.tsx b/examples/nextjs/pages/Undirectional/CustomNode.tsx
index 21287e0f..d6deaa14 100644
--- a/examples/nextjs/pages/Undirectional/CustomNode.tsx
+++ b/examples/nextjs/pages/Undirectional/CustomNode.tsx
@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';
 
-import { Handle, Position, NodeProps } from '@react-flow/core';
+import { Handle, Position, NodeProps } from '@react-flow/bundle';
 
 const nodeStyles: CSSProperties = {
   padding: '10px 15px',
@@ -11,10 +11,10 @@ const CustomNode: FC<NodeProps> = ({ id }) => {
   return (
     <div style={nodeStyles}>
       <div>node {id}</div>
-      <Handle type='source' id='left' position={Position.Left} />
-      <Handle type='source' id='right' position={Position.Right} />
-      <Handle type='source' id='top' position={Position.Top} />
-      <Handle type='source' id='bottom' position={Position.Bottom} />
+      <Handle type="source" id="left" position={Position.Left} />
+      <Handle type="source" id="right" position={Position.Right} />
+      <Handle type="source" id="top" position={Position.Top} />
+      <Handle type="source" id="bottom" position={Position.Bottom} />
     </div>
   );
 };
diff --git a/examples/nextjs/pages/Undirectional/index.tsx b/examples/nextjs/pages/Undirectional/index.tsx
index f2f42a0f..84842d60 100644
--- a/examples/nextjs/pages/Undirectional/index.tsx
+++ b/examples/nextjs/pages/Undirectional/index.tsx
@@ -14,7 +14,7 @@ import {
   updateEdge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 import CustomNode from './CustomNode';
 
 const initialNodes: Node[] = [
@@ -184,8 +184,7 @@ const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onConnect = (params: Edge | Connection) =>
-    setEdges((els) => addEdge(params, els));
+  const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
   const { project } = useReactFlow();
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setEdges((els) => updateEdge(oldEdge, newConnection, els));
diff --git a/examples/nextjs/pages/UpdatableEdge/index.tsx b/examples/nextjs/pages/UpdatableEdge/index.tsx
index d4b166d0..288fd4e5 100644
--- a/examples/nextjs/pages/UpdatableEdge/index.tsx
+++ b/examples/nextjs/pages/UpdatableEdge/index.tsx
@@ -12,7 +12,7 @@ import {
   NodeChange,
   EdgeChange,
   HandleType,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 import { Controls } from '@react-flow/controls';
 
@@ -59,17 +59,11 @@ const initialNodes: Node[] = [
   },
 ];
 
-const initialEdges = [
-  { id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' },
-];
+const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }];
 
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
-  reactFlowInstance.fitView();
-const onEdgeUpdateStart = (
-  _: React.MouseEvent,
-  edge: Edge,
-  handleType: HandleType
-) => console.log(`start update ${handleType} handle`, edge);
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
+const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge, handleType: HandleType) =>
+  console.log(`start update ${handleType} handle`, edge);
 const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge, handleType: HandleType) =>
   console.log(`end update ${handleType} handle`, edge);
 
@@ -78,8 +72,7 @@ const UpdatableEdge = () => {
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setEdges((els) => updateEdge(oldEdge, newConnection, els));
-  const onConnect = (connection: Connection) =>
-    setEdges((els) => addEdge(connection, els));
+  const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els));
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     console.log(changes);
diff --git a/examples/nextjs/pages/UpdateNode/index.tsx b/examples/nextjs/pages/UpdateNode/index.tsx
index 4b68401f..40170c1f 100644
--- a/examples/nextjs/pages/UpdateNode/index.tsx
+++ b/examples/nextjs/pages/UpdateNode/index.tsx
@@ -1,11 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import {
-  ReactFlow,
-  Node,
-  Edge,
-  useNodesState,
-  useEdgesState,
-} from '@react-flow/core';
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
 
 import styles from './updatenode.module.css';
 
@@ -77,21 +71,14 @@ const UpdateNode = () => {
     >
       <div className={styles.controls}>
         <label>label:</label>
-        <input
-          value={nodeName}
-          onChange={(evt) => setNodeName(evt.target.value)}
-        />
+        <input value={nodeName} onChange={(evt) => setNodeName(evt.target.value)} />
 
         <label className={styles.bgLabel}>background:</label>
         <input value={nodeBg} onChange={(evt) => setNodeBg(evt.target.value)} />
 
         <div className="updatenode__checkboxwrapper">
           <label>hidden:</label>
-          <input
-            type="checkbox"
-            checked={nodeHidden}
-            onChange={(evt) => setNodeHidden(evt.target.checked)}
-          />
+          <input type="checkbox" checked={nodeHidden} onChange={(evt) => setNodeHidden(evt.target.checked)} />
         </div>
       </div>
     </ReactFlow>
diff --git a/examples/nextjs/pages/UseKeyPress/index.tsx b/examples/nextjs/pages/UseKeyPress/index.tsx
index f279a4bc..b61dad2e 100644
--- a/examples/nextjs/pages/UseKeyPress/index.tsx
+++ b/examples/nextjs/pages/UseKeyPress/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useKeyPress } from '@react-flow/core';
+import { useKeyPress } from '@react-flow/bundle';
 
 const UseKeyPressComponent = () => {
   const metaPressed = useKeyPress(['Meta']);
diff --git a/examples/nextjs/pages/UseReactFlow/index.tsx b/examples/nextjs/pages/UseReactFlow/index.tsx
index 0a7f6c0a..e60428d4 100644
--- a/examples/nextjs/pages/UseReactFlow/index.tsx
+++ b/examples/nextjs/pages/UseReactFlow/index.tsx
@@ -11,7 +11,7 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 const initialNodes: Node[] = [
   {
@@ -53,8 +53,7 @@ const getId = () => `${id++}`;
 const UseZoomPanHelperFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) =>
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
   const {
     project,
     setCenter,
@@ -117,10 +116,7 @@ const UseZoomPanHelperFlow = () => {
     addEdges({ id: 'e3-4', source: '3', target: '4' });
   }, [addEdges]);
 
-  const onResetNodes = useCallback(
-    () => setNodesHook(initialNodes),
-    [setNodesHook]
-  );
+  const onResetNodes = useCallback(() => setNodesHook(initialNodes), [setNodesHook]);
 
   return (
     <ReactFlow
@@ -138,9 +134,7 @@ const UseZoomPanHelperFlow = () => {
       <div style={{ position: 'absolute', left: 0, top: 0, zIndex: 100 }}>
         <button onClick={() => zoomIn({ duration: 1200 })}>zoomIn</button>
         <button onClick={() => zoomOut({ duration: 0 })}>zoomOut</button>
-        <button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>
-          fitView
-        </button>
+        <button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>fitView</button>
         <button onClick={onAddNode}>add node</button>
         <button onClick={onResetNodes}>reset nodes</button>
         <button onClick={logNodes}>useNodes</button>
diff --git a/examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx b/examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx
index f93ebc3d..38ee4af1 100644
--- a/examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx
+++ b/examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx
@@ -1,5 +1,5 @@
 import React, { memo, FC, useMemo, CSSProperties } from 'react';
-import { Handle, Position, NodeProps } from '@react-flow/core';
+import { Handle, Position, NodeProps } from '@react-flow/bundle';
 
 const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
 
@@ -11,7 +11,7 @@ const CustomNode: FC<NodeProps> = ({ data }) => {
         return (
           <Handle
             key={handleId}
-            type='source'
+            type="source"
             position={Position.Right}
             id={handleId}
             style={{ top: 10 * i + data.handlePosition * 10 }}
@@ -23,7 +23,7 @@ const CustomNode: FC<NodeProps> = ({ data }) => {
 
   return (
     <div style={nodeStyles}>
-      <Handle type='target' position={Position.Left} />
+      <Handle type="target" position={Position.Left} />
       <div>output handle count: {data.handleCount}</div>
       {handles}
     </div>
diff --git a/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx b/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx
index 511d6aaf..2598665e 100644
--- a/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx
+++ b/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx
@@ -12,7 +12,7 @@ import {
   Position,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 import CustomNode from './CustomNode';
 
@@ -48,10 +48,7 @@ const getId = (): string => `${id++}`;
 const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const onConnect = useCallback(
-    (params: Edge | Connection) => setEdges((els) => addEdge(params, els)),
-    [setEdges]
-  );
+  const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
 
   const updateNodeInternals = useUpdateNodeInternals();
   const { project } = useReactFlow();
@@ -98,10 +95,7 @@ const UpdateNodeInternalsFlow = () => {
     );
   }, [setNodes]);
 
-  const updateNode = useCallback(
-    () => updateNodeInternals('1'),
-    [updateNodeInternals]
-  );
+  const updateNode = useCallback(() => updateNodeInternals('1'), [updateNodeInternals]);
 
   return (
     <ReactFlow
diff --git a/examples/nextjs/pages/Validation/index.tsx b/examples/nextjs/pages/Validation/index.tsx
index 6a6e8bb4..c4ab6f38 100644
--- a/examples/nextjs/pages/Validation/index.tsx
+++ b/examples/nextjs/pages/Validation/index.tsx
@@ -12,7 +12,7 @@ import {
   useNodesState,
   useEdgesState,
   OnConnectStartParams,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 import styles from './validation.module.css';
 
@@ -28,27 +28,15 @@ const isValidConnection = (connection: Connection) => connection.target === 'B';
 const CustomInput: FC<NodeProps> = () => (
   <>
     <div>Only connectable with B</div>
-    <Handle
-      type="source"
-      position={Position.Right}
-      isValidConnection={isValidConnection}
-    />
+    <Handle type="source" position={Position.Right} isValidConnection={isValidConnection} />
   </>
 );
 
 const CustomNode: FC<NodeProps> = ({ id }) => (
   <>
-    <Handle
-      type="target"
-      position={Position.Left}
-      isValidConnection={isValidConnection}
-    />
+    <Handle type="target" position={Position.Left} isValidConnection={isValidConnection} />
     <div>{id}</div>
-    <Handle
-      type="source"
-      position={Position.Right}
-      isValidConnection={isValidConnection}
-    />
+    <Handle type="source" position={Position.Right} isValidConnection={isValidConnection} />
   </>
 );
 
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
index 0df7753e..bd8f0248 100755
--- a/examples/nextjs/pages/index.tsx
+++ b/examples/nextjs/pages/index.tsx
@@ -10,7 +10,7 @@ import {
   Node,
   Edge,
   useReactFlow,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);

From b2d730d9cc2a600d18c57675c384d66c20892a22 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 9 Aug 2022 18:56:03 +0200
Subject: [PATCH 4/4] chore(example): update deps

---
 examples/nextjs/package.json | 5 +----
 yarn.lock                    | 7 ++-----
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index b6906e6b..bafc5537 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -11,10 +11,7 @@
   },
   "dependencies": {
     "@preconstruct/next": "^4.0.0",
-    "@react-flow/background": "11.0.0",
-    "@react-flow/controls": "11.0.0",
-    "@react-flow/core": "11.0.0",
-    "@react-flow/minimap": "11.0.0",
+    "@react-flow/bundle": "11.0.0",
     "dagre": "^0.8.5",
     "localforage": "^1.10.0",
     "next": "12.2.2",
diff --git a/yarn.lock b/yarn.lock
index b162b833..b347e9d2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2187,7 +2187,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-flow/bundle@workspace:packages/bundle":
+"@react-flow/bundle@11.0.0, @react-flow/bundle@workspace:packages/bundle":
   version: 0.0.0-use.local
   resolution: "@react-flow/bundle@workspace:packages/bundle"
   dependencies:
@@ -8066,10 +8066,7 @@ __metadata:
   resolution: "react-flow-examples@workspace:examples/nextjs"
   dependencies:
     "@preconstruct/next": ^4.0.0
-    "@react-flow/background": 11.0.0
-    "@react-flow/controls": 11.0.0
-    "@react-flow/core": 11.0.0
-    "@react-flow/minimap": 11.0.0
+    "@react-flow/bundle": 11.0.0
     "@types/dagre": ^0.7.47
     dagre: ^0.8.5
     eslint: 8.19.0