@bigbinary/neeto-rules-frontend 2.0.4 → 2.0.5

package/dist/index.cjs.js

@@ -16,13 +16,12 @@ var reactI18next = require('react-i18next');
 var jsxRuntime = require('react/jsx-runtime');
 var ReactDOM = require('react-dom');
 var Reorder = require('@bigbinary/neeto-icons/Reorder');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var Pane = require('@bigbinary/neetoui/Pane');
 var Typography = require('@bigbinary/neetoui/Typography');
-var Pagination = require('@bigbinary/neetoui/Pagination');
 var ramda = require('ramda');
 var reactRouterDom = require('react-router-dom');
 var shallow = require('zustand/shallow');
-var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var Alert = require('@bigbinary/neetoui/Alert');
@@ -97,10 +96,9 @@ var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var Reorder__default = /*#__PURE__*/_interopDefaultLegacy(Reorder);
+var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
-var Pagination__default = /*#__PURE__*/_interopDefaultLegacy(Pagination);
-var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
@@ -341,6 +339,11 @@ var useReorderAutomationRules = function useReorderAutomationRules(url) {
   });
 };
 
+var INITIAL_RULES_DATA = {
+  rules: [],
+  totalCount: 0
+};
+
 var createRoutes = function createRoutes(basePath) {
   return {
     index: basePath,
@@ -9467,13 +9470,21 @@ var ConnectedDroppable$1 = ConnectedDroppable;
 
 function ownKeys$r(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$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var reorderList = function reorderList(list, startIndex, endIndex) {
+var reorderList = function reorderList(_ref) {
+  var endIndex = _ref.endIndex,
+    firstDisplayOrder = _ref.firstDisplayOrder,
+    list = _ref.list,
+    startIndex = _ref.startIndex;
   var result = Array.from(list);
   var _result$splice = result.splice(startIndex, 1),
     _result$splice2 = _slicedToArray(_result$splice, 1),
     removed = _result$splice2[0];
   result.splice(endIndex, 0, removed);
-  return result;
+  return result.map(function (item, index) {
+    return _objectSpread$r(_objectSpread$r({}, item), {}, {
+      displayOrder: firstDisplayOrder + index
+    });
+  });
 };
 var getDragItemStyle = function getDragItemStyle(isDragging, draggableStyle) {
   return _objectSpread$r(_objectSpread$r({}, draggableStyle), isDragging && {
@@ -9512,35 +9523,38 @@ var DraggableItem$1 = reactRouterDom.withRouter(DraggableItem);
 function ownKeys$p(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$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RulesReorder = function RulesReorder(_ref) {
+  var _rules$0$displayOrder, _rules$;
   var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    rules = _ref.rules,
-    _ref$paginationProps = _ref.paginationProps,
-    paginationProps = _ref$paginationProps === void 0 ? {} : _ref$paginationProps,
+    totalCount = _ref.totalCount,
     url = _ref.url,
+    onClose = _ref.onClose,
     onReorderSuccess = _ref.onReorderSuccess;
-  var _useState = React.useState(rules),
+  var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    initialRules = _useState2[0],
-    setInitialRules = _useState2[1];
+    reorderedRules = _useState2[0],
+    setReorderedRules = _useState2[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useFetchAutomationRu = useFetchAutomationRules({
+      pageSize: totalCount,
+      url: url
+    }, {
+      enabled: isOpen
+    }),
+    _useFetchAutomationRu2 = _useFetchAutomationRu.data,
+    _useFetchAutomationRu3 = _useFetchAutomationRu2 === void 0 ? INITIAL_RULES_DATA : _useFetchAutomationRu2,
+    rules = _useFetchAutomationRu3.rules,
+    isLoading = _useFetchAutomationRu.isLoading;
   var _useReorderAutomation = useReorderAutomationRules(url),
     reOrder = _useReorderAutomation.mutate,
     isPending = _useReorderAutomation.isPending;
-  var handleReorderSave = function handleReorderSave(rules) {
-    var params = [];
-    rules.forEach(function (rule, index) {
-      params.push({
-        id: rule.id,
-        display_order: index
-      });
-    });
-    reOrder({
+  var firstDisplayOrder = (_rules$0$displayOrder = (_rules$ = rules[0]) === null || _rules$ === void 0 ? void 0 : _rules$.displayOrder) !== null && _rules$0$displayOrder !== void 0 ? _rules$0$displayOrder : 1;
+  var handleReorderSave = function handleReorderSave() {
+    return reOrder({
       url: url,
       payload: {
         reorder: {
-          rules: params
+          rules: reorderedRules
         }
       }
     }, {
@@ -9550,22 +9564,30 @@ var RulesReorder = function RulesReorder(_ref) {
       }
     });
   };
-  var onDragEnd = function onDragEnd(result) {
-    if (!result.destination || result.source.index === result.destination.index) {
-      return;
-    }
-    var originalRules = ramda.clone(initialRules);
-    var items = reorderList(originalRules, result.source.index, result.destination.index);
-    items = items.map(function (item, index) {
-      return _objectSpread$p(_objectSpread$p({}, item), {}, {
-        display_order: index
-      });
+  var onDragEnd = function onDragEnd(_ref2) {
+    var destination = _ref2.destination,
+      source = _ref2.source;
+    if (!destination || source.index === destination.index) return;
+    var items = reorderList({
+      endIndex: destination.index,
+      firstDisplayOrder: firstDisplayOrder,
+      list: ramda.clone(reorderedRules),
+      startIndex: source.index
     });
-    setInitialRules(items);
+    setReorderedRules(items);
   };
   React.useEffect(function () {
-    setInitialRules(rules);
+    setReorderedRules(rules);
   }, [rules]);
+  if (isLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"], {
+      isOpen: isOpen,
+      onClose: onClose,
+      children: /*#__PURE__*/jsxRuntime.jsx(Container__default["default"], {
+        children: /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {})
+      })
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
     isOpen: isOpen,
     onClose: onClose,
@@ -9580,9 +9602,9 @@ var RulesReorder = function RulesReorder(_ref) {
         className: "mb-3",
         style: "body2",
         children: t("neetoRules.description.reorder")
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex flex-col items-center",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DragDropContext, {
+        children: /*#__PURE__*/jsxRuntime.jsx(DragDropContext, {
           onDragEnd: onDragEnd,
           children: /*#__PURE__*/jsxRuntime.jsx(ConnectedDroppable$1, {
             droppableId: "droppable",
@@ -9598,15 +9620,15 @@ var RulesReorder = function RulesReorder(_ref) {
                 }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                   className: "neeto-ui-bg-white neeto-ui-border-gray-400 neeto-ui-rounded neeto-ui-shadow-xs flex w-96 items-center space-x-4 border border-solid p-3",
                   children: [/*#__PURE__*/jsxRuntime.jsx(Reorder__default["default"], {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-                    children: initialRules[rubric.source.index].name
+                    children: reorderedRules[rubric.source.index].name
                   })]
                 })]
-              }), "list_".concat(initialRules[rubric.source.index].id));
+              }), "list_".concat(reorderedRules[rubric.source.index].id));
             },
             children: function children(provided) {
               return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$p(_objectSpread$p({}, provided.droppableProps), {}, {
                 ref: provided.innerRef,
-                children: [initialRules.map(function (rule, index) {
+                children: [reorderedRules.map(function (rule, index) {
                   return /*#__PURE__*/React.createElement(DraggableItem$1, {
                     rule: rule,
                     key: rule.id,
@@ -9616,18 +9638,16 @@ var RulesReorder = function RulesReorder(_ref) {
               }));
             }
           })
-        }), neetoCist.isNotEmpty(paginationProps) && /*#__PURE__*/jsxRuntime.jsx(Pagination__default["default"], _objectSpread$p({}, paginationProps))]
+        })
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"].Footer, {
       className: "flex items-center gap-x-2",
       children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
-        disabled: isPending || ramda.equals(rules, initialRules),
+        disabled: isPending || ramda.equals(rules, reorderedRules),
         label: t("neetoRules.common.saveChange"),
         loading: isPending,
         style: "primary",
-        onClick: function onClick() {
-          return handleReorderSave(initialRules);
-        }
+        onClick: handleReorderSave
       }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         label: t("neetoRules.buttons.cancel"),
         style: "text",
@@ -9716,6 +9736,7 @@ var buildActionDropdownMenuItems = function buildActionDropdownMenuItems(_ref) {
     key: "edit",
     className: "neeto-ui-btn",
     "data-test-id": "automation-rules-edit-link",
+    "data-cy": "automation-rules-edit-link",
     label: i18next.t("neetoRules.button.edit"),
     to: utils.buildUrl(createRoutes(automationRulesPath).edit, {
       ruleId: rule.id
@@ -9723,6 +9744,7 @@ var buildActionDropdownMenuItems = function buildActionDropdownMenuItems(_ref) {
   }, {
     key: "clone",
     "data-test-id": "automation-rules-clone-link",
+    "data-cy": "automation-rules-clone-link",
     label: i18next.t("neetoRules.button.clone"),
     onClick: function onClick() {
       return onClone(rule.id);
@@ -9733,6 +9755,7 @@ var buildActionDropdownMenuItems = function buildActionDropdownMenuItems(_ref) {
   }, {
     key: "delete",
     "data-test-id": "automation-rules-delete-link",
+    "data-cy": "automation-rules-delete-link",
     label: i18next.t("neetoRules.button.delete"),
     onClick: function onClick() {
       return onDelete(rule);
@@ -9833,8 +9856,8 @@ var renderNoDataHelpText = function renderNoDataHelpText(helpDocUrl) {
   return /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
     i18nKey: "neetoRules.noData.helpText",
     components: {
-      a: /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Link, {
-        className: "neeto-ui-text-primary-600 underline",
+      a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        style: "link",
         target: "_blank",
         to: {
           pathname: helpDocUrl
@@ -10045,11 +10068,9 @@ var NeetoRules = function NeetoRules(_ref) {
       searchTerm: searchTerm
     }),
     _useFetchAutomationRu2 = _useFetchAutomationRu.data,
-    _useFetchAutomationRu3 = _useFetchAutomationRu2 === void 0 ? {} : _useFetchAutomationRu2,
-    _useFetchAutomationRu4 = _useFetchAutomationRu3.rules,
-    rules = _useFetchAutomationRu4 === void 0 ? [] : _useFetchAutomationRu4,
-    _useFetchAutomationRu5 = _useFetchAutomationRu3.totalCount,
-    totalCount = _useFetchAutomationRu5 === void 0 ? 0 : _useFetchAutomationRu5,
+    _useFetchAutomationRu3 = _useFetchAutomationRu2 === void 0 ? INITIAL_RULES_DATA : _useFetchAutomationRu2,
+    rules = _useFetchAutomationRu3.rules,
+    totalCount = _useFetchAutomationRu3.totalCount,
     isLoading = _useFetchAutomationRu.isLoading,
     isFetching = _useFetchAutomationRu.isFetching;
   var hasUnfilteredRules = neetoCist.isPresent(searchTerm) || totalCount > 0;
@@ -10077,15 +10098,9 @@ var NeetoRules = function NeetoRules(_ref) {
       onDeleteSuccess: deleteRule === null || deleteRule === void 0 || (_deleteRule$onSuccess = deleteRule.onSuccess) === null || _deleteRule$onSuccess === void 0 ? void 0 : _deleteRule$onSuccess.callback,
       onUpdateSuccess: updateRule === null || updateRule === void 0 || (_updateRule$onSuccess = updateRule.onSuccess) === null || _updateRule$onSuccess === void 0 ? void 0 : _updateRule$onSuccess.callback
     })), allowReordering && !isLoading && /*#__PURE__*/jsxRuntime.jsx(RulesReorder, {
-      rules: rules,
+      totalCount: totalCount,
       url: url,
       isOpen: isReorderPaneOpen,
-      paginationProps: {
-        pageNo: page,
-        count: totalCount,
-        pageSize: constants.DEFAULT_PAGE_SIZE,
-        navigate: setPage
-      },
       onClose: function onClose() {
         return setIsReorderPaneOpen(false);
       },
@@ -10200,25 +10215,24 @@ var LongTextField = function LongTextField(_ref) {
   var rows = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.rows) || DEFAULT_LONG_TEXT_ROWS;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [separator && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       "data-cy": "long-text-action-separator-text",
       style: "h5",
       weight: "normal",
       children: separator
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       "data-cy": "long-text-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: label.toLowerCase(),
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+        "neeto-ui-text-accent-800": showPane,
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
         return setShowPane(function (prevState) {
           return !prevState;
         });
-      },
-      children: label.toLowerCase()
+      }
     }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -10422,25 +10436,24 @@ var ApiFields = function ApiFields(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       "data-cy": "api-action-separator-text",
       style: "h5",
       weight: "normal",
       children: separator
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       "data-cy": "api-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: defaultLabel.toLowerCase(),
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+        "neeto-ui-text-accent-800": showPane,
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
         return setShowPane(function (prevState) {
           return !prevState;
         });
-      },
-      children: defaultLabel.toLowerCase()
+      }
     }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -10511,23 +10524,22 @@ var CustomAction = function CustomAction(_ref) {
   var defaultLabel = selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       style: "h5",
       weight: "normal",
       children: separator
-    }), /*#__PURE__*/jsxRuntime.jsx(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", {
-        "neeto-ui-text-primary-800": showPane,
+    }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      label: defaultLabel.toLowerCase(),
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+        "neeto-ui-text-accent-800": showPane,
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
         return setShowPane(function (prevState) {
           return !prevState;
         });
-      },
-      children: defaultLabel.toLowerCase()
+      }
     }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -10579,7 +10591,7 @@ var DateField$1 = function DateField(_ref) {
   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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       "data-cy": "action-dropdown-seperator-text",
       style: "h5",
       weight: "normal",
@@ -10604,10 +10616,10 @@ var DateField$1 = function DateField(_ref) {
           });
         }
       })]
-    }) : /*#__PURE__*/jsxRuntime.jsx(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", {
+    }) : /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      label: label,
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
@@ -10615,8 +10627,7 @@ var DateField$1 = function DateField(_ref) {
         setShowInput(function (prevState) {
           return !prevState;
         });
-      },
-      children: label
+      }
     })]
   });
 };
