@odigos/ui-kit 0.0.16 → 0.0.18

package/lib/functions.js

@@ -1,15 +1,15 @@
-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-CKtl8KxE.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-DiEc-llU.js';
-export { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-CLOUNx6Z.js';
-export { j as getEntityId, k as isTimeElapsed } from './index-IvGLauAo.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-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 { 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 'react';
 import 'styled-components';
-import './index-BGlk5VhF.js';
+import './index-DGel4E-Z.js';
 import './theme.js';
-import './index-DM8CZWtL.js';
+import './index-BsH_egEe.js';
 import './index-DB8Djrsy.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {

package/lib/hooks.js

@@ -1,13 +1,13 @@
-export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-R_uK7F7W.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-hWYVBuSi.js';
+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';
 import './types.js';
 import 'react';
-import './index-IvGLauAo.js';
+import './index-Bdimyacn.js';
 import 'styled-components';
 import './index-BZS1ijMm.js';
-import './index-lL1o2K_5.js';
-import './index-CLOUNx6Z.js';
-import './index-BGlk5VhF.js';
+import './index-jPxFCX-5.js';
+import './index-BlJU2fGe.js';
+import './index-DGel4E-Z.js';
 import './theme.js';
 import './index-C_0J5P9M.js';
 import './index-7-KCQK-x.js';

package/lib/icons.js

@@ -1,11 +1,11 @@
-export { A as AddClusterInfoIcon, C as CodeAttributesIcon, D as DeleteAttributeIcon, K as K8sLogo, O as OdigosLogo, a as PayloadCollectionIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, S as SamplerIcon } from './index-BGlk5VhF.js';
-export { C as CrossCircledIcon, E as EditIcon, F as FilterIcon, a as FolderIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, b as OverviewIcon, S as SlackLogo, T as TerminalIcon } from './index-DH2zLaey.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, I as ImageErrorIcon, 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-D_Qn2U89.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 { 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';
-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, 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-DM8CZWtL.js';
-import './index-IvGLauAo.js';
+import './index-Bdimyacn.js';
 import './types.js';
 import 'styled-components';
 
@@ -23,6 +23,13 @@ const CommandIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9.83333 14.6667H7.16667C5.69391 14.6667 4.5 15.8606 4.5 17.3333C4.5 18.8061 5.69391 20 7.16667 20C8.63943 20 9.83333 18.8061 9.83333 17.3333V14.6667ZM9.83333 14.6667H15.1667M9.83333 14.6667V9.33333M15.1667 14.6667H17.8333C19.3061 14.6667 20.5 15.8606 20.5 17.3333C20.5 18.8061 19.3061 20 17.8333 20C16.3606 20 15.1667 18.8061 15.1667 17.3333V14.6667ZM15.1667 14.6667V9.33333M15.1667 9.33333V6.66667C15.1667 5.19391 16.3606 4 17.8333 4C19.3061 4 20.5 5.19391 20.5 6.66667C20.5 8.13943 19.3061 9.33333 17.8333 9.33333H15.1667ZM15.1667 9.33333H9.83333M9.83333 9.33333H7.16667C5.69391 9.33333 4.5 8.13943 4.5 6.66667C4.5 5.19391 5.69391 4 7.16667 4C8.63943 4 9.83333 5.19391 9.83333 6.66667V9.33333Z' })));
 };
 
