@odigos/ui-kit 0.0.16 → 0.0.17

package/lib/{index-D6cZdmUs.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-IvGLauAo.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-CKtl8KxE.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-lL1o2K_5.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-hWYVBuSi.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-DM8CZWtL.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) },
@@ -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;
@@ -4164,7 +4164,7 @@ const IconGroup = ({ icons = [], iconSrcs = [], status, size = 36, id }) => {
         }
         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: `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 },
@@ -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, hoverText, onClick, renderActions, iconProps: { icon, icons, iconSrc, iconSrcs } = {}, visualProps: { status, faded, bgColor, bgColorHover, isActive, monitors, monitorsWithLabels } = {}, checkboxProps: { withCheckbox, isCheckboxDisabled, isChecked, onCheckboxChange } = {}, extendableProps: { withExtend, isExtended, renderExtended } = {}, ...props }) => {
+const 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,29 +4295,18 @@ const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps
         }
     }, []);
     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 }),
@@ -4346,10 +4314,8 @@ const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps
             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, hoverText, onClick, renderActions, iconProps
             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)};
@@ -4453,7 +4438,7 @@ const TableRow = ({ index, columns, cells, onClick, status, faded }) => {
     })));
 };
 
-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) },
@@ -4714,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;
@@ -4740,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 }),
@@ -4784,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};
 `;
@@ -4823,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);
@@ -4833,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 }))),
@@ -4847,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;
@@ -4856,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) `
@@ -4868,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;
@@ -4904,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],
     });
@@ -4948,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;
@@ -5051,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,
@@ -5061,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;
@@ -5083,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)),
@@ -5258,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};
 `;
@@ -29621,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 };

package/lib/{index-DM8CZWtL.js → index-BsH_egEe.js}

@@ -1,6 +1,15 @@
 import React from 'react';
 import Theme from './theme.js';
 
