@integration-app/react 2.20.0 → 2.22.0

package/dist/esm/components/DataBuilder/Formula/findAppRecordId.mjs

@@ -2,17 +2,17 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { DataBuilderFormulaType } from '@integration-app/sdk';
+import { EditorTagBadge, EditorTagBadgeIcon } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 import { useIntegrationAppClient } from '../../../contexts/integration-app-client-context.mjs';
 import { useIntegrationAppConnection } from '../../../contexts/integration-app-connection-context.mjs';
-import { ComboBoxTag } from '../../ComboBoxElements/ComboBoxTag.mjs';
 import { Truncate } from '../../Truncate/index.mjs';
 import useDataBuilder from '../data-builder-context.mjs';
 import useDataBuilderField from '../field-context.mjs';
@@ -21,8 +21,12 @@ import { makeSubField } from '../data-field.mjs';
 import { DataBuilderFormField } from '../DataBuilderFormField.mjs';
 
 const FindAppRecordIdFormula = forwardRef(
-  (_props, ref) => {
-    return /* @__PURE__ */ jsx(ComboBoxTag, { ref, icon: SvgIconType.Array, variant: "lookup", children: /* @__PURE__ */ jsx(Truncate, { children: "Find App Record ID" }) });
+  (props, ref) => {
+    return /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "formula", ref, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Array }),
+      " ",
+      /* @__PURE__ */ jsx(Truncate, { children: "Find App Record ID" })
+    ] });
   }
 );
 function FindAppRecordIdFormulaDropdown({

package/dist/esm/components/DataBuilder/Formula/findExternalRecordId.mjs

@@ -2,17 +2,17 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { DataBuilderFormulaType } from '@integration-app/sdk';
+import { EditorTagBadge, EditorTagBadgeIcon } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 import { useIntegrationAppClient } from '../../../contexts/integration-app-client-context.mjs';
 import { useIntegrationAppConnection } from '../../../contexts/integration-app-connection-context.mjs';
-import { ComboBoxTag } from '../../ComboBoxElements/ComboBoxTag.mjs';
 import { Truncate } from '../../Truncate/index.mjs';
 import useDataBuilder from '../data-builder-context.mjs';
 import { makeSubField } from '../data-field.mjs';
@@ -21,8 +21,11 @@ import { DataLinkTablesOptionsFactory } from '../../DataLinks/data-link-tables-o
 import { DataBuilderFormField } from '../DataBuilderFormField.mjs';
 
 const FindExternalRecordIdFormula = forwardRef(
-  (_props, ref) => {
-    return /* @__PURE__ */ jsx(ComboBoxTag, { ref, icon: SvgIconType.Array, variant: "lookup", children: /* @__PURE__ */ jsx(Truncate, { children: "Find External Record ID" }) });
+  (props, ref) => {
+    return /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "formula", ref, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Array }),
+      /* @__PURE__ */ jsx(Truncate, { children: "Find External Record ID" })
+    ] });
   }
 );
 function FindExternalRecordIdFormulaDropdown({

package/dist/esm/components/DataBuilder/Formula/firstName.mjs

@@ -2,23 +2,23 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { EditorTagBadge, EditorTagBadgeIcon } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
-import { Formula, Variable, VariableSvgIcon } from '../../Formula/index.mjs';
 import { DataBuilderForm } from '../Form.mjs';
 import { makeDataField } from '../index.mjs';
 
 const FirstNameFormula = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxs(Variable, { children: [
-      /* @__PURE__ */ jsx(VariableSvgIcon, { type: SvgIconType.Function }),
+    return /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Function }),
       " Extract first name"
-    ] }) });
+    ] });
   }
 );
 FirstNameFormula.displayName = "FirstNameFormula";

package/dist/esm/components/DataBuilder/Formula/firstNotEmpty.mjs

@@ -2,25 +2,24 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { schemaWithTitle } from '@integration-app/sdk';
+import { EditorTagBadge, EditorTagBadgeIcon } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
 import { DataInput } from '../../DataInput/index.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
-import { Formula, Variable, VariableSvgIcon } from '../../Formula/index.mjs';
 import useDataBuilderField from '../field-context.mjs';
-import { DrilldownBlockContentWrapper } from '../../DataBuilderUI/index.mjs';
 
 const FirstNotEmptyFormula = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxs(Variable, { children: [
-      /* @__PURE__ */ jsx(VariableSvgIcon, { type: SvgIconType.Function }),
+    return /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Function }),
       " First not empty"
-    ] }) });
+    ] });
   }
 );
 FirstNotEmptyFormula.displayName = "FirstNotEmptyFormula";