+const FolderIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size * (18 / 19), height: size, viewBox: '0 0 18 19', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M1.5 7.96504C1.5 6.28488 1.5 5.4448 1.82698 4.80307C2.1146 4.23858 2.57354 3.77964 3.13803 3.49202C3.77976 3.16504 4.61984 3.16504 6.3 3.16504H6.53667C6.88887 3.16504 7.06498 3.16504 7.22483 3.21358C7.36634 3.25656 7.49799 3.32702 7.61225 3.42093C7.74131 3.527 7.83899 3.67353 8.03436 3.96658L8.46564 4.6135C8.66101 4.90655 8.75869 5.05308 8.88775 5.15915C9.00201 5.25306 9.13366 5.32352 9.27517 5.36649C9.43502 5.41504 9.61113 5.41504 9.96333 5.41504H11.7C13.3802 5.41504 14.2202 5.41504 14.862 5.74202C15.4265 6.02964 15.8854 6.48858 16.173 7.05307C16.5 7.6948 16.5 8.53488 16.5 10.215V11.865C16.5 13.5452 16.5 14.3853 16.173 15.027C15.8854 15.5915 15.4265 16.0504 14.862 16.3381C14.2202 16.665 13.3802 16.665 11.7 16.665H6.3C4.61984 16.665 3.77976 16.665 3.13803 16.3381C2.57354 16.0504 2.1146 15.5915 1.82698 15.027C1.5 14.3853 1.5 13.5452 1.5 11.865V7.96504Z' })));
+};
+
 const GoogleCloudStorageLogo = ({ size = 16, fill, rotate = 0, onClick }) => {
     return (React.createElement("svg", { width: size, height: size * (65 / 81), viewBox: '0 0 81 65', xmlns: 'http://www.w3.org/2000/svg', fill: '#ffffff', fillRule: 'evenodd', stroke: '#000000', strokeLinecap: 'round', strokeLinejoin: 'round', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
         React.createElement("defs", null,
@@ -103,4 +110,4 @@ const ErrorRoundIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M7 8.33673V6.00339M7 10.3055V10.3061M12.25 7.97266C12.25 10.8722 9.89949 13.2227 7 13.2227C4.1005 13.2227 1.75 10.8721 1.75 7.97265C1.75 5.07316 4.10051 2.72266 7 2.72266C9.8995 2.72266 12.25 5.07316 12.25 7.97266Z' })));
 };
 
-export { CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MoonIcon, SentryLogo, ServiceMapIcon, SunIcon, TraceViewIcon };
+export { CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, FolderIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MoonIcon, SentryLogo, ServiceMapIcon, SunIcon, TraceViewIcon };

package/lib/{index-D_Qn2U89.js → index-BJxaoI0G.js}

@@ -29,13 +29,6 @@ const ExtendArrowIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M4 5.06934C4.53103 5.80028 5.15354 6.45498 5.85106 7.01644C5.93869 7.08697 6.06131 7.08697 6.14894 7.01644C6.84646 6.45498 7.46897 5.80028 8 5.06934' })));
 };
 
-const ImageErrorIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M17.2 21.0002L19.6 18.6002M19.6 18.6002L22 16.2002M19.6 18.6002L17.2 16.2002M19.6 18.6002L22 21.0002M22 12.1944V11C22 10.6449 22 10.3123 21.9989 10M13.1992 21H10C9.24401 21 8.59006 21 8.01712 20.9893M21.9989 10H21C19.607 10 18.9104 10 18.324 10.0603C12.9031 10.6176 8.61758 14.9031 8.06029 20.324C8.03963 20.5249 8.02605 20.7388 8.01712 20.9893M21.9989 10C21.9912 7.84993 21.9309 6.66397 21.455 5.73005C20.9757 4.78924 20.2108 4.02433 19.27 3.54497C18.2004 3 16.8003 3 14 3H10C7.19974 3 5.79961 3 4.73005 3.54497C3.78924 4.02433 3.02433 4.78924 2.54497 5.73005C2 6.79961 2 8.19974 2 11V13C2 15.8003 2 17.2004 2.54497 18.27C3.02433 19.2108 3.78924 19.9757 4.73005 20.455C5.51086 20.8529 6.46784 20.9603 8.01712 20.9893M7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5Z' })));
-};
-
 const ListIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -135,4 +128,4 @@ const CrossIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M4 12L8 8M8 8L12 4M8 8L4 4M8 8L12 12' })));
 };
 
-export { ArrowIcon as A, CodeIcon as C, ExtendArrowIcon as E, ImageErrorIcon as I, ListIcon as L, MinusIcon as M, NoDataIcon as N, PlusIcon as P, SearchIcon as S, TrashIcon as T, XIcon as X, CopyIcon as a, NotebookIcon as b, SortArrowsIcon as c, EyeClosedIcon as d, EyeOpenIcon as e, CheckIcon as f, CrossIcon as g };
+export { ArrowIcon as A, CodeIcon as C, ExtendArrowIcon as E, ListIcon as L, MinusIcon as M, NoDataIcon as N, PlusIcon as P, SearchIcon as S, TrashIcon as T, XIcon as X, CopyIcon as a, NotebookIcon as b, SortArrowsIcon as c, EyeClosedIcon as d, EyeOpenIcon as e, CheckIcon as f, CrossIcon as g };

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

@@ -1,14 +1,15 @@
 import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment } from 'react';
 import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages, EntityTypes } from './types.js';
-import './index-IvGLauAo.js';
+import './index-Bdimyacn.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-CKtl8KxE.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 { 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, I as ImageErrorIcon, 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-D_Qn2U89.js';
-import { M as MONITORS_OPTIONS } from './index-lL1o2K_5.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-hWYVBuSi.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 ReactDOM from 'react-dom';
+import { I as ImageErrorIcon } from './index-DGel4E-Z.js';
 import require$$0 from 'babel-runtime/helpers/extends';
 import require$$1$1 from 'babel-runtime/core-js/object/get-prototype-of';
 import require$$2 from 'babel-runtime/helpers/classCallCheck';
@@ -16,7 +17,7 @@ import require$$3 from 'babel-runtime/helpers/createClass';
 import require$$4 from 'babel-runtime/helpers/possibleConstructorReturn';
 import require$$5 from 'babel-runtime/helpers/inherits';
 import require$$1 from 'object-assign';
