@bigbinary/neeto-rules-frontend 2.5.60 → 2.5.62

package/dist/cjs/v2/NeetoRulesForm.js

@@ -2,16 +2,15 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
-var useDebouncedUpdate = require('../../useDebouncedUpdate-6Ibug5MF.js');
+var useDebouncedUpdate = require('../../useDebouncedUpdate-DDFcag0p.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var shallow = require('zustand/shallow');
 var react = require('react');
 var neetoAtoms = require('@bigbinary/neeto-atoms');
 var formik = require('formik');
+var lucideReact = require('lucide-react');
 var neetoCist = require('@bigbinary/neeto-cist');
-var Plus = require('@bigbinary/neeto-icons/Plus');
-var Delete = require('@bigbinary/neeto-icons/Delete');
 var reactI18next = require('react-i18next');
 var useUtilityStore = require('../../useUtilityStore-DkxAexDw.js');
 var classNames = require('classnames');
@@ -19,34 +18,24 @@ var ramda = require('ramda');
 var i18next = require('i18next');
 var yup = require('yup');
 var formik$1 = require('@bigbinary/neeto-atoms/formik');
-var Search = require('@bigbinary/neeto-icons/Search');
-var useCustomDataStore = require('../../useCustomDataStore-DipT25Pg.js');
+var useCustomDataStore = require('../../useCustomDataStore-D9k8F5g-.js');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var jsxRuntime = require('react/jsx-runtime');
-var Collapse = require('@bigbinary/neeto-icons/Collapse');
-var Left = require('@bigbinary/neeto-icons/Left');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
 var Editor = require('@monaco-editor/react');
-var Help = require('@bigbinary/neeto-icons/Help');
-var DynamicVariables = require('@bigbinary/neeto-molecules/DynamicVariables');
+var DynamicVariables = require('@bigbinary/neeto-molecules/v2/DynamicVariables');
 var utils = require('@bigbinary/neeto-commons-frontend/v2/utils');
 var utils$1 = require('../../utils-B3roKiff.js');
 var FormikEditor = require('@bigbinary/neeto-editor/FormikEditor');
-var Refresh = require('@bigbinary/neeto-icons/Refresh');
 var useHotkeys = require('@bigbinary/neeto-hotkeys');
-var Check = require('@bigbinary/neeto-icons/Check');
-var Close = require('@bigbinary/neeto-icons/Close');
 var CreatableSelect = require('react-select/creatable');
 var _toArray = require('@babel/runtime/helpers/toArray');
-var PhoneNumber = require('@bigbinary/neeto-molecules/PhoneNumber');
+var PhoneNumber = require('@bigbinary/neeto-molecules/v2/PhoneNumber');
 var reactSelect = require('react-select');
 var constants = require('../../constants-dLBadaIU.js');
 var initializers = require('@bigbinary/neeto-commons-frontend/v2/initializers');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var utils$2 = require('@bigbinary/neeto-editor/utils');
-var Eye = require('@bigbinary/neeto-icons/Eye');
-var Down = require('@bigbinary/neeto-icons/Down');
 var Container = require('@bigbinary/neeto-molecules/v2/Container');
 var NeetoHeader = require('@bigbinary/neeto-molecules/v2/Header');
 require('@bigbinary/neeto-commons-frontend/react-utils');
@@ -93,7 +82,7 @@ var Footer = function Footer(_ref) {
     className = _ref.className;
   return /*#__PURE__*/jsxRuntime.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
   });
 };
@@ -101,30 +90,27 @@ var Footer = function Footer(_ref) {
 var Header = function Header(_ref) {
   var children = _ref.children,
     className = _ref.className;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow.shallow),
+    })),
     resetPanelState = _useUtilityStore.resetPanelState;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
       className: "flex min-w-0 grow",
       children: children
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
       className: "shrink-0 scale-x-[-1] rtl:rotate-180",
       "data-testid": "collapse-sidebar-button",
-      icon: Collapse,
+      icon: lucideReact.PanelRightClose,
       size: "default",
+      title: t("neetoRules.common.collapseSidebar"),
       variant: "ghost",
-      tooltipProps: {
-        content: t("neetoRules.common.collapseSidebar"),
-        placement: "bottom"
-      },
       onClick: resetPanelState
     })]
   });
