@odigos/ui-kit 0.0.33 → 0.0.34

package/lib/functions.js

@@ -1,14 +1,14 @@
-export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, p as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-B_Gl6Qa6.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 mapExportedSignals, x as sleep } from './index-Iq7U_fzb.js';
-export { k as getActionIcon, l as getEntityId, m as getInstrumentationRuleIcon } from './index-CVH8Q8Sl.js';
+export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, n as numbersOnly, p as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-ChYtqgBW.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 mapExportedSignals, x as sleep } from './index-BBjwRlta.js';
+export { k as getActionIcon, l as getEntityId, m as getInstrumentationRuleIcon } from './index-DJGe2YeC.js';
 export { g as getIdFromSseTarget, i as isLegalK8sLabel } from './index-CnZlllYu.js';
 import { EntityTypes } from './types.js';
 export { i as isEmpty, s as safeJsonParse } from './index-BV85P9UP.js';
 import 'react';
 import 'styled-components';
-import './index-Do3CYz7N.js';
+import './index-Bd8ZAEvq.js';
 import './index-mOgS3e5E.js';
-import './index-1N9wymEq.js';
+import './index-Cq8NT9Hr.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 useSourceFormData, f as useSourceSelectionFormData } from './useSourceSelectionFormData-DiwzViqL.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-B0eagOib.js';
+export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDataStreamFormData, d as useDestinationFormData, e as useSourceFormData, f as useSourceSelectionFormData } from './useSourceSelectionFormData-DBNf1uEe.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-dZ92VxT2.js';
 import './types.js';
-import './index-CVH8Q8Sl.js';
+import './index-DJGe2YeC.js';
 import 'react';
 import 'styled-components';
 import './index-mOgS3e5E.js';

package/lib/icons.js

@@ -1,11 +1,11 @@
-import { T as Theme } from './index-CVH8Q8Sl.js';
-export { o as AddClusterInfoIcon, C as CodeAttributesIcon, D as DeleteAttributeIcon, H as HeadersCollectionIcon, n as ImageErrorIcon, K as K8sLogo, p as PayloadCollectionIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, S as SamplerIcon } from './index-CVH8Q8Sl.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-Do3CYz7N.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-f8FRaVkE.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-CNfdJ1X8.js';
+import { T as Theme } from './index-DJGe2YeC.js';
+export { o as AddClusterInfoIcon, C as CodeAttributesIcon, D as DeleteAttributeIcon, H as HeadersCollectionIcon, n as ImageErrorIcon, K as K8sLogo, p as PayloadCollectionIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, S as SamplerIcon } from './index-DJGe2YeC.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-Bd8ZAEvq.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--RecCPGA.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-CIKkezVt.js';
 import React from 'react';
-export { E as EditIcon } from './index-BQQZyvRz.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-1N9wymEq.js';
+export { E as EditIcon } from './index-BWZT-ipR.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-Cq8NT9Hr.js';
 import './types.js';
 import 'styled-components';
 

package/lib/{index-f8FRaVkE.js → index--RecCPGA.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-CVH8Q8Sl.js';
+import { T as Theme } from './index-DJGe2YeC.js';
 
 const OdigosLogoText = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-Iq7U_fzb.js → index-BBjwRlta.js}

@@ -1,11 +1,11 @@
 import { StatusType, OtherStatus, DestinationTypes, EntityTypes, PlatformType } from './types.js';
-import { K as K8sLogo } from './index-CVH8Q8Sl.js';
+import { K as K8sLogo } from './index-DJGe2YeC.js';
 import { D as DEFAULT_DATA_STREAM_NAME } from './index-mOgS3e5E.js';
-import { a as getProgrammingLanguageIcon } from './index-B_Gl6Qa6.js';
+import { a as getProgrammingLanguageIcon } from './index-ChYtqgBW.js';
 import 'react';
 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-1N9wymEq.js';
