@bigbinary/neeto-rules-frontend 0.3.6 → 0.3.7

package/dist/index.js

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useMemo, useState, memo } from 'react';
 import { BrowserRouter } from 'react-router-dom';
+import { shallow } from 'zustand/shallow';
 import classNames from 'classnames';
 import { useFormikContext, Formik, Form, useField, FieldArray, ErrorMessage } from 'formik';
 import { findBy, noop, isNotEmpty, toLabelAndValue, removeBy } from '@bigbinary/neeto-cist';
@@ -7,13 +8,14 @@ import { ActionBlock, Textarea, MultiEmailInput, Input as Input$2, Select as Sel
 import { t as t$1 } from 'i18next';
 import * as yup from 'yup';
 import { isEditorEmpty, FormikEditor } from '@bigbinary/neeto-editor';
+import { withImmutableActions, useDebounce, useHotKeys } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { create } from 'zustand';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { Typography, Button, Pane, DatePicker, Dropdown as Dropdown$1, Input as Input$1, Checkbox, Select, Label } from '@bigbinary/neetoui';
 import { useTranslation } from 'react-i18next';
 import { Down, Up, Check, Search, Close, Delete, Plus, Refresh, Eye } from '@bigbinary/neeto-icons';
 import { pluck, isNotNil, assocPath, toLower, isEmpty, isNil, without, append, pipe, partition } from 'ramda';
 import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
-import { useDebounce, useHotKeys } from '@bigbinary/neeto-commons-frontend/react-utils';
 
 function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure " + obj);
@@ -89,594 +91,214 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-      args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
+
+var propTypes = {exports: {}};
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+
+var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var ReactPropTypesSecret = ReactPropTypesSecret_1;
+
+function emptyFunction() {}
+function emptyFunctionWithReset() {}
+emptyFunctionWithReset.resetWarningCache = emptyFunction;
+
+var factoryWithThrowingShims = function() {
+  function shim(props, propName, componentName, location, propFullName, secret) {
+    if (secret === ReactPropTypesSecret) {
+      // It is still safe when called from React.
+      return;
+    }
+    var err = new Error(
+      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
+      'Use PropTypes.checkPropTypes() to call them. ' +
+      'Read more at http://fb.me/use-check-prop-types'
+    );
+    err.name = 'Invariant Violation';
+    throw err;
+  }  shim.isRequired = shim;
+  function getShim() {
+    return shim;
+  }  // Important!
+  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
+  var ReactPropTypes = {
+    array: shim,
+    bigint: shim,
+    bool: shim,
+    func: shim,
+    number: shim,
+    object: shim,
+    string: shim,
+    symbol: shim,
+
+    any: shim,
+    arrayOf: getShim,
+    element: shim,
+    elementType: shim,
+    instanceOf: getShim,
+    node: shim,
+    objectOf: getShim,
+    oneOf: getShim,
+    oneOfType: getShim,
+    shape: getShim,
+    exact: getShim,
+
+    checkPropTypes: emptyFunctionWithReset,
+    resetWarningCache: emptyFunction
   };
+
+  ReactPropTypes.PropTypes = ReactPropTypes;
+
+  return ReactPropTypes;
+};
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+{
+  // By explicitly using `prop-types` you are opting into new production behavior.
+  // http://fb.me/prop-types-in-prod
+  propTypes.exports = factoryWithThrowingShims();
 }
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+var propTypesExports = propTypes.exports;
+var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
 }
 
-var regeneratorRuntime$1 = {exports: {}};
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
 
-var _typeof = {exports: {}};
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 
-_typeof.exports;
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
 
-(function (module) {
-	function _typeof(obj) {
-	  "@babel/helpers - typeof";
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 
-	  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-	    return typeof obj;
-	  } : function (obj) {
-	    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
-	}
-	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-} (_typeof));
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
 
-var _typeofExports = _typeof.exports;
+var ACTION_TYPES = {
+  emailToIds: "emailToIds",
+  email: "email",
+  emailTo: "emailTo",
+  dropdown: "dropdown",
+  list: "list",
+  multiSelect: "multiSelect",
+  note: "note",
+  text: "text",
+  number: "number",
+  decimal: "decimal",
+  regex: "regex",
+  textarea: "textarea",
+  date: "date",
+  longText: "longText"
+};
+var LIST_FIELD_TOOLTIP_PROPS = {
+  save: {
+    content: t$1("neetoRules.buttons.save"),
+    position: "top",
+    delay: 300
+  },
+  cancel: {
+    content: t$1("neetoRules.buttons.cancel"),
+    position: "top",
+    delay: 300
+  }
+};
+var DEFAULT_RULE_ACTION = {
+  name: "",
+  metadata: {}
+};
+var EDITOR_ADDONS = ["code-block", "block-quote", "image-upload"];
+var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var MAXIMUM_OPTION_LENGTH$3 = 7;
+var ACTION_INPUT_TYPES = ["text", "number", "decimal", "regex"];
 