@@ -134,12 +120,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.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         panelState: store["panelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow.shallow),
+    })),
     panelState = _useUtilityStore.panelState,
     resetPanelState = _useUtilityStore.resetPanelState;
   var config = {
@@ -161,7 +147,7 @@ var Panel = function Panel() {
     large: "neeto-rules-side-panel--large"
   }[panelState.size] || "neeto-rules-side-panel--small";
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Component, _objectSpread$u(_objectSpread$u({}, data), {}, {
       onClose: resetPanelState
@@ -175,7 +161,7 @@ Panel.Footer = Footer;
 var StickySidebarHeader = function StickySidebarHeader(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsxRuntime.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
   });
 };
@@ -334,15 +320,15 @@ var ActionPanel = function ActionPanel() {
     _useState2 = _slicedToArray(_useState, 2),
     searchTerm = _useState2[0],
     setSearchTerm = _useState2[1];
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow.shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore.useUtilityStore(shallow.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"],
@@ -353,7 +339,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.shallow),
+    })),
     index = _useUtilityStore2.index,
     name = _useUtilityStore2.name,
     actionOptions = _useUtilityStore2.actionOptions,
@@ -408,11 +394,11 @@ var ActionPanel = function ActionPanel() {
         className: "flex flex-col space-y-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
           "data-testid": "action-title",
-          variant: "h3",
+          variant: "h5",
           children: [label, "..."]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
           "data-testid": "action-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addActionDescription")
         })]
       })
@@ -424,7 +410,7 @@ var ActionPanel = function ActionPanel() {
         children: [isSearchable && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
           "data-testid": "search-text-field",
           placeholder: t("neetoRules.common.search"),
-          prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
+          prefix: /*#__PURE__*/jsxRuntime.jsx(lucideReact.Search, {}),
           value: searchTerm,
           onChange: function onChange(e) {
             return setSearchTerm(e.target.value);
@@ -490,17 +476,16 @@ var Target$k = function Target(_ref) {
   var label = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.placeholder) || defaultLabel;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [separator && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "long-text-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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();
@@ -673,7 +658,7 @@ var KeyValuePairsField = reactUtils.withT(function (_ref) {
               placeholder: t("neetoRules.labels.value"),
               type: "text",
               suffix: showDeleteButton && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-                icon: Delete,
+                icon: lucideReact.Trash2,
                 size: "default",
                 variant: "ghost",
                 onClick: function onClick() {
@@ -844,7 +829,7 @@ var JsonEditor = function JsonEditor(_ref) {
       "data-testid": "api-field-body"
     }, neetoCist.isPresent(helpPopoverProps) && {
       helpIconProps: {
-        icon: Help,
+        icon: lucideReact.CircleHelp,
         popoverProps: buildHelpPopoverProps(helpPopoverProps)
       }
     }), {}, {
@@ -868,7 +853,7 @@ var JsonEditor = function JsonEditor(_ref) {
         onChange: handleChange,
         onMount: handleEditorDidMount
       }), error && touched && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "neeto-ui-input__error",
+        className: "text-destructive text-xs",
         "data-testid": "json-field-input-error",
         children: error
       })]
@@ -1002,17 +987,16 @@ var Target$j = function Target(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "api-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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
     })]
@@ -1033,11 +1017,11 @@ var ApiFields = function ApiFields(_ref2) {
     }),
     ref = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         isSaveAsTemplateEnabled: store["isSaveAsTemplateEnabled"]
       };
-    }, shallow.shallow),
+    })),
     isSaveAsTemplateEnabled = _useUtilityStore.isSaveAsTemplateEnabled;
   var hasFieldChanged = useHasFieldChanged(name);
   var templates = (selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates) || [];
@@ -1126,16 +1110,15 @@ var Target$i = function Target(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
       "data-testid": "custom-action-button-".concat(neetoCist.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
     })]
@@ -1186,16 +1169,15 @@ var Target$h = function Target(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "action-dropdown-seperator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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
     })]
@@ -1350,17 +1332,16 @@ var Target$g = function Target(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "action-dropdown-seperator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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
     })]
@@ -1410,7 +1391,7 @@ var SelectField$2 = function SelectField(_ref2) {
     })), handleSlackChannelRefresh && action.name === "message_to_slack" && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
       className: "mt-[22px]",
       "data-testid": "refresh-slack-button",
-      icon: Refresh,
+      icon: lucideReact.RefreshCw,
       size: "default",
       variant: "outline",
       tooltipProps: {
@@ -1454,17 +1435,16 @@ var Target$f = function Target(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "action-email-seperator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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
     })]
@@ -1496,11 +1476,11 @@ var EmailFields = function EmailFields(_ref2) {
     }),
     initialFocusRef = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         isSaveAsTemplateEnabled: store["isSaveAsTemplateEnabled"]
       };
-    }, shallow.shallow),
+    })),
     isSaveAsTemplateEnabled = _useUtilityStore.isSaveAsTemplateEnabled;
   var hasFieldChanged = useHasFieldChanged(name);
   var templates = selectedField === null || selectedField === void 0 ? void 0 : selectedField.templates;
@@ -1605,17 +1585,17 @@ var Target$e = function Target(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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__*/jsxRuntime.jsx(neetoAtoms.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
     })]