@@ -35,7 +34,7 @@ function FirstNotEmptyDropdown({ onChange, formula }) {
   return /* @__PURE__ */ jsx(FirstNotEmptyNested, { field: renderedField, onChange, schema: localSchema });
 }
 function FirstNotEmptyNested({ field, onChange, schema }) {
-  return /* @__PURE__ */ jsx(DrilldownBlockContentWrapper, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     DataInput,
     {
       schema: schemaWithTitle(
@@ -51,7 +50,7 @@ function FirstNotEmptyNested({ field, onChange, schema }) {
         onChange?.({ $firstNotEmpty: value });
       }
     }
-  ) });
+  );
 }
 
 export { FirstNotEmptyDropdown, FirstNotEmptyFormula as default };

package/dist/esm/components/DataBuilder/Formula/index.mjs

@@ -2,14 +2,14 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { DataBuilderFormulaType } from '@integration-app/sdk';
-import CaseFormula, { CaseFormulaDropdown } from './case.mjs';
+import CaseFormula, { CaseFormulaDropdown } from './case-formula.mjs';
 import ConcatFormula, { ConcatFormulaDropdown } from './concat.mjs';
-import CopyFormula, { CopyFormulaDropdown } from './copy.mjs';
+import { DeprecatedFormulaDropdown, DeprecatedFormula } from './deprecatedFormula.mjs';
 import DomainFromEmailFormula, { DomainFromEmailFormulaDropdown } from './domainFromEmail.mjs';
 import ExtractDateFormula, { ExtractDateFormulaDropdown } from './extractDate.mjs';
 import ExtractTimeFormula, { ExtractTimeFormulaDropdown } from './extractTime.mjs';
@@ -24,7 +24,6 @@ import LookupFormula from './lookup.mjs';
 import MapFormula, { MapFormulaDropdown } from './map.mjs';
 import MergeObjectsFormula, { MergeObjectsDropdown } from './mergeObjects.mjs';
 import NoUiFormula from './noUi.mjs';
-import RecordFormula from './record.mjs';
 import TplFormula from './tpl.mjs';
 import VarFormula from './var.mjs';
 
@@ -39,7 +38,8 @@ const formulaComponentMapping = {
     component: TplFormula
   },
   [DataBuilderFormulaType.RECORD]: {
-    component: RecordFormula
+    component: DeprecatedFormula,
+    DropdownComponent: DeprecatedFormulaDropdown
   },
   [DataBuilderFormulaType.FIRST_NAME]: {
     component: FirstNameFormula,
@@ -80,8 +80,8 @@ const formulaComponentMapping = {
     DropdownComponent: ExtractTimeFormulaDropdown
   },
   [DataBuilderFormulaType.COPY]: {
-    component: CopyFormula,
-    DropdownComponent: CopyFormulaDropdown
+    component: DeprecatedFormula,
+    DropdownComponent: DeprecatedFormulaDropdown
   },
   [DataBuilderFormulaType.FIND_APP_RECORD_ID]: {
     component: FindAppRecordIdFormula,

package/dist/esm/components/DataBuilder/Formula/iterate.mjs

@@ -2,26 +2,26 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { schemaWithTitle, buildDataSchema } from '@integration-app/sdk';
+import { EditorTagBadge, EditorTagBadgeIcon } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
 import { makeDataField } from '../index.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
-import { Formula, Variable, VariableSvgIcon } from '../../Formula/index.mjs';
 import { makeSubField } from '../data-field.mjs';
 import { DataBuilderFormField } from '../DataBuilderFormField.mjs';
 import useDataBuilderField from '../field-context.mjs';
 
 const IterateFormula = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxs(Variable, { children: [
-      /* @__PURE__ */ jsx(VariableSvgIcon, { type: SvgIconType.Function }),
+    return /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Function }),
       " Iterate over"
-    ] }) });
+    ] });
   }
 );
 IterateFormula.displayName = "IterateFormula";

package/dist/esm/components/DataBuilder/Formula/jsonata.mjs

@@ -2,23 +2,23 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { EditorTagBadge, EditorTagBadgeIcon } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
-import { Formula, Variable, VariableSvgIcon } from '../../Formula/index.mjs';
 import { DataBuilderForm } from '../Form.mjs';
 import { makeDataField } from '../index.mjs';
 
 const JsonataFormulaTag = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxs(Variable, { children: [
-      /* @__PURE__ */ jsx(VariableSvgIcon, { type: SvgIconType.Function }),
+    return /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Function }),
       " Jsonata"
-    ] }) });
+    ] });
   }
 );
 JsonataFormulaTag.displayName = "JsonataFormulaTag";

