@odigos/ui-kit 0.0.41 → 0.0.42

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.0.42](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.41...ui-kit-v0.0.42) (2025-06-17)
+
+
+### Features
+
+* override runtime ([#183](https://github.com/odigos-io/ui-kit/issues/183)) ([37b183b](https://github.com/odigos-io/ui-kit/commit/37b183b08e56d08faf5107585ab5919aeab2057c))
+
 ## [0.0.41](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.40...ui-kit-v0.0.41) (2025-06-15)
 
 

package/lib/components/data-card/data-card-fields/index.d.ts

@@ -17,6 +17,7 @@ interface DataCardField {
     title?: string;
     tooltip?: string;
     value?: string | Record<string, any>;
+    callback?: (payload: any) => void | Promise<void>;
 }
 interface DataCardFieldsProps {
     data?: DataCardField[];

package/lib/components/data-card/data-card-fields/override-runtime.d.ts

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+import { SourceFormData } from '@/types';
+interface OverrideRuntimeProps {
+    defaultLanguage?: SourceFormData['language'];
+    defaultVersion?: SourceFormData['version'];
+    handleSave: (payload: Pick<SourceFormData, 'language' | 'version'>) => void;
+}
+declare const OverrideRuntime: FC<OverrideRuntimeProps>;
+export { OverrideRuntime, type OverrideRuntimeProps };

package/lib/components/dropdown/index.d.ts

@@ -1,7 +1,9 @@
 import { type FC } from 'react';
-interface DropdownOption {
-    id?: string | null;
+import type { SVG } from '@/types';
+interface DropdownOption<T = string> {
+    id?: T | null;
     value?: string | null;
+    icon?: SVG | null;
 }
 interface DropdownProps {
     title?: string;

package/lib/components.js

@@ -1,15 +1,15 @@
-import { B as Button } from './index-C-84NaCL.js';
-export { a as AutocompleteInput, b as Badge, a1 as CenterThis, C as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as Divider, i as DocsButton, j as Drawer, l as DrawerFooter, k as DrawerHeader, m as Dropdown, E as ExtendArrow, F as FadeLoader, n as FieldError, o as FieldLabel, a0 as FlexColumn, $ as FlexRow, H as Header, I as IconButton, p as IconGroup, q as IconTitleBadge, r as IconWrapped, s as IconsNav, t as ImageControlled, u as Input, v as InputList, w as InputTable, x as InteractiveTable, K as KeyValueInputsList, M as Modal, a4 as ModalBody, y as MonitorsCheckboxes, z as MonitorsIcons, N as NavigationButtons, G as NoDataFound, J as NotificationNote, a3 as Overlay, S as ScrollX, L as SectionTitle, O as Segment, P as SelectionButton, Q as SkeletonLoader, R as Status, U as Stepper, a5 as TableContainer, a6 as TableTitleWrap, a7 as TableWrap, V as Text, W as TextArea, X as Toggle, T as ToggleCodeComponent, Y as Tooltip, Z as TraceLoader, a2 as VerticalScroll, _ as WarningModal } from './index-C-84NaCL.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-DLH1IvyS.js';
+import { B as Button } from './index-Biu8ddMV.js';
+export { a as AutocompleteInput, b as Badge, a1 as CenterThis, C as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as Divider, i as DocsButton, j as Drawer, l as DrawerFooter, k as DrawerHeader, m as Dropdown, E as ExtendArrow, F as FadeLoader, n as FieldError, o as FieldLabel, a0 as FlexColumn, $ as FlexRow, H as Header, I as IconButton, p as IconGroup, q as IconTitleBadge, r as IconWrapped, s as IconsNav, t as ImageControlled, u as Input, v as InputList, w as InputTable, x as InteractiveTable, K as KeyValueInputsList, M as Modal, a4 as ModalBody, y as MonitorsCheckboxes, z as MonitorsIcons, N as NavigationButtons, G as NoDataFound, J as NotificationNote, a3 as Overlay, S as ScrollX, L as SectionTitle, O as Segment, P as SelectionButton, Q as SkeletonLoader, R as Status, U as Stepper, a5 as TableContainer, a6 as TableTitleWrap, a7 as TableWrap, V as Text, W as TextArea, X as Toggle, T as ToggleCodeComponent, Y as Tooltip, Z as TraceLoader, a2 as VerticalScroll, _ as WarningModal } from './index-Biu8ddMV.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-BJn6pgjP.js';
 import React, { Component, createElement, createContext } from 'react';
-import { T as Theme } from './index-BdZq2vdJ.js';
+import { T as Theme } from './index-BvZgTeSU.js';
 import './types.js';
-import './index-Cau7bWmr.js';
-import './index-B1h5g0Hl.js';
+import './index-CS6xAoTK.js';
+import './index-BMkvXaM3.js';
 import 'styled-components';
-import './index-BeVb1H9n.js';
+import './index-DtSbC1Cl.js';
 import './index-BV85P9UP.js';
-import './useTransition-BumZECD3.js';
+import './useTransition-BOwXSp5e.js';
 import 'react-dom';
 
 const ErrorBoundaryContext = createContext(null);

package/lib/constants/index.d.ts

@@ -2,5 +2,6 @@ export * from './actions';
 export * from './destinations';
 export * from './instrumentation-rules';
 export * from './signals';
+export * from './sources';
 export * from './strings';
 export * from './tokens';

package/lib/constants/sources/index.d.ts

@@ -0,0 +1,4 @@
+import { ProgrammingLanguages } from '@/types';
+import type { DropdownOption } from '@/components';
+export declare const DISPLAY_LANGUAGES: Record<ProgrammingLanguages, string>;
+export declare const LANGUAGE_OPTIONS: DropdownOption<ProgrammingLanguages>[];

package/lib/constants/strings/index.d.ts

@@ -16,6 +16,7 @@ export declare const FORM_ALERTS: {
     LATENCY_HTTP_ROUTE: string;
     READONLY_WARNING: string;
     ILLEGAL_K8S_LABEL: string;
+    INVALID_VERSION: string;
 };
 export declare const DISPLAY_TITLES: {
     NAMESPACE: string;
@@ -65,6 +66,8 @@ export declare const DISPLAY_TITLES: {
     STATUS: string;
     READONLY: string;
     LANGUAGE: string;
+    VERSION: string;
+    VERSION_PLACEHOLDER: string;
     MONITORS: string;
     SIGNALS_FOR_PROCESSING: string;
     MANAGED_BY_PROFILE: string;

package/lib/constants.js

@@ -1,4 +1,4 @@
-export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, D as DEFAULT_DATA_STREAM_NAME, k as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-BdZq2vdJ.js';
+export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, k as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, l as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-BvZgTeSU.js';
 export { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
 import 'react';
 import './types.js';

package/lib/containers.js

@@ -1,23 +1,22 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { k as DISPLAY_TITLES, T as Theme, h as usePendingStore, g as useNotificationStore, b as useDrawerStore, B as BUTTON_TEXTS, c as useEntityStore, A as ACTION_OPTIONS, l as getActionIcon, f as useModalStore, F as FORM_ALERTS, d as useFilterStore, M as MONITORS_OPTIONS, t as styleInject, i as useSelectedStore, e as useInstrumentStore, n as getInstrumentationRuleIcon, a as useDataStreamStore, m as getEntityId, S as STORAGE_KEYS, j as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, u as useDarkMode } from './index-BdZq2vdJ.js';
+import { l as DISPLAY_TITLES, T as Theme, h as usePendingStore, g as useNotificationStore, b as useDrawerStore, B as BUTTON_TEXTS, c as useEntityStore, A as ACTION_OPTIONS, m as getActionIcon, f as useModalStore, F as FORM_ALERTS, d as useFilterStore, M as MONITORS_OPTIONS, $ as styleInject, i as useSelectedStore, e as useInstrumentStore, o as getInstrumentationRuleIcon, a as useDataStreamStore, n as getEntityId, S as STORAGE_KEYS, j as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, u as useDarkMode } from './index-BvZgTeSU.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, SignalType, HeadersCollectionKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, a0 as FlexColumn, M as Modal, N as NavigationButtons, a4 as ModalBody, J as NotificationNote, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, A as AddButton$1, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-C-84NaCL.js';
+import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, a0 as FlexColumn, M as Modal, N as NavigationButtons, a4 as ModalBody, J as NotificationNote, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, A as AddButton$1, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-Biu8ddMV.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BV85P9UP.js';
-import { i as CheckCircledIcon, O as OdigosLogo } from './index-BeVb1H9n.js';
-import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, R as RetryIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-zXCdgpRU.js';
-import { u as useActionFormData, a as useClickNode, e as useSessionStorage, c as useDataStreamFormData, d as useDestinationFormData, b as useClickNotification, f as useSourceFormData, g as useSourceSelectionFormData } from './useSourceSelectionFormData-CrtSxE3G.js';
-import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-BumZECD3.js';
-import { E as EditIcon } from './index-CDHYBh8C.js';
-import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, f as CheckIcon, A as ArrowIcon, a as CopyIcon, g as CrossIcon } from './index-Cau7bWmr.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-DLH1IvyS.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-B1h5g0Hl.js';
-import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, w as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, v as mapDestinationFieldsForDisplay, c as compareCondition, t as getYamlFieldsForDestination, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, u as isOverTime } from './index-BrriZrlp.js';
+import { C as CheckCircledIcon, O as OdigosLogo } from './index-DtSbC1Cl.js';
+import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, R as RetryIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-CQ2z02Y8.js';
+import { u as useActionFormData, a as useClickNode, e as useSessionStorage, c as useDataStreamFormData, d as useDestinationFormData, b as useClickNotification, f as useSourceFormData, g as useSourceSelectionFormData } from './useSourceSelectionFormData-xhTNmN-P.js';
+import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-BOwXSp5e.js';
+import { E as EditIcon, T as TrashIcon, S as SearchIcon, P as PlusIcon$1, g as CheckIcon, A as ArrowIcon, a as CopyIcon, h as CrossIcon } from './index-CS6xAoTK.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-BJn6pgjP.js';
+import { m as mapConditions, a as getStatusIcon, c as capitalizeFirstLetter } from './index-BMkvXaM3.js';
+import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, w as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, v as mapDestinationFieldsForDisplay, c as compareCondition, t as getYamlFieldsForDestination, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, u as isOverTime } from './index-CN-rJ_ZV.js';
 import { createPortal } from 'react-dom';
 import { m as mapExportedSignals } from './index-BlZKWuxe.js';
-import { N as NoteBackToSummary, E as EditButton } from './index-Cph4pNkb.js';
+import { N as NoteBackToSummary, E as EditButton } from './index-VLuOq8HF.js';
 import { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
-import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-CBgnxpkW.js';
+import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-CmGKwhgi.js';
 
 const buildCard$3 = (action) => {
     const { type, spec: { actionName, notes, signals, disabled, collectContainerAttributes, collectReplicaSetAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, servicesNameFilters, attributeFilters, }, } = action;
@@ -16192,7 +16191,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource, resta
     const containersData = useMemo(() => {
         const isDisabled = thisItem?.conditions?.some(({ status }) => status === OtherStatus.Disabled);
         const runtimeCondition = thisItem?.conditions?.find(({ type }) => type === 'RuntimeDetection');
-        const mappedContainers = thisItem?.containers?.map((container) => {
+        const mappedContainers = (thisItem?.containers?.length ? thisItem.containers : thisItem?.containersOverrides)?.map((container) => {
             const value = {
                 ...container,
                 isDisabled,
@@ -16200,6 +16199,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource, resta
             return {
                 type: DataCardFieldTypes.SourceContainer,
                 value: JSON.stringify(value),
+                callback: async (payload) => await updateSource(drawerEntityId, payload),
             };
         }) || [];
         return {
@@ -16207,7 +16207,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource, resta
             isLoading: runtimeCondition?.status === OtherStatus.Loading,
             items: mappedContainers,
         };
-    }, [thisItem]);
+    }, [thisItem, drawerEntityId]);
     if (!thisItem)
         return null;
     const handleEdit = (bool) => {

package/lib/functions/index.d.ts

@@ -33,6 +33,7 @@ export * from './is-emtpy';
 export * from './is-legal-k8s-label';
 export * from './is-over-time';
 export * from './is-time-elapsed';
+export * from './is-valid-version';
 export * from './map-conditions';
 export * from './map-destination-fields-for-display';
 export * from './map-exported-signals';

package/lib/functions/is-valid-version/index.d.ts

@@ -0,0 +1 @@
+export declare const isValidVersion: (version: string) => boolean;

package/lib/functions.js

@@ -1,13 +1,13 @@
-export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, d as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, e as splitCamelString } from './index-B1h5g0Hl.js';
-export { c as compareCondition, d as deepClone, f as filterActions, a as filterDestinations, b as filterDestinationsByStream, e as filterSources, g as filterSourcesByStream, h as formatBytes, i as getConditionsBooleans, k as getContainersIcons, j as getContainersInstrumentedCount, l as getDestinationIcon, m as getEntityIcon, n as getEntityLabel, o as getMetricForEntity, p as getPlatformIcon, q as getPlatformLabel, r as getValueForRange, s as getWorkloadId, t as getYamlFieldsForDestination, u as isOverTime, v as mapDestinationFieldsForDisplay, w as sleep } from './index-BrriZrlp.js';
-export { l as getActionIcon, m as getEntityId, n as getInstrumentationRuleIcon } from './index-BdZq2vdJ.js';
+export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getStatusIcon, i as isValidVersion, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, b as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-BMkvXaM3.js';
+export { c as compareCondition, d as deepClone, f as filterActions, a as filterDestinations, b as filterDestinationsByStream, e as filterSources, g as filterSourcesByStream, h as formatBytes, i as getConditionsBooleans, k as getContainersIcons, j as getContainersInstrumentedCount, l as getDestinationIcon, m as getEntityIcon, n as getEntityLabel, o as getMetricForEntity, p as getPlatformIcon, q as getPlatformLabel, r as getValueForRange, s as getWorkloadId, t as getYamlFieldsForDestination, u as isOverTime, v as mapDestinationFieldsForDisplay, w as sleep } from './index-CN-rJ_ZV.js';
+export { m as getActionIcon, n as getEntityId, o as getInstrumentationRuleIcon, p as getProgrammingLanguageIcon } from './index-BvZgTeSU.js';
 export { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-BlZKWuxe.js';
 import { EntityTypes } from './types.js';
 export { i as isEmpty, s as safeJsonParse } from './index-BV85P9UP.js';
 import 'react';
 import 'styled-components';
-import './index-BeVb1H9n.js';
-import './index-CBgnxpkW.js';
+import './index-DtSbC1Cl.js';
+import './index-CmGKwhgi.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {
     const cleanArray = (arr) => arr.filter((item) => {

package/lib/hooks.js

@@ -1,7 +1,7 @@
-export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDataStreamFormData, d as useDestinationFormData, e as useSessionStorage, f as useSourceFormData, g as useSourceSelectionFormData } from './useSourceSelectionFormData-CrtSxE3G.js';
-export { u as useContainerSize, a as useCopy, b as useGenericForm, c as useInstrumentationRuleFormData, d as useKeyDown, e as useOnClickOutside, f as useTimeAgo, g as useTransition } from './useTransition-BumZECD3.js';
+export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDataStreamFormData, d as useDestinationFormData, e as useSessionStorage, f as useSourceFormData, g as useSourceSelectionFormData } from './useSourceSelectionFormData-xhTNmN-P.js';
+export { u as useContainerSize, a as useCopy, b as useGenericForm, c as useInstrumentationRuleFormData, d as useKeyDown, e as useOnClickOutside, f as useTimeAgo, g as useTransition } from './useTransition-BOwXSp5e.js';
 import './types.js';
-import './index-BdZq2vdJ.js';
+import './index-BvZgTeSU.js';
 import 'react';
 import 'styled-components';
 import './index-BV85P9UP.js';

package/lib/icons.js

@@ -1,11 +1,10 @@
-import { T as Theme } from './index-BdZq2vdJ.js';
-export { p as AddClusterInfoIcon, C as CodeAttributesIcon, q as DeleteAttributeIcon, H as HeadersCollectionIcon, o as ImageErrorIcon, K as K8sLogo, s as PayloadCollectionIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, r as SamplerIcon } from './index-BdZq2vdJ.js';
-export { C as CPlusPlusLogo, d as CSharpLogo, i as CheckCircledIcon, D as DotnetLogo, E as ElixirLogo, h as ErrorTriangleIcon, G as GoLogo, I as InfoIcon, J as JavaLogo, K as KafkaLogo, L as LogsIcon, g as MetricsIcon, M as MysqlLogo, N as NginxLogo, f as NodejsLogo, O as OdigosLogo, c as PhpLogo, P as PostgresLogo, e as PythonLogo, R as RedisLogo, b as RubyLogo, a as RustLogo, S as SwiftLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-BeVb1H9n.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 } from './index-zXCdgpRU.js';
-export { A as ArrowIcon, f as CheckIcon, C as CodeIcon, a as CopyIcon, g as CrossIcon, E as ExtendArrowIcon, d as EyeClosedIcon, e as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, b as NotebookIcon, P as PlusIcon, S as SearchIcon, c as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-Cau7bWmr.js';
+import { T as Theme } from './index-BvZgTeSU.js';
+export { q as AddClusterInfoIcon, x as CPlusPlusLogo, y as CSharpLogo, C as CodeAttributesIcon, r as DeleteAttributeIcon, z as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, t as ImageErrorIcon, J as JavaLogo, K as K8sLogo, v as KafkaLogo, N as MysqlLogo, O as NginxLogo, Q as NodejsLogo, w as PayloadCollectionIcon, U as PhpLogo, P as PiiMaskingIcon, V as PostgresLogo, W as PythonLogo, X as RedisLogo, R as RenameAttributeIcon, Y as RubyLogo, Z as RustLogo, s as SamplerIcon, _ as SwiftLogo } from './index-BvZgTeSU.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-DtSbC1Cl.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 } from './index-CQ2z02Y8.js';
+export { A as ArrowIcon, g as CheckIcon, C as CodeIcon, a as CopyIcon, h as CrossIcon, E as EditIcon, b as ExtendArrowIcon, e as EyeClosedIcon, f as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, c as NotebookIcon, P as PlusIcon, S as SearchIcon, d as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-CS6xAoTK.js';
 import React from 'react';
-export { E as EditIcon } from './index-CDHYBh8C.js';
-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-CBgnxpkW.js';
+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-CmGKwhgi.js';
 import './types.js';
 import 'styled-components';
 

package/lib/{index-DLH1IvyS.js → index-BJn6pgjP.js}

@@ -1,7 +1,7 @@
 import React from 'react';
-import { _ as WarningModal } from './index-C-84NaCL.js';
+import { _ as WarningModal } from './index-Biu8ddMV.js';
 import { StatusType, EntityTypes } from './types.js';
-import './index-BdZq2vdJ.js';
+import './index-BvZgTeSU.js';
 import 'styled-components';
 
 const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {

package/lib/{index-B1h5g0Hl.js → index-BMkvXaM3.js}

@@ -1,8 +1,8 @@
-import { ProgrammingLanguages, SignalType, StatusType } from './types.js';
+import { SignalType, StatusType } from './types.js';
 import 'react';
-import { o as ImageErrorIcon } from './index-BdZq2vdJ.js';
+import './index-BvZgTeSU.js';
 import 'styled-components';
-import { K as KafkaLogo, R as RedisLogo, P as PostgresLogo, N as NginxLogo, M as MysqlLogo, E as ElixirLogo, S as SwiftLogo, a as RustLogo, b as RubyLogo, c as PhpLogo, C as CPlusPlusLogo, d as CSharpLogo, D as DotnetLogo, e as PythonLogo, f as NodejsLogo, G as GoLogo, J as JavaLogo, T as TracesIcon, g as MetricsIcon, L as LogsIcon, O as OdigosLogo, I as InfoIcon, W as WarningTriangleIcon, h as ErrorTriangleIcon, i as CheckCircledIcon } from './index-BeVb1H9n.js';
+import { T as TracesIcon, M as MetricsIcon, L as LogsIcon, O as OdigosLogo, I as InfoIcon, W as WarningTriangleIcon, E as ErrorTriangleIcon, C as CheckCircledIcon } from './index-DtSbC1Cl.js';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);
@@ -70,34 +70,6 @@ const flattenObjectKeys = (obj, prefix = '', result = {}) => {
     return result;
 };
 
-const getProgrammingLanguageIcon = (language) => {
-    const LOGOS = {
-        [ProgrammingLanguages.Java]: JavaLogo,
-        [ProgrammingLanguages.Go]: GoLogo,
-        [ProgrammingLanguages.JavaScript]: NodejsLogo,
-        [ProgrammingLanguages.Python]: PythonLogo,
-        [ProgrammingLanguages.DotNet]: DotnetLogo,
-        [ProgrammingLanguages.CSharp]: CSharpLogo,
-        [ProgrammingLanguages.CPlusPlus]: CPlusPlusLogo,
-        [ProgrammingLanguages.Php]: PhpLogo,
-        [ProgrammingLanguages.Ruby]: RubyLogo,
-        [ProgrammingLanguages.Rust]: RustLogo,
-        [ProgrammingLanguages.Swift]: SwiftLogo,
-        [ProgrammingLanguages.Elixir]: ElixirLogo,
-        [ProgrammingLanguages.MySql]: MysqlLogo,
-        [ProgrammingLanguages.Nginx]: NginxLogo,
-        [ProgrammingLanguages.Postgres]: PostgresLogo,
-        [ProgrammingLanguages.Redis]: RedisLogo,
-        [ProgrammingLanguages.Kafka]: KafkaLogo,
-        [ProgrammingLanguages.Ignored]: ImageErrorIcon, // TODO: good icon
-        [ProgrammingLanguages.Unknown]: ImageErrorIcon, // TODO: good icon
-        [ProgrammingLanguages.Processing]: ImageErrorIcon, // TODO: good icon
-        [ProgrammingLanguages.NoContainers]: ImageErrorIcon, // TODO: good icon
-        [ProgrammingLanguages.NoRunningPods]: ImageErrorIcon, // TODO: good icon
-    };
-    return LOGOS[language] || ImageErrorIcon;
-};
-
 const getMonitorIcon = (type) => {
     const LOGOS = {
         [SignalType.Logs]: LogsIcon,
@@ -118,6 +90,9 @@ const getStatusIcon = (type, theme) => {
     return LOGOS[type];
 };
 
+const SEMVER_REGEX = /^(\d+\.)?(\d+\.)?(\*|\d+)$/;
+const isValidVersion = (version) => SEMVER_REGEX.test(version);
+
 // Example: splitCamelString('LoremIpsumDolorSitAmet')
 // > 'Lorem Ipsum Dolor Sit Amet'
 const splitCamelString = (str) => {
@@ -217,4 +192,4 @@ const safeJsonStringify = (obj, indent = 2) => {
     return JSON.stringify(obj || {}, null, indent);
 };
 
-export { getProgrammingLanguageIcon as a, getStatusIcon as b, capitalizeFirstLetter as c, parseJsonStringToPrettyString as d, splitCamelString as e, flattenObjectKeys as f, getMonitorIcon as g, mapConditions as m, numbersOnly as n, parseBooleanFromString as p, removeEmptyValuesFromObject as r, safeJsonStringify as s };
+export { getStatusIcon as a, parseJsonStringToPrettyString as b, capitalizeFirstLetter as c, splitCamelString as d, flattenObjectKeys as f, getMonitorIcon as g, isValidVersion as i, mapConditions as m, numbersOnly as n, parseBooleanFromString as p, removeEmptyValuesFromObject as r, safeJsonStringify as s };

package/lib/{index-C-84NaCL.js → index-Biu8ddMV.js}

@@ -1,13 +1,13 @@
 import React, { useState, useEffect, useRef, forwardRef, createElement, useCallback, useMemo, Fragment } from 'react';
-import { T as Theme, o as ImageErrorIcon, M as MONITORS_OPTIONS, B as BUTTON_TEXTS } from './index-BdZq2vdJ.js';
-import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages, IntrumentationStatus, InputTypes, FieldTypes } from './types.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, P as PlusIcon, T as TrashIcon, A as ArrowIcon } from './index-Cau7bWmr.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, d as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, e as splitCamelString, p as parseBooleanFromString, n as numbersOnly } from './index-B1h5g0Hl.js';
+import { T as Theme, t as ImageErrorIcon, M as MONITORS_OPTIONS, g as useNotificationStore, L as LANGUAGE_OPTIONS, l as DISPLAY_TITLES, F as FORM_ALERTS, p as getProgrammingLanguageIcon, D as DISPLAY_LANGUAGES, B as BUTTON_TEXTS } from './index-BvZgTeSU.js';
+import { StatusType, OtherStatus, ProgrammingLanguages, SortDirection, IntrumentationStatus, InputTypes, FieldTypes } from './types.js';
+import { M as MinusIcon, g as CheckIcon, L as ListIcon, C as CodeIcon, b as ExtendArrowIcon, E as EditIcon, h as CrossIcon, d as SortArrowsIcon, a as CopyIcon, c as NotebookIcon, X as XIcon, e as EyeClosedIcon, f as EyeOpenIcon, N as NoDataIcon, S as SearchIcon, P as PlusIcon, T as TrashIcon, A as ArrowIcon } from './index-CS6xAoTK.js';
+import { a as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, i as isValidVersion, b as parseJsonStringToPrettyString, d as splitCamelString, p as parseBooleanFromString, n as numbersOnly } from './index-BMkvXaM3.js';
 import styled, { css } from 'styled-components';
 import { s as safeJsonParse, i as isEmpty } from './index-BV85P9UP.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-BumZECD3.js';
+import { b as useGenericForm, e as useOnClickOutside, d as useKeyDown, u as useContainerSize, a as useCopy, g as useTransition } from './useTransition-BOwXSp5e.js';
 import ReactDOM from 'react-dom';
-import { I as InfoIcon } from './index-BeVb1H9n.js';
+import { I as InfoIcon } from './index-DtSbC1Cl.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -4336,7 +4336,7 @@ const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps
                     monitors && monitors.length > 0 && (React.createElement(FlexRow, { "$gap": 4, ref: monitorsRef },
                         subTitle && React.createElement(SubText, null, "\u2022"),
                         React.createElement(MonitorsIcons, { monitors: monitors, withLabels: monitorsWithLabels, size: 10 })))),
-                componentsUnderTitles && (React.createElement(FlexRow, { "$gap": 4 }, componentsUnderTitles?.map((component, i) => (React.createElement(Fragment, { key: `componentsUnderTitles-${i}` }, component)))))),
+                componentsUnderTitles && componentsUnderTitles.length > 0 ? (React.createElement(FlexRow, { "$gap": 4 }, componentsUnderTitles?.map((component, i) => (React.createElement(Fragment, { key: `componentsUnderTitles-${i}` }, component))))) : null),
             React.createElement(ActionsWrapper, { ref: actionsRef },
                 !!hoverText && (React.createElement(ControlledVisibility, null,
                     React.createElement(HoverText, { size: 14, family: 'secondary' }, hoverText))),
@@ -4381,6 +4381,66 @@ const DescribeRow = ({ title, subTitle, tooltip, value }) => {
         React.createElement(ValueWrapper, null, !!value?.status ? (React.createElement(Status, { status: value.status === 'transitioning' ? OtherStatus.Loading : value.status, title: value.text || value.status, withBorder: true, withIcon: true })) : (React.createElement(ValueText, null, value?.text || '-')))));
 };
 
+const Relative = styled.div `
+  position: relative;
+`;
+const Form = styled(FlexColumn) `
+  position: absolute;
+  bottom: 32px;
+  right: 0;
+  z-index: 1;
+  gap: 8px;
+  padding: 24px;
+  background-color: ${({ theme }) => theme.colors.info};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  border-radius: 24px;
+`;
+const PopoverFormWrapper = styled(FlexRow) `
+  width: 100%;
+  gap: 12px;
+`;
+const PopoverFormButton = styled(Button$4) `
+  width: 36px;
+  padding: 0;
+`;
+const OverrideRuntime = ({ defaultLanguage = ProgrammingLanguages.Unknown, defaultVersion = '', handleSave }) => {
+    const theme = Theme.useTheme();
+    const { addNotification } = useNotificationStore();
+    const { formData, handleFormChange, resetFormData } = useGenericForm({ language: defaultLanguage, version: defaultVersion });
+    const [isOpen, setIsOpen] = useState(false);
+    const onOpen = () => {
+        setIsOpen(true);
+    };
+    const onClose = () => {
+        setIsOpen(false);
+        resetFormData();
+    };
+    const onSave = () => {
+        if (!isValidVersion(formData.version)) {
+            addNotification({ type: StatusType.Warning, message: FORM_ALERTS.INVALID_VERSION, hideFromHistory: true });
+            return;
+        }
+        handleSave(formData);
+        onClose();
+    };
+    const popupRef = useRef(null);
+    useOnClickOutside(popupRef, onClose);
+    useKeyDown({ key: 'Enter', active: isOpen }, onSave);
+    return (React.createElement(Relative, null,
+        React.createElement(IconButton, { tooltip: 'Override Runtime Details', size: 32, onClick: onOpen },
+            React.createElement(EditIcon, null)),
+        isOpen && (React.createElement(Form, { ref: popupRef },
+            React.createElement(Text, { size: 14, style: { lineHeight: '20px', display: 'flex' } }, "Override Runtime Details:"),
+            React.createElement(PopoverFormWrapper, null,
+                React.createElement(Dropdown, { title: DISPLAY_TITLES.LANGUAGE, options: LANGUAGE_OPTIONS, value: LANGUAGE_OPTIONS.find((opt) => opt.id === formData.language), onSelect: (opt) => handleFormChange('language', opt.id), required: true }),
+                React.createElement(Input, { title: DISPLAY_TITLES.VERSION, placeholder: DISPLAY_TITLES.VERSION_PLACEHOLDER, value: formData.version, onChange: (e) => handleFormChange('version', e.target.value), required: true }),
+                React.createElement(FlexRow, null,
+                    React.createElement(PopoverFormButton, { variant: 'secondary', onClick: onClose },
+                        React.createElement(CrossIcon, null)),
+                    React.createElement(PopoverFormButton, { variant: 'primary', onClick: onSave },
+                        React.createElement(CheckIcon, { fill: theme.text.primary }))))))));
+};
+
 const Tr = styled.tr `
   cursor: ${({ $withHover }) => ($withHover ? 'pointer' : 'default')};
   opacity: ${({ $faded }) => ($faded ? 0.5 : 1)};
@@ -4579,7 +4639,7 @@ const CopyWrapper = styled(FlexRow) `
   }
 `;
 const DataCardFields = ({ data }) => {
-    return (React.createElement(ListContainer$3, null, data?.map(({ type, title, tooltip, value }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [DataCardFieldTypes.Code, DataCardFieldTypes.Table].includes(type)
+    return (React.createElement(ListContainer$3, null, data?.map(({ type, title, tooltip, value, callback }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [DataCardFieldTypes.Code, DataCardFieldTypes.Table].includes(type)
             ? 'inherit'
             : !!type &&
                 [
@@ -4593,10 +4653,10 @@ const DataCardFields = ({ data }) => {
                 ? '100%'
                 : 'unset' },
         React.createElement(Tooltip, { text: tooltip, withIcon: true }, !!title && React.createElement(ItemTitle, null, title)),
-        React.createElement(RenderValue, { type: type, value: value }))))));
+        React.createElement(RenderValue, { type: type, value: value, callback: callback }))))));
 };
 // We need to maintain this with new components every time we add a new type to "DataCardFieldTypes"
-const RenderValue = ({ type, value }) => {
+const RenderValue = ({ type, value, callback }) => {
     const theme = Theme.useTheme();
     const { clickCopy, isCopied } = useCopy();
     switch (type) {
@@ -4656,9 +4716,7 @@ const RenderValue = ({ type, value }) => {
             if (ready?.title) {
                 componentsUnderTitles.push(React.createElement(Status, { status: parseBooleanFromString(ready.subTitle) ? StatusType.Success : StatusType.Error, title: ready.title, withIcon: true, withBorder: true, size: 8 }));
             }
-            return (React.createElement(DataTab, { title: containerName, subTitle: processes.length ? `${processes.length} Instrumented Processes` : undefined, visualProps: {
-                    componentsUnderTitles: componentsUnderTitles.length ? componentsUnderTitles : undefined,
-                }, renderActions: () => {
+            return (React.createElement(DataTab, { title: containerName, subTitle: processes.length ? `${processes.length} Instrumented Processes` : undefined, visualProps: { componentsUnderTitles }, renderActions: () => {
                     return React.createElement(Status, { status: StatusType.Info, title: 'Instrumentation Device', subtitle: !actualDevice.subTitle || actualDevice.subTitle === '[]' ? 'none' : actualDevice.subTitle, withBorder: true });
                 }, extendableProps: {
                     isExtended: !!processes.length,
@@ -4691,11 +4749,13 @@ const RenderValue = ({ type, value }) => {
                     : awaitingInstrumentation
                         ? `${IntrumentationStatus.INSTRUMENTING}...`
                         : IntrumentationStatus.UNINSTRUMENTED;
-            return (React.createElement(DataTab, { title: containerName, subTitle: `${language === ProgrammingLanguages.JavaScript ? 'Node.js' : capitalizeFirstLetter(language)}` + (runtimeVersion ? ` • Runtime Version: ${runtimeVersion}` : ''), iconProps: { icon: getProgrammingLanguageIcon(language) }, extendableProps: {
+            return (React.createElement(DataTab, { title: containerName, subTitle: `${DISPLAY_LANGUAGES[language]}` + (runtimeVersion ? ` • Runtime Version: ${runtimeVersion}` : ''), iconProps: { icon: getProgrammingLanguageIcon(language) }, extendableProps: {
                     isExtended: !!instrumentationMessage,
                     renderExtended: () => (React.createElement(AlignCenter, null,
                         React.createElement(Status, { status: StatusType.Info, title: splitCamelString(instrumentationMessage) }))),
-                }, renderActions: () => React.createElement(Status, { status: statusType, title: statusTitle, subtitle: otelDistroName, withIcon: true, withBorder: true }) }));
+                }, renderActions: () => (React.createElement(React.Fragment, null,
+                    React.createElement(Status, { status: statusType, title: statusTitle, subtitle: otelDistroName, withIcon: true, withBorder: true }),
+                    callback && React.createElement(OverrideRuntime, { defaultLanguage: language, defaultVersion: runtimeVersion, handleSave: (payload) => callback({ ...payload, containerName }) }))) }));
         }
         default: {
             return React.createElement(PreWrap, null, parseJsonStringToPrettyString(typeof value === 'string' ? value || '-' : ''));
@@ -5237,7 +5297,9 @@ const DropdownListItem = ({ option, value, isMulti, onSelect, onDeselect }) => {
             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),
+        React.createElement(FlexRow, { "$gap": 8 },
+            option.icon && React.createElement(option.icon, null),
+            React.createElement(Text, { size: 14 }, option.value)),
         isSelected && React.createElement(CheckIcon, null)));
 };