@odigos/ui-kit 0.0.95 → 0.0.98

package/lib/icons.js

@@ -1,11 +1,11 @@
-import { T as Theme } from './index-40dfa720.js';
-export { i as AddClusterInfoIcon, o as CPlusPlusLogo, p as CSharpLogo, C as CodeAttributesIcon, m as CustomInstrumentationIcon, j as DeleteAttributeIcon, q as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, l as ImageErrorIcon, J as JavaLogo, K as K8sLogo, h as KafkaLogo, r as MysqlLogo, N as NginxLogo, s as NodejsLogo, n as PayloadCollectionIcon, t as PhpLogo, P as PiiMaskingIcon, u as PostgresLogo, v as PythonLogo, w as RedisLogo, R as RenameAttributeIcon, x as RubyLogo, y as RustLogo, k as SamplerIcon, z as SwiftLogo } from './index-40dfa720.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-eff01b3d.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-a53852b3.js';
+import { T as Theme } from './index-89edd01d.js';
+export { i as AddClusterInfoIcon, o as CPlusPlusLogo, p as CSharpLogo, C as CodeAttributesIcon, m as CustomInstrumentationIcon, j as DeleteAttributeIcon, q as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, l as ImageErrorIcon, J as JavaLogo, K as K8sLogo, h as KafkaLogo, r as MysqlLogo, N as NginxLogo, s as NodejsLogo, n as PayloadCollectionIcon, t as PhpLogo, P as PiiMaskingIcon, u as PostgresLogo, v as PythonLogo, w as RedisLogo, R as RenameAttributeIcon, x as RubyLogo, y as RustLogo, k as SamplerIcon, z as SwiftLogo } from './index-89edd01d.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-f18c8530.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, b as TraceViewIcon, U as UserIcon } from './index-77cf7846.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-1bc2b507.js';
-export { V as VmLogo } from './index-333086d8.js';
-export { a5 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, i as AwsCloudwatchLogo, S as AwsS3Logo, a1 as AwsXrayLogo, c as AxiomLogo, d as BetterStackLogo, B as BlobStorageLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, a4 as DestinationsIcon, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, F as GigapipeLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, a2 as NamespacesIcon, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, O as OpenTelemetryLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, R as QuickwitLogo, a6 as RulesIcon, T as SeqLogo, U as SignozLogo, a3 as SourcesIcon, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo } from './index-b0883db6.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-d8fb5fed.js';
+export { V as VmLogo } from './index-0a77c1be.js';
+export { a5 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, i as AwsCloudwatchLogo, S as AwsS3Logo, a1 as AwsXrayLogo, c as AxiomLogo, d as BetterStackLogo, B as BlobStorageLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, a4 as DestinationsIcon, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, F as GigapipeLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, a2 as NamespacesIcon, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, O as OpenTelemetryLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, R as QuickwitLogo, a6 as RulesIcon, T as SeqLogo, U as SignozLogo, a3 as SourcesIcon, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo } from './index-195415d4.js';
 import './types.js';
 import 'styled-components';
 
@@ -170,13 +170,6 @@ const ServiceMapIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth =
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M4.67333 8.61735H4.66667M7.34667 8.61735H7.34M9.66667 7.61735L10.6668 8.61744M10.6668 8.61744L11.6667 9.61735M10.6668 8.61744L11.6668 7.61735M10.6668 8.61744L9.66684 9.61735M6.95406 3.76106L9.05573 4.81189C9.39594 4.982 9.56605 5.06705 9.74417 5.10188C9.91313 5.13491 10.0869 5.13491 10.2558 5.10188C10.434 5.06705 10.6041 4.982 10.9443 4.81189C11.9382 4.31494 12.4351 4.06646 12.8395 4.11932C13.2185 4.16887 13.5581 4.37871 13.7719 4.69556C14 5.0336 14 5.58921 14 6.70044V10.6322C14 11.1108 14 11.3501 13.9271 11.5614C13.8627 11.7482 13.7575 11.9184 13.6192 12.0596C13.4628 12.2193 13.2488 12.3263 12.8207 12.5403L10.9541 13.4737C10.6042 13.6486 10.4293 13.736 10.2459 13.7705C10.0834 13.8009 9.91663 13.8009 9.75414 13.7705C9.57067 13.736 9.39576 13.6486 9.04595 13.4737L6.94427 12.4228C6.60406 12.2527 6.43395 12.1677 6.25583 12.1328C6.08687 12.0998 5.91313 12.0998 5.74417 12.1328C5.56605 12.1677 5.39594 12.2527 5.05573 12.4228C4.06182 12.9198 3.56486 13.1683 3.16049 13.1154C2.78147 13.0658 2.44195 12.856 2.22812 12.5392C2 12.2011 2 11.6455 2 10.5343V6.6025C2 6.12389 2 5.88458 2.07287 5.67331C2.13732 5.48648 2.24249 5.31631 2.38078 5.17511C2.53715 5.01545 2.7512 4.90843 3.17928 4.69439L5.04594 3.76106C5.39576 3.58615 5.57067 3.49869 5.75414 3.46427C5.91663 3.43378 6.08337 3.43378 6.24586 3.46427C6.42933 3.49869 6.60424 3.58615 6.95406 3.76106Z' })));
 };
 
