@integration-app/react 2.21.0 → 2.22.1

package/dist/cjs/components/ComboBox/options-factories/constant.cjs

@@ -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/cjs/components/ComboBox/options-factories/custom-field/constants.cjs

@@ -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/cjs/components/ComboBox/options-factories/custom-field/index.cjs

@@ -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/cjs/components/ComboBox/options-factories/enum.cjs

@@ -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/cjs/components/ComboBox/options-factories/formula/config-mapping.cjs

@@ -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';
 
@@ -50,8 +50,7 @@ const formulaConfigMapping = {
     appliesToSpec: appliesToTime
   },
   [sdk.DataBuilderFormulaType.COPY]: {
-    name: "Copy Value from Another Field",
-    appliesToSpec: appliesToAny
+    name: "Copy Value from Another Field"
   },
   [sdk.DataBuilderFormulaType.FIND_APP_RECORD_ID]: {
     name: "Find App Record ID",

package/dist/cjs/components/ComboBox/options-factories/formula/index.cjs

@@ -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/cjs/components/ComboBox/options-factories/generate-schema-options.cjs

@@ -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';
 
@@ -13,11 +13,11 @@ var React = require('react');
 var sdk = require('@integration-app/sdk');
 var jsConvertCase = require('js-convert-case');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var SegmentSeparator = require('../../Tag/SegmentSeparator.cjs');
 var shared = require('../shared.cjs');
 var valueSpec = require('../value-spec.cjs');
 var constant = require('./constant.cjs');
 var objectFields = require('./object-fields.cjs');
+var NestedBadgeValue = require('../Badges/EditorTagBadge/NestedBadgeValue.cjs');
 
 function getOptionsForSchema({
   schema,
@@ -196,7 +196,7 @@ function getLabelNodeFromNameComponents(nameComponents) {
     return nameComponents[0];
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nameComponents.map((name, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-    idx ? /* @__PURE__ */ jsxRuntime.jsx(SegmentSeparator.SegmentSeparator, {}) : null,
+    idx ? /* @__PURE__ */ jsxRuntime.jsx(NestedBadgeValue.ValueNestingIcon, {}) : null,
     name
   ] }, idx)) });
 }

package/dist/cjs/components/ComboBox/options-factories/object-fields.cjs

@@ -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/cjs/components/ComboBox/options-factories/reference-records.cjs

@@ -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/cjs/components/ComboBox/options-factories/root.cjs

@@ -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/cjs/components/ComboBox/options-factories/utils.cjs

@@ -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/cjs/components/ComboBox/options-factories/variable.cjs

@@ -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/cjs/components/ComboBox/shared.cjs

@@ -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/cjs/components/ComboBox/value-spec.cjs

@@ -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/cjs/components/ComboBoxElements/ComboBoxTag.cjs

@@ -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';
 
@@ -67,19 +67,5 @@ function ComboboxIcon({ invalid, icon, iconUri }) {
   }
   return null;
 }
-function getClassFromSchema(schema) {
-  switch (schema?.type) {
-    case "string":
-      return ComboBoxTag_module.default.tagString;
-    case "number":
-    case "integer":
-      return ComboBoxTag_module.default.tagNumber;
-    case "boolean":
-      return ComboBoxTag_module.default.tagBoolean;
-    default:
-      return ComboBoxTag_module.default.tagUndefined;
-  }
-}
 
 exports.ComboBoxTag = ComboBoxTag;
-exports.getClassFromSchema = getClassFromSchema;

package/dist/cjs/components/ComboBoxElements/ComboBoxTag.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.1
  */
 'use client';
 
@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject = require('style-inject');
 