-import { I as InfoIcon } from './index-DM8CZWtL.js';
+import { I as InfoIcon } from './index-BsH_egEe.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -4213,25 +4214,6 @@ 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;
 `;
@@ -4276,16 +4258,12 @@ const Title$b = styled(Text) `
     display: block;
   }
 `;
-const SubTitleWrapper = styled.div `
+const SubTitle$2 = styled(Text) `
   max-width: ${({ $maxWidth }) => $maxWidth}px;
   overflow: hidden;
   white-space: nowrap;
+  text-overflow: ellipsis;
 
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const SubTitle$2 = styled(Text) `
   color: ${({ theme }) => theme.text.grey};
   font-size: 10px;
 `;
@@ -4298,13 +4276,15 @@ const ActionsWrapper = styled.div `
 const HoverText = styled(Text) `
   margin-right: 16px;
 `;
-const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps: { icon, icons, iconSrc, iconSrcs } = {}, visualProps: { status, faded, bgColor, bgColorHover, isActive, monitors, monitorsWithLabels } = {}, checkboxProps: { withCheckbox, isCheckboxDisabled, isChecked, onCheckboxChange } = {}, extendableProps: { withExtend, isExtended, renderExtended } = {}, ...props }) => {
+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 [extend, setExtend] = useState(isExtended || false);
     const [maxWidth, setMaxWidth] = useState(0);
     const [isTitleOverflowed, setIsTitleOverflowed] = useState(false);
+    const [isSubTitleOverflowed, setSubIsTitleOverflowed] = useState(false);
     const containerRef = useRef(null);
     const actionsRef = useRef(null);
     const titleRef = useRef(null);
+    const subTitleRef = useRef(null);
     useEffect(() => {
         if (containerRef.current && actionsRef.current) {
             const containerWidth = containerRef.current.clientWidth;
@@ -4316,28 +4296,17 @@ const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps
         }
     }, []);
     useEffect(() => {
-        const { current } = titleRef;
-        if (current) {
-            const { clientWidth } = current;
-            const marginUp = maxWidth * 1.05; // add 5%
-            const marginDown = maxWidth * 0.95; // subtract 5%
+        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);
         }
-    }, [title, maxWidth]);
-    const renderMonitors = (withSeperator) => {
-        if (!monitors || !monitors.length)
-            return null;
-        return (React.createElement(React.Fragment, null,
-            withSeperator && React.createElement(SubTitle$2, null, '•'),
-            React.createElement(MonitorsIcons, { monitors: monitors, withLabels: monitorsWithLabels, size: 10 })));
-    };
-    const renderActiveStatus = (withSeperator) => {
-        if (typeof isActive !== 'boolean')
-            return null;
-        return (React.createElement(React.Fragment, null,
-            withSeperator && React.createElement(SubTitle$2, null, '•'),
-            React.createElement(Status, { status: isActive ? StatusType.Success : StatusType.Error, size: 10 })));
-    };
+        if (subTitleRef.current) {
+            const { clientWidth } = subTitleRef.current;
+            setSubIsTitleOverflowed(clientWidth < marginUp && clientWidth > marginDown);
+        }
+    }, [title, subTitle, maxWidth]);
     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 },
@@ -4346,10 +4315,8 @@ const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps
             React.createElement(FlexColumn, { "$gap": 4 },
                 React.createElement(Tooltip, { text: isTitleOverflowed ? title : undefined, withIcon: false },
                     React.createElement(Title$b, { ref: titleRef, "$maxWidth": maxWidth }, title)),
-                React.createElement(SubTitleWrapper, { "$maxWidth": maxWidth },
-                    subTitle && React.createElement(SubTitle$2, null, subTitle),
-                    renderMonitors(!!subTitle),
-                    renderActiveStatus(!!monitors?.length))),
+                subTitle && (React.createElement(Tooltip, { text: isSubTitleOverflowed ? subTitle : undefined, withIcon: false },
+                    React.createElement(SubTitle$2, { ref: subTitleRef, "$maxWidth": maxWidth }, subTitle)))),
             React.createElement(ActionsWrapper, { ref: actionsRef },
                 !!hoverText && (React.createElement(ControlledVisibility, null,
                     React.createElement(HoverText, { size: 14, family: 'secondary' }, hoverText))),
@@ -4394,6 +4361,25 @@ 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)};
@@ -4823,7 +4809,7 @@ const Tab = styled(Text) `
   align-items: center;
   gap: 8px;
 `;
