@odigos/ui-kit 0.0.17 → 0.0.19

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.0.19](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.18...ui-kit-v0.0.19) (2025-03-27)
+
+
+### Features
+
+* support test-connection in destination drawer ([#62](https://github.com/odigos-io/ui-kit/issues/62)) ([ae1cd19](https://github.com/odigos-io/ui-kit/commit/ae1cd19e20b9d87e5e98c0d16c8374ed89af5ed1))
+* x-scroll in data-tabs/base-nodes ([#61](https://github.com/odigos-io/ui-kit/issues/61)) ([58fe6cf](https://github.com/odigos-io/ui-kit/commit/58fe6cff9bfd5e1f9216bd315416f20452e1ea14))
+
+## [0.0.18](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.17...ui-kit-v0.0.18) (2025-03-26)
+
+
+### Bug Fixes
+
+* remove sideEffects flag from package.json ([#59](https://github.com/odigos-io/ui-kit/issues/59)) ([d1d7641](https://github.com/odigos-io/ui-kit/commit/d1d76410bda0250d838d25fc612581dd09c91dd7))
+
 ## [0.0.17](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.16...ui-kit-v0.0.17) (2025-03-26)
 
 

package/lib/components/index.d.ts

@@ -35,6 +35,7 @@ export * from './monitors-icons/index';
 export * from './navigation-buttons/index';
 export * from './no-data-found/index';
 export * from './notification-note/index';
+export * from './scroll-x/index';
 export * from './section-title/index';
 export * from './segment/index';
 export * from './skeleton-loader/index';

package/lib/components/scroll-x/index.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import { type TextProps } from '../text';
+interface ScrollXProps {
+    maxWidth: number;
+    text: string;
+    textSize?: TextProps['size'];
+    textColor?: TextProps['color'];
+}
+declare const ScrollX: FC<ScrollXProps>;
+export { ScrollX, type ScrollXProps };

package/lib/components.js

@@ -1,17 +1,18 @@
-import { B as Button, F as FlexRow } from './index-BiNX-Cge.js';
-export { A as AutocompleteInput, a as Badge, C as CancelWarning, $ as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as DeleteWarning, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, o as FadeLoader, p as FieldError, q as FieldLabel, _ as FlexColumn, I as IconButton, r as IconGroup, s as IconTitleBadge, t as IconWrapped, u as IconsNav, v as ImageControlled, w as Input, x as InputList, y as InputTable, z as InteractiveTable, K as KeyValueInputsList, M as Modal, a1 as ModalBody, G as MonitorsCheckboxes, H as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a0 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, a2 as TableContainer, a3 as TableTitleWrap, a4 as TableWrap, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-BiNX-Cge.js';
-import React, { Component, createElement, createContext, Fragment } from 'react';
+import { B as Button } from './index-CvuVOtkr.js';
+export { A as AutocompleteInput, a as Badge, C as CancelWarning, a1 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as DeleteWarning, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a0 as FlexColumn, $ as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a3 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a2 as Overlay, S as ScrollX, O as SectionTitle, P as Segment, Q as SkeletonLoader, R as Status, U as Stepper, a4 as TableContainer, a5 as TableTitleWrap, a6 as TableWrap, V as Text, W as TextArea, X as Toggle, T as ToggleCodeComponent, Y as Tooltip, Z as TraceLoader, _ as WarningModal } from './index-CvuVOtkr.js';
+import React, { Component, createElement, createContext } from 'react';
 import Theme from './theme.js';
-import styled from 'styled-components';
-import './index-BVVVevuY.js';
-import './index-BxQTUOME.js';
+import './types.js';
+import './index-BazfJyRh.js';
+import 'styled-components';
+import './index-WSle42rz.js';
+import './index-DGel4E-Z.js';
 import './index-BsH_egEe.js';
-import './index-BWqrekK4.js';
-import './index-DbfrGXPH.js';
-import './index-BJxaoI0G.js';
 import './index-BZS1ijMm.js';
-import './index-C1PCuZgw.js';
-import './useTransition-D0wUpPGk.js';
+import './index-BJxaoI0G.js';
+import './index-BFRz3l_w.js';
+import './index-CD_BQJCD.js';
+import './useTransition-bXMKBfST.js';
 import 'react-dom';
 import 'babel-runtime/helpers/extends';
 import 'babel-runtime/core-js/object/get-prototype-of';
@@ -20,8 +21,6 @@ import 'babel-runtime/helpers/createClass';
 import 'babel-runtime/helpers/possibleConstructorReturn';
 import 'babel-runtime/helpers/inherits';
 import 'object-assign';
-import './useDarkMode-DxhIuVNi.js';
-import './react-CjImwkhV.js';
 
 const ErrorBoundaryContext = createContext(null);
 
@@ -171,34 +170,4 @@ const ErrorBoundary = ({ children }) => {
             React.createElement(ErrorFallback, { ...props }))) }, children));
 };
 
-const Container = styled(FlexRow) `
-  position: relative;
-  width: calc(100% - 24px);
-  padding: 12px;
-  background-color: ${({ theme }) => theme.colors.dark_grey};
-  border-bottom: 1px solid ${({ theme }) => theme.colors.border + Theme.opacity.hex['050']};
-`;
-const AlignLeft = styled(FlexRow) `
-  margin-right: auto;
-  margin-left: 32px;
-  gap: 12px;
-`;
-const AlignRight = styled(FlexRow) `
-  margin-left: auto;
-  margin-right: 32px;
-  gap: 12px;
-`;
-const PositionCenter = styled(FlexRow) `
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  gap: 12px;
-`;
-const Header = ({ left = [], center = [], right = [] }) => {
-    return (React.createElement(Container, null,
-        React.createElement(AlignLeft, null, left.map((child, index) => child && React.createElement(Fragment, { key: index }, child))),
-        React.createElement(PositionCenter, null, center.map((child, index) => child && React.createElement(Fragment, { key: index }, child))),
-        React.createElement(AlignRight, null, right.map((child, index) => child && React.createElement(Fragment, { key: index }, child)))));
-};
-
-export { Button, ErrorBoundary, FlexRow, Header };
+export { Button, ErrorBoundary };

package/lib/constants.js

@@ -1,16 +1,12 @@
-export { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-G4WmxXds.js';
-export { M as MONITORS_OPTIONS } from './index-C1PCuZgw.js';
+export { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-BFRz3l_w.js';
 export { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-C_0J5P9M.js';
-import './index-C3nz3TIx.js';
-import './index-CIXQeSHu.js';
+import './types.js';
+import './index-CD_BQJCD.js';
+import './index-DGel4E-Z.js';
 import 'react';
 import './theme.js';
+import './index-BazfJyRh.js';
 import 'styled-components';
-import './useDarkMode-DxhIuVNi.js';
-import './react-CjImwkhV.js';
-import './index-RBS1MqCQ.js';
-import './index-BWqrekK4.js';
-import './index-DbfrGXPH.js';
 
 const TOKEN_ABOUT_TO_EXPIRE = 604800000; // 7 days in milliseconds
 

package/lib/containers/data-flow/nodes/scroll-node.d.ts

@@ -1,21 +1,10 @@
 import React from 'react';
+import { NodeTypes } from '@/types';
 import type { Node, NodeProps } from '@xyflow/react';
-import { EntityTypes, NodeTypes, StatusType, type Source, type SVG, type WorkloadId } from '@/types';
+import { BaseNodeProps } from './base-node';
 export interface ScrollNodeProps extends NodeProps<Node<{
-    nodeWidth: number;
     nodeHeight: number;
-    items: NodeProps<Node<{
-        nodeWidth: number;
-        framePadding: number;
-        id: WorkloadId;
-        type: EntityTypes;
-        status?: StatusType;
-        title: string;
-        subTitle: string;
-        icon?: SVG;
-        iconSrc?: string;
-        raw: Source;
-    }, NodeTypes.Base>>[];
+    items: BaseNodeProps[];
     onScroll: (params: {
         clientHeight: number;
         scrollHeight: number;

package/lib/containers.js

@@ -1,31 +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-BFRz3l_w.js';
 import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-C_0J5P9M.js';
-import { f as DataCardFieldTypes, q as FieldLabel, b as Checkbox, p as FieldError, w as Input, y as InputTable, K as KeyValueInputsList, x as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, G as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a1 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, F as FlexRow, X as Tooltip, t as IconWrapped, H as MonitorsIcons, a2 as TableContainer, a3 as TableTitleWrap, s as IconTitleBadge, a4 as TableWrap, z as InteractiveTable, $ as CenterThis, J as NoDataFound, _ as FlexColumn, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a5 as getDefaultExportFromCjs, o as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, u as IconsNav, r as IconGroup } from './index-BiNX-Cge.js';
-import { A as ActionType, C as CodeAttributesKeyTypes, P as PayloadCollectionKeyTypes, I as InstrumentationRuleType } from './index-RBS1MqCQ.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-CvuVOtkr.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, j as getEntityId, i as useSetupStore, u as useDarkMode } from './index-BazfJyRh.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.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 { i as CheckCircledIcon, O as OdigosLogo } from './index-BsH_egEe.js';
-import { b as usePendingStore, u as useFilterStore, c as useSelectedStore, a as useInstrumentStore } from './useSelectedStore-93bIo1kE.js';
-import { c as useNotificationStore, u as useDrawerStore, a as useEntityStore, b as useModalStore, d as useSetupStore } from './useSetupStore-CoYx1UQw.js';
-import { b as useKeyDown, c as useOnClickOutside, u as useContainerSize, d as useTransition, a as useCopy } from './useTransition-D0wUpPGk.js';
-import { E as EntityTypes, S as StatusType, C as Crud, O as OtherStatus, F as FieldTypes } from './index-BVVVevuY.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-CD_BQJCD.js';
+import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-_2PggiXn.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-bXMKBfST.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 { u as useActionFormData, a as useClickNode, c as useDestinationFormData, e as useInstrumentationRuleFormData, h as useTimeAgo, b as useClickNotification, f as useSourceFormData, g as useSourceSelectionFormData } from './useTimeAgo-weEj7br6.js';
-import { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-G4WmxXds.js';
-import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-C3nz3TIx.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-BxQTUOME.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-BQW5EUgp.js';
+import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-WSle42rz.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-DSzybApb.js';
 import require$$1 from 'use-sync-external-store/shim';
 import { createPortal } from 'react-dom';
-import { N as NodeTypes, A as AddNodeTypes, E as EdgeTypes } from './index-B72aw6tI.js';
-import { g as getEntityId } from './index-BQs4sULy.js';
-import { M as MONITORS_OPTIONS } from './index-C1PCuZgw.js';
-import { S as SignalType } from './index-DbfrGXPH.js';
 import { R as RulesIcon, W as SourcesIcon, y as ActionsIcon, z as DestinationsIcon } from './index-DB8Djrsy.js';
-import { u as useDarkMode } from './useDarkMode-DxhIuVNi.js';
-import './index-BWqrekK4.js';
+import './index-DGel4E-Z.js';
 import 'babel-runtime/helpers/extends';
 import 'babel-runtime/core-js/object/get-prototype-of';
 import 'babel-runtime/helpers/classCallCheck';
@@ -33,37 +26,7 @@ import 'babel-runtime/helpers/createClass';
 import 'babel-runtime/helpers/possibleConstructorReturn';
 import 'babel-runtime/helpers/inherits';
 import 'object-assign';
-import './react-CjImwkhV.js';
-import './index-Hz7AAE0t.js';
-import './index-CIXQeSHu.js';
-import './index-CIgHU72d.js';
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
+import './index-7-KCQK-x.js';
 
 const buildCard$3 = (action) => {
     const { type, spec: { actionName, notes, signals, disabled, collectContainerAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, }, } = action;
@@ -12776,7 +12739,7 @@ const BaseNode = memo(({ id: nodeId, data }) => {
             }, visualProps: {
                 status: status,
                 faded: faded || (hasActiveBoolean && !isActive),
-                monitors: monitors,
+                monitors,
             }, checkboxProps: {
                 withCheckbox: isSource,
                 isChecked: sourceIndex !== -1,
@@ -12813,19 +12776,30 @@ const FrameNode = memo(({ data }) => {
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } })));
 });
 
+// These are not the actual sizes of a base node,
+// but these are used to help calculate the actual sizes of various nodes and their positions.
+// It is important to not delete or edit this file, unless you re-define the maths for all node size and position calculations.
+const nodeConfig = {
+    nodeWidth: 295,
+    nodeHeight: 80,
+    framePadding: 12,
+};
+
+const { framePadding: framePadding$3 } = nodeConfig;
 const Container$e = styled.div `
   position: relative;
   z-index: 1;
-  width: ${({ $nodeWidth }) => $nodeWidth}px;
+  width: fit-content;
   height: ${({ $nodeHeight }) => $nodeHeight}px;
   background: transparent;
   border: none;
   overflow-y: auto;
+  overflow-x: hidden;
 `;
 const BaseNodeWrapper = styled.div `
-  margin: ${({ $framePadding }) => $framePadding}px 0;
+  margin: ${framePadding$3}px 0;
 `;
-const LoadMoreWrapper = styled.div `
+const BottomOverlay = styled.div `
   position: fixed;
   bottom: 0;
   left: 50%;
@@ -12842,14 +12816,8 @@ const LoadMoreWrapper = styled.div `
 
   pointer-events: none;
 `;
-// const LoadMoreButton = styled(Button)`
-//   background: ${({ theme }) => theme.colors.primary} !important;
-//   &:hover {
-//     background: ${({ theme }) => theme.colors.dropdown_bg_2} !important;
-//   }
-// `;
 const ScrollNode = memo(({ data, ...rest }) => {
-    const { nodeWidth, nodeHeight, items, onScroll } = data;
+    const { nodeHeight, items, onScroll } = data;
     const { onClickNode } = useClickNode();
     const containerRef = useRef(null);
     const [isBottomOfList, setIsBottomOfList] = useState(false);
@@ -12858,30 +12826,22 @@ const ScrollNode = memo(({ data, ...rest }) => {
             e.stopPropagation();
             // @ts-ignore - these properties are available on the EventTarget, TS is not aware of it
             const { clientHeight, scrollHeight, scrollTop } = e.target || { clientHeight: 0, scrollHeight: 0, scrollTop: 0 };
-            if (!!onScroll)
+            if (onScroll)
                 onScroll({ clientHeight, scrollHeight, scrollTop });
-            // TODO: Use the following if we have to handle paginated API requests using scroll:
-            // const isTop = scrollTop === 0;
-            const isBottom = scrollHeight - scrollTop <= clientHeight;
-            // if (isTop) {
-            //   console.log('Reached top of scroll-node');
-            // } else if (isBottom) {
-            //   console.log('Reached bottom of scroll-node');
-            // }
-            setIsBottomOfList(isBottom);
+            setIsBottomOfList(scrollHeight - scrollTop <= clientHeight);
         };
         const { current } = containerRef;
         current?.addEventListener('scroll', handleScroll);
         return () => current?.removeEventListener('scroll', handleScroll);
     }, [onScroll]);
-    return (React.createElement(Container$e, { ref: containerRef, "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
-        items.map((item) => (React.createElement(BaseNodeWrapper, { key: item.id, "$framePadding": item.data.framePadding, onClick: (e) => {
+    return (React.createElement(Container$e, { ref: containerRef, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+        items.map((item) => (React.createElement(BaseNodeWrapper, { key: item.id, onClick: (e) => {
                 e.stopPropagation();
                 // @ts-ignore
                 onClickNode(e, item);
             } },
             React.createElement(BaseNode, { ...rest, type: NodeTypes.Base, id: item.id, data: item.data })))),
-        React.createElement(LoadMoreWrapper, { "$hide": isBottomOfList })));
+        React.createElement(BottomOverlay, { "$hide": isBottomOfList })));
 });
 
 const Container$d = styled.div `
@@ -13069,15 +13029,6 @@ const Flow = ({ nodes, edges, onNodesChange, onEdgesChange }) => {
                     } })))));
 };
 
-// These are not the actual sizes of a base node,
-// but these are used to help calculate the actual sizes of various nodes and their positions.
-// It is important to not delete or edit this file, unless you re-define the maths for all node size and position calculations.
-const nodeConfig = {
-    nodeWidth: 295,
-    nodeHeight: 80,
-    framePadding: 12,
-};
-
 const { nodeHeight: nodeHeight$3, framePadding: framePadding$2 } = nodeConfig;
 const createEdge = (edgeId, params) => {
     const { theme, label, isMultiTarget, isError, animated } = params || {};
@@ -13301,8 +13252,7 @@ const mapToNodeData$1 = (entity) => {
     const { priorotizedStatus, hasDisableds } = getConditionsBooleans(entity.conditions || []);
     return {
         nodeWidth: nodeWidth$2,
-        nodeHeight: nodeHeight$1,
-        framePadding,
+        nodeHeight: nodeHeight$1, // for edged node
         id: {
             namespace: entity.namespace,
             name: entity.name,
@@ -13960,10 +13910,8 @@ const TestConnection = ({ destination, disabled, status, onError, onSuccess, val
         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')));
 };
 
-const Container$9 = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+const Container$9 = styled(FlexColumn) `
+  align-items: unset;
   padding: 0 4px;
 `;
 const NotesWrapper = styled.div `
@@ -14030,20 +13978,20 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
             traces: signals.includes(SignalType.Traces),
         });
     };
-    return (React.createElement(Container$9, null,
-        !isUpdate && (React.createElement(React.Fragment, null,
-            React.createElement(SectionTitle, { title: 'Create connection', 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: () => {
+    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);
                     } })) }),
-            (testConnectionSupported || autoFilled) && (React.createElement(NotesWrapper, null,
+            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 && React.createElement(NotificationNote, { type: StatusType.Default, message: `Odigos autocompleted ${displayName} connection details.` }))),
-            React.createElement(Divider, null))),
+                autoFilled && !connectionStatus && !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) => {
                 dirtyForm();

package/lib/functions.js

@@ -1,22 +1,16 @@
-export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, p as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-BxQTUOME.js';
-export { c as compareCondition, f as filterActions, a as filterDestinations, b as filterSources, d as formatBytes, g as getConditionsBooleans, h as getContainersIcons, e as getContainersInstrumentedCount, i as getDestinationIcon, j as getEntityIcon, k as getEntityLabel, l as getMetricForEntity, m as getPlatformIcon, n as getPlatformLabel, o as getValueForRange, p as getWorkloadId, q as isOverTime, s as sleep } from './index-BQW5EUgp.js';
-export { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-C3nz3TIx.js';
-export { g as getEntityId, i as isTimeElapsed } from './index-BQs4sULy.js';
-export { g as getIdFromSseTarget } from './index-Hz7AAE0t.js';
-import { E as EntityTypes } from './index-BVVVevuY.js';
+export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, p as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-WSle42rz.js';
+export { c as compareCondition, f as filterActions, a as filterDestinations, b as filterSources, d as formatBytes, g as getConditionsBooleans, h as getContainersIcons, e as getContainersInstrumentedCount, i as getDestinationIcon, j as getEntityIcon, k as getEntityLabel, l as getMetricForEntity, m as getPlatformIcon, n as getPlatformLabel, o as getValueForRange, p as getWorkloadId, q as isOverTime, s as sleep } from './index-DSzybApb.js';
+export { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-CD_BQJCD.js';
+export { j as getEntityId, k as isTimeElapsed } from './index-BazfJyRh.js';
+export { g as getIdFromSseTarget } from './index-7-KCQK-x.js';
+import { EntityTypes } from './types.js';
 export { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import './index-BsH_egEe.js';
 import 'react';
-import './theme.js';
 import 'styled-components';
-import './useDarkMode-DxhIuVNi.js';
-import './react-CjImwkhV.js';
-import './index-BWqrekK4.js';
-import './index-DbfrGXPH.js';
-import './index-CIgHU72d.js';
+import './index-DGel4E-Z.js';
+import './theme.js';
+import './index-BsH_egEe.js';
 import './index-DB8Djrsy.js';
-import './index-CIXQeSHu.js';
-import './index-RBS1MqCQ.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {
     const cleanArray = (arr) => arr.filter((item) => {

package/lib/hooks.js

@@ -1,13 +1,13 @@
-export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useGenericForm, e as useInstrumentationRuleFormData, f as useSourceFormData, g as useSourceSelectionFormData, h as useTimeAgo } from './useTimeAgo-weEj7br6.js';
-export { u as useContainerSize, a as useCopy, b as useKeyDown, c as useOnClickOutside, d as useTransition } from './useTransition-D0wUpPGk.js';
-import './useSetupStore-CoYx1UQw.js';
-import './react-CjImwkhV.js';
+export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-_2PggiXn.js';
+export { u as useContainerSize, a as useCopy, b as useGenericForm, c as useInstrumentationRuleFormData, d as useKeyDown, e as useOnClickOutside, f as useTimeAgo, g as useTransition } from './useTransition-bXMKBfST.js';
+import './types.js';
 import 'react';
-import './index-BQs4sULy.js';
-import './index-BVVVevuY.js';
+import './index-BazfJyRh.js';
+import 'styled-components';
 import './index-BZS1ijMm.js';
+import './index-BFRz3l_w.js';
+import './index-CD_BQJCD.js';
+import './index-DGel4E-Z.js';
+import './theme.js';
 import './index-C_0J5P9M.js';
-import './index-RBS1MqCQ.js';
-import './index-B72aw6tI.js';
-import './index-Hz7AAE0t.js';
-import 'styled-components';
+import './index-7-KCQK-x.js';

package/lib/icons.js

@@ -1,14 +1,13 @@
-export { A as AddClusterInfoIcon, C as CodeAttributesIcon, D as DeleteAttributeIcon, K as K8sLogo, a as PayloadCollectionIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, S as SamplerIcon } from './index-CIXQeSHu.js';
+export { A as AddClusterInfoIcon, C as CodeAttributesIcon, D as DeleteAttributeIcon, I as ImageErrorIcon, K as K8sLogo, a as PayloadCollectionIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, S as SamplerIcon } from './index-DGel4E-Z.js';
 export { C as CPlusPlusLogo, d as CSharpLogo, i as CheckCircledIcon, D as DotnetLogo, E as ElixirLogo, h as ErrorTriangleIcon, G as GoLogo, I as InfoIcon, J as JavaLogo, K as KafkaLogo, L as LogsIcon, g as MetricsIcon, M as MysqlLogo, N as NginxLogo, f as NodejsLogo, O as OdigosLogo, c as PhpLogo, P as PostgresLogo, e as PythonLogo, R as RedisLogo, b as RubyLogo, a as RustLogo, S as SwiftLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-BsH_egEe.js';
 export { C as CrossCircledIcon, E as EditIcon, F as FilterIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, S as SlackLogo, T as TerminalIcon } from './index-KOMAv-TS.js';
 export { A as ArrowIcon, f as CheckIcon, C as CodeIcon, a as CopyIcon, g as CrossIcon, E as ExtendArrowIcon, d as EyeClosedIcon, e as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, b as NotebookIcon, P as PlusIcon, S as SearchIcon, c as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-BJxaoI0G.js';
 import React from 'react';
 import Theme from './theme.js';
-export { I as ImageErrorIcon } from './index-BWqrekK4.js';
 export { y as ActionsIcon, A as AppDynamicsLogo, a as AwsCloudwatchLogo, b as AwsS3Logo, c as AwsXrayLogo, d as AxiomLogo, B as BetterStackLogo, e as BlobStorageLogo, C as CauselyLogo, f as ChronosphereLogo, g as ClickhouseLogo, h as CoralogixLogo, D as Dash0Logo, i as DatadogLogo, z as DestinationsIcon, j as DynatraceLogo, E as ElasticApmLogo, k as ElasticSearchLogo, G as GigapipeLogo, l as GoogleCloudPlatformLogo, m as GrafanaLogo, n as GroundcoverLogo, H as HoneycombLogo, o as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, p as LightstepLogo, q as LogzioLogo, r as LokiLogo, s as LumigoLogo, M as MiddlewareLogo, F as NamespacesIcon, N as NewRelicLogo, O as OpenTelemetryLogo, t as OpsVerseLogo, P as PrometheusLogo, Q as QrynLogo, u as QuickwitLogo, R as RulesIcon, S as SignozLogo, W as SourcesIcon, v as SplunkLogo, w as SumoLogicLogo, T as TempoLogo, x as TraceloopLogo, U as UptraceLogo, V as VmLogo } from './index-DB8Djrsy.js';
+import './index-BazfJyRh.js';
+import './types.js';
 import 'styled-components';
-import './useDarkMode-DxhIuVNi.js';
-import './react-CjImwkhV.js';
 
 const CodeBracketsIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-Hz7AAE0t.js → index-7-KCQK-x.js}

@@ -1,4 +1,4 @@
-import { E as EntityTypes } from './index-BVVVevuY.js';
+import { EntityTypes } from './types.js';
 
 const getIdFromSseTarget = (target, type) => {
     switch (type) {

package/lib/{index-G4WmxXds.js → index-BFRz3l_w.js}

@@ -1,6 +1,8 @@
-import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-C3nz3TIx.js';
-import { S as SignalType } from './index-DbfrGXPH.js';
-import { A as ActionType, I as InstrumentationRuleType } from './index-RBS1MqCQ.js';
+import { SignalType, ActionType, InstrumentationRuleType } from './types.js';
+import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-CD_BQJCD.js';
+import 'react';
+import './index-BazfJyRh.js';
+import 'styled-components';
 
 const ACTION_OPTIONS = [
     {
@@ -108,4 +110,19 @@ const INSTRUMENTATION_RULE_OPTIONS = [
     },
 ];
 
-export { ACTION_OPTIONS as A, INSTRUMENTATION_RULE_OPTIONS as I };
+const MONITORS_OPTIONS = [
+    {
+        id: SignalType.Logs,
+        value: 'Logs',
+    },
+    {
+        id: SignalType.Metrics,
+        value: 'Metrics',
+    },
+    {
+        id: SignalType.Traces,
+        value: 'Traces',
+    },
+];
+
+export { ACTION_OPTIONS as A, INSTRUMENTATION_RULE_OPTIONS as I, MONITORS_OPTIONS as M };