@integration-app/react 2.20.0 → 2.22.0

package/dist/cjs/components/DataBuilder/Formula/domainFromEmail.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -12,17 +12,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var index$1 = require('../../Formula/index.cjs');
 var Form = require('../Form.cjs');
 var index = require('../index.cjs');
 
 const DomainFromEmailFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(index$1.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Variable, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.VariableSvgIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Domain from email"
-    ] }) });
+    ] });
   }
 );
 DomainFromEmailFormula.displayName = "DomainFromEmailFormula";

package/dist/cjs/components/DataBuilder/Formula/extractDate.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -12,17 +12,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var index$1 = require('../../Formula/index.cjs');
 var Form = require('../Form.cjs');
 var index = require('../index.cjs');
 
 const ExtractDateFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(index$1.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Variable, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.VariableSvgIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Extract date"
-    ] }) });
+    ] });
   }
 );
 function ExtractDateFormulaDropdown(props) {

package/dist/cjs/components/DataBuilder/Formula/extractTime.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -12,17 +12,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var index$1 = require('../../Formula/index.cjs');
 var Form = require('../Form.cjs');
 var index = require('../index.cjs');
 
 const ExtractTimeFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(index$1.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Variable, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.VariableSvgIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Extract time"
-    ] }) });
+    ] });
   }
 );
 function ExtractTimeFormulaDropdown(props) {

package/dist/cjs/components/DataBuilder/Formula/findAppRecordId.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -13,11 +13,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sdk = require('@integration-app/sdk');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 var integrationAppClientContext = require('../../../contexts/integration-app-client-context.cjs');
 var integrationAppConnectionContext = require('../../../contexts/integration-app-connection-context.cjs');
-var ComboBoxTag = require('../../ComboBoxElements/ComboBoxTag.cjs');
-var index = require('../../Truncate/index.cjs');
+var index$1 = require('../../Truncate/index.cjs');
 var dataBuilderContext = require('../data-builder-context.cjs');
 var fieldContext = require('../field-context.cjs');
 var dataLinkTablesOptionFactory = require('../../DataLinks/data-link-tables-option-factory.cjs');
@@ -25,8 +25,12 @@ var dataField = require('../data-field.cjs');
 var DataBuilderFormField = require('../DataBuilderFormField.cjs');
 
 const FindAppRecordIdFormula = React.forwardRef(
-  (_props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { ref, icon: svgIconType.SvgIconType.Array, variant: "lookup", children: /* @__PURE__ */ jsxRuntime.jsx(index.Truncate, { children: "Find App Record ID" }) });
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.EditorTagBadge, { variant: "formula", ref, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Array }),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.Truncate, { children: "Find App Record ID" })
+    ] });
   }
 );
 function FindAppRecordIdFormulaDropdown({

package/dist/cjs/components/DataBuilder/Formula/findExternalRecordId.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -13,11 +13,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sdk = require('@integration-app/sdk');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 var integrationAppClientContext = require('../../../contexts/integration-app-client-context.cjs');
 var integrationAppConnectionContext = require('../../../contexts/integration-app-connection-context.cjs');
-var ComboBoxTag = require('../../ComboBoxElements/ComboBoxTag.cjs');
-var index = require('../../Truncate/index.cjs');
+var index$1 = require('../../Truncate/index.cjs');
 var dataBuilderContext = require('../data-builder-context.cjs');
 var dataField = require('../data-field.cjs');
 var fieldContext = require('../field-context.cjs');
@@ -25,8 +25,11 @@ var dataLinkTablesOptionFactory = require('../../DataLinks/data-link-tables-opti
 var DataBuilderFormField = require('../DataBuilderFormField.cjs');
 
 const FindExternalRecordIdFormula = React.forwardRef(
-  (_props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { ref, icon: svgIconType.SvgIconType.Array, variant: "lookup", children: /* @__PURE__ */ jsxRuntime.jsx(index.Truncate, { children: "Find External Record ID" }) });
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.EditorTagBadge, { variant: "formula", ref, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Array }),
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.Truncate, { children: "Find External Record ID" })
+    ] });
   }
 );
 function FindExternalRecordIdFormulaDropdown({

package/dist/cjs/components/DataBuilder/Formula/firstName.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -12,17 +12,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var index$1 = require('../../Formula/index.cjs');
 var Form = require('../Form.cjs');
 var index = require('../index.cjs');
 
 const FirstNameFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(index$1.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Variable, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.VariableSvgIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Extract first name"
-    ] }) });
+    ] });
   }
 );
 FirstNameFormula.displayName = "FirstNameFormula";

