@odigos/ui-kit 0.0.15 → 0.0.17

package/lib/{index-zMKRaKMY.js → index-BiNX-Cge.js}

@@ -1,14 +1,14 @@
 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 styled, { css } from 'styled-components';
+import { S as StatusType, O as OtherStatus, c as SortDirection, a as ProgrammingLanguages, E as EntityTypes } from './index-BVVVevuY.js';
 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-BxQTUOME.js';
+import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, 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-BJxaoI0G.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-C1PCuZgw.js';
+import { u as useContainerSize, a as useCopy, d as useTransition, b as useKeyDown, c as useOnClickOutside } from './useTransition-D0wUpPGk.js';
 import ReactDOM from 'react-dom';
+import { I as ImageErrorIcon } from './index-BWqrekK4.js';
 import require$$0 from 'babel-runtime/helpers/extends';
 import require$$1$1 from 'babel-runtime/core-js/object/get-prototype-of';
 import require$$2 from 'babel-runtime/helpers/classCallCheck';
@@ -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-BsH_egEe.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -228,7 +228,7 @@ const Badge = ({ label, filled, status, withIcon, onClick }) => {
         label));
 };
 
-const Container$u = styled.div `
+const Container$t = styled.div `
   height: fit-content;
   border: 2px solid transparent;
   padding: 2px;