-const DrawerHeader = ({ onClose, icon, iconSrc, title, titleTooltip, replaceTitleWith: ReplaceTitleWith, actionButtons = [], tabs }) => {
+const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTitleWith: ReplaceTitleWith, actionButtons = [], tabs }) => {
     const renderReplaceTitleWith = () => {
         if (typeof ReplaceTitleWith === 'function') {
             return React.createElement(ReplaceTitleWith, null);
@@ -4836,7 +4822,7 @@ const DrawerHeader = ({ onClose, icon, iconSrc, title, titleTooltip, replaceTitl
     return (React.createElement(Container$j, null,
         React.createElement(TopRow, null,
             React.createElement(SectionItemsWrapper, null,
-                (!!icon || !!iconSrc) && React.createElement(IconWrapped, { icon: icon, src: iconSrc, alt: 'Drawer Item' }),
+                icons?.length || iconSrcs?.length ? React.createElement(IconGroup, { icons: icons, iconSrcs: iconSrcs, id: `drawer-header-${title}` }) : null,
                 renderReplaceTitleWith() || (React.createElement(Tooltip, { text: titleTooltip, withIcon: true }, title && React.createElement(Title$7, null, title)))),
             React.createElement(SectionItemsWrapper, { "$gap": 2 },
                 actionButtons.map((btn, i) => (React.createElement(ActionButton$1, { key: `header-action-button-${i}`, ...btn }))),

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

@@ -265,6 +265,10 @@ const getEntityId = (item) => {
             kind: item.kind,
         };
     }
+    else if ('name' in item && !!item.name) {
+        // Namespace
+        return item.name;
+    }
     console.warn('getEntityId() - cannot get ID of entity:', item);
     return undefined;
 };

package/lib/{index-CLOUNx6Z.js → index-BlJU2fGe.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, O as OdigosLogo, C as CodeAttributesIcon, a as PayloadCollectionIcon } from './index-BGlk5VhF.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-IvGLauAo.js';
+import './index-Bdimyacn.js';
 import 'styled-components';
 
 const getActionIcon = (type) => {
@@ -22,16 +22,16 @@ const getActionIcon = (type) => {
         [ActionType.ProbabilisticSampler]: SamplerIcon,
         [ActionType.LatencySampler]: SamplerIcon,
     };
-    return LOGOS[type];
+    return LOGOS[type] || ImageErrorIcon;
 };
 
 const getInstrumentationRuleIcon = (type) => {
     const LOGOS = {
         [InstrumentationRuleType.PayloadCollection]: PayloadCollectionIcon,
         [InstrumentationRuleType.CodeAttributes]: CodeAttributesIcon,
-        [InstrumentationRuleType.UnknownType]: OdigosLogo,
+        [InstrumentationRuleType.UnknownType]: ImageErrorIcon,
     };
-    return LOGOS[type];
+    return LOGOS[type] || ImageErrorIcon;
 };
 
 export { getInstrumentationRuleIcon as a, getActionIcon as g };

package/lib/{index-DM8CZWtL.js → index-BsH_egEe.js}

@@ -1,6 +1,15 @@
 import React from 'react';
 import Theme from './theme.js';
 
+const OdigosLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: size, height: size * (431 / 511), viewBox: '0 0 511 431', fill: fill, style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { d: 'M308.491 83.3091V0.0765381H472.573C493.785 0.0765381 511 16.4464 511 36.6589V374.508C511 394.72 493.785 411.09 472.573 411.09H308.491V328.396L454.666 263.762C478.721 253.079 493.708 230.791 493.708 205.583C493.708 180.375 478.721 158.011 454.666 147.405L308.414 83.3859L308.491 83.3091Z' }),
+        React.createElement("path", { d: 'M202.51 327.781V411.014H38.4269C17.2152 411.014 0 394.644 0 374.431V36.5824C0 16.3698 17.2152 0 38.4269 0H202.51V82.6946L56.3338 147.329C32.2786 158.011 17.2921 180.299 17.2921 205.507C17.2921 230.715 32.2786 253.079 56.3338 263.685L202.586 327.704L202.51 327.781Z' }),
+        React.createElement("path", { d: 'M255.462 290.507C302.363 290.507 340.385 252.485 340.385 205.584C340.385 158.682 302.363 120.66 255.462 120.66C208.56 120.66 170.538 158.682 170.538 205.584C170.538 252.485 208.56 290.507 255.462 290.507Z' })));
+};
+
 const KafkaLogo = ({ size = 16, fill, rotate = 0, onClick }) => {
     return (React.createElement("svg", { width: size * (256 / 416), height: size, viewBox: '0 0 256 416', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
         React.createElement("path", { fill: fill || '#231f20', d: 'M201.816 230.216c-16.186 0-30.697 7.171-40.634 18.461l-25.463-18.026c2.703-7.442 4.255-15.433 4.255-23.797 0-8.219-1.498-16.076-4.112-23.408l25.406-17.835c9.936 11.233 24.409 18.365 40.548 18.365 29.875 0 54.184-24.305 54.184-54.184 0-29.879-24.309-54.184-54.184-54.184-29.875 0-54.184 24.305-54.184 54.184 0 5.348.808 10.505 2.258 15.389l-25.423 17.844c-10.62-13.175-25.911-22.374-43.333-25.182v-30.64c24.544-5.155 43.037-26.962 43.037-53.019C124.171 24.305 99.862 0 69.987 0 40.112 0 15.803 24.305 15.803 54.184c0 25.708 18.014 47.246 42.067 52.769v31.038C25.044 143.753 0 172.401 0 206.854c0 34.621 25.292 63.374 58.355 68.94v32.774c-24.299 5.341-42.552 27.011-42.552 52.894 0 29.879 24.309 54.184 54.184 54.184 29.875 0 54.184-24.305 54.184-54.184 0-25.883-18.253-47.553-42.552-52.894v-32.775a69.965 69.965 0 0 0 42.6-24.776l25.633 18.143c-1.423 4.84-2.22 9.946-2.22 15.24 0 29.879 24.309 54.184 54.184 54.184 29.875 0 54.184-24.305 54.184-54.184 0-29.879-24.309-54.184-54.184-54.184zm0-126.695c14.487 0 26.27 11.788 26.27 26.271s-11.783 26.27-26.27 26.27-26.27-11.787-26.27-26.27c0-14.483 11.783-26.271 26.27-26.271zm-158.1-49.337c0-14.483 11.784-26.27 26.271-26.27s26.27 11.787 26.27 26.27c0 14.483-11.783 26.27-26.27 26.27s-26.271-11.787-26.271-26.27zm52.541 307.278c0 14.483-11.783 26.27-26.27 26.27s-26.271-11.787-26.271-26.27c0-14.483 11.784-26.27 26.271-26.27s26.27 11.787 26.27 26.27zm-26.272-117.97c-20.205 0-36.642-16.434-36.642-36.638 0-20.205 16.437-36.642 36.642-36.642 20.204 0 36.641 16.437 36.641 36.642 0 20.204-16.437 36.638-36.641 36.638zm131.831 67.179c-14.487 0-26.27-11.788-26.27-26.271s11.783-26.27 26.27-26.27 26.27 11.787 26.27 26.27c0 14.483-11.783 26.271-26.27 26.271z' })));
@@ -463,4 +472,4 @@ const WarningTriangleIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M8 8.66673V6.00006M8 10.9167V10.9175M7.07337 2.18915C7.66595 1.93695 8.33405 1.93695 8.92662 2.18915C10.6942 2.94145 14.8697 9.61453 14.7474 11.3981C14.6994 12.0972 14.3529 12.7408 13.7982 13.1614C12.323 14.2795 3.67698 14.2795 2.20185 13.1614C1.64705 12.7408 1.3006 12.0972 1.25263 11.3981C1.13026 9.61453 5.30575 2.94145 7.07337 2.18915Z' })));
 };
 
-export { CPlusPlusLogo as C, DotnetLogo as D, ElixirLogo as E, GoLogo as G, InfoIcon as I, JavaLogo as J, KafkaLogo as K, LogsIcon as L, MysqlLogo as M, NginxLogo as N, PostgresLogo as P, RedisLogo as R, SwiftLogo as S, TracesIcon as T, WarningTriangleIcon as W, RustLogo as a, RubyLogo as b, PhpLogo as c, CSharpLogo as d, PythonLogo as e, NodejsLogo as f, MetricsIcon as g, ErrorTriangleIcon as h, CheckCircledIcon as i };
+export { CPlusPlusLogo as C, DotnetLogo as D, ElixirLogo as E, GoLogo as G, InfoIcon as I, JavaLogo as J, KafkaLogo as K, LogsIcon as L, MysqlLogo as M, NginxLogo as N, OdigosLogo as O, PostgresLogo as P, RedisLogo as R, SwiftLogo as S, TracesIcon as T, WarningTriangleIcon as W, RustLogo as a, RubyLogo as b, PhpLogo as c, CSharpLogo as d, PythonLogo as e, NodejsLogo as f, MetricsIcon as g, ErrorTriangleIcon as h, CheckCircledIcon as i };

package/lib/{index-DiEc-llU.js → index-CT0qszYw.js}

@@ -1,11 +1,11 @@
 import { StatusType, OtherStatus, DestinationTypes, EntityTypes, PlatformType } from './types.js';
-import { a as getProgrammingLanguageIcon } from './index-CKtl8KxE.js';
+import { a as getProgrammingLanguageIcon } from './index-CVs2NNg9.js';
 import 'react';
-import './index-IvGLauAo.js';
+import './index-Bdimyacn.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 } from './index-DM8CZWtL.js';
-import { O as OdigosLogo, K as K8sLogo } from './index-BGlk5VhF.js';
+import { K as KafkaLogo, O as OdigosLogo } from './index-BsH_egEe.js';
+import { K as K8sLogo } from './index-DGel4E-Z.js';
 
 const compareCondition = (renderCondition, fields) => {
     if (!renderCondition || !renderCondition.length)
@@ -196,6 +196,11 @@ const getEntityLabel = (entity, entityType, options) => {
             type = destination.destinationType.displayName;
             name = destination.name;
             break;
+        case EntityTypes.Namespace:
+            const namespace = entity;
+            type = namespace.name;
+            name = namespace.name;
+            break;
     }
     if (extended)
         return type + (name && name !== type ? ` (${name})` : '');

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

@@ -1,9 +1,9 @@
 import { ProgrammingLanguages, SignalType, StatusType } from './types.js';
 import 'react';
-import './index-IvGLauAo.js';
+import './index-Bdimyacn.js';
 import 'styled-components';
-import { O as OdigosLogo } from './index-BGlk5VhF.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, I as InfoIcon, W as WarningTriangleIcon, h as ErrorTriangleIcon, i as CheckCircledIcon } from './index-DM8CZWtL.js';
+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';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);
@@ -90,13 +90,13 @@ const getProgrammingLanguageIcon = (language) => {
         [ProgrammingLanguages.Postgres]: PostgresLogo,
         [ProgrammingLanguages.Redis]: RedisLogo,
         [ProgrammingLanguages.Kafka]: KafkaLogo,
-        [ProgrammingLanguages.Ignored]: OdigosLogo, // TODO: good icon
-        [ProgrammingLanguages.Unknown]: OdigosLogo, // TODO: good icon
-        [ProgrammingLanguages.Processing]: OdigosLogo, // TODO: good icon
-        [ProgrammingLanguages.NoContainers]: OdigosLogo, // TODO: good icon
-        [ProgrammingLanguages.NoRunningPods]: OdigosLogo, // TODO: good icon
+        [ProgrammingLanguages.Ignored]: ImageErrorIcon, // TODO: good icon
+        [ProgrammingLanguages.Unknown]: ImageErrorIcon, // TODO: good icon
+        [ProgrammingLanguages.Processing]: ImageErrorIcon, // TODO: good icon
+        [ProgrammingLanguages.NoContainers]: ImageErrorIcon, // TODO: good icon
+        [ProgrammingLanguages.NoRunningPods]: ImageErrorIcon, // TODO: good icon
     };
-    return LOGOS[language];
+    return LOGOS[language] || ImageErrorIcon;
 };
 
 const getMonitorIcon = (type) => {

package/lib/{index-BGlk5VhF.js → index-DGel4E-Z.js}

@@ -36,13 +36,11 @@ const SamplerIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M5.67367 5.67497H5.687M10.515 3.91532L12.1293 5.52965C13.0067 6.40707 13.4454 6.84578 13.6851 7.31618C14.1695 8.2669 14.1695 9.39207 13.6851 10.3428C13.4454 10.8132 13.0067 11.2519 12.1293 12.1293C11.2519 13.0067 10.8132 13.4454 10.3428 13.6851C9.39207 14.1695 8.2669 14.1695 7.31618 13.6851C6.84578 13.4454 6.40707 13.0067 5.52965 12.1293L3.91532 10.515C3.17317 9.77284 2.8021 9.40176 2.54483 8.96668C2.31682 8.58108 2.15521 8.15991 2.06673 7.72076C1.9669 7.22527 1.99448 6.70122 2.04965 5.65312L2.07845 5.10584C2.13195 4.0893 2.1587 3.58104 2.36993 3.18719C2.55598 2.84028 2.84028 2.55598 3.18719 2.36993C3.58104 2.1587 4.0893 2.13195 5.10584 2.07845L5.65312 2.04965C6.70122 1.99448 7.22527 1.9669 7.72076 2.06673C8.15991 2.15521 8.58108 2.31682 8.96668 2.54483C9.40176 2.8021 9.77284 3.17317 10.515 3.91532ZM6.32633 5.65853C6.32633 6.02672 6.02786 6.3252 5.65967 6.3252C5.29148 6.3252 4.993 6.02672 4.993 5.65853C4.993 5.29034 5.29148 4.99186 5.65967 4.99186C6.02786 4.99186 6.32633 5.29034 6.32633 5.65853Z' })));
 };
 
-const OdigosLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
+const ImageErrorIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: size, height: size * (431 / 511), viewBox: '0 0 511 431', fill: fill, style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { d: 'M308.491 83.3091V0.0765381H472.573C493.785 0.0765381 511 16.4464 511 36.6589V374.508C511 394.72 493.785 411.09 472.573 411.09H308.491V328.396L454.666 263.762C478.721 253.079 493.708 230.791 493.708 205.583C493.708 180.375 478.721 158.011 454.666 147.405L308.414 83.3859L308.491 83.3091Z' }),
-        React.createElement("path", { d: 'M202.51 327.781V411.014H38.4269C17.2152 411.014 0 394.644 0 374.431V36.5824C0 16.3698 17.2152 0 38.4269 0H202.51V82.6946L56.3338 147.329C32.2786 158.011 17.2921 180.299 17.2921 205.507C17.2921 230.715 32.2786 253.079 56.3338 263.685L202.586 327.704L202.51 327.781Z' }),
-        React.createElement("path", { d: 'M255.462 290.507C302.363 290.507 340.385 252.485 340.385 205.584C340.385 158.682 302.363 120.66 255.462 120.66C208.56 120.66 170.538 158.682 170.538 205.584C170.538 252.485 208.56 290.507 255.462 290.507Z' })));
+    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M17.2 21.0002L19.6 18.6002M19.6 18.6002L22 16.2002M19.6 18.6002L17.2 16.2002M19.6 18.6002L22 21.0002M22 12.1944V11C22 10.6449 22 10.3123 21.9989 10M13.1992 21H10C9.24401 21 8.59006 21 8.01712 20.9893M21.9989 10H21C19.607 10 18.9104 10 18.324 10.0603C12.9031 10.6176 8.61758 14.9031 8.06029 20.324C8.03963 20.5249 8.02605 20.7388 8.01712 20.9893M21.9989 10C21.9912 7.84993 21.9309 6.66397 21.455 5.73005C20.9757 4.78924 20.2108 4.02433 19.27 3.54497C18.2004 3 16.8003 3 14 3H10C7.19974 3 5.79961 3 4.73005 3.54497C3.78924 4.02433 3.02433 4.78924 2.54497 5.73005C2 6.79961 2 8.19974 2 11V13C2 15.8003 2 17.2004 2.54497 18.27C3.02433 19.2108 3.78924 19.9757 4.73005 20.455C5.51086 20.8529 6.46784 20.9603 8.01712 20.9893M7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5Z' })));
 };
 
 const K8sLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
