@odigos/ui-kit 0.0.18 → 0.0.20

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.0.20](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.19...ui-kit-v0.0.20) (2025-03-27)
+
+
+### Bug Fixes
+
+* missing title from data-tab ([#64](https://github.com/odigos-io/ui-kit/issues/64)) ([61ec39c](https://github.com/odigos-io/ui-kit/commit/61ec39c4a9c1952f6219e6a32750407352b6ca00))
+
+## [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)
 
 

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,18 +1,18 @@
-import { B as Button } from './index-Bb7VdYPG.js';
-export { A as AutocompleteInput, a as Badge, C as CancelWarning, a0 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, $ 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, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, a3 as TableContainer, a4 as TableTitleWrap, a5 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-Bb7VdYPG.js';
+import { B as Button } from './index-BoH4B5XC.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-BoH4B5XC.js';
 import React, { Component, createElement, createContext } from 'react';
 import Theme from './theme.js';
 import './types.js';
-import './index-Bdimyacn.js';
+import './index-BazfJyRh.js';
 import 'styled-components';
-import './index-CVs2NNg9.js';
+import './index-WSle42rz.js';
 import './index-DGel4E-Z.js';
 import './index-BsH_egEe.js';
 import './index-BZS1ijMm.js';
 import './index-BJxaoI0G.js';
-import './index-jPxFCX-5.js';
-import './index-BlJU2fGe.js';
-import './useTransition-WRhgkuG2.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';

package/lib/constants.js

@@ -1,11 +1,11 @@
-export { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-jPxFCX-5.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 './types.js';
-import './index-BlJU2fGe.js';
+import './index-CD_BQJCD.js';
 import './index-DGel4E-Z.js';
 import 'react';
 import './theme.js';
-import './index-Bdimyacn.js';
+import './index-BazfJyRh.js';
 import 'styled-components';
 
 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,20 +1,20 @@
 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-jPxFCX-5.js';
+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 { 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, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z 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, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, a3 as TableContainer, a4 as TableTitleWrap, r as IconTitleBadge, a5 as TableWrap, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, $ as FlexColumn, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a6 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-Bb7VdYPG.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-Bdimyacn.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-BoH4B5XC.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 { i as CheckCircledIcon, O as OdigosLogo } from './index-BsH_egEe.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-BlJU2fGe.js';
-import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-LmLZzJyk.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-WRhgkuG2.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 { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-CVs2NNg9.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-CT0qszYw.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 { R as RulesIcon, W as SourcesIcon, y as ActionsIcon, z as DestinationsIcon } from './index-DB8Djrsy.js';
@@ -12739,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,
@@ -12776,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%;
@@ -12805,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);
@@ -12821,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 `
@@ -13032,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 || {};
@@ -13264,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,
@@ -13923,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 `
@@ -13993,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,7 +1,7 @@
-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-CVs2NNg9.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-CT0qszYw.js';
-export { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BlJU2fGe.js';
-export { j as getEntityId, k as isTimeElapsed } from './index-Bdimyacn.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';

package/lib/hooks.js

@@ -1,12 +1,12 @@
-export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-LmLZzJyk.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-WRhgkuG2.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-Bdimyacn.js';
+import './index-BazfJyRh.js';
 import 'styled-components';
 import './index-BZS1ijMm.js';
-import './index-jPxFCX-5.js';
-import './index-BlJU2fGe.js';
+import './index-BFRz3l_w.js';
+import './index-CD_BQJCD.js';
 import './index-DGel4E-Z.js';
 import './theme.js';
 import './index-C_0J5P9M.js';

package/lib/icons.js

@@ -5,7 +5,7 @@ export { A as ArrowIcon, f as CheckIcon, C as CodeIcon, a as CopyIcon, g as Cros
 import React from 'react';
 import Theme from './theme.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-Bdimyacn.js';
+import './index-BazfJyRh.js';
 import './types.js';
 import 'styled-components';
 

package/lib/{index-jPxFCX-5.js → index-BFRz3l_w.js}

@@ -1,7 +1,7 @@
 import { SignalType, ActionType, InstrumentationRuleType } from './types.js';
-import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BlJU2fGe.js';
+import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-CD_BQJCD.js';
 import 'react';
-import './index-Bdimyacn.js';
+import './index-BazfJyRh.js';
 import 'styled-components';
 
 const ACTION_OPTIONS = [

package/lib/{index-Bdimyacn.js → index-BazfJyRh.js}

@@ -598,7 +598,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* Preload key fonts in your global CSS */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@100;200;300;400;500;600;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');\n\n* {\n  scrollbar-color: black transparent;\n  scrollbar-width: thin;\n}\n\nsvg {\n  transition: all 0.3s;\n}\n\n/*\n  The input styles below are to override the browser \":-webkit-autofill\" default style declarations.\n  The issue is when someone autocompletes an input field, the browser will apply its own styles (and the browser applies \"!important\" preventing direct overrides).\n  With the following, we're able to delay the browser styles to be applied for 50000s (13.8 hours), so the user will not see the browser styles applied.\n*/\n\ninput {\n  all: unset;\n}\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-transition: all 50000s ease-in-out 0s;\n  transition: all 50000s ease-in-out 0s;\n}\n";
+var css_248z = "/* Preload key fonts in your global CSS */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@100;200;300;400;500;600;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');\n\n* {\n  -ms-overflow-style: none; /* IE, Edge */\n  scrollbar-width: none; /* Firefox */\n}\n*::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n}\n\nsvg {\n  transition: all 0.3s;\n}\n\n/*\n  The input styles below are to override the browser \":-webkit-autofill\" default style declarations.\n  The issue is when someone autocompletes an input field, the browser will apply its own styles (and the browser applies \"!important\" preventing direct overrides).\n  With the following, we're able to delay the browser styles to be applied for 50000s (13.8 hours), so the user will not see the browser styles applied.\n*/\n\ninput {\n  all: unset;\n}\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-transition: all 50000s ease-in-out 0s;\n  transition: all 50000s ease-in-out 0s;\n}\n";
 styleInject(css_248z);
 
 const slide = {

package/lib/{index-Bb7VdYPG.js → index-BoH4B5XC.js}

@@ -1,13 +1,13 @@
 import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment } from 'react';
 import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages, EntityTypes } from './types.js';
-import './index-Bdimyacn.js';
+import './index-BazfJyRh.js';
 import styled, { css } from 'styled-components';
 import Theme from './theme.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-CVs2NNg9.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-WSle42rz.js';
 import { s as safeJsonParse, i as isEmpty } from './index-BZS1ijMm.js';
 import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, c as SortArrowsIcon, a as CopyIcon, b as NotebookIcon, X as XIcon, d as EyeClosedIcon, e as EyeOpenIcon, N as NoDataIcon, g as CrossIcon, S as SearchIcon, T as TrashIcon, P as PlusIcon, A as ArrowIcon } from './index-BJxaoI0G.js';
-import { M as MONITORS_OPTIONS } from './index-jPxFCX-5.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-WRhgkuG2.js';
+import { M as MONITORS_OPTIONS } from './index-BFRz3l_w.js';
+import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-bXMKBfST.js';
 import ReactDOM from 'react-dom';
 import { I as ImageErrorIcon } from './index-DGel4E-Z.js';
 import require$$0 from 'babel-runtime/helpers/extends';
@@ -3676,7 +3676,7 @@ const TableData = styled.td `
   vertical-align: top;
   padding: 4px 6px;
 `;
-const Title$c = styled(Text) `
+const Title$b = styled(Text) `
   white-space: nowrap;
 `;
 const CodeLineToken = styled.span `
@@ -3765,7 +3765,7 @@ const PrettyJsonCode = ({ darkMode, str }) => {
                     renderEmptyRows(2, i),
                     React.createElement(TableRow$1, { ...lineProps },
                         React.createElement(TableData, null,
-                            React.createElement(Title$c, null, formattedLine[0].content)),
+                            React.createElement(Title$b, null, formattedLine[0].content)),
                         React.createElement(TableData, null))));
             }
             else if (formattedLine.length === 2) {
@@ -4091,6 +4091,36 @@ const Status = ({ title, subtitle, size = 12, family = 'secondary', status = Sta
             !!subtitle && (React.createElement(Text, { size: size - 2, family: family, color: theme.text[`${statusType}_secondary`] }, subtitle))))));
 };
 
