@bigbinary/neeto-rules-frontend 2.0.4 → 2.1.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect, useContext, useLayoutEffect as useLayoutEffect$1, createElement, useMemo as useMemo$1, forwardRef, memo } from 'react';
+import React__default, { memo, useState, useRef, useEffect, useContext, useLayoutEffect as useLayoutEffect$1, createElement, forwardRef, useMemo as useMemo$1, Fragment as Fragment$1 } from 'react';
 import { isNotEmpty, isPresent, removeBy, renameKeys, findBy, noop as noop$3, nullSafe, toLabelAndValue } from '@bigbinary/neeto-cist';
 import { DEFAULT_PAGE_SIZE } from '@bigbinary/neeto-commons-frontend/constants';
 import { useMutationWithInvalidation, useQueryParams, withImmutableActions, withT, useStateWithDependency, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
@@ -13,13 +13,12 @@ import { useTranslation, Trans } from 'react-i18next';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactDOM, { unstable_batchedUpdates, flushSync } from 'react-dom';
 import Reorder from '@bigbinary/neeto-icons/Reorder';
+import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import Pane from '@bigbinary/neetoui/Pane';
 import Typography from '@bigbinary/neetoui/Typography';
-import Pagination from '@bigbinary/neetoui/Pagination';
 import { equals, clone as clone$1, isNotNil, isEmpty, isNil, whereAny, useWith, path, split, assocPath, toLower, without, append, pipe, filter, uniq, join, pluck, map, assoc, mergeLeft, includes, test, partition } from 'ramda';
-import { withRouter, Link } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import { shallow } from 'zustand/shallow';
-import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import Alert from '@bigbinary/neetoui/Alert';
@@ -267,6 +266,11 @@ var useReorderAutomationRules = function useReorderAutomationRules(url) {
   });
 };
 
+var INITIAL_RULES_DATA = {
+  rules: [],
+  totalCount: 0
+};
+
 var createRoutes = function createRoutes(basePath) {
   return {
     index: basePath,
@@ -324,7 +328,7 @@ var Header = function Header(_ref) {
     })
   }, headerProps));
 };
-var Header$1 = /*#__PURE__*/React__default.memo(Header);
+var Header$1 = /*#__PURE__*/memo(Header);
 
 function _typeof$1(o) {
   "@babel/helpers - typeof";
@@ -9393,13 +9397,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 && {
@@ -9438,35 +9450,38 @@ var DraggableItem$1 = 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 = useState(rules),
+  var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    initialRules = _useState2[0],
-    setInitialRules = _useState2[1];
+    reorderedRules = _useState2[0],
+    setReorderedRules = _useState2[1];
   var _useTranslation = 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
         }
       }
     }, {
@@ -9476,22 +9491,30 @@ var RulesReorder = function RulesReorder(_ref) {
       }
     });
   };
-  var onDragEnd = function onDragEnd(result) {
-    if (!result.destination || result.source.index === result.destination.index) {
-      return;
-    }
-    var originalRules = clone$1(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: clone$1(reorderedRules),
+      startIndex: source.index
     });
-    setInitialRules(items);
+    setReorderedRules(items);
   };
   useEffect(function () {
-    setInitialRules(rules);
+    setReorderedRules(rules);
   }, [rules]);
+  if (isLoading) {
+    return /*#__PURE__*/jsx(Pane, {
+      isOpen: isOpen,
+      onClose: onClose,
+      children: /*#__PURE__*/jsx(Container, {
+        children: /*#__PURE__*/jsx(PageLoader, {})
+      })
+    });
+  }
   return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
     onClose: onClose,
