@bigbinary/neeto-rules-frontend 0.6.1 → 0.6.3

package/dist/index.cjs.js

@@ -8,7 +8,7 @@ var shallow = require('zustand/shallow');
 var classNames$1 = require('classnames');
 var formik = require('formik');
 var neetoCist = require('@bigbinary/neeto-cist');
-var formik$1 = require('@bigbinary/neetoui/formik');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var i18next = require('i18next');
 var PhoneNumber = require('@bigbinary/neeto-molecules/PhoneNumber');
 var yup = require('yup');
@@ -16,13 +16,29 @@ var neetoEditor = require('@bigbinary/neeto-editor');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var zustand = require('zustand');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
-var neetoui = require('@bigbinary/neetoui');
+var Pane = require('@bigbinary/neetoui/Pane');
+var Typography = require('@bigbinary/neetoui/Typography');
 var reactI18next = require('react-i18next');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var Button = require('@bigbinary/neetoui/Button');
 var ramda = require('ramda');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var Dropdown$1 = require('@bigbinary/neetoui/Dropdown');
+var Input$2 = require('@bigbinary/neetoui/Input');
+var Textarea = require('@bigbinary/neetoui/formik/Textarea');
+var Label = require('@bigbinary/neetoui/Label');
+var Select$1 = require('@bigbinary/neetoui/Select');
+var dayjs = require('dayjs');
+var DatePicker = require('@bigbinary/neetoui/DatePicker');
+var MultiEmailInput = require('@bigbinary/neetoui/formik/MultiEmailInput');
+var Input$3 = require('@bigbinary/neetoui/formik/Input');
 var useHotkeys = require('@bigbinary/neeto-hotkeys');
+var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var reactDom = require('react-dom');
+var Tag = require('@bigbinary/neetoui/Tag');
+var Tooltip = require('@bigbinary/neetoui/Tooltip');
+var Select$2 = require('@bigbinary/neetoui/formik/Select');
+var Radio = require('@bigbinary/neetoui/formik/Radio');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -47,9 +63,27 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames$1);
+var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown$1);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input$2);
+var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
+var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select$1);
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
+var MultiEmailInput__default = /*#__PURE__*/_interopDefaultLegacy(MultiEmailInput);
+var Input__default$1 = /*#__PURE__*/_interopDefaultLegacy(Input$3);
 var useHotkeys__default = /*#__PURE__*/_interopDefaultLegacy(useHotkeys);
+var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
+var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
+var Select__default$1 = /*#__PURE__*/_interopDefaultLegacy(Select$2);
+var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
 
 function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure " + obj);
@@ -125,8 +159,6 @@ function _objectWithoutProperties$1(source, excluded) {
   return target;
 }
 
-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;
 }
@@ -338,8 +370,8 @@ var CONDITION_VALUE_TYPES = {
 var INPUT_FIELD_TYPES = ["email", "text", "number", "decimal", "url", "regex"];
 var MAXIMUM_OPTION_LENGTH$2 = 7;
 
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getSchemaForStrings = function getSchemaForStrings(element) {
   var label = element.label,
     _element$componentPro = element.componentProps,
@@ -565,7 +597,7 @@ var getSchemaForElement = function getSchemaForElement(element, customData) {
 var getValidationSchema = function getValidationSchema(data, customData) {
   var fieldKeys = Object.keys(data);
   var schema = fieldKeys.reduce(function (acc, key) {
-    return _objectSpread$9(_objectSpread$9({}, acc), {}, _defineProperty$1({}, key, yup__namespace.object({
+    return _objectSpread$a(_objectSpread$a({}, acc), {}, _defineProperty$1({}, key, yup__namespace.object({
       value: getSchemaForElement(data[key], customData)
     })));
   }, {});
@@ -588,8 +620,8 @@ var VALIDATION_SCHEMA = (_VALIDATION_SCHEMA = {}, _defineProperty$1(_VALIDATION_
 var DECIMAL_NUMBER_REGEX = /^\d*\.?\d+$/;
 var POSITIVE_NUMBER_REGEX = /^[0-9]+$/;
 
-function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var buildPayload = function buildPayload(data, values) {
   return Object.keys(data).reduce(function (acc, key) {
     var fieldValue = values[key].value;
@@ -599,26 +631,26 @@ var buildPayload = function buildPayload(data, values) {
         var _fieldValue;
         fieldValue = (_fieldValue = fieldValue) === null || _fieldValue === void 0 ? void 0 : _fieldValue.map(function (conditionGroup) {
           var _conditionGroup$condi;
-          return _objectSpread$8(_objectSpread$8({}, conditionGroup), {}, {
+          return _objectSpread$9(_objectSpread$9({}, conditionGroup), {}, {
             conditions: [].concat(_toConsumableArray$1(conditionGroup.conditions.value), _toConsumableArray$1(((_conditionGroup$condi = conditionGroup.conditions) === null || _conditionGroup$condi === void 0 ? void 0 : _conditionGroup$condi.deleted) || []))
           });
         });
       }
       fieldValue = [].concat(_toConsumableArray$1(fieldValue), _toConsumableArray$1(((_values$key = values[key]) === null || _values$key === void 0 ? void 0 : _values$key.deleted) || []));
     }
-    return _objectSpread$8(_objectSpread$8({}, acc), {}, _defineProperty$1({}, key, fieldValue));
+    return _objectSpread$9(_objectSpread$9({}, acc), {}, _defineProperty$1({}, key, fieldValue));
   }, {});
 };
 var formatData = function formatData(data) {
   return Object.keys(data).reduce(function (acc, key) {
     var value = data[key].type === FIELD_TYPES.conditionGroup ? data[key].value.map(function (conditionGroup) {
-      return _objectSpread$8(_objectSpread$8({}, conditionGroup), {}, {
+      return _objectSpread$9(_objectSpread$9({}, conditionGroup), {}, {
         conditions: {
           value: conditionGroup.conditions
         }
       });
     }) : data[key].value;
-    return _objectSpread$8(_objectSpread$8({}, acc), {}, _defineProperty$1({}, key, {
+    return _objectSpread$9(_objectSpread$9({}, acc), {}, _defineProperty$1({}, key, {
       value: value
     }));
   }, {});
@@ -682,9 +714,9 @@ var ScrollToErrorField = function ScrollToErrorField(_ref) {
   return null;
 };
 
-var _excluded$g = ["isSubmitting", "dirty", "values"];
-function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$g = ["dirty", "values"];
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var NeetoRules$2 = function NeetoRules(_ref) {
   var _ref$data = _ref.data,
     data = _ref$data === void 0 ? {} : _ref$data,
@@ -714,14 +746,13 @@ var NeetoRules$2 = function NeetoRules(_ref) {
     validationSchema: getValidationSchema(data, customData),
     onSubmit: submitForm
   }, function (_ref2) {
-    var isSubmitting = _ref2.isSubmitting,
-      dirty = _ref2.dirty,
+    var dirty = _ref2.dirty,
       values = _ref2.values,
       fromikBag = _objectWithoutProperties$1(_ref2, _excluded$g);
     return /*#__PURE__*/React__default["default"].createElement(formik.Form, {
       ref: formRef,
       className: classNames__default["default"](["w-full space-y-6 px-0 md:px-14 xl:px-24", className])
-    }, typeof children === "function" ? children === null || children === void 0 ? void 0 : children(_objectSpread$7({
+    }, typeof children === "function" ? children === null || children === void 0 ? void 0 : children(_objectSpread$8({
       values: values,
       formattedValues: buildPayload(data, values),
       dirty: dirty
@@ -729,18 +760,11 @@ var NeetoRules$2 = function NeetoRules(_ref) {
       formRef: formRef
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "py-4"
-    }, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
+    }, /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
       cancelButtonProps: {
-        disabled: false,
-        onClick: function onClick() {
-          return handleCancel();
-        }
+        onClick: handleCancel
       },
       submitButtonProps: {
-        className: "mr-2",
-        htmlType: "submit",
-        disabled: isSubmitting || !dirty,
-        onClick: function onClick() {},
         "data-cy": "form-submit-button"
       }
     })));
@@ -810,7 +834,7 @@ function _slicedToArray$1(arr, i) {
 var Title = function Title(_ref) {
   var title = _ref.title,
     children = _ref.children;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800",
     style: "h5",
     weight: "semibold"
@@ -825,11 +849,11 @@ var MultiSelectValues = function MultiSelectValues(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, values === null || values === void 0 ? void 0 : values.map(function (value, idx) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: idx
-    }, !!idx && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, !!idx && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-700",
       style: "h5",
       weight: "normal"
-    }, separator), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, separator), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-800",
       style: "h5",
       weight: "semibold"
@@ -861,7 +885,7 @@ var ActionsDetail = function ActionsDetail(_ref) {
   };
   var renderActionValues = function renderActionValues(action, actionOption) {
     if (actionOption.type === "dropdown") {
-      return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "neeto-ui-text-gray-800",
         style: "h5",
         weight: "semibold"
@@ -886,7 +910,7 @@ var ActionsDetail = function ActionsDetail(_ref) {
       value: action.name
     }, actions.actionOptions);
     if (!actionOption) return null;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-800",
       style: "h5",
       weight: "semibold"
@@ -898,14 +922,14 @@ var ActionsDetail = function ActionsDetail(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mb-2 flex flex-wrap gap-x-1 gap-y-2",
       key: action.name
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-700",
       style: "h5",
       weight: "normal"
     }, getLabel(index)), renderAction(action));
   }), actionsList.length > 4 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mt-3 w-full"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     icon: !viewMore ? neetoIcons.Down : neetoIcons.Up,
     size: "small",
     style: "link",
@@ -928,7 +952,7 @@ var ConditionsDetail = function ConditionsDetail(_ref) {
   var renderConditionValues = function renderConditionValues(condition, conditionOption) {
     if (["email", "text", "number"].includes(conditionOption.type)) {
       var _condition$metadata$v;
-      return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "neeto-ui-text-gray-800",
         style: "h5",
         weight: "semibold"
@@ -945,7 +969,7 @@ var ConditionsDetail = function ConditionsDetail(_ref) {
       });
     }
     if (conditionOption.type === "dropdown") {
-      return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "neeto-ui-text-gray-800",
         style: "h5",
         weight: "semibold"
@@ -960,11 +984,11 @@ var ConditionsDetail = function ConditionsDetail(_ref) {
     }, conditionOptions);
     if (!conditionOption) return null;
     var conditionVerb = (_conditionVerbs$condi = conditionVerbs[condition.verb]) === null || _conditionVerbs$condi === void 0 ? void 0 : _conditionVerbs$condi.toLowerCase();
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-800",
       style: "h5",
       weight: "semibold"
-    }, conditionOption === null || conditionOption === void 0 ? void 0 : conditionOption.label.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, conditionOption === null || conditionOption === void 0 ? void 0 : conditionOption.label.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-800",
       style: "h5",
       weight: "semibold"
@@ -976,17 +1000,17 @@ var ConditionsDetail = function ConditionsDetail(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mb-2 flex flex-wrap gap-x-2 gap-y-2",
       key: condition.id
-    }, !index && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, !index && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-700",
       style: "h5",
       weight: "normal"
     }, i18next.t("neetoRules.common.and", {
       what: ""
-    })), !!index && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    })), !!index && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-800",
       style: "h5",
       weight: "semibold"
-    }, getLogicOperator(condition.joinType)), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, getLogicOperator(condition.joinType)), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-700",
       style: "h5",
       weight: "normal"
@@ -1020,24 +1044,24 @@ var EventsDetail = function EventsDetail(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex gap-x-2",
       key: index
-    }, !index && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, !index && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-700 my-auto",
       style: "h5",
       weight: "normal"
-    }, i18next.t("neetoRules.common.when")), !!index && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, i18next.t("neetoRules.common.when")), !!index && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-700 my-auto",
       style: "h5",
       weight: "normal"
-    }, i18next.t("neetoRules.common.or")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, i18next.t("neetoRules.common.or")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-800",
       style: "h5",
       weight: "semibold"
     }, event.label.toLowerCase()));
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700",
     style: "h5",
     weight: "normal"
-  }, i18next.t("neetoRules.common.by")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, i18next.t("neetoRules.common.by")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800",
     style: "h5",
     weight: "semibold"
@@ -1047,7 +1071,7 @@ var EventsDetail = function EventsDetail(_ref) {
     conditions: allConditions
   }), conditionsList.length > 3 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mt-3 w-full"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     icon: !viewMore ? neetoIcons.Down : neetoIcons.Up,
     size: "small",
     style: "link",