+const LimitedText = styled(Text) `
+  max-width: ${({ $maxWidth }) => `${$maxWidth}px` || 'unset'};
+  white-space: nowrap;
+  overflow-x: auto;
+
+  &::after {
+    // This is to prevent the "browser default tooltip" from appearing when the title is too long
+    content: '';
+    display: block;
+  }
+`;
+const ELIPSIS_WIDTH = 12;
+const ScrollX = ({ maxWidth, text, textSize, textColor }) => {
+    const [isOverflowed, setIsOverflowed] = useState(false);
+    const ref = useRef(null);
+    // Check if text is overflowed from maximum width
+    useEffect(() => {
+        if (ref.current) {
+            const { clientWidth } = ref.current;
+            const marginUp = (maxWidth - ELIPSIS_WIDTH) * 1.05; // add 5%
+            const marginDown = (maxWidth - ELIPSIS_WIDTH) * 0.95; // subtract 5%
+            setIsOverflowed(clientWidth < marginUp && clientWidth > marginDown);
+        }
+    }, [maxWidth, text]);
+    return (React.createElement(FlexRow, { "$gap": 0 },
+        text && (React.createElement(Tooltip, { text: isOverflowed ? text : undefined },
+            React.createElement(LimitedText, { ref: ref, "$maxWidth": maxWidth - ELIPSIS_WIDTH, size: textSize, color: textColor }, text))),
+        isOverflowed && (React.createElement(LimitedText, { "$maxWidth": ELIPSIS_WIDTH, size: textSize, color: textColor }, "..."))));
+};
+
 const ImageControlled = ({ src = '', alt = '', size = 16 }) => {
     const [hasError, setHasError] = useState(false);
     if (!!src && !hasError) {
@@ -4214,6 +4244,25 @@ const IconButton = ({ children, onClick, tooltip, size = 36, withPing, pingColor
             children)));
 };
 