@@ -66,4 +64,4 @@ const PayloadCollectionIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M7.99967 7.33333V11.3333M7.99967 11.3333C7.92987 11.3333 7.86007 11.31 7.80254 11.2634C7.37701 10.9186 6.99534 10.5224 6.66634 10.0837M7.99967 11.3333C8.06947 11.3333 8.13927 11.31 8.19681 11.2634C8.62234 10.9186 9.00401 10.5224 9.33301 10.0837M1.33301 6.26667C1.33301 4.77319 1.33301 4.02645 1.62365 3.45603C1.87932 2.95426 2.28727 2.54631 2.78903 2.29065C3.35946 2 4.1062 2 5.59967 2H5.81005C6.12312 2 6.27965 2 6.42174 2.04315C6.54753 2.08135 6.66455 2.14398 6.76614 2.22745C6.88081 2.32175 6.96767 2.45199 7.14134 2.71248L7.52467 3.28752C7.69834 3.54801 7.78521 3.67825 7.89987 3.77255C8.00147 3.85602 8.11847 3.91865 8.24427 3.95685C8.38634 4 8.54287 4 8.85594 4H10.3997C11.8931 4 12.6399 4 13.2103 4.29065C13.7121 4.54631 14.12 4.95426 14.3757 5.45603C14.6663 6.02645 14.6663 6.7732 14.6663 8.26667V9.73333C14.6663 11.2268 14.6663 11.9735 14.3757 12.544C14.12 13.0457 13.7121 13.4537 13.2103 13.7093C12.6399 14 11.8931 14 10.3997 14H5.59967C4.1062 14 3.35946 14 2.78903 13.7093C2.28727 13.4537 1.87932 13.0457 1.62365 12.544C1.33301 11.9735 1.33301 11.2268 1.33301 9.73333V6.26667Z' })));
 };
 