@@ -1068,37 +1092,37 @@ var RulePreview = function RulePreview(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   if (isLoading) return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  return /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
     isOpen: isOpen,
     onClose: onClose
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h2",
     weight: "semibold"
-  }, t("neetoRules.labels.ruleSummary"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, t("neetoRules.labels.ruleSummary"))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-rounded mb-4 border p-4"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mb-3 flex flex-wrap justify-between gap-x-4"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 my-auto",
     style: "h5",
     weight: "semibold"
   }, t("neetoRules.common.name")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex w-72 flex-wrap"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800 my-auto",
     style: "h5",
     weight: "normal"
   }, ruleDetails.name.value))), /*#__PURE__*/React__default["default"].createElement("hr", null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "my-3 flex flex-wrap justify-between gap-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 my-auto",
     style: "h5",
     weight: "semibold"
   }, t("neetoRules.common.description")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex w-72 flex-wrap"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800 my-auto",
     style: "h5",
     weight: "normal"
@@ -1148,6 +1172,30 @@ var useOnButtonPressed = function useOnButtonPressed(ref, handler) {
 
 var DEFAULT_LONG_TEXT_ROWS = 8;
 
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var PaneFooterBlock = function PaneFooterBlock(_ref) {
+  var setShowPane = _ref.setShowPane,
+    _ref$submitButtonProp = _ref.submitButtonProps,
+    submitButtonProps = _ref$submitButtonProp === void 0 ? {} : _ref$submitButtonProp,
+    _ref$cancelButtonProp = _ref.cancelButtonProps,
+    cancelButtonProps = _ref$cancelButtonProp === void 0 ? {} : _ref$cancelButtonProp;
+  return /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
+    cancelButtonProps: _objectSpread$7({
+      "data-cy": "cancel-button",
+      onClick: function onClick() {
+        return setShowPane(false);
+      }
+    }, cancelButtonProps),
+    submitButtonProps: _objectSpread$7({
+      "data-cy": "save-changes-button",
+      onClick: function onClick() {
+        return setShowPane(false);
+      }
+    }, submitButtonProps)
+  });
+};
+
 var LongTextField = function LongTextField(_ref) {
   var _errors$actions, _touched$actions, _selectedField$separa;
   var name = _ref.name,
@@ -1161,8 +1209,6 @@ var LongTextField = function LongTextField(_ref) {
   var _useFormikContext = formik.useFormikContext(),
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray$1(_useState, 2),
     showPane = _useState2[0],
@@ -1175,12 +1221,12 @@ var LongTextField = function LongTextField(_ref) {
   var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || defaultSeparator;
   var label = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || defaultLabel;
   var rows = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.rows) || DEFAULT_LONG_TEXT_ROWS;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, separator && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, separator && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "long-text-action-separator-text",
     style: "h5",
     weight: "normal"
-  }, separator), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, separator), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "long-text-action-button",
     style: "h5",
     weight: "semibold",
@@ -1193,38 +1239,26 @@ var LongTextField = function LongTextField(_ref) {
         return !prevState;
       });
     }
