@bigbinary/neeto-rules-frontend 2.5.61 → 2.5.62

package/dist/v2/NeetoRulesForm.js

@@ -1,15 +1,14 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { u as useOnClickOutside, S as SHORTCUTS, f as flatten, a as useDebouncedUpdate } from '../useDebouncedUpdate-BcPAGgg7.js';
+import { u as useOnClickOutside, S as SHORTCUTS, f as flatten, a as useDebouncedUpdate } from '../useDebouncedUpdate-sW5WvXe0.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { shallow } from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 import { useState, createElement, useRef, useEffect, useCallback, forwardRef, useMemo, memo, Fragment as Fragment$1 } from 'react';
 import { Button, Callout, Typography, Input as Input$1, Label, Select, DatePicker, Checkbox, Badge, RadioGroup as RadioGroup$1, TimePicker, DropdownMenu, Tooltip, Switch as Switch$1, Spinner } from '@bigbinary/neeto-atoms';
 import { useFormikContext, useField, FieldArray, ErrorMessage, Formik, Form as Form$1 } from 'formik';
+import { PanelRightClose, Search, Trash2, CircleHelp, RefreshCw, Check, X, Plus, ChevronLeft, ChevronDown, Eye } from 'lucide-react';
 import { findBy, isNotEmpty, noop, isPresent, hyphenate, renameKeys, notEqualsDeep, nullSafe, _findBy, toLabelAndValue, removeBy, isNotPresent, isNot } from '@bigbinary/neeto-cist';
-import Plus from '@bigbinary/neeto-icons/Plus';
-import Delete from '@bigbinary/neeto-icons/Delete';
 import { useTranslation, Trans } from 'react-i18next';
 import { u as useUtilityStore } from '../useUtilityStore-BBb39TOj.js';
 import classNames from 'classnames';
@@ -17,34 +16,24 @@ import { toLower, identity, pluck, isEmpty, mergeDeepLeft, isNotNil, whereAny, r
 import { t } from 'i18next';
 import * as yup from 'yup';
 import { RadioGroup, Textarea, Input as Input$2, Switch, MultiEmailInput, Select as Select$1, ActionBlock } from '@bigbinary/neeto-atoms/formik';
-import Search from '@bigbinary/neeto-icons/Search';
-import { a as useActiveField, u as useCustomDataStore } from '../useCustomDataStore-D7hl6nev.js';
+import { a as useActiveField, u as useCustomDataStore } from '../useCustomDataStore-CU3KpyD4.js';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import Collapse from '@bigbinary/neeto-icons/Collapse';
-import Left from '@bigbinary/neeto-icons/Left';
 import { withT, useStateWithDependency, useDebounce } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
 import Editor from '@monaco-editor/react';
-import Help from '@bigbinary/neeto-icons/Help';
-import DynamicVariables from '@bigbinary/neeto-molecules/DynamicVariables';
+import DynamicVariables from '@bigbinary/neeto-molecules/v2/DynamicVariables';
 import { dayjs, joinHyphenCase, hyphenize } from '@bigbinary/neeto-commons-frontend/v2/utils';
 import { g as getSeparator, d as dotPath$1, b as getDateTimeValue, D as DATE_TIME_TYPES, e as DATE_TIME_FORMAT, f as DATE_FORMAT, a as getDateTimeFormattedValue, T as TIME_FORMAT } from '../utils-CfCq6Ltz.js';
 import FormikEditor from '@bigbinary/neeto-editor/FormikEditor';
-import Refresh from '@bigbinary/neeto-icons/Refresh';
 import useHotkeys from '@bigbinary/neeto-hotkeys';
-import Check from '@bigbinary/neeto-icons/Check';
-import Close from '@bigbinary/neeto-icons/Close';
 import CreatableSelect from 'react-select/creatable';
 import _toArray from '@babel/runtime/helpers/toArray';
-import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/PhoneNumber';
+import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/v2/PhoneNumber';
 import { components } from 'react-select';
 import { O as OPERATORS$1, V as VERB_LABELS, M as MAXIMUM_OPTION_LENGTH$2, I as INPUT_FIELD_TYPES, C as CONDITION_VALUE_TYPES, F as FIELDS_WITH_OPTIONS$1 } from '../constants-CYdcft3h.js';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/v2/initializers';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
-import Eye from '@bigbinary/neeto-icons/Eye';
-import Down from '@bigbinary/neeto-icons/Down';
 import Container from '@bigbinary/neeto-molecules/v2/Container';
 import NeetoHeader from '@bigbinary/neeto-molecules/v2/Header';
 import '@bigbinary/neeto-commons-frontend/react-utils';
@@ -72,7 +61,7 @@ var Footer = function Footer(_ref) {
     className = _ref.className;
   return /*#__PURE__*/jsx("div", {
     "data-testid": "pane-footer",
-    className: classNames("neeto-rules-side-panel__footer neeto-ui-border-gray-200 flex items-center justify-between border-t p-6", className),
+    className: classNames("neeto-rules-side-panel__footer border-border flex items-center justify-between border-t p-6", className),
     children: children
   });
 };
@@ -80,30 +69,27 @@ var Footer = function Footer(_ref) {
 var Header = function Header(_ref) {
   var children = _ref.children,
     className = _ref.className;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow),
+    })),
     resetPanelState = _useUtilityStore.resetPanelState;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/jsxs("div", {
     "data-testid": "pane-header",
-    className: classNames("neeto-rules-side-panel__header neeto-ui-border-gray-200 flex items-start justify-between border-b p-6", _defineProperty({}, className, className)),
+    className: classNames("neeto-rules-side-panel__header border-border flex items-start justify-between border-b p-6", _defineProperty({}, className, className)),
     children: [/*#__PURE__*/jsx("div", {
       className: "flex min-w-0 grow",
       children: children
     }), /*#__PURE__*/jsx(Button, {
       className: "shrink-0 scale-x-[-1] rtl:rotate-180",
       "data-testid": "collapse-sidebar-button",
-      icon: Collapse,
+      icon: PanelRightClose,
       size: "default",
+      title: t("neetoRules.common.collapseSidebar"),
       variant: "ghost",
-      tooltipProps: {
-        content: t("neetoRules.common.collapseSidebar"),
-        placement: "bottom"
-      },
       onClick: resetPanelState
     })]
   });
