@odigos/ui-kit 0.0.17 → 0.0.19

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

@@ -1,14 +1,15 @@
 import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment } from 'react';
+import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages, EntityTypes } from './types.js';
+import './index-BazfJyRh.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-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 { 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-WSle42rz.js';
 import { s as safeJsonParse, i as isEmpty } from './index-BZS1ijMm.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 { 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 { M as MONITORS_OPTIONS } from './index-BFRz3l_w.js';
+import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-bXMKBfST.js';
 import ReactDOM from 'react-dom';
-import { I as ImageErrorIcon } from './index-BWqrekK4.js';
+import { I as ImageErrorIcon } from './index-DGel4E-Z.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';
@@ -228,7 +229,7 @@ const Badge = ({ label, filled, status, withIcon, onClick }) => {
         label));
 };
 
-const Container$t = styled.div `
+const Container$u = styled.div `
   height: fit-content;
   border: 2px solid transparent;
   padding: 2px;
@@ -328,7 +329,7 @@ const StyledButton$2 = styled.button `
 `;
 const Button$4 = ({ children, variant = 'primary', onClick, ...props }) => {
     const ref = useRef(null);
-    return (React.createElement(Container$t, { "$variant": variant },
+    return (React.createElement(Container$u, { "$variant": variant },
         React.createElement(StyledButton$2, { ref: ref, "$variant": variant, onClick: (e) => {
                 if (onClick)
                     onClick(e);
@@ -465,7 +466,7 @@ const FieldError = ({ children }) => {
         React.createElement(ErrorMessage, null, children)));
 };
 
-const Container$s = styled.div `
+const Container$t = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -502,7 +503,7 @@ const Checkbox = ({ title, titleColor, tooltip, value = false, partiallyChecked
             setIsChecked((prev) => (partiallyChecked ? true : !prev));
     };
     return (React.createElement(FlexColumn, null,
-        React.createElement(Container$s, { "data-id": `checkbox${!!title ? `-${title}` : ''}`, "$disabled": disabled, onClick: handleToggle, style: style },
+        React.createElement(Container$t, { "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 +3635,7 @@ prismjs/prism.js:
    *)
 */
 
-const Container$r = styled(FlexRow) `
+const Container$s = styled(FlexRow) `
   gap: 0;
 `;
 const Button$3 = styled.button `
@@ -3651,7 +3652,7 @@ const Button$3 = styled.button `
   }
 `;
 const ToggleCodeComponent = ({ isPrettyMode, setIsPrettyMode }) => {
-    return (React.createElement(Container$r, null,
+    return (React.createElement(Container$s, 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) },
@@ -3675,7 +3676,7 @@ const TableData = styled.td `
   vertical-align: top;
   padding: 4px 6px;
 `;
-const Title$c = styled(Text) `
+const Title$b = styled(Text) `
   white-space: nowrap;
 `;
 const CodeLineToken = styled.span `
@@ -3764,7 +3765,7 @@ const PrettyJsonCode = ({ darkMode, str }) => {
                     renderEmptyRows(2, i),
                     React.createElement(TableRow$1, { ...lineProps },
                         React.createElement(TableData, null,
-                            React.createElement(Title$c, null, formattedLine[0].content)),
+                            React.createElement(Title$b, null, formattedLine[0].content)),
                         React.createElement(TableData, null))));
             }
             else if (formattedLine.length === 2) {
@@ -3952,18 +3953,18 @@ const FadeLoader = ({ loading = true, color: clr, scale = 1, speedMultiplier = 1
             } })));
 };
 
-const Container$q = styled.div `
+const Container$r = 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$q, { "$align": align },
+    return (React.createElement(Container$r, { "$align": align },
         React.createElement(ExtendArrowIcon, { size: size, rotate: extend ? 180 : 0 })));
 };
 
-const Container$p = styled.div `
+const Container$q = styled.div `
   border-radius: 24px;
   background-color: ${({ theme, $status }) => $status === StatusType.Error
     ? theme.text.error + Theme.opacity.hex['010']
@@ -3980,7 +3981,7 @@ const Container$p = styled.div `
   cursor: pointer;
   transition: background 0.3s;
 `;
-const Header$1 = styled.div `
+const Header$2 = styled.div `
   display: flex;
   align-items: center;
   gap: 12px;
@@ -4023,8 +4024,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$p, { onClick: toggleExtend, "$status": overallStatus },
-        React.createElement(Header$1, null,
+    return (React.createElement(Container$q, { onClick: toggleExtend, "$status": overallStatus },
+        React.createElement(Header$2, 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 +4060,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$o = styled.div `
+const Container$p = styled.div `
   display: flex;
   align-items: center;
   gap: ${({ $size }) => $size / 3}px;
@@ -4081,7 +4082,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$o, { "$size": size, "$status": statusType, "$withIcon": withIcon, "$withBorder": withBorder, "$withBackground": withBackground },
+    return (React.createElement(Container$p, { "$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,
@@ -4090,6 +4091,36 @@ const Status = ({ title, subtitle, size = 12, family = 'secondary', status = Sta
             !!subtitle && (React.createElement(Text, { size: size - 2, family: family, color: theme.text[`${statusType}_secondary`] }, subtitle))))));
 };
 
+const LimitedText = styled(Text) `
+  max-width: ${({ $maxWidth }) => `${$maxWidth}px` || 'unset'};
+  white-space: nowrap;
+  overflow-x: auto;
+
+  &::after {
+    // This is to prevent the "browser default tooltip" from appearing when the title is too long
+    content: '';
+    display: block;
+  }
+`;
+const ELIPSIS_WIDTH = 12;
+const ScrollX = ({ maxWidth, text, textSize, textColor }) => {
+    const [isOverflowed, setIsOverflowed] = useState(false);
+    const ref = useRef(null);
+    // Check if text is overflowed from maximum width
+    useEffect(() => {
+        if (ref.current) {
+            const { clientWidth } = ref.current;
+            const marginUp = (maxWidth - ELIPSIS_WIDTH) * 1.05; // add 5%
+            const marginDown = (maxWidth - ELIPSIS_WIDTH) * 0.95; // subtract 5%
+            setIsOverflowed(clientWidth < marginUp && clientWidth > marginDown);
+        }
+    }, [maxWidth, text]);
+    return (React.createElement(FlexRow, { "$gap": 0 },
+        text && (React.createElement(Tooltip, { text: isOverflowed ? text : undefined },
+            React.createElement(LimitedText, { ref: ref, "$maxWidth": maxWidth - ELIPSIS_WIDTH, size: textSize, color: textColor }, text))),
+        isOverflowed && (React.createElement(LimitedText, { "$maxWidth": ELIPSIS_WIDTH, size: textSize, color: textColor }, "..."))));
+};
+
 const ImageControlled = ({ src = '', alt = '', size = 16 }) => {
     const [hasError, setHasError] = useState(false);
     if (!!src && !hasError) {
@@ -4098,7 +4129,7 @@ const ImageControlled = ({ src = '', alt = '', size = 16 }) => {
     return React.createElement(ImageErrorIcon, { size: size });
 };
 
-const Container$n = styled.div `
+const Container$o = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4111,10 +4142,10 @@ const Container$n = styled.div `
 }};
 `;
 const IconWrapped = ({ icon: Icon, src = '', alt = '', status, size = 36 }) => {
-    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 })));
+    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 })));
 };
 
-const Container$m = styled.div `
+const Container$n = styled.div `
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -4164,7 +4195,7 @@ const IconGroup = ({ icons = [], iconSrcs = [], status, size = 36, id }) => {
         }
         return imgSize * 1.4;
     };
-    return (React.createElement(Container$m, { "$status": status, "$size": size }, icons.map((Icon, idx) => {
+    return (React.createElement(Container$n, { "$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,10 +4244,29 @@ 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$l = styled.div `
+const Container$m = styled.div `
   display: flex;
   flex-direction: column;
   align-self: stretch;
@@ -4244,28 +4294,6 @@ const Container$l = styled.div `
       }
     `}
 `;
-const Title$b = styled(Text) `
-  max-width: ${({ $maxWidth }) => $maxWidth}px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  font-size: 14px;
-  &::after {
-    // This is to prevent the browser "default tooltip" from appearing when the title is too long
-    content: '';
-    display: block;
-  }
-`;
-const SubTitle$2 = styled(Text) `
-  max-width: ${({ $maxWidth }) => $maxWidth}px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  color: ${({ theme }) => theme.text.grey};
-  font-size: 10px;
-`;
 const ActionsWrapper = styled.div `
   display: flex;
   align-items: center;
@@ -4275,47 +4303,40 @@ const ActionsWrapper = styled.div `
 const HoverText = styled(Text) `
   margin-right: 16px;
 `;
+const SubText = styled(Text) `
+  font-size: 10px;
+  color: ${({ theme }) => theme.text.grey};
+`;
 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 theme = Theme.useTheme();
     const [extend, setExtend] = useState(isExtended || false);
-    const [maxWidth, setMaxWidth] = useState(0);
-    const [isTitleOverflowed, setIsTitleOverflowed] = useState(false);
-    const [isSubTitleOverflowed, setSubIsTitleOverflowed] = useState(false);
+    const [textMaxWidth, setTextMaxWidth] = useState(0);
     const containerRef = useRef(null);
     const actionsRef = useRef(null);
-    const titleRef = useRef(null);
-    const subTitleRef = useRef(null);
+    const monitorsRef = useRef(null);
+    // Dynamically define maximim width for title and subtitle
     useEffect(() => {
-        if (containerRef.current && actionsRef.current) {
+        if (containerRef.current) {
             const containerWidth = containerRef.current.clientWidth;
-            const actionsWidth = actionsRef.current.clientWidth;
-            // 85 is the sum of the container-padding, icon width, and flex-row-gap.
-            // we round it to 120, to consider cases with actions.
-            const widthOfInnerContents = 120;
-            setMaxWidth(containerWidth - actionsWidth - widthOfInnerContents);
+            const actionsWidth = actionsRef.current?.clientWidth || 0;
+            // 85 is the sum of the container-padding, icon-width, and flex-row-gap.
+            // 125 is the sum of the above, plus checkboxes.
+            const widthOfNonTextContents = (withCheckbox ? 125 : 85) + actionsWidth;
+            setTextMaxWidth(containerWidth - widthOfNonTextContents);
         }
-    }, []);
-    useEffect(() => {
-        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);
-        }
-        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 },
+    }, [withCheckbox]);
+    return (React.createElement(Container$m, { ref: containerRef, "$status": status, "$faded": faded, "$bgColor": bgColor, "$bgColorHover": bgColorHover, "$withClick": !!onClick, onClick: onClick, ...props },
         React.createElement(FlexRow, { "$gap": 8 },
             React.createElement(FlexRow, { "$gap": 16 },
                 withCheckbox && React.createElement(Checkbox, { value: isChecked, onChange: onCheckboxChange, disabled: isCheckboxDisabled }),
                 !!icons?.length || !!iconSrcs?.length ? (React.createElement(IconGroup, { icons: icons, iconSrcs: iconSrcs, status: status, 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)),
-                subTitle && (React.createElement(Tooltip, { text: isSubTitleOverflowed ? subTitle : undefined, withIcon: false },
-                    React.createElement(SubTitle$2, { ref: subTitleRef, "$maxWidth": maxWidth }, subTitle)))),
+                subTitle && React.createElement(ScrollX, { maxWidth: textMaxWidth, text: title, textSize: 14 }),
+                React.createElement(FlexRow, { "$gap": 4 },
+                    subTitle && React.createElement(ScrollX, { maxWidth: textMaxWidth - (monitorsRef.current?.clientWidth || 0), text: subTitle, textSize: 10, textColor: theme.text.grey }),
+                    monitors && monitors.length > 0 && (React.createElement(FlexRow, { "$gap": 4, ref: monitorsRef },
+                        subTitle && React.createElement(SubText, null, "\u2022"),
+                        React.createElement(MonitorsIcons, { monitors: monitors, withLabels: monitorsWithLabels, size: 10 }))))),
             React.createElement(ActionsWrapper, { ref: actionsRef },
                 !!hoverText && (React.createElement(ControlledVisibility, null,
                     React.createElement(HoverText, { size: 14, family: 'secondary' }, hoverText))),
@@ -4329,7 +4350,7 @@ const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps
             renderExtended()))));
 };
 
-const Container$k = styled(FlexRow) `
+const Container$l = styled(FlexRow) `
   width: 100%;
   justify-content: space-between;
 `;
@@ -4352,7 +4373,7 @@ const ValueText = styled(Text) `
   text-align: right;
 `;
 const DescribeRow = ({ title, subTitle, tooltip, value }) => {
-    return (React.createElement(Container$k, null,
+    return (React.createElement(Container$l, null,
         React.createElement(FlexColumn, { "$gap": 4 },
             React.createElement(Tooltip, { text: tooltip || '' },
                 title && React.createElement(Title$a, null, title),
@@ -4360,25 +4381,6 @@ 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)};
@@ -4396,8 +4398,11 @@ const RowText = styled(Text) `
   font-size: 14px;
   color: ${({ $color, theme }) => $color ?? theme.text.secondary};
   line-height: 16px;
-  text-wrap: wrap;
+
   overflow: hidden;
+  overflow-wrap: break-word;
+  white-space: wrap;
+  text-wrap: wrap;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -4438,7 +4443,7 @@ const TableRow = ({ index, columns, cells, onClick, status, faded }) => {
     })));
 };
 
-const Container$j = styled.div `
+const Container$k = styled.div `
   width: 100%;
 `;
 const Table = styled.table `
@@ -4512,7 +4517,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$j, null,
+    return (React.createElement(Container$k, 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) },
@@ -4699,7 +4704,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 = styled.div `
+const Header$1 = styled.div `
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -4725,7 +4730,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, { "$clickable": withExtend || false, onClick: () => withExtend && setExtend((prev) => !prev), onMouseEnter: () => withExtend && setHovered(true), onMouseLeave: () => withExtend && setHovered(false) },
+        !!title || !!description || !!Action ? (React.createElement(Header$1, { "$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 }),
@@ -4769,7 +4774,7 @@ const DocsButton = ({ endpoint = '/', variant = 'secondary' }) => {
         "Docs"));
 };
 
-const Container$i = styled.section `
+const Container$j = styled.section `
   padding: 0px 32px;
   border-bottom: 1px solid ${({ theme }) => theme.colors.border};
 `;
@@ -4818,7 +4823,7 @@ const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTi
         }
         return null;
     };
-    return (React.createElement(Container$i, null,
+    return (React.createElement(Container$j, null,
         React.createElement(TopRow, null,
             React.createElement(SectionItemsWrapper, null,
                 icons?.length || iconSrcs?.length ? React.createElement(IconGroup, { icons: icons, iconSrcs: iconSrcs, id: `drawer-header-${title}` }) : null,
@@ -4832,7 +4837,7 @@ const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTi
             Icon && React.createElement(Icon, null))))))));
 };
 
-const Container$h = styled.div `
+const Container$i = styled.div `
   display: flex;
   justify-content: space-between;
   gap: 8px;
@@ -4841,10 +4846,10 @@ const Container$h = styled.div `
   background-color: ${({ theme }) => theme.colors.translucent_bg};
   transform: translateY(100%);
 `;
-const AlignLeft = styled(FlexRow) `
+const AlignLeft$1 = styled(FlexRow) `
   margin-right: auto;
 `;
-const AlignRight = styled(FlexRow) `
+const AlignRight$1 = styled(FlexRow) `
   margin-left: auto;
 `;
 const FooterButton$1 = styled(Button$4) `
@@ -4853,16 +4858,16 @@ const FooterButton$1 = styled(Button$4) `
 `;
 const DrawerFooter = ({ isOpen, leftButtons = [], rightButtons = [] }) => {
     const Transition = useTransition({
-        container: Container$h,
+        container: Container$i,
         animateIn: Theme.animations.slide.in['bottom'],
         animateOut: Theme.animations.slide.out['bottom'],
     });
     return (React.createElement(Transition, { enter: isOpen },
-        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 }))))));
+        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 }))))));
 };
 