@@ -328,7 +328,7 @@ const StyledButton$2 = styled.button `
 `;
 const Button$4 = ({ children, variant = 'primary', onClick, ...props }) => {
     const ref = useRef(null);
-    return (React.createElement(Container$u, { "$variant": variant },
+    return (React.createElement(Container$t, { "$variant": variant },
         React.createElement(StyledButton$2, { ref: ref, "$variant": variant, onClick: (e) => {
                 if (onClick)
                     onClick(e);
@@ -465,7 +465,7 @@ const FieldError = ({ children }) => {
         React.createElement(ErrorMessage, null, children)));
 };
 
-const Container$t = styled.div `
+const Container$s = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -502,7 +502,7 @@ const Checkbox = ({ title, titleColor, tooltip, value = false, partiallyChecked
             setIsChecked((prev) => (partiallyChecked ? true : !prev));
     };
     return (React.createElement(FlexColumn, null,
-        React.createElement(Container$t, { "data-id": `checkbox${!!title ? `-${title}` : ''}`, "$disabled": disabled, onClick: handleToggle, style: style },
+        React.createElement(Container$s, { "data-id": `checkbox${!!title ? `-${title}` : ''}`, "$disabled": disabled, onClick: handleToggle, style: style },
             React.createElement(CheckboxWrapper, { "$isChecked": isChecked, "$isPartiallyChecked": partiallyChecked, "$disabled": disabled }, partiallyChecked ? React.createElement(MinusIcon, { fill: theme.text.white }) : isChecked ? React.createElement(CheckIcon, { fill: theme.text.white }) : null),
             title && (React.createElement(Tooltip, { text: tooltip, withIcon: true },
                 React.createElement(Text, { size: 12, color: titleColor || theme.text.grey, style: { maxWidth: '90%' } }, title)))),
@@ -3634,7 +3634,7 @@ prismjs/prism.js:
    *)
 */
 
-const Container$s = styled(FlexRow) `
+const Container$r = styled(FlexRow) `
   gap: 0;
 `;
 const Button$3 = styled.button `
@@ -3651,7 +3651,7 @@ const Button$3 = styled.button `
   }
 `;
 const ToggleCodeComponent = ({ isPrettyMode, setIsPrettyMode }) => {
-    return (React.createElement(Container$s, null,
+    return (React.createElement(Container$r, null,
         React.createElement(Button$3, { "$position": 'left', "$selected": isPrettyMode, onClick: () => setIsPrettyMode(true) },
             React.createElement(ListIcon, null)),
         React.createElement(Button$3, { "$position": 'right', "$selected": !isPrettyMode, onClick: () => setIsPrettyMode(false) },
@@ -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: crypto.randomUUID(), 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: crypto.randomUUID(), 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: crypto.randomUUID() });
+                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: crypto.randomUUID(), 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)),
@@ -3952,18 +3952,18 @@ const FadeLoader = ({ loading = true, color: clr, scale = 1, speedMultiplier = 1
             } })));
 };
 
-const Container$r = styled.div `
+const Container$q = styled.div `
   margin: ${({ $align }) => ($align === 'right' ? 'auto 6px auto auto' : $align === 'left' ? 'auto auto auto 6px' : 'auto')};
   display: flex;
   align-items: center;
   justify-content: center;
 `;
 const ExtendArrow = ({ extend, size = 14, align = 'center' }) => {
-    return (React.createElement(Container$r, { "$align": align },
+    return (React.createElement(Container$q, { "$align": align },
         React.createElement(ExtendArrowIcon, { size: size, rotate: extend ? 180 : 0 })));
 };
 
-const Container$q = styled.div `
+const Container$p = styled.div `
   border-radius: 24px;
   background-color: ${({ theme, $status }) => $status === StatusType.Error
     ? theme.text.error + Theme.opacity.hex['010']
@@ -3980,7 +3980,7 @@ const Container$q = styled.div `
   cursor: pointer;
   transition: background 0.3s;
 `;
-const Header$2 = styled.div `
+const Header$1 = styled.div `
   display: flex;
   align-items: center;
   gap: 12px;
@@ -4023,8 +4023,8 @@ const ConditionDetails = ({ conditions: c, headerLabelError = 'Something Failed'
     const headerSubText = `(${hasErrors ? errors.length : hasWarnings ? warnings.length : conditions.length}/${conditions.length})`;
     const headerSubTextColor = hasErrors ? theme.text.error_secondary : hasWarnings ? theme.text.warning_secondary : theme.text.info_secondary;
     const toggleExtend = useCallback(() => setExtend((prev) => !prev), []);
-    return (React.createElement(Container$q, { onClick: toggleExtend, "$status": overallStatus },
-        React.createElement(Header$2, null,
+    return (React.createElement(Container$p, { onClick: toggleExtend, "$status": overallStatus },
+        React.createElement(Header$1, null,
             loading ? React.createElement(FadeLoader, null) : React.createElement(HeaderIcon, null),
             React.createElement(Text, { color: headerTextColor, size: 14 }, headerText),
             React.createElement(Text, { color: headerSubTextColor, size: 12, family: 'secondary' }, headerSubText),
@@ -4059,7 +4059,7 @@ const Divider = ({ orientation = 'horizontal', type, thickness = 1, length, marg
     return React.createElement(StyledDivider, { "$orientation": orientation, "$type": type, "$thickness": thickness, "$length": length, "$margin": margin });
 };
 
-const Container$p = styled.div `
+const Container$o = styled.div `
   display: flex;
   align-items: center;
   gap: ${({ $size }) => $size / 3}px;
@@ -4081,7 +4081,7 @@ const Status = ({ title, subtitle, size = 12, family = 'secondary', status = Sta
     const theme = Theme.useTheme();
     const statusType = status === OtherStatus.Loading ? StatusType.Info : status;
     const StatusIcon = status === OtherStatus.Loading ? () => React.createElement(FadeLoader, { scale: 0.8 }) : () => getStatusIcon(statusType, theme)({ size: size + 2 });
-    return (React.createElement(Container$p, { "$size": size, "$status": statusType, "$withIcon": withIcon, "$withBorder": withBorder, "$withBackground": withBackground },
+    return (React.createElement(Container$o, { "$size": size, "$status": statusType, "$withIcon": withIcon, "$withBorder": withBorder, "$withBackground": withBackground },
         withIcon && (React.createElement(IconWrapper$4, null,
             React.createElement(StatusIcon, null))),
         (!!title || !!subtitle) && (React.createElement(TextWrapper$1, null,
@@ -4098,7 +4098,7 @@ const ImageControlled = ({ src = '', alt = '', size = 16 }) => {
     return React.createElement(ImageErrorIcon, { size: size });
 };
 
-const Container$o = styled.div `
+const Container$n = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4111,10 +4111,10 @@ const Container$o = styled.div `
 }};
 `;
 const IconWrapped = ({ icon: Icon, src = '', alt = '', status, size = 36 }) => {
-    return (React.createElement(Container$o, { "$status": status, "$size": size }, src ? React.createElement(ImageControlled, { src: src, alt: alt, size: size - 16 }) : !!Icon ? React.createElement(Icon, { size: size - 16 }) : React.createElement(ImageErrorIcon, { size: size - 16 })));
+    return (React.createElement(Container$n, { "$status": status, "$size": size }, src ? React.createElement(ImageControlled, { src: src, alt: alt, size: size - 16 }) : !!Icon ? React.createElement(Icon, { size: size - 16 }) : React.createElement(ImageErrorIcon, { size: size - 16 })));
 };
 
-const Container$n = styled.div `
+const Container$m = styled.div `
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -4140,11 +4140,11 @@ const IconWrapper$3 = styled.div `
   height: ${({ $size }) => $size}px;
   border-radius: 100%;
 `;
-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 > 0) {
-        return React.createElement(IconGroup, { icons: iconSrcs.map((src) => (() => React.createElement(ImageControlled, { src: src, size: imgSize }))), status: status, size: size });
+        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 });
@@ -4164,10 +4164,10 @@ const IconGroup = ({ icons = [], iconSrcs = [], status, size = 36 }) => {
         }
         return imgSize * 1.4;
     };
-    return (React.createElement(Container$n, { "$status": status, "$size": size }, icons.map((Icon, idx) => {
+    return (React.createElement(Container$m, { "$status": status, "$size": size }, icons.map((Icon, idx) => {
         if (idx > 2)
             return null;
-        return (React.createElement(IconWrapper$3, { key: crypto.randomUUID(), "$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 },
+        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 }))));
     })));
@@ -4213,29 +4213,10 @@ const IconButton = ({ children, onClick, tooltip, size = 36, withPing, pingColor
             children)));
 };
 
-const defaultMonitors = MONITORS_OPTIONS.map(({ id }) => id);
-const MonitorsIcons = ({ monitors = defaultMonitors, withTooltips, withLabels, size = 12, color: clr }) => {
-    const theme = Theme.useTheme();
-    const color = clr || theme.text.grey;
-    return (React.createElement(FlexRow, { "$gap": withLabels ? size : size / 2 }, monitors
-        .filter((str) => !!str)
-        .map((str) => {
-        const signal = str.toLowerCase();
-        const displayName = capitalizeFirstLetter(signal);
-        const Icon = getMonitorIcon(signal);
-        if (!Icon)
-            return null;
-        return (React.createElement(Tooltip, { key: signal, text: withTooltips ? displayName : '' },
-            React.createElement(FlexRow, { "$gap": size / 3 },
-                React.createElement(Icon, { size: withLabels ? size + 2 : size, fill: color }),
-                withLabels && (React.createElement(Text, { size: size, color: color }, displayName)))));
-    })));
-};
-
 const ControlledVisibility = styled.div `
   visibility: hidden;
 `;
-const Container$m = styled.div `
+const Container$l = styled.div `
   display: flex;
   flex-direction: column;
   align-self: stretch;
@@ -4276,16 +4257,12 @@ const Title$b = styled(Text) `
     display: block;
   }
 `;
-const SubTitleWrapper = styled.div `
+const SubTitle$2 = styled(Text) `
   max-width: ${({ $maxWidth }) => $maxWidth}px;
   overflow: hidden;
   white-space: nowrap;
+  text-overflow: ellipsis;
 
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const SubTitle$2 = styled(Text) `
   color: ${({ theme }) => theme.text.grey};
   font-size: 10px;
 `;
@@ -4298,13 +4275,15 @@ const ActionsWrapper = styled.div `
 const HoverText = styled(Text) `
   margin-right: 16px;
 `;
-const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, status, faded, bgColor, bgColorHover, 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, 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);
+    const [isSubTitleOverflowed, setSubIsTitleOverflowed] = useState(false);
     const containerRef = useRef(null);
     const actionsRef = useRef(null);
     const titleRef = useRef(null);
+    const subTitleRef = useRef(null);
     useEffect(() => {
         if (containerRef.current && actionsRef.current) {
             const containerWidth = containerRef.current.clientWidth;
@@ -4316,40 +4295,27 @@ const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, s
         }
     }, []);
     useEffect(() => {
-        const { current } = titleRef;
-        if (current) {
-            const { clientWidth } = current;
-            const marginUp = maxWidth * 1.05; // add 5%
-            const marginDown = maxWidth * 0.95; // subtract 5%
+        const marginUp = maxWidth * 1.05; // add 5%
+        const marginDown = maxWidth * 0.95; // subtract 5%
+        if (titleRef.current) {
+            const { clientWidth } = titleRef.current;
             setIsTitleOverflowed(clientWidth < marginUp && clientWidth > marginDown);
         }
-    }, [title, maxWidth]);
-    const renderMonitors = (withSeperator) => {
-        if (!monitors || !monitors.length)
-            return null;
-        return (React.createElement(React.Fragment, null,
-            withSeperator && React.createElement(SubTitle$2, null, '•'),
-            React.createElement(MonitorsIcons, { monitors: monitors, withLabels: monitorsWithLabels, size: 10 })));
-    };
-    const renderActiveStatus = (withSeperator) => {
-        if (typeof isActive !== 'boolean')
-            return null;
-        return (React.createElement(React.Fragment, null,
-            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, "$bgColor": bgColor, "$bgColorHover": bgColorHover, "$withClick": !!onClick, onClick: onClick, ...props },
+        if (subTitleRef.current) {
+            const { clientWidth } = subTitleRef.current;
+            setSubIsTitleOverflowed(clientWidth < marginUp && clientWidth > marginDown);
+        }
+    }, [title, subTitle, maxWidth]);
+    return (React.createElement(Container$l, { 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, { "$maxWidth": maxWidth },
-                    subTitle && React.createElement(SubTitle$2, null, subTitle),
-                    renderMonitors(!!subTitle),
-                    renderActiveStatus(!!monitors?.length))),
+                subTitle && (React.createElement(Tooltip, { text: isSubTitleOverflowed ? subTitle : undefined, withIcon: false },
+                    React.createElement(SubTitle$2, { ref: subTitleRef, "$maxWidth": maxWidth }, subTitle)))),
             React.createElement(ActionsWrapper, { ref: actionsRef },
                 !!hoverText && (React.createElement(ControlledVisibility, null,
                     React.createElement(HoverText, { size: 14, family: 'secondary' }, hoverText))),
@@ -4363,7 +4329,7 @@ const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, s
             renderExtended()))));
 };
 
-const Container$l = styled(FlexRow) `
+const Container$k = styled(FlexRow) `
   width: 100%;
   justify-content: space-between;
 `;
@@ -4386,7 +4352,7 @@ const ValueText = styled(Text) `
   text-align: right;
 `;
 const DescribeRow = ({ title, subTitle, tooltip, value }) => {
-    return (React.createElement(Container$l, null,
+    return (React.createElement(Container$k, null,
         React.createElement(FlexColumn, { "$gap": 4 },
             React.createElement(Tooltip, { text: tooltip || '' },
                 title && React.createElement(Title$a, null, title),
@@ -4394,6 +4360,25 @@ const DescribeRow = ({ title, subTitle, tooltip, value }) => {
         React.createElement(ValueWrapper, null, !!value?.status ? (React.createElement(Status, { status: value.status === 'transitioning' ? OtherStatus.Loading : value.status, title: value.text || value.status, withBorder: true, withIcon: true })) : (React.createElement(ValueText, null, value?.text || '-')))));
 };
 
+const defaultMonitors = MONITORS_OPTIONS.map(({ id }) => id);
+const MonitorsIcons = ({ monitors = defaultMonitors, withTooltips, withLabels, size = 12, color: clr }) => {
+    const theme = Theme.useTheme();
+    const color = clr || theme.text.grey;
+    return (React.createElement(FlexRow, { "$gap": withLabels ? size : size / 2 }, monitors
+        .filter((str) => !!str)
+        .map((str) => {
+        const signal = str.toLowerCase();
+        const displayName = capitalizeFirstLetter(signal);
+        const Icon = getMonitorIcon(signal);
+        if (!Icon)
+            return null;
+        return (React.createElement(Tooltip, { key: signal, text: withTooltips ? displayName : '' },
+            React.createElement(FlexRow, { "$gap": size / 3 },
+                React.createElement(Icon, { size: withLabels ? size + 2 : size, fill: color }),
+                withLabels && (React.createElement(Text, { size: size, color: color }, displayName)))));
+    })));
+};
+
 const Tr = styled.tr `
   cursor: ${({ $withHover }) => ($withHover ? 'pointer' : 'default')};
   opacity: ${({ $faded }) => ($faded ? 0.5 : 1)};
@@ -4446,14 +4431,14 @@ 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: crypto.randomUUID(), "$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 })));
     })));
 };
 
-const Container$k = styled.div `
+const Container$j = styled.div `
   width: 100%;
 `;
 const Table = styled.table `
@@ -4527,7 +4512,7 @@ const InteractiveTable = ({ columns, rows }) => {
             })
             : rows).map(({ status, faded, cells, onClick }, i) => React.createElement(TableRow, { key: `row-${i}`, index: i, columns: columns, cells: cells, onClick: onClick, status: status, faded: faded }));
     }, [columns, rows, sortBy, sortDirection]);
-    return (React.createElement(Container$k, null,
+    return (React.createElement(Container$j, null,
         React.createElement(Table, null,
             React.createElement(TableHead, null,
                 React.createElement("tr", null, columns.map(({ key, title, sortable }) => (React.createElement(TableTitle, { key: `column-${key}` }, sortable ? (React.createElement(SortClickable, { onClick: () => onSort(key) },
@@ -4659,13 +4644,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: crypto.randomUUID(), 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: {
@@ -4678,12 +4666,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 }));
                 } }));
@@ -4706,7 +4699,7 @@ const CardContainer = styled.div `
   background-color: ${({ theme, $hovered }) => ($hovered ? theme.colors.secondary + Theme.opacity.hex['010'] : 'transparent')};
   transition: background-color 0.3s;
 `;
-const Header$1 = styled.div `
+const Header = styled.div `
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -4732,7 +4725,7 @@ const DataCard = ({ title = 'Details', titleBadge, description, action: Action,
     const [extend, setExtend] = useState(false);
     const [hovered, setHovered] = useState(false);
     return (React.createElement(CardContainer, { "$hovered": hovered },
-        !!title || !!description || !!Action ? (React.createElement(Header$1, { "$clickable": withExtend || false, onClick: () => withExtend && setExtend((prev) => !prev), onMouseEnter: () => withExtend && setHovered(true), onMouseLeave: () => withExtend && setHovered(false) },
+        !!title || !!description || !!Action ? (React.createElement(Header, { "$clickable": withExtend || false, onClick: () => withExtend && setExtend((prev) => !prev), onMouseEnter: () => withExtend && setHovered(true), onMouseLeave: () => withExtend && setHovered(false) },
             (!!title || !!Action) && (React.createElement(Title$8, null,
                 title,
                 titleBadge !== undefined && React.createElement(Badge, { label: titleBadge }),
@@ -4776,7 +4769,7 @@ const DocsButton = ({ endpoint = '/', variant = 'secondary' }) => {
         "Docs"));
 };
 
-const Container$j = styled.section `
+const Container$i = styled.section `
   padding: 0px 32px;
   border-bottom: 1px solid ${({ theme }) => theme.colors.border};
 `;
@@ -4815,7 +4808,7 @@ const Tab = styled(Text) `
   align-items: center;
   gap: 8px;
 `;
-const DrawerHeader = ({ onClose, icon, iconSrc, title, titleTooltip, replaceTitleWith: ReplaceTitleWith, actionButtons = [], tabs }) => {
+const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTitleWith: ReplaceTitleWith, actionButtons = [], tabs }) => {
     const renderReplaceTitleWith = () => {
         if (typeof ReplaceTitleWith === 'function') {
             return React.createElement(ReplaceTitleWith, null);
@@ -4825,10 +4818,10 @@ const DrawerHeader = ({ onClose, icon, iconSrc, title, titleTooltip, replaceTitl
         }
         return null;
     };
-    return (React.createElement(Container$j, null,
+    return (React.createElement(Container$i, null,
         React.createElement(TopRow, null,
             React.createElement(SectionItemsWrapper, null,
-                (!!icon || !!iconSrc) && React.createElement(IconWrapped, { icon: icon, src: iconSrc, alt: 'Drawer Item' }),
+                icons?.length || iconSrcs?.length ? React.createElement(IconGroup, { icons: icons, iconSrcs: iconSrcs, id: `drawer-header-${title}` }) : null,
                 renderReplaceTitleWith() || (React.createElement(Tooltip, { text: titleTooltip, withIcon: true }, title && React.createElement(Title$7, null, title)))),
             React.createElement(SectionItemsWrapper, { "$gap": 2 },
                 actionButtons.map((btn, i) => (React.createElement(ActionButton$1, { key: `header-action-button-${i}`, ...btn }))),
@@ -4839,7 +4832,7 @@ const DrawerHeader = ({ onClose, icon, iconSrc, title, titleTooltip, replaceTitl
             Icon && React.createElement(Icon, null))))))));
 };
 
-const Container$i = styled.div `
+const Container$h = styled.div `
   display: flex;
   justify-content: space-between;
   gap: 8px;
@@ -4848,10 +4841,10 @@ const Container$i = styled.div `
   background-color: ${({ theme }) => theme.colors.translucent_bg};
   transform: translateY(100%);
 `;
-const AlignLeft$1 = styled(FlexRow) `
+const AlignLeft = styled(FlexRow) `
   margin-right: auto;
 `;
-const AlignRight$1 = styled(FlexRow) `
+const AlignRight = styled(FlexRow) `
   margin-left: auto;
 `;
 const FooterButton$1 = styled(Button$4) `
@@ -4860,16 +4853,16 @@ const FooterButton$1 = styled(Button$4) `
 `;
 const DrawerFooter = ({ isOpen, leftButtons = [], rightButtons = [] }) => {
     const Transition = useTransition({
-        container: Container$i,
+        container: Container$h,
         animateIn: Theme.animations.slide.in['bottom'],
         animateOut: Theme.animations.slide.out['bottom'],
     });
     return (React.createElement(Transition, { enter: isOpen },
-        React.createElement(AlignLeft$1, null, leftButtons.map((btn, i) => (React.createElement(FooterButton$1, { key: `footer-left-button-${i}`, ...btn })))),
-        React.createElement(AlignRight$1, null, rightButtons.map((btn, i) => (React.createElement(FooterButton$1, { key: `footer-right-button-${i}`, ...btn }))))));
+        React.createElement(AlignLeft, null, leftButtons.map((btn, i) => (React.createElement(FooterButton$1, { key: `footer-left-button-${i}`, ...btn })))),
+        React.createElement(AlignRight, null, rightButtons.map((btn, i) => (React.createElement(FooterButton$1, { key: `footer-right-button-${i}`, ...btn }))))));
 };
 
-const Container$h = styled.div `
+const Container$g = styled.div `
   position: fixed;
   top: 0;
   bottom: 0;
@@ -4896,7 +4889,7 @@ const Drawer = ({ isOpen, onClose, closeOnEscape = true, position = 'right', wid
         active: isOpen && closeOnEscape,
     }, () => onClose());
     const Transition = useTransition({
-        container: Container$h,
+        container: Container$g,
         animateIn: Theme.animations.slide.in[position],
         animateOut: Theme.animations.slide.out[position],
     });
@@ -4940,7 +4933,7 @@ const FieldLabel = ({ title, required, tooltip, style }) => {
 };
 
 // Styled components remain the same as before
-const Container$g = styled.div `
+const Container$f = styled.div `
   display: flex;
   flex-direction: column;
   position: relative;
@@ -5043,7 +5036,7 @@ const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage,
         if (!['Enter'].includes(e.key))
             e.stopPropagation();
     };
-    return (React.createElement(Container$g, null,
+    return (React.createElement(Container$f, null,
         React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip }),
         React.createElement(InputWrapper$1, { "$disabled": props.disabled, "$hasError": hasError || !!errorMessage, "$isActive": !!props.autoFocus },
             isSecret ? (React.createElement(IconWrapperClickable, { onClick: () => setRevealSecret((prev) => !prev) }, revealSecret ? React.createElement(EyeClosedIcon, { size: 14, fill: theme.text.grey }) : React.createElement(EyeOpenIcon, { size: 14, fill: theme.text.grey }))) : Icon ? (React.createElement(IconWrapper$2, null,
@@ -5053,7 +5046,7 @@ const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage,
         !!errorMessage && React.createElement(FieldError, null, errorMessage)));
 };
 
-const Container$f = styled.div `
+const Container$e = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5075,7 +5068,7 @@ const SubTitle = styled(Text) `
 `;
 const NoDataFound = ({ title = 'No data found', subTitle = 'Check your search phrase and try one more time' }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(Container$f, null,
+    return (React.createElement(Container$e, null,
         React.createElement(TitleWrapper, null,
             React.createElement(NoDataIcon, { fill: theme.text.dark_grey }),
             React.createElement(Title$5, null, title)),
@@ -5250,36 +5243,6 @@ const DropdownListItem = ({ option, value, isMulti, onSelect, onDeselect }) => {
         isSelected && React.createElement(CheckIcon, null)));
 };
 
-const Container$e = styled(FlexRow) `
-  position: relative;
-  width: calc(100% - 24px);
-  padding: 12px;
-  background-color: ${({ theme }) => theme.colors.dark_grey};
-  border-bottom: 1px solid ${({ theme }) => theme.colors.border + Theme.opacity.hex['050']};
-`;
-const AlignLeft = styled(FlexRow) `
-  margin-right: auto;
-  margin-left: 32px;
-  gap: 12px;
-`;
-const AlignRight = styled(FlexRow) `
-  margin-left: auto;
-  margin-right: 32px;
-  gap: 12px;
-`;
-const PositionCenter = styled(FlexRow) `
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  gap: 12px;
-`;
-const Header = ({ left = [], center = [], right = [] }) => {
-    return (React.createElement(Container$e, null,
-        React.createElement(AlignLeft, null, left.map((child, index) => child && React.createElement(Fragment, { key: index }, child))),
-        React.createElement(PositionCenter, null, center.map((child, index) => child && React.createElement(Fragment, { key: index }, child))),
-        React.createElement(AlignRight, null, right.map((child, index) => child && React.createElement(Fragment, { key: index }, child)))));
-};
-
 const Title$4 = styled(Text) `
   color: ${({ theme }) => theme.text.grey};
 `;
@@ -6002,7 +5965,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: crypto.randomUUID(), 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 || '');
                 } },
@@ -29613,4 +29576,4 @@ const WarningModal = ({ isOpen, noOverlay, title = '', description = '', note, a
                 React.createElement(FooterButton, { "data-id": 'deny', variant: denyButton.variant || 'secondary', onClick: onDeny }, denyButton.text)))));
 };
 
-export { FlexColumn as $, AutocompleteInput as A, Button$4 as B, CancelWarning as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, Segment as O, SkeletonLoader as P, Status as Q, Stepper as R, SectionTitle as S, ToggleCodeComponent as T, Text as U, TextArea as V, Toggle as W, Tooltip as X, TraceLoader as Y, WarningModal as Z, FlexRow as _, Badge as a, CenterThis as a0, Overlay as a1, ModalBody as a2, TableContainer as a3, TableTitleWrap as a4, TableWrap as a5, getDefaultExportFromCjs as a6, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e, DataCardFieldTypes as f, DataTab as g, DeleteWarning as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };
+export { CenterThis as $, AutocompleteInput as A, Button$4 as B, CancelWarning as C, DataCard as D, ExtendArrow as E, FlexRow as F, MonitorsCheckboxes as G, MonitorsIcons as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, Segment as O, SkeletonLoader as P, Status as Q, Stepper as R, SectionTitle as S, ToggleCodeComponent as T, Text as U, TextArea as V, Toggle as W, Tooltip as X, TraceLoader as Y, WarningModal as Z, FlexColumn as _, Badge as a, Overlay as a0, ModalBody as a1, TableContainer as a2, TableTitleWrap as a3, TableWrap as a4, getDefaultExportFromCjs as a5, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e, DataCardFieldTypes as f, DataTab as g, DeleteWarning as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FadeLoader as o, FieldError as p, FieldLabel as q, IconGroup as r, IconTitleBadge as s, IconWrapped as t, IconsNav as u, ImageControlled as v, Input as w, InputList as x, InputTable as y, InteractiveTable as z };