@@ -113,12 +99,12 @@ var _excluded$f = ["component"];
 function ownKeys$u(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$u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$u(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Panel = function Panel() {
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         panelState: store["panelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow),
+    })),
     panelState = _useUtilityStore.panelState,
     resetPanelState = _useUtilityStore.resetPanelState;
   var config = {
@@ -140,7 +126,7 @@ var Panel = function Panel() {
     large: "neeto-rules-side-panel--large"
   }[panelState.size] || "neeto-rules-side-panel--small";
   return /*#__PURE__*/jsx("div", _objectSpread$u(_objectSpread$u({
-    className: classNames("neeto-rules-side-panel neeto-ui-border-gray-200 transition-width neeto-ui-bg-white ms-auto flex h-screen max-h-full flex-col overflow-y-auto border-s duration-300 ease-in-out", _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, panelSize, isOpen), "w-0 overflow-hidden", !isOpen), "absolute", hasOverlays), "end-0", hasOverlays))
+    className: classNames("neeto-rules-side-panel border-border transition-width bg-background ms-auto flex h-screen max-h-full flex-col overflow-y-auto border-s duration-300 ease-in-out", _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, panelSize, isOpen), "w-0 overflow-hidden", !isOpen), "absolute", hasOverlays), "end-0", hasOverlays))
   }, paneProps), {}, {
     children: /*#__PURE__*/jsx(Component, _objectSpread$u(_objectSpread$u({}, data), {}, {
       onClose: resetPanelState
@@ -154,7 +140,7 @@ Panel.Footer = Footer;
 var StickySidebarHeader = function StickySidebarHeader(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx("div", {
-    className: "sticky top-0 neeto-ui-bg-white py-6 flex flex-col gap-3",
+    className: "sticky top-0 bg-background py-6 flex flex-col gap-3",
     children: children
   });
 };
@@ -313,15 +299,15 @@ var ActionPanel = function ActionPanel() {
     _useState2 = _slicedToArray(_useState, 2),
     searchTerm = _useState2[0],
     setSearchTerm = _useState2[1];
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore(useShallow(function (store) {
       var _store$panelState, _store$panelState2, _store$panelState3, _store$panelState4, _store$panelState5, _store$panelState6, _store$panelState7;
       return {
         index: (_store$panelState = store["panelState"]) === null || _store$panelState === void 0 || (_store$panelState = _store$panelState["data"]) === null || _store$panelState === void 0 ? void 0 : _store$panelState["index"],
@@ -332,7 +318,7 @@ var ActionPanel = function ActionPanel() {
         errorMessage: (_store$panelState6 = store["panelState"]) === null || _store$panelState6 === void 0 || (_store$panelState6 = _store$panelState6["data"]) === null || _store$panelState6 === void 0 ? void 0 : _store$panelState6["errorMessage"],
         isIntegrableError: (_store$panelState7 = store["panelState"]) === null || _store$panelState7 === void 0 || (_store$panelState7 = _store$panelState7["data"]) === null || _store$panelState7 === void 0 ? void 0 : _store$panelState7["isIntegrableError"]
       };
-    }, shallow),
+    })),
     index = _useUtilityStore2.index,
     name = _useUtilityStore2.name,
     actionOptions = _useUtilityStore2.actionOptions,
@@ -387,11 +373,11 @@ var ActionPanel = function ActionPanel() {
         className: "flex flex-col space-y-2",
         children: [/*#__PURE__*/jsxs(Typography, {
           "data-testid": "action-title",
-          variant: "h3",
+          variant: "h5",
           children: [label, "..."]
         }), /*#__PURE__*/jsx(Typography, {
           "data-testid": "action-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addActionDescription")
         })]
       })
@@ -469,17 +455,16 @@ var Target$k = function Target(_ref) {
   var label = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || defaultLabel;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [separator && /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "long-text-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsx(Button, {
       "data-testid": "long-text-action-button",
       label: label.toLowerCase(),
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: function onClick() {
         _onClick();
@@ -652,7 +637,7 @@ var KeyValuePairsField = withT(function (_ref) {
               placeholder: t("neetoRules.labels.value"),
               type: "text",
               suffix: showDeleteButton && /*#__PURE__*/jsx(Button, {
-                icon: Delete,
+                icon: Trash2,
                 size: "default",
                 variant: "ghost",
                 onClick: function onClick() {
@@ -823,7 +808,7 @@ var JsonEditor = function JsonEditor(_ref) {
       "data-testid": "api-field-body"
     }, isPresent(helpPopoverProps) && {
       helpIconProps: {
-        icon: Help,
+        icon: CircleHelp,
         popoverProps: buildHelpPopoverProps(helpPopoverProps)
       }
     }), {}, {
@@ -847,7 +832,7 @@ var JsonEditor = function JsonEditor(_ref) {
         onChange: handleChange,
         onMount: handleEditorDidMount
       }), error && touched && /*#__PURE__*/jsx("div", {
-        className: "neeto-ui-input__error",
+        className: "text-destructive text-xs",
         "data-testid": "json-field-input-error",
         children: error
       })]
@@ -981,17 +966,16 @@ var Target$j = function Target(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "api-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsx(Button, {
       "data-testid": "api-action-button",
       label: defaultLabel.toLowerCase(),
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: handleOnClick
     })]
@@ -1012,11 +996,11 @@ var ApiFields = function ApiFields(_ref2) {
     }),
     ref = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         isSaveAsTemplateEnabled: store["isSaveAsTemplateEnabled"]
       };
-    }, shallow),
+    })),
     isSaveAsTemplateEnabled = _useUtilityStore.isSaveAsTemplateEnabled;
   var hasFieldChanged = useHasFieldChanged(name);
   var templates = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates) || [];
@@ -1105,16 +1089,15 @@ var Target$i = function Target(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsx(Button, {
       "data-testid": "custom-action-button-".concat(hyphenate(defaultLabel)),
       label: defaultLabel.toLowerCase(),
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: handleOnClick
     })]
@@ -1165,16 +1148,15 @@ var Target$h = function Target(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "action-dropdown-seperator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsx(Button, {
       label: label,
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: handleOnClick
     })]
@@ -1329,17 +1311,16 @@ var Target$g = function Target(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "action-dropdown-seperator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsx(Button, {
       "data-testid": "action-dropdown-button",
       label: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase(),
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: handleOnClick
     })]
@@ -1389,7 +1370,7 @@ var SelectField$2 = function SelectField(_ref2) {
     })), handleSlackChannelRefresh && action.name === "message_to_slack" && /*#__PURE__*/jsx(Button, {
       className: "mt-[22px]",
       "data-testid": "refresh-slack-button",
-      icon: Refresh,
+      icon: RefreshCw,
       size: "default",
       variant: "outline",
       tooltipProps: {
@@ -1433,17 +1414,16 @@ var Target$f = function Target(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "action-email-seperator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsx(Button, {
       "data-testid": "email-action-button",
       label: defaultLabel.toLowerCase(),
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: handleOnClick
     })]
@@ -1475,11 +1455,11 @@ var EmailFields = function EmailFields(_ref2) {
     }),
     initialFocusRef = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         isSaveAsTemplateEnabled: store["isSaveAsTemplateEnabled"]
       };
-    }, shallow),
+    })),
     isSaveAsTemplateEnabled = _useUtilityStore.isSaveAsTemplateEnabled;
   var hasFieldChanged = useHasFieldChanged(name);
   var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
@@ -1584,17 +1564,17 @@ var Target$e = function Target(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700 mt-1",
+      className: "mt-1",
       "data-testid": "action-dropdown-seperator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsx(Button, {
       label: label,
       "data-testid": "action-value-input-button",
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: handleOnClick
     })]
@@ -1691,7 +1671,7 @@ var InlineInput = /*#__PURE__*/forwardRef(function (props, ref) {
         }), /*#__PURE__*/jsx(Button, {
           ref: ref,
           "data-testid": "inline-input-cancel-button",
-          icon: Close,
+          icon: X,
           tooltipProps: LIST_FIELD_TOOLTIP_PROPS.cancel,
           variant: "ghost",
           onClick: handleCancel
@@ -1725,17 +1705,16 @@ var Target$d = function Target(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "list-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsx(Button, {
       "data-testid": "list-action-button",
       label: t("neetoRules.form.list"),
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: handleOnClick
     })]
