@odigos/ui-kit 0.0.24 → 0.0.25

package/lib/icons/programming-languages/dotnet-logo/dotnet-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/elixir-logo/elixir-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/go-logo/go-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/java-logo/java-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/mysql-logo/mysql-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/nginx-logo/nginx-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/nodejs-logo/nodejs-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/php-logo/php-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/postgres-logo/postgres-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/python-logo/python-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/redis-logo/redis-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/ruby-logo/ruby-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/rust-logo/rust-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/swift-logo/swift-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/social/slack-logo/slack-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/status/check-circled-icon/check-circled-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/status/check-icon/check-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/status/cross-circled-icon/cross-circled-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/status/cross-icon/cross-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/status/error-round-icon/error-round-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/status/error-triangle-icon/error-triangle-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/status/info-icon/info-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/status/warning-triangle-icon/warning-triangle-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons.js

@@ -1,11 +1,12 @@
 export { A as AddClusterInfoIcon, C as CodeAttributesIcon, D as DeleteAttributeIcon, I as ImageErrorIcon, K as K8sLogo, a as PayloadCollectionIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, S as SamplerIcon } from './index-DGel4E-Z.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-IKusBlIE.js';
-export { C as CrossCircledIcon, E as EditIcon, F as FilterIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, S as SlackLogo, T as TerminalIcon } from './index-KOMAv-TS.js';
+export { C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, S as SlackLogo, T as TerminalIcon } from './index-CamnKrev.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-BJxaoI0G.js';
 import React from 'react';
 import Theme from './theme.js';
+export { E as EditIcon } from './index-CWbxXTof.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-BRW_Nl-n.js';
-import './index-DiTtXTRm.js';
+import './index-CK8tITRA.js';
 import './types.js';
 import 'styled-components';
 

package/lib/{index-DwBxpY4g.js → index-BOkleuyi.js}

@@ -1,7 +1,7 @@
 import { StatusType, OtherStatus, DestinationTypes, EntityTypes, PlatformType } from './types.js';
-import { a as getProgrammingLanguageIcon } from './index-B-iLphLA.js';
+import { a as getProgrammingLanguageIcon } from './index-C2m4uddS.js';
 import 'react';
-import './index-DiTtXTRm.js';
+import './index-CK8tITRA.js';
 import 'styled-components';
 import { e as AwsXrayLogo, a2 as VictoriaMetricsLogo, a1 as UptraceLogo, a0 as TraceloopLogo, $ as TingyunLogo, _ as TempoLogo, Z as TelemetryHubLogo, Y as SumoLogicLogo, X as SplunkLogo, W as SignozLogo, U as SeqLogo, d as AwsS3Logo, T as QuickwitLogo, G as GigapipeLogo, S as QrynLogo, R as PrometheusLogo, F as OpenTelemetryLogo, Q as OracleLogo, P as OpsVerseLogo, z as OpenObserveLogo, y as OneUptimeLogo, O as ObserveLogo, N as NewRelicLogo, M as MiddlewareLogo, x as LumigoLogo, w as LokiLogo, v as LogzioLogo, u as LightstepLogo, L as Last9Logo, K as KloudmateLogo, J as JaegerLogo, I as InstanaLogo, t as HyperDxLogo, H as HoneycombLogo, s as GroundcoverLogo, r as GreptimeLogo, q as GrafanaLogo, p as GoogleCloudPlatformLogo, o as ElasticSearchLogo, E as ElasticApmLogo, n as DynatraceLogo, m as DatadogLogo, D as Dash0Logo, l as CoralogixLogo, c as AwsCloudwatchLogo, k as ClickhouseLogo, j as ChronosphereLogo, i as ChecklyLogo, C as CauselyLogo, h as BonreeLogo, B as BetterStackLogo, g as BlobStorageLogo, f as AxiomLogo, b as AppDynamicsLogo, a as AlibabaCloudLogo, A as AlaudaLogo, a6 as RulesIcon, a3 as ActionsIcon, a4 as DestinationsIcon, a7 as SourcesIcon, a5 as NamespacesIcon, V as VmLogo } from './index-BRW_Nl-n.js';
 import { K as KafkaLogo, O as OdigosLogo } from './index-IKusBlIE.js';
@@ -39,6 +39,10 @@ const compareCondition = (renderCondition, fields) => {
     }
 };
 