package/dist/esm/components/DataBuilder/Formula/lastName.mjs

@@ -2,23 +2,23 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { EditorTagBadge, EditorTagBadgeIcon } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
-import { Formula, Variable, VariableSvgIcon } from '../../Formula/index.mjs';
 import { DataBuilderForm } from '../Form.mjs';
 import { makeDataField } from '../index.mjs';
 
 const LastNameFormula = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxs(Variable, { children: [
-      /* @__PURE__ */ jsx(VariableSvgIcon, { type: SvgIconType.Function }),
+    return /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Function }),
       " Extract last name"
-    ] }) });
+    ] });
   }
 );
 LastNameFormula.displayName = "LastNameFormula";

package/dist/esm/components/DataBuilder/Formula/lookup.mjs

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

package/dist/esm/components/DataBuilder/Formula/map.mjs

@@ -2,24 +2,24 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { EditorTagBadge, EditorTagBadgeIcon } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 import { makeDataField } from '../index.mjs';
-import { Formula, Variable, VariableSvgIcon } from '../../Formula/index.mjs';
 import useDataBuilderField from '../field-context.mjs';
 import { DataBuilderForm } from '../Form.mjs';
 import { ValueMapping } from '../Nested/ValueMapping.mjs';
 
 const MapFormula = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxs(Variable, { children: [
-    /* @__PURE__ */ jsx(VariableSvgIcon, { type: SvgIconType.Function }),
+  return /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+    /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Function }),
     " Map values"
-  ] }) });
+  ] });
 });
 MapFormula.displayName = "MapFormula";
 function MapFormulaDropdown({

package/dist/esm/components/DataBuilder/Formula/mergeObjects.mjs

@@ -2,31 +2,30 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { schemaWithTitle } from '@integration-app/sdk';
-import { DrilldownBlockContentWrapper } from '../../DataBuilderUI/index.mjs';
+import { EditorTagBadge, EditorTagBadgeIcon } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
 import { DataInput } from '../../DataInput/index.mjs';
-import { Formula, Variable, VariableSvgIcon } from '../../Formula/index.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 import useDataBuilderField from '../field-context.mjs';
 
 const MergeObjectsFormula = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxs(Variable, { children: [
-      /* @__PURE__ */ jsx(VariableSvgIcon, { type: SvgIconType.Function }),
+    return /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Function }),
       " Merge objects"
-    ] }) });
+    ] });
   }
 );
 MergeObjectsFormula.displayName = "MergeObjectsFormula";
 function MergeObjectsDropdown({ onChange, formula }) {
   const { field } = useDataBuilderField();
-  return /* @__PURE__ */ jsx(DrilldownBlockContentWrapper, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     DataInput,
     {
       schema: schemaWithTitle(
@@ -42,7 +41,7 @@ function MergeObjectsDropdown({ onChange, formula }) {
         onChange?.({ $mergeObjects: value });
       }
     }
-  ) });
+  );
 }
 
 export { MergeObjectsDropdown, MergeObjectsFormula as default };

package/dist/esm/components/DataBuilder/Formula/noUi.mjs

@@ -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/esm/components/DataBuilder/Formula/tpl.mjs

@@ -2,17 +2,16 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { ComboBoxTag } from '../../ComboBoxElements/ComboBoxTag.mjs';
+import { EditorTagBadge } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
 
-const TplFormula = forwardRef((_, ref) => {
-  console.error("TplFormula: Unsupported formula type used");
-  return /* @__PURE__ */ jsx(ComboBoxTag, { ref, disabled: true, children: "Unsupported formula type" });
+const TplFormula = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(EditorTagBadge, { variant: "static-value", ref, onDelete: props.onDelete, children: "Unsupported formula type" });
 });
 TplFormula.displayName = "TplFormula";
 

package/dist/esm/components/DataBuilder/Formula/var.mjs