-var css_248z = ".ComboBoxTag-module_tagDefault__AH8R2 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n  border-width: 1px;\n  border-color: transparent;\n}.ComboBoxTag-module_tagDefault__AH8R2:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__selected__nKlR5,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__selected__nKlR5:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__clickable__hS--w {\n  cursor: pointer;\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__disabled__VHUdn,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__disabled__VHUdn:hover {\n  cursor: default;\n  --tw-border-opacity: 1;\n  border-color: rgb(170 170 170 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(170 170 170 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__invalid__JHDvT,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__invalid__JHDvT:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(168 54 5 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n/* Icon After */\n.ComboBoxTag-module_actionBar__a-Kcq {\n  display: none;\n  height: 2rem;\n  width: 1.75rem;\n  align-items: center;\n  z-index: 10;\n  margin-left: -0.75rem;\n  margin-right: -1rem;\n  padding-left: 0.375rem;\n  padding-right: 0.375rem;\n  border-radius: 0.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n  box-shadow: 0.15rem 0 #fff;\n}\n.ComboBoxTag-module_actionBar__a-Kcq:hover {\n  display: inline-flex;\n}\n.ComboBoxTag-module_tagDefault__AH8R2:hover + .ComboBoxTag-module_actionBar__a-Kcq {\n  display: inline-flex;\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_actionBarButton__xVFYj {\n  height: 1rem;\n  width: 1rem;\n  border-radius: 9999px;\n  padding: 0px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  --tw-bg-opacity: 1;\n  background-color: rgb(194 154 6 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ComboBoxTag-module_actionBar__a-Kcq:hover .ComboBoxTag-module_actionBarButton__xVFYj {\n  transform: scale(1.1);\n  transition: 0.1s transform;\n}\n.ComboBoxTag-module_actionBar__a-Kcq:hover .ComboBoxTag-module_actionBarButton__xVFYj:focus {\n  transform: scale(1.2);\n}\n.ComboBoxTag-module_tagLookup__qurB2 {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n  --tw-border-opacity: 1;\n  border-color: rgb(13 121 194 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(13 121 194 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagLookup__qurB2:hover {\n  background-color: #0c71b5;\n}\n.ComboBoxTag-module_tagDefault__AH8R2 [class*='tagConfigButton'] {\n  border-left: 1px solid #005f9f;\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagString__Pmqwr,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagNumber__y6un6,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagBoolean__e7saD {\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagString__Pmqwr:hover,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagNumber__y6un6:hover,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagBoolean__e7saD:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n";
-var classes = {"tagDefault":"ComboBoxTag-module_tagDefault__AH8R2","tagDefault__selected":"ComboBoxTag-module_tagDefault__selected__nKlR5","tagDefault__clickable":"ComboBoxTag-module_tagDefault__clickable__hS--w","tagDefault__disabled":"ComboBoxTag-module_tagDefault__disabled__VHUdn","tagDefault__invalid":"ComboBoxTag-module_tagDefault__invalid__JHDvT","tagLookup":"ComboBoxTag-module_tagLookup__qurB2","tagString":"ComboBoxTag-module_tagString__Pmqwr","tagNumber":"ComboBoxTag-module_tagNumber__y6un6","tagBoolean":"ComboBoxTag-module_tagBoolean__e7saD"};
+var css_248z = ".ComboBoxTag-module_tagDefault__AH8R2 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n  border-width: 1px;\n  border-color: transparent;\n}.ComboBoxTag-module_tagDefault__AH8R2:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__selected__nKlR5,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__selected__nKlR5:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__clickable__hS--w {\n  cursor: pointer;\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__disabled__VHUdn,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__disabled__VHUdn:hover {\n  cursor: default;\n  --tw-border-opacity: 1;\n  border-color: rgb(170 170 170 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(170 170 170 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__invalid__JHDvT,\n.ComboBoxTag-module_tagDefault__AH8R2.ComboBoxTag-module_tagDefault__invalid__JHDvT:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(168 54 5 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ComboBoxTag-module_tagLookup__qurB2 {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n  --tw-border-opacity: 1;\n  border-color: rgb(13 121 194 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(13 121 194 / var(--tw-bg-opacity, 1));\n}\n.ComboBoxTag-module_tagLookup__qurB2:hover {\n  background-color: #0c71b5;\n}\n.ComboBoxTag-module_tagDefault__AH8R2 [class*='tagConfigButton'] {\n  border-left: 1px solid #005f9f;\n}\n";
+var classes = {"tagDefault":"ComboBoxTag-module_tagDefault__AH8R2","tagDefault__selected":"ComboBoxTag-module_tagDefault__selected__nKlR5","tagDefault__clickable":"ComboBoxTag-module_tagDefault__clickable__hS--w","tagDefault__disabled":"ComboBoxTag-module_tagDefault__disabled__VHUdn","tagDefault__invalid":"ComboBoxTag-module_tagDefault__invalid__JHDvT","tagLookup":"ComboBoxTag-module_tagLookup__qurB2"};
 styleInject(css_248z);
 
 exports.default = classes;

