Chore: Migrate from react-beautiful-dnd to @hello-pangea/dnd (#90328)

* migrate from react-beautiful-dnd to @hello-pangea/dnd

* revert comment

package.json

@@ -125,7 +125,6 @@
     "@types/pluralize": "^0.0.33",
     "@types/prismjs": "1.26.4",
     "@types/react": "18.3.3",
-    "@types/react-beautiful-dnd": "13.1.8",
     "@types/react-dom": "18.2.25",
     "@types/react-grid-layout": "1.3.5",
     "@types/react-highlight-words": "0.20.0",
@@ -265,6 +264,7 @@
     "@grafana/schema": "workspace:*",
     "@grafana/sql": "workspace:*",
     "@grafana/ui": "workspace:*",
+    "@hello-pangea/dnd": "16.6.0",
     "@kusto/monaco-kusto": "^10.0.0",
     "@leeoniya/ufuzzy": "1.0.14",
     "@lezer/common": "1.2.1",
@@ -351,7 +351,6 @@
     "rc-tree": "5.8.7",
     "re-resizable": "6.9.17",
     "react": "18.2.0",
-    "react-beautiful-dnd": "13.1.1",
     "react-diff-viewer": "^3.1.1",
     "react-dom": "18.2.0",
     "react-draggable": "4.4.6",

packages/grafana-prometheus/package.json

@@ -44,6 +44,7 @@
     "@grafana/runtime": "11.2.0-pre",
     "@grafana/schema": "11.2.0-pre",
     "@grafana/ui": "11.2.0-pre",
+    "@hello-pangea/dnd": "16.6.0",
     "@leeoniya/ufuzzy": "1.0.14",
     "@lezer/common": "1.2.1",
     "@lezer/highlight": "1.2.0",
@@ -63,7 +64,6 @@
     "monaco-promql": "1.7.4",
     "pluralize": "8.0.0",
     "prismjs": "1.29.0",
-    "react-beautiful-dnd": "13.1.1",
     "react-highlight-words": "0.20.0",
     "react-select": "5.8.0",
     "react-use": "17.5.0",
@@ -96,7 +96,6 @@
     "@types/pluralize": "^0.0.33",
     "@types/prismjs": "1.26.4",
     "@types/react": "18.3.3",
-    "@types/react-beautiful-dnd": "13.1.8",
     "@types/react-dom": "18.2.25",
     "@types/react-highlight-words": "0.20.0",
     "@types/react-window": "1.8.8",

packages/grafana-prometheus/src/querybuilder/shared/OperationEditor.tsx

@@ -1,8 +1,8 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
 import { css, cx } from '@emotion/css';
+import { Draggable } from '@hello-pangea/dnd';
 import { useEffect, useId, useState } from 'react';
 import * as React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 
 import { DataSourceApi, GrafanaTheme2, TimeRange } from '@grafana/data';
 import { Button, Icon, Stack, Tooltip, useStyles2 } from '@grafana/ui';

packages/grafana-prometheus/src/querybuilder/shared/OperationHeader.tsx

@@ -1,7 +1,7 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx
 import { css } from '@emotion/css';
+import { DraggableProvided } from '@hello-pangea/dnd';
 import { memo, useState } from 'react';
-import { DraggableProvided } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { FlexItem } from '@grafana/experimental';

packages/grafana-prometheus/src/querybuilder/shared/OperationList.tsx

@@ -1,7 +1,7 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.tsx
 import { css } from '@emotion/css';
+import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
 import { useState } from 'react';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 import { useMountedState, usePrevious } from 'react-use';
 
 import { DataSourceApi, GrafanaTheme2, TimeRange } from '@grafana/data';

packages/grafana-ui/package.json

@@ -85,7 +85,6 @@
     "rc-slider": "10.6.2",
     "rc-time-picker": "^3.7.3",
     "rc-tooltip": "6.2.0",
-    "react-beautiful-dnd": "13.1.1",
     "react-calendar": "4.8.0",
     "react-colorful": "5.6.1",
     "react-custom-scrollbars-2": "4.5.0",
@@ -147,7 +146,6 @@
     "@types/node": "20.14.2",
     "@types/prismjs": "1.26.4",
     "@types/react": "18.3.3",
-    "@types/react-beautiful-dnd": "13.1.8",
     "@types/react-color": "3.0.12",
     "@types/react-dom": "18.2.25",
     "@types/react-highlight-words": "0.20.0",

public/app/core/components/Layers/LayerDragDropList.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, IconButton, useStyles2 } from '@grafana/ui';

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
+import { Draggable } from '@hello-pangea/dnd';
 import { useCallback, useEffect, useState } from 'react';
 import * as React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 import { useUpdateEffect } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';