-  }, label.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  }, label.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
     initialFocusRef: initialFocusRef,
     isOpen: showPane,
     size: "large",
     onClose: function onClose() {
       return setShowPane(false);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800",
     "data-cy": "long-text-action-pane-header-title",
     style: "h3",
     weight: "semibold"
-  }, label)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(formik$1.Textarea, {
+  }, label)), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement(Textarea__default["default"], {
     name: name,
     rows: rows,
     value: value,
     required: true,
     className: "w-full"
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "save-changes-button",
-    label: t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  })), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, null, /*#__PURE__*/React__default["default"].createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
@@ -1253,7 +1287,7 @@ var InputField$2 = function InputField(_ref) {
     _useField2 = _slicedToArray$1(_useField, 2),
     field = _useField2[0],
     meta = _useField2[1];
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends$1({
+  return /*#__PURE__*/React__default["default"].createElement(Input__default["default"], _extends$1({
     label: label,
     type: "text"
   }, field, {
@@ -1305,7 +1339,7 @@ var KeyValuePairsField = reactUtils.withT(function (_ref) {
     var showDeleteButton = data.length > 1 || hasKeyOrValue(data[0]);
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "space-y-3"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, label), data.map(function (_, index) {
+    }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, label), data.map(function (_, index) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex h-8 space-x-3",
         key: index
@@ -1317,7 +1351,7 @@ var KeyValuePairsField = reactUtils.withT(function (_ref) {
         className: "w-3/5",
         name: "".concat(name, ".").concat(index, ".value"),
         placeholder: t("neetoRules.labels.value"),
-        suffix: showDeleteButton && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+        suffix: showDeleteButton && /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
           icon: neetoIcons.Delete,
           size: "small",
           style: "text",
@@ -1330,7 +1364,7 @@ var KeyValuePairsField = reactUtils.withT(function (_ref) {
           }
         })
       }));
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       label: t("neetoRules.labels.addKeyValuePair"),
       style: "secondary",
       onClick: function onClick() {
@@ -1359,7 +1393,7 @@ var SelectTemplateField = function SelectTemplateField(_ref) {
     }, templates);
     onChange === null || onChange === void 0 || onChange(template);
   };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
+  return /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
     isClearable: true,
     isSearchable: true,
     className: "mb-4",
@@ -1403,12 +1437,12 @@ var ApiFields = function ApiFields(_ref) {
     setFieldValue("".concat(name, ".endpoint"), template.endpoint);
     setFieldValue("".concat(name, ".additionalData"), template.additionalData);
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "api-action-separator-text",
     style: "h5",
     weight: "normal"
-  }, separator), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, separator), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "api-action-button",
     style: "h5",
     weight: "semibold",
@@ -1421,19 +1455,19 @@ var ApiFields = function ApiFields(_ref) {
         return !prevState;
       });
     }
-  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
     initialFocusRef: initialFocusRef,
     isOpen: showPane,
     size: "large",
     onClose: function onClose() {
       return setShowPane(false);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800 cursor-pointer",
     "data-cy": "api-action-pane-header-title",
     style: "h3",
     weight: "semibold"
-  }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full"
   }, isTemplateSelectionEnabled && /*#__PURE__*/React__default["default"].createElement(SelectTemplateField, {
     initialFocusRef: initialFocusRef,
@@ -1451,21 +1485,8 @@ var ApiFields = function ApiFields(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement(KeyValuePairsField, {
     label: t("neetoRules.labels.additionalData"),
     name: "".concat(name, ".additionalData")
-  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "save-changes-button",
-    label: t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "cancel-button",
-    label: t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  }))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, null, /*#__PURE__*/React__default["default"].createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
@@ -1479,6 +1500,8 @@ var CustomAction = function CustomAction(_ref) {
   var _useFormikContext = formik.useFormikContext(),
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray$1(_useState, 2),
     showPane = _useState2[0],
@@ -1488,13 +1511,13 @@ var CustomAction = function CustomAction(_ref) {
     return setShowPane(false);
   });
   var isValid = errors.actions && ramda.isNotNil((_errors$actions = errors.actions) === null || _errors$actions === void 0 || (_errors$actions = _errors$actions.value) === null || _errors$actions === void 0 ? void 0 : _errors$actions[index]) && ramda.isNotNil((_touched$actions = touched.actions) === null || _touched$actions === void 0 || (_touched$actions = _touched$actions.value) === null || _touched$actions === void 0 ? void 0 : _touched$actions[index]);
-  var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || i18next.t("neetoRules.common.as");
+  var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || t("neetoRules.common.as");
   var defaultLabel = selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     style: "h5",
     weight: "normal"
-  }, separator), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, separator), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h5",
     weight: "semibold",
     className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
@@ -1506,48 +1529,25 @@ var CustomAction = function CustomAction(_ref) {
         return !prevState;
       });
     }
-  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
     initialFocusRef: initialFocusRef,
     isOpen: showPane,
     size: "large",
     onClose: function onClose() {
       return setShowPane(false);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800 cursor-pointer",
     style: "h3",
     weight: "semibold"
-  }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(ActionComponent, {
+  }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement(ActionComponent, {
     action: action,
     name: name
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "save-changes-button",
-    label: i18next.t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: i18next.t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  })), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, null, /*#__PURE__*/React__default["default"].createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
-var dayjs_min = {exports: {}};
-
-dayjs_min.exports;
-
-(function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
-} (dayjs_min, dayjs_min.exports));
-
-var dayjs_minExports = dayjs_min.exports;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
 var DateField$1 = function DateField(_ref) {
   var _actions$value$index$, _selectedField$separa, _errors$actions, _touched$actions;
   var name = _ref.name,
@@ -1567,18 +1567,18 @@ var DateField$1 = function DateField(_ref) {
   var label = valueTerm || i18next.t("neetoRules.form.selectDate").toLowerCase();
   var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || i18next.t("neetoRules.common.to");
   var isValid = errors.actions && ramda.isNotNil((_errors$actions = errors.actions) === null || _errors$actions === void 0 || (_errors$actions = _errors$actions.value) === null || _errors$actions === void 0 ? void 0 : _errors$actions[index]) && ramda.isNotNil((_touched$actions = touched.actions) === null || _touched$actions === void 0 || (_touched$actions = _touched$actions.value) === null || _touched$actions === void 0 ? void 0 : _touched$actions[index]);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !selectedField.hideSeparator && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !selectedField.hideSeparator && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "action-dropdown-seperator-text",
     style: "h5",
     weight: "normal"
-  }, separator), showInput ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, {
+  }, separator), showInput ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DatePicker__default["default"], {
     autoFocus: true,
     defaultValue: valueTerm,
     name: "".concat(name, ".value"),
     type: "date",
     onChange: function onChange(date) {
-      return setFieldValue("".concat(name, ".value"), date ? dayjs(date).format("YYYY-MM-DD") : "");
+      return setFieldValue("".concat(name, ".value"), date ? dayjs__default["default"](date).format("YYYY-MM-DD") : "");
     }
   }), /*#__PURE__*/React__default["default"].createElement(neetoIcons.Check, {
     className: "cursor-pointer",
@@ -1587,7 +1587,7 @@ var DateField$1 = function DateField(_ref) {
         return !prevState;
       });
     }
-  })) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  })) : /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h5",
     weight: "semibold",
     className: classNames__default["default"]("neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline", {
@@ -1669,8 +1669,8 @@ var getSlackChannelErrors = function getSlackChannelErrors(slackChannels, action
   };
 };
 
-var Menu$a = neetoui.Dropdown.Menu,
-  MenuItem$9 = neetoui.Dropdown.MenuItem;
+var Menu$a = Dropdown__default["default"].Menu,
+  MenuItem$9 = Dropdown__default["default"].MenuItem;
 var DropdownField$1 = function DropdownField(_ref) {
   var _actions$value$index$, _actions$value$index, _errors$actions, _touched$actions, _selectedField$separa, _defaultSelectedOptio;
   var dropdownOptions = _ref.dropdownOptions,
@@ -1732,15 +1732,15 @@ var DropdownField$1 = function DropdownField(_ref) {
   React.useEffect(function () {
     findDefaultSelectedOption();
   }, [defaultValue, dropdownOptions]);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !selectedField.hideSeparator && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !selectedField.hideSeparator && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "action-dropdown-seperator-text",
     style: "h5",
     weight: "normal"
-  }, separator), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+  }, separator), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
-    customTarget: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    customTarget: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       "data-cy": "action-dropdown-button",
       style: "h5",
       weight: "semibold",
@@ -1758,7 +1758,7 @@ var DropdownField$1 = function DropdownField(_ref) {
     onClose: handleClose
   }, /*#__PURE__*/React__default["default"].createElement(Menu$a, {
     className: "max-h-60 max-w-2xl p-3"
-  }, dropdownOptions.length > MAXIMUM_OPTION_LENGTH$3 && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, dropdownOptions.length > MAXIMUM_OPTION_LENGTH$3 && /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     autoFocus: true,
     className: "mb-1",
     "data-cy": "search-text-field",
@@ -1842,7 +1842,7 @@ var EmailIdFields = function EmailIdFields(_ref) {
   var formattedEmails = buildEmailValues(emails);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mb-4"
-  }, /*#__PURE__*/React__default["default"].createElement(formik$1.MultiEmailInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(MultiEmailInput__default["default"], {
     name: name,
     label: i18next.t("neetoRules.common.emailIds"),
     placeholder: i18next.t("neetoRules.placeholders.emailField"),
@@ -1906,12 +1906,12 @@ var EmailFields = function EmailFields(_ref) {
         return !isEmailIdField && selectedField.hideSubject;
     }
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "action-email-seperator-text",
     style: "h5",
     weight: "normal"
-  }, separator), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, separator), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "email-action-button",
     style: "h5",
     weight: "semibold",
@@ -1924,19 +1924,19 @@ var EmailFields = function EmailFields(_ref) {
         return !prevState;
       });
     }
