@odigos/ui-kit 0.0.14 → 0.0.16

package/lib/icons/destinations/open-telemetry-logo/open-telemetry-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/destinations/ops-verse-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const OpsVerseLogo: SVG;

package/lib/icons/destinations/ops-verse-logo/ops-verse-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/destinations/prometheus-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const PrometheusLogo: SVG;

package/lib/icons/destinations/prometheus-logo/prometheus-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/destinations/qryn-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const QrynLogo: SVG;

package/lib/icons/destinations/qryn-logo/qryn-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/destinations/quickwit-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const QuickwitLogo: SVG;

package/lib/icons/destinations/quickwit-logo/quickwit-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/destinations/sentry-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const SentryLogo: SVG;

package/lib/icons/destinations/sentry-logo/sentry-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/destinations/signoz-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const SignozLogo: SVG;

package/lib/icons/destinations/signoz-logo/signoz-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/destinations/splunk-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const SplunkLogo: SVG;

package/lib/icons/destinations/splunk-logo/splunk-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/destinations/sumo-logic-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const SumoLogicLogo: SVG;

package/lib/icons/destinations/sumo-logic-logo/sumo-logic-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/destinations/tempo-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const TempoLogo: SVG;

package/lib/icons/destinations/tempo-logo/tempo-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/destinations/traceloop-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const TraceloopLogo: SVG;

package/lib/icons/destinations/traceloop-logo/traceloop-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/destinations/uptrace-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const UptraceLogo: SVG;

package/lib/icons/destinations/uptrace-logo/uptrace-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/index.d.ts

@@ -2,6 +2,7 @@ export * from './actions';
 export * from './brand';
 export * from './common';
 export * from './compute-platform';
+export * from './destinations';
 export * from './instrumentation-rules';
 export * from './math';
 export * from './monitors';

package/lib/icons/overview/index.d.ts

@@ -4,5 +4,6 @@ export * from './trace-view-icon/index';
 export * from './connections-icon/index';
 export * from './actions-icon/index';
 export * from './destinations-icon/index';
+export * from './namespaces-icon/index';
 export * from './rules-icon/index';
 export * from './sources-icon/index';

package/lib/icons/overview/namespaces-icon/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const NamespacesIcon: SVG;

package/lib/icons/overview/namespaces-icon/namespaces-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/index.d.ts

@@ -4,7 +4,6 @@ export * from './dotnet-logo';
 export * from './elixir-logo';
 export * from './go-logo';
 export * from './java-logo';
-export * from './kafka-logo';
 export * from './mysql-logo';
 export * from './nginx-logo';
 export * from './nodejs-logo';

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-3KUV6Vlt.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';
 import React from 'react';
 import Theme from './theme.js';
-export { A as ActionsIcon, D as DestinationsIcon, R as RulesIcon, S as SourcesIcon, V as VmLogo } from './index-BjJpYtF1.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-9ObpINp4.js';
-import './index-DYEcdkUF.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 './types.js';
 import 'styled-components';
 