+const OdigosLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: size, height: size * (431 / 511), viewBox: '0 0 511 431', fill: fill, style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { d: 'M308.491 83.3091V0.0765381H472.573C493.785 0.0765381 511 16.4464 511 36.6589V374.508C511 394.72 493.785 411.09 472.573 411.09H308.491V328.396L454.666 263.762C478.721 253.079 493.708 230.791 493.708 205.583C493.708 180.375 478.721 158.011 454.666 147.405L308.414 83.3859L308.491 83.3091Z' }),
+        React.createElement("path", { d: 'M202.51 327.781V411.014H38.4269C17.2152 411.014 0 394.644 0 374.431V36.5824C0 16.3698 17.2152 0 38.4269 0H202.51V82.6946L56.3338 147.329C32.2786 158.011 17.2921 180.299 17.2921 205.507C17.2921 230.715 32.2786 253.079 56.3338 263.685L202.586 327.704L202.51 327.781Z' }),
+        React.createElement("path", { d: 'M255.462 290.507C302.363 290.507 340.385 252.485 340.385 205.584C340.385 158.682 302.363 120.66 255.462 120.66C208.56 120.66 170.538 158.682 170.538 205.584C170.538 252.485 208.56 290.507 255.462 290.507Z' })));
+};
+
 const KafkaLogo = ({ size = 16, fill, rotate = 0, onClick }) => {
     return (React.createElement("svg", { width: size * (256 / 416), height: size, viewBox: '0 0 256 416', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
         React.createElement("path", { fill: fill || '#231f20', d: 'M201.816 230.216c-16.186 0-30.697 7.171-40.634 18.461l-25.463-18.026c2.703-7.442 4.255-15.433 4.255-23.797 0-8.219-1.498-16.076-4.112-23.408l25.406-17.835c9.936 11.233 24.409 18.365 40.548 18.365 29.875 0 54.184-24.305 54.184-54.184 0-29.879-24.309-54.184-54.184-54.184-29.875 0-54.184 24.305-54.184 54.184 0 5.348.808 10.505 2.258 15.389l-25.423 17.844c-10.62-13.175-25.911-22.374-43.333-25.182v-30.64c24.544-5.155 43.037-26.962 43.037-53.019C124.171 24.305 99.862 0 69.987 0 40.112 0 15.803 24.305 15.803 54.184c0 25.708 18.014 47.246 42.067 52.769v31.038C25.044 143.753 0 172.401 0 206.854c0 34.621 25.292 63.374 58.355 68.94v32.774c-24.299 5.341-42.552 27.011-42.552 52.894 0 29.879 24.309 54.184 54.184 54.184 29.875 0 54.184-24.305 54.184-54.184 0-25.883-18.253-47.553-42.552-52.894v-32.775a69.965 69.965 0 0 0 42.6-24.776l25.633 18.143c-1.423 4.84-2.22 9.946-2.22 15.24 0 29.879 24.309 54.184 54.184 54.184 29.875 0 54.184-24.305 54.184-54.184 0-29.879-24.309-54.184-54.184-54.184zm0-126.695c14.487 0 26.27 11.788 26.27 26.271s-11.783 26.27-26.27 26.27-26.27-11.787-26.27-26.27c0-14.483 11.783-26.271 26.27-26.271zm-158.1-49.337c0-14.483 11.784-26.27 26.271-26.27s26.27 11.787 26.27 26.27c0 14.483-11.783 26.27-26.27 26.27s-26.271-11.787-26.271-26.27zm52.541 307.278c0 14.483-11.783 26.27-26.27 26.27s-26.271-11.787-26.271-26.27c0-14.483 11.784-26.27 26.271-26.27s26.27 11.787 26.27 26.27zm-26.272-117.97c-20.205 0-36.642-16.434-36.642-36.638 0-20.205 16.437-36.642 36.642-36.642 20.204 0 36.641 16.437 36.641 36.642 0 20.204-16.437 36.638-36.641 36.638zm131.831 67.179c-14.487 0-26.27-11.788-26.27-26.271s11.783-26.27 26.27-26.27 26.27 11.787 26.27 26.27c0 14.483-11.783 26.271-26.27 26.271z' })));
@@ -463,4 +472,4 @@ const WarningTriangleIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M8 8.66673V6.00006M8 10.9167V10.9175M7.07337 2.18915C7.66595 1.93695 8.33405 1.93695 8.92662 2.18915C10.6942 2.94145 14.8697 9.61453 14.7474 11.3981C14.6994 12.0972 14.3529 12.7408 13.7982 13.1614C12.323 14.2795 3.67698 14.2795 2.20185 13.1614C1.64705 12.7408 1.3006 12.0972 1.25263 11.3981C1.13026 9.61453 5.30575 2.94145 7.07337 2.18915Z' })));
 };
 
-export { CPlusPlusLogo as C, DotnetLogo as D, ElixirLogo as E, GoLogo as G, InfoIcon as I, JavaLogo as J, KafkaLogo as K, LogsIcon as L, MysqlLogo as M, NginxLogo as N, PostgresLogo as P, RedisLogo as R, SwiftLogo as S, TracesIcon as T, WarningTriangleIcon as W, RustLogo as a, RubyLogo as b, PhpLogo as c, CSharpLogo as d, PythonLogo as e, NodejsLogo as f, MetricsIcon as g, ErrorTriangleIcon as h, CheckCircledIcon as i };
+export { CPlusPlusLogo as C, DotnetLogo as D, ElixirLogo as E, GoLogo as G, InfoIcon as I, JavaLogo as J, KafkaLogo as K, LogsIcon as L, MysqlLogo as M, NginxLogo as N, OdigosLogo as O, PostgresLogo as P, RedisLogo as R, SwiftLogo as S, TracesIcon as T, WarningTriangleIcon as W, RustLogo as a, RubyLogo as b, PhpLogo as c, CSharpLogo as d, PythonLogo as e, NodejsLogo as f, MetricsIcon as g, ErrorTriangleIcon as h, CheckCircledIcon as i };

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

@@ -1,9 +1,7 @@
-import { ProgrammingLanguages, SignalType, StatusType } from './types.js';
-import 'react';
-import './index-IvGLauAo.js';
-import 'styled-components';
-import { O as OdigosLogo } from './index-BGlk5VhF.js';
-import { K as KafkaLogo, R as RedisLogo, P as PostgresLogo, N as NginxLogo, M as MysqlLogo, E as ElixirLogo, S as SwiftLogo, a as RustLogo, b as RubyLogo, c as PhpLogo, C as CPlusPlusLogo, d as CSharpLogo, D as DotnetLogo, e as PythonLogo, f as NodejsLogo, G as GoLogo, J as JavaLogo, T as TracesIcon, g as MetricsIcon, L as LogsIcon, I as InfoIcon, W as WarningTriangleIcon, h as ErrorTriangleIcon, i as CheckCircledIcon } from './index-DM8CZWtL.js';
+import { a as ProgrammingLanguages, S as StatusType } from './index-BVVVevuY.js';
+import { K as KafkaLogo, R as RedisLogo, P as PostgresLogo, N as NginxLogo, M as MysqlLogo, E as ElixirLogo, S as SwiftLogo, a as RustLogo, b as RubyLogo, c as PhpLogo, C as CPlusPlusLogo, d as CSharpLogo, D as DotnetLogo, e as PythonLogo, f as NodejsLogo, G as GoLogo, J as JavaLogo, T as TracesIcon, g as MetricsIcon, L as LogsIcon, O as OdigosLogo, I as InfoIcon, W as WarningTriangleIcon, h as ErrorTriangleIcon, i as CheckCircledIcon } from './index-BsH_egEe.js';
+import { I as ImageErrorIcon } from './index-BWqrekK4.js';
+import { S as SignalType } from './index-DbfrGXPH.js';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);
@@ -90,13 +88,13 @@ const getProgrammingLanguageIcon = (language) => {
         [ProgrammingLanguages.Postgres]: PostgresLogo,
         [ProgrammingLanguages.Redis]: RedisLogo,
         [ProgrammingLanguages.Kafka]: KafkaLogo,
-        [ProgrammingLanguages.Ignored]: OdigosLogo, // TODO: good icon
-        [ProgrammingLanguages.Unknown]: OdigosLogo, // TODO: good icon
-        [ProgrammingLanguages.Processing]: OdigosLogo, // TODO: good icon
-        [ProgrammingLanguages.NoContainers]: OdigosLogo, // TODO: good icon
-        [ProgrammingLanguages.NoRunningPods]: OdigosLogo, // TODO: good icon
+        [ProgrammingLanguages.Ignored]: ImageErrorIcon, // TODO: good icon
+        [ProgrammingLanguages.Unknown]: ImageErrorIcon, // TODO: good icon
+        [ProgrammingLanguages.Processing]: ImageErrorIcon, // TODO: good icon
+        [ProgrammingLanguages.NoContainers]: ImageErrorIcon, // TODO: good icon
+        [ProgrammingLanguages.NoRunningPods]: ImageErrorIcon, // TODO: good icon
     };