-const TraceViewIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M2.66666 8.61719H6.66666M2.66666 12.6172H6.66666M2.66666 4.61719H13.3333M14 12.9505L13.0809 12.0315M13.0809 12.0315C13.4438 11.6686 13.6667 11.1686 13.6667 10.6172C13.6667 9.51147 12.7724 8.61719 11.6667 8.61719C10.5609 8.61719 9.66666 9.51147 9.66666 10.6172C9.66666 11.7229 10.5609 12.6172 11.6667 12.6172C12.2181 12.6172 12.7181 12.3943 13.0809 12.0315Z' })));
-};
-
 const ConnectionsIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -191,4 +184,4 @@ const ErrorRoundIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth =
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, 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 { AvatarIcon, CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, FolderIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MinusCircledIcon, MoonIcon, OdigosDestinationLogo, PlusCircledIcon, RefreshArrowsIcon, RefreshRightArrowIcon, RotateArrowsIcon, SentryLogo, ServiceMapIcon, SunIcon, TraceViewIcon, UserGroupIcon, UserSettingsIcon };
+export { AvatarIcon, CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, FolderIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MinusCircledIcon, MoonIcon, OdigosDestinationLogo, PlusCircledIcon, RefreshArrowsIcon, RefreshRightArrowIcon, RotateArrowsIcon, SentryLogo, ServiceMapIcon, SunIcon, UserGroupIcon, UserSettingsIcon };

package/lib/{index-333086d8.js → index-0a77c1be.js}

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

