@odigos/ui-kit 0.0.59 → 0.0.60

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.0.60](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.59...ui-kit-v0.0.60) (2025-07-16)
+
+
+### Features
+
+* add tab-list component ([#247](https://github.com/odigos-io/ui-kit/issues/247)) ([e363e5c](https://github.com/odigos-io/ui-kit/commit/e363e5cdfcbefc432ed9f04a19d3c1acf933bcaa))
+
 ## [0.0.59](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.58...ui-kit-v0.0.59) (2025-07-16)
 
 

package/lib/components/drawer/drawer-header/index.d.ts

@@ -1,6 +1,6 @@
 import { type FC, type ReactNode } from 'react';
 import type { SVG } from '@/types';
-import { type ButtonProps } from '../../button';
+import { type ButtonProps } from '@/components/button';
 interface DrawerHeaderProps {
     onClose: () => void;
     icons?: SVG[];
@@ -8,6 +8,7 @@ interface DrawerHeaderProps {
     title?: string;
     titleTooltip?: string;
     replaceTitleWith?: ReactNode | (() => ReactNode);
+    actions?: ReactNode;
     actionButtons?: (ButtonProps & {
         'data-id': string;
     })[];

package/lib/components/index.d.ts

@@ -46,6 +46,7 @@ export * from './selection-button';
 export * from './skeleton-loader';
 export * from './status';
 export * from './stepper';
+export * from './tab-list';
 export * from './tag';
 export * from './text';
 export * from './textarea';

package/lib/components/tab-list/index.d.ts

@@ -0,0 +1,17 @@
+import React, { type FC } from 'react';
+import type { SVG } from '@/types';
+interface Tab {
+    label: string;
+    icon?: SVG;
+    onClick: () => void;
+    selected?: boolean;
+}
+interface TabListProps {
+    tabs?: Tab[];
+    hideBorder?: boolean;
+}
+declare const Tab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TextProps, {
+    $selected?: boolean;
+}>> & string & Omit<React.FC<import("..").TextProps>, keyof React.Component<any, {}, any>>;
+declare const TabList: FC<TabListProps>;
+export { TabList, type TabListProps, type Tab };

package/lib/components.js

@@ -1,6 +1,6 @@
-import { B as Button } from './index-e6385bb5.js';
-export { A as AutocompleteInput, a as Badge, a5 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a4 as FlexColumn, a3 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a8 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a7 as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, a9 as TableContainer, aa as TableTitleWrap, ab as TableWrap, Y as Tag, Z as Text, _ as TextArea, $ as Toggle, T as ToggleCodeComponent, a0 as Tooltip, a1 as TraceLoader, a6 as VerticalScroll, a2 as WarningModal } from './index-e6385bb5.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-bb79aa09.js';
+import { B as Button } from './index-eb5688cd.js';
+export { A as AutocompleteInput, a as Badge, a6 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a5 as FlexColumn, a4 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a9 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a8 as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, aa as TableContainer, ab as TableTitleWrap, ac as TableWrap, Z as Tag, _ as Text, $ as TextArea, a0 as Toggle, T as ToggleCodeComponent, a1 as Tooltip, a2 as TraceLoader, a7 as VerticalScroll, a3 as WarningModal } from './index-eb5688cd.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-1a165096.js';
 import React, { createContext, Component, createElement } from 'react';
 import { T as Theme } from './index-e9b26c29.js';
 import './types.js';

package/lib/containers.js

@@ -2,14 +2,14 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, us
 import styled, { css } from 'styled-components';
 import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, j as ImageErrorIcon, a0 as useDarkMode } from './index-e9b26c29.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind } from './types.js';
-import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, Z as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, _ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a4 as FlexColumn, M as Modal, N as NavigationButtons, a8 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a3 as FlexRow, a0 as Tooltip, s as IconWrapped, G as MonitorsIcons, a9 as TableContainer, aa as TableTitleWrap, r as IconTitleBadge, ab as TableWrap, y as InteractiveTable, a5 as CenterThis, J as NoDataFound, a1 as TraceLoader, a as Badge, E as ExtendArrow, a6 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ac as nodeConfig, ad as useNodesState, ae as useEdgesState, af as Flow, ag as applyNodeChanges, P as Popup, $ as Toggle, I as IconButton, ah as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Y as Tag, ai as MarkerType, t as IconsNav, aj as CopyText, h as DescribeRow, ak as PodContainer, al as SourceContainer, q as IconGroup, O as PopupForm } from './index-e6385bb5.js';
+import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, $ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a5 as FlexColumn, M as Modal, N as NavigationButtons, a9 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a4 as FlexRow, a1 as Tooltip, s as IconWrapped, G as MonitorsIcons, aa as TableContainer, ab as TableTitleWrap, r as IconTitleBadge, ac as TableWrap, y as InteractiveTable, a6 as CenterThis, J as NoDataFound, a2 as TraceLoader, a as Badge, E as ExtendArrow, a7 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ad as nodeConfig, ae as useNodesState, af as useEdgesState, ag as Flow, ah as applyNodeChanges, P as Popup, a0 as Toggle, I as IconButton, ai as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, aj as MarkerType, t as IconsNav, ak as CopyText, h as DescribeRow, al as PodContainer, am as SourceContainer, q as IconGroup, O as PopupForm } from './index-eb5688cd.js';
 import { i as isEmpty, s as safeJsonParse } from './index-ec555530.js';
 import { C as CheckCircledIcon, O as OdigosLogo } from './index-630dec93.js';
 import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, R as RetryIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-3de83c73.js';
 import { useActionFormData, useSessionStorage, useDataStreamFormData, useDestinationFormData, useClickNotification, useSourceFormData, useSourceSelectionFormData } from './hooks.js';
 import { u as useKeyDown, a as useOnClickOutside, b as useContainerSize, c as useClickNode, d as usePopup, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-242df96b.js';
 import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, A as ArrowIcon, P as PlusIcon, a as CopyIcon } from './index-0001f711.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-bb79aa09.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-1a165096.js';
 import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-355d023b.js';
 import { f as filterActions, m as getEntityLabel, l as getEntityIcon, w as sleep, o as getPlatformIcon, p as getPlatformLabel, h as formatBytes, j as getContainersIcons, q as getValueForRange, k as getDestinationIcon, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, v as mapDestinationFieldsForDisplay, c as compareCondition, s as getYamlFieldsForDestination, d as deepClone, n as getMetricForEntity, r as getWorkloadId, t as hasUnhealthyInstances, i as getContainersInstrumentedCount, u as isOverTime } from './index-f2c2de35.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';

package/lib/{index-bb79aa09.js → index-1a165096.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a2 as WarningModal } from './index-e6385bb5.js';
+import { a3 as WarningModal } from './index-eb5688cd.js';
 import { StatusType, EntityTypes } from './types.js';
 import './index-e9b26c29.js';
 import 'styled-components';

package/lib/{index-e6385bb5.js → index-eb5688cd.js}

@@ -240,7 +240,7 @@ const Badge = ({ label, filled, status, withIcon, onClick }) => {
         label));
 };
 
