@odigos/ui-kit 0.0.7 → 0.0.9

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

@@ -1,15 +1,14 @@
 import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment, useId } from 'react';
 import { NOTIFICATION_TYPE, OTHER_STATUS, PROGRAMMING_LANGUAGES, ENTITY_TYPES } from './types.js';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import styled, { css } from 'styled-components';
 import Theme from './theme.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-4tCBQ2pl.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-Bc8gi9FH.js';
 import { s as safeJsonParse, i as isEmpty } from './index-BZS1ijMm.js';
-import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, c as SortArrowsIcon, a as CopyIcon, b as NotebookIcon, X as XIcon, d as EyeClosedIcon, e as EyeOpenIcon, N as NoDataIcon, g as CrossIcon, S as SearchIcon, T as TrashIcon, P as PlusIcon, A as ArrowIcon } from './index-BJxaoI0G.js';
-import { M as MONITORS_OPTIONS } from './index-Byh3BO6S.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-5w3VnEhL.js';
+import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, I as ImageErrorIcon, c as SortArrowsIcon, a as CopyIcon, b as NotebookIcon, X as XIcon, d as EyeClosedIcon, e as EyeOpenIcon, N as NoDataIcon, g as CrossIcon, S as SearchIcon, T as TrashIcon, P as PlusIcon, A as ArrowIcon } from './index-D_Qn2U89.js';
+import { M as MONITORS_OPTIONS } from './index-CZe2VX28.js';
+import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-Dfxjcy-C.js';
 import ReactDOM from 'react-dom';
-import { O as OdigosLogo } from './index-BGlk5VhF.js';
 import require$$0 from 'babel-runtime/helpers/extends';
 import require$$1$1 from 'babel-runtime/core-js/object/get-prototype-of';
 import require$$2 from 'babel-runtime/helpers/classCallCheck';
@@ -17,7 +16,7 @@ import require$$3 from 'babel-runtime/helpers/createClass';
 import require$$4 from 'babel-runtime/helpers/possibleConstructorReturn';
 import require$$5 from 'babel-runtime/helpers/inherits';
 import require$$1 from 'object-assign';
-import { I as InfoIcon } from './index-DLKEpJJm.js';
+import { I as InfoIcon } from './index-ixs381n-.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -4082,7 +4081,7 @@ const ImageControlled = ({ src = '', alt = '', size = 16 }) => {
     if (!!src && !hasError) {
         return React.createElement("img", { src: src, alt: alt, width: size, height: size, onError: () => setHasError(true) });
     }
-    return React.createElement(OdigosLogo, { size: size });
+    return React.createElement(ImageErrorIcon, { size: size });
 };
 
 const Container$o = styled.div `
@@ -4098,7 +4097,7 @@ const Container$o = styled.div `
 }};
 `;
 const IconWrapped = ({ icon: Icon, src = '', alt = '', status, size = 36 }) => {
-    return (React.createElement(Container$o, { "$status": status, "$size": size }, !!src ? React.createElement(ImageControlled, { src: src, size: size - 16 }) : !!Icon ? React.createElement(Icon, { size: size - 16 }) : React.createElement(OdigosLogo, { size: size - 16 })));
+    return (React.createElement(Container$o, { "$status": status, "$size": size }, src ? React.createElement(ImageControlled, { src: src, alt: alt, size: size - 16 }) : !!Icon ? React.createElement(Icon, { size: size - 16 }) : React.createElement(ImageErrorIcon, { size: size - 16 })));
 };
 
 const Container$n = styled.div `
@@ -4553,6 +4552,7 @@ const CopyWrapper = styled(FlexRow) `
   pre {
     color: ${({ theme }) => theme.text.default};
     font-size: 12px;
+    overflow-x: auto;
   }
 `;
 const DataCardFields = ({ data }) => {
@@ -4645,7 +4645,7 @@ const renderValue = (type, value) => {
                 otelDistroName: '',
             });
             const awaitingInstrumentation = !instrumented && !instrumentationMessage;