-regeneratorRuntime$1.exports;
-
-(function (module) {
-	var _typeof = _typeofExports["default"];
-	function _regeneratorRuntime() {
-	  module.exports = _regeneratorRuntime = function _regeneratorRuntime() {
-	    return exports;
-	  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
-	  var exports = {},
-	    Op = Object.prototype,
-	    hasOwn = Op.hasOwnProperty,
-	    defineProperty = Object.defineProperty || function (obj, key, desc) {
-	      obj[key] = desc.value;
-	    },
-	    $Symbol = "function" == typeof Symbol ? Symbol : {},
-	    iteratorSymbol = $Symbol.iterator || "@@iterator",
-	    asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
-	    toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
-	  function define(obj, key, value) {
-	    return Object.defineProperty(obj, key, {
-	      value: value,
-	      enumerable: !0,
-	      configurable: !0,
-	      writable: !0
-	    }), obj[key];
-	  }
-	  try {
-	    define({}, "");
-	  } catch (err) {
-	    define = function define(obj, key, value) {
-	      return obj[key] = value;
-	    };
-	  }
-	  function wrap(innerFn, outerFn, self, tryLocsList) {
-	    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
-	      generator = Object.create(protoGenerator.prototype),
-	      context = new Context(tryLocsList || []);
-	    return defineProperty(generator, "_invoke", {
-	      value: makeInvokeMethod(innerFn, self, context)
-	    }), generator;
-	  }
-	  function tryCatch(fn, obj, arg) {
-	    try {
-	      return {
-	        type: "normal",
-	        arg: fn.call(obj, arg)
-	      };
-	    } catch (err) {
-	      return {
-	        type: "throw",
-	        arg: err
-	      };
-	    }
-	  }
-	  exports.wrap = wrap;
-	  var ContinueSentinel = {};
-	  function Generator() {}
-	  function GeneratorFunction() {}
-	  function GeneratorFunctionPrototype() {}
-	  var IteratorPrototype = {};
-	  define(IteratorPrototype, iteratorSymbol, function () {
-	    return this;
-	  });
-	  var getProto = Object.getPrototypeOf,
-	    NativeIteratorPrototype = getProto && getProto(getProto(values([])));
-	  NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
-	  var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-	  function defineIteratorMethods(prototype) {
-	    ["next", "throw", "return"].forEach(function (method) {
-	      define(prototype, method, function (arg) {
-	        return this._invoke(method, arg);
-	      });
-	    });
-	  }
-	  function AsyncIterator(generator, PromiseImpl) {
-	    function invoke(method, arg, resolve, reject) {
-	      var record = tryCatch(generator[method], generator, arg);
-	      if ("throw" !== record.type) {
-	        var result = record.arg,
-	          value = result.value;
-	        return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
-	          invoke("next", value, resolve, reject);
-	        }, function (err) {
-	          invoke("throw", err, resolve, reject);
-	        }) : PromiseImpl.resolve(value).then(function (unwrapped) {
-	          result.value = unwrapped, resolve(result);
-	        }, function (error) {
-	          return invoke("throw", error, resolve, reject);
-	        });
-	      }
-	      reject(record.arg);
-	    }
-	    var previousPromise;
-	    defineProperty(this, "_invoke", {
-	      value: function value(method, arg) {
-	        function callInvokeWithMethodAndArg() {
-	          return new PromiseImpl(function (resolve, reject) {
-	            invoke(method, arg, resolve, reject);
-	          });
-	        }
-	        return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
-	      }
-	    });
-	  }
-	  function makeInvokeMethod(innerFn, self, context) {
-	    var state = "suspendedStart";
-	    return function (method, arg) {
-	      if ("executing" === state) throw new Error("Generator is already running");
-	      if ("completed" === state) {
-	        if ("throw" === method) throw arg;
-	        return doneResult();
-	      }
-	      for (context.method = method, context.arg = arg;;) {
-	        var delegate = context.delegate;
-	        if (delegate) {
-	          var delegateResult = maybeInvokeDelegate(delegate, context);
-	          if (delegateResult) {
-	            if (delegateResult === ContinueSentinel) continue;
-	            return delegateResult;
-	          }
-	        }
-	        if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
-	          if ("suspendedStart" === state) throw state = "completed", context.arg;
-	          context.dispatchException(context.arg);
-	        } else "return" === context.method && context.abrupt("return", context.arg);
-	        state = "executing";
-	        var record = tryCatch(innerFn, self, context);
-	        if ("normal" === record.type) {
-	          if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
-	          return {
-	            value: record.arg,
-	            done: context.done
-	          };
-	        }
-	        "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
-	      }
-	    };
-	  }
-	  function maybeInvokeDelegate(delegate, context) {
-	    var methodName = context.method,
-	      method = delegate.iterator[methodName];
-	    if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel;
-	    var record = tryCatch(method, delegate.iterator, context.arg);
-	    if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
-	    var info = record.arg;
-	    return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
-	  }
-	  function pushTryEntry(locs) {
-	    var entry = {
-	      tryLoc: locs[0]
-	    };
-	    1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
-	  }
-	  function resetTryEntry(entry) {
-	    var record = entry.completion || {};
-	    record.type = "normal", delete record.arg, entry.completion = record;
-	  }
-	  function Context(tryLocsList) {
-	    this.tryEntries = [{
-	      tryLoc: "root"
-	    }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
-	  }
-	  function values(iterable) {
-	    if (iterable) {
-	      var iteratorMethod = iterable[iteratorSymbol];
-	      if (iteratorMethod) return iteratorMethod.call(iterable);
-	      if ("function" == typeof iterable.next) return iterable;
-	      if (!isNaN(iterable.length)) {
-	        var i = -1,
-	          next = function next() {
-	            for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
-	            return next.value = undefined, next.done = !0, next;
-	          };
-	        return next.next = next;
-	      }
-	    }
-	    return {
-	      next: doneResult
-	    };
-	  }
-	  function doneResult() {
-	    return {
-	      value: undefined,
-	      done: !0
-	    };
-	  }
-	  return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", {
-	    value: GeneratorFunctionPrototype,
-	    configurable: !0
-	  }), defineProperty(GeneratorFunctionPrototype, "constructor", {
-	    value: GeneratorFunction,
-	    configurable: !0
-	  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
-	    var ctor = "function" == typeof genFun && genFun.constructor;
-	    return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
-	  }, exports.mark = function (genFun) {
-	    return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
-	  }, exports.awrap = function (arg) {
-	    return {
-	      __await: arg
-	    };
-	  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
-	    return this;
-	  }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
-	    void 0 === PromiseImpl && (PromiseImpl = Promise);
-	    var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
-	    return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
-	      return result.done ? result.value : iter.next();
-	    });
-	  }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
-	    return this;
-	  }), define(Gp, "toString", function () {
-	    return "[object Generator]";
-	  }), exports.keys = function (val) {
-	    var object = Object(val),
-	      keys = [];
-	    for (var key in object) keys.push(key);
-	    return keys.reverse(), function next() {
-	      for (; keys.length;) {
-	        var key = keys.pop();
-	        if (key in object) return next.value = key, next.done = !1, next;
-	      }
-	      return next.done = !0, next;
-	    };
-	  }, exports.values = values, Context.prototype = {
-	    constructor: Context,
-	    reset: function reset(skipTempReset) {
-	      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
-	    },
-	    stop: function stop() {
-	      this.done = !0;
-	      var rootRecord = this.tryEntries[0].completion;
-	      if ("throw" === rootRecord.type) throw rootRecord.arg;
-	      return this.rval;
-	    },
-	    dispatchException: function dispatchException(exception) {
-	      if (this.done) throw exception;
-	      var context = this;
-	      function handle(loc, caught) {
-	        return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
-	      }
-	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-	        var entry = this.tryEntries[i],
-	          record = entry.completion;
-	        if ("root" === entry.tryLoc) return handle("end");
-	        if (entry.tryLoc <= this.prev) {
-	          var hasCatch = hasOwn.call(entry, "catchLoc"),
-	            hasFinally = hasOwn.call(entry, "finallyLoc");
-	          if (hasCatch && hasFinally) {
-	            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
-	            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
-	          } else if (hasCatch) {
-	            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
-	          } else {
-	            if (!hasFinally) throw new Error("try statement without catch or finally");
-	            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
-	          }
-	        }
-	      }
-	    },
-	    abrupt: function abrupt(type, arg) {
-	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-	        var entry = this.tryEntries[i];
-	        if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
-	          var finallyEntry = entry;
-	          break;
-	        }
-	      }
-	      finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
-	      var record = finallyEntry ? finallyEntry.completion : {};
-	      return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
-	    },
-	    complete: function complete(record, afterLoc) {
-	      if ("throw" === record.type) throw record.arg;
-	      return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
-	    },
-	    finish: function finish(finallyLoc) {
-	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-	        var entry = this.tryEntries[i];
-	        if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
-	      }
-	    },
-	    "catch": function _catch(tryLoc) {
-	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-	        var entry = this.tryEntries[i];
-	        if (entry.tryLoc === tryLoc) {
-	          var record = entry.completion;
-	          if ("throw" === record.type) {
-	            var thrown = record.arg;
-	            resetTryEntry(entry);
-	          }
-	          return thrown;
-	        }
-	      }
-	      throw new Error("illegal catch attempt");
-	    },
-	    delegateYield: function delegateYield(iterable, resultName, nextLoc) {
-	      return this.delegate = {
-	        iterator: values(iterable),
-	        resultName: resultName,
-	        nextLoc: nextLoc
-	      }, "next" === this.method && (this.arg = undefined), ContinueSentinel;
-	    }
-	  }, exports;
-	}
-	module.exports = _regeneratorRuntime, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-} (regeneratorRuntime$1));
-
-var regeneratorRuntimeExports = regeneratorRuntime$1.exports;
-
-// TODO(Babel 8): Remove this file.
-
-var runtime = regeneratorRuntimeExports();
-var regenerator = runtime;
-
-// Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
-try {
-  regeneratorRuntime = runtime;
-} catch (accidentalStrictMode) {
-  if (typeof globalThis === "object") {
-    globalThis.regeneratorRuntime = runtime;
-  } else {
-    Function("r", "regeneratorRuntime = r")(runtime);
-  }
-}
-
-var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
-
-var propTypes = {exports: {}};
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-
-var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var ReactPropTypesSecret = ReactPropTypesSecret_1;
-
-function emptyFunction() {}
-function emptyFunctionWithReset() {}
-emptyFunctionWithReset.resetWarningCache = emptyFunction;
-
-var factoryWithThrowingShims = function() {
-  function shim(props, propName, componentName, location, propFullName, secret) {
-    if (secret === ReactPropTypesSecret) {
-      // It is still safe when called from React.
-      return;
-    }
-    var err = new Error(
-      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
-      'Use PropTypes.checkPropTypes() to call them. ' +
-      'Read more at http://fb.me/use-check-prop-types'
-    );
-    err.name = 'Invariant Violation';
-    throw err;
-  }  shim.isRequired = shim;
-  function getShim() {
-    return shim;
-  }  // Important!
-  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
-  var ReactPropTypes = {
-    array: shim,
-    bigint: shim,
-    bool: shim,
-    func: shim,
-    number: shim,
-    object: shim,
-    string: shim,
-    symbol: shim,
-
-    any: shim,
-    arrayOf: getShim,
-    element: shim,
-    elementType: shim,
-    instanceOf: getShim,
-    node: shim,
-    objectOf: getShim,
-    oneOf: getShim,
-    oneOfType: getShim,
-    shape: getShim,
-    exact: getShim,
-
-    checkPropTypes: emptyFunctionWithReset,
-    resetWarningCache: emptyFunction
-  };
-
-  ReactPropTypes.PropTypes = ReactPropTypes;
-
-  return ReactPropTypes;
-};
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-{
-  // By explicitly using `prop-types` you are opting into new production behavior.
-  // http://fb.me/prop-types-in-prod
-  propTypes.exports = factoryWithThrowingShims();
-}
-
-var propTypesExports = propTypes.exports;
-var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-var ACTION_TYPES = {
-  emailToIds: "emailToIds",
-  email: "email",
-  emailTo: "emailTo",
-  dropdown: "dropdown",
-  list: "list",
-  multiSelect: "multiSelect",
-  note: "note",
-  text: "text",
-  number: "number",
-  decimal: "decimal",
-  regex: "regex",
-  textarea: "textarea",
-  date: "date",
-  longText: "longText"
-};
-var LIST_FIELD_TOOLTIP_PROPS = {
-  save: {
-    content: t$1("neetoRules.buttons.save"),
-    position: "top",
-    delay: 300
-  },
-  cancel: {
-    content: t$1("neetoRules.buttons.cancel"),
-    position: "top",
-    delay: 300
-  }
-};
-var DEFAULT_RULE_ACTION = {
-  name: "",
-  metadata: {}
-};
-var EDITOR_ADDONS = ["code-block", "block-quote", "image-upload"];
-var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-var MAXIMUM_OPTION_LENGTH$3 = 7;
-var ACTION_INPUT_TYPES = ["text", "number", "decimal", "regex"];
-
-var OPERATORS$1 = {
-  or: "or_operator",
-  and: "and_operator"
-};
-var OPERATOR_LABELS = {
-  or_operator: t$1("neetoRules.operators.or"),
-  and_operator: t$1("neetoRules.operators.and")
-};
-var VERB_LABELS = {
-  is: t$1("neetoRules.conditionVerbs.is"),
-  is_not: t$1("neetoRules.conditionVerbs.isNot"),
-  contains: t$1("neetoRules.conditionVerbs.contains"),
-  does_not_contain: t$1("neetoRules.conditionVerbs.doesNotContain"),
-  contains_any_of: t$1("neetoRules.conditionVerbs.containsAnyOf"),
-  contains_all_of: t$1("neetoRules.conditionVerbs.containsAllOf"),
-  contains_none_of: t$1("neetoRules.conditionVerbs.containsNoneOf"),
-  starts_with: t$1("neetoRules.conditionVerbs.startsWith"),
-  ends_with: t$1("neetoRules.conditionVerbs.endsWith"),
-  less_than: t$1("neetoRules.conditionVerbs.lessThan"),
-  greater_than: t$1("neetoRules.conditionVerbs.greaterThan"),
-  any_time: t$1("neetoRules.conditionVerbs.anyTime"),
-  during: t$1("neetoRules.conditionVerbs.during"),
-  not_during: t$1("neetoRules.conditionVerbs.notDuring"),
-  any_of: t$1("neetoRules.conditionVerbs.anyOf"),
-  none_of: t$1("neetoRules.conditionVerbs.noneOf"),
-  is_before: t$1("neetoRules.conditionVerbs.isBefore"),
-  is_after: t$1("neetoRules.conditionVerbs.isAfter")
-};
-var CONDITION_VALUE_TYPES = {
-  text: "text",
-  number: "number",
-  decimal: "decimal",
-  url: "url",
-  email: "email",
-  dropdown: "dropdown",
-  multiSelect: "multi-select",
-  multiSelectCreate: "multi-select-create",
-  date: "date",
-  regex: "regex",
-  textarea: "textarea"
-};
-var INPUT_FIELD_TYPES = ["email", "text", "number", "decimal", "url", "regex"];
-var MAXIMUM_OPTION_LENGTH$2 = 7;
+var OPERATORS$1 = {
+  or: "or_operator",
+  and: "and_operator"
+};
+var OPERATOR_LABELS = {
+  or_operator: t$1("neetoRules.operators.or"),
+  and_operator: t$1("neetoRules.operators.and")
+};
+var VERB_LABELS = {
+  is: t$1("neetoRules.conditionVerbs.is"),
+  is_not: t$1("neetoRules.conditionVerbs.isNot"),
+  contains: t$1("neetoRules.conditionVerbs.contains"),
+  does_not_contain: t$1("neetoRules.conditionVerbs.doesNotContain"),
+  contains_any_of: t$1("neetoRules.conditionVerbs.containsAnyOf"),
+  contains_all_of: t$1("neetoRules.conditionVerbs.containsAllOf"),
+  contains_none_of: t$1("neetoRules.conditionVerbs.containsNoneOf"),
+  starts_with: t$1("neetoRules.conditionVerbs.startsWith"),
+  ends_with: t$1("neetoRules.conditionVerbs.endsWith"),
+  less_than: t$1("neetoRules.conditionVerbs.lessThan"),
+  greater_than: t$1("neetoRules.conditionVerbs.greaterThan"),
+  any_time: t$1("neetoRules.conditionVerbs.anyTime"),
+  during: t$1("neetoRules.conditionVerbs.during"),
+  not_during: t$1("neetoRules.conditionVerbs.notDuring"),
+  any_of: t$1("neetoRules.conditionVerbs.anyOf"),
+  none_of: t$1("neetoRules.conditionVerbs.noneOf"),
+  is_before: t$1("neetoRules.conditionVerbs.isBefore"),
+  is_after: t$1("neetoRules.conditionVerbs.isAfter")
+};
+var CONDITION_VALUE_TYPES = {
+  text: "text",
+  number: "number",
+  decimal: "decimal",
+  url: "url",
+  email: "email",
+  dropdown: "dropdown",
+  multiSelect: "multi-select",
+  multiSelectCreate: "multi-select-create",
+  date: "date",
+  regex: "regex",
+  textarea: "textarea"
+};
+var INPUT_FIELD_TYPES = ["email", "text", "number", "decimal", "url", "regex"];
+var MAXIMUM_OPTION_LENGTH$2 = 7;
 
 function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -796,7 +418,7 @@ var getConditionsSchema = function getConditionsSchema(element) {
     }))
   });
 };
