refactor(background): move background to own package, replace example import

examples/nextjs/package.json

@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "@preconstruct/next": "^4.0.0",
+    "@react-flow/background": "11.0.0",
     "@react-flow/core": "11.0.0",
     "@react-flow/minimap": "11.0.0",
     "dagre": "^0.8.5",
+    "localforage": "^1.10.0",
     "next": "12.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/nextjs/pages/ControlledUncontrolled/index.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 
 import ReactFlow, {
   useReactFlow,
-  Background,
-  BackgroundVariant,
   Node,
   Edge,
   ReactFlowProvider,
@@ -11,6 +9,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Background, { BackgroundVariant } from '@react-flow/background';
+
 const defaultNodes: Node[] = [
   {
     id: '1',

examples/nextjs/pages/CustomConnectionLine/index.tsx

@@ -2,14 +2,14 @@ import React, { useCallback } from 'react';
 import ReactFlow, {
   Node,
   addEdge,
-  Background,
-  BackgroundVariant,
   Connection,
   Edge,
   useNodesState,
   useEdgesState,
 } from '@react-flow/core';
 
+import Background, { BackgroundVariant } from '@react-flow/background';
+
 import ConnectionLine from './ConnectionLine';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/DefaultNodes/index.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 
 import ReactFlow, {
   useReactFlow,
-  Background,
-  BackgroundVariant,
   Node,
   Edge,
   ReactFlowProvider,
 } from '@react-flow/core';
 
+import Background, { BackgroundVariant } from '@react-flow/background';
+
 const defaultNodes: Node[] = [
   {
     id: '1',

examples/nextjs/pages/EdgeTypes/index.tsx

@@ -6,7 +6,6 @@ import React from 'react';
 import ReactFlow, {
   addEdge,
   Controls,
-  Background,
   ReactFlowInstance,
   Connection,
   Edge,
@@ -14,6 +13,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
+
 import MiniMap from '@react-flow/minimap';
 
 import { getElements } from './utils';

examples/nextjs/pages/Edges/index.tsx

@@ -1,7 +1,6 @@
 import React, { MouseEvent } from 'react';
 import ReactFlow, {
   addEdge,
-  Background,
   Connection,
   Controls,
   Edge,
@@ -13,6 +12,8 @@ import ReactFlow, {
   useNodesState,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
+
 import MiniMap from '@react-flow/minimap';
 
 import CustomEdge from './CustomEdge';

examples/nextjs/pages/Empty/index.tsx

@@ -3,9 +3,7 @@ import React, { MouseEvent, CSSProperties } from 'react';
 import ReactFlow, {
   addEdge,
   Controls,
-  Background,
   Node,
-  BackgroundVariant,
   Connection,
   Edge,
   useNodesState,
@@ -13,6 +11,8 @@ import ReactFlow, {
   ReactFlowInstance,
 } from '@react-flow/core';
 
+import Background, { BackgroundVariant } from '@react-flow/background';
+
 const onInit = (reactFlowInstance: ReactFlowInstance) =>
   console.log('flow loaded:', reactFlowInstance);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/nextjs/pages/FloatingEdges/index.tsx

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Background,
   ReactFlowInstance,
   EdgeTypes,
   Connection,
@@ -10,6 +9,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
+
 import styles from './style.module.css';
 
 import FloatingConnectionLine from './FloatingConnectionLine';

examples/nextjs/pages/MultiFlows/index.tsx

@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Background,
   Node,
   Edge,
   Connection,
@@ -12,6 +11,8 @@ import ReactFlow, {
   MarkerType,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
+
 import styles from './multiflows.module.css';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/NestedNodes/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, MouseEvent, useCallback } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Background,
   useNodesState,
   useEdgesState,
   Controls,
@@ -13,6 +12,7 @@ import ReactFlow, {
 } from '@react-flow/core';
 
 import MiniMap from '@react-flow/minimap';
+import Background from '@react-flow/background';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) =>
   console.log('drag stop', node);

examples/nextjs/pages/Overview/index.tsx

@@ -7,7 +7,6 @@ import React, {
 import ReactFlow, {
   addEdge,
   Controls,
-  Background,
   Node,
   Viewport,
   SnapGrid,
@@ -19,6 +18,7 @@ import ReactFlow, {
   OnSelectionChangeParams,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
 import MiniMap from '@react-flow/minimap';
 
 const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>

examples/nextjs/pages/Stress/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState, CSSProperties, useCallback } from 'react';
 import ReactFlow, {
   Controls,
-  Background,
   ReactFlowInstance,
   Edge,
   Node,
@@ -13,6 +12,7 @@ import ReactFlow, {
   EdgeChange,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
 import MiniMap from '@react-flow/minimap';
 
 import { getNodesAndEdges } from './utils';

examples/nextjs/pages/Subflow/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, MouseEvent, useCallback } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Background,
   Controls,
   Node,
   Edge,
@@ -13,6 +12,7 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
 import MiniMap from '@react-flow/minimap';
 
 import DebugNode from './DebugNode';

examples/nextjs/pages/UseReactFlow/index.tsx

@@ -3,7 +3,6 @@ import React, { useCallback, MouseEvent, useEffect } from 'react';
 import ReactFlow, {
   Node,
   addEdge,
-  Background,
   useReactFlow,
   ReactFlowProvider,
   Connection,
@@ -12,6 +11,7 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
 import MiniMap from '@react-flow/minimap';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/index.tsx

@@ -2,14 +2,13 @@ import React, { MouseEvent } from 'react';
 
 import ReactFlow, {
   ReactFlowProvider,
-  Background,
-  BackgroundVariant,
   Node,
   Edge,
   useReactFlow,
 } from '@react-flow/core';
 
 import Minimap from '@react-flow/minimap';
+import Background, { BackgroundVariant } from '@react-flow/background';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) =>