@odigos/ui-kit 0.0.59 → 0.0.61

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.0.61](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.60...ui-kit-v0.0.61) (2025-07-16)
+
+
+### Features
+
+* add new arrow icons ([#249](https://github.com/odigos-io/ui-kit/issues/249)) ([78ce04b](https://github.com/odigos-io/ui-kit/commit/78ce04bbda601d31703224eae025d60317397f68))
+
+## [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 { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-8dae7939.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';
@@ -3599,7 +3599,7 @@ const MultiSourceControl = ({ totalSourceCount, uninstrumentSources, restartWork
             React.createElement(Button, { variant: 'tertiary', onClick: onDeselect },
                 React.createElement(Text, { family: 'secondary', decoration: 'underline' }, "Deselect")),
             React.createElement(Button, { variant: 'tertiary', onClick: onRestart },
-                React.createElement(RetryIcon, null),
+                React.createElement(RefreshLeftArrowIcon, null),
                 React.createElement(Text, { family: 'secondary', decoration: 'underline' }, "Restart")),
             React.createElement(Button, { variant: 'tertiary', onClick: () => setIsWarnModalOpen(true) },
                 React.createElement(TrashIcon, null),
@@ -4365,7 +4365,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource, resta
                 variant: 'tertiary',
                 onClick: () => restartWorkloads([drawerEntityId]),
                 children: (React.createElement(React.Fragment, null,
-                    React.createElement(RetryIcon, null),
+                    React.createElement(RefreshLeftArrowIcon, null),
                     React.createElement(Text, { size: 14, family: 'secondary', decoration: 'underline' }, "Restart"))),
             },
         ] }, selectedTab === Tabs.Overview ? (isEditing ? (React.createElement(FormContainer, null,

package/lib/icons/common/index.d.ts

@@ -15,7 +15,10 @@ export * from './list-icon';
 export * from './no-data-icon';
 export * from './notebook-icon';
 export * from './notification-icon';
-export * from './retry-icon';
+export * from './refresh-arrows-icon';
+export * from './refresh-left-arrow-icon';
+export * from './refresh-right-arrow-icon';
+export * from './rotate-arrows-icon';
 export * from './search-icon';
 export * from './sort-arrows-icon';
 export * from './terminal-icon';

package/lib/icons/common/refresh-arrows-icon/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const RefreshArrowsIcon: SVG;

package/lib/icons/common/refresh-left-arrow-icon/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const RefreshLeftArrowIcon: SVG;

package/lib/icons/common/refresh-right-arrow-icon/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const RefreshRightArrowIcon: SVG;

package/lib/icons/common/rotate-arrows-icon/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const RotateArrowsIcon: SVG;

package/lib/icons.js

@@ -1,7 +1,7 @@
 import { T as Theme } from './index-e9b26c29.js';
 export { f as AddClusterInfoIcon, n as CPlusPlusLogo, o as CSharpLogo, C as CodeAttributesIcon, l as CustomInstrumentationIcon, h as DeleteAttributeIcon, p as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, j as ImageErrorIcon, J as JavaLogo, K as K8sLogo, k as KafkaLogo, q as MysqlLogo, N as NginxLogo, r as NodejsLogo, m as PayloadCollectionIcon, s as PhpLogo, P as PiiMaskingIcon, t as PostgresLogo, u as PythonLogo, v as RedisLogo, R as RenameAttributeIcon, w as RubyLogo, x as RustLogo, i as SamplerIcon, y as SwiftLogo } from './index-e9b26c29.js';
 export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-630dec93.js';
-export { C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RetryIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-3de83c73.js';
+export { C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RefreshLeftArrowIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-8dae7939.js';
 export { A as ArrowIcon, h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-0001f711.js';
 import React from 'react';
 export { a3 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AwsCloudwatchLogo, d as AwsS3Logo, e as AwsXrayLogo, f as AxiomLogo, B as BetterStackLogo, g as BlobStorageLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, a4 as DestinationsIcon, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, G as GigapipeLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, a5 as NamespacesIcon, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, F as OpenTelemetryLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, T as QuickwitLogo, a6 as RulesIcon, U as SeqLogo, W as SignozLogo, a7 as SourcesIcon, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, V as VmLogo } from './index-27fc9053.js';
@@ -36,6 +36,27 @@ const FolderIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M1.5 7.96504C1.5 6.28488 1.5 5.4448 1.82698 4.80307C2.1146 4.23858 2.57354 3.77964 3.13803 3.49202C3.77976 3.16504 4.61984 3.16504 6.3 3.16504H6.53667C6.88887 3.16504 7.06498 3.16504 7.22483 3.21358C7.36634 3.25656 7.49799 3.32702 7.61225 3.42093C7.74131 3.527 7.83899 3.67353 8.03436 3.96658L8.46564 4.6135C8.66101 4.90655 8.75869 5.05308 8.88775 5.15915C9.00201 5.25306 9.13366 5.32352 9.27517 5.36649C9.43502 5.41504 9.61113 5.41504 9.96333 5.41504H11.7C13.3802 5.41504 14.2202 5.41504 14.862 5.74202C15.4265 6.02964 15.8854 6.48858 16.173 7.05307C16.5 7.6948 16.5 8.53488 16.5 10.215V11.865C16.5 13.5452 16.5 14.3853 16.173 15.027C15.8854 15.5915 15.4265 16.0504 14.862 16.3381C14.2202 16.665 13.3802 16.665 11.7 16.665H6.3C4.61984 16.665 3.77976 16.665 3.13803 16.3381C2.57354 16.0504 2.1146 15.5915 1.82698 15.027C1.5 14.3853 1.5 13.5452 1.5 11.865V7.96504Z' })));
 };
 
+const RefreshArrowsIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size, height: size * (24 / 25), viewBox: '0 0 25 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M17.9999 2.47363C18.5091 3.66573 18.8614 4.91832 19.0484 6.2C19.0805 6.41989 18.9578 6.63253 18.7513 6.71469C18.691 6.7387 18.6305 6.7623 18.5699 6.78551M6.99987 21.5262C6.49066 20.3341 6.13833 19.0815 5.9513 17.7998C5.91921 17.5799 6.04198 17.3673 6.24846 17.2851C6.30879 17.2611 6.36926 17.2375 6.42987 17.2143M14.9999 7.66979C16.2224 7.5225 17.4213 7.22534 18.5699 6.78551M18.5699 6.78551C17.9972 6.11891 17.3041 5.53603 16.4999 5.07171C12.6735 2.86257 7.78081 4.17357 5.57167 7.99991C4.55722 9.75698 4.28506 11.7389 4.65789 13.5826M20.4085 10.7925C20.6745 12.5275 20.374 14.3615 19.4281 15.9999C17.2189 19.8263 12.3262 21.1373 8.49987 18.9281C7.69564 18.4638 7.00253 17.8809 6.42987 17.2143M9.99987 16.33C8.77739 16.4773 7.57842 16.7745 6.42987 17.2143' })));
+};
+
+const RefreshRightArrowIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size, height: size * (24 / 25), viewBox: '0 0 25 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M18.2834 2.66992C18.7926 3.86202 19.1449 5.11461 19.332 6.39629C19.3808 6.73098 19.117 6.88085 18.8534 6.9818C18.8221 6.9938 18.7907 7.00568 18.7593 7.01746M18.7593 7.01746C17.2936 5.17853 15.0344 4 12.5 4C8.08172 4 4.5 7.58172 4.5 12C4.5 16.4183 8.08172 20 12.5 20C16.2277 20 19.3599 17.4505 20.248 14M18.7593 7.01746C17.6394 7.43772 16.4725 7.72281 15.2834 7.86607' })));
+};
+
+const RotateArrowsIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size, height: size * (24 / 25), viewBox: '0 0 25 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M12.5 2C13.5964 2.79655 14.5785 3.73031 15.4207 4.77659C15.474 4.84283 15.5004 4.92241 15.5 5.00189M12.5 8C13.5964 7.20345 14.5785 6.26969 15.4207 5.22341C15.4731 5.15821 15.4996 5.0801 15.5 5.00189M12.5 16C11.4036 16.7965 10.4215 17.7303 9.57935 18.7766C9.52687 18.8418 9.50042 18.9199 9.5 18.9981M12.5 22C11.4036 21.2035 10.4215 20.2697 9.57935 19.2234C9.52603 19.1572 9.49958 19.0776 9.5 18.9981M15.5 5.00189C15.1991 5 14.8677 5 14.5 5H10.5C8.63872 5 7.70808 5 6.95492 5.24472C5.43273 5.73931 4.23931 6.93273 3.74472 8.45492C3.5 9.20808 3.5 10.1387 3.5 12C3.5 13.8613 3.5 14.7919 3.74472 15.5451C4.06708 16.5372 4.68631 17.3897 5.49995 18M9.5 18.9981C9.80088 19 10.1323 19 10.5 19H14.5C16.3613 19 17.2919 19 18.0451 18.7553C19.5673 18.2607 20.7607 17.0673 21.2553 15.5451C21.5 14.7919 21.5 13.8613 21.5 12C21.5 10.1387 21.5 9.20808 21.2553 8.45492C20.9329 7.46279 20.3137 6.61033 19.5001 6' })));
+};
+
 const UserGroupIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -144,4 +165,4 @@ const ErrorRoundIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth =
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M7 8.33673V6.00339M7 10.3055V10.3061M12.25 7.97266C12.25 10.8722 9.89949 13.2227 7 13.2227C4.1005 13.2227 1.75 10.8721 1.75 7.97265C1.75 5.07316 4.10051 2.72266 7 2.72266C9.8995 2.72266 12.25 5.07316 12.25 7.97266Z' })));
 };
 