-import { K as KafkaLogo, O as OdigosLogo } from './index-Do3CYz7N.js';
+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-Cq8NT9Hr.js';
+import { K as KafkaLogo, O as OdigosLogo } from './index-Bd8ZAEvq.js';
 import { s as safeJsonParse } from './index-BV85P9UP.js';
 
 const compareCondition = (renderCondition, fields) => {

package/lib/{index-BQQZyvRz.js → index-BWZT-ipR.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-CVH8Q8Sl.js';
+import { T as Theme } from './index-DJGe2YeC.js';
 
 const EditIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-BedCNcwV.js → index-BZq0yNL-.js}

@@ -1,14 +1,14 @@
 import React, { useState, useEffect, useRef, forwardRef, createElement, useCallback, useMemo, Fragment } from 'react';
-import { T as Theme, n as ImageErrorIcon, M as MONITORS_OPTIONS } from './index-CVH8Q8Sl.js';
+import { T as Theme, n as ImageErrorIcon, M as MONITORS_OPTIONS } from './index-DJGe2YeC.js';
+import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages, 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-CIKkezVt.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, n as numbersOnly } from './index-ChYtqgBW.js';
 import styled, { css } from 'styled-components';
-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-CNfdJ1X8.js';
-import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages } from './types.js';
 import { s as safeJsonParse, i as isEmpty } from './index-BV85P9UP.js';
 import { B as BUTTON_TEXTS } from './index-mOgS3e5E.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-B_Gl6Qa6.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-B0eagOib.js';
+import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-dZ92VxT2.js';
 import ReactDOM from 'react-dom';
