@integration-app/react 2.21.0 → 2.22.0

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.0
  */
 'use client';
 
@@ -12,13 +12,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var sdk = require('@integration-app/sdk');
-var useEventStopPropagation = require('../../../helpers/hooks/useEventStopPropagation.cjs');
+var css = require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
 var ComboBox = require('../../ComboBox/ComboBox.cjs');
-var index = require('../../DataBuilderUI/index.cjs');
+require('../../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../../DataBuilderUI/Cell.cjs');
+var NestedLevel = require('../../DataBuilderUI/NestedLevel.cjs');
+var Row = require('../../DataBuilderUI/Row.cjs');
+require('../../DataBuilderUI/Title.cjs');
 var dataField = require('../data-field.cjs');
 var fieldContext = require('../field-context.cjs');
-var index$1 = require('../FieldValue/index.cjs');
-var index$2 = require('../Nested/FieldControlPanel/index.cjs');
+var FieldDelete = require('../FieldDelete.cjs');
+var index = require('../FieldValue/index.cjs');
+var index$1 = require('../Nested/FieldControlPanel/index.cjs');
 
 function DataBuilderCondition({
   field,
@@ -80,7 +87,7 @@ function And({ field, onChange }) {
       },
       idx
     )),
-    /* @__PURE__ */ jsxRuntime.jsx(index$2.DataBuilderFieldControlPanel, { field, onAdd: handleAddCondition })
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.DataBuilderFieldControlPanel, { field, onAdd: handleAddCondition })
   ] });
 }
 function EvalCondition({
@@ -144,8 +151,8 @@ function EvalCondition({
   }
   const hasOperand = operator && operator.hasOperand;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { children: /* @__PURE__ */ jsxRuntime.jsx(fieldContext.DataBuilderFieldProvider, { field: valueField, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(NestedLevel.NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", className: css.css({ maxW: "2/6", flexGrow: "3" }), children: /* @__PURE__ */ jsxRuntime.jsx(fieldContext.DataBuilderFieldProvider, { field: valueField, children: /* @__PURE__ */ jsxRuntime.jsx(
         ComboBox.ComboBox,
         {
           placeholder: "Value",
@@ -156,18 +163,27 @@ function EvalCondition({
           schema: void 0
         }
       ) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { disabled: !value, children: value && /* @__PURE__ */ jsxRuntime.jsx(
-        ComboBox.ComboBox,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Cell.Cell,
         {
-          value: operator?.key,
-          options: operatorOptions,
-          onChange: handleOperatorChange
+          type: "combobox",
+          disabled: !value,
+          "data-formula": "condition",
+          className: css.css({ minW: "10", flexGrow: "2", pt: "1px" }),
+          children: value && /* @__PURE__ */ jsxRuntime.jsx(
+            ComboBox.ComboBox,
+            {
+              value: operator?.key,
+              options: operatorOptions,
+              onChange: handleOperatorChange
+            }
+          )
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, disabled: !hasOperand, children: hasOperand && /* @__PURE__ */ jsxRuntime.jsx(fieldContext.DataBuilderFieldProvider, { field: operandField, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { field: operandField, onChange: handleOperandChange, allowScalarArray: true }) }) }),
-      onDelete && /* @__PURE__ */ jsxRuntime.jsx(index.ActionBar, { children: /* @__PURE__ */ jsxRuntime.jsx(index.ActionBar.DeleteButton, { onClick: useEventStopPropagation.default(onDelete) }) })
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", disabled: !hasOperand, className: css.css({ maxW: "3/6", flexGrow: "4" }), children: hasOperand && /* @__PURE__ */ jsxRuntime.jsx(fieldContext.DataBuilderFieldProvider, { field: operandField, children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { field: operandField, onChange: handleOperandChange, allowScalarArray: true }) }) }),
+      onDelete && /* @__PURE__ */ jsxRuntime.jsx(FieldDelete.FieldDelete, { onClick: onDelete })
     ] }) }),
-    !isNested && /* @__PURE__ */ jsxRuntime.jsx(index$2.DataBuilderFieldControlPanel, { field, onAdd: handleTransformToAnd })
+    !isNested && /* @__PURE__ */ jsxRuntime.jsx(index$1.DataBuilderFieldControlPanel, { field, onAdd: handleTransformToAnd })
   ] });
 }
 

package/dist/cjs/components/DataBuilder/DataBuilderFormField.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.0
  */
 'use client';
 