-export { AvatarIcon, CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, FolderIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MinusCircledIcon, MoonIcon, PlusCircledIcon, SentryLogo, ServiceMapIcon, SunIcon, TraceViewIcon, UserGroupIcon, UserSettingsIcon };
+export { AvatarIcon, CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, FolderIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MinusCircledIcon, MoonIcon, PlusCircledIcon, RefreshArrowsIcon, RefreshRightArrowIcon, RotateArrowsIcon, SentryLogo, ServiceMapIcon, SunIcon, TraceViewIcon, UserGroupIcon, UserSettingsIcon };

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-3de83c73.js → index-8dae7939.js}

@@ -42,10 +42,10 @@ const NotificationIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.10569 12.3626C5.27488 12.3229 4.44501 12.2571 3.61736 12.1651C2.94777 12.0907 2.51712 11.4179 2.73017 10.7787C2.83819 10.4547 2.94697 10.1359 2.97558 9.79265L3.21224 6.95266C3.41977 4.46237 5.50153 2.54688 8.00045 2.54688C10.4994 2.54688 12.5811 4.46237 12.7886 6.95266L13.0254 9.79425C13.054 10.1373 13.1627 10.456 13.2703 10.78C13.4824 11.4188 13.052 12.0906 12.383 12.165C11.5555 12.257 10.7258 12.3228 9.89517 12.3625M6.10569 12.3626C7.36812 12.4229 8.63275 12.4229 9.89517 12.3625M6.10569 12.3626L6.10571 12.6522C6.10571 13.6986 6.95401 14.5469 8.00045 14.5469C9.04688 14.5469 9.89519 13.6986 9.89519 12.6522L9.89517 12.3625' })));
 };
 