@@ -10808,7 +10819,7 @@ var DropdownField$1 = function DropdownField(_ref) {
   }, [defaultValue, dropdownOptions]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       "data-cy": "action-dropdown-seperator-text",
       style: "h5",
       weight: "normal",
@@ -10816,12 +10827,12 @@ var DropdownField$1 = function DropdownField(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
       buttonStyle: "secondary",
       className: "neeto-ui-bg-gray-100",
-      customTarget: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      customTarget: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         "data-cy": "action-dropdown-button",
-        style: "h5",
-        weight: "semibold",
-        className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-          "neeto-ui-text-primary-800": isActive,
+        label: defaultSelectedOption === null || defaultSelectedOption === void 0 || (_defaultSelectedOptio = defaultSelectedOption.label) === null || _defaultSelectedOptio === void 0 ? void 0 : _defaultSelectedOptio.toLowerCase(),
+        style: "link",
+        className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+          "neeto-ui-text-accent-800": isActive,
           "neeto-ui-text-error-500": isValueSelected
         }),
         onClick: function onClick() {
@@ -10829,8 +10840,7 @@ var DropdownField$1 = function DropdownField(_ref) {
           setIsActive(function (prevState) {
             return !prevState;
           });
-        },
-        children: defaultSelectedOption === null || defaultSelectedOption === void 0 || (_defaultSelectedOptio = defaultSelectedOption.label) === null || _defaultSelectedOptio === void 0 ? void 0 : _defaultSelectedOptio.toLowerCase()
+        }
       }),
       onClose: handleClose,
       children: /*#__PURE__*/jsxRuntime.jsxs(Menu$9, {
@@ -10995,25 +11005,24 @@ var EmailFields = function EmailFields(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       "data-cy": "action-email-seperator-text",
       style: "h5",
       weight: "normal",
       children: separator
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       "data-cy": "email-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: defaultLabel.toLowerCase(),
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+        "neeto-ui-text-accent-800": showPane,
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
         return setShowPane(function (prevState) {
           return !prevState;
         });
-      },
-      children: defaultLabel.toLowerCase()
+      }
     }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -11137,18 +11146,17 @@ var Input = function Input(_ref) {
           });
         }
       })