@@ -9506,9 +9529,9 @@ var RulesReorder = function RulesReorder(_ref) {
         className: "mb-3",
         style: "body2",
         children: t("neetoRules.description.reorder")
-      }), /*#__PURE__*/jsxs("div", {
+      }), /*#__PURE__*/jsx("div", {
         className: "flex flex-col items-center",
-        children: [/*#__PURE__*/jsx(DragDropContext, {
+        children: /*#__PURE__*/jsx(DragDropContext, {
           onDragEnd: onDragEnd,
           children: /*#__PURE__*/jsx(ConnectedDroppable$1, {
             droppableId: "droppable",
@@ -9524,15 +9547,15 @@ var RulesReorder = function RulesReorder(_ref) {
                 }), /*#__PURE__*/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__*/jsx(Reorder, {}), /*#__PURE__*/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__*/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__*/createElement(DraggableItem$1, {
                     rule: rule,
                     key: rule.id,
@@ -9542,18 +9565,16 @@ var RulesReorder = function RulesReorder(_ref) {
               }));
             }
           })
-        }), isNotEmpty(paginationProps) && /*#__PURE__*/jsx(Pagination, _objectSpread$p({}, paginationProps))]
+        })
       })]
     }), /*#__PURE__*/jsxs(Pane.Footer, {
       className: "flex items-center gap-x-2",
       children: [/*#__PURE__*/jsx(Button, {
-        disabled: isPending || equals(rules, initialRules),
+        disabled: isPending || equals(rules, reorderedRules),
         label: t("neetoRules.common.saveChange"),
         loading: isPending,
         style: "primary",
-        onClick: function onClick() {
-          return handleReorderSave(initialRules);
-        }
+        onClick: handleReorderSave
       }), /*#__PURE__*/jsx(Button, {
         label: t("neetoRules.buttons.cancel"),
         style: "text",
@@ -9642,6 +9663,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: t$5("neetoRules.button.edit"),
     to: buildUrl(createRoutes(automationRulesPath).edit, {
       ruleId: rule.id
@@ -9649,6 +9671,7 @@ var buildActionDropdownMenuItems = function buildActionDropdownMenuItems(_ref) {
   }, {
     key: "clone",
     "data-test-id": "automation-rules-clone-link",
+    "data-cy": "automation-rules-clone-link",
     label: t$5("neetoRules.button.clone"),
     onClick: function onClick() {
       return onClone(rule.id);
@@ -9659,6 +9682,7 @@ var buildActionDropdownMenuItems = function buildActionDropdownMenuItems(_ref) {
   }, {
     key: "delete",
     "data-test-id": "automation-rules-delete-link",
+    "data-cy": "automation-rules-delete-link",
     label: t$5("neetoRules.button.delete"),
     onClick: function onClick() {
       return onDelete(rule);
@@ -9759,8 +9783,8 @@ var renderNoDataHelpText = function renderNoDataHelpText(helpDocUrl) {
   return /*#__PURE__*/jsx(Trans, {
     i18nKey: "neetoRules.noData.helpText",
     components: {
-      a: /*#__PURE__*/jsx(Link, {
-        className: "neeto-ui-text-primary-600 underline",
+      a: /*#__PURE__*/jsx(Button, {
+        style: "link",
         target: "_blank",
         to: {
           pathname: helpDocUrl
@@ -9791,7 +9815,9 @@ var RulesTable = function RulesTable(_ref) {
     page = _ref.page,
     setPage = _ref.setPage,
     _ref$allowCloning = _ref.allowCloning,
-    allowCloning = _ref$allowCloning === void 0 ? true : _ref$allowCloning;
+    allowCloning = _ref$allowCloning === void 0 ? true : _ref$allowCloning,
+    _ref$hasUnfilteredRul = _ref.hasUnfilteredRules,
+    hasUnfilteredRules = _ref$hasUnfilteredRul === void 0 ? true : _ref$hasUnfilteredRul;
   var _useQueryParams = useQueryParams(),
     _useQueryParams$searc = _useQueryParams.searchTerm,
     searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
@@ -9862,22 +9888,8 @@ var RulesTable = function RulesTable(_ref) {
   if (isLoading && isEmpty(rules)) {
     return /*#__PURE__*/jsx(PageLoader, {});
   }
-  if (isEmpty(rules)) {
-    return /*#__PURE__*/jsx("div", {
-      className: "flex h-full w-full items-center justify-center",
-      children: /*#__PURE__*/jsx(NoData, _objectSpread$n({
-        title: t("neetoRules.noData.title")
-      }, isEmpty(searchTerm) && {
-        helpText: helpDocUrl ? renderNoDataHelpText(helpDocUrl) : null,
-        primaryButtonProps: {
-          label: t("neetoRules.button.addNew"),
-          to: createRoutes(automationRulesPath)["new"]
-        }
-      }))
-    });
-  }
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(SubHeader, {
+    children: [hasUnfilteredRules && /*#__PURE__*/jsx(SubHeader, {
       leftActionBlock: /*#__PURE__*/jsx(Typography, {
         className: "mr-4 font-semibold",
         style: "h4",
@@ -9885,50 +9897,63 @@ var RulesTable = function RulesTable(_ref) {
           count: totalCount
         })
       })
-    }), /*#__PURE__*/jsx(TableWrapper, {
-      hasPagination: totalCount > DEFAULT_PAGE_SIZE,
-      children: /*#__PURE__*/jsx(Table, {
-        columnData: columnData,
-        totalCount: totalCount,
-        fixedHeight: true,
-        allowClick: false,
-        currentPageNumber: page,
-        defaultPageSize: DEFAULT_PAGE_SIZE,
-        handlePageChange: setPage,
-        loading: isUpdating || isCloning || isDeleting || isLoading,
-        rowData: rules.map(function (item) {
-          return _objectSpread$n({
-            key: item.id
-          }, item);
+    }), isNotEmpty(rules) ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(TableWrapper, {
+        hasPagination: totalCount > DEFAULT_PAGE_SIZE,
+        children: /*#__PURE__*/jsx(Table, {
+          columnData: columnData,
+          totalCount: totalCount,
+          fixedHeight: true,
+          allowClick: false,
+          currentPageNumber: page,
+          defaultPageSize: DEFAULT_PAGE_SIZE,
+          handlePageChange: setPage,
+          loading: isUpdating || isCloning || isDeleting || isLoading,
+          rowData: rules.map(function (item) {
+            return _objectSpread$n({
+              key: item.id
+            }, item);
+          }),
+          rowSelection: false,
+          scroll: {
+            x: 0
+          },
+          tableLayout: "fixed"
+        })
+      }), /*#__PURE__*/jsx(Alert, {
+        isOpen: !!selectedRule,
+        isSubmitting: isDeleting,
+        submitButtonLabel: t("neetoRules.button.delete"),
+        title: t("neetoRules.deleteAlert.title"),
+        message: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoRules.deleteAlert.message",
+          values: {
+            name: selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.name
+          }
         }),
-        rowSelection: false,
-        scroll: {
-          x: 0
+        onClose: function onClose() {
+          return setSelectedRule(null);
         },
-        tableLayout: "fixed"
-      })
-    }), /*#__PURE__*/jsx(Alert, {
-      isOpen: !!selectedRule,
-      isSubmitting: isDeleting,
-      submitButtonLabel: t("neetoRules.button.delete"),
-      title: t("neetoRules.deleteAlert.title"),
-      message: /*#__PURE__*/jsx(Trans, {
-        i18nKey: "neetoRules.deleteAlert.message",
-        values: {
-          name: selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.name
+        onSubmit: function onSubmit() {
+          return deleteRule({
+            id: selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.id,
+            url: url
+          }, {
+            onSuccess: handleDeleteSuccess
+          });
         }
-      }),
-      onClose: function onClose() {
-        return setSelectedRule(null);
-      },
-      onSubmit: function onSubmit() {
-        return deleteRule({
-          id: selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.id,
-          url: url
-        }, {
-          onSuccess: handleDeleteSuccess
-        });
-      }
+      })]
+    }) : /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, _objectSpread$n({
+        title: t("neetoRules.noData.title")
+      }, isEmpty(searchTerm) && {
+        helpText: helpDocUrl ? renderNoDataHelpText(helpDocUrl) : null,
+        primaryButtonProps: {
+          label: t("neetoRules.button.addNew"),
+          to: createRoutes(automationRulesPath)["new"]
+        }
+      }))
     })]
   });
 };
@@ -9971,11 +9996,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 = isPresent(searchTerm) || totalCount > 0;
@@ -9990,6 +10013,7 @@ var NeetoRules = function NeetoRules(_ref) {
       setIsReorderPaneOpen: setIsReorderPaneOpen
     }), /*#__PURE__*/jsx(RulesTable, _objectSpread$m(_objectSpread$m({}, _objectSpread$m({
       automationRulesPath: automationRulesPath,
+      hasUnfilteredRules: hasUnfilteredRules,
       helpDocUrl: helpDocUrl,
       page: page,
       rules: rules,
@@ -10003,15 +10027,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__*/jsx(RulesReorder, {
-      rules: rules,
+      totalCount: totalCount,
       url: url,
       isOpen: isReorderPaneOpen,
-      paginationProps: {
-        pageNo: page,
-        count: totalCount,
-        pageSize: DEFAULT_PAGE_SIZE,
-        navigate: setPage
-      },
       onClose: function onClose() {
         return setIsReorderPaneOpen(false);
       },
@@ -10126,25 +10144,24 @@ var LongTextField = function LongTextField(_ref) {
   var rows = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.rows) || DEFAULT_LONG_TEXT_ROWS;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [separator && /*#__PURE__*/jsx(Typography, {
-      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__*/jsx(Typography, {
+    }), /*#__PURE__*/jsx(Button, {
       "data-cy": "long-text-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: label.toLowerCase(),
+      style: "link",
+      className: classNames("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__*/jsxs(Pane, {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -10348,25 +10365,24 @@ var ApiFields = function ApiFields(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      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__*/jsx(Typography, {
+    }), /*#__PURE__*/jsx(Button, {
       "data-cy": "api-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: defaultLabel.toLowerCase(),
+      style: "link",
+      className: classNames("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__*/jsxs(Pane, {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -10437,23 +10453,22 @@ var CustomAction = function CustomAction(_ref) {
   var defaultLabel = selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       style: "h5",
       weight: "normal",
       children: separator
-    }), /*#__PURE__*/jsx(Typography, {
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+    }), /*#__PURE__*/jsx(Button, {
+      label: defaultLabel.toLowerCase(),
+      style: "link",
+      className: classNames("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__*/jsxs(Pane, {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -10505,7 +10520,7 @@ var DateField$1 = function DateField(_ref) {
   var isValid = errors.actions && 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]) && 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__*/jsxs(Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       "data-cy": "action-dropdown-seperator-text",
       style: "h5",
       weight: "normal",
@@ -10530,10 +10545,10 @@ var DateField$1 = function DateField(_ref) {
           });
         }
       })]
-    }) : /*#__PURE__*/jsx(Typography, {
-      style: "h5",
-      weight: "semibold",
-      className: classNames("neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline", {
+    }) : /*#__PURE__*/jsx(Button, {
+      label: label,
+      style: "link",
+      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
@@ -10541,8 +10556,7 @@ var DateField$1 = function DateField(_ref) {
         setShowInput(function (prevState) {
           return !prevState;
         });
-      },
-      children: label
+      }
     })]
   });
 };
@@ -10734,7 +10748,7 @@ var DropdownField$1 = function DropdownField(_ref) {
   }, [defaultValue, dropdownOptions]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       "data-cy": "action-dropdown-seperator-text",
       style: "h5",
       weight: "normal",
@@ -10742,12 +10756,12 @@ var DropdownField$1 = function DropdownField(_ref) {
     }), /*#__PURE__*/jsx(Dropdown$1, {
       buttonStyle: "secondary",
       className: "neeto-ui-bg-gray-100",
-      customTarget: /*#__PURE__*/jsx(Typography, {
+      customTarget: /*#__PURE__*/jsx(Button, {
         "data-cy": "action-dropdown-button",
-        style: "h5",
-        weight: "semibold",
-        className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-          "neeto-ui-text-primary-800": isActive,
+        label: defaultSelectedOption === null || defaultSelectedOption === void 0 || (_defaultSelectedOptio = defaultSelectedOption.label) === null || _defaultSelectedOptio === void 0 ? void 0 : _defaultSelectedOptio.toLowerCase(),
+        style: "link",
+        className: classNames("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() {
@@ -10755,8 +10769,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__*/jsxs(Menu$9, {
@@ -10921,25 +10934,24 @@ var EmailFields = function EmailFields(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      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__*/jsx(Typography, {
+    }), /*#__PURE__*/jsx(Button, {
       "data-cy": "email-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: defaultLabel.toLowerCase(),
+      style: "link",
+      className: classNames("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__*/jsxs(Pane, {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -11063,18 +11075,17 @@ var Input = function Input(_ref) {
           });
         }
       })
-    }) : /*#__PURE__*/jsx(Typography, {
-      style: "h5",
-      weight: "semibold",
-      className: classNames("neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-error-500": isValid
+    }) : /*#__PURE__*/jsx(Button, {
+      label: label,
+      style: "link",
+      className: classNames("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
+      }
     })]
   });
 };
@@ -11111,7 +11122,7 @@ var SHORTCUTS = {
 var _excluded$a = ["value", "nullable", "className", "handleSubmit", "handleCancel"];
 function ownKeys$i(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$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var InlineInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+var InlineInput = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$value = props.value,
     value = _props$value === void 0 ? "" : _props$value,
     _props$nullable = props.nullable,
@@ -11211,25 +11222,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__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      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__*/jsx(Typography, {
+    }), /*#__PURE__*/jsx(Button, {
       "data-cy": "list-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: t("neetoRules.form.list"),
+      style: "link",
+      className: classNames("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__*/jsxs(Pane, {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -11276,7 +11286,7 @@ var ListField = function ListField(_ref) {
                   className: "w-full",
                   children: function children(message) {
                     return /*#__PURE__*/jsx(Typography, {
-                      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
@@ -11359,7 +11369,7 @@ var MultiSelect$1 = function MultiSelect(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsx(Typography, {
-      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",
@@ -11370,12 +11380,12 @@ var MultiSelect$1 = function MultiSelect(_ref) {
       closeOnSelect: false,
       position: "top-start",
       customTarget: isNotEmpty(selectedOptions) ? /*#__PURE__*/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__*/jsxs("span", {
-            className: "flex flex-wrap",
+            className: "flex flex-wrap items-center gap-x-2 gap-y-1",
             children: [!!idx && /*#__PURE__*/jsx(Typography, {
-              className: "neeto-ui-text-gray-700 mr-1 mt-1",
+              className: "neeto-ui-text-gray-700",
               style: "h5",
               weight: "normal",
               onClick: function onClick(e) {
@@ -11384,33 +11394,31 @@ var MultiSelect$1 = function MultiSelect(_ref) {
               children: t("neetoRules.common.and", {
                 what: ""
               })
-            }), /*#__PURE__*/jsx(Typography, {
+            }), /*#__PURE__*/jsx(Button, {
               "data-cy": "multi-select-action-button",
-              style: "h5",
-              weight: "semibold",
-              className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mr-1 mt-1 cursor-pointer underline", {
-                "neeto-ui-text-primary-800": activeOption === (option === null || option === void 0 ? void 0 : option.value)
+              label: option === null || option === void 0 ? void 0 : option.label.toLowerCase(),
+              style: "link",
+              className: classNames("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(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__*/jsx(Typography, {
-        style: "h5",
-        weight: "semibold",
-        className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-          "neeto-ui-text-primary-800": activeOption === defaultLabel,
+      }) : /*#__PURE__*/jsx(Button, {
+        label: defaultLabel,
+        style: "link",
+        className: classNames("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(assocPath(["actions", "value", index], true, touched));
           setActiveOption(activeOption ? null : defaultLabel);
-        },
-        children: defaultLabel
+        }
       }),
       onClose: handleClose,
       children: /*#__PURE__*/jsxs(Menu$8, {
@@ -11476,25 +11484,24 @@ var NoteField = function NoteField(_ref) {
   var defaultLabel = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || t("neetoRules.form.note");
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      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__*/jsx(Typography, {
+    }), /*#__PURE__*/jsx(Button, {
       "data-cy": "note-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: defaultLabel.toLowerCase(),
+      style: "link",
+      className: classNames("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__*/jsxs(Pane, {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -11823,25 +11830,24 @@ var SmsFields = function SmsFields(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      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__*/jsx(Typography, {
+    }), /*#__PURE__*/jsx(Button, {
       "data-cy": "sms-action-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": showPane,
+      label: defaultLabel.toLowerCase(),
+      style: "link",
+      className: classNames("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__*/jsxs(Pane, {
       initialFocusRef: initialFocusRef,
       isOpen: showPane,
@@ -12486,77 +12492,78 @@ var ActionItem = function ActionItem(_ref) {
     findSelectedOption();
   }, [selectedField]);
   return /*#__PURE__*/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__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700 mt-1",
-      style: "h5",
-      weight: "normal",
-      children: label
-    }), /*#__PURE__*/jsx(Dropdown$1, {
-      buttonStyle: "secondary",
-      className: "neeto-ui-bg-gray-100",
-      position: "bottom-start",
-      customTarget: /*#__PURE__*/jsx(Typography, {
-        "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__*/jsxs("div", {
+      className: "flex flex-wrap items-center gap-x-2 gap-y-3",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-700",
         style: "h5",
-        weight: "semibold",
-        className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-          "neeto-ui-text-primary-800": isActive,
-          "neeto-ui-text-error-500": 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__*/jsxs(Menu$7, {
-        className: "max-h-60 max-w-2xl p-3",
-        children: [actionOptions.length > MAXIMUM_OPTION_LENGTH$1 && /*#__PURE__*/jsx(Input$1, {
-          autoFocus: true,
-          className: "mb-1",
-          "data-cy": "search-text-field",
-          placeholder: t("neetoRules.common.search"),
-          prefix: /*#__PURE__*/jsx(Search, {}),
-          value: searchTerm,
-          onChange: function onChange(e) {
-            return setSearchTerm(e.target.value);
-          },
-          onClick: function onClick(e) {
-            return e.stopPropagation();
+        weight: "normal",
+        children: label
+      }), /*#__PURE__*/jsx(Dropdown$1, {
+        buttonStyle: "secondary",
+        className: "neeto-ui-bg-gray-100",
+        position: "bottom-start",
+        customTarget: /*#__PURE__*/jsx(Button, {
+          "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("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__*/jsx(OptionsWrapper, {
-          hasScroll: actionOptions.length > MAXIMUM_OPTION_LENGTH$1,
-          children: searchedOptions.map(function (option, idx) {
-            return /*#__PURE__*/jsx(MenuItem$7.Button, {
-              "data-cy": "".concat(joinHyphenCase(option.label), "-menu-item"),
-              suffix: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value && /*#__PURE__*/jsx(Check, {
-                className: "neeto-ui-text-primary-800"
-              }),
-              onClick: function onClick() {
-                return handleSelectOption(option);
-              },
-              children: option.label
-            }, idx);
-          })
-        }), isEmpty(actionOptions) && /*#__PURE__*/jsx(MenuItem$7.Button, {
-          "data-cy": "no-options-menu-item",
-          children: t("neetoRules.common.noOptions")
-        })]
-      })
-    }), /*#__PURE__*/jsx(ActionSubItem, {
-      action: action,
-      index: index,
-      selectedField: selectedField,
-      name: "".concat(name, ".metadata"),
-      options: getSelectedFieldOptions()
-    }), isPresent(action === null || action === void 0 ? void 0 : action.children) && /*#__PURE__*/jsx(ActionChildren, {
-      action: action,
-      index: index,
-      selectedField: selectedField,
-      parentFieldName: name
+        }),
+        onClose: handleClose,
+        children: /*#__PURE__*/jsxs(Menu$7, {
+          className: "max-h-60 max-w-2xl p-3",
+          children: [actionOptions.length > MAXIMUM_OPTION_LENGTH$1 && /*#__PURE__*/jsx(Input$1, {
+            autoFocus: true,
+            "data-cy": "search-text-field",
+            placeholder: t("neetoRules.common.search"),
+            prefix: /*#__PURE__*/jsx(Search, {}),
+            value: searchTerm,
+            onChange: function onChange(e) {
+              return setSearchTerm(e.target.value);
+            },
+            onClick: function onClick(e) {
+              return e.stopPropagation();
+            }
+          }), /*#__PURE__*/jsx(OptionsWrapper, {
+            hasScroll: actionOptions.length > MAXIMUM_OPTION_LENGTH$1,
+            children: searchedOptions.map(function (option, idx) {
+              return /*#__PURE__*/jsx(MenuItem$7.Button, {
+                "data-cy": "".concat(joinHyphenCase(option.label), "-menu-item"),
+                suffix: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value && /*#__PURE__*/jsx(Check, {
+                  className: "neeto-ui-text-primary-800"
+                }),
+                onClick: function onClick() {
+                  return handleSelectOption(option);
+                },
+                children: option.label
+              }, idx);
+            })
+          }), isEmpty(actionOptions) && /*#__PURE__*/jsx(MenuItem$7.Button, {
+            "data-cy": "no-options-menu-item",
+            children: t("neetoRules.common.noOptions")
+          })]
+        })
+      }), /*#__PURE__*/jsx(ActionSubItem, {
+        action: action,
+        index: index,
+        selectedField: selectedField,
+        name: "".concat(name, ".metadata"),
+        options: getSelectedFieldOptions()
+      }), isPresent(action === null || action === void 0 ? void 0 : action.children) && /*#__PURE__*/jsx(ActionChildren, {
+        action: action,
+        index: index,
+        selectedField: selectedField,
+        parentFieldName: name
+      })]
     })]
   });
 };
@@ -12754,26 +12761,24 @@ var DropdownField = function DropdownField(_ref) {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
     position: "bottom-start",
-    customTarget: /*#__PURE__*/jsx(Typography, {
+    customTarget: /*#__PURE__*/jsx(Button, {
       "data-cy": "condition-".concat(fieldType, "-dropdown-button"),
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": 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("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__*/jsxs(Menu$6, {
       className: "max-h-60 max-w-2xl p-3",
       children: [options.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/jsx(Input$1, {
         autoFocus: true,
-        className: "mb-1",
         "data-cy": "search-text-field",
         placeholder: t("neetoRules.common.search"),
         prefix: /*#__PURE__*/jsx(Search, {}),
@@ -12876,12 +12881,12 @@ var Dropdown = function Dropdown(_ref) {
   return /*#__PURE__*/jsx(Dropdown$1, {
     buttonStyle: "secondary",
     className: "neeto-ui-bg-gray-100",
-    customTarget: /*#__PURE__*/jsx(Typography, {
+    customTarget: /*#__PURE__*/jsx(Button, {
       "data-cy": "condition-value-dropdown-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": isActive,
+      label: defaultSelectedOption === null || defaultSelectedOption === void 0 || (_defaultSelectedOptio = defaultSelectedOption.label) === null || _defaultSelectedOptio === void 0 ? void 0 : _defaultSelectedOptio.toLowerCase(),
+      style: "link",
+      className: classNames("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() {
@@ -12889,15 +12894,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__*/jsxs(Menu$5, {
       className: "max-h-60 max-w-2xl p-3",
       children: [options.length > MAXIMUM_OPTION_LENGTH$2 && /*#__PURE__*/jsx(Input$1, {
         autoFocus: true,
-        className: "mb-1",
         "data-cy": "search-text-field",
         placeholder: t("neetoRules.common.search"),
         prefix: /*#__PURE__*/jsx(Search, {}),
@@ -12972,18 +12975,17 @@ var InputField$1 = function InputField(_ref) {
         });
       }
     })
-  }) : /*#__PURE__*/jsx(Typography, {
-    style: "h5",
-    weight: "semibold",
-    className: classNames("neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline", {
+  }) : /*#__PURE__*/jsx(Button, {
+    label: label,
+    style: "link",
+    className: classNames("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
+    }
   });
 };
 
@@ -13032,43 +13034,41 @@ var MultiSelect = function MultiSelect(_ref) {
     closeOnSelect: false,
     position: "top-start",
     customTarget: isNotEmpty(options) ? /*#__PURE__*/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__*/jsxs(React__default.Fragment, {
+        return /*#__PURE__*/jsxs(Fragment$1, {
           children: [!!idx && /*#__PURE__*/jsx(Typography, {
-            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__*/jsx(Typography, {
+          }), /*#__PURE__*/jsx(Button, {
             "data-cy": "condition-value-multi-select-field",
-            style: "h5",
-            weight: "semibold",
-            className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mr-1 mt-1 cursor-pointer underline", {
-              "neeto-ui-text-primary-800": activeOption === option.value
+            label: option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase(),
+            style: "link",
+            className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
+              "neeto-ui-text-accent-800": activeOption === option.value
             }),
             onClick: function onClick() {
               setTouched(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__*/jsx(Typography, {
+    }) : /*#__PURE__*/jsx(Button, {
       "data-cy": "condition-value-multi-select-field",
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
-        "neeto-ui-text-primary-800": activeOption === defaultLabel,
+      label: defaultLabel,
+      style: "link",
+      className: classNames("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(assocPath(["conditions", "value", index], true, touched));
         setActiveOption(activeOption ? null : defaultLabel);
-      },
-      children: defaultLabel
+      }
     }),
     onClose: handleClose,
     children: /*#__PURE__*/jsxs(Menu$4, {
@@ -13136,11 +13136,11 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
   var defaultLabel = t("neetoRules.form.selectValues");
   var isValid = errors.conditions && isNotNil((_errors$conditions = errors.conditions) === null || _errors$conditions === void 0 || (_errors$conditions = _errors$conditions.value) === null || _errors$conditions === void 0 ? void 0 : _errors$conditions[index]) && isNotNil((_touched$conditions = touched.conditions) === null || _touched$conditions === void 0 || (_touched$conditions = _touched$conditions.value) === null || _touched$conditions === void 0 ? void 0 : _touched$conditions[index]);
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [isEmpty(allOptions) && /*#__PURE__*/jsx(Typography, {
+    children: [isEmpty(allOptions) && /*#__PURE__*/jsx(Button, {
       "data-cy": "condition-value-multi-select-create-button",
-      style: "h5",
-      weight: "semibold",
-      className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline", {
+      label: defaultLabel,
+      style: "link",
+      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
@@ -13148,26 +13148,24 @@ var MultiSelectCreate = function MultiSelectCreate(_ref) {
         setShowPane(function (prevState) {
           return !prevState;
         });
-      },
-      children: defaultLabel
+      }
     }), allOptions.map(function (option, idx) {
-      return /*#__PURE__*/jsxs(React__default.Fragment, {
+      return /*#__PURE__*/jsxs(Fragment$1, {
         children: [!!idx && /*#__PURE__*/jsx(Typography, {
-          className: "neeto-ui-text-gray-700 mt-1",
+          className: "neeto-ui-text-gray-700",
           style: "h5",
           weight: "normal",
           children: t("neetoRules.common.or")
-        }), /*#__PURE__*/jsx(Typography, {
-          className: "hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mt-1 cursor-pointer underline",
+        }), /*#__PURE__*/jsx(Button, {
+          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__*/jsxs(Pane, {
@@ -13659,10 +13657,10 @@ var DateField = function DateField(_ref) {
           });
         }
       })]
-    }) : /*#__PURE__*/jsx(Typography, {
-      style: "h5",
-      weight: "semibold",
-      className: classNames("neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline", {
+    }) : /*#__PURE__*/jsx(Button, {
+      label: label,
+      style: "link",
+      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
         "neeto-ui-text-error-500": isValid
       }),
       onClick: function onClick() {
@@ -13670,8 +13668,7 @@ var DateField = function DateField(_ref) {
         setShowInput(function (prevState) {
           return !prevState;
         });
-      },
-      children: label
+      }
     })
   });
 };
@@ -13788,14 +13785,14 @@ var ConditionItem = function ConditionItem(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [isWithEvents && !index && /*#__PURE__*/jsx(Typography, {
-      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__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "neeto-ui-text-gray-700",
       style: "h5",
       weight: "normal",
       children: defaultLabel
@@ -13826,15 +13823,14 @@ var LogicOperator = function LogicOperator(_ref) {
   var logicOperation = _ref.logicOperation,
     handleGroupJoinType = _ref.handleGroupJoinType;
   var logicOperationLabel = OPERATOR_LABELS[logicOperation];
-  return /*#__PURE__*/jsx(Typography, {
-    className: "neeto-ui-text-gray-800 hover:neeto-ui-text-primary-800 mt-1 cursor-pointer underline",
+  return /*#__PURE__*/jsx(Button, {
+    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
+    }
   });
 };
 
@@ -13898,7 +13894,7 @@ var Conditions = function Conditions(_ref) {
           return /*#__PURE__*/jsxs("div", {
             className: "flex w-full justify-between",
             children: [/*#__PURE__*/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__*/jsx(LogicOperator, {
                 handleGroupJoinType: handleGroupJoinType,
                 logicOperation: condition.joinType
@@ -14057,29 +14053,28 @@ var Performer$1 = function Performer(_ref) {
     setSelectedOption(option);
   };
   return /*#__PURE__*/jsxs("div", {
-    className: "my-auto flex",
+    className: "my-auto flex items-center gap-x-2 gap-y-3",
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700 mr-2",
+      className: "neeto-ui-text-gray-700",
       style: "h5",
       weight: "normal",
       children: t("neetoRules.common.by")
     }), /*#__PURE__*/jsx(Dropdown$1, {
       buttonStyle: "secondary",
       className: "neeto-ui-bg-gray-100",
-      customTarget: /*#__PURE__*/jsx(Typography, {
+      customTarget: /*#__PURE__*/jsx(Button, {
         "data-cy": "event-performer-dropdown",
-        style: "h5",
-        weight: "semibold",
-        className: classNames("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(" 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__*/jsxs(Menu$3, {
@@ -14220,7 +14215,7 @@ var Events$1 = function Events(_ref) {
     setSearchTerm("");
   };
   return /*#__PURE__*/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__*/jsx(Typography, {
       className: "neeto-ui-text-gray-700 my-auto",
       style: "h5",
@@ -14232,42 +14227,40 @@ var Events$1 = function Events(_ref) {
       closeOnSelect: false,
       position: "top-start",
       customTarget: isNotEmpty(allEvents) ? /*#__PURE__*/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__*/jsxs("span", {
-            className: "flex flex-wrap gap-y-1",
+            className: "flex flex-wrap items-center gap-x-2 gap-y-1",
             children: [!!idx && /*#__PURE__*/jsx(Typography, {
-              className: "neeto-ui-text-gray-700 mr-1",
+              className: "neeto-ui-text-gray-700",
               style: "h5",
               weight: "normal",
               children: t("neetoRules.common.or")
-            }), /*#__PURE__*/jsx(Typography, {
+            }), /*#__PURE__*/jsx(Button, {
               "data-cy": "condition-value-multi-select-field",
-              style: "h5",
-              weight: "semibold",
-              className: classNames("hover:neeto-ui-text-primary-800 neeto-ui-text-gray-800 mr-1 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("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__*/jsx(Typography, {
+      }) : /*#__PURE__*/jsx(Button, {
         "data-cy": "condition-value-multi-select-field",
-        style: "h5",
-        weight: "semibold",
-        className: classNames("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("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__*/jsxs(Menu$2, {
@@ -14473,20 +14466,19 @@ var EventItem = function EventItem(_ref) {
       buttonStyle: "secondary",
       className: "neeto-ui-bg-gray-100",
       closeOnSelect: false,
-      customTarget: /*#__PURE__*/jsx(Typography, {
+      customTarget: /*#__PURE__*/jsx(Button, {
         "data-cy": "event-dropdown-button",
-        style: "h5",
-        weight: "semibold",
-        className: classNames("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("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__*/jsxs(Menu$1, {
@@ -14589,20 +14581,19 @@ var Performer = function Performer(_ref) {
       buttonStyle: "secondary",
       className: "neeto-ui-bg-gray-100",
       closeOnSelect: false,
-      customTarget: /*#__PURE__*/jsx(Typography, {
+      customTarget: /*#__PURE__*/jsx(Button, {
         "data-cy": "event-performer-dropdown",
-        style: "h5",
-        weight: "semibold",
-        className: classNames("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("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__*/jsxs(Menu, {
@@ -15278,7 +15269,7 @@ var MultiSelectValues = function MultiSelectValues(_ref) {
     values = _ref.values;
   return /*#__PURE__*/jsx(Fragment, {
     children: values === null || values === void 0 ? void 0 : values.map(function (value, idx) {
-      return /*#__PURE__*/jsxs(React__default.Fragment, {
+      return /*#__PURE__*/jsxs(Fragment$1, {
         children: [!!idx && /*#__PURE__*/jsx(Typography, {
           className: "neeto-ui-text-gray-700",
           style: "h5",