package/dist/cjs/components/DataBuilder/Formula/firstNotEmpty.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -13,18 +13,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sdk = require('@integration-app/sdk');
-var index$2 = require('../../DataInput/index.cjs');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var index$1 = require('../../DataInput/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var index = require('../../Formula/index.cjs');
 var fieldContext = require('../field-context.cjs');
-var index$1 = require('../../DataBuilderUI/index.cjs');
 
 const FirstNotEmptyFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(index.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Variable, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index.VariableSvgIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " First not empty"
-    ] }) });
+    ] });
   }
 );
 FirstNotEmptyFormula.displayName = "FirstNotEmptyFormula";
@@ -39,8 +38,8 @@ function FirstNotEmptyDropdown({ onChange, formula }) {
   return /* @__PURE__ */ jsxRuntime.jsx(FirstNotEmptyNested, { field: renderedField, onChange, schema: localSchema });
 }
 function FirstNotEmptyNested({ field, onChange, schema }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(index$1.DrilldownBlockContentWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    index$2.DataInput,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.DataInput,
     {
       schema: sdk.schemaWithTitle(
         {
@@ -55,7 +54,7 @@ function FirstNotEmptyNested({ field, onChange, schema }) {
         onChange?.({ $firstNotEmpty: value });
       }
     }
-  ) });
+  );
 }
 
 exports.FirstNotEmptyDropdown = FirstNotEmptyDropdown;

package/dist/cjs/components/DataBuilder/Formula/index.cjs

@@ -2,16 +2,16 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 'use strict';
 
 var sdk = require('@integration-app/sdk');
-var _case = require('./case.cjs');
+var caseFormula = require('./case-formula.cjs');
 var concat = require('./concat.cjs');
-var copy = require('./copy.cjs');
+var deprecatedFormula = require('./deprecatedFormula.cjs');
 var domainFromEmail = require('./domainFromEmail.cjs');
 var extractDate = require('./extractDate.cjs');
 var extractTime = require('./extractTime.cjs');
@@ -26,7 +26,6 @@ var lookup = require('./lookup.cjs');
 var map = require('./map.cjs');
 var mergeObjects = require('./mergeObjects.cjs');
 var noUi = require('./noUi.cjs');
-var record = require('./record.cjs');
 var tpl = require('./tpl.cjs');
 var _var = require('./var.cjs');
 
@@ -41,7 +40,8 @@ const formulaComponentMapping = {
     component: tpl.default
   },
   [sdk.DataBuilderFormulaType.RECORD]: {
-    component: record.default
+    component: deprecatedFormula.DeprecatedFormula,
+    DropdownComponent: deprecatedFormula.DeprecatedFormulaDropdown
   },
   [sdk.DataBuilderFormulaType.FIRST_NAME]: {
     component: firstName.default,
@@ -67,8 +67,8 @@ const formulaComponentMapping = {
     DropdownComponent: map.MapFormulaDropdown
   },
   [sdk.DataBuilderFormulaType.CASE]: {
-    component: _case.default,
-    DropdownComponent: _case.CaseFormulaDropdown
+    component: caseFormula.default,
+    DropdownComponent: caseFormula.CaseFormulaDropdown
   },
   [sdk.DataBuilderFormulaType.PLAIN]: {
     component: noUi.default
@@ -82,8 +82,8 @@ const formulaComponentMapping = {
     DropdownComponent: extractTime.ExtractTimeFormulaDropdown
   },
   [sdk.DataBuilderFormulaType.COPY]: {
-    component: copy.default,
-    DropdownComponent: copy.CopyFormulaDropdown
+    component: deprecatedFormula.DeprecatedFormula,
+    DropdownComponent: deprecatedFormula.DeprecatedFormulaDropdown
   },
   [sdk.DataBuilderFormulaType.FIND_APP_RECORD_ID]: {
     component: findAppRecordId.default,

package/dist/cjs/components/DataBuilder/Formula/iterate.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -13,19 +13,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sdk = require('@integration-app/sdk');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var index = require('../index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var index$1 = require('../../Formula/index.cjs');
 var dataField = require('../data-field.cjs');
 var DataBuilderFormField = require('../DataBuilderFormField.cjs');
 var fieldContext = require('../field-context.cjs');
 
 const IterateFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(index$1.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Variable, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.VariableSvgIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Iterate over"
-    ] }) });
+    ] });
   }
 );
 IterateFormula.displayName = "IterateFormula";