-    }) : /*#__PURE__*/jsxRuntime.jsx(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", {
-        "neeto-ui-text-error-500": isValid
+    }) : /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      label: label,
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+        "neeto-ui-text-accent-500": isValid
       }),
       onClick: function onClick() {
         return setShowInput(function (prevState) {
           return !prevState;
         });
-      },
-      children: label
+      }
     })]
   });
 };
@@ -11285,25 +11293,24 @@ var ListField = function ListField(_ref) {
   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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       "data-cy": "list-action-separator-text",
       style: "h5",
       weight: "normal",
       children: separator
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       "data-cy": "list-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: t("neetoRules.form.list"),
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+        "neeto-ui-text-accent-800": showPane,
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
         return setShowPane(function (prevState) {
           return !prevState;
         });
-      },
-      children: t("neetoRules.form.list")
+      }
     }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -11350,7 +11357,7 @@ var ListField = function ListField(_ref) {
                   className: "w-full",
                   children: function children(message) {
                     return /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-                      className: "neeto-ui-text-error-500 neeto-ui-text-gray-700 mt-1",
+                      className: "neeto-ui-text-error-500 neeto-ui-text-gray-700",
                       "data-cy": "list-action-error-message",
                       style: "h5",
                       children: message
@@ -11433,7 +11440,7 @@ var MultiSelect$1 = function MultiSelect(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       "data-cy": "multi-select-action-separator-text",
       style: "h5",
       weight: "normal",
@@ -11444,12 +11451,12 @@ var MultiSelect$1 = function MultiSelect(_ref) {
       closeOnSelect: false,
       position: "top-start",
       customTarget: neetoCist.isNotEmpty(selectedOptions) ? /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "flex flex-wrap gap-y-1",
+        className: "flex flex-wrap items-center gap-x-2 gap-y-1",
         children: selectedOptions.map(function (option, idx) {
           return /*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: "flex flex-wrap",
+            className: "flex flex-wrap items-center gap-x-2 gap-y-1",
             children: [!!idx && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-              className: "neeto-ui-text-gray-700 mr-1 mt-1",
+              className: "neeto-ui-text-gray-700",
               style: "h5",
               weight: "normal",
               onClick: function onClick(e) {
@@ -11458,33 +11465,31 @@ var MultiSelect$1 = function MultiSelect(_ref) {
               children: t("neetoRules.common.and", {
                 what: ""
               })
-            }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
               "data-cy": "multi-select-action-button",
-              style: "h5",
-              weight: "semibold",
-              className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mr-1 mt-1 cursor-pointer underline", {
-                "neeto-ui-text-primary-800": activeOption === (option === null || option === void 0 ? void 0 : option.value)
+              label: option === null || option === void 0 ? void 0 : option.label.toLowerCase(),
+              style: "link",
+              className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+                "neeto-ui-text-accent-800": activeOption === (option === null || option === void 0 ? void 0 : option.value)
               }),
               onClick: function onClick() {
                 setTouched(ramda.assocPath(["actions", "value", index], true, touched));
                 setActiveOption(activeOption ? null : option === null || option === void 0 ? void 0 : option.value);
-              },
-              children: option === null || option === void 0 ? void 0 : option.label.toLowerCase()
+              }
             })]
           }, idx);
         })
-      }) : /*#__PURE__*/jsxRuntime.jsx(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", {
-          "neeto-ui-text-primary-800": activeOption === defaultLabel,
+      }) : /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        label: defaultLabel,
+        style: "link",
+        className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+          "neeto-ui-text-accent-800": activeOption === defaultLabel,
           "neeto-ui-text-error-500": isValid
         }),
         onClick: function onClick() {
           setTouched(ramda.assocPath(["actions", "value", index], true, touched));
           setActiveOption(activeOption ? null : defaultLabel);
-        },
-        children: defaultLabel
+        }
       }),
       onClose: handleClose,
       children: /*#__PURE__*/jsxRuntime.jsxs(Menu$8, {
@@ -11550,25 +11555,24 @@ var NoteField = function NoteField(_ref) {
   var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || t("neetoRules.form.note");
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       "data-cy": "note-action-separator-text",
       style: "h5",
       weight: "normal",
       children: separator
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       "data-cy": "note-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: defaultLabel.toLowerCase(),
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+        "neeto-ui-text-accent-800": showPane,
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
         return setShowPane(function (prevState) {
           return !prevState;
         });
-      },
-      children: defaultLabel.toLowerCase()
+      }
     }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -11897,25 +11901,24 @@ var SmsFields = function SmsFields(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       "data-cy": "sms-action-separator-text",
       style: "h5",
       weight: "normal",
       children: separator
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       "data-cy": "sms-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: defaultLabel.toLowerCase(),
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+        "neeto-ui-text-accent-800": showPane,
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
         return setShowPane(function (prevState) {
           return !prevState;
         });
-      },
-      children: defaultLabel.toLowerCase()
+      }
     }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -12560,77 +12563,78 @@ var ActionItem = function ActionItem(_ref) {
     findSelectedOption();
   }, [selectedField]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "mb-1 flex max-w-2xl flex-wrap gap-x-1 gap-y-2",