-export { AddClusterInfoIcon as A, CodeAttributesIcon as C, DeleteAttributeIcon as D, K8sLogo as K, OdigosLogo as O, PiiMaskingIcon as P, RenameAttributeIcon as R, SamplerIcon as S, PayloadCollectionIcon as a };
+export { AddClusterInfoIcon as A, CodeAttributesIcon as C, DeleteAttributeIcon as D, ImageErrorIcon as I, K8sLogo as K, PiiMaskingIcon as P, RenameAttributeIcon as R, SamplerIcon as S, PayloadCollectionIcon as a };

package/lib/{index-DH2zLaey.js → index-KOMAv-TS.js}

@@ -35,13 +35,6 @@ const FilterIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M5.33341 8H10.6667M7.33341 12H8.66675M2.66675 4H13.3334' })));
 };
 
-const FolderIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (18 / 19), height: size, viewBox: '0 0 18 19', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M1.5 7.96504C1.5 6.28488 1.5 5.4448 1.82698 4.80307C2.1146 4.23858 2.57354 3.77964 3.13803 3.49202C3.77976 3.16504 4.61984 3.16504 6.3 3.16504H6.53667C6.88887 3.16504 7.06498 3.16504 7.22483 3.21358C7.36634 3.25656 7.49799 3.32702 7.61225 3.42093C7.74131 3.527 7.83899 3.67353 8.03436 3.96658L8.46564 4.6135C8.66101 4.90655 8.75869 5.05308 8.88775 5.15915C9.00201 5.25306 9.13366 5.32352 9.27517 5.36649C9.43502 5.41504 9.61113 5.41504 9.96333 5.41504H11.7C13.3802 5.41504 14.2202 5.41504 14.862 5.74202C15.4265 6.02964 15.8854 6.48858 16.173 7.05307C16.5 7.6948 16.5 8.53488 16.5 10.215V11.865C16.5 13.5452 16.5 14.3853 16.173 15.027C15.8854 15.5915 15.4265 16.0504 14.862 16.3381C14.2202 16.665 13.3802 16.665 11.7 16.665H6.3C4.61984 16.665 3.77976 16.665 3.13803 16.3381C2.57354 16.0504 2.1146 15.5915 1.82698 15.027C1.5 14.3853 1.5 13.5452 1.5 11.865V7.96504Z' })));
-};
-
 const KeyIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -89,4 +82,4 @@ const CrossCircledIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.75049 10.0005L8.75049 8.00049M8.75049 8.00049L10.7505 6.00049M8.75049 8.00049L6.75049 6.00049M8.75049 8.00049L10.7505 10.0005M8.75039 14.1004C5.38145 14.1004 2.65039 11.3693 2.65039 8.00039C2.65039 4.63145 5.38145 1.90039 8.75039 1.90039C12.1193 1.90039 14.8504 4.63145 14.8504 8.00039C14.8504 11.3693 12.1193 14.1004 8.75039 14.1004Z' })));
 };
 