package/dist/cjs/components/DataBuilder/Formula/jsonata.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -12,17 +12,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var index$1 = require('../../Formula/index.cjs');
 var Form = require('../Form.cjs');
 var index = require('../index.cjs');
 
 const JsonataFormulaTag = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(index$1.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Variable, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.VariableSvgIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Jsonata"
-    ] }) });
+    ] });
   }
 );
 JsonataFormulaTag.displayName = "JsonataFormulaTag";

package/dist/cjs/components/DataBuilder/Formula/lastName.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -12,17 +12,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var index$1 = require('../../Formula/index.cjs');
 var Form = require('../Form.cjs');
 var index = require('../index.cjs');
 
 const LastNameFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(index$1.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Variable, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.VariableSvgIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Extract last name"
-    ] }) });
+    ] });
   }
 );
 LastNameFormula.displayName = "LastNameFormula";

package/dist/cjs/components/DataBuilder/Formula/lookup.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -12,19 +12,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var ComboBoxTag = require('../../ComboBoxElements/ComboBoxTag.cjs');
-var Tag = require('../../Tag/Tag.cjs');
-require('../../Tag/TagPlaceholder.cjs');
-var index = require('../../Truncate/index.cjs');
+var index$1 = require('../../Truncate/index.cjs');
 
 const LookupFormula = React.forwardRef((props, ref) => {
   const { formula } = props;
   const isConfigError = Object.entries(formula.value?.query ?? {}).length === 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(ComboBoxTag.ComboBoxTag, { ref, variant: "lookup", children: [
-    isConfigError && /* @__PURE__ */ jsxRuntime.jsx(Tag.Tag.SvgIcon, { type: svgIconType.SvgIconType.AlertTriangle }),
-    /* @__PURE__ */ jsxRuntime.jsx(index.Truncate, { children: "Select Dynamically" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    index.EditorTagBadge,
+    {
+      ref,
+      variant: "value",
+      disabled: props.disabled,
+      onClick: props.onClick,
+      onDelete: props.onDelete,
+      children: [
+        isConfigError && /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.AlertTriangle }),
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.Truncate, { children: "Select Dynamically" })
+      ]
+    }
+  );
 });
 LookupFormula.displayName = "LookupFormula";
 

package/dist/cjs/components/DataBuilder/Formula/map.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -12,18 +12,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 var index = require('../index.cjs');
-var index$1 = require('../../Formula/index.cjs');
 var fieldContext = require('../field-context.cjs');
 var Form = require('../Form.cjs');
 var ValueMapping = require('../Nested/ValueMapping.cjs');
 
 const MapFormula = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(index$1.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Variable, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index$1.VariableSvgIcon, { type: svgIconType.SvgIconType.Function }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
     " Map values"
-  ] }) });
+  ] });
 });
 MapFormula.displayName = "MapFormula";
 function MapFormulaDropdown({

package/dist/cjs/components/DataBuilder/Formula/mergeObjects.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -13,25 +13,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sdk = require('@integration-app/sdk');
-var index = require('../../DataBuilderUI/index.cjs');
-var index$1 = require('../../DataInput/index.cjs');
-var index$2 = require('../../Formula/index.cjs');
+var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var index = require('../../DataInput/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 var fieldContext = require('../field-context.cjs');
 
 const MergeObjectsFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(index$2.Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(index$2.Variable, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$2.VariableSvgIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Merge objects"
-    ] }) });
+    ] });
   }
 );
 MergeObjectsFormula.displayName = "MergeObjectsFormula";
 function MergeObjectsDropdown({ onChange, formula }) {
   const { field } = fieldContext.default();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.DrilldownBlockContentWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    index$1.DataInput,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.DataInput,
     {
       schema: sdk.schemaWithTitle(
         {
@@ -46,7 +45,7 @@ function MergeObjectsDropdown({ onChange, formula }) {
         onChange?.({ $mergeObjects: value });
       }
     }
-  ) });
+  );
 }
 
 exports.MergeObjectsDropdown = MergeObjectsDropdown;

package/dist/cjs/components/DataBuilder/Formula/noUi.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Formula/tpl.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -12,11 +12,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var ComboBoxTag = require('../../ComboBoxElements/ComboBoxTag.cjs');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 
-const TplFormula = React.forwardRef((_, ref) => {
-  console.error("TplFormula: Unsupported formula type used");
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { ref, disabled: true, children: "Unsupported formula type" });
+const TplFormula = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadge, { variant: "static-value", ref, onDelete: props.onDelete, children: "Unsupported formula type" });
 });
 TplFormula.displayName = "TplFormula";