-const Container$g = styled.div `
+const Container$h = styled.div `
   position: fixed;
   top: 0;
   bottom: 0;
@@ -4889,7 +4894,7 @@ const Drawer = ({ isOpen, onClose, closeOnEscape = true, position = 'right', wid
         active: isOpen && closeOnEscape,
     }, () => onClose());
     const Transition = useTransition({
-        container: Container$g,
+        container: Container$h,
         animateIn: Theme.animations.slide.in[position],
         animateOut: Theme.animations.slide.out[position],
     });
@@ -4933,7 +4938,7 @@ const FieldLabel = ({ title, required, tooltip, style }) => {
 };
 
 // Styled components remain the same as before
-const Container$f = styled.div `
+const Container$g = styled.div `
   display: flex;
   flex-direction: column;
   position: relative;
@@ -5036,7 +5041,7 @@ const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage,
         if (!['Enter'].includes(e.key))
             e.stopPropagation();
     };
-    return (React.createElement(Container$f, null,
+    return (React.createElement(Container$g, 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,
@@ -5046,7 +5051,7 @@ const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage,
         !!errorMessage && React.createElement(FieldError, null, errorMessage)));
 };
 
-const Container$e = styled.div `
+const Container$f = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5068,7 +5073,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$e, null,
+    return (React.createElement(Container$f, null,
         React.createElement(TitleWrapper, null,
             React.createElement(NoDataIcon, { fill: theme.text.dark_grey }),
             React.createElement(Title$5, null, title)),
@@ -5243,6 +5248,36 @@ 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};
 `;
@@ -29576,4 +29611,4 @@ const WarningModal = ({ isOpen, noOverlay, title = '', description = '', note, a
                 React.createElement(FooterButton, { "data-id": 'deny', variant: denyButton.variant || 'secondary', onClick: onDeny }, denyButton.text)))));
 };
 
