@odigos/ui-kit 0.0.9 → 0.0.11

package/lib/{index-m62aT4IR.js → index-B_fzHjxk.js}

@@ -1,13 +1,13 @@
 import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment, useId } from 'react';
-import { NOTIFICATION_TYPE, OTHER_STATUS, PROGRAMMING_LANGUAGES, ENTITY_TYPES } from './types.js';
-import './index-DIcomki-.js';
+import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages, EntityTypes } from './types.js';
+import './index-DYEcdkUF.js';
 import styled, { css } from 'styled-components';
 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-Bc8gi9FH.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 { 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-CZe2VX28.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-Dfxjcy-C.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 ReactDOM from 'react-dom';
 import require$$0 from 'babel-runtime/helpers/extends';
 import require$$1$1 from 'babel-runtime/core-js/object/get-prototype-of';
@@ -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-ixs381n-.js';
+import { I as InfoIcon } from './index-9ObpINp4.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -339,7 +339,7 @@ const Button$4 = ({ children, variant = 'primary', onClick, ...props }) => {
 const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {
     return (React.createElement(WarningModal, { isOpen: isOpen, noOverlay: noOverlay, title: `Cancel${name ? ` ${name}` : ''}`, description: 'Are you sure you want to cancel?', approveButton: {
             text: 'Confirm',
-            variant: NOTIFICATION_TYPE.WARNING,
+            variant: StatusType.Warning,
             onClick: onApprove,
         }, denyButton: {
             text: 'Go Back',
@@ -381,6 +381,20 @@ const ModalBody = styled.div `
   margin: ${({ $isNotModal }) => ($isNotModal ? '64px 0 0 0' : '64px 7vw 32px 7vw')};
   overflow-y: scroll;
 `;
+// common styles for focused-table containers
+const TableContainer = styled(FlexColumn) `
+  max-width: ${({ $maxWidth }) => $maxWidth || 'unset'};
+  width: 100%;
+`;
+const TableTitleWrap = styled(FlexRow) `
+  gap: 16px;
+  padding: 16px;
+`;
+const TableWrap = styled.div `
+  width: 100%;
+  max-height: ${({ $maxHeight }) => $maxHeight || 'unset'};
+  overflow-y: auto;
+`;
 
 const TooltipContainer = styled.div `
   position: relative;
@@ -3723,7 +3737,7 @@ const getComponentsFromPropertyString = (propertyString, theme) => {
                     return React.createElement("div", { key: useId(), style: { width: 16, height: 16 } });
                 let Icon = getStatusIcon(value, theme);
                 if (!Icon)
-                    Icon = getStatusIcon(NOTIFICATION_TYPE.WARNING, theme);
+                    Icon = getStatusIcon(StatusType.Warning, theme);
                 return React.createElement(Icon, { key: useId() });
             default:
                 console.warn('unexpected component type!', type);
@@ -3951,15 +3965,15 @@ const ExtendArrow = ({ extend, size = 14, align = 'center' }) => {
 
 const Container$q = styled.div `
   border-radius: 24px;
-  background-color: ${({ theme, $status }) => $status === NOTIFICATION_TYPE.ERROR
+  background-color: ${({ theme, $status }) => $status === StatusType.Error
     ? theme.text.error + Theme.opacity.hex['010']
-    : $status === NOTIFICATION_TYPE.WARNING
+    : $status === StatusType.Warning
         ? theme.text.warning + Theme.opacity.hex['010']
         : theme.colors.secondary + Theme.opacity.hex['005']};
   &:hover {
-    background-color: ${({ theme, $status }) => $status === NOTIFICATION_TYPE.ERROR
+    background-color: ${({ theme, $status }) => $status === StatusType.Error
     ? theme.text.error + Theme.opacity.hex['020']
-    : $status === NOTIFICATION_TYPE.WARNING
+    : $status === StatusType.Warning
         ? theme.text.warning + Theme.opacity.hex['020']
         : theme.colors.secondary + Theme.opacity.hex['010']};
   }
@@ -3990,19 +4004,19 @@ const ConditionDetails = ({ conditions: c, headerLabelError = 'Something Failed'
     const theme = Theme.useTheme();
     const [extend, setExtend] = useState(false);
     const conditions = mapConditions(c);
-    const errors = useMemo(() => conditions.filter(({ status }) => status === NOTIFICATION_TYPE.ERROR), [conditions]);
+    const errors = useMemo(() => conditions.filter(({ status }) => status === StatusType.Error), [conditions]);
     const hasErrors = !!errors.length;
-    const warnings = useMemo(() => conditions.filter(({ status }) => status === NOTIFICATION_TYPE.WARNING), [conditions]);
+    const warnings = useMemo(() => conditions.filter(({ status }) => status === StatusType.Warning), [conditions]);
     const hasWarnings = !!warnings.length;
-    const disableds = useMemo(() => conditions.filter(({ status }) => status === OTHER_STATUS.DISABLED), [conditions]);
+    const disableds = useMemo(() => conditions.filter(({ status }) => status === OtherStatus.Disabled), [conditions]);
     const hasDisableds = !!disableds.length;
-    const loadings = useMemo(() => conditions.filter(({ status }) => status === OTHER_STATUS.LOADING), [conditions]);
+    const loadings = useMemo(() => conditions.filter(({ status }) => status === OtherStatus.Loading), [conditions]);
     const hasLoadings = !!loadings.length;
     const loading = (!conditions.length || hasLoadings) && !hasErrors && !hasWarnings && !hasDisableds;
     useEffect(() => {
         setExtend(hasErrors || hasWarnings || hasDisableds || hasLoadings);
     }, [hasErrors, hasWarnings, hasDisableds, hasLoadings]);
-    const overallStatus = hasErrors ? NOTIFICATION_TYPE.ERROR : hasWarnings ? NOTIFICATION_TYPE.WARNING : hasDisableds ? NOTIFICATION_TYPE.INFO : NOTIFICATION_TYPE.SUCCESS;
+    const overallStatus = hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : hasDisableds ? StatusType.Info : StatusType.Success;
     const HeaderIcon = getStatusIcon(overallStatus, theme);
     const headerText = hasErrors ? headerLabelError : hasWarnings ? headerLabelWarning : hasDisableds ? headerLabelWarning : loading ? 'Loading...' : headerLabelSuccess;
     const headerTextColor = hasErrors ? theme.text.error : hasWarnings ? theme.text.warning : theme.text.info;
@@ -4016,13 +4030,13 @@ const ConditionDetails = ({ conditions: c, headerLabelError = 'Something Failed'
             React.createElement(Text, { color: headerSubTextColor, size: 12, family: 'secondary' }, headerSubText),
             React.createElement(ExtendArrow, { extend: extend, align: 'right' })),
         extend && (React.createElement(Body, null, conditions.map(({ status, type, reason, message, lastTransitionTime }, idx) => {
-            const Icon = status === 'loading' ? () => React.createElement(FadeLoader, { scale: 0.8 }) : status === 'disabled' ? getStatusIcon(NOTIFICATION_TYPE.INFO, theme) : getStatusIcon(status, theme);
-            const color = status === 'disabled' ? theme.text.info : status === NOTIFICATION_TYPE.ERROR ? theme.text.error : status === NOTIFICATION_TYPE.WARNING ? theme.text.warning : theme.text.info;
+            const Icon = status === 'loading' ? () => React.createElement(FadeLoader, { scale: 0.8 }) : status === 'disabled' ? getStatusIcon(StatusType.Info, theme) : getStatusIcon(status, theme);
+            const color = status === 'disabled' ? theme.text.info : status === StatusType.Error ? theme.text.error : status === StatusType.Warning ? theme.text.warning : theme.text.info;
             const boldColor = status === 'disabled'
                 ? theme.text.info_secondary
-                : status === NOTIFICATION_TYPE.ERROR
+                : status === StatusType.Error
                     ? theme.text.error_secondary
-                    : status === NOTIFICATION_TYPE.WARNING
+                    : status === StatusType.Warning
                         ? theme.text.warning_secondary
                         : theme.text.info_secondary;
             return (React.createElement(Row$1, { key: `condition-${idx}` },
@@ -4063,10 +4077,10 @@ const TextWrapper$1 = styled.div `
   display: flex;
   align-items: center;
 `;
-const Status = ({ title, subtitle, size = 12, family = 'secondary', status = NOTIFICATION_TYPE.DEFAULT, withIcon, withBorder, withBackground }) => {
+const Status = ({ title, subtitle, size = 12, family = 'secondary', status = StatusType.Default, withIcon, withBorder, withBackground }) => {
     const theme = Theme.useTheme();
-    const statusType = status === OTHER_STATUS.LOADING ? NOTIFICATION_TYPE.INFO : status;
-    const StatusIcon = status === OTHER_STATUS.LOADING ? () => React.createElement(FadeLoader, { scale: 0.8 }) : () => getStatusIcon(statusType, theme)({ size: size + 2 });
+    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 },
         withIcon && (React.createElement(IconWrapper$4, null,
             React.createElement(StatusIcon, null))),
@@ -4298,7 +4312,7 @@ const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, s
             return null;
         return (React.createElement(React.Fragment, null,
             withSeperator && React.createElement(SubTitle$2, null, '•'),
-            React.createElement(Status, { status: isActive ? NOTIFICATION_TYPE.SUCCESS : NOTIFICATION_TYPE.ERROR, size: 10 })));
+            React.createElement(Status, { status: isActive ? StatusType.Success : StatusType.Error, size: 10 })));
     };
     return (React.createElement(Container$m, { ref: containerRef, "$status": status, "$faded": faded, "$withClick": !!onClick, onClick: onClick, ...props },
         React.createElement(FlexRow, { "$gap": 8 },
@@ -4353,7 +4367,7 @@ const DescribeRow = ({ title, subTitle, tooltip, value }) => {
             React.createElement(Tooltip, { text: tooltip || '' },
                 title && React.createElement(Title$a, null, title),
                 subTitle && React.createElement(SubTitle$1, null, subTitle))),
-        React.createElement(ValueWrapper, null, !!value?.status ? (React.createElement(Status, { status: value.status === 'transitioning' ? OTHER_STATUS.LOADING : value.status, title: value.text || value.status, withBorder: true, withIcon: true })) : (React.createElement(ValueText, null, value?.text || '-')))));
+        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 TableRow = styled.tr `
@@ -4454,21 +4468,16 @@ const Title$9 = styled(Text) `
   text-wrap: nowrap;
 `;
 const TableBody = styled.tbody ``;
-var SORT_DIRECTION;
-(function (SORT_DIRECTION) {
-    SORT_DIRECTION["ASC"] = "asc";
-    SORT_DIRECTION["DESC"] = "desc";
-})(SORT_DIRECTION || (SORT_DIRECTION = {}));
 const InteractiveTable = ({ columns, rows, onRowClick }) => {
-    const [sortDirection, setSortDirection] = useState(SORT_DIRECTION.ASC);
+    const [sortDirection, setSortDirection] = useState(SortDirection.Ascending);
     const [sortBy, setSortBy] = useState('name');
     const onSort = useCallback((key) => {
         if (sortBy === key) {
-            setSortDirection((prev) => (prev === SORT_DIRECTION.ASC ? SORT_DIRECTION.DESC : SORT_DIRECTION.ASC));
+            setSortDirection((prev) => (prev === SortDirection.Ascending ? SortDirection.Descending : SortDirection.Ascending));
         }
         else {
             setSortBy(key);
-            setSortDirection(SORT_DIRECTION.ASC);
+            setSortDirection(SortDirection.Ascending);
         }
     }, [sortBy]);
     const sorted = useMemo(() => {
@@ -4489,7 +4498,7 @@ const InteractiveTable = ({ columns, rows, onRowClick }) => {
             ? [...rows].sort((a, b) => {
                 const valueA = getCellValue(a, sortBy);
                 const valueB = getCellValue(b, sortBy);
-                const direction = sortDirection === SORT_DIRECTION.ASC ? 1 : -1;
+                const direction = sortDirection === SortDirection.Ascending ? 1 : -1;
                 return direction * compareValues(valueA, valueB);
             })
             : rows;
@@ -4503,20 +4512,20 @@ const InteractiveTable = ({ columns, rows, onRowClick }) => {
             React.createElement(TableBody, null, sorted.map(({ status, faded, cells }, i) => (React.createElement(Row, { key: `row-${i}`, index: i, columns: columns, cells: cells, onClick: !!onRowClick ? () => onRowClick(i) : undefined, status: status, faded: faded })))))));
 };
 
-var DATA_CARD_FIELD_TYPES;
-(function (DATA_CARD_FIELD_TYPES) {
-    DATA_CARD_FIELD_TYPES["CODE"] = "code";
-    DATA_CARD_FIELD_TYPES["TABLE"] = "table";
-    DATA_CARD_FIELD_TYPES["BADGE"] = "badge";
-    DATA_CARD_FIELD_TYPES["LOADER"] = "loader";
-    DATA_CARD_FIELD_TYPES["DIVIDER"] = "divider";
-    DATA_CARD_FIELD_TYPES["MONITORS"] = "monitors";
-    DATA_CARD_FIELD_TYPES["COPY_TEXT"] = "copy-text";
-    DATA_CARD_FIELD_TYPES["DESCRIBE_ROW"] = "describe-row";
-    DATA_CARD_FIELD_TYPES["ACTIVE_STATUS"] = "active-status";
-    DATA_CARD_FIELD_TYPES["POD_CONTAINER"] = "pod-container";
-    DATA_CARD_FIELD_TYPES["SOURCE_CONTAINER"] = "source-container";
-})(DATA_CARD_FIELD_TYPES || (DATA_CARD_FIELD_TYPES = {}));
+var DataCardFieldTypes;
+(function (DataCardFieldTypes) {
+    DataCardFieldTypes["Code"] = "code";
+    DataCardFieldTypes["Table"] = "table";
+    DataCardFieldTypes["Badge"] = "badge";
+    DataCardFieldTypes["Loader"] = "loader";
+    DataCardFieldTypes["Divider"] = "divider";
+    DataCardFieldTypes["Monitors"] = "monitors";
+    DataCardFieldTypes["CopyText"] = "copy-text";
+    DataCardFieldTypes["DescribeRow"] = "describe-row";
+    DataCardFieldTypes["ActiveStatus"] = "active-status";
+    DataCardFieldTypes["PodContainer"] = "pod-container";
+    DataCardFieldTypes["SourceContainer"] = "source-container";
+})(DataCardFieldTypes || (DataCardFieldTypes = {}));
 const ListContainer$3 = styled.div `
   display: flex;
   flex-wrap: wrap;
@@ -4556,60 +4565,60 @@ const CopyWrapper = styled(FlexRow) `
   }
 `;
 const DataCardFields = ({ data }) => {
-    return (React.createElement(ListContainer$3, null, data.map(({ type, title, tooltip, value }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [DATA_CARD_FIELD_TYPES.CODE, DATA_CARD_FIELD_TYPES.TABLE].includes(type)
+    return (React.createElement(ListContainer$3, null, data.map(({ type, title, tooltip, value }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [DataCardFieldTypes.Code, DataCardFieldTypes.Table].includes(type)
             ? 'inherit'
             : !!type &&
                 [
-                    DATA_CARD_FIELD_TYPES.LOADER,
-                    DATA_CARD_FIELD_TYPES.DIVIDER,
-                    DATA_CARD_FIELD_TYPES.COPY_TEXT,
-                    DATA_CARD_FIELD_TYPES.DESCRIBE_ROW,
-                    DATA_CARD_FIELD_TYPES.POD_CONTAINER,
-                    DATA_CARD_FIELD_TYPES.SOURCE_CONTAINER,
+                    DataCardFieldTypes.Loader,
+                    DataCardFieldTypes.Divider,
+                    DataCardFieldTypes.CopyText,
+                    DataCardFieldTypes.DescribeRow,
+                    DataCardFieldTypes.PodContainer,
+                    DataCardFieldTypes.SourceContainer,
                 ].includes(type)
                 ? '100%'
                 : 'unset' },
         React.createElement(Tooltip, { text: tooltip, withIcon: true }, !!title && React.createElement(ItemTitle, null, title)),
         renderValue(type, value))))));
 };
-// We need to maintain this with new components every time we add a new type to "DATA_CARD_FIELD_TYPES"
+// We need to maintain this with new components every time we add a new type to "DataCardFieldTypes"
 const renderValue = (type, value) => {
     const theme = Theme.useTheme();
     const { clickCopy, isCopied } = useCopy();
     switch (type) {
-        case DATA_CARD_FIELD_TYPES.DIVIDER: {
+        case DataCardFieldTypes.Divider: {
             return React.createElement(Divider, { length: '100%', margin: '0' });
         }
-        case DATA_CARD_FIELD_TYPES.LOADER: {
+        case DataCardFieldTypes.Loader: {
             return (React.createElement(CenterThis, null,
                 React.createElement(FadeLoader, { scale: 1.2 })));
         }
-        case DATA_CARD_FIELD_TYPES.MONITORS: {
+        case DataCardFieldTypes.Monitors: {
             return React.createElement(MonitorsIcons, { monitors: value?.split(', ') || [], withLabels: true, color: theme.colors.secondary });
         }
-        case DATA_CARD_FIELD_TYPES.BADGE: {
+        case DataCardFieldTypes.Badge: {
             const params = safeJsonParse(value, { label: '-', filled: false });
             return React.createElement(Badge, { ...params });
         }
-        case DATA_CARD_FIELD_TYPES.CODE: {
+        case DataCardFieldTypes.Code: {
             const params = safeJsonParse(value, { language: '', code: '' });
             return React.createElement(Code, { ...params });
         }
-        case DATA_CARD_FIELD_TYPES.DESCRIBE_ROW: {
+        case DataCardFieldTypes.DescribeRow: {
             const params = safeJsonParse(value, { title: '', subTitle: '', tooltip: '', value: { text: undefined, status: undefined } });
             return React.createElement(DescribeRow, { ...params });
         }
-        case DATA_CARD_FIELD_TYPES.TABLE: {
+        case DataCardFieldTypes.Table: {
             const params = safeJsonParse(value, {
                 columns: [],
                 rows: [{ status: undefined, cells: [] }],
             });
             return React.createElement(InteractiveTable, { ...params });
         }
-        case DATA_CARD_FIELD_TYPES.ACTIVE_STATUS: {
-            return React.createElement(Status, { status: value == 'true' ? NOTIFICATION_TYPE.SUCCESS : NOTIFICATION_TYPE.ERROR, title: value == 'true' ? 'Active' : 'Inactive', size: 10, withIcon: true, withBorder: true });
+        case DataCardFieldTypes.ActiveStatus: {
+            return React.createElement(Status, { status: value == 'true' ? StatusType.Success : StatusType.Error, title: value == 'true' ? 'Active' : 'Inactive', size: 10, withIcon: true, withBorder: true });
         }
-        case DATA_CARD_FIELD_TYPES.COPY_TEXT: {
+        case DataCardFieldTypes.CopyText: {
             const str = typeof value === 'string' ? value : JSON.stringify(value);
             return (React.createElement(CopyWrapper, null,
                 React.createElement(IconButton, { onClick: (e) => {
@@ -4618,41 +4627,41 @@ const renderValue = (type, value) => {
                     }, tooltip: isCopied ? 'Copied!' : 'Copy' }, isCopied ? React.createElement(CheckIcon, null) : React.createElement(CopyIcon, null)),
                 React.createElement("pre", null, str)));
         }
-        case DATA_CARD_FIELD_TYPES.POD_CONTAINER: {
+        case DataCardFieldTypes.PodContainer: {
             const { containerName, actualDevice, processes } = safeJsonParse(value, {
                 containerName: '',
                 actualDevice: { title: '', subTitle: '', tooltip: '' },
-                processes: [{ health: NOTIFICATION_TYPE.INFO, message: '', identifyingAttributes: [] }],
+                processes: [{ health: StatusType.Info, message: '', identifyingAttributes: [] }],
             });
             return (React.createElement(DataTab, { title: containerName, subTitle: `${processes.length} Instrumented Processes`, renderActions: () => {
-                    return (React.createElement(Status, { status: NOTIFICATION_TYPE.INFO, title: 'Instrumentation Device', subtitle: !actualDevice.subTitle || actualDevice.subTitle === '[]' ? 'none' : actualDevice.subTitle, withBorder: true }));
+                    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 === NOTIFICATION_TYPE.SUCCESS ? 'healthy' : 'unhealthy',
+                                text: process.health === StatusType.Success ? 'healthy' : 'unhealthy',
                                 status: process.health,
                             } }),
                         process.identifyingAttributes.map(({ name, value }) => (React.createElement(DescribeRow, { key: useId(), title: name, subTitle: '', value: { text: value, status: undefined } }))))))));
                 } }));
         }
-        case DATA_CARD_FIELD_TYPES.SOURCE_CONTAINER: {
+        case DataCardFieldTypes.SourceContainer: {
             const { containerName, language, runtimeVersion, instrumented, instrumentationMessage, otelDistroName } = safeJsonParse(value, {
                 containerName: '',
-                language: PROGRAMMING_LANGUAGES.UNKNOWN,
+                language: ProgrammingLanguages.Unknown,
                 runtimeVersion: '',
                 instrumented: false,
                 instrumentationMessage: '',
                 otelDistroName: '',
             });
             const awaitingInstrumentation = !instrumented && !instrumentationMessage;
-            return (React.createElement(DataTab, { title: containerName, subTitle: `${language === PROGRAMMING_LANGUAGES.JAVASCRIPT ? 'Node.js' : capitalizeFirstLetter(language)}` + (!!runtimeVersion ? ` • Runtime Version: ${runtimeVersion}` : ''), icon: getProgrammingLanguageIcon(language), isExtended: !!instrumentationMessage, renderExtended: () => {
+            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: NOTIFICATION_TYPE.INFO, title: splitCamelString(instrumentationMessage) })));
+                            React.createElement(Status, { status: StatusType.Info, title: splitCamelString(instrumentationMessage) })));
                     }
                     return null;
                 }, renderActions: () => {
-                    return (React.createElement(Status, { status: instrumented ? NOTIFICATION_TYPE.SUCCESS : awaitingInstrumentation ? NOTIFICATION_TYPE.WARNING : NOTIFICATION_TYPE.ERROR, title: instrumented ? 'Instrumented' : awaitingInstrumentation ? 'Instrumenting...' : 'Uninstrumented', subtitle: otelDistroName, withIcon: true, withBorder: true }));
+                    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 }));
                 } }));
         }
         default: {
@@ -4711,10 +4720,10 @@ const DataCard = ({ title = 'Details', titleBadge, description, action: Action,
 };
 
 const DeleteWarning = ({ isOpen, noOverlay, name, type, isLastItem, onApprove, onDeny }) => {
-    const actionText = type === ENTITY_TYPES.SOURCE ? 'uninstrument' : 'delete';
+    const actionText = type === EntityTypes.Source ? 'uninstrument' : 'delete';
     return (React.createElement(WarningModal, { isOpen: isOpen, noOverlay: noOverlay, title: `${actionText.charAt(0).toUpperCase() + actionText.substring(1)}${name ? ` ${name}` : ''}`, description: `Are you sure you want to ${actionText}?`, note: isLastItem
             ? {
-                type: NOTIFICATION_TYPE.WARNING,
+                type: StatusType.Warning,
                 title: `You're about to ${actionText} the last ${type || name}`,
                 message: '',
             }
@@ -4783,11 +4792,20 @@ const Tab = styled(Text) `
   gap: 8px;
 `;
 const DrawerHeader = ({ onClose, icon, iconSrc, title, titleTooltip, replaceTitleWith: ReplaceTitleWith, actionButtons = [], tabs }) => {
+    const renderReplaceTitleWith = () => {
+        if (typeof ReplaceTitleWith === 'function') {
+            return React.createElement(ReplaceTitleWith, null);
+        }
+        if (ReplaceTitleWith) {
+            return ReplaceTitleWith;
+        }
+        return null;
+    };
     return (React.createElement(Container$j, null,
         React.createElement(TopRow, null,
             React.createElement(SectionItemsWrapper, null,
                 (!!icon || !!iconSrc) && React.createElement(IconWrapped, { icon: icon, src: iconSrc, alt: 'Drawer Item' }),
-                !!ReplaceTitleWith ? (React.createElement(ReplaceTitleWith, null)) : (React.createElement(Tooltip, { text: titleTooltip, withIcon: true }, title && React.createElement(Title$7, null, title)))),
+                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 }))),
                 React.createElement(CloseButton, { "data-id": 'drawer-close', variant: 'secondary', onClick: onClose },
@@ -6009,12 +6027,12 @@ const SkeletonLoader = ({ size = 5, maxWidth }) => {
             React.createElement(Line, { "$width": '100%' })))))));
 };
 
-var STEP_STATE;
-(function (STEP_STATE) {
-    STEP_STATE["ACTIVE"] = "active";
-    STEP_STATE["DISABLED"] = "disabled";
-    STEP_STATE["FINISH"] = "finish";
-})(STEP_STATE || (STEP_STATE = {}));
+var StepState;
+(function (StepState) {
+    StepState["Active"] = "active";
+    StepState["Disabled"] = "disabled";
+    StepState["Finished"] = "finish";
+})(StepState || (StepState = {}));
 const Container$4 = styled.div `
   display: flex;
   flex-direction: column;
@@ -6024,7 +6042,7 @@ const Step = styled.div `
   display: flex;
   gap: 16px;
   padding: 8px;
-  opacity: ${({ $state }) => ($state === STEP_STATE.ACTIVE ? 1 : $state === STEP_STATE.DISABLED ? 0.5 : 0.8)};
+  opacity: ${({ $state }) => ($state === StepState.Active ? 1 : $state === StepState.Disabled ? 0.5 : 0.8)};
   transition: all 0.3s;
 `;
 const IconWrapper = styled(FlexRow) `
@@ -6032,8 +6050,8 @@ const IconWrapper = styled(FlexRow) `
   width: 24px;
   height: 24px;
   border-radius: 32px;
-  border: ${({ theme, $state }) => ($state === STEP_STATE.DISABLED ? `1px dashed ${theme.text.dark_grey}` : `1px solid ${theme.colors.secondary}`)};
-  opacity: ${({ $state }) => ($state === STEP_STATE.FINISH ? 0.8 : 1)};
+  border: ${({ theme, $state }) => ($state === StepState.Disabled ? `1px dashed ${theme.text.dark_grey}` : `1px solid ${theme.colors.secondary}`)};
+  opacity: ${({ $state }) => ($state === StepState.Finished ? 0.8 : 1)};
 `;
 const Content$1 = styled(FlexColumn) `
   justify-content: center;
@@ -6046,18 +6064,18 @@ const Stepper = ({ data, currentStep = 0 }) => {
     useEffect(() => {
         setStepsList(data.map((step, i) => {
             if (i < currentStep - 1) {
-                return { ...step, state: STEP_STATE.FINISH, subtitle: 'Success' };
+                return { ...step, state: StepState.Finished, subtitle: 'Success' };
             }
             else if (i === currentStep - 1) {
-                return { ...step, state: STEP_STATE.ACTIVE };
+                return { ...step, state: StepState.Active };
             }
             else {
-                return { ...step, state: STEP_STATE.DISABLED };
+                return { ...step, state: StepState.Disabled };
             }
         }));
     }, [currentStep, data]);
     return (React.createElement(Container$4, null, stepsList.map((step, index) => (React.createElement(Step, { key: index, "$state": step.state },
-        React.createElement(IconWrapper, { "$state": step.state }, [STEP_STATE.ACTIVE, STEP_STATE.DISABLED].includes(step.state) ? React.createElement(Text, { size: 12 }, step.stepNumber) : step.state === STEP_STATE.FINISH ? React.createElement(CheckIcon, { size: 20 }) : null),
+        React.createElement(IconWrapper, { "$state": step.state }, [StepState.Active, StepState.Disabled].includes(step.state) ? React.createElement(Text, { size: 12 }, step.stepNumber) : step.state === StepState.Finished ? React.createElement(CheckIcon, { size: 20 }) : null),
         React.createElement(Content$1, null,
             React.createElement(Title$1, { family: 'secondary' }, step.title),
             step.subtitle && (React.createElement(Subtitle, { size: 10, weight: 300 }, step.subtitle))))))));
@@ -29571,4 +29589,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, getDefaultExportFromCjs as a3, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e, DATA_CARD_FIELD_TYPES 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 { 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 };

package/lib/{index-g6Twdelv.js → index-BtuW12KL.js}

@@ -1,7 +1,7 @@
-import { NOTIFICATION_TYPE, OTHER_STATUS, ENTITY_TYPES, PLATFORM_TYPE } from './types.js';
-import { a as getProgrammingLanguageIcon } from './index-Bc8gi9FH.js';
+import { StatusType, OtherStatus, EntityTypes, PlatformType } from './types.js';
+import { a as getProgrammingLanguageIcon } from './index-CYn62h8x.js';
 import 'react';
-import './index-DIcomki-.js';
+import './index-DYEcdkUF.js';
 import 'styled-components';
 import { R as RulesIcon, A as ActionsIcon, D as DestinationsIcon, S as SourcesIcon, V as VmLogo } from './index-BjJpYtF1.js';
 import { O as OdigosLogo, K as K8sLogo } from './index-BGlk5VhF.js';
@@ -61,7 +61,7 @@ const filterSources = (sources, filters) => {
     if (!!filters.languages?.length)
         filtered = filtered.filter((source) => !!filters.languages?.find((language) => !!source.containers?.find((cont) => cont.language === language.id)));
     if (!!filters.onlyErrors)
-        filtered = filtered.filter((source) => !!source.conditions?.find((cond) => cond.status === NOTIFICATION_TYPE.ERROR));
+        filtered = filtered.filter((source) => !!source.conditions?.find((cond) => cond.status === StatusType.Error));
     if (!!filters.errors?.length)
         filtered = filtered.filter((source) => !!filters.errors?.find((error) => !!source.conditions?.find((cond) => cond.message === error.id)));
     return filtered;
@@ -77,11 +77,11 @@ const formatBytes = (bytes) => {
 };
 
 const getConditionsBooleans = (conditions) => {
-    const hasErrors = !!conditions?.find(({ status }) => status === NOTIFICATION_TYPE.ERROR);
-    const hasWarnings = !!conditions?.find(({ status }) => status === NOTIFICATION_TYPE.WARNING);
-    const hasDisableds = !!conditions?.find(({ status }) => status === OTHER_STATUS.DISABLED);
-    const hasLoadings = !!conditions?.find(({ status }) => status === OTHER_STATUS.LOADING);
-    const priorotizedStatus = hasErrors ? NOTIFICATION_TYPE.ERROR : hasWarnings ? NOTIFICATION_TYPE.WARNING : hasDisableds ? NOTIFICATION_TYPE.INFO : undefined;
+    const hasErrors = !!conditions?.find(({ status }) => status === StatusType.Error);
+    const hasWarnings = !!conditions?.find(({ status }) => status === StatusType.Warning);
+    const hasDisableds = !!conditions?.find(({ status }) => status === OtherStatus.Disabled);
+    const hasLoadings = !!conditions?.find(({ status }) => status === OtherStatus.Loading);
+    const priorotizedStatus = hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : hasDisableds ? StatusType.Info : undefined;
     return {
         hasErrors,
         hasWarnings,
@@ -104,10 +104,10 @@ const getContainersIcons = (containers) => {
 
 const getEntityIcon = (type) => {
     const LOGOS = {
-        [ENTITY_TYPES.SOURCE]: SourcesIcon,
-        [ENTITY_TYPES.DESTINATION]: DestinationsIcon,
-        [ENTITY_TYPES.ACTION]: ActionsIcon,
-        [ENTITY_TYPES.INSTRUMENTATION_RULE]: RulesIcon,
+        [EntityTypes.Source]: SourcesIcon,
+        [EntityTypes.Destination]: DestinationsIcon,
+        [EntityTypes.Action]: ActionsIcon,
+        [EntityTypes.InstrumentationRule]: RulesIcon,
     };
     return LOGOS[type];
 };
@@ -117,22 +117,22 @@ const getEntityLabel = (entity, entityType, options) => {
     let type = '';
     let name = '';
     switch (entityType) {
-        case ENTITY_TYPES.INSTRUMENTATION_RULE:
+        case EntityTypes.InstrumentationRule:
             const rule = entity;
             type = rule.type;
             name = rule.ruleName;
             break;
-        case ENTITY_TYPES.SOURCE:
+        case EntityTypes.Source:
             const source = entity;
             type = source.name;
             name = source.otelServiceName;
             break;
-        case ENTITY_TYPES.ACTION:
+        case EntityTypes.Action:
             const action = entity;
             type = action.type;
             name = action.spec.actionName;
             break;
-        case ENTITY_TYPES.DESTINATION:
+        case EntityTypes.Destination:
             const destination = entity;
             type = destination.destinationType.displayName;
             name = destination.name;
@@ -147,7 +147,7 @@ const getEntityLabel = (entity, entityType, options) => {
 };
 
 const getMetricForEntity = (metrics, entityType, entityId) => {
-    const metric = entityType === ENTITY_TYPES.SOURCE
+    const metric = entityType === EntityTypes.Source
         ? metrics?.sources.find((m) => m.kind === entityId.kind && m.name === entityId.name && m.namespace === entityId.namespace)
         : metrics?.destinations.find((m) => m.id === entityId);
     return metric || { throughput: 0 };
@@ -157,8 +157,8 @@ const getPlatformIcon = (type) => {
     if (!type)
         return OdigosLogo;
     const LOGOS = {
-        [PLATFORM_TYPE.K8S]: K8sLogo,
-        [PLATFORM_TYPE.VM]: VmLogo,
+        [PlatformType.K8s]: K8sLogo,
+        [PlatformType.Vm]: VmLogo,
     };
     return LOGOS[type];
 };
@@ -167,8 +167,8 @@ const getPlatformLabel = (type) => {
     if (!type)
         return 'Unknown';
     const LABELS = {
-        [PLATFORM_TYPE.K8S]: 'Kubernetes Cluster',
-        [PLATFORM_TYPE.VM]: 'Virtual Machine',
+        [PlatformType.K8s]: 'Kubernetes Cluster',
+        [PlatformType.Vm]: 'Virtual Machine',
     };
     return LABELS[type];
 };