@@ -1768,16 +1747,16 @@ var ListField = function ListField(_ref2) {
         return /*#__PURE__*/jsxs(Fragment, {
           children: [values.map(function (item, index) {
             return /*#__PURE__*/jsxs("div", {
-              className: "neeto-ui-bg-white flex flex-wrap justify-between border border-dashed px-2 py-1",
+              className: "bg-background flex flex-wrap justify-between border border-dashed px-2 py-1",
               children: [/*#__PURE__*/jsx(Typography, {
                 className: "w-4/5 overflow-x-auto",
                 "data-testid": "list-action-item-label",
-                variant: "body2",
+                variant: "body1",
                 children: item
               }), /*#__PURE__*/jsx(Button, {
                 className: "shrink-0",
                 "data-testid": "list-action-delete-item-button",
-                icon: Delete,
+                icon: Trash2,
                 size: "default",
                 variant: "ghost",
                 onClick: function onClick() {
@@ -1790,9 +1769,9 @@ var ListField = function ListField(_ref2) {
             className: "w-full",
             children: function children(message) {
               return /*#__PURE__*/jsx(Typography, {
-                className: "neeto-ui-text-error-500 neeto-ui-text-gray-700",
+                className: "text-destructive",
                 "data-testid": "list-action-error-message",
-                variant: "h5",
+                variant: "body1",
                 children: message
               });
             }
@@ -1851,18 +1830,17 @@ var Target$c = function Target(_ref) {
   var defaultLabel = (selectedField === null || selectedField === void 0 || (_selectedField$placeh = selectedField.placeholder) === null || _selectedField$placeh === void 0 ? void 0 : _selectedField$placeh.toLowerCase()) || t("neetoRules.form.selectValues");
   return /*#__PURE__*/jsxs(Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "multi-select-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), isNotEmpty(selectedOptions) ? /*#__PURE__*/jsx("span", {
       className: "flex flex-wrap items-center gap-x-2 gap-y-1",
       children: selectedOptions.map(function (option, idx) {
+        var _option$label;
         return /*#__PURE__*/jsxs("span", {
           className: "flex flex-wrap items-center gap-x-2 gap-y-1",
           children: [!!idx && /*#__PURE__*/jsx(Typography, {
-            className: "neeto-ui-text-gray-700",
-            variant: "h5",
+            variant: "body1",
             onClick: function onClick(e) {
               return e.stopPropagation();
             },
@@ -1871,11 +1849,11 @@ var Target$c = function Target(_ref) {
             })
           }), /*#__PURE__*/jsx(Button, {
             "data-testid": "multi-select-action-button",
-            label: option === null || option === void 0 ? void 0 : option.label.toLowerCase(),
+            label: option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase(),
             variant: "link",
-            className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-              "neeto-ui-text-accent-800": isFieldActive,
-              "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+            className: classNames("text-base text-foreground font-semibold underline", {
+              "text-primary": isFieldActive,
+              "text-destructive": isFieldInvalid && !isFieldActive
             }),
             onClick: function onClick() {
               _onClick();
@@ -1887,9 +1865,9 @@ var Target$c = function Target(_ref) {
     }) : /*#__PURE__*/jsx(Button, {
       label: defaultLabel,
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: function onClick() {
         _onClick();
@@ -1959,18 +1937,17 @@ var Target$b = function Target(_ref) {
   var defaultLabel = (selectedField === null || selectedField === void 0 || (_selectedField$placeh = selectedField.placeholder) === null || _selectedField$placeh === void 0 ? void 0 : _selectedField$placeh.toLowerCase()) || t("neetoRules.form.selectValues");
   return /*#__PURE__*/jsxs(Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "multi-select-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), isNotEmpty(selectedOptions) ? /*#__PURE__*/jsx("span", {
       className: "flex flex-wrap items-center gap-x-2 gap-y-1",
       children: selectedOptions.map(function (option, idx) {
+        var _option$label;
         return /*#__PURE__*/jsxs("span", {
           className: "flex flex-wrap items-center gap-x-2 gap-y-1",
           children: [!!idx && /*#__PURE__*/jsx(Typography, {
-            className: "neeto-ui-text-gray-700",
-            variant: "h5",
+            variant: "body1",
             onClick: function onClick(e) {
               return e.stopPropagation();
             },
@@ -1979,11 +1956,11 @@ var Target$b = function Target(_ref) {
             })
           }), /*#__PURE__*/jsx(Button, {
             "data-testid": "multi-select-action-button",
-            label: option === null || option === void 0 ? void 0 : option.label.toLowerCase(),
+            label: option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase(),
             variant: "link",
-            className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-              "neeto-ui-text-accent-800": isFieldActive,
-              "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+            className: classNames("text-base text-foreground font-semibold underline", {
+              "text-primary": isFieldActive,
+              "text-destructive": isFieldInvalid && !isFieldActive
             }),
             onClick: function onClick() {
               _onClick();
@@ -1995,9 +1972,9 @@ var Target$b = function Target(_ref) {
     }) : /*#__PURE__*/jsx(Button, {
       label: defaultLabel,
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: function onClick() {
         _onClick();
@@ -2087,17 +2064,16 @@ var Target$a = function Target(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "note-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsx(Button, {
       "data-testid": "note-action-button",
       label: defaultLabel.toLowerCase(),
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: handleOnClick
     })]
@@ -2164,17 +2140,17 @@ var Target$9 = function Target(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700 font-normal",
       "data-testid": "action-radio-seperator-text",
-      variant: "h5",
+      variant: "body1",
+      weight: "normal",
       children: separator
     }), /*#__PURE__*/jsx(Button, {
       "data-testid": "action-radio-button",
       label: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase(),
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: handleOnClick
     })]
@@ -2281,22 +2257,23 @@ var formatErrorMessage = function formatErrorMessage(error) {
 };
 
 var _excluded$b = ["children"];
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys$m(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$m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var STYLES = {
   border: {
-    "default": "1px solid rgb(var(--neeto-ui-gray-400))",
-    error: "1px solid rgb(var(--neeto-ui-error-800)) !important"
+    "default": "1px solid var(--border)",
+    error: "1px solid var(--destructive) !important"
   },
   color: {
-    "default": "rgb(var(--neeto-ui-gray-800))",
-    error: "rgb(var(--neeto-ui-error-800)) !important"
+    "default": "var(--foreground)",
+    error: "var(--destructive) !important"
   }
 };
 var MultiValueRemove = function MultiValueRemove(props) {
   return /*#__PURE__*/jsx(components.MultiValueRemove, _objectSpread$m(_objectSpread$m({}, props), {}, {
     innerProps: _objectSpread$m(_objectSpread$m({}, props.innerProps), {}, _defineProperty({}, "data-testid", "".concat(dasherize(props.data.label), "-remove-icon"))),
-    children: /*#__PURE__*/jsx(Close, {
+    children: /*#__PURE__*/jsx(X, {
       size: 16
     })
   }));
@@ -2313,7 +2290,7 @@ var ValueContainer = function ValueContainer(_ref) {
   var value = getValue();
   var _children = _toArray(children),
     firstChild = _children[0],
-    rest = _children.slice(1);
+    rest = _arrayLikeToArray(_children).slice(1);
   var shouldCollapse = !isFocused && value.length > visiblePhoneNumbersCount;
   return /*#__PURE__*/jsxs(components.ValueContainer, _objectSpread$m(_objectSpread$m({}, props), {}, {
     innerProps: _objectSpread$m(_objectSpread$m({}, props.innerProps), {}, _defineProperty({}, "data-testid", "multi-phone-number-input-container")),
@@ -2328,7 +2305,7 @@ var ValueContainer = function ValueContainer(_ref) {
 var ClearIndicator = function ClearIndicator(props) {
   return /*#__PURE__*/jsx(components.ClearIndicator, _objectSpread$m(_objectSpread$m({}, props), {}, {
     innerProps: _objectSpread$m(_objectSpread$m({}, props.innerProps), {}, _defineProperty({}, "data-testid", "clear-all-button")),
-    children: /*#__PURE__*/jsx(Close, {
+    children: /*#__PURE__*/jsx(X, {
       className: "cursor-pointer",
       size: 16
     })
@@ -2453,15 +2430,15 @@ var MultiPhoneNumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       ref: ref,
       value: value
     }, otherProps))), !!error && /*#__PURE__*/jsxs("p", {
-      className: "neeto-ui-input__error",
+      className: "text-destructive text-xs",
       "data-testid": "".concat(dasherize(label), "-input-error"),
       children: [formatErrorMessage(error), isFilterPhoneNumbersLinkVisible && /*#__PURE__*/jsxs("span", {
-        className: "neeto-ui-font-semibold cursor-pointer",
+        className: "font-semibold cursor-pointer",
         onClick: handleFilterPhoneNumbers,
         children: [ERROR_MESSAGE_DELIMITER, t("neetoRules.messages.removeInvalidPhoneNumbers")]
       })]
     }), /*#__PURE__*/jsx("p", {
-      className: "neeto-ui-input__help-text",
+      className: "text-muted-foreground text-xs",
       "data-testid": "".concat(dasherize(label), "-input-help"),
       children: t("neetoRules.helpTexts.phoneNumber")
     })]
@@ -2536,17 +2513,16 @@ var Target$8 = function Target(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "sms-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsx(Button, {
       "data-testid": "sms-action-button",
       label: defaultLabel.toLowerCase(),
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: handleOnClick
     })]
@@ -2577,11 +2553,11 @@ var SmsFields = function SmsFields(_ref2) {
     }),
     initialFocusRef = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         isSaveAsTemplateEnabled: store["isSaveAsTemplateEnabled"]
       };
-    }, shallow),
+    })),
     isSaveAsTemplateEnabled = _useUtilityStore.isSaveAsTemplateEnabled;
   var hasFieldChanged = useHasFieldChanged(name);
   var _useFormikContext = useFormikContext(),
@@ -3019,17 +2995,18 @@ var ActionSubItem$1 = function ActionSubItem(_ref) {
 var ActionSubItem = /*#__PURE__*/memo(ActionSubItem$1);
 
 var ActionSubItemPanel = function ActionSubItemPanel() {
+  var _selectedField$label;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore(useShallow(function (store) {
       var _store$panelState, _store$panelState2, _store$panelState3, _store$panelState4, _store$panelState5, _store$panelState6, _store$panelState7;
       return {
         name: (_store$panelState = store["panelState"]) === null || _store$panelState === void 0 || (_store$panelState = _store$panelState["data"]) === null || _store$panelState === void 0 ? void 0 : _store$panelState["name"],
@@ -3040,7 +3017,7 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
         errorMessage: (_store$panelState6 = store["panelState"]) === null || _store$panelState6 === void 0 || (_store$panelState6 = _store$panelState6["data"]) === null || _store$panelState6 === void 0 ? void 0 : _store$panelState6["errorMessage"],
         handleSlackChannelRefresh: (_store$panelState7 = store["panelState"]) === null || _store$panelState7 === void 0 || (_store$panelState7 = _store$panelState7["data"]) === null || _store$panelState7 === void 0 ? void 0 : _store$panelState7["handleSlackChannelRefresh"]
       };
-    }, shallow),
+    })),
     name = _useUtilityStore2.name,
     index = _useUtilityStore2.index,
     action = _useUtilityStore2.action,
@@ -3058,7 +3035,7 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
   var andText = t("neetoRules.common.and", {
     what: thenText
   });
-  var selectedFieldLabel = selectedField === null || selectedField === void 0 ? void 0 : selectedField.label.toLowerCase();
+  var selectedFieldLabel = selectedField === null || selectedField === void 0 || (_selectedField$label = selectedField.label) === null || _selectedField$label === void 0 ? void 0 : _selectedField$label.toLowerCase();
   var header = index ? "".concat(andText, " ").concat(selectedFieldLabel, "...") : "".concat(thenText, " ").concat(selectedFieldLabel, "...");
   var ActionChildren = action.children;
   var handleContinue = function handleContinue() {
@@ -3076,7 +3053,7 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
           children: [/*#__PURE__*/jsx(Button, {
             className: "shrink-0 rtl:rotate-180",
             "data-testid": "back-button",
-            icon: Left,
+            icon: ChevronLeft,
             size: "default",
             variant: "ghost",
             tooltipProps: {
@@ -3094,12 +3071,12 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
             }
           }), /*#__PURE__*/jsx(Typography, {
             "data-testid": "action-sub-item-title",
-            variant: "h3",
+            variant: "h5",
             children: header
           })]
         }), /*#__PURE__*/jsx(Typography, {
           "data-testid": "action-sub-item-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addActionSubItemDescription")
         })]
       })
@@ -3165,9 +3142,9 @@ var Target$7 = function Target(_ref) {
     label: label,
     "data-testid": "condition-value-select-date-button",
     variant: "link",
-    className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-      "neeto-ui-text-accent-800": isFieldActive,
-      "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+    className: classNames("text-base text-foreground font-semibold underline", {
+      "text-primary": isFieldActive,
+      "text-destructive": isFieldInvalid && !isFieldActive
     }),
     onClick: function onClick() {
       _onClick();
@@ -3261,9 +3238,9 @@ var Target$6 = function Target(_ref) {
     label: label,
     "data-testid": "condition-value-input-button",
     variant: "link",
-    className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-      "neeto-ui-text-accent-800": isFieldActive,
-      "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+    className: classNames("text-base text-foreground font-semibold underline", {
+      "text-primary": isFieldActive,
+      "text-destructive": isFieldInvalid && !isFieldActive
     }),
     onClick: function onClick() {
       _onClick();
@@ -3332,16 +3309,15 @@ var Target$5 = function Target(_ref) {
       var _option$label;
       return /*#__PURE__*/jsxs(Fragment$1, {
         children: [!!idx && /*#__PURE__*/jsx(Typography, {
-          className: "neeto-ui-text-gray-700",
-          variant: "h5",
+          variant: "body1",
           children: t("neetoRules.common.or")
         }), /*#__PURE__*/jsx(Button, {
           "data-testid": "condition-value-multi-select-field",
           label: option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase(),
           variant: "link",
-          className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-            "neeto-ui-text-accent-800": isFieldActive,
-            "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+          className: classNames("text-base text-foreground font-semibold underline", {
+            "text-primary": isFieldActive,
+            "text-destructive": isFieldInvalid && !isFieldActive
           }),
           onClick: function onClick() {
             _onClick();
@@ -3354,9 +3330,9 @@ var Target$5 = function Target(_ref) {
     "data-testid": "condition-value-multi-select-field",
     label: defaultLabel,
     variant: "link",
-    className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-      "neeto-ui-text-accent-800": isFieldActive,
-      "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+    className: classNames("text-base text-foreground font-semibold underline", {
+      "text-primary": isFieldActive,
+      "text-destructive": isFieldInvalid && !isFieldActive
     }),
     onClick: function onClick() {
       _onClick === null || _onClick === void 0 || _onClick();
@@ -3423,16 +3399,15 @@ var Target$4 = function Target(_ref) {
       var _option$label;
       return /*#__PURE__*/jsxs(Fragment$1, {
         children: [!!idx && /*#__PURE__*/jsx(Typography, {
-          className: "neeto-ui-text-gray-700",
-          variant: "h5",
+          variant: "body1",
           children: t("neetoRules.common.or")
         }), /*#__PURE__*/jsx(Button, {
           "data-testid": "condition-value-multi-select-field",
           label: option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase(),
           variant: "link",
-          className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-            "neeto-ui-text-accent-800": isFieldActive,
-            "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+          className: classNames("text-base text-foreground font-semibold underline", {
+            "text-primary": isFieldActive,
+            "text-destructive": isFieldInvalid && !isFieldActive
           }),
           onClick: function onClick() {
             _onClick();
@@ -3445,9 +3420,9 @@ var Target$4 = function Target(_ref) {
     "data-testid": "condition-value-multi-select-field",
     label: defaultLabel,
     variant: "link",
-    className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-      "neeto-ui-text-accent-800": isFieldActive,
-      "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+    className: classNames("text-base text-foreground font-semibold underline", {
+      "text-primary": isFieldActive,
+      "text-destructive": isFieldInvalid && !isFieldActive
     }),
     onClick: function onClick() {
       _onClick === null || _onClick === void 0 || _onClick();
@@ -3577,16 +3552,15 @@ var Target$3 = function Target(_ref) {
       var _option$label;
       return /*#__PURE__*/jsxs(Fragment$1, {
         children: [!!idx && /*#__PURE__*/jsx(Typography, {
-          className: "neeto-ui-text-gray-700",
-          variant: "h5",
+          variant: "body1",
           children: t("neetoRules.common.or")
         }), /*#__PURE__*/jsx(Button, {
           "data-testid": "condition-value-multi-select-field",
           label: option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase(),
           variant: "link",
-          className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-            "neeto-ui-text-accent-800": isFieldActive,
-            "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+          className: classNames("text-base text-foreground font-semibold underline", {
+            "text-primary": isFieldActive,
+            "text-destructive": isFieldInvalid && !isFieldActive
           }),
           onClick: function onClick() {
             _onClick();
@@ -3599,9 +3573,9 @@ var Target$3 = function Target(_ref) {
     "data-testid": "condition-value-multi-select-field",
     label: defaultLabel,
     variant: "link",
-    className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-      "neeto-ui-text-accent-800": isFieldActive,
-      "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+    className: classNames("text-base text-foreground font-semibold underline", {
+      "text-primary": isFieldActive,
+      "text-destructive": isFieldInvalid && !isFieldActive
     }),
     onClick: function onClick() {
       _onClick === null || _onClick === void 0 || _onClick();
@@ -3673,9 +3647,9 @@ var Target$2 = function Target(_ref) {
     "data-testid": "condition-value-dropdown-button",
     label: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase(),
     variant: "link",
-    className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-      "neeto-ui-text-accent-800": isFieldActive,
-      "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+    className: classNames("text-base text-foreground font-semibold underline", {
+      "text-primary": isFieldActive,
+      "text-destructive": isFieldInvalid && !isFieldActive
     }),
     onClick: function onClick() {
       _onClick();
@@ -3799,9 +3773,9 @@ var Target$1 = function Target(_ref) {
     "data-testid": dataTestid,
     label: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase(),
     variant: "link",
-    className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-      "neeto-ui-text-accent-800": isFieldActive,
-      "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+    className: classNames("text-base text-foreground font-semibold underline", {
+      "text-primary": isFieldActive,
+      "text-destructive": isFieldInvalid && !isFieldActive
     }),
     onClick: function onClick() {
       _onClick();
@@ -3876,9 +3850,9 @@ var Target = function Target(_ref) {
     label: label,
     "data-testid": "condition-value-select-time-button",
     variant: "link",
-    className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-      "neeto-ui-text-accent-800": isFieldActive,
-      "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+    className: classNames("text-base text-foreground font-semibold underline", {
+      "text-primary": isFieldActive,
+      "text-destructive": isFieldInvalid && !isFieldActive
     }),
     onClick: function onClick() {
       _onClick();
@@ -3949,13 +3923,13 @@ var FieldPanel = function FieldPanel() {
   var _findBy;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"]
       };
-    }, shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState;
-  var _useUtilityStore2 = useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore(useShallow(function (store) {
       var _store$panelState, _store$panelState2, _store$panelState3, _store$panelState4, _store$panelState5;
       return {
         index: (_store$panelState = store["panelState"]) === null || _store$panelState === void 0 || (_store$panelState = _store$panelState["data"]) === null || _store$panelState === void 0 ? void 0 : _store$panelState["index"],
@@ -3964,7 +3938,7 @@ var FieldPanel = function FieldPanel() {
         conditionOptions: (_store$panelState4 = store["panelState"]) === null || _store$panelState4 === void 0 || (_store$panelState4 = _store$panelState4["data"]) === null || _store$panelState4 === void 0 ? void 0 : _store$panelState4["conditionOptions"],
         isWithEvents: (_store$panelState5 = store["panelState"]) === null || _store$panelState5 === void 0 || (_store$panelState5 = _store$panelState5["data"]) === null || _store$panelState5 === void 0 ? void 0 : _store$panelState5["isWithEvents"]
       };
-    }, shallow),
+    })),
     index = _useUtilityStore2.index,
     name = _useUtilityStore2.name,
     handleFieldChange = _useUtilityStore2.handleFieldChange,
@@ -3996,11 +3970,11 @@ var FieldPanel = function FieldPanel() {
         className: "flex flex-col space-y-2",
         children: [/*#__PURE__*/jsxs(Typography, {
           "data-testid": "condition-title",
-          variant: "h3",
+          variant: "h5",
           children: [index ? logicalOperatorLabel : conditionLabel, "..."]
         }), /*#__PURE__*/jsx(Typography, {
           "data-testid": "condition-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addConditionDescription")
         })]
       })
@@ -4152,15 +4126,15 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
   var _findBy, _findBy2;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore(useShallow(function (store) {
       var _store$panelState, _store$panelState2, _store$panelState3, _store$panelState4, _store$panelState5, _store$panelState6, _store$panelState7, _store$panelState8, _store$panelState9;
       return {
         index: (_store$panelState = store["panelState"]) === null || _store$panelState === void 0 || (_store$panelState = _store$panelState["data"]) === null || _store$panelState === void 0 ? void 0 : _store$panelState["index"],
@@ -4173,7 +4147,7 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
         verbOptions: (_store$panelState8 = store["panelState"]) === null || _store$panelState8 === void 0 || (_store$panelState8 = _store$panelState8["data"]) === null || _store$panelState8 === void 0 ? void 0 : _store$panelState8["verbOptions"],
         isWithEvents: (_store$panelState9 = store["panelState"]) === null || _store$panelState9 === void 0 || (_store$panelState9 = _store$panelState9["data"]) === null || _store$panelState9 === void 0 ? void 0 : _store$panelState9["isWithEvents"]
       };
-    }, shallow),
+    })),
     index = _useUtilityStore2.index,
     name = _useUtilityStore2.name,
     selectedField = _useUtilityStore2.selectedField,
@@ -4202,7 +4176,7 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
     setVerbTouched = _useField8[2].setTouched;
   var fieldLabel = (_findBy = findBy({
     value: field.value
-  }, conditionOptions)) === null || _findBy === void 0 ? void 0 : _findBy.label.toLowerCase();
+  }, conditionOptions)) === null || _findBy === void 0 || (_findBy = _findBy.label) === null || _findBy === void 0 ? void 0 : _findBy.toLowerCase();
   var conditionLabel = isWithEvents ? t("neetoRules.common.when") : t("neetoRules.common.if");
   var logicalOperatorLabel = (_findBy2 = findBy({
     value: logicalOperator.value
@@ -4222,7 +4196,7 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
           className: "flex items-center space-x-2",
           children: [/*#__PURE__*/jsx(Button, {
             className: "shrink-0 rtl:rotate-180",
-            icon: Left,
+            icon: ChevronLeft,
             size: "default",
             variant: "ghost",
             tooltipProps: {
@@ -4239,12 +4213,12 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
             }
           }), /*#__PURE__*/jsxs(Typography, {
             "data-testid": "condition-verb-and-value-title",
-            variant: "h3",
+            variant: "h5",
             children: [index ? logicalOperatorLabel : conditionLabel, " ", fieldLabel, "..."]
           })]
         }), /*#__PURE__*/jsx(Typography, {
           "data-testid": "condition-verb-and-value-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addConditionVerbAndValueDescription")
         })]
       })
@@ -4290,18 +4264,18 @@ function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t
 var DelayPanel = function DelayPanel() {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow),
+    })),
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore(useShallow(function (store) {
       var _store$panelState;
       return {
         name: (_store$panelState = store["panelState"]) === null || _store$panelState === void 0 || (_store$panelState = _store$panelState["data"]) === null || _store$panelState === void 0 ? void 0 : _store$panelState["name"]
       };
-    }, shallow),
+    })),
     name = _useUtilityStore2.name;
   var _useFormikContext = useFormikContext(),
     setFieldTouched = _useFormikContext.setFieldTouched;
@@ -4327,10 +4301,10 @@ var DelayPanel = function DelayPanel() {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex flex-col space-y-2",
         children: [/*#__PURE__*/jsx(Typography, {
-          variant: "h3",
+          variant: "h5",
           children: t("neetoRules.common.addDelay")
         }), /*#__PURE__*/jsx(Typography, {
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.helpText.addDelay")
         })]
       })
@@ -4384,6 +4358,8 @@ var getSearchedOptions = function getSearchedOptions(dropdownOptions, searchTerm
   });
 };
 
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = false, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = true, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), true), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function ownKeys$f(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$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EventsPanel = function EventsPanel() {
@@ -4393,15 +4369,15 @@ var EventsPanel = function EventsPanel() {
     _useState2 = _slicedToArray(_useState, 2),
     searchTerm = _useState2[0],
     setSearchTerm = _useState2[1];
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore(useShallow(function (store) {
       var _store$panelState, _store$panelState2, _store$panelState3, _store$panelState4, _store$panelState5, _store$panelState6, _store$panelState7;
       return {
         name: (_store$panelState = store["panelState"]) === null || _store$panelState === void 0 || (_store$panelState = _store$panelState["data"]) === null || _store$panelState === void 0 ? void 0 : _store$panelState["name"],
@@ -4412,7 +4388,7 @@ var EventsPanel = function EventsPanel() {
         singleSelect: (_store$panelState6 = store["panelState"]) === null || _store$panelState6 === void 0 || (_store$panelState6 = _store$panelState6["data"]) === null || _store$panelState6 === void 0 ? void 0 : _store$panelState6["singleSelect"],
         hidePerformer: (_store$panelState7 = store["panelState"]) === null || _store$panelState7 === void 0 || (_store$panelState7 = _store$panelState7["data"]) === null || _store$panelState7 === void 0 ? void 0 : _store$panelState7["hidePerformer"]
       };
-    }, shallow),
+    })),
     name = _useUtilityStore2.name,
     data = _useUtilityStore2.data,
     performerName = _useUtilityStore2.performerName,
@@ -4443,11 +4419,11 @@ var EventsPanel = function EventsPanel() {
   var searchedOptions = getSearchedOptions(dropdownOptions, searchTerm);
   var isSearchable = dropdownOptions.length > MAXIMUM_OPTION_LENGTH;
   var handleDefaultData = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var _values$name;
       var deletedEvents;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
           case 0:
             deletedEvents = ((_values$name = values[name]) === null || _values$name === void 0 ? void 0 : _values$name.deleted) || [];
             events.forEach(function (event) {
@@ -4459,23 +4435,22 @@ var EventsPanel = function EventsPanel() {
             });
             setFieldValue("".concat(name, ".deleted"), deletedEvents);
             if (!isMenuDisabled) {
-              _context.next = 7;
+              _context.n = 1;
               break;
             }
             setFieldValue("".concat(name, ".value"), []);
-            _context.next = 11;
+            _context.n = 3;
             break;
-          case 7:
-            _context.next = 9;
+          case 1:
+            _context.n = 2;
             return setFieldValue("".concat(name, ".value"), [{
               name: defaultData.name
             }]);
-          case 9:
-            _context.next = 11;
+          case 2:
+            _context.n = 3;
             return setFieldValue("".concat(performerName, ".value"), defaultData === null || defaultData === void 0 ? void 0 : defaultData.performer);
-          case 11:
-          case "end":
-            return _context.stop();
+          case 3:
+            return _context.a(2);
         }
       }, _callee);
     }));
@@ -4581,11 +4556,11 @@ var EventsPanel = function EventsPanel() {
         className: "flex flex-col space-y-2",
         children: [/*#__PURE__*/jsxs(Typography, {
           "data-testid": "event-title",
-          variant: "h3",
+          variant: "h5",
           children: [t("neetoRules.common.when"), "..."]
         }), /*#__PURE__*/jsx(Typography, {
           "data-testid": "event-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addEventDescription")
         })]
       })
@@ -4642,7 +4617,7 @@ var EventsPanel = function EventsPanel() {
           "data-testid": "no-options-menu-item",
           children: t("neetoRules.common.noOptions")
         }), error && touched && /*#__PURE__*/jsx("div", {
-          className: "neeto-ui-input__error",
+          className: "text-destructive text-xs",
           "data-testid": "event-field-input-error",
           children: error
         })]
@@ -4660,22 +4635,22 @@ var EventsPanel = function EventsPanel() {
 var PerformerPanel = function PerformerPanel() {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore(useShallow(function (store) {
       var _store$panelState, _store$panelState2, _store$panelState3;
       return {
         data: (_store$panelState = store["panelState"]) === null || _store$panelState === void 0 || (_store$panelState = _store$panelState["data"]) === null || _store$panelState === void 0 ? void 0 : _store$panelState["data"],
         performerName: (_store$panelState2 = store["panelState"]) === null || _store$panelState2 === void 0 || (_store$panelState2 = _store$panelState2["data"]) === null || _store$panelState2 === void 0 ? void 0 : _store$panelState2["performerName"],
         isMenuDisabled: (_store$panelState3 = store["panelState"]) === null || _store$panelState3 === void 0 || (_store$panelState3 = _store$panelState3["data"]) === null || _store$panelState3 === void 0 ? void 0 : _store$panelState3["isMenuDisabled"]
       };
-    }, shallow),
+    })),
     data = _useUtilityStore2.data,
     performerName = _useUtilityStore2.performerName,
     isMenuDisabled = _useUtilityStore2.isMenuDisabled;
@@ -4722,7 +4697,7 @@ var PerformerPanel = function PerformerPanel() {
           children: [/*#__PURE__*/jsx(Button, {
             className: "shrink-0 rtl:rotate-180",
             "data-testid": "back-button",
-            icon: Left,
+            icon: ChevronLeft,
             size: "default",
             variant: "ghost",
             tooltipProps: {
@@ -4739,12 +4714,12 @@ var PerformerPanel = function PerformerPanel() {
             }
           }), /*#__PURE__*/jsxs(Typography, {
             "data-testid": "performer-title",
-            variant: "h3",
+            variant: "h5",
             children: [t("neetoRules.form.actionTriggeredBy"), "..."]
           })]
         }), /*#__PURE__*/jsx(Typography, {
           "data-testid": "performer-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addPerformerDescription")
         })]
       })
@@ -5193,20 +5168,20 @@ var ActionItem$1 = function ActionItem(_ref) {
   var _useActiveField = useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         setErrorFields: store["setErrorFields"]
       };
-    }, shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     setErrorFields = _useUtilityStore.setErrorFields;
-  var _useUtilityStore2 = useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore(useShallow(function (store) {
       var _store$panelState;
       return {
         index: (_store$panelState = store["panelState"]) === null || _store$panelState === void 0 || (_store$panelState = _store$panelState["data"]) === null || _store$panelState === void 0 ? void 0 : _store$panelState["index"]
       };
-    }, shallow),
+    })),
     panelIndex = _useUtilityStore2.index;
   var ActionChildren = action.children;
   var defaultLabel = t("neetoRules.form.doThis");
@@ -5312,16 +5287,15 @@ var ActionItem$1 = function ActionItem(_ref) {
     children: /*#__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",
-        variant: "h5",
+        variant: "body1",
         children: label
       }), /*#__PURE__*/jsx(Button, {
         "data-testid": "action-dropdown-button",
         label: selectedLabel.toLowerCase(),
         variant: "link",
-        className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-          "neeto-ui-text-accent-800": isFieldActive,
-          "neeto-ui-text-error-500": isActionSelected || !!errorMessage && isIntegrableError !== false
+        className: classNames("text-base text-foreground font-semibold underline", {
+          "text-primary": isFieldActive,
+          "text-destructive": isActionSelected || !!errorMessage && isIntegrableError !== false
         }),
         onClick: handleOnClick
       }), /*#__PURE__*/jsx(ActionSubItem, _objectSpread$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, panelData), {}, {
@@ -5351,12 +5325,12 @@ var Card = function Card(_ref) {
     children = _ref.children;
   return /*#__PURE__*/jsxs("div", {
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-600",
+      color: "muted",
       "data-testid": "".concat(joinHyphenCase(title), "-card-title"),
       variant: "h4",
       children: title
     }), /*#__PURE__*/jsx("div", {
-      className: "neeto-ui-bg-gray-100 neeto-ui-rounded-sm my-3 p-4 neeto-rules-main-card",
+      className: "bg-muted rounded-sm my-2 p-4 neeto-rules-main-card",
       children: children
     })]
   });
@@ -5389,12 +5363,12 @@ var Actions = function Actions(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     shouldOpenPanel = _useState2[0],
     setShouldOpenPanel = _useState2[1];
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         resetPanelState: store["resetPanelState"],
         setIsSaveAsTemplateEnabled: store["setIsSaveAsTemplateEnabled"]
       };
-    }, shallow),
+    })),
     resetPanelState = _useUtilityStore.resetPanelState,
     setIsSaveAsTemplateEnabled = _useUtilityStore.setIsSaveAsTemplateEnabled;
   var elementProps = data[name] || {};