-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 };
+export { FlexRow 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, SectionTitle as O, Segment as P, SkeletonLoader as Q, Status as R, ScrollX as S, ToggleCodeComponent as T, Stepper as U, Text as V, TextArea as W, Toggle as X, Tooltip as Y, TraceLoader as Z, WarningModal as _, Badge as a, FlexColumn as a0, CenterThis as a1, Overlay as a2, ModalBody as a3, TableContainer as a4, TableTitleWrap as a5, TableWrap as a6, getDefaultExportFromCjs as a7, 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 };

package/lib/{index-CIXQeSHu.js → index-DGel4E-Z.js}

@@ -36,6 +36,13 @@ const SamplerIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M5.67367 5.67497H5.687M10.515 3.91532L12.1293 5.52965C13.0067 6.40707 13.4454 6.84578 13.6851 7.31618C14.1695 8.2669 14.1695 9.39207 13.6851 10.3428C13.4454 10.8132 13.0067 11.2519 12.1293 12.1293C11.2519 13.0067 10.8132 13.4454 10.3428 13.6851C9.39207 14.1695 8.2669 14.1695 7.31618 13.6851C6.84578 13.4454 6.40707 13.0067 5.52965 12.1293L3.91532 10.515C3.17317 9.77284 2.8021 9.40176 2.54483 8.96668C2.31682 8.58108 2.15521 8.15991 2.06673 7.72076C1.9669 7.22527 1.99448 6.70122 2.04965 5.65312L2.07845 5.10584C2.13195 4.0893 2.1587 3.58104 2.36993 3.18719C2.55598 2.84028 2.84028 2.55598 3.18719 2.36993C3.58104 2.1587 4.0893 2.13195 5.10584 2.07845L5.65312 2.04965C6.70122 1.99448 7.22527 1.9669 7.72076 2.06673C8.15991 2.15521 8.58108 2.31682 8.96668 2.54483C9.40176 2.8021 9.77284 3.17317 10.515 3.91532ZM6.32633 5.65853C6.32633 6.02672 6.02786 6.3252 5.65967 6.3252C5.29148 6.3252 4.993 6.02672 4.993 5.65853C4.993 5.29034 5.29148 4.99186 5.65967 4.99186C6.02786 4.99186 6.32633 5.29034 6.32633 5.65853Z' })));
 };
 