+const deepClone = (item) => {
+    return JSON.parse(JSON.stringify(item));
+};
+
 const filterActions = (actions, filters) => {
     let filtered = [...actions];
     if (!!filters.monitors?.length)
@@ -53,6 +57,14 @@ const filterDestinations = (destinations, filters) => {
     return filtered;
 };
 
+const filterDestinationsByStream = (destinations, streamName) => {
+    // if no stream is selected, return nothing (to prevent glitchy rendering)
+    if (!streamName)
+        return [];
+    // note: destinations can also not have any streams assigned, and we want to show them
+    return destinations.filter((dest) => dest.streamNames.includes(streamName) || !dest.streamNames.length);
+};
+
 const filterSources = (sources, filters) => {
     let filtered = [...sources];
     if (!!filters.namespaces?.length)
@@ -68,6 +80,13 @@ const filterSources = (sources, filters) => {
     return filtered;
 };
 
+const filterSourcesByStream = (sources, streamName) => {
+    // if no stream is selected, return nothing (to prevent glitchy rendering)
+    if (!streamName)
+        return [];
+    return sources.filter((source) => source.streamNames.includes(streamName));
+};
+
 const formatBytes = (bytes) => {
     if (!bytes)
         return '0 KB/s';
@@ -273,6 +292,12 @@ const isOverTime = (originDate, difference = 0) => {
     return compareWith - now <= difference;
 };
 
+const mapExportedSignals = (exportedSignals) => {
+    if (!exportedSignals)
+        return [];
+    return Object.keys(exportedSignals).filter((signal) => exportedSignals[signal]);
+};
+
 const sleep = async (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
 
-export { filterDestinations as a, filterSources as b, compareCondition as c, formatBytes as d, getContainersInstrumentedCount as e, filterActions as f, getConditionsBooleans as g, getContainersIcons as h, getDestinationIcon as i, getEntityIcon as j, getEntityLabel as k, getMetricForEntity as l, getPlatformIcon as m, getPlatformLabel as n, getValueForRange as o, getWorkloadId as p, isOverTime as q, sleep as s };
+export { filterDestinations as a, filterDestinationsByStream as b, compareCondition as c, deepClone as d, filterSources as e, filterActions as f, filterSourcesByStream as g, formatBytes as h, getConditionsBooleans as i, getContainersInstrumentedCount as j, getContainersIcons as k, getDestinationIcon as l, getEntityIcon as m, getEntityLabel as n, getMetricForEntity as o, getPlatformIcon as p, getPlatformLabel as q, getValueForRange as r, getWorkloadId as s, isOverTime as t, mapExportedSignals as u, sleep as v };

package/lib/{index-C7Y1tYdc.js → index-C0N2DFBu.js}

@@ -1,7 +1,7 @@
 import { ActionType, InstrumentationRuleType } from './types.js';
 import { S as SamplerIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, D as DeleteAttributeIcon, A as AddClusterInfoIcon, K as K8sLogo, I as ImageErrorIcon, C as CodeAttributesIcon, a as PayloadCollectionIcon } from './index-DGel4E-Z.js';
 import 'react';
-import './index-DiTtXTRm.js';
+import './index-CK8tITRA.js';
 import 'styled-components';
 
 const getActionIcon = (type) => {

package/lib/{index-B-iLphLA.js → index-C2m4uddS.js}

@@ -1,6 +1,6 @@
 import { ProgrammingLanguages, SignalType, StatusType } from './types.js';
 import 'react';
-import './index-DiTtXTRm.js';
+import './index-CK8tITRA.js';
 import 'styled-components';
 import { I as ImageErrorIcon } from './index-DGel4E-Z.js';
 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-IKusBlIE.js';

package/lib/{index-DiTtXTRm.js → index-CK8tITRA.js}

@@ -241,6 +241,29 @@ const useDarkMode = create()(persist((set) => ({
     storage: typeof window !== 'undefined' ? createJSONStorage(() => localStorage) : undefined,
 }));
 
+const initialState = {
+    dataStreamsLoading: false,
+    dataStreams: [],
+    selectedStreamName: '',
+};
+const useDataStreamStore = create((set) => ({
+    ...initialState,
+    setDataStreamsLoading: (bool) => set({ dataStreamsLoading: bool }),
+    setDataStreams: (dataStreams) => set({ dataStreams }),
+    addDataStreams: (newStreams) => set((state) => {
+        const merged = [...state.dataStreams, ...newStreams];
+        const mapped = merged.map((ds) => [ds.name, ds]);
+        const uniqueByName = Array.from(new Map(mapped).values());
+        return { dataStreams: uniqueByName };
+    }),
+    removeDataStreams: (dataStreams) => set((state) => {
+        const filtered = state.dataStreams.filter((ds) => !dataStreams.find((toRemove) => toRemove.name === ds.name));
+        return { dataStreams: filtered };
+    }),
+    setSelectedStreamName: (streamName) => set({ selectedStreamName: streamName }),
+    resetDataStreamStore: () => set(initialState),
+}));
+
 const useDrawerStore = create((set) => ({
     drawerType: null,
     drawerEntityId: null,
@@ -563,7 +586,7 @@ const useSetupStore = create((set) => ({
     setConfiguredFutureApps: (payload) => set({ configuredFutureApps: payload }),
     setConfiguredDestinations: (payload) => set({ configuredDestinations: payload }),
     addConfiguredDestination: (payload) => set((state) => ({ configuredDestinations: [...state.configuredDestinations, payload] })),
-    removeConfiguredDestination: (payload) => set((state) => ({ configuredDestinations: state.configuredDestinations.filter(({ stored }) => stored.type !== payload.type) })),
+    removeConfiguredDestination: (payload) => set((state) => ({ configuredDestinations: state.configuredDestinations.filter((dest) => dest.destinationType.type !== payload.destinationType.type) })),
     resetState: () => set(() => ({ availableSources: {}, configuredSources: {}, configuredFutureApps: {}, configuredDestinations: [] })),
 }));
 
@@ -680,4 +703,4 @@ var animations = /*#__PURE__*/Object.freeze({
   slide: slide
 });
 
-export { useDrawerStore as a, useEntityStore as b, useFilterStore as c, useInstrumentStore as d, useModalStore as e, useNotificationStore as f, usePendingStore as g, useSelectedStore as h, useSetupStore as i, animations as j, getEntityId as k, styleInject as s, useDarkMode as u };
+export { useDataStreamStore as a, useDrawerStore as b, useEntityStore as c, useFilterStore as d, useInstrumentStore as e, useModalStore as f, useNotificationStore as g, usePendingStore as h, useSelectedStore as i, useSetupStore as j, getEntityId as k, animations as l, styleInject as s, useDarkMode as u };

package/lib/index-CTdoDQzG.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { _ as WarningModal } from './index-CYUrArTm.js';
+import { StatusType, EntityTypes } from './types.js';
+import './index-CK8tITRA.js';
+import 'styled-components';
+
+const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {
+    return (React.createElement(WarningModal, { isOpen: isOpen, noOverlay: noOverlay, title: `Cancel${name ? ` ${name}` : ''}`, description: 'Are you sure you want to cancel?', approveButton: {
+            text: 'Confirm',
+            variant: StatusType.Warning,
+            onClick: onApprove,
+        }, denyButton: {
+            text: 'Go Back',
+            onClick: onDeny,
+        } }));
+};
+
+const DeleteWarning = ({ isOpen, noOverlay, name, type, isLastItem, onApprove, onDeny }) => {
+    const actionText = type === EntityTypes.Source ? 'uninstrument' : 'delete';
+    return (React.createElement(WarningModal, { isOpen: isOpen, noOverlay: noOverlay, title: `${actionText.charAt(0).toUpperCase() + actionText.substring(1)}${name ? ` ${name}` : ''}`, description: `Are you sure you want to ${actionText}?`, note: isLastItem
+            ? {
+                type: StatusType.Warning,
+                title: `You're about to ${actionText} the last ${type || name}`,
+                message: '',
+            }
+            : undefined, approveButton: {
+            text: 'Confirm',
+            variant: 'danger',
+            onClick: onApprove,
+        }, denyButton: {
+            text: 'Go Back',
+            onClick: onDeny,
+        } }));
+};
+
+export { CancelWarning as C, DeleteWarning as D };

package/lib/index-CWbxXTof.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Theme from './theme.js';
+
+const EditIcon = ({ 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, 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 14C10.6787 11.8171 10.7261 16.2383 14 12.6667M2 13.997L3.81777 13.9999C4.07739 14.0003 4.2072 14.0005 4.32937 13.9712C4.43769 13.9452 4.54125 13.9022 4.63623 13.8438C4.74337 13.778 4.83516 13.6858 5.01874 13.5014L13.6676 4.81451C14.021 4.4596 14.1088 3.91087 13.8396 3.47722C13.5142 2.95298 13.0691 2.50221 12.5511 2.16754C12.136 1.8993 11.5908 1.95805 11.2417 2.30864L2.53993 11.0487C2.36296 11.2264 2.27447 11.3153 2.21029 11.4188C2.15338 11.5105 2.11072 11.6104 2.08378 11.7151C2.05341 11.8331 2.05031 11.9588 2.04411 12.2101L2 13.997Z' })));
+};
+
+export { EditIcon as E };