@@ -1705,14 +1685,14 @@ var InlineInput = /*#__PURE__*/react.forwardRef(function (props, ref) {
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
           "data-testid": "inline-input-submit-button",
           disabled: !isValidValue,
-          icon: Check,
+          icon: lucideReact.Check,
           tooltipProps: LIST_FIELD_TOOLTIP_PROPS.save,
           variant: "ghost",
           onClick: onSubmit
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
           ref: ref,
           "data-testid": "inline-input-cancel-button",
-          icon: Close,
+          icon: lucideReact.X,
           tooltipProps: LIST_FIELD_TOOLTIP_PROPS.cancel,
           variant: "ghost",
           onClick: handleCancel
@@ -1746,17 +1726,16 @@ var Target$d = function Target(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "list-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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
     })]
@@ -1789,16 +1768,16 @@ var ListField = function ListField(_ref2) {
         return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [values.map(function (item, index) {
             return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(neetoAtoms.Typography, {
                 className: "w-4/5 overflow-x-auto",
                 "data-testid": "list-action-item-label",
-                variant: "body2",
+                variant: "body1",
                 children: item
               }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
                 className: "shrink-0",
                 "data-testid": "list-action-delete-item-button",
-                icon: Delete,
+                icon: lucideReact.Trash2,
                 size: "default",
                 variant: "ghost",
                 onClick: function onClick() {
@@ -1811,9 +1790,9 @@ var ListField = function ListField(_ref2) {
             className: "w-full",
             children: function children(message) {
               return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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
               });
             }
@@ -1827,7 +1806,7 @@ var ListField = function ListField(_ref2) {
           }) : /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
             ref: ref,
             "data-testid": "list-action-add-item-button",
-            icon: Plus,
+            icon: lucideReact.Plus,
             label: t("neetoRules.common.addItem"),
             size: "default",
             variant: "ghost",
@@ -1872,18 +1851,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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "multi-select-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), neetoCist.isNotEmpty(selectedOptions) ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("span", {
           className: "flex flex-wrap items-center gap-x-2 gap-y-1",
           children: [!!idx && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "neeto-ui-text-gray-700",
-            variant: "h5",
+            variant: "body1",
             onClick: function onClick(e) {
               return e.stopPropagation();
             },
@@ -1892,11 +1870,11 @@ var Target$c = function Target(_ref) {
             })
           }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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();
@@ -1908,9 +1886,9 @@ var Target$c = function Target(_ref) {
     }) : /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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();
@@ -1980,18 +1958,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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "multi-select-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), neetoCist.isNotEmpty(selectedOptions) ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("span", {
           className: "flex flex-wrap items-center gap-x-2 gap-y-1",
           children: [!!idx && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "neeto-ui-text-gray-700",
-            variant: "h5",
+            variant: "body1",
             onClick: function onClick(e) {
               return e.stopPropagation();
             },
@@ -2000,11 +1977,11 @@ var Target$b = function Target(_ref) {
             })
           }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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();
@@ -2016,9 +1993,9 @@ var Target$b = function Target(_ref) {
     }) : /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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();
@@ -2108,17 +2085,16 @@ var Target$a = function Target(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "note-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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
     })]
@@ -2185,17 +2161,17 @@ var Target$9 = function Target(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!selectedField.hideSeparator && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700 font-normal",
       "data-testid": "action-radio-seperator-text",
-      variant: "h5",
+      variant: "body1",
+      weight: "normal",
       children: separator
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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
     })]
@@ -2302,22 +2278,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__*/jsxRuntime.jsx(reactSelect.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__*/jsxRuntime.jsx(Close, {
+    children: /*#__PURE__*/jsxRuntime.jsx(lucideReact.X, {
       size: 16
     })
   }));