-            return (React.createElement(DataTab, { title: containerName, subTitle: `${language === PROGRAMMING_LANGUAGES.JAVASCRIPT ? 'Node.js' : capitalizeFirstLetter(language)}` + (!!runtimeVersion ? ` • Runtime Version: ${runtimeVersion}` : ''), iconSrc: getProgrammingLanguageIcon(language), isExtended: !!instrumentationMessage, renderExtended: () => {
+            return (React.createElement(DataTab, { title: containerName, subTitle: `${language === PROGRAMMING_LANGUAGES.JAVASCRIPT ? 'Node.js' : capitalizeFirstLetter(language)}` + (!!runtimeVersion ? ` • Runtime Version: ${runtimeVersion}` : ''), icon: getProgrammingLanguageIcon(language), isExtended: !!instrumentationMessage, renderExtended: () => {
                     if (!!instrumentationMessage) {
                         return (React.createElement(AlignCenter, null,
                             React.createElement(Status, { status: NOTIFICATION_TYPE.INFO, title: splitCamelString(instrumentationMessage) })));
@@ -4670,18 +4670,15 @@ const CardContainer = styled.div `
   padding: 24px;
   border-radius: 24px;
   border: 1px solid ${({ theme }) => theme.colors.border};
-  cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
+  background-color: ${({ theme, $hovered }) => ($hovered ? theme.colors.secondary + Theme.opacity.hex['010'] : 'transparent')};
   transition: background-color 0.3s;
-  ${({ $clickable, theme }) => $clickable &&
-    `&:hover {
-      background-color: ${theme.colors.secondary + Theme.opacity.hex['010']};
-    }`}
 `;
 const Header$1 = styled.div `
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 4px;
+  cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
 `;
 const Title$8 = styled(Text) `
   width: 100%;
@@ -4700,8 +4697,9 @@ const ActionWrapper = styled(FlexRow) `
 `;
 const DataCard = ({ title = 'Details', titleBadge, description, action: Action, withExtend, data }) => {
     const [extend, setExtend] = useState(false);
-    return (React.createElement(CardContainer, { "$clickable": !!withExtend, onClick: () => withExtend && setExtend((prev) => !prev) },
-        !!title || !!description || !!Action ? (React.createElement(Header$1, null,
+    const [hovered, setHovered] = useState(false);
+    return (React.createElement(CardContainer, { "$hovered": hovered },
+        !!title || !!description || !!Action ? (React.createElement(Header$1, { "$clickable": withExtend || false, onClick: () => withExtend && setExtend((prev) => !prev), onMouseEnter: () => withExtend && setHovered(true), onMouseLeave: () => withExtend && setHovered(false) },
             (!!title || !!Action) && (React.createElement(Title$8, null,
                 title,
                 titleBadge !== undefined && React.createElement(Badge, { label: titleBadge }),
@@ -5200,9 +5198,10 @@ const DropdownItem = styled.div `
 const DropdownListItem = ({ option, value, isMulti, onSelect, onDeselect }) => {
     const theme = Theme.useTheme();
     const isSelected = Array.isArray(value) ? !!value?.find((s) => s.id === option.id) : value?.id === option.id;
+    const handleChange = (toAdd) => (toAdd ? onSelect?.(option) : onDeselect?.(option));
     if (isMulti) {
-        return (React.createElement(DropdownItem, { className: isSelected ? 'selected' : '' },
-            React.createElement(Checkbox, { title: option.value || '', titleColor: theme.text.secondary, value: isSelected, onChange: (toAdd) => (toAdd ? onSelect?.(option) : onDeselect?.(option)), style: { width: '100%' } })));
+        return (React.createElement(DropdownItem, { className: isSelected ? 'selected' : '', onClick: () => handleChange(!isSelected) },
+            React.createElement(Checkbox, { title: option.value || '', titleColor: theme.text.secondary, value: isSelected, onChange: handleChange, style: { width: '100%' } })));
     }
     return (React.createElement(DropdownItem, { className: isSelected ? 'selected' : '', onClick: () => (isSelected ? onDeselect?.(option) : onSelect?.(option)) },
         React.createElement(Text, { size: 14 }, option.value),
@@ -5242,11 +5241,12 @@ const Header = ({ left = [], center = [], right = [] }) => {
 const Title$4 = styled(Text) `
   color: ${({ theme }) => theme.text.grey};
 `;
-const IconTitleBadge = ({ icon: Icon, title, badge, loading }) => {
+const IconTitleBadge = ({ icon: Icon, title, badge, badgeTooltip, loading }) => {
     return (React.createElement(FlexRow, { "$gap": 6 },
         Icon && React.createElement(Icon, null),
         React.createElement(Title$4, { size: 14 }, title),
-        React.createElement(Badge, { label: badge }),
+        typeof badge !== 'undefined' && (React.createElement(Tooltip, { text: badgeTooltip },
+            React.createElement(Badge, { label: badge }))),
         loading && React.createElement(FadeLoader, null)));
 };
 
@@ -5264,8 +5264,8 @@ const Container$d = styled.div `
   justify-content: center;
 `;
 const IconWrap = styled.div `
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
 
   border-radius: 100%;
   background-color: ${({ theme, $selected }) => ($selected ? theme.colors.majestic_blue + Theme.opacity.hex['070'] : theme.colors.secondary + Theme.opacity.hex['012'])};
@@ -5280,12 +5280,12 @@ const IconWrap = styled.div `
 const IconsNav = ({ orientation = 'vertical', flip, mainIcons, subIcons }) => {
     return (React.createElement(Container$d, { "$orientation": orientation, "$flip": flip },
         mainIcons.map(({ icon: Icon, selected, onClick, tooltip }, idx) => (React.createElement(Tooltip, { key: `main-nav-icon-${idx}`, text: tooltip },
-            React.createElement(IconWrap, { "$selected": selected },
-                React.createElement(Icon, { onClick: onClick }))))),
+            React.createElement(IconWrap, { "$selected": selected, onClick: onClick },
+                React.createElement(Icon, { size: 20 }))))),
         !!mainIcons.length && !!subIcons.length && React.createElement(Divider, { orientation: orientation === 'vertical' ? 'horizontal' : 'vertical', margin: '0', length: '20px' }),
         subIcons.map(({ icon: Icon, selected, onClick, tooltip }, idx) => (React.createElement(Tooltip, { key: `sub-nav-icon-${idx}`, text: tooltip },
-            React.createElement(IconWrap, { "$selected": selected },
-                React.createElement(Icon, { onClick: onClick })))))));
+            React.createElement(IconWrap, { "$selected": selected, onClick: onClick },
+                React.createElement(Icon, { size: 20 })))))));
 };
 
 const Container$c = styled.div `
@@ -29571,4 +29571,4 @@ const WarningModal = ({ isOpen, noOverlay, title = '', description = '', note, a
                 React.createElement(FooterButton, { "data-id": 'deny', variant: denyButton.variant || 'secondary', onClick: onDeny }, denyButton.text)))));
 };
 
-export { FlexColumn as $, AutocompleteInput as A, Badge as B, CancelWarning as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, Segment as O, SkeletonLoader as P, Status as Q, Stepper as R, SectionTitle as S, ToggleCodeComponent as T, Text as U, TextArea as V, Toggle as W, Tooltip as X, TraceLoader as Y, WarningModal as Z, FlexRow as _, Button$4 as a, CenterThis as a0, Overlay as a1, ModalBody as a2, getDefaultExportFromCjs as a3, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e, DATA_CARD_FIELD_TYPES as f, DataTab as g, DeleteWarning as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };
+export { FlexColumn as $, AutocompleteInput as A, Button$4 as B, CancelWarning as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, Segment as O, SkeletonLoader as P, Status as Q, Stepper as R, SectionTitle as S, ToggleCodeComponent as T, Text as U, TextArea as V, Toggle as W, Tooltip as X, TraceLoader as Y, WarningModal as Z, FlexRow as _, Badge as a, CenterThis as a0, Overlay as a1, ModalBody as a2, getDefaultExportFromCjs as a3, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e, DATA_CARD_FIELD_TYPES as f, DataTab as g, DeleteWarning as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };

package/lib/store/useEntityStore.d.ts

@@ -16,6 +16,7 @@ interface IEntityStateSetters {
     setEntities: (entityType: ENTITY_TYPES, entities: EntityItems) => void;
     addEntities: (entityType: ENTITY_TYPES, entities: EntityItems) => void;
     removeEntities: (entityType: ENTITY_TYPES, entityIds: EntityId[]) => void;
+    resetEntityStore: () => void;
 }
 export declare const useEntityStore: import("zustand").UseBoundStore<import("zustand").StoreApi<IEntityState & IEntityStateSetters>>;
 export {};

package/lib/store.js

@@ -1,4 +1,4 @@
-export { u as useDarkMode, a as useDrawerStore, b as useEntityStore, c as useFilterStore, d as useInstrumentStore, e as useModalStore, f as useNotificationStore, g as usePendingStore, h as useSelectedStore, i as useSetupStore } from './index-DRT_7tQl.js';
+export { u as useDarkMode, a as useDrawerStore, b as useEntityStore, c as useFilterStore, d as useInstrumentStore, e as useModalStore, f as useNotificationStore, g as usePendingStore, h as useSelectedStore, i as useSetupStore } from './index-DIcomki-.js';
 import './types.js';
 import 'react';
 import 'styled-components';

package/lib/theme.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { u as useDarkMode, j as animations } from './index-DRT_7tQl.js';
+import { u as useDarkMode, j as animations } from './index-DIcomki-.js';
 import { ThemeProvider, useTheme } from 'styled-components';
 import './types.js';
 

package/lib/types/{compute-platform → connection}/index.d.ts

@@ -1,7 +1,7 @@
 import { NOTIFICATION_TYPE, PLATFORM_TYPE } from '../common';
-export interface Platform {
+export interface Connection {
     id: string;
+    type?: PLATFORM_TYPE;
     name?: string;
-    type: PLATFORM_TYPE;
-    connectionStatus: NOTIFICATION_TYPE;
+    status: NOTIFICATION_TYPE;
 }

package/lib/types/index.d.ts

@@ -1,6 +1,6 @@
 export * from './actions';
 export * from './common';
-export * from './compute-platform';
+export * from './connection';
 export * from './data-flow';
 export * from './describe';
 export * from './destinations';

package/lib/{useSourceSelectionFormData-ClorQ_WP.js → useSourceSelectionFormData-BY6B70Kf.js}

@@ -1,11 +1,11 @@
 import { ACTION_TYPE, NOTIFICATION_TYPE, ADD_NODE_TYPES, ENTITY_TYPES, FIELD_TYPES } from './types.js';
 import { useState, useEffect, useCallback } from 'react';
-import { f as useNotificationStore, e as useModalStore, a as useDrawerStore, i as useSetupStore } from './index-DRT_7tQl.js';
+import { f as useNotificationStore, e as useModalStore, a as useDrawerStore, i as useSetupStore } from './index-DIcomki-.js';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import './index-Byh3BO6S.js';
+import './index-CZe2VX28.js';
 import { F as FORM_ALERTS } from './index-Cu2uHOuh.js';
-import { b as useGenericForm } from './useTransition-5w3VnEhL.js';
+import { b as useGenericForm } from './useTransition-Dfxjcy-C.js';
 import { g as getIdFromSseTarget } from './index-BFct3S32.js';
 
 const INITIAL$2 = {
@@ -417,10 +417,11 @@ const useSourceSelectionFormData = (params) => {
                 ...prev,
                 [name]: !!prev[name].length
                     ? prev[name]
-                    : sources.map(({ name, kind, selected }) => ({
+                    : sources.map(({ name, kind, selected, numberOfInstances }) => ({
                         name,
                         kind,
                         selected,
+                        numberOfInstances,
                     })),
             }));
         }

package/lib/{useTransition-5w3VnEhL.js → useTransition-Dfxjcy-C.js}

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import './index-Byh3BO6S.js';
-import { f as useNotificationStore } from './index-DRT_7tQl.js';
+import './index-CZe2VX28.js';
+import { f as useNotificationStore } from './index-DIcomki-.js';
 import { CODE_ATTRIBUTES_KEY_TYPES, PAYLOAD_COLLECTION_KEY_TYPES } from './types.js';
 import styled from 'styled-components';
 
@@ -87,12 +87,33 @@ const useContainerSize = () => {
 const useCopy = () => {
     const [isCopied, setIsCopied] = useState(false);
     const [copiedIndex, setCopiedIndex] = useState(-1);
-    const clickCopy = (str, idx) => {
+    const clickCopy = async (str, idx) => {
         if (!isCopied) {
             setIsCopied(true);
             if (idx !== undefined)
                 setCopiedIndex(idx);
-            navigator.clipboard.writeText(str);
+            if (navigator?.clipboard && navigator.clipboard.writeText) {
+                try {
+                    await navigator.clipboard.writeText(str);
+                }
+                catch (err) {
+                    console.error('Clipboard write failed:', err);
+                }
+            }
+            else {
+                // Fallback: Create a temporary textarea
+                const textArea = document.createElement('textarea');
+                textArea.value = str;
+                document.body.appendChild(textArea);
+                textArea.select();
+                try {
+                    document.execCommand('copy');
+                }
+                catch (err) {
+                    console.error('execCommand copy failed:', err);
+                }
+                document.body.removeChild(textArea);
+            }
             setTimeout(() => {
                 setIsCopied(false);
                 setCopiedIndex(-1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "author": "Odigos",
   "repository": {
     "type": "git",
@@ -8,6 +8,7 @@
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
+    "prebuild": "rm -rf lib",
     "build": "rollup -c --bundleConfigAsCjs"
   },
   "release": {
@@ -71,6 +72,7 @@
     "prism-react-renderer": "^2.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-lottie": "^1.2.10",
     "styled-components": "^6.1.15",
     "zustand": "^5.0.3"
@@ -81,6 +83,7 @@
     "prism-react-renderer": "^2.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-lottie": "^1.2.10",
     "styled-components": "^6.1.15",
     "zustand": "^5.0.3"

package/lib/containers/dropdowns/platform-types-dropdown/platform-types-dropdown.stories.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { StoryFn } from '@storybook/react';
-import { type PlatformTypesDropdownProps } from '.';
-declare const _default: {
-    title: string;
-    component: React.FC<PlatformTypesDropdownProps>;
-};
-export default _default;
-export declare const Default: StoryFn<PlatformTypesDropdownProps>;

package/lib/index-DLKEpJJm.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import Theme from './theme.js';
-
-const LogsIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M2.66699 8.5H6.66699M2.66699 12.5H6.66699M2.66699 4.5L13.3337 4.5M12.4765 12.0146C13.0334 11.61 13.5322 11.1357 13.96 10.6043C14.0138 10.5375 14.0138 10.4441 13.96 10.3773C13.5322 9.84585 13.0334 9.37156 12.4765 8.96696M10.1908 8.96696C9.63389 9.37156 9.13508 9.84585 8.7073 10.3773C8.65356 10.4441 8.65356 10.5375 8.7073 10.6043C9.13508 11.1357 9.63389 11.61 10.1908 12.0146' })));
-};
-
-const MetricsIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M13.2389 9.1672C13.2389 12.4305 10.5935 15.0758 7.33025 15.0758V14.3373M13.2389 9.1672H14.0883C14.0883 5.43485 11.0626 2.40918 7.33025 2.40918V4.73571M13.2389 9.1672L7.33025 9.1672M7.33025 14.3373C4.47491 14.3373 2.16016 12.0225 2.16016 9.1672H2.89877M7.33025 14.3373L7.33025 9.1672M2.89877 9.1672C2.89877 6.71975 4.88281 4.73571 7.33025 4.73571M2.89877 9.1672H7.33025M7.33025 4.73571L7.33025 9.1672' })));
-};
-
-const TracesIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M10.3337 8.5C10.3337 9.60457 11.2291 10.5 12.3337 10.5C13.4382 10.5 14.3337 9.60457 14.3337 8.5C14.3337 7.39543 13.4382 6.5 12.3337 6.5C11.2291 6.5 10.3337 7.39543 10.3337 8.5ZM10.3337 8.5L8.00032 8.5M8.00032 8.5L8.00032 9.3C8.00032 10.4201 8.00032 10.9802 7.78234 11.408C7.59059 11.7843 7.28463 12.0903 6.90831 12.282C6.60852 12.4348 6.24381 12.4805 5.66698 12.4942M8.00032 8.5L8.00032 7.7C8.00032 6.57989 8.00032 6.01984 7.78234 5.59202C7.59059 5.21569 7.28463 4.90973 6.90831 4.71799C6.60852 4.56524 6.24381 4.51952 5.66698 4.50584M5.66698 12.4942C5.66383 11.3923 4.76961 10.5 3.66699 10.5C2.56242 10.5 1.66699 11.3954 1.66699 12.5C1.66699 13.6046 2.56242 14.5 3.66699 14.5C4.77156 14.5 5.66699 13.6046 5.66699 12.5C5.66699 12.4981 5.66699 12.4961 5.66698 12.4942ZM5.66698 4.50584C5.66383 5.60773 4.76961 6.5 3.66699 6.5C2.56242 6.5 1.66699 5.60457 1.66699 4.5C1.66699 3.39543 2.56242 2.5 3.66699 2.5C4.77156 2.5 5.66699 3.39543 5.66699 4.5C5.66699 4.50195 5.66699 4.5039 5.66698 4.50584Z' })));
-};
-
-const CheckCircledIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size, height: size * (16 / 17), viewBox: '0 0 17 16', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.41707 8.34197L7.97787 9.90111C8.72855 8.58846 9.76744 7.46337 11.0162 6.61065L11.0837 6.56453M14.8504 8.00039C14.8504 11.3693 12.1193 14.1004 8.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.00039Z' })));
-};
-
-const ErrorTriangleIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.error;
-    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M8 8.66673V6.00006M8 10.9167V10.9175M7.07337 2.18915C7.66595 1.93695 8.33405 1.93695 8.92662 2.18915C10.6942 2.94145 14.8697 9.61453 14.7474 11.3981C14.6994 12.0972 14.3529 12.7408 13.7982 13.1614C12.323 14.2795 3.67698 14.2795 2.20185 13.1614C1.64705 12.7408 1.3006 12.0972 1.25263 11.3981C1.13026 9.61453 5.30575 2.94145 7.07337 2.18915Z' })));
-};
-
-const InfoIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M8 8.91498V11.5816M8 6.66498V6.66423M14 8.91504C14 12.2287 11.3137 14.915 8 14.915C4.68629 14.915 2 12.2287 2 8.91504C2 5.60133 4.68629 2.91504 8 2.91504C11.3137 2.91504 14 5.60133 14 8.91504Z' })));
-};
-
-const WarningTriangleIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.warning;
-    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M8 8.66673V6.00006M8 10.9167V10.9175M7.07337 2.18915C7.66595 1.93695 8.33405 1.93695 8.92662 2.18915C10.6942 2.94145 14.8697 9.61453 14.7474 11.3981C14.6994 12.0972 14.3529 12.7408 13.7982 13.1614C12.323 14.2795 3.67698 14.2795 2.20185 13.1614C1.64705 12.7408 1.3006 12.0972 1.25263 11.3981C1.13026 9.61453 5.30575 2.94145 7.07337 2.18915Z' })));
-};
-
-export { CheckCircledIcon as C, ErrorTriangleIcon as E, InfoIcon as I, LogsIcon as L, MetricsIcon as M, TracesIcon as T, WarningTriangleIcon as W };