@odigos/ui-kit 0.0.25 → 0.0.27

package/lib/containers.js

@@ -1,23 +1,23 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { D as DISPLAY_TITLES, A as ACTION_OPTIONS, M as MONITORS_OPTIONS, B as BUTTON_TEXTS, I as INSTRUMENTATION_RULE_OPTIONS, F as FORM_ALERTS } from './index-HOKGoci6.js';
+import { D as DISPLAY_TITLES, A as ACTION_OPTIONS, M as MONITORS_OPTIONS, B as BUTTON_TEXTS, I as INSTRUMENTATION_RULE_OPTIONS, F as FORM_ALERTS } from './index-CTgLYGo-.js';
 import { ActionType, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, FieldTypes, SignalType, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a4 as ModalBody, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, a0 as FlexColumn, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, A as AddButton$1, J as NotificationNote, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-CYUrArTm.js';
-import { h as usePendingStore, g as useNotificationStore, b as useDrawerStore, c as useEntityStore, f as useModalStore, d as useFilterStore, s as styleInject, i as useSelectedStore, e as useInstrumentStore, a as useDataStreamStore, k as getEntityId, j as useSetupStore, u as useDarkMode } from './index-CK8tITRA.js';
+import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a4 as ModalBody, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, a0 as FlexColumn, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, A as AddButton$1, J as NotificationNote, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-QaNawEGJ.js';
+import { h as usePendingStore, g as useNotificationStore, b as useDrawerStore, c as useEntityStore, f as useModalStore, d as useFilterStore, s as styleInject, i as useSelectedStore, e as useInstrumentStore, a as useDataStreamStore, k as getEntityId, j as useSetupStore, u as useDarkMode } from './index-DMXaEyAB.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
 import { i as CheckCircledIcon, O as OdigosLogo } from './index-IKusBlIE.js';
 import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-CamnKrev.js';
-import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-C0N2DFBu.js';
-import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-Bxm0NBIy.js';
-import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-DvT5YNul.js';
+import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-CFnxjzaW.js';
+import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-DAxuVELF.js';
+import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-BSKilkmZ.js';
 import { E as EditIcon } from './index-CWbxXTof.js';
 import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, f as CheckIcon, A as ArrowIcon, a as CopyIcon, g as CrossIcon } from './index-BJxaoI0G.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-CTdoDQzG.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-C2m4uddS.js';
-import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, v as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, u as mapExportedSignals, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, c as compareCondition, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, t as isOverTime } from './index-BOkleuyi.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-DlCB8lqz.js';
+import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-CJs4RDHU.js';
+import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, v as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, u as mapExportedSignals, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, c as compareCondition, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, t as isOverTime } from './index-BfatCMWq.js';
 import { createPortal } from 'react-dom';
-import { N as NoteBackToSummary, E as EditButton } from './index-DE7A6Q_i.js';
+import { N as NoteBackToSummary, E as EditButton } from './index-KyiD2AtF.js';
 import { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
 import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-BRW_Nl-n.js';
 import './index-DGel4E-Z.js';
@@ -1051,7 +1051,7 @@ const ComputePlatformsActionsMenu = ({ connections }) => {
                 React.createElement(ConnectionStatusDropdown, { connections: connections, value: statuses, onSelect: (val) => setStatuses([...(statuses || []), val]), onDeselect: (val) => setStatuses((statuses || []).filter((opt) => opt.id !== val.id)), showSearch: true, required: true, isMulti: true })))));
 };
 