@@ -2334,7 +2311,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__*/jsxRuntime.jsxs(reactSelect.components.ValueContainer, _objectSpread$m(_objectSpread$m({}, props), {}, {
     innerProps: _objectSpread$m(_objectSpread$m({}, props.innerProps), {}, _defineProperty({}, "data-testid", "multi-phone-number-input-container")),
@@ -2349,7 +2326,7 @@ var ValueContainer = function ValueContainer(_ref) {
 var ClearIndicator = function ClearIndicator(props) {
   return /*#__PURE__*/jsxRuntime.jsx(reactSelect.components.ClearIndicator, _objectSpread$m(_objectSpread$m({}, props), {}, {
     innerProps: _objectSpread$m(_objectSpread$m({}, props.innerProps), {}, _defineProperty({}, "data-testid", "clear-all-button")),
-    children: /*#__PURE__*/jsxRuntime.jsx(Close, {
+    children: /*#__PURE__*/jsxRuntime.jsx(lucideReact.X, {
       className: "cursor-pointer",
       size: 16
     })
@@ -2474,15 +2451,15 @@ var MultiPhoneNumberInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       ref: ref,
       value: value
     }, otherProps))), !!error && /*#__PURE__*/jsxRuntime.jsxs("p", {
-      className: "neeto-ui-input__error",
+      className: "text-destructive text-xs",
       "data-testid": "".concat(dasherize(label), "-input-error"),
       children: [formatErrorMessage(error), isFilterPhoneNumbersLinkVisible && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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")
     })]
@@ -2557,17 +2534,16 @@ var Target$8 = function Target(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
       "data-testid": "sms-action-separator-text",
-      variant: "h5",
+      variant: "body1",
       children: separator
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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
     })]
@@ -2598,11 +2574,11 @@ var SmsFields = function SmsFields(_ref2) {
     }),
     initialFocusRef = _useActiveField2.ref,
     setFieldActive = _useActiveField2.setFieldActive;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         isSaveAsTemplateEnabled: store["isSaveAsTemplateEnabled"]
       };
-    }, shallow.shallow),
+    })),
     isSaveAsTemplateEnabled = _useUtilityStore.isSaveAsTemplateEnabled;
   var hasFieldChanged = useHasFieldChanged(name);
   var _useFormikContext = formik.useFormikContext(),
@@ -3040,17 +3016,18 @@ var ActionSubItem = function ActionSubItem(_ref) {
 var ActionSubItem$1 = /*#__PURE__*/react.memo(ActionSubItem);
 
 var ActionSubItemPanel = function ActionSubItemPanel() {
+  var _selectedField$label;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow.shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore.useUtilityStore(shallow.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"],
@@ -3061,7 +3038,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.shallow),
+    })),
     name = _useUtilityStore2.name,
     index = _useUtilityStore2.index,
     action = _useUtilityStore2.action,
@@ -3079,7 +3056,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() {
@@ -3097,7 +3074,7 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
           children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
             className: "shrink-0 rtl:rotate-180",
             "data-testid": "back-button",
-            icon: Left,
+            icon: lucideReact.ChevronLeft,
             size: "default",
             variant: "ghost",
             tooltipProps: {
@@ -3115,12 +3092,12 @@ var ActionSubItemPanel = function ActionSubItemPanel() {
             }
           }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
             "data-testid": "action-sub-item-title",
-            variant: "h3",
+            variant: "h5",
             children: header
           })]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
           "data-testid": "action-sub-item-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addActionSubItemDescription")
         })]
       })
@@ -3186,9 +3163,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();
@@ -3282,9 +3259,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();
@@ -3353,16 +3330,15 @@ var Target$5 = function Target(_ref) {
       var _option$label;
       return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
         children: [!!idx && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-          className: "neeto-ui-text-gray-700",
-          variant: "h5",
+          variant: "body1",
           children: t("neetoRules.common.or")
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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();
@@ -3375,9 +3351,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();
@@ -3444,16 +3420,15 @@ var Target$4 = function Target(_ref) {
       var _option$label;
       return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
         children: [!!idx && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-          className: "neeto-ui-text-gray-700",
-          variant: "h5",
+          variant: "body1",
           children: t("neetoRules.common.or")
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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();
@@ -3466,9 +3441,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();
@@ -3598,16 +3573,15 @@ var Target$3 = function Target(_ref) {
       var _option$label;
       return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
         children: [!!idx && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-          className: "neeto-ui-text-gray-700",
-          variant: "h5",
+          variant: "body1",
           children: t("neetoRules.common.or")
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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();
@@ -3620,9 +3594,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();
@@ -3694,9 +3668,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();
@@ -3751,7 +3725,7 @@ var RadioField$1 = function RadioField(_ref2) {
       children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
         "data-testid": "search-text-field",
         placeholder: t("neetoRules.common.search"),
-        prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
+        prefix: /*#__PURE__*/jsxRuntime.jsx(lucideReact.Search, {}),
         value: searchTerm,
         onChange: function onChange(e) {
           return setSearchTerm(e.target.value);
@@ -3820,9 +3794,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();
@@ -3897,9 +3871,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();
@@ -3970,13 +3944,13 @@ var FieldPanel = function FieldPanel() {
   var _findBy;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"]
       };
-    }, shallow.shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState;
-  var _useUtilityStore2 = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore.useUtilityStore(shallow.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"],
@@ -3985,7 +3959,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.shallow),
+    })),
     index = _useUtilityStore2.index,
     name = _useUtilityStore2.name,
     handleFieldChange = _useUtilityStore2.handleFieldChange,
@@ -4017,11 +3991,11 @@ var FieldPanel = function FieldPanel() {
         className: "flex flex-col space-y-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
           "data-testid": "condition-title",
-          variant: "h3",
+          variant: "h5",
           children: [index ? logicalOperatorLabel : conditionLabel, "..."]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
           "data-testid": "condition-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addConditionDescription")
         })]
       })