-var getActionsSchema = function getActionsSchema(element) {
+var getActionsSchema = function getActionsSchema(element, customData) {
   var actionOptions = element.actionOptions,
     _element$componentPro5 = element.componentProps,
     componentProps = _element$componentPro5 === void 0 ? {} : _element$componentPro5;
@@ -861,7 +483,7 @@ var getActionsSchema = function getActionsSchema(element) {
             value: yup.string().required(t$1("neetoRules.validations.required.body"))
           });
         } else if (selectedAction !== null && selectedAction !== void 0 && selectedAction.component) {
-          return selectedAction.validation;
+          return typeof selectedAction.validation === "function" ? selectedAction.validation(customData) : selectedAction.validation;
         }
         return schema;
       })
@@ -879,14 +501,14 @@ var getSchemaForArray = function getSchemaForArray(element) {
     then: yup.array().min(1, t$1("neetoRules.validations.atLeastOneValue")).required(t$1("neetoRules.validations.atLeastOneValue"))
   });
 };
-var getSchemaForElement = function getSchemaForElement(element) {
-  return VALIDATION_SCHEMA[element.type](element);
+var getSchemaForElement = function getSchemaForElement(element, customData) {
+  return VALIDATION_SCHEMA[element.type](element, customData);
 };
-var getValidationSchema = function getValidationSchema(data) {
+var getValidationSchema = function getValidationSchema(data, customData) {
   var fieldKeys = Object.keys(data);
   var schema = fieldKeys.reduce(function (acc, key) {
     return _objectSpread$6(_objectSpread$6({}, acc), {}, _defineProperty({}, key, yup.object({
-      value: getSchemaForElement(data[key])
+      value: getSchemaForElement(data[key], customData)
     })));
   }, {});
   return yup.object(schema);
@@ -944,6 +566,14 @@ var formatData = function formatData(data) {
   }, {});
 };
 
+/** @type {import("neetocommons/react-utils").ZustandStoreHook} */
+var useCustomDataStore = create(withImmutableActions(function (set) {
+  return {
+    customData: {},
+    setCustomDataState: set
+  };
+}));
+
 var transformObjectToDotNotation = function transformObjectToDotNotation(obj) {
   var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
   var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
@@ -1007,37 +637,29 @@ var NeetoRules$2 = function NeetoRules(_ref) {
     _ref$handleCancel = _ref.handleCancel,
     handleCancel = _ref$handleCancel === void 0 ? noop : _ref$handleCancel;
   var formRef = useRef(null);
-  var submitForm = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(values, formikBag) {
-      var payload;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            payload = buildPayload(data, values);
-            handleSubmit(payload, formikBag);
-          case 2:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function submitForm(_x, _x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  var submitForm = function submitForm(values, formikBag) {
+    var payload = buildPayload(data, values);
+    handleSubmit(payload, formikBag);
+  };
   var initialValues = useMemo(function () {
     return formatData(data);
   }, [data]);
+  var _useCustomDataStore = useCustomDataStore(function (store) {
+      return {
+        customData: store["customData"]
+      };
+    }, shallow),
+    customData = _useCustomDataStore.customData;
   return /*#__PURE__*/React.createElement(Formik, {
     initialValues: initialValues,
     enableReinitialize: true,
-    validationSchema: getValidationSchema(data),
+    validationSchema: getValidationSchema(data, customData),
     onSubmit: submitForm
-  }, function (_ref3) {
-    var isSubmitting = _ref3.isSubmitting,
-      dirty = _ref3.dirty,
-      values = _ref3.values,
-      fromikBag = _objectWithoutProperties(_ref3, _excluded$9);
+  }, function (_ref2) {
+    var isSubmitting = _ref2.isSubmitting,
+      dirty = _ref2.dirty,
+      values = _ref2.values,
+      fromikBag = _objectWithoutProperties(_ref2, _excluded$9);
     return /*#__PURE__*/React.createElement(Form, {
       className: classNames(["w-full space-y-6 px-24", className]),
       ref: formRef
@@ -1078,7 +700,7 @@ var Main = function Main(_ref) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-filters-error-boundary{align-items:center;background-color:#f8f9f9;border-radius:2px;display:flex;gap:16px;margin-bottom:12px;padding:8px 20px}.neeto-filters-error-boundary p{color:#2f3941}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19lcnJvci1ib3VuZGFyeS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL2Fic3RyYWN0cy9fbmVldG8tdWktdmFyaWFibGVzLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvbWFpbi5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLDhCQUlFLGtCQUFBLENBR0Esd0JDS2tCLENETmxCLGlCQ2VvQixDRGxCcEIsWUFBQSxDQUVBLFFBQUEsQ0FIQSxrQkFBQSxDQURBLGdCRU9GLENGQ0UsZ0NBQ0UsYUVDSiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1maWx0ZXJzLWVycm9yLWJvdW5kYXJ5IHtcbiAgcGFkZGluZzogOHB4IDIwcHg7XG4gIG1hcmdpbi1ib3R0b206IDEycHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogMTZweDtcbiAgYm9yZGVyLXJhZGl1czogJG5lZXRvLXVpLXJvdW5kZWQtc207XG4gIGJhY2tncm91bmQtY29sb3I6ICRuZWV0by11aS1ncmF5LTEwMDtcblxuICBwIHtcbiAgICBjb2xvcjogJG5lZXRvLXVpLWdyYXktODAwO1xuICB9XG59XG4iLCIvLyBDb2xvciBwZWxldHRlXG5cbi8vIHByaW1hcnlcbiRuZWV0by11aS13aGl0ZTogI2ZmZmZmZjtcbi8vIGdyYXlzXG4kbmVldG8tdWktZ3JheS04MDA6ICMyZjM5NDE7XG4kbmVldG8tdWktZ3JheS03MDA6ICM0OTU0NWM7XG4kbmVldG8tdWktZ3JheS02MDA6ICM2ODczN2Q7XG4kbmVldG8tdWktZ3JheS01MDA6ICM4NzkyOWQ7XG4kbmVldG8tdWktZ3JheS00MDA6ICNjMmM4Y2M7XG4kbmVldG8tdWktZ3JheS0zMDA6ICNkOGRjZGU7XG4kbmVldG8tdWktZ3JheS0yMDA6ICNlOWViZWQ7XG4kbmVldG8tdWktZ3JheS0xMDA6ICNmOGY5Zjk7XG4vLyBwYXN0ZWxzXG4kbmVldG8tdWktcGFzdGVsLWJsdWU6ICNlYWYzZmM7XG5cbi8vIEZvbnQgd2VpZ2h0c1xuJG5lZXRvLXVpLWZvbnQtc2VtaWJvbGQ6IDYwMDtcbiRuZWV0by11aS1mb250LW5vcm1hbDogNDAwO1xuXG4vLyBCb3JkZXIgUmFkaXVzXG4kbmVldG8tdWktcm91bmRlZC1zbTogMnB4O1xuXG4vLyBCb3ggU2hhZG93c1xuJG5lZXRvLXVpLXNoYWRvdy1zOiAwcHggM3B4IDEycHggLTFweCByZ2JhKDI4LCA1MiwgODQsIDAuMTIpLFxuICAwcHggMnB4IDRweCAtMXB4IHJnYmEoMjgsIDU1LCA5MCwgMC4wOCk7XG5cbi8vIFRyYW5zaXRpb25cbiRuZWV0by11aS10cmFuc2l0aW9uOiBhbGwgMC4zcyBlYXNlLWluLW91dDtcbiIsIi5uZWV0by1maWx0ZXJzLWVycm9yLWJvdW5kYXJ5IHtcbiAgcGFkZGluZzogOHB4IDIwcHg7XG4gIG1hcmdpbi1ib3R0b206IDEycHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogMTZweDtcbiAgYm9yZGVyLXJhZGl1czogMnB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjhmOWY5O1xufVxuLm5lZXRvLWZpbHRlcnMtZXJyb3ItYm91bmRhcnkgcCB7XG4gIGNvbG9yOiAjMmYzOTQxO1xufSJdfQ== */";
+var css = ".neeto-filters-error-boundary{align-items:center;background-color:rgb(var(--neeto-ui-gray-100));border-radius:var(--neeto-ui-rounded-sm);display:flex;gap:16px;margin-bottom:12px;padding:8px 20px}.neeto-filters-error-boundary p{color:rgb(var(--neeto-ui-gray-800))}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19lcnJvci1ib3VuZGFyeS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL21haW4uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSw4QkFJRSxrQkFBQSxDQUdBLDhDQUFBLENBREEsd0NBQUEsQ0FIQSxZQUFBLENBRUEsUUFBQSxDQUhBLGtCQUFBLENBREEsZ0JDT0YsQ0RDRSxnQ0FDRSxtQ0NDSiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1maWx0ZXJzLWVycm9yLWJvdW5kYXJ5IHtcbiAgcGFkZGluZzogOHB4IDIwcHg7XG4gIG1hcmdpbi1ib3R0b206IDEycHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogMTZweDtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZC1zbSk7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTEwMCkpO1xuXG4gIHAge1xuICAgIGNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS04MDApKTtcbiAgfVxufVxuIiwiLm5lZXRvLWZpbHRlcnMtZXJyb3ItYm91bmRhcnkge1xuICBwYWRkaW5nOiA4cHggMjBweDtcbiAgbWFyZ2luLWJvdHRvbTogMTJweDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAxNnB4O1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1uZWV0by11aS1yb3VuZGVkLXNtKTtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMTAwKSk7XG59XG4ubmVldG8tZmlsdGVycy1lcnJvci1ib3VuZGFyeSBwIHtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTgwMCkpO1xufSJdfQ== */";
 n(css,{});
 
 var NeetoRules$1 = function NeetoRules(_ref) {
@@ -3121,31 +2743,196 @@ var Dropdown = function Dropdown(_ref) {
       });
     }
   };
-  useEffect(function () {
-    findDefaultSelectedOption();
-  }, [options, conditions]);
+  useEffect(function () {
+    findDefaultSelectedOption();
+  }, [options, conditions]);
+  return /*#__PURE__*/React.createElement(Dropdown$1, {
+    buttonStyle: "secondary",
+    className: "neeto-ui-bg-gray-100",
+    customTarget: /*#__PURE__*/React.createElement(Typography, {
+      "data-cy": "condition-value-dropdown-button",
+      style: "h5",
+      weight: "semibold",
+      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
+        "neeto-ui-text-primary-800": isActive,
+        "neeto-ui-text-error-500": isValueSelected
+      }),
+      onClick: function onClick() {
+        setTouched(assocPath(["conditions", "value", index], true, touched));
+        setIsActive(function (prevState) {
+          return !prevState;
+        });
+      }
+    }, defaultSelectedOption === null || defaultSelectedOption === void 0 || (_defaultSelectedOptio = defaultSelectedOption.label) === null || _defaultSelectedOptio === void 0 ? void 0 : _defaultSelectedOptio.toLowerCase()),
+    onClose: handleClose
+  }, /*#__PURE__*/React.createElement(Menu$5, {
+    className: "max-h-60 max-w-2xl p-3"
+  }, options.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/React.createElement(Input$1, {
+    autoFocus: true,
+    className: "mb-1",
+    "data-cy": "search-text-field",
+    placeholder: t$1("neetoRules.common.search"),
+    prefix: /*#__PURE__*/React.createElement(Search, null),
+    value: searchTerm,
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }), /*#__PURE__*/React.createElement(OptionsWrapper, {
+    hasScroll: options.length > MAXIMUM_OPTION_LENGTH$2
+  }, searchedOptions.map(function (option, idx) {
+    return /*#__PURE__*/React.createElement(MenuItem$5.Button, {
+      "data-cy": "".concat(joinHyphenCase(option.label), "-menu-item"),
+      key: idx,
+      className: classNames({
+        "neeto-ui-bg-gray-100": (defaultSelectedOption === null || defaultSelectedOption === void 0 ? void 0 : defaultSelectedOption.value) === option.value
+      }),
+      suffix: (defaultSelectedOption === null || defaultSelectedOption === void 0 ? void 0 : defaultSelectedOption.value) === option.value && /*#__PURE__*/React.createElement(Check, {
+        className: "neeto-ui-text-primary-800"
+      }),
+      onClick: function onClick() {
+        return handleSelectOption(option);
+      }
+    }, option.label);
+  })), isEmpty(options) && /*#__PURE__*/React.createElement(MenuItem$5.Button, {
+    "data-cy": "no-options-menu-item"
+  }, t$1("neetoRules.common.noOptions"))));
+};
+
+var InputField$1 = function InputField(_ref) {
+  var _condition$metadata, _errors$conditions, _touched$conditions;
+  var name = _ref.name,
+    index = _ref.index,
+    placeholder = _ref.placeholder;
+  var _useFormikContext = useFormikContext(),
+    conditions = _useFormikContext.values.conditions,
+    errors = _useFormikContext.errors,
+    touched = _useFormikContext.touched;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showInput = _useState2[0],
+    setShowInput = _useState2[1];
+  var inputRef = useRef(null);
+  useCloseInputField(inputRef, showInput, function () {
+    return setShowInput(false);
+  });
+  var condition = conditions.value[index];
+  var valueTerm = (_condition$metadata = condition.metadata) === null || _condition$metadata === void 0 || (_condition$metadata = _condition$metadata.value) === null || _condition$metadata === void 0 ? void 0 : _condition$metadata.toString();
+  var label = valueTerm && valueTerm !== null && valueTerm !== void 0 && valueTerm.trim().length ? valueTerm : t$1("neetoRules.form.addValue");
+  var isValid = errors.conditions && isNotNil((_errors$conditions = errors.conditions) === null || _errors$conditions === void 0 || (_errors$conditions = _errors$conditions.value) === null || _errors$conditions === void 0 ? void 0 : _errors$conditions[index]) && isNotNil((_touched$conditions = touched.conditions) === null || _touched$conditions === void 0 || (_touched$conditions = _touched$conditions.value) === null || _touched$conditions === void 0 ? void 0 : _touched$conditions[index]);
+  useEffect(function () {
+    setShowInput(false);
+  }, [condition.verb]);
+  return showInput ? /*#__PURE__*/React.createElement(Input$2, {
+    name: name,
+    placeholder: placeholder,
+    ref: inputRef,
+    size: "small",
+    suffix: /*#__PURE__*/React.createElement(Check, {
+      className: "cursor-pointer",
+      onClick: function onClick() {
+        return setShowInput(function (prevState) {
+          return !prevState;
+        });
+      }
+    })
+  }) : /*#__PURE__*/React.createElement(Typography, {
+    style: "h5",
+    weight: "semibold",
+    className: classNames("neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline", {
+      "neeto-ui-text-error-500": isValid
+    }),
+    onClick: function onClick() {
+      return setShowInput(function (prevState) {
+        return !prevState;
+      });
+    }
+  }, label);
+};
+
+var Menu$4 = Dropdown$1.Menu,
+  MenuItem$4 = Dropdown$1.MenuItem;
+var MultiSelect = function MultiSelect(_ref) {
+  var _conditions$value$ind, _errors$conditions, _touched$conditions;
+  var name = _ref.name,
+    dropDownOptions = _ref.dropDownOptions,
+    index = _ref.index;
+  var _useFormikContext = useFormikContext(),
+    conditions = _useFormikContext.values.conditions,
+    setFieldValue = _useFormikContext.setFieldValue,
+    errors = _useFormikContext.errors,
+    touched = _useFormikContext.touched,
+    setTouched = _useFormikContext.setTouched;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeOption = _useState2[0],
+    setActiveOption = _useState2[1];
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var values = (_conditions$value$ind = conditions.value[index]) === null || _conditions$value$ind === void 0 || (_conditions$value$ind = _conditions$value$ind.metadata) === null || _conditions$value$ind === void 0 ? void 0 : _conditions$value$ind.values;
+  var selectedOptions = values || [];
+  var defaultLabel = t$1("neetoRules.form.selectValues");
+  var options = dropDownOptions === null || dropDownOptions === void 0 ? void 0 : dropDownOptions.filter(function (option) {
+    return selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.includes(option.value);
+  });
+  var searchedOptions = getSearchedOptions$2(dropDownOptions, searchTerm);
+  var isValid = errors.conditions && isNotNil((_errors$conditions = errors.conditions) === null || _errors$conditions === void 0 || (_errors$conditions = _errors$conditions.value) === null || _errors$conditions === void 0 ? void 0 : _errors$conditions[index]) && isNotNil((_touched$conditions = touched.conditions) === null || _touched$conditions === void 0 || (_touched$conditions = _touched$conditions.value) === null || _touched$conditions === void 0 ? void 0 : _touched$conditions[index]);
+  var handleMultiSelectOption = function handleMultiSelectOption(value) {
+    var options = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.includes(value) ? without([value], selectedOptions) : append(value, selectedOptions);
+    setFieldValue(name, options);
+  };
+  var handleClose = function handleClose() {
+    setActiveOption(null);
+    setSearchTerm("");
+  };
   return /*#__PURE__*/React.createElement(Dropdown$1, {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
-    customTarget: /*#__PURE__*/React.createElement(Typography, {
-      "data-cy": "condition-value-dropdown-button",
+    closeOnSelect: false,
+    position: "top-start",
+    customTarget: isNotEmpty(options) ? /*#__PURE__*/React.createElement("span", {
+      className: "flex flex-wrap gap-y-1"
+    }, options.map(function (option, idx) {
+      var _option$label;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: idx
+      }, !!idx && /*#__PURE__*/React.createElement(Typography, {
+        className: "neeto-ui-text-gray-700 mr-1 mt-1",
+        style: "h5",
+        weight: "normal"
+      }, t$1("neetoRules.common.or")), /*#__PURE__*/React.createElement(Typography, {
+        "data-cy": "condition-value-multi-select-field",
+        style: "h5",
+        weight: "semibold",
+        className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mr-1 mt-1 cursor-pointer underline", {
+          "neeto-ui-text-primary-800": activeOption === option.value
+        }),
+        onClick: function onClick() {
+          setTouched(assocPath(["conditions", "value", index], true, touched));
+          setActiveOption(activeOption ? null : option.value);
+        }
+      }, option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase()));
+    })) : /*#__PURE__*/React.createElement(Typography, {
+      "data-cy": "condition-value-multi-select-field",
       style: "h5",
       weight: "semibold",
       className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": isActive,
-        "neeto-ui-text-error-500": isValueSelected
+        "neeto-ui-text-primary-800": activeOption === defaultLabel,
+        "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
         setTouched(assocPath(["conditions", "value", index], true, touched));
-        setIsActive(function (prevState) {
-          return !prevState;
-        });
+        setActiveOption(activeOption ? null : defaultLabel);
       }
-    }, defaultSelectedOption === null || defaultSelectedOption === void 0 || (_defaultSelectedOptio = defaultSelectedOption.label) === null || _defaultSelectedOptio === void 0 ? void 0 : _defaultSelectedOptio.toLowerCase()),
+    }, defaultLabel),
     onClose: handleClose
-  }, /*#__PURE__*/React.createElement(Menu$5, {
+  }, /*#__PURE__*/React.createElement(Menu$4, {
     className: "max-h-60 max-w-2xl p-3"
-  }, options.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/React.createElement(Input$1, {
+  }, dropDownOptions.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/React.createElement(Input$1, {
     autoFocus: true,
     className: "mb-1",
     "data-cy": "search-text-field",
@@ -3154,286 +2941,501 @@ var Dropdown = function Dropdown(_ref) {
     value: searchTerm,
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
-    },
-    onClick: function onClick(e) {
-      return e.stopPropagation();
     }
   }), /*#__PURE__*/React.createElement(OptionsWrapper, {
-    hasScroll: options.length > MAXIMUM_OPTION_LENGTH$2
+    hasScroll: dropDownOptions.length > MAXIMUM_OPTION_LENGTH$2
   }, searchedOptions.map(function (option, idx) {
-    return /*#__PURE__*/React.createElement(MenuItem$5.Button, {
+    return /*#__PURE__*/React.createElement(MenuItem$4.Button, {
       "data-cy": "".concat(joinHyphenCase(option.label), "-menu-item"),
       key: idx,
-      className: classNames({
-        "neeto-ui-bg-gray-100": (defaultSelectedOption === null || defaultSelectedOption === void 0 ? void 0 : defaultSelectedOption.value) === option.value
-      }),
-      suffix: (defaultSelectedOption === null || defaultSelectedOption === void 0 ? void 0 : defaultSelectedOption.value) === option.value && /*#__PURE__*/React.createElement(Check, {
-        className: "neeto-ui-text-primary-800"
+      prefix: /*#__PURE__*/React.createElement(Checkbox, {
+        checked: selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.includes(option.value),
+        "data-cy": "check-icon",
+        id: option.value
       }),
       onClick: function onClick() {
-        return handleSelectOption(option);
+        return handleMultiSelectOption(option.value);
       }
     }, option.label);
-  })), isEmpty(options) && /*#__PURE__*/React.createElement(MenuItem$5.Button, {
+  })), isEmpty(dropDownOptions) && /*#__PURE__*/React.createElement(MenuItem$4.Button, {
     "data-cy": "no-options-menu-item"
   }, t$1("neetoRules.common.noOptions"))));
 };
 
-var InputField$1 = function InputField(_ref) {
-  var _condition$metadata, _errors$conditions, _touched$conditions;
+var _excluded$6 = ["name", "index"];
+var MultiSelectCreate = function MultiSelectCreate(_ref) {
+  var _conditions$value$ind, _errors$conditions, _touched$conditions;
   var name = _ref.name,
     index = _ref.index,
-    placeholder = _ref.placeholder;
+    props = _objectWithoutProperties(_ref, _excluded$6);
   var _useFormikContext = useFormikContext(),
     conditions = _useFormikContext.values.conditions,
+    setFieldValue = _useFormikContext.setFieldValue,
     errors = _useFormikContext.errors,
-    touched = _useFormikContext.touched;
+    touched = _useFormikContext.touched,
+    setTouched = _useFormikContext.setTouched;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    showInput = _useState2[0],
-    setShowInput = _useState2[1];
-  var inputRef = useRef(null);
-  useCloseInputField(inputRef, showInput, function () {
-    return setShowInput(false);
+    showPane = _useState2[0],
+    setShowPane = _useState2[1];
+  var initialFocusRef = useRef(null);
+  useOnButtonPressed(initialFocusRef, function () {
+    return setShowPane(false);
   });
-  var condition = conditions.value[index];
-  var valueTerm = (_condition$metadata = condition.metadata) === null || _condition$metadata === void 0 || (_condition$metadata = _condition$metadata.value) === null || _condition$metadata === void 0 ? void 0 : _condition$metadata.toString();
-  var label = valueTerm && valueTerm !== null && valueTerm !== void 0 && valueTerm.trim().length ? valueTerm : t$1("neetoRules.form.addValue");
+  var values = (_conditions$value$ind = conditions.value[index]) === null || _conditions$value$ind === void 0 || (_conditions$value$ind = _conditions$value$ind.metadata) === null || _conditions$value$ind === void 0 ? void 0 : _conditions$value$ind.values;
+  var allOptions = getAllOptions(values);
+  var defaultLabel = t$1("neetoRules.form.selectValues");
   var isValid = errors.conditions && isNotNil((_errors$conditions = errors.conditions) === null || _errors$conditions === void 0 || (_errors$conditions = _errors$conditions.value) === null || _errors$conditions === void 0 ? void 0 : _errors$conditions[index]) && isNotNil((_touched$conditions = touched.conditions) === null || _touched$conditions === void 0 || (_touched$conditions = _touched$conditions.value) === null || _touched$conditions === void 0 ? void 0 : _touched$conditions[index]);
-  useEffect(function () {
-    setShowInput(false);
-  }, [condition.verb]);
-  return showInput ? /*#__PURE__*/React.createElement(Input$2, {
-    name: name,
-    placeholder: placeholder,
-    ref: inputRef,
-    size: "small",
-    suffix: /*#__PURE__*/React.createElement(Check, {
-      className: "cursor-pointer",
-      onClick: function onClick() {
-        return setShowInput(function (prevState) {
-          return !prevState;
-        });
-      }
-    })
-  }) : /*#__PURE__*/React.createElement(Typography, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isEmpty(allOptions) && /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "condition-value-multi-select-create-button",
     style: "h5",
     weight: "semibold",
-    className: classNames("neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline", {
+    className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
       "neeto-ui-text-error-500": isValid
     }),
     onClick: function onClick() {
-      return setShowInput(function (prevState) {
+      setTouched(assocPath(["conditions", "value", index], true, touched));
+      setShowPane(function (prevState) {
         return !prevState;
       });
     }
-  }, label);
+  }, defaultLabel), allOptions.map(function (option, idx) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: idx
+    }, !!idx && /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-text-gray-700 mt-1",
+      style: "h5",
+      weight: "normal"
+    }, t$1("neetoRules.common.or")), /*#__PURE__*/React.createElement(Typography, {
+      className: "hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline",
+      "data-cy": "condition-value-multi-select-create-button",
+      style: "h5",
+      weight: "semibold",
+      onClick: function onClick() {
+        return setShowPane(function (prevState) {
+          return !prevState;
+        });
+      }
+    }, option.label));
+  }), /*#__PURE__*/React.createElement(Pane, {
+    initialFocusRef: initialFocusRef,
+    isOpen: showPane,
+    size: "large",
+    onClose: function onClose() {
+      return setShowPane(false);
+    }
+  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700",
+    "data-cy": "multi-select-create-pane-header-title",
+    style: "h3"
+  }, t$1("neetoRules.labels.multipleValues"))), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Select, _extends({
+    isMulti: true,
+    className: "mt-4 w-full",
+    "data-cy": "multi-select-create-container",
+    defaultValue: allOptions,
+    innerRef: initialFocusRef,
+    label: t$1("neetoRules.labels.selectValues"),
+    onChange: function onChange(options) {
+      return setFieldValue(name, options.map(function (option) {
+        return option.value;
+      }));
+    }
+  }, props))), /*#__PURE__*/React.createElement(Pane.Footer, {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "save-changes-button",
+    label: t$1("neetoRules.common.saveChange"),
+    onClick: function onClick() {
+      return setShowPane(false);
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    label: t$1("neetoRules.buttons.cancel"),
+    style: "text",
+    onClick: function onClick() {
+      return setShowPane(false);
+    }
+  }))));
 };
 