-    children: [selectDropDownHasError && renderErrorCallout(selectDropDownErrorMessage), !isMessageToSlackAction && isDisabled && renderDisabledReason(), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
-      style: "h5",
-      weight: "normal",
-      children: label
-    }), /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
-      buttonStyle: "secondary",
-      className: "neeto-ui-bg-gray-100",
-      position: "bottom-start",
-      customTarget: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-        "data-cy": "action-dropdown-button",
+    className: "flex max-w-2xl flex-wrap gap-x-1 gap-y-3",
+    children: [selectDropDownHasError && renderErrorCallout(selectDropDownErrorMessage), !isMessageToSlackAction && isDisabled && renderDisabledReason(), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-wrap items-center gap-x-2 gap-y-3",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "neeto-ui-text-gray-700",
         style: "h5",
-        weight: "semibold",
-        className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-          "neeto-ui-text-primary-800": isActive,
-          "neeto-ui-text-error-500": isActionSelected
-        }),
-        onClick: function onClick() {
-          return setIsActive(function (prevState) {
-            return !prevState;
-          });
-        },
-        children: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase()
-      }),
-      onClose: handleClose,
-      children: /*#__PURE__*/jsxRuntime.jsxs(Menu$7, {
-        className: "max-h-60 max-w-2xl p-3",
-        children: [actionOptions.length > MAXIMUM_OPTION_LENGTH$1 && /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
-          autoFocus: true,
-          className: "mb-1",
-          "data-cy": "search-text-field",
-          placeholder: t("neetoRules.common.search"),
-          prefix: /*#__PURE__*/jsxRuntime.jsx(Search__default["default"], {}),
-          value: searchTerm,
-          onChange: function onChange(e) {
-            return setSearchTerm(e.target.value);
-          },
-          onClick: function onClick(e) {
-            return e.stopPropagation();
+        weight: "normal",
+        children: label
+      }), /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
+        buttonStyle: "secondary",
+        className: "neeto-ui-bg-gray-100",
+        position: "bottom-start",
+        customTarget: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          "data-cy": "action-dropdown-button",
+          label: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase(),
+          style: "link",
+          className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+            "neeto-ui-text-accent-800": isActive,
+            "neeto-ui-text-error-500": isActionSelected
+          }),
+          onClick: function onClick() {
+            return setIsActive(function (prevState) {
+              return !prevState;
+            });
           }
