@odigos/ui-kit 0.0.8 → 0.0.9

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.0.9](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.8...ui-kit-v0.0.9) (2025-03-16)
+
+
+### Features
+
+* add icon for connections ([#23](https://github.com/odigos-io/ui-kit/issues/23)) ([6f28052](https://github.com/odigos-io/ui-kit/commit/6f2805265b6b9dfbaf482decff87fb613bc5c15d))
+* use source logos from SVG imports, not URL fetched ([#22](https://github.com/odigos-io/ui-kit/issues/22)) ([c37b564](https://github.com/odigos-io/ui-kit/commit/c37b564810e8cfb38d1cbd7fa4b4a31979149218))
+
+
+### Bug Fixes
+
+* click area in data-card with expand ([#19](https://github.com/odigos-io/ui-kit/issues/19)) ([a2c661f](https://github.com/odigos-io/ui-kit/commit/a2c661f0d7798328e949bbfd5fa175284a33bc69))
+* controlled-image fallback icon ([#21](https://github.com/odigos-io/ui-kit/issues/21)) ([cb15639](https://github.com/odigos-io/ui-kit/commit/cb15639311588d358b17fc75bb803f222d7f1bc6))
+* no-data for describe source pods ([#20](https://github.com/odigos-io/ui-kit/issues/20)) ([65aa7cb](https://github.com/odigos-io/ui-kit/commit/65aa7cb4f068868cefdf8e9af81cd2424c61b5dc))
+
 ## [0.0.8](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.7...ui-kit-v0.0.8) (2025-03-16)
 
 

package/lib/components/data-card/index.d.ts

@@ -6,6 +6,7 @@ interface DataCardProps {
     description?: string;
     action?: ReactNode | (() => ReactNode);
     withExtend?: boolean;
+    initialExtended?: boolean;
     data: DataCardFieldsProps['data'];
 }
 declare const DataCard: FC<DataCardProps>;

package/lib/components.js

@@ -1,15 +1,15 @@
-import { B as Button } from './index-CKUgKtl0.js';
-export { A as AutocompleteInput, a as Badge, C as CancelWarning, a0 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, f as DATA_CARD_FIELD_TYPES, D as DataCard, e as DataCardFields, g as DataTab, h as DeleteWarning, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, $ as FlexColumn, _ as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-CKUgKtl0.js';
+import { B as Button } from './index-m62aT4IR.js';
+export { A as AutocompleteInput, a as Badge, C as CancelWarning, a0 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, f as DATA_CARD_FIELD_TYPES, D as DataCard, e as DataCardFields, g as DataTab, h as DeleteWarning, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, $ as FlexColumn, _ as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-m62aT4IR.js';
 import React, { Component, createElement, createContext } from 'react';
 import Theme from './theme.js';
 import './types.js';
 import './index-DIcomki-.js';
 import 'styled-components';
-import './index-BulCzWQI.js';
-import './index-DLKEpJJm.js';
+import './index-Bc8gi9FH.js';
 import './index-BGlk5VhF.js';
+import './index-ixs381n-.js';
 import './index-BZS1ijMm.js';
-import './index-BJxaoI0G.js';
+import './index-D_Qn2U89.js';
 import './index-CZe2VX28.js';
 import './index-BumPE6cF.js';
 import './useTransition-Dfxjcy-C.js';

package/lib/containers.js

@@ -3,18 +3,18 @@ import styled, { css } from 'styled-components';
 import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-CZe2VX28.js';
 import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-Cu2uHOuh.js';
 import { ACTION_TYPE, ENTITY_TYPES, NOTIFICATION_TYPE, CRUD, OTHER_STATUS, NODE_TYPES, ADD_NODE_TYPES, EDGE_TYPES, FIELD_TYPES, SIGNAL_TYPE, CODE_ATTRIBUTES_KEY_TYPES, PAYLOAD_COLLECTION_KEY_TYPES, INSTRUMENTATION_RULE_TYPE } from './types.js';
-import { f as DATA_CARD_FIELD_TYPES, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, $ as FlexColumn, r as IconTitleBadge, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a3 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-CKUgKtl0.js';
+import { f as DATA_CARD_FIELD_TYPES, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, $ as FlexColumn, r as IconTitleBadge, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a3 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-m62aT4IR.js';
 import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DIcomki-.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import { C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-DLKEpJJm.js';
+import { i as CheckCircledIcon, h as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-ixs381n-.js';
 import { C as CrossCircledIcon, E as EditIcon, O as OdigosLogoText, b as OverviewIcon, F as FilterIcon, N as NotificationIcon, S as SlackLogo, a as FolderIcon, K as KeyIcon, T as TerminalIcon } from './index-3KUV6Vlt.js';
 import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BumPE6cF.js';
 import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-BY6B70Kf.js';
 import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-Dfxjcy-C.js';
-import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, A as ArrowIcon, a as CopyIcon, f as CheckIcon, g as CrossIcon } from './index-BJxaoI0G.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-BulCzWQI.js';
-import { f as filterActions, g as getConditionsBooleans, j as getEntityLabel, i as getEntityIcon, s as sleep$1, l as getPlatformIcon, m as getPlatformLabel, d as formatBytes, h as getContainersIcons, n as getValueForRange, b as filterSources, a as filterDestinations, c as compareCondition, k as getMetricForEntity, e as getContainersInstrumentedCount, o as isOverTime } from './index-CKD2OX24.js';
+import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, A as ArrowIcon, a as CopyIcon, f as CheckIcon, g as CrossIcon } from './index-D_Qn2U89.js';
+import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-Bc8gi9FH.js';
+import { f as filterActions, g as getConditionsBooleans, j as getEntityLabel, i as getEntityIcon, s as sleep$1, l as getPlatformIcon, m as getPlatformLabel, d as formatBytes, h as getContainersIcons, n as getValueForRange, b as filterSources, a as filterDestinations, c as compareCondition, k as getMetricForEntity, e as getContainersInstrumentedCount, o as isOverTime } from './index-g6Twdelv.js';
 import require$$1 from 'use-sync-external-store/shim';
 import { createPortal } from 'react-dom';
 import { O as OdigosLogo } from './index-BGlk5VhF.js';
@@ -898,8 +898,8 @@ const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) =
         isOpen && withSelect && (React.createElement(AbsoluteContainer$2, null,
             React.createElement(HeadWrap, null,
                 React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
-            React.createElement(VerticalScroll$1, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, connectionStatus }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: connectionStatus === NOTIFICATION_TYPE.SUCCESS ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
-                    if (connectionStatus === NOTIFICATION_TYPE.SUCCESS) {
+            React.createElement(VerticalScroll$1, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, status }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: status === NOTIFICATION_TYPE.SUCCESS ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
+                    if (status === NOTIFICATION_TYPE.SUCCESS) {
                         onSelect(filtered[idx]);
                     }
                     else {
@@ -918,9 +918,9 @@ const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) =
 
 const ComputePlatforms = ({ connections, onSelect }) => {
     const { searchText, platformTypes, statuses } = useFilterStore();
-    const filtered = connections.filter(({ id, type, connectionStatus }) => (!searchText || id.toLowerCase().includes(searchText)) &&
+    const filtered = connections.filter(({ id, type, status }) => (!searchText || id.toLowerCase().includes(searchText)) &&
         (!platformTypes?.length || platformTypes.find((opt) => opt.id === type)) &&
-        (!statuses?.length || statuses.find((opt) => opt.id === connectionStatus)));
+        (!statuses?.length || statuses.find((opt) => opt.id === status)));
     return (React.createElement(React.Fragment, null,
         React.createElement(InteractiveTable, { columns: [
                 { key: 'icon', title: '' },
@@ -928,7 +928,7 @@ const ComputePlatforms = ({ connections, onSelect }) => {
                 { key: 'type', title: 'Type' },
                 { key: 'status', title: 'Status' },
                 { key: 'id', title: 'Unique ID' },
-            ], rows: filtered.map(({ id, name, type, connectionStatus }) => ({
+            ], rows: filtered.map(({ id, name, type, status }) => ({
                 cells: [
                     { columnKey: 'id', value: id },
                     { columnKey: 'type', value: type },
@@ -937,7 +937,7 @@ const ComputePlatforms = ({ connections, onSelect }) => {
                     {
                         columnKey: 'status',
                         component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                            React.createElement(Status, { title: connectionStatus === NOTIFICATION_TYPE.SUCCESS ? 'connection alive' : 'connection lost', status: connectionStatus, withIcon: true, withBorder: true }))),
+                            React.createElement(Status, { title: status === NOTIFICATION_TYPE.SUCCESS ? 'connection alive' : 'connection lost', status: status, withIcon: true, withBorder: true }))),
                     },
                 ],
             })), onRowClick: (idx) => onSelect(filtered[idx]) }),
@@ -948,9 +948,9 @@ const ComputePlatforms = ({ connections, onSelect }) => {
 const ConnectionStatusDropdown = ({ connections, title = '', value, onSelect, onDeselect, ...props }) => {
     const options = useMemo(() => {
         const payload = [];
-        connections?.forEach(({ connectionStatus }) => {
-            if (!payload.find((opt) => opt.id === connectionStatus)) {
-                payload.push({ id: connectionStatus, value: connectionStatus });
+        connections?.forEach(({ status }) => {
+            if (!payload.find((opt) => opt.id === status)) {
+                payload.push({ id: status, value: status });
             }
         });
         return payload;
@@ -13247,7 +13247,7 @@ const mapToNodeData$1 = (entity) => {
         faded: hasDisableds,
         title: getEntityLabel(entity, ENTITY_TYPES.SOURCE, { extended: true }),
         subTitle: `${entity.namespace} • ${entity.kind}`,
-        iconSrcs: getContainersIcons(entity.containers),
+        icons: getContainersIcons(entity.containers),
         raw: entity,
     };
 };
@@ -15126,17 +15126,18 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
         return (React.createElement(CenterThis, null,
             React.createElement(FadeLoader, null)));
     }
-    return (React.createElement(FlexColumn, { "$gap": 12 }, describe.pods.map(({ podName, nodeName, phase, containers }) => {
+    return (React.createElement(FlexColumn, { "$gap": 12 }, !describe.pods?.length ? (React.createElement(CenterThis, null,
+        React.createElement(NoDataFound, { subTitle: 'Check if you have any running pods and try again' }))) : (describe.pods.map(({ podName, nodeName, phase, containers }) => {
         const podHasErrors = phase.status !== NOTIFICATION_TYPE.SUCCESS ||
-            !!containers.find(({ instrumentationInstances }) => !!instrumentationInstances.find(({ healthy }) => healthy.status !== NOTIFICATION_TYPE.SUCCESS));
-        return (React.createElement(DataCard, { key: `pod-${podName.value}`, title: `Pod: ${podName.value}`, withExtend: true, action: () => (React.createElement(Status, { status: podHasErrors ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS, title: podHasErrors ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS, withIcon: true, withBorder: true })), data: [
+            containers.findIndex(({ instrumentationInstances }) => instrumentationInstances.findIndex(({ healthy }) => healthy.status !== NOTIFICATION_TYPE.SUCCESS) !== -1) !== -1;
+        const podStatus = podHasErrors ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS;
+        const divider = { type: DATA_CARD_FIELD_TYPES.DIVIDER };
+        return (React.createElement(DataCard, { key: `pod-${podName.value}`, title: `Pod: ${podName.value}`, withExtend: true, action: () => React.createElement(Status, { status: podStatus, title: podStatus, withIcon: true, withBorder: true }), data: [
                 {
                     type: DATA_CARD_FIELD_TYPES.COPY_TEXT,
                     value: `kubectl get pod ${podName.value} -n ${describe?.namespace?.value || source.namespace}`,
                 },
-                {
-                    type: DATA_CARD_FIELD_TYPES.DIVIDER,
-                },
+                divider,
                 {
                     type: DATA_CARD_FIELD_TYPES.DESCRIBE_ROW,
                     value: JSON.stringify({
@@ -15148,9 +15149,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
                         },
                     }),
                 },
-                {
-                    type: DATA_CARD_FIELD_TYPES.DIVIDER,
-                },
+                divider,
                 {
                     type: DATA_CARD_FIELD_TYPES.DESCRIBE_ROW,
                     value: JSON.stringify({
@@ -15162,9 +15161,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
                         },
                     }),
                 },
-                {
-                    type: DATA_CARD_FIELD_TYPES.DIVIDER,
-                },
+                divider,
                 ...containers.map((container) => {
                     return {
                         type: DATA_CARD_FIELD_TYPES.POD_CONTAINER,
@@ -15184,7 +15181,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
                     };
                 }),
             ] }));
-    })));
+    }))));
 };
 
 const buildCard = (source) => {
@@ -15659,7 +15656,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                     columnKey: 'checkbox-and-icon',
                     component: () => (React.createElement(FlexRow, { "$gap": 16 },
                         React.createElement(Checkbox, { disabled: isPending, value: isChecked, onChange: () => onSelectOne(source) }),
-                        React.createElement(IconGroup, { iconSrcs: getContainersIcons(source.containers) }))),
+                        React.createElement(IconGroup, { icons: getContainersIcons(source.containers) }))),
                 },
                 {
                     columnKey: 'name',
@@ -15842,7 +15839,7 @@ const Describe = ({ fetchDescribeOdigos }) => {
         ]
         : [];
     return (React.createElement(React.Fragment, null,
-        React.createElement(DataCard, { title: 'General Information', withExtend: true, data: [
+        React.createElement(DataCard, { title: 'General Information', withExtend: true, initialExtended: true, data: [
                 { title: describe?.odigosVersion?.name, value: describe?.odigosVersion?.value },
                 { title: describe?.kubernetesVersion?.name, value: describe?.kubernetesVersion?.value },
                 { title: describe?.installationMethod?.name, value: describe?.installationMethod?.value },

package/lib/functions/get-containers-icons/index.d.ts

@@ -1,2 +1,2 @@
-import type { Source } from '@/types';
-export declare const getContainersIcons: (containers: Source["containers"]) => string[];
+import type { Source, SVG } from '@/types';
+export declare const getContainersIcons: (containers: Source["containers"]) => SVG[];

package/lib/functions/get-platform-icon/index.d.ts

@@ -1,2 +1,2 @@
 import { PLATFORM_TYPE, type SVG } from '@/types';
-export declare const getPlatformIcon: (type: PLATFORM_TYPE) => SVG;
+export declare const getPlatformIcon: (type?: PLATFORM_TYPE) => SVG;

package/lib/functions/get-platform-label/index.d.ts

@@ -1,2 +1,2 @@
 import { PLATFORM_TYPE } from '@/types';
-export declare const getPlatformLabel: (type: PLATFORM_TYPE) => string;
+export declare const getPlatformLabel: (type?: PLATFORM_TYPE) => string;

package/lib/functions/get-programming-language-icon/index.d.ts

@@ -1,2 +1,2 @@
-import { PROGRAMMING_LANGUAGES } from '@/types';
-export declare const getProgrammingLanguageIcon: (language: PROGRAMMING_LANGUAGES) => string;
+import { PROGRAMMING_LANGUAGES, type SVG } from '@/types';
+export declare const getProgrammingLanguageIcon: (language: PROGRAMMING_LANGUAGES) => SVG;

package/lib/functions.js

@@ -1,5 +1,5 @@
-export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, p as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-BulCzWQI.js';
-export { c as compareCondition, f as filterActions, a as filterDestinations, b as filterSources, d as formatBytes, g as getConditionsBooleans, h as getContainersIcons, e as getContainersInstrumentedCount, i as getEntityIcon, j as getEntityLabel, k as getMetricForEntity, l as getPlatformIcon, m as getPlatformLabel, n as getValueForRange, o as isOverTime, s as sleep } from './index-CKD2OX24.js';
+export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, p as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-Bc8gi9FH.js';
+export { c as compareCondition, f as filterActions, a as filterDestinations, b as filterSources, d as formatBytes, g as getConditionsBooleans, h as getContainersIcons, e as getContainersInstrumentedCount, i as getEntityIcon, j as getEntityLabel, k as getMetricForEntity, l as getPlatformIcon, m as getPlatformLabel, n as getValueForRange, o as isOverTime, s as sleep } from './index-g6Twdelv.js';
 import { INSTRUMENTATION_RULE_TYPE, ENTITY_TYPES } from './types.js';
 export { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BumPE6cF.js';
 export { k as getEntityId, l as isTimeElapsed } from './index-DIcomki-.js';
@@ -7,9 +7,9 @@ export { g as getIdFromSseTarget } from './index-BFct3S32.js';
 export { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
 import 'react';
 import 'styled-components';
-import './index-DLKEpJJm.js';
-import './theme.js';
 import './index-BGlk5VhF.js';
+import './theme.js';
+import './index-ixs381n-.js';
 import './index-BjJpYtF1.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {

package/lib/icons/common/image-error-icon/image-error-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/common/image-error-icon/index.d.ts

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

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

@@ -7,6 +7,7 @@ export * from './edit-icon/index';
 export * from './extend-arrow-icon/index';
 export * from './filter-icon/index';
 export * from './folder-icon/index';
+export * from './image-error-icon/index';
 export * from './key-icon/index';
 export * from './list-icon/index';
 export * from './no-data-icon/index';

package/lib/icons/index.d.ts

@@ -7,5 +7,6 @@ export * from './math';
 export * from './monitors';
 export * from './on-off';
 export * from './overview';
+export * from './programming-languages';
 export * from './social';
 export * from './status';

package/lib/icons/overview/connections-icon/connections-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/overview/connections-icon/index.d.ts

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

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

@@ -1,6 +1,7 @@
 export * from './overview-icon/index';
 export * from './service-map-icon/index';
 export * from './trace-view-icon/index';
+export * from './connections-icon/index';
 export * from './actions-icon/index';
 export * from './destinations-icon/index';
 export * from './rules-icon/index';

package/lib/icons/programming-languages/c-plus-plus-logo/c-plus-plus-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/programming-languages/c-plus-plus-logo/index.d.ts

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

package/lib/icons/programming-languages/c-sharp-logo/c-sharp-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/programming-languages/c-sharp-logo/index.d.ts

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

package/lib/icons/programming-languages/dotnet-logo/dotnet-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/programming-languages/dotnet-logo/index.d.ts

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

package/lib/icons/programming-languages/elixir-logo/elixir-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/programming-languages/elixir-logo/index.d.ts

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

package/lib/icons/programming-languages/go-logo/go-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/programming-languages/go-logo/index.d.ts

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

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

@@ -0,0 +1,17 @@
+export * from './c-plus-plus-logo';
+export * from './c-sharp-logo';
+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';
+export * from './php-logo';
+export * from './postgres-logo';
+export * from './python-logo';
+export * from './redis-logo';
+export * from './ruby-logo';
+export * from './rust-logo';
+export * from './swift-logo';

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

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

package/lib/icons/programming-languages/java-logo/java-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/programming-languages/kafka-logo/index.d.ts

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

package/lib/icons/programming-languages/kafka-logo/kafka-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/programming-languages/mysql-logo/index.d.ts

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

package/lib/icons/programming-languages/mysql-logo/mysql-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/programming-languages/nginx-logo/index.d.ts

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

package/lib/icons/programming-languages/nginx-logo/nginx-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/programming-languages/nodejs-logo/index.d.ts

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

package/lib/icons/programming-languages/nodejs-logo/nodejs-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/programming-languages/php-logo/index.d.ts

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

package/lib/icons/programming-languages/php-logo/php-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/programming-languages/postgres-logo/index.d.ts

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

package/lib/icons/programming-languages/postgres-logo/postgres-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/programming-languages/python-logo/index.d.ts

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

package/lib/icons/programming-languages/python-logo/python-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/programming-languages/redis-logo/index.d.ts

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

package/lib/icons/programming-languages/redis-logo/redis-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/programming-languages/ruby-logo/index.d.ts

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

package/lib/icons/programming-languages/ruby-logo/ruby-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/programming-languages/rust-logo/index.d.ts

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

package/lib/icons/programming-languages/rust-logo/rust-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/programming-languages/swift-logo/index.d.ts

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

package/lib/icons/programming-languages/swift-logo/swift-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.js

@@ -1,10 +1,10 @@
 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 { A as ArrowIcon, f as CheckIcon, C as CodeIcon, a as CopyIcon, g as CrossIcon, E as ExtendArrowIcon, d as EyeClosedIcon, e as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, b as NotebookIcon, P as PlusIcon, S as SearchIcon, c as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-BJxaoI0G.js';
+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 CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, T as TracesIcon, W as WarningTriangleIcon } from './index-DLKEpJJm.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-ixs381n-.js';
 import './index-DIcomki-.js';
 import './types.js';
 import 'styled-components';
@@ -65,6 +65,13 @@ const TraceViewIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, 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 }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M2 12H5.27924C5.70967 12 6.09181 11.7246 6.22792 11.3162L9 3L15 21L17.7721 12.6838C17.9082 12.2754 18.2903 12 18.7208 12H22' })));
+};
+
 const ErrorRoundIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.error;
@@ -72,4 +79,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, ErrorRoundIcon, LightOffIcon, LightOnIcon, MoonIcon, ServiceMapIcon, SunIcon, TraceViewIcon };
+export { CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, LightOffIcon, LightOnIcon, MoonIcon, ServiceMapIcon, SunIcon, TraceViewIcon };