@@ -11,16 +11,21 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sdk = require('@integration-app/sdk');
-var isDefinedValue = require('../ComboBox/Value/isDefinedValue.cjs');
-var index = require('../DataBuilderUI/index.cjs');
+var isDefinedValue = require('../ComboBox/Badges/isDefinedValue.cjs');
+require('../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../DataBuilderUI/Cell.cjs');
+var NestedLevel = require('../DataBuilderUI/NestedLevel.cjs');
+var Row = require('../DataBuilderUI/Row.cjs');
+require('../DataBuilderUI/Title.cjs');
 var dataBuilderContext = require('./data-builder-context.cjs');
 var dataField = require('./data-field.cjs');
 var fieldContext = require('./field-context.cjs');
 var FieldDelete = require('./FieldDelete.cjs');
-var index$1 = require('./FieldName/index.cjs');
-var index$2 = require('./FieldTypeSelector/index.cjs');
+var index = require('./FieldName/index.cjs');
+var index$1 = require('./FieldTypeSelector/index.cjs');
 var convertableSchemaToSchema = require('./FieldTypeSelector/convertableSchemaToSchema.cjs');
-var index$3 = require('./FieldValue/index.cjs');
+var index$2 = require('./FieldValue/index.cjs');
 var hooks = require('./hooks.cjs');
 var Nested = require('./Nested.cjs');
 
@@ -82,18 +87,18 @@ function DataBuilderFieldContent({ onChange, onKeyChange, onDelete, onEnter }) {
     showValue = false;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.NestedLevel, { level: field.level, children: dataField.isFieldVisible(field) && /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { short: !showValue, children: [
-      (isDefinedValue.isDefinedValue(field.key) || field.schema?.title) && /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Name, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        index$1.FieldName,
+    /* @__PURE__ */ jsxRuntime.jsx(NestedLevel.NestedLevel, { level: field.level, children: dataField.isFieldVisible(field) && /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { span: !showValue ? "short" : "default", children: [
+      (isDefinedValue.isDefinedValue(field.key) || field.schema?.title) && /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "name", children: /* @__PURE__ */ jsxRuntime.jsx(
+        index.FieldName,
         {
           field,
           onKeyChange: handleKeyChange,
           onEnter: handleEnterKey,
           onEsc: handleEscKey,
-          typeSelectorSlot: /* @__PURE__ */ jsxRuntime.jsx(index$2.FieldTypeSelector, { onChange: handleChange, onSchemaChange: handleLocalSchemaTypeChange })
+          typeSelectorSlot: /* @__PURE__ */ jsxRuntime.jsx(index$1.FieldTypeSelector, { onChange: handleChange, onSchemaChange: handleLocalSchemaTypeChange })
         }
       ) }),
-      showValue && /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(FieldDataInput, { onChange: handleChange }) }),
+      showValue && /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsxRuntime.jsx(FieldDataInput, { onChange: handleChange }) }),
       field.isDeletable && !isReadOnly && !isFieldFrozen && /* @__PURE__ */ jsxRuntime.jsx(FieldDelete.FieldDelete, { onClick: onDelete })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Nested.default, { field, onChange: handleChange })
@@ -113,7 +118,7 @@ function FieldDataInput({ onChange }) {
       anyOf: void 0
     }
   } : field;
-  return /* @__PURE__ */ jsxRuntime.jsx(index$3.default, { field: fieldWithDefinedSchema, onChange: handleChange });
+  return /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { field: fieldWithDefinedSchema, onChange: handleChange });
 }
 
 exports.DataBuilderFormField = DataBuilderFormField;

package/dist/cjs/components/DataBuilder/FieldDelete.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.0
  */
 'use client';
 
@@ -10,15 +10,22 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var index = require('../Tooltip/index.cjs');
 var useEventStopPropagation = require('../../helpers/hooks/useEventStopPropagation.cjs');