package/lib/{index-b0883db6.js → index-195415d4.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-40dfa720.js';
+import { T as Theme } from './index-89edd01d.js';
 
 const AlaudaLogo = ({ size = 16, fill, rotate = 0, onClick }) => {
     return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 43 43', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },

package/lib/{index-a53852b3.js → index-77cf7846.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-40dfa720.js';
+import { T as Theme } from './index-89edd01d.js';
 
 const OdigosLogoText = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();
@@ -91,6 +91,13 @@ const OverviewIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9.33348 11.4667C9.33348 10.7199 9.33348 10.3466 9.47881 10.0613C9.60664 9.81046 9.81061 9.60649 10.0615 9.47866C10.3467 9.33333 10.7201 9.33333 11.4668 9.33333H11.8668C12.6136 9.33333 12.9869 9.33333 13.2721 9.47866C13.523 9.60649 13.727 9.81046 13.8548 10.0613C14.0002 10.3466 14.0002 10.7199 14.0002 11.4667V11.8667C14.0002 12.6134 14.0002 12.9868 13.8548 13.272C13.727 13.5229 13.523 13.7268 13.2721 13.8547C12.9869 14 12.6136 14 11.8668 14H11.4668C10.7201 14 10.3467 14 10.0615 13.8547C9.81061 13.7268 9.60664 13.5229 9.47881 13.272C9.33348 12.9868 9.33348 12.6134 9.33348 11.8667V11.4667Z' })));
 };
 
+const TraceViewIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M2.66666 8.61719H6.66666M2.66666 12.6172H6.66666M2.66666 4.61719H13.3333M14 12.9505L13.0809 12.0315M13.0809 12.0315C13.4438 11.6686 13.6667 11.1686 13.6667 10.6172C13.6667 9.51147 12.7724 8.61719 11.6667 8.61719C10.5609 8.61719 9.66666 9.51147 9.66666 10.6172C9.66666 11.7229 10.5609 12.6172 11.6667 12.6172C12.2181 12.6172 12.7181 12.3943 13.0809 12.0315Z' })));
+};
+
 const DataStreamsIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -114,4 +121,4 @@ const CrossCircledIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, 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 { ArrowIcon as A, CrossCircledIcon as C, DataStreamsIcon as D, FilterIcon as F, GearIcon as G, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, RefreshLeftArrowIcon as R, SlackLogo as S, TerminalIcon as T, UserIcon as U, OverviewIcon as a };
+export { ArrowIcon as A, CrossCircledIcon as C, DataStreamsIcon as D, FilterIcon as F, GearIcon as G, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, RefreshLeftArrowIcon as R, SlackLogo as S, TerminalIcon as T, UserIcon as U, OverviewIcon as a, TraceViewIcon as b };

package/lib/{index-40dfa720.js → index-89edd01d.js}

@@ -1051,6 +1051,7 @@ const DISPLAY_TITLES = {
     FILTERED_COUNT_TOOLTIP: 'Represents filtered amount, out of total amount',
     SEARCH_NAMESPACES: 'Search Namespaces',
     SEARCH_SOURCES: 'Search Sources',
+    SELECT_ALL: 'Select All',
     ONLY_SELECTED: 'Only selected',
     ONLY_RUNNING_INSTANCES: 'Only running instances',
     TO_COLLECT_OTEL_DATA: 'To collect OpenTelemetry data',

package/lib/{index-d92ef50b.js → index-9475009f.js}

@@ -1,8 +1,8 @@
 import { StatusType, OtherStatus, SignalType } from './types.js';
 import 'react';
-import './index-40dfa720.js';
+import './index-89edd01d.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-eff01b3d.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-f18c8530.js';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);

package/lib/{index-9a7beddb.js → index-a3c0cecd.js}

@@ -1,7 +1,7 @@
 import React from 'react';
-import { a6 as WarningModal } from './index-c529b896.js';
+import { a6 as WarningModal } from './index-c8b542d8.js';
 import { StatusType, EntityTypes } from './types.js';
-import './index-40dfa720.js';
+import './index-89edd01d.js';
 import 'styled-components';
 
 const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {

package/lib/{index-bf427e64.js → index-c823fbfb.js}

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

package/lib/{index-c529b896.js → index-c8b542d8.js}

@@ -1,13 +1,13 @@
 import React, { Fragment, useMemo, useState, useEffect, useRef, forwardRef, createElement, useCallback, createContext, memo, useContext, useLayoutEffect } from 'react';
-import { T as Theme, B as BUTTON_TEXTS, l as ImageErrorIcon, M as MONITORS_OPTIONS, a2 as styleInject, V as usePendingStore, a0 as useSelectedStore, _ as useInstrumentStore, U as useActiveNodeStore, W as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, f as getProgrammingLanguageIcon } from './index-40dfa720.js';
+import { T as Theme, B as BUTTON_TEXTS, l as ImageErrorIcon, M as MONITORS_OPTIONS, a2 as styleInject, V as usePendingStore, a0 as useSelectedStore, _ as useInstrumentStore, U as useActiveNodeStore, W as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, f as getProgrammingLanguageIcon } from './index-89edd01d.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-1bc2b507.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-d8fb5fed.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-d92ef50b.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-9475009f.js';
 import ReactDOM, { createPortal } from 'react-dom';
-import { c as usePopup, h as useCopy, b as useClickNode, i as useGenericForm, a as useContainerSize, f as useTransition, u as useKeyDown, d as useOnClickOutside } from './useTransition-2df374a9.js';
-import { I as InfoIcon } from './index-eff01b3d.js';
+import { c as usePopup, h as useCopy, b as useClickNode, i as useGenericForm, a as useContainerSize, f as useTransition, u as useKeyDown, d as useOnClickOutside } from './useTransition-159c9af8.js';
+import { I as InfoIcon } from './index-f18c8530.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -16,7 +16,7 @@ const TextWrapper$2 = styled.div `
   text-align: ${({ $align }) => $align || 'left'};
   opacity: ${({ $opacity }) => ($opacity !== undefined ? $opacity : 1)};
   text-decoration: ${({ $decoration }) => $decoration || 'none'};
-  text-transform: ${({ $family }) => ($family === 'secondary' ? 'uppercase' : 'none')};
+  text-transform: ${({ $transform, $family }) => $transform || ($family === 'secondary' ? 'uppercase' : 'none')};
   font-family: ${({ theme, $family = 'primary' }) => theme.font_family[$family]};
 `;
 const getLinksFromText = (text) => {
@@ -69,7 +69,7 @@ const renderText = (text, theme) => {
     });
     return mappedText;
 };
-const Text = ({ children, color, size, weight, align, family, opacity, decoration, ...props }) => {
+const Text = ({ children, color, size, weight, align, family, opacity, decoration, transform, ...props }) => {
     const theme = Theme.useTheme();
     const textArray = useMemo(() => {
         const str = !children
@@ -85,7 +85,7 @@ const Text = ({ children, color, size, weight, align, family, opacity, decoratio
                     : '';
         return str.split('\n');
     }, [children]);
-    return (React.createElement(TextWrapper$2, { "$color": color, "$size": size, "$weight": weight, "$align": align, "$family": family, "$opacity": opacity, "$decoration": decoration, ...props }, textArray.length
+    return (React.createElement(TextWrapper$2, { "$color": color, "$size": size, "$weight": weight, "$align": align, "$family": family, "$opacity": opacity, "$decoration": decoration, "$transform": transform, ...props }, textArray.length
         ? textArray.map((str, i) => (React.createElement(Fragment, { key: `text-${i}-${str}` },
             renderText(str, theme),
             i !== textArray.length - 1 ? React.createElement("br", null) : null)))
@@ -3783,6 +3783,10 @@ const Title$c = styled(Text) `
 const CodeLineToken = styled.span `
   white-space: ${({ $noWrap }) => ($noWrap ? 'nowrap' : 'pre-wrap')};
   overflow-wrap: break-word;
+  word-break: break-word;
+  word-wrap: break-word;
+  /* Fallback for older browsers */
+  -ms-word-break: break-all;
   font-size: 12px;
 `;
 const Code = ({ language, code, flatten, pretty }) => {
@@ -3857,7 +3861,7 @@ const PrettyJsonCode = ({ darkMode, str }) => {
             React.createElement(TableData, null))));
         return (React.createElement(Fragment, null, rows.map((R, i) => (React.createElement(R, { key: `empty-row-${idx}-${i}`, style: i === 0 ? { borderBottom: `1px solid ${theme.colors.border}` } : {} })))));
     };