-        }), /*#__PURE__*/jsxRuntime.jsx(OptionsWrapper, {
-          hasScroll: actionOptions.length > MAXIMUM_OPTION_LENGTH$1,
-          children: searchedOptions.map(function (option, idx) {
-            return /*#__PURE__*/jsxRuntime.jsx(MenuItem$7.Button, {
-              "data-cy": "".concat(utils.joinHyphenCase(option.label), "-menu-item"),
-              suffix: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value && /*#__PURE__*/jsxRuntime.jsx(Check__default["default"], {
-                className: "neeto-ui-text-primary-800"
-              }),
-              onClick: function onClick() {
-                return handleSelectOption(option);
-              },
-              children: option.label
-            }, idx);
-          })
-        }), ramda.isEmpty(actionOptions) && /*#__PURE__*/jsxRuntime.jsx(MenuItem$7.Button, {
-          "data-cy": "no-options-menu-item",
-          children: t("neetoRules.common.noOptions")
-        })]
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(ActionSubItem, {
-      action: action,
-      index: index,
-      selectedField: selectedField,
-      name: "".concat(name, ".metadata"),
-      options: getSelectedFieldOptions()
-    }), neetoCist.isPresent(action === null || action === void 0 ? void 0 : action.children) && /*#__PURE__*/jsxRuntime.jsx(ActionChildren, {
-      action: action,
-      index: index,
-      selectedField: selectedField,
-      parentFieldName: name
+        }),
+        onClose: handleClose,
+        children: /*#__PURE__*/jsxRuntime.jsxs(Menu$7, {
+          className: "max-h-60 max-w-2xl p-3",
+          children: [actionOptions.length > MAXIMUM_OPTION_LENGTH$1 && /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+            autoFocus: true,
+            "data-cy": "search-text-field",
+            placeholder: t("neetoRules.common.search"),
+            prefix: /*#__PURE__*/jsxRuntime.jsx(Search__default["default"], {}),
+            value: searchTerm,
+            onChange: function onChange(e) {
+              return setSearchTerm(e.target.value);
+            },
+            onClick: function onClick(e) {
+              return e.stopPropagation();
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(OptionsWrapper, {
+            hasScroll: actionOptions.length > MAXIMUM_OPTION_LENGTH$1,
+            children: searchedOptions.map(function (option, idx) {
+              return /*#__PURE__*/jsxRuntime.jsx(MenuItem$7.Button, {
+                "data-cy": "".concat(utils.joinHyphenCase(option.label), "-menu-item"),
+                suffix: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value && /*#__PURE__*/jsxRuntime.jsx(Check__default["default"], {
+                  className: "neeto-ui-text-primary-800"
+                }),
+                onClick: function onClick() {
+                  return handleSelectOption(option);
+                },
+                children: option.label
+              }, idx);
+            })
+          }), ramda.isEmpty(actionOptions) && /*#__PURE__*/jsxRuntime.jsx(MenuItem$7.Button, {
+            "data-cy": "no-options-menu-item",
+            children: t("neetoRules.common.noOptions")
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(ActionSubItem, {
+        action: action,
+        index: index,
+        selectedField: selectedField,
+        name: "".concat(name, ".metadata"),
+        options: getSelectedFieldOptions()
+      }), neetoCist.isPresent(action === null || action === void 0 ? void 0 : action.children) && /*#__PURE__*/jsxRuntime.jsx(ActionChildren, {
+        action: action,
+        index: index,
+        selectedField: selectedField,
+        parentFieldName: name
+      })]
     })]
   });
 };
