@odigos/ui-kit 0.0.24 → 0.0.26

package/lib/containers.js

@@ -1,21 +1,24 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-D3sp5Hx7.js';
-import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-C_0J5P9M.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-B6FywnIf.js';
 import { ActionType, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, FieldTypes, SignalType, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, V as Text, P as Segment, O as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, W as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a3 as ModalBody, A as AutocompleteInput, i as Divider, R as Status, $ as FlexRow, Y as Tooltip, s as IconWrapped, G as MonitorsIcons, a4 as TableContainer, a5 as TableTitleWrap, r as IconTitleBadge, a6 as TableWrap, y as InteractiveTable, a1 as CenterThis, J as NoDataFound, a0 as FlexColumn, Z as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a7 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, L as NotificationNote, U as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-Dylg236O.js';
-import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DiTtXTRm.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-C_LWKMnO.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, E as EditIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-KOMAv-TS.js';
-import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-C7Y1tYdc.js';
-import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-Bec4Ubm7.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-D0ykOLrk.js';
-import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, A as ArrowIcon, a as CopyIcon, f as CheckIcon, g as CrossIcon } from './index-BJxaoI0G.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-B-iLphLA.js';
-import { f as filterActions, g as getConditionsBooleans, k as getEntityLabel, j as getEntityIcon, s as sleep$1, m as getPlatformIcon, n as getPlatformLabel, d as formatBytes, h as getContainersIcons, o as getValueForRange, i as getDestinationIcon, b as filterSources, a as filterDestinations, c as compareCondition, l as getMetricForEntity, p as getWorkloadId, e as getContainersInstrumentedCount, q as isOverTime } from './index-DwBxpY4g.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-CFnxjzaW.js';
+import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-plxXIM0Q.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-BPxqZqXu.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-ByO2rgKy.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-CWufhl9G.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';
 import './index-7-KCQK-x.js';
@@ -302,7 +305,7 @@ const CustomFields$1 = ({ actionType, value, setValue, formErrors }) => {
     return Component ? React.createElement(Component, { value: value, setValue: setValue, formErrors: formErrors }) : null;
 };
 
-const Container$l = styled.div `
+const Container$n = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -313,7 +316,7 @@ const FieldTitle$1 = styled(Text) `
 `;
 const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(Container$l, null,
+    return (React.createElement(Container$n, null,
         isUpdate && (React.createElement("div", null,
             React.createElement(FieldTitle$1, null, "Status"),
             React.createElement(Segment, { options: [
@@ -668,7 +671,7 @@ const ConditionsStatuses = ({ conditions, id }) => {
 const columns$3 = [
     { key: 'icon', title: '' },
     { key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
-    { key: 'signals', title: DISPLAY_TITLES.Monitors },
+    { key: 'signals', title: DISPLAY_TITLES.MONITORS },
     { key: 'active-status', title: DISPLAY_TITLES.STATUS },
     { key: 'conditions', title: 'Conditions' },
     { key: 'type', title: DISPLAY_TITLES.TYPE, sortable: true },
@@ -736,14 +739,14 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
     const badgeTooltip = useMemo(() => (filtered.length !== actions.length ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined), [filtered, actions]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
-            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.Actions, badge: badge, badgeTooltip: badgeTooltip, loading: actionsLoading })),
+            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.ACTIONS, badge: badge, badgeTooltip: badgeTooltip, loading: actionsLoading })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns$3, rows: rows })),
         !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null)))));
 };
 
-const Container$k = styled(FlexColumn) `
+const Container$m = styled(FlexColumn) `
   // width: 100vw;
   // height: 100vh;
   gap: 64px;
@@ -777,7 +780,7 @@ const AwaitPipeline = () => {
     useEffect(() => {
         awaitPipeline();
     }, []);
-    return (React.createElement(Container$k, null,
+    return (React.createElement(Container$m, null,
         React.createElement(OdigosLogoText, { size: 100 }),
         React.createElement(TraceLoader, { width: 400 }),
         React.createElement(TextWrap, null,
@@ -787,37 +790,6 @@ const AwaitPipeline = () => {
             React.createElement(Description, null, "It can take up to a few minutes. Grab a cup of coffee, look out a window, and enjoy your free moment!"))));
 };
 
-const StyledButton = styled(Button) `
-  gap: 8px;
-  text-transform: none;
-  text-decoration: none;
-  border: ${({ theme, $withBorder }) => `1px solid ${$withBorder ? theme.colors.border : 'transparent'}`};
-  &.not-selected {
-    background-color: ${({ theme, $color }) => $color || theme.colors.dropdown_bg_2 + Theme.opacity.hex['060']};
-    &:hover {
-      background-color: ${({ theme, $hoverColor }) => $hoverColor || theme.colors.dropdown_bg_2};
-    }
-  }
-  &.selected {
-    background-color: ${({ theme }) => theme.colors.majestic_blue + Theme.opacity.hex['048']};
-  }
-`;
-const TextLimited = styled(Text) `
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14px;
-`;
-const SelectionButton = ({ label, onClick, icon: Icon, iconSrc, badgeLabel, badgeFilled, isSelected, withBorder, color, hoverColor, style }) => {
-    return (React.createElement(StyledButton, { onClick: onClick, className: isSelected ? 'selected' : 'not-selected', "$withBorder": withBorder, "$color": color, "$hoverColor": hoverColor, style: style },
-        Icon && (React.createElement("div", null,
-            React.createElement(Icon, null))),
-        iconSrc && (React.createElement("div", null,
-            React.createElement("img", { src: iconSrc, alt: '', width: 16, height: 16 }))),
-        React.createElement(TextLimited, null, label),
-        badgeLabel !== undefined && React.createElement(Badge, { label: badgeLabel, filled: badgeFilled || isSelected })));
-};
-
 const Tab = styled(FlexRow) `
   width: 260px;
   padding: 4px;
@@ -850,10 +822,10 @@ const PushToEnd$1 = styled.div `
   margin-left: auto;
   margin-right: 6px;
 `;
-const RelativeContainer$2 = styled.div `
+const RelativeContainer$3 = styled.div `
   position: relative;
 `;
-const AbsoluteContainer$2 = styled.div `
+const AbsoluteContainer$3 = styled.div `
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
@@ -863,12 +835,6 @@ const AbsoluteContainer$2 = styled.div `
   border-radius: 24px;
   width: 420px;
 `;
-const VerticalScroll$1 = styled.div `
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  overflow-y: scroll;
-`;
 const HeadWrap = styled.div `
   border-bottom: ${({ theme }) => `1px solid ${theme.colors.border}`};
   padding: 12px;
@@ -891,16 +857,16 @@ const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) =
     const withSelect = !!connections.length;
     const filtered = connections.filter(({ id }) => id.toLowerCase().includes(searchText));
     const Icon = !!selected?.type ? getPlatformIcon(selected.type) : null;