-import { I as InfoIcon } from './index-Do3CYz7N.js';
+import { I as InfoIcon } from './index-Bd8ZAEvq.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -5001,15 +5001,15 @@ const Button$1 = styled.button `
     cursor: not-allowed;
   }
 `;
-const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, onChange, type = 'text', name, ...props }) => {
+const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, value, onChange, type = InputTypes.Text, name, ...props }) => {
     const theme = Theme.useTheme();
-    const isSecret = type === 'password';
+    const isSecret = type === InputTypes.Password;
     const [revealSecret, setRevealSecret] = useState(false);
     const handleInputChange = (e) => {
         e.stopPropagation();
-        const v = e.target.value;
-        const actualValue = type === 'number' ? v.replace(/[^\d]/g, '') : v;
-        e.target.value = actualValue;
+        if (type === InputTypes.Number) {
+            e.target.value = numbersOnly(e.target.value);
+        }
         onChange?.(e);
     };
     const handleKeyDown = (e) => {
@@ -5021,7 +5021,7 @@ const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage,
         React.createElement(InputWrapper$1, { "$disabled": props.disabled, "$hasError": hasError || !!errorMessage, "$isActive": !!props.autoFocus },
             isSecret ? (React.createElement(IconWrapperClickable, { onClick: () => setRevealSecret((prev) => !prev) }, revealSecret ? React.createElement(EyeClosedIcon, { size: 14, fill: theme.text.grey }) : React.createElement(EyeOpenIcon, { size: 14, fill: theme.text.grey }))) : Icon ? (React.createElement(IconWrapper$2, null,
                 React.createElement(Icon, { size: 14, fill: theme.text.grey }))) : null,
-            React.createElement(StyledInput, { "data-id": name, type: revealSecret ? 'text' : type, "$hasIcon": !!Icon || isSecret, name: name, onChange: handleInputChange, onKeyDown: handleKeyDown, ...props }),
+            React.createElement(StyledInput, { "data-id": name, type: revealSecret ? InputTypes.Text : type === InputTypes.Number ? InputTypes.Text : type, "$hasIcon": !!Icon || isSecret, name: name, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, ...props }),
             buttonLabel && onButtonClick && (React.createElement(Button$1, { onClick: onButtonClick, disabled: props.disabled }, buttonLabel))),
         !!errorMessage && React.createElement(FieldError, null, errorMessage)));
 };
@@ -5098,7 +5098,7 @@ const IconWrapper$1 = styled.div `
   align-items: center;
   gap: 4px;
 `;
-const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeholder, disabled = false, isMulti = false, showSearch = false, required = false, errorMessage }) => {
+const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeholder, disabled = false, isMulti = false, showSearch = false, required = false, errorMessage, hasError = false, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [openUpwards, setOpenUpwards] = useState(false);
     const containerRef = useRef(null);
@@ -5118,7 +5118,7 @@ const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeh
     return (React.createElement(RootContainer, { "$disabled": disabled },
         React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip }),
         React.createElement(RelativeContainer, { ref: containerRef },
-            React.createElement(DropdownHeader, { "$isOpen": isOpen, "$isMulti": isMulti, "$hasSelections": Array.isArray(value) ? !!value.length : false, "$hasError": !!errorMessage, "$disabled": disabled, onClick: () => !disabled && toggleOpen() },
+            React.createElement(DropdownHeader, { "$isOpen": isOpen, "$isMulti": isMulti, "$hasSelections": Array.isArray(value) ? !!value.length : false, "$hasError": !!errorMessage || hasError, "$disabled": disabled, onClick: () => !disabled && toggleOpen() },
                 React.createElement(DropdownPlaceholder, { value: value, placeholder: placeholder, onDeselect: onDeselect }),
                 React.createElement(IconWrapper$1, null,
                     isMulti && React.createElement(Badge, { label: arrLen, filled: !!arrLen }),
@@ -5391,22 +5391,44 @@ const InputList = ({ initialValues = [], value, onChange, title, tooltip, requir
         React.createElement(AddButton, { onClick: handleAddInput, disabled: isAddButtonDisabled })));
 };
 
+const ColumnsToFields = ({ col, colIdx, row, rowIdx, rowsLength, maxWidth, handleChange, errorMessage, limitFieldsPerRow }) => {
+    const { keyName, title, tooltip, placeholder, required, type, componentType, options, renderCondition } = col;
+    const value = row[keyName];
+    if (renderCondition && !renderCondition(row))
+        return null;
+    const render = () => {
+        switch (componentType) {
+            case FieldTypes.Dropdown:
+                const selectedOption = options?.find((opt) => opt.id === value);
+                return (React.createElement(Dropdown, { title: limitFieldsPerRow ? title : undefined, tooltip: limitFieldsPerRow ? tooltip : undefined, placeholder: placeholder, required: required, options: options || [], value: selectedOption, onSelect: (opt) => handleChange(keyName, opt.id, rowIdx), onDeselect: (opt) => handleChange(keyName, '', rowIdx), hasError: !!errorMessage && (!required || (required && isEmpty(value))) }));
+            default:
+                const hasMoreThanOneRow = rowsLength > 1;
+                const isLastRow = rowIdx === rowsLength - 1;
+                const isFirstColumn = colIdx === 0;
+                const shouldAutoFocus = hasMoreThanOneRow && isLastRow && isFirstColumn && isEmpty(value);
+                return (React.createElement(Input, { title: limitFieldsPerRow ? title : undefined, tooltip: limitFieldsPerRow ? tooltip : undefined, placeholder: placeholder, type: type, required: required, autoFocus: shouldAutoFocus, value: value, onChange: ({ target: { value: val } }) => handleChange(keyName, val, rowIdx), style: { maxWidth, paddingLeft: 10 }, hasError: !!errorMessage && (!required || (required && isEmpty(value))) }));
+        }
+    };
+    return (React.createElement("td", { key: `input-table-${rowIdx}-${keyName}`, style: { maxWidth, padding: '4px 6px 4px 0' } }, render()));
+};
+
 const Container$b = styled.div `
   display: flex;
   flex-direction: column;
   width: 100%;
 `;
 const DeleteButton$1 = styled.button `
+  margin-top: ${({ $marginTop }) => $marginTop};
   background: none;
   border: none;