@@ -5453,7 +5427,7 @@ var Actions = function Actions(_ref) {
                   }
                 }), actions.length > 1 && /*#__PURE__*/jsx(Button, {
                   "data-testid": "delete-action-button-".concat(index),
-                  icon: Delete,
+                  icon: Trash2,
                   size: "default",
                   variant: "ghost",
                   tooltipProps: {
@@ -5492,11 +5466,11 @@ var LogicalOperator = function LogicalOperator(_ref) {
   return /*#__PURE__*/jsx(DropdownMenu, {
     customTarget: /*#__PURE__*/jsx(Button, {
       "data-testid": "logic-operator-button",
-      icon: Down,
+      icon: ChevronDown,
       label: logicOperationLabel,
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold gap-1 underline", {
-        "neeto-ui-text-accent-800": isFieldActive
+      className: classNames("text-base text-foreground font-semibold gap-1 underline", {
+        "text-primary": isFieldActive
       }),
       onClick: setFieldActive
     }),
@@ -5531,18 +5505,18 @@ var ConditionItem = function ConditionItem(_ref) {
   var _useFormikContext = useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue,
     setFieldTouched = _useFormikContext.setFieldTouched;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"]
       };
-    }, shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState;
-  var _useUtilityStore2 = useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore(useShallow(function (store) {
       var _store$panelState;
       return {
         index: (_store$panelState = store["panelState"]) === null || _store$panelState === void 0 || (_store$panelState = _store$panelState["data"]) === null || _store$panelState === void 0 ? void 0 : _store$panelState["index"]
       };
-    }, shallow),
+    })),
     panelIndex = _useUtilityStore2.index;
   var conditionOptions = elementProps.conditionOptions;
   var selectedField = getFieldDetails(condition.field, conditionOptions);
@@ -5619,14 +5593,12 @@ var ConditionItem = function ConditionItem(_ref) {
       isWithEvents: isWithEvents,
       name: "".concat(name, ".joinType")
     }), isWithEvents && !index && /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
-      variant: "h5",
+      variant: "body1",
       children: t("neetoRules.common.and", {
         what: ""
       })
     }), !index && /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