-    return (React.createElement(RelativeContainer$2, { ref: containerRef },
+    return (React.createElement(RelativeContainer$3, { ref: containerRef },
         React.createElement(Tab, { "$withSelect": withSelect, onClick: () => setIsOpen((prev) => !prev) },
             React.createElement(LogoWrap, null, !!Icon ? React.createElement(Icon, { size: 20, fill: theme.text.info }) : React.createElement(OverviewIcon, { fill: theme.text.info })),
             React.createElement(Title$2, null, selected?.name || selected?.id || 'no platform'),
             withSelect && (React.createElement(PushToEnd$1, null,
                 React.createElement(ExtendArrow, { extend: isOpen, align: 'right' })))),
-        isOpen && withSelect && (React.createElement(AbsoluteContainer$2, null,
+        isOpen && withSelect && (React.createElement(AbsoluteContainer$3, null,
             React.createElement(HeadWrap, null,
                 React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
-            React.createElement(VerticalScroll$1, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, status }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: status === StatusType.Success ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
+            React.createElement(VerticalScroll, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, status }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: status === StatusType.Success ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
                     if (status === StatusType.Success) {
                         onSelect(filtered[idx]);
                     }
@@ -975,8 +941,7 @@ const ConnectionTypeDropdown = ({ connections, title = '', value, onSelect, onDe
     return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All Types', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
-const ErrorDropdown = ({ title = 'Error Message', value, onSelect, onDeselect, disabled, ...props }) => {
-    const { sources } = useEntityStore();
+const ErrorDropdown = ({ sources, title = 'Error Message', value, onSelect, onDeselect, disabled, ...props }) => {
     const options = useMemo(() => {
         const payload = [];
         // !! note:
@@ -1001,8 +966,7 @@ const ErrorDropdown = ({ title = 'Error Message', value, onSelect, onDeselect, d
     return React.createElement(Dropdown, { disabled: disabled || !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
-const LanguageDropdown = ({ title = 'Programming Language', value, onSelect, onDeselect, ...props }) => {
-    const { sources } = useEntityStore();
+const LanguageDropdown = ({ sources, title = 'Programming Language', value, onSelect, onDeselect, ...props }) => {
     const options = useMemo(() => {
         const payload = [];
         sources.forEach(({ containers }) => {
@@ -1029,8 +993,7 @@ const MonitorDropdown = ({ title = 'Monitors', value, onSelect, onDeselect, ...p
     return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
-const NamespaceDropdown = ({ title = 'Namespace', value, onSelect, onDeselect, ...props }) => {
-    const { namespaces } = useEntityStore();
+const NamespaceDropdown = ({ namespaces, title = 'Namespace', value, onSelect, onDeselect, ...props }) => {
     const options = useMemo(() => {
         const payload = [];
         namespaces?.forEach(({ name }) => {
@@ -1043,8 +1006,7 @@ const NamespaceDropdown = ({ title = 'Namespace', value, onSelect, onDeselect, .
     return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'Select namespace', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
-const KindDropdown = ({ title = 'Kind', value, onSelect, onDeselect, ...props }) => {
-    const { sources } = useEntityStore();
+const KindDropdown = ({ sources, title = 'Kind', value, onSelect, onDeselect, ...props }) => {
     const options = useMemo(() => {
         const payload = [];
         sources.forEach(({ kind: id }) => {
@@ -1057,7 +1019,7 @@ const KindDropdown = ({ title = 'Kind', value, onSelect, onDeselect, ...props })
     return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
-const Container$j = styled.div `
+const Container$l = styled.div `
   display: flex;
   align-items: center;
   margin: 20px 0;
@@ -1077,7 +1039,7 @@ const ComputePlatformsActionsMenu = ({ connections }) => {
     useEffect(() => {
         return () => clearAll();
     }, [clearAll]);
-    return (React.createElement(Container$j, null,
+    return (React.createElement(Container$l, null,
         React.createElement(FlexRow, { "$gap": 16 },
             React.createElement(FlexRow, { "$gap": 12 },
                 React.createElement(Title$1, null, "Compute platforms"),
@@ -1089,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: {}};
@@ -5551,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);
@@ -5709,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);
@@ -6335,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();
@@ -6366,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;
         }
@@ -7959,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);
@@ -8074,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;
             }
@@ -9304,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') {
@@ -9561,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);
@@ -9803,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]);
@@ -10942,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);
@@ -11678,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();
@@ -11688,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,
@@ -11698,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 {
@@ -11707,6 +11687,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         height: 0,
         transform,
         nodes: storeNodes,
+        nodesInitialized,
         nodeLookup,
         parentLookup,
         edges: storeEdges,
@@ -11717,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,
@@ -11743,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,
@@ -11761,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) {
@@ -11783,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();
             /*
@@ -11802,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) => {
@@ -11974,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);
@@ -12046,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,
@@ -12055,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) {
         /*
@@ -12070,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 = {
@@ -12088,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.
@@ -12475,7 +12475,7 @@ ControlsComponent.displayName = 'Controls';
  * @remarks To extend or customise the controls, you can use the [`<ControlButton />`](/api-reference/components/control-button) component
  *
  */
-const Controls$1 = memo(ControlsComponent);
+const Controls = memo(ControlsComponent);
 
 function MiniMapNodeComponent({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, selected, onClick, }) {
     const { background, backgroundColor } = style || {};
@@ -12652,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();
@@ -12718,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,
@@ -12762,6 +12763,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                 maxHeight,
             },
             keepAspectRatio,
+            resizeDirection,
             onResizeStart,
             onResize,
             onResizeEnd,
@@ -12794,7 +12796,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
  */
 memo(ResizeControl);
 
-const Container$i = styled(FlexColumn) `
+const Container$k = styled(FlexColumn) `
   align-items: center !important;
   justify-content: center;
   align-self: stretch;
@@ -12831,7 +12833,7 @@ const AddNode = memo(({ id: nodeId, data }) => {
     const { isThisPending } = usePendingStore();
     const entity = nodeId.split('-')[0];
     const isPending = isThisPending({ entityType: entity });
-    return (React.createElement(Container$i, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$k, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         isPending ? (React.createElement(Fragment, null,
             React.createElement(TitleWrapper, null,
                 React.createElement(FadeLoader, null),
@@ -12848,7 +12850,7 @@ const AddNode = memo(({ id: nodeId, data }) => {
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } })));
 });
 
-const Container$h = styled.div `
+const Container$j = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
 `;
 const BaseNode = memo(({ id: nodeId, data }) => {
@@ -12881,7 +12883,7 @@ const BaseNode = memo(({ id: nodeId, data }) => {
         }
         setSelectedSources(namespaces);
     };
-    return (React.createElement(Container$h, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$j, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         React.createElement(DataTab, { title: title, subTitle: subTitle, onClick: () => { }, renderActions: renderActions, iconProps: {
                 icon: icon,
                 icons: icons,
@@ -12901,19 +12903,19 @@ const BaseNode = memo(({ id: nodeId, data }) => {
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } })));
 });
 
-const Container$g = styled.div `
+const Container$i = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
   height: ${({ $nodeHeight }) => `${$nodeHeight}px`};
   opacity: 0;
 `;
 const EdgedNode = memo(({ data }) => {
     const { nodeWidth, nodeHeight } = data;
-    return (React.createElement(Container$g, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$i, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } }),
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } })));
 });
 
-const Container$f = styled.div `
+const Container$h = styled.div `
   width: ${({ $nodeWidth }) => $nodeWidth}px;
   height: ${({ $nodeHeight }) => $nodeHeight}px;
   background: transparent;
@@ -12922,7 +12924,7 @@ const Container$f = styled.div `
 `;
 const FrameNode = memo(({ data }) => {
     const { nodeWidth, nodeHeight } = data;
-    return (React.createElement(Container$f, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$h, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } }),
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } })));
 });
@@ -12937,7 +12939,7 @@ const nodeConfig = {
 };
 
 const { framePadding: framePadding$3 } = nodeConfig;
-const Container$e = styled.div `
+const Container$g = styled.div `
   position: relative;
   z-index: 1;
   width: fit-content;
@@ -12985,7 +12987,7 @@ const ScrollNode = memo(({ data, ...rest }) => {
         current?.addEventListener('scroll', handleScroll);
         return () => current?.removeEventListener('scroll', handleScroll);
     }, [onScroll]);
-    return (React.createElement(Container$e, { ref: containerRef, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$g, { ref: containerRef, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         items.map((item) => (React.createElement(BaseNodeWrapper, { key: item.id, onClick: (e) => {
                 e.stopPropagation();
                 // @ts-ignore
@@ -12995,7 +12997,7 @@ const ScrollNode = memo(({ data, ...rest }) => {
         React.createElement(BottomOverlay, { "$hide": isBottomOfList })));
 });
 
-const Container$d = styled.div `
+const Container$f = styled.div `
   position: relative;
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
   padding: 12px 0px 16px 0px;
@@ -13013,7 +13015,7 @@ const SelectorWrapper = styled(FlexRow) `
 const ActionsWrapper = styled(FlexRow) `
   margin-left: auto;
 `;
-const AddButton$1 = styled(Button) `
+const AddButton = styled(Button) `
   width: 24px;
   height: 24px;
   padding: 0;
@@ -13064,7 +13066,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
             setSelectedSources({});
         }
     };
-    return (React.createElement(Container$d, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$f, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         entityType === EntityTypes.Source && (React.createElement(SelectorWrapper, null,
             React.createElement(Checkbox, { partiallyChecked: hasSelected && sources?.length !== totalSelectedSources, value: hasSelected && sources?.length === totalSelectedSources, onChange: onSelect, disabled: !sources?.length }))),
         React.createElement(IconTitleBadge, { icon: Icon, title: title, badge: isSourceAwaitingInstrumentation ? `${instrumentingPercent}%` : badge, badgeTooltip: badgeTooltip, loading: isFetching && !isSourceAwaitingInstrumentation }),
@@ -13075,7 +13077,7 @@ const Actions$1 = memo(({ entityType }) => {
     const theme = Theme.useTheme();
     const { onClickNode } = useClickNode();
     return (React.createElement(ActionsWrapper, null,
-        React.createElement(AddButton$1, { "data-id": `add-${entityType}`, variant: 'primary', onClick: (e) => {
+        React.createElement(AddButton, { "data-id": `add-${entityType}`, variant: 'primary', onClick: (e) => {
                 e.stopPropagation();
                 // @ts-ignore
                 onClickNode(undefined, {
@@ -13126,12 +13128,12 @@ const LabeledEdge = memo(({ id, sourceX, sourceY, targetX, targetY, sourcePositi
                 React.createElement(Tooltip, { text: 'Heads up! The data-flow metrics you see are calculated over 10-second intervals.' }, data?.label)))));
 });
 
-const Container$c = styled.div `
+const Container$e = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
 `;
 const SkeletonNode = memo(({ id: nodeId, data }) => {
     const { nodeWidth } = data;
-    return (React.createElement(Container$c, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$e, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         React.createElement(SkeletonLoader, { size: 3 })));
 });
 
@@ -13173,7 +13175,7 @@ const Flow = ({ nodes, edges, onNodesChange, onEdgesChange }) => {
     return (React.createElement(FlowWrapper, null,
         React.createElement(index, { fitView: false, zoomOnScroll: false, nodes: nodes, nodeTypes: nodeTypes, edges: edges, edgeTypes: edgeTypes, onNodeClick: onClickNode, onNodesChange: (changes) => setTimeout(() => onNodesChange(changes), 0), onEdgesChange: (changes) => setTimeout(() => onEdgesChange(changes), 0) },
             React.createElement(ControllerWrapper, null,
-                React.createElement(Controls$1, { position: 'bottom-right', orientation: 'horizontal', showInteractive: false, showZoom: true, showFitView: true, fitViewOptions: {
+                React.createElement(Controls, { position: 'bottom-right', orientation: 'horizontal', showInteractive: false, showZoom: true, showFitView: true, fitViewOptions: {
                         duration: 300,
                         padding: 0.02,
                         includeHiddenNodes: true,
@@ -13253,7 +13255,7 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
         },
         data: {
             nodeWidth: nodeWidth$4,
-            title: DISPLAY_TITLES.InstrumentationRules,
+            title: DISPLAY_TITLES.INSTRUMENTATION_RULES,
             icon: getEntityIcon(EntityTypes.InstrumentationRule),
             badge: unfilteredCount,
             isFetching: loading,
@@ -13296,8 +13298,8 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
             data: {
                 nodeWidth: nodeWidth$4,
                 type: AddNodeTypes.AddRule,
-                title: 'ADD RULE',
-                subTitle: 'To modify OpenTelemetry data',
+                title: DISPLAY_TITLES.ADD_INSTRUMENTATION_RULE,
+                subTitle: DISPLAY_TITLES.TO_MODIFY_OTEL_DATA,
             },
         });
     }
@@ -13333,7 +13335,7 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
         },
         data: {
             nodeWidth: nodeWidth$3,
-            title: DISPLAY_TITLES.Actions,
+            title: DISPLAY_TITLES.ACTIONS,
             icon: getEntityIcon(EntityTypes.Action),
             badge: unfilteredCount,
             isFetching: loading,
@@ -13390,8 +13392,8 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
             data: {
                 nodeWidth: nodeWidth$3,
                 type: AddNodeTypes.AddAction,
-                title: 'ADD Action',
-                subTitle: 'To modify OpenTelemetry data',
+                title: DISPLAY_TITLES.ADD_ACTION,
+                subTitle: DISPLAY_TITLES.TO_MODIFY_OTEL_DATA,
             },
         });
     }
@@ -13431,7 +13433,7 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
         },
         data: {
             nodeWidth: nodeWidth$2,
-            title: DISPLAY_TITLES.Sources,
+            title: DISPLAY_TITLES.SOURCES,
             icon: getEntityIcon(EntityTypes.Source),
             badge: hasFiltersApplied ? `${entities.length}/${unfilteredCount}` : unfilteredCount,
             badgeTooltip: hasFiltersApplied ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined,
@@ -13501,8 +13503,8 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
             data: {
                 nodeWidth: nodeWidth$2,
                 type: AddNodeTypes.AddSource,
-                title: 'ADD Source',
-                subTitle: 'To collect OpenTelemetry data',
+                title: DISPLAY_TITLES.ADD_SOURCE,
+                subTitle: DISPLAY_TITLES.TO_COLLECT_OTEL_DATA,
             },
         });
     }
@@ -13559,7 +13561,7 @@ const mapToNodeData = (entity) => {
         subTitle: entity.destinationType.displayName,
         icon,
         iconSrc,
-        monitors: Object.keys(entity.exportedSignals).filter((signal) => entity.exportedSignals[signal] === true),
+        monitors: mapExportedSignals(entity.exportedSignals),
         raw: entity,
     };
 };
@@ -13575,7 +13577,7 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
         },
         data: {
             nodeWidth,
-            title: DISPLAY_TITLES.Destinations,
+            title: DISPLAY_TITLES.DESTINATIONS,
             icon: getEntityIcon(EntityTypes.Destination),
             badge: unfilteredCount,
             isFetching: loading,
@@ -13618,15 +13620,15 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
             data: {
                 nodeWidth,
                 type: AddNodeTypes.AddDestination,
-                title: 'ADD Destination',
-                subTitle: 'To monitor OpenTelemetry data',
+                title: DISPLAY_TITLES.ADD_DESTINATION,
+                subTitle: DISPLAY_TITLES.TO_MONITOR_OTEL_DATA,
             },
         });
     }
     return nodes;
 };
 
-const Container$b = styled.div `
+const Container$d = styled.div `
   width: 100%;
   height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove})`};
   position: relative;
@@ -13634,6 +13636,7 @@ const Container$b = styled.div `
 const DataFlow = ({ heightToRemove, metrics }) => {
     const theme = Theme.useTheme();
     const filters = useFilterStore();
+    const { selectedStreamName } = useDataStreamStore();
     const { isAwaitingInstrumentation } = useInstrumentStore();
     const { containerRef, containerWidth, containerHeight } = useContainerSize();
     const { sources, sourcesLoading, destinations, destinationsLoading, actions, actionsLoading, instrumentationRules, instrumentationRulesLoading } = useEntityStore();
@@ -13661,25 +13664,27 @@ const DataFlow = ({ heightToRemove, metrics }) => {
         })), prevNodes));
     };
     useEffect(() => {
+        const sourcesByStream = filterSourcesByStream(sources, selectedStreamName);
         const sourceNodes = buildSourceNodes({
-            entities: filterSources(sources, filters),
+            entities: filterSources(sourcesByStream, filters),
             loading: sourcesLoading || isAwaitingInstrumentation,
-            unfilteredCount: sources.length,
+            unfilteredCount: sourcesByStream.length,
             positions,
             containerHeight,
             onScroll: ({ scrollTop }) => handleNodesScrolled(sourceNodes, EntityTypes.Source, scrollTop),
         });
         handleNodesChanged(sourceNodes, EntityTypes.Source);
-    }, [sources, sourcesLoading, isAwaitingInstrumentation, positions[EntityTypes.Source], filters, containerHeight]);
+    }, [selectedStreamName, sources, sourcesLoading, isAwaitingInstrumentation, positions[EntityTypes.Source], filters, containerHeight]);
     useEffect(() => {
+        const destinationsByStream = filterDestinationsByStream(destinations, selectedStreamName);
         const destinationNodes = buildDestinationNodes({
-            entities: filterDestinations(destinations, filters),
+            entities: filterDestinations(destinationsByStream, filters),
             loading: destinationsLoading,
-            unfilteredCount: destinations.length,
+            unfilteredCount: destinationsByStream.length,
             positions,
         });
         handleNodesChanged(destinationNodes, EntityTypes.Destination);
-    }, [destinations, destinationsLoading, positions[EntityTypes.Destination], filters]);
+    }, [selectedStreamName, destinations, destinationsLoading, positions[EntityTypes.Destination], filters]);
     useEffect(() => {
         const actionNodes = buildActionNodes({
             entities: filterActions(actions, filters),
@@ -13699,15 +13704,15 @@ const DataFlow = ({ heightToRemove, metrics }) => {
         });
         handleNodesChanged(ruleNodes, EntityTypes.InstrumentationRule);
     }, [instrumentationRules, instrumentationRulesLoading, positions[EntityTypes.InstrumentationRule]]);
-    return (React.createElement(Container$b, { ref: containerRef, "$heightToRemove": heightToRemove },
+    return (React.createElement(Container$d, { ref: containerRef, "$heightToRemove": heightToRemove },
         React.createElement(Flow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange })));
 };
 
-const RelativeContainer$1 = styled.div `
+const RelativeContainer$2 = styled.div `
   position: relative;
   max-width: 200px;
 `;
-const AbsoluteContainer$1 = styled.div `
+const AbsoluteContainer$2 = styled.div `
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
@@ -13784,26 +13789,21 @@ const HorizontalScroll = styled.div `
   border-bottom: ${({ theme }) => `1px solid ${theme.colors.border}`};
   overflow-x: scroll;
 `;
-const VerticalScroll = styled.div `
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  overflow-y: scroll;
-`;
 const SearchResults = ({ searchText, onClose }) => {
     const theme = Theme.useTheme();
     const { onClickNode } = useClickNode();
+    const { selectedStreamName } = useDataStreamStore();
     const { sources, destinations, actions, instrumentationRules } = useEntityStore();
     const [selectedCategory, setSelectedCategory] = useState('all');
     const { categories, searchResults } = useMemo(() => buildSearchResults({
         instrumentationRules,
-        sources,
+        sources: filterSourcesByStream(sources, selectedStreamName),
         actions,
-        destinations,
+        destinations: filterDestinationsByStream(destinations, selectedStreamName),
         searchText,
         selectedCategory,
-    }), [instrumentationRules, sources, actions, destinations, searchText, selectedCategory]);
-    return (React.createElement(AbsoluteContainer$1, null,
+    }), [instrumentationRules, sources, actions, destinations, selectedStreamName, searchText, selectedCategory]);
+    return (React.createElement(AbsoluteContainer$2, null,
         React.createElement(HorizontalScroll, { style: { borderBottom: `1px solid ${!searchResults.length ? 'transparent' : theme.colors.border}` } }, categories.map(({ category, label, count }) => !!count && (React.createElement(SelectionButton, { key: `category-select-${category}`, label: label, badgeLabel: count, isSelected: selectedCategory === category, onClick: () => setSelectedCategory(category) })))),
         searchResults.map(({ category, label, entities }, catIdx) => !!entities.length && (React.createElement(Fragment, { key: `category-list-${category}` },
             React.createElement(VerticalScroll, { style: { maxHeight: selectedCategory !== 'all' ? '240px' : '140px' } },
@@ -13827,7 +13827,7 @@ const Search = () => {
     const containerRef = useRef(null);
     useOnClickOutside(containerRef, () => setFocused(false));
     useKeyDown({ key: 'Escape', active: !!input || focused }, onClose);
-    return (React.createElement(RelativeContainer$1, { ref: containerRef },
+    return (React.createElement(RelativeContainer$2, { ref: containerRef },
         React.createElement(Input, { placeholder: 'Search', icon: SearchIcon, value: input, onChange: (e) => setInput(e.target.value.toLowerCase()), onFocus: () => setFocused(true) }),
         !!input || focused ? React.createElement(SearchResults, { searchText: input, onClose: onClose }) : null));
 };
@@ -13867,19 +13867,22 @@ const getFilterCount = (params) => {
 };
 const Filters$1 = () => {
     const theme = Theme.useTheme();
-    const { namespaces, kinds, monitors, languages, errors, onlyErrors, setAll, clearAll, getEmptyState } = useFilterStore();
+    const { namespaces, sources } = useEntityStore();
+    const { selectedStreamName } = useDataStreamStore();
+    const { namespaces: namespaceFilters, kinds, monitors, languages, errors, onlyErrors, setAll, clearAll, getEmptyState } = useFilterStore();
+    const sourcesByStream = useMemo(() => filterSourcesByStream(sources, selectedStreamName), [sources, selectedStreamName]);
     // We need local state, because we want to keep the filters in the store only when the user clicks on apply
-    const [filters, setFilters] = useState({ namespaces, kinds, monitors, languages, errors, onlyErrors });
+    const [filters, setFilters] = useState({ namespaces: namespaceFilters, kinds, monitors, languages, errors, onlyErrors });
     const [filterCount, setFilterCount] = useState(getFilterCount(filters));
     const [focused, setFocused] = useState(false);
     const toggleFocused = () => setFocused((prev) => !prev);
     useEffect(() => {
         if (!focused) {
-            const payload = { namespaces, kinds, monitors, languages, errors, onlyErrors };
+            const payload = { namespaces: namespaceFilters, kinds, monitors, languages, errors, onlyErrors };
             setFilters(payload);
             setFilterCount(getFilterCount(payload));
         }
-    }, [focused, namespaces, kinds, monitors, errors, onlyErrors]);
+    }, [focused, namespaceFilters, kinds, monitors, errors, onlyErrors]);
     const onApply = () => {
         // TODO: remove trycatch after debugging
         try {
@@ -13903,17 +13906,17 @@ const Filters$1 = () => {
     const ref = useRef(null);
     useOnClickOutside(ref, onCancel);
     useKeyDown({ key: 'Escape', active: focused }, onCancel);
-    return (React.createElement(RelativeContainer$1, { ref: ref },
+    return (React.createElement(RelativeContainer$2, { ref: ref },
         React.createElement(SelectionButton, { label: 'Filters', icon: FilterIcon, badgeLabel: filterCount, badgeFilled: !!filterCount, withBorder: true, color: 'transparent', onClick: toggleFocused }),
-        React.createElement(AbsoluteContainer$1, { "$hidden": !focused },
+        React.createElement(AbsoluteContainer$2, { "$hidden": !focused },
             React.createElement(FormWrapper, null,
-                React.createElement(NamespaceDropdown, { value: filters['namespaces'], onSelect: (val) => setFilters((prev) => ({ ...prev, namespaces: [...(prev.namespaces || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, namespaces: (prev.namespaces || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
-                React.createElement(KindDropdown, { value: filters['kinds'], onSelect: (val) => setFilters((prev) => ({ ...prev, kinds: [...(prev.kinds || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, kinds: (prev.kinds || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
-                React.createElement(LanguageDropdown, { value: filters['languages'], onSelect: (val) => setFilters((prev) => ({ ...prev, languages: [...(prev.languages || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, languages: (prev.languages || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
+                React.createElement(NamespaceDropdown, { namespaces: namespaces, value: filters['namespaces'], onSelect: (val) => setFilters((prev) => ({ ...prev, namespaces: [...(prev.namespaces || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, namespaces: (prev.namespaces || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
+                React.createElement(KindDropdown, { sources: sourcesByStream, value: filters['kinds'], onSelect: (val) => setFilters((prev) => ({ ...prev, kinds: [...(prev.kinds || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, kinds: (prev.kinds || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
+                React.createElement(LanguageDropdown, { sources: sourcesByStream, value: filters['languages'], onSelect: (val) => setFilters((prev) => ({ ...prev, languages: [...(prev.languages || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, languages: (prev.languages || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
                 React.createElement(MonitorDropdown, { value: filters['monitors'], onSelect: (val) => setFilters((prev) => ({ ...prev, monitors: [...(prev.monitors || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, monitors: (prev.monitors || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
                 React.createElement(ToggleWrapper, null,
                     React.createElement(Toggle, { title: 'Show only sources with errors', initialValue: filters['onlyErrors'], onChange: (bool) => setFilters((prev) => ({ ...prev, errors: [], onlyErrors: bool })) })),
-                React.createElement(ErrorDropdown, { value: filters['errors'], onSelect: (val) => setFilters((prev) => ({ ...prev, errors: [...(prev.errors || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, errors: (prev.errors || []).filter((opt) => opt.id !== val.id) })), disabled: !filters['onlyErrors'], showSearch: true, required: true, isMulti: true })),
+                React.createElement(ErrorDropdown, { sources: sourcesByStream, value: filters['errors'], onSelect: (val) => setFilters((prev) => ({ ...prev, errors: [...(prev.errors || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, errors: (prev.errors || []).filter((opt) => opt.id !== val.id) })), disabled: !filters['onlyErrors'], showSearch: true, required: true, isMulti: true })),
             React.createElement(Actions, null,
                 React.createElement(ActionButton$1, { variant: 'primary', onClick: onApply }, "Apply"),
                 React.createElement(ActionButton$1, { variant: 'secondary', onClick: onCancel }, "Cancel"),
@@ -13921,7 +13924,60 @@ const Filters$1 = () => {
                     React.createElement(ActionButton$1, { variant: 'tertiary', onClick: onReset, "$color": theme.text.error }, "Reset"))))));
 };
 
-const Container$a = styled.div `
+const RelativeContainer$1 = styled.div `
+  position: relative;
+`;
+const Container$c = styled(FlexRow) `
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  border-radius: 32px;
+
+  & button {
+    max-height: 28px;
+  }
+`;
+const AbsoluteContainer$1 = styled.div `
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 1;
+  background-color: ${({ theme }) => theme.colors.dropdown_bg};
+  border: ${({ theme }) => `1px solid ${theme.colors.border}`};
+  border-radius: 24px;
+  width: 420px;
+`;
+const SelectionMenuHeadWrap = styled.div `
+  border-bottom: ${({ theme }) => `1px solid ${theme.colors.border}`};
+  padding: 12px;
+`;
+const SelectionWrap = styled(VerticalScroll) `
+  max-height: 240px;
+`;
+const DataStreamSelect = ({ onClickNewDataStream }) => {
+    const theme = Theme.useTheme();
+    const { dataStreams, selectedStreamName, setSelectedStreamName } = useDataStreamStore();
+    const containerRef = useRef(null);
+    const [popupOpen, setPopupOpen] = useState(false);
+    useOnClickOutside(containerRef, () => setPopupOpen(false));
+    const [searchText, setSearchText] = useState('');
+    const filteredDataStreams = useMemo(() => dataStreams.filter(({ name }) => !searchText || name.toLowerCase().includes(searchText.toLowerCase())), [dataStreams, searchText]);
+    return (React.createElement(RelativeContainer$1, null,
+        React.createElement(Container$c, { "$gap": 0 },
+            React.createElement(Button, { variant: 'tertiary', onClick: () => setPopupOpen((prev) => !prev) },
+                React.createElement(DataStreamsIcon, { fill: theme.text.info }),
+                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: 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) })),
+            React.createElement(SelectionWrap, null, filteredDataStreams.map(({ name }) => (React.createElement(SelectionButton, { key: `stream-${name}`, label: name, isSelected: selectedStreamName === name, onClick: () => {
+                    setSelectedStreamName(name);
+                    setPopupOpen(false);
+                }, color: 'transparent', style: { width: '100%', justifyContent: 'flex-start' } }))))))));
+};
+
+const Container$b = styled.div `
   display: flex;
   align-items: center;
   margin: 20px 0;
@@ -13932,28 +13988,32 @@ const Container$a = styled.div `
 const PushToEnd = styled.div `
   margin-left: auto;
 `;
-const AddButton = styled(Button) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-width: 160px;
-  padding-right: 24px;
-`;
-const DataFlowActionsMenu = ({ addEntity }) => {
-    const theme = Theme.useTheme();
+const DataFlowActionsMenu = ({ addEntity, onClickNewDataStream }) => {
     const { setCurrentModal } = useModalStore();
-    return (React.createElement(Container$a, null,
+    return (React.createElement(Container$b, null,
+        onClickNewDataStream && React.createElement(DataStreamSelect, { onClickNewDataStream: onClickNewDataStream }),
         React.createElement(Search, null),
         React.createElement(Filters$1, null),
         addEntity && (React.createElement(PushToEnd, null,
-            React.createElement(AddButton, { "data-id": `add-${addEntity}`, onClick: () => setCurrentModal(addEntity) },
-                React.createElement(PlusIcon$1, { fill: theme.colors.primary }),
-                React.createElement(Text, { size: 14, family: 'secondary', color: theme.text.primary, weight: 600 },
-                    "ADD ",
-                    addEntity))))));
+            React.createElement(AddButton$1, { "data-id": `add-${addEntity}`, onClick: () => setCurrentModal(addEntity), label: `${BUTTON_TEXTS.ADD} ${addEntity}`, variant: 'primary' })))));
 };
 
+const DataStreamSelectionForm = forwardRef(({ isModal, onClickSummary }, ref) => {
+    const { dataStreams } = useDataStreamStore();
+    const [nameInput, setNameInput] = useState('');
+    useImperativeHandle(ref, () => ({
+        getFormValues: () => ({
+            name: nameInput,
+        }),
+    }));
+    const dataStreamOptions = useMemo(() => dataStreams.map(({ name }) => ({ label: name })), [dataStreams]);
+    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.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)
     .filter((key) => exportedSignals[key])
     .join(', ');
@@ -13962,7 +14022,7 @@ const buildCard$2 = (destination, yamlFields) => {
     const arr = [
         { title: DISPLAY_TITLES.NAME, value: destinationType.displayName },
         { title: DISPLAY_TITLES.TYPE, value: destinationType.type },
-        { type: DataCardFieldTypes.Monitors, title: DISPLAY_TITLES.Monitors, value: buildMonitorsList(exportedSignals) },
+        { type: DataCardFieldTypes.Monitors, title: DISPLAY_TITLES.MONITORS, value: buildMonitorsList(exportedSignals) },
     ];
     const parsedFields = safeJsonParse(fields, {});
     const sortedParsedFields = yamlFields.map((field) => ({ key: field.name, value: parsedFields[field.name] ?? null })).filter((item) => item.value !== null) ||
@@ -14027,7 +14087,7 @@ const ActionButton = styled(Button) `
   align-items: center;
   gap: 8px;
 
-  ${({ $status, theme }) => $status === 'success'
+  ${({ $status, theme }) => $status === StatusType.Success
     ? css `
           border-color: transparent;
           background-color: ${theme.colors.success};
@@ -14041,27 +14101,26 @@ const ActionButton = styled(Button) `
           background-color: transparent;
         `}
 `;
-const TestConnection = ({ destination, disabled, status, onError, onSuccess, validateForm, testConnection, testLoading, testResult }) => {
+const TestConnection = ({ destination, disabled, validateForm, status, testConnection, onSuccess, onError }) => {
     const theme = Theme.useTheme();
-    useEffect(() => {
-        if (testResult) {
-            if (testResult.succeeded)
-                onSuccess();
-            else
-                onError();
-        }
-    }, [testResult]);
+    const [loading, setLoading] = useState(false);
     const onClick = async () => {
-        if (validateForm())
-            await testConnection(destination);
+        if (validateForm()) {
+            setLoading(true);
+            const testResult = await testConnection(destination);
+            if (testResult) {
+                testResult.succeeded ? onSuccess(testResult) : onError(testResult);
+            }
+            setLoading(false);
+        }
     };
     const Icon = !!status ? getStatusIcon(status, theme) : undefined;
     return (React.createElement(ActionButton, { "$status": status, variant: 'secondary', disabled: disabled, onClick: onClick },
-        testLoading ? React.createElement(FadeLoader, null) : Icon ? React.createElement(Icon, null) : null,
-        React.createElement(Text, { family: 'secondary', decoration: 'underline', size: 14, color: !!status ? theme.text[status] : undefined }, testLoading ? 'Checking' : status === 'success' ? 'Connection OK' : status === 'error' ? 'Connection Failed' : 'Test Connection')));
+        loading ? React.createElement(FadeLoader, null) : Icon ? React.createElement(Icon, null) : null,
+        React.createElement(Text, { family: 'secondary', decoration: 'underline', size: 14, color: !!status ? theme.text[status] : undefined }, loading ? 'Checking' : status === StatusType.Success ? 'Connection OK' : status === 'error' ? 'Connection Failed' : 'Test Connection')));
 };
 
-const Container$9 = styled(FlexColumn) `
+const Container$a = styled(FlexColumn) `
   align-items: unset;
   padding: 0 4px;
 `;
@@ -14070,11 +14129,11 @@ const NotesWrapper = styled.div `
   flex-direction: column;
   gap: 12px;
 `;
-const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validateForm, handleFormChange, dynamicFields, setDynamicFields, testConnection, testLoading, testResult, }) => {
+const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validateForm, handleFormChange, dynamicFields, setDynamicFields, testConnection }) => {
     const { supportedSignals, testConnectionSupported, displayName } = categoryItem || {};
     const [autoFilled, setAutoFilled] = useState(false);
     const [isFormDirty, setIsFormDirty] = useState(false);
-    const [connectionStatus, setConnectionStatus] = useState(undefined);
+    const [connection, setConnection] = useState(undefined);
     const autoFillCheckRef = useRef(false);
     useEffect(() => {
         if (!!dynamicFields.length && !autoFillCheckRef.current) {
@@ -14097,7 +14156,7 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
     }, [dynamicFields, isFormDirty]);
     const dirtyForm = () => {
         setIsFormDirty(true);
-        setConnectionStatus(undefined);
+        setConnection(undefined);
     };
     const supportedMonitors = useMemo(() => {
         const { logs, metrics, traces } = supportedSignals || {};
@@ -14129,19 +14188,28 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
             traces: signals.includes(SignalType.Traces),
         });
     };
-    return (React.createElement(Container$9, { "$gap": 24 },
-        React.createElement(Container$9, { "$gap": 12 },
-            React.createElement(SectionTitle, { title: isUpdate ? 'Update destination' : 'Create destination', description: `Connect ${displayName} with Odigos.`, actionButton: testConnectionSupported && (React.createElement(TestConnection, { destination: formData, disabled: !isFormDirty, validateForm: validateForm, status: connectionStatus, testConnection: testConnection, testLoading: testLoading, testResult: testResult, onError: () => {
-                        setIsFormDirty(false);
-                        setConnectionStatus(StatusType.Error);
-                    }, onSuccess: () => {
-                        setIsFormDirty(false);
-                        setConnectionStatus(StatusType.Success);
-                    } })) }),
+    const onTestConnectionError = (testResult) => {
+        setIsFormDirty(false);
+        setConnection({
+            type: StatusType.Error,
+            title: testResult?.reason || 'Connection failed',
+            message: testResult?.message || 'Please check your input and try again.',
+        });
+    };
+    const onTestConnectionSuccess = (testResult) => {
+        setIsFormDirty(false);
+        setConnection({
+            type: StatusType.Success,
+            title: testResult?.reason || 'Connection succeeded',
+            message: testResult?.message || '',
+        });
+    };
+    return (React.createElement(Container$a, { "$gap": 24 },
+        React.createElement(Container$a, { "$gap": 12 },
+            React.createElement(SectionTitle, { title: isUpdate ? 'Update destination' : 'Create destination', description: `Connect ${displayName} with Odigos.`, actionButton: testConnectionSupported && (React.createElement(TestConnection, { destination: formData, disabled: !isFormDirty, validateForm: validateForm, status: connection?.type, testConnection: testConnection, onError: onTestConnectionError, onSuccess: onTestConnectionSuccess })) }),
             React.createElement(NotesWrapper, null,
-                testConnectionSupported && connectionStatus === StatusType.Error && React.createElement(NotificationNote, { type: StatusType.Error, message: 'Connection failed. Please check your input and try again.' }),
-                testConnectionSupported && connectionStatus === StatusType.Success && React.createElement(NotificationNote, { type: StatusType.Success, message: 'Connection succeeded.' }),
-                autoFilled && !connectionStatus && !isUpdate && React.createElement(NotificationNote, { type: StatusType.Default, message: `Odigos autocompleted ${displayName} destination details.` })),
+                testConnectionSupported && connection && React.createElement(NotificationNote, { type: connection.type, title: connection.title, message: connection.message }),
+                autoFilled && !connection && !isUpdate && React.createElement(NotificationNote, { type: StatusType.Default, message: `Odigos autocompleted ${displayName} destination details.` })),
             React.createElement(Divider, null)),
         React.createElement(MonitorsCheckboxes, { title: isUpdate ? '' : 'This connection will monitor:', required: true, allowedSignals: supportedMonitors, selectedSignals: selectedMonitors, setSelectedSignals: handleSelectedSignals, errorMessage: formErrors['exportedSignals'] }),
         !isUpdate && (React.createElement(Input, { title: 'Destination name', placeholder: 'Enter destination name', value: formData['name'], onChange: (e) => {
@@ -14173,9 +14241,11 @@ const DataContainer$2 = styled.div `
   flex-direction: column;
   gap: 12px;
 `;
-const DestinationDrawer = ({ categories, updateDestination, deleteDestination, testConnection, testLoading, testResult }) => {
+const DestinationDrawer = ({ categories, updateDestination, deleteDestination, testConnection }) => {
     const { destinations } = useEntityStore();
+    const { selectedStreamName } = useDataStreamStore();
     const { drawerType, drawerEntityId } = useDrawerStore();
+    const destinationsByStream = useMemo(() => filterDestinationsByStream(destinations, selectedStreamName), [destinations, selectedStreamName]);
     const drawerRef = useRef(null);
     const isOpen = drawerType !== EntityTypes.Destination;
     const [isEditing, setIsEditing] = useState(false);
@@ -14189,7 +14259,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
     const thisItem = useMemo(() => {
         if (isOpen)
             return null;
-        const found = destinations?.find((x) => x.id === drawerEntityId);
+        const found = destinationsByStream?.find((x) => x.id === drawerEntityId);
         if (!!found) {
             loadFormWithDrawerItem(found);
             const fields = [];
@@ -14207,7 +14277,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
             setYamlFields(fields);
         }
         return found;
-    }, [isOpen, drawerEntityId, destinations]);
+    }, [isOpen, drawerEntityId, destinationsByStream]);
     if (!thisItem)
         return null;
     const thisOptionType = categories.flatMap((category) => category.items).find((option) => option.type === thisItem.destinationType.type);
@@ -14237,32 +14307,34 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
             setIsFormDirty(false);
         }
     };
-    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.name || thisItem.destinationType.displayName, icons: icon ? [icon] : undefined, iconSrcs: iconSrc ? [iconSrc] : undefined, isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel, isLastItem: destinations.length === 1 }, isEditing ? (React.createElement(FormContainer$2, null,
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.name || thisItem.destinationType.displayName, icons: icon ? [icon] : undefined, iconSrcs: iconSrc ? [iconSrc] : undefined, isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel, isLastItem: destinationsByStream.length === 1 }, isEditing ? (React.createElement(FormContainer$2, null,
         React.createElement(DestinationForm, { isUpdate: true, categoryItem: thisOptionType, formData: formData, formErrors: formErrors, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
             }, dynamicFields: dynamicFields, setDynamicFields: (...params) => {
                 setIsFormDirty(true);
                 setDynamicFields(...params);
-            }, validateForm: validateForm, testConnection: testConnection, testLoading: testLoading, testResult: testResult }))) : (React.createElement(DataContainer$2, null,
+            }, validateForm: validateForm, testConnection: testConnection }))) : (React.createElement(DataContainer$2, null,
         React.createElement(ConditionDetails, { conditions: thisItem.conditions || [] }),
         React.createElement(DataCard, { title: DISPLAY_TITLES.DESTINATION_DETAILS, data: !!thisItem ? buildCard$2(thisItem, yamlFields) : [] })))));
 };
 
-const ListsWrapper$1 = styled.div `
+const ListsWrapper = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
-const DestinationsList = ({ items, setSelectedItem }) => {
+const DestinationsList = ({ items, onSelectOption, onSelectConfigured }) => {
     return items.map((category) => {
-        return (React.createElement(ListsWrapper$1, { key: `category-${category.name}` },
-            React.createElement(SectionTitle, { size: 'small', title: capitalizeFirstLetter(category.name), description: category.description }),
-            category.items.map((item, idx) => {
+        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) => {
                 const { icon, iconSrc } = getDestinationIcon(item.type);
-                return (React.createElement(DataTab, { key: `select-destination-${item.type}-${idx}`, "data-id": `select-destination-${item.type}`, title: item.displayName, hoverText: 'Select', onClick: () => setSelectedItem(item), iconProps: {
-                        icon,
-                        iconSrc,
+                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: {
+                        withCheckbox: isAlreadyExisting,
+                        isChecked: item.selected,
+                        onCheckboxChange: () => onSelectConfigured(item.id),
                     }, visualProps: {
                         monitors: Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported),
                         monitorsWithLabels: true,
@@ -14271,29 +14343,7 @@ const DestinationsList = ({ items, setSelectedItem }) => {
     });
 };
 
-const ListsWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-const PotentialDestinationsList = ({ items, setSelectedItem }) => {
-    if (!items.length)
-        return null;
-    return (React.createElement(ListsWrapper, null,
-        React.createElement(SectionTitle, { size: 'small', icon: OdigosLogo, title: 'Detected by Odigos', description: 'Odigos detects destinations for which automatic connection is available. All data will be filled out automatically.' }),
-        items.map((item, idx) => {
-            const { icon, iconSrc } = getDestinationIcon(item.type);
-            return (React.createElement(DataTab, { key: `select-potential-destination-${item.type}-${idx}`, "data-id": `select-potential-destination-${item.type}`, title: item.displayName, hoverText: 'Select', onClick: () => setSelectedItem(item), iconProps: {
-                    icon,
-                    iconSrc,
-                }, visualProps: {
-                    monitors: Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported),
-                    monitorsWithLabels: true,
-                } }));
-        })));
-};
-
-const Container$8 = styled.div `
+const Container$9 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -14304,7 +14354,7 @@ const Filters = styled.div `
   gap: 12px;
 `;
 const WidthConstraint = styled.div `
-  width: 160px;
+  width: 170px;
   margin-right: 8px;
 `;
 const ListsContainer = styled.div `
@@ -14319,22 +14369,60 @@ const ListsContainer = styled.div `
     max-height: calc(100vh - 400px);
   }
 `;
-const NoDataFoundWrapper$1 = styled(Container$8) `
+const NoDataFoundWrapper = styled(Container$9) `
   margin-top: 80px;
 `;
+const { MANAGED, SELF_HOSTED, DETECTED, EXISTS } = DESTINATION_CATEGORIES;
 const DROPDOWN_OPTIONS = [
     { value: 'All types', id: 'all' },
-    { value: 'Managed', id: 'managed' },
-    { value: 'Self-hosted', id: 'self hosted' },
+    { value: MANAGED.TITLE, id: MANAGED.TITLE },
+    { value: SELF_HOSTED.TITLE, id: SELF_HOSTED.TITLE },
+    { value: DETECTED.TITLE, id: DETECTED.TITLE },
+    { value: EXISTS.TITLE, id: EXISTS.TITLE },
 ];
 const DEFAULT_CATEGORY = DROPDOWN_OPTIONS[0];
 const DEFAULT_MONITORS = [SignalType.Logs, SignalType.Metrics, SignalType.Traces];
-const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSelect }) => {
+const createConfiguredItems = (destinations, selectedStreamName, configuredDestinationIds) => destinations.map((dest) => {
+    const { type, displayName } = dest.destinationType;
+    const isInSelectedStream = dest.dataStreamNames?.includes(selectedStreamName);
+    const isConfigured = configuredDestinationIds.has(dest.id);
+    return {
+        id: dest.id,
+        type,
+        displayName,
+        selected: isInSelectedStream || isConfigured,
+        fields: [],
+        testConnectionSupported: false,
+        supportedSignals: {
+            [SignalType.Logs]: { supported: dest.exportedSignals.logs },
+            [SignalType.Metrics]: { supported: dest.exportedSignals.metrics },
+            [SignalType.Traces]: { supported: dest.exportedSignals.traces },
+        },
+    };
+});
+const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSelectOption, onSelectConfigured }) => {
+    const { destinations } = useEntityStore();
+    const { selectedStreamName } = useDataStreamStore();
+    const { configuredDestinations, configuredDestinationsUpdateOnly } = useSetupStore();
     const [search, setSearch] = useState('');
     const [selectedCategory, setSelectedCategory] = useState(DEFAULT_CATEGORY);
     const [selectedMonitors, setSelectedMonitors] = useState(DEFAULT_MONITORS);
     const filteredDestinations = useMemo(() => {
-        return categories
+        const clonedDestinationsCategories = deepClone(categories);
+        clonedDestinationsCategories.unshift({
+            name: EXISTS.TITLE,
+            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.concat(configuredDestinationsUpdateOnly).map((d) => d.id))),
+        });
+        clonedDestinationsCategories.unshift({
+            name: DETECTED.TITLE,
+            description: DETECTED.DESCRIPTION,
+            icon: OdigosLogo,
+            items: potentialDestinations,
+        });
+        return clonedDestinationsCategories
             .map((category) => {
             const filteredItems = category.items.filter((item) => {
                 const matchesSearch = !search || item.displayName.toLowerCase().includes(search.toLowerCase());
@@ -14345,25 +14433,24 @@ const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSe
             return { ...category, items: filteredItems };
         })
             .filter(({ items }) => !!items.length); // Filter out empty categories
-    }, [categories, search, selectedCategory, selectedMonitors]);
+    }, [categories, potentialDestinations, destinations, search, selectedCategory, selectedMonitors, selectedStreamName, configuredDestinations]);
     if (hidden)
         return null;
-    return (React.createElement(Container$8, null,
+    return (React.createElement(Container$9, null,
         React.createElement(SectionTitle, { title: 'Choose destination', description: 'Add backend destination you want to connect with Odigos.' }),
         React.createElement(Filters, null,
             React.createElement(WidthConstraint, null,
                 React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: search, onChange: ({ target: { value } }) => setSearch(value) })),
             React.createElement(WidthConstraint, null,
-                React.createElement(Dropdown, { options: DROPDOWN_OPTIONS, value: selectedCategory, onSelect: (opt) => setSelectedCategory(opt), onDeselect: () => { } })),
+                React.createElement(Dropdown, { options: DROPDOWN_OPTIONS, value: selectedCategory, onSelect: setSelectedCategory, onDeselect: () => { } })),
             React.createElement(MonitorsCheckboxes, { title: '', selectedSignals: selectedMonitors, setSelectedSignals: setSelectedMonitors })),
         React.createElement(Divider, null),
-        !filteredDestinations.length && !potentialDestinations.length ? (React.createElement(NoDataFoundWrapper$1, null,
+        !filteredDestinations.length ? (React.createElement(NoDataFoundWrapper, null,
             React.createElement(NoDataFound, { title: 'No destinations found' }))) : (React.createElement(ListsContainer, null,
-            React.createElement(PotentialDestinationsList, { items: potentialDestinations, setSelectedItem: onSelect }),
-            React.createElement(DestinationsList, { items: filteredDestinations, setSelectedItem: onSelect })))));
+            React.createElement(DestinationsList, { items: filteredDestinations, onSelectOption: onSelectOption, onSelectConfigured: onSelectConfigured })))));
 };
 
-const Container$7 = styled.div `
+const Container$8 = styled.div `
   display: flex;
 `;
 const SideMenuWrapper = styled.div `
@@ -14374,15 +14461,53 @@ const SideMenuWrapper = styled.div `
     display: none;
   }
 `;
-const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, testConnection, testLoading, testResult }) => {
-    const { addConfiguredDestination } = useSetupStore();
+const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, testConnection }) => {
+    const { destinations } = useEntityStore();
+    const { selectedStreamName } = useDataStreamStore();
     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 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 || formData.type,
+            name: alreadyConfigDest?.name || formData.name,
+            dataStreamNames: alreadyConfigDest?.dataStreamNames || [],
+            conditions: alreadyConfigDest?.conditions || [],
+            exportedSignals: alreadyConfigDest?.exportedSignals || formData.exportedSignals,
+            fields: JSON.stringify(fields),
+            destinationType: alreadyConfigDest?.destinationType || {
+                type: selectedItem.type,
+                displayName: selectedItem.displayName,
+                supportedSignals: {
+                    logs: { supported: false },
+                    metrics: { supported: false },
+                    traces: { supported: false },
+                },
+            },
+        };
+    };
+    const handleAdd = (alreadyConfigDest) => {
+        // Handle case from already configured
+        if (alreadyConfigDest)
+            return addConfiguredDestinationUpdateOnly(getDestPayload(alreadyConfigDest));
+        // Handle new cases from onboarding
+        if (isOnboarding)
+            return addConfiguredDestination(getDestPayload());
+        // Handle new cases from overview
+        else
+            return createDestination(formData);
+    };
     const handleClose = () => {
         resetFormData();
         setSelectedItem(undefined);
@@ -14392,36 +14517,25 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
         resetFormData();
         setSelectedItem(undefined);
     };
-    const handleSelect = (item) => {
+    const handleSelectOption = (item) => {
         resetFormData();
         handleFormChange('type', item?.type || '');
+        handleFormChange('currentStreamName', selectedStreamName);
         setYamlFields(item?.fields || []);
         setSelectedItem(item);
     };
+    const handleSelectConfigured = (id) => {
+        // !! do not "filterDestinationsByStream" here, because we need all destinations to select already configured
+        const foundConfigured = destinations.find((dest) => dest.id === id);
+        if (foundConfigured)
+            handleAdd(foundConfigured);
+    };
     const handleSubmit = async () => {
-        const isFormOk = validateForm({ withAlert: !isOnboarding, alertTitle: Crud.Create });
-        if (!isFormOk)
-            return null;
-        if (isOnboarding) {
-            const destinationTypeDetails = dynamicFields.map((field) => ({
-                title: field.title || '',
-                value: (field.componentType === FieldTypes.Dropdown ? field.value?.value || '' : field.value),
-            }));
-            destinationTypeDetails.unshift({
-                title: 'Destination name',
-                value: formData.name,
-            });
-            const storedDestination = {
-                type: selectedItem.type,
-                displayName: selectedItem.displayName,
-                exportedSignals: formData.exportedSignals,
-                destinationTypeDetails,
-                category: '', // Could be handled in a more dynamic way if needed
-            };
-            addConfiguredDestination({ stored: storedDestination, form: formData });
-        }
-        else {
-            createDestination(formData);
+        if (selectedItem) {
+            const isFormValid = validateForm({ withAlert: !isOnboarding, alertTitle: Crud.Create });
+            if (!isFormValid)
+                return null;
+            handleAdd();
         }
         handleClose();
     };
@@ -14431,10 +14545,9 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
                 label: 'DONE',
                 variant: 'primary',
                 onClick: handleSubmit,
-                disabled: !selectedItem,
             },
         ];
-        if (!!selectedItem) {
+        if (selectedItem) {
             buttons.unshift({
                 label: 'BACK',
                 icon: ArrowIcon,
@@ -14445,105 +14558,104 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
         return buttons;
     };
     useKeyDown({ key: 'Enter', active: isOpen }, () => handleSubmit());
-    return (React.createElement(Modal, { isOpen: isOpen, onClose: handleClose, header: { title: 'Add Destination' }, actionComponent: React.createElement(NavigationButtons, { buttons: renderHeaderButtons() }) },
-        React.createElement(Container$7, null,
+    return (React.createElement(Modal, { isOpen: isOpen, onClose: handleClose, header: { title: DISPLAY_TITLES.ADD_DESTINATION }, actionComponent: React.createElement(NavigationButtons, { buttons: renderHeaderButtons() }) },
+        React.createElement(Container$8, null,
             React.createElement(SideMenuWrapper, null,
-                React.createElement(Stepper, { currentStep: !!selectedItem ? 2 : 1, data: [
-                        { stepNumber: 1, title: 'Destinations' },
-                        { stepNumber: 2, title: 'CONNECTION' },
+                React.createElement(Stepper, { currentStep: selectedItem ? 2 : 1, data: [
+                        { stepNumber: 1, title: DISPLAY_TITLES.DESTINATIONS },
+                        { stepNumber: 2, title: DISPLAY_TITLES.CONNECTION },
                     ] })),
             React.createElement(ModalBody, { style: { margin: '32px 24px 12px 24px' } },
-                React.createElement(ChooseDestinationBody, { hidden: !!selectedItem, categories: categories, potentialDestinations: potentialDestinations, onSelect: handleSelect }),
-                !!selectedItem && (React.createElement(DestinationForm, { categoryItem: selectedItem, formData: formData, formErrors: formErrors, handleFormChange: handleFormChange, dynamicFields: dynamicFields, setDynamicFields: setDynamicFields, validateForm: validateForm, testConnection: testConnection, testLoading: testLoading, testResult: testResult }))))));
+                React.createElement(ChooseDestinationBody, { hidden: selectedItem !== undefined, categories: categories, potentialDestinations: potentialDestinations, onSelectOption: handleSelectOption, onSelectConfigured: handleSelectConfigured }),
+                selectedItem && (React.createElement(DestinationForm, { categoryItem: selectedItem, formData: formData, formErrors: formErrors, handleFormChange: handleFormChange, dynamicFields: dynamicFields, setDynamicFields: setDynamicFields, validateForm: validateForm, testConnection: testConnection }))))));
 };
 
-const Container$6 = styled.div `
+const Container$7 = styled.div `
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   gap: 12px;
-  margin-top: 24px;
-  max-height: calc(100vh - 400px);
-  height: 100%;
-  overflow-x: hidden;
+  width: 100%;
+  max-height: calc(100vh - 310px);
+  height: fit-content;
   overflow-y: scroll;
 `;
-const ConfiguredList = () => {
-    const { configuredDestinations } = useSetupStore();
-    return (React.createElement(Container$6, null, configuredDestinations.map(({ stored }, idx) => (React.createElement(ListItem, { key: `selected-destination-${stored.type}-${idx}`, "data-id": `selected-destination-${stored.type}`, item: stored, isLastItem: configuredDestinations.length === 1 })))));
+const DestinationList = ({ withDelete }) => {
+    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.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 }) => {
+const ListItem = ({ item, isLastItem, withDelete }) => {
     const { removeConfiguredDestination } = useSetupStore();
     const [deleteWarning, setDeleteWarning] = useState(false);
-    const { icon, iconSrc } = getDestinationIcon(item.type);
+    const { icon, iconSrc } = getDestinationIcon(item.destinationType.type);
+    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.displayName, iconProps: {
-                icon,
-                iconSrc,
-            }, visualProps: {
-                monitors: Object.keys(item.exportedSignals).filter((signal) => item.exportedSignals[signal] === true),
+        React.createElement(DataTab, { title: item.destinationType.displayName || item.name, subTitle: item.destinationType.type, iconProps: { icon, iconSrc }, visualProps: {
+                monitors: mapExportedSignals(item.exportedSignals),
                 monitorsWithLabels: true,
             }, extendableProps: {
                 withExtend: true,
-                renderExtended: () => React.createElement(DataCardFields, { data: item.destinationTypeDetails }),
-            }, renderActions: () => (React.createElement(IconButton, { onClick: () => setDeleteWarning(true) },
-                React.createElement(TrashIcon, null))) }),
-        React.createElement(DeleteWarning, { isOpen: deleteWarning, name: item.displayName || item.type, type: EntityTypes.Destination, isLastItem: isLastItem, onApprove: () => removeConfiguredDestination(item), onDeny: () => setDeleteWarning(false) })));
+                renderExtended: () => React.createElement(DataCardFields, { data: mappedFields }),
+            }, renderActions: 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) }))));
 };
 
-const ContentWrapper = styled.div `
-  width: 640px;
-  padding-top: 64px;
-`;
-const NotificationNoteWrapper = styled.div `
-  margin-top: 24px;
-`;
-const AddDestinationButtonWrapper = styled.div `
-  width: 100%;
-  margin-top: 24px;
-`;
-const StyledAddDestinationButton = styled(Button) `
+const LargeAndWideAddButton = styled(Button) `
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
+  padding: 32px;
+  border-radius: 16px;
+  border-style: dashed !important;
 `;
-const DestinationSelectionForm = ({ categories, potentialDestinations, createDestination, isLoading, testConnection, testLoading, testResult, isSourcesListEmpty, goToSources, }) => {
+const DestinationSelectionForm = ({ isSourcesListEmpty, goToSources, categories, potentialDestinations, testConnection, onClickSummary }) => {
     const theme = Theme.useTheme();
     const { setCurrentModal } = useModalStore();
+    const { configuredDestinations, configuredDestinationsUpdateOnly } = useSetupStore();
     const onOpen = () => setCurrentModal(EntityTypes.Destination);
-    return (React.createElement(ContentWrapper, null,
-        React.createElement(SectionTitle, { title: 'Configure destinations', description: 'Select destinations where telemetry data will be sent and configure their settings.' }),
-        !isLoading && isSourcesListEmpty && (React.createElement(NotificationNoteWrapper, null,
-            React.createElement(NotificationNote, { type: StatusType.Warning, message: 'No sources selected. Please go back to select sources.', action: {
-                    label: 'Select Sources',
-                    onClick: goToSources,
-                } }))),
-        React.createElement(AddDestinationButtonWrapper, null,
-            React.createElement(StyledAddDestinationButton, { variant: 'secondary', disabled: isLoading, onClick: onOpen },
-                React.createElement(PlusIcon$1, null),
-                React.createElement(Text, { color: theme.colors.secondary, size: 14, decoration: 'underline', family: 'secondary' }, "ADD Destination")),
-            React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, createDestination: createDestination, testConnection: testConnection, testLoading: testLoading, testResult: testResult })),
-        isLoading ? (React.createElement(CenterThis, null,
-            React.createElement(FadeLoader, { scale: 2, cssOverride: { marginTop: '3rem' } }))) : (React.createElement(ConfiguredList, null))));
+    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 + 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,
+                        } })),
+                    React.createElement(LargeAndWideAddButton, { variant: 'secondary', onClick: onOpen },
+                        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: () => { }, testConnection: testConnection })));
 };
 
 const columns$2 = [
     { key: 'icon', title: '' },
     { key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
     { key: 'type', title: DISPLAY_TITLES.TYPE, sortable: true },
-    { key: 'signals', title: DISPLAY_TITLES.Monitors },
+    { key: 'signals', title: DISPLAY_TITLES.MONITORS },
     { key: 'conditions', title: 'Conditions' },
     { key: 'throughput', title: 'Throughput', sortable: true },
 ];
 const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
     const theme = Theme.useTheme();
     const filters = useFilterStore();
-    const { destinations, destinationsLoading } = useEntityStore();
+    const { selectedStreamName } = useDataStreamStore();
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
-    const filtered = useMemo(() => filterDestinations(destinations, filters), [destinations, filters]);
-    const rows = useMemo(() => filtered.map((dest) => {
+    const { destinations, destinationsLoading } = useEntityStore();
+    const destinationsByStream = useMemo(() => filterDestinationsByStream(destinations, selectedStreamName), [destinations, selectedStreamName]);
+    const filteredDestinations = useMemo(() => filterDestinations(destinationsByStream, filters), [destinationsByStream, filters]);
+    const rows = useMemo(() => filteredDestinations.map((dest) => {
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(dest.conditions || []);
         const { icon, iconSrc } = getDestinationIcon(dest.destinationType.type);
         return {
@@ -14578,19 +14690,29 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
                 },
                 {
                     columnKey: 'signals',
-                    component: () => React.createElement(MonitorsIcons, { withLabels: true, monitors: Object.keys(dest.exportedSignals).filter((signal) => dest.exportedSignals[signal] === true) }),
+                    component: () => React.createElement(MonitorsIcons, { withLabels: true, monitors: mapExportedSignals(dest.exportedSignals) }),
                 },
             ],
         };
-    }), [filtered, metrics]);
-    const badge = useMemo(() => (filtered.length !== destinations.length ? `${filtered.length}/${destinations.length}` : destinations.length), [filtered, destinations]);
-    const badgeTooltip = useMemo(() => (filtered.length !== destinations.length ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined), [filtered, destinations]);
+    }), [filteredDestinations, metrics]);
+    const { badge, badgeTooltip } = useMemo(() => {
+        if (filteredDestinations.length !== destinationsByStream.length) {
+            return {
+                badge: `${filteredDestinations.length}/${destinationsByStream.length}`,
+                badgeTooltip: DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP,
+            };
+        }
+        return {
+            badge: destinationsByStream.length,
+            badgeTooltip: undefined,
+        };
+    }, [filteredDestinations, destinationsByStream]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
-            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Destination), title: DISPLAY_TITLES.Destinations, badge: badge, badgeTooltip: badgeTooltip, loading: destinationsLoading })),
+            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Destination), title: DISPLAY_TITLES.DESTINATIONS, badge: badge, badgeTooltip: badgeTooltip, loading: destinationsLoading })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns$2, rows: rows })),
-        !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
+        !filteredDestinations.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null)))));
 };
 
@@ -14791,7 +14913,7 @@ const CustomFields = ({ ruleType, value, setValue, formErrors }) => {
     return Component ? React.createElement(Component, { value: value, setValue: setValue, formErrors: formErrors }) : null;
 };
 
-const Container$5 = styled.div `
+const Container$6 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -14802,7 +14924,7 @@ const FieldTitle = styled(Text) `
 `;
 const InstrumentationRuleForm = ({ isUpdate, rule, formData, formErrors, handleFormChange }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(Container$5, null,
+    return (React.createElement(Container$6, null,
         isUpdate && (React.createElement("div", null,
             React.createElement(FieldTitle, null, "Status"),
             React.createElement(Segment, { options: [
@@ -15024,14 +15146,14 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
     }), [instrumentationRules]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
-            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.InstrumentationRules, badge: instrumentationRules.length, loading: instrumentationRulesLoading })),
+            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.INSTRUMENTATION_RULES, badge: instrumentationRules.length, loading: instrumentationRulesLoading })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns$1, rows: rows })),
         !instrumentationRules.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null)))));
 };
 
-const Container$4 = styled.div `
+const Container$5 = styled.div `
   position: fixed;
   bottom: 0;
   left: 50%;
@@ -15048,7 +15170,7 @@ const Container$4 = styled.div `
 const MultiSourceControl = ({ totalSourceCount, uninstrumentSources }) => {
     const theme = Theme.useTheme();
     const Transition = useTransition({
-        container: Container$4,
+        container: Container$5,
         animateIn: Theme.animations.slide.in['center'],
         animateOut: Theme.animations.slide.out['center'],
     });
@@ -15065,7 +15187,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();
     };
@@ -15227,6 +15356,126 @@ const NotificationListItem = ({ id, seen, type, title, message, time, crdType, t
                     React.createElement(Text, { size: 10, color: theme.colors.orange_soft }, "new")))))));
 };
 
+const Container$4 = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  gap: 12px;
+  width: 100%;
+  max-height: ${({ $isModal }) => ($isModal ? 'calc(100vh - 510px)' : 'calc(100vh - 310px)')};
+  height: fit-content;
+  overflow-y: scroll;
+`;
+const Group = styled.div `
+  width: 100%;
+  padding-bottom: ${({ $isOpen }) => ($isOpen ? '18px' : '0')};
+  border-radius: 16px;
+  background-color: ${({ $selected, theme }) => ($selected ? theme.colors.majestic_blue + Theme.opacity.hex['024'] : theme.colors.dropdown_bg_2 + Theme.opacity.hex['040'])};
+`;
+const NamespaceItem = styled.div `
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0;
+  padding: 18px;
+  border-radius: 16px;
+  cursor: ${({ $withClick }) => ($withClick ? 'pointer' : 'unset')};
+  &:hover {
+    background-color: ${({ $withClick, $selected, theme }) => $withClick && ($selected ? theme.colors.majestic_blue + Theme.opacity.hex['040'] : theme.colors.dropdown_bg_2 + Theme.opacity.hex['080'])};
+    transition: background-color 0.3s;
+  }
+`;
+const SourceItem = styled(NamespaceItem) `
+  width: calc(100% - 50px);
+  margin-left: auto;
+  padding: 8px;
+`;
+const RelativeWrapper = styled.div `
+  position: relative;
+  padding-bottom: ${({ $addPadding }) => ($addPadding ? '16px' : '0')};
+`;
+const AbsoluteWrapper = styled.div `
+  position: absolute;
+  top: 6px;
+  left: 18px;
+`;
+const NotSourcesWrapper = styled(CenterThis) `
+  padding-bottom: ${({ $addPadding }) => ($addPadding ? '16px' : '0')};
+`;
+const SelectionCount = styled(Text) `
+  width: 18px;
+`;
+const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesAndSources, selectedNamespace, onSelectNamespace, selectedSources, onSelectSource }) => {
+    const theme = Theme.useTheme();
+    const { namespacesLoading } = useEntityStore();
+    const matrix = Object.entries(filteredNamespacesAndSources || {});
+    if (!matrix?.length) {
+        return (React.createElement(CenterThis, null, namespacesLoading ? (React.createElement(FadeLoader, null)) : (React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_SOURCES, subTitle: onSelectNamespace ? DISPLAY_TITLES.PLEASE_MAKE_SURE_UNIGNORED_NAMESPACES : DISPLAY_TITLES.PLEASE_ADD_SOURCE }))));
+    }
+    return (React.createElement(Container$4, { "$isModal": isModal }, matrix.map(([namespace, sources]) => {
+        const sourcesForNamespace = selectedSources?.[namespace] || [];
+        const onlySelectedSources = sourcesForNamespace.filter(({ selected }) => selected);
+        const isNamespaceLoaded = sourcesForNamespace.length > 0;
+        const isNamespaceSelected = selectedNamespace === namespace;
+        const isNamespaceAllSourcesSelected = onlySelectedSources.length > 0 && onlySelectedSources.length === sources.length;
+        const isNamespacePartiallySourcesSelected = onlySelectedSources.length > 0 && onlySelectedSources.length !== sources.length;
+        const hasSources = sources.length > 0;
+        if (!onSelectNamespace && !hasSources)
+            return null;
+        return (React.createElement(Group, { key: `namespace-${namespace}`, "data-id": `namespace-${namespace}`, "$selected": isNamespaceAllSourcesSelected, "$isOpen": isNamespaceSelected },
+            React.createElement(NamespaceItem, { "$selected": isNamespaceAllSourcesSelected, "$withClick": !!onSelectNamespace, onClick: () => onSelectNamespace?.(namespace) },
+                React.createElement(FlexRow, { "$gap": 12 },
+                    onSelectNamespace && React.createElement(Checkbox, { partiallyChecked: isNamespacePartiallySourcesSelected, value: isNamespaceAllSourcesSelected, onChange: (bool) => onSelectNamespace(namespace, bool) }),
+                    React.createElement(Text, null, namespace)),
+                React.createElement(FlexRow, { "$gap": 12 },
+                    React.createElement(SelectionCount, { size: 10, color: theme.text.grey }, isNamespaceLoaded ? `${onlySelectedSources.length}/${sources.length}` : null),
+                    onSelectNamespace && React.createElement(ExtendArrow, { extend: isNamespaceSelected }))),
+            (isNamespaceSelected || !onSelectNamespace) &&
+                (hasSources ? (React.createElement(RelativeWrapper, { "$addPadding": !onSelectSource },
+                    React.createElement(AbsoluteWrapper, null,
+                        React.createElement(Divider, { orientation: 'vertical', length: `${(sources.length || 0) * 36}px` })),
+                    sources.map((source) => {
+                        const isSourceSelected = onlySelectedSources.some(({ name }) => name === source.name);
+                        return React.createElement(SourceRow, { key: `source-${source.name}`, withInstances: withInstances, source: source, namespace: namespace, isSelected: isSourceSelected, onSelect: onSelectSource });
+                    }))) : (React.createElement(NotSourcesWrapper, { "$addPadding": !onSelectSource }, namespacesLoading ? React.createElement(FadeLoader, null) : React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_SOURCES_NAMESPACE, subTitle: DISPLAY_TITLES.TRY_SEARCH_OR_OTHER_NAMESPACE }))))));
+    })));
+};
+const SourceRow = ({ withInstances, source, namespace, isSelected, onSelect, }) => {
+    return (React.createElement(SourceItem, { "data-id": `source-${source.name}`, "$selected": isSelected, "$withClick": !!onSelect, onClick: () => onSelect?.(source) },
+        React.createElement(FlexRow, { "$gap": 12 },
+            onSelect && React.createElement(Checkbox, { value: isSelected, onChange: () => onSelect(source, namespace) }),
+            React.createElement(Text, null, source.name),
+            React.createElement(Text, { opacity: 0.8, size: 10 },
+                withInstances ? `${source.numberOfInstances || 0} running instance${source.numberOfInstances !== 1 ? 's' : ''} • ` : '',
+                source.kind))));
+};
+
+const Container$3 = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  max-height: calc(100vh - 200px);
+  height: fit-content;
+  overflow-y: scroll;
+`;
+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 + configuredDestinationsUpdateOnly.length, action: () => React.createElement(EditButton, { onClick: onEditDestinations }) },
+                    React.createElement(DestinationList, null))))));
+};
+
 var NavIconIds;
 (function (NavIconIds) {
     NavIconIds["Overview"] = "overview";
@@ -15390,21 +15639,21 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
 const buildCard = (source) => {
     const { name, kind, namespace } = source;
     const arr = [
-        { title: DISPLAY_TITLES.Namespace, value: namespace },
+        { title: DISPLAY_TITLES.NAMESPACE, value: namespace },
         { title: DISPLAY_TITLES.KIND, value: kind },
         { title: DISPLAY_TITLES.NAME, value: name, tooltip: 'K8s resource name' },
     ];
     return arr;
 };
 
-const Container$3 = styled.div `
+const Container$2 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
   padding: 4px;
 `;
 const SourceForm = ({ formData, handleFormChange }) => {
-    return (React.createElement(Container$3, null,
+    return (React.createElement(Container$2, null,
         React.createElement(Input, { name: 'sourceName', title: 'Source name', tooltip: 'This overrides the default service name that runs in your cluster.', placeholder: 'Use a name that overrides the source name', value: formData.otelServiceName, onChange: ({ target: { value } }) => handleFormChange('otelServiceName', value) })));
 };
 
@@ -15427,7 +15676,9 @@ const DataContainer$1 = styled.div `
 `;
 const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) => {
     const { sources } = useEntityStore();
+    const { selectedStreamName } = useDataStreamStore();
     const { drawerType, drawerEntityId } = useDrawerStore();
+    const sourcesByStream = useMemo(() => filterSourcesByStream(sources, selectedStreamName), [sources, selectedStreamName]);
     const drawerRef = useRef(null);
     const isOpen = drawerType !== EntityTypes.Source;
     const [isEditing, setIsEditing] = useState(false);
@@ -15437,11 +15688,11 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
     const thisItem = useMemo(() => {
         if (isOpen)
             return null;
-        const found = sources?.find((x) => x.namespace === drawerEntityId.namespace && x.name === drawerEntityId.name && x.kind === drawerEntityId.kind);
+        const found = sourcesByStream?.find((x) => x.namespace === drawerEntityId.namespace && x.name === drawerEntityId.name && x.kind === drawerEntityId.kind);
         if (!!found)
             loadFormWithDrawerItem(found);
         return found;
-    }, [isOpen, drawerEntityId, sources]);
+    }, [isOpen, drawerEntityId, sourcesByStream]);
     if (!thisItem)
         return null;
     const containersData = thisItem.containers?.map((container) => ({
@@ -15458,7 +15709,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
     };
     const handleDelete = async () => {
         const { namespace } = thisItem;
-        persistSources({ [namespace]: [{ ...thisItem, selected: false }] }, {});
+        persistSources({ [namespace]: [{ ...thisItem, selected: false, currentStreamName: selectedStreamName }] }, {});
         setIsFormDirty(false);
         setIsEditing(false);
         resetFormData();
@@ -15472,7 +15723,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
         setIsFormDirty(false);
         setIsEditing(false);
     };
-    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', icons: getContainersIcons(thisItem.containers), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sources.length === 1, tabs: [
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', icons: getContainersIcons(thisItem.containers), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sourcesByStream.length === 1, tabs: [
             {
                 label: Tabs.Overview,
                 onClick: () => setSelectedTab(Tabs.Overview),
@@ -15487,137 +15738,22 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
         React.createElement(SourceForm, { formData: formData, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
+                handleFormChange('currentStreamName', selectedStreamName);
             } }))) : (React.createElement(DataContainer$1, null,
         React.createElement(ConditionDetails, { conditions: thisItem.conditions || [] }),
         React.createElement(DataCard, { title: DISPLAY_TITLES.SOURCE_DETAILS, data: !!thisItem ? buildCard(thisItem) : [] }),
         React.createElement(DataCard, { title: DISPLAY_TITLES.DETECTED_CONTAINERS, titleBadge: containersData.length, description: DISPLAY_TITLES.DETECTED_CONTAINERS_DESCRIPTION, data: containersData })))) : (React.createElement(Describe$1, { source: thisItem, fetchDescribeSource: fetchDescribeSource }))));
 };
 
-const Container$2 = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  max-height: ${({ $isModal }) => ($isModal ? 'calc(100vh - 510px)' : 'calc(100vh - 310px)')};
-  height: fit-content;
-  overflow-y: scroll;
-`;
-const Group = styled.div `
-  width: 100%;
-  padding-bottom: ${({ $isOpen }) => ($isOpen ? '18px' : '0')};
-  border-radius: 16px;
-  background-color: ${({ $selected, theme }) => ($selected ? theme.colors.majestic_blue + Theme.opacity.hex['024'] : theme.colors.dropdown_bg_2 + Theme.opacity.hex['040'])};
-`;
-const NamespaceItem = styled.div `
-  display: flex;
+const ActionsRow = styled(FlexRow) `
   justify-content: space-between;
-  gap: 12px;
-  margin: 0;
-  padding: 18px;
-  border-radius: 16px;
-  cursor: pointer;
-  &:hover {
-    background-color: ${({ $selected, theme }) => ($selected ? theme.colors.majestic_blue + Theme.opacity.hex['040'] : theme.colors.dropdown_bg_2 + Theme.opacity.hex['080'])};
-    transition: background-color 0.3s;
-  }
-`;
-const SourceItem = styled(NamespaceItem) `
-  width: calc(100% - 50px);
-  margin-left: auto;
-  padding: 8px;
 `;
-const RelativeWrapper = styled.div `
-  position: relative;
-`;
-const AbsoluteWrapper = styled.div `
-  position: absolute;
-  top: 6px;
-  left: 18px;
-`;
-const SelectionCount = styled(Text) `
-  width: 18px;
-`;
-const NoDataFoundWrapper = styled.div `
-  padding: 50px 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  height: 100%;
-  max-height: calc(100vh - 360px);
-  overflow-y: auto;
-`;
-const List = ({ isModal = false, filterNamespaces, filterSources, selectedNamespace, onSelectNamespace, selectedSources, onSelectSource, selectedFutureApps, onSelectFutureApps, onSelectAll, }) => {
-    const theme = Theme.useTheme();
-    const namespaces = filterNamespaces();
-    const { namespacesLoading } = useEntityStore();
-    if (!namespaces.length) {
-        return React.createElement(NoDataFoundWrapper, null, namespacesLoading ? React.createElement(FadeLoader, { scale: 2 }) : React.createElement(NoDataFound, { title: 'No namespaces found' }));
-    }
-    return (React.createElement(Container$2, { "$isModal": isModal }, namespaces.map(([namespace, sources]) => {
-        const sourcesForNamespace = selectedSources[namespace] || [];
-        const futureAppsForNamespace = selectedFutureApps[namespace] || false;
-        const isNamespaceLoaded = !!sourcesForNamespace.length;
-        const isNamespaceSelected = selectedNamespace === namespace;
-        const onlySelectedSources = sourcesForNamespace.filter(({ selected }) => selected);
-        const filteredSources = filterSources(namespace, { cancelSearch: true });
-        const isNamespaceAllSourcesSelected = !!onlySelectedSources.length && onlySelectedSources.length === sources.length;
-        const isNamespacePartiallySourcesSelected = !!onlySelectedSources.length && onlySelectedSources.length !== sources.length;
-        const hasFilteredSources = !!filteredSources.length;
-        return (React.createElement(Group, { key: `namespace-${namespace}`, "data-id": `namespace-${namespace}`, "$selected": isNamespaceAllSourcesSelected, "$isOpen": isNamespaceSelected && hasFilteredSources },
-            React.createElement(NamespaceItem, { "$selected": isNamespaceAllSourcesSelected, onClick: () => onSelectNamespace(namespace) },
-                React.createElement(FlexRow, { "$gap": 12 },
-                    React.createElement(Checkbox, { partiallyChecked: isNamespacePartiallySourcesSelected, value: isNamespaceAllSourcesSelected, onChange: (bool) => onSelectAll(bool, namespace) }),
-                    React.createElement(Text, null, namespace)),
-                React.createElement(FlexRow, { "$gap": 12 },
-                    React.createElement(Toggle, { title: 'Include Future Sources', initialValue: futureAppsForNamespace, onChange: (bool) => onSelectFutureApps(bool, namespace) }),
-                    React.createElement(Divider, { orientation: 'vertical', length: '12px', margin: '0' }),
-                    React.createElement(SelectionCount, { size: 10, color: theme.text.grey }, isNamespaceLoaded ? `${onlySelectedSources.length}/${sources.length}` : null),
-                    React.createElement(ExtendArrow, { extend: isNamespaceSelected }))),
-            isNamespaceSelected &&
-                (hasFilteredSources ? (React.createElement(RelativeWrapper, null,
-                    React.createElement(AbsoluteWrapper, null,
-                        React.createElement(Divider, { orientation: 'vertical', length: `${filteredSources.length * 36 - 12}px` })),
-                    filteredSources.map((source) => {
-                        const isSourceSelected = !!onlySelectedSources.find(({ name }) => name === source.name);
-                        return (React.createElement(SourceItem, { key: `source-${source.name}`, "data-id": `source-${source.name}`, "$selected": isSourceSelected, onClick: () => onSelectSource(source) },
-                            React.createElement(FlexRow, { "$gap": 12 },
-                                React.createElement(Checkbox, { value: isSourceSelected, onChange: () => onSelectSource(source, namespace) }),
-                                React.createElement(Text, null, source.name),
-                                React.createElement(Text, { opacity: 0.8, size: 10 },
-                                    source.numberOfInstances,
-                                    " running instance",
-                                    source.numberOfInstances !== 1 && 's',
-                                    " \u00B7 ",
-                                    source.kind))));
-                    }))) : (React.createElement(NoDataFoundWrapper, null, namespacesLoading ? React.createElement(FadeLoader, { scale: 1.5 }) : React.createElement(NoDataFound, { title: 'No sources available in this namespace', subTitle: 'Try searching again or select another namespace.' }))))));
-    })));
-};
-
-const FlexContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-// when bringin back the "Select all" checkbox, change the following width to 300px
 const SearchWrapper = styled.div `
-  width: 444px;
+  width: 420px;
 `;
-const Controls = ({ selectedSources, searchText, setSearchText, showSelectedOnly, setShowSelectedOnly }) => {
-    const selectedAppsCount = Object.values(selectedSources).reduce((prev, curr) => prev + curr.filter((s) => s.selected).length, 0);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SectionTitle, { title: 'Select Sources for Instrumentation', badgeLabel: selectedAppsCount, description: 'Select apps to monitor in each namespace. Odigos will instrument them and send telemetry data to your destinations.' }),
-        React.createElement(FlexContainer, { style: { marginTop: 24 } },
-            React.createElement(SearchWrapper, null,
-                React.createElement(Input, { placeholder: 'Search Kubernetes Namespaces', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
-            React.createElement(Toggle, { title: 'Show selected only', initialValue: showSelectedOnly, onChange: setShowSelectedOnly })),
-        React.createElement(Divider, { margin: '16px 0' })));
-};
-
-const SourceSelectionForm = forwardRef((props, ref) => {
-    const { isModal, selectedNamespace, onSelectNamespace, namespace } = props;
-    const formState = useSourceSelectionFormData({ selectedNamespace, onSelectNamespace, namespace });
-    const { recordedInitialSources, getApiSourcesPayload, getApiFutureAppsPayload } = formState;
+const SourceSelectionForm = forwardRef(({ isModal, fetchSingleNamespace, onClickSummary }, ref) => {
+    const formState = useSourceSelectionFormData({ fetchSingleNamespace });
+    const { recordedInitialSources, selectedSources, getApiSourcesPayload, getApiFutureAppsPayload, searchText, setSearchText, showSelectedOnly, setShowSelectedOnly } = formState;
     useImperativeHandle(ref, () => ({
         getFormValues: () => ({
             initial: recordedInitialSources,
@@ -15625,19 +15761,24 @@ const SourceSelectionForm = forwardRef((props, ref) => {
             futureApps: getApiFutureAppsPayload(),
         }),
     }));
+    const selectedCount = Object.values(selectedSources).reduce((prev, curr) => prev + curr.filter((s) => s.selected).length, 0);
     return (React.createElement(ModalBody, { "$isNotModal": !isModal },
-        React.createElement(Controls, { ...props, ...formState }),
-        React.createElement(List, { ...props, ...formState })));
+        React.createElement(FlexColumn, { "$gap": 12 },
+            React.createElement(FlexColumn, { "$gap": 24 },
+                onClickSummary && React.createElement(NoteBackToSummary, { onClick: onClickSummary }),
+                React.createElement(SectionTitle, { title: DISPLAY_TITLES.SELECT_SOURCES, badgeLabel: selectedCount, description: DISPLAY_TITLES.SELECT_SOURCES_DESCRIPTION }),
+                React.createElement(ActionsRow, null,
+                    React.createElement(SearchWrapper, null,
+                        React.createElement(Input, { placeholder: DISPLAY_TITLES.SEARCH_NAMESPACES, icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
+                    React.createElement(Toggle, { title: DISPLAY_TITLES.SHOW_SELECTED_ONLY, initialValue: showSelectedOnly, onChange: setShowSelectedOnly }))),
+            React.createElement(Divider, null),
+            React.createElement(SourceList, { isModal: isModal, ...formState }))));
 });
 
-const SourceModal = ({ selectedNamespace, setSelectedNamespace, namespace, persistSources }) => {
+const SourceModal = ({ fetchSingleNamespace, persistSources }) => {
     const { currentModal, setCurrentModal } = useModalStore();
     const isOpen = currentModal === EntityTypes.Source;
-    const onSelectNamespace = (ns) => {
-        setSelectedNamespace((prev) => (prev === ns ? '' : ns));
-    };
     const handleClose = () => {
-        setSelectedNamespace('');
         setCurrentModal('');
     };
     const handleSubmit = async () => {
@@ -15656,14 +15797,14 @@ const SourceModal = ({ selectedNamespace, setSelectedNamespace, namespace, persi
                     onClick: handleSubmit,
                 },
             ] }) },
-        React.createElement(SourceSelectionForm, { ref: formRef, isModal: true, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace, namespace: namespace })));
+        React.createElement(SourceSelectionForm, { ref: formRef, isModal: true, fetchSingleNamespace: fetchSingleNamespace })));
 };
 
 const columns = [
     { key: 'checkbox-and-icon', title: '' },
     { key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
     { key: 'type', title: 'Kubernetes Type', sortable: true },
-    { key: 'namespace', title: DISPLAY_TITLES.Namespace, sortable: true },
+    { key: 'namespace', title: DISPLAY_TITLES.NAMESPACE, sortable: true },
     { key: 'containers', title: DISPLAY_TITLES.DETECTED_CONTAINERS },
     { key: 'conditions', title: 'Conditions' },
     { key: 'throughput', title: 'Throughput', sortable: true },
@@ -15672,6 +15813,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
     const theme = Theme.useTheme();
     const filters = useFilterStore();
     const { isThisPending } = usePendingStore();
+    const { selectedStreamName } = useDataStreamStore();
     const { sources, sourcesLoading } = useEntityStore();
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
     const { selectedSources, setSelectedSources } = useSelectedStore();
@@ -15684,7 +15826,8 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
             return calculateProgress(sourcesToDelete, sourcesDeleted);
         return 1;
     }, [sourcesToCreate, sourcesCreated, sourcesToDelete, sourcesDeleted]);
-    const filtered = useMemo(() => filterSources(sources, filters), [sources, filters]);
+    const sourcesByStream = useMemo(() => filterSourcesByStream(sources, selectedStreamName), [sources, selectedStreamName]);
+    const filteredSources = useMemo(() => filterSources(sourcesByStream, filters), [sourcesByStream, filters]);
     const [hasSelected, totalSelectedSources] = useMemo(() => {
         let num = 0;
         Object.values(selectedSources).forEach((selectedSources) => {
@@ -15695,7 +15838,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
     const onSelectAll = useCallback((bool) => {
         if (bool) {
             const payload = {};
-            filtered.forEach((source) => {
+            filteredSources.forEach((source) => {
                 const id = { namespace: source.namespace, name: source.name, kind: source.kind };
                 const isPending = isThisPending({ entityType: EntityTypes.Source, entityId: id });
                 if (!isPending) {
@@ -15712,7 +15855,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         else {
             setSelectedSources({});
         }
-    }, [filtered]);
+    }, [filteredSources]);
     const onSelectOne = useCallback((source) => {
         const { namespace, name, kind } = source;
         const payload = { ...selectedSources };
@@ -15727,7 +15870,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         }
         setSelectedSources(payload);
     }, [selectedSources]);
-    const rows = useMemo(() => filtered.map((source) => {
+    const rows = useMemo(() => filteredSources.map((source) => {
         const id = getWorkloadId(source);
         const idString = JSON.stringify(id);
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(source.conditions || []);
@@ -15777,13 +15920,23 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                 },
             ],
         };
-    }), [filtered, selectedSources, metrics, onSelectOne]);
-    const badge = useMemo(() => (filtered.length !== sources.length ? `${filtered.length}/${sources.length}` : sources.length), [filtered, sources]);
-    const badgeTooltip = useMemo(() => (filtered.length !== sources.length ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined), [filtered, sources]);
+    }), [filteredSources, selectedSources, metrics, onSelectOne]);
+    const { badge, badgeTooltip } = useMemo(() => {
+        if (filteredSources.length !== sourcesByStream.length) {
+            return {
+                badge: `${filteredSources.length}/${sourcesByStream.length}`,
+                badgeTooltip: DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP,
+            };
+        }
+        return {
+            badge: sourcesByStream.length,
+            badgeTooltip: undefined,
+        };
+    }, [filteredSources, sourcesByStream]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
-            React.createElement(Checkbox, { partiallyChecked: hasSelected && filtered?.length !== totalSelectedSources, value: hasSelected && filtered?.length === totalSelectedSources, onChange: onSelectAll, disabled: !filtered?.length }),
-            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Source), title: DISPLAY_TITLES.Sources, badge: badge, badgeTooltip: badgeTooltip, loading: sourcesLoading && !isAwaitingInstrumentation })),
+            React.createElement(Checkbox, { partiallyChecked: hasSelected && filteredSources?.length !== totalSelectedSources, value: hasSelected && filteredSources?.length === totalSelectedSources, onChange: onSelectAll, disabled: !filteredSources?.length }),
+            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Source), title: DISPLAY_TITLES.SOURCES, badge: badge, badgeTooltip: badgeTooltip, loading: sourcesLoading && !isAwaitingInstrumentation })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns, rows: isAwaitingInstrumentation ? [] : rows })),
         isAwaitingInstrumentation ? (React.createElement(CenterThis, { style: { marginTop: '2rem', gap: '24px' } },
@@ -15792,7 +15945,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                 React.createElement(Text, { color: theme.text.info },
                     !!sourcesToCreate ? 'Instrumenting' : 'Uninstrumenting',
                     " workloads..."),
-                React.createElement(Badge, { label: `${instrumentingPercent}%` })))) : !filtered.length ? (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
+                React.createElement(Badge, { label: `${instrumentingPercent}%` })))) : !filteredSources.length ? (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null))) : null));
 };
 
@@ -16044,4 +16197,4 @@ const ToggleDarkMode = () => {
         React.createElement(Background, { "$darkMode": darkMode })));
 };
 
-export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, ConnectionTypeDropdown, DataFlow, DataFlowActionsMenu, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NamespaceDropdown, NavIconIds, NotificationManager, OverviewDrawer, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, ToastList, ToggleDarkMode };
+export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, ConnectionTypeDropdown, DataFlow, DataFlowActionsMenu, DataStreamSelectionForm, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NamespaceDropdown, NavIconIds, NotificationManager, OverviewDrawer, SetupSummary, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, TableCellConditions, ToastList, ToggleDarkMode };