+const defaultMonitors = MONITORS_OPTIONS.map(({ id }) => id);
+const MonitorsIcons = ({ monitors = defaultMonitors, withTooltips, withLabels, size = 12, color: clr }) => {
+    const theme = Theme.useTheme();
+    const color = clr || theme.text.grey;
+    return (React.createElement(FlexRow, { "$gap": withLabels ? size : size / 2 }, monitors
+        .filter((str) => !!str)
+        .map((str) => {
+        const signal = str.toLowerCase();
+        const displayName = capitalizeFirstLetter(signal);
+        const Icon = getMonitorIcon(signal);
+        if (!Icon)
+            return null;
+        return (React.createElement(Tooltip, { key: signal, text: withTooltips ? displayName : '' },
+            React.createElement(FlexRow, { "$gap": size / 3 },
+                React.createElement(Icon, { size: withLabels ? size + 2 : size, fill: color }),
+                withLabels && (React.createElement(Text, { size: size, color: color }, displayName)))));
+    })));
+};
+
 const ControlledVisibility = styled.div `
   visibility: hidden;
 `;
@@ -4245,28 +4294,6 @@ const Container$m = styled.div `
       }
     `}
 `;
-const Title$b = styled(Text) `
-  max-width: ${({ $maxWidth }) => $maxWidth}px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  font-size: 14px;
-  &::after {
-    // This is to prevent the browser "default tooltip" from appearing when the title is too long
-    content: '';
-    display: block;
-  }
-`;
-const SubTitle$2 = styled(Text) `
-  max-width: ${({ $maxWidth }) => $maxWidth}px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  color: ${({ theme }) => theme.text.grey};
-  font-size: 10px;
-`;
 const ActionsWrapper = styled.div `
   display: flex;
   align-items: center;