-var Menu$4 = Dropdown$1.Menu,
-  MenuItem$4 = Dropdown$1.MenuItem;
-var MultiSelect = function MultiSelect(_ref) {
-  var _conditions$value$ind, _errors$conditions, _touched$conditions;
-  var name = _ref.name,
-    dropDownOptions = _ref.dropDownOptions,
-    index = _ref.index;
-  var _useFormikContext = useFormikContext(),
-    conditions = _useFormikContext.values.conditions,
-    setFieldValue = _useFormikContext.setFieldValue,
-    errors = _useFormikContext.errors,
-    touched = _useFormikContext.touched,
-    setTouched = _useFormikContext.setTouched;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeOption = _useState2[0],
-    setActiveOption = _useState2[1];
-  var _useState3 = useState(""),
-    _useState4 = _slicedToArray(_useState3, 2),
-    searchTerm = _useState4[0],
-    setSearchTerm = _useState4[1];
-  var values = (_conditions$value$ind = conditions.value[index]) === null || _conditions$value$ind === void 0 || (_conditions$value$ind = _conditions$value$ind.metadata) === null || _conditions$value$ind === void 0 ? void 0 : _conditions$value$ind.values;
-  var selectedOptions = values || [];
-  var defaultLabel = t$1("neetoRules.form.selectValues");
-  var options = dropDownOptions === null || dropDownOptions === void 0 ? void 0 : dropDownOptions.filter(function (option) {
-    return selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.includes(option.value);
-  });
-  var searchedOptions = getSearchedOptions$2(dropDownOptions, searchTerm);
-  var isValid = errors.conditions && isNotNil((_errors$conditions = errors.conditions) === null || _errors$conditions === void 0 || (_errors$conditions = _errors$conditions.value) === null || _errors$conditions === void 0 ? void 0 : _errors$conditions[index]) && isNotNil((_touched$conditions = touched.conditions) === null || _touched$conditions === void 0 || (_touched$conditions = _touched$conditions.value) === null || _touched$conditions === void 0 ? void 0 : _touched$conditions[index]);
-  var handleMultiSelectOption = function handleMultiSelectOption(value) {
-    var options = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.includes(value) ? without([value], selectedOptions) : append(value, selectedOptions);
-    setFieldValue(name, options);
-  };
-  var handleClose = function handleClose() {
-    setActiveOption(null);
-    setSearchTerm("");
-  };
-  return /*#__PURE__*/React.createElement(Dropdown$1, {
-    buttonStyle: "secondary",
-    className: "neeto-ui-bg-gray-100",
-    closeOnSelect: false,
-    position: "top-start",
-    customTarget: isNotEmpty(options) ? /*#__PURE__*/React.createElement("span", {
-      className: "flex flex-wrap gap-y-1"
-    }, options.map(function (option, idx) {
-      var _option$label;
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: idx
-      }, !!idx && /*#__PURE__*/React.createElement(Typography, {
-        className: "neeto-ui-text-gray-700 mr-1 mt-1",
-        style: "h5",
-        weight: "normal"
-      }, t$1("neetoRules.common.or")), /*#__PURE__*/React.createElement(Typography, {
-        "data-cy": "condition-value-multi-select-field",
-        style: "h5",
-        weight: "semibold",
-        className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mr-1 mt-1 cursor-pointer underline", {
-          "neeto-ui-text-primary-800": activeOption === option.value
-        }),
-        onClick: function onClick() {
-          setTouched(assocPath(["conditions", "value", index], true, touched));
-          setActiveOption(activeOption ? null : option.value);
-        }
-      }, option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase()));
-    })) : /*#__PURE__*/React.createElement(Typography, {
-      "data-cy": "condition-value-multi-select-field",
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": activeOption === defaultLabel,
-        "neeto-ui-text-error-500": isValid
-      }),
-      onClick: function onClick() {
-        setTouched(assocPath(["conditions", "value", index], true, touched));
-        setActiveOption(activeOption ? null : defaultLabel);
-      }
-    }, defaultLabel),
-    onClose: handleClose
-  }, /*#__PURE__*/React.createElement(Menu$4, {
-    className: "max-h-60 max-w-2xl p-3"
-  }, dropDownOptions.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/React.createElement(Input$1, {
-    autoFocus: true,
-    className: "mb-1",
-    "data-cy": "search-text-field",
-    placeholder: t$1("neetoRules.common.search"),
-    prefix: /*#__PURE__*/React.createElement(Search, null),
-    value: searchTerm,
-    onChange: function onChange(e) {
-      return setSearchTerm(e.target.value);
-    }
-  }), /*#__PURE__*/React.createElement(OptionsWrapper, {
-    hasScroll: dropDownOptions.length > MAXIMUM_OPTION_LENGTH$2
-  }, searchedOptions.map(function (option, idx) {
-    return /*#__PURE__*/React.createElement(MenuItem$4.Button, {
-      "data-cy": "".concat(joinHyphenCase(option.label), "-menu-item"),
-      key: idx,
-      prefix: /*#__PURE__*/React.createElement(Checkbox, {
-        checked: selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.includes(option.value),
-        "data-cy": "check-icon",
-        id: option.value
-      }),
-      onClick: function onClick() {
-        return handleMultiSelectOption(option.value);
-      }
-    }, option.label);
-  })), isEmpty(dropDownOptions) && /*#__PURE__*/React.createElement(MenuItem$4.Button, {
-    "data-cy": "no-options-menu-item"
-  }, t$1("neetoRules.common.noOptions"))));
-};
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+      args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+      _next(undefined);
+    });
+  };
+}
+
+var regeneratorRuntime$1 = {exports: {}};
+
+var _typeof = {exports: {}};
+
+_typeof.exports;
+
+(function (module) {
+	function _typeof(obj) {
+	  "@babel/helpers - typeof";
+
+	  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+	    return typeof obj;
+	  } : function (obj) {
+	    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
+	}
+	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
+} (_typeof));
+
+var _typeofExports = _typeof.exports;
+
+regeneratorRuntime$1.exports;
+
+(function (module) {
+	var _typeof = _typeofExports["default"];
+	function _regeneratorRuntime() {
+	  module.exports = _regeneratorRuntime = function _regeneratorRuntime() {
+	    return exports;
+	  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+	  var exports = {},
+	    Op = Object.prototype,
+	    hasOwn = Op.hasOwnProperty,
+	    defineProperty = Object.defineProperty || function (obj, key, desc) {
+	      obj[key] = desc.value;
+	    },
+	    $Symbol = "function" == typeof Symbol ? Symbol : {},
+	    iteratorSymbol = $Symbol.iterator || "@@iterator",
+	    asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
+	    toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+	  function define(obj, key, value) {
+	    return Object.defineProperty(obj, key, {
+	      value: value,
+	      enumerable: !0,
+	      configurable: !0,
+	      writable: !0
+	    }), obj[key];
+	  }
+	  try {
+	    define({}, "");
+	  } catch (err) {
+	    define = function define(obj, key, value) {
+	      return obj[key] = value;
+	    };
+	  }
+	  function wrap(innerFn, outerFn, self, tryLocsList) {
+	    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
+	      generator = Object.create(protoGenerator.prototype),
+	      context = new Context(tryLocsList || []);
+	    return defineProperty(generator, "_invoke", {
+	      value: makeInvokeMethod(innerFn, self, context)
+	    }), generator;
+	  }
+	  function tryCatch(fn, obj, arg) {
+	    try {
+	      return {
+	        type: "normal",
+	        arg: fn.call(obj, arg)
+	      };
+	    } catch (err) {
+	      return {
+	        type: "throw",
+	        arg: err
+	      };
+	    }
+	  }
+	  exports.wrap = wrap;
+	  var ContinueSentinel = {};
+	  function Generator() {}
+	  function GeneratorFunction() {}
+	  function GeneratorFunctionPrototype() {}
+	  var IteratorPrototype = {};
+	  define(IteratorPrototype, iteratorSymbol, function () {
+	    return this;
+	  });
+	  var getProto = Object.getPrototypeOf,
+	    NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+	  NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
+	  var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
+	  function defineIteratorMethods(prototype) {
+	    ["next", "throw", "return"].forEach(function (method) {
+	      define(prototype, method, function (arg) {
+	        return this._invoke(method, arg);
+	      });
+	    });
+	  }
+	  function AsyncIterator(generator, PromiseImpl) {
+	    function invoke(method, arg, resolve, reject) {
+	      var record = tryCatch(generator[method], generator, arg);
+	      if ("throw" !== record.type) {
+	        var result = record.arg,
+	          value = result.value;
+	        return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
+	          invoke("next", value, resolve, reject);
+	        }, function (err) {
+	          invoke("throw", err, resolve, reject);
+	        }) : PromiseImpl.resolve(value).then(function (unwrapped) {
+	          result.value = unwrapped, resolve(result);
+	        }, function (error) {
+	          return invoke("throw", error, resolve, reject);
+	        });
+	      }
+	      reject(record.arg);
+	    }
+	    var previousPromise;
+	    defineProperty(this, "_invoke", {
+	      value: function value(method, arg) {
+	        function callInvokeWithMethodAndArg() {
+	          return new PromiseImpl(function (resolve, reject) {
+	            invoke(method, arg, resolve, reject);
+	          });
+	        }
+	        return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+	      }
+	    });
+	  }
+	  function makeInvokeMethod(innerFn, self, context) {
+	    var state = "suspendedStart";
+	    return function (method, arg) {
+	      if ("executing" === state) throw new Error("Generator is already running");
+	      if ("completed" === state) {
+	        if ("throw" === method) throw arg;
+	        return doneResult();
+	      }
+	      for (context.method = method, context.arg = arg;;) {
+	        var delegate = context.delegate;
+	        if (delegate) {
+	          var delegateResult = maybeInvokeDelegate(delegate, context);
+	          if (delegateResult) {
+	            if (delegateResult === ContinueSentinel) continue;
+	            return delegateResult;
+	          }
+	        }
+	        if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
+	          if ("suspendedStart" === state) throw state = "completed", context.arg;
+	          context.dispatchException(context.arg);
+	        } else "return" === context.method && context.abrupt("return", context.arg);
+	        state = "executing";
+	        var record = tryCatch(innerFn, self, context);
+	        if ("normal" === record.type) {
+	          if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
+	          return {
+	            value: record.arg,
+	            done: context.done
+	          };
+	        }
+	        "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
+	      }
+	    };
+	  }
+	  function maybeInvokeDelegate(delegate, context) {
+	    var methodName = context.method,
+	      method = delegate.iterator[methodName];
+	    if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel;
+	    var record = tryCatch(method, delegate.iterator, context.arg);
+	    if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
+	    var info = record.arg;
+	    return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
+	  }
+	  function pushTryEntry(locs) {
+	    var entry = {
+	      tryLoc: locs[0]
+	    };
+	    1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
+	  }
+	  function resetTryEntry(entry) {
+	    var record = entry.completion || {};
+	    record.type = "normal", delete record.arg, entry.completion = record;
+	  }
+	  function Context(tryLocsList) {
+	    this.tryEntries = [{
+	      tryLoc: "root"
+	    }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
+	  }
+	  function values(iterable) {
+	    if (iterable) {
+	      var iteratorMethod = iterable[iteratorSymbol];
+	      if (iteratorMethod) return iteratorMethod.call(iterable);
+	      if ("function" == typeof iterable.next) return iterable;
+	      if (!isNaN(iterable.length)) {
+	        var i = -1,
+	          next = function next() {
+	            for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
+	            return next.value = undefined, next.done = !0, next;
+	          };
+	        return next.next = next;
+	      }
+	    }
+	    return {
+	      next: doneResult
+	    };
+	  }
+	  function doneResult() {
+	    return {
+	      value: undefined,
+	      done: !0
+	    };
+	  }
+	  return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", {
+	    value: GeneratorFunctionPrototype,
+	    configurable: !0
+	  }), defineProperty(GeneratorFunctionPrototype, "constructor", {
+	    value: GeneratorFunction,
+	    configurable: !0
+	  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
+	    var ctor = "function" == typeof genFun && genFun.constructor;
+	    return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
+	  }, exports.mark = function (genFun) {
+	    return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
+	  }, exports.awrap = function (arg) {
+	    return {
+	      __await: arg
+	    };
+	  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+	    return this;
+	  }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+	    void 0 === PromiseImpl && (PromiseImpl = Promise);
+	    var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
+	    return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
+	      return result.done ? result.value : iter.next();
+	    });
+	  }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
+	    return this;
+	  }), define(Gp, "toString", function () {
+	    return "[object Generator]";
+	  }), exports.keys = function (val) {
+	    var object = Object(val),
+	      keys = [];
+	    for (var key in object) keys.push(key);
+	    return keys.reverse(), function next() {
+	      for (; keys.length;) {
+	        var key = keys.pop();
+	        if (key in object) return next.value = key, next.done = !1, next;
+	      }
+	      return next.done = !0, next;
+	    };
+	  }, exports.values = values, Context.prototype = {
+	    constructor: Context,
+	    reset: function reset(skipTempReset) {
+	      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
+	    },
+	    stop: function stop() {
+	      this.done = !0;
+	      var rootRecord = this.tryEntries[0].completion;
+	      if ("throw" === rootRecord.type) throw rootRecord.arg;
+	      return this.rval;
+	    },
+	    dispatchException: function dispatchException(exception) {
+	      if (this.done) throw exception;
+	      var context = this;
+	      function handle(loc, caught) {
+	        return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
+	      }
+	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+	        var entry = this.tryEntries[i],
+	          record = entry.completion;
+	        if ("root" === entry.tryLoc) return handle("end");
+	        if (entry.tryLoc <= this.prev) {
+	          var hasCatch = hasOwn.call(entry, "catchLoc"),
+	            hasFinally = hasOwn.call(entry, "finallyLoc");
+	          if (hasCatch && hasFinally) {
+	            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+	            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+	          } else if (hasCatch) {
+	            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+	          } else {
+	            if (!hasFinally) throw new Error("try statement without catch or finally");
+	            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+	          }
+	        }
+	      }
+	    },
+	    abrupt: function abrupt(type, arg) {
+	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+	        var entry = this.tryEntries[i];
+	        if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
+	          var finallyEntry = entry;
+	          break;
+	        }
+	      }
+	      finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
+	      var record = finallyEntry ? finallyEntry.completion : {};
+	      return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
+	    },
+	    complete: function complete(record, afterLoc) {
+	      if ("throw" === record.type) throw record.arg;
+	      return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
+	    },
+	    finish: function finish(finallyLoc) {
+	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+	        var entry = this.tryEntries[i];
+	        if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
+	      }
+	    },
+	    "catch": function _catch(tryLoc) {
+	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+	        var entry = this.tryEntries[i];
+	        if (entry.tryLoc === tryLoc) {
+	          var record = entry.completion;
+	          if ("throw" === record.type) {
+	            var thrown = record.arg;
+	            resetTryEntry(entry);
+	          }
+	          return thrown;
+	        }
+	      }
+	      throw new Error("illegal catch attempt");
+	    },
+	    delegateYield: function delegateYield(iterable, resultName, nextLoc) {
+	      return this.delegate = {
+	        iterator: values(iterable),
+	        resultName: resultName,
+	        nextLoc: nextLoc
+	      }, "next" === this.method && (this.arg = undefined), ContinueSentinel;
+	    }
+	  }, exports;
+	}
+	module.exports = _regeneratorRuntime, module.exports.__esModule = true, module.exports["default"] = module.exports; 
+} (regeneratorRuntime$1));
+
+var regeneratorRuntimeExports = regeneratorRuntime$1.exports;
 