@@ -12828,26 +12832,24 @@ var DropdownField = function DropdownField(_ref) {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
     position: "bottom-start",
-    customTarget: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    customTarget: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       "data-cy": "condition-".concat(fieldType, "-dropdown-button"),
-      style: "h5",
-      weight: "semibold",
-      className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": isSelected
+      label: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase(),
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+        "neeto-ui-text-accent-800": isSelected
       }),
       onClick: function onClick() {
         return setIsSelected(function (prevState) {
           return !prevState;
         });
-      },
-      children: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase()
+      }
     }),
     onClose: handleClose,
     children: /*#__PURE__*/jsxRuntime.jsxs(Menu$6, {
       className: "max-h-60 max-w-2xl p-3",
       children: [options.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
         autoFocus: true,
-        className: "mb-1",
         "data-cy": "search-text-field",
         placeholder: t("neetoRules.common.search"),
         prefix: /*#__PURE__*/jsxRuntime.jsx(Search__default["default"], {}),
@@ -12950,12 +12952,12 @@ var Dropdown = function Dropdown(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
-    customTarget: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    customTarget: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       "data-cy": "condition-value-dropdown-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": isActive,
+      label: defaultSelectedOption === null || defaultSelectedOption === void 0 || (_defaultSelectedOptio = defaultSelectedOption.label) === null || _defaultSelectedOptio === void 0 ? void 0 : _defaultSelectedOptio.toLowerCase(),
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+        "neeto-ui-text-accent-800": isActive,
         "neeto-ui-text-error-500": isValueSelected
       }),
       onClick: function onClick() {
@@ -12963,15 +12965,13 @@ var Dropdown = function Dropdown(_ref) {
         setIsActive(function (prevState) {
           return !prevState;
         });
-      },
-      children: defaultSelectedOption === null || defaultSelectedOption === void 0 || (_defaultSelectedOptio = defaultSelectedOption.label) === null || _defaultSelectedOptio === void 0 ? void 0 : _defaultSelectedOptio.toLowerCase()
+      }
     }),
     onClose: handleClose,
     children: /*#__PURE__*/jsxRuntime.jsxs(Menu$5, {
       className: "max-h-60 max-w-2xl p-3",
       children: [options.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
         autoFocus: true,
-        className: "mb-1",
         "data-cy": "search-text-field",
         placeholder: t("neetoRules.common.search"),
         prefix: /*#__PURE__*/jsxRuntime.jsx(Search__default["default"], {}),
@@ -13046,18 +13046,17 @@ var InputField$1 = function InputField(_ref) {
         });
       }
     })
-  }) : /*#__PURE__*/jsxRuntime.jsx(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", {
+  }) : /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+    label: label,
+    style: "link",
+    className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
       "neeto-ui-text-error-500": isValid
     }),
     onClick: function onClick() {
       return setShowInput(function (prevState) {
         return !prevState;
       });
-    },
-    children: label
+    }
   });
 };
 