-      variant: "h5",
+      variant: "body1",
       children: defaultLabel
     }), /*#__PURE__*/jsx(RadioField$1.Target, {
       name: "".concat(name, ".field"),
@@ -5685,11 +5657,11 @@ var Conditions = function Conditions(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     shouldOpenPanel = _useState2[0],
     setShouldOpenPanel = _useState2[1];
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow),
+    })),
     resetPanelState = _useUtilityStore.resetPanelState;
   var elementProps = data[name] || {};
   var conditions = ((_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.value) || [];
@@ -5761,7 +5733,7 @@ var Conditions = function Conditions(_ref) {
                 }
               }), (allowEmpty || index !== 0) && /*#__PURE__*/jsx(Button, {
                 "data-testid": "delete-condition-button-".concat(index),
-                icon: Delete,
+                icon: Trash2,
                 size: "default",
                 variant: "ghost",
                 tooltipProps: {
@@ -5775,7 +5747,7 @@ var Conditions = function Conditions(_ref) {
             })]
           }, index);
         }), isEmpty(conditions) && /*#__PURE__*/jsx(Button, {
-          className: "neeto-ui-text-gray-600 me-auto",
+          className: "text-muted-foreground me-auto",
           "data-testid": "add-condition-button",
           label: t("neetoRules.form.addCondition"),
           variant: "ghost",
@@ -5805,12 +5777,12 @@ var AddDelay = function AddDelay(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var addDelayButtonRef = useRef(null);
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
   var _ref2 = data[name] || {},
@@ -5850,6 +5822,7 @@ var AddDelay = function AddDelay(_ref) {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [showAddDelayButton && /*#__PURE__*/jsx(Button, {
       icon: Plus,
+      iconPosition: "left",
       label: t("neetoRules.common.addDelay"),
       ref: addDelayButtonRef,
       size: "default",
@@ -5862,14 +5835,14 @@ var AddDelay = function AddDelay(_ref) {
         children: [/*#__PURE__*/jsxs("div", {
           className: "flex items-center gap-2 flex-wrap min-w-0 grow",
           children: [/*#__PURE__*/jsx(Typography, {
-            variant: "body2",
+            variant: "body1",
             children: t("neetoRules.form.delayExecutionBy")
           }), /*#__PURE__*/jsx(Button, {
             label: delayLabel,
             variant: "link",
-            className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-              "neeto-ui-text-accent-800": isValueFieldActive,
-              "neeto-ui-text-error-500": isFieldInvalid && !isValueFieldActive
+            className: classNames("text-base text-foreground font-semibold underline", {
+              "text-primary": isValueFieldActive,
+              "text-destructive": isFieldInvalid && !isValueFieldActive
             }),
             onClick: function onClick() {
               openDelayPanel();
@@ -5878,8 +5851,8 @@ var AddDelay = function AddDelay(_ref) {
           }), /*#__PURE__*/jsx(Button, {
             label: value.unit,
             variant: "link",
-            className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-              "neeto-ui-text-accent-800": isUnitFieldActive
+            className: classNames("text-base text-foreground font-semibold underline", {
+              "text-primary": isUnitFieldActive
             }),
             onClick: function onClick() {
               openDelayPanel();
@@ -5889,7 +5862,7 @@ var AddDelay = function AddDelay(_ref) {
         }), /*#__PURE__*/jsx(Button, {
           className: "shrink-0",
           "data-testid": "delete-delay-button",
-          icon: Delete,
+          icon: Trash2,
           size: "default",
           variant: "ghost",
           tooltipProps: {
@@ -5921,11 +5894,11 @@ var Performer = function Performer(_ref) {
   var _useFormikContext = useFormikContext(),
     values = _useFormikContext.values,
     errors = _useFormikContext.errors;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"]
       };
-    }, shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState;
   var elementProps = data[performerName] || {};
   var performer = values[performerName].value;
@@ -5957,16 +5930,15 @@ var Performer = function Performer(_ref) {
   return /*#__PURE__*/jsxs("div", {
     className: "my-auto flex items-center gap-x-2 gap-y-3",
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-700",
-      variant: "h5",
+      variant: "body1",
       children: t("neetoRules.common.by")
     }), /*#__PURE__*/jsx(Button, {
       "data-testid": "event-performer-dropdown",
       label: selectedOption === null || selectedOption === void 0 || (_selectedOption$label = selectedOption.label) === null || _selectedOption$label === void 0 ? void 0 : _selectedOption$label.toLowerCase(),
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isValueSelected
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isValueSelected
       }),
       onClick: handleOnClick
     })]
@@ -5990,11 +5962,11 @@ var Events = function Events(_ref) {
   var _useFormikContext = useFormikContext(),
     values = _useFormikContext.values,
     errors = _useFormikContext.errors;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"]
       };
-    }, shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState;
   var elementProps = data[name] || {};
   var events = values[name].value || [];
@@ -6034,8 +6006,8 @@ var Events = function Events(_ref) {
   return /*#__PURE__*/jsxs("div", {
     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",
-      variant: "h5",
+      className: "my-auto",
+      variant: "body1",
       children: t("neetoRules.common.when")
     }), isNotEmpty(allEvents) ? /*#__PURE__*/jsx("span", {
       className: "flex flex-wrap items-center gap-x-2 gap-y-1",
@@ -6043,16 +6015,15 @@ var Events = function Events(_ref) {
         var _event$label;
         return /*#__PURE__*/jsxs(Fragment$1, {
           children: [!!idx && /*#__PURE__*/jsx(Typography, {
-            className: "neeto-ui-text-gray-700",
-            variant: "h5",
+            variant: "body1",
             children: t("neetoRules.common.or")
           }), /*#__PURE__*/jsx(Button, {
             "data-testid": "condition-value-multi-select-field",
             label: event === null || event === void 0 || (_event$label = event.label) === null || _event$label === void 0 ? void 0 : _event$label.toLowerCase(),
             variant: "link",
-            className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-              "neeto-ui-text-accent-800": isFieldActive,
-              "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+            className: classNames("text-base text-foreground font-semibold underline", {
+              "text-primary": isFieldActive,
+              "text-destructive": isFieldInvalid && !isFieldActive
             }),
             onClick: handleOnClick
           })]
@@ -6062,9 +6033,9 @@ var Events = function Events(_ref) {
       "data-testid": "condition-value-multi-select-field",
       label: defaultLabel,
       variant: "link",
-      className: classNames("neeto-ui-text-gray-800 neeto-ui-font-semibold underline", {
-        "neeto-ui-text-accent-800": isFieldActive,
-        "neeto-ui-text-error-500": isFieldInvalid && !isFieldActive
+      className: classNames("text-base text-foreground font-semibold underline", {
+        "text-primary": isFieldActive,
+        "text-destructive": isFieldInvalid && !isFieldActive
       }),
       onClick: handleOnClick
     }), !hidePerformer && /*#__PURE__*/jsx(Performer, {
@@ -6166,9 +6137,12 @@ var EventConditions = function EventConditions(_ref) {
           openPanel: shouldOpenConditionsPanel
         }, config))
       })]
-    }), enableAddingDelay && /*#__PURE__*/jsx(AddDelay, {
-      data: data,
-      name: "execution_delay"
+    }), enableAddingDelay && /*#__PURE__*/jsx("div", {
+      className: "mt-6",
+      children: /*#__PURE__*/jsx(AddDelay, {
+        data: data,
+        name: "execution_delay"
+      })
     })]
   });
 };
@@ -6420,9 +6394,10 @@ var Status = function Status() {
   return /*#__PURE__*/jsx(Switch$1, {
     checked: defaultValue === ENABLED,
     label: t("neetoRules.labels.active"),
+    size: "lg",
     labelProps: {
       helpIconProps: {
-        icon: Help,
+        icon: CircleHelp,
         tooltipProps: {
           content: status.value === ENABLED ? t("neetoRules.tooltips.rule.active") : t("neetoRules.tooltips.rule.inactive")
         }
@@ -6572,18 +6547,18 @@ var Form = function Form(_ref) {
     t = _useTranslation.t;
   var formikRef = useRef(null);
   var formRef = useRef(null);
-  var _useCustomDataStore = useCustomDataStore(function (store) {
+  var _useCustomDataStore = useCustomDataStore(useShallow(function (store) {
       return {
         customData: store["customData"]
       };
-    }, shallow),
+    })),
     customData = _useCustomDataStore.customData;
-  var _useUtilityStore = useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore(useShallow(function (store) {
       return {
         resetPanelState: store["resetPanelState"],
         errorFields: store["errorFields"]
       };
-    }, shallow),
+    })),
     resetPanelState = _useUtilityStore.resetPanelState,
     errorFields = _useUtilityStore.errorFields;
   var initialValues = useMemo(function () {
@@ -6648,33 +6623,35 @@ var Form = function Form(_ref) {
             children: [/*#__PURE__*/jsxs("div", {
               className: "space-y-6",
               children: [/*#__PURE__*/jsxs("div", {
-                className: "flex items-center gap-x-3",
-                children: [/*#__PURE__*/jsx(InputField, {
-                  data: initialValues,
-                  label: t("neetoRules.common.name"),
-                  name: "name",
-                  placeholder: isNameGenerationDisabled ? "" : t("neetoRules.placeholders.autoGenerateName")
-                }), isGeneratingName && /*#__PURE__*/jsxs(Fragment, {
-                  children: [/*#__PURE__*/jsx(Tooltip, {
-                    content: t("neetoRules.form.aiGeneratedName"),
-                    position: "top",
-                    children: /*#__PURE__*/jsx("span", {
-                      children: /*#__PURE__*/jsx(Spinner, {
-                        size: "sm"
+                children: [/*#__PURE__*/jsxs("div", {
+                  className: "flex items-center gap-x-3",
+                  children: [/*#__PURE__*/jsx(InputField, {
+                    data: initialValues,
+                    label: t("neetoRules.common.name"),
+                    name: "name",
+                    placeholder: isNameGenerationDisabled ? "" : t("neetoRules.placeholders.autoGenerateName")
+                  }), isGeneratingName && /*#__PURE__*/jsxs(Fragment, {
+                    children: [/*#__PURE__*/jsx(Tooltip, {
+                      content: t("neetoRules.form.aiGeneratedName"),
+                      position: "top",
+                      children: /*#__PURE__*/jsx("span", {
+                        children: /*#__PURE__*/jsx(Spinner, {
+                          size: "sm"
+                        })
                       })
-                    })
-                  }), /*#__PURE__*/jsx(Button, {
-                    icon: Close,
-                    size: "sm",
-                    variant: "ghost",
-                    tooltipProps: {
-                      content: t("neetoRules.buttons.cancelNameGeneration"),
-                      position: "top"
-                    },
-                    onClick: handleCancelNameGeneration
+                    }), /*#__PURE__*/jsx(Button, {
+                      icon: X,
+                      size: "sm",
+                      variant: "ghost",
+                      tooltipProps: {
+                        content: t("neetoRules.buttons.cancelNameGeneration"),
+                        position: "top"
+                      },
+                      onClick: handleCancelNameGeneration
+                    })]
                   })]
-                })]
-              }), showStatusSwitch && /*#__PURE__*/jsx(Status, {}), typeof _children === "function" ? _children === null || _children === void 0 ? void 0 : _children(_objectSpread$1({
+                }), showStatusSwitch && /*#__PURE__*/jsx(Status, {})]
+              }), typeof _children === "function" ? _children === null || _children === void 0 ? void 0 : _children(_objectSpread$1({
                 values: values,
                 formattedValues: buildPayload(data, values),
                 dirty: dirty
@@ -6682,7 +6659,7 @@ var Form = function Form(_ref) {
                 formRef: formRef
               })]
             }), /*#__PURE__*/jsx("div", {
-              className: "neeto-ui-bg-white sticky bottom-0 py-6",
+              className: "bg-background sticky bottom-0 py-6",
               children: /*#__PURE__*/jsx(ActionBlock, {
                 cancelButtonProps: {
                   onClick: handleCancel