@@ -4173,15 +4147,15 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
   var _findBy, _findBy2;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow.shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore.useUtilityStore(shallow.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"],
@@ -4194,7 +4168,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.shallow),
+    })),
     index = _useUtilityStore2.index,
     name = _useUtilityStore2.name,
     selectedField = _useUtilityStore2.selectedField,
@@ -4223,7 +4197,7 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
     setVerbTouched = _useField8[2].setTouched;
   var fieldLabel = (_findBy = neetoCist.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 = neetoCist.findBy({
     value: logicalOperator.value
@@ -4243,7 +4217,7 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
           className: "flex items-center space-x-2",
           children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
             className: "shrink-0 rtl:rotate-180",
-            icon: Left,
+            icon: lucideReact.ChevronLeft,
             size: "default",
             variant: "ghost",
             tooltipProps: {
@@ -4260,12 +4234,12 @@ var VerbAndValuePanel = function VerbAndValuePanel() {
             }
           }), /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
             "data-testid": "condition-verb-and-value-title",
-            variant: "h3",
+            variant: "h5",
             children: [index ? logicalOperatorLabel : conditionLabel, " ", fieldLabel, "..."]
           })]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
           "data-testid": "condition-verb-and-value-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addConditionVerbAndValueDescription")
         })]
       })
@@ -4311,18 +4285,18 @@ function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t
 var DelayPanel = function DelayPanel() {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow.shallow),
+    })),
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore.useUtilityStore(shallow.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.shallow),
+    })),
     name = _useUtilityStore2.name;
   var _useFormikContext = formik.useFormikContext(),
     setFieldTouched = _useFormikContext.setFieldTouched;
@@ -4348,10 +4322,10 @@ var DelayPanel = function DelayPanel() {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col space-y-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-          variant: "h3",
+          variant: "h5",
           children: t("neetoRules.common.addDelay")
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.helpText.addDelay")
         })]
       })
@@ -4405,6 +4379,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() {
@@ -4414,15 +4390,15 @@ var EventsPanel = function EventsPanel() {
     _useState2 = _slicedToArray(_useState, 2),
     searchTerm = _useState2[0],
     setSearchTerm = _useState2[1];
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow.shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore.useUtilityStore(shallow.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"],
@@ -4433,7 +4409,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.shallow),
+    })),
     name = _useUtilityStore2.name,
     data = _useUtilityStore2.data,
     performerName = _useUtilityStore2.performerName,
@@ -4464,11 +4440,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) {
@@ -4480,23 +4456,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);
     }));
@@ -4602,11 +4577,11 @@ var EventsPanel = function EventsPanel() {
         className: "flex flex-col space-y-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
           "data-testid": "event-title",
-          variant: "h3",
+          variant: "h5",
           children: [t("neetoRules.common.when"), "..."]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
           "data-testid": "event-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addEventDescription")
         })]
       })
@@ -4618,7 +4593,7 @@ var EventsPanel = function EventsPanel() {
         children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
           "data-testid": "search-text-field",
           placeholder: t("neetoRules.common.search"),
-          prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
+          prefix: /*#__PURE__*/jsxRuntime.jsx(lucideReact.Search, {}),
           value: searchTerm,
           onChange: function onChange(e) {
             return setSearchTerm(e.target.value);
@@ -4663,7 +4638,7 @@ var EventsPanel = function EventsPanel() {
           "data-testid": "no-options-menu-item",
           children: t("neetoRules.common.noOptions")
         }), error && touched && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "neeto-ui-input__error",
+          className: "text-destructive text-xs",
           "data-testid": "event-field-input-error",
           children: error
         })]
@@ -4681,22 +4656,22 @@ var EventsPanel = function EventsPanel() {
 var PerformerPanel = function PerformerPanel() {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow.shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
-  var _useUtilityStore2 = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore.useUtilityStore(shallow.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.shallow),
+    })),
     data = _useUtilityStore2.data,
     performerName = _useUtilityStore2.performerName,
     isMenuDisabled = _useUtilityStore2.isMenuDisabled;
@@ -4743,7 +4718,7 @@ var PerformerPanel = function PerformerPanel() {
           children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
             className: "shrink-0 rtl:rotate-180",
             "data-testid": "back-button",
-            icon: Left,
+            icon: lucideReact.ChevronLeft,
             size: "default",
             variant: "ghost",
             tooltipProps: {
@@ -4760,12 +4735,12 @@ var PerformerPanel = function PerformerPanel() {
             }
           }), /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
             "data-testid": "performer-title",
