@odigos/ui-kit 0.0.55 → 0.0.56

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.0.56](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.55...ui-kit-v0.0.56) (2025-07-15)
+
+
+### Bug Fixes
+
+* crash related to `parseBooleanFromString` ([#233](https://github.com/odigos-io/ui-kit/issues/233)) ([e8bbd5c](https://github.com/odigos-io/ui-kit/commit/e8bbd5cc07e88576c1997518da4d8447353dad35))
+* icon button not clicking ([#236](https://github.com/odigos-io/ui-kit/issues/236)) ([5bcedd6](https://github.com/odigos-io/ui-kit/commit/5bcedd6be4e1de384c1d7efe221f22fca872b661))
+* metric edges z-index ([#235](https://github.com/odigos-io/ui-kit/issues/235)) ([579093b](https://github.com/odigos-io/ui-kit/commit/579093b9261206a04c99491ea003d87eab1472da))
+
 ## [0.0.55](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.54...ui-kit-v0.0.55) (2025-07-14)
 
 

package/lib/components.js

@@ -1,11 +1,11 @@
-import { B as Button } from './index-cd2972ab.js';
-export { A as AutocompleteInput, a as Badge, a5 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, 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, a4 as FlexColumn, a3 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, a8 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a7 as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, a9 as TableContainer, aa as TableTitleWrap, ab as TableWrap, Y as Tag, Z as Text, _ as TextArea, $ as Toggle, T as ToggleCodeComponent, a0 as Tooltip, a1 as TraceLoader, a6 as VerticalScroll, a2 as WarningModal } from './index-cd2972ab.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-d0c9f285.js';
+import { B as Button } from './index-ad94963f.js';
+export { A as AutocompleteInput, a as Badge, a5 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, 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, a4 as FlexColumn, a3 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, a8 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a7 as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, a9 as TableContainer, aa as TableTitleWrap, ab as TableWrap, Y as Tag, Z as Text, _ as TextArea, $ as Toggle, T as ToggleCodeComponent, a0 as Tooltip, a1 as TraceLoader, a6 as VerticalScroll, a2 as WarningModal } from './index-ad94963f.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-1de4c5cd.js';
 import React, { createContext, Component, createElement } from 'react';
 import { T as Theme } from './index-cccea570.js';
 import './types.js';
 import './index-b08f2a91.js';
-import './index-ff710eae.js';
+import './index-03c3e255.js';
 import 'styled-components';
 import './index-ad99c5fe.js';
 import './index-ec555530.js';

package/lib/containers.js

@@ -2,15 +2,15 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, us
 import styled, { css } from 'styled-components';
 import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, j as ImageErrorIcon, a0 as useDarkMode } from './index-cccea570.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind } from './types.js';
-import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, Z as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, _ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a4 as FlexColumn, M as Modal, N as NavigationButtons, a8 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a3 as FlexRow, a0 as Tooltip, s as IconWrapped, G as MonitorsIcons, a9 as TableContainer, aa as TableTitleWrap, r as IconTitleBadge, ab as TableWrap, y as InteractiveTable, a5 as CenterThis, J as NoDataFound, a1 as TraceLoader, a as Badge, E as ExtendArrow, a6 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ac as nodeConfig, ad as useNodesState, ae as useEdgesState, af as Flow, ag as applyNodeChanges, P as Popup, $ as Toggle, I as IconButton, ah as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, ai as MarkerType, t as IconsNav, aj as CopyText, h as DescribeRow, ak as PodContainer, al as SourceContainer, q as IconGroup, O as PopupForm } from './index-cd2972ab.js';
+import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, Z as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, _ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a4 as FlexColumn, M as Modal, N as NavigationButtons, a8 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a3 as FlexRow, a0 as Tooltip, s as IconWrapped, G as MonitorsIcons, a9 as TableContainer, aa as TableTitleWrap, r as IconTitleBadge, ab as TableWrap, y as InteractiveTable, a5 as CenterThis, J as NoDataFound, a1 as TraceLoader, a as Badge, E as ExtendArrow, a6 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ac as nodeConfig, ad as useNodesState, ae as useEdgesState, af as Flow, ag as applyNodeChanges, P as Popup, $ as Toggle, I as IconButton, ah as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, ai as MarkerType, t as IconsNav, aj as CopyText, h as DescribeRow, ak as PodContainer, al as SourceContainer, q as IconGroup, O as PopupForm } from './index-ad94963f.js';
 import { i as isEmpty, s as safeJsonParse } from './index-ec555530.js';
 import { C as CheckCircledIcon, O as OdigosLogo } from './index-ad99c5fe.js';
 import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, R as RetryIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-59f6374b.js';
 import { useActionFormData, useSessionStorage, useDataStreamFormData, useDestinationFormData, useClickNotification, useSourceFormData, useSourceSelectionFormData } from './hooks.js';
 import { u as useKeyDown, a as useOnClickOutside, b as useContainerSize, c as useClickNode, d as usePopup, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-d4c82b6e.js';
 import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, A as ArrowIcon, P as PlusIcon, a as CopyIcon } from './index-b08f2a91.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-d0c9f285.js';
-import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, e as splitCamelString, c as capitalizeFirstLetter, p as parseBooleanFromString } from './index-ff710eae.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-1de4c5cd.js';
+import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-03c3e255.js';
 import { f as filterActions, m as getEntityLabel, l as getEntityIcon, w as sleep, o as getPlatformIcon, p as getPlatformLabel, h as formatBytes, j as getContainersIcons, q as getValueForRange, k as getDestinationIcon, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, v as mapDestinationFieldsForDisplay, c as compareCondition, s as getYamlFieldsForDestination, d as deepClone, n as getMetricForEntity, r as getWorkloadId, t as hasUnhealthyInstances, i as getContainersInstrumentedCount, u as isOverTime } from './index-016ca5d0.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
 import { NoteBackToSummary, EditButton } from './snippets.js';
@@ -1073,7 +1073,7 @@ const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) =
         isOpen && withSelect && (React.createElement(AbsoluteContainer, null,
             React.createElement(HeadWrap, null,
                 React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
-            React.createElement(VerticalScroll, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, status }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: status === StatusType.Success ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
+            React.createElement(VerticalScroll, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, status }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)?.({ fill: status === StatusType.Success ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
                     if (status === StatusType.Success) {
                         onSelect(filtered[idx]);
                     }
@@ -4680,7 +4680,7 @@ const Describe = ({ fetchDescribeOdigos }) => {
         ? [
             React.createElement(Divider, { key: `divider-${obj.name}` }),
             React.createElement(DescribeRow, { key: `describe-row-${obj.name}`, title: obj.name, subTitle: obj.explain || undefined, value: {
-                    status: obj.status || parseBooleanFromString(obj.value) ? StatusType.Success : StatusType.Error,
+                    status: obj.status || (isStringABoolean(obj.value) ? (parseBooleanFromString(obj.value) ? StatusType.Success : StatusType.Error) : StatusType.Default),
                     text: obj.value,
                 } }),
         ]

package/lib/functions/index.d.ts

@@ -34,6 +34,7 @@ export * from './has-unhealthy-instances';
 export * from './is-emtpy';
 export * from './is-legal-k8s-label';
 export * from './is-over-time';
+export * from './is-string-a-boolean';
 export * from './is-time-elapsed';
 export * from './is-valid-version';
 export * from './map-conditions';

package/lib/functions/is-string-a-boolean/index.d.ts

@@ -0,0 +1 @@
+export declare const isStringABoolean: (value: boolean | string | number) => boolean;

package/lib/functions.js

@@ -1,4 +1,4 @@
-export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getConditionsBooleans, a as getMonitorIcon, b as getStatusIcon, i as isValidVersion, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, d as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, e as splitCamelString } from './index-ff710eae.js';
+export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getConditionsBooleans, a as getMonitorIcon, b as getStatusIcon, i as isStringABoolean, d as isValidVersion, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, e as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, h as splitCamelString } from './index-03c3e255.js';
 export { c as compareCondition, d as deepClone, f as filterActions, a as filterDestinations, b as filterDestinationsByStream, e as filterSources, g as filterSourcesByStream, h as formatBytes, j as getContainersIcons, i as getContainersInstrumentedCount, k as getDestinationIcon, l as getEntityIcon, m as getEntityLabel, n as getMetricForEntity, o as getPlatformIcon, p as getPlatformLabel, q as getValueForRange, r as getWorkloadId, s as getYamlFieldsForDestination, t as hasUnhealthyInstances, u as isOverTime, v as mapDestinationFieldsForDisplay, w as sleep } from './index-016ca5d0.js';
 export { g as getActionIcon, c as getEntityId, d as getInstrumentationRuleIcon, e as getProgrammingLanguageIcon } from './index-cccea570.js';
 export { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';

package/lib/{index-ff710eae.js → index-03c3e255.js}

@@ -113,6 +113,12 @@ const getStatusIcon = (type, theme) => {
     return LOGOS[type];
 };
 
+const isStringABoolean = (value) => {
+    const normalizedValue = String(value).trim().toLowerCase();
+    const booleanValues = ['true', 'false', '1', '0'];
+    return booleanValues.includes(normalizedValue);
+};
+
 const SEMVER_REGEX = /^(\d+\.)?(\d+\.)?(\*|\d+)$/;
 const isValidVersion = (version) => SEMVER_REGEX.test(version);
 
@@ -149,7 +155,8 @@ const parseBooleanFromString = (value) => {
         return false;
     }
     else {
-        throw new Error(`Cannot parse boolean from string: "${value}"`);
+        console.warn(`Cannot parse boolean from string: "${value}"`);
+        return false;
     }
 };
 
@@ -215,4 +222,4 @@ const safeJsonStringify = (obj, indent = 2) => {
     return JSON.stringify(obj || {}, null, indent);
 };
 
-export { getMonitorIcon as a, getStatusIcon as b, capitalizeFirstLetter as c, parseJsonStringToPrettyString as d, splitCamelString as e, flattenObjectKeys as f, getConditionsBooleans as g, isValidVersion as i, mapConditions as m, numbersOnly as n, parseBooleanFromString as p, removeEmptyValuesFromObject as r, safeJsonStringify as s };
+export { getMonitorIcon as a, getStatusIcon as b, capitalizeFirstLetter as c, isValidVersion as d, parseJsonStringToPrettyString as e, flattenObjectKeys as f, getConditionsBooleans as g, splitCamelString as h, isStringABoolean as i, mapConditions as m, numbersOnly as n, parseBooleanFromString as p, removeEmptyValuesFromObject as r, safeJsonStringify as s };

package/lib/{index-d0c9f285.js → index-1de4c5cd.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a2 as WarningModal } from './index-cd2972ab.js';
+import { a2 as WarningModal } from './index-ad94963f.js';
 import { StatusType, EntityTypes } from './types.js';
 import './index-cccea570.js';
 import 'styled-components';

package/lib/{index-cd2972ab.js → index-ad94963f.js}

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, forwardRef, useMemo, createElement,
 import { T as Theme, B as BUTTON_TEXTS, j as ImageErrorIcon, M as MONITORS_OPTIONS, a1 as styleInject, U as usePendingStore, $ as useSelectedStore, Z as useInstrumentStore, Q as useActiveNodeStore, V as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, e as getProgrammingLanguageIcon } from './index-cccea570.js';
 import { StatusType, OtherStatus, EntityTypes, NodeTypes, AddNodeTypes, EdgeTypes, ProgrammingLanguages, IntrumentationStatus, SortDirection, InputTypes, FieldTypes } from './types.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, A as ArrowIcon } from './index-b08f2a91.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, p as parseBooleanFromString, i as isValidVersion, e as splitCamelString, d as parseJsonStringToPrettyString, n as numbersOnly } from './index-ff710eae.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-03c3e255.js';
 import styled, { css } from 'styled-components';
 import { s as safeJsonParse, i as isEmpty } from './index-ec555530.js';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -354,13 +354,15 @@ const Container$F = styled.div `
   ${({ $bottom }) => $bottom !== undefined && `bottom: ${$bottom}px;`}
   ${({ $left }) => $left !== undefined && `left: ${$left}px;`}
   ${({ $right }) => $right !== undefined && `right: ${$right}px;`}
-  z-index: 99999;
+  z-index: 9999;
 
   background-color: ${({ theme }) => theme.colors.info};
   border: 1px solid ${({ theme }) => theme.colors.border};
   border-radius: ${({ $borderRadius }) => ($borderRadius !== undefined ? $borderRadius : '24px')};
   max-width: ${({ $maxWidth }) => ($maxWidth !== undefined ? $maxWidth : 'unset')};
   width: ${({ $width }) => ($width !== undefined ? $width : 'unset')};
+
+  ${({ $asPortal }) => $asPortal && `pointer-events: none;`}
 `;
 const Header$3 = styled.div `
   padding: ${({ $padding }) => ($padding !== undefined ? $padding : '12px')};
@@ -376,11 +378,11 @@ const Footer$1 = styled.div `
 const Popup = forwardRef(({ isOpen, asPortal, ...props }, ref) => {
     const Element = useMemo(() => {
         const { children, top, bottom, left, right, borderRadius, padding, maxWidth, width, header, footer } = props;
-        return (React.createElement(Container$F, { ref: ref, "$top": top, "$bottom": bottom, "$left": left, "$right": right, "$borderRadius": borderRadius, "$padding": padding, "$maxWidth": maxWidth, "$width": width },
+        return (React.createElement(Container$F, { ref: ref, "$top": top, "$bottom": bottom, "$left": left, "$right": right, "$borderRadius": borderRadius, "$padding": padding, "$maxWidth": maxWidth, "$width": width, "$asPortal": asPortal },
             header && React.createElement(Header$3, { "$padding": padding }, header),
             React.createElement(Body$1, { "$padding": padding }, children),
             footer && React.createElement(Footer$1, { "$padding": padding }, footer)));
-    }, [props, ref]);
+    }, [ref, props, asPortal]);
     if (!isOpen)
         return null;
     if (asPortal)
@@ -473,7 +475,7 @@ const Tooltip = ({ withIcon, titleIcon: TitleIcon, title, text, timestamp, child
     return (React.createElement(TooltipContainer, { onMouseEnter: handleMouseEvent, onMouseMove: handleMouseEvent, onMouseLeave: handleMouseEvent },
         children,
         withIcon && React.createElement(InfoIcon, null),
-        React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, ...popupPosition, asPortal: true, maxWidth: '270px', borderRadius: '16px', padding: '8px 12px' },
+        React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, top: popupPosition.top, left: popupPosition.left, asPortal: true, maxWidth: '270px', borderRadius: '16px', padding: '8px 12px' },
             React.createElement(Text, { size: 12, color: theme.text.secondary },
                 (!!TitleIcon || !!title) && (React.createElement(FlexRow, { style: { marginBottom: '4px' }, "$gap": 4 },
                     TitleIcon && React.createElement(TitleIcon, { fill: theme.text.secondary, size: 12 }),
@@ -4098,7 +4100,7 @@ const Status = ({ title, subtitle, status = StatusType.Default, forceIcon: Force
         ? () => React.createElement(ForceIcon, { size: size + 2, fill: theme.text[statusType] })
         : status === OtherStatus.Loading
             ? () => React.createElement(FadeLoader, { scale: 0.8 })
-            : () => getStatusIcon(statusType, theme)({ size: size + 2 });
+            : () => getStatusIcon(statusType, theme)?.({ size: size + 2 });
     return (React.createElement(Container$A, { "$status": statusType, "$width": width, "$size": size, "$withIcon": withIcon, "$withBorder": withBorder, "$withBackground": withBackground },
         withIcon && (React.createElement(IconWrapper$4, null,
             React.createElement(StatusIcon, null))),
@@ -4438,10 +4440,10 @@ const PodContainer = ({ containerName, actualDevices, started, ready, instrument
     const componentsUnderTitles = useMemo(() => {
         const arr = [];
         if (started?.name) {
-            arr.push(React.createElement(Status, { status: parseBooleanFromString(started.value) ? StatusType.Success : StatusType.Error, title: started.name, withIcon: true, withBorder: true, size: 8 }));
+            arr.push(React.createElement(Status, { status: isStringABoolean(started.value) ? (parseBooleanFromString(started.value) ? StatusType.Success : StatusType.Error) : StatusType.Default, title: started.name, withIcon: true, withBorder: true, size: 8 }));
         }
         if (ready?.name) {
-            arr.push(React.createElement(Status, { status: parseBooleanFromString(ready.value) ? StatusType.Success : StatusType.Error, title: ready.name, withIcon: true, withBorder: true, size: 8 }));
+            arr.push(React.createElement(Status, { status: isStringABoolean(ready.value) ? (parseBooleanFromString(ready.value) ? StatusType.Success : StatusType.Error) : StatusType.Default, title: ready.name, withIcon: true, withBorder: true, size: 8 }));
         }
         return arr;
     }, [started?.name, started?.value, ready?.name, ready?.value]);
@@ -16737,6 +16739,7 @@ NoDataNode.displayName = NoDataNode.name;
 const Label$1 = styled.div `
   position: absolute;
   transform: ${({ $labelX, $labelY }) => `translate(-50%, -50%) translate(${$labelX}px, ${$labelY}px)`};
+  z-index: 1;
   width: 75px;
   padding: 2px 6px;
   background-color: ${({ theme }) => theme.colors.primary};

package/lib/snippets.js

@@ -1,12 +1,12 @@
-import { B as Button, Z as Text, L as NotificationNote } from './index-cd2972ab.js';
-export { ah as AddButton, am as AddNode, an as BaseNode, aj as CopyText, ao as EdgedNode, af as Flow, ap as FrameNode, aq as HeaderNode, av as LabeledEdge, ar as MapItemNode, as as NoDataNode, ak as PodContainer, at as ScrollNode, au as SkeletonNode, al as SourceContainer, ac as nodeConfig } from './index-cd2972ab.js';
+import { B as Button, Z as Text, L as NotificationNote } from './index-ad94963f.js';
+export { ah as AddButton, am as AddNode, an as BaseNode, aj as CopyText, ao as EdgedNode, af as Flow, ap as FrameNode, aq as HeaderNode, av as LabeledEdge, ar as MapItemNode, as as NoDataNode, ak as PodContainer, at as ScrollNode, au as SkeletonNode, al as SourceContainer, ac as nodeConfig } from './index-ad94963f.js';
 import React from 'react';
 import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-cccea570.js';
 import { E as EditIcon } from './index-b08f2a91.js';
 import { StatusType } from './types.js';
 import 'styled-components';
 import { I as InfoIcon } from './index-ad99c5fe.js';
-import './index-ff710eae.js';
+import './index-03c3e255.js';
 import './index-ec555530.js';
 import 'react-dom';
 import './useTransition-d4c82b6e.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "author": "Odigos",
   "repository": {
     "type": "git",
@@ -81,7 +81,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-error-boundary": "^6.0.0",
-    "styled-components": "6.1.19",
+    "styled-components": "^6.1.19",
     "zustand": "^5.0.6"
   },
   "dependencies": {
@@ -92,7 +92,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-error-boundary": "^6.0.0",
-    "styled-components": "6.1.19",
+    "styled-components": "^6.1.19",
     "zustand": "^5.0.6"
   },
   "devDependencies": {
@@ -108,15 +108,15 @@
     "@storybook/addon-docs": "^9.0.16",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/react-webpack5": "9.0.16",
-    "@types/node": "^24.0.13",
+    "@types/node": "^24.0.14",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "babel-loader": "^10.0.0",
     "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.31.0",
-    "eslint-config-next": "^15.3.5",
+    "eslint-config-next": "^15.4.1",
     "eslint-plugin-storybook": "9.0.16",
-    "next": "^15.3.5",
+    "next": "^15.4.1",
     "postcss": "^8.5.6",
     "rollup": "^3.29.4",
     "rollup-plugin-postcss": "^4.0.2",