-  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
     initialFocusRef: initialFocusRef,
     isOpen: showPane,
     size: "large",
     onClose: function onClose() {
       return setShowPane(false);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800 cursor-pointer",
     "data-cy": "email-action-pane-header-title",
     style: "h3",
     weight: "semibold"
-  }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full"
   }, isTemplateSelectionEnabled && /*#__PURE__*/React__default["default"].createElement(SelectTemplateField, {
     initialFocusRef: initialFocusRef,
@@ -1960,19 +1960,10 @@ var EmailFields = function EmailFields(_ref) {
     name: "".concat(name, ".body"),
     value: (_action$metadata = action.metadata) === null || _action$metadata === void 0 ? void 0 : _action$metadata.body,
     variables: selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables
-  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "email-action-save-changes-button",
-    label: t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
+  }))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, null, /*#__PURE__*/React__default["default"].createElement(PaneFooterBlock, {
+    setShowPane: setShowPane,
+    submitButtonProps: {
+      "data-cy": "email-action-save-changes-button"
     }
   }))));
 };
@@ -2024,12 +2015,12 @@ var Input$1 = function Input(_ref) {
   React.useEffect(function () {
     setShowInput(false);
   }, [action.name]);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !selectedField.hideSeparator && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !selectedField.hideSeparator && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "action-dropdown-seperator-text",
     style: "h5",
     weight: "normal"
-  }, separator), showInput ? /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+  }, separator), showInput ? /*#__PURE__*/React__default["default"].createElement(Input__default$1["default"], {
     className: "my-auto",
     name: "".concat(name, ".value"),
     placeholder: i18next.t("neetoRules.placeholders.value"),
@@ -2042,7 +2033,7 @@ var Input$1 = function Input(_ref) {
         });
       }
     })
-  }) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }) : /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h5",
     weight: "semibold",
     className: classNames__default["default"]("neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline", {
@@ -2123,7 +2114,7 @@ var InlineInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]("flex flex-grow", _defineProperty$1({}, className, className)),
     ref: inputWrapperRef
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends$1({
+  }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], _extends$1({
     autoFocus: true,
     className: "neeto-planner-inline-input",
     "data-cy": "inline-input-field",
@@ -2136,14 +2127,14 @@ var InlineInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
       return setInputValue(e.target.value);
     }
   }, otherProps, {
-    suffix: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    suffix: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       "data-cy": "inline-input-submit-button",
       disabled: !isValidValue,
       icon: neetoIcons.Check,
       style: "text",
       tooltipProps: LIST_FIELD_TOOLTIP_PROPS.save,
       onClick: onSubmit
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       ref: ref,
       "data-cy": "inline-input-cancel-button",
       icon: neetoIcons.Close,
@@ -2162,6 +2153,8 @@ var ListField = function ListField(_ref) {
     values = _ref$values === void 0 ? [] : _ref$values,
     index = _ref.index,
     selectedField = _ref.selectedField;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useFormikContext = formik.useFormikContext(),
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
@@ -2178,13 +2171,13 @@ var ListField = function ListField(_ref) {
     return setShowPane(false);
   });
   var isValid = errors.actions && ramda.isNotNil((_errors$actions = errors.actions) === null || _errors$actions === void 0 || (_errors$actions = _errors$actions.value) === null || _errors$actions === void 0 ? void 0 : _errors$actions[index]) && ramda.isNotNil((_touched$actions = touched.actions) === null || _touched$actions === void 0 || (_touched$actions = _touched$actions.value) === null || _touched$actions === void 0 ? void 0 : _touched$actions[index]);
-  var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || i18next.t("neetoRules.common.to");
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || t("neetoRules.common.to");
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "list-action-separator-text",
     style: "h5",
     weight: "normal"
-  }, separator), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, separator), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "list-action-button",
     style: "h5",
     weight: "semibold",
@@ -2197,19 +2190,19 @@ var ListField = function ListField(_ref) {
         return !prevState;
       });
     }
-  }, i18next.t("neetoRules.form.list").toLowerCase()), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  }, t("neetoRules.form.list")), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
     initialFocusRef: initialFocusRef,
     isOpen: showPane,
     size: "large",
     onClose: function onClose() {
       return setShowPane(false);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800",
     "data-cy": "list-action-pane-header-title",
     style: "h3",
     weight: "semibold"
-  }, i18next.t("neetoRules.form.list"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, t("neetoRules.form.list"))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mt-2 w-full space-y-2"
   }, /*#__PURE__*/React__default["default"].createElement(formik.FieldArray, {
     name: name
@@ -2218,11 +2211,11 @@ var ListField = function ListField(_ref) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "neeto-ui-bg-white flex flex-wrap justify-between border border-dashed px-2 py-1",
         key: "".concat(item, ".").concat(index)
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "w-4/5 overflow-x-auto",
         "data-cy": "list-action-item-label",
         style: "body2"
-      }, item), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      }, item), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
         className: "flex-shrink-0",
         "data-cy": "list-action-delete-item-button",
         icon: neetoIcons.Delete,
@@ -2236,7 +2229,7 @@ var ListField = function ListField(_ref) {
       name: name,
       className: "w-full"
     }, function (message) {
-      return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "neeto-ui-text-error-500 neeto-ui-text-gray-700 mt-1",
         "data-cy": "list-action-error-message",
         style: "h5"
@@ -2249,35 +2242,23 @@ var ListField = function ListField(_ref) {
         return arrayHelper.push(title);
       },
       ref: initialFocusRef
-    }) : /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    }) : /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       "data-cy": "list-action-add-item-button",
       icon: neetoIcons.Plus,
-      label: i18next.t("neetoRules.common.addItem"),
+      label: t("neetoRules.common.addItem"),
       ref: initialFocusRef,
       style: "text",
       onClick: function onClick() {
         return setIsInputCardOpen(true);
       }
     }));
-  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "save-changes-button",
-    label: i18next.t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: i18next.t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  }))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, null, /*#__PURE__*/React__default["default"].createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
-var Menu$9 = neetoui.Dropdown.Menu,
-  MenuItem$8 = neetoui.Dropdown.MenuItem;
+var Menu$9 = Dropdown__default["default"].Menu,
+  MenuItem$8 = Dropdown__default["default"].MenuItem;
 var MultiSelect$1 = function MultiSelect(_ref) {
   var _selectedField$placeh, _selectedField$separa, _errors$actions, _touched$actions;
   var _ref$values = _ref.values,
@@ -2318,12 +2299,12 @@ var MultiSelect$1 = function MultiSelect(_ref) {
     setActiveOption(null);
     setSearchTerm("");
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !selectedField.hideSeparator && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !selectedField.hideSeparator && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "multi-select-action-separator-text",
     style: "h5",
     weight: "normal"
-  }, separator), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+  }, separator), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-10",
     closeOnSelect: false,
@@ -2334,7 +2315,7 @@ var MultiSelect$1 = function MultiSelect(_ref) {
       return /*#__PURE__*/React__default["default"].createElement("span", {
         className: "flex flex-wrap",
         key: idx
-      }, !!idx && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      }, !!idx && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "neeto-ui-text-gray-700 mr-1 mt-1",
         style: "h5",
         weight: "normal",
@@ -2343,7 +2324,7 @@ var MultiSelect$1 = function MultiSelect(_ref) {
         }
       }, i18next.t("neetoRules.common.and", {
         what: ""
-      })), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      })), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         "data-cy": "multi-select-action-button",
         style: "h5",
         weight: "semibold",
@@ -2355,7 +2336,7 @@ var MultiSelect$1 = function MultiSelect(_ref) {
           setActiveOption(activeOption ? null : option === null || option === void 0 ? void 0 : option.value);
         }
       }, option === null || option === void 0 ? void 0 : option.label.toLowerCase()));