package/dist/cjs/components/ComboBoxElements/ComboboxContainer/index.cjs

@@ -0,0 +1,84 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.22.1
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
+var sva = require('../../../styled-system/css/sva.cjs');
+
+const comboboxContainerRecipe = sva.sva({
+  className: "combobox-container",
+  slots: ["root"],
+  base: {
+    root: {
+      display: "inline-flex",
+      verticalAlign: "middle",
+      w: "fit-content",
+      maxW: "full",
+      h: "full",
+      flexGrow: "1",
+      cursor: "pointer",
+      px: "1",
+      "&:hover:not(:has([data-editor-tag='true']:hover))": {
+        "& p": {
+          bg: "slate.2"
+        }
+      },
+      _expanded: {
+        "& p": {
+          bg: "slate.2"
+        }
+      }
+    }
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: {
+          bg: "slate.2",
+          cursor: "initial"
+        }
+      },
+      false: {}
+    },
+    level: {
+      editor: {},
+      tag: {
+        root: {
+          p: "0",
+          mx: "3px",
+          '[contenteditable="true"] &': {
+            my: "3px"
+          }
+        }
+      }
+    }
+  }
+});
+const ComboboxContainer = React.forwardRef(({ children, disabled, className, level, ...props }, ref) => {
+  const styles = comboboxContainerRecipe({ disabled, level });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "combobox",
+      className: clsx.clsx(styles.root, className),
+      ref,
+      "aria-disabled": disabled,
+      "aria-readonly": disabled,
+      ...props,
+      children
+    }
+  );
+});
+
+exports.ComboboxContainer = ComboboxContainer;
+exports.comboboxContainerRecipe = comboboxContainerRecipe;

package/dist/cjs/components/ComboBoxElements/Editor/{editor.cjs → LexicalEditor.cjs}

@@ -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';
 
@@ -17,44 +17,72 @@ var LexicalHistoryPlugin = require('@lexical/react/LexicalHistoryPlugin');
 var LexicalOnChangePlugin = require('@lexical/react/LexicalOnChangePlugin');
 var LexicalPlainTextPlugin = require('@lexical/react/LexicalPlainTextPlugin');
 var clsx = require('clsx');
-var css = require('../../../styled-system/css/css.cjs');
+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 Editor_module = require('./Editor.module.css.cjs');
+var sva = require('../../../styled-system/css/sva.cjs');
 var EditorTagNode = require('./nodes/EditorTagNode.cjs');
 var ConfigPlugin = require('./plugins/ConfigPlugin.cjs');
 var EditorTagPlugin = require('./plugins/EditorTagPlugin.cjs');
 var KeyboardPlugin = require('./plugins/KeyboardPlugin.cjs');
 var StateSyncPlugin = require('./plugins/StateSyncPlugin.cjs');
 