-const RetryIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
+const RefreshLeftArrowIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+    return (React.createElement("svg", { width: size, height: size * (24 / 25), viewBox: '0 0 25 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.71458 2.66992C6.20537 3.86202 5.85304 5.11461 5.66601 6.39629C5.61717 6.73098 5.88094 6.88085 6.14457 6.9818C6.17589 6.9938 6.20724 7.00568 6.23864 7.01746M6.23864 7.01746C7.70439 5.17853 9.96355 4 12.498 4C16.9162 4 20.498 7.58172 20.498 12C20.498 16.4183 16.9162 20 12.498 20C8.77029 20 5.63809 17.4505 4.75 14M6.23864 7.01746C7.35852 7.43772 8.52543 7.72281 9.71458 7.86607' })));
 };
 
@@ -97,4 +97,4 @@ const CrossCircledIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.75049 10.0005L8.75049 8.00049M8.75049 8.00049L10.7505 6.00049M8.75049 8.00049L6.75049 6.00049M8.75049 8.00049L10.7505 10.0005M8.75039 14.1004C5.38145 14.1004 2.65039 11.3693 2.65039 8.00039C2.65039 4.63145 5.38145 1.90039 8.75039 1.90039C12.1193 1.90039 14.8504 4.63145 14.8504 8.00039C14.8504 11.3693 12.1193 14.1004 8.75039 14.1004Z' })));
 };
 
-export { CrossCircledIcon as C, DataStreamsIcon as D, FilterIcon as F, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, RetryIcon as R, SlackLogo as S, TerminalIcon as T, UserIcon as U, OverviewIcon as a };
+export { CrossCircledIcon as C, DataStreamsIcon as D, FilterIcon as F, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, RefreshLeftArrowIcon as R, SlackLogo as S, TerminalIcon as T, UserIcon as U, OverviewIcon as a };

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.61",
   "author": "Odigos",
   "repository": {
     "type": "git",

package/lib/icons/common/retry-icon/index.d.ts

@@ -1,2 +0,0 @@
-import type { SVG } from '@/types';
-export declare const RetryIcon: SVG;