-    })) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    })) : /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       style: "h5",
       weight: "semibold",
       className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
@@ -2370,7 +2351,7 @@ var MultiSelect$1 = function MultiSelect(_ref) {
     onClose: handleClose
   }, /*#__PURE__*/React__default["default"].createElement(Menu$9, {
     className: "max-h-60 max-w-2xl p-3"
-  }, dropDownOptions.length > MAXIMUM_OPTION_LENGTH$3 && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, dropDownOptions.length > MAXIMUM_OPTION_LENGTH$3 && /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     autoFocus: true,
     className: "mb-1",
     "data-cy": "search-text-field",
@@ -2386,7 +2367,7 @@ var MultiSelect$1 = function MultiSelect(_ref) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem$8.Button, {
       "data-cy": "".concat(utils.joinHyphenCase(option.label), "-menu-item"),
       key: idx,
-      prefix: /*#__PURE__*/React__default["default"].createElement(neetoui.Checkbox, {
+      prefix: /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
         checked: values.includes(option === null || option === void 0 ? void 0 : option.value),
         "data-cy": "check-icon",
         id: option === null || option === void 0 ? void 0 : option.value
@@ -2407,6 +2388,8 @@ var NoteField = function NoteField(_ref) {
     value = _ref$value === void 0 ? "" : _ref$value,
     index = _ref.index,
     selectedField = _ref.selectedField;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useFormikContext = formik.useFormikContext(),
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched;
@@ -2419,15 +2402,15 @@ var NoteField = function NoteField(_ref) {
     return setShowPane(false);
   });
   var isValid = errors.actions && ramda.isNotNil((_errors$actions = errors.actions) === null || _errors$actions === void 0 || (_errors$actions = _errors$actions.value) === null || _errors$actions === void 0 ? void 0 : _errors$actions[index]) && ramda.isNotNil((_touched$actions = touched.actions) === null || _touched$actions === void 0 || (_touched$actions = _touched$actions.value) === null || _touched$actions === void 0 ? void 0 : _touched$actions[index]);
-  var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || i18next.t("neetoRules.common.as");
+  var separator = (selectedField === null || selectedField === void 0 || (_selectedField$separa = selectedField.separator) === null || _selectedField$separa === void 0 ? void 0 : _selectedField$separa.toLowerCase()) || t("neetoRules.common.as");
   var variables = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables) || [];
-  var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || i18next.t("neetoRules.form.note");
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || t("neetoRules.form.note");
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "note-action-separator-text",
     style: "h5",
     weight: "normal"
-  }, separator), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, separator), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "note-action-button",
     style: "h5",
     weight: "semibold",
@@ -2440,36 +2423,24 @@ var NoteField = function NoteField(_ref) {
         return !prevState;
       });
     }
-  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
     initialFocusRef: initialFocusRef,
     isOpen: showPane,
     size: "large",
     onClose: function onClose() {
       return setShowPane(false);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800",
     "data-cy": "note-action-pane-header-title",
     style: "h3",
     weight: "semibold"
-  }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(EditorAction, {
+  }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement(EditorAction, {
     name: name,
     value: value,
     variables: variables
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "save-changes-button",
-    label: i18next.t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: i18next.t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  })), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, null, /*#__PURE__*/React__default["default"].createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
@@ -10299,7 +10270,7 @@ var ValueContainer = function ValueContainer(_ref) {
   var shouldCollapse = !isFocused && value.length > visiblePhoneNumbersCount;
   return /*#__PURE__*/React__default["default"].createElement(components.ValueContainer, _extends$1({}, props, {
     innerProps: _objectSpread$6(_objectSpread$6({}, props.innerProps), {}, _defineProperty$1({}, "data-cy", "multi-phone-number-input-container"))
-  }), shouldCollapse ? firstChild.slice(0, visiblePhoneNumbersCount) : firstChild, shouldCollapse && /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+  }), shouldCollapse ? firstChild.slice(0, visiblePhoneNumbersCount) : firstChild, shouldCollapse && /*#__PURE__*/React__default["default"].createElement(Tag__default["default"], {
     style: "secondary",
     label: t("neetoRules.labels.remainingItemsCount", {
       count: value.length - visiblePhoneNumbersCount
@@ -10393,7 +10364,7 @@ var MultiPhoneNumberInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "neeto-ui-input__wrapper neeto-ui-email-input__wrapper"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-email-input__label-wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], {
     required: true,
     className: "neeto-ui-email-input__label",
     "data-cy": "".concat(dasherize(label), "-input-label")
@@ -10513,12 +10484,12 @@ var SmsFields = function SmsFields(_ref) {
     }
     return field === "phoneNumbers" ? true : !showPhoneNumberInput;
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     "data-cy": "sms-action-separator-text",
     style: "h5",
     weight: "normal"
-  }, separator), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, separator), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "sms-action-button",
     style: "h5",
     weight: "semibold",
@@ -10531,19 +10502,19 @@ var SmsFields = function SmsFields(_ref) {
         return !prevState;
       });
     }
-  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  }, defaultLabel.toLowerCase()), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
     initialFocusRef: initialFocusRef,
     isOpen: showPane,
     size: "large",
     onClose: function onClose() {
       return setShowPane(false);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800 cursor-pointer",
     "data-cy": "sms-action-pane-header-title",
     style: "h3",
     weight: "semibold"
-  }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, defaultLabel)), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full"
   }, isTemplateSelectionEnabled && /*#__PURE__*/React__default["default"].createElement(SelectTemplateField, {
     initialFocusRef: initialFocusRef,
@@ -10564,21 +10535,8 @@ var SmsFields = function SmsFields(_ref) {
     name: "".concat(name, ".body"),
     value: (_action$metadata = action.metadata) === null || _action$metadata === void 0 ? void 0 : _action$metadata.body,
     variables: selectedField === null || selectedField === void 0 ? void 0 : selectedField.variables
-  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "save-changes-button",
-    label: t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "cancel-button",
-    label: t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  }))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, null, /*#__PURE__*/React__default["default"].createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
@@ -10750,8 +10708,8 @@ var ActionSubItems = function ActionSubItems(_ref) {
 };
 var ActionSubItem = /*#__PURE__*/React.memo(ActionSubItems);
 
-var Menu$7 = neetoui.Dropdown.Menu,
-  MenuItem$7 = neetoui.Dropdown.MenuItem;
+var Menu$7 = Dropdown__default["default"].Menu,
+  MenuItem$7 = Dropdown__default["default"].MenuItem;
 var ActionItem = function ActionItem(_ref) {
   var _errors$actions, _touched$actions, _selectedOption$label;
   var name = _ref.name,
@@ -10832,7 +10790,7 @@ var ActionItem = function ActionItem(_ref) {
     _ref3$disabledReason = _ref3.disabledReason,
     disabledReason = _ref3$disabledReason === void 0 ? "" : _ref3$disabledReason;
   var renderErrorCallout = function renderErrorCallout(message) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-white neeto-ui-bg-error-500 neeto-ui-rounded-sm -mx-4 w-full p-3",
       style: "h5"
     }, message);
@@ -10851,15 +10809,15 @@ var ActionItem = function ActionItem(_ref) {
   }, [selectedField]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mb-1 flex max-w-2xl flex-wrap gap-x-1 gap-y-2"
-  }, selectDropDownHasError && renderErrorCallout(selectDropDownErrorMessage), !isMessageToSlackAction && isDisabled && renderDisabledReason(), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, selectDropDownHasError && renderErrorCallout(selectDropDownErrorMessage), !isMessageToSlackAction && isDisabled && renderDisabledReason(), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     style: "h5",
     weight: "normal"
-  }, label), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+  }, label), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
     position: "bottom-start",
-    customTarget: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    customTarget: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       "data-cy": "action-dropdown-button",
       style: "h5",
       weight: "semibold",