-    return (React.createElement(Highlight2, { theme: darkMode ? themes_exports.palenight : themes_exports.vsLight, language: 'json', code: str }, ({ getLineProps, tokens }) => (React.createElement(Table$1, null,
+    return (React.createElement(Highlight2, { theme: darkMode ? themes_exports.palenight : themes_exports.vsLight, language: 'json', code: str }, ({ getLineProps, getTokenProps, tokens }) => (React.createElement(Table$1, null,
         React.createElement(TableBody$1, null, tokens.map((line, i) => {
             const formattedLine = formatLineForPrettyMode(line);
             const lineProps = getLineProps({ line: formattedLine });
@@ -3876,7 +3880,7 @@ const PrettyJsonCode = ({ darkMode, str }) => {
                     return (React.createElement(TableData, { key: `line-${i}-token-${ii}` },
                         React.createElement(FlexRow, null,
                             React.createElement(FlexRow, null, components),
-                            React.createElement(CodeLineToken, { "$noWrap": isRowTitle }, text))));
+                            React.createElement(CodeLineToken, { "$noWrap": isRowTitle, ...getTokenProps({ token }) }, text))));
                 })));
             }
             else {
@@ -17273,12 +17277,15 @@ const PreWrap = styled(Text) `
   white-space: pre-wrap;
 `;
 const DataCardFields = ({ data }) => {
-    return (React.createElement(ListContainer$3, null, data?.map(({ type, title, tooltip, value }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [DataCardFieldTypes.Code, DataCardFieldTypes.Table].includes(type)
+    return (React.createElement(ListContainer$3, null, data?.map(({ type, title, titleIcon: TitleIcon, tooltip, value }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [DataCardFieldTypes.Code, DataCardFieldTypes.Table].includes(type)
             ? 'inherit'
             : !!type && [DataCardFieldTypes.Loader, DataCardFieldTypes.Divider, DataCardFieldTypes.CopyText].includes(type)
                 ? '100%'
                 : 'unset' },
-        React.createElement(Tooltip, { text: tooltip, withIcon: true }, !!title && React.createElement(ItemTitle, null, title)),
+        React.createElement(Tooltip, { text: tooltip, withIcon: true },
+            React.createElement(FlexRow, { "$alignItems": 'center', "$gap": 4 },
+                TitleIcon && React.createElement(TitleIcon, { size: 14 }),
+                !!title && React.createElement(ItemTitle, { transform: 'capitalize' }, title))),
         React.createElement(RenderValue, { type: type, value: value }))))));
 };
 // We need to maintain this with new components every time we add a new type to "DataCardFieldTypes"
@@ -17357,15 +17364,17 @@ const ActionWrapper = styled(FlexRow) `
   margin-left: auto;
   gap: 8px;
 `;
-const DataCard = ({ title = 'Details', titleBadge, description, action: Action, withExtend, initialExtended = false, data, children }) => {
+const DataCard = ({ title = 'Details', titleBadge, titleIcon: TitleIcon, description, action: Action, withExtend, initialExtended = false, data, children }) => {
     const [extend, setExtend] = useState(initialExtended);
     const [hovered, setHovered] = useState(false);
     return (React.createElement(CardContainer, { "$hovered": hovered },
-        !!title || !!description || !!Action ? (React.createElement(Header$1, { "$clickable": withExtend || false, onClick: () => withExtend && setExtend((prev) => !prev), onMouseEnter: () => withExtend && setHovered(true), onMouseLeave: () => withExtend && setHovered(false) },
+        !!title || !!TitleIcon || !!description || !!Action ? (React.createElement(Header$1, { "$clickable": withExtend || false, onClick: () => withExtend && setExtend((prev) => !prev), onMouseEnter: () => withExtend && setHovered(true), onMouseLeave: () => withExtend && setHovered(false) },
             React.createElement(FlexRow, null,
-                !!title && (React.createElement(Title$7, null,
-                    title,
-                    titleBadge === OtherStatus.Loading ? React.createElement(FadeLoader, null) : titleBadge !== undefined && React.createElement(Badge, { label: titleBadge }))),
+                React.createElement(FlexRow, { "$alignItems": 'center', "$gap": 8 },
+                    TitleIcon && (React.createElement(FlexRow, { "$alignItems": 'center' },
+                        React.createElement(TitleIcon, { size: 20 }))),
+                    !!title && React.createElement(Title$7, { transform: 'capitalize' }, title),
+                    titleBadge === OtherStatus.Loading ? React.createElement(FadeLoader, null) : titleBadge !== undefined && React.createElement(Badge, { label: titleBadge })),
                 (!!Action || withExtend) && (React.createElement(ActionWrapper, null,
                     typeof Action === 'function' ? React.createElement(Action, null) : Action,
                     withExtend && React.createElement(ExtendArrow, { extend: extend })))),
@@ -17488,7 +17497,7 @@ const SectionItemsWrapper = styled.div `
 const Title$6 = styled(Text) `
   font-size: 18px;
   line-height: 26px;
-  max-width: 270px;
+  max-width: ${({ $maxWidth }) => $maxWidth};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -17497,7 +17506,7 @@ const ActionButton$3 = styled(Button$4) `
   gap: 8px;
 `;
 const CloseButton = styled(Button$4) ``;
-const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTitleWith: ReplaceTitleWith, actions, actionButtons = [], tabs }) => {
+const DrawerHeader = ({ onClose, width, icons, iconSrcs, title, titleTooltip, replaceTitleWith: ReplaceTitleWith, actions, actionButtons = [], tabs }) => {
     const renderReplaceTitleWith = () => {
         if (typeof ReplaceTitleWith === 'function') {
             return React.createElement(ReplaceTitleWith, null);
@@ -17511,7 +17520,7 @@ const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTi
         React.createElement(TopRow, null,
             React.createElement(SectionItemsWrapper, null,
                 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$6, null, title)))),
+                renderReplaceTitleWith() || (React.createElement(Tooltip, { text: titleTooltip || title, withIcon: !!titleTooltip }, title && React.createElement(Title$6, { "$maxWidth": `calc(${width} ${actions || actionButtons.length ? '/ 5' : '- 192px'})` }, title)))),
             React.createElement(SectionItemsWrapper, { "$gap": 2 },
                 actions,
                 actionButtons.map((btn, i) => (React.createElement(ActionButton$3, { key: `header-action-button-${i}`, ...btn }))),
@@ -17591,7 +17600,7 @@ const Drawer = ({ isOpen, onClose, closeOnEscape = true, position = 'right', wid
         React.createElement(Overlay, { hidden: !isOpen, onClick: onClose }),
         React.createElement(Transition, { "data-id": 'drawer', enter: isOpen, "$position": position, "$width": width },
             React.createElement(DrawerBody, null,
-                React.createElement(DrawerHeader, { onClose: onClose, ...headerProps }),
+                React.createElement(DrawerHeader, { onClose: onClose, width: width, ...headerProps }),
                 React.createElement(Content$4, null, children),
                 React.createElement(DrawerFooter, { ...footerProps })))), document.body);
 };

package/lib/{index-1bc2b507.js → index-d8fb5fed.js}

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

package/lib/{index-eff01b3d.js → index-f18c8530.js}

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

package/lib/snippets.js

@@ -1,15 +1,15 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-c529b896.js';
-export { al as AddButton, aq as AddNode, ar as BaseNode, an as CopyText, as as EdgedNode, aj as Flow, at as FrameNode, au as HeaderNode, az as LabeledEdge, av as MapItemNode, aw as NoDataNode, ao as PodContainer, ax as ScrollNode, ay as SkeletonNode, ap as SourceContainer, ag as nodeConfig } from './index-c529b896.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-c8b542d8.js';
+export { al as AddButton, aq as AddNode, ar as BaseNode, an as CopyText, as as EdgedNode, aj as Flow, at as FrameNode, au as HeaderNode, az as LabeledEdge, av as MapItemNode, aw as NoDataNode, ao as PodContainer, ax as ScrollNode, ay as SkeletonNode, ap as SourceContainer, ag as nodeConfig } from './index-c8b542d8.js';
 import React from 'react';
-import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-40dfa720.js';
-import { E as EditIcon } from './index-1bc2b507.js';
+import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-89edd01d.js';
+import { E as EditIcon } from './index-d8fb5fed.js';
 import { StatusType } from './types.js';
 import 'styled-components';
-import { I as InfoIcon } from './index-eff01b3d.js';
+import { I as InfoIcon } from './index-f18c8530.js';
 import './index-5e5f7bda.js';
-import './index-d92ef50b.js';
+import './index-9475009f.js';
 import 'react-dom';
-import './useTransition-2df374a9.js';
+import './useTransition-159c9af8.js';
 
 const EditButton = ({ label, onClick, variant = 'tertiary', ...props }) => {
     const theme = Theme.useTheme();

package/lib/store.js

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

package/lib/theme.js

@@ -1,4 +1,4 @@
-export { T as default } from './index-40dfa720.js';
+export { T as default } from './index-89edd01d.js';
 import 'styled-components';
 import 'react';
 import './types.js';

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

@@ -25,7 +25,7 @@ export interface TraceSpan {
     warnings: string;
     spans?: TraceSpan[];
 }
-interface TraceProcess {
+export interface TraceProcess {
     serviceName: string;
     tags: TraceTag[];
 }

package/lib/{useTransition-2df374a9.js → useTransition-159c9af8.js}

@@ -1,4 +1,4 @@
-import { O as useModalStore, Q as useDrawerStore, U as useActiveNodeStore } from './index-40dfa720.js';
+import { O as useModalStore, Q as useDrawerStore, U as useActiveNodeStore } from './index-89edd01d.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.95",
+  "version": "0.0.98",
   "author": "Odigos",
   "repository": {
     "type": "git",