@odigos/ui-kit 0.0.10 → 0.0.12

package/lib/{index-Do8ODRlA.js → index-B5wdZoej.js}

@@ -1,13 +1,13 @@
 import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment, useId } from 'react';
-import { STATUS_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-DB1gmCsH.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: STATUS_TYPE.WARNING,
+            variant: StatusType.Warning,
             onClick: onApprove,
         }, denyButton: {
             text: 'Go Back',
@@ -3671,7 +3671,7 @@ const TableRow$1 = styled.tr `
     padding-right: 0 !important;
   }
 `;
-const TableData$1 = styled.td `
+const TableData = styled.td `
   vertical-align: top;
   padding: 4px 6px;
 `;
@@ -3737,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(STATUS_TYPE.WARNING, theme);
+                    Icon = getStatusIcon(StatusType.Warning, theme);
                 return React.createElement(Icon, { key: useId() });
             default:
                 console.warn('unexpected component type!', type);
@@ -3751,8 +3751,8 @@ const PrettyJsonCode = ({ darkMode, str }) => {
     const theme = Theme.useTheme();
     const renderEmptyRows = (count = 2) => {
         const rows = new Array(count).fill((props) => (React.createElement(TableRow$1, { ...props },
-            React.createElement(TableData$1, null),
-            React.createElement(TableData$1, null))));
+            React.createElement(TableData, null),
+            React.createElement(TableData, null))));
         return (React.createElement(Fragment, null, rows.map((R, i) => (React.createElement(R, { key: useId(), style: i === 0 ? { borderBottom: `1px solid ${theme.colors.border}` } : {} })))));
     };
     return (React.createElement(Highlight2, { theme: darkMode ? themes_exports.palenight : themes_exports.vsLight, language: 'json', code: str }, ({ getLineProps, getTokenProps, tokens }) => (React.createElement(Table$1, null,
@@ -3763,15 +3763,15 @@ const PrettyJsonCode = ({ darkMode, str }) => {
                 return (React.createElement(Fragment, { key: `line-${i}` },
                     renderEmptyRows(),
                     React.createElement(TableRow$1, { ...lineProps },
-                        React.createElement(TableData$1, null,
+                        React.createElement(TableData, null,
                             React.createElement(Title$c, null, formattedLine[0].content)),
-                        React.createElement(TableData$1, null))));
+                        React.createElement(TableData, null))));
             }
             else if (formattedLine.length === 2) {
                 return (React.createElement(TableRow$1, { key: `line-${i}`, ...lineProps }, formattedLine.map((token, ii) => {
                     const { text, components } = getComponentsFromPropertyString(token.content, theme);
                     const isRowTitle = ii === 0;
-                    return (React.createElement(TableData$1, { key: `line-${i}-token-${ii}` },
+                    return (React.createElement(TableData, { key: `line-${i}-token-${ii}` },
                         React.createElement(FlexRow, null,
                             React.createElement(FlexRow, null, components),
                             React.createElement(CodeLineToken, { "$noWrap": isRowTitle }, text))));
@@ -3965,15 +3965,15 @@ const ExtendArrow = ({ extend, size = 14, align = 'center' }) => {
 
 const Container$q = styled.div `
   border-radius: 24px;
-  background-color: ${({ theme, $status }) => $status === STATUS_TYPE.ERROR
+  background-color: ${({ theme, $status }) => $status === StatusType.Error
     ? theme.text.error + Theme.opacity.hex['010']
-    : $status === STATUS_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 === STATUS_TYPE.ERROR
+    background-color: ${({ theme, $status }) => $status === StatusType.Error
     ? theme.text.error + Theme.opacity.hex['020']
-    : $status === STATUS_TYPE.WARNING
+    : $status === StatusType.Warning
         ? theme.text.warning + Theme.opacity.hex['020']
         : theme.colors.secondary + Theme.opacity.hex['010']};
   }
@@ -3992,7 +3992,7 @@ const Body = styled.div `
   gap: 8px;
   padding: 6px 18px 12px 18px;
 `;
-const Row$1 = styled.div `
+const Row = styled.div `
   display: flex;
   align-items: center;
   gap: 12px;
@@ -4004,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 === STATUS_TYPE.ERROR), [conditions]);
+    const errors = useMemo(() => conditions.filter(({ status }) => status === StatusType.Error), [conditions]);
     const hasErrors = !!errors.length;