@@ -10876,7 +10834,7 @@ var ActionItem = function ActionItem(_ref) {
     onClose: handleClose
   }, /*#__PURE__*/React__default["default"].createElement(Menu$7, {
     className: "max-h-60 max-w-2xl p-3"
-  }, actionOptions.length > MAXIMUM_OPTION_LENGTH$1 && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, actionOptions.length > MAXIMUM_OPTION_LENGTH$1 && /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     autoFocus: true,
     className: "mb-1",
     "data-cy": "search-text-field",
@@ -10917,7 +10875,7 @@ var ActionItem$1 = /*#__PURE__*/React.memo(ActionItem);
 var Card = function Card(_ref) {
   var title = _ref.title,
     children = _ref.children;
-  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-600",
     "data-cy": "".concat(utils.joinHyphenCase(title), "-card-title"),
     style: "h4"
@@ -10976,7 +10934,7 @@ var Actions = function Actions(_ref) {
         parentName: name
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "-mx-1 flex flex-wrap"
-      }, handleSlackChannelRefresh && action.name === "message_to_slack" && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      }, handleSlackChannelRefresh && action.name === "message_to_slack" && /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
         "data-cy": "refresh-slack-button",
         icon: neetoIcons.Refresh,
         size: 24,
@@ -10988,7 +10946,7 @@ var Actions = function Actions(_ref) {
         onClick: function onClick() {
           return handleSlackChannelRefresh();
         }
-      }), showButton && index === actions.length - 1 && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      }), showButton && index === actions.length - 1 && /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
         "data-cy": "add-action-button",
         icon: neetoIcons.Plus,
         size: 24,
@@ -11000,7 +10958,7 @@ var Actions = function Actions(_ref) {
         onClick: function onClick() {
           return arrayHelpers.push(DEFAULT_RULE_ACTION);
         }
-      }), actions.length > 1 && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      }), actions.length > 1 && /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
         "data-cy": "delete-action-button-".concat(index),
         icon: neetoIcons.Delete,
         size: 24,
@@ -11047,8 +11005,8 @@ var getAllOptions = function getAllOptions(options) {
   }) : [];
 };
 
-var Menu$6 = neetoui.Dropdown.Menu,
-  MenuItem$6 = neetoui.Dropdown.MenuItem;
+var Menu$6 = Dropdown__default["default"].Menu,
+  MenuItem$6 = Dropdown__default["default"].MenuItem;
 var DropdownField = function DropdownField(_ref) {
   var _selectedOption$label;
   var index = _ref.index,
@@ -11087,11 +11045,11 @@ var DropdownField = function DropdownField(_ref) {
   React.useEffect(function () {
     findDefaultOption();
   }, [options, conditions]);
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+  return /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
     position: "bottom-start",
-    customTarget: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    customTarget: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       "data-cy": "condition-".concat(fieldType, "-dropdown-button"),
       style: "h5",
       weight: "semibold",
@@ -11107,7 +11065,7 @@ var DropdownField = function DropdownField(_ref) {
     onClose: handleClose
   }, /*#__PURE__*/React__default["default"].createElement(Menu$6, {
     className: "max-h-60 max-w-2xl p-3"
-  }, options.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, options.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     autoFocus: true,
     className: "mb-1",
     "data-cy": "search-text-field",
@@ -11143,8 +11101,8 @@ var DropdownField = function DropdownField(_ref) {
   }, i18next.t("neetoRules.common.noOptions"))));
 };
 
-var Menu$5 = neetoui.Dropdown.Menu,
-  MenuItem$5 = neetoui.Dropdown.MenuItem;
+var Menu$5 = Dropdown__default["default"].Menu,
+  MenuItem$5 = Dropdown__default["default"].MenuItem;
 var Dropdown = function Dropdown(_ref) {
   var _conditions$value$ind, _errors$conditions, _touched$conditions, _defaultSelectedOptio;
   var name = _ref.name,
@@ -11203,10 +11161,10 @@ var Dropdown = function Dropdown(_ref) {
   React.useEffect(function () {
     findDefaultSelectedOption();
   }, [options, conditions]);
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+  return /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
-    customTarget: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    customTarget: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       "data-cy": "condition-value-dropdown-button",
       style: "h5",
       weight: "semibold",
@@ -11224,7 +11182,7 @@ var Dropdown = function Dropdown(_ref) {
     onClose: handleClose
   }, /*#__PURE__*/React__default["default"].createElement(Menu$5, {
     className: "max-h-60 max-w-2xl p-3"
-  }, options.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, options.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     autoFocus: true,
     className: "mb-1",
     "data-cy": "search-text-field",
@@ -11282,7 +11240,7 @@ var InputField$1 = function InputField(_ref) {
   React.useEffect(function () {
     setShowInput(false);
   }, [condition.verb]);
-  return showInput ? /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+  return showInput ? /*#__PURE__*/React__default["default"].createElement(Input__default$1["default"], {
     name: name,
     placeholder: placeholder,
     ref: inputRef,
@@ -11295,7 +11253,7 @@ var InputField$1 = function InputField(_ref) {
         });
       }
     })
-  }) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }) : /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h5",
     weight: "semibold",
     className: classNames__default["default"]("neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline", {
@@ -11309,8 +11267,8 @@ var InputField$1 = function InputField(_ref) {
   }, label);
 };
 
-var Menu$4 = neetoui.Dropdown.Menu,
-  MenuItem$4 = neetoui.Dropdown.MenuItem;
+var Menu$4 = Dropdown__default["default"].Menu,
+  MenuItem$4 = Dropdown__default["default"].MenuItem;
 var MultiSelect = function MultiSelect(_ref) {
   var _conditions$value$ind, _errors$conditions, _touched$conditions;
   var name = _ref.name,
@@ -11346,7 +11304,7 @@ var MultiSelect = function MultiSelect(_ref) {
     setActiveOption(null);
     setSearchTerm("");
   };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+  return /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
     closeOnSelect: false,
@@ -11357,11 +11315,11 @@ var MultiSelect = function MultiSelect(_ref) {
       var _option$label;
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         key: idx
-      }, !!idx && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      }, !!idx && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "neeto-ui-text-gray-700 mr-1 mt-1",
         style: "h5",
         weight: "normal"
-      }, i18next.t("neetoRules.common.or")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      }, i18next.t("neetoRules.common.or")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         "data-cy": "condition-value-multi-select-field",
         style: "h5",
         weight: "semibold",
@@ -11373,7 +11331,7 @@ var MultiSelect = function MultiSelect(_ref) {
           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__default["default"].createElement(neetoui.Typography, {
+    })) : /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       "data-cy": "condition-value-multi-select-field",
       style: "h5",
       weight: "semibold",
@@ -11389,7 +11347,7 @@ var MultiSelect = function MultiSelect(_ref) {
     onClose: handleClose
   }, /*#__PURE__*/React__default["default"].createElement(Menu$4, {
     className: "max-h-60 max-w-2xl p-3"
-  }, dropDownOptions.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, dropDownOptions.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     autoFocus: true,
     className: "mb-1",
     "data-cy": "search-text-field",
@@ -11405,7 +11363,7 @@ var MultiSelect = function MultiSelect(_ref) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem$4.Button, {
       "data-cy": "".concat(utils.joinHyphenCase(option.label), "-menu-item"),
       key: idx,
-      prefix: /*#__PURE__*/React__default["default"].createElement(neetoui.Checkbox, {
+      prefix: /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
         checked: selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.includes(option.value),
         "data-cy": "check-icon",
         id: option.value
@@ -11425,6 +11383,8 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
   var name = _ref.name,
     index = _ref.index,
     props = _objectWithoutProperties$1(_ref, _excluded$6);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useFormikContext = formik.useFormikContext(),
     conditions = _useFormikContext.values.conditions,
     setFieldValue = _useFormikContext.setFieldValue,
@@ -11441,9 +11401,9 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
   });
   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 = i18next.t("neetoRules.form.selectValues");
+  var defaultLabel = t("neetoRules.form.selectValues");
   var isValid = errors.conditions && ramda.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]) && ramda.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__default["default"].createElement(React__default["default"].Fragment, null, ramda.isEmpty(allOptions) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, ramda.isEmpty(allOptions) && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "condition-value-multi-select-create-button",
     style: "h5",
     weight: "semibold",
@@ -11459,11 +11419,11 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
   }, defaultLabel), allOptions.map(function (option, idx) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: idx
-    }, !!idx && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, !!idx && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-text-gray-700 mt-1",
       style: "h5",
       weight: "normal"