-            variant: "h3",
+            variant: "h5",
             children: [t("neetoRules.form.actionTriggeredBy"), "..."]
           })]
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
           "data-testid": "performer-description",
-          variant: "body2",
+          variant: "body1",
           children: t("neetoRules.form.addPerformerDescription")
         })]
       })
@@ -5214,20 +5189,20 @@ var ActionItem = function ActionItem(_ref) {
   var _useActiveField = useCustomDataStore.useActiveField(name),
     isFieldActive = _useActiveField.isFieldActive,
     setFieldActive = _useActiveField.setFieldActive;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         setErrorFields: store["setErrorFields"]
       };
-    }, shallow.shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     setErrorFields = _useUtilityStore.setErrorFields;
-  var _useUtilityStore2 = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore.useUtilityStore(shallow.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.shallow),
+    })),
     panelIndex = _useUtilityStore2.index;
   var ActionChildren = action.children;
   var defaultLabel = t("neetoRules.form.doThis");
@@ -5333,16 +5308,15 @@ var ActionItem = function ActionItem(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-wrap items-center gap-x-2 gap-y-3",
       children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-        className: "neeto-ui-text-gray-700",
-        variant: "h5",
+        variant: "body1",
         children: label
       }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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__*/jsxRuntime.jsx(ActionSubItem$1, _objectSpread$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, panelData), {}, {
@@ -5372,12 +5346,12 @@ var Card = function Card(_ref) {
     children = _ref.children;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-600",
+      color: "muted",
       "data-testid": "".concat(utils.joinHyphenCase(title), "-card-title"),
       variant: "h4",
       children: title
     }), /*#__PURE__*/jsxRuntime.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
     })]
   });
@@ -5410,12 +5384,12 @@ var Actions = function Actions(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     shouldOpenPanel = _useState2[0],
     setShouldOpenPanel = _useState2[1];
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         resetPanelState: store["resetPanelState"],
         setIsSaveAsTemplateEnabled: store["setIsSaveAsTemplateEnabled"]
       };
-    }, shallow.shallow),
+    })),
     resetPanelState = _useUtilityStore.resetPanelState,
     setIsSaveAsTemplateEnabled = _useUtilityStore.setIsSaveAsTemplateEnabled;
   var elementProps = data[name] || {};
@@ -5461,7 +5435,7 @@ var Actions = function Actions(_ref) {
                 className: "flex flex-wrap shrink-0 self-center",
                 children: [showButton && index === actions.length - 1 && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
                   "data-testid": "add-action-button",
-                  icon: Plus,
+                  icon: lucideReact.Plus,
                   size: "default",
                   variant: "ghost",
                   tooltipProps: {
@@ -5474,7 +5448,7 @@ var Actions = function Actions(_ref) {
                   }
                 }), actions.length > 1 && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
                   "data-testid": "delete-action-button-".concat(index),
-                  icon: Delete,
+                  icon: lucideReact.Trash2,
                   size: "default",
                   variant: "ghost",
                   tooltipProps: {
@@ -5513,11 +5487,11 @@ var LogicalOperator = function LogicalOperator(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
     customTarget: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
       "data-testid": "logic-operator-button",
-      icon: Down,
+      icon: lucideReact.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
     }),
@@ -5552,18 +5526,18 @@ var ConditionItem = function ConditionItem(_ref) {
   var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue,
     setFieldTouched = _useFormikContext.setFieldTouched;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"]
       };
-    }, shallow.shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState;
-  var _useUtilityStore2 = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore2 = useUtilityStore.useUtilityStore(shallow.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.shallow),
+    })),
     panelIndex = _useUtilityStore2.index;
   var conditionOptions = elementProps.conditionOptions;
   var selectedField = getFieldDetails(condition.field, conditionOptions);
@@ -5640,14 +5614,12 @@ var ConditionItem = function ConditionItem(_ref) {
       isWithEvents: isWithEvents,
       name: "".concat(name, ".joinType")
     }), isWithEvents && !index && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
-      variant: "h5",
+      variant: "body1",
       children: t("neetoRules.common.and", {
         what: ""
       })
     }), !index && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