@@ -23,6 +23,30 @@ 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 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,
+            React.createElement("path", { id: 'gcs-1', d: 'M52 14c0-3.324 2.676-6 6-6h0c3.324 0 6 2.676 6 6h0c0 3.324-2.676 6-6 6h0c-3.324 0-6-2.676-6-6z' })),
+        React.createElement("g", { stroke: 'none', fillRule: 'nonzero' },
+            React.createElement("path", { d: 'M0 0h80v28H0z', fill: fill || '#aecbfa' }),
+            React.createElement("path", { d: 'M72 0h8v28h-8z', fill: fill || '#669df6' }),
+            React.createElement("path", { d: 'M80 0h-8v28l8-28z', fill: fill || '#4285f4' }),
+            React.createElement("path", { d: 'M0 0h8v28H0z', fill: fill || '#669df6' }),
+            React.createElement("path", { d: 'M16 12h24v4H16z' }),
+            React.createElement("use", { xlinkHref: '#C' }),
+            React.createElement("path", { d: 'M0 36h80v28H0z', fill: fill || '#aecbfa' }),
+            React.createElement("path", { d: 'M72 36h8v28h-8z', fill: fill || '#669df6' }),
+            React.createElement("path", { d: 'M80 36h-8v28l8-28z', fill: fill || '#4285f4' }),
+            React.createElement("path", { d: 'M0 36h8v28H0z', fill: fill || '#669df6' }),
+            React.createElement("path", { d: 'M16 48h24v4H16z' }),
+            React.createElement("use", { xlinkHref: '#gcs-1', y: '36' }))));
+};
+
+const SentryLogo = ({ size = 16, fill, rotate = 0, onClick }) => {
+    return (React.createElement("svg", { width: size, height: size * (227 / 256), viewBox: '0 0 256 227', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { fill: fill || '#362D59', d: 'M148.367708,12.4025287 C144.036807,5.21480737 136.258026,0.820118864 127.866362,0.820118864 C119.474697,0.820118864 111.695916,5.21480737 107.365016,12.4025287 L73.6403017,70.165071 C126.066153,96.3390588 160.689085,148.341727 164.615024,206.806542 L140.93597,206.806542 C137.017513,156.694333 106.874845,112.396698 61.6982677,90.3588968 L30.4849684,144.32869 C55.8497707,155.704426 73.6778379,179.211206 77.7918243,206.704035 L23.4120041,206.704035 C22.1018479,206.611361 20.9266153,205.864669 20.2861278,204.71799 C19.6456403,203.571311 19.6261529,202.179068 20.2342955,201.014912 L35.3027847,175.388229 C30.1976229,171.128798 24.3630321,167.829476 18.0816541,165.65009 L3.16692493,191.276772 C0.0305635285,196.656417 -0.818661742,203.068719 0.809210488,209.079324 C2.43708272,215.08993 6.40620885,220.197261 11.8287436,223.258872 C15.3657216,225.251729 19.3523095,226.310116 23.4120041,226.334074 L97.8831433,226.334074 C100.696274,191.620878 85.1423372,157.966047 56.8804514,137.614499 L68.7199787,117.113153 C104.398813,141.618242 124.473737,183.151896 121.510945,226.334074 L184.603837,226.334074 C187.593899,160.904124 155.557278,98.8221906 100.497065,63.3483734 L124.432386,22.3456815 C125.542508,20.4856859 127.944329,19.8680747 129.81399,20.9618406 C132.530418,22.4481882 233.807067,199.169791 235.703442,201.219925 C236.383476,202.439289 236.358897,203.929352 235.639016,205.125624 C234.919136,206.321896 233.614065,207.041397 232.218213,207.011555 L207.821611,207.011555 C208.129131,213.537817 208.129131,220.046994 207.821611,226.539592 L232.32072,226.539592 C238.604421,226.580218 244.643414,224.105731 249.091568,219.667205 C253.539722,215.228679 256.027289,209.195062 256,202.911286 C256.002825,198.802186 254.905596,194.767215 252.822066,191.225519 L148.367708,12.4025287 Z' })));
+};
+
 const LightOffIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -79,4 +103,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, LightOffIcon, LightOnIcon, MoonIcon, ServiceMapIcon, SunIcon, TraceViewIcon };
+export { CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MoonIcon, SentryLogo, ServiceMapIcon, SunIcon, TraceViewIcon };

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

@@ -1,9 +1,9 @@
 import { ProgrammingLanguages, SignalType, StatusType } from './types.js';
 import 'react';
-import './index-DYEcdkUF.js';
+import './index-IvGLauAo.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-9ObpINp4.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';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);

package/lib/{index-Db_ZDrEr.js → index-CLOUNx6Z.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 'react';
-import './index-DYEcdkUF.js';
+import './index-IvGLauAo.js';
 import 'styled-components';
 
 const getActionIcon = (type) => {

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

@@ -1,13 +1,13 @@
-import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment, useId } from 'react';
+import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment } from 'react';
 import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages, EntityTypes } from './types.js';
-import './index-DYEcdkUF.js';
+import './index-IvGLauAo.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-CYn62h8x.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 { 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-CJKFedQi.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-CFmm4scp.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 ReactDOM from 'react-dom';
 import require$$0 from 'babel-runtime/helpers/extends';
 import require$$1$1 from 'babel-runtime/core-js/object/get-prototype-of';