+const ImageErrorIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M17.2 21.0002L19.6 18.6002M19.6 18.6002L22 16.2002M19.6 18.6002L17.2 16.2002M19.6 18.6002L22 21.0002M22 12.1944V11C22 10.6449 22 10.3123 21.9989 10M13.1992 21H10C9.24401 21 8.59006 21 8.01712 20.9893M21.9989 10H21C19.607 10 18.9104 10 18.324 10.0603C12.9031 10.6176 8.61758 14.9031 8.06029 20.324C8.03963 20.5249 8.02605 20.7388 8.01712 20.9893M21.9989 10C21.9912 7.84993 21.9309 6.66397 21.455 5.73005C20.9757 4.78924 20.2108 4.02433 19.27 3.54497C18.2004 3 16.8003 3 14 3H10C7.19974 3 5.79961 3 4.73005 3.54497C3.78924 4.02433 3.02433 4.78924 2.54497 5.73005C2 6.79961 2 8.19974 2 11V13C2 15.8003 2 17.2004 2.54497 18.27C3.02433 19.2108 3.78924 19.9757 4.73005 20.455C5.51086 20.8529 6.46784 20.9603 8.01712 20.9893M7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5Z' })));
+};
+
 const K8sLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -57,4 +64,4 @@ const PayloadCollectionIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M7.99967 7.33333V11.3333M7.99967 11.3333C7.92987 11.3333 7.86007 11.31 7.80254 11.2634C7.37701 10.9186 6.99534 10.5224 6.66634 10.0837M7.99967 11.3333C8.06947 11.3333 8.13927 11.31 8.19681 11.2634C8.62234 10.9186 9.00401 10.5224 9.33301 10.0837M1.33301 6.26667C1.33301 4.77319 1.33301 4.02645 1.62365 3.45603C1.87932 2.95426 2.28727 2.54631 2.78903 2.29065C3.35946 2 4.1062 2 5.59967 2H5.81005C6.12312 2 6.27965 2 6.42174 2.04315C6.54753 2.08135 6.66455 2.14398 6.76614 2.22745C6.88081 2.32175 6.96767 2.45199 7.14134 2.71248L7.52467 3.28752C7.69834 3.54801 7.78521 3.67825 7.89987 3.77255C8.00147 3.85602 8.11847 3.91865 8.24427 3.95685C8.38634 4 8.54287 4 8.85594 4H10.3997C11.8931 4 12.6399 4 13.2103 4.29065C13.7121 4.54631 14.12 4.95426 14.3757 5.45603C14.6663 6.02645 14.6663 6.7732 14.6663 8.26667V9.73333C14.6663 11.2268 14.6663 11.9735 14.3757 12.544C14.12 13.0457 13.7121 13.4537 13.2103 13.7093C12.6399 14 11.8931 14 10.3997 14H5.59967C4.1062 14 3.35946 14 2.78903 13.7093C2.28727 13.4537 1.87932 13.0457 1.62365 12.544C1.33301 11.9735 1.33301 11.2268 1.33301 9.73333V6.26667Z' })));
 };
 