public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
+import { DraggableProvided } from '@hello-pangea/dnd';
 import { MouseEventHandler } from 'react';
 import * as React from 'react';
-import { DraggableProvided } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, IconButton, useStyles2, Stack } from '@grafana/ui';

public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx

@@ -1,6 +1,6 @@
+import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
 import { omit } from 'lodash';
 import { PureComponent, useState } from 'react';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 
 import {
   DataQuery,

public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.tsx

@@ -1,8 +1,4 @@
 import { css } from '@emotion/css';
-import cx from 'classnames';
-import { compact } from 'lodash';
-import { useCallback, useState } from 'react';
-import * as React from 'react';
 import {
   DragDropContext,
   Draggable,
@@ -10,7 +6,11 @@ import {
   Droppable,
   DroppableProvided,
   DropResult,
-} from 'react-beautiful-dnd';
+} from '@hello-pangea/dnd';
+import cx from 'classnames';
+import { compact } from 'lodash';
+import { useCallback, useState } from 'react';
+import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Badge, Icon, Modal, Tooltip, useStyles2 } from '@grafana/ui';

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
+import { DragDropContext, DropResult, Droppable } from '@hello-pangea/dnd';
 import { useState } from 'react';
-import { DragDropContext, DropResult, Droppable } from 'react-beautiful-dnd';
 
 import { DataTransformerConfig, GrafanaTheme2, IconName, PanelData } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

public/app/features/dashboard-scene/settings/variables/VariableEditorList.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
+import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
 import { ReactElement } from 'react';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { reportInteraction } from '@grafana/runtime';

public/app/features/dashboard-scene/settings/variables/VariableEditorListRow.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
+import { Draggable } from '@hello-pangea/dnd';
 import { ReactElement, useState } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx

@@ -1,6 +1,6 @@
+import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
 import { ChangeEvent } from 'react';
 import * as React from 'react';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 import { Unsubscribable } from 'rxjs';
 
 import {

public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
+import { Draggable } from '@hello-pangea/dnd';
 import { useCallback, useEffect, useRef } from 'react';
 import * as React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2, MappingType, SpecialValueMatch, SelectableValue, ValueMappingResult } from '@grafana/data';
 import { useStyles2, Icon, Select, HorizontalGroup, ColorPicker, IconButton, Input, Button } from '@grafana/ui';

public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
+import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
 import { uniqueId } from 'lodash';
 import { useEffect, useState } from 'react';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2, MappingType, SelectableValue, SpecialValueMatch, ValueMapping } from '@grafana/data';
 import { useStyles2, Modal, ValuePicker, Button } from '@grafana/ui';

public/app/features/explore/Logs/LogsTableActiveFields.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { DragDropContext, Draggable, DraggableProvided, Droppable, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, DraggableProvided, Droppable, DropResult } from '@hello-pangea/dnd';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
 import { useTheme2 } from '@grafana/ui/src';

public/app/features/playlist/PlaylistTable.tsx

@@ -1,4 +1,4 @@
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
 
 import { FieldSet } from '@grafana/ui';
 import { t } from 'app/core/internationalization';

public/app/features/playlist/PlaylistTableRows.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
+import { Draggable } from '@hello-pangea/dnd';
 import pluralize from 'pluralize';
 import { ReactNode } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

public/app/features/query/components/QueryEditorRows.tsx

@@ -1,5 +1,5 @@
+import { DragDropContext, DragStart, Droppable, DropResult } from '@hello-pangea/dnd';
 import { PureComponent, ReactNode } from 'react';