-  cursor: pointer;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
 `;
-const InputTable = ({ columns, initialValues = [], value, onChange, errorMessage }) => {
+const InputTable = ({ columns, initialValues = [], value, onChange, errorMessage, limitFieldsPerRow }) => {
     // INITIAL_ROW as state, because it's dynamic to the "columns" prop
     const [initialRow, setInitialRow] = useState({});
     const [rows, setRows] = useState(value || initialValues);
+    const columnMap = useMemo(() => new Map(columns.map((col) => [col.keyName, col])), [columns]);
     useEffect(() => {
         if (!rows.length) {
             const init = {};
@@ -5415,9 +5437,28 @@ const InputTable = ({ columns, initialValues = [], value, onChange, errorMessage
             setRows([{ ...init }]);
         }
     }, []);
+    const isRowValid = (row) => {
+        for (const [key, val] of Object.entries(row)) {
+            const col = columnMap.get(key);
+            if (col?.renderCondition && !col.renderCondition(row)) {
+                // If the column has a render condition and it shouldn't render, skip/pass this column as valid
+                continue;
+                // Else, keep checking it below
+            }
+            if (col?.required && isEmpty(val)) {
+                // If the column is required, and is empty, this row is invalid
+                return false;
+            }
+        }
+        return true;
+    };
     // Filter out rows where either key or value is empty
-    const validRows = rows.filter((row) => !Object.values(row).filter((val) => isEmpty(val)).length);
+    const validRows = rows.filter(isRowValid);
     const recordedRows = useRef(JSON.stringify(validRows));
+    const isAddButtonDisabled = validRows.length !== rows.length;
+    // adjust cell-width based on the amount of inputs on-screen,
+    // the "0.4" is to consider the delete button
+    const maxWidth = `${Math.floor(640 / ((limitFieldsPerRow || columns.length) + 0.4))}px`;
     useEffect(() => {
         const stringified = JSON.stringify(validRows);
         // Only trigger onChange if valid key-value pairs have changed
@@ -5435,7 +5476,12 @@ const InputTable = ({ columns, initialValues = [], value, onChange, errorMessage
         });
     };
     const handleDeleteRow = (idx) => {
-        setRows((prev) => prev.filter((_, i) => i !== idx));
+        if (rows.length > 1) {
+            setRows((prev) => prev.filter((_, i) => i !== idx));
+        }
+        else {
+            columns.forEach(({ keyName, type }) => handleChange(keyName, type === InputTypes.Number ? '0' : '', idx));
+        }
     };
     const handleChange = (key, val, idx) => {
         setRows((prev) => {
@@ -5444,36 +5490,35 @@ const InputTable = ({ columns, initialValues = [], value, onChange, errorMessage
             return payload;
         });
     };
-    // Check if any key or value field is empty
-    const isMinRows = rows.length <= 1;
-    const isAddButtonDisabled = rows.some((row) => !!Object.values(row).filter((val) => isEmpty(val)).length);
-    const isDelButtonDisabled = isMinRows && isAddButtonDisabled;
-    // adjust cell-width based on the amount of inputs on-screen,
-    // the "0.4" is to consider the delete button
-    const maxWidth = `${Math.floor(640 / (columns.length + 0.4))}px`;
+    const matrixColumns = useMemo(() => {
+        if (limitFieldsPerRow) {
+            const matrix = [];
+            for (let i = 0; true; i += limitFieldsPerRow) {
+                const arr = columns.slice(i, i + limitFieldsPerRow);
+                if (!arr.length)
+                    break;
+                matrix.push(arr);
+            }
+            return matrix;
+        }
+        return [columns];
+    }, [limitFieldsPerRow, columns]);
     return (React.createElement(Container$b, null,
         React.createElement("table", { style: { borderCollapse: 'collapse' } },
-            React.createElement("thead", null,
+            !limitFieldsPerRow && (React.createElement("thead", null,
                 React.createElement("tr", null,
                     columns.map(({ title, tooltip, required }) => (React.createElement("th", { key: `input-table-head-${title}`, style: { maxWidth } },
                         React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip })))),
-                    React.createElement("th", null))),
-            React.createElement("tbody", null, rows.map((row, idx) => (React.createElement("tr", { key: `input-table-row-${idx}` },
-                columns.map(({ type, keyName, placeholder, required }, innerIdx) => {
-                    const value = row[keyName];
-                    return (React.createElement("td", { key: `input-table-${idx}-${keyName}`, style: { maxWidth, padding: '4px 6px 4px 0' } },
-                        React.createElement(Input, { autoFocus: isEmpty(value) && !isMinRows && idx === rows.length - 1 && innerIdx === 0, type: type, placeholder: placeholder, value: value, onChange: ({ target: { value: val } }) => handleChange(keyName, type === 'number' ? Number(val) : val, idx), style: { maxWidth, paddingLeft: 10 }, hasError: !!errorMessage && (!required || (required && isEmpty(value))) })));
-                }),
-                React.createElement("td", null,
-                    React.createElement(DeleteButton$1, { disabled: isDelButtonDisabled, onClick: () => {
-                            if (isMinRows) {
-                                columns.forEach(({ keyName }) => handleChange(keyName, '', idx));
-                            }
-                            else {
-                                handleDeleteRow(idx);
-                            }
-                        } },
-                        React.createElement(TrashIcon, null)))))))),
+                    React.createElement("th", null)))),
+            React.createElement("tbody", null, rows.map((row, rowIdx) => (React.createElement(Fragment, { key: `input-table-row-${rowIdx}` },
+                limitFieldsPerRow && rowIdx > 0 ? (React.createElement("tr", null,
+                    React.createElement("td", { colSpan: matrixColumns.length },
+                        React.createElement(Divider, null)))) : null,
+                matrixColumns.map((cols, colIdx) => (React.createElement("tr", { key: `input-table-matrix-${rowIdx}-${colIdx}` },
+                    cols.map((obj, colIdx) => (React.createElement(ColumnsToFields, { key: `input-table-row-${rowIdx}-col-${colIdx}`, col: obj, colIdx: colIdx, row: row, rowIdx: rowIdx, rowsLength: rows.length, maxWidth: maxWidth, limitFieldsPerRow: limitFieldsPerRow, errorMessage: errorMessage, handleChange: handleChange }))),
+                    colIdx === 0 && (React.createElement("td", null,
+                        React.createElement(DeleteButton$1, { "$marginTop": limitFieldsPerRow ? '24px' : '0', onClick: () => handleDeleteRow(rowIdx) },
+                            React.createElement(TrashIcon, null)))))))))))),
         !!errorMessage && React.createElement(FieldError, null, errorMessage),
         React.createElement(AddButton, { onClick: handleAddRow, disabled: isAddButtonDisabled })));
 };

package/lib/{index-Do3CYz7N.js → index-Bd8ZAEvq.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-CVH8Q8Sl.js';
+import { T as Theme } from './index-DJGe2YeC.js';
 
 const OdigosLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-CNfdJ1X8.js → index-CIKkezVt.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-CVH8Q8Sl.js';
+import { T as Theme } from './index-DJGe2YeC.js';
 
 const ArrowIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-B_Gl6Qa6.js → index-ChYtqgBW.js}

@@ -1,8 +1,8 @@
 import { ProgrammingLanguages, SignalType, StatusType } from './types.js';
 import 'react';
-import { n as ImageErrorIcon } from './index-CVH8Q8Sl.js';
+import { n as ImageErrorIcon } from './index-DJGe2YeC.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-Do3CYz7N.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-Bd8ZAEvq.js';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);
@@ -136,6 +136,12 @@ const mapConditions = (conditions) => {
     })) || []);
 };
 
+const numbersOnly = (value) => {
+    // Use a regular expression to replace all non-digit characters with an empty string
+    const cleaned = value.replace(/[^\d]/g, '');
+    return cleaned;
+};
+
 const parseJsonStringToPrettyString = (value) => {
     let str = '';
     try {
@@ -198,4 +204,4 @@ const safeJsonStringify = (obj, indent = 2) => {
     return JSON.stringify(obj || {}, null, indent);
 };
 
-export { getProgrammingLanguageIcon as a, getStatusIcon as b, capitalizeFirstLetter as c, splitCamelString as d, flattenObjectKeys as f, getMonitorIcon as g, mapConditions as m, parseJsonStringToPrettyString as p, removeEmptyValuesFromObject as r, safeJsonStringify as s };
+export { getProgrammingLanguageIcon as a, getStatusIcon as b, capitalizeFirstLetter as c, splitCamelString as d, flattenObjectKeys as f, getMonitorIcon as g, mapConditions as m, numbersOnly as n, parseJsonStringToPrettyString as p, removeEmptyValuesFromObject as r, safeJsonStringify as s };

package/lib/{index-1N9wymEq.js → index-Cq8NT9Hr.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-CVH8Q8Sl.js';
+import { T as Theme } from './index-DJGe2YeC.js';
 
 const VmLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-CVH8Q8Sl.js → index-DJGe2YeC.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ActionType, SignalType, InstrumentationRuleType, EntityTypes } from './types.js';
+import { ActionCategory, ActionType, SignalType, InstrumentationRuleType, EntityTypes } from './types.js';
 import { ThemeProvider, keyframes, useTheme } from 'styled-components';
 
 const createStoreImpl = (createState) => {
@@ -65,10 +65,7 @@ function createJSONStorage(getStorage, options) {
       }
       return parse(str);
     },
-    setItem: (name, newValue) => storage.setItem(
-      name,
-      JSON.stringify(newValue, void 0 )
-    ),
+    setItem: (name, newValue) => storage.setItem(name, JSON.stringify(newValue, void 0 )),
     removeItem: (name) => storage.removeItem(name)
   };
   return persistStorage;
@@ -343,8 +340,8 @@ const PayloadCollectionIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
 
 const getActionIcon = (type) => {
     const typeLowerCased = type?.toLowerCase();
-    const isSamplerCategory = typeLowerCased?.includes('sampler');
-    const isAttributesCategory = typeLowerCased === 'attributes';
+    const isSamplerCategory = typeLowerCased?.includes(ActionCategory.Samplers);
+    const isAttributesCategory = typeLowerCased === ActionCategory.Attributes;
     if (isSamplerCategory)
         return SamplerIcon;
     if (isAttributesCategory)
@@ -358,6 +355,8 @@ const getActionIcon = (type) => {
         [ActionType.ErrorSampler]: SamplerIcon,
         [ActionType.ProbabilisticSampler]: SamplerIcon,
         [ActionType.LatencySampler]: SamplerIcon,
+        [ActionType.ServiceNameSampler]: SamplerIcon,
+        [ActionType.SpanAttributeSampler]: SamplerIcon,
     };
     return LOGOS[type] || ImageErrorIcon;
 };
@@ -365,7 +364,7 @@ const getActionIcon = (type) => {
 const ACTION_OPTIONS = [
     {
         label: 'Attributes',
-        icon: getActionIcon('attributes'),
+        icon: getActionIcon(ActionCategory.Attributes),
         items: [
             {
                 type: ActionType.K8sAttributes,
@@ -416,11 +415,11 @@ const ACTION_OPTIONS = [
     },
     {
         label: 'Samplers',
-        icon: getActionIcon('sampler'),
+        icon: getActionIcon(ActionCategory.Samplers),
         items: [
             {
                 type: ActionType.ErrorSampler,
-                icon: getActionIcon('sampler'),
+                icon: getActionIcon(ActionCategory.Samplers),
                 label: 'Error Sampler',
                 description: 'Sample errors based on percentage.',
                 allowedSignals: [SignalType.Traces],
@@ -429,7 +428,7 @@ const ACTION_OPTIONS = [
             },
             {
                 type: ActionType.LatencySampler,
-                icon: getActionIcon('sampler'),
+                icon: getActionIcon(ActionCategory.Samplers),
                 label: 'Latency Sampler',
                 description: 'Add latency to your traces.',
                 allowedSignals: [SignalType.Traces],
@@ -438,13 +437,31 @@ const ACTION_OPTIONS = [
             },
             {
                 type: ActionType.ProbabilisticSampler,
-                icon: getActionIcon('sampler'),
+                icon: getActionIcon(ActionCategory.Samplers),
                 label: 'Probabilistic Sampler',
                 description: 'Sample traces based on percentage.',
                 allowedSignals: [SignalType.Traces],
                 docsEndpoint: '/pipeline/actions/sampling/probabilisticsampler',
                 docsDescription: 'This action supports probabilistic sampling based on a configured sampling percentage applied to the TraceID.',
             },
+            {
+                type: ActionType.ServiceNameSampler,
+                icon: getActionIcon(ActionCategory.Samplers),
+                label: 'Service Name Sampler',
+                description: 'Sample traces based on the presence of specified services within a trace.',
+                allowedSignals: [SignalType.Traces],
+                docsEndpoint: '/pipeline/actions/sampling/servicenamesampler',
+                docsDescription: 'This action supports service name sampling based on the presence of specified services within a trace.',
+            },
+            {
+                type: ActionType.SpanAttributeSampler,
+                icon: getActionIcon(ActionCategory.Samplers),
+                label: 'Span Attributes Sampler',
+                description: 'Sample traces based on the presence or value of specific attributes within a trace.',
+                allowedSignals: [SignalType.Traces],
+                docsEndpoint: '/pipeline/actions/sampling/spanattributesampler',
+                docsDescription: 'This action supports service name sampling based on the presence or value of specific attributes within a trace.',
+            },
         ],
     },
 ];

package/lib/{index-CaAOgaiC.js → index-a_WA-82O.js}

@@ -1,7 +1,7 @@
 import React from 'react';
-import { _ as WarningModal } from './index-BedCNcwV.js';
+import { _ as WarningModal } from './index-BZq0yNL-.js';
 import { StatusType, EntityTypes } from './types.js';
-import './index-CVH8Q8Sl.js';
+import './index-DJGe2YeC.js';
 import 'styled-components';
 
 const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {

package/lib/{index-BjVl4-os.js → index-ovjVbVQq.js}

@@ -1,11 +1,11 @@
 import React from 'react';
-import { T as Theme } from './index-CVH8Q8Sl.js';
-import { E as EditIcon } from './index-BQQZyvRz.js';
+import { T as Theme } from './index-DJGe2YeC.js';
+import { E as EditIcon } from './index-BWZT-ipR.js';
 import { B as BUTTON_TEXTS, a as DISPLAY_TITLES } from './index-mOgS3e5E.js';
-import { B as Button, V as Text, J as NotificationNote } from './index-BedCNcwV.js';
+import { B as Button, V as Text, J as NotificationNote } from './index-BZq0yNL-.js';
 import { StatusType } from './types.js';
 import 'styled-components';
-import { I as InfoIcon } from './index-Do3CYz7N.js';
+import { I as InfoIcon } from './index-Bd8ZAEvq.js';
 
 const EditButton = ({ label, onClick, variant = 'tertiary', ...props }) => {
     const theme = Theme.useTheme();

package/lib/snippets.js

@@ -1,14 +1,14 @@
-export { A as AddButton } from './index-BedCNcwV.js';
-export { E as EditButton, N as NoteBackToSummary } from './index-BjVl4-os.js';
+export { A as AddButton } from './index-BZq0yNL-.js';
+export { E as EditButton, N as NoteBackToSummary } from './index-ovjVbVQq.js';
 import 'react';
-import './index-CVH8Q8Sl.js';
+import './index-DJGe2YeC.js';
 import './types.js';
 import 'styled-components';
-import './index-CNfdJ1X8.js';
+import './index-CIKkezVt.js';
+import './index-ChYtqgBW.js';
+import './index-Bd8ZAEvq.js';
 import './index-BV85P9UP.js';
 import './index-mOgS3e5E.js';
-import './index-B_Gl6Qa6.js';
-import './index-Do3CYz7N.js';
-import './useTransition-B0eagOib.js';
+import './useTransition-dZ92VxT2.js';
 import 'react-dom';
-import './index-BQQZyvRz.js';
+import './index-BWZT-ipR.js';

package/lib/store.js

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

package/lib/theme.js

@@ -1,4 +1,4 @@
-export { T as default } from './index-CVH8Q8Sl.js';
+export { T as default } from './index-DJGe2YeC.js';
 import 'styled-components';
 import 'react';
 import './types.js';