-    }, i18next.t("neetoRules.common.or")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, t("neetoRules.common.or")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       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",
@@ -11474,43 +11434,31 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
         });
       }
     }, option.label));
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  }), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
     initialFocusRef: initialFocusRef,
     isOpen: showPane,
     size: "large",
     onClose: function onClose() {
       return setShowPane(false);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700",
     "data-cy": "multi-select-create-pane-header-title",
     style: "h3"
-  }, i18next.t("neetoRules.labels.multipleValues"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends$1({
+  }, t("neetoRules.labels.multipleValues"))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], _extends$1({
     isMulti: true,
     className: "mt-4 w-full",
     "data-cy": "multi-select-create-container",
     defaultValue: allOptions,
     innerRef: initialFocusRef,
-    label: i18next.t("neetoRules.labels.selectValues"),
+    label: t("neetoRules.labels.selectValues"),
     onChange: function onChange(options) {
       return setFieldValue(name, options.map(function (option) {
         return option.value;
       }));
     }
-  }, props))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "save-changes-button",
-    label: i18next.t("neetoRules.common.saveChange"),
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: i18next.t("neetoRules.buttons.cancel"),
-    style: "text",
-    onClick: function onClick() {
-      return setShowPane(false);
-    }
+  }, props))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, null, /*#__PURE__*/React__default["default"].createElement(PaneFooterBlock, {
+    setShowPane: setShowPane
   }))));
 };
 
@@ -11942,10 +11890,10 @@ var DateField = function DateField(_ref) {
     };
   }();
   var handleOnChange = function handleOnChange(date) {
-    setFieldValue("".concat(name, ".value"), date ? dayjs(date).format("YYYY-MM-DD") : "");
+    setFieldValue("".concat(name, ".value"), date ? dayjs__default["default"](date).format("YYYY-MM-DD") : "");
     handleValidate();
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showInput ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showInput ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DatePicker__default["default"], {
     autoFocus: true,
     defaultValue: valueTerm,
     name: "".concat(name, ".value"),
@@ -11958,7 +11906,7 @@ var DateField = function DateField(_ref) {
         return !prevState;
       });
     }
-  })) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  })) : /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h5",
     weight: "semibold",
     className: classNames__default["default"]("neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline", {
@@ -12083,13 +12031,13 @@ var ConditionItem = function ConditionItem(_ref) {
     setFieldValue("".concat(name, ".verb"), value);
     setFieldValue("".concat(name, ".metadata"), {});
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isWithEvents && !index && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isWithEvents && !index && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     style: "h5",
     weight: "normal"
   }, t("neetoRules.common.and", {
     what: ""
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  })), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mt-1",
     style: "h5",
     weight: "normal"
@@ -12119,7 +12067,7 @@ var LogicOperator = function LogicOperator(_ref) {
   var logicOperation = _ref.logicOperation,
     handleGroupJoinType = _ref.handleGroupJoinType;
   var logicOperationLabel = OPERATOR_LABELS[logicOperation];
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline",
     "data-cy": "logic-operator-button",
     style: "h5",
@@ -12204,7 +12152,7 @@ var Conditions = function Conditions(_ref) {
         name: "".concat(name, ".value.").concat(index)
       })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex"
-      }, index === conditions.length - 1 && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      }, index === conditions.length - 1 && /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
         "data-cy": "add-condition-button",
         icon: neetoIcons.Plus,
         size: 24,
@@ -12216,7 +12164,7 @@ var Conditions = function Conditions(_ref) {
         onClick: function onClick() {
           return handleAddCondition(arrayHelpers, condition.joinType);
         }
-      }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
         "data-cy": "delete-condition-button-".concat(index),
         icon: neetoIcons.Delete,
         size: 24,
@@ -12229,7 +12177,7 @@ var Conditions = function Conditions(_ref) {
           return handleRemoveCondition(index, condition, arrayHelpers);
         }
       })));
-    }), ramda.isEmpty(conditions) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    }), ramda.isEmpty(conditions) && /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       className: "neeto-ui-text-gray-600 mr-auto",
       "data-cy": "add-condition-button",
       label: t("neetoRules.form.addCondition"),
@@ -12237,7 +12185,7 @@ var Conditions = function Conditions(_ref) {
       onClick: function onClick() {
         return handleAddCondition(arrayHelpers, OPERATORS$1.or);
       }
-    }), isCallback && neetoCist.isNotEmpty(conditions) && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    }), isCallback && neetoCist.isNotEmpty(conditions) && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       className: "mt-2",
       "data-cy": "preview-callback-button",
       icon: neetoIcons.Eye,
@@ -12285,8 +12233,8 @@ var getDropdownOptions = function getDropdownOptions(eventNames, eventOptions) {
   return [].concat(_toConsumableArray$1(includedOptions), _toConsumableArray$1(excludedOptions));
 };
 
-var Menu$3 = neetoui.Dropdown.Menu,
-  MenuItem$3 = neetoui.Dropdown.MenuItem;
+var Menu$3 = Dropdown__default["default"].Menu,
+  MenuItem$3 = Dropdown__default["default"].MenuItem;
 var Performer$1 = function Performer(_ref) {
   var _selectedOption$label;
   var name = _ref.name,
@@ -12340,14 +12288,14 @@ var Performer$1 = function Performer(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "my-auto flex"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mr-2",
     style: "h5",
     weight: "normal"
-  }, i18next.t("neetoRules.common.by")), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+  }, i18next.t("neetoRules.common.by")), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
-    customTarget: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    customTarget: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       "data-cy": "event-performer-dropdown",
       style: "h5",
       weight: "semibold",
@@ -12364,7 +12312,7 @@ var Performer$1 = function Performer(_ref) {
     onClose: handleClose
   }, /*#__PURE__*/React__default["default"].createElement(Menu$3, {
     className: "max-h-60 max-w-2xl p-3"
-  }, performerOptions.length > MAXIMUM_OPTION_LENGTH && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, performerOptions.length > MAXIMUM_OPTION_LENGTH && /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     autoFocus: true,
     className: "mb-1",
     "data-cy": "search-text-field",
@@ -12402,8 +12350,8 @@ var Performer$1 = function Performer(_ref) {
 
 function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Menu$2 = neetoui.Dropdown.Menu,
-  MenuItem$2 = neetoui.Dropdown.MenuItem;
+var Menu$2 = Dropdown__default["default"].Menu,
+  MenuItem$2 = Dropdown__default["default"].MenuItem;
 var Events$1 = function Events(_ref) {
   var name = _ref.name,
     data = _ref.data,
@@ -12494,11 +12442,11 @@ var Events$1 = function Events(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "my-auto flex flex-wrap gap-x-2 gap-y-3"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 my-auto",
     style: "h5",
     weight: "normal"
-  }, i18next.t("neetoRules.common.when")), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+  }, i18next.t("neetoRules.common.when")), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
     closeOnSelect: false,
@@ -12510,11 +12458,11 @@ var Events$1 = function Events(_ref) {
       return /*#__PURE__*/React__default["default"].createElement("span", {
         className: "flex flex-wrap gap-y-1",
         key: idx
-      }, !!idx && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      }, !!idx && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "neeto-ui-text-gray-700 mr-1",
         style: "h5",
         weight: "normal"
-      }, i18next.t("neetoRules.common.or")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      }, i18next.t("neetoRules.common.or")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         "data-cy": "condition-value-multi-select-field",
         style: "h5",
         weight: "semibold",
@@ -12525,7 +12473,7 @@ var Events$1 = function Events(_ref) {
           return setActiveOption(activeOption ? null : event.value);
         }
       }, event === null || event === void 0 || (_event$label = event.label) === null || _event$label === void 0 ? void 0 : _event$label.toLowerCase()));
-    })) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    })) : /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       "data-cy": "condition-value-multi-select-field",
       style: "h5",
       weight: "semibold",
@@ -12540,7 +12488,7 @@ var Events$1 = function Events(_ref) {
     onClose: handleClose
   }, /*#__PURE__*/React__default["default"].createElement(Menu$2, {
     className: "max-h-60 max-w-2xl p-3"
-  }, dropdownOptions.length > MAXIMUM_OPTION_LENGTH && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, dropdownOptions.length > MAXIMUM_OPTION_LENGTH && /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     autoFocus: true,
     className: "mb-1",
     "data-cy": "search-text-field",
@@ -12556,7 +12504,7 @@ var Events$1 = function Events(_ref) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem$2.Button, {
       "data-cy": "".concat(utils.joinHyphenCase(option.label), "-menu-item"),
       key: idx,
-      prefix: /*#__PURE__*/React__default["default"].createElement(neetoui.Checkbox, {
+      prefix: /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
         checked: eventNames === null || eventNames === void 0 ? void 0 : eventNames.includes(option.value),
         "data-cy": "check-icon",
         id: option.value
@@ -12627,7 +12575,7 @@ var EventConditions = function EventConditions(_ref) {
     name: name,
     onSelectEvent: onSelectEvent,
     performerName: performerName
-  })), showAddButton && /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, tooltipProps, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  })), showAddButton && /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], tooltipProps, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     "data-cy": "add-condition-button",
     "data-test-id": "automation-rules-add-events-button",
     disabled: isConditionsEmpty,