@@ -4276,47 +4303,40 @@ const ActionsWrapper = styled.div `
 const HoverText = styled(Text) `
   margin-right: 16px;
 `;
+const SubText = styled(Text) `
+  font-size: 10px;
+  color: ${({ theme }) => theme.text.grey};
+`;
 const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps: { icon, icons, iconSrc, iconSrcs } = {}, visualProps: { status, faded, bgColor, bgColorHover, monitors, monitorsWithLabels } = {}, checkboxProps: { withCheckbox, isCheckboxDisabled, isChecked, onCheckboxChange } = {}, extendableProps: { withExtend, isExtended, renderExtended } = {}, ...props }) => {
+    const theme = Theme.useTheme();
     const [extend, setExtend] = useState(isExtended || false);
-    const [maxWidth, setMaxWidth] = useState(0);
-    const [isTitleOverflowed, setIsTitleOverflowed] = useState(false);
-    const [isSubTitleOverflowed, setSubIsTitleOverflowed] = useState(false);
+    const [textMaxWidth, setTextMaxWidth] = useState(0);
     const containerRef = useRef(null);
     const actionsRef = useRef(null);
-    const titleRef = useRef(null);
-    const subTitleRef = useRef(null);
+    const monitorsRef = useRef(null);
+    // Dynamically define maximim width for title and subtitle
     useEffect(() => {
-        if (containerRef.current && actionsRef.current) {
+        if (containerRef.current) {
             const containerWidth = containerRef.current.clientWidth;
-            const actionsWidth = actionsRef.current.clientWidth;
-            // 85 is the sum of the container-padding, icon width, and flex-row-gap.
-            // we round it to 120, to consider cases with actions.
-            const widthOfInnerContents = 120;
-            setMaxWidth(containerWidth - actionsWidth - widthOfInnerContents);
-        }
-    }, []);
-    useEffect(() => {
-        const marginUp = maxWidth * 1.05; // add 5%
-        const marginDown = maxWidth * 0.95; // subtract 5%
-        if (titleRef.current) {
-            const { clientWidth } = titleRef.current;
-            setIsTitleOverflowed(clientWidth < marginUp && clientWidth > marginDown);
-        }
-        if (subTitleRef.current) {
-            const { clientWidth } = subTitleRef.current;
-            setSubIsTitleOverflowed(clientWidth < marginUp && clientWidth > marginDown);
+            const actionsWidth = actionsRef.current?.clientWidth || 0;
+            // 85 is the sum of the container-padding, icon-width, and flex-row-gap.
+            // 125 is the sum of the above, plus checkboxes.
+            const widthOfNonTextContents = (withCheckbox ? 125 : 85) + actionsWidth;
+            setTextMaxWidth(containerWidth - widthOfNonTextContents);
         }
-    }, [title, subTitle, maxWidth]);
+    }, [withCheckbox]);
     return (React.createElement(Container$m, { ref: containerRef, "$status": status, "$faded": faded, "$bgColor": bgColor, "$bgColorHover": bgColorHover, "$withClick": !!onClick, onClick: onClick, ...props },
         React.createElement(FlexRow, { "$gap": 8 },
             React.createElement(FlexRow, { "$gap": 16 },
                 withCheckbox && React.createElement(Checkbox, { value: isChecked, onChange: onCheckboxChange, disabled: isCheckboxDisabled }),
                 !!icons?.length || !!iconSrcs?.length ? (React.createElement(IconGroup, { icons: icons, iconSrcs: iconSrcs, status: status, id: `${title}-${subTitle}` })) : !!icon || !!iconSrc ? (React.createElement(IconWrapped, { icon: icon, src: iconSrc, status: status })) : null),
             React.createElement(FlexColumn, { "$gap": 4 },
-                React.createElement(Tooltip, { text: isTitleOverflowed ? title : undefined, withIcon: false },
-                    React.createElement(Title$b, { ref: titleRef, "$maxWidth": maxWidth }, title)),
-                subTitle && (React.createElement(Tooltip, { text: isSubTitleOverflowed ? subTitle : undefined, withIcon: false },
-                    React.createElement(SubTitle$2, { ref: subTitleRef, "$maxWidth": maxWidth }, subTitle)))),
+                title && React.createElement(ScrollX, { maxWidth: textMaxWidth, text: title, textSize: 14 }),
+                React.createElement(FlexRow, { "$gap": 4 },
+                    subTitle && React.createElement(ScrollX, { maxWidth: textMaxWidth - (monitorsRef.current?.clientWidth || 0), text: subTitle, textSize: 10, textColor: theme.text.grey }),
+                    monitors && monitors.length > 0 && (React.createElement(FlexRow, { "$gap": 4, ref: monitorsRef },
+                        subTitle && React.createElement(SubText, null, "\u2022"),
+                        React.createElement(MonitorsIcons, { monitors: monitors, withLabels: monitorsWithLabels, size: 10 }))))),
             React.createElement(ActionsWrapper, { ref: actionsRef },
                 !!hoverText && (React.createElement(ControlledVisibility, null,
                     React.createElement(HoverText, { size: 14, family: 'secondary' }, hoverText))),
@@ -4361,25 +4381,6 @@ const DescribeRow = ({ title, subTitle, tooltip, value }) => {
         React.createElement(ValueWrapper, null, !!value?.status ? (React.createElement(Status, { status: value.status === 'transitioning' ? OtherStatus.Loading : value.status, title: value.text || value.status, withBorder: true, withIcon: true })) : (React.createElement(ValueText, null, value?.text || '-')))));
 };
 
-const defaultMonitors = MONITORS_OPTIONS.map(({ id }) => id);
-const MonitorsIcons = ({ monitors = defaultMonitors, withTooltips, withLabels, size = 12, color: clr }) => {
-    const theme = Theme.useTheme();
-    const color = clr || theme.text.grey;
-    return (React.createElement(FlexRow, { "$gap": withLabels ? size : size / 2 }, monitors
-        .filter((str) => !!str)
-        .map((str) => {
-        const signal = str.toLowerCase();
-        const displayName = capitalizeFirstLetter(signal);
-        const Icon = getMonitorIcon(signal);
-        if (!Icon)
-            return null;
-        return (React.createElement(Tooltip, { key: signal, text: withTooltips ? displayName : '' },
-            React.createElement(FlexRow, { "$gap": size / 3 },
-                React.createElement(Icon, { size: withLabels ? size + 2 : size, fill: color }),
-                withLabels && (React.createElement(Text, { size: size, color: color }, displayName)))));
-    })));
-};
-
 const Tr = styled.tr `
   cursor: ${({ $withHover }) => ($withHover ? 'pointer' : 'default')};
   opacity: ${({ $faded }) => ($faded ? 0.5 : 1)};