-var _excluded$6 = ["name", "index"];
-var MultiSelectCreate = function MultiSelectCreate(_ref) {
-  var _conditions$value$ind, _errors$conditions, _touched$conditions;
-  var name = _ref.name,
-    index = _ref.index,
-    props = _objectWithoutProperties(_ref, _excluded$6);
-  var _useFormikContext = useFormikContext(),
-    conditions = _useFormikContext.values.conditions,
-    setFieldValue = _useFormikContext.setFieldValue,
-    errors = _useFormikContext.errors,
-    touched = _useFormikContext.touched,
-    setTouched = _useFormikContext.setTouched;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showPane = _useState2[0],
-    setShowPane = _useState2[1];
-  var initialFocusRef = useRef(null);
-  useOnButtonPressed(initialFocusRef, function () {
-    return setShowPane(false);
-  });
-  var values = (_conditions$value$ind = conditions.value[index]) === null || _conditions$value$ind === void 0 || (_conditions$value$ind = _conditions$value$ind.metadata) === null || _conditions$value$ind === void 0 ? void 0 : _conditions$value$ind.values;
-  var allOptions = getAllOptions(values);
-  var defaultLabel = t$1("neetoRules.form.selectValues");
-  var isValid = errors.conditions && isNotNil((_errors$conditions = errors.conditions) === null || _errors$conditions === void 0 || (_errors$conditions = _errors$conditions.value) === null || _errors$conditions === void 0 ? void 0 : _errors$conditions[index]) && isNotNil((_touched$conditions = touched.conditions) === null || _touched$conditions === void 0 || (_touched$conditions = _touched$conditions.value) === null || _touched$conditions === void 0 ? void 0 : _touched$conditions[index]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isEmpty(allOptions) && /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "condition-value-multi-select-create-button",
-    style: "h5",
-    weight: "semibold",
-    className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-      "neeto-ui-text-error-500": isValid
-    }),
-    onClick: function onClick() {
-      setTouched(assocPath(["conditions", "value", index], true, touched));
-      setShowPane(function (prevState) {
-        return !prevState;
-      });
-    }
-  }, defaultLabel), allOptions.map(function (option, idx) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: idx
-    }, !!idx && /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-text-gray-700 mt-1",
-      style: "h5",
-      weight: "normal"
-    }, t$1("neetoRules.common.or")), /*#__PURE__*/React.createElement(Typography, {
-      className: "hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline",
-      "data-cy": "condition-value-multi-select-create-button",
-      style: "h5",
-      weight: "semibold",
-      onClick: function onClick() {
-        return setShowPane(function (prevState) {
-          return !prevState;
-        });
-      }
-    }, option.label));
-  }), /*#__PURE__*/React.createElement(Pane, {
-    initialFocusRef: initialFocusRef,
-    isOpen: showPane,
-    size: "large",
-    onClose: function onClose() {
-      return setShowPane(false);
-    }
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-700",
-    "data-cy": "multi-select-create-pane-header-title",
-    style: "h3"
-  }, t$1("neetoRules.labels.multipleValues"))), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Select, _extends({
-    isMulti: true,
-    className: "mt-4 w-full",
-    "data-cy": "multi-select-create-container",
-    defaultValue: allOptions,
-    innerRef: initialFocusRef,
-    label: t$1("neetoRules.labels.selectValues"),
-    onChange: function onChange(options) {
-      return setFieldValue(name, options.map(function (option) {
-        return option.value;
-      }));
-    }
-  }, props))), /*#__PURE__*/React.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "save-changes-button",
-    label: t$1("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React.createElement(Button, {
-    label: t$1("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }))));
-};
+// TODO(Babel 8): Remove this file.
+
+var runtime = regeneratorRuntimeExports();
+var regenerator = runtime;
+
+// Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
+try {
+  regeneratorRuntime = runtime;
+} catch (accidentalStrictMode) {
+  if (typeof globalThis === "object") {
+    globalThis.regeneratorRuntime = runtime;
+  } else {
+    Function("r", "regeneratorRuntime = r")(runtime);
+  }
+}
+
+var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 
 var DateField = function DateField(_ref) {
   var _conditions$value$ind, _errors$conditions, _touched$conditions;
@@ -4679,5 +4681,5 @@ NeetoRules.Card = Card;
 NeetoRules.MultiSelectField = MultiSelectField;
 NeetoRules.EventConditions = EventConditions;
 
-export { NeetoRules as NeetoRulesForm, RulePreview, NeetoRules$1 as default };
+export { NeetoRules as NeetoRulesForm, RulePreview, NeetoRules$1 as default, useCustomDataStore };
 //# sourceMappingURL=index.js.map