-export { AddClusterInfoIcon as A, CodeAttributesIcon as C, DeleteAttributeIcon as D, K8sLogo as K, PiiMaskingIcon as P, RenameAttributeIcon as R, SamplerIcon as S, PayloadCollectionIcon as a };
+export { AddClusterInfoIcon as A, CodeAttributesIcon as C, DeleteAttributeIcon as D, ImageErrorIcon as I, K8sLogo as K, PiiMaskingIcon as P, RenameAttributeIcon as R, SamplerIcon as S, PayloadCollectionIcon as a };

package/lib/{index-BQW5EUgp.js → index-DSzybApb.js}

@@ -1,9 +1,11 @@
-import { S as StatusType, O as OtherStatus, E as EntityTypes, P as PlatformType } from './index-BVVVevuY.js';
-import { a as getProgrammingLanguageIcon } from './index-BxQTUOME.js';
-import { D as DestinationTypes } from './index-CIgHU72d.js';
+import { StatusType, OtherStatus, DestinationTypes, EntityTypes, PlatformType } from './types.js';
+import { a as getProgrammingLanguageIcon } from './index-WSle42rz.js';
+import 'react';
+import './index-BazfJyRh.js';
+import 'styled-components';
 import { c as AwsXrayLogo, U as UptraceLogo, x as TraceloopLogo, T as TempoLogo, w as SumoLogicLogo, v as SplunkLogo, S as SignozLogo, b as AwsS3Logo, u as QuickwitLogo, G as GigapipeLogo, Q as QrynLogo, P as PrometheusLogo, O as OpenTelemetryLogo, t as OpsVerseLogo, N as NewRelicLogo, M as MiddlewareLogo, s as LumigoLogo, r as LokiLogo, q as LogzioLogo, p as LightstepLogo, L as Last9Logo, K as KloudmateLogo, J as JaegerLogo, I as InstanaLogo, o as HyperDxLogo, H as HoneycombLogo, n as GroundcoverLogo, m as GrafanaLogo, l as GoogleCloudPlatformLogo, k as ElasticSearchLogo, E as ElasticApmLogo, j as DynatraceLogo, i as DatadogLogo, D as Dash0Logo, h as CoralogixLogo, a as AwsCloudwatchLogo, g as ClickhouseLogo, f as ChronosphereLogo, C as CauselyLogo, B as BetterStackLogo, e as BlobStorageLogo, d as AxiomLogo, A as AppDynamicsLogo, R as RulesIcon, y as ActionsIcon, z as DestinationsIcon, W as SourcesIcon, F as NamespacesIcon, V as VmLogo } from './index-DB8Djrsy.js';
 import { K as KafkaLogo, O as OdigosLogo } from './index-BsH_egEe.js';
-import { K as K8sLogo } from './index-CIXQeSHu.js';
+import { K as K8sLogo } from './index-DGel4E-Z.js';
 
 const compareCondition = (renderCondition, fields) => {
     if (!renderCondition || !renderCondition.length)

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

@@ -1,7 +1,9 @@
-import { a as ProgrammingLanguages, S as StatusType } from './index-BVVVevuY.js';
+import { ProgrammingLanguages, SignalType, StatusType } from './types.js';
+import 'react';
+import './index-BazfJyRh.js';
+import 'styled-components';
+import { I as ImageErrorIcon } from './index-DGel4E-Z.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);