-import { DragDropContext, DragStart, Droppable, DropResult } from 'react-beautiful-dnd';
 
 import {
   CoreApp,

public/app/features/transformers/editors/EnumMappingEditor.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
+import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
 import { isEqual } from 'lodash';
 import { useEffect, useState } from 'react';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 
 import { DataFrame, EnumFieldConfig, GrafanaTheme2 } from '@grafana/data';
 import { ConvertFieldTypeTransformerOptions } from '@grafana/data/src/transformations/transformers/convertFieldType';

public/app/features/transformers/editors/EnumMappingRow.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
+import { Draggable } from '@hello-pangea/dnd';
 import { FormEvent, useState, KeyboardEvent, useRef, useEffect } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, Input, IconButton, HorizontalGroup, FieldValidationMessage, useStyles2 } from '@grafana/ui';

public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
+import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
 import { useCallback, useMemo } from 'react';
-import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
 
 import {
   DataTransformerID,

public/app/features/variables/editor/VariableEditorList.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
+import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
 import { ReactElement } from 'react';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 
 import { TypedVariableModel } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

public/app/features/variables/editor/VariableEditorListRow.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
+import { Draggable } from '@hello-pangea/dnd';
 import { ReactElement } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2, TypedVariableModel } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

public/app/plugins/panel/geomap/editor/LayersEditor.tsx

@@ -1,4 +1,4 @@
-import { DropResult } from 'react-beautiful-dnd';
+import { DropResult } from '@hello-pangea/dnd';
 
 import { StandardEditorProps } from '@grafana/data';
 import { Container } from '@grafana/ui';

yarn.lock

@@ -1574,7 +1574,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:7.24.7, @babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.5, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:7.24.7, @babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.24.5, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.24.7
   resolution: "@babel/runtime@npm:7.24.7"
   dependencies:
@@ -3406,6 +3406,7 @@ __metadata:
     "@grafana/schema": "npm:11.2.0-pre"
     "@grafana/tsconfig": "npm:^1.3.0-rc1"
     "@grafana/ui": "npm:11.2.0-pre"
+    "@hello-pangea/dnd": "npm:16.6.0"
     "@leeoniya/ufuzzy": "npm:1.0.14"
     "@lezer/common": "npm:1.2.1"
     "@lezer/highlight": "npm:1.2.0"
@@ -3430,7 +3431,6 @@ __metadata:
     "@types/pluralize": "npm:^0.0.33"
     "@types/prismjs": "npm:1.26.4"
     "@types/react": "npm:18.3.3"
-    "@types/react-beautiful-dnd": "npm:13.1.8"
     "@types/react-dom": "npm:18.2.25"
     "@types/react-highlight-words": "npm:0.20.0"
     "@types/react-window": "npm:1.8.8"
@@ -3472,7 +3472,6 @@ __metadata:
     prettier: "npm:3.3.1"
     prismjs: "npm:1.29.0"
     react: "npm:18.2.0"
-    react-beautiful-dnd: "npm:13.1.1"
     react-dom: "npm:18.2.0"
     react-highlight-words: "npm:0.20.0"
     react-select: "npm:5.8.0"
@@ -3727,7 +3726,6 @@ __metadata:
     "@types/node": "npm:20.14.2"
     "@types/prismjs": "npm:1.26.4"
     "@types/react": "npm:18.3.3"
-    "@types/react-beautiful-dnd": "npm:13.1.8"
     "@types/react-color": "npm:3.0.12"
     "@types/react-dom": "npm:18.2.25"
     "@types/react-highlight-words": "npm:0.20.0"
@@ -3775,7 +3773,6 @@ __metadata:
     rc-time-picker: "npm:^3.7.3"
     rc-tooltip: "npm:6.2.0"
     react: "npm:18.2.0"
-    react-beautiful-dnd: "npm:13.1.1"
     react-calendar: "npm:4.8.0"
     react-colorful: "npm:5.6.1"
     react-custom-scrollbars-2: "npm:4.5.0"