-var index = require('../DataBuilderUI/index.cjs');
-var index$1 = require('../SvgIcon/index.cjs');
+require('../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../DataBuilderUI/Cell.cjs');
+require('clsx');
+require('../DataBuilderUI/styles.module.css.cjs');
+require('../DataBuilderUI/Row.cjs');
+require('../DataBuilderUI/Title.cjs');
 
 function FieldDelete({ onClick }) {
+  const handleClick = useEventStopPropagation.default(onClick);
   if (!onClick) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(index.ActionBar, { children: /* @__PURE__ */ jsxRuntime.jsx(index.ActionBar.DeleteButton, { onClick: useEventStopPropagation.default(onClick), children: /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: svgIconType.SvgIconType.Close }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip: "Delete", usePortal: true, children: /* @__PURE__ */ jsxRuntime.jsx(Cell.CellButton, { type: "icon", icon: svgIconType.SvgIconType.Close, onClick: handleClick, "aria-label": "Delete" }) });
 }
 
 exports.FieldDelete = FieldDelete;

package/dist/cjs/components/DataBuilder/FieldDescription.cjs

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

package/dist/cjs/components/DataBuilder/FieldList.cjs

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

package/dist/cjs/components/DataBuilder/FieldName/FieldNameInput.cjs

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.0
  */
 'use client';
 
@@ -11,7 +11,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var FieldNameInput = require('./FieldNameInput.cjs');
-var index = require('../../DataBuilderUI/index.cjs');
+require('../../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../../DataBuilderUI/ActionBar.cjs');
+require('../../DataBuilderUI/Cell.cjs');
+require('clsx');
+require('../../DataBuilderUI/styles.module.css.cjs');
+require('../../DataBuilderUI/Row.cjs');
+var Title = require('../../DataBuilderUI/Title.cjs');
 var dataBuilderContext = require('../data-builder-context.cjs');
 var dataField = require('../data-field.cjs');
 var FieldDescription = require('../FieldDescription.cjs');
@@ -31,7 +37,7 @@ function FieldName({
   if (field.isInSchema || field.key === void 0) {
     const isErrorField = field?.valueLocator && (errorFieldsLocators || []).includes(field.valueLocator);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      index.Title,
+      Title.Title,
       {
         required: field.isRequired,
         hasValue: !!field.value || field.value === false,
@@ -43,7 +49,7 @@ function FieldName({
     );
   } else {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      index.Title,
+      Title.Title,
       {
         typeSelectorSlot,
         rightSlot: rightSlot || /* @__PURE__ */ jsxRuntime.jsx(FieldDescription.FieldDescription, { text: field.schema?.description }),

package/dist/cjs/components/DataBuilder/FieldTypeSelector/convertableSchemaToSchema.cjs

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

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

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

package/dist/cjs/components/DataBuilder/FieldValue/Array.cjs

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

package/dist/cjs/components/DataBuilder/FieldValue/Default.cjs

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

package/dist/cjs/components/DataBuilder/FieldValue/ScalarArray.cjs

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

package/dist/cjs/components/DataBuilder/FieldValue/ScalarArray.module.css.cjs

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.0
  */
 'use client';
 
@@ -27,7 +27,7 @@ function DataBuilderFormFieldValue({
     return /* @__PURE__ */ jsxRuntime.jsx(ScalarArray.default, { field, onChange });
   }
   if (field.schema?.type === "array") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(
       Array.default,
       {
         field,
@@ -35,7 +35,7 @@ function DataBuilderFormFieldValue({
         refsToIgnoreClick,
         topDropdownPanelComponent
       }
-    );
+    ) });
   } else {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Default.default,

package/dist/cjs/components/DataBuilder/FilterInput.cjs

@@ -2,16 +2,21 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.0
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+require('react');
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+require('../../styled-system/jsx/is-valid-prop.cjs');
+var box = require('../../styled-system/jsx/box.cjs');
+require('../../styled-system/patterns/visually-hidden.cjs');
 var index$1 = require('./Condition/index.cjs');
 var dataBuilderContext = require('./data-builder-context.cjs');
-var styles_module = require('./styles.module.css.cjs');
 var index = require('./index.cjs');
 
 function FilterInput({
@@ -23,7 +28,7 @@ function FilterInput({
     value,
     variablesSchema
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(dataBuilderContext.DataBuilderProvider, { topLevelField: field, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.wrapper, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { field, onChange }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(dataBuilderContext.DataBuilderProvider, { topLevelField: field, children: /* @__PURE__ */ jsxRuntime.jsx(box.Box, { maxW: "full", children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { field, onChange }) }) });
 }
 
 exports.FilterInput = FilterInput;

package/dist/cjs/components/DataBuilder/Form.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.0
  */
 'use client';
 
@@ -10,9 +10,14 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var deepEqual = require('fast-deep-equal');
+require('react');
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+require('../../styled-system/jsx/is-valid-prop.cjs');
+var box = require('../../styled-system/jsx/box.cjs');
+require('../../styled-system/patterns/visually-hidden.cjs');
 var dataBuilderContext = require('./data-builder-context.cjs');
 var DataBuilderFormField = require('./DataBuilderFormField.cjs');
-var styles_module = require('./styles.module.css.cjs');
 
 function DataBuilderForm({
   field,
@@ -47,7 +52,7 @@ function DataBuilderForm({
       onAddVariable,
       collapsedDataBuilder: collapsed,
       initialVisibleFieldCount: fieldsToShow,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.wrapper, children: /* @__PURE__ */ jsxRuntime.jsx(DataBuilderFormField.DataBuilderFormField, { field, onChange: handleOnChange }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(box.Box, { maxW: "full", children: /* @__PURE__ */ jsxRuntime.jsx(DataBuilderFormField.DataBuilderFormField, { field, onChange: handleOnChange }) })
     }
   );
 }

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.0
+ * v2.22.0
  */
 'use client';
 
@@ -13,26 +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('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var useEventStopPropagation = require('../../../helpers/hooks/useEventStopPropagation.cjs');
 require('../../../styled-system/css/css.cjs');
 require('../../../styled-system/helpers.cjs');
 var sva = require('../../../styled-system/css/sva.cjs');
 var button = require('../../../ui-kit/button.cjs');
-var styles_module = require('./styles.module.css.cjs');
-var ComboBoxTag = require('../../ComboBoxElements/ComboBoxTag.cjs');
-var index$1 = require('../../DataBuilderUI/index.cjs');
-var index = require('../../Truncate/index.cjs');
+var index$1 = require('../../Truncate/index.cjs');
 var index$2 = require('../Condition/index.cjs');
 var dataField = require('../data-field.cjs');
 var DataBuilderFormField = require('../DataBuilderFormField.cjs');
 var fieldContext = require('../field-context.cjs');
 
-const addCaseRecipe = sva.sva({
-  className: "add-case",
-  slots: ["button"],
+const caseFormulaRecipe = sva.sva({
+  className: "case-formula",
+  slots: ["container", "add-button"],
   base: {
-    button: {
+    container: { mt: "2" },
+    "add-button": {
       w: "fit-content",
       h: "fit-content",
       rounded: "xl",
@@ -43,13 +41,16 @@ const addCaseRecipe = sva.sva({
     }
   }
 });
-const CaseFormula = React.forwardRef((_props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { ref, icon: svgIconType.SvgIconType.Array, variant: "lookup", children: /* @__PURE__ */ jsxRuntime.jsx(index.Truncate, { children: "Conditional value" }) });
+const CaseFormula = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.EditorTagBadge, { ref, variant: "value", onDelete: props.onDelete, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Array }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.Truncate, { children: "Conditional value" })
+  ] });
 });
 CaseFormula.displayName = "CaseFormula";
 function CaseFormulaDropdown({ formula, onChange }) {
   const { field } = fieldContext.default();
-  const styles = addCaseRecipe();
+  const styles = caseFormulaRecipe();
   if (formula?.type !== sdk.DataBuilderFormulaType.CASE) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Unexpected value for Case drilldown. Something went wrong." });
   }
@@ -132,7 +133,7 @@ function CaseFormulaDropdown({ formula, onChange }) {
       },
       index
     )),
-    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: handleNewCase, variant: "outline", colorPalette: "gray", size: "sm", className: styles.button, children: "+ Add Case" }),
+    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: handleNewCase, variant: "outline", colorPalette: "gray", size: "sm", className: styles["add-button"], children: "+ Add Case" }),
     /* @__PURE__ */ jsxRuntime.jsx(DataBuilderFormField.DataBuilderFormField, { field: defaultCaseField, onChange: handleDefaultValueChange })
   ] });
 }
@@ -142,6 +143,7 @@ function CaseItem({
   onChange,
   onDelete
 }) {
+  const styles = caseFormulaRecipe();
   function handleValueChange(value) {
     return onChange({
       ...item ?? {},
@@ -159,7 +161,8 @@ function CaseItem({
     value: item?.value,
     isInSchema: true,
     schema: field.schema?.properties?.value,
-    level: 1
+    level: 1,
+    isDeletable: false
   });
   function handleFilterChange(value) {
     return onChange({
@@ -167,12 +170,9 @@ function CaseItem({
       filter: value
     });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_module.default.caseContainer, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_module.default.field, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DataBuilderFormField.DataBuilderFormField, { field: valueField, onChange: handleValueChange }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.deleteButton, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.ActionBar.DeleteButton, { onClick: useEventStopPropagation.default(onDelete) }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4", children: /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { field: filterField, onChange: handleFilterChange }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DataBuilderFormField.DataBuilderFormField, { field: valueField, onChange: handleValueChange, onDelete }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { field: filterField, onChange: handleFilterChange })
   ] });
 }
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.21.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 index = require('../index.cjs');
 var DataBuilderFormField = require('../DataBuilderFormField.cjs');
 
 const ConcatFormula = 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 }),
       " Combine strings"
-    ] }) });
+    ] });
   }
 );
 ConcatFormula.displayName = "ConcatFormula";

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

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

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.21.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";