@@ -4397,8 +4398,11 @@ const RowText = styled(Text) `
   font-size: 14px;
   color: ${({ $color, theme }) => $color ?? theme.text.secondary};
   line-height: 16px;
-  text-wrap: wrap;
+
   overflow: hidden;
+  overflow-wrap: break-word;
+  white-space: wrap;
+  text-wrap: wrap;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -29607,4 +29611,4 @@ const WarningModal = ({ isOpen, noOverlay, title = '', description = '', note, a
                 React.createElement(FooterButton, { "data-id": 'deny', variant: denyButton.variant || 'secondary', onClick: onDeny }, denyButton.text)))));
 };
 
-export { FlexColumn as $, AutocompleteInput as A, Button$4 as B, CancelWarning as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, Segment as O, SkeletonLoader as P, Status as Q, Stepper as R, SectionTitle as S, ToggleCodeComponent as T, Text as U, TextArea as V, Toggle as W, Tooltip as X, TraceLoader as Y, WarningModal as Z, FlexRow as _, Badge as a, CenterThis as a0, Overlay as a1, ModalBody as a2, TableContainer as a3, TableTitleWrap as a4, TableWrap as a5, getDefaultExportFromCjs as a6, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e, DataCardFieldTypes as f, DataTab as g, DeleteWarning as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };
+export { FlexRow as $, AutocompleteInput as A, Button$4 as B, CancelWarning as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, SectionTitle as O, Segment as P, SkeletonLoader as Q, Status as R, ScrollX as S, ToggleCodeComponent as T, Stepper as U, Text as V, TextArea as W, Toggle as X, Tooltip as Y, TraceLoader as Z, WarningModal as _, Badge as a, FlexColumn as a0, CenterThis as a1, Overlay as a2, ModalBody as a3, TableContainer as a4, TableTitleWrap as a5, TableWrap as a6, getDefaultExportFromCjs as a7, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e, DataCardFieldTypes as f, DataTab as g, DeleteWarning as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };

package/lib/{index-BlJU2fGe.js → index-CD_BQJCD.js}

@@ -1,7 +1,7 @@
 import { ActionType, InstrumentationRuleType } from './types.js';
 import { S as SamplerIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, D as DeleteAttributeIcon, A as AddClusterInfoIcon, K as K8sLogo, I as ImageErrorIcon, C as CodeAttributesIcon, a as PayloadCollectionIcon } from './index-DGel4E-Z.js';
 import 'react';
-import './index-Bdimyacn.js';
+import './index-BazfJyRh.js';
 import 'styled-components';
 
 const getActionIcon = (type) => {

package/lib/{index-CT0qszYw.js → index-DSzybApb.js}

@@ -1,7 +1,7 @@
 import { StatusType, OtherStatus, DestinationTypes, EntityTypes, PlatformType } from './types.js';
-import { a as getProgrammingLanguageIcon } from './index-CVs2NNg9.js';
+import { a as getProgrammingLanguageIcon } from './index-WSle42rz.js';
 import 'react';
-import './index-Bdimyacn.js';
+import './index-BazfJyRh.js';
 import 'styled-components';
 import { c as AwsXrayLogo, U as UptraceLogo, x as TraceloopLogo, T as TempoLogo, w as SumoLogicLogo, v as SplunkLogo, S as SignozLogo, b as AwsS3Logo, u as QuickwitLogo, G as GigapipeLogo, Q as QrynLogo, P as PrometheusLogo, O as OpenTelemetryLogo, t as OpsVerseLogo, N as NewRelicLogo, M as MiddlewareLogo, s as LumigoLogo, r as LokiLogo, q as LogzioLogo, p as LightstepLogo, L as Last9Logo, K as KloudmateLogo, J as JaegerLogo, I as InstanaLogo, o as HyperDxLogo, H as HoneycombLogo, n as GroundcoverLogo, m as GrafanaLogo, l as GoogleCloudPlatformLogo, k as ElasticSearchLogo, E as ElasticApmLogo, j as DynatraceLogo, i as DatadogLogo, D as Dash0Logo, h as CoralogixLogo, a as AwsCloudwatchLogo, g as ClickhouseLogo, f as ChronosphereLogo, C as CauselyLogo, B as BetterStackLogo, e as BlobStorageLogo, d as AxiomLogo, A as AppDynamicsLogo, R as RulesIcon, y as ActionsIcon, z as DestinationsIcon, W as SourcesIcon, F as NamespacesIcon, V as VmLogo } from './index-DB8Djrsy.js';
 import { K as KafkaLogo, O as OdigosLogo } from './index-BsH_egEe.js';

package/lib/{index-CVs2NNg9.js → index-WSle42rz.js}

@@ -1,6 +1,6 @@
 import { ProgrammingLanguages, SignalType, StatusType } from './types.js';
 import 'react';
-import './index-Bdimyacn.js';
+import './index-BazfJyRh.js';
 import 'styled-components';
 import { I as ImageErrorIcon } from './index-DGel4E-Z.js';
 import { K as KafkaLogo, R as RedisLogo, P as PostgresLogo, N as NginxLogo, M as MysqlLogo, E as ElixirLogo, S as SwiftLogo, a as RustLogo, b as RubyLogo, c as PhpLogo, C as CPlusPlusLogo, d as CSharpLogo, D as DotnetLogo, e as PythonLogo, f as NodejsLogo, G as GoLogo, J as JavaLogo, T as TracesIcon, g as MetricsIcon, L as LogsIcon, O as OdigosLogo, I as InfoIcon, W as WarningTriangleIcon, h as ErrorTriangleIcon, i as CheckCircledIcon } from './index-BsH_egEe.js';

package/lib/store.js

@@ -1,4 +1,4 @@
-export { u as useDarkMode, a as useDrawerStore, b as useEntityStore, c as useFilterStore, d as useInstrumentStore, e as useModalStore, f as useNotificationStore, g as usePendingStore, h as useSelectedStore, i as useSetupStore } from './index-Bdimyacn.js';
+export { u as useDarkMode, a as useDrawerStore, b as useEntityStore, c as useFilterStore, d as useInstrumentStore, e as useModalStore, f as useNotificationStore, g as usePendingStore, h as useSelectedStore, i as useSetupStore } from './index-BazfJyRh.js';
 import './types.js';
 import 'react';
 import 'styled-components';

package/lib/theme.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { u as useDarkMode, l as animations } from './index-Bdimyacn.js';
+import { u as useDarkMode, l as animations } from './index-BazfJyRh.js';
 import { ThemeProvider, useTheme } from 'styled-components';
 import './types.js';
 

package/lib/{useSourceSelectionFormData-LmLZzJyk.js → useSourceSelectionFormData-_2PggiXn.js}

@@ -1,11 +1,11 @@
 import { ActionType, StatusType, AddNodeTypes, EntityTypes, FieldTypes } from './types.js';
 import { useState, useEffect, useCallback } from 'react';
-import { f as useNotificationStore, e as useModalStore, a as useDrawerStore, b as useEntityStore, i as useSetupStore } from './index-Bdimyacn.js';
+import { f as useNotificationStore, e as useModalStore, a as useDrawerStore, b as useEntityStore, i as useSetupStore } from './index-BazfJyRh.js';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import './index-jPxFCX-5.js';
+import './index-BFRz3l_w.js';
 import { F as FORM_ALERTS } from './index-C_0J5P9M.js';
-import { b as useGenericForm } from './useTransition-WRhgkuG2.js';
+import { b as useGenericForm } from './useTransition-bXMKBfST.js';
 import { g as getIdFromSseTarget } from './index-7-KCQK-x.js';
 
 const INITIAL$2 = {

package/lib/{useTransition-WRhgkuG2.js → useTransition-bXMKBfST.js}

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import './index-jPxFCX-5.js';
-import { f as useNotificationStore } from './index-Bdimyacn.js';
+import './index-BFRz3l_w.js';
+import { f as useNotificationStore } from './index-BazfJyRh.js';
 import { CodeAttributesKeyTypes, PayloadCollectionKeyTypes } from './types.js';
 import styled from 'styled-components';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "author": "Odigos",
   "repository": {
     "type": "git",