-export { CrossCircledIcon as C, EditIcon as E, FilterIcon as F, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, SlackLogo as S, TerminalIcon as T, FolderIcon as a, OverviewIcon as b };
+export { CrossCircledIcon as C, EditIcon as E, FilterIcon as F, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, SlackLogo as S, TerminalIcon as T, OverviewIcon as a };

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

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

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-IvGLauAo.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-Bdimyacn.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-IvGLauAo.js';
+import { u as useDarkMode, l as animations } from './index-Bdimyacn.js';
 import { ThemeProvider, useTheme } from 'styled-components';
 import './types.js';
 

package/lib/{useSourceSelectionFormData-R_uK7F7W.js → useSourceSelectionFormData-LmLZzJyk.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-IvGLauAo.js';
+import { f as useNotificationStore, e as useModalStore, a as useDrawerStore, b as useEntityStore, i as useSetupStore } from './index-Bdimyacn.js';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import './index-lL1o2K_5.js';
+import './index-jPxFCX-5.js';
 import { F as FORM_ALERTS } from './index-C_0J5P9M.js';
-import { b as useGenericForm } from './useTransition-hWYVBuSi.js';
+import { b as useGenericForm } from './useTransition-WRhgkuG2.js';
 import { g as getIdFromSseTarget } from './index-7-KCQK-x.js';
 
 const INITIAL$2 = {

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import './index-lL1o2K_5.js';
-import { f as useNotificationStore } from './index-IvGLauAo.js';
+import './index-jPxFCX-5.js';
+import { f as useNotificationStore } from './index-Bdimyacn.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.16",
+  "version": "0.0.18",
   "author": "Odigos",
   "repository": {
     "type": "git",

package/lib/components/auto-complete-input/auto-complete-input.stories.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { StoryFn } from '@storybook/react';
-import { type AutocompleteInputProps } from '.';
-declare const _default: {
-    title: string;
-    component: React.FC<AutocompleteInputProps>;
-};
-export default _default;
-export declare const Default: StoryFn<AutocompleteInputProps>;

package/lib/components/badge/badge.stories.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { StoryObj } from '@storybook/react';
-import { type BadgeProps } from '.';
-declare const _default: {
-    title: string;
-    component: React.FC<BadgeProps>;
-};
-export default _default;
-export declare const Default: StoryObj<BadgeProps>;
-export declare const DefaultFilled: StoryObj<BadgeProps>;
-export declare const StatusSuccess: StoryObj<BadgeProps>;
-export declare const StatusError: StoryObj<BadgeProps>;
-export declare const StatusWarn: StoryObj<BadgeProps>;

package/lib/components/button/button.stories.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { StoryFn } from '@storybook/react';
-import { type ButtonProps } from '.';
-declare const _default: {
-    title: string;
-    component: React.FC<ButtonProps>;
-};
-export default _default;
-export declare const Default: StoryFn<ButtonProps>;

package/lib/components/cancel-warning/cancel-warning.stories.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { StoryFn } from '@storybook/react';
-import { type CancelWarningProps } from '.';
-declare const _default: {
-    title: string;
-    component: React.FC<CancelWarningProps>;
-};
-export default _default;
-export declare const Default: StoryFn<CancelWarningProps>;