-var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.top.center, .react-flow__panel.bottom.center {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.left.center, .react-flow__panel.right.center {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 4px;\n  height: 4px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  transform: translate(-50%, -50%);\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
+var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.top.center, .react-flow__panel.bottom.center {\n      left: 50%;\n      transform: translateX(-15px) translateX(-50%);\n    }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.left.center, .react-flow__panel.right.center {\n      top: 50%;\n      transform: translateY(-15px) translateY(-50%);\n    }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__controls.horizontal .react-flow__controls-button {\n    border-bottom: none;\n    border-right: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n  }\n.react-flow__controls.horizontal .react-flow__controls-button:last-child {\n    border-right: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 4px;\n  height: 4px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  transform: translate(-50%, -50%);\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
 styleInject(css_248z);
 
 var jsxRuntime = {exports: {}};
@@ -5513,7 +5513,7 @@ const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
  */
 function parsePadding(padding, viewport) {
     if (typeof padding === 'number') {
-        return Math.floor(viewport - viewport / (1 + padding));
+        return Math.floor((viewport - viewport / (1 + padding)) * 0.5);
     }
     if (typeof padding === 'string' && padding.endsWith('px')) {
         const paddingValue = parseFloat(padding);
@@ -5671,6 +5671,19 @@ function areSetsEqual(a, b) {
     }
     return true;
 }
+/**
+ * Polyfill for Promise.withResolvers until we can use it in all browsers
+ * @internal
+ */
+function withResolvers() {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    return { promise, resolve, reject };
+}
 
 function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = false, transform, containerBounds }) {
     const { x, y } = getEventPosition(event);
@@ -6297,7 +6310,7 @@ function updateAbsolutePositions(nodeLookup, parentLookup, options) {
 }
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
     const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
-    let nodesInitialized = true;
+    let nodesInitialized = nodes.length > 0;
     const tmpLookup = new Map(nodeLookup);
     const selectedNodeZ = _options?.elevateNodesOnSelect ? 1000 : 0;
     nodeLookup.clear();
@@ -6328,7 +6341,9 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
             };
             nodeLookup.set(userNode.id, internalNode);
         }
-        if ((!internalNode.measured || !internalNode.measured.width || !internalNode.measured.height) &&
+        if ((internalNode.measured === undefined ||
+            internalNode.measured.width === undefined ||
+            internalNode.measured.height === undefined) &&
             !internalNode.hidden) {
             nodesInitialized = false;
         }
@@ -7921,7 +7936,7 @@ function nodeToChildExtent(child, parent, nodeOrigin) {
 }
 function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     const selection = select(domNode);
-    function update({ controlPosition, boundaries, keepAspectRatio, onResizeStart, onResize, onResizeEnd, shouldResize, }) {
+    function update({ controlPosition, boundaries, keepAspectRatio, resizeDirection, onResizeStart, onResize, onResizeEnd, shouldResize, }) {
         let prevValues = { ...initPrevValues$1 };
         let startValues = { ...initStartValues };
         const controlDirection = getControlDirection(controlPosition);
@@ -8036,8 +8051,10 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
                 }
             }
             if (isWidthChange || isHeightChange) {
-                change.width = isWidthChange ? width : prevValues.width;
-                change.height = isHeightChange ? height : prevValues.height;
+                change.width =
+                    isWidthChange && (!resizeDirection || resizeDirection === 'horizontal') ? width : prevValues.width;
+                change.height =
+                    isHeightChange && (!resizeDirection || resizeDirection === 'vertical') ? height : prevValues.height;
                 prevValues.width = change.width;
                 prevValues.height = change.height;
             }
@@ -9266,8 +9283,12 @@ function applyChange(change, element) {
                 element.measured.width = change.dimensions.width;
                 element.measured.height = change.dimensions.height;
                 if (change.setAttributes) {
-                    element.width = change.dimensions.width;
-                    element.height = change.dimensions.height;
+                    if (change.setAttributes === true || change.setAttributes === 'width') {
+                        element.width = change.dimensions.width;
+                    }
+                    if (change.setAttributes === true || change.setAttributes === 'height') {
+                        element.height = change.dimensions.height;
+                    }
                 }
             }
             if (typeof change.resizing === 'boolean') {
@@ -9523,29 +9544,26 @@ function BatchProvider({ children, }) {
         for (const payload of queueItems) {
             next = typeof payload === 'function' ? payload(next) : payload;
         }
+        const changes = getElementsDiffChanges({
+            items: next,
+            lookup: nodeLookup,
+        });
         if (hasDefaultNodes) {
             setNodes(next);
         }
-        else {
-            // When a controlled flow is used we need to collect the changes
-            const changes = getElementsDiffChanges({
-                items: next,
-                lookup: nodeLookup,
+        // We only want to fire onNodesChange if there are changes to the nodes
+        if (changes.length > 0) {
+            onNodesChange?.(changes);
+        }
+        else if (fitViewQueued) {
+            // If there are no changes to the nodes, we still need to call setNodes
+            // to trigger a re-render and fitView.
+            window.requestAnimationFrame(() => {
+                const { fitViewQueued, nodes, setNodes } = store.getState();
+                if (fitViewQueued) {
+                    setNodes(nodes);
+                }
             });
-            // We only want to fire onNodesChange if there are changes to the nodes
-            if (changes.length > 0) {
-                onNodesChange?.(changes);
-            }
-            else if (fitViewQueued) {
-                // If there are no changes to the nodes, we still need to call setNodes
-                // to trigger a re-render and fitView.
-                window.requestAnimationFrame(() => {
-                    const { fitViewQueued, nodes, setNodes } = store.getState();
-                    if (fitViewQueued) {
-                        setNodes(nodes);
-                    }
-                });
-            }
         }
     }, []);
     const nodeQueue = useQueue(nodeQueueHandler);
@@ -9765,7 +9783,7 @@ function useReactFlow() {
             fitView: async (options) => {
                 // We either create a new Promise or reuse the existing one
                 // Even if fitView is called multiple times in a row, we only end up with a single Promise
-                const fitViewResolver = store.getState().fitViewResolver ?? Promise.withResolvers();
+                const fitViewResolver = store.getState().fitViewResolver ?? withResolvers();
                 // We schedule a fitView by setting fitViewQueued and triggering a setNodes
                 store.setState({ fitViewQueued: true, fitViewOptions: options, fitViewResolver });
                 batchContext.nodeQueue.push((nodes) => [...nodes]);
@@ -10904,7 +10922,7 @@ const MarkerDefinitions = ({ defaultColor, rfId }) => {
     if (!markers.length) {
         return null;
     }
-    return (jsxRuntimeExports.jsx("svg", { className: "react-flow__marker", children: jsxRuntimeExports.jsx("defs", { children: markers.map((marker) => (jsxRuntimeExports.jsx(Marker, { id: marker.id, type: marker.type, color: marker.color, width: marker.width, height: marker.height, markerUnits: marker.markerUnits, strokeWidth: marker.strokeWidth, orient: marker.orient }, marker.id))) }) }));
+    return (jsxRuntimeExports.jsx("svg", { className: "react-flow__marker", "aria-hidden": "true", children: jsxRuntimeExports.jsx("defs", { children: markers.map((marker) => (jsxRuntimeExports.jsx(Marker, { id: marker.id, type: marker.type, color: marker.color, width: marker.width, height: marker.height, markerUnits: marker.markerUnits, strokeWidth: marker.strokeWidth, orient: marker.orient }, marker.id))) }) }));
 };
 MarkerDefinitions.displayName = 'MarkerDefinitions';
 var MarkerDefinitions$1 = memo(MarkerDefinitions);
@@ -11640,7 +11658,7 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
 GraphViewComponent.displayName = 'GraphView';
 const GraphView = memo(GraphViewComponent);
 
-const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, } = {}) => {
+const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, } = {}) => {
     const nodeLookup = new Map();
     const parentLookup = new Map();
     const connectionLookup = new Map();
@@ -11650,7 +11668,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     const storeNodeOrigin = nodeOrigin ?? [0, 0];
     const storeNodeExtent = nodeExtent ?? infiniteExtent;
     updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
-    adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
+    const nodesInitialized = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
         nodeOrigin: storeNodeOrigin,
         nodeExtent: storeNodeExtent,
         elevateNodesOnSelect: false,
@@ -11660,7 +11678,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         const bounds = getInternalNodesBounds(nodeLookup, {
             filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
         });
-        const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
+        const { x, y, zoom } = getViewportForBounds(bounds, width, height, minZoom, maxZoom, fitViewOptions?.padding ?? 0.1);
         transform = [x, y, zoom];
     }
     return {
@@ -11669,6 +11687,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         height: 0,
         transform,
         nodes: storeNodes,
+        nodesInitialized,
         nodeLookup,
         parentLookup,
         edges: storeEdges,
@@ -11679,8 +11698,8 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         hasDefaultNodes: defaultNodes !== undefined,
         hasDefaultEdges: defaultEdges !== undefined,
         panZoom: null,
-        minZoom: 0.5,
-        maxZoom: 2,
+        minZoom,
+        maxZoom,
         translateExtent: infiniteExtent,
         nodeExtent: storeNodeExtent,
         nodesSelectionActive: false,
@@ -11705,7 +11724,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         selectNodesOnDrag: true,
         multiSelectionActive: false,
         fitViewQueued: fitView ?? false,
-        fitViewOptions: undefined,
+        fitViewOptions,
         fitViewResolver: null,
         connection: { ...initialConnection },
         connectionClickStartHandle: null,
@@ -11723,7 +11742,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     };
 };
 
-const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
+const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
     async function resolveFitView() {
         const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
         if (!panZoom) {
@@ -11745,7 +11764,20 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
         set({ fitViewResolver: null });
     }
     return {
-        ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
+        ...getInitialState({
+            nodes,
+            edges,
+            width,
+            height,
+            fitView,
+            fitViewOptions,
+            minZoom,
+            maxZoom,
+            nodeOrigin,
+            nodeExtent,
+            defaultNodes,
+            defaultEdges,
+        }),
         setNodes: (nodes) => {
             const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
             /*
@@ -11764,10 +11796,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             });
             if (fitViewQueued && nodesInitialized) {
                 resolveFitView();
-                set({ nodes, fitViewQueued: false, fitViewOptions: undefined });
+                set({ nodes, nodesInitialized, fitViewQueued: false, fitViewOptions: undefined });
             }
             else {
-                set({ nodes });
+                set({ nodes, nodesInitialized });
             }
         },
         setEdges: (edges) => {
@@ -11936,7 +11968,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             get().panZoom?.setClickDistance(clickDistance);
         },
         resetSelectedElements: () => {
-            const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+            const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();
+            if (!elementsSelectable) {
+                return;
+            }
             const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
             const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
             triggerNodeChanges(nodeChanges);
@@ -12008,7 +12043,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
  * your router. If you have multiple flows on the same page you will need to use a separate
  * `<ReactFlowProvider />` for each flow.
  */
-function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, nodeOrigin, nodeExtent, children, }) {
+function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, children, }) {
     const [store] = useState(() => createStore({
         nodes,
         edges,
@@ -12017,13 +12052,16 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
         width,
         height,
         fitView,
+        minZoom,
+        maxZoom,
+        fitViewOptions,
         nodeOrigin,
         nodeExtent,
     }));
     return (jsxRuntimeExports.jsx(Provider$1, { value: store, children: jsxRuntimeExports.jsx(BatchProvider, { children: children }) }));
 }
 
-function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }) {
+function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) {
     const isWrapped = useContext(StoreContext);
     if (isWrapped) {
         /*
@@ -12032,7 +12070,7 @@ function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, he
          */
         return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
     }
-    return (jsxRuntimeExports.jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: children }));
+    return (jsxRuntimeExports.jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, initialFitViewOptions: fitViewOptions, initialMinZoom: minZoom, initialMaxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: children }));
 }
 
 const wrapperStyle = {
@@ -12050,7 +12088,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
         e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
         onScroll?.(e);
     }, [onScroll]);