-      variant: "h5",
+      variant: "body1",
       children: defaultLabel
     }), /*#__PURE__*/jsxRuntime.jsx(RadioField$1.Target, {
       name: "".concat(name, ".field"),
@@ -5706,11 +5678,11 @@ var Conditions = function Conditions(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     shouldOpenPanel = _useState2[0],
     setShouldOpenPanel = _useState2[1];
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow.shallow),
+    })),
     resetPanelState = _useUtilityStore.resetPanelState;
   var elementProps = data[name] || {};
   var conditions = ((_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.value) || [];
@@ -5770,7 +5742,7 @@ var Conditions = function Conditions(_ref) {
               className: "flex",
               children: [index === conditions.length - 1 && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
                 "data-testid": "add-condition-button",
-                icon: Plus,
+                icon: lucideReact.Plus,
                 size: "default",
                 variant: "ghost",
                 tooltipProps: {
@@ -5782,7 +5754,7 @@ var Conditions = function Conditions(_ref) {
                 }
               }), (allowEmpty || index !== 0) && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
                 "data-testid": "delete-condition-button-".concat(index),
-                icon: Delete,
+                icon: lucideReact.Trash2,
                 size: "default",
                 variant: "ghost",
                 tooltipProps: {
@@ -5796,7 +5768,7 @@ var Conditions = function Conditions(_ref) {
             })]
           }, index);
         }), ramda.isEmpty(conditions) && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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",
@@ -5807,7 +5779,7 @@ var Conditions = function Conditions(_ref) {
           children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
             className: "mt-2",
             "data-testid": "preview-callback-button",
-            icon: Eye,
+            icon: lucideReact.Eye,
             label: t("neetoRules.common.preview"),
             variant: "outline",
             onClick: function onClick() {
@@ -5826,12 +5798,12 @@ var AddDelay = function AddDelay(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var addDelayButtonRef = react.useRef(null);
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"],
         resetPanelState: store["resetPanelState"]
       };
-    }, shallow.shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState,
     resetPanelState = _useUtilityStore.resetPanelState;
   var _ref2 = data[name] || {},
@@ -5870,7 +5842,8 @@ var AddDelay = function AddDelay(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [showAddDelayButton && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-      icon: Plus,
+      icon: lucideReact.Plus,
+      iconPosition: "left",
       label: t("neetoRules.common.addDelay"),
       ref: addDelayButtonRef,
       size: "default",
@@ -5883,14 +5856,14 @@ var AddDelay = function AddDelay(_ref) {
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex items-center gap-2 flex-wrap min-w-0 grow",
           children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            variant: "body2",
+            variant: "body1",
             children: t("neetoRules.form.delayExecutionBy")
           }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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();
@@ -5899,8 +5872,8 @@ var AddDelay = function AddDelay(_ref) {
           }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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();
@@ -5910,7 +5883,7 @@ var AddDelay = function AddDelay(_ref) {
         }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
           className: "shrink-0",
           "data-testid": "delete-delay-button",
-          icon: Delete,
+          icon: lucideReact.Trash2,
           size: "default",
           variant: "ghost",
           tooltipProps: {
@@ -5942,11 +5915,11 @@ var Performer = function Performer(_ref) {
   var _useFormikContext = formik.useFormikContext(),
     values = _useFormikContext.values,
     errors = _useFormikContext.errors;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"]
       };
-    }, shallow.shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState;
   var elementProps = data[performerName] || {};
   var performer = values[performerName].value;
@@ -5978,16 +5951,15 @@ var Performer = function Performer(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "my-auto flex items-center gap-x-2 gap-y-3",
     children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700",
-      variant: "h5",
+      variant: "body1",
       children: t("neetoRules.common.by")
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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
     })]
@@ -6011,11 +5983,11 @@ var Events = function Events(_ref) {
   var _useFormikContext = formik.useFormikContext(),
     values = _useFormikContext.values,
     errors = _useFormikContext.errors;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         setPanelState: store["setPanelState"]
       };
-    }, shallow.shallow),
+    })),
     setPanelState = _useUtilityStore.setPanelState;
   var elementProps = data[name] || {};
   var events = values[name].value || [];
@@ -6055,8 +6027,8 @@ var Events = function Events(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "my-auto flex flex-wrap items-center gap-x-2 gap-y-3",
     children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-      className: "neeto-ui-text-gray-700 my-auto",
-      variant: "h5",
+      className: "my-auto",
+      variant: "body1",
       children: t("neetoRules.common.when")
     }), neetoCist.isNotEmpty(allEvents) ? /*#__PURE__*/jsxRuntime.jsx("span", {
       className: "flex flex-wrap items-center gap-x-2 gap-y-1",
@@ -6064,16 +6036,15 @@ var Events = function Events(_ref) {
         var _event$label;
         return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
           children: [!!idx && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "neeto-ui-text-gray-700",
-            variant: "h5",
+            variant: "body1",
             children: t("neetoRules.common.or")
           }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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
           })]
@@ -6083,9 +6054,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__*/jsxRuntime.jsx(Performer, {
@@ -6171,7 +6142,7 @@ var EventConditions = function EventConditions(_ref) {
             children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
               "data-testid": "add-condition-button",
               disabled: isConditionsEmpty,
-              icon: Plus,
+              icon: lucideReact.Plus,
               size: "default",
               variant: "ghost",
               onClick: handleAddCondition
@@ -6187,9 +6158,12 @@ var EventConditions = function EventConditions(_ref) {
           openPanel: shouldOpenConditionsPanel
         }, config))
       })]