@@ -13106,43 +13105,41 @@ var MultiSelect = function MultiSelect(_ref) {
     closeOnSelect: false,
     position: "top-start",
     customTarget: neetoCist.isNotEmpty(options) ? /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "flex flex-wrap gap-y-1",
+      className: "flex flex-wrap items-center gap-x-2 gap-y-1",
       children: options.map(function (option, idx) {
         var _option$label;
         return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
           children: [!!idx && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-            className: "neeto-ui-text-gray-700 mr-1 mt-1",
+            className: "neeto-ui-text-gray-700",
             style: "h5",
             weight: "normal",
             children: t("neetoRules.common.or")
-          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
             "data-cy": "condition-value-multi-select-field",
-            style: "h5",
-            weight: "semibold",
-            className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mr-1 mt-1 cursor-pointer underline", {
-              "neeto-ui-text-primary-800": activeOption === option.value
+            label: option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase(),
+            style: "link",
+            className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+              "neeto-ui-text-accent-800": activeOption === option.value
             }),
             onClick: function onClick() {
               setTouched(ramda.assocPath(["conditions", "value", index], true, touched));
               setActiveOption(activeOption ? null : option.value);
-            },
-            children: option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase()
+            }
           })]
         }, idx);
       })
-    }) : /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    }) : /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       "data-cy": "condition-value-multi-select-field",
-      style: "h5",
-      weight: "semibold",
-      className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": activeOption === defaultLabel,
+      label: defaultLabel,
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+        "neeto-ui-text-accent-800": activeOption === defaultLabel,
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
         setTouched(ramda.assocPath(["conditions", "value", index], true, touched));
         setActiveOption(activeOption ? null : defaultLabel);
-      },
-      children: defaultLabel
+      }
     }),
     onClose: handleClose,
     children: /*#__PURE__*/jsxRuntime.jsxs(Menu$4, {
@@ -13210,11 +13207,11 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
   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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [ramda.isEmpty(allOptions) && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    children: [ramda.isEmpty(allOptions) && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       "data-cy": "condition-value-multi-select-create-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
+      label: defaultLabel,
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
@@ -13222,26 +13219,24 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
         setShowPane(function (prevState) {
           return !prevState;
         });
-      },
-      children: defaultLabel
+      }
     }), allOptions.map(function (option, idx) {
       return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
         children: [!!idx && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-          className: "neeto-ui-text-gray-700 mt-1",
+          className: "neeto-ui-text-gray-700",
           style: "h5",
           weight: "normal",
           children: t("neetoRules.common.or")
-        }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-          className: "hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline",
+        }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          className: "neeto-ui-text-gray-800 neeto-ui-font-semibold underline",
           "data-cy": "condition-value-multi-select-create-button",
-          style: "h5",
-          weight: "semibold",
+          label: option.label,
+          style: "link",
           onClick: function onClick() {
             return setShowPane(function (prevState) {
               return !prevState;
             });
-          },
-          children: option.label
+          }
         })]
       }, idx);
     }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
@@ -13733,10 +13728,10 @@ var DateField = function DateField(_ref) {
           });
         }
       })]
-    }) : /*#__PURE__*/jsxRuntime.jsx(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", {
+    }) : /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      label: label,
+      style: "link",
+      className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
@@ -13744,8 +13739,7 @@ var DateField = function DateField(_ref) {
         setShowInput(function (prevState) {
           return !prevState;
         });
-      },
-      children: label
+      }
     })
   });
 };
@@ -13862,14 +13856,14 @@ var ConditionItem = function ConditionItem(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [isWithEvents && !index && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       style: "h5",
       weight: "normal",
       children: t("neetoRules.common.and", {
         what: ""
       })
     }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       style: "h5",
       weight: "normal",
       children: defaultLabel
@@ -13900,15 +13894,14 @@ var LogicOperator = function LogicOperator(_ref) {
   var logicOperation = _ref.logicOperation,
     handleGroupJoinType = _ref.handleGroupJoinType;
   var logicOperationLabel = OPERATOR_LABELS[logicOperation];
-  return /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-    className: "neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline",
+  return /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+    className: "neeto-ui-text-gray-800 neeto-ui-font-semibold underline",
     "data-cy": "logic-operator-button",
-    style: "h5",
-    weight: "semibold",
+    label: logicOperationLabel,
+    style: "link",
     onClick: function onClick() {
       return handleGroupJoinType(logicOperation);
-    },
-    children: logicOperationLabel
+    }
   });
 };
 