-    return (jsxRuntimeExports.jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, children: jsxRuntimeExports.jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsxRuntimeExports.jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsxRuntimeExports.jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsxRuntimeExports.jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsxRuntimeExports.jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsxRuntimeExports.jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
+    return (jsxRuntimeExports.jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, children: jsxRuntimeExports.jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsxRuntimeExports.jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsxRuntimeExports.jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsxRuntimeExports.jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsxRuntimeExports.jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsxRuntimeExports.jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
 }
 /**
  * The `<ReactFlow />` component is the heart of your React Flow application.
@@ -12614,7 +12652,7 @@ MiniMapComponent.displayName = 'MiniMap';
  */
 memo(MiniMapComponent);
 
-function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style = {}, children, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
+function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style = {}, children, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, resizeDirection, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
     const contextNodeId = useNodeId();
     const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
     const store = useStoreApi();
@@ -12680,11 +12718,12 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                         changes.push(positionChange);
                     }
                     if (change.width !== undefined && change.height !== undefined) {
+                        const setAttributes = !resizeDirection ? true : resizeDirection === 'horizontal' ? 'width' : 'height';
                         const dimensionChange = {
                             id,
                             type: 'dimensions',
                             resizing: true,
-                            setAttributes: true,
+                            setAttributes,
                             dimensions: {
                                 width: change.width,
                                 height: change.height,
@@ -12724,6 +12763,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                 maxHeight,
             },
             keepAspectRatio,
+            resizeDirection,
             onResizeStart,
             onResize,
             onResizeEnd,
@@ -13912,7 +13952,7 @@ const SelectionMenuHeadWrap = styled.div `
 const SelectionWrap = styled(VerticalScroll) `
   max-height: 240px;
 `;
-const DataStreamSelect = ({ onClickNewStream }) => {
+const DataStreamSelect = ({ onClickNewDataStream }) => {
     const theme = Theme.useTheme();
     const { dataStreams, selectedStreamName, setSelectedStreamName } = useDataStreamStore();
     const containerRef = useRef(null);
@@ -13927,7 +13967,7 @@ const DataStreamSelect = ({ onClickNewStream }) => {
                 React.createElement(Text, null, selectedStreamName),
                 React.createElement(ExtendArrow, { extend: popupOpen })),
             React.createElement(Divider, { orientation: 'vertical', length: '32px', thickness: 2, margin: '0' }),
-            React.createElement(AddButton$1, { onClick: onClickNewStream, label: BUTTON_TEXTS.NEW })),
+            React.createElement(AddButton$1, { onClick: onClickNewDataStream, label: BUTTON_TEXTS.NEW })),
         popupOpen && (React.createElement(AbsoluteContainer$1, { ref: containerRef },
             React.createElement(SelectionMenuHeadWrap, null,
                 React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value) })),
@@ -13948,10 +13988,10 @@ const Container$b = styled.div `
 const PushToEnd = styled.div `
   margin-left: auto;
 `;
-const DataFlowActionsMenu = ({ addEntity, onClickNewStream }) => {
+const DataFlowActionsMenu = ({ addEntity, onClickNewDataStream }) => {
     const { setCurrentModal } = useModalStore();
     return (React.createElement(Container$b, null,
-        onClickNewStream && React.createElement(DataStreamSelect, { onClickNewStream: onClickNewStream }),
+        onClickNewDataStream && React.createElement(DataStreamSelect, { onClickNewDataStream: onClickNewDataStream }),
         React.createElement(Search, null),
         React.createElement(Filters$1, null),
         addEntity && (React.createElement(PushToEnd, null,
@@ -13970,8 +14010,8 @@ const DataStreamSelectionForm = forwardRef(({ isModal, onClickSummary }, ref) =>
     return (React.createElement(ModalBody, { "$isNotModal": !isModal, "$minHeight": '70vh' },
         React.createElement(FlexColumn, { "$gap": 24 },
             onClickSummary && React.createElement(NoteBackToSummary, { onClick: onClickSummary }),
-            React.createElement(SectionTitle, { title: DISPLAY_TITLES.STREAM_NAME, description: DISPLAY_TITLES.STREAM_DESCRIPTION }),
-            React.createElement(AutocompleteInput, { placeholder: DISPLAY_TITLES.STREAM_NAME_PLACEHOLDER, autoFocus: true, options: dataStreamOptions, defaultText: nameInput, onTextChange: setNameInput }))));
+            React.createElement(SectionTitle, { title: DISPLAY_TITLES.NAME_YOUR_STREAM, description: DISPLAY_TITLES.STREAM_DESCRIPTION }),
+            React.createElement(AutocompleteInput, { placeholder: DISPLAY_TITLES.NAME_YOUR_STREAM_PLACEHOLDER, autoFocus: true, options: dataStreamOptions, defaultText: nameInput, onTextChange: setNameInput }))));
 });
 
 const buildMonitorsList = (exportedSignals) => Object.keys(exportedSignals)
@@ -14285,19 +14325,22 @@ const ListsWrapper = styled.div `
   gap: 12px;
 `;
 const DestinationsList = ({ items, onSelectOption, onSelectConfigured }) => {
+    const { configuredDestinationsUpdateOnly } = useSetupStore();
     return items.map((category) => {
         const isAlreadyExisting = category.name === DESTINATION_CATEGORIES['EXISTS']['TITLE'];
         return (React.createElement(ListsWrapper, { key: `category-${category.name}` },
             React.createElement(SectionTitle, { size: 'small', icon: category.icon, title: capitalizeFirstLetter(category.name), description: category.description }),
             category.items.map((item) => {
+                // Following replaceAll() is to create a "legal" data-id (no spaces) for Cypress testing
+                const key = `select-${category.name.replaceAll(' ', '')}-destination-${item.type}`;
+                const isChecked = item.selected || configuredDestinationsUpdateOnly.some((dest) => dest.id === item.id);
+                const monitors = Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported);
+                const onClick = isAlreadyExisting ? () => onSelectConfigured(item.id) : () => onSelectOption(item);
                 const { icon, iconSrc } = getDestinationIcon(item.type);
-                return (React.createElement(DataTab, { key: `select-${category.name}-destination-${item.type}`, "data-id": `select-${category.name}-destination-${item.type}`, title: item.displayName, hoverText: 'SELECT', onClick: () => (isAlreadyExisting ? onSelectConfigured(item.id) : onSelectOption(item)), iconProps: { icon, iconSrc }, checkboxProps: {
+                return (React.createElement(DataTab, { key: key, "data-id": key, title: item.displayName, hoverText: BUTTON_TEXTS.SELECT, onClick: onClick, iconProps: { icon, iconSrc }, visualProps: { monitors, monitorsWithLabels: true }, checkboxProps: {
                         withCheckbox: isAlreadyExisting,
-                        isChecked: item.selected,
+                        isChecked,
                         onCheckboxChange: () => onSelectConfigured(item.id),
-                    }, visualProps: {
-                        monitors: Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported),
-                        monitorsWithLabels: true,
                     } }));
             })));
     });
@@ -14344,7 +14387,7 @@ const DEFAULT_CATEGORY = DROPDOWN_OPTIONS[0];
 const DEFAULT_MONITORS = [SignalType.Logs, SignalType.Metrics, SignalType.Traces];
 const createConfiguredItems = (destinations, selectedStreamName, configuredDestinationIds) => destinations.map((dest) => {
     const { type, displayName } = dest.destinationType;
-    const isInSelectedStream = dest.streamNames?.includes(selectedStreamName);
+    const isInSelectedStream = dest.dataStreamNames?.includes(selectedStreamName);
     const isConfigured = configuredDestinationIds.has(dest.id);
     return {
         id: dest.id,
@@ -14362,8 +14405,8 @@ const createConfiguredItems = (destinations, selectedStreamName, configuredDesti
 });
 const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSelectOption, onSelectConfigured }) => {
     const { destinations } = useEntityStore();
-    const { configuredDestinations } = useSetupStore();
     const { selectedStreamName } = useDataStreamStore();
+    const { configuredDestinations, configuredDestinationsUpdateOnly } = useSetupStore();
     const [search, setSearch] = useState('');
     const [selectedCategory, setSelectedCategory] = useState(DEFAULT_CATEGORY);
     const [selectedMonitors, setSelectedMonitors] = useState(DEFAULT_MONITORS);
@@ -14374,7 +14417,7 @@ const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSe
             description: EXISTS.DESCRIPTION,
             icon: CheckIcon,
             // !! do not "filterDestinationsByStream" here, because we need all destinations to select already configured
-            items: createConfiguredItems(destinations, selectedStreamName, new Set(configuredDestinations.map((d) => d.id))),
+            items: createConfiguredItems(destinations, selectedStreamName, new Set(configuredDestinations.concat(configuredDestinationsUpdateOnly).map((d) => d.id))),
         });
         clonedDestinationsCategories.unshift({
             name: DETECTED.TITLE,
@@ -14421,45 +14464,32 @@ const SideMenuWrapper = styled.div `
     display: none;
   }
 `;
-const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, updateDestination, testConnection }) => {
+const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, testConnection }) => {
     const { destinations } = useEntityStore();
     const { selectedStreamName } = useDataStreamStore();
-    const { addConfiguredDestination } = useSetupStore();
     const { currentModal, setCurrentModal } = useModalStore();
+    const { addConfiguredDestination, addConfiguredDestinationUpdateOnly } = useSetupStore();
     const isOpen = currentModal === EntityTypes.Destination;
     const [selectedItem, setSelectedItem] = useState(undefined);
     const { formData, formErrors, handleFormChange, resetFormData, validateForm, setYamlFields, dynamicFields, setDynamicFields } = useDestinationFormData({
         supportedSignals: selectedItem?.supportedSignals,
         preLoadedFields: selectedItem?.fields,
     });
-    const handleAddExisting = (alreadyConfigDest) => {
-        const parsedFields = safeJsonParse(alreadyConfigDest.fields, {});
-        const fieldsArray = Object.entries(parsedFields).map(([key, value]) => ({
-            key,
-            value: String(value),
-        }));
-        const payload = {
-            type: alreadyConfigDest.destinationType.type,
-            name: alreadyConfigDest.destinationType.displayName,
-            currentStreamName: selectedStreamName,
-            exportedSignals: alreadyConfigDest.exportedSignals,
-            fields: fieldsArray,
-        };
-        updateDestination(alreadyConfigDest.id, payload);
-    };
-    const handleAddOnboarding = () => {
-        const fields = {};
-        dynamicFields.forEach((f) => {
-            fields[f.name] = (f.componentType === FieldTypes.Dropdown ? f.value?.value || '' : f.value);
-        });
-        addConfiguredDestination({
-            id: formData.type,
-            name: formData.name,
-            streamNames: [],
-            conditions: [],
-            exportedSignals: formData.exportedSignals,
+    const getDestPayload = (alreadyConfigDest) => {
+        const fields = alreadyConfigDest ? safeJsonParse(alreadyConfigDest.fields, {}) : {};
+        if (!alreadyConfigDest) {
+            dynamicFields.forEach((f) => {
+                fields[f.name] = (f.componentType === FieldTypes.Dropdown ? f.value?.value || '' : f.value);
+            });
+        }
+        return {
+            id: alreadyConfigDest?.id || '',
+            name: alreadyConfigDest?.name || formData.name,
+            dataStreamNames: alreadyConfigDest?.dataStreamNames || [],
+            conditions: alreadyConfigDest?.conditions || [],
+            exportedSignals: alreadyConfigDest?.exportedSignals || formData.exportedSignals,
             fields: JSON.stringify(fields),
-            destinationType: {
+            destinationType: alreadyConfigDest?.destinationType || {
                 type: selectedItem.type,
                 displayName: selectedItem.displayName,
                 supportedSignals: {
@@ -14468,15 +14498,15 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
                     traces: { supported: false },
                 },
             },
-        });
+        };
     };
     const handleAdd = (alreadyConfigDest) => {
         // Handle case from already configured
         if (alreadyConfigDest)
-            return handleAddExisting(alreadyConfigDest);
+            return addConfiguredDestinationUpdateOnly(getDestPayload(alreadyConfigDest));
         // Handle new cases from onboarding
         if (isOnboarding)
-            return handleAddOnboarding();
+            return addConfiguredDestination(getDestPayload());
         // Handle new cases from overview
         else
             return createDestination(formData);
@@ -14554,17 +14584,17 @@ const Container$7 = styled.div `
   overflow-y: scroll;
 `;
 const DestinationList = ({ withDelete }) => {
-    const { configuredDestinations } = useSetupStore();
-    if (!configuredDestinations.length) {
+    const { configuredDestinations, configuredDestinationsUpdateOnly } = useSetupStore();
+    if (!configuredDestinations.length && !configuredDestinationsUpdateOnly.length) {
         return (React.createElement(CenterThis, null,
             React.createElement(NoDataFound, { title: 'No destinations', subTitle: 'Please add a destination' })));
     }
-    return (React.createElement(Container$7, null, configuredDestinations.map((dest, idx) => (React.createElement(ListItem, { key: `configured-destination-${dest.destinationType.type}-${idx}`, "data-id": `configured-destination-${dest.destinationType.type}`, item: dest, isLastItem: configuredDestinations.length === 1, withDelete: withDelete })))));
+    return (React.createElement(Container$7, null, configuredDestinations.concat(configuredDestinationsUpdateOnly).map((dest, idx) => (React.createElement(ListItem, { key: `configured-destination-${dest.destinationType.type}-${idx}`, "data-id": `configured-destination-${dest.destinationType.type}`, item: dest, isLastItem: configuredDestinations.length + configuredDestinationsUpdateOnly.length === 1, withDelete: withDelete })))));
 };
 const ListItem = ({ item, isLastItem, withDelete }) => {
-    const { removeConfiguredDestination } = useSetupStore();
     const [deleteWarning, setDeleteWarning] = useState(false);
     const { icon, iconSrc } = getDestinationIcon(item.destinationType.type);
+    const { removeConfiguredDestination, removeConfiguredDestinationUpdateOnly } = useSetupStore();
     const mappedFields = useMemo(() => Object.entries(safeJsonParse(item.fields, {})).map(([k, v]) => ({ title: k, value: v })) || [], [item.fields]);
     return (React.createElement(React.Fragment, null,
         React.createElement(DataTab, { title: item.destinationType.displayName || item.name, subTitle: item.destinationType.type, iconProps: { icon, iconSrc }, visualProps: {
@@ -14577,7 +14607,14 @@ const ListItem = ({ item, isLastItem, withDelete }) => {
                 ? () => (React.createElement(IconButton, { onClick: () => setDeleteWarning(true) },
                     React.createElement(TrashIcon, null)))
                 : undefined }),
-        withDelete && (React.createElement(DeleteWarning, { isOpen: deleteWarning, name: item.destinationType.displayName || item.name, type: EntityTypes.Destination, isLastItem: isLastItem, onApprove: () => removeConfiguredDestination(item), onDeny: () => setDeleteWarning(false) }))));
+        withDelete && (React.createElement(DeleteWarning, { isOpen: deleteWarning, name: item.destinationType.displayName || item.name, type: EntityTypes.Destination, isLastItem: isLastItem, onApprove: () => {
+                if (item.id) {
+                    removeConfiguredDestinationUpdateOnly(item);
+                }
+                else {
+                    removeConfiguredDestination(item);
+                }
+            }, onDeny: () => setDeleteWarning(false) }))));
 };
 
 const LargeAndWideAddButton = styled(Button) `
@@ -14590,17 +14627,17 @@ const LargeAndWideAddButton = styled(Button) `
   border-radius: 16px;
   border-style: dashed !important;
 `;
-const DestinationSelectionForm = ({ isSourcesListEmpty, goToSources, categories, potentialDestinations, updateDestination, testConnection, onClickSummary }) => {
+const DestinationSelectionForm = ({ isSourcesListEmpty, goToSources, categories, potentialDestinations, testConnection, onClickSummary }) => {
     const theme = Theme.useTheme();
     const { setCurrentModal } = useModalStore();
-    const { configuredDestinations } = useSetupStore();
+    const { configuredDestinations, configuredDestinationsUpdateOnly } = useSetupStore();
     const onOpen = () => setCurrentModal(EntityTypes.Destination);
     return (React.createElement(React.Fragment, null,
         React.createElement(ModalBody, { "$isNotModal": true },
             React.createElement(FlexColumn, { "$gap": 12 },
                 React.createElement(FlexColumn, { "$gap": 24 },
                     onClickSummary && React.createElement(NoteBackToSummary, { onClick: onClickSummary }),
-                    React.createElement(SectionTitle, { title: DISPLAY_TITLES.ADD_DESTINATIONS, badgeLabel: configuredDestinations.length, description: DISPLAY_TITLES.ADD_DESTINATION_DESCRIPTION }),
+                    React.createElement(SectionTitle, { title: DISPLAY_TITLES.ADD_DESTINATIONS, badgeLabel: configuredDestinations.length + configuredDestinationsUpdateOnly.length, description: DISPLAY_TITLES.ADD_DESTINATION_DESCRIPTION }),
                     isSourcesListEmpty && (React.createElement(NotificationNote, { type: StatusType.Warning, message: DISPLAY_TITLES.NO_SOURCES_GO_BACK, action: {
                             label: DISPLAY_TITLES.SELECT_SOURCES,
                             onClick: goToSources,
@@ -14609,7 +14646,7 @@ const DestinationSelectionForm = ({ isSourcesListEmpty, goToSources, categories,
                         React.createElement(PlusIcon$1, null),
                         React.createElement(Text, { color: theme.colors.secondary, size: 14, decoration: 'underline', family: 'secondary' }, DISPLAY_TITLES.ADD_DESTINATION))),
                 React.createElement(DestinationList, { withDelete: true }))),
-        React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, createDestination: () => { }, updateDestination: updateDestination, testConnection: testConnection })));
+        React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, createDestination: () => { }, testConnection: testConnection })));
 };
 
 const columns$2 = [
@@ -15160,7 +15197,14 @@ const MultiSourceControl = ({ totalSourceCount, uninstrumentSources }) => {
         setSelectedSources({});
     };
     const onDelete = () => {
-        uninstrumentSources(selectedSources);
+        const payload = {};
+        Object.entries(selectedSources).forEach(([ns, sources]) => {
+            payload[ns] = sources.map((source) => ({
+                ...source,
+                selected: false,
+            }));
+        });
+        uninstrumentSources(payload);
         setIsWarnModalOpen(false);
         onDeselect();
     };
@@ -15427,16 +15471,18 @@ const Container$3 = styled.div `
   height: fit-content;
   overflow-y: scroll;
 `;
-const SetupSummary = ({ onEditSources, onEditDestinations }) => {
-    const { configuredSources, configuredDestinations } = useSetupStore();
+const SetupSummary = ({ onEditStream, onEditSources, onEditDestinations }) => {
+    const { selectedStreamName } = useDataStreamStore();
+    const { configuredSources, configuredDestinations, configuredDestinationsUpdateOnly } = useSetupStore();
     const sourceCount = useMemo(() => Object.values(configuredSources).reduce((total, sourceList) => total + sourceList.filter((s) => s.selected).length, 0), [configuredSources]);
     return (React.createElement(ModalBody, { "$isNotModal": true },
         React.createElement(FlexColumn, { "$gap": 12 },
             React.createElement(SectionTitle, { title: DISPLAY_TITLES.SUMMARY, description: DISPLAY_TITLES.STREAM_CONFIRM }),
             React.createElement(Container$3, null,
+                React.createElement(DataCard, { title: DISPLAY_TITLES.STREAM_NAME, action: () => React.createElement(EditButton, { onClick: onEditStream }), data: [{ title: '', value: selectedStreamName }] }),
                 React.createElement(DataCard, { title: DISPLAY_TITLES.SELECTED_SOURCES, titleBadge: sourceCount, action: () => React.createElement(EditButton, { onClick: onEditSources }) },
                     React.createElement(SourceList, { filteredNamespacesAndSources: configuredSources, withInstances: false })),
-                React.createElement(DataCard, { title: DISPLAY_TITLES.SELECTED_DESTINATIONS, titleBadge: configuredDestinations.length, action: () => React.createElement(EditButton, { onClick: onEditDestinations }) },
+                React.createElement(DataCard, { title: DISPLAY_TITLES.SELECTED_DESTINATIONS, titleBadge: configuredDestinations.length + configuredDestinationsUpdateOnly.length, action: () => React.createElement(EditButton, { onClick: onEditDestinations }) },
                     React.createElement(DestinationList, null))))));
 };