@@ -12658,9 +12606,9 @@ var getSearchedOptions = function getSearchedOptions(dropDownOptions, searchTerm
   });
 };
 
-var Menu$1 = neetoui.Dropdown.Menu,
-  MenuItem$1 = neetoui.Dropdown.MenuItem,
-  Divider = neetoui.Dropdown.Divider;
+var Menu$1 = Dropdown__default["default"].Menu,
+  MenuItem$1 = Dropdown__default["default"].MenuItem,
+  Divider = Dropdown__default["default"].Divider;
 var EventItem = function EventItem(_ref) {
   var name = _ref.name,
     parentName = _ref.parentName,
@@ -12718,11 +12666,11 @@ var EventItem = function EventItem(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "my-auto flex flex-wrap"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+  }, /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
     closeOnSelect: false,
-    customTarget: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    customTarget: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       "data-cy": "event-dropdown-button",
       style: "h5",
       weight: "semibold",
@@ -12739,7 +12687,7 @@ var EventItem = function EventItem(_ref) {
     onClose: handleClose
   }, /*#__PURE__*/React__default["default"].createElement(Menu$1, {
     className: "max-h-60 max-w-2xl p-3"
-  }, eventOptions.length > MAXIMUM_OPTION_LENGTH$1 && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, eventOptions.length > MAXIMUM_OPTION_LENGTH$1 && /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     className: "mb-1",
     "data-cy": "search-text-field",
     placeholder: i18next.t("neetoRules.common.search"),
@@ -12767,8 +12715,8 @@ var EventItem = function EventItem(_ref) {
   }, i18next.t("neetoRules.common.delete")))));
 };
 
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
+var Menu = Dropdown__default["default"].Menu,
+  MenuItem = Dropdown__default["default"].MenuItem;
 var Performer = function Performer(_ref) {
   var _selectedOption$label;
   var name = _ref.name,
@@ -12820,15 +12768,15 @@ var Performer = function Performer(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "my-auto flex"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 mr-2",
     style: "h5",
     weight: "normal"
-  }, i18next.t("neetoRules.common.by")), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+  }, i18next.t("neetoRules.common.by")), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
     closeOnSelect: false,
-    customTarget: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    customTarget: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       "data-cy": "event-performer-dropdown",
       style: "h5",
       weight: "semibold",
@@ -12845,7 +12793,7 @@ var Performer = function Performer(_ref) {
     onClose: handleClose
   }, /*#__PURE__*/React__default["default"].createElement(Menu, {
     className: "max-h-60 max-w-2xl p-3"
-  }, performerOptions.length > MAXIMUM_OPTION_LENGTH$1 && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, performerOptions.length > MAXIMUM_OPTION_LENGTH$1 && /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     className: "mb-1",
     "data-cy": "search-text-field",
     placeholder: i18next.t("neetoRules.common.search"),
@@ -12948,7 +12896,7 @@ var Events = function Events(_ref) {
       className: classNames__default["default"]("flex flex-wrap gap-x-2 gap-y-2", {
         "max-w-2xl": showAddButton
       })
-    }, showMessage && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, showMessage && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "my-auto",
       component: "p",
       "data-cy": "event-message-text",
@@ -12957,11 +12905,11 @@ var Events = function Events(_ref) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex flex-wrap gap-x-2",
         key: index
-      }, !index && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      }, !index && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "neeto-ui-text-gray-700 my-auto",
         style: "h5",
         weight: "normal"
-      }, i18next.t("neetoRules.common.when")), !!index && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      }, i18next.t("neetoRules.common.when")), !!index && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "neeto-ui-text-gray-700 my-auto",
         style: "h5",
         weight: "normal"
@@ -12978,7 +12926,7 @@ var Events = function Events(_ref) {
     }), !showMessage && /*#__PURE__*/React__default["default"].createElement(Performer, {
       data: data,
       name: performerName
-    })), /*#__PURE__*/React__default["default"].createElement("div", null, showAddButton && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    })), /*#__PURE__*/React__default["default"].createElement("div", null, showAddButton && /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       "data-cy": "add-event-button",
       "data-test-id": "automation-rules-add-events-button",
       icon: neetoIcons.Plus,
@@ -12991,7 +12939,7 @@ var Events = function Events(_ref) {
       onClick: function onClick() {
         return handleAddEvent(arrayHelpers);
       }
-    }), !showMessage && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    }), !showMessage && /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       "data-cy": "delete-event-button",
       icon: neetoIcons.Delete,
       size: 32,
@@ -13036,7 +12984,7 @@ var InputField = function InputField(_ref) {
     _useDebouncedUpdate2 = _slicedToArray$1(_useDebouncedUpdate, 2),
     text = _useDebouncedUpdate2[0],
     setText = _useDebouncedUpdate2[1];
-  return /*#__PURE__*/React__default["default"].createElement(formik$1.Input, _extends$1({
+  return /*#__PURE__*/React__default["default"].createElement(Input__default$1["default"], _extends$1({
     className: "mb-4",
     label: label || (elementProps === null || elementProps === void 0 ? void 0 : elementProps.label)
   }, field, {
@@ -13059,7 +13007,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
     _useField2 = _slicedToArray$1(_useField, 3),
     setValue = _useField2[2].setValue;
   var elementProps = data[name];
-  return /*#__PURE__*/React__default["default"].createElement(formik$1.Select, _extends$1({
+  return /*#__PURE__*/React__default["default"].createElement(Select__default$1["default"], _extends$1({
     isMulti: true,
     label: label || (elementProps === null || elementProps === void 0 ? void 0 : elementProps.label),
     name: "".concat(name, ".value"),
@@ -13082,15 +13030,15 @@ var RadioField = function RadioField(_ref) {
   var radioOptions = options || (elementProps === null || elementProps === void 0 ? void 0 : elementProps.options);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "my-6"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], {
     className: "mb-4",
     "data-cy": "radio-field-label"
-  }, label || (elementProps === null || elementProps === void 0 ? void 0 : elementProps.label)), /*#__PURE__*/React__default["default"].createElement(formik$1.Radio, _extends$1({
+  }, label || (elementProps === null || elementProps === void 0 ? void 0 : elementProps.label)), /*#__PURE__*/React__default["default"].createElement(Radio__default["default"], _extends$1({
     name: "".concat(name, ".value")
   }, componentProps), radioOptions.map(function (_ref2, index) {
     var label = _ref2.label,
       value = _ref2.value;
-    return /*#__PURE__*/React__default["default"].createElement(formik$1.Radio.Item, {
+    return /*#__PURE__*/React__default["default"].createElement(Radio__default["default"].Item, {
       label: label,
       value: value,
       key: index
@@ -13110,7 +13058,7 @@ var SelectField = function SelectField(_ref) {
     _useField2 = _slicedToArray$1(_useField, 3),
     setValue = _useField2[2].setValue;
   var elementProps = data[name];
-  return /*#__PURE__*/React__default["default"].createElement(formik$1.Select, _extends$1({
+  return /*#__PURE__*/React__default["default"].createElement(Select__default$1["default"], _extends$1({
     label: label || (elementProps === null || elementProps === void 0 ? void 0 : elementProps.label),
     name: "".concat(name, ".value"),
     options: options || (elementProps === null || elementProps === void 0 ? void 0 : elementProps.options),
@@ -13137,7 +13085,7 @@ var TextareaField = function TextareaField(_ref) {
     _useDebouncedUpdate2 = _slicedToArray$1(_useDebouncedUpdate, 2),
     text = _useDebouncedUpdate2[0],
     setText = _useDebouncedUpdate2[1];
-  return /*#__PURE__*/React__default["default"].createElement(formik$1.Textarea, _extends$1({
+  return /*#__PURE__*/React__default["default"].createElement(Textarea__default["default"], _extends$1({
     className: "mb-4",
     label: label || (elementProps === null || elementProps === void 0 ? void 0 : elementProps.label),
     rows: 4