@integration-app/react 2.21.0 → 2.22.1

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

@@ -2,17 +2,24 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { getFormula, DataBuilderFormulaType, Formula } from '@integration-app/sdk';
-import useEventStopPropagation from '../../../helpers/hooks/useEventStopPropagation.mjs';
+import { css } from '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
 import { ComboBox } from '../../ComboBox/ComboBox.mjs';
-import { NestedLevel, Row, Cell, ActionBar } 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 { makeSubField } from '../data-field.mjs';
 import { DataBuilderFieldProvider } from '../field-context.mjs';
+import { FieldDelete } from '../FieldDelete.mjs';
 import DataBuilderFormFieldValue from '../FieldValue/index.mjs';
 import { DataBuilderFieldControlPanel } from '../Nested/FieldControlPanel/index.mjs';
 
@@ -141,7 +148,7 @@ function EvalCondition({
   const hasOperand = operator && operator.hasOperand;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxs(Row, { children: [
-      /* @__PURE__ */ jsx(Cell.Combobox, { children: /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field: valueField, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Cell, { type: "combobox", className: css({ maxW: "2/6", flexGrow: "3" }), children: /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field: valueField, children: /* @__PURE__ */ jsx(
         ComboBox,
         {
           placeholder: "Value",
@@ -152,16 +159,25 @@ function EvalCondition({
           schema: void 0
         }
       ) }) }),
-      /* @__PURE__ */ jsx(Cell.Combobox, { disabled: !value, children: value && /* @__PURE__ */ jsx(
-        ComboBox,
+      /* @__PURE__ */ jsx(
+        Cell,
         {
-          value: operator?.key,
-          options: operatorOptions,
-          onChange: handleOperatorChange
+          type: "combobox",
+          disabled: !value,
+          "data-formula": "condition",
+          className: css({ minW: "10", flexGrow: "2", pt: "1px" }),
+          children: value && /* @__PURE__ */ jsx(
+            ComboBox,
+            {
+              value: operator?.key,
+              options: operatorOptions,
+              onChange: handleOperatorChange
+            }
+          )
         }
-      ) }),
-      /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, disabled: !hasOperand, children: hasOperand && /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field: operandField, children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: operandField, onChange: handleOperandChange, allowScalarArray: true }) }) }),
-      onDelete && /* @__PURE__ */ jsx(ActionBar, { children: /* @__PURE__ */ jsx(ActionBar.DeleteButton, { onClick: useEventStopPropagation(onDelete) }) })
+      ),
+      /* @__PURE__ */ jsx(Cell, { type: "combobox", disabled: !hasOperand, className: css({ maxW: "3/6", flexGrow: "4" }), children: hasOperand && /* @__PURE__ */ jsx(DataBuilderFieldProvider, { field: operandField, children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: operandField, onChange: handleOperandChange, allowScalarArray: true }) }) }),
+      onDelete && /* @__PURE__ */ jsx(FieldDelete, { onClick: onDelete })
     ] }) }),
     !isNested && /* @__PURE__ */ jsx(DataBuilderFieldControlPanel, { field, onAdd: handleTransformToAnd })
   ] });

package/dist/esm/components/DataBuilder/DataBuilderFormField.mjs

@@ -2,15 +2,20 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { isFormula } from '@integration-app/sdk';
-import { isDefinedValue } from '../ComboBox/Value/isDefinedValue.mjs';
-import { NestedLevel, Row, Cell } from '../DataBuilderUI/index.mjs';
+import { isDefinedValue } from '../ComboBox/Badges/isDefinedValue.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 useDataBuilder from './data-builder-context.mjs';
 import { isFieldVisible } from './data-field.mjs';
 import useDataBuilderField, { DataBuilderFieldProvider } from './field-context.mjs';