-    const warnings = useMemo(() => conditions.filter(({ status }) => status === STATUS_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 ? STATUS_TYPE.ERROR : hasWarnings ? STATUS_TYPE.WARNING : hasDisableds ? STATUS_TYPE.INFO : STATUS_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;
@@ -4030,16 +4030,16 @@ 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(STATUS_TYPE.INFO, theme) : getStatusIcon(status, theme);
-            const color = status === 'disabled' ? theme.text.info : status === STATUS_TYPE.ERROR ? theme.text.error : status === STATUS_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 === STATUS_TYPE.ERROR
+                : status === StatusType.Error
                     ? theme.text.error_secondary
-                    : status === STATUS_TYPE.WARNING
+                    : status === StatusType.Warning
                         ? theme.text.warning_secondary
                         : theme.text.info_secondary;
-            return (React.createElement(Row$1, { key: `condition-${idx}` },
+            return (React.createElement(Row, { key: `condition-${idx}` },
                 React.createElement(Icon, null),
                 React.createElement(FlexRow, { "$gap": 12, style: { width: '100%', justifyContent: 'space-between' } },
                     React.createElement(Text, { color: color, size: 12 },
@@ -4077,10 +4077,10 @@ const TextWrapper$1 = styled.div `
   display: flex;
   align-items: center;
 `;
-const Status = ({ title, subtitle, size = 12, family = 'secondary', status = STATUS_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 ? STATUS_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))),
@@ -4312,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 ? STATUS_TYPE.SUCCESS : STATUS_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 },
@@ -4367,14 +4367,14 @@ 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 `
+const Tr = styled.tr `
   cursor: ${({ $withHover }) => ($withHover ? 'pointer' : 'default')};
   opacity: ${({ $faded }) => ($faded ? 0.5 : 1)};
 `;
-const TableData = styled.td `
+const Td = styled.td `
   position: relative;
   width: fit-content;
   padding: 16px 8px 16px ${({ $isFirst }) => ($isFirst ? '16px' : '8px')};
@@ -4410,10 +4410,10 @@ const RowBackground = styled.div `
         ? theme.text[$status] + Theme.opacity.hex['010']
         : theme.colors.secondary + Theme.opacity.hex['005']};
 `;
-const Row = ({ index, columns, cells, onClick, status, faded }) => {
+const TableRow = ({ index, columns, cells, onClick, status, faded }) => {
     const { containerRef, containerHeight, containerWidth } = useContainerSize();
     const [isHovered, setIsHovered] = useState(false);
-    return (React.createElement(TableRow
+    return (React.createElement(Tr
     // @ts-ignore
     , { 
         // @ts-ignore
@@ -4422,7 +4422,7 @@ const Row = ({ index, columns, cells, onClick, status, faded }) => {
         if (!rowCell)
             return null;
         const { value, textColor, withTooltip, icon, component: Component } = rowCell;
-        return (React.createElement(TableData, { key: useId(), "$isFirst": i === 0 },
+        return (React.createElement(Td, { key: useId(), "$isFirst": i === 0 },
             !!icon ? (React.createElement(IconWrapped, { icon: icon })) : !!Component ? (React.createElement(Component, null)) : (React.createElement(Tooltip, { text: withTooltip && !!value ? String(value) : '' },
                 React.createElement(RowText, { "$color": textColor }, !isEmpty(value) ? value : '-'))),
             i === 0 && React.createElement(RowBackground, { "$height": containerHeight, "$width": containerWidth, "$top": containerHeight * index, "$hovered": isHovered, "$status": status })));
@@ -4468,24 +4468,19 @@ 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 InteractiveTable = ({ columns, rows }) => {
+    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(() => {
+    const sortedRows = useMemo(() => {
         const getCellValue = (row, key) => {
             return row.cells.find(({ columnKey }) => columnKey === key)?.value ?? null;
         };
@@ -4499,38 +4494,38 @@ const InteractiveTable = ({ columns, rows, onRowClick }) => {
             // Fallback (handles null, undefined, mixed types)
             return String(a).localeCompare(String(b));
         };
-        return !!sortBy
+        return (sortBy
             ? [...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;
-    }, [rows, sortBy, sortDirection]);
+            : 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,
         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) },
                     React.createElement(SortArrowsIcon, null),
                     React.createElement(Title$9, null, title))) : (React.createElement(Title$9, null, title))))))),
-            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 })))))));
+            React.createElement(TableBody, null, sortedRows))));
 };
 
-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;
@@ -4570,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' ? STATUS_TYPE.SUCCESS : STATUS_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) => {
@@ -4632,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: STATUS_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: STATUS_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 === STATUS_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: STATUS_TYPE.INFO, title: splitCamelString(instrumentationMessage) })));
+                            React.createElement(Status, { status: StatusType.Info, title: splitCamelString(instrumentationMessage) })));
                     }
                     return null;
                 }, renderActions: () => {
-                    return (React.createElement(Status, { status: instrumented ? STATUS_TYPE.SUCCESS : awaitingInstrumentation ? STATUS_TYPE.WARNING : STATUS_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: {
@@ -4725,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: STATUS_TYPE.WARNING,
+                type: StatusType.Warning,
                 title: `You're about to ${actionText} the last ${type || name}`,
                 message: '',
             }
@@ -6032,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;
@@ -6047,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) `
@@ -6055,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;
@@ -6069,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))))))));
@@ -29594,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, TableContainer as a3, TableTitleWrap as a4, TableWrap as a5, getDefaultExportFromCjs as a6, 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 };