-    }), enableAddingDelay && /*#__PURE__*/jsxRuntime.jsx(AddDelay, {
-      data: data,
-      name: "execution_delay"
+    }), enableAddingDelay && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "mt-6",
+      children: /*#__PURE__*/jsxRuntime.jsx(AddDelay, {
+        data: data,
+        name: "execution_delay"
+      })
     })]
   });
 };
@@ -6441,9 +6415,10 @@ var Status = function Status() {
   return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Switch, {
     checked: defaultValue === ENABLED,
     label: t("neetoRules.labels.active"),
+    size: "lg",
     labelProps: {
       helpIconProps: {
-        icon: Help,
+        icon: lucideReact.CircleHelp,
         tooltipProps: {
           content: status.value === ENABLED ? t("neetoRules.tooltips.rule.active") : t("neetoRules.tooltips.rule.inactive")
         }
@@ -6593,18 +6568,18 @@ var Form = function Form(_ref) {
     t = _useTranslation.t;
   var formikRef = react.useRef(null);
   var formRef = react.useRef(null);
-  var _useCustomDataStore = useCustomDataStore.useCustomDataStore(function (store) {
+  var _useCustomDataStore = useCustomDataStore.useCustomDataStore(shallow.useShallow(function (store) {
       return {
         customData: store["customData"]
       };
-    }, shallow.shallow),
+    })),
     customData = _useCustomDataStore.customData;
-  var _useUtilityStore = useUtilityStore.useUtilityStore(function (store) {
+  var _useUtilityStore = useUtilityStore.useUtilityStore(shallow.useShallow(function (store) {
       return {
         resetPanelState: store["resetPanelState"],
         errorFields: store["errorFields"]
       };
-    }, shallow.shallow),
+    })),
     resetPanelState = _useUtilityStore.resetPanelState,
     errorFields = _useUtilityStore.errorFields;
   var initialValues = react.useMemo(function () {
@@ -6669,33 +6644,35 @@ var Form = function Form(_ref) {
             children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "space-y-6",
               children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex items-center gap-x-3",
-                children: [/*#__PURE__*/jsxRuntime.jsx(InputField, {
-                  data: initialValues,
-                  label: t("neetoRules.common.name"),
-                  name: "name",
-                  placeholder: isNameGenerationDisabled ? "" : t("neetoRules.placeholders.autoGenerateName")
-                }), isGeneratingName && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                  children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tooltip, {
-                    content: t("neetoRules.form.aiGeneratedName"),
-                    position: "top",
-                    children: /*#__PURE__*/jsxRuntime.jsx("span", {
-                      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {
-                        size: "sm"
+                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex items-center gap-x-3",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(InputField, {
+                    data: initialValues,
+                    label: t("neetoRules.common.name"),
+                    name: "name",
+                    placeholder: isNameGenerationDisabled ? "" : t("neetoRules.placeholders.autoGenerateName")
+                  }), isGeneratingName && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tooltip, {
+                      content: t("neetoRules.form.aiGeneratedName"),
+                      position: "top",
+                      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+                        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {
+                          size: "sm"
+                        })
                       })
-                    })
-                  }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-                    icon: Close,
-                    size: "sm",
-                    variant: "ghost",
-                    tooltipProps: {
-                      content: t("neetoRules.buttons.cancelNameGeneration"),
-                      position: "top"
-                    },
-                    onClick: handleCancelNameGeneration
+                    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+                      icon: lucideReact.X,
+                      size: "sm",
+                      variant: "ghost",
+                      tooltipProps: {
+                        content: t("neetoRules.buttons.cancelNameGeneration"),
+                        position: "top"
+                      },
+                      onClick: handleCancelNameGeneration
+                    })]
                   })]
-                })]
-              }), showStatusSwitch && /*#__PURE__*/jsxRuntime.jsx(Status, {}), typeof _children === "function" ? _children === null || _children === void 0 ? void 0 : _children(_objectSpread$1({
+                }), showStatusSwitch && /*#__PURE__*/jsxRuntime.jsx(Status, {})]
+              }), typeof _children === "function" ? _children === null || _children === void 0 ? void 0 : _children(_objectSpread$1({
                 values: values,
                 formattedValues: buildPayload(data, values),
                 dirty: dirty
@@ -6703,7 +6680,7 @@ var Form = function Form(_ref) {
                 formRef: formRef
               })]
             }), /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "neeto-ui-bg-white sticky bottom-0 py-6",
+              className: "bg-background sticky bottom-0 py-6",
               children: /*#__PURE__*/jsxRuntime.jsx(formik$1.ActionBlock, {
                 cancelButtonProps: {
                   onClick: handleCancel