@@ -16,7 +16,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-9ObpINp4.js';
+import { I as InfoIcon } from './index-DM8CZWtL.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -3725,20 +3725,20 @@ const formatLineForPrettyMode = (line) => {
 const getComponentsFromPropertyString = (propertyString, theme) => {
     const [text, ...rest] = propertyString.split('@');
     const components = rest
-        ?.map((c) => {
+        ?.map((c, i) => {
         if (!c.includes('='))
             return null;
         const [type, value] = c.split('=');
         switch (type) {
             case 'tooltip':
-                return React.createElement(Tooltip, { key: useId(), withIcon: true, text: value });
+                return React.createElement(Tooltip, { key: `${type}-${value}-${i}`, withIcon: true, text: value });
             case 'status':
                 if (value === 'none')
-                    return React.createElement("div", { key: useId(), style: { width: 16, height: 16 } });
+                    return React.createElement("div", { key: `${type}-${value}-${i}`, style: { width: 16, height: 16 } });
                 let Icon = getStatusIcon(value, theme);
                 if (!Icon)
                     Icon = getStatusIcon(StatusType.Warning, theme);
-                return React.createElement(Icon, { key: useId() });
+                return React.createElement(Icon, { key: `${type}-${value}-${i}` });
             default:
                 console.warn('unexpected component type!', type);
                 return null;
@@ -3749,11 +3749,11 @@ const getComponentsFromPropertyString = (propertyString, theme) => {
 };
 const PrettyJsonCode = ({ darkMode, str }) => {
     const theme = Theme.useTheme();
-    const renderEmptyRows = (count = 2) => {
+    const renderEmptyRows = (count, idx) => {
         const rows = new Array(count).fill((props) => (React.createElement(TableRow$1, { ...props },
             React.createElement(TableData, null),
             React.createElement(TableData, null))));
-        return (React.createElement(Fragment, null, rows.map((R, i) => (React.createElement(R, { key: useId(), style: i === 0 ? { borderBottom: `1px solid ${theme.colors.border}` } : {} })))));
+        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, getTokenProps, tokens }) => (React.createElement(Table$1, null,
         React.createElement(TableBody$1, null, tokens.map((line, i) => {
@@ -3761,7 +3761,7 @@ const PrettyJsonCode = ({ darkMode, str }) => {
             const lineProps = getLineProps({ line: formattedLine });
             if (formattedLine.length === 1 && formattedLine[0].types[0] === 'property') {
                 return (React.createElement(Fragment, { key: `line-${i}` },
-                    renderEmptyRows(),
+                    renderEmptyRows(2, i),
                     React.createElement(TableRow$1, { ...lineProps },
                         React.createElement(TableData, null,
                             React.createElement(Title$c, null, formattedLine[0].content)),
@@ -4122,6 +4122,11 @@ const Container$n = styled.div `
   justify-content: center;
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
+  border-radius: 8px;
+  background: ${({ $status, theme }) => {
+    const clr = $status ? theme.text[$status] : theme.text.secondary;
+    return `linear-gradient(180deg, ${clr + Theme.opacity.hex['020']} 0%, ${clr + Theme.opacity.hex['005']} 100%)`;
+}};
 `;
 const IconWrapper$3 = styled.div `
   position: absolute;
@@ -4134,22 +4139,35 @@ const IconWrapper$3 = styled.div `
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
   border-radius: 100%;
-  border: 1px solid ${({ theme }) => theme.colors.primary};
-  background: ${({ $status, theme }) => ($status ? theme.colors[$status] : theme.colors.info)};
 `;
-const IconGroup = ({ icons = [], iconSrcs = [], status, size = 36 }) => {
+const IconGroup = ({ icons = [], iconSrcs = [], status, size = 36, id }) => {
     const theme = Theme.useTheme();
     const imgSize = icons.length === 1 || iconSrcs.length === 1 ? size - 16 : size / 3;
-    if (!!iconSrcs.length) {
-        return React.createElement(IconGroup, { icons: iconSrcs.map((src) => (() => React.createElement(ImageControlled, { src: src, size: imgSize }))), status: status, size: size });
+    if (iconSrcs.length > 0) {
+        return React.createElement(IconGroup, { icons: iconSrcs.map((src) => (() => React.createElement(ImageControlled, { src: src, size: imgSize }))), status: status, size: size, id: id });
     }
     if (icons.length === 1) {
         return React.createElement(IconWrapped, { icon: icons[0], status: status, size: size });
     }
-    return (React.createElement(Container$n, { "$size": size }, icons.map((Icon, idx) => {
+    const getTopPosition = (idx) => {
+        if (icons.length > 2) {
+            return idx === 0 || idx === 1 ? imgSize * 0.2 : imgSize * 1.4;
+        }
+        return imgSize * 0.7;
+    };
+    const getLeftPosition = (idx) => {
+        if (idx >= 2) {
+            return imgSize * 0.7;
+        }
+        else if (idx % 2 === 0) {
+            return imgSize * 0.05;
+        }
+        return imgSize * 1.4;
+    };
+    return (React.createElement(Container$n, { "$status": status, "$size": size }, icons.map((Icon, idx) => {
         if (idx > 2)
             return null;
-        return (React.createElement(IconWrapper$3, { key: useId(), "$status": status, "$size": imgSize * 1.5, "$top": icons.length > 2 ? (idx === 0 || idx === 1 ? 0 : imgSize * 1.4) : imgSize * 0.7, "$left": idx >= 2 ? imgSize * 0.7 : idx % 2 === 0 ? 0 : imgSize * 1.4, "$zIndex": idx + 1 }, idx === 2 && icons.length > 3 ? (React.createElement(Text, { family: 'secondary', color: theme.text.dark_grey, size: imgSize * 0.8 },
+        return (React.createElement(IconWrapper$3, { key: `icon-${id}-${idx}`, "$size": imgSize * 1.5, "$top": getTopPosition(idx), "$left": getLeftPosition(idx), "$zIndex": idx + 1 }, idx === 2 && icons.length > 3 ? (React.createElement(Text, { family: 'secondary', color: theme.text.dark_grey, size: imgSize * 0.8 },
             "+",
             icons.length - 2)) : (React.createElement(Icon, { size: imgSize }))));
     })));
@@ -4224,14 +4242,14 @@ const Container$m = styled.div `
   padding: 16px;
   width: calc(100% - 32px);
   border-radius: 16px;
-  background-color: ${({ $status, theme }) => (!!$status ? theme.text[$status] + Theme.opacity.hex['010'] : theme.colors.secondary + Theme.opacity.hex['005'])};
+  background-color: ${({ theme, $status, $bgColor }) => $bgColor || ($status ? theme.text[$status] + Theme.opacity.hex['010'] : theme.colors.secondary + Theme.opacity.hex['005'])};
   opacity: ${({ $faded }) => ($faded ? 0.5 : 1)};
 
-  ${({ $withClick, $status, theme }) => $withClick
+  ${({ theme, $status, $bgColorHover, $withClick }) => $withClick
     ? css `
           &:hover {
             cursor: pointer;
-            background-color: ${!!$status ? theme.text[$status] + Theme.opacity.hex['020'] : theme.colors.secondary + Theme.opacity.hex['010']};
+            background-color: ${$bgColorHover || ($status ? theme.text[$status] + Theme.opacity.hex['020'] : theme.colors.secondary + Theme.opacity.hex['010'])};
             ${ControlledVisibility} {
               visibility: visible;
             }
@@ -4250,6 +4268,7 @@ const Title$b = styled(Text) `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+
   font-size: 14px;
   &::after {
     // This is to prevent the browser "default tooltip" from appearing when the title is too long
@@ -4258,6 +4277,10 @@ const Title$b = styled(Text) `
   }
 `;
 const SubTitleWrapper = styled.div `
+  max-width: ${({ $maxWidth }) => $maxWidth}px;
+  overflow: hidden;
+  white-space: nowrap;
+
   display: flex;
   align-items: center;
   gap: 8px;
@@ -4275,7 +4298,7 @@ const ActionsWrapper = styled.div `
 const HoverText = styled(Text) `
   margin-right: 16px;
 `;
-const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, status, faded, monitors, monitorsWithLabels, isActive, withCheckbox, isCheckboxDisabled, isChecked, onCheckboxChange, withExtend, isExtended, renderExtended, renderActions, onClick, ...props }) => {
+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 [extend, setExtend] = useState(isExtended || false);
     const [maxWidth, setMaxWidth] = useState(0);
     const [isTitleOverflowed, setIsTitleOverflowed] = useState(false);
@@ -4286,9 +4309,10 @@ const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, s
         if (containerRef.current && actionsRef.current) {
             const containerWidth = containerRef.current.clientWidth;
             const actionsWidth = actionsRef.current.clientWidth;
-            // 85 is the sum of the container-padding, icon width, and flex-row-gap
-            // we round to 100, to consider cases with actions
-            setMaxWidth(containerWidth - actionsWidth - 100);
+            // 85 is the sum of the container-padding, icon width, and flex-row-gap.
+            // we round it to 120, to consider cases with actions.
+            const widthOfInnerContents = 120;
+            setMaxWidth(containerWidth - actionsWidth - widthOfInnerContents);
         }
     }, []);
     useEffect(() => {
@@ -4314,15 +4338,15 @@ const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, s
             withSeperator && React.createElement(SubTitle$2, null, '•'),
             React.createElement(Status, { status: isActive ? StatusType.Success : StatusType.Error, size: 10 })));
     };
-    return (React.createElement(Container$m, { ref: containerRef, "$status": status, "$faded": faded, "$withClick": !!onClick, onClick: onClick, ...props },
+    return (React.createElement(Container$m, { ref: containerRef, "$status": status, "$faded": faded, "$bgColor": bgColor, "$bgColorHover": bgColorHover, "$withClick": !!onClick, onClick: onClick, ...props },
         React.createElement(FlexRow, { "$gap": 8 },
             React.createElement(FlexRow, { "$gap": 16 },
                 withCheckbox && React.createElement(Checkbox, { value: isChecked, onChange: onCheckboxChange, disabled: isCheckboxDisabled }),
-                !!icons?.length || !!iconSrcs?.length ? (React.createElement(IconGroup, { icons: icons, iconSrcs: iconSrcs, status: status })) : !!icon || !!iconSrc ? (React.createElement(IconWrapped, { icon: icon, src: iconSrc, status: status })) : null),
+                !!icons?.length || !!iconSrcs?.length ? (React.createElement(IconGroup, { icons: icons, iconSrcs: iconSrcs, status: status, id: `${title}-${subTitle}` })) : !!icon || !!iconSrc ? (React.createElement(IconWrapped, { icon: icon, src: iconSrc, status: status })) : null),
             React.createElement(FlexColumn, { "$gap": 4 },
                 React.createElement(Tooltip, { text: isTitleOverflowed ? title : undefined, withIcon: false },
                     React.createElement(Title$b, { ref: titleRef, "$maxWidth": maxWidth }, title)),
-                React.createElement(SubTitleWrapper, null,
+                React.createElement(SubTitleWrapper, { "$maxWidth": maxWidth },
                     subTitle && React.createElement(SubTitle$2, null, subTitle),
                     renderMonitors(!!subTitle),
                     renderActiveStatus(!!monitors?.length))),
@@ -4422,7 +4446,7 @@ const TableRow = ({ index, columns, cells, onClick, status, faded }) => {
         if (!rowCell)
             return null;
         const { value, textColor, withTooltip, icon, component: Component } = rowCell;
-        return (React.createElement(Td, { key: useId(), "$isFirst": i === 0 },
+        return (React.createElement(Td, { key: `table-row-${key}-${value}-${index}-${i}`, "$isFirst": i === 0 },
             !!icon ? (React.createElement(IconWrapped, { icon: icon })) : !!Component ? (React.createElement(Component, null)) : (React.createElement(Tooltip, { text: withTooltip && !!value ? String(value) : '' },
                 React.createElement(RowText, { "$color": textColor }, !isEmpty(value) ? value : '-'))),
             i === 0 && React.createElement(RowBackground, { "$height": containerHeight, "$width": containerWidth, "$top": containerHeight * index, "$hovered": isHovered, "$status": status })));
@@ -4635,13 +4659,16 @@ const renderValue = (type, value) => {
             });
             return (React.createElement(DataTab, { title: containerName, subTitle: `${processes.length} Instrumented Processes`, renderActions: () => {
                     return React.createElement(Status, { status: StatusType.Info, title: 'Instrumentation Device', subtitle: !actualDevice.subTitle || actualDevice.subTitle === '[]' ? 'none' : actualDevice.subTitle, withBorder: true });
-                }, isExtended: !!processes.length, renderExtended: () => {
-                    return (React.createElement(FlexColStretched, { "$gap": 24 }, processes.map((process, idx) => (React.createElement(FlexColStretched, { key: `process-${idx}`, "$gap": 8 },
-                        React.createElement(DescribeRow, { title: `Instrumented Process #${idx + 1}`, subTitle: process.message || '', value: {
-                                text: process.health === StatusType.Success ? 'healthy' : 'unhealthy',
-                                status: process.health,
-                            } }),
-                        process.identifyingAttributes.map(({ name, value }) => (React.createElement(DescribeRow, { key: useId(), title: name, subTitle: '', value: { text: value, status: undefined } }))))))));
+                }, extendableProps: {
+                    isExtended: !!processes.length,
+                    renderExtended: () => {
+                        return (React.createElement(FlexColStretched, { "$gap": 24 }, processes.map((process, idx) => (React.createElement(FlexColStretched, { key: `process-${idx}`, "$gap": 8 },
+                            React.createElement(DescribeRow, { title: `Instrumented Process #${idx + 1}`, subTitle: process.message || '', value: {
+                                    text: process.health === StatusType.Success ? 'healthy' : 'unhealthy',
+                                    status: process.health,
+                                } }),
+                            process.identifyingAttributes.map(({ name, value }) => (React.createElement(DescribeRow, { key: `describe-${name}-${value}`, title: name, subTitle: '', value: { text: value, status: undefined } }))))))));
+                    },
                 } }));
         }
         case DataCardFieldTypes.SourceContainer: {
@@ -4654,12 +4681,17 @@ const renderValue = (type, value) => {
                 otelDistroName: '',
             });
             const awaitingInstrumentation = !instrumented && !instrumentationMessage;
-            return (React.createElement(DataTab, { title: containerName, subTitle: `${language === ProgrammingLanguages.JavaScript ? 'Node.js' : capitalizeFirstLetter(language)}` + (!!runtimeVersion ? ` • Runtime Version: ${runtimeVersion}` : ''), icon: getProgrammingLanguageIcon(language), isExtended: !!instrumentationMessage, renderExtended: () => {
-                    if (!!instrumentationMessage) {
-                        return (React.createElement(AlignCenter, null,
-                            React.createElement(Status, { status: StatusType.Info, title: splitCamelString(instrumentationMessage) })));
-                    }
-                    return null;
+            return (React.createElement(DataTab, { title: containerName, subTitle: `${language === ProgrammingLanguages.JavaScript ? 'Node.js' : capitalizeFirstLetter(language)}` + (!!runtimeVersion ? ` • Runtime Version: ${runtimeVersion}` : ''), iconProps: {
+                    icon: getProgrammingLanguageIcon(language),
+                }, extendableProps: {
+                    isExtended: !!instrumentationMessage,
+                    renderExtended: () => {
+                        if (!!instrumentationMessage) {
+                            return (React.createElement(AlignCenter, null,
+                                React.createElement(Status, { status: StatusType.Info, title: splitCamelString(instrumentationMessage) })));
+                        }
+                        return null;
+                    },
                 }, renderActions: () => {
                     return (React.createElement(Status, { status: instrumented ? StatusType.Success : awaitingInstrumentation ? StatusType.Warning : StatusType.Error, title: instrumented ? 'Instrumented' : awaitingInstrumentation ? 'Instrumenting...' : 'Uninstrumented', subtitle: otelDistroName, withIcon: true, withBorder: true }));
                 } }));
@@ -5978,7 +6010,7 @@ const Segment = ({ options = [], selected, setSelected }) => {
     return (React.createElement(Container$6, null,
         options.map(({ icon: Icon, label, value, selectedBgColor }, idx) => {
             const isSelected = selected === value;
-            return (React.createElement(Button, { key: useId(), ref: isSelected ? selectedRef : undefined, "$isFirstItem": idx === 0, "$isLastItem": idx === options.length - 1, onClick: () => {
+            return (React.createElement(Button, { key: `segment-${label || idx}-${value}`, ref: isSelected ? selectedRef : undefined, "$isFirstItem": idx === 0, "$isLastItem": idx === options.length - 1, onClick: () => {
                     setSelected(value);
                     setBgColor(selectedBgColor || '');
                 } },