-    return LOGOS[language];
+    return LOGOS[language] || ImageErrorIcon;
 };
 
 const getMonitorIcon = (type) => {

package/lib/index-C1PCuZgw.js

@@ -0,0 +1,18 @@
+import { S as SignalType } from './index-DbfrGXPH.js';
+
+const MONITORS_OPTIONS = [
+    {
+        id: SignalType.Logs,
+        value: 'Logs',
+    },
+    {
+        id: SignalType.Metrics,
+        value: 'Metrics',
+    },
+    {
+        id: SignalType.Traces,
+        value: 'Traces',
+    },
+];
+
+export { MONITORS_OPTIONS as M };

package/lib/{index-CLOUNx6Z.js → index-C3nz3TIx.js}

@@ -1,8 +1,6 @@
-import { ActionType, InstrumentationRuleType } from './types.js';
-import { S as SamplerIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, D as DeleteAttributeIcon, A as AddClusterInfoIcon, K as K8sLogo, O as OdigosLogo, C as CodeAttributesIcon, a as PayloadCollectionIcon } from './index-BGlk5VhF.js';
-import 'react';
-import './index-IvGLauAo.js';
-import 'styled-components';
+import { S as SamplerIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, D as DeleteAttributeIcon, A as AddClusterInfoIcon, K as K8sLogo, C as CodeAttributesIcon, a as PayloadCollectionIcon } from './index-CIXQeSHu.js';
+import { A as ActionType, I as InstrumentationRuleType } from './index-RBS1MqCQ.js';
+import { I as ImageErrorIcon } from './index-BWqrekK4.js';
 
 const getActionIcon = (type) => {
     const typeLowerCased = type?.toLowerCase();
@@ -22,16 +20,16 @@ const getActionIcon = (type) => {
         [ActionType.ProbabilisticSampler]: SamplerIcon,
         [ActionType.LatencySampler]: SamplerIcon,
     };
-    return LOGOS[type];
+    return LOGOS[type] || ImageErrorIcon;
 };
 
 const getInstrumentationRuleIcon = (type) => {
     const LOGOS = {
         [InstrumentationRuleType.PayloadCollection]: PayloadCollectionIcon,
         [InstrumentationRuleType.CodeAttributes]: CodeAttributesIcon,
-        [InstrumentationRuleType.UnknownType]: OdigosLogo,
+        [InstrumentationRuleType.UnknownType]: ImageErrorIcon,
     };
-    return LOGOS[type];
+    return LOGOS[type] || ImageErrorIcon;
 };
 
 export { getInstrumentationRuleIcon as a, getActionIcon as g };