@@ -2,59 +2,30 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { forwardRef, Fragment as Fragment$1 } from 'react';
-import { getIconUriForLocator, getNameComponentsForLocator, getFullNameForLocator } from '@integration-app/sdk';
-import { clsx } from 'clsx';
-import classes from './styles.module.css.mjs';
-import { ComboBoxTag } from '../../ComboBoxElements/ComboBoxTag.mjs';
-import { Tag } from '../../Tag/Tag.mjs';
-import '../../Tag/TagPlaceholder.mjs';
-import { SegmentSeparator } from '../../Tag/SegmentSeparator.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { getNameComponentsForLocator, getFullNameForLocator } from '@integration-app/sdk';
+import { EditorTagBadge, EditorTagBadgeIcon } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
+import { NestedBadgeValue } from '../../ComboBox/Badges/EditorTagBadge/NestedBadgeValue.mjs';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
+import { Tooltip } from '../../Tooltip/index.mjs';
 
 const VarFormula = forwardRef((props, ref) => {
-  const {
-    formula,
-    variablesSchema,
-    // We do not use the `optionFactories` prop, but we need to remove it from restProps
-    optionFactories: _of,
-    ...restProps
-  } = props;
-  const iconUri = getIconUriForLocator(variablesSchema, formula.locator);
+  const { formula, variablesSchema } = props;
   const nameComponents = getNameComponentsForLocator(variablesSchema, formula.locator);
   if (nameComponents === void 0) {
-    return /* @__PURE__ */ jsx(ComboBoxTag, { invalid: true, tooltip: "Source variable doesn't exist", children: formula.locator });
-  }
-  const nameComponentTags = nameComponents.map((t, i) => /* @__PURE__ */ jsx("span", { className: classes.name, children: t }, i));
-  if (iconUri) {
-    nameComponentTags.unshift(/* @__PURE__ */ jsx(Tag.Image, { src: iconUri }));
+    return /* @__PURE__ */ jsx(Tooltip, { tooltip: "Source variable doesn't exist", usePortal: true, children: /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "error", onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Unlink }),
+      formula.locator
+    ] }) });
   }
   const fullName = getFullNameForLocator(variablesSchema, formula.locator) || "Unknown Var";
-  return /* @__PURE__ */ jsx(ComboBoxTag, { ref, disabled: props.disabled, ...restProps, children: /* @__PURE__ */ jsx(VarFormulaName, { nameComponents: nameComponentTags, fullName }) });
+  return /* @__PURE__ */ jsx(EditorTagBadge, { ref, disabled: props.disabled, onClick: props.onClick, onDelete: props.onDelete, children: /* @__PURE__ */ jsx(NestedBadgeValue, { nameChunks: nameComponents, fullName }) });
 });
 VarFormula.displayName = "VarFormula";
-function VarFormulaName({ nameComponents, fullName }) {
-  if (nameComponents.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, { children: "Error: undefined" });
-  }
-  if (nameComponents.length <= 2) {
-    const reducesComponents = nameComponents.length === 1 ? [nameComponents] : nameComponents.reduce((prev, curr) => [prev, /* @__PURE__ */ jsx(SegmentSeparator, {}), curr]);
-    return /* @__PURE__ */ jsx("span", { className: classes.valueRef, title: fullName, children: reducesComponents.map((segment, i) => /* @__PURE__ */ jsx(Fragment$1, { children: segment }, i)) });
-  }
-  const { 0: first, [nameComponents.length - 1]: last, ...rest } = nameComponents;
-  const middle = Object.values(rest);
-  return /* @__PURE__ */ jsxs("span", { className: clsx(classes.valueRef, classes.valueRefTruncate), title: fullName, children: [
-    /* @__PURE__ */ jsx("span", { className: classes.visibleSegment, children: first }),
-    /* @__PURE__ */ jsx("span", { className: classes.truncatedSegment, children: middle.map((segment, idx) => [/* @__PURE__ */ jsx(SegmentSeparator, {}, idx), segment]).flat().map((segment, i) => /* @__PURE__ */ jsx(Fragment$1, { children: segment }, i)) }),
-    /* @__PURE__ */ jsxs("span", { className: classes.visibleSegment, children: [
-      /* @__PURE__ */ jsx(SegmentSeparator, {}),
-      last
-    ] })
-  ] });
-}
 
 export { VarFormula as default };

package/dist/esm/components/DataBuilder/Nested/ArrayItems.mjs

@@ -2,13 +2,18 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
-import { NestedLevel, Row, Cell } from '../../DataBuilderUI/index.mjs';
+import '../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../DataBuilderUI/ActionBar.mjs';
+import { Cell } from '../../DataBuilderUI/Cell.mjs';
+import { NestedLevel } from '../../DataBuilderUI/NestedLevel.mjs';
+import { Row } from '../../DataBuilderUI/Row.mjs';
+import '../../DataBuilderUI/Title.mjs';
 import { DataBuilderFieldProvider } from '../field-context.mjs';
 import { FieldDelete } from '../FieldDelete.mjs';
 import DataBuilderFormFieldValue from '../FieldValue/index.mjs';