@@ -80,8 +85,8 @@ function DataBuilderFieldContent({ onChange, onKeyChange, onDelete, onEnter }) {
     showValue = false;
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(NestedLevel, { level: field.level, children: isFieldVisible(field) && /* @__PURE__ */ jsxs(Row, { short: !showValue, children: [
-      (isDefinedValue(field.key) || field.schema?.title) && /* @__PURE__ */ jsx(Cell.Name, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(NestedLevel, { level: field.level, children: isFieldVisible(field) && /* @__PURE__ */ jsxs(Row, { span: !showValue ? "short" : "default", children: [
+      (isDefinedValue(field.key) || field.schema?.title) && /* @__PURE__ */ jsx(Cell, { type: "name", children: /* @__PURE__ */ jsx(
         FieldName,
         {
           field,
@@ -91,7 +96,7 @@ function DataBuilderFieldContent({ onChange, onKeyChange, onDelete, onEnter }) {
           typeSelectorSlot: /* @__PURE__ */ jsx(FieldTypeSelector, { onChange: handleChange, onSchemaChange: handleLocalSchemaTypeChange })
         }
       ) }),
-      showValue && /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, children: /* @__PURE__ */ jsx(FieldDataInput, { onChange: handleChange }) }),
+      showValue && /* @__PURE__ */ jsx(Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsx(FieldDataInput, { onChange: handleChange }) }),
       field.isDeletable && !isReadOnly && !isFieldFrozen && /* @__PURE__ */ jsx(FieldDelete, { onClick: onDelete })
     ] }) }),
     /* @__PURE__ */ jsx(DataBuilderFormNested, { field, onChange: handleChange })

package/dist/esm/components/DataBuilder/FieldDelete.mjs

@@ -2,21 +2,28 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
 import { SvgIconType } from '../SvgIcon/svg-icon-type.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
 import useEventStopPropagation from '../../helpers/hooks/useEventStopPropagation.mjs';
-import { ActionBar } from '../DataBuilderUI/index.mjs';
-import { SvgIcon } from '../SvgIcon/index.mjs';
+import '../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../DataBuilderUI/ActionBar.mjs';
+import { CellButton } from '../DataBuilderUI/Cell.mjs';
+import 'clsx';
+import '../DataBuilderUI/styles.module.css.mjs';
+import '../DataBuilderUI/Row.mjs';
+import '../DataBuilderUI/Title.mjs';
 
 function FieldDelete({ onClick }) {
+  const handleClick = useEventStopPropagation(onClick);
   if (!onClick) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ActionBar, { children: /* @__PURE__ */ jsx(ActionBar.DeleteButton, { onClick: useEventStopPropagation(onClick), children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Close }) }) });
+  return /* @__PURE__ */ jsx(Tooltip, { tooltip: "Delete", usePortal: true, children: /* @__PURE__ */ jsx(CellButton, { type: "icon", icon: SvgIconType.Close, onClick: handleClick, "aria-label": "Delete" }) });
 }
 
 export { FieldDelete };

package/dist/esm/components/DataBuilder/FieldDescription.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
@@ -12,7 +12,7 @@ import { Tooltip } from '../Tooltip/index.mjs';
 
 function FieldDescription({ text }) {
   if (!text) return null;
-  return /* @__PURE__ */ jsx(Tooltip, { tooltip: text, offset: [0, 4], placement: "bottom-start", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Tooltip, { tooltip: text, offset: [0, 4], placement: "bottom-start", usePortal: true, children: /* @__PURE__ */ jsx(
     Text,
     {
       as: "span",

package/dist/esm/components/DataBuilder/FieldList.mjs

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

package/dist/esm/components/DataBuilder/FieldName/FieldNameInput.mjs

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

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

@@ -2,14 +2,20 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { FieldNameInput } from './FieldNameInput.mjs';
-import { Title } from '../../DataBuilderUI/index.mjs';
+import '../../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 { Title } from '../../DataBuilderUI/Title.mjs';
 import useDataBuilder from '../data-builder-context.mjs';
 import { fieldLabel } from '../data-field.mjs';
 import { FieldDescription } from '../FieldDescription.mjs';

package/dist/esm/components/DataBuilder/FieldTypeSelector/convertableSchemaToSchema.mjs

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
@@ -31,6 +31,7 @@ const recipe = sva({
       display: "flex",
       alignItems: "center",
       color: "neutral.11",
+      fontWeight: "medium",
       gap: "0.5",
       _hover: {
         bg: "neutral.2"

package/dist/esm/components/DataBuilder/FieldValue/Array.mjs

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

package/dist/esm/components/DataBuilder/FieldValue/Default.mjs

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

package/dist/esm/components/DataBuilder/FieldValue/ScalarArray.mjs

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

package/dist/esm/components/DataBuilder/FieldValue/ScalarArray.module.css.mjs

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
@@ -23,7 +23,7 @@ function DataBuilderFormFieldValue({
     return /* @__PURE__ */ jsx(ScalarArrayFieldValue, { field, onChange });
   }
   if (field.schema?.type === "array") {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
       ArrayFieldValue,
       {
         field,
@@ -31,7 +31,7 @@ function DataBuilderFormFieldValue({
         refsToIgnoreClick,
         topDropdownPanelComponent
       }
-    );
+    ) });
   } else {
     return /* @__PURE__ */ jsx(
       DefaultFieldValue,

package/dist/esm/components/DataBuilder/FilterInput.mjs

@@ -2,14 +2,19 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
+import 'react';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import { Box } from '../../styled-system/jsx/box.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
 import DataBuilderCondition from './Condition/index.mjs';
 import { DataBuilderProvider } from './data-builder-context.mjs';
-import classes from './styles.module.css.mjs';
 import { makeDataField } from './index.mjs';
 
 function FilterInput({
@@ -21,7 +26,7 @@ function FilterInput({
     value,
     variablesSchema
   });
-  return /* @__PURE__ */ jsx(DataBuilderProvider, { topLevelField: field, children: /* @__PURE__ */ jsx("div", { className: classes.wrapper, children: /* @__PURE__ */ jsx(DataBuilderCondition, { field, onChange }) }) });
+  return /* @__PURE__ */ jsx(DataBuilderProvider, { topLevelField: field, children: /* @__PURE__ */ jsx(Box, { maxW: "full", children: /* @__PURE__ */ jsx(DataBuilderCondition, { field, onChange }) }) });
 }
 
 export { FilterInput };

package/dist/esm/components/DataBuilder/Form.mjs

@@ -2,15 +2,20 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
 import deepEqual from 'fast-deep-equal';
+import 'react';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import { Box } from '../../styled-system/jsx/box.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
 import { DataBuilderProvider } from './data-builder-context.mjs';
 import { DataBuilderFormField } from './DataBuilderFormField.mjs';
-import classes from './styles.module.css.mjs';
 
 function DataBuilderForm({
   field,
@@ -45,7 +50,7 @@ function DataBuilderForm({
       onAddVariable,
       collapsedDataBuilder: collapsed,
       initialVisibleFieldCount: fieldsToShow,
-      children: /* @__PURE__ */ jsx("div", { className: classes.wrapper, children: /* @__PURE__ */ jsx(DataBuilderFormField, { field, onChange: handleOnChange }) })
+      children: /* @__PURE__ */ jsx(Box, { maxW: "full", children: /* @__PURE__ */ jsx(DataBuilderFormField, { field, onChange: handleOnChange }) })
     }
   );
 }

package/dist/esm/components/DataBuilder/Formula/{case.mjs → case-formula.mjs}

@@ -2,33 +2,31 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 'use client';
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { DataBuilderFormulaType, schemaWithTitle } from '@integration-app/sdk';
+import { EditorTagBadge, EditorTagBadgeIcon } from '../../ComboBox/Badges/EditorTagBadge/index.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
-import useEventStopPropagation from '../../../helpers/hooks/useEventStopPropagation.mjs';
 import '../../../styled-system/css/css.mjs';
 import '../../../styled-system/helpers.mjs';
 import { sva } from '../../../styled-system/css/sva.mjs';
 import { Button } from '../../../ui-kit/button.mjs';
-import classes from './styles.module.css.mjs';
-import { ComboBoxTag } from '../../ComboBoxElements/ComboBoxTag.mjs';
-import { ActionBar } from '../../DataBuilderUI/index.mjs';
 import { Truncate } from '../../Truncate/index.mjs';
 import DataBuilderCondition from '../Condition/index.mjs';
 import { makeSubField } from '../data-field.mjs';
 import { DataBuilderFormField } from '../DataBuilderFormField.mjs';
 import useDataBuilderField from '../field-context.mjs';
 
-const addCaseRecipe = sva({
-  className: "add-case",
-  slots: ["button"],
+const caseFormulaRecipe = sva({
+  className: "case-formula",
+  slots: ["container", "add-button"],
   base: {
-    button: {
+    container: { mt: "2" },
+    "add-button": {
       w: "fit-content",
       h: "fit-content",
       rounded: "xl",
@@ -39,13 +37,16 @@ const addCaseRecipe = sva({
     }
   }
 });
-const CaseFormula = forwardRef((_props, ref) => {
-  return /* @__PURE__ */ jsx(ComboBoxTag, { ref, icon: SvgIconType.Array, variant: "lookup", children: /* @__PURE__ */ jsx(Truncate, { children: "Conditional value" }) });
+const CaseFormula = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxs(EditorTagBadge, { ref, variant: "value", onDelete: props.onDelete, children: [
+    /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Array }),
+    /* @__PURE__ */ jsx(Truncate, { children: "Conditional value" })
+  ] });
 });
 CaseFormula.displayName = "CaseFormula";
 function CaseFormulaDropdown({ formula, onChange }) {
   const { field } = useDataBuilderField();
-  const styles = addCaseRecipe();
+  const styles = caseFormulaRecipe();
   if (formula?.type !== DataBuilderFormulaType.CASE) {
     return /* @__PURE__ */ jsx("span", { children: "Unexpected value for Case drilldown. Something went wrong." });
   }
@@ -128,7 +129,7 @@ function CaseFormulaDropdown({ formula, onChange }) {
       },
       index
     )),
-    /* @__PURE__ */ jsx(Button, { onClick: handleNewCase, variant: "outline", colorPalette: "gray", size: "sm", className: styles.button, children: "+ Add Case" }),
+    /* @__PURE__ */ jsx(Button, { onClick: handleNewCase, variant: "outline", colorPalette: "gray", size: "sm", className: styles["add-button"], children: "+ Add Case" }),
     /* @__PURE__ */ jsx(DataBuilderFormField, { field: defaultCaseField, onChange: handleDefaultValueChange })
   ] });
 }
@@ -138,6 +139,7 @@ function CaseItem({
   onChange,
   onDelete
 }) {
+  const styles = caseFormulaRecipe();
   function handleValueChange(value) {
     return onChange({
       ...item ?? {},
@@ -155,7 +157,8 @@ function CaseItem({
     value: item?.value,
     isInSchema: true,
     schema: field.schema?.properties?.value,
-    level: 1
+    level: 1,
+    isDeletable: false
   });
   function handleFilterChange(value) {
     return onChange({
@@ -163,12 +166,9 @@ function CaseItem({
       filter: value
     });
   }
-  return /* @__PURE__ */ jsxs("div", { className: classes.caseContainer, children: [
-    /* @__PURE__ */ jsxs("div", { className: classes.field, children: [
-      /* @__PURE__ */ jsx(DataBuilderFormField, { field: valueField, onChange: handleValueChange }),
-      /* @__PURE__ */ jsx("div", { className: classes.deleteButton, children: /* @__PURE__ */ jsx(ActionBar.DeleteButton, { onClick: useEventStopPropagation(onDelete) }) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "ml-4", children: /* @__PURE__ */ jsx(DataBuilderCondition, { field: filterField, onChange: handleFilterChange }) })
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsx(DataBuilderFormField, { field: valueField, onChange: handleValueChange, onDelete }),
+    /* @__PURE__ */ jsx(DataBuilderCondition, { field: filterField, onChange: handleFilterChange })
   ] });
 }
 

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

@@ -2,23 +2,23 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 '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 { makeDataField } from '../index.mjs';
 import { DataBuilderFormField } from '../DataBuilderFormField.mjs';
 
 const ConcatFormula = 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 }),
       " Combine strings"
-    ] }) });
+    ] });
   }
 );
 ConcatFormula.displayName = "ConcatFormula";

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

@@ -0,0 +1,29 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.22.1
+ */
+'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 '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import '../../../styled-system/jsx/is-valid-prop.mjs';
+import { Flex } from '../../../styled-system/jsx/flex.mjs';
+import '../../../styled-system/patterns/visually-hidden.mjs';
+
+const DeprecatedFormula = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "static-value", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+    /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.Function }),
+    " Deprecated formula"
+  ] });
+});
+function DeprecatedFormulaDropdown(_) {
+  return /* @__PURE__ */ jsx(Flex, { flexDirection: "column", justifyContent: "center", fontWeight: "medium", color: "slate.12", py: "4", children: "This formula is deprecated and cannot be edited." });
+}
+
+export { DeprecatedFormula, DeprecatedFormulaDropdown };

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

@@ -2,23 +2,23 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 '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 DomainFromEmailFormula = 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 }),
       " Domain from email"
-    ] }) });
+    ] });
   }
 );
 DomainFromEmailFormula.displayName = "DomainFromEmailFormula";

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

@@ -2,23 +2,23 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 '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 ExtractDateFormula = 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 date"
-    ] }) });
+    ] });
   }
 );
 function ExtractDateFormulaDropdown(props) {

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

@@ -2,23 +2,23 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.1
  */
 '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 ExtractTimeFormula = 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 time"
-    ] }) });
+    ] });
   }
 );
 function ExtractTimeFormulaDropdown(props) {