-const Container$G = styled.div `
+const Container$H = styled.div `
   height: fit-content;
   border: 2px solid transparent;
   padding: 2px;
@@ -340,7 +340,7 @@ const StyledButton$3 = styled.button `
 `;
 const Button$4 = ({ children, variant = 'primary', onClick, ...props }) => {
     const ref = useRef(null);
-    return (React.createElement(Container$G, { "$variant": variant },
+    return (React.createElement(Container$H, { "$variant": variant },
         React.createElement(StyledButton$3, { ref: ref, "$variant": variant, onClick: (e) => {
                 if (onClick)
                     onClick(e);
@@ -348,7 +348,7 @@ const Button$4 = ({ children, variant = 'primary', onClick, ...props }) => {
             }, ...props }, children)));
 };
 
-const Container$F = styled.div `
+const Container$G = styled.div `
   position: absolute;
   ${({ $top }) => $top !== undefined && `top: ${$top}px;`}
   ${({ $bottom }) => $bottom !== undefined && `bottom: ${$bottom}px;`}
@@ -378,7 +378,7 @@ const Footer$1 = styled.div `
 const Popup = forwardRef(({ isOpen, asPortal, ...props }, ref) => {
     const Element = useMemo(() => {
         const { children, top, bottom, left, right, borderRadius, padding, maxWidth, width, header, footer } = props;
-        return (React.createElement(Container$F, { ref: ref, "$top": top, "$bottom": bottom, "$left": left, "$right": right, "$borderRadius": borderRadius, "$padding": padding, "$maxWidth": maxWidth, "$width": width, "$asPortal": asPortal },
+        return (React.createElement(Container$G, { ref: ref, "$top": top, "$bottom": bottom, "$left": left, "$right": right, "$borderRadius": borderRadius, "$padding": padding, "$maxWidth": maxWidth, "$width": width, "$asPortal": asPortal },
             header && React.createElement(Header$3, { "$padding": padding }, header),
             React.createElement(Body$1, { "$padding": padding }, children),
             footer && React.createElement(Footer$1, { "$padding": padding }, footer)));
@@ -490,7 +490,7 @@ const Tooltip = ({ withIcon, titleIcon: TitleIcon, title, text, timestamp, child
                 !!timestamp && (React.createElement(Text, { size: 10, color: theme.text.darker_grey, family: 'secondary', style: { marginTop: '8px' } }, new Date(timestamp).toLocaleString()))))));
 };
 
-const Container$E = styled.div `
+const Container$F = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -527,7 +527,7 @@ const Checkbox = ({ title, titleColor, tooltip, value = false, partiallyChecked
             setIsChecked((prev) => (partiallyChecked ? true : !prev));
     };
     return (React.createElement(FlexColumn, null,
-        React.createElement(Container$E, { "data-id": `checkbox${!!title ? `-${title}` : ''}`, "$disabled": disabled, onClick: handleToggle, style: style },
+        React.createElement(Container$F, { "data-id": `checkbox${!!title ? `-${title}` : ''}`, "$disabled": disabled, onClick: handleToggle, style: style },
             React.createElement(CheckboxWrapper, { "$isChecked": isChecked, "$isPartiallyChecked": partiallyChecked, "$disabled": disabled }, partiallyChecked ? React.createElement(MinusIcon$1, { 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)))),
@@ -3663,7 +3663,7 @@ prismjs/prism.js:
    *)
 */
 
-const Container$D = styled(FlexRow) `
+const Container$E = styled(FlexRow) `
   gap: 0;
 `;
 const Button$3 = styled.button `
@@ -3680,7 +3680,7 @@ const Button$3 = styled.button `
   }
 `;
 const ToggleCodeComponent = ({ isPrettyMode, setIsPrettyMode }) => {
-    return (React.createElement(Container$D, null,
+    return (React.createElement(Container$E, 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) },
@@ -3972,18 +3972,18 @@ const FadeLoader = ({ loading = true, color: clr, scale = 1, speedMultiplier = 1
             } })));
 };
 
-const Container$C = styled.div `
+const Container$D = 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$C, { "$align": align },
+    return (React.createElement(Container$D, { "$align": align },
         React.createElement(ExtendArrowIcon, { size: size, rotate: extend ? 180 : 0 })));
 };
 
-const Container$B = styled.div `
+const Container$C = styled.div `
   border-radius: 24px;
   background-color: ${({ theme, $status }) => $status === StatusType.Error
     ? theme.text.error + Theme.opacity.hex['010']
@@ -4039,7 +4039,7 @@ 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$B, { onClick: toggleExtend, "$status": overallStatus },
+    return (React.createElement(Container$C, { 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),
@@ -4076,7 +4076,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$A = styled.div `
+const Container$B = styled.div `
   display: flex;
   align-items: center;
   gap: ${({ $size }) => $size / 3}px;
@@ -4105,7 +4105,7 @@ const Status = ({ title, subtitle, status = StatusType.Default, forceIcon: Force
         : status === OtherStatus.Loading
             ? () => React.createElement(FadeLoader, { scale: 0.8 })
             : () => getStatusIcon(statusType, theme)?.({ size: size + 2 });
-    return (React.createElement(Container$A, { "$status": statusType, "$width": width, "$size": size, "$withIcon": withIcon, "$withBorder": withBorder, "$withBackground": withBackground },
+    return (React.createElement(Container$B, { "$status": statusType, "$width": width, "$size": size, "$withIcon": withIcon, "$withBorder": withBorder, "$withBackground": withBackground },
         withIcon && (React.createElement(IconWrapper$4, null,
             React.createElement(StatusIcon, null))),
         (!!title || !!subtitle) && (React.createElement(TextWrapper$1, null,
@@ -4221,7 +4221,7 @@ const ImageControlled = ({ src = '', alt = '', size = 16 }) => {
     return React.createElement(ImageErrorIcon, { size: size });
 };
 
-const Container$z = styled.div `
+const Container$A = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4234,10 +4234,10 @@ const Container$z = styled.div `
 }};
 `;
 const IconWrapped = ({ icon: Icon, src = '', alt = '', status, size = 36 }) => {
-    return (React.createElement(Container$z, { "$status": status, "$size": size }, src ? React.createElement(ImageControlled, { src: src, alt: alt, size: size - 12 }) : !!Icon ? React.createElement(Icon, { size: size - 12 }) : React.createElement(ImageErrorIcon, { size: size - 12 })));
+    return (React.createElement(Container$A, { "$status": status, "$size": size }, src ? React.createElement(ImageControlled, { src: src, alt: alt, size: size - 12 }) : !!Icon ? React.createElement(Icon, { size: size - 12 }) : React.createElement(ImageErrorIcon, { size: size - 12 })));
 };
 
-const Container$y = styled.div `
+const Container$z = styled.div `
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -4290,7 +4290,7 @@ const IconGroup = ({ icons = [], iconSrcs = [], status, size = 36, id }) => {
             return imgSize * 1.15;
         return imgSize * 1.15 * 0.5;
     };
-    return (React.createElement(Container$y, { "$status": status, "$size": size }, icons.map((Icon, idx) => {
+    return (React.createElement(Container$z, { "$status": status, "$size": size }, icons.map((Icon, idx) => {
         if (idx > 2)
             return null;
         return (React.createElement(IconWrapper$3, { key: `icon-${id}-${idx}`, "$status": status, "$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 },
@@ -4321,7 +4321,7 @@ const MonitorsIcons = ({ monitors = defaultMonitors, withTooltips, withLabels, s
 const ControlledVisibility$1 = styled.div `
   visibility: hidden;
 `;
-const Container$x = styled.div `
+const Container$y = styled.div `
   display: flex;
   flex-direction: column;
   align-self: stretch;
@@ -4380,7 +4380,7 @@ const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps
             setTextMaxWidth(containerWidth - widthOfNonTextContents);
         }
     }, [withCheckbox]);
-    return (React.createElement(Container$x, { ref: containerRef, "$status": status, "$faded": faded, "$bgColor": bgColor, "$bgColorHover": bgColorHover, "$withClick": !!onClick, onClick: onClick, ...props },
+    return (React.createElement(Container$y, { 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 },
                 isCheckboxLoading ? React.createElement(FadeLoader, null) : withCheckbox ? React.createElement(Checkbox, { value: isChecked, onChange: onCheckboxChange, disabled: isCheckboxDisabled }) : null,
@@ -4406,7 +4406,7 @@ const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps
             renderExtended()))));
 };
 
-const Container$w = styled(FlexRow) `
+const Container$x = styled(FlexRow) `
   width: 100%;
   justify-content: space-between;
 `;
@@ -4429,7 +4429,7 @@ const ValueText = styled(Text) `
   text-align: right;
 `;
 const DescribeRow = ({ title, subTitle, tooltip, value }) => {
-    return (React.createElement(Container$w, null,
+    return (React.createElement(Container$x, null,
         React.createElement(FlexColumn, { "$gap": 4 },
             React.createElement(Tooltip, { text: tooltip || '' },
                 title && React.createElement(Title$b, null, title),
@@ -16420,7 +16420,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
  */
 memo(ResizeControl);
 
-const Container$v = styled(FlexColumn) `
+const Container$w = styled(FlexColumn) `
   align-items: center !important;
   justify-content: center;
   align-self: stretch;
@@ -16457,7 +16457,7 @@ const AddNode = memo(({ id: nodeId, data }) => {
     const { isThisPending } = usePendingStore();
     const entity = nodeId.split('-')[0];
     const isPending = isThisPending({ entityType: entity });
-    return (React.createElement(Container$v, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$w, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         isPending ? (React.createElement(Fragment, null,
             React.createElement(TitleWrapper$1, null,
                 React.createElement(FadeLoader, null),
@@ -16475,7 +16475,7 @@ const AddNode = memo(({ id: nodeId, data }) => {
 });
 AddNode.displayName = AddNode.name;
 
-const Container$u = styled.div `
+const Container$v = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
 `;
 const BaseNode = memo(({ id: nodeId, data }) => {
@@ -16508,7 +16508,7 @@ const BaseNode = memo(({ id: nodeId, data }) => {
         }
         setSelectedSources(namespaces);
     };
-    return (React.createElement(Container$u, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$v, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         React.createElement(DataTab, { title: title, subTitle: subTitle, onClick: () => { }, renderActions: renderActions, iconProps: {
                 icon: icon,
                 icons: icons,
@@ -16529,20 +16529,20 @@ const BaseNode = memo(({ id: nodeId, data }) => {
 });
 BaseNode.displayName = BaseNode.name;
 
-const Container$t = styled.div `
+const Container$u = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
   height: ${({ $nodeHeight }) => `${$nodeHeight}px`};
   opacity: 0;
 `;
 const EdgedNode = memo(({ data }) => {
     const { nodeWidth, nodeHeight } = data;
-    return (React.createElement(Container$t, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$u, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } }),
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } })));
 });
 EdgedNode.displayName = EdgedNode.name;
 
-const Container$s = styled.div `
+const Container$t = styled.div `
   width: ${({ $nodeWidth }) => $nodeWidth}px;
   height: ${({ $nodeHeight }) => $nodeHeight}px;
   background: transparent;
@@ -16551,14 +16551,14 @@ const Container$s = styled.div `
 `;
 const FrameNode = memo(({ data }) => {
     const { nodeWidth, nodeHeight } = data;
-    return (React.createElement(Container$s, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$t, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } }),
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } })));
 });
 FrameNode.displayName = FrameNode.name;
 
 const { framePadding } = nodeConfig;
-const Container$r = styled.div `
+const Container$s = styled.div `
   position: relative;
   z-index: 1;
   width: fit-content;
@@ -16606,7 +16606,7 @@ const ScrollNode = memo(({ data, ...rest }) => {
         current?.addEventListener('scroll', handleScroll);
         return () => current?.removeEventListener('scroll', handleScroll);
     }, [onScroll]);
-    return (React.createElement(Container$r, { ref: containerRef, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$s, { ref: containerRef, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         items.map((item) => (React.createElement(BaseNodeWrapper, { key: item.id, onClick: (e) => {
                 e.stopPropagation();
                 // @ts-expect-error - expects an event, but we don't need it, so undefined is fine, also expects full node, we only need the given values
@@ -16629,7 +16629,7 @@ const IconTitleBadge = ({ icon: Icon, title, badge, badgeTooltip, loading }) =>
         loading && React.createElement(FadeLoader, null)));
 };
 
-const Container$q = styled.div `
+const Container$r = styled.div `
   position: relative;
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
   padding: 12px 0px 16px 0px;
@@ -16695,7 +16695,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
             setSelectedSources({});
         }
     };
-    return (React.createElement(Container$q, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$r, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         entityType === EntityTypes.Source && (React.createElement(SelectorWrapper, null,
             React.createElement(Checkbox, { partiallyChecked: hasSelected && sources?.length !== totalSelectedSources, value: hasSelected && sources?.length === totalSelectedSources, onChange: onSelect, disabled: !sources?.length }))),
         React.createElement(IconTitleBadge, { icon: Icon, title: title, badge: isSourceAwaitingInstrumentation ? `${instrumentingPercent}%` : badge, badgeTooltip: badgeTooltip, loading: isFetching && !isSourceAwaitingInstrumentation }),
@@ -16726,7 +16726,7 @@ const Actions = memo(({ entityType }) => {
 HeaderNode.displayName = HeaderNode.name;
 Actions.displayName = Actions.name;
 
-const Container$p = styled(FlexColumn) `
+const Container$q = styled(FlexColumn) `
   max-width: 300px;
   padding: 12px;
   border-radius: 12px;
@@ -16735,7 +16735,7 @@ const Container$p = styled(FlexColumn) `
 `;
 const NoDataNode = memo(({ id: nodeId, data }) => {
     const { title, subTitle } = data;
-    return (React.createElement(Container$p, { "data-id": nodeId },
+    return (React.createElement(Container$q, { "data-id": nodeId },
         React.createElement(NoDataFound, { title: title, subTitle: subTitle })));
 });
 NoDataNode.displayName = NoDataNode.name;
@@ -16775,7 +16775,7 @@ const LabeledEdge = memo(({ id, sourceX, sourceY, targetX, targetY, sourcePositi
 });
 LabeledEdge.displayName = LabeledEdge.name;
 
-const Container$o = styled.div `
+const Container$p = styled.div `
   padding: 6px;
   border-radius: 12px;
   background-color: ${({ theme }) => theme.colors.dropdown_bg};
@@ -16817,7 +16817,7 @@ const MapItemNode = memo(({ id: nodeId, data }) => {
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } }),
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } }),
         React.createElement(Relative$1, { "data-id": nodeId },
-            React.createElement(Container$o, null,
+            React.createElement(Container$p, null,
                 React.createElement(IconGroup, { id: serviceId, icons: icons, status: status })),
             React.createElement(AbsoluteTitle, null,
                 StatusIcon && React.createElement(StatusIcon, null),
@@ -16836,7 +16836,7 @@ const MapItemNode = memo(({ id: nodeId, data }) => {
 });
 MapItemNode.displayName = MapItemNode.name;
 
-const Container$n = styled.div `
+const Container$o = styled.div `
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -16868,19 +16868,19 @@ const Line = styled.div `
   border-radius: 4px;
 `;
 const SkeletonLoader = ({ size = 5, maxWidth }) => {
-    return (React.createElement(Container$n, { "$maxWidth": maxWidth }, [...Array(size)].map((_, index) => (React.createElement(SkeletonItem, { key: index },
+    return (React.createElement(Container$o, { "$maxWidth": maxWidth }, [...Array(size)].map((_, index) => (React.createElement(SkeletonItem, { key: index },
         React.createElement(Thumbnail, null),
         React.createElement(LineWrapper, null,
             React.createElement(Line, { "$width": '80%' }),
             React.createElement(Line, { "$width": '100%' })))))));
 };
 
-const Container$m = styled.div `
+const Container$n = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
 `;
 const SkeletonNode = memo(({ id: nodeId, data }) => {
     const { nodeWidth } = data;
-    return (React.createElement(Container$m, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$n, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         React.createElement(SkeletonLoader, { size: 3 })));
 });
 SkeletonNode.displayName = SkeletonNode.name;
@@ -17047,7 +17047,7 @@ const TableRow = ({ index, columns, cells, onClick, status, faded }) => {
     })));
 };
 
-const Container$l = styled.div `
+const Container$m = styled.div `
   width: 100%;
 `;
 const Table = styled.table `
@@ -17121,7 +17121,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$l, null,
+    return (React.createElement(Container$m, 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) },
@@ -17265,7 +17265,7 @@ const DataCard = ({ title = 'Details', titleBadge, description, action: Action,
 const ControlledVisibility = styled.div `
   visibility: hidden;
 `;
-const Container$k = styled(FlexRow) `
+const Container$l = styled(FlexRow) `
   align-self: stretch;
   width: calc(100% - 32px);
   padding: 16px;
@@ -17312,7 +17312,7 @@ const DataFinger = ({ title, subTitle, icons, iconSrcs, onClick, renderActions }
             setTextMaxWidth(containerWidth - widthOfNonTextContents);
         }
     }, []);
-    return (React.createElement(Container$k, { ref: containerRef, "$gap": 8, "$withClick": !!onClick, onClick: onClick },
+    return (React.createElement(Container$l, { ref: containerRef, "$gap": 8, "$withClick": !!onClick, onClick: onClick },
         React.createElement(IconGroup, { id: `${title}-${subTitle}`, icons: icons, iconSrcs: iconSrcs }),
         title && React.createElement(ScrollX, { maxWidth: textMaxWidth / 2, text: title, textSize: 14 }),
         title && subTitle && React.createElement(SubText, null, "\u2022"),
@@ -17337,6 +17337,27 @@ const DocsButton = ({ endpoint = '/', variant = 'secondary' }) => {
         "Docs"));
 };
 
+const Container$k = styled(FlexRow) `
+  border-bottom: ${({ $hideBorder, theme }) => ($hideBorder ? 'none' : `1px solid ${theme.colors.border}`)};
+`;
+const Tab = styled(Text) `
+  padding: 12px;
+  font-size: 14px;
+  color: ${({ theme, $selected }) => ($selected ? theme.text.secondary : theme.text.grey)};
+  border-bottom: 2px solid ${({ theme, $selected }) => ($selected ? theme.colors.majestic_blue : 'transparent')};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const TabList = ({ tabs, hideBorder = false }) => {
+    if (!tabs?.length)
+        return null;
+    return (React.createElement(Container$k, { "$hideBorder": hideBorder }, tabs.map(({ label, icon: Icon, onClick, selected }) => (React.createElement(Tab, { key: `tab-${label}`, onClick: onClick, "$selected": selected },
+        label,
+        Icon && React.createElement(Icon, null))))));
+};
+
 const Container$j = styled.section `
   padding: 0px 32px;
   border-bottom: 1px solid ${({ theme }) => theme.colors.border};
@@ -17348,7 +17369,6 @@ const TopRow = styled.div `
   flex-shrink: 0;
   align-self: stretch;
 `;
-const BottomRow = styled(FlexRow) ``;
 const SectionItemsWrapper = styled.div `
   display: flex;
   align-items: center;
@@ -17366,17 +17386,7 @@ const ActionButton$1 = styled(Button$4) `
   gap: 8px;
 `;
 const CloseButton = styled(Button$4) ``;
-const Tab = styled(Text) `
-  padding: 12px;
-  font-size: 14px;
-  color: ${({ theme, $selected }) => ($selected ? theme.text.secondary : theme.text.grey)};
-  border-bottom: 2px solid ${({ theme, $selected }) => ($selected ? theme.colors.majestic_blue : 'transparent')};
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTitleWith: ReplaceTitleWith, actionButtons = [], tabs }) => {
+const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTitleWith: ReplaceTitleWith, actions, actionButtons = [], tabs }) => {
     const renderReplaceTitleWith = () => {
         if (typeof ReplaceTitleWith === 'function') {
             return React.createElement(ReplaceTitleWith, null);
@@ -17392,12 +17402,11 @@ const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTi
                 icons?.length || iconSrcs?.length ? React.createElement(IconGroup, { icons: icons, iconSrcs: iconSrcs, id: `drawer-header-${title}` }) : null,
                 renderReplaceTitleWith() || (React.createElement(Tooltip, { text: titleTooltip, withIcon: true }, title && React.createElement(Title$6, null, title)))),
             React.createElement(SectionItemsWrapper, { "$gap": 2 },
+                actions,
                 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 },
                     React.createElement(XIcon, { size: 12 })))),
-        !!tabs?.length && (React.createElement(BottomRow, null, tabs.map(({ label, icon: Icon, onClick, selected }) => (React.createElement(Tab, { key: `drawer-header-tab-${label}`, onClick: onClick, "$selected": selected },
-            label,
-            Icon && React.createElement(Icon, null))))))));
+        React.createElement(TabList, { tabs: tabs, hideBorder: true })));
 };
 
 const Container$i = styled.div `
@@ -38389,4 +38398,4 @@ const WarningModal = ({ isOpen, noOverlay, title = '', description = '', note, a
                 React.createElement(FooterButton, { "data-id": 'deny', variant: denyButton.variant || 'secondary', onClick: onDeny }, denyButton.text)))));
 };
 
-export { Toggle as $, AutocompleteInput as A, Button$4 as B, Checkbox 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, PopupForm as O, Popup as P, SectionTitle as Q, Segment as R, ScrollX as S, ToggleCodeComponent as T, SelectionButton as U, SkeletonLoader as V, Status as W, Stepper as X, Tag as Y, Text as Z, TextArea as _, Badge as a, Tooltip as a0, TraceLoader as a1, WarningModal as a2, FlexRow as a3, FlexColumn as a4, CenterThis as a5, VerticalScroll as a6, Overlay as a7, ModalBody as a8, TableContainer as a9, TableTitleWrap as aa, TableWrap as ab, nodeConfig as ac, useNodesState as ad, useEdgesState as ae, Flow as af, applyNodeChanges as ag, AddButton$1 as ah, MarkerType as ai, CopyText as aj, PodContainer as ak, SourceContainer as al, AddNode as am, BaseNode as an, EdgedNode as ao, FrameNode as ap, HeaderNode as aq, MapItemNode as ar, NoDataNode as as, ScrollNode as at, SkeletonNode as au, LabeledEdge as av, Code as b, ConditionDetails as c, DataCardFields as d, DataCardFieldTypes as e, DataFinger as f, DataTab as g, DescribeRow 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 { TextArea as $, AutocompleteInput as A, Button$4 as B, Checkbox 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, PopupForm as O, Popup as P, SectionTitle as Q, Segment as R, ScrollX as S, ToggleCodeComponent as T, SelectionButton as U, SkeletonLoader as V, Status as W, Stepper as X, TabList as Y, Tag as Z, Text as _, Badge as a, Toggle as a0, Tooltip as a1, TraceLoader as a2, WarningModal as a3, FlexRow as a4, FlexColumn as a5, CenterThis as a6, VerticalScroll as a7, Overlay as a8, ModalBody as a9, TableContainer as aa, TableTitleWrap as ab, TableWrap as ac, nodeConfig as ad, useNodesState as ae, useEdgesState as af, Flow as ag, applyNodeChanges as ah, AddButton$1 as ai, MarkerType as aj, CopyText as ak, PodContainer as al, SourceContainer as am, AddNode as an, BaseNode as ao, EdgedNode as ap, FrameNode as aq, HeaderNode as ar, MapItemNode as as, NoDataNode as at, ScrollNode as au, SkeletonNode as av, LabeledEdge as aw, Code as b, ConditionDetails as c, DataCardFields as d, DataCardFieldTypes as e, DataFinger as f, DataTab as g, DescribeRow 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/snippets.js

@@ -1,5 +1,5 @@
-import { B as Button, Z as Text, L as NotificationNote } from './index-e6385bb5.js';
-export { ah as AddButton, am as AddNode, an as BaseNode, aj as CopyText, ao as EdgedNode, af as Flow, ap as FrameNode, aq as HeaderNode, av as LabeledEdge, ar as MapItemNode, as as NoDataNode, ak as PodContainer, at as ScrollNode, au as SkeletonNode, al as SourceContainer, ac as nodeConfig } from './index-e6385bb5.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-eb5688cd.js';
+export { ai as AddButton, an as AddNode, ao as BaseNode, ak as CopyText, ap as EdgedNode, ag as Flow, aq as FrameNode, ar as HeaderNode, aw as LabeledEdge, as as MapItemNode, at as NoDataNode, al as PodContainer, au as ScrollNode, av as SkeletonNode, am as SourceContainer, ad as nodeConfig } from './index-eb5688cd.js';
 import React from 'react';
 import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-e9b26c29.js';
 import { E as EditIcon } from './index-0001f711.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.59",
+  "version": "0.0.60",
   "author": "Odigos",
   "repository": {
     "type": "git",