@@ -63,8 +68,8 @@ function DataComposerFieldArrayItem({ field, onChange, onDelete = void 0 }) {
   }
   return /* @__PURE__ */ jsxs(DataBuilderFieldProvider, { field, children: [
     /* @__PURE__ */ jsx(NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxs(Row, { children: [
-      /* @__PURE__ */ jsx(Cell.Icon, { type: SvgIconType.Array }),
-      /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field, onChange: handleChange }) }),
+      /* @__PURE__ */ jsx(Cell, { type: "icon", icon: SvgIconType.Array }),
+      /* @__PURE__ */ jsx(Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field, onChange: handleChange }) }),
       onDelete && /* @__PURE__ */ jsx(FieldDelete, { onClick: onDelete })
     ] }) }),
     /* @__PURE__ */ jsx(DataBuilderFormNested, { field, onChange: handleChange })

package/dist/esm/components/DataBuilder/Nested/FieldControlPanel/AddingFieldSelector.mjs

@@ -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';
 
@@ -10,7 +10,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { getFullNameForLocator } from '@integration-app/sdk';
 import { SvgIconType } from '../../../SvgIcon/svg-icon-type.mjs';
 import { ComboBox } from '../../../ComboBox/ComboBox.mjs';
-import { Row, Cell } from '../../../DataBuilderUI/index.mjs';
+import '../../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../../DataBuilderUI/ActionBar.mjs';
+import { Cell } from '../../../DataBuilderUI/Cell.mjs';
+import 'clsx';
+import '../../../DataBuilderUI/styles.module.css.mjs';
+import { Row } from '../../../DataBuilderUI/Row.mjs';
+import '../../../DataBuilderUI/Title.mjs';
 import { TagPlaceholder } from '../../../Tag/TagPlaceholder.mjs';
 import { isObjectAllowedAdditionalProperties, fieldLabel } from '../../data-field.mjs';
 
@@ -33,7 +39,7 @@ function AddingFieldSelector({
     });
   }
   return /* @__PURE__ */ jsxs(Row, { children: [
-    /* @__PURE__ */ jsx(Cell.Combobox, { width: "14rem", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Cell, { type: "combobox", children: /* @__PURE__ */ jsx(
       ComboBox,
       {
         value: void 0,
@@ -47,7 +53,7 @@ function AddingFieldSelector({
         autoOpen: true
       }
     ) }),
-    /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, disabled: true, children: /* @__PURE__ */ jsx(TagPlaceholder, { children: "Select value" }) })
+    /* @__PURE__ */ jsx(Cell, { type: "combobox", span: "grow", disabled: true, children: /* @__PURE__ */ jsx(TagPlaceholder, { children: "Select value" }) })
   ] });
 }
 

package/dist/esm/components/DataBuilder/Nested/FieldControlPanel/ControlPanel.mjs

@@ -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,13 +12,18 @@ import useDataBuilder from '../../data-builder-context.mjs';
 import { SvgIconType } from '../../../SvgIcon/svg-icon-type.mjs';
 import useEventStopPropagation from '../../../../helpers/hooks/useEventStopPropagation.mjs';
 import { AddingFieldSelector } from './AddingFieldSelector.mjs';
-import '../../../DataBuilderUI/index.mjs';
+import { FieldControlPanel } from '../../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../../DataBuilderUI/ActionBar.mjs';
+import '../../../DataBuilderUI/Cell.mjs';
+import 'clsx';
+import '../../../DataBuilderUI/styles.module.css.mjs';
+import '../../../DataBuilderUI/Row.mjs';
+import '../../../DataBuilderUI/Title.mjs';
 import { SvgIcon } from '../../../SvgIcon/index.mjs';
 import { Truncate } from '../../../Truncate/index.mjs';
 import { isFieldVisible, isObjectAllowedAdditionalProperties, DEFAULT_FIELD_KEY } from '../../data-field.mjs';
 import useDataBuilderField from '../../field-context.mjs';
 import { useDataBuilderFieldCanUseVarFromVariables } from '../../hooks.mjs';
-import { FieldControlPanel } from '../../../DataBuilderUI/FieldControlPanel/index.mjs';
 
 function ControlPanel({
   field,
@@ -87,7 +92,7 @@ function GroupUseFromVariables({ labelOr }) {
   const Wrapper = labelOr ? FieldControlPanel : Fragment$1;
   const wrapperProps = labelOr ? { noWrap: true } : {};
   return /* @__PURE__ */ jsxs(Wrapper, { ...wrapperProps, children: [
-    labelOr && /* @__PURE__ */ jsx(FieldControlPanel.Text, { children: "or" }),
+    labelOr && /* @__PURE__ */ jsx(FieldControlPanel.Delimiter, { children: "or" }),
     /* @__PURE__ */ jsx(FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsx(FieldControlPanel.Button, { onClick: handleUseVarsFromVariables, children: /* @__PURE__ */ jsx(Truncate, { children: title }) }) })
   ] });
 }