-function onError(error) {
-  console.error(error);
-}
 const initialConfig = {
   namespace: "data-input-editor",
-  onError,
+  onError: console.error,
   nodes: [EditorTagNode.EditorTagNode]
 };
 function LexicalProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(LexicalComposer.LexicalComposer, { initialConfig, children });
 }
 const PLACEHOLDER_CSS_VARIABLE = "--placeholder-text";
-const placeholderEmulation = css.css({
-  "& p": {
-    _before: {
-      content: `var(${PLACEHOLDER_CSS_VARIABLE})`,
-      float: "left",
-      pointerEvents: "none",
-      h: 0,
-      color: "gray.9"
+const editorTagBadgeRecipe = sva.sva({
+  className: "data-input-editor",
+  slots: ["root"],
+  base: {
+    root: {
+      fontSize: "xs",
+      fontWeight: "medium",
+      minWidth: "12",
+      _focus: {
+        outline: "none"
+      },
+      "& [data-lexical-text='true']": {
+        color: "slate.12"
+      },
+      "& p": {
+        my: "1",
+        py: "1",
+        px: "1",
+        rounded: "md",
+        minH: "5",
+        "&:has([data-editor-tag='true'])": {
+          py: "0"
+        },
+        _before: {
+          content: `var(${PLACEHOLDER_CSS_VARIABLE})`,
+          float: "left",
+          pointerEvents: "none",
+          h: 0,
+          color: "gray.9"
+        },
+        "& > *": {
+          verticalAlign: "middle",
+          display: "inline-block",
+          maxW: "full"
+        }
+      },
+      "& p:not(:has(> br:only-child))": {
+        _before: {
+          content: "none"
+        }
+      }
     }
   }
 });
 const LexicalEditor = React.forwardRef(({ onChange, value, schema, placeholder, disabled, ...props }, ref) => {
+  const styles = editorTagBadgeRecipe();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(box.Box, { className: clsx(Editor_module.default.editor), children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       LexicalPlainTextPlugin.PlainTextPlugin,
       {
         contentEditable: /* @__PURE__ */ jsxRuntime.jsx(
@@ -66,7 +94,7 @@ const LexicalEditor = React.forwardRef(({ onChange, value, schema, placeholder,
             "data-testid": "data-input-editor",
             "data-editor-container": "true",
             "data-placeholder": placeholder,
-            className: clsx(props.className, placeholderEmulation),
+            className: clsx(styles.root, props.className),
             style: {
               [PLACEHOLDER_CSS_VARIABLE]: `"${placeholder}"`
             }
@@ -74,7 +102,7 @@ const LexicalEditor = React.forwardRef(({ onChange, value, schema, placeholder,
         ),
         ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(LexicalHistoryPlugin.HistoryPlugin, {}),
     /* @__PURE__ */ jsxRuntime.jsx(EditorTagPlugin.EditorTagPlugin, {}),
     /* @__PURE__ */ jsxRuntime.jsx(KeyboardPlugin.KeyboardPlugin, {}),
@@ -87,3 +115,4 @@ LexicalEditor.displayName = "LexicalEditor";
 
 exports.LexicalEditor = LexicalEditor;
 exports.LexicalProvider = LexicalProvider;
+exports.editorTagBadgeRecipe = editorTagBadgeRecipe;

package/dist/cjs/components/ComboBoxElements/Editor/helpers/clicks.cjs

@@ -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/cjs/components/ComboBoxElements/Editor/helpers/common.cjs

@@ -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/cjs/components/ComboBoxElements/Editor/helpers/tag-template-composition.cjs

@@ -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/cjs/components/ComboBoxElements/Editor/helpers/transformEditorSchemaToValue.cjs

@@ -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/cjs/components/ComboBoxElements/Editor/helpers/transformValueToEditorSchema.cjs

@@ -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/cjs/components/ComboBoxElements/Editor/{components/EditorTag.cjs → nodes/EditorTagBinding.cjs}

@@ -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';
 
@@ -10,24 +10,24 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
-var clsx = require('clsx');
+var useLexicalNodeSelection = require('@lexical/react/useLexicalNodeSelection');
 var lexical = require('lexical');
 var ComboBox = require('../../../ComboBox/ComboBox.cjs');
 var comboboxContext = require('../../../ComboBox/context/combobox-context.cjs');
-var EditorTagNode = require('../nodes/EditorTagNode.cjs');
+var EditorTagNode = require('./EditorTagNode.cjs');
 var dataBuilderContext = require('../../../DataBuilder/data-builder-context.cjs');
 var hooks = require('../../../DataBuilder/hooks.cjs');
-var inputs_module = require('../../inputs.module.css.cjs');
 
-const EditorTag = ({
+const EditorTagBinding = ({
   internalKey,
   value,
   autoOpen
 }) => {
   const { isReadOnly } = dataBuilderContext.default();
   const isFrozenField = hooks.usIsFieldFrozen();
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const { variablesSchema, schema } = comboboxContext.useComboBox();
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [isSelected] = useLexicalNodeSelection.useLexicalNodeSelection(internalKey);
   const handleChange = (value2) => {
     editor.update(() => {
       const node = lexical.$getNodeByKey(internalKey);
@@ -41,26 +41,18 @@ const EditorTag = ({
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    ComboBox.ComboBox,
     {
-      className: clsx.clsx(inputs_module.default.tagWrapper, {
-        [inputs_module.default.tagWrapper__readonly]: isReadOnly || isFrozenField
-      }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        ComboBox.ComboBox,
-        {
-          className: inputs_module.default.innerTag,
-          value,
-          schema,
-          variablesOnly: true,
-          disabled: isReadOnly || isFrozenField,
-          variablesSchema,
-          onChange: handleChange,
-          autoOpen
-        }
-      )
+      value,
+      schema,
+      variablesOnly: true,
+      disabled: isReadOnly || isFrozenField,
+      variablesSchema,
+      onChange: handleChange,
+      autoOpen,
+      "data-selected": isSelected
     }
   );
 };
 
-exports.EditorTag = EditorTag;
+exports.EditorTagBinding = EditorTagBinding;

package/dist/cjs/components/ComboBoxElements/Editor/nodes/EditorTagNode.cjs

@@ -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';
 
@@ -10,7 +10,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lexical = require('lexical');
-var EditorTag = require('../components/EditorTag.cjs');
+var EditorTagBinding = require('./EditorTagBinding.cjs');
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -46,7 +46,7 @@ class EditorTagNode extends lexical.DecoratorNode {
     writable.__value = value;
   }
   decorate() {
-    return /* @__PURE__ */ jsxRuntime.jsx(EditorTag.EditorTag, { value: this.__value, internalKey: this.__key, autoOpen: this.__autoOpen });
+    return /* @__PURE__ */ jsxRuntime.jsx(EditorTagBinding.EditorTagBinding, { value: this.__value, internalKey: this.__key, autoOpen: this.__autoOpen });
   }
   static importJSON(serializedNode) {
     const node = $createEditorTagNode(serializedNode.value);
@@ -59,6 +59,15 @@ class EditorTagNode extends lexical.DecoratorNode {
       version: 1
     };
   }
+  isKeyboardSelectable() {
+    return false;
+  }
+  isIsolated() {
+    return false;
+  }
+  isInline() {
+    return true;
+  }
   get id() {
     return this.__id;
   }

package/dist/cjs/components/ComboBoxElements/Editor/plugins/ConfigPlugin.cjs

@@ -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/cjs/components/ComboBoxElements/Editor/plugins/EditorTagPlugin.cjs

@@ -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/cjs/components/ComboBoxElements/Editor/plugins/KeyboardPlugin.cjs

@@ -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/cjs/components/ComboBoxElements/Editor/plugins/StateSyncPlugin.cjs

@@ -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/cjs/components/ComboBoxElements/Editor/plugins/commands.cjs

@@ -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';