@@ -13972,7 +13965,7 @@ var Conditions = function Conditions(_ref) {
           return /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex w-full justify-between",
             children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "mb-1 flex flex-wrap gap-x-2 gap-y-2",
+              className: "flex flex-wrap items-center gap-x-2 gap-y-2",
               children: [!!index && /*#__PURE__*/jsxRuntime.jsx(LogicOperator, {
                 handleGroupJoinType: handleGroupJoinType,
                 logicOperation: condition.joinType
@@ -14131,29 +14124,28 @@ var Performer$1 = function Performer(_ref) {
     setSelectedOption(option);
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "my-auto flex",
+    className: "my-auto flex items-center gap-x-2 gap-y-3",
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      className: "neeto-ui-text-gray-700 mr-2",
+      className: "neeto-ui-text-gray-700",
       style: "h5",
       weight: "normal",
       children: t("neetoRules.common.by")
     }), /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
       buttonStyle: "secondary",
       className: "neeto-ui-bg-gray-100",
-      customTarget: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      customTarget: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         "data-cy": "event-performer-dropdown",
-        style: "h5",
-        weight: "semibold",
-        className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 cursor-pointer underline", {
-          "neeto-ui-text-primary-800": isSelected,
+        label: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase(),
+        style: "link",
+        className: classNames__default["default"](" neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+          "neeto-ui-text-accent-800": isSelected,
           "neeto-ui-text-error-500": isValueSelected
         }),
         onClick: function onClick() {
           return setIsSelected(function (prevState) {
             return !prevState;
           });
-        },
-        children: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase()
+        }
       }),
       onClose: handleClose,
       children: /*#__PURE__*/jsxRuntime.jsxs(Menu$3, {
@@ -14294,7 +14286,7 @@ var Events$1 = function Events(_ref) {
     setSearchTerm("");
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "my-auto flex flex-wrap gap-x-2 gap-y-3",
+    className: "my-auto flex flex-wrap items-center gap-x-2 gap-y-3",
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
       className: "neeto-ui-text-gray-700 my-auto",
       style: "h5",
@@ -14306,42 +14298,40 @@ var Events$1 = function Events(_ref) {
       closeOnSelect: false,
       position: "top-start",
       customTarget: neetoCist.isNotEmpty(allEvents) ? /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "flex flex-wrap gap-y-1",
+        className: "flex flex-wrap items-center gap-x-2 gap-y-1",
         children: allEvents.map(function (event, idx) {
           var _event$label;
           return /*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: "flex flex-wrap gap-y-1",
+            className: "flex flex-wrap items-center gap-x-2 gap-y-1",
             children: [!!idx && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-              className: "neeto-ui-text-gray-700 mr-1",
+              className: "neeto-ui-text-gray-700",
               style: "h5",
               weight: "normal",
               children: t("neetoRules.common.or")
-            }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
               "data-cy": "condition-value-multi-select-field",
-              style: "h5",
-              weight: "semibold",
-              className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mr-1 cursor-pointer underline", {
-                "neeto-ui-text-primary-800": activeOption === event.value
+              label: event === null || event === void 0 || (_event$label = event.label) === null || _event$label === void 0 ? void 0 : _event$label.toLowerCase(),
+              style: "link",
+              className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+                "neeto-ui-text-accent-800": activeOption === event.value
               }),
               onClick: function onClick() {
                 return setActiveOption(activeOption ? null : event.value);
-              },
-              children: event === null || event === void 0 || (_event$label = event.label) === null || _event$label === void 0 ? void 0 : _event$label.toLowerCase()
+              }
             })]
           }, idx);
         })
-      }) : /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      }) : /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         "data-cy": "condition-value-multi-select-field",
-        style: "h5",
-        weight: "semibold",
-        className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 cursor-pointer underline", {
-          "neeto-ui-text-primary-800": activeOption === defaultLabel,
+        label: defaultLabel,
+        style: "link",
+        className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+          "neeto-ui-text-accent-800": activeOption === defaultLabel,
           "neeto-ui-text-error-500": !isValid
         }),
         onClick: function onClick() {
           return setActiveOption(activeOption ? null : defaultLabel);
-        },
-        children: defaultLabel
+        }
       }),
       onClose: handleClose,
       children: /*#__PURE__*/jsxRuntime.jsxs(Menu$2, {
@@ -14547,20 +14537,19 @@ var EventItem = function EventItem(_ref) {
       buttonStyle: "secondary",
       className: "neeto-ui-bg-gray-100",
       closeOnSelect: false,
-      customTarget: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      customTarget: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         "data-cy": "event-dropdown-button",
-        style: "h5",
-        weight: "semibold",
-        className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 cursor-pointer underline", {
-          "neeto-ui-text-primary-800": isActive,
+        label: selectedOption.toLowerCase(),
+        style: "link",
+        className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+          "neeto-ui-text-accent-800": isActive,
           "neeto-ui-text-error-500": isValueSelected
         }),
         onClick: function onClick() {
           return setIsActive(function (prevState) {
             return !prevState;
           });
-        },
-        children: selectedOption.toLowerCase()
+        }
       }),
       onClose: handleClose,
       children: /*#__PURE__*/jsxRuntime.jsxs(Menu$1, {
@@ -14663,20 +14652,19 @@ var Performer = function Performer(_ref) {
       buttonStyle: "secondary",
       className: "neeto-ui-bg-gray-100",
       closeOnSelect: false,
-      customTarget: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      customTarget: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         "data-cy": "event-performer-dropdown",
-        style: "h5",
-        weight: "semibold",
-        className: classNames__default["default"]("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 cursor-pointer underline", {
-          "neeto-ui-text-primary-800": isSelected,
+        label: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase(),
+        style: "link",
+        className: classNames__default["default"]("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+          "neeto-ui-text-accent-800": isSelected,
           "neeto-ui-text-error-500": isValueSelected
         }),
         onClick: function onClick() {
           return setIsSelected(function (prevState) {
             return !prevState;
           });
-        },
-        children: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase()
+        }
       }),
       onClose: handleClose,
       children: /*#__PURE__*/jsxRuntime.jsxs(Menu, {