@odigos/ui-kit 0.0.67 → 0.0.69

package/lib/hooks.js

@@ -1,10 +1,10 @@
 import { ActionKeyTypes, ActionType, StatusType, EntityTypes, FieldTypes } from './types.js';
-import { V as useNotificationStore, F as FORM_ALERTS, O as useDrawerStore, W as useEntityStore, Y as useDataStreamStore, _ as useSetupStore } from './index-bd48e6e2.js';
+import { V as useNotificationStore, F as FORM_ALERTS, O as useDrawerStore, W as useEntityStore, Y as useDataStreamStore, _ as useSetupStore } from './index-8fc2f11e.js';
 import { useState, useEffect, useMemo } from 'react';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
-import { i as useGenericForm } from './useTransition-c2aef0e4.js';
-export { c as useClickNode, b as useContainerSize, h as useCopy, e as useInstrumentationRuleFormData, u as useKeyDown, a as useOnClickOutside, d as usePopup, g as useTimeAgo, f as useTransition } from './useTransition-c2aef0e4.js';
+import { i as useGenericForm } from './useTransition-26bd4722.js';
+export { c as useClickNode, b as useContainerSize, h as useCopy, e as useInstrumentationRuleFormData, u as useKeyDown, a as useOnClickOutside, d as usePopup, g as useTimeAgo, f as useTransition } from './useTransition-26bd4722.js';
 import { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
 
 const INITIAL$2 = {

package/lib/icons.js

@@ -1,10 +1,10 @@
-import { T as Theme } from './index-bd48e6e2.js';
-export { f as AddClusterInfoIcon, n as CPlusPlusLogo, o as CSharpLogo, C as CodeAttributesIcon, l as CustomInstrumentationIcon, h as DeleteAttributeIcon, p as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, j as ImageErrorIcon, J as JavaLogo, K as K8sLogo, k as KafkaLogo, q as MysqlLogo, N as NginxLogo, r as NodejsLogo, m as PayloadCollectionIcon, s as PhpLogo, P as PiiMaskingIcon, t as PostgresLogo, u as PythonLogo, v as RedisLogo, R as RenameAttributeIcon, w as RubyLogo, x as RustLogo, i as SamplerIcon, y as SwiftLogo } from './index-bd48e6e2.js';
-export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-50101bec.js';
-export { A as ArrowIcon, C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, G as GearIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RefreshLeftArrowIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-c1df4281.js';
+import { T as Theme } from './index-8fc2f11e.js';
+export { f as AddClusterInfoIcon, n as CPlusPlusLogo, o as CSharpLogo, C as CodeAttributesIcon, l as CustomInstrumentationIcon, h as DeleteAttributeIcon, p as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, j as ImageErrorIcon, J as JavaLogo, K as K8sLogo, k as KafkaLogo, q as MysqlLogo, N as NginxLogo, r as NodejsLogo, m as PayloadCollectionIcon, s as PhpLogo, P as PiiMaskingIcon, t as PostgresLogo, u as PythonLogo, v as RedisLogo, R as RenameAttributeIcon, w as RubyLogo, x as RustLogo, i as SamplerIcon, y as SwiftLogo } from './index-8fc2f11e.js';
+export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-89b23a82.js';
+export { A as ArrowIcon, C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, G as GearIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RefreshLeftArrowIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-35e207a1.js';
 import React from 'react';
-export { h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-391844c6.js';
-export { a3 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AwsCloudwatchLogo, d as AwsS3Logo, e as AwsXrayLogo, f as AxiomLogo, B as BetterStackLogo, g as BlobStorageLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, a4 as DestinationsIcon, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, G as GigapipeLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, a5 as NamespacesIcon, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, F as OpenTelemetryLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, T as QuickwitLogo, a6 as RulesIcon, U as SeqLogo, W as SignozLogo, a7 as SourcesIcon, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, V as VmLogo } from './index-acc7c7dd.js';
+export { h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-fed7fc91.js';
+export { a3 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AwsCloudwatchLogo, d as AwsS3Logo, e as AwsXrayLogo, f as AxiomLogo, B as BetterStackLogo, g as BlobStorageLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, a4 as DestinationsIcon, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, G as GigapipeLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, a5 as NamespacesIcon, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, F as OpenTelemetryLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, T as QuickwitLogo, a6 as RulesIcon, U as SeqLogo, W as SignozLogo, a7 as SourcesIcon, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, V as VmLogo } from './index-5102bee6.js';
 import './types.js';
 import 'styled-components';
 

package/lib/{index-58440c5c.js → index-281d9862.js}

@@ -1,8 +1,8 @@
 import { StatusType, OtherStatus, SignalType } from './types.js';
 import 'react';
-import './index-bd48e6e2.js';
+import './index-8fc2f11e.js';
 import 'styled-components';
-import { L as LogsIcon, M as MetricsIcon, T as TracesIcon, C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon, I as InfoIcon, O as OdigosLogo } from './index-50101bec.js';
+import { L as LogsIcon, M as MetricsIcon, T as TracesIcon, C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon, I as InfoIcon, O as OdigosLogo } from './index-89b23a82.js';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);

package/lib/{index-c1df4281.js → index-35e207a1.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-bd48e6e2.js';
+import { T as Theme } from './index-8fc2f11e.js';
 
 const OdigosLogoText = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-acc7c7dd.js → index-5102bee6.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-bd48e6e2.js';
+import { T as Theme } from './index-8fc2f11e.js';
 
 const VmLogo = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();

package/lib/{index-f2da9ad4.js → index-728cf83d.js}

@@ -1,13 +1,13 @@
-import React, { useState, useEffect, useRef, forwardRef, useMemo, createElement, useCallback, Fragment, createContext, memo, useContext, useLayoutEffect } from 'react';
-import { T as Theme, B as BUTTON_TEXTS, j as ImageErrorIcon, M as MONITORS_OPTIONS, a1 as styleInject, U as usePendingStore, $ as useSelectedStore, Z as useInstrumentStore, Q as useActiveNodeStore, V as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, e as getProgrammingLanguageIcon } from './index-bd48e6e2.js';
+import React, { useState, useEffect, useRef, forwardRef, useMemo, Fragment, createElement, useCallback, createContext, memo, useContext, useLayoutEffect } from 'react';
+import { T as Theme, B as BUTTON_TEXTS, j as ImageErrorIcon, M as MONITORS_OPTIONS, a1 as styleInject, U as usePendingStore, $ as useSelectedStore, Z as useInstrumentStore, Q as useActiveNodeStore, V as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, e as getProgrammingLanguageIcon } from './index-8fc2f11e.js';
 import styled, { css } from 'styled-components';
-import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon } from './index-391844c6.js';
+import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon } from './index-fed7fc91.js';
 import { StatusType, OtherStatus, EntityTypes, NodeTypes, AddNodeTypes, EdgeTypes, ProgrammingLanguages, IntrumentationStatus, SortDirection, InputTypes, FieldTypes } from './types.js';
 import { s as safeJsonParse, i as isEmpty } from './index-5e5f7bda.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isStringABoolean, p as parseBooleanFromString, d as isValidVersion, h as splitCamelString, e as parseJsonStringToPrettyString, n as numbersOnly } from './index-58440c5c.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isStringABoolean, p as parseBooleanFromString, d as isValidVersion, h as splitCamelString, e as parseJsonStringToPrettyString, n as numbersOnly } from './index-281d9862.js';
 import ReactDOM, { createPortal } from 'react-dom';
-import { d as usePopup, h as useCopy, c as useClickNode, i as useGenericForm, b as useContainerSize, f as useTransition, u as useKeyDown, a as useOnClickOutside } from './useTransition-c2aef0e4.js';
-import { I as InfoIcon } from './index-50101bec.js';
+import { d as usePopup, h as useCopy, c as useClickNode, i as useGenericForm, b as useContainerSize, f as useTransition, u as useKeyDown, a as useOnClickOutside } from './useTransition-26bd4722.js';
+import { I as InfoIcon } from './index-89b23a82.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -362,7 +362,7 @@ const Container$G = styled.div `
   max-width: ${({ $maxWidth }) => ($maxWidth !== undefined ? $maxWidth : 'unset')};
   width: ${({ $width }) => ($width !== undefined ? $width : 'unset')};
 
-  ${({ $asPortal }) => $asPortal && `pointer-events: none;`}
+  ${({ $asPortal, $withPointerEvents }) => $asPortal && !$withPointerEvents && `pointer-events: none;`}
 `;
 const Header$3 = styled.div `
   padding: ${({ $padding }) => ($padding !== undefined ? $padding : '12px')};
@@ -377,8 +377,8 @@ const Footer$1 = styled.div `
 `;
 const Popup = forwardRef(({ isOpen, asPortal, ...props }, ref) => {
     const Element = useMemo(() => {
-        const { children, top, bottom, left, right, borderRadius, padding, maxWidth, width, header, footer } = props;
-        return (React.createElement(Container$G, { ref: ref, "$top": top, "$bottom": bottom, "$left": left, "$right": right, "$borderRadius": borderRadius, "$padding": padding, "$maxWidth": maxWidth, "$width": width, "$asPortal": asPortal },
+        const { children, top, bottom, left, right, borderRadius, padding, maxWidth, width, header, footer, withPointerEvents, ...rest } = props;
+        return (React.createElement(Container$G, { ref: ref, "$top": top, "$bottom": bottom, "$left": left, "$right": right, "$borderRadius": borderRadius, "$padding": padding, "$maxWidth": maxWidth, "$width": width, "$asPortal": asPortal, "$withPointerEvents": withPointerEvents, ...rest },
             header && React.createElement(Header$3, { "$padding": padding }, header),
             React.createElement(Body$1, { "$padding": padding }, children),
             footer && React.createElement(Footer$1, { "$padding": padding }, footer)));
@@ -463,15 +463,50 @@ const TextBreakWord = styled(Text) `
   word-break: break-word;
   white-space: pre-wrap;
 `;
+const getLinksFromText = (text) => {
+    const links = text.match(/<a[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/g);
+    return links?.map((link) => {
+        const [_, href, label] = link.split('"');
+        const labelWithoutTags = label.replace('</a>', '').replace('>', '');
+        return {
+            original: link,
+            href,
+            label: labelWithoutTags,
+        };
+    });
+};
+const renderText = (text, theme) => {
+    const links = getLinksFromText(text);
+    links?.forEach((link, i) => {
+        text = text.replace(link.original, `LINK-${i}###`);
+    });
+    const mappedText = text.split(' ').map((word) => {
+        if (word.includes('LINK-')) {
+            const [linkId, postLabel] = word.split('###');
+            const entry = links?.[parseInt(linkId.replace('LINK-', ''))];
+            return (React.createElement(Fragment, { key: word },
+                React.createElement("a", { href: entry?.href, target: '_blank', style: { color: theme.colors.majestic_blue_soft } }, entry?.label),
+                postLabel ? `${postLabel} ` : ''));
+        }
+        return word + ' ';
+    });
+    return { mappedText, hasLinks: !!links?.length };
+};
 const Tooltip = ({ withIcon, titleIcon: TitleIcon, title, text, timestamp, children }) => {
     const theme = Theme.useTheme();
     const { popupRef, popupOpen, setPopupOpen, popupPosition, handlePosition } = usePopup({
         defaultClientHeight: 40,
         defaultClientwidth: Math.min((text?.length || 0) * 7.5, 300),
     });
+    const { mappedText, hasLinks } = useMemo(() => renderText(text || '', theme), [text, theme]);
     const handleMouseEvent = (e) => {
         const { type, clientX, clientY } = e;
-        handlePosition(clientX, clientY);
+        if (hasLinks) {
+            handlePosition(popupPosition.left || clientX, popupPosition.top || clientY);
+        }
+        else {
+            handlePosition(clientX, clientY);
+        }
         setPopupOpen(type !== 'mouseleave');
     };
     if (!text)
@@ -479,14 +514,14 @@ const Tooltip = ({ withIcon, titleIcon: TitleIcon, title, text, timestamp, child
     return (React.createElement(TooltipContainer, { onMouseEnter: handleMouseEvent, onMouseMove: handleMouseEvent, onMouseLeave: handleMouseEvent },
         children,
         withIcon && React.createElement(InfoIcon, null),
-        React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, top: popupPosition.top, left: popupPosition.left, asPortal: true, maxWidth: '270px', borderRadius: '16px', padding: '8px 12px' },
+        React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, top: popupPosition.top, left: popupPosition.left, asPortal: true, withPointerEvents: hasLinks, onMouseEnter: hasLinks ? handleMouseEvent : undefined, maxWidth: '270px', borderRadius: '16px', padding: '8px 12px' },
             React.createElement(Text, { size: 12, color: theme.text.secondary },
                 (!!TitleIcon || !!title) && (React.createElement(FlexRow, { style: { marginBottom: '4px' }, "$gap": 4 },
                     TitleIcon && React.createElement(TitleIcon, { fill: theme.text.secondary, size: 12 }),
                     title && React.createElement(React.Fragment, null,
                         title,
                         "\u00A0-\u00A0"))),
-                React.createElement(TextBreakWord, { size: 12, color: theme.text.info }, text),
+                React.createElement(TextBreakWord, { size: 12, color: theme.text.info }, mappedText),
                 !!timestamp && (React.createElement(Text, { size: 10, color: theme.text.darker_grey, family: 'secondary', style: { marginTop: '8px' } }, new Date(timestamp).toLocaleString()))))));
 };
 
@@ -4844,13 +4879,13 @@ function requireReactJsxRuntime_development () {
 	            return null;
 	          };
 	    React$1 = {
-	      "react-stack-bottom-frame": function (callStackForError) {
+	      react_stack_bottom_frame: function (callStackForError) {
 	        return callStackForError();
 	      }
 	    };
 	    var specialPropKeyWarningShown;
 	    var didWarnAboutElementRef = {};
-	    var unknownOwnerDebugStack = React$1["react-stack-bottom-frame"].bind(
+	    var unknownOwnerDebugStack = React$1.react_stack_bottom_frame.bind(
 	      React$1,
 	      UnknownOwner
 	    )();
@@ -17507,18 +17542,19 @@ const Title$5 = styled(Text) `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  color: ${({ $status, theme }) => ($status ? theme.text[$status] : theme.text.secondary)};
 `;
 const OptionalText = styled(Text) `
   font-size: 12px;
   color: ${({ theme }) => theme.text.darker_grey};
   opacity: 0.8;
 `;
-const FieldLabel = ({ title, required, tooltip, style }) => {
+const FieldLabel = ({ title, required, tooltip, style, status }) => {
     if (!title)
         return null;
     return (React.createElement(Wrapper, { style: style },
         React.createElement(Tooltip, { text: tooltip, withIcon: true },
-            React.createElement(Title$5, null, title),
+            React.createElement(Title$5, { "$status": status }, title),
             !required && React.createElement(OptionalText, null, "(optional)"))));
 };
 
@@ -17543,14 +17579,19 @@ const InputWrapper$2 = styled.div `
       cursor: not-allowed;
       opacity: 0.6;
     `}
-  ${({ $hasError }) => $hasError &&
-    css `
-      border-color: ${({ theme }) => theme.text.error};
-    `}
-  ${({ $isActive }) => $isActive &&
-    css `
-      border-color: ${({ theme }) => theme.colors.secondary};
-    `}
+  ${({ $isActive, $hasError, $status }) => $isActive
+    ? css `
+          border-color: ${({ theme }) => theme.colors.secondary};
+        `
+    : $hasError
+        ? css `
+          border-color: ${({ theme }) => theme.text.error};
+        `
+        : $status
+            ? css `
+          border-color: ${({ theme }) => theme.text[$status]};
+        `
+            : ''}
   &:hover {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
@@ -17612,7 +17653,7 @@ const Button$1 = styled.button `
     cursor: not-allowed;
   }
 `;
-const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, value, onChange, type = InputTypes.Text, name, ...props }) => {
+const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, value, onChange, type = InputTypes.Text, name, status, ...props }) => {
     const theme = Theme.useTheme();
     const isSecret = type === InputTypes.Password;
     const [revealSecret, setRevealSecret] = useState(false);
@@ -17628,8 +17669,8 @@ const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage,
             e.stopPropagation();
     };
     return (React.createElement(Container$g, null,
-        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip }),
-        React.createElement(InputWrapper$2, { "$disabled": props.disabled, "$hasError": hasError || !!errorMessage, "$isActive": !!props.autoFocus },
+        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip, status: status }),
+        React.createElement(InputWrapper$2, { "$disabled": props.disabled, "$hasError": hasError || !!errorMessage, "$isActive": !!props.autoFocus, "$status": status },
             isSecret ? (React.createElement(IconWrapperClickable, { onClick: () => setRevealSecret((prev) => !prev) }, revealSecret ? React.createElement(EyeClosedIcon, { size: 14, fill: theme.text.grey }) : React.createElement(EyeOpenIcon, { size: 14, fill: theme.text.grey }))) : Icon ? (React.createElement(IconWrapper$2, null,
                 React.createElement(Icon, { size: 14, fill: theme.text.grey }))) : null,
             React.createElement(StyledInput, { "data-id": name, type: revealSecret ? InputTypes.Text : type === InputTypes.Number ? InputTypes.Text : type, "$hasIcon": !!Icon || isSecret, name: name, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, ...props }),
@@ -17695,10 +17736,15 @@ const DropdownHeader = styled.div `
           background: transparent;
         `};
 
-  ${({ $hasError }) => $hasError &&
-    css `
-      border-color: ${({ theme }) => theme.text.error};
-    `}
+  ${({ $hasError, $status }) => $hasError
+    ? css `
+          border-color: ${({ theme }) => theme.text.error};
+        `
+    : $status
+        ? css `
+          border-color: ${({ theme }) => theme.text[$status]};
+        `
+        : ''}
 
   &:hover {
     border-color: ${({ $isMulti, $hasSelections, $disabled, theme }) => ($disabled ? 'auto' : $isMulti && $hasSelections ? theme.colors.border : theme.colors.secondary)};
@@ -17709,7 +17755,7 @@ const IconWrapper$1 = styled.div `
   align-items: center;
   gap: 4px;
 `;
-const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeholder, disabled = false, isMulti = false, showSearch = false, required = false, errorMessage, hasError = false, }) => {
+const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeholder, disabled = false, isMulti = false, showSearch = false, required = false, errorMessage, hasError = false, status, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [openUpwards, setOpenUpwards] = useState(false);
     const containerRef = useRef(null);
@@ -17727,9 +17773,9 @@ const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeh
     };
     const arrLen = Array.isArray(value) ? value.length : 0;
     return (React.createElement(RootContainer, { "$disabled": disabled },
-        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip }),
+        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip, status: status }),
         React.createElement(RelativeContainer, { ref: containerRef },
-            React.createElement(DropdownHeader, { "$isOpen": isOpen, "$isMulti": isMulti, "$hasSelections": Array.isArray(value) ? !!value.length : false, "$hasError": !!errorMessage || hasError, "$disabled": disabled, onClick: () => !disabled && toggleOpen() },
+            React.createElement(DropdownHeader, { "$isOpen": isOpen, "$isMulti": isMulti, "$hasSelections": Array.isArray(value) ? !!value.length : false, "$hasError": !!errorMessage || hasError, "$status": status, "$disabled": disabled, onClick: () => !disabled && toggleOpen() },
                 React.createElement(DropdownPlaceholder, { value: value, placeholder: placeholder, onDeselect: onDeselect }),
                 React.createElement(IconWrapper$1, null,
                     isMulti && React.createElement(Badge, { label: arrLen, filled: !!arrLen }),

package/lib/{index-50101bec.js → index-89b23a82.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-bd48e6e2.js';
+import { T as Theme } from './index-8fc2f11e.js';
 
 const OdigosLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-bd48e6e2.js → index-8fc2f11e.js}

@@ -29,8 +29,8 @@ const identity = (arg) => arg;
 function useStore(api, selector = identity) {
   const slice = React.useSyncExternalStore(
     api.subscribe,
-    () => selector(api.getState()),
-    () => selector(api.getInitialState())
+    React.useCallback(() => selector(api.getState()), [api, selector]),
+    React.useCallback(() => selector(api.getInitialState()), [api, selector])
   );
   React.useDebugValue(slice);
   return slice;
@@ -1709,7 +1709,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  -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";
+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 Provider = ({ children }) => {

package/lib/{index-7074fb24.js → index-b3808507.js}

@@ -1,7 +1,7 @@
 import React from 'react';
-import { a3 as WarningModal } from './index-f2da9ad4.js';
+import { a3 as WarningModal } from './index-728cf83d.js';
 import { StatusType, EntityTypes } from './types.js';
-import './index-bd48e6e2.js';
+import './index-8fc2f11e.js';
 import 'styled-components';
 
 const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {

package/lib/{index-42f40e7c.js → index-ed649685.js}

@@ -1,9 +1,9 @@
 import { StatusType, DestinationTypes, EntityTypes, PlatformType } from './types.js';
-import { a as DEFAULT_DATA_STREAM_NAME, e as getProgrammingLanguageIcon, k as KafkaLogo, K as K8sLogo } from './index-bd48e6e2.js';
+import { a as DEFAULT_DATA_STREAM_NAME, e as getProgrammingLanguageIcon, k as KafkaLogo, K as K8sLogo } from './index-8fc2f11e.js';
 import 'react';
 import 'styled-components';
-import { A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, f as AxiomLogo, g as BlobStorageLogo, B as BetterStackLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, c as AwsCloudwatchLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, F as OpenTelemetryLogo, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, G as GigapipeLogo, T as QuickwitLogo, d as AwsS3Logo, U as SeqLogo, W as SignozLogo, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, e as AwsXrayLogo, a5 as NamespacesIcon, a7 as SourcesIcon, a4 as DestinationsIcon, a3 as ActionsIcon, a6 as RulesIcon, V as VmLogo } from './index-acc7c7dd.js';
-import { O as OdigosLogo } from './index-50101bec.js';
+import { A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, f as AxiomLogo, g as BlobStorageLogo, B as BetterStackLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, c as AwsCloudwatchLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, F as OpenTelemetryLogo, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, G as GigapipeLogo, T as QuickwitLogo, d as AwsS3Logo, U as SeqLogo, W as SignozLogo, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, e as AwsXrayLogo, a5 as NamespacesIcon, a7 as SourcesIcon, a4 as DestinationsIcon, a3 as ActionsIcon, a6 as RulesIcon, V as VmLogo } from './index-5102bee6.js';
+import { O as OdigosLogo } from './index-89b23a82.js';
 import { s as safeJsonParse } from './index-5e5f7bda.js';
 
 const compareCondition = (renderCondition, fields) => {

package/lib/{index-391844c6.js → index-fed7fc91.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-bd48e6e2.js';
+import { T as Theme } from './index-8fc2f11e.js';
 
 const CodeIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();

package/lib/snippets.js

@@ -1,15 +1,15 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-f2da9ad4.js';
-export { ai as AddButton, an as AddNode, ao as BaseNode, ak as CopyText, ap as EdgedNode, ag as Flow, aq as FrameNode, ar as HeaderNode, aw as LabeledEdge, as as MapItemNode, at as NoDataNode, al as PodContainer, au as ScrollNode, av as SkeletonNode, am as SourceContainer, ad as nodeConfig } from './index-f2da9ad4.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-728cf83d.js';
+export { ai as AddButton, an as AddNode, ao as BaseNode, ak as CopyText, ap as EdgedNode, ag as Flow, aq as FrameNode, ar as HeaderNode, aw as LabeledEdge, as as MapItemNode, at as NoDataNode, al as PodContainer, au as ScrollNode, av as SkeletonNode, am as SourceContainer, ad as nodeConfig } from './index-728cf83d.js';
 import React from 'react';
-import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-bd48e6e2.js';
-import { E as EditIcon } from './index-391844c6.js';
+import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-8fc2f11e.js';
+import { E as EditIcon } from './index-fed7fc91.js';
 import { StatusType } from './types.js';
 import 'styled-components';
-import { I as InfoIcon } from './index-50101bec.js';
+import { I as InfoIcon } from './index-89b23a82.js';
 import './index-5e5f7bda.js';
-import './index-58440c5c.js';
+import './index-281d9862.js';
 import 'react-dom';
-import './useTransition-c2aef0e4.js';
+import './useTransition-26bd4722.js';
 
 const EditButton = ({ label, onClick, variant = 'tertiary', ...props }) => {
     const theme = Theme.useTheme();

package/lib/store.js

@@ -1,4 +1,4 @@
-export { Q as useActiveNodeStore, a0 as useDarkMode, Y as useDataStreamStore, O as useDrawerStore, W as useEntityStore, X as useFilterStore, Z as useInstrumentStore, z as useModalStore, V as useNotificationStore, U as usePendingStore, $ as useSelectedStore, _ as useSetupStore } from './index-bd48e6e2.js';
+export { Q as useActiveNodeStore, a0 as useDarkMode, Y as useDataStreamStore, O as useDrawerStore, W as useEntityStore, X as useFilterStore, Z as useInstrumentStore, z as useModalStore, V as useNotificationStore, U as usePendingStore, $ as useSelectedStore, _ as useSetupStore } from './index-8fc2f11e.js';
 import 'react';
 import './types.js';
 import 'styled-components';

package/lib/theme.js

@@ -1,4 +1,4 @@
-export { T as default } from './index-bd48e6e2.js';
+export { T as default } from './index-8fc2f11e.js';
 import 'styled-components';
 import 'react';
 import './types.js';

package/lib/types/config/index.d.ts

@@ -1,4 +1,16 @@
 import { ProgrammingLanguages } from '..';
+export declare enum Profile {
+    CodeAttributes = "code-attributes",
+    FullPayloadCollection = "full-payload-collection",
+    DbPayloadCollection = "db-payload-collection",
+    QueryOperationDetector = "query-operation-detector",
+    AllowConcurrentAgents = "allow_concurrent_agents",
+    JavaEbpfInstrumentations = "java-ebpf-instrumentations",
+    JavaNativeInstrumentations = "java-native-instrumentations",
+    SizeS = "size_s",
+    SizeM = "size_m",
+    SizeL = "size_l"
+}
 export declare enum MountMethod {
     VirtualDevice = "VirtualDevice",
     HostPath = "HostPath",
@@ -53,6 +65,7 @@ export interface OdigosConfig {
     imagePrefix: string | null;
     ignoredNamespaces: string[] | null;
     ignoredContainers: string[] | null;
+    profiles: Profile[] | null;
     mountMethod: MountMethod | null;
     agentEnvVarsInjectionMethod: AgentEnvVarsInjectionMethod | null;
     customContainerRuntimeSocketPath: string | null;

package/lib/types.js

@@ -184,6 +184,30 @@ var SortDirection;
     SortDirection["Descending"] = "desc";
 })(SortDirection || (SortDirection = {}));
 
+var Profile;
+(function (Profile) {
+    // CategoryAttributes = 'category-attributes',
+    Profile["CodeAttributes"] = "code-attributes";
+    // CopyScope = 'copy-scope',
+    // HostnameAsPodname = 'hostname-as-podname',
+    Profile["FullPayloadCollection"] = "full-payload-collection";
+    Profile["DbPayloadCollection"] = "db-payload-collection";
+    Profile["QueryOperationDetector"] = "query-operation-detector";
+    // Semconv = 'semconv',
+    // ReduceSpanNameCardinality = 'reduce-span-name-cardinality',
+    Profile["AllowConcurrentAgents"] = "allow_concurrent_agents";
+    Profile["JavaEbpfInstrumentations"] = "java-ebpf-instrumentations";
+    Profile["JavaNativeInstrumentations"] = "java-native-instrumentations";
+    // LegacyDotnetInstrumentation = 'legacy-dotnet-instrumentation',
+    // MountMethodK8sHostPath = 'mount-method-k8s-host-path',
+    // MountMethodK8sVirtualDevice = 'mount-method-k8s-virtual-device',
+    // PodManifestEnvVarInjection = 'pod-manifest-env-var-injection',
+    // DisableGin = 'disable-gin',
+    // SmallBatches = 'small-batches',
+    Profile["SizeS"] = "size_s";
+    Profile["SizeM"] = "size_m";
+    Profile["SizeL"] = "size_l";
+})(Profile || (Profile = {}));
 var MountMethod;
 (function (MountMethod) {
     MountMethod["VirtualDevice"] = "VirtualDevice";
@@ -340,4 +364,4 @@ var K8sResourceKind;
     K8sResourceKind["CronJob"] = "CronJob";
 })(K8sResourceKind || (K8sResourceKind = {}));
 
-export { ActionCategory, ActionKeyTypes, ActionType, AddNodeTypes, AgentEnvVarsInjectionMethod, BooleanOperation, CodeAttributesKeyTypes, Crud, CustomInstrumentationsKeyTypes, DestinationTypes, EdgeTypes, EntityTypes, FieldTypes, HeadersCollectionKeyTypes, InputTypes, InstallationMethod, InstrumentationRuleType, IntrumentationStatus, JsonOperation, K8sResourceKind, MountMethod, NodeTypes, NumberOperation, OtherEntityTypes, OtherStatus, PayloadCollectionKeyTypes, PlatformType, ProgrammingLanguages, SignalType, SortDirection, StatusType, StringOperation, Tier };
+export { ActionCategory, ActionKeyTypes, ActionType, AddNodeTypes, AgentEnvVarsInjectionMethod, BooleanOperation, CodeAttributesKeyTypes, Crud, CustomInstrumentationsKeyTypes, DestinationTypes, EdgeTypes, EntityTypes, FieldTypes, HeadersCollectionKeyTypes, InputTypes, InstallationMethod, InstrumentationRuleType, IntrumentationStatus, JsonOperation, K8sResourceKind, MountMethod, NodeTypes, NumberOperation, OtherEntityTypes, OtherStatus, PayloadCollectionKeyTypes, PlatformType, Profile, ProgrammingLanguages, SignalType, SortDirection, StatusType, StringOperation, Tier };

package/lib/{useTransition-c2aef0e4.js → useTransition-26bd4722.js}

@@ -1,4 +1,4 @@
-import { z as useModalStore, O as useDrawerStore, Q as useActiveNodeStore } from './index-bd48e6e2.js';
+import { z as useModalStore, O as useDrawerStore, Q as useActiveNodeStore } from './index-8fc2f11e.js';
 import { AddNodeTypes, EntityTypes, PayloadCollectionKeyTypes, CodeAttributesKeyTypes, CustomInstrumentationsKeyTypes } from './types.js';
 import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
 import styled from 'styled-components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.67",
+  "version": "0.0.69",
   "author": "Odigos",
   "repository": {
     "type": "git",
@@ -89,11 +89,11 @@
     "javascript-time-ago": "^2.5.11",
     "lottie-react": "^2.4.1",
     "prism-react-renderer": "^2.4.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-error-boundary": "^6.0.0",
     "styled-components": "^6.1.19",
-    "zustand": "^5.0.6"
+    "zustand": "^5.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
@@ -105,22 +105,22 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/addon-docs": "^9.1.1",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "9.0.16",
-    "@types/node": "^24.0.14",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@storybook/react-webpack5": "9.1.1",
+    "@types/node": "^24.2.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "babel-loader": "^10.0.0",
     "babel-plugin-styled-components": "^2.1.4",
-    "eslint": "^9.31.0",
-    "eslint-config-next": "^15.4.1",
-    "eslint-plugin-storybook": "9.0.16",
-    "next": "^15.4.1",
+    "eslint": "^9.32.0",
+    "eslint-config-next": "^15.4.5",
+    "eslint-plugin-storybook": "9.1.1",
+    "next": "^15.4.5",
     "postcss": "^8.5.6",
     "rollup": "^3.29.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "9.0.16",
-    "typescript": "^5.8.3"
+    "storybook": "9.1.1",
+    "typescript": "^5.9.2"
   }
 }

package/lib/containers/system-settings/settings/advanced-settings.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { type SettingsProps } from './types';
-declare const AdvancedSettings: React.ForwardRefExoticComponent<SettingsProps & React.RefAttributes<HTMLDivElement>>;
-export { AdvancedSettings };