@@ -3830,6 +3827,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@hello-pangea/dnd@npm:16.6.0":
+  version: 16.6.0
+  resolution: "@hello-pangea/dnd@npm:16.6.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.24.1"
+    css-box-model: "npm:^1.2.1"
+    memoize-one: "npm:^6.0.0"
+    raf-schd: "npm:^4.0.3"
+    react-redux: "npm:^8.1.3"
+    redux: "npm:^4.2.1"
+    use-memo-one: "npm:^1.1.3"
+  peerDependencies:
+    react: ^16.8.5 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0
+  checksum: 10/f377461d400c8223174745e4d7ecf4fb0146f9e807413f98120ebbcf075282e631273988d336daaf1fb8e6b6c6a1a8e4f99beefecd7a6b68ccc3bb064d38f13f
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/config-array@npm:^0.11.13, @humanwhocodes/config-array@npm:^0.11.14":
   version: 0.11.14
   resolution: "@humanwhocodes/config-array@npm:0.11.14"
@@ -9072,15 +9087,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-beautiful-dnd@npm:13.1.8":
-  version: 13.1.8
-  resolution: "@types/react-beautiful-dnd@npm:13.1.8"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10/cb8a182ed0ea6f680c7c343fcb4e54237437ca90dc88c2a70f4a203ec8ad0740e389e3ab7772c8cc1479f05e5a046bccbc33d54055b94e0fe5b22be030ab23d2
-  languageName: node
-  linkType: hard
-
 "@types/react-color@npm:3.0.12":
   version: 3.0.12
   resolution: "@types/react-color@npm:3.0.12"
@@ -13050,7 +13056,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-box-model@npm:^1.2.0":
+"css-box-model@npm:^1.2.0, css-box-model@npm:^1.2.1":
   version: 1.2.1
   resolution: "css-box-model@npm:1.2.1"
   dependencies:
@@ -17150,6 +17156,7 @@ __metadata:
     "@grafana/sql": "workspace:*"
     "@grafana/tsconfig": "npm:^1.3.0-rc1"
     "@grafana/ui": "workspace:*"
+    "@hello-pangea/dnd": "npm:16.6.0"
     "@kusto/monaco-kusto": "npm:^10.0.0"
     "@leeoniya/ufuzzy": "npm:1.0.14"
     "@lezer/common": "npm:1.2.1"
@@ -17218,7 +17225,6 @@ __metadata:
     "@types/pluralize": "npm:^0.0.33"
     "@types/prismjs": "npm:1.26.4"
     "@types/react": "npm:18.3.3"
-    "@types/react-beautiful-dnd": "npm:13.1.8"
     "@types/react-dom": "npm:18.2.25"
     "@types/react-grid-layout": "npm:1.3.5"
     "@types/react-highlight-words": "npm:0.20.0"
@@ -17367,7 +17373,6 @@ __metadata:
     rc-tree: "npm:5.8.7"
     re-resizable: "npm:6.9.17"
     react: "npm:18.2.0"
-    react-beautiful-dnd: "npm:13.1.1"
     react-diff-viewer: "npm:^3.1.1"
     react-dom: "npm:18.2.0"
     react-draggable: "npm:4.4.6"
@@ -24933,7 +24938,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"raf-schd@npm:^4.0.2":
+"raf-schd@npm:^4.0.2, raf-schd@npm:^4.0.3":
   version: 4.0.3
   resolution: "raf-schd@npm:4.0.3"
   checksum: 10/45514041c5ad31fa96aef3bb3c572a843b92da2f2cd1cb4a47c9ad58e48761d3a4126e18daa32b2bfa0bc2551a42d8f324a0e40e536cb656969929602b4e8b58
@@ -25239,7 +25244,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-beautiful-dnd@npm:13.1.1, react-beautiful-dnd@npm:^13.1.1":
+"react-beautiful-dnd@npm:^13.1.1":
   version: 13.1.1
   resolution: "react-beautiful-dnd@npm:13.1.1"
   dependencies:
@@ -30068,6 +30073,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-memo-one@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "use-memo-one@npm:1.1.3"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/8f08eba26d69406b61bb4b8dacdd5a92bd6aef5b53d346dfe87954f7330ee10ecabc937cc7854635155d46053828e85c10b5a5aff7a04720e6a97b9f42999bac
+  languageName: node
+  linkType: hard
+
 "use-sidecar@npm:^1.1.2":
   version: 1.